149 lines
3.3 KiB
Markdown
149 lines
3.3 KiB
Markdown
# 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 |