立项配置页初步优化

frontend/src/views/ia/FinanceSpecial.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="page">
-
-    <el-card class="filter-card" shadow="never">
-      <div class="filter-row">
+    <el-card shadow="never" class="main-content-card unified-shell">
+      <div class="filter-container unified-action-bar">
         <el-form :inline="true" :model="filters" class="filter-form">
           <el-form-item label="" class="filter-item-form">
             <el-input 
@@ -29,59 +28,58 @@
             <el-button @click="resetFilters">{{ TEXT.common.actions.reset }}</el-button>
           </el-form-item>
           <div class="filter-spacer"></div>
-          <el-button type="primary" @click="goNew" class="header-action-btn">
+          <el-button type="primary" @click="goNew">
             {{ TEXT.modules.financeSpecials.newTitle }}
           </el-button>
         </el-form>
       </div>
-    </el-card>
-
-    <el-card>
-      <el-table
-        :data="sortedItems"
-        v-loading="loading"
-        style="width: 100%"
-        class="ctms-table"
-        @row-click="onRowClick"
-        :row-class-name="specialRowClass"
-      >
-        <el-table-column prop="site_name" :label="TEXT.common.fields.site" min-width="160" />
-        <el-table-column prop="fee_type" :label="TEXT.common.fields.type" width="120">
-          <template #default="scope">
-            {{ displayEnum(TEXT.enums.financeSpecialType, scope.row.fee_type) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="occur_date" :label="TEXT.common.fields.occurDate" width="140">
-          <template #default="scope">
-            {{ displayDate(scope.row.occur_date) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="staff_name" :label="TEXT.common.fields.staff" min-width="120" />
-        <el-table-column :label="TEXT.common.fields.amount" width="140">
-          <template #default="scope">
-            {{ scope.row.amount }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="updated_at" :label="TEXT.common.labels.updatedAt" width="180">
-          <template #default="scope">
-            {{ displayDateTime(scope.row.updated_at) }}
-          </template>
-        </el-table-column>
-        <el-table-column :label="TEXT.common.labels.actions" width="120">
-          <template #default="scope">
-            <el-button
-              link
-              type="danger"
-              size="small"
-              :disabled="isInactiveSite(scope.row.site_name)"
-              @click.stop="remove(scope.row)"
-            >
-              {{ TEXT.common.actions.delete }}
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <StateEmpty v-if="!loading && sortedItems.length === 0" :description="TEXT.modules.financeSpecials.empty" />
+      <div class="unified-section table-section">
+        <el-table
+          :data="sortedItems"
+          v-loading="loading"
+          style="width: 100%"
+          class="ctms-table"
+          @row-click="onRowClick"
+          :row-class-name="specialRowClass"
+        >
+          <el-table-column prop="site_name" :label="TEXT.common.fields.site" min-width="160" />
+          <el-table-column prop="fee_type" :label="TEXT.common.fields.type" width="120">
+            <template #default="scope">
+              {{ displayEnum(TEXT.enums.financeSpecialType, scope.row.fee_type) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="occur_date" :label="TEXT.common.fields.occurDate" width="140">
+            <template #default="scope">
+              {{ displayDate(scope.row.occur_date) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="staff_name" :label="TEXT.common.fields.staff" min-width="120" />
+          <el-table-column :label="TEXT.common.fields.amount" width="140">
+            <template #default="scope">
+              {{ scope.row.amount }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="updated_at" :label="TEXT.common.labels.updatedAt" width="180">
+            <template #default="scope">
+              {{ displayDateTime(scope.row.updated_at) }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.common.labels.actions" width="120">
+            <template #default="scope">
+              <el-button
+                link
+                type="danger"
+                size="small"
+                :disabled="isInactiveSite(scope.row.site_name)"
+                @click.stop="remove(scope.row)"
+              >
+                {{ TEXT.common.actions.delete }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <StateEmpty v-if="!loading && sortedItems.length === 0" :description="TEXT.modules.financeSpecials.empty" />
+      </div>
     </el-card>
   </div>
 </template>
@@ -194,17 +192,6 @@ onMounted(async () => {
 .page {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-}
-
-.filter-card {
-  border: none;
-  background-color: transparent;
-  padding: 0;
-}
-
-.filter-card :deep(.el-card__body) {
-  padding: 0;
 }
 
 .filter-form {
@@ -212,18 +199,6 @@ onMounted(async () => {
   width: 100%;
   gap: 12px;
   align-items: center;
-  background: white;
-  padding: 12px 16px;
-  border-radius: 10px;
-  border: 1px solid var(--ctms-border-color);
-  box-sizing: border-box;
-}
-
-.filter-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
 }
 
 .filter-item-form {
@@ -243,10 +218,9 @@ onMounted(async () => {
   flex: 1;
 }
 
-.header-action-btn {
-  height: 36px;
-  padding: 0 20px;
-  border-radius: 8px;
+.table-section {
+  padding-top: 12px;
+  padding-bottom: 12px;
 }
 
 </style>