graph LR
    subgraph 客户端
        Browser["浏览器"]
    end

    subgraph Nginx / OpenResty
        Static["静态资源<br/>(React SPA)"]
        Proxy["反向代理<br/>/api → :5000(Dev)<br/>/api → :8000(Prod)"]
        WS["WebSocket<br/>(Live View)"]
    end

    subgraph Flask Backend :5000(Dev) / :8000(Prod)
        API["API 蓝图层<br/>12 个模块"]
        Auth["JWT 认证<br/>+ RBAC 权限"]
        ORM["SQLAlchemy ORM<br/>15 个数据模型"]
    end

    subgraph Async Workers
        Celery["Celery Worker<br/>(Web / Perf 测试)"]
        Scheduler["APScheduler<br/>(定时任务)"]
    end

    subgraph AI Layer
        Copilot["AI Copilot"]
        Agent["AI Agent<br/>(编排 / 脚本生成)"]
    end

    subgraph Data Stores
        PG["PostgreSQL"]
        Redis["Redis<br/>(消息队列 + 缓存)"]
    end

    Browser --> Static
    Browser --> Proxy
    Proxy --> API
    API --> Auth
    Auth --> ORM
    ORM --> PG
    API --> Celery
    Celery --> Redis
    Scheduler --> Celery
    API --> Copilot
    Copilot --> Agent
    Agent -->|OpenAI / DeepSeek 等| LLM["LLM API"]
    WS -->|VNC Live View| VNC["x11vnc + websockify"]
    Celery -->|Playwright| VNC

