From 6d682103f34d01c1d878dd26851c453a29c7b5a0 Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Wed, 20 May 2026 16:53:36 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E6=80=BB=E8=A7=88=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2UI=E7=BE=8E=E5=8C=96=E4=B8=8E=E5=85=A5=E7=BB=84?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构总览页面布局：卡片化设计、顶部标题栏、图标装饰
- 美化进度时间线：hover高亮、呼吸动画、渐变连接线
- 重写入组图表：去除边框、虚线网格、渐变柱子、柔和背景
- 修复入组统计：同时匹配enrollment_date和ENROLLED状态
- 移除adapter中hasEnrollmentStage过滤，显示真实入组数

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 backend/app/crud/overview.py                  |  47 ++--
 frontend/src/views/admin/ProjectDetail.vue    |  25 ++-
 frontend/src/views/ia/ProjectOverview.vue     | 206 ++++++++++++++----
 .../ia/project-overview/CenterProgressRow.vue |  30 +--
 .../project-overview/EnrollmentBarChart.vue   | 192 +++++++---------
 .../views/ia/project-overview/StageNode.vue   |  22 +-
 .../ia/project-overview/overview.adapter.ts   |   3 +-
 7 files changed, 323 insertions(+), 202 deletions(-)

diff --git a/backend/app/crud/overview.py b/backend/app/crud/overview.py
index e2e5ff19..217c1d22 100644
--- a/backend/app/crud/overview.py
+++ b/backend/app/crud/overview.py
@@ -3,7 +3,7 @@ import uuid
 from datetime import datetime
 from typing import Dict, List, Tuple
 
-from sqlalchemy import func, select, and_
+from sqlalchemy import Date, cast, func, select, and_, or_
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.models.site import Site
@@ -86,20 +86,18 @@ async def get_project_overview(db: AsyncSession, study_id: uuid.UUID) -> Dict:
             startup_status = "NOT_STARTED"
         startup_completed = kickoff.get("kickoff_date") if contract_status == "COMPLETED" else None
         
-        # 入组状态 - 依赖启动会完成
+        # 入组状态
         enrollment = enrollment_data.get(site_id_str, {"actual": 0})
         enrollment_actual = enrollment["actual"]
         enrollment_target = site.enrollment_target or 0
-        
-        if startup_status == "COMPLETED":
-            if enrollment_actual >= enrollment_target and enrollment_target > 0:
-                enrollment_status = "COMPLETED"
-            elif enrollment_actual > 0:
-                enrollment_status = "IN_PROGRESS"
-            else:
-                enrollment_status = "NOT_STARTED"
+
+        if enrollment_actual >= enrollment_target and enrollment_target > 0:
+            enrollment_status = "COMPLETED"
+        elif enrollment_actual > 0:
+            enrollment_status = "IN_PROGRESS"
+        elif startup_status == "COMPLETED":
+            enrollment_status = "NOT_STARTED"
         else:
-            # 启动会未完成,入组强制为未开始
             enrollment_status = "NOT_STARTED"
         
         # 检查状态 - 依赖入组完成
@@ -265,35 +263,44 @@ async def _get_enrollment_data(db: AsyncSession, study_id: uuid.UUID, site_ids:
         and_(
             Subject.study_id == study_id,
             Subject.site_id.in_(site_ids),
-            Subject.enrollment_date.isnot(None)
+            or_(
+                Subject.enrollment_date.isnot(None),
+                Subject.status == "ENROLLED"
+            )
         )
     ).group_by(Subject.site_id)
-    
+
     result = await db.execute(stmt)
     rows = result.all()
-    
+
     data = {}
     for row in rows:
         data[str(row.site_id)] = {"actual": row.count}
-    
+
     return data
 
 
 async def _get_monthly_enrollment(db: AsyncSession, study_id: uuid.UUID) -> List[Dict]:
     """获取月度入组统计"""
