graph TB
    subgraph "Browser"
        Pages[Pages<br/>路由页面]
        Components[Components<br/>UI组件]
        Service[Service Layer<br/>API服务层]
        Context[Context Store<br/>全局状态]
        Hooks[Custom Hooks<br/>自定义钩子]
    end
    
    subgraph "Core Modules"
        App[App Module<br/>应用管理]
        Workflow[Workflow Editor<br/>工作流编辑器]
        Dataset[Dataset Module<br/>知识库管理]
        Plugin[Plugin Module<br/>插件系统]
        Tools[Tools Module<br/>工具管理]
    end
    
    subgraph "Infrastructure"
        I18n[I18n<br/>国际化]
        Theme[Theme System<br/>主题系统]
        Router[App Router<br/>路由系统]
        SWR[SWR Cache<br/>数据缓存]
    end
    
    subgraph "Backend API"
        ConsoleAPI[Console API<br/>管理端API]
        PublicAPI[Public API<br/>公开API]
    end
    
    Pages --> Components
    Components --> Hooks
    Components --> Context
    Hooks --> Service
    Service --> ConsoleAPI
    Service --> PublicAPI
    Service --> SWR
    
    App --> Components
    Workflow --> Components
    Dataset --> Components
    Plugin --> Components
    Tools --> Components
    
    Router --> Pages
    I18n --> Components
    Theme --> Components
    
    style App fill:#e1f5ff
    style Workflow fill:#e1f5ff
    style Dataset fill:#e1f5ff
    style Plugin fill:#e1f5ff
    style Service fill:#fff3cd
    style Context fill:#d4edda

web/
├── app/                          # Next.js App Router
│   ├── layout.tsx                # 根布局（全局Context）
│   ├── (commonLayout)/           # 管理端布局
│   │   ├── app/                  # 应用管理页面
│   │   ├── datasets/             # 知识库管理页面
│   │   ├── plugins/              # 插件管理页面
│   │   └── tools/                # 工具管理页面
│   ├── (shareLayout)/            # 分享页面布局
│   │   ├── chat/                 # 聊天分享页
│   │   ├── chatbot/              # 聊天机器人
│   │   └── workflow/             # 工作流分享页
│   └── components/               # 业务组件
│       ├── app/                  # 应用相关组件
│       ├── workflow/             # 工作流编辑器组件
│       ├── datasets/             # 知识库相关组件
│       ├── plugins/              # 插件相关组件
│       └── base/                 # 基础UI组件
│
├── service/                      # API服务层
│   ├── base.ts                   # 基础HTTP请求封装
│   ├── apps.ts                   # 应用相关API
│   ├── datasets.ts               # 知识库相关API
│   ├── workflow.ts               # 工作流相关API
│   └── plugins.ts                # 插件相关API
│
├── context/                      # 全局Context
│   ├── app-context.tsx           # 应用Context
│   ├── event-emitter.tsx         # 事件总线
│   ├── provider-context.tsx      # 模型供应商Context
│   └── modal-context.tsx         # Modal管理Context
│
├── hooks/                        # 自定义Hooks
│   ├── use-breakpoints.ts        # 响应式断点
│   ├── use-i18n.ts               # 国际化Hook
│   └── use-theme.ts              # 主题Hook
│
├── i18n/                         # 国际化资源
│   ├── en-US/                    # 英文
│   ├── zh-Hans/                  # 简体中文
│   └── ...                       # 21种语言
│
├── models/                       # 数据模型（TypeScript类型）
│   ├── app.ts                    # 应用模型
│   ├── datasets.ts               # 知识库模型
│   └── workflow.ts               # 工作流模型（隐式）
│
├── utils/                        # 工具函数
│   ├── format.ts                 # 格式化工具
│   ├── var.ts                    # 常量定义
│   └── ...
│
└── config/                       # 配置文件
    └── index.ts                  # 环境配置

