From 9b0f45f379bff33fa777035be2a0e6c98106ce90 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Fri, 29 May 2026 22:24:40 +0800
Subject: [PATCH] refactor: use global event bus for drawer trigger, polish UI
 components

- Replace local component emit chain with global event emitter for drawer visibility control
- Update drawer component styling: set fixed width, fix header layout and title text
- Replace uni-icons with van-icons in MineSetting component
- Adjust ChatTopNavBar: use settings icon, update button size and position
- Clean up unused event handlers and scoped styles in home page
---
 .../home/components/ChatMainList/index.vue    |  9 +++----
 .../home/components/ChatTopNavBar/index.vue   |  9 +++----
 .../components/MineSetting/index.vue          |  7 +++--
 .../home/components/DrawerSection/index.vue   |  8 +++---
 src/pages/home/index.vue                      | 26 +++++--------------
 5 files changed, 20 insertions(+), 39 deletions(-)

diff --git a/src/pages/home/components/ChatMainList/index.vue b/src/pages/home/components/ChatMainList/index.vue
index 742fbbb..3e1dc04 100644
--- a/src/pages/home/components/ChatMainList/index.vue
+++ b/src/pages/home/components/ChatMainList/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex h-[100dvh] flex-col relative overflow-hidden">
+  <div class="flex h-dvh flex-col relative overflow-hidden">
     <!-- 顶部自定义导航栏 -->
     <div class="absolute top-0 left-0 w-full z-10">
-      <ChatTopNavBar ref="topNavBarRef" :mainPageDataModel="mainPageDataModel" @showDrawer="handleShowDrawer" />
+      <ChatTopNavBar ref="topNavBarRef" :mainPageDataModel="mainPageDataModel" />
     </div>
 
     <div class="relative">
@@ -130,6 +130,7 @@
 
 <script setup>
 import { onMounted, nextTick, onUnmounted, ref } from "vue";
+import { emitter } from '@/utils/events'
 import { MessageRole, MessageType, CompName, Command } from "@/constants/ChatModel";
 
 import Welcome from "../Welcome/index.vue";
@@ -249,10 +250,6 @@ const handleChange = (i) => {
   console.log("切换:", i);
 };
 
