diff --git a/db/TDesign.db b/db/TDesign.db
index 4f735b1e..7f83a29b 100644
Binary files a/db/TDesign.db and b/db/TDesign.db differ
diff --git a/package.json b/package.json
index 7aec9142..ccb22c45 100644
--- a/package.json
+++ b/package.json
@@ -68,5 +68,6 @@
     "api:configurable": "node packages/scripts/configurable-props"
   },
   "author": "TDesign",
-  "license": "ISC"
+  "license": "ISC",
+  "packageManager": "pnpm@10.6.4+sha512.da3d715bfd22a9a105e6e8088cfc7826699332ded60c423b14ec613a185f1602206702ff0fe4c438cb15c979081ce4cb02568e364b15174503a63c7a8e2a5f6c"
 }
diff --git a/packages/products/tdesign-miniprogram/src/qr-code/README.en-US.md b/packages/products/tdesign-miniprogram/src/qr-code/README.en-US.md
new file mode 100644
index 00000000..aadff83d
--- /dev/null
+++ b/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 | - | 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 | - | scanned text | N
+
+### QrCode Events
+
+name | params | description
+-- | -- | --
+refresh | \- | Click the "Click to refresh" callback
diff --git a/packages/products/tdesign-miniprogram/src/qr-code/README.md b/packages/products/tdesign-miniprogram/src/qr-code/README.md
new file mode 100644
index 00000000..36f0f4e8
--- /dev/null
+++ b/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 | - | 二维码颜色 | 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 | - | 扫描后的文本 | N
+
+### QrCode Events
+
+名称 | 参数 | 描述
+-- | -- | --
+refresh | \- | 点击"点击刷新"的回调
diff --git a/packages/products/tdesign-miniprogram/src/qr-code/props.ts b/packages/products/tdesign-miniprogram/src/qr-code/props.ts
new file mode 100644
index 00000000..e723d443
--- /dev/null
+++ b/packages/products/tdesign-miniprogram/src/qr-code/props.ts
@@ -0,0 +1,55 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdQrCodeProps } from './type';
+const props: TdQrCodeProps = {
+  /** 二维码背景颜色 */
+  bgColor: {
+    type: String,
+    value: 'transparent',
+  },
+  /** 是否有边框 */
+  borderless: {
+    type: Boolean,
+    value: false,
+  },
+  /** 二维码颜色 */
+  color: {
+    type: String,
+    value: '',
+  },
+  /** 二维码中图片的地址或自定义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: '',
+  },
+};
+
+export default props;
diff --git a/packages/products/tdesign-miniprogram/src/qr-code/type.ts b/packages/products/tdesign-miniprogram/src/qr-code/type.ts
new file mode 100644
index 00000000..2e2cd209
--- /dev/null
+++ b/packages/products/tdesign-miniprogram/src/qr-code/type.ts
@@ -0,0 +1,92 @@
+/* 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 ''
+   */
+  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;
+  };
+}
+
+export type QRStatus = 'active' | 'expired' | 'loading' | 'scanned';
+
+export type StatusRenderInfo = { status: QRStatus; locale: string; onRefresh?: () => void };
diff --git a/packages/products/tdesign-mobile-react/src/qr-code/defaultProps.ts b/packages/products/tdesign-mobile-react/src/qr-code/defaultProps.ts
new file mode 100644
index 00000000..4834feb3
--- /dev/null
+++ b/packages/products/tdesign-mobile-react/src/qr-code/defaultProps.ts
@@ -0,0 +1,15 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdQrCodeProps } from './type';
+
+export const qrCodeDefaultProps: TdQrCodeProps = {
+  bgColor: 'transparent',
+  borderless: false,
+  iconSize: 40,
+  level: 'M',
+  size: 160,
+  status: 'active',
+  type: 'canvas',
+};
diff --git a/packages/products/tdesign-mobile-react/src/qr-code/qr-code.en-US.md b/packages/products/tdesign-mobile-react/src/qr-code/qr-code.en-US.md
new file mode 100644
index 00000000..2af5034d
--- /dev/null
+++ b/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 | - | 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 | - | scanned text | N
+onRefresh | Function |  | Typescript：`() => void`<br/>Click the "Click to refresh" callback | N
diff --git a/packages/products/tdesign-mobile-react/src/qr-code/qr-code.md b/packages/products/tdesign-mobile-react/src/qr-code/qr-code.md
new file mode 100644
index 00000000..0cc8d9ea
--- /dev/null
+++ b/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 | - | 二维码颜色 | 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 | - | 扫描后的文本 | N
+onRefresh | Function |  | TS 类型：`() => void`<br/>点击"点击刷新"的回调 | N
diff --git a/packages/products/tdesign-mobile-react/src/qr-code/type.ts b/packages/products/tdesign-mobile-react/src/qr-code/type.ts
new file mode 100644
index 00000000..b1340973
--- /dev/null
+++ b/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 ''
+   */
+  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 };
diff --git a/packages/products/tdesign-mobile-vue/src/qr-code/props.ts b/packages/products/tdesign-mobile-vue/src/qr-code/props.ts
new file mode 100644
index 00000000..078731c6
--- /dev/null
+++ b/packages/products/tdesign-mobile-vue/src/qr-code/props.ts
@@ -0,0 +1,75 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdQrCodeProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 二维码背景颜色 */
+  bgColor: {
+    type: String,
+    default: 'transparent',
+  },
+  /** 是否有边框 */
+  borderless: Boolean,
+  /** 二维码颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
+  /** 二维码中图片的地址或自定义icon */
+  icon: {
+    type: [String, Function] as PropType<TdQrCodeProps['icon']>,
+  },
+  /** 二维码中图片的大小 */
+  iconSize: {
+    type: [Number, Object] as PropType<TdQrCodeProps['iconSize']>,
+    default: 40,
+  },
+  /** 二维码纠错等级 */
+  level: {
+    type: String as PropType<TdQrCodeProps['level']>,
+    default: 'M' as TdQrCodeProps['level'],
+    validator(val: TdQrCodeProps['level']): boolean {
+      if (!val) return true;
+      return ['L', 'M', 'Q', 'H'].includes(val);
+    },
+  },
+  /** 二维码大小 */
+  size: {
+    type: Number,
+    default: 160,
+  },
+  /** 二维码状态 */
+  status: {
+    type: String as PropType<TdQrCodeProps['status']>,
+    default: 'active' as TdQrCodeProps['status'],
+    validator(val: TdQrCodeProps['status']): boolean {
+      if (!val) return true;
+      return ['active', 'expired', 'loading', 'scanned'].includes(val);
+    },
+  },
+  /** 自定义状态渲染器 */
+  statusRender: {
+    type: Function as PropType<TdQrCodeProps['statusRender']>,
+  },
+  /** 渲染类型 */
+  type: {
+    type: String as PropType<TdQrCodeProps['type']>,
+    default: 'canvas' as TdQrCodeProps['type'],
+    validator(val: TdQrCodeProps['type']): boolean {
+      if (!val) return true;
+      return ['canvas', 'svg'].includes(val);
+    },
+  },
+  /** 扫描后的文本 */
+  value: {
+    type: String,
+    default: '',
+  },
+  /** 点击"点击刷新"的回调 */
+  onRefresh: Function as PropType<TdQrCodeProps['onRefresh']>,
+};
diff --git a/packages/products/tdesign-mobile-vue/src/qr-code/qr-code.en-US.md b/packages/products/tdesign-mobile-vue/src/qr-code/qr-code.en-US.md
new file mode 100644
index 00000000..1c45b1e5
--- /dev/null
+++ b/packages/products/tdesign-mobile-vue/src/qr-code/qr-code.en-US.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### QrCode Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+bgColor | String | transparent | QR code background color | N
+borderless | Boolean | false | Is there a border | N
+color | String | - | QR code color | N
+icon | String / Slot / Function | - | 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-vue/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-vue/tree/develop/src/qr-code/type.ts) | N
+statusRender | Slot / Function | - | 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-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/qr-code/type.ts) | N
+type | String | canvas | render type。options: canvas/svg | N
+value | String | - | scanned text | N
+onRefresh | Function |  | Typescript：`() => void`<br/>Click the "Click to refresh" callback | N
+
+### QrCode Events
+
+name | params | description
+-- | -- | --
+refresh | \- | Click the "Click to refresh" callback
diff --git a/packages/products/tdesign-mobile-vue/src/qr-code/qr-code.md b/packages/products/tdesign-mobile-vue/src/qr-code/qr-code.md
new file mode 100644
index 00000000..145af54b
--- /dev/null
+++ b/packages/products/tdesign-mobile-vue/src/qr-code/qr-code.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### QrCode Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+bgColor | String | transparent | 二维码背景颜色 | N
+borderless | Boolean | false | 是否有边框 | N
+color | String | - | 二维码颜色 | N
+icon | String / Slot / Function | - | 二维码中图片的地址或自定义icon。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/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-vue/tree/develop/src/qr-code/type.ts) | N
+statusRender | Slot / Function | - | 自定义状态渲染器。TS 类型：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;locale:string;onRefresh?: () => void;}`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/qr-code/type.ts) | N
+type | String | canvas | 渲染类型。可选项：canvas/svg | N
+value | String | - | 扫描后的文本 | N
+onRefresh | Function |  | TS 类型：`() => void`<br/>点击"点击刷新"的回调 | N
+
+### QrCode Events
+
+名称 | 参数 | 描述
+-- | -- | --
+refresh | \- | 点击"点击刷新"的回调
diff --git a/packages/products/tdesign-mobile-vue/src/qr-code/type.ts b/packages/products/tdesign-mobile-vue/src/qr-code/type.ts
new file mode 100644
index 00000000..2bab2707
--- /dev/null
+++ b/packages/products/tdesign-mobile-vue/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 ''
+   */
+  color?: string;
+  /**
+   * 二维码中图片的地址或自定义icon
+   */
+  icon?: string | 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 };
diff --git a/packages/products/tdesign-react/packages/components/qr-code/defaultProps.ts b/packages/products/tdesign-react/packages/components/qr-code/defaultProps.ts
new file mode 100644
index 00000000..4834feb3
--- /dev/null
+++ b/packages/products/tdesign-react/packages/components/qr-code/defaultProps.ts
@@ -0,0 +1,15 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdQrCodeProps } from './type';
+
+export const qrCodeDefaultProps: TdQrCodeProps = {
+  bgColor: 'transparent',
+  borderless: false,
+  iconSize: 40,
+  level: 'M',
+  size: 160,
+  status: 'active',
+  type: 'canvas',
+};
diff --git a/packages/products/tdesign-react/packages/components/qr-code/qr-code.en-US.md b/packages/products/tdesign-react/packages/components/qr-code/qr-code.en-US.md
new file mode 100644
index 00000000..40ee13dd
--- /dev/null
+++ b/packages/products/tdesign-react/packages/components/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 | - | 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-react/blob/develop/packages/components/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-react/blob/develop/packages/components/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-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/qr-code/type.ts) | N
+type | String | canvas | render type。options: canvas/svg | N
+value | String | - | scanned text | N
+onRefresh | Function |  | Typescript：`() => void`<br/>Click the "Click to refresh" callback | N
diff --git a/packages/products/tdesign-react/packages/components/qr-code/qr-code.md b/packages/products/tdesign-react/packages/components/qr-code/qr-code.md
new file mode 100644
index 00000000..a9f156e2
--- /dev/null
+++ b/packages/products/tdesign-react/packages/components/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 | - | 二维码颜色 | N
+icon | TNode | - | 二维码中图片的地址或自定义icon。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/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-react/blob/develop/packages/components/qr-code/type.ts) | N
+statusRender | TElement | - | 自定义状态渲染器。TS 类型：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;locale:string;onRefresh?: () => void;}`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/qr-code/type.ts) | N
+type | String | canvas | 渲染类型。可选项：canvas/svg | N
+value | String | - | 扫描后的文本 | N
+onRefresh | Function |  | TS 类型：`() => void`<br/>点击"点击刷新"的回调 | N
diff --git a/packages/products/tdesign-react/packages/components/qr-code/type.ts b/packages/products/tdesign-react/packages/components/qr-code/type.ts
new file mode 100644
index 00000000..b1340973
--- /dev/null
+++ b/packages/products/tdesign-react/packages/components/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 ''
+   */
+  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 };
diff --git a/packages/products/tdesign-vue-next/packages/components/qr-code/props.ts b/packages/products/tdesign-vue-next/packages/components/qr-code/props.ts
new file mode 100644
index 00000000..2ea9fbf3
--- /dev/null
+++ b/packages/products/tdesign-vue-next/packages/components/qr-code/props.ts
@@ -0,0 +1,75 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdQrCodeProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 二维码背景颜色 */
+  bgColor: {
+    type: String,
+    default: 'transparent',
+  },
+  /** 是否有边框 */
+  borderless: Boolean,
+  /** 二维码颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
+  /** 二维码中图片的地址或自定义icon */
+  icon: {
+    type: [String, Function] as PropType<TdQrCodeProps['icon']>,
+  },
+  /** 二维码中图片的大小 */
+  iconSize: {
+    type: [Number, Object] as PropType<TdQrCodeProps['iconSize']>,
+    default: 40 as TdQrCodeProps['iconSize'],
+  },
+  /** 二维码纠错等级 */
+  level: {
+    type: String as PropType<TdQrCodeProps['level']>,
+    default: 'M' as TdQrCodeProps['level'],
+    validator(val: TdQrCodeProps['level']): boolean {
+      if (!val) return true;
+      return ['L', 'M', 'Q', 'H'].includes(val);
+    },
+  },
+  /** 二维码大小 */
+  size: {
+    type: Number,
+    default: 160,
+  },
+  /** 二维码状态 */
+  status: {
+    type: String as PropType<TdQrCodeProps['status']>,
+    default: 'active' as TdQrCodeProps['status'],
+    validator(val: TdQrCodeProps['status']): boolean {
+      if (!val) return true;
+      return ['active', 'expired', 'loading', 'scanned'].includes(val);
+    },
+  },
+  /** 自定义状态渲染器 */
+  statusRender: {
+    type: Function as PropType<TdQrCodeProps['statusRender']>,
+  },
+  /** 渲染类型 */
+  type: {
+    type: String as PropType<TdQrCodeProps['type']>,
+    default: 'canvas' as TdQrCodeProps['type'],
+    validator(val: TdQrCodeProps['type']): boolean {
+      if (!val) return true;
+      return ['canvas', 'svg'].includes(val);
+    },
+  },
+  /** 扫描后的文本 */
+  value: {
+    type: String,
+    default: '',
+  },
+  /** 点击"点击刷新"的回调 */
+  onRefresh: Function as PropType<TdQrCodeProps['onRefresh']>,
+};
diff --git a/packages/products/tdesign-vue-next/packages/components/qr-code/qr-code.en-US.md b/packages/products/tdesign-vue-next/packages/components/qr-code/qr-code.en-US.md
new file mode 100644
index 00000000..150e14a4
--- /dev/null
+++ b/packages/products/tdesign-vue-next/packages/components/qr-code/qr-code.en-US.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### QrCode Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+bgColor | String | transparent | QR code background color | N
+borderless | Boolean | false | Is there a border | N
+color | String | - | QR code color | N
+icon | String / Slot / Function | - | The address or custom icon of the picture in the QR code。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/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-vue-next/blob/develop/packages/components/qr-code/type.ts) | N
+statusRender | Slot / Function | - | Custom state renderer。Typescript：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;locale:string;onRefresh?: () => void;}`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/qr-code/type.ts) | N
+type | String | canvas | render type。options: canvas/svg | N
+value | String | - | scanned text | N
+onRefresh | Function |  | Typescript：`() => void`<br/>Click the "Click to refresh" callback | N
+
+### QrCode Events
+
+name | params | description
+-- | -- | --
+refresh | \- | Click the "Click to refresh" callback
diff --git a/packages/products/tdesign-vue-next/packages/components/qr-code/qr-code.md b/packages/products/tdesign-vue-next/packages/components/qr-code/qr-code.md
new file mode 100644
index 00000000..8011ff0f
--- /dev/null
+++ b/packages/products/tdesign-vue-next/packages/components/qr-code/qr-code.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### QrCode Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+bgColor | String | transparent | 二维码背景颜色 | N
+borderless | Boolean | false | 是否有边框 | N
+color | String | - | 二维码颜色 | N
+icon | String / Slot / Function | - | 二维码中图片的地址或自定义icon。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/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-vue-next/blob/develop/packages/components/qr-code/type.ts) | N
+statusRender | Slot / Function | - | 自定义状态渲染器。TS 类型：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;locale:string;onRefresh?: () => void;}`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/qr-code/type.ts) | N
+type | String | canvas | 渲染类型。可选项：canvas/svg | N
+value | String | - | 扫描后的文本 | N
+onRefresh | Function |  | TS 类型：`() => void`<br/>点击"点击刷新"的回调 | N
+
+### QrCode Events
+
+名称 | 参数 | 描述
+-- | -- | --
+refresh | \- | 点击"点击刷新"的回调
diff --git a/packages/products/tdesign-vue-next/packages/components/qr-code/type.ts b/packages/products/tdesign-vue-next/packages/components/qr-code/type.ts
new file mode 100644
index 00000000..2bab2707
--- /dev/null
+++ b/packages/products/tdesign-vue-next/packages/components/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 ''
+   */
+  color?: string;
+  /**
+   * 二维码中图片的地址或自定义icon
+   */
+  icon?: string | 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 };
diff --git a/packages/products/tdesign-vue/src/qr-code/props.ts b/packages/products/tdesign-vue/src/qr-code/props.ts
new file mode 100644
index 00000000..078731c6
--- /dev/null
+++ b/packages/products/tdesign-vue/src/qr-code/props.ts
@@ -0,0 +1,75 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdQrCodeProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 二维码背景颜色 */
+  bgColor: {
+    type: String,
+    default: 'transparent',
+  },
+  /** 是否有边框 */
+  borderless: Boolean,
+  /** 二维码颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
+  /** 二维码中图片的地址或自定义icon */
+  icon: {
+    type: [String, Function] as PropType<TdQrCodeProps['icon']>,
+  },
+  /** 二维码中图片的大小 */
+  iconSize: {
+    type: [Number, Object] as PropType<TdQrCodeProps['iconSize']>,
+    default: 40,
+  },
+  /** 二维码纠错等级 */
+  level: {
+    type: String as PropType<TdQrCodeProps['level']>,
+    default: 'M' as TdQrCodeProps['level'],
+    validator(val: TdQrCodeProps['level']): boolean {
+      if (!val) return true;
+      return ['L', 'M', 'Q', 'H'].includes(val);
+    },
+  },
+  /** 二维码大小 */
+  size: {
+    type: Number,
+    default: 160,
+  },
+  /** 二维码状态 */
+  status: {
+    type: String as PropType<TdQrCodeProps['status']>,
+    default: 'active' as TdQrCodeProps['status'],
+    validator(val: TdQrCodeProps['status']): boolean {
+      if (!val) return true;
+      return ['active', 'expired', 'loading', 'scanned'].includes(val);
+    },
+  },
+  /** 自定义状态渲染器 */
+  statusRender: {
+    type: Function as PropType<TdQrCodeProps['statusRender']>,
+  },
+  /** 渲染类型 */
+  type: {
+    type: String as PropType<TdQrCodeProps['type']>,
+    default: 'canvas' as TdQrCodeProps['type'],
+    validator(val: TdQrCodeProps['type']): boolean {
+      if (!val) return true;
+      return ['canvas', 'svg'].includes(val);
+    },
+  },
+  /** 扫描后的文本 */
+  value: {
+    type: String,
+    default: '',
+  },
+  /** 点击"点击刷新"的回调 */
+  onRefresh: Function as PropType<TdQrCodeProps['onRefresh']>,
+};
diff --git a/packages/products/tdesign-vue/src/qr-code/qr-code.en-US.md b/packages/products/tdesign-vue/src/qr-code/qr-code.en-US.md
new file mode 100644
index 00000000..beb26887
--- /dev/null
+++ b/packages/products/tdesign-vue/src/qr-code/qr-code.en-US.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### QrCode Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+bgColor | String | transparent | QR code background color | N
+borderless | Boolean | false | Is there a border | N
+color | String | - | QR code color | N
+icon | String / Slot / Function | - | The address or custom icon of the picture in the QR code。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/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-vue/tree/develop/src/qr-code/type.ts) | N
+statusRender | Slot / Function | - | Custom state renderer。Typescript：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;locale:string;onRefresh?: () => void;}`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/qr-code/type.ts) | N
+type | String | canvas | render type。options: canvas/svg | N
+value | String | - | scanned text | N
+onRefresh | Function |  | Typescript：`() => void`<br/>Click the "Click to refresh" callback | N
+
+### QrCode Events
+
+name | params | description
+-- | -- | --
+refresh | \- | Click the "Click to refresh" callback
diff --git a/packages/products/tdesign-vue/src/qr-code/qr-code.md b/packages/products/tdesign-vue/src/qr-code/qr-code.md
new file mode 100644
index 00000000..06a4d1b0
--- /dev/null
+++ b/packages/products/tdesign-vue/src/qr-code/qr-code.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+### QrCode Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+bgColor | String | transparent | 二维码背景颜色 | N
+borderless | Boolean | false | 是否有边框 | N
+color | String | - | 二维码颜色 | N
+icon | String / Slot / Function | - | 二维码中图片的地址或自定义icon。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/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-vue/tree/develop/src/qr-code/type.ts) | N
+statusRender | Slot / Function | - | 自定义状态渲染器。TS 类型：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;locale:string;onRefresh?: () => void;}`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/qr-code/type.ts) | N
+type | String | canvas | 渲染类型。可选项：canvas/svg | N
+value | String | - | 扫描后的文本 | N
+onRefresh | Function |  | TS 类型：`() => void`<br/>点击"点击刷新"的回调 | N
+
+### QrCode Events
+
+名称 | 参数 | 描述
+-- | -- | --
+refresh | \- | 点击"点击刷新"的回调
diff --git a/packages/products/tdesign-vue/src/qr-code/type.ts b/packages/products/tdesign-vue/src/qr-code/type.ts
new file mode 100644
index 00000000..2bab2707
--- /dev/null
+++ b/packages/products/tdesign-vue/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 ''
+   */
+  color?: string;
+  /**
+   * 二维码中图片的地址或自定义icon
+   */
+  icon?: string | 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 };
diff --git a/packages/scripts/api.json b/packages/scripts/api.json
index 900e4cb8..65a62b00 100644
--- a/packages/scripts/api.json
+++ b/packages/scripts/api.json
@@ -93894,6 +93894,548 @@
         "Array"
       ]
     },
