docs

docs/modules/AI集成-AIIntegration.md

@@ -0,0 +1,70 @@
+# AI 集成模块 (AI Integration Module)
+
+## 概述
+
+AI 集成模块是 Bolt 系统与 AI 模型(如 Claude)交互的核心。它负责 AI 模型的配置、提示词处理和流式响应处理等功能。
+
+## 实现细节
+
+文件位置: `app/lib/.server/llm/`
+
+### 主要组件
+
+#### 1. API 密钥管理 (api-key.ts)
+
+负责安全地管理和验证 AI 服务的 API 密钥。
+
+#### 2. 基础 URL 配置 (base-url.ts)
+
+配置 AI 服务的基础 URL,支持不同环境(如开发、生产)的 URL 切换。
+
+#### 3. 常量定义 (constants.ts)
+
+定义了与 AI 集成相关的常量,如模型名称、超时时间等。
+
+#### 4. 模型配置 (model.ts)
+
+配置不同 AI 模型的参数,如温度、最大 token 数等。
+
+#### 5. 提示词模板 (prompts.ts)
+
+定义和管理用于与 AI 模型交互的提示词模板。
+
+#### 6. 文本流处理 (stream-text.ts)
+
+处理 AI 模型的流式文本响应,支持实时显示生成的内容。
+
+#### 7. 可切换流实现 (switchable-stream.ts)
+
+允许在不同的流处理方式之间切换,提高系统的灵活性。
+
+## 使用方式
+
+以下是一个使用 AI 集成模块的<E59D97><E79A84>例:
+
+```typescript
+import { createChatCompletion } from '~/lib/.server/llm/model';
+import { SYSTEM_PROMPT } from '~/lib/.server/llm/prompts';
+
+async function getAIResponse(userInput: string) {
+  const response = await createChatCompletion({
+    messages: [
+      { role: 'system', content: SYSTEM_PROMPT },
+      { role: 'user', content: userInput }
+    ],
+    stream: true
+  });
+
+  // 处理流式响应
+  for await (const chunk of response) {
+    console.log(chunk.choices[0]?.delta?.content || '');
+  }
+}
+```
+
+## 注意事项
+
+- API 密钥应妥善保管,避免泄露
+- 考虑实现请求速率限制,避免超出 AI 服务的使用配额
+- 流式响应处理应考虑网络异常情况的处理
+- 提示词模板应根据不同场景进行优化,以获得最佳的 AI 响应

docs/modules/webcontainer.md

@@ -0,0 +1,48 @@
+# WebContainer 模块
+
+## 概述
+
+WebContainer 模块是 Bolt 系统的核心,它提供了在浏览器中运行全栈应用的能力。
+
+## 实现细节
+
+文件位置: `app/lib/webcontainer/index.ts`
+
+### 初始化
+
+WebContainer 的初始化过程如下:
+
+1. 使用 `WebContainer.boot()` 方法启动 WebContainer
+2. 设置工作目录名称
+3. 初始化完成后,更新 `webcontainerContext.loaded` 状态
+
+### 热更新处理
+
+该模块使用 Vite 的热更新 API 来保持 WebContainer 实例在开发过程中的持久性:
+
+```typescript
+if (import.meta.hot) {
+  import.meta.hot.data.webcontainer = webcontainer;
+}
+```
+
+### 导出
+
+模块导出 `webcontainer` Promise,允许其他模块异步访问 WebContainer 实例。
+
+## 使用方式
+
+其他模块可以通过以下方式使用 WebContainer:
+
+```typescript
+import { webcontainer } from '~/lib/webcontainer';
+// 使用 WebContainer
+webcontainer.then(async (wc) => {
+  // 执行文件操作、运行命令等
+});
+```
+
+## 注意事项
+
+- WebContainer 仅在客户端环境中初始化,服务器端渲染(SSR)时不会执行初始化逻辑
+- 使用 WebContainer 时应注意异步操作的处理

docs/modules/任务执行-TaskExecution.md

