cieanyau/console-dev
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: annotate cloud network and upgrade components

Browse Source
This commit is contained in:
cieanyau committed 2026-11-06 00:34:17 +08:00
1 parent 7f54cae497
commit 9166b1376d
7 files changed
+95
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/mfcloud/MfCloudDefence.vue
+14
View File
@@ -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,
app/components/mfcloud/MfCloudIps.vue
+14
View File
@@ -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,
app/components/mfcloud/MfCloudLogs.vue
+11
View File
@@ -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,
app/components/mfcloud/MfCloudNat.vue
+11
View File
@@ -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,
app/components/mfcloud/MfCloudResourceUpgrade.vue
+14
View File
@@ -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,
app/components/mfcloud/MfCloudUpgrade.vue
+11
View File
@@ -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,
app/components/mfcloud/MfCloudVpc.vue
+20
View File
@@ -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,