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] 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">