WuYongJie/flnxi-Wu
WuYongJie/flnxi-Wu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
flnxi-Wu/docs/archive/更新日志.md
WuYongJie 63ec6b7dfb fix: 修复排行榜按钮消失、tag排序和输入框浅色模式问题 
1. 排行榜悬浮窗关闭后小按钮消失问题
   - 修复面板居中模式关闭时按钮位置错误
   - 保存并恢复按钮的居中状态

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

3. 上传弹窗输入框浅色模式文字不可见
   - 添加 text-slate-900 确保浅色模式下文字可见
   - 添加 placeholder 样式确保占位符正确显示
2025-12-14 21:41:29 +08:00

32 KiB
Raw Blame History

🧾 2025-12-03 · 「NAS 一键部署 & Harbor 镜像」版本 🚢

⚙️ 一键安装与卸载脚本

  • ✅ scripts/tools/install.sh
    • NAS 场景一键安装：自动检测 Docker 权限并在需要时使用 sudo
    • 可选择“测试 / 正式”环境，对应 Harbor pro-test / pro-latest 标签
    • 自动生成 .env.production，支持自定义初始管理员邮箱与密码
    • 安装结束自动提示访问地址，减少人工配置步骤
  • ✅ 新增 scripts/tools/uninstall.sh
    • 一键停止/删除容器、卷、网络，可选清理 .env.production
    • 支持 docker system prune 清理镜像缓存，方便反复测试

🗂 环境与配置收敛

  • ✅ 合并 .env 配置，统一生成 .env.production 与 config-bianliang.env
  • ✅ app/api/system/init/route.ts 读取 INIT_ADMIN_EMAIL/PASSWORD，杜绝硬编码账号
  • ✅ docker-compose.prod.yml
    • 全量改用 harbor.flnxi.com/flnxi 镜像（app/postgres/minio/mc）
    • 默认 S3 Bucket 改为 flnxi-materials，Public Domain 自动拼接 NAS 内网 IP
    • 容器名称统一改为 flnxi-*

🛳 Harbor 镜像管理

  • ✅ 新增 scripts/tools/push-to-harbor.ps1
    • 自动加载基础镜像（优先本地→Harbor→离线包）
    • 构建完成后验证镜像、登录 Harbor、推送 pro-latest
  • ✅ 新增文档 docs/guides/HARBOR_ENV_CONFIG.md，说明 pro-test (私有) / pro-latest (公开) 策略
  • ✅ 镜像构建默认启用 Prisma 引擎缓存与 npm 镜像，兼容 NAS 无外网场景

🧩 功能与体验同步

  • ✅ 素材主人变更 API (app/api/admin/materials/transfer-owner/route.ts)
    • 当素材转移到个人时同步 authorName、userId
    • 转移到团队仍保持原作者信息
  • ✅ components/MaterialPreviewModal.tsx
    • 去除“素材 ID / DNZ0128”冗余信息，弹窗更聚焦
  • ✅ README / NAS 指南同步新增的一键部署说明

🧾 2025-11-25 · 「Bug修复与UI优化」版本 🐛

🐛 Bug修复

修复内容：

  • ✅ 修复上传文件500错误
    • 修复视频类型预览图处理逻辑，添加空值检查
    • 优化预览图验证逻辑，支持多预览图场景
    • 确保所有错误都被正确捕获和返回
  • ✅ 个人中心添加返回按钮
    • 使用统一UI按钮样式
    • 添加Header组件，保持页面一致性
    • 返回按钮使用统一UI样式系统
  • ✅ 用户管理弹窗统一UI
    • 将UserEditModal改为使用统一Modal组件
    • 将TransferSuperAdminModal改为使用统一Modal组件
    • 将InvitationsTab的创建邀请弹窗改为使用统一Modal组件
    • 所有弹窗现在都有毛玻璃效果和统一阴影
  • ✅ 统一UI弹窗阴影效果优化
    • 确保所有弹窗都有阴影效果
    • 优化浅色和深色模式的阴影配置
    • 增强阴影可见度，提升视觉层次

改进效果：

  • 上传功能更稳定，错误处理更完善
  • 个人中心页面更完整，导航更便捷
  • 所有弹窗UI统一，视觉效果更一致
  • 阴影效果更明显，提升视觉层次感

