feat(web): 管理端日志来源徽章支付弹窗与支付记录筛选——订阅 ID / 交易号可筛，弹窗可跳转核对补录

README.md

@@ -135,10 +135,10 @@ docker compose ps          # migrate 应为 exited(0)，其余 running/healthy
 | [`docs/design/交互设计-总览与共性.md`](docs/design/交互设计-总览与共性.md) | 交互总纲：访问拓扑、导航、跨页组件、状态与数值呈现约定 | 定稿（2026-10-01） |
 | [`docs/design/交互设计-登录与会话.md`](docs/design/交互设计-登录与会话.md) | 登录页、引导页、改密、成员登录壳 | 同上 |
 | [`docs/design/交互设计-全员总览.md`](docs/design/交互设计-全员总览.md) | 管理面首页：健康带 + 按成员 / key 汇总 | 同上 |
-| [`docs/design/交互设计-调用日志.md`](docs/design/交互设计-调用日志.md) | 调用日志：筛选、汇总条、明细表、与 key/成员/总览的跳转链 | 定稿（2026-10-08；模型筛选与汇总条修订） |
+| [`docs/design/交互设计-调用日志.md`](docs/design/交互设计-调用日志.md) | 调用日志：筛选、汇总条、来源徽章支付弹窗、明细表与跳转链 | 定稿（2026-10-08；模型筛选与汇总条、徽章弹窗修订） |
 | [`docs/design/实现方案-日志模型筛选与汇总条.md`](docs/design/实现方案-日志模型筛选与汇总条.md) | 日志页模型筛选 + 条数/消费用量汇总条：API、数据层、前端改造与验收 | 已实现（2026-10-13） |
 | [`docs/design/交互设计-key管理.md`](docs/design/交互设计-key管理.md) | 登记（sk-key 唯一界面露面）、启停、归属、死亡显形 | 定稿（2026-10-01） |
-| [`docs/design/交互设计-支付记录.md`](docs/design/交互设计-支付记录.md) | 支付记录（两 Tab）：订阅权益 / 充值入账登记、核对提示 | 定稿（2026-10-12） |
+| [`docs/design/交互设计-支付记录.md`](docs/design/交互设计-支付记录.md) | 支付记录（两 Tab）：订阅权益 / 充值入账登记、核对提示、ID/交易号筛选 | 定稿（2026-10-12；补筛选） |
 | [`docs/design/交互设计-成员管理.md`](docs/design/交互设计-成员管理.md) | 开户、档案修改、令牌签发/重发、启停、空壳删除 | 定稿（2026-10-10） |
 | [`docs/design/交互设计-审计日志.md`](docs/design/交互设计-审计日志.md) | 管理操作留痕时间线 | 定稿（2026-10-10） |
 | [`docs/design/交互设计-成员视图.md`](docs/design/交互设计-成员视图.md) | 成员视图三页（总览 / 调用日志 / 支付参数）；订阅徽章展开 + 调用详情 | 定稿（2026-10-09） |

apps/web/src/views/admin/logs-view.vue

@@ -3,7 +3,7 @@
  * 管理面调用日志（交互设计-调用日志）：筛选 + 明细表 + 与 key/成员跳转
  */
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
-import type { LogItem } from "@new-api-key-usage/core";
+import type { LogItem, SubscriptionItem } 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";
@@ -14,9 +14,9 @@ import {
   useLiveTimeRange,
   type RangeKind,
 } from "@/composables/use-live-time-range.ts";
-import { useAdminLogs, useKeys, useMembers } from "@/queries/admin.ts";
+import { useAdminLogs, useKeys, useMembers, useSubscriptions } from "@/queries/admin.ts";
 import { formatDateTime } from "@/utils/time.ts";
-import { formatInt } from "@/utils/format.ts";
+import { formatInt, formatPaidAmount } from "@/utils/format.ts";
 
 const route = useRoute();
 const router = useRouter();
