描述
组件的预览展示与版本管理

项目价值：
- 给团队提效 - 避免重复开发
- 任何人想用任何组件，到组件化平台一览无余
- 根据组件描述和使用文档，快速上手使用组件
- 有历史的组件版本管理，方便回溯/回滚和问题定位
- 沉淀团队技术资产
- 方便新同学了解团队组件建设现状
- 方便设计师参考和挑选既有组件，避免重复设计


技术栈：
Node.js + Egg.js + MongoDB + React + Webpack

功能说明

  1. 用户管理
    a. 管理员登录/登出
    b. 游客访问（无须注册登录，匿名 ID 访问）
  2. 组件展示
    a. 查看已有组件的基础信息
    b. 组件名称、分组、描述、版本等
    c. 预览组件的样式效果，如内嵌 codepen
  3. 分组管理
    a. 管理员可创建分组、删除分组
  4. 组件管理
    a. 新增组件
    ⅰ. 用户新增组件，填入组件名称、选择分组、组件使用示例源码、版本号等，保存到数据库
    b. 编辑组件
    ⅰ. 编辑组件：组件名称、组件源码、组件版本号
    ⅱ. 点击保存：校验数据完整性，保存至数据库
    c. 删除组件
    ⅰ. 管理员选择组件删除：返回删除成功信息

    页面访问链路

    查看及删除

    image.png

    新增及编辑

    image.png

    新增分组

    image.png

    技术架构

    image.png

    技术栈

  • Vue/React: 组件展示
  • Nodejs/Egg: 搭建后端服务
  • MongoDB: 用于存储组件 meta 信息和更改日志，以及用户信息，和登陆日志记录

    代码举例

    groups: 组件分组 - 表结构

    对组件进行分类，如通用组件、非展示型工具函数组件、H5 组件等
字段名 类型 备注
name String 组件分组名
description String 组件描述
created_at Date 创建时间
updated_at Date 更新时间

components: 组件 - 表结构

描述组件的基本信息，如描述组件如何引用和使用的演示源码等

字段名 类型 备注
name String 组件名
description String 组件描述
group ID(groups._id) 组件所属分组
meta String(JSON) 组件额外信息
created_at Date 创建时间
updated_at Date 更新时间
demo_url String 组件 demo URL
version String 当前最新版本
source_code TEXT 组件演示源码

component_versions：组件历史版本 - 表结构

描述每个组件的历史版本，相当于是一份组件流水，记录了每一次保存的组件版本和文档状态

字段名 类型 备注
component ID 组件 ID （外键 components）
created_at Date 创建时间
updated_at Date 更新时间
demo_url String 组件 demo URL
version String 组件版本
meta String(JSON) 组件额外信息
source_code TEXT 组件源码

项目里程碑

里程碑 1 - 项目初始化及页面可渲染

  • 完成项目环境搭建
  • 完成项目的目录文件结构初始化
  • Egg 与 React 集成，把项目跑起来
  • 首页/详情页/列表页等样式完成，可以渲染出页面效果

注意事项

  • 项目目录拆分合理
  • 项目的各种配置文件完整

  • 首页详情页可以正常渲染出来

    里程碑 2 - 数据建模及管理员注册登录

  • 完成 MongoDB 环境搭建与数据库连接

  • 完成 Component 相关数据表结构的 Schema 设计
    • 如用户表、分组表、组件表表
  • 完成 MongoDB 中用户相关数据表增删改查 API 接口设计

  • 完成管理员注册登录的功能流程

    • 管理员注册字段前台提交到后台存储
    • 管理员密码校验与成功的登录跳转流程

      注意事项

  • 数据建模合理

  • 页面正常渲染

  • 管理员可注册登录

    里程碑 3 - 组件增删改查

  • 完成管理员登录和身份识别

  • 完成首页按分组的组件展示拉取
  • 完成组件详情页及删除功能
  • 完成分组创建及分组列表展示功能

注意事项

  • 非登录用户可浏览组件
  • 非管理员的登录用户可创建和编辑组件
  • 管理员可删除分组、删除组件
  • 登录用户的操作流水需要记录
  • 首页列表页展示渲染正确