63ec6b7dfb
1. 排行榜悬浮窗关闭后小按钮消失问题 - 修复面板居中模式关闭时按钮位置错误 - 保存并恢复按钮的居中状态 2. 首页tag按钮按素材数量排序 - 添加按素材数量降序排序逻辑 3. 上传弹窗输入框浅色模式文字不可见 - 添加 text-slate-900 确保浅色模式下文字可见 - 添加 placeholder 样式确保占位符正确显示
683 lines
25 KiB
Markdown
683 lines
25 KiB
Markdown
# 优化计划与优先级
|
||
|
||
> **项目宗旨**：性能开销优先、稳定性优先、易于部署、统一UI三层架构、遵循苹果设计语言
|
||
|
||
## 📋 优化原则
|
||
|
||
1. **统一UI三层架构优先**：所有UI改动必须遵循三层架构（基础层、颜色层、组合层）
|
||
2. **基础组件优先**：先建立统一的基础组件，再实现具体功能
|
||
3. **数据一致性优先**：确保数据同步和一致性
|
||
4. **性能优化优先**：考虑低性能NAS机器，使用动态加载、瀑布流等
|
||
5. **用户体验优先**：修复已知问题，优化交互体验
|
||
|
||
---
|
||
|
||
## 🎯 优先级规划
|
||
|
||
### 优先级 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.2）- 已完成
|
||
3. ✅ 首页素材展示响应式优化（1.3）- 已完成
|
||
4. ✅ 首页UI统一到三层架构（1.4）- 完全完成
|
||
5. ✅ 统一UI三层架构通用组件库（1.5）- 已完成（Badge、Tag、Button、Input、Card、Avatar）
|
||
6. ✅ 深浅色主题适配优化（1.6）- 已完成（Header、ChangePasswordModal、DanmakuWidget、AIChatWidget、RankingPanel、分享页面、编辑页面、UploadModal基础优化）
|
||
7. ✅ 低饱和度炫彩元素设计（1.7）- 已完成（添加accentStyles，更新Tag组件）
|
||
|
||
### 第二阶段：数据一致性与核心功能（2-3周）
|
||
8. ✅ 用户信息修改后同步素材信息（2.1）- 已完成
|
||
9. ✅ 模板管理整合（2.2）- 已完成（核心功能已实现，待完善模板管理面板逻辑检查）
|
||
10. ✅ 首页类型筛选TAG系统（2.3）- 已完成
|
||
|
||
### 第三阶段：用户体验优化（2-3周）
|
||
11. ✅ 上传素材进度优化（3.1）- 已完成
|
||
12. ✅ 素材卡片信息优化（3.2）- 已完成
|
||
13. ✅ 素材卡片大小设置和瀑布流（3.4）- 已完成
|
||
14. ✅ 素材卡片标签系统（3.3）- 已完成
|
||
15. ✅ 多预览图上传（3.5）- 已完成（核心功能已完成，素材详情展示待后续实现）
|
||
|
||
### 第四阶段：功能增强（1-2周）
|
||
16. ✅ 用户头像设置（4.1）- 已完成
|
||
17. ✅ 个人中心功能（4.2）- 已完成
|
||
18. ✅ 菜单调整（4.3）- 已完成
|
||
19. ✅ 排行榜缩略按钮拖动（4.4）- 已完成
|
||
20. ✅ 性能监控导出CSV（4.5）- 已完成
|
||
21. ✅ 系统监控数据点击跳转（4.6）- 已完成
|
||
22. ✅ 系统监控当月上传趋势（4.7）- 已完成
|
||
|
||
---
|
||
|
||
## 🎨 UI设计原则
|
||
|
||
### 统一UI三层架构
|
||
所有UI改动必须遵循：
|
||
1. **基础层**（`lib/ui-styles-base.ts`）：布局、大小、动画
|
||
2. **颜色层**（`lib/ui-theme-colors-light.ts` / `dark.ts`）：仅颜色配置
|
||
3. **组合层**（`lib/ui-styles-composer.ts`）：自动组合
|
||
|
||
### 使用规范
|
||
```tsx
|
||
// ✅ 正确：使用 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`
|
||
- 但必须遵循**统一视觉方案**，不能偏离
|
||
|
||
---
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
1. **性能优先**：所有改动必须考虑低性能NAS机器
|
||
- 使用动态加载
|
||
- 图片懒加载
|
||
- 避免一次性加载大量数据
|
||
|
||
2. **稳定性优先**：
|
||
- 所有数据操作使用事务
|
||
- 完善的错误处理
|
||
- 数据一致性检查
|
||
|
||
3. **易于部署**：
|
||
- 不增加外部依赖（如必须，使用国内镜像）
|
||
- 配置集中化
|
||
- 向后兼容
|
||
|
||
4. **代码质量**：
|
||
- 遵循现有代码规范
|
||
- 使用 TypeScript 类型
|
||
- 提取可复用逻辑到 Hook/工具函数
|
||
|
||
---
|
||
|
||
## 📝 更新记录
|
||
|
||
- 2025-01-XX：创建优化计划文档，重新规划优先级
|
||
- 2025-01-XX：添加新需求（17-23），包括深浅色主题优化、低饱和度炫彩元素、首页TAG系统、系统监控功能增强等
|
||
- 2025-11-25：更新已完成状态
|
||
- ✅ 颜色系统完全统一：所有页面和组件文件的 `gray-` 已替换为 `slate-`
|
||
- ✅ 排行榜缩略按钮拖动功能已完成
|
||
- ✅ 系统监控功能增强（CSV导出、数据点击跳转、当月上传趋势）已完成
|
||
- ✅ 所有核心功能和用户体验优化已完成
|
||
|