yeyinlaoying/vnt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): refine web access and peer list

Browse Source
This commit is contained in:
lbl
2026-08-22 08:52:25 +08:00
parent 74c47bce69
commit 2995cfcb26
6 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vnt-web/static/assets/index-JN_O_VQt.js → vnt-web/static/assets/index-BXMGH-t3.js
+4 -4
View File
File diff suppressed because one or more lines are too long
vnt-web/static/assets/index-CusMU-l9.css
+1
View File
File diff suppressed because one or more lines are too long
vnt-web/static/assets/index-DviShRor.css
-1
View File
File diff suppressed because one or more lines are too long
vnt-web/static/index.html
+2 -2
View File
@@ -19,8 +19,8 @@
if (dark) document.documentElement.classList.add("dark"); if (dark) document.documentElement.classList.add("dark");
})(); })();
</script> </script>
<script type="module" crossorigin src="/assets/index-JN_O_VQt.js"></script> <script type="module" crossorigin src="/assets/index-BXMGH-t3.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DviShRor.css"> <link rel="stylesheet" crossorigin href="/assets/index-CusMU-l9.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
vnt-web/ui/src/views/PeersView.vue
+23 -5
View File
@@ -19,7 +19,7 @@ let lastTrafficMap = {};
let lastFetchTime = 0; let lastFetchTime = 0;
// 展开状态和网速历史 // 展开状态和网速历史
const expandedPeers = reactive({}); const expandedPeers = reactive({});
const speedHistoryMap = {}; const speedHistoryMap = reactive({});
const HISTORY_SIZE = 60; const HISTORY_SIZE = 60;
const toggleExpand = (ip) => { const toggleExpand = (ip) => {
@@ -112,9 +112,9 @@ const getRouteModeClass = (route) => {
// 判断是否直连:metric === 1 // 判断是否直连:metric === 1
const isDirect = route.metric === 1; const isDirect = route.metric === 1;
if (isDirect) { if (isDirect) {
return "text-purple-600 font-medium dark:text-purple-400"; // 直连 - 紫色 return "font-medium text-green-600 dark:text-green-400";
} else { } else {
return "text-blue-600 dark:text-blue-400"; // 客户端中继 - 蓝色 return "text-blue-600 dark:text-blue-400";
} }
}; };
@@ -183,7 +183,7 @@ const switcherClass = (fileName) =>
</div> </div>
</div> </div>
<div class="custom-scrollbar max-h-[600px] overflow-x-auto"> <div class="custom-scrollbar max-h-[600px] overflow-x-auto">
<table class="table"> <table class="table peer-table">
<thead> <thead>
<tr> <tr>
<th class="w-8 px-2"></th> <th class="w-8 px-2"></th>
@@ -226,7 +226,7 @@ const switcherClass = (fileName) =>
<td> <td>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span :class="peer.online ? 'badge-green' : 'badge-gray'">{{ <span :class="peer.online ? 'badge-green' : 'badge-gray'">{{
peer.online ? "Online" : "Offline" peer.online ? "在线" : "离线"
}}</span> }}</span>
<!-- 加密状态图标 --> <!-- 加密状态图标 -->
<div v-if="peer.online && peer.key_equal === 1" class="tooltip"> <div v-if="peer.online && peer.key_equal === 1" class="tooltip">
@@ -316,3 +316,21 @@ const switcherClass = (fileName) =>
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.peer-table :deep(thead th) {
padding: 0.5rem;
font-size: 0.6875rem;
}
.peer-table :deep(tbody td) {
padding: 0.5rem;
font-size: 0.75rem;
}
.peer-table :deep(th:first-child),
.peer-table :deep(td:first-child) {
padding-left: 0.25rem;
padding-right: 0;
}
</style>
vnt-web/ui/src/views/WebAccessView.vue
+1 -10
View File
@@ -87,11 +87,6 @@ const updateListenScope = async (value) => {
await saveNetworkSettings(); await saveNetworkSettings();
}; };
const copyToken = async () => {
await navigator.clipboard.writeText(draft.token);
notice.value = "访问令牌已复制";
};
const copyUrl = async () => { const copyUrl = async () => {
await navigator.clipboard.writeText(status.value.url); await navigator.clipboard.writeText(status.value.url);
notice.value = "访问地址已复制"; notice.value = "访问地址已复制";
@@ -120,7 +115,6 @@ onMounted(load);
<div class="flex items-start justify-between gap-5"> <div class="flex items-start justify-between gap-5">
<div> <div>
<h3 class="text-sm font-semibold text-slate-900 dark:text-white">启用 Web 服务</h3> <h3 class="text-sm font-semibold text-slate-900 dark:text-white">启用 Web 服务</h3>
<p class="mt-1 text-xs leading-5 text-slate-400">服务内置于桌面客户端，不会启动单独的 vnt2_web 进程。</p>
</div> </div>
<button <button
type="button" type="button"
@@ -159,10 +153,7 @@ onMounted(load);
<span class="text-sm font-medium text-slate-700 dark:text-slate-200">访问令牌</span> <span class="text-sm font-medium text-slate-700 dark:text-slate-200">访问令牌</span>
<button class="text-xs font-medium text-indigo-600 hover:text-indigo-500 disabled:opacity-50 dark:text-indigo-400" type="button" :disabled="saving" @click="regenerate">更换令牌</button> <button class="text-xs font-medium text-indigo-600 hover:text-indigo-500 disabled:opacity-50 dark:text-indigo-400" type="button" :disabled="saving" @click="regenerate">更换令牌</button>
</div> </div>
<div class="flex items-center gap-2"> <code class="block min-w-0 truncate rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-300">{{ draft.token }}</code>
<code class="min-w-0 flex-1 truncate rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-300">{{ draft.token }}</code>
<button class="btn-ghost shrink-0" type="button" :disabled="saving" @click="copyToken">复制令牌</button>
</div>
<p class="mt-2 text-xs text-slate-400">更换令牌后，已登录的浏览器需要使用新令牌重新鉴权。</p> <p class="mt-2 text-xs text-slate-400">更换令牌后，已登录的浏览器需要使用新令牌重新鉴权。</p>
</div> </div>