feat:表格优化
This commit is contained in:
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',
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in new issue
Block a user