# chat-design

**Repository Path**: oop_xiaowu/chat-design

## Basic Information

- **Project Name**: chat-design
- **Description**: chat前端架构设计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-04
- **Last Updated**: 2026-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目架构结构关系图

## 1. 整体架构图

```mermaid
graph TB
    subgraph 浏览器层
        User[用户]
    end
    
    subgraph UI层
        Layout[布局系统
        - FirstSide
        - NavMenu  
        - Topbar
        - SessionAction]
        
        subgraph 视图层
            Login[Login/登录]
            ChatHome[ChatHome/聊天主页]
            ChatMessage[ChatMessage/消息展示]
            ChatSend[ChatSend/消息发送]
            ChatOperation[ChatOperation/操作面板]
            ChatShare[ChatShare/分享页面]
        end
        
        subgraph 组件层
            UI_Components[UI组件
            - scWorkflow/工作流
            - scSelect/选择器
            - dynamicForm/动态表单
            - scWaterMark/水印]
            
            Icon_Components[图标组件
            - error/zoom/good]
        end
    end
    
    subgraph 状态管理层 Vuex
        Store[Vuex Store
        modules自动导入]
        
        subgraph Modules
            UserModule[User Module
            - ticket/userInfo
            - AES认证流程]
            
            ChatModule[Chat Module
            - sessionList/listMsg
            - robotInfo/实时流
            - alarmMsg/任务进度]
            
            VideoModule[Video Module
            - 播放控制
            - 录制管理]
            
            GlobalModule[Global Module
            - 全局配置
            - 菜单折叠]
            
            KeepAlive[KeepAlive Module
            - 路由缓存]
            
            ViewTags[ViewTags Module
            - 标签管理]
            
            TransferData[TransferData Module
            - 数据传递]
            
            Iframe[Iframe Module
            - iframe管理]
            Robot[Robot Module
            - 机器人信息]
        end
    end
    
    subgraph API层
        API_Modules[API模块自动导入
        - chat.js
        - auth.js
        - system.js
        - tool.js
        - common.js]
        
        HTTP[HTTP请求
        - axios封装
        - 拦截器]
    end
    
    subgraph 工具层
        Utils[工具函数
        - tool.js/通用工具
        - CryptoJStest.js/加密
        - dateFormat.js/日期
        - chatSession.js/会话分组]
        
        Directives[自定义指令
        - auth/权限
        - auths/多权限
        - time/时间格式化
        - copy/复制]
        
        Config[配置文件
        - index.js/API配置
        - myConfig.js/自定义配置
        - route.js/路由配置]
    end
    
    subgraph 后端服务
        Backend[后端API服务
        /v1/sessionManager
        /v1/ai/chat
        /v1/vmc/record]
    end
    
    User --> Layout
    Layout --> ChatHome
    ChatHome --> ChatMessage
    ChatHome --> ChatSend
    ChatHome --> ChatOperation
    
    ChatMessage --> Store
    ChatSend --> Store
    ChatOperation --> Store
    
    Store --> UserModule
    Store --> ChatModule
    Store --> VideoModule
    Store --> GlobalModule
    
    ChatModule --> API_Modules
    UserModule --> API_Modules
    VideoModule --> API_Modules
    
    API_Modules --> HTTP
    HTTP --> Backend
    
    Store --> Utils
```

---

## 2. 数据流向图

