大家好，我是徐小夕。
架构师，曾任职多家上市公司，多年架构经验，打造过上亿用户规模的产品，目前全职创业，主要聚集于“Dooring AI零代码搭建平台”和“flowmixAI多模态办公软件”

之前和大家分享了我实现的 pxcharts 多维表格编辑器和协同文档编辑器：

px-doc，一款开箱即用的协同文档编辑器

pxcharts多维表格ultra版：AI + 多维表，工作效率飙升！

今天和大家分享一下我们花了半年打造的在线办公神器——OfficeHub。

橙子轻文档

github地址：https://github.com/MrXujiang/OfficeHub

接下来我会从功能亮点，技术架构和如何本地运行部署这几个点，全面和大家分享这款开源办公项目。

OfficeHub介绍

橙子轻文档

作为每天跟各种办公软件打交道的技术博主，我一直觉得「在线办公工具」是个矛盾体：要么功能全但收费贵（列如某钉、某飞），要么免费但功能零散（列如单独的在线文档、独立的思维导图工具）。所以我们决定花半年时间打造 OfficeHub 这个项目，把「文档 + 表格 + 思维导图 + AI + 知识库」完美的融合成一个办公智能体。

橙子轻文档

核心定位：基于 Web 的开源在线办公协作平台，集成文档编辑、思维导图、电子表格、AI 创作、模板管理和知识库功能。

简单说，OfficeHub 想做的是「办公工具界的瑞士军刀」：不用切换多个平台，一个系统搞定从内容创作到知识沉淀的全流程。

OfficeHub功能亮点介绍

1. 「无缝衔接」的办公三件套

橙子轻文档

OfficeHub 的 doc 编辑器支持常见的格式排版、图片插入、表格嵌套，甚至能嵌入思维导图，可视化图表等复杂web组件。

橙子轻文档

思维导图工具支持节点拖拽、样式自定义，切换不同风格主题，还能导出成图片或 JSON文件。

橙子轻文档

电子表格则包含基础公式计算、数据筛选，应付日常办公完全够。

橙子轻文档

最关键的是「无缝切换」—— 在文档里插入表格、在文档里插入思维导图，内容互通不用反复导出导入，这点比用多个独立工具高效太多。

2. AI 创作不是「鸡肋」，而是「生产力」

许多工具的 AI 功能只是个摆设，但 OfficeHub 的 AI 模块有两个亮点：

场景化生成

写文档时能一键生成大纲、扩写内容；

自定义模型

支持接入自己的 AI 模型（列如通义千问 API），不用担心数据隐私，这点对企业用户太友善了。

3. 模板 + 知识库：让内容「活」起来

橙子轻文档

我们可以把常用的周报格式、会议纪要做成模板，团队成员直接复用；更有价值的是「基于文档生成知识库」—— 系统会自动提取文档，生成可自定义的知识库，新人入职查资料、老员工找历史记录都能省半小时。

4. 轻量化部署，不挑环境

作为 Web 项目，它不需要客户端安装，浏览器打开就能用。不管是个人电脑、服务器还是云平台，只要能跑 Node.js，部署起来都很轻松（后面会说具体步骤）。

OfficeHub技术栈

前端

• 核心框架
• Vue 3（用 Composition API 组合代码，比 Options API 更灵活）+ TypeScript（类型约束减少 bug）；
• 状态管理
• Pinia（替代 Vuex，更简洁，支持 TypeScript）；
• 文档编辑
• 基于 flowmix/docx多模态文档引擎构建；
• 表格处理

• 思维导图
• 原生Js库 + Canvas 渲染（保证性能和交互流畅度）

后端

• 运行时
• Node.js（v14+，提议用 LTS 版本）；
• Web 框架
• 自研服务端引擎（基于koa2，轻量灵活），也可兼容 NestJS（企业级架构）；
• 数据库
• JSON结构化数据文件（文档型数据库，适合存储结构灵活的办公数据）
• AI 集成
• 通过 HTTP 客户端调用模型 API，支持自定义请求头和参数（方便接入私有模型）

OfficeHub本地部署运行

我们需要先clone项目：

git clone https://github.com/MrXujiang/OfficeHub.git
cd OfficeHub

然后安装对应的项目依赖：

pnpm install
// 或者yarn和npm都可
yarn

最后直接执行启动命令即可：

pnpm start

这样我们在3000端口就可以访问了。

橙子轻文档

我们可以轻松将它作为企业或者团队内部的知识库系统来使用，也可以部署上线上供其他人使用。

github地址：https://github.com/MrXujiang/OfficeHub

当然还有许多功能我会在接下来的文章中和大家持续分享，如果大家有好的想法欢迎留言交流～