diff --git a/openspec/changes/fe-admin-layout/.openspec.yaml b/openspec/changes/archive/2026-10-11-fe-admin-layout/.openspec.yaml similarity index 100% rename from openspec/changes/fe-admin-layout/.openspec.yaml rename to openspec/changes/archive/2026-10-11-fe-admin-layout/.openspec.yaml diff --git a/openspec/changes/fe-admin-layout/design.md b/openspec/changes/archive/2026-10-11-fe-admin-layout/design.md similarity index 100% rename from openspec/changes/fe-admin-layout/design.md rename to openspec/changes/archive/2026-10-11-fe-admin-layout/design.md diff --git a/openspec/changes/fe-admin-layout/proposal.md b/openspec/changes/archive/2026-10-11-fe-admin-layout/proposal.md similarity index 100% rename from openspec/changes/fe-admin-layout/proposal.md rename to openspec/changes/archive/2026-10-11-fe-admin-layout/proposal.md diff --git a/openspec/changes/fe-admin-layout/specs/frontend/AD/layout/spec.md b/openspec/changes/archive/2026-10-11-fe-admin-layout/specs/frontend/AD/layout/spec.md similarity index 100% rename from openspec/changes/fe-admin-layout/specs/frontend/AD/layout/spec.md rename to openspec/changes/archive/2026-10-11-fe-admin-layout/specs/frontend/AD/layout/spec.md diff --git a/openspec/changes/fe-admin-layout/tasks.md b/openspec/changes/archive/2026-10-11-fe-admin-layout/tasks.md similarity index 100% rename from openspec/changes/fe-admin-layout/tasks.md rename to openspec/changes/archive/2026-10-11-fe-admin-layout/tasks.md diff --git a/openspec/specs/frontend/AD/layout/spec.md b/openspec/specs/frontend/AD/layout/spec.md new file mode 100644 index 0000000..50b459c --- /dev/null +++ b/openspec/specs/frontend/AD/layout/spec.md @@ -0,0 +1,124 @@ +# Layout Specification + +## Purpose + +定义管理后台布局壳与主题系统的行为:可配置的布局/导航模式、主题色、暗黑模式、侧边栏折叠与宽度、固定顶栏/底栏,以及面包屑/多页签/全屏/手风琴等配套能力。 + +## Requirements + +### Requirement: 布局与导航模式 +系统 SHALL 支持 3 种布局(上下 / 纯上下 / 左右)与 MixBar 开关的组合,共 4 种呈现(MixBar 仅左右布局可用);MixBar 始终固定在布局最左侧;所有布局均渲染顶栏,仅导航菜单位置不同。 + +#### Scenario: 切换布局即时生效 +- **WHEN** 用户在布局设置中切换布局或开启/关闭 MixBar +- **THEN** 主框架立即按新布局重新排布顶栏、侧边栏与内容区 + +#### Scenario: 左右顶栏不含菜单 +- **WHEN** 布局为「左右」 +- **THEN** 顶栏仍显示折叠/面包屑/全屏/暗黑/设置/用户等工具,但不渲染导航菜单,菜单全部在左侧侧边栏 + +#### Scenario: 上下/纯上下顶栏含导航 +- **WHEN** 布局为「上下」或「纯上下」 +- **THEN** 顶栏含导航:「上下」顶部放一级导航、左侧放子菜单;「纯上下」仅顶部放全量导航 + +### Requirement: 侧边菜单折叠 +左侧导航菜单 SHALL 支持 collapse(折叠为图标)与 expand(展开显示文字+图标)。 + +#### Scenario: 折叠与展开 +- **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 主色及其派生色阶。 + +#### Scenario: 选择主题色 +- **WHEN** 用户在设置面板用颜色选择器选取新主题色 +- **THEN** 全站 Element Plus 主色(按钮/链接/高亮等)即时变为所选颜色,刷新后仍保留 + +### Requirement: 暗黑模式 +系统 SHALL 支持明亮/暗黑模式切换;暗黑模式下切换 Element Plus 深色主题与全局深色令牌。 + +#### Scenario: 切换暗黑模式 +- **WHEN** 用户切换暗黑模式开关 +- **THEN** 全站即时切换为深色配色,刷新后仍保留 + +### Requirement: 顶栏固定 +顶栏 SHALL 支持固定(内容滚动时顶栏常驻顶部)与不固定,所有布局均适用。 + +#### Scenario: 顶栏固定开关 +- **WHEN** 用户切换「固定顶栏」 +- **THEN** 顶栏在固定/随内容滚动之间切换 + +### Requirement: 侧边菜单宽度 +左侧菜单宽度 SHALL 可调,范围 200–340(单位 px)。 + +#### Scenario: 调整宽度 +- **WHEN** 用户拖动或输入侧边栏宽度 +- **THEN** 宽度在 200–340 之间变化并即时生效,超界被限制在边界值 + +### Requirement: 底部版权固定 +系统 SHALL 在底部显示版权信息「云南投云科技有限公司」,并支持固定/不固定。 + +#### Scenario: 底部版权 +- **WHEN** 用户开启「固定底部」 +- **THEN** 版权条常驻视口底部;关闭时随内容滚动 + +### Requirement: 布局设置持久化 +所有布局与主题设置 SHALL 持久化到 localStorage,刷新页面后保持。 + +#### Scenario: 刷新保留 +- **WHEN** 用户调整布局/主题/宽度等后刷新页面 +- **THEN** 所有设置恢复为用户上次的配置 + +### Requirement: 面包屑 +系统 SHALL 在内容区顶部显示面包屑,随当前路由与菜单层级展示当前位置。 + +#### Scenario: 面包屑导航 +- **WHEN** 用户进入某个菜单页面 +- **THEN** 面包屑显示当前菜单的层级路径 + +### Requirement: 多页签 +系统 SHALL 支持多页签(tabs)视图:打开的页面保留为页签,可切换与关闭。 + +#### Scenario: 页签切换与关闭 +- **WHEN** 用户打开多个菜单页面 +- **THEN** 各页面以页签形式保留,可切换、可关闭 + +### Requirement: 顶栏全屏 +系统 SHALL 在顶栏提供全屏切换按钮,进入/退出浏览器全屏。 + +#### Scenario: 全屏切换 +- **WHEN** 用户点击全屏按钮 +- **THEN** 页面进入浏览器全屏,再次点击退出 + +### Requirement: 菜单手风琴 +侧边菜单 SHALL 支持手风琴模式:同一级只展开一个子菜单。 + +#### Scenario: 手风琴展开 +- **WHEN** 开启手风琴且用户展开某个子菜单 +- **THEN** 同级的其他已展开子菜单自动收起 + +### Requirement: 默认值集中配置 +布局与主题的默认值 SHALL 在代码中集中配置(单一配置模块),开发者改一处即可统一调整;用户在页面上的修改覆盖默认值并持久化。 + +#### Scenario: 改默认值生效 +- **WHEN** 开发者修改配置模块中的默认主题色或默认布局 +- **THEN** 未手动改过的用户首次进入时按新默认值渲染;已手动改过的用户仍按自己的持久化设置 + +### Requirement: 菜单数据结构对齐后端 +占位菜单数据 SHALL 采用后端资源实体(`resource`)的字段结构(`id/code/name/parentCode/type/path/component/icon/sort`),不自造字段名。 + +#### Scenario: 字段对齐 +- **WHEN** 占位菜单被替换为后端「当前用户菜单树」接口数据 +- **THEN** 前端无需改动数据结构即可直接渲染