sequenceDiagram
    autonumber
    participant User as 用户
    participant Page as Apps Page
    participant Modal as Create Modal
    participant Service as Apps Service
    participant API as Backend API
    
    User->>Page: 点击"创建应用"
    Page->>Modal: 打开创建弹窗
    User->>Modal: 选择应用类型（聊天/文本生成/工作流）
    User->>Modal: 输入应用名称和描述
    Modal->>Service: createApp(name, mode, ...)
    Service->>API: POST /apps
    API-->>Service: { id, name, mode, ... }
    Service-->>Modal: 返回应用数据
    Modal->>Page: 关闭弹窗，刷新列表
    Page->>User: 跳转到应用配置页

sequenceDiagram
    autonumber
    participant User as 用户
    participant Canvas as 工作流画布
    participant Panel as 配置面板
    participant Store as Workflow Store
    participant Service as Workflow Service
    participant API as Backend API
    
    User->>Canvas: 拖拽节点到画布
    Canvas->>Store: addNode(nodeData)
    Store-->>Canvas: 更新节点列表
    
    User->>Canvas: 连接节点
    Canvas->>Store: addEdge(edgeData)
    Store-->>Canvas: 更新连接列表
    
    User->>Canvas: 点击节点
    Canvas->>Panel: 打开配置面板
    User->>Panel: 配置节点参数
    Panel->>Store: updateNodeData(nodeId, data)
    
    User->>Canvas: 点击"保存"
    Canvas->>Service: saveWorkflow(graph)
    Service->>API: POST /apps/{appId}/workflows
    API-->>Service: { result: 'success' }
    Service-->>Canvas: 保存成功
    Canvas->>User: 提示保存成功

graph LR
    User[用户操作] --> Component[组件]
    Component --> Hook[自定义Hook]
    Hook --> Service[Service层]
    Service --> API[Backend API]
    API --> Backend[Backend服务]
    
    Component --> Context[Context Store]
    Context --> Component
    
    Service --> SWR[SWR Cache]
    SWR --> Component
    
    style Service fill:#fff3cd
    style Context fill:#d4edda
    style SWR fill:#cfe2ff

// 发送事件
emit('app:updated', { appId: '123', name: 'New Name' })

// 订阅事件
on('app:updated', (data) => {
  console.log('App updated:', data)
})

interface WorkflowStore {
  nodes: Node[]
  edges: Edge[]
  addNode: (node: Node) => void
  updateNode: (id: string, data: any) => void
  deleteNode: (id: string) => void
  // ... 更多方法
}

graph TB
    subgraph "服务器状态（SWR）"
        Apps[应用列表]
        Datasets[知识库列表]
        Workflows[工作流数据]
        Plugins[插件列表]
    end
    
    subgraph "全局状态（Context）"
        User[用户信息]
        Workspace[工作空间]
        Theme[主题配置]
        I18n[语言设置]
    end
    
    subgraph "局部状态（useState/useReducer）"
        FormState[表单状态]
        ModalState[弹窗状态]
        UIState[UI交互状态]
    end
    
    subgraph "编辑器状态（Zustand）"
        WorkflowState[工作流编辑器]
    end
    
    style Apps fill:#cfe2ff
    style User fill:#d4edda
    style FormState fill:#fff3cd
    style WorkflowState fill:#f8d7da

// 获取应用列表
function useApps() {
  const { data, error, isLoading, mutate } = useSWR<App[]>(
    '/apps',
    fetchApps
  )
  
  return {
    apps: data,
    isLoading,
    isError: error,
    refresh: mutate,
  }
}

// 使用
function AppsPage() {
  const { apps, isLoading, refresh } = useApps()
  
  if (isLoading) return <Loading />
  
  return (
    <div>
      {apps.map(app => <AppCard key={app.id} app={app} />)}
      <button onClick={refresh}>刷新</button>
    </div>
  )
}

/                           → 重定向到 /apps
/apps                       → 应用列表
/app/[appId]/overview       → 应用概览
/app/[appId]/configuration  → 应用配置（聊天/文本生成）
/app/[appId]/workflow       → 工作流编辑器（工作流应用）
/app/[appId]/logs           → 应用日志