@@ -0,0 +1,103 @@
+# 任务执行模块 (Task Execution Module)
+
+## 概述
+
+任务执行模块是 Bolt 系统的核心功能之一,负责解析和执行 AI 响应中的任务指令,并将执行过程实时显示在终端中。这个模块增强了用户与 AI 助手之间的交互,使开发过程更加直观和高效。
+
+## 实现细节
+
+文件位置: `app/lib/runtime/action-runner.ts`
+
+### 主要类: ActionRunner
+
+`ActionRunner` 类是任务执行模块的核心,它负责解析 AI 响应并执行相应的操作。
+
+#### 主要方法
+
+1. `run(aiResponse: string): Promise<void>`: 解析并执行 AI 响应中的任务
+2. `executeAction(action: Action): Promise<void>`: 执行单个任务
+3. `updateTerminal(output: string): void`: 更新终端显示
+
+### 任务类型
+
+任务执行模块支持多种类型的任务,包括但不限于:
+
+- 文件操作: 创建、修改、删除文件
+- 依赖管理: 安装、更新、删除依赖包
+- 命令执行: 运行 shell 命令
+- 项目配置: 修改项目设置
+
+## 使用方式
+
+在处理 AI 响应时,系统会自动使用 `ActionRunner` 来执行相关任务。开发者可以通过以下方式与此功能交互:
+
+```typescript
+import { ActionRunner } from '~/lib/runtime/action-runner';
+import { webcontainer } from '~/lib/webcontainer';
+
+async function handleAIResponse(aiResponse: string) {
+  const actionRunner = new ActionRunner(webcontainer);
+  await actionRunner.run(aiResponse);
+}
+````
+
+
+## 终端显示
+
+任务执行过程会实时显示在终端组件中。终端组件位于 `app/components/workbench/terminal/Terminal.tsx`。
+
+### 更新终端显示
+
+`ActionRunner` 使用 `updateTerminal` 方法来更新终端显示:
+
+```typescript
+private updateTerminal(output: string) {
+  // 使用 terminalStore 或其他状态管理方法更新终端显示
+  terminalStore.appendOutput(output);
+}
+````
+
+
+## 安全考虑
+
+为确保系统安全,任务执行模块实施了以下安全措施:
+
+1. 任务白名单: 只允许执行预定义的安全任务
+2. 输入验证: 严格验证和清理所有输入
+3. 资源限制: 限制任务的执行时间和资源使用
+
+## 错误处理
+
+任务执行过程中可能遇到的错误会被捕获并显示在终端中,同时也会通过用户界面提供适当的反馈。
+
+## 性能优化
+
+为了保证在处理大量输出时的性能,任务执行模块采用了以下优化策略:
+
+1. 批量更新: 合并短时间内的多次更新
+2. 虚拟滚动: 在显示大量输出时使用虚拟滚动技术
+3. 输出截断: 当输出超过一定限制时,截断旧的输出
+
+## 扩展性
+
+任务执行模块设计为可扩展的,允许轻松添加新的任务类型。要添加新的任务类型,需要:
+
+1. 在 `Action` 类型中定义新的任务结构
+2. 在 `ActionRunner` 类中实现相应的执行逻辑
+3. 更新 AI 模型,使其能够生成新任务类型的指令
+
+## 注意事项
+
+- 确保 AI 响应的格式符合预定义的任务指令结构
+- 定期审查和更新任务白名单,以适应新的需求和潜在的安全风险
+- 监控任务执行的性能,及时优化高耗时或高资源消耗的操作
+- 提供清晰的文档,说明支持的任务类型和使用方法
+
+## 未来改进
+
+- 实现任务队列,支持并行执行多个任务
+- 添加任务执行的撤销/重做功能
+- 实现更细粒度的权限控制,允许用户自定义允许的任务类型
+- 集成日志系统,方便调试和问题追踪
+
+通过这个强大的任务执行模块,Bolt 系统能够将 AI 的建议直接转化为实际的代码修改和操作,大大提高了开发效率和用户体验。

