在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

abi/screenshot-to-code

菜单

状态管理

相关源文件

本文档介绍了如何在 Screenshot-to-Code 应用程序中使用 Zustand stores 来管理状态。该应用程序采用结构化的方法进行状态管理，将不同的关注点分离到处理应用程序不同状态方面的不同 stores 中。有关跟踪已生成代码更改的版本历史记录系统的信息，请参阅历史和版本控制。有关选择和编辑系统的详细信息，请参阅选择和编辑系统。

状态管理概述

Screenshot-to-Code 应用程序使用轻量级状态管理库 Zustand 来管理其状态。状态被划分为两个主要 stores：

  1. App Store（useAppStore） - 管理应用程序范围的状态，例如当前应用程序状态、更新说明和选择/编辑模式。
  2. Project Store（useProjectStore） - 管理项目特定的状态，包括参考图像、提交历史、代码变体和执行控制台。

来源：frontend/src/store/app-store.ts1-31 frontend/src/store/project-store.ts1-149 frontend/src/App.tsx17-18

App Store

App Store（useAppStore）管理影响应用程序整体行为和外观的应用程序范围内的状态。

关键状态属性

属性类型描述
appStateAppState 枚举应用程序的当前状态（INITIAL、CODING、CODE_READY）
updateInstruction字符串用于更新已生成代码的当前说明
inSelectAndEditMode布尔值是否启用了选择和编辑模式

方法

方法描述
setAppState更新应用程序的当前状态
setUpdateInstruction设置更新说明文本
toggleInSelectAndEditMode切换选择和编辑模式
disableInSelectAndEditMode禁用选择和编辑模式

来源：frontend/src/store/app-store.ts1-31 frontend/src/types.ts22-26

Project Store

Project Store（useProjectStore）管理项目特定的状态，包括代码生成和历史记录。

关键状态属性

属性类型描述
inputMode"image" | "video"当前的输入模式
isImportedFromCode布尔值项目是否从代码导入
referenceImagesstring[]参考图片 URL 数组
commitsRecord<string, Commit>提交哈希到提交对象的映射
headCommitHash | null当前提交的哈希
executionConsoles{ [key: number]: string[] }每个变体的控制台输出

方法

方法描述
addCommit将新提交添加到 store
removeCommit从 store 中移除提交
appendCommitCode将代码附加到特定提交的特定变体
setCommitCode设置特定提交的特定变体的代码
updateSelectedVariantIndex更新提交的选定变体索引
setHead设置当前提交哈希
appendExecutionConsole向执行控制台添加一行

来源：frontend/src/store/project-store.ts1-149 frontend/src/components/commits/types.ts1-37

状态流和组件交互

以下图表说明了状态如何在应用程序的 stores 和组件之间流动。

来源：frontend/src/App.tsx17-57 frontend/src/components/sidebar/Sidebar.tsx1-34 frontend/src/components/variants/Variants.tsx1-5 frontend/src/components/preview/PreviewPane.tsx12-26

状态转换流程

应用程序通过其不同状态遵循特定的状态转换流程。

来源：frontend/src/types.ts22-26 frontend/src/App.tsx170-228 frontend/src/components/sidebar/Sidebar.tsx1-34 frontend/src/components/variants/Variants.tsx1-5 frontend/src/components/preview/PreviewPane.tsx12-26

提交和版本历史系统

该应用程序使用类似 git 的提交系统来跟踪已生成代码的更改。每次代码生成或更新都会创建一个新的提交。

提交类型

提交类型描述
ai_create从屏幕截图生成初始代码
ai_edit根据用户说明更新代码
code_create用户导入的代码

提交结构

来源：frontend/src/components/commits/types.ts1-37 frontend/src/components/commits/utils.ts1-32

代码生成状态流

以下图表说明了代码生成过程中状态的管理方式。

来源：frontend/src/App.tsx169-228 frontend/src/App.tsx231-296

组件状态使用

应用程序中的不同组件以特定方式消耗来自 stores 的状态。

App 组件

App 组件是协调整个应用程序的主要组件。它

  1. 从 useAppStore 和 useProjectStore 消耗状态
  2. 管理高级应用程序流程
  3. 处理代码生成和更新
  4. 根据当前的 appState 渲染不同的 UI

来源：frontend/src/App.tsx27-57 frontend/src/App.tsx338-394

Sidebar 组件根据应用程序状态显示各种控件和信息。

  1. 在 CODING 状态下：显示加载器、执行控制台和代码预览。
  2. 在 CODE_READY 状态下：显示更新说明输入框、更新按钮、重新生成按钮和选择/编辑切换器。

来源：frontend/src/components/sidebar/Sidebar.tsx23-175

Variants 组件

Variants 组件允许用户在不同的已生成代码变体之间进行选择。

  1. 从 useProjectStore 消耗当前的提交和变体
  2. 显示变体选项网格
  3. 当用户选择不同的变体时，更新选定的变体索引

来源：frontend/src/components/variants/Variants.tsx1-42

PreviewPane 组件

PreviewPane 组件以不同格式显示已生成的代码。

  1. 从 useProjectStore 消耗当前代码
  2. 提供桌面预览、移动预览和代码视图的选项卡
  3. 代码准备好时包含重置和下载代码的按钮。

来源：frontend/src/components/preview/PreviewPane.tsx12-97

结论

Screenshot-to-Code 中的状态管理系统实现了关注点清晰分离，App Store 负责处理应用全局状态，Project Store 负责管理项目特定状态。这种组织方式使得跟踪生成代码的变化、管理变体以及在代码生成和更新过程中提供流畅的用户体验变得更加容易。