From ec6049ffa44fcb6a264de24576600a1ea8b33817 Mon Sep 17 00:00:00 2001
From: lihui <lihui030304@163.com>
Date: Sun, 9 Nov 2025 10:07:39 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=B6=88=E6=81=AF=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/SvgIcons/go-top.svg   |   3 +
 src/assets/images/no-message.svg |  91 +++++++++++++
 src/views/home.vue               | 280 ++++++++++++++++++++++++++-------------
 3 files changed, 280 insertions(+), 94 deletions(-)
 create mode 100644 src/assets/SvgIcons/go-top.svg
 create mode 100644 src/assets/images/no-message.svg

diff --git a/src/assets/SvgIcons/go-top.svg b/src/assets/SvgIcons/go-top.svg
new file mode 100644
index 0000000..eb59bd5
--- /dev/null
+++ b/src/assets/SvgIcons/go-top.svg
@@ -0,0 +1,3 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="design-iconfont">
+  <path d="M12 0C18.6277 0 24 5.37235 24 12C24 18.6277 18.6277 24 12 24C5.37235 24 0 18.6277 0 12C0 5.37235 5.37235 0 12 0ZM12.2609 7.82609C12.2416 7.82609 12.2223 7.82713 12.2035 7.8287L12.1962 7.82974L12.1763 7.83235L12.1623 7.83443L12.1492 7.83652C12.1435 7.83765 12.1377 7.83887 12.132 7.84017L12.1231 7.84226C12.1165 7.84387 12.1099 7.84561 12.1033 7.84748L12.0965 7.84957C12.0897 7.85152 12.0829 7.85361 12.0762 7.85583C12.0741 7.85583 12.0725 7.85687 12.071 7.85739L12.0501 7.86522L12.0449 7.86678C12.0378 7.86975 12.0309 7.87288 12.024 7.87617L12.0198 7.87774L11.9974 7.88817L11.9948 7.88974C11.941 7.91771 11.8918 7.95358 11.8487 7.99617L6.94956 12.7283C6.89684 12.7785 6.85487 12.8389 6.82618 12.9058C6.7975 12.9727 6.78271 13.0448 6.78271 13.1176C6.78271 13.1904 6.7975 13.2624 6.82618 13.3293C6.85487 13.3962 6.89684 13.4566 6.94956 13.5068C7.17235 13.7217 7.53391 13.7217 7.7567 13.5068L11.6911 9.70696V18.2311C11.6911 18.515 11.9134 18.7492 12.1988 18.779L12.2598 18.7826L12.3209 18.7795C12.6063 18.7492 12.827 18.515 12.827 18.2311V9.70591L16.764 13.5042C16.8731 13.6078 17.0179 13.6653 17.1684 13.6649C17.3188 13.6644 17.4633 13.6059 17.5717 13.5016C17.6245 13.4517 17.6666 13.3915 17.6954 13.3248C17.7242 13.2581 17.739 13.1862 17.7391 13.1135C17.7391 13.0408 17.7244 12.9689 17.6957 12.9022C17.667 12.8354 17.6249 12.7752 17.5722 12.7252L12.6642 7.98783C12.5558 7.88361 12.4112 7.82561 12.2609 7.82609ZM17.7068 5.73913H6.29322C5.98696 5.73913 5.73913 5.97287 5.73913 6.26087C5.73913 6.54887 5.98696 6.78261 6.29322 6.78261H17.7068C18.013 6.78261 18.2609 6.54887 18.2609 6.26087C18.2609 5.97287 18.013 5.73913 17.7068 5.73913Z" fill="#7E91FF"/>
+</svg>
diff --git a/src/assets/images/no-message.svg b/src/assets/images/no-message.svg
new file mode 100644
index 0000000..7a95d48
--- /dev/null
+++ b/src/assets/images/no-message.svg
@@ -0,0 +1,91 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 213 228" class="design-iconfont">
+  <path fill="url(#m7rkxv55j__paint0_linear_1114_40373)" d="M106.5 54A106.5 87 0 1 0 106.5 228A106.5 87 0 1 0 106.5 54Z"/>
+  <path d="M118.862 32.8712C119.112 32.1425 119.538 31.5143 120.088 31.0636C120.638 30.6128 121.29 30.3589 121.962 30.333H147.81C149.359 30.333 150.405 31.7971 150.156 33.6066L141.979 90.5647C141.834 91.4655 141.431 92.2819 140.836 92.8795C140.241 93.4771 139.488 93.8202 138.704 93.852H73.888C73.5351 93.868 73.1838 93.7893 72.861 93.622C72.5382 93.4548 72.2526 93.2035 72.0261 92.8873C71.7996 92.5712 71.6382 92.1987 71.5543 91.7984C71.4705 91.3982 71.4664 90.9808 71.5424 90.5784L78.4943 42.09C78.6413 41.192 79.0455 40.379 79.6406 39.7842C80.2356 39.1895 80.9862 38.8482 81.7693 38.8163H111.623C114.678 38.8027 117.678 36.3432 118.862 32.8712Z" fill="url(#m7rkxv55j__paint1_linear_1114_40373)" fill-opacity=".3"/>
+  <path d="M103.744 0L87.3789 66.3404L124.813 78.9073L141.176 12.5669L103.744 0Z" fill="url(#m7rkxv55j__paint2_linear_1114_40373)" fill-opacity=".3"/>
+  <path d="M103.744 0L87.3789 66.3404L124.813 78.9073L141.176 12.5669L103.744 0Z" fill="url(#m7rkxv55j__paint3_linear_1114_40373)" fill-opacity=".3"/>
+  <path d="M103.018 2.93945L87.3789 66.3406L123.54 78.4811L138.198 12.8619L103.018 2.93945Z" fill="#fff" opacity=".9"/>
+  <path d="M103.018 2.93945L87.3789 66.3406L123.54 78.4811L138.198 12.8619L103.018 2.93945Z" fill="url(#m7rkxv55j__paint4_linear_1114_40373)"/>
+  <path d="M103.018 2.93945L87.3789 66.3406L123.54 78.4811L138.198 12.8619L103.018 2.93945Z" fill="url(#m7rkxv55j__paint5_linear_1114_40373)" opacity=".9"/>
+  <path opacity=".6" d="M103.018 2.93945L87.3789 66.3406L123.54 78.4811L138.198 12.8619L103.018 2.93945Z" fill="url(#m7rkxv55j__paint6_linear_1114_40373)"/>
+  <path d="M116.274 20.9001C118.728 17.6269 118.443 12.653 115.637 9.79051C112.831 6.92805 108.568 7.26104 106.114 10.5343C103.661 13.8075 103.946 18.7814 106.752 21.6439C109.558 24.5063 113.821 24.1734 116.274 20.9001Z" fill="#fff"/>
+  <path d="M109.711 21.7047C108.695 21.3622 107.789 20.676 107.107 19.7328C106.425 18.7897 105.999 17.6319 105.881 16.4058C105.763 15.1797 105.96 13.9405 106.445 12.8446C106.931 11.7487 107.685 10.8455 108.61 10.2491C109.536 9.65271 110.593 9.38989 111.646 9.49389C112.7 9.59788 113.704 10.064 114.53 10.8334C115.357 11.6027 115.97 12.6408 116.291 13.8163C116.612 14.9917 116.627 16.2519 116.334 17.4375C116.14 18.2254 115.815 18.961 115.377 19.6021C114.938 20.2431 114.396 20.7771 113.781 21.1735C113.166 21.5698 112.49 21.8207 111.791 21.9119C111.093 22.003 110.386 21.9326 109.711 21.7047Z" fill="#fff"/>
+  <path d="M113.798 28.2754L101.883 24.2764L101.112 27.4008L113.027 31.3999L113.798 28.2754Z" fill="#fff"/>
+  <path d="M101.966 52.7718L95.3984 50.5674L92.4034 62.7132L98.9714 64.9177L101.966 52.7718Z" fill="#fff"/>
+  <path d="M125.209 60.5736L118.641 58.3691L115.646 70.515L122.214 72.7194L125.209 60.5736Z" fill="#fff"/>
+  <path d="M113.588 56.6742L107.02 54.4697L104.024 66.6155L110.592 68.82L113.588 56.6742Z" fill="#fff"/>
+  <path d="M123.424 31.5042L115.363 28.7988L114.593 31.9233L122.653 34.6286L123.424 31.5042Z" fill="#fff"/>
+  <path d="M129.702 40.962L100.207 31.0625L99.8896 32.3497L129.384 42.2492L129.702 40.962Z" fill="#fff"/>
+  <path d="M114.197 38.7203L99.5312 33.7979L99.2138 35.085L113.88 40.0075L114.197 38.7203Z" fill="#fff"/>
+  <path d="M126.517 42.855L116.707 39.5625L116.39 40.8497L126.199 44.1421L126.517 42.855Z" fill="#fff"/>
+  <path d="M122.437 44.4437L98.8594 36.5303L98.542 37.8175L122.119 45.7309L122.437 44.4437Z" fill="#fff"/>
+  <path d="M124.987 48.6479L97.9141 39.4355L97.5926 40.7214L124.666 49.9337L124.987 48.6479Z" fill="#fff"/>
+  <path d="M100.639 43.0537L97.5078 42.0029L97.1904 43.2901L100.321 44.3409L100.639 43.0537Z" fill="#fff"/>
+  <path d="M116.986 48.5406L103.152 43.8975L102.835 45.1847L116.669 49.8278L116.986 48.5406Z" fill="#fff"/>
+  <path d="M126.331 54.6388L96.8359 44.7393L96.5185 46.0264L126.013 55.926L126.331 54.6388Z" fill="#fff"/>
+  <path d="M99.3875 2.32129L85 69.2913L122.778 80.3414L137.163 13.3713L99.3875 2.32129Z" fill="#fff"/>
+  <path d="M99.3875 2.32129L85 69.2913L122.778 80.3414L137.163 13.3713L99.3875 2.32129Z" fill="url(#m7rkxv55j__paint7_linear_1114_40373)"/>
+  <path d="M104.717 11.4719C107.556 9.87209 111.109 11.2144 112.567 14.7355C114.025 18.2569 112.718 22.3386 109.878 23.939C107.038 25.5391 103.485 24.1959 102.027 20.6744C100.57 17.153 101.877 13.072 104.717 11.4719Z" fill="url(#m7rkxv55j__paint8_linear_1114_40373)" stroke="#fff" stroke-width="1.85257"/>
+  <path d="M110.272 30.1658L98.2461 26.6494L97.5686 29.8031L109.595 33.3195L110.272 30.1658Z" fill="#fff"/>
+  <path d="M111.689 20.7098L104.477 13.0215L102.748 14.6426L109.961 22.331L111.689 20.7098Z" fill="#fff"/>
+  <path d="M104.689 22.2091L112.039 14.6523L110.341 13.0002L102.99 20.557L104.689 22.2091Z" fill="#fff"/>
+  <path d="M99.1762 55.1269L92.5469 53.1885L89.9133 65.4478L96.5427 67.3862L99.1762 55.1269Z" fill="#fff"/>
+  <path d="M122.629 61.9863L116 60.0479L113.366 72.3071L119.996 74.2455L122.629 61.9863Z" fill="#fff"/>
+  <path d="M110.903 58.5566L104.273 56.6182L101.64 68.8774L108.269 70.8159L110.903 58.5566Z" fill="#fff"/>
+  <path d="M119.987 33.0058L111.852 30.627L111.174 33.7806L119.31 36.1594L119.987 33.0058Z" fill="#fff"/>
+  <path d="M126.544 42.2037L96.7734 33.499L96.4943 34.7982L126.265 43.503L126.544 42.2037Z" fill="#fff"/>
+  <path d="M110.983 40.5871L96.1797 36.2588L95.9006 37.558L110.704 41.8864L110.983 40.5871Z" fill="#fff"/>
+  <path d="M123.417 44.2222L113.516 41.3271L113.237 42.6264L123.138 45.5214L123.417 44.2222Z" fill="#fff"/>
+  <path d="M119.384 45.9779L95.5859 39.0195L95.3068 40.3187L119.104 47.2771L119.384 45.9779Z" fill="#fff"/>
+  <path d="M122.351 49.7807L94.9961 41.7822L94.717 43.0814L122.072 51.08L122.351 49.7807Z" fill="#fff"/>
+  <path d="M97.5584 45.4699L94.3984 44.5459L94.1193 45.8451L97.2793 46.7691L97.5584 45.4699Z" fill="#fff"/>
+  <path d="M114.061 50.2908L100.098 46.208L99.8186 47.5072L113.782 51.59L114.061 50.2908Z" fill="#fff"/>
+  <path d="M123.579 56.0084L93.8086 47.3037L93.5295 48.6029L123.3 57.3076L123.579 56.0084Z" fill="#fff"/>
+  <path d="M101.598 44.7615C101.654 43.4787 102.615 42.5723 103.923 42.5723H129.775C131.323 42.5723 132.815 43.8345 133.108 45.3943L140.869 91.0128C141.163 92.5727 140.142 93.8383 138.594 93.8383H73.7699C72.2189 93.8383 70.7265 92.5727 70.4333 91.0128L64.0502 52.7044C63.757 51.1445 64.7774 49.8789 66.3284 49.8789H96.1706C99.2346 49.8789 101.475 47.758 101.598 44.7615Z" fill="url(#m7rkxv55j__paint9_linear_1114_40373)" fill-opacity=".9"/>
+  <path fill="#BAC4FF" d="M104 89A17 2 0 1 0 104 93A17 2 0 1 0 104 89Z"/>
+  <path d="M39.9301 101.421H36.3327C36.1559 101.421 36.019 101.266 36.0406 101.091C36.7132 95.6164 36.7827 90.0846 36.2477 84.5949L36.1619 83.7144C36.1369 83.4574 36.4976 83.3734 36.5887 83.615C38.5251 88.7539 39.703 94.1474 40.0852 99.6257L40.191 101.141C40.2016 101.293 40.0817 101.421 39.9301 101.421Z" fill="#BAC4FF"/>
+  <path d="M43.0449 101.421H39.0781C38.7862 101.421 38.5608 101.164 38.5986 100.875C39.3921 94.7913 40.6367 88.7751 42.3222 82.876L43.2786 79.5285C43.3588 79.2479 43.7758 79.327 43.7477 79.6175C43.0757 86.5616 42.997 93.5504 43.5123 100.508L43.5405 100.887C43.5618 101.176 43.3338 101.421 43.0449 101.421Z" fill="#BAC4FF"/>
+  <path fill="#BAC4FF" d="M162.398 97.4004H163.998V111.0004H162.398z"/>
+  <path d="M169.6 98.8081C169.6 101.123 166.556 103 162.8 103C159.044 103 156 101.123 156 98.8081C156 96.493 159.044 87 162.8 87C166.556 87 169.6 96.493 169.6 98.8081Z" fill="#BAC4FF"/>
+  <defs>
+    <linearGradient id="m7rkxv55j__paint0_linear_1114_40373" x1="106.957" y1="4.5" x2="106.78" y2="141" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#BAC4FF" stop-opacity=".58"/>
+      <stop offset="1" stop-color="#2741DE" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="m7rkxv55j__paint1_linear_1114_40373" x1="150.193" y1="62.0935" x2="71.4883" y2="62.0935" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2741DE"/>
+      <stop offset="1" stop-color="#BAC4FF"/>
+    </linearGradient>
+    <linearGradient id="m7rkxv55j__paint2_linear_1114_40373" x1="141.176" y1="39.4537" x2="87.3789" y2="39.4537" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2741DE"/>
+      <stop offset="1" stop-color="#BAC4FF"/>
+    </linearGradient>
+    <linearGradient id="m7rkxv55j__paint3_linear_1114_40373" x1="141.176" y1="39.4537" x2="87.3789" y2="39.4537" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2741DE"/>
+      <stop offset="1" stop-color="#BAC4FF"/>
+    </linearGradient>
+    <linearGradient id="m7rkxv55j__paint4_linear_1114_40373" x1="138.198" y1="40.7103" x2="87.3789" y2="40.7103" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2741DE"/>
+      <stop offset="1" stop-color="#A2ABDE"/>
+    </linearGradient>
+    <linearGradient id="m7rkxv55j__paint5_linear_1114_40373" x1="138.198" y1="40.7103" x2="87.3789" y2="40.7103" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2741DE"/>
+      <stop offset="1" stop-color="#A2ABDE"/>
+    </linearGradient>
+    <linearGradient id="m7rkxv55j__paint6_linear_1114_40373" x1="138.198" y1="40.7103" x2="87.3789" y2="40.7103" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2741DE"/>
+      <stop offset="1" stop-color="#A2ABDE"/>
+    </linearGradient>
+    <linearGradient id="m7rkxv55j__paint7_linear_1114_40373" x1="137.163" y1="41.3313" x2="85" y2="41.3313" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2741DE"/>
+      <stop offset="1" stop-color="#A2ABDE"/>
+    </linearGradient>
+    <linearGradient id="m7rkxv55j__paint8_linear_1114_40373" x1="113.374" y1="14.2813" x2="100.578" y2="19.5786" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2741DE"/>
+      <stop offset="1" stop-color="#A2ABDE"/>
+    </linearGradient>
+    <linearGradient id="m7rkxv55j__paint9_linear_1114_40373" x1="64.2732" y1="46.2293" x2="72.2459" y2="91.503" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2741DE"/>
+      <stop offset="1" stop-color="#BAC4FF"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/src/views/home.vue b/src/views/home.vue
index fbdf7de..67b3656 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,27 +1,21 @@
 <script setup>
 // 导航栏在这
