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

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

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

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

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

36 KiB

Raw Blame History

Admin 页面优化建议和问题修复记录

✅ 2025-11-25 · 排行榜缩略按钮拖动功能

排行榜缩略按钮拖动

✅ 实现排行榜关闭后缩略按钮的拖动功能
✅ 关闭面板时自动保存面板位置作为缩略按钮位置
✅ 使用自定义拖动实现，区分点击和拖动操作（拖动阈值5px，时间阈值200ms）
✅ 按钮位置保存到localStorage，支持位置恢复
✅ 支持点击打开和拖动操作，提升用户体验

技术实现：

添加 buttonPosition、isButtonDragging、buttonDragOffset 状态和 buttonRef
实现 handleButtonMouseDown 和拖动事件处理（useEffect 监听 isButtonDragging）
关闭面板时保存位置：handleClose 中保存 position 到 buttonPosition 和 localStorage
从localStorage恢复按钮位置（在 useEffect 中）
使用 clickStartRef 记录点击开始位置和时间，区分点击和拖动
使用 pointer-events-none 防止SVG图标干扰拖动

✅ 2025-11-25 · 颜色系统完全统一与功能优化

颜色系统完全统一（主要页面）

✅ 优化 app/globals.css：将所有 gray- 替换为 slate-（按钮、输入框、卡片样式）
✅ 优化登录页面（app/login/page.tsx）：将所有 gray- 替换为 slate-，确保深浅色模式适配
✅ 优化注册页面（app/register/page.tsx）：将所有 gray- 替换为 slate-，确保深浅色模式适配
✅ 优化素材编辑弹窗（components/EditMaterialModal.tsx）：将所有 gray- 替换为 slate-，确保深浅色模式适配
✅ 优化完善个人信息页面（app/complete-profile/page.tsx）：将所有 gray- 替换为 slate-，确保深浅色模式适配
✅ 优化钉钉回调页面（app/dingtalk-callback/page.tsx）：将所有 gray- 替换为 slate-，确保深浅色模式适配

✅ 颜色系统完全统一（组件文件）

✅ components/RankingPanel.tsx - 已将所有 gray- 替换为 slate-（图标、背景、边框、文本等）
✅ components/DanmakuWidget.tsx - 已将所有 gray- 替换为 slate-（按钮背景）
✅ components/AIChatWidget.tsx - 已将所有 gray- 替换为 slate-（容器、渐变、输入框、占位符等）

完成：所有组件文件现在完全使用 slate 系列颜色，确保视觉一致性和深浅色模式完美适配。

管理页面功能优化

✅ 删除管理页面中的"外观设置"Tab（与头像菜单中的外观设置重复）
✅ 从 AdminTab 类型中移除 'settings' 选项
✅ 移除 AppearanceSettingsPanel 在管理页面的导入和使用
✅ 外观设置现在仅在头像下拉菜单中可用，避免功能重复

数据库迁移与清理

✅ 执行数据库迁移：添加素材表的所有可选字段（brandName、seriesName、skuCode等）
✅ 修复迁移脚本：将多个SQL命令分开执行，避免Prisma执行错误
✅ 素材数据和记录清理：删除所有素材记录和关联文件
✅ 更新清理API：添加素材清理功能到 /api/admin/cleanup-database

技术实现：

颜色统一：全局搜索替换 gray-* → slate-*，确保所有组件在深浅色模式下都使用统一的颜色系统
功能去重：删除管理页面中的外观设置Tab，保留头像菜单中的外观设置入口
数据库迁移：使用逐个执行SQL命令的方式，避免Prisma的"cannot insert multiple commands"错误
清理功能：在清理API中添加素材文件删除和记录删除功能

✅ 2025-11-25 · Bug修复与UI优化

上传文件500错误修复

✅ 修复视频类型预览图处理逻辑，添加空值检查（previewImage && previewImage.size > 0）
✅ 优化预览图验证逻辑，支持多预览图场景（优先使用previewImages，向后兼容previewImage）
✅ 确保所有错误都被正确捕获和返回，提供更详细的错误信息

个人中心返回按钮

✅ 添加返回按钮，使用统一UI样式系统
✅ 添加Header组件，保持页面一致性
✅ 返回按钮使用router.back()实现导航

用户管理弹窗统一UI

✅ 将UserEditModal改为使用统一Modal组件
✅ 将TransferSuperAdminModal改为使用统一Modal组件
✅ 将InvitationsTab的创建邀请弹窗改为使用统一Modal组件
✅ 所有弹窗现在都有毛玻璃效果（backdrop-blur-xl）和统一阴影

统一UI弹窗阴影效果优化