docs/modules/工作台-Workbench.md

@@ -0,0 +1,66 @@
+# 工作台模块 (Workbench Module)
+
+## 概述
+
+工作台模块是 Bolt 系统的核心用户界面组件,集成了编辑器、文件树、预览等功能,为用户提供了一个完整的开发环境。
+
+## 实现细节
+
+文件位置: `app/components/workbench/`
+
+### 主要组件
+
+#### 1. Workbench (Workbench.client.tsx)
+
+工作台的主组件,负责整合其他子组件并管理整体布局。
+
+#### 2. EditorPanel (EditorPanel.tsx)
+
+集成了代码编辑器,提供文件编辑功能。
+
+#### 3. FileTree (FileTree.tsx)
+
+显示项目文件结构,允许用户浏览和选择文件。
+
+#### 4. Preview (Preview.tsx)
+
+预览组件,用于实时显示应用运行效果。
+
+#### 5. Terminal (Terminal.tsx)
+
+集成的终端组件,允许用户执行命令行操作。
+
+### 状态管理
+
+工作台使用 nanostores 进行状态管理:
+
+```typescript
+import { atom, map } from 'nanostores';
+
+export const showWorkbench = atom(false);
+export const currentView = atom<'code' | 'preview'>('code');
+export const unsavedFiles = atom(new Set<string>());
+```
+
+## 使用方式
+
+在 React 应用中使用工作台组件:
+
+```tsx
+import { Workbench } from '~/components/workbench/Workbench.client';
+
+function App() {
+  return (
+    <div className="app-container">
+      <Workbench chatStarted={true} isStreaming={false} />
+    </div>
+  );
+}
+```
+
+## 注意事项
+
+- 工作台布局应考虑响应式设计,适应不同屏幕尺寸
+- 文件树组件应优化大型项目的性能,考虑实现虚拟滚动
+- 预览组件需要注意安全性,防止恶意代码执行
+- 终端组件应限制某些危险操作,保护用户系统安全

docs/modules/工具和辅助函数-UtilsAndHelpers.md

@@ -0,0 +1,72 @@
+# 工具和辅助函数模块 (Utils and Helpers Module)
+
+## 概述
+
+工具和辅助函数模块提供了一系列通用的工具函数,用于简化开发过程中的常见任务。这些函数涵盖了日志记录、类名处理、文件差异计算、Markdown处理等多个方面。
+
+## 实现细节
+
+文件位置: `app/utils/`
+
+### 主要功能
+
+#### 1. 日志记录 (logger.ts)
+
+提供统一的日志记录接口,支持不同级别的日志输出。
+
+#### 2. 类名处理 (classNames.ts)
+
+用于动态生成和组合CSS类名。
+
+#### 3. 文件差异计算 (diff.ts)
+
+计算文件内容的差异,用于版本比较和冲突解决。
+
+#### 4. Markdown处理 (markdown.ts)
+
+提供Markdown解析和渲染相关的工具函数。
+
+### 示例代码
+
+类名处理 (classNames.ts):
+
+```typescript
+export function classNames(...classes: (string | undefined | null | false)[]) {
+  return classes.filter(Boolean).join(' ');
+}
+```
+
+
+## 使用方式
+
+在组件或其他模块中导入并使用工具函数:
+
+```typescript
+import { classNames } from '~/utils/classNames';
+import { createScopedLogger } from '~/utils/logger';
+
+const logger = createScopedLogger('MyComponent');
+
+function MyComponent({ isActive, isDisabled }) {
+  const className = classNames(
+    'base-class',
+    isActive && 'active',
+    isDisabled && 'disabled'
+  );
+
+  logger.debug('Rendering with className:', className);
+
+  // 组件渲染逻辑...
+}
+```
+
+
+## 注意事项
+
+- 保持工具函数的纯函数特性,避免副作用
+- 对于复杂的工具函数,编写单元测试确保其正确性
+- 考虑性能影响,优化频繁调用的工具函数
+- 保持文档的及时更新,特别是对于公共API的变更
+- 遵循一致的命名约定,提高代码可读性
+````
+

