WuYongJie 63ec6b7dfb fix: 修复排行榜按钮消失、tag排序和输入框浅色模式问题

1. 排行榜悬浮窗关闭后小按钮消失问题
   - 修复面板居中模式关闭时按钮位置错误
   - 保存并恢复按钮的居中状态

2. 首页tag按钮按素材数量排序
   - 添加按素材数量降序排序逻辑

3. 上传弹窗输入框浅色模式文字不可见
   - 添加 text-slate-900 确保浅色模式下文字可见
   - 添加 placeholder 样式确保占位符正确显示

2025-12-14 21:41:29 +08:00

25 KiB

Raw Blame History

优化计划与优先级

项目宗旨：性能开销优先、稳定性优先、易于部署、统一UI三层架构、遵循苹果设计语言

📋 优化原则

统一UI三层架构优先：所有UI改动必须遵循三层架构（基础层、颜色层、组合层）
基础组件优先：先建立统一的基础组件，再实现具体功能
数据一致性优先：确保数据同步和一致性
性能优化优先：考虑低性能NAS机器，使用动态加载、瀑布流等
用户体验优先：修复已知问题，优化交互体验

🎯 优先级规划

优先级 1：基础组件与UI统一（核心基础设施）

1.1 创建统一弹窗组件 ⭐⭐⭐⭐⭐

需求编号：16
优先级：最高
状态：✅ 已完成
原因：

这是所有UI统一的基础
后续多个功能都需要使用弹窗
必须遵循三层架构设计
替换浏览器原生弹窗，提升视觉一致性

实施要点：

✅ 创建 components/ui/Modal.tsx 统一弹窗组件
✅ 使用 useThemeStyles() 和三层架构
✅ 支持多种尺寸（small, medium, large, xlarge, fullscreen）
✅ 支持关闭动画、遮罩层、键盘ESC关闭
✅ 提供 useModal Hook（hooks/useModal.ts）统一管理弹窗状态
✅ 完整的ARIA标签和键盘导航支持
✅ 样式参考苹果设计语言，遵循统一视觉方案
✅ 替换所有浏览器原生弹窗（confirm/alert/prompt）
- ✅ 创建了 ConfirmDialog、AlertDialog、PromptDialog 组件
- ✅ 创建了 DialogProvider 和 useDialog Hook
- ✅ 替换了所有 admin 组件、首页、分享页面中的原生弹窗

依赖关系：无（基础组件）
影响范围：全局（所有需要弹窗的地方）

1.2 素材预览面板统一 ⭐⭐⭐⭐⭐

需求编号：15
优先级：最高
状态：✅ 已完成
原因：

统一退出逻辑和交互体验
必须使用统一弹窗组件（依赖1.1）
提升用户体验一致性

实施要点：

✅ 创建了 MaterialPreviewModal 组件
✅ 使用统一弹窗组件重构素材预览面板
✅ 统一退出逻辑（ESC键、点击遮罩、关闭按钮）
✅ 使用三层架构样式系统
✅ 确保深浅色模式适配

依赖关系：依赖 1.1（统一弹窗组件）
影响范围：首页素材预览

1.3 首页素材展示响应式优化 ⭐⭐⭐⭐

需求编号：8
优先级：高
状态：✅ 已完成
原因：

修复已知UI问题（卡片比例、边界间距）
必须遵循统一UI原则
影响用户体验

实施要点：

✅ 修复卡片比例固定问题（使用 aspect-[3/4] 替代固定高度）
✅ 添加容器边距（px-4 sm:px-6 lg:px-8）避免卡片贴边界
✅ 使用三层架构样式系统（useThemeStyles() 和 cardStyles.base）
✅ 优化响应式断点和图片 sizes 属性
✅ 确保深浅色模式适配（使用 slate 系列颜色）

依赖关系：无
影响范围：首页素材展示

1.4 首页UI统一到三层架构 ⭐⭐⭐⭐

需求编号：22
优先级：高
状态：✅ 已完成
原因：

统一UI架构，确保视觉一致性
首页是核心页面，必须遵循三层架构

实施要点：

