> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comfy.org/llms.txt
> Use this file to discover all available pages before exploring further.

# 前端扩展的 PrimeVue 移除迁移

> 在 ComfyUI 前端移除 PrimeVue 之后，替换 $primevue、PrimeVue 组件、--p-* CSS 变量和 PrimeVue 工具提示选择器。

ComfyUI 前端不再安装 PrimeVue。宿主应用不会调用
`app.use(PrimeVue)`，因此扩展会失去它们可能曾依赖的三项内容：

* 宿主 Vue 应用上的 `$primevue` 全局属性；
* PrimeVue 主题样式表，因此扩展在宿主应用中渲染的 PrimeVue 组件会呈现为无样式状态；以及
* 所有全局 `--p-*` CSS 变量，例如 `--p-primary-color`、
  `--p-surface-*`、`--p-text-color`、`--p-content-background` 和
  `--p-form-field-border-color`。

## 渲染 PrimeVue 组件的扩展

不要依赖宿主应用的 PrimeVue 实例。你可以用自己编写的标记替换 PrimeVue 组件，也可以为你的 UI 创建一个自己的 Vue 应用，并在该应用上安装 PrimeVue 及其主题。

## 读取 `--p-*` 变量的扩展

请将它们替换为设计系统主题变量，这些变量会随当前的浅色或深色主题以及当前的色彩主题变化：

| PrimeVue 变量 | 主题变量 |
| - | - |
| `--p-primary-color` | `--primary` |
| `--p-text-color` | `--foreground` |
| `--p-text-muted-color` | `--muted-foreground` |
| `--p-content-background` | `--background` |
| `--p-surface-*`（面板、浮层区域） | `--secondary` |
| `--p-content-border-color`、`--p-form-field-border-color` | `--border` |

## 工具提示

全局 `v-tooltip` 指令已被移除，工具提示不再渲染 PrimeVue DOM：

* `.p-tooltip` 和 `.p-tooltip-text`
* `data-pd-tooltip` 属性
* `$_ptooltip*` 元素属性

处于打开状态的工具提示现在会渲染一个带有 `data-slot="tooltip-content"` 的元素，并通过 portal 挂载到 `document.body` 末尾。它仅在工具提示打开期间存在。如果扩展要在自己的 UI 中隐藏工具提示，应定位 `[data-slot="tooltip-content"]`，而不是 `.p-tooltip`。

`--node-component-tooltip*` CSS 变量也已从设计系统样式表中移除。请改用主题变量：`--background`、`--foreground` 和 `--border`。旧名称 `--base-background`、`--base-foreground` 和 `--border-default` 已弃用；请参阅[已弃用的变量名](#弃用的变量名称)。

## 弃用的变量名称

这些说明的早期版本使用了旧的设计系统名称。它们仍然可用，但已弃用，并将在未来版本中移除。现在请改用以下主题变量：

| 弃用名称 | 主题变量 |
| - | - |
| `--base-background` | `--background` |
| `--base-foreground` | `--foreground` |
| `--border-default` | `--border` |
| `--primary-background` | `--primary` |
| `--secondary-background` | `--secondary` |
| `--component-node-background` | `--node` |

PrimeIcons 仍会加载，因此现有的 `pi pi-*` 图标类仍可继续使用，但它们正在被逐步淘汰。请勿新增使用。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.