From fad25e951cc471ffd39ad01466eff7367c73a7fb Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Tue, 4 Nov 2025 21:13:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E9=A1=B6=E9=83=A8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/chat/ChatMainList/index.vue    |  8 +---
 .../components/chat/ChatTopNavBar/index.vue   | 28 +++++++++++---
 .../chat/ChatTopNavBar/styles/index.scss      | 37 +++++++++++++------
 src/static/scss/height.scss                   | 12 ++++++
 src/static/scss/margin.scss                   |  4 ++
 src/static/scss/width.scss                    |  8 ++++
 6 files changed, 74 insertions(+), 23 deletions(-)

diff --git a/src/pages/index/components/chat/ChatMainList/index.vue b/src/pages/index/components/chat/ChatMainList/index.vue
index 1c7f483..624bf74 100644
--- a/src/pages/index/components/chat/ChatMainList/index.vue
+++ b/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);
diff --git a/src/pages/index/components/chat/ChatTopNavBar/index.vue b/src/pages/index/components/chat/ChatTopNavBar/index.vue
index c5e81dc..2bedfe8 100644
--- a/src/pages/index/components/chat/ChatTopNavBar/index.vue
+++ b/src/pages/index/components/chat/ChatTopNavBar/index.vue
@@ -1,14 +1,32 @@
 <template>
-  <view class="nav-bar">
-    <view class="nav-item" @click="showDrawer">
-      <uni-icons type="bars" size="24" color="#333" />
+  <view class="border-box h-44 flex flex-items-center pl-12 pr-12">
+    <uni-icons type="bars" size="24" color="#333" @click="showDrawer" />
+
+    <!-- 隐藏 -->
+    <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 { checkToken } from "@/hooks/useGoLogin";
+import { defineProps, computed } from "vue";
+
+const props = defineProps({
+  mainPageDataModel: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const logoImageUrl = computed(
+  () => props.mainPageDataModel.initPageImages?.logoImageUrl
+);
 
 const showDrawer = () => uni.$emit("SHOW_DRAWER");
 </script>
diff --git a/src/pages/index/components/chat/ChatTopNavBar/styles/index.scss b/src/pages/index/components/chat/ChatTopNavBar/styles/index.scss
index 7249b0e..ce97c48 100644
--- a/src/pages/index/components/chat/ChatTopNavBar/styles/index.scss
+++ b/src/pages/index/components/chat/ChatTopNavBar/styles/index.scss
@@ -1,16 +1,29 @@
-.nav-bar {
-  display: flex;
-  align-items: center;
-  height: 44px;
-  padding: 0 15px;
+// 图片从0%到100%动画
+.image-animated {
+  animation: logo-scale 0.3s ease-in-out;
+}
 
-  .nav-item {
-    width: 24px;
-    height: 24px;
-    margin-right: 10px;
+@keyframes logo-scale {
+  0% {
+    transform: scale(0);
   }
-  .nav-item-icon {
-    width: 100%;
-    height: 100%;
+  100% {
+    transform: scale(1);
+  }
+}
+
+// 文字从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);
   }
 }
diff --git a/src/static/scss/height.scss b/src/static/scss/height.scss
index b041705..48d2d61 100644
--- a/src/static/scss/height.scss
+++ b/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;
+}
diff --git a/src/static/scss/margin.scss b/src/static/scss/margin.scss
index fca2cb4..195ec81 100644
--- a/src/static/scss/margin.scss
+++ b/src/static/scss/margin.scss
@@ -59,6 +59,10 @@
   margin-bottom: 10px;
 }
 
+.ml-10 {
+  margin-left: 10px;
+}
+
 .m-12 {
   margin: 12px;
 }
diff --git a/src/static/scss/width.scss b/src/static/scss/width.scss
index 00e014c..b96ad81 100644
--- a/src/static/scss/width.scss
+++ b/src/static/scss/width.scss
@@ -6,6 +6,14 @@
   width: 100vw;
 }
 
+.w-24 {
+  width: 24px;
+}
+
+.w-32 {
+  width: 32px;
+}
+
 .w-50 {
   width: 50%;
 }