chore(openspec): refine fe-admin-layout (mixbar scope, logo area, footer)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
liuyun 2026-10-11 00:35:56 +08:00
parent d9178624b1
commit b8fdb6cf36
5 changed files with 16 additions and 5 deletions

View File

@ -52,7 +52,7 @@ sysmgr-admin 基于 agarwood 模板,已具备:Vue 3 + Vite 8 + TypeScript、
} }
``` ```
5 种呈现由 `layout × mixbar` 派生:`top`、`horizontal`(±mixbar)、`sidebar`(±mixbar);`top` 布局忽略 mixbar。**所有布局均有顶栏**(含折叠/面包屑/全屏/暗黑/设置/用户等工具),区别只在导航菜单位置:`top` 顶栏放全量导航、`horizontal` 顶栏放一级导航 + 侧栏放子菜单、`sidebar` 顶栏不放菜单(菜单全在侧栏)。 4 种呈现:`top`、`horizontal`、`sidebar`、`sidebar`+MixBar。MixBar 仅 `sidebar`(左右)布局可用,`horizontal`(上下)无 MixBar。**所有布局均有顶栏**(含折叠/面包屑/全屏/暗黑/设置/用户等工具),区别只在导航菜单位置:`top` 顶栏放全量导航、`horizontal` 顶栏放一级导航 + 侧栏放子菜单、`sidebar` 顶栏不放菜单(菜单全在侧栏)。顶栏 Logo 区与左侧菜单(或 MixBar+菜单)同宽,侧栏折叠时仅显 Logo。
### D5. 主题色运行时覆盖 ### D5. 主题色运行时覆盖
由所选主色用 JS 计算派生色阶(light-3/5/7/8/9、dark-2),写入 `:root` 的 `--el-color-primary` 及派生变量;默认 `#2E7FA3` 预置。色值计算用 `colord` 或自写 mix(混白/黑)。 由所选主色用 JS 计算派生色阶(light-3/5/7/8/9、dark-2),写入 `:root` 的 `--el-color-primary` 及派生变量;默认 `#2E7FA3` 预置。色值计算用 `colord` 或自写 mix(混白/黑)。

View File

@ -7,7 +7,7 @@ Phase 0 前端只有登录页与路由守卫,登录后没有真正的后台布
- **集成 Element Plus**:走 on-demand(`unplugin-vue-components` 的 `ElementPlusResolver` + 组件样式按需),配置中文 locale。 - **集成 Element Plus**:走 on-demand(`unplugin-vue-components` 的 `ElementPlusResolver` + 组件样式按需),配置中文 locale。
- **布局壳**:替换 `src/layouts/default.vue`;布局/全局组件统一放 `src/components/`(自动注册目录),命名 `ty-` 前缀 + 中划线(`ty-header.vue` → `<ty-header>`),充分复用 auto-import。 - **布局壳**:替换 `src/layouts/default.vue`;布局/全局组件统一放 `src/components/`(自动注册目录),命名 `ty-` 前缀 + 中划线(`ty-header.vue` → `<ty-header>`),充分复用 auto-import。
- **组件库友好**:组件 props/emits 显式类型化、props 驱动、与 Pinia store 解耦,为将来抽取独立组件库打基础。 - **组件库友好**:组件 props/emits 显式类型化、props 驱动、与 Pinia store 解耦,为将来抽取独立组件库打基础。
- **布局与导航模式**:支持 3 种布局(上下/纯上下/左右)× MixBar 开关,共 5 种呈现;MixBar 固定最左;所有布局均有顶栏(左右顶栏仅工具、不含菜单);左侧菜单支持 collapse/expand。 - **布局与导航模式**:支持 3 种布局(上下/纯上下/左右)与 MixBar(仅左右布局可用),共 4 种呈现;MixBar 固定最左;所有布局均有顶栏(左右顶栏仅工具、不含菜单);左侧菜单支持 collapse/expand;顶栏 Logo 区与侧栏同宽、折叠仅显 Logo。
- **主题色**:颜色选择器自定义,默认 `#2E7FA3`,运行时覆盖 Element Plus 主色 CSS 变量。 - **主题色**:颜色选择器自定义,默认 `#2E7FA3`,运行时覆盖 Element Plus 主色 CSS 变量。
- **暗黑模式**:明亮/暗黑切换。 - **暗黑模式**:明亮/暗黑切换。
- **顶栏固定**:可固定/不固定;纯左右布局(无顶栏)时该选项禁用。 - **顶栏固定**:可固定/不固定;纯左右布局(无顶栏)时该选项禁用。

