From 8b5462915902c1d451b7e04c04bf647a2fa4afb6 Mon Sep 17 00:00:00 2001
From: skycurtain <skycurtain@163.com>
Date: Thu, 8 Oct 2026 00:47:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E6=94=AF=E4=BB=98=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E2=80=94=E2=80=94=E5=90=8C=E6=9E=84=E7=99=BB=E8=AE=B0?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E3=80=81=E9=A2=9D=E5=BA=A6=E5=8F=8C=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E4=B8=8E=E6=A0=B8=E5=AF=B9=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/admin/payment-form-modal.vue   | 242 ++++++++++++++++++
 apps/web/src/queries/admin.ts                 |   9 +-
 apps/web/src/views/admin/payments-view.vue    | 188 +++++++++++++-
 3 files changed, 434 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/components/admin/payment-form-modal.vue

diff --git a/apps/web/src/components/admin/payment-form-modal.vue b/apps/web/src/components/admin/payment-form-modal.vue
new file mode 100644
index 0000000..44b4855
--- /dev/null
+++ b/apps/web/src/components/admin/payment-form-modal.vue
@@ -0,0 +1,242 @@
+<script setup lang="ts">
+/**
+ * 支付登记/编辑：订阅与充值同构；额度双输入（落库恒 quota 原值）
+ */
+import { computed, reactive, ref, watch } from "vue";
+import type { Dayjs } from "dayjs";
+import dayjs from "dayjs";
+import type { PaymentItem } from "@new-api-key-usage/core";
+import type { ApiError } from "@/api/http.ts";
+import { useCreatePayment, useQpuLatest, useUpdatePayment } from "@/queries/admin.ts";
+
+const props = defineProps<{
+  open: boolean;
+  /** 有则为编辑 */
+  editing?: PaymentItem | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:open", v: boolean): void;
+}>();
+
+const createPay = useCreatePayment();
+const updatePay = useUpdatePayment();
+const qpuQuery = useQpuLatest();
+const qpu = computed(() => qpuQuery.data.value?.qpu ?? null);
+
+const form = reactive({
+  kind: "subscription" as "subscription" | "topup",
+  paid_amount: null as number | null,
+  paid_at: null as Dayjs | null,
+  period_start: null as Dayjs | null,
+  period_end: null as Dayjs | null,
+  subscription_id: null as number | null,
+  remark: "",
+  quotaMode: "quota" as "quota" | "usd",
+  quota_granted: null as number | null,
+  quota_usd_input: null as number | null,
+});
+const error = ref("");
+
+const isEdit = computed(() => props.editing != null);
+const saving = computed(() => createPay.isPending.value || updatePay.isPending.value);
+
+const quotaPreview = computed(() => {
+  if (form.quotaMode === "quota") {
+    const q = form.quota_granted;
+    if (q == null || !qpu.value) return null;
+    return `≈ $${(q / qpu.value).toFixed(2)}（按当前换算率）`;
+  }
+  const u = form.quota_usd_input;
+  if (u == null || !qpu.value) return null;
+  return `≈ ${Math.round(u * qpu.value)} quota`;
+});
+
+const quotaGrantedFinal = computed(() => {
+  if (form.quotaMode === "quota") return form.quota_granted;
+  if (form.quota_usd_input == null || !qpu.value) return null;
+  return Math.round(form.quota_usd_input * qpu.value);
+});
+
+watch(
+  () => props.open,
+  (v) => {
+    if (!v) return;
+    error.value = "";
+    const ed = props.editing;
+    if (ed) {
+      form.kind = ed.kind;
+      form.paid_amount = ed.paid_amount;
+      form.paid_at = ed.paid_at ? dayjs.unix(ed.paid_at) : null;
+      form.period_start = ed.period_start ? dayjs.unix(ed.period_start) : null;
+      form.period_end = ed.period_end ? dayjs.unix(ed.period_end) : null;
+      form.subscription_id = ed.subscription_id;
+      form.remark = ed.remark;
+      form.quotaMode = "quota";
+      form.quota_granted = ed.quota_granted;
+      form.quota_usd_input = null;
+    } else {
+      form.kind = "subscription";
+      form.paid_amount = null;
+      form.paid_at = dayjs();
+      form.period_start = null;
+      form.period_end = null;
+      form.subscription_id = null;
+      form.remark = "";
+      form.quotaMode = "quota";
+      form.quota_granted = null;
+      form.quota_usd_input = null;
+    }
+  },
+);
+
+function toIso(d: Dayjs | null): string | null {
+  return d ? d.toISOString() : null;
+}
+
+async function onSubmit() {
+  error.value = "";
+  if (form.paid_amount == null) {
+    error.value = "请填写金额";
+    return;
+  }
+  if (!form.paid_at) {
+    error.value = "请填写支付时间";
+    return;
+  }
+  const quota = quotaGrantedFinal.value;
+  if (quota == null) {
+    error.value = "请填写额度";
+    return;
+  }
+  if (form.kind === "subscription") {
+    if (!form.period_start) {
+      error.value = "订阅必须填写期间起点";
+      return;
+    }
+    if (form.subscription_id == null) {
+      error.value = "订阅必须填写订阅编号";
+      return;
+    }
+  }
+  const body = {
+    kind: form.kind,
+    paid_at: toIso(form.paid_at)!,
+    paid_amount: form.paid_amount,
+    remark: form.remark.trim(),
+    quota_granted: quota,
+    ...(form.kind === "subscription"
+      ? {
+          period_start: toIso(form.period_start),
+          period_end: toIso(form.period_end),
+          subscription_id: form.subscription_id,
+        }
+      : {
+          period_start: null,
+          period_end: null,
+          subscription_id: null,
+        }),
+  };
+  try {
+    if (isEdit.value && props.editing) {
+      await updatePay.mutateAsync({ id: props.editing.id, body });
+    } else {
+      await createPay.mutateAsync(body);
+    }
+    emit("update:open", false);
+  } catch (e) {
+    error.value = (e as ApiError).message || "保存失败";
+  }
+}
+</script>
+
+<template>
+  <a-modal
+    :open="open"
+    :title="isEdit ? '编辑支付记录' : '登记支付'"
+    :confirm-loading="saving"
+    ok-text="保存"
+    cancel-text="取消"
+    @update:open="emit('update:open', $event)"
+    @ok="onSubmit"
+  >
+    <a-form layout="vertical">
+      <a-form-item label="类型" required>
+        <a-radio-group v-model:value="form.kind" :disabled="isEdit">
+          <a-radio value="subscription">订阅</a-radio>
+          <a-radio value="topup">充值</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="金额（币种自定）" required>
+        <a-input-number
+          v-model:value="form.paid_amount"
+          :min="0"
+          :precision="2"
+          style="width: 100%"
+        />
+        <div class="pay-form__note">金额数值——币种由你们约定，系统不预设</div>
+      </a-form-item>
+      <a-form-item label="支付时间" required>
+        <a-date-picker
+          v-model:value="form.paid_at"
+          show-time
+          style="width: 100%"
+        />
+      </a-form-item>
+      <template v-if="form.kind === 'subscription'">
+        <a-form-item label="期间起" required>
+          <a-date-picker v-model:value="form.period_start" style="width: 100%" />
+        </a-form-item>
+        <a-form-item label="期间止（空 = 进行中）">
+          <a-date-picker v-model:value="form.period_end" style="width: 100%" />
+        </a-form-item>
+        <a-form-item label="订阅 ID" required>
+          <a-input-number
+            v-model:value="form.subscription_id"
+            :min="1"
+            :precision="0"
+            style="width: 100%"
+            placeholder="钱包页面「订阅 #N」"
+          />
+        </a-form-item>
+      </template>
+      <a-form-item label="本笔额度" required>
+        <a-radio-group v-model:value="form.quotaMode">
+          <a-radio value="quota">原始 quota</a-radio>
+          <a-radio value="usd">按美元换算</a-radio>
+        </a-radio-group>
+        <a-input-number
+          v-if="form.quotaMode === 'quota'"
+          v-model:value="form.quota_granted"
+          :min="0"
+          :precision="0"
+          style="width: 100%; margin-top: 8px"
+        />
+        <a-input-number
+          v-else
+          v-model:value="form.quota_usd_input"
+          :min="0"
+          :precision="2"
+          style="width: 100%; margin-top: 8px"
+          placeholder="美元金额"
+        />
+        <div v-if="quotaPreview" class="pay-form__note">
+          {{ quotaPreview }} · 落库为原始 quota
+        </div>
+      </a-form-item>
+      <a-form-item label="备注">
+        <a-input v-model:value="form.remark" placeholder="备注（可选）" />
+      </a-form-item>
+      <a-alert v-if="error" type="error" show-icon :message="error" />
+    </a-form>
+  </a-modal>
+</template>
+
+<style scoped>
+.pay-form__note {
+  margin-top: 4px;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.45);
+}
+</style>
diff --git a/apps/web/src/queries/admin.ts b/apps/web/src/queries/admin.ts
index 4bc84a3..4ce3641 100644
--- a/apps/web/src/queries/admin.ts
+++ b/apps/web/src/queries/admin.ts
@@ -6,7 +6,7 @@ import {
   type KeyListFilters,
 } from "@/api/admin/keys.ts";
 import { fetchOverview } from "@/api/admin/overview.ts";
