feat: 接入权限接口

clinical-web/src/components/layout/Menu.vue

@@ -3,64 +3,30 @@ import { computed } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 
 import { useLoginStore } from '@/stores/login'
-import { mockFlags } from '@/utils/mock-flags'
-
-interface MenuItem {
-  path: string
-  label: string
-  permission?: string
-  available?: boolean
-}
-
-interface MenuGroup {
-  label: string
-  items: MenuItem[]
-}
 
 const loginStore = useLoginStore()
 const router = useRouter()
 
-const menuGroups: MenuGroup[] = [
-  {
-    label: '工作台',
-    items: [
-      { path: '/workbench/home', label: '首页', permission: 'sign:task:query' },
-      { path: '/workbench/signing', label: '签署工作台', permission: 'sign:task:query' },
-    ],
-  },
-  {
-    label: '管理',
-    items: [
-      {
-        path: '/management/documents',
-        label: '文档库管理',
-        permission: 'sign:template:query',
-      },
-      {
-        path: '/management/reports',
-        label: '报表分析',
-        permission: 'report:signing:query',
-      },
-      { path: '/management/users', label: '用户与权限', permission: 'system:user:query' },
-      {
-        path: '/management/document-permissions',
-        label: '文档权限',
-        permission: 'sign:template:permission:query',
-      },
-      { path: '/management/settings', label: '系统设置', available: mockFlags.settings },
-    ],
-  },
-]
-
 const visibleMenuGroups = computed(() =>
-  menuGroups
-    .map((group) => ({
-      ...group,
-      items: group.items.filter(
-        (item) =>
-          item.available !== false &&
-          (!item.permission || loginStore.hasPermission(item.permission)),
-      ),
+  (loginStore.authorization?.navigation ?? [])
+    .filter((directory) => directory.resourceType === 'DIR' && directory.status === 'ENABLED')
+    .map((directory) => ({
+      label: directory.name,
+      items: (directory.children ?? [])
+        .filter(
+          (menu) =>
+            menu.resourceType === 'MENU' &&
+            menu.status === 'ENABLED' &&
+            menu.visible &&
+            Boolean(menu.routePath) &&
+            Boolean(menu.code) &&
+            loginStore.hasPermission(menu.code ?? ''),
+        )
+        .map((menu) => ({
+          path: menu.routePath as string,
+          label: menu.name,
+          icon: menu.icon,
+        })),
     }))
     .filter((group) => group.items.length),
 )
@@ -112,7 +78,7 @@ async function handleLogout() {
           class="menu-item"
           active-class="is-active"
         >
-          <span class="menu-dot" aria-hidden="true" />
+          <span class="menu-dot" aria-hidden="true">{{ item.icon?.slice(0, 1) ?? '' }}</span>
           <span>{{ item.label }}</span>
         </RouterLink>
       </div>
@@ -215,15 +181,21 @@ async function handleLogout() {
 }
 
 .menu-dot {
+  display: grid;
   flex-shrink: 0;
-  width: 6px;
-  height: 6px;
-  background: transparent;
-  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  color: #a7c2cc;
+  font-size: 10px;
+  font-weight: 700;
+  place-items: center;
+  background: rgb(255 255 255 / 8%);
+  border-radius: 4px;
 }
 
 .menu-item.is-active .menu-dot {
-  background: #5ee0a8;
+  color: #fff;
+  background: rgb(255 255 255 / 20%);
 }
 
 .menu-profile {