From 9166b1376dfb0c9643b2f9cccc984659ab24b462 Mon Sep 17 00:00:00 2001
From: CieanYau <ltd@crash.work>
Date: Fri, 6 Nov 2026 00:33:20 +0800
Subject: [PATCH] docs: annotate cloud network and upgrade components

---
 app/components/mfcloud/MfCloudDefence.vue     | 14 +++++++++++++
 app/components/mfcloud/MfCloudIps.vue         | 14 +++++++++++++
 app/components/mfcloud/MfCloudLogs.vue        | 11 ++++++++++
 app/components/mfcloud/MfCloudNat.vue         | 11 ++++++++++
 .../mfcloud/MfCloudResourceUpgrade.vue        | 14 +++++++++++++
 app/components/mfcloud/MfCloudUpgrade.vue     | 11 ++++++++++
 app/components/mfcloud/MfCloudVpc.vue         | 20 +++++++++++++++++++
 7 files changed, 95 insertions(+)

diff --git a/app/components/mfcloud/MfCloudDefence.vue b/app/components/mfcloud/MfCloudDefence.vue
index 57d54a3..5387616 100644
--- a/app/components/mfcloud/MfCloudDefence.vue
+++ b/app/components/mfcloud/MfCloudDefence.vue
@@ -1,4 +1,8 @@
 <script>
+/**
+ * 每 IP 防御调整面板：父级提供实例、模块、IP 集合及操作权限，订单通过 pay 事件交回父级支付。
+ * 配置加载、取价、下单分别计数；IP/实例/目标档位变化时旧报价立即失效。
+ */
 import "~/assets/styles/MfCloudDefence.B2vl5Yip.css";
 import { toDisplayString } from "vue";
 import { onMounted } from "vue";
@@ -27,6 +31,7 @@ import select from "primevue/select";
 import { n as cloud_instance_management_n } from "~/lib/cloud-instance-management.js";
 import { s as cloud_instance_management_s } from "~/lib/cloud-instance-management.js";
 import { t as cloud_instance_management_t } from "~/lib/cloud-instance-management.js";
+// 恢复渲染函数的静态节点属性；保留 scopeId 和既有 class 与样式文件的对应关系。
 var E = {
     class: `defence network-section`,
   },
