feat(admin-web): expose AI point balance and usage ledger
Surfaces the new AI point quota in the workspace shell and adds a Personal Center → AI Point Usage page that shows balance, base-char rule, and the paginated reservation/refund history. Updates shared types for the QuotaSummary and ledger payloads. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,394 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
CalculatorOutlined,
|
||||
FieldTimeOutlined,
|
||||
QuestionCircleOutlined,
|
||||
ReloadOutlined,
|
||||
ThunderboltOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import type { AIPointUsageLog } from "@geo/shared-types";
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import type { TableColumnsType } from "ant-design-vue";
|
||||
import { computed, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
import { workspaceApi } from "@/lib/api";
|
||||
import { formatDateTime } from "@/lib/display";
|
||||
|
||||
const { t } = useI18n();
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
|
||||
const quotaQuery = useQuery({
|
||||
queryKey: ["workspace", "quota-summary", "ai-points"],
|
||||
queryFn: () => workspaceApi.quotaSummary(),
|
||||
});
|
||||
|
||||
const usageQuery = useQuery({
|
||||
queryKey: computed(() => ["workspace", "ai-point-usage", page.value, pageSize.value]),
|
||||
queryFn: () => workspaceApi.aiPointUsage({ page: page.value, page_size: pageSize.value }),
|
||||
});
|
||||
|
||||
const quotaSummary = computed(() => quotaQuery.data.value);
|
||||
const usageRows = computed(() => usageQuery.data.value?.items ?? []);
|
||||
const usageTotal = computed(() => usageQuery.data.value?.total ?? 0);
|
||||
const aiPointUsedPercent = computed(() => {
|
||||
const total = quotaSummary.value?.ai_points_total ?? 0;
|
||||
const used = quotaSummary.value?.ai_points_used ?? 0;
|
||||
if (total <= 0) {
|
||||
return 0;
|
||||
}
|
||||
return Math.min(100, Math.round((used / total) * 100));
|
||||
});
|
||||
const loading = computed(() => quotaQuery.isPending.value || usageQuery.isPending.value);
|
||||
const refreshing = computed(() => quotaQuery.isFetching.value || usageQuery.isFetching.value);
|
||||
|
||||
const columns = computed<TableColumnsType<AIPointUsageLog>>(() => [
|
||||
{
|
||||
title: t("aiPoints.table.usageType"),
|
||||
dataIndex: "usage_type",
|
||||
key: "usage_type",
|
||||
},
|
||||
{
|
||||
title: t("aiPoints.table.points"),
|
||||
dataIndex: "points",
|
||||
key: "points",
|
||||
width: 110,
|
||||
align: "right",
|
||||
},
|
||||
{
|
||||
title: t("aiPoints.table.requestChars"),
|
||||
dataIndex: "request_chars",
|
||||
key: "request_chars",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: t("common.status"),
|
||||
dataIndex: "status",
|
||||
key: "status",
|
||||
width: 118,
|
||||
},
|
||||
{
|
||||
title: t("common.createdAt"),
|
||||
dataIndex: "created_at",
|
||||
key: "created_at",
|
||||
width: 172,
|
||||
},
|
||||
]);
|
||||
|
||||
function refresh(): void {
|
||||
void quotaQuery.refetch();
|
||||
void usageQuery.refetch();
|
||||
}
|
||||
|
||||
function handleTableChange(nextPage: number, nextPageSize: number): void {
|
||||
page.value = nextPage;
|
||||
pageSize.value = nextPageSize;
|
||||
}
|
||||
|
||||
function getAIPointUsageTypeLabel(usageType: string): string {
|
||||
const key = `shell.aiUsageTypes.${usageType}`;
|
||||
const label = t(key);
|
||||
return label === key ? usageType : label;
|
||||
}
|
||||
|
||||
function getAIPointStatusMeta(status: string): { label: string; color: string } {
|
||||
const key = `shell.aiUsageStatus.${status}`;
|
||||
const label = t(key);
|
||||
const normalizedLabel = label === key ? status : label;
|
||||
switch (status) {
|
||||
case "completed":
|
||||
return { label: normalizedLabel, color: "success" };
|
||||
case "pending":
|
||||
return { label: normalizedLabel, color: "processing" };
|
||||
case "refunded":
|
||||
return { label: normalizedLabel, color: "default" };
|
||||
default:
|
||||
return { label: normalizedLabel, color: "error" };
|
||||
}
|
||||
}
|
||||
|
||||
function formatAIPointDelta(item: AIPointUsageLog): string {
|
||||
return item.status === "refunded" ? `+${item.points}` : `-${item.points}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ai-points-page">
|
||||
<header class="ai-points-header">
|
||||
<div>
|
||||
<h1>{{ t("route.aiPoints.title") }}</h1>
|
||||
<p>{{ t("route.aiPoints.description") }}</p>
|
||||
</div>
|
||||
<a-button :loading="refreshing" @click="refresh">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
{{ t("common.refresh") }}
|
||||
</a-button>
|
||||
</header>
|
||||
|
||||
<section class="ai-points-summary">
|
||||
<div class="ai-points-balance">
|
||||
<span class="summary-label">{{ t("aiPoints.balance") }}</span>
|
||||
<strong>{{ quotaSummary?.ai_points_balance ?? "--" }}</strong>
|
||||
<a-progress :percent="aiPointUsedPercent" :show-info="false" stroke-color="#1677ff" />
|
||||
</div>
|
||||
|
||||
<div class="summary-metric">
|
||||
<ThunderboltOutlined />
|
||||
<span>{{ t("common.used") }}</span>
|
||||
<strong>{{ quotaSummary?.ai_points_used ?? "--" }} / {{ quotaSummary?.ai_points_total ?? "--" }}</strong>
|
||||
</div>
|
||||
|
||||
<div class="summary-metric">
|
||||
<CalculatorOutlined />
|
||||
<span>{{ t("aiPoints.baseChars") }}</span>
|
||||
<strong>{{ quotaSummary?.ai_point_base_chars ?? "--" }}</strong>
|
||||
</div>
|
||||
|
||||
<div class="summary-metric">
|
||||
<FieldTimeOutlined />
|
||||
<span>{{ t("shell.resetAt") }}</span>
|
||||
<strong>{{ formatDateTime(quotaSummary?.ai_points_reset_at) }}</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="ai-points-ledger">
|
||||
<div class="ledger-head">
|
||||
<div>
|
||||
<h2>{{ t("aiPoints.ledgerTitle") }}</h2>
|
||||
<span>{{ t("aiPoints.ledgerTotal", { total: usageTotal }) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="usageRows"
|
||||
:loading="loading"
|
||||
:locale="{ emptyText: t('shell.aiUsageEmpty') }"
|
||||
:pagination="{
|
||||
current: page,
|
||||
pageSize,
|
||||
total: usageTotal,
|
||||
showSizeChanger: true,
|
||||
onChange: handleTableChange,
|
||||
onShowSizeChange: handleTableChange,
|
||||
}"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'usage_type'">
|
||||
<div class="usage-type-cell">
|
||||
<strong>{{ getAIPointUsageTypeLabel(record.usage_type) }}</strong>
|
||||
<span v-if="record.model">{{ record.model }}</span>
|
||||
<span v-else-if="record.error_message" class="usage-error">{{ record.error_message }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'points'">
|
||||
<span class="points-delta" :class="{ 'points-delta--refund': record.status === 'refunded' }">
|
||||
{{ formatAIPointDelta(record) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'request_chars'">
|
||||
<span class="usage-rule">
|
||||
{{ t("shell.aiUsageRule", { chars: record.request_chars, base: record.base_chars }) }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-tag class="status-tag" :color="getAIPointStatusMeta(record.status).color" :bordered="false">
|
||||
{{ getAIPointStatusMeta(record.status).label }}
|
||||
<a-tooltip v-if="record.status === 'pending'" :title="t('shell.aiUsagePendingHelp')">
|
||||
<QuestionCircleOutlined class="status-help-icon" />
|
||||
</a-tooltip>
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="column.key === 'created_at'">
|
||||
{{ formatDateTime(record.created_at) }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ai-points-page {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ai-points-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ai-points-header h1,
|
||||
.ledger-head h2 {
|
||||
margin: 0;
|
||||
color: #141414;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.ai-points-header h1 {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.ai-points-header p {
|
||||
margin: 6px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.ai-points-summary {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ai-points-balance,
|
||||
.summary-metric,
|
||||
.ai-points-ledger {
|
||||
border: 1px solid #edf0f5;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.ai-points-balance {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.summary-label,
|
||||
.summary-metric span,
|
||||
.ledger-head span,
|
||||
.usage-type-cell span,
|
||||
.usage-rule {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ai-points-balance strong {
|
||||
display: block;
|
||||
margin: 6px 0 12px;
|
||||
color: #141414;
|
||||
font-size: 36px;
|
||||
font-weight: 750;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.summary-metric {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 6px;
|
||||
min-height: 112px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.summary-metric :deep(.anticon) {
|
||||
color: #1677ff;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.summary-metric span,
|
||||
.summary-label {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.summary-metric strong {
|
||||
color: #141414;
|
||||
font-size: 16px;
|
||||
font-weight: 650;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.ai-points-ledger {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ledger-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 18px 20px;
|
||||
border-bottom: 1px solid #edf0f5;
|
||||
}
|
||||
|
||||
.ledger-head h2 {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.ledger-head span {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.usage-type-cell {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.usage-type-cell strong {
|
||||
color: #141414;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.usage-type-cell span,
|
||||
.usage-rule {
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.usage-error {
|
||||
color: #cf1322 !important;
|
||||
}
|
||||
|
||||
.points-delta {
|
||||
color: #cf1322;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.points-delta--refund {
|
||||
color: #389e0d;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.status-help-icon {
|
||||
color: #1677ff;
|
||||
font-size: 12px;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.ai-points-summary {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.ai-points-header {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.ai-points-summary {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user