WuYongJie ff41839238 feat: 实现Apple风格UI系统和产品上传功能

- 完整实现Apple HIG 2025设计系统
- 添加Modal弹窗组件（毛玻璃效果、流畅动画）
- 添加FileUpload文件上传组件（拖拽、批量上传、进度显示）
- 实现产品上传功能（支持DWG/GLB/GLTF文件）
- 优化产品列表展示（可折叠的产品+SKU结构）
- 实现Tab切换功能（3D模型管理、五金件、BOM、文档）
- 修复主题系统hydration错误
- 优化按钮和间距，符合Apple设计规范
- 添加分享页面的Apple风格重设计
- 创建测试数据脚本

2025-12-12 20:16:41 +08:00

10 KiB

Raw Blame History

Apple 风格 UI 设计系统指南

基于 Apple Human Interface Guidelines 2025 的完整设计系统实现指南。

🎨 设计理念

核心原则

清晰性 (Clarity) - 文本清晰易读，图标精确表意，装饰恰到好处
遵从性 (Deference) - 流畅的动效和清晰的界面帮助用户理解内容
深度感 (Depth) - 视觉层次和逼真的动效传达活力，增强理解

设计价值观

美学完整性 - 外观和行为与功能完美结合
一致性 - 使用熟悉的标准和范式
直接操作 - 直观的界面让用户感觉直接操控内容
反馈 - 确认操作并显示结果
隐喻 - 虚拟对象和操作是现实世界的隐喻
用户控制 - 用户而非应用程序发起和控制操作

🎯 Liquid Glass 材质系统

材质变体

我们的设计系统提供三种 Liquid Glass 材质效果：

1. Subtle Glass (微妙玻璃)

background: rgba(255, 255, 255, 0.60);
backdrop-filter: blur(10px) saturate(150%);

使用场景: 背景元素、次要信息面板
特点: 轻微模糊，不干扰主要内容

2. Standard Glass (标准玻璃)

background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(20px) saturate(180%);

使用场景: 卡片、模态框、导航栏
特点: 平衡的透明度和模糊效果

3. Enhanced Glass (增强玻璃)

background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(30px) saturate(200%);

使用场景: 重要的 UI 元素、侧边栏
特点: 更强的视觉层次感

使用指南

层次结构: 使用不同强度的玻璃效果建立视觉层次
内容可读性: 确保文本在玻璃背景上清晰可读
性能考虑: 避免过度使用，影响渲染性能
深色模式: 自动适配深色背景色值

🌈 颜色系统

系统颜色

我们严格遵循 Apple 系统颜色规范：

颜色	浅色模式	深色模式	用途
Blue	#007AFF	#0A84FF	主要操作、链接
Green	#34C759	#32D74B	成功状态
Red	#FF3B30	#FF453A	错误、危险操作
Orange	#FF9500	#FF9F0A	警告状态
Yellow	#FFCC00	#FFD60A	注意、提醒
Purple	#AF52DE	#BF5AF2	创意、个性化

语义化颜色

// 背景颜色
--color-background-primary: 主要背景
--color-background-secondary: 次要背景  
--color-background-tertiary: 第三级背景

// 文本颜色
--color-label-primary: 主要文本
--color-label-secondary: 次要文本
--color-label-tertiary: 第三级文本

// 分隔线
--color-separator: 分隔线颜色

对比度标准

WCAG AA: 4.5:1 (普通文本), 3:1 (大文本)
WCAG AAA: 7:1 (普通文本), 4.5:1 (大文本)

✍️ 字体系统

字体栈

我们使用合法的系统字体栈，避免版权问题：

/* 系统字体栈 */
font-family: -apple-system, BlinkMacSystemFont, Inter, 'Segoe UI', Roboto, sans-serif;

/* 中文优化字体栈 */
font-family: -apple-system, BlinkMacSystemFont, Inter, 'Noto Sans CJK SC', 'PingFang SC', sans-serif;

/* 等宽字体栈 */
font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;

文本样式层次

样式	尺寸	行高	用途
Large Title	34px	41px	页面主标题
Title 1	28px	34px	章节标题
Title 2	22px	28px	子章节标题
Title 3	20px	25px	小标题
Headline	17px	22px	强调文本
Body	17px	25px	正文内容
Callout	16px	21px	突出信息
Subhead	15px	20px	副标题
Footnote	13px	18px	脚注
Caption 1	12px	16px	说明文字
Caption 2	11px	13px	最小说明文字

📐 间距系统

4px 基础网格

所有间距都基于 4px 的基础网格：

const spacing = {
  1: '4px',   // 最小间距
  2: '8px',   // 紧密间距
  3: '12px',  // 小间距
  4: '16px',  // 标准间距
  5: '20px',  // 中等间距
  6: '24px',  // 大间距
  8: '32px',  // 很大间距
  12: '48px', // 超大间距
}

圆角系统

尺寸	值	用途
Small	6px	小组件
Medium	10px	中等组件
Large	16px	大组件
XLarge	20px	超大组件

触摸目标

最小尺寸: 44px × 44px (Apple 标准)
舒适尺寸: 48px × 48px
大尺寸: 56px × 56px

🎬 动画系统

动画时长

const duration = {
  fast: '150ms',    // 快速交互
  normal: '250ms',  // 标准动画
  slow: '350ms',    // 慢速动画
  slower: '500ms',  // 很慢动画
}

缓动函数

/* Apple 标准缓动 */
--ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
--spring: cubic-bezier(0.5, 1.5, 0.5, 1);

