## 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 用 `` 包裹,配中文 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 切换 5 种模式即时生效;「左右」无顶栏且「固定顶栏」禁用 - [x] 7.3 主题色、暗黑、侧边宽度、折叠、手风琴、多页签、全屏、面包屑、底部版权均生效 - [x] 7.4 刷新后设置保留(localStorage);改 `defaultLayout` 后未改过的用户按新默认值渲染 - [x] 7.5 `pnpm type-check` 与 `pnpm build:prod` 通过