docs/modules/文件系统-FileSystem.md

@@ -0,0 +1,66 @@
+# 文件系统模块 (File System Module)
+
+## 概述
+
+文件系统模块是 Bolt 系统的核心组件之一,负责管理项目文件。它提供了文件的增删改查、修改追踪和差异计算等功能。
+
+## 实现细节
+
+文件位置: `app/lib/stores/files.ts`
+
+### 主要类: FilesStore
+
+`FilesStore` 类是文件系统模块的核心,它使用 nanostores 来管理文件状态。
+
+#### 主要属性
+
+- `files`: 存储文件内容的 Map
+- `modifiedFiles`: 追踪已修改文件的 Set
+
+#### 主要方法
+
+1. `setFiles(files: FileMap)`: 设置文件系统的初始状态
+2. `getFile(filePath: string)`: 获取指定路径的文件
+3. `writeFile(filePath: string, content: string)`: 写入文件内容
+4. `deleteFile(filePath: string)`: 删除指定文件
+5. `renameFile(oldPath: string, newPath: string)`: 重命名文件
+6. `resetFile(filePath: string)`: 重置文件到初始状态
+
+### 文件差异计算
+
+文件系统模块使用 `diff` 库来计算文件的差异:
+
+```typescript
+import { createTwoFilesPatch } from 'diff';
+
+// ...
+
+diffFiles(fileName: string, oldFileContent: string, newFileContent: string) {
+  return createTwoFilesPatch(fileName, fileName, oldFileContent, newFileContent);
+}
+```
+
+## 使用方式
+
+其他模块可以通过以下方式使用文件系统:
+
+```typescript
+import { filesStore } from '~/lib/stores/files';
+
+// 读取文件
+const fileContent = filesStore.getFile('/path/to/file.js');
+
+// 写入文件
+filesStore.writeFile('/path/to/newfile.js', 'console.log("Hello, World!");');
+
+// 监听文件变化
+filesStore.subscribe((files) => {
+  console.log('Files have been updated:', files);
+});
+```
+
+## 注意事项
+
+- 文件操作应考虑异步处理,特别是在与 WebContainer 交互时
+- 大文件操作可能会影响性能,应考虑分块处理或虚拟化
+- 文件修改追踪对于实现撤销/重做功能很重要

docs/modules/状态管理-StateManagement.md

@@ -0,0 +1,71 @@
+# 状态管理模块 (State Management Module)
+
+## 概述
+
+状态管理模块使用 nanostores 来管理 Bolt 系统的全局状态。它提供了一种轻量级、高效的方式来处理跨组件的状态共享和更新。
+
+## 实现细节
+
+文件位置: `app/lib/stores/`
+
+### 主要 Store
+
+#### 1. workbenchStore (workbench.ts)
+
+管理工作台相关的状态,如当前视图、未保存文件等。
+
+#### 2. editorStore (editor.ts)
+
+管理编辑器相关的状态,如当前选中的文件、文档内容等。
+
+#### 3. filesStore (files.ts)
+
+管理文件系统相关的状态,如文件列表、修改状态等。
+
+#### 4. themeStore (theme.ts)
+
+管理应用主题相关的状态,如当前主题设置。
+
+### 核心概念
+
+- Atom: 用于存储单一值的状态单元
+- Map: 用于存储键值对集合的状态单元
+- Computed: 基于其他状态计算得出的派生状态
+
+### 示例代码
+
+```typescript
+import { atom, map, computed } from 'nanostores';
+
+export const selectedFile = atom<string | undefined>();
+export const files = map<Record<string, FileContent>>({});
+
+export const currentFileContent = computed(
+  [selectedFile, files],
+  (selected, filesMap) => selected ? filesMap[selected] : undefined
+);
+```
+
+## 使用方式
+
+在 React 组件中使用状态:
+
+```tsx
+import { useStore } from '@nanostores/react';
+import { selectedFile, currentFileContent } from '~/lib/stores/editor';
+
+function EditorComponent() {
+  const selected = useStore(selectedFile);
+  const content = useStore(currentFileContent);
+
+  // 使用 selected 和 content 渲染组件
+}
+```
+
+## 注意事项
+
+- 避免过度使用全局状态,优先考虑组件本地状态
+- 对于频繁更新的状态,考虑使用 computed 来优化性能
+- 确保在组件卸载时正确清理订阅,避免内存泄漏
+- 考虑实现状态持久化,以支持会话恢复功能
+- 在使用异步操作更新状态时,注意处理竞态条件

