feat: 在layout的消息下拉框中，新增“查看更多”和“标为已读”功能 (#1263)

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

locales/zh-CN.yaml

@@ -19,6 +19,8 @@ buttons:
   pureBackTop: 回到顶部
   pureOpenText: 开
   pureCloseText: 关
+  pureWatchMore: 查看更多
+  pureMarkAsRead: 标为已读
 search:
   pureTotal: 共
   pureHistory: 搜索历史

package.json

@@ -54,16 +54,16 @@
     "@logicflow/extension": "^1.2.28",
     "@pureadmin/descriptions": "^1.2.1",
     "@pureadmin/table": "^3.3.0",
-    "@pureadmin/utils": "^2.6.3",
+    "@pureadmin/utils": "^2.6.4",
     "@vue-flow/background": "^1.3.2",
-    "@vue-flow/core": "^1.48.1",
+    "@vue-flow/core": "^1.48.2",
     "@vueuse/core": "^14.1.0",
     "@vueuse/motion": "^3.0.3",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
-    "axios": "^1.13.2",
+    "axios": "^1.13.4",
     "china-area-data": "^5.0.1",
     "codemirror": "^5.65.20",
     "codemirror-editor-vue3": "^2.8.0",
@@ -84,19 +84,19 @@
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "pinia": "^3.0.4",
-    "pinyin-pro": "^3.27.0",
+    "pinyin-pro": "^3.28.0",
     "plus-pro-components": "^0.1.30",
     "qrcode": "^1.5.4",
     "qs": "^6.14.1",
     "responsive-storage": "^2.2.0",
     "sortablejs": "^1.15.6",
-    "swiper": "^12.0.3",
+    "swiper": "^12.1.0",
     "typeit": "^8.8.7",
     "v-contextmenu": "^3.2.0",
     "v3-infinite-loading": "^1.3.2",
     "vditor": "^3.11.2",
     "version-rocket": "^1.7.4",
-    "vue": "^3.5.26",
+    "vue": "^3.5.27",
     "vue-i18n": "^11.2.8",
     "vue-json-pretty": "^2.6.0",
     "vue-pdf-embed": "^2.1.3",
@@ -119,7 +119,7 @@
     "@commitlint/types": "^20.3.1",
     "@eslint/js": "^9.39.2",
     "@faker-js/faker": "^10.2.0",
-    "@iconify/json": "^2.2.428",
+    "@iconify/json": "^2.2.432",
     "@iconify/vue": "4.2.0",
     "@intlify/unplugin-vue-i18n": "^11.0.3",
     "@tailwindcss/vite": "^4.1.18",
@@ -136,13 +136,13 @@
     "@vitejs/plugin-vue": "^6.0.3",
     "@vitejs/plugin-vue-jsx": "^5.1.3",
     "boxen": "^8.0.1",
-    "code-inspector-plugin": "^1.3.4",
+    "code-inspector-plugin": "^1.4.1",
     "cssnano": "^7.1.2",
     "dagre": "^0.8.5",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-vue": "^10.6.2",
+    "eslint-plugin-vue": "^10.7.0",
     "gradient-string": "^3.0.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
@@ -150,19 +150,19 @@
     "postcss-html": "^1.8.1",
     "postcss-load-config": "^6.0.1",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "rimraf": "^6.1.2",
     "rollup-plugin-visualizer": "^6.0.5",
-    "sass": "^1.97.2",
+    "sass": "^1.97.3",
     "stylelint": "^17.0.0",
-    "stylelint-config-recess-order": "^7.4.0",
+    "stylelint-config-recess-order": "^7.6.0",
     "stylelint-config-recommended-vue": "^1.6.1",
     "stylelint-config-standard-scss": "^17.0.0",
     "stylelint-prettier": "^5.0.3",
     "svgo": "^4.0.0",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.0",
+    "typescript-eslint": "^8.54.0",
     "unplugin-icons": "^23.0.1",
     "vite": "^7.3.1",
     "vite-plugin-cdn-import": "^1.0.1",
@@ -172,7 +172,7 @@
     "vite-plugin-router-warn": "^2.0.0",
     "vite-svg-loader": "^5.1.0",
     "vue-eslint-parser": "^10.2.0",
-    "vue-tsc": "^3.2.2"
+    "vue-tsc": "^3.2.4"
   },
   "engines": {
     "node": "^20.19.0 || >=22.13.0",

src/App.vue

@@ -7,12 +7,13 @@
 </template>
 
 <script lang="ts">
+import { useRouter } from "vue-router";
 import { useGlobal } from "@pureadmin/utils";
 import { checkVersion } from "version-rocket";
 import { defineComponent, computed } from "vue";
 import { ElConfigProvider } from "element-plus";
-import { ReDialog } from "@/components/ReDialog";
-import { ReDrawer } from "@/components/ReDrawer";
+import { ReDialog, closeAllDialog } from "@/components/ReDialog";
+import { ReDrawer, closeAllDrawer } from "@/components/ReDrawer";
 import en from "element-plus/es/locale/lang/en";
 import zhCn from "element-plus/es/locale/lang/zh-cn";
 import plusEn from "plus-pro-components/es/locale/lang/en";
@@ -26,12 +27,19 @@ export default defineComponent({
     ReDrawer
   },
   setup() {
+    const router = useRouter();
     const { $storage } = useGlobal<GlobalPropertiesApi>();
     const currentLocale = computed(() => {
       return $storage.locale?.locale === "zh"
         ? { ...zhCn, ...plusZhCn }
         : { ...en, ...plusEn };
     });
+
+    router.beforeEach(() => {
+      closeAllDialog();
+      closeAllDrawer();
+    });
+
     return {
       currentLocale
     };

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;

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>

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>

src/views/welcome/index.vue

@@ -185,11 +185,13 @@ const optionsBasis: Array<OptionsType> = [
           }
         }"
       >
-        <el-card shadow="never" class="h-[580px]">
+        <el-card shadow="never">
           <div class="flex justify-between">
             <span class="text-md font-medium">数据统计</span>
           </div>
-          <WelcomeTable class="mt-3" />
+          <el-scrollbar max-height="504" class="mt-3">
+            <WelcomeTable />
+          </el-scrollbar>
         </el-card>
       </re-col>
 
@@ -271,6 +273,10 @@ const optionsBasis: Array<OptionsType> = [
   }
 }
 
+:deep(.el-timeline.is-start) {
+  padding-left: 0;
+}
+
 .main-content {
   margin: 20px 20px 0 !important;
 }