@@ -167,12 +167,54 @@ watch(page, () => pushQuery());
 
 function sourceBadge(record: LogItem) {
   if (record.billing_source === "subscription" && record.subscription_id != null) {
-    return { text: `订阅 #${record.subscription_id}`, color: "blue" as const };
+    return {
+      text: `订阅 #${record.subscription_id}`,
+      color: "blue" as const,
+      kind: "sub" as const,
+      id: record.subscription_id,
+    };
   }
   if (record.billing_source === "wallet") {
-    return { text: "充值", color: "gold" as const };
+    return { text: "充值", color: "gold" as const, kind: "wallet" as const, id: null };
   }
-  return { text: "未关联", color: undefined };
+  return { text: "未关联", color: undefined, kind: "none" as const, id: null };
+}
+
+const payModalOpen = ref(false);
+const payModalSubId = ref<number | null>(null);
+const subsQuery = useSubscriptions();
+const paymentBySub = computed(() => {
+  const m = new Map<number, SubscriptionItem>();
+  for (const p of subsQuery.data.value ?? []) {
+    m.set(p.subscription_id, p);
+  }
+  return m;
+});
+const payModalPayment = computed(() =>
+  payModalSubId.value == null
+    ? undefined
+    : paymentBySub.value.get(payModalSubId.value),
+);
+
+function onBadge(record: LogItem, e: MouseEvent) {
+  e.stopPropagation();
+  if (sourceBadge(record).kind !== "sub") return;
+  payModalSubId.value = sourceBadge(record).id;
+  payModalOpen.value = true;
+}
+
+function periodText(p: SubscriptionItem): string {
+  const end = p.period_end == null ? "进行中" : formatDateTime(p.period_end);
+  return `${formatDateTime(p.period_start)} ~ ${end}`;
+}
+
+function goPayments() {
+  if (payModalSubId.value == null) return;
+  payModalOpen.value = false;
+  void router.push({
+    path: "/admin/payments",
+    query: { tab: "subs", subscription_id: String(payModalSubId.value) },
+  });
 }
 
 function goKey(keyId: number) {
@@ -354,7 +396,19 @@ onUnmounted(() => {
             </a-tag>
           </template>
           <template v-else-if="column.key === 'source'">
-            <a-tag :color="sourceBadge(record).color">
+            <a-tooltip
+              v-if="sourceBadge(record).kind === 'sub'"
+              title="点击查看该订阅支付参数"
+            >
+              <a-tag
+                color="blue"
+                class="call-logs__badge"
+                @click="(e: MouseEvent) => onBadge(record, e)"
+              >
+                {{ sourceBadge(record).text }}
+              </a-tag>
+            </a-tooltip>
+            <a-tag v-else :color="sourceBadge(record).color">
               {{ sourceBadge(record).text }}
             </a-tag>
           </template>
@@ -432,6 +486,41 @@ onUnmounted(() => {
         </div>
       </div>
     </a-modal>
+
+    <a-modal
+      v-model:open="payModalOpen"
+      :title="payModalSubId != null ? `订阅 #${payModalSubId} 支付参数` : '支付参数'"
+      :footer="null"
+      width="480"
+      centered
+      :styles="{ body: { maxHeight: '56vh', overflowY: 'auto' } }"
+    >
+      <div v-if="payModalPayment" class="call-logs__pay">
+        <div class="call-logs__kv">
+          <span class="call-logs__note">期间</span>
+          <span>{{ periodText(payModalPayment) }}</span>
+        </div>
+        <div class="call-logs__kv">
+          <span class="call-logs__note">额度</span>
+          <QuotaText
+            :quota="payModalPayment.quota_granted"
+            :quota-usd="payModalPayment.quota_usd"
+          />
+        </div>
+        <div class="call-logs__kv">
+          <span class="call-logs__note">金额</span>
+          <span class="call-logs__num">{{ formatPaidAmount(payModalPayment.paid_amount) }}</span>
+        </div>
+        <div v-if="payModalPayment.remark" class="call-logs__kv">
+          <span class="call-logs__note">备注</span>
+          <span>{{ payModalPayment.remark }}</span>
+        </div>
+      </div>
+      <div v-else class="call-logs__note">该订阅无登记信息</div>
+      <div class="call-logs__foot">
+        <a @click="goPayments">在支付记录中查看</a>
+      </div>
+    </a-modal>
   </section>
 </template>
 
@@ -508,4 +597,21 @@ onUnmounted(() => {
   line-height: 20px;
   font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
 }
+
+.call-logs__badge {
+  cursor: pointer;
+}
+
+.call-logs__pay {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.call-logs__foot {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+  text-align: right;
+}
 </style>

apps/web/src/views/admin/payments-view.vue

@@ -27,6 +27,8 @@ const subsQuery = useSubscriptions();
 const topupsQuery = useTopups();
 
 const filterDomain = ref<string | "none" | null>(null);
+const filterSubId = ref<number | null>(null);
+const filterTradeNo = ref<string | null>(null);
 const domainOptions = computed(() => {
   const set = new Set<string>();
   for (const s of subsQuery.data.value ?? []) {
@@ -39,7 +41,10 @@ const domainOptions = computed(() => {
 });
 
 const filteredSubs = computed(() => {
-  const list = subsQuery.data.value ?? [];
+  let list = subsQuery.data.value ?? [];
+  if (filterSubId.value != null) {
+    list = list.filter((r) => r.subscription_id === filterSubId.value);
+  }
   if (!filterDomain.value) return list;
   if (filterDomain.value === "none") {
     return list.filter((r) => r.billing_domain == null);
@@ -48,7 +53,15 @@ const filteredSubs = computed(() => {
 });
 
 const filteredTops = computed(() => {
-  const list = topupsQuery.data.value ?? [];
+  let list = topupsQuery.data.value ?? [];
+  if (filterTradeNo.value) {
+    const q = filterTradeNo.value.trim().toLowerCase();
+    list = list.filter(
+      (r) =>
+        (r.trade_no ?? "").toLowerCase().includes(q) ||
+        (r.upstream_id != null && String(r.upstream_id).includes(q)),
+    );
+  }
   if (!filterDomain.value) return list;
   if (filterDomain.value === "none") {
     return list.filter((r) => r.billing_domain == null);
@@ -67,18 +80,23 @@ const checking = ref(false);
 
 function syncFromRoute() {
   tab.value = route.query.tab === "topups" ? "topups" : "subs";
+  const sid = route.query.subscription_id;
+  filterSubId.value = typeof sid === "string" && sid ? Number(sid) || null : null;
+  const tn = route.query.trade_no;
+  filterTradeNo.value = typeof tn === "string" && tn ? tn : null;
 }
 
-function pushTab() {
-  void router.replace({
-    path: "/admin/payments",
-    query: tab.value === "topups" ? { tab: "topups" } : {},
-  });
+function pushQuery() {
+  const query: Record<string, string> = {};
+  if (tab.value === "topups") query.tab = "topups";
+  if (filterSubId.value != null) query.subscription_id = String(filterSubId.value);
+  if (filterTradeNo.value) query.trade_no = filterTradeNo.value;
+  void router.replace({ path: "/admin/payments", query });
 }
 
 syncFromRoute();
 watch(() => route.query, () => syncFromRoute());
-watch(tab, () => pushTab());
+watch([tab, filterSubId, filterTradeNo], () => pushQuery());
 
 const subRows = computed(() => [...filteredSubs.value]);
 const topRows = computed(() => {
@@ -231,6 +249,24 @@ watch(
     </a-tabs>
 
     <div class="payments-toolbar">
+      <template v-if="tab === 'subs'">
+        <a-input-number
+          v-model:value="filterSubId"
+          :min="1"
+          :precision="0"
+          style="width: 140px"
+          placeholder="订阅 ID"
+          allow-clear
+        />
+      </template>
+      <template v-else>
+        <a-input
+          v-model:value="filterTradeNo"
+          style="width: 180px"
+          placeholder="交易号 / 上游 ID"
+          allow-clear
+        />
+      </template>
       <a-select
         v-model:value="filterDomain"
         :options="[

docs/design/交互设计-支付记录.md

@@ -4,7 +4,7 @@
 
 | 项目 | 内容 |
 |------|------|
-| 状态 | 定稿（2026-10-12，作者认可实现） |
+| 状态 | 定稿（2026-10-12，作者认可实现；补订阅 ID / 交易号筛选） |
 | 关联 | 《交互设计-总览与共性》· `subscriptions表字段设计.md` · `topups表字段设计.md` · R7/R8 |
 | 数据 | `subscriptions` + `topups` · 日志观测的订阅 ID（核对提示） |
 
@@ -19,14 +19,15 @@
 | **订阅** | 订阅权益表 | 登记订阅 |
 | **充值** | 充值入账表 | 登记充值 |
 
-筛选随 Tab：
+筛选随 Tab（均为前端过滤——清单全量直返）：
 
 | Tab | 筛选 | URL |
 |-----|------|-----|
-| 订阅 | 订阅 ID / 期间与所选窗口重叠（拆表后） | `tab=subs` |
-| 充值 | **仅类型**（付费时间筛选已撤——`paid_at` 语义待拆表钉死） | `tab=topups` · `kind` |
+| 订阅 | 订阅 ID（精确，可空）· 账本域（含「未标注」） | `tab=subs` · `subscription_id` |
+| 充值 | 交易号（子串，可空）· 账本域 | `tab=topups` · `trade_no` |
 
-当前实现（拆表前）：仅「类型」筛选；补录审计可看「登记」列（`created_at`）。
+- 切换 Tab 保留另一 Tab 已填筛选；URL 同步便于从调用日志来源徽章深链（`subscription_id`）
+- 补录审计可看「登记」列（`created_at`）
 
 ## 2. 订阅清单列
 

docs/design/交互设计-调用日志.md

@@ -4,7 +4,7 @@
 
 | 项目 | 内容 |
 |------|------|
-| 状态 | 定稿（2026-10-08；2026-10-13 补模型筛选与汇总条） |
+| 状态 | 定稿（2026-10-08；2026-10-13 补模型筛选与汇总条、来源徽章支付弹窗） |
 | 关联 | 《实现方案-日志模型筛选与汇总条》·《API契约-管理面》§6（过滤与 DTO）·《交互设计-总览与共性》（时间范围、数值呈现、状态模式）·《交互设计-key管理》《交互设计-成员管理》《交互设计-全员总览》（双向跳转）· `usage_logs表字段设计.md` |
 | 数据 | `usage_logs` 明细（分页；默认全类型，可筛 `type` / `model_name`）+ 当前筛选汇总（条数 + 消费用量） |
 
@@ -59,7 +59,8 @@
 | 操作 | 「详情」按钮 | 开详情弹窗 |
 
 - 分页：默认 50，档位 20 / 50 / 100 / 200（无界列表）
-- **「详情」弹窗**（操作列，居中定高内滚，宽约 720）：时间 / Key·归属 / 模型·类型 / 用量 / Tokens / 耗时流式 / 来源 / 内容（错误详情），以及**原始数据**（落库行 JSON，内滚）；**不承载支付参数**（管理面支付另页）——需要看订阅登记时从来源徽章旁的链接或工具提示指向支付记录筛选
+- **来源徽章**：`订阅 #N`（蓝）**可点** → 支付参数弹窗（期间 / 额度 / 金额 / 备注；无登记显示「该订阅无登记信息」）；底栏「在支付记录中查看」→ 支付记录页并带 `subscription_id` 深链。`充值` / `未关联` 为纯标识，不可点（与成员端同构）
+- **「详情」弹窗**（操作列，居中定高内滚，宽约 720）：时间 / Key·归属 / 模型·类型 / 用量 / Tokens / 耗时流式 / 来源 / 内容（错误详情），以及**原始数据**（落库行 JSON，内滚）；**不承载支付参数**（支付参数走来源徽章弹窗，核对/补录走支付记录页）
 - 空态：「该时段内无调用日志」
 - 窄屏：表格横向滚动（共性 §3.5）
 
@@ -72,6 +73,7 @@
 | 成员管理 · 行操作「查调用」 | 本页 | `member_id` |
 | 本页 · Key 列 | Key 管理 | `key_id`（定位/高亮） |
 | 本页 · 归属列 | 成员管理 | `member_id`（筛选） |
+| 本页 · 来源徽章弹窗「在支付记录中查看」 | 支付记录 | `tab=subs` + `subscription_id` |
 | 健康带失败数（总览） | 仍去 Key 管理失败筛选 | 不变 |
 
 ## 5. 状态与边界