From 7a2c9abd2be68b7c3cc182bc315b35384e10dff5 Mon Sep 17 00:00:00 2001
From: chengqian <wuchengqian5@163.com>
Date: Mon, 27 Jul 2026 21:21:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=A1=A8=E6=A0=BC=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/finance/TransactionsPage.vue    | 59 +++++++++----------
 .../views/service/RequestAuditLogsPage.vue    | 26 ++++----
 web/tenant/src/views/service/TaskLogsPage.vue | 48 +++++++--------
 .../src/views/service/UsageLogsPage.vue       |  4 +-
 4 files changed, 63 insertions(+), 74 deletions(-)

diff --git a/web/tenant/src/views/finance/TransactionsPage.vue b/web/tenant/src/views/finance/TransactionsPage.vue
index 718d852..1f0ad12 100644
--- a/web/tenant/src/views/finance/TransactionsPage.vue
+++ b/web/tenant/src/views/finance/TransactionsPage.vue
@@ -121,35 +121,10 @@ onMounted(fetchTransactions)
 
 <template>
 	<div class="viewport-table-page space-y-6">
-		<!-- Page Header -->
-		<div class="flex items-start justify-between">
-			<div>
-				<h1 class="page-title">交易记录</h1>
-				<p class="page-description">查看所有交易流水明细 · 共 {{ total }} 条记录</p>
-			</div>
-			<div class="flex items-center gap-2 flex-shrink-0">
-				<div class="relative inline-block">
-					<button class="btn btn-secondary btn-sm" :disabled="exporting" @click="showExportDropdown = !showExportDropdown">
-						<svg v-if="!exporting" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
-						<svg v-else class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
-						导出
-					</button>
-					<div v-if="showExportDropdown" class="absolute right-0 mt-2 w-36 bg-white rounded-xl border shadow-lg py-1 z-50">
-						<div class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" @click="exportFile('csv'); showExportDropdown = false">导出 CSV</div>
-						<div class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer" @click="exportFile('xlsx'); showExportDropdown = false">导出 Excel</div>
-					</div>
-				</div>
-				<button class="btn btn-ghost btn-sm" @click="fetchTransactions">
-					<Icon name="refresh" size="sm" />
-					刷新
-				</button>
-			</div>
-		</div>
-
 		<!-- Filters -->
-		<div class="card">
-			<div class="card-body">
-				<div class="flex flex-wrap items-center gap-4">
+		<div class="relative z-20 overflow-visible card">
+			<div class="card-body !p-4">
+				<form class="flex flex-wrap items-center gap-x-3 gap-y-3" @submit.prevent="applyFilters">
 					<div class="flex items-center gap-2">
 						<label class="text-sm text-gray-500 whitespace-nowrap">开始日期</label>
 						<input v-model="filterStartDate" type="date" class="input" style="width:140px" />
@@ -177,15 +152,35 @@ onMounted(fetchTransactions)
 						<input v-model="filterModel" type="text" placeholder="例如：gpt-4o" class="input" style="width:150px" @keyup.enter="applyFilters" />
 					</div>
 					<div class="ml-auto flex items-center gap-2">
-						<button class="btn btn-primary btn-sm" @click="applyFilters">搜索</button>
-						<button class="btn btn-secondary btn-sm" @click="resetFilters">重置</button>
+						<button type="submit" class="btn btn-primary btn-sm">
+							<Icon name="search" size="sm" />
+							搜索
+						</button>
+						<button type="button" class="btn btn-secondary btn-sm" @click="resetFilters">重置</button>
+						<span class="mx-1 h-6 w-px bg-gray-200" aria-hidden="true"></span>
+						<button type="button" class="btn btn-ghost btn-sm" :disabled="loading" @click="fetchTransactions">
+							<Icon name="refresh" size="sm" :class="{ 'animate-spin': loading }" />
+							刷新
+						</button>
+						<div class="relative">
+							<button type="button" class="btn btn-secondary btn-sm" :disabled="exporting" @click="showExportDropdown = !showExportDropdown">
+								<Icon v-if="exporting" name="refresh" size="sm" class="animate-spin" />
+								<Icon v-else name="download" size="sm" />
+								导出
+								<Icon name="chevronDown" size="xs" />
+							</button>
+							<div v-if="showExportDropdown" class="absolute right-0 z-50 mt-2 w-36 overflow-hidden rounded-lg border border-gray-200 bg-white py-1 shadow-lg">
+								<button type="button" class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50" @click="exportFile('csv'); showExportDropdown = false">导出 CSV</button>
+								<button type="button" class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50" @click="exportFile('xlsx'); showExportDropdown = false">导出 Excel</button>
+							</div>
+						</div>
 					</div>