🧾 2025-11-25 · 「用户信息同步」版本 🔄

🔄 用户信息同步功能

功能说明：

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

技术实现：

  • 在/api/admin/users/update API中实现同步逻辑
  • 使用Prisma事务（$transaction）确保用户更新和素材更新原子性
  • 检测用户名变化，仅在有变化时更新素材
  • 返回materialsUpdated标志，前端根据此标志显示相应提示

改进效果：

  • 数据一致性得到保障
  • 管理员修改用户信息后，素材信息自动保持同步
  • 用户体验更好，有明确的同步成功提示

🧾 2025-11-25 · 「性能监控导出CSV」版本 📊

📥 性能监控导出CSV功能

功能说明：

  • ✅ 在系统监控页面添加"导出CSV"按钮
  • ✅ 导出包含所有监控数据：
    • 系统概览（总用户数、活跃用户、总素材数等）
    • 用户增长趋势（最近12个月/30天）
    • 素材上传趋势（最近12个月/30天）
    • 部门分布统计
    • 权限分布统计
    • 最近活动记录
    • 系统信息（站点名称、注册功能状态等）
  • ✅ 支持Excel正确显示中文（添加BOM）
  • ✅ 文件名包含导出日期，方便归档
  • ✅ 同时优化了MonitorTab组件和独立监控页面

技术实现：

  • 使用原生JavaScript实现CSV生成，无需额外依赖
  • 自动处理中文和特殊字符
  • 使用Blob API创建下载文件
  • 添加UTF-8 BOM确保Excel正确显示中文

改进效果：

  • 方便数据分析和存档
  • 支持离线查看历史数据
  • 便于生成报表和报告

🧾 2025-11-25 · 「系统监控交互增强」版本 📈

📊 系统监控交互增强

优化内容：

  • ✅ 系统监控数据卡片可点击跳转
    • 总用户数、活跃用户、本月新用户 → 跳转到用户管理页面
    • 总素材数、本月新素材 → 跳转到素材列表页面
  • ✅ 添加hover效果和点击提示
  • ✅ 在素材上传趋势卡片前增加"当月上传趋势"显示
  • ✅ 同时优化了MonitorTab组件和独立监控页面

改进效果：

  • 数据可操作性更强，管理员可以快速查看详细数据
  • 当月上传趋势一目了然
  • 交互体验更流畅，hover效果清晰提示可点击

🧾 2025-11-25 · 「菜单调整优化」版本 🎨

📋 菜单调整优化

优化内容：

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

改进效果：

  • 菜单命名更简洁直观
  • 外观设置更容易访问
  • 管理员功能（管理）和用户功能（外观设置）区分更明确

🧾 2025-11-25 · 「多预览图上传、用户头像设置和个人中心」版本 🎨

🖼️ 多预览图上传功能

功能说明：

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

技术实现：

  • 修改了UploadModal组件，将单张预览图改为数组存储
  • 修改了上传API，支持处理多张预览图
  • 每张预览图都会压缩并转换为WebP格式
  • 第一张预览图作为主预览图（previewUrl），向后兼容

👤 用户头像设置功能

功能说明：

  • ✅ 用户可以在个人中心上传头像
  • ✅ 头像支持JPG、PNG、WebP格式
  • ✅ 头像自动压缩和优化（最大5MB，压缩到200KB以内）
  • ✅ 头像显示在Header组件和Avatar组件中
  • ✅ 钉钉登录用户头像自动同步（如果可用）

技术实现：

  • 创建了/api/user/avatar API端点
  • 头像上传到S3存储
  • 更新了auth配置，在session中包含avatar信息
  • Header组件中的Avatar组件支持显示用户头像

🏠 个人中心功能

功能说明：

  • ✅ 在Header菜单中添加了"个人中心"选项
  • ✅ 创建了个人中心页面（/profile）
  • ✅ 显示用户基本信息（用户名、邮箱、部门、手机等）
  • ✅ 显示用户上传的所有素材
  • ✅ 支持在个人中心上传和修改头像

技术实现：

  • 创建了/api/user/profile API获取用户信息
  • 创建了/api/user/materials API获取用户素材列表
  • 个人中心页面使用三层架构样式系统
  • 响应式设计，支持移动端

