增加标签页功能

app/public/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4870215 */
-  src: url('iconfont.woff2?t=1742978562991') format('woff2'),
+  src: url('iconfont.woff2?t=1742992580860') format('woff2'),
-       url('iconfont.woff?t=1742978562991') format('woff'),
+       url('iconfont.woff?t=1742992580860') format('woff'),
-       url('iconfont.ttf?t=1742978562991') format('truetype');
+       url('iconfont.ttf?t=1742992580860') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-blank:before {
+  content: "\e602";
+}
+
+.icon-add:before {
+  content: "\e60c";
+}
+
+.icon-delete:before {
+  content: "\e672";
+}
+
 .icon-company:before {
   content: "\e6f5";
 }

app/src/components/main-panel/index.vue

@@ -3,12 +3,17 @@
 		<div class="tabs-container">
 			<span
 				class="tab"
-				v-for="(_, index) of tabs.content"
+				v-for="(tab, index) of tabs.content"
 				:key="index"
-			></span>
+			>
-			<span class="add-button"
+				<span :class="`iconfont ${tab.icon}`"></span>
+				<span>{{ tab.name }}</span>
+			</span>
+			<span
+				class="add-button iconfont icon-add"
 				@click="addNewTab"
-			></span>
+			>
+			</span>
 		</div>
 		<div class="main-panel">
 			<router-view />
