托盘图标增加主题切换功能，调整成员列表延迟至前方，增加nat类型查看，修复自定义网卡无法保存信息的问题

app.vue

@@ -4,4 +4,9 @@
 	</NuxtLayout>
 </template>
 <script setup lang="ts">
+	import useMainStore from "@/stores/index";
+	import { initTheme } from "@/composables/theme";
+	const mainStore = useMainStore();
+	// console.log(mainStore.theme)
+	initTheme(mainStore.theme);
 </script>

assets/css/main.css

@@ -1,14 +1,14 @@
-@tailwind base;
+/* @tailwind base; */
 
 /*
 	用于进行主题更换，如果要更换elemenet-plus-ui的主题记得加上!important，不然更换会失败
 */
 
-@layer base {
+/* @layer base {
 	html {
 		font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", STHeiti, "Microsoft YaHei";
 	}
-}
+} */
 
 html,
 body {
@@ -19,11 +19,16 @@ body {
 * {
 	outline: none;
 }
+body {
+	background-color: #fff;
+}
+html.dark body {
+	background-color: #000;
+}
 
 #__easytier {
 	height: 100%;
 	overflow: hidden;
-	background-color: #fff;
 	box-sizing: border-box;
 	padding: 3px 5px;
 }

composables/theme.ts

@@ -0,0 +1,21 @@
+import { useDark, useToggle, usePreferredDark } from "@vueuse/core";
+import { isFunction } from "lodash-es";
+// const isDark = usePreferredDark();
+const darkConfig = useDark({
+	selector: "html",
+	attribute: "class",
+	valueDark: "dark",
+	valueLight: "",
+});
+const toggleDark = useToggle(darkConfig);
+export const initTheme = (isDark: boolean) => {
+	if (isDark && isFunction(toggleDark)) {
+		toggleDark(isDark);
+	}
+};
+
+export const setTheme = (dark: boolean) => {
+    if (isFunction(toggleDark)) {
+		toggleDark(dark);
+	}
+}

composables/tray.ts

@@ -2,6 +2,8 @@ import { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { TrayIcon } from "@tauri-apps/api/tray";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import pkg from "@/package.json";
+import { setTheme } from "~/composables/theme";
+import useMainStore from "@/stores/index";
 
 const DEFAULT_TRAY_NAME = "main";
 
@@ -20,16 +22,16 @@ export async function useTray(init: boolean = false, beforExit: Function) {
 		tray = await TrayIcon.getById(DEFAULT_TRAY_NAME);
 		if (!tray) {
 			tray = await TrayIcon.new({
-				tooltip: `EasyTier\n${pkg.version}`,
-				title: `EasyTier\n${pkg.version}`,
+				tooltip: `EasyTierGame\n${pkg.version}`,
+				title: `EasyTierGame\n${pkg.version}`,
 				id: DEFAULT_TRAY_NAME,
 				menu: await Menu.new({
 					id: "main",
-					items: await generateMenuItem(beforExit)
+					items: await generateMenuItem(beforExit),
 				}),
-				action: async e => {
+				action: async (e) => {
 					toggleVisibility();
-				}
+				},
 			});
 		}
 	} catch (error) {
@@ -38,12 +40,12 @@ export async function useTray(init: boolean = false, beforExit: Function) {
 	}
 
 	if (init) {
-		tray.setTooltip(`EasyTier\n${pkg.version}`);
+		tray.setTooltip(`EasyTierGame\n${pkg.version}`);
 		tray.setMenuOnLeftClick(false);
 		tray.setMenu(
 			await Menu.new({
 				id: "main",
-				items: await generateMenuItem(beforExit)
+				items: await generateMenuItem(beforExit),
 			})
 		);
 	}
@@ -52,7 +54,12 @@ export async function useTray(init: boolean = false, beforExit: Function) {
 }
 
 export async function generateMenuItem(beforExit: Function) {
-	return [await MenuItemExit("退出", beforExit), await PredefinedMenuItem.new({ item: "Separator" }), await MenuItemShow("显示 / 隐藏")];
+	return [
+		await MenuItemShow("显示 / 隐藏"),
+		await MenuItemTheme(),
+		await PredefinedMenuItem.new({ item: "Separator" }),
+		await MenuItemExit("退出", beforExit),
+	];
 }
 
 export async function MenuItemExit(text: string, beforExit: Function) {
@@ -64,7 +71,7 @@ export async function MenuItemExit(text: string, beforExit: Function) {
 				await beforExit();
 			}
 			await getCurrentWindow().close();
-		}
+		},
 	});
 }
 
