jimmylv.github.io
jimmylv.github.io copied to clipboard
设计系统与Page Builder, 开发者 GUI 工具
项目纵向拆分
基于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:
⓷ 思维导图:头脑风暴/集思广益(发散)+ ⓸ 组织整理(收敛)
⓹ 明确「下一步行动」
能够产生反馈结果的小任务
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
总结一下,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 |