🧾 2025-11-25 · 「上传面板进度条位置优化」版本 🎨

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

优化内容：

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

改进效果：

  • 进度条和提示信息位置更合理，用户无需滚动到底部查看
  • 上传状态反馈更及时、更直观
  • 符合用户操作习惯，信息展示更集中

🧾 2025-11-25 · 「素材卡片大小设置和瀑布流布局」版本 🎨

🎚️ 素材卡片大小设置和瀑布流布局

1. 卡片大小滑块控制

  • ✅ 添加了横向滑块控制卡片大小（5个级别：极小、小、中、大、极大）
  • ✅ 滑块值保存到localStorage，用户偏好持久化
  • ✅ 根据卡片大小动态调整网格列数
    • 极小：2-6列
    • 小：2-5列
    • 中：1-4列（默认）
    • 大：1-3列
    • 极大：1-2列

2. 布局模式切换

  • ✅ 添加了网格和瀑布流两种布局模式切换
  • ✅ 布局模式保存到localStorage
  • ✅ 网格模式：使用CSS Grid，固定比例（3:4）
  • ✅ 瀑布流模式：使用CSS Columns，内容自然流动

3. 动态加载优化

  • ✅ 初始加载24个素材，减少首屏加载时间
  • ✅ 使用IntersectionObserver实现自动懒加载
  • ✅ 滚动到底部自动加载更多（每次加载24个）
  • ✅ 提供"加载更多"按钮作为备选方案
  • ✅ 筛选条件改变时自动重置显示数量

4. 性能优化

  • ✅ 瀑布流模式下图片使用width/height而非fill，避免布局抖动
  • ✅ 懒加载减少初始渲染压力，适合低性能NAS机器
  • ✅ 使用break-inside-avoid确保卡片在瀑布流中不被分割

5. 视觉体验

  • ✅ 滑块样式统一美观，符合Apple设计风格
  • ✅ 布局切换按钮使用图标+文字，清晰直观
  • ✅ 加载状态有明确的视觉反馈

🧾 2025-11-25 · 「素材卡片标签系统」版本 🎨

🏷️ 素材卡片标签系统

1. 排行榜标签显示

  • ✅ 创建了素材排行榜API（/api/material-rankings）
    • 下载榜：下载次数最多的前10个素材
    • 点赞榜：点赞次数最多的前10个素材
    • 精品榜：综合评分最高的前10个素材（下载数0.6 + 点赞数0.4）
  • ✅ 在首页素材卡片上显示排行榜标签
    • 精品榜：使用warning变体的Badge组件（橙色）
    • 下载榜：使用primary变体的Badge组件（蓝色）
    • 点赞榜：使用danger变体的Badge组件（红色）
  • ✅ 标签显示在分类标签组的最前面，视觉突出
  • ✅ 使用三层架构样式系统，符合统一UI设计

2. 视觉体验优化

  • ✅ 标签使用Badge组件，样式统一美观
  • ✅ 标签尺寸为sm，不会占用过多空间
  • ✅ 多个标签可以同时显示（如同时是精品榜和下载榜）

🧾 2025-11-25 · 「素材卡片信息优化」版本 🎨

🎨 首页素材卡片优化

1. 素材卡片信息精简

  • ✅ 移除了"作者："文字，直接显示作者名
  • ✅ 使用Avatar组件在作者名前显示头像（文字头像，显示首字母）
  • ✅ 移除了文件名和文件大小显示，减少信息冗余
  • ✅ 将上传时间移到预览图右上角，默认隐藏，hover时显示
  • ✅ 优化了卡片布局，信息更简洁清晰

2. 视觉体验提升

  • ✅ 上传时间使用半透明黑色背景，与SPU标签样式统一
  • ✅ hover时显示上传时间，提供更多信息而不占用空间
  • ✅ 作者信息使用Avatar组件，视觉更统一

🧾 2025-11-25 · 「弹窗样式统一与分类管理优化」版本 🎨

🎨 UI统一优化

