System_Management/openspec/changes/archive/2026-10-11-fe-admin-layout/tasks.md

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 通过