/datasets                   → 知识库列表
/datasets/create            → 创建知识库
/datasets/[datasetId]/documents → 知识库文档管理
/datasets/[datasetId]/settings  → 知识库设置

/plugins                    → 插件列表
/plugins/[pluginId]         → 插件详情

/tools                      → 工具列表

/account                    → 账户设置
/signin                     → 登录页
/signup                     → 注册页

graph TD
    Root[Root Layout<br/>全局Context]
    Common[Common Layout<br/>管理端布局]
    Share[Share Layout<br/>分享页布局]
    
    AppList[应用列表页]
    AppDetail[应用详情布局]
    Overview[应用概览页]
    Config[应用配置页]
    Workflow[工作流编辑页]
    
    Root --> Common
    Root --> Share
    Common --> AppList
    Common --> AppDetail
    AppDetail --> Overview
    AppDetail --> Config
    AppDetail --> Workflow
    
    style Root fill:#e1f5ff
    style Common fill:#d4edda
    style Share fill:#fff3cd

graph TB
    Component[组件] --> Hook[自定义Hook]
    Hook --> Service[Service函数]
    Service --> BaseService[base.ts<br/>基础HTTP封装]
    BaseService --> Fetch[fetch API]
    
    BaseService --> Auth[Token管理]
    BaseService --> Error[错误处理]
    BaseService --> Stream[SSE流处理]
    
    Fetch --> ConsoleAPI[Console API<br/>/console/api]
    Fetch --> PublicAPI[Public API<br/>/api]
    
    style Service fill:#fff3cd
    style BaseService fill:#cfe2ff

// Stream处理示例
ssePost('/chat-messages', {
  body: {
    query: 'Hello',
    conversation_id: 'xxx'
  }
}, {
  onData: (message, isFirst, moreInfo) => {
    // 处理消息片段
    console.log(message)
  },
  onWorkflowStarted: (data) => {
    // 工作流开始
  },
  onNodeStarted: (data) => {
    // 节点开始执行
  },
  onNodeFinished: (data) => {
    // 节点执行完成
  },
  onCompleted: () => {
    // 全部完成
  },
  onError: (error) => {
    // 错误处理
  }
})

graph TB
    subgraph "业务组件"
        AppCard[应用卡片]
        WorkflowNode[工作流节点]
        DatasetCard[知识库卡片]
        PluginCard[插件卡片]
    end
    
    subgraph "通用业务组件"
        Chat[聊天组件]
        CodeEditor[代码编辑器]
        MarkdownPreview[Markdown预览]
        FileUpload[文件上传]
    end
    
    subgraph "基础UI组件"
        Button[Button]
        Input[Input]
        Modal[Modal]
        Dropdown[Dropdown]
        Toast[Toast]
        Loading[Loading]
    end
    
    AppCard --> Chat
    AppCard --> Button
    AppCard --> Modal
    
    WorkflowNode --> CodeEditor
    WorkflowNode --> Dropdown
    
    DatasetCard --> FileUpload
    DatasetCard --> Button
    
    Chat --> MarkdownPreview
    Chat --> Input
    
    style AppCard fill:#e1f5ff
    style Chat fill:#fff3cd
    style Button fill:#d4edda

graph TB
    E2E[E2E测试<br/>Playwright<br/>~20个]
    Integration[集成测试<br/>React Testing Library<br/>~100个]
    Unit[单元测试<br/>Jest<br/>~200个]
    
    E2E --> Integration
    Integration --> Unit
    
    style E2E fill:#f8d7da
    style Integration fill:#fff3cd
    style Unit fill:#d4edda

# 1. 安装依赖
pnpm install

# 2. 类型检查
pnpm run type-check

# 3. Lint检查
pnpm run lint

# 4. 测试
pnpm run test

# 5. 构建生产版本
pnpm run build

# 6. 启动生产服务
pnpm run start

echo kern.maxfiles=65536 | sudo tee -a /etc/sysctl.conf
echo kern.maxfilesperproc=65536 | sudo tee -a /etc/sysctl.conf
sudo sysctl -w kern.maxfiles=65536
sudo sysctl -w kern.maxfilesperproc=65536