1. 统一弹窗样式系统

  • ✅ 创建了统一的Modal组件，采用Apple风格设计
  • ✅ 实现了毛玻璃效果（backdrop-blur），与顶部Header保持一致
  • ✅ 添加了32px圆角，符合统一UI设计规范
  • ✅ 实现了Apple风格的开启动画（scale + translateY + blur效果）
  • ✅ 添加了细边框描边效果，区分弹窗和背景
  • ✅ 使用createPortal渲染，确保弹窗正确覆盖所有内容
  • ✅ 修复了弹窗打开时背景仍可滚动的问题

2. 弹窗应用范围

  • ✅ 预览模板弹窗：应用统一样式和动画
  • ✅ 首页上传模板弹窗：应用统一样式和动画
  • ✅ 模板管理中新建/编辑模板弹窗：应用统一样式和动画
  • ✅ 修复了首页上传面板宽度不一致的问题
  • ✅ 修复了模板管理弹窗中按钮被遮挡的问题

3. 分类管理优化

  • ✅ 修复了分类管理中重复卡片显示的问题
  • ✅ 优化了选项解析逻辑，过滤掉数组字符串格式的选项
  • ✅ 在API层面添加了去重和过滤逻辑，确保数据一致性

🔧 技术改进

  • ✅ 优化了Modal组件的渲染逻辑，支持自定义内容高度控制
  • ✅ 改进了parseOptions函数，处理双重字符串化和嵌套数组的情况
  • ✅ 在多个API端点添加了数组字符串过滤逻辑
  • ✅ 前端添加了去重逻辑，确保选项不重复显示

🧾 2025-01-22 · 「模板系统优化与上传面板重构」版本 🎨

核心功能优化

1. 上传面板模板化重构

  • ✅ 移除旧的素材类型下拉选择，改用模板名称替代
  • ✅ 从模板字段中自动提取 materialType 值
  • ✅ 移除所有旧字段输入框（SPU型号、品牌、系列、SKU、材质/工艺、使用店铺、场景类别、平台分类、渲染信息等）
  • ✅ 现在只显示模板配置的字段，确保与模板管理面板预览一致
  • ✅ 修复了选择模板后旧字段不隐藏的问题

2. 模板管理功能增强

  • ✅ 添加模板取消启用功能（之前启用后无法取消）
  • ✅ 启用状态的模板现在可以取消启用，恢复为草稿状态

3. 首页TAG筛选优化

  • ✅ 调整素材类型TAG间距，从 gap-2 调整为 gap-3，视觉效果更美观

技术改进

  • ✅ 更新 handleSubmit 逻辑，从 templateFieldValues 中提取所有字段值
  • ✅ 优化模板选择逻辑，自动从模板字段中提取 materialType 用于条件渲染
  • ✅ 修复了模板字段值同步问题

🧾 2025-01-XX · 「模板管理整合、首页TAG筛选与上传进度优化」版本 🎨

本次更新完成了模板管理整合到上传和分类功能，实现了动态字段渲染，新增了首页类型筛选TAG系统，并优化了上传进度体验。

🔗 核心功能：模板管理整合

  • ✨ 上传面板模板化

    • 将"素材类型"改为"素材模板"，从模板管理拉取启用的模板列表
    • 选择模板后动态显示对应模板的字段（支持 text、textarea、number、select、checkbox、radio、date 等类型）
    • 根据字段的 layoutWidth 属性支持半行/整行布局
    • 自动验证必填字段，提升用户体验

  • 📦 数据存储优化

    • 上传时提交模板ID和字段值到数据库
    • 在 metadata 字段中存储模板字段值（JSON格式）
    • 在 templateId 字段中直接存储模板ID，方便查询和统计

  • 🏷️ 分类管理模板化

    • 创建模板分类 API，从模板管理中提取所有 visibleOnHomeFilter=true 且 type='select' 的字段选项
    • 分类管理界面显示从模板中提取的分类选项
    • 保留原有分类管理用于向后兼容

  • 🎯 首页类型筛选TAG系统

    • 创建 /api/material-types API：从模板管理中提取 materialType 字段的选项
    • 首页使用TAG形式显示素材类型筛选，替代原有的固定类型列表
    • 第一个TAG是"全部"，点击可清除筛选
    • 使用 Tag 组件和低饱和度炫彩元素样式，支持多种颜色循环使用
    • 选中状态使用 ring 样式突出显示，未选中状态使用透明度变化
    • 提升用户体验，筛选更加直观便捷

  • ⚡ 上传素材进度优化

    • 添加 uploadComplete 状态标识上传完成
    • 进度100%后立即显示完成状态（进度条变绿色，显示"上传完成"）
    • 添加300ms延迟确保数据保存完成后再关闭弹窗
    • 优化用户体验：显示"✓ 上传成功，正在关闭..."提示
    • 修复所有错误处理路径，确保状态正确重置