```mermaid
sequenceDiagram
    actor User as 用户
    participant UI as UI组件
    participant Store as Vuex Store
    participant Action as Actions
    participant API as API层
    participant Backend as 后端服务
    participant SSE as SSE流服务

    %% 场景1: 用户发送消息
    User->>UI: 输入消息并发送
    UI->>Store: commit(APPEND_MSG)
    Store->>Action: dispatch(sendMsg)
    Action->>API: POST /v1/ai/chat
    API->>Backend: 发送请求
    Backend->>SSE: 建立SSE连接
    SSE-->>Action: 流式返回数据
    loop 流数据处理
        Action->>Store: commit(UPDATE_CURRENT_MSG)
        Store-->>UI: 响应式更新
    end
    Action->>Store: commit(SET_IS_END)

    %% 场景2: 获取会话列表
    User->>UI: 点击切换会话
    UI->>Store: dispatch(getSessionDetails)
    Store->>Action: 异步请求
    Action->>API: GET /v1/sessionManager/history
    API->>Backend: 查询历史
    Backend-->>API: 返回数据
    API-->>Action: 返回结果
    Action->>Store: commit(SET_REST_LIST_MSG)
    Action->>Store: commit(SET_ROBOT_INFO)
    Store-->>UI: 更新视图

    %% 场景3: 任务执行
    Action->>API: GET /v1/ai/doTask
    API->>Backend: 执行任务
    Backend-->>API: 返回任务ID
    Action->>Store: commit(SET_CURRENT_TASK_ID)
    Action->>Action: 启动定时器
    loop 每30秒轮询
        Action->>API: GET /v1/sessionManager/task/history
        API-->>Action: 任务进度
        Action->>Store: commit(SET_ROBOT_TASK_PROGRESS)
    end
```

---

## 3. 状态管理架构

```mermaid
classDiagram
    class Store {
        +modules: Object
        +getters: Object
        +createStore()
    }
    
    class UserModule {
        +state
        +ticket: String
        +userInfo: Object
        +authKeyIv: Object
        +getAesKeyIv()
        +getToken()
        +getUserInfo()
        +clearUserInfo()
    }
    
    class ChatModule {
        +state
        +aiAvatar: String
        +sessionChat: Object
        +listMsg: Array
        +sessionList: Array
        +activeSession: String
        +isEnd: Boolean
        +sessionTaskLogs: Object
        +robotInfo: Array
        +chatTaskHistory: Array
        +alarmMsgData: Object
        +alarmMsgCount: Number
        +getSessionList()
        +createSession()
        +getSessionDetails()
        +deleteSession()
        +sendMsg()
        +doTaskRobot()
        +stopSession()
        +readStreamData()
    }
    
    class VideoModule {
        +state
        +video: Object
        +isPlaying: Boolean
        +currentTime: Number
        +progress: Number
        +isRecording: Boolean
        +initVideo()
        +playPause()
        +startRecord()
        +stopRecord()
    }
    
    class GlobalModule {
        +state
        +ismobile: Boolean
        +menuIsCollapse: Boolean
        +layout: String
    }
    
    class Getters {
        +aiAvatar
        +listMsg
        +sessionList
        +activeSession
        +userInfo
        +video
        +isRecording
    }
    
    Store --> UserModule
    Store --> ChatModule
    Store --> VideoModule
    Store --> GlobalModule
    Store --> Getters
```

---

## 4. UI组件层级图

```mermaid
graph TD
    subgraph App[App.vue - 根组件]
        Router[Router View]
    end
    
    subgraph Routes[路由配置]
        LoginRoute[/login - 登录页\]
        IndexRoute[/index - 首页\]
        ShareRoute[/crm/share - 分享页\]
    end
    
    subgraph Layout[layout/index.vue - 布局组件]
        FirstSide[FirstSide - 一级导航]
        SessionAction[SessionAction - 会话操作]
        NavMenu[NavMenu - 会话列表菜单]
        Topbar[Topbar - 顶部栏]
        Userbar[userbar - 用户信息]
    end
    
    subgraph ChatHome[views/chatHome - 聊天主页]
        Row[el-row 14:10分栏]
        
        subgraph Left[左侧 14/24]
            ChatMsgCard[聊天消息卡片
            chatMessage/index.vue]
            ChatSendCard[消息发送卡片
            chatMessage/chatSend.vue]
        end
        
        subgraph Right[右侧 10/24]
            OperationCard[操作面板卡片
            chatOperation/index.vue]
        end
    end
    
    subgraph ChatMessage[views/chatMessage - 消息展示]
        StreamContainer[stream容器
        chatMessage/index.vue]
        
        subgraph MsgTypes[消息类型组件]
            UserMsg[userMsg/index.vue
            - 用户消息]
            AIMsg[aiMsg/index.vue
            - AI消息
            - operation.vue操作
            - chatMark.vue标记]
        end
    end
    
    subgraph ChatOperation[views/chatOperation - 操作面板]
        HeaderInfo[headerInfo/index.vue
        - 头部信息]
        Timeline[timeLine/index.vue
        - 时间线]
        PlayerLog[playerLog/index.vue
        - 播放日志
        - videoProgress.vue进度]
    end
    
    App --> Router
    Router --> LoginRoute
    Router --> IndexRoute
    Router --> ShareRoute
    
    IndexRoute --> Layout
    Layout --> ChatHome
    
    ChatHome --> Left
    ChatHome --> Right
    Left --> ChatMsgCard
    Left --> ChatSendCard
    Right --> OperationCard
    
    ChatMsgCard --> ChatMessage
    ChatMessage --> StreamContainer
    StreamContainer --> MsgTypes
    
    OperationCard --> ChatOperation
    ChatOperation --> HeaderInfo
    ChatOperation --> Timeline
    ChatOperation --> PlayerLog
```

