feat(frontend): 菜单图标与视觉设计系统落地

- 引入 @element-plus/icons-vue 官方图标库，菜单项按模块配图标，消除纯文字导航的辨识成本（新增依赖已评估：Element Plus 官方同源维护） - AppMenu/BasicLayout/router 同步：图标渲染、菜单结构与路由 meta 对齐 - index.css 视觉系统化：品牌色、语义三色（ok/warn/danger 及其 wash 层次）、形体与材质（圆角、缓动、阴影、等宽字体）统一为 CSS 变量，并覆盖 Element Plus 主色 - 登录页、业务页、结算页、工作台、审批页等视图随新变量适配验证：pnpm type-check 与 pnpm build 均通过；后端接口契约未变。 Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-10-22 19:45:54 +08:00
1 parent f88857e026
commit e61800dcdc
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import { ElMessage } from 'element-plus'

+import type { MenuIconName } from '@/components/layout/menuIcons'
 import { firstAccessiblePath } from '@/router/access'
 import { useUserStore } from '@/store/user'
 import { ROLE_ADMIN } from '@/utils/constants'
@@ -20,6 +21,11 @@ declare module 'vue-router' {
    menu?: boolean
    /** 菜单分组名（同名聚合为一个子菜单）；不设则为顶层菜单项 */
    group?: string
+    /**
+     * 菜单图标语义 key —— 取值见 components/layout/menuIcons.ts 的注册表。
+     * 路由只写 key 不写图标组件：换图标库/换风格只改注册表。
+     */
+    icon?: MenuIconName
    /** 菜单排序，越小越靠前 */
    order?: number
  }
