插入组件 v1.4.3+

约 1243 字大约 4 分钟

2026-05-13

概述

使用插槽注入自定义组件时，请尽量让您的设计样式和原页面保持一致。

MSLX 的插件系统允许您在原有页面的一些槽位新增组件/插入下拉菜单，效果如下：

新增的组件注入均在插件的入口文件中导出的 pluginConfig 集合中的 extensions 数组。

具体示例可参考 mslx-plugin-demo 插件的插件入口示例：mslx-plugin-demo/Frontend/src/pluginEntry.ts at main · MSLTeam/mslx-plugin-demo

本文档将展示所有支持的插槽。其中徽章指示代表该插槽支持的最低MSLX SDK版本。Version

配置示例

Name:extensions[i].slot

必填

string

插槽名字（见本文档）

Name:extensions[i].component

必填

string

嵌入的组件（需要在上方import）

以上两项为插槽的通用配置，如插槽有其他配置项（例如label）,会在下方文档补充说明。

    extensions: [
        {
            slot: 'instance-console-dropdown', // 注入到实例控制台更多功能的下拉菜单
            component: InstanceDropDownItemInject, // 弹窗组件
            label: '插件弹窗', // 下拉子菜单名
            icon: GitBranchIcon, // 下拉子菜单Icon
        },
        {
            slot: 'instance-console-overview-bottom', // 注入到实例控制台玩家卡片下方
            component: InstanceCardInject, // 组件
        }
    ]

服务端管理-实例控制台-更多功能菜单插槽

插槽名：instance-console-dropdown v1.4.3

在此页面的更多功能下拉菜单处新增一个菜单项，点击该菜单应该新显示一个 t-dialog 组件。

此插槽需要新增以下配置项：

Name:extensions[i].label

必填

string

新增的下拉菜单的名字

Name:extensions[i].icon

必填

component

嵌入的图标组件（需要是TDesign的图标组件）

        {
            slot: 'instance-console-dropdown', // 注入到实例控制台更多功能的下拉菜单
            component: InstanceDropDownItemInject, // 弹窗组件
            label: '插件弹窗', // 下拉子菜单名
            icon: GitBranchIcon, // 下拉子菜单Icon
        },

此外，为了能正常触发t-dialog的显示，需要在插入的组件中暴露一个open方法给宿主。

// 暴露接口给宿主
defineExpose({
  open: () => {
    console.log('👉 [插件内部] open 方法被成功触发！');
    visible.value = true; // 显示弹窗
  }
});

可接收props：

const props = defineProps({
  serverId: Number
});

简单的弹窗组件示例在这里：mslx-plugin-demo/Frontend/src/views/InstanceDropDownItemInject.vue at main · MSLTeam/mslx-plugin-demo

服务端管理-实例控制台-左侧控制栏下方插槽

插槽名：instance-console-overview-bottom v1.4.3

可接收props：

const props = defineProps({
  serverId: {
    type: Number,
    required: true
  },
  status: {
    type: Number,
    default: 0
  }
});

示例插入组件：mslx-plugin-demo/Frontend/src/views/InstanceCardInject.vue at main · MSLTeam/mslx-plugin-demo

服务端管理-实例控制台-实例设置-更多功能插槽

插槽名：instance-setting-more v1.4.8

可接收props：

const props = defineProps({
  serverId: {
    type: Number,
    required: true
  }
});

服务端管理-实例控制台-实例设置-自定义选项卡插槽

插槽名：instance-settings-tab v1.6.4

在实例配置侧边栏最底部新增一个选项卡（Tab），点击后右侧展示对应的组件内容。

此插槽需要新增以下配置项：

Name:extensions[i].label

必填

string

新增选项卡的名称（显示在左侧菜单栏）

Name:extensions[i].icon

必填

component | string

选项卡的图标，支持传入 TDesign 的图标组件（如 SettingIcon）或 Emoji / 文本字符串（如 '🧩'）

        {
            slot: 'instance-settings-tab', // 注入到实例配置侧边栏选项卡
            component: InstanceSettingsPluginTab, // 选项卡内容组件
            label: '插件配置', // 选项卡名字
            icon: SettingIcon, // 选项卡图标，可使用 TDesign 图标组件或 Emoji 字符串
        },

可接收props：

const props = defineProps({
  serverId: {
    type: Number,
    required: true
  },
  instanceId: {
    type: Number,
    required: true
  }
});

支持触发的事件（Emits）：

const emits = defineEmits<{
  (e: 'success'): void;
  (e: 'saved'): void;
}>();

仪表盘-系统状态监控卡片下方插槽

插槽名：dashboard-index-after-system-status v1.4.3

隧道管理-隧道控制台-隧道信息下方插槽

插槽名：frp-console-control-panel-bottom v1.4.3

可接收props：

const props = defineProps({
  frpId: {
    type: Number,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
});

隧道管理-创建隧道-隧道服务商插槽

插槽名：frp-create-provider v1.4.4

此插槽需要新增以下配置项：

Name:extensions[i].label

必填

string

新增的隧道服务商名字（会显示在切换按钮）

        {
            slot: 'frp-create-provider', // 注入到创建Frp的选项卡
            component: DemoPage, // 组件,
            label: '插件扩展服务', // 选项卡名字
        }