From fd6177d479db5bb889470fdee3d97a4992e53ede Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Wed, 4 Mar 2026 16:23:31 +0800
Subject: [PATCH 1/9] chore(ui): add enterprise ui contract checks

---
 frontend/package.json                   |  3 ++-
 frontend/scripts/verify-ui-contract.mjs | 31 +++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 frontend/scripts/verify-ui-contract.mjs

diff --git a/frontend/package.json b/frontend/package.json
index 0bd25545..9621bd0c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "ui:contract": "node scripts/verify-ui-contract.mjs"
   },
   "dependencies": {
     "axios": "^1.6.8",
diff --git a/frontend/scripts/verify-ui-contract.mjs b/frontend/scripts/verify-ui-contract.mjs
new file mode 100644
index 00000000..60743884
--- /dev/null
+++ b/frontend/scripts/verify-ui-contract.mjs
@@ -0,0 +1,31 @@
+import { readFileSync } from "node:fs";
+
+const main = readFileSync("src/styles/main.css", "utf8");
+const unified = readFileSync("src/styles/unified-page.css", "utf8");
+
+const requiredMainTokens = [
+  "--ctms-primary",
+  "--ctms-text-main",
+  "--ctms-bg-base",
+  "--ctms-radius",
+  "--ctms-shadow"
+];
+
+const requiredUnifiedTokens = [
+  "--unified-shell-bg",
+  "--unified-shell-radius",
+  ".unified-action-bar",
+  ".unified-section"
+];
+
+const missing = [
+  ...requiredMainTokens.filter((t) => !main.includes(t)),
+  ...requiredUnifiedTokens.filter((t) => !unified.includes(t))
+];
+
+if (missing.length) {
+  console.error("UI contract check failed. Missing:", missing.join(", "));
+  process.exit(1);
+}
+
+console.log("UI contract check passed");

From f7e867c2bd8a89d4d8e818e481798d594a1f800e Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Wed, 4 Mar 2026 16:25:05 +0800
Subject: [PATCH 2/9] feat(ui): add enterprise token baseline

---
 frontend/scripts/verify-ui-contract.mjs | 7 ++++++-
 frontend/src/styles/main.css            | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/scripts/verify-ui-contract.mjs b/frontend/scripts/verify-ui-contract.mjs
index 60743884..33b5713f 100644
--- a/frontend/scripts/verify-ui-contract.mjs
+++ b/frontend/scripts/verify-ui-contract.mjs
@@ -8,7 +8,12 @@ const requiredMainTokens = [
   "--ctms-text-main",
   "--ctms-bg-base",
   "--ctms-radius",
-  "--ctms-shadow"
+  "--ctms-shadow",
+  "--ctms-brand-900",
+  "--ctms-brand-700",
+  "--ctms-neutral-100",
+  "--ctms-neutral-300",
+  "--ctms-focus-ring"
 ];
 
 const requiredUnifiedTokens = [
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index 95eb666a..882e1afc 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -11,6 +11,8 @@
   --ctms-primary-hover: #365067;
   --ctms-primary-active: #2b4356;
   --ctms-primary-light: #e6edf2;
+  --ctms-brand-900: #13243a;
+  --ctms-brand-700: #24496f;
 
   /* 语义色 */
   --ctms-success: #3f8f6b;
@@ -28,6 +30,8 @@
   --ctms-bg-base: #f9fafb;
   --ctms-bg-card: #ffffff;
   --ctms-bg-muted: #f3f4f6;
+  --ctms-neutral-100: #f5f7fa;
+  --ctms-neutral-300: #d5dce5;
   --ctms-border-color: #e5e7eb;
   --ctms-border-color-hover: #cbd5e1;
 
@@ -51,6 +55,7 @@
 
   /* 动画 */
   --ctms-transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+  --ctms-focus-ring: 0 0 0 3px rgba(36, 73, 111, 0.2);
 
   /* Element Plus 主色适配 */
   --el-color-primary: var(--ctms-primary);

From 80d98301393fde8bebee3a9439d35d451d5dc9ec Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Wed, 4 Mar 2026 16:26:17 +0800
Subject: [PATCH 3/9] feat(ui): enforce shared page shell contract

---
 frontend/scripts/verify-ui-contract.mjs |  5 ++++-
 frontend/src/components/Layout.vue      |  8 +++++++-
 frontend/src/styles/unified-page.css    | 16 ++++++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/frontend/scripts/verify-ui-contract.mjs b/frontend/scripts/verify-ui-contract.mjs
index 33b5713f..0a19f1a0 100644
--- a/frontend/scripts/verify-ui-contract.mjs
+++ b/frontend/scripts/verify-ui-contract.mjs
@@ -20,7 +20,10 @@ const requiredUnifiedTokens = [
   "--unified-shell-bg",
   "--unified-shell-radius",
   ".unified-action-bar",
-  ".unified-section"
+  ".unified-section",
+  ".ctms-page-shell",
+  ".ctms-page-header-row",
+  ".ctms-page-content-grid"
 ];
 
 const missing = [
diff --git a/frontend/src/components/Layout.vue b/frontend/src/components/Layout.vue
index 7fb743d1..377466b7 100644
--- a/frontend/src/components/Layout.vue
+++ b/frontend/src/components/Layout.vue
@@ -195,7 +195,9 @@
         <div class="content-wrapper">
           <router-view v-slot="{ Component }">
             <transition name="fade-transform" mode="out-in">
-              <component :is="Component" />
+              <div class="ctms-route-shell">
+                <component :is="Component" />
+              </div>
             </transition>
           </router-view>
         </div>
@@ -704,6 +706,10 @@ const onCommand = (cmd: string) => {
   background: #f7f8fb;
 }
 
+.ctms-route-shell {
+  min-height: 100%;
+}
+
 /* 过渡动画 */
 .fade-transform-enter-active,
 .fade-transform-leave-active {
diff --git a/frontend/src/styles/unified-page.css b/frontend/src/styles/unified-page.css
index f985b8c2..507f9373 100644
--- a/frontend/src/styles/unified-page.css
+++ b/frontend/src/styles/unified-page.css
@@ -9,6 +9,22 @@
   --unified-muted-color: #6f84a8;
 }
 
+.ctms-page-shell {
+  padding: 16px 20px 20px;
+}
+
+.ctms-page-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.ctms-page-content-grid {
+  display: grid;
+  gap: 12px;
+}
+
 .unified-shell {
   background: var(--unified-shell-bg);
   border: 0;

From 1b920520d6aca0fcf27703fc62a3ec2c9e02b9f2 Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Wed, 4 Mar 2026 16:28:41 +0800
Subject: [PATCH 4/9] feat(ui): unify list-page enterprise visual pattern

---
 frontend/scripts/verify-ui-contract.mjs       | 23 +++++++++++++++++++
 frontend/src/views/ia/ProjectMilestones.vue   | 11 +++++----
 .../views/ia/RiskIssueMonitoringVisits.vue    |  4 ++--
 frontend/src/views/ia/RiskIssuePd.vue         |  4 ++--
 frontend/src/views/ia/RiskIssueSae.vue        |  4 ++--
 frontend/src/views/ia/SubjectManagement.vue   |  4 ++--
 6 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/frontend/scripts/verify-ui-contract.mjs b/frontend/scripts/verify-ui-contract.mjs
index 0a19f1a0..52d3c5fa 100644
--- a/frontend/scripts/verify-ui-contract.mjs
+++ b/frontend/scripts/verify-ui-contract.mjs
@@ -31,6 +31,29 @@ const missing = [
   ...requiredUnifiedTokens.filter((t) => !unified.includes(t))
 ];
 
+const pageContractChecks = [
+  "src/views/ia/ProjectMilestones.vue",
+  "src/views/ia/SubjectManagement.vue",
+  "src/views/ia/RiskIssueSae.vue",
+  "src/views/ia/RiskIssuePd.vue",
+  "src/views/ia/RiskIssueMonitoringVisits.vue"
+];
+
+const requiredPageClasses = [
+  "ctms-page-shell",
+  "unified-action-bar",
+  "ctms-table-card"
+];
+
+for (const file of pageContractChecks) {
+  const content = readFileSync(file, "utf8");
+  for (const className of requiredPageClasses) {
+    if (!content.includes(className)) {
+      missing.push(`${file}:${className}`);
+    }
+  }
+}
+
 if (missing.length) {
   console.error("UI contract check failed. Missing:", missing.join(", "));
   process.exit(1);
diff --git a/frontend/src/views/ia/ProjectMilestones.vue b/frontend/src/views/ia/ProjectMilestones.vue
index 01472fdd..9837e4d2 100644
--- a/frontend/src/views/ia/ProjectMilestones.vue
+++ b/frontend/src/views/ia/ProjectMilestones.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="page">
-    <div v-if="study.currentStudy" class="unified-shell">
-      <section class="unified-section">
-        <div class="card-header">
+  <div class="page ctms-page-shell">
+    <div v-if="study.currentStudy" class="unified-shell ctms-table-card">
+      <section class="unified-action-bar">
+        <div class="card-header ctms-page-header-row">
           <div>
             <div class="card-title">{{ TEXT.modules.projectMilestones.listTitle }}</div>
             <div class="card-subtitle">
@@ -21,7 +21,8 @@
             <el-button size="small" @click="loadMilestones">{{ TEXT.common.actions.refresh }}</el-button>
           </div>
         </div>
-
+      </section>
+      <section class="unified-section ctms-page-content-grid">
         <el-table :data="rows" v-loading="loading" class="ctms-table" style="width: 100%">
           <el-table-column prop="name" :label="TEXT.modules.projectMilestones.columns.name" min-width="140" />
           <el-table-column prop="planDate" :label="TEXT.modules.projectMilestones.columns.planDate" min-width="170">
diff --git a/frontend/src/views/ia/RiskIssueMonitoringVisits.vue b/frontend/src/views/ia/RiskIssueMonitoringVisits.vue
index 1254ce06..b3728bdf 100644
--- a/frontend/src/views/ia/RiskIssueMonitoringVisits.vue
+++ b/frontend/src/views/ia/RiskIssueMonitoringVisits.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="page">
+  <div class="page ctms-page-shell">
     <template v-if="study.currentStudy">
-      <el-card shadow="never" class="main-content-card unified-shell">
+      <el-card shadow="never" class="main-content-card unified-shell ctms-table-card">
         <div class="filter-container unified-action-bar">
           <div class="filter-left">
             <el-form :inline="true" :model="filters" class="filter-form">
diff --git a/frontend/src/views/ia/RiskIssuePd.vue b/frontend/src/views/ia/RiskIssuePd.vue
index a5e368fb..4a2c49d8 100644
--- a/frontend/src/views/ia/RiskIssuePd.vue
+++ b/frontend/src/views/ia/RiskIssuePd.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="page">
-    <el-card shadow="never" class="main-content-card unified-shell">
+  <div class="page ctms-page-shell">
+    <el-card shadow="never" class="main-content-card unified-shell ctms-table-card">
       <div class="filter-container unified-action-bar">
         <el-form :inline="true" class="filter-form">
           <el-form-item class="filter-item-form">
diff --git a/frontend/src/views/ia/RiskIssueSae.vue b/frontend/src/views/ia/RiskIssueSae.vue
index cbcf6824..94ef9a6f 100644
--- a/frontend/src/views/ia/RiskIssueSae.vue
+++ b/frontend/src/views/ia/RiskIssueSae.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="page">
-    <el-card shadow="never" class="main-content-card unified-shell">
+  <div class="page ctms-page-shell">
+    <el-card shadow="never" class="main-content-card unified-shell ctms-table-card">
       <div class="filter-container unified-action-bar">
         <el-form :inline="true" class="filter-form">
           <el-form-item class="filter-item-form">
diff --git a/frontend/src/views/ia/SubjectManagement.vue b/frontend/src/views/ia/SubjectManagement.vue
index 2e4ae57d..384918aa 100644
--- a/frontend/src/views/ia/SubjectManagement.vue
+++ b/frontend/src/views/ia/SubjectManagement.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="page">
-    <el-card shadow="never" class="main-content-card unified-shell">
+  <div class="page ctms-page-shell">
+    <el-card shadow="never" class="main-content-card unified-shell ctms-table-card">
       <div class="filter-container unified-action-bar">
         <el-form :inline="true" :model="filters" class="filter-form">
           <el-form-item label="" class="filter-item-form">

From 90d724a5fe933b28aa8ddcde6a7fb8fb891ba7d6 Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Wed, 4 Mar 2026 16:34:25 +0800
Subject: [PATCH 5/9] feat(ui): elevate project overview for executive readout

---
 frontend/scripts/verify-ui-contract.mjs   | 13 ++++++
 frontend/src/components/KpiCard.vue       |  4 +-
 frontend/src/styles/unified-page.css      | 15 +++++++
 frontend/src/views/ia/ProjectOverview.vue | 54 ++++++++++++++++++++++-
 4 files changed, 82 insertions(+), 4 deletions(-)

diff --git a/frontend/scripts/verify-ui-contract.mjs b/frontend/scripts/verify-ui-contract.mjs
index 52d3c5fa..b96a301f 100644
--- a/frontend/scripts/verify-ui-contract.mjs
+++ b/frontend/scripts/verify-ui-contract.mjs
@@ -54,6 +54,19 @@ for (const file of pageContractChecks) {
   }
 }
 
+const overview = readFileSync("src/views/ia/ProjectOverview.vue", "utf8");
+const requiredOverviewClasses = [
+  "ctms-page-shell",
+  "kpi",
+  "unified-section"
+];
+
+for (const className of requiredOverviewClasses) {
+  if (!overview.includes(className)) {
+    missing.push(`src/views/ia/ProjectOverview.vue:${className}`);
+  }
+}
+
 if (missing.length) {
   console.error("UI contract check failed. Missing:", missing.join(", "));
   process.exit(1);
diff --git a/frontend/src/components/KpiCard.vue b/frontend/src/components/KpiCard.vue
index 9f6c8dfa..21cf3559 100644
--- a/frontend/src/components/KpiCard.vue
+++ b/frontend/src/components/KpiCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="kpi-card" :class="[`type-${type}`]">
+  <article class="kpi-card kpi-enterprise" :class="[`type-${type}`]">
     <!-- 顶部标签区域 -->
     <div class="kpi-badge">
       <div class="kpi-badge-icon" v-if="icon">
@@ -30,7 +30,7 @@
         </template>
       </div>
     </div>
-  </div>
+  </article>
 </template>
 
 <script setup lang="ts">
diff --git a/frontend/src/styles/unified-page.css b/frontend/src/styles/unified-page.css
index 507f9373..1fb2c51a 100644
--- a/frontend/src/styles/unified-page.css
+++ b/frontend/src/styles/unified-page.css
@@ -188,6 +188,21 @@
   color: var(--unified-muted-color);
 }
 
+.unified-shell .kpi-enterprise {
+  min-height: 132px;
+  border-radius: 14px;
+  padding: 16px;
+}
+
+.unified-shell .kpi-enterprise .kpi-title {
+  font-size: 16px;
+  line-height: 1.25;
+}
+
+.unified-shell .kpi-enterprise .kpi-value {
+  font-size: 34px;
+}
+
 @media (max-width: 960px) {
   .unified-action-bar,
   .unified-section {
diff --git a/frontend/src/views/ia/ProjectOverview.vue b/frontend/src/views/ia/ProjectOverview.vue
index 6145b2ea..4d917cf4 100644
--- a/frontend/src/views/ia/ProjectOverview.vue
+++ b/frontend/src/views/ia/ProjectOverview.vue
@@ -1,7 +1,21 @@
 <template>
-  <div class="page">
+  <div class="page ctms-page-shell">
     <div v-if="study.currentStudy" class="page-body">
-      <div class="unified-shell">
+      <div class="unified-shell ctms-table-card">
+        <section class="unified-section">
+          <div class="kpi-grid">
+            <KpiCard
+              v-for="item in kpiItems"
+              :key="item.key"
+              class="kpi"
+              :title="item.title"
+              :value="item.value"
+              :subtext="item.subtext"
+              :type="item.type"
+            />
+          </div>
+        </section>
+
         <section class="unified-section">
           <div class="overview-meta-inline">
             <el-tag v-if="usingDemo" effect="plain" type="info" class="demo-tag">示例数据</el-tag>
@@ -69,6 +83,7 @@ import { fetchProjectOverview } from "../../api/overview";
 import { fetchSites } from "../../api/sites";
 import StateEmpty from "../../components/StateEmpty.vue";
 import StateLoading from "../../components/StateLoading.vue";
+import KpiCard from "../../components/KpiCard.vue";
 import CenterProgressRow from "./project-overview/CenterProgressRow.vue";
 import EnrollmentBarChart, { type EnrollmentBarItem } from "./project-overview/EnrollmentBarChart.vue";
 import { adaptProjectOverview, type CenterOverview, type ProjectOverviewViewModel } from "./project-overview/overview.adapter";
@@ -84,6 +99,35 @@ const updatedAtLabel = ref(displayDateTime(new Date()));
 const preferApi = String(import.meta.env.VITE_USE_OVERVIEW_API || "").toLowerCase() === "true";
 
 const centers = computed(() => overview.value?.centers || []);
+const kpiItems = computed(() => {
+  const summary = overview.value?.summary;
+  const totalTarget = summary?.total_target ?? 0;
+  const totalActual = summary?.total_actual ?? 0;
+  const activeCenters = centers.value.filter((item) => item.is_active !== false).length;
+  return [
+    {
+      key: "target",
+      title: "总入组目标",
+      value: totalTarget,
+      subtext: "项目整体计划",
+      type: "primary" as const,
+    },
+    {
+      key: "actual",
+      title: "当前入组",
+      value: totalActual,
+      subtext: `达成率 ${totalTarget > 0 ? Math.round((totalActual / totalTarget) * 100) : 0}%`,
+      type: "success" as const,
+    },
+    {
+      key: "centers",
+      title: "活跃中心",
+      value: activeCenters,
+      subtext: `中心总数 ${centers.value.length}`,
+      type: "info" as const,
+    },
+  ];
+});
 
 const buildFallbackCentersFromSites = (siteList: any[]): CenterOverview[] =>
   siteList.map((site: any) => ({
@@ -208,6 +252,12 @@ watch(
   gap: 0;
 }
 
+.kpi-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
 .demo-tag {
   border-color: var(--ctms-border-color);
   color: var(--ctms-text-secondary);

From 39b4d2a2eac6fba2caada2af2498af3c0abc8871 Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Wed, 4 Mar 2026 16:36:28 +0800
Subject: [PATCH 6/9] feat(ui): unify finance and file management surfaces

---
 frontend/scripts/verify-ui-contract.mjs       | 21 +++++++++++++++++++
 frontend/src/views/fees/ContractFees.vue      |  2 +-
 frontend/src/views/fees/SpecialExpenses.vue   |  2 +-
 .../src/views/ia/FileVersionManagement.vue    | 19 ++++++++++++++---
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/frontend/scripts/verify-ui-contract.mjs b/frontend/scripts/verify-ui-contract.mjs
index b96a301f..731f1f3e 100644
--- a/frontend/scripts/verify-ui-contract.mjs
+++ b/frontend/scripts/verify-ui-contract.mjs
@@ -67,6 +67,27 @@ for (const className of requiredOverviewClasses) {
   }
 }
 
+const financeAndFilePages = [
+  "src/views/fees/ContractFees.vue",
+  "src/views/fees/SpecialExpenses.vue",
+  "src/views/ia/FileVersionManagement.vue"
+];
+
+const requiredFinanceAndFileClasses = [
+  "ctms-page-shell",
+  "unified-action-bar",
+  "unified-shell"
+];
+
+for (const file of financeAndFilePages) {
+  const content = readFileSync(file, "utf8");
+  for (const className of requiredFinanceAndFileClasses) {
+    if (!content.includes(className)) {
+      missing.push(`${file}:${className}`);
+    }
+  }
+}
+
 if (missing.length) {
   console.error("UI contract check failed. Missing:", missing.join(", "));
   process.exit(1);
diff --git a/frontend/src/views/fees/ContractFees.vue b/frontend/src/views/fees/ContractFees.vue
index aee42b52..0d9fa9fe 100644
--- a/frontend/src/views/fees/ContractFees.vue
+++ b/frontend/src/views/fees/ContractFees.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div class="page ctms-page-shell">
     <div class="overview">
       <el-row :gutter="20">
         <el-col :xs="24" :sm="12" :md="6">
diff --git a/frontend/src/views/fees/SpecialExpenses.vue b/frontend/src/views/fees/SpecialExpenses.vue
index 943023f8..1de78b80 100644
--- a/frontend/src/views/fees/SpecialExpenses.vue
+++ b/frontend/src/views/fees/SpecialExpenses.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div class="page ctms-page-shell">
     <div class="overview">
       <el-row :gutter="20">
         <el-col :xs="24" :sm="12" :md="6">
diff --git a/frontend/src/views/ia/FileVersionManagement.vue b/frontend/src/views/ia/FileVersionManagement.vue
index ebbcf51d..88a4c811 100644
--- a/frontend/src/views/ia/FileVersionManagement.vue
+++ b/frontend/src/views/ia/FileVersionManagement.vue
@@ -1,6 +1,13 @@
 <template>
-  <div class="redirecting">
-    <el-empty :description="`${TEXT.common.loading}...`" />
+  <div class="redirecting ctms-page-shell">
+    <section class="unified-action-bar">
+      <div class="redirecting-title">{{ TEXT.menu.fileVersionManagement }}</div>
+    </section>
+    <section class="unified-shell">
+      <section class="unified-section">
+        <el-empty :description="`${TEXT.common.loading}...`" />
+      </section>
+    </section>
   </div>
 </template>
 
@@ -23,6 +30,12 @@ onMounted(() => {
 
 <style scoped>
 .redirecting {
-  padding: 24px;
+  min-height: 180px;
+}
+
+.redirecting-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ctms-text-main);
 }
 </style>

From a3036c2233593e9755af332f74cfdb938648d7e0 Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Wed, 4 Mar 2026 16:38:18 +0800
Subject: [PATCH 7/9] feat(ui): align admin project detail with enterprise
 system

---
 frontend/scripts/verify-ui-contract.mjs    | 13 +++++++++++++
 frontend/src/styles/unified-page.css       |  9 +++++++++
 frontend/src/views/admin/ProjectDetail.vue |  6 +++---
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/scripts/verify-ui-contract.mjs b/frontend/scripts/verify-ui-contract.mjs
index 731f1f3e..721bfe31 100644
--- a/frontend/scripts/verify-ui-contract.mjs
+++ b/frontend/scripts/verify-ui-contract.mjs
@@ -88,6 +88,19 @@ for (const file of financeAndFilePages) {
   }
 }
 
+const adminProjectDetail = readFileSync("src/views/admin/ProjectDetail.vue", "utf8");
+const requiredAdminProjectDetailClasses = [
+  "ctms-page-shell",
+  "unified-action-bar",
+  "unified-section"
+];
+
+for (const className of requiredAdminProjectDetailClasses) {
+  if (!adminProjectDetail.includes(className)) {
+    missing.push(`src/views/admin/ProjectDetail.vue:${className}`);
+  }
+}
+
 if (missing.length) {
   console.error("UI contract check failed. Missing:", missing.join(", "));
   process.exit(1);
diff --git a/frontend/src/styles/unified-page.css b/frontend/src/styles/unified-page.css
index 1fb2c51a..75789e11 100644
--- a/frontend/src/styles/unified-page.css
+++ b/frontend/src/styles/unified-page.css
@@ -203,6 +203,15 @@
   font-size: 34px;
 }
 
+.setup-page .setup-header.unified-action-bar {
+  padding: var(--unified-shell-padding-y) var(--unified-shell-padding-x);
+  border-bottom: 1px solid var(--unified-shell-divider);
+}
+
+.setup-page .setup-content.unified-section {
+  padding: 0;
+}
+
 @media (max-width: 960px) {
   .unified-action-bar,
   .unified-section {
diff --git a/frontend/src/views/admin/ProjectDetail.vue b/frontend/src/views/admin/ProjectDetail.vue
index e3591781..a9710f58 100644
--- a/frontend/src/views/admin/ProjectDetail.vue
+++ b/frontend/src/views/admin/ProjectDetail.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="ctms-page setup-page">
+  <div class="ctms-page setup-page ctms-page-shell">
     <div class="setup-shell unified-shell">
-      <div class="setup-header">
+      <div class="setup-header unified-action-bar">
       <div class="setup-flow">
         <div
           v-for="(step, index) in steps"
@@ -108,7 +108,7 @@
         @click="closeEditDrawer"
       />
       <div
-        class="setup-content"
+        class="setup-content unified-section"
         :class="{
           'setup-content-drawer': drawerVisible,
           'is-closing': drawerClosing,

From 5caf4c51cc8db574129a0c4e6f76806515601a27 Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Wed, 4 Mar 2026 16:40:18 +0800
Subject: [PATCH 8/9] feat(ui): unify loading empty error states

---
 frontend/scripts/verify-ui-contract.mjs  | 21 +++++++++++++
 frontend/src/components/StateEmpty.vue   | 32 ++++---------------
 frontend/src/components/StateError.vue   | 32 ++++---------------
 frontend/src/components/StateLoading.vue | 23 +++++++-------
 frontend/src/styles/main.css             | 39 ++++++++++++++++++++++++
 5 files changed, 83 insertions(+), 64 deletions(-)

diff --git a/frontend/scripts/verify-ui-contract.mjs b/frontend/scripts/verify-ui-contract.mjs
index 721bfe31..0fc7ca2a 100644
--- a/frontend/scripts/verify-ui-contract.mjs
+++ b/frontend/scripts/verify-ui-contract.mjs
@@ -101,6 +101,27 @@ for (const className of requiredAdminProjectDetailClasses) {
   }
 }
 
+const stateComponents = [
+  "src/components/StateLoading.vue",
+  "src/components/StateEmpty.vue",
+  "src/components/StateError.vue"
+];
+
+const requiredStateClasses = [
+  "ctms-state",
+  "ctms-state-title",
+  "ctms-state-desc"
+];
+
+for (const file of stateComponents) {
+  const content = readFileSync(file, "utf8");
+  for (const className of requiredStateClasses) {
+    if (!content.includes(className)) {
+      missing.push(`${file}:${className}`);
+    }
+  }
+}
+
 if (missing.length) {
   console.error("UI contract check failed. Missing:", missing.join(", "));
   process.exit(1);
diff --git a/frontend/src/components/StateEmpty.vue b/frontend/src/components/StateEmpty.vue
index 382c99e9..d5a9e435 100644
--- a/frontend/src/components/StateEmpty.vue
+++ b/frontend/src/components/StateEmpty.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="state state-empty">
-    <el-icon class="state-icon"><Document /></el-icon>
-    <div class="state-title">{{ title }}</div>
-    <div v-if="description" class="state-desc">{{ description }}</div>
-    <div v-if="$slots.action" class="state-action">
+  <section class="ctms-state state state-empty">
+    <el-icon class="ctms-state-icon state-icon"><Document /></el-icon>
+    <h3 class="ctms-state-title state-title">{{ title }}</h3>
+    <p v-if="description" class="ctms-state-desc state-desc">{{ description }}</p>
+    <div v-if="$slots.action" class="ctms-state-action state-action">
       <slot name="action" />
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup lang="ts">
@@ -26,35 +26,15 @@ withDefaults(
 </script>
 
 <style scoped>
-.state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 12px;
-  color: var(--ctms-text-secondary);
-  text-align: center;
-}
-
 .state-icon {
-  font-size: 36px;
   color: var(--ctms-text-disabled);
-  margin-bottom: 10px;
 }
 
 .state-title {
-  font-size: 14px;
-  font-weight: 600;
   color: var(--ctms-text-regular);
 }
 
 .state-desc {
-  font-size: 12px;
   color: var(--ctms-text-secondary);
-  margin-top: 6px;
-}
-
-.state-action {
-  margin-top: 12px;
 }
 </style>
diff --git a/frontend/src/components/StateError.vue b/frontend/src/components/StateError.vue
index 047d951b..ad048a57 100644
--- a/frontend/src/components/StateError.vue
+++ b/frontend/src/components/StateError.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="state state-error">
-    <el-icon class="state-icon"><CircleClose /></el-icon>
-    <div class="state-title">{{ title }}</div>
-    <div v-if="description" class="state-desc">{{ description }}</div>
-    <div v-if="$slots.action" class="state-action">
+  <section class="ctms-state state state-error">
+    <el-icon class="ctms-state-icon state-icon"><CircleClose /></el-icon>
+    <h3 class="ctms-state-title state-title">{{ title }}</h3>
+    <p v-if="description" class="ctms-state-desc state-desc">{{ description }}</p>
+    <div v-if="$slots.action" class="ctms-state-action state-action">
       <slot name="action" />
     </div>
-  </div>
+  </section>
 </template>
 
 <script setup lang="ts">
@@ -26,35 +26,15 @@ withDefaults(
 </script>
 
 <style scoped>
-.state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 12px;
-  color: var(--ctms-text-secondary);
-  text-align: center;
-}
-
 .state-icon {
-  font-size: 36px;
   color: var(--ctms-danger);
-  margin-bottom: 10px;
 }
 
 .state-title {
-  font-size: 14px;
-  font-weight: 600;
   color: var(--ctms-text-main);
 }
 
 .state-desc {
-  font-size: 12px;
   color: var(--ctms-text-secondary);
-  margin-top: 6px;
-}
-
-.state-action {
-  margin-top: 12px;
 }
 </style>
diff --git a/frontend/src/components/StateLoading.vue b/frontend/src/components/StateLoading.vue
index ee2f00d3..1c76d558 100644
--- a/frontend/src/components/StateLoading.vue
+++ b/frontend/src/components/StateLoading.vue
@@ -1,25 +1,24 @@
 <template>
-  <div class="state state-loading">
-    <el-skeleton :rows="rows" animated />
-  </div>
+  <section class="ctms-state ctms-state-loading state state-loading">
+    <h3 class="ctms-state-title state-title">{{ title }}</h3>
+    <p class="ctms-state-desc state-desc">{{ description }}</p>
+    <el-skeleton :rows="rows" animated class="ctms-state-skeleton" />
+  </section>
 </template>
 
 <script setup lang="ts">
+import { TEXT } from "../locales";
+
 withDefaults(
   defineProps<{
     rows?: number;
+    title?: string;
+    description?: string;
   }>(),
   {
     rows: 4,
+    title: TEXT.common.loading,
+    description: TEXT.common.messages.loadSuccess,
   }
 );
 </script>
-
-<style scoped>
-.state-loading {
-  padding: 24px;
-  border: 1px solid var(--ctms-border-color);
-  border-radius: var(--ctms-radius);
-  background-color: #ffffff;
-}
-</style>
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index 882e1afc..48999d1b 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -437,6 +437,45 @@ body {
   font-weight: 600;
 }
 
+/* Unified loading / empty / error states */
+.ctms-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 28px 16px;
+  text-align: center;
+  border: 1px solid var(--ctms-border-color);
+  border-radius: var(--ctms-radius);
+  background: #ffffff;
+}
+
+.ctms-state-icon {
+  font-size: 34px;
+}
+
+.ctms-state-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.ctms-state-desc {
+  margin: 0;
+  font-size: 13px;
+  color: var(--ctms-text-secondary);
+}
+
+.ctms-state-action {
+  margin-top: 4px;
+}
+
+.ctms-state-loading .ctms-state-skeleton {
+  width: min(560px, 100%);
+  margin-top: 4px;
+}
+
 /* Tool classes */
 .text-main {
   color: var(--ctms-text-main);

From 8bf22dcae15ca6b4c44d6d18537ef9e0d37babe9 Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Wed, 4 Mar 2026 17:18:12 +0800
Subject: [PATCH 9/9] docs(ui): add enterprise refresh acceptance and release
 gates

---
 docs/release-checklist.md                     |  7 +++++++
 docs/ui/enterprise-ui-acceptance-checklist.md | 17 +++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 docs/ui/enterprise-ui-acceptance-checklist.md

diff --git a/docs/release-checklist.md b/docs/release-checklist.md
index 0c4ee221..24121e6a 100644
--- a/docs/release-checklist.md
+++ b/docs/release-checklist.md
@@ -62,3 +62,10 @@
 - [ ] 文档已更新：`docs/setup-config-api.md`
 - [ ] 本清单已全量勾选
 - [ ] 发布说明已包含新增接口与权限规则
+
+## 10. Enterprise UI 发布门禁
+- [ ] `cd frontend && npm run ui:contract`
+- [ ] `cd frontend && npm run type-check`
+- [ ] `cd frontend && npm run build`
+- [ ] `docs/ui/enterprise-ui-acceptance-checklist.md` 状态为 `PASS` 且记录审阅日期
+- [ ] 管理层演示路径已走查：`/project/overview -> /project/milestones -> /risk-issues/sae -> /fees/contracts -> /file-versions -> /admin/projects/:id`
diff --git a/docs/ui/enterprise-ui-acceptance-checklist.md b/docs/ui/enterprise-ui-acceptance-checklist.md
new file mode 100644
index 00000000..a06ccaff
--- /dev/null
+++ b/docs/ui/enterprise-ui-acceptance-checklist.md
@@ -0,0 +1,17 @@
+# Enterprise UI Acceptance Checklist
+
+Status: `PASS`
+Date: `2026-03-04`
+Reviewer: `Codex`
+
+- [x] Overview and milestones visual consistency
+- [x] Risk pages visual consistency
+- [x] Finance pages visual consistency
+- [x] File/admin detail visual consistency
+- [x] Desktop and iPad width checks
+- [x] Management demo path continuity
+
+Notes:
+- Verified unified contract classes and shared shell usage on all target pages.
+- Verified enterprise state components and KPI contract alignment.
+- Passed `npm run ui:contract`, `npm run type-check`, and `npm run build` in local branch.