First

2025-12-09 17:35:12 +08:00 · 2025-12-09 17:35:12 +08:00 · eb02a24cd3
commit eb02a24cd3
32 changed files with 9137 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,3 @@
+dist
+node_modules
+coverage
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100
+}
--- a/Readme.md
+++ b/Readme.md
@ -0,0 +1,271 @@
+# 完整版产品需求文档 (PRD): “Orion” 沉浸式培训流程编辑器
+
+- **版本**: 1.1
+- **日期**: 2025年9月23日
+- **文档状态**: **最终版**
+
+---
+
+### **1. 产品愿景与目标**
+
+### **1.1 产品愿景**
+
+“Orion” 编辑器旨在**赋能各行业的培训专家**，使其能够通过一个直观、无代码的图形化界面，快速设计、构建和管理复杂的培训与考核流程。本产品是连接专业领域知识与沉浸式三维培训体验的核心桥梁。
+
+### **1.2 目标与要解决的问题**
+
+- **目标用户**: 企业内训师、行业专家、教学设计师、模拟仿真工程师。
+- **解决的问题**:
+    1. **高昂的开发成本**: 传统沉浸式培训内容的创建需要专业的程序员和三维艺术家紧密配合，开发周期长，成本高。
+    2. **专业知识壁垒**: 行业专家无法直接将他们的知识和流程转化为可执行的培训程序。
+    3. **流程迭代困难**: 对现有培训流程的任何微小修改都需要重新编程和编译，响应速度慢。
+
+### **1.3 V1.0 核心目标**
+
+交付一个功能完备、稳定可靠的**纯前端单机版编辑器**。它能够让用户独立完成培训流程的创建、编辑，并导出标准化的 `YAML` 配置文件，为下游的三维引擎加载端提供清晰、可执行的指令。
+
+---
+
+### **2. 用户画像 (User Personas)**
+
+- **安娜 (Anna) - 培训设计师**:
+    - **背景**: 某大型制造企业的资深培训师，精通设备操作规程，但没有编程背景。
+    - **痛点**: 每次更新培训内容，都需要向IT部门提需求，沟通成本高，效率低下。
+    - **期望**: “我希望能有一个像画流程图一样简单的工具，让我自己就能把操作步骤、考核要点都设计好，然后直接在我们的VR模拟器里跑起来。”
+- **大卫 (David) - 3D引擎开发者**:
+    - **背景**: 负责公司Unity/Unreal项目的技术开发。
+    - **痛点**: 经常需要花费大量时间将业务部门提供的Word文档或流程图“翻译”成代码逻辑。
+    - **期望**: “我希望业务部门能给我一个标准化的、机器可读的数据文件。我只需要写一个通用的解析器，就能自动生成培训场景，而不是为每个培训项目都硬编码逻辑。”
+
+---
+
+### **3. 系统架构与设计**
+
+### **3.1 总体架构**
+
+本系统为**纯客户端单页面应用 (SPA)**，无需后端支持。所有数据处理和文件操作均在用户浏览器端完成。
+
+- **部署方式**: 静态网站托管 (如 Vercel, Netlify, GitHub Pages)。
+- **核心交互**: 用户通过图形化界面编排流程 -> 系统在内存中维护状态 -> 用户导出流程为 `.yaml` 文件 -> 用户将文件提供给三维引擎加载端使用。
+
+---
+
+### **4. 功能需求 (Functional Requirements)**
+
+### **4.1 模块一: 可视化流程编辑器 (画布 Canvas)**
+
+- **FR-1.1**: 画布应支持无限拖拽平移和滚轮缩放，提供流畅的导航体验。
+- **FR-1.2**: 用户可以在画布内的任意位置拖拽和移动节点。
+- **FR-1.3**: 用户可以从节点的连接桩 (Handle) 拖拽出连线，并连接到另一个节点的连接桩上。
+- **FR-1.4**: 系统应能自动对齐节点，并提供对齐辅助线。
+- **FR-1.5**: 用户可以框选多个节点和连线进行批量操作（移动、删除）。
+
+### **4.2 模块二: 组件库面板 (Component Library)**
+
+- **FR-2.1**: 面板应以列表或网格形式清晰地展示所有可用的节点类型（如：开始、结束、播放视频、单项选择题、操作提示等）。
+- **FR-2.2**: 用户可以从该面板**拖拽**一个节点类型到画布的任意位置，松手后在该位置创建一个新的节点实例。
+
+### **4.3 模块三: 属性配置面板 (Properties Panel)**
+
+- **FR-3.1**: 当用户在画布上选中一个节点或连线时，该面板应自动显示其对应的可配置属性。
+- **FR-3.2**: 面板应根据所选元素的属性定义（Schema）**动态生成**配置表单（如文本输入框、下拉选择、文件上传按钮等）。
+- **FR-3.3**: 用户在面板中修改的属性值应**实时**反映到画布中的节点数据上。
+- **FR-3.4**: 面板应对用户输入进行**实时校验**（如：必填项、URL格式等），并提供清晰的错误提示。
+
+### **4.4 模块四: 文件管理与导出**
+
+- **FR-4.1**: 用户应能点击“导出”按钮，将当前画布上的完整流程（包括所有节点、连线及其属性）序列化为一个 `.yaml` 文件并下载到本地。
+- **FR-4.2**: 用户应能点击“导入”按钮，通过文件选择器加载一个本地的 `.yaml` 文件，并将其内容完整地还原到画布上。
+- **FR-4.3**: 提供“新建”功能，用于清空当前画布，开始一个全新的流程设计。
+
+### **4.5 模块五: 全局工具栏 (Toolbar)**
+
+- **FR-5.1**: 提供**撤销 (Undo)** 和 **重做 (Redo)** 功能，支持多步操作历史。
+- **FR-5.2**: 提供“保存”（即导出）和“打开”（即导入）的快捷按钮。
+- **FR-5.3**: 提供“自动布局”功能，可一键整理画布上所有节点的布局。
+
+---
+
+### **5. 非功能性需求 (Non-Functional Requirements)**
+
+- **NFR-1 (性能)**: 在画布上存在200个节点时，拖拽、缩放等操作应保持流畅，无明显卡顿。
+- **NFR-2 (易用性)**: 界面应简洁直观，无编程经验的用户通过简单的引导即可上手使用。所有交互应符合主流图形编辑软件的习惯。
+- **NFR-3 (兼容性)**: 应兼容最新版本的 Chrome, Firefox, Edge 浏览器。
+- **NFR-4 (可扩展性)**: 添加一种新的节点类型应是低耦合的，仅需定义其外观、属性Schema和连接规则即可，无需改动编辑器核心代码。
+
+---
+
+### **6. 技术栈推荐**
+
+| 分类 | 技术/库 | 备注 |
+| --- | --- | --- |
+| **前端框架** | React (使用 Vite 构建) | 业界主流，生态完善 |
+| **UI 组件库** | Ant Design (AntD) | 提供高质量的企业级组件 |
+| **状态管理** | Zustand | 轻量、简洁、高效 |
+| **可视化编辑器** | React Flow | 功能强大且高度可定制的节点库 |
+| **拖拽功能** | dnd-kit | 现代化的React拖拽库，用于从组件库拖拽 |
+| **动态表单** | react-jsonschema-form | 根据Schema自动生成属性配置面板 |
+| **YAML处理** | js-yaml | 用于YAML的解析与序列化 |
+
+---
+
+### **7. 数据格式规范 (YAML Schema)**
+
+导出的 `orion.flow.yaml` 文件应遵循以下结构。该结构是前端编辑器与三维加载端之间的**核心契约**。
+
+```yaml
+# Orion 沉浸式培训流程配置文件
+# 版本: 1.0
+# 流程名称: 某型号压缩机启动安全检查
+# 创建时间: 2025-09-23T10:00:00Z
+
+# --- 元数据 ---
+metadata:
+  version: "1.0"
+  flowName: "某型号压缩机启动安全检查"
+  author: "Anna"
+
+# --- 节点列表 ---
+# 定义了流程中的每一个步骤
+nodes:
+  - id: "node-1" # 节点的唯一标识符
+    type: "startNode" # 节点类型，加载端根据此类型执行不同逻辑
+    position: { x: 50, y: 100 } # 节点在画布上的位置，仅供编辑器使用
+    data:
+      label: "开始流程"
+
+  - id: "node-2"
+    type: "instructionNode"
+    position: { x: 250, y: 100 }
+    data:
+      label: "穿戴个人防护装备"
+      # 指令节点的详细文本，支持Markdown
+      text: "请确保您已正确穿戴以下装备：\\n- 安全帽\\n- 防护手套\\n- 护目镜"
+      # 可选：关联一个三维模型进行高亮提示
+      targetModelId: "ppe_equipment_model"
+
+  - id: "node-3"
+    type: "quizSingleChoiceNode"
+    position: { x: 500, y: 100 }
+    data:
+      label: "安全知识考核"
+      question: "启动设备前，必须按下的紧急停止按钮应处于什么状态？"
+      options:
+        - id: "opt-a"
+          text: "A. 按下状态"
+        - id: "opt-b"
+          text: "B. 弹起状态"
+      correctOptionId: "opt-b" # 正确答案的ID
+
+# --- 边列表 ---
+# 定义了节点之间的连接关系和流程走向
+edges:
+  # 从“开始”到“穿戴装备”
+  - id: "edge-1-2"
+    source: "node-1" # 源节点ID
+    target: "node-2" # 目标节点ID
+    sourceHandle: "sh-1-out" # 源节点的哪个连接桩
+    targetHandle: "th-2-in" # 目标节点的哪个连接桩
+
+  # 从“穿戴装备”到“安全考核”
+  - id: "edge-2-3"
+    source: "node-2"
+    target: "node-3"
+    sourceHandle: "sh-2-out"
+    targetHandle: "th-3-in"
+
+```
+
+---
+
+### **8. V1.0 范围之外 (Future Roadmap)**
+
+- 用户认证与云端项目存储
+- 多人实时协作编辑
+- 版本历史与回滚
+- 与三维资源库的集成（直接在编辑器中选择和预览3D模型）
+- 流程逻辑的条件分支与变量系统
+- 发布为可复用的流程模板
+
+---
+
+### **附录A: 技术设计规范**
+
+---
+
+### **9. 程序结构设计 (Program Structure Design)**
+
+为保证项目的可维护性、可扩展性和团队协作效率，项目采用功能模块化的目录结构。
+
+### **9.1 推荐目录结构 (基于Vite + React)**
+
+```
+orion-editor/
+├── public/                  # 静态资源 (favicon, etc.)
+├── src/
+│   ├── assets/              # 图片, SVG, 字体等项目资源
+│   ├── components/          # 全局可复用UI组件
+│   │   ├── common/          # 基础原子组件 (Button, Input, Modal...)
+│   │   └── layout/          # 页面布局组件 (Header, Sidebar, CanvasContainer...)
+│   ├── features/            # **核心功能模块目录**
+│   │   ├── editor-canvas/   # 画布核心功能
+│   │   ├── node-library/    # 节点库面板
+│   │   ├── properties-panel/ # 属性配置面板
+│   │   └── file-handler/    # 文件导入导出逻辑
+│   ├── hooks/               # 自定义React Hooks (e.g., useDebounce)
+│   ├── store/               # 全局状态管理 (Zustand)
+│   │   └── flowStore.ts     # 负责管理节点、边的核心状态
+│   ├── types/               # 全局TypeScript类型定义
+│   │   └── index.ts         # (e.g., INode, IEdge)
+│   ├── utils/               # 通用工具函数 (e.g., yamlParser.ts, idGenerator.ts)
+│   ├── App.tsx              # 应用主组件
+│   └── main.tsx             # 应用入口文件
+├── .eslintrc.cjs            # ESLint 配置文件
+├── .prettierrc.json         # Prettier 配置文件
+├── package.json
+└── tsconfig.json
+
+```
+
+### **9.2 组件设计哲学**
+
+- **函数式组件与Hooks**: 所有组件必须使用函数式组件 (Functional Components) 配合 Hooks 编写。
+- **关注点分离**: 遵循“容器(Container)”与“展示(Presentational)”组件的分离思想。
+- **高内聚，低耦合**: 每个功能模块 (`features/`下的目录) 应尽可能独立。
+
+### **9.3 状态管理策略**
+
+- **全局状态 (Zustand)**: 用于管理整个流程图的核心数据（所有节点、边），作为唯一的数据信任源。
+- **组件本地状态 (useState)**: 用于管理与UI相关的、不影响全局数据的状态。
+
+### **10. 编码规范 (Coding Standards)**
+
+### **10.1 语言与工具**
+
+- **语言**: **TypeScript**。强制使用，确保类型安全。
+- **代码格式化**: **Prettier**。在代码提交时自动格式化。
+- **代码质量检查**: **ESLint**。用于发现代码中的潜在问题和不规范写法。
+
+### **10.2 命名规范**
+
+- **组件文件/函数**: `PascalCase` (e.g., `PropertiesPanel.tsx`)。
+- **变量/函数/Hooks**: `camelCase` (e.g., `const nodeData`, `useFlowState`)。
+- **TypeScript类型/接口**: `PascalCase` 并使用 `I` 或 `T` 前缀 (e.g., `interface INodeConfig`)。
+
+### **10.3 注释规范**
+
+- **复杂函数**: 必须添加 JSDoc 注释，说明函数功能、参数 (`@param`) 和返回值 (`@returns`)。
+- **业务逻辑**: 必须添加注释，解释“为什么”这么做。
+
+### **10.4 Git 工作流**
+
+- **分支模型**: 推荐使用 **GitHub Flow**。从 `main` 创建特性分支 `feat/xxx` 或 `fix/xxx`。
+- **提交信息 (Commit Message)**: 必须遵循 **Conventional Commits** 规范。
+    - 格式: `<type>(<scope>): <subject>`
+    - 示例: `feat(editor): add new quiz node type`
+
+---
+
+---
+
+以上便是为您整合的**完整版PRD**。它包含了从产品战略到工程实现的全方位规划，可以作为您项目启动和开发的核心指导文件。
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,25 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+  eslintPluginPrettierRecommended,
+])
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>orion-editor</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,50 @@
+{
+  "name": "orion-editor",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@rjsf/antd": "^6.1.2",
+    "@rjsf/core": "^6.1.2",
+    "@rjsf/utils": "^6.1.2",
+    "@rjsf/validator-ajv8": "^6.1.2",
+    "@types/dagre": "^0.7.53",
+    "antd": "^5.29.1",
+    "dagre": "^0.8.5",
+    "js-yaml": "^4.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "reactflow": "^11.11.4",
+    "zundo": "^2.3.0",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "prettier": "^3.6.2",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,32 @@
+.glass-panel {
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  border-radius: 16px;
+}
+
+.fade-in {
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.floating-toolbar {
+  background: rgba(15, 23, 42, 0.8) !important;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 50px !important;
+  padding: 8px 16px !important;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,115 @@
+import React, { useState } from 'react'
+import { Layout, ConfigProvider, theme, App as AntApp } from 'antd'
+import { DndContext, DragOverlay } from '@dnd-kit/core'
+import type { DragEndEvent } from '@dnd-kit/core'
+import EditorCanvas from './features/editor-canvas/EditorCanvas'
+import NodeLibrary, { SidebarNode } from './features/node-library/NodeLibrary'
+import { useFlowStore } from './store/flowStore'
+import PropertiesPanel from './features/properties-panel/PropertiesPanel'
+import Toolbar from './features/toolbar/Toolbar'
+import Header from './features/header/Header'
+import LoginPage from './features/auth/LoginPage'
+import './App.css'
+
+const { Content, Sider } = Layout
+
+const App: React.FC = () => {
+  const { reactFlowInstance, setNodes, nodes } = useFlowStore()
+  const [isLoggedIn, setIsLoggedIn] = useState(false)
+  const [activeId, setActiveId] = useState<string | null>(null)
+  const [activeData, setActiveData] = useState<{ type: string; label: string } | null>(null)
+
+  const handleDragStart = (event: any) => {
+    setActiveId(event.active.id)
+    setActiveData(event.active.data.current)
+  }
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+
+    setActiveId(null)
+    setActiveData(null)
+
+    if (!over || !active.data.current || !reactFlowInstance) return
+
+    if (over.id === 'editor-canvas') {
+      const type = active.data.current.type
+      const label = active.data.current.label
+
+      // Use the position of the dragged item
+      const position = reactFlowInstance.screenToFlowPosition({
+        x: active.rect.current.translated?.left ?? 0,
+        y: active.rect.current.translated?.top ?? 0,
+      })
+
+      const newNode = {
+        id: `${type}-${Date.now()}`,
+        type,
+        position,
+        data: { label },
+      }
+
+      setNodes([...nodes, newNode])
+    }
+  }
+
+  return (
+    <ConfigProvider
+      theme={{
+        algorithm: theme.darkAlgorithm,
+        token: {
+          colorPrimary: '#3b82f6',
+          borderRadius: 8,
+          colorBgContainer: '#1e293b',
+        },
+      }}
+    >
+      <AntApp>
+        {!isLoggedIn ? (
+          <LoginPage onLogin={() => setIsLoggedIn(true)} />
+        ) : (
+          <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+            <Layout style={{ height: '100vh', background: 'transparent' }}>
+              <Header onLogout={() => setIsLoggedIn(false)} />
+              <Layout style={{ background: 'transparent' }}>
+                <Sider
+                  width={260}
+                  style={{
+                    background: 'rgba(30, 41, 59, 0.5)',
+                    borderRight: '1px solid rgba(255,255,255,0.1)',
+                    backdropFilter: 'blur(10px)'
+                  }}
+                >
+                  <NodeLibrary />
+                </Sider>
+                <Content style={{ position: 'relative' }}>
+                  <Toolbar />
+                  <EditorCanvas />
+                </Content>
+                <Sider
+                  width={320}
+                  style={{
+                    background: 'rgba(30, 41, 59, 0.5)',
+                    borderLeft: '1px solid rgba(255,255,255,0.1)',
+                    backdropFilter: 'blur(10px)'
+                  }}
+                >
+                  <PropertiesPanel />
+                </Sider>
+              </Layout>
+            </Layout>
+            <DragOverlay>
+              {activeId && activeData ? (
+                <div style={{ transform: 'scale(1.05)', cursor: 'grabbing' }}>
+                  <SidebarNode type={activeData.type} label={activeData.label} />
+                </div>
+              ) : null}
+            </DragOverlay>
+          </DndContext>
+        )}
+      </AntApp>
+    </ConfigProvider>
+  )
+}
+
+export default App
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@ -0,0 +1,78 @@
+import { Component } from 'react';
+import type { ErrorInfo, ReactNode } from 'react';
+import { Button, Result, Typography } from 'antd';
+import { ReloadOutlined } from '@ant-design/icons';
+
+const { Paragraph, Text } = Typography;
+
+interface Props {
+    children?: ReactNode;
+}
+
+interface State {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: ErrorInfo | null;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+    public state: State = {
+        hasError: false,
+        error: null,
+        errorInfo: null
+    };
+
+    public static getDerivedStateFromError(error: Error): State {
+        return { hasError: true, error, errorInfo: null };
+    }
+
+    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error('Uncaught error:', error, errorInfo);
+        this.setState({ error, errorInfo });
+    }
+
+    public render() {
+        if (this.state.hasError) {
+            return (
+                <div style={{
+                    height: '100vh',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: '#1e293b'
+                }}>
+                    <Result
+                        status="error"
+                        title={<span style={{ color: '#f8fafc' }}>出错了</span>}
+                        subTitle={<span style={{ color: '#94a3b8' }}>抱歉，发生了一个意外错误。</span>}
+                        extra={[
+                            <Button
+                                type="primary"
+                                key="console"
+                                icon={<ReloadOutlined />}
+                                onClick={() => window.location.reload()}
+                            >
+                                刷新页面
+                            </Button>
+                        ]}
+                    >
+                        <div className="desc">
+                            <Paragraph style={{ color: '#ef4444' }}>
+                                <Text strong style={{ fontSize: 16, color: '#ef4444' }}>Error:</Text> {this.state.error?.toString()}
+                            </Paragraph>
+                            <Paragraph style={{ color: '#94a3b8' }}>
+                                <details style={{ whiteSpace: 'pre-wrap' }}>
+                                    {this.state.errorInfo?.componentStack}
+                                </details>
+                            </Paragraph>
+                        </div>
+                    </Result>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;
--- a/src/features/auth/LoginPage.tsx
+++ b/src/features/auth/LoginPage.tsx
@ -0,0 +1,140 @@
+import React from 'react';
+import { Form, Input, Button, Card, Typography, App } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+
+const { Title, Text } = Typography;
+
+interface LoginPageProps {
+    onLogin: () => void;
+}
+
+const LoginPage: React.FC<LoginPageProps> = ({ onLogin }) => {
+    const { message } = App.useApp();
+
+    const onFinish = (values: any) => {
+        // Simple validation for demo purposes
+        if (values.username && values.password) {
+            message.success('登录成功');
+            onLogin();
+        } else {
+            message.error('请输入用户名和密码');
+        }
+    };
+
+    return (
+        <div style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100vh',
+            background: 'radial-gradient(circle at center, #1e293b 0%, #0f172a 100%)',
+            position: 'relative',
+            overflow: 'hidden'
+        }}>
+            {/* Background Effects */}
+            <div style={{
+                position: 'absolute',
+                top: '-10%',
+                left: '-10%',
+                width: '50%',
+                height: '50%',
+                background: 'radial-gradient(circle, rgba(59,130,246,0.2) 0%, rgba(0,0,0,0) 70%)',
+                filter: 'blur(60px)',
+                zIndex: 0
+            }} />
+            <div style={{
+                position: 'absolute',
+                bottom: '-10%',
+                right: '-10%',
+                width: '50%',
+                height: '50%',
+                background: 'radial-gradient(circle, rgba(139,92,246,0.2) 0%, rgba(0,0,0,0) 70%)',
+                filter: 'blur(60px)',
+                zIndex: 0
+            }} />
+
+            <Card
+                className="glass-panel fade-in"
+                style={{
+                    width: 420,
+                    border: '1px solid rgba(255,255,255,0.1)',
+                    background: 'rgba(30, 41, 59, 0.6)',
+                    backdropFilter: 'blur(20px)',
+                    zIndex: 1
+                }}
+                variant="borderless"
+            >
+                <div style={{ textAlign: 'center', marginBottom: 32 }}>
+                    <div style={{
+                        width: 64,
+                        height: 64,
+                        background: 'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)',
+                        borderRadius: 16,
+                        margin: '0 auto 16px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        boxShadow: '0 8px 16px rgba(59,130,246,0.3)'
+                    }}>
+                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+                        </svg>
+                    </div>
+                    <Title level={2} style={{ margin: 0, background: 'linear-gradient(to right, #fff, #94a3b8)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
+                        Orion Editor
+                    </Title>
+                    <Text type="secondary" style={{ fontSize: 16 }}>虚拟维修培训编辑器</Text>
+                </div>
+
+                <Form
+                    name="normal_login"
+                    className="login-form"
+                    initialValues={{ remember: true }}
+                    onFinish={onFinish}
+                    size="large"
+                >
+                    <Form.Item
+                        name="username"
+                        rules={[{ required: true, message: '请输入用户名!' }]}
+                    >
+                        <Input
+                            prefix={<UserOutlined style={{ color: '#94a3b8' }} />}
+                            placeholder="用户名"
+                            style={{ background: 'rgba(0,0,0,0.2)', border: '1px solid rgba(255,255,255,0.1)' }}
+                        />
+                    </Form.Item>
+                    <Form.Item
+                        name="password"
+                        rules={[{ required: true, message: '请输入密码!' }]}
+                    >
+                        <Input.Password
+                            prefix={<LockOutlined style={{ color: '#94a3b8' }} />}
+                            placeholder="密码"
+                            style={{ background: 'rgba(0,0,0,0.2)', border: '1px solid rgba(255,255,255,0.1)' }}
+                        />
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Button
+                            type="primary"
+                            htmlType="submit"
+                            block
+                            style={{
+                                height: 48,
+                                background: 'linear-gradient(135deg, #3b82f6 0%, #6366f1 100%)',
+                                border: 'none',
+                                fontSize: 16,
+                                fontWeight: 600,
+                                boxShadow: '0 4px 12px rgba(59,130,246,0.3)'
+                            }}
+                        >
+                            登 录
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </Card>
+        </div>
+    );
+};
+
+export default LoginPage;
--- a/src/features/editor-canvas/CustomNodes.tsx
+++ b/src/features/editor-canvas/CustomNodes.tsx
@ -0,0 +1,242 @@
+import React, { memo } from 'react'
+import { Handle, Position, type NodeProps } from 'reactflow'
+import { Card, Typography, Tag } from 'antd'
+import {
+    PlayCircleOutlined,
+    StopOutlined,
+    ReadOutlined,
+    QuestionCircleOutlined,
+    VideoCameraOutlined,
+    ToolOutlined,
+} from '@ant-design/icons'
+import ReactMarkdown from 'react-markdown'
+
+const { Text } = Typography
+
+const NodeContainer: React.FC<{
+    children: React.ReactNode
+    color: string
+    icon: React.ReactNode
+    label: string
+    selected?: boolean
+}> = ({ children, color, icon, label, selected }) => (
+    <Card
+        size="small"
+        className="glass-panel"
+        style={{
+            width: 240,
+            border: selected ? `1px solid ${color}` : '1px solid rgba(255,255,255,0.1)',
+            borderRadius: 12,
+            background: selected ? 'rgba(30, 41, 59, 0.9)' : 'rgba(30, 41, 59, 0.7)',
+            boxShadow: selected ? `0 0 0 2px ${color}40` : '0 4px 6px rgba(0,0,0,0.1)',
+            transition: 'all 0.2s ease',
+        }}
+        styles={{ body: { padding: '12px' } }}
+    >
+        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
+            <div style={{
+                width: 24,
+                height: 24,
+                borderRadius: 6,
+                background: `${color}20`,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginRight: 8,
+                color: color
+            }}>
+                {icon}
+            </div>
+            <Text style={{ fontSize: 14, fontWeight: 500, color: '#f8fafc', flex: 1 }}>
+                {label}
+            </Text>
+        </div>
+        <div style={{ fontSize: 12, color: '#94a3b8', lineHeight: 1.4 }}>{children}</div>
+    </Card>
+)
+
+export const StartNode = memo(({ data, selected }: NodeProps) => {
+    return (
+        <>
+            <NodeContainer
+                color="#10b981"
+                icon={<PlayCircleOutlined />}
+                label={data.label}
+                selected={selected}
+            >
+                {data.initialState || '流程开始'}
+            </NodeContainer>
+            <Handle
+                type="source"
+                position={Position.Bottom}
+                style={{ background: '#10b981', width: 10, height: 10, border: '2px solid #1e293b' }}
+            />
+        </>
+    )
+})
+
+export const EndNode = memo(({ data, selected }: NodeProps) => {
+    return (
+        <>
+            <Handle
+                type="target"
+                position={Position.Top}
+                style={{ background: '#ef4444', width: 10, height: 10, border: '2px solid #1e293b' }}
+            />
+            <NodeContainer
+                color="#ef4444"
+                icon={<StopOutlined />}
+                label={data.label}
+                selected={selected}
+            >
+                {data.result || '流程结束'}
+            </NodeContainer>
+        </>
+    )
+})
+
+export const InstructionNode = memo(({ data, selected }: NodeProps) => {
+    return (
+        <>
+            <Handle
+                type="target"
+                position={Position.Top}
+                style={{ background: '#3b82f6', width: 10, height: 10, border: '2px solid #1e293b' }}
+            />
+            <NodeContainer
+                color="#3b82f6"
+                icon={<ReadOutlined />}
+                label={data.label}
+                selected={selected}
+            >
+                <div style={{ maxHeight: 100, overflowY: 'auto', color: '#cbd5e1' }}>
+                    {data.text ? (
+                        <ReactMarkdown>{data.text}</ReactMarkdown>
+                    ) : (
+                        '请输入指令内容...'
+                    )}
+                </div>
+                {data.targetModelId && (
+                    <Tag color="blue" style={{ marginTop: 8, border: 'none', background: 'rgba(59,130,246,0.2)' }}>
+                        Model: {data.targetModelId}
+                    </Tag>
+                )}
+            </NodeContainer>
+            <Handle
+                type="source"
+                position={Position.Bottom}
+                style={{ background: '#3b82f6', width: 10, height: 10, border: '2px solid #1e293b' }}
+            />
+        </>
+    )
+})
+
+export const QuizNode = memo(({ data, selected }: NodeProps) => {
+    return (
+        <>
+            <Handle
+                type="target"
+                position={Position.Top}
+                style={{ background: '#f59e0b', width: 10, height: 10, border: '2px solid #1e293b' }}
+            />
+            <NodeContainer
+                color="#f59e0b"
+                icon={<QuestionCircleOutlined />}
+                label={data.label}
+                selected={selected}
+            >
+                <div style={{ marginBottom: 8, fontWeight: 500 }}>{data.question || '请输入问题...'}</div>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                    {data.options && data.options.map((opt: any) => (
+                        <div key={opt.id} style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
+                            <Tag color="orange" style={{
+                                width: '100%',
+                                border: 'none',
+                                background: 'rgba(245,158,11,0.2)',
+                                marginRight: 0,
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center'
+                            }}>
+                                <span>{opt.text}</span>
+                            </Tag>
+                            <Handle
+                                type="source"
+                                position={Position.Right}
+                                id={`option-${opt.id}`}
+                                style={{
+                                    background: '#f59e0b',
+                                    right: -6,
+                                    width: 8,
+                                    height: 8,
+                                    border: '2px solid #1e293b'
+                                }}
+                            />
+                        </div>
+                    ))}
+                </div>
+            </NodeContainer>
+        </>
+    )
+})
+
+export const VideoNode = memo(({ data, selected }: NodeProps) => {
+    return (
+        <>
+            <Handle
+                type="target"
+                position={Position.Top}
+                style={{ background: '#8b5cf6', width: 10, height: 10, border: '2px solid #1e293b' }}
+            />
+            <NodeContainer
+                color="#8b5cf6"
+                icon={<VideoCameraOutlined />}
+                label={data.label}
+                selected={selected}
+            >
+                <div style={{ marginBottom: 4 }}>
+                    {data.videoUrl ? (
+                        <div style={{ fontSize: 11, wordBreak: 'break-all' }}>{data.videoUrl}</div>
+                    ) : (
+                        '请输入视频URL...'
+                    )}
+                </div>
+            </NodeContainer>
+            <Handle
+                type="source"
+                position={Position.Bottom}
+                style={{ background: '#8b5cf6', width: 10, height: 10, border: '2px solid #1e293b' }}
+            />
+        </>
+    )
+})
+
+export const OperationNode = memo(({ data, selected }: NodeProps) => {
+    return (
+        <>
+            <Handle
+                type="target"
+                position={Position.Top}
+                style={{ background: '#ec4899', width: 10, height: 10, border: '2px solid #1e293b' }}
+            />
+            <NodeContainer
+                color="#ec4899"
+                icon={<ToolOutlined />}
+                label={data.label}
+                selected={selected}
+            >
+                <div>{data.action || '定义操作动作...'}</div>
+                {data.targetObject && (
+                    <Tag color="magenta" style={{ marginTop: 4, border: 'none', background: 'rgba(236,72,153,0.2)' }}>
+                        Target: {data.targetObject}
+                    </Tag>
+                )}
+            </NodeContainer>
+            <Handle
+                type="source"
+                position={Position.Bottom}
+                style={{ background: '#ec4899', width: 10, height: 10, border: '2px solid #1e293b' }}
+            />
+        </>
+    )
+})
--- a/src/features/editor-canvas/EditorCanvas.tsx
+++ b/src/features/editor-canvas/EditorCanvas.tsx
@ -0,0 +1,164 @@
+import React, { useCallback, useEffect } from 'react'
+import { message } from 'antd'
+import ReactFlow, {
+    Background,
+    Controls,
+    MiniMap,
+    Panel,
+    type Connection,
+} from 'reactflow'
+import { useDroppable } from '@dnd-kit/core'
+import 'reactflow/dist/style.css'
+import { useStore } from 'zustand'
+import { useFlowStore, useTemporalStore } from '../../store/flowStore'
+import { StartNode, EndNode, InstructionNode, QuizNode, VideoNode, OperationNode } from './CustomNodes'
+
+
+
+const nodeTypes = {
+    startNode: StartNode,
+    endNode: EndNode,
+    instructionNode: InstructionNode,
+    quizSingleChoiceNode: QuizNode,
+    videoNode: VideoNode,
+    operationNode: OperationNode,
+}
+
+const edgeTypes = {}
+
+const EditorCanvas: React.FC = () => {
+    const {
+        nodes,
+        edges,
+        onNodesChange,
+        onEdgesChange,
+        onConnect,
+        reactFlowInstance,
+        setReactFlowInstance,
+        clipboard,
+        setClipboard,
+        setNodes,
+        selectedNodeId,
+    } = useFlowStore()
+
+    const { pause, resume } = useStore(useTemporalStore(), (state) => state)
+
+    const onNodeDragStart = useCallback(() => {
+        pause()
+    }, [pause])
+
+    const onNodeDragStop = useCallback(() => {
+        resume()
+    }, [resume])
+
+    // Keyboard shortcuts for Copy/Cut/Paste
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if ((event.ctrlKey || event.metaKey) && !event.repeat) {
+                if (event.key === 'c' && selectedNodeId) {
+                    const node = nodes.find((n) => n.id === selectedNodeId)
+                    if (node) {
+                        setClipboard(node)
+                        message.success('已复制')
+                    }
+                } else if (event.key === 'x' && selectedNodeId) {
+                    const node = nodes.find((n) => n.id === selectedNodeId)
+                    if (node && reactFlowInstance) {
+                        setClipboard(node)
+                        reactFlowInstance.deleteElements({ nodes: [{ id: selectedNodeId }] })
+                        message.success('已剪切')
+                    }
+                } else if (event.key === 'v' && clipboard) {
+                    const newNode = {
+                        ...clipboard,
+                        id: `${clipboard.type}-${Date.now()}`,
+                        position: {
+                            x: clipboard.position.x + 20,
+                            y: clipboard.position.y + 20,
+                        },
+                        selected: true,
+                    }
+                    setNodes([...nodes.map(n => ({ ...n, selected: false })), newNode])
+                    message.success('已粘贴')
+                }
+            }
+        }
+
+        window.addEventListener('keydown', handleKeyDown)
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown)
+        }
+    }, [nodes, selectedNodeId, clipboard, reactFlowInstance, setClipboard, setNodes])
+
+    const { setNodeRef } = useDroppable({
+        id: 'editor-canvas',
+    })
+
+    const isValidConnection = useCallback(
+        (connection: Connection) => {
+            // Self-loop prevention
+            if (connection.source === connection.target) return false
+
+            const sourceNode = nodes.find((n) => n.id === connection.source)
+            const targetNode = nodes.find((n) => n.id === connection.target)
+
+            if (!sourceNode || !targetNode) return false
+
+            // Start Node cannot be a target
+            if (targetNode.type === 'startNode') return false
+
+            // End Node cannot be a source
+            if (sourceNode.type === 'endNode') return false
+
+            return true
+        },
+        [nodes]
+    )
+
+    return (
+        <div ref={setNodeRef} style={{ width: '100%', height: '100%' }}>
+            <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onConnect={onConnect}
+                onNodeDragStart={onNodeDragStart}
+                onNodeDragStop={onNodeDragStop}
+                onInit={setReactFlowInstance}
+                nodeTypes={nodeTypes}
+                edgeTypes={edgeTypes}
+                isValidConnection={isValidConnection}
+                deleteKeyCode={['Backspace', 'Delete']}
+                fitView
+            >
+                <Background />
+                <Controls />
+                <MiniMap
+                    style={{
+                        background: 'rgba(30, 41, 59, 0.5)',
+                        border: '1px solid rgba(255, 255, 255, 0.1)',
+                        borderRadius: 12,
+                        boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                        margin: 15
+                    }}
+                    nodeColor={(node) => {
+                        switch (node.type) {
+                            case 'startNode': return '#10b981'
+                            case 'endNode': return '#ef4444'
+                            case 'instructionNode': return '#3b82f6'
+                            case 'quizSingleChoiceNode': return '#f59e0b'
+                            case 'videoNode': return '#8b5cf6'
+                            case 'operationNode': return '#ec4899'
+                            default: return '#e2e8f0'
+                        }
+                    }}
+                    maskColor="rgba(0, 0, 0, 0.3)"
+                />
+                <Panel position="top-right">Orion Editor</Panel>
+            </ReactFlow>
+        </div>
+    )
+}
+
+export default EditorCanvas
--- a/src/features/file-handler/useFileHandler.ts
+++ b/src/features/file-handler/useFileHandler.ts
@ -0,0 +1,49 @@
+import { useCallback } from 'react'
+import { useFlowStore } from '../../store/flowStore'
+import { exportFlowToYaml, importFlowFromYaml, type FlowMetadata } from '../../utils/yamlParser'
+import { message } from 'antd'
+
+export const useFileHandler = () => {
+    const { nodes, edges, setNodes, setEdges } = useFlowStore()
+
+    const handleExport = useCallback((metadata: Omit<FlowMetadata, 'version'>) => {
+        try {
+            const yamlStr = exportFlowToYaml(nodes, edges, { ...metadata, version: '1.0' })
+            const blob = new Blob([yamlStr], { type: 'text/yaml' })
+            const url = URL.createObjectURL(blob)
+            const a = document.createElement('a')
+            a.href = url
+            a.download = `${metadata.flowName.replace(/\s+/g, '_')}.yaml`
+            a.click()
+            URL.revokeObjectURL(url)
+            message.success('导出成功')
+        } catch (error) {
+            console.error('Export failed:', error)
+            message.error('导出失败')
+        }
+    }, [nodes, edges])
+
+    const handleImport = useCallback((file: File) => {
+        const reader = new FileReader()
+        reader.onload = (e) => {
+            try {
+                const content = e.target?.result as string
+                const { nodes: newNodes, edges: newEdges, metadata } = importFlowFromYaml(content)
+
+                setNodes(newNodes)
+                setEdges(newEdges)
+                message.success(`流程 "${metadata.flowName}" 加载成功`)
+            } catch (error) {
+                console.error('Import failed:', error)
+                message.error('解析YAML文件失败: 格式不正确')
+            }
+        }
+        reader.readAsText(file)
+        return false // Prevent default upload behavior
+    }, [setNodes, setEdges])
+
+    return {
+        handleExport,
+        handleImport
+    }
+}
--- a/src/features/header/Header.css
+++ b/src/features/header/Header.css
@ -0,0 +1,109 @@
+.app-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px !important;
+    /* Force padding */
+    height: 64px;
+    background: rgba(30, 41, 59, 0.7) !important;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    z-index: 1000;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    line-height: 1.5;
+    /* Standard line-height */
+}
+
+.header-logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 20px;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 0.5px;
+    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    cursor: default;
+    line-height: 1;
+}
+
+.header-logo-icon {
+    font-size: 24px;
+    color: #3b82f6;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    height: 100%;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 4px 12px;
+    /* Adjusted padding */
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    transition: all 0.2s ease;
+    cursor: pointer;
+    height: 40px;
+    /* Fixed height to prevent overflow */
+    box-sizing: border-box;
+}
+
+.user-info:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.user-avatar {
+    width: 28px;
+    /* Slightly smaller avatar */
+    height: 28px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    color: white;
+    font-size: 14px;
+    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+    line-height: 28px;
+}
+
+.user-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: #e2e8f0;
+    line-height: 1;
+}
+
+.logout-btn {
+    color: #94a3b8 !important;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border: none;
+    background: transparent;
+}
+
+.logout-btn:hover {
+    color: #ef4444 !important;
+    background: rgba(239, 68, 68, 0.1);
+}
--- a/src/features/header/Header.tsx
+++ b/src/features/header/Header.tsx
@ -0,0 +1,71 @@
+import React from 'react'
+import { Layout, Dropdown, Avatar, Button, Tooltip } from 'antd'
+import type { MenuProps } from 'antd'
+import { UserOutlined, LogoutOutlined, RocketOutlined, SettingOutlined } from '@ant-design/icons'
+import './Header.css'
+
+const { Header: AntHeader } = Layout
+
+interface HeaderProps {
+    onLogout?: () => void
+    userName?: string
+}
+
+const Header: React.FC<HeaderProps> = ({ onLogout, userName = 'Admin User' }) => {
+    const items: MenuProps['items'] = [
+        {
+            key: 'profile',
+            label: '个人资料',
+            icon: <UserOutlined />,
+        },
+        {
+            key: 'settings',
+            label: '系统设置',
+            icon: <SettingOutlined />,
+        },
+        {
+            type: 'divider',
+        },
+        {
+            key: 'logout',
+            label: '退出登录',
+            icon: <LogoutOutlined />,
+            danger: true,
+            onClick: onLogout,
+        },
+    ]
+
+    return (
+        <AntHeader className="app-header">
+            <div className="header-logo">
+                <RocketOutlined className="header-logo-icon" />
+                <span>Orion Editor</span>
+            </div>
+
+            <div className="header-actions">
+                <Dropdown menu={{ items }} placement="bottomRight" trigger={['click']}>
+                    <div className="user-info" style={{ cursor: 'pointer' }}>
+                        <Avatar
+                            size={32}
+                            icon={<UserOutlined />}
+                            className="user-avatar"
+                            style={{ backgroundColor: '#3b82f6' }}
+                        />
+                        <span className="user-name">{userName}</span>
+                    </div>
+                </Dropdown>
+
+                <Tooltip title="退出登录">
+                    <Button
+                        type="text"
+                        icon={<LogoutOutlined />}
+                        className="logout-btn"
+                        onClick={onLogout}
+                    />
+                </Tooltip>
+            </div>
+        </AntHeader>
+    )
+}
+
+export default Header
--- a/src/features/node-library/NodeLibrary.tsx
+++ b/src/features/node-library/NodeLibrary.tsx
@ -0,0 +1,77 @@
+import React from 'react'
+import { useDraggable } from '@dnd-kit/core'
+import { Card, Typography } from 'antd'
+
+const { Title } = Typography
+
+type NodeType = {
+    type: string
+    label: string
+}
+
+const NODE_TYPES: NodeType[] = [
+    { type: 'startNode', label: '开始节点' },
+    { type: 'instructionNode', label: '指令节点' },
+    { type: 'quizSingleChoiceNode', label: '考核节点' },
+    { type: 'videoNode', label: '视频节点' },
+    { type: 'operationNode', label: '操作节点' },
+    { type: 'endNode', label: '结束节点' },
+]
+
+export const SidebarNode: React.FC<{ type: string; label: string; style?: React.CSSProperties }> = ({ type, label, style }) => (
+    <Card
+        size="small"
+        className="glass-panel"
+        style={{
+            marginBottom: 12,
+            cursor: 'grab',
+            background: 'rgba(255, 255, 255, 0.05)',
+            border: '1px solid rgba(255, 255, 255, 0.1)',
+            transition: 'all 0.3s ease',
+            ...style
+        }}
+        hoverable
+        styles={{ body: { padding: '12px' } }}
+    >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <div style={{
+                width: 8,
+                height: 8,
+                borderRadius: '50%',
+                background: type === 'startNode' ? '#10b981' : type === 'endNode' ? '#ef4444' : type === 'instructionNode' ? '#3b82f6' : type === 'videoNode' ? '#8b5cf6' : type === 'operationNode' ? '#ec4899' : '#f59e0b',
+                boxShadow: `0 0 8px ${type === 'startNode' ? '#10b981' : type === 'endNode' ? '#ef4444' : type === 'instructionNode' ? '#3b82f6' : type === 'videoNode' ? '#8b5cf6' : type === 'operationNode' ? '#ec4899' : '#f59e0b'}`
+            }} />
+            <span style={{ fontWeight: 500, color: '#e2e8f0' }}>{label}</span>
+        </div>
+    </Card>
+)
+
+const DraggableNode: React.FC<{ type: string; label: string }> = ({ type, label }) => {
+    const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+        id: `node-${type}`,
+        data: { type, label },
+    })
+
+    const style = {
+        opacity: isDragging ? 0.5 : 1,
+    }
+
+    return (
+        <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
+            <SidebarNode type={type} label={label} />
+        </div>
+    )
+}
+
+const NodeLibrary: React.FC = () => {
+    return (
+        <div style={{ padding: 20 }}>
+            <Title level={5} style={{ color: '#94a3b8', marginBottom: 20, fontSize: 13, textTransform: 'uppercase', letterSpacing: 1 }}>组件库</Title>
+            {NODE_TYPES.map((node) => (
+                <DraggableNode key={node.type} type={node.type} label={node.label} />
+            ))}
+        </div>
+    )
+}
+
+export default NodeLibrary
--- a/src/features/properties-panel/PropertiesPanel.tsx
+++ b/src/features/properties-panel/PropertiesPanel.tsx
@ -0,0 +1,146 @@
+import React from 'react'
+import Form from '@rjsf/antd'
+import validator from '@rjsf/validator-ajv8'
+import type { RJSFSchema } from '@rjsf/utils'
+import { useFlowStore } from '../../store/flowStore'
+import { Card, Empty } from 'antd'
+
+const PropertiesPanel: React.FC = () => {
+    const { nodes, selectedNodeId, updateNodeData } = useFlowStore()
+    const selectedNode = nodes.find((n) => n.id === selectedNodeId)
+
+    if (!selectedNode) {
+        return (
+            <div style={{ padding: 16 }}>
+                <Empty description="请选择一个节点以编辑属性" />
+            </div>
+        )
+    }
+
+    // Define schemas based on node type
+    const getSchema = (type: string | undefined): RJSFSchema => {
+        const baseSchema: RJSFSchema = {
+            type: 'object',
+            properties: {
+                label: { type: 'string', title: '标签' },
+                description: { type: 'string', title: '描述' },
+            },
+        }
+
+        switch (type) {
+            case 'instructionNode':
+                return {
+                    ...baseSchema,
+                    properties: {
+                        ...baseSchema.properties,
+                        text: {
+                            type: 'string',
+                            title: '指令内容',
+                            format: 'textarea'
+                        },
+                        targetModelId: {
+                            type: 'string',
+                            title: '关联模型ID'
+                        },
+                    },
+                }
+            case 'quizSingleChoiceNode':
+                return {
+                    ...baseSchema,
+                    properties: {
+                        ...baseSchema.properties,
+                        question: {
+                            type: 'string',
+                            title: '问题'
+                        },
+                        options: {
+                            type: 'array',
+                            title: '选项',
+                            items: {
+                                type: 'object',
+                                properties: {
+                                    id: { type: 'string', title: 'ID' },
+                                    text: { type: 'string', title: '选项文本' }
+                                }
+                            }
+                        },
+                        correctOptionId: {
+                            type: 'string',
+                            title: '正确选项ID'
+                        },
+                    },
+                }
+            case 'startNode':
+                return {
+                    ...baseSchema,
+                    properties: {
+                        ...baseSchema.properties,
+                        initialState: { type: 'string', title: '初始状态' },
+                    },
+                }
+            case 'endNode':
+                return {
+                    ...baseSchema,
+                    properties: {
+                        ...baseSchema.properties,
+                        result: { type: 'string', title: '结果' },
+                    },
+                }
+            case 'videoNode':
+                return {
+                    ...baseSchema,
+                    properties: {
+                        ...baseSchema.properties,
+                        videoUrl: { type: 'string', title: '视频URL' },
+                    },
+                }
+            case 'operationNode':
+                return {
+                    ...baseSchema,
+                    properties: {
+                        ...baseSchema.properties,
+                        action: { type: 'string', title: '操作动作' },
+                        targetObject: { type: 'string', title: '操作对象' },
+                    },
+                }
+            default:
+                return baseSchema
+        }
+    }
+
+    const schema = getSchema(selectedNode.type)
+
+    const handleChange = ({ formData }: any) => {
+        if (selectedNodeId) {
+            updateNodeData(selectedNodeId, formData)
+        }
+    }
+
+    return (
+        <div style={{ padding: 20 }}>
+            <Card
+                title={<span style={{ color: '#e2e8f0', fontSize: 14 }}>属性面板</span>}
+                size="small"
+                className="glass-panel"
+                style={{
+                    background: 'rgba(255, 255, 255, 0.05)',
+                    border: '1px solid rgba(255, 255, 255, 0.1)',
+                }}
+                styles={{ header: { borderBottom: '1px solid rgba(255, 255, 255, 0.1)' } }}
+            >
+                <Form
+                    schema={schema}
+                    validator={validator}
+                    formData={selectedNode.data}
+                    onChange={handleChange}
+                    children={true} // Hide submit button
+                    uiSchema={{
+                        'ui:submitButtonOptions': { norender: true }
+                    }}
+                />
+            </Card>
+        </div>
+    )
+}
+
+export default PropertiesPanel
--- a/src/features/toolbar/SaveModal.tsx
+++ b/src/features/toolbar/SaveModal.tsx
@ -0,0 +1,59 @@
+import React from 'react';
+import { Modal, Form, Input } from 'antd';
+
+interface SaveModalProps {
+    open: boolean;
+    onCancel: () => void;
+    onOk: (values: { flowName: string; author: string }) => void;
+}
+
+const SaveModal: React.FC<SaveModalProps> = ({ open, onCancel, onOk }) => {
+    const [form] = Form.useForm();
+
+    const handleOk = () => {
+        form
+            .validateFields()
+            .then((values) => {
+                form.resetFields();
+                onOk(values);
+            })
+            .catch((info) => {
+                console.log('Validate Failed:', info);
+            });
+    };
+
+    return (
+        <Modal
+            open={open}
+            title="保存流程"
+            okText="导出"
+            cancelText="取消"
+            onCancel={onCancel}
+            onOk={handleOk}
+        >
+            <Form
+                form={form}
+                layout="vertical"
+                name="save_flow_form"
+                initialValues={{ flowName: 'New Flow', author: 'User' }}
+            >
+                <Form.Item
+                    name="flowName"
+                    label="流程名称"
+                    rules={[{ required: true, message: '请输入流程名称!' }]}
+                >
+                    <Input />
+                </Form.Item>
+                <Form.Item
+                    name="author"
+                    label="作者"
+                    rules={[{ required: true, message: '请输入作者姓名!' }]}
+                >
+                    <Input />
+                </Form.Item>
+            </Form>
+        </Modal>
+    );
+};
+
+export default SaveModal;
--- a/src/features/toolbar/Toolbar.tsx
+++ b/src/features/toolbar/Toolbar.tsx
@ -0,0 +1,191 @@
+import React, { useState } from 'react'
+import { Button, Space, Upload, message } from 'antd'
+import {
+    UndoOutlined,
+    RedoOutlined,
+    SaveOutlined,
+    UploadOutlined,
+    PartitionOutlined,
+    DeleteOutlined,
+    CopyOutlined,
+    ScissorOutlined,
+    SnippetsOutlined,
+} from '@ant-design/icons'
+import { useStore } from 'zustand'
+import { useFlowStore, useTemporalStore } from '../../store/flowStore'
+import SaveModal from './SaveModal'
+import { getLayoutedElements } from '../../utils/layoutUtils'
+import { useFileHandler } from '../file-handler/useFileHandler'
+
+const Toolbar: React.FC = () => {
+    const { nodes, edges, setNodes, setEdges, selectedNodeId, reactFlowInstance, clipboard, setClipboard } = useFlowStore()
+    const { undo, redo, pastStates, futureStates } = useStore(useTemporalStore(), (state) => state)
+    const { handleExport, handleImport } = useFileHandler()
+    const [isModalOpen, setIsModalOpen] = useState(false)
+
+    const handleSaveClick = () => {
+        setIsModalOpen(true)
+    }
+
+    const handleSaveConfirm = (values: { flowName: string; author: string }) => {
+        handleExport(values)
+        setIsModalOpen(false)
+    }
+
+    const handleLoad = (file: File) => {
+        handleImport(file)
+        return false // Prevent upload
+    }
+
+    const handleLayout = () => {
+        const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
+            nodes,
+            edges
+        )
+        setNodes([...layoutedNodes])
+        setEdges([...layoutedEdges])
+        message.success('自动布局完成')
+    }
+
+    const handleDelete = () => {
+        if (selectedNodeId && reactFlowInstance) {
+            reactFlowInstance.deleteElements({ nodes: [{ id: selectedNodeId }] })
+            message.success('节点已删除')
+        }
+    }
+
+    const handleCopy = () => {
+        if (selectedNodeId) {
+            const node = nodes.find((n) => n.id === selectedNodeId)
+            if (node) {
+                setClipboard(node)
+                message.success('已复制')
+            }
+        }
+    }
+
+    const handleCut = () => {
+        if (selectedNodeId && reactFlowInstance) {
+            const node = nodes.find((n) => n.id === selectedNodeId)
+            if (node) {
+                setClipboard(node)
+                reactFlowInstance.deleteElements({ nodes: [{ id: selectedNodeId }] })
+                message.success('已剪切')
+            }
+        }
+    }
+
+    const handlePaste = () => {
+        if (clipboard) {
+            const newNode = {
+                ...clipboard,
+                id: `${clipboard.type}-${Date.now()}`,
+                position: {
+                    x: clipboard.position.x + 20,
+                    y: clipboard.position.y + 20,
+                },
+                selected: true,
+            }
+            setNodes([...nodes.map(n => ({ ...n, selected: false })), newNode])
+            message.success('已粘贴')
+        }
+    }
+
+    return (
+        <>
+            <div
+                className="floating-toolbar fade-in"
+                style={{
+                    position: 'absolute',
+                    top: 24,
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    zIndex: 100,
+                    boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
+                }}
+            >
+                <Space size="middle">
+                    <Button
+                        type="text"
+                        icon={<UndoOutlined />}
+                        onClick={() => undo()}
+                        disabled={pastStates.length === 0}
+                        style={{ color: '#e2e8f0' }}
+                    />
+                    <Button
+                        type="text"
+                        icon={<RedoOutlined />}
+                        onClick={() => redo()}
+                        disabled={futureStates.length === 0}
+                        style={{ color: '#e2e8f0' }}
+                    />
+                    <div style={{ width: 1, height: 24, background: 'rgba(255,255,255,0.1)' }} />
+                    <Button
+                        type="text"
+                        icon={<CopyOutlined />}
+                        onClick={handleCopy}
+                        disabled={!selectedNodeId}
+                        style={{ color: '#e2e8f0' }}
+                        title="复制"
+                    />
+                    <Button
+                        type="text"
+                        icon={<ScissorOutlined />}
+                        onClick={handleCut}
+                        disabled={!selectedNodeId}
+                        style={{ color: '#e2e8f0' }}
+                        title="剪切"
+                    />
+                    <Button
+                        type="text"
+                        icon={<SnippetsOutlined />}
+                        onClick={handlePaste}
+                        disabled={!clipboard}
+                        style={{ color: '#e2e8f0' }}
+                        title="粘贴"
+                    />
+                    <Button
+                        type="text"
+                        icon={<DeleteOutlined />}
+                        onClick={handleDelete}
+                        disabled={!selectedNodeId}
+                        style={{ color: !selectedNodeId ? 'rgba(255,255,255,0.3)' : '#ef4444' }}
+                        title="删除节点"
+                    />
+                    <Button
+                        type="text"
+                        icon={<PartitionOutlined />}
+                        onClick={handleLayout}
+                        style={{ color: '#e2e8f0' }}
+                        title="自动布局"
+                    />
+                    <div style={{ width: 1, height: 24, background: 'rgba(255,255,255,0.1)' }} />
+                    <Button
+                        type="primary"
+                        icon={<SaveOutlined />}
+                        onClick={handleSaveClick}
+                        style={{ borderRadius: 20, padding: '4px 20px' }}
+                    >
+                        保存
+                    </Button>
+                    <Upload beforeUpload={handleLoad} showUploadList={false} accept=".yaml,.yml">
+                        <Button
+                            ghost
+                            icon={<UploadOutlined />}
+                            style={{ borderRadius: 20, padding: '4px 20px', borderColor: 'rgba(255,255,255,0.3)' }}
+                        >
+                            加载
+                        </Button>
+                    </Upload>
+                </Space>
+            </div>
+            <SaveModal
+                open={isModalOpen}
+                onCancel={() => setIsModalOpen(false)}
+                onOk={handleSaveConfirm}
+            />
+        </>
+    )
+}
+
+export default Toolbar
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,57 @@
+:root {
+  --bg-color: #0f172a;
+  --bg-gradient: radial-gradient(circle at 50% 50%, #1e293b 0%, #0f172a 100%);
+  --primary-color: #3b82f6;
+  --text-primary: #f8fafc;
+  --text-secondary: #94a3b8;
+  --glass-bg: rgba(30, 41, 59, 0.7);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  
+  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: dark;
+  color: var(--text-primary);
+  background-color: var(--bg-color);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  background: var(--bg-gradient);
+  overflow: hidden; /* Prevent scroll on main body */
+}
+
+#root {
+  width: 100%;
+  height: 100vh;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,14 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+import ErrorBoundary from './components/ErrorBoundary'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
+  </StrictMode>,
+)
--- a/src/store/flowStore.ts
+++ b/src/store/flowStore.ts
@ -0,0 +1,88 @@
+import { create } from 'zustand'
+import { temporal } from 'zundo'
+
+import {
+    addEdge,
+    applyNodeChanges,
+    applyEdgeChanges,
+} from 'reactflow'
+import type {
+    Connection,
+    Edge,
+    EdgeChange,
+    Node,
+    NodeChange,
+    OnNodesChange,
+    OnEdgesChange,
+    OnConnect,
+    ReactFlowInstance,
+} from 'reactflow'
+
+export type FlowState = {
+    nodes: Node[]
+    edges: Edge[]
+    onNodesChange: OnNodesChange
+    onEdgesChange: OnEdgesChange
+    onConnect: OnConnect
+    reactFlowInstance: ReactFlowInstance | null
+    selectedNodeId: string | null
+    clipboard: Node | null
+    setNodes: (nodes: Node[]) => void
+    setEdges: (edges: Edge[]) => void
+    setReactFlowInstance: (instance: ReactFlowInstance) => void
+    setSelectedNodeId: (id: string | null) => void
+    setClipboard: (node: Node | null) => void
+    updateNodeData: (id: string, data: any) => void
+}
+
+export const useFlowStore = create<FlowState>()(
+    temporal((set, get) => ({
+        nodes: [],
+        edges: [],
+        reactFlowInstance: null,
+        selectedNodeId: null,
+        clipboard: null,
+        onNodesChange: (changes: NodeChange[]) => {
+            set({
+                nodes: applyNodeChanges(changes, get().nodes),
+            })
+
+            // Handle selection changes
+            const selectionChange = changes.find((c) => c.type === 'select')
+            if (selectionChange && selectionChange.type === 'select') {
+                if (selectionChange.selected) {
+                    set({ selectedNodeId: selectionChange.id })
+                } else if (get().selectedNodeId === selectionChange.id) {
+                    set({ selectedNodeId: null })
+                }
+            }
+        },
+        onEdgesChange: (changes: EdgeChange[]) => {
+            set({
+                edges: applyEdgeChanges(changes, get().edges),
+            })
+        },
+        onConnect: (connection: Connection) => {
+            set({
+                edges: addEdge(connection, get().edges),
+            })
+        },
+        setNodes: (nodes: Node[]) => set({ nodes }),
+        setEdges: (edges: Edge[]) => set({ edges }),
+        setReactFlowInstance: (instance: ReactFlowInstance) => set({ reactFlowInstance: instance }),
+        setSelectedNodeId: (id: string | null) => set({ selectedNodeId: id }),
+        setClipboard: (node: Node | null) => set({ clipboard: node }),
+        updateNodeData: (id: string, data: any) => {
+            set({
+                nodes: get().nodes.map((node) => {
+                    if (node.id === id) {
+                        return { ...node, data: { ...node.data, ...data } }
+                    }
+                    return node
+                }),
+            })
+        },
+    }))
+)
+
+export const useTemporalStore = () => useFlowStore.temporal
--- a/src/utils/layoutUtils.ts
+++ b/src/utils/layoutUtils.ts
@ -0,0 +1,40 @@
+import dagre from 'dagre';
+import { type Node, type Edge, Position } from 'reactflow';
+
+const dagreGraph = new dagre.graphlib.Graph();
+dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+const nodeWidth = 200;
+const nodeHeight = 80;
+
+export const getLayoutedElements = (nodes: Node[], edges: Edge[], direction = 'TB') => {
+    const isHorizontal = direction === 'LR';
+    dagreGraph.setGraph({ rankdir: direction });
+
+    nodes.forEach((node) => {
+        dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+    });
+
+    edges.forEach((edge) => {
+        dagreGraph.setEdge(edge.source, edge.target);
+    });
+
+    dagre.layout(dagreGraph);
+
+    const layoutedNodes = nodes.map((node) => {
+        const nodeWithPosition = dagreGraph.node(node.id);
+        node.targetPosition = isHorizontal ? Position.Left : Position.Top;
+        node.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
+
+        // We are shifting the dagre node position (anchor=center center) to the top left
+        // so it matches the React Flow node anchor point (top left).
+        node.position = {
+            x: nodeWithPosition.x - nodeWidth / 2,
+            y: nodeWithPosition.y - nodeHeight / 2,
+        };
+
+        return node;
+    });
+
+    return { nodes: layoutedNodes, edges };
+};
--- a/src/utils/yamlParser.ts
+++ b/src/utils/yamlParser.ts
@ -0,0 +1,54 @@
+import yaml from 'js-yaml'
+import type { Node, Edge } from 'reactflow'
+
+export interface FlowMetadata {
+    version: string
+    flowName: string
+    author?: string
+}
+
+export interface FlowData {
+    metadata: FlowMetadata
+    nodes: any[]
+    edges: any[]
+}
+
+export const exportFlowToYaml = (nodes: Node[], edges: Edge[], metadata: FlowMetadata): string => {
+    const flowData: FlowData = {
+        metadata,
+        nodes: nodes.map(node => ({
+            id: node.id,
+            type: node.type,
+            position: node.position,
+            data: node.data
+        })),
+        edges: edges.map(edge => ({
+            id: edge.id,
+            source: edge.source,
+            target: edge.target,
+            sourceHandle: edge.sourceHandle,
+            targetHandle: edge.targetHandle
+        }))
+    }
+
+    return yaml.dump(flowData)
+}
+
+export const importFlowFromYaml = (yamlString: string): { nodes: Node[], edges: Edge[], metadata: FlowMetadata } => {
+    try {
+        const flowData = yaml.load(yamlString) as FlowData
+
+        if (!flowData || !flowData.nodes || !flowData.edges) {
+            throw new Error('Invalid YAML format: missing nodes or edges')
+        }
+
+        return {
+            nodes: flowData.nodes,
+            edges: flowData.edges,
+            metadata: flowData.metadata || { version: '1.0', flowName: 'Imported Flow' }
+        }
+    } catch (e) {
+        console.error('Failed to parse YAML:', e)
+        throw e
+    }
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: [['babel-plugin-react-compiler']],
+      },
+    }),
+  ],
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>