签入版本

2026-10-25 17:24:27 +08:00
parent 48911cc08f
commit fdbeae092a
1010 changed files with 30682 additions and 95274 deletions
@@ -1,102 +1,45 @@
-# 9.15 布局系统
+# 9.16 布局系统

 :::tip 概述
-前端布局采用经典的企业后台布局：左侧菜单 + 顶部导航 + 内容区域，支持多标签页导航。
+布局在 `ui/src/layout/`：主框架 index.vue + parentLayout.vue（多级嵌套），components/ 内含侧边栏、顶栏、标签页、面包屑等区域组件。菜单驱动侧边栏渲染。
 :::

 ## 布局结构

 ```text
-┌─────────────────────────────────────────────────────────────┐
-│                        顶部导航栏                            │
-│  [Logo]  [面包屑]                    [搜索] [通知] [头像]    │
-├──────────┬──────────────────────────────────────────────────┤
-│          │                                                  │
-│  侧边栏   │              内容区域                            │
-│  菜单     │                                                  │
-│          │  ┌──────────────────────────────────────────┐   │
-│ ──────── │  │ 标签页导航                                │   │
-│ 系统管理  │  ├──────────────────────────────────────────┤   │
-│  ├ 用户   │  │                                          │   │
-│  ├ 角色   │  │          页面内容                         │   │
-│  └ 菜单   │  │                                          │   │
-│          │  │                                          │   │
-│ 内容管理  │  │                                          │   │
-│  ├ 文章   │  │                                          │   │
-│  └ 分类   │  │                                          │   │
-│          │  └──────────────────────────────────────────┘   │
-└──────────┴──────────────────────────────────────────────────┘
+┌──────────────────────────────────────┐
+│ 顶栏：面包屑 + 标签页 + 用户头像 + 锁屏 │
+├────────────┬─────────────────────────┤
+│ 侧边栏      │  内容区（router-view）    │
+│ （菜单树）  │                          │
+└────────────┴─────────────────────────┘
 ```

-## 布局组件
+## 组件划分

-```text
-ui/src/layout/
-├── index.vue              # 布局入口
-├── components/
-│   ├── header/            # 顶部导航（Logo、面包屑、搜索、通知、用户头像）
-│   ├── sider/             # 侧边栏菜单（动态菜单、折叠、主题）
-│   ├── content/           # 内容区域（keep-alive 缓存）
-│   ├── tabs/              # 标签页导航（多标签切换、关闭）
-│   └── footer/            # 页脚
-└── hooks/                 # 布局相关 hooks
-```
+| 区域 | 内容 |
+|---|---|
+| index.vue | 主布局（区域编排） |
+| parentLayout.vue | 动态路由的父级壳（嵌套路由承接） |
+| 侧边栏 | 按 asyncRoute 菜单树渲染，图标经 router-icons 映射 |
+| 顶栏 | 折叠开关、面包屑、标签页、用户下拉 |
+| 标签页 | tabsView store 驱动的多页签 |

-## 侧边栏菜单
+## 菜单渲染

-菜单数据从后端 `/index/getMenus` 接口获取，由 `asyncRouteStore` 管理：
+侧边栏数据来自动态路由表（GetMenus 生成）：隐藏菜单（hide=1）、停用菜单（status=1）在生成阶段已过滤——**菜单表即侧边栏**，前端不维护第二份菜单配置。

-```typescript
-// 菜单渲染逻辑
-const menuList = asyncRouteStore.getMenus;
+## 响应式

-// 菜单数据结构
-interface MenuItem {
-  id: number;
-  parentId: number;
-  name: string;
-  path: string;
-  component: string;
-  icon: string;
-  sort: number;
-  hide: boolean;
-  children?: MenuItem[];
-}
-```
+布局断点经 breakpointEnum 与 element-resize-detector 处理：窄屏自动折叠侧边栏，移动端适配基础布局。

-## 标签页导航
+## 定制入口

-标签页自动记录访问过的页面，支持：
- 点击切换
- 关闭当前/其他/全部
- 右键菜单操作
- keep-alive 缓存
+- 区域增减改 index.vue 布局编排
+- 各区域内部样式在对应组件 scoped 内
+- 全局尺寸（侧边栏宽度、顶栏高度）在 designSetting store

-```typescript
-// 标签页 Store
-const tabsViewStore = useTabsViewStore();
+## 相关

-// 添加标签
-tabsViewStore.addTab(route);
-
-// 关闭标签
-tabsViewStore.removeTab(route);
-```
-
-## 响应式布局
-
-布局支持桌面端和平板端：
- 桌面端：侧边栏默认展开
- 平板端：侧边栏默认折叠
- 侧边栏支持手动折叠/展开
-
-```typescript
-// 侧边栏折叠状态
-const collapsed = ref(false);
-
-// 响应式检测
-const { width } = useWindowSize();
-watchEffect(() => {
-  collapsed.value = width.value < 1024;
-});
-```
+- [9.5 路由与动态菜单](/zh/frontend/router.html)
+- [6.3 菜单管理](/zh/modules/menu.html)