✅ 在lib/ui-theme-colors-light.ts中增强浅色模式阴影：shadow-[0_35px_110px_rgba(15,23,42,0.25)] shadow-slate-900/20
✅ 在lib/ui-theme-colors-dark.ts中增强深色模式阴影：shadow-[0_45px_130px_rgba(0,0,0,0.75)] shadow-black/50
✅ 确保所有使用统一Modal组件的弹窗都有阴影效果
✅ 从baseModalStyles.content中移除重复的阴影定义，统一在主题颜色中定义

技术实现：

上传错误修复：添加空值检查，优化验证逻辑
个人中心：使用useRouter的back()方法，添加Header组件
弹窗统一：将所有自定义弹窗改为使用components/ui/Modal组件
阴影优化：在主题颜色配置中增强阴影效果，确保所有弹窗都有阴影

✅ 2025-11-25 · 用户信息同步功能

用户信息同步到素材

✅ 管理员修改用户信息后，该用户上传的所有素材信息自动同步更新
✅ 当用户名发生变化时，自动更新该用户所有素材的authorName字段
✅ 使用数据库事务确保数据一致性
✅ 前端显示同步成功提示（"用户信息已更新，素材信息已同步"）

技术实现：

在/api/admin/users/update API中实现同步逻辑
使用Prisma事务（$transaction）确保用户更新和素材更新原子性
检测用户名变化：username !== undefined && username !== oldUser.username
使用updateMany批量更新该用户的所有素材：tx.material.updateMany({ where: { userId }, data: { authorName: username } })
返回materialsUpdated标志，前端根据此标志显示相应提示

代码位置：

后端：app/api/admin/users/update/route.ts（第122-128行）
前端：app/admin/_hooks/useUserOperations.ts（第75-99行）

✅ 2025-11-25 · 性能监控导出CSV功能

CSV导出功能

✅ 在系统监控页面添加"导出CSV"按钮
✅ 导出包含所有监控数据：
- 系统概览（总用户数、活跃用户、总素材数、本月新用户、本月新素材）
- 用户增长趋势（最近12个月/30天）
- 素材上传趋势（最近12个月/30天）
- 部门分布统计
- 权限分布统计
- 最近活动记录（最近10条）
- 系统信息（站点名称、注册功能状态、数据库状态、运行时间等）
✅ 支持Excel正确显示中文（添加UTF-8 BOM）
✅ 文件名包含导出日期，格式：系统监控数据_YYYY-MM-DD.csv
✅ 同时优化了MonitorTab组件和独立监控页面（app/admin/monitor/page.tsx）

技术实现：

使用原生JavaScript实现CSV生成，无需额外依赖库
自动处理中文和特殊字符（使用双引号包裹）
使用Blob API创建下载文件
添加UTF-8 BOM（\uFEFF）确保Excel正确显示中文
导出成功后显示toast提示

✅ 2025-11-25 · 系统监控交互增强

系统监控数据点击跳转

✅ 总用户数、活跃用户、本月新用户可点击跳转到用户管理页面
✅ 总素材数、本月新素材可点击跳转到素材列表页面
✅ 添加了hover效果（阴影、缩放、边框高亮）和点击提示（title属性）
✅ 同时优化了MonitorTab组件和独立监控页面（app/admin/monitor/page.tsx）

当月上传趋势显示

✅ 在素材上传趋势卡片标题旁增加"当月上传"数字显示
✅ 显示当月（最后一条数据）的上传数量
✅ 使用紫色高亮显示，与趋势图颜色一致

技术实现：

使用useRouter实现页面跳转
卡片添加cursor-pointer和hover样式
使用useMemo计算当月上传数量（取数组最后一项）

✅ 已完成的修复

1. 类型定义统一化

✅ 创建了 types.ts 统一管理所有类型定义
✅ 移除了 page.tsx 中的重复类型定义（User, Material, Category, Scene, Platform, Invitation, UserTreeNode, DepartmentNode, DepartmentUserGrouping）
✅ 移除了 TemplateManager.tsx 中的重复 ToastFn 定义
✅ 添加了 AdminTab 类型统一管理 Tab 类型
✅ 添加了 DashboardData 接口用于监控仪表板数据
✅ 修复了 TemplateManager.tsx 中 DragHoverState 的类型错误（fallback 对象的 position 属性需要明确类型为 'before' | 'after'）
✅ 修复了 TemplateFieldsEditor.tsx 中 onFieldDragOver 回调签名，添加缺失的 surface 参数
✅ 修复了 UsersTab.tsx 中 showTransferButton 在使用前未定义的问题，将其改为 useMemo 并移到使用前定义

2. UI 样式统一化 - 三层架构重构

