mirror of
https://github.com/whyour/qinglong.git
synced 2025-12-13 07:25:05 +08:00
Add comprehensive architecture documentation
Co-authored-by: whyour <22700758+whyour@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
parent
e6b36b0a1b
commit
f026242ff2
324
ARCHITECTURE.md
Normal file
324
ARCHITECTURE.md
Normal file
|
|
@ -0,0 +1,324 @@
|
|||
# Scenario Mode - Architecture Diagram
|
||||
|
||||
## System Overview
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ Qinglong Application │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────┐ ┌─────────────────────┐ │
|
||||
│ │ Navigation Menu │ │ API Layer │ │
|
||||
│ │ ┌──────────────┐ │ │ /api/scenarios/ │ │
|
||||
│ │ │ 定时任务 │ │ │ - GET (list) │ │
|
||||
│ │ │ 订阅管理 │ │ │ - POST (create) │ │
|
||||
│ │ │ 场景管理 ⭐ │◄──┼─────────┤ - PUT (update) │ │
|
||||
│ │ │ 环境变量 │ │ │ - DELETE (delete) │ │
|
||||
│ │ │ ... │ │ │ - PUT /enable │ │
|
||||
│ │ └──────────────┘ │ │ - PUT /disable │ │
|
||||
│ └─────────────────────┘ │ - GET /:id │ │
|
||||
│ └─────────────────────┘ │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ ┌──────────────────────────────────────────────────────┐ │
|
||||
│ │ Scenario Management Page │ │
|
||||
│ │ /scenario │ │
|
||||
│ │ ┌────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ Toolbar: │ │ │
|
||||
│ │ │ [新建场景] [启用] [禁用] [删除] [搜索] │ │ │
|
||||
│ │ └────────────────────────────────────────────────┘ │ │
|
||||
│ │ ┌────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ Table: │ │ │
|
||||
│ │ │ ┌─────┬────────┬──────┬──────┬────────────┐ │ │ │
|
||||
│ │ │ │名称 │描述 │状态 │节点数│操作 │ │ │ │
|
||||
│ │ │ ├─────┼────────┼──────┼──────┼────────────┤ │ │ │
|
||||
│ │ │ │场景1│... │启用 │5节点 │[编辑工作流]│ │ │ │
|
||||
│ │ │ │场景2│... │禁用 │3节点 │[编辑工作流]│ │ │ │
|
||||
│ │ │ └─────┴────────┴──────┴──────┴────────────┘ │ │ │
|
||||
│ │ └────────────────────────────────────────────────┘ │ │
|
||||
│ └──────────────────────────────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ Click "编辑工作流" │
|
||||
│ ▼ │
|
||||
│ ┌──────────────────────────────────────────────────────────────┐ │
|
||||
│ │ Workflow Editor Modal (Full Screen) │ │
|
||||
│ │ ┌────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ Canvas Area (Left) │ Edit Panel (Right 400px) │ │ │
|
||||
│ │ ├─────────────────────────────┼──────────────────────────┤ │ │
|
||||
│ │ │ Toolbar: │ Node Configuration │ │ │
|
||||
│ │ │ [+HTTP] [+Script] │ ┌────────────────────┐ │ │ │
|
||||
│ │ │ [+Condition] [+Delay] │ │ Label: [______] │ │ │ │
|
||||
│ │ │ [+Loop] [Validate] │ │ Type: [HTTP▼] │ │ │ │
|
||||
│ │ │ │ │ │ │ │ │
|
||||
│ │ │ Nodes Grid: │ │ URL: [______] │ │ │ │
|
||||
│ │ │ ┌──────┐ ┌──────┐ ┌──────┐ │ │ Method:[GET ▼] │ │ │ │
|
||||
│ │ │ │Node 1│ │Node 2│ │Node 3│ │ │ Headers:[____] │ │ │ │
|
||||
│ │ │ │HTTP │ │Script│ │Cond. │ │ │ Body: [____] │ │ │ │
|
||||
│ │ │ └──────┘ └──────┘ └──────┘ │ │ │ │ │ │
|
||||
│ │ │ ┌──────┐ ┌──────┐ │ │ [Save] [Delete] │ │ │ │
|
||||
│ │ │ │Node 4│ │Node 5│ │ └────────────────────┘ │ │ │
|
||||
│ │ │ │Delay │ │Loop │ │ │ │ │
|
||||
│ │ │ └──────┘ └──────┘ │ │ │ │
|
||||
│ │ └─────────────────────────────┴──────────────────────────┘ │ │
|
||||
│ │ [Cancel] [Save Workflow] │ │
|
||||
│ └──────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Data Flow
|
||||
|
||||
```
|
||||
┌─────────────┐
|
||||
│ Browser │
|
||||
└──────┬──────┘
|
||||
│
|
||||
│ 1. Navigate to /scenario
|
||||
▼
|
||||
┌─────────────────┐
|
||||
│ Scenario Page │
|
||||
│ (React) │
|
||||
└──────┬──────────┘
|
||||
│
|
||||
│ 2. GET /api/scenarios
|
||||
▼
|
||||
┌─────────────────┐
|
||||
│ Scenario API │
|
||||
│ (Express) │
|
||||
└──────┬──────────┘
|
||||
│
|
||||
│ 3. Query database
|
||||
▼
|
||||
┌─────────────────┐
|
||||
│ Scenario Model │
|
||||
│ (Sequelize) │
|
||||
└──────┬──────────┘
|
||||
│
|
||||
│ 4. Read from SQLite
|
||||
▼
|
||||
┌─────────────────┐
|
||||
│ Database.db │
|
||||
│ Scenarios │
|
||||
│ Table │
|
||||
└─────────────────┘
|
||||
```
|
||||
|
||||
## Workflow Editor Data Flow
|
||||
|
||||
```
|
||||
User Action Flow:
|
||||
┌──────────────────────────────────────────────────────────────┐
|
||||
│ │
|
||||
│ Click "编辑工作流" │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ Open WorkflowEditorModal │
|
||||
│ │ │
|
||||
│ ├──► Load existing workflowGraph │
|
||||
│ │ (if scenario has one) │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ Display Canvas & Edit Panel │
|
||||
│ │ │
|
||||
│ ├──► Click [+HTTP] button │
|
||||
│ │ └──► Create new HTTP node │
|
||||
│ │ └──► Add to localGraph.nodes │
|
||||
│ │ │
|
||||
│ ├──► Click node card │
|
||||
│ │ └──► Set selectedNodeId │
|
||||
│ │ └──► Populate form in Edit Panel │
|
||||
│ │ │
|
||||
│ ├──► Edit form fields │
|
||||
│ │ └──► Update node.config │
|
||||
│ │ └──► Save to localGraph │
|
||||
│ │ │
|
||||
│ ├──► Click [Delete] button │
|
||||
│ │ └──► Remove node from localGraph.nodes │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ Click "保存工作流" │
|
||||
│ │ │
|
||||
│ ├──► Validate workflow │
|
||||
│ │ └──► Check nodes.length > 0 │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ Call onOk(localGraph) │
|
||||
│ │ │
|
||||
│ ▼ │
|
||||
│ PUT /api/scenarios │
|
||||
│ │ │
|
||||
│ └──► Update scenario.workflowGraph │
|
||||
│ └──► Save to database │
|
||||
│ └──► Success message │
|
||||
│ └──► Close modal │
|
||||
│ └──► Refresh list │
|
||||
│ │
|
||||
└──────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Node Type Configurations
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ Node Types │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 1. HTTP Request Node │
|
||||
│ ┌──────────────────────────────────────────┐ │
|
||||
│ │ type: 'http' │ │
|
||||
│ │ config: │ │
|
||||
│ │ - url: string │ │
|
||||
│ │ - method: GET|POST|PUT|DELETE │ │
|
||||
│ │ - headers: Record<string, string> │ │
|
||||
│ │ - body: string │ │
|
||||
│ └──────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 2. Script Execution Node │
|
||||
│ ┌──────────────────────────────────────────┐ │
|
||||
│ │ type: 'script' │ │
|
||||
│ │ config: │ │
|
||||
│ │ - scriptPath: string │ │
|
||||
│ │ - scriptContent: string │ │
|
||||
│ └──────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 3. Condition Node │
|
||||
│ ┌──────────────────────────────────────────┐ │
|
||||
│ │ type: 'condition' │ │
|
||||
│ │ config: │ │
|
||||
│ │ - condition: string │ │
|
||||
│ │ - trueNext: string │ │
|
||||
│ │ - falseNext: string │ │
|
||||
│ └──────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 4. Delay Node │
|
||||
│ ┌──────────────────────────────────────────┐ │
|
||||
│ │ type: 'delay' │ │
|
||||
│ │ config: │ │
|
||||
│ │ - delayMs: number │ │
|
||||
│ └──────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 5. Loop Node │
|
||||
│ ┌──────────────────────────────────────────┐ │
|
||||
│ │ type: 'loop' │ │
|
||||
│ │ config: │ │
|
||||
│ │ - iterations: number │ │
|
||||
│ │ - loopBody: string[] │ │
|
||||
│ └──────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## Database Schema
|
||||
|
||||
```
|
||||
Table: Scenarios
|
||||
┌──────────────┬──────────────┬──────────────┬───────────────┐
|
||||
│ Column │ Type │ Nullable │ Default │
|
||||
├──────────────┼──────────────┼──────────────┼───────────────┤
|
||||
│ id │ INTEGER │ NO │ AUTO_INCREMENT│
|
||||
│ name │ STRING │ NO │ - │
|
||||
│ description │ TEXT │ YES │ NULL │
|
||||
│ status │ INTEGER │ YES │ 0 │
|
||||
│ workflowGraph│ JSON │ YES │ NULL │
|
||||
│ createdAt │ DATETIME │ NO │ NOW() │
|
||||
│ updatedAt │ DATETIME │ NO │ NOW() │
|
||||
└──────────────┴──────────────┴──────────────┴───────────────┘
|
||||
|
||||
workflowGraph JSON structure:
|
||||
{
|
||||
"nodes": [
|
||||
{
|
||||
"id": "node_1234567890",
|
||||
"type": "http",
|
||||
"label": "HTTP请求 1",
|
||||
"x": 100,
|
||||
"y": 100,
|
||||
"config": {
|
||||
"url": "https://api.example.com",
|
||||
"method": "GET",
|
||||
"headers": {},
|
||||
"body": ""
|
||||
},
|
||||
"next": "node_1234567891"
|
||||
}
|
||||
],
|
||||
"startNode": "node_1234567890"
|
||||
}
|
||||
```
|
||||
|
||||
## Component Hierarchy
|
||||
|
||||
```
|
||||
App
|
||||
└── Layout
|
||||
└── Scenario Page (/scenario)
|
||||
├── Toolbar
|
||||
│ ├── Button (新建场景)
|
||||
│ ├── Button (启用)
|
||||
│ ├── Button (禁用)
|
||||
│ ├── Button (删除)
|
||||
│ └── Search (搜索场景)
|
||||
├── Table
|
||||
│ └── Columns
|
||||
│ ├── 场景名称
|
||||
│ ├── 场景描述
|
||||
│ ├── 状态
|
||||
│ ├── 工作流
|
||||
│ ├── 创建时间
|
||||
│ └── 操作
|
||||
│ └── Button (编辑工作流)
|
||||
├── ScenarioModal
|
||||
│ └── Form
|
||||
│ ├── Input (名称)
|
||||
│ └── TextArea (描述)
|
||||
└── WorkflowEditorModal
|
||||
├── Canvas (Left)
|
||||
│ ├── Toolbar
|
||||
│ │ ├── Button (+ HTTP)
|
||||
│ │ ├── Button (+ Script)
|
||||
│ │ ├── Button (+ Condition)
|
||||
│ │ ├── Button (+ Delay)
|
||||
│ │ ├── Button (+ Loop)
|
||||
│ │ └── Button (Validate)
|
||||
│ └── Nodes Grid
|
||||
│ └── NodeCard (×N)
|
||||
│ ├── Type Badge
|
||||
│ └── Label
|
||||
└── Edit Panel (Right)
|
||||
└── Form (Dynamic)
|
||||
├── Input (Label)
|
||||
├── Select (Type)
|
||||
├── [Node-specific fields]
|
||||
└── Buttons
|
||||
├── Save
|
||||
└── Delete
|
||||
```
|
||||
|
||||
## File Organization
|
||||
|
||||
```
|
||||
qinglong/
|
||||
├── back/
|
||||
│ ├── api/
|
||||
│ │ ├── index.ts (modified: +scenario route)
|
||||
│ │ └── scenario.ts (new: API endpoints)
|
||||
│ ├── data/
|
||||
│ │ └── scenario.ts (new: Model definition)
|
||||
│ └── services/
|
||||
│ └── scenario.ts (new: Business logic)
|
||||
├── src/
|
||||
│ ├── layouts/
|
||||
│ │ └── defaultProps.tsx (modified: +scenario nav)
|
||||
│ ├── locales/
|
||||
│ │ ├── zh-CN.json (modified: +53 keys)
|
||||
│ │ └── en-US.json (modified: +53 keys)
|
||||
│ └── pages/
|
||||
│ └── scenario/
|
||||
│ ├── index.tsx (new: Main page)
|
||||
│ ├── index.less (new: Page styles)
|
||||
│ ├── modal.tsx (new: Create/Edit modal)
|
||||
│ ├── workflowEditorModal.tsx (new: Editor)
|
||||
│ ├── workflowEditor.less (new: Editor styles)
|
||||
│ └── type.ts (new: TypeScript types)
|
||||
└── SCENARIO_MODE.md (new: Documentation)
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user