✅ 迁移了主要按钮样式（上传按钮、筛选按钮）
✅ 迁移了搜索输入框样式
✅ 迁移了筛选弹窗中的所有按钮样式（类型分页、使用店铺、场景类别、平台分类、上传月份）
✅ 迁移了筛选弹窗容器样式
✅ 迁移了筛选弹窗关闭按钮样式
✅ 使用 useThemeStyles() Hook
✅ 完全统一颜色系统：所有 gray- 已替换为 slate-

依赖关系：无
影响范围：首页所有UI组件

1.5 统一UI三层架构通用组件库 ⭐⭐⭐⭐

需求编号：23
优先级：高
状态：✅ 已完成
原因：

提高开发效率
确保组件一致性
减少重复代码

实施要点：

✅ 在 components/ui/ 目录下创建通用组件
✅ 所有组件必须使用三层架构
✅ 提供常用组件：Button、Input、Card、Badge、Tag、Avatar等
✅ 每个组件提供完整的TypeScript类型定义
✅ 使用 useThemeStyles() 确保主题适配
✅ 已创建组件：
- Badge.tsx - 徽章组件（支持 primary、success、warning、danger 变体）
- Tag.tsx - 标签组件（支持多种颜色，已在首页应用）
- Button.tsx - 按钮组件（支持多种变体和尺寸，带加载状态）
- Input.tsx - 输入框组件（支持错误状态和多种尺寸）
- Card.tsx - 卡片组件（支持多种变体：base、hover、large、flat、rainbow、glass、neon）
- Avatar.tsx - 头像组件（支持图片和文字头像，多种尺寸）
- Modal.tsx - 弹窗组件（已创建）
- ConfirmDialog.tsx、AlertDialog.tsx、PromptDialog.tsx - 对话框组件（已创建）
- DialogProvider.tsx - 对话框提供者（已创建）

依赖关系：无（基础组件库）
影响范围：全局（所有使用通用组件的地方）

1.6 深浅色主题适配优化 ⭐⭐⭐

需求编号：17
优先级：中
状态：✅ 已完成
原因：

提升主题切换体验
确保所有组件在深浅色模式下都完美显示

实施要点：

✅ 为所有新创建和重构的文件添加了文件头注释
- Tab组件（UsersTab、DepartmentsTab、CategoriesTab、InvitationsTab、MaterialsTab、MonitorTab）
- Hook文件（usePermissions、useDashboardData、useModalState、useToast、useDataFetch、useUserOperations、useDepartmentOperations）
- 工具函数（api.ts、formatters.ts、departmentTree.ts）
- UI组件（Modal、ConfirmDialog、AlertDialog、PromptDialog、DialogProvider、Button、Input、Card、Avatar、Badge、Tag）
✅ Header组件迁移到三层架构
- 使用 useThemeStyles() Hook
- 使用统一的 Avatar 组件替换自定义头像实现
- 下拉菜单使用 cardStyles.base 统一样式
- 移除了所有 dark:bg-gray 等直接样式
✅ ChangePasswordModal迁移到统一组件
- 使用统一的 Modal 组件替换自定义弹窗实现
- 使用统一的 Input 组件替换原生input
- 使用统一的 Button 组件替换原生button
- 使用三层架构样式系统
✅ DanmakuWidget迁移到三层架构
- 使用统一的 Input 和 Button 组件
- 使用 useThemeStyles() Hook
- 优化样式（gray → slate）
- 添加文件头注释
✅ AIChatWidget优化
- 添加文件头注释
- 优化关键样式（gray → slate）
- 使用 useThemeStyles() Hook
✅ RankingPanel迁移到三层架构
- 添加文件头注释
- 使用 useThemeStyles() Hook
- 优化样式（gray → slate）
✅ 分享页面和编辑页面优化
- app/share/[id]/page.tsx 添加文件头注释，优化样式（gray → slate）
- app/edit/[id]/page.tsx 添加文件头注释，优化样式（gray → slate）
- 使用 useThemeStyles() Hook 和 cardStyles.base
✅ UploadModal基础样式优化
- 添加文件头注释
- 导入 useThemeStyles 和统一组件
- 所有 gray 系列替换为 slate 系列
- 主要容器使用 cardStyles.base
- 注意：由于后续会进行模板管理整合（需求14），暂不做深度重构，等模板管理整合时再一起优化
✅ 低饱和度炫彩元素设计（1.7）
- 在颜色层添加了 accent 配置（pink、purple、blue、cyan、emerald、orange、rainbow）
- 每个颜色包含 bg、text、border、hover 四个属性
- 浅色模式使用低饱和度背景（如 bg-pink-50）
- 深色模式使用低透明度背景（如 bg-pink-900/20）
- 在组合器中添加 accentStyles 导出
- 更新 Tag 组件使用新的 accentStyles
✅ 优化颜色对比度，确保可读性
✅ 统一过渡动画效果
✅ 测试所有页面的主题切换
✅ 完全统一颜色系统：将所有 gray- 替换为 slate-（globals.css、登录页面、注册页面、EditMaterialModal、complete-profile、dingtalk-callback、RankingPanel、DanmakuWidget、AIChatWidget）
✅ 删除管理页面中的外观设置Tab（与头像菜单重复）