✅ 创建了三层架构的样式系统：
- 基础层：lib/ui-styles-base.ts - 包含布局、大小、动画等非颜色样式
- 颜色层：lib/ui-theme-colors-light.ts / dark.ts - 仅包含颜色配置
- 组合层：lib/ui-styles-composer.ts - 自动组合基础样式和颜色主题
- 导出层：lib/ui-styles-light.ts / dark.ts - 最终导出的样式（由组合器生成）
✅ 创建了 lib/hooks/useThemeStyles.ts - 主题感知的样式 Hook
- useThemeStyles() - 根据当前主题自动返回对应的样式配置
- useTheme() - 获取当前主题状态
✅ 保持了向后兼容性：
- 原有的 lib/ui-styles.ts 仍然保留（包含 dark: 前缀的样式）
- 新组件推荐使用 useThemeStyles() Hook
- 旧组件可以继续使用原有导入，逐步迁移

核心优势：

✅ 统一视觉设计：修改布局、大小、动画时，只需修改 ui-styles-base.ts 一处，浅色和深色模式自动同步
✅ 独立颜色适配：颜色配置完全分离，可以独立调整浅色或深色模式的颜色
✅ 易于维护：清晰的职责分离，修改时不会遗漏或出错
✅ 类型安全：TypeScript 类型检查确保配置正确

修改指南：

修改布局/大小/动画 → 修改 lib/ui-styles-base.ts（一处修改，两套主题自动同步）
修改浅色模式颜色 → 修改 lib/ui-theme-colors-light.ts
修改深色模式颜色 → 修改 lib/ui-theme-colors-dark.ts

架构文档： 详见 docs/guides/UI_STYLES_ARCHITECTURE.md

使用示例：

'use client'
import { useThemeStyles } from '@/lib/ui-styles'

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

迁移进度：

✅ 基础 UI 组件已迁移：
- LoadingState.tsx - 使用 useThemeStyles() 和 useTheme()
- ErrorState.tsx - 使用 useThemeStyles() 和 useTheme()
- EmptyState.tsx - 使用 useTheme() 根据主题选择文字颜色
✅ Tab 组件迁移（全部完成）：
- MaterialsTab.tsx - 完全迁移到新样式系统，移除了所有 dark: 前缀
- CategoriesTab.tsx - 完全迁移到新样式系统，移除了所有 dark: 前缀
- InvitationsTab.tsx - 完全迁移到新样式系统，移除了所有 dark: 前缀
- DepartmentsTab.tsx - 完全迁移到新样式系统，移除了所有 dark: 前缀
- UsersTab.tsx - 完全迁移到新样式系统，移除了所有 dark: 前缀
- MonitorTab.tsx - 完全迁移到新样式系统，移除了所有 dark: 前缀
✅ 其他组件迁移（已完成）：
- TemplateManager.tsx - 完全迁移到新样式系统，移除了所有 dark: 前缀
- page.tsx - 完全迁移到新样式系统，移除了所有 dark: 前缀
- AppearanceSettingsPanel.tsx - 完全迁移到新样式系统，移除了所有 dark: 前缀

3. UI 样式统一化（历史）

✅ 修复了 card-apple 类名，改为使用 cardStyles.base
✅ 统一了边框颜色：border-gray-* → border-slate-*（与设计系统一致）
✅ Admin 目录中的 text-gray-* / bg-gray-* / border-gray-* 类已全部替换为 slate 系列，浅色与深色模式的视觉基调保持一致

🔍 发现的问题和建议

1. 代码结构问题

问题：`page.tsx` 文件过大（3795 行）

影响：

难以维护和调试
代码复用性差
性能可能受影响（组件过大）

建议：

✅ 已创建 MonitorTab.tsx 组件
✅ 已拆分 UsersTab.tsx（用户管理）
✅ 已拆分 DepartmentsTab.tsx（架构管理）
⏳ 继续拆分其他 Tab 组件：
- ✅ CategoriesTab.tsx - 分类管理
- ✅ InvitationsTab.tsx - 邀请管理
- ✅ MaterialsTab.tsx - 素材管理
- ✅ TemplateManager.tsx：已提取 Header / Built-in Grid / Custom Templates 等 UI 子组件，为后续拆出编辑器面板铺路
- ✅ TemplateManager 编辑弹窗：基础信息、预设选择、JSON 高级配置抽象为 TemplateBasicsForm + TemplateAdvancedConfigPanel，编辑逻辑逐步下沉
- ✅ TemplateManager 字段区、底部操作：TemplateFieldsEditor 承载字段配置 + 拖拽 UI，TemplateEditorFooter 统一处理提示与按钮状态
- ✅ TemplateManager 预览面板：TemplatePreviewPanel 独立封装上传预览 UI 与 DnD 状态，主组件仅处理回调

