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

重新设计权限系统所有 UI 组件的视觉风格，统一配色、圆角、阴影和交互动效： - 实时概览：统计卡片加图标和渐变色条，健康评分改为环形进度，告警改为卡片式 - 趋势分析：图表卡片加彩色图标标识，ECharts 配色升级为渐变面积填充 - 访问日志：指标卡片带图标，日志审计改为卡片式入口，IP排行前三高亮 - IP属地：工具栏重设计，排行列表前三渐变高亮，指标卡片统一新风格 - 系统级权限：从 el-table 改为自定义卡片列表，模块块独立圆角卡片 - 项目权限配置：空状态引导优化，成员表格加头像，工具栏加背景容器 - 角色概览卡片：加进度条可视化，hover 微动效 - 接口权限矩阵：工具栏分离布局，表格圆角包裹 - 角色管理抽屉：侧边栏选中态渐变，操作行 hover 高亮 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-20 14:36:35 +08:00
parent e95eeed90e
commit 6cefa620e4
68 changed files with 6927 additions and 984 deletions
@@ -0,0 +1,820 @@
+<template>
+  <div class="access-logs">
+    <section class="audit-filters">
+      <el-date-picker
+        v-model="dateRange"
+        type="datetimerange"
+        range-separator="至"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        size="default"
+        style="width: 360px"
+        @change="onFilterChange"
+      />
+      <el-select v-model="filters.role" placeholder="角色" clearable style="width: 130px" @change="onFilterChange">
+        <el-option label="ADMIN" value="ADMIN" />
+        <el-option label="PM" value="PM" />
+        <el-option label="CRA" value="CRA" />
+        <el-option label="PV" value="PV" />
+        <el-option label="医学审核" value="MEDICAL_REVIEW" />
+        <el-option label="IMP" value="IMP" />
+        <el-option label="QA" value="QA" />
+      </el-select>
+      <el-select v-model="filters.allowed" placeholder="结果" clearable style="width: 100px" @change="onFilterChange">
+        <el-option label="允许" :value="true" />
+        <el-option label="拒绝" :value="false" />
+      </el-select>
+      <el-input
+        v-model="keyword"
+        placeholder="搜索用户、IP、属地或接口"
+        clearable
+        style="width: 240px"
+        :prefix-icon="SearchIcon"
+      />
+    </section>
+
+    <section class="audit-metrics">
+      <article v-for="card in metricCards" :key="card.label" class="metric-card" :class="card.tone">
+        <div class="metric-icon">
+          <component :is="card.icon" />
+        </div>
+        <div class="metric-body">
+          <span class="metric-label">{{ card.label }}</span>
+          <strong class="metric-value">{{ card.value }}</strong>
+        </div>
+      </article>
+    </section>
+
+    <section class="audit-grid">
+      <article class="ranking-card">
+        <div class="section-head">
+          <div class="section-title-group">
+            <h4>IP访问排行</h4>
+            <p>按来源 IP 排序，账号作为辅助定位</p>
+          </div>
+          <el-tag effect="plain" size="small" type="info">TOP {{ userStats.length }}</el-tag>
+        </div>
+        <div v-if="userStats.length" class="user-rank-list">
+          <div v-for="(user, index) in userStats" :key="`${user.sample_ip_address}-${user.user_id}-${user.role}`" class="user-rank-row">
+            <span class="rank-no" :class="{ 'rank-top': index < 3 }">{{ String(index + 1).padStart(2, "0") }}</span>
+            <div class="rank-user">
+              <strong>{{ user.sample_ip_address || "未知 IP" }}</strong>
+              <small>{{ user.user_name }} / {{ roleLabel(user.role) }}</small>
+              <span class="rank-location">{{ user.primary_location || "未知属地" }}</span>
+            </div>
+            <div class="rank-count">
+              <strong>{{ user.total_count }}</strong>
+              <small :class="{ 'denied-highlight': user.denied_count > 0 }">{{ user.denied_count }} 拒绝</small>
+            </div>
+          </div>
+        </div>
+        <el-empty v-else description="暂无用户行为数据" :image-size="72" />
+      </article>
+
+      <article class="log-launcher-card">
+        <div class="section-head">
+          <div class="section-title-group">
+            <h4>日志审计</h4>
+            <p>查看详细的接口访问与安全事件记录</p>
+          </div>
+        </div>
+        <div class="log-actions">
+          <div class="log-action-item log-action-interface" @click="openInterfaceLogDialog">
+            <div class="log-action-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+            </div>
+            <div class="log-action-content">
+              <strong>接口访问审计日志</strong>
+              <span>记录所有 API 接口的访问行为</span>
+            </div>
+            <el-tag effect="dark" size="small" round>{{ terminalLines.length }} 条</el-tag>
+          </div>
+          <div class="log-action-item log-action-security" @click="openSecurityLogDialog">
+            <div class="log-action-icon security">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+            </div>
+            <div class="log-action-content">
+              <strong>安全事件审计日志</strong>
+              <span>异常访问与安全威胁事件</span>
+            </div>
+            <el-tag v-if="securitySummary.error_count > 0" effect="dark" size="small" round type="danger">{{ securitySummary.error_count }} 异常</el-tag>
+            <el-tag v-else effect="plain" size="small" round type="success">正常</el-tag>
+          </div>
+        </div>
+      </article>
+    </section>
+
+    <el-dialog v-model="interfaceLogDialogVisible" title="接口访问审计日志" width="82%" @opened="scrollTerminalToBottom">
+      <template #header>
+        <div class="dialog-head">
+          <strong>接口访问审计日志</strong>
+          <div class="dialog-actions">
+            <el-tag effect="plain" type="info">最近 {{ terminalLines.length }} 条</el-tag>
+            <el-button size="small" type="primary" @click="downloadInterfaceLog">下载日志</el-button>
+          </div>
+        </div>
+      </template>
+      <div ref="terminalWindowRef" v-loading="loading" class="terminal-window dialog-terminal-window">
+        <pre v-if="terminalLines.length" class="terminal-lines"><code>{{ terminalLines.join("\n") }}</code></pre>
+        <el-empty v-else description="暂无访问流水" :image-size="72" />
+      </div>
+      <div class="logs-pagination">
+        <el-pagination
+          v-model:current-page="page"
+          :page-size="pageSize"
+          :total="total"
+          layout="total, prev, pager, next"
+          @current-change="loadData"
+        />
+      </div>
+    </el-dialog>
+
+    <el-dialog v-model="securityLogDialogVisible" title="安全事件审计日志" width="82%" @opened="scrollSecurityTerminalToBottom">
+      <template #header>
+        <div class="dialog-head">
+          <strong>安全事件审计日志</strong>
+          <div class="dialog-actions">
+            <el-tag effect="plain" type="danger">异常 {{ securitySummary.error_count }}</el-tag>
+            <el-button size="small" type="primary" @click="downloadSecurityLog">下载日志</el-button>
+          </div>
+        </div>
+      </template>
+      <div ref="securityTerminalWindowRef" v-loading="securityLoading" class="terminal-window dialog-terminal-window">
+        <pre v-if="securityTerminalLines.length" class="terminal-lines"><code>{{ securityTerminalLines.join("\n") }}</code></pre>
+        <el-empty v-else description="暂无异常安全访问" :image-size="72" />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h, nextTick, onBeforeUnmount, onMounted, reactive, ref } from "vue";
+import { fetchAccessLogs, fetchSecurityAccessLogs } from "@/api/projectPermissions";
+import type {
+  AccessLogItem,
+  AccessLogsSummary,
+  AccessLogUserStat,
+  SecurityAccessLogItem,
+  SecurityAccessLogsResponse,
+} from "@/types/api";
+import { Search as SearchIcon } from "@element-plus/icons-vue";
+
+const MetricIconVisit = () => h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, [
+  h("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+  h("circle", { cx: "12", cy: "12", r: "3" }),
+]);
+const MetricIconUsers = () => h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, [
+  h("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+  h("circle", { cx: "9", cy: "7", r: "4" }),
+  h("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
+  h("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" }),
+]);
+const MetricIconDeny = () => h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, [
+  h("circle", { cx: "12", cy: "12", r: "10" }),
+  h("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" }),
+]);
+const MetricIconSpeed = () => h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, [
+  h("circle", { cx: "12", cy: "12", r: "10" }),
+  h("polyline", { points: "12 6 12 12 16 14" }),
+]);
+
+const REALTIME_POLL_INTERVAL_MS = 3000;
+
+const emptySummary: AccessLogsSummary = {
+  total_count: 0,
+  unique_user_count: 0,
+  unique_ip_count: 0,
+  denied_count: 0,
+  avg_elapsed_ms: 0,
+};
+
+const emptySecuritySummary: SecurityAccessLogsResponse["summary"] = {
+  total_count: 0,
+  anonymous_count: 0,
+  invalid_token_count: 0,
+  error_count: 0,
+};
+
+const loading = ref(false);
+const securityLoading = ref(false);
+const logs = ref<AccessLogItem[]>([]);
+const securityLogs = ref<SecurityAccessLogItem[]>([]);
+const userStats = ref<AccessLogUserStat[]>([]);
+const summary = ref<AccessLogsSummary>(emptySummary);
+const securitySummary = ref<SecurityAccessLogsResponse["summary"]>(emptySecuritySummary);
+const total = ref(0);
+const page = ref(1);
+const pageSize = 50;
+const dateRange = ref<[Date, Date] | null>(null);
+const keyword = ref("");
+const interfaceLogDialogVisible = ref(false);
+const securityLogDialogVisible = ref(false);
+const terminalWindowRef = ref<HTMLElement | null>(null);
+const securityTerminalWindowRef = ref<HTMLElement | null>(null);
+const realtimeTimer = ref<number | null>(null);
+
+const filters = reactive({
+  role: undefined as string | undefined,
+  allowed: undefined as boolean | undefined,
+});
+
+const ROLE_LABELS: Record<string, string> = {
+  ADMIN: "管理员",
+  PM: "项目负责人",
+  CRA: "CRA",
+  PV: "PV",
+  MEDICAL_REVIEW: "医学审核",
+  IMP: "药品管理",
+  QA: "QA",
+};
+
+const SECURITY_AUTH_LABELS: Record<string, string> = {
+  ANONYMOUS: "匿名",
+  INVALID_TOKEN: "无效令牌",
+  AUTHENTICATED: "已认证",
+};
+
+const formatTerminalTime = (iso: string) => {
+  const date = new Date(iso);
+  const pad = (value: number) => String(value).padStart(2, "0");
+  return `${date.getFullYear()}/${pad(date.getMonth() + 1)}/${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+};
+
+const roleLabel = (role: string) => ROLE_LABELS[role] || role;
+
+const formatIpLocation = (row: AccessLogItem) => {
+  const parts = [row.ip_province, row.ip_city, row.ip_isp].filter(Boolean);
+  return parts.length ? parts.join(" / ") : row.ip_location;
+};
+
+const formatNumber = (value: number) => new Intl.NumberFormat("zh-CN").format(value || 0);
+
+const metricCards = computed(() => [
+  {
+    label: "访问次数",
+    value: formatNumber(summary.value.total_count),
+    tone: "blue",
+    icon: MetricIconVisit,
+  },
+  {
+    label: "访问用户数",
+    value: formatNumber(summary.value.unique_user_count),
+    tone: "cyan",
+    icon: MetricIconUsers,
+  },
+  {
+    label: "拒绝次数",
+    value: formatNumber(summary.value.denied_count),
+    tone: summary.value.denied_count > 0 ? "danger" : "violet",
+    icon: MetricIconDeny,
+  },
+  {
+    label: "平均耗时",
+    value: `${summary.value.avg_elapsed_ms.toFixed(1)}ms`,
+    tone: "indigo",
+    icon: MetricIconSpeed,
+  },
+]);
+
+const buildTerminalLine = (row: AccessLogItem) => {
+  const result = row.allowed ? "ALLOW" : "DENY ";
+  const user = row.user_name || "未知用户";
+  const ip = row.ip_address || "-";
+  const location = formatIpLocation(row) || "未知属地";
+  return `${formatTerminalTime(row.created_at)} [${result}] role=${roleLabel(row.role)} user=${user} ip=${ip} loc=${location} endpoint=${row.endpoint_key} cost=${row.elapsed_ms.toFixed(1)}ms`;
+};
+
+const buildSecurityTerminalLine = (row: SecurityAccessLogItem) => {
+  const ip = row.client_ip || "未知 IP";
+  const account = row.account_label || "未知账号";
+  const auth = SECURITY_AUTH_LABELS[row.auth_status] || row.auth_status;
+  const userAgent = row.user_agent || "-";
+  return `${formatTerminalTime(row.created_at)} [SECURITY] status=${row.status_code} auth_status=${row.auth_status}/${auth} account_label=${account} client_ip=${ip} method=${row.method} path=${row.path} ua=${userAgent} cost=${row.elapsed_ms.toFixed(1)}ms`;
+};
+
+const terminalLogRows = computed(() =>
+  [...logs.value].sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()),
+);
+
+const terminalLines = computed(() => {
+  const token = keyword.value.trim().toLowerCase();
+  const lines = terminalLogRows.value.map(buildTerminalLine);
+  if (!token) return lines;
+  return lines.filter((line) => line.toLowerCase().includes(token));
+});
+
+const securityTerminalLines = computed(() => {
+  const token = keyword.value.trim().toLowerCase();
+  const lines = [...securityLogs.value]
+    .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
+    .map(buildSecurityTerminalLine);
+  if (!token) return lines;
+  return lines.filter((line) => line.toLowerCase().includes(token));
+});
+
+const onFilterChange = () => {
+  page.value = 1;
+  loadData();
+};
+
+const buildQueryParams = () => {
+  const params: Record<string, any> = {
+    page: page.value,
+    page_size: pageSize,
+  };
+  if (filters.role) params.role = filters.role;
+  if (filters.allowed !== undefined) params.allowed = filters.allowed;
+  if (dateRange.value) {
+    params.start_time = dateRange.value[0].toISOString();
+    params.end_time = dateRange.value[1].toISOString();
+  }
+  return params;
+};
+
+const scrollTerminalToBottom = () => {
+  nextTick(() => {
+    const terminal = terminalWindowRef.value;
+    if (!terminal) return;
+    terminal.scrollTop = terminal.scrollHeight;
+  });
+};
+
+const scrollSecurityTerminalToBottom = () => {
+  nextTick(() => {
+    const terminal = securityTerminalWindowRef.value;
+    if (!terminal) return;
+    terminal.scrollTop = terminal.scrollHeight;
+  });
+};
+
+const loadData = async (options: { silent?: boolean } = {}) => {
+  if (!options.silent) loading.value = true;
+  try {
+    const res = await fetchAccessLogs(buildQueryParams());
+    logs.value = res.data.items;
+    total.value = res.data.total;
+    summary.value = res.data.summary || emptySummary;
+    userStats.value = res.data.user_stats || [];
+    if (interfaceLogDialogVisible.value) scrollTerminalToBottom();
+  } catch {
+    if (options.silent) return;
+    logs.value = [];
+    total.value = 0;
+    summary.value = emptySummary;
+    userStats.value = [];
+  } finally {
+    loading.value = false;
+  }
+};
+
+const loadSecurityData = async (options: { silent?: boolean } = {}) => {
+  if (!options.silent) securityLoading.value = true;
+  try {
+    const res = await fetchSecurityAccessLogs({ status_min: 400, page: 1, page_size: 80 });
+    securityLogs.value = res.data.items;
+    securitySummary.value = res.data.summary || emptySecuritySummary;
+    if (securityLogDialogVisible.value) scrollSecurityTerminalToBottom();
+  } catch {
+    if (options.silent) return;
+    securityLogs.value = [];
+    securitySummary.value = emptySecuritySummary;
+  } finally {
+    securityLoading.value = false;
+  }
+};
+
+const stopRealtimePolling = () => {
+  if (!realtimeTimer.value) return;
+  window.clearInterval(realtimeTimer.value);
+  realtimeTimer.value = null;
+};
+
+const startRealtimePolling = () => {
+  stopRealtimePolling();
+  realtimeTimer.value = window.setInterval(() => {
+    loadData({ silent: true });
+    loadSecurityData({ silent: true });
+  }, REALTIME_POLL_INTERVAL_MS);
+};
+
+const refresh = () => {
+  loadData();
+  loadSecurityData();
+};
+
+const openInterfaceLogDialog = () => {
+  interfaceLogDialogVisible.value = true;
+  loadData({ silent: true });
+  scrollTerminalToBottom();
+};
+
+const openSecurityLogDialog = () => {
+  securityLogDialogVisible.value = true;
+  loadSecurityData({ silent: true });
+  scrollSecurityTerminalToBottom();
+};
+
+const downloadLogFile = (fileName: string, lines: string[]) => {
+  const blob = new Blob([`${lines.join("\n")}\n`], { type: "text/plain;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = fileName;
+  link.click();
+  URL.revokeObjectURL(url);
+};
+
+const downloadInterfaceLog = () => {
+  downloadLogFile("interface-access-audit.log", terminalLines.value);
+};
+
+const downloadSecurityLog = () => {
+  downloadLogFile("security-event-audit.log", securityTerminalLines.value);
+};
+
+onMounted(() => {
+  refresh();
+  startRealtimePolling();
+});
+
+onBeforeUnmount(stopRealtimePolling);
+
+defineExpose({ refresh });
+</script>
+
+<style scoped>
+.access-logs {
+  --audit-ink: #1a2332;
+  --audit-muted: #64748b;
+  --audit-border: #e2e8f0;
+  --audit-blue: #3b82f6;
+  --audit-cyan: #06b6d4;
+  --audit-violet: #8b5cf6;
+  --audit-danger: #ef4444;
+  --audit-indigo: #6366f1;
+  --card-radius: 16px;
+  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.audit-filters {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 14px 18px;
+  background: #fff;
+  border-radius: var(--card-radius);
+  border: 1px solid var(--audit-border);
+  box-shadow: var(--card-shadow);
+}
+
+.audit-metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.metric-card {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-height: 64px;
+  padding: 10px 16px;
+  border-radius: var(--card-radius);
+  background: #fff;
+  border: 1px solid var(--audit-border);
+  box-shadow: var(--card-shadow);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+}
+
+.metric-card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  border-radius: var(--card-radius) var(--card-radius) 0 0;
+}
+
+.metric-card.blue::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
+.metric-card.cyan::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
+.metric-card.violet::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
+.metric-card.danger::before { background: linear-gradient(90deg, #ef4444, #f87171); }
+.metric-card.indigo::before { background: linear-gradient(90deg, #6366f1, #818cf8); }
+
+.metric-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  flex-shrink: 0;
+}
+
+.metric-icon svg {
+  width: 22px;
+  height: 22px;
+}
+
+.metric-card.blue .metric-icon { background: #eff6ff; color: #3b82f6; }
+.metric-card.cyan .metric-icon { background: #ecfeff; color: #06b6d4; }
+.metric-card.violet .metric-icon { background: #f5f3ff; color: #8b5cf6; }
+.metric-card.danger .metric-icon { background: #fef2f2; color: #ef4444; }
+.metric-card.indigo .metric-icon { background: #eef2ff; color: #6366f1; }
+
+.metric-body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.metric-label {
+  color: var(--audit-muted);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.metric-value {
+  color: var(--audit-ink);
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.audit-grid {
+  display: grid;
+  grid-template-columns: 380px minmax(0, 1fr);
+  gap: 14px;
+}
+
+.ranking-card,
+.log-launcher-card {
+  min-width: 0;
+  padding: 20px;
+  border: 1px solid var(--audit-border);
+  border-radius: var(--card-radius);
+  background: #fff;
+  box-shadow: var(--card-shadow);
+}
+
+.section-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.section-title-group h4 {
+  margin: 0;
+  color: var(--audit-ink);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.section-title-group p {
+  margin: 4px 0 0;
+  color: var(--audit-muted);
+  font-size: 12px;
+}
+
+.user-rank-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.user-rank-row {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  padding: 12px 10px;
+  border-radius: 10px;
+  transition: background 0.15s ease;
+}
+
+.user-rank-row:hover {
+  background: #f8fafc;
+}
+
+.rank-no {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: #f1f5f9;
+  color: #94a3b8;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.rank-no.rank-top {
+  background: linear-gradient(135deg, #3b82f6, #6366f1);
+  color: #fff;
+}
+
+.rank-user,
+.rank-count {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.rank-user strong {
+  color: var(--audit-ink);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.rank-user small {
+  color: var(--audit-muted);
+  font-size: 12px;
+}
+
+.rank-location {
+  color: #94a3b8;
+  font-size: 11px;
+}
+
+.rank-count {
+  align-items: flex-end;
+}
+
+.rank-count strong {
+  color: var(--audit-ink);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.rank-count small {
+  color: var(--audit-muted);
+  font-size: 11px;
+}
+
+.rank-count .denied-highlight {
+  color: var(--audit-danger);
+  font-weight: 600;
+}
+
+.log-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.log-action-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 18px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.log-action-interface {
+  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
+  border: 1px solid #bae6fd;
+}
+
+.log-action-interface:hover {
+  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
+  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.12);
+  transform: translateY(-1px);
+}
+
+.log-action-security {
+  background: linear-gradient(135deg, #fef2f2, #fee2e2);
+  border: 1px solid #fecaca;
+}
+
+.log-action-security:hover {
+  background: linear-gradient(135deg, #fee2e2, #fecaca);
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12);
+  transform: translateY(-1px);
+}
+
+.log-action-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: #fff;
+  flex-shrink: 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.log-action-icon svg {
+  width: 20px;
+  height: 20px;
+  color: #0ea5e9;
+}
+
+.log-action-icon.security svg {
+  color: #ef4444;
+}
+
+.log-action-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.log-action-content strong {
+  display: block;
+  color: var(--audit-ink);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.log-action-content span {
+  display: block;
+  margin-top: 2px;
+  color: var(--audit-muted);
+  font-size: 12px;
+}
+
+.dialog-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+}
+
+.dialog-head strong {
+  color: var(--audit-ink);
+  font-size: 17px;
+}
+
+.dialog-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.terminal-window {
+  min-height: 360px;
+  max-height: 520px;
+  overflow: auto;
+  padding: 16px;
+  border: 1px solid #1e293b;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #1e293b, #0f172a);
+}
+
+.dialog-terminal-window {
+  height: 62vh;
+  min-height: 360px;
+  max-height: 68vh;
+}
+
+.terminal-lines {
+  margin: 0;
+  color: #e2e8f0;
+  font-family: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", "Menlo", monospace;
+  font-size: 12.5px;
+  line-height: 1.9;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.logs-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+
+@media (max-width: 1100px) {
+  .audit-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .audit-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .audit-metrics {
+    grid-template-columns: 1fr;
+  }
+}
+</style>