@tdesign/uniapp 0.7.2 → 0.7.3

package/CHANGELOG.md

@@ -5,6 +5,14 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 0.7.3 `2026-03-04`
+
+### 🐞 Bug Fixes
+
+- `Button`: 去除多余动画效果 @novlan1 ([#4305](https://github.com/Tencent/tdesign-miniprogram/pull/4305))
+- `Dialog`: 修复确认/取消按钮不显示问题 @novlan1 ([#4305](https://github.com/Tencent/tdesign-miniprogram/pull/4305))
+- `Theme`: 修复 `index.css` 尺寸值错误的问题 @liweijie0812 ([#4290](https://github.com/Tencent/tdesign-miniprogram/pull/4290))
+
 ## 🌈 0.7.2 `2026-02-26`
 
 ### 🚀 Features

package/README.md

@@ -54,13 +54,21 @@ npm i @tdesign/uniapp
 1. 在 `main.ts` 中引入样式文件
 
 ```js
+// CLI 模式
 import '@tdesign/uniapp/common/style/theme/index.css';
+
+// HBuilderX 模式
+// import './uni_modules/tdesign-uniapp/components/common/style/theme/index.css';
 ```
 
 也可以引入 `rpx` 单位的 `less` 文件，该文件与 `tdesign-miniprogram` 完全一致。
 
 ```js
+// CLI 模式
 import '@tdesign/uniapp/common/style/theme/index.less';
+
+// HBuilderX 模式
+// import './uni_modules/tdesign-uniapp/components/common/style/theme/index.less';
 ```
 
 2. 在文件中使用
@@ -113,7 +121,17 @@ import TLoading from '@tdesign/uniapp/loading/loading.vue';
 
 安装注册 TDesign 之后，在开发项目时，可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。
 
-推荐安装 `Volar`，并在项目的 `tsconfig.json` 的 `includes` 属性中增加 `node_modules/@tdesign/uniapp/global.d.ts`，即可实现该效果。
+推荐安装 [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 插件，并在项目的 `tsconfig.json` 的 `compilerOptions.types` 属性中增加 `@tdesign/uniapp/global`，即可实现提示效果。
+
+```json
+{
+  "compilerOptions": {
+    "types": [
+      "@tdesign/uniapp/global",
+    ]
+  }
+}
+```
 
 ## 平台兼容性
 
@@ -133,6 +151,18 @@ import TLoading from '@tdesign/uniapp/loading/loading.vue';
 
 详情参见[移动端组件库浏览器兼容性说明](https://github.com/Tencent/tdesign/wiki/Browser-Compatibility)
 
+## 模板项目
+
+我们提供了多种开箱即用的模板项目，帮助你快速开始开发。
+
+| 模板 | 描述 | 预览 |
+| --- | --- | --- |
+| [TDesign UniApp Starter](https://github.com/TDesignOteam/tdesign-uniapp-starter/) | Vue3 + CLI 模式模板 - 通用类 | <img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-h5.png" height="100" /> |
+| [TDesign UniApp Starter Apply](https://github.com/TDesignOteam/tdesign-uniapp-starter-apply/) | Vue3 + CLI 模式模板 - 活动报名 | <img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-apply-h5.png" height="100" /> |
+| [TDesign UniApp Starter Vue3 HX](https://github.com/TDesignOteam/tdesign-uniapp-starter-vue3-hx/) | Vue3 + HBuilderX 模式模板 | <img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-vue3-hx-h5.png" height="100" /> |
+| [TDesign UniApp Starter Vue2 CLI](https://github.com/TDesignOteam/tdesign-uniapp-starter-vue2-cli/) | Vue2 + CLI 模式模板 | <img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-vue2-cli-h5.png" height="100" /> |
+| [TDesign UniApp Starter Vue2 HX](https://github.com/TDesignOteam/tdesign-uniapp-starter-vue2-hx/) | Vue2 + HBuilderX 模式模板 |<img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-vue2-hx-h5.png" height="100" /> |
+
 ## 反馈
 
 有任何问题，建议通过 [Github issues](https://github.com/Tencent/tdesign-miniprogram/issues) 反馈或扫码加入用户微信群。

package/dist/button/button.vue

@@ -161,7 +161,7 @@ export default uniComponent({
     loading: 'setClass',
     variant: 'setClass',
   },
-  mounted() {
+  created() {
     this.setClass();
   },
   methods: {

package/dist/checkbox/README.en-US.md

@@ -15,7 +15,7 @@ default-checked | Boolean | - | uncontrolled property | N
 content | String | - | \- | N
 content-disabled | Boolean | - | \- | N
 disabled | Boolean | undefined | \- | N
-icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
+icon | String / Array | 'circle' | Typescript: `CheckboxIconType` `type CheckboxIconType = 'circle' \| 'line' \| 'rectangle' \| string[];`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox/type.ts) | N
 indeterminate | Boolean | false | \- | N
 label | String | - | \- | N
 max-content-row | Number | 5 | \- | N
@@ -24,7 +24,7 @@ name | String | - | \- | N
 placement | String | left | options: left/right | N
 readonly | Boolean | undefined | \- | N
 relation-key | String | - | \- | N
-value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N
+value | String / Number / Boolean | - | value of checkbox。Typescript: `string \| number \| boolean` | N
 
 ### Checkbox Events
 
@@ -58,14 +58,14 @@ name | type | default | description | required
 custom-style | Object | - | CSS(Cascading Style Sheets) | N
 borderless | Boolean | false | \- | N
 disabled | Boolean | undefined | \- | N
-keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+keys | Object | - | Typescript: `KeysType`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts) | N
 max | Number | undefined | \- | N
 name | String | - | \- | N
-options | Array | [] | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
+options | Array | [] | Typescript: `Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean;icon?:CheckboxIconType; checkAll?: true }`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
 readonly | Boolean | undefined | \- | N
 relation-key | String | - | \- | N
-value | Array | - | `v-model:value` is supported。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
-default-value | Array | - | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
+value | Array | - | `v-model:value` is supported。Typescript: `T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
+default-value | Array | - | uncontrolled property。Typescript: `T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
 
 ### CheckboxGroup Events
 

package/dist/checkbox/README.md

@@ -70,7 +70,7 @@ default-checked | Boolean | - | 是否选中。非受控属性 | N
 content | String | - | 多选框内容 | N
 content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
 disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N
-icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`CheckboxIconType` `type CheckboxIconType = 'circle' \| 'line' \| 'rectangle' \| string[];`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox/type.ts) | N
 indeterminate | Boolean | false | 是否为半选 | N
 label | String | - | 主文案 | N
 max-content-row | Number | 5 | 内容最大行数限制 | N
@@ -113,14 +113,14 @@ t-class-label | 标签样式类
 custom-style | Object | - | 自定义样式 | N
 borderless | Boolean | false | 是否开启无边框模式。优先级低于 Checkbox.borderless | N
 disabled | Boolean | undefined | 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N
-keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts) | N
 max | Number | undefined | 支持最多选中的数量 | N
 name | String | - | 统一设置内部复选框 HTML 属性 | N
-options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
+options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean;icon?:CheckboxIconType; checkAll?: true }`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
 readonly | Boolean | undefined | 只读状态 | N
 relation-key | String | - | -1 时代表独立，不再寻找 parent，用于头条小程序 | N
-value | Array | - | 选中值。支持语法糖 `v-model:value`。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
-default-value | Array | - | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
+value | Array | - | 选中值。支持语法糖 `v-model:value`。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
+default-value | Array | - | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
 
 ### CheckboxGroup Events
 

package/dist/checkbox/type.ts

@@ -43,7 +43,7 @@ export interface TdCheckboxProps {
    * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标
    * @default 'circle'
    */
-  icon?: 'circle' | 'line' | 'rectangle' | string[];
+  icon?: CheckboxIconType;
   /**
    * 是否为半选
    * @default false
@@ -94,3 +94,5 @@ export interface TdCheckboxProps {
     context: { value: boolean | number | string; label: boolean | number | string };
   }) => void;
 }
+
+export type CheckboxIconType = 'circle' | 'line' | 'rectangle' | string[];

package/dist/checkbox-group/type.ts

@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import type { CheckboxIconType } from '../checkbox/type';
 import type { KeysType } from '../common/common';
 
 export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
@@ -66,6 +67,7 @@ export interface CheckboxOptionObj {
   label?: string;
   value?: string | number;
   disabled?: boolean;
+  icon?: CheckboxIconType;
   checkAll?: true;
 }
 

package/dist/common/style/theme/index.css

@@ -144,9 +144,10 @@
     --td-component-border: var(--td-gray-color-4);
 
     --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
-    --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
-    --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%),
-      0 8px 10px -5px rgba(0, 0, 0, 8%);
+    --td-shadow-2:
+      0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
+    --td-shadow-3:
+      0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
     --td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
 
     --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
@@ -162,7 +163,6 @@
   }
 }
 
-
 /* ./raw/_dark.less */
 @media (prefers-color-scheme: dark) {
   /* #ifdef H5 */
@@ -324,7 +324,6 @@
   }
 }
 
-
 /* ./raw/_radius.less */
 page,
 .page {
@@ -336,54 +335,53 @@ page,
   --td-radius-circle: 50%;
 }
 
-
 /* ./raw/_font.less */
 page,
 .page {
   --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
   --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
 
-  --td-font-size-link-small: 48px;
-  --td-font-size-link-medium: 56px;
-  --td-font-size-link-large: 64px;
-  --td-font-size-mark-extraSmall: 40px;
-  --td-font-size-mark-small: 48px;
-  --td-font-size-mark-medium: 56px;
-  --td-font-size-mark-large: 64px;
-  --td-font-size-body-extraSmall: 40px;
-  --td-font-size-body-small: 48px;
-  --td-font-size-body-medium: 56px;
-  --td-font-size-body-large: 64px;
-  --td-font-size-title-small: 56px;
-  --td-font-size-title-medium: 64px;
-  --td-font-size-title-large: 72px;
-  --td-font-size-title-extraLarge: 80px;
-  --td-font-size-headline-small: 96px;
-  --td-font-size-headline-medium: 112px;
-  --td-font-size-headline-large: 144px;
-  --td-font-size-display-medium: 192px;
-  --td-font-size-display-large: 256px;
-
-  --td-line-height-link-small: 80px;
-  --td-line-height-link-medium: 88px;
-  --td-line-height-link-large: 96px;
-  --td-line-height-mark-extraSmall: 64px;
-  --td-line-height-mark-small: 80px;
-  --td-line-height-mark-medium: 88px;
-  --td-line-height-mark-large: 96px;
-  --td-line-height-body-extraSmall: 64px;
-  --td-line-height-body-small: 80px;
-  --td-line-height-body-medium: 88px;
-  --td-line-height-body-large: 96px;
-  --td-line-height-title-small: 88px;
-  --td-line-height-title-medium: 96px;
-  --td-line-height-title-large: 104px;
-  --td-line-height-title-extraLarge: 112px;
-  --td-line-height-headline-small: 128px;
-  --td-line-height-headline-medium: 144px;
-  --td-line-height-headline-large: 176px;
-  --td-line-height-display-medium: 224px;
-  --td-line-height-display-large: 288px;
+  --td-font-size-link-small: 12px;
+  --td-font-size-link-medium: 14px;
+  --td-font-size-link-large: 16px;
+  --td-font-size-mark-extraSmall: 10px;
+  --td-font-size-mark-small: 12px;
+  --td-font-size-mark-medium: 14px;
+  --td-font-size-mark-large: 16px;
+  --td-font-size-body-extraSmall: 10px;
+  --td-font-size-body-small: 12px;
+  --td-font-size-body-medium: 14px;
+  --td-font-size-body-large: 16px;
+  --td-font-size-title-small: 14px;
+  --td-font-size-title-medium: 16px;
+  --td-font-size-title-large: 18px;
+  --td-font-size-title-extraLarge: 20px;
+  --td-font-size-headline-small: 24px;
+  --td-font-size-headline-medium: 28px;
+  --td-font-size-headline-large: 36px;
+  --td-font-size-display-medium: 48px;
+  --td-font-size-display-large: 64px;
+
+  --td-line-height-link-small: 20px;
+  --td-line-height-link-medium: 22px;
+  --td-line-height-link-large: 24px;
+  --td-line-height-mark-extraSmall: 16px;
+  --td-line-height-mark-small: 20px;
+  --td-line-height-mark-medium: 22px;
+  --td-line-height-mark-large: 24px;
+  --td-line-height-body-extraSmall: 16px;
+  --td-line-height-body-small: 20px;
+  --td-line-height-body-medium: 22px;
+  --td-line-height-body-large: 24px;
+  --td-line-height-title-small: 22px;
+  --td-line-height-title-medium: 24px;
+  --td-line-height-title-large: 26px;
+  --td-line-height-title-extraLarge: 28px;
+  --td-line-height-headline-small: 32px;
+  --td-line-height-headline-medium: 36px;
+  --td-line-height-headline-large: 44px;
+  --td-line-height-display-medium: 56px;
+  --td-line-height-display-large: 72px;
 
   --td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
   --td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
@@ -425,20 +423,18 @@ page,
   --td-font-size-xxl: var(--td-font-size-headline-large);
 }
 
-
 /* ./raw/_spacer.less */
 page,
 .page {
-  --td-spacer: 32px;
-  --td-spacer-1: 48px;
-  --td-spacer-2: 64px;
-  --td-spacer-3: 96px;
-  --td-spacer-4: 128px;
-  --td-spacer-5: 192px;
-  --td-spacer-6: 320px;
+  --td-spacer: 8px;
+  --td-spacer-1: 12px;
+  --td-spacer-2: 16px;
+  --td-spacer-3: 24px;
+  --td-spacer-4: 32px;
+  --td-spacer-5: 48px;
+  --td-spacer-6: 80px;
 }
 
-
 /* ./raw/_components.less */
 @media (prefers-color-scheme: light) {
   page,

package/dist/dialog/dialog.vue

@@ -222,7 +222,7 @@ import TButton from '../button/button';
 import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
 import props from './props';
-import { toCamel, coalesce } from '../common/utils';
+import { toCamel, coalesce, toPascal } from '../common/utils';
 import { isObject } from '../common/validator';
 import useCustomNavbar from '../mixins/using-custom-navbar';
 import tools from '../common/utils.wxs';
@@ -320,13 +320,14 @@ export default uniComponent({
         if (key === 'cancel' && rect.buttonVariant === 'base') {
           base.theme = 'light';
         }
+        const parsedKey = `inner${toPascal(key)}`;
 
         if (typeof btn === 'string') {
-          rect[`_${key}`] = { ...base, content: btn };
+          rect[`${parsedKey}`] = { ...base, content: btn };
         } else if (btn && typeof btn === 'object') {
-          rect[`_${key}`] = { ...base, ...btn };
+          rect[`${parsedKey}`] = { ...base, ...btn };
         } else {
-          rect[`_${key}`] = null;
+          rect[`${parsedKey}`] = null;
         }
       });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tdesign/uniapp",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "id": "tdesign-uniapp",
   "title": "tdesign-uniapp",
   "description": "TDesign Component for UniApp",
@@ -32,8 +32,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "typings": "./dist/types/index.d.ts",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     "./*": "./dist/*",
+    "./global": "./global.d.ts",
     "./action-sheet/action-sheet.vue": {
       "types": "./dist/types/action-sheet.d.ts",
       "import": "./dist/action-sheet/action-sheet.vue",