{"id":658815,"date":"2026-03-24T21:13:54","date_gmt":"2026-03-24T13:13:54","guid":{"rendered":"http:\/\/puo.cn\/?p=658815"},"modified":"2026-03-24T21:13:59","modified_gmt":"2026-03-24T13:13:59","slug":"dmit-%e5%b0%8f%e7%bb%84%e4%bb%b6%e5%88%86%e4%ba%ab","status":"publish","type":"post","link":"http:\/\/puo.cn\/?p=658815","title":{"rendered":"dmit \u5c0f\u7ec4\u4ef6\u5206\u4eab"},"content":{"rendered":"

\u65e9\u4e0a\u770b\u89c1\u5927\u4f6c\u5206\u4eab\u7684 scriptable dmit\u5c0f\u7ec4\u4ef6
\nhttps:\/\/www.nodeseek.com\/post-661149-1<\/a>
\n\u4f18\u5316\u4e86\u4e00\u4e0b\uff0c\u591a\u52a0\u4e86\u4e00\u4e9b\u4fe1\u606f\u548c\u5c0f\u529f\u80fd\uff0c\u9700\u8981\u53ef\u81ea\u53d6\uff0c\u56e0\u4e3a\u6211\u53ea\u6709\u4e00\u53f0\u8bbe\u5907\uff0c\u5355\u8bbe\u5907\u4f7f\u7528\u662f\u6ca1\u95ee\u9898\u7684\uff0c\u591a\u8bbe\u5907\u4e0d\u4fdd\u8bc1\u54c8\uff5e\uff5e
\n\"20260325051341657\"
\n\"20260325051341787\"
\n\"20260325051342527\"<\/p>\n

 <\/p>\n

const ScriptName = “DMIT”;
\nconst COOKIE_NAME = `${ScriptName}_WHMCSlogin_auth_tk`;
\nconst PRODUCTS_CACHE_KEY = `${ScriptName}_products_cache`;
\nconst CANVAS_SIZE = 50;
\nconst RADIUS = 20;
\nconst LINE_WIDTH = 4;
\nconst productsIndex = args.widgetParameter ? parseInt(args.widgetParameter) – 1 : 0;
\nfunction getCookie() {
\nif (Keychain.contains(COOKIE_NAME)) {
\nreturn Keychain.get(COOKIE_NAME);
\n}
\nreturn null;
\n}
\nfunction getCachedProducts() {
\nif (Keychain.contains(PRODUCTS_CACHE_KEY)) {
\ntry {
\nconst cached = JSON.parse(Keychain.get(PRODUCTS_CACHE_KEY));
\nif (cached.data && cached.data.length > 0) return cached.data;
\n} catch (e) {}
\n}
\nreturn null;
\n}
\nfunction setCachedProducts(products) {
\nKeychain.set(PRODUCTS_CACHE_KEY, JSON.stringify({ data: products }));
\n}
\nfunction formatMB(mb) {
\nif (mb >= 1024) return `${(mb \/ 1024).toFixed(1)} GB`;
\nreturn `${mb.toFixed(1)} MB`;
\n}
\nfunction formatUptime(seconds) {
\nconst days = Math.floor(seconds \/ 86400);
\nconst hours = Math.floor((seconds % 86400) \/ 3600);
\nconst mins = Math.floor((seconds % 3600) \/ 60);
\nreturn { days, hours, mins };
\n}
\nasync function safeLoadJSON(request) {
\nconst text = await request.loadString();
\ntry {
\nreturn JSON.parse(text);
\n} catch (e) {
\nthrow new Error(“\u670d\u52a1\u5668\u8fd4\u56de\u4e86\u975e JSON \u6570\u636e\uff0c\u53ef\u80fd\u88ab Cloudflare \u62e6\u622a”);
\n}
\n}
\nasync function loadProductDetailStandard(id) {
\nconst resp = new Request(`https:\/\/www.dmit.io\/clientarea.php?action=productdetails&id=${id}&json=1&pure=1&page=standard&subaction=whmcsdetail`);
\nresp.method = “GET”;
\nconst cookie = getCookie();
\nif (!cookie) {
\nthrow new Error(“\u672a\u627e\u5230 Cookie”);
\n}
\nresp.headers = {
\n“Cookie”: cookie
\n};
\nconst result = await safeLoadJSON(resp);
\nif (result.result === “success” && result.success) {
\nreturn result.success;
\n}
\nthrow new Error(result.error || “\u672a\u77e5\u9519\u8bef”);
\n}
\nasync function loadProducts() {
\ntry {
\nconst reqp = new Request(“https:\/\/www.dmit.io\/clientarea.php?action=services”);
\nreqp.method = “GET”;
\nconst cookie = getCookie();
\nif (!cookie) {
\nthrow new Error(“\u672a\u627e\u5230 Cookie”);
\n}
\nreqp.headers = {
\n“Cookie”: cookie
\n};
\nconst htmlContent = await reqp.loadString();
\nconst products = parseProductsFromHtml(htmlContent);
\nif (products.length > 0) {
\nsetCachedProducts(products);
\nreturn products;
\n}
\nreturn getCachedProducts() || [];
\n}
\ncatch (error) {
\nconsole.error(error);
\nreturn getCachedProducts() || [];
\n}
\n}
\nasync function loadAllGraphData(id) {
\ntry {
\nconst resp = new Request(`https:\/\/www.dmit.io\/clientarea.php?action=productdetails&id=${id}&json=1&pure=1&page=graph&subaction=charts`);
\nresp.method = “POST”;
\nresp.body = “data%5Btimeframe%5D=hour”;
\nconst cookie = getCookie();
\nif (!cookie) throw new Error(“\u672a\u627e\u5230 Cookie”);
\nresp.headers = { “Cookie”: cookie };
\nconst result = await safeLoadJSON(resp);
\nif (result.result === “success” && result.success) return result.success;
\nreturn {};
\n} catch (error) {
\nconsole.error(error);
\nreturn {};
\n}
\n}
\nasync function loadVMDetails(id) {
\ntry {
\nconst resp = new Request(`https:\/\/www.dmit.io\/clientarea.php?action=productdetails&id=${id}&json=1&pure=1&page=home&subaction=detailsVM`);
\nresp.method = “GET”;
\nconst cookie = getCookie();
\nif (!cookie) throw new Error(“\u672a\u627e\u5230 Cookie”);
\nresp.headers = { “Cookie”: cookie };
\nconst result = await safeLoadJSON(resp);
\nif (result.result === “success” && result.success) return result.success;
\nreturn null;
\n} catch (error) {
\nconsole.error(error);
\nreturn null;
\n}
\n}
\nfunction applyPrimaryTextColor(text) {
\ntext.textColor = Color.dynamic(Color.black(), Color.white());
\n}
\nfunction applySecondaryTextColor(text) {
\ntext.textColor = Color.dynamic(Color.gray(), Color.lightGray());
\n}
\nfunction pickProductWithFallback(products, preferredIndex) {
\nif (products.length === 0) {
\nreturn null;
\n}
\nconst startIndex = Math.min(Math.max(preferredIndex, 0), products.length – 1);
\nfor (let i = startIndex; i >= 0; i–) {
\nconst product = products[i];
\nif (product) {
\nreturn product;
\n}
\n}
\nfor (let i = startIndex + 1; i < products.length; i++) {
\nconst product = products[i];
\nif (product) {
\nreturn product;
\n}
\n}
\nreturn null;
\n}
\nfunction showWidgetErrorAndFinish(widget, message) {
\nconst errorText = widget.addText(message);
\nerrorText.textColor = Color.red();
\nerrorText.font = Font.semiboldSystemFont(14);
\nScript.setWidget(widget);
\nScript.complete();
\n}
\nasync function handleSettingsMenu() {
\nconst setting = new Alert();
\nsetting.title = “\u8bbe\u7f6e”;
\nsetting.message = “\u914d\u7f6eDMIT\u5c0f\u7ec4\u4ef6”;
\nsetting.addAction(“\u8bbe\u7f6e Cookie”);
\nsetting.addDestructiveAction(“\u5220\u9664 Cookie”);
\nsetting.addAction(“\u53d6\u6d88”);
\nconst response = await setting.present();
\nif (response === 0) {
\nconst cookieInput = new Alert();
\ncookieInput.title = “\u8f93\u5165 Cookie”;
\ncookieInput.message = “\u8bf7\u8f93\u5165\u60a8\u7684 cookie \u503c:”;
\ncookieInput.addTextField(“Cookie”);
\ncookieInput.addAction(“\u4fdd\u5b58”);
\ncookieInput.addAction(“\u53d6\u6d88”);
\nconst cookieResponse = await cookieInput.present();
\nif (cookieResponse === 0) {
\nconst cookieValue = (cookieInput.textFieldValue(0) ?? “”).trim();
\nif (!cookieValue) {
\nconst invalidAlert = new Alert();
\ninvalidAlert.title = “Cookie \u8f93\u5165\u6709\u8bef”;
\ninvalidAlert.message = “Cookie \u4e0d\u80fd\u4e3a\u7a7a\uff0c\u8bf7\u91cd\u65b0\u8f93\u5165\u3002”;
\ninvalidAlert.addAction(“\u597d\u7684”);
\nawait invalidAlert.present();
\n}
\nelse {
\nKeychain.set(COOKIE_NAME, cookieValue);
\nconst confirmAlert = new Alert();
\nconfirmAlert.title = “\u4fdd\u5b58\u6210\u529f”;
\nconfirmAlert.message = “\u60a8\u7684 cookie \u5df2\u6210\u529f\u4fdd\u5b58\u3002”;
\nconfirmAlert.addAction(“\u597d\u7684”);
\nawait confirmAlert.present();
\n}
\n}
\nreturn true;
\n}
\nif (response === 1) {
\nconst confirmDelete = new Alert();
\nconfirmDelete.title = “\u786e\u8ba4\u5220\u9664”;
\nconfirmDelete.message = “\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5df2\u4fdd\u5b58\u7684 Cookie \u5417\uff1f”;
\nconfirmDelete.addDestructiveAction(“\u5220\u9664”);
\nconfirmDelete.addAction(“\u53d6\u6d88”);
\nconst deleteResponse = await confirmDelete.present();
\nif (deleteResponse === 0 && Keychain.contains(COOKIE_NAME)) {
\nKeychain.remove(COOKIE_NAME);
\nconst deletedAlert = new Alert();
\ndeletedAlert.title = “\u5220\u9664\u6210\u529f”;
\ndeletedAlert.message = “\u5df2\u6210\u529f\u5220\u9664\u4fdd\u5b58\u7684 Cookie\u3002”;
\ndeletedAlert.addAction(“\u597d\u7684”);
\nawait deletedAlert.present();
\n}
\nreturn true;
\n}
\nreturn false;
\n}
\nfunction parseProductsFromHtml(htmlContent) {
\nconst products = [];
\nconst cleanText = (value) => {
\nreturn value
\n.replace(\/<[^>]*>\/g, ” “)
\n.replace(\/&nbsp;\/g, ” “)
\n.replace(\/\\s+\/g, ” “)
\n.trim();
\n};
\nconst rowRegex = \/<li[^>]*class=”[^”]*\\bproducts-item\\b[^”]*”[^>]*products_id=”(\\d+)”[^>]*>[\\s\\S]*?<\\\/li>\/g;
\nlet rowMatch;
\nwhile ((rowMatch = rowRegex.exec(htmlContent)) !== null) {
\nconst rowHtml = rowMatch[0];
\nconst id = parseInt(rowMatch[1], 10);
\nconst nameMatch = rowHtml.match(\/<div class=”products-title-text”>([\\s\\S]*?)<\\\/div>\/);
\nconst name = nameMatch ? cleanText(nameMatch[1]) : “”;
\nconst domainMatch = rowHtml.match(\/<div class=”products-domain”>([\\s\\S]*?)<\\\/div>\/);
\nlet code = “”;
\nif (domainMatch) {
\nconst domainText = cleanText(domainMatch[1]);
\ncode = domainText.split(” – “)[0].trim();
\n}
\nif (!code) {
\nconst fallbackCodeMatch = rowHtml.match(\/products-name=”([^”]+)”\/);
\ncode = fallbackCodeMatch ? fallbackCodeMatch[1].trim() : “”;
\n}
\nif (!name || !code || Number.isNaN(id)) {
\ncontinue;
\n}
\nproducts.push({ id, name, code });
\n}
\nreturn products;
\n}
\nfunction gradientColorByRatio(ratio) {
\nconst t = Math.max(0, Math.min(1, ratio));
\nconst start = { r: 46, g: 204, b: 113 };
\nconst end = { r: 231, g: 76, b: 60 };
\nconst r = Math.round(start.r + (end.r – start.r) * t);
\nconst g = Math.round(start.g + (end.g – start.g) * t);
\nconst b = Math.round(start.b + (end.b – start.b) * t);
\nreturn new Color(`#${r.toString(16).padStart(2, “0”)}${g.toString(16).padStart(2, “0”)}${b.toString(16).padStart(2, “0”)}`);
\n}
\nfunction drawCircleProgress(progress) {
\nconst clampedProgress = Math.max(0, Math.min(1, progress));
\nconst context = new DrawContext();
\ncontext.size = new Size(CANVAS_SIZE, CANVAS_SIZE);
\ncontext.opaque = false;
\ncontext.respectScreenScale = true;
\nconst center = new Point(CANVAS_SIZE \/ 2, CANVAS_SIZE \/ 2);
\ncontext.setStrokeColor(new Color(“#222”));
\ncontext.setLineWidth(LINE_WIDTH);
\ncontext.strokeEllipse(new Rect(center.x – RADIUS, center.y – RADIUS, RADIUS * 2, RADIUS * 2));
\nconst totalDegrees = 360 * clampedProgress;
\nconst stepDegrees = 3.6;
\nfor (let i = 0; i < totalDegrees; i += stepDegrees) {
\nconst ratio = totalDegrees === 0 ? 0 : i \/ totalDegrees;
\ncontext.setFillColor(gradientColorByRatio(ratio));
\nconst angle = (i – 90) * (Math.PI \/ 180);
\nconst x = center.x + RADIUS * Math.cos(angle);
\nconst y = center.y + RADIUS * Math.sin(angle);
\ncontext.fillEllipse(new Rect(x – LINE_WIDTH \/ 2, y – LINE_WIDTH \/ 2, LINE_WIDTH, LINE_WIDTH));
\n}
\nconst percentText = `${Math.round(clampedProgress * 100)}%`;
\ncontext.setTextColor(new Color(“#FFFFFF”));
\ncontext.setFont(Font.semiboldSystemFont(10));
\ncontext.setTextAlignedCenter();
\ncontext.drawTextInRect(percentText, new Rect(0, 18, CANVAS_SIZE, 14));
\nreturn context.getImage();
\n}
\nfunction createProgressBarImage(total, current, width, height, fillColor, backgroundColor) {
\nconst context = new DrawContext();
\ncontext.size = new Size(width, height);
\ncontext.opaque = false;
\ncontext.respectScreenScale = true;
\nconst bgPath = new Path();
\nbgPath.addRoundedRect(new Rect(0, 0, width, height), height \/ 2, height \/ 2);
\ncontext.setFillColor(backgroundColor);
\ncontext.addPath(bgPath);
\ncontext.fillPath();
\nconst progressWidth = Math.floor(width * Math.min(current \/ total, 1));
\nconst fillPath = new Path();
\nfillPath.addRoundedRect(new Rect(0, 0, progressWidth, height), height \/ 2, height \/ 2);
\ncontext.setFillColor(fillColor);
\ncontext.addPath(fillPath);
\ncontext.fillPath();
\nreturn context.getImage();
\n}
\nfunction createLineChartImage(data, width, height, lineColor = new Color(“#1F6FD4”), secondaryLineColor = new Color(“#16A085”)) {
\nconst context = new DrawContext();
\ncontext.size = new Size(width, height);
\ncontext.opaque = false;
\ncontext.respectScreenScale = true;
\nconst seriesList = Array.isArray(data[0])
\n? data.filter((series) => series.length > 0)
\n: [data];
\nif (seriesList.length === 0) {
\nreturn context.getImage();
\n}
\nconst padding = 4;
\nconst chartWidth = Math.max(1, width – padding * 2);
\nconst chartHeight = Math.max(1, height – padding * 2);
\nconst mergedData = seriesList.flat();
\nconst minValue = Math.min(…mergedData);
\nconst maxValue = Math.max(…mergedData);
\nconst range = Math.max(1e-6, maxValue – minValue);
\nconst getPoints = (series) => {
\nreturn series.map((value, index) => {
\nconst x = series.length === 1
\n? padding + chartWidth \/ 2
\n: padding + (index \/ (series.length – 1)) * chartWidth;
\nconst normalized = (value – minValue) \/ range;
\nconst y = padding + chartHeight * (1 – normalized);
\nreturn new Point(x, y);
\n});
\n};
\nconst drawSeries = (points, color, fillAlpha) => {
\nif (points.length === 0) {
\nreturn;
\n}
\nconst areaPath = new Path();
\nareaPath.move(new Point(points[0].x, height – padding));
\nfor (const point of points) {
\nareaPath.addLine(point);
\n}
\nareaPath.addLine(new Point(points[points.length – 1].x, height – padding));
\nareaPath.closeSubpath();
\ncontext.setFillColor(new Color(color.hex, fillAlpha));
\ncontext.addPath(areaPath);
\ncontext.fillPath();
\nif (points.length === 1) {
\ncontext.setFillColor(color);
\ncontext.fillEllipse(new Rect(points[0].x – 1.5, points[0].y – 1.5, 3, 3));
\nreturn;
\n}
\nconst linePath = new Path();
\nlinePath.move(points[0]);
\nfor (let i = 1; i < points.length; i++) {
\nconst mid = new Point((points[i – 1].x + points[i].x) \/ 2, (points[i – 1].y + points[i].y) \/ 2);
\nlinePath.addQuadCurve(mid, points[i – 1]);
\n}
\nlinePath.addLine(points[points.length – 1]);
\ncontext.setStrokeColor(color);
\ncontext.setLineWidth(1.6);
\ncontext.addPath(linePath);
\ncontext.strokePath();
\n};
\ndrawSeries(getPoints(seriesList[0]), lineColor, 0.12);
\nif (seriesList.length > 1) {
\ndrawSeries(getPoints(seriesList[1]), secondaryLineColor, 0.08);
\n}
\nreturn context.getImage();
\n}
\nasync function renderAccessoryCircular(widget, product) {
\nconst productDetails = await loadProductDetailStandard(product.id.toString());
\nconst progress = productDetails.bwusage \/ productDetails.bwlimit;
\nconst chartImage = drawCircleProgress(progress);
\nwidget.addImage(chartImage);
\nScript.setWidget(widget);
\n}
\nasync function renderAccessoryInline(widget, product) {
\nconst productDetails = await loadProductDetailStandard(product.id.toString());
\nconst progress = productDetails.bwusage \/ productDetails.bwlimit;
\nconst chartImage = drawCircleProgress(progress);
\nwidget.addImage(chartImage);
\nconst label = widget.addText(`${product.code}|${Math.round(progress * 100)}%`);
\nlabel.font = Font.semiboldSystemFont(12);
\napplyPrimaryTextColor(label);
\nScript.setWidget(widget);
\n}
\nasync function renderAccessoryRectangular(widget, product) {
\nconst productDetails = await loadProductDetailStandard(product.id.toString());
\nconst line1Stack = widget.addStack();
\nconst ipText = line1Stack.addText(`IP: ${productDetails.dedicatedip}`);
\nipText.font = Font.semiboldSystemFont(12);
\napplyPrimaryTextColor(ipText);
\nline1Stack.addSpacer();
\nconst updateTimeText = line1Stack.addText(new Date().toLocaleTimeString([], { hour: “2-digit”, minute: “2-digit” }));
\nupdateTimeText.font = Font.semiboldSystemFont(12);
\napplySecondaryTextColor(updateTimeText);
\nconst line2Stack = widget.addStack();
\nconst trafficChart = createProgressBarImage(productDetails.bwlimit, productDetails.bwusage, 100, 12, new Color(“#1F6FD4”), new Color(“#E0E0E0”));
\nline2Stack.addImage(trafficChart);
\nconst line3Stack = widget.addStack();
\nconst usedGb = (productDetails.bwusage \/ 1024).toFixed(2);
\nconst totalGb = (productDetails.bwlimit \/ 1024).toFixed(2);
\nline3Stack.addSpacer();
\nconst trafficText = line3Stack.addText(`\u6d41\u91cf: ${usedGb}GB \/ ${totalGb}GB`);
\ntrafficText.font = Font.semiboldSystemFont(10);
\napplySecondaryTextColor(trafficText);
\nline3Stack.addSpacer();
\nScript.setWidget(widget);
\n}
\nasync function renderSmall(widget, product) {
\nconst productDetails = await loadProductDetailStandard(product.id.toString());
\nconst isDark = Device.isUsingDarkAppearance();
\nconst primary = Color.dynamic(Color.black(), Color.white());
\nconst secondary = Color.dynamic(new Color(“#6C6C70”), new Color(“#8E8E93”));
\nconst green = new Color(“#30D158”);
\nconst red = new Color(“#FF3B30”);
\nconst progressBg = isDark ? new Color(“#3A3A3C”) : new Color(“#D1D1D6”);
\nwidget.backgroundColor = Color.dynamic(new Color(“#FFFFFF”), new Color(“#1C1C1E”));
\nwidget.setPadding(12, 12, 12, 12);
\n\/\/ \u5934\u90e8\u884c\uff1a\u540d\u79f0 + \u72b6\u6001
\nconst headerRow = widget.addStack();
\nheaderRow.centerAlignContent();
\nconst nameText = headerRow.addText(productDetails.hostname || product.name);
\nnameText.font = Font.boldSystemFont(13);
\nnameText.textColor = primary;
\nnameText.lineLimit = 1;
\nconst codeText = widget.addText(product.code);
\ncodeText.font = Font.systemFont(9);
\ncodeText.textColor = secondary;
\nwidget.addSpacer(4);
\n\/\/ \u6d41\u91cf\u5361\u7247
\nconst trafficCard = widget.addStack();
\ntrafficCard.layoutVertically();
\ntrafficCard.backgroundColor = Color.dynamic(new Color(“#F2F2F7”), new Color(“#2C2C2E”));
\ntrafficCard.cornerRadius = 10;
\ntrafficCard.setPadding(6, 10, 6, 10);
\n\/\/ \u6807\u9898\u884c
\nconst trafficHeader = trafficCard.addStack();
\ntrafficHeader.centerAlignContent();
\nconst globeSym = SFSymbol.named(“globe”);
\nglobeSym.applyFont(Font.systemFont(9));
\nconst globeImg = trafficHeader.addImage(globeSym.image);
\nglobeImg.imageSize = new Size(10, 10);
\nglobeImg.tintColor = secondary;
\ntrafficHeader.addSpacer(3);
\nconst trafficLabel = trafficHeader.addText(“Traffic”);
\ntrafficLabel.font = Font.systemFont(9);
\ntrafficLabel.textColor = secondary;
\ntrafficHeader.addSpacer();
\nconst usedGB = (productDetails.bwusage \/ 1024).toFixed(1);
\nconst totalGB = (productDetails.bwlimit \/ 1024).toFixed(1);
\nconst usageLabel = trafficHeader.addText(`${usedGB}\/${totalGB} GB`);
\nusageLabel.font = Font.systemFont(9);
\nusageLabel.textColor = secondary;
\ntrafficCard.addSpacer(2);
\n\/\/ \u767e\u5206\u6bd4 + \u5269\u4f59
\nconst usagePercent = Math.round(productDetails.bwusage \/ productDetails.bwlimit * 100);
\nconst pctRow = trafficCard.addStack();
\npctRow.centerAlignContent();
\nconst percentText = pctRow.addText(`${usagePercent}%`);
\npercentText.font = Font.boldSystemFont(28);
\npercentText.textColor = usagePercent >= 80 ? red : green;
\npctRow.addSpacer();
\nconst remainGB = ((productDetails.bwlimit – productDetails.bwusage) \/ 1024).toFixed(1);
\nconst remainText = pctRow.addText(`\u5269\u4f59 ${remainGB} GB`);
\nremainText.font = Font.systemFont(9);
\nremainText.textColor = secondary;
\ntrafficCard.addSpacer(2);
\n\/\/ \u8fdb\u5ea6\u6761
\nconst progressBar = createProgressBarImage(
\nproductDetails.bwlimit, productDetails.bwusage,
\n130, 6, green, progressBg
\n);
\nconst barRow = trafficCard.addStack();
\nbarRow.size = new Size(0, 6);
\nconst progressImg = barRow.addImage(progressBar);
\nprogressImg.imageSize = new Size(130, 6);
\nwidget.addSpacer(4);
\n\/\/ \u5e95\u90e8\u4fe1\u606f\u884c
\nconst bottomRow = widget.addStack();
\nbottomRow.centerAlignContent();
\nconst regDate = new Date(productDetails.regdate);
\nif (!isNaN(regDate.getTime())) {
\nconst now = new Date();
\nconst regDay = regDate.getDate();
\nconst lastReset = new Date(now.getFullYear(), now.getMonth(), regDay);
\nif (lastReset > now) lastReset.setMonth(lastReset.getMonth() – 1);
\nconst nextReset = new Date(lastReset);
\nnextReset.setMonth(nextReset.getMonth() + 1);
\nconst daysUntilReset = Math.ceil((nextReset – now) \/ 86400000);
\nconst resetText = bottomRow.addText(`${daysUntilReset}\u5929\u540e\u91cd\u7f6e`);
\nresetText.font = Font.systemFont(9);
\nresetText.textColor = secondary;
\n}
\nbottomRow.addSpacer();
\nconst invoiceDateStr = productDetails.nextinvoicedate || “”;
\nconst invoiceDate = new Date(invoiceDateStr);
\nif (!isNaN(invoiceDate.getTime())) {
\nconst daysLeft = Math.ceil((invoiceDate.getTime() – Date.now()) \/ 86400000);
\nconst renewBadge = bottomRow.addStack();
\nrenewBadge.backgroundColor = new Color(green.hex, 0.2);
\nrenewBadge.cornerRadius = 4;
\nrenewBadge.setPadding(1, 4, 1, 4);
\nconst renewText = renewBadge.addText(`\u7eed\u8d39 ${daysLeft}d`);
\nrenewText.font = Font.boldSystemFont(9);
\nrenewText.textColor = daysLeft <= 30 ? red : green;
\n}
\nScript.setWidget(widget);
\n}
\nasync function renderMedium(widget, product) {
\nconst productDetails = await loadProductDetailStandard(product.id.toString());
\nconst isDark = Device.isUsingDarkAppearance();
\nconst primary = Color.dynamic(Color.black(), Color.white());
\nconst secondary = Color.dynamic(new Color(“#6C6C70”), new Color(“#8E8E93”));
\nconst green = new Color(“#30D158”);
\nconst red = new Color(“#FF3B30”);
\nconst blue = new Color(“#007AFF”);
\nconst orange = new Color(“#FF9F0A”);
\nconst progressBg = isDark ? new Color(“#3A3A3C”) : new Color(“#D1D1D6”);
\nwidget.backgroundColor = Color.dynamic(new Color(“#FFFFFF”), new Color(“#1C1C1E”));
\nwidget.setPadding(12, 14, 12, 14);
\nconst nameText = widget.addText(productDetails.hostname || product.name);
\nnameText.font = Font.boldSystemFont(14);
\nnameText.textColor = primary;
\nnameText.lineLimit = 1;
\nconst subRow = widget.addStack();
\nsubRow.spacing = 6;
\nconst codeText = subRow.addText(product.code);
\ncodeText.font = Font.systemFont(10);
\ncodeText.textColor = secondary;
\nconst ipText = subRow.addText(productDetails.dedicatedip || “”);
\nipText.font = new Font(“Menlo”, 10);
\nipText.textColor = secondary;
\nwidget.addSpacer();
\n\/\/ \u6d41\u91cf\u5361\u7247
\nconst trafficCard = widget.addStack();
\ntrafficCard.layoutVertically();
\ntrafficCard.backgroundColor = Color.dynamic(new Color(“#F2F2F7”), new Color(“#2C2C2E”));
\ntrafficCard.cornerRadius = 10;
\ntrafficCard.setPadding(8, 12, 8, 12);
\n\/\/ \u6807\u9898\u884c
\nconst trafficHeader = trafficCard.addStack();
\ntrafficHeader.centerAlignContent();
\nconst globeSymbol = SFSymbol.named(“globe”);
\nglobeSymbol.applyFont(Font.systemFont(11));
\nconst globeImg = trafficHeader.addImage(globeSymbol.image);
\nglobeImg.imageSize = new Size(12, 12);
\nglobeImg.tintColor = secondary;
\ntrafficHeader.addSpacer(3);
\nconst trafficLabel = trafficHeader.addText(“Traffic”);
\ntrafficLabel.font = Font.systemFont(11);
\ntrafficLabel.textColor = secondary;
\ntrafficHeader.addSpacer();
\nconst usedGB = (productDetails.bwusage \/ 1024).toFixed(1);
\nconst totalGB = (productDetails.bwlimit \/ 1024).toFixed(1);
\nconst usageLabel = trafficHeader.addText(`${usedGB} \/ ${totalGB} GB`);
\nusageLabel.font = Font.boldSystemFont(11);
\nusageLabel.textColor = primary;
\ntrafficCard.addSpacer(4);
\n\/\/ \u767e\u5206\u6bd4 + \u5269\u4f59
\nconst usagePercent = Math.round(productDetails.bwusage \/ productDetails.bwlimit * 100);
\nconst pctRow = trafficCard.addStack();
\npctRow.centerAlignContent();
\nconst percentText = pctRow.addText(`${usagePercent}%`);
\npercentText.font = Font.boldSystemFont(30);
\npercentText.textColor = usagePercent >= 80 ? red : green;
\npctRow.addSpacer();
\nconst remainGB = ((productDetails.bwlimit – productDetails.bwusage) \/ 1024).toFixed(1);
\nconst remainLabel = pctRow.addText(`\u5269\u4f59 ${remainGB} GB`);
\nremainLabel.font = Font.systemFont(9);
\nremainLabel.textColor = secondary;
\ntrafficCard.addSpacer(4);
\n\/\/ \u8fdb\u5ea6\u6761
\nconst progressBar = createProgressBarImage(
\nproductDetails.bwlimit, productDetails.bwusage,
\n280, 8, green, progressBg
\n);
\nconst barRow = trafficCard.addStack();
\nbarRow.size = new Size(0, 8);
\nconst progressImg = barRow.addImage(progressBar);
\nprogressImg.imageSize = new Size(280, 8);
\ntrafficCard.addSpacer(4);
\n\/\/ \u5165\u7ad9\u51fa\u7ad9 + \u65e5\u5747 + \u91cd\u7f6e
\nconst inOutRow = trafficCard.addStack();
\ninOutRow.centerAlignContent();
\nconst inArrow = inOutRow.addText(“\u2199”);
\ninArrow.font = Font.systemFont(10);
\ninArrow.textColor = blue;
\ninOutRow.addSpacer(2);
\nconst inLabel = inOutRow.addText(`\u5165\u7ad9 ${formatMB(productDetails.bwusage_in || 0)}`);
\ninLabel.font = Font.systemFont(10);
\ninLabel.textColor = secondary;
\ninOutRow.addSpacer(8);
\nconst outArrow = inOutRow.addText(“\u2197”);
\noutArrow.font = Font.systemFont(10);
\noutArrow.textColor = orange;
\ninOutRow.addSpacer(2);
\nconst outLabel = inOutRow.addText(`\u51fa\u7ad9 ${formatMB(productDetails.bwusage_out || 0)}`);
\noutLabel.font = Font.systemFont(10);
\noutLabel.textColor = secondary;
\ntrafficCard.addSpacer(2);
\nconst bottomRow = trafficCard.addStack();
\nbottomRow.centerAlignContent();
\nconst regDate = new Date(productDetails.regdate);
\nif (!isNaN(regDate.getTime())) {
\nconst now = new Date();
\nconst regDay = regDate.getDate();
\nconst lastReset = new Date(now.getFullYear(), now.getMonth(), regDay);
\nif (lastReset > now) lastReset.setMonth(lastReset.getMonth() – 1);
\nconst daysSinceReset = Math.max(1, Math.floor((now – lastReset) \/ 86400000));
\nconst dailyAvgMB = productDetails.bwusage \/ daysSinceReset;
\nconst nextReset = new Date(lastReset);
\nnextReset.setMonth(nextReset.getMonth() + 1);
\nconst daysUntilReset = Math.ceil((nextReset – now) \/ 86400000);
\nconst avgText = bottomRow.addText(`\u65e5\u5747 ${formatMB(dailyAvgMB)}`);
\navgText.font = Font.systemFont(9);
\navgText.textColor = secondary;
\nbottomRow.addSpacer(8);
\nconst resetText = bottomRow.addText(`${daysUntilReset}\u5929\u540e\u91cd\u7f6e`);
\nresetText.font = Font.systemFont(9);
\nresetText.textColor = secondary;
\n}
\nbottomRow.addSpacer();
\nconst invoiceDateStr = productDetails.nextinvoicedate || “”;
\nconst invoiceDate = new Date(invoiceDateStr);
\nif (!isNaN(invoiceDate.getTime())) {
\nconst daysLeft = Math.ceil((invoiceDate.getTime() – Date.now()) \/ 86400000);
\nconst renewBadge = bottomRow.addStack();
\nrenewBadge.backgroundColor = new Color(green.hex, 0.2);
\nrenewBadge.cornerRadius = 4;
\nrenewBadge.setPadding(1, 4, 1, 4);
\nconst renewText = renewBadge.addText(`${daysLeft}d`);
\nrenewText.font = Font.boldSystemFont(9);
\nrenewText.textColor = daysLeft <= 30 ? red : green;
\nbottomRow.addSpacer(4);
\nconst dateText = bottomRow.addText(invoiceDateStr.split(” “)[0]);
\ndateText.font = Font.systemFont(9);
\ndateText.textColor = secondary;
\n}<\/p>\n

Script.setWidget(widget);<\/p>\n

}
\nasync function renderLarge(widget, product) {<\/p>\n

const pid = product.id.toString();
\nconst [productDetails, vmDetails, allGraphData] = await Promise.all([
\nloadProductDetailStandard(pid),
\nloadVMDetails(pid),
\nloadAllGraphData(pid),
\n]);<\/p>\n

const cpuData = allGraphData.cpu || { datasets: [] };
\nconst memData = allGraphData.mem || { datasets: [] };
\nconst netData = allGraphData.net || { datasets: [] };
\nconst isDark = Device.isUsingDarkAppearance();
\nconst theme = {
\nbg: Color.dynamic(new Color(“#FFFFFF”), new Color(“#1C1C1E”)),
\ncard: Color.dynamic(new Color(“#F2F2F7”), new Color(“#2C2C2E”)),
\nprimary: Color.dynamic(Color.black(), Color.white()),
\nsecondary: Color.dynamic(new Color(“#6C6C70”), new Color(“#8E8E93”)),
\nprogressBg: isDark ? new Color(“#3A3A3C”) : new Color(“#D1D1D6”),
\ngreen: new Color(“#30D158”),
\nblue: new Color(“#007AFF”),
\norange: new Color(“#FF9F0A”),
\nred: new Color(“#FF3B30”),
\n};
\nwidget.backgroundColor = theme.bg;
\nwidget.setPadding(12, 14, 12, 14);<\/p>\n

\/\/ === ROW 1: HEADER ===
\nconst headerRow = widget.addStack();
\nheaderRow.centerAlignContent();
\nconst headerLeft = headerRow.addStack();
\nheaderLeft.layoutVertically();
\nconst nameText = headerLeft.addText(productDetails.hostname || product.name);
\nnameText.font = Font.boldSystemFont(16);
\nnameText.textColor = theme.primary;
\nnameText.lineLimit = 1;
\nconst subInfo = headerLeft.addStack();
\nsubInfo.spacing = 6;
\nconst codeText = subInfo.addText(product.code);
\ncodeText.font = Font.systemFont(10);
\ncodeText.textColor = theme.secondary;
\nconst ipLabel = subInfo.addText(productDetails.dedicatedip || “”);
\nipLabel.font = new Font(“Menlo”, 10);
\nipLabel.textColor = theme.secondary;
\nheaderRow.addSpacer();
\nconst isRunning = vmDetails && vmDetails.status === “Running”;
\nconst statusBadge = headerRow.addStack();
\nstatusBadge.backgroundColor = new Color((isRunning ? theme.green : theme.red).hex, 0.15);
\nstatusBadge.cornerRadius = 6;
\nstatusBadge.setPadding(3, 8, 3, 8);
\nstatusBadge.centerAlignContent();
\nconst dotCtx = new DrawContext();
\ndotCtx.size = new Size(8, 8);
\ndotCtx.opaque = false;
\ndotCtx.respectScreenScale = true;
\ndotCtx.setFillColor(isRunning ? theme.green : theme.red);
\ndotCtx.fillEllipse(new Rect(0, 0, 8, 8));
\nconst dotImg = statusBadge.addImage(dotCtx.getImage());
\ndotImg.imageSize = new Size(8, 8);
\nstatusBadge.addSpacer(4);
\nconst statusText = statusBadge.addText(isRunning ? “\u5728\u7ebf” : “\u79bb\u7ebf”);
\nstatusText.font = Font.boldSystemFont(11);
\nstatusText.textColor = isRunning ? theme.green : theme.red;<\/p>\n

widget.addSpacer();<\/p>\n

\/\/ === ROW 2: [uptime card] + [renewal card] ===
\nconst row2 = widget.addStack();
\nrow2.spacing = 8;
\n\/\/ — Uptime Card —
\nconst uptimeCard = row2.addStack();
\nuptimeCard.layoutVertically();
\nuptimeCard.backgroundColor = theme.card;
\nuptimeCard.cornerRadius = 12;
\nuptimeCard.setPadding(8, 12, 8, 12);
\nconst uptimeHeader = uptimeCard.addStack();
\nuptimeHeader.centerAlignContent();
\nconst serverSym = SFSymbol.named(“server.rack”);
\nserverSym.applyFont(Font.systemFont(11));
\nconst serverIcon = uptimeHeader.addImage(serverSym.image);
\nserverIcon.imageSize = new Size(13, 13);
\nserverIcon.tintColor = theme.secondary;
\nuptimeHeader.addSpacer(4);
\nconst serverLabel = uptimeHeader.addText(“\u670d\u52a1\u5668”);
\nserverLabel.font = Font.systemFont(11);
\nserverLabel.textColor = theme.secondary;
\nuptimeHeader.addSpacer();
\nuptimeCard.addSpacer();
\nif (vmDetails && vmDetails.uptime) {
\nconst ut = formatUptime(vmDetails.uptime);
\nconst utDaysRow = uptimeCard.addStack();
\nutDaysRow.centerAlignContent();
\nconst utDays = utDaysRow.addText(`${ut.days}`);
\nutDays.font = Font.boldSystemFont(28);
\nutDays.textColor = theme.primary;
\nconst utDayUnit = utDaysRow.addText(` \u5929`);
\nutDayUnit.font = Font.systemFont(12);
\nutDayUnit.textColor = theme.secondary;
\nconst utDetail = uptimeCard.addText(`${ut.hours}h ${ut.mins}m`);
\nutDetail.font = Font.systemFont(10);
\nutDetail.textColor = theme.secondary;
\n} else {
\nconst naText = uptimeCard.addText(“N\/A”);
\nnaText.font = Font.boldSystemFont(24);
\nnaText.textColor = theme.secondary;
\n}
\nuptimeCard.addSpacer();
\n\/\/ — Renewal Card —
\nconst renewCard = row2.addStack();
\nrenewCard.layoutVertically();
\nrenewCard.backgroundColor = theme.card;
\nrenewCard.cornerRadius = 12;
\nrenewCard.setPadding(8, 12, 8, 12);
\nconst renewHeader = renewCard.addStack();
\nrenewHeader.centerAlignContent();
\nconst calSym = SFSymbol.named(“calendar”);
\ncalSym.applyFont(Font.systemFont(11));
\nconst calIcon = renewHeader.addImage(calSym.image);
\ncalIcon.imageSize = new Size(13, 13);
\ncalIcon.tintColor = theme.secondary;
\nrenewHeader.addSpacer(4);
\nconst renewLabel = renewHeader.addText(“\u7eed\u8d39”);
\nrenewLabel.font = Font.systemFont(11);
\nrenewLabel.textColor = theme.secondary;
\nrenewHeader.addSpacer();
\nrenewCard.addSpacer();
\nconst invoiceDateStr = productDetails.nextinvoicedate || “”;
\nconst invoiceDate = new Date(invoiceDateStr);
\nif (!isNaN(invoiceDate.getTime())) {
\nconst daysLeft = Math.ceil((invoiceDate.getTime() – Date.now()) \/ 86400000);
\nconst daysColor = daysLeft <= 30 ? theme.red : theme.green;
\nconst daysRow = renewCard.addStack();
\ndaysRow.centerAlignContent();
\nconst daysVal = daysRow.addText(`${daysLeft}`);
\ndaysVal.font = Font.boldSystemFont(28);
\ndaysVal.textColor = daysColor;
\nconst daysUnit = daysRow.addText(` \u5929`);
\ndaysUnit.font = Font.systemFont(12);
\ndaysUnit.textColor = theme.secondary;
\nconst dateLabel = renewCard.addText(invoiceDateStr.split(” “)[0]);
\ndateLabel.font = Font.systemFont(10);
\ndateLabel.textColor = theme.secondary;
\n} else {
\nconst naText = renewCard.addText(“N\/A”);
\nnaText.font = Font.boldSystemFont(24);
\nnaText.textColor = theme.secondary;
\n}
\nrenewCard.addSpacer();<\/p>\n

widget.addSpacer();<\/p>\n

\/\/ === ROW 3: TRAFFIC CARD (full width) ===
\nconst trafficCard = widget.addStack();
\ntrafficCard.layoutVertically();
\ntrafficCard.backgroundColor = theme.card;
\ntrafficCard.cornerRadius = 12;
\ntrafficCard.setPadding(10, 12, 10, 12);
\n\/\/ traffic header
\nconst trafficHeader = trafficCard.addStack();
\ntrafficHeader.centerAlignContent();
\nconst globeSymbol = SFSymbol.named(“globe”);
\nglobeSymbol.applyFont(Font.systemFont(11));
\nconst globeImg = trafficHeader.addImage(globeSymbol.image);
\nglobeImg.imageSize = new Size(12, 12);
\nglobeImg.tintColor = theme.secondary;
\ntrafficHeader.addSpacer(3);
\nconst trafficLabel = trafficHeader.addText(“Traffic”);
\ntrafficLabel.font = Font.systemFont(11);
\ntrafficLabel.textColor = theme.secondary;
\ntrafficHeader.addSpacer();
\nconst usagePercent = Math.round(productDetails.bwusage \/ productDetails.bwlimit * 100);
\nconst usedGB = (productDetails.bwusage \/ 1024).toFixed(1);
\nconst totalGB = (productDetails.bwlimit \/ 1024).toFixed(1);
\nconst usageText = trafficHeader.addText(`${usedGB} \/ ${totalGB} GB`);
\nusageText.font = Font.boldSystemFont(11);
\nusageText.textColor = theme.primary;
\ntrafficCard.addSpacer(4);
\n\/\/ percentage row
\nconst trafficMainRow = trafficCard.addStack();
\ntrafficMainRow.centerAlignContent();
\nconst percentText = trafficMainRow.addText(`${usagePercent}%`);
\npercentText.font = Font.boldSystemFont(22);
\npercentText.textColor = usagePercent >= 80 ? theme.red : theme.green;
\ntrafficMainRow.addSpacer();
\nconst remainGB = ((productDetails.bwlimit – productDetails.bwusage) \/ 1024).toFixed(1);
\nconst remainLabel = trafficMainRow.addText(`\u5269\u4f59 ${remainGB} GB`);
\nremainLabel.font = Font.systemFont(9);
\nremainLabel.textColor = theme.secondary;
\ntrafficCard.addSpacer(4);
\n\/\/ progress bar (full width)
\nconst progressBar = createProgressBarImage(
\nproductDetails.bwlimit, productDetails.bwusage,
\n300, 8, theme.green, theme.progressBg
\n);
\nconst barRow = trafficCard.addStack();
\nbarRow.size = new Size(0, 8);
\nconst progressImg = barRow.addImage(progressBar);
\nprogressImg.imageSize = new Size(300, 8);
\ntrafficCard.addSpacer(4);
\n\/\/ in\/out row
\nconst inOutRow = trafficCard.addStack();
\ninOutRow.centerAlignContent();
\nconst inArrow = inOutRow.addText(“\u2199”);
\ninArrow.font = Font.systemFont(10);
\ninArrow.textColor = theme.blue;
\ninOutRow.addSpacer(2);
\nconst inLabel = inOutRow.addText(`\u5165\u7ad9 ${formatMB(productDetails.bwusage_in || 0)}`);
\ninLabel.font = Font.systemFont(10);
\ninLabel.textColor = theme.secondary;
\ninOutRow.addSpacer();
\nconst outArrow = inOutRow.addText(“\u2197”);
\noutArrow.font = Font.systemFont(10);
\noutArrow.textColor = theme.orange;
\ninOutRow.addSpacer(2);
\nconst outLabel = inOutRow.addText(`\u51fa\u7ad9 ${formatMB(productDetails.bwusage_out || 0)}`);
\noutLabel.font = Font.systemFont(10);
\noutLabel.textColor = theme.secondary;
\n\/\/ daily avg + reset
\nconst regDate = new Date(productDetails.regdate);
\nif (!isNaN(regDate.getTime())) {
\ntrafficCard.addSpacer(3);
\nconst now = new Date();
\nconst regDay = regDate.getDate();
\nconst lastReset = new Date(now.getFullYear(), now.getMonth(), regDay);
\nif (lastReset > now) lastReset.setMonth(lastReset.getMonth() – 1);
\nconst daysSinceReset = Math.max(1, Math.floor((now – lastReset) \/ 86400000));
\nconst dailyAvgMB = productDetails.bwusage \/ daysSinceReset;
\nconst nextReset = new Date(lastReset);
\nnextReset.setMonth(nextReset.getMonth() + 1);
\nconst daysUntilReset = Math.ceil((nextReset – now) \/ 86400000);
\nconst statsRow = trafficCard.addStack();
\nstatsRow.centerAlignContent();
\nconst avgLabel = statsRow.addText(`\u65e5\u5747 ${formatMB(dailyAvgMB)}`);
\navgLabel.font = Font.systemFont(10);
\navgLabel.textColor = theme.secondary;
\nstatsRow.addSpacer();
\nconst resetLabel = statsRow.addText(`${daysUntilReset} \u5929\u540e\u91cd\u7f6e`);
\nresetLabel.font = Font.systemFont(10);
\nresetLabel.textColor = theme.secondary;
\n}<\/p>\n

widget.addSpacer();<\/p>\n

\/\/ === ROW 4: [CPU chart] [RAM chart] [NET chart] + [detail card] ===
\nconst row3 = widget.addStack();
\nrow3.spacing = 6;
\n\/\/ — 3 chart cards —
\nconst chartsCol = row3.addStack();
\nchartsCol.layoutVertically();
\nchartsCol.spacing = 6;
\n\/\/ top row: CPU + RAM
\nconst chartRow1 = chartsCol.addStack();
\nchartRow1.spacing = 6;
\nfunction makeChartCard(parent, iconName, label, iconColor, datasets, minCount, chartColor, secondaryChartColor) {
\nconst card = parent.addStack();
\ncard.layoutVertically();
\ncard.backgroundColor = theme.card;
\ncard.cornerRadius = 10;
\ncard.setPadding(6, 6, 4, 6);
\nconst h = card.addStack();
\nh.centerAlignContent();
\nconst sym = SFSymbol.named(iconName);
\nsym.applyFont(Font.systemFont(9));
\nconst icon = h.addImage(sym.image);
\nicon.imageSize = new Size(10, 10);
\nicon.tintColor = iconColor;
\nh.addSpacer(2);
\nconst t = h.addText(label);
\nt.font = Font.systemFont(9);
\nt.textColor = theme.secondary;
\ncard.addSpacer(2);
\nif (datasets.length >= minCount) {
\nconst chartData = minCount >= 2
\n? [datasets[0].data, datasets[1].data]
\n: datasets[0].data;
\nconst chart = createLineChartImage(chartData, 80, 30, chartColor, secondaryChartColor);
\ncard.addImage(chart);
\n}
\n}
\nmakeChartCard(chartRow1, “cpu”, “CPU”, theme.orange, cpuData.datasets, 1, theme.blue);
\nmakeChartCard(chartRow1, “memorychip”, “RAM”, theme.green, memData.datasets, 1, new Color(“#1662a0”));
\n\/\/ bottom: NET (wider)
\nconst chartRow2 = chartsCol.addStack();
\nconst netCard = chartRow2.addStack();
\nnetCard.layoutVertically();
\nnetCard.backgroundColor = theme.card;
\nnetCard.cornerRadius = 10;
\nnetCard.setPadding(6, 6, 4, 6);
\nconst netH = netCard.addStack();
\nnetH.centerAlignContent();
\nconst netSym = SFSymbol.named(“antenna.radiowaves.left.and.right”);
\nnetSym.applyFont(Font.systemFont(9));
\nconst netIcon = netH.addImage(netSym.image);
\nnetIcon.imageSize = new Size(10, 10);
\nnetIcon.tintColor = theme.orange;
\nnetH.addSpacer(2);
\nconst netLabel = netH.addText(“NET”);
\nnetLabel.font = Font.systemFont(9);
\nnetLabel.textColor = theme.secondary;
\nnetCard.addSpacer(2);
\nif (netData.datasets && netData.datasets.length >= 2) {
\nconst netChart = createLineChartImage(
\n[netData.datasets[0].data, netData.datasets[1].data],
\n170, 30, new Color(“#1F6FD4”), new Color(“#16A085”)
\n);
\nnetCard.addImage(netChart);
\n}
\n\/\/ — Right: detail card (spans full height) —
\nconst detailCard = row3.addStack();
\ndetailCard.layoutVertically();
\ndetailCard.backgroundColor = theme.card;
\ndetailCard.cornerRadius = 12;
\ndetailCard.setPadding(8, 10, 8, 10);
\nfunction addDetailRow(parent, label, value, valColor) {
\nconst row = parent.addStack();
\nrow.centerAlignContent();
\nconst l = row.addText(label);
\nl.font = Font.systemFont(9);
\nl.textColor = theme.secondary;
\nrow.addSpacer();
\nconst v = row.addText(value);
\nv.font = Font.boldSystemFont(9);
\nv.textColor = valColor || theme.primary;
\nv.lineLimit = 1;
\nparent.addSpacer(3);
\n}
\naddDetailRow(detailCard, “\u6ce8\u518c”, productDetails.regdate ? productDetails.regdate.split(” “)[0] : “N\/A”);
\nif (!isNaN(invoiceDate.getTime())) {
\naddDetailRow(detailCard, “\u5230\u671f”, invoiceDateStr.split(” “)[0]);
\n}
\naddDetailRow(detailCard, “\u4ea7\u54c1”, product.name);
\n\/\/ CPU value
\nif (cpuData.datasets && cpuData.datasets.length > 0 && cpuData.datasets[0].data.length > 0) {
\nconst cpuVal = cpuData.datasets[0].data[cpuData.datasets[0].data.length – 1];
\naddDetailRow(detailCard, “CPU”, `${cpuVal.toFixed(1)}%`);
\n}
\n\/\/ Memory (bytes -> percentage using maxmem)
\nif (vmDetails && vmDetails.maxmem && vmDetails.mem) {
\nconst memDisplay = `${(vmDetails.mem \/ vmDetails.maxmem * 100).toFixed(1)}%`;
\naddDetailRow(detailCard, “\u5185\u5b58”, memDisplay);
\n}
\n\/\/ NET speed
\nif (netData.datasets && netData.datasets.length >= 2 && netData.datasets[0].data.length > 0) {
\nconst fmtSpeed = (v) => {
\nif (v >= 1024 * 1024) return `${(v \/ 1024 \/ 1024).toFixed(1)}M\/s`;
\nif (v >= 1024) return `${(v \/ 1024).toFixed(0)}K\/s`;
\nreturn `${v.toFixed(0)}B\/s`;
\n};
\nconst lastIn = netData.datasets[0].data[netData.datasets[0].data.length – 1];
\nconst lastOut = netData.datasets[1].data[netData.datasets[1].data.length – 1];
\naddDetailRow(detailCard, “\u2199\u5165\u7ad9”, fmtSpeed(lastIn));
\naddDetailRow(detailCard, “\u2197\u51fa\u7ad9”, fmtSpeed(lastOut));
\n}<\/p>\n

Script.setWidget(widget);
\n}
\nasync function main() {
\nif (config.runsInApp) {
\nconst hasCookie = getCookie();
\nif (!hasCookie) {
\nawait handleSettingsMenu();
\nScript.complete();
\nreturn;
\n}
\nconst menu = new Alert();
\nmenu.title = “DMIT \u5c0f\u7ec4\u4ef6”;
\nmenu.addAction(“\u9884\u89c8\u5927\u53f7\u7ec4\u4ef6”);
\nmenu.addAction(“\u9884\u89c8\u4e2d\u53f7\u7ec4\u4ef6”);
\nmenu.addAction(“\u9884\u89c8\u5c0f\u53f7\u7ec4\u4ef6”);
\nmenu.addAction(“\u8bbe\u7f6e”);
\nmenu.addCancelAction(“\u53d6\u6d88”);
\nconst choice = await menu.present();
\nif (choice === 3) {
\nawait handleSettingsMenu();
\nScript.complete();
\nreturn;
\n}
\nif (choice === -1) {
\nScript.complete();
\nreturn;
\n}
\nlet products = getCachedProducts();
\nif (!products) {
\nproducts = await loadProducts();
\n}
\nif (products.length === 0) {
\nconst errAlert = new Alert();
\nerrAlert.title = “\u9519\u8bef”;
\nerrAlert.message = “\u672a\u627e\u5230\u4ea7\u54c1\u6570\u636e\uff0c\u8bf7\u68c0\u67e5 Cookie \u662f\u5426\u6709\u6548\u3002”;
\nerrAlert.addAction(“\u91cd\u65b0\u8bbe\u7f6e Cookie”);
\nerrAlert.addCancelAction(“\u53d6\u6d88”);
\nconst errChoice = await errAlert.present();
\nif (errChoice === 0) {
\nawait handleSettingsMenu();
\n}
\nScript.complete();
\nreturn;
\n}
\nconst product = pickProductWithFallback(products, productsIndex);
\nif (!product) {
\nconst noProductAlert = new Alert();
\nnoProductAlert.title = “\u9519\u8bef”;
\nnoProductAlert.message = “\u672a\u627e\u5230\u53ef\u7528\u4ea7\u54c1”;
\nnoProductAlert.addAction(“\u597d\u7684”);
\nawait noProductAlert.present();
\nScript.complete();
\nreturn;
\n}
\nconst widget = new ListWidget();
\nif (choice === 0) {
\nawait renderLarge(widget, product);
\nawait widget.presentLarge();
\n} else if (choice === 1) {
\nawait renderMedium(widget, product);
\nawait widget.presentMedium();
\n} else {
\nawait renderSmall(widget, product);
\nawait widget.presentSmall();
\n}
\nScript.complete();
\nreturn;
\n}
\nconst widget = new ListWidget();
\nconst cookie = getCookie();
\nif (!cookie) {
\nshowWidgetErrorAndFinish(widget, “\u8bf7\u5148\u8bbe\u7f6e Cookie”);
\nreturn;
\n}
\nlet products = getCachedProducts();
\nif (!products) {
\nproducts = await loadProducts();
\n}
\nif (products.length === 0) {
\nshowWidgetErrorAndFinish(widget, “\u672a\u627e\u5230\u4ea7\u54c1\u6570\u636e”);
\nreturn;
\n}
\nconst product = pickProductWithFallback(products, productsIndex);
\nif (!product) {
\nshowWidgetErrorAndFinish(widget, “\u672a\u627e\u5230\u53ef\u7528\u4ea7\u54c1”);
\nreturn;
\n}
\nswitch (config.widgetFamily) {
\ncase “accessoryCircular”:
\nawait renderAccessoryCircular(widget, product);
\nbreak;
\ncase “accessoryInline”:
\nawait renderAccessoryInline(widget, product);
\nbreak;
\ncase “accessoryRectangular”:
\nawait renderAccessoryRectangular(widget, product);
\nbreak;
\ncase “small”:
\nawait renderSmall(widget, product);
\nbreak;
\ncase “medium”:
\nawait renderMedium(widget, product);
\nbreak;
\ncase “large”:
\ncase “extraLarge”:
\nawait renderLarge(widget, product);
\nbreak;
\ndefault:
\nawait renderMedium(widget, product);
\nbreak;
\n}
\nScript.complete();
\n}
\nvoid main();<\/p>\n","protected":false},"excerpt":{"rendered":"

\u65e9\u4e0a\u770b\u89c1\u5927\u4f6c\u5206\u4eab\u7684 scriptable dmit\u5c0f\u7ec4\u4ef6 https:\/\/www.nodeseek.com\/post-661149-1 \u4f18\u5316\u4e86\u4e00\u4e0b\uff0c\u591a\u52a0\u4e86\u4e00\u4e9b\u4fe1\u606f\u548c\u5c0f\u529f\u80fd\uff0c\u9700\u8981\u53ef\u81ea\u53d6\uff0c\u56e0\u4e3a\u6211\u53ea\u6709\u4e00\u53f0\u8bbe\u5907\uff0c\u5355\u8bbe\u5907\u4f7f\u7528\u662f\u6ca1\u95ee\u9898\u7684\uff0c\u591a\u8bbe\u5907\u4e0d\u4fdd\u8bc1\u54c8…<\/p>\n","protected":false},"author":1,"featured_media":658816,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[128],"tags":[1134,981,1135],"topic":[],"class_list":["post-658815","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-128","tag-const","tag-dmit","tag-scriptname"],"_links":{"self":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/658815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=658815"}],"version-history":[{"count":1,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/658815\/revisions"}],"predecessor-version":[{"id":658825,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/658815\/revisions\/658825"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/media\/658816"}],"wp:attachment":[{"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=658815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=658815"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=658815"},{"taxonomy":"topic","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftopic&post=658815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}