---

## 5. 用户交互流程图

```mermaid
flowchart TD
    subgraph 登录流程
        A[用户访问] --> B{是否已登录?}
        B -->|否| C[跳转/login]
        C --> D[输入账号密码]
        D --> E[getAesKeyIv]
        E --> F[getTicketChange]
        F --> G[保存Token]
        G --> H[getUserInfo]
        H --> I[跳转/index]
        B -->|是| I
    end
    
    subgraph 会话管理
        J[创建新会话] --> K[createSession]
        K --> L[API创建会话]
        L --> M[更新sessionList]
        
        N[切换会话] --> O[getSessionDetails]
        O --> P[获取历史消息]
        P --> Q[获取机器人信息]
        Q --> R[更新UI]
        
        S[批量管理] --> T[开启批量模式]
        T --> U[多选删除]
        U --> V[deleteSessionBatch]
    end
    
    subgraph 消息交互
        W[用户输入] --> X{校验}
        X -->|合法| Y[sendMsg]
        Y --> Z[追加用户消息]
        Z --> AA[建立SSE连接]
        AA --> AB[流式接收AI回复]
        AB --> AC[实时更新消息]
        AC --> AD{是否结束?}
        AD -->|否| AB
        AD -->|是| AE[标记结束状态]
        
        AF[停止生成] --> AG[stopSession]
        AG --> AH[AbortController取消]
        AH --> AI[更新消息状态]
    end
    
    subgraph 任务执行
        AJ[触发任务] --> AK[doTaskRobot]
        AK --> AL[启动SSE流]
        AL --> AM[获取任务ID]
        AM --> AN[定时轮询进度]
        AN --> AO[更新任务历史]
        AO --> AP{任务完成?}
        AP -->|否| AN
        AP -->|是| AQ[停止轮询]
    end
    
    subgraph 告警通知
        AR[接收告警] --> AS[getAlarmMsgList]
        AS --> AT[更新alarmMsgData]
        AT --> AU[显示通知badge]
        AU --> AV[用户查看]
        AV --> AW[clearAlarmMsg]
    end
```

---

## 6. API架构图

