From 2fcbd265b31f22d95c49822efcae9930a41bb34b Mon Sep 17 00:00:00 2001
From: qian <wuchengqian5@163.com>
Date: Wed, 2 Sep 2026 23:03:56 +0800
Subject: [PATCH] =?UTF-8?q?improve(ui):=E4=BC=98=E5=8C=96=E7=94=A8?=
 =?UTF-8?q?=E9=87=8F=E6=97=A5=E5=BF=97=E9=A1=B5=E9=9D=A2=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/admin/src/views/tenant/UsageLogsPage.vue | 166 ++++++++++++-------
 1 file changed, 105 insertions(+), 61 deletions(-)

diff --git a/web/admin/src/views/tenant/UsageLogsPage.vue b/web/admin/src/views/tenant/UsageLogsPage.vue
index 63b3d9a..d6fb6af 100644
--- a/web/admin/src/views/tenant/UsageLogsPage.vue
+++ b/web/admin/src/views/tenant/UsageLogsPage.vue
@@ -49,6 +49,7 @@ const filterDateRange = ref<string[]>(defaultTodayRange())
 
 const tenantOptions = ref<{ label: string; value: number }[]>([])
 const modelOptions = ref<{ label: string; value: string }[]>([])
+const channelOptions = ref<{ label: string; value: number }[]>([])
 
 const statusOptions = [
 	{ label: '成功', value: 'success' },
@@ -107,6 +108,22 @@ function handleModelSearch(value: string) {
 	modelSearchTimer = setTimeout(() => fetchModelOptions(value), 300)
 }
 
+// 渠道下拉数据：渠道量级为几十，一次性拉全量（后端分页限制最大 100），本地过滤即可
+async function fetchChannelOptions() {
+	try {
+		const res: any = await request.get('/admin/channels', {
+			params: { page: 1, page_size: 100 }
+		})
+		const list = res.data?.data?.list || res.data?.list || []
+		channelOptions.value = list.map((c: any) => ({
+			label: c.name ? `${c.name} (#${c.id})` : `#${c.id}`,
+			value: c.id,
+		}))
+	} catch {
+		channelOptions.value = []
+	}
+}
+
 const statusTagColor: Record<string, string> = {
 	success: 'green',
 	failed: 'red',
@@ -600,6 +617,7 @@ function handleRefresh() {
 onMounted(() => {
 	fetchTenantOptions()
 	fetchModelOptions()
+	fetchChannelOptions()
 	fetchData()
 	fetchSummary() // 初始加载时获取统计数据
 })
@@ -639,7 +657,8 @@ const { exporting, exportFile } = useExport({
 		</PageHeader>
 
 		<a-card :bordered="false" class="mb-4">
-			<a-space wrap>
+			<div class="filter-bar">
+				<!-- 时间范围恒为首个筛选条件 -->
 				<a-range-picker
 					v-model="filterDateRange"
 					show-time
@@ -648,71 +667,38 @@ const { exporting, exportFile } = useExport({
 					style="width: 340px"
 					@change="handleFilter"
 				/>
-				<a-input-number
-					v-model="filterId"
-					placeholder="记录ID"
-					:min="1"
+				<!-- 常用筛选：租户/渠道/模型/状态/类型 -->
+				<a-select
+					v-model="filterTenantId"
+					:options="tenantOptions"
+					placeholder="租户"
+					allow-search
 					allow-clear
-					style="width: 120px"
+					:filter-option="false"
+					style="width: 200px"
+					@search="handleTenantSearch"
 					@change="handleFilter"
 					@clear="handleFilter"
 				/>
 				<a-select
-						v-model="filterTenantId"
-						:options="tenantOptions"
-						placeholder="租户ID"
-						allow-search
-						allow-clear
-						:filter-option="false"
-						style="width: 200px"
-						@search="handleTenantSearch"
-						@change="handleFilter"
-						@clear="handleFilter"
-					/>
-				<a-input-number
-					v-model="filterUserId"
-					placeholder="用户ID"
-					:min="1"
-					allow-clear
-					style="width: 120px"
-					@change="handleFilter"
-					@clear="handleFilter"
-				/>
-				<a-select
-						v-model="filterModel"
-						:options="modelOptions"
-						placeholder="搜索模型"
-						allow-search
-						allow-clear
-						:filter-option="false"
-						style="width: 200px"
-						@search="handleModelSearch"
-						@change="handleFilter"
-						@clear="handleFilter"
-					/>
-				<a-input-number
-					v-model="filterApiKeyId"
-					placeholder="API Key ID"
-					:min="1"
-					allow-clear
-					style="width: 120px"
-					@change="handleFilter"
-					@clear="handleFilter"
-				/>
-				<a-select
-					v-model="filterRequestType"
-					:options="requestTypeOptions"
-					placeholder="请求类型"
-					allow-clear
-					style="width: 120px"
-					@change="handleFilter"
-				/>
-				<a-input-number
 					v-model="filterChannelId"
-					placeholder="渠道ID"
-					:min="1"
+					:options="channelOptions"
+					placeholder="渠道"
+					allow-search
 					allow-clear
-					style="width: 120px"
+					style="width: 200px"
+					@change="handleFilter"
+					@clear="handleFilter"
+				/>
+				<a-select
+					v-model="filterModel"
+					:options="modelOptions"
+					placeholder="模型"
+					allow-search
+					allow-clear
+					:filter-option="false"
+					style="width: 220px"
+					@search="handleModelSearch"
 					@change="handleFilter"
 					@clear="handleFilter"
 				/>
@@ -724,8 +710,45 @@ const { exporting, exportFile } = useExport({
 					style="width: 120px"
 					@change="handleFilter"
 				/>
-				<a-button type="primary" @click="handleFilter">搜索</a-button>
-			</a-space>
+				<a-select
+					v-model="filterRequestType"
+					:options="requestTypeOptions"
+					placeholder="请求类型"
+					allow-clear
+					style="width: 120px"
+					@change="handleFilter"
+				/>
+				<!-- 精确 ID 排查条件 -->
+				<a-input-number
+					v-model="filterId"
+					placeholder="记录ID"
+					:min="1"
+					allow-clear
+					style="width: 120px"
+					@change="handleFilter"
+					@clear="handleFilter"
+				/>
+				<a-input-number
+					v-model="filterUserId"
+					placeholder="用户ID"
+					:min="1"
+					allow-clear
+					style="width: 120px"
+					@change="handleFilter"
+					@clear="handleFilter"
+				/>
+				<a-input-number
+					v-model="filterApiKeyId"
+					placeholder="API Key ID"
+					:min="1"
+					allow-clear
+					style="width: 130px"
+					@change="handleFilter"
+					@clear="handleFilter"
+				/>
+				<!-- 搜索按钮恒为最后一项，行尾靠右 -->
+				<a-button type="primary" class="filter-search-btn" @click="handleFilter">搜索</a-button>
+			</div>
 		</a-card>
 
 		<a-card :bordered="false">
@@ -1524,4 +1547,25 @@ const { exporting, exportFile } = useExport({
 .table-footer :deep(.table-stats) {
 	margin-bottom: 0;
 }
+
+/* 筛选栏：flex 换行布局，搜索按钮恒为最后一项并靠其所在行行尾 */
+.filter-bar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+}
+.filter-search-btn {
+	margin-left: auto;
+}
+/* 移动端：筛选控件铺满整行（覆盖 inline 定宽），主按钮同样全宽便于点按 */
+@media (max-width: 768px) {
+	.filter-bar > * {
+		flex: 1 1 100%;
+		width: 100% !important;
+	}
+	.filter-search-btn {
+		margin-left: 0;
+	}
+}
 </style>