大四的毕业设计作品，是一款文档协作平台。因为基本上没啥事了，所以来了一个很大胆的技术选择，全都选的自己不熟悉或者没用过的框架。我在实习的时候对公司的文档工具执念很深（当时觉得很好用），所以毕业设计就选了这样的主题。

功能设计

现在回过头去看，我为啥要做这么多功能呢（笑哭），想要的功能太多，实际搞得最后没有很多时间把东西做的更加深入一些。

文档竟然还做了草稿保存的机制，不得不感叹真是细节满满啊，可惜答辩的评委老师压根就不注意这些，只能说看你做这个毕设到底是为了锻炼自己还是为了拿到一时的荣誉感，不过聪明的人其实可以两者取舍一下，我当时还是笨了一些(～￣(OO)￣)ブ。

发布文档和文档协作过程是本文档编辑与协同平台的核心功能之一。为了用户体验系统需要对用户的草稿进行保存，要实现这个功能就必须要分创建文章和更新文章两种情况来分别考虑。系统会根据用户的角色类型来确定是否具有发布公开文档的权限，另外还会根据用户的操作状态来临时保存文档草稿。
草稿保存的时候是在用户输入暂停的间隙内进行请求的发送，另外为了防止用户意外断开连接，在草稿未进行保存的情况下，还会运用到HTML5中的LocalStorage来将草稿文本数据保存在本地浏览器，以便用户下次打开界面也可以收到意外中断的数据。由于文档分为公开文档和非公开文档，所以在发布的时候，针对于这个也会有不同的选择和保存结果。
在团队中进行文档发布与普通用户发布的机制是一样的，唯一不同的地方在于团队文档更新的时候可能会产生冲突，所以如图所示显示了文档加锁和协作发布文档流程图。另外在更新中产生的草稿文件，在编辑的时候也是要加锁的，不过图中没有融合草稿机制绘制，所以在此补充。

这里协作机制本来可以做的比较出彩，但是因为时间问题，我当时就没有去研究websocket之类的牛逼的方式了，采用了锁的机制（我当时也调研了不少，这个也是语雀啊包括我们公司当时内部的做法，不过现在时代已经进步了。

界面预览

这里针对系统的设计又花费了一点点小心思。为什么选择墨鱼当LOGO，必然是贴切这个文档平台的。


个人首页有关于自己的数据统计，还有最近浏览和编辑过的文档。

在文本文档的创建中要实现一个比较简易的富文本编辑器，由于使用了Markdown转换的插件，所以只能支持一些简单样式编辑，包括了如图所示的编辑器工具栏中拥有的加粗加斜，插入一到六等级的标题、插入文摘引用块、插入各编程语言的代码高亮块和插图等功能，其中插图包括了本地上传和网络获取两种方式。


图画文档包括了两种类型的图画，一种是如图所示为思维图的绘制，一种是所示的简单流程图的绘制，这里用到了开源的G6库进行开发这两种图画的编辑器。
其中思维图的编辑器拥有放大缩小画布、添加同辈节点和添加子辈的操作按钮，用户双击思维图中的节点，就可以进入节点文字编辑状态更新内容。流程图的编辑器除了工具栏外，还拥有节点栏，可以选择心仪的节点拖拽至画布内，随后进行连线或修改。

以及常规的评论功能（竟然还有点赞（笑哭））。


还有团队管理…(我的精力真滴旺盛啊~~)

为什么想做这个私信，其实包含了一些个人的私心，当时看了很多后台界面的设计，好心水这个对话框。

使用技术

前端开发
框架：React.js 16.7.0
状态管理工具：Mobx 5.9.4
工具库：G6 2.0
运行浏览器： IE 11及以上版本
开发工具：VS Code、Git Bash

后端开发
框架：TypeORM 0.2.16、Vepser 0.1.9
数据库：MySQL 5.7.14
工具库：Moment.js 2.24.0
运行环境：Node.js 10.15.0
开发工具：VS Code、Git Bash

因为当时答辩完马上就风风火火去工作了(lll￢ω￢)，所以当时好像没有写什么总结文档，具体的有些技术坑也忘记了。

其实开发过程总的来说还算顺畅，但是有些个性化过程使用的一些库（G6）还不能很好支持，包括写的一些富文本编辑器其实都是按照最基础的方式去做的，还有那个开源的Vesper框架，还有BUG，当时是强行改了源码让项目正常执行的，主要还是有的框架相关的资料太少了，以及发现有的技术其实没必要硬套着用，引入后反而会变得更加麻烦，还是要根据不同的场景选择合适的技术，而不是为了过一把技术瘾。