151 lines
2.9 KiB
Vue
151 lines
2.9 KiB
Vue
<template>
|
|
<el-scrollbar>
|
|
<div class="connection-container">
|
|
<div class="connect-panel-container left"
|
|
:ref="el => client.connectionSettingRef = el"
|
|
>
|
|
<ConnectionMethod :index="props.index" />
|
|
<ConnectionArgs :index="props.index" />
|
|
<ConnectionEnvironment :index="props.index" />
|
|
|
|
<div class="connect-action">
|
|
<el-button type="primary" size="large" :loading="isLoading" :disabled="!client.connectionResult"
|
|
@click="connect()">
|
|
<span class="iconfont icon-connect" v-if="!isLoading"></span>
|
|
{{ t('connect.appearance.connect') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connect-panel-container right"
|
|
:ref="el => client.connectionLogRef = el"
|
|
>
|
|
<ConnectionLog :index="props.index" />
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, defineComponent, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import ConnectionMethod from './connection-method.vue';
|
|
import ConnectionArgs from './connection-args.vue';
|
|
import ConnectionEnvironment from './connection-environment.vue';
|
|
import ConnectionLog from './connection-log.vue';
|
|
|
|
import { getPlatform } from '@/api/platform';
|
|
import { mcpClientAdapter } from './core';
|
|
|
|
defineComponent({ name: 'connection-panel' });
|
|
|
|
const props = defineProps({
|
|
index: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const client = computed(() => mcpClientAdapter.clients[props.index]);
|
|
|
|
const { t } = useI18n();
|
|
|
|
const isLoading = ref(false);
|
|
|
|
async function connect() {
|
|
isLoading.value = true;
|
|
|
|
const platform = getPlatform();
|
|
const ok = await client.value.connect();
|
|
|
|
if (ok) {
|
|
mcpClientAdapter.saveLaunchSignature();
|
|
}
|
|
|
|
isLoading.value = false;
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.connection-container {
|
|
display: flex;
|
|
}
|
|
|
|
|
|
.connect-panel-container.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 45%;
|
|
max-height: 85vh;
|
|
max-width: 500px;
|
|
min-width: 350px;
|
|
padding: 5px 20px;
|
|
}
|
|
|
|
.connect-panel-container.right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 55%;
|
|
max-height: 85vh;
|
|
min-width: 450px;
|
|
padding: 5px 20px;
|
|
}
|
|
|
|
|
|
.connection-option {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--background);
|
|
padding: 10px;
|
|
margin-bottom: 20px;
|
|
border-radius: .5em;
|
|
border: 1px solid var(--background);
|
|
}
|
|
|
|
.connection-option>span:first-child {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.input-env-container {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.display-env {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.input-env-container>span {
|
|
width: 150px;
|
|
margin-right: 10px;
|
|
display: flex;
|
|
height: 30px;
|
|
align-items: center;
|
|
}
|
|
|
|
.input-env-container .iconfont {
|
|
font-size: 20px;
|
|
border-radius: 99em;
|
|
color: var(--foreground);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: var(--animation-3s);
|
|
user-select: none;
|
|
}
|
|
|
|
.input-env-container .iconfont:hover {
|
|
color: var(--main-color);
|
|
transition: var(--animation-3s);
|
|
}
|
|
|
|
.connect-action {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
}
|
|
</style> |