From 2ff311005ee56a597e3f3c24902e2c930c4055e9 Mon Sep 17 00:00:00 2001
From: CieanYau <ltd@crash.work>
Date: Fri, 6 Nov 2026 00:33:17 +0800
Subject: [PATCH] docs: explain instance billing and renewal workflows

---
 app/components/instance/InstanceBilling.vue     | 6 ++++++
 app/components/instance/InstanceOnDemand.vue    | 5 +++++
 app/components/instance/InstanceRenewDialog.vue | 4 ++++
 app/components/instance/InstanceServiceInfo.vue | 2 ++
 4 files changed, 17 insertions(+)

diff --git a/app/components/instance/InstanceBilling.vue b/app/components/instance/InstanceBilling.vue
index 732dc50..e67790e 100644
--- a/app/components/instance/InstanceBilling.vue
+++ b/app/components/instance/InstanceBilling.vue
@@ -1,4 +1,5 @@
 <script>
+// 实例计费面板：串联升级、自动续费、退款/停用申请及安全验证重试。
 import "~/assets/styles/KkyUpgrade.CkDmxFBM.css";
 import "~/assets/styles/MfCloudUpgrade.N7TNG8F1.css";
 import "~/assets/styles/ConfigBandwidth.CWSH1WJZ.css";
@@ -227,6 +228,7 @@ var Se = {
             I = ref(!1),
             L = ref(``),
             R = 0;
+          // 自动续费只接受接口明确返回的 0/1，并用请求序号避免旧响应覆盖新设置。
           async function z() {
             let e = S.hostId,
               t = k,
@@ -324,6 +326,7 @@ var Se = {
                 Number(B.value?.allow_refund) === 1 &&
                 (!V.value || [`Reject`, `Cancelled`].includes(V.value.status)),
             );
+          // 同时读取退款规则和当前申请，决定能否申请、可选原因以及撤销入口。
           async function X() {
             let e = S.hostId,
               t = k,
@@ -364,6 +367,7 @@ var Se = {
               (D.value = ``),
               (H.value = !0));
           }
+          // 按后台要求提交自定义原因或原因 ID；遇到安全挑战时保留请求等待验证。
           async function ut(e) {
             if (W.value || G.value || !Y.value) return;
             let t = S.hostId,
@@ -411,6 +415,7 @@ var Se = {
               A(t, n) && (W.value = !1);
             }
           }
+          // 将安全验证字段合入原申请重试；再次收到挑战不能视为申请成功。
           async function dt(e) {
             if (!K.value || W.value) return;
             let t = {
@@ -461,6 +466,7 @@ var Se = {
             bw: S.info.bw,
             protect: S.info.protect,
           }));
+          // 实例切换后使旧请求失效，并重新加载该实例的计费、退款与优惠码状态。
           function mt() {
             (k++,
               (F.value = null),
diff --git a/app/components/instance/InstanceOnDemand.vue b/app/components/instance/InstanceOnDemand.vue
index de33fb5..570498c 100644
--- a/app/components/instance/InstanceOnDemand.vue
+++ b/app/components/instance/InstanceOnDemand.vue
@@ -1,4 +1,5 @@
 <script>
+// 管理按需/预付费转换及自动释放计划；可用操作取决于后台明确返回的能力与实例状态。
 import "~/assets/styles/InstanceOnDemand.okGWwgIJ.css";
 import { toDisplayString } from "vue";
 import { onBeforeUnmount } from "vue";
@@ -146,6 +147,7 @@ var oe = {
                 Y === q() &&
                 (E.value ? !!X.value : !!B.value),
             );
+          // 实例、计费模式或能力变化时关闭弹窗并作废报价，防止跨模式误提交。
           function Q() {
             (G++,
               (Y = ``),
@@ -162,6 +164,7 @@ var oe = {
             onBeforeUnmount(() => {
               ((K = !0), Q());
             }));
+          // 两种转换方向的报价结构不同，分别校验周期选项或按需/保留时间价格。
           async function $() {
             if (!A.value || F.value) return;
             ((N.value = !0),
@@ -209,6 +212,7 @@ var oe = {
               e === G && !K && (P.value = !1);
             }
           }
+          // 仅使用当前身份快照下的报价提交；产生订单时把订单交给父级支付入口。
           async function me() {
             if (!Z.value) return;
             ((F.value = !0), (I.value = ``));
@@ -278,6 +282,7 @@ var oe = {
               (I.value = ``),
               (V.value = !0));
           }
+          // 自动释放可能删除实例，必须明确勾选知情确认；时间以秒提交，0 表示取消计划。
           async function _e() {
             if (!j.value || F.value || !V.value || !U.value) return;
             let e = H.value ? Math.floor(H.value.getTime() / 1e3) : 0;
diff --git a/app/components/instance/InstanceRenewDialog.vue b/app/components/instance/InstanceRenewDialog.vue
index 36d5ab5..9a13386 100644
--- a/app/components/instance/InstanceRenewDialog.vue
+++ b/app/components/instance/InstanceRenewDialog.vue
@@ -1,4 +1,5 @@
 <script>
+// 续费弹窗以实例和优惠码快照绑定报价，避免使用已过期的周期价格提交。
 import "~/assets/styles/InstanceRenewDialog.BHDAL6d3.css";
 import { toDisplayString } from "vue";
 import { useId } from "vue";
@@ -133,6 +134,7 @@ var ue = {
             ),
             be = computed(() => J.value?.price ?? ``),
             Z = computed(() => Number(J.value?.client_level_discount ?? 0));
+          // 获取并规范化周期报价；弹窗关闭、实例变化或优惠码变化后丢弃旧结果。
           async function Q() {
             let e = ++K,
               t = N.hostId,
@@ -190,6 +192,7 @@ var ue = {
             onBeforeUnmount(() => {
               (K++, (R.value = !1));
             }));
+          // 优惠码只有报价成功且后台确认可用才生效，否则恢复原优惠码重新报价。
           async function $() {
             let e = W.value.trim();
             if (!e || R.value || z.value) return;
@@ -212,6 +215,7 @@ var ue = {
           async function xe() {
             R.value || z.value || ((U.value = []), await Q());
           }
+          // 仅提交当前有效报价对应的周期和优惠码；接口成功后通知父级刷新支付流程。
           async function Se() {
             if (X.value) {
               ((z.value = !0), (H.value = ``), (I.value = ``));
diff --git a/app/components/instance/InstanceServiceInfo.vue b/app/components/instance/InstanceServiceInfo.vue
index 2ed1ceb..ddec8ae 100644
--- a/app/components/instance/InstanceServiceInfo.vue
+++ b/app/components/instance/InstanceServiceInfo.vue
@@ -1,4 +1,5 @@
 <script>
+// 实例服务概览：统一展示状态、配置与计费信息，并为符合条件的欠费实例提供续费入口。
 import "~/assets/styles/FlowPacketPanel.-RJSx13z.css";
 import "~/assets/styles/InstanceServiceInfo.BftSVIeW.css";
 import { toDisplayString } from "vue";
@@ -112,6 +113,7 @@ var N = defineAsyncComponent(() =>
             W.value = !1;
           });
           let K = ref(!1),
+            // 兼容模块详情与主机附加字段的结构，密码默认脱敏后再生成明细行。
             q = computed(() => {
               let e = b.info ?? {},
                 t = instance_data_l(e.raw ?? e),