ApiServer-Web-admin_dashboard_pc/问题.MD

✅已完成、⚠️部分完成、❌未完成这样显示 -----------------------------------------------------------------------------------------------需要解决

1.http://localhost:5173/user/group将当前页面弹窗的高度进行限制为屏幕大小的80%并且进行分页数为很大的时候进行内部的滚动条进行查看

TODO List

• ✅ 用户组页面弹窗高度限制
  • 弹窗最大高度限制为屏幕的80%
  • 内容区域使用 el-scrollbar 实现内部滚动
  • 用户组表单弹窗、成员列表弹窗均已添加滚动支持

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

规则限制： 1.在-------需要解决的中间进行写是否解决问题的判断也可以列todolist便于查看是否完成 2.不要将我原本的问题进行删除了，只需要在范围的最后面添加todolist判断对应问题是否完成就可以了 3.在以后只要有添加时间选择器就要遵循以下规则
时间选择器接受的是毫秒级时间戳，获取时的时间转换，将ISO格式转换为毫秒级时间戳

• 列表展示使用formatDate函数
• 时间选择器正确显示毫秒级时间戳
• 提交时转换为秒级时间戳

一、项目结构 ✅

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组件，支持预览和选择图片

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