feat(QRCode): update QRCode component api

packages/products/tdesign-miniprogram/src/qr-code/README.en-US.md

@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### QrCode Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+style | Object | - | CSS(Cascading Style Sheets) | N
+custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
+bg-color | String | transparent | QR code background color | N
+borderless | Boolean | false | Is there a border | N
+color | String | #000000 | QR code color | N
+icon | String / Slot | - | The address or custom icon of the picture in the QR code。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+icon-size | Number / Object | 40 | The size of the picture in the QR code。Typescript：`number \| { width: number; height: number }` | N
+level | String | M | QR code error correction level。options: L/M/Q/H | N
+size | Number | 160 | QR code size | N
+status | String | active | QR code status。options: active/expired/loading/scanned。Typescript：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/qr-code/type.ts) | N
+status-render | Slot | - | Custom state renderer。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/qr-code/type.ts) | N
+value | String | - | required。scanned text | Y
+
+### QrCode Events
+
+name | params | description
+-- | -- | --
+refresh | \- | Click the "Click to refresh" callback

packages/products/tdesign-miniprogram/src/qr-code/README.md

@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### QrCode Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+style | Object | - | 样式 | N
+custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+bg-color | String | transparent | 二维码背景颜色 | N
+borderless | Boolean | false | 是否有边框 | N
+color | String | #000000 | 二维码颜色 | N
+icon | String / Slot | - | 二维码中图片的地址或自定义icon。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+icon-size | Number / Object | 40 | 二维码中图片的大小。TS 类型：`number \| { width: number; height: number }` | N
+level | String | M | 二维码纠错等级。可选项：L/M/Q/H | N
+size | Number | 160 | 二维码大小 | N
+status | String | active | 二维码状态。可选项：active/expired/loading/scanned。TS 类型：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/qr-code/type.ts) | N
+status-render | Slot | - | 自定义状态渲染器。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/qr-code/type.ts) | N
+value | String | - | 必需。扫描后的文本 | Y
+
+### QrCode Events
+
+名称 | 参数 | 描述
+-- | -- | --
+refresh | \- | 点击"点击刷新"的回调

packages/products/tdesign-miniprogram/src/qr-code/props.ts

@@ -0,0 +1,56 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdQrCodeProps } from './type';
+const props: TdQrCodeProps = {
+  /** 二维码背景颜色 */
+  bgColor: {
+    type: String,
+    value: 'transparent',
+  },
+  /** 是否有边框 */
+  borderless: {
+    type: Boolean,
+    value: false,
+  },
+  /** 二维码颜色 */
+  color: {
+    type: String,
+    value: '#000000',
+  },
+  /** 二维码中图片的地址或自定义icon */
+  icon: {
+    type: String,
+  },
+  /** 二维码中图片的大小 */
+  iconSize: {
+    type: null,
+    value: 40,
+  },
+  /** 二维码纠错等级 */
+  level: {
+    type: String,
+    value: 'M',
+  },
+  /** 二维码大小 */
+  size: {
+    type: Number,
+    value: 160,
+  },
+  /** 二维码状态 */
+  status: {
+    type: String,
+    value: 'active',
+  },
+  /** 扫描后的文本 */
+  value: {
+    type: String,
+    value: '',
+    required: true,
+  },
+};
+
+export default props;

packages/products/tdesign-miniprogram/src/qr-code/type.ts

@@ -0,0 +1,93 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode } from '../common/common';
+
+export interface TdQrCodeProps {
+  /**
+   * 二维码背景颜色
+   * @default transparent
+   */
+  bgColor?: {
+    type: StringConstructor;
+    value?: string;
+  };
+  /**
+   * 是否有边框
+   * @default false
+   */
+  borderless?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
+  /**
+   * 二维码颜色
+   * @default #000000
+   */
+  color?: {
+    type: StringConstructor;
+    value?: string;
+  };
+  /**
+   * 二维码中图片的地址或自定义icon
+   */
+  icon?: {
+    type: StringConstructor;
+    value?: string;
+  };
+  /**
+   * 二维码中图片的大小
+   * @default 40
+   */
+  iconSize?: {
+    type: null;
+    value?: number | { width: number; height: number };
+  };
+  /**
+   * 二维码纠错等级
+   * @default M
+   */
+  level?: {
+    type: StringConstructor;
+    value?: 'L' | 'M' | 'Q' | 'H';
+  };
+  /**
+   * 二维码大小
+   * @default 160
+   */
+  size?: {
+    type: NumberConstructor;
+    value?: number;
+  };
+  /**
+   * 二维码状态
+   * @default active
+   */
+  status?: {
+    type: StringConstructor;
+    value?: QRStatus;
+  };
+  /**
+   * 自定义状态渲染器
+   */
+  statusRender?: {
+    type: undefined;
+    value?: (info: StatusRenderInfo) => TNode;
+  };
+  /**
+   * 扫描后的文本
+   * @default ''
+   */
+  value: {
+    type: StringConstructor;
+    value?: string;
+    required?: boolean;
+  };
+}
+
+export type QRStatus = 'active' | 'expired' | 'loading' | 'scanned';
+
+export type StatusRenderInfo = { status: QRStatus; locale: string; onRefresh?: () => void };

