压缩项目总览展示密度

frontend/src/views/ia/ProjectOverview.vue

@@ -2,24 +2,6 @@
   <div class="page ctms-page-shell page--flush">
     <div v-if="study.currentStudy" class="page-body">
       <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-live-clock">{{ liveClock }}</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 class="card-header-left">
@@ -28,11 +10,19 @@
               </span>
               <div class="card-title">中心整体进度</div>
             </div>
-            <div class="progress-legend">
+            <div class="card-header-right">
-              <span class="legend-item"><span class="legend-dot completed"></span>已完成</span>
+              <el-button size="small" @click="loadOverview" class="refresh-btn">
-              <span class="legend-item"><span class="legend-dot active"></span>进行中</span>
+                <template #icon>
-              <span class="legend-item"><span class="legend-dot pending"></span>未开始</span>
+                  <el-icon><Refresh /></el-icon>
-              <span class="legend-item"><span class="legend-dot blocked"></span>阻塞/延期</span>
+                </template>
+                刷新
+              </el-button>
+              <div class="progress-legend">
+                <span class="legend-item"><span class="legend-dot completed"></span>已完成</span>
+                <span class="legend-item"><span class="legend-dot active"></span>进行中</span>
+                <span class="legend-item"><span class="legend-dot pending"></span>未开始</span>
+                <span class="legend-item"><span class="legend-dot blocked"></span>阻塞/延期</span>
+              </div>
             </div>
           </div>
           <StateLoading v-if="loading" :rows="6" />
@@ -84,11 +74,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+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";
 import { fetchProjectOverview } from "../../api/overview";
 import { fetchSites } from "../../api/sites";
 import StateEmpty from "../../components/StateEmpty.vue";
@@ -101,8 +90,6 @@ const study = useStudyStore();
 const loading = ref(false);
 const overview = ref<ProjectOverviewViewModel | null>(null);
 const chartMode = ref<"center" | "month">("center");
-const liveClock = ref(displayDateTime(new Date()));
-let clockTimer: ReturnType<typeof setInterval> | null = null;
 
 const centers = computed(() => overview.value?.centers || []);
 
@@ -202,16 +189,6 @@ const reset = () => {
 
 onMounted(() => {
   loadOverview();
-  clockTimer = setInterval(() => {
-    liveClock.value = displayDateTime(new Date());
-  }, 1000);
-});
-
-onUnmounted(() => {
-  if (clockTimer) {
-    clearInterval(clockTimer);
-    clockTimer = null;
-  }
 });
 
 watch(
@@ -235,58 +212,18 @@ watch(
 }
 
 .overview-container {
-  padding: 24px 28px 32px;
+  padding: 8px 10px 12px;
   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;
-  align-items: center;
   gap: 10px;
 }
 
-.overview-top-icon {
+.card-header-right {
-  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;
-}
+  flex-wrap: wrap;
-
+  justify-content: flex-end;
-.overview-live-clock {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--ctms-primary);
-  font-variant-numeric: tabular-nums;
-  background: rgba(63, 93, 117, 0.06);
-  padding: 2px 10px;
-  border-radius: 6px;
-  letter-spacing: 0.02em;
 }
 
 .refresh-btn {
@@ -296,8 +233,8 @@ watch(
 .overview-card {
   background: var(--ctms-bg-card);
   border: 1px solid var(--ctms-border-color);
-  border-radius: var(--ctms-radius-lg);
+  border-radius: 8px;
-  padding: 20px 24px;
+  padding: 12px 14px;
   transition: var(--ctms-transition);
   box-shadow: var(--ctms-shadow-sm);
 }
@@ -311,9 +248,9 @@ watch(
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
+  gap: 10px;
   flex-wrap: wrap;
-  margin-bottom: 16px;
+  margin-bottom: 10px;
 }
 
 .card-header-left {
@@ -411,12 +348,12 @@ watch(
 }
 
 .overview-empty-panel {
-  min-height: 168px;
+  min-height: 132px;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 32px 24px;
+  padding: 20px 16px;
-  border-radius: 12px;
+  border-radius: 8px;
   background: linear-gradient(180deg, #f8fafc, #f1f5f9);
 }
 
@@ -454,11 +391,11 @@ watch(
 
 @media (max-width: 768px) {
   .overview-container {
-    padding: 16px;
+    padding: 8px;
   }
 
   .overview-card {
-    padding: 16px;
+    padding: 10px;
   }
 
   .card-header {
@@ -466,10 +403,8 @@ watch(
     align-items: flex-start;
   }
 
-  .overview-top-bar {
+  .card-header-right {
-    flex-direction: column;
+    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 12px;
   }
 }
 </style>

frontend/src/views/ia/project-overview/CenterProgressRow.vue

@@ -55,10 +55,10 @@ const connectorClass = (status: StageStatus) => `connector-${status.toLowerCase(
 .center-row {
   display: grid;
   grid-template-columns: 180px 1fr;
-  gap: 16px;
+  gap: 12px;
-  padding: 14px 16px;
+  padding: 8px 10px;
-  border-radius: 10px;
+  border-radius: 8px;
-  margin: 2px 0;
+  margin: 0;
   transition: background-color 0.2s ease;
 }
 
@@ -100,7 +100,7 @@ const connectorClass = (status: StageStatus) => `connector-${status.toLowerCase(
   align-items: flex-start;
   gap: 8px;
   overflow-x: auto;
-  padding: 10px 0 4px;
+  padding: 6px 0 2px;
   width: 100%;
   min-width: 0;
 }