feat(web): 表格工具行统一刷新钮
纯图标 + tooltip,筛选下一行右对齐;覆盖管理端与成员端列表;清理 overview 未用 ref。
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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="
|
||||
|
||||
@@ -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="该时段内无调用日志"
|
||||
|
||||
@@ -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 ? '没有符合筛选的成员' : '还没有成员——为每位分摊朋友开户并发放访问令牌'"
|
||||
|
||||
@@ -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="本时段内没有任何消费调用,因此没有成员用量可汇总"
|
||||
|
||||
@@ -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="还没有充值登记"
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user