动画原则

有意义: 每个动画都应该有明确的目的
自然: 模拟现实世界的物理规律
快速: 不阻碍用户操作
一致: 相似的操作使用相似的动画

📱 响应式设计

断点系统

const breakpoints = {
  mobile: '375px',    // iPhone 标准宽度
  tablet: '768px',    // iPad 竖屏
  desktop: '1024px',  // iPad 横屏 / 小桌面
  large: '1440px',    // 大桌面
}

安全区域

支持 iPhone 刘海屏和 iPad 圆角：

padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);

♿ 可访问性

键盘导航

Tab: 在可聚焦元素间导航
Enter/Space: 激活按钮和链接
Arrow Keys: 在列表和菜单中导航
Escape: 关闭模态框和菜单

ARIA 属性

// 基本 ARIA 属性
aria-label="描述性标签"
aria-describedby="详细描述ID"
aria-expanded="true/false"
aria-selected="true/false"
role="button/dialog/menu"

对比度要求

确保文本与背景的对比度符合 WCAG AA 标准
提供高对比度模式支持
使用图标和形状辅助颜色信息

🧩 组件使用指南

Button 按钮

// 基本用法
<Button variant="filled">主要操作</Button>
<Button variant="tinted">次要操作</Button>
<Button variant="gray">中性操作</Button>
<Button variant="plain">文本按钮</Button>

// 尺寸和状态
<Button size="large" loading>加载中...</Button>
<Button disabled>禁用状态</Button>

// 可访问性
<Button 
  ariaLabel="保存文档"
  shortcut="Cmd+S"
  primary
>
  保存
</Button>

Input 输入框

// 基本用法
<Input
  label="用户名"
  placeholder="请输入用户名"
  helperText="用户名必须唯一"
/>

// 状态和验证
<Input
  label="邮箱"
  type="email"
  state="error"
  errorText="请输入有效的邮箱地址"
  required
/>

Card 卡片

// 基本卡片
<Card variant="standard">
  <div className="p-6">
    <Title3>卡片标题</Title3>
    <Body>卡片内容</Body>
  </div>
</Card>

// 交互式卡片
<Card interactive onClick={handleClick}>
  <div className="p-6">
    <Title3>可点击卡片</Title3>
  </div>
</Card>

🚀 性能优化

组件优化

React.memo: 避免不必要的重渲染
useCallback: 优化事件处理器
useMemo: 缓存计算结果
懒加载: 按需加载组件

动画优化

/* GPU 加速 */
will-change: transform;
transform: translateZ(0);

/* 避免重排重绘 */
transform: scale(0.95); /* 而不是改变 width/height */
opacity: 0.8; /* 而不是改变 background-color */

虚拟滚动

对于大数据量列表，使用 VirtualList 组件：

<VirtualList
  items={largeDataSet}
  itemHeight={60}
  height={400}
  renderItem={(item, index) => (
    <div key={item.id}>
      {item.name}
    </div>
  )}
/>

📚 最佳实践

1. 组件组合

优先使用组件组合而不是复杂的单一组件：

// 好的做法
<Card>
  <CardHeader>
    <CardTitle>标题</CardTitle>
  </CardHeader>
  <CardContent>
    内容
  </CardContent>
  <CardActions>
    <Button>操作</Button>
  </CardActions>
</Card>

// 避免的做法
<ComplexCard 
  title="标题"
  content="内容"
  actions={[{label: "操作"}]}
/>

2. 状态管理

使用适当的状态管理模式：

// 简单状态
const [isOpen, setIsOpen] = useState(false)

// 复杂状态
const modal = useModal()
const toast = useToast()

3. 错误处理

提供友好的错误状态：

<ErrorEmptyState 
  onRetry={handleRetry}
/>

4. 加载状态

使用骨架屏而不是简单的加载指示器：

{loading ? (
  <CardSkeleton />
) : (
  <Card>内容</Card>
)}

🔧 开发工具

设计令牌

import { 
  appleTypographyTokens,
  appleColorTokens,
  appleSpacingTokens,
  appleAnimationTokens 
} from '@/lib/design-tokens'

工具函数

import { cn } from '@/lib/utils'
import { validateTouchTarget, validateContrastRatio } from '@/lib/accessibility'
import { useDebounce, useVirtualScroll } from '@/lib/performance'

响应式工具

import { 
  useBreakpoint,
  useMediaQuery,
  useSafeArea 
} from '@/lib/responsive'

📖 迁移指南

从传统 CSS 迁移

替换内联样式:

// 之前
<div style={{padding: '16px', borderRadius: '8px'}}>

// 之后
<div className="p-apple-4 rounded-apple-md">

使用设计令牌:

// 之前
<div style={{color: '#007AFF'}}>

// 之后
<div className="text-apple-blue-light">

应用组件:

// 之前
<button className="btn btn-primary">

// 之后
<Button variant="filled">

渐进式升级

从最常用的组件开始（Button、Input）
逐步替换页面级组件
最后处理复杂的交互组件

🎯 总结

这个 Apple 风格 UI 设计系统提供了：

✅ 完整的设计令牌系统
✅ 19+ 个高质量组件
✅ 完整的可访问性支持
✅ 性能优化最佳实践
✅ 响应式设计支持
✅ 深色模式支持

通过遵循这些指南，您可以创建出符合 Apple 标准、用户友好、性能优秀的现代 Web 应用程序。

最后更新: 2025-12-11 版本: 1.0.0

10 KiB Raw Blame History Unescape Escape