@tdesign/uniapp 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -5,6 +5,17 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 0.8.1 `2026-04-09`
+
+### 🚀 Features
+
+- `Icon`: 新增 `divider-1`, `voice-wave` 和 `keyboard-1`  图标 @uyarn ([#4395](https://github.com/Tencent/tdesign-miniprogram/pull/4395))
+
+### 🐞 Bug Fixes
+
+- `Form`: 修复 `FormItem` 右侧箭头深色模式颜色错误 @anlyyao ([#4384](https://github.com/Tencent/tdesign-miniprogram/pull/4384))
+- `Rate`: 修复提示框层级不够被覆盖的问题 @liweijie0812 ([#4386](https://github.com/Tencent/tdesign-miniprogram/pull/4386))
+
 ## 🌈 0.8.0 `2026-03-23`
 
 ### 🚨 Breaking Changes

package/README.md

@@ -51,47 +51,37 @@ 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';
-```
+在 `main.ts` 中引入组件库样式：
 
-也可以引入 `rpx` 单位的 `less` 文件，该文件与 `tdesign-miniprogram` 完全一致。
+#### CLI 模式
 
 ```js
-// CLI 模式
-import '@tdesign/uniapp/common/style/theme/index.less';
+// Less（推荐，rpx 单位，与 tdesign-miniprogram 完全一致）
+import '@tdesign/uniapp/theme.less';
 
-// HBuilderX 模式
-// import './uni_modules/tdesign-uniapp/components/common/style/theme/index.less';
+// 或者引入编译后的 CSS 文件
+import '@tdesign/uniapp/theme.css';
 ```
 
-2. 在文件中使用
+#### HBuilderX 模式
 
-```html
-<template>
-  <t-loading />
-</template>
+```js
+// Less（推荐，rpx 单位，与 tdesign-miniprogram 完全一致）
+import './uni_modules/tdesign-uniapp/components/theme.less';
 
-<script lang="ts" setup>
-import TLoading from '@tdesign/uniapp/loading/loading.vue';
-</script>
+// 或者引入编译后的 CSS 文件
+import './uni_modules/tdesign-uniapp/components/theme.css';
 ```
 
-只提供按需导入方式，不支持全量导入（全量导入在小程序下有兼容性问题）。
+### 步骤二：注册组件
 
-## 自动导入
+#### 自动导入（推荐）
 
-在 `pages.json` 配置 [easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)，可实现自动导入。
+配置 [easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom) 后，无需手动引入组件即可直接在模板中使用，在 `pages.json` 中添加以下配置：
 
-### CLI 模式
-
-使用 CLI 模式，即使用 `node_modules` 下的 `@tdesign/uniapp` 时，配置如下。
+**CLI 模式**：使用 `node_modules` 下的 `@tdesign/uniapp` 时，配置如下。
 
 ```json
 {
@@ -103,9 +93,7 @@ import TLoading from '@tdesign/uniapp/loading/loading.vue';
 }
 ```
 
-### UNI_MODULES 模式
-
-使用 `uni_modules` 下的 `tdesign-uniapp` 时，配置如下。
+**HBuilderX 模式**：使用 `uni_modules` 下的 `tdesign-uniapp` 时，配置如下。
 
 ```json
 {
@@ -117,11 +105,33 @@ import TLoading from '@tdesign/uniapp/loading/loading.vue';
 }
 ```
 
-## 编辑器提示
+配置完成后，可以直接在模板中使用组件：
 
-安装注册 TDesign 之后，在开发项目时，可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。
+```html
+<template>
+  <t-loading />
+</template>
+```
+
+#### 手动导入
+
+如果不使用 easycom，也可以在 `<script>` 中手动导入组件：
+
+```html
+<template>
+  <t-loading />
+</template>
 
-推荐安装 [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 插件，并在项目的 `tsconfig.json` 的 `compilerOptions.types` 属性中增加 `@tdesign/uniapp/global`，即可实现提示效果。
+<script lang="ts" setup>
+import TLoading from '@tdesign/uniapp/loading/loading.vue';
+</script>
+```
+
+> 只提供按需导入方式，不支持全量导入（全量导入在小程序下有兼容性问题）。
+
+### 步骤三：配置编辑器提示（可选）
+
+推荐安装 [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 插件，并在项目的 `tsconfig.json` 的 `compilerOptions.types` 属性中增加 `@tdesign/uniapp/global`，即可在 VSCode 等主流编辑器中获得组件名及 API 的智能提示。
 
 ```json
 {
@@ -162,7 +172,6 @@ import TLoading from '@tdesign/uniapp/loading/loading.vue';
 | [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/action-sheet/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-action-sheet />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TActionSheet from '@tdesign/uniapp/action-sheet/action-sheet.vue';
@@ -40,7 +42,10 @@ import TActionSheet from '@tdesign/uniapp/action-sheet/action-sheet.vue';
 ### 支持指令调用
 
 ```javascript
-import ActionSheet, { ActionSheetTheme } from '@tdesign/uniapp/action-sheet/index';
+// ActionSheetPlugin 和 ActionSheet 均可使用
+import { ActionSheetPlugin, ActionSheetTheme } from '@tdesign/uniapp';
+// 或
+// import { ActionSheet, ActionSheetTheme } from '@tdesign/uniapp';
 
 // 指令调用不同于组件引用不需要传入visible
 const basicListOption: ActionSheetShowOption = {
@@ -61,7 +66,7 @@ const basicListOption: ActionSheetShowOption = {
   ],
 };
 
-const handler = ActionSheet.show(basicListOption);
+const handler = ActionSheetPlugin.show(basicListOption);
 ```
 
 指令调用的关闭如下

package/dist/avatar/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-avatar />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TAvatar from '@tdesign/uniapp/avatar/avatar.vue';

package/dist/back-top/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-back-top />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TBackTop from '@tdesign/uniapp/back-top/back-top.vue';

package/dist/badge/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-badge />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TBadge from '@tdesign/uniapp/badge/badge.vue';

package/dist/button/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-button />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TButton from '@tdesign/uniapp/button/button.vue';

package/dist/calendar/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-calendar />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TCalendar from '@tdesign/uniapp/calendar/calendar.vue';

package/dist/cascader/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-cascader />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TCascader from '@tdesign/uniapp/cascader/cascader.vue';

package/dist/cell/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-cell />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TCell from '@tdesign/uniapp/cell/cell.vue';

package/dist/checkbox/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-checkbox />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TCheckbox from '@tdesign/uniapp/checkbox/checkbox.vue';

package/dist/col/README.md

@@ -8,7 +8,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-col />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 
 ```js

package/dist/collapse/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-collapse />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TCollapse from '@tdesign/uniapp/collapse/collapse.vue';

package/dist/color-picker/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-color-picker />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TColorPicker from '@tdesign/uniapp/color-picker/color-picker.vue';

package/dist/common/common.ts

@@ -70,33 +70,149 @@ export type ExtractNonOnProps<T> = {
   [K in keyof T as K extends `on${string}` ? never : K]: T[K]
 };
 
+/**
+ * 邮箱校验选项
+ */
 export interface IsEmailOptions {
+  /**
+   * 是否允许显示名称格式，如 `Display Name <email>`
+   * @default false
+   */
   allow_display_name?: boolean;
+  /**
+   * 是否要求必须包含显示名称格式
+   * @default false
+   */
   require_display_name?: boolean;
+  /**
+   * 是否允许本地部分使用 UTF8 字符
+   * @default true
+   */
   allow_utf8_local_part?: boolean;
+  /**
+   * 是否要求域名包含顶级域名
+   * @default true
+   */
   require_tld?: boolean;
-  allow_ip_dot?: boolean;
-  domain_specific_validation?: boolean;
-  host_blacklist?: string[];
+  /**
+   * 是否忽略邮箱最大长度限制
+   * @default false
+   */
   ignore_max_length?: boolean;
+  /**
+   * 是否允许 IP 地址作为域名部分
+   * @default false
+   */
+  allow_ip_domain?: boolean;
+  /**
+   * 是否启用特定域名的额外校验（如 GMail 规则）
+   * @default false
+   */
+  domain_specific_validation?: boolean;
+  /**
+   * 是否允许下划线
+   * @default false
+   */
+  allow_underscores?: boolean;
+  /**
+   * 域名黑名单
+   */
+  host_blacklist?: Array<string | RegExp>;
+  /**
+   * 域名白名单
+   */
+  host_whitelist?: Array<string | RegExp>;
+  /**
+   * 拒绝包含指定字符的邮箱名
+   */
+  blacklisted_chars?: string;
 }
 
+/**
+ * URL 校验选项
+ */
 export interface IsURLOptions {
+  /**
+   * 允许的协议
+   * @default ['http','https','ftp']
+   */
   protocols?: string[];
+  /**
+   * 是否要求顶级域名
+   * @default true
+   */
   require_tld?: boolean;
+  /**
+   * 是否要求协议
+   * @default false
+   */
   require_protocol?: boolean;
+  /**
+   * 是否要求主机名
+   * @default true
+   */
   require_host?: boolean;
+  /**
+   * 是否要求端口
+   * @default false
+   */
   require_port?: boolean;
+  /**
+   * 是否要求有效协议
+   * @default true
+   */
   require_valid_protocol?: boolean;
+  /**
+   * 是否允许下划线
+   * @default false
+   */
   allow_underscores?: boolean;
-  host_whitelist?: (string | RegExp)[];
-  host_blacklist?: (string | RegExp)[];
+  /**
+   * 主机名白名单
+   */
+  host_whitelist?: Array<string | RegExp>;
+  /**
+   * 主机名黑名单
+   */
+  host_blacklist?: Array<string | RegExp>;
+  /**
+   * 是否允许末尾的点
+   * @default false
+   */
   allow_trailing_dot?: boolean;
+  /**
+   * 是否允许协议相对 URL
+   * @default false
+   */
   allow_protocol_relative_urls?: boolean;
+  /**
+   * 是否禁止认证信息
+   * @default false
+   */
   disallow_auth?: boolean;
+  /**
+   * 是否允许片段（hash）
+   * @default true
+   */
+  allow_fragments?: boolean;
+  /**
+   * 是否允许查询参数
+   * @default true
+   */
+  allow_query_components?: boolean;
+  /**
+   * 是否校验长度
+   * @default true
+   */
   validate_length?: boolean;
+  /**
+   * 最大允许长度
+   * @default 2084
+   */
+  max_allowed_length?: number | false;
 }
 
+
 /**
  * 通用全局类型
  * */

package/dist/common/src/index.js

@@ -1,4 +1,3 @@
-export * from './superComponent';
 export * from './flatTool';
 export * from './instantiationDecorator';
 export * from './control';