fix(ui): refine web access and peer list

2026-08-22 08:52:25 +08:00
parent 74c47bce69
commit 2995cfcb26
6 changed files with 31 additions and 22 deletions
@@ -19,8 +19,8 @@
        if (dark) document.documentElement.classList.add("dark");
      })();
    </script>
-    <script type="module" crossorigin src="/assets/index-JN_O_VQt.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DviShRor.css">
+    <script type="module" crossorigin src="/assets/index-BXMGH-t3.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CusMU-l9.css">
  </head>
  <body>
    <div id="app"></div>
@@ -19,7 +19,7 @@ let lastTrafficMap = {};
 let lastFetchTime = 0;
 // 展开状态和网速历史
 const expandedPeers = reactive({});
-const speedHistoryMap = {};
+const speedHistoryMap = reactive({});
 const HISTORY_SIZE = 60;

 const toggleExpand = (ip) => {
@@ -112,9 +112,9 @@ const getRouteModeClass = (route) => {
  // 判断是否直连:metric === 1
  const isDirect = route.metric === 1;
  if (isDirect) {
-    return "text-purple-600 font-medium dark:text-purple-400"; // 直连 - 紫色
+    return "font-medium text-green-600 dark:text-green-400";
  } 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 class="custom-scrollbar max-h-[600px] overflow-x-auto">
-        <table class="table">
+        <table class="table peer-table">
          <thead>
            <tr>
              <th class="w-8 px-2"></th>
@@ -226,7 +226,7 @@ const switcherClass = (fileName) =>
                <td>
                  <div class="flex items-center gap-2">
                    <span :class="peer.online ? 'badge-green' : 'badge-gray'">{{
-                      peer.online ? "Online" : "Offline"
+                      peer.online ? "在线" : "离线"
                    }}</span>
                    <!-- 加密状态图标 -->
                    <div v-if="peer.online && peer.key_equal === 1" class="tooltip">
@@ -316,3 +316,21 @@ const switcherClass = (fileName) =>
    </div>
  </div>
 </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>
@@ -87,11 +87,6 @@ const updateListenScope = async (value) => {
  await saveNetworkSettings();
 };

-const copyToken = async () => {
-  await navigator.clipboard.writeText(draft.token);
-  notice.value = "访问令牌已复制";
-};
-
 const copyUrl = async () => {
  await navigator.clipboard.writeText(status.value.url);
  notice.value = "访问地址已复制";
@@ -120,7 +115,6 @@ onMounted(load);
        <div class="flex items-start justify-between gap-5">
          <div>
            <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>
          <button
            type="button"
@@ -159,10 +153,7 @@ onMounted(load);
            <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>
          </div>
-          <div class="flex items-center gap-2">
-            <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>
+          <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>
          <p class="mt-2 text-xs text-slate-400">更换令牌后，已登录的浏览器需要使用新令牌重新鉴权。</p>
        </div>