touyun_liuyun/System_Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
System_Management/openspec/changes/archive/2026-10-11-fe-admin-layout/tasks.md
liuyun 5e002cac74 chore(openspec): archive fe-admin-layout, sync frontend layout spec to main 
- 归档 fe-admin-layout（管理后台布局壳 + 主题系统）
- 新增主 spec：frontend/AD/layout

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-10-11 01:09:15 +08:00

3.0 KiB
Raw Permalink Blame History

1. Element Plus 集成

  • 1.1 安装 element-plus（及 @element-plus/icons-vue）
  • 1.2 vite.config.ts：Components/AutoImport 增加 ElementPlusResolver（on-demand + sass 样式）
  • 1.3 App.vue 用 <el-config-provider :locale="zhCn"> 包裹，配中文 locale
  • 1.4 冒烟：页面上 el-button 能渲染、ElMessage 可调用

2. 类型与默认值配置

  • 2.1 src/types/resource.ts：ResourceType 与 ResourceNode 类型，字段严格对齐后端 resource（id/code/name/parentCode/type/path/component/icon/sort + children）
  • 2.2 src/config/layout.ts：defaultLayout 集中配置默认值（themeColor #2E7FA3、sidebarWidth 210 等）
  • 2.3 src/config/menu.ts：占位菜单树（字段对齐后端，已组装 children）

3. 布局/主题状态（app store）

  • 3.1 src/stores/modules/app.ts：以 defaultLayout 作初始值，开启 persist；含 layout/mixbar/themeColor/isDark/headerFixed/sidebarWidth/footerFixed/sidebarCollapsed/showBreadcrumb/showTabs/showFullscreen/menuAccordion

4. 主题系统

  • 4.1 主题色工具：由主色计算 light-3/5/7/8/9、dark-2，写入 :root 的 --el-color-primary*
  • 4.2 applyTheme()：统一切换 html.dark class 与 data-theme（对齐现有 --wm-color-* 深色令牌）
  • 4.3 监听 store 的 themeColor/isDark 变化自动应用

5. 布局壳组件（src/components/ty-*.vue，kebab 命名 + 自动导入，props/emits 显式类型化）

  • 5.1 ty-header：顶栏（一级导航或工具栏 + 折叠 + 全屏 + 设置入口 + 用户下拉），响应 headerFixed；props 接收菜单/模式/折叠等，emits 折叠/打开设置
  • 5.2 ty-mixbar：固定最左一级图标栏
  • 5.3 ty-sidebar：左侧菜单（el-menu），支持 collapse/expand、width、accordion
  • 5.4 ty-tabs：多页签（展示/切换/关闭）
  • 5.5 ty-breadcrumb：面包屑
  • 5.6 ty-footer：底部版权「云南投云科技有限公司」，响应 footerFixed
  • 5.7 替换 layouts/default.vue 为布局壳：读 store，按 layout/mixbar 条件渲染并 props/emits 接线（组件不直接依赖 store）

6. 设置组件与面板

  • 6.1 ty-setting：设置组件（齿轮触发 + el-drawer 外壳）
  • 6.2 ty-setting-panel：设置面板——布局模式、MixBar、主题色选择器（默认 #2E7FA3）、暗黑、顶栏固定（纯左右禁用）、侧边宽度 slider(200–340)、底部固定、面包屑/多页签/全屏/手风琴开关

7. 验证

  • 7.1 pnpm dev 启动，登录后进入布局壳
  • 7.2 切换 4 种模式即时生效；「左右」顶栏不含菜单、导航全在左侧；MixBar 仅左右可用
  • 7.3 主题色、暗黑、侧边宽度、折叠、手风琴、多页签、全屏、面包屑、底部版权均生效
  • 7.4 刷新后设置保留（localStorage）；改 defaultLayout 后未改过的用户按新默认值渲染
  • 7.5 pnpm type-check 与 pnpm build:prod 通过