@@ -46,6 +52,7 @@ const routes: RouteRecordRaw[] = [
        component: () => import('@/views/dashboard/index.vue'),
        meta: {
          title: '首页',
+                    icon: 'home',
          order: 1,
          allowedRoles: [ROLE_ADMIN, 'finance', 'leader'],
        },
@@ -54,19 +61,25 @@ const routes: RouteRecordRaw[] = [
        path: '/system/users',
        name: 'system-users',
        component: () => import('@/views/system/users/index.vue'),
-        meta: { title: '用户管理', group: '系统管理', requiresAdmin: true, order: 2 },
+        meta: { title: '用户管理', icon: 'users', group: '系统管理', requiresAdmin: true, order: 2 },
      },
      {
        path: '/system/roles',
        name: 'system-roles',
        component: () => import('@/views/system/roles/index.vue'),
-        meta: { title: '角色管理', group: '系统管理', requiresAdmin: true, order: 3 },
+        meta: { title: '角色管理', icon: 'roles', group: '系统管理', requiresAdmin: true, order: 3 },
      },
      {
        path: '/system/business-roles',
        name: 'system-business-roles',
        component: () => import('@/views/system/business-roles/index.vue'),
-        meta: { title: '岗位角色', group: '系统管理', requiresAdmin: true, order: 5 },
+        meta: {
+          title: '岗位角色',
+                    icon: 'business-roles',
+          group: '系统管理',
+          requiresAdmin: true,
+          order: 5,
+        },
      },
      {
        // 计提参数：查看放开到管理员/财务/领导（#17 答复「查看可、修改仅
@@ -76,6 +89,7 @@ const routes: RouteRecordRaw[] = [
        component: () => import('@/views/system/params/index.vue'),
        meta: {
          title: '计提参数',
+                    icon: 'params',
          group: '系统管理',
          allowedRoles: [ROLE_ADMIN, 'finance', 'leader'],
          order: 6,
@@ -85,7 +99,13 @@ const routes: RouteRecordRaw[] = [
        path: '/system/settings',
        name: 'system-settings',
        component: () => import('@/views/system/settings/index.vue'),
-        meta: { title: '公司信息', group: '系统管理', requiresAdmin: true, order: 7 },
+        meta: {
+          title: '公司信息',
+                    icon: 'settings',
+          group: '系统管理',
+          requiresAdmin: true,
+          order: 7,
+        },
      },
      {
        // 审批管理：管理员/财务/领导可见（营销后勤待权限清单答复后放开）
@@ -94,6 +114,7 @@ const routes: RouteRecordRaw[] = [
        component: () => import('@/views/system/approvals/index.vue'),
        meta: {
          title: '审批管理',
+                    icon: 'approvals',
          group: '系统管理',
          allowedRoles: [ROLE_ADMIN, 'finance', 'leader'],
          order: 8,
@@ -103,45 +124,51 @@ const routes: RouteRecordRaw[] = [
        path: '/system/logs',
        name: 'system-logs',
        component: () => import('@/views/system/logs/index.vue'),
-        meta: { title: '日志查询', group: '系统管理', requiresAdmin: true, order: 9 },
+        meta: {
+          title: '日志查询',
+                    icon: 'logs',
+          group: '系统管理',
+          requiresAdmin: true,
+          order: 9,
+        },
      },
      {
        // 基础数据属业务操作：登录即可访问，不设 requiresAdmin（对照后端 api/v1/base）
        path: '/base/personnel',
        name: 'base-personnel',
        component: () => import('@/views/base/personnel/index.vue'),
-        meta: { title: '人员管理', group: '基础数据', order: 10 },
+        meta: { title: '人员管理', icon: 'personnel', group: '基础数据', order: 10 },
      },
      {
        path: '/base/products',
        name: 'base-products',
        component: () => import('@/views/base/products/index.vue'),
-        meta: { title: '产品管理', group: '基础数据', order: 11 },
+        meta: { title: '产品管理', icon: 'products', group: '基础数据', order: 11 },
      },
      {
        path: '/base/customers',
        name: 'base-customers',
        component: () => import('@/views/base/customers/index.vue'),
-        meta: { title: '客户管理', group: '基础数据', order: 12 },
+        meta: { title: '客户管理', icon: 'customers', group: '基础数据', order: 12 },
      },
      {
        // 业务数据组一律为业务操作：登录即可访问，不设 requiresAdmin
        path: '/business/businesses',
        name: 'business-businesses',
        component: () => import('@/views/business/businesses/index.vue'),
-        meta: { title: '业务管理', group: '业务数据', order: 13 },
+        meta: { title: '业务管理', icon: 'businesses', group: '业务数据', order: 13 },
      },
      {
        path: '/business/shipments',
        name: 'business-shipments',
        component: () => import('@/views/business/shipments/index.vue'),
-        meta: { title: '发货管理', group: '业务数据', order: 14 },
+        meta: { title: '发货管理', icon: 'shipments', group: '业务数据', order: 14 },
      },
      {
        path: '/business/receipts',
        name: 'business-receipts',
        component: () => import('@/views/business/receipts/index.vue'),
-        meta: { title: '回款管理', group: '业务数据', order: 15 },
+        meta: { title: '回款管理', icon: 'receipts', group: '业务数据', order: 15 },
      },
      {
        // 业务数据组首个页面：评级计算器是打分工具，不影响绩效金额，
@@ -149,7 +176,7 @@ const routes: RouteRecordRaw[] = [
        path: '/business/rating',
        name: 'business-rating',
        component: () => import('@/views/business/rating/index.vue'),
-        meta: { title: '客户评级计算器', group: '业务数据', order: 16 },
+        meta: { title: '客户评级计算器', icon: 'rating', group: '业务数据', order: 16 },
      },
      {
        // 绩效工资组（M3 ④）：核算台账读登录即可，月结写限管理员与营销后勤
@@ -157,13 +184,13 @@ const routes: RouteRecordRaw[] = [
        path: '/calc/ledger',
        name: 'calc-ledger',
        component: () => import('@/views/calc/ledger/index.vue'),
-        meta: { title: '绩效台账', group: '绩效工资', order: 17 },
+        meta: { title: '绩效台账', icon: 'ledger', group: '绩效工资', order: 17 },
      },
      {
        path: '/settlements',
        name: 'settlements',
        component: () => import('@/views/settlements/index.vue'),
-        meta: { title: '月度结算', group: '绩效工资', order: 18 },
+        meta: { title: '月度结算', icon: 'settlements', group: '绩效工资', order: 18 },
      },
      // 报表统计组（M4 ⑤）：FR-030/031 限领导/财务/管理员；admin 须显式
      // 列入 allowedRoles（项目既定规则，admin 不天然放行）
@@ -173,6 +200,7 @@ const routes: RouteRecordRaw[] = [
        component: () => import('@/views/reports/personal-detail/index.vue'),
        meta: {
          title: '个人绩效明细',
+                    icon: 'report-personal',
          group: '报表统计',
          order: 19,
          allowedRoles: [ROLE_ADMIN, 'finance', 'leader'],
@@ -184,6 +212,7 @@ const routes: RouteRecordRaw[] = [
        component: () => import('@/views/reports/department-summary/index.vue'),
        meta: {
          title: '部门绩效汇总',
+                    icon: 'report-department',
          group: '报表统计',
          order: 20,
          allowedRoles: [ROLE_ADMIN, 'finance', 'leader'],
@@ -195,6 +224,7 @@ const routes: RouteRecordRaw[] = [
        component: () => import('@/views/reports/business-stats/index.vue'),
        meta: {
          title: '业务统计',
+                    icon: 'report-business',
          group: '报表统计',
          order: 21,
          allowedRoles: [ROLE_ADMIN, 'finance', 'leader'],
@@ -206,6 +236,7 @@ const routes: RouteRecordRaw[] = [
        component: () => import('@/views/reports/payment-stats/index.vue'),
        meta: {
          title: '回款统计',
+                    icon: 'report-payment',
          group: '报表统计',
          order: 22,
          allowedRoles: [ROLE_ADMIN, 'finance', 'leader'],