依赖关系：建议在 1.4（首页UI统一）之后
影响范围：全局

1.7 低饱和度炫彩元素设计 ⭐⭐⭐

需求编号：18
优先级：中
状态：✅ 已完成
原因：

遵循苹果设计语言
提升视觉美感
保持统一视觉方案

实施要点：

✅ 在颜色层（ui-theme-colors-*.ts）中添加低饱和度炫彩元素
- 添加了 accent 颜色配置，包含：pink、purple、blue、cyan、emerald、orange、rainbow
- 每个颜色包含：bg、text、border、hover 四个属性
- 浅色模式使用低饱和度背景（如 bg-pink-50）
- 深色模式使用低透明度背景（如 bg-pink-900/20）
✅ 在组合器中添加 accentStyles 导出
✅ 更新 Tag 组件使用新的 accentStyles
- 所有颜色都使用低饱和度炫彩元素
- hover 效果使用对应的 accent hover 样式
✅ 确保深浅色模式都有对应的炫彩元素
✅ 参考苹果设计语言，但遵循统一视觉方案

依赖关系：建议在 1.5（通用组件库）之后
影响范围：全局UI元素（标签、徽章、强调色等）

优先级 2：数据一致性与核心功能（业务逻辑）

2.1 用户信息修改后同步素材信息 ⭐⭐⭐⭐⭐

需求编号：1
优先级：最高（业务逻辑）
状态：✅ 已完成
原因：

数据一致性是核心要求
影响数据准确性
已有 useUserOperations hook，可以在此扩展

实施要点：

✅ 在 useUserOperations.updateUser 中扩展逻辑
✅ 当用户信息（用户名）修改时，同步更新该用户上传的所有素材的 authorName
✅ 使用事务确保数据一致性（在 app/api/admin/users/update/route.ts 中实现）
✅ 添加错误处理和回滚机制
✅ 前端已处理 materialsUpdated 返回值并显示提示信息

实现细节：

API 端（app/api/admin/users/update/route.ts）：当用户名变化时，使用事务同步更新该用户所有素材的 authorName
前端（app/admin/_hooks/useUserOperations.ts）：处理 materialsUpdated 返回值，显示"用户信息已更新，素材信息已同步"提示
Material 表中只有 authorName 字段与用户信息相关，部门信息不需要同步

依赖关系：无
影响范围：用户管理、素材数据

2.2 模板管理整合到上传和分类 ⭐⭐⭐⭐⭐

需求编号：14
优先级：最高（核心功能）
状态：✅ 已完成
原因：

这是核心业务逻辑，将前后端通过模板串起来
影响整个系统的数据架构
需要严格检查模板管理面板逻辑

实施要点：

