WuYongJie/flnxi-Wu
WuYongJie/flnxi-Wu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
flnxi-Wu/docs/guides/FEATURE_UPDATES.md
WuYongJie d1c6efc79d
Some checks failed
CI Check / check (push) Has been cancelled
Details
feat: NAS 部署与 Harbor 推送流程
2025-12-03 14:39:06 +08:00

8.7 KiB
Raw Blame History

功能更新说明 v2.0

📅 更新日期：2025-10-16

✨ 新功能总览

1. ✅ 浏览器黑暗模式支持

  • 自动跟随系统：自动识别系统黑暗模式设置
  • 全局适配：所有页面和组件都支持黑暗模式
  • 流畅过渡：主题切换平滑过渡

使用方法：

  • 在系统设置中启用黑暗模式，应用会自动切换
  • macOS: 系统偏好设置 → 通用 → 外观 → 深色
  • Windows: 设置 → 个性化 → 颜色 → 深色

2. ✅ 上传进度条和网络速度显示

  • 实时进度：显示上传百分比
  • 速度显示：实时显示上传速度（KB/s, MB/s）
  • 文件大小：显示上传文件大小

界面改进：

  • 蓝色进度条动画
  • 上传速度实时更新
  • 上传中禁用取消和上传按钮

3. ✅ 支持7Z压缩格式

  • 新增格式：除了ZIP、RAR，现在还支持7Z格式
  • 智能识别：上传时自动验证文件格式
  • 友好提示：不支持的格式会给出清晰的错误提示

支持的压缩格式：

  • ✅ .zip
  • ✅ .rar
  • ✅ .7z

4. ✅ 取消上传大小限制

  • 之前限制：100MB
  • 现在限制：10GB（基本无限制）
  • 适用场景：支持大型3D模型文件上传

注意事项：

  • 上传大文件时建议使用内网模式
  • 公网上传速度取决于您的网络带宽

5. ✅ 内外网模式识别和提示

  • 自动识别：系统根据访问地址自动识别当前访问模式
  • 智能提示：首页顶部显示当前模式和替代访问地址
  • 模式说明：
    • 🏠 内网模式：http://192.168.58.20:4320 (绿色标识)
      • 局域网内访问
      • 速度更快，延迟更低
      • 适合上传大文件（可达3GB）
      • 显示外网地址供参考
    • 🌍 公网模式：http://180.97.221.140:2320 (蓝色标识)
      • 互联网访问
      • 随时随地可访问
      • 适合外出使用
      • 提示内网地址供参考

智能提示功能：

  • 公网访问时，提示内网地址更快
  • 内网访问时，显示公网地址供外出使用
  • 自动检测当前网络环境

6. ✅ 一级分类功能

这是本次最大的功能更新！

6.1 数据库架构调整

  • 新增：Category（一级分类）模型
  • 更新：Material模型新增categoryName字段
  • 优化：添加索引提升查询性能

6.2 上传界面改进

新的上传流程：

  1. 选择预览图片
  2. 输入商品型号
  3. 选择/新建一级分类 ⭐
  4. 选择/新建二级分类/场景 ⭐
  5. 选择压缩包
  6. 上传

一级分类管理：

  • 下拉选择现有分类
  • 快速新建分类（输入即保存）
  • 自动记忆，下次直接选择

二级分类管理：

  • 下拉选择现有场景
  • 快速新建场景
  • 支持快速切换

6.3 首页筛选增强

新的筛选方式：

  1. 搜索框：搜索商品型号、一级分类、二级分类、作者
  2. 一级分类：按钮式快速筛选
  3. 二级分类/场景：按钮式快速筛选
  4. 组合筛选：可同时使用多个筛选条件

筛选状态显示：

  • 当前筛选条件标签显示
  • 单独移除某个筛选条件
  • 一键清除所有筛选

6.4 卡片信息展示

每个素材卡片显示：

  • 预览图
  • 商品型号
  • 一级分类 ⭐
  • 二级分类 ⭐
  • 作者
  • 创建时间
  • 下载按钮

🗄️ 数据库更新

需要执行的迁移

连接到NAS并运行数据库迁移：

```bash

1. SSH到NAS

ssh root@192.168.58.20

密码：jsjj8888

2. 进入项目目录

cd /mnt/tank/apps/youyidian-3d

3. 停止容器

docker compose down

4. 更新代码（如果通过Git或上传）

确保所有更新的文件都已上传

5. 重新构建并启动

docker compose up -d --build

6. 运行数据库迁移

docker compose exec app npx prisma db push

7. 初始化一级分类数据（可选）

docker compose exec -T app npx prisma db execute --schema=/app/prisma/schema.prisma --stdin <<< " INSERT INTO categories (id, name, "createdAt") VALUES (gen_random_uuid(), '家居', NOW()), (gen_random_uuid(), '办公', NOW()), (gen_random_uuid(), '商业', NOW()), (gen_random_uuid(), '户外', NOW()), (gen_random_uuid(), '其他', NOW()) ON CONFLICT (name) DO NOTHING; "

8. 验证部署

docker compose ps docker compose logs --tail=50 app ```

