注册流程

2022-12-16 17:32:49 +08:00
parent b746aaaa83
commit eb5c301d00
57 changed files with 1839 additions and 20 deletions
--- a/app.json
+++ b/app.json
@@ -11,7 +11,11 @@
        "pages/myself/notify/index",
        "pages/myself/question/index",
        "pages/myself/about/index",
-        "pages/myself/account/index"
+        "pages/myself/account/index",
+        "pages/login/index",
+        "pages/register/index",
+        "pages/register/password/index",
+        "pages/register/ok/index"
    ],
    "usingComponents": {
        "t-icon": "/components/icon/icon",
--- a/components/dialog/README.md
+++ b/components/dialog/README.md
@@ -12,7 +12,7 @@ isComponent: true

 ```json
 "usingComponents": {
-  "t-dialog": "tdesign-miniprogram/dialog/dialog"
+  "t-dialog": "/components/dialog/dialog"
 }
 ```

@@ -46,9 +46,9 @@ isComponent: true

 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-actions | Array / Slot | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
+actions | Array / Slot | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/dialog/type.ts) | N
 button-layout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N
-cancel-btn | String / Object / Slot | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
+cancel-btn | String / Object / Slot | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/dialog/type.ts) | N
 close-on-overlay-click | Boolean | true | 点击蒙层时是否触发关闭事件 | N
 confirm-btn | String / Object / Slot | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 | N
 content | String / Slot | - | 内容 | N
@@ -65,7 +65,7 @@ z-index | Number | 11500 | 组件层级，样式默认为 11500 | N
 名称 | 参数 | 描述
 -- | -- | --
 cancel | - | 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件
-close | `(trigger: DialogEventSource)` | 关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' | 'overlay'`<br/>
+close | `(trigger: DialogEventSource)` | 关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'cancel' | 'overlay'`<br/>
 overlay-click | - | 如果蒙层存在，点击蒙层时触发
 confirm | - | 如果“确认”按钮存在，则点击“确认”按钮时触发
 action | `(index: number)` | 操作列表的点击时间，`index` 代表操作列表的顺序
--- a/components/result/README.md
+++ b/components/result/README.md
@@ -0,0 +1,40 @@
+---
+title: Result 结果
+description: 反馈结果状态。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-25%25-red" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-result": "/components/result/result"
+}
+```
+
+## 代码演示
+
+### 结果状态
+
+{{ theme }}
+
+### 自定义结果
+
+{{ custom }}
+
+## API
+
+### Result Props
+
+| 名称             | 类型          | 默认值 | 说明                                 | 必传 |
+| ---------------- | ------------- | ------ | ------ | ---- |
+| title            | String / Slot | -      | 标题     | N    |
+| description      | String / Slot | -      | 描述文字       | N    |
+| external-classes | Array         | -      | 组件类名，分别用于设置 组件外层类名、文本描述类名、图片类名、操作按钮类名。`['t-class', 't-class-image', 't-class-title', 't-class-description']` | N    |
+| icon             | String        | -      | 图标名称      | N    |
+| image            | String / Slot | -      | 图片地址  | N    |
+| theme           | String         | default| 内置主题。可选项：default/success/warning/error | N  |
--- a/components/result/index.d.ts
+++ b/components/result/index.d.ts
@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './result';
--- a/components/result/index.js
+++ b/components/result/index.js
@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './result';
--- a/components/result/props.d.ts
+++ b/components/result/props.d.ts
@@ -0,0 +1,3 @@
+import { TdResultProps } from './type';
+declare const props: TdResultProps;
+export default props;
--- a/components/result/props.js
+++ b/components/result/props.js
@@ -0,0 +1,24 @@
+const props = {
+    description: {
+        type: String,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    icon: {
+        type: String,
+        value: '',
+    },
+    image: {
+        type: String,
+    },
+    title: {
+        type: String,
+        value: '',
+    },
+    theme: {
+        type: String,
+        value: 'default',
+    },
+};
+export default props;
--- a/components/result/result.d.ts
+++ b/components/result/result.d.ts
@@ -0,0 +1,18 @@
+import { SuperComponent } from '../common/src/index';
+export default class extends SuperComponent {
+    options: {
+        multipleSlots: boolean;
+    };
+    externalClasses: string[];
+    properties: import("./type").TdResultProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+    };
+    lifetimes: {
+        ready(): void;
+    };
+    methods: {
+        setIcon(): void;
+    };
+}
--- a/components/result/result.js
+++ b/components/result/result.js
@@ -0,0 +1,58 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import props from './props';
+import config from '../common/config';
+const { prefix } = config;
+const name = `${prefix}-result`;
+let default_1 = class extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.options = {
+            multipleSlots: true,
+        };
+        this.externalClasses = [
+            `${prefix}-class`,
+            `${prefix}-class-image`,
+            `${prefix}-class-title`,
+            `${prefix}-class-description`,
+        ];
+        this.properties = props;
+        this.data = {
+            prefix,
+            classPrefix: name,
+        };
+        this.lifetimes = {
+            ready() {
+                this.setIcon();
+            },
+        };
+        this.methods = {
+            setIcon() {
+                const { icon, theme } = this.properties;
+                if (icon) {
+                    this.setData({
+                        iconName: icon !== 'null' ? `${icon}` : '',
+                    });
+                }
+                else {
+                    const themeResult = {
+                        default: 'error-circle',
+                        success: 'check-circle',
+                        warning: 'error-circle',
+                        error: 'close-circle',
+                    };
+                    this.setData({ iconName: themeResult[theme] });
+                }
+            },
+        };
+    }
+};
+default_1 = __decorate([
+    wxComponent()
+], default_1);
+export default default_1;
--- a/components/result/result.json
+++ b/components/result/result.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-image": "../image/image"
+  }
+}
--- a/components/result/result.wxml
+++ b/components/result/result.wxml
@@ -0,0 +1,16 @@
+<view class="{{classPrefix}} {{classPrefix}}--theme-{{theme}} {{prefix}}-class">
+  <view class="{{classPrefix}}__thumb">
+    <t-image wx:if="{{image}}" t-class="{{prefix}}-class-image" src="{{image}}" mode="aspectFit" />
+    <t-icon wx:elif="{{ iconName }}" size="160rpx" name="{{ iconName }}" />
+    <slot wx:else name="image" class="{{prefix}}-class-image" />
+  </view>
+
+  <view class="{{classPrefix}}__title {{prefix}}-class-title">
+    <view wx:if="{{title}}"> {{title}} </view>
+    <slot wx:else name="title" />
+  </view>
+  <view class="{{classPrefix}}__description {{prefix}}-class-description">
+    <view wx:if="{{description}}"> {{description}} </view>
+    <slot wx:else name="description" />
+  </view>
+</view>
--- a/components/result/result.wxss
+++ b/components/result/result.wxss
@@ -0,0 +1,65 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.t-result__title {
+  line-height: 56rpx;
+  font-size: 40rpx;
+  font-weight: 700;
+  color: rgba(0, 0, 0, 0.9);
+}
+.t-result__icon {
+  font-size: 80px;
+}
+.t-result__thumb + .t-result__title:not(:empty) {
+  margin-top: 16rpx;
+}
+.t-result__description {
+  text-align: center;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 28rpx;
+  line-height: 44rpx;
+}
+.t-result__title + .t-result__description:not(:empty) {
+  margin-top: 24rpx;
+}
+.t-result--theme-default {
+  color: #0052d9;
+}
+.t-result--theme-success {
+  color: #00a870;
+}
+.t-result--theme-warning {
+  color: #ed7b2f;
+}
+.t-result--theme-error {
+  color: #e34d59;
+}
--- a/components/result/type.d.ts
+++ b/components/result/type.d.ts
@@ -0,0 +1,30 @@
+export interface TdResultProps {
+    description?: {
+        type: StringConstructor;
+        value?: string;
+        required?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-description', 't-class-image'];
+        required?: boolean;
+    };
+    icon?: {
+        type: StringConstructor;
+        value?: string;
+        required?: boolean;
+    };
+    image?: {
+        type: StringConstructor;
+        value?: string;
+        required?: boolean;
+    };
+    title?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'default' | 'success' | 'warning' | 'error';
+    };
+}
--- a/components/result/type.js
+++ b/components/result/type.js
@@ -0,0 +1 @@
+export {};
--- a/components/steps/README.md
+++ b/components/steps/README.md
@@ -12,8 +12,8 @@ isComponent: true

 ```json
 "usingComponents": {
-  "t-steps": "tdesign-miniprogram/steps/steps",
-  "t-step-item": "tdesign-miniprogram/steps/step-item",
+  "t-steps": "/components/steps/steps",
+  "t-step-item": "/components/steps/step-item",
 }
 ```