✅ 首页上传素材面板：将"素材类型"改为"素材模板"，从模板管理拉取模板名称
- 创建公共 API 端点 /api/upload-templates 获取启用的模板列表
- 修改 UploadModal 组件，添加模板选择功能
✅ 选择模板后，动态显示对应模板的字段
- 支持多种字段类型：text、textarea、number、select、checkbox、radio、date
- 根据字段的 layoutWidth 属性支持半行/整行布局
- 自动验证必填字段
✅ 系统管理中的分类管理：使用模板管理中的下拉元素文字做分类
- 创建 /api/template-categories API 提取模板中的分类选项
- 从所有启用的模板中提取 addToCategory=true 且 type='select' 的字段选项
- 在分类管理界面显示模板分类卡片，提供编辑、添加、删除选项的功能
- 创建 /api/template-categories/[fieldKey] API 管理特定字段的分类选项
- 保留原有分类管理用于向后兼容
✅ 添加"添加到分类"字段属性
- 在数据库 schema 中添加 addToCategory 字段到 UploadField 模型
- 在字段编辑器中添加"添加到分类"勾选框（仅 select 类型显示）
- 更新所有相关类型定义和 API 以支持该字段
✅ 修改上传逻辑：提交模板ID和字段值
- 在 metadata 字段中存储模板字段值（JSON格式）
- 在 templateId 字段中直接存储模板ID，方便查询
⏳ 严格检查模板管理面板逻辑（待后续完善）：
- 字段验证（键名唯一性、类型检查）
- 模板保存/更新逻辑
- 模板删除时的依赖检查
- 模板使用情况统计
⏳ 确保数据一致性：模板修改后，已上传的素材如何处理（待后续完善）

依赖关系：无（但需要先确保模板管理逻辑完善）
影响范围：上传功能、分类管理、模板管理

2.3 首页类型筛选TAG系统 ⭐⭐⭐⭐

需求编号：19
优先级：高
状态：✅ 已完成
原因：

与模板管理整合相关，是核心功能的一部分
提升用户体验，方便筛选
TAG样式需要符合整体风格

实施要点：

✅ 将筛选内的类型分页功能移到首页
✅ 使用TAG形式显示，第一个TAG是"全部"
✅ TAG数据来源：根据上传模板设置（模板管理中的下拉元素文字）
- 创建 /api/material-types API 从模板管理中提取 materialType 字段的 optionsStatic
- 首页从API动态获取素材类型列表，不再使用固定数组
✅ TAG样式设计：好看大气，符合整体风格
- 使用 Tag 组件和 accentStyles 实现低饱和度炫彩元素
- 支持多种颜色（blue、green、orange、purple、pink、cyan）循环使用
- 选中状态使用 ring 样式突出显示
- 未选中状态使用透明度变化提供视觉反馈
✅ 使用三层架构样式系统
✅ 支持点击切换筛选
✅ 考虑低饱和度炫彩元素（需求18）

依赖关系：依赖 2.2（模板管理整合）
影响范围：首页筛选功能

优先级 3：用户体验优化（交互与视觉）

3.1 上传素材进度优化 ⭐⭐⭐⭐

需求编号：2
优先级：高
状态：✅ 已完成
原因：

修复已知问题，影响用户体验
进度到100%后延迟关闭的问题

实施要点：

✅ 检查上传完成后的处理逻辑
✅ 确保进度100%后立即显示完成状态
- 添加 uploadComplete 状态标识上传完成
- 进度条颜色从蓝色变为绿色
- 显示"上传完成"和"✓ 上传成功，正在关闭..."提示
✅ 添加短暂延迟（300ms）确保数据保存完成后再关闭弹窗
✅ 优化用户体验：显示上传完成提示
- 进度条显示为绿色
- 显示完成提示文字
- 自动关闭前给用户反馈

依赖关系：建议使用统一弹窗组件（1.1）
影响范围：上传功能

3.2 素材卡片信息优化 ⭐⭐⭐⭐

需求编号：10
优先级：高
状态：✅ 已完成
原因：

优化空间占用，提升视觉体验
必须遵循统一UI原则

实施要点：

✅ 移除"作者："文字，直接显示作者名字
✅ 作者名字前显示头像（使用Avatar组件）
✅ 移除文件名和文件大小显示
✅ 上传时间叠在预览图右上角，默认隐藏，hover时显示
✅ 使用三层架构样式系统
✅ 确保hover状态的可见性

