Initial commit: Audio Dashboard Management System

Made-with: Cursor
2026-03-04 18:17:34 +08:00
commit 75b1d16453
39 changed files with 3771 additions and 0 deletions
@@ -0,0 +1,148 @@
+# 耳机管理平台 - 前端项目
+
+## 技术栈
+
+- **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:8002/api/brands/`
+
+配置位于 `vite.config.js`
+
+## 注意事项
+
+1. **确保后端服务已启动**
+   - 后端运行在 http://localhost:8002
+   - 使用 `backend/restart.bat` 重启后端服务
+
+2. **端口占用**
+   - 前端使用 3000 端口
+   - 后端使用 8002 端口
+   - 如果端口被占用，请修改相应配置文件
+
+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: {...} }`
+
+## 后续扩展
+
+可以添加的功能：
+- [ ] 型号管理页面
+- [ ] 用户登录/权限管理
+- [ ] 数据导出功能
+- [ ] 批量操作
+- [ ] 操作日志