# AI客服-标注工具-前端

**Repository Path**: clementdik/ai_customer_service_annotation_frontend

## Basic Information

- **Project Name**: AI客服-标注工具-前端
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-21
- **Last Updated**: 2025-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 服装数据标注平台

一个基于 Vue 3 的服装数据标注平台，为运营部门提供数据标注工具，方便初始化投喂给 AI 的数据。

## 功能特性

### 1. 批次中心

- 批次管理：查看所有导入的批次数据
- 进度跟踪：实时显示匹配和向量标注进度
- 异常统计：显示命名异常、空号等统计信息
- 卡片/表格视图切换

### 2. 匹配工作台

- 款式树导航：左侧树形结构展示款式层级
- 颜色卡片：瀑布流展示颜色卡片，包含角度缩略图
- 状态筛选：按匹配状态、角度完整度等筛选
- 详情抽屉：右侧显示详细信息，支持信息/图片切换

### 3. 向量标注台

- 图片浏览：支持多角度图片预览
- 特征矩阵：自动值 vs 人工值对比
- 标签管理：支持添加/删除标签
- 批量操作：接受全部自动值、保存模板等

### 4. 字典维护

- 多维度管理：服装类型、颜色、图案、材质等
- 标签操作：重命名、合并、停用、删除
- 搜索功能：支持标签名称和系统名搜索

### 5. 全局搜索

- 多条件筛选：品牌、季次、状态、ID 等
- 结果导出：支持数据导出功能
- 批量操作：批量降级、套用模板等

## 技术栈

- **前端框架**: Vue 3
- **路由管理**: Vue Router 4
- **状态管理**: Pinia
- **构建工具**: Vite
- **样式**: CSS3 + CSS 变量

## 项目结构

```
src/
├── data/
│   └── mockData.js          # 拟真数据集中管理
├── router/
│   └── index.js             # 路由配置
├── styles/
│   └── main.css             # 全局样式
├── views/
│   ├── BatchCenter.vue      # 批次中心
│   ├── MatchingWorkbench.vue # 匹配工作台
│   ├── VectorAnnotation.vue # 向量标注台
│   ├── DictionaryMaintenance.vue # 字典维护
│   └── GlobalSearch.vue     # 全局搜索
├── App.vue                  # 主应用组件
└── main.js                  # 应用入口
```

## 开发指南

### 安装依赖

```bash
npm install
```

### 环境配置

在项目根目录创建 `.env` 文件，配置环境变量：

```bash
# 应用配置
VITE_APP_TITLE=AI客服标注系统
VITE_APP_VERSION=1.0.0

# API配置
VITE_API_BASE_URL=/data-annotation/api

# 图片配置
VITE_IMAGE_BASE_URL=http://localhost:5005
VITE_IMAGE_PLACEHOLDER=https://via.placeholder.com/300x300?text=图片加载失败

# 开发环境配置
VITE_DEV_MODE=true
VITE_MOCK_ENABLED=false
```

详细配置说明请参考 [图片配置说明文档](docs/图片配置说明.md)。

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 数据管理

所有拟真数据集中在 `src/data/mockData.js` 文件中，包括：

- 品牌和季次数据
- 批次和款式信息
- 颜色和角度数据
- 向量标注数据
- 字典数据

后期替换为真实后端接口时，只需要修改这个文件中的数据获取方式即可。

## 设计原则

1. **文件大小控制**: 每个文件不超过 500 行，便于维护
2. **样式独立**: CSS 样式独立管理，使用 CSS 变量统一主题
3. **数据集中**: 所有拟真数据集中管理，便于后期替换
4. **简洁交互**: 界面美观大方，交互简洁直观
5. **功能精简**: 只包含必需功能，避免冗余

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 开发注意事项

1. 所有组件使用 Vue 3 Composition API
2. 样式使用 CSS 变量，便于主题定制
3. 响应式设计，支持移动端访问
4. 拟真数据便于演示，实际使用时需要替换为真实接口

## 后续开发计划

1. 集成真实后端 API
2. 添加用户认证和权限管理
3. 实现图片上传和预览功能
4. 添加数据导出功能
5. 优化性能和用户体验