-import { fetchEngine } from "@/api/admin/engine.ts";
+import { fetchEngine, fetchQpuLatest } from "@/api/admin/engine.ts";
 import {
   createPayment,
   deletePayment,
@@ -40,6 +40,13 @@ export function useEngine() {
   });
 }
 
+export function useQpuLatest() {
+  return useQuery({
+    queryKey: qk.admin.qpuLatest(),
+    queryFn: fetchQpuLatest,
+  });
+}
+
 export function useKeys(filters: () => KeyListFilters) {
   return useQuery({
     queryKey: () => qk.admin.keys(filters()),
diff --git a/apps/web/src/views/admin/payments-view.vue b/apps/web/src/views/admin/payments-view.vue
index 4122d81..e6e371a 100644
--- a/apps/web/src/views/admin/payments-view.vue
+++ b/apps/web/src/views/admin/payments-view.vue
@@ -1,13 +1,193 @@
 <script setup lang="ts">
+/**
+ * 支付记录（交互设计-支付记录）：同构登记 · 编辑删除 · 核对提示
+ */
+import { computed, ref, watch } from "vue";
+import { message } from "antdv-next";
+import type { PaymentItem } from "@new-api-key-usage/core";
+import type { ApiError } from "@/api/http.ts";
+import { fetchLogs } from "@/api/admin/logs.ts";
 import PageHeader from "@/components/common/page-header.vue";
+import PaymentFormModal from "@/components/admin/payment-form-modal.vue";
+import QuotaText from "@/components/common/quota-text.vue";
+import { useDeletePayment, usePayments } from "@/queries/admin.ts";
+import { formatDate, formatDateTime } from "@/utils/time.ts";
+import { formatPaidAmount } from "@/utils/format.ts";
+
+const paymentsQuery = usePayments();
+const deletePay = useDeletePayment();
+
+const formOpen = ref(false);
+const editing = ref<PaymentItem | null>(null);
+const missingSubs = ref<number[]>([]);
+const checking = ref(false);
+
+const rows = computed(() => {
+  const list = [...(paymentsQuery.data.value ?? [])];
+  list.sort((a, b) => (b.paid_at ?? 0) - (a.paid_at ?? 0));
+  return list;
+});
+
+const columns = [
+  { title: "类型", key: "kind", width: 90 },
+  { title: "金额（币种自定）", key: "paid_amount", width: 140 },
+  { title: "时间", key: "time", width: 180 },
+  { title: "订阅 ID", key: "subscription_id", width: 100 },
+  { title: "额度", key: "quota", width: 160 },
+  { title: "备注", key: "remark" },
+  { title: "操作", key: "actions", width: 120 },
+];
+
+function timeText(p: PaymentItem): string {
+  if (p.kind === "topup") return formatDateTime(p.paid_at);
+  const start = formatDate(p.period_start);
+  const end = p.period_end == null ? "进行中" : formatDate(p.period_end);
+  return `${start} ~ ${end}`;
+}
+
+function onCreate() {
+  editing.value = null;
+  formOpen.value = true;
+}
+
+function onEdit(p: PaymentItem) {
+  editing.value = p;
+  formOpen.value = true;
+}
+
+async function onDelete(p: PaymentItem) {
+  try {
+    await deletePay.mutateAsync(p.id);
+    message.success("已删除");
+  } catch (e) {
+    message.error((e as ApiError).message || "删除失败");
+  }
+}
+
+/** 观测订阅号 ↔ 已登记：只提示不回填；payments 全空则静默 */
+async function reconcile(pays: PaymentItem[]) {
+  if (pays.length === 0) {
+    missingSubs.value = [];
+    return;
+  }
+  checking.value = true;
+  try {
+    const known = new Set(
+      pays.map((p) => p.subscription_id).filter((v): v is number => v != null),
+    );
+    const earliest = Math.min(...pays.map((p) => p.paid_at ?? 0), Date.now() / 1000);
+    const from = new Date((earliest - 30 * 86400) * 1000).toISOString();
+    const to = new Date().toISOString();
+    const observed = new Set<number>();
+    let page = 1;
+    for (;;) {
+      const res = await fetchLogs({
+        from,
+        to,
+        page,
+        page_size: 200,
+      });
+      for (const it of res.items) {
+        if (it.type === 2 && it.subscription_id != null) {
+          observed.add(it.subscription_id);
+        }
+      }
+      if (page * 200 >= res.total || page >= 20) break;
+      page += 1;
+    }
+    missingSubs.value = [...observed]
+      .filter((id) => !known.has(id))
+      .sort((a, b) => a - b);
+  } catch {
+    missingSubs.value = [];
+  } finally {
+    checking.value = false;
+  }
+}
+
+// 数据到达/失效刷新后再核对（挂载时尚未 resolve）
+watch(
+  () => paymentsQuery.data.value,
+  (pays) => {
+    if (!pays) return;
+    void reconcile(pays);
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
   <section>
-    <PageHeader
-      title="支付记录"
-      subtitle="订阅 / 充值登记与核对（信息结构见交互设计-支付记录）"
+    <PageHeader title="支付记录" subtitle="订阅与充值的人工登记">
+      <template #actions>
+        <a-button type="primary" @click="onCreate">登记支付</a-button>
+      </template>
+    </PageHeader>
+
+    <a-alert
+      v-for="id in missingSubs"
+      :key="id"
+      type="warning"
+      show-icon
+      :message="`观测到订阅 #${id} 有消耗，但尚无对应登记——请核对补录`"
+      style="margin-bottom: 8px"
     />
-    <a-skeleton active :paragraph="{ rows: 4 }" />
+
+    <a-empty
+      v-if="!paymentsQuery.isPending.value && rows.length === 0"
+      description="还没有支付记录——订阅/充值同构登记"
+    >
+      <a-button @click="onCreate">登记支付</a-button>
+    </a-empty>
+
+    <a-table
+      v-else
+      :columns="columns"
+      :data-source="rows"
+      :row-key="(r: PaymentItem) => r.id"
+      :loading="paymentsQuery.isPending.value || paymentsQuery.isFetching.value || checking"
+      :pagination="false"
+      size="middle"
+      :scroll="{ x: 1000 }"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'kind'">
+          <a-tag :color="record.kind === 'subscription' ? 'blue' : 'gold'">
+            {{ record.kind === "subscription" ? "订阅" : "充值" }}
+          </a-tag>
+        </template>
+        <template v-else-if="column.key === 'paid_amount'">
+          {{ formatPaidAmount(record.paid_amount) }}
+        </template>
+        <template v-else-if="column.key === 'time'">
+          {{ timeText(record) }}
+        </template>
+        <template v-else-if="column.key === 'subscription_id'">
+          {{ record.subscription_id ?? "—" }}
+        </template>
+        <template v-else-if="column.key === 'quota'">
+          <QuotaText :quota="record.quota_granted" :quota-usd="record.quota_usd" />
+        </template>
+        <template v-else-if="column.key === 'remark'">
+          {{ record.remark || "—" }}
+        </template>
+        <template v-else-if="column.key === 'actions'">
+          <a-space>
+            <a-button size="small" @click="() => onEdit(record)">编辑</a-button>
+            <a-popconfirm
+              title="删除后该条支付记录将消失"
+              description="改错即修，删除即消失"
+              ok-text="删除"
+              cancel-text="取消"
+              @confirm="() => onDelete(record)"
+            >
+              <a-button size="small" danger>删除</a-button>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </template>
+    </a-table>
+
+    <PaymentFormModal v-model:open="formOpen" :editing="editing" />
   </section>
 </template>