@@ -27,7 +32,6 @@ defineComponent({ name: 'main-panel' });
 
 .main-panel-container {
 	display: flex;
-	align-items: center;
 	justify-content: center;
 	flex-direction: column;
 	width: 100%;
@@ -54,6 +58,13 @@ defineComponent({ name: 'main-panel' });
 
 .tabs-container .tab {
 	margin: 5px;
+	border-radius: .5em;
+	background-color: var(--sidebar);
+	padding: 10px;
+}
+
+.tabs-container .tab .iconfont {
+	margin-right: 10px;
 }
 
 .tabs-container .add-button {
@@ -62,4 +73,23 @@ defineComponent({ name: 'main-panel' });
 	border-radius: .5em;
 }
 
+.tabs-container .add-button {
+	cursor: pointer;
+	font-size: 20px;
+	margin-left: 5px;
+	border-radius: .5em;
+	height: 35px;
+	width: 35px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: var(--animation-3s);
+}
+
+.tabs-container .add-button:hover {
+	color: var(--main-color);
+	background-color: var(--sidebar);
+	transition: var(--animation-3s);
+}
+
 </style>

app/src/components/main-panel/panel.ts

@@ -1,11 +1,15 @@
 import { reactive } from 'vue';
 
 export const tabs = reactive({
-	content: [],
+	content: [
-
+		{
+			name: '空白的测试',
+			icon: 'icon-blank',
+			type: 'blank'
+		}
+	],
 });
 
 export function addNewTab() {
 	console.log();
-	
 }

app/src/hook/css.ts

@@ -7,7 +7,7 @@ export function setDefaultCss() {
     document.body.style.setProperty('--el-color-primary-light-3', 'var(--main-color)');
     document.body.style.setProperty('--el-text-color-secondary', 'var(--foreground)');
     document.body.style.setProperty('--el-text-color-regular', 'var(--foreground)');
-    document.body.style.setProperty('--el-border-color', 'var(--main-color)');
+    document.body.style.setProperty('--el-border-color', 'var(--vscode-input-border)');
     document.body.style.setProperty('--el-fill-color-blank', 'var(--sidebar)');
     document.body.style.setProperty('--el-fill-color-light', 'var(--vscode-button-hoverBackground)');
     document.body.style.setProperty('--el-switch-on-color', 'var(--main-color)');

app/src/views/connect/connection.ts

@@ -18,6 +18,23 @@ export const connectionCommand = reactive({
 	commandString: ''
 });
 
+export interface EnvItem {
+	key: string
+	value: string
+}
+
+export interface IConnectionEnv {
+	data: EnvItem[]
+	newKey: string
+	newValue: string
+}
+
+export const connectionEnv = reactive<IConnectionEnv>({
+	data: [],
+	newKey: '',
+	newValue: ''
+});
+
 export function onconnectionmethodchange() {
 	console.log();
 	

app/src/views/connect/index.vue

@@ -3,47 +3,105 @@
 		<div class="connection-option">
 			<span>{{ t('connection-method') }}</span>
 			<span style="width: 200px;">
-				<el-select name="language-setting" class="language-setting"
+				<el-select name="language-setting" class="language-setting" v-model="connectionMethods.current"
-					v-model="connectionMethods.current"
+					@change="onconnectionmethodchange">
-					@change="onconnectionmethodchange"
+					<el-option v-for="option in connectionMethods.data" :value="option.value" :label="option.label"
-				>
+						:key="option.label"></el-option>
-					<el-option v-for="option in connectionMethods.data"
-						:value="option.value"
-						:label="option.label"
-						:key="option.label"
-					></el-option>
 				</el-select>
 			</span>
 		</div>
 
 		<div class="connection-option">
 			<span>{{ t('command') }}</span>
-			<span
+			<span style="width: 310px;">
-				style="width: 300px;"
-			>
 				<el-input v-model="connectionCommand.commandString"></el-input>
 			</span>
 		</div>
 
 		<div class="connection-option">
 			<span>{{ t('env-var') }}</span>
-			
+			<div class="input-env">
+				<span class="input-env-container">
+					<span>
+						<el-input v-model="connectionEnv.newKey" @keyup.enter="addEnvVar"></el-input>
+					</span>
+					<span>
+						<el-input v-model="connectionEnv.newValue" @keyup.enter="addEnvVar"></el-input>
+					</span>
+					<span>
+						<div @click="addEnvVar">
+							<span class="iconfont icon-add"></span>
+						</div>
+					</span>
+				</span>
+
+			</div>
+			<el-scrollbar height="200px" width="350px" class="display-env-container">
+				<div class="display-env">
+					<div class="input-env-container" v-for="option of connectionEnv.data" :key="option.key">
+						<span> <el-input v-model="option.key"></el-input></span>
+						<span> <el-input v-model="option.value" show-password></el-input></span>
+						<span @click="deleteEnvVar(option)">
+							<span class="iconfont icon-delete"></span>
+						</span>
+					</div>
+				</div>
+			</el-scrollbar>
 		</div>
 
-
+		<div class="connect-action">
-
+			<el-button type="primary" size="large">
+				Connect
+			</el-button>
+		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { defineComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { connectionCommand, connectionMethods, onconnectionmethodchange } from './connection';
+import { connectionCommand, connectionEnv, connectionMethods, EnvItem, onconnectionmethodchange } from './connection';
 
 defineComponent({ name: 'connect' });
 
 const { t } = useI18n();
 
+
+/**
+ * @description 添加环境变量
+ */
+function addEnvVar() {
+	// 检查是否存在一样的 key
+	const currentKey = connectionEnv.newKey;
+	const currentValue = connectionEnv.newValue;
+
+	if (currentKey.length === 0 || currentValue.length === 0) {
+		return;
+	}
+
+	const sameNameItems = connectionEnv.data.filter(item => item.key === currentKey);
+
+	if (sameNameItems.length > 0) {
+		const conflictItem = sameNameItems[0];
+		conflictItem.value = currentValue;
+	} else {
+		connectionEnv.data.push({
+			key: currentKey, value: currentValue
+		});
+		connectionEnv.newKey = '';
+		connectionEnv.newValue = '';
+	}
+}
+
+/**
+ * @description 删除环境变量
+ */
+function deleteEnvVar(option: EnvItem) {
+	const currentKey = option.key;
+	const reserveItems = connectionEnv.data.filter(item => item.key !== currentKey);
+	connectionEnv.data = reserveItems;
+}
+
 </script>
 
 <style>
@@ -51,16 +109,59 @@ const { t } = useI18n();
 	display: flex;
 	flex-direction: column;
 	width: 60%;
-	padding: 50px 60px;
+	padding: 20px;
 }
 
 .connection-option {
 	display: flex;
 	flex-direction: column;
+	background-color: var(--background);
+	padding: 10px;
 	margin-bottom: 20px;
+	border-radius: .5em;
 }
 
-.connection-option > span:first-child {
+.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>