资产管理系统前端

基于 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: 项目基础搭建 ✅

• Vite + Vue 3项目初始化
• TypeScript配置
• ESLint + Prettier配置
• 路由配置（Vue Router 4）
• 状态管理（Pinia）
• Axios请求封装
• UI主题配置（青灰配色 #475569）

Phase 2: 认证与布局 ✅

• 登录页面（Login.vue）
• 主应用布局（MainLayout.vue）
• 侧边菜单组件
• 顶部导航栏
• 认证状态管理
• 路由守卫

Phase 3: 后台管理模块（开发中）

• 用户管理页面
• 角色权限页面
• 设备类型管理页面
• 动态表单设计器
• 机构网点管理页面

Phase 4: 资产管理模块（部分完成）

• 资产列表页面
• 资产详情对话框
• 资产入库页面
• 资产编辑对话框
• 批量导入组件
• 批量导出组件
• 扫码查询页面
• 二维码对话框
• 资产状态追踪组件

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                 # 应用入口

开发指南

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:3000

构建生产版本

npm run build

代码检查

npm run lint

代码格式化

npm run format

运行测试

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