dashboard/frontend/README.md

# 耳机管理平台 - 前端项目

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vue Router 4** - Vue.js 官方路由
- **Element Plus** - 基于 Vue 3 的组件库
- **Axios** - HTTP 客户端
- **Vite** - 下一代前端构建工具

## 项目结构

```
frontend/
├── src/
│   ├── api/              # API 接口
│   │   └── brand.js     # 品牌管理接口
│   ├── layout/          # 布局组件
│   │   └── index.vue   # 主布局
│   ├── router/          # 路由配置
│   │   └── index.js    # 路由定义
│   ├── utils/           # 工具函数
│   │   └── request.js  # Axios 封装
│   ├── views/           # 页面组件
│   │   └── brand/      # 品牌管理页面
│   │       └── index.vue
│   ├── App.vue         # 根组件
│   └── main.js         # 入口文件
├── index.html          # HTML 模板
├── package.json        # 依赖配置
├── vite.config.js     # Vite 配置
├── install.bat        # 安装依赖脚本
└── start.bat          # 启动脚本
```

## 快速开始

### 1. 安装依赖

**方式一：使用脚本（推荐）**
```bash
双击 install.bat
```

**方式二：手动安装**
```bash
cd frontend
pnpm install
```

### 2. 启动开发服务器

**方式一：使用脚本（推荐）**
```bash
双击 start.bat
```

**方式二：手动启动**
```bash
cd frontend
pnpm dev
```

启动后访问：http://localhost:3000

### 3. 构建生产版本

```bash
pnpm build
```

## 功能特性

### 品牌管理

- ✅ 品牌列表展示
- ✅ 品牌名称模糊搜索
- ✅ 新增品牌
- ✅ 编辑品牌
- ✅ 删除品牌
- ✅ 分页功能

### 菜单结构

```
耳机管理（一级菜单）
  └── 品牌管理（二级菜单）
```

## API 配置

开发服务器已配置代理，将 `/api` 请求转发到后端服务：

- 前端请求：`/api/brands/`
- 后端地址：`http://localhost:8083/api/brands/`

配置位于 `vite.config.js`

## 注意事项

1. **确保后端服务已启动**
   - 后端运行在 http://localhost:8083
   - 使用 `backend/restart.bat` 重启后端服务

2. **端口占用**
   - 前端使用 3000 端口
   - 后端使用 8083 端口
   - 如果端口被占用，请修改相应配置文件

3. **跨域问题**
   - 开发环境使用 Vite 代理解决跨域
   - 生产环境需要配置 CORS 或使用 Nginx 反向代理

## 常见问题

### Q: 依赖安装失败
A: 检查网络连接，或使用淘宝镜像：
```bash
pnpm config set registry https://registry.npmmirror.com
pnpm install
```

如果还没有安装 pnpm，请先安装：
```bash
npm install -g pnpm
```

### Q: 页面空白
A: 打开浏览器控制台查看错误信息，确保后端服务正常运行

### Q: API 请求失败
A: 检查后端服务是否启动，端口是否正确

## 开发规范

- 使用 Vue 3 Composition API (script setup)
- 使用 Element Plus 组件库
- 统一使用中文注释和提示
- API 响应格式：`{ code: 1, msg: "success", data: {...} }`

## 后续扩展

可以添加的功能：
- [ ] 型号管理页面
- [ ] 用户登录/权限管理
- [ ] 数据导出功能
- [ ] 批量操作
- [ ] 操作日志