✅已完成、⚠️部分完成、❌未完成这样显示
-----------------------------------------------------------------------------------------------需要解决
统计现在的项目结构，接口，页面，css，全局主题

## 一、项目结构 ✅

```
src/
├── api/                    # API接口层
│   ├── admin/              # 管理后台API (12个文件)
│   │   ├── activity.js     ├── cdn.js        ├── discount.js
│   │   ├── file.js         ├── group.js      ├── order.js
│   │   ├── Permission.js   ├── product.js    ├── product-test.js
│   │   ├── router.js       ├── setting.js    └── user.js
│   ├── domain.js           ├── groupBuy.js
│   ├── login.js            └── ticket.js
├── components/             # 公共组件 (14个)
│   ├── admin/
│   │   ├── AvatarSelector.vue   # 头像选择组件
│   │   └── FileSelector.vue     # 文件/封面选择组件 ✅新增
│   ├── Charts/             # 图表组件 (4个)
│   ├── layout/             # 布局组件 (4个)
│   ├── marketing/DiscountDetailDialog.vue
│   ├── UserSelector/index.vue   # 用户选择组件(推荐人选择)
│   ├── Container.vue       ├── MonacoEditor.vue
│   ├── Qrcode.vue          └── TextTruncate.vue
├── views/                  # 页面视图 (67个)
├── store/                  # 状态管理 (2个)
├── router/index.js         # 路由配置
├── utils/                  # 工具函数
│   └── acs/                # ACS云服务工具 (12个)
├── config/menus.js         # 菜单配置
├── assets/                 # 静态资源
├── App.vue                 # 应用入口
├── main.js                 # 主入口
└── style.css               # 全局样式
```

## 二、API接口统计 ✅ (约240+个)

| 模块 | 文件 | 接口数 |
|------|------|--------|
| 登录认证 | login.js | 2 |
| 工单管理 | ticket.js | 12 |
| 域名白名单 | domain.js | 3 |
| 拼团管理 | groupBuy.js | 18 |
| 用户管理 | admin/user.js | 28 |
| 商品管理 | admin/product.js | 19 |
| 订单管理 | admin/order.js | 5 |
| 优惠码/代金券 | admin/discount.js | 21 |
| 权限管理 | admin/Permission.js | 8 |
| 管理员组 | admin/group.js | 6 |
| 配置管理 | admin/setting.js | 11 |
| 文件管理 | admin/file.js | 7 |
| 活动管理 | admin/activity.js | 8 |
| 路由管理 | admin/router.js | 2 |
| CDN管理 | admin/cdn.js | 1 |
| ACS服务器 | utils/acs/server.js | 60+ |
| ACS镜像 | utils/acs/mirror.js | 11 |
| ACS消息 | utils/acs/message.js | 8 |
| ACS审计 | utils/acs/audit.js | 4 |
| ACS远程桌面 | utils/acs/guacamole.js | 5 |

## 三、页面视图统计 ✅ (67个)

| 分类 | 页面 | 数量 |
|------|------|------|
| 基础页面 | Login, Dashboard, NotFound, Redirect, About, Home | 6 |
| 用户管理 | UserList, UserDetail, UserBalance, UserGroup, AdminGroup | 5 |
| 商品管理 | ProductList, ProductGroup | 2 |
| 订单管理 | OrderList | 1 |
| 优惠营销 | DiscountCode, Voucher, VoucherManagement + 6个子页面 | 9 |
| 活动管理 | SigninActivity, GroupBuyActivity, GroupBuyType | 3 |
| 工单管理 | TicketList, TicketDetail, TicketChat | 3 |
| 系统管理 | PermissionRoute/Admin, SystemFile, DomainWhitelist, SettingGroup, Setting, OperationLog, Users | 8 |
| 站点审计 | AllSites, ViolationSites | 2 |
| 全局设置 | GlobalSetting | 1 |
| 个人中心 | UserInfo, ChangePassword | 2 |
| ACS消息 | Announcements, Policies, News | 3 |
| ACS镜像 | VmImages, ContainerImages, ImageCategories, ImageForm, ImageRequests | 5 |
| ACS节点 | Nodes, server, ServerForm, VmDetail, containDetail, containerConsole, containFile + 2组件 | 9 |
| ACS远程桌面 | Guacamole | 1 |

## 四、CSS样式统计 ✅

