feat: 完善仪表盘最近访问区块内容（来自 @Bull-BCLS）

continew-admin-ui/src/api/common/dashboard.ts

@@ -32,6 +32,12 @@ export interface DashboardAnnouncementRecord {
   type: number;
 }
 
+export interface DashboardRecentlyVisitedRecord {
+  title?: string;
+  path: string;
+  icon?: string;
+}
+
 export function getTotal() {
   return axios.get<DashboardTotalRecord>(`${BASE_URL}/total`);
 }

continew-admin-ui/src/router/index.ts

@@ -1,7 +1,13 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import {
+  createRouter,
+  createWebHistory,
+  RouteRecordNormalized,
+} from 'vue-router';
+import { useAppStore } from '@/store';
 import NProgress from 'nprogress'; // progress bar
 import 'nprogress/nprogress.css';
 
+import { DashboardRecentlyVisitedRecord } from '@/api/common/dashboard';
 import { appRoutes, fixedRoutes, demoRoutes } from './routes';
 import { REDIRECT_MAIN, NOT_FOUND_ROUTE } from './routes/base';
 import createRouteGuard from './guard';
@@ -36,4 +42,47 @@ const router = createRouter({
 
 createRouteGuard(router);
 
+router.afterEach((to) => {
+  const allMenuList = useAppStore().appAsyncMenusAll as RouteRecordNormalized[];
+  const toMenu = allMenuList.find((m) => to.path === m.path) || undefined;
+  if (toMenu === undefined) {
+    return;
+  }
+
+  const recentlyVisitedList = window.localStorage.getItem('recently-visited');
+  let copyRecentlyVisitedList: DashboardRecentlyVisitedRecord[];
+  if (recentlyVisitedList === null) {
+    copyRecentlyVisitedList = [];
+  } else {
+    copyRecentlyVisitedList = JSON.parse(recentlyVisitedList);
+  }
+
+  // 是否有重复点击的菜单
+  copyRecentlyVisitedList.forEach(
+    (item: DashboardRecentlyVisitedRecord, index: number) => {
+      if (item.path === to.path) {
+        copyRecentlyVisitedList.splice(index, 1);
+      }
+    }
+  );
+
+  // 最多存储 3 个
+  const menuMeta = toMenu?.meta;
+  const recentlyVisited: DashboardRecentlyVisitedRecord = {
+    title: menuMeta?.locale,
+    path: to.path,
+    icon: menuMeta?.icon,
+  };
+  copyRecentlyVisitedList.reverse();
+  copyRecentlyVisitedList.push(recentlyVisited);
+  copyRecentlyVisitedList.reverse();
+  if (copyRecentlyVisitedList.length >= 4) {
+    copyRecentlyVisitedList = copyRecentlyVisitedList.splice(0, 3);
+  }
+  window.localStorage.setItem(
+    'recently-visited',
+    JSON.stringify(copyRecentlyVisitedList)
+  );
+});
+
 export default router;

continew-admin-ui/src/store/modules/app/index.ts

@@ -6,6 +6,19 @@ import defaultSettings from '@/config/settings.json';
 import { listRoute } from '@/api/auth/login';
 import { AppState } from './types';
 
+const recursionMenu = (
+  appMenu: RouteRecordNormalized[],
+  list: Array<RouteRecordNormalized>
+) => {
+  appMenu.forEach((item) => {
+    const childrenAppMenu = item.children as RouteRecordNormalized[];
+    if (childrenAppMenu != null && childrenAppMenu.length > 0) {
+      recursionMenu(childrenAppMenu, list);
+    } else {
+      list.push(item);
+    }
+  });
+};
 const useAppStore = defineStore('app', {
   state: (): AppState => ({ ...defaultSettings }),
 
@@ -19,6 +32,14 @@ const useAppStore = defineStore('app', {
     appAsyncMenus(state: AppState): RouteRecordNormalized[] {
       return state.serverMenu as unknown as RouteRecordNormalized[];
     },
+    appAsyncMenusAll(state: AppState): RouteRecordNormalized[] {
+      const menuList: RouteRecordNormalized[] = [];
+      recursionMenu(
+        state.serverMenu as unknown as RouteRecordNormalized[],
+        menuList
+      );
+      return menuList;
+    },
   },
 
   actions: {

continew-admin-ui/src/views/dashboard/workplace/components/geo-distribution.vue

@@ -88,6 +88,6 @@
 
 <style scoped lang="less">
   .general-card {
-    min-height: 568px;
+    min-height: 566.14px;
   }
 </style>

continew-admin-ui/src/views/dashboard/workplace/components/recently-visited.vue

@@ -7,13 +7,18 @@
   >
     <div style="margin-bottom: -1rem">
       <a-row :gutter="8">
-        <a-col v-for="link in links" :key="link.text" :span="8" class="wrapper">
+        <a-col
+          v-for="link in links"
+          :key="link.title"
+          :span="8"
+          class="wrapper"
+        >
           <div @click="router.replace({ path: link.path })">
             <div class="icon">
               <svg-icon :icon-class="link.icon" />
             </div>
             <a-typography-paragraph class="text">
-              {{ link.text }}
+              {{ link.title }}
             </a-typography-paragraph>
           </div>
         </a-col>
@@ -23,14 +28,24 @@
 </template>
 
 <script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
   import { useRouter } from 'vue-router';
+  import { DashboardRecentlyVisitedRecord } from '@/api/common/dashboard';
 
   const router = useRouter();
-  const links = [
+  const links = ref<DashboardRecentlyVisitedRecord[]>();
-    { text: '在线用户', icon: 'anonymity', path: '/monitor/online' },
+
-    { text: '代码生成', icon: 'code', path: '/tool/generator' },
+  /**
-    { text: '角色管理', icon: 'safe', path: '/system/role' },
+   * 加载最近访问菜单列表
-  ];
+   */
+  onMounted(() => {
+    const recentlyVisitedList = window.localStorage.getItem('recently-visited');
+    if (recentlyVisitedList === null) {
+      links.value = [];
+    } else {
+      links.value = JSON.parse(recentlyVisitedList);
+    }
+  });
 </script>
 
 <style lang="less" scoped>