\u667a\u80fd\u591a\u7f51\u5361\u8def\u7531\u914d\u7f6e<\/title>\n <script src=\"https:\/\/unpkg.com\/vue@3\/dist\/vue.global.prod.js\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<\/head>\n<body class=\"bg-gray-100 p-6\">\n <div id=\"app\" class=\"max-w-xl mx-auto p-6 space-y-6 bg-white shadow-md rounded-xl\">\n <h1 class=\"text-2xl font-bold text-gray-800\">\u667a\u80fd\u591a\u7f51\u5361\u8def\u7531\u914d\u7f6e<\/h1>\n\n \n <div>\n <label class=\"block mb-1 font-medium\">\u9ed8\u8ba4\u7f51\u5361<\/label>\n <select v-model=\"defaultIface\" class=\"w-full border rounded p-2\">\n <option value=\"eth0\">eth0<\/option>\n <option value=\"eth1\">eth1<\/option>\n <option value=\"wlan0\">wlan0<\/option>\n <\/select>\n <\/div>\n\n \n <div>\n <h2 class=\"font-semibold mb-2\">\u7279\u5b9a\u7a0b\u5e8f\u914d\u7f6e<\/h2>\n <label class=\"block text-sm mb-1\">\u7a0b\u5e8f\u540d<\/label>\n <input v-model=\"programName\" type=\"text\" class=\"w-full border rounded p-2 mb-3\" placeholder=\"\u5982 chrome.exe\" \/>\n\n <label class=\"block text-sm mb-1\">\u7ed1\u5b9a\u7f51\u5361<\/label>\n <select v-model=\"programIface\" class=\"w-full border rounded p-2 mb-3\">\n <option value=\"eth0\">eth0<\/option>\n <option value=\"eth1\">eth1<\/option>\n <option value=\"wlan0\">wlan0<\/option>\n <\/select>\n\n <label class=\"block text-sm mb-1\">\u57df\u540d\/IP \u5217\u8868<\/label>\n <textarea\n v-model=\"domainIPs\"\n class=\"w-full border rounded p-2\"\n rows=\"4\"\n placeholder=\"\u6bcf\u884c\u4e00\u4e2a\uff0c\u4f8b\u5982\uff1aexample.com\u30018.8.8.8\"\n ><\/textarea>\n <\/div>\n\n \n <div>\n <h2 class=\"font-semibold mb-1\">\u4f18\u5148\u7ea7\u8bbe\u7f6e<\/h2>\n <div class=\"flex gap-4\">\n <label><input type=\"radio\" value=\"program\" v-model=\"priority\" \/> \u7a0b\u5e8f\u4f18\u5148<\/label>\n <label><input type=\"radio\" value=\"domain\" v-model=\"priority\" \/> \u57df\u540d\/IP\u4f18\u5148<\/label>\n <\/div>\n <\/div>\n\n \n <div>\n <label><input type=\"checkbox\" v-model=\"fallback\" \/> \u5339\u914d\u5931\u8d25\u65f6\uff0c\u81ea\u52a8\u8d70\u53e6\u4e00\u4e2a\u7f51\u5361<\/label>\n <\/div>\n\n \n <div>\n <button\n @click=\"applySettings\"\n class=\"bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition\"\n >\n \u5e94\u7528\u8bbe\u7f6e\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n const { createApp, ref } = Vue\n\n createApp({\n setup() {\n const defaultIface = ref('eth0')\n const programName = ref('')\n const programIface = ref('eth1')\n const domainIPs = ref('')\n const priority = ref('program')\n const fallback = ref(true)\n\n function applySettings() {\n const result = {\n defaultIface: defaultIface.value,\n programName: programName.value,\n programIface: programIface.value,\n domainIPs: domainIPs.value.split('\\n').filter(Boolean),\n priority: priority.value,\n fallback: fallback.value,\n }\n console.log('\u914d\u7f6e\u4fe1\u606f\uff1a', result)\n alert('\u914d\u7f6e\u5df2\u6253\u5370\u5230\u63a7\u5236\u53f0')\n }\n\n return {\n defaultIface,\n programName,\n programIface,\n domainIPs,\n priority,\n fallback,\n applySettings\n }\n }\n }).mount('#app')\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><em>\u6ce8\uff1a\u7531AI\u751f\u6210\uff0c\u903b\u8f91\u7565\u4e71\uff0c\u5f85\u6539\u8fdb\u3002<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"964\" height=\"758\" src=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/06\/image-47.png\" alt=\"\" class=\"wp-image-2977\" srcset=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/06\/image-47.png 964w, https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/06\/image-47-768x604.png 768w\" sizes=\"auto, (max-width: 964px) 100vw, 964px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"532\" src=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/06\/image-48.png\" alt=\"\" class=\"wp-image-2979\"\/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u667a\u80fd\u591a\u7f51\u5361\u8def\u7531\u914d\u7f6e \u667a\u80fd\u591a\u7f51\u5361\u8def\u7531\u914d\u7f6e \u9ed8\u8ba4\u7f51\u5361 eth0eth1wlan0 \u7279\u5b9a\u7a0b\u5e8f\u914d\u7f6e \u7a0b\u5e8f\u540d \u7ed1\u5b9a\u7f51\u5361 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[],"class_list":["post-2976","post","type-post","status-publish","format-standard","hentry","category-56"],"_links":{"self":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts\/2976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2976"}],"version-history":[{"count":3,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts\/2976\/revisions"}],"predecessor-version":[{"id":2981,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts\/2976\/revisions\/2981"}],"wp:attachment":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2976,"date":"2025-06-06T19:04:09","date_gmt":"2025-06-06T11:04:09","guid":{"rendered":"https:\/\/blog.kangyue.pro\/?p=2976"},"modified":"2025-06-06T19:06:11","modified_gmt":"2025-06-06T11:06:11","slug":"%e4%b8%80%e6%ac%be%e3%80%8c%e4%b8%8d%e5%90%8c%e7%9a%84%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%9f%9f%e5%90%8d-ip%ef%bc%89%e8%b5%b0%e4%b8%8d%e5%90%8c%e7%9a%84%e7%bd%91%e5%8d%a1%e3%80%8d%e7%9a%84gui%e7%95%8c","status":"publish","type":"post","link":"https:\/\/blog.kangyue.pro\/?p=2976","title":{"rendered":"\u4e00\u6b3e\u300c\u4e0d\u540c\u7684\u7a0b\u5e8f\uff08\u57df\u540d\/IP\uff09\u8d70\u4e0d\u540c\u7684\u7f51\u5361\u300d\u7684GUI\u754c\u9762\u8bbe\u8ba1"},"content":{"rendered":"\n\n\n\n \n \n \u667a\u80fd\u591a\u7f51\u5361\u8def\u7531\u914d\u7f6e<\/title>\n <script src=\"https:\/\/unpkg.com\/vue@3\/dist\/vue.global.prod.js\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<\/head>\n<body class=\"bg-gray-100 p-6\">\n <div id=\"app\" class=\"max-w-xl mx-auto p-6 space-y-6 bg-white shadow-md rounded-xl\">\n <h1 class=\"text-2xl font-bold text-gray-800\">\u667a\u80fd\u591a\u7f51\u5361\u8def\u7531\u914d\u7f6e<\/h1>\n\n \n <div>\n <label class=\"block mb-1 font-medium\">\u9ed8\u8ba4\u7f51\u5361<\/label>\n <select v-model=\"defaultIface\" class=\"w-full border rounded p-2\">\n <option value=\"eth0\">eth0<\/option>\n <option value=\"eth1\">eth1<\/option>\n <option value=\"wlan0\">wlan0<\/option>\n <\/select>\n <\/div>\n\n \n <div>\n <h2 class=\"font-semibold mb-2\">\u7279\u5b9a\u7a0b\u5e8f\u914d\u7f6e<\/h2>\n <label class=\"block text-sm mb-1\">\u7a0b\u5e8f\u540d<\/label>\n <input v-model=\"programName\" type=\"text\" class=\"w-full border rounded p-2 mb-3\" placeholder=\"\u5982 chrome.exe\" \/>\n\n <label class=\"block text-sm mb-1\">\u7ed1\u5b9a\u7f51\u5361<\/label>\n <select v-model=\"programIface\" class=\"w-full border rounded p-2 mb-3\">\n <option value=\"eth0\">eth0<\/option>\n <option value=\"eth1\">eth1<\/option>\n <option value=\"wlan0\">wlan0<\/option>\n <\/select>\n\n <label class=\"block text-sm mb-1\">\u57df\u540d\/IP \u5217\u8868<\/label>\n <textarea\n v-model=\"domainIPs\"\n class=\"w-full border rounded p-2\"\n rows=\"4\"\n placeholder=\"\u6bcf\u884c\u4e00\u4e2a\uff0c\u4f8b\u5982\uff1aexample.com\u30018.8.8.8\"\n ><\/textarea>\n <\/div>\n\n \n <div>\n <h2 class=\"font-semibold mb-1\">\u4f18\u5148\u7ea7\u8bbe\u7f6e<\/h2>\n <div class=\"flex gap-4\">\n <label><input type=\"radio\" value=\"program\" v-model=\"priority\" \/> \u7a0b\u5e8f\u4f18\u5148<\/label>\n <label><input type=\"radio\" value=\"domain\" v-model=\"priority\" \/> \u57df\u540d\/IP\u4f18\u5148<\/label>\n <\/div>\n <\/div>\n\n \n <div>\n <label><input type=\"checkbox\" v-model=\"fallback\" \/> \u5339\u914d\u5931\u8d25\u65f6\uff0c\u81ea\u52a8\u8d70\u53e6\u4e00\u4e2a\u7f51\u5361<\/label>\n <\/div>\n\n \n <div>\n <button\n @click=\"applySettings\"\n class=\"bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition\"\n >\n \u5e94\u7528\u8bbe\u7f6e\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n const { createApp, ref } = Vue\n\n createApp({\n setup() {\n const defaultIface = ref('eth0')\n const programName = ref('')\n const programIface = ref('eth1')\n const domainIPs = ref('')\n const priority = ref('program')\n const fallback = ref(true)\n\n function applySettings() {\n const result = {\n defaultIface: defaultIface.value,\n programName: programName.value,\n programIface: programIface.value,\n domainIPs: domainIPs.value.split('\\n').filter(Boolean),\n priority: priority.value,\n fallback: fallback.value,\n }\n console.log('\u914d\u7f6e\u4fe1\u606f\uff1a', result)\n alert('\u914d\u7f6e\u5df2\u6253\u5370\u5230\u63a7\u5236\u53f0')\n }\n\n return {\n defaultIface,\n programName,\n programIface,\n domainIPs,\n priority,\n fallback,\n applySettings\n }\n }\n }).mount('#app')\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><em>\u6ce8\uff1a\u7531AI\u751f\u6210\uff0c\u903b\u8f91\u7565\u4e71\uff0c\u5f85\u6539\u8fdb\u3002<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"964\" height=\"758\" src=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/06\/image-47.png\" alt=\"\" class=\"wp-image-2977\" srcset=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/06\/image-47.png 964w, https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/06\/image-47-768x604.png 768w\" sizes=\"auto, (max-width: 964px) 100vw, 964px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"532\" src=\"https:\/\/blog.kangyue.pro\/wp-content\/uploads\/2025\/06\/image-48.png\" alt=\"\" class=\"wp-image-2979\"\/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u667a\u80fd\u591a\u7f51\u5361\u8def\u7531\u914d\u7f6e \u667a\u80fd\u591a\u7f51\u5361\u8def\u7531\u914d\u7f6e \u9ed8\u8ba4\u7f51\u5361 eth0eth1wlan0 \u7279\u5b9a\u7a0b\u5e8f\u914d\u7f6e \u7a0b\u5e8f\u540d \u7ed1\u5b9a\u7f51\u5361 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[],"class_list":["post-2976","post","type-post","status-publish","format-standard","hentry","category-56"],"_links":{"self":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts\/2976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2976"}],"version-history":[{"count":3,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts\/2976\/revisions"}],"predecessor-version":[{"id":2981,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=\/wp\/v2\/posts\/2976\/revisions\/2981"}],"wp:attachment":[{"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kangyue.pro\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}