From c32548e59806ef77e43066d9aec885d069ca9feb Mon Sep 17 00:00:00 2001
From: skycurtain <skycurtain@163.com>
Date: Fri, 9 Oct 2026 22:41:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E6=94=AF=E4=BB=98=E8=A1=A8?=
 =?UTF-8?q?=E5=88=97=E4=B8=8E=E8=A1=A8=E5=8D=95=E8=AF=AD=E4=B9=89=E6=A0=A1?=
 =?UTF-8?q?=E5=87=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

充值金额/实付金额文案与 dataIndex；期间两行；备注列收窄；
选用弹层 booting 不闪登录；订阅 paid_at 不默认当前时间。
---
 .../components/admin/payment-form-modal.vue   | 19 +++---
 .../admin/platform-subscription-picker.vue    | 32 ++++++++--
 .../admin/platform-topup-picker.vue           | 33 +++++++++-
 apps/web/src/views/admin/payments-view.vue    | 38 +++++++++---
 apps/web/src/views/member/payments-view.vue   | 61 +++++++++++++++----
 docs/design/payments建模评估.md               |  2 +-
 docs/design/topups表字段设计.md               |  8 +--
 docs/design/交互设计-成员视图.md              |  2 +-
 docs/design/交互设计-支付记录.md              |  4 +-
 docs/references/NewAPI-接口范围.md            |  2 +-
 10 files changed, 157 insertions(+), 44 deletions(-)

