本文首发于个人博客 Cyy’s Blog
转载请注明出处 https://cyyjs.top/blog/5b45db41e8d2af6195ec52f2

# 编辑器功能规划

编辑器创建文章,保存、修改、删除、搜索查询,通过API接口同步到服务器;

  1. 创建文章支持采用markdowm形式
  2. 支持保存到草稿、发布状态
  3. 支持文章设置分类、标签、缩略图
  4. 支持标题模糊搜索
  5. 支持分类查询、按标签搜索
  6. 支持删除后到回收站,可以撤销删除,回收站永久删除
  7. 支持在线更新同步,离线保存,在线后同步功能。
  8. 支持主题配置

文章接口比较简单,一个文章的增删改查就可以了;需要提供一个全量拉取接口,在app打开后初始化全量拉取同步。

# 页面布局

页面规划大致分为5个页面,如下:

  1. 文章编辑页
  2. 文章列表页
  3. 分类列表页
  4. 标签列表页
  5. 回收站列表页(与文章列表页类似)
  6. 设置页面

整体仿照微信客户端的布局方式,左侧为导航栏,右侧为对应页面。
文章列表提供两种视图:

  1. 卡片列表方式
  2. 摘要列表预览方式

# 采用的vue组件

  1. Muse-UI 基于 Vue 2.0 优雅的 Material Design UI 组件库
  2. mavonEditor 基于Vue的markdown编辑器
  3. axios