@@ -74,7 +81,21 @@ export async function MenuItemShow(text: string) {
 		text,
 		action: async () => {
 			await toggleVisibility();
-		}
+		},
+	});
+}
+
+export async function MenuItemTheme() {
+	return await MenuItem.new({
+		id: "theme",
+		text: "主题切换",
+		action: async () => {
+			const mainStore = useMainStore();
+			mainStore.theme = !mainStore.theme;
+			// const appWindow = getCurrentWindow();
+			// appWindow.emitTo("main", "config", { theme: mainStore.theme });
+			await setTheme(mainStore.theme);
+		},
 	});
 }
 
@@ -98,8 +119,8 @@ export async function setTrayRunState(tray: TrayIcon | null, isRunning: boolean
 export async function setTrayTooltip(tray: TrayIcon | null, tooltip?: string | null) {
 	if (!tray) return;
 	if (tooltip) {
-		await tray.setTooltip(`EasyTier\n${pkg.version}\n${tooltip}`);
+		await tray.setTooltip(`EasyTierGame\n${pkg.version}\n${tooltip}`);
 	} else {
-		await tray.setTooltip(`EasyTier\n${pkg.version}`);
+		await tray.setTooltip(`EasyTierGame\n${pkg.version}`);
 	}
 }

nuxt.config.ts

@@ -22,7 +22,7 @@ export default defineNuxtConfig({
 		autoImport: false
 	},
 
-	css: ["~/assets/css/main.css"],
+	css: ["~/assets/css/main.css", 'element-plus/theme-chalk/dark/css-vars.css'],
 	modules: ["@element-plus/nuxt", "@pinia/nuxt", "@pinia-plugin-persistedstate/nuxt", "@nuxtjs/tailwindcss"],
 
 	alias: {

package.json

@@ -3,7 +3,7 @@
 	"private": true,
 	"author": "leizi97",
 	"description": "A simple network initiator based on Easytier",
-	"version": "1.1.0",
+	"version": "1.1.3",
 	"scripts": {
 		"dev": "nuxt dev --dotenv env/.env.dev --host 0.0.0.0",
 		"build": "nuxt generate --dotenv env/.env.prod"
@@ -23,6 +23,7 @@
 		"@types/lodash-es": "^4.17.12",
 		"@types/qs": "^6.9.15",
 		"@vitejs/plugin-vue-jsx": "^3.1.0",
+		"@vueuse/core": "^11.2.0",
 		"dayjs": "^1.11.10",
 		"defu": "^6.1.4",
 		"element-plus": "^2.8.6",

pages/advance.vue

@@ -1,11 +1,37 @@
 <template>
 	<div class="h-full overflow-auto flex flex-col items-start px-[25px]">
-		<div><ElCheckbox v-model="mainStore.config.coonectAfterStart">软件启动后，自动"启动联机"(搭配开机自启，无感联机)</ElCheckbox></div>
 		<div><ElCheckbox v-model="mainStore.config.disableIpv6">不使用IPv6</ElCheckbox></div>
+		<div class="flex items-center gap-[10px]">
+			<ElCheckbox v-model="mainStore.config.devName">自定义网卡名</ElCheckbox>
+			<ElInput maxlength="10" v-model="mainStore.config.devNameValue" placeholder="请输入网卡名"/>
+		</div>
 		<div><ElCheckbox v-model="mainStore.config.disbleListenner">不监听任何端口，只连接到对等节点</ElCheckbox></div>
+		<div><ElCheckbox v-model="mainStore.config.coonectAfterStart">软件启动后，自动"启动联机"(搭配开机自启，无感联机)</ElCheckbox></div>
+		<div class="flex items-center gap-[15px] flex-nowrap">
+			<ElCheckbox v-model="mainStore.config.saveErrorLog">输出日志到本地</ElCheckbox>
+			<div class="w-[140px]">
+				<ElSelect
+					v-model="mainStore.config.logLevel"
+					placeholder="请选择日志等级"
+					class="ml-[5px]">
+					<ElOption
+						v-for="item in data"
+						:key="item"
+						:label="`level - ${item}`"
+						:value="item"></ElOption>
+				</ElSelect>
+			</div>
+			<ElButton
+				@click="openLogDir"
+				size="small">
+				打开日志目录
+			</ElButton>
+		</div>
+		<ElDivider />
 		<div><ElCheckbox v-model="mainStore.config.enablExitNode">允许此节点成为出口节点</ElCheckbox></div>
 		<div><ElCheckbox v-model="mainStore.config.disableEncryption">禁用对等节点通信的加密，默认为false，必须与对等节点相同</ElCheckbox></div>
 		<div><ElCheckbox v-model="mainStore.config.multiThread">使用多线程运行时，默认为单线程</ElCheckbox></div>
+		<ElDivider />
 		<div><ElCheckbox v-model="mainStore.config.noTun">不创建TUN设备，可以使用子网代理访问节点</ElCheckbox></div>
 		<div><ElCheckbox v-model="mainStore.config.useSmoltcp">为子网代理启用smoltcp堆栈</ElCheckbox></div>
 		<div><ElCheckbox v-model="mainStore.config.latencyfirst">延迟优先模式，将尝试使用最低延迟路径转发流量，默认使用最短路径</ElCheckbox></div>
@@ -13,29 +39,6 @@
 		<div>
 			<ElCheckbox v-model="mainStore.config.relayAllPeerrpc">转发所有对等节点的RPC数据包，即使对等节点不在转发网络白名单内</ElCheckbox>
 		</div>
-		<div class="flex items-center gap-[5px] flex-nowrap">
-			<ElCheckbox v-model="mainStore.config.saveErrorLog">输出日志到本地</ElCheckbox>
-			<div class="w-[140px]">
-				<ElSelect
-					v-model="mainStore.config.logLevel"
-					placeholder="请选择日志等级"
-					class="ml-[5px]"
-				>
-					<ElOption
-						v-for="item in data"
-						:key="item"
-						:label="`level - ${item}`"
-						:value="item"
-					></ElOption>
-				</ElSelect>
-			</div>
-			<ElButton
-				@click="openLogDir"
-				size="small"
-			>
-				打开日志目录
-			</ElButton>
-		</div>
 	</div>
 </template>
 <script setup lang="ts">

pages/index.vue

@@ -226,7 +226,7 @@
 					强制中转
 				</ElCheckbox>
 				<ElCheckbox
-					@change="handleAutoStartByTask"
+					@change="handleAutoStart"
 					:model-value="config.autoStart"
 					size="small"
 				>
@@ -389,7 +389,7 @@
 			appWindow.onCloseRequested(async event => {
 				// console.log(appWindow.label);
 				if (!is_close) {
-					console.log(1);
+					// console.log(1);
 					event.preventDefault();
 					appWindow.hide();
 				}
@@ -595,18 +595,16 @@
 
 	const compatibleInitAutoStart = async () => {
 		try {
-			const is_enable = await tauriAutoStart.isEnabled();
-			if (is_enable) {
-				await tauriAutoStart.disable();
-				await invoke("spawn_autostart", { enabled: true });
-				const is_enable_by_task = (await invoke("autostart_is_enabled")) as boolean;
-				config.autoStart = is_enable_by_task;
-			} else {
-				const is_enable_by_task = (await invoke("autostart_is_enabled")) as boolean;
-				config.autoStart = is_enable_by_task;
+			const is_enable_by_task = (await invoke("autostart_is_enabled")) as boolean;
+			if (is_enable_by_task) {
+				await tauriAutoStart.enable();
+				await invoke("spawn_autostart", { enabled: false });
 			}
+			const is_enable = await tauriAutoStart.isEnabled();
+			config.autoStart = is_enable;
 		} catch (err) {
 			await invoke("spawn_autostart", { enabled: false });
+			await tauriAutoStart.disable();
 			config.autoStart = false;
 		}
 	};
@@ -716,6 +714,9 @@
 		if (config.saveErrorLog) {
 			args.push("--file-log-level", config.logLevel, "--file-log-dir", import.meta.env.VITE_LOG_PATH);
 		}
+		if(config.devName && config.devNameValue) {
+			args.push("--dev-name", config.devNameValue);
+		}
 		return args;
 	};
 

pages/member.vue

@@ -5,13 +5,11 @@
 			<ElTable
 				stripe
 				:data="data.member"
-				v-else
-			>
+				v-else>
 				<ElTableColumn
 					v-for="prop in showTableHeader"
 					:label="prop[1]"
-					:key="prop[0]"
-				>
+					:key="prop[0]">
 					<template #default="{ row }">
 						<span v-if="prop[0] == 'loss_rate'">
 							{{ row[prop[0]] && row[prop[0]] != "-" ? Number(row[prop[0]] * 100).toFixed(2) + "%" : row[prop[0]] }}
@@ -20,8 +18,7 @@
 						<ElTag
 							v-else
 							effect="dark"
-							:type="row[prop[0]] == 'p2p' ? 'success' : 'info'"
-						>
+							:type="row[prop[0]] == 'p2p' ? 'success' : 'info'">
 							{{ row[prop[0]] }}
 						</ElTag>
 					</template>
@@ -35,22 +32,23 @@
 	import { reactive, onMounted, onBeforeUnmount } from "vue";
 	import { parsePeerInfo } from "@/utils";
 	const data = reactive<{ member: any[] }>({
-		member: []
+		member: [],
 	});
 
 	const showTableHeader = [
-		["ipv4", "虚拟网IP"],
 		["hostname", "主机名"],
-		["cost", "路由"],
 		["lat_ms", "延迟/ms"],
+		["ipv4", "虚拟网IP"],
+		["cost", "路由"],
 		["loss_rate", "丢包率"],
-		["version", "版本"]
+		["nat_type", "NAT类型"],
+		["version", "版本"],
 	];
 
 	const listenOutput = async () => {
 		const member = await invoke("get_members_by_cli");
 		const peerInfo = parsePeerInfo(member as string);
-		peerInfo.forEach(value => {
+		peerInfo.forEach((value) => {
 			if (value.cost === "Local") {
 				value.cost = "本机";
 			}
@@ -58,6 +56,7 @@
 				value.ipv4 = value.ipv4.split("/")[0];
 			}
 		});
+		console.log(peerInfo);
 		data.member = peerInfo;
 	};
 

pnpm-lock.yaml

@@ -57,6 +57,9 @@ importers:
       '@vitejs/plugin-vue-jsx':
         specifier: ^3.1.0
         version: 3.1.0(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(terser@5.30.4))(vue@3.4.24(typescript@5.4.5))
+      '@vueuse/core':
+        specifier: ^11.2.0
+        version: 11.2.0(vue@3.4.24(typescript@5.4.5))
       dayjs:
         specifier: ^1.11.10
         version: 1.11.10
@@ -1288,6 +1291,9 @@ packages:
   '@vueuse/core@10.9.0':
     resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
 
+  '@vueuse/core@11.2.0':
+    resolution: {integrity: sha512-JIUwRcOqOWzcdu1dGlfW04kaJhW3EXnnjJJfLTtddJanymTL7lF1C0+dVVZ/siLfc73mWn+cGP1PE1PKPruRSA==}
+
   '@vueuse/core@9.13.0':
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
@@ -1335,12 +1341,18 @@ packages:
   '@vueuse/metadata@10.9.0':
     resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==}
 
+  '@vueuse/metadata@11.2.0':
+    resolution: {integrity: sha512-L0ZmtRmNx+ZW95DmrgD6vn484gSpVeRbgpWevFKXwqqQxW9hnSi2Ppuh2BzMjnbv4aJRiIw8tQatXT9uOB23dQ==}
+
   '@vueuse/metadata@9.13.0':
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
   '@vueuse/shared@10.9.0':
     resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
 
+  '@vueuse/shared@11.2.0':
+    resolution: {integrity: sha512-VxFjie0EanOudYSgMErxXfq6fo8vhr5ICI+BuE3I9FnX7ePllEsVrRQ7O6Q1TLgApeLuPKcHQxAXpP+KnlrJsg==}
+
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
@@ -4133,6 +4145,17 @@ packages:
   vue-clipboard3@2.0.0:
     resolution: {integrity: sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==}
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-demi@0.14.7:
     resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
@@ -5858,6 +5881,16 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/core@11.2.0(vue@3.4.24(typescript@5.4.5))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 11.2.0
+      '@vueuse/shared': 11.2.0(vue@3.4.24(typescript@5.4.5))
+      vue-demi: 0.14.10(vue@3.4.24(typescript@5.4.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/core@9.13.0(vue@3.4.24(typescript@5.4.5))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
@@ -5882,6 +5915,8 @@ snapshots:
 
   '@vueuse/metadata@10.9.0': {}
 
+  '@vueuse/metadata@11.2.0': {}
+
   '@vueuse/metadata@9.13.0': {}
 
   '@vueuse/shared@10.9.0(vue@3.4.24(typescript@5.4.5))':
@@ -5891,6 +5926,13 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/shared@11.2.0(vue@3.4.24(typescript@5.4.5))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.4.24(typescript@5.4.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/shared@9.13.0(vue@3.4.24(typescript@5.4.5))':
     dependencies:
       vue-demi: 0.14.7(vue@3.4.24(typescript@5.4.5))
@@ -9009,6 +9051,10 @@ snapshots:
     dependencies:
       clipboard: 2.0.11
 
+  vue-demi@0.14.10(vue@3.4.24(typescript@5.4.5)):
+    dependencies:
+      vue: 3.4.24(typescript@5.4.5)
+
   vue-demi@0.14.7(vue@3.4.24(typescript@5.4.5)):
     dependencies:
       vue: 3.4.24(typescript@5.4.5)

src-tauri/Cargo.lock

@@ -1109,7 +1109,7 @@ checksum = "0d6ef0072f8a535281e4876be788938b528e9a1d43900b82c2569af7da799125"
 
 [[package]]
 name = "easytier-game"
-version = "1.1.0"
+version = "1.1.3"
 dependencies = [
  "log",
  "planif",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "easytier-game"
-version = "1.1.0"
+version = "1.1.3"
 homepage = "https://github.com/EasyTier/EasyTier"
 repository = "https://github.com/EasyTier/EasytierGame"
 description = "A simple network initiator based on Easytier"

src-tauri/easytier/config/test.toml

@@ -20,7 +20,4 @@ network_secret = ""
 uri = "tcp://public.easytier.top:11010"
 
 [[peer]]
-uri = "udp://public.easytier.top:11010"
-
-[[proxy_network]]
-cidr = "192.168.1.0/24"
+uri = "udp://public.easytier.top:11010"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
 	"productName": "easytier-game",
-	"version": "1.1.0",
+	"version": "1.1.3",
 	"identifier": "com.tauri.easytier-game",
 
 	"build": {
@@ -13,7 +13,7 @@
 	"app": {
 		"windows": [
 			{
-				"title": "easytier-game",
+				"title": "easytier-game 1.1.3",
 				"width": 335,
 				"height": 305,
 				"resizable": false,

stores/index.ts

@@ -26,7 +26,10 @@ export default defineStore("main", {
 				dhcp: true, // 是否使用DHCP
 				saveErrorLog: true, // 是否保存错误日志
 				logLevel: "error", //日志等级
+				devName: false, //自定义网卡名
+				devNameValue: "", //自定义网卡名
 			},
+			theme: false, //主题  false light true dark
 			configStartEnable: false, //使用配置文件启动
 			configPath: "", //配置文件路径
 			cidrEnable: false,
@@ -37,6 +40,7 @@ export default defineStore("main", {
 		paths: [
 			"basePeers",
 			"cidrEnable",
+			"theme",
 			"config.proxyNetworks",
 			"config.serverUrl",
 			"config.networkName",
@@ -58,7 +62,9 @@ export default defineStore("main", {
 			"config.hostname",
 			"config.dhcp",
 			"config.saveErrorLog",
-			"config.logLevel"
+			"config.logLevel",
+			"config.devName",
+			"config.devNameValue",
 		],
 	},
 });

tsconfig.json

@@ -6,6 +6,7 @@
 		"components/**/*.ts",
 		"components/**/*.js",
 		"components/**/*.vue",
+		"app.vue",
 		"pages/**/*.ts",
 		"pages/**/*.js",
 		"pages/**/*.vue",