@@ -94,6 +99,7 @@ var E = {
             B = ref(!1),
             V = ref(``),
             H = ref(``),
+            // 报价快照同时包含权限和弹窗状态，不能把关闭前或另一实例的价格继续用于下单。
             U = computed(() =>
               JSON.stringify([
                 k.hostId,
@@ -105,6 +111,7 @@ var E = {
               ]),
             ),
             W = ref(``),
+            // 不把当前档位再次当作可购买目标；K 要求当前选择确实存在且报价快照一致。
             G = computed(() =>
               P.value.filter((e) => String(e.value) !== String(N.value)),
             ),
@@ -122,6 +129,7 @@ var E = {
             J = 0,
             Y = 0,
             X = !1;
+          // 同步 watcher 调用此函数，使配置变化与按钮禁用发生在同一个更新周期。
           function Z() {
             (J++,
               (W.value = ``),
@@ -132,6 +140,7 @@ var E = {
           watch(U, Z, {
             flush: `sync`,
           });
+          /** 按选中 IP 取防御配置，通过统一适配器校验列表和当前值，空 IP 不发请求。 */
           async function Q() {
             let e = ++q,
               t = j.value,
@@ -163,6 +172,7 @@ var E = {
               !X && e === q && (F.value = !1);
             }
           }
+          // 只有实例活动、允许升级且存在其他档位时才打开空白调整表单。
           function ue() {
             k.upgradeAllowed &&
               k.active &&
@@ -171,6 +181,7 @@ var E = {
               G.value.length &&
               ((M.value = ``), (R.value = ``), (z.value = !0));
           }
+          /** 取得本次费用与续费差价；只接受序号和快照仍属于当前选择的结果。 */
           async function $() {
             if (
               (Z(),
@@ -202,6 +213,7 @@ var E = {
               !X && e === J && (B.value = !1);
             }
           }
+          /** 先核验有效报价再创建订单；只把合法订单号及金额发给父级，不在这里执行支付。 */
           async function de() {
             if (!K.value || X) return;
             let e = U.value,
@@ -251,9 +263,11 @@ var E = {
               },
             ),
             onMounted(Q),
+            // HTTP 请求未必即时取消，因此卸载标记和递增序号共同阻止迟到响应回填。
             onBeforeUnmount(() => {
               ((X = !0), q++, Z());
             }),
+            // UI 分为 IP/档位状态、加载错误与调整弹窗；提交期间禁用选择和关闭操作。
             (t, n) => {
               let r = select,
                 i = button,
diff --git a/app/components/mfcloud/MfCloudIps.vue b/app/components/mfcloud/MfCloudIps.vue
index a2debfa..53d02cd 100644
--- a/app/components/mfcloud/MfCloudIps.vue
+++ b/app/components/mfcloud/MfCloudIps.vue
@@ -1,4 +1,8 @@
 <script>
+/**
+ * 云实例 IPv4/IPv6 列表及附加地址购买；addresses 事件供父级更新可选 IP，pay 事件交接订单。
+ * 仅支持的云模块开放附加地址操作，upgradeAllowed 来自父级业务状态而非本地授权。
+ */
 import "~/assets/styles/MfCloudIps.jhFnuvcs.css";
 import { toDisplayString } from "vue";
 import { onMounted } from "vue";
@@ -117,10 +121,12 @@ var ce = {
             R = 0,
             z = 0,
             B = !1;
+          /** 两类地址并行加载、分别显示错误；每类以 100 条分页完整拉取，实例变化使旧结果失效。 */
           async function V() {
             let e = ++L,
               t = `/${O.module}/${O.hostId}`;
             ((P.value = !0), (F.value = ``), (I.value = ``));
+            // count 缺失时不足一页结束；有 count 却提前返回空页时不能当作完整列表。
             async function n(n) {
               let r = [],
                 i = 1;
@@ -182,6 +188,7 @@ var ce = {
             K = ref(``),
             q = ref(!1),
             J = ref(``),
+            // 数量、权限、实例和弹窗共同构成取价快照，任何一项变化都必须重新报价。
             Y = computed(() =>
               JSON.stringify([
                 O.hostId,
@@ -191,6 +198,7 @@ var ce = {
                 G,
               ]),
             ),
+            // IPv4/IPv6 可分别为 0，但总数必须大于 0；不能提交负数或非整数数量。
             X = computed(
               () =>
                 Number.isInteger(G.ip_num) &&
@@ -209,12 +217,14 @@ var ce = {
                 !q.value &&
                 !U.value,
             );
+          // 清除报价并递增序号，使较早的取价响应无法恢复过期的可提交状态。
           function Q() {
             (R++, (K.value = ``), (J.value = ``), (q.value = !1));
           }
           watch(Y, Q, {
             flush: `sync`,
           });
+          // 每次打开恢复为一枚 IPv4，并立即获取对应价格。
           async function xe() {
             O.upgradeAllowed !== !1 &&
               !U.value &&
@@ -225,6 +235,7 @@ var ce = {
               (H.value = !0),
               await $());
           }
+          /** 询价只更新与当前数量快照一致的响应，合法的零价格也能通过金额适配器。 */
           async function $() {
             if ((Q(), O.upgradeAllowed === !1 || !H.value || !X.value)) return;
             let e = ++R,
@@ -245,6 +256,7 @@ var ce = {
               !B && e === R && (q.value = !1);
             }
           }
+          /** 有有效报价才创建 ip_num/order，校验订单号后关闭弹窗并发 pay；不自动重复下单。 */
           async function Se() {
             if (!Z.value || B) return;
             let e = Y.value,
@@ -284,9 +296,11 @@ var ce = {
                   V());
               },
             ),
+            // 离开面板后作废地址请求和报价请求，防止回填已销毁界面。
             onBeforeUnmount(() => {
               ((B = !0), L++, Q());
             }),
+            // 两张地址表共享加载态但分别呈现错误；购买弹窗展示当前数量、报价和重报价入口。
             (t, n) => {
               let r = OperationNotice,
                 a = button,
diff --git a/app/components/mfcloud/MfCloudLogs.vue b/app/components/mfcloud/MfCloudLogs.vue
index 7e71194..a7f87ee 100644
--- a/app/components/mfcloud/MfCloudLogs.vue
+++ b/app/components/mfcloud/MfCloudLogs.vue
@@ -1,4 +1,8 @@
 <script>
+/**
+ * 实例操作日志列表，父级提供 hostId/module；关键词提交后才生效，输入中不连续发请求。
+ * 后端未给可信总数时以本页是否满页决定下一页，不伪造“共 N 条”。
+ */
 import "~/assets/styles/MfCloudLogs.MTqtLGjA.css";
 import { toDisplayString } from "vue";
 import { onMounted } from "vue";
@@ -74,11 +78,13 @@ var N = {
             G = ref(!1),
             K = ref(``),
             q = 0,
+            // H 为可信总数或 null；未知总数且满页时允许继续探测下一页。
             J = computed(() =>
               H.value === null
                 ? V.value.length === W.value
                 : U.value * W.value < H.value,
             );
+          /** 兼容数组/list/logs/log 包装，归一日志字段；请求序号隔离分页、筛选和实例切换。 */
           async function Y() {
             let e = ++q;
             ((G.value = !0), (K.value = ``));
@@ -97,6 +103,7 @@ var N = {
               V.value = instance_data_i(
                 Array.isArray(t) ? t : (n.list ?? n.logs ?? n.log),
               ).map(instance_data_o);
+              // 总数至少应覆盖当前页已展示记录，并设合理上限；不可信则退回未知总数模式。
               let r = Number(n.count ?? n.total);
               H.value =
                 Number.isFinite(r) &&
@@ -113,15 +120,18 @@ var N = {
               e === q && (G.value = !1);
             }
           }
+          // 刷新筛选始终回第一页，避免新条件在旧末页显示为空。
           function X() {
             return ((U.value = 1), Y());
           }
+          // z 是输入值，B 是已提交条件；两者分离使翻页继续使用同一份已确认筛选。
           function Z() {
             ((B.value = z.value.trim()), X());
           }
           function Q() {
             ((z.value = ``), (B.value = ``), X());
           }
+          // 加载中不叠加翻页；向后还需存在下一页，向前至少停留在第一页。
           function $(e) {
             G.value ||
               (e > 0 && !J.value) ||
@@ -138,6 +148,7 @@ var N = {
             onBeforeUnmount(() => {
               q++;
             }),
+            // 错误与空列表分别呈现；日志正文通过文本节点展示，熔断消息仅做业务文案转换。
             (t, n) => {
               let r = button,
                 a = inputicon,
diff --git a/app/components/mfcloud/MfCloudNat.vue b/app/components/mfcloud/MfCloudNat.vue
index d01cc00..ce1adcf 100644
--- a/app/components/mfcloud/MfCloudNat.vue
+++ b/app/components/mfcloud/MfCloudNat.vue
@@ -1,4 +1,8 @@
 <script>
+/**
+ * NAT 建站/端口转发共用面板：kind 决定 web 或 acl 协议，父级提供模块能力配额和实例活动态。
+ * 只管理列表与创建/删除，不产生订单；所有变更仍由后端校验权限及实际配额。
+ */
 import "~/assets/styles/MfCloudNat.C1uXa4fX.css";
 import { toDisplayString } from "vue";
 import { onMounted } from "vue";
@@ -84,6 +88,7 @@ var A = {
             W = ref(``),
             G = ref(!1),
             K = ref(null),
+            // 外部端口 null 表示由后端分配，与显式填写 0 不同；内部端口默认 80。
             q = reactive({
               name: ``,
               domain: ``,
@@ -92,6 +97,7 @@ var A = {
               protocol: 1,
             }),
             J = computed(() => (C.kind === `acl` ? `NAT 转发` : `NAT 建站`)),
+            // 功能开关和配额共同决定是否查询/开放操作，不能仅凭列表为空判断可创建。
             Y = computed(
               () =>
                 cloud_instance_management_i(C.module) && Number(C.limit) > 0,
@@ -99,6 +105,7 @@ var A = {
             X = computed(() => `/${C.module}/${C.hostId}/nat_${C.kind}`),
             Z = 0,
             Q = !1;
+          /** 刷新当前实例当前 kind 的列表；无能力时清空，响应形状异常时保留错误状态。 */
           async function $() {
             let e = ++Z,
               t = X.value;
@@ -120,6 +127,7 @@ var A = {
               !Q && e === Z && (V.value = !1);
             }
           }
+          // 只有列表已可靠加载且未用满配额才打开创建表单，避免在加载失败时误判剩余数量。
           function oe() {
             !Y.value ||
               !C.active ||
@@ -137,6 +145,7 @@ var A = {
               (W.value = ``),
               (G.value = !0));
           }
+          /** 通过统一 NAT 校验器生成最小请求体，成功后重读列表，不猜测后端分配的端口。 */
           async function se() {
             if (
               Q ||
@@ -171,6 +180,7 @@ var A = {
               !Q && t === X.value && (H.value = !1);
             }
           }
+          /** 删除前确认目标仍在当前列表，以 kind 特定的参数名提交，成功后重新取最新配额。 */
           async function ce() {
             let e = K.value;
             if (
@@ -217,6 +227,7 @@ var A = {
             onBeforeUnmount(() => {
               ((Q = !0), Z++);
             }),
+            // 创建与删除使用独立确认弹窗、共享提交锁；acl 显示协议/名称，web 显示域名。
             (t, n) => {
               let r = button,
                 i = message,
diff --git a/app/components/mfcloud/MfCloudResourceUpgrade.vue b/app/components/mfcloud/MfCloudResourceUpgrade.vue
index 8927885..4a36066 100644
--- a/app/components/mfcloud/MfCloudResourceUpgrade.vue
+++ b/app/components/mfcloud/MfCloudResourceUpgrade.vue
@@ -1,4 +1,8 @@
 <script>
+/**
+ * 云实例自选资源升降级：父级给出当前规格、商品和实例，前端加载可选资源后分别询价/下单。
+ * 成功仅发 pay 事件交给父级支付；本面板不直接修改实例资源，也不自行推算升级费用。
+ */
 import "~/assets/styles/ConfigBandwidth.CWSH1WJZ.css";
 import "~/assets/styles/MfCloudResourceUpgrade.bSwLWjPg.css";
 import { toDisplayString } from "vue";
@@ -95,6 +99,7 @@ var ne = {
             L = ref(!1),
             R = ref(!1),
             z = ref(``),
+            // 表单初始化为实例当前值；K 比较是否真的发生变更，未变更时不创建订单。
             B = reactive({
               cpu: Number(k.current.cpu || 0),
               memory: Number(k.current.memory || 0),
@@ -112,6 +117,7 @@ var ne = {
                 ([e, t]) => t !== Number(k.current[e] || 0),
               ),
             );
+          /** CPU/离散内存候选展开并去重；步进候选最多收集 1000 项，避免巨大范围阻塞页面。 */
           function q(e) {
             let t = [];
             for (let n of e || [])
@@ -134,6 +140,7 @@ var ne = {
           }
           let me = computed(() => q(P.value?.cpu)),
             he = computed(() => q(P.value?.memory));
+          // 连续内存使用数值控件；全为单选档位时返回 null，改用下方离散按钮。
           function ge(e) {
             return !e?.length ||
               e.every((e) => e.type === `radio` || e.min_value == null)
@@ -166,6 +173,7 @@ var ne = {
             X = computed(() =>
               (F.value?.flow || []).map((e) => Number(e.value)),
             );
+          /** 商品订购配置与当前线路并行加载，H 隔离实例/商品切换后的旧配置响应。 */
           async function Z() {
             if (k.upgradeAllowed === !1) return;
             let e = ++H;
@@ -187,6 +195,7 @@ var ne = {
               e === H && (I.value = !1);
             }
           }
+          /** 每次询价先清旧价格，保存 host/module/表单快照；不接受无数值报价或过期响应。 */
           async function Q() {
             if (k.upgradeAllowed === !1) return;
             let e = ++U,
@@ -215,14 +224,17 @@ var ne = {
               e === U && (L.value = !1);
             }
           }
+          // 普通档位选择后直接询价，下单期间不允许修改表单。
           function $(e, t) {
             k.upgradeAllowed === !1 || R.value || ((B[e] = t), Q());
           }
+          // 带宽控件输入中先作废旧报价，等 change 确认后才询价，避免拖动每一步都发请求。
           function _e(e) {
             k.upgradeAllowed === !1 ||
               R.value ||
               ((B.bw = e), U++, (V.value = null), (W = ``), (L.value = !1));
           }
+          /** 下单要求实际变更且报价属于当前快照；后端返回合法订单号后交给父级。 */
           async function ve() {
             if (
               k.upgradeAllowed === !1 ||
@@ -262,9 +274,11 @@ var ne = {
           return (
             onMounted(Z),
             watch(() => [k.hostId, k.module, k.productId], Z),
+            // 使仍在加载的配置/报价结果失效，不将卸载前的结果应用到后续面板。
             onBeforeUnmount(() => {
               (H++, U++);
             }),
+            // 渲染 CPU、内存及线路对应的带宽/流量配置，统一在末尾展示报价与下单入口。
             (n, r) => {
               let a = OperationNotice,
                 o = skeleton,
diff --git a/app/components/mfcloud/MfCloudUpgrade.vue b/app/components/mfcloud/MfCloudUpgrade.vue
index 360ed3f..817c0fd 100644
--- a/app/components/mfcloud/MfCloudUpgrade.vue
+++ b/app/components/mfcloud/MfCloudUpgrade.vue
@@ -1,4 +1,8 @@
 <script>
+/**
+ * 云实例推荐套餐升降级；与自选资源面板不同，这里提交 recommend_config_id。
+ * 父级控制 upgradeAllowed 并消费 pay 事件；费用和续费差价均来自后端报价，不本地估算。
+ */
 import "~/assets/styles/MfCloudUpgrade.N7TNG8F1.css";
 import { toDisplayString } from "vue";
 import { renderList } from "vue";
@@ -116,6 +120,7 @@ var w = {
             Y = 0,
             X = 0,
             Z = null;
+          /** 刷新可升级套餐同时清空选择和报价，过滤隐藏项及明确禁止升级的套餐。 */
           async function Q() {
             if (L.upgradeAllowed === !1) return;
             let e = ++X;
@@ -139,6 +144,7 @@ var w = {
               e === X && (U.value = !1);
             }
           }
+          /** 选套餐后先清旧报价；请求序号 Y 与套餐 id 一起阻止较早的询价覆盖新选择。 */
           async function ae(e) {
             if (L.upgradeAllowed === !1 || J.value) return;
             let t = ++Y;
@@ -169,6 +175,7 @@ var w = {
               t === Y && (q.value = !1);
             }
           }
+          /** 只有当前套餐已有对应有效报价才下单，提交锁阻止重复点击；返回订单后交接支付。 */
           async function oe() {
             if (
               L.upgradeAllowed === !1 ||
@@ -205,6 +212,7 @@ var w = {
               J.value = !1;
             }
           }
+          // 将套餐已有规格组合为文本，缺失项不编造默认值；GPU 数量缺失按现有约定显示 1。
           function se(e) {
             return [
               e.cpu ? `${e.cpu} 核` : ``,
@@ -217,6 +225,7 @@ var w = {
               e.gpu_name ? `${e.gpu_num ?? 1}× ${e.gpu_name}` : ``,
             ].filter(Boolean);
           }
+          // 当前规格摘要来自父级实例信息，仅作对照，不作为目标套餐请求体。
           let $ = computed(() =>
             [
               L.current.cpu ? `${L.current.cpu} 核` : ``,
@@ -232,9 +241,11 @@ var w = {
           return (
             onMounted(Q),
             watch(() => [L.hostId, L.module], Q),
+            // 作废列表与报价在途序号，避免离开后仍接受这些异步结果。
             onBeforeUnmount(() => {
               (Y++, X++);
             }),
+            // 套餐列表、无可升级提示和取价/下单栏分层展示；提交期间锁定套餐选择。
             (n, i) => {
               let a = OperationNotice,
                 s = message,
diff --git a/app/components/mfcloud/MfCloudVpc.vue b/app/components/mfcloud/MfCloudVpc.vue
index 3ec17f0..15fae3d 100644
--- a/app/components/mfcloud/MfCloudVpc.vue
+++ b/app/components/mfcloud/MfCloudVpc.vue
@@ -1,4 +1,8 @@
 <script>
+/**
+ * 云实例 VPC 网络创建、分配/切换和删除；父级提供商品、机房、网络类型及实例活动态。
+ * 分配成功发 refresh 让父级重取实例资料；已有 host 的网络不可直接删除。
+ */
 import "~/assets/styles/MfCloudVpc.CpOEbuWs.css";
 import { toDisplayString } from "vue";
 import { onMounted } from "vue";
@@ -76,12 +80,14 @@ var ie = {
             k = useApi(),
             A = useId(),
             j = ref(!1),
+            // 已是 VPC 的实例直接开放面板；经典网络需先通过商品配置确认支持 VPC。
             M = computed(
               () =>
                 cloud_instance_management_i(D.module) &&
                 (D.networkType === `vpc` || j.value),
             ),
             N = computed(() => `/${D.module}/${D.hostId}/vpc_network`),
+            // P 是当前网络列表，F 是允许分配的网络，I 是可选实例，L 是允许的 CIDR 掩码。
             P = ref([]),
             F = ref([]),
             I = ref([]),
@@ -100,6 +106,10 @@ var ie = {
             Y = 0,
             X = 0,
             Z = !1;
+          /**
+           * 核对 VPC 能力后分页拉取全部网络，再按商品/机房查询可分配网络。
+           * 商品能力字段未返回时明确报错；确认不支持 VPC 时不继续查询网络列表。
+           */
           async function Q() {
             let e = ++Y,
               t = N.value;
@@ -168,6 +178,7 @@ var ie = {
               !Z && e === Y && (R.value = !1);
             }
           }
+          // 打开新建表单前检查加载状态和活动态；名称/网段不沿用上一次输入。
           function fe() {
             !M.value ||
               z.value ||
@@ -176,6 +187,7 @@ var ie = {
               !D.active ||
               ((U.value = ``), (W.value = ``), (V.value = ``), (H.value = !0));
           }
+          /** 统一校验 VPC 名称与 CIDR，网段留空交后端分配，创建完成后重读网络列表。 */
           async function pe() {
             if (z.value || !H.value || !M.value || !D.active) return;
             let e;
@@ -199,6 +211,10 @@ var ie = {
               !Z && t === N.value && (z.value = !1);
             }
           }
+          /**
+           * 先设置分配弹窗目标；转售模块仅提供当前实例，本地 mf_cloud 再完整加载可选实例。
+           * X 独立隔离分配目标列表请求，避免切换目标期间旧结果覆盖新弹窗。
+           */
           async function $(e) {
             if (
               !M.value ||
@@ -258,6 +274,7 @@ var ie = {
               !Z && t === X && (J.value = !1);
             }
           }
+          /** 分配前同时确认实例与网络仍在各自候选集合，成功后通知父级更新实例网络信息。 */
           async function me() {
             let e = K.value,
               t = q.value;
@@ -293,6 +310,7 @@ var ie = {
               !Z && n === N.value && (z.value = !1);
             }
           }
+          /** 删除需要网络仍存在且无已分配实例；此处预检查不替代后端并发/权限校验。 */
           async function he() {
             let e = G.value;
             if (
@@ -333,9 +351,11 @@ var ie = {
               },
             ),
             onMounted(Q),
+            // 销毁后拒绝列表与可分配实例的迟到结果；实例/商品切换也会关闭全部旧弹窗。
             onBeforeUnmount(() => {
               ((Z = !0), Y++, X++);
             }),
+            // 主表展示已分配实例；创建、切换和删除各有确认弹窗，网络切换额外提示连接影响。
             (t, n) => {
               let r = button,
                 i = message,