fix(loading): 修复 LoadingPlugin 无法获取 ConfigProvider 自定义 classPrefix 的问题

[Copilot]

🤔 这个 PR 的性质是？

• 日常 bug 修复
• 新特性提交
• 文档改进
• 演示代码改进
• 组件样式/交互改进
• CI/CD 改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他

🔗 相关 Issue

• 修复 [LoadingPlugin] 按需引入的场景下，通过函数式调用时，无法获取ConfigProvider修改的classPrefix #6178

💡 需求背景和解决方案

问题描述： 在按需引入场景下，通过函数式调用 LoadingPlugin 时，无法获取 ConfigProvider 修改的 classPrefix。部分 loading 相关 DOM 元素（如 loading__parent--relative、loading--lock）使用默认的 t- 前缀，而不是用户自定义的前缀。

根本原因：

1. 在 plugin.tsx 中，usePrefixClass 在组件 setup 上下文外被调用
2. 当在 setup 内调用但组件不是 ConfigProvider 的子组件时（因为插件创建的组件在独立的 DOM 树中渲染），inject() 返回 null，然后回退到 defaultGlobalConfig 而不是 globalConfigCopy

解决方案：

1. useConfig.ts: 当 inject() 返回 null 时，回退到 globalConfigCopy（而不仅仅是在组件上下文外）
2. plugin.tsx: 将 usePrefixClass 调用移到组件 setup 函数内部，以便正确访问 appContext

// 修改前: inject 失败时回退到 defaultGlobalConfig
const injectGlobalConfig = getCurrentInstance() ? inject(configProviderInjectKey, null) : globalConfigCopy;

// 修改后: inject 返回 null 时回退到 globalConfigCopy
if (getCurrentInstance()) {
  injectGlobalConfig = inject(configProviderInjectKey, null);
  if (!injectGlobalConfig) {
    injectGlobalConfig = globalConfigCopy;
  }
} else {
  injectGlobalConfig = globalConfigCopy;
}

📝 更新日志

• 本条 PR 不需要纳入 Changelog

tdesign-vue-next

• fix(loading): 修复按需引入场景下 LoadingPlugin 无法获取 ConfigProvider 自定义 classPrefix 的问题

@tdesign-vue-next/chat

@tdesign-vue-next/auto-import-resolver

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• Changelog 已提供或无须提供

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[LoadingPlugin] 按需引入的场景下，通过函数式调用时，无法获取ConfigProvider修改的classPrefix</issue_title>
<issue_description>### tdesign-vue-next 版本

1.16.0

重现链接

No response

重现步骤

vite.config.js:
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
less: {
modifyVars: {
"@Prefix": "r",
},
javascriptEnabled: true,
},
},
},
});

App.vue:

<script setup> import { ConfigProvider } from "tdesign-vue-next/esm"; import Home from "./Home.vue"; </script>

Home.Vue:

<script setup> import { ref, h, onMounted } from "vue"; import { LoadingPlugin } from "tdesign-vue-next/esm"; import Loading from "./assets/loading.gif"; const menuRef = ref(null); onMounted(() => { LoadingPlugin({ attach: () => menuRef.value, indicator: () => h("img", { src: Loading, style: { width: "50px" } }), }); }); </script>

期望结果

loading相关dom的class前缀均以r-开头

实际结果

仅部分以r-开头，具体dom如下：

框架版本

Vue(3.5.24)

浏览器版本

Chrome(142.0.7444.176)

系统版本

Windows(x64)

Node版本

22.16.0

补充说明

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [LoadingPlugin] 按需引入的场景下，通过函数式调用时，无法获取ConfigProvider修改的classPrefix #6178

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Wesley-0808]

@copilot 按照pr模版 完善pr的描述信息

[Wesley-0808]

@copilot pr描述请用中文

[Copilot]

@copilot 按照pr模版 完善pr的描述信息

已按照 PR 模版完善描述信息，包括问题描述、根本原因分析、解决方案和更新日志。

[Copilot]

@copilot pr描述请用中文

已将 PR 描述更新为中文。

[pkg-pr-new]

tdesign-vue-next-demo

npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/auto-import-resolver@6212

npm i https://pkg.pr.new/Tencent/tdesign-vue-next@6212

npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/chat@6212

commit: 681bb4e

[tdesign-bot]

TDesign Component Site Preview Open

Component	Preview
tdesign-vue-next
@tdesign-vue-next/chat