🎨 界面改进

配色方案

亮色模式：

  • 主色调：灰色系 (#F9FAFB, #FFFFFF)
  • 强调色：深灰 (#111827, #1F2937)
  • 边框：浅灰 (#E5E7EB)

暗色模式：

  • 主色调：深灰系 (#111827, #1F2937)
  • 强调色：中灰 (#374151, #4B5563)
  • 边框：深灰 (#374151)

组件样式

  • 圆角统一为12px（Apple风格）
  • 按钮添加hover和active动画
  • 卡片添加阴影提升层次感
  • 输入框focus状态优化

📊 性能优化

  1. 数据库索引

    • 添加categoryName索引
    • 添加sceneName索引
    • 优化查询性能

  2. 前端优化

    • 使用XMLHttpRequest实现上传进度
    • 实时计算上传速度
    • 减少不必要的重渲染

  3. 用户体验

    • 自动保存常用分类和场景
    • 快速筛选和搜索
    • 一键清除所有筛选

🐛 Bug修复

  1. ✅ 修复了下载文件路径问题
  2. ✅ 修复了Next.js API配置警告
  3. ✅ 修复了Prisma二进制目标问题
  4. ✅ 优化了文件名中文编码问题

📖 使用指南

上传素材（新流程）

  1. 登录系统

    • 使用您的账号登录

  2. 点击"上传素材"按钮

  3. 填写信息：

    • 选择预览图（支持JPG、PNG、WebP等）
    • 输入商品型号（如：XY-2024-001）
    • 选择一级分类（如：家居、办公等）
      • 如果没有合适的，点击"新建分类"
    • 选择二级分类（如：客厅、卧室等）
      • 如果没有合适的，点击"新建场景"
    • 选择压缩包（支持ZIP、RAR、7Z，最大10GB）

  4. 开始上传

    • 实时查看上传进度
    • 查看上传速度
    • 等待上传完成

  5. 完成

    • 上传成功后自动返回首页
    • 新上传的素材会出现在列表顶部

筛选和查找素材

  1. 使用搜索框

    • 输入关键词搜索
    • 支持搜索商品型号、分类、场景、作者

  2. 使用一级分类筛选

    • 点击分类按钮快速筛选
    • 再次点击取消筛选

  3. 使用二级分类筛选

    • 点击场景按钮筛选
    • 可与一级分类组合使用

  4. 组合筛选

    • 同时使用搜索、一级分类、二级分类
    • 查看当前筛选条件标签
    • 单独移除某个条件或一键清除

下载素材

  1. 找到需要的素材卡片
  2. 点击"下载"按钮
  3. 浏览器会自动下载压缩包

🔧 技术栈

前端

  • Next.js 14.2.33
  • React 18
  • TypeScript
  • Tailwind CSS（支持黑暗模式）
  • NextAuth.js

后端

  • Next.js API Routes
  • Prisma ORM
  • PostgreSQL
  • S3对象存储（MinIO）

部署

  • Docker + Docker Compose
  • FRP内网穿透
  • TrueNAS（NAS服务器）

📝 API更新

新增API

GET /api/categories

  • 获取所有一级分类
  • 返回：{ id, name, createdAt }[]

POST /api/categories

  • 创建新的一级分类
  • 参数：{ name: string }
  • 返回：{ id, name, createdAt }

更新API

POST /api/materials/upload

  • 新增参数：categoryName (必填)
  • 其他参数保持不变

GET /api/materials

  • 新增查询参数：?category=分类名
  • 支持组合查询：?category=家居&scene=客厅&search=关键词

🚀 部署更新

本地开发

```bash

1. 拉取最新代码

cd /Users/lanmu/Desktop/gongxiangp2

2. 安装依赖（如有新增）

npm install

3. 生成Prisma Client

npx prisma generate

4. 运行数据库迁移

npx prisma db push

5. 启动开发服务器

npm run dev ```

NAS生产环境

```bash

1. 上传新代码到NAS

sshpass -p 'jsjj8888' scp -r . root@192.168.58.20:/mnt/tank/apps/youyidian-3d/

2. SSH到NAS

ssh root@192.168.58.20

3. 进入项目目录

cd /mnt/tank/apps/youyidian-3d

4. 重新构建并启动

docker compose down docker compose up -d --build

5. 运行数据库迁移

docker compose exec app npx prisma db push

6. 检查状态

docker compose ps docker compose logs --tail=50 app ```

🎯 未来规划

短期（1-2周）

  • 添加批量下载功能
  • 添加素材收藏功能
  • 优化移动端体验

中期（1个月）

  • 添加素材评论功能
  • 添加素材标签系统
  • 实现高级搜索（多条件组合）

长期（3个月）

  • AI智能分类
  • 素材推荐系统
  • 数据统计和分析

📞 技术支持

如有问题，请联系：

  • 开发者：系统管理员
  • 更新时间：2025-10-16
  • 版本：v2.0.0

感谢使用FLNXI素材库管理系统！ 🎉