```mermaid
graph LR
    subgraph API层
        direction TB
        
        subgraph Auth_API[auth.js - 认证API]
            getAesKeyAndIv[获取AES密钥]
            getTicketChange[换取Token]
            postUserinfo[获取用户信息]
        end
        
        subgraph Chat_API[chat.js - 聊天API]
            chatSessionList[会话列表]
            chatSessionCreate[创建会话]
            chatSessionDetails[会话详情]
            chatSend[发送消息]
            chatStop[停止会话]
            taskRobotDo[执行任务]
            chatTaskHistory[任务历史]
            chatAlarmMsgList[告警列表]
        end
        
        subgraph System_API[system.js - 系统API]
            systemConfig[系统配置]
            menuList[菜单列表]
        end
        
        subgraph Tool_API[tool.js - 工具API]
            upload[文件上传]
            download[文件下载]
        end
        
        subgraph Common_API[common.js - 通用API]
            commonList[通用列表]
            commonDetail[通用详情]
        end
    end
    
    subgraph HTTP封装
        Request[request.js
        - axios实例
        - 请求拦截器
        - 响应拦截器
        - 错误处理]
    end
    
    subgraph 后端端点
        Backend1[/v1/sessionManager/*\]
        Backend2[/v1/ai/*\]
        Backend3[/v1/vmc/*\]
        Backend4[/opentool/*\]
    end
    
    Auth_API --> Request
    Chat_API --> Request
    System_API --> Request
    Tool_API --> Request
    Common_API --> Request
    
    Request --> Backend1
    Request --> Backend2
    Request --> Backend3
    Request --> Backend4
```

---

## 7. 实时流消息处理流程

```mermaid
sequenceDiagram
    participant User
    participant Component as ChatMessage
    participant Store as Chat Store
    participant Action as readStreamData
    participant SSE as SSE Stream
    participant Backend

    User->>Component: 发送消息
    Component->>Store: dispatch(sendMsg)
    Store->>Action: 发起fetch请求
    Action->>Backend: POST /v1/ai/chat
    Backend-->>Action: 返回ReadableStream
    
    loop 流读取循环
        Action->>SSE: reader.read()
        SSE-->>Action: {done, value}
        Action->>Action: 解析SSE数据帧
        Action->>Store: commit(UPDATE_CURRENT_MSG)
        Store-->>Component: 响应式更新listMsg
    end
    
    Action->>Store: commit(SET_IS_END, true)
```

---

## 8. 会话状态管理

```mermaid
stateDiagram-v2
    [*] --> 未登录: 访问系统
    未登录 --> 登录中: 输入凭证
    登录中 --> 已登录: 认证成功
    已登录 --> 会话列表: 加载会话
    
    会话列表 --> 空会话: 首次使用
    会话列表 --> 有会话: 历史会话
    
    空会话 --> 新建会话: 创建
    有会话 --> 切换会话: 点击
    有会话 --> 新建会话: 创建
    
    切换会话 --> 加载中: 获取详情
    新建会话 --> 加载中: 初始化
    
    加载中 --> 聊天中: 加载完成
    
    聊天中 --> 发送中: 用户发送
    发送中 --> 流式响应: AI回复中
    流式响应 --> 聊天中: 回复完成
    流式响应 --> 发送中: 用户打断
    
    聊天中 --> 执行任务: 触发任务
    执行任务 --> 任务执行中: 开始执行
    任务执行中 --> 任务完成: 执行完毕
    任务执行中 --> 聊天中: 取消任务
    任务完成 --> 聊天中: 返回聊天
    
    已登录 --> [*]: 登出
```

---

## 9. 项目依赖关系图

```mermaid
graph LR
    subgraph 核心依赖
        Vue3[Vue 3.4]
        Vite[Vite 5.3]
        VueRouter[Vue Router 4.1]
        Vuex[Vuex 4.1]
    end
    
    subgraph UI组件库
        ElementPlus[Element Plus 2.2]
        AntDesign[Ant Design Vue 4.x]
        VxeTable[Vxe-table 4.5]
    end
    
    subgraph 功能库
        Axios[Axios 1.3]
        ECharts[ECharts 4.9]
        X6[@antv/x6 2.18]
        Lodash[Lodash 4.17]
        Moment[Moment 2.30]
    end
    
    subgraph 编辑器
        TinyMCE[TinyMCE 6.3]
        CodeMirror[CodeMirror 5.46]
        Ace[Ace Editor]
    end
    
    subgraph 工具库
        CryptoJS[Crypto-js 4.1]
        Html2canvas[html2canvas 1.4]
        JSPDF[jspdf 2.5]
        XLSX[xlsx 0.18]
    end
    
    Vue3 --> VueRouter
    Vue3 --> Vuex
    Vue3 --> Vite
    
    Vue3 --> ElementPlus
    Vue3 --> AntDesign
    Vue3 --> VxeTable
    
    Vue3 --> Axios
    Vue3 --> ECharts
    Vue3 --> X6
    
    Vue3 --> TinyMCE
    Vue3 --> CodeMirror
```

