fix(web): 支付表列与表单语义校准

充值金额/实付金额文案与 dataIndex；期间两行；备注列收窄；
选用弹层 booting 不闪登录；订阅 paid_at 不默认当前时间。

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

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;

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;

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;

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);