问题：状态管理分散

当前状态：

每个 Tab 的状态都在主组件中管理
状态之间可能存在不必要的依赖

建议：

✅ UsersTab / DepartmentsTab 已将本地 UI 状态与交互逻辑下沉到各自组件
只保留共享状态在主组件（如 activeTab, toast）

4. UI 统一性问题

问题：部分地方仍使用旧的样式类

发现：

✅ 基础文字/背景/边框色已统一为 slate 系列（含浅色与深色）
✅ 深浅色样式已分离为两套独立配置，解决适配问题
⏳ 部分按钮样式未使用 buttonStyles.*（建议逐步迁移到 useThemeStyles()）
⏳ 部分输入框仍未使用 inputStyles.*（建议逐步迁移到 useThemeStyles()）

建议：

全局搜索替换 gray- → slate-（在 admin 目录中）
⏳ 确保所有按钮都使用 buttonStyles.*（InvitationsTab、CategoriesTab、MaterialsTab、UsersTab、DepartmentsTab ✅；其它 Tab 持续中）
⏳ 确保所有输入框都使用 inputStyles.*（DepartmentsTab 重命名输入已调整）
✅ 补充 buttonStyles.success 以覆盖绿色状态按钮场景
✅ 新增 buttonModifiers（compact / compactXs / icon / block）辅助类，方便统一尺寸与布局
✅ MaterialsTab 搜索操作、卡片操作按钮已统一到 buttonStyles + buttonModifiers，并将 <img> 替换为 next/image
✅ UsersTab 搜索清空与用户操作按钮统一引用 buttonStyles + buttonModifiers
✅ DepartmentsTab 搜索清空、操作按钮接入 buttonStyles + buttonModifiers; 新增 inputModifiers 并应用到重命名输入
✅ TemplateManager 顶部搜索、预制/自定义模板动作按钮接入设计系统；新增 buttonModifiers.pill
✅ TemplateManager 基础信息 / JSON 配置表单统一使用 inputStyles + inputModifiers，并抽离复用组件
✅ TemplateManager 字段配置 / 底部操作按钮接入设计系统（字段编辑区统一控件样式，弹窗底部按钮使用 buttonStyles.secondary/primary + buttonModifiers.compact）
✅ TemplateManager 预览面板 UI 与拖拽交互抽象为 TemplatePreviewPanel，复用设计系统控件
✅ 清理 TemplatePreviewPanel 与 page.tsx 残留的 gray-* 渐变/分隔线/焦点样式，统一替换为 slate-* 调色
✅ page.tsx 移除历史 Invitations UI、状态与数据请求，统一由 InvitationsTab 自主管理
✅ page.tsx 移除重复的监控仪表板代码，统一使用 MonitorTab 组件

3. 逻辑优化建议

问题：数据获取逻辑重复

当前：

✅ useDataFetch Hook 已抽离 loadUsersData / fetchDepartments / fetchTabData，主页面只关心状态驱动
⏳ 更进一步的缓存（React Query / SWR）尚未落地

建议：

后续可引入 React Query 或 SWR 进行跨 Tab 缓存与自动刷新
或者在各 Tab 内使用独立数据源，减少主页面耦合

问题：权限检查分散

当前：

权限检查在多个地方重复
canManageUser 等函数在主组件中定义

建议：

✅ 已创建 usePermissions Hook，统一 canManageUser / 超管判定等权限逻辑
后续可将其他权限相关逻辑继续提取到工具函数或 Hook 中

4. 性能优化建议

问题：大量 useMemo 和 useCallback

当前：

主组件中有很多 useMemo 和 useCallback
某些计算可能不需要缓存

建议：

✅ 审查了每个 useMemo 和 useCallback 的必要性
- departmentCollator - 使用 useMemo 合理（创建 Intl.Collator 对象）
- userLookup - 使用 useMemo 合理（从数组创建 Map，避免重复计算）
- fetchData, renameDepartment, createDepartment, deleteDepartment, findDepartmentManagers - 使用 useCallback 合理（作为 props 传递给子组件）
✅ 创建了 _utils/api.ts 统一处理 API 错误，减少了重复的错误处理代码
⏳ 将复杂的计算逻辑移到子组件中
✅ 使用 React.memo 优化子组件渲染（UserTree 已实现）

问题：模态框状态管理

当前：

✅ 分类/场景/平台新增、素材编辑相关模态已移交给各自 Tab 组件，page.tsx 清理全部遗留状态与 UI
✅ 新增 useModalState Hook（app/admin/_hooks/useModalState.ts），统一管理用户编辑/转移最高权限模态的开合与状态，移除散落的 showPasswordModal、editingUser 布尔控制
⏳ 用户信息编辑、转移最高权限 UI 仍托管在 page.tsx，可进一步下放到 UsersTab

