企业官网建设流程全解析

开源地址：https://github.com/fangzhouxiaohai/seal-office
在线体验（免安装）：https://seal.xingmasoft.com/office/
当前版本：v2.1.0，许可证：MIT

最近把项目发了个新版本，顺手把这版做了什么、怎么做的、踩了哪些坑整理成一篇文章，方便自己复盘，也给想做同类东西的同学一个参考。海豹办公（Seal Office）是一个把文字、表格、演示、脑图/流程图、PDF 工具、模板库放到同一个工作区里的开源办公套件，主进程用 Electron，渲染层用 React + Ant Design 5，Web 版、Windows 桌面版、Linux DEB、Android、HarmonyOS 共用同一套业务代码。

一、先看视频：109 秒看完 2.1.0

这版重新录了两条介绍视频，画面全部来自当前版本真实界面静帧剪辑，不是动画示意。### PC 横版（1920×1080）覆盖：工作台 → 文字 → 表格 → 演示模板 → 脑图/流程图多项目 → 服务与专属格式 → 账号与安全 → 下载入口。### Android 竖版（1080×1920）覆盖：底部五页结构 → 服务入口 → 全屏阅读 → 手机表格 → 模板 → 脑图项目列表 → 我的与账号注销。

二、整体长什么样

1. 工作台：最近文件集中查看，多标签切换

打开就是一个统一首页，左侧是云盘、知识库、团队空间、本地目录和工具入口，中间是最近文档，右侧是精选推荐和快捷开始。打开多个文档时底部多标签切换，类似浏览器的标签栏。### 2. 文字：熟悉的 Ribbon，修订历史收纳进审阅

文字编辑器保留了“开始 / 插入 / 页面布局 / 引用 / 审阅 / 视图”的功能区。这版把常驻顶栏的“查看修订历史”行去掉了，入口收进“审阅”菜单，编辑区域更干净。### 3. 表格：公式与动态数组，保存后继续编辑

表格用 ExcelJS + FormulaJS 实现，保留公式与格式，动态数组支持溢出计算。状态栏实时显示计数、求和、平均值。

4. 演示模板：12 套主题摄影模板，300+ 风格组合模板市场内置商务演示、教育培训、年度规划、市场营销、科技方案、财务经营、品牌活动、学术答辩等分类，每个模板带完整页面和配图，直接进画布改文字。### 5. 脑图 / 流程图：多项目独立管理脑图和流程图分别管理多个项目，可以新建、重命名、复制、导出 JSON / SVG，每个项目独立保存内容和撤销历史，不会混在一起。### 6. 移动端：底部五页结构Android 端这版重整为"首页 / 云盘 / 服务 / 模板 / 我的"五个 Tab，导入文件收进页面内，小屏表单和触控尺寸都调过。—## 三、v2.1.0 重点新特性### 1. 新增三种海豹专属文档格式-.sealdoc：文字文档-.sealsheet：表格-.sealshow：演示这三个格式保存的是当前完整编辑模型 + 资源 + 兼容提示，不是简单的 HTML 快照。也就是说，下次打开时撤销栈、图片资源、格式状态都能恢复，不会丢编辑上下文。支持桌面、Web、移动浏览器的导入、导出和保存重开。常规 DOCX / XLSX / PPTX 仍然照常读写。### 2. 账号：短信登录 + 密码登录双轨之前只有短信验证码登录，这版加了密码登录：- 老账号在"账号安全"里设置登录密码；- 修改密码需要当前密码或专用短信验证；- 修改密码后其他设备会话自动失效。### 3. 永久注销账号：三步确认，云数据彻底清理这是这版花心思最多的一块。注销流程：1. 输入手机号 + 专用验证码；2. 手写输入完整确认文字；3. 勾选后果确认（知道云数据和自己创建的团队都会被删）。后端会删除个人云文档、本人创建的团队及共享数据、协作记录，并清理服务端管理的备份；本机保留的文档不动；其他账号拥有的团队和数据保留。删除过程和失败重试写进持久日志，恢复备份时继续过滤已注销账号。### 4. 文字编辑器：修订历史入口收纳移除了常驻顶栏的"查看修订历史"行，功能保留在"审阅"菜单里，并可配置快捷键。编辑区看起来更像一个正常的文字处理器。—## 四、技术栈与实现思路简单列一下这版用到的主要技术，给想做类似项目的同学一个参考：| 层 | 选型 | 说明 ||—|—|—|| 桌面壳 | Electron 25 | Windows / Linux 共用，主进程 CJS || 前端框架 | React 18 + Vite 4 | 渲染层 SPA || UI | Ant Design 5 | 组件库 + 自定义设计令牌 || 文字 | docx + mammoth | DOCX 双向读写 || 表格 | exceljs + @formulajs/formulajs + ssf | 公式与日期格式 || PDF | pdf-lib + pdfjs-dist + @pdf-lib/fontkit | 生成与解析 || 演示 | pptxgenjs | PPTX 导出 || 脑图协作 | yjs | 共享文档的 CRDT 协同编辑 || 移动壳 | WebView IIFE | Android / HarmonyOS 复用同一套 H5 || 打包 | electron-builder | NSIS / portable / MSIX / DEB |几个可能有人关心的点：-没有复刻 WPS 的原生渲染引擎。文字和表格走的是 Web 渲染，复杂排版（尤其是 WPS 私有样式）会给"兼容提示"而不是硬猜。-协作层用 yjs，多维表格和脑图的多人实时编辑都建立在 y 文档之上。-跨端共用业务代码，PC 和移动端只是布局层不同，数据模型和编辑器是同一套。-打包脚本固定目录：release/v<版本>/放发行包，release/promo/放介绍视频，每次发版前npm run release:prepare清理旧版本本机产物。—## 五、下载与安装这版发行包清单（都在 GitHub Release 里）：- Windows：seal-office-setup-2.1.0.exe（NSIS 安装包）、seal-office-2.1.0-portable.exe（便携版）- Windows 商店：seal-office-2.1.0-microsoft-store-x64.msix（未签名商店上传包，需微软商店审核）- Linux：seal-office-2.1.0-amd64.deb- Web：seal-office-2.1.0-web.zip（解压即用）- Android：seal-office-2.1.0-android.apk- HarmonyOS：seal-office-2.1.0-harmony.app- 完整源码：seal-office-2.1.0-source.zip所有附件都带SHA256SUMS.txt，下载后校验一下再用。不想装客户端的话，直接打开网页版就能用：https://seal.xingmasoft.com/office/—## 六、写在最后这个项目从 v1.x 一路迭代到现在，中间踩过 DOCX 复杂结构解析、表格动态数组、脑图多项目撤销、跨端会话同步、账号注销与备份清理这些坑。2.1.0 算是把"账号安全"和"专属文档格式"这两块补完整了。后面计划在云端知识库和 AI 助手上继续做，有兴趣的同学欢迎 Star / Issue / PR：> https://github.com/fangzhouxiaohai/seal-office有问题评论区聊。