docs/modules/编辑器-Editor.md

@@ -0,0 +1,67 @@
+# 编辑器模块 (Editor Module)
+
+## 概述
+
+编辑器模块基于 CodeMirror 实现,为 Bolt 系统提供强大的代码编辑功能。它支持语法高亮、自动补全、主题切换等特性。
+
+## 实现细节
+
+文件位置: `app/components/editor/codemirror/CodeMirrorEditor.tsx`
+
+### 主要组件: CodeMirrorEditor
+
+`CodeMirrorEditor` 组件是编辑器模块的核心,它封装了 CodeMirror 的功能并提供了额外的定制。
+
+#### 主要属性
+
+- `value`: 编辑器的当前内容
+- `onChange`: 内容变化时的回调函数
+- `language`: 当前编辑的语言
+- `theme`: 编辑器主题
+- `readOnly`: 是否为只读模式
+
+#### 主要功能
+
+1. 语法高亮: 根据文件类型自动应用相应的语法高亮
+2. 自动补全: 提供智能的代码补全建议
+3. 主题切换: 支持明暗主题切换
+4. 行号显示: 显示代码行号,便于定位
+5. 括号匹配: 自动匹配括号,提高编码效率
+
+### 编辑器状态管理
+
+编辑器状态使用 nanostores 进行管理:
+
+```typescript
+import { atom, map } from 'nanostores';
+
+export const selectedFile = atom<string | undefined>();
+export const documents = map<Record<string, EditorDocument>>({});
+```
+
+## 使用方式
+
+在 React 组件中使用 CodeMirrorEditor:
+
+```tsx
+import { CodeMirrorEditor } from '~/components/editor/codemirror/CodeMirrorEditor';
+
+function MyEditor() {
+  const [code, setCode] = useState('console.log("Hello, Bolt!");');
+
+  return (
+    <CodeMirrorEditor
+      value={code}
+      onChange={setCode}
+      language="javascript"
+      theme="dark"
+    />
+  );
+}
+```
+
+## 注意事项
+
+- 大文件加载可能会影响性能,考虑实现虚拟滚动或分块加载
+- 编辑器的主题应与整体 UI 主题保持一致
+- 考虑实现自定义快捷键和命令,以提高用户效率

docs/modules/聊天界面-ChatInterface.md

@@ -0,0 +1,65 @@
+# 聊天界面模块 (Chat Interface Module)
+
+## 概述
+
+聊天界面模块是用户与 AI 交互的主要入口,提供了直观的对话式交互体验。它包括消息显示、输入区域、代码块渲染等功能。
+
+## 实现细节
+
+文件位置: `app/components/chat/`
+
+### 主要组件
+
+#### 1. BaseChat (BaseChat.tsx)
+
+基础聊天组件,提供聊天界面的核心结构和功能。
+
+#### 2. Chat (Chat.client.tsx)
+
+客户端聊天组件,处理用户输入和 AI 响应的交互逻辑。
+
+#### 3. Markdown (Markdown.tsx)
+
+负责将 AI 响应中的 Markdown 内容渲染为 HTML。
+
+#### 4. CodeBlock (CodeBlock.tsx)
+
+专门用于渲染和高亮显示代码块的组件。
+
+#### 5. Artifact (Artifact.tsx)
+
+用于显示 AI 生成的特殊内容,如文件修改建议等。
+
+### 状态管理
+
+聊天界面使用 React 的 useState 和 useEffect 钩子管理本地状态,同时也可能与全局状态管理（如 nanostores）交互。
+
+```typescript
+const [messages, setMessages] = useState<Message[]>([]);
+const [input, setInput] = useState('');
+const [isStreaming, setIsStreaming] = useState(false);
+```
+
+## 使<><E4BDBF>方式
+
+在 React 应用中使用聊天界面组件:
+
+```tsx
+import { Chat } from '~/components/chat/Chat.client';
+
+function App() {
+  return (
+    <div className="app-container">
+      <Chat />
+    </div>
+  );
+}
+```
+
+## 注意事项
+
+- 聊天界面应支持长对话历史的高效渲染和滚动
+- 代码块渲染应考虑多种编程语言的语法高亮
+- 消息输入应考虑实现自动补全和提示功能
+- 界面应适配移动设备,提供良好的移动端体验
+- 考虑实现消息的本地存储,以支持对话恢复功能