🎨 UI优化

  • ✨ 低饱和度炫彩元素设计系统

    • 添加 accentStyles 配置，支持多种低饱和度颜色主题（pink、purple、blue、cyan、emerald、orange、rainbow）
    • 更新 Tag 组件使用新的炫彩元素样式，提升视觉美感
    • 确保深浅色模式都有对应的炫彩元素

  • 🔧 深浅色主题适配优化

    • 优化 UploadModal 组件基础样式（gray → slate，使用三层架构）
    • 优化分享页面和编辑页面样式统一
    • 所有组件已迁移到三层架构样式系统

🔧 功能完善

  • ✅ 用户信息修改后自动同步素材信息
    • 当用户名修改时，自动更新该用户所有素材的 authorName 字段
    • 使用事务确保数据一致性，前端显示同步提示

🛠️ 技术改进

  • ✅ 完善三层架构样式系统

    • 在颜色层添加 accent 配置，支持低饱和度炫彩元素
    • 更新样式组合器，导出 accentStyles 供组件使用
    • 所有组件已添加文件头注释，代码可维护性提升

  • ✅ 修复 Input 组件类型冲突

    • 使用 Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> 解决 size 属性类型冲突

🧾 2025-11-22 · 「首页UI完全统一 & 通用组件库创建」版本 🎨

本次更新完成了首页UI的完全统一到三层架构系统，并创建了通用组件库，为后续开发提供了可复用的基础组件。

🎨 首页UI完全统一到三层架构

  • ✨ 颜色系统完全统一

    • ✅ 将所有 gray 系列替换为 slate 系列
    • ✅ 统一文本颜色（text-gray-* → text-slate-*）
    • ✅ 统一背景颜色（bg-gray-* → bg-slate-*）
    • ✅ 统一边框颜色（border-gray-* → border-slate-*）
    • ✅ 确保深浅色模式完美适配

  • 🔧 组件样式统一

    • ✅ 统一按钮样式（使用 buttonStyles.* 和 buttonModifiers.*）
    • ✅ 统一输入框样式（使用 inputStyles.*）
    • ✅ 统一卡片样式（使用 cardStyles.*）
    • ✅ 统一分页按钮样式
    • ✅ 统一分享弹窗样式

  • 📦 标签组件应用

    • ✅ 使用新的 Tag 组件替换原有的标签样式
    • ✅ 统一标签颜色和尺寸
    • ✅ 确保标签在深浅色模式下完美显示

🧩 通用组件库创建

  • ✨ Badge 组件

    • ✅ 创建了 components/ui/Badge.tsx
    • ✅ 支持多种变体（primary、success、warning、danger）
    • ✅ 支持多种尺寸（sm、md、lg）
    • ✅ 使用三层架构样式系统
    • ✅ 完整的 TypeScript 类型定义

  • 🏷️ 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 传递

📚 文档更新

  • 📝 优化记录更新
    • ✅ 更新了 优化记录.md - 记录本次完成的优化
    • ✅ 更新了 优化计划与优先级.md - 标记已完成的任务
    • ✅ 更新了 后续修改.txt - 更新需求进度

🧾 2025-11-22 · 「统一弹窗系统 & 首页UI优化」版本 🎨

本次更新完成了统一弹窗系统的全面替换，统一了素材预览面板，并开始将首页UI迁移到三层架构系统。

🎯 统一弹窗系统

  • ✨ 替换浏览器原生弹窗

    • ✅ 创建了 ConfirmDialog、AlertDialog、PromptDialog 组件
    • ✅ 创建了 DialogProvider 和 useDialog Hook
    • ✅ 替换了所有 confirm、alert、prompt 调用
    • ✅ 涉及文件：所有 admin 组件、首页、分享页面、弹幕组件等
    • ✅ 统一的视觉样式，符合三层架构设计
    • ✅ 支持多种变体（default、danger、success、warning、error）

  • 🔧 DialogProvider 全局管理

    • 在 app/providers.tsx 中添加了 DialogProvider
    • 提供全局的 confirm、alert、prompt 方法
    • 所有组件可通过 useDialog() Hook 使用统一弹窗

