deerflow2/frontend/docs/artifact-zoom-feature.md

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

// 缩放比例选项
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)

/* 缩放变量，默认为 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)

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 中使用

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