5e002cac74
- 归档 fe-admin-layout（管理后台布局壳 + 主题系统） - 新增主 spec：frontend/AD/layout Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
46 lines
3.0 KiB
Markdown
46 lines
3.0 KiB
Markdown
## 1. Element Plus 集成
|
||
|
||
- [x] 1.1 安装 element-plus（及 @element-plus/icons-vue）
|
||
- [x] 1.2 vite.config.ts：`Components`/`AutoImport` 增加 `ElementPlusResolver`（on-demand + sass 样式）
|
||
- [x] 1.3 App.vue 用 `<el-config-provider :locale="zhCn">` 包裹，配中文 locale
|
||
- [x] 1.4 冒烟：页面上 el-button 能渲染、ElMessage 可调用
|
||
|
||
## 2. 类型与默认值配置
|
||
|
||
- [x] 2.1 `src/types/resource.ts`：`ResourceType` 与 `ResourceNode` 类型，字段严格对齐后端 resource（id/code/name/parentCode/type/path/component/icon/sort + children）
|
||
- [x] 2.2 `src/config/layout.ts`：`defaultLayout` 集中配置默认值（themeColor `#2E7FA3`、sidebarWidth 210 等）
|
||
- [x] 2.3 `src/config/menu.ts`：占位菜单树（字段对齐后端，已组装 children）
|
||
|
||
## 3. 布局/主题状态（app store）
|
||
|
||
- [x] 3.1 `src/stores/modules/app.ts`：以 `defaultLayout` 作初始值，开启 persist；含 layout/mixbar/themeColor/isDark/headerFixed/sidebarWidth/footerFixed/sidebarCollapsed/showBreadcrumb/showTabs/showFullscreen/menuAccordion
|
||
|
||
## 4. 主题系统
|
||
|
||
- [x] 4.1 主题色工具：由主色计算 light-3/5/7/8/9、dark-2，写入 `:root` 的 `--el-color-primary*`
|
||
- [x] 4.2 `applyTheme()`：统一切换 `html.dark` class 与 `data-theme`（对齐现有 `--wm-color-*` 深色令牌）
|
||
- [x] 4.3 监听 store 的 themeColor/isDark 变化自动应用
|
||
|
||
## 5. 布局壳组件（src/components/ty-*.vue，kebab 命名 + 自动导入，props/emits 显式类型化）
|
||
|
||
- [x] 5.1 `ty-header`：顶栏（一级导航或工具栏 + 折叠 + 全屏 + 设置入口 + 用户下拉），响应 headerFixed；props 接收菜单/模式/折叠等，emits 折叠/打开设置
|
||
- [x] 5.2 `ty-mixbar`：固定最左一级图标栏
|
||
- [x] 5.3 `ty-sidebar`：左侧菜单（el-menu），支持 collapse/expand、width、accordion
|
||
- [x] 5.4 `ty-tabs`：多页签（展示/切换/关闭）
|
||
- [x] 5.5 `ty-breadcrumb`：面包屑
|
||
- [x] 5.6 `ty-footer`：底部版权「云南投云科技有限公司」，响应 footerFixed
|
||
- [x] 5.7 替换 `layouts/default.vue` 为布局壳：读 store，按 layout/mixbar 条件渲染并 props/emits 接线（组件不直接依赖 store）
|
||
|
||
## 6. 设置组件与面板
|
||
|
||
- [x] 6.1 `ty-setting`：设置组件（齿轮触发 + el-drawer 外壳）
|
||
- [x] 6.2 `ty-setting-panel`：设置面板——布局模式、MixBar、主题色选择器（默认 #2E7FA3）、暗黑、顶栏固定（纯左右禁用）、侧边宽度 slider(200–340)、底部固定、面包屑/多页签/全屏/手风琴开关
|
||
|
||
## 7. 验证
|
||
|
||
- [x] 7.1 `pnpm dev` 启动，登录后进入布局壳
|
||
- [x] 7.2 切换 4 种模式即时生效；「左右」顶栏不含菜单、导航全在左侧；MixBar 仅左右可用
|
||
- [x] 7.3 主题色、暗黑、侧边宽度、折叠、手风琴、多页签、全屏、面包屑、底部版权均生效
|
||
- [x] 7.4 刷新后设置保留（localStorage）；改 `defaultLayout` 后未改过的用户按新默认值渲染
|
||
- [x] 7.5 `pnpm type-check` 与 `pnpm build:prod` 通过
|