From f2fa10c17883fec2437f33e4d959294768658834 Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Fri, 10 Jul 2026 22:12:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D(=E6=9D=83=E9=99=90=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86)=EF=BC=9A=E7=BB=9F=E4=B8=80=20PM=20=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E4=B8=8E=E6=9D=83=E9=99=90=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/app/api/v1/permission_monitoring.py   |  407 +++++-
 backend/app/api/v1/users.py                   |   11 +-
 backend/app/crud/user.py                      |   36 +-
 backend/tests/test_api_permissions.py         |   10 +
 .../tests/test_permission_monitoring_api.py   |   92 +-
 backend/tests/test_user_login_sessions.py     |   42 +
 frontend/src/api/projectPermissions.ts        |    1 +
 .../components/ApiEndpointPermissions.test.ts |   10 +-
 .../src/components/ApiEndpointPermissions.vue |  142 +-
 frontend/src/components/DesktopLayout.vue     |   12 +-
 .../src/components/Layout.desktop.test.ts     |    1 +
 .../components/PermissionAccessLogs.test.ts   |   17 +-
 .../src/components/PermissionAccessLogs.vue   |   98 +-
 .../components/PermissionMonitoring.test.ts   |   21 +-
 .../src/components/PermissionMonitoring.vue   |  138 +-
 .../PermissionTemplateSelector.test.ts        |   21 +
 .../components/PermissionTemplateSelector.vue |  148 ++-
 .../components/PermissionTrendCharts.test.ts  |   57 +-
 .../src/components/PermissionTrendCharts.vue  | 1088 +++++++++++-----
 .../src/components/SecurityCenter.test.ts     |   10 +
 frontend/src/components/SecurityCenter.vue    |   27 +-
 frontend/src/components/WebLayout.vue         |   19 +-
 .../src/components/layout/navigation.test.ts  |   28 +
 frontend/src/components/layout/navigation.ts  |   19 +-
 frontend/src/locales/zh-CN.ts                 |    2 +-
 frontend/src/router.test.ts                   |    2 +
 frontend/src/router/index.ts                  |   12 +-
 frontend/src/styles/main.css                  |   19 +-
 frontend/src/types/api.ts                     |   62 +
 frontend/src/types/desktopCommands.test.ts    |    2 +-
 .../src/views/DesktopProjectEntry.test.ts     |   12 +-
 frontend/src/views/DesktopProjectEntry.vue    |   39 +-
 frontend/src/views/WebWorkbenchEntry.test.ts  |    6 +
 frontend/src/views/WebWorkbenchEntry.vue      |   37 +-
 frontend/src/views/admin/AuditLogs.test.ts    |   61 +-
 frontend/src/views/admin/AuditLogs.vue        |  395 +++---
 frontend/src/views/admin/EmailSettings.vue    |  589 ++++++---
 .../views/admin/PermissionManagement.test.ts  |   58 +-
 .../src/views/admin/PermissionManagement.vue  | 1153 +++++++++++++----
 frontend/src/views/admin/ProjectForm.vue      |   65 +-
 frontend/src/views/admin/Projects.test.ts     |   28 +-
 frontend/src/views/admin/Projects.vue         |  138 +-
 .../SystemMonitoringPage.desktop.test.ts      |    6 +
 .../src/views/admin/SystemMonitoringPage.vue  |   16 +-
 frontend/src/views/admin/UserForm.vue         |   74 --
 frontend/src/views/admin/Users.vue            |  372 ++++--
 .../src/views/admin/UsersLoginStatus.test.ts  |   23 +
 47 files changed, 4071 insertions(+), 1555 deletions(-)
 create mode 100644 frontend/src/components/PermissionTemplateSelector.test.ts
 create mode 100644 frontend/src/components/layout/navigation.test.ts

