flnxi-Wu/更新日志.md at 8705b9846abb4ea95f67ccfa6ca5e7346f7cf646

CI Check / check (push) Has been cancelled

Details

- 创建统一的Modal组件，采用Apple风格设计
- 实现毛玻璃效果、圆角、动画和细边框描边
- 修复弹窗打开时背景滚动问题
- 修复分类管理中重复卡片和数组字符串显示问题
- 优化选项解析逻辑，添加去重和过滤机制

2025-11-25 09:37:00 +08:00

20 KiB

Raw Blame History

🧾 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，确认服务真正「跑起来」再宣告成功。
- 避免刚部署完就打开页面，结果服务还在启动中的尴尬。

🎛 其他细节优化

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

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

20 KiB Raw Blame History Unescape Escape

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

🎨 UI统一优化

🔧 技术改进

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

核心功能优化

技术改进

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

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

🎨 UI优化

🔧 功能完善

🛠️ 技术改进

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

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

🧩 通用组件库创建

📚 文档更新

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

🎯 统一弹窗系统

🖼️ 素材预览面板统一

🎨 首页UI统一到三层架构

📚 文档更新

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

🎯 UI三层架构系统

🔧 代码结构优化

🎯 统一弹窗组件系统

🛡️ 错误处理与用户体验

📝 类型安全优化

📚 文档完善

🎨 UI样式统一

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

🎯 拖拽交互优化

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

🛡 权限与用户管理

📦 模板与分类管理

🛍 素材模型与电商字段

🚀 部署与运维体验

🎛 其他细节优化

20 KiB

Raw Blame History