-import {computed, ref} from 'vue'
+import {computed, onMounted, onUnmounted, ref} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import {ElMessage} from 'element-plus'
-import dmmn from '../assets/link.png'
 import ChangePassword from '@/components/dialogs/changePassword.vue'
 import {useAdminStore} from '@/store'
 import {storeToRefs} from 'pinia'
 import {filterMenu, getRoutePath} from "@/utils/menuUtils.js";
-import {Bell} from '@element-plus/icons-vue'
+// 刷新数据功能
+import API from '@/util/http.js'
+import bell from '@/assets/SvgIcons/bell.svg'
 
-import SettingsIcon from '@/assets/blue.png';
+import noMessage from '@/assets/images/no-message.svg'
 
 // 使用import.meta.glob导入所有SVG图标（修复版本）
 const icons = import.meta.glob('@/assets/SvgIcons/*.svg', {eager: true})
 
-// import from '@/assets/SvgIcons/workbench.svg'
-// import from '@/assets/SvgIcons/activity.png'
-// import from '@/assets/SvgIcons/activity.png'
-// import from '@/assets/SvgIcons/activity.png'
-// import from '@/assets/SvgIcons/activity.png'
-
-
 const menuNameMap = {
   '工作台': 'workbench',
   '金币管理': 'gold-management',
@@ -52,9 +46,6 @@ const getIconPath = (menuName) => {
   }
 }
 
