feat(监控): 完善系统监控、登录状态与访问审计能力

frontend/src/components/AccountConnectionStatus.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const readSource = (path: string) => readFileSync(resolve(__dirname, path), "utf8");
+
+describe("account connection status", () => {
+  it("keeps the compact indicator and detailed account diagnostics in both shells", () => {
+    const component = readSource("./AccountConnectionStatus.vue");
+    const webLayout = readSource("./WebLayout.vue");
+    const desktopLayout = readSource("./DesktopLayout.vue");
+
+    expect(component).toContain('mode === \'indicator\'');
+    expect(component).toContain("当前账号与连接状态");
+    expect(component).toContain("API 延迟");
+    expect(component).toContain("会话状态");
+    expect(component).toContain("不代表系统健康评分");
+    expect(component).not.toContain("ip_address");
+    expect(component).not.toContain("access_token");
+    expect(webLayout).toContain('<AccountConnectionStatus mode="indicator" />');
+    expect(webLayout).toContain('<AccountConnectionStatus mode="details" />');
+    expect(desktopLayout).toContain('<AccountConnectionStatus mode="indicator" />');
+    expect(desktopLayout).toContain('<AccountConnectionStatus mode="details" />');
+  });
+});

frontend/src/components/AccountConnectionStatus.vue

