diff --git a/openspec/changes/fe-admin-layout/design.md b/openspec/changes/fe-admin-layout/design.md index 339ac20..d38d987 100644 --- a/openspec/changes/fe-admin-layout/design.md +++ b/openspec/changes/fe-admin-layout/design.md @@ -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. 主题色运行时覆盖 由所选主色用 JS 计算派生色阶(light-3/5/7/8/9、dark-2),写入 `:root` 的 `--el-color-primary` 及派生变量;默认 `#2E7FA3` 预置。色值计算用 `colord` 或自写 mix(混白/黑)。 diff --git a/openspec/changes/fe-admin-layout/proposal.md b/openspec/changes/fe-admin-layout/proposal.md index 9c8d663..0d63d9c 100644 --- a/openspec/changes/fe-admin-layout/proposal.md +++ b/openspec/changes/fe-admin-layout/proposal.md @@ -7,7 +7,7 @@ Phase 0 前端只有登录页与路由守卫,登录后没有真正的后台布 - **集成 Element Plus**:走 on-demand(`unplugin-vue-components` 的 `ElementPlusResolver` + 组件样式按需),配置中文 locale。 - **布局壳**:替换 `src/layouts/default.vue`;布局/全局组件统一放 `src/components/`(自动注册目录),命名 `ty-` 前缀 + 中划线(`ty-header.vue` → ``),充分复用 auto-import。 - **组件库友好**:组件 props/emits 显式类型化、props 驱动、与 Pinia store 解耦,为将来抽取独立组件库打基础。 -- **布局与导航模式**:支持 3 种布局(上下/纯上下/左右)× MixBar 开关,共 5 种呈现;MixBar 固定最左;所有布局均有顶栏(左右顶栏仅工具、不含菜单);左侧菜单支持 collapse/expand。 +- **布局与导航模式**:支持 3 种布局(上下/纯上下/左右)与 MixBar(仅左右布局可用),共 4 种呈现;MixBar 固定最左;所有布局均有顶栏(左右顶栏仅工具、不含菜单);左侧菜单支持 collapse/expand;顶栏 Logo 区与侧栏同宽、折叠仅显 Logo。 - **主题色**:颜色选择器自定义,默认 `#2E7FA3`,运行时覆盖 Element Plus 主色 CSS 变量。 - **暗黑模式**:明亮/暗黑切换。 - **顶栏固定**:可固定/不固定;纯左右布局(无顶栏)时该选项禁用。 diff --git a/openspec/changes/fe-admin-layout/specs/frontend/AD/layout/spec.md b/openspec/changes/fe-admin-layout/specs/frontend/AD/layout/spec.md index 830f98e..2b95c4a 100644 --- a/openspec/changes/fe-admin-layout/specs/frontend/AD/layout/spec.md +++ b/openspec/changes/fe-admin-layout/specs/frontend/AD/layout/spec.md @@ -5,7 +5,7 @@ ## ADDED Requirements ### Requirement: 布局与导航模式 -系统 SHALL 支持 3 种布局(上下 / 纯上下 / 左右)与 MixBar 开关的组合,共 5 种呈现;MixBar 始终固定在布局最左侧;所有布局均渲染顶栏,仅导航菜单位置不同。 +系统 SHALL 支持 3 种布局(上下 / 纯上下 / 左右)与 MixBar 开关的组合,共 4 种呈现(MixBar 仅左右布局可用);MixBar 始终固定在布局最左侧;所有布局均渲染顶栏,仅导航菜单位置不同。 #### Scenario: 切换布局即时生效 - **WHEN** 用户在布局设置中切换布局或开启/关闭 MixBar @@ -26,6 +26,17 @@ - **WHEN** 用户点击折叠按钮 - **THEN** 侧边栏在折叠(仅图标)与展开(文字+图标)之间切换 +### Requirement: 顶栏 Logo 区 +顶栏左上角 Logo 区 SHALL 与左侧菜单(或 MixBar+菜单)同宽;侧栏折叠时仅显示 Logo,展开时显示 Logo 与标题。 + +#### Scenario: Logo 区对齐 +- **WHEN** 布局含左侧菜单 +- **THEN** 顶栏 Logo 区宽度与左侧菜单(含 MixBar 时与 MixBar+菜单)一致 + +#### Scenario: 折叠仅显 Logo +- **WHEN** 侧栏折叠 +- **THEN** 顶栏 Logo 区仅显示 Logo;展开时显示 Logo 与标题 + ### Requirement: 主题色 系统 SHALL 支持通过颜色选择器自定义主题色,默认 `#2E7FA3`;选择后运行时更新 Element Plus 主色及其派生色阶。 diff --git a/openspec/changes/fe-admin-layout/tasks.md b/openspec/changes/fe-admin-layout/tasks.md index d855b47..3c87971 100644 --- a/openspec/changes/fe-admin-layout/tasks.md +++ b/openspec/changes/fe-admin-layout/tasks.md @@ -39,7 +39,7 @@ ## 7. 验证 - [x] 7.1 `pnpm dev` 启动,登录后进入布局壳 -- [x] 7.2 切换 5 种模式即时生效;「左右」顶栏不含菜单、导航全在左侧 +- [x] 7.2 切换 4 种模式即时生效;「左右」顶栏不含菜单、导航全在左侧;MixBar 仅左右可用 - [x] 7.3 主题色、暗黑、侧边宽度、折叠、手风琴、多页签、全屏、面包屑、底部版权均生效 - [x] 7.4 刷新后设置保留(localStorage);改 `defaultLayout` 后未改过的用户按新默认值渲染 - [x] 7.5 `pnpm type-check` 与 `pnpm build:prod` 通过 diff --git a/sources/sysmgr-admin b/sources/sysmgr-admin index 8a0f510..66f4a38 160000 --- a/sources/sysmgr-admin +++ b/sources/sysmgr-admin @@ -1 +1 @@ -Subproject commit 8a0f510e3ad6d751bc7ab9a3b36c25d40d152948 +Subproject commit 66f4a38c98f86e02638fcb1e009417c280aa2f17