-// 刷新数据功能
-import API from '@/util/http.js'
-
 // 数据刷新功能实现
 const refreshData = async () => {
   try {
@@ -123,7 +114,6 @@ const activeMenu = computed(() => {
   return findBestMatch(menuList.value, route.path)
 })
 const router = useRouter()
-const imgrule1 = dmmn
 const messageVisible = ref(false)
 
 // 查看个人信息弹出框
@@ -173,11 +163,7 @@ const toggleFlag = () => {
 // 消息推送逻辑
 // 控制 MessageDialog 显示状态
 
-import bell from '@/assets/SvgIcons/bell.svg'
-
-import noMessage from '@/assets/images/no-message.svg'
-
-const messageNum  = ref(0)
+const messageNum = ref(0)
 const showMessageDialog = ref(false)
 // 消息小红点状态
 const messageDot = ref(true)
@@ -196,12 +182,22 @@ const closeMessageDialog = () => {
 
 // 模拟消息数据
 const messageList = ref([
-  { id: 1, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2分钟前', group: '今天' },
-  { id: 2, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '1小时前', group: '今天' },
-  { id: 3, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '昨天 09:30', group: '昨天' },
-  { id: 4, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '昨天 08:30', group: '昨天' },
-  { id: 5, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早' },
-  { id: 6, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早' },
+  {id: 1, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2分钟前', group: '今天'},
+  {id: 2, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '1小时前', group: '今天'},
+  {id: 3, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '昨天 09:30', group: '昨天'},
+  {id: 4, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '昨天 08:30', group: '昨天'},
+  {id: 5, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
+  {id: 6, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
+  {id: 7, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
+  {id: 8, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
+  {id: 9, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
+  {id: 10, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
+  {id: 11, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
+  {id: 12, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
+  {id: 13, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
+  {id: 14, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
+  {id: 15, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
+  {id: 16, title: '现金管理—收款明细', desc: 'XXX（用户）的收款单被驳回', time: '2025-11-05 10:05:20', group: '更早'},
 ]);
 
 // 按时间分组
@@ -213,10 +209,65 @@ messageList.value.forEach(item => {
   groupedMessages.value[item.group].push(item);
 });
 
+// 控制是否显示全部
+const showAll = ref(false);
+
+
+// 计算属性：根据showAll状态返回需要显示的消息
+const displayMessages = computed(() => {
+  if (showAll.value) {
+    return groupedMessages.value;
+  }
+
+  // 默认只展示前两条消息（跨分组）
+  const limitedMessages = {};
+  let count = 0;
+
+  // 保持分组顺序（今天 -> 昨天 -> 更早）
+  const groupOrder = ['今天', '昨天', '更早'];
+
+  for (const groupName of groupOrder) {
+    const group = groupedMessages.value[groupName];
+    if (!group) continue;
+
+    limitedMessages[groupName] = [];
+    for (const item of group) {
+      if (count < 2) {
+        limitedMessages[groupName].push(item);
+        count++;
+      } else {
+        break;
+      }
+    }
+
+    // 如果该分组没有数据了就删除
+    if (limitedMessages[groupName].length === 0) {
+      delete limitedMessages[groupName];
+    }
+
+    if (count >= 2) break;
+  }
+
+  return limitedMessages;
+});
+
+// 切换显示全部/收起
+const toggleShowAll = () => {
+  showAll.value = !showAll.value;
+};
+
+// 控制返回顶部按钮状态
+
+const scrollContainer = ref(null)
+const scrollToTop = () => {
+  scrollContainer.value?.scrollTo({top: 0, behavior: 'smooth'})
+}
+
 </script>
 
 <template>
   <div class="main-container">
+    <iframe src="http://192.168.40.8:8081/Money/ceshi" style="display:none"></iframe>
     <!-- 背景毛玻璃层（作为内容容器） -->
     <div class="background-glass">
       <!-- 侧边栏 -->
@@ -313,7 +364,7 @@ messageList.value.forEach(item => {
             </div>
             <!-- 消息提示  这里的 小红点不用el-badge 他在切换状态会抽一下 应该是dom问题 -->
             <div class="message-container">
-              <div class="relative">
+              <div style="position: relative;">
                 <el-image :src="bell" style="width: 28px; height: 28px;" @click="openMessageDialog"></el-image>
                 <span v-show="messageDot" class="dot"></span>
               </div>
@@ -368,41 +419,72 @@ messageList.value.forEach(item => {
       <ChangePassword ref="pwdRef" @confirm="showPasswordDialog = false"/>
     </el-dialog>
 
+    <!--消息推送的弹窗-->
     <el-dialog style="background: #F3FAFE" v-model="showMessageDialog" title="" width="500px">
-      <div v-if="messageNum !== 0">
-        | 消息 ({{ messageNum }})
+      <div class="message-title">
         <el-divider
-            style="height: 2px; align-self: stretch; background: #CEE5FE; border: none;"
+            class="divider"
+            direction="vertical"
         ></el-divider>
+        消息中心 ({{ messageNum }})
+      </div>
+      <!--      todo 这是为了样式显示 一定要改逻辑-->
+      <div v-if="messageNum !== 0">
         <div class="no-message">
-
           <el-image :src="noMessage"></el-image>
           <p class="no-message-text">暂无未办消息，快去处理工作吧～</p>
         </div>
       </div>
-      <div v-else>
-        | 消息 ({{ messageNum }})
+      <div v-else
+           ref="scrollContainer"
+           style="max-height: 60vh; overflow-y: auto;">
         <!-- 按时间分组的消息列表 -->
-        <div v-for="(group, time) in groupedMessages" :key="time" class="message-group">
-          <div class="time-header" style="display: flex; align-items: center; gap: 8px;">
-            {{ time }}             <span class="little-dot"></span>
-
+        <div
+            v-for="(group, time) in displayMessages"
+            :key="time"
+            style="margin-bottom: 16px;"
+        >
+          <div class="time-header">
+            {{ time }} <span class="little-dot"></span>
             <el-divider
-                style="height: 2px; align-self: stretch;   flex: 1;background: #CEE5FE; border: none;"
+                style="height: 2px; align-self: stretch;flex: 1;background: #CEE5FE; border: none;"
             ></el-divider>
           </div>
-          <div v-for="item in group" :key="item.id" class="message-item">
-            <div class="message-content">
-              <span class="message-title">{{ item.title }}</span>
-              <p class="message-desc">{{ item.desc }}</p>
+          <div
+              v-for="item in group"
+              :key="item.id"
+              class="message-item"
+          >
+            <div style="display: flex; margin-bottom: 10px">
+              <span class="red-dot"></span>
+              <span class="message-card-title">{{ item.title }}</span>
+              <div class="message-time">{{ item.time }}</div>
             </div>
-            <el-button type="primary" size="small" class="view-btn">前往查看</el-button>
-            <div class="message-time">{{ item.time }}</div>
+
+            <p class="message-desc">{{ item.desc }}</p>
+            <el-button
+                type="primary"
+                style="margin: 0 auto; display: block;"
+            >
+              前往查看
+            </el-button>
           </div>
         </div>
-        <el-button type="text" class="view-all">查看全部</el-button>
-      </div>
 
+        <!-- 控制按钮 -->
+        <div class="message-actions">
+          <el-button
+              type="text"
+              class="view-all"
+              @click="toggleShowAll"
+          >
+            {{ showAll ? '收起' : '查看全部' }}
+          </el-button>
+
+          <image src="@"   @click="scrollToTop" style="width: 20px; height: 20px;"/>
+          返回顶部
+        </div>
+      </div>
 
     </el-dialog>
 
@@ -469,12 +551,6 @@ messageList.value.forEach(item => {
   align-items: center; /* 垂直居中 */
 }
 
-.message-container {
-  padding: 10px 50px 10px 50px; /* 上，右， 下，左 */
-  display: flex;
-  align-items: center; /* 垂直居中 */
-}
-
 /* 调整下拉菜单的样式，确保它向上弹出 */
 
 .el-dropdown-link:focus {
@@ -589,12 +665,7 @@ messageList.value.forEach(item => {
   /* Firefox滑块和轨道颜色 */
 }
 
-
-/* 添加相对定位，用于添加消息点 */
-.relative {
-  position: relative;
-}
-
+/* 小红点 */
 .dot {
   position: absolute;
   top: -2px;
@@ -605,72 +676,92 @@ messageList.value.forEach(item => {
   border-radius: 50%;
 }
 
-/* 整体样式 */
-.message {
-  background: #0d84ff;
+/* 消息中心整体容器 */
+.message-container {
+  padding: 10px 50px 10px 50px; /* 上，右， 下，左 */
+  display: flex;
+  align-items: center; /* 垂直居中 */
+}
 
+/* 消息中心标题 */
+.message-title {
+  display: flex;
+  font-size: 16px;
+  color: black;
+
+  .divider {
+    align-items: flex-start;
+    gap: 36px;
+    align-self: stretch;
+    height: 20px;
+    border-left: 3px solid #266EFF;
+  }
 }
 
 /* 无消息的样式 */
 .no-message {
   text-align: center;
   position: relative;
-}
 
-.no-message-text {
-  position: absolute;
-  top: 60%;
-  left: 50%;
-  /* 水平垂直居中 */
-  transform: translate(-50%, -50%);
-  /* 文字样式 */
-  font-weight: bold;
-  margin: 0;
-  /* 可添加更多样式（如字体大小、阴影等） */
-  font-size: 14px;
+  .no-message-text {
+    position: absolute;
+    top: 60%;
+    left: 50%;
+    /* 水平垂直居中 */
+    transform: translate(-50%, -50%);
+    /* 文字样式 */
+    font-weight: bold;
+    margin: 0;
+    /* 可添加更多样式（如字体大小、阴影等） */
+    font-size: 14px;
+  }
 }
 
 
 /* 有消息的样式 */
-
-.message-group {
-  margin-bottom: 16px;
-}
 .time-header {
   font-size: 14px;
   color: #666;
-  margin-bottom: 8px;
-}
-.message-item {
   display: flex;
   align-items: center;
-  margin-bottom: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #eee;
+  gap: 8px;
 }
-.message-content {
-  flex: 1;
-}
-.message-tag {
-  color: red;
-  margin-right: 4px;
+
+.message-item {
+  height: 100px;
+  padding: 10px 10px 10px 10px;
+  border-radius: 4px;
+  border: 1px solid #E5E5E5;
+  background: #FCFEFF;
+  margin-bottom: 10px;
 }
-.message-title {
+
+.message-card-title {
   font-weight: bold;
   margin-right: 4px;
 }
+
+/* 圆点样式 */
+.red-dot {
+  width: 6px;
+  height: 6px;
+  margin-right: 9px;
+  border-radius: 50%;
+  background-color: red;
+}
+
 .message-desc {
   font-size: 13px;
   color: #666;
-  margin: 4px 0 0 0;
-}
-.view-btn {
-  margin-right: 16px;
+  margin: 4px 0 15px 15px;
 }
+
 .message-time {
+  margin-left: auto;
   font-size: 13px;
   color: #999;
 }
+
 .view-all {
   display: block;
   margin: 0 auto 16px;
@@ -684,4 +775,5 @@ messageList.value.forEach(item => {
   background-color: #CEE5FE;;
 }
 
+
 </style>
\ No newline at end of file