docs: update design for miniprogram

docs/miniprogram/_design/Cell.md

@@ -0,0 +1,57 @@
+# 单元格 Cell
+
+## 组件设计指南
+
+### 常见用法
+
+##### 常用作内容详情入口或功能入口的平铺陈列。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Cell%201-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Cell%201-2.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 常用作同类型同格式信息项平铺陈列。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Cell%202.png" />
+  </div>
+</div>
+
+### 推荐/慎用示例
+
+##### 作为入口时，不建议承载过多过复杂的内容。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Cell%203.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 作为入口时，不建议在一个单元格内承载其他操作。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Cell%204.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名 | 何时使用                             |
+| :----- | :----------------------------------- |
+| [宫格](./grid) | 当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。|

docs/miniprogram/_design/Collapse.md

@@ -0,0 +1,65 @@
+# 折叠面板 Collapse
+
+## 组件设计指南
+
+### 何时使用
+
+当信息较多，需要进行收纳时使用。
+
+### 常见用法
+
+##### 经常用于信息种类较多的页面，将相对次要的信息收纳起来，让用户能够关注到页面中的主要信息或流程。
+
+<div class="item">
+  <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Collapse%201.png" />
+</div>
+
+<hr />
+
+##### 在展示多条内容较长的同类型信息时，通常从中抽取出关键信息作为标题，收纳在手风琴式折叠面板中，便于用户检索和查看。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Collapse%202.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 在网站中，经常使用折叠面板作为分类导航，将页面进行归类、收纳在折叠面板中，展开后可点击跳转。
+
+<div class="item">
+  <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Collapse%203.png" />
+</div>
+
+
+
+### 推荐/慎用示例
+
+##### 当信息层级较多时，不建议嵌套折叠面板，层级过多时建议审视信息结构或使用其它交互方式展示。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Collapse%204.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 不建议使用右箭头作为折叠面板的展开图标，用户可能会误把它认作跳转二级页面的入口。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Collapse%205.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名 | 何时使用                             |
+| :----- | :----------------------------------- |
+| [下拉菜单](./dropdown-menu) |当内容较多时，需要通过筛选快速定位某一类内容时使用。|

docs/miniprogram/_design/DropdownMenu.md

@@ -0,0 +1,50 @@
+# 下拉菜单 DropdownMenu
+
+## 组件设计指南
+
+### 何时使用
+
+当内容较多时，需要通过筛选快速定位某一类内容时使用。
+
+### 常见用法
+
+##### 常用于单个维度筛选或多个维度复合筛选的场景，可进行单选或多选。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/DropdownMenu%201-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/DropdownMenu%201-2.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 在单选的筛选场景内，建议将用户选择项替换标题显示于菜单面板内。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/DropdownMenu%202.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 当筛选维度为多选时，建议提供重置按钮，便于用户恢复到未筛选状态。
+
+<div class="item">
+  <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/DropdownMenu%203.png" />
+  <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
+</div>
+
+
+
+### 相似组件
+
+| 组件名 | 何时使用                             |
+| :----- | :----------------------------------- |
+| [选择器](./Cascader) | 当需要在有限的空间展示大量选项供用户选择时，或一组选项由递进层级构成，需要用户逐级选择使用时。|

docs/miniprogram/_design/Footer.md

@@ -0,0 +1,63 @@
+# 页脚 Footer
+
+## 组件设计指南
+
+### 何时使用
+
+当页面底部需要放置一些补充信息和链接时使用。
+
+### 与页面布局相关
+
+##### 页脚通常位于网站每个页面底部或主体内容下方的区域。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Footer%201.png" />
+  </div>
+</div>
+
+### 常见用法
+
+##### 用于承载版权、隐私政策和使用条款等信息，它们是法律保护所需的。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Footer%202.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 用于承载网站、产品的联系方式，便于用户在页脚查找联系信息或查找获得客户支持的方式。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Footer%203.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 用于承载网站导航。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Footer%204.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 用于承载相关公司/品牌列表，让用户能认知合作或者旗下的品牌/公司，并提供找到他们的方式。
+
+<div class="legend">  
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Footer%205-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Footer%205-2.png" />
+  </div>
+</div>
+
+

docs/miniprogram/_design/Grid.md

@@ -0,0 +1,90 @@
+# 宫格 Grid
+
+## 组件设计指南
+
+### 何时使用
+
+当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。
+
+### 组件搭配使用
+
+##### 可与徽标组合使用，可作为消息提示、或其它相关的数量提示。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Grid%201.png" />
+  </div>
+</div>
+
+### 常见用法
+
+##### 通常用于金刚区、或底部标签栏等，在页面中较为醒目的位置承载主要的功能入口。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Grid%202.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 通常承载图片、头像等信息进行展示，并作为查看相应信息的入口。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Grid%203-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Grid%203-2.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 通常用于动作面板，和头像、图标按钮相结合，承载分享、保存到本地等操作。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Grid%204.png" />
+  </div>
+</div>
+
+
+### 推荐/慎用示例
+
+##### 当在金刚区使用宫格承载功能入口时，建议梳理功能的优先级，将金刚区控制在3行以内，一些相对次要的功能可通过左右滑动的方式收纳在第二屏。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Grid%205-1.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Grid%205-2.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
+  </div>
+</div>
+
+<hr />
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Grid%206-1.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Grid%206-2.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名 | 何时使用                             |
+| :----- | :----------------------------------- |
+| [单元格](./cell) |用于各个类别行的信息展示。|

docs/miniprogram/_design/Popup.md

@@ -0,0 +1,55 @@
+# 弹出层 Popup
+
+## 组件设计指南
+
+### 常见用法
+
+##### 在筛选的场景，若筛选条件外露，通常会使用顶部弹出的弹出层；若为筛选入口，则通常触发使用右侧弹出的弹出层。
+
+<div class="item">
+  <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Popup%201-1.png" />
+</div>
+
+<hr />
+
+<div class="item">
+  <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Popup%201-2.png" />
+</div>
+
+<hr />
+
+##### 承载页面中某个任务操作流程，通常会使用底部弹出的弹出层。
+
+<div class="item">
+  <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Popup%202.png" />
+</div>
+
+<hr />
+
+##### 承载重要提示且可能需要用户做出一些重要决策时，通常会使用中间弹出的弹出层。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Popup%203.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 承载较为重要的运营活动入口（如拍脸图）时，通常会使用中间弹出的弹出层。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Popup%204.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 承载网站、应用收折起来的导航菜单时，通常会使用左侧弹出的弹出层。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Popup%205.png" />
+  </div>
+</div>

docs/miniprogram/_design/Result.md

@@ -54,4 +54,3 @@
 | 组件名             | 何时使用                     |
 | :----------------- | :--------------------------- |
 | [空状态](./empty ) | 当页面或模块数据为空时使用。 |
-