建议：

为剩余模态编写统一的模态管理 hook
或者继续将模态迁移到对应的 Tab/组件内部

5. 代码质量建议

建议：添加错误边界

✅ 新增 TabErrorBoundary 组件（app/admin/_components/TabErrorBoundary.tsx），并在 page.tsx 为各个 Tab 包裹，提供统一的 fallback + 重试
⏳ 可进一步将 TabErrorBoundary 提炼到全局组件库，或为特定 Tab 定制更详细的错误提示

建议：添加加载状态统一管理

✅ 创建统一的加载状态组件（LoadingState、ErrorState、EmptyState）
✅ 统一错误提示样式，替换所有重复的加载/错误 UI
✅ MonitorTab、MaterialsTab、page.tsx 已统一使用新的状态组件

建议：提取公共逻辑

✅ 创建 hooks/useToast.ts 统一管理 Toast（page.tsx 已接入）
✅ 创建 hooks/useDataFetch.ts 统一管理数据获取
✅ 创建 _utils/api.ts 统一处理 API 错误响应和类型安全
- parseErrorResponse() - 安全解析错误响应
- parseSuccessResponse() - 安全解析成功响应
- apiRequest() - 统一的 API 请求函数
- getErrorMessage() - 获取错误消息的辅助函数
✅ 提取表单验证逻辑到工具函数
- 创建了 _utils/validators.ts 统一管理表单验证
- validateNotEmpty() - 验证非空字符串
- validateDepartmentName() - 验证部门名称
- validateEmail() - 验证邮箱格式
- validateFieldKey() - 验证字段键名（标识符规则）
- validateUniqueKeys() - 验证字段键名唯一性
- validateTemplateName() - 验证模板名称
- validatePassword() - 验证密码
- combineValidationResults() - 组合多个验证结果
- page.tsx 和 TemplateManager.tsx 已使用新的验证函数
✅ 创建格式化工具函数
- 创建了 _utils/formatters.ts 统一管理格式化逻辑
- formatDateTime() - 格式化日期时间（完整格式）
- formatDate() - 格式化日期（仅日期部分）
- formatTime() - 格式化时间（仅时间部分）
- formatDateTimeShort() - 格式化日期时间（简短格式）
- formatDateTimeLocale() - 使用本地化格式格式化日期时间
- formatRelativeTime() - 格式化相对时间
- formatFileSize() - 格式化文件大小
- formatNumber() - 格式化数字（添加千位分隔符）
- formatPercent() - 格式化百分比
- MonitorTab.tsx、InvitationsTab.tsx、UserEditModal.tsx、TemplateManager.tsx 已使用新的格式化函数
✅ 提取用户操作逻辑到 Hook
- 创建了 _hooks/useUserOperations.ts 统一管理用户相关操作
- updateUser() - 更新用户信息
- deleteUser() - 删除用户
- toggleDownload() - 切换下载权限
- toggleActive() - 切换激活状态
- setRole() - 设置用户角色
- transferSuperAdmin() - 转移最高权限
- page.tsx 已使用新的 Hook，代码更简洁
✅ 提取部门操作逻辑到 Hook
- 创建了 _hooks/useDepartmentOperations.ts 统一管理部门相关操作
- createDepartment() - 创建部门
- deleteDepartment() - 删除部门
- renameDepartment() - 重命名部门
- page.tsx 已使用新的 Hook，移除了重复的部门操作代码，代码更简洁
- 创建了 _utils/validators.ts 统一管理表单验证
- validateNotEmpty() - 验证非空字符串
- validateDepartmentName() - 验证部门名称
- validateEmail() - 验证邮箱格式
- validateFieldKey() - 验证字段键名（标识符规则）
- validateUniqueKeys() - 验证字段键名唯一性
- validateTemplateName() - 验证模板名称
- validatePassword() - 验证密码
- combineValidationResults() - 组合多个验证结果
- page.tsx 和 TemplateManager.tsx 已使用新的验证函数

6. 类型安全建议

问题：使用 `any` 类型

发现：

session?.user as any 多处使用
dashboardData 使用 any 类型

建议：

✅ 定义完整的 Session 类型（SessionUser 接口）
✅ 使用 DashboardData 类型替代 any（已在 types.ts 中定义）
✅ 添加类型断言函数（getSessionUser）
✅ 定义 API 响应类型（ApiErrorResponse, ApiSuccessResponse）
✅ 移除 page.tsx 中所有 as any 使用
✅ 更新 AppearanceSettingsPanel 使用 SessionUser 类型

7. 可访问性建议

建议：添加 ARIA 标签

