Tencent · vapourma · Mar 16, 2023 · Mar 16, 2023 · Mar 16, 2023 · Mar 16, 2023
diff --git a/docs/miniprogram/_design/ActionSheet.md b/docs/miniprogram/_design/ActionSheet.md
@@ -15,23 +15,22 @@
   </div>
 
 
-<hr />
-
 ### 常见用法
 ##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。
 
   <div class="item">
     <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet2.png" />
   </div>
 
+<hr />
+
 ##### 当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发
 
   <div class="item">
     <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet3.png" />
   </div>
 
 
-<hr />
 
 ### 推荐/慎用示例
 
@@ -49,15 +48,15 @@
   </div>
 </div>
 
+<hr />
+
 ##### 动作面板中的操作项不建议用icon完成替代文字。
 
 <div class="legend">
   <div class="item">
     <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet%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/ActionSheet%205-2.png" />
     <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
@@ -66,10 +65,11 @@
 
 
 
-
 ### 相似组件
 
 | 组件名 | 何时使用                             |
 | :----- | :----------------------------------- |
 | [抽屉](./drawer) | 需要收折展示一组数量较多的菜单时使用。 |
 | [对话框](./dialog) | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 |
+| [下拉菜单](./dropdown-menu) | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 |
+| [选择器](./dropdown-menu) | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 |
diff --git a/docs/miniprogram/_design/Badge.md b/docs/miniprogram/_design/Badge.md
@@ -0,0 +1,70 @@
+# 徽标 Badge
+
+## 组件设计指南
+
+### 何时使用
+
+当需要展示特定对象的状态变化或承载运营性质提示时使用。
+
+### 组件搭配使用
+
+##### 徽标与[选项卡](./tabs)、[底部标签栏](./tab-bar)组合使用，置于文字段的右上方，用于展示状态信息或营销信息。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Badge%201-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Badge%201-2.png" />
+  </div>
+</div>
+
+<hr />
+
+##### 徽标与[头像](./avatar)组合使用，可作为消息提示或数量提示。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Badge%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/Badge%203-1.png" />
+  </div>
+
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Badge%203-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/Badge%204-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/Badge%204-2.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+### 相似组件
+
+| 组件名 | 何时使用                             |
+| :----- | :----------------------------------- |
+| [标签](./tag) | 当需要展示内容本身的属性、状态、类别、营销情况时作为纯展示使用；或者当大量的内容数据需要根据类型进行选择筛选时使用。 |
diff --git a/docs/miniprogram/_design/Button.md b/docs/miniprogram/_design/Button.md
@@ -32,6 +32,7 @@
     <em></em>
   </div>
 </div>
+
 <div class="legend">
   <div class="item">
     <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button2-3.png" />
@@ -40,8 +41,6 @@
 </div>
 
 
-<hr />
-
 ### 常见用法
 
 ##### 当在填写场景，按钮通常作为当前流程的结束操作，在表单过长时通常需要吸顶或吸底处理。
@@ -56,7 +55,6 @@
   </div>
 </div>
 
-<hr />
 
 ### 推荐/慎用示例
 
@@ -76,11 +74,10 @@
 
 
 
-
 ### 相似组件
 
 | 组件名 | 何时使用                             |
 | :----- | :----------------------------------- |
 | [链接](./link) | 当需要外链跳转或页面底部footer链接跳转时使用。 |
 | [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 |
-| [返回顶部](./backtop) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 |
+| [返回顶部](./back-top) | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 |
diff --git a/docs/miniprogram/_design/Calendar.md b/docs/miniprogram/_design/Calendar.md
@@ -0,0 +1,53 @@
+# 日历 Calendar
+
+## 组件设计指南
+
+### 何时使用
+
+需要在页面间跳转、返回，或需承载少量辅助功能时使用。
+
+### 组件搭配使用
+
+##### 通常和[单元格](./cell)搭配使用，点击后唤起日历。        
+
+<div class="item">
+  <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Calender%201.png" />
+</div>
+
+### 推荐/慎用
+
+##### 日期与描述结合时，通常与价格结合，不建议描述过长、或承载过复杂的信息。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Calender%202-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/Calender%202-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/Calender%202-3.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/Calender%202-4.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
+  </div>
+</div>
+
+### 相似组件
+
+| 组件名 | 何时使用                             |
+| :----- | :----------------------------------- |
+| [时间选择器](./date-time-picker) | 在表单中需要输入单个日期或时间时使用。 |
diff --git a/docs/miniprogram/_design/Cell.md b/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) | 当需要展示多个功能或信息入口，且这些入口没有明显的优先级时使用。|
diff --git a/docs/miniprogram/_design/Checkbox.md b/docs/miniprogram/_design/Checkbox.md
@@ -8,19 +8,18 @@
 
 ### 组件搭配使用
 
-##### 多选框与[索引](./indexes)、[搜索](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。
+##### 多选框与[索引](./indexes)、[搜索框](./search)组合使用，便于用户从大量的选项中，快速地找到目标选项。
 
 <div class="legend">
   <div class="item">
     <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%201-1.png" />
   </div>
 
   <div class="item">
-    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%201-2.png"" />
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Checkbox%201-2.png" />
   </div>
 </div>
-<hr />
-
+
 
 ### 推荐/慎用示例
 
@@ -36,7 +35,6 @@
     <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
   </div>
 
-
 <hr />
 
 ##### 在选项较多的场景下执行多选时，建议展示用户已选数量。
@@ -48,8 +46,6 @@
   </div>
 </div>
 
-<hr />
-
 
 
 ### 相似组件

diff --git a/docs/miniprogram/_design/Collapse.md b/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) |当内容较多时，需要通过筛选快速定位某一类内容时使用。|