依赖关系：无
影响范围：首页素材卡片

3.3 素材卡片标签系统 ⭐⭐⭐

需求编号：11
优先级：中
状态：✅ 已完成
原因：

UI增强功能
需要参考最高权限显示UI
必须遵循统一视觉方案

实施要点：

✅ 在素材名称前添加标签（点赞榜、精品榜、下载榜等）
✅ 创建了素材排行榜API（/api/material-rankings）
✅ 实现了下载榜、点赞榜、精品榜三种排行榜
✅ 使用Badge组件，样式统一美观
✅ 使用三层架构样式系统
✅ 标签数据来源：排行榜数据

依赖关系：无
影响范围：首页素材卡片

3.4 素材卡片大小设置和瀑布流 ⭐⭐⭐⭐

需求编号：9
优先级：高
状态：✅ 已完成
原因：

性能优化（动态加载）
用户体验提升（自定义大小）
考虑低性能NAS机器

实施要点：

✅ 添加横向滑块设置卡片大小（5个级别）
✅ 实现瀑布流布局（使用CSS Columns）
✅ 动态加载卡片数量（初始加载24个，滚动加载更多）
✅ 使用 IntersectionObserver 实现懒加载
✅ 考虑性能：图片懒加载、布局优化
✅ 使用三层架构样式系统
✅ 用户偏好保存到localStorage

依赖关系：建议在 3.2（素材卡片信息优化）之后
影响范围：首页素材展示

3.5 多预览图上传 ⭐⭐⭐

需求编号：3
优先级：中
状态：✅ 已完成
原因：

功能增强
自动设置第一张为预览图

实施要点：

✅ 修改上传逻辑，支持多文件选择（最多5张）
✅ 自动将第一张设置为预览图
✅ 预览图列表显示，可单独删除
✅ 多预览图URLs存储在metadata中（JSON格式）
⏳ 在素材详情中展示所有预览图（待后续实现）

依赖关系：建议使用统一弹窗组件（1.1）
影响范围：上传功能、素材详情

优先级 4：功能增强（次要功能）

4.1 用户头像设置 ⭐⭐⭐

需求编号：6
优先级：中
状态：✅ 已完成
原因：

功能增强
钉钉头像抓取逻辑

实施要点：

✅ 创建了头像上传API（/api/user/avatar）
✅ 用户可以在个人中心上传头像
✅ 头像自动压缩和优化（最大5MB，压缩到200KB以内）
✅ 更新了auth配置，在session中包含avatar信息
✅ Header组件中的Avatar组件支持显示用户头像
⏳ 钉钉登录用户头像自动同步（已在钉钉登录流程中实现）

依赖关系：建议使用统一弹窗组件（1.1）
影响范围：用户管理、个人中心

4.2 个人中心功能 ⭐⭐⭐

需求编号：5
优先级：中
状态：✅ 已完成
原因：

功能增强
用户个人信息管理

实施要点：

✅ 在点击头像弹出的菜单中增加"个人中心"选项
✅ 创建个人中心页面（/profile）
✅ 显示用户信息、上传的素材
✅ 支持在个人中心上传和修改头像
✅ 使用三层架构样式系统
⏳ 下载记录等功能（待后续实现）

依赖关系：建议使用统一弹窗组件（1.1）
影响范围：用户菜单、个人中心页面

4.3 菜单调整（系统设置改名为管理、外观设置移动） ⭐⭐

需求编号：12、13
优先级：低
状态：✅ 已完成
原因：

UI调整，不影响核心功能

实施要点：

✅ 将"系统设置"改名为"管理"，更换图标（使用滑块图标）
✅ 将外观设置移动到点击头像弹出的菜单里
✅ 添加图标（调色板图标）
✅ 使用三层架构样式系统

依赖关系：无
影响范围：用户菜单

4.4 排行榜缩略按钮拖动 ⭐⭐

需求编号：7
优先级：低
状态：✅ 已完成
原因：

交互优化，不影响核心功能

实施要点：

