权限监控与管理界面全面美化

重新设计权限系统所有 UI 组件的视觉风格，统一配色、圆角、阴影和交互动效：
- 实时概览：统计卡片加图标和渐变色条，健康评分改为环形进度，告警改为卡片式
- 趋势分析：图表卡片加彩色图标标识，ECharts 配色升级为渐变面积填充
- 访问日志：指标卡片带图标，日志审计改为卡片式入口，IP排行前三高亮
- IP属地：工具栏重设计，排行列表前三渐变高亮，指标卡片统一新风格
- 系统级权限：从 el-table 改为自定义卡片列表，模块块独立圆角卡片
- 项目权限配置：空状态引导优化，成员表格加头像，工具栏加背景容器
- 角色概览卡片：加进度条可视化，hover 微动效
- 接口权限矩阵：工具栏分离布局，表格圆角包裹
- 角色管理抽屉：侧边栏选中态渐变，操作行 hover 高亮

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/components/PermissionIpLocations.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const readSource = () => readFileSync(resolve(__dirname, "./PermissionIpLocations.vue"), "utf8");
+const readMapSource = () => readFileSync(resolve(__dirname, "./chinaProvinceMap.ts"), "utf8");
+
+describe("PermissionIpLocations", () => {
+  it("renders IP location visualization without duplicate region detail table", () => {
+    const source = readSource();
+
+    expect(source).toContain("fetchIpLocations");
+    expect(source).toContain("unique_ip_count");
+    expect(source).not.toContain("来源地域明细");
+    expect(source).not.toContain("table-card");
+    expect(source).not.toContain("<el-table :data=\"items\"");
+  });
+
+  it("renders an interactive China map and primary metric cards", () => {
+    const source = readSource();
+
+    expect(source).toContain("VChart");
+    expect(source).toContain("chinaMapOption");
+    expect(source).toContain("用户分布图");
+    expect(source).toContain("访问次数");
+    expect(source).toContain("访问用户数");
+    expect(source).toContain("来源 IP 数");
+    expect(source).toContain("summary");
+  });
+
+  it("uses the standard geojson.cn China map data instead of generated rectangles", () => {
+    const source = readSource();
+    const mapSource = readMapSource();
+
+    expect(source).toContain("../assets/china.json");
+    expect(mapSource).toContain("geojson.cn/api/china/1.6.3/china.json");
+    expect(mapSource).not.toContain("ProvinceBox");
+    expect(mapSource).not.toContain("provinceBoxes");
+  });
+
+  it("hides the map legend and disables map zoom interactions", () => {
+    const source = readSource();
+
+    expect(source).not.toContain("visualMap:");
+    expect(source).toContain("roam: false");
+    expect(source).not.toContain("scaleLimit");
+  });
+
+  it("uses narrow metric cards without helper subtitles", () => {
+    const source = readSource();
+
+    expect(source).toContain("min-height: 64px");
+    expect(source).toContain("padding: 10px 16px");
+    expect(source).toContain("right: -46px");
+    expect(source).toContain("bottom: -52px");
+    expect(source).toContain("border-radius: 18px");
+    expect(source).not.toContain("<small>{{ card.hint }}</small>");
+    expect(source).not.toContain("hint:");
+    expect(source).not.toContain("权限检查总量");
+  });
+
+  it("removes the duplicated hero copy above the map", () => {
+    const source = readSource();
+
+    expect(source).toContain("ip-locations-toolbar");
+    expect(source).not.toContain("权限监控 / IP属地");
+    expect(source).not.toContain("按访问日志聚合省市、用户与来源 IP");
+    expect(source).not.toContain("悬停省份查看访问次数、访问用户数和来源 IP 数");
+    expect(source).not.toContain("hero-desc");
+    expect(source).not.toContain("eyebrow");
+  });
+
+  it("places the period filter toolbar on the left", () => {
+    const source = readSource();
+
+    expect(source).toContain(".ip-hero");
+    expect(source).toContain("justify-content: flex-start");
+    expect(source).not.toContain("justify-content: flex-end");
+  });
+});