✅ 为 Tab 导航添加了完整的 ARIA 标签（role="tablist", role="tab", role="tabpanel"）
✅ 为所有 Tab 按钮添加了 aria-selected, aria-controls, id 属性
✅ 为返回主页按钮和关闭 Toast 按钮添加了 aria-label
✅ 为 Toast 通知添加了 role="status" 和 aria-live="polite"
✅ 添加了键盘导航支持（Enter 和 Space 键）
✅ 添加了焦点样式（focus:outline-none focus:ring-2）
⏳ 继续为其他交互元素添加 ARIA 标签和键盘支持

8. 测试建议

建议：添加单元测试

为工具函数添加测试
为权限检查逻辑添加测试
为数据转换逻辑添加测试

📋 下一步行动计划

注意：详细的优化计划和优先级已移至 优化计划与优先级.md，请参考该文档进行后续开发。

当前阶段：基础组件与UI统一

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

✅ 创建统一弹窗组件（components/ui/Modal.tsx）
- ✅ 使用三层架构设计（基础层、颜色层、组合层）
- ✅ 提供 useModal Hook（hooks/useModal.ts）
- ✅ 支持多种尺寸（small, medium, large, xlarge, fullscreen）
- ✅ 支持ESC键关闭、点击遮罩关闭
- ✅ 完整的ARIA标签和键盘导航支持
- ✅ 替换所有浏览器原生弹窗（confirm/alert/prompt）
- ✅ 创建了 ConfirmDialog、AlertDialog、PromptDialog 组件
- ✅ 创建了 DialogProvider 和 useDialog Hook
- ✅ 替换了所有 admin 组件、首页、分享页面中的原生弹窗
✅ 素材预览面板统一
- ✅ 创建了 MaterialPreviewModal 组件
- ✅ 使用统一弹窗组件
- ✅ 统一退出逻辑（ESC键、点击遮罩、关闭按钮）
- ✅ 使用三层架构样式系统
✅ 首页素材展示响应式优化
- ✅ 修复卡片比例固定问题（使用 aspect-[3/4] 替代固定高度 h-[400px]）
- ✅ 添加容器边距（px-4 sm:px-6 lg:px-8）避免卡片贴到浏览器边界
- ✅ 使用三层架构样式系统（useThemeStyles() 和 cardStyles.base）
- ✅ 优化图片 sizes 属性，提升响应式性能
- ✅ 统一使用 slate 系列颜色，确保深浅色模式适配
✅ 首页UI统一到三层架构（完全完成）
- ✅ 迁移了主要按钮样式（上传按钮、筛选按钮）
- ✅ 迁移了搜索输入框样式
- ✅ 迁移了筛选弹窗中的所有按钮样式
- ✅ 迁移了筛选弹窗容器样式
- ✅ 迁移了筛选弹窗关闭按钮样式
- ✅ 将所有 gray 系列替换为 slate 系列
- ✅ 统一文本颜色（text-gray-* → text-slate-*）
- ✅ 统一背景颜色（bg-gray-* → bg-slate-*）
- ✅ 统一边框颜色（border-gray-* → border-slate-*）
- ✅ 统一分页按钮样式
- ✅ 统一分享弹窗样式
- ✅ 使用 Tag 组件替换原有的标签样式
✅ 通用组件库创建
- ✅ 创建了 Badge 组件（components/ui/Badge.tsx）
  - 支持多种变体（primary、success、warning、danger）
  - 支持多种尺寸（sm、md、lg）
  - 使用三层架构样式系统
- ✅ 创建了 Tag 组件（components/ui/Tag.tsx）
  - 支持多种颜色（blue、green、orange、purple、indigo、pink、cyan）
  - 支持多种尺寸（sm、md、lg）
  - 支持点击事件
  - 已在首页素材卡片中应用
- ✅ 创建了 Button 组件（components/ui/Button.tsx）
  - 支持多种变体（primary、secondary、ghost、danger、success）
  - 支持多种尺寸（sm、md、lg）
  - 支持加载状态（loading）
  - 支持全宽（fullWidth）
  - 使用 forwardRef 支持 ref 传递
- ✅ 创建了 Input 组件（components/ui/Input.tsx）
  - 支持错误状态（error）
  - 支持多种尺寸（sm、md、lg）
  - 支持全宽（fullWidth）
  - 使用 forwardRef 支持 ref 传递
- ✅ 创建了 Card 组件（components/ui/Card.tsx）
  - 支持多种变体（base、hover、large、flat、rainbow、glass、neon）
  - 支持自定义padding
  - 使用三层架构样式系统