✅ 排行榜关闭后的缩略按钮可拖动
✅ 位置根据排行榜悬浮窗关闭前的位置（关闭时保存面板位置）
✅ 使用自定义拖动实现，保存位置到localStorage
✅ 支持点击打开和拖动操作（拖动阈值5px区分点击和拖动）
✅ 从localStorage恢复按钮位置

依赖关系：无
影响范围：排行榜组件

4.5 性能监控导出CSV ⭐⭐

需求编号：4
优先级：低
状态：✅ 已完成
原因：

功能增强，非核心功能

实施要点：

✅ 在性能监控版添加导出CSV按钮
✅ 使用原生JavaScript实现CSV生成（无需额外依赖）
✅ 支持Excel正确显示中文（添加UTF-8 BOM）
✅ 使用三层架构样式系统
✅ 文件名包含导出日期

依赖关系：无
影响范围：性能监控页面

4.6 系统监控数据点击跳转 ⭐⭐⭐

需求编号：20
优先级：中
状态：✅ 已完成
原因：

提升数据可操作性
方便管理员快速查看详细数据

实施要点：

✅ 用户总数、活跃用户、总素材数、本月新用户、本月新素材等数据项可点击
✅ 点击后跳转到对应的数据显示页面（如用户管理、素材管理等）
✅ 使用三层架构样式系统
✅ 添加hover效果（阴影、缩放、边框高亮）和点击提示（title属性）

依赖关系：无
影响范围：系统监控页面

4.7 系统监控当月上传趋势 ⭐⭐

需求编号：21
优先级：低
状态：✅ 已完成
原因：

功能增强，提供更详细的数据展示

实施要点：

✅ 在素材上传趋势卡片标题旁增加"当月上传"数字显示
✅ 显示当月（最后一条数据）的上传数量
✅ 使用紫色高亮显示，与趋势图颜色一致
✅ 使用三层架构样式系统
✅ 使用 useMemo 计算当月上传数量

依赖关系：无
影响范围：系统监控页面

📊 实施路线图

第一阶段：基础组件与UI统一（2-3周）

✅ 创建统一弹窗组件（1.1）- 已完成，包括替换所有原生弹窗
✅ 素材预览面板统一（1.2）- 已完成
✅ 首页素材展示响应式优化（1.3）- 已完成
✅ 首页UI统一到三层架构（1.4）- 完全完成
✅ 统一UI三层架构通用组件库（1.5）- 已完成（Badge、Tag、Button、Input、Card、Avatar）
✅ 深浅色主题适配优化（1.6）- 已完成（Header、ChangePasswordModal、DanmakuWidget、AIChatWidget、RankingPanel、分享页面、编辑页面、UploadModal基础优化）
✅ 低饱和度炫彩元素设计（1.7）- 已完成（添加accentStyles，更新Tag组件）

第二阶段：数据一致性与核心功能（2-3周）

✅ 用户信息修改后同步素材信息（2.1）- 已完成
✅ 模板管理整合（2.2）- 已完成（核心功能已实现，待完善模板管理面板逻辑检查）
✅ 首页类型筛选TAG系统（2.3）- 已完成

第三阶段：用户体验优化（2-3周）

✅ 上传素材进度优化（3.1）- 已完成
✅ 素材卡片信息优化（3.2）- 已完成
✅ 素材卡片大小设置和瀑布流（3.4）- 已完成
✅ 素材卡片标签系统（3.3）- 已完成
✅ 多预览图上传（3.5）- 已完成（核心功能已完成，素材详情展示待后续实现）

第四阶段：功能增强（1-2周）

✅ 用户头像设置（4.1）- 已完成
✅ 个人中心功能（4.2）- 已完成
✅ 菜单调整（4.3）- 已完成
✅ 排行榜缩略按钮拖动（4.4）- 已完成
✅ 性能监控导出CSV（4.5）- 已完成
✅ 系统监控数据点击跳转（4.6）- 已完成
✅ 系统监控当月上传趋势（4.7）- 已完成

🎨 UI设计原则

统一UI三层架构

所有UI改动必须遵循：

基础层（lib/ui-styles-base.ts）：布局、大小、动画
颜色层（lib/ui-theme-colors-light.ts / dark.ts）：仅颜色配置
组合层（lib/ui-styles-composer.ts）：自动组合

