e48975f9d5
- 修复路由守卫：未登录时直接跳转，不显示提示信息 - 修复API拦截器：401错误直接跳转，无需确认 - 移除不必要的ElMessageBox确认框 - 优化Token过期处理逻辑 - 修复文件管理API引入路径和URL前缀 - 修复调拨/回收管理API端点不匹配问题 - 修复通知管理API方法不匹配问题 - 统一系统配置API路径为单数形式 影响文件： - src/router/index.ts - src/api/request.ts - src/api/file.ts - src/api/index.ts 测试状态： - 前端构建通过 - 所有API路径已验证 - 登录流程测试通过 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
218 lines
5.3 KiB
Markdown
218 lines
5.3 KiB
Markdown
# 资产管理系统前端
|
||
|
||
> 基于 Vue 3 + TypeScript + Element Plus 构建的现代化资产管理系统前端应用
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: Vue 3.4+ (Composition API + `<script setup>`)
|
||
- **语言**: TypeScript 5.0+
|
||
- **构建工具**: Vite 5
|
||
- **UI组件库**: Element Plus
|
||
- **状态管理**: Pinia
|
||
- **路由**: Vue Router 4
|
||
- **HTTP客户端**: Axios
|
||
- **表单验证**: VeeValidate + Yup
|
||
- **图表**: ECharts
|
||
- **工具库**: dayjs, lodash-es, qrcode
|
||
- **组合式函数**: @vueuse/core
|
||
- **代码规范**: ESLint + Prettier
|
||
- **测试**: Vitest
|
||
|
||
## 功能特性
|
||
|
||
### Phase 1: 项目基础搭建 ✅
|
||
- [x] Vite + Vue 3项目初始化
|
||
- [x] TypeScript配置
|
||
- [x] ESLint + Prettier配置
|
||
- [x] 路由配置（Vue Router 4）
|
||
- [x] 状态管理（Pinia）
|
||
- [x] Axios请求封装
|
||
- [x] UI主题配置（青灰配色 #475569）
|
||
|
||
### Phase 2: 认证与布局 ✅
|
||
- [x] 登录页面（Login.vue）
|
||
- [x] 主应用布局（MainLayout.vue）
|
||
- [x] 侧边菜单组件
|
||
- [x] 顶部导航栏
|
||
- [x] 认证状态管理
|
||
- [x] 路由守卫
|
||
|
||
### Phase 3: 后台管理模块（开发中）
|
||
- [ ] 用户管理页面
|
||
- [ ] 角色权限页面
|
||
- [ ] 设备类型管理页面
|
||
- [ ] 动态表单设计器
|
||
- [ ] 机构网点管理页面
|
||
|
||
### Phase 4: 资产管理模块（部分完成）
|
||
- [x] 资产列表页面
|
||
- [x] 资产详情对话框
|
||
- [x] 资产入库页面
|
||
- [x] 资产编辑对话框
|
||
- [ ] 批量导入组件
|
||
- [ ] 批量导出组件
|
||
- [ ] 扫码查询页面
|
||
- [ ] 二维码对话框
|
||
- [ ] 资产状态追踪组件
|
||
|
||
### Phase 5: 资产分配模块（待开发）
|
||
- [ ] 分配单列表页面
|
||
- [ ] 创建分配单对话框
|
||
- [ ] 审批对话框
|
||
- [ ] 资产选择器
|
||
|
||
### Phase 6: 维修与统计（待开发）
|
||
- [ ] 维修管理页面
|
||
- [ ] 统计报表页面
|
||
- [ ] ECharts图表集成
|
||
|
||
### Phase 7: 系统管理（待开发）
|
||
- [ ] 系统配置页面
|
||
- [ ] 操作日志页面
|
||
- [ ] 消息通知组件
|
||
- [ ] 个人中心页面
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
src/
|
||
├── api/ # API接口
|
||
│ ├── request.ts # Axios封装
|
||
│ ├── auth.ts # 认证接口
|
||
│ ├── assets.ts # 资产接口
|
||
│ ├── users.ts # 用户接口
|
||
│ └── index.ts # 统一导出
|
||
├── assets/ # 静态资源
|
||
│ └── styles/ # 全局样式
|
||
│ ├── variables.scss # 主题变量
|
||
│ └── index.scss # 全局样式
|
||
├── components/ # 通用组件
|
||
├── composables/ # 组合式函数
|
||
│ ├── usePagination.ts # 分页
|
||
│ └── useTable.ts # 表格
|
||
├── layouts/ # 布局组件
|
||
│ └── MainLayout.vue # 主布局
|
||
├── router/ # 路由配置
|
||
│ └── index.ts
|
||
├── stores/ # Pinia状态管理
|
||
│ ├── modules/
|
||
│ │ ├── user.ts # 用户状态
|
||
│ │ └── app.ts # 应用状态
|
||
│ └── index.ts
|
||
├── types/ # TypeScript类型定义
|
||
│ └── index.ts
|
||
├── utils/ # 工具函数
|
||
│ ├── auth.ts # 认证工具
|
||
│ ├── format.ts # 格式化工具
|
||
│ ├── validate.ts # 验证工具
|
||
│ └── constants.ts # 常量定义
|
||
├── views/ # 页面组件
|
||
│ ├── auth/ # 认证相关
|
||
│ │ └── Login.vue
|
||
│ ├── admin/ # 后台管理
|
||
│ │ ├── UserManagement.vue
|
||
│ │ ├── RoleManagement.vue
|
||
│ │ ├── DeviceTypeManagement.vue
|
||
│ │ └── OrganizationManagement.vue
|
||
│ ├── assets/ # 资产管理
|
||
│ │ ├── AssetList.vue
|
||
│ │ ├── AssetCreate.vue
|
||
│ │ ├── AssetAllocation.vue
|
||
│ │ ├── AssetScan.vue
|
||
│ │ ├── MaintenanceManagement.vue
|
||
│ │ ├── StatisticsDashboard.vue
|
||
│ │ └── components/ # 资产相关组件
|
||
│ │ ├── AssetDetailDialog.vue
|
||
│ │ ├── AssetEditDialog.vue
|
||
│ │ └── QrcodeDialog.vue
|
||
│ └── error/ # 错误页面
|
||
│ └── 404.vue
|
||
├── App.vue # 根组件
|
||
└── main.ts # 应用入口
|
||
```
|
||
|
||
## 开发指南
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
访问 `http://localhost:3000`
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 代码检查
|
||
|
||
```bash
|
||
npm run lint
|
||
```
|
||
|
||
### 代码格式化
|
||
|
||
```bash
|
||
npm run format
|
||
```
|
||
|
||
### 运行测试
|
||
|
||
```bash
|
||
npm run test
|
||
```
|
||
|
||
## 环境配置
|
||
|
||
### 开发环境 (.env.development)
|
||
```
|
||
VITE_API_BASE_URL=http://localhost:8000/api/v1
|
||
VITE_APP_TITLE=资产管理系统
|
||
```
|
||
|
||
### 生产环境 (.env.production)
|
||
```
|
||
VITE_API_BASE_URL=https://api.yourcompany.com/api/v1
|
||
VITE_APP_TITLE=资产管理系统
|
||
```
|
||
|
||
## 主题定制
|
||
|
||
主题色采用青灰配色方案 (#475569)，在 `src/assets/styles/variables.scss` 中可以自定义主题变量。
|
||
|
||
## API接口规范
|
||
|
||
详见 `complete_api_reference.md` 文档。
|
||
|
||
## 开发规范
|
||
|
||
详见 `development_standards_guide.md` 文档。
|
||
|
||
## 页面原型
|
||
|
||
详见 `frontend_page_prototypes.md` 文档。
|
||
|
||
## 浏览器支持
|
||
|
||
- Chrome >= 90
|
||
- Firefox >= 88
|
||
- Safari >= 14
|
||
- Edge >= 90
|
||
|
||
## 作者
|
||
|
||
老王
|
||
|
||
## 许可证
|
||
|
||
MIT
|