- ✅ 创建了 Avatar 组件（components/ui/Avatar.tsx）
  - 支持图片头像和文字头像（显示用户名首字母）
  - 支持多种尺寸（xs、sm、md、lg、xl）
  - 支持点击事件和键盘导航
  - 使用三层架构样式系统
⏳ 深浅色主题适配优化（1.6）- 进行中
- ✅ 为所有新创建和重构的文件添加了文件头注释
  - 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 等直接样式
  - 移除了不再使用的 getInitials 函数
- ✅ 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，所有颜色都使用低饱和度炫彩元素

优先级 2：数据一致性与核心功能 5. ✅ 用户信息修改后同步素材信息

✅ API 端已实现：当用户名变化时，使用事务同步更新该用户所有素材的 authorName
✅ 前端已处理：useUserOperations.updateUser 处理 materialsUpdated 返回值并显示提示
✅ 使用事务确保数据一致性
✅ 错误处理和回滚机制已实现

✅ 模板管理整合到上传和分类
- ✅ 创建公共 API 端点 /api/upload-templates 获取启用的模板列表（不需要管理员权限）
- ✅ 修改 UploadModal：将"素材类型"改为"素材模板"，从 API 拉取模板列表
- ✅ 实现动态字段渲染：选择模板后根据模板字段动态生成表单（支持 text、textarea、number、select、checkbox、radio、date 等类型）
- ✅ 根据字段的 layoutWidth 属性支持半行/整行布局
- ✅ 修改上传逻辑：提交模板ID和字段值到数据库（存储在 metadata 和 templateId 字段）
- ✅ 添加"添加到分类"字段属性
  - 在数据库 schema 中添加 addToCategory 字段到 UploadField 模型
  - 在字段编辑器中添加"添加到分类"勾选框（仅 select 类型显示）
  - 更新所有相关类型定义和 API 以支持该字段
- ✅ 创建模板分类 API /api/template-categories：从模板管理中提取所有 addToCategory=true 且 type='select' 的字段选项
- ✅ 创建模板分类管理 API /api/template-categories/[fieldKey]：支持获取和更新特定字段的分类选项
- ✅ 修改分类管理界面：显示模板分类卡片，提供编辑、添加、删除选项的功能，保留原有分类管理用于向后兼容
- ⏳ 模板管理面板逻辑检查（待后续完善）
✅ 首页类型筛选TAG系统（2.3）
- ✅ 创建 /api/material-types API：从模板管理中提取 materialType 字段的 optionsStatic 选项
- ✅ 修改首页：将固定的 materialTypes 数组改为从API动态获取
- ✅ 实现TAG形式的类型筛选UI：在搜索框下方显示TAG筛选
- ✅ 第一个TAG是"全部"，点击可清除筛选
- ✅ 使用 Tag 组件和 accentStyles 实现低饱和度炫彩元素样式
- ✅ 支持多种颜色循环使用（blue、green、orange、purple、pink、cyan）
- ✅ 选中状态使用 ring 样式突出显示，未选中状态使用透明度变化
- ✅ 支持点击切换筛选，提升用户体验
✅ 上传素材进度优化（3.1）
- ✅ 添加 uploadComplete 状态标识上传完成
- ✅ 进度100%后立即显示完成状态（进度条变绿色，显示"上传完成"）
- ✅ 添加300ms延迟确保数据保存完成后再关闭弹窗
- ✅ 优化用户体验：显示"✓ 上传成功，正在关闭..."提示
- ✅ 修复所有错误处理路径，确保状态正确重置
- 将模板系统串起前后端
✅ 素材卡片信息优化（3.2）
- ✅ 移除了"作者："文字，直接显示作者名
- ✅ 使用Avatar组件在作者名前显示头像
- ✅ 移除了文件名和文件大小显示
- ✅ 将上传时间移到预览图右上角，默认隐藏，hover时显示
- ✅ 优化了卡片布局，信息更简洁清晰
✅ 素材卡片标签系统（3.3）

✅ 创建了素材排行榜API（/api/material-rankings）
✅ 实现了下载榜、点赞榜、精品榜三种排行榜
✅ 在首页素材卡片上显示排行榜标签
✅ 使用Badge组件，样式统一美观
✅ 标签显示在分类标签组的最前面，视觉突出

✅ 素材卡片大小设置和瀑布流（3.4）

✅ 添加了横向滑块控制卡片大小（5个级别）
✅ 实现了网格和瀑布流两种布局模式
✅ 初始加载24个素材，使用IntersectionObserver实现懒加载
✅ 滚动到底部自动加载更多（每次加载24个）
✅ 筛选条件改变时自动重置显示数量
✅ 用户偏好保存到localStorage

✅ 上传面板进度条位置优化

