125 lines
2.4 KiB
Vue
125 lines
2.4 KiB
Vue
<template>
|
|
<div class="connection-container">
|
|
<div class="connect-panel-container">
|
|
<ConnectionMethod></ConnectionMethod>
|
|
<ConnectionArgs></ConnectionArgs>
|
|
<EnvVar></EnvVar>
|
|
|
|
<div class="connect-action">
|
|
<el-button type="primary" size="large" :loading="isLoading" :disabled="!connectionResult"
|
|
@click="suitableConnect()">
|
|
<span class="iconfont icon-connect" v-if="!isLoading"></span>
|
|
{{ t('connect.appearance.connect') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connect-panel-container">
|
|
<ConnectionLog></ConnectionLog>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineComponent, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
import { connectionResult, doConnect, launchConnect } from './connection';
|
|
|
|
import ConnectionMethod from './connection-method.vue';
|
|
import ConnectionArgs from './connection-args.vue';
|
|
import EnvVar from './env-var.vue';
|
|
|
|
import ConnectionLog from './connection-log.vue';
|
|
|
|
import { acquireVsCodeApi } from '@/api/message-bridge';
|
|
|
|
defineComponent({ name: 'connect' });
|
|
|
|
const isLoading = ref(false);
|
|
|
|
async function suitableConnect() {
|
|
isLoading.value = true;
|
|
|
|
if (acquireVsCodeApi === undefined) {
|
|
await doConnect();
|
|
} else {
|
|
await launchConnect({ updateCommandString: false });
|
|
}
|
|
|
|
isLoading.value = false;
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.connection-container {
|
|
display: flex;
|
|
}
|
|
|
|
|
|
.connect-panel-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 45%;
|
|
min-width: 300px;
|
|
padding: 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> |