feat: 调整首页顶部功能

src/pages/index/components/chat/ChatMainList/index.vue

@@ -2,7 +2,7 @@
   <view class="flex flex-col h-screen" @touchend="handleTouchEnd">
     <!-- 顶部自定义导航栏 -->
     <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
-      <ChatTopNavBar @openDrawer="openDrawer" />
+      <ChatTopNavBar :mainPageDataModel="mainPageDataModel" />
     </view>
 
     <!-- 消息列表（可滚动区域） -->
@@ -15,7 +15,7 @@
       @scrolltolower="handleScrollToLower"
     >
       <!-- welcome栏 -->
-      <ChatTopWelcome :mainPageDataModel="mainPageDataModel" />
+      <ChatTopWelcome ref="welcomeRef" :mainPageDataModel="mainPageDataModel" />
 
       <view
         class="area-msg-list-content"
@@ -202,10 +202,6 @@ let webSocketConnectStatus = false;
 // 当前会话的消息ID，用于保持发送和终止的messageId一致
 let currentSessionMessageId = null;
 
-// 打开抽屉
-const emits = defineEmits(["openDrawer"]);
-const openDrawer = () => emits("openDrawer");
-
 /// =============事件函数↓================
 const handleTouchEnd = () => {
   clearTimeout(holdKeyboardTimer.value);

src/pages/index/components/chat/ChatTopNavBar/index.vue

@@ -1,14 +1,32 @@
 <template>
-  <view class="nav-bar">
+  <view class="border-box h-44 flex flex-items-center pl-12 pr-12">
-    <view class="nav-item" @click="showDrawer">
+    <uni-icons type="bars" size="24" color="#333" @click="showDrawer" />
-      <uni-icons type="bars" size="24" color="#333" />
+
+    <!-- 隐藏 -->
+    <view class="flex-full h-full flex flex-items-center flex-justify-center">
+      <!-- 需要添加的image-animated动画 -->
+      <image class="w-32 h-32" :src="logoImageUrl" mode="aspectFit" />
+      <!-- 需要添加的text-animated动画 -->
+      <text class="font-size-14 font-500 color-171717 ml-10">沐沐</text>
     </view>
+
+    <view class="w-24 h-24"></view>
   </view>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { defineProps, computed } from "vue";
-import { checkToken } from "@/hooks/useGoLogin";
+
+const props = defineProps({
+  mainPageDataModel: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const logoImageUrl = computed(
+  () => props.mainPageDataModel.initPageImages?.logoImageUrl
+);
 
 const showDrawer = () => uni.$emit("SHOW_DRAWER");
 </script>

src/pages/index/components/chat/ChatTopNavBar/styles/index.scss

@@ -1,16 +1,29 @@
-.nav-bar {
+// 图片从0%到100%动画
-  display: flex;
+.image-animated {
-  align-items: center;
+  animation: logo-scale 0.3s ease-in-out;
-  height: 44px;
+}
-  padding: 0 15px;
 
-  .nav-item {
+@keyframes logo-scale {
-    width: 24px;
+  0% {
-    height: 24px;
+    transform: scale(0);
-    margin-right: 10px;
   }
-  .nav-item-icon {
+  100% {
-    width: 100%;
+    transform: scale(1);
-    height: 100%;
+  }
+}
+
+// 文字从0%到100%动画，从左到右
+.text-animated {
+  animation: text-fade-in 0.3s ease-in-out;
+}
+
+@keyframes text-fade-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
   }
 }

src/static/scss/height.scss

@@ -9,3 +9,15 @@
 .h-80 {
   height: 80px;
 }
+
+.h-44 {
+  height: 44px;
+}
+
+.h-32 {
+  height: 32px;
+}
+
+.h-24 {
+  height: 24px;
+}

src/static/scss/margin.scss

@@ -59,6 +59,10 @@
   margin-bottom: 10px;
 }
 
+.ml-10 {
+  margin-left: 10px;
+}
+
 .m-12 {
   margin: 12px;
 }

src/static/scss/width.scss

@@ -6,6 +6,14 @@
   width: 100vw;
 }
 
+.w-24 {
+  width: 24px;
+}
+
+.w-32 {
+  width: 32px;
+}
+
 .w-50 {
   width: 50%;
 }