管理后台概览

管理后台使用 Vue 3、TypeScript、Vite、Element Plus、Pinia、Vue Router 和 Axios。

技术版本

依赖	当前范围
Vue	~3.4.0
Pinia	2.2.4
Vue Router	~4.4.0
Element Plus	^2.13.1
Vite	^7.3.0
TypeScript	~5.9.3

项目优先保持依赖兼容，不盲目升级到最新大版本。修改版本后应重新执行类型检查、Lint 和生产构建。

已实现页面

• 登录、首页、个人中心。
• 用户、角色、资源管理。
• 组织、岗位、字典管理。
• 地区、文件、存储管理。
• 系统日志、系统参数。
• 404、500 错误页面。

页面结构

列表页一般包含：

搜索区
  ↓
页面操作区
  ↓
表格 / 树表
  ↓
分页或详情区域

交互约定：

• 搜索输入框按 Enter 执行查询。
• 下拉选择后按 Enter 执行查询，不重新弹出下拉框。
• 操作按钮在同一水平线并保持统一间距。
• 详情和编辑使用明确标题，内部方法名不直接展示给用户。
• 新增弹窗打开前恢复默认值，关闭动画结束后再清理表单。
• 批量删除优先提交选中记录 ID。
• 写操作完成后只刷新真正受影响的数据。

开发命令

npm install
npm run dev
npm run type-check
npm run lint
npm run build

生产结果位于 dist/。

API 地址

开发模式固定使用 /api，由 Vite 代理到本机后端并去掉前缀。生产模式读取 VITE_API_BASE_URL；未配置时会使用代码默认地址。

推荐生产环境仍使用同源 /api，减少跨域、Cookie 和证书配置复杂度。

组件开发原则

• 业务请求集中在 src/api。
• 请求与响应类型集中在 src/types。
• 资源类型、状态值等集中在 src/constants。
• 通用下载、会话和权限逻辑放在 src/utils 或 composable。
• 页面只实现业务交互，不重复实现全局 401 和 Token 注入。