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

JimmyLv commented 5 years ago

项目纵向拆分

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

服务:

vue ui 提供2,3,4管理界面（GUI+插件化）
website with the theme, with data（运行时）
design system 文档（开发时）（用于修改sass变量，从而组件变化，material-ui+storybook）
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 commented 5 years ago

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 commented 5 years ago

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

编辑状态下的画布：（拖拽、数据插入、组件布局、动画 etc）
组件库本身的开发：渲染运行时（有编辑状态、预览状态和最终在官网的显示状态）
每个组件库的数据同步：设计统一的接口约定，以支持同步到我们的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

JimmyLv / jimmylv.github.io