插入组件 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
配置示例
以上两项为插槽的通用配置,如插槽有其他配置项(例如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 组件。
此插槽需要新增以下配置项:
{
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),点击后右侧展示对应的组件内容。
此插槽需要新增以下配置项:
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
此插槽需要新增以下配置项:
{
slot: 'frp-create-provider', // 注入到创建Frp的选项卡
component: DemoPage, // 组件,
label: '插件扩展服务', // 选项卡名字
}
设置-基础设置下方卡片插槽
插槽名:settings-profile-bottom v1.4.3

设置-系统设置下方卡片插槽
插槽名:settings-daemon-bottom v1.4.5

