设计系统与Page Builder, 开发者 GUI 工具

[JimmyLv]

项目纵向拆分

基于docker的服务，当然支持直接sass化运行，再引入账号系统+云就能完全支撑2B业务

服务:

1. vue ui 提供2,3,4管理界面 （GUI+插件化）
2. website with the theme, with data（运行时）
3. design system 文档（开发时）（用于修改sass变量，从而组件变化，material-ui+storybook）
4. page builder（编辑时）主要是插入运行时数据

基于Ant Design来做

3 是首要需要去做的，这是收益比最大的。

• [ ] 引入 Storybook （vue-cli-plugin）
• [ ] 给 vue-ant-design 组件写stories
• [ ] 引入 storybook-addon-material-ui，把theme编辑做起来，跟 antd 变量联动起来
• [ ] 尝试 story2sketch 生成 Symbols
• [ ] 部署，做成在线版 showcase

⓵ 定义目标和原则

终极目的

Q：为什么你要花时间来做这项任务，而不是其他随便什么任务？ A：

⓶ 展望结果（OKRs）

利益相关人清单

Q：当你交付最终结果的时候，会如何让世界变得更好？ A：

⓷ 思维导图：头脑风暴/集思广益（发散）+ ⓸ 组织整理（收敛）

⓹ 明确「下一步行动」

能够产生反馈结果的小任务

[JimmyLv]

Carbon Design System

https://github.com/IBM/carbon-design-kit/wiki/Sketch-Libraries-Overview http://carbondesignsystem.com http://themes.carbondesignsystem.com https://github.com/andrewfiorillo/sketch-palettes

AntD Design System

https://ant.design/ https://library.ant.design/ https://motion.ant.design/edit/#t%3Dnav_0_0%2Ccontent_0_0%2Ccontent_2_0%2Ccontent_3_0%2Ccontent_4_0%2Cfooter_0_0

推翻 巴别塔

https://github.com/chrisvxd/story2sketch https://github.com/airbnb/react-sketchapp

[JimmyLv]

总结一下，Page Builder 大概就是这些工作：

0. 编辑状态下的画布：（拖拽、数据插入、组件布局、动画 etc）
1. 组件库本身的开发：渲染运行时（有编辑状态、预览状态和最终在官网的显示状态）
2. 每个组件库的数据同步：设计统一的接口约定，以支持同步到我们的CMS，也支持同步到其他CMS

调研的两个例子： https://fireyy.github.io/vue-page-designer/ http://vue-form-builder.sethphat.com/#/template/config/

具体来说，我们拿轮播图这个组件和举个例子吧：

开发 轮播图组件 本身，然后组件的结构（即规范）可以表示为：

<Component 
  type={轮播图} 
  option={漂亮的 | 优雅的 | 性感的} 
  data={[{ pic, title, url }, { pic2, title2, url2 } ...]} 
  sync={(data, syncCallback)=> syncCallBack(data) }
/>

然后还有 2. 数据同步的回调他们也要写：syncCallback，即怎么把 data 同步至 API，可以是 syncToUs，也可以是 syncToOther，甚至 syncToAnyCMS

ref: https://github.com/fireyy/vue-page-designer#options

custom components, and save callback.

Props	Type	Description
value	Object	Editor initial value, you can pass the value of the save callback and resume the draft
widgets	Object	Vue Components. Custom components for editor. see Example
save	(data) => void	When you click the Save button, feed back to you to save the data
upload	(files) => Promise	Editor upload function, allowing you to implement your own upload-file's request

<svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">