diff --git a/SCENARIO_MODE.md b/SCENARIO_MODE.md new file mode 100644 index 00000000..3014b4ad --- /dev/null +++ b/SCENARIO_MODE.md @@ -0,0 +1,172 @@ +# Scenario Mode Implementation + +## Overview +A complete visual workflow automation system inspired by Flowgram.ai, featuring a canvas-based workflow editor with intuitive node management. + +## Features Implemented + +### Backend API +- **Endpoints**: `/api/scenarios` + - `GET /` - List scenarios with search and pagination + - `POST /` - Create new scenario + - `PUT /` - Update scenario + - `DELETE /` - Delete scenarios + - `PUT /enable` - Enable scenarios + - `PUT /disable` - Disable scenarios + - `GET /:id` - Get scenario by ID + +### Frontend Components + +#### 1. Scenario Management Page (`/scenario`) +- **List View**: Table displaying all scenarios with: + - Scenario name, description, status + - Workflow node count + - Creation date + - Batch operations (enable, disable, delete) + - Search functionality + +#### 2. Workflow Editor Modal +- **Full-screen modal** (95vw × 85vh) +- **Split Layout**: + - **Left Canvas** (flexible width, min 600px): + - Grid-based node cards + - Visual node selection with highlighting + - Toolbar with quick node addition buttons + - **Right Edit Panel** (fixed 400px): + - Dynamic configuration forms + - Node-specific fields + - Save and delete controls + +#### 3. Node Types Supported +1. **HTTP Request** + - URL, method (GET/POST/PUT/DELETE) + - Headers (JSON format) + - Request body + +2. **Script Execution** + - Script path + - Inline script content + +3. **Condition** + - Conditional expression + - Branch handling + +4. **Delay** + - Delay time in milliseconds + +5. **Loop** + - Number of iterations + +## User Workflow + +``` +1. Navigate to "场景管理" (Scenario Management) in sidebar + ↓ +2. Click "新建场景" (New Scenario) + ↓ +3. Enter scenario name and description + ↓ +4. Click "编辑工作流" (Edit Workflow) + ↓ +5. Add nodes by clicking toolbar buttons + ↓ +6. Click node to configure in right panel + ↓ +7. Configure node parameters + ↓ +8. Click "保存工作流" (Save Workflow) + ↓ +9. Enable scenario to activate +``` + +## Technical Architecture + +### Data Model +```typescript +interface Scenario { + id?: number; + name: string; + description?: string; + status?: 0 | 1; // 0: disabled, 1: enabled + workflowGraph?: WorkflowGraph; + createdAt?: Date; + updatedAt?: Date; +} + +interface WorkflowGraph { + nodes: WorkflowNode[]; + startNode?: string; +} + +interface WorkflowNode { + id: string; + type: 'http' | 'script' | 'condition' | 'delay' | 'loop'; + label: string; + x?: number; + y?: number; + config: {...}; + next?: string | string[]; +} +``` + +### Layout Design +- **Flexbox-based responsive layout** +- **Desktop**: Side-by-side canvas and edit panel +- **Mobile**: Stacked layout (50% height each) +- **Theme Support**: Light and dark mode + +### Internationalization +- Full Chinese (zh-CN) support +- Full English (en-US) support +- 50+ translated terms + +## UI Screenshots + +The workflow editor follows Flowgram.ai design principles: +- **Clean visual hierarchy** +- **Compact node cards** on canvas +- **Focused editing panel** for detailed configuration +- **Quick access toolbar** for node creation +- **Visual feedback** for selection and hover states + +## Database Schema + +SQLite table: `Scenarios` +- `id` (INTEGER, PRIMARY KEY) +- `name` (STRING, NOT NULL) +- `description` (TEXT) +- `status` (INTEGER, DEFAULT 0) +- `workflowGraph` (JSON) +- `createdAt` (DATETIME) +- `updatedAt` (DATETIME) + +## Files Added + +### Backend +- `back/data/scenario.ts` - Data model +- `back/services/scenario.ts` - Business logic +- `back/api/scenario.ts` - API routes + +### Frontend +- `src/pages/scenario/index.tsx` - Main page +- `src/pages/scenario/index.less` - Page styles +- `src/pages/scenario/modal.tsx` - Create/Edit modal +- `src/pages/scenario/workflowEditorModal.tsx` - Workflow editor +- `src/pages/scenario/workflowEditor.less` - Editor styles +- `src/pages/scenario/type.ts` - TypeScript types + +### Configuration +- `src/layouts/defaultProps.tsx` - Navigation menu (added scenario route) +- `src/locales/zh-CN.json` - Chinese translations +- `src/locales/en-US.json` - English translations + +## Next Steps (Future Enhancements) + +1. **Visual Connections**: Draw lines between nodes to show workflow flow +2. **Drag and Drop**: Allow repositioning nodes on canvas +3. **Node Execution**: Implement backend workflow execution engine +4. **Real-time Monitoring**: Show execution status and logs +5. **Templates**: Pre-built workflow templates +6. **Export/Import**: Share workflows as JSON +7. **Validation**: Advanced workflow validation rules +8. **History**: Version control for workflows diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 4e806d59..a2ca4525 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -600,5 +600,14 @@ "启用场景": "Enable Scenario", "禁用场景": "Disable Scenario", "确认启用场景": "Confirm to enable scenario", - "确认禁用场景": "Confirm to disable scenario" + "确认禁用场景": "Confirm to disable scenario", + "工作流至少需要一个节点": "Workflow requires at least one node", + "工作流验证通过": "Workflow validation passed", + "请输入URL": "Please enter URL", + "请输入条件表达式": "Please enter condition expression", + "请输入延迟时间": "Please enter delay time", + "请输入迭代次数": "Please enter iterations", + "获取场景列表失败": "Failed to fetch scenario list", + "搜索场景": "Search scenarios", + "节点": "Nodes" } diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json index bb316186..8fbcb746 100644 --- a/src/locales/zh-CN.json +++ b/src/locales/zh-CN.json @@ -600,5 +600,14 @@ "启用场景": "启用场景", "禁用场景": "禁用场景", "确认启用场景": "确认启用场景", - "确认禁用场景": "确认禁用场景" + "确认禁用场景": "确认禁用场景", + "工作流至少需要一个节点": "工作流至少需要一个节点", + "工作流验证通过": "工作流验证通过", + "请输入URL": "请输入URL", + "请输入条件表达式": "请输入条件表达式", + "请输入延迟时间": "请输入延迟时间", + "请输入迭代次数": "请输入迭代次数", + "获取场景列表失败": "获取场景列表失败", + "搜索场景": "搜索场景", + "节点": "节点" } diff --git a/src/pages/scenario/index.tsx b/src/pages/scenario/index.tsx index 71302fb2..9441aca5 100644 --- a/src/pages/scenario/index.tsx +++ b/src/pages/scenario/index.tsx @@ -60,7 +60,7 @@ const ScenarioPage: React.FC = () => { setScenarios(data?.data || []); } } catch (error) { - message.error('获取场景列表失败'); + message.error(intl.get('获取场景列表失败')); } finally { setLoading(false); } diff --git a/src/pages/scenario/workflowEditorModal.tsx b/src/pages/scenario/workflowEditorModal.tsx index 9f0984d3..366907eb 100644 --- a/src/pages/scenario/workflowEditorModal.tsx +++ b/src/pages/scenario/workflowEditorModal.tsx @@ -147,10 +147,10 @@ const WorkflowEditorModal: React.FC = ({ const validateWorkflow = () => { if (localGraph.nodes.length === 0) { - message.warning('工作流至少需要一个节点'); + message.warning(intl.get('工作流至少需要一个节点')); return false; } - message.success('工作流验证通过'); + message.success(intl.get('工作流验证通过')); return true; }; @@ -201,7 +201,7 @@ const WorkflowEditorModal: React.FC = ({ @@ -243,7 +243,7 @@ const WorkflowEditorModal: React.FC = ({