View File

@ -5,7 +5,7 @@
## ADDED Requirements ## ADDED Requirements
### Requirement: 布局与导航模式 ### Requirement: 布局与导航模式
系统 SHALL 支持 3 种布局(上下 / 纯上下 / 左右)与 MixBar 开关的组合,共 5 种呈现;MixBar 始终固定在布局最左侧;所有布局均渲染顶栏,仅导航菜单位置不同。 系统 SHALL 支持 3 种布局(上下 / 纯上下 / 左右)与 MixBar 开关的组合,共 4 种呈现(MixBar 仅左右布局可用);MixBar 始终固定在布局最左侧;所有布局均渲染顶栏,仅导航菜单位置不同。
#### Scenario: 切换布局即时生效 #### Scenario: 切换布局即时生效
- **WHEN** 用户在布局设置中切换布局或开启/关闭 MixBar - **WHEN** 用户在布局设置中切换布局或开启/关闭 MixBar
@ -26,6 +26,17 @@
- **WHEN** 用户点击折叠按钮 - **WHEN** 用户点击折叠按钮
- **THEN** 侧边栏在折叠(仅图标)与展开(文字+图标)之间切换 - **THEN** 侧边栏在折叠(仅图标)与展开(文字+图标)之间切换
### Requirement: 顶栏 Logo 区
顶栏左上角 Logo 区 SHALL 与左侧菜单(或 MixBar+菜单)同宽;侧栏折叠时仅显示 Logo,展开时显示 Logo 与标题。
#### Scenario: Logo 区对齐
- **WHEN** 布局含左侧菜单
- **THEN** 顶栏 Logo 区宽度与左侧菜单(含 MixBar 时与 MixBar+菜单)一致
#### Scenario: 折叠仅显 Logo
- **WHEN** 侧栏折叠
- **THEN** 顶栏 Logo 区仅显示 Logo;展开时显示 Logo 与标题
### Requirement: 主题色 ### Requirement: 主题色
系统 SHALL 支持通过颜色选择器自定义主题色,默认 `#2E7FA3`;选择后运行时更新 Element Plus 主色及其派生色阶。 系统 SHALL 支持通过颜色选择器自定义主题色,默认 `#2E7FA3`;选择后运行时更新 Element Plus 主色及其派生色阶。

View File

@ -39,7 +39,7 @@
## 7. 验证 ## 7. 验证
- [x] 7.1 `pnpm dev` 启动,登录后进入布局壳 - [x] 7.1 `pnpm dev` 启动,登录后进入布局壳
- [x] 7.2 切换 5 种模式即时生效;「左右」顶栏不含菜单、导航全在左侧 - [x] 7.2 切换 4 种模式即时生效;「左右」顶栏不含菜单、导航全在左侧;MixBar 仅左右可用
- [x] 7.3 主题色、暗黑、侧边宽度、折叠、手风琴、多页签、全屏、面包屑、底部版权均生效 - [x] 7.3 主题色、暗黑、侧边宽度、折叠、手风琴、多页签、全屏、面包屑、底部版权均生效
- [x] 7.4 刷新后设置保留(localStorage);改 `defaultLayout` 后未改过的用户按新默认值渲染 - [x] 7.4 刷新后设置保留(localStorage);改 `defaultLayout` 后未改过的用户按新默认值渲染
- [x] 7.5 `pnpm type-check` 与 `pnpm build:prod` 通过 - [x] 7.5 `pnpm type-check` 与 `pnpm build:prod` 通过

@ -1 +1 @@
Subproject commit 8a0f510e3ad6d751bc7ab9a3b36c25d40d152948 Subproject commit 66f4a38c98f86e02638fcb1e009417c280aa2f17