Tencent · Summer-Shen · Nov 22, 2022 · Nov 23, 2022 · Nov 23, 2022 · Nov 23, 2022
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,7 +6,7 @@ module.exports = {
     mocha: true,
     jest: true,
   },
-  extends: ['eslint-config-airbnb-base'],
+  extends: ['airbnb-base'],
   parser: '@typescript-eslint/parser',
   plugins: [
     '@typescript-eslint',

diff --git a/.gitignore b/.gitignore
@@ -21,6 +21,8 @@ package-lock.json
 **/package-lock.json
 yarn.lock
 **/yarn.lock
+pnpm-lock.yaml
+**/pnpm-lock.yaml
 **/node_modules
 **/dist
 dist/
@@ -37,3 +39,7 @@ temp*
 # test
 coverage
 test-report.html
+
+# lint
+.eslintcache
+.stylelintcache
diff --git a/.stylelintrc b/.stylelintrc
@@ -27,7 +27,18 @@
     "no-descending-specificity": null,
     "selector-type-no-unknown": null,
     "color-function-notation": "legacy",
-    "value-keyword-case": null
+    "value-keyword-case": null,
+    "property-no-unknown": [true, { "checkPrefixed": true }]
   },
-  "overrides": [{ "files": ["**/*.less"], "customSyntax": "postcss-less" }]
+  "overrides": [
+    { "files": ["**/*.less"], "customSyntax": "postcss-less" },
+    {
+      "files": ["style/web/components/**/*.less"],
+      "ignoreFiles": ["**/_docs.less"],
+      "rules": {
+        "color-no-hex": true,
+        "color-named": "never"
+      }
+    }
+  ]
 }
diff --git a/docs/compile/index.js b/docs/compile/index.js
@@ -1,4 +1,5 @@
 import fs from 'fs';
+import { spawn } from 'node:child_process';
 
 /**
  * 渲染 live demo 逻辑，提取 md 头信息生成框架需要的字符串
@@ -26,6 +27,26 @@ export function compileUsage(options) {
   };
 }
 
+/**
+ * 获取文件 git 最后更新时间
+ * @param {string} file
+ * @returns {Promise<number>}
+ */
+export function getGitTimestamp(file) {
+  return new Promise((resolve, reject) => {
+    const child = spawn('git', ['log', '-1', '--pretty="%ci"', file]);
+    let output = '';
+    child.stdout.on('data', (d) => {
+      output += String(d);
+    });
+    child.on('close', () => {
+      resolve(+new Date(output));
+    });
+    child.on('error', reject);
+  });
+}
+
 export default {
-  compileUsage
+  compileUsage,
+  getGitTimestamp
 };
diff --git a/docs/miniprogram/_design/ActionSheet.md b/docs/miniprogram/_design/ActionSheet.md
@@ -0,0 +1,75 @@
+# 动作面板 ActionSheet
+
+## 组件设计指南
+
+### 何时使用
+
+需要提供一组与当前场景操作相关的关联操作时使用。
+
+### 组件搭配使用
+
+##### 动作面板与[按钮](./button)组合使用，通过按钮点击唤起动作面板。
+
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet1.png" />
+  </div>
+
+
+### 常见用法
+##### 当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。
+
+  <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>
+
+
+
+### 推荐/慎用示例
+
+##### 动作面板中不建议提供太多操作项，若过多项在小屏手机中导致需纵向滚动，体验将会受损。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/ActionSheet%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/ActionSheet%204-2.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
+  </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" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名 | 何时使用                             |
+| :----- | :----------------------------------- |
+| [抽屉](./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
@@ -0,0 +1,83 @@
+# 按钮 Button
+
+## 组件设计指南
+
+### 何时使用
+
+当前流程的结束或新流程的开启需要用户点击触发时使用。
+
+### 组件搭配使用
+
+##### 图标按钮与[输入框](./input)组合使用，放置于输入单元格最右侧，用于触发拉起一个新的支流任务，辅助用户填入正确内容。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button1.png" />
+    <em></em>
+  </div>
+</div>
+
+<hr />
+
+##### 不同类型的主次按钮与文字按钮组合使用，可以表达不同强调级别。
+
+<div class="legend">
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button2-1.png" />
+    <em></em>
+  </div>
+
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button2-2.png" />
+    <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" />
+    <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/Button3-1.png" />
+    <em></em>
+  </div>
+  <div class="item">
+    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/mobile-guide/Button3-2.png" />
+    <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/Button4-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/Button4-2.png" />
+    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
+  </div>
+</div>
+
+
+
+### 相似组件
+
+| 组件名 | 何时使用                             |
+| :----- | :----------------------------------- |
+| [链接](./link) | 当需要外链跳转或页面底部footer链接跳转时使用。 |
+| [悬浮按钮](./fab) | 当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。 |
+| [返回顶部](./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) | 在表单中需要输入单个日期或时间时使用。 |