feat:表格优化

This commit is contained in:
chengqian committed 2026-07-27 18:56:11 +08:00
1 parent ba88fb6bf0
commit 065a2ee7e8
2 files changed
+29 -27

No files matched your search

@@ -42,6 +42,7 @@ const icons: Record<string, string> = {
search: 'M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z',
more: 'M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z',
copy: 'M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184',
download: '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',
check: 'M4.5 12.75l6 6 9-13.5',
x: 'M6 18L18 6M6 6l12 12',
+28 -27
View File
@@ -226,30 +226,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">查看 API 调用记录和消费明细</p>
</div>
<div class="relative inline-block">
<button class="btn-secondary btn-sm inline-flex items-center gap-1.5" :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>
</div>
<!-- Filters -->
<!-- Filters -->
<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="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" />
@@ -275,12 +255,33 @@ onMounted(() => {
<BaseSelect v-model="filterRequestType" :options="[{value:'',label:'全部'},{value:'1',label:'同步'},{value:'2',label:'流式'},{value:'3',label:'异步'}]" container-class="w-[100px]" />
</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"
@click="showExportDropdown = !showExportDropdown"
>
<span v-if="exporting" class="spinner h-4 w-4"></span>
<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>
</div>
</form>
</div>
</div>
<!-- Logs Table -->
<div class="viewport-table-panel card overflow-hidden">
<div v-if="loading" class="p-8 flex justify-center">