未知（继上次中断）

frontend/src/views/ia/FinanceSpecial.vue

@@ -1,31 +1,39 @@
 <template>
   <div class="page">
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">{{ TEXT.modules.financeSpecials.title }}</h1>
-        <p class="page-subtitle">{{ TEXT.modules.financeSpecials.subtitle }}</p>
-      </div>
-      <el-button type="primary" @click="goNew">{{ TEXT.modules.financeSpecials.newTitle }}</el-button>
-    </div>
 
-    <el-card class="filter-card">
-      <el-form :inline="true" :model="filters">
-        <el-form-item :label="TEXT.common.fields.site">
-          <el-input v-model="filters.site_name" :placeholder="TEXT.common.placeholders.input + TEXT.common.fields.site" clearable />
-        </el-form-item>
-        <el-form-item :label="TEXT.common.fields.type">
-          <el-select v-model="filters.fee_type" :placeholder="TEXT.common.placeholders.select" clearable>
-            <el-option :label="TEXT.enums.financeSpecialType.TRAVEL" value="TRAVEL" />
-            <el-option :label="TEXT.enums.financeSpecialType.HOTEL" value="HOTEL" />
-            <el-option :label="TEXT.enums.financeSpecialType.TRANSPORT" value="TRANSPORT" />
-            <el-option :label="TEXT.enums.financeSpecialType.OTHER" value="OTHER" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="load">{{ TEXT.common.actions.search }}</el-button>
-          <el-button @click="resetFilters">{{ TEXT.common.actions.reset }}</el-button>
-        </el-form-item>
-      </el-form>
+    <el-card class="filter-card" shadow="never">
+      <div class="filter-row">
+        <el-form :inline="true" :model="filters" class="filter-form">
+          <el-form-item label="" class="filter-item-form">
+            <el-input 
+              v-model="filters.site_name" 
+              :placeholder="TEXT.common.fields.site" 
+              clearable 
+              class="filter-input-comp"
+            />
+          </el-form-item>
+          <el-form-item label="" class="filter-item-form">
+            <el-select 
+              v-model="filters.fee_type" 
+              :placeholder="TEXT.common.fields.type" 
+              clearable
+              class="filter-select-comp"
+            >
+              <el-option :label="TEXT.enums.financeSpecialType.TRAVEL" value="TRAVEL" />
+              <el-option :label="TEXT.enums.financeSpecialType.HOTEL" value="HOTEL" />
+              <el-option :label="TEXT.enums.financeSpecialType.TRANSPORT" value="TRANSPORT" />
+              <el-option :label="TEXT.enums.financeSpecialType.OTHER" value="OTHER" />
+            </el-select>
+          </el-form-item>
+          <el-form-item class="filter-item-form">
+            <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">
+            {{ TEXT.modules.financeSpecials.newTitle }}
+          </el-button>
+        </el-form>
+      </div>
     </el-card>
 
     <el-card>
@@ -109,8 +117,16 @@ const siteActiveMap = computed(() => {
 const isInactiveSite = (siteName?: string) => !!siteName && siteActiveMap.value[siteName] === false;
 const specialRowClass = ({ row }: { row: any }) =>
   `${row?.id ? "clickable-row" : ""}${isInactiveSite(row?.site_name) ? " row-inactive" : ""}`.trim();
+const filteredItems = computed(() => {
+  const keyword = filters.site_name.trim().toLowerCase();
+  return items.value.filter((item) => {
+    if (keyword && !String(item?.site_name || "").toLowerCase().includes(keyword)) return false;
+    if (filters.fee_type && item?.fee_type !== filters.fee_type) return false;
+    return true;
+  });
+});
 const sortedItems = computed(() =>
-  [...items.value].sort((a, b) => Number(isInactiveSite(a?.site_name)) - Number(isInactiveSite(b?.site_name)))
+  [...filteredItems.value].sort((a, b) => Number(isInactiveSite(a?.site_name)) - Number(isInactiveSite(b?.site_name)))
 );
 
 const loadSites = async () => {
@@ -129,10 +145,7 @@ const load = async () => {
   if (!studyId) return;
   loading.value = true;
   try {
-    const { data } = await listFinanceSpecials(studyId, {
-      site_name: filters.site_name || undefined,
-      fee_type: filters.fee_type || undefined,
-    });
+    const { data } = await listFinanceSpecials(studyId, {}) as any;
     items.value = Array.isArray(data) ? data : data.items || [];
   } catch (e: any) {
     ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
@@ -144,7 +157,6 @@ const load = async () => {
 const resetFilters = () => {
   filters.site_name = "";
   filters.fee_type = "";
-  load();
 };
 
 const goNew = () => router.push("/finance/special/new");
@@ -182,29 +194,59 @@ onMounted(async () => {
 .page {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 12px;
 }
 
-.page-header {
+.filter-card {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+.filter-card :deep(.el-card__body) {
+  padding: 0;
+}
+
+.filter-form {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
+  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;
 }
 
-.page-title {
-  margin: 0;
-  font-size: 22px;
-  font-weight: 600;
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
 }
 
-.page-subtitle {
-  margin: 6px 0 0;
-  font-size: 13px;
-  color: var(--ctms-text-secondary);
+.filter-item-form {
+  margin-bottom: 0 !important;
+  margin-right: 0 !important;
 }
 
-.filter-card :deep(.el-form-item) {
-  margin-bottom: 0;
+.filter-input-comp {
+  width: 160px;
+}
+
+.filter-select-comp {
+  width: 140px;
+}
+
+.filter-spacer {
+  flex: 1;
+}
+
+.header-action-btn {
+  height: 36px;
+  padding: 0 20px;
+  border-radius: 8px;
 }
 
 </style>