sequenceDiagram
    participant U as 用户浏览器
    participant N as Nginx / OpenResty
    participant F as Flask API
    participant DB as PostgreSQL
    participant R as Redis
    participant C as Celery Worker
    participant AI as LLM API

    U->>N: HTTPS 请求
    N->>F: 反向代理 /api/*
    F->>F: JWT 鉴权 + RBAC 校验
    F->>DB: 读写业务数据
    F-->>U: 同步响应 (JSON)

    Note over U,F: 异步任务场景 (Web/Perf 测试)
    F->>R: 发送 Celery 任务
    F-->>U: 返回 task_id
    R->>C: 消费任务
    C->>DB: 写入测试结果
    C->>R: 更新任务状态
    U->>F: 轮询任务状态
    F->>R: 查询 Celery 状态
    F-->>U: 返回进度与结果

    Note over F,AI: AI 辅助场景
    F->>AI: 发送 Prompt (含上下文)
    AI-->>F: 返回结构化结果
    F-->>U: AI 生成的用例 / 脚本 / 分析

graph TD
    Entry["app.py / wsgi.py"] --> Factory["create_app()"]
    Factory --> Config["加载配置<br/>(Development / Testing / Production)"]
    Factory --> Ext["初始化扩展<br/>(db, jwt, celery, migrate)"]
    Factory --> BP["注册蓝图<br/>api_bp → /api/v1"]
    Factory --> CORS["配置 CORS"]
    Factory --> ErrorH["注册全局错误处理"]
    Factory --> Scheduler["启动 APScheduler"]

erDiagram
    User ||--o{ Project : "owns"
    User ||--o{ WebTestScript : "creates"
    User ||--o{ TestRun : "triggers"
    User ||--o{ ScheduledTask : "schedules"

    Project ||--o{ Environment : "has"
    Project ||--o{ ApiTestCollection : "contains"
    Project ||--o{ WebTestCollection : "contains"
    Project ||--o{ AppTestCollection : "contains"
    Project ||--o{ PerfTestScenario : "contains"

    ApiTestCollection ||--o{ ApiTestCase : "contains"
    WebTestCollection ||--o{ WebTestScript : "contains"
    AppTestCollection ||--o{ AppTestScript : "contains"

    TestRun ||--o| TestReport : "generates"
    Project ||--o{ TestRun : "tracks"
    Project ||--o{ TestReport : "aggregates"
    Project ||--o{ TestDocument : "documents"

    WebhookToken }o--|| Project : "belongs to"

    User {
        int id PK
        string username UK
        string email UK
        string password_hash
        string role "admin | member | viewer"
    }
    Project {
        int id PK
        string name
        int owner_id FK
    }
    Environment {
        int id PK
        string name
        json variables
        int project_id FK
    }
    ApiTestCase {
        int id PK
        string name
        string method
        string url
        int collection_id FK
    }
    TestRun {
        int id PK
        string test_type "api | web | app | perf"
        string status "pending | running | success | failed"
        int total_cases
        int passed
        int failed
    }
    TestReport {
        int id PK
        string test_type
        json summary
        int test_run_id FK
    }

graph LR
    subgraph 认证流程
        Login["登录请求"] --> Validate["校验用户名密码"]
        Validate --> GenToken["生成双 Token"]
        GenToken --> Access["Access Token<br/>有效期 24h"]
        GenToken --> Refresh["Refresh Token<br/>有效期 30d"]
        Access --> Header["放入 Authorization Header"]
    end

    subgraph 权限控制
        Request["API 请求"] --> JWT["JWT 解析<br/>提取 user_id + role"]
        JWT --> RBAC{"角色校验"}
        RBAC -->|admin| Admin["全部权限"]
        RBAC -->|member| Member["读写权限"]
        RBAC -->|viewer| Viewer["只读权限"]
    end

graph LR
    API["Flask API"] -->|send_task| Broker["Redis Broker"]
    Broker -->|consume| Worker["Celery Worker"]
    Worker -->|Playwright| WebTest["执行 Web 测试"]
    Worker -->|Locust| PerfTest["执行性能压测"]
    Worker -->|update_state| Backend["Redis Backend"]
    API -->|AsyncResult| Backend
    API -->|查询状态| Client["前端轮询"]

graph TD
    App["App.tsx<br/>路由入口"] --> Layout["MainLayout<br/>侧边栏 + 顶栏 + 内容区"]
    Layout --> Suspense["React.Suspense<br/>懒加载边界"]
    Suspense --> Pages["页面组件"]
    Pages --> Dashboard["Dashboard"]
    Pages --> APITest["API 测试工作台"]
    Pages --> WebTest["Web 自动化"]
    Pages --> AppTest["APP 测试"]
    Pages --> PerfTest["性能测试"]
    Pages --> Reports["报告中心"]
    Pages --> Settings["系统设置"]

    APITest --> Components["业务组件"]
    Components --> RequestEditor["请求编辑器"]
    Components --> EnvManager["环境管理器"]
    Components --> MockServer["Mock 面板"]

    Layout --> Global["全局组件"]
    Global --> Copilot["GlobalCopilot<br/>AI 助手浮窗"]
    Global --> Search["GlobalSearch<br/>全局搜索"]
    Global --> EnvHint["EnvironmentVariableHint<br/>变量自动补全"]

graph LR
    subgraph Stores
        AuthStore["authStore<br/>用户认证状态<br/>(persist → localStorage)"]
        ProjectStore["projectStore<br/>当前项目<br/>(persist → localStorage)"]
        APITestStore["apiTestStore<br/>集合/用例/Mock"]
        WebTestStore["webTestStore<br/>脚本/执行状态"]
        PerfTestStore["perfTestStore<br/>场景/实时指标"]
    end

    subgraph 中间件
        Persist["persist<br/>持久化到 localStorage"]
        Devtools["devtools<br/>Redux DevTools 调试"]
    end

    AuthStore --> Persist
    ProjectStore --> Persist
    APITestStore --> Devtools
    WebTestStore --> Devtools
    PerfTestStore --> Devtools

graph TD
    subgraph 认证层
        JWT["JWT 双 Token<br/>Access: 24h / Refresh: 30d"]
        Header["Authorization Header<br/>Bearer <token>"]
    end

    subgraph 权限层
        RBAC["RBAC 角色控制<br/>admin / member / viewer"]
        Decorator["@require_role 装饰器<br/>路由级权限守卫"]
    end

    subgraph 传输层
        HTTPS["HTTPS (SSL/TLS)"]
        CORS["CORS 白名单"]
    end

    subgraph 数据层
        Hash["密码哈希<br/>(bcrypt / werkzeug)"]
        EnvVars["环境变量<br/>敏感信息不入代码库"]
        Webhook["Webhook 签名<br/>HMAC-SHA256"]
    end

    Header --> JWT --> RBAC --> Decorator
    HTTPS --> CORS
    Hash --> EnvVars --> Webhook