@@ -0,0 +1,267 @@
+<template>
+  <span
+    v-if="mode === 'indicator'"
+    class="account-connection-indicator"
+    :class="`is-${status}`"
+    :title="`账号会话：${statusLabel}`"
+  >
+    <i class="account-connection-dot"></i>
+    <span>{{ statusLabel }}</span>
+  </span>
+
+  <div v-else class="account-connection-details" aria-label="当前账号与连接状态" @click.stop>
+    <div class="connection-details-head">
+      <span class="connection-details-title">当前账号</span>
+      <span class="connection-state-badge" :class="`is-${status}`">
+        <i class="account-connection-dot"></i>
+        {{ statusLabel }}
+      </span>
+    </div>
+    <strong class="connection-account-name">{{ userDisplayName }}</strong>
+    <span class="connection-account-email">{{ auth.user?.email || "未提供邮箱" }}</span>
+
+    <dl class="connection-details-grid">
+      <div>
+        <dt>角色</dt>
+        <dd>{{ roleLabel }}</dd>
+      </div>
+      <div>
+        <dt>客户端</dt>
+        <dd>{{ clientLabel }}</dd>
+      </div>
+      <div>
+        <dt>运行环境</dt>
+        <dd>{{ environmentLabel }}</dd>
+      </div>
+      <div>
+        <dt>会话状态</dt>
+        <dd>{{ sessionRemainingLabel }}</dd>
+      </div>
+      <div>
+        <dt>API 延迟</dt>
+        <dd>{{ latencyLabel }}</dd>
+      </div>
+      <div>
+        <dt>最近通信</dt>
+        <dd>{{ lastCommunicationLabel }}</dd>
+      </div>
+    </dl>
+    <p class="connection-details-note">连接状态仅表示会话与后端通信，不代表系统健康评分。</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted } from "vue";
+import { useAuthStore } from "../store/auth";
+import { useSessionStore } from "../store/session";
+import { getAppMetadata, isTauriRuntime } from "../runtime";
+import { IDLE_TIMEOUT_MINUTES } from "../session/sessionManager";
+import { parseJwtExp } from "../session/jwt";
+import { useConnectionStatus } from "../composables/useConnectionStatus";
+
+withDefaults(defineProps<{ mode?: "indicator" | "details" }>(), {
+  mode: "indicator",
+});
+
+const auth = useAuthStore();
+const session = useSessionStore();
+const isDesktop = isTauriRuntime();
+const appMetadata = getAppMetadata();
+const {
+  status,
+  statusLabel,
+  latencyMs,
+  lastSuccessAt,
+  lastCheckedAt,
+  startConnectionMonitor,
+} = useConnectionStatus();
+let stopConnectionMonitor: (() => void) | undefined;
+
+const userDisplayName = computed(
+  () => auth.user?.full_name || auth.user?.username || auth.user?.email || "当前用户",
+);
+const roleLabel = computed(() => (auth.user?.is_admin ? "系统管理员" : "普通账号"));
+const clientLabel = computed(() => {
+  if (!isDesktop) return "网页端";
+  const platform = appMetadata.platform === "macos" ? "macOS" : appMetadata.platform || "桌面系统";
+  return `桌面端 · ${platform}`;
+});
+const environmentLabel = computed(() =>
+  import.meta.env.VITE_RUNTIME_ENV === "production" ? "生产环境" : "开发环境",
+);
+const effectiveNow = computed(() => Math.max(lastCheckedAt.value || 0, Date.now()));
+const sessionDeadlineAt = computed(() => {
+  const tokenExpiryAt = auth.token ? parseJwtExp(auth.token) : null;
+  if (!tokenExpiryAt) return null;
+  if (isDesktop) return tokenExpiryAt;
+  return Math.min(tokenExpiryAt, session.lastUserActiveAt + IDLE_TIMEOUT_MINUTES * 60 * 1000);
+});
+const sessionRemainingLabel = computed(() => {
+  if (!auth.token) return "未登录";
+  if (!sessionDeadlineAt.value) return "有效";
+  const remainingMs = sessionDeadlineAt.value - effectiveNow.value;
+  if (remainingMs <= 0) return "即将失效";
+  const totalMinutes = Math.max(1, Math.ceil(remainingMs / 60_000));
+  if (totalMinutes < 60) return `剩余 ${totalMinutes} 分钟`;
+  const totalHours = Math.floor(totalMinutes / 60);
+  if (totalHours < 24) return `剩余 ${totalHours} 小时`;
+  return `剩余 ${Math.floor(totalHours / 24)} 天`;
+});
+const latencyLabel = computed(() => (latencyMs.value === null ? "--" : `${latencyMs.value} ms`));
+const lastCommunicationLabel = computed(() => {
+  if (!lastSuccessAt.value) return status.value === "checking" ? "检测中" : "暂无成功记录";
+  return new Date(lastSuccessAt.value).toLocaleTimeString("zh-CN", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+});
+
+onMounted(() => {
+  stopConnectionMonitor = startConnectionMonitor();
+});
+
+onBeforeUnmount(() => {
+  stopConnectionMonitor?.();
+});
+</script>
+
+<style scoped>
+.account-connection-indicator,
+.connection-state-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 650;
+  white-space: nowrap;
+}
+
+.account-connection-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  flex: 0 0 7px;
+  border-radius: 50%;
+  background: #94a3b8;
+  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.13);
+}
+
+.is-online .account-connection-dot {
+  background: #22a663;
+  box-shadow: 0 0 0 3px rgba(34, 166, 99, 0.13);
+}
+
+.is-degraded .account-connection-dot {
+  background: #d99b21;
+  box-shadow: 0 0 0 3px rgba(217, 155, 33, 0.14);
+}
+
+.is-offline .account-connection-dot {
+  background: #e05252;
+  box-shadow: 0 0 0 3px rgba(224, 82, 82, 0.14);
+}
+
+.account-connection-details {
+  box-sizing: border-box;
+  width: 290px;
+  padding: 12px 14px 11px;
+  color: #273449;
+}
+
+.connection-details-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.connection-details-title {
+  color: #7a8aa0;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.connection-state-badge {
+  padding: 3px 7px;
+  border-radius: 999px;
+  background: #f3f6f9;
+}
+
+.connection-account-name,
+.connection-account-email {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.connection-account-name {
+  color: #172033;
+  font-size: 14px;
+}
+
+.connection-account-email {
+  margin-top: 2px;
+  color: #7a8aa0;
+  font-size: 11px;
+}
+
+.connection-details-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 12px;
+  margin: 12px 0 0;
+  padding: 10px 0;
+  border-top: 1px solid #edf1f5;
+  border-bottom: 1px solid #edf1f5;
+}
+
+.connection-details-grid div,
+.connection-details-grid dt,
+.connection-details-grid dd {
+  min-width: 0;
+  margin: 0;
+}
+
+.connection-details-grid dt {
+  margin-bottom: 2px;
+  color: #91a0b3;
+  font-size: 10px;
+}
+
+.connection-details-grid dd {
+  overflow: hidden;
+  color: #334155;
+  font-size: 11px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.connection-details-note {
+  margin: 9px 0 0;
+  color: #8a98aa;
+  font-size: 10px;
+  line-height: 1.45;
+}
+
+:global([data-ctms-theme="dark"]) .account-connection-details {
+  color: #dbe5f1;
+}
+
+:global([data-ctms-theme="dark"]) .connection-account-name,
+:global([data-ctms-theme="dark"]) .connection-details-grid dd {
+  color: #f8fafc;
+}
+
+:global([data-ctms-theme="dark"]) .connection-details-grid {
+  border-color: #334155;
+}
+
+:global([data-ctms-theme="dark"]) .connection-state-badge {
+  background: #243247;
+}
+</style>

frontend/src/components/DesktopLayout.vue

@@ -246,10 +246,12 @@
             <button class="account-button" type="button">
               <span class="account-avatar">{{ userDisplayInitial }}</span>
               <span class="account-name">{{ userDisplayName }}</span>
+              <AccountConnectionStatus mode="indicator" />
               <el-icon><ArrowDown /></el-icon>
             </button>
             <template #dropdown>
               <el-dropdown-menu>
+                <AccountConnectionStatus mode="details" />
                 <el-dropdown-item command="profile">
                   <el-icon><User /></el-icon>
                   <span>{{ TEXT.menu.profile }}</span>
@@ -496,6 +498,7 @@ import { useDesktopShortcuts } from "../composables/useDesktopShortcuts";
 import { getProjectRoutePermission, hasProjectPermission, projectRouteLandingPaths } from "../utils/projectRoutePermissions";
 import type { DesktopCommand } from "../types/desktopCommands";
 import DesktopCommandPalette from "./DesktopCommandPalette.vue";
+import AccountConnectionStatus from "./AccountConnectionStatus.vue";
 import DesktopPreferences from "../views/DesktopPreferences.vue";
 import ProfileSettings from "../views/ProfileSettings.vue";
 import {
@@ -1993,7 +1996,7 @@ useDesktopShortcuts(
 
 .account-button {
   gap: 7px;
-  max-width: 188px;
+  max-width: 228px;
   padding: 0 8px 0 3px;
 }
 
@@ -2011,7 +2014,7 @@ useDesktopShortcuts(
 }
 
 .account-name {
-  max-width: 110px;
+  max-width: 96px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2321,6 +2324,9 @@ useDesktopShortcuts(
 }
 
 .desktop-route-shell {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
   height: 100%;
   min-height: 100%;
 }

frontend/src/components/Layout.desktop.test.ts

@@ -475,6 +475,15 @@ describe("desktop layout shell", () => {
     expect(styles).toContain(":root[data-ctms-theme=\"dark\"] .desktop-workbench .desktop-route-shell .hero-stat");
   });
 
+  it("keeps routed desktop pages stretched to the content boundary", () => {
+    const layout = readDesktopLayoutSource();
+
+    expect(layout).toContain(".desktop-route-shell {");
+    expect(layout).toContain("width: 100%;");
+    expect(layout).toContain("max-width: 100%;");
+    expect(layout).toContain("box-sizing: border-box;");
+  });
+
   it("keeps authentication styles self-contained for desktop CSP", () => {
     const sources = [
       readMainStyleSource(),

frontend/src/components/PermissionAccessLogs.test.ts

@@ -15,18 +15,38 @@ describe("PermissionAccessLogs", () => {
     expect(source).toContain('parts.join(" / ")');
   });
 
-  it("renders user behavior audit instead of endpoint table or region detail", () => {
+  it("renders access log audit with IP ranking as a dialog instead of side panels", () => {
     const source = readSource();
 
+    expect(source).toContain("访问日志");
+    expect(source).toContain("accessLogDialogVisible");
+    expect(source).toContain("accessLogDialogVisible");
+    expect(source).toContain("accessDialogLines");
+    expect(source).toContain("log-surface");
+    expect(source).toContain("access-table");
+    expect(source).toContain("filters.keyword");
+    expect(source).toContain("clientSourceLabel");
     expect(source).toContain("IP访问排行");
-    expect(source).toContain("接口访问审计日志");
-    expect(source).toContain("terminal-lines");
-    expect(source).toContain("keyword");
+    expect(source).toContain("ipRankingDialogVisible");
+    expect(source).toContain("openIpRankingDialog");
+    expect(source).toContain("ipRankingPeriodOptions");
+    expect(source).toContain('class="access-toolbar"');
+    expect(source).toContain('class="access-toolbar-actions"');
+    expect(source).toContain('@click="loadData">刷新');
+    expect(source).not.toContain("来自 permission_access_logs");
+    expect(source).not.toContain("安全访问只记录匿名、无效令牌和异常状态请求");
+    expect(source).not.toContain("audit-ranking-section");
+    expect(source).not.toContain("安全访问日志");
+    expect(source).not.toContain("log-mode-card");
+    expect(source).not.toContain("raw-log-panel");
     expect(source).not.toContain("终端式访问流水");
     expect(source).not.toContain("每行保留接口访问情况，便于快速扫日志");
     expect(source).not.toContain("来源地域明细");
     expect(source).not.toContain('prop="endpoint_key" label="接口"');
     expect(source).not.toContain("fetchIpLocations");
+    expect(source).toContain("访问日志加载失败，表格中可能是上次成功获取的数据");
+    expect(source).toContain("lastUpdatedAt");
+    expect(source).not.toContain("logs.value = []");
   });
 
   it("exposes QA and CTA in role filter presets", () => {
@@ -47,24 +67,32 @@ describe("PermissionAccessLogs", () => {
     expect(source).not.toContain('label="医学审核" value="QA"');
   });
 
-  it("uses narrow metric cards without helper subtitles", () => {
+  it("integrates compact metrics into the access overview without helper subtitles", () => {
     const source = readSource();
 
-    expect(source).toContain("min-height: 64px");
-    expect(source).toContain("padding: 10px 16px");
+    expect(source).toContain('class="access-overview"');
+    expect(source).toContain('aria-label="访问指标"');
+    expect(source).toContain("min-height: 44px");
+    expect(source).toContain("padding: 5px 12px");
+    expect(source).toContain("border-left: 1px solid #edf1f6");
     expect(source).not.toContain("<small>{{ card.hint }}</small>");
     expect(source).not.toContain("hint:");
     expect(source).not.toContain("筛选范围内行为总量");
   });
 
-  it("keeps audit grid widths consistent with SecurityCenter", () => {
+  it("uses a full-width log layout instead of the old left-right split", () => {
     const source = readSource();
 
-    expect(source).toContain("grid-template-columns: minmax(320px, 1fr) minmax(0, 1.35fr);");
+    expect(source).toContain("access-log-card");
+    expect(source).toContain("log-surface");
     expect(source).toContain("@media (max-width: 1100px)");
     expect(source).toContain("grid-template-columns: repeat(2, minmax(0, 1fr));");
     expect(source).toContain("@media (max-width: 720px)");
     expect(source).toContain("grid-template-columns: 1fr;");
+    expect(source).not.toContain("audit-ranking-section");
+    expect(source).not.toContain("grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));");
+    expect(source).not.toContain("audit-grid");
+    expect(source).not.toContain("grid-template-columns: minmax(320px, 1fr) minmax(0, 1.35fr);");
   });
 
   it("removes the duplicated audit hero copy", () => {
@@ -78,117 +106,254 @@ describe("PermissionAccessLogs", () => {
     expect(source).not.toContain("查看详细的接口访问与安全事件记录");
   });
 
-  it("streams terminal logs from top to bottom and refreshes in realtime", () => {
+  it("keeps structured access rows compact and delegates long fields to details", () => {
     const source = readSource();
 
-    expect(source).toContain("terminalLogRows");
-    expect(source).toContain("new Date(a.created_at).getTime() - new Date(b.created_at).getTime()");
-    expect(source).toContain("REALTIME_POLL_INTERVAL_MS");
-    expect(source).toContain("startRealtimePolling");
-    expect(source).toContain("onBeforeUnmount(stopRealtimePolling)");
-    expect(source).toContain('ref="terminalWindowRef"');
-    expect(source).toContain("scrollTerminalToBottom");
-    expect(source).toContain("terminal.scrollTop = terminal.scrollHeight");
+    expect(source).toContain('label="时间" width="160"');
+    expect(source).toContain('label="IP" width="120"');
+    expect(source).toContain('label="位置" width="110"');
+    expect(source).toContain('label="账号" min-width="160"');
+    expect(source).toContain('label="请求" min-width="380"');
+    expect(source).toContain('label="耗时" width="100"');
+    expect(source).toContain('label="操作" width="64"');
+    expect(source).toContain("account-cell");
+    expect(source).toContain("request-cell");
+    expect(source).toContain("elapsed-cell");
+    expect(source).toContain("accountSecondary(row)");
+    expect(source).toContain("requestMain(row)");
+    expect(source).toContain("requestSub(row)");
+    expect(source).toContain("row.elapsed_ms.toFixed(1)");
+    expect(source).not.toContain('label="账号/IP"');
+    expect(source).not.toContain('label="类型" width="88"');
+    expect(source).not.toContain('label="来源" width="132"');
+    expect(source).not.toContain('label="接口/角色"');
+    expect(source).not.toContain('label="状态" width="104"');
+    expect(source).not.toContain('label="账号" min-width="180"');
+    expect(source).not.toContain('label="请求来源"');
+    expect(source).not.toContain('label="结果" width="92"');
   });
 
-  it("surfaces source IPs in terminal logs and user ranking for network monitoring", () => {
+  it("opens all raw access logs in the same dialog pattern as security logs", () => {
+    const source = readSource();
+
+    expect(source).toContain("buildTerminalLine");
+    expect(source).toContain("REALTIME_POLL_INTERVAL_MS");
+    expect(source).toContain("startRealtimePolling");
+    expect(source).toContain("document.addEventListener(\"visibilitychange\", onVisibilityChange)");
+    expect(source).toContain("document.removeEventListener(\"visibilitychange\", onVisibilityChange)");
+    expect(source).toContain("stopTimers()");
+    expect(source).toContain("const REALTIME_POLL_INTERVAL_MS = 30_000;");
+    expect(source).toContain('const timeRangePreset = ref<TimeRangePreset>("24h")');
+    expect(source).toContain("accessLogDialogVisible");
+    expect(source).toContain("accessTerminalWindowRef");
+    expect(source).toContain("accessDialogLines.join");
+    expect(source).toContain("openAccessLogDialog");
+    expect(source).toContain("scrollAccessTerminalToBottom");
+    expect(source).toContain("fetchAllRawAccessLogLines");
+    expect(source).toContain("downloadInterfaceLog");
+    expect(source).toContain("<el-dialog v-model=\"accessLogDialogVisible\"");
+    expect(source).not.toContain('ref="terminalWindowRef"');
+    expect(source).not.toContain("scrollTerminalToBottom");
+  });
+
+  it("surfaces source IPs in table, terminal logs and the IP ranking dialog", () => {
     const source = readSource();
 
     expect(source).toContain("ip=${ip}");
-    expect(source).toContain("user.sample_ip_address || \"未知 IP\"");
-    expect(source).toContain("ipRankingItems");
+    expect(source).toContain('label="IP" width="120"');
+    expect(source).toContain('label="位置" width="110"');
+    expect(source).toContain("formatIpLocation(row)");
+    expect(source).toContain("row.ip_address || \"未知 IP\"");
     expect(source).toContain("IP访问排行");
-    expect(source).toContain("账号");
-    expect(source).toContain("rank-location");
+    expect(source).toContain("loadIpRankingData");
+    expect(source).toContain("fetchAccessRowsForIpRanking");
+    expect(source).toContain("buildIpRankingRows");
+    expect(source).toContain('width="min(1180px, 96vw)"');
+    expect(source).toContain("ip-rank-grid");
+    expect(source).toContain("ip-rank-card");
+    expect(source).toContain("rank-card-stats");
+    expect(source).toContain("grid-template-columns: repeat(5, minmax(0, 1fr));");
+    expect(source).toContain("rank-no");
+    expect(source).toContain("riskDescriptorForRow");
+    expect(source).toContain("row.riskLabel");
+    expect(source).toContain("row.riskTagType");
+    expect(source).toContain("riskRankCardClass");
+    expect(source).toContain("risk-rank-card--danger");
+    expect(source).toContain("risk-rank-card--warning");
+    expect(source).toContain("risk-rank-card--info");
+    expect(source).toContain("权限拒绝");
+    expect(source).toContain("敏感探测");
+    expect(source).toContain("TOP {{ ipRankingRows.length }}");
+    expect(source).toContain("ranking-period-cards");
+    expect(source).toContain("ranking-period-card");
+    expect(source).toContain("selectIpRankingPeriod");
+    expect(source).toContain("全部");
+    expect(source).toContain("当前时段暂无风险访问");
+    expect(source).not.toContain("ranking-period-group");
+    expect(source).not.toContain("ipLine(row)");
+    expect(source).not.toContain("user.sample_ip_address || \"未知 IP\"");
+    expect(source).not.toContain("ipRankingItems");
+    expect(source).not.toContain("ip-rank-row");
+    expect(source).not.toContain("rank-location");
+    expect(source).not.toContain('class="rank-risk-tag">异常IP');
     expect(source).not.toContain("TOP {{ userStats.length }}");
     expect(source).not.toContain("rank-ip-line");
     expect(source).not.toContain("来源IP");
     expect(source).not.toContain("去重IP");
   });
 
-  it("merges abnormal security IPs into the IP ranking and limits the list to top 10", () => {
+  it("includes security events in the unified access log without a separate security dialog", () => {
     const source = readSource();
 
-    expect(source).toContain("const IP_RANKING_LIMIT = 10;");
-    expect(source).toContain("const SECURITY_RANKING_PAGE_SIZE = 200;");
-    expect(source).toContain("const ipRankingItems = computed<IpRankingItem[]>(() =>");
-    expect(source).toContain("securityLogs.value.forEach((event) =>");
-    expect(source).toContain('const isAbnormal = event.category === "ABNORMAL_IP";');
-    expect(source).toContain('ABNORMAL_IP: "异常IP"');
-    expect(source).toContain(".slice(0, IP_RANKING_LIMIT)");
-    expect(source).toContain("TOP {{ ipRankingItems.length }}");
-    expect(source).toContain('v-for="(item, index) in ipRankingItems"');
-    expect(source).toContain("异常IP</el-tag>");
-  });
-
-  it("sorts IP ranking by overall access total before risk labels", () => {
-    const source = readSource();
-
-    expect(source).toContain("existing.total += user.total_count;");
-    expect(source).toContain("existing.riskCount += user.denied_count;");
-    expect(source).toContain("if (b.total !== a.total) return b.total - a.total;");
-    expect(source.indexOf("if (b.total !== a.total) return b.total - a.total;")).toBeLessThan(
-      source.indexOf("if (b.riskCount !== a.riskCount) return b.riskCount - a.riskCount;"),
-    );
-    expect(source.indexOf("if (b.total !== a.total) return b.total - a.total;")).toBeLessThan(
-      source.indexOf("if (b.isAbnormal !== a.isAbnormal) return Number(b.isAbnormal) - Number(a.isAbnormal);"),
-    );
-  });
-
-  it("loads all security pages for complete abnormal IP ranking data", () => {
-    const source = readSource();
-
-    expect(source).toContain("const first = await fetchSecurityAccessLogs({ status_min: 400, page: 1, page_size: SECURITY_RANKING_PAGE_SIZE });");
-    expect(source).toContain("const totalPages = Math.ceil(first.data.total / SECURITY_RANKING_PAGE_SIZE);");
-    expect(source).toContain("for (let nextPage = 2; nextPage <= totalPages; nextPage += 1)");
-    expect(source).toContain("allItems.push(...res.data.items);");
-    expect(source).toContain("securityLogs.value = allItems;");
-    expect(source).not.toContain("page_size: 80");
-  });
-
-  it("renders low-level security access logs for anonymous and invalid requests", () => {
-    const source = readSource();
-
-    expect(source).toContain("showSecurityLog");
-    expect(source).toContain('v-if="showSecurityLog"');
-    expect(source).toContain("fetchSecurityAccessLogs");
-    expect(source).toContain("安全事件审计日志");
-    expect(source).toContain("securityTerminalLines");
-    expect(source).toContain("auth_status");
-    expect(source).toContain("account_label");
-    expect(source).toContain("client_ip");
-    expect(source).toContain("status_code");
-    expect(source).toContain("ANONYMOUS");
-    expect(source).toContain("INVALID_TOKEN");
+    expect(source).toContain("isSecurityLog");
+    expect(source).toContain("安全事件");
+    expect(source).toContain("业务访问");
+    expect(source).toContain("SECURITY_CATEGORY_LABELS");
+    expect(source).toContain("SECURITY_SEVERITY_LABELS");
+    expect(source).toContain("endpointTitle(row)");
+    expect(source).toContain("endpointMeta(row)");
+    expect(source).toContain("accessResultLabel(row)");
+    expect(source).toContain("authStatusLabel(row.auth_status)");
+    expect(source).toContain("[SECURITY:");
+    expect(source).not.toContain("showSecurityLog");
+    expect(source).not.toContain('v-if="showSecurityLog"');
+    expect(source).not.toContain("fetchSecurityAccessLogs");
     expect(source).not.toContain("安全访问日志");
-    expect(source).not.toContain("记录匿名、无效令牌、拒绝和异常状态请求，用于排查未知 IP 攻击");
+    expect(source).not.toContain("安全事件审计日志");
+    expect(source).not.toContain("securityTerminalLines");
+    expect(source).not.toContain("securityLogDialogVisible");
+    expect(source).not.toContain("SecurityAccessLogItem");
   });
 
-  it("shows interface audit log total instead of current page line count", () => {
+  it("shows total access logs in the table and access log dialog", () => {
     const source = readSource();
 
-    expect(source).toContain("{{ formatNumber(total) }} 条");
     expect(source).toContain("共 {{ formatNumber(total) }} 条");
     expect(source).toContain(":total=\"total\"");
+    expect(source).toContain("v-model:page-size=\"pageSize\"");
+    expect(source).toContain(":page-sizes=\"[50, 100, 200]\"");
+    expect(source).toContain("accessLogDialogVisible");
     expect(source).not.toContain("{{ terminalLines.length }} 条");
     expect(source).not.toContain("最近 {{ terminalLines.length }} 条");
   });
 
-  it("opens both audit logs in realtime downloadable dialogs", () => {
+  it("renders access rows directly and keeps raw access logs downloadable", () => {
     const source = readSource();
 
-    expect(source).toContain("interfaceLogDialogVisible");
-    expect(source).toContain("securityLogDialogVisible");
-    expect(source).toContain("openInterfaceLogDialog");
-    expect(source).toContain("openSecurityLogDialog");
-    expect(source).toContain("if (!showSecurityLog.value) return");
+    expect(source).toContain("detailDrawerVisible");
+    expect(source).toContain("selectedLog");
+    expect(source).toContain("openLogDetail");
+    expect(source).toContain("accessLogDialogVisible");
+    expect(source).toContain("openAccessLogDialog");
     expect(source).toContain("downloadInterfaceLog");
-    expect(source).toContain("downloadSecurityLog");
     expect(source).toContain("downloadLogFile");
-    expect(source).toContain("<el-dialog v-model=\"interfaceLogDialogVisible\"");
-    expect(source).toContain("<el-dialog v-model=\"securityLogDialogVisible\"");
+    expect(source).toContain("accessLogDialogVisible");
+    expect(source).toContain("<el-drawer v-model=\"detailDrawerVisible\"");
+    expect(source).toContain("请求概览");
+    expect(source).toContain("原始 HTTP 请求");
+    expect(source).toContain("User-Agent");
+    expect(source).toContain("更多审计信息");
+    expect(source).toContain("日志标识");
+    expect(source).toContain("传输信息");
+    expect(source).toContain("客户端标识");
+    expect(source).toContain("requestHeaderEntries(row)");
+    expect(source).toContain("requestOverviewFieldItems(selectedLog)");
+    expect(source).toContain("auditMetadataFieldItems(selectedLog)");
+    expect(source).toContain("requestSnapshotFieldItems(selectedLog)");
+    expect(source).toContain("buildRawRequestBlock(selectedLog)");
+    expect(source).toContain("rawRequestBodyLine");
+    expect(source).toContain("hasCapturedRequestSnapshot");
+    expect(source).toContain("历史日志未采集原始请求快照");
+    expect(source).toContain("legacy_permission_endpoint");
+    expect(source).toContain("# audit_line: ${buildTerminalLine(row)}");
+    expect(source).not.toContain("detailFieldItems(selectedLog)");
+    expect(source).not.toContain("<h4>接口</h4>");
+    expect(source).not.toContain("<h4>访问字段</h4>");
+    expect(source).not.toContain("<h4>请求快照</h4>");
+    expect(source).not.toContain("<h4>请求头</h4>");
+    expect(source).not.toContain("requestHeaderEntries(selectedLog)");
+    expect(source).not.toContain("未记录请求头");
+    expect(source).not.toContain("原始请求快照（脱敏）");
+    expect(source).not.toContain("原始日志行");
+    expect(source).not.toContain("请求头（脱敏）");
+    expect(source).toContain("<el-dialog v-model=\"accessLogDialogVisible\"");
     expect(source).toContain("下载日志");
-    expect(source).toContain("securityTerminalWindowRef");
-    expect(source).toContain("scrollSecurityTerminalToBottom");
+    expect(source).not.toContain("securityLogDialogVisible");
+    expect(source).not.toContain("openSecurityLogDialog");
+    expect(source).not.toContain("downloadSecurityLog");
+    expect(source).not.toContain("<el-dialog v-model=\"securityLogDialogVisible\"");
+    expect(source).not.toContain("securityTerminalWindowRef");
+    expect(source).not.toContain("scrollSecurityTerminalToBottom");
+    expect(source).not.toContain("interfaceLogDialogVisible");
+  });
+
+  it("exports all raw access logs across paginated backend pages", () => {
+    const source = readSource();
+
+    expect(source).toContain("const ACCESS_LOG_EXPORT_PAGE_SIZE = 200;");
+    expect(source).toContain("const rawExportLoading = ref(false);");
+    expect(source).toContain("fetchAllRawAccessLogLines");
+    expect(source).toContain("page_size: ACCESS_LOG_EXPORT_PAGE_SIZE");
+    expect(source).toContain("const totalPages = Math.ceil(first.data.total / ACCESS_LOG_EXPORT_PAGE_SIZE);");
+    expect(source).toContain("for (let nextPage = 2; nextPage <= totalPages; nextPage += 1)");
+    expect(source).toContain("raw-access-logs.log");
+    expect(source).not.toContain("interface-access-audit.log");
+  });
+
+  it("supports account, location and client source filtering on the server query", () => {
+    const source = readSource();
+
+    expect(source).toContain('placeholder="搜索账号、IP、属地、接口或来源"');
+    expect(source).toContain("filter-time-presets");
+    expect(source).toContain("timeRangePresetOptions");
+    expect(source).toContain("onTimePresetChange");
+    expect(source).toContain("buildTimeRangeFromPreset");
+    expect(source).toContain("全部");
+    expect(source).toContain("24小时");
+    expect(source).toContain("7天");
+    expect(source).toContain("30天");
+    expect(source).toContain("clientSourceOptions");
+    expect(source).toContain("filters.clientType");
+    expect(source).toContain("params.client_type = filters.clientType");
+    expect(source).toContain("params.keyword = keywordToken");
+    expect(source).toContain("params.client_ip = keywordToken");
+    expect(source).toContain("onKeywordInput");
+  });
+
+  it("keeps access-log filter controls on one compact visual scale", () => {
+    const source = readSource();
+
+    expect(source).toContain("--filter-control-height: 26px");
+    expect(source).toContain("--filter-font-size: 12px");
+    expect(source).toContain(".filter-time-presets :deep(.el-radio-button__inner)");
+    expect(source).toContain(".audit-filters :deep(.el-select__wrapper)");
+    expect(source).toContain(".audit-filters :deep(.el-input__wrapper)");
+    expect(source).toContain('class="filter-reset"');
+    expect(source).toContain("height: var(--filter-control-height)");
+    expect(source).toContain("font-size: var(--filter-font-size)");
+  });
+
+  it("does not render the manual date range filter in access logs", () => {
+    const source = readSource();
+
+    expect(source).not.toContain("el-date-picker");
+    expect(source).not.toContain("datetimerange");
+    expect(source).not.toContain("dateRange");
+    expect(source).not.toContain("onDateRangeChange");
+    expect(source).not.toContain("filter-date");
+    expect(source).not.toContain("开始时间");
+    expect(source).not.toContain("结束时间");
+  });
+
+  it("includes request headers in the access log item contract", () => {
+    const source = readFileSync(resolve(__dirname, "../types/api.ts"), "utf8");
+
+    expect(source).toContain('event_type?: "permission" | "security" | string;');
+    expect(source).toContain("request_headers: Record<string, string> | null;");
+    expect(source).toContain("request_snapshot: RequestSnapshot | null;");
+    expect(source).toContain("export interface RequestSnapshot");
+    expect(source).toContain("query_params?: RequestSnapshotParam[] | null;");
+    expect(source).toContain("status_code?: number | null;");
+    expect(source).toContain("auth_status?: string | null;");
   });
 });

frontend/src/components/PermissionIpLocations.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const readSource = () => readFileSync(resolve(__dirname, "./PermissionIpLocations.vue"), "utf8");
+
+describe("PermissionIpLocations", () => {
+  it("integrates source metrics into a compact overview above the map", () => {
+    const source = readSource();
+
+    expect(source).toContain('class="ip-overview"');
+    expect(source).toContain('aria-label="来源指标"');
+    expect(source).toContain('class="distribution-card"');
+    expect(source).toContain("min-height: 44px");
+    expect(source).toContain("grid-template-columns: minmax(0, 1fr) 300px");
+    expect(source).toContain("padding: 10px");
+  });
+
+  it("keeps compact metric grids responsive", () => {
+    const source = readSource();
+
+    expect(source).toContain("@media (max-width: 1100px)");
+    expect(source).toContain("@media (max-width: 520px)");
+    expect(source).toContain(".metric-card:nth-child(odd)");
+  });
+
+  it("uses the complete desktop viewport for fullscreen maps", () => {
+    const source = readSource();
+
+    expect(source).toContain('modal-class="source-map-overlay"');
+    expect(source).toContain(':option="fullscreenSourceMapOption"');
+    expect(source).toContain("buildFlowMapOption(flowSourceData.value, \"ctms-world\", 1, \"全球访问链路\")");
+    expect(source).toContain("buildFlowMapOption(chinaFlowSourceData.value, \"ctms-china\", 0.92, \"中国访问链路\")");
+    expect(source).toContain(".source-map-overlay .source-map-dialog.el-dialog.is-fullscreen");
+    expect(source).toContain("inset: 0 !important");
+    expect(source).toContain("flex: 1 1 auto");
+    expect(source).toContain("height: 100%;");
+    expect(source).toContain("min-height: 48px");
+  });
+
+  it("keeps the all-time label and request semantics consistent", () => {
+    const source = readSource();
+
+    expect(source).toContain('all: "全部"');
+    expect(source).toContain("all: undefined");
+    expect(source).toContain('all_time: timeRangePreset.value === "all"');
+    expect(source).not.toContain('all: "近 90 天"');
+  });
+
+  it("keeps fullscreen animation sharp without multiplying large canvas layers", () => {
+    const source = readSource();
+
+    expect(source).toContain('v-if="!fullscreenVisible"');
+    expect(source).toContain("useDirtyRect: true");
+    expect(source).toContain("Math.min(getDevicePixelRatio(), 2)");
+    expect(source).not.toContain("getDevicePixelRatio() * 1.5");
+    expect(source).not.toContain("zlevel:");
+    expect(source).toContain("constantSpeed: 72");
+    expect(source).toContain("trailLength: 0");
+    expect(source).toContain('symbol: "circle"');
+    expect(source).toContain('type: "scatter"');
+    expect(source).toContain("chartAutoresize = { throttle: 120 }");
+  });
+
+  it("does not classify foreign locations as abnormal by geography alone", () => {
+    const source = readSource();
+
+    expect(source).toContain('mapMetric = ref<"traffic" | "risk">("traffic")');
+    expect(source).toContain("riskColor(item.risk_level)");
+    expect(source).not.toContain('item.country !== "中国"');
+  });
+
+  it("uses backend coordinates and keeps unmapped locations in the ranking", () => {
+    const source = readSource();
+
+    expect(source).toContain("item.longitude");
+    expect(source).toContain("item.latitude");
+    expect(source).toContain("chinaRankRows");
+    expect(source).toContain('全部（保留期 ${periodMetadata.value.retention_days} 天）');
+    expect(source).not.toContain('from "./worldMapSource"');
+  });
+});

frontend/src/components/PermissionMonitoring.test.ts

@@ -35,19 +35,26 @@ vi.mock("@/api/projectPermissions", () => ({
       status: "healthy", health_score: 95, issues: [],
       sample_sufficient: true,
       score_breakdown: {
-        performance: { weight: 40, deduction: 0 },
+        performance: { weight: 25, deduction: 0 },
         deny_rate: { weight: 20, deduction: 0 },
         cache: {
           weight: 25, deduction: 5, sample_sufficient: true,
           scope: "sliding_window", window_seconds: 3600,
         },
-        alerts: { weight: 15, deduction: 0 },
+        alerts: { weight: 10, deduction: 0 },
+        runtime: { weight: 20, deduction: 0 },
       },
       last_hour: {
         total_checks: 30, denied_checks: 2, deny_rate: 6.67,
         avg_elapsed_ms: 3.5, error_alerts: 0, warning_alerts: 0,
       },
       cache_stats: { cache_items: { total_count: 60 }, cache_metrics: {} },
+      components: {
+        database: { status: "healthy", latency_ms: 2.1 },
+        permission_log_writer: { status: "healthy", running: true, queue_size: 0, queue_capacity: 10000, dropped_entries: 0 },
+        security_log_writer: { status: "healthy", running: true, queue_size: 0, queue_capacity: 20000, dropped_entries: 0 },
+        retention: { status: "healthy", running: true, access_log_retention_days: 90, metric_retention_days: 400 },
+      },
     },
   }),
   fetchPermissionAlerts: vi.fn().mockResolvedValue({ data: { total: 0, alerts: [] } }),
@@ -98,11 +105,13 @@ describe("PermissionMonitoring.vue", () => {
     expect(typeof wrapper.vm.refresh).toBe("function");
   });
 
-  it("passes admin-only access to security logs", () => {
+  it("keeps security events in security center instead of access logs", () => {
     const source = readFileSync(resolve(__dirname, "./PermissionMonitoring.vue"), "utf8");
 
     expect(source).toContain("isAdmin?: boolean");
-    expect(source).toContain(':show-security-log="props.isAdmin"');
+    expect(source).toContain('<SecurityCenter v-if="props.isAdmin"');
+    expect(source).toContain('<PermissionAccessLogs ref="accessLogsRef" />');
+    expect(source).not.toContain(':show-security-log="props.isAdmin"');
   });
 
   it("uses a full-height source-analysis tab without forcing scroll on other tabs", () => {
@@ -133,24 +142,51 @@ describe("PermissionMonitoring.vue", () => {
     expect(source).toContain('label="运行概览"');
     expect(source).toContain('label="安全中心"');
     expect(source).toContain('label="性能趋势"');
-    expect(source).toContain('label="访问审计"');
+    expect(source).toContain('label="访问日志"');
     expect(source).toContain('label="来源分析"');
+    expect(source).toContain('label="性能趋势" name="trends" lazy');
+    expect(source).toContain('label="访问日志" name="logs" lazy');
+    expect(source).toContain('label="来源分析" name="ip-locations" lazy');
     expect(source).toContain('<SecurityCenter v-if="props.isAdmin"');
     expect(source).toContain('name="security"');
     expect(source).toContain('label: "今日监测事件"');
     expect(source).toContain('label: "每分钟事件"');
     expect(source).toContain('label: "今日通过率"');
-    expect(source).toContain('label: "历史事件总数"');
+    expect(source).toContain('class="metric-strip"');
+    expect(source).toContain('class="metric-strip-detail"');
+    expect(source).toContain('detail: `历史 ${statsSummary.value.total_logs.toLocaleString()}`');
+    expect(source).toContain("运行指标");
+    expect(source).toContain('const formatResponseTime');
+    expect(source).toContain('return "<0.1ms"');
+    expect(source).toContain("业务样本不足");
+    expect(source).toContain("组件在线不代表指标已完成评估");
+    expect(source).toContain('class="overview-pane"');
+    expect(source).toContain('class="overview-hero-card"');
+    expect(source).toContain('class="operations-card"');
+    expect(source).toContain('class="operations-grid"');
+    expect(source).toContain('class="alerts-section"');
+    expect(source).toContain("grid-template-columns: minmax(210px, 0.85fr)");
+    expect(source).toContain('class="status-section runtime-section"');
+    expect(source).toContain('class="empty-alert-state"');
+    expect(source).toContain('const hasCacheSamples = computed');
     expect(source).toContain("异常拒绝排行");
+    expect(source).toContain("告警数据加载失败，不能据此判断系统正常");
+    expect(source).toContain("const formatUpdatedTime");
+    expect(source).toContain("更新 {{ formatUpdatedTime(lastUpdatedAt) }}");
+    expect(source).toContain("runtimeComponentItems");
 
     expect(source).not.toContain('label="实时概览"');
     expect(source).not.toContain('label="趋势分析"');
-    expect(source).not.toContain('label="访问日志"');
+    expect(source).not.toContain('label="访问审计"');
     expect(source).not.toContain('label="IP属地"');
     expect(source).not.toContain('label: "今日总检查"');
     expect(source).not.toContain('label: "每分钟请求"');
     expect(source).not.toContain('label: "今日允许率"');
     expect(source).not.toContain('label: "历史总记录"');
+    expect(source).not.toContain('label: "历史事件总数"');
+    expect(source).not.toContain('class="summary-card"');
+    expect(source).not.toContain('class="overview-toolbar"');
     expect(source).not.toContain("被拒绝最多的权限");
+    expect(source).not.toContain("暂无告警，系统运行正常");
   });
 });

frontend/src/components/PermissionTrendCharts.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const readSource = () => readFileSync(resolve(__dirname, "./PermissionTrendCharts.vue"), "utf8");
+
+describe("PermissionTrendCharts", () => {
+  it("renders explicit empty states instead of zero-value charts when samples are unavailable", () => {
+    const source = readSource();
+
+    expect(source).toContain("暂无有效响应时间样本");
+    expect(source).toContain("暂无缓存访问样本");
+    expect(source).toContain("暂无权限检查样本");
+    expect(source).toContain("const hasResponseSamples = computed");
+    expect(source).toContain("const hasCacheSamples = computed");
+  });
+
+  it("sorts points chronologically and includes the date in 24-hour labels", () => {
+    const source = readSource();
+
+    expect(source).toContain('String(d.getHours()).padStart(2, "0")');
+    expect(source).toContain("dataPoints.value = [...res.data.data_points].sort(");
+    expect(source).toContain("new Date(left.bucket_time).getTime() - new Date(right.bucket_time).getTime()");
+  });
+
+  it("keeps period selection, update time and refresh together in the tab toolbar", () => {
+    const source = readSource();
+
+    expect(source).toContain('class="toolbar-actions"');
+    expect(source).toContain("最近成功更新：{{ formatLastUpdated(lastUpdatedAt) }}");
+    expect(source).toContain('@click="loadData">刷新');
+  });
+
+  it("uses compact chart surfaces while preserving a two-column desktop layout", () => {
+    const source = readSource();
+
+    expect(source).toContain("padding: 0 12px 12px");
+    expect(source).toContain("grid-template-columns: repeat(2, 1fr)");
+    expect(source).toContain("min-height: 276px");
+    expect(source).toContain("height: 212px");
+    expect(source).toContain("gap: 10px");
+  });
+});

frontend/src/components/PermissionTrendCharts.vue

@@ -3,50 +3,72 @@
     <div class="trend-toolbar">
       <div class="toolbar-left">
         <span class="toolbar-title">系统性能趋势</span>
+        <span v-if="lastUpdatedAt" class="ctms-updated-at">最近成功更新：{{ formatLastUpdated(lastUpdatedAt) }}</span>
+      </div>
+      <div class="toolbar-actions">
+        <TimeRangeSelector v-model="timeRangePreset" @change="loadData" />
+        <el-button size="small" :loading="loading" @click="loadData">刷新</el-button>
       </div>
-      <el-radio-group v-model="period" size="small" @change="loadData">
-        <el-radio-button value="24h">24小时</el-radio-button>
-        <el-radio-button value="7d">7天</el-radio-button>
-        <el-radio-button value="30d">30天</el-radio-button>
-      </el-radio-group>
     </div>
 
+    <el-alert v-if="loadError" :title="loadError" type="warning" show-icon :closable="false" class="load-alert" />
+
     <div v-loading="loading" class="charts-grid">
-      <div class="chart-card">
+      <div class="chart-card" :class="{ 'is-empty': !hasEventSamples }">
         <div class="chart-header">
           <div class="chart-icon blue">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
           </div>
-          <h4>监测事件趋势</h4>
+          <div class="chart-title-group">
+            <h4>监测事件趋势</h4>
+            <span>允许与拒绝</span>
+          </div>
+          <strong class="chart-latest">{{ latestEventLabel }}</strong>
         </div>
-        <v-chart :option="checksChartOption" autoresize class="chart" />
+        <v-chart v-if="hasEventSamples" :option="checksChartOption" autoresize class="chart" />
+        <div v-else class="trend-empty-state">所选时段暂无监测事件</div>
       </div>
-      <div class="chart-card">
+      <div class="chart-card" :class="{ 'is-empty': !hasResponseSamples }">
         <div class="chart-header">
           <div class="chart-icon cyan">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
           </div>
-          <h4>响应时间趋势</h4>
+          <div class="chart-title-group">
+            <h4>响应时间趋势</h4>
+            <span>平均值与最大值</span>
+          </div>
+          <strong class="chart-latest">{{ latestResponseLabel }}</strong>
         </div>
-        <v-chart :option="responseTimeOption" autoresize class="chart" />
+        <v-chart v-if="hasResponseSamples" :option="responseTimeOption" autoresize class="chart" />
+        <div v-else class="trend-empty-state">暂无有效响应时间样本</div>
       </div>
-      <div class="chart-card">
+      <div class="chart-card" :class="{ 'is-empty': !hasCacheSamples }">
         <div class="chart-header">
           <div class="chart-icon green">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
           </div>
-          <h4>缓存命中率</h4>
+          <div class="chart-title-group">
+            <h4>缓存命中率</h4>
+            <span>命中 / 总访问</span>
+          </div>
+          <strong class="chart-latest">{{ latestCacheLabel }}</strong>
         </div>
-        <v-chart :option="cacheHitOption" autoresize class="chart" />
+        <v-chart v-if="hasCacheSamples" :option="cacheHitOption" autoresize class="chart" />
+        <div v-else class="trend-empty-state">暂无缓存访问样本</div>
       </div>
-      <div class="chart-card">
+      <div class="chart-card" :class="{ 'is-empty': !hasDenySamples }">
         <div class="chart-header">
           <div class="chart-icon danger">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
           </div>
-          <h4>异常拒绝率趋势</h4>
+          <div class="chart-title-group">
+            <h4>异常拒绝率趋势</h4>
+            <span>拒绝事件占比</span>
+          </div>
+          <strong class="chart-latest">{{ latestDenyLabel }}</strong>
         </div>
-        <v-chart :option="denyRateOption" autoresize class="chart" />
+        <v-chart v-if="hasDenySamples" :option="denyRateOption" autoresize class="chart" />
+        <div v-else class="trend-empty-state">暂无权限检查样本</div>
       </div>
     </div>
   </div>
@@ -66,21 +88,65 @@ import {
 } from "echarts/components";
 import { fetchPermissionTrends } from "@/api/projectPermissions";
 import type { TrendDataPoint } from "@/types/api";
+import TimeRangeSelector from "./TimeRangeSelector.vue";
 
 use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent]);
 
-const period = ref<"24h" | "7d" | "30d">("24h");
+type TimeRangePreset = "all" | "24h" | "7d" | "30d";
+const timeRangePreset = ref<TimeRangePreset>("24h");
+const timeRangeOptions = [
+  { value: "all", label: "全部" },
+  { value: "24h", label: "24小时" },
+  { value: "7d", label: "7天" },
+  { value: "30d", label: "30天" },
+] as const;
 const loading = ref(false);
 const dataPoints = ref<TrendDataPoint[]>([]);
+const loadError = ref("");
+const lastUpdatedAt = ref<Date | null>(null);
+
+const formatLastUpdated = (value: Date) => {
+  return `${value.getFullYear()}/${value.getMonth() + 1}/${value.getDate()} ${String(value.getHours()).padStart(2, "0")}:${String(value.getMinutes()).padStart(2, "0")}:${String(value.getSeconds()).padStart(2, "0")}`;
+};
 
 const formatTime = (iso: string) => {
   const d = new Date(iso);
-  if (period.value === "24h") return `${d.getHours()}:00`;
+  if (timeRangePreset.value === "24h") return `${d.getMonth() + 1}/${d.getDate()} ${String(d.getHours()).padStart(2, "0")}:00`;
   return `${d.getMonth() + 1}/${d.getDate()}`;
 };
 
 const xLabels = computed(() => dataPoints.value.map((p: TrendDataPoint) => formatTime(p.bucket_time)));
 
+const latestPoint = computed(() => dataPoints.value.at(-1) || null);
+const hasEventSamples = computed(() => dataPoints.value.some((point) => point.total_checks > 0));
+const hasResponseSamples = computed(() =>
+  dataPoints.value.some((point) => point.avg_elapsed_ms > 0 || point.max_elapsed_ms > 0)
+);
+const hasCacheSamples = computed(() =>
+  dataPoints.value.some((point) => point.cache_hits + point.cache_misses > 0)
+);
+const hasDenySamples = computed(() => dataPoints.value.some((point) => point.total_checks > 0));
+
+const latestEventLabel = computed(() =>
+  latestPoint.value && latestPoint.value.total_checks > 0
+    ? `${latestPoint.value.total_checks} 次`
+    : "暂无样本"
+);
+const latestResponseLabel = computed(() =>
+  latestPoint.value && (latestPoint.value.avg_elapsed_ms > 0 || latestPoint.value.max_elapsed_ms > 0)
+    ? `${latestPoint.value.avg_elapsed_ms.toFixed(1)} ms`
+    : "暂无样本"
+);
+const latestCacheLabel = computed(() =>
+  latestPoint.value && latestPoint.value.cache_hits + latestPoint.value.cache_misses > 0
+    ? `${latestPoint.value.cache_hit_rate.toFixed(1)}%`
+    : "暂无样本"
+);
+const latestDenyLabel = computed(() => {
+  if (!latestPoint.value || latestPoint.value.total_checks <= 0) return "暂无样本";
+  return `${((latestPoint.value.denied_checks / latestPoint.value.total_checks) * 100).toFixed(1)}%`;
+});
+
 const baseGridOption = {
   grid: { left: 50, right: 20, top: 20, bottom: 25 },
   tooltip: { trigger: "axis" as const },
@@ -186,7 +252,7 @@ const denyRateOption = computed(() => ({
       symbol: "circle",
       symbolSize: 6,
       data: dataPoints.value.map((p: TrendDataPoint) =>
-        p.total_checks > 0 ? Math.round((p.denied_checks / p.total_checks) * 1000) / 10 : 0
+        p.total_checks > 0 ? Math.round((p.denied_checks / p.total_checks) * 1000) / 10 : null
       ),
       itemStyle: { color: "#ef4444" },
       lineStyle: { width: 2.5 },
@@ -198,10 +264,15 @@ const denyRateOption = computed(() => ({
 const loadData = async () => {
   loading.value = true;
   try {
-    const res = await fetchPermissionTrends(period.value);
-    dataPoints.value = res.data.data_points;
+    const apiPeriod = timeRangePreset.value === "all" ? "30d" : timeRangePreset.value;
+    const res = await fetchPermissionTrends(apiPeriod);
+    dataPoints.value = [...res.data.data_points].sort(
+      (left, right) => new Date(left.bucket_time).getTime() - new Date(right.bucket_time).getTime(),
+    );
+    loadError.value = "";
+    lastUpdatedAt.value = new Date();
   } catch {
-    dataPoints.value = [];
+    loadError.value = "趋势数据加载失败，图表中可能是上次成功获取的数据";
   } finally {
     loading.value = false;
   }
@@ -217,16 +288,21 @@ defineExpose({ refresh: loadData });
   --trend-ink: #1a2332;
   --trend-muted: #64748b;
   --trend-border: #e2e8f0;
-  --trend-radius: 16px;
-  --trend-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
+  --trend-radius: 14px;
+  --trend-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.025);
+  width: 100%;
+  margin: 0;
+  padding: 0 12px 12px;
+  box-sizing: border-box;
 }
 
 .trend-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 18px;
-  margin-bottom: 16px;
+  min-height: 48px;
+  padding: 8px 14px;
+  margin-bottom: 8px;
   background: #fff;
   border: 1px solid var(--trend-border);
   border-radius: var(--trend-radius);
@@ -235,8 +311,8 @@ defineExpose({ refresh: loadData });
 
 .toolbar-left {
   display: flex;
-  flex-direction: column;
-  gap: 2px;
+  align-items: baseline;
+  gap: 8px;
 }
 
 .toolbar-title {
@@ -245,22 +321,37 @@ defineExpose({ refresh: loadData });
   color: var(--trend-ink);
 }
 
-.toolbar-desc {
-  font-size: 12px;
+
+
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.toolbar-updated-at {
   color: var(--trend-muted);
+  font-size: 12px;
+  white-space: nowrap;
 }
 
 .charts-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 14px;
+  gap: 10px;
+}
+
+.load-alert {
+  margin-bottom: 8px;
 }
 
 .chart-card {
   background: #fff;
   border: 1px solid var(--trend-border);
   border-radius: var(--trend-radius);
-  padding: 18px;
+  min-height: 276px;
+  padding: 12px 14px;
   box-shadow: var(--trend-shadow);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
@@ -274,22 +365,22 @@ defineExpose({ refresh: loadData });
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .chart-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   border-radius: 8px;
   flex-shrink: 0;
 }
 
 .chart-icon svg {
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
 }
 
 .chart-icon.blue { background: #eff6ff; color: #3b82f6; }
@@ -304,20 +395,80 @@ defineExpose({ refresh: loadData });
   color: var(--trend-ink);
 }
 
+.chart-title-group {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.chart-title-group span {
+  color: var(--trend-muted);
+  font-size: 11px;
+}
+
+.chart-latest {
+  padding: 4px 7px;
+  border-radius: 8px;
+  background: #f8fafc;
+  color: var(--trend-ink);
+  font-size: 12px;
+  font-weight: 650;
+  white-space: nowrap;
+}
+
 .chart {
-  height: 240px;
+  height: 212px;
   width: 100%;
 }
 
+.trend-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 212px;
+  border: 1px dashed #dbe3ef;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #94a3b8;
+  font-size: 13px;
+}
+
 @media (max-width: 900px) {
   .charts-grid {
     grid-template-columns: 1fr;
   }
 
   .trend-toolbar {
-    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .toolbar-actions {
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+  }
+
+  .chart-card {
+    min-height: 260px;
+  }
+}
+
+@media (max-width: 600px) {
+  .trend-charts {
+    padding: 0 8px 10px;
+  }
+
+  .trend-toolbar,
+  .toolbar-left {
     align-items: flex-start;
-    gap: 12px;
+    flex-direction: column;
+  }
+
+  .toolbar-actions {
+    width: 100%;
+    justify-content: flex-start;
   }
 }
 </style>

frontend/src/components/SecurityCenter.test.ts

@@ -5,21 +5,33 @@ import { resolve } from "node:path";
 const readSource = () => readFileSync(resolve(__dirname, "./SecurityCenter.vue"), "utf8");
 
 describe("SecurityCenter", () => {
-  it("renders the security dashboard in the same audit-card style as access logs", () => {
+  it("renders a compact security analysis summary in the same audit-card style as access logs", () => {
     const source = readSource();
 
     expect(source).toContain("audit-filters");
     expect(source).toContain("audit-metrics");
-    expect(source).toContain("audit-grid");
     expect(source).toContain("metric-card");
-    expect(source).toContain("ranking-card");
+    expect(source).toContain("security-analysis-card");
+    expect(source).toContain("risk-preview-list");
+    expect(source).toContain("risk-summary-panel");
+    expect(source).toContain("risk-summary-title");
+    expect(source).toContain("topRiskPreview");
+    expect(source).toContain('class="security-overview"');
+    expect(source).toContain('aria-label="安全指标"');
+    expect(source).toContain('class="security-toolbar"');
+    expect(source).toContain("timeRangePreset");
+    expect(source).toContain("timeRangeOptions");
+    expect(source).toContain("buildTimeRangeFromPreset");
+    expect(source).toContain("onTimeRangeChange");
+    expect(source).not.toContain("audit-grid");
+    expect(source).not.toContain("ranking-card");
     expect(source).not.toContain("security-summary");
     expect(source).not.toContain("security-card");
   });
 
   it("places filters inside the event details section instead of the page header", () => {
     const source = readSource();
-    const tableIndex = source.indexOf('<section class="security-table-wrap">');
+    const tableIndex = source.indexOf('<section ref="securityEventsSectionRef" class="security-table-wrap">');
     const filtersIndex = source.indexOf('<section class="audit-filters detail-filters">');
 
     expect(tableIndex).toBeGreaterThan(-1);
@@ -27,20 +39,32 @@ describe("SecurityCenter", () => {
     expect(source).not.toContain('<section class="audit-filters">\n      <el-select');
   });
 
-  it("surfaces abnormal IP location ranking, endpoint type distribution and risk level distribution", () => {
+  it("keeps risk levels on the page and opens abnormal sources in a compact ranking dialog", () => {
     const source = readSource();
 
-    expect(source).toContain("异常排行");
-    expect(source).toContain("事件分布");
-    expect(source).toContain("访问的接口类型");
+    expect(source).toContain("异常分析");
+    expect(source).toContain("查看异常分析");
+    expect(source).toContain("analysisDialogVisible");
+    expect(source).toContain("openAnalysisDialog");
+    expect(source).toContain("jumpToSecurityEvents");
+    expect(source).toContain("securityEventsSectionRef");
+    expect(source).toContain("scrollIntoView");
+    expect(source).toContain('<el-dialog v-model="analysisDialogVisible"');
+    expect(source).toContain('width="min(1180px, 96vw)"');
+    expect(source).toContain("analysis-ranking-dialog");
+    expect(source).toContain("analysis-ranking-head");
+    expect(source).toContain("endpoint-summary-chips");
+    expect(source).toContain("analysis-rank-grid");
+    expect(source).toContain("analysis-rank-card");
+    expect(source).toContain("analysis-rank-card-stats");
+    expect(source).toContain("查看事件明细");
+    expect(source).not.toContain('<section class="analysis-dialog-panel');
     expect(source).toContain("风险等级");
-    expect(source).toContain("event-distribution-card");
-    expect(source).toContain("distribution-section");
-    expect(source).toContain(".event-distribution-card > .section-head");
-    expect(source).toContain("padding-top: 24px");
     expect(source).toContain("ipRiskStats");
     expect(source).toContain("endpointTypeStats");
     expect(source).toContain("riskLevelStats");
+    expect(source.match(/v-for="item in riskLevelStats"/g)).toHaveLength(1);
+    expect(source).not.toContain("compact-risk-section");
     expect(source).toContain("resolveEndpointType");
     expect(source).toContain("formatIpLocation");
     expect(source).toContain("fallbackIpLocation");
@@ -49,11 +73,13 @@ describe("SecurityCenter", () => {
     expect(source).toContain("row.ip_isp");
     expect(source).toContain("item.location");
     expect(source).toContain("categoryText");
-    expect(source).toContain("rank-main-line");
-    expect(source).toContain("rank-meta-line");
+    expect(source).toContain("analysis-rank-card-ip");
+    expect(source).toContain("analysis-rank-card-meta");
     expect(source).toContain("lastSeenAt");
     expect(source).toContain("最后访问");
-    expect(source).toContain("slice(0, 10)");
+    expect(source).toContain("securitySummary.value.top_ips");
+    expect(source).toContain("securitySummary.value.endpoint_type_counts");
+    expect(source).toContain("securitySummary.value.severity_counts");
     expect(source).not.toContain("公网位置待解析");
     expect(source).not.toContain("异常IP（位置）排行");
     expect(source).not.toContain("risk-level-card");
@@ -62,37 +88,84 @@ describe("SecurityCenter", () => {
   it("keeps detailed security events searchable and inspectable", () => {
     const source = readSource();
 
-    expect(source).toContain("detailFilteredEvents");
+    expect(source).toContain("securityQueryParams");
+    expect(source).toContain("keyword: keyword.value.trim() || undefined");
     expect(source).toContain("paginatedEvents");
     expect(source).toContain("openDetail");
-    expect(source).toContain("安全事件明细");
+    expect(source).toContain("security-table-wrap");
     expect(source).toContain('label="IP"');
     expect(source).toContain('label="位置"');
     expect(source).not.toContain('label="来源 IP"');
     expect(source).not.toContain('label="IP来源"');
     expect(source).toContain("搜索 IP、位置、账号、路径或 UA");
     expect(source).toContain("loadSecurityEvents");
+    expect(source).toContain("安全事件加载失败，页面中可能是上次成功获取的数据");
+    expect(source).toContain("lastUpdatedAt");
+    expect(source).toContain("安全事件详情");
+    expect(source).toContain("请求概览");
+    expect(source).toContain("原始 HTTP 请求");
+    expect(source).toContain("User-Agent");
+    expect(source).toContain("构建信息");
+    expect(source).toContain("更多审计信息");
+    expect(source).toContain("日志标识");
+    expect(source).toContain("传输信息");
+    expect(source).toContain("客户端标识");
+    expect(source).toContain("securityRequestOverviewFields(selectedEvent)");
+    expect(source).toContain("securityAuditMetadataFields(selectedEvent)");
+    expect(source).toContain("securityRequestSnapshotFields(selectedEvent)");
+    expect(source).toContain("buildSecurityRawRequestBlock(selectedEvent)");
+    expect(source).toContain("securityClientSourceLabel(selectedEvent)");
+    expect(source).toContain("历史日志未采集原始请求快照");
+    expect(source).toContain("历史日志未采集原始 HTTP 请求");
+    expect(source).not.toContain("securityDetailFieldItems(selectedEvent)");
+    expect(source).not.toContain("<h4>接口</h4>");
+    expect(source).not.toContain("<h4>访问字段</h4>");
+    expect(source).not.toContain("<h4>请求快照</h4>");
+    expect(source).not.toContain("原始请求快照（脱敏）");
+    expect(source).not.toContain("请求头（脱敏）");
+    expect(source).not.toContain("未记录请求头");
+  });
+
+  it("opens full security logs as a dialog inside security center", () => {
+    const source = readSource();
+
+    expect(source).toContain("安全日志");
+    expect(source).toContain("securityLogDialogVisible");
+    expect(source).toContain("securityLogDialogLoading");
+    expect(source).toContain("securityTerminalWindowRef");
+    expect(source).toContain("securityTerminalLines");
+    expect(source).toContain("buildSecurityTerminalLine");
+    expect(source).toContain("openSecurityLogDialog");
+    expect(source).toContain("scrollSecurityTerminalToBottom");
+    expect(source).toContain("downloadSecurityLog");
+    expect(source).toContain("saveFileWithFeedback");
+    expect(source).toContain("securityRequestTarget(event)");
+    expect(source).toContain("<el-dialog v-model=\"securityLogDialogVisible\"");
+    expect(source).toContain("securityTerminalLines.join");
+    expect(source).toContain("security-access-logs.log");
+    expect(source).toContain("terminal-window dialog-terminal-window");
   });
 
   it("labels abnormal IP events and paginates details like account management", () => {
     const source = readSource();
 
-    expect(source).toContain('{ label: "异常IP", value: "ABNORMAL_IP" }');
+    expect(source).not.toContain('value: "ABNORMAL_IP"');
+    expect(source).toContain('label: "风险来源 IP"');
     expect(source).toContain('v-model:current-page="page"');
     expect(source).toContain('v-model:page-size="pageSize"');
     expect(source).toContain(':page-sizes="[10, 20, 50]"');
     expect(source).toContain('layout="prev, pager, next, sizes, total"');
   });
 
-  it("calculates dashboard statistics from all events instead of detail filters or current page", () => {
+  it("uses server-side pagination and aggregate facets instead of loading every event", () => {
     const source = readSource();
 
     expect(source).toContain("statsEvents");
-    expect(source).toContain("detailFilteredEvents");
+    expect(source).toContain("securitySummary");
     expect(source).toContain("loadSecurityStats");
-    expect(source).toContain("SECURITY_STATS_PAGE_SIZE");
-    expect(source).toContain("statsEvents.value");
-    expect(source).not.toContain("const uniqueIpCount = new Set(events.value");
-    expect(source).not.toContain("filteredStatsEvents");
+    expect(source).toContain("response.data.summary");
+    expect(source).toContain("@current-change=\"loadSecurityEvents\"");
+    expect(source).not.toContain("for (let nextPage = 2; nextPage <= totalPages; nextPage += 1) {\n    const res = await fetchSecurityAccessLogs");
+    expect(source).toContain("fetchAllSecurityEvents");
   });
 });

frontend/src/components/TimeRangeSelector.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-radio-group
+    :model-value="props.modelValue"
+    size="small"
+    @change="onChange"
+  >
+    <el-radio-button
+      v-for="item in currentOptions"
+      :key="item.value"
+      :label="item.value"
+    >{{ item.label }}</el-radio-button>
+  </el-radio-group>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface OptionItem {
+  value: string | number;
+  label: string;
+}
+
+const props = defineProps<{
+  modelValue: string | number;
+  options?: readonly OptionItem[] | OptionItem[];
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | number): void;
+  (e: "change", value: string | number): void;
+}>();
+
+const defaultOptions = [
+  { value: "all", label: "全部" },
+  { value: "24h", label: "24小时" },
+  { value: "7d", label: "7天" },
+  { value: "30d", label: "30天" },
+] as const;
+
+const currentOptions = computed(() => props.options || defaultOptions);
+
+const onChange = (val: string | number) => {
+  emit("update:modelValue", val);
+  emit("change", val);
+};
+</script>

frontend/src/components/WebLayout.vue

@@ -316,10 +316,12 @@
                 {{ userDisplayInitial }}
               </el-avatar>
               <span class="username">{{ userDisplayName }}</span>
+              <AccountConnectionStatus mode="indicator" />
               <el-icon><ArrowDown /></el-icon>
             </span>
             <template #dropdown>
               <el-dropdown-menu class="user-dropdown-menu">
+                <AccountConnectionStatus mode="details" />
                 <el-dropdown-item command="workbench">
                   <el-icon><Suitcase /></el-icon>
                   <span>工作台</span>
@@ -429,6 +431,7 @@ import { dispatchDesktopRefreshCurrentView } from "../composables/useDesktopRefr
 import { useDesktopShortcuts } from "../composables/useDesktopShortcuts";
 import type { DesktopCommand } from "../types/desktopCommands";
 import DesktopCommandPalette from "./DesktopCommandPalette.vue";
+import AccountConnectionStatus from "./AccountConnectionStatus.vue";
 import ProfileSettings from "../views/ProfileSettings.vue";
 import DesktopPreferences from "../views/DesktopPreferences.vue";
 import { getActiveLayoutPath } from "./layout/navigation";
@@ -2364,6 +2367,7 @@ useDesktopShortcuts(
 }
 
 .ctms-route-shell {
+  width: 100%;
   min-height: 100%;
   transform-origin: top center;
 }

frontend/src/components/worldMapSource.ts

@@ -1,110 +0,0 @@
-// 地图数据来源：https://unpkg.com/echarts@4.9.0/map/json/world.json
-// 组件直接导入本地缓存的 ECharts 世界地图 GeoJSON，避免运行时依赖外部网络。
-
-import type { IpLocationStatItem } from "../types/api";
-
-export const normalizeWorldCountryName = (value?: string | null) => {
-  const country = String(value || "").trim();
-  const aliases: Record<string, string> = {
-    中国: "China",
-    China: "China",
-    "Mainland China": "China",
-    中国香港: "China",
-    中国澳门: "China",
-    中国台湾: "China",
-    美国: "United States",
-    "United States": "United States",
-    "United States of America": "United States",
-    USA: "United States",
-    Australia: "Australia",
-    澳大利亚: "Australia",
-    Japan: "Japan",
-    日本: "Japan",
-    Singapore: "Singapore",
-    新加坡: "Singapore",
-    Germany: "Germany",
-    德国: "Germany",
-    France: "France",
-    法国: "France",
-    "United Kingdom": "United Kingdom",
-    英国: "United Kingdom",
-    Canada: "Canada",
-    加拿大: "Canada",
-    India: "India",
-    印度: "India",
-    Russia: "Russia",
-    俄罗斯: "Russia",
-  };
-  return aliases[country] || country;
-};
-
-export const countryCoordinates: Record<string, [number, number]> = {
-  China: [104.1954, 35.8617],
-  "United States": [-95.7129, 37.0902],
-  Netherlands: [5.2913, 52.1326],
-  Türkiye: [35.2433, 38.9637],
-  Turkey: [35.2433, 38.9637],
-  Australia: [133.7751, -25.2744],
-  Japan: [138.2529, 36.2048],
-  Singapore: [103.8198, 1.3521],
-  Germany: [10.4515, 51.1657],
-  France: [2.2137, 46.2276],
-  "United Kingdom": [-3.436, 55.3781],
-  Canada: [-106.3468, 56.1304],
-  India: [78.9629, 20.5937],
-  Russia: [105.3188, 61.524],
-};
-
-export const cityCoordinates: Record<string, [number, number]> = {
-  "局域网": [121.86, 31.45],
-  "北京市": [116.4074, 39.9042],
-  "天津市": [117.2008, 39.0842],
-  "河北省": [114.5025, 38.0455],
-  "山西省": [112.5492, 37.857],
-  "内蒙古自治区": [111.6708, 40.8183],
-  "辽宁省": [123.4315, 41.8057],
-  "吉林省": [125.3245, 43.8868],
-  "黑龙江省": [126.6424, 45.7567],
-  "上海市": [121.4737, 31.2304],
-  "江苏省": [118.7633, 32.0617],
-  "浙江省": [120.1551, 30.2741],
-  "安徽省": [117.2272, 31.8206],
-  "福建省": [119.2965, 26.0745],
-  "江西省": [115.8582, 28.682],
-  "山东省": [117.1201, 36.6512],
-  "河南省": [113.6254, 34.7466],
-  "湖北省": [114.3055, 30.5928],
-  "湖南省": [112.9388, 28.2282],
-  "广东省": [113.2644, 23.1291],
-  "广西壮族自治区": [108.3669, 22.817],
-  "海南省": [110.3312, 20.0311],
-  "重庆": [106.5516, 29.563],
-  "重庆市": [106.5516, 29.563],
-  "四川省": [104.0665, 30.5723],
-  "贵州省": [106.6302, 26.647],
-  "云南省": [102.8329, 24.8801],
-  "西藏自治区": [91.1322, 29.6604],
-  "陕西省": [108.9398, 34.3416],
-  "甘肃省": [103.8343, 36.0611],
-  "青海省": [101.7782, 36.6171],
-  "宁夏回族自治区": [106.2309, 38.4872],
-  "新疆维吾尔自治区": [87.6168, 43.8256],
-  "台湾省": [121.5654, 25.033],
-  "香港特别行政区": [114.1694, 22.3193],
-  "澳门特别行政区": [113.5439, 22.1987],
-  "南京": [118.7969, 32.0603],
-  "南京市": [118.7969, 32.0603],
-  "San Jose": [-121.8863, 37.3382],
-  "South Holland": [4.493, 52.0208],
-  "Istanbul": [28.9784, 41.0082],
-};
-
-export const resolveSourceCoordinate = (item: IpLocationStatItem): [number, number] | null => {
-  if (item.location === "局域网") return cityCoordinates["局域网"];
-  const city = String(item.city || "").trim();
-  if (city && cityCoordinates[city]) return cityCoordinates[city];
-  const province = String(item.province || "").trim();
-  if (province && cityCoordinates[province]) return cityCoordinates[province];
-  const country = normalizeWorldCountryName(item.country);
-  return country ? countryCoordinates[country] || null : null;
-};