From a4e889cfaa68074215164c97004ca5dd555e63a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E6=98=8A=E5=A4=A9?=
 <15984976+n2319_0@user.noreply.gitee.com>
Date: Tue, 7 Jul 2026 16:48:55 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E4=BC=98=E5=8C=96=EF=BC=88?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A0=E7=BB=84=E4=BB=B6=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HomeModules/QuickAccessGroup.vue          | 1615 +++++++++++++++++
 .../src/layout/components/Sidebar/index.vue   |   15 +-
 klp-ui/src/views/index.vue                    |   12 +-
 3 files changed, 1633 insertions(+), 9 deletions(-)
 create mode 100644 klp-ui/src/components/HomeModules/QuickAccessGroup.vue

diff --git a/klp-ui/src/components/HomeModules/QuickAccessGroup.vue b/klp-ui/src/components/HomeModules/QuickAccessGroup.vue
new file mode 100644
index 000000000..a67540c56
--- /dev/null
+++ b/klp-ui/src/components/HomeModules/QuickAccessGroup.vue
@@ -0,0 +1,1615 @@
+<template>
+  <div class="quick-access">
+    <!--
+      临时测试条：
+      用于排查“当前登录用户角色 / 已加载配置键 / 参与合并角色 / 当前展示来源”等问题。
+      若后续再次出现“角色配置不生效、命中角色异常、展示了无权限组件”等情况，
+      可恢复下面这段调试 UI，直接在页面上查看命中链路，而不必只依赖控制台日志。
+    -->
+    <!-- <div v-if="showDebugBar" class="quick-access-debug-bar">
+      <div class="debug-line">
+        <span class="debug-label">当前用户角色</span>
+        <span class="debug-value">{{ currentUserRolesText }}</span>
+      </div>
+      <div class="debug-line">
+        <span class="debug-label">已加载配置键</span>
+        <span class="debug-value">{{ loadedRoleKeysText }}</span>
+      </div>
+      <div class="debug-line">
+        <span class="debug-label">参与合并角色</span>
+        <span class="debug-value">{{ resolvedRoleKeysText }}</span>
+      </div>
+      <div class="debug-line">
+        <span class="debug-label">当前展示来源</span>
+        <span class="debug-value">{{ mergedItemsText }}</span>
+      </div>
+    </div> -->
+    <el-row :gutter="10" class="panel-group">
+      <el-col :xs="24" :sm="12" :md="12" :lg="12" class="card-panel-col" v-for="item in homeItems" :key="item.key">
+        <div class="card-panel" :class="{ 'is-add': item.isAdd }" @click="handleCardClick(item)">
+          <template v-if="item.isAdd">
+            <div class="card-panel-add">
+              <div class="card-panel-add-icon">
+                <i class="el-icon-plus"></i>
+              </div>
+              <div class="card-panel-add-text">
+                <div class="card-panel-text">配置快捷入口</div>
+                <div class="card-panel-subtext">自定义常用入口</div>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div class="card-panel-icon-wrapper" :class="item.iconClass">
+              <svg-icon v-if="item.icon" :icon-class="item.icon" class-name="card-panel-icon" />
+              <i v-else class="el-icon-link card-panel-icon"></i>
+            </div>
+            <div class="card-panel-description">
+              <div class="card-panel-text">{{ item.title }}</div>
+              <div class="card-panel-subtext">{{ item.subTitle }}</div>
+            </div>
+          </template>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-dialog title="配置快捷入口" :visible.sync="configVisible" width="1120px" top="5vh" custom-class="quick-access-dialog">
+      <div class="quick-access-config-bar">
+        <el-form inline size="mini">
+          <el-form-item label="用户">
+            <span class="quick-access-current-user">{{ currentUserLabel }}</span>
+          </el-form-item>
+        </el-form>
+        <div class="quick-access-config-tip">当前配置仅影响本人展示</div>
+      </div>
+      <div class="quick-access-config-body">
+        <div class="config-left">
+          <div v-if="showEmptyState" class="quick-access-empty-state">
+            <div class="empty-title">暂无可配置入口</div>
+            <div class="empty-desc">当前账号没有可访问的菜单页面，无法配置快捷入口。请先检查菜单权限。</div>
+          </div>
+          <el-table v-else :data="filteredTopMenus" size="mini" border height="520">
+            <el-table-column label="显示" width="60" align="center">
+              <template slot-scope="scope">
+                <el-checkbox :value="isSelected(scope.row.key)" @change="toggleSelected(scope.row.key, $event)" />
+              </template>
+            </el-table-column>
+            <el-table-column label="主选项" min-width="160">
+              <template slot-scope="scope">
+                <div class="top-menu-cell">
+                  <svg-icon v-if="scope.row.icon" :icon-class="scope.row.icon" class-name="top-menu-icon" />
+                  <span class="top-menu-title">{{ scope.row.title }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="跳转" width="240">
+              <template slot-scope="scope">
+                <el-radio-group
+                  size="mini"
+                  :value="getMode(scope.row.key)"
+                  @input="setMode(scope.row.key, $event)"
+                  :disabled="!isSelected(scope.row.key)"
+                >
+                  <el-radio-button label="top">主入口</el-radio-button>
+                  <el-radio-button label="child">子页面</el-radio-button>
+                </el-radio-group>
+              </template>
+            </el-table-column>
+            <el-table-column label="子页面" min-width="260">
+              <template slot-scope="scope">
+                <el-select
+                  size="mini"
+                  clearable
+                  filterable
+                  multiple
+                  collapse-tags
+                  placeholder="选择子页面"
+                  :value="getChildPaths(scope.row.key)"
+                  @input="setChildPaths(scope.row.key, $event)"
+                  :disabled="!isSelected(scope.row.key) || getMode(scope.row.key) !== 'child'"
+                  style="width: 100%;"
+                >
+                  <el-option
+                    v-for="opt in scope.row.childrenOptions"
+                    :key="opt.path"
+                    :label="opt.title"
+                    :value="opt.path"
+                  />
+                </el-select>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <div class="config-right">
+          <div class="selected-header">
+            <div class="selected-title">已选组件</div>
+            <div class="selected-subtitle">当前角色最终展示效果</div>
+          </div>
+          <div v-if="selectedPreviewItems.length === 0" class="selected-empty">暂无已选组件</div>
+          <div v-else class="selected-list">
+            <div class="selected-item" v-for="item in selectedPreviewItems" :key="item.key">
+              <div class="selected-item-main">
+                <div class="selected-item-title">{{ item.title }}</div>
+                <div class="selected-item-desc">{{ item.subTitle }}</div>
+              </div>
+              <div class="selected-item-actions">
+                <el-tooltip effect="dark" :content="item.path" placement="top">
+                  <el-button size="mini" type="text">路径</el-button>
+                </el-tooltip>
+                <el-button size="mini" type="text" @click="removeSelected(item)">移除</el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div slot="footer">
+        <el-button size="mini" @click="configVisible = false">取消</el-button>
+        <el-button size="mini" type="primary" @click="saveConfig">保存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addConfig, listConfig, updateConfig } from '@/api/system/config'
+
+/**
+ * 首页 - 快捷入口（可配置）
+ *
+ * 目标：
+ * 1) 可配置项覆盖整个项目：主选项来自系统“顶层菜单”（topMenuList）
+ * 2) 每个主选项可选择：跳主入口（默认子页）/ 或选择更精确的子页面
+ * 3) 配置持久化到系统参数（失败降级本地缓存），并兼容旧版“叶子路由 path 数组”的存储格式
+ *
+ * 配置存储结构（新，压缩版）：
+ * {
+ *   v: 3,
+ *   i: [
+ *     ['/wms', ''],
+ *     ['/micro', '/micro/pages/acid/index'],
+ *     ['/system', '/system/user']
+ *   ],
+ *   r: {
+ *     d: [0, 1],
+ *     admin: [2]
+ *   }
+ * }
+ *
+ * 配置存储结构（旧，历史版本）：
+ * [
+ *   '/wms/todo',
+ *   '/micro/pages/acid/index'
+ * ]
+ */
+const CONFIG_KEY = 'home.quickAccess'
+// 临时调试开关：用于输出快捷入口的角色命中、配置加载、保存结果等排查日志。
+// 当前先关闭，若后续需要继续定位角色配置问题，可改回 true。
+const DEBUG_QUICK_ACCESS = false
+
+export default {
+  name: 'QuickAccessGroup',
+  data() {
+    return {
+      configVisible: false,
+      /**
+       * 当前正在编辑的配置 key
+       */
+      activeRoleKey: '',
+      /**
+       * 顶层菜单列表（主选项）
+       * 结构：[{ key/path/title/icon/iconClass/childrenOptions/defaultPath }]
+       * - key：顶层菜单 path（如 /wms、/system 等），作为主选项的唯一标识
+       * - childrenOptions：该顶层菜单下所有可跳转的叶子页面（用于下拉选择更精确的页面）
+       * - defaultPath：该顶层菜单默认跳转的叶子页面（childrenOptions 的第一个）
+       */
+      topMenus: [],
+      /**
+       * 配置态（按角色存储）
+       * 结构：
+       * {
+       *   default: {
+       *     '/wms': { selected: true, mode: 'top', childPath: '' }
+       *   },
+       *   admin: {
+       *     '/system': { selected: true, mode: 'child', childPath: '/system/user' }
+       *   }
+       * }
+       */
+      roleConfigMap: {},
+      /**
+       * 从后端/本地读取到的原始配置
+       * - 顶层菜单未就绪时先缓存，等菜单就绪后再进行映射/迁移
+       */
+      loadedConfigRaw: null,
+      loadedApplied: false,
+      /**
+       * 按角色维度标记是否已加载过独立配置，避免重复请求
+       */
+      loadedRoleKeys: {},
+      /**
+       * 按角色/用户维度标记是否已加载过独立配置，避免重复请求
+       */
+    }
+  },
+  computed: {
+    /**
+     * 允许用户配置自己的快捷入口（包含超级管理员）
+     */
+    showConfig() {
+      return !!(this.$store && this.$store.getters && this.$store.getters.token)
+    },
+    currentUserId() {
+      return (this.$store && this.$store.getters && this.$store.getters.id) || ''
+    },
+    currentUserLabel() {
+      const nick = (this.$store && this.$store.getters && this.$store.getters.nickName) || ''
+      const name = (this.$store && this.$store.getters && this.$store.getters.name) || ''
+      const text = nick || name || ''
+      return this.currentUserId ? `${text}（${this.currentUserId}）` : text
+    },
+    selfRoleKey() {
+      return this.currentUserId ? `__user__${this.currentUserId}` : ''
+    },
+    /**
+     * 顶层菜单来源（覆盖全项目）
+     * topMenuList 在 permission 模块里由后端菜单构建并落到 store
+     */
+    storeTopMenus() {
+      return (this.$store && this.$store.getters && this.$store.getters.topMenuList) || []
+    },
+    showDebugBar() {
+      return DEBUG_QUICK_ACCESS
+    },
+    isSuperAdmin() {
+      return this.$auth && this.$auth.hasRole('admin')
+    },
+    currentUserRoles() {
+      const roles = (this.$store && this.$store.getters && this.$store.getters.roles) || []
+      return Array.isArray(roles) ? roles : []
+    },
+    currentUserRolesText() {
+      return this.currentUserRoles.length ? this.currentUserRoles.join(' , ') : '无'
+    },
+    loadedRoleKeysText() {
+      const keys = Object.keys(this.loadedRoleKeys || {}).filter(k => this.loadedRoleKeys[k])
+      return keys.length ? keys.join(' , ') : '无'
+    },
+    resolvedRoleKeys() {
+      return this.resolveRoleKeysForCurrentUser()
+    },
+    resolvedRoleKeysText() {
+      return this.resolvedRoleKeys.length ? this.resolvedRoleKeys.join(' , ') : '无'
+    },
+    mergedRoleItems() {
+      return this.getMergedRoleConfigItems(this.resolvedRoleKeys)
+    },
+    mergedItemsText() {
+      if (!this.mergedRoleItems.length) return '无'
+      return this.mergedRoleItems
+        .map(item => `${item.topPath}${item.mode === 'child' && item.childPath ? ` -> ${item.childPath}` : ' -> 主入口'}`)
+        .join(' ; ')
+    },
+    /**
+     * 页面展示的卡片列表：
+     * - 有配置：按“多角色合并 + default 兜底”生成卡片
+     * - 无配置：展示默认推荐
+     */
+    visibleItems() {
+      return this.buildVisibleItemsForCurrentUser()
+    },
+    homeItems() {
+      const list = this.visibleItems || []
+      if (!this.showConfig) return list
+      return list.concat([{ key: '__quick_access_add__', isAdd: true }])
+    },
+    /**
+     * 配置弹窗里可配置的主选项（已按当前用户权限过滤后的顶层菜单）
+     */
+    filteredTopMenus() {
+      return this.topMenus || []
+    },
+    showEmptyState() {
+      return (this.filteredTopMenus || []).length === 0
+    },
+    selectedPreviewItems() {
+      const items = this.getRoleConfigItems(this.activeRoleKey)
+      return this.buildPreviewItems(items, this.filteredTopMenus)
+    },
+  },
+  created() {
+    /**
+     * 先拉配置；顶层菜单可能还没就绪（异步加载路由），后续由 watch 自动补全映射关系
+     */
+    if (!this.activeRoleKey) this.activeRoleKey = this.selfRoleKey
+    this.loadConfig()
+    this.loadCurrentUserRoleConfigs()
+  },
+  watch: {
+    /**
+     * 用户信息（userId）通常在登录后异步写入 store。
+     * 若在组件 created 时 userId 尚未就绪，会导致“刷新后配置未加载，卡片看起来消失”。
+     * 这里在 userId 就绪时补一次：初始化 activeRoleKey + 拉取本人配置。
+     */
+    currentUserId: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (!val) return
+        const nextKey = `__user__${val}`
+        if (oldVal && oldVal !== val) {
+          this.loadedRoleKeys = {}
+          this.roleConfigMap = {}
+          this.loadedApplied = false
+        }
+        if (!this.activeRoleKey || this.activeRoleKey !== nextKey) this.activeRoleKey = nextKey
+        this.loadRoleConfig(nextKey)
+      },
+    },
+    /**
+     * 顶层菜单变化时（首次加载/刷新菜单/切换权限），实时重建可选项
+     * 并清理已不存在的配置项（避免后端删除菜单后出现脏数据）
+     */
+    storeTopMenus: {
+      immediate: true,
+      handler() {
+        this.topMenus = this.buildTopMenus()
+        this.repairConfigAgainstMenus()
+        this.tryApplyLoadedConfig()
+      },
+    },
+    activeRoleKey: {
+      immediate: false,
+      handler(val) {
+        this.debugLog('activeRoleKey-change', { activeRoleKey: val })
+        this.loadRoleConfig(val)
+      },
+    },
+  },
+  methods: {
+    /**
+     * 调试输出：
+     * 临时用于排查“配置了但未生效/保存异常/角色命中异常”等问题。
+     * 后续问题定位完成后可直接删除本方法及对应调用。
+     */
+    debugLog(step, payload) {
+      if (!DEBUG_QUICK_ACCESS || typeof console === 'undefined') return
+      const time = new Date().toLocaleTimeString()
+      console.groupCollapsed(`[QuickAccess][${time}] ${step}`)
+      console.log(payload)
+      console.groupEnd()
+    },
+    handleCardClick(item) {
+      if (item && item.isAdd) {
+        this.openConfig()
+        return
+      }
+      this.go(item)
+    },
+    buildPreviewItems(items, availableTopMenus) {
+      const byTop = new Map((availableTopMenus || []).map(m => [m.key, m]))
+      const list = []
+      const seen = new Set()
+      ;(items || []).forEach((cfg, idx) => {
+        const top = byTop.get(cfg.topPath)
+        if (!top) return
+        const availableChildren = top.childrenOptions || []
+        if (availableChildren.length === 0) return
+        const isChild = cfg.mode === 'child' && cfg.childPath
+        const child = isChild ? availableChildren.find(c => this.normalizePath(c.path) === this.normalizePath(cfg.childPath)) : null
+        if (isChild && !child) return
+        const defaultChild = availableChildren.find(c => this.normalizePath(c.path) === this.normalizePath(top.defaultPath))
+        if (!isChild && !defaultChild) return
+        const path = isChild ? child.path : defaultChild.path
+        const dedupeKey = this.normalizePath(path)
+        if (seen.has(dedupeKey)) return
+        seen.add(dedupeKey)
+        list.push({
+          key: `${cfg.topPath}__${dedupeKey}__${idx}`,
+          title: isChild ? child.title : top.title,
+          subTitle: isChild ? top.title : '主入口',
+          path,
+          topPath: top.key,
+          mode: isChild ? 'child' : 'top',
+          childPath: isChild ? this.normalizePath(child.path) : '',
+        })
+      })
+      return list
+    },
+    removeSelected(item) {
+      if (!item) return
+      const isString = typeof item === 'string'
+      const topPath = isString ? item : item.topPath
+      const childPath = isString ? '' : (item.childPath || '')
+      if (!topPath) return
+      const configMap = this.getConfigMapByRole(this.activeRoleKey)
+      if (!configMap || !configMap[topPath]) return
+      if (!childPath) {
+        this.$set(configMap[topPath], 'selected', false)
+        this.$set(configMap[topPath], 'mode', 'top')
+        this.$set(configMap[topPath], 'childPaths', [])
+        if (configMap[topPath] && configMap[topPath].childPath) this.$set(configMap[topPath], 'childPath', '')
+        return
+      }
+      const row = configMap[topPath]
+      const norm = this.normalizePath(childPath)
+      const legacy = row && row.childPath ? [row.childPath] : []
+      const arr = Array.isArray(row.childPaths) ? row.childPaths.concat(legacy) : legacy
+      const next = arr.map(p => this.normalizePath(p)).filter(p => p && p !== norm)
+      this.$set(row, 'childPaths', next)
+      if (row && row.childPath) this.$set(row, 'childPath', '')
+      if (next.length === 0) {
+        this.$set(row, 'selected', false)
+        this.$set(row, 'mode', 'top')
+      } else {
+        this.$set(row, 'mode', 'child')
+        this.$set(row, 'selected', true)
+      }
+    },
+    /**
+     * 统一 path 规范：确保以 / 开头
+     */
+    normalizePath(path) {
+      if (!path) return '/'
+      return path.startsWith('/') ? path : `/${path}`
+    },
+    isSelfRoleKey(roleKey) {
+      return !!(roleKey && typeof roleKey === 'string' && roleKey.startsWith('__user__'))
+    },
+    getRoleStorageKey(roleKey) {
+      const rk = roleKey || ''
+      if (this.isSelfRoleKey(rk)) {
+        const userId = rk.replace('__user__', '')
+        return `${CONFIG_KEY}.user.${userId}`
+      }
+      return `${CONFIG_KEY}.role.${rk}`
+    },
+    /**
+     * 拼接路由 path（兼容 children 既可能为相对路径，也可能为绝对路径）
+     */
+    joinPath(basePath, routePath) {
+      const base = basePath || ''
+      const next = routePath || ''
+      if (!next) return this.normalizePath(base || '/')
+      if (next.startsWith('/')) return this.normalizePath(next)
+      if (!base) return this.normalizePath(next)
+      return this.normalizePath(`${base.replace(/\/$/, '')}/${next.replace(/^\//, '')}`)
+    },
+    /**
+     * 将顶层菜单（主选项）转换成配置界面需要的数据结构
+     * childrenOptions 会被用于“子页面下拉框”
+     */
+    buildTopMenus() {
+      const routes = this.storeTopMenus || []
+      return routes
+        .filter(r => r && !r.hidden)
+        .map(r => {
+          const meta = r.meta || {}
+          const title = meta.title || r.name || ''
+          const key = this.normalizePath(r.path || '/')
+          const leafs = this.flattenLeafRoutes(r.children || [], key)
+          const childrenOptions = leafs
+            .filter(i => i && i.title && i.title !== '工作台')
+            .map(i => ({ title: i.title, path: i.path, icon: i.icon }))
+          const defaultLeaf = childrenOptions[0]
+          return {
+            key,
+            path: key,
+            title,
+            icon: meta.icon || '',
+            iconClass: `icon-${(meta.icon || 'default').replace(/[^a-zA-Z0-9_-]/g, '')}`,
+            childrenOptions,
+            defaultPath: (defaultLeaf && defaultLeaf.path) || key,
+          }
+        })
+        .filter(i => i && i.title && i.title !== '工作台')
+    },
+    /**
+     * 将某个顶层菜单下的路由树压平为“叶子路由列表”
+     * - 叶子路由：没有 children 的节点
+     * - 过滤：没有 meta.title 的节点不作为可配置项
+     */
+    flattenLeafRoutes(routes, parentPath) {
+      const list = []
+      const walk = (arr, base) => {
+        ;(arr || []).forEach(r => {
+          if (!r || r.hidden) return
+          const meta = r.meta || {}
+          const fullPath = this.joinPath(base, r.path)
+          if (r.children && r.children.length) {
+            walk(r.children, fullPath)
+            return
+          }
+          if (!meta.title) return
+          list.push({
+            path: fullPath,
+            title: meta.title,
+            icon: meta.icon || '',
+            subTitle: meta.subtitle || '',
+          })
+        })
+      }
+      walk(routes || [], parentPath || '')
+      return list
+    },
+    /**
+     * 将 configMap 转换成可持久化的数组结构
+     * 说明：
+     * - orderedKeys 按顶层菜单顺序输出，保证回显时卡片顺序稳定
+     * - mode=top：跳该主选项的默认子页
+     * - mode=child：跳该主选项下某个具体子页面
+     */
+    getConfigItems() {
+      return this.getRoleConfigItems(this.activeRoleKey)
+    },
+    /**
+     * 获取指定角色的配置项列表
+     * respectRoleScope=true 时，用于配置界面展示/保存前校验，只读取该角色当前可配置范围内的数据
+     * respectRoleScope=false 时，用于实际持久化/首页展示，直接基于已选数据生成结果，避免再次被权限过滤误裁剪
+     */
+    getRoleConfigItems(roleKey) {
+      const items = []
+      const configMap = this.getConfigMapByRole(roleKey)
+      const availableTopMenus = this.topMenus || []
+      const availableTopMap = new Map(availableTopMenus.map(m => [m.key, m]))
+      const orderedKeys = availableTopMenus.map(m => m.key)
+      orderedKeys.forEach(key => {
+        if (!configMap || !configMap[key]) return
+        const row = configMap[key]
+        if (!row || !row.selected) return
+        const availableTop = availableTopMap.get(key)
+        if (!availableTop) return
+        const allowedChildPaths = new Set((availableTop.childrenOptions || []).map(c => this.normalizePath(c.path)))
+        const mode = row.mode === 'child' ? 'child' : 'top'
+        if (mode !== 'child') {
+          items.push({ topPath: key, mode: 'top', childPath: '' })
+          return
+        }
+        const rawPaths = Array.isArray(row.childPaths) ? row.childPaths : (row.childPath ? [row.childPath] : [])
+        const paths = rawPaths
+          .map(p => (p ? this.normalizePath(p) : ''))
+          .filter(p => p && allowedChildPaths.has(p))
+        const seen = new Set()
+        paths.forEach(p => {
+          if (seen.has(p)) return
+          seen.add(p)
+          items.push({ topPath: key, mode: 'child', childPath: p })
+        })
+      })
+      return items
+    },
+    /**
+     * 根据配置生成首页展示卡片
+     * 卡片点击时：
+     * - 先 dispatch('selectTopMenu', topPath)：切换主菜单高亮/侧边栏
+     * - 再 router.push(targetPath)：进入目标页面
+     */
+    buildVisibleItemsForCurrentUser() {
+      const roleKeys = this.resolveRoleKeysForCurrentUser()
+      const mergedItems = this.getMergedRoleConfigItems(roleKeys)
+      this.debugLog('buildVisibleItemsForCurrentUser', {
+        resolvedRoleKeys: roleKeys,
+        currentRoles: (this.$store && this.$store.getters && this.$store.getters.roles) || [],
+        roleConfigMap: this.roleConfigMap,
+        mergedItems,
+      })
+      return this.buildVisibleItemsByItems(mergedItems)
+    },
+    /**
+     * 根据指定角色的配置生成首页展示卡片
+     */
+    buildVisibleItemsForRole(roleKey) {
+      return this.buildVisibleItemsByItems(this.getRoleConfigItems(roleKey))
+    },
+    /**
+     * 根据配置项列表生成首页卡片
+     */
+    buildVisibleItemsByItems(items) {
+      const byTop = new Map((this.topMenus || []).map(m => [m.key, m]))
+      if (!items || items.length === 0) return []
+      const cards = []
+      const seenTarget = new Set()
+      items.forEach((cfg, index) => {
+        const top = byTop.get(cfg.topPath)
+        if (!top) return
+        const availableChildren = top.childrenOptions || []
+        if (availableChildren.length === 0) return
+        const isChild = cfg.mode === 'child' && cfg.childPath
+        const child = isChild ? availableChildren.find(c => this.normalizePath(c.path) === this.normalizePath(cfg.childPath)) : null
+        // 子页面模式下，如果当前用户没有这个子页面权限，直接丢弃
+        if (isChild && !child) return
+        const defaultChild = availableChildren.find(c => this.normalizePath(c.path) === this.normalizePath(top.defaultPath))
+        // 主入口模式也必须落到当前用户可访问的默认子页面，否则不展示
+        if (!isChild && !defaultChild) return
+        const targetPath = isChild ? child.path : defaultChild.path
+        const targetKey = this.normalizePath(targetPath)
+        if (seenTarget.has(targetKey)) return
+        seenTarget.add(targetKey)
+        const icon = (child && child.icon) || top.icon || ''
+        const title = (child && child.title) || top.title
+        const subTitle = isChild ? top.title : '主入口'
+        cards.push({
+          key: `${cfg.topPath}__${index}`,
+          title,
+          subTitle,
+          path: targetPath,
+          topPath: top.key,
+          icon,
+          iconClass: `icon-${(icon || 'default').replace(/[^a-zA-Z0-9_-]/g, '')}`,
+        })
+      })
+      return cards
+    },
+    /**
+     * 解析当前用户应参与展示合并的角色列表：
+     * - 先按当前用户角色顺序加入
+     * - 最后追加 default 作为兜底
+     */
+    resolveRoleKeysForCurrentUser() {
+      const merged = []
+      if (this.selfRoleKey) {
+        merged.push(this.selfRoleKey)
+      }
+      this.debugLog('resolveRoleKeysForCurrentUser', {
+        roles: (this.$store && this.$store.getters && this.$store.getters.roles) || [],
+        mergedRoleKeys: merged,
+      })
+      return merged
+    },
+    /**
+     * 将多个角色的配置合并，并按“用户角色顺序 -> default”输出
+     * 去重规则：
+     * - 相同 topPath + childPath 只保留一份
+     * - top 模式的 childPath 视为空字符串
+     */
+    getMergedRoleConfigItems(roleKeys) {
+      const keys = Array.isArray(roleKeys) ? roleKeys : []
+      const list = []
+      const seen = new Set()
+      keys.forEach(roleKey => {
+        const items = this.getRoleConfigItems(roleKey)
+        ;(items || []).forEach(it => {
+          const childPath = it.mode === 'child' ? (it.childPath || '') : ''
+          const sign = `${it.topPath}|${childPath}`
+          if (seen.has(sign)) return
+          seen.add(sign)
+          list.push({
+            topPath: it.topPath,
+            mode: it.mode === 'child' ? 'child' : 'top',
+            childPath,
+          })
+        })
+      })
+      this.debugLog('getMergedRoleConfigItems', {
+        roleKeys: keys,
+        mergedItems: list,
+      })
+      return list
+    },
+    /**
+     * 默认展示的卡片（当未配置或配置项为空时）
+     * 这里使用“顶层菜单 title”做推荐匹配，找不到则退化为前 8 个顶层菜单
+     */
+    defaultItems() {
+      const preferTop = ['数字仓储', '销售中心', '科学排产', '质量管理', '生产辅助', '生产管控', '文件夹', '系统管理', '驾驶舱']
+      const byTitle = new Map((this.topMenus || []).map(i => [i.title, i]))
+      const list = preferTop
+        .map(t => byTitle.get(t))
+        .filter(Boolean)
+        .slice(0, 8)
+        .map(m => ({
+          key: `${m.key}__default`,
+          title: m.title,
+          subTitle: '主入口',
+          path: m.defaultPath || m.path,
+          topPath: m.key,
+          icon: m.icon || '',
+          iconClass: m.iconClass,
+        }))
+      if (list.length > 0) return list
+      return (this.topMenus || []).slice(0, 8).map(m => ({
+        key: `${m.key}__default`,
+        title: m.title,
+        subTitle: '主入口',
+        path: m.defaultPath || m.path,
+        topPath: m.key,
+        icon: m.icon || '',
+        iconClass: m.iconClass,
+      }))
+    },
+    /**
+     * 打开配置弹窗：
+     * - 若当前完全没有配置，则以 defaultItems 作为初始勾选（更符合“开箱即用”）
+     */
+    async openConfig() {
+      if (!this.activeRoleKey) this.activeRoleKey = this.selfRoleKey
+      this.debugLog('openConfig-before', {
+        activeRoleKey: this.activeRoleKey,
+        roleConfigMap: this.roleConfigMap,
+        topMenus: this.topMenus,
+      })
+      await this.loadRoleConfig(this.activeRoleKey)
+      this.ensureRoleConfigMap(this.activeRoleKey)
+      this.configVisible = true
+      this.debugLog('openConfig-after', {
+        activeRoleKey: this.activeRoleKey,
+        currentRoleItems: this.getConfigItems(),
+      })
+    },
+    /**
+     * 加载配置：
+     * - 优先系统参数（后端持久化）
+     * - 失败降级 localStorage（避免配置丢失影响使用）
+     */
+    async loadConfig() {
+      try {
+        const res = await this.getConfigKey(CONFIG_KEY)
+        const value = res && (res.msg || res.data || res.value)
+        this.debugLog('loadConfig-getConfigKey-response', { res, value })
+        if (value) {
+          this.loadedConfigRaw = JSON.parse(value)
+          this.loadedApplied = false
+          this.debugLog('loadConfig-parsed', this.loadedConfigRaw)
+          this.tryApplyLoadedConfig()
+        }
+      } catch (e) {
+        this.debugLog('loadConfig-getConfigKey-error', e)
+        const cached = this.$cache && this.$cache.local.getJSON(CONFIG_KEY)
+        if (cached) {
+          this.loadedConfigRaw = cached
+          this.loadedApplied = false
+          this.debugLog('loadConfig-use-cache', cached)
+          this.tryApplyLoadedConfig()
+        }
+      }
+    },
+    async loadCurrentUserRoleConfigs() {
+      if (this.selfRoleKey) await this.loadRoleConfig(this.selfRoleKey)
+    },
+    async loadRoleConfig(roleKey) {
+      const rk = roleKey || ''
+      if (!rk) return
+      if (this.loadedRoleKeys && this.loadedRoleKeys[rk]) return
+      const storageKey = this.getRoleStorageKey(rk)
+      if (!this.isSuperAdmin && this.isSelfRoleKey(rk)) {
+        const cached = this.$cache && this.$cache.local.getJSON(storageKey)
+        if (cached) this.applySingleRoleConfig(cached, rk)
+        if (!this.loadedRoleKeys) this.loadedRoleKeys = {}
+        this.$set(this.loadedRoleKeys, rk, true)
+        return
+      }
+      try {
+        const res = await this.getConfigKey(storageKey)
+        const value = res && (res.msg || res.data || res.value)
+        this.debugLog('loadRoleConfig-response', { roleKey: rk, storageKey, res, value })
+        if (value) {
+          const parsed = JSON.parse(value)
+          this.applySingleRoleConfig(parsed, rk)
+        }
+      } catch (e) {
+        this.debugLog('loadRoleConfig-error', { roleKey: rk, storageKey, error: e })
+        const cached = this.$cache && this.$cache.local.getJSON(storageKey)
+        if (cached) {
+          this.debugLog('loadRoleConfig-use-cache', { roleKey: rk, storageKey, cached })
+          this.applySingleRoleConfig(cached, rk)
+        }
+      } finally {
+        if (!this.loadedRoleKeys) this.loadedRoleKeys = {}
+        this.$set(this.loadedRoleKeys, rk, true)
+      }
+    },
+    async findConfigByKey(configKey) {
+      try {
+        const res = await listConfig({
+          pageNum: 1,
+          pageSize: 10,
+          configKey,
+        })
+        const rows = (res && res.rows) || []
+        const hit = rows.find(item => item && item.configKey === configKey)
+        this.debugLog('findConfigByKey', { configKey, hit, rows })
+        return hit || null
+      } catch (e) {
+        this.debugLog('findConfigByKey-error', { configKey, error: e })
+        return null
+      }
+    },
+    /**
+     * 保存配置：
+     * - 写入系统参数
+     * - 同步写本地缓存，作为后端失败时的兜底
+     */
+    async saveConfig() {
+      const storageKey = this.getRoleStorageKey(this.activeRoleKey)
+      const roleItems = this.getRoleConfigItems(this.activeRoleKey)
+      const persistPayload = this.buildSingleRolePersistPayload(roleItems)
+      const payload = JSON.stringify(persistPayload)
+      this.debugLog('saveConfig-start', {
+        activeRoleKey: this.activeRoleKey,
+        storageKey,
+        payloadLength: payload.length,
+        payload,
+        persistPayload,
+      })
+      if (!this.isSuperAdmin) {
+        if (this.$cache) this.$cache.local.setJSON(storageKey, persistPayload)
+        this.configVisible = false
+        if (this.$modal) this.$modal.msgSuccess('已保存')
+        return
+      }
+      if (payload.length > 500) {
+        this.debugLog('saveConfig-payload-too-long', { payloadLength: payload.length, persistPayload })
+        if (this.$cache) this.$cache.local.setJSON(storageKey, persistPayload)
+        this.configVisible = false
+        if (this.$modal) this.$modal.msgWarning(`配置内容过多，后端参数长度上限为500，当前为${payload.length}，已使用本地保存`)
+        return
+      }
+      try {
+        const existsConfig = await this.findConfigByKey(storageKey)
+        if (existsConfig && existsConfig.configId) {
+          const updateRes = await updateConfig({
+            ...existsConfig,
+            configValue: payload,
+          })
+          this.debugLog('saveConfig-updateConfig-success', { storageKey, updateRes, existsConfig })
+        } else {
+          const isUser = this.isSelfRoleKey(this.activeRoleKey)
+          const label = isUser ? `用户：${this.currentUserId}` : `角色：${this.activeRoleKey}`
+          const addRes = await addConfig({
+            configName: `首页快捷入口配置-${label}`,
+            configKey: storageKey,
+            configValue: payload,
+            configType: 'Y',
+            remark: `工作台快捷入口配置（${label}）`,
+          })
+          this.debugLog('saveConfig-addConfig-success', { storageKey, addRes })
+        }
+        if (this.$cache) this.$cache.local.setJSON(storageKey, persistPayload)
+        this.configVisible = false
+        if (this.$modal) this.$modal.msgSuccess('已保存')
+      } catch (e) {
+        this.debugLog('saveConfig-upsert-error', e)
+        if (this.$cache) this.$cache.local.setJSON(storageKey, persistPayload)
+        this.configVisible = false
+        if (this.$modal) this.$modal.msgWarning('保存失败，已使用本地保存')
+      }
+    },
+    /**
+     * 跳转逻辑：
+     * - 先切换主菜单（保证顶部菜单/侧边栏高亮一致）
+     * - 再进入目标路由
+     */
+    go(item) {
+      const topPath = item && item.topPath
+      const target = item && item.path
+      if (topPath) this.$store.dispatch('selectTopMenu', topPath)
+      this.$router.push({ path: this.normalizePath(target) })
+    },
+    buildSingleRolePersistPayload(items) {
+      const list = (items || []).map(it => [it.topPath || '', it.mode === 'child' ? (it.childPath || '') : ''])
+      return { v: 1, i: list }
+    },
+    /**
+     * 生成需要持久化的配置结构（按角色存储）
+     */
+    getPersistPayload() {
+      const itemIndexMap = new Map()
+      const itemList = []
+      const roleMap = {}
+      const pushItem = (topPath, childPath) => {
+        const key = `${topPath || ''}|${childPath || ''}`
+        if (!itemIndexMap.has(key)) {
+          itemIndexMap.set(key, itemList.length)
+          itemList.push([topPath || '', childPath || ''])
+        }
+        return itemIndexMap.get(key)
+      }
+      const roleKeys = Object.keys(this.roleConfigMap || {})
+      roleKeys.forEach(rk => {
+        // 持久化时不再二次按权限范围裁剪，直接保存当前角色已勾选的数据。
+        // 角色可选范围已经在配置界面层做过限制，这里再次过滤会导致“界面能选、保存后失效”的问题。
+        const items = this.getRoleConfigItems(rk)
+        if (!items || items.length === 0) return
+        const persistRoleKey = rk === 'default' ? 'd' : rk
+        roleMap[persistRoleKey] = items.map(it => pushItem(it.topPath, it.mode === 'child' ? it.childPath : ''))
+      })
+      if (!roleMap.d) {
+        const def = this.getRoleConfigItems('default')
+        if (def && def.length > 0) {
+          roleMap.d = def.map(it => pushItem(it.topPath, it.mode === 'child' ? it.childPath : ''))
+        }
+      }
+      return { v: 3, i: itemList, r: roleMap }
+    },
+    applySingleRoleConfig(parsed, roleKey) {
+      const rk = roleKey || ''
+      if (!rk) return
+      if (!parsed) return
+      if (parsed && parsed.v === 1 && Array.isArray(parsed.i)) {
+        const items = parsed.i
+          .filter(pair => Array.isArray(pair) && pair.length >= 2)
+          .map(pair => ({
+            topPath: pair[0],
+            mode: pair[1] ? 'child' : 'top',
+            childPath: pair[1] || '',
+          }))
+        this.applyConfigItems(items, rk)
+        return
+      }
+      if (Array.isArray(parsed)) {
+        if (parsed.length > 0 && typeof parsed[0] === 'string') {
+          this.applyLegacyKeys(parsed, rk)
+          return
+        }
+        if (parsed.length > 0 && typeof parsed[0] === 'object') {
+          this.applyConfigItems(parsed, rk)
+          return
+        }
+      }
+      if (parsed && parsed.items && Array.isArray(parsed.items)) {
+        this.applyConfigItems(parsed.items, rk)
+      }
+    },
+    /**
+     * 确保某个角色对应的 configMap 存在
+     */
+    ensureRoleConfigMap(roleKey) {
+      const rk = roleKey || 'default'
+      if (!this.roleConfigMap) this.roleConfigMap = {}
+      if (!this.roleConfigMap[rk]) this.$set(this.roleConfigMap, rk, {})
+    },
+    /**
+     * 获取某个角色对应的 configMap（并保证其存在）
+     */
+    getConfigMapByRole(roleKey) {
+      const rk = roleKey || 'default'
+      this.ensureRoleConfigMap(rk)
+      return this.roleConfigMap[rk]
+    },
+    /**
+     * 确保 configMap[key] 存在，避免 v-model/赋值时出现 undefined
+     */
+    ensureRow(key) {
+      if (!key) return
+      const configMap = this.getConfigMapByRole(this.activeRoleKey)
+      if (!configMap[key]) {
+        this.$set(configMap, key, { selected: false, mode: 'top', childPaths: [] })
+      }
+    },
+    /**
+     * 是否勾选展示某个主选项
+     */
+    isSelected(key) {
+      const configMap = this.getConfigMapByRole(this.activeRoleKey)
+      return !!(configMap && configMap[key] && configMap[key].selected)
+    },
+    /**
+     * 勾选/取消勾选
+     */
+    toggleSelected(key, val) {
+      this.ensureRow(key)
+      const configMap = this.getConfigMapByRole(this.activeRoleKey)
+      this.$set(configMap[key], 'selected', !!val)
+      if (!!val && !configMap[key].mode) this.$set(configMap[key], 'mode', 'top')
+      if (!val) {
+        this.$set(configMap[key], 'mode', 'top')
+        this.$set(configMap[key], 'childPaths', [])
+        if (configMap[key] && configMap[key].childPath) this.$set(configMap[key], 'childPath', '')
+      }
+    },
+    /**
+     * 当前主选项的跳转模式
+     */
+    getMode(key) {
+      const configMap = this.getConfigMapByRole(this.activeRoleKey)
+      return (configMap && configMap[key] && configMap[key].mode) || 'top'
+    },
+    /**
+     * 设置跳转模式
+     * mode=top 时清空 childPath，避免保存无效子路径
+     */
+    setMode(key, mode) {
+      this.ensureRow(key)
+      const configMap = this.getConfigMapByRole(this.activeRoleKey)
+      this.$set(configMap[key], 'mode', mode === 'child' ? 'child' : 'top')
+      if (mode !== 'child') {
+        this.$set(configMap[key], 'childPaths', [])
+        if (configMap[key] && configMap[key].childPath) this.$set(configMap[key], 'childPath', '')
+      }
+      if (mode === 'child' && !Array.isArray(configMap[key].childPaths)) this.$set(configMap[key], 'childPaths', [])
+    },
+    /**
+     * 当前主选项选择的子页面 path（多选）
+     */
+    getChildPaths(key) {
+      const configMap = this.getConfigMapByRole(this.activeRoleKey)
+      const arr = (configMap && configMap[key] && configMap[key].childPaths) || []
+      return Array.isArray(arr) ? arr : []
+    },
+    /**
+     * 设置子页面 path（多选）
+     */
+    setChildPaths(key, childPaths) {
+      this.ensureRow(key)
+      const configMap = this.getConfigMapByRole(this.activeRoleKey)
+      const list = Array.isArray(childPaths) ? childPaths : (childPaths ? [childPaths] : [])
+      const next = Array.from(new Set(list.map(p => (p ? this.normalizePath(p) : '')).filter(Boolean)))
+      this.$set(configMap[key], 'childPaths', next)
+      if (configMap[key] && configMap[key].childPath) this.$set(configMap[key], 'childPath', '')
+    },
+    /**
+     * 统一处理加载到的配置，兼容以下几种来源/格式：
+     * - v3 压缩对象：{ v: 3, i: [[topPath, childPath]], r: { roleKey: [itemIndex] } }
+     * - v2 对象：{ version: 2, byRole: { roleKey: [{ topPath, mode, childPath }] } }
+     * - 新版数组：[{ topPath, mode, childPath }]
+     * - 旧版数组：['/a/b', '/c/d']
+     * - 包裹对象：{ items: [...] }
+     */
+    applyLoadedConfig(parsed) {
+      if (!parsed) return
+      if (parsed && parsed.v === 3 && Array.isArray(parsed.i) && parsed.r && typeof parsed.r === 'object') {
+        Object.keys(parsed.r).forEach(persistRoleKey => {
+          const roleKey = persistRoleKey === 'd' ? 'default' : persistRoleKey
+          const indexes = Array.isArray(parsed.r[persistRoleKey]) ? parsed.r[persistRoleKey] : []
+          const items = indexes
+            .map(idx => parsed.i[idx])
+            .filter(pair => Array.isArray(pair) && pair.length >= 2)
+            .map(pair => ({
+              topPath: pair[0],
+              mode: pair[1] ? 'child' : 'top',
+              childPath: pair[1] || '',
+            }))
+          if (items.length > 0) this.applyConfigItems(items, roleKey)
+        })
+        return
+      }
+      if (parsed && parsed.byRole && typeof parsed.byRole === 'object') {
+        Object.keys(parsed.byRole).forEach(roleKey => {
+          const items = parsed.byRole[roleKey]
+          if (Array.isArray(items)) this.applyConfigItems(items, roleKey)
+        })
+        return
+      }
+      if (Array.isArray(parsed)) {
+        if (parsed.length > 0 && typeof parsed[0] === 'string') {
+          this.applyLegacyKeys(parsed, 'default')
+          return
+        }
+        if (parsed.length > 0 && typeof parsed[0] === 'object') {
+          this.applyConfigItems(parsed, 'default')
+          return
+        }
+      }
+      if (parsed && parsed.items && Array.isArray(parsed.items)) {
+        this.applyConfigItems(parsed.items, 'default')
+      }
+    },
+    /**
+     * 旧版配置（叶子路由 path 数组）迁移：
+     * - 先从 leafPath -> topPath 建立映射
+     * - 再把每个 leafPath 落到对应 topPath 的 childPath 上
+     */
+    applyLegacyKeys(keys, roleKey) {
+      const menuMap = this.buildMenuIndex()
+      ;(keys || []).forEach(p => {
+        const path = this.normalizePath(p)
+        const hit = menuMap.leafToTop.get(path)
+        if (!hit) return
+        const rk = roleKey || 'default'
+        this.ensureRoleConfigMap(rk)
+        const configMap = this.getConfigMapByRole(rk)
+        if (!configMap[hit.topPath]) this.$set(configMap, hit.topPath, { selected: false, mode: 'top', childPaths: [] })
+        this.$set(configMap[hit.topPath], 'selected', true)
+        this.$set(configMap[hit.topPath], 'mode', 'child')
+        const row = configMap[hit.topPath]
+        const arr = Array.isArray(row.childPaths) ? row.childPaths : []
+        const next = Array.from(new Set(arr.concat([path]).map(pp => this.normalizePath(pp)).filter(Boolean)))
+        this.$set(row, 'childPaths', next)
+      })
+    },
+    /**
+     * 新版配置数组回显
+     */
+    applyConfigItems(items, roleKey) {
+      const rk = roleKey || 'default'
+      this.ensureRoleConfigMap(rk)
+      const configMap = this.getConfigMapByRole(rk)
+      ;(items || []).forEach(it => {
+        if (!it || !it.topPath) return
+        const topPath = this.normalizePath(it.topPath)
+        if (!configMap[topPath]) this.$set(configMap, topPath, { selected: false, mode: 'top', childPaths: [] })
+        const row = configMap[topPath]
+        this.$set(row, 'selected', true)
+        const mode = it.mode === 'child' ? 'child' : 'top'
+        this.$set(row, 'mode', mode)
+        if (mode !== 'child') {
+          this.$set(row, 'childPaths', [])
+          return
+        }
+        const cp = it.childPath ? this.normalizePath(it.childPath) : ''
+        if (!cp) return
+        const arr = Array.isArray(row.childPaths) ? row.childPaths : []
+        const next = Array.from(new Set(arr.concat([cp]).map(pp => this.normalizePath(pp)).filter(Boolean)))
+        this.$set(row, 'childPaths', next)
+      })
+    },
+    /**
+     * 生成 leafPath -> topPath 的索引
+     * 用于从旧版配置（只保存 leafPath）反推所属顶层菜单
+     */
+    buildMenuIndex() {
+      const leafToTop = new Map()
+      ;(this.topMenus || []).forEach(top => {
+        ;(top.childrenOptions || []).forEach(c => {
+          if (!c || !c.path) return
+          leafToTop.set(this.normalizePath(c.path), { topPath: top.key })
+        })
+      })
+      return { leafToTop }
+    },
+    /**
+     * 清理无效配置项：
+     * 当后端删除/隐藏顶层菜单时，旧配置可能残留，需要主动剔除
+     */
+    repairConfigAgainstMenus() {
+      const topKeys = new Set((this.topMenus || []).map(m => m.key))
+      const roleKeys = Object.keys(this.roleConfigMap || {})
+      roleKeys.forEach(rk => {
+        const configMap = this.roleConfigMap && this.roleConfigMap[rk]
+        if (!configMap) return
+        Object.keys(configMap).forEach(k => {
+          if (!topKeys.has(k)) {
+            this.$delete(configMap, k)
+          }
+        })
+      })
+    },
+    /**
+     * 顶层菜单就绪后，尝试对 loadedConfigRaw 做一次应用（包含旧版 leafPath 的迁移）
+     */
+    tryApplyLoadedConfig() {
+      if (this.loadedApplied) return
+      if (!this.loadedConfigRaw) return
+      if (!this.topMenus || this.topMenus.length === 0) return
+      this.debugLog('tryApplyLoadedConfig-before', {
+        loadedConfigRaw: this.loadedConfigRaw,
+        topMenus: this.topMenus,
+      })
+      this.applyLoadedConfig(this.loadedConfigRaw)
+      this.loadedApplied = true
+      this.debugLog('tryApplyLoadedConfig-after', {
+        roleConfigMap: this.roleConfigMap,
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.quick-access {
+  margin-top: 18px;
+}
+
+.quick-access-debug-bar {
+  margin-bottom: 12px;
+  padding: 10px 12px;
+  background: #f5f7fa;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #606266;
+}
+
+.debug-line {
+  display: flex;
+  align-items: flex-start;
+  line-height: 20px;
+}
+
+.debug-label {
+  flex: 0 0 90px;
+  color: #909399;
+}
+
+.debug-value {
+  flex: 1;
+  word-break: break-all;
+}
+
+.quick-access-header {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+
+.quick-access-config-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.quick-access-config-tip {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  white-space: nowrap;
+}
+
+.quick-access-current-user {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 6px;
+  background: #fff;
+  color: rgba(0, 0, 0, 0.75);
+  line-height: 28px;
+}
+
+::v-deep .quick-access-dialog {
+  max-width: calc(100vw - 40px);
+}
+
+::v-deep .quick-access-dialog .el-dialog__body {
+  padding: 12px;
+}
+
+.quick-access-config-body {
+  display: flex;
+  gap: 12px;
+}
+
+.config-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.config-right {
+  flex: 0 0 260px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background: #fafafa;
+  height: 520px;
+  display: flex;
+  flex-direction: column;
+}
+
+.selected-header {
+  padding: 10px 12px;
+  border-bottom: 1px solid #ebeef5;
+  background: #fff;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.selected-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  line-height: 18px;
+}
+
+.selected-subtitle {
+  font-size: 12px;
+  color: #909399;
+  line-height: 18px;
+  margin-top: 4px;
+}
+
+.selected-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  font-size: 12px;
+}
+
+.selected-list {
+  flex: 1;
+  padding: 8px 10px;
+  overflow: hidden;
+}
+
+.selected-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 8px 6px;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
+  border-radius: 6px;
+  transition: background-color 0.15s ease;
+}
+
+.selected-item:hover {
+  background: rgba(64, 158, 255, 0.06);
+}
+
+.selected-item:last-child {
+  border-bottom: none;
+}
+
+.selected-item-main {
+  min-width: 0;
+  padding-right: 8px;
+}
+
+.selected-item-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #303133;
+  line-height: 18px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selected-item-desc {
+  font-size: 12px;
+  color: #909399;
+  line-height: 18px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selected-item-actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.quick-access-empty-state {
+  height: 520px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  text-align: center;
+  background: #fafafa;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+
+  .empty-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 12px;
+  }
+
+  .empty-desc {
+    font-size: 13px;
+    line-height: 22px;
+    color: #909399;
+  }
+}
+
+.quick-access-empty-state.is-loading {
+  .empty-loading-icon {
+    font-size: 28px;
+    color: #409eff;
+    margin-bottom: 14px;
+  }
+}
+
+.panel-group {
+  .card-panel-col {
+    margin-bottom: 32px;
+  }
+
+  .card-panel {
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    color: #666;
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    border-radius: 10px;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
+    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+
+    &:hover {
+      transform: translateY(-3px);
+      border-color: rgba(64, 158, 255, 0.35);
+      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
+
+      .card-panel-icon-wrapper {
+        color: #fff;
+        background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+        box-shadow: 0 10px 18px rgba(64, 158, 255, 0.25);
+      }
+    }
+
+    &.is-add {
+      border-style: dashed;
+      background: #fafafa;
+      justify-content: center;
+    }
+
+    &.is-add:hover {
+      border-color: rgba(64, 158, 255, 0.5);
+      background: rgba(64, 158, 255, 0.04);
+
+      .card-panel-add-icon {
+        background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+        color: #fff;
+        box-shadow: 0 10px 18px rgba(64, 158, 255, 0.25);
+      }
+    }
+
+    .card-panel-icon-wrapper {
+      flex: 0 0 auto;
+      margin: 0 14px 0 14px;
+      padding: 16px;
+      transition: all 0.18s ease;
+      border-radius: 10px;
+      color: #409eff;
+      background: linear-gradient(135deg, rgba(64, 158, 255, 0.18) 0%, rgba(64, 158, 255, 0.08) 100%);
+      box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.1);
+    }
+
+    .card-panel-icon {
+      font-size: 34px;
+    }
+
+    .card-panel-description {
+      flex: 1;
+      min-width: 0;
+      font-weight: 600;
+      margin: 0 18px 0 0;
+
+      .card-panel-text {
+        line-height: 20px;
+        color: rgba(0, 0, 0, 0.75);
+        font-size: 16px;
+        margin-bottom: 6px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .card-panel-subtext {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.45);
+        line-height: 16px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .card-panel-add {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      min-width: 0;
+    }
+
+    .card-panel-add-icon {
+      flex: 0 0 auto;
+      width: 56px;
+      height: 56px;
+      margin: 0 14px 0 14px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 26px;
+      color: #409eff;
+      background: rgba(64, 158, 255, 0.12);
+      transition: all 0.18s ease;
+      box-shadow: inset 0 0 0 1px rgba(64, 158, 255, 0.1);
+    }
+
+    .card-panel-add-text {
+      flex: 1;
+      min-width: 0;
+      margin: 0 18px 0 0;
+      font-weight: 600;
+
+      .card-panel-text {
+        line-height: 20px;
+        color: rgba(0, 0, 0, 0.75);
+        font-size: 16px;
+        margin-bottom: 6px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .card-panel-subtext {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.45);
+        line-height: 16px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.top-menu-cell {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.top-menu-icon {
+  font-size: 16px;
+  margin-right: 6px;
+}
+
+.top-menu-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 1366px) {
+  .panel-group {
+    .card-panel {
+      .card-panel-icon-wrapper {
+        margin-right: 10px;
+        padding: 14px;
+      }
+
+      .card-panel-icon {
+        font-size: 30px;
+      }
+
+      .card-panel-description {
+        margin-right: 12px;
+
+        .card-panel-text {
+          font-size: 15px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .quick-access-config-body {
+    flex-direction: column;
+  }
+
+  .config-right {
+    flex: 0 0 auto;
+    height: auto;
+    max-height: 320px;
+  }
+
+  .panel-group {
+    .card-panel {
+      height: 92px;
+
+      .card-panel-icon-wrapper {
+        padding: 12px;
+      }
+
+      .card-panel-icon {
+        font-size: 24px;
+      }
+
+      .card-panel-description {
+        margin-right: 10px;
+
+        .card-panel-text {
+          font-size: 14px;
+          margin-bottom: 6px;
+        }
+
+        .card-panel-subtext {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/klp-ui/src/layout/components/Sidebar/index.vue b/klp-ui/src/layout/components/Sidebar/index.vue
index 20d8d1bf3..5ae6ea6fa 100644
--- a/klp-ui/src/layout/components/Sidebar/index.vue
+++ b/klp-ui/src/layout/components/Sidebar/index.vue
@@ -23,7 +23,7 @@
                     <span class="top-menu-title">{{ (menu.meta && menu.meta.title) || menu.name }}</span>
                 </div>
             </div>
-            <div slot="reference" class="sidebar-section-title" :class="{ 'is-collapse': isCollapse }">
+            <div ref="topMenuTrigger" slot="reference" class="sidebar-section-title" :class="{ 'is-collapse': isCollapse }" tabindex="0">
                 <div class="section-title-inner">
                     <div class="section-icon">
                         <svg-icon v-if="activeTopMenuIcon" :icon-class="activeTopMenuIcon" />
@@ -141,6 +141,11 @@ export default {
         }
     },
     watch: {
+        sectionPopoverVisible: {
+            handler(val) {
+                if (!val) this.releasePopoverFocus()
+            }
+        },
         $route: {
             immediate: true,
             handler(newRoute) {
@@ -165,8 +170,16 @@ export default {
             this.$router.push('/')
             this.$nextTick(() => {
                 this.sectionPopoverVisible = false
+                this.releasePopoverFocus()
             })
         },
+        releasePopoverFocus() {
+            if (typeof document === 'undefined') return
+            const el = document.activeElement
+            if (el && typeof el.blur === 'function') el.blur()
+            const trigger = this.$refs && this.$refs.topMenuTrigger
+            if (trigger && typeof trigger.focus === 'function') trigger.focus()
+        },
         autoSelectTopMenu(currentPath) {
             const topMenus = this.$store.state.permission.topMenuList
             if (topMenus.length === 0) return
diff --git a/klp-ui/src/views/index.vue b/klp-ui/src/views/index.vue
index 293f03671..e00b53abc 100644
--- a/klp-ui/src/views/index.vue
+++ b/klp-ui/src/views/index.vue
@@ -19,7 +19,7 @@
             </p>
           </div>
 
-          <statistic-group />
+          <quick-access-group />
         </el-col>
 
         <!-- 右栏 -->
@@ -37,10 +37,6 @@
       </el-row>
     </div>
 
-    <!-- <div>
-      <statistic-group />
-    </div> -->
-    
     <!-- <AllApplications />    
     <el-row :gutter="10">
       <el-col :span="18">
@@ -54,7 +50,7 @@
 </template>
 
 <script>
-import StatisticGroup from '@/components/HomeModules/StatisticGroup.vue'
+import QuickAccessGroup from '@/components/HomeModules/QuickAccessGroup.vue'
 // import AllApplications from '@/components/HomeModules/AllApplications.vue'
 // import MiniCalendar from '@/components/HomeModules/MiniCalendar.vue'
 
@@ -62,7 +58,7 @@ export default {
   name: 'Index',
   components: {
     // PanelGroup,
-    StatisticGroup,
+    QuickAccessGroup,
     // AllApplications,
     // MiniCalendar,
   },
@@ -193,4 +189,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>