Cheng Zhou
6cefa620e4
重新设计权限系统所有 UI 组件的视觉风格，统一配色、圆角、阴影和交互动效： - 实时概览：统计卡片加图标和渐变色条，健康评分改为环形进度，告警改为卡片式 - 趋势分析：图表卡片加彩色图标标识，ECharts 配色升级为渐变面积填充 - 访问日志：指标卡片带图标，日志审计改为卡片式入口，IP排行前三高亮 - IP属地：工具栏重设计，排行列表前三渐变高亮，指标卡片统一新风格 - 系统级权限：从 el-table 改为自定义卡片列表，模块块独立圆角卡片 - 项目权限配置：空状态引导优化，成员表格加头像，工具栏加背景容器 - 角色概览卡片：加进度条可视化，hover 微动效 - 接口权限矩阵：工具栏分离布局，表格圆角包裹 - 角色管理抽屉：侧边栏选中态渐变，操作行 hover 高亮 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
import { describe, it, expect, vi } from "vitest";
|
|
import { mount } from "@vue/test-utils";
|
|
import PermissionMonitoring from "@/components/PermissionMonitoring.vue";
|
|
|
|
vi.mock("@/api/projectPermissions", () => ({
|
|
fetchPermissionMetrics: vi.fn().mockResolvedValue({
|
|
data: {
|
|
check_metrics: {
|
|
total_checks: 1000, allowed_checks: 950, denied_checks: 50,
|
|
total_time: 5.234, min_time: 0.001, max_time: 0.05, avg_time: 0.005,
|
|
allow_rate: 95.0, deny_rate: 5.0, error_rate: 0.1, errors: 1,
|
|
},
|
|
cache_metrics: {
|
|
total_accesses: 1000, cache_hits: 850, cache_misses: 150,
|
|
cache_invalidations: 5, hit_rate: 85.0, miss_rate: 15.0,
|
|
},
|
|
uptime_seconds: 3600,
|
|
},
|
|
}),
|
|
fetchPermissionHealth: vi.fn().mockResolvedValue({
|
|
data: {
|
|
status: "healthy", health_score: 95, issues: [],
|
|
metrics: {}, cache_stats: { cache_items: { total_count: 60 }, cache_metrics: {} },
|
|
},
|
|
}),
|
|
fetchPermissionAlerts: vi.fn().mockResolvedValue({ data: { total: 0, alerts: [] } }),
|
|
fetchTopDenied: vi.fn().mockResolvedValue({ data: { items: [] } }),
|
|
fetchStatsSummary: vi.fn().mockResolvedValue({
|
|
data: {
|
|
total_logs: 5000,
|
|
today: { total_checks: 200, allowed_checks: 190, denied_checks: 10, avg_elapsed_ms: 3.5, max_elapsed_ms: 45, allow_rate: 95, deny_rate: 5 },
|
|
last_hour: { total_checks: 30, allowed_checks: 28, denied_checks: 2, requests_per_minute: 0.5 },
|
|
},
|
|
}),
|
|
fetchPermissionTrends: vi.fn().mockResolvedValue({ data: { period: "24h", data_points: [] } }),
|
|
fetchAccessLogs: vi.fn().mockResolvedValue({ data: { total: 0, page: 1, page_size: 50, items: [] } }),
|
|
}));
|
|
|
|
describe("PermissionMonitoring.vue", () => {
|
|
it("renders monitoring dashboard with tabs", () => {
|
|
const wrapper = mount(PermissionMonitoring, {
|
|
global: {
|
|
stubs: {
|
|
ElTabs: false,
|
|
ElTabPane: false,
|
|
PermissionTrendCharts: true,
|
|
PermissionAccessLogs: true,
|
|
PermissionIpLocations: true,
|
|
},
|
|
},
|
|
});
|
|
|
|
expect(wrapper.find(".permission-monitoring").exists()).toBe(true);
|
|
});
|
|
|
|
it("exposes refresh method", () => {
|
|
const wrapper = mount(PermissionMonitoring, {
|
|
global: {
|
|
stubs: {
|
|
ElTabs: true,
|
|
ElTabPane: true,
|
|
PermissionTrendCharts: true,
|
|
PermissionAccessLogs: true,
|
|
PermissionIpLocations: true,
|
|
},
|
|
},
|
|
});
|
|
|
|
expect(typeof wrapper.vm.refresh).toBe("function");
|
|
});
|
|
});
|