diff --git a/apps/web/src/components/admin/payment-form-modal.vue b/apps/web/src/components/admin/payment-form-modal.vue
index ee03f9f..f6fa017 100644
--- a/apps/web/src/components/admin/payment-form-modal.vue
+++ b/apps/web/src/components/admin/payment-form-modal.vue
@@ -149,8 +149,8 @@ watch(
         s.paid_at != null ? unixToBeijingWall(s.paid_at) : null;
       subForm.remark = s.remark;
     } else {
+      // 订阅的 paid_at 是「套餐付款时刻」，可空——不默认填今天
       resetSub();
-      subForm.paid_at = dayjs();
     }
     if (props.editingTop) {
       isSub.value = false;
@@ -248,7 +248,7 @@ async function onSubmit() {
       }
     } else {
       if (topForm.amount == null || topForm.amount <= 0) {
-        error.value = "请填写计费单位金额（须为正）";
+        error.value = "请填写充值金额 amount（须为正）";
         return;
       }
       if (topForm.money == null || topForm.money < 0) {
@@ -362,7 +362,7 @@ async function onSubmit() {
           {{ quotaPreview }} · 落库为原始 quota
         </div>
       </a-form-item>
-      <a-form-item label="付款金额 / 时间（可空）">
+      <a-form-item label="付款金额 / 付款时间（可空）">
         <a-input-number
           v-model:value="subForm.paid_amount"
           :min="0"
@@ -374,10 +374,12 @@ async function onSubmit() {
           v-model:value="subForm.paid_at"
           :format="TIME_FMT"
           :show-time="{ defaultValue: undefined }"
-          placeholder="付款时间（可空）"
+          placeholder="钱出手时刻（可空）"
           style="width: 200px; margin-left: 8px"
         />
-        <div class="form-note">金额数值——币种由你们约定，系统不预设；金额不可为负</div>
+        <div class="form-note">
+          社交层付款事实：金额数值、币种由你们约定；未知可留空。登记时刻由系统另记
+        </div>
       </a-form-item>
       <a-form-item label="备注">
         <a-input v-model:value="subForm.remark" />
@@ -385,7 +387,7 @@ async function onSubmit() {
     </a-form>
 
     <a-form v-else layout="vertical">
-      <a-form-item label="计费单位 amount" required>
+      <a-form-item label="充值金额 amount" required>
         <a-space>
           <a-input-number
             v-model:value="topForm.amount"
@@ -396,17 +398,18 @@ async function onSubmit() {
           <a-button @click="topPickerOpen = true">从平台选用</a-button>
         </a-space>
         <div class="form-note">
-          上游 amount（美元额度形态）；换得 quota = amount × QPU
+          平台计费侧充值额（不标币种）；与「实付」之间汇率由管理员约定。换得 quota ≈ amount × QPU
           <template v-if="quotaPreview"> · {{ quotaPreview }}</template>
         </div>
       </a-form-item>
-      <a-form-item label="实付 money" required>
+      <a-form-item label="实付金额 money" required>
         <a-input-number
           v-model:value="topForm.money"
           :min="0"
           :precision="2"
           style="width: 180px"
         />
+        <div class="form-note">实际支付金额（不预设币种）</div>
       </a-form-item>
       <a-form-item label="入账时间 paid_at" required>
         <a-date-picker
diff --git a/apps/web/src/components/admin/platform-subscription-picker.vue b/apps/web/src/components/admin/platform-subscription-picker.vue
index 962fc2d..78cd0a9 100644
--- a/apps/web/src/components/admin/platform-subscription-picker.vue
+++ b/apps/web/src/components/admin/platform-subscription-picker.vue
@@ -28,6 +28,8 @@ const username = ref("");
 const password = ref("");
 const error = ref("");
 const loading = ref(false);
+/** 打开后检查登录并拉取中——避免闪现登录表单 */
+const booting = ref(false);
 const list = ref<PlatformSubscription[]>([]);
 
 function readToken(): string {
@@ -51,13 +53,18 @@ watch(
   () => props.open,
   (v) => {
     if (v) {
-      // 每次打开都重新拉取——上游续订/新订阅要能看见
-      if (readToken()) void load(true);
+      // 有 token：先显示「检查中」，拉完再进列表/登录，不闪登录表单
+      if (readToken()) {
+        booting.value = true;
+        void load(true).finally(() => {
+          booting.value = false;
+        });
+      }
     } else {
       list.value = [];
       error.value = "";
       password.value = "";
-      // 用户名可留作便利；密码绝不残留
+      booting.value = false;
     }
   },
 );
@@ -119,7 +126,11 @@ function onUse(s: PlatformSubscription) {
     destroy-on-hidden
     @update:open="emit('update:open', $event)"
   >
-    <template v-if="list.length === 0">
+    <div v-if="booting || (loading && list.length === 0)" class="plat-pick__boot">
+      <a-spin />
+      <span class="plat-pick__boot-text">正在检查登录并拉取…</span>
+    </div>
+    <template v-else-if="list.length === 0">
       <p class="plat-pick__hint">
         使用 NewAPI 控制台账号登录后拉取订阅，仅用于预填登记；密码不保存。
       </p>
@@ -183,6 +194,19 @@ function onUse(s: PlatformSubscription) {
 </template>
 
 <style scoped>
+.plat-pick__boot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 48px 0;
+}
+
+.plat-pick__boot-text {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+}
+
 .plat-pick__hint {
   margin: 0 0 16px;
   font-size: 12px;
diff --git a/apps/web/src/components/admin/platform-topup-picker.vue b/apps/web/src/components/admin/platform-topup-picker.vue
index e084ce9..082f4b7 100644
--- a/apps/web/src/components/admin/platform-topup-picker.vue
+++ b/apps/web/src/components/admin/platform-topup-picker.vue
@@ -28,6 +28,8 @@ const username = ref("");
 const password = ref("");
 const error = ref("");
 const loading = ref(false);
+/** 打开后检查登录并拉取中——避免闪现登录表单 */
+const booting = ref(false);
 const items = ref<PlatformTopup[]>([]);
 const total = ref(0);
 const page = ref(1);
@@ -121,14 +123,19 @@ watch(
   () => props.open,
   (v) => {
     if (v) {
-      // 每次打开重拉第一页（有 token 则免再输密码）
-      if (readToken()) void loadPage(1, { allowTokenOnly: true });
+      if (readToken()) {
+        booting.value = true;
+        void loadPage(1, { allowTokenOnly: true }).finally(() => {
+          booting.value = false;
+        });
+      }
     } else {
       items.value = [];
       total.value = 0;
       page.value = 1;
       error.value = "";
       password.value = "";
+      booting.value = false;
     }
   },
 );
@@ -145,7 +152,14 @@ watch(
     destroy-on-hidden
     @update:open="emit('update:open', $event)"
   >
-    <template v-if="items.length === 0 && !loading">
+    <div
+      v-if="booting || (loading && items.length === 0)"
+      class="top-pick__boot"
+    >
+      <a-spin />
+      <span class="top-pick__boot-text">正在检查登录并拉取…</span>
+    </div>
+    <template v-else-if="items.length === 0 && !loading">
       <p class="top-pick__hint">
         登录 NewAPI 控制台拉取充值单（传统分页）；密码不保存。
       </p>
@@ -222,6 +236,19 @@ watch(
 </template>
 
 <style scoped>
+.top-pick__boot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 48px 0;
+}
+
+.top-pick__boot-text {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+}
+
 .top-pick__hint {
   margin: 0 0 16px;
   font-size: 12px;
diff --git a/apps/web/src/views/admin/payments-view.vue b/apps/web/src/views/admin/payments-view.vue
index b90b478..d5cc526 100644
--- a/apps/web/src/views/admin/payments-view.vue
+++ b/apps/web/src/views/admin/payments-view.vue
@@ -57,7 +57,7 @@ const topRows = computed(() => {
 });
 
 const subColumns = [
-  { title: "订阅 ID", key: "subscription_id", width: 100 },
+  { title: "订阅 ID", dataIndex: "subscription_id", key: "subscription_id", width: 100 },
   { title: "期间", key: "period", width: 200 },
   { title: "额度", key: "quota", width: 160 },
   { title: "付款", key: "paid", width: 140 },
@@ -68,17 +68,24 @@ const subColumns = [
 
 const topColumns = [
   { title: "时间", key: "paid_at", width: 150 },
-  { title: "计费单位", key: "amount", width: 100 },
-  { title: "实付", key: "money", width: 100 },
+  {
+    title: "充值金额",
+    dataIndex: "amount",
+    key: "amount",
+    width: 100,
+  },
+  { title: "实付金额", dataIndex: "money", key: "money", width: 100 },
   { title: "交易号 / 渠道", key: "trade", width: 180 },
   { title: "派生额度", key: "quota", width: 150 },
   { title: "备注", key: "remark" },
   { title: "操作", key: "actions", width: 120 },
 ];
 
-function periodText(s: SubscriptionItem): string {
-  const end = s.period_end == null ? "进行中" : formatDateTime(s.period_end);
-  return `${formatDateTime(s.period_start)} ~ ${end}`;
+function periodLines(s: SubscriptionItem): { start: string; end: string } {
+  return {
+    start: formatDateTime(s.period_start),
+    end: s.period_end == null ? "进行中" : formatDateTime(s.period_end),
+  };
 }
 
 function onCreateSub() {
@@ -226,7 +233,10 @@ watch(
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'period'">
-            {{ periodText(record) }}
+            <div class="pay-period">
+              <span>{{ periodLines(record).start }}</span>
+              <span class="pay-period__end">~ {{ periodLines(record).end }}</span>
+            </div>
           </template>
           <template v-else-if="column.key === 'quota'">
             <QuotaText :quota="record.quota_granted" :quota-usd="record.quota_usd" />
@@ -282,6 +292,9 @@ watch(
           <template v-if="column.key === 'paid_at'">
             {{ formatDateTime(record.paid_at) }}
           </template>
+          <template v-else-if="column.key === 'amount'">
+            {{ formatPaidAmount(record.amount) }}
+          </template>
           <template v-else-if="column.key === 'money'">
             {{ formatPaidAmount(record.money) }}
           </template>
@@ -324,6 +337,17 @@ watch(
 </template>
 
 <style scoped>
+.pay-period {
+  display: flex;
+  flex-direction: column;
+  line-height: 20px;
+  font-variant-numeric: tabular-nums;
+}
+
+.pay-period__end {
+  color: rgba(0, 0, 0, 0.65);
+}
+
 .pay-missing__tags {
   display: flex;
   flex-wrap: wrap;
diff --git a/apps/web/src/views/member/payments-view.vue b/apps/web/src/views/member/payments-view.vue
index ef42874..4e3ffe8 100644
--- a/apps/web/src/views/member/payments-view.vue
+++ b/apps/web/src/views/member/payments-view.vue
@@ -28,28 +28,46 @@ const extraPresets = computed(() =>
     .slice(0, 4),
 );
 
-function periodText(p: {
+function periodLines(p: {
   period_start: number;
   period_end: number | null;
-}): string {
-  const end = p.period_end == null ? "进行中" : formatDateTime(p.period_end);
-  return `${formatDateTime(p.period_start)} ~ ${end}`;
+}): { start: string; end: string } {
+  return {
+    start: formatDateTime(p.period_start),
+    end: p.period_end == null ? "进行中" : formatDateTime(p.period_end),
+  };
 }
 
 const subColumns = [
-  { title: "订阅 ID", key: "subscription_id", width: 100 },
+  {
+    title: "订阅 ID",
+    dataIndex: "subscription_id",
+    key: "subscription_id",
+    width: 100,
+  },
   { title: "期间", key: "period", width: 200 },
   { title: "额度", key: "quota", width: 160 },
-  { title: "付款", key: "paid", width: 140 },
-  { title: "备注", key: "remark" },
+  { title: "付款", key: "paid", width: 150 },
+  { title: "备注", dataIndex: "remark", key: "remark", width: 140, ellipsis: true },
 ];
 
 const topColumns = [
   { title: "时间", key: "paid_at", width: 150 },
-  { title: "计费单位 / 实付", key: "money", width: 140 },
+  {
+    title: "充值金额",
+    dataIndex: "amount",
+    key: "amount",
+    width: 100,
+  },
+  {
+    title: "实付金额",
+    dataIndex: "money",
+    key: "money",
+    width: 100,
+  },
   { title: "交易号 / 渠道", key: "trade", width: 180 },
   { title: "派生额度", key: "quota", width: 150 },
-  { title: "备注", key: "remark" },
+  { title: "备注", dataIndex: "remark", key: "remark", width: 140, ellipsis: true },
 ];
 </script>
 
@@ -101,11 +119,14 @@ const topColumns = [
         :row-key="(r: { id: number }) => r.id"
         size="middle"
         :pagination="false"
-        :scroll="{ x: 800 }"
+        :scroll="{ x: 760 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'period'">
-            {{ periodText(record) }}
+            <div class="mv-period">
+              <span>{{ periodLines(record).start }}</span>
+              <span class="mv-period__end">~ {{ periodLines(record).end }}</span>
+            </div>
           </template>
           <template v-else-if="column.key === 'quota'">
             <QuotaText :quota="record.quota_granted" :quota-usd="record.quota_usd" />
@@ -132,14 +153,17 @@ const topColumns = [
         :row-key="(r: { id: number }) => r.id"
         size="middle"
         :pagination="false"
-        :scroll="{ x: 760 }"
+        :scroll="{ x: 840 }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'paid_at'">
             {{ formatDateTime(record.paid_at) }}
           </template>
+          <template v-else-if="column.key === 'amount'">
+            {{ formatPaidAmount(record.amount) }}
+          </template>
           <template v-else-if="column.key === 'money'">
-            {{ record.amount }} · {{ formatPaidAmount(record.money) }}
+            {{ formatPaidAmount(record.money) }}
           </template>
           <template v-else-if="column.key === 'trade'">
             {{ record.trade_no || "—" }}
@@ -164,6 +188,17 @@ const topColumns = [
 </template>
 
 <style scoped>
+.mv-period {
+  display: flex;
+  flex-direction: column;
+  line-height: 20px;
+  font-variant-numeric: tabular-nums;
+}
+
+.mv-period__end {
+  color: rgba(0, 0, 0, 0.65);
+}
+
 .mv-range-label {
   font-size: 13px;
   color: rgba(0, 0, 0, 0.65);
diff --git a/docs/design/payments建模评估.md b/docs/design/payments建模评估.md
index 997d4bb..a1f40fb 100644
--- a/docs/design/payments建模评估.md
+++ b/docs/design/payments建模评估.md
@@ -74,7 +74,7 @@ payments
 subscriptions                 topups
   id PK                         id PK
   subscription_id UNIQUE        upstream_id?          ← 上游充值单 id
-  period_start NOT NULL         amount NOT NULL       ← 计费单位（美元额度形态）
+  period_start NOT NULL         amount NOT NULL       ← 平台计费金额（充值额）
   period_end NULL               money NOT NULL        ← 实付
   quota_granted NOT NULL        trade_no / payment_*  ← 渠道事实
   paid_amount NULL              paid_at NOT NULL      ← = 上游 complete_time（唯一事件时刻）
diff --git a/docs/design/topups表字段设计.md b/docs/design/topups表字段设计.md
index ce42d03..6806f2c 100644
--- a/docs/design/topups表字段设计.md
+++ b/docs/design/topups表字段设计.md
@@ -23,8 +23,8 @@
 |----|------|----------|------|
 | `id` | bigserial PK | — | 本地主键 |
 | `upstream_id` | bigint? | `id` | 上游充值单 ID（对账；手工补录可空） |
-| `amount` | numeric | `amount` | **计费单位金额**（样本 `1`——美元额度形态，≠ 实付货币） |
-| `money` | numeric | `money` | **实付金额**（样本 `2.04`）；币种无关纯数值 |
+| `amount` | numeric | `amount` | **平台计费金额**（充值记账额，样本 `1`）——与实付 `money` 之间由**管理员约定汇率**换算；**不标币种/单位** |
+| `money` | numeric | `money` | **实付金额**（样本 `2.04`）；同样不预设币种 |
 | `trade_no` | text? | `trade_no` | 交易号 |
 | `payment_method` | text? | `payment_method` | 如 `alipay` |
 | `payment_provider` | text? | `payment_provider` | 如 `epay` |
@@ -37,9 +37,9 @@
 
 ## 3. 「换得额度」是派生
 
-上游无 `quota_granted`：派生 `amount × quota_per_unit`（默认 QPU 500000）。
+上游无 `quota_granted`：派生 `amount × quota_per_unit`（默认 QPU 500000）——`amount` 是平台计费侧充值额，与 quota 同域量纲。
 
-- **只存事实**：`amount` 与 `money` 两真值；比率现算（R6/R9）
+- **只存事实**：`amount`（平台计费）与 `money`（实付）两真值；**汇率不入库**（管理员社交约定，查询/展示可现算 `money/amount`）
 - 不在库中固化派生额度
 
 ## 4. 时刻语义
diff --git a/docs/design/交互设计-成员视图.md b/docs/design/交互设计-成员视图.md
index 937d8eb..a841625 100644
--- a/docs/design/交互设计-成员视图.md
+++ b/docs/design/交互设计-成员视图.md
@@ -132,7 +132,7 @@
 | 列 | 内容 |
 |----|------|
 | 时间 | `paid_at`（入账完成） |
-| 计费单位 / 实付 | `amount` · `money` |
+| 充值金额 / 实付金额 | `amount` · `money`（汇率约定，不标币种） |
 | 交易号 / 渠道 | `trade_no` · 支付方式 |
 | 派生额度 | `amount × qpu` + $（展示） |
 | 备注 | `remark` |
diff --git a/docs/design/交互设计-支付记录.md b/docs/design/交互设计-支付记录.md
index 7b820bb..f520af3 100644
--- a/docs/design/交互设计-支付记录.md
+++ b/docs/design/交互设计-支付记录.md
@@ -45,8 +45,8 @@
 | 列 | 内容 |
 |----|------|
 | 时间 | `paid_at`（= 上游 `complete_time`，平台展示时刻；倒序） |
-| 计费单位 | `amount`（如 `1`） |
-| 实付 | `money`（如 `2.04`，纯数字） |
+| 充值金额 | `amount`（平台计费侧充值额，不标币种） |
+| 实付金额 | `money`（如 `2.04`，纯数字） |
 | 交易号 / 渠道 | `trade_no` · `payment_method` / `payment_provider` |
 | 派生额度 | `amount × qpu` + $（展示，不入库） |
 | 备注 / 登记 | `remark` · `created_at` |
diff --git a/docs/references/NewAPI-接口范围.md b/docs/references/NewAPI-接口范围.md
index 24c4acc..0225793 100644
--- a/docs/references/NewAPI-接口范围.md
+++ b/docs/references/NewAPI-接口范围.md
@@ -308,7 +308,7 @@ quota = ( (prompt_tokens − cache_tokens)             ← 提示 tokens（未
 |------|------|------|
 | `id` | `17` | 上游充值单 ID |
 | `user_id` | `6` | 账号 |
-| `amount` | `1` | **计费单位金额**（与「美元额度」同构，≠ 实付货币） |
+| `amount` | `1` | **平台计费金额**（充值记账额；与 `money` 之间为管理员约定汇率，不标币种） |
 | `money` | `2.04` | **实付金额** |
 | `trade_no` | `USR6…` | 交易号 |
 | `payment_method` / `payment_provider` | `alipay` / `epay` | 渠道 |