---

## 10. 目录结构

```
src/
├── api/                    # API接口层
│   ├── index.js           # 自动导入所有API模块
│   └── model/             # API模型
│       ├── auth.js        # 认证相关
│       ├── chat.js        # 聊天相关
│       ├── system.js      # 系统相关
│       ├── tool.js        # 工具相关
│       └── common.js      # 通用接口
│
├── assets/                # 静态资源
│   ├── icon/             # 图标组件
│   └── *.png             # 图片资源
│
├── components/           # 公共组件
│   ├── scWorkflow/      # 工作流组件
│   ├── scSelect/        # 选择器组件
│   ├── scContextmenu/   # 右键菜单
│   ├── scWaterMark/     # 水印组件
│   ├── dynamicForm/     # 动态表单
│   ├── scPasswordStrength/ # 密码强度
│   └── dateRange/       # 日期范围
│
├── config/              # 配置文件
│   ├── index.js        # 主配置
│   ├── myConfig.js     # 自定义配置
│   ├── route.js        # 路由配置
│   ├── table.js        # 表格配置
│   └── *.js            # 其他配置
│
├── directives/          # 自定义指令
│   ├── auth.js         # 权限指令
│   ├── auths.js        # 多权限指令
│   ├── time.js         # 时间指令
│   └── copy.js         # 复制指令
│
├── layout/             # 布局组件
│   ├── index.vue       # 主布局
│   ├── components/     # 布局子组件
│   │   ├── firstSide.vue
│   │   ├── NavMenu.vue
│   │   ├── topbar.vue
│   │   ├── userbar.vue
│   │   ├── sessionAction.vue
│   │   ├── menuPover.vue
│   │   └── search.vue
│   └── other/          # 其他布局
│       ├── 404.vue
│       └── empty.vue
│
├── locales/            # 国际化
│   ├── index.js        # 入口
│   └── lang/           # 语言包
│       ├── zh-cn.js
│       └── en.js
│
├── router/             # 路由配置
│   └── index.js        # 路由定义
│
├── store/              # 状态管理 Vuex
│   ├── index.js        # Store入口
│   ├── getters.js      # 全局getters
│   └── modules/        # 模块
│       ├── user.js     # 用户模块
│       ├── chat.js     # 聊天模块
│       ├── video.js    # 视频模块
│       ├── global.js   # 全局模块
│       ├── robot.js    # 机器人模块
│       ├── keepAlive.js # 缓存模块
│       ├── viewTags.js # 标签模块
│       ├── transferData.js # 数据传递
│       └── iframe.js   # iframe模块
│
├── utils/              # 工具函数
│   ├── tool.js         # 通用工具
│   ├── request.js      # HTTP请求封装
│   ├── CryptoJStest.js # 加密工具
│   ├── chatSession.js  # 会话分组
│   └── ...
│
├── views/              # 页面视图
│   ├── login/          # 登录页
│   ├── chatHome/       # 聊天主页
│   ├── chatMessage/    # 消息相关
│   │   ├── index.vue   # 消息展示
│   │   ├── chatSend.vue # 消息发送
│   │   ├── chatBatch.vue # 批量管理
│   │   ├── userMsg/    # 用户消息
│   │   └── aiMsg/      # AI消息
│   ├── chatOperation/  # 操作面板
│   │   ├── index.vue
│   │   ├── headerInfo/
│   │   ├── timeLine/
│   │   └── playerLog/
│   └── chatShare/      # 分享页面
│
├── App.vue            # 根组件
├── main.js            # 入口文件
└── scui.js            # SCUI初始化
```