大改三角色逻辑：超级管理员、企业管理员、开票员

web/src/features/dashboard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-shell">
+  <div class="page-shell dashboard-page">
     <div class="dashboard-grid">
       <div class="soft-stat">
         <n-statistic label="可见菜单" :value="visibleMenuTotal" />
@@ -17,33 +17,134 @@
         <n-statistic label="已打开页签" :value="authStore.tabs.length" />
       </div>
     </div>
+    <div class="menu-shortcut-grid">
+      <button
+        v-for="menu in shortcutMenus"
+        :key="menu.id"
+        class="soft-stat menu-shortcut"
+        type="button"
+        @click="openMenu(menu)"
+      >
+        <span class="shortcut-icon">
+          <n-icon :size="22">
+            <component :is="resolveIcon(menu.icon)" />
+          </n-icon>
+        </span>
+        <span class="shortcut-content">
+          <span class="shortcut-title">{{ menu.title }}</span>
+        </span>
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, type Component } from 'vue'
+import { NIcon } from 'naive-ui'
+import * as LucideIcons from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { statusLabel } from '@/utils/display'
 import type { MenuNode } from '@/types/auth'
 
 const authStore = useAuthStore()
+const router = useRouter()
 
 function flattenMenus(nodes: MenuNode[]): MenuNode[] {
   return nodes.flatMap((item) => [item, ...flattenMenus(item.children ?? [])])
 }
 
+function resolveIcon(icon?: string | null) {
+  return (
+    (icon ? (LucideIcons[icon as keyof typeof LucideIcons] as unknown as Component | undefined) : undefined) ??
+    LucideIcons.PanelRightOpen
+  )
+}
+
+function openMenu(menu: MenuNode) {
+  if (menu.path) {
+    router.push(menu.path)
+  }
+}
+
 const visibleMenus = computed(() => flattenMenus(authStore.menus).filter((item) => item.visible))
 const visibleMenuTotal = computed(() => visibleMenus.value.length)
 const visiblePageTotal = computed(
   () => visibleMenus.value.filter((item) => item.type === 'MENU' && item.path).length
 )
+const shortcutMenus = computed(() =>
+  visibleMenus.value.filter((item) => item.type === 'MENU' && Boolean(item.path))
+)
 const currentStatus = computed(() => statusLabel(authStore.user?.status))
 </script>
 
 <style scoped>
+.dashboard-page {
+  overflow: auto;
+}
+
 .dashboard-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 12px;
 }
+
+.menu-shortcut-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+.menu-shortcut {
+  width: 100%;
+  min-height: 92px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  color: #111827;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 0.16s ease,
+    box-shadow 0.16s ease,
+    transform 0.16s ease;
+}
+
+.menu-shortcut:hover {
+  border-color: #94a3b8;
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
+  transform: translateY(-1px);
+}
+
+.menu-shortcut:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.shortcut-icon {
+  width: 42px;
+  height: 42px;
+  flex: 0 0 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 10px;
+  color: #2563eb;
+  background: var(--app-primary-soft);
+}
+
+.shortcut-content {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.shortcut-title {
+  overflow: hidden;
+  color: #111827;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>