# 资产管理系统前端

> 基于 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