5e002cac74
- 归档 fe-admin-layout（管理后台布局壳 + 主题系统） - 新增主 spec：frontend/AD/layout Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
38 lines
2.9 KiB
Markdown
38 lines
2.9 KiB
Markdown
## 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（仅左右布局可用），共 4 种呈现；MixBar 固定最左；所有布局均有顶栏（左右顶栏仅工具、不含菜单）；左侧菜单支持 collapse/expand；顶栏 Logo 区与侧栏同宽、折叠仅显 Logo。
|
||
- **主题色**：颜色选择器自定义，默认 `#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）。
|