增加虚拟网IP复制按钮，优化界面表现 #2

pages/index.vue

@@ -32,7 +32,7 @@
 					</ElButton>
 					<div
 						v-else
-						class="flex-1 truncate leading-[1em]"
+						class="flex-1 truncate !leading-[1em]"
 					>
 						<ElTooltip :content="`内核版本:${data.coreVersion}(不是软件的版本)`">
 							<ElTag
@@ -107,7 +107,7 @@
 						</p>
 						<div class="ml-auto flex-shrink-0">
 							<ElButton
-								@click.stop="copyServerUrl(item)"
+								@click.stop="copyText(item)"
 								circle
 								size="small"
 								title="复制"
@@ -186,33 +186,49 @@
 				label="局域网IP"
 			>
 				<template #label>
-					<div class="flex h-[20px] items-center">
+					<div class="flex h-[20px] items-center gap-[3px]">
 						虚拟网IP
+						<ElButton
+							@click.stop="handleCopyIp"
+							type="primary"
+							text
+							size="small"
+							title="复制IP"
+							:icon="CopyDocument"
+						></ElButton>
+						<ElSwitch
+							v-model="config.dhcp"
+							inline-prompt
+							inactive-text="固定IP"
+							active-text="动态获取"
+							size="small"
+						></ElSwitch>
 						<ElTooltip content="对应命令行参数 --ipv4">
 							<ElIcon><QuestionFilled /></ElIcon>
 						</ElTooltip>
-						<ElSwitch
-							v-model="config.dhcp"
-							class="ml-[5px]"
-							inline-prompt
-							inactive-text="固定IP"
-							active-text="动态获取IP"
-							size="small"
-						></ElSwitch>
 					</div>
 				</template>
 				<ElInput
 					maxlength="100"
-					:disabled="config.dhcp"
+					:readonly="config.dhcp"
 					:placeholder="data.isStart && config.dhcp ? '等待动态分配IP...' : '例如: 10.126.126.1'"
 					v-model="config.ipv4"
-				></ElInput>
+				>
+					<template #prefix>
+						<ElTag
+							size="small"
+							:type="config.dhcp ? 'info' : 'success'"
+						>
+							{{ config.dhcp ? "只读" : "可填" }}
+						</ElTag>
+					</template>
+				</ElInput>
 			</ElFormItem>
 		</div>
 	</ElForm>
 	<div class="mt-auto flex items-start">
 		<div>
-			<div>
+			<div class="pt-[4px]">
 				<ElDropdown
 					@command="handleStartCommand"
 					split-button
@@ -264,7 +280,7 @@
 					</template>
 				</ElDropdown>
 			</div>
-			<div class="mt-[6px] pl-[2px]">
+			<div class="mt-[10px] pl-[2px]">
 				<ElTooltip
 					placement="left"
 					content="日志"
@@ -567,7 +583,7 @@
 	import { updateConfigJson } from "~/composables/configJson";
 	import { writeText, readText } from "@tauri-apps/plugin-clipboard-manager";
 	import { sortedUniq, uniq } from "lodash-es";
-	import { bounce, addQQGroup, supportProtocols, preventSleep, stopPreventSleep, ATJ } from "~/utils";
+	import { bounce, addQQGroup, supportProtocols, preventSleep, stopPreventSleep, ATJ, copyText } from "~/utils";
 	import { ElConfirmDanger, ElConfirmPrimary } from "~/utils/element";
 	import { getServerArgs } from "@/composables/server";
 
@@ -592,7 +608,7 @@
 	const config = mainStore.config;
 	// console.error(config);
 	const protocols = supportProtocols();