-				</div>
+				</form>
 			</div>
 		</div>
 
 		<!-- Transactions -->
-		<div class="viewport-table-panel card">
+		<div class="viewport-table-panel relative z-0 card">
 			<div v-if="loading" class="p-8 flex justify-center">
 				<div class="spinner h-6 w-6 border-primary-500"></div>
 			</div>
diff --git a/web/tenant/src/views/service/RequestAuditLogsPage.vue b/web/tenant/src/views/service/RequestAuditLogsPage.vue
index ace70d4..96ceb45 100644
--- a/web/tenant/src/views/service/RequestAuditLogsPage.vue
+++ b/web/tenant/src/views/service/RequestAuditLogsPage.vue
@@ -184,19 +184,10 @@ onMounted(() => {
 
 <template>
 	<div class="viewport-table-page space-y-6">
-		<!-- Page Header -->
-		<div class="page-header">
-			<div>
-				<h1 class="page-title">请求审计日志</h1>
-				<p class="page-description">查看 API 请求的输入输出记录</p>
-			</div>
-		</div>
-
 		<!-- Filter -->
-			<!-- Filter -->
-			<div class="card">
-				<div class="card-body">
-					<div class="flex flex-wrap items-center gap-4">
+		<div class="card">
+			<div class="card-body !p-4">
+				<form class="flex flex-wrap items-center gap-x-3 gap-y-3" @submit.prevent="handleFilter">
 						<div class="flex items-center gap-2">
 							<label class="text-sm text-gray-500 whitespace-nowrap">开始日期</label>
 							<input v-model="logFilter.start_date" type="date" class="input" style="width:140px" />
@@ -226,12 +217,15 @@ onMounted(() => {
 							<input v-model="logFilter.status_code" class="input" placeholder="200" style="width:80px" @keydown.enter="handleFilter" />
 						</div>
 						<div class="ml-auto flex items-center gap-2">
-							<button class="btn btn-primary btn-sm" @click="handleFilter">搜索</button>
-							<button class="btn btn-secondary btn-sm" @click="handleReset">重置</button>
+							<button type="submit" class="btn btn-primary btn-sm">
+								<Icon name="search" size="sm" />
+								搜索
+							</button>
+							<button type="button" class="btn btn-secondary btn-sm" @click="handleReset">重置</button>
 						</div>
-					</div>
-				</div>
+					</form>
 			</div>
+		</div>
 		<!-- Table -->
 		<div class="viewport-table-panel card p-0 overflow-hidden">
 			<!-- Loading -->
diff --git a/web/tenant/src/views/service/TaskLogsPage.vue b/web/tenant/src/views/service/TaskLogsPage.vue
index 67ccd12..08c2778 100644
--- a/web/tenant/src/views/service/TaskLogsPage.vue
+++ b/web/tenant/src/views/service/TaskLogsPage.vue
@@ -37,6 +37,7 @@ const total = ref(0)
 const filterStatus = ref('')
 const filterPlatform = ref('')
 const filterTaskId = ref('')
+const showExportDropdown = ref(false)
 
 const showDetail = ref(false)
 const detailLoading = ref(false)
@@ -157,27 +158,10 @@ onMounted(() => {
 
 <template>
 	<div class="viewport-table-page space-y-6">
-		<!-- Page Header -->
-		<div class="page-header flex items-center justify-between">
-			<div>
-				<h1 class="page-title">任务日志</h1>
-				<p class="page-description">查看异步生成任务（视频/图片/音乐）的执行记录</p>
-			</div>
-			<div class="flex items-center gap-2">
-				<button class="btn btn-secondary btn-sm" :disabled="exporting || loading" @click="exportFile('csv')">
-					<Icon v-if="exporting" name="refresh" size="xs" class="animate-spin" />
-					{{ exporting ? '导出中...' : '导出 CSV' }}
-				</button>
-				<button class="btn btn-secondary btn-sm" :disabled="exporting || loading" @click="exportFile('xlsx')">
-					{{ exporting ? '导出中...' : '导出 Excel' }}
-				</button>
-			</div>
-		</div>
-
 		<!-- Filters -->
-		<div class="card">
-			<div class="card-body">
-				<div class="flex flex-wrap items-center gap-4">
+		<div class="relative z-20 overflow-visible card">
+			<div class="card-body !p-4">
+				<form class="flex flex-wrap items-center gap-x-3 gap-y-3" @submit.prevent="applyFilters">
 					<div class="flex items-center gap-2">
 						<label class="text-sm text-gray-500 whitespace-nowrap">任务 ID</label>
 						<input v-model="filterTaskId" class="input" placeholder="搜索任务 ID" style="width:200px" @keydown.enter="applyFilters" />
@@ -191,15 +175,31 @@ onMounted(() => {
 						<BaseSelect v-model="filterPlatform" :options="[{value:'',label:'全部'},{value:'sora',label:'Sora'},{value:'kling',label:'Kling'},{value:'midjourney',label:'Midjourney'},{value:'suno',label:'Suno'},{value:'volcengine',label:'火山引擎'},{value:'ali',label:'阿里'}]" container-class="w-[120px]" />
 					</div>
 					<div class="ml-auto flex items-center gap-2">
-						<button class="btn btn-primary btn-sm" @click="applyFilters">搜索</button>
-						<button class="btn btn-secondary btn-sm" @click="resetFilters">重置</button>
+						<button type="submit" class="btn btn-primary btn-sm">
+							<Icon name="search" size="sm" />
+							搜索
+						</button>
+						<button type="button" class="btn btn-secondary btn-sm" @click="resetFilters">重置</button>
+						<span class="mx-1 h-6 w-px bg-gray-200" aria-hidden="true"></span>
+						<div class="relative">
+							<button type="button" class="btn btn-secondary btn-sm" :disabled="exporting || loading" @click="showExportDropdown = !showExportDropdown">
+								<Icon v-if="exporting" name="refresh" size="sm" class="animate-spin" />
+								<Icon v-else name="download" size="sm" />
+								导出
+								<Icon name="chevronDown" size="xs" />
+							</button>
+							<div v-if="showExportDropdown" class="absolute right-0 z-50 mt-2 w-36 overflow-hidden rounded-lg border border-gray-200 bg-white py-1 shadow-lg">
+								<button type="button" class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50" @click="exportFile('csv'); showExportDropdown = false">导出 CSV</button>
+								<button type="button" class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50" @click="exportFile('xlsx'); showExportDropdown = false">导出 Excel</button>
+							</div>
+						</div>
 					</div>
-				</div>
+				</form>
 			</div>
 		</div>
 
 		<!-- Table -->
-		<div class="viewport-table-panel card p-0 overflow-hidden">
+		<div class="viewport-table-panel relative z-0 card p-0 overflow-hidden">
 			<div v-if="loading" class="p-8 text-center">
 				<div class="spinner mx-auto mb-3"></div>
 				<p class="text-sm text-gray-500">加载中...</p>
diff --git a/web/tenant/src/views/service/UsageLogsPage.vue b/web/tenant/src/views/service/UsageLogsPage.vue
index 5ae1019..14a7ac4 100644
--- a/web/tenant/src/views/service/UsageLogsPage.vue
+++ b/web/tenant/src/views/service/UsageLogsPage.vue
@@ -227,7 +227,7 @@ onMounted(() => {
 <template>
 	<div class="viewport-table-page space-y-6">
 		<!-- Filters -->
-		<div class="card">
+		<div class="relative z-20 overflow-visible card">
 			<div class="card-body !p-4">
 				<form class="flex flex-wrap items-center gap-x-3 gap-y-3" @submit.prevent="applyFilters">
 						<div class="flex items-center gap-2">
@@ -283,7 +283,7 @@ onMounted(() => {
 			</div>
 		</div>
 		<!-- Logs Table -->
-		<div class="viewport-table-panel card overflow-hidden">
+		<div class="viewport-table-panel relative z-0 card overflow-hidden">
 			<div v-if="loading" class="p-8 flex justify-center">
 				<div class="spinner h-6 w-6 border-primary-500"></div>
 			</div>