8705b9846a
Some checks failed
CI Check / check (push) Has been cancelled
- 创建统一的Modal组件，采用Apple风格设计 - 实现毛玻璃效果、圆角、动画和细边框描边 - 修复弹窗打开时背景滚动问题 - 修复分类管理中重复卡片和数组字符串显示问题 - 优化选项解析逻辑，添加去重和过滤机制
163 lines
8.9 KiB
Plaintext
163 lines
8.9 KiB
Plaintext
📋 待办清单 - 功能优化与改进
|
||
|
||
以下是一些需要做的改进，按优先级和依赖关系规划一下先后顺序～
|
||
|
||
═══════════════════════════════════════════════════════════════
|
||
🎯 核心功能优化
|
||
═══════════════════════════════════════════════════════════════
|
||
|
||
1. 用户信息同步 📝
|
||
管理员修改用户信息后，这个用户上传的所有素材信息也要跟着更新
|
||
比如改了用户名，素材里的作者名也要变
|
||
|
||
2. 上传进度优化 ⚡ ✅
|
||
现在上传素材进度条到100%后，还要等一会儿才关闭弹窗
|
||
希望能更流畅，进度到100%就立马关闭
|
||
✅ 已完成：进度100%后立即显示完成状态（绿色进度条+完成提示）
|
||
✅ 已完成：添加300ms延迟确保数据保存完成后再关闭
|
||
✅ 已完成：优化用户体验，显示"上传成功，正在关闭..."提示
|
||
|
||
3. 多预览图功能 🖼️
|
||
一个素材可以上传多张预览图
|
||
自动把第一张设为封面预览图
|
||
|
||
4. 性能监控导出 📊
|
||
性能监控页面增加导出CSV表格功能
|
||
方便数据分析和存档
|
||
|
||
═══════════════════════════════════════════════════════════════
|
||
👤 用户相关功能
|
||
═══════════════════════════════════════════════════════════════
|
||
|
||
5. 个人中心 🏠
|
||
点击头像弹出的菜单里，增加"个人中心"功能
|
||
让用户可以查看和管理自己的信息
|
||
|
||
6. 用户头像设置 🎨
|
||
用户可以自己设置头像
|
||
- 钉钉登录的用户：直接用钉钉头像（能抓到就用，抓不到就算了）
|
||
- 没有头像的用户：和系统LOGO一样，用默认头像策略
|
||
|
||
═══════════════════════════════════════════════════════════════
|
||
🎨 首页UI优化
|
||
═══════════════════════════════════════════════════════════════
|
||
|
||
7. 排行榜缩略按钮可拖动 📌
|
||
首页排行榜关闭后的那个小缩略按钮
|
||
可以拖动，而且记住关闭前的位置
|
||
|
||
8. 素材卡片响应式优化 ✅
|
||
问题：调整浏览器窗口大小时，卡片会变形
|
||
解决：保持卡片比例固定，不要贴边
|
||
✅ 已完成：卡片比例固定，加了边距，样式统一
|
||
|
||
9. 素材卡片大小可调 🎚️
|
||
可以设置素材卡片的大小（加个横向滑块）
|
||
展示形式可以改成瀑布流
|
||
考虑到低性能机器，可以动态加载，一次加载多少你看着办
|
||
有更好的想法也可以提出来
|
||
|
||
10. 素材卡片信息精简 📦
|
||
现在卡片下方信息太多，占地方
|
||
优化方案：
|
||
- "作者："文字去掉，直接显示作者名，前面加头像
|
||
- 文件名和文件大小不显示
|
||
- 上传时间放到预览图右上角，默认隐藏，鼠标悬停时显示
|
||
|
||
11. 素材卡片标签系统 🏷️
|
||
在素材名称前面加标签
|
||
比如：点赞榜、精品榜、下载榜、收藏榜等
|
||
样式参考最高权限的显示效果
|
||
要好看，偏向苹果风格，但整体要统一
|
||
|
||
12. 首页筛选TAG系统 🎯 ✅
|
||
把筛选里的"类型分页"功能放到首页
|
||
用TAG显示，第一个TAG是"全部"
|
||
TAG根据上传模板设置（所以模板管理很重要）
|
||
样式要大气好看，符合整体风格
|
||
✅ 已完成：创建了 `/api/material-types` API 从模板中提取素材类型
|
||
✅ 已完成：首页使用TAG形式显示类型筛选，支持点击切换
|
||
✅ 已完成：使用低饱和度炫彩元素样式，符合整体设计风格
|
||
|
||
═══════════════════════════════════════════════════════════════
|
||
🎛️ 系统管理优化
|
||
═══════════════════════════════════════════════════════════════
|
||
|
||
13. 菜单改名和调整 📋
|
||
- 点击头像菜单里，"系统设置"改名为"管理"，图标也换一下
|
||
- "外观设置"也移到头像菜单里，前面加个图标
|
||
|
||
14. 模板管理整合 🔗 ✅
|
||
现在模板管理已经做好了，要把前后端串起来：
|
||
✅ 首页上传素材面板：把"素材类型"改成"素材模板"
|
||
列表直接拉取模板管理中的模板名称
|
||
✅ 选择模板后，界面显示对应模板的字段
|
||
✅ 系统管理中的分类管理：
|
||
不再用"店铺分类"和"场景类别"
|
||
改用模板管理中的下拉选项文字做分类
|
||
⚠️ 模板管理的面板逻辑要严格检查，这个很重要！（待后续完善）
|
||
|
||
15. 系统监控交互增强 📈
|
||
- 用户总数、活跃用户、总素材数、本月新用户、本月新素材
|
||
这些数字可以点击，跳转到对应的数据显示
|
||
- 素材上传趋势卡片前面，增加"当月上传趋势"
|
||
|
||
═══════════════════════════════════════════════════════════════
|
||
✨ UI统一与组件库
|
||
═══════════════════════════════════════════════════════════════
|
||
|
||
16. 统一弹窗系统 ✅
|
||
不要用浏览器自带的弹窗，太丑了
|
||
✅ 已完成：创建了统一弹窗组件，替换了所有浏览器原生弹窗
|
||
✅ 已完成：确认、提示、输入弹窗都统一了
|
||
|
||
17. 素材预览面板统一 ✅
|
||
点击素材后的预览面板要统一，退出逻辑也要统一
|
||
✅ 已完成：创建了统一的预览组件，样式和退出逻辑都统一了
|
||
|
||
18. 首页UI统一到三层架构 ✅
|
||
首页的UI要统一到三层架构系统
|
||
✅ 已完成：按钮、输入框、筛选弹窗等主要组件都统一了
|
||
✅ 已完成：所有颜色从gray系列改成slate系列，完全统一
|
||
✅ 已完成：文本、边框、标签样式都统一了
|
||
|
||
19. 通用组件库创建 ✅
|
||
在统一UI架构内，新增一些通用组件
|
||
✅ 已完成：创建了Badge组件（徽章，支持多种样式）
|
||
✅ 已完成：创建了Tag组件（标签，支持多种颜色，已在首页用上了）
|
||
✅ 已完成：创建了Button组件（按钮，支持多种样式和加载状态）
|
||
✅ 已完成：创建了Input组件（输入框，支持错误状态和多种尺寸）
|
||
✅ 已完成：创建了Card组件（卡片，支持多种变体）
|
||
✅ 已完成：创建了Avatar组件（头像，支持图片和文字头像）
|
||
✅ 已完成：为所有新创建和重构的文件添加了文件头注释
|
||
|
||
═══════════════════════════════════════════════════════════════
|
||
🎨 视觉设计优化
|
||
═══════════════════════════════════════════════════════════════
|
||
|
||
20. 深浅色主题优化 🌓 ⏳
|
||
优化一下深浅色主题的适配
|
||
确保所有组件在两种模式下都好看
|
||
✅ 已完成：Header组件迁移到三层架构，使用Avatar组件
|
||
✅ 已完成：ChangePasswordModal迁移到统一的Modal和Input组件
|
||
✅ 已完成：DanmakuWidget迁移到三层架构，使用统一的Input和Button组件
|
||
✅ 已完成：AIChatWidget添加文件头注释，优化样式（gray → slate）
|
||
✅ 已完成：RankingPanel添加文件头注释，迁移到三层架构
|
||
✅ 已完成：分享页面和编辑页面添加文件头注释，优化样式（gray → slate）
|
||
⏳ 进行中：继续优化UploadModal等大型组件
|
||
|
||
21. 低饱和度炫彩元素 🎨 ✅
|
||
设计语言遵循苹果风格
|
||
重点用低饱和度的炫彩元素
|
||
让界面更有活力但不会太花哨
|
||
✅ 已完成：添加了accentStyles配置（pink、purple、blue、cyan、emerald、orange、rainbow）
|
||
✅ 已完成：Tag组件已更新使用低饱和度炫彩元素
|
||
|
||
═══════════════════════════════════════════════════════════════
|
||
|
||
💡 提示：
|
||
- ✅ 表示已完成
|
||
- ⏳ 表示进行中
|
||
- 📝 表示待开始
|
||
- 有更好的想法随时提出来～
|