Files

3.4 KiB
Raw Permalink Blame History

🚀 ChatOA 一站式 IM + OA 办公客户端新鲜上线

一个基于 Electron + React + NestJS 的即时通讯办公套件原型,把聊天、日程、表单、笔记、应用、网盘、AI 助手整合在一个工作台里。


📌 一句话定位

把企业最常用的 8 个高频场景装进同一个客户端:打开即聊、顺手审批、随时记录、一键找文件——让协作从反复切窗口变成只切一个侧边栏。


🖼️ 界面速览

1️⃣ 即时聊天

  • 左侧会话列表 + 右侧对话窗口
  • 顶部支持搜索会话、置顶、查看聊天记录
  • 用户名后展示部门/职位,在线状态用彩色圆点
  • 输入框支持图片、文件、单据、日程、云盘文件、笔记、表情、截图等快捷插入

聊天页

2️⃣ 联系人

  • 同事 / AI 助手 / 朋友 三栏分组
  • 支持添加好友、在线人数徽章常驻底部

联系人页

3️⃣ 日程

  • 左侧小型月历 + 右侧事件列表
  • 支持新建/编辑/删除日程

日程页

4️⃣ 表单

  • 自定义表单模板:请假申请、会议室预约、办公室借用、公车借用、报销申请
  • 模板库 + 我的实例,审批状态一目了然

表单页

5️⃣ 笔记(原知识库)

  • 多级目录 + 笔记的树形结构
  • 单击目录仅展开/选中,单击笔记进入编辑
  • 标题、内容、标签自动保存

笔记页

6️⃣ 应用

  • 九宫格应用入口,支持应用搜索
  • 预留第三方应用扩展位

应用页

7️⃣ 网盘

  • 本机文件 / 我的文件 / 团队文件 / 系统文件 / 分享文件 / 回收站
  • 面包屑导航、新建文件夹、上传、删除、还原、彻底删除

网盘页

8️⃣ AI 助手

  • 主导航独立入口,排在聊天之后
  • 支持多模型切换(GPT-4o / Claude 3.5 / DeepSeek / 通义千问 / 豆包)
  • 可插入图片、文件、表单,纯前端模拟对话

AI助手页


近期重点增强

  • 商务化卡片:聊天中发送的表单、日程、云盘文件、笔记不再是一串文字,而以公文信函、日历卡、文件卡、便签样式呈现;表单卡片更可点开详情并直接「同意 / 驳回」审批。
  • 状态持久化:审批结果写进 localStorage,刷新页面也不丢;会话列表同步显示处理状态。
  • 统一标题区:8 大页面左侧标题全部 52px + 图标 + 600 字重,右侧横线对齐,视觉更整齐。

🛠️ 技术栈

层级 技术
桌面端 Electron + Vite
前端 React 18 + TypeScript + Ant Design 5
状态 Zustand + Socket.IO 客户端
后端 NestJS 11 + TypeScript + JWT + Socket.IO
数据 JSON 文件持久化(预留 Mongo/Redis 配置)

📂 项目位置

C:\Users\范先生\CodeBuddy\ChatOA

服务端:server/ 客户端:client/ 截图:screenshots/


💡 下一步可以做的

  • 接入真实大模型 APIOpenAI / Claude / 豆包等)
  • 表单流程接入后端实例审批链路
  • 网盘接入 OSS / 本地文件同步
  • 移动端响应式适配
  • 消息已读回执、撤回、引用

#ChatOA #即时通讯 #OA办公 #Electron #React #NestJS #AI助手 #项目分享

更多详情可查看项目 README 与需求文档。