🖼️ 素材预览面板统一

  • ✨ MaterialPreviewModal 组件

    • ✅ 创建了 components/MaterialPreviewModal.tsx 统一预览组件
    • ✅ 使用统一的 Modal 组件
    • ✅ 统一退出逻辑（ESC键、点击遮罩、关闭按钮）
    • ✅ 使用三层架构样式系统
    • ✅ 确保深浅色模式完美适配

  • 📦 应用范围

    • ✅ 首页素材预览已统一使用新组件
    • ✅ 替换了原有的自定义预览弹窗实现

🎨 首页UI统一到三层架构

  • ✨ 主要组件迁移

    • ✅ 迁移了上传按钮样式（使用 buttonStyles.primary）
    • ✅ 迁移了搜索输入框样式（使用 inputStyles.base）
    • ✅ 迁移了筛选按钮样式（使用 buttonStyles.secondary）
    • ✅ 迁移了筛选弹窗中的所有按钮样式
      • 类型分页按钮
      • 使用店铺按钮
      • 场景类别按钮
      • 平台分类按钮
      • 上传月份按钮
    • ✅ 迁移了筛选弹窗容器样式（使用 cardStyles.base）
    • ✅ 迁移了筛选弹窗关闭按钮样式（使用 buttonStyles.ghost）

  • 📝 后续优化

    • ⏳ 部分文本颜色和标签样式仍使用直接 Tailwind 类（可后续继续优化）
    • ⏳ 素材卡片中的标签样式可进一步统一

📚 文档更新

  • 📝 优化记录更新
    • ✅ 更新了 优化记录.md - 记录本次完成的优化
    • ✅ 更新了 优化计划与优先级.md - 标记已完成的任务
    • ✅ 更新了 后续修改.txt - 更新需求进度

🧾 2025-01-XX · 「Admin页面重构 & UI架构优化」版本 🎨

本次更新对Admin管理页面进行了全面重构，建立了统一UI三层架构系统，大幅提升了代码可维护性和用户体验。

🎯 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 - 最终导出的样式
    • Hook层：lib/hooks/useThemeStyles.ts - 主题感知的样式 Hook

  • 🎨 核心优势

    • 修改布局/大小/动画时，只需修改基础层一处，浅色和深色模式自动同步
    • 颜色配置完全分离，可以独立调整浅色或深色模式的颜色
    • 清晰的职责分离，修改时不会遗漏或出错
    • TypeScript 类型检查确保配置正确

  • 📦 组件迁移

    • ✅ 所有Tab组件已完全迁移到新样式系统（MaterialsTab、CategoriesTab、InvitationsTab、DepartmentsTab、UsersTab、MonitorTab）
    • ✅ TemplateManager 完全迁移
    • ✅ 基础UI组件迁移（LoadingState、ErrorState、EmptyState）
    • ✅ Admin主页面完全迁移