✅ 将上传进度条移到"素材文件"上传区域下方
✅ 将错误信息和成功提示移到"素材文件"上传区域下方
✅ 优化用户体验，进度和提示信息更贴近上传操作区域

✅ 多预览图上传功能（3.5）

✅ 支持上传最多5张预览图
✅ 第一张预览图自动设为封面
✅ 支持多文件选择和拖拽上传
✅ 预览图列表显示，可单独删除
✅ 多预览图URLs存储在metadata中

✅ 用户头像设置功能（4.1）

✅ 创建了头像上传API（/api/user/avatar）
✅ 用户可以在个人中心上传头像
✅ 头像自动压缩和优化
✅ 更新了auth配置，在session中包含avatar
✅ Header组件中的Avatar组件支持显示用户头像

✅ 个人中心功能（4.2）

✅ 在Header菜单中添加了"个人中心"选项
✅ 创建了个人中心页面（/profile）
✅ 显示用户基本信息和上传的素材
✅ 支持在个人中心上传和修改头像

✅ 菜单调整优化（4.3）

✅ 将"系统设置"改名为"管理"，更换图标（使用滑块图标）
✅ 将"外观设置"移到头像菜单中，添加调色板图标
✅ 优化菜单结构，使功能分类更清晰

详细计划：请查看 优化计划与优先级.md

📝 代码规范建议

命名规范

组件文件：PascalCase（如 UsersTab.tsx）
Hook 文件：camelCase with use prefix（如 usePermissions.ts）
工具函数：camelCase（如 formatDate.ts）
类型文件：types.ts 或 types/index.ts

文件组织

app/admin/
├── _components/
│   ├── types.ts              # 类型定义
│   ├── MonitorTab.tsx        # 监控仪表板
│   ├── UsersTab.tsx          # 用户管理
│   ├── DepartmentsTab.tsx    # 架构管理
│   ├── CategoriesTab.tsx     # 分类管理
│   ├── InvitationsTab.tsx    # 邀请管理
│   ├── MaterialsTab.tsx      # 素材管理
│   ├── TemplateManager.tsx   # 模板管理
│   └── AppearanceSettingsPanel.tsx
├── _hooks/                   # 自定义 hooks
│   ├── useToast.ts
│   ├── usePermissions.ts
│   └── useDataFetch.ts
├── _utils/                   # 工具函数
│   ├── validators.ts
│   └── formatters.ts
└── page.tsx                  # 主页面（简化后）

🎯 最终目标

代码可维护性：每个组件职责单一，易于理解和修改
代码复用性：公共逻辑提取到 hooks 和工具函数
类型安全：完整的 TypeScript 类型定义，减少运行时错误
UI 一致性：统一使用设计系统，确保视觉一致性
性能优化：减少不必要的渲染，优化数据获取
用户体验：流畅的交互，清晰的错误提示

36 KiB Raw Blame History Unescape Escape

Admin 页面优化建议和问题修复记录

✅ 2025-11-25 · 排行榜缩略按钮拖动功能

排行榜缩略按钮拖动

✅ 2025-11-25 · 颜色系统完全统一与功能优化

颜色系统完全统一（主要页面）

✅ 颜色系统完全统一（组件文件）

管理页面功能优化

数据库迁移与清理

✅ 2025-11-25 · Bug修复与UI优化

上传文件500错误修复

个人中心返回按钮

用户管理弹窗统一UI

统一UI弹窗阴影效果优化

✅ 2025-11-25 · 用户信息同步功能

用户信息同步到素材

✅ 2025-11-25 · 性能监控导出CSV功能

CSV导出功能

✅ 2025-11-25 · 系统监控交互增强

系统监控数据点击跳转

当月上传趋势显示

✅ 已完成的修复

1. 类型定义统一化

2. UI 样式统一化 - 三层架构重构

3. UI 样式统一化（历史）

🔍 发现的问题和建议

1. 代码结构问题

问题：page.tsx 文件过大（3795 行）

问题：状态管理分散

4. UI 统一性问题

问题：部分地方仍使用旧的样式类

3. 逻辑优化建议

问题：数据获取逻辑重复

问题：权限检查分散

4. 性能优化建议

问题：大量 useMemo 和 useCallback

问题：模态框状态管理

5. 代码质量建议

建议：添加错误边界

建议：添加加载状态统一管理

建议：提取公共逻辑

6. 类型安全建议

问题：使用 any 类型

7. 可访问性建议

建议：添加 ARIA 标签

8. 测试建议

建议：添加单元测试

📋 下一步行动计划

当前阶段：基础组件与UI统一

📝 代码规范建议

命名规范

文件组织

🎯 最终目标

36 KiB

Raw Blame History

问题：`page.tsx` 文件过大（3795 行）

问题：使用 `any` 类型