-const handleShowDrawer = () => {
-  emit("showDrawer");
-};
-
 /// =============事件函数↓================
 const handleTouchEnd = () => {
   clearTimeout(holdKeyboardTimer.value);
diff --git a/src/pages/home/components/ChatTopNavBar/index.vue b/src/pages/home/components/ChatTopNavBar/index.vue
index ba1814a..83db740 100644
--- a/src/pages/home/components/ChatTopNavBar/index.vue
+++ b/src/pages/home/components/ChatTopNavBar/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="h-[44px] flex items-center pl-[12px] pr-[12px]">
-    <div class="w-[44px] h-[44px] flex items-center justify-center" @tap.stop="showDrawer">
-      <van-icon name="apps-o" size="24" color="#333" />
+    <div class="w-[24px] h-[24px] flex items-center justify-center">
+      <van-icon name="setting" size="24" color="#fff" @click="showDrawer" />
     </div>
 
     <!-- 隐藏 -->
@@ -25,6 +25,7 @@
 
 <script setup>
 import { ref, defineProps, computed, defineExpose } from "vue";
+import { emitter } from '@/utils/events'
 import SpriteAnimator from "@/components/SpriteAnimator/index.vue";
 
 const props = defineProps({
@@ -54,9 +55,7 @@ const spriteStyle = computed(() => {
   };
 });
 
-const emit = defineEmits(["showDrawer"]);
-
-const showDrawer = () => emit("showDrawer");
+const showDrawer = () => emitter.emit("SHOW_DRAWER");
 
 defineExpose({ show });
 </script>
diff --git a/src/pages/home/components/DrawerSection/components/MineSetting/index.vue b/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
index 030d0ee..f3e52a4 100644
--- a/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
+++ b/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
@@ -1,11 +1,10 @@
 <template>
-  <div class="p-[12px] bg-[#f6f6f6] min-h-screen">
+  <div class="p-[12px] bg-[#f6f6f6] flex-1">
     <!-- 顶部用户信息 -->
     <div class="bg-white rounded-[6px] pl-[12px] mb-[10px]">
       <div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
         <span class="text-[14px] text-[#333]">头像 </span>
-        <!-- <image class="avatar" :src="userInfo.avatar" mode="aspectFill" /> -->
-        <uni-icons type="contact" size="40" color="#ccc"></uni-icons>
+        <van-icon name="phone" size="20" color="#ccc"></van-icon>
       </div>
       <div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
         <span class="text-[14px] text-[#333]">昵称</span>
@@ -23,7 +22,7 @@
         class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0"
         @click="handleMenuClick(item)">
         <span class="text-[14px] text-[#333]">{{ item.label }}</span>
-        <uni-icons type="right" size="14" color="#ccc"></uni-icons>
+        <van-icon type="right" size="14" color="#ccc"></van-icon>
       </div>
     </div>
 
diff --git a/src/pages/home/components/DrawerSection/index.vue b/src/pages/home/components/DrawerSection/index.vue
index 4cf7359..622f831 100644
--- a/src/pages/home/components/DrawerSection/index.vue
+++ b/src/pages/home/components/DrawerSection/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <van-popup v-model:show="show" ref="drawerRef" position="left">
-    <div class="w-full h-screen bg-white pt-[44px]">
+  <van-popup v-model:show="show" ref="drawerRef" position="left" :style="{ height: '100%' }">
+    <div class="w-[280px]  bg-white flex flex-col h-full">
       <div class="relative p-3 flex justify-center items-center">
-        <van-icon name="cross" size="22" color="#333333" class="absolute left-3" @click="close" />
-        <span class="text-[18px] text-center text-[#333]">我的</span>
+        <span class="flex-1 text-[18px] text-center text-[#333]">设置</span>
+        <van-icon name="cross" size="22" color="#333333" class="absolute right-0" @click="close" />
       </div>
 
       <MineSetting ref="mineSettingRef" @close="close" />
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 6a4b554..a52b341 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -1,6 +1,7 @@
 <template>
-  <div class="index-page w-full h-[100dvh] overflow-hidden bg-liner">
-    <ChatMainList @showDrawer="showDrawer" />
+  <div
+    class="relative min-h-0 overscroll-none w-full h-dvh overflow-hidden bg-[linear-gradient(205deg,#E8FFF1_0%,rgba(138,227,252,0)_20%),linear-gradient(155deg,#fef7e1_0%,rgba(254,247,225,0)_20%),radial-gradient(48%_48%_at_61%_118%,#ffffff_0%,rgba(255,255,255,0)_100%),linear-gradient(180deg,rgba(238,248,255,0)_0%,#F0F8F3_50%),#F0F8F3]">
+    <ChatMainList />
 
     <!-- 日历组件 -->
     <Calender :visible="calendarVisible" mode="single" :default-value="selectedDate" @close="handleCalendarClose"
@@ -47,34 +48,19 @@ const openCalendar = () => {
 
 // 打开窗口
 const drawerRef = ref();
-const showDrawer = async () => {
-  // await checkToken();
-
+emitter.on("SHOW_DRAWER", () => {
   drawerRef.value.open();
-};
+});
+
 // 关闭窗口
 const closeDrawer = () => drawerRef.value.close();
 
 
 onMounted(() => {
   emitter.on("openCalendar", openCalendar);
-  emitter.on("SHOW_DRAWER", showDrawer);
 });
 
 onUnmounted(() => {
   emitter.off("openCalendar", openCalendar);
-  emitter.off("SHOW_DRAWER", showDrawer);
 });
 </script>
-
-<style lang="scss" scoped>
-.index-page {
-  position: relative;
-  min-height: 0;
-  overscroll-behavior: none;
-}
-
-.top {
-  margin-top: 150px;
-}
-</style>