From 4be0853ade19f842c0a1234b7363e48b297f1c87 Mon Sep 17 00:00:00 2001
From: skycurtain <skycurtain@163.com>
Date: Fri, 9 Oct 2026 23:42:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E8=A1=A8=E6=A0=BC=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E8=A1=8C=E7=BB=9F=E4=B8=80=E5=88=B7=E6=96=B0=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

纯图标 + tooltip，筛选下一行右对齐；覆盖管理端与成员端列表；清理 overview 未用 ref。
---
 .../src/components/common/table-refresh.vue   | 33 +++++++++++++++++++
 apps/web/src/views/admin/audit-view.vue       |  6 ++++
 apps/web/src/views/admin/keys-view.vue        |  6 ++++
 apps/web/src/views/admin/logs-view.vue        |  6 ++++
 apps/web/src/views/admin/members-view.vue     |  6 ++++
 apps/web/src/views/admin/overview-view.vue    |  7 +++-
 apps/web/src/views/admin/payments-view.vue    |  9 +++++
 apps/web/src/views/member/logs-view.vue       |  8 ++++-
 apps/web/src/views/member/overview-view.vue   |  5 +++
 apps/web/src/views/member/payments-view.vue   |  5 +++
 10 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/components/common/table-refresh.vue

diff --git a/apps/web/src/components/common/table-refresh.vue b/apps/web/src/components/common/table-refresh.vue
new file mode 100644
index 0000000..70c4306
--- /dev/null
+++ b/apps/web/src/components/common/table-refresh.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+/**
+ * 表格工具行刷新钮（纯图标 + tooltip）——放在筛选行下一行、右对齐
+ */
+import { ReloadOutlined } from "@antdv-next/icons";
+
+defineProps<{ loading?: boolean }>();
+const emit = defineEmits<{ (e: "refresh"): void }>();
+</script>
+
+<template>
+  <div class="table-refresh">
+    <a-tooltip title="刷新">
+      <a-button
+        :loading="loading"
+        aria-label="刷新"
+        @click="emit('refresh')"
+      >
+        <template #icon>
+          <ReloadOutlined />
+        </template>
+      </a-button>
+    </a-tooltip>
+  </div>
+</template>
+
+<style scoped>
+.table-refresh {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 8px;
+}
+</style>
diff --git a/apps/web/src/views/admin/audit-view.vue b/apps/web/src/views/admin/audit-view.vue
index 6593ecd..8c2c663 100644
--- a/apps/web/src/views/admin/audit-view.vue
+++ b/apps/web/src/views/admin/audit-view.vue
@@ -5,6 +5,7 @@
  */
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import PageHeader from "@/components/common/page-header.vue";
+import TableRefresh from "@/components/common/table-refresh.vue";
 import TimeRangePicker from "@/components/common/time-range-picker.vue";
 import { useAuditLogs } from "@/queries/admin.ts";
 import { formatDateTime, recentDaysRange } from "@/utils/time.ts";
