fix: 修复前端登录体验和API调用问题
- 修复路由守卫：未登录时直接跳转，不显示提示信息 - 修复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>
This commit is contained in:
Claude
217
README.md
Normal file
217
README.md
Normal file
@@ -0,0 +1,217 @@
|
||||
# 资产管理系统前端
|
||||
|
||||
> 基于 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
|
||||
Reference in New Issue
Block a user