@@ -74,6 +74,6 @@ change | `({current: string | number, previous: string | number})` | 当前步
 content | String / Slot | '' | 步骤描述 | N
 external-classes | Array | - | 组件类名，用于设置组件外层元素元素类名。`['t-class', 't-class-inner', 't-class-content', 't-class-title', 't-class-description', 't-class-extra', 't-class-sub', 't-class-sub-dot', 't-class-sub-content']` | N
 icon | String / Slot | - | 图标。传入 slot 代表使用插槽，其他字符串代表使用内置图标 | N
-status | String | default | 当前步骤的状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/steps/type.ts) | N
-sub-step-items | Array | [] | 子步骤条，仅支持 layout  = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/steps/type.ts) | N
+status | String | default | 当前步骤的状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/steps/type.ts) | N
+sub-step-items | Array | [] | 子步骤条，仅支持 layout  = 'vertical' 时。TS 类型：`SubStepItem[]` `interface SubStepItem { status: StepStatus, title: string }`。[详细类型定义](https://github.com/Tencent//components/tree/develop/src/steps/type.ts) | N
 title | String / Slot | '' | 标题 | N
--- a/components/tag/README.md
+++ b/components/tag/README.md
@@ -0,0 +1,93 @@
+---
+title: Tag 标签
+description: 用于表明主体的类目，属性或状态。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-tag": "/components/tag/tag",
+  "t-check-tag": "/components/tag/check-tag"
+}
+```
+
+## 代码演示
+
+### 类型
+#### 展示型标签
+
+{{ theme }}
+
+#### 带图标标签
+
+{{ iconDemo }}
+
+#### 圆角标签
+
+{{ shape }}
+
+#### 可关闭标签
+
+{{ closable }}
+
+#### 超长省略文本标签
+
+{{ ellipsis }}
+
+
+## 状态
+
+#### 标签状态
+
+{{ checkable }}
+
+#### 标签规格
+
+{{ size }}
+
+## API
+### Tag Props
+
+| 名称             | 类型            | 默认值  | 说明                                                                                         | 必传    |
+| ---------------- | --------------- | ------- | -------------------------------------------------------------------------------------------- | ------- |
+| closable         | Boolean         | false   | 标签是否可关闭                                                                               | N       |
+| disabled         | Boolean         | false   | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态                        | N       |
+| external-classes | Array           | -       | 组件类名，用于设置 组件外层元素元素类名。`['t-class']`                                       | N       |
+| icon             | String          | -       | 标签中的图标，可自定义图标呈现                                                               | N       |
+| max-width        | String / Number | -       | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80。TS 类型：`CSSProperties['maxWidth'] | number` | N |
+| shape            | String          | square  | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark                          | N       |
+| size             | String          | medium  | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`                                    | N       |
+| theme            | String          | default | 组件风格，用于描述组件不同的应用场景。可选项：default/primary/warning/danger/success         | N       |
+| variant          | String          | dark    | 标签风格变体。可选项：dark/light/outline/light-outline                                       | N       |
+
+### Tag Events
+
+| 名称  | 参数 | 描述                                 |
+| ----- | ---- | ------------------------------------ |
+| click | -    | 点击时触发                           |
+| close | -    | 如果关闭按钮存在，点击关闭按钮时触发 |
+
+### CheckTag Props
+
+| 名称     | 类型                   | 默认值    | 说明                                                                  | 必传 |
+| -------- | ---------------------- | --------- | --------------------------------------------------------------------- | ---- |
+| checked  | Boolean                | undefined | 标签选中的状态，默认风格（theme=default）才有选中态                   | N    |
+| closable | String / Boolean       | false     | 是否可以关闭                                                          | N    |
+| content  | String / Number / Slot | -         | 组件子元素                                                            | N    |
+| disabled | Boolean                | false     | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N    |
+| icon     | String / Slot          | -         | 标签图标                                                              | N    |
+| shape    | String                 | square    | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark   | N    |
+| size     | String                 | medium    | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`             | N    |
+
+### CheckTag Events
+
+| 名称   | 参数                 | 描述           |
+| ------ | -------------------- | -------------- |
+| change | `(checked: boolean)` | 组件子元素     |
+| close  | -    | 如果关闭按钮存在，点击关闭按钮时触发 |
--- a/components/tag/check-tag-props.d.ts
+++ b/components/tag/check-tag-props.d.ts
@@ -0,0 +1,3 @@
+import { TdCheckTagProps } from './type';
+declare const props: TdCheckTagProps;
+export default props;
--- a/components/tag/check-tag-props.js
+++ b/components/tag/check-tag-props.js
@@ -0,0 +1,34 @@
+const props = {
+    checked: {
+        type: Boolean,
+        value: undefined,
+    },
+    defaultChecked: {
+        type: null,
+        value: undefined,
+    },
+    closable: {
+        type: Boolean,
+        value: false,
+    },
+    content: {
+        type: String,
+        optionalTypes: [Number],
+    },
+    disabled: {
+        type: Boolean,
+        value: false,
+    },
+    icon: {
+        type: String,
+    },
+    shape: {
+        type: String,
+        value: 'square',
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+};
+export default props;
--- a/components/tag/check-tag.d.ts
+++ b/components/tag/check-tag.d.ts
@@ -0,0 +1,27 @@
+import { SuperComponent } from '../common/src/index';
+export default class CheckTag extends SuperComponent {
+    data: {
+        prefix: string;
+        classPrefix: string;
+        className: string;
+    };
+    properties: import("./type").TdCheckTagProps;
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    options: {
+        multipleSlots: boolean;
+    };
+    lifetimes: {
+        attached(): void;
+    };
+    observers: {
+        'size, shape, closable, disabled, checked'(): void;
+    };
+    methods: {
+        setClass(): void;
+        handleClose(e: WechatMiniprogram.BaseEvent): void;
+        handleChange(): void;
+    };
+}
--- a/components/tag/check-tag.js
+++ b/components/tag/check-tag.js
@@ -0,0 +1,81 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { wxComponent, SuperComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './check-tag-props';
+import { classNames } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-tag`;
+let CheckTag = class CheckTag extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.data = {
+            prefix,
+            classPrefix: name,
+            className: '',
+        };
+        this.properties = props;
+        this.controlledProps = [
+            {
+                key: 'checked',
+                event: 'change',
+            },
+        ];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.lifetimes = {
+            attached() {
+                this.setClass();
+            },
+        };
+        this.observers = {
+            'size, shape, closable, disabled, checked'() {
+                this.setClass();
+            },
+        };
+        this.methods = {
+            setClass() {
+                const { prefix, classPrefix } = this.data;
+                const { size, shape, closable, disabled, checked, defaultChecked } = this.properties;
+                const isChecked = checked || defaultChecked;
+                const tagClass = [
+                    classPrefix,
+                    `${classPrefix}--checkable`,
+                    closable ? `${classPrefix}--closable ${prefix}-is-closable` : '',
+                    disabled ? `${classPrefix}--disabled ${prefix}-is-disabled` : '',
+                    isChecked ? `${classPrefix}--checked ${prefix}-is-checked` : '',
+                    `${classPrefix}--size-${size || 'medium'}`,
+                    `${classPrefix}--shape-${shape || 'square'}`,
+                ];
+                const className = classNames(tagClass);
+                this.setData({
+                    className,
+                });
+            },
+            handleClose(e) {
+                if (this.data.disabled)
+                    return;
+                this.triggerEvent('close', e);
+            },
+            handleChange() {
+                if (this.data.disabled)
+                    return;
+                const { checked, defaultChecked } = this.properties;
+                const isChecked = checked || defaultChecked;
+                this.setData({
+                    checked: !isChecked,
+                });
+                this._trigger('change', { checked: !isChecked });
+            },
+        };
+    }
+};
+CheckTag = __decorate([
+    wxComponent()
+], CheckTag);
+export default CheckTag;
--- a/components/tag/check-tag.json
+++ b/components/tag/check-tag.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": ".././icon/icon"
+  }
+}
--- a/components/tag/check-tag.wxml
+++ b/components/tag/check-tag.wxml
@@ -0,0 +1,16 @@
+<view class="{{className}}" bind:tap="handleChange">
+  <view class="{{classPrefix}}__icon">
+    <t-icon wx:if="{{icon}}" name="{{icon}}" t-class="{{prefix}}-icon" />
+    <slot wx:else name="icon" />
+  </view>
+  <view class="{{classPrefix}}__text">
+    <slot />
+  </view>
+  <t-icon
+    wx:if="{{ closable }}"
+    class="{{classPrefix}}__icon-close"
+    t-class="{{prefix}}-icon"
+    bind:tap="handleClose"
+    name="close"
+  />
+</view>
--- a/components/tag/check-tag.wxss
+++ b/components/tag/check-tag.wxss
@@ -0,0 +1,233 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-tag {
+  display: inline-flex;
+  align-items: center;
+  border: 2rpx solid transparent;
+  box-sizing: border-box;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  user-select: none;
+  vertical-align: middle;
+}
+.t-tag__text {
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-tag__icon,
+.t-tag__icon-close {
+  display: flex;
+  align-items: center;
+}
+.t-tag__icon:not(:empty) + .t-tag__text:not(:empty),
+.t-tag__text:not(:empty) + .t-tag__icon-close:not(:empty) {
+  margin-left: 8rpx;
+}
+.t-tag.t-tag--size-small {
+  height: 44rpx;
+  line-height: 44rpx;
+  padding: 0 11rpx;
+  font-size: 20rpx;
+}
+.t-tag.t-tag--size-small .t-icon,
+.t-tag.t-tag--size-small .t-icon-close {
+  font-size: 24rpx;
+}
+.t-tag.t-tag--size-medium {
+  height: 48rpx;
+  line-height: 48rpx;
+  padding: 0 15rpx;
+  font-size: 24rpx;
+}
+.t-tag.t-tag--size-medium .t-icon,
+.t-tag.t-tag--size-medium .t-icon-close {
+  font-size: 28rpx;
+}
+.t-tag.t-tag--size-large {
+  height: 60rpx;
+  line-height: 60rpx;
+  padding: 0 23rpx;
+  font-size: 28rpx;
+}
+.t-tag.t-tag--size-large .t-icon,
+.t-tag.t-tag--size-large .t-icon-close {
+  font-size: 36rpx;
+}
+.t-tag.t-tag--shape-square {
+  border-radius: 8rpx;
+}
+.t-tag.t-tag--shape-round {
+  border-radius: 999px;
+}
+.t-tag.t-tag--shape-mark {
+  border-radius: 0 999px 999px 0;
+}
+.t-tag--variant-dark.t-tag--theme-primary {
+  background-color: #0052d9;
+  border-color: #0052d9;
+  color: #ffffff;
+}
+.t-tag--variant-dark.t-tag--theme-success {
+  background-color: #00a870;
+  border-color: #00a870;
+  color: #ffffff;
+}
+.t-tag--variant-dark.t-tag--theme-warning {
+  background-color: #ed7b2f;
+  border-color: #ed7b2f;
+  color: #ffffff;
+}
+.t-tag--variant-dark.t-tag--theme-default {
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+  color: rgba(0, 0, 0, 0.9);
+}
+.t-tag--variant-dark.t-tag--theme-danger {
+  background-color: #e34d59;
+  border-color: #e34d59;
+  color: #ffffff;
+}
+.t-tag--variant-light.t-tag--theme-primary {
+  background-color: #e6eefb;
+  border-color: #e6eefb;
+  color: #0052d9;
+}
+.t-tag--variant-light.t-tag--theme-success {
+  background-color: #e6f6f1;
+  border-color: #e6f6f1;
+  color: #00a870;
+}
+.t-tag--variant-light.t-tag--theme-warning {
+  background-color: #fdf2ea;
+  border-color: #fdf2ea;
+  color: #ed7b2f;
+}
+.t-tag--variant-light.t-tag--theme-default {
+  background-color: rgba(28, 28, 28, 0.91);
+  border-color: rgba(28, 28, 28, 0.91);
+  color: #e7e7e7;
+}
+.t-tag--variant-light.t-tag--theme-danger {
+  background-color: #fcedee;
+  border-color: #fcedee;
+  color: #e34d59;
+}
+.t-tag--variant-light.t-tag--theme-default {
+  color: rgba(0, 0, 0, 0.9);
+  border-color: #f3f3f3;
+  background-color: #f3f3f3;
+}
+.t-tag--variant-outline.t-tag--theme-primary {
+  background-color: #ffffff;
+  border-color: #0052d9;
+  color: #0052d9;
+}
+.t-tag--variant-outline.t-tag--theme-success {
+  background-color: #ffffff;
+  border-color: #00a870;
+  color: #00a870;
+}
+.t-tag--variant-outline.t-tag--theme-warning {
+  background-color: #ffffff;
+  border-color: #ed7b2f;
+  color: #ed7b2f;
+}
+.t-tag--variant-outline.t-tag--theme-default {
+  background-color: rgba(0, 0, 0, 0.9);
+  border-color: #e7e7e7;
+  color: #e7e7e7;
+}
+.t-tag--variant-outline.t-tag--theme-danger {
+  background-color: #ffffff;
+  border-color: #e34d59;
+  color: #e34d59;
+}
+.t-tag--variant-outline.t-tag--theme-default {
+  color: rgba(0, 0, 0, 0.9);
+  border-color: #dcdcdc;
+  background-color: #fff;
+}
+.t-tag--variant-light-outline.t-tag--theme-primary {
+  background-color: #e6eefb;
+  border-color: #0052d9;
+  color: #0052d9;
+}
+.t-tag--variant-light-outline.t-tag--theme-success {
+  background-color: #e6f6f1;
+  border-color: #00a870;
+  color: #00a870;
+}
+.t-tag--variant-light-outline.t-tag--theme-warning {
+  background-color: #fdf2ea;
+  border-color: #ed7b2f;
+  color: #ed7b2f;
+}
+.t-tag--variant-light-outline.t-tag--theme-default {
+  background-color: rgba(28, 28, 28, 0.91);
+  border-color: #e7e7e7;
+  color: #e7e7e7;
+}
+.t-tag--variant-light-outline.t-tag--theme-danger {
+  background-color: #fcedee;
+  border-color: #e34d59;
+  color: #e34d59;
+}
+.t-tag--variant-light-outline.t-tag--theme-default {
+  color: rgba(0, 0, 0, 0.9);
+  border-color: #dcdcdc;
+  background-color: #f3f3f3;
+}
+.t-tag.t-tag--checkable {
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.9);
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+}
+.t-tag.t-tag--checkable.t-tag--checked {
+  color: #fff;
+  background-color: #0052d9;
+  border-color: #0052d9;
+}
+.t-tag.t-tag--checkable.t-tag--checked.t-tag--disabled {
+  color: #fff;
+  background-color: #bbd3fb;
+}
+.t-tag.t-tag--checkable.t-tag--disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.26);
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+}
+.t-tag.t-tag--closable.t-tag--disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.26);
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+}
--- a/components/tag/common/base.wxss
+++ b/components/tag/common/base.wxss
@@ -0,0 +1,233 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-tag {
+  display: inline-flex;
+  align-items: center;
+  border: 2rpx solid transparent;
+  box-sizing: border-box;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  user-select: none;
+  vertical-align: middle;
+}
+.t-tag__text {
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-tag__icon,
+.t-tag__icon-close {
+  display: flex;
+  align-items: center;
+}
+.t-tag__icon:not(:empty) + .t-tag__text:not(:empty),
+.t-tag__text:not(:empty) + .t-tag__icon-close:not(:empty) {
+  margin-left: 8rpx;
+}
+.t-tag.t-tag--size-small {
+  height: 44rpx;
+  line-height: 44rpx;
+  padding: 0 11rpx;
+  font-size: 20rpx;
+}
+.t-tag.t-tag--size-small .t-icon,
+.t-tag.t-tag--size-small .t-icon-close {
+  font-size: 24rpx;
+}
+.t-tag.t-tag--size-medium {
+  height: 48rpx;
+  line-height: 48rpx;
+  padding: 0 15rpx;
+  font-size: 24rpx;
+}
+.t-tag.t-tag--size-medium .t-icon,
+.t-tag.t-tag--size-medium .t-icon-close {
+  font-size: 28rpx;
+}
+.t-tag.t-tag--size-large {
+  height: 60rpx;
+  line-height: 60rpx;
+  padding: 0 23rpx;
+  font-size: 28rpx;
+}
+.t-tag.t-tag--size-large .t-icon,
+.t-tag.t-tag--size-large .t-icon-close {
+  font-size: 36rpx;
+}
+.t-tag.t-tag--shape-square {
+  border-radius: 8rpx;
+}
+.t-tag.t-tag--shape-round {
+  border-radius: 999px;
+}
+.t-tag.t-tag--shape-mark {
+  border-radius: 0 999px 999px 0;
+}
+.t-tag--variant-dark.t-tag--theme-primary {
+  background-color: #0052d9;
+  border-color: #0052d9;
+  color: #ffffff;
+}
+.t-tag--variant-dark.t-tag--theme-success {
+  background-color: #00a870;
+  border-color: #00a870;
+  color: #ffffff;
+}
+.t-tag--variant-dark.t-tag--theme-warning {
+  background-color: #ed7b2f;
+  border-color: #ed7b2f;
+  color: #ffffff;
+}
+.t-tag--variant-dark.t-tag--theme-default {
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+  color: rgba(0, 0, 0, 0.9);
+}
+.t-tag--variant-dark.t-tag--theme-danger {
+  background-color: #e34d59;
+  border-color: #e34d59;
+  color: #ffffff;
+}
+.t-tag--variant-light.t-tag--theme-primary {
+  background-color: #e6eefb;
+  border-color: #e6eefb;
+  color: #0052d9;
+}
+.t-tag--variant-light.t-tag--theme-success {
+  background-color: #e6f6f1;
+  border-color: #e6f6f1;
+  color: #00a870;
+}
+.t-tag--variant-light.t-tag--theme-warning {
+  background-color: #fdf2ea;
+  border-color: #fdf2ea;
+  color: #ed7b2f;
+}
+.t-tag--variant-light.t-tag--theme-default {
+  background-color: rgba(28, 28, 28, 0.91);
+  border-color: rgba(28, 28, 28, 0.91);
+  color: #e7e7e7;
+}
+.t-tag--variant-light.t-tag--theme-danger {
+  background-color: #fcedee;
+  border-color: #fcedee;
+  color: #e34d59;
+}
+.t-tag--variant-light.t-tag--theme-default {
+  color: rgba(0, 0, 0, 0.9);
+  border-color: #f3f3f3;
+  background-color: #f3f3f3;
+}
+.t-tag--variant-outline.t-tag--theme-primary {
+  background-color: #ffffff;
+  border-color: #0052d9;
+  color: #0052d9;
+}
+.t-tag--variant-outline.t-tag--theme-success {
+  background-color: #ffffff;
+  border-color: #00a870;
+  color: #00a870;
+}
+.t-tag--variant-outline.t-tag--theme-warning {
+  background-color: #ffffff;
+  border-color: #ed7b2f;
+  color: #ed7b2f;
+}
+.t-tag--variant-outline.t-tag--theme-default {
+  background-color: rgba(0, 0, 0, 0.9);
+  border-color: #e7e7e7;
+  color: #e7e7e7;
+}
+.t-tag--variant-outline.t-tag--theme-danger {
+  background-color: #ffffff;
+  border-color: #e34d59;
+  color: #e34d59;
+}
+.t-tag--variant-outline.t-tag--theme-default {
+  color: rgba(0, 0, 0, 0.9);
+  border-color: #dcdcdc;
+  background-color: #fff;
+}
+.t-tag--variant-light-outline.t-tag--theme-primary {
+  background-color: #e6eefb;
+  border-color: #0052d9;
+  color: #0052d9;
+}
+.t-tag--variant-light-outline.t-tag--theme-success {
+  background-color: #e6f6f1;
+  border-color: #00a870;
+  color: #00a870;
+}
+.t-tag--variant-light-outline.t-tag--theme-warning {
+  background-color: #fdf2ea;
+  border-color: #ed7b2f;
+  color: #ed7b2f;
+}
+.t-tag--variant-light-outline.t-tag--theme-default {
+  background-color: rgba(28, 28, 28, 0.91);
+  border-color: #e7e7e7;
+  color: #e7e7e7;
+}
+.t-tag--variant-light-outline.t-tag--theme-danger {
+  background-color: #fcedee;
+  border-color: #e34d59;
+  color: #e34d59;
+}
+.t-tag--variant-light-outline.t-tag--theme-default {
+  color: rgba(0, 0, 0, 0.9);
+  border-color: #dcdcdc;
+  background-color: #f3f3f3;
+}
+.t-tag.t-tag--checkable {
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.9);
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+}
+.t-tag.t-tag--checkable.t-tag--checked {
+  color: #fff;
+  background-color: #0052d9;
+  border-color: #0052d9;
+}
+.t-tag.t-tag--checkable.t-tag--checked.t-tag--disabled {
+  color: #fff;
+  background-color: #bbd3fb;
+}
+.t-tag.t-tag--checkable.t-tag--disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.26);
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+}
+.t-tag.t-tag--closable.t-tag--disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.26);
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+}
--- a/components/tag/props.d.ts
+++ b/components/tag/props.d.ts
@@ -0,0 +1,3 @@
+import { TdTagProps } from './type';
+declare const props: TdTagProps;
+export default props;
--- a/components/tag/props.js
+++ b/components/tag/props.js
@@ -0,0 +1,38 @@
+const props = {
+    closable: {
+        type: Boolean,
+        value: false,
+    },
+    disabled: {
+        type: Boolean,
+        value: false,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    icon: {
+        type: String,
+        value: '',
+    },
+    maxWidth: {
+        type: String,
+        optionalTypes: [Number],
+    },
+    shape: {
+        type: String,
+        value: 'square',
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+    theme: {
+        type: String,
+        value: 'default',
+    },
+    variant: {
+        type: String,
+        value: 'dark',
+    },
+};
+export default props;
--- a/components/tag/tag.d.ts
+++ b/components/tag/tag.d.ts
@@ -0,0 +1,27 @@
+import { SuperComponent } from '../common/src/index';
+export default class Tag extends SuperComponent {
+    data: {
+        prefix: string;
+        classPrefix: string;
+        className: string;
+        tagStyle: string;
+    };
+    properties: import("./type").TdTagProps;
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    lifetimes: {
+        attached(): void;
+    };
+    observers: {
+        'size, shape, theme, variant, closable, disabled'(): void;
+        maxWidth(): void;
+    };
+    methods: {
+        setClass(): void;
+        setTagStyle(): string;
+        handleClick(e: WechatMiniprogram.BaseEvent): void;
+        handleClose(e: WechatMiniprogram.BaseEvent): void;
+    };
+}
--- a/components/tag/tag.js
+++ b/components/tag/tag.js
@@ -0,0 +1,83 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { wxComponent, SuperComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+import { classNames, isNumber } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-tag`;
+let Tag = class Tag extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.data = {
+            prefix,
+            classPrefix: name,
+            className: '',
+            tagStyle: '',
+        };
+        this.properties = props;
+        this.externalClasses = [`${prefix}-class`];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.lifetimes = {
+            attached() {
+                this.setClass();
+                this.setTagStyle();
+            },
+        };
+        this.observers = {
+            'size, shape, theme, variant, closable, disabled'() {
+                this.setClass();
+            },
+            maxWidth() {
+                this.setTagStyle();
+            },
+        };
+        this.methods = {
+            setClass() {
+                const { prefix, classPrefix } = this.data;
+                const { size, shape, theme, variant, closable, disabled } = this.properties;
+                const tagClass = [
+                    classPrefix,
+                    `${classPrefix}--theme-${theme || 'default'}`,
+                    `${classPrefix}--variant-${variant || 'dark'}`,
+                    closable ? `${classPrefix}--closable ${prefix}-is-closable` : '',
+                    disabled ? `${classPrefix}--disabled ${prefix}-is-disabled` : '',
+                    `${classPrefix}--size-${size || 'medium'}`,
+                    `${classPrefix}--shape-${shape || 'square'}`,
+                ];
+                const className = classNames(tagClass);
+                this.setData({
+                    className,
+                });
+            },
+            setTagStyle() {
+                const { maxWidth } = this.properties;
+                if (!maxWidth) {
+                    return '';
+                }
+                const width = isNumber(maxWidth) ? `${maxWidth}px` : maxWidth;
+                this.setData({ tagStyle: `max-width:${width};` });
+            },
+            handleClick(e) {
+                if (this.data.disabled)
+                    return;
+                this.triggerEvent('click', e);
+            },
+            handleClose(e) {
+                if (this.data.disabled)
+                    return;
+                this.triggerEvent('close', e);
+            },
+        };
+    }
+};
+Tag = __decorate([
+    wxComponent()
+], Tag);
+export default Tag;
--- a/components/tag/tag.json
+++ b/components/tag/tag.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": ".././icon/icon"
+  }
+}
--- a/components/tag/tag.wxml
+++ b/components/tag/tag.wxml
@@ -0,0 +1,16 @@
+<view class="{{className}} {{prefix}}-class" style="{{tagStyle}}" bind:tap="handleClick">
+  <view class="{{classPrefix}}__icon">
+    <t-icon wx:if="{{icon}}" name="{{icon}}" t-class="{{prefix}}-icon" />
+    <slot wx:else name="icon" />
+  </view>
+  <view class="{{classPrefix}}__text">
+    <slot />
+  </view>
+  <t-icon
+    wx:if="{{ closable }}"
+    class="{{classPrefix}}__icon-close"
+    t-class="{{prefix}}-icon"
+    bind:tap="handleClose"
+    name="close"
+  />
+</view>
--- a/components/tag/tag.wxss
+++ b/components/tag/tag.wxss
@@ -0,0 +1,233 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-tag {
+  display: inline-flex;
+  align-items: center;
+  border: 2rpx solid transparent;
+  box-sizing: border-box;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  user-select: none;
+  vertical-align: middle;
+}
+.t-tag__text {
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-tag__icon,
+.t-tag__icon-close {
+  display: flex;
+  align-items: center;
+}
+.t-tag__icon:not(:empty) + .t-tag__text:not(:empty),
+.t-tag__text:not(:empty) + .t-tag__icon-close:not(:empty) {
+  margin-left: 8rpx;
+}
+.t-tag.t-tag--size-small {
+  height: 44rpx;
+  line-height: 44rpx;
+  padding: 0 11rpx;
+  font-size: 20rpx;
+}
+.t-tag.t-tag--size-small .t-icon,
+.t-tag.t-tag--size-small .t-icon-close {
+  font-size: 24rpx;
+}
+.t-tag.t-tag--size-medium {
+  height: 48rpx;
+  line-height: 48rpx;
+  padding: 0 15rpx;
+  font-size: 24rpx;
+}
+.t-tag.t-tag--size-medium .t-icon,
+.t-tag.t-tag--size-medium .t-icon-close {
+  font-size: 28rpx;
+}
+.t-tag.t-tag--size-large {
+  height: 60rpx;
+  line-height: 60rpx;
+  padding: 0 23rpx;
+  font-size: 28rpx;
+}
+.t-tag.t-tag--size-large .t-icon,
+.t-tag.t-tag--size-large .t-icon-close {
+  font-size: 36rpx;
+}
+.t-tag.t-tag--shape-square {
+  border-radius: 8rpx;
+}
+.t-tag.t-tag--shape-round {
+  border-radius: 999px;
+}
+.t-tag.t-tag--shape-mark {
+  border-radius: 0 999px 999px 0;
+}
+.t-tag--variant-dark.t-tag--theme-primary {
+  background-color: #0052d9;
+  border-color: #0052d9;
+  color: #ffffff;
+}
+.t-tag--variant-dark.t-tag--theme-success {
+  background-color: #00a870;
+  border-color: #00a870;
+  color: #ffffff;
+}
+.t-tag--variant-dark.t-tag--theme-warning {
+  background-color: #ed7b2f;
+  border-color: #ed7b2f;
+  color: #ffffff;
+}
+.t-tag--variant-dark.t-tag--theme-default {
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+  color: rgba(0, 0, 0, 0.9);
+}
+.t-tag--variant-dark.t-tag--theme-danger {
+  background-color: #e34d59;
+  border-color: #e34d59;
+  color: #ffffff;
+}
+.t-tag--variant-light.t-tag--theme-primary {
+  background-color: #e6eefb;
+  border-color: #e6eefb;
+  color: #0052d9;
+}
+.t-tag--variant-light.t-tag--theme-success {
+  background-color: #e6f6f1;
+  border-color: #e6f6f1;
+  color: #00a870;
+}
+.t-tag--variant-light.t-tag--theme-warning {
+  background-color: #fdf2ea;
+  border-color: #fdf2ea;
+  color: #ed7b2f;
+}
+.t-tag--variant-light.t-tag--theme-default {
+  background-color: rgba(28, 28, 28, 0.91);
+  border-color: rgba(28, 28, 28, 0.91);
+  color: #e7e7e7;
+}
+.t-tag--variant-light.t-tag--theme-danger {
+  background-color: #fcedee;
+  border-color: #fcedee;
+  color: #e34d59;
+}
+.t-tag--variant-light.t-tag--theme-default {
+  color: rgba(0, 0, 0, 0.9);
+  border-color: #f3f3f3;
+  background-color: #f3f3f3;
+}
+.t-tag--variant-outline.t-tag--theme-primary {
+  background-color: #ffffff;
+  border-color: #0052d9;
+  color: #0052d9;
+}
+.t-tag--variant-outline.t-tag--theme-success {
+  background-color: #ffffff;
+  border-color: #00a870;
+  color: #00a870;
+}
+.t-tag--variant-outline.t-tag--theme-warning {
+  background-color: #ffffff;
+  border-color: #ed7b2f;
+  color: #ed7b2f;
+}
+.t-tag--variant-outline.t-tag--theme-default {
+  background-color: rgba(0, 0, 0, 0.9);
+  border-color: #e7e7e7;
+  color: #e7e7e7;
+}
+.t-tag--variant-outline.t-tag--theme-danger {
+  background-color: #ffffff;
+  border-color: #e34d59;
+  color: #e34d59;
+}
+.t-tag--variant-outline.t-tag--theme-default {
+  color: rgba(0, 0, 0, 0.9);
+  border-color: #dcdcdc;
+  background-color: #fff;
+}
+.t-tag--variant-light-outline.t-tag--theme-primary {
+  background-color: #e6eefb;
+  border-color: #0052d9;
+  color: #0052d9;
+}
+.t-tag--variant-light-outline.t-tag--theme-success {
+  background-color: #e6f6f1;
+  border-color: #00a870;
+  color: #00a870;
+}
+.t-tag--variant-light-outline.t-tag--theme-warning {
+  background-color: #fdf2ea;
+  border-color: #ed7b2f;
+  color: #ed7b2f;
+}
+.t-tag--variant-light-outline.t-tag--theme-default {
+  background-color: rgba(28, 28, 28, 0.91);
+  border-color: #e7e7e7;
+  color: #e7e7e7;
+}
+.t-tag--variant-light-outline.t-tag--theme-danger {
+  background-color: #fcedee;
+  border-color: #e34d59;
+  color: #e34d59;
+}
+.t-tag--variant-light-outline.t-tag--theme-default {
+  color: rgba(0, 0, 0, 0.9);
+  border-color: #dcdcdc;
+  background-color: #f3f3f3;
+}
+.t-tag.t-tag--checkable {
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.9);
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+}
+.t-tag.t-tag--checkable.t-tag--checked {
+  color: #fff;
+  background-color: #0052d9;
+  border-color: #0052d9;
+}
+.t-tag.t-tag--checkable.t-tag--checked.t-tag--disabled {
+  color: #fff;
+  background-color: #bbd3fb;
+}
+.t-tag.t-tag--checkable.t-tag--disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.26);
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+}
+.t-tag.t-tag--closable.t-tag--disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.26);
+  background-color: #e7e7e7;
+  border-color: #e7e7e7;
+}
--- a/components/tag/type.d.ts
+++ b/components/tag/type.d.ts
@@ -0,0 +1,92 @@
+import { SizeEnum } from '../common/common';
+export interface TdTagProps {
+    closable?: {
+        type: BooleanConstructor;
+        value?: boolean;
+        required?: boolean;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+        required?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class'];
+        required?: boolean;
+    };
+    icon?: {
+        type: StringConstructor;
+        value?: string;
+        required?: boolean;
+    };
+    maxWidth?: {
+        type: StringConstructor;
+        optionalTypes: Array<NumberConstructor>;
+        value?: string | number;
+        required?: boolean;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: 'square' | 'round' | 'mark';
+        required?: boolean;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: SizeEnum;
+        required?: boolean;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'default' | 'primary' | 'warning' | 'danger' | 'success';
+        required?: boolean;
+    };
+    variant?: {
+        type: StringConstructor;
+        value?: 'dark' | 'light' | 'outline' | 'light-outline';
+        required?: boolean;
+    };
+}
+export interface TdCheckTagProps {
+    checked?: {
+        type: BooleanConstructor;
+        value?: boolean;
+        required?: boolean;
+    };
+    defaultChecked?: {
+        type: BooleanConstructor;
+        value?: boolean;
+        required?: boolean;
+    };
+    closable?: {
+        type: BooleanConstructor;
+        value?: boolean;
+        required?: boolean;
+    };
+    content?: {
+        type: StringConstructor;
+        optionalTypes: Array<NumberConstructor>;
+        value?: string | number;
+        required?: boolean;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+        required?: boolean;
+    };
+    icon?: {
+        type: StringConstructor;
+        value?: string;
+        required?: boolean;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: 'square' | 'round' | 'mark';
+        required?: boolean;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: SizeEnum;
+        required?: boolean;
+    };
+}
--- a/components/tag/type.js
+++ b/components/tag/type.js
@@ -0,0 +1 @@
+export {};
--- a/pages/foot-tab/foot-tab.js
+++ b/pages/foot-tab/foot-tab.js
@@ -62,7 +62,22 @@ Component({
            }
        },

+        checkLogin(){
+            let userInfo = wx.getStorageSync('userInfo');
+            let token = wx.getStorageSync('userToken');
+            console.log('userInfo===' + userInfo);
+            console.log('token===' + token);
+            if (userInfo && token){
+                return true;
+            }else {
+                return false;
+            }
+        },
+
        onChange(event) {
+            if (!this.checkLogin()){
+                wx.redirectTo({url:"/pages/login/index"});
+            }
            this.setIconData(event.detail.value);
        },
    }
--- a/pages/login/index.js
+++ b/pages/login/index.js
@@ -0,0 +1,73 @@
+import Toast from '../../components/toast/index';
+Page({
+    data: {
+        body:{
+            userName:'',
+            password:'',
+            code:''
+        }
+    },
+    // 输入框输入时
+    inputChange(event) {
+        let key = event.currentTarget.dataset.type;
+        this.data.body[key] = event.detail.value;
+    },
+    toast(option) {
+        Toast({
+            context: this,
+            selector: '#t-toast',
+            ...option,
+        });
+    },
+
+    clickRegister() {
+        wx.redirectTo({
+            url:"/pages/register/index"
+        })
+    },
+
+    longin(){
+        if (!this.data.body.userName) {
+            this.toast({
+                message: '用户名不能为空！',
+                theme: 'fail',
+                placement: 'bottom',
+                direction: 'column'
+            });
+            return;
+        }
+        if (!this.data.body.password) {
+            this.toast({
+                message: '请输入密码！',
+                theme: 'fail',
+                placement: 'bottom',
+                direction: 'column'
+            });
+            return;
+        }
+        if (!this.data.body.code) {
+            this.toast({
+                message: '请输入验证码！',
+                theme: 'fail',
+                placement: 'bottom',
+                direction: 'column'
+            });
+            return;
+        }
+        if (this.data.body.code != '1') {
+            this.toast({
+                message: '验证码不匹配！',
+                theme: 'fail',
+                placement: 'bottom',
+                direction: 'column'
+            });
+            return;
+        }
+        console.log('登录成功');
+        wx.setStorageSync('userInfo',this.data.body);
+        wx.setStorageSync('userToken','123456');
+        wx.redirectTo({url:'/pages/myself/index'});
+
+    }
+
+});
--- a/pages/login/index.json
+++ b/pages/login/index.json
@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "t-toast": "/components/toast/toast",
+    "t-button": "/components/button/button"
+  }
+}
--- a/pages/login/index.wxml
+++ b/pages/login/index.wxml
@@ -0,0 +1,18 @@
+<view class="inputClass">
+<t-input label="用户名" placeholder="请输入用户名" maxlength="{{10}}" bindchange="inputChange" data-type='userName' clearable />
+<t-input label="输入密码" placeholder="请输入密码" type="password" bindchange="inputChange" data-type='password' clearable />
+<t-input placeholder="请输入验证码" bindchange="inputChange" data-type='code' label="验证码">
+    <view slot="suffix">
+        <image
+                style="width: 72px; height: 36px; display: block; margin-top: -6px; margin-bottom: -6px"
+                src="https://wwcdn.weixin.qq.com/node/wework/images/202010241547.ac6876be9c.png"
+                mode="heightFix"
+        />
+    </view>
+</t-input>
+<view class="clickRegister" bind:tap="clickRegister">点击注册></view>
+</view>
+<view class="inputButton">
+    <t-button block theme="danger" bind:tap="longin">登录</t-button>
+</view>
+<t-toast id="t-toast" />
--- a/pages/login/index.wxss
+++ b/pages/login/index.wxss
@@ -0,0 +1,13 @@
+.inputClass {
+    margin-top: 200rpx;
+    padding: 20rpx;
+}
+.inputButton {
+    padding: 20rpx;
+    margin-top: 50rpx;
+}
+.clickRegister{
+    margin-top: 10rpx;
+    font-size: 28rpx;
+    float: right;
+}
--- a/pages/myself/account/index.js
+++ b/pages/myself/account/index.js
@@ -18,5 +18,11 @@ Page({
                console.log(e);
            }
        })
+    },
+
+    exitLogin(){
+        wx.clearStorageSync();
+        wx.redirectTo({url:"/pages/login/index"})
    }
+
 });
--- a/pages/myself/account/index.json
+++ b/pages/myself/account/index.json
@@ -1,4 +1,5 @@
 {
  "usingComponents": {
+    "t-button": "/components/button/button"
  }
 }
--- a/pages/myself/account/index.wxml
+++ b/pages/myself/account/index.wxml
@@ -10,3 +10,6 @@
 </t-cell>
 <t-cell title="昵称" description="{{'浙A88FU7'}}" />
 <t-cell title="邮箱" description="{{'540344226@qq.com'}}" />
+<view class="subButton">
+    <t-button block theme="danger" bind:tap="exitLogin">退出登录</t-button>
+</view>
--- a/pages/myself/account/index.wxss
+++ b/pages/myself/account/index.wxss
@@ -4,3 +4,8 @@
    border-radius: 50%;
    overflow: hidden;
 }
+.subButton {
+    position: absolute;
+    width: 100%;
+    bottom:10rpx;
+}
--- a/pages/register/index.js
+++ b/pages/register/index.js
@@ -0,0 +1,79 @@
+Page({
+    data: {
+        nameConfirm: false,
+        checkedId: '',
+        checkedName: '',
+        userNameList: [
+            {"id":1,"userName":"浙A88123","checked":false},
+            {"id":2,"userName":"浙A88dae","checked":false},
+            {"id":3,"userName":"浙A88F32","checked":false},
+            {"id":4,"userName":"浙A88231","checked":false},
+            {"id":5,"userName":"浙A88F213","checked":false},
+            {"id":6,"userName":"浙A88F1U7","checked":false},
+            {"id":7,"userName":"浙A81237","checked":false},
+            {"id":8,"userName":"浙A1238FU7","checked":false},
+            {"id":9,"userName":"浙A88FU7","checked":false},
+            {"id":10,"userName":"浙A88FU7","checked":false},
+            {"id":11,"userName":"浙A88FU7","checked":false},
+            {"id":12,"userName":"浙A88FU7","checked":false},
+            {"id":13,"userName":"浙A88FU7","checked":false},
+            {"id":14,"userName":"浙A88FU7","checked":false},
+            {"id":15,"userName":"浙A88FU7","checked":false},
+            {"id":16,"userName":"浙A88FU7","checked":false},
+            {"id":17,"userName":"浙A88FU7","checked":false},
+            {"id":18,"userName":"浙A88FU7","checked":false},
+            {"id":19,"userName":"浙A88FU7","checked":false},
+            {"id":20,"userName":"浙A88FU7","checked":false},
+            {"id":21,"userName":"浙A88FU7","checked":false},
+            {"id":22,"userName":"浙A88FU7","checked":false},
+            {"id":23,"userName":"浙A88FU7","checked":false},
+            {"id":24,"userName":"浙A88FU7","checked":false},
+            {"id":25,"userName":"浙A88FU7","checked":false},
+            {"id":26,"userName":"浙A88FU7","checked":false},
+            {"id":27,"userName":"浙A88FU7","checked":false},
+            {"id":28,"userName":"浙A88FU7","checked":false},
+            {"id":29,"userName":"浙A88FU7","checked":false},
+            {"id":30,"userName":"浙A88FU7","checked":false},
+            {"id":31,"userName":"浙A88FU7","checked":false},
+            {"id":32,"userName":"浙A88FU7","checked":false},
+            {"id":33,"userName":"浙A88FU7","checked":false},
+            {"id":34,"userName":"浙A88FU7","checked":false},
+            {"id":35,"userName":"浙A88FU7","checked":false},
+            {"id":36,"userName":"浙A88FU7","checked":false},
+            {"id":37,"userName":"浙A88FU7","checked":false},
+            {"id":38,"userName":"浙A88FU7","checked":false},
+            {"id":39,"userName":"浙A88FU7","checked":false},
+            {"id":40,"userName":"浙A88FU7","checked":false}
+        ],
+    },
+
+    checkName() {
+        this.closeDialog();
+        wx.navigateTo({url:"/pages/register/password/index?name=" + this.data.checkedName})
+    },
+
+    changeCheckEasy() {
+        let dataList = this.data.userNameList;
+        let dataCheck = dataList[this.data.checkedId];
+        dataCheck.checked = !dataCheck.checked;
+        dataList[this.data.checkedId] = dataCheck;
+        this.setData({
+            userNameList: dataList,
+        })
+    },
+
+    closeDialog() {
+        this.changeCheckEasy();
+        this.setData({ nameConfirm : false });
+    },
+
+    handleCheckTagChange(e){
+        this.setData({
+            checkedId : e.currentTarget.id - 1,
+            checkedName : e.currentTarget.dataset.name,
+            nameConfirm : true
+        })
+        this.changeCheckEasy();
+    }
+
+});
--- a/pages/register/index.json
+++ b/pages/register/index.json
@@ -0,0 +1,10 @@
+{
+  "usingComponents": {
+    "t-grid": "/components/grid/grid",
+    "t-grid-item": "/components/grid/grid-item",
+    "t-tag": "/components/tag/tag",
+    "t-steps": "/components/steps/steps",
+    "t-step-item": "/components/steps/step-item",
+    "t-dialog": "/components/dialog/dialog"
+  }
+}
--- a/pages/register/index.wxml
+++ b/pages/register/index.wxml
@@ -0,0 +1,22 @@
+<view>
+        <t-steps class="demo-steps" defaultCurrent="0" readonly>
+                <t-step-item title="用户名" content="选择用户名" />
+                <t-step-item title="密码" content="设置密码" />
+                <t-step-item title="成功" content="完成注册" />
+        </t-steps>
+</view>
+<t-grid class="five" column="{{4}}" align="center" border="{{border}}">
+        <t-grid-item wx:for="{{userNameList}}" wx:key="index" text="{{item.id}}">
+                <t-tag wx:if="{{item.checked}}" theme="success" bind:tap="handleCheckTagChange" id="{{item.id}}" data-name="{{item.userName}}" size="large">{{item.userName}}</t-tag>
+                <t-tag wx:else theme="primary" bind:tap="handleCheckTagChange" id="{{item.id}}" data-name="{{item.userName}}" size="large">{{item.userName}}</t-tag>
+        </t-grid-item>
+</t-grid>
+<t-dialog
+        visible="{{nameConfirm}}"
+        title="确定选择【{{checkedName}}】？"
+        t-class-confirm="custom-confirm-btn"
+        confirm-btn="就它了"
+        cancel-btn="再想想"
+        bind:confirm="checkName"
+        bind:cancel="closeDialog"
+/>
--- a/pages/register/index.wxss
+++ b/pages/register/index.wxss
@@ -0,0 +1,3 @@
+.custom-confirm-btn {
+    color: #ff4646 !important;
+}
--- a/pages/register/ok/index.js
+++ b/pages/register/ok/index.js
@@ -0,0 +1,13 @@
+Page({
+    data: {
+        userName:'',
+    },
+    onLoad: function (options) {
+        this.setData({
+            userName:options.name
+        })
+    },
+    toLongin(){
+        wx.redirectTo({url:"/pages/login/index"});
+    }
+});
--- a/pages/register/ok/index.json
+++ b/pages/register/ok/index.json
@@ -0,0 +1,8 @@
+{
+  "usingComponents": {
+    "t-steps": "/components/steps/steps",
+    "t-step-item": "/components/steps/step-item",
+    "t-result": "/components/result/result",
+    "t-button": "/components/button/button"
+  }
+}
--- a/pages/register/ok/index.wxml
+++ b/pages/register/ok/index.wxml
@@ -0,0 +1,13 @@
+<view>
+    <t-steps class="demo-steps" defaultCurrent="2" readonly>
+        <t-step-item title="用户名" content="选择用户名" />
+        <t-step-item title="密码" content="设置密码" />
+        <t-step-item title="成功" content="完成注册" />
+    </t-steps>
+</view>
+<view class="leaveTop">
+    <t-result theme="success" title="成功" description="恭喜{{userName}}注册成功！" />
+</view>
+<view class="leaveTop">
+    <t-button block theme="danger" bind:tap="toLongin">去登录>>></t-button>
+</view>
--- a/pages/register/ok/index.wxss
+++ b/pages/register/ok/index.wxss
@@ -0,0 +1,3 @@
+.leaveTop{
+    margin-top: 88rpx;
+}
--- a/pages/register/password/index.js
+++ b/pages/register/password/index.js
@@ -0,0 +1,15 @@
+Page({
+    data: {
+        userName:'',
+    },
+    onLoad: function (options) {
+        this.setData({
+            userName:options.name
+        })
+    },
+
+    toRegister(){
+        wx.navigateTo({url:"/pages/register/ok/index?name=" + this.data.userName})
+    }
+
+});
--- a/pages/register/password/index.json
+++ b/pages/register/password/index.json
@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "t-steps": "/components/steps/steps",
+    "t-step-item": "/components/steps/step-item",
+    "t-button": "/components/button/button"
+  }
+}
--- a/pages/register/password/index.wxml
+++ b/pages/register/password/index.wxml
@@ -0,0 +1,15 @@
+<view>
+    <t-steps class="demo-steps" defaultCurrent="1" readonly>
+        <t-step-item title="用户名" content="选择用户名" />
+        <t-step-item title="密码" content="设置密码" />
+        <t-step-item title="成功" content="完成注册" />
+    </t-steps>
+</view>
+<view class="leaveTop">
+    <t-input label="用户名" value="{{userName}}" disabled />
+    <t-input label="输入密码" placeholder="请输入密码" type="password" bindchange="inputChange" data-type='password' clearable />
+    <t-input label="重复输入密码" placeholder="请重复输入密码" type="password" bindchange="inputChange" data-type='rePassword' clearable />
+</view>
+<view class="leaveTop">
+<t-button block theme="danger" bind:tap="toRegister">注册</t-button>
+</view>
--- a/pages/register/password/index.wxss
+++ b/pages/register/password/index.wxss
@@ -0,0 +1,3 @@
+.leaveTop{
+    margin-top: 88rpx;
+}
--- a/pages/task/index.js
+++ b/pages/task/index.js
@@ -9,7 +9,6 @@ Page({
     */
    data: {
        tapCheckHandle: undefined,
-        dateVisible: true,
        aIconList: ['check-rectangle-filled', 'star', 'notification', 'info-circle'],
        taskList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}],
        todayList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}],
@@ -36,13 +35,9 @@ Page({
    getList(type, currentPage) {
        let currentCur = this.data.categoryCur;
        let pageData = this.getCurrentData(currentCur);
-        if (pageData.end) return;
+        if ('more' == type && pageData.end) return;
        pageData.requesting = true;
        this.setCurrentData(currentCur, pageData);
-        wx.showLoading({
-            title: '请稍候...',
-            mask: true,
-        })
        app.$api.taskList({}).then(res =>{
            // this.setData({
            //     taskList:res.data.taskList,
@@ -51,8 +46,6 @@ Page({
                taskList: [],
                over: false
            };
-            console.log(data)
-            console.log(data.over)
            let listData = this.data.delayList || [];
            pageData.requesting = false;
            if (type === 'refresh') {
--- a/pages/task/taskView/index.json
+++ b/pages/task/taskView/index.json
@@ -3,7 +3,6 @@
    "t-date-time-picker": "/components/date-time-picker/date-time-picker",
    "t-picker": "/components/picker/picker",
    "t-picker-item": "/components/picker/picker-item",
-    "t-switch": "/components/switch/switch",
-    "t-button": "/components/button/button"
+    "t-switch": "/components/switch/switch"
  }
 }
--- a/utils/api.js
+++ b/utils/api.js
@@ -231,7 +231,6 @@ export default {
      let job = {data:{over:true}};
      x(job)
      console.log(x + '请求成功');
-      wx.hideLoading();
    })
    // return fetchGet('', params, false);
  },