-	const data = reactive<{ [key: string]: any; releaseList: Array<Array<string>> }>({
+	const data = reactive({
 		hasNewVersion: false, //easytierGame有没有新版
 		logVisible: false,
 		cidrVisible: false,
@@ -605,7 +621,7 @@
 		log: "",
 		serverLog: "", //服务端日志
 		update: false,
-		releaseList: [],
+		releaseList: [[]],
 		coreVersion: "-",
 		isSuccessGetIp: false,
 		startLoading: false,
@@ -632,17 +648,6 @@
 		data: ""
 	});
 
-	const copyServerUrl = async (serverUrl: string) => {
-		const [err, _] = await ATJ(writeText(serverUrl));
-
-		if (!err) {
-			ElMessage.success("地址已复制");
-		} else {
-			console.error(err);
-			ElMessage.success("复制失败");
-		}
-	};
-
 	const closePrevent = async () => {
 		const appWindow = getCurrentWindow();
 		if (appWindow.label == "main") {
@@ -657,6 +662,15 @@
 		}
 	};
 
+	const handleCopyIp = async () => {
+		if (!config.ipv4?.trim()) return;
+		if (data.isStart || !config.dhcp) {
+			await copyText(mainStore.config.ipv4);
+		} else {
+			await copyText(mainStore.config.ipv4, "复制成功,联机后IP可能会变化");
+		}
+	};
+
 	const handleOpenCache = async () => {
 		const cache_path = import.meta.env.VITE_CACHE_PATH;
 		const resourceDir = await getResourceDir();
@@ -917,7 +931,7 @@
 				// console.log(el, el[0], el[2]);
 				return el && el[0] && el[2] && !el[2].includes("gui");
 			})
-		];
+		] as any;
 		coreManagementData.loading = false;
 		// console.log(data.releaseList);
 	};
@@ -1350,7 +1364,6 @@
 				console.error(err);
 				ElMessage.error("分享失败");
 			}
-			
 		}
 		if (command === "import_config") {
 			importConfigData.data = "";

utils/index.ts

@@ -1,5 +1,7 @@
 import { invoke } from "@tauri-apps/api/core";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { open } from "@tauri-apps/plugin-shell";
+import { ElMessage } from "element-plus";
 export const ENV = import.meta.env;
 
 //防抖
@@ -51,8 +53,8 @@ export const numRemoveZero = (num: Number) => {
 // await-to-js
 export const ATJ = (promise: Promise<any>, errorExt: string | undefined = undefined) => {
 	return promise
-		.then((data) => [null, data])
+		.then(data => [null, data])
-		.catch((err) => {
+		.catch(err => {
 			if (errorExt) {
 				if (typeof errorExt !== "object") {
 					return [errorExt, undefined];
@@ -69,26 +71,26 @@ const _supportProtocols = ["tcp", "udp", "ws", "wss", "quic"];
 
 export const supportProtocols = () => {
 	return _supportProtocols.slice();
-}
+};
 
-let _prevent_timer: NodeJS.Timeout| null = null;
+let _prevent_timer: NodeJS.Timeout | null = null;
 let _prevent_timer_count = 15; // 秒
 export const preventSleep = () => {
 	_prevent_timer && clearInterval(_prevent_timer);
 	_prevent_timer = setInterval(async () => {
-	    const result = await invoke('prevent_sleep');
+		const result = await invoke("prevent_sleep");
 		// console.log(`trigger prevent sleep ${result}`);
 	}, _prevent_timer_count * 1000);
-}
+};
 
 export const stopPreventSleep = async () => {
 	_prevent_timer && clearInterval(_prevent_timer);
 	_prevent_timer = null;
-	const _result = await invoke('allow_sleep');
+	const _result = await invoke("allow_sleep");
-}
+};
 
 export const parseCliInfo = (content: string) => {
-	if(!content) return [];
+	if (!content) return [];
 	// 将表格字符串分割成行
 	const lines = content.split("\n");
 
@@ -96,7 +98,7 @@ export const parseCliInfo = (content: string) => {
 	const headers = lines[1]
 		.split("│")
 		.slice(1, -1)
-		.map((h) => h.trim());
+		.map(h => h.trim());
 
 	// 初始化结果数组
 	const result: any[] = [];
@@ -109,7 +111,7 @@ export const parseCliInfo = (content: string) => {
 		const values = lines[i]
 			.split("│")
 			.slice(1, -1)
-			.map((v) => v.trim());
+			.map(v => v.trim());
 
 		// 创建对象并添加到结果数组
 		const obj: any = {};
@@ -134,3 +136,14 @@ export function isValidIP(ip: string) {
 	const ipv6Pattern = /^(?:[A-Fa-f0-9]{1,4}:){7}[A-Fa-f0-9]{1,4}$/;
 	return ipv4Pattern.test(ip) || ipv6Pattern.test(ip);
 }
+
+export const copyText = async (text: string, message: string = "复制成功") => {
+	const [err, _] = await ATJ(writeText(text));
+
+	if (!err) {
+		ElMessage.success(message);
+	} else {
+		console.error(err);
+		ElMessage.success("复制失败");
+	}
+};