WuYongJie 5821d73291 初始提交：3D家具安装展示系统

包含：
- furniture-3d-system：Next.js 16 全栈应用（资产中心、产品管理、3D装配动画）
- autocad-plugin：AutoCAD 家具导出插件源码
- 资产中心改造：编辑弹窗化、删除功能、Toast反馈、自定义Select组件

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-04-02 14:00:19 +08:00

8.3 KiB

Raw Blame History

装配编辑器UI变更说明

本文档记录装配编辑器界面的视觉重构变更，供其他Agent参考

变更日期: 2026-02-03
变更人: 前端UI Agent
影响范围: src/components/assembly/AssemblyEditorClient.tsx

一、设计参考

本次重构参考 SKU详情页 (/products/[id]/skus/[skuId]) 的设计风格：

文件位置：src/app/products/[id]/skus/[skuId]/SKUDetailClient.workspace.tsx
组件参考：SKUDetailTopNav.tsx, SKUReadOnlySidebar.tsx

二、变更概述

设计风格

白色卡片 + 品牌青绿色 (#008D74)
固定顶部导航栏 + 毛玻璃效果
圆角卡片布局 (rounded-apple-lg)
流畅的入场动画 (fadeInUp + 延迟)

主要改进

顶部导航栏改为固定定位 + 毛玻璃效果
三栏布局使用白色卡片包裹
品牌色统一使用 #008D74 青绿色
添加了挂载动画效果
使用 lucide-react 图标库

三、关键样式变更

3.1 颜色系统

元素	颜色值	用途
品牌主色	`#008D74`	按钮、选中状态、强调
品牌深色	`#007A63`	hover状态
品牌浅色	`#CFEAE2`	标签背景
品牌文字色	`#005C4B`	标签文字
选中背景	`#EAF6F2`	选中项背景

3.2 布局结构

┌─────────────────────────────────────────────────────────┐
│  顶部导航栏 (fixed, h-14, backdrop-blur-xl)              │
├─────────────────────────────────────────────────────────┤
│  ┌──────────┐  ┌────────────────────────┐  ┌──────────┐ │
│  │ 左侧     │  │        中央画布         │  │ 右侧     │ │
│  │ 步骤列表  │  │                        │  │ 步骤属性 │ │
│  │ (320px)  │  │                        │  │ (340px)  │ │
│  │          │  │                        │  │          │ │
│  └──────────┘  └────────────────────────┘  └──────────┘ │
└─────────────────────────────────────────────────────────┘

3.3 卡片样式

// 统一卡片样式
<div className="rounded-apple-lg bg-white border border-apple-separator shadow-xs">
  {/* 头部 */}
  <div className="flex items-center justify-between px-4 py-3 border-b border-apple-separator">
    <h2 className="text-apple-xs font-apple-system font-apple-semibold text-apple-label-tertiary uppercase tracking-wide">
      标题
    </h2>
    {/* 标签 */}
    <span className="px-2 py-0.5 rounded-sm text-apple-xs" style={{ backgroundColor: '#CFEAE2', color: '#005C4B' }}>
      数量
    </span>
  </div>
  
  {/* 内容 */}
  <div className="p-3">...</div>
</div>

四、组件结构

4.1 顶部导航栏 (Header)

位置: fixed top-0 left-0 right-0 z-50

样式:

高度: h-14 (56px)
背景: bg-white/80 backdrop-blur-xl
边框: border-b border-apple-separator

内容:

左侧：返回按钮 + 分隔线 + 标题/副标题
中间：模式切换按钮组（爆炸图/步骤编辑/预览）
右侧：版本按钮 + 自动生成按钮

模式切换按钮:

// 未选中
<button className="text-apple-label-secondary hover:text-apple-label-primary">

// 选中
<button className="bg-white text-[#008D74] shadow-sm">

4.2 左侧面板 (步骤列表)

宽度: 320px

结构:

头部：标题 + 步骤数量标签
内容：StepTimeline 组件
底部：总时长统计

空状态:

图标：Layers (lucide-react)
背景色：#EAF6F2
图标色：#008D74

4.3 中央画布

特点:

白色卡片包裹
播放控制悬浮在底部中央
支持三种状态：爆炸图 / 3D预览 / 空状态

CanvasPlaceholder:

立方体图标 + 步骤编号角标
显示当前步骤名称和进度

4.4 右侧面板 (步骤属性)

宽度: 340px

结构:

头部：标题 + 步骤编号标签
步骤信息卡片：圆形编号 + 步骤类型
基本信息分组：标题、描述
动画设置分组：持续时间、摄像机过渡

输入框样式:

<input className="h-9 px-3 rounded-apple-md border border-apple-separator focus:border-[#008D74]" />

五、动画效果

5.1 入场动画

// 卡片入场动画
className={cn(
  'transition-all duration-500',
  mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'
)}

// 延迟入场（级联效果）
style={{ transitionDelay: '100ms' }}  // 中央画布
style={{ transitionDelay: '200ms' }}  // 右侧面板

5.2 侧边栏动画

<motion.aside
  initial={{ width: 0, opacity: 0, x: -20 }}
  animate={{ width: 320, opacity: 1, x: 0 }}
  exit={{ width: 0, opacity: 0, x: -20 }}
  transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}
