From 3ce26d614d301a73a85004e7ef78c28ea0a10724 Mon Sep 17 00:00:00 2001
From: xiaoming <1923740402@qq.com>
Date: Fri, 30 Jan 2026 10:35:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8`layout`=E7=9A=84=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E4=B8=8B=E6=8B=89=E6=A1=86=E4=B8=AD=EF=BC=8C=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E2=80=9C=E6=9F=A5=E7=9C=8B=E6=9B=B4=E5=A4=9A=E2=80=9D?=
 =?UTF-8?q?=E5=92=8C=E2=80=9C=E6=A0=87=E4=B8=BA=E5=B7=B2=E8=AF=BB=E2=80=9D?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=20(#1263)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en.yaml                               |  2 +
 locales/zh-CN.yaml                            |  2 +
 .../lay-notice/components/NoticeItem.vue      | 12 ++++--
 .../lay-notice/components/NoticeList.vue      |  7 +++-
 src/layout/components/lay-notice/index.vue    | 41 ++++++++++++++++++-
 5 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/locales/en.yaml b/locales/en.yaml
index 64a27092a..31bf130f2 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -19,6 +19,8 @@ buttons:
   pureBackTop: BackTop
   pureOpenText: Open
   pureCloseText: Close
+  pureWatchMore: Watch More
+  pureMarkAsRead: Mark As Read
 search:
   pureTotal: Total
   pureHistory: History
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index 83bb3df51..dc55db717 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -19,6 +19,8 @@ buttons:
   pureBackTop: 回到顶部
   pureOpenText: 开
   pureCloseText: 关
+  pureWatchMore: 查看更多
+  pureMarkAsRead: 标为已读
 search:
   pureTotal: 共
   pureHistory: 搜索历史
diff --git a/src/layout/components/lay-notice/components/NoticeItem.vue b/src/layout/components/lay-notice/components/NoticeItem.vue
index 4608e6f77..b3ea18d08 100644
--- a/src/layout/components/lay-notice/components/NoticeItem.vue
+++ b/src/layout/components/lay-notice/components/NoticeItem.vue
@@ -8,6 +8,10 @@ defineProps({
   noticeItem: {
     type: Object as PropType<ListItem>,
     default: () => {}
+  },
+  isLast: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -49,7 +53,11 @@ function hoverDescription(event, description) {
 
 <template>
   <div
-    class="notice-container border-0 border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
+    :class="[
+      'notice-container',
+      'border-0 border-solid border-[#f0f0f0] dark:border-[#303030]',
+      { 'border-b': !isLast }
+    ]"
   >
     <el-avatar
       v-if="noticeItem.avatar"
@@ -119,8 +127,6 @@ function hoverDescription(event, description) {
   justify-content: space-between;
   padding: 12px 0;
 
-  // border-bottom: 1px solid #f0f0f0;
-
   .notice-container-avatar {
     margin-right: 16px;
     background: #fff;
diff --git a/src/layout/components/lay-notice/components/NoticeList.vue b/src/layout/components/lay-notice/components/NoticeList.vue
index 7bc9922cc..a2a1b0dee 100644
--- a/src/layout/components/lay-notice/components/NoticeList.vue
+++ b/src/layout/components/lay-notice/components/NoticeList.vue
@@ -18,7 +18,12 @@ defineProps({
 
 <template>
   <div v-if="list.length">
-    <NoticeItem v-for="(item, index) in list" :key="index" :noticeItem="item" />
+    <NoticeItem
+      v-for="(item, index) in list"
+      :key="index"
+      :noticeItem="item"
+      :isLast="index === list.length - 1"
+    />
   </div>
   <el-empty v-else :description="transformI18n(emptyText)" />
 </template>
diff --git a/src/layout/components/lay-notice/index.vue b/src/layout/components/lay-notice/index.vue
index b1f4d5ffc..e31dad803 100644
--- a/src/layout/components/lay-notice/index.vue
+++ b/src/layout/components/lay-notice/index.vue
@@ -3,9 +3,12 @@ import { useI18n } from "vue-i18n";
 import { ref, computed } from "vue";
 import { noticesData } from "./data";
 import NoticeList from "./components/NoticeList.vue";
+
 import BellIcon from "~icons/lucide/bell";
+import ArrowRightIcon from "~icons/ri/arrow-right-s-line";
 
 const { t } = useI18n();
+const dropdownRef = ref();
 const notices = ref(noticesData);
 const activeKey = ref(noticesData[0]?.key);
 
@@ -13,10 +16,30 @@ const getLabel = computed(
   () => item =>
     t(item.name) + (item.list.length > 0 ? `(${item.list.length})` : "")
 );
+
+const currentNoticeHasData = computed(() => {
+  const currentNotice = notices.value.find(
+    item => item.key === activeKey.value
+  );
+  return currentNotice && currentNotice.list.length > 0;
+});
+
+const onWatchMore = () => {
+  dropdownRef.value.handleClose();
+};
+
+const onMarkAsRead = () => {
+  const currentNotice = notices.value.find(
+    item => item.key === activeKey.value
+  );
+  if (currentNotice) {
+    currentNotice.list = [];
+  }
+};
 </script>
 
 <template>
-  <el-dropdown trigger="click" placement="bottom-end">
+  <el-dropdown ref="dropdownRef" trigger="click" placement="bottom-end">
     <span
       :class="['dropdown-badge', 'navbar-bg-hover', 'select-none', 'mr-[7px]']"
     >
@@ -42,7 +65,7 @@ const getLabel = computed(
           <span v-else>
             <template v-for="item in notices" :key="item.key">
               <el-tab-pane :label="getLabel(item)" :name="`${item.key}`">
-                <el-scrollbar max-height="330px">
+                <el-scrollbar max-height="345px">
                   <div class="noticeList-container">
                     <NoticeList :list="item.list" :emptyText="item.emptyText" />
                   </div>
@@ -51,6 +74,20 @@ const getLabel = computed(
             </template>
           </span>
         </el-tabs>
+        <div
+          v-if="currentNoticeHasData"
+          class="border-t border-t-(--el-border-color-light) text-sm"
+        >
+          <div class="flex-bc m-1">
+            <el-button type="primary" size="small" text @click="onWatchMore">
+              {{ t("buttons.pureWatchMore") }}
+              <IconifyIconOffline :icon="ArrowRightIcon" />
+            </el-button>
+            <el-button type="primary" size="small" text @click="onMarkAsRead">
+              {{ t("buttons.pureMarkAsRead") }}
+            </el-button>
+          </div>
+        </div>
       </el-dropdown-menu>
     </template>
   </el-dropdown>