前端UI组件小程序设计系统移动开发【免费下载链接】tdesign-miniprogramWechat MiniProgram and Uniapp UI components lib for TDesign项目地址https://gitcode.com/gh_mirrors/tde/tdesign-miniprogram点击查看免费下载ConfigProvider 是 TDesign UniApp 组件库中承担全局特性配置职责的容器组件它通过global-config与theme-vars两个核心入口把多语言文案、按钮文本、状态描述等通用配置集中收敛到一个组件上避免在每一个业务页面重复传入相同配置。本文以 ConfigProvider 英文文档 为骨架结合仓库内config-provider.vue、config-store.js、use-config.js等源码与_example示例完整讲解全部配置项、多语言机制、主题变量注入方式以及配置如何从 Provider 流动到各个组件的底层原理读者学完后可以直接在自己的 uni-app 项目中接入多语言与全局主题定制。ConfigProvider 是什么ConfigProvider 是一个只提供包裹 配置下发能力的容器组件本身不渲染业务 UI所有需要全局配置的子组件都要放在它的slot /内。它接受三类属性| name | type | default | description | required | | -- | -- | -- | -- | -- | | custom-style | Object | - | 自定义样式 | N | | global-config | Object | - | 全局配置。TS 类型GlobalConfigProvider| N | | theme-vars | Object | - | 主题变量用于覆盖组件库的 CSS 变量 | N |从 props.ts 可以看到组件对外暴露的属性定义globalConfig与themeVars均为Object类型export interface TdConfigProviderProps { globalConfig?: GlobalConfigProvider; themeVars?: object; }引入方式推荐在pages.json中开启 easycom 模式后直接在模板中使用t-config-provider /无需手动 import。需要手动引入时import TConfigProvider from tdesign/uniapp/config-provider/config-provider.vue;组件默认渲染一个view容器并将global-config/theme-vars的能力作用于其内部的所有子组件含组件库内任意需要多语言/主题的组件。国际化一次性切换整棵子树的语言ConfigProvider 的global-config最常见的用途是国际化。仓库内置了 8 套语言包位于 locale 目录语言对应文件简体中文zh_CN.ts繁体中文zh_TW.ts英语en_US.ts韩语ko_KR.ts日语ja_JP.ts俄语ru_RU.ts意大利语it_IT.ts阿拉伯语ar_KW.ts最简用法是直接传入整个语言包对象t-config-provider :global-configglobalConfig t-cell arrow titleSingle select date clickhandleCalendar / t-rate :valuerateValue show-text / /t-config-providerimport enUS from tdesign/uniapp/locale/en_US; export default { data() { return { // 全部配置一次性切换整棵子树语言 globalConfig: enUS, }; }, };这是 other-en 示例 中的真实写法同一页面里的t-calendar、t-rate、t-date-time-picker会全部使用英文文案。从 locale/en_US.ts 可以看到英文语言包中calendar.confirm为Confirm、rate.valueText为{value} points等完整映射与 locale/zh_CN.ts 的中文映射一一对应。部分覆盖只改某几个文案global-config不需要传完整语言包。ConfigProvider 内部会按默认语言包 → 全局语言配置 → 组件自身 locale三级合并因此你可以只传想要覆盖的字段。例如只把上传组件的中文文案改为自定义内容globalConfig: { upload: { progress: { uploadingText: 正在上传请稍候…, waitingText: 排队中, failText: 上传出错了, successText: 完成, }, }, },合并逻辑对应 use-config.js 中的getComponentLocalereturn { ...defaultLocale, // 组件默认语言包zh_CN ...globalLocale, // ConfigProvider 注入的全局配置 ...componentLocale, // 组件自身通过 locale 属性传入的配置 };优先级从低到高为组件默认语言包 ConfigProvider 全局配置 组件自身 locale 属性。订阅机制语言切换后自动刷新ConfigProvider 内部通过发布订阅把语言变更推送给所有子组件详见下文实现原理子组件在订阅到变化后会重新执行文案合并并即时刷新界面因此切换globalConfig时无需重新渲染页面。主题变量用 theme-vars 覆盖组件库 CSS 变量theme-vars用于批量覆盖组件库的 CSS 变量TDesign 变量统一以--td-开头。传入的 key 支持三种写法对应 utils.js 的themeVarsToCSS转换规则以--开头视为标准 CSS 变量原样使用如--td-button-primary-bg-color: #ff6b00包含-kebab-case自动补上--td-前缀camelCase如buttonPrimaryBorderColor通过hyphenate工具转成 kebab-case 后补前缀即--td-button-primary-border-color。示例来自 chat-en 示例t-config-provider :global-configglobalConfig :theme-varsthemeVars t-chat-thinking ... / /t-config-providerthemeVars: { buttonPrimaryBorderColor: #ff6b00, button-primary-color: #ff6a00, button-primary-bg-color: #ff6a0094, },组件会把转换结果应用到自身根节点的style上cssVars由于子组件样式与 Provider 共享组件配置了styleIsolation: shared子组件内的var(--td-xxx)引用即可生效。实现原理ConfigStore 与响应式发布订阅ConfigProvider 的配置管理是一个模块级单例 config-store.js 中的ConfigStore配合 reactive-state.js 实现的ReactiveState基于Set监听器的简易发布-订阅把语言 主题变量做成全局响应式状态。ConfigProvider 生命周期内的配置下发在 config-provider.vue 中可以看到完整链路watch对themeVars与globalConfig开启deep: true深度监听任一变化都会触发updateConfig()mounted生成唯一iComponentIdDate.now() 随机串initStore()订阅configStore.currentLocale随后执行updateConfig()updateConfig若有globalConfig则调用configStore.switchLocale(globalConfig, iComponentId)若有themeVars则调用configStore.updateThemeVars(themeVars)最后applyTheme()生成 CSS 变量beforeUnmount取消订阅并调用configStore.resetPageState(iComponentId)释放该页面/组件的状态。同一页面多 Provider 的冲突策略ConfigStore.switchLocale通过pageInitFlags以组件 id 为 key 的Map实现首写优先同一个页面内先挂载的 ConfigProvider 设置的 locale 生效后挂载的 Provider 会通过deepEqual判断是否真的不同避免无意义覆盖与重复触发订阅所有 Provider 卸载后resetPageState会检查是否还有其他 locale Provider没有则把currentLocale重置为空对象避免状态残留。子组件如何拿到配置子组件侧统一使用 using-config.js mixin例如 rate.vue 中mixins: [usingConfig({ componentName })]。该 mixin 在created时调用useConfig(componentName)的subscribeLocale订阅语言变化变化后重新执行getComponentLocale合并出当前文案组件卸载时调用返回的unsubscribe清理监听。这就是切换语言即整树刷新的完整闭环。全局配置项全景GlobalConfigProvider 与各子配置global-config的结构由GlobalConfigProvider定义每个子组件占一个字段字段值是对应的子配置对象。以下为全部配置项完整类型定义见 type.ts。GlobalConfigProvider顶层字段| name | type | default | description | required | | -- | -- | -- | -- | -- | | action-sheet | Object | - | 动作面板全局配置。TS 类型ActionSheetConfig| N | | calendar | Object | - | 日历组件全局配置。TS 类型CalendarConfig| N | | cascader | Object | - | 级联选择器全局配置。TS 类型CascaderConfig| N | | class-prefix | String | t | CSS 类名前缀 | N | | date-time-picker | Object | - | 时间选择器全局配置。TS 类型DateTimePickerConfig| N | | dropdown-menu | Object | - | 下拉菜单全局配置。TS 类型DropdownMenuConfig| N | | guide | Object | - | 引导全局配置。TS 类型GuideConfig| N | | picker | Object | - | 选择器全局配置。TS 类型PickerConfig| N | | pull-down-refresh | Object | - | 下拉刷新全局配置。TS 类型PullDownRefreshConfig| N | | qrcode | Object | - | 二维码全局配置。TS 类型QRCodeConfig| N | | rate | Object | - | 评分全局配置。TS 类型RateConfig| N | | tab-bar | Object | - | 标签栏全局配置。TS 类型TabBarConfig| N | | upload | Object | - | 上传组件全局配置。TS 类型UploadConfig| N |class-prefix默认值t与 common/config.js 中prefix: t一致组件实际类名形如t-config-provider。弹层类组件的按钮文案ActionSheetConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | cancel | String | - | 语言配置取消按钮描述文本 | N |PickerConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | cancel | String | - | 语言配置取消按钮描述文本 | N | | confirm | String | - | 语言配置确认按钮描述文本 | N |DropdownMenuConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | confirm | String | - | 语言配置确定按钮描述文本 | N | | reset | String | - | 语言配置重置按钮描述文本 | N |DateTimePickerConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | cancel | String | - | 语言配置取消按钮描述文本 | N | | confirm | String | - | 语言配置确定按钮描述文本 | N | | date-label | String | - | 语言配置日描述文本 | N | | format | String | YYYY-MM-DD HH:mm:ss | 日期格式化规则 | N | | hour-label | String | - | 语言配置时描述文本 | N | | minute-label | String | - | 语言配置分描述文本 | N | | month-label | String | - | 语言配置月描述文本 | N | | second-label | String | - | 语言配置秒描述文本 | N | | title | String | - | 语言配置组件标题选择时间描述文本 | N | | year-label | String | - | 语言配置年描述文本 | N |CalendarConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | confirm | String | - | 语言配置确定按钮描述文本 | N | | month-title | String | - | 语言配置日期月面板标题描述文本。示例{year} / {month} | N | | months | Array | - | 月文本描述默认值[1 月, 2 月, …, 12 月]。TS 类型string[]| N | | title | String | - | 语言配置组件标题请选择日期描述文本 | N | | weekdays | Array | - | 星期文本描述默认值[日, 一, …, 六]。TS 类型string[]| N |CascaderConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | placeholder | String | - | 语言配置未选中时的提示文案选择选项描述文本 | N | | title | String | - | 语言配置组件标题选择地址描述文本 | N |GuideConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | back | String | - | 语言配置返回描述文本 | N | | finish | String | - | 语言配置完成描述文本 | N | | next | String | - | 语言配置下一步描述文本 | N | | skip | String | - | 语言配置跳过描述文本 | N |状态与进度类文案UploadConfig / UploadConfigProgress| name | type | default | description | required | | -- | -- | -- | -- | -- | | progress | Object | - | 语言配置上传进度相关。示例{ uploadText: 上传中, waitingText: 待上传, failText: 上传失败, successText: 上传成功 }。TS 类型UploadConfigProgress| N || name | type | default | description | required | | -- | -- | -- | -- | -- | | fail-text | String | - | 语言配置上传失败文本描述 | N | | success-text | String | - | 语言配置上传成功文本描述 | N | | uploading-text | String | - | 语言配置上传中文本描述 | N | | waiting-text | String | - | 语言配置待上传文本描述 | N |AttachmentsConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | status | Object | - | 语言配置附件上传状态描述文本。TS 类型{ pending: string; fail: string; }| N |QRCodeConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | expired-text | String | - | 语言配置二维码过期描述文本 | N | | refresh-text | String | - | 语言配置点击刷新描述文本 | N | | scanned-text | String | - | 语言配置已扫描描述文本 | N |PullDownRefreshConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | loading-texts | Array | - | 提示文本描述默认值[下拉刷新, 松手刷新, 正在刷新, 刷新完成]。TS 类型string[]| N |RateConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | no-value-text | String | - | 语言配置未评分描述文本 | N | | value-text | String | - | 语言配置评分值描述文本。示例{value} 分 | N |表单、输入与图片FormConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | colon-text | String | - | 字段旁边的冒号中文为 | N | | error-message | Object | - | 表单错误信息配置示例{ idcard: 请输入正确的身份证号码, max: 字符长度不能超过 ${max} }。TS 类型FormErrorMessage详见 Form API 文档 与 type.ts 中 FormErrorMessage 定义 | N | | required-mark | Boolean | true | 是否显示必填符号默认显示 | N | | required-mark-position | String | left | 表单必填符号显示位置。可选项left/right | N |InputConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | placeholder | String | - | 语言配置请输入占位符描述文本 | N |ImageConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | error-text | String | - | 图片加载失败显示的文本中文默认为图片无法显示 | N | | loading-text | String | - | 图片加载中显示的文本中文默认为图片加载中 | N | | replace-image-src | Function | - | 统一替换图片src地址参数为组件的全部属性返回值为新的图片地址。TS 类型(params: ImageProps) string详见 Image API 文档 | N |replaceImageSrc适合做 CDN 域名迁移、防盗链加参、灰度切图等场景——只需在全局配置里写一个函数所有t-image的src都会被统一改写无需逐处修改。标签栏无障碍与聊天组件文案TabBarConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | have-more-news-aria-label | String | - | 语言配置有 n 条新的消息描述文本。示例有 {value} 条消息 | N | | have-news-aria-label | String | - | 语言配置有 n 条新的消息描述文本。示例有 {value} 条消息 | N | | more-news-aria-label | String | - | 语言配置有很多消息描述文本 | N | | news-aria-label | String | - | 语言配置有新的消息描述文本 | N |ChatActionbarConfig / ChatSenderConfig / ChatThinkingConfig| name | type | default | description | required | | -- | -- | -- | -- | -- | | action-bar | Object | - | 语言配置对话操作栏描述文本。TS 类型{ replay: string; copy: string; good: string; bad: string; share: string; quote: string; }| N || name | type | default | description | required | | -- | -- | -- | -- | -- | | placeholder | String | - | 语言配置占位符描述文本 | N | | send-text | String | - | 语言配置发送按钮描述文本 | N | | stop-text | String | - | 语言配置停止发送按钮描述文本 | N || name | type | default | description | required | | -- | -- | -- | -- | -- | | status | Object | - | 语言配置思考状态描述文本。TS 类型{ pending: string; complete: string; stop: string; }| N |tdesign/uniapp-chat与tdesign/uniapp复用同一个config-provider见 chat-en 示例因此聊天组件chat-thinking、chat-sender、chat-actionbar等的文案也可以统一纳入这套全局配置体系。完整可运行的配置示例结合仓库中的 upload-en 示例 与 other-en 示例一个同时使用语言包与主题变量的完整示例为t-config-provider :global-configglobalConfig :theme-varsthemeVars t-upload :media-type[video, image] :filesoriginFiles / t-rate :valuerateValue show-text changeonRateChange / t-cell arrow titleSingle select date clickshowCalendar / t-date-time-picker :visibledateVisible modedate formatYYYY-MM-DD / /t-config-providerimport TConfigProvider from tdesign/uniapp/config-provider/config-provider.vue; import enUS from tdesign/uniapp/locale/en_US; export default { components: { TConfigProvider }, data() { return { globalConfig: enUS, themeVars: { // 三种 key 写法皆可camelCase / kebab-case / 原生 -- 前缀 buttonPrimaryBorderColor: #ff6b00, button-primary-bg-color: #ff6a0094, }, }; }, };从源码看配置的消费链路组件侧ConfigProvider 只是配置的提供方真正读取配置的是各业务组件。以 rate.vue 为例组件通过usingConfig({ componentName })混入配置能力mixin 在created阶段调用useConfig(componentName)的subscribeLocale订阅configStore.currentLocale语言变更时mixin 调用getComponentLocale按默认语言包 → 全局配置 → 组件自身 locale的顺序合并文案并写入globalConfig组件模板与逻辑如 computed.js 中的getText(texts, val, globalConfig)从globalConfig读取最终文案。因此任何新组件接入这套体系的成本很低只需要按约定声明componentName并在语言包中登记对应字段即可自动获得 ConfigProvider 提供的多语言与全局覆盖能力。小结配置收敛global-config把散落在各页面的文案配置统一到一个t-config-provider子组件通过发布订阅自动感知变更国际化开箱即用内置 8 种语言包支持整体切换与单字段覆盖三级合并优先级清晰主题定制theme-vars以--td-前缀的 CSS 变量注入兼容 camelCase / kebab-case / 原生变量三种写法机制透明ConfigStoreReactiveState的单例响应式实现、页面级首写优先冲突策略与卸载清理逻辑保证了多 Provider 场景下的行为可预期。如需深入了解各配置字段的完整 TS 定义可直接阅读 config-provider/type.ts该文件是全部配置接口的权威类型来源。赞分享前端UI组件小程序设计系统移动开发【免费下载链接】tdesign-miniprogramWechat MiniProgram and Uniapp UI components lib for TDesign项目地址https://gitcode.com/gh_mirrors/tde/tdesign-miniprogram点击查看免费下载相关推荐tdesign-miniprogram ConfigProvider 全局配置与国际化实战指南tdesign miniprogram ConfigProvider 全局配置与国际化实战指南 导读 本文以 tdesign miniprogram 中 con前端UI组件小程序设计系统移动开发Arco Design ConfigProvider 全局配置完全指南国际化、主题、组件默认参数与 RTL 布局Arco Design ConfigProvider 全局配置完全指南国际化、主题、组件默认参数与 RTL 布局 导读 ConfigProvider 是 ArUI组件前端设计系统TDesign Uniapp Calendar 日历组件全解析API 配置、事件体系与源码实现原理TDesign Uniapp Calendar 日历组件全解析API 配置、事件体系与源码实现原理 本文以 TDesign 开源仓库中 packages/un前端UI组件小程序设计系统移动开发创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考