🔧 代码结构优化

  • ✨ 组件拆分

    • 将 page.tsx（原3795行）拆分为多个独立Tab组件
    • ✅ MonitorTab.tsx - 监控仪表板
    • ✅ UsersTab.tsx - 用户管理
    • ✅ DepartmentsTab.tsx - 架构管理
    • ✅ CategoriesTab.tsx - 分类管理
    • ✅ InvitationsTab.tsx - 邀请管理
    • ✅ MaterialsTab.tsx - 素材管理
    • ✅ TemplateManager.tsx - 模板管理（已拆分为多个子组件）

  • 🎯 Hook提取

    • ✅ useToast.ts - 统一Toast通知管理
    • ✅ useDataFetch.ts - 统一数据获取逻辑
    • ✅ useUserOperations.ts - 用户相关操作（更新、删除、权限切换等）
    • ✅ useDepartmentOperations.ts - 部门相关操作（创建、删除、重命名）
    • ✅ usePermissions.ts - 权限检查逻辑
    • ✅ useModalState.ts - 模态框状态管理
    • ✅ useDashboardData.ts - 仪表板数据获取

  • 🛠️ 工具函数提取

    • ✅ validators.ts - 表单验证逻辑（验证邮箱、部门名、密码等）
    • ✅ formatters.ts - 格式化函数（日期时间、文件大小、数字等）
    • ✅ api.ts - API错误处理和类型安全
    • ✅ departmentTree.ts - 部门树结构处理

  • 🎨 模板管理器组件化

    • ✅ TemplateManagerHeader.tsx - 头部搜索和操作
    • ✅ BuiltInTemplateGrid.tsx - 内置模板网格
    • ✅ CustomTemplateSection.tsx - 自定义模板区域
    • ✅ TemplateBasicsForm.tsx - 基础信息表单
    • ✅ TemplateAdvancedConfigPanel.tsx - 高级配置面板
    • ✅ TemplateFieldsEditor.tsx - 字段编辑器
    • ✅ TemplateEditorFooter.tsx - 编辑器底部操作
    • ✅ TemplatePreviewPanel.tsx - 预览面板

🎯 统一弹窗组件系统

  • ✨ 创建统一弹窗组件

    • 新增 components/ui/Modal.tsx 统一弹窗组件
    • 使用三层架构设计
    • 支持多种尺寸（small, medium, large, xlarge, fullscreen）
    • 支持ESC键关闭、点击遮罩关闭
    • 完整的ARIA标签和键盘导航支持

  • 🔧 Hook支持

    • 新增 hooks/useModal.ts Hook，统一管理弹窗状态
    • 提供 open、close、toggle 方法

待完成：

  • ⏳ 替换所有浏览器原生弹窗（confirm/alert）
  • ⏳ 素材预览面板统一使用新弹窗组件

🛡️ 错误处理与用户体验

  • ✨ 错误边界

    • 新增 TabErrorBoundary.tsx 组件
    • 为各个Tab包裹错误边界，提供统一的fallback和重试机制

  • 📊 统一状态组件

    • ✅ LoadingState.tsx - 加载状态
    • ✅ ErrorState.tsx - 错误状态
    • ✅ EmptyState.tsx - 空状态
    • 统一错误提示样式，替换所有重复的加载/错误UI

  • ♿ 可访问性增强

    • 为Tab导航添加完整的ARIA标签
    • 添加键盘导航支持（Enter和Space键）
    • 添加焦点样式
    • 为所有交互元素添加 aria-label

📝 类型安全优化

  • ✨ 类型定义统一化
    • 创建 app/admin/_components/types.ts 统一管理所有类型定义
    • 移除了重复的类型定义
    • 添加 AdminTab 类型统一管理Tab类型
    • 添加 DashboardData 接口用于监控仪表板数据
    • 定义完整的Session类型（SessionUser 接口）
    • 定义API响应类型（ApiErrorResponse, ApiSuccessResponse）
    • 移除所有 as any 使用

📚 文档完善

  • 📝 优化文档
    • 创建 优化记录.md - 记录所有优化和修复
    • 创建 优化计划与优先级.md - 详细规划后续优化任务
    • 更新 后续修改.txt - 记录需求进度
    • 创建 更新日志.md（原CHANGELOG.md） - 版本更新记录

🎨 UI样式统一

  • ✨ 颜色系统统一
    • Admin目录中的 text-gray-* / bg-gray-* / border-gray-* 类已全部替换为 slate 系列
    • 浅色与深色模式的视觉基调保持一致
    • 统一使用 buttonStyles 和 inputStyles
    • 新增 buttonModifiers 和 inputModifiers 辅助类

🧾 2025-11-20 · 「拖拽体验优化」版本 🎨

本次更新主要优化了模板管理器的拖拽交互体验，让字段排序操作更加流畅和直观。

🎯 拖拽交互优化

  • ✨ 移除高亮卡片效果

    • 移除了拖拽悬停时的高亮卡片显示，避免与虚位卡片（placeholder）视觉重复。
    • 现在只保留虚位卡片来显示落点位置，界面更简洁清晰。

  • ⚡ 立即更新布局

    • 松开鼠标后布局立即更新，不再等待动画完成。
    • 直接根据拖拽后的顺序更新字段数据，响应更快，体验更流畅。

  • 🎨 动画效果优化

    • 拖拽结束动画时长从 400ms 增加到 500ms，使用弹性缓动函数 cubic-bezier(0.34, 1.56, 0.64, 1)。
    • 拖拽覆盖层增加旋转和缩放效果，视觉反馈更明显。
    • 占位符卡片使用渐变背景和脉冲动画，更清晰地指示落点位置。