-    month_col = func.to_char(Subject.enrollment_date, 'YYYY-MM').label("month")
-    
+    month_col = func.to_char(
+        func.coalesce(Subject.enrollment_date, func.cast(Subject.created_at, Date)),
+        'YYYY-MM'
+    ).label("month")
+
     stmt = select(
         month_col,
         func.count(Subject.id).label("count")
     ).where(
         and_(
             Subject.study_id == study_id,
-            Subject.enrollment_date.isnot(None)
+            or_(
+                Subject.enrollment_date.isnot(None),
+                Subject.status == "ENROLLED"
+            )
         )
     ).group_by(month_col).order_by(month_col)
-    
+
     result = await db.execute(stmt)
     rows = result.all()
-    
+
     return [{"month": row.month, "count": row.count} for row in rows]
diff --git a/frontend/src/views/admin/ProjectDetail.vue b/frontend/src/views/admin/ProjectDetail.vue
index 671c1333..ae798141 100644
--- a/frontend/src/views/admin/ProjectDetail.vue
+++ b/frontend/src/views/admin/ProjectDetail.vue
@@ -7099,30 +7099,31 @@ onBeforeUnmount(() => {
 .setup-content-step-nav {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 
 .setup-content-step-nav :deep(.el-button.is-circle) {
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
   padding: 0;
-  background: transparent !important;
-  border: 1px solid #e2e8f0 !important;
-  color: #64748b !important;
+  background: #f1f5f9 !important;
+  border: 1.5px solid #cbd5e1 !important;
+  color: #475569 !important;
+  font-size: 14px;
   transition: all 0.2s;
 }
 
 .setup-content-step-nav :deep(.el-button.is-circle:hover) {
-  background: #f8fafc !important;
-  border-color: #cbd5e1 !important;
-  color: #3b82f6 !important;
+  background: #e2e8f0 !important;
+  border-color: #94a3b8 !important;
+  color: #1e40af !important;
 }
 
 .setup-content-step-nav :deep(.el-button.is-circle.is-disabled),
 .setup-content-step-nav :deep(.el-button.is-circle.is-disabled:hover) {
-  background: transparent !important;
-  border-color: #f1f5f9 !important;
-  color: #e2e8f0 !important;
+  background: #f8fafc !important;
+  border-color: #e2e8f0 !important;
+  color: #cbd5e1 !important;
   cursor: not-allowed;
 }
 
diff --git a/frontend/src/views/ia/ProjectOverview.vue b/frontend/src/views/ia/ProjectOverview.vue
index c8991d62..75cc6bab 100644
--- a/frontend/src/views/ia/ProjectOverview.vue
+++ b/frontend/src/views/ia/ProjectOverview.vue
@@ -1,14 +1,31 @@
 <template>
   <div class="page ctms-page-shell page--flush">
     <div v-if="study.currentStudy" class="page-body">
-      <div class="unified-shell ctms-table-card">
-        <section class="unified-section">
-          <div class="overview-meta-inline">
-            <div class="updated-at">更新：{{ updatedAtLabel }}</div>
-            <el-button size="small" @click="loadOverview">刷新</el-button>
+      <div class="overview-container">
+        <div class="overview-top-bar">
+          <div class="overview-top-left">
+            <span class="overview-top-icon">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+            </span>
+            <span class="overview-top-title">项目总览</span>
           </div>
+          <div class="overview-top-right">
+            <span class="overview-updated-label">更新于 {{ updatedAtLabel }}</span>
+            <el-button size="small" @click="loadOverview" class="refresh-btn">
+              <template #icon>
+                <el-icon><Refresh /></el-icon>
+              </template>
+              刷新
+            </el-button>
+          </div>
+        </div>
+
+        <section class="overview-card">
           <div class="card-header">
-            <div>
+            <div class="card-header-left">
+              <span class="card-icon card-icon--progress">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
+              </span>
               <div class="card-title">中心整体进度</div>
             </div>
             <div class="progress-legend">
@@ -21,6 +38,9 @@
           <StateLoading v-if="loading" :rows="6" />
           <div v-else-if="centers.length === 0" class="overview-empty-panel">
             <div class="overview-empty-content">
+              <div class="overview-empty-icon">
+                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.4"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+              </div>
               <div class="overview-empty-title">中心整体进度暂未生成</div>
               <div class="overview-empty-desc">当前项目未配置中心，或尚未形成可展示的中心进度数据。</div>
             </div>
@@ -34,12 +54,15 @@
           </div>
         </section>
 
-        <section class="unified-section">
+        <section class="overview-card">
           <div class="card-header">
-            <div>
-              <div class="card-title">入组进度</div>
-              <div class="card-subtitle">
-                {{ enrollmentSummary }}
+            <div class="card-header-left">
+              <span class="card-icon card-icon--enrollment">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
+              </span>
+              <div>
+                <div class="card-title">入组进度</div>
+                <div class="card-subtitle">{{ enrollmentSummary }}</div>
               </div>
             </div>
             <el-radio-group v-model="chartMode" size="small" class="mode-switch">
@@ -62,6 +85,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
+import { Refresh } from "@element-plus/icons-vue";
 import { useStudyStore } from "../../store/study";
 import { TEXT } from "../../locales";
 import { displayDateTime } from "../../utils/display";
@@ -197,25 +221,78 @@ watch(
 .page {
   display: flex;
   flex-direction: column;
-  gap: 0;
 }
 
 .page-body {
   display: flex;
   flex-direction: column;
-  gap: 0;
 }
 
-.updated-at {
-  white-space: nowrap;
-}
-
-.overview-meta-inline {
+.overview-container {
+  padding: 24px 28px 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.overview-top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.overview-top-left {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
   gap: 10px;
-  margin-bottom: 10px;
+}
+
+.overview-top-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--ctms-primary), var(--ctms-primary-hover));
+  color: #ffffff;
+}
+
+.overview-top-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--ctms-text-main);
+  letter-spacing: -0.01em;
+}
+
+.overview-top-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.overview-updated-label {
+  font-size: 13px;
+  color: var(--ctms-text-secondary);
+}
+
+.refresh-btn {
+  border-radius: 8px;
+}
+
+.overview-card {
+  background: var(--ctms-bg-card);
+  border: 1px solid var(--ctms-border-color);
+  border-radius: var(--ctms-radius-lg);
+  padding: 20px 24px;
+  transition: var(--ctms-transition);
+  box-shadow: var(--ctms-shadow-sm);
+}
+
+.overview-card:hover {
+  box-shadow: var(--ctms-shadow);
+  border-color: var(--ctms-border-color-hover);
 }
 
 .card-header {
@@ -224,24 +301,51 @@ watch(
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+
+.card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.card-icon--progress {
+  background: rgba(63, 143, 107, 0.1);
+  color: var(--ctms-success);
+}
+
+.card-icon--enrollment {
+  background: rgba(63, 93, 117, 0.1);
+  color: var(--ctms-primary);
 }
 
 .card-title {
   font-size: 15px;
   font-weight: 700;
-  color: #0f2345;
+  color: var(--ctms-text-main);
 }
 
 .card-subtitle {
   font-size: 12px;
   color: var(--ctms-text-secondary);
-  margin-top: 4px;
+  margin-top: 2px;
 }
 
 .progress-legend {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 14px;
   font-size: 12px;
   color: var(--ctms-text-secondary);
 }
@@ -282,7 +386,7 @@ watch(
 .progress-list {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 0;
 }
 
 .overview-empty-panel {
@@ -290,11 +394,9 @@ watch(
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 6px;
-  padding: 24px;
-  border-radius: 18px;
-  background:
-    linear-gradient(180deg, rgba(246, 249, 253, 0.96), rgba(251, 253, 255, 0.98));
+  padding: 32px 24px;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
 }
 
 .overview-empty-content {
@@ -302,25 +404,51 @@ watch(
   text-align: center;
 }
 
+.overview-empty-icon {
+  margin-bottom: 12px;
+  color: var(--ctms-text-disabled);
+}
+
 .overview-empty-title {
-  font-size: 18px;
-  font-weight: 700;
-  letter-spacing: 0.01em;
-  color: #243a5a;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ctms-text-regular);
 }
 
 .overview-empty-desc {
-  margin-top: 10px;
-  font-size: 14px;
+  margin-top: 8px;
+  font-size: 13px;
   line-height: 1.7;
-  color: #8a97ab;
+  color: var(--ctms-text-secondary);
 }
 
 .mode-switch :deep(.el-radio-button__inner) {
-  padding: 4px 12px;
+  padding: 5px 14px;
+  border-radius: 6px;
 }
 
-@media (max-width: 1024px) {
-  
+.mode-switch :deep(.el-radio-group) {
+  border-radius: 8px;
+}
+
+@media (max-width: 768px) {
+  .overview-container {
+    padding: 16px;
+  }
+
+  .overview-card {
+    padding: 16px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .overview-top-bar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
 }
 </style>
diff --git a/frontend/src/views/ia/project-overview/CenterProgressRow.vue b/frontend/src/views/ia/project-overview/CenterProgressRow.vue
index 8264c692..828edfe4 100644
--- a/frontend/src/views/ia/project-overview/CenterProgressRow.vue
+++ b/frontend/src/views/ia/project-overview/CenterProgressRow.vue
@@ -56,12 +56,14 @@ const connectorClass = (status: StageStatus) => `connector-${status.toLowerCase(
   display: grid;
   grid-template-columns: 180px 1fr;
   gap: 16px;
-  padding: 14px 0;
-  border-bottom: 1px dashed var(--ctms-border-color);
+  padding: 14px 16px;
+  border-radius: 10px;
+  margin: 2px 0;
+  transition: background-color 0.2s ease;
 }
 
-.center-row:last-child {
-  border-bottom: none;
+.center-row:hover {
+  background-color: var(--ctms-neutral-100);
 }
 
 .center-meta {
@@ -87,9 +89,10 @@ const connectorClass = (status: StageStatus) => `connector-${status.toLowerCase(
 .enrollment-label {
   padding: 2px 8px;
   border-radius: 999px;
-  background-color: var(--ctms-bg-muted);
-  color: var(--ctms-text-secondary);
+  background-color: rgba(63, 93, 117, 0.08);
+  color: var(--ctms-primary);
   font-weight: 600;
+  font-size: 11px;
 }
 
 .center-timeline {
@@ -130,10 +133,10 @@ const connectorClass = (status: StageStatus) => `connector-${status.toLowerCase(
   position: absolute;
   right: -2px;
   top: 50%;
-  width: 6px;
-  height: 6px;
-  border-top: 2px solid var(--ctms-border-color);
-  border-right: 2px solid var(--ctms-border-color);
+  width: 5px;
+  height: 5px;
+  border-top: 1.5px solid var(--ctms-border-color);
+  border-right: 1.5px solid var(--ctms-border-color);
   transform: translateY(-50%) rotate(45deg);
 }
 
@@ -142,7 +145,7 @@ const connectorClass = (status: StageStatus) => `connector-${status.toLowerCase(
 }
 
 .connector-in_progress {
-  background-color: var(--ctms-primary);
+  background: linear-gradient(90deg, var(--ctms-primary), rgba(63, 93, 117, 0.3));
 }
 
 .connector-blocked {
@@ -177,7 +180,8 @@ const connectorClass = (status: StageStatus) => `connector-${status.toLowerCase(
 }
 
 .row-inactive {
-  background-color: #fff7d6;
+  background-color: rgba(255, 247, 214, 0.5);
+  border: 1px dashed rgba(197, 139, 42, 0.3);
 }
 
 .row-inactive .center-name {
@@ -186,6 +190,6 @@ const connectorClass = (status: StageStatus) => `connector-${status.toLowerCase(
 
 .row-inactive .stage-connector,
 .row-inactive .center-timeline {
-  opacity: 0.6;
+  opacity: 0.5;
 }
 </style>
diff --git a/frontend/src/views/ia/project-overview/EnrollmentBarChart.vue b/frontend/src/views/ia/project-overview/EnrollmentBarChart.vue
index fa3b1191..a900e54a 100644
--- a/frontend/src/views/ia/project-overview/EnrollmentBarChart.vue
+++ b/frontend/src/views/ia/project-overview/EnrollmentBarChart.vue
@@ -12,78 +12,68 @@
         <div class="chart-plot">
           <svg class="chart-svg" :viewBox="`0 0 ${chartWidth} ${chartHeight}`" preserveAspectRatio="xMidYMid meet">
             <defs>
-              <linearGradient :id="gradientId" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stop-color="#f1f5f9" />
-                <stop offset="100%" stop-color="#e2e8f0" />
+              <linearGradient :id="gradientTargetId" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="#e8edf3" />
+                <stop offset="100%" stop-color="#f1f5f9" />
+              </linearGradient>
+              <linearGradient :id="gradientActualId" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="#4a7c9b" />
+                <stop offset="100%" stop-color="#3f5d75" />
               </linearGradient>
-              <filter :id="shadowId" x="-20%" y="-20%" width="140%" height="160%">
-                <feDropShadow dx="0" dy="8" stdDeviation="6" flood-color="#3f5d75" flood-opacity="0.18" />
-              </filter>
             </defs>
-            <rect
-              class="chart-frame"
-              x="0.5"
-              :y="frameTop"
-              :width="chartWidth - 1"
-              :height="frameHeight"
-              rx="12"
-            />
-            <g class="chart-axis">
+            <!-- Horizontal grid lines -->
+            <g class="chart-grid">
               <line
-                class="axis-line"
+                v-for="tick in yTicks"
+                :key="`grid-${tick.value}`"
+                class="grid-line"
                 :x1="axisLeft"
-                :y1="axisTop"
-                :x2="axisLeft"
-                :y2="axisBottom"
-              />
-              <line
-                class="axis-line"
-                :x1="axisLeft"
-                :y1="axisBottom"
+                :y1="tickY(tick.value)"
                 :x2="axisRight"
-                :y2="axisBottom"
+                :y2="tickY(tick.value)"
               />
-              <g v-for="tick in yTicks" :key="`${tick.value}-${tick.minor ? 'm' : 'M'}`" class="axis-tick">
-                <text :x="axisLeft - 12" :y="tickY(tick.value)" class="tick-label">
+            </g>
+            <!-- Y axis labels -->
+            <g class="chart-axis">
+              <g v-for="tick in yTicks" :key="`tick-${tick.value}`" class="axis-tick">
+                <text :x="axisLeft - 14" :y="tickY(tick.value)" class="tick-label">
                   {{ formatNumber(tick.value) }}
                 </text>
-                <line
-                  class="tick-line"
-                  :class="{ minor: tick.minor }"
-                  :x1="axisLeft - 8"
-                  :y1="tickY(tick.value)"
-                  :x2="axisLeft"
-                  :y2="tickY(tick.value)"
-                />
               </g>
             </g>
+            <!-- Bars -->
             <g class="chart-bars">
               <g v-for="(item, index) in items" :key="item.key" class="bar-group">
-                <title>{{ item.label }}</title>
+                <title>{{ item.label }}: {{ item.actual }}{{ showTarget ? ` / ${item.target}` : '' }}</title>
+                <!-- Target bar (background) -->
                 <rect
-                  v-if="showTarget"
+                  v-if="showTarget && (item.target || 0) > 0"
                   class="bar-target"
                   :x="barLeft(index)"
                   :y="barTop(item.target || 0)"
                   :width="barWidth"
                   :height="barHeight(item.target || 0)"
-                  rx="8"
-                  :fill="`url(#${gradientId})`"
+                  :rx="barRadius"
+                  :fill="`url(#${gradientTargetId})`"
                 />
+                <!-- Actual bar -->
                 <rect
+                  v-if="item.actual > 0"
                   class="bar-actual"
                   :x="barLeft(index)"
                   :y="barTop(item.actual)"
                   :width="barWidth"
                   :height="barHeight(item.actual)"
-                  rx="8"
-                  :filter="`url(#${shadowId})`"
+                  :rx="barRadius"
+                  :fill="`url(#${gradientActualId})`"
                 />
+                <!-- Value label -->
                 <text :x="barCenter(index)" :y="valueY(item)" class="bar-value">
                   <tspan class="bar-value-actual">{{ formatNumber(item.actual) }}</tspan>
-                  <tspan v-if="showTarget" class="bar-value-divider" dx="4">/</tspan>
-                  <tspan v-if="showTarget" class="bar-value-target" dx="4">{{ formatNumber(item.target || 0) }}</tspan>
+                  <tspan v-if="showTarget" class="bar-value-divider" dx="3">/</tspan>
+                  <tspan v-if="showTarget" class="bar-value-target" dx="3">{{ formatNumber(item.target || 0) }}</tspan>
                 </text>
+                <!-- X axis label -->
                 <text :x="barCenter(index)" :y="labelY" class="bar-label">
                   {{ truncateLabel(item.label) }}
                 </text>
@@ -125,16 +115,16 @@ const props = withDefaults(
 const showTarget = computed(() => props.mode === "center");
 
 const chartWidth = 960;
-const chartHeight = 300;
+const chartHeight = 260;
 const axisPadding = {
-  top: 24,
-  right: 24,
-  bottom: 52,
-  left: 72,
+  top: 28,
+  right: 32,
+  bottom: 48,
+  left: 56,
 };
 
-const gradientId = `enroll-target-${Math.random().toString(36).slice(2, 8)}`;
-const shadowId = `enroll-shadow-${Math.random().toString(36).slice(2, 8)}`;
+const gradientTargetId = `enroll-target-${Math.random().toString(36).slice(2, 8)}`;
+const gradientActualId = `enroll-actual-${Math.random().toString(36).slice(2, 8)}`;
 
 const maxValue = computed(() => {
   if (!props.items.length) return 1;
@@ -146,7 +136,7 @@ const maxValue = computed(() => {
 
 const yTicks = computed(() => {
   const max = maxValue.value;
-  const step = max <= 12 ? 1 : Math.max(1, Math.ceil(max / 6));
+  const step = max <= 5 ? 1 : max <= 12 ? 2 : Math.max(1, Math.ceil(max / 5));
   const top = Math.max(1, Math.ceil(max / step) * step);
   const ticks: Array<{ value: number; minor: boolean }> = [];
   for (let value = top; value >= 0; value -= step) {
@@ -162,12 +152,12 @@ const axisLeft = axisPadding.left;
 const axisRight = chartWidth - axisPadding.right;
 const axisTop = axisPadding.top;
 const axisBottom = chartHeight - axisPadding.bottom;
-const labelY = axisBottom + 18;
-const valueGap = 8;
-const valuePadding = 8;
+const labelY = axisBottom + 20;
+const valueGap = 10;
+const barRadius = 6;
 
 const bandWidth = computed(() => (props.items.length ? plotWidth.value / props.items.length : plotWidth.value));
-const barWidth = computed(() => Math.min(48, bandWidth.value * 0.6));
+const barWidth = computed(() => Math.min(52, bandWidth.value * 0.5));
 
 const barCenter = (index: number) => axisLeft + bandWidth.value * index + bandWidth.value / 2;
 const barLeft = (index: number) => barCenter(index) - barWidth.value / 2;
@@ -183,20 +173,6 @@ const valueY = (item: EnrollmentBarItem) => {
   return barTop(anchor) - valueGap;
 };
 
-const minValueY = computed(() => {
-  if (!props.items.length) return axisTop;
-  return Math.min(
-    ...props.items.map((item) => {
-      const anchor = showTarget.value ? Math.max(item.actual, item.target || 0) : item.actual;
-      return barTop(anchor) - valueGap;
-    })
-  );
-});
-
-const extraTop = computed(() => Math.max(0, valuePadding - minValueY.value));
-const frameTop = computed(() => 0.5 - extraTop.value);
-const frameHeight = computed(() => chartHeight - 1 + extraTop.value);
-
 const truncateLabel = (label: string) => {
   if (label.length <= 8) return label;
   return `${label.slice(0, 7)}...`;
@@ -211,15 +187,14 @@ const formatNumber = (value: number) => new Intl.NumberFormat("zh-CN").format(va
 }
 
 .chart-empty-shell {
-  min-height: 176px;
-  border-radius: 18px;
+  min-height: 160px;
+  border-radius: 12px;
   padding: 22px;
-  background:
-    linear-gradient(180deg, rgba(246, 249, 253, 0.96), rgba(251, 253, 255, 0.98));
+  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
 }
 
 .chart-empty-body {
-  min-height: 118px;
+  min-height: 100px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -228,37 +203,33 @@ const formatNumber = (value: number) => new Intl.NumberFormat("zh-CN").format(va
 }
 
 .chart-empty-title {
-  font-size: 18px;
-  font-weight: 700;
-  color: #243a5a;
-  letter-spacing: 0.01em;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ctms-text-regular);
 }
 
 .chart-empty-desc {
-  margin-top: 10px;
-  font-size: 14px;
+  margin-top: 8px;
+  font-size: 13px;
   line-height: 1.7;
-  color: #8a97ab;
+  color: var(--ctms-text-secondary);
 }
 
 .chart-body {
   display: flex;
   flex-direction: column;
-  gap: 12px;
 }
 
 .chart-scroll {
   overflow: hidden;
-  padding-bottom: 8px;
 }
 
 .chart-plot {
-  border-radius: 12px;
-  padding: 0;
-  background-color: transparent;
+  border-radius: 10px;
+  background: linear-gradient(180deg, #fafbfd 0%, #f6f8fb 100%);
   position: relative;
-  aspect-ratio: 16 / 5;
-  min-height: 220px;
+  aspect-ratio: 960 / 260;
+  min-height: 200px;
 }
 
 .chart-svg {
@@ -268,32 +239,31 @@ const formatNumber = (value: number) => new Intl.NumberFormat("zh-CN").format(va
   overflow: visible;
 }
 
-.chart-frame {
-  fill: #ffffff;
-  stroke: #000000;
-  stroke-width: 1px;
-}
-
-.axis-line,
-.tick-line {
-  stroke: #000000;
+.grid-line {
+  stroke: #e8ecf1;
   stroke-width: 1px;
+  stroke-dasharray: 4 3;
 }
 
 .tick-label {
   font-size: 11px;
-  fill: #000000;
+  fill: var(--ctms-text-disabled);
   dominant-baseline: middle;
   text-anchor: end;
+  font-weight: 500;
 }
 
 .bar-target {
-  stroke: #e2e8f0;
+  stroke: #dce3ec;
   stroke-width: 1px;
 }
 
 .bar-actual {
-  fill: var(--ctms-primary);
+  transition: opacity 0.2s ease;
+}
+
+.bar-group:hover .bar-actual {
+  opacity: 0.85;
 }
 
 .bar-value {
@@ -304,14 +274,19 @@ const formatNumber = (value: number) => new Intl.NumberFormat("zh-CN").format(va
 }
 
 .bar-value-actual {
-  fill: var(--ctms-text-main);
-  font-weight: 600;
+  fill: var(--ctms-primary);
+  font-weight: 700;
+  font-size: 13px;
 }
 
-.bar-value-divider,
-.bar-value-target {
+.bar-value-divider {
   fill: var(--ctms-text-disabled);
-  font-weight: 600;
+  font-weight: 400;
+}
+
+.bar-value-target {
+  fill: var(--ctms-text-secondary);
+  font-weight: 500;
 }
 
 .bar-label {
@@ -319,12 +294,7 @@ const formatNumber = (value: number) => new Intl.NumberFormat("zh-CN").format(va
   fill: var(--ctms-text-regular);
   text-anchor: middle;
   dominant-baseline: hanging;
-}
-
-.chart-footnote {
-  font-size: 12px;
-  color: var(--ctms-text-secondary);
-  text-align: right;
+  font-weight: 500;
 }
 
 @media (max-width: 768px) {
diff --git a/frontend/src/views/ia/project-overview/StageNode.vue b/frontend/src/views/ia/project-overview/StageNode.vue
index 28645e00..e7229964 100644
--- a/frontend/src/views/ia/project-overview/StageNode.vue
+++ b/frontend/src/views/ia/project-overview/StageNode.vue
@@ -42,7 +42,7 @@ const statusClass = computed(() => `stage-${props.status.toLowerCase()}`);
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
   min-width: 64px;
 }
 
@@ -52,7 +52,7 @@ const statusClass = computed(() => `stage-${props.status.toLowerCase()}`);
   border-radius: 50%;
   border: 2px solid var(--ctms-border-color);
   background-color: #ffffff;
-  transition: var(--ctms-transition);
+  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .stage-label {
@@ -60,24 +60,35 @@ const statusClass = computed(() => `stage-${props.status.toLowerCase()}`);
   color: var(--ctms-text-secondary);
   text-align: center;
   white-space: nowrap;
+  transition: color 0.2s ease;
 }
 
 .stage-date {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--ctms-text-disabled);
   text-align: center;
   white-space: nowrap;
+  background: rgba(63, 143, 107, 0.06);
+  padding: 1px 6px;
+  border-radius: 4px;
 }
 
 .stage-completed .stage-dot {
   background-color: var(--ctms-success);
   border-color: var(--ctms-success);
+  box-shadow: 0 2px 6px rgba(63, 143, 107, 0.3);
 }
 
 .stage-in_progress .stage-dot {
   border-color: var(--ctms-primary);
-  box-shadow: 0 0 0 3px rgba(63, 93, 117, 0.18);
+  box-shadow: 0 0 0 3px rgba(63, 93, 117, 0.15);
   background-color: #ffffff;
+  animation: pulse-ring 2s ease-in-out infinite;
+}
+
+@keyframes pulse-ring {
+  0%, 100% { box-shadow: 0 0 0 3px rgba(63, 93, 117, 0.15); }
+  50% { box-shadow: 0 0 0 5px rgba(63, 93, 117, 0.08); }
 }
 
 .stage-not_started .stage-dot {
@@ -87,7 +98,8 @@ const statusClass = computed(() => `stage-${props.status.toLowerCase()}`);
 
 .stage-blocked .stage-dot {
   border-color: var(--ctms-danger);
-  background-color: rgba(194, 75, 75, 0.12);
+  background-color: rgba(194, 75, 75, 0.1);
+  box-shadow: 0 2px 6px rgba(194, 75, 75, 0.2);
 }
 
 .stage-completed .stage-label {
diff --git a/frontend/src/views/ia/project-overview/overview.adapter.ts b/frontend/src/views/ia/project-overview/overview.adapter.ts
index 729107f1..c42305d1 100644
--- a/frontend/src/views/ia/project-overview/overview.adapter.ts
+++ b/frontend/src/views/ia/project-overview/overview.adapter.ts
@@ -111,7 +111,6 @@ export const adaptProjectOverview = (raw: unknown): ProjectOverviewViewModel =>
   const centers = centersRaw.map((center) => {
     const enrollmentStatus = normalizeStatus((center as any).enrollment_status);
     const enrollmentActualRaw = toNumber((center as any).enrollment_actual);
-    const hasEnrollmentStage = enrollmentStatus === "IN_PROGRESS" || enrollmentStatus === "COMPLETED";
     return {
       center_id: toString((center as any).center_id || (center as any).id),
       center_name: toString((center as any).center_name || (center as any).name),
@@ -123,7 +122,7 @@ export const adaptProjectOverview = (raw: unknown): ProjectOverviewViewModel =>
       inspection_status: normalizeStatus((center as any).inspection_status),
       closeout_status: normalizeStatus((center as any).closeout_status),
       enrollment_target: toNumber((center as any).enrollment_target),
-      enrollment_actual: hasEnrollmentStage ? enrollmentActualRaw : 0,
+      enrollment_actual: enrollmentActualRaw,
       institution_initiation_completed_at: toString((center as any).institution_initiation_completed_at),
       ethics_completed_at: toString((center as any).ethics_completed_at),
       contract_sign_completed_at: toString((center as any).contract_sign_completed_at),