diff --git a/backend/app/api/v1/permission_monitoring.py b/backend/app/api/v1/permission_monitoring.py
index 8140dce0..102dced3 100644
--- a/backend/app/api/v1/permission_monitoring.py
+++ b/backend/app/api/v1/permission_monitoring.py
@@ -602,6 +602,7 @@ async def get_access_logs(
     end_time: Optional[datetime] = Query(None),
     client_ip: Optional[str] = Query(None),
     client_type: Optional[str] = Query(None),
+    event_type: str = Query("all", pattern="^(all|permission)$"),
     keyword: Optional[str] = Query(None),
     page: int = Query(1, ge=1),
     page_size: int = Query(50, ge=1, le=200),
@@ -660,7 +661,14 @@ async def get_access_logs(
             keyword_conditions.append(PermissionAccessLog.ip_address.in_(location_ips))
         conditions.append(or_(*keyword_conditions))
 
-    include_security_logs = scope.is_admin and study_id is None and role is None and endpoint_key is None and allowed is not True
+    include_security_logs = (
+        event_type != "permission"
+        and scope.is_admin
+        and study_id is None
+        and role is None
+        and endpoint_key is None
+        and allowed is not True
+    )
     event_conditions = list(conditions)
     if include_security_logs:
         matching_security_event = select(SecurityAccessLog.id).where(
@@ -1118,81 +1126,352 @@ async def get_trends(
     _=Depends(get_current_user),
     period: str = Query("24h", pattern="^(24h|7d|30d)$"),
 ) -> dict:
-    """获取趋势数据（从快照表或实时聚合）"""
+    """获取权限检查趋势、周期摘要和归因数据。"""
     scope = await resolve_monitoring_scope(db, _)
     if not scope.is_admin and not scope.study_ids:
         raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="权限不足")
     now = datetime.now(timezone.utc)
-    period_map = {"24h": timedelta(hours=24), "7d": timedelta(days=7), "30d": timedelta(days=30)}
-    start_time = now - period_map[period]
+    bucket_delta, bucket_count = _trend_bucket_config(period)
+    current_bucket = _trend_bucket_time(now, period)
+    start_time = current_bucket - bucket_delta * (bucket_count - 1)
+    current_duration = now - start_time
+    previous_end = start_time
+    previous_start = previous_end - current_duration
 
-    # 先尝试从快照表获取
-    snapshot_query = (
-        select(PermissionMetricSnapshot)
-        .where(PermissionMetricSnapshot.bucket_time >= start_time)
-        .order_by(PermissionMetricSnapshot.bucket_time)
+    log_buckets = await _load_trend_log_buckets(db, scope, start_time, now, period)
+    cache_buckets, current_cache, previous_cache = await _load_trend_cache_buckets(
+        db,
+        scope,
+        previous_start,
+        previous_end,
+        start_time,
+        now,
+        period,
     )
-    result = await db.execute(snapshot_query)
-    snapshots = result.scalars().all()
+    summary = await _load_trend_summary(db, scope, start_time, now)
+    previous_summary = await _load_trend_summary(db, scope, previous_start, previous_end)
+    summary.update(current_cache)
+    previous_summary.update(previous_cache)
+    previous_summary.pop("observed_end_at", None)
 
-    if snapshots and scope.is_admin:
-        return {
-            "period": period,
-            "data_points": [
-                {
-                    "bucket_time": s.bucket_time.isoformat(),
-                    "total_checks": s.total_checks,
-                    "allowed_checks": s.allowed_checks,
-                    "denied_checks": s.denied_checks,
-                    "avg_elapsed_ms": round(s.avg_elapsed_ms, 2),
-                    "max_elapsed_ms": round(s.max_elapsed_ms, 2),
-                    "cache_hits": s.cache_hits,
-                    "cache_misses": s.cache_misses,
-                    "cache_hit_rate": round(
-                        s.cache_hits / (s.cache_hits + s.cache_misses) * 100, 1
-                    ) if (s.cache_hits + s.cache_misses) > 0 else 0,
-                    "error_count": s.error_count,
-                }
-                for s in snapshots
-            ],
-        }
-
-    # 如果没有快照数据，从原始日志实时聚合（适用于刚部署时）。
-    # 这里使用 Python 分桶，避免 SQLite 测试库不支持 PostgreSQL date_trunc。
-    trend_query = select(
-        PermissionAccessLog.created_at,
-        PermissionAccessLog.allowed,
-        PermissionAccessLog.elapsed_ms,
-    ).where(PermissionAccessLog.created_at >= start_time)
-    result = await db.execute(
-        _apply_monitoring_scope_to_log_query(trend_query, scope)
-    )
-    buckets: dict[datetime, dict[str, float | int]] = defaultdict(
-        lambda: {"total": 0, "allowed": 0, "denied": 0, "elapsed_sum": 0.0, "max_ms": 0.0}
-    )
-    for created_at, allowed, elapsed_ms in result.all():
-        bucket = _trend_bucket_time(created_at, period)
-        buckets[bucket]["total"] += 1
-        buckets[bucket]["allowed" if allowed else "denied"] += 1
-        buckets[bucket]["elapsed_sum"] += float(elapsed_ms or 0)
-        buckets[bucket]["max_ms"] = max(float(buckets[bucket]["max_ms"]), float(elapsed_ms or 0))
+    data_points = []
+    for index in range(bucket_count):
+        bucket_time = start_time + bucket_delta * index
+        values = log_buckets.get(bucket_time, _empty_trend_bucket())
+        cache_values = cache_buckets.get(bucket_time, {"cache_hits": 0, "cache_misses": 0})
+        cache_total = int(cache_values["cache_hits"]) + int(cache_values["cache_misses"])
+        total = int(values["total"])
+        data_points.append(
+            {
+                "bucket_time": bucket_time.isoformat(),
+                "sample_state": "partial" if bucket_time == current_bucket else "complete",
+                "total_checks": total,
+                "allowed_checks": int(values["allowed"]),
+                "denied_checks": int(values["denied"]),
+                "avg_elapsed_ms": round(float(values["elapsed_sum"]) / total, 2) if total else 0,
+                "max_elapsed_ms": round(float(values["max_ms"]), 2),
+                "cache_hits": int(cache_values["cache_hits"]),
+                "cache_misses": int(cache_values["cache_misses"]),
+                "cache_hit_rate": round(int(cache_values["cache_hits"]) / cache_total * 100, 1) if cache_total else 0,
+                "cache_sample_available": cache_total > 0,
+                "error_count": 0,
+            }
+        )
 
     return {
         "period": period,
-        "data_points": [
+        "generated_at": now.isoformat(),
+        "range": {
+            "start_at": start_time.isoformat(),
+            "end_at": now.isoformat(),
+            "previous_start_at": previous_start.isoformat(),
+            "previous_end_at": previous_end.isoformat(),
+            "bucket_seconds": int(bucket_delta.total_seconds()),
+            "bucket_count": bucket_count,
+            "timezone": "UTC",
+            "observed_end_at": summary.pop("observed_end_at"),
+        },
+        "summary": summary,
+        "previous_summary": previous_summary,
+        "attribution": await _load_trend_attribution(db, scope, start_time, now),
+        "data_points": data_points,
+    }
+
+
+def _trend_bucket_config(period: str) -> tuple[timedelta, int]:
+    return {
+        "24h": (timedelta(hours=1), 24),
+        "7d": (timedelta(hours=6), 28),
+        "30d": (timedelta(days=1), 30),
+    }[period]
+
+
+def _empty_trend_bucket() -> dict[str, float | int]:
+    return {"total": 0, "allowed": 0, "denied": 0, "elapsed_sum": 0.0, "max_ms": 0.0}
+
+
+def _merge_trend_bucket(target: dict[str, float | int], *, total: int, allowed: int, denied: int, elapsed_sum: float, max_ms: float) -> None:
+    target["total"] = int(target["total"]) + total
+    target["allowed"] = int(target["allowed"]) + allowed
+    target["denied"] = int(target["denied"]) + denied
+    target["elapsed_sum"] = float(target["elapsed_sum"]) + elapsed_sum
+    target["max_ms"] = max(float(target["max_ms"]), max_ms)
+
+
+async def _load_trend_log_buckets(
+    db: AsyncSession,
+    scope: MonitoringScope,
+    start_time: datetime,
+    end_time: datetime,
+    period: str,
+) -> dict[datetime, dict[str, float | int]]:
+    """PostgreSQL 先按小时聚合，SQLite 测试库使用 Python 分桶。"""
+    buckets: dict[datetime, dict[str, float | int]] = defaultdict(_empty_trend_bucket)
+    dialect_name = db.get_bind().dialect.name
+    if dialect_name == "postgresql":
+        hour_bucket = func.date_trunc("hour", PermissionAccessLog.created_at).label("hour_bucket")
+        query = select(
+            hour_bucket,
+            func.count().label("total"),
+            func.count().filter(PermissionAccessLog.allowed.is_(True)).label("allowed"),
+            func.count().filter(PermissionAccessLog.allowed.is_(False)).label("denied"),
+            func.coalesce(func.sum(PermissionAccessLog.elapsed_ms), 0).label("elapsed_sum"),
+            func.coalesce(func.max(PermissionAccessLog.elapsed_ms), 0).label("max_ms"),
+        ).where(
+            PermissionAccessLog.created_at >= start_time,
+            PermissionAccessLog.created_at <= end_time,
+        ).group_by(hour_bucket)
+        result = await db.execute(_apply_monitoring_scope_to_log_query(query, scope))
+        for row in result.all():
+            bucket_time = _trend_bucket_time(row.hour_bucket, period)
+            _merge_trend_bucket(
+                buckets[bucket_time],
+                total=int(row.total or 0),
+                allowed=int(row.allowed or 0),
+                denied=int(row.denied or 0),
+                elapsed_sum=float(row.elapsed_sum or 0),
+                max_ms=float(row.max_ms or 0),
+            )
+        return buckets
+
+    query = select(
+        PermissionAccessLog.created_at,
+        PermissionAccessLog.allowed,
+        PermissionAccessLog.elapsed_ms,
+    ).where(
+        PermissionAccessLog.created_at >= start_time,
+        PermissionAccessLog.created_at <= end_time,
+    )
+    result = await db.execute(_apply_monitoring_scope_to_log_query(query, scope))
+    for created_at, allowed, elapsed_ms in result.all():
+        bucket_time = _trend_bucket_time(created_at, period)
+        _merge_trend_bucket(
+            buckets[bucket_time],
+            total=1,
+            allowed=1 if allowed else 0,
+            denied=0 if allowed else 1,
+            elapsed_sum=float(elapsed_ms or 0),
+            max_ms=float(elapsed_ms or 0),
+        )
+    return buckets
+
+
+def _percentile(values: list[float], percentile: float) -> float:
+    if not values:
+        return 0.0
+    ordered = sorted(values)
+    position = (len(ordered) - 1) * percentile
+    lower = int(position)
+    upper = min(lower + 1, len(ordered) - 1)
+    fraction = position - lower
+    return ordered[lower] + (ordered[upper] - ordered[lower]) * fraction
+
+
+async def _load_trend_summary(
+    db: AsyncSession,
+    scope: MonitoringScope,
+    start_time: datetime,
+    end_time: datetime,
+) -> dict:
+    query = select(
+        func.count().label("total"),
+        func.count().filter(PermissionAccessLog.allowed.is_(True)).label("allowed"),
+        func.count().filter(PermissionAccessLog.allowed.is_(False)).label("denied"),
+        func.count().filter(PermissionAccessLog.elapsed_ms > 50).label("slow"),
+        func.count(func.distinct(PermissionAccessLog.study_id)).label("studies"),
+        func.count(func.distinct(PermissionAccessLog.user_id)).label("users"),
+        func.count(func.distinct(PermissionAccessLog.endpoint_key)).label("endpoints"),
+        func.coalesce(func.avg(PermissionAccessLog.elapsed_ms), 0).label("avg_ms"),
+        func.coalesce(func.max(PermissionAccessLog.elapsed_ms), 0).label("max_ms"),
+        func.max(PermissionAccessLog.created_at).label("observed_end_at"),
+    ).where(
+        PermissionAccessLog.created_at >= start_time,
+        PermissionAccessLog.created_at <= end_time,
+    )
+    row = (await db.execute(_apply_monitoring_scope_to_log_query(query, scope))).one()
+    if db.get_bind().dialect.name == "postgresql":
+        percentile_query = select(
+            func.percentile_cont(0.95).within_group(PermissionAccessLog.elapsed_ms)
+        ).where(
+            PermissionAccessLog.created_at >= start_time,
+            PermissionAccessLog.created_at <= end_time,
+        )
+        percentile_result = await db.execute(
+            _apply_monitoring_scope_to_log_query(percentile_query, scope)
+        )
+        p95_ms = float(percentile_result.scalar() or 0)
+    else:
+        elapsed_query = select(PermissionAccessLog.elapsed_ms).where(
+            PermissionAccessLog.created_at >= start_time,
+            PermissionAccessLog.created_at <= end_time,
+        )
+        elapsed_result = await db.execute(
+            _apply_monitoring_scope_to_log_query(elapsed_query, scope)
+        )
+        p95_ms = _percentile(
+            [float(value) for value in elapsed_result.scalars().all()],
+            0.95,
+        )
+    total = int(row.total or 0)
+    denied = int(row.denied or 0)
+    return {
+        "total_checks": total,
+        "allowed_checks": int(row.allowed or 0),
+        "denied_checks": denied,
+        "deny_rate": round(denied / total * 100, 2) if total else 0,
+        "avg_elapsed_ms": round(float(row.avg_ms or 0), 2),
+        "p95_elapsed_ms": round(p95_ms, 2),
+        "max_elapsed_ms": round(float(row.max_ms or 0), 2),
+        "slow_check_count": int(row.slow or 0),
+        "active_study_count": int(row.studies or 0),
+        "active_user_count": int(row.users or 0),
+        "active_endpoint_count": int(row.endpoints or 0),
+        "cache_hits": 0,
+        "cache_misses": 0,
+        "cache_hit_rate": 0,
+        "cache_sample_available": False,
+        "observed_end_at": row.observed_end_at.isoformat() if row.observed_end_at else None,
+    }
+
+
+async def _load_trend_cache_buckets(
+    db: AsyncSession,
+    scope: MonitoringScope,
+    previous_start: datetime,
+    previous_end: datetime,
+    current_start: datetime,
+    current_end: datetime,
+    period: str,
+) -> tuple[dict[datetime, dict[str, int]], dict, dict]:
+    empty_summary = {"cache_hits": 0, "cache_misses": 0, "cache_hit_rate": 0, "cache_sample_available": False}
+    if not scope.is_admin:
+        return {}, dict(empty_summary), dict(empty_summary)
+    result = await db.execute(
+        select(PermissionMetricSnapshot).where(
+            PermissionMetricSnapshot.bucket_time >= previous_start,
+            PermissionMetricSnapshot.bucket_time <= current_end,
+        )
+    )
+    buckets: dict[datetime, dict[str, int]] = defaultdict(lambda: {"cache_hits": 0, "cache_misses": 0})
+    current_counts = {"cache_hits": 0, "cache_misses": 0}
+    previous_counts = {"cache_hits": 0, "cache_misses": 0}
+    for snapshot in result.scalars().all():
+        snapshot_time = snapshot.bucket_time
+        if snapshot_time.tzinfo is None:
+            snapshot_time = snapshot_time.replace(tzinfo=timezone.utc)
+        if snapshot_time >= current_start:
+            current_counts["cache_hits"] += int(snapshot.cache_hits or 0)
+            current_counts["cache_misses"] += int(snapshot.cache_misses or 0)
+            bucket = buckets[_trend_bucket_time(snapshot_time, period)]
+            bucket["cache_hits"] += int(snapshot.cache_hits or 0)
+            bucket["cache_misses"] += int(snapshot.cache_misses or 0)
+        elif snapshot_time < previous_end:
+            previous_counts["cache_hits"] += int(snapshot.cache_hits or 0)
+            previous_counts["cache_misses"] += int(snapshot.cache_misses or 0)
+
+    def serialize(counts: dict[str, int]) -> dict:
+        total = counts["cache_hits"] + counts["cache_misses"]
+        return {
+            **counts,
+            "cache_hit_rate": round(counts["cache_hits"] / total * 100, 2) if total else 0,
+            "cache_sample_available": total > 0,
+        }
+
+    return dict(buckets), serialize(current_counts), serialize(previous_counts)
+
+
+async def _load_trend_attribution(
+    db: AsyncSession,
+    scope: MonitoringScope,
+    start_time: datetime,
+    end_time: datetime,
+) -> dict:
+    base_conditions = (
+        PermissionAccessLog.created_at >= start_time,
+        PermissionAccessLog.created_at <= end_time,
+    )
+    denied_query = select(
+        PermissionAccessLog.endpoint_key,
+        PermissionAccessLog.role,
+        func.count().label("denied_count"),
+    ).where(*base_conditions, PermissionAccessLog.allowed.is_(False)).group_by(
+        PermissionAccessLog.endpoint_key,
+        PermissionAccessLog.role,
+    ).order_by(desc("denied_count")).limit(5)
+    denied_rows = (await db.execute(_apply_monitoring_scope_to_log_query(denied_query, scope))).all()
+
+    slow_query = select(
+        PermissionAccessLog.endpoint_key,
+        func.count().label("sample_count"),
+        func.count().filter(PermissionAccessLog.elapsed_ms > 50).label("slow_count"),
+        func.coalesce(func.avg(PermissionAccessLog.elapsed_ms), 0).label("avg_ms"),
+        func.coalesce(func.max(PermissionAccessLog.elapsed_ms), 0).label("max_ms"),
+    ).where(*base_conditions).group_by(PermissionAccessLog.endpoint_key).order_by(
+        desc("slow_count"), desc("avg_ms"), desc("sample_count")
+    ).limit(5)
+    slow_rows = (await db.execute(_apply_monitoring_scope_to_log_query(slow_query, scope))).all()
+
+    client_type = func.coalesce(PermissionAccessLog.client_type, "unknown")
+    client_version = func.coalesce(PermissionAccessLog.client_version, "-")
+    client_platform = func.coalesce(PermissionAccessLog.client_platform, "-")
+    client_query = select(
+        client_type.label("client_type"),
+        client_version.label("client_version"),
+        client_platform.label("client_platform"),
+        func.count().label("total_count"),
+        func.count().filter(PermissionAccessLog.allowed.is_(False)).label("denied_count"),
+        func.coalesce(func.avg(PermissionAccessLog.elapsed_ms), 0).label("avg_ms"),
+    ).where(*base_conditions).group_by(client_type, client_version, client_platform).order_by(
+        desc("total_count")
+    ).limit(5)
+    client_rows = (await db.execute(_apply_monitoring_scope_to_log_query(client_query, scope))).all()
+
+    return {
+        "top_denied": [
+            {"endpoint_key": row.endpoint_key, "role": row.role, "denied_count": int(row.denied_count)}
+            for row in denied_rows
+        ],
+        "top_slow": [
             {
-                "bucket_time": bucket.isoformat(),
-                "total_checks": values["total"],
-                "allowed_checks": values["allowed"],
-                "denied_checks": values["denied"],
-                "avg_elapsed_ms": round(float(values["elapsed_sum"]) / int(values["total"]), 2),
-                "max_elapsed_ms": round(float(values["max_ms"]), 2),
-                "cache_hits": 0,
-                "cache_misses": 0,
-                "cache_hit_rate": 0,
-                "error_count": 0,
+                "endpoint_key": row.endpoint_key,
+                "sample_count": int(row.sample_count),
+                "slow_count": int(row.slow_count),
+                "avg_elapsed_ms": round(float(row.avg_ms), 2),
+                "max_elapsed_ms": round(float(row.max_ms), 2),
             }
-            for bucket, values in sorted(buckets.items())
+            for row in slow_rows
+        ],
+        "client_breakdown": [
+            {
+                "client_type": row.client_type,
+                "client_version": row.client_version,
+                "client_platform": row.client_platform,
+                "total_count": int(row.total_count),
+                "denied_count": int(row.denied_count),
+                "deny_rate": round(int(row.denied_count) / int(row.total_count) * 100, 2) if row.total_count else 0,
+                "avg_elapsed_ms": round(float(row.avg_ms), 2),
+            }
+            for row in client_rows
         ],
     }
 
diff --git a/backend/app/api/v1/users.py b/backend/app/api/v1/users.py
index f9f80787..bbeee149 100644
--- a/backend/app/api/v1/users.py
+++ b/backend/app/api/v1/users.py
@@ -9,7 +9,7 @@ from app.schemas.common import PaginatedResponse
 from app.crud import user as user_crud
 from app.crud import member as member_crud
 from app.utils.pagination import paginate
-from app.schemas.user import UserCreate, UserLoginActivityRead, UserRead, UserStatus, UserUpdate
+from app.schemas.user import LoginStatus, UserCreate, UserLoginActivityRead, UserRead, UserStatus, UserUpdate
 from app.services.user_login_sessions import get_login_summaries, list_login_activities
 
 router = APIRouter()
@@ -21,11 +21,16 @@ async def list_users(
     limit: int = 100,
     keyword: str | None = Query(default=None),
     user_status: UserStatus | None = Query(default=None, alias="status"),
+    login_status: LoginStatus | None = Query(default=None),
     db: AsyncSession = Depends(get_db_session),
     current_user=Depends(require_roles(["ADMIN"])),
 ) -> PaginatedResponse[UserRead]:
-    users = await user_crud.list_users(db, skip=skip, limit=limit, keyword=keyword, status=user_status)
-    total_users = await user_crud.count_users(db, keyword=keyword, status=user_status)
+    users = await user_crud.list_users(
+        db, skip=skip, limit=limit, keyword=keyword, status=user_status, login_status=login_status
+    )
+    total_users = await user_crud.count_users(
+        db, keyword=keyword, status=user_status, login_status=login_status
+    )
     summaries = await get_login_summaries(db, [user.id for user in users])
     items = []
     for user in users:
diff --git a/backend/app/crud/user.py b/backend/app/crud/user.py
index e792a6b5..c7bcae2d 100644
--- a/backend/app/crud/user.py
+++ b/backend/app/crud/user.py
@@ -1,7 +1,8 @@
 from __future__ import annotations
 
 import uuid
-from typing import Sequence
+from datetime import datetime, timedelta, timezone
+from typing import Literal, Sequence
 
 from sqlalchemy import delete, func, or_, select, update
 from sqlalchemy.ext.asyncio import AsyncSession
@@ -11,12 +12,14 @@ from app.core.config import (
     PROTECTED_ADMIN_DEFAULT_PASSWORD,
     PROTECTED_ADMIN_EMAIL,
     PROTECTED_ADMIN_FULL_NAME,
+    settings,
 )
 from app.core.security import hash_password
 from app.models.audit_log import AuditLog
 from app.models.permission_access_log import PermissionAccessLog
 from app.models.study_member import StudyMember
 from app.models.user import User, UserStatus
+from app.models.user_login_session import UserLoginSession
 from app.schemas.user import UserCreate, UserRegisterRequest, UserUpdate
 
 
@@ -81,7 +84,13 @@ async def update_user(db: AsyncSession, user: User, user_in: UserUpdate) -> User
     return user
 
 
-def _apply_user_filters(query, *, keyword: str | None = None, status: UserStatus | None = None):
+def _apply_user_filters(
+    query,
+    *,
+    keyword: str | None = None,
+    status: UserStatus | None = None,
+    login_status: Literal["ONLINE", "OFFLINE"] | None = None,
+):
     if keyword:
         pattern = f"%{keyword.strip()}%"
         query = query.where(
@@ -93,6 +102,18 @@ def _apply_user_filters(query, *, keyword: str | None = None, status: UserStatus
         )
     if status is not None:
         query = query.where(User.status == status)
+    if login_status is not None:
+        cutoff = datetime.now(timezone.utc) - timedelta(seconds=settings.USER_SESSION_ONLINE_SECONDS)
+        has_online_session = (
+            select(UserLoginSession.id)
+            .where(
+                UserLoginSession.user_id == User.id,
+                UserLoginSession.ended_at.is_(None),
+                UserLoginSession.last_seen_at >= cutoff,
+            )
+            .exists()
+        )
+        query = query.where(has_online_session if login_status == "ONLINE" else ~has_online_session)
     return query
 
 
@@ -103,8 +124,9 @@ async def list_users(
     *,
     keyword: str | None = None,
     status: UserStatus | None = None,
+    login_status: Literal["ONLINE", "OFFLINE"] | None = None,
 ) -> Sequence[User]:
-    query = _apply_user_filters(select(User), keyword=keyword, status=status)
+    query = _apply_user_filters(select(User), keyword=keyword, status=status, login_status=login_status)
     result = await db.execute(query.order_by(User.created_at.desc()).offset(skip).limit(limit))
     return result.scalars().all()
 
@@ -114,8 +136,14 @@ async def count_users(
     *,
     keyword: str | None = None,
     status: UserStatus | None = None,
+    login_status: Literal["ONLINE", "OFFLINE"] | None = None,
 ) -> int:
-    query = _apply_user_filters(select(func.count()).select_from(User), keyword=keyword, status=status)
+    query = _apply_user_filters(
+        select(func.count()).select_from(User),
+        keyword=keyword,
+        status=status,
+        login_status=login_status,
+    )
     result = await db.execute(query)
     return int(result.scalar_one() or 0)
 
diff --git a/backend/tests/test_api_permissions.py b/backend/tests/test_api_permissions.py
index 0ded8ed5..d4c42ae9 100644
--- a/backend/tests/test_api_permissions.py
+++ b/backend/tests/test_api_permissions.py
@@ -565,6 +565,16 @@ def test_project_permission_config_is_system_level_permission():
     assert "PM" in SYSTEM_PERMISSIONS["system:permissions:project_config"]["roles"]
 
 
+def test_pm_system_management_navigation_matches_backend_permission_contract():
+    """PM 系统管理导航中的审计日志和权限管理应与后端角色权限保持一致。"""
+    assert "PM" in API_ENDPOINT_PERMISSIONS["audit_logs:read"]["default_roles"]
+    assert "PM" in SYSTEM_PERMISSIONS["system:permissions:read"]["roles"]
+    assert "PM" in SYSTEM_PERMISSIONS["system:permissions:project_config"]["roles"]
+
+    audit_route = Path(__file__).resolve().parents[1] / "app" / "api" / "v1" / "audit_logs.py"
+    assert 'require_api_permission("audit_logs:read")' in audit_route.read_text()
+
+
 def test_project_api_permission_routes_use_system_project_config_permission():
     """项目权限矩阵 API 应明确依赖 system:permissions:project_config。"""
     route_path = Path(__file__).resolve().parents[1] / "app" / "api" / "v1" / "api_permissions.py"
diff --git a/backend/tests/test_permission_monitoring_api.py b/backend/tests/test_permission_monitoring_api.py
index 4481085c..60f7033b 100644
--- a/backend/tests/test_permission_monitoring_api.py
+++ b/backend/tests/test_permission_monitoring_api.py
@@ -69,7 +69,19 @@ async def test_system_permission_monitoring_definitions_are_admin_only():
     assert all("PM" not in item["roles"] for item in monitoring_items)
 
 
-async def _seed_permission_log(db_session, study_id: uuid.UUID, user_id: uuid.UUID, *, allowed: bool, elapsed_ms: float) -> None:
+async def _seed_permission_log(
+    db_session,
+    study_id: uuid.UUID,
+    user_id: uuid.UUID,
+    *,
+    allowed: bool,
+    elapsed_ms: float,
+    endpoint_key: str = "admin.permissions.read",
+    role: str = "PM",
+    client_type: str | None = None,
+    client_version: str | None = None,
+    client_platform: str | None = None,
+) -> None:
     study_exists = (
         await db_session.execute(text("SELECT id FROM studies WHERE id = :id"), {"id": str(study_id)})
     ).scalar_one_or_none()
@@ -119,21 +131,24 @@ async def _seed_permission_log(db_session, study_id: uuid.UUID, user_id: uuid.UU
             """
             INSERT INTO permission_access_logs
                 (id, study_id, user_id, endpoint_key, role, allowed, elapsed_ms, ip_address,
-                 request_snapshot, created_at)
+                 client_type, client_version, client_platform, request_snapshot, created_at)
             VALUES
                 (:id, :study_id, :user_id, :endpoint_key, :role, :allowed, :elapsed_ms, :ip_address,
-                 :request_snapshot, CURRENT_TIMESTAMP)
+                 :client_type, :client_version, :client_platform, :request_snapshot, CURRENT_TIMESTAMP)
             """
         ),
         {
             "id": str(uuid.uuid4()),
             "study_id": str(study_id),
             "user_id": str(user_id),
-            "endpoint_key": "admin.permissions.read",
-            "role": "PM",
+            "endpoint_key": endpoint_key,
+            "role": role,
             "allowed": allowed,
             "elapsed_ms": elapsed_ms,
             "ip_address": "127.0.0.1",
+            "client_type": client_type,
+            "client_version": client_version,
+            "client_platform": client_platform,
             "request_snapshot": None,
         },
     )
@@ -159,6 +174,53 @@ async def test_get_permission_metrics(db_session):
     assert data["check_metrics"]["denied_checks"] == 1
 
 
+@pytest.mark.asyncio
+async def test_get_trends_returns_dense_summary_comparison_and_attribution(db_session):
+    baseline = await permission_monitoring.get_trends(db=db_session, _=AdminUserStub(), period="24h")
+    study_id = uuid.uuid4()
+    user_id = uuid.uuid4()
+    await _seed_permission_log(
+        db_session,
+        study_id,
+        user_id,
+        allowed=True,
+        elapsed_ms=5,
+        endpoint_key="subjects.read",
+        client_type="web",
+        client_version="0.1.0",
+        client_platform="macos",
+    )
+    await _seed_permission_log(
+        db_session,
+        study_id,
+        user_id,
+        allowed=False,
+        elapsed_ms=80,
+        endpoint_key="subjects.export",
+        client_type="web",
+        client_version="0.1.0",
+        client_platform="macos",
+    )
+
+    data = await permission_monitoring.get_trends(db=db_session, _=AdminUserStub(), period="24h")
+
+    assert data["period"] == "24h"
+    assert data["range"]["bucket_seconds"] == 3600
+    assert len(data["data_points"]) == 24
+    assert data["data_points"][-1]["sample_state"] == "partial"
+    assert data["summary"]["total_checks"] == baseline["summary"]["total_checks"] + 2
+    assert data["summary"]["denied_checks"] == baseline["summary"]["denied_checks"] + 1
+    assert data["summary"]["slow_check_count"] == baseline["summary"]["slow_check_count"] + 1
+    assert data["summary"]["active_study_count"] == baseline["summary"]["active_study_count"] + 1
+    assert data["summary"]["active_user_count"] == baseline["summary"]["active_user_count"] + 1
+    assert data["summary"]["active_endpoint_count"] >= 2
+    assert data["summary"]["max_elapsed_ms"] >= data["summary"]["p95_elapsed_ms"]
+    assert data["previous_summary"]["total_checks"] == 0
+    assert any(item["endpoint_key"] == "subjects.export" for item in data["attribution"]["top_denied"])
+    assert data["attribution"]["top_slow"][0]["endpoint_key"] == "subjects.export"
+    assert any(item["client_type"] == "web" for item in data["attribution"]["client_breakdown"])
+
+
 @pytest.mark.asyncio
 async def test_get_cache_statistics(db_session):
     """测试获取缓存统计"""
@@ -1206,6 +1268,26 @@ async def test_access_logs_include_security_events_for_admin(db_session, monkeyp
     assert items_by_type["permission"]["request_snapshot"]["path"] == "/api/v1/projects/overview"
     assert items_by_type["security"]["request_snapshot"]["headers"]["authorization"] == "[redacted]"
 
+    permission_only = await permission_monitoring.get_access_logs(
+        db=db_session,
+        _=AdminUserStub(),
+        study_id=None,
+        user_id=None,
+        endpoint_key=None,
+        role=None,
+        allowed=None,
+        start_time=None,
+        end_time=None,
+        client_ip=None,
+        client_type=None,
+        event_type="permission",
+        keyword=None,
+        page=1,
+        page_size=50,
+    )
+    assert permission_only["total"] == 1
+    assert permission_only["items"][0]["event_type"] == "permission"
+
 
 @pytest.mark.asyncio
 async def test_access_logs_ip_ranking_aggregates_by_ip_total(db_session):
diff --git a/backend/tests/test_user_login_sessions.py b/backend/tests/test_user_login_sessions.py
index 9d740fe9..343ace6e 100644
--- a/backend/tests/test_user_login_sessions.py
+++ b/backend/tests/test_user_login_sessions.py
@@ -4,6 +4,7 @@ import uuid
 import pytest
 
 from app.core.config import settings
+from app.crud import user as user_crud
 from app.models.user import User, UserStatus
 from app.models.user_login_session import UserLoginSession
 from app.services.user_login_sessions import get_login_summaries, session_id_from_payload
@@ -59,3 +60,44 @@ async def test_login_summary_marks_recent_unended_sessions_online(db_session, mo
     assert summaries[user.id].status == "ONLINE"
     assert summaries[user.id].active_session_count == 1
     assert summaries[user.id].client_type == "desktop"
+
+
+@pytest.mark.asyncio
+async def test_user_list_filters_online_and_offline_accounts(db_session, monkeypatch):
+    now = datetime.now(timezone.utc)
+    monkeypatch.setattr(settings, "USER_SESSION_ONLINE_SECONDS", 300)
+    online_user = User(
+        id=uuid.uuid4(),
+        email="online-filter@example.com",
+        password_hash="hash",
+        full_name="Online Filter",
+        clinical_department="IT",
+        status=UserStatus.ACTIVE,
+    )
+    offline_user = User(
+        id=uuid.uuid4(),
+        email="offline-filter@example.com",
+        password_hash="hash",
+        full_name="Offline Filter",
+        clinical_department="IT",
+        status=UserStatus.ACTIVE,
+    )
+    db_session.add_all([online_user, offline_user])
+    db_session.add(
+        UserLoginSession(
+            id=uuid.uuid4(),
+            user_id=online_user.id,
+            client_type="web",
+            login_at=now - timedelta(minutes=1),
+            last_seen_at=now - timedelta(seconds=10),
+        )
+    )
+    await db_session.commit()
+
+    online = await user_crud.list_users(db_session, login_status="ONLINE")
+    offline = await user_crud.list_users(db_session, login_status="OFFLINE")
+
+    assert online_user.id in {user.id for user in online}
+    assert offline_user.id not in {user.id for user in online}
+    assert offline_user.id in {user.id for user in offline}
+    assert await user_crud.count_users(db_session, login_status="ONLINE") == len(online)
diff --git a/frontend/src/api/projectPermissions.ts b/frontend/src/api/projectPermissions.ts
index 67ece223..b2949f70 100644
--- a/frontend/src/api/projectPermissions.ts
+++ b/frontend/src/api/projectPermissions.ts
@@ -80,6 +80,7 @@ export const fetchAccessLogs = (params: {
   end_time?: string;
   client_ip?: string;
   client_type?: string;
+  event_type?: "all" | "permission";
   keyword?: string;
   page?: number;
   page_size?: number;
diff --git a/frontend/src/components/ApiEndpointPermissions.test.ts b/frontend/src/components/ApiEndpointPermissions.test.ts
index 44842edc..64161bf9 100644
--- a/frontend/src/components/ApiEndpointPermissions.test.ts
+++ b/frontend/src/components/ApiEndpointPermissions.test.ts
@@ -74,11 +74,15 @@ describe("ApiEndpointPermissions.vue", () => {
   it("keeps matrix read-only and renders authorization states", async () => {
     const source = readFileSync(resolve(__dirname, "./ApiEndpointPermissions.vue"), "utf8");
 
-    expect(source).not.toContain("只读查看各角色权限覆盖");
+    expect(source).toContain("有效权限矩阵");
+    expect(source).toContain(">只读</el-tag>");
     expect(source).toContain("permission-state--allowed");
     expect(source).toContain("permission-state--disabled");
-    expect(source).toContain("CircleCloseFilled");
-    expect(source).not.toContain('? "✓" : "—"');
+    expect(source).not.toContain("CircleCloseFilled");
+    expect(source).toContain("<template v-else>—</template>");
+    expect(source).toContain('filterAuthorization.value === "different"');
+    expect(source).toContain('max-height="calc(100dvh - 330px)"');
+    expect(source).toContain('label="权限类型" width="120" fixed="left"');
     expect(source).not.toContain("defineEmits");
     expect(source).not.toContain("el-checkbox");
   });
diff --git a/frontend/src/components/ApiEndpointPermissions.vue b/frontend/src/components/ApiEndpointPermissions.vue
index 85319d22..367ba2db 100644
--- a/frontend/src/components/ApiEndpointPermissions.vue
+++ b/frontend/src/components/ApiEndpointPermissions.vue
@@ -2,7 +2,11 @@
   <div class="api-permissions">
     <div class="api-permissions-toolbar">
       <div class="toolbar-left">
-        <span class="toolbar-title">项目级权限矩阵</span>
+        <div class="toolbar-heading">
+          <span class="toolbar-title">有效权限矩阵</span>
+          <el-tag size="small" effect="plain" type="info">只读</el-tag>
+        </div>
+        <span class="toolbar-result">显示 {{ filteredOperations.length }} / {{ displayOperations.length }} 项权限</span>
       </div>
       <div class="toolbar-filters">
         <el-input
@@ -29,6 +33,13 @@
           <el-option label="删除" value="delete" />
           <el-option label="导出" value="export" />
         </el-select>
+        <el-select v-model="filterAuthorization" placeholder="授权状态" style="width: 140px">
+          <el-option label="全部授权状态" value="" />
+          <el-option label="存在角色差异" value="different" />
+          <el-option label="至少一项授权" value="granted" />
+          <el-option label="全部未授权" value="ungranted" />
+        </el-select>
+        <el-button :disabled="!hasActiveFilters" @click="resetFilters">重置</el-button>
       </div>
     </div>
 
@@ -37,10 +48,12 @@
         :data="filteredOperations"
         border
         stripe
+        max-height="calc(100dvh - 330px)"
+        empty-text="未找到匹配的权限"
         :span-method="spanMethod"
         class="perm-matrix-table"
       >
-        <el-table-column prop="permission_category" label="权限类型" width="120">
+        <el-table-column prop="permission_category" label="权限类型" width="120" fixed="left">
           <template #default="{ row }">
             <div class="hierarchy-cell hierarchy-cell--category" :data-category="getPermissionCategory(row)">
               <span class="hierarchy-bar" />
@@ -49,7 +62,7 @@
           </template>
         </el-table-column>
 
-        <el-table-column prop="module" label="模块" width="160">
+        <el-table-column prop="module" label="模块" width="160" fixed="left">
           <template #default="{ row }">
             <div class="hierarchy-cell hierarchy-cell--module">
               <span class="module-dot" />
@@ -94,7 +107,7 @@
               :title="isOperationAllowed(row.operation_key, role) ? '已授权' : '未授权'"
             >
               <template v-if="isOperationAllowed(row.operation_key, role)">✓</template>
-              <CircleCloseFilled v-else />
+              <template v-else>—</template>
             </span>
           </template>
         </el-table-column>
@@ -105,7 +118,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
-import { CircleCloseFilled, Search } from "@element-plus/icons-vue";
+import { Search } from "@element-plus/icons-vue";
 import { ElMessage } from "element-plus";
 import type { ApiEndpointPermissionsResponse } from "@/types/api";
 import { fetchApiOperations } from "@/api/projectPermissions";
@@ -144,8 +157,20 @@ const { roleLabel, compareRolesByTemplateOrder, loadRoleTemplates } = useRoleTem
 const searchText = ref("");
 const filterModule = ref("");
 const filterAction = ref("");
+const filterAuthorization = ref("");
 const operations = ref<Operation[]>([]);
 
+const hasActiveFilters = computed(() => Boolean(
+  searchText.value || filterModule.value || filterAction.value || filterAuthorization.value
+));
+
+const resetFilters = () => {
+  searchText.value = "";
+  filterModule.value = "";
+  filterAction.value = "";
+  filterAuthorization.value = "";
+};
+
 const moduleLabel = projectPermissionModuleLabel;
 const getPermissionCategory = (row: Operation): "common" | "business" => projectPermissionCategory(row.module);
 const getPermissionCategoryLabel = (row: Operation): string => projectPermissionCategoryLabel(row.module);
@@ -216,8 +241,14 @@ const filteredOperations = computed(() => {
 
     const matchModule = !filterModule.value || operation.module === filterModule.value;
     const matchAction = !filterAction.value || getOperationVerb(operation) === filterAction.value;
+    const roleStates = roles.value.map((role) => isOperationAllowed(operation.operation_key, role));
+    const matchAuthorization =
+      !filterAuthorization.value ||
+      (filterAuthorization.value === "different" && roleStates.some(Boolean) && roleStates.some((allowed) => !allowed)) ||
+      (filterAuthorization.value === "granted" && roleStates.some(Boolean)) ||
+      (filterAuthorization.value === "ungranted" && roleStates.every((allowed) => !allowed));
 
-    return matchSearch && matchModule && matchAction;
+    return matchSearch && matchModule && matchAction && matchAuthorization;
   });
 
   // 按权限类型、模块分组排序
@@ -394,19 +425,19 @@ defineExpose({ searchText, getOperationSection, getPermissionCategory, getPermis
 
 <style scoped>
 .api-permissions {
-  padding: 20px 0;
+  padding: 8px 0;
 }
 
 .api-permissions-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 18px;
-  padding: 14px 18px;
+  gap: 10px;
+  margin-bottom: 8px;
+  padding: 8px 10px;
   background: #fff;
   border: 1px solid #e2e8f0;
-  border-radius: 14px;
+  border-radius: 8px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
 }
 
@@ -414,23 +445,35 @@ defineExpose({ searchText, getOperationSection, getPermissionCategory, getPermis
   display: flex;
   flex-direction: column;
   gap: 2px;
+  flex-shrink: 0;
+}
+
+.toolbar-heading {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .toolbar-title {
-  font-size: 15px;
+  font-size: 13px;
   font-weight: 600;
   color: #1a2332;
 }
 
+.toolbar-result {
+  color: #7a8a9a;
+  font-size: 10.5px;
+}
+
 .toolbar-filters {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
 }
 
 .api-permissions-table-wrapper {
   overflow-x: auto;
-  border-radius: 12px;
+  border-radius: 8px;
   border: 1px solid #e2e8f0;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
 }
@@ -442,7 +485,7 @@ defineExpose({ searchText, getOperationSection, getPermissionCategory, getPermis
 .hierarchy-cell {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
   height: 100%;
 }
 
@@ -458,7 +501,7 @@ defineExpose({ searchText, getOperationSection, getPermissionCategory, getPermis
   top: 50%;
   transform: translateY(-50%);
   width: 3px;
-  height: 36px;
+  height: 24px;
   border-radius: 0 3px 3px 0;
   background: linear-gradient(180deg, #94a3b8 0%, #cbd5e1 100%);
 }
@@ -472,7 +515,7 @@ defineExpose({ searchText, getOperationSection, getPermissionCategory, getPermis
 }
 
 .category-label {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 700;
   color: #0f172a;
   letter-spacing: 0.3px;
@@ -481,15 +524,15 @@ defineExpose({ searchText, getOperationSection, getPermissionCategory, getPermis
 /* 模块：实心圆点 + 中等加粗字 */
 .module-dot {
   flex-shrink: 0;
-  width: 7px;
-  height: 7px;
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
   background: #3b82f6;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
 }
 
 .module-label {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   color: #1e293b;
 }
@@ -498,11 +541,11 @@ defineExpose({ searchText, getOperationSection, getPermissionCategory, getPermis
 .section-chip {
   display: inline-flex;
   align-items: center;
-  padding: 3px 10px;
+  padding: 2px 7px;
   border-radius: 999px;
   background: #f1f5f9;
   border: 1px solid #e2e8f0;
-  font-size: 12px;
+  font-size: 10.5px;
   font-weight: 500;
   color: #475569;
   white-space: nowrap;
@@ -511,17 +554,17 @@ defineExpose({ searchText, getOperationSection, getPermissionCategory, getPermis
 .operation-cell {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 
 .action-tag {
   flex-shrink: 0;
-  min-width: 40px;
+  min-width: 36px;
   text-align: center;
 }
 
 .operation-name {
-  font-size: 13px;
+  font-size: 12px;
   color: #475569;
 }
 
@@ -529,10 +572,10 @@ defineExpose({ searchText, getOperationSection, getPermissionCategory, getPermis
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 18px;
+  height: 18px;
   color: #94a3b8;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
 }
 
@@ -544,11 +587,46 @@ defineExpose({ searchText, getOperationSection, getPermissionCategory, getPermis
 }
 
 .permission-state--disabled {
-  color: #94a3b8;
+  color: #c3ccd5;
+  font-weight: 500;
 }
 
-.permission-state--disabled :deep(svg) {
-  width: 16px;
-  height: 16px;
+:deep(.api-permissions .el-input__wrapper),
+:deep(.api-permissions .el-select__wrapper) {
+  min-height: 28px;
+}
+
+:deep(.api-permissions .el-button) {
+  min-height: 28px;
+  padding: 4px 8px;
+  font-size: 11.5px;
+}
+
+:deep(.perm-matrix-table .el-table__header-wrapper th.el-table__cell) {
+  padding: 6px 0;
+  font-size: 11px;
+}
+
+:deep(.perm-matrix-table .el-table__body-wrapper td.el-table__cell) {
+  padding: 4px 0;
+  font-size: 12px;
+}
+
+@media (max-width: 1180px) {
+  .api-permissions-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .toolbar-filters {
+    flex-wrap: wrap;
+    width: 100%;
+  }
+}
+
+@media (max-width: 720px) {
+  .toolbar-filters > * {
+    width: 100% !important;
+  }
 }
 </style>
diff --git a/frontend/src/components/DesktopLayout.vue b/frontend/src/components/DesktopLayout.vue
index 0a334184..3d704c9c 100644
--- a/frontend/src/components/DesktopLayout.vue
+++ b/frontend/src/components/DesktopLayout.vue
@@ -495,6 +495,7 @@ import {
 } from "../runtime";
 import { dispatchDesktopRefreshCurrentView } from "../composables/useDesktopRefresh";
 import { useDesktopShortcuts } from "../composables/useDesktopShortcuts";
+import { isApiPermissionAllowed } from "../utils/apiPermissionValue";
 import { getProjectRoutePermission, hasProjectPermission, projectRouteLandingPaths } from "../utils/projectRoutePermissions";
 import type { DesktopCommand } from "../types/desktopCommands";
 import DesktopCommandPalette from "./DesktopCommandPalette.vue";
@@ -532,6 +533,12 @@ const DESKTOP_ADMIN_SECTION_LABEL = "系统管理";
 const isAdmin = computed(() => !!auth.user?.is_admin);
 const projectRole = computed(() => study.currentStudyRole || (study.currentStudy as any)?.role_in_study || "");
 const canAccessAdminPermissions = computed(() => isAdmin.value || projectRole.value === "PM");
+const canAccessAuditLogs = computed(() =>
+  isAdmin.value || (
+    projectRole.value === "PM" &&
+    isApiPermissionAllowed(study.currentPermissions?.[projectRole.value]?.["audit_logs:read"])
+  ),
+);
 const canAccessProjectPath = (path: string) =>
   hasProjectPermission(study.currentPermissions, projectRole.value, getProjectRoutePermission(path), isAdmin.value);
 const hasAnyProjectModuleAccess = computed(() => projectRouteLandingPaths.some((path) => canAccessProjectPath(path)));
@@ -618,17 +625,18 @@ const toggleNavigationGroup = (item: LayoutNavigationItem) => {
   collapsedNavigationGroups.value = nextCollapsed;
 };
 const adminNavigationItems = computed(() =>
-  study.currentStudy
+  !isAdminContext.value
     ? []
     : buildAdminNavigationItems({
         hasUser: Boolean(auth.user),
         isAdmin: isAdmin.value,
         canAccessAdminPermissions: canAccessAdminPermissions.value,
+        canAccessAuditLogs: canAccessAuditLogs.value,
       }),
 );
 const projectNavigationItems = computed(() =>
   buildProjectNavigationItems({
-    hasCurrentStudy: Boolean(study.currentStudy),
+    hasCurrentStudy: Boolean(study.currentStudy) && !isAdminContext.value,
     hasAnyProjectModuleAccess: hasAnyProjectModuleAccess.value,
     canAccessProjectPath,
   }),
diff --git a/frontend/src/components/Layout.desktop.test.ts b/frontend/src/components/Layout.desktop.test.ts
index 9a22c5af..953c4152 100644
--- a/frontend/src/components/Layout.desktop.test.ts
+++ b/frontend/src/components/Layout.desktop.test.ts
@@ -111,6 +111,7 @@ describe("desktop layout shell", () => {
     expect(source).toContain("grid-template-rows: 52px auto minmax(0, 1fr);");
     expect(source).toContain("const adminDesktopNavigationItems");
     expect(source).toContain("const projectDesktopNavigationItems");
+    expect(source).toContain("hasCurrentStudy: Boolean(study.currentStudy) && !isAdminContext.value");
     expect(source).toContain('id: "desktop:refresh"');
     expect(source).toContain("shortcut: formatDesktopShortcut(desktopShortcutPreferences.value.refresh)");
     expect(source).toContain('command === "ctms.desktop.back"');
diff --git a/frontend/src/components/PermissionAccessLogs.test.ts b/frontend/src/components/PermissionAccessLogs.test.ts
index c0920b8d..c68f045a 100644
--- a/frontend/src/components/PermissionAccessLogs.test.ts
+++ b/frontend/src/components/PermissionAccessLogs.test.ts
@@ -95,6 +95,17 @@ describe("PermissionAccessLogs", () => {
     expect(source).not.toContain("grid-template-columns: minmax(320px, 1fr) minmax(0, 1.35fr);");
   });
 
+  it("keeps the access log table edge-to-edge without removing filter or pagination spacing", () => {
+    const source = readSource();
+
+    expect(source).toMatch(/\.access-log-card \{[\s\S]*?padding: 0;[\s\S]*?overflow: hidden;/);
+    expect(source).toMatch(/\.audit-filters \{[\s\S]*?padding: 10px 12px;[\s\S]*?margin-bottom: 0;/);
+    expect(source).toMatch(/\.table-shell \{[\s\S]*?border: 0;[\s\S]*?border-radius: 0;/);
+    expect(source).toMatch(/\.logs-pagination \{[\s\S]*?padding: 8px 12px;[\s\S]*?border-top:/);
+    expect(source).toContain(".access-table :deep(.el-scrollbar__wrap)");
+    expect(source).toContain(".access-table :deep(.el-scrollbar__bar.is-horizontal)");
+  });
+
   it("removes the duplicated audit hero copy", () => {
     const source = readSource();
 
@@ -143,7 +154,11 @@ describe("PermissionAccessLogs", () => {
     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('const timeRangePreset = ref<AccessTimeRangePreset>("24h")');
+    expect(source).toContain("权限趋势下钻{{ drilldownRangeLabel");
+    expect(source).toContain("const applyTrendFilter = async");
+    expect(source).toContain('params.event_type = "permission"');
+    expect(source).toContain("defineExpose({ refresh, applyTrendFilter })");
     expect(source).toContain("accessLogDialogVisible");
     expect(source).toContain("accessTerminalWindowRef");
     expect(source).toContain("accessDialogLines.join");
diff --git a/frontend/src/components/PermissionAccessLogs.vue b/frontend/src/components/PermissionAccessLogs.vue
index b2ee2cf9..28fd302e 100644
--- a/frontend/src/components/PermissionAccessLogs.vue
+++ b/frontend/src/components/PermissionAccessLogs.vue
@@ -30,6 +30,17 @@
     <section class="access-log-card">
       <div class="audit-filters">
         <div class="filter-inputs">
+          <el-tag
+            v-if="trendDrilldownActive"
+            closable
+            effect="plain"
+            size="small"
+            type="primary"
+            class="trend-drilldown-tag"
+            @close="clearTrendDrilldownRange"
+          >
+            权限趋势下钻{{ drilldownRangeLabel ? ` · ${drilldownRangeLabel}` : "" }}
+          </el-tag>
           <el-select v-model="filters.role" placeholder="角色" clearable size="small" class="filter-role" @change="onFilterChange">
             <el-option v-for="role in roleFilterOptions" :key="role.value" :label="role.label" :value="role.value" />
           </el-select>
@@ -324,6 +335,17 @@ const TIME_RANGE_PRESETS = [
 ] as const;
 
 type TimeRangePreset = (typeof TIME_RANGE_PRESETS)[number]["value"];
+type AccessTimeRangePreset = TimeRangePreset | "custom";
+
+interface TrendDrilldownPayload {
+  preset?: Exclude<TimeRangePreset, "all">;
+  startAt?: string;
+  endAt?: string;
+  allowed?: boolean;
+  role?: string;
+  clientType?: string;
+  keyword?: string;
+}
 
 interface IpRankingRow {
   ip: string;
@@ -385,8 +407,10 @@ const summary = ref<AccessLogsSummary>(emptySummary);
 const total = ref(0);
 const page = ref(1);
 const pageSize = ref(50);
-const timeRangePreset = ref<TimeRangePreset>("24h");
+const timeRangePreset = ref<AccessTimeRangePreset>("24h");
 const ipRankingPeriod = ref<TimeRangePreset>("24h");
+const trendDrilldownRange = ref<[Date, Date] | null>(null);
+const trendDrilldownActive = ref(false);
 const accessLogDialogVisible = ref(false);
 const ipRankingDialogVisible = ref(false);
 const accessTerminalWindowRef = ref<HTMLElement | null>(null);
@@ -636,7 +660,8 @@ 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 buildTimeRangeFromPreset = (preset: TimeRangePreset): [Date, Date] | null => {
+const buildTimeRangeFromPreset = (preset: AccessTimeRangePreset): [Date, Date] | null => {
+  if (preset === "custom") return null;
   const option = TIME_RANGE_PRESETS.find((item) => item.value === preset) || TIME_RANGE_PRESETS[1];
   if (!option.hours) return null;
   const end = new Date();
@@ -691,6 +716,7 @@ const onFilterChange = () => {
 };
 
 const onTimePresetChange = () => {
+  trendDrilldownRange.value = null;
   onFilterChange();
 };
 
@@ -704,6 +730,8 @@ const onKeywordInput = () => {
 
 const resetFilters = () => {
   timeRangePreset.value = "24h";
+  trendDrilldownRange.value = null;
+  trendDrilldownActive.value = false;
   filters.role = undefined;
   filters.allowed = undefined;
   filters.clientType = undefined;
@@ -724,12 +752,13 @@ const buildQueryParams = (overrides: Record<string, any> = {}) => {
   if (filters.role) params.role = filters.role;
   if (filters.allowed !== undefined) params.allowed = filters.allowed;
   if (filters.clientType) params.client_type = filters.clientType;
+  if (trendDrilldownActive.value) params.event_type = "permission";
   const keywordToken = filters.keyword.trim();
   if (keywordToken) {
     params.keyword = keywordToken;
     if (/^[0-9a-f:.]+$/i.test(keywordToken)) params.client_ip = keywordToken;
   }
-  const presetRange = timeRangePreset.value ? buildTimeRangeFromPreset(timeRangePreset.value) : null;
+  const presetRange = trendDrilldownRange.value || buildTimeRangeFromPreset(timeRangePreset.value);
   if (presetRange) {
     params.start_time = presetRange[0].toISOString();
     params.end_time = presetRange[1].toISOString();
@@ -796,6 +825,37 @@ const refresh = () => {
   loadData();
 };
 
+const drilldownRangeLabel = computed(() => {
+  if (!trendDrilldownRange.value) return "";
+  const [start, end] = trendDrilldownRange.value;
+  const compact = (value: Date) => `${value.getMonth() + 1}/${value.getDate()} ${String(value.getHours()).padStart(2, "0")}:${String(value.getMinutes()).padStart(2, "0")}`;
+  return `${compact(start)}–${compact(end)}`;
+});
+
+const clearTrendDrilldownRange = () => {
+  trendDrilldownRange.value = null;
+  trendDrilldownActive.value = false;
+  timeRangePreset.value = "24h";
+  onFilterChange();
+};
+
+const applyTrendFilter = async (payload: TrendDrilldownPayload) => {
+  page.value = 1;
+  trendDrilldownActive.value = true;
+  filters.allowed = payload.allowed;
+  filters.role = payload.role;
+  filters.clientType = payload.clientType;
+  filters.keyword = payload.keyword || "";
+  if (payload.startAt && payload.endAt) {
+    trendDrilldownRange.value = [new Date(payload.startAt), new Date(payload.endAt)];
+    timeRangePreset.value = "custom";
+  } else {
+    trendDrilldownRange.value = null;
+    timeRangePreset.value = payload.preset || "24h";
+  }
+  await loadData();
+};
+
 const openLogDetail = (row: AccessLogItem) => {
   selectedLog.value = row;
   detailDrawerVisible.value = true;
@@ -1023,7 +1083,7 @@ onBeforeUnmount(() => {
   stopTimers();
 });
 
-defineExpose({ refresh });
+defineExpose({ refresh, applyTrendFilter });
 </script>
 
 <style scoped>
@@ -1089,12 +1149,12 @@ defineExpose({ refresh });
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
-  padding: 0 0 8px;
+  padding: 10px 12px;
   background: transparent;
   border: none;
   box-shadow: none;
   border-bottom: 1px solid var(--audit-border);
-  margin-bottom: 8px;
+  margin-bottom: 0;
 }
 
 .filter-inputs {
@@ -1249,19 +1309,14 @@ defineExpose({ refresh });
 
 .access-log-card {
   min-width: 0;
-  padding: 10px;
+  padding: 0;
+  overflow: hidden;
   border: 1px solid var(--audit-border);
   border-radius: var(--card-radius);
   background: #fff;
   box-shadow: var(--card-shadow);
 }
 
-.access-log-card {
-  overflow: hidden;
-}
-
-
-
 .section-head {
   display: flex;
   align-items: flex-start;
@@ -1302,14 +1357,14 @@ defineExpose({ refresh });
 .log-surface {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 0;
 }
 
 .table-shell {
   min-width: 0;
   overflow: hidden;
-  border: 1px solid #edf2f7;
-  border-radius: 10px;
+  border: 0;
+  border-radius: 0;
 }
 
 .access-table {
@@ -1331,6 +1386,14 @@ defineExpose({ refresh });
   padding: 0 8px;
 }
 
+.access-table :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden;
+}
+
+.access-table :deep(.el-scrollbar__bar.is-horizontal) {
+  display: none;
+}
+
 .time-cell,
 .ip-cell,
 .location-cell,
@@ -1608,7 +1671,8 @@ defineExpose({ refresh });
 .logs-pagination {
   display: flex;
   justify-content: flex-end;
-  padding: 8px 10px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--audit-border);
   background: #fff;
 }
 
diff --git a/frontend/src/components/PermissionMonitoring.test.ts b/frontend/src/components/PermissionMonitoring.test.ts
index 8392cd82..b3dcca41 100644
--- a/frontend/src/components/PermissionMonitoring.test.ts
+++ b/frontend/src/components/PermissionMonitoring.test.ts
@@ -122,7 +122,13 @@ describe("PermissionMonitoring.vue", () => {
     expect(source).toContain(".permission-monitoring.is-source-tab .soybean-monitoring-tabs :deep(.el-tabs__content)");
     expect(source).toContain("overflow: hidden");
     expect(source).toContain(".soybean-monitoring-tabs :deep(.el-tabs__content)");
-    expect(source).toContain("overflow: auto");
+    expect(source).toContain("flex: 1 1 0;");
+    expect(source).toContain("height: auto;");
+    expect(source).toContain("overflow-y: auto;");
+    expect(source).toContain('height: auto;\n  min-height: 100%;');
+    expect(source).toContain('.permission-monitoring.is-source-tab .soybean-monitoring-tabs :deep(.el-tab-pane[aria-hidden="false"])');
+    expect(source).toContain("flex: 0 0 52px;");
+    expect(source).toContain("overscroll-behavior: contain;");
   });
 
   it("resizes the source-analysis chart when its tab becomes active", () => {
@@ -141,10 +147,12 @@ 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="trends" lazy');
+    expect(source).toContain('@drilldown="openTrendDrilldown"');
+    expect(source).toContain('accessLogsRef.value?.applyTrendFilter(payload)');
     expect(source).toContain('label="访问日志" name="logs" lazy');
     expect(source).toContain('label="来源分析" name="ip-locations" lazy');
     expect(source).toContain('<SecurityCenter v-if="props.isAdmin"');
@@ -159,7 +167,12 @@ describe("PermissionMonitoring.vue", () => {
     expect(source).toContain('const formatResponseTime');
     expect(source).toContain('return "<0.1ms"');
     expect(source).toContain("业务样本不足");
-    expect(source).toContain("组件在线不代表指标已完成评估");
+    expect(source).not.toContain("组件在线不代表指标已完成评估");
+    expect(source).not.toContain("评分由性能、拒绝率、缓存、告警和组件状态共同计算");
+    expect(source).not.toContain("最近一次检查未发现需要处理的问题");
+    expect(source).toContain('class="health-summary-label">综合状态');
+    expect(source).toContain('class="health-signal-item"');
+    expect(source).toContain('item.deduction ? `-${item.deduction}` : "正常"');
     expect(source).toContain('class="overview-pane"');
     expect(source).toContain('class="overview-hero-card"');
     expect(source).toContain('class="operations-card"');
diff --git a/frontend/src/components/PermissionMonitoring.vue b/frontend/src/components/PermissionMonitoring.vue
index 08748df7..3ab4b2e1 100644
--- a/frontend/src/components/PermissionMonitoring.vue
+++ b/frontend/src/components/PermissionMonitoring.vue
@@ -79,16 +79,16 @@
                     </div>
                   </template>
                 </el-progress>
-                <div class="health-summary-copy">
-                  <strong>{{ health.sample_sufficient ? "当前运行正常" : "等待业务样本" }}</strong>
-                  <span v-if="health.sample_sufficient">评分由性能、拒绝率、缓存、告警和组件状态共同计算</span>
-                  <span v-else>组件在线不代表指标已完成评估</span>
+                <div class="health-summary-copy" :class="`is-${healthDisplayStatus}`">
+                  <span class="health-summary-label">综合状态</span>
+                  <strong>{{ health.sample_sufficient ? getHealthSummaryLabel(health.status) : "待评估" }}</strong>
                 </div>
               </div>
               <div v-if="health.sample_sufficient" class="health-signal-list">
-                <span v-for="item in healthScoreItems" :key="item.label" :class="{ 'is-warning': item.deduction }">
-                  {{ item.label }}{{ item.deduction ? ` -${item.deduction}` : " 正常" }}
-                </span>
+                <div v-for="item in healthScoreItems" :key="item.label" class="health-signal-item" :class="{ 'is-warning': item.deduction }">
+                  <span>{{ item.label }}</span>
+                  <strong>{{ item.deduction ? `-${item.deduction}` : "正常" }}</strong>
+                </div>
               </div>
               <div v-else class="sample-warning">
                 近 1 小时仅 {{ health.last_hour.total_checks }} 次权限检查，业务样本不足
@@ -195,7 +195,6 @@
               <span class="empty-alert-icon">✓</span>
               <div>
                 <strong>暂无活动告警</strong>
-                <small>最近一次检查未发现需要处理的问题</small>
               </div>
             </div>
             <el-empty v-else description="告警数据尚未加载" :image-size="44" />
@@ -222,14 +221,14 @@
         </div>
       </el-tab-pane>
 
-      <el-tab-pane label="性能趋势" name="trends" lazy>
+      <el-tab-pane label="运行趋势" name="trends" lazy>
         <template #label>
           <span class="soybean-tab-label">
             <component :is="IconActivity" />
-            <span>性能趋势</span>
+            <span>运行趋势</span>
           </span>
         </template>
-        <PermissionTrendCharts ref="trendChartsRef" />
+        <PermissionTrendCharts ref="trendChartsRef" @drilldown="openTrendDrilldown" />
       </el-tab-pane>
 
       <el-tab-pane v-if="props.isAdmin" label="安全中心" name="security" lazy>
@@ -364,6 +363,22 @@ type IpLocationsExpose = {
 };
 
 const ipLocationsRef = ref<IpLocationsExpose>();
+
+interface TrendDrilldownPayload {
+  preset?: "24h" | "7d" | "30d";
+  startAt?: string;
+  endAt?: string;
+  allowed?: boolean;
+  role?: string;
+  clientType?: string;
+  keyword?: string;
+}
+
+const openTrendDrilldown = async (payload: TrendDrilldownPayload) => {
+  activeTab.value = "logs";
+  await nextTick();
+  await accessLogsRef.value?.applyTrendFilter(payload);
+};
 const securityCenterRef = ref<InstanceType<typeof SecurityCenter>>();
 
 const formatTime = (timestamp: number): string => {
@@ -384,6 +399,11 @@ const getHealthLabel = (status: string) => {
   return map[status] || status;
 };
 
+const getHealthSummaryLabel = (status: string) => {
+  const map: Record<string, string> = { healthy: "正常", degraded: "需关注", unhealthy: "异常" };
+  return map[status] || "待评估";
+};
+
 const getComponentStatusLabel = (status: string) => {
   const map: Record<string, string> = { healthy: "正常", degraded: "降级", unhealthy: "异常", unknown: "未知" };
   return map[status] || status;
@@ -593,6 +613,9 @@ defineExpose({ refresh });
 }
 
 .soybean-monitoring-tabs :deep(.el-tabs__header) {
+  position: relative;
+  z-index: 10;
+  flex: 0 0 52px;
   height: 52px;
   margin: 0 0 10px;
   padding: 0 24px;
@@ -656,10 +679,14 @@ defineExpose({ refresh });
 }
 
 .soybean-monitoring-tabs :deep(.el-tabs__content) {
-  flex: 1 1 auto;
+  flex: 1 1 0;
+  height: auto;
   min-height: 0;
   padding: 0;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
 }
 
 .permission-monitoring.is-source-tab .soybean-monitoring-tabs :deep(.el-tabs__content) {
@@ -671,8 +698,14 @@ defineExpose({ refresh });
 }
 
 .soybean-monitoring-tabs :deep(.el-tab-pane[aria-hidden="false"]) {
+  height: auto;
+  min-height: 100%;
+}
+
+.permission-monitoring.is-source-tab .soybean-monitoring-tabs :deep(.el-tab-pane[aria-hidden="false"]) {
   height: 100%;
   min-height: 0;
+  overflow: hidden;
 }
 
 .ip-locations-pane {
@@ -1314,26 +1347,58 @@ defineExpose({ refresh });
 .health-summary {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   min-height: 96px;
 }
 
 .health-summary-copy {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  min-width: 0;
+  justify-content: center;
+  gap: 2px;
+  min-width: 92px;
+  padding: 9px 11px;
+  border: 1px solid #bbf7d0;
+  border-radius: 10px;
+  background: linear-gradient(145deg, #f0fdf4, #ecfdf5);
 }
 
 .health-summary-copy strong {
-  color: var(--mon-ink);
-  font-size: 13px;
+  color: #047857;
+  font-size: 17px;
+  line-height: 1.2;
 }
 
-.health-summary-copy span {
+.health-summary-copy .health-summary-label {
   color: var(--mon-muted);
-  font-size: 11px;
-  line-height: 1.45;
+  font-size: 10px;
+}
+
+.health-summary-copy.is-degraded {
+  border-color: #fde68a;
+  background: linear-gradient(145deg, #fffbeb, #fef3c7);
+}
+
+.health-summary-copy.is-degraded strong {
+  color: #b45309;
+}
+
+.health-summary-copy.is-unhealthy {
+  border-color: #fecaca;
+  background: linear-gradient(145deg, #fef2f2, #fee2e2);
+}
+
+.health-summary-copy.is-unhealthy strong {
+  color: #dc2626;
+}
+
+.health-summary-copy.is-unknown {
+  border-color: #dbe3ef;
+  background: #f8fafc;
+}
+
+.health-summary-copy.is-unknown strong {
+  color: #64748b;
 }
 
 .score-inner strong {
@@ -1348,16 +1413,36 @@ defineExpose({ refresh });
 .health-signal-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px 6px;
+  gap: 5px;
 }
 
-.health-signal-list span {
-  color: var(--mon-muted);
-  font-size: 11px;
+.health-signal-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 7px;
+  border: 1px solid #d1fae5;
+  border-radius: 999px;
+  background: #f0fdf4;
+  font-size: 10px;
   white-space: nowrap;
 }
 
-.health-signal-list .is-warning {
+.health-signal-item span {
+  color: var(--mon-muted);
+}
+
+.health-signal-item strong {
+  color: #047857;
+  font-size: 10px;
+}
+
+.health-signal-item.is-warning {
+  border-color: #fde68a;
+  background: #fffbeb;
+}
+
+.health-signal-item.is-warning strong {
   color: #b45309;
 }
 
@@ -1729,6 +1814,7 @@ defineExpose({ refresh });
   }
 
   .soybean-monitoring-tabs :deep(.el-tabs__header) {
+    flex-basis: 48px;
     margin-bottom: 8px;
     padding: 0 12px;
   }
diff --git a/frontend/src/components/PermissionTemplateSelector.test.ts b/frontend/src/components/PermissionTemplateSelector.test.ts
new file mode 100644
index 00000000..2ae26c1a
--- /dev/null
+++ b/frontend/src/components/PermissionTemplateSelector.test.ts
@@ -0,0 +1,21 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const readSource = () => readFileSync(resolve(__dirname, "./PermissionTemplateSelector.vue"), "utf8");
+
+describe("PermissionTemplateSelector.vue", () => {
+  it("renders accessible role actions with explicit project status", () => {
+    const source = readSource();
+
+    expect(source).toContain("<button");
+    expect(source).toContain(":aria-label=");
+    expect(source).toContain("使用中");
+    expect(source).toContain("未启用");
+    expect(source).toContain("配置权限");
+    expect(source).toContain("grid-template-columns: repeat(5, minmax(0, 1fr));");
+    expect(source).toContain("min-height: 122px;");
+    expect(source).toContain("margin-top: auto;");
+    expect(source).not.toContain('PM: "👑"');
+  });
+});
diff --git a/frontend/src/components/PermissionTemplateSelector.vue b/frontend/src/components/PermissionTemplateSelector.vue
index e7428e8d..3903d138 100644
--- a/frontend/src/components/PermissionTemplateSelector.vue
+++ b/frontend/src/components/PermissionTemplateSelector.vue
@@ -2,17 +2,20 @@
   <div class="template-selector">
     <div class="selector-header">
       <div class="selector-title-group">
-        <h3>角色权限概览</h3>
+        <h3>角色策略概览</h3>
       </div>
       <el-tag effect="plain" size="small" type="info" round>{{ templates.length }} 个角色</el-tag>
     </div>
 
     <div class="template-grid">
-      <div
+      <button
         v-for="template in sortedTemplates"
         :key="template.id"
+        type="button"
         class="template-card"
         :class="{ inactive: template.category && !isRoleActive(template.category) }"
+        :disabled="!template.category"
+        :aria-label="template.category ? `配置 ${template.name} 权限` : template.name"
         @click="template.category && emit('edit-role', template.category!)"
       >
         <div class="card-top">
@@ -21,7 +24,9 @@
             <span class="card-name">{{ template.name }}</span>
             <span v-if="template.description" class="card-desc">{{ template.description }}</span>
           </div>
-          <el-tag v-if="!template.is_system" size="small" effect="dark" round type="success" class="card-badge">自定义</el-tag>
+          <span :class="['card-status', isRoleActive(template.category || '') ? 'card-status--active' : 'card-status--inactive']">
+            {{ isRoleActive(template.category || '') ? '使用中' : '未启用' }}
+          </span>
         </div>
         <div class="card-stats">
           <template v-if="props.currentPermissions && template.category && props.currentPermissions[template.category]">
@@ -31,11 +36,11 @@
             <div class="stat-numbers">
               <span class="stat enabled">
                 <span class="stat-dot green" />
-                {{ countCurrentEnabled(template.category) }} 启用
+                {{ countCurrentEnabled(template.category) }} 已授权
               </span>
               <span class="stat disabled">
                 <span class="stat-dot red" />
-                {{ countCurrentDisabled(template.category) }} 禁用
+                {{ countCurrentDisabled(template.category) }} 未授权
               </span>
             </div>
           </template>
@@ -46,16 +51,17 @@
             <div class="stat-numbers">
               <span class="stat enabled">
                 <span class="stat-dot green" />
-                {{ countEnabled(template) }} 启用
+                {{ countEnabled(template) }} 已授权
               </span>
               <span class="stat disabled">
                 <span class="stat-dot red" />
-                {{ countDisabled(template) }} 禁用
+                {{ countDisabled(template) }} 未授权
               </span>
             </div>
           </template>
         </div>
-      </div>
+        <div class="card-action">配置权限 <span aria-hidden="true">→</span></div>
+      </button>
     </div>
   </div>
 </template>
@@ -94,10 +100,10 @@ const sortedTemplates = computed(() =>
 
 const roleIcon = (category: string | null) => {
   const icons: Record<string, string> = {
-    PM: "👑", CRA: "📋", PV: "🔍",
-    QA: "🏥", CTA: "📦",
+    PM: "PM", CRA: "CRA", PV: "PV",
+    QA: "QA", CTA: "CTA",
   };
-  return icons[category ?? ""] ?? "📄";
+  return icons[category ?? ""] ?? "—";
 };
 
 const isRoleActive = (role: string) => props.activeRoles?.includes(role) ?? false;
@@ -155,38 +161,45 @@ watch(() => props.refreshKey, loadTemplates);
 
 <style scoped>
 .template-selector {
-  padding: 8px 0 12px;
+  padding: 4px 0 6px;
 }
 
 .selector-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
 
 .selector-title-group h3 {
-  margin: 0 0 4px;
-  font-size: 15px;
+  margin: 0;
+  font-size: 13px;
   font-weight: 600;
   color: #1a2332;
 }
 
 .template-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   align-items: start;
-  gap: 12px;
-  margin-bottom: 12px;
+  gap: 8px;
+  margin-bottom: 6px;
 }
 
 .template-card {
   position: relative;
-  padding: 12px 14px;
+  width: 100%;
+  min-height: 122px;
+  padding: 8px 10px;
   border: 1px solid #e2e8f0;
-  border-radius: 12px;
+  border-radius: 8px;
   background: #fff;
   cursor: pointer;
+  color: inherit;
+  font: inherit;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
   transition: all 0.2s ease;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
 }
@@ -197,11 +210,19 @@ watch(() => props.refreshKey, loadTemplates);
   transform: translateY(-2px);
 }
 
+.template-card:focus-visible {
+  outline: 3px solid rgba(59, 130, 246, 0.25);
+  outline-offset: 2px;
+}
+
+.template-card:disabled {
+  cursor: default;
+}
+
 .template-card.inactive {
   border-style: dashed;
   border-color: #e2e8f0;
   background: #fafbfc;
-  opacity: 0.7;
 }
 
 .template-card.inactive:hover {
@@ -213,12 +234,21 @@ watch(() => props.refreshKey, loadTemplates);
 .card-top {
   display: flex;
   align-items: flex-start;
-  gap: 10px;
-  margin-bottom: 12px;
+  gap: 7px;
+  margin-bottom: 7px;
 }
 
 .card-icon {
-  font-size: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  background: #eef5fa;
+  color: #315f7a;
+  font-size: 9px;
+  font-weight: 800;
   line-height: 1;
   flex-shrink: 0;
 }
@@ -232,7 +262,7 @@ watch(() => props.refreshKey, loadTemplates);
 }
 
 .card-name {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
   color: #1a2332;
 }
@@ -242,13 +272,49 @@ watch(() => props.refreshKey, loadTemplates);
 }
 
 .card-desc {
-  font-size: 11px;
+  font-size: 10px;
   color: #94a3b8;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.card-status {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 2px 5px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 9.5px;
+  font-weight: 600;
+}
+
+.card-status--active {
+  border-color: #b9ddcc;
+  background: #edf8f2;
+  color: #267054;
+}
+
+.card-status--inactive {
+  border-color: #dbe3ea;
+  background: #f5f7f9;
+  color: #7a8997;
+}
+
+.card-action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  margin-top: auto;
+  padding-top: 6px;
+  border-top: 1px solid #edf1f5;
+  color: #416b83;
+  font-size: 10.5px;
+  font-weight: 600;
+}
+
 .card-badge {
   flex-shrink: 0;
 }
@@ -256,11 +322,11 @@ watch(() => props.refreshKey, loadTemplates);
 .card-stats {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 5px;
 }
 
 .stat-bar {
-  height: 4px;
+  height: 3px;
   border-radius: 2px;
   background: #f1f5f9;
   overflow: hidden;
@@ -275,20 +341,20 @@ watch(() => props.refreshKey, loadTemplates);
 
 .stat-numbers {
   display: flex;
-  gap: 12px;
+  gap: 8px;
 }
 
 .stat {
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 12px;
+  font-size: 10.5px;
   color: #64748b;
 }
 
 .stat-dot {
-  width: 6px;
-  height: 6px;
+  width: 5px;
+  height: 5px;
   border-radius: 50%;
   flex-shrink: 0;
 }
@@ -300,4 +366,22 @@ watch(() => props.refreshKey, loadTemplates);
 .template-card.inactive .stat-dot.red { background: #cbd5e1; }
 .template-card.inactive .stat-fill { background: #cbd5e1; }
 
+@media (max-width: 1180px) {
+  .template-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 920px) {
+  .template-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .template-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 </style>
diff --git a/frontend/src/components/PermissionTrendCharts.test.ts b/frontend/src/components/PermissionTrendCharts.test.ts
index 897dfeaa..5a114707 100644
--- a/frontend/src/components/PermissionTrendCharts.test.ts
+++ b/frontend/src/components/PermissionTrendCharts.test.ts
@@ -5,39 +5,56 @@ 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", () => {
+  it("uses accurate permission trend language and removes the misleading all-period option", () => {
     const source = readSource();
 
-    expect(source).toContain("暂无有效响应时间样本");
-    expect(source).toContain("暂无缓存访问样本");
-    expect(source).toContain("暂无权限检查样本");
-    expect(source).toContain("const hasResponseSamples = computed");
-    expect(source).toContain("const hasCacheSamples = computed");
+    expect(source).toContain("权限检查趋势");
+    expect(source).toContain("权限检查量");
+    expect(source).toContain("权限检查耗时");
+    expect(source).toContain("权限拒绝率");
+    expect(source).toContain("权限缓存命中率");
+    expect(source).not.toContain("系统性能趋势");
+    expect(source).not.toContain('{ value: "all", label: "全部" }');
   });
 
-  it("sorts points chronologically and includes the date in 24-hour labels", () => {
+  it("renders dense period summaries with previous-period and sample context", () => {
     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()");
+    expect(source).toContain('class="metric-strip"');
+    expect(source).toContain("P95 检查耗时");
+    expect(source).toContain("活跃范围");
+    expect(source).toContain("较上期");
+    expect(source).toContain("cache_sample_available");
+    expect(source).toContain("不等于命中率为 0");
   });
 
-  it("keeps period selection, update time and refresh together in the tab toolbar", () => {
+  it("uses honest chart semantics and visible health thresholds", () => {
     const source = readSource();
 
-    expect(source).toContain('class="toolbar-actions"');
-    expect(source).toContain("最近成功更新：{{ formatLastUpdated(lastUpdatedAt) }}");
-    expect(source).toContain('@click="loadData">刷新');
+    expect(source).toContain('stack: "checks"');
+    expect(source).toContain("smooth: false");
+    expect(source).toContain('formatter: "慢检查 50ms"');
+    expect(source).toContain('formatter: "健康线 80%"');
+    expect(source).toContain("connectNulls: false");
   });
 
-  it("uses compact chart surfaces while preserving a two-column desktop layout", () => {
+  it("provides denial, latency and client attribution with access-log drilldown", () => {
     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");
+    expect(source).toContain("拒绝最多");
+    expect(source).toContain("耗时最高");
+    expect(source).toContain("客户端表现");
+    expect(source).toContain('@click="onChecksChartClick"');
+    expect(source).toContain('emit("drilldown"');
+    expect(source).toContain("openAttributionLogs");
+  });
+
+  it("keeps the information-dense layout responsive", () => {
+    const source = readSource();
+
+    expect(source).toContain("grid-template-columns: repeat(5, minmax(0, 1fr))");
+    expect(source).toContain("grid-template-columns: minmax(0, 2.1fr)");
+    expect(source).toContain("grid-template-columns: repeat(3, minmax(0, 1fr))");
+    expect(source).toContain("@media (max-width: 900px)");
   });
 });
diff --git a/frontend/src/components/PermissionTrendCharts.vue b/frontend/src/components/PermissionTrendCharts.vue
index 0fe25213..49019d07 100644
--- a/frontend/src/components/PermissionTrendCharts.vue
+++ b/frontend/src/components/PermissionTrendCharts.vue
@@ -1,474 +1,916 @@
 <template>
-  <div class="trend-charts">
-    <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 class="trend-dashboard">
+    <section class="trend-toolbar">
+      <div class="toolbar-copy">
+        <span class="toolbar-eyebrow">运行趋势</span>
+        <div class="toolbar-title-row">
+          <h3>权限检查趋势</h3>
+          <el-tag v-if="response" effect="plain" size="small" type="info">{{ bucketLabel }}</el-tag>
+        </div>
+        <div class="toolbar-meta">
+          <span>{{ observedLabel }}</span>
+          <span v-if="response">{{ response.range.bucket_count }} 个时间桶</span>
+          <span v-if="lastUpdatedAt">页面更新 {{ formatClock(lastUpdatedAt) }}</span>
+        </div>
       </div>
       <div class="toolbar-actions">
-        <TimeRangeSelector v-model="timeRangePreset" @change="loadData" />
+        <TimeRangeSelector v-model="timeRangePreset" :options="timeRangeOptions" @change="loadData" />
         <el-button size="small" :loading="loading" @click="loadData">刷新</el-button>
       </div>
-    </div>
+    </section>
 
     <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" :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 v-loading="loading" class="trend-content">
+      <section class="metric-strip" aria-label="权限趋势摘要">
+        <article v-for="card in metricCards" :key="card.label" class="metric-card" :class="card.tone">
+          <div class="metric-card-head">
+            <span>{{ card.label }}</span>
+            <small v-if="card.delta" :class="['metric-delta', card.deltaTone]">{{ card.delta }}</small>
           </div>
-          <div class="chart-title-group">
-            <h4>监测事件趋势</h4>
-            <span>允许与拒绝</span>
+          <strong>{{ card.value }}</strong>
+          <small class="metric-detail">{{ card.detail }}</small>
+        </article>
+      </section>
+
+      <section class="primary-grid">
+        <article class="panel chart-panel primary-chart-panel">
+          <header class="panel-header">
+            <div>
+              <h4>权限检查量</h4>
+              <span>按时间桶展示允许与拒绝；点击柱体可下钻日志</span>
+            </div>
+            <el-button text size="small" @click="openPeriodLogs()">查看日志</el-button>
+          </header>
+          <v-chart
+            v-if="hasEventSamples"
+            :option="checksChartOption"
+            autoresize
+            class="chart chart-primary"
+            @click="onChecksChartClick"
+          />
+          <div v-else class="trend-empty-state compact-empty">
+            <strong>所选时段没有权限检查</strong>
+            <span>产生业务访问后，允许与拒绝会按时间桶显示在这里。</span>
           </div>
-          <strong class="chart-latest">{{ latestEventLabel }}</strong>
-        </div>
-        <v-chart v-if="hasEventSamples" :option="checksChartOption" autoresize class="chart" />
-        <div v-else class="trend-empty-state">所选时段暂无监测事件</div>
-      </div>
-      <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>
+        </article>
+
+        <aside class="panel insight-panel">
+          <header class="panel-header">
+            <div>
+              <h4>运行判断</h4>
+              <span>基于所选周期的可解释信号</span>
+            </div>
+          </header>
+          <div class="insight-list">
+            <div v-for="item in operationalInsights" :key="item.title" class="insight-item" :class="item.tone">
+              <span class="insight-dot" />
+              <div>
+                <strong>{{ item.title }}</strong>
+                <small>{{ item.detail }}</small>
+              </div>
+            </div>
           </div>
-          <div class="chart-title-group">
-            <h4>响应时间趋势</h4>
-            <span>平均值与最大值</span>
+          <div class="insight-actions">
+            <el-button size="small" @click="openPeriodLogs()">全部访问</el-button>
+            <el-button v-if="summary.denied_checks > 0" size="small" type="danger" plain @click="openPeriodLogs(false)">
+              拒绝日志
+            </el-button>
           </div>
-          <strong class="chart-latest">{{ latestResponseLabel }}</strong>
-        </div>
-        <v-chart v-if="hasResponseSamples" :option="responseTimeOption" autoresize class="chart" />
-        <div v-else class="trend-empty-state">暂无有效响应时间样本</div>
-      </div>
-      <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>
+        </aside>
+      </section>
+
+      <section class="secondary-grid">
+        <article class="panel chart-panel">
+          <header class="panel-header">
+            <div>
+              <h4>权限检查耗时</h4>
+              <span>平均值与最大值 · 50ms 慢检查阈值</span>
+            </div>
+            <strong>{{ formatMilliseconds(summary.p95_elapsed_ms) }} <small>P95</small></strong>
+          </header>
+          <v-chart v-if="hasResponseSamples" :option="responseTimeOption" autoresize class="chart" />
+          <div v-else class="trend-empty-state">暂无有效耗时样本</div>
+        </article>
+
+        <article class="panel chart-panel">
+          <header class="panel-header">
+            <div>
+              <h4>权限缓存命中率</h4>
+              <span>按快照统计 · 80% 健康参考线</span>
+            </div>
+            <strong>{{ summary.cache_sample_available ? `${summary.cache_hit_rate.toFixed(1)}%` : "--" }}</strong>
+          </header>
+          <v-chart v-if="hasCacheSamples" :option="cacheHitOption" autoresize class="chart" />
+          <div v-else class="trend-empty-state">
+            <strong>所选时段没有缓存快照</strong>
+            <span>这表示历史缓存指标未形成样本，不等于命中率为 0。</span>
           </div>
-          <div class="chart-title-group">
-            <h4>缓存命中率</h4>
-            <span>命中 / 总访问</span>
+        </article>
+      </section>
+
+      <section class="attribution-grid">
+        <article class="panel attribution-panel">
+          <header class="panel-header">
+            <div>
+              <h4>拒绝最多</h4>
+              <span>权限点 / 角色</span>
+            </div>
+          </header>
+          <div v-if="attribution.top_denied.length" class="ranking-list">
+            <button
+              v-for="(item, index) in attribution.top_denied"
+              :key="`${item.endpoint_key}-${item.role}`"
+              type="button"
+              class="ranking-row"
+              @click="openAttributionLogs({ allowed: false, keyword: item.endpoint_key, role: item.role })"
+            >
+              <span class="rank-index">{{ index + 1 }}</span>
+              <span class="rank-copy"><strong>{{ item.endpoint_key }}</strong><small>{{ item.role }}</small></span>
+              <strong class="rank-value danger-text">{{ item.denied_count }}</strong>
+            </button>
           </div>
-          <strong class="chart-latest">{{ latestCacheLabel }}</strong>
-        </div>
-        <v-chart v-if="hasCacheSamples" :option="cacheHitOption" autoresize class="chart" />
-        <div v-else class="trend-empty-state">暂无缓存访问样本</div>
-      </div>
-      <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 v-else class="mini-empty">所选时段无拒绝记录</div>
+        </article>
+
+        <article class="panel attribution-panel">
+          <header class="panel-header">
+            <div>
+              <h4>耗时最高</h4>
+              <span>优先展示慢检查与高平均耗时权限点</span>
+            </div>
+          </header>
+          <div v-if="attribution.top_slow.length" class="ranking-list">
+            <button
+              v-for="(item, index) in attribution.top_slow"
+              :key="item.endpoint_key"
+              type="button"
+              class="ranking-row"
+              @click="openAttributionLogs({ keyword: item.endpoint_key })"
+            >
+              <span class="rank-index">{{ index + 1 }}</span>
+              <span class="rank-copy"><strong>{{ item.endpoint_key }}</strong><small>{{ item.sample_count }} 次 · 慢检查 {{ item.slow_count }}</small></span>
+              <strong class="rank-value">{{ item.avg_elapsed_ms.toFixed(1) }}ms</strong>
+            </button>
           </div>
-          <div class="chart-title-group">
-            <h4>异常拒绝率趋势</h4>
-            <span>拒绝事件占比</span>
+          <div v-else class="mini-empty">所选时段无耗时样本</div>
+        </article>
+
+        <article class="panel attribution-panel">
+          <header class="panel-header">
+            <div>
+              <h4>客户端表现</h4>
+              <span>来源 / 版本 / 平台</span>
+            </div>
+          </header>
+          <div v-if="attribution.client_breakdown.length" class="ranking-list">
+            <button
+              v-for="(item, index) in attribution.client_breakdown"
+              :key="`${item.client_type}-${item.client_version}-${item.client_platform}`"
+              type="button"
+              class="ranking-row"
+              @click="openAttributionLogs({ clientType: normalizeClientType(item.client_type) })"
+            >
+              <span class="rank-index">{{ index + 1 }}</span>
+              <span class="rank-copy"><strong>{{ clientLabel(item.client_type) }} · {{ item.client_version }}</strong><small>{{ item.client_platform }} · {{ item.total_count }} 次</small></span>
+              <span class="client-metrics"><strong>{{ item.avg_elapsed_ms.toFixed(1) }}ms</strong><small>拒绝 {{ item.deny_rate.toFixed(1) }}%</small></span>
+            </button>
           </div>
-          <strong class="chart-latest">{{ latestDenyLabel }}</strong>
-        </div>
-        <v-chart v-if="hasDenySamples" :option="denyRateOption" autoresize class="chart" />
-        <div v-else class="trend-empty-state">暂无权限检查样本</div>
-      </div>
+          <div v-else class="mini-empty">所选时段无客户端样本</div>
+        </article>
+      </section>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
 import VChart from "vue-echarts";
 import { use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
-import { LineChart, BarChart } from "echarts/charts";
+import { BarChart, LineChart } from "echarts/charts";
 import {
-  TitleComponent,
-  TooltipComponent,
   GridComponent,
   LegendComponent,
+  MarkLineComponent,
+  TooltipComponent,
 } from "echarts/components";
 import { fetchPermissionTrends } from "@/api/projectPermissions";
-import type { TrendDataPoint } from "@/types/api";
+import type {
+  TrendClientAttribution,
+  TrendDataPoint,
+  TrendDeniedAttribution,
+  TrendPeriodSummary,
+  TrendsResponse,
+  TrendSlowAttribution,
+} from "@/types/api";
 import TimeRangeSelector from "./TimeRangeSelector.vue";
 
-use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent]);
+use([CanvasRenderer, BarChart, LineChart, TooltipComponent, GridComponent, LegendComponent, MarkLineComponent]);
+
+type TimeRangePreset = "24h" | "7d" | "30d";
+interface TrendDrilldownPayload {
+  preset?: TimeRangePreset;
+  startAt?: string;
+  endAt?: string;
+  allowed?: boolean;
+  role?: string;
+  clientType?: string;
+  keyword?: string;
+}
+
+const emit = defineEmits<{
+  (event: "drilldown", payload: TrendDrilldownPayload): void;
+}>();
+
+const emptySummary: TrendPeriodSummary = {
+  total_checks: 0,
+  allowed_checks: 0,
+  denied_checks: 0,
+  deny_rate: 0,
+  avg_elapsed_ms: 0,
+  p95_elapsed_ms: 0,
+  max_elapsed_ms: 0,
+  slow_check_count: 0,
+  active_study_count: 0,
+  active_user_count: 0,
+  active_endpoint_count: 0,
+  cache_hits: 0,
+  cache_misses: 0,
+  cache_hit_rate: 0,
+  cache_sample_available: false,
+};
+
+const emptyAttribution = {
+  top_denied: [] as TrendDeniedAttribution[],
+  top_slow: [] as TrendSlowAttribution[],
+  client_breakdown: [] as TrendClientAttribution[],
+};
 
-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 response = ref<TrendsResponse | null>(null);
+const dataPoints = ref<TrendDataPoint[]>([]);
 
-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 summary = computed(() => response.value?.summary || emptySummary);
+const previousSummary = computed(() => response.value?.previous_summary || emptySummary);
+const attribution = computed(() => response.value?.attribution || emptyAttribution);
+const hasEventSamples = computed(() => summary.value.total_checks > 0);
+const hasResponseSamples = computed(() => dataPoints.value.some((point) => point.total_checks > 0));
+const hasCacheSamples = computed(() => dataPoints.value.some((point) => point.cache_sample_available));
+
+const formatNumber = (value: number) => value.toLocaleString("zh-CN");
+const formatMilliseconds = (value: number) => `${value.toFixed(value >= 10 ? 1 : 2)}ms`;
+const formatClock = (value: Date) => `${String(value.getHours()).padStart(2, "0")}:${String(value.getMinutes()).padStart(2, "0")}`;
+const formatDateTime = (iso: string) => {
+  const value = new Date(iso);
+  return `${value.getMonth() + 1}/${value.getDate()} ${formatClock(value)}`;
+};
+const formatAxisTime = (iso: string) => {
+  const value = new Date(iso);
+  if (timeRangePreset.value === "30d") return `${value.getMonth() + 1}/${value.getDate()}`;
+  return `${value.getMonth() + 1}/${value.getDate()} ${String(value.getHours()).padStart(2, "0")}:00`;
 };
 
-const formatTime = (iso: string) => {
-  const d = new Date(iso);
-  if (timeRangePreset.value === "24h") return `${d.getMonth() + 1}/${d.getDate()} ${String(d.getHours()).padStart(2, "0")}:00`;
-  return `${d.getMonth() + 1}/${d.getDate()}`;
+const bucketLabel = computed(() => {
+  const seconds = response.value?.range.bucket_seconds || 3600;
+  if (seconds === 3600) return "每小时";
+  if (seconds === 21600) return "每6小时";
+  return "每天";
+});
+const observedLabel = computed(() => {
+  const observed = response.value?.range.observed_end_at;
+  return observed ? `数据记录至 ${formatDateTime(observed)}` : "所选时段无访问记录";
+});
+const xLabels = computed(() => dataPoints.value.map((point) => formatAxisTime(point.bucket_time)));
+
+type DeltaTone = "good" | "bad" | "neutral";
+const percentageDelta = (current: number, previous: number, lowerIsBetter = false) => {
+  if (previous <= 0) return current <= 0
+    ? { text: "与上期持平", tone: "neutral" as DeltaTone }
+    : { text: "上期无基线", tone: "neutral" as DeltaTone };
+  const delta = ((current - previous) / previous) * 100;
+  const improved = lowerIsBetter ? delta < 0 : delta > 0;
+  const tone: DeltaTone = Math.abs(delta) < 0.05 ? "neutral" : improved ? "good" : "bad";
+  return { text: `较上期 ${delta >= 0 ? "+" : ""}${delta.toFixed(1)}%`, tone };
+};
+const pointDelta = (current: number, previous: number, lowerIsBetter = false) => {
+  const delta = current - previous;
+  const improved = lowerIsBetter ? delta < 0 : delta > 0;
+  const tone: DeltaTone = Math.abs(delta) < 0.005 ? "neutral" : improved ? "good" : "bad";
+  return { text: `较上期 ${delta >= 0 ? "+" : ""}${delta.toFixed(1)}pp`, tone };
 };
 
-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 metricCards = computed(() => {
+  const totalDelta = percentageDelta(summary.value.total_checks, previousSummary.value.total_checks);
+  const denyDelta = pointDelta(summary.value.deny_rate, previousSummary.value.deny_rate, true);
+  const p95Delta = percentageDelta(summary.value.p95_elapsed_ms, previousSummary.value.p95_elapsed_ms, true);
+  const cacheDelta = summary.value.cache_sample_available && previousSummary.value.cache_sample_available
+    ? pointDelta(summary.value.cache_hit_rate, previousSummary.value.cache_hit_rate)
+    : { text: "历史样本不足", tone: "neutral" as DeltaTone };
+  const cacheTotal = summary.value.cache_hits + summary.value.cache_misses;
+  return [
+    {
+      label: "权限检查",
+      value: formatNumber(summary.value.total_checks),
+      detail: `允许 ${formatNumber(summary.value.allowed_checks)} · 拒绝 ${formatNumber(summary.value.denied_checks)}`,
+      delta: totalDelta.text,
+      deltaTone: totalDelta.tone,
+      tone: "blue",
+    },
+    {
+      label: "活跃范围",
+      value: `${formatNumber(summary.value.active_study_count)} 个项目`,
+      detail: `${formatNumber(summary.value.active_user_count)} 位用户 · ${formatNumber(summary.value.active_endpoint_count)} 个权限点`,
+      delta: "所选周期",
+      deltaTone: "neutral" as DeltaTone,
+      tone: "violet",
+    },
+    {
+      label: "权限拒绝率",
+      value: `${summary.value.deny_rate.toFixed(1)}%`,
+      detail: `拒绝 ${formatNumber(summary.value.denied_checks)} / ${formatNumber(summary.value.total_checks)}`,
+      delta: denyDelta.text,
+      deltaTone: denyDelta.tone,
+      tone: summary.value.deny_rate > 20 ? "red" : "orange",
+    },
+    {
+      label: "P95 检查耗时",
+      value: formatMilliseconds(summary.value.p95_elapsed_ms),
+      detail: `平均 ${formatMilliseconds(summary.value.avg_elapsed_ms)} · 慢检查 ${formatNumber(summary.value.slow_check_count)}`,
+      delta: p95Delta.text,
+      deltaTone: p95Delta.tone,
+      tone: summary.value.p95_elapsed_ms > 50 ? "red" : "cyan",
+    },
+    {
+      label: "权限缓存命中率",
+      value: summary.value.cache_sample_available ? `${summary.value.cache_hit_rate.toFixed(1)}%` : "--",
+      detail: summary.value.cache_sample_available
+        ? `命中 ${formatNumber(summary.value.cache_hits)} / ${formatNumber(cacheTotal)}`
+        : "所选时段未形成缓存快照",
+      delta: cacheDelta.text,
+      deltaTone: cacheDelta.tone,
+      tone: "green",
+    },
+  ];
 });
 
-const baseGridOption = {
-  grid: { left: 50, right: 20, top: 20, bottom: 25 },
-  tooltip: { trigger: "axis" as const },
-};
+const operationalInsights = computed(() => {
+  const items: Array<{ title: string; detail: string; tone: "success" | "warning" | "info" }> = [];
+  if (summary.value.total_checks === 0) {
+    items.push({ title: "等待业务访问", detail: "当前周期没有权限检查，暂不能判断趋势。", tone: "info" });
+  } else if (summary.value.deny_rate > 20) {
+    items.push({ title: "拒绝率偏高", detail: `${summary.value.deny_rate.toFixed(1)}% 的检查被拒绝，建议查看拒绝归因。`, tone: "warning" });
+  } else {
+    items.push({ title: "拒绝率处于低位", detail: `当前拒绝 ${summary.value.denied_checks} 次，占比 ${summary.value.deny_rate.toFixed(1)}%。`, tone: "success" });
+  }
+  if (summary.value.p95_elapsed_ms > 50) {
+    items.push({ title: "尾部耗时超过阈值", detail: `P95 为 ${formatMilliseconds(summary.value.p95_elapsed_ms)}，慢检查 ${summary.value.slow_check_count} 次。`, tone: "warning" });
+  } else if (summary.value.total_checks > 0) {
+    items.push({ title: "检查耗时稳定", detail: `P95 ${formatMilliseconds(summary.value.p95_elapsed_ms)}，低于 50ms 慢检查阈值。`, tone: "success" });
+  }
+  if (!summary.value.cache_sample_available) {
+    items.push({ title: "缓存历史样本不足", detail: "当前不能据此判断缓存效率；这不代表命中率为 0。", tone: "info" });
+  } else if (summary.value.cache_hit_rate < 80) {
+    items.push({ title: "缓存命中率低于参考线", detail: `当前为 ${summary.value.cache_hit_rate.toFixed(1)}%，建议检查缓存失效频率。`, tone: "warning" });
+  } else {
+    items.push({ title: "缓存效率正常", detail: `当前命中率 ${summary.value.cache_hit_rate.toFixed(1)}%，样本 ${summary.value.cache_hits + summary.value.cache_misses} 次。`, tone: "success" });
+  }
+  return items;
+});
 
 const checksChartOption = computed(() => ({
-  grid: { left: 50, right: 20, top: 20, bottom: 50 },
-  tooltip: { trigger: "axis" as const },
-  legend: { data: ["允许", "拒绝"], bottom: 0, itemGap: 20 },
-  xAxis: { type: "category", data: xLabels.value, axisLine: { lineStyle: { color: "#e2e8f0" } }, axisLabel: { color: "#64748b" } },
-  yAxis: { type: "value", minInterval: 1, splitLine: { lineStyle: { color: "#f1f5f9" } }, axisLabel: { color: "#64748b" } },
+  animationDuration: 350,
+  grid: { left: 46, right: 16, top: 16, bottom: 42 },
+  tooltip: { trigger: "axis" as const, axisPointer: { type: "shadow" } },
+  legend: { data: ["允许", "拒绝"], bottom: 0, itemGap: 18, itemWidth: 10, itemHeight: 10 },
+  xAxis: { type: "category", data: xLabels.value, axisTick: { show: false }, axisLine: { lineStyle: { color: "#dbe4f0" } }, axisLabel: { color: "#718096", hideOverlap: true } },
+  yAxis: { type: "value", minInterval: 1, splitLine: { lineStyle: { color: "#edf2f7" } }, axisLabel: { color: "#718096" } },
   series: [
     {
       name: "允许",
-      type: "line",
-      smooth: true,
-      symbol: "circle",
-      symbolSize: 6,
-      data: dataPoints.value.map((p: TrendDataPoint) => p.allowed_checks),
-      itemStyle: { color: "#10b981" },
-      lineStyle: { width: 2.5 },
-      areaStyle: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "rgba(16,185,129,0.2)" }, { offset: 1, color: "rgba(16,185,129,0)" }] } },
+      type: "bar",
+      stack: "checks",
+      barMaxWidth: 28,
+      data: dataPoints.value.map((point) => point.allowed_checks),
+      itemStyle: { color: "#21b981", borderRadius: [0, 0, 3, 3] },
     },
     {
       name: "拒绝",
-      type: "line",
-      smooth: true,
-      symbol: "circle",
-      symbolSize: 6,
-      data: dataPoints.value.map((p: TrendDataPoint) => p.denied_checks),
-      itemStyle: { color: "#ef4444" },
-      lineStyle: { width: 2.5 },
-      areaStyle: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "rgba(239,68,68,0.15)" }, { offset: 1, color: "rgba(239,68,68,0)" }] } },
+      type: "bar",
+      stack: "checks",
+      barMaxWidth: 28,
+      data: dataPoints.value.map((point) => point.denied_checks),
+      itemStyle: { color: "#ef5b67", borderRadius: [3, 3, 0, 0] },
     },
   ],
 }));
 
 const responseTimeOption = computed(() => ({
-  grid: { left: 50, right: 20, top: 20, bottom: 50 },
+  animationDuration: 350,
+  grid: { left: 50, right: 18, top: 18, bottom: 42 },
   tooltip: { trigger: "axis" as const },
-  legend: { data: ["平均响应时间", "最大响应时间"], bottom: 0, itemGap: 20 },
-  xAxis: { type: "category", data: xLabels.value, axisLine: { lineStyle: { color: "#e2e8f0" } }, axisLabel: { color: "#64748b" } },
-  yAxis: { type: "value", name: "ms", splitLine: { lineStyle: { color: "#f1f5f9" } }, axisLabel: { color: "#64748b" } },
+  legend: { data: ["平均耗时", "最大耗时"], bottom: 0, itemGap: 16, itemWidth: 14 },
+  xAxis: { type: "category", data: xLabels.value, axisTick: { show: false }, axisLine: { lineStyle: { color: "#dbe4f0" } }, axisLabel: { color: "#718096", hideOverlap: true } },
+  yAxis: { type: "value", name: "ms", splitLine: { lineStyle: { color: "#edf2f7" } }, axisLabel: { color: "#718096" } },
   series: [
     {
-      name: "平均响应时间",
+      name: "平均耗时",
       type: "line",
-      smooth: true,
+      smooth: false,
       symbol: "circle",
-      symbolSize: 6,
-      data: dataPoints.value.map((p: TrendDataPoint) => p.avg_elapsed_ms),
+      symbolSize: 5,
+      data: dataPoints.value.map((point) => point.total_checks > 0 ? point.avg_elapsed_ms : null),
       itemStyle: { color: "#3b82f6" },
-      lineStyle: { width: 2.5 },
-      areaStyle: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "rgba(59,130,246,0.15)" }, { offset: 1, color: "rgba(59,130,246,0)" }] } },
+      lineStyle: { width: 2.2 },
+      areaStyle: { color: "rgba(59,130,246,0.08)" },
+      markLine: { silent: true, symbol: "none", label: { formatter: "慢检查 50ms", color: "#d97706" }, lineStyle: { color: "#f59e0b", type: "dashed" }, data: [{ yAxis: 50 }] },
     },
     {
-      name: "最大响应时间",
+      name: "最大耗时",
       type: "line",
-      smooth: true,
+      smooth: false,
       symbol: "diamond",
-      symbolSize: 6,
-      data: dataPoints.value.map((p: TrendDataPoint) => p.max_elapsed_ms),
+      symbolSize: 5,
+      data: dataPoints.value.map((point) => point.total_checks > 0 ? point.max_elapsed_ms : null),
       itemStyle: { color: "#f59e0b" },
-      lineStyle: { width: 2, type: "dashed" },
+      lineStyle: { width: 1.8, type: "dashed" },
     },
   ],
 }));
 
 const cacheHitOption = computed(() => ({
-  grid: { left: 50, right: 20, top: 20, bottom: 25 },
+  animationDuration: 350,
+  grid: { left: 46, right: 18, top: 18, bottom: 34 },
   tooltip: { trigger: "axis" as const },
-  xAxis: { type: "category", data: xLabels.value, axisLine: { lineStyle: { color: "#e2e8f0" } }, axisLabel: { color: "#64748b" } },
-  yAxis: { type: "value", max: 100, name: "%", splitLine: { lineStyle: { color: "#f1f5f9" } }, axisLabel: { color: "#64748b" } },
+  xAxis: { type: "category", data: xLabels.value, axisTick: { show: false }, axisLine: { lineStyle: { color: "#dbe4f0" } }, axisLabel: { color: "#718096", hideOverlap: true } },
+  yAxis: { type: "value", min: 0, max: 100, name: "%", splitLine: { lineStyle: { color: "#edf2f7" } }, axisLabel: { color: "#718096" } },
   series: [
     {
       name: "缓存命中率",
-      type: "bar",
-      barMaxWidth: 24,
-      itemStyle: {
-        borderRadius: [4, 4, 0, 0],
-        color: (params: any) => {
-          const val = params.value;
-          if (val >= 80) return { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#34d399" }, { offset: 1, color: "#10b981" }] };
-          if (val >= 50) return { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#fbbf24" }, { offset: 1, color: "#f59e0b" }] };
-          return { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#f87171" }, { offset: 1, color: "#ef4444" }] };
-        },
-      },
-      data: dataPoints.value.map((p: TrendDataPoint) => p.cache_hit_rate),
+      type: "line",
+      smooth: false,
+      connectNulls: false,
+      symbol: "circle",
+      symbolSize: 6,
+      data: dataPoints.value.map((point) => point.cache_sample_available ? point.cache_hit_rate : null),
+      itemStyle: { color: "#10b981" },
+      lineStyle: { width: 2.2 },
+      areaStyle: { color: "rgba(16,185,129,0.09)" },
+      markLine: { silent: true, symbol: "none", label: { formatter: "健康线 80%", color: "#059669" }, lineStyle: { color: "#34d399", type: "dashed" }, data: [{ yAxis: 80 }] },
     },
   ],
 }));
 
-const denyRateOption = computed(() => ({
-  grid: { left: 50, right: 20, top: 20, bottom: 25 },
-  tooltip: { trigger: "axis" as const },
-  xAxis: { type: "category", data: xLabels.value, axisLine: { lineStyle: { color: "#e2e8f0" } }, axisLabel: { color: "#64748b" } },
-  yAxis: { type: "value", max: 100, name: "%", splitLine: { lineStyle: { color: "#f1f5f9" } }, axisLabel: { color: "#64748b" } },
-  series: [
-    {
-      name: "异常拒绝率",
-      type: "line",
-      smooth: true,
-      symbol: "circle",
-      symbolSize: 6,
-      data: dataPoints.value.map((p: TrendDataPoint) =>
-        p.total_checks > 0 ? Math.round((p.denied_checks / p.total_checks) * 1000) / 10 : null
-      ),
-      itemStyle: { color: "#ef4444" },
-      lineStyle: { width: 2.5 },
-      areaStyle: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "rgba(239,68,68,0.2)" }, { offset: 1, color: "rgba(239,68,68,0)" }] } },
-    },
-  ],
-}));
+const openPeriodLogs = (allowed?: boolean) => emit("drilldown", { preset: timeRangePreset.value, allowed });
+const openAttributionLogs = (payload: TrendDrilldownPayload) => emit("drilldown", { preset: timeRangePreset.value, ...payload });
+const onChecksChartClick = (params: { dataIndex?: number; seriesName?: string }) => {
+  if (params.dataIndex === undefined) return;
+  const point = dataPoints.value[params.dataIndex];
+  const bucketSeconds = response.value?.range.bucket_seconds || 3600;
+  const startAt = point.bucket_time;
+  const endAt = new Date(new Date(startAt).getTime() + bucketSeconds * 1000).toISOString();
+  emit("drilldown", {
+    startAt,
+    endAt,
+    allowed: params.seriesName === "拒绝" ? false : params.seriesName === "允许" ? true : undefined,
+  });
+};
+const normalizeClientType = (value: string) => ["web", "desktop"].includes(value) ? value : "unknown";
+const clientLabel = (value: string) => value === "web" ? "网页端" : value === "desktop" ? "桌面端" : "未知来源";
 
 const loadData = async () => {
   loading.value = true;
   try {
-    const apiPeriod = timeRangePreset.value === "all" ? "30d" : timeRangePreset.value;
-    const res = await fetchPermissionTrends(apiPeriod);
-    dataPoints.value = [...res.data.data_points].sort(
+    const result = await fetchPermissionTrends(timeRangePreset.value);
+    response.value = result.data;
+    dataPoints.value = [...result.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 {
-    loadError.value = "趋势数据加载失败，图表中可能是上次成功获取的数据";
+    loadError.value = "趋势数据加载失败，页面中可能是上次成功获取的数据";
   } finally {
     loading.value = false;
   }
 };
 
 onMounted(loadData);
-
 defineExpose({ refresh: loadData });
 </script>
 
 <style scoped>
-.trend-charts {
-  --trend-ink: #1a2332;
-  --trend-muted: #64748b;
-  --trend-border: #e2e8f0;
+.trend-dashboard {
+  --trend-ink: #172033;
+  --trend-muted: #6f7d92;
+  --trend-border: #dfe7f1;
+  --trend-surface: #ffffff;
   --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;
+  color: var(--trend-ink);
+}
+
+.trend-toolbar,
+.panel,
+.metric-card {
+  border: 1px solid var(--trend-border);
+  background: var(--trend-surface);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(30, 64, 175, 0.035);
 }
 
 .trend-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 48px;
-  padding: 8px 14px;
-  margin-bottom: 8px;
-  background: #fff;
-  border: 1px solid var(--trend-border);
+  min-height: 62px;
+  padding: 9px 14px;
+  margin-bottom: 9px;
   border-radius: var(--trend-radius);
-  box-shadow: var(--trend-shadow);
 }
 
-.toolbar-left {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-}
-
-.toolbar-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--trend-ink);
-}
-
-
-
-.toolbar-actions {
+.toolbar-copy,
+.toolbar-title-row,
+.toolbar-meta,
+.toolbar-actions,
+.metric-card-head,
+.panel-header,
+.insight-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: 10px;
-}
-
-.load-alert {
-  margin-bottom: 8px;
-}
-
-.chart-card {
-  background: #fff;
-  border: 1px solid var(--trend-border);
-  border-radius: var(--trend-radius);
-  min-height: 276px;
-  padding: 12px 14px;
-  box-shadow: var(--trend-shadow);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.chart-card:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
-}
-
-.chart-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 8px;
-}
-
-.chart-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  flex-shrink: 0;
-}
-
-.chart-icon svg {
-  width: 14px;
-  height: 14px;
-}
-
-.chart-icon.blue { background: #eff6ff; color: #3b82f6; }
-.chart-icon.cyan { background: #ecfeff; color: #06b6d4; }
-.chart-icon.green { background: #ecfdf5; color: #10b981; }
-.chart-icon.danger { background: #fef2f2; color: #ef4444; }
-
-.chart-card h4 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--trend-ink);
-}
-
-.chart-title-group {
-  display: flex;
-  flex: 1;
+.toolbar-copy {
+  align-items: flex-start;
   flex-direction: column;
-  gap: 2px;
   min-width: 0;
 }
 
-.chart-title-group span {
+.toolbar-eyebrow {
+  color: #667eea;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+
+.toolbar-title-row {
+  gap: 8px;
+}
+
+.toolbar-title-row h3 {
+  margin: 1px 0;
+  font-size: 16px;
+  line-height: 1.35;
+}
+
+.toolbar-meta {
+  flex-wrap: wrap;
+  gap: 6px 14px;
   color: var(--trend-muted);
   font-size: 11px;
 }
 
-.chart-latest {
-  padding: 4px 7px;
-  border-radius: 8px;
-  background: #f8fafc;
-  color: var(--trend-ink);
-  font-size: 12px;
+.toolbar-meta span + span {
+  position: relative;
+}
+
+.toolbar-meta span + span::before {
+  position: absolute;
+  left: -8px;
+  content: "·";
+}
+
+.toolbar-actions {
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.load-alert {
+  margin-bottom: 9px;
+}
+
+.trend-content {
+  display: grid;
+  gap: 9px;
+}
+
+.metric-strip {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.metric-card {
+  position: relative;
+  min-width: 0;
+  padding: 10px 11px;
+  overflow: hidden;
+  border-radius: 12px;
+}
+
+.metric-card::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 2px;
+  background: var(--metric-accent);
+  content: "";
+}
+
+.metric-card.blue { --metric-accent: #3b82f6; }
+.metric-card.violet { --metric-accent: #8b5cf6; }
+.metric-card.orange { --metric-accent: #f59e0b; }
+.metric-card.red { --metric-accent: #ef5b67; }
+.metric-card.cyan { --metric-accent: #06b6d4; }
+.metric-card.green { --metric-accent: #10b981; }
+
+.metric-card-head {
+  justify-content: space-between;
+  gap: 6px;
+  color: var(--trend-muted);
+  font-size: 11px;
+}
+
+.metric-card > strong {
+  display: block;
+  margin: 4px 0 2px;
+  overflow: hidden;
+  font-size: 20px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric-detail {
+  display: block;
+  overflow: hidden;
+  color: var(--trend-muted);
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric-delta {
+  padding: 2px 5px;
+  border-radius: 999px;
+  background: #f3f6fa;
+  font-size: 9px;
+  white-space: nowrap;
+}
+
+.metric-delta.good { color: #059669; background: #ecfdf5; }
+.metric-delta.bad { color: #dc2626; background: #fef2f2; }
+.metric-delta.neutral { color: #64748b; }
+
+.primary-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 2.1fr) minmax(250px, 0.7fr);
+  gap: 9px;
+}
+
+.secondary-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 9px;
+}
+
+.attribution-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 9px;
+}
+
+.panel {
+  min-width: 0;
+  padding: 11px 13px;
+  border-radius: var(--trend-radius);
+}
+
+.panel-header {
+  justify-content: space-between;
+  min-height: 34px;
+  gap: 10px;
+}
+
+.panel-header h4 {
+  margin: 0;
+  font-size: 13px;
   font-weight: 650;
+}
+
+.panel-header span,
+.panel-header small {
+  display: block;
+  margin-top: 2px;
+  color: var(--trend-muted);
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.panel-header > strong {
+  font-size: 15px;
   white-space: nowrap;
 }
 
 .chart {
-  height: 212px;
   width: 100%;
+  height: 196px;
+}
+
+.chart-primary {
+  height: 240px;
 }
 
 .trend-empty-state {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 212px;
-  border: 1px dashed #dbe3ef;
+  flex-direction: column;
+  min-height: 196px;
+  margin-top: 7px;
+  border: 1px dashed #d9e3ef;
   border-radius: 10px;
   background: #f8fafc;
+  color: #93a1b5;
+  font-size: 11px;
+  text-align: center;
+}
+
+.trend-empty-state strong {
+  margin-bottom: 4px;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.compact-empty {
+  min-height: 240px;
+}
+
+.insight-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+.insight-list {
+  display: grid;
+  gap: 7px;
+  margin-top: 9px;
+}
+
+.insight-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 9px;
+  background: #f8fafc;
+}
+
+.insight-dot {
+  width: 7px;
+  height: 7px;
+  margin-top: 4px;
+  border-radius: 50%;
+  background: #94a3b8;
+  flex-shrink: 0;
+}
+
+.insight-item.success .insight-dot { background: #10b981; box-shadow: 0 0 0 3px #d1fae5; }
+.insight-item.warning .insight-dot { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
+.insight-item.info .insight-dot { background: #64748b; box-shadow: 0 0 0 3px #e2e8f0; }
+
+.insight-item strong,
+.insight-item small {
+  display: block;
+}
+
+.insight-item strong {
+  font-size: 11px;
+}
+
+.insight-item small {
+  margin-top: 2px;
+  color: var(--trend-muted);
+  font-size: 10px;
+  line-height: 1.35;
+}
+
+.insight-actions {
+  gap: 6px;
+  margin-top: auto;
+  padding-top: 10px;
+}
+
+.attribution-panel {
+  min-height: 188px;
+}
+
+.ranking-list {
+  display: grid;
+  gap: 2px;
+  margin-top: 7px;
+}
+
+.ranking-row {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 20px minmax(0, 1fr) auto;
+  gap: 7px;
+  width: 100%;
+  padding: 5px 4px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ranking-row:hover {
+  background: #f3f7fd;
+}
+
+.rank-index {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  background: #eef2f7;
+  color: #64748b;
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.rank-copy,
+.client-metrics {
+  min-width: 0;
+}
+
+.rank-copy strong,
+.rank-copy small,
+.client-metrics strong,
+.client-metrics small {
+  display: block;
+}
+
+.rank-copy strong {
+  overflow: hidden;
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rank-copy small,
+.client-metrics small {
+  margin-top: 1px;
+  color: var(--trend-muted);
+  font-size: 9px;
+}
+
+.rank-value,
+.client-metrics {
+  font-size: 10px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.danger-text { color: #dc2626; }
+
+.mini-empty {
+  display: grid;
+  min-height: 120px;
+  place-items: center;
   color: #94a3b8;
-  font-size: 13px;
+  font-size: 11px;
+}
+
+@media (max-width: 1180px) {
+  .metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .attribution-grid { grid-template-columns: 1fr; }
 }
 
 @media (max-width: 900px) {
-  .charts-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .trend-toolbar {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .toolbar-actions {
-    flex: 1 1 auto;
-    flex-wrap: wrap;
-  }
-
-  .chart-card {
-    min-height: 260px;
-  }
+  .primary-grid,
+  .secondary-grid { grid-template-columns: 1fr; }
+  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 
-@media (max-width: 600px) {
-  .trend-charts {
-    padding: 0 8px 10px;
-  }
-
-  .trend-toolbar,
-  .toolbar-left {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .toolbar-actions {
-    width: 100%;
-    justify-content: flex-start;
-  }
+@media (max-width: 640px) {
+  .trend-dashboard { padding: 0 8px 10px; }
+  .trend-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
+  .toolbar-actions { width: 100%; flex-wrap: wrap; }
+  .metric-strip { grid-template-columns: 1fr; }
 }
 </style>
diff --git a/frontend/src/components/SecurityCenter.test.ts b/frontend/src/components/SecurityCenter.test.ts
index 213d1aa7..74018a4b 100644
--- a/frontend/src/components/SecurityCenter.test.ts
+++ b/frontend/src/components/SecurityCenter.test.ts
@@ -39,6 +39,16 @@ describe("SecurityCenter", () => {
     expect(source).not.toContain('<section class="audit-filters">\n      <el-select');
   });
 
+  it("keeps the security table edge-to-edge while preserving filter and pagination spacing", () => {
+    const source = readSource();
+
+    expect(source).toMatch(/\.security-table-wrap \{[\s\S]*?padding: 0;[\s\S]*?overflow: hidden;/);
+    expect(source).toMatch(/\.table-head \{[\s\S]*?margin-bottom: 0;[\s\S]*?padding: 10px 12px;/);
+    expect(source).toMatch(/\.pagination-wrap \{[\s\S]*?padding: 8px 12px;[\s\S]*?border-top:/);
+    expect(source).toContain(".security-table :deep(.el-scrollbar__wrap)");
+    expect(source).toContain(".security-table :deep(.el-scrollbar__bar.is-horizontal)");
+  });
+
   it("keeps risk levels on the page and opens abnormal sources in a compact ranking dialog", () => {
     const source = readSource();
 
diff --git a/frontend/src/components/SecurityCenter.vue b/frontend/src/components/SecurityCenter.vue
index 409107fc..caa770ed 100644
--- a/frontend/src/components/SecurityCenter.vue
+++ b/frontend/src/components/SecurityCenter.vue
@@ -938,7 +938,8 @@ defineExpose({ refresh: loadSecurityEvents });
 
 .security-table-wrap {
   min-width: 0;
-  padding: 10px;
+  padding: 0;
+  overflow: hidden;
   border: 1px solid var(--audit-border);
   border-radius: var(--card-radius);
   background: #fff;
@@ -964,6 +965,14 @@ defineExpose({ refresh: loadSecurityEvents });
   padding: 0 8px;
 }
 
+.security-table :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden;
+}
+
+.security-table :deep(.el-scrollbar__bar.is-horizontal) {
+  display: none;
+}
+
 .time-cell,
 .ip-cell,
 .location-cell,
@@ -1222,7 +1231,9 @@ defineExpose({ refresh: loadSecurityEvents });
 .table-head {
   align-items: center;
   flex-wrap: wrap;
-  margin-bottom: 10px;
+  margin-bottom: 0;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--audit-border);
 }
 
 .table-head .section-title-group {
@@ -1490,15 +1501,12 @@ defineExpose({ refresh: loadSecurityEvents });
   text-align: right;
 }
 
-.security-table-wrap {
-  overflow: hidden;
-}
-
 .pagination-wrap {
   display: flex;
   justify-content: flex-end;
-  margin-top: 10px;
-  padding: 8px 16px 0;
+  margin-top: 0;
+  padding: 8px 12px;
+  border-top: 1px solid var(--audit-border);
 }
 
 .category-pill {
@@ -1806,8 +1814,7 @@ defineExpose({ refresh: loadSecurityEvents });
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .security-analysis-card,
-  .security-table-wrap {
+  .security-analysis-card {
     padding: 10px;
   }
 
diff --git a/frontend/src/components/WebLayout.vue b/frontend/src/components/WebLayout.vue
index c4cf19d8..ee7f6569 100644
--- a/frontend/src/components/WebLayout.vue
+++ b/frontend/src/components/WebLayout.vue
@@ -34,7 +34,7 @@
             <el-icon><Suitcase /></el-icon>
             <span>{{ TEXT.menu.projectManagement }}</span>
           </el-menu-item>
-          <el-menu-item v-if="isAdmin" index="/admin/audit-logs">
+          <el-menu-item v-if="canAccessAuditLogs" index="/admin/audit-logs">
             <el-icon><Document /></el-icon>
             <span>{{ TEXT.menu.auditLogs }}</span>
           </el-menu-item>
@@ -55,7 +55,7 @@
               <span>{{ TEXT.menu.permissionManagement }}</span>
             </template>
             <el-menu-item index="/admin/permissions/system">系统级权限</el-menu-item>
-            <el-menu-item index="/admin/permissions/project">项目权限配置</el-menu-item>
+            <el-menu-item index="/admin/permissions/project">项目访问控制</el-menu-item>
           </el-sub-menu>
         </el-menu-item-group>
 
@@ -414,6 +414,7 @@ import {
 } from "@element-plus/icons-vue";
 import { ElMessageBox } from "element-plus";
 import { getProjectRoutePermission, hasProjectPermission, projectRouteLandingPaths } from "../utils/projectRoutePermissions";
+import { isApiPermissionAllowed } from "../utils/apiPermissionValue";
 import { forceLogout, LOGOUT_REASON_MANUAL } from "../session/sessionManager";
 import { checkDesktopUpdateAndPrompt } from "../session/desktopUpdateManager";
 import {
@@ -446,6 +447,12 @@ const isAdmin = computed(() => !!auth.user?.is_admin);
 const isCollapsed = ref(localStorage.getItem("ctms_sidebar_collapsed") === "1");
 const projectRole = computed(() => study.currentStudyRole || (study.currentStudy as any)?.role_in_study || "");
 const canAccessAdminPermissions = computed(() => isAdmin.value || projectRole.value === "PM");
+const canAccessAuditLogs = computed(() =>
+  isAdmin.value || (
+    projectRole.value === "PM" &&
+    isApiPermissionAllowed(study.currentPermissions?.[projectRole.value]?.["audit_logs:read"])
+  ),
+);
 const canAccessProjectPath = (path: string) =>
   hasProjectPermission(study.currentPermissions, projectRole.value, getProjectRoutePermission(path), isAdmin.value);
 const canAccessAnyProjectPath = (paths: string[]) => paths.some((path) => canAccessProjectPath(path));
@@ -844,7 +851,7 @@ const breadcrumbs = computed(() => {
   const items: any[] = [];
 
   if (route.path.startsWith("/admin")) {
-    // 顶级管理后台菜单（按权限过滤），供末级面包屑横跳
+    // 顶级系统管理菜单（按权限过滤），供末级面包屑横跳
     const topItems: { label: string; path: string }[] = [];
     if (isAdmin.value) topItems.push({ label: TEXT.menu.accountManagement, path: "/admin/users" });
     topItems.push({ label: TEXT.menu.projectManagement, path: "/admin/projects" });
@@ -856,10 +863,10 @@ const breadcrumbs = computed(() => {
     // 权限管理子页，供「权限管理」父级与末级横跳
     const permItems = [
       { label: "系统级权限", path: "/admin/permissions/system" },
-      { label: "项目权限配置", path: "/admin/permissions/project" },
+      { label: "项目访问控制", path: "/admin/permissions/project" },
     ];
 
-    // 首项「管理后台」为分组标签，不可点击
+    // 首项「系统管理」为分组标签，不可点击
     items.push({ label: TEXT.menu.admin });
 
     // 第二级：当前所属的顶级模块，带下拉横跳到其它顶级模块
@@ -890,7 +897,7 @@ const breadcrumbs = computed(() => {
       }
       // 项目详情：项目名由 viewContext 作为末项提供，继续走通用逻辑
     } else {
-      // 顶级页面：模块名带同级下拉，可在管理后台各模块间横跳
+      // 顶级页面：模块名带同级下拉，可在系统管理各模块间横跳
       items.push({
         label: curTop?.label || (route.meta?.title as string),
         path: route.path,
diff --git a/frontend/src/components/layout/navigation.test.ts b/frontend/src/components/layout/navigation.test.ts
new file mode 100644
index 00000000..28e3cac2
--- /dev/null
+++ b/frontend/src/components/layout/navigation.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { buildAdminNavigationItems } from "./navigation";
+
+const labels = (items: ReturnType<typeof buildAdminNavigationItems>) => items.map((item) => item.label);
+
+describe("system management navigation", () => {
+  it("exposes project management, audit logs, and permission management to PMs", () => {
+    const items = buildAdminNavigationItems({
+      hasUser: true,
+      isAdmin: false,
+      canAccessAdminPermissions: true,
+      canAccessAuditLogs: true,
+    });
+
+    expect(labels(items)).toEqual(["项目管理", "审计日志", "权限管理"]);
+  });
+
+  it("does not expose PM system modules to a non-PM account", () => {
+    const items = buildAdminNavigationItems({
+      hasUser: true,
+      isAdmin: false,
+      canAccessAdminPermissions: false,
+      canAccessAuditLogs: false,
+    });
+
+    expect(labels(items)).toEqual(["项目管理"]);
+  });
+});
diff --git a/frontend/src/components/layout/navigation.ts b/frontend/src/components/layout/navigation.ts
index e3b3206a..f932dac2 100644
--- a/frontend/src/components/layout/navigation.ts
+++ b/frontend/src/components/layout/navigation.ts
@@ -58,6 +58,7 @@ export const buildAdminNavigationItems = (options: {
   hasUser: boolean;
   isAdmin: boolean;
   canAccessAdminPermissions: boolean;
+  canAccessAuditLogs: boolean;
 }): LayoutNavigationItem[] => {
   if (!options.hasUser) return [];
 
@@ -78,15 +79,17 @@ export const buildAdminNavigationItems = (options: {
     icon: "project",
     keywords: ["project"],
   });
+  if (options.isAdmin || options.canAccessAuditLogs) {
+    items.push({
+      label: TEXT.menu.auditLogs,
+      path: "/admin/audit-logs",
+      group: TEXT.menu.admin,
+      icon: "audit",
+      keywords: ["audit"],
+    });
+  }
   if (options.isAdmin) {
     items.push(
-      {
-        label: TEXT.menu.auditLogs,
-        path: "/admin/audit-logs",
-        group: TEXT.menu.admin,
-        icon: "audit",
-        keywords: ["audit"],
-      },
       {
         label: TEXT.menu.systemMonitoring,
         path: "/admin/system-monitoring",
@@ -128,7 +131,7 @@ export const buildAdminNavigationItems = (options: {
           keywords: ["permission", "system"],
         },
         {
-          label: "项目权限配置",
+          label: "项目访问控制",
           path: "/admin/permissions/project",
           group: TEXT.menu.permissionManagement,
           icon: "key",
diff --git a/frontend/src/locales/zh-CN.ts b/frontend/src/locales/zh-CN.ts
index 63c85c31..60bbc2fa 100644
--- a/frontend/src/locales/zh-CN.ts
+++ b/frontend/src/locales/zh-CN.ts
@@ -276,7 +276,7 @@ export const TEXT = {
     },
   },
   menu: {
-    admin: "管理后台",
+    admin: "系统管理",
     accountManagement: "账号管理",
     projectManagement: "项目管理",
     auditLogs: "审计日志",
diff --git a/frontend/src/router.test.ts b/frontend/src/router.test.ts
index 30e2cff6..a338493c 100644
--- a/frontend/src/router.test.ts
+++ b/frontend/src/router.test.ts
@@ -100,6 +100,8 @@ describe("admin project route permissions", () => {
     expect(source).toContain("const workbenchEntryPath = resolveWorkbenchEntryPath(isDesktopRuntime)");
     expect(source).toContain("next({ path: workbenchEntryPath });");
     expect(source).toContain('if (isDesktopRuntime && token && !isAdmin && to.path.startsWith("/admin"))');
+    expect(source).toContain("const canAccessProjectManagement = studyStore.currentStudyRole === \"PM\"");
+    expect(source).toContain("if (!canAccessProjectManagement)");
     expect(source).toContain('next({ path: DESKTOP_PROJECT_ENTRY_PATH });');
     expect(source).toContain("if (token && isWorkbenchEntryPath(to.path) && studyStore.currentStudy)");
     expect(source).not.toContain("if (token && !studyStore.currentStudy && !isDesktopRuntime)");
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index a422227b..18a90e40 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -438,7 +438,7 @@ const routes: RouteRecordRaw[] = [
         path: "permissions/project",
         name: "AdminPermissionsProject",
         component: PermissionManagement,
-        meta: { title: "项目权限配置", systemPermission: SYSTEM_PERMISSION_PROJECT_CONFIG },
+        meta: { title: "项目访问控制", systemPermission: SYSTEM_PERMISSION_PROJECT_CONFIG },
       },
     ],
   },
@@ -592,8 +592,14 @@ router.beforeEach(async (to, _from, next) => {
   }
 
   if (isDesktopRuntime && token && !isAdmin && to.path.startsWith("/admin")) {
-    next({ path: DESKTOP_PROJECT_ENTRY_PATH });
-    return;
+    const hasPmProject = studyStore.currentStudyRole === "PM" || (studyStore.currentStudy as any)?.role_in_study === "PM";
+    if (!hasPmProject) await studyStore.ensureDefaultPmStudy().catch(() => {});
+    const canAccessProjectManagement = studyStore.currentStudyRole === "PM" || (studyStore.currentStudy as any)?.role_in_study === "PM";
+    if (!canAccessProjectManagement) {
+      next({ path: DESKTOP_PROJECT_ENTRY_PATH });
+      return;
+    }
+    if (!studyStore.currentPermissions) await studyStore.loadCurrentStudyPermissions().catch(() => {});
   }
 
   if (isDesktopRuntime && token && isAdmin && to.path.startsWith("/admin") && studyStore.currentStudy) {
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index b904d8cd..a93f0eaf 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -1060,7 +1060,8 @@ body.is-desktop-runtime .el-dialog {
 body.is-desktop-runtime .profile-settings-dialog,
 body.is-desktop-runtime .desktop-preferences-dialog,
 body.is-desktop-runtime .user-form-dialog,
-body.is-desktop-runtime .reset-password-dialog {
+body.is-desktop-runtime .reset-password-dialog,
+body.is-desktop-runtime .project-form-dialog {
   overflow: visible !important;
   border: none !important;
   border-radius: 0 !important;
@@ -1112,13 +1113,15 @@ body.is-desktop-runtime .el-dialog__body {
 
 /* 账号表单去掉外框后，内容区仍需作为标题与底栏之间的连续面板。 */
 body.is-desktop-runtime .user-form-dialog .el-dialog__body,
-body.is-desktop-runtime .reset-password-dialog .el-dialog__body {
+body.is-desktop-runtime .reset-password-dialog .el-dialog__body,
+body.is-desktop-runtime .project-form-dialog .el-dialog__body {
   background: rgba(248, 250, 252, 0.98);
 }
 
 /* 账号操作弹窗保留单层面板：以小圆角和细边框明确边界，关闭按钮置于标题栏内。 */
 body.is-desktop-runtime .user-form-dialog,
-body.is-desktop-runtime .reset-password-dialog {
+body.is-desktop-runtime .reset-password-dialog,
+body.is-desktop-runtime .project-form-dialog {
   padding: 0 !important;
   overflow: hidden !important;
   border: 1px solid rgba(148, 163, 184, 0.5) !important;
@@ -1126,7 +1129,8 @@ body.is-desktop-runtime .reset-password-dialog {
 }
 
 body.is-desktop-runtime .user-form-dialog .el-dialog__headerbtn,
-body.is-desktop-runtime .reset-password-dialog .el-dialog__headerbtn {
+body.is-desktop-runtime .reset-password-dialog .el-dialog__headerbtn,
+body.is-desktop-runtime .project-form-dialog .el-dialog__headerbtn {
   top: 5px;
   right: 7px;
   width: 28px;
@@ -1222,6 +1226,7 @@ body.is-desktop-runtime .msgbox-fade-leave-to .el-message-box {
 :root[data-ctms-theme="dark"] body.is-desktop-runtime .desktop-preferences-dialog,
 :root[data-ctms-theme="dark"] body.is-desktop-runtime .user-form-dialog,
 :root[data-ctms-theme="dark"] body.is-desktop-runtime .reset-password-dialog,
+:root[data-ctms-theme="dark"] body.is-desktop-runtime .project-form-dialog,
 :root[data-ctms-theme="dark"] body.is-desktop-runtime .desktop-preferences-dialog .el-dialog__body {
   background: transparent !important;
 }
@@ -1244,12 +1249,14 @@ body.is-desktop-runtime .msgbox-fade-leave-to .el-message-box {
 }
 
 :root[data-ctms-theme="dark"] body.is-desktop-runtime .user-form-dialog .el-dialog__body,
-:root[data-ctms-theme="dark"] body.is-desktop-runtime .reset-password-dialog .el-dialog__body {
+:root[data-ctms-theme="dark"] body.is-desktop-runtime .reset-password-dialog .el-dialog__body,
+:root[data-ctms-theme="dark"] body.is-desktop-runtime .project-form-dialog .el-dialog__body {
   background: rgba(17, 24, 39, 0.98);
 }
 
 :root[data-ctms-theme="dark"] body.is-desktop-runtime .user-form-dialog,
-:root[data-ctms-theme="dark"] body.is-desktop-runtime .reset-password-dialog {
+:root[data-ctms-theme="dark"] body.is-desktop-runtime .reset-password-dialog,
+:root[data-ctms-theme="dark"] body.is-desktop-runtime .project-form-dialog {
   border-color: rgba(71, 85, 105, 0.9) !important;
 }
 
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
index 1d9423d2..56fb1a2d 100644
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -549,6 +549,7 @@ export interface AuditLogItem {
 // 系统监测 - 趋势数据
 export interface TrendDataPoint {
   bucket_time: string;
+  sample_state: "complete" | "partial";
   total_checks: number;
   allowed_checks: number;
   denied_checks: number;
@@ -557,11 +558,72 @@ export interface TrendDataPoint {
   cache_hits: number;
   cache_misses: number;
   cache_hit_rate: number;
+  cache_sample_available: boolean;
   error_count: number;
 }
 
+export interface TrendPeriodSummary {
+  total_checks: number;
+  allowed_checks: number;
+  denied_checks: number;
+  deny_rate: number;
+  avg_elapsed_ms: number;
+  p95_elapsed_ms: number;
+  max_elapsed_ms: number;
+  slow_check_count: number;
+  active_study_count: number;
+  active_user_count: number;
+  active_endpoint_count: number;
+  cache_hits: number;
+  cache_misses: number;
+  cache_hit_rate: number;
+  cache_sample_available: boolean;
+}
+
+export interface TrendDeniedAttribution {
+  endpoint_key: string;
+  role: string;
+  denied_count: number;
+}
+
+export interface TrendSlowAttribution {
+  endpoint_key: string;
+  sample_count: number;
+  slow_count: number;
+  avg_elapsed_ms: number;
+  max_elapsed_ms: number;
+}
+
+export interface TrendClientAttribution {
+  client_type: string;
+  client_version: string;
+  client_platform: string;
+  total_count: number;
+  denied_count: number;
+  deny_rate: number;
+  avg_elapsed_ms: number;
+}
+
 export interface TrendsResponse {
   period: string;
+  generated_at: string;
+  range: {
+    start_at: string;
+    end_at: string;
+    previous_start_at: string;
+    previous_end_at: string;
+    bucket_seconds: number;
+    bucket_count: number;
+    timezone: string;
+    observed_end_at: string | null;
+  };
+  summary: TrendPeriodSummary;
+  previous_summary: TrendPeriodSummary;
+  attribution: {
+    top_denied: TrendDeniedAttribution[];
+    top_slow: TrendSlowAttribution[];
+    client_breakdown: TrendClientAttribution[];
+  };
   data_points: TrendDataPoint[];
 }
 
diff --git a/frontend/src/types/desktopCommands.test.ts b/frontend/src/types/desktopCommands.test.ts
index bf025c80..d676e90e 100644
--- a/frontend/src/types/desktopCommands.test.ts
+++ b/frontend/src/types/desktopCommands.test.ts
@@ -13,7 +13,7 @@ const commands: DesktopCommand[] = [
   {
     id: "hidden",
     title: "系统监控",
-    group: "管理后台",
+    group: "系统管理",
     visible: false,
     run: () => {},
   },
diff --git a/frontend/src/views/DesktopProjectEntry.test.ts b/frontend/src/views/DesktopProjectEntry.test.ts
index 1845bc4b..f639712a 100644
--- a/frontend/src/views/DesktopProjectEntry.test.ts
+++ b/frontend/src/views/DesktopProjectEntry.test.ts
@@ -5,20 +5,26 @@ import { resolve } from "node:path";
 const readEntryView = () => readFileSync(resolve(__dirname, "./DesktopProjectEntry.vue"), "utf8");
 
 describe("DesktopProjectEntry", () => {
-  it("offers admin backend and explicit project entry without direct in-project switching", () => {
+  it("offers system management access only to admins and authorized project PMs", () => {
     const source = readEntryView();
 
     expect(source).toContain("工作台总控");
     expect(source).toContain("选择目标项目");
     expect(source).toContain("Desktop Workbench");
     expect(source).toContain('class="entry-background-grid"');
-    expect(source).toContain("管理后台");
+    expect(source).toContain("系统管理");
     expect(source).toContain("ADMIN SYSTEM");
+    expect(source).toContain("SYSTEM MANAGEMENT");
+    expect(source).toContain("<strong>系统管理</strong>");
+    expect(source).toContain('v-if="canEnterManagement"');
+    expect(source).toContain('projects.value.some((project) => project.role_in_study === "PM")');
     expect(source).toContain("project-cards-grid");
     expect(source).toContain("card-action-bar");
     expect(source).toContain("进入项目工作空间");
-    expect(source).toContain('router.push("/admin/users")');
+    expect(source).toContain('router.push(isAdmin.value ? "/admin/users" : "/admin/projects")');
     expect(source).toContain("studyStore.clearCurrentStudy()");
+    expect(source).toContain("studyStore.setCurrentStudy(pmProject)");
+    expect(source).toContain("projects.value.find((project) => project.role_in_study === \"PM\")");
     expect(source).toContain("fetchStudies()");
     expect(source).toContain("studyStore.setCurrentStudy(project)");
     expect(source).toContain("studyStore.loadCurrentStudyPermissions()");
diff --git a/frontend/src/views/DesktopProjectEntry.vue b/frontend/src/views/DesktopProjectEntry.vue
index 8c8edbd9..0b2811a6 100644
--- a/frontend/src/views/DesktopProjectEntry.vue
+++ b/frontend/src/views/DesktopProjectEntry.vue
@@ -32,20 +32,22 @@
         </div>
       </div>
 
-      <!-- 管理后台控制卡片 - 常驻左侧底部 -->
-      <div v-if="isAdmin" class="sidebar-admin">
-        <button class="admin-action-card" type="button" @click="enterAdmin">
+      <!-- ADMIN / PM 可进入系统管理，其他角色仅可选择项目 -->
+      <div v-if="canEnterManagement" class="sidebar-admin">
+        <button class="admin-action-card" type="button" @click="enterManagement">
           <span class="admin-glow-layer" aria-hidden="true"></span>
           <div class="admin-card-head">
             <div class="admin-icon-box">
               <el-icon><Monitor /></el-icon>
             </div>
             <div class="admin-text-box">
-              <span class="admin-kicker">ADMIN SYSTEM</span>
-              <strong>管理后台</strong>
+              <span class="admin-kicker">{{ isAdmin ? "ADMIN SYSTEM" : "SYSTEM MANAGEMENT" }}</span>
+              <strong>系统管理</strong>
             </div>
           </div>
-          <p class="admin-desc">人员账号管理、项目授权、审计及系统配置</p>
+          <p class="admin-desc">
+            {{ isAdmin ? "人员账号管理、项目授权、审计及系统配置" : "查看并维护您负责项目的授权与范围配置" }}
+          </p>
           <div class="admin-foot">
             <span>进入控制台</span>
             <el-icon><ArrowRight /></el-icon>
@@ -170,13 +172,16 @@ const loading = ref(false);
 const loggingOut = ref(false);
 const isTransitioning = ref(false);
 const isAdmin = computed(() => isSystemAdmin(auth.user));
+const canEnterManagement = computed(() =>
+  isAdmin.value || projects.value.some((project) => project.role_in_study === "PM"),
+);
 
 const userDisplayName = computed(
   () => auth.user?.full_name || auth.user?.username || auth.user?.email || TEXT.common.labels.userFallback,
 );
 const userInitial = computed(() => userDisplayName.value.charAt(0).toUpperCase() || TEXT.common.labels.userInitialFallback);
 const entrySubtitle = computed(() =>
-  isAdmin.value ? "进入管理后台，或选择一个项目开始桌面工作。" : "请选择本次要进入的项目。",
+  canEnterManagement.value ? "进入系统管理，或选择一个项目开始桌面工作。" : "请选择本次要进入的项目。",
 );
 
 const statusLabel = (status: string | undefined) =>
@@ -194,12 +199,20 @@ const loadProjects = async () => {
   }
 };
 
-const enterAdmin = () => {
-  if (!isAdmin.value) return;
+const enterManagement = () => {
+  if (!canEnterManagement.value) return;
   isTransitioning.value = true;
-  window.setTimeout(() => {
-    studyStore.clearCurrentStudy();
-    router.push("/admin/users");
+  window.setTimeout(async () => {
+    if (isAdmin.value) {
+      studyStore.clearCurrentStudy();
+    } else {
+      const pmProject = projects.value.find((project) => project.role_in_study === "PM");
+      if (pmProject) {
+        studyStore.setCurrentStudy(pmProject);
+        await studyStore.loadCurrentStudyPermissions().catch(() => {});
+      }
+    }
+    await router.push(isAdmin.value ? "/admin/users" : "/admin/projects");
   }, 300);
 };
 
@@ -414,7 +427,7 @@ onMounted(() => {
   color: #ef4444;
 }
 
-/* 常驻管理后台卡片（精致浅色流光） */
+/* 常驻系统管理卡片（精致浅色流光） */
 .sidebar-admin {
   width: 100%;
 }
diff --git a/frontend/src/views/WebWorkbenchEntry.test.ts b/frontend/src/views/WebWorkbenchEntry.test.ts
index 9069190c..e58a702b 100644
--- a/frontend/src/views/WebWorkbenchEntry.test.ts
+++ b/frontend/src/views/WebWorkbenchEntry.test.ts
@@ -16,7 +16,13 @@ describe("WebWorkbenchEntry", () => {
     expect(source).toContain("项目内不直接切换项目");
     expect(source).toContain("项目工作区");
     expect(source).toContain("fetchStudies()");
+    expect(source).toContain('projects.value.some((project) => project.role_in_study === "PM")');
+    expect(source).toContain('v-if="canEnterManagement"');
+    expect(source).toContain('<strong>系统管理</strong>');
+    expect(source).toContain('const managementActionLabel = computed(() => canEnterManagement.value ? "进入系统管理" : "");');
     expect(source).toContain("studyStore.clearCurrentStudy()");
+    expect(source).toContain("studyStore.setCurrentStudy(pmProject)");
+    expect(source).toContain("projects.value.find((project) => project.role_in_study === \"PM\")");
     expect(source).toContain('router.push(isAdmin.value ? "/admin/users" : "/admin/projects")');
     expect(source).toContain("studyStore.setCurrentStudy(project)");
     expect(source).toContain("studyStore.loadCurrentStudyPermissions()");
diff --git a/frontend/src/views/WebWorkbenchEntry.vue b/frontend/src/views/WebWorkbenchEntry.vue
index 618128c3..a148f328 100644
--- a/frontend/src/views/WebWorkbenchEntry.vue
+++ b/frontend/src/views/WebWorkbenchEntry.vue
@@ -32,8 +32,8 @@
         </div>
       </div>
 
-      <!-- 管理后台/项目管理控制卡片 - 常驻左侧底部 -->
-      <div class="sidebar-admin">
+      <!-- ADMIN / PM 可进入系统管理，其他角色仅可选择项目 -->
+      <div v-if="canEnterManagement" class="sidebar-admin">
         <button class="admin-action-card" type="button" @click="enterManagement">
           <span class="admin-glow-layer" aria-hidden="true"></span>
           <div class="admin-card-head">
@@ -41,8 +41,8 @@
               <el-icon><Monitor /></el-icon>
             </div>
             <div class="admin-text-box">
-              <span class="admin-kicker">{{ isAdmin ? "ADMIN SYSTEM" : "STUDY PORTAL" }}</span>
-              <strong>{{ isAdmin ? "管理后台" : "项目管理" }}</strong>
+              <span class="admin-kicker">{{ isAdmin ? "ADMIN SYSTEM" : "SYSTEM MANAGEMENT" }}</span>
+              <strong>系统管理</strong>
             </div>
           </div>
           <p class="admin-desc">
@@ -206,18 +206,22 @@ const loading = ref(false);
 const loggingOut = ref(false);
 const isTransitioning = ref(false);
 const isAdmin = computed(() => isSystemAdmin(auth.user));
+const canEnterManagement = computed(() =>
+  isAdmin.value || projects.value.some((project) => project.role_in_study === "PM"),
+);
 
 const userDisplayName = computed(
   () => auth.user?.full_name || auth.user?.username || auth.user?.email || TEXT.common.labels.userFallback,
 );
 const userInitial = computed(() => userDisplayName.value.charAt(0).toUpperCase() || TEXT.common.labels.userInitialFallback);
 
-const entryDescription = computed(() =>
-  isAdmin.value
-    ? "进入管理后台处理账号、授权 and 系统配置，或选择项目进入项目工作区。"
-    : "选择本次要进入的项目，或进入项目管理查看您已授权的项目范围。",
-);
-const managementActionLabel = computed(() => isAdmin.value ? "进入管理后台" : "进入项目管理");
+const entryDescription = computed(() => {
+  if (!canEnterManagement.value) return "选择本次要进入的项目进入项目工作区。";
+  return isAdmin.value
+    ? "进入系统管理处理账号、授权及系统配置，或选择项目进入项目工作区。"
+    : "进入系统管理查看您已授权的项目范围，或选择项目进入项目工作区。";
+});
+const managementActionLabel = computed(() => canEnterManagement.value ? "进入系统管理" : "");
 
 const statusLabel = (status: string | undefined) =>
   status ? TEXT.enums.projectStatus[status as keyof typeof TEXT.enums.projectStatus] || status : "未知";
@@ -235,9 +239,18 @@ const loadProjects = async () => {
 };
 
 const enterManagement = async () => {
+  if (!canEnterManagement.value) return;
   isTransitioning.value = true;
   window.setTimeout(async () => {
-    studyStore.clearCurrentStudy();
+    if (isAdmin.value) {
+      studyStore.clearCurrentStudy();
+    } else {
+      const pmProject = projects.value.find((project) => project.role_in_study === "PM");
+      if (pmProject) {
+        studyStore.setCurrentStudy(pmProject);
+        await studyStore.loadCurrentStudyPermissions().catch(() => {});
+      }
+    }
     await router.push(isAdmin.value ? "/admin/users" : "/admin/projects").catch(() => {});
     isTransitioning.value = false;
   }, 300);
@@ -461,7 +474,7 @@ onMounted(() => {
   color: #ef4444;
 }
 
-/* 常驻管理后台卡片（精致浅色流光） */
+/* 常驻系统管理卡片（精致浅色流光） */
 .sidebar-admin {
   width: 100%;
 }
diff --git a/frontend/src/views/admin/AuditLogs.test.ts b/frontend/src/views/admin/AuditLogs.test.ts
index bc2f0b2e..6d76b57e 100644
--- a/frontend/src/views/admin/AuditLogs.test.ts
+++ b/frontend/src/views/admin/AuditLogs.test.ts
@@ -8,13 +8,21 @@ describe("audit logs access", () => {
   it("keeps the audit summary header compact", () => {
     const source = readAuditLogsView();
 
-    expect(source).toContain("padding: 10px 16px;");
-    expect(source).toContain("padding: 9px 12px;");
-    expect(source).toContain("width: 32px;");
-    expect(source).toContain("height: 32px;");
-    expect(source).toContain(".stat-icon svg { width: 18px; height: 18px; }");
-    expect(source).toContain(".stat-value { font-size: 20px;");
-    expect(source).toContain(".stat-label { font-size: 11px;");
+    expect(source).toContain('class="audit-overview"');
+    expect(source).toContain("min-height: 48px;");
+    expect(source).toContain("width: 30px;");
+    expect(source).toContain("height: 30px;");
+    expect(source).toContain(".stat-icon svg { width: 17px; height: 17px; }");
+    expect(source).toContain(".stat-value { font-size: 18px;");
+    expect(source).toContain(".stat-label { font-size: 10px;");
+    expect(source).toContain("content-wrapper:has(.audit-logs-page)");
+    expect(source).toContain(".table-section { padding: 0 !important; }");
+    expect(source).toContain("position: sticky;");
+    expect(source).toContain('class="filter-item-form project-filter-group"');
+    expect(source).toContain('class="project-export-button"');
+    expect(source).toContain('@click="confirmExport"');
+    expect(source).not.toContain('class="audit-export-btn"');
+    expect(source).not.toContain("handleExportCommand");
   });
 
   it("loads audit logs from the selected project context", () => {
@@ -67,16 +75,16 @@ describe("audit logs access", () => {
     expect(source).not.toContain("limit: 2000");
   });
 
-  it("surfaces request source, IP and location filters for audit troubleshooting", () => {
+  it("keeps the filter bar focused without request-source or IP-location inputs", () => {
     const source = readAuditLogsView();
 
-    expect(source).toContain("filters.clientType");
-    expect(source).toContain("filters.ipKeyword");
-    expect(source).toContain("TEXT.modules.adminAuditLogs.filterSource");
-    expect(source).toContain("TEXT.modules.adminAuditLogs.filterIpLocation");
-    expect(source).toContain("TEXT.modules.adminAuditLogs.columns.source");
-    expect(source).toContain("formatClientIpLine(scope.row)");
-    expect(source).toContain("client_ip: ipKeyword && isIpSearchToken(ipKeyword) ? ipKeyword : undefined");
+    expect(source).not.toContain("filters.clientType");
+    expect(source).not.toContain("filters.ipKeyword");
+    expect(source).not.toContain("TEXT.modules.adminAuditLogs.filterSource");
+    expect(source).not.toContain("TEXT.modules.adminAuditLogs.filterIpLocation");
+    expect(source).not.toContain("TEXT.modules.adminAuditLogs.columns.source");
+    expect(source).not.toContain("formatClientIpLine(scope.row)");
+    expect(source).not.toContain("isIpSearchToken");
   });
 
   it("includes request source context in audit exports", () => {
@@ -108,13 +116,16 @@ describe("audit logs access", () => {
     expect(source).not.toContain("getInitials(scope.row.actorName)");
   });
 
-  it("lets target and detail columns absorb remaining table width", () => {
+  it("allocates audit columns by typical content length", () => {
     const source = readAuditLogsView();
 
-    expect(source).toContain('<el-table-column :label="TEXT.modules.adminAuditLogs.columns.target" min-width="240">');
+    expect(source).toContain('prop="timestamp" :label="TEXT.modules.adminAuditLogs.columns.time" width="128"');
+    expect(source).toContain('prop="actorName" :label="TEXT.modules.adminAuditLogs.columns.actor" width="155"');
+    expect(source).toContain('prop="eventLabel" :label="TEXT.modules.adminAuditLogs.columns.event" width="170"');
+    expect(source).toContain('<el-table-column :label="TEXT.modules.adminAuditLogs.columns.target" width="280">');
     expect(source).toContain('<el-table-column :label="TEXT.modules.adminAuditLogs.columns.diff" min-width="360">');
-    expect(source).not.toContain(':label="TEXT.modules.adminAuditLogs.columns.target" width="240"');
-    expect(source).not.toContain(':label="TEXT.modules.adminAuditLogs.columns.diff" width="360"');
+    expect(source).toContain('width="72" align="center" class-name="result-column"');
+    expect(source).toContain("white-space: nowrap;");
   });
 
   it("parses diff lines by the last field separator before the arrow", () => {
@@ -133,6 +144,18 @@ describe("audit logs access", () => {
     expect(source).not.toContain("meta-card-full");
   });
 
+  it("keeps the audit detail focused on business changes instead of technical request context", () => {
+    const source = readAuditLogsView();
+
+    expect(source).not.toContain('<span class="meta-label">请求来源</span>');
+    expect(source).not.toContain('<span class="meta-label">来源 IP</span>');
+    expect(source).not.toContain('<span class="meta-label">IP 位置</span>');
+    expect(source).not.toContain('<span class="meta-label">客户端</span>');
+    expect(source).not.toContain("访问上下文");
+    expect(source).not.toContain("formatClientMeta");
+    expect(source).not.toContain("formatBuildMeta");
+  });
+
   it("groups setup diff detail rows by business item path", () => {
     const source = readAuditLogsView();
 
diff --git a/frontend/src/views/admin/AuditLogs.vue b/frontend/src/views/admin/AuditLogs.vue
index 8f15373a..024db6ad 100644
--- a/frontend/src/views/admin/AuditLogs.vue
+++ b/frontend/src/views/admin/AuditLogs.vue
@@ -1,8 +1,13 @@
 <template>
-  <div class="page page--flush">
+  <div class="page page--flush audit-logs-page">
     <div class="main-content-flat unified-shell">
       <!-- 统计概览 -->
-      <div class="stats-row">
+      <section class="audit-overview" aria-labelledby="audit-overview-title">
+        <div class="overview-heading">
+          <h2 id="audit-overview-title">审计概览</h2>
+          <span class="overview-status"><i></i>日志汇总</span>
+        </div>
+        <div class="stats-row">
         <div class="stat-card stat-card--total">
           <div class="stat-icon">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><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"/></svg>
@@ -39,15 +44,30 @@
             <span class="stat-label">来源 IP</span>
           </div>
         </div>
-      </div>
+        </div>
+      </section>
 
       <!-- 筛选栏 -->
       <div class="audit-toolbar unified-action-bar">
         <el-form :inline="true" :model="filters" class="filter-form">
-          <div class="filter-item-form">
+          <div class="filter-heading">
+            <el-icon><Filter /></el-icon>
+            <span>筛选</span>
+          </div>
+          <div class="filter-item-form project-filter-group">
             <el-select v-model="selectedStudyId" filterable :placeholder="TEXT.common.fields.projectName" @change="onProjectChange" class="filter-select-project">
               <el-option v-for="project in studies" :key="project.id" :label="project.name" :value="project.id" />
             </el-select>
+            <el-tooltip content="导出当前项目日志" placement="top">
+              <el-button
+                v-if="canProjectExport"
+                :icon="Download"
+                class="project-export-button"
+                :loading="exportLoading"
+                aria-label="导出当前项目日志"
+                @click="confirmExport"
+              />
+            </el-tooltip>
           </div>
           <div class="filter-item-form">
             <el-select v-model="filters.eventType" clearable :placeholder="TEXT.modules.adminAuditLogs.filterEvent" @change="onServerFilterChange" class="filter-select-comp">
@@ -59,22 +79,6 @@
               <el-option v-for="u in userOptions" :key="u.value" :label="u.label" :value="u.value" />
             </el-select>
           </div>
-          <div class="filter-item-form">
-            <el-select v-model="filters.clientType" clearable :placeholder="TEXT.modules.adminAuditLogs.filterSource" @change="onServerFilterChange" class="filter-select-source">
-              <el-option v-for="opt in sourceTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
-            </el-select>
-          </div>
-          <div class="filter-item-form">
-            <el-input
-              v-model="filters.ipKeyword"
-              clearable
-              :placeholder="TEXT.modules.adminAuditLogs.filterIpLocation"
-              class="filter-input-ip"
-              @input="onLocalFilterChange"
-              @clear="onServerFilterChange"
-              @change="onServerFilterChange"
-            />
-          </div>
           <div class="filter-item-form">
             <el-select v-model="filters.result" clearable :placeholder="TEXT.modules.adminAuditLogs.filterResult" @change="onLocalFilterChange" class="filter-select-result">
               <el-option :label="TEXT.audit.resultSuccess" value="SUCCESS" />
@@ -94,30 +98,19 @@
               @change="onLocalFilterChange"
             />
           </div>
-          <div class="filter-spacer"></div>
-          <el-dropdown trigger="click" @command="handleExportCommand" class="audit-export-dropdown">
-            <el-button plain class="audit-export-btn" :loading="exportLoading">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="margin-right:4px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
-              导出 <el-icon class="el-icon--right"><ArrowDown /></el-icon>
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item v-if="canProjectExport" command="project">{{ TEXT.modules.adminAuditLogs.exportProject }}</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+          <el-button v-if="hasActiveFilters" text :icon="RefreshLeft" class="reset-filter-button" @click="resetFilters">重置</el-button>
         </el-form>
       </div>
 
       <!-- 日志表格 -->
       <div class="unified-section table-section">
         <el-table :data="logs" v-loading="loading" class="audit-table" style="width: 100%" table-layout="fixed">
-          <el-table-column prop="timestamp" :label="TEXT.modules.adminAuditLogs.columns.time" width="150">
+          <el-table-column prop="timestamp" :label="TEXT.modules.adminAuditLogs.columns.time" width="128">
             <template #default="scope">
               <span class="time-text">{{ displayDateTime(scope.row.timestamp) }}</span>
             </template>
           </el-table-column>
-          <el-table-column prop="actorName" :label="TEXT.modules.adminAuditLogs.columns.actor" width="120">
+          <el-table-column prop="actorName" :label="TEXT.modules.adminAuditLogs.columns.actor" width="155">
             <template #default="scope">
               <div class="actor-cell">
                 <span class="actor-name">{{ scope.row.actorName }}</span>
@@ -125,21 +118,12 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.modules.adminAuditLogs.columns.source" width="230">
-            <template #default="scope">
-              <div class="source-cell">
-                <span class="source-main">{{ scope.row.clientSourceLabel }}</span>
-                <span class="source-meta">{{ formatClientMeta(scope.row) }}</span>
-                <span class="source-ip">{{ formatClientIpLine(scope.row) }}</span>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="eventLabel" :label="TEXT.modules.adminAuditLogs.columns.event" width="145">
+          <el-table-column prop="eventLabel" :label="TEXT.modules.adminAuditLogs.columns.event" width="170">
             <template #default="scope">
               <span class="event-tag">{{ scope.row.eventLabel }}</span>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.modules.adminAuditLogs.columns.target" min-width="240">
+          <el-table-column :label="TEXT.modules.adminAuditLogs.columns.target" width="280">
             <template #default="scope">
               <div class="target-cell">
                 <span v-if="scope.row.targetTypeLabel" class="target-text">
@@ -161,7 +145,7 @@
               <span v-else class="text-muted">{{ TEXT.audit.emptyValue }}</span>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.modules.adminAuditLogs.columns.result" width="76" align="center">
+          <el-table-column :label="TEXT.modules.adminAuditLogs.columns.result" width="72" align="center" class-name="result-column">
             <template #default="scope">
               <span class="result-badge" :class="scope.row.result === 'SUCCESS' ? 'result--success' : 'result--fail'">
                 {{ scope.row.resultLabel }}
@@ -237,35 +221,6 @@
             <span class="meta-value">{{ selectedLog.actionText || TEXT.common.fallback }}</span>
           </div>
         </div>
-        <div class="detail-meta-grid">
-          <div class="meta-card">
-            <span class="meta-label">请求来源</span>
-            <span class="meta-value">{{ selectedLog.clientSourceLabel || TEXT.common.fallback }}</span>
-          </div>
-          <div class="meta-card">
-            <span class="meta-label">来源 IP</span>
-            <span class="meta-value">{{ selectedLog.clientIp || "未知 IP" }}</span>
-          </div>
-          <div class="meta-card">
-            <span class="meta-label">IP 位置</span>
-            <span class="meta-value">{{ selectedLog.ipLocation || TEXT.common.fallback }}</span>
-          </div>
-          <div class="meta-card">
-            <span class="meta-label">客户端</span>
-            <span class="meta-value">{{ formatClientMeta(selectedLog) }}</span>
-          </div>
-        </div>
-        <div class="detail-section">
-          <div class="detail-section-title">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 0 20"/><path d="M12 2a15.3 15.3 0 0 0 0 20"/></svg>
-            访问上下文
-          </div>
-          <div class="context-lines">
-            <div><span>User-Agent</span><code>{{ selectedLog.userAgent || TEXT.common.fallback }}</code></div>
-            <div><span>构建信息</span><code>{{ formatBuildMeta(selectedLog) }}</code></div>
-          </div>
-        </div>
-
         <!-- 变更明细 -->
         <div class="detail-section">
           <div class="detail-section-title">
@@ -310,7 +265,7 @@
 import { computed, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { ArrowDown } from "@element-plus/icons-vue";
+import { Download, Filter, RefreshLeft } from "@element-plus/icons-vue";
 import { createAuditEvent, fetchAuditLogs } from "../../api/auditLogs";
 import { fetchStudies } from "../../api/studies";
 import { fetchApiEndpointPermissions } from "../../api/projectPermissions";
@@ -349,8 +304,6 @@ const DIFF_PREVIEW_LIMIT = 2;
 const filters = ref({
   eventType: "",
   operatorId: "",
-  clientType: "",
-  ipKeyword: "",
   result: "",
   range: [],
 });
@@ -358,6 +311,12 @@ const filters = ref({
 const successCount = computed(() => allLogs.value.filter(l => (l.result || 'SUCCESS') === 'SUCCESS').length);
 const failCount = computed(() => allLogs.value.filter(l => l.result === 'FAIL').length);
 const uniqueIpCount = computed(() => new Set(allLogs.value.map(l => l.clientIp || "未知 IP")).size);
+const hasActiveFilters = computed(() => Boolean(
+  filters.value.eventType ||
+  filters.value.operatorId ||
+  filters.value.result ||
+  filters.value.range?.length
+));
 
 const formatDiffLine = (line: any): string => {
   if (typeof line === 'string') return line;
@@ -430,11 +389,6 @@ const eventTypeOptions = Object.entries(auditDict).map(([value, cfg]) => ({
   value,
   label: cfg.label,
 }));
-const sourceTypeOptions = [
-  { value: "web", label: "网页端" },
-  { value: "desktop", label: "桌面端" },
-  { value: "unknown", label: "未知/异常" },
-];
 const resolveUserDisplayName = (u: any): string => {
   return u?.full_name || u?.display_name || u?.username || u?.email || u?.id || TEXT.common.fallback;
 };
@@ -530,34 +484,13 @@ const fetchAuditLogPages = async (baseParams: Record<string, any> = {}) => {
   return allItems;
 };
 
-const isIpSearchToken = (value: string) => /^[0-9a-f:.]+$/i.test(value.trim());
-
 const buildAuditServerParams = () => {
-  const ipKeyword = String(filters.value.ipKeyword || "").trim();
   return {
     action: filters.value.eventType || undefined,
     operator_id: filters.value.operatorId || undefined,
-    client_type: filters.value.clientType || undefined,
-    client_ip: ipKeyword && isIpSearchToken(ipKeyword) ? ipKeyword : undefined,
   };
 };
 
-const formatClientMeta = (log: any) => {
-  const meta = [log.clientType, log.clientVersion, log.clientPlatform].filter(Boolean).join("/");
-  if (meta) return meta;
-  return log.userAgent ? "未标识客户端" : TEXT.common.fallback;
-};
-
-const formatBuildMeta = (log: any) => {
-  const meta = [log.buildChannel, log.buildCommit].filter(Boolean).join("/");
-  return meta || TEXT.common.fallback;
-};
-
-const formatClientIpLine = (log: any) => {
-  const parts = [log.clientIp || "未知 IP", log.ipLocation].filter(Boolean);
-  return parts.join(" / ");
-};
-
 const loadLogs = async () => {
   if (!selectedStudyId.value) return;
   loading.value = true;
@@ -595,24 +528,6 @@ const enrichLogs = (items: any[]) => {
 const filterLogs = (items: any[]) =>
   items.filter((log) => {
     if (filters.value.result && (log.result || "SUCCESS") !== filters.value.result) return false;
-    const ipKeyword = String(filters.value.ipKeyword || "").trim().toLowerCase();
-    if (ipKeyword) {
-      const haystack = [
-        log.clientIp,
-        log.ipLocation,
-        log.ipCountry,
-        log.ipProvince,
-        log.ipCity,
-        log.ipIsp,
-        log.clientSourceLabel,
-        log.clientType,
-        log.clientPlatform,
-        log.userAgent,
-        log.actorName,
-        log.actorAccount,
-      ];
-      if (!haystack.some((value) => String(value || "").toLowerCase().includes(ipKeyword))) return false;
-    }
     if (filters.value.range?.length === 2) {
       const ts = new Date(log.timestamp);
       const start = new Date(filters.value.range[0]);
@@ -641,6 +556,14 @@ const onLocalFilterChange = () => {
   refreshPagedLogs();
 };
 
+const resetFilters = () => {
+  filters.value.eventType = "";
+  filters.value.operatorId = "";
+  filters.value.result = "";
+  filters.value.range = [];
+  onServerFilterChange();
+};
+
 const onProjectChange = async () => {
   permissionMatrix.value = null;
   users.value = [];
@@ -697,10 +620,6 @@ const fetchAllForExport = async () => {
   }
 };
 
-const handleExportCommand = (command: string) => {
-  if (command === "project") confirmExport();
-};
-
 const confirmExport = async () => {
   const currentStudy = selectedStudy.value;
   if (!currentStudy) return;
@@ -736,33 +655,77 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+:global(.web-layout-container .content-wrapper:has(.audit-logs-page)) {
+  padding: 0;
+}
+
 /* 统计卡片 */
+.audit-overview {
+  padding: 0;
+  border-bottom: 1px solid var(--unified-shell-divider);
+  background: linear-gradient(180deg, var(--ctms-bg-card) 0%, color-mix(in srgb, var(--ctms-neutral-100) 55%, var(--ctms-bg-card)) 100%);
+}
+
+.overview-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 38px;
+  padding: 6px 16px;
+}
+
+.overview-heading h2 {
+  margin: 0;
+  color: var(--ctms-text-main);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.overview-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  border: 1px solid rgba(63, 143, 107, 0.18);
+  border-radius: 999px;
+  background: rgba(63, 143, 107, 0.07);
+  color: var(--ctms-success);
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.overview-status i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
 .stats-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 10px;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--unified-shell-divider);
+  gap: 0;
+  border-top: 1px solid var(--unified-shell-divider);
+  background: var(--ctms-bg-card);
 }
 
 .stat-card {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 9px 12px;
-  border-radius: 10px;
-  background: var(--ctms-neutral-100);
-  transition: var(--ctms-transition);
+  min-height: 48px;
+  padding: 6px 14px;
+  background: transparent;
 }
 
-.stat-card:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--ctms-shadow-sm);
+.stat-card + .stat-card {
+  border-left: 1px solid var(--unified-shell-divider);
 }
 
 .stat-icon {
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   border-radius: 8px;
   display: flex;
   align-items: center;
@@ -770,19 +733,27 @@ onMounted(async () => {
   flex-shrink: 0;
 }
 
-.stat-icon svg { width: 18px; height: 18px; }
+.stat-icon svg { width: 17px; height: 17px; }
 .stat-card--total .stat-icon { background: #e8edf3; color: var(--ctms-primary); }
 .stat-card--success .stat-icon { background: #e6f4ed; color: var(--ctms-success); }
 .stat-card--fail .stat-icon { background: #fde8e8; color: var(--ctms-danger); }
 .stat-card--operators .stat-icon { background: #eef2f6; color: var(--ctms-info); }
 
 .stat-body { display: flex; flex-direction: column; }
-.stat-value { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--ctms-text-main); }
-.stat-label { font-size: 11px; color: var(--ctms-text-secondary); margin-top: 2px; }
+.stat-value { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--ctms-text-main); }
+.stat-label { font-size: 10px; color: var(--ctms-text-secondary); margin-top: 2px; }
 
 /* 筛选栏 */
 .audit-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 8;
   border-bottom: 1px solid var(--unified-shell-divider);
+  background: color-mix(in srgb, var(--ctms-bg-card) 95%, transparent);
+  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.05);
+  backdrop-filter: blur(12px);
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 
 .filter-form {
@@ -799,31 +770,65 @@ onMounted(async () => {
   flex-shrink: 0;
 }
 
+.project-filter-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+}
+
+.filter-select-project :deep(.el-select__wrapper) {
+  border-radius: 8px 0 0 8px;
+}
+
+.project-export-button {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  min-height: 32px;
+  padding: 0;
+  margin-left: -1px;
+  border-radius: 0 8px 8px 0;
+  color: var(--ctms-primary);
+  border-color: color-mix(in srgb, var(--ctms-primary) 24%, var(--ctms-border-color));
+  background: color-mix(in srgb, var(--ctms-primary) 7%, var(--ctms-bg-card));
+}
+
+.filter-heading {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--ctms-text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.filter-form :deep(.el-input__inner),
+.filter-form :deep(.el-select__placeholder),
+.filter-form :deep(.el-select__selected-item),
+.filter-form :deep(.el-range-input),
+.filter-form :deep(.el-button) {
+  font-size: 12px;
+}
+
+.filter-form :deep(.el-select__wrapper),
+.filter-form :deep(.el-input__wrapper),
+.filter-form :deep(.el-date-editor) {
+  min-height: 32px;
+  box-shadow: 0 0 0 1px var(--ctms-border-color) inset;
+}
+
+.reset-filter-button {
+  color: var(--ctms-text-secondary);
+}
+
 .filter-select-comp { width: 132px; }
 .filter-select-project { width: 180px; }
-.filter-select-source { width: 112px; }
-.filter-input-ip { width: 170px; }
 .filter-select-result { width: 96px; }
 .date-range-picker-comp { width: 248px !important; }
-.filter-spacer { flex: 1; min-width: 16px; }
-
-.audit-export-dropdown { flex-shrink: 0; }
-.audit-export-btn {
-  border-radius: 8px !important;
-  font-weight: 600;
-  height: 32px;
-  color: var(--ctms-primary) !important;
-  border-color: #c0cdd7 !important;
-  background: #f0f6ff !important;
-}
-.audit-export-btn:hover {
-  color: var(--ctms-primary-hover) !important;
-  border-color: #9bb1c2 !important;
-  background: #e2edfa !important;
-}
 
 /* 表格 */
-.table-section { padding: 0; }
+.table-section { padding: 0 !important; }
 .audit-table :deep(.el-table__inner-wrapper::before) { display: none; }
 .audit-table :deep(.el-table__cell) {
   padding: 8px 0;
@@ -862,38 +867,6 @@ onMounted(async () => {
   color: var(--ctms-text-secondary);
 }
 
-.source-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.source-main {
-  display: inline-flex;
-  align-self: flex-start;
-  max-width: 100%;
-  padding: 1px 7px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 700;
-  color: #155e75;
-  background: #ecfeff;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.source-meta,
-.source-ip {
-  display: block;
-  font-size: 11px;
-  color: var(--ctms-text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .event-tag {
   display: inline-flex;
   padding: 2px 8px;
@@ -942,6 +915,12 @@ onMounted(async () => {
   border-radius: 6px;
   font-size: 12px;
   font-weight: 600;
+  white-space: nowrap;
+}
+
+.audit-table :deep(.result-column .cell) {
+  padding-right: 4px;
+  padding-left: 4px;
 }
 
 .result--success { background: #e6f4ed; color: #166534; }
@@ -1058,35 +1037,6 @@ onMounted(async () => {
   color: var(--ctms-primary);
 }
 
-.context-lines {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.context-lines div {
-  display: grid;
-  grid-template-columns: 92px minmax(0, 1fr);
-  gap: 10px;
-  align-items: start;
-}
-
-.context-lines span {
-  color: var(--ctms-text-secondary);
-  font-size: 12px;
-}
-
-.context-lines code {
-  display: block;
-  padding: 8px 10px;
-  border-radius: 8px;
-  border: 1px solid var(--ctms-border-color);
-  background: var(--ctms-neutral-100);
-  color: var(--ctms-text-main);
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
 .diff-count {
   font-size: 11px;
   font-weight: 600;
@@ -1221,6 +1171,9 @@ onMounted(async () => {
 @media (max-width: 768px) {
   .stats-row { grid-template-columns: repeat(2, 1fr); }
   .filter-form { flex-wrap: wrap; }
+  .stat-card:nth-child(3) { border-left: 0; }
+  .stat-card:nth-child(n + 3) { border-top: 1px solid var(--unified-shell-divider); }
+  .filter-heading { width: 100%; }
   .diff-item-row { grid-template-columns: 1fr; gap: 4px; }
 }
 </style>
diff --git a/frontend/src/views/admin/EmailSettings.vue b/frontend/src/views/admin/EmailSettings.vue
index 86024254..c3ab3acd 100644
--- a/frontend/src/views/admin/EmailSettings.vue
+++ b/frontend/src/views/admin/EmailSettings.vue
@@ -12,13 +12,8 @@
         </div>
         <div class="es-header__text">
           <h1 class="es-header__title">
-            {{ selectedDomain ? `@${selectedDomain}` : '邮件服务' }}
+            {{ selectedDomain ? `@${selectedDomain}` : '注册邮件服务' }}
           </h1>
-          <p class="es-header__subtitle">
-            {{ selectedDomain
-              ? `配置 @${selectedDomain} 注册验证码邮件服务`
-              : '按邮箱后缀管理注册验证码邮件服务' }}
-          </p>
         </div>
       </div>
       <!-- 操作按钮 -->
@@ -36,7 +31,7 @@
             <polyline points="7 3 7 8 15 8" />
           </svg>
           <span class="es-btn__spinner" v-if="saving" />
-          {{ saving ? '保存中…' : '保存配置' }}
+          {{ saving ? '保存中…' : '保存更改' }}
         </button>
       </div>
     </div>
@@ -46,29 +41,44 @@
       <div class="es-list-panel">
         <!-- 新增后缀输入区 -->
         <div class="es-add-bar">
-          <div class="es-add-bar__label">新增邮箱后缀</div>
+          <div class="es-add-bar__intro">
+            <div class="es-add-bar__icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                <circle cx="12" cy="12" r="9" />
+                <path d="M12 8v8M8 12h8" />
+              </svg>
+            </div>
+            <div>
+              <div class="es-add-bar__label">添加注册邮箱域</div>
+            </div>
+          </div>
           <div class="es-add-bar__row">
             <div class="es-input-wrap">
               <span class="es-input-prefix">@</span>
               <el-input
                 v-model="domainInput"
-                placeholder="例如 qq.com"
+                placeholder="例如 example.com"
+                aria-label="注册邮箱域"
                 class="es-domain-input"
                 @keyup.enter="addDomain"
               />
             </div>
-            <button type="button" class="es-btn es-btn--primary" @click="addDomain">
+            <button type="button" class="es-btn es-btn--primary es-add-bar__submit" :disabled="!domainInput.trim()" @click="addDomain">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
                 <line x1="12" y1="5" x2="12" y2="19" />
                 <line x1="5" y1="12" x2="19" y2="12" />
               </svg>
-              新增后缀
+              添加
             </button>
           </div>
         </div>
 
         <!-- 域名列表 -->
         <div class="es-domain-list">
+          <div class="es-domain-list__header">
+            <h2 class="es-domain-list__title">邮箱域配置</h2>
+            <span class="es-domain-list__count">共 {{ domainRows.length }} 项</span>
+          </div>
           <transition-group name="es-item" tag="div" class="es-domain-list__inner">
             <div
               v-for="row in domainRows"
@@ -85,22 +95,22 @@
                 </div>
                 <div class="es-domain-card__info">
                   <span class="es-domain-card__name">@{{ row.domain }}</span>
-                  <span class="es-domain-card__meta">{{ row.smtp_host || '未配置 SMTP 地址' }}</span>
+                  <span class="es-domain-card__meta">{{ row.smtp_host || 'SMTP 服务器未配置' }}</span>
                 </div>
               </div>
 
               <!-- 中间：配置摘要 -->
               <div class="es-domain-card__meta-row">
                 <div class="es-meta-item">
-                  <span class="es-meta-item__label">发件邮箱</span>
+                  <span class="es-meta-item__label">发件地址</span>
                   <span class="es-meta-item__value">{{ row.sender_email || '—' }}</span>
                 </div>
                 <div class="es-meta-item">
-                  <span class="es-meta-item__label">安全协议</span>
+                  <span class="es-meta-item__label">传输加密</span>
                   <span class="es-meta-item__value">{{ row.smtp_security }}</span>
                 </div>
                 <div class="es-meta-item">
-                  <span class="es-meta-item__label">端口</span>
+                  <span class="es-meta-item__label">服务端口</span>
                   <span class="es-meta-item__value">{{ row.smtp_port }}</span>
                 </div>
               </div>
@@ -109,12 +119,12 @@
               <div class="es-domain-card__right">
                 <span :class="['es-status-badge', isRowConfigured(row) ? 'es-status-badge--ok' : 'es-status-badge--warn']">
                   <span class="es-status-badge__dot" />
-                  {{ isRowConfigured(row) ? '已配置' : '待配置' }}
+                  {{ isRowConfigured(row) ? '已启用' : '未启用' }}
                 </span>
                 <div class="es-domain-card__actions">
                   <button type="button" class="es-action-btn es-action-btn--primary" @click="openDetail(row.domain)">
-                    配置详情
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    配置
+                    <svg class="es-action-btn__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                       <polyline points="9 18 15 12 9 6" />
                     </svg>
                   </button>
@@ -129,7 +139,7 @@
                       <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
                       <path d="M10 11v6M14 11v6" />
                     </svg>
-                    删除
+                    移除
                   </button>
                 </div>
               </div>
@@ -144,8 +154,7 @@
                 <polyline points="2,4 12,13 22,4" />
               </svg>
             </div>
-            <p class="es-empty__text">暂无邮箱后缀</p>
-            <p class="es-empty__hint">在上方输入框新增邮箱后缀以开始配置</p>
+            <p class="es-empty__text">暂无注册邮箱域</p>
           </div>
         </div>
       </div>
@@ -170,13 +179,12 @@
                   </svg>
                 </div>
                 <div>
-                  <h3 class="es-detail-card__title">SMTP 服务器</h3>
-                  <p class="es-detail-card__desc">配置邮件发送服务器连接参数</p>
+                  <h3 class="es-detail-card__title">SMTP 连接</h3>
                 </div>
               </div>
               <div class="es-detail-card__body">
                 <div class="es-form-row es-form-row--2col">
-                  <el-form-item label="SMTP 地址" prop="smtp_host" class="es-form-item">
+                  <el-form-item label="SMTP 服务器" prop="smtp_host" class="es-form-item">
                     <el-input v-model="form.smtp_host" />
                   </el-form-item>
                   <el-form-item label="SMTP 端口" prop="smtp_port" class="es-form-item">
@@ -204,15 +212,14 @@
                       />
                       <span class="es-security-opt__icon" v-html="opt.icon" />
                       <span class="es-security-opt__label">{{ opt.label }}</span>
-                      <span class="es-security-opt__desc">{{ opt.desc }}</span>
                     </label>
                   </div>
                 </el-form-item>
                 <div class="es-form-row es-form-row--2col">
-                  <el-form-item label="SMTP 账号" prop="smtp_username" class="es-form-item">
+                  <el-form-item label="登录账号" prop="smtp_username" class="es-form-item">
                     <el-input v-model="form.smtp_username" />
                   </el-form-item>
-                  <el-form-item label="SMTP 授权码" prop="smtp_password" class="es-form-item">
+                  <el-form-item label="认证凭据" prop="smtp_password" class="es-form-item">
                     <el-input
                       v-model="form.smtp_password"
                       type="password"
@@ -235,13 +242,12 @@
                   </svg>
                 </div>
                 <div>
-                  <h3 class="es-detail-card__title">发件人设置</h3>
-                  <p class="es-detail-card__desc">配置邮件显示的发件人信息</p>
+                  <h3 class="es-detail-card__title">发件人信息</h3>
                 </div>
               </div>
               <div class="es-detail-card__body">
                 <div class="es-form-row es-form-row--2col">
-                  <el-form-item label="发件邮箱" prop="sender_email" class="es-form-item">
+                    <el-form-item label="发件地址" prop="sender_email" class="es-form-item">
                     <el-input v-model="form.sender_email" />
                   </el-form-item>
                   <el-form-item label="发件人名称" prop="sender_name" class="es-form-item">
@@ -262,41 +268,36 @@
               </div>
               <div :class="['es-status-card__badge', isConfigured ? 'es-status-card__badge--ok' : 'es-status-card__badge--warn']">
                 <span class="es-status-badge__dot" />
-                {{ isConfigured ? '配置完整' : '待完善' }}
+                {{ isConfigured ? '服务已启用' : '配置未完成' }}
               </div>
-              <p class="es-status-card__hint">
-                {{ isConfigured
-                  ? '该后缀可正常接收验证码邮件'
-                  : '请填写 SMTP 信息并完成授权码配置' }}
-              </p>
               <div class="es-status-card__checklist">
                 <div :class="['es-check-item', form.smtp_host ? 'es-check-item--ok' : '']">
                   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
                     <polyline v-if="form.smtp_host" points="3 8 6.5 11.5 13 5" />
                     <circle v-else cx="8" cy="8" r="6" stroke-width="1.5" />
                   </svg>
-                  SMTP 地址
+                  SMTP 服务器
                 </div>
                 <div :class="['es-check-item', form.smtp_username ? 'es-check-item--ok' : '']">
                   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
                     <polyline v-if="form.smtp_username" points="3 8 6.5 11.5 13 5" />
                     <circle v-else cx="8" cy="8" r="6" stroke-width="1.5" />
                   </svg>
-                  SMTP 账号
+                  登录账号
                 </div>
                 <div :class="['es-check-item', passwordConfigured ? 'es-check-item--ok' : '']">
                   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
                     <polyline v-if="passwordConfigured" points="3 8 6.5 11.5 13 5" />
                     <circle v-else cx="8" cy="8" r="6" stroke-width="1.5" />
                   </svg>
-                  SMTP 授权码
+                  认证凭据
                 </div>
                 <div :class="['es-check-item', form.sender_email ? 'es-check-item--ok' : '']">
                   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
                     <polyline v-if="form.sender_email" points="3 8 6.5 11.5 13 5" />
                     <circle v-else cx="8" cy="8" r="6" stroke-width="1.5" />
                   </svg>
-                  发件邮箱
+                  发件地址
                 </div>
               </div>
             </div>
@@ -310,8 +311,7 @@
                   </svg>
                 </div>
                 <div>
-                  <h3 class="es-detail-card__title">安全策略</h3>
-                  <p class="es-detail-card__desc">验证码生命周期与频率限制</p>
+                  <h3 class="es-detail-card__title">验证码策略</h3>
                 </div>
               </div>
               <div class="es-detail-card__body">
@@ -354,8 +354,7 @@
                   </svg>
                 </div>
                 <div>
-                  <h3 class="es-detail-card__title">测试发送</h3>
-                  <p class="es-detail-card__desc">向指定邮箱发送测试验证码</p>
+                  <h3 class="es-detail-card__title">发送测试</h3>
                 </div>
               </div>
               <div class="es-detail-card__body">
@@ -431,19 +430,16 @@ const securityOptions = [
   {
     value: "SSL",
     label: "SSL",
-    desc: "端口 465，推荐",
     icon: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M10 2L4 5v5c0 3.9 2.6 7.5 6 8.6C14.4 17.5 17 13.9 17 10V5l-7-3z"/></svg>`,
   },
   {
     value: "STARTTLS",
     label: "STARTTLS",
-    desc: "端口 587，升级加密",
     icon: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="10" cy="10" r="7"/><path d="M10 6v4l2 2"/></svg>`,
   },
   {
     value: "NONE",
     label: "无加密",
-    desc: "端口 25，不推荐",
     icon: `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="10" cy="10" r="7"/><line x1="7" y1="7" x2="13" y2="13"/><line x1="13" y1="7" x2="7" y2="13"/></svg>`,
   },
 ];
@@ -454,12 +450,12 @@ const isConfigured = computed(() =>
   Boolean(form.smtp_host && form.smtp_username && form.sender_email && passwordConfigured.value)
 );
 const passwordPlaceholder = computed(() =>
-  passwordConfigured.value ? "已配置，留空则不修改" : "请输入 SMTP 授权码"
+  passwordConfigured.value ? "已配置；留空则保持不变" : "请输入认证凭据"
 );
 
 /* ─── 表单校验 ─── */
 const rules: FormRules = {
-  smtp_port: [{ required: true, message: "请输入 SMTP 端口", trigger: "change" }],
+  smtp_port: [{ required: true, message: "请输入服务端口", trigger: "change" }],
   sender_email: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }],
 };
 
@@ -525,9 +521,9 @@ const addDomain = async () => {
       const { data } = await createEmailSettingsDomain(domain);
       settingsRows.value.push(data);
       settingsRows.value.sort((a, b) => a.register_domain.localeCompare(b.register_domain));
-      ElMessage.success("邮箱后缀已新增");
+      ElMessage.success("注册邮箱域已添加");
     } catch (error: any) {
-      ElMessage.error(error?.response?.data?.detail || error?.response?.data?.message || "新增失败");
+      ElMessage.error(error?.response?.data?.detail || error?.response?.data?.message || "添加失败");
     }
   }
   domainInput.value = "";
@@ -535,13 +531,13 @@ const addDomain = async () => {
 
 const removeDomain = async (domain: string) => {
   if (settingsRows.value.length <= 1) return;
-  await ElMessageBox.confirm(`确认删除 @${domain}？`, "删除邮箱后缀", { type: "warning" });
+  await ElMessageBox.confirm(`确认移除 @${domain}？`, "移除注册邮箱域", { type: "warning" });
   try {
     await deleteEmailSettingsDomain(domain);
     settingsRows.value = settingsRows.value.filter(item => item.register_domain !== domain);
-    ElMessage.success("邮箱后缀已删除");
+    ElMessage.success("注册邮箱域已移除");
   } catch (error: any) {
-    ElMessage.error(error?.response?.data?.detail || error?.response?.data?.message || "删除失败");
+    ElMessage.error(error?.response?.data?.detail || error?.response?.data?.message || "移除失败");
   }
 };
 
@@ -576,7 +572,7 @@ const saveSettings = async () => {
     passwordConfigured.value = data.smtp_password_configured;
     form.smtp_password = "";
     savedSnapshot.value = buildSavedComparable(data);
-    ElMessage.success("邮件服务配置已保存");
+    ElMessage.success("邮件服务配置已更新");
   } catch (error: any) {
     ElMessage.error(error?.response?.data?.detail || error?.response?.data?.message || "保存失败");
   } finally {
@@ -621,10 +617,22 @@ onMounted(loadSettings);
    ═══════════════════════════════════════════════ */
 
 .es-page {
+  --es-brand-50: #f1f7fa;
+  --es-brand-100: #e1edf3;
+  --es-brand-200: #c7dce7;
+  --es-brand-500: #3b718d;
+  --es-brand-600: #2c5f7b;
+  --es-brand-700: #204b65;
+  --es-brand-800: #173b52;
+  --es-ink: #172b3a;
+  --es-muted: #687d8d;
+  --es-line: #dce6ec;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 16px;
   min-height: 0;
+  max-width: 1600px;
+  margin: 0 auto;
 }
 
 /* ─── 页面标头 ─── */
@@ -633,12 +641,14 @@ onMounted(loadSettings);
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  background: linear-gradient(135deg, #1e3a52 0%, #2c5282 60%, #2a4a6b 100%);
+  background: linear-gradient(115deg, #fbfdfe 0%, #f2f7fa 58%, #eaf2f6 100%);
+  border: 1px solid #d7e3ea;
   border-radius: 14px;
-  padding: 20px 24px;
-  color: #fff;
+  padding: 17px 20px;
+  color: var(--es-ink);
   position: relative;
   overflow: hidden;
+  box-shadow: inset 4px 0 0 var(--es-brand-600), 0 5px 18px rgba(23, 59, 82, 0.07);
 }
 
 /* 装饰圆形背景 */
@@ -650,7 +660,7 @@ onMounted(loadSettings);
   width: 200px;
   height: 200px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.04);
+  background: rgba(44, 95, 123, 0.04);
   pointer-events: none;
 }
 
@@ -662,23 +672,24 @@ onMounted(loadSettings);
   width: 140px;
   height: 140px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.03);
+  background: rgba(44, 95, 123, 0.04);
   pointer-events: none;
 }
 
 .es-header__inner {
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: 13px;
   z-index: 1;
 }
 
 .es-header__icon-wrap {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.12);
-  backdrop-filter: blur(4px);
+  width: 42px;
+  height: 42px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 11px;
+  background: linear-gradient(145deg, var(--es-brand-500), var(--es-brand-700));
+  box-shadow: 0 5px 12px rgba(32, 75, 101, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -686,8 +697,8 @@ onMounted(loadSettings);
 }
 
 .es-header__icon {
-  width: 22px;
-  height: 22px;
+  width: 21px;
+  height: 21px;
   color: #fff;
 }
 
@@ -695,16 +706,10 @@ onMounted(loadSettings);
   margin: 0;
   font-size: 19px;
   font-weight: 700;
-  color: #fff;
+  color: var(--es-ink);
   letter-spacing: -0.01em;
 }
 
-.es-header__subtitle {
-  margin: 3px 0 0;
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.65);
-}
-
 .es-header__actions {
   display: flex;
   gap: 8px;
@@ -727,6 +732,19 @@ onMounted(loadSettings);
   white-space: nowrap;
 }
 
+.es-btn:focus-visible,
+.es-action-btn:focus-visible {
+  outline: 3px solid rgba(96, 165, 250, 0.35);
+  outline-offset: 2px;
+}
+
+.es-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+  transform: none;
+  box-shadow: none;
+}
+
 .es-btn svg {
   width: 15px;
   height: 15px;
@@ -734,24 +752,25 @@ onMounted(loadSettings);
 }
 
 .es-btn--primary {
-  background: var(--ctms-primary, #3f5d75);
+  background: linear-gradient(135deg, var(--es-brand-500), var(--es-brand-700));
   color: #fff;
 }
 
 .es-btn--primary:hover {
-  background: var(--ctms-primary-hover, #365067);
+  background: linear-gradient(135deg, var(--es-brand-600), var(--es-brand-800));
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(63, 93, 117, 0.35);
+  box-shadow: 0 5px 14px rgba(32, 75, 101, 0.28);
 }
 
 .es-btn--ghost {
-  background: rgba(255, 255, 255, 0.12);
-  color: rgba(255, 255, 255, 0.9);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: #fff;
+  color: var(--es-brand-700);
+  border: 1px solid var(--es-brand-200);
 }
 
 .es-btn--ghost:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--es-brand-50);
+  border-color: #a9c8d8;
 }
 
 .es-btn--send {
@@ -793,56 +812,89 @@ onMounted(loadSettings);
 .es-list-panel {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 14px;
 }
 
 /* ─── 新增后缀栏 ─── */
 .es-add-bar {
-  background: #fff;
-  border: 1px solid var(--ctms-border-color, #e5e7eb);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  background: linear-gradient(110deg, #fff 0%, #fff 68%, #f7fafc 100%);
+  border: 1px solid var(--es-line);
   border-radius: 12px;
-  padding: 16px 20px;
+  padding: 14px 16px;
+  box-shadow: 0 3px 12px rgba(23, 59, 82, 0.04);
+}
+
+.es-add-bar__intro {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 220px;
+}
+
+.es-add-bar__icon {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 11px;
+  background: var(--es-brand-100);
+  color: var(--es-brand-600);
+}
+
+.es-add-bar__icon svg {
+  width: 19px;
+  height: 19px;
 }
 
 .es-add-bar__label {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--ctms-text-secondary, #64748b);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-bottom: 10px;
+  color: var(--es-ink);
+  font-size: 13.5px;
+  font-weight: 700;
 }
 
 .es-add-bar__row {
   display: flex;
+  flex: 1;
   gap: 10px;
   align-items: center;
+  justify-content: flex-end;
 }
 
 .es-input-wrap {
   display: flex;
   align-items: center;
-  flex: 1;
-  max-width: 340px;
-  border: 1px solid var(--ctms-border-color, #e5e7eb);
-  border-radius: 10px;
+  width: min(100%, 420px);
+  border: 1px solid #cfdce4;
+  border-radius: 8px;
   overflow: hidden;
   background: #fff;
   transition: border-color 0.18s;
 }
 
+.es-add-bar__submit {
+  height: 36px;
+  min-width: 76px;
+  justify-content: center;
+  padding-inline: 15px;
+}
+
 .es-input-wrap:focus-within {
-  border-color: var(--ctms-primary, #3f5d75);
-  box-shadow: 0 0 0 3px rgba(63, 93, 117, 0.12);
+  border-color: var(--es-brand-500);
+  box-shadow: 0 0 0 3px rgba(59, 113, 141, 0.12);
 }
 
 .es-input-prefix {
   padding: 0 10px;
   font-weight: 700;
-  color: var(--ctms-text-secondary, #64748b);
+  color: var(--es-brand-600);
   font-size: 14px;
-  background: #f7f9fc;
-  border-right: 1px solid var(--ctms-border-color, #e5e7eb);
+  background: var(--es-brand-50);
+  border-right: 1px solid #d7e3ea;
   align-self: stretch;
   display: flex;
   align-items: center;
@@ -855,26 +907,59 @@ onMounted(loadSettings);
 }
 
 /* ─── 域名卡片列表 ─── */
+.es-domain-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.es-domain-list__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 2px 3px;
+}
+
+.es-domain-list__title {
+  margin: 0;
+  color: var(--es-ink);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.es-domain-list__count {
+  padding: 4px 9px;
+  border: 1px solid var(--es-brand-200);
+  border-radius: 999px;
+  background: var(--es-brand-50);
+  color: var(--es-brand-600);
+  font-size: 11.5px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
 .es-domain-list__inner {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .es-domain-card {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(230px, 1.25fr) minmax(360px, 2fr) auto;
   align-items: center;
-  gap: 16px;
-  background: #fff;
-  border: 1px solid var(--ctms-border-color, #e5e7eb);
+  gap: 20px;
+  background: linear-gradient(110deg, #fff 0%, #fff 75%, #fafcfd 100%);
+  border: 1px solid var(--es-line);
   border-radius: 12px;
-  padding: 14px 18px;
+  padding: 14px 16px;
   transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .es-domain-card:hover {
-  border-color: #b8ccd8;
-  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
+  border-color: #adc9d7;
+  box-shadow: 0 7px 20px rgba(23, 59, 82, 0.08);
   transform: translateY(-1px);
 }
 
@@ -882,15 +967,14 @@ onMounted(loadSettings);
   display: flex;
   align-items: center;
   gap: 12px;
-  width: 220px;
-  flex-shrink: 0;
+  min-width: 0;
 }
 
 .es-domain-card__icon {
-  width: 38px;
-  height: 38px;
-  border-radius: 10px;
-  background: linear-gradient(135deg, #e8f0f6, #d4e5f0);
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  background: linear-gradient(145deg, var(--es-brand-100), #d4e8f1);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -900,7 +984,7 @@ onMounted(loadSettings);
 .es-domain-card__icon svg {
   width: 18px;
   height: 18px;
-  color: var(--ctms-primary, #3f5d75);
+  color: var(--es-brand-600);
 }
 
 .es-domain-card__info {
@@ -910,23 +994,31 @@ onMounted(loadSettings);
 }
 
 .es-domain-card__name {
+  overflow: hidden;
   font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-weight: 700;
-  color: var(--ctms-text-main, #0f172a);
+  color: var(--es-ink);
   letter-spacing: -0.01em;
 }
 
 .es-domain-card__meta {
+  overflow: hidden;
   font-size: 12px;
-  color: var(--ctms-text-secondary, #64748b);
+  color: var(--es-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .es-domain-card__meta-row {
-  display: flex;
-  flex: 1;
-  justify-content: space-around;
-  gap: 16px;
-  padding: 0 12px;
+  display: grid;
+  grid-template-columns: minmax(130px, 1.5fr) repeat(2, minmax(76px, 0.7fr));
+  gap: 0;
+  min-width: 0;
+  padding: 0 20px;
+  border-right: 1px solid #edf1f5;
+  border-left: 1px solid #edf1f5;
 }
 
 .es-meta-item {
@@ -934,26 +1026,32 @@ onMounted(loadSettings);
   flex-direction: column;
   align-items: flex-start;
   gap: 3px;
-  min-width: 72px;
+  min-width: 0;
+  padding: 0 16px;
 }
 
+.es-meta-item:first-child { padding-left: 0; }
+.es-meta-item:last-child { padding-right: 0; }
+
 .es-meta-item__label {
   font-size: 11px;
-  color: var(--ctms-text-secondary, #64748b);
+  color: var(--es-muted);
   font-weight: 500;
 }
 
 .es-meta-item__value {
+  overflow: hidden;
   font-size: 13px;
-  color: var(--ctms-text-regular, #334155);
+  color: #294252;
   font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .es-domain-card__right {
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-left: auto;
   flex-shrink: 0;
 }
 
@@ -962,7 +1060,7 @@ onMounted(loadSettings);
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 10px;
+  padding: 4px 9px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 600;
@@ -970,15 +1068,15 @@ onMounted(loadSettings);
 }
 
 .es-status-badge--ok {
-  background: rgba(63, 143, 107, 0.1);
-  color: #2f7a5a;
-  border: 1px solid rgba(63, 143, 107, 0.18);
+  background: #eef8f3;
+  color: #267054;
+  border: 1px solid #c8e5d7;
 }
 
 .es-status-badge--warn {
-  background: rgba(197, 139, 42, 0.1);
-  color: #a06f1a;
-  border: 1px solid rgba(197, 139, 42, 0.2);
+  background: #fff8e9;
+  color: #946413;
+  border: 1px solid #eed9ab;
 }
 
 .es-status-badge__dot {
@@ -990,24 +1088,12 @@ onMounted(loadSettings);
 
 .es-status-badge--ok .es-status-badge__dot {
   background: #3f8f6b;
-  box-shadow: 0 0 0 2.5px rgba(63, 143, 107, 0.25);
-  animation: es-pulse-ok 2.2s ease-in-out infinite;
+  box-shadow: 0 0 0 2.5px rgba(63, 143, 107, 0.16);
 }
 
 .es-status-badge--warn .es-status-badge__dot {
   background: #c58b2a;
-  box-shadow: 0 0 0 2.5px rgba(197, 139, 42, 0.25);
-  animation: es-pulse-warn 2.2s ease-in-out infinite;
-}
-
-@keyframes es-pulse-ok {
-  0%, 100% { box-shadow: 0 0 0 2.5px rgba(63, 143, 107, 0.2); }
-  50% { box-shadow: 0 0 0 4px rgba(63, 143, 107, 0.08); }
-}
-
-@keyframes es-pulse-warn {
-  0%, 100% { box-shadow: 0 0 0 2.5px rgba(197, 139, 42, 0.2); }
-  50% { box-shadow: 0 0 0 4px rgba(197, 139, 42, 0.08); }
+  box-shadow: 0 0 0 2.5px rgba(197, 139, 42, 0.16);
 }
 
 /* ─── 操作按钮 ─── */
@@ -1021,8 +1107,8 @@ onMounted(loadSettings);
   align-items: center;
   gap: 4px;
   padding: 0 10px;
-  height: 30px;
-  border-radius: 8px;
+  height: 32px;
+  border-radius: 7px;
   font-size: 12.5px;
   font-weight: 600;
   cursor: pointer;
@@ -1035,21 +1121,25 @@ onMounted(loadSettings);
   height: 13px;
 }
 
+.es-action-btn__arrow {
+  margin-left: 2px;
+}
+
 .es-action-btn--primary {
-  background: rgba(63, 93, 117, 0.06);
-  color: var(--ctms-primary, #3f5d75);
-  border-color: rgba(63, 93, 117, 0.15);
+  background: var(--es-brand-50);
+  color: var(--es-brand-700);
+  border-color: var(--es-brand-200);
 }
 
 .es-action-btn--primary:hover {
-  background: rgba(63, 93, 117, 0.12);
-  border-color: rgba(63, 93, 117, 0.3);
+  background: var(--es-brand-100);
+  border-color: #9fc0d1;
 }
 
 .es-action-btn--danger {
-  background: rgba(194, 75, 75, 0.05);
-  color: var(--ctms-danger, #c24b4b);
-  border-color: rgba(194, 75, 75, 0.15);
+  background: #fffafa;
+  color: #b55252;
+  border-color: #efd4d4;
 }
 
 .es-action-btn--danger:hover:not(:disabled) {
@@ -1095,12 +1185,6 @@ onMounted(loadSettings);
   color: var(--ctms-text-regular, #334155);
 }
 
-.es-empty__hint {
-  margin: 0;
-  font-size: 13px;
-  color: var(--ctms-text-secondary, #64748b);
-}
-
 /* ─── 动画：列表项 ─── */
 .es-item-enter-active,
 .es-item-leave-active {
@@ -1134,18 +1218,19 @@ onMounted(loadSettings);
 /* ─── 详情卡片 ─── */
 .es-detail-card {
   background: #fff;
-  border: 1px solid var(--ctms-border-color, #e5e7eb);
+  border: 1px solid var(--es-line);
   border-radius: 12px;
   overflow: hidden;
+  box-shadow: 0 3px 12px rgba(23, 59, 82, 0.04);
 }
 
 .es-detail-card__header {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 12px;
   padding: 14px 18px;
-  border-bottom: 1px solid #f0f3f7;
-  background: #fafbfc;
+  border-bottom: 1px solid #e9eff3;
+  background: #f8fafb;
 }
 
 .es-detail-card__header-icon {
@@ -1187,13 +1272,7 @@ onMounted(loadSettings);
   margin: 0 0 2px;
   font-size: 14px;
   font-weight: 700;
-  color: var(--ctms-text-main, #0f172a);
-}
-
-.es-detail-card__desc {
-  margin: 0;
-  font-size: 12px;
-  color: var(--ctms-text-secondary, #64748b);
+  color: var(--es-ink);
 }
 
 .es-detail-card__body {
@@ -1240,11 +1319,12 @@ onMounted(loadSettings);
 .es-security-opt {
   position: relative;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
-  gap: 4px;
-  padding: 10px 8px;
-  border: 1.5px solid var(--ctms-border-color, #e5e7eb);
+  gap: 7px;
+  padding: 11px 8px;
+  border: 1px solid var(--es-line);
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.16s;
@@ -1252,13 +1332,14 @@ onMounted(loadSettings);
 }
 
 .es-security-opt:hover {
-  border-color: #b8ccd8;
-  background: #f7f9fc;
+  border-color: #abc7d5;
+  background: var(--es-brand-50);
 }
 
 .es-security-opt--active {
-  border-color: var(--ctms-primary, #3f5d75);
-  background: rgba(63, 93, 117, 0.05);
+  border-color: var(--es-brand-500);
+  background: var(--es-brand-50);
+  box-shadow: inset 0 0 0 1px var(--es-brand-500);
 }
 
 .es-security-opt__radio {
@@ -1284,7 +1365,7 @@ onMounted(loadSettings);
 }
 
 .es-security-opt--active .es-security-opt__icon {
-  color: var(--ctms-primary, #3f5d75);
+  color: var(--es-brand-600);
 }
 
 .es-security-opt__label {
@@ -1294,20 +1375,16 @@ onMounted(loadSettings);
 }
 
 .es-security-opt--active .es-security-opt__label {
-  color: var(--ctms-primary, #3f5d75);
-}
-
-.es-security-opt__desc {
-  font-size: 11px;
-  color: var(--ctms-text-secondary, #64748b);
+  color: var(--es-brand-700);
 }
 
 /* ─── 状态卡（右列顶部） ─── */
 .es-status-card {
-  background: linear-gradient(135deg, #1e3a52, #2c5282);
+  background: linear-gradient(135deg, var(--es-brand-800), var(--es-brand-600));
   border-radius: 12px;
   padding: 18px 20px;
   color: #fff;
+  box-shadow: 0 7px 20px rgba(23, 59, 82, 0.15);
 }
 
 .es-status-card__domain {
@@ -1346,13 +1423,6 @@ onMounted(loadSettings);
   border: 1px solid rgba(197, 139, 42, 0.3);
 }
 
-.es-status-card__hint {
-  margin: 0 0 14px;
-  font-size: 12.5px;
-  color: rgba(255, 255, 255, 0.6);
-  line-height: 1.5;
-}
-
 .es-status-card__checklist {
   display: flex;
   flex-direction: column;
@@ -1402,23 +1472,57 @@ onMounted(loadSettings);
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
   }
-}
 
-@media (max-width: 860px) {
   .es-domain-card {
-    flex-direction: column;
-    align-items: flex-start;
+    grid-template-areas:
+      "identity actions"
+      "metadata metadata";
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .es-domain-card__left {
+    grid-area: identity;
+  }
+
+  .es-domain-card__meta-row {
+    grid-area: metadata;
+    padding: 14px 0 0;
+    border-top: 1px solid #edf1f5;
+    border-right: 0;
+    border-left: 0;
+  }
+
+  .es-domain-card__right {
+    grid-area: actions;
+  }
+}
+
+@media (max-width: 860px) {
+  .es-add-bar {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .es-add-bar__row {
+    justify-content: flex-start;
+  }
+
+  .es-input-wrap {
+    width: auto;
+    flex: 1;
+  }
+
+  .es-domain-card {
+    align-items: center;
   }
 
   .es-domain-card__right {
-    margin-left: 0;
-    width: 100%;
     justify-content: flex-end;
   }
 
   .es-domain-card__meta-row {
-    flex-wrap: wrap;
-    gap: 12px;
+    gap: 0;
   }
 
   .es-form-row--2col {
@@ -1431,14 +1535,83 @@ onMounted(loadSettings);
 }
 
 @media (max-width: 640px) {
+  .es-page {
+    gap: 14px;
+  }
+
   .es-header {
     flex-direction: column;
     align-items: flex-start;
+    padding: 20px;
   }
 
   .es-header__actions {
     width: 100%;
-    justify-content: flex-end;
+  }
+
+  .es-header__actions .es-btn {
+    flex: 1;
+    justify-content: center;
+  }
+
+  .es-add-bar {
+    padding: 16px;
+  }
+
+  .es-add-bar__row {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .es-input-wrap {
+    min-height: 38px;
+  }
+
+  .es-add-bar__submit {
+    justify-content: center;
+    width: 100%;
+  }
+
+  .es-domain-card {
+    grid-template-areas:
+      "identity status"
+      "metadata metadata"
+      "buttons buttons";
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 14px;
+    padding: 15px;
+  }
+
+  .es-domain-card__right {
+    display: contents;
+  }
+
+  .es-status-badge {
+    grid-area: status;
+  }
+
+  .es-domain-card__actions {
+    display: grid;
+    grid-area: buttons;
+    grid-template-columns: 1fr auto;
+    width: 100%;
+  }
+
+  .es-action-btn {
+    justify-content: center;
+  }
+
+  .es-domain-card__meta-row {
+    grid-template-columns: 1fr 1fr;
+    row-gap: 14px;
+  }
+
+  .es-meta-item {
+    padding: 0;
+  }
+
+  .es-meta-item:first-child {
+    grid-column: 1 / -1;
   }
 
   .es-detail-col--narrow {
diff --git a/frontend/src/views/admin/PermissionManagement.test.ts b/frontend/src/views/admin/PermissionManagement.test.ts
index e24f4642..c1ea0443 100644
--- a/frontend/src/views/admin/PermissionManagement.test.ts
+++ b/frontend/src/views/admin/PermissionManagement.test.ts
@@ -13,15 +13,15 @@ describe("permission management custom roles", () => {
     const listTabEnd = source.indexOf("<!-- 标签页：生效管理 -->", listTabStart);
     const listTabSource = source.slice(listTabStart, listTabEnd);
 
-    expect(source).toContain('title="角色管理"');
-    expect(source).toContain('label="角色列表"');
+    expect(source).toContain('title="角色与权限"');
+    expect(source).toContain('label="角色定义"');
     expect(listTabSource).not.toContain('placeholder="角色类型"');
     expect(listTabSource).not.toContain("typeFilter");
     expect(listTabSource).not.toContain("loadTemplates");
     expect(listTabSource).not.toContain('<el-option label="预设角色" value="ROLE" />');
     expect(listTabSource).not.toContain('<el-option label="自定义角色" value="CUSTOM" />');
     expect(listTabSource).not.toContain('<el-option label="场景角色" value="SCENARIO" />');
-    expect(source).toContain("新增角色");
+    expect(source).toContain("创建角色");
     expect(source).toContain('label="角色名称"');
     expect(source).toContain("roleDisplayName(row)");
     expect(source).not.toContain('title="权限模板管理"');
@@ -31,6 +31,17 @@ describe("permission management custom roles", () => {
     expect(source).toContain("const res = await fetchPermissionTemplates();");
   });
 
+  it("supports efficient role permission editing with change summaries and module actions", () => {
+    const source = readSource();
+
+    expect(source).toContain("roleEditorChangeCount");
+    expect(source).toContain("新增授权 {{ roleEditorGrantedCount }} 项");
+    expect(source).toContain("取消授权 {{ roleEditorRevokedCount }} 项");
+    expect(source).toContain("setRoleEditorPermissions(roleEditorModuleOps(sections), true)");
+    expect(source).toContain("setRoleEditorPermissions(roleEditorModuleOps(sections), false)");
+    expect(source).toContain(':disabled="!canEditSelectedRole || !roleEditorDirtyGuard.isDirty.value"');
+  });
+
   it("keeps active roles configurable for permissions and members without inline role creation", () => {
     const source = readSource();
 
@@ -133,7 +144,9 @@ describe("permission management custom roles", () => {
     expect(source).toContain("{{ role.label }}");
     expect(source).toContain("{{ role.desc }}");
     expect(source).toContain("保存 {{ roleLabel(editingRole) }} 权限");
-    expect(source).toContain("await updateMember(selectedStudyId.value, memberId, { role_in_study: role });");
+    expect(source).toContain("await updateMember(selectedStudyId.value, member.id, { role_in_study: role });");
+    expect(source).toContain("const confirmMemberRoleChange = async");
+    expect(source).toContain('"调整项目角色"');
     expect(source).toContain("await addMember(selectedStudyId.value, addMemberForm);");
   });
 
@@ -142,6 +155,8 @@ describe("permission management custom roles", () => {
 
     expect(source).toContain('selectedProjectPermissionAllowed("project_members:read")');
     expect(source).toContain('selectedProjectPermissionAllowed("project_members:read")');
+    expect(source).toContain("!u.is_admin && !ids.has(u.id)");
+    expect(source).toContain("请选择可添加的项目成员");
     expect(source).toContain('selectedProjectPermissionAllowed("project_members:create")');
     expect(source).toContain('selectedProjectPermissionAllowed("project_members:update")');
     expect(source).toContain('selectedProjectPermissionAllowed("project_members:delete")');
@@ -364,6 +379,15 @@ describe("permission management custom roles", () => {
     const source = readSource();
 
     expect(source).toContain("systemPermissionsByModule");
+    expect(source).toContain('class="system-stats" aria-label="系统级权限概览"');
+    expect(source).toContain('class="system-permissions-card"');
+    expect(source).toContain('class="perm-body perm-body--system"');
+    expect(source).toMatch(/\.system-perm-container \{[\s\S]*?padding: 0;[\s\S]*?gap: 8px;/);
+    expect(source).toMatch(/\.system-perm-row \{[\s\S]*?min-height: 36px;[\s\S]*?padding: 4px 12px;/);
+    expect(source).toContain(".system-module-block + .system-module-block");
+    expect(source).toContain(".system-perm-row:last-child");
+    expect(source).not.toContain("system-perm-row--alt");
+    expect(source).not.toContain("system-stat-divider");
     expect(source).not.toContain("<h2 class=\"perm-title\">系统级权限</h2>");
     expect(source).not.toContain("只读展示，所有系统管理操作仅限 ADMIN 角色执行");
   });
@@ -371,10 +395,21 @@ describe("permission management custom roles", () => {
   it("removes the vertical gap between permission headers and body content", () => {
     const source = readSource();
 
-    expect(source).toContain("padding: 0 0 20px;");
+    expect(source).toContain("padding: 0 0 8px;");
     expect(source).not.toContain("padding: 20px 0 20px;");
   });
 
+  it("uses compact, legible typography for the selected project", () => {
+    const source = readSource();
+
+    expect(source).toContain(".project-selector :deep(.el-select__selected-item)");
+    expect(source).toContain('popper-class="project-selector-dropdown"');
+    expect(source).toContain(".project-selector-dropdown .el-select-dropdown__item");
+    expect(source).toContain("color: #193b5a !important;");
+    expect(source).toContain("font-size: 13px;");
+    expect(source).toContain("font-variant-numeric: tabular-nums;");
+  });
+
   it("limits project PM member management to subordinate project roles", () => {
     const source = readSource();
 
@@ -386,4 +421,17 @@ describe("permission management custom roles", () => {
     expect(source).toContain('addMemberForm.role_in_study = Object.keys(assignableRoleLabels.value)[0] || "";');
     expect(source).not.toContain('addMemberForm.role_in_study = activeRolesInStudy.value.includes("PM") ? "PM"');
   });
+
+  it("separates role configuration from matrix comparison and supports member filtering", () => {
+    const source = readSource();
+
+    expect(source).toContain('v-model="permissionView"');
+    expect(source).toContain('value="roles">角色配置');
+    expect(source).toContain('value="matrix">权限对比');
+    expect(source).toContain('v-if="permissionView === \'roles\'"');
+    expect(source).toContain("const filteredMemberRows = computed");
+    expect(source).toContain("const memberRoleSummary = computed");
+    expect(source).toContain('placeholder="搜索姓名或邮箱"');
+    expect(source).toContain(">账号已停用</el-tag>");
+  });
 });
diff --git a/frontend/src/views/admin/PermissionManagement.vue b/frontend/src/views/admin/PermissionManagement.vue
index d9c6d677..4c320ac3 100644
--- a/frontend/src/views/admin/PermissionManagement.vue
+++ b/frontend/src/views/admin/PermissionManagement.vue
@@ -2,12 +2,12 @@
   <div class="perm-page" v-loading="pageLoading">
 
     <!-- ══════════════════════════════════════
-         项目权限配置
+         项目访问控制
     ══════════════════════════════════════ -->
     <template v-if="activeTab === 'project'">
       <div class="perm-header">
         <div class="perm-header-left">
-          <h2 class="perm-title">项目权限配置</h2>
+          <h2 class="perm-title">项目访问控制</h2>
         </div>
         <div class="perm-header-actions">
           <div class="project-selector">
@@ -16,7 +16,8 @@
               v-model="selectedStudyId"
               placeholder="选择项目"
               filterable
-              style="width: 280px"
+              popper-class="project-selector-dropdown"
+              style="width: 240px"
               @change="onStudyChange"
             >
               <el-option
@@ -36,25 +37,30 @@
             <div class="empty-icon">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
             </div>
-            <h3>选择项目开始配置</h3>
-            <p>从右上角选择一个项目，即可管理该项目的角色权限和成员</p>
+            <h3>选择项目</h3>
+            <p>选择项目后即可管理角色、权限策略与项目成员</p>
           </div>
         </div>
         <template v-else>
           <el-tabs v-model="projectSubTab" class="project-sub-tabs">
-            <el-tab-pane label="角色权限" name="api">
+            <el-tab-pane label="权限策略" name="api">
               <div class="sub-tab-toolbar">
                 <div class="sub-tab-info">
                   <span class="sub-tab-project-name" v-if="selectedStudy">{{ selectedStudy.code }} · {{ selectedStudy.name }}</span>
                 </div>
                 <div class="sub-tab-actions">
+                  <el-radio-group v-model="permissionView" size="small" class="permission-view-switch">
+                    <el-radio-button value="roles">角色配置</el-radio-button>
+                    <el-radio-button value="matrix">权限对比</el-radio-button>
+                  </el-radio-group>
                   <el-button @click="templateDrawerVisible = true">
                     <el-icon><Files /></el-icon>
-                    角色管理
+                    角色与权限
                   </el-button>
                 </div>
               </div>
               <PermissionTemplateSelector
+                v-if="permissionView === 'roles'"
                 :study-id="selectedStudyId"
                 :current-permissions="currentPermissionsForTemplate"
                 :active-roles="activeRolesInStudy"
@@ -62,15 +68,19 @@
                 @edit-role="openRoleEditor"
               />
               <ApiEndpointPermissions
+                v-else
                 :project="selectedStudy"
                 :matrix="apiMatrix"
               />
             </el-tab-pane>
-            <el-tab-pane label="成员管理" name="members">
+            <el-tab-pane label="项目成员" name="members">
               <div class="sub-tab-toolbar">
                 <div class="sub-tab-info">
                   <span class="sub-tab-project-name" v-if="selectedStudy">{{ selectedStudy.code }} · {{ selectedStudy.name }}</span>
                   <el-tag v-if="memberRows.length" effect="plain" size="small" round>{{ memberRows.length }} 名成员</el-tag>
+                  <el-tag v-for="item in memberRoleSummary" :key="item.role" effect="plain" size="small" type="info" round>
+                    {{ roleLabel(item.role) }} {{ item.count }}
+                  </el-tag>
                 </div>
                 <div class="sub-tab-actions">
                   <el-button v-if="canAddProjectMember" type="primary" @click="openAddMember">
@@ -79,22 +89,52 @@
                   </el-button>
                 </div>
               </div>
+              <div class="members-filter-bar">
+                <div class="members-filter-controls">
+                  <el-input
+                    v-model="memberSearch"
+                    clearable
+                    placeholder="搜索姓名或邮箱"
+                    :prefix-icon="Search"
+                    style="width: 240px"
+                  />
+                  <el-select v-model="memberRoleFilter" style="width: 150px">
+                    <el-option label="全部项目角色" value="" />
+                    <el-option v-for="role in memberFilterRoles" :key="role" :label="roleLabel(role)" :value="role" />
+                  </el-select>
+                  <el-select v-model="memberStatusFilter" style="width: 140px">
+                    <el-option label="全部状态" value="" />
+                    <el-option label="有效" value="ACTIVE" />
+                    <el-option label="项目内停用" value="DISABLED" />
+                    <el-option label="账号已停用" value="DISABLED_GLOBAL" />
+                  </el-select>
+                  <el-button :disabled="!hasMemberFilters" @click="resetMemberFilters">重置</el-button>
+                </div>
+                <div class="members-filter-meta">
+                  <span class="members-filter-result">显示 {{ filteredMemberRows.length }} / {{ memberRows.length }} 名成员</span>
+                  <span v-if="lastMemberRoleChange" class="member-undo">
+                    已调整 {{ lastMemberRoleChange.fullName }} 的角色
+                    <el-button link type="primary" size="small" @click="undoMemberRoleChange">撤销</el-button>
+                  </span>
+                </div>
+              </div>
               <div class="members-table-wrapper">
-                <el-table :data="memberRows" v-loading="membersLoading" class="members-table">
+                <el-table :data="filteredMemberRows" v-loading="membersLoading" class="members-table" empty-text="未找到匹配的项目成员">
                   <el-table-column prop="full_name" label="姓名" min-width="140">
                     <template #default="{ row }">
                       <div class="member-name-cell">
                         <span class="member-name">{{ row.full_name }}</span>
+                        <span v-if="row.email" class="member-email">{{ row.email }}</span>
                       </div>
                     </template>
                   </el-table-column>
                   <el-table-column label="项目角色" min-width="140">
                     <template #default="{ row }">
                       <el-select
-                        v-model="row.role_in_study"
+                        :model-value="row.role_in_study"
                         size="small"
                         style="width: 130px"
-                        @change="(val: string) => updateMemberRole(row.id, val)"
+                        @change="(val: string) => confirmMemberRoleChange(row, val)"
                         :disabled="!canUpdateProjectMember(row) || !row.is_active || row.effectiveStatus === 'DISABLED_GLOBAL'"
                       >
                         <el-option
@@ -109,10 +149,10 @@
                   <el-table-column label="状态" width="120">
                     <template #default="{ row }">
                       <el-tooltip v-if="row.effectiveStatus === 'DISABLED_GLOBAL'" content="请前往账号管理启用该账号" placement="top">
-                        <el-tag type="danger" effect="dark" round size="small">全局已禁用</el-tag>
+                        <el-tag type="danger" effect="plain" round size="small">账号已停用</el-tag>
                       </el-tooltip>
-                      <el-tag v-else :type="row.is_active ? 'success' : 'danger'" effect="dark" round size="small">
-                        {{ row.is_active ? "启用" : "已禁用" }}
+                      <el-tag v-else :type="row.is_active ? 'success' : 'warning'" effect="plain" round size="small">
+                        {{ row.is_active ? "有效" : "项目内停用" }}
                       </el-tag>
                     </template>
                   </el-table-column>
@@ -149,7 +189,7 @@
          系统级权限
     ══════════════════════════════════════ -->
     <template v-else-if="activeTab === 'system'">
-      <div class="perm-body">
+      <div class="perm-body perm-body--system">
         <div v-if="systemLoading" class="perm-empty">
           <el-skeleton :rows="8" animated />
         </div>
@@ -157,59 +197,77 @@
           <el-empty description="暂无系统级权限数据" />
         </div>
         <div v-else class="system-perm-container">
-          <div class="system-stats">
-            <span class="system-stat-item">
-              <strong>{{ Object.keys(systemPermissionsByModule).length }}</strong> 个模块
-            </span>
-            <span class="system-stat-divider" />
-            <span class="system-stat-item">
-              <strong>{{ systemPermissions.length }}</strong> 项权限
-            </span>
-            <span class="system-stat-divider" />
-            <span class="system-stat-item">
-              <strong>{{ systemPermissions.filter(p => p.roles.includes('PM')).length }}</strong> 项 PM 可访问
-            </span>
+          <div class="system-stats" aria-label="系统级权限概览">
+            <div class="system-stat-item system-stat-item--modules">
+              <span class="system-stat-label">权限模块</span>
+              <div class="system-stat-value">
+                <strong>{{ Object.keys(systemPermissionsByModule).length }}</strong>
+                <span>个</span>
+              </div>
+            </div>
+            <div class="system-stat-item system-stat-item--permissions">
+              <span class="system-stat-label">权限总数</span>
+              <div class="system-stat-value">
+                <strong>{{ systemPermissions.length }}</strong>
+                <span>项</span>
+              </div>
+            </div>
+            <div class="system-stat-item system-stat-item--pm">
+              <span class="system-stat-label">PM 可访问</span>
+              <div class="system-stat-value">
+                <strong>{{ systemPermissions.filter(p => p.roles.includes('PM')).length }}</strong>
+                <span>项</span>
+              </div>
+            </div>
           </div>
-          <div v-for="(items, moduleKey) in systemPermissionsByModule" :key="moduleKey" class="system-module-block">
-            <div class="system-module-header">
-              <div class="system-module-icon" :class="`module-icon--${moduleKey}`">
-                <svg v-if="moduleKey === 'system_users'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
-                <svg v-else-if="moduleKey === 'system_projects'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
-                <svg v-else-if="moduleKey === 'system_permissions'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
-                <svg v-else-if="moduleKey === 'system_monitoring'" 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>
-                <svg v-else-if="moduleKey === 'system_audit'" 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"/></svg>
-                <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
-              </div>
-              <div class="system-module-info">
-                <span class="system-module-title">{{ systemModuleLabels[moduleKey] || moduleKey }}</span>
-                <span class="system-module-count">{{ items.length }} 项操作</span>
-              </div>
-              <div class="system-module-roles-summary">
-                <el-tag v-if="items.some(i => i.roles.includes('PM'))" size="small" type="warning" effect="plain" round>含 PM 权限</el-tag>
-              </div>
-            </div>
-            <div class="system-perm-list">
-              <div v-for="(row, idx) in items" :key="row.permission_key" class="system-perm-row" :class="{ 'system-perm-row--alt': idx % 2 === 1 }">
-                <div class="system-perm-main">
-                  <el-tag :type="opTagType({ operation_key: row.permission_key, action: row.action })" size="small" class="system-perm-action">
-                    {{ opActionLabel({ operation_key: row.permission_key, action: row.action }) }}
-                  </el-tag>
-                  <span class="system-perm-desc">{{ row.description }}</span>
+          <div class="system-permissions-card">
+            <section v-for="(items, moduleKey) in systemPermissionsByModule" :key="moduleKey" class="system-module-block">
+              <div class="system-module-header">
+                <div class="system-module-icon" :class="`module-icon--${moduleKey}`">
+                  <svg v-if="moduleKey === 'system_users'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
+                  <svg v-else-if="moduleKey === 'system_projects'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+                  <svg v-else-if="moduleKey === 'system_permissions'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+                  <svg v-else-if="moduleKey === 'system_monitoring'" 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>
+                  <svg v-else-if="moduleKey === 'system_audit'" 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"/></svg>
+                  <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
                 </div>
-                <code class="perm-key">{{ row.permission_key }}</code>
-                <div class="system-perm-roles">
-                  <el-tag
-                    v-for="r in row.roles"
-                    :key="r"
-                    size="small"
-                    :effect="r === 'ADMIN' ? 'dark' : 'plain'"
-                    :type="r === 'ADMIN' ? '' : 'warning'"
-                    round
-                    class="role-chip"
-                  >{{ roleLabel(r) }}</el-tag>
+                <div class="system-module-info">
+                  <span class="system-module-title">{{ systemModuleLabels[moduleKey] || moduleKey }}</span>
+                  <span class="system-module-count">{{ items.length }} 项操作</span>
+                </div>
+                <div class="system-module-roles-summary">
+                  <el-tag v-if="items.some(i => i.roles.includes('PM'))" size="small" type="warning" effect="plain" round>PM 可访问</el-tag>
+                  <el-tag v-else size="small" type="info" effect="plain" round>仅管理员</el-tag>
                 </div>
               </div>
-            </div>
+              <div class="system-perm-list">
+                <div class="system-perm-columns" aria-hidden="true">
+                  <span>权限操作</span>
+                  <span>权限标识</span>
+                  <span>可访问角色</span>
+                </div>
+                <div v-for="row in items" :key="row.permission_key" class="system-perm-row">
+                  <div class="system-perm-main">
+                    <el-tag :type="opTagType({ operation_key: row.permission_key, action: row.action })" effect="plain" size="small" class="system-perm-action">
+                      {{ opActionLabel({ operation_key: row.permission_key, action: row.action }) }}
+                    </el-tag>
+                    <span class="system-perm-desc" :title="row.description">{{ row.description }}</span>
+                  </div>
+                  <code class="perm-key" :title="row.permission_key">{{ row.permission_key }}</code>
+                  <div class="system-perm-roles">
+                    <el-tag
+                      v-for="r in row.roles"
+                      :key="r"
+                      size="small"
+                      :effect="r === 'ADMIN' ? 'dark' : 'plain'"
+                      :type="r === 'ADMIN' ? '' : 'warning'"
+                      round
+                      class="role-chip"
+                    >{{ roleLabel(r) }}</el-tag>
+                  </div>
+                </div>
+              </div>
+            </section>
           </div>
         </div>
       </div>
@@ -220,7 +278,7 @@
     ══════════════════════════════════════ -->
     <el-drawer
       v-model="templateDrawerVisible"
-      title="角色管理"
+      title="角色与权限"
       size="720px"
       direction="rtl"
       :close-on-click-modal="true"
@@ -231,7 +289,7 @@
         <el-tabs v-model="templateDrawerTab" class="drawer-tabs">
 
           <!-- 标签页：角色列表 -->
-          <el-tab-pane label="角色列表" name="list">
+          <el-tab-pane label="角色定义" name="list">
             <el-table :data="sortedTemplates" v-loading="templatesLoading" stripe class="template-table">
               <el-table-column prop="name" label="角色名称" min-width="140">
                 <template #default="{ row }">
@@ -257,7 +315,7 @@
           </el-tab-pane>
 
           <!-- 标签页：生效管理 -->
-          <el-tab-pane label="生效管理" name="active" :disabled="!selectedStudyId">
+          <el-tab-pane label="项目角色" name="active" :disabled="!selectedStudyId">
             <div class="active-roles-desc">
               <el-alert
                 title="生效的角色将映射到成员管理的项目角色中，未生效的角色不可在成员管理中分配。"
@@ -297,26 +355,28 @@
           </el-tab-pane>
 
           <!-- 标签页：编辑权限 -->
-          <el-tab-pane label="编辑权限" name="edit-role" :disabled="!selectedStudyId">
+          <el-tab-pane label="权限配置" name="edit-role" :disabled="!selectedStudyId">
             <div class="role-editor-layout" v-loading="roleEditorLoading">
               <!-- 左侧角色列表 -->
               <div class="role-editor-sidebar">
-                <div
+                <button
                   v-for="role in roleOptions"
                   :key="role.key"
+                  type="button"
                   class="role-sidebar-item"
                   :class="{ active: editingRole === role.key }"
+                  :aria-pressed="editingRole === role.key"
                   @click="selectRoleForEdit(role.key)"
                 >
                   <span class="role-sidebar-icon">{{ role.icon }}</span>
                   <div class="role-sidebar-info">
                     <div class="role-sidebar-name">{{ role.label }}</div>
                     <div class="role-sidebar-count" v-if="editingRole === role.key && Object.keys(roleEditorDraft).length">
-                      {{ Object.values(roleEditorDraft).filter(Boolean).length }} 项已启用
+                      {{ Object.values(roleEditorDraft).filter(Boolean).length }} 项已授权
                     </div>
                   </div>
                   <el-icon v-if="editingRole === role.key" class="role-sidebar-arrow"><ArrowRight /></el-icon>
-                </div>
+                </button>
               </div>
 
               <!-- 右侧权限编辑区 -->
@@ -329,11 +389,30 @@
                     <el-input v-model="roleEditorSearch" placeholder="搜索权限..." clearable class="role-editor-search">
                       <template #prefix><el-icon><Search /></el-icon></template>
                     </el-input>
+                    <el-select v-model="roleEditorScope" class="role-editor-scope" style="width: 140px">
+                      <el-option label="全部权限" value="all" />
+                      <el-option label="仅已授权" value="granted" />
+                      <el-option label="仅本次变更" value="changed" />
+                    </el-select>
+                    <div class="role-editor-change-summary" :class="{ 'role-editor-change-summary--dirty': roleEditorChangeCount > 0 }">
+                      <template v-if="roleEditorChangeCount">
+                        <span>新增授权 {{ roleEditorGrantedCount }} 项</span>
+                        <span>取消授权 {{ roleEditorRevokedCount }} 项</span>
+                      </template>
+                      <span v-else>暂无变更</span>
+                    </div>
                   </div>
                   <div class="role-editor-modules">
                     <div v-for="(sections, mod) in roleEditorSectionGroups" :key="mod" class="role-editor-module">
                       <div class="role-editor-module-header">
-                        <span>{{ roleEditorModuleLabel(mod) }}</span>
+                        <div class="role-editor-module-heading">
+                          <span>{{ roleEditorModuleLabel(mod) }}</span>
+                          <span>{{ roleEditorEnabledCount(roleEditorModuleOps(sections)) }} / {{ roleEditorModuleCount(sections) }} 已授权</span>
+                        </div>
+                        <div v-if="canEditSelectedRole" class="role-editor-module-actions">
+                          <el-button link type="primary" size="small" @click="setRoleEditorPermissions(roleEditorModuleOps(sections), true)">全部授权</el-button>
+                          <el-button link size="small" @click="setRoleEditorPermissions(roleEditorModuleOps(sections), false)">全部取消</el-button>
+                        </div>
                       </div>
                       <el-collapse class="role-editor-collapse">
                         <el-collapse-item
@@ -344,7 +423,11 @@
                         >
                           <template #title>
                             <span class="role-editor-section-title">{{ section.label }}</span>
-                            <span class="role-editor-section-summary">{{ roleEditorEnabledCount(section.ops) }} / {{ section.ops.length }} 已启用</span>
+                            <span class="role-editor-section-summary">{{ roleEditorEnabledCount(section.ops) }} / {{ section.ops.length }} 已授权</span>
+                            <span v-if="canEditSelectedRole" class="role-editor-section-actions" @click.stop>
+                              <el-button link type="primary" size="small" @click="setRoleEditorPermissions(section.ops, true)">全选</el-button>
+                              <el-button link size="small" @click="setRoleEditorPermissions(section.ops, false)">清空</el-button>
+                            </span>
                           </template>
                           <div class="role-editor-ops">
                             <div v-for="op in section.ops" :key="op.operation_key" class="role-editor-op-row">
@@ -360,6 +443,7 @@
                         </el-collapse-item>
                       </el-collapse>
                     </div>
+                    <el-empty v-if="Object.keys(roleEditorSectionGroups).length === 0" description="没有符合当前筛选条件的权限" />
                   </div>
                 </template>
                 <el-empty v-else description="请从左侧选择角色" style="padding: 80px 0" />
@@ -369,7 +453,7 @@
 
         </el-tabs>
         <div class="drawer-tab-actions">
-          <el-button v-if="templateDrawerTab === 'list' && isAdmin" type="primary" @click="openCreateTemplate">新增角色</el-button>
+          <el-button v-if="templateDrawerTab === 'list' && isAdmin" type="primary" @click="openCreateTemplate">创建角色</el-button>
           <el-button v-else-if="templateDrawerTab === 'active'" type="primary" :loading="activeRolesSaving" @click="saveActiveRoles">
             保存
           </el-button>
@@ -378,7 +462,7 @@
             <el-button
               type="primary"
               :loading="roleEditorSaving"
-              :disabled="!canEditSelectedRole"
+              :disabled="!canEditSelectedRole || !roleEditorDirtyGuard.isDirty.value"
               @click="saveRoleEditor"
             >
               保存 {{ roleLabel(editingRole) }} 权限
@@ -389,7 +473,7 @@
     </el-drawer>
 
     <!-- 新增/编辑角色对话框 -->
-    <el-dialog v-model="templateDialogVisible" :title="editingTemplateId ? '编辑角色' : '新增角色'" width="520px" @close="resetTemplateForm">
+    <el-dialog v-model="templateDialogVisible" :title="editingTemplateId ? '编辑角色' : '创建角色'" width="520px" @close="resetTemplateForm">
       <el-form :model="templateForm" :rules="templateRules" ref="templateFormRef" label-width="90px">
         <el-form-item label="角色类型" prop="template_type">
           <el-select v-model="templateForm.template_type" style="width: 100%" :disabled="Boolean(editingTemplateId)">
@@ -411,29 +495,39 @@
     </el-dialog>
 
     <!-- 新增成员对话框 -->
-    <el-dialog v-model="addMemberVisible" title="新增成员" width="480px" @close="resetAddMemberForm">
-      <el-form :model="addMemberForm" :rules="addMemberRules" ref="addMemberFormRef" label-width="90px">
-        <el-form-item label="用户" prop="user_id">
-          <el-select v-model="addMemberForm.user_id" filterable placeholder="请选择用户" style="width: 100%">
-            <el-option
-              v-for="u in availableCandidates"
-              :key="u.id"
-              :label="u.full_name"
-              :value="u.id"
-              :disabled="!u.is_active"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="项目角色" prop="role_in_study">
-          <el-select v-model="addMemberForm.role_in_study" style="width: 100%">
-            <el-option v-for="(label, val) in assignableRoleLabels" :key="val" :label="label" :value="val" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="addMemberVisible = false">取消</el-button>
-        <el-button type="primary" :loading="addMemberSaving" @click="submitAddMember">添加</el-button>
-      </template>
+    <el-dialog v-model="addMemberVisible" width="480px" class="member-form-dialog" :show-close="false" @close="resetAddMemberForm">
+      <div class="member-form-panel">
+        <div class="member-form-panel__header">
+          <h2>新增成员</h2>
+          <button type="button" class="member-form-panel__close" aria-label="关闭" @click="addMemberVisible = false">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18" /></svg>
+          </button>
+        </div>
+        <div class="member-form-panel__body">
+          <el-form :model="addMemberForm" :rules="addMemberRules" ref="addMemberFormRef" label-width="80px">
+            <el-form-item label="用户" prop="user_id">
+              <el-select v-model="addMemberForm.user_id" filterable placeholder="请选择用户" style="width: 100%">
+                <el-option
+                  v-for="u in availableCandidates"
+                  :key="u.id"
+                  :label="u.full_name"
+                  :value="u.id"
+                  :disabled="!u.is_active"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="项目角色" prop="role_in_study">
+              <el-select v-model="addMemberForm.role_in_study" style="width: 100%">
+                <el-option v-for="(label, val) in assignableRoleLabels" :key="val" :label="label" :value="val" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="member-form-panel__footer">
+          <el-button @click="addMemberVisible = false">取消</el-button>
+          <el-button type="primary" :loading="addMemberSaving" @click="submitAddMember">添加</el-button>
+        </div>
+      </div>
     </el-dialog>
 
     <!-- 权限校验 Dialog -->
@@ -665,6 +759,7 @@ const studies = ref<Study[]>([]);
 const selectedStudyId = ref<string>("");
 const selectedStudy = computed(() => studies.value.find((s) => s.id === selectedStudyId.value) ?? null);
 const projectSubTab = ref<"api" | "members">("api");
+const permissionView = ref<"roles" | "matrix">("roles");
 
 // 接口级权限
 const apiMatrix = ref<ApiEndpointPermissionsResponse | null>(null);
@@ -711,6 +806,7 @@ const onStudyChange = async (id: string) => {
   }
   apiMatrix.value = null;
   members.value = [];
+  lastMemberRoleChange.value = null;
   candidates.value = [];
   activeRolesDraft.value = [];
   router.replace({ query: { ...route.query, projectId: id } });
@@ -749,6 +845,10 @@ const flattenRolePermissions = (
 const members = ref<StudyMember[]>([]);
 const candidates = ref<UserInfo[]>([]);
 const membersLoading = ref(false);
+const lastMemberRoleChange = ref<{ memberId: string; fullName: string; previousRole: string; currentRole: string } | null>(null);
+const memberSearch = ref("");
+const memberRoleFilter = ref("");
+const memberStatusFilter = ref("");
 const addMemberVisible = ref(false);
 const addMemberSaving = ref(false);
 const addMemberFormRef = ref<FormInstance>();
@@ -771,13 +871,45 @@ const memberRows = computed(() =>
   members.value.map((m) => {
     const user = candidates.value.find((u) => u.id === m.user_id) || m.user;
     const effectiveStatus = user && (user as any).is_active === false ? "DISABLED_GLOBAL" : m.is_active ? "ACTIVE" : "DISABLED";
-    return { ...m, full_name: (user as any)?.full_name || m.user_id, effectiveStatus };
+    return {
+      ...m,
+      full_name: (user as any)?.full_name || m.user_id,
+      email: (user as any)?.email || "",
+      effectiveStatus,
+    };
   })
 );
 
+const memberFilterRoles = computed(() =>
+  [...new Set(memberRows.value.map((row) => row.role_in_study).filter(Boolean))].sort(compareRolesByTemplateOrder)
+);
+
+const memberRoleSummary = computed(() => memberFilterRoles.value.map((role) => ({
+  role,
+  count: memberRows.value.filter((row) => row.role_in_study === role).length,
+})));
+
+const filteredMemberRows = computed(() => {
+  const search = memberSearch.value.trim().toLowerCase();
+  return memberRows.value.filter((row) => {
+    const matchesSearch = !search || row.full_name.toLowerCase().includes(search) || row.email.toLowerCase().includes(search);
+    const matchesRole = !memberRoleFilter.value || row.role_in_study === memberRoleFilter.value;
+    const matchesStatus = !memberStatusFilter.value || row.effectiveStatus === memberStatusFilter.value;
+    return matchesSearch && matchesRole && matchesStatus;
+  });
+});
+
+const hasMemberFilters = computed(() => Boolean(memberSearch.value || memberRoleFilter.value || memberStatusFilter.value));
+
+const resetMemberFilters = () => {
+  memberSearch.value = "";
+  memberRoleFilter.value = "";
+  memberStatusFilter.value = "";
+};
+
 const availableCandidates = computed(() => {
   const ids = new Set(members.value.map((m) => m.user_id));
-  return candidates.value.filter((u) => !ids.has(u.id));
+  return candidates.value.filter((u) => !u.is_admin && !ids.has(u.id));
 });
 
 const loadMembers = async () => {
@@ -822,6 +954,10 @@ const submitAddMember = async () => {
   }
   const valid = await addMemberFormRef.value?.validate().catch(() => false);
   if (!valid) return;
+  if (!availableCandidates.value.some((candidate) => candidate.id === addMemberForm.user_id)) {
+    ElMessage.warning("请选择可添加的项目成员");
+    return;
+  }
   addMemberSaving.value = true;
   try {
     await addMember(selectedStudyId.value, addMemberForm);
@@ -835,22 +971,61 @@ const submitAddMember = async () => {
   }
 };
 
-const updateMemberRole = async (memberId: string, role: string) => {
-  const row = members.value.find((item) => item.id === memberId);
-  if (!row || !canUpdateProjectMember(row)) {
+const updateMemberRole = async (row: any, role: string, { trackChange = true }: { trackChange?: boolean } = {}) => {
+  const member = members.value.find((item) => item.id === row.id);
+  if (!member || !canUpdateProjectMember(member)) {
     ElMessage.warning("无权限更新成员");
     loadMembers();
-    return;
+    return false;
   }
+  const previousRole = member.role_in_study;
   try {
-    await updateMember(selectedStudyId.value, memberId, { role_in_study: role });
-    ElMessage.success("角色已更新");
+    await updateMember(selectedStudyId.value, member.id, { role_in_study: role });
+    member.role_in_study = role;
+    members.value = [...members.value];
+    if (trackChange && previousRole !== role) {
+      lastMemberRoleChange.value = {
+        memberId: member.id,
+        fullName: row.full_name || member.user_id,
+        previousRole,
+        currentRole: role,
+      };
+    }
+    ElMessage.success("项目角色已更新");
+    return true;
   } catch (e: any) {
     ElMessage.error(e?.response?.data?.message || "更新失败");
     loadMembers();
+    return false;
   }
 };
 
+const confirmMemberRoleChange = async (row: any, role: string) => {
+  if (!role || role === row.role_in_study) return;
+  const confirmed = await ElMessageBox.confirm(
+    `确认将 ${row.full_name} 的项目角色由“${roleLabel(row.role_in_study)}”调整为“${roleLabel(role)}”？`,
+    "调整项目角色",
+    { type: "warning", confirmButtonText: "确认调整", cancelButtonText: "取消" }
+  ).catch(() => false);
+  if (!confirmed) {
+    members.value = [...members.value];
+    return;
+  }
+  await updateMemberRole(row, role);
+};
+
+const undoMemberRoleChange = async () => {
+  const change = lastMemberRoleChange.value;
+  if (!change) return;
+  const row = memberRows.value.find((item) => item.id === change.memberId);
+  if (!row) {
+    lastMemberRoleChange.value = null;
+    return;
+  }
+  const restored = await updateMemberRole(row, change.previousRole, { trackChange: false });
+  if (restored) lastMemberRoleChange.value = null;
+};
+
 const toggleMemberActive = async (row: any) => {
   if (!canUpdateProjectMember(row)) {
     ElMessage.warning("无权限更新成员");
@@ -1177,6 +1352,7 @@ interface RolePrerequisiteAdjustments {
 
 const editingRole = ref("");
 const roleEditorSearch = ref("");
+const roleEditorScope = ref<"all" | "granted" | "changed">("all");
 const roleEditorDraft = ref<Record<string, boolean>>({});
 const roleEditorSaving = ref(false);
 const roleEditorLoading = ref(false);
@@ -1254,12 +1430,20 @@ const opTagType = (op: { operation_key: string; action: string }) => {
 
 const roleEditorGrouped = computed(() => {
   const search = roleEditorSearch.value.toLowerCase();
-  const filtered = allOperations.value.filter((op) =>
-    !search ||
-    op.description.toLowerCase().includes(search) ||
-    op.operation_key.toLowerCase().includes(search) ||
-    roleEditorModuleLabel(op.module).includes(search)
-  );
+  const filtered = allOperations.value.filter((op) => {
+    const matchesSearch =
+      !search ||
+      op.description.toLowerCase().includes(search) ||
+      op.operation_key.toLowerCase().includes(search) ||
+      roleEditorModuleLabel(op.module).includes(search);
+    const currentAllowed = Boolean(roleEditorDraft.value[op.operation_key]);
+    const originalAllowed = originalRolePermissionAllowed(op.operation_key);
+    const matchesScope =
+      roleEditorScope.value === "all" ||
+      (roleEditorScope.value === "granted" && currentAllowed) ||
+      (roleEditorScope.value === "changed" && currentAllowed !== originalAllowed);
+    return matchesSearch && matchesScope;
+  });
   const sorted = [...filtered].sort((a, b) => {
     const moduleDiff = compareProjectPermissionModules(a.module, b.module);
     if (moduleDiff !== 0) return moduleDiff;
@@ -1295,9 +1479,32 @@ const roleEditorSectionGroups = computed(() => {
 const roleEditorModuleCount = (sections: RoleEditorSection[]): number =>
   sections.reduce((total, section) => total + section.ops.length, 0);
 
+const roleEditorModuleOps = (sections: RoleEditorSection[]): RoleEditorOp[] =>
+  sections.flatMap((section) => section.ops);
+
 const roleEditorEnabledCount = (ops: RoleEditorOp[]): number =>
   ops.filter((op) => roleEditorDraft.value[op.operation_key]).length;
 
+const originalRolePermissionAllowed = (operationKey: string): boolean => {
+  const permission = apiMatrix.value?.[editingRole.value]?.[operationKey];
+  if (typeof permission === "boolean") return permission;
+  return Boolean(permission?.allowed);
+};
+
+const roleEditorGrantedCount = computed(() =>
+  allOperations.value.filter((op) =>
+    Boolean(roleEditorDraft.value[op.operation_key]) && !originalRolePermissionAllowed(op.operation_key)
+  ).length
+);
+
+const roleEditorRevokedCount = computed(() =>
+  allOperations.value.filter((op) =>
+    !roleEditorDraft.value[op.operation_key] && originalRolePermissionAllowed(op.operation_key)
+  ).length
+);
+
+const roleEditorChangeCount = computed(() => roleEditorGrantedCount.value + roleEditorRevokedCount.value);
+
 const operationByKey = computed(() => {
   const map: Record<string, RoleEditorOp> = {};
   for (const op of allOperations.value) map[op.operation_key] = op;
@@ -1382,6 +1589,13 @@ const handleRolePermissionChange = (op: RoleEditorOp, allowed: boolean) => {
   roleEditorDraft.value = { ...roleEditorDraft.value, [op.operation_key]: allowed };
 };
 
+const setRoleEditorPermissions = (ops: RoleEditorOp[], allowed: boolean) => {
+  if (!canEditSelectedRole.value) return;
+  const next = { ...roleEditorDraft.value };
+  for (const op of ops) next[op.operation_key] = allowed;
+  roleEditorDraft.value = next;
+};
+
 const canEditSelectedRole = computed(() => {
   if (editingRole.value === "ADMIN") return false;
   if (isAdmin.value) return true;
@@ -1392,6 +1606,7 @@ const canEditSelectedRole = computed(() => {
 const selectRoleForEdit = (role: string) => {
   editingRole.value = role;
   roleEditorSearch.value = "";
+  roleEditorScope.value = "all";
   initRoleEditor();
 };
 
@@ -1430,6 +1645,7 @@ const initRoleEditor = () => {
 const cancelRoleEditor = () => {
   editingRole.value = "";
   roleEditorSearch.value = "";
+  roleEditorScope.value = "all";
   roleEditorDraft.value = {};
   roleEditorDirtyGuard.syncBaseline();
 };
@@ -1612,11 +1828,11 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 28px 16px;
+  padding: 10px 14px;
   background: #fff;
   border-bottom: 1px solid #e2e8f0;
   flex-shrink: 0;
-  gap: 16px;
+  gap: 10px;
 }
 
 .perm-header-left {
@@ -1627,7 +1843,7 @@ onMounted(async () => {
 
 .perm-title {
   margin: 0;
-  font-size: 18px;
+  font-size: 15px;
   font-weight: 700;
   color: #1a2332;
   line-height: 1.3;
@@ -1646,10 +1862,49 @@ onMounted(async () => {
   gap: 8px;
 }
 
+.project-selector :deep(.el-select) {
+  --el-select-input-color: #193b5a;
+  --el-select-multiple-input-color: #193b5a;
+  --el-input-text-color: #193b5a;
+}
+
+.project-selector :deep(.el-select__wrapper),
+.project-selector :deep(.el-select__selection) {
+  color: #193b5a;
+}
+
+.project-selector :deep(.el-select__selected-item) {
+  color: #193b5a !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+  font-variant-numeric: tabular-nums;
+}
+
+.project-selector :deep(.el-select__input) {
+  color: #193b5a !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  font-variant-numeric: tabular-nums;
+}
+
+.project-selector :deep(.el-select__placeholder) {
+  color: #94a3b8;
+  font-size: 13px;
+}
+
+.project-selector :deep(.el-select__caret) {
+  color: #315f7a;
+}
+
 .project-selector-icon {
-  width: 18px;
-  height: 18px;
-  color: #64748b;
+  width: 16px;
+  height: 16px;
+  color: #315f7a;
   flex-shrink: 0;
 }
 
@@ -1657,7 +1912,7 @@ onMounted(async () => {
 .perm-body {
   flex: 1;
   overflow-y: auto;
-  padding: 0 0 20px;
+  padding: 0 0 8px;
 }
 
 .perm-empty {
@@ -1713,22 +1968,22 @@ onMounted(async () => {
 .project-sub-tabs {
   background: #fff;
   border-radius: 0;
-  padding: 0 28px 24px;
+  padding: 0 12px 12px;
 }
 
 :deep(.project-sub-tabs .el-tabs__header) {
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
 
 .sub-tab-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 16px;
-  padding: 12px 16px;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 7px 10px;
   background: #f8fafc;
-  border-radius: 12px;
+  border-radius: 8px;
   border: 1px solid #f1f5f9;
 }
 
@@ -1739,7 +1994,7 @@ onMounted(async () => {
 }
 
 .sub-tab-project-name {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   color: #334155;
 }
@@ -1750,11 +2005,15 @@ onMounted(async () => {
   gap: 8px;
 }
 
+.permission-view-switch :deep(.el-radio-button__inner) {
+  min-width: 78px;
+}
+
 .sub-tab-spacer { flex: 1; }
 
 /* ── 成员管理表格 ── */
 .members-table-wrapper {
-  border-radius: 12px;
+  border-radius: 8px;
   border: 1px solid #e2e8f0;
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
@@ -1766,59 +2025,298 @@ onMounted(async () => {
 
 .member-name-cell {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
 }
 
 .member-name {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
   color: #1a2332;
 }
 
+.member-email {
+  max-width: 260px;
+  overflow: hidden;
+  color: #81909e;
+  font-size: 10.5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.members-filter-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 6px 8px;
+  border: 1px solid #e5ebf0;
+  border-radius: 7px;
+  background: #fbfcfd;
+}
+
+.members-filter-controls {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.members-filter-result {
+  flex-shrink: 0;
+  color: #718294;
+  font-size: 10.5px;
+  font-weight: 500;
+}
+
+.members-filter-meta {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  min-width: 0;
+}
+
+.member-undo {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: #64788a;
+  font-size: 10.5px;
+  white-space: nowrap;
+}
+
+:global(.member-form-dialog.el-dialog) {
+  --el-dialog-bg-color: transparent !important;
+  --el-dialog-box-shadow: none !important;
+  --el-dialog-border-radius: 0 !important;
+  overflow: visible !important;
+  margin: 0 auto !important;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+}
+
+:global(.member-form-dialog .el-dialog__header) {
+  display: none;
+}
+
+:global(.member-form-dialog .el-dialog__body) {
+  padding: 0 !important;
+  background: transparent !important;
+}
+
+.member-form-panel {
+  overflow: hidden;
+  border: 1px solid #dce5eb;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
+}
+
+.member-form-panel__header,
+.member-form-panel__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+}
+
+.member-form-panel__header {
+  border-bottom: 1px solid #e8edf1;
+}
+
+.member-form-panel__header h2 {
+  margin: 0;
+  color: #1e293b;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.member-form-panel__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: #718096;
+  cursor: pointer;
+}
+
+.member-form-panel__close:hover {
+  background: #f1f5f9;
+  color: #334155;
+}
+
+.member-form-panel__close svg {
+  width: 16px;
+  height: 16px;
+}
+
+.member-form-panel__body {
+  padding: 14px 14px 6px;
+}
+
+.member-form-panel__footer {
+  justify-content: flex-end;
+  gap: 8px;
+  border-top: 1px solid #e8edf1;
+  background: #fafbfc;
+}
+
 .time-text {
-  font-size: 12px;
+  font-size: 11px;
   color: #64748b;
 }
 
 .full-table { width: 100%; }
 
+:deep(.perm-page .el-input__wrapper),
+:deep(.perm-page .el-select__wrapper) {
+  min-height: 30px;
+}
+
+:deep(.perm-page .el-button) {
+  min-height: 28px;
+  padding: 5px 9px;
+  font-size: 12px;
+}
+
+:deep(.members-table .el-table__header-wrapper th.el-table__cell) {
+  padding: 6px 0;
+  font-size: 11px;
+}
+
+:deep(.members-table .el-table__body-wrapper td.el-table__cell) {
+  padding: 5px 0;
+  font-size: 12px;
+}
+
 /* ── 系统级权限：模块块 ── */
 .system-perm-container {
-  padding: 20px 28px;
+  padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: 8px;
+}
+
+.perm-body--system {
+  padding-bottom: 0;
+}
+
+.system-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  overflow: hidden;
+  border: 1px solid #dfe7f0;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
+}
+
+.system-stat-item {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 46px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 6px 12px;
+  border-left: 1px solid #edf1f6;
+}
+
+.system-stat-item:first-child {
+  border-left: 0;
+}
+
+.system-stat-item::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 2px;
+  background: #3b82f6;
+  content: "";
+}
+
+.system-stat-item--permissions::before {
+  background: #10b981;
+}
+
+.system-stat-item--pm::before {
+  background: #f59e0b;
+}
+
+.system-stat-label {
+  overflow: hidden;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.system-stat-value {
+  display: flex;
+  align-items: baseline;
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+.system-stat-value strong {
+  color: #172033;
+  font-size: 18px;
+  font-weight: 720;
+  line-height: 1;
+}
+
+.system-stat-value span {
+  color: #94a3b8;
+  font-size: 11px;
+}
+
+.system-permissions-card {
+  overflow: hidden;
+  background: #fff;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 
 .system-module-block {
   background: #fff;
-  border-radius: 12px;
-  padding: 16px 20px;
-  border: 1px solid #e2e8f0;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
-  transition: box-shadow 0.2s ease;
 }
 
-.system-module-block:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+.system-module-block + .system-module-block {
+  border-top: 1px solid #dbe4ee;
 }
 
 .system-module-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #f1f5f9;
+  gap: 9px;
+  min-height: 42px;
+  padding: 6px 12px;
+  border-bottom: 1px solid #e8edf3;
+  background: #fbfcfe;
 }
 
 .system-module-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 9px;
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
   background: linear-gradient(135deg, #eff6ff, #e0f2fe);
   color: #3b82f6;
   flex-shrink: 0;
@@ -1850,25 +2348,27 @@ onMounted(async () => {
 }
 
 .system-module-icon svg {
-  width: 17px;
-  height: 17px;
+  width: 14px;
+  height: 14px;
 }
 
 .system-module-info {
   display: flex;
-  flex-direction: column;
-  gap: 1px;
+  flex-direction: row;
+  align-items: baseline;
+  gap: 7px;
   flex: 1;
+  min-width: 0;
 }
 
 .system-module-title {
-  font-size: 14px;
-  font-weight: 600;
+  font-size: 13px;
+  font-weight: 650;
   color: #1a2332;
 }
 
 .system-module-count {
-  font-size: 12px;
+  font-size: 11px;
   color: #94a3b8;
 }
 
@@ -1876,47 +2376,74 @@ onMounted(async () => {
   flex-shrink: 0;
 }
 
+.system-module-roles-summary :deep(.el-tag) {
+  height: 20px;
+  padding: 0 7px;
+  font-size: 10.5px;
+}
+
 .system-perm-list {
   display: flex;
   flex-direction: column;
   gap: 0;
 }
 
+.system-perm-columns,
 .system-perm-row {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
+  grid-template-columns: minmax(240px, 1.2fr) minmax(240px, 1fr) minmax(180px, 0.8fr);
+  gap: 10px;
   align-items: center;
-  padding: 8px 10px;
-  border-radius: 7px;
-  transition: background 0.12s ease;
 }
 
-.system-perm-row--alt {
-  background: #fafbfc;
+.system-perm-columns {
+  min-height: 26px;
+  padding: 4px 12px;
+  border-bottom: 1px solid #e8edf3;
+  background: #f7f9fc;
+  color: #64748b;
+  font-size: 10.5px;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+}
+
+.system-perm-row {
+  min-height: 36px;
+  padding: 4px 12px;
+  border-bottom: 1px solid #edf1f5;
+  transition: background 0.14s ease;
+}
+
+.system-perm-row:last-child {
+  border-bottom: 0;
 }
 
 .system-perm-row:hover {
-  background: #f1f5f9;
+  background: #f3f7fb;
 }
 
 .system-perm-main {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 7px;
   min-width: 0;
   justify-self: start;
+  width: 100%;
 }
 
 .system-perm-action {
   flex-shrink: 0;
-  min-width: 42px;
+  min-width: 38px;
+  height: 20px;
+  padding: 0 6px;
   text-align: center;
-  font-size: 11px;
+  font-size: 10.5px;
 }
 
 .system-perm-desc {
-  font-size: 13px;
+  min-width: 0;
+  flex: 1;
+  font-size: 12px;
   color: #334155;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1932,69 +2459,125 @@ onMounted(async () => {
 }
 
 .role-chip {
-  font-size: 11px;
-}
-
-.system-stats {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
-  background: #fff;
-  border-radius: 10px;
-  border: 1px solid #e2e8f0;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-}
-
-.system-stat-item {
-  font-size: 13px;
-  color: #64748b;
-}
-
-.system-stat-item strong {
-  color: #1a2332;
-  font-weight: 700;
-  margin-right: 2px;
-}
-
-.system-stat-divider {
-  width: 1px;
-  height: 16px;
-  background: #e2e8f0;
+  height: 20px;
+  padding: 0 7px;
+  font-size: 10.5px;
 }
 
 .system-perm-table { width: 100%; }
 
 .perm-key {
+  display: block;
+  overflow: hidden;
+  max-width: 100%;
   justify-self: start;
   font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
-  font-size: 11px;
-  background: #f1f5f9;
-  padding: 2px 8px;
+  font-size: 10.5px;
+  background: #f4f7fa;
+  padding: 2px 6px;
   border-radius: 5px;
   color: #475569;
-  border: 1px solid #e2e8f0;
+  border: 1px solid #dfe7ef;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+@media (max-width: 920px) {
+  .system-perm-columns,
+  .system-perm-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .system-perm-columns {
+    display: none;
+  }
+
+  .system-perm-main {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .system-perm-roles {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  .perm-key {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+}
+
+@media (max-width: 620px) {
+  .system-perm-container {
+    padding: 0;
+  }
+
+  .system-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .system-stat-item {
+    min-height: 42px;
+    border-top: 1px solid #edf1f6;
+    border-left: 0;
+  }
+
+  .system-stat-item:first-child {
+    border-top: 0;
+  }
+
+  .system-module-header {
+    flex-wrap: wrap;
+  }
+
+  .system-module-roles-summary {
+    width: 100%;
+    padding-left: 46px;
+  }
+
+  .system-perm-row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 7px;
+    padding: 10px 12px;
+  }
+
+  .system-perm-main,
+  .system-perm-roles,
+  .perm-key {
+    grid-column: 1;
+    grid-row: auto;
+  }
+}
+
 /* ── 抽屉内部 ── */
 .drawer-tabs-shell {
   position: relative;
+  display: flex;
+  flex-direction: column;
   min-height: calc(100vh - 110px);
 }
 
-.drawer-tabs { padding-top: 4px; }
+.drawer-tabs {
+  flex: 1;
+  padding-top: 4px;
+}
 
 .drawer-tab-actions {
-  position: absolute;
-  right: 0;
-  top: 0;
+  position: sticky;
+  z-index: 4;
+  right: auto;
+  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  min-width: 160px;
-  height: 48px;
+  width: 100%;
+  min-height: 58px;
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid #e8edf2;
   background: #fff;
+  box-shadow: 0 -8px 18px rgba(255, 255, 255, 0.92);
 }
 
 .template-table {
@@ -2080,16 +2663,27 @@ onMounted(async () => {
 .role-sidebar-item {
   display: flex;
   align-items: center;
+  width: calc(100% - 12px);
   gap: 8px;
   padding: 10px 12px;
   cursor: pointer;
+  border: 1px solid transparent;
   border-radius: 10px;
   margin: 2px 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
   transition: all 0.15s ease;
 }
 
 .role-sidebar-item:hover { background: #f8fafc; }
 
+.role-sidebar-item:focus-visible {
+  outline: 3px solid rgba(59, 130, 246, 0.22);
+  outline-offset: -1px;
+}
+
 .role-sidebar-item.active {
   background: linear-gradient(135deg, #eff6ff, #e0f2fe);
   border: 1px solid #bfdbfe;
@@ -2158,10 +2752,34 @@ onMounted(async () => {
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
 }
 
+.role-editor-change-summary {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  padding: 0 10px;
+  color: #8795a3;
+  font-size: 11.5px;
+  font-weight: 600;
+}
+
+.role-editor-change-summary--dirty {
+  color: #315f7a;
+}
+
+.role-editor-change-summary--dirty span + span {
+  padding-left: 10px;
+  border-left: 1px solid #dbe4ea;
+}
+
 .role-editor-search {
   flex: 1;
 }
 
+.role-editor-scope {
+  flex-shrink: 0;
+}
+
 :deep(.role-editor-search .el-input__wrapper) {
   background: transparent;
   border-radius: 8px;
@@ -2183,7 +2801,7 @@ onMounted(async () => {
 .role-editor-module {
   background: #fff;
   border: 1px solid #e2e8f0;
-  border-radius: 14px;
+  border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
   transition: box-shadow 0.18s ease, border-color 0.18s ease;
@@ -2199,15 +2817,40 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   gap: 10px;
-  font-size: 14px;
+  justify-content: space-between;
+  font-size: 12px;
   font-weight: 700;
   color: #0f172a;
-  padding: 14px 18px 14px 22px;
+  padding: 8px 12px 8px 16px;
   background: linear-gradient(135deg, #f1f5ff 0%, #f8fafc 100%);
   border-bottom: 1px solid #e2e8f0;
   letter-spacing: 0.2px;
 }
 
+.role-editor-module-heading {
+  display: flex;
+  align-items: baseline;
+  gap: 9px;
+}
+
+.role-editor-module-heading > span:last-child {
+  color: #718294;
+  font-size: 10.5px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.role-editor-module-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.role-editor-module-actions :deep(.el-button + .el-button) {
+  margin-left: 2px;
+}
+
 .role-editor-module-header::before {
   content: "";
   position: absolute;
@@ -2223,7 +2866,7 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   gap: 2px;
-  padding: 8px 6px 6px;
+  padding: 4px;
 }
 
 .role-editor-collapse {
@@ -2236,7 +2879,7 @@ onMounted(async () => {
 }
 
 .role-editor-section-title {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   color: #1e293b;
   margin-right: 8px;
@@ -2256,17 +2899,28 @@ onMounted(async () => {
 
 .role-editor-section-summary {
   margin-left: auto;
-  margin-right: 14px;
-  font-size: 12px;
+  margin-right: 8px;
+  font-size: 10.5px;
   color: #64748b;
   font-weight: 500;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
 
+.role-editor-section-actions {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: 10px;
+}
+
+.role-editor-section-actions :deep(.el-button + .el-button) {
+  margin-left: 2px;
+}
+
 :deep(.role-editor-section .el-collapse-item__header) {
-  height: 46px;
-  padding: 0 18px;
+  height: 36px;
+  padding: 0 12px;
   background: #fff;
   border-bottom: 1px solid #f1f5f9;
   font-weight: 600;
@@ -2296,7 +2950,7 @@ onMounted(async () => {
 }
 
 :deep(.role-editor-section .el-collapse-item__content) {
-  padding: 4px 8px 10px;
+  padding: 2px 4px 5px;
   background: #fafbfc;
 }
 
@@ -2308,9 +2962,9 @@ onMounted(async () => {
 .role-editor-op-row {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 8px 10px;
-  border-radius: 8px;
+  gap: 7px;
+  padding: 5px 7px;
+  border-radius: 5px;
   transition: background 0.15s ease;
 }
 
@@ -2320,19 +2974,78 @@ onMounted(async () => {
 
 .op-action-tag {
   flex-shrink: 0;
-  width: 48px;
+  width: 42px;
   text-align: center;
   font-weight: 600;
   border-radius: 6px;
 }
 
 .op-desc {
-  font-size: 13px;
+  font-size: 12px;
   color: #1e293b;
 }
+
+@media (max-width: 720px) {
+  .role-editor-toolbar,
+  .role-editor-module-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .role-editor-change-summary {
+    justify-content: space-between;
+    padding: 7px 10px;
+    border-top: 1px solid #edf1f5;
+  }
+
+  .role-editor-module-actions {
+    justify-content: flex-end;
+  }
+
+  .role-editor-scope {
+    width: 100% !important;
+  }
+
+  .members-filter-bar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .members-filter-controls > * {
+    width: 100% !important;
+  }
+
+  .members-filter-result {
+    text-align: right;
+  }
+
+  .members-filter-meta {
+    align-items: flex-end;
+    flex-direction: column;
+  }
+}
 </style>
 
 <style>
+.project-selector-dropdown .el-select-dropdown__item {
+  color: #1f3954;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  font-variant-numeric: tabular-nums;
+}
+
+.project-selector-dropdown .el-select-dropdown__item.is-selected {
+  color: #123f63;
+  background: #f4f8fc;
+  font-weight: 600;
+}
+
+.project-selector-dropdown .el-select-dropdown__item.is-hovering {
+  background: #f1f6fa;
+}
+
 /* ══════════════════════════════════════
    权限依赖校验 Dialog
 ══════════════════════════════════════ */
diff --git a/frontend/src/views/admin/ProjectForm.vue b/frontend/src/views/admin/ProjectForm.vue
index a7a53ec9..9069354a 100644
--- a/frontend/src/views/admin/ProjectForm.vue
+++ b/frontend/src/views/admin/ProjectForm.vue
@@ -1,29 +1,12 @@
 <template>
   <el-dialog
-    append-to=".layout-main .content-wrapper"
+    append-to="body"
     :title="project ? TEXT.modules.adminProjects.editTitle : TEXT.modules.adminProjects.newTitle"
     width="560px"
     v-model="visibleProxy"
     :close-on-click-modal="false"
     class="project-form-dialog"
   >
-    <div class="form-header">
-      <div class="form-icon" :class="project ? 'icon--edit' : 'icon--new'">
-        <svg v-if="!project" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22">
-          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
-          <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
-        </svg>
-        <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="22" height="22">
-          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-        </svg>
-      </div>
-      <div class="form-header-text">
-        <span class="form-header-title">{{ project ? '编辑项目信息' : '创建新项目' }}</span>
-        <span class="form-header-desc">{{ project ? form.name || '修改项目基本信息' : '填写以下信息创建临床试验项目' }}</span>
-      </div>
-    </div>
-
     <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="project-form-body">
       <el-form-item :label="TEXT.common.fields.projectName" prop="name">
         <el-input v-model="form.name" :placeholder="TEXT.common.placeholders.input + TEXT.common.fields.projectName">
@@ -198,52 +181,6 @@ const onSubmit = async () => {
 </script>
 
 <style scoped>
-.form-header {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding-bottom: 18px;
-  margin-bottom: 18px;
-  border-bottom: 1px solid var(--ctms-border-color);
-}
-
-.form-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.form-icon.icon--new {
-  background: linear-gradient(135deg, #e8edf3, #d5dce5);
-  color: var(--ctms-primary);
-}
-
-.form-icon.icon--edit {
-  background: linear-gradient(135deg, var(--ctms-primary), var(--ctms-primary-active));
-  color: #fff;
-}
-
-.form-header-text {
-  display: flex;
-  flex-direction: column;
-}
-
-.form-header-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--ctms-text-main);
-}
-
-.form-header-desc {
-  font-size: 12px;
-  color: var(--ctms-text-secondary);
-  margin-top: 2px;
-}
-
 .project-form-body :deep(.el-form-item) {
   margin-bottom: 16px;
 }
diff --git a/frontend/src/views/admin/Projects.test.ts b/frontend/src/views/admin/Projects.test.ts
index 0c1ebfdb..76978d23 100644
--- a/frontend/src/views/admin/Projects.test.ts
+++ b/frontend/src/views/admin/Projects.test.ts
@@ -21,7 +21,7 @@ describe("project management access", () => {
     expect(layout).toContain('index="/admin/projects"');
     expect(router).toContain('name: "AdminProjects"');
     expect(router).toContain("meta: { title: TEXT.menu.projectManagement }");
-    expect(projects).toContain('v-if="isAdmin" type="primary"');
+    expect(projects).toContain('v-if="isAdmin" content="新增项目"');
     expect(projects).toContain('v-if="isAdmin && !scope.row.is_locked"');
     expect(projects).toContain('v-if="isAdmin" :content="TEXT.common.actions.delete"');
   });
@@ -91,12 +91,26 @@ describe("project management access", () => {
   it("keeps the project summary header compact", () => {
     const source = readProjects();
 
-    expect(source).toContain("padding: 10px 16px;");
-    expect(source).toContain("padding: 9px 12px;");
-    expect(source).toContain("width: 32px;");
-    expect(source).toContain("height: 32px;");
-    expect(source).toContain("font-size: 20px;");
-    expect(source).toContain("font-size: 11px;");
+    expect(source).toContain('class="project-overview"');
+    expect(source).toContain('class="create-project-button"');
+    expect(source).toContain("min-height: 48px;");
+    expect(source).toContain("width: 30px;");
+    expect(source).toContain("height: 30px;");
+    expect(source).toContain("font-size: 18px;");
+    expect(source).toContain("font-size: 10px;");
+    expect(source).toContain("content-wrapper:has(.projects-page)");
+  });
+
+  it("mounts the project form in a container shared by web and desktop layouts", () => {
+    const form = readFileSync(resolve(__dirname, "./ProjectForm.vue"), "utf8");
+    const desktopStyles = readFileSync(resolve(__dirname, "../../styles/main.css"), "utf8");
+
+    expect(form).toContain('append-to="body"');
+    expect(form).not.toContain('append-to=".layout-main .content-wrapper"');
+    expect(form).not.toContain('class="form-header"');
+    expect(form).not.toContain("填写以下信息创建临床试验项目");
+    expect(desktopStyles).toContain("body.is-desktop-runtime .project-form-dialog");
+    expect(desktopStyles).toContain("body.is-desktop-runtime .project-form-dialog .el-dialog__body");
   });
 
   it("renders project names as plain text and moves setup configuration to a gear action", () => {
diff --git a/frontend/src/views/admin/Projects.vue b/frontend/src/views/admin/Projects.vue
index 8f73a2bb..e6de2e8c 100644
--- a/frontend/src/views/admin/Projects.vue
+++ b/frontend/src/views/admin/Projects.vue
@@ -1,8 +1,17 @@
 <template>
-  <div class="page page--flush">
+  <div class="page page--flush projects-page">
     <div class="main-content-flat unified-shell">
-      <!-- 统计卡片 -->
-      <div class="stats-row">
+      <!-- 项目概览 -->
+      <section class="project-overview" aria-labelledby="project-overview-title">
+        <div class="overview-heading">
+          <div class="overview-title-wrap">
+            <h2 id="project-overview-title">项目概览</h2>
+          </div>
+          <el-tooltip v-if="isAdmin" content="新增项目" placement="left">
+            <el-button type="primary" :icon="Plus" circle class="create-project-button" aria-label="新增项目" @click="openCreate" />
+          </el-tooltip>
+        </div>
+        <div class="stats-row">
         <div class="stat-card stat-card--total">
           <div class="stat-icon">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
@@ -51,15 +60,8 @@
             <span class="stat-label">已锁定</span>
           </div>
         </div>
-      </div>
-
-      <!-- 操作栏 -->
-      <div class="unified-action-bar actions-only-bar">
-        <div class="filter-spacer"></div>
-        <el-button v-if="isAdmin" type="primary" :icon="Plus" @click="openCreate">
-          {{ TEXT.common.actions.add }}{{ TEXT.modules.adminProjects.projectLabel }}
-        </el-button>
-      </div>
+        </div>
+      </section>
 
       <!-- 项目表格 -->
       <div class="unified-section project-table-section">
@@ -372,31 +374,70 @@ onMounted(() => {
 </script>
 
 <style scoped>
+:global(.web-layout-container .content-wrapper:has(.projects-page)) {
+  padding: 0;
+}
+
+.project-overview {
+  padding: 0;
+  border-bottom: 1px solid var(--unified-shell-divider);
+  background: linear-gradient(180deg, var(--ctms-bg-card) 0%, color-mix(in srgb, var(--ctms-neutral-100) 55%, var(--ctms-bg-card)) 100%);
+}
+
+.overview-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 38px;
+  padding: 6px 16px;
+}
+
+.overview-title-wrap {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.overview-title-wrap h2 {
+  margin: 0;
+  color: var(--ctms-text-main);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.create-project-button {
+  width: 28px;
+  height: 28px;
+  min-height: 28px;
+  padding: 0;
+}
+
 .stats-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 10px;
-  padding: 10px 16px;
+  gap: 0;
+  border-top: 1px solid var(--unified-shell-divider);
+  background: var(--ctms-bg-card);
 }
 
 .stat-card {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 9px 12px;
-  border-radius: 10px;
-  background: var(--ctms-neutral-100);
-  transition: var(--ctms-transition);
+  min-height: 48px;
+  padding: 6px 14px;
+  background: transparent;
 }
 
-.stat-card:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--ctms-shadow-sm);
+.stat-card + .stat-card {
+  border-left: 1px solid var(--unified-shell-divider);
 }
 
 .stat-icon {
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   border-radius: 8px;
   display: flex;
   align-items: center;
@@ -405,8 +446,8 @@ onMounted(() => {
 }
 
 .stat-icon svg {
-  width: 18px;
-  height: 18px;
+  width: 17px;
+  height: 17px;
 }
 
 .stat-card--total .stat-icon { background: #e8edf3; color: var(--ctms-primary); }
@@ -420,28 +461,18 @@ onMounted(() => {
 }
 
 .stat-value {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 700;
   line-height: 1.2;
   color: var(--ctms-text-main);
 }
 
 .stat-label {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--ctms-text-secondary);
   margin-top: 2px;
 }
 
-.actions-only-bar {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.filter-spacer {
-  flex: 1;
-}
-
 /* 项目单元格 */
 .project-cell {
   display: flex;
@@ -545,14 +576,18 @@ onMounted(() => {
   gap: 4px;
   min-width: 252px;
   max-width: 100%;
+  padding: 1px 3px;
+  border-radius: 8px;
+  background: rgba(248, 250, 252, 0.72);
+  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
   white-space: nowrap;
 }
 
 .action-btn {
-  width: 28px;
-  height: 28px;
-  min-height: 28px;
-  font-size: 16px;
+  width: 26px;
+  height: 26px;
+  min-height: 26px;
+  font-size: 15px;
   padding: 0;
   margin: 0;
   border-radius: 6px;
@@ -575,7 +610,7 @@ onMounted(() => {
 
 /* 表格 */
 .project-table-section {
-  padding: 0;
+  padding: 0 !important;
   overflow: hidden;
 }
 
@@ -587,9 +622,28 @@ onMounted(() => {
   display: none;
 }
 
+.project-table :deep(th.el-table__cell) {
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
+.project-table :deep(td.el-table__cell) {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
 @media (max-width: 768px) {
   .stats-row {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  .stat-card:nth-child(3) {
+    border-left: 0;
+  }
+
+  .stat-card:nth-child(n + 3) {
+    border-top: 1px solid var(--unified-shell-divider);
+  }
+
 }
 </style>
diff --git a/frontend/src/views/admin/SystemMonitoringPage.desktop.test.ts b/frontend/src/views/admin/SystemMonitoringPage.desktop.test.ts
index 3eb2ac05..01fa97aa 100644
--- a/frontend/src/views/admin/SystemMonitoringPage.desktop.test.ts
+++ b/frontend/src/views/admin/SystemMonitoringPage.desktop.test.ts
@@ -12,8 +12,14 @@ describe("SystemMonitoringPage desktop shell", () => {
     expect(source).toContain('import { isTauriRuntime } from "@/runtime";');
     expect(source).toContain("const isDesktop = isTauriRuntime();");
     expect(source).toContain("system-monitoring-page--desktop");
+    expect(source).toContain("height: calc(100dvh - 52px);");
     expect(source).toContain("height: 100%;");
+    expect(source).toContain("content-wrapper:has(.system-monitoring-page)");
+    expect(source).toContain("height: calc(100dvh - 52px);");
+    expect(source).toContain("overflow: hidden;");
     expect(source).toContain(".overview-hero-card");
+    expect(source).toContain(":deep(.overview-hero-card > .metric-strip)");
+    expect(source).not.toContain(".system-monitoring-page--desktop :deep(.metric-strip)");
     expect(source).toContain(".access-logs .audit-filters");
   });
 });
diff --git a/frontend/src/views/admin/SystemMonitoringPage.vue b/frontend/src/views/admin/SystemMonitoringPage.vue
index 6e103ee4..0018222a 100644
--- a/frontend/src/views/admin/SystemMonitoringPage.vue
+++ b/frontend/src/views/admin/SystemMonitoringPage.vue
@@ -15,14 +15,22 @@ const isDesktop = isTauriRuntime();
 .system-monitoring-page {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 48px);
-  height: calc(100dvh - 48px);
+  height: calc(100vh - 52px);
+  height: calc(100dvh - 52px);
   min-height: 0;
-  margin: -6px -8px;
+  margin: 0;
   overflow: hidden;
   background: #f5f7fa;
 }
 
+:global(.web-layout-container .content-wrapper:has(.system-monitoring-page)) {
+  height: calc(100vh - 52px);
+  height: calc(100dvh - 52px);
+  min-height: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
 /*
  * DesktopLayout already reserves space for its title toolbar and workspace
  * tabs. Keep the shared monitoring view inside that remaining area instead
@@ -52,7 +60,7 @@ const isDesktop = isTauriRuntime();
     gap: 8px;
   }
 
-  .system-monitoring-page--desktop :deep(.metric-strip) {
+  .system-monitoring-page--desktop :deep(.overview-hero-card > .metric-strip) {
     flex-basis: 100%;
     order: 3;
     padding-top: 6px;
diff --git a/frontend/src/views/admin/UserForm.vue b/frontend/src/views/admin/UserForm.vue
index 97f928b2..fae62977 100644
--- a/frontend/src/views/admin/UserForm.vue
+++ b/frontend/src/views/admin/UserForm.vue
@@ -7,22 +7,6 @@
     :close-on-click-modal="false"
     class="user-form-dialog"
   >
-    <div class="form-header">
-      <div class="form-avatar" :class="user ? 'avatar--edit' : 'avatar--new'">
-        <svg v-if="!user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="24" height="24">
-          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
-          <circle cx="8.5" cy="7" r="4"/>
-          <line x1="20" y1="8" x2="20" y2="14"/>
-          <line x1="23" y1="11" x2="17" y2="11"/>
-        </svg>
-        <span v-else class="avatar-initials">{{ getInitials(form.full_name) }}</span>
-      </div>
-      <div class="form-header-text">
-        <span class="form-header-title">{{ user ? form.full_name || '编辑用户' : '创建新用户' }}</span>
-        <span class="form-header-desc">{{ user ? form.email : '填写以下信息创建系统账号' }}</span>
-      </div>
-    </div>
-
     <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" autocomplete="off" class="user-form-body">
       <el-form-item :label="TEXT.common.fields.email" prop="email">
         <el-input v-model="form.email" :disabled="!!user" autocomplete="off" :placeholder="TEXT.common.placeholders.input + TEXT.common.fields.email">
@@ -129,13 +113,6 @@ const form = reactive({
   is_active: true,
 });
 
-const getInitials = (name: string) => {
-  if (!name) return '?';
-  const parts = name.trim().split(/\s+/);
-  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
-  return name.slice(0, 2).toUpperCase();
-};
-
 const rules = reactive<FormRules>({
   email: [
     { required: true, message: requiredMessage(TEXT.common.fields.email), trigger: "blur" },
@@ -232,57 +209,6 @@ const onSubmit = async () => {
 </script>
 
 <style scoped>
-.form-header {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding-bottom: 18px;
-  margin-bottom: 18px;
-  border-bottom: 1px solid var(--ctms-border-color);
-}
-
-.form-avatar {
-  width: 48px;
-  height: 48px;
-  border-radius: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.form-avatar.avatar--new {
-  background: linear-gradient(135deg, #e8edf3, #d5dce5);
-  color: var(--ctms-primary);
-}
-
-.form-avatar.avatar--edit {
-  background: linear-gradient(135deg, var(--ctms-primary), var(--ctms-primary-active));
-  color: #fff;
-}
-
-.avatar-initials {
-  font-size: 16px;
-  font-weight: 700;
-}
-
-.form-header-text {
-  display: flex;
-  flex-direction: column;
-}
-
-.form-header-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--ctms-text-main);
-}
-
-.form-header-desc {
-  font-size: 12px;
-  color: var(--ctms-text-secondary);
-  margin-top: 2px;
-}
-
 .user-form-body :deep(.el-form-item) {
   margin-bottom: 16px;
 }
diff --git a/frontend/src/views/admin/Users.vue b/frontend/src/views/admin/Users.vue
index 4a5b98cb..20cffaeb 100644
--- a/frontend/src/views/admin/Users.vue
+++ b/frontend/src/views/admin/Users.vue
@@ -1,65 +1,77 @@
 <template>
-  <div class="page page--flush">
+  <div class="page page--flush users-page">
     <div class="main-content-flat unified-shell">
-      <!-- 统计卡片 -->
-      <div class="stats-row">
-        <div class="stat-card stat-card--total">
-          <div class="stat-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
-              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
-              <circle cx="9" cy="7" r="4"/>
-              <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
-              <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
-            </svg>
+      <!-- 独立状态概览 -->
+      <section class="account-overview" aria-labelledby="account-overview-title">
+        <div class="overview-heading">
+          <div>
+            <h2 id="account-overview-title">账号概览</h2>
           </div>
-          <div class="stat-body">
-            <span class="stat-value">{{ total }}</span>
-            <span class="stat-label">总用户</span>
+          <span class="overview-live"><i></i>状态汇总</span>
+        </div>
+        <div class="stats-row">
+          <div class="stat-card stat-card--total">
+            <div class="stat-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                <circle cx="9" cy="7" r="4"/>
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+              </svg>
+            </div>
+            <div class="stat-body">
+              <span class="stat-value">{{ allUsers.length }}</span>
+              <span class="stat-label">总用户</span>
+            </div>
+          </div>
+          <div class="stat-card stat-card--active">
+            <div class="stat-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                <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>
+            <div class="stat-body">
+              <span class="stat-value">{{ activeCount }}</span>
+              <span class="stat-label">{{ TEXT.enums.userStatus.ACTIVE }}</span>
+            </div>
+          </div>
+          <div class="stat-card stat-card--disabled">
+            <div class="stat-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                <circle cx="12" cy="12" r="10"/>
+                <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
+              </svg>
+            </div>
+            <div class="stat-body">
+              <span class="stat-value">{{ disabledCount }}</span>
+              <span class="stat-label">{{ TEXT.enums.userStatus.DISABLED }}</span>
+            </div>
+          </div>
+          <div class="stat-card stat-card--online">
+            <div class="stat-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                <path d="M5 12a7 7 0 0 1 14 0"/>
+                <path d="M8 12a4 4 0 0 1 8 0"/>
+                <circle cx="12" cy="16" r="1"/>
+              </svg>
+            </div>
+            <div class="stat-body">
+              <span class="stat-value">{{ onlineCount }}</span>
+              <span class="stat-label">当前在线</span>
+            </div>
           </div>
         </div>
-        <div class="stat-card stat-card--active">
-          <div class="stat-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
-              <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>
-          <div class="stat-body">
-            <span class="stat-value">{{ activeCount }}</span>
-            <span class="stat-label">{{ TEXT.enums.userStatus.ACTIVE }}</span>
-          </div>
-        </div>
-        <div class="stat-card stat-card--disabled">
-          <div class="stat-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
-              <circle cx="12" cy="12" r="10"/>
-              <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
-            </svg>
-          </div>
-          <div class="stat-body">
-            <span class="stat-value">{{ disabledCount }}</span>
-            <span class="stat-label">{{ TEXT.enums.userStatus.DISABLED }}</span>
-          </div>
-        </div>
-        <div class="stat-card stat-card--online">
-          <div class="stat-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
-              <path d="M5 12a7 7 0 0 1 14 0"/>
-              <path d="M8 12a4 4 0 0 1 8 0"/>
-              <circle cx="12" cy="16" r="1"/>
-            </svg>
-          </div>
-          <div class="stat-body">
-            <span class="stat-value">{{ onlineCount }}</span>
-            <span class="stat-label">当前在线</span>
-          </div>
-        </div>
-      </div>
+      </section>
 
       <!-- 筛选栏 -->
       <div class="filter-container unified-action-bar">
         <div class="filter-form">
-          <div class="filter-item-form">
+          <div class="filter-heading">
+            <el-icon><Filter /></el-icon>
+            <span>筛选</span>
+          </div>
+          <div class="filter-item-form filter-item-form--search">
             <el-input
               v-model="searchKeyword"
               :placeholder="TEXT.common.placeholders.keyword"
@@ -70,11 +82,19 @@
             />
           </div>
           <div class="filter-item-form">
-            <el-select v-model="statusFilter" :placeholder="TEXT.common.fields.status" style="width: 140px" clearable class="filter-select-comp" @change="applyFilters">
+            <el-select v-model="statusFilter" placeholder="账号状态" clearable class="filter-select-comp" @change="applyFilters">
               <el-option :label="TEXT.enums.userStatus.ACTIVE" value="ACTIVE" />
               <el-option :label="TEXT.enums.userStatus.DISABLED" value="DISABLED" />
             </el-select>
           </div>
+          <div class="filter-item-form">
+            <el-select v-model="loginStatusFilter" placeholder="登录状态" clearable class="filter-select-comp" @change="applyFilters">
+              <el-option label="在线" value="ONLINE" />
+              <el-option label="离线" value="OFFLINE" />
+            </el-select>
+          </div>
+          <el-button v-if="hasActiveFilters" text :icon="RefreshLeft" class="reset-filter-button" @click="resetFilters">重置筛选</el-button>
+          <span class="filter-result" aria-live="polite">{{ hasActiveFilters ? `筛选结果 ${total} 人` : `共 ${total} 人` }}</span>
           <div class="filter-spacer"></div>
           <el-button type="primary" :icon="Plus" @click="openCreate">{{ TEXT.common.actions.add }}{{ TEXT.modules.adminUsers.userLabel }}</el-button>
         </div>
@@ -93,11 +113,17 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column prop="clinical_department" :label="TEXT.modules.adminUsers.clinicalDepartmentLabel" min-width="120" show-overflow-tooltip />
-          <el-table-column :label="TEXT.common.fields.status" min-width="100">
+          <el-table-column prop="clinical_department" :label="TEXT.modules.adminUsers.clinicalDepartmentLabel" min-width="120" class-name="department-column" show-overflow-tooltip>
             <template #default="scope">
-              <span class="status-dot" :class="'dot--' + (scope.row.status || '').toLowerCase()"></span>
-              {{ statusLabel(scope.row.status) }}
+              <span class="department-text">{{ scope.row.clinical_department }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.common.fields.status" min-width="100" class-name="account-status-column">
+            <template #default="scope">
+              <div class="account-status-cell">
+                <span class="status-dot" :class="'dot--' + (scope.row.status || '').toLowerCase()"></span>
+                <span>{{ statusLabel(scope.row.status) }}</span>
+              </div>
             </template>
           </el-table-column>
           <el-table-column label="登录状态" min-width="140">
@@ -117,7 +143,7 @@
               </div>
             </template>
           </el-table-column>
-          <el-table-column :label="TEXT.common.labels.actions" align="center" width="168">
+          <el-table-column :label="TEXT.common.labels.actions" align="center" width="176" class-name="actions-column">
             <template #default="scope">
               <div class="action-row">
                 <el-tooltip content="登录记录" placement="top">
@@ -176,7 +202,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { Edit, Delete, Key, Lock, Unlock, Search, Plus, Clock } from "@element-plus/icons-vue";
+import { Edit, Delete, Key, Lock, Unlock, Search, Plus, Clock, RefreshLeft, Filter } from "@element-plus/icons-vue";
 import { fetchUsers, updateUser, deleteUser } from "../../api/users";
 import { fetchStudies } from "../../api/studies";
 import { listMembers } from "../../api/members";
@@ -199,6 +225,7 @@ const formVisible = ref(false);
 const resetVisible = ref(false);
 const searchKeyword = ref("");
 const statusFilter = ref("");
+const loginStatusFilter = ref("");
 const editingUser = ref<UserInfo | null>(null);
 const resetUser = ref<UserInfo | null>(null);
 const loginActivitiesUser = ref<UserInfo | null>(null);
@@ -209,6 +236,7 @@ let keywordSearchTimer: ReturnType<typeof setTimeout> | null = null;
 const activeCount = computed(() => allUsers.value.filter(u => u.status === 'ACTIVE').length);
 const disabledCount = computed(() => allUsers.value.filter(u => u.status === 'DISABLED').length);
 const onlineCount = computed(() => allUsers.value.filter(u => u.login_status === 'ONLINE').length);
+const hasActiveFilters = computed(() => Boolean(searchKeyword.value.trim() || statusFilter.value || loginStatusFilter.value));
 
 const statusLabel = (status: string) => {
   switch (status) {
@@ -236,6 +264,7 @@ const loadUsers = async () => {
         limit: pageSize.value,
         keyword: searchKeyword.value || undefined,
         status: statusFilter.value || undefined,
+        login_status: loginStatusFilter.value || undefined,
       }),
       fetchUsers({ skip: 0, limit: 10000 }),
     ]);
@@ -258,6 +287,13 @@ const applyFilters = () => {
   loadUsers();
 };
 
+const resetFilters = () => {
+  searchKeyword.value = "";
+  statusFilter.value = "";
+  loginStatusFilter.value = "";
+  applyFilters();
+};
+
 const clearKeywordSearchTimer = () => {
   if (!keywordSearchTimer) return;
   clearTimeout(keywordSearchTimer);
@@ -275,7 +311,7 @@ const scheduleKeywordSearch = () => {
 
 watch(searchKeyword, () => {
   scheduleKeywordSearch();
-});
+}, { flush: "sync" });
 
 const onPageSizeChange = (size: number) => {
   pageSize.value = size;
@@ -406,32 +442,85 @@ onBeforeUnmount(() => {
   max-width: 100%;
 }
 
+:global(.web-layout-container .content-wrapper:has(.users-page)) {
+  padding: 0;
+}
+
+.account-overview {
+  padding: 0;
+  border-bottom: 1px solid var(--unified-shell-divider);
+  background: linear-gradient(180deg, var(--ctms-bg-card) 0%, color-mix(in srgb, var(--ctms-neutral-100) 55%, var(--ctms-bg-card)) 100%);
+}
+
+.overview-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 0;
+  padding: 8px 16px 6px;
+}
+
+.overview-heading h2 {
+  margin: 0;
+  color: var(--ctms-text-main);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.overview-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  border: 1px solid rgba(34, 166, 99, 0.18);
+  border-radius: 999px;
+  background: rgba(34, 166, 99, 0.07);
+  color: #188454;
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.overview-live i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #22a663;
+  box-shadow: 0 0 0 3px rgba(34, 166, 99, 0.12);
+}
+
 .stats-row {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 10px;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--unified-shell-divider);
+  gap: 0;
+  overflow: hidden;
+  border-top: 1px solid var(--unified-shell-divider);
+  border-right: 0;
+  border-bottom: 0;
+  border-left: 0;
+  border-radius: 0;
+  background: var(--ctms-bg-card);
+  box-shadow: none;
 }
 
 .stat-card {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 9px 12px;
-  border-radius: 10px;
-  background: var(--ctms-neutral-100);
-  transition: var(--ctms-transition);
+  min-height: 48px;
+  padding: 6px 14px;
+  background: transparent;
+  width: 100%;
 }
 
-.stat-card:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--ctms-shadow-sm);
+.stat-card + .stat-card {
+  border-left: 1px solid var(--unified-shell-divider);
 }
 
 .stat-icon {
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   border-radius: 8px;
   display: flex;
   align-items: center;
@@ -440,8 +529,8 @@ onBeforeUnmount(() => {
 }
 
 .stat-icon svg {
-  width: 18px;
-  height: 18px;
+  width: 17px;
+  height: 17px;
 }
 
 .stat-card--total .stat-icon {
@@ -470,19 +559,28 @@ onBeforeUnmount(() => {
 }
 
 .stat-value {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 700;
   line-height: 1.2;
   color: var(--ctms-text-main);
 }
 
 .stat-label {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--ctms-text-secondary);
   margin-top: 2px;
 }
 
 /* 筛选栏 */
+.filter-container {
+  position: sticky;
+  top: 0;
+  z-index: 8;
+  background: color-mix(in srgb, var(--ctms-bg-card) 94%, transparent);
+  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.05);
+  backdrop-filter: blur(12px);
+}
+
 .filter-form {
   display: flex;
   width: 100%;
@@ -492,17 +590,55 @@ onBeforeUnmount(() => {
   flex-wrap: wrap;
 }
 
+.filter-heading {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--ctms-text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
 .filter-item-form {
   margin-bottom: 0 !important;
   margin-right: 0 !important;
   min-width: 0;
 }
 
+.filter-item-form--search {
+  flex: 0 1 320px;
+}
+
 .filter-input-comp {
-  width: 220px;
+  width: 100%;
   max-width: 100%;
 }
 
+.filter-form :deep(.el-input__inner),
+.filter-form :deep(.el-select__placeholder),
+.filter-form :deep(.el-select__selected-item) {
+  font-size: 12px;
+}
+
+.filter-form :deep(.el-button) {
+  font-size: 12px;
+}
+
+.filter-select-comp {
+  width: 140px;
+}
+
+.reset-filter-button {
+  color: var(--ctms-text-secondary);
+}
+
+.filter-result {
+  color: var(--ctms-text-secondary);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
 .filter-spacer {
   flex: 1;
   min-width: 0;
@@ -522,7 +658,7 @@ onBeforeUnmount(() => {
 
 .user-name {
   font-weight: 600;
-  font-size: 13px;
+  font-size: 12px;
   color: var(--ctms-text-main);
   white-space: nowrap;
   overflow: hidden;
@@ -530,13 +666,26 @@ onBeforeUnmount(() => {
 }
 
 .user-email {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--ctms-text-secondary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.department-text,
+.account-status-cell {
+  color: var(--ctms-text-main);
+  font-size: 12px;
+  line-height: 1.25;
+}
+
+.account-status-cell {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
 /* 状态点 */
 .status-dot {
   display: inline-block;
@@ -574,15 +723,15 @@ onBeforeUnmount(() => {
   align-items: center;
   column-gap: 6px;
   color: var(--ctms-text-main);
-  font-size: 12px;
+  font-size: 11px;
 }
 
 .login-status-cell small,
 .login-time-cell small {
   grid-column: 2;
-  margin-top: 2px;
+  margin-top: 0;
   color: var(--ctms-text-secondary);
-  font-size: 11px;
+  font-size: 10px;
 }
 
 .login-time-cell {
@@ -605,7 +754,7 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
   gap: 4px;
-  padding: 2px;
+  padding: 1px;
   border-radius: 8px;
   background: rgba(248, 250, 252, 0.72);
   box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
@@ -613,9 +762,9 @@ onBeforeUnmount(() => {
 }
 
 .action-btn {
-  width: 28px;
-  height: 28px;
-  min-height: 28px;
+  width: 26px;
+  height: 26px;
+  min-height: 26px;
   padding: 0;
   margin: 0;
   border-radius: 7px;
@@ -629,6 +778,13 @@ onBeforeUnmount(() => {
   margin-left: 0;
 }
 
+.user-table :deep(td.actions-column .cell) {
+  padding-right: 6px;
+  padding-left: 6px;
+  overflow: visible;
+  text-overflow: clip;
+}
+
 .action-row :deep(.el-button .el-icon) {
   width: 15px;
   height: 15px;
@@ -648,7 +804,7 @@ onBeforeUnmount(() => {
 
 /* 表格区域 */
 .user-table-section {
-  padding: 0;
+  padding: 0 !important;
   max-width: 100%;
   overflow-x: hidden;
 }
@@ -662,13 +818,17 @@ onBeforeUnmount(() => {
 }
 
 .user-table :deep(th.el-table__cell) {
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-top: 7px;
+  padding-bottom: 7px;
 }
 
 .user-table :deep(td.el-table__cell) {
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.user-table :deep(.cell) {
+  line-height: 1.25;
 }
 
 .pagination-wrap {
@@ -692,8 +852,36 @@ onBeforeUnmount(() => {
     grid-template-columns: repeat(2, 1fr);
   }
 
+  .stat-card:nth-child(3) {
+    border-left: 0;
+  }
+
+  .stat-card:nth-child(n + 3) {
+    border-top: 1px solid var(--unified-shell-divider);
+  }
+
+  .filter-heading {
+    width: 100%;
+  }
+
   .filter-spacer {
     display: none;
   }
+
+  .filter-item-form--search {
+    flex: 1 1 100%;
+  }
+
+  .filter-select-comp {
+    width: 100%;
+  }
+
+  .filter-item-form:not(.filter-item-form--search) {
+    flex: 1 1 calc(50% - 5px);
+  }
+
+  .filter-form > .el-button--primary {
+    width: 100%;
+  }
 }
 </style>
diff --git a/frontend/src/views/admin/UsersLoginStatus.test.ts b/frontend/src/views/admin/UsersLoginStatus.test.ts
index 788a78ab..0f367342 100644
--- a/frontend/src/views/admin/UsersLoginStatus.test.ts
+++ b/frontend/src/views/admin/UsersLoginStatus.test.ts
@@ -19,6 +19,27 @@ describe("admin user login status", () => {
     expect(drawer).not.toContain("access_token");
   });
 
+  it("offers responsive account and login-status filters with clear reset feedback", () => {
+    const users = readSource("./Users.vue");
+
+    expect(users).toContain('placeholder="账号状态"');
+    expect(users).toContain('placeholder="登录状态"');
+    expect(users).toContain('login_status: loginStatusFilter.value || undefined');
+    expect(users).toContain('class="account-overview"');
+    expect(users).toContain("position: sticky");
+    expect(users).not.toContain("filterByStat");
+    expect(users).not.toContain("账号与登录会话状态");
+    expect(users).toContain("min-height: 48px");
+    expect(users).toContain('class-name="actions-column"');
+    expect(users).toContain("text-overflow: clip");
+    expect(users).toContain(".department-text,\n.account-status-cell");
+    expect(users).toContain("padding: 0 !important;");
+    expect(users).toContain("border-radius: 0;");
+    expect(users).toContain("content-wrapper:has(.users-page)");
+    expect(users).toContain("resetFilters");
+    expect(users).toContain("筛选结果");
+  });
+
   it("mounts account edit and emergency-reset dialogs to a container shared by web and desktop layouts", () => {
     const userForm = readSource("./UserForm.vue");
     const resetPassword = readSource("./UserResetPassword.vue");
@@ -27,6 +48,8 @@ describe("admin user login status", () => {
     expect(resetPassword).toContain('append-to="body"');
     expect(userForm).not.toContain('append-to=".layout-main .content-wrapper"');
     expect(resetPassword).not.toContain('append-to=".layout-main .content-wrapper"');
+    expect(userForm).not.toContain('class="form-header"');
+    expect(userForm).not.toContain("填写以下信息创建系统账号");
   });
 
   it("uses the desktop dialog treatment without an additional outer card for account actions", () => {