docs/modules/路由和页面-RoutesAndPages.md

@@ -0,0 +1,71 @@
+# 路由和页面模块 (Routes and Pages Module)
+
+## 概述
+
+路由和页面模块使用 Remix 框架来管理 Bolt 系统的路由和页面渲染。它定义了应用的URL结构,并将URL映射到相应的React组件。
+
+## 实现细节
+
+文件位置: `app/routes/`
+
+### 主要路由
+
+#### 1. 根路由 (_index.tsx)
+
+应用的主入口,渲染主页面结构。
+
+#### 2. 聊天路由 (chat.tsx)
+
+处理聊天相关的页面和逻辑。
+
+### 路由结构
+
+Remix 使用文件系统路由,文件名和目录结构直接映射到URL路径。
+
+### 示例代码
+
+根路由 (_index.tsx):
+
+```tsx
+import { json, type MetaFunction } from '@remix-run/cloudflare';
+import { ClientOnly } from 'remix-utils/client-only';
+import { BaseChat } from '~/components/chat/BaseChat';
+import { Chat } from '~/components/chat/Chat.client';
+import { Header } from '~/components/header/Header';
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: 'Bolt' },
+    { name: 'description', content: 'Talk with Bolt, an AI assistant from StackBlitz' }
+  ];
+};
+
+export const loader = () => json({});
+
+export default function Index() {
+  return (
+    <div className="flex flex-col h-full w-full">
+      <Header />
+      <ClientOnly fallback={<BaseChat />}>{() => <Chat />}</ClientOnly>
+    </div>
+  );
+}
+````
+
+
+## 使用方式
+
+在 Remix 应用中定义新路由:
+
+1. 在 `app/routes/` 目录下创建新的 .tsx 文件
+2. 导出默认组件作为页面内容
+3. 可选: 导出 loader 函数处理服务器端数据加载
+4. 可选: 导出 action 函数处理表单提交等操作
+
+## 注意事项
+
+- 使用嵌套路由时,注意正确设置布局组件
+- 对于需要认证的路由,实现适当的权限检查
+- 利用 Remix 的数据加载机制优化页面加载性能
+- 考虑实现错误边界,优雅处理路由级<E794B1><E7BAA7>的错误
+- 对于大型应用,考虑使用代码分割优化加载速度

docs/system-architecture.md

@@ -0,0 +1,109 @@
+# Bolt 系统架构
+
+## 1. 核心模块
+
+### 1.1 WebContainer
+
+WebContainer 是整个系统的核心,它提供了在浏览器中运行全栈应用的能力。
+
+- 位置: `app/lib/webcontainer/index.ts`
+- 主要功能:
+  - 初始化 WebContainer
+  - 提供文件系统、Node.js 运行时等功能
+
+### 1.2 文件系统
+
+文件系统模块负责管理项目文件。
+
+- 位置: `app/lib/stores/files.ts`
+- 主要功能:
+  - 文件的增删改查
+  - 文件修改追踪
+  - 文件差异计算
+
+### 1.3 编辑器
+
+编辑器模块基于 CodeMirror 实现,提供代码编辑功能。
+
+- 位置: `app/components/editor/codemirror/CodeMirrorEditor.tsx`
+- 主要功能:
+  - 代码高亮
+  - 语法提示
+  - 主题切换
+
+### 1.4 AI 集成
+
+AI 集成模块负责与 AI 模型(如 Claude)交互。
+
+- 位置: `app/lib/.server/llm/`
+- 主要功能:
+  - AI 模型配置
+  - 提示词处理
+  - 流式响应处理
+
+## 2. 用户界面组件
+
+### 2.1 聊天界面
+
+聊天界面是用户与 AI 交互的主要入口。
+
+- 位置: `app/components/chat/`
+- 主要组件:
+  - BaseChat: 基础聊天组件
+  - Markdown: Markdown 渲染组件
+  - CodeBlock: 代码块渲染组件
+
+### 2.2 工作台
+
+工作台集成了编辑器、文件树、预览等功能。
+
+- 位置: `app/components/workbench/`
+- 主要组件:
+  - Workbench: 工作台主组件
+  - EditorPanel: 编辑器面板
+  - FileTree: 文件树组件
+  - Preview: 预览组件
+
+## 3. 状态管理
+
+系统使用 nanostores 进行状态管理。
+
+- 位置: `app/lib/stores/`
+- 主要 store:
+  - workbench: 工作台状态
+  - editor: 编辑器状态
+  - files: 文件系统状态
+
+## 4. 路由和页面
+
+系统使用 Remix 进行路由管理。
+
+- 位置: `app/routes/`
+- 主要路由:
+  - 根路由: 应用入口
+  - 聊天路由: 聊天界面
+
+## 5. 工具和辅助函数
+
+- 位置: `app/utils/`
+- 主要功能:
+  - 日志记录
+  - 类名处理
+  - 文件差异计算
+  - Markdown 处理
+
+## 6. 样式
+
+系统使用 SCSS 和 UnoCSS 进行样式管理。
+
+- 位置: 
+  - `app/styles/`
+  - `uno.config.ts`
+
+## 7. 构建和部署
+
+系统使用 Vite 进行构建,部署到 Cloudflare Pages。
+
+- 位置:
+  - `vite.config.ts`
+  - `wrangler.toml`

docs/开发者指南-DeveloperGuide.md

@@ -0,0 +1,135 @@
+# Bolt 开发者指南 (Bolt Developer Guide)
+
+## 1. 项目概述
+
+Bolt 是一个基于浏览器的 AI 辅助开发工具,允许用户通过对话式交互来创建、编辑和部署全栈 Web 应用。本指南旨在帮助新开发者快速理解项目结构并开始贡献代码。
+
+## 2. 技术栈
+
+- 前端框架: React
+- 路由管理: Remix
+- 状态管理: nanostores
+- 样式: SCSS 和 UnoCSS
+- 编辑器: CodeMirror
+- 构建工具: Vite
+- 部署平台: Cloudflare Pages
+
+## 3. 项目结构
+
+```
+bolt.new/
+├── app/
+│ ├── components/     # React 组件
+│ ├── lib/            # 核心库和功能模块
+│ ├── routes/         # Remix 路由
+│ ├── styles/         # 全局样式
+│ └── utils/          # 工具函数
+├── public/           # 静态资源
+├── docs/             # 项目文档
+└── ...               # 配置文件等
+```
+
+## 4. 核心模块
+
+- [WebContainer](./modules/webcontainer.md): 浏览器中的全栈运行环境
+- [文件系统](./modules/文件系统-FileSystem.md): 管理项目文件
+- [编辑器](./modules/编辑器-Editor.md): 代码编辑功能
+- [AI 集成](./modules/AI集成-AIIntegration.md): 与 AI 模型交互
+- [工作台](./modules/工作台-Workbench.md): 集成开发环境
+- [聊天界面](./modules/聊天界面-ChatInterface.md): 用户与 AI 交互的主要入口
+- [状态管理](./modules/状态管理-StateManagement.md): 全局状态管理
+- [路由和页面](./modules/路由和页面-RoutesAndPages.md): 应用路由结构
+- [工具和辅助函数](./modules/工具和辅助函数-UtilsAndHelpers.md): 通用工具函数
+- [任务执行](./modules/任务执行-TaskExecution.md): AI 响应的任务执行和终端显示
+
+## 5. 开发流程
+
+1. 克隆仓库: `git clone https://github.com/stackblitz/bolt.new.git`
+2. 安装依赖: `pnpm install`
+3. 启动开发服务器: `pnpm dev`
+4. 在浏览器中访问 `http://localhost:3000`
+
+## 6. 代码规范
+
+- 使用 TypeScript 编写代码
+- 遵循 ESLint 和 Prettier 配置的代码风格
+- 组件使用函数式组件和 Hooks
+- 使用 nanostores 进行状态管理
+
+## 7. 测试
+
+- 单元测试: 使用 Jest 框架
+- 组件测试: 使用 React Testing Library
+- 运行测试: `pnpm test`
+
+## 8. 构建和部署
+
+- 构建项目: `pnpm build`
+- 部署到 Cloudflare Pages: 通过 GitHub Actions 自动部署
+
+## 9. 贡献指南
+
+1. Fork 项目仓库
+2. 创建功能分支: `git checkout -b feature/AmazingFeature`
+3. 提交更改: `git commit -m 'Add some AmazingFeature'`
+4. 推送到分支: `git push origin feature/AmazingFeature`
+5. 开启一个 Pull Request
+
+## 10. 有用的资源
+
+- [Remix 文档](https://remix.run/docs/en/main)
+- [React 文档](https://reactjs.org/docs/getting-started.html)
+- [nanostores 文档](https://github.com/nanostores/nanostores#readme)
+- [CodeMirror 文档](https://codemirror.net/docs/)
+- [Cloudflare Pages 文档](https://developers.cloudflare.com/pages/)
+
+## 11. 常见问题解答
+
+(这里可以添加一些常见的开发问题和解决方案)
+
+## 12. 联系方式
+
+如有任何问题或建议,请通过以下方式联系我们:
+
+- GitHub Issues: [https://github.com/stackblitz/bolt.new/issues](https://github.com/stackblitz/bolt.new/issues)
+- 邮箱: support@stackblitz.com
+
+## 13. AI 响应任务执行和终端显示
+
+Bolt 系统的一个关键特性是能够根据 AI 的响应执行各种任务，并将命令执行过程实时显示在终端中。这个功能增强了用户与 AI 助手之间的交互，使得开发过程更加直观和高效。
+
+### 实现细节
+
+- 位置: `app/lib/runtime/action-runner.ts`
+- 主要类: `ActionRunner`
+
+### 主要功能
+
+1. 解析 AI 响应中的任务指令
+2. 执行相应的操作（如文件修改、安装依赖等）
+3. 将执行过程实时显示在终端组件中
+
+### 使用方式
+
+在处理 AI 响应时，系统会自动识别和执行相关任务。开发者可以通过以下方式与此功能交互：
+
+```typescript
+import { ActionRunner } from '~/lib/runtime/action-runner';
+
+// 创建 ActionRunner 实例
+const actionRunner = new ActionRunner(webcontainer);
+
+// 执行 AI 响应中的任务
+await actionRunner.run(aiResponse);
+```
+
+### 注意事项
+
+- 确保 AI 响应的格式符合预定义的任务指令结构
+- 考虑任务执行的安全性，避免执行潜在的危险操作
+- 优化终端显示的性能，特别是在处理大量输出时
+- 提供适当的错误处理和用户反馈机制
+
+更多详细信息，请参阅 [任务执行模块文档](./modules/任务执行-TaskExecution.md)。
+
+欢迎加入 Bolt 开发社区,一起打造下一代的 AI 辅助开发工具!