签入版本
This commit is contained in:
@@ -33,18 +33,19 @@
|
||||
```text
|
||||
ui/src/layout/
|
||||
├── index.vue # 布局入口
|
||||
├── components/
|
||||
│ ├── header/ # 顶部导航(Logo、面包屑、搜索、通知、用户头像)
|
||||
│ ├── sider/ # 侧边栏菜单(动态菜单、折叠、主题)
|
||||
│ ├── content/ # 内容区域(keep-alive 缓存)
|
||||
│ ├── tabs/ # 标签页导航(多标签切换、关闭)
|
||||
│ └── footer/ # 页脚
|
||||
└── hooks/ # 布局相关 hooks
|
||||
├── parentLayout.vue # 父级布局(路由嵌套用)
|
||||
└── components/
|
||||
├── Header/ # 顶部导航(AmendPwd 修改密码、Notifier 通知、ProjectSetting 项目设置)
|
||||
├── Sider/ # 侧边栏菜单(动态菜单、折叠、主题)
|
||||
├── Main/ # 内容区域(keep-alive 缓存)
|
||||
├── TagsView/ # 标签页导航(多标签切换、关闭)
|
||||
├── Logo/ # 品牌标识
|
||||
└── Footer/ # 页脚
|
||||
```
|
||||
|
||||
## 侧边栏菜单
|
||||
|
||||
菜单数据从后端 `/index/getMenus` 接口获取,由 `asyncRouteStore` 管理:
|
||||
菜单数据从后端 `GET /api/index/getMenus` 接口获取,由 `asyncRouteStore` 管理:
|
||||
|
||||
```typescript
|
||||
// 菜单渲染逻辑
|
||||
@@ -64,9 +65,14 @@ interface MenuItem {
|
||||
}
|
||||
```
|
||||
|
||||
:::tip 菜单数据即路由
|
||||
侧边栏与动态路由消费**同一份** `getMenus` 数据(仅 `type=0` 可导航节点、`status=0`、`hide=0`、`is_delete=0`)——菜单管理里改 `hide` 即可隐藏入口而不删除路由。见 [9.5 路由与动态菜单](/zh/frontend/router.html)。
|
||||
:::
|
||||
|
||||
## 标签页导航
|
||||
|
||||
标签页自动记录访问过的页面,支持:
|
||||
|
||||
- 点击切换
|
||||
- 关闭当前/其他/全部
|
||||
- 右键菜单操作
|
||||
@@ -83,9 +89,12 @@ tabsViewStore.addTab(route);
|
||||
tabsViewStore.removeTab(route);
|
||||
```
|
||||
|
||||
(keep-alive 组件列表由路由守卫 `afterEach` 统一维护,见 [9.5 路由与动态菜单](/zh/frontend/router.html)。)
|
||||
|
||||
## 响应式布局
|
||||
|
||||
布局支持桌面端和平板端:
|
||||
|
||||
- 桌面端:侧边栏默认展开
|
||||
- 平板端:侧边栏默认折叠
|
||||
- 侧边栏支持手动折叠/展开
|
||||
@@ -99,4 +108,4 @@ const { width } = useWindowSize();
|
||||
watchEffect(() => {
|
||||
collapsed.value = width.value < 1024;
|
||||
});
|
||||
```
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user