packages/products/tdesign-mobile-react/src/qr-code/defaultProps.ts

@@ -0,0 +1,16 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdQrCodeProps } from './type';
+
+export const qrCodeDefaultProps: TdQrCodeProps = {
+  bgColor: 'transparent',
+  borderless: false,
+  color: '#000000',
+  iconSize: 40,
+  level: 'M',
+  size: 160,
+  status: 'active',
+  type: 'canvas',
+};

packages/products/tdesign-mobile-react/src/qr-code/qr-code.en-US.md

@@ -0,0 +1,22 @@
+:: BASE_DOC ::
+
+## API
+
+### QrCode Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+bgColor | String | transparent | QR code background color | N
+borderless | Boolean | false | Is there a border | N
+color | String | #000000 | QR code color | N
+icon | TNode | - | The address or custom icon of the picture in the QR code。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+iconSize | Number / Object | 40 | The size of the picture in the QR code。Typescript：`number \| { width: number; height: number }` | N
+level | String | M | QR code error correction level。options: L/M/Q/H | N
+size | Number | 160 | QR code size | N
+status | String | active | QR code status。options: active/expired/loading/scanned。Typescript：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/qr-code/type.ts) | N
+statusRender | TElement | - | Custom state renderer。Typescript：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;locale:string;onRefresh?: () => void;}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/qr-code/type.ts) | N
+type | String | canvas | render type。options: canvas/svg | N
+value | String | - | required。scanned text | Y
+onRefresh | Function |  | Typescript：`() => void`<br/>Click the "Click to refresh" callback | N

packages/products/tdesign-mobile-react/src/qr-code/qr-code.md

@@ -0,0 +1,22 @@
+:: BASE_DOC ::
+
+## API
+
+### QrCode Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+bgColor | String | transparent | 二维码背景颜色 | N
+borderless | Boolean | false | 是否有边框 | N
+color | String | #000000 | 二维码颜色 | N
+icon | TNode | - | 二维码中图片的地址或自定义icon。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+iconSize | Number / Object | 40 | 二维码中图片的大小。TS 类型：`number \| { width: number; height: number }` | N
+level | String | M | 二维码纠错等级。可选项：L/M/Q/H | N
+size | Number | 160 | 二维码大小 | N
+status | String | active | 二维码状态。可选项：active/expired/loading/scanned。TS 类型：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/qr-code/type.ts) | N
+statusRender | TElement | - | 自定义状态渲染器。TS 类型：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;locale:string;onRefresh?: () => void;}`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/qr-code/type.ts) | N
+type | String | canvas | 渲染类型。可选项：canvas/svg | N
+value | String | - | 必需。扫描后的文本 | Y
+onRefresh | Function |  | TS 类型：`() => void`<br/>点击"点击刷新"的回调 | N

packages/products/tdesign-mobile-react/src/qr-code/type.ts

@@ -0,0 +1,71 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode } from '../common';
+
+export interface TdQrCodeProps {
+  /**
+   * 二维码背景颜色
+   * @default transparent
+   */
+  bgColor?: string;
+  /**
+   * 是否有边框
+   * @default false
+   */
+  borderless?: boolean;
+  /**
+   * 二维码颜色
+   * @default #000000
+   */
+  color?: string;
+  /**
+   * 二维码中图片的地址或自定义icon
+   */
+  icon?: TNode;
+  /**
+   * 二维码中图片的大小
+   * @default 40
+   */
+  iconSize?: number | { width: number; height: number };
+  /**
+   * 二维码纠错等级
+   * @default M
+   */
+  level?: 'L' | 'M' | 'Q' | 'H';
+  /**
+   * 二维码大小
+   * @default 160
+   */
+  size?: number;
+  /**
+   * 二维码状态
+   * @default active
+   */
+  status?: QRStatus;
+  /**
+   * 自定义状态渲染器
+   */
+  statusRender?: (info: StatusRenderInfo) => TNode;
+  /**
+   * 渲染类型
+   * @default canvas
+   */
+  type?: 'canvas' | 'svg';
+  /**
+   * 扫描后的文本
+   * @default ''
+   */
+  value: string;
+  /**
+   * 点击"点击刷新"的回调
+   */
+  onRefresh?: () => void;
+}
+
+export type QRStatus = 'active' | 'expired' | 'loading' | 'scanned';
+
+export type StatusRenderInfo = { status: QRStatus; locale: string; onRefresh?: () => void };