/>

5.3 fadeInUp 动画

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

六、图标使用

全部使用 lucide-react 图标库：

import {
  ArrowLeft,    // 返回
  Layers,       // 步骤编辑
  Play,         // 播放
  Pause,        // 暂停
  Eye,          // 预览
  Box,          // 爆炸图/空状态
  History,      // 版本历史
  Wand2,        // 自动生成
  ChevronLeft,  // 上一步
  ChevronRight, // 下一步
} from 'lucide-react'

图标样式统一：

大小：w-4 h-4
线宽：strokeWidth={1.5} 或 strokeWidth={2}
选中状态：strokeWidth={2}，未选中：strokeWidth={1.5}

七、字体规范

7.1 字体族

font-apple-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'PingFang SC', ...

7.2 字重

font-apple-semibold: 标题、按钮
font-apple-medium: 标签、导航
font-apple-regular: 正文

7.3 字号

用途	类名	大小
分组标题	`text-apple-xs`	11px
正文	`text-apple-sm`	12px
标题	`text-apple-md`	15px

7.4 特殊样式

// 分组标题
<h2 className="text-apple-xs font-apple-system font-apple-semibold text-apple-label-tertiary uppercase tracking-wide">

// 标签
<span className="text-apple-xs font-apple-system font-apple-medium" style={{ backgroundColor: '#CFEAE2', color: '#005C4B' }}>

八、子组件

8.1 Section

分组容器，带标题。

8.2 InputField

文本输入框，聚焦时边框变品牌色。

8.3 TextareaField

多行文本输入。

8.4 SelectField

下拉选择框。

8.5 EmptyStepsState

空步骤状态，显示Layers图标和生成按钮。

8.6 EmptyModelState

空模型状态。

8.7 CanvasPlaceholder

画布占位符，显示步骤信息。

九、响应式说明

当前实现

桌面端: 完整三栏布局
侧边栏: 可动画展开/收起

待完成

平板端: 建议侧边栏改为抽屉式
移动端: 建议底部操作栏 + 全屏画布

十、TODO

需要其他Agent配合

StepTimeline组件: 建议同步更新为相同风格（白色卡片 + 品牌色）
PlaybackControls组件: 建议更新为悬浮式设计
移动端适配: 需要添加响应式布局

十一、快速参考

品牌色使用

// 主按钮
<button className="bg-[#008D74] hover:bg-[#007A63] text-white">

// 选中状态
<div className="bg-[#EAF6F2] border-[#008D74]">

// 标签
<span style={{ backgroundColor: '#CFEAE2', color: '#005C4B' }}>

卡片结构

<div className="rounded-apple-lg bg-white border border-apple-separator shadow-xs">
  <div className="px-4 py-3 border-b border-apple-separator">头部</div>
  <div className="p-3">内容</div>
</div>

图标使用

import { IconName } from 'lucide-react'
<IconName className="w-4 h-4" strokeWidth={1.5} />

文档结束

8.3 KiB Raw Blame History Unescape Escape