优化登录页UI、新增占满布局类

frontend/src/views/admin/AdminUserApproval.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <el-card shadow="never" class="main-content-card unified-shell">
+    <div class="main-content-flat unified-shell">
       <div class="filter-container unified-action-bar">
         <div class="filter-form">
           <el-tag type="info" effect="plain" class="filter-label-tag">{{ TEXT.common.fields.status }}</el-tag>
@@ -14,7 +14,7 @@
         </div>
       </div>
       <div class="unified-section approval-table-section">
-        <el-table :data="users" v-loading="loading" style="width: 100%">
+        <el-table :data="users" v-loading="loading" class="approval-table" style="width: 100%">
           <el-table-column prop="email" :label="TEXT.common.fields.email" min-width="200" />
           <el-table-column prop="full_name" :label="TEXT.common.fields.name" min-width="140" />
           <el-table-column prop="role" :label="TEXT.common.labels.role" width="120">
@@ -54,7 +54,7 @@
           </el-table-column>
         </el-table>
       </div>
-    </el-card>
+    </div>
   </div>
 </template>
 
@@ -124,12 +124,26 @@ onMounted(() => {
 .page {
   display: flex;
   flex-direction: column;
+  gap: 0;
+}
+
+.main-content-flat {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+
+.main-content-flat :deep(.el-card__body) {
+  padding: 0;
 }
 
 .filter-form {
   display: flex;
   width: 100%;
-  gap: 12px;
+  gap: 10px;
   align-items: center;
 }
 
@@ -146,7 +160,10 @@ onMounted(() => {
 }
 
 .approval-table-section {
-  padding-top: 12px;
-  padding-bottom: 12px;
+  padding: 0;
+}
+
+.approval-table :deep(.el-table__inner-wrapper::before) {
+  display: none;
 }
 </style>

frontend/src/views/admin/AuditLogs.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <el-card shadow="never" class="main-content-card unified-shell">
+    <div class="main-content-flat unified-shell">
       <div class="audit-toolbar">
         <el-form :inline="true" :model="filters" class="filter-form">
           <el-form-item label="" class="filter-item-form">
@@ -60,7 +60,7 @@
         </el-form>
       </div>
       <div class="unified-section table-section">
-        <el-table :data="logs" v-loading="loading" style="width: 100%" stripe>
+        <el-table :data="logs" v-loading="loading" class="audit-table" style="width: 100%" stripe>
           <el-table-column prop="timestamp" :label="TEXT.modules.adminAuditLogs.columns.time" width="180" align="center">
             <template #default="scope">
               <span class="text-gray-500">{{ displayDateTime(scope.row.timestamp) }}</span>
@@ -115,7 +115,7 @@
           />
         </div>
       </div>
-    </el-card>
+    </div>
 
     <el-drawer
       v-model="detailVisible"
@@ -425,21 +425,35 @@ onMounted(async () => {
 .page {
   display: flex;
   flex-direction: column;
+  gap: 0;
+}
+
+.main-content-flat {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+
+.main-content-flat :deep(.el-card__body) {
+  padding: 0;
 }
 
 .table-section {
-  padding-top: 12px;
-  padding-bottom: 12px;
+  padding: 0;
 }
 
 .audit-toolbar {
-  padding: 12px 16px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--unified-shell-divider);
 }
 
 .filter-form {
   display: flex;
   width: 100%;
-  gap: 10px;
+  gap: 8px;
   align-items: center;
   flex-wrap: nowrap;
 }
@@ -451,15 +465,15 @@ onMounted(async () => {
 }
 
 .filter-select-comp {
-  width: 140px;
+  width: 132px;
 }
 
 .filter-select-result {
-  width: 100px;
+  width: 96px;
 }
 
 .date-range-picker-comp {
-  width: 260px !important;
+  width: 248px !important;
 }
 
 .filter-spacer {
@@ -509,9 +523,14 @@ onMounted(async () => {
 }
 
 .pagination-wrap {
-  margin-top: 14px;
+  margin-top: 10px;
   display: flex;
   justify-content: flex-end;
+  padding: 0 0 6px;
+}
+
+.audit-table :deep(.el-table__inner-wrapper::before) {
+  display: none;
 }
 
 .drawer-header {

frontend/src/views/admin/ProjectDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ctms-page setup-page ctms-page-shell">
+  <div class="ctms-page setup-page ctms-page-shell page--flush">
     <div class="setup-shell unified-shell">
       <div class="setup-header unified-action-bar">
       <div class="setup-flow">
@@ -537,7 +537,7 @@
       <StateLoading v-else :rows="4" />
       </section>
 
-    <section v-show="activeStep === 1" class="setup-section">
+    <section v-show="activeStep === 1" class="setup-section setup-section--table">
       <el-table :data="currentSetupDraft.projectMilestones" class="ctms-table setup-milestone-table">
         <el-table-column label="里程碑" min-width="180">
           <template #default="scope">
@@ -668,7 +668,7 @@
       </el-table>
       </section>
 
-    <section v-show="activeStep === 2" class="setup-section enrollment-plan-section">
+    <section v-show="activeStep === 2" class="setup-section setup-section--table enrollment-plan-section">
       <div class="enrollment-plan-toolbar">
         <div class="enrollment-inline-group">
           <span class="enrollment-inline-label required">计划入组日期</span>
@@ -886,7 +886,7 @@
       </el-table>
       </section>
 
-    <section v-show="activeStep === 3" class="setup-section">
+    <section v-show="activeStep === 3" class="setup-section setup-section--table">
       <el-table :data="currentSetupDraft.siteMilestones" class="ctms-table">
         <el-table-column label="里程碑" min-width="220">
           <template #default="scope">
@@ -979,7 +979,7 @@
       </el-table>
       </section>
 
-    <section v-show="activeStep === 4" class="setup-section enrollment-plan-section">
+    <section v-show="activeStep === 4" class="setup-section setup-section--table enrollment-plan-section">
       <div class="enrollment-plan-toolbar">
         <div class="site-plan-selector">
           <span class="enrollment-inline-label">中心</span>
@@ -1226,7 +1226,7 @@
       </div>
     </section>
 
-    <section v-show="activeStep === 5" class="setup-section">
+    <section v-show="activeStep === 5" class="setup-section setup-section--table">
       <el-table :data="currentSetupDraft.monitoringStrategies" class="ctms-table">
         <el-table-column label="监查类型" min-width="180">
           <template #default="scope">
@@ -1303,7 +1303,7 @@
       </el-table>
       </section>
 
-    <section v-show="activeStep === 6" class="setup-section">
+    <section v-show="activeStep === 6" class="setup-section setup-section--table">
       <el-table :data="centerConfirmDisplayRows" class="ctms-table">
         <el-table-column label="中心" min-width="180">
           <template #default="scope">
@@ -6045,11 +6045,10 @@ onBeforeUnmount(() => {
 }
 
 .setup-shell {
-  border: 1px solid #d8e2ef;
-  border-radius: 16px;
+  border: 0;
   background: #ffffff;
   overflow: hidden;
-  box-shadow: 0 6px 20px rgba(17, 42, 88, 0.05);
+  box-shadow: none;
 }
 
 .setup-header {
@@ -6977,6 +6976,12 @@ onBeforeUnmount(() => {
   background: #ffffff;
 }
 
+.setup-section--table {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+}
+
 .enrollment-plan-section {
   display: flex;
   flex-direction: column;
@@ -7207,13 +7212,16 @@ onBeforeUnmount(() => {
 
 .setup-content {
   position: relative;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  padding-bottom: 0 !important;
 }
 
 .setup-content-step-title {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 10px 12px;
+  padding: 9px 12px;
   font-size: 18px;
   font-weight: 700;
   color: #162f57;
@@ -7473,6 +7481,12 @@ onBeforeUnmount(() => {
   margin-bottom: 10px;
 }
 
+.setup-section--table .setup-section-header {
+  margin-bottom: 0;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
 .setup-content.setup-content-drawer .setup-section-header {
   padding-bottom: 0;
   margin-bottom: 0;
@@ -7698,9 +7712,10 @@ onBeforeUnmount(() => {
 }
 
 .setup-section :deep(.el-table th.el-table__cell) {
-  background: #f8fafc !important;
-  color: #64748b !important;
-  font-weight: 500 !important;
+  background: #f7f9fc !important;
+  color: #34506f !important;
+  font-weight: 600 !important;
+  height: 40px;
   border-bottom: 1px solid #e2e8f0 !important;
   border-right: none !important;
   border-left: none !important;
@@ -7711,6 +7726,8 @@ onBeforeUnmount(() => {
   border-right: none !important;
   border-left: none !important;
   background: transparent !important;
+  padding-top: 7px;
+  padding-bottom: 7px;
 }
 
 /* 覆盖悬停状态颜色，保持极简高级 */

frontend/src/views/admin/ProjectMembers.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <el-card shadow="never" class="main-content-card unified-shell">
+    <div class="main-content-flat unified-shell">
       <div class="unified-action-bar actions-only-bar">
         <div class="filter-spacer"></div>
         <el-button type="primary" @click="openAdd">
@@ -8,7 +8,7 @@
         </el-button>
       </div>
       <div class="unified-section member-table-section">
-        <el-table :data="memberRows" v-loading="loading" stripe>
+        <el-table :data="memberRows" v-loading="loading" stripe class="member-table">
           <el-table-column prop="full_name" :label="TEXT.modules.adminProjectMembers.username" min-width="160" />
           <el-table-column prop="role_in_study" :label="TEXT.modules.adminProjectMembers.projectRole" min-width="140">
             <template #default="scope">
@@ -62,7 +62,7 @@
           </el-table-column>
         </el-table>
       </div>
-    </el-card>
+    </div>
 
     <el-dialog append-to=".layout-main .content-wrapper" :title="TEXT.modules.adminProjectMembers.newTitle" width="520px" v-model="addVisible" :close-on-click-modal="false">
       <el-form :model="newMember" label-width="120px" ref="addFormRef" :rules="addRules">
@@ -301,6 +301,20 @@ onMounted(async () => {
 .page {
   display: flex;
   flex-direction: column;
+  gap: 0;
+}
+
+.main-content-flat {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+
+.main-content-flat :deep(.el-card__body) {
+  padding: 0;
 }
 
 .actions-only-bar {
@@ -310,8 +324,11 @@ onMounted(async () => {
 }
 
 .member-table-section {
-  padding-top: 12px;
-  padding-bottom: 12px;
+  padding: 0;
+}
+
+.member-table :deep(.el-table__inner-wrapper::before) {
+  display: none;
 }
 
 .hint {

frontend/src/views/admin/Projects.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="page">
-    <el-card shadow="never" class="main-content-card unified-shell">
+    <div class="main-content-flat unified-shell">
       <div class="unified-action-bar actions-only-bar">
         <div class="filter-spacer"></div>
         <el-button type="primary" @click="openCreate">
           {{ TEXT.common.actions.add }}{{ TEXT.modules.adminProjects.projectLabel }}
         </el-button>
       </div>
-      <div class="unified-section">
-        <el-table :data="projects" v-loading="loading" stripe>
+      <div class="unified-section project-table-section">
+        <el-table :data="projects" v-loading="loading" stripe class="project-table">
           <el-table-column prop="name" :label="TEXT.common.fields.projectName" min-width="300">
             <template #default="scope">
               <el-link type="primary" @click="goDetail(scope.row)" class="font-medium">{{ scope.row.name }}</el-link>
@@ -57,7 +57,7 @@
           </el-table-column>
         </el-table>
       </div>
-    </el-card>
+    </div>
     <ProjectForm v-model:visible="formVisible" :project="editingProject" @saved="loadProjects" />
   </div>
 </template>
@@ -219,6 +219,20 @@ onMounted(() => {
 .page {
   display: flex;
   flex-direction: column;
+  gap: 0;
+}
+
+.main-content-flat {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+
+.main-content-flat :deep(.el-card__body) {
+  padding: 0;
 }
 
 .actions-only-bar {
@@ -227,9 +241,12 @@ onMounted(() => {
   align-items: center;
 }
 
-.unified-section {
-  padding-top: 12px;
-  padding-bottom: 12px;
+.project-table-section {
+  padding: 0;
+}
+
+.project-table :deep(.el-table__inner-wrapper::before) {
+  display: none;
 }
 
 .action-btn {

frontend/src/views/admin/Sites.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="page">
-    <el-card shadow="never" class="main-content-card unified-shell">
+  <div class="page page--flush">
+    <div class="main-content-flat unified-shell">
       <div class="unified-action-bar actions-only-bar">
         <div class="filter-spacer"></div>
         <el-button type="primary" @click="openCreate">
           {{ TEXT.common.actions.add }}{{ TEXT.modules.adminSites.siteLabel }}
         </el-button>
       </div>
-      <div class="unified-section site-table-section">
-        <el-table :data="displaySites" v-loading="loading" stripe :row-class-name="siteRowClass" style="width: 100%">
+      <div class="unified-section site-table-section section--flush-x section--flush-top section--flush-bottom">
+        <el-table :data="displaySites" v-loading="loading" stripe :row-class-name="siteRowClass" style="width: 100%" class="site-table">
           <el-table-column prop="name" :label="TEXT.common.fields.siteName" min-width="220">
             <template #default="scope">
               <div class="site-name-cell">
@@ -61,7 +61,7 @@
           </el-table-column>
         </el-table>
       </div>
-    </el-card>
+    </div>
     <SiteForm
       v-if="projectId"
       v-model:visible="formVisible"
@@ -278,9 +278,8 @@ onMounted(async () => {
   align-items: center;
 }
 
-.site-table-section {
-  padding-top: 12px;
-  padding-bottom: 12px;
+.site-table :deep(.el-table__inner-wrapper::before) {
+  display: none;
 }
 
 .site-name-cell {

frontend/src/views/admin/Users.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <el-card shadow="never" class="main-content-card unified-shell">
+    <div class="main-content-flat unified-shell">
       <div class="filter-container unified-action-bar">
         <div class="filter-form">
           <el-form-item label="" class="filter-item-form">
@@ -28,7 +28,7 @@
       </div>
 
       <div class="unified-section user-table-section">
-        <el-table :data="users" stripe v-loading="loading" style="width: 100%">
+        <el-table :data="users" stripe v-loading="loading" class="user-table" style="width: 100%">
           <el-table-column prop="email" :label="TEXT.common.fields.email" min-width="200" />
           <el-table-column prop="full_name" :label="TEXT.common.fields.name" min-width="140" />
           <el-table-column prop="department" :label="TEXT.common.fields.department" min-width="140" />
@@ -84,7 +84,7 @@
           />
         </div>
       </div>
-    </el-card>
+    </div>
     <UserForm v-model:visible="formVisible" :user="editingUser" :admin-count="activeAdminCount" @saved="loadUsers" />
     <UserResetPassword v-model:visible="resetVisible" :user="resetUser" @reset="loadUsers" />
   </div>
@@ -291,12 +291,26 @@ onMounted(() => {
 .page {
   display: flex;
   flex-direction: column;
+  gap: 0;
+}
+
+.main-content-flat {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+
+.main-content-flat :deep(.el-card__body) {
+  padding: 0;
 }
 
 .filter-form {
   display: flex;
   width: 100%;
-  gap: 12px;
+  gap: 10px;
   align-items: center;
 }
 
@@ -306,7 +320,7 @@ onMounted(() => {
 }
 
 .filter-input-comp {
-  width: 200px;
+  width: 190px;
 }
 
 .filter-spacer {
@@ -314,13 +328,31 @@ onMounted(() => {
 }
 
 .user-table-section {
+  padding: 0;
+}
+
+.user-table {
+  margin-top: 0;
+}
+
+.user-table :deep(.el-table__inner-wrapper::before) {
+  display: none;
+}
+
+.user-table :deep(th.el-table__cell) {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.user-table :deep(td.el-table__cell) {
   padding-top: 12px;
   padding-bottom: 12px;
 }
 
 .pagination-wrap {
-  margin-top: 14px;
+  margin-top: 10px;
   display: flex;
   justify-content: flex-end;
+  padding: 0 0 6px;
 }
 </style>