# WBRYLPrototype

**Repository Path**: work_project_item/WBRYLPrototype

## Basic Information

- **Project Name**: WBRYLPrototype
- **Description**: 未必然设备管理平台WEB浏览器原型设计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-21
- **Last Updated**: 2025-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 设备管理平台

企业级客户和设备管理系统

## 项目介绍

设备管理平台 是一个基于 Vue 3 + TypeScript + Vite + Pinia + Element Plus 构建的企业级客户和设备管理系统。该系统提供了完整的客户管理、设备管理、授权管理等功能。

## 技术栈

- 前端框架：Vue 3
- 开发语言：TypeScript
- 构建工具：Vite
- 状态管理：Pinia
- 路由管理：Vue Router
- UI 组件库：Element Plus
- HTTP 客户端：Axios
- 日期处理：Day.js

## 功能特性

- 客户管理
  - 客户信息维护
  - 客户列表展示（支持分页、排序、搜索）
  - 客户详情查看
- 设备管理
  - 设备绑定与解绑
  - 设备列表展示（支持分页、排序、搜索）
  - 设备授权管理
- 授权管理
  - 授权码生成
  - 授权码更新
  - 授权详情查看
- 系统特性
  - 响应式设计
  - 表单验证（使用 Element Plus 表单验证）
  - 错误处理（统一使用 Element Plus Message 组件）
  - 国际化支持

## 开发环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0
- TypeScript >= 4.5.0

## 安装和运行

1. 克隆项目
```bash
git clone [项目地址]
```

2. 安装依赖
```bash
npm install
```

3. 启动开发服务器
```bash
npm run dev
```

4. 构建生产版本
```bash
npm run build
```

## 项目结构

```
src/
├── api/            # API 接口定义
├── assets/         # 静态资源
├── components/     # 公共组件
│   ├── common/     # 通用组件
│   ├── license/    # 授权相关组件
│   └── ...
├── composables/    # 组合式函数
├── layouts/        # 布局组件
├── router/         # 路由配置
├── stores/         # Pinia 状态管理
├── styles/         # 全局样式
├── types/          # TypeScript 类型定义
└── views/          # 页面组件
    ├── home/       # 主页面
    │   ├── customer/  # 客户管理
    │   └── ...
    └── ...
```

## 开发规范

### 命名规范

- 变量：驼峰命名（camelCase），禁止使用数字后缀
- 函数：驼峰命名（camelCase），禁止使用数字后缀
- 组件：驼峰命名（PascalCase），禁止使用数字后缀
- 文件：短横线命名（kebab-case）
- 类型：驼峰命名（PascalCase）

### 代码规范

- 使用 TypeScript 进行开发，所有组件必须按照 TypeScript 类型使用
- 遵循 ESLint 和 Prettier 配置
- 组件必须定义 Props 类型
- 复杂函数必须编写单元测试
- 单个文件不超过 200 行，超过需拆分为多个组件
- 函数不超过 20 行，超过需拆分
- 表单组件必须包含验证和错误提示
- 列表组件必须包含分页和排序
- 列表组件必须处理加载中、空、错误和加载状态
- 错误处理统一使用 Element Plus 的 Message 组件
- 页面风格保持简洁，统一使用 Element Plus 组件

### 组件开发规范

- 按功能分组，每个功能一个文件夹
- 每个文件夹一个组件，每个组件一个文件
- 组件必须定义 Props 类型
- 复杂逻辑必须添加注释，注释写在函数上方
- 组件样式使用 scoped
- 重复的代码逻辑必须抽取为公共工具函数

### 状态管理规范

- 使用 Pinia 进行状态管理
- Store 按功能模块划分
- 状态变更必须通过 Action
- 复杂状态必须定义类型

## 环境变量

```env
# 应用配置
VITE_APP_TITLE= 设备管理平台
VITE_APP_API_BASE_URL=http://api.example.com
VITE_APP_UPLOAD_URL=http://upload.example.com
```

## 错误处理

- 使用 Element Plus 的 Message 组件统一处理错误提示
- 网络请求错误统一在 axios 拦截器中处理
- 表单验证错误使用 Element Plus 的表单验证
- 业务逻辑错误在组件中处理

## 文档要求

- 所有功能必须有详细的使用说明
- 所有函数必须有参数说明和返回值说明
- 复杂逻辑必须有清晰的注释
- 公共工具函数必须有详细的使用文档

## 贡献指南

1. Fork 项目
2. 创建特性分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

## 许可证

MIT