开发预览更新于 2026-05-10

PluginPane 插件面板

Card / Manifest / Permission / Marketplace 4 个 tab 的插件中心面板。

基础用法

预定义 4 个 tab（id：card、manifest、permission、marketplace），每个 tab 内容由消费方通过 named slot #panel-{tabId}（Vue）/ slots["panel-{tabId}"]（React）填入。也可通过 tabs prop 覆盖默认列表。

来源：plugins.html。

背景

PluginCard 列表 / 网格视图。

<script setup lang="ts">
import { CfPluginPane } from '@chufix-design/vue';
</script>

<template>
  <div style="height: 280px;">
    <CfPluginPane>
      <template #panel-card><p style="color: var(--fg-2);">PluginCard 列表 / 网格视图。</p></template>
      <template #panel-manifest><pre style="font-family: var(--font-mono); font-size: 11px;">{
  "name": "@chufix-design/plugin-foo",
  "version": "1.0.0",
  "permissions": ["read:requests"]
}</pre></template>
      <template #panel-permission><p style="color: var(--fg-2);">权限申请对话框（CfConfirmDialog 派生）。</p></template>
      <template #panel-marketplace><p style="color: var(--fg-2);">插件市场搜索 + 列表 + 详情。</p></template>
    </CfPluginPane>
  </div>
</template>

<script setup>
import { CfPluginPane } from '@chufix-design/vue';
</script>

<template>
  <div style="height: 280px;">
    <CfPluginPane>
      <template #panel-card><p style="color: var(--fg-2);">PluginCard 列表 / 网格视图。</p></template>
      <template #panel-manifest><pre style="font-family: var(--font-mono); font-size: 11px;">{
  "name": "@chufix-design/plugin-foo",
  "version": "1.0.0",
  "permissions": ["read:requests"]
}</pre></template>
      <template #panel-permission><p style="color: var(--fg-2);">权限申请对话框（CfConfirmDialog 派生）。</p></template>
      <template #panel-marketplace><p style="color: var(--fg-2);">插件市场搜索 + 列表 + 详情。</p></template>
    </CfPluginPane>
  </div>
</template>

<CfPluginPane slots={{
'panel-card': <PanelA />,
'panel-manifest': <PanelB />,
}} />

<CfPluginPane slots={{
'panel-card': <PanelA />,
'panel-manifest': <PanelB />,
}} />

API

属性	类型	默认值	说明
`modelValue` / `value`	`string`	第一个 tab id	活动 tab
`tabs`	`TemplatePaneTab[]`	预设	自定义 tab 列表
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

预设的 tab id 列表导出为 PROTOCOL_TABS / NETWORK_TABS / SQL_TABS 等常量，可在自定义 tabs 时直接拿来用。

模版组件本质是 CfTabs 的语义薄壳。如果你不需要一组预定义 tab，直接用 CfTabs 即可。