# Artifact 缩放功能文档

## 功能概述

Artifact 缩放功能允许用户在预览 Markdown 和 HTML 内容时调整缩放比例（50% - 200%），提供更灵活的阅读体验。

## 文件结构

```
frontend/src/
├── components/
│   └── workspace/
│       └── artifacts/
│           └── artifact-file-detail.tsx    # 缩放组件定义与使用
└── styles/
    └── globals.css                          # 缩放相关 CSS 变量
```

## 核心实现

### 1. 缩放选择器组件 (`ArtifactZoomSelector`)

**位置**: `artifact-file-detail.tsx`

```tsx
// 缩放比例选项
const ZOOM_LEVELS = [50, 60, 70, 80, 90, 100, 110, 120, 130, 150, 175, 200];

export const ArtifactZoomSelector = ({
  value = 100,
  onChange,
}: ArtifactZoomSelectorProps) => {
  // 放大/缩小逻辑
  // 返回: [ZoomOut图标] [百分比文本] [ZoomIn图标]
};
```

**UI 设计**:
- 白色圆角容器，带轻微阴影和模糊效果
- 水平三元素布局：缩小按钮 | 百分比显示 | 放大按钮
- 支持深色模式
- 边界值时按钮自动禁用

### 2. CSS 变量缩放 (`globals.css`)

```css
/* 缩放变量，默认为 1 (100%) */
:root {
  --zoom-scale: 1;
}

/* 字体大小使用 calc() 计算 */
p {
  font-size: calc(14px * var(--zoom-scale));
}

[data-streamdown="heading-1"] {
  font-size: calc(20px * var(--zoom-scale));
}

[data-streamdown="heading-2"],
[data-streamdown="heading-3"] {
  font-size: calc(16px * var(--zoom-scale));
}
```

### 3. 预览组件集成 (`ArtifactFilePreview`)

```tsx
export function ArtifactFilePreview({
  content,
  language,
  zoom = 100,
}: {
  content: string;
  language: string;
  zoom?: number;
}) {
  const zoomScale = zoom / 100;

  // Markdown: 使用 CSS 变量
  if (language === "markdown") {
    return (
      <div style={{ "--zoom-scale": zoomScale }}>
        <Streamdown>...</Streamdown>
      </div>
    );
  }

  // HTML: 使用 CSS zoom 属性
  if (language === "html") {
    return <iframe style={{ zoom: zoomScale }} />;
  }
}
```

## 使用方式

### 在 ArtifactHeader 中使用

```tsx
function ArtifactFileDetail() {
  const [zoom, setZoom] = useState(100);

  return (
    <Artifact>
      <ArtifactHeader>
        <div className="flex items-center gap-2">
          {/* 其他控件 */}
          <ArtifactZoomSelector value={zoom} onChange={setZoom} />
        </div>
        {/* 中间标题 */}
        {/* 右侧操作按钮 */}
      </ArtifactHeader>

      <ArtifactContent>
        <ArtifactFilePreview
          content={content}
          language="markdown"
          zoom={zoom}
        />
      </ArtifactContent>
    </Artifact>
  );
}
```

## 缩放级别

| 级别 | 比例 |
|------|------|
| 最小 | 50% |
|      | 60%, 70%, 80%, 90% |
| 默认 | 100% |
|      | 110%, 120%, 130%, 150%, 175% |
| 最大 | 200% |

## 技术要点

1. **CSS 变量方式** - 适用于 Markdown 内容，通过 `--zoom-scale` 变量控制所有字体和间距
2. **CSS zoom 属性** - 适用于 HTML iframe，直接缩放整个内容
3. **状态提升** - `zoom` 状态在父组件管理，通过 props 传递给预览组件
4. **响应式** - 缩放变化时所有相关样式自动重新计算

## 扩展建议

- 可添加快捷键支持（如 `Ctrl++` / `Ctrl+-`）
- 可支持双击重置为 100%
- 可将缩放状态持久化到 localStorage