@@ -88,6 +89,11 @@ onUnmounted(() => {
       </template>
     </PageHeader>
 
+    <TableRefresh
+      :loading="auditQuery.isFetching.value"
+      @refresh="() => auditQuery.refetch()"
+    />
+
     <div ref="boxRef" class="audit__box">
       <a-table
         :columns="columns"
diff --git a/apps/web/src/views/admin/keys-view.vue b/apps/web/src/views/admin/keys-view.vue
index 3005b38..14daf35 100644
--- a/apps/web/src/views/admin/keys-view.vue
+++ b/apps/web/src/views/admin/keys-view.vue
@@ -9,6 +9,7 @@ import { useRoute, useRouter } from "vue-router";
 import type { KeyItem } from "@new-api-key-usage/core";
 import type { ApiError } from "@/api/http.ts";
 import PageHeader from "@/components/common/page-header.vue";
+import TableRefresh from "@/components/common/table-refresh.vue";
 import RegisterKeyModal from "@/components/admin/register-key-modal.vue";
 import { useEngine, useKeys, useMembers, usePatchKey } from "@/queries/admin.ts";
 import { formatInt } from "@/utils/format.ts";
@@ -230,6 +231,11 @@ function onRowClass(record: KeyItem) {
       </a-space>
     </div>
 
+    <TableRefresh
+      :loading="keysQuery.isFetching.value"
+      @refresh="() => keysQuery.refetch()"
+    />
+
     <a-empty
       v-if="!keysQuery.isPending.value && rows.length === 0"
       :description="
diff --git a/apps/web/src/views/admin/logs-view.vue b/apps/web/src/views/admin/logs-view.vue
index 9744d22..a9a1671 100644
--- a/apps/web/src/views/admin/logs-view.vue
+++ b/apps/web/src/views/admin/logs-view.vue
@@ -6,6 +6,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import type { LogItem } from "@new-api-key-usage/core";
 import { useRoute, useRouter } from "vue-router";
 import PageHeader from "@/components/common/page-header.vue";
+import TableRefresh from "@/components/common/table-refresh.vue";
 import TimeRangePicker from "@/components/common/time-range-picker.vue";
 import QuotaText from "@/components/common/quota-text.vue";
 import { useLiveTimeRange } from "@/composables/use-live-time-range.ts";
@@ -272,6 +273,11 @@ onUnmounted(() => {
       />
     </div>
 
+    <TableRefresh
+      :loading="logsQuery.isFetching.value"
+      @refresh="() => logsQuery.refetch()"
+    />
+
     <a-empty
       v-if="!logsQuery.isPending.value && rows.length === 0"
       description="该时段内无调用日志"
diff --git a/apps/web/src/views/admin/members-view.vue b/apps/web/src/views/admin/members-view.vue
index 01e4ff0..6b9bac3 100644
--- a/apps/web/src/views/admin/members-view.vue
+++ b/apps/web/src/views/admin/members-view.vue
@@ -12,6 +12,7 @@ const router = useRouter();
 import type { MemberItem } from "@new-api-key-usage/core";
 import type { ApiError } from "@/api/http.ts";
 import PageHeader from "@/components/common/page-header.vue";
+import TableRefresh from "@/components/common/table-refresh.vue";
 import MemberTokenModal from "@/components/admin/member-token-modal.vue";
 import {
   useCreateMember,
@@ -195,6 +196,11 @@ async function onToggle(record: MemberItem) {
       />
     </div>
 
+    <TableRefresh
+      :loading="membersQuery.isFetching.value"
+      @refresh="() => membersQuery.refetch()"
+    />
+
     <a-empty
       v-if="!membersQuery.isPending.value && rows.length === 0"
       :description="hasFilter ? '没有符合筛选的成员' : '还没有成员——为每位分摊朋友开户并发放访问令牌'"
diff --git a/apps/web/src/views/admin/overview-view.vue b/apps/web/src/views/admin/overview-view.vue
index c0c333b..b82ad38 100644
--- a/apps/web/src/views/admin/overview-view.vue
+++ b/apps/web/src/views/admin/overview-view.vue
@@ -2,11 +2,12 @@
 /**
  * 全员总览（交互设计-全员总览）：健康带 · 时间范围 · 按成员 · 按 key
  */
-import { computed, h, ref } from "vue";
+import { computed, h } from "vue";
 import { Tooltip } from "antdv-next";
 import { QuestionCircleOutlined } from "@antdv-next/icons";
 import { useRouter } from "vue-router";
 import PageHeader from "@/components/common/page-header.vue";
+import TableRefresh from "@/components/common/table-refresh.vue";
 import TimeRangePicker from "@/components/common/time-range-picker.vue";
 import QuotaText from "@/components/common/quota-text.vue";
 import SourceBar from "@/components/common/source-bar.vue";
@@ -217,6 +218,10 @@ const keyColumns = [
     <!-- 按成员 -->
     <section class="overview-block">
       <h2 class="overview-block__title">按成员汇总</h2>
+      <TableRefresh
+        :loading="overviewQuery.isFetching.value"
+        @refresh="() => overviewQuery.refetch()"
+      />
       <a-empty
         v-if="!loading && byMember.length === 0"
         description="本时段内没有任何消费调用，因此没有成员用量可汇总"
diff --git a/apps/web/src/views/admin/payments-view.vue b/apps/web/src/views/admin/payments-view.vue
index 9e2cf21..4ee154d 100644
--- a/apps/web/src/views/admin/payments-view.vue
+++ b/apps/web/src/views/admin/payments-view.vue
@@ -9,6 +9,7 @@ import type { ApiError } from "@/api/http.ts";
 import { fetchLogs } from "@/api/admin/logs.ts";
 import { useRoute, useRouter } from "vue-router";
 import PageHeader from "@/components/common/page-header.vue";
+import TableRefresh from "@/components/common/table-refresh.vue";
 import PaymentFormModal from "@/components/admin/payment-form-modal.vue";
 import QuotaText from "@/components/common/quota-text.vue";
 import {
@@ -215,6 +216,10 @@ watch(
     </a-alert>
 
     <template v-if="tab === 'subs'">
+      <TableRefresh
+        :loading="subsQuery.isFetching.value"
+        @refresh="() => subsQuery.refetch()"
+      />
       <a-empty
         v-if="!subsQuery.isPending.value && subRows.length === 0"
         description="还没有订阅登记——从平台选用或手工登记"
@@ -272,6 +277,10 @@ watch(
     </template>
 
     <template v-else>
+      <TableRefresh
+        :loading="topupsQuery.isFetching.value"
+        @refresh="() => topupsQuery.refetch()"
+      />
       <a-empty
         v-if="!topupsQuery.isPending.value && topRows.length === 0"
         description="还没有充值登记"
diff --git a/apps/web/src/views/member/logs-view.vue b/apps/web/src/views/member/logs-view.vue
index 0854623..6bfbe17 100644
--- a/apps/web/src/views/member/logs-view.vue
+++ b/apps/web/src/views/member/logs-view.vue
@@ -9,6 +9,7 @@ import { Tooltip } from "antdv-next";
 import { QuestionCircleOutlined } from "@antdv-next/icons";
 import { useRoute, useRouter } from "vue-router";
 import PageHeader from "@/components/common/page-header.vue";
+import TableRefresh from "@/components/common/table-refresh.vue";
 import TimeRangePicker from "@/components/common/time-range-picker.vue";
 import QuotaText from "@/components/common/quota-text.vue";
 import { useMemberRange } from "@/composables/use-member-range.ts";
@@ -275,6 +276,11 @@ watch(
       />
     </div>
 
+    <TableRefresh
+      :loading="logsQuery.isFetching.value"
+      @refresh="() => logsQuery.refetch()"
+    />
+
     <a-alert
       v-if="logsQuery.isError.value"
       type="error"
@@ -457,7 +463,7 @@ watch(
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 }
 
 .member-logs__box {
diff --git a/apps/web/src/views/member/overview-view.vue b/apps/web/src/views/member/overview-view.vue
index 31f3d27..eb36d9a 100644
--- a/apps/web/src/views/member/overview-view.vue
+++ b/apps/web/src/views/member/overview-view.vue
@@ -5,6 +5,7 @@
 import { computed } from "vue";
 import { useRouter } from "vue-router";
 import PageHeader from "@/components/common/page-header.vue";
+import TableRefresh from "@/components/common/table-refresh.vue";
 import TimeRangePicker from "@/components/common/time-range-picker.vue";
 import SourceBar from "@/components/common/source-bar.vue";
 import QuotaText from "@/components/common/quota-text.vue";
@@ -131,6 +132,10 @@ const keyColumns = [
 
       <section class="mv-block">
         <h2 class="mv-block__title">我的 Key</h2>
+        <TableRefresh
+          :loading="overviewQuery.isFetching.value"
+          @refresh="() => overviewQuery.refetch()"
+        />
         <a-table
           :columns="keyColumns"
           :data-source="keys"
diff --git a/apps/web/src/views/member/payments-view.vue b/apps/web/src/views/member/payments-view.vue
index 19b8329..ccbc346 100644
--- a/apps/web/src/views/member/payments-view.vue
+++ b/apps/web/src/views/member/payments-view.vue
@@ -4,6 +4,7 @@
  */
 import { computed } from "vue";
 import PageHeader from "@/components/common/page-header.vue";
+import TableRefresh from "@/components/common/table-refresh.vue";
 import TimeRangePicker from "@/components/common/time-range-picker.vue";
 import QuotaText from "@/components/common/quota-text.vue";
 import { useMemberRange } from "@/composables/use-member-range.ts";
@@ -111,6 +112,10 @@ const topColumns = [
     />
     <template v-else>
       <h3 class="mv-sec">订阅</h3>
+      <TableRefresh
+        :loading="overviewQuery.isFetching.value"
+        @refresh="() => overviewQuery.refetch()"
+      />
       <a-empty v-if="subs.length === 0" description="暂无订阅登记" />
       <a-table
         v-else