System_Management/openspec/changes/fe-admin-layout/proposal.md

Why

Phase 0 前端只有登录页与路由守卫，登录后没有真正的后台布局壳。Phase 1 的管理后台需要一套可配置的布局框架——它是所有后台页面的容器，支持多种布局/导航模式、主题色、暗黑模式等。先搭好这个地基，后续用户/角色/资源等页面才有地方挂。

What Changes

• 集成 Element Plus：走 on-demand（unplugin-vue-components 的 ElementPlusResolver + 组件样式按需），配置中文 locale。
• 布局壳：替换 src/layouts/default.vue；布局/全局组件统一放 src/components/（自动注册目录），命名 ty- 前缀 + 中划线（ty-header.vue → <ty-header>），充分复用 auto-import。
• 组件库友好：组件 props/emits 显式类型化、props 驱动、与 Pinia store 解耦，为将来抽取独立组件库打基础。
• 布局与导航模式：支持 3 种布局（上下/纯上下/左右）× MixBar 开关，共 5 种呈现；MixBar 固定最左；所有布局均有顶栏（左右顶栏仅工具、不含菜单）；左侧菜单支持 collapse/expand。
• 主题色：颜色选择器自定义，默认 #2E7FA3，运行时覆盖 Element Plus 主色 CSS 变量。
• 暗黑模式：明亮/暗黑切换。
• 顶栏固定：可固定/不固定；纯左右布局（无顶栏）时该选项禁用。
• 侧边菜单宽度：200–340 可调。
• 底部版权：显示「云南投云科技有限公司」，可固定。
• 补充设置：面包屑、多页签（tabs）、顶栏全屏、菜单手风琴。
• 持久化与默认值：布局/主题偏好存 localStorage（Pinia persistedstate）；默认值集中在代码配置模块（src/config/layout.ts），改一处统一生效。
• 导航菜单数据：本任务用占位菜单，但字段结构严格对齐后端 resource 实体（id/code/name/parentCode/type/path/component/icon/sort），下个任务直接换接口数据。

Capabilities

New Capabilities

• frontend/AD/layout: 管理后台布局壳与主题系统（布局/导航模式、主题色、暗黑、折叠、宽度、固定顶栏/底栏、面包屑/多页签/全屏/手风琴、持久化）

Modified Capabilities

（无）

Impact

• 前端 sources/sysmgr-admin：
  • 新增依赖 element-plus（+ @element-plus/icons-vue 如需）
  • vite.config.ts：Components/AutoImport 加 ElementPlusResolver
  • 新增 src/components/ty-*.vue 组件（ty-header/ty-sidebar/ty-mixbar/ty-tabs/ty-breadcrumb/ty-footer/ty-setting/ty-setting-panel）
  • 新增 src/stores/modules/app.ts（布局/主题偏好，persist）+ src/config/layout.ts（默认值）+ src/types/resource.ts（菜单类型）
  • 替换 src/layouts/default.vue 为布局壳
  • 主题色/暗黑与现有 --wm-color-* 令牌对齐
• 后端无变更；本任务菜单为占位数据（字段对齐后端 resource）。