+    {
+      "id": 1748524112,
+      "platform_framework": [
+        "1",
+        "2",
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "QrCode",
+      "field_category": 1,
+      "field_name": "bgColor",
+      "field_type": [
+        "1"
+      ],
+      "field_default_value": "transparent",
+      "field_enum": "",
+      "field_desc_zh": "二维码背景颜色",
+      "field_desc_en": "QR code background color",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-05-29 13:08:32",
+      "update_time": "2025-05-29 13:08:32",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "String"
+      ]
+    },
+    {
+      "id": 1748524307,
+      "platform_framework": [
+        "1",
+        "2",
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "QrCode",
+      "field_category": 1,
+      "field_name": "borderless",
+      "field_type": [
+        "4"
+      ],
+      "field_default_value": "false",
+      "field_enum": "",
+      "field_desc_zh": "是否有边框",
+      "field_desc_en": "Is there a border",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-05-29 13:11:47",
+      "update_time": "2025-05-29 13:11:47",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "Boolean"
+      ]
+    },
+    {
+      "id": 1748524032,
+      "platform_framework": [
+        "1",
+        "2",
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "QrCode",
+      "field_category": 1,
+      "field_name": "color",
+      "field_type": [
+        "1"
+      ],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "二维码颜色",
+      "field_desc_en": "QR code color",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-05-29 13:07:12",
+      "update_time": "2025-05-29 13:07:12",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "String"
+      ]
+    },
+    {
+      "id": 1748523781,
+      "platform_framework": [
+        "1",
+        "2",
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "QrCode",
+      "field_category": 1,
+      "field_name": "icon",
+      "field_type": [
+        "1",
+        "64"
+      ],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "二维码中图片的地址或自定义icon",
+      "field_desc_en": "The address or custom icon of the picture in the QR code",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-05-29 13:03:01",
+      "update_time": "2025-05-29 13:03:01",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "String",
+        "TNode"
+      ]
+    },
+    {
+      "id": 1748523969,
+      "platform_framework": [
+        "1",
+        "2",
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "QrCode",
+      "field_category": 1,
+      "field_name": "iconSize",
+      "field_type": [
+        "2",
+        "8"
+      ],
+      "field_default_value": "40",
+      "field_enum": "",
+      "field_desc_zh": "二维码中图片的大小",
+      "field_desc_en": "The size of the picture in the QR code",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-05-29 13:06:09",
+      "update_time": "2025-05-29 13:06:09",
+      "event_output": null,
+      "custom_field_type": "number | { width: number; height: number }",
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "Number",
+        "Object"
+      ]
+    },
+    {
+      "id": 1748524385,
+      "platform_framework": [
+        "1",
+        "2",
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "QrCode",
+      "field_category": 1,
+      "field_name": "level",
+      "field_type": [
+        "1"
+      ],
+      "field_default_value": "M",
+      "field_enum": "L/M/Q/H",
+      "field_desc_zh": "二维码纠错等级",
+      "field_desc_en": "QR code error correction level",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-05-29 13:13:05",
+      "update_time": "2025-05-29 13:13:05",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "String"
+      ]
+    },
+    {
+      "id": 1748523868,
+      "platform_framework": [
+        "1",
+        "2",
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "QrCode",
+      "field_category": 1,
+      "field_name": "size",
+      "field_type": [
+        "2"
+      ],
+      "field_default_value": "160",
+      "field_enum": "",
+      "field_desc_zh": "二维码大小",
+      "field_desc_en": "QR code size",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-05-29 13:04:28",
+      "update_time": "2025-05-29 13:04:28",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "Number"
+      ]
+    },
+    {
+      "id": 1748524526,
+      "platform_framework": [
+        "1",
+        "2",
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "QrCode",
+      "field_category": 1,
+      "field_name": "status",
+      "field_type": [
+        "1"
+      ],
+      "field_default_value": "active",
+      "field_enum": "active/expired/loading/scanned",
+      "field_desc_zh": "二维码状态",
+      "field_desc_en": "QR code status",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-05-29 13:15:26",
+      "update_time": "2025-05-29 13:15:26",
+      "event_output": null,
+      "custom_field_type": "QRStatus【type QRStatus = \"active\" | \"expired\" | \"loading\" | \"scanned\"】",
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "String"
+      ]
+    },
+    {
+      "id": 1748524815,
+      "platform_framework": [
+        "1",
+        "2",
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "QrCode",
+      "field_category": 1,
+      "field_name": "statusRender",
+      "field_type": [
+        "64"
+      ],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "自定义状态渲染器",
+      "field_desc_en": "Custom state renderer",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-05-29 13:20:15",
+      "update_time": "2025-05-29 13:20:15",
+      "event_output": null,
+      "custom_field_type": "(info:StatusRenderInfo) => TNode【type StatusRenderInfo = {status:QRStatus;locale:string;onRefresh?: () => void;}】",
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "TNode"
+      ]
+    },
+    {
+      "id": 1748523474,
+      "platform_framework": [
+        "1",
+        "2",
+        "8",
+        "16"
+      ],
+      "component": "QrCode",
+      "field_category": 1,
+      "field_name": "type",
+      "field_type": [
+        "1"
+      ],
+      "field_default_value": "canvas",
+      "field_enum": "canvas/svg",
+      "field_desc_zh": "渲染类型",
+      "field_desc_en": "render type",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-05-29 12:57:54",
+      "update_time": "2025-05-29 12:57:54",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)"
+      ],
+      "field_type_text": [
+        "String"
+      ]
+    },
+    {
+      "id": 1748523228,
+      "platform_framework": [
+        "1",
+        "2",
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "QrCode",
+      "field_category": 1,
+      "field_name": "value",
+      "field_type": [
+        "1"
+      ],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "扫描后的文本",
+      "field_desc_en": "scanned text",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-05-29 12:53:48",
+      "update_time": "2025-05-29 12:53:48",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "String"
+      ]
+    },
+    {
+      "id": 1748524684,
+      "platform_framework": [
+        "1",
+        "2",
+        "8",
+        "16",
+        "64"
+      ],
+      "component": "QrCode",
+      "field_category": 2,
+      "field_name": "refresh",
+      "field_type": [
+        "32"
+      ],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "点击\"点击刷新\"的回调",
+      "field_desc_en": "Click the \"Click to refresh\" callback",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-05-29 13:18:04",
+      "update_time": "2025-05-29 13:18:04",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Events",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Vue(Mobile)",
+        "React(Mobile)",
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "Function"
+      ]
+    },
     {
       "id": 1419,
       "platform_framework": [
diff --git a/packages/scripts/map.json b/packages/scripts/map.json
index f18016f7..35a970e4 100644
--- a/packages/scripts/map.json
+++ b/packages/scripts/map.json
@@ -794,6 +794,10 @@
         "value": "Progress",
         "label": "进度条"
       },
+      {
+        "value": "QrCode",
+        "label": "二维码"
+      },
       {
         "value": "Radio",
         "label": "单选框"
diff --git a/packages/server/controllers/ComponentApi/const.ts b/packages/server/controllers/ComponentApi/const.ts
index 74ddc423..d164452e 100644
--- a/packages/server/controllers/ComponentApi/const.ts
+++ b/packages/server/controllers/ComponentApi/const.ts
@@ -350,6 +350,7 @@ export const COMPONENTS_PC: Array<MapItem> = [
     { value: 'WatermarkImage', label: '水印图片配置', type: 'TS' },
     { value: 'TypographyConfig', label: '排版全局配置', type: 'TS' },
     { value: 'AutoCompleteConfig', label: '自动填充全局配置', type: 'TS' },
+    { value: 'QrCode', label: '二维码' },
 ].sort((a, b) => a.value.localeCompare(b.value));
 
 export const COMPONENTS_MOBILE: Array<MapItem> = [
@@ -434,6 +435,7 @@ export const COMPONENTS_MOBILE: Array<MapItem> = [
     { value: 'ToastOptions', label: '轻提示插件参数', type: 'TS' },
     { value: 'Transition', label: '动画' },
     { value: 'Upload', label: '上传' },
+    { value: 'QrCode', label: '二维码' },
 ];
 
 export default {