用户界面组件

相关源文件

• frontend/src/components/ImageUpload.tsx
• frontend/src/components/ImportCodeSection.tsx
• frontend/src/components/UrlInputSection.tsx
• frontend/src/components/preview/PreviewPane.tsx
• frontend/src/components/preview/extractHtml.ts
• frontend/src/components/preview/simpleHash.ts
• frontend/src/components/sidebar/Sidebar.tsx
• frontend/src/components/ui/tabs.tsx
• frontend/src/hooks/useThrottle.ts
• frontend/src/store/app-store.ts
• frontend/src/urls.ts

本文档详细概述了Screenshot-to-Code应用程序的用户界面组件。重点介绍了用户直接交互的UI元素之间的结构、关系和交互。有关为这些组件提供支持的状态管理信息，请参阅状态管理。

UI 组件架构

Screenshot-to-Code的前端采用了一种由状态驱动的架构，其中根据当前应用程序状态显示不同的UI组件。主要的应用程序状态定义在AppState枚举中，该枚举包括INITIAL、CODING和CODE_READY状态。

来源： frontend/src/store/app-store.ts1-31 frontend/src/components/sidebar/Sidebar.tsx1-179 frontend/src/components/preview/PreviewPane.tsx1-99

主要UI容器

应用程序UI组织在两个主要容器组件中，它们根据应用程序状态管理各种UI元素的显示

1. PreviewPane：显示生成代码预览的主显示区域
2. Sidebar：包含控件、历史记录和附加信息

来源： frontend/src/components/preview/PreviewPane.tsx1-99 frontend/src/components/sidebar/Sidebar.tsx1-179

输入组件

该应用程序为用户提供了三种输入内容以生成代码的方法

ImageUpload组件

ImageUpload组件允许用户通过拖放或文件选择来上传屏幕截图或视频录制。

主要功能

• 使用react-dropzone进行拖放文件上传
• 支持图片格式（PNG、JPEG）和视频格式（MOV、MP4、WEBM）
• 文件大小限制为20MB
• 使用react-hot-toast显示上传进度和错误消息
• 包含嵌入式屏幕录制功能，用于捕获网站交互

来源： frontend/src/components/ImageUpload.tsx1-195

UrlInputSection 组件

UrlInputSection组件允许用户输入URL以捕获屏幕截图以生成代码。

主要功能

• 需要ScreenshotOne API密钥（可在设置中配置）
• 向后端/api/screenshot端点发送请求
• 在捕获屏幕截图时显示加载状态
• 具有用户反馈的错误处理

来源： frontend/src/components/UrlInputSection.tsx1-78

ImportCodeSection 组件

ImportCodeSection组件允许用户导入现有的HTML代码进行修改。

主要功能

• 使用UI Dialog组件实现的模态对话框
• 通过textarea进行代码输入
• 堆栈选择（HTML+Tailwind，React等）
• 处理前的输入验证

来源： frontend/src/components/ImportCodeSection.tsx1-76

输出组件

PreviewPane 组件

PreviewPane组件是用于以不同格式查看生成代码输出的主显示区域。

主要功能

• 用于不同视图模式的标签页界面
• 桌面/移动预览标签页以不同的视口大小渲染代码
• 代码标签页显示格式化的HTML/CSS/JS
• 下载按钮用于保存生成的代码
• 重置按钮用于重新开始

来源： frontend/src/components/preview/PreviewPane.tsx1-99 frontend/src/components/ui/tabs.tsx1-53

Sidebar 组件

侧边栏组件

Sidebar组件是几个关键UI元素的容器，这些元素会根据应用程序状态而变化。

关键状态和组件

• 在CODING状态下：显示加载指示器、执行状态和取消按钮
• 在CODE_READY状态下：显示更新说明输入、更新按钮和重新生成选项
• 始终在顶部显示variants组件，用于切换不同的代码变体
• 显示上传的参考图像（屏幕截图/视频）
• 底部显示提交历史

来源： frontend/src/components/sidebar/Sidebar.tsx1-179

更新说明界面

当处于CODE_READY状态时，侧边栏会显示一个界面，供用户输入用于更新生成代码的说明。

主要功能

• 用于输入自然语言更新说明的文本区域
• 用于提交说明的更新按钮（支持Enter键快捷方式）
• 重新生成按钮，用于从头开始重新生成代码
• 选择与编辑模式切换开关（在功能启用时）

来源： frontend/src/components/sidebar/Sidebar.tsx87-121 frontend/src/store/app-store.ts9-25

状态与数据流

UI组件由Zustand存储中保存的状态驱动。控制UI的关键存储是

1. AppStore：控制应用程序状态（INITIAL、CODING、CODE_READY）和UI模式
   • 管理更新说明文本
   • 控制选择与编辑模式状态
2. ProjectStore：管理项目特定数据
   • 跟踪参考图像
   • 管理输入模式（图像/视频）
   • 存储提交历史和变体

来源： frontend/src/store/app-store.ts1-31 frontend/src/components/sidebar/Sidebar.tsx31-34 frontend/src/components/preview/PreviewPane.tsx25-36

用户交互流程

以下图表说明了通过应用程序UI的典型用户交互流程

来源： frontend/src/components/sidebar/Sidebar.tsx1-179 frontend/src/components/preview/PreviewPane.tsx1-99 frontend/src/store/app-store.ts1-31

组件摘要表

组件	文件路径	目的	主要属性
ImageUpload	frontend/src/components/ImageUpload.tsx	处理图像/视频上传	setReferenceImages
UrlInputSection	frontend/src/components/UrlInputSection.tsx	从URL捕获屏幕截图	screenshotOneApiKey, doCreate
ImportCodeSection	frontend/src/components/ImportCodeSection.tsx	导入现有代码	importFromCode
PreviewPane	frontend/src/components/preview/PreviewPane.tsx	以各种模式显示生成的代码	doUpdate, reset, settings
侧边栏	frontend/src/components/sidebar/Sidebar.tsx	包含控件和附加信息	doUpdate, regenerate, cancelCodeGeneration
变体	frontend/src/components/variants/Variants.tsx	显示代码变体	(使用项目存储)
HistoryDisplay	frontend/src/components/history/HistoryDisplay.tsx	显示提交历史	shouldDisableReverts

来源： frontend/src/components/ImageUpload.tsx54-59 frontend/src/components/UrlInputSection.tsx7-11 frontend/src/components/ImportCodeSection.tsx17-19 frontend/src/components/preview/PreviewPane.tsx18-22 frontend/src/components/sidebar/Sidebar.tsx16-21