docs: annotate cloud network and upgrade components

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,