🧾 2025-11-18 · 「权限进化 & 电商加成」版本 (๑•̀ㅂ•́)و✧

这次更新主要围绕 权限体验、电商字段扩展、模板/分类管理、部署体验 做了一轮集中升级，让「由壹点 3D 素材平台」更像一款真正能落地到团队里的内部产品，而不是一个玩具 Demo。下面是本次改动的「人话版」说明👇

🛡 权限与用户管理

  • ✨ 部门管理员权限升级

    • 非最高权限账号，只要有「管理的部门」或「自己的部门」，就可以管理 该部门 + 所有子部门 的用户。
    • 没有部门范围时，就老老实实只能改自己，避免误操作全公司 (￣▽￣)／

  • 🧍‍♀️ 按钮展示更聪明

    • 对当前登录用户 没有管理权限 的成员：
      • 不再显示一整排「编辑 / 禁用 / 下载权限 / 管理员」按钮。
      • 只保留一行「无权限修改」的小提示，界面更干净，权限边界更清晰。

📦 模板与分类管理

  • 🧩 内置电商模板上线

    • 在模板管理中新增几套常用电商模板（如「通用电商」「简易基础」「渲染维度」等）。
    • 字段命名与素材表最新标准对齐，开箱即用，不用每次从 0 造轮子。

  • 📂 分类下拉选项更好配

    • 使用店铺 / 场景类别 / 平台分类，全部支持配置「下拉选项」。
    • 规则超简单：一行一个选项，不用再写 JSON 数组。
    • 管理端统一提供输入框 + 示例，方便以后快速按业务维护分类选项。

🛍 素材模型与电商字段

  • 🏷 商品 / 品牌维度补齐

    • 为 Material 增加：brandName（品牌）、seriesName（系列）、skuCode（SKU 编码）、materialTexture（材质纹理）等字段。
    • 方便日后按品牌、系列、SKU 做统计和检索，更贴合电商团队日常用语。

  • 🎨 渲染 / 制作维度补充

    • 新增：renderTime（渲染耗时）、imageResolution（输出分辨率）、colorMode（颜色模式）等字段。
    • 从上传 → 编辑 → 展示 → 搜索，全链路打通，真正做到「不只是传个压缩包」。

  • 🔍 前台页面同步升级

    • 首页列表、分享页、素材编辑页均已接入以上新字段。
    • 搜索支持按这些维度模糊匹配，找素材更像「搜商品」而不是「翻文件夹」。

🚀 部署与运维体验

  • 📜 deploy-new-fixed.ps1 阶段化部署脚本

    • 拆分为：检查阶段 → 构建阶段 → 镜像推送 → 远程部署，并在每一步给出清晰进度条和提示。
    • 附带一点小彩蛋文案，部署的时候不那么无聊 (´･ω･`)

  • 🔐 SSH & Registry 流程更稳

    • 强制优先使用 OpenSSH，避免 plink 等工具弹交互对话框导致脚本卡死。
    • 自动打 Tag 并推送镜像到私有 Registry，然后在远程服务器上拉取并通过 Docker Compose 滚动更新。

  • ❤️ 健康检查 /api/health

    • 部署完成后，脚本会主动轮询 /api/health，确认服务真正「跑起来」再宣告成功。
    • 避免刚部署完就打开页面，结果服务还在启动中的尴尬。

🎛 其他细节优化

  • 🧭 系统管理页默认打开 「监控仪表板」 标签，而不是素材管理，让管理者一眼看到系统状态。
  • 🎨 调整架构管理 & 用户管理的卡片、阴影、悬浮效果与按钮样式，使整个后台的观感更统一、更接近苹果风格。

小结：这一版可以理解为「权限体验 + 电商字段 + 可迁移部署脚本」的整合升级版，为后续更多客户侧部署和定制做好了「打基础」工作。✨