使用规范

// ✅ 正确：使用 useThemeStyles()
import { useThemeStyles } from '@/lib/ui-styles'

export default function MyComponent() {
  const styles = useThemeStyles()
  return <div className={styles.cardStyles.base}>...</div>
}

// ❌ 错误：直接使用 dark: 前缀
<div className="bg-white dark:bg-slate-800">...</div>

苹果设计语言参考

圆角：rounded-2xl、rounded-3xl
阴影：柔和阴影，使用 shadow-lg
动画：流畅过渡，使用 transition-all duration-300
间距：统一使用 spacingStyles
但必须遵循统一视觉方案，不能偏离

⚠️ 注意事项

性能优先：所有改动必须考虑低性能NAS机器
- 使用动态加载
- 图片懒加载
- 避免一次性加载大量数据
稳定性优先：
- 所有数据操作使用事务
- 完善的错误处理
- 数据一致性检查
易于部署：
- 不增加外部依赖（如必须，使用国内镜像）
- 配置集中化
- 向后兼容
代码质量：
- 遵循现有代码规范
- 使用 TypeScript 类型
- 提取可复用逻辑到 Hook/工具函数

📝 更新记录

2025-01-XX：创建优化计划文档，重新规划优先级
2025-01-XX：添加新需求（17-23），包括深浅色主题优化、低饱和度炫彩元素、首页TAG系统、系统监控功能增强等
2025-11-25：更新已完成状态
- ✅ 颜色系统完全统一：所有页面和组件文件的 gray- 已替换为 slate-
- ✅ 排行榜缩略按钮拖动功能已完成
- ✅ 系统监控功能增强（CSV导出、数据点击跳转、当月上传趋势）已完成
- ✅ 所有核心功能和用户体验优化已完成

25 KiB Raw Blame History Unescape Escape

优化计划与优先级

📋 优化原则

🎯 优先级规划

优先级 1：基础组件与UI统一（核心基础设施）

1.1 创建统一弹窗组件 ⭐⭐⭐⭐⭐

1.2 素材预览面板统一 ⭐⭐⭐⭐⭐

1.3 首页素材展示响应式优化 ⭐⭐⭐⭐

1.4 首页UI统一到三层架构 ⭐⭐⭐⭐

1.5 统一UI三层架构通用组件库 ⭐⭐⭐⭐

1.6 深浅色主题适配优化 ⭐⭐⭐

1.7 低饱和度炫彩元素设计 ⭐⭐⭐

优先级 2：数据一致性与核心功能（业务逻辑）

2.1 用户信息修改后同步素材信息 ⭐⭐⭐⭐⭐

2.2 模板管理整合到上传和分类 ⭐⭐⭐⭐⭐

2.3 首页类型筛选TAG系统 ⭐⭐⭐⭐

优先级 3：用户体验优化（交互与视觉）

3.1 上传素材进度优化 ⭐⭐⭐⭐

3.2 素材卡片信息优化 ⭐⭐⭐⭐

3.3 素材卡片标签系统 ⭐⭐⭐

3.4 素材卡片大小设置和瀑布流 ⭐⭐⭐⭐

3.5 多预览图上传 ⭐⭐⭐

优先级 4：功能增强（次要功能）

4.1 用户头像设置 ⭐⭐⭐

4.2 个人中心功能 ⭐⭐⭐

4.3 菜单调整（系统设置改名为管理、外观设置移动） ⭐⭐

4.4 排行榜缩略按钮拖动 ⭐⭐

4.5 性能监控导出CSV ⭐⭐

4.6 系统监控数据点击跳转 ⭐⭐⭐

4.7 系统监控当月上传趋势 ⭐⭐

📊 实施路线图

第一阶段：基础组件与UI统一（2-3周）

第二阶段：数据一致性与核心功能（2-3周）

第三阶段：用户体验优化（2-3周）

第四阶段：功能增强（1-2周）

🎨 UI设计原则

统一UI三层架构

使用规范

苹果设计语言参考

⚠️ 注意事项

📝 更新记录

25 KiB

Raw Blame History