### style.css 全局样式
| 类型 | 内容 |
|------|------|
| 重置样式 | `* { margin:0; padding:0; box-sizing:border-box; }` |
| 文字颜色 | `.text-primary` `.text-success` `.text-warning` `.text-danger` `.text-info` |
| 文字对齐 | `.text-center` `.text-left` `.text-right` |
| Flex布局 | `.flex` `.flex-column` `.justify-center` `.justify-between` `.items-center` |
| 尺寸 | `.w-full` `.h-full` |
| 间距 | `.mb-10` `.mt-10` `.mr-10` `.ml-10` `.p-10` `.py-10` `.px-10` |
| 响应式 | `.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` |

### App.vue 全局样式
| 类型 | 内容 |
|------|------|
| 过渡动画 | `.fade-enter-active` `.fade-leave-active` |
| 滚动条 | `::-webkit-scrollbar` 自定义滚动条 |
| 按钮扁平化 | `.el-button--primary/success/danger/default` 无圆角深蓝灰主题 |
| 输入框扁平化 | `.el-input__wrapper` 无圆角边框 |
| 标签扁平化 | `.el-tag--success/danger/info` 无圆角彩色背景 |
| 卡片扁平化 | `.el-card` 无圆角1px边框 |
| 表格扁平化 | `.el-table` 深蓝灰表头 |
| 分页扁平化 | `.el-pagination` 无圆角深蓝灰选中 |
| 下拉菜单 | `.el-dropdown-menu` 无圆角阴影边框 |
| 对话框 | `.el-dialog` 无圆角扁平化头部尾部 |

## 五、全局主题配置 ✅

### 主色调
| 颜色 | 值 | 用途 |
|------|------|------|
| 主色 | `#1890ff` | Element Plus主题色 |
| 深蓝灰 | `#2c3e50` | 按钮主色、表头、激活状态 |
| 次深蓝灰 | `#34495e` | 悬浮状态、文字 |
| 绿色 | `#27ae60` / `#52c41a` | 成功状态 |
| 红色 | `#e74c3c` / `#f5222d` | 危险/错误状态 |
| 橙色 | `#faad14` | 警告状态 |
| 蓝色 | `#3498db` | 链接、信息 |
| 紫色 | `#722ed1` | 转化率图表 |
| 背景灰 | `#f5f7fa` / `#f0f2f5` | 页面背景 |
| 边框灰 | `#e1e8ed` / `#d5d9e0` | 边框分割线 |

### 设计风格
| 特性 | 说明 |
|------|------|
| 圆角 | 全局0圆角扁平化设计 |
| 阴影 | 轻阴影 `0 2px 8px rgba(44,62,80,0.1)` |
| 字体 | Helvetica Neue, PingFang SC, Microsoft YaHei |
| 字号 | 基础14px |

## 六、Store状态管理 ✅

| Store | 功能 |
|-------|------|
| userStore.js | 用户信息存储 `userInfo` `setUserInfo()` |
| tagsViewStore.js | 多标签页管理 `visitedViews` `addVisitedView()` `delVisitedView()` `delOthersViews()` `delAllViews()` `delLeftViews()` `delRightViews()` |

## 七、技术栈 ✅

| 技术 | 版本 |
|------|------|
| Vue | ^3.5.13 |
| Vite | ^6.0.3 |
| Element Plus | ^2.9.1 |
| Vue Router | ^4.5.0 |
| Pinia | ^3.0.2 |
| Axios | ^1.7.9 |
| ECharts | ^5.6.0 |
| VueUse | ^13.1.0 |
| Monaco Editor | ^0.52.2 |
| Xterm.js | ^5.3.0 |
| qrcode | ^1.5.4 |
| dayjs | ^1.11.13 |

-----------------------------------------------------------------------------------------------需要解决

## 表单组件优化 ✅已完成

### 1. FileSelector 文件选择组件 ✅
位置: `src/components/admin/FileSelector.vue`
功能:
- 通用文件/封面选择器
- 支持文件列表分页、搜索
- 支持文件上传
- 支持图片预览
- 支持按文件类型筛选(image/document/video/audio)
- 已选文件信息显示

### 2. UserSelector 用户选择组件 ✅
位置: `src/components/UserSelector/index.vue`
功能:
- 用户列表搜索选择
- 用于推荐人ID等需要选择用户的场景
- 显示用户ID、用户名、邮箱

### 3. UserDetail 编辑表单优化 ✅
- 推荐人ID: 改为使用UserSelector组件，显示用户头像、用户名、ID
- 用户封面: 新增FileSelector组件，支持预览和选择图片

-----------------------------------------------------------------------------------------------需要解决
每次解决后的内容写在-需要解决之间，不要写在外面
我不要你解释，不是我主动告诉你解释需求，那么你就根据问题开始直接编写代码解决问题或者完善功能，问题都是用-需要解决隔开的
对应完成的部分在当前文档记录并且进行标记✅已完成、⚠️部分完成、❌未完成这样显示