托盘图标增加主题切换功能，调整成员列表延迟至前方，增加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,8 +22,8 @@ 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",
@@ -38,7 +40,7 @@ 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({
@@ -52,7 +54,12 @@ export async function useTray(init: boolean = false, beforExit: Function) {
 }
 
 export async function generateMenuItem(beforExit: Function) {
-	return [await MenuItemShow("显示 / 隐藏"), await PredefinedMenuItem.new({ item: "Separator" }), await MenuItemExit("退出", beforExit)];
+	return [
+		await MenuItemShow("显示 / 隐藏"),
+		await MenuItemTheme(),
+		await PredefinedMenuItem.new({ item: "Separator" }),
+		await MenuItemExit("退出", beforExit),
+	];
 }
 
 export async function MenuItemExit(text: string, beforExit: Function) {
@@ -78,6 +85,20 @@ export async function MenuItemShow(text: string) {
 	});
 }
 
+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);
+		},
+	});
+}
+
 // export async function setTrayMenu(items: (MenuItem | PredefinedMenuItem)[] | undefined = undefined) {
 //   // const tray = await useTray()
 //   const tray = await TrayIcon.getById(DEFAULT_TRAY_NAME)
@@ -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.1",
+	"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,41 +1,44 @@
 <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><ElCheckbox v-model="mainStore.config.disbleListenner">不监听任何端口，只连接到对等节点</ElCheckbox></div>
-		<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>
-		<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>
-		<div><ElCheckbox v-model="mainStore.config.disableUdpHolePunching">禁用UDP打洞功能</ElCheckbox></div>
-		<div>
-			<ElCheckbox v-model="mainStore.config.relayAllPeerrpc">转发所有对等节点的RPC数据包，即使对等节点不在转发网络白名单内</ElCheckbox>
+		<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]"
-				>
+					class="ml-[5px]">
 					<ElOption
 						v-for="item in data"
 						:key="item"
 						:label="`level - ${item}`"
-						:value="item"
-					></ElOption>
+						:value="item"></ElOption>
 				</ElSelect>
 			</div>
 			<ElButton
 				@click="openLogDir"
-				size="small"
-			>
+				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>
+		<div><ElCheckbox v-model="mainStore.config.disableUdpHolePunching">禁用UDP打洞功能</ElCheckbox></div>
+		<div>
+			<ElCheckbox v-model="mainStore.config.relayAllPeerrpc">转发所有对等节点的RPC数据包，即使对等节点不在转发网络白名单内</ElCheckbox>
+		</div>
 	</div>
 </template>
 <script setup lang="ts">

pages/index.vue

@@ -714,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.1"
+version = "1.1.3"
 dependencies = [
  "log",
  "planif",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "easytier-game"
-version = "1.1.1"
+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/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 1.1.1",
+				"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",