场景 说明
多门店运营 顶栏 TenantSwitcher 切换门店/租户,数据按当前租户隔离(对接后端后生效)
权限与菜单 后端下发菜单树,前端 permission Store 动态注册路由与侧栏
运营看板 首页统计卡片、ECharts 趋势图、Gitee 提交动态(Git Graph)
系统配置 布局模式、暗色主题、标签栏/面包屑、侧栏菜单风格等可视化配置
1.三种后台布局:经典侧栏、顶栏通栏、顶部横向菜单;LayoutSwitcher / 系统设置面板切换并持久化。
2.响应式布局:useLayoutResponsive 在 <768px 抽屉侧栏、<992px 自动折叠。
3.动态路由与 RBAC:permission Store 拉取菜单 → router.addRoute;开发阶段使用 public/mock/routes.json。
4.多标签 / 面包屑:TagsView 六种视觉风格;可切换面包屑导航。
5.多租户切换:TenantSwitcher + tenant Store(当前为演示数据,预留 fetchTenants / switchTenant)。
6.主题系统:亮/暗色、多套主题色、语义色、页脚高度、侧栏菜单风格。
7.国际化: 语言懒加载;LocaleSwitcher + useLocale。
8.HTTP 封装:开发环境 /api 代理;生产使用 VITE_API_BASE_URL。
9.首页看板:用户统计、ECharts、Gitee 仓库提交时间线(GitGraph)。
10.组件文档站:http://localhost:3000/docs 可交互演示。