签入版本

2026-10-25 17:24:27 +08:00
parent 48911cc08f
commit fdbeae092a
1010 changed files with 30682 additions and 95274 deletions
@@ -1,131 +1,36 @@
-# H. 前端 Store 速查
+# I. 前端 Store 速查

-:::tip 概述
-前端使用 Pinia 进行全局状态管理，核心 Store 定义在 `ui/src/store/modules/` 目录下。
+:::tip 说明
+Pinia 7 个 store 模块速查。storage 键统一在 `store/mutation-types.ts` 定义常量。
 :::

-## userStore
+## 模块清单

-**文件**：`store/modules/user.ts`
+| Store | 主要 state | 主要 getter/action |
+|---|---|---|
+| user | token、用户信息、权限集合 | getPermissions、setToken、GetInfo |
+| asyncRoute | 菜单树、动态路由表、注入标记 | generateRoutes、setDynamicAddedRoute、getIsDynamicAddedRoute |
+| tabsView | 标签页列表、当前页签 | 多页签增删切换（经 storage 持久化） |
+| designSetting | 主题配色、布局尺寸、组件大小 | 主题切换即时生效（持久化） |
+| projectSetting | 项目开关（水印/锁屏/面包屑等） | 设置项读写 |
+| lockscreen | 锁屏状态 | 锁定/解锁 |
+| ossConfig | 对象存储配置 | 直传场景配置读取 |

-### 状态
+## mutation-types（storage 键）

-| 字段 | 类型 | 说明 |
-|------|------|------|
-| `token` | string | JWT Token |
-| `username` | string | 用户名 |
-| `avatar` | string | 头像 URL |
-| `permissions` | string[] | 权限列表 |
-| `info` | object | 用户信息 |
+| 常量 | 用途 |
+|---|---|
+| ACCESS_TOKEN | 登录令牌 |
+| FIRST_ROUTE | 首个落地路由 |
+| （其他） | 主题、标签页、锁屏等持久化键 |

-### Actions
+## 使用规约速记

-| Action | 说明 | 返回 |
-|--------|------|------|
-| `login(userInfo)` | 登录 | Promise |
-| `GetInfo()` | 获取用户信息 | Promise |
-| `logout()` | 登出 | Promise |
+- `useXxxStore()` 组件内获取；`useXxxStoreWidthOut()` 守卫等组件外场景
+- 权限集合只读（登录后装配）
+- 页面局部状态不进 store
+- 新增持久化键先在 mutation-types 登记

-### 使用示例
+## 相关

-```typescript
-import { useUserStore } from '@/store/modules/user';
-
-const userStore = useUserStore();
-
-// 登录
-await userStore.login({ username: 'admin', password: '123456' });
-
-// 获取用户信息
-const info = userStore.getUserInfo;
-const permissions = userStore.getPermissions;
-
-// 登出
-await userStore.logout();
-```
-
---
-
-## asyncRouteStore
-
-**文件**：`store/modules/asyncRoute.ts`
-
-### 状态
-
-| 字段 | 类型 | 说明 |
-|------|------|------|
-| `menus` | array | 菜单列表 |
-| `keepAliveComponents` | string[] | 缓存的组件名 |
-| `isDynamicAddedRoute` | boolean | 是否已添加动态路由 |
-
-### Actions
-
-| Action | 说明 |
-|--------|------|
-| `generateRoutes(userInfo)` | 从后端获取菜单并生成路由 |
-| `setDynamicAddedRoute(flag)` | 设置动态路由添加状态 |
-| `setKeepAliveComponents(components)` | 设置 keep-alive 组件列表 |
-
---
-
-## projectSettingStore
-
-**文件**：`store/modules/projectSetting.ts`
-
-| 字段 | 说明 |
-|------|------|
-| `navMode` | 导航模式（侧边/顶部） |
-| `navTheme` | 导航主题（暗色/亮色） |
-| `isShowMenuBar` | 是否显示菜单栏 |
-| `isCollapse` | 菜单是否折叠 |
-
---
-
-## ossConfigStore
-
-**文件**：`store/modules/ossConfig.ts`
-
-| 字段 | 说明 |
-|------|------|
-| `ossConfig` | 云存储配置 |
-
-路由守卫中初始化，用于文件上传。
-
---
-
-## designSettingStore
-
-**文件**：`store/modules/designSetting.ts`
-
-| 字段 | 说明 |
-|------|------|
-| `appTheme` | 主题色 |
-| `darkMode` | 是否暗色模式 |
-
---
-
-## tabsViewStore
-
-**文件**：`store/modules/tabsView.ts`
-
-| 字段 | 说明 |
-|------|------|
-| `tabsList` | 标签页列表 |
-
-| Action | 说明 |
-|--------|------|
-| `addTab(route)` | 添加标签 |
-| `removeTab(route)` | 关闭标签 |
-| `closeOtherTabs(route)` | 关闭其他标签 |
-| `closeAllTabs()` | 关闭所有标签 |
-
---
-
-## 在组件外使用
-
-```typescript
-// 在 setup 外使用 Store
-import { useUserStoreWidthOut } from '@/store/modules/user';
-
-const userStore = useUserStoreWidthOut();
-```
+- [9.6 状态管理（Pinia）](/zh/frontend/store.html)