@cnc_cbz/usefultools-plugin-official 1.0.1

package/dist/image-compressor.mjs

@@ -0,0 +1,337 @@
+import { defineComponent, ref, openBlock, createElementBlock, createCommentVNode, createElementVNode, Fragment, renderList, normalizeClass, toDisplayString, withDirectives, vModelText, withModifiers, createTextVNode } from "vue";
+const _hoisted_1 = { class: "flex flex-col h-full gap-5" };
+const _hoisted_2 = { class: "bg-deep-charcoal border-4 border-black rounded-xl p-4 shadow-hard" };
+const _hoisted_3 = { class: "flex flex-wrap items-center gap-4" };
+const _hoisted_4 = { class: "flex gap-2" };
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = { class: "flex items-center gap-2" };
+const _hoisted_7 = { class: "font-mono text-xs text-gray-400" };
+const _hoisted_8 = {
+  key: 1,
+  class: "flex-1 flex flex-col gap-4 min-h-0"
+};
+const _hoisted_9 = { class: "flex items-center gap-4 px-2" };
+const _hoisted_10 = { class: "flex items-center gap-2" };
+const _hoisted_11 = { class: "font-mono text-sm text-gray-300" };
+const _hoisted_12 = { class: "flex items-center gap-2" };
+const _hoisted_13 = { class: "font-mono text-sm text-neon-green" };
+const _hoisted_14 = { class: "flex-1 grid grid-cols-2 gap-4 min-h-0" };
+const _hoisted_15 = { class: "bg-deep-charcoal border-4 border-black rounded-xl shadow-hard overflow-hidden flex flex-col" };
+const _hoisted_16 = { class: "flex-1 overflow-auto flex items-center justify-center p-2" };
+const _hoisted_17 = ["src"];
+const _hoisted_18 = { class: "bg-deep-charcoal border-4 border-black rounded-xl shadow-hard overflow-hidden flex flex-col" };
+const _hoisted_19 = { class: "px-3 py-2 border-b-2 border-black text-xs font-bold text-gray-500 uppercase" };
+const _hoisted_20 = { class: "flex-1 overflow-auto flex items-center justify-center p-2" };
+const _hoisted_21 = ["src"];
+const _hoisted_22 = {
+  key: 1,
+  class: "text-gray-600 text-sm"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const quality = ref(80);
+    const format = ref("jpeg");
+    const originalFile = ref(null);
+    const originalUrl = ref("");
+    const compressedUrl = ref("");
+    const originalSize = ref(0);
+    const compressedSize = ref(0);
+    const processing = ref(false);
+    function handleDrop(e) {
+      var _a;
+      e.preventDefault();
+      const file = (_a = e.dataTransfer) == null ? void 0 : _a.files[0];
+      if (file && file.type.startsWith("image/")) processFile(file);
+    }
+    function handleFileInput(e) {
+      var _a;
+      const file = (_a = e.target.files) == null ? void 0 : _a[0];
+      if (file) processFile(file);
+    }
+    function processFile(file) {
+      originalFile.value = file;
+      originalSize.value = file.size;
+      originalUrl.value = URL.createObjectURL(file);
+      compress();
+    }
+    async function compress() {
+      if (!originalFile.value) return;
+      processing.value = true;
+      const img = new Image();
+      img.src = originalUrl.value;
+      await new Promise((resolve) => {
+        img.onload = resolve;
+      });
+      const canvas = document.createElement("canvas");
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(img, 0, 0);
+      const mimeType = `image/${format.value}`;
+      const blob = await new Promise(
+        (resolve) => canvas.toBlob(resolve, mimeType, quality.value / 100)
+      );
+      if (blob) {
+        if (compressedUrl.value) URL.revokeObjectURL(compressedUrl.value);
+        compressedUrl.value = URL.createObjectURL(blob);
+        compressedSize.value = blob.size;
+      }
+      processing.value = false;
+    }
+    function download() {
+      if (!compressedUrl.value) return;
+      const link = document.createElement("a");
+      link.download = `compressed.${format.value}`;
+      link.href = compressedUrl.value;
+      link.click();
+    }
+    function formatSize(bytes) {
+      if (bytes < 1024) return `${bytes} B`;
+      if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+      return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+    }
+    const ratio = () => originalSize.value ? Math.round((1 - compressedSize.value / originalSize.value) * 100) : 0;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createCommentVNode(" 控制区 "),
+        createElementVNode("div", _hoisted_2, [
+          _cache[6] || (_cache[6] = createElementVNode(
+            "div",
+            { class: "flex items-center gap-2 mb-3" },
+            [
+              createElementVNode("span", { class: "material-icons text-primary text-lg" }, "photo_size_select_large"),
+              createElementVNode("span", { class: "text-sm font-bold text-gray-400 uppercase tracking-wider" }, "图片压缩/转换")
+            ],
+            -1
+            /* CACHED */
+          )),
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, [
+              (openBlock(), createElementBlock(
+                Fragment,
+                null,
+                renderList(["jpeg", "png", "webp"], (f) => {
+                  return createElementVNode("button", {
+                    key: f,
+                    onClick: ($event) => {
+                      format.value = f;
+                      originalFile.value && compress();
+                    },
+                    class: normalizeClass(["h-9 px-3 font-bold border-2 border-black rounded text-xs transition-all uppercase", format.value === f ? "bg-primary text-black shadow-none translate-x-0.5 translate-y-0.5" : "bg-bg-dark text-gray-400 shadow-hard-sm hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5"])
+                  }, toDisplayString(f), 11, _hoisted_5);
+                }),
+                64
+                /* STABLE_FRAGMENT */
+              ))
+            ]),
+            createElementVNode("div", _hoisted_6, [
+              _cache[5] || (_cache[5] = createElementVNode(
+                "span",
+                { class: "text-xs text-gray-500" },
+                "质量:",
+                -1
+                /* CACHED */
+              )),
+              withDirectives(createElementVNode(
+                "input",
+                {
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => quality.value = $event),
+                  type: "range",
+                  min: "10",
+                  max: "100",
+                  class: "w-28 accent-primary",
+                  onChange: _cache[1] || (_cache[1] = ($event) => originalFile.value && compress())
+                },
+                null,
+                544
+                /* NEED_HYDRATION, NEED_PATCH */
+              ), [
+                [
+                  vModelText,
+                  quality.value,
+                  void 0,
+                  { number: true }
+                ]
+              ]),
+              createElementVNode(
+                "span",
+                _hoisted_7,
+                toDisplayString(quality.value) + "%",
+                1
+                /* TEXT */
+              )
+            ])
+          ])
+        ]),
+        createCommentVNode(" 拖拽区 / 预览 "),
+        !originalFile.value ? (openBlock(), createElementBlock(
+          "div",
+          {
+            key: 0,
+            class: "flex-1 bg-deep-charcoal border-4 border-dashed border-gray-600 rounded-xl flex flex-col items-center justify-center gap-3 cursor-pointer hover:border-primary transition-colors",
+            onDrop: handleDrop,
+            onDragover: _cache[2] || (_cache[2] = withModifiers(() => {
+            }, ["prevent"])),
+            onClick: _cache[3] || (_cache[3] = ($event) => {
+              var _a;
+              return (_a = _ctx.$refs.fileInput) == null ? void 0 : _a.click();
+            })
+          },
+          [
+            _cache[7] || (_cache[7] = createElementVNode(
+              "span",
+              { class: "material-icons text-5xl text-gray-600" },
+              "cloud_upload",
+              -1
+              /* CACHED */
+            )),
+            _cache[8] || (_cache[8] = createElementVNode(
+              "span",
+              { class: "text-gray-500 text-sm" },
+              "拖拽图片到此处，或点击选择文件",
+              -1
+              /* CACHED */
+            )),
+            createElementVNode(
+              "input",
+              {
+                ref: "fileInput",
+                type: "file",
+                accept: "image/*",
+                class: "hidden",
+                onChange: handleFileInput
+              },
+              null,
+              544
+              /* NEED_HYDRATION, NEED_PATCH */
+            )
+          ],
+          32
+          /* NEED_HYDRATION */
+        )) : (openBlock(), createElementBlock("div", _hoisted_8, [
+          createCommentVNode(" 大小对比 "),
+          createElementVNode("div", _hoisted_9, [
+            createElementVNode("div", _hoisted_10, [
+              _cache[9] || (_cache[9] = createElementVNode(
+                "span",
+                { class: "text-xs text-gray-500" },
+                "原始:",
+                -1
+                /* CACHED */
+              )),
+              createElementVNode(
+                "span",
+                _hoisted_11,
+                toDisplayString(formatSize(originalSize.value)),
+                1
+                /* TEXT */
+              )
+            ]),
+            _cache[12] || (_cache[12] = createElementVNode(
+              "span",
+              { class: "material-icons text-primary" },
+              "arrow_forward",
+              -1
+              /* CACHED */
+            )),
+            createElementVNode("div", _hoisted_12, [
+              _cache[10] || (_cache[10] = createElementVNode(
+                "span",
+                { class: "text-xs text-gray-500" },
+                "压缩后:",
+                -1
+                /* CACHED */
+              )),
+              createElementVNode(
+                "span",
+                _hoisted_13,
+                toDisplayString(formatSize(compressedSize.value)),
+                1
+                /* TEXT */
+              )
+            ]),
+            createElementVNode(
+              "span",
+              {
+                class: normalizeClass(["text-xs font-bold", ratio() > 0 ? "text-neon-green" : "text-coral-red"])
+              },
+              toDisplayString(ratio() > 0 ? `-${ratio()}%` : `+${Math.abs(ratio())}%`),
+              3
+              /* TEXT, CLASS */
+            ),
+            _cache[13] || (_cache[13] = createElementVNode(
+              "div",
+              { class: "flex-1" },
+              null,
+              -1
+              /* CACHED */
+            )),
+            createElementVNode("button", {
+              onClick: download,
+              class: "h-9 px-4 bg-primary text-black font-bold border-2 border-black rounded shadow-hard-sm hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 transition-all text-xs flex items-center gap-1"
+            }, [..._cache[11] || (_cache[11] = [
+              createElementVNode(
+                "span",
+                { class: "material-icons text-sm" },
+                "download",
+                -1
+                /* CACHED */
+              ),
+              createTextVNode(
+                " 下载 ",
+                -1
+                /* CACHED */
+              )
+            ])]),
+            createElementVNode("button", {
+              onClick: _cache[4] || (_cache[4] = ($event) => {
+                originalFile.value = null;
+                originalUrl.value = "";
+                compressedUrl.value = "";
+              }),
+              class: "h-9 px-3 bg-bg-dark text-gray-400 font-bold border-2 border-black rounded shadow-hard-sm hover:shadow-none hover:translate-x-0.5 hover:translate-y-0.5 transition-all text-xs"
+            }, " 重选 ")
+          ]),
+          createCommentVNode(" 图片预览 "),
+          createElementVNode("div", _hoisted_14, [
+            createElementVNode("div", _hoisted_15, [
+              _cache[14] || (_cache[14] = createElementVNode(
+                "div",
+                { class: "px-3 py-2 border-b-2 border-black text-xs font-bold text-gray-500 uppercase" },
+                "原始",
+                -1
+                /* CACHED */
+              )),
+              createElementVNode("div", _hoisted_16, [
+                createElementVNode("img", {
+                  src: originalUrl.value,
+                  class: "max-w-full max-h-full object-contain"
+                }, null, 8, _hoisted_17)
+              ])
+            ]),
+            createElementVNode("div", _hoisted_18, [
+              createElementVNode(
+                "div",
+                _hoisted_19,
+                "压缩后 (" + toDisplayString(format.value.toUpperCase()) + ")",
+                1
+                /* TEXT */
+              ),
+              createElementVNode("div", _hoisted_20, [
+                compressedUrl.value ? (openBlock(), createElementBlock("img", {
+                  key: 0,
+                  src: compressedUrl.value,
+                  class: "max-w-full max-h-full object-contain"
+                }, null, 8, _hoisted_21)) : (openBlock(), createElementBlock("span", _hoisted_22, "处理中..."))
+              ])
+            ])
+          ])
+        ]))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/ip-subnet.mjs

@@ -0,0 +1,222 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, createElementVNode, withDirectives, vModelText, Fragment, renderList, toDisplayString, createTextVNode, createCommentVNode, normalizeClass } from "vue";
+const _hoisted_1 = { class: "flex flex-col h-full gap-5" };
+const _hoisted_2 = { class: "bg-deep-charcoal border-4 border-black rounded-xl p-4 shadow-hard" };
+const _hoisted_3 = { class: "flex flex-wrap items-center gap-3" };
+const _hoisted_4 = { class: "flex flex-wrap gap-2 mt-3" };
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = {
+  key: 0,
+  class: "px-4 py-2 bg-coral-red/20 border-2 border-coral-red rounded flex items-center gap-2 text-coral-red font-bold text-sm"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "flex-1 grid grid-cols-1 lg:grid-cols-2 gap-3 overflow-auto min-h-0"
+};
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "flex items-center justify-between mb-1" };
+const _hoisted_10 = { class: "text-xs font-bold text-gray-500 uppercase tracking-wider" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const ipInput = ref("192.168.1.100");
+    const cidr = ref(24);
+    const copyField = ref("");
+    function ipToNum(ip) {
+      const parts = ip.split(".").map(Number);
+      return (parts[0] << 24 | parts[1] << 16 | parts[2] << 8 | parts[3]) >>> 0;
+    }
+    function numToIp(num) {
+      return [num >>> 24 & 255, num >>> 16 & 255, num >>> 8 & 255, num & 255].join(".");
+    }
+    function isValidIp(ip) {
+      const parts = ip.split(".");
+      if (parts.length !== 4) return false;
+      return parts.every((p) => {
+        const n = Number(p);
+        return !isNaN(n) && n >= 0 && n <= 255 && String(n) === p;
+      });
+    }
+    const result = computed(() => {
+      if (!isValidIp(ipInput.value) || cidr.value < 0 || cidr.value > 32) return null;
+      const ip = ipToNum(ipInput.value);
+      const mask = cidr.value === 0 ? 0 : -1 << 32 - cidr.value >>> 0;
+      const network = (ip & mask) >>> 0;
+      const broadcast = (network | ~mask) >>> 0;
+      const firstHost = cidr.value >= 31 ? network : network + 1 >>> 0;
+      const lastHost = cidr.value >= 31 ? broadcast : broadcast - 1 >>> 0;
+      const totalHosts = cidr.value >= 31 ? cidr.value === 32 ? 1 : 2 : Math.pow(2, 32 - cidr.value) - 2;
+      const ipClass = (() => {
+        const first = ip >>> 24 & 255;
+        if (first < 128) return "A";
+        if (first < 192) return "B";
+        if (first < 224) return "C";
+        if (first < 240) return "D (组播)";
+        return "E (保留)";
+      })();
+      const isPrivate = (() => {
+        const n = ip;
+        return n >= ipToNum("10.0.0.0") && n <= ipToNum("10.255.255.255") || n >= ipToNum("172.16.0.0") && n <= ipToNum("172.31.255.255") || n >= ipToNum("192.168.0.0") && n <= ipToNum("192.168.255.255");
+      })();
+      return [
+        { label: "IP 地址", value: ipInput.value, color: "text-primary" },
+        { label: "子网掩码", value: numToIp(mask), color: "text-electric-blue" },
+        { label: "CIDR", value: `/${cidr.value}`, color: "text-electric-blue" },
+        { label: "网络地址", value: numToIp(network), color: "text-vibrant-purple" },
+        { label: "广播地址", value: numToIp(broadcast), color: "text-vibrant-purple" },
+        { label: "第一个主机", value: numToIp(firstHost), color: "text-neon-green" },
+        { label: "最后一个主机", value: numToIp(lastHost), color: "text-neon-green" },
+        { label: "可用主机数", value: totalHosts.toLocaleString(), color: "text-primary" },
+        { label: "IP 类别", value: ipClass, color: "text-hot-pink" },
+        { label: "地址类型", value: isPrivate ? "私有地址" : "公有地址", color: isPrivate ? "text-neon-green" : "text-coral-red" },
+        { label: "二进制", value: ip.toString(2).padStart(32, "0").replace(/(.{8})/g, "$1.").slice(0, -1), color: "text-gray-400" }
+      ];
+    });
+    async function copy(text, field) {
+      await navigator.clipboard.writeText(text);
+      copyField.value = field;
+      setTimeout(() => {
+        copyField.value = "";
+      }, 1200);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          _cache[4] || (_cache[4] = createElementVNode(
+            "div",
+            { class: "flex items-center gap-2 mb-3" },
+            [
+              createElementVNode("span", { class: "material-icons text-primary text-lg" }, "lan"),
+              createElementVNode("span", { class: "text-sm font-bold text-gray-400 uppercase tracking-wider" }, "IP / 子网计算器")
+            ],
+            -1
+            /* CACHED */
+          )),
+          createElementVNode("div", _hoisted_3, [
+            withDirectives(createElementVNode(
+              "input",
+              {
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => ipInput.value = $event),
+                placeholder: "192.168.1.100",
+                class: "flex-1 h-12 bg-bg-dark text-gray-100 border-4 border-black rounded-lg px-4 font-mono text-lg shadow-hard focus:border-primary focus:shadow-none focus:translate-x-[4px] focus:translate-y-[4px] transition-all outline-none placeholder-gray-600 min-w-[200px]"
+              },
+              null,
+              512
+              /* NEED_PATCH */
+            ), [
+              [vModelText, ipInput.value]
+            ]),
+            _cache[2] || (_cache[2] = createElementVNode(
+              "span",
+              { class: "text-2xl text-gray-500 font-bold" },
+              "/",
+              -1
+              /* CACHED */
+            )),
+            withDirectives(createElementVNode(
+              "input",
+              {
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => cidr.value = $event),
+                type: "number",
+                min: "0",
+                max: "32",
+                class: "w-20 h-12 bg-bg-dark text-gray-100 border-4 border-black rounded-lg px-3 font-mono text-lg text-center shadow-hard focus:border-primary focus:shadow-none focus:translate-x-[4px] focus:translate-y-[4px] transition-all outline-none"
+              },
+              null,
+              512
+              /* NEED_PATCH */
+            ), [
+              [
+                vModelText,
+                cidr.value,
+                void 0,
+                { number: true }
+              ]
+            ])
+          ]),
+          createElementVNode("div", _hoisted_4, [
+            _cache[3] || (_cache[3] = createElementVNode(
+              "span",
+              { class: "text-xs text-gray-600" },
+              "常用:",
+              -1
+              /* CACHED */
+            )),
+            (openBlock(), createElementBlock(
+              Fragment,
+              null,
+              renderList([8, 16, 24, 25, 26, 27, 28, 30, 32], (c) => {
+                return createElementVNode("button", {
+                  key: c,
+                  onClick: ($event) => cidr.value = c,
+                  class: "px-2 py-0.5 text-xs font-mono bg-bg-dark border border-gray-700 rounded hover:border-primary hover:text-primary transition-all cursor-pointer text-gray-500"
+                }, " /" + toDisplayString(c), 9, _hoisted_5);
+              }),
+              64
+              /* STABLE_FRAGMENT */
+            ))
+          ])
+        ]),
+        !isValidIp(ipInput.value) ? (openBlock(), createElementBlock("div", _hoisted_6, [..._cache[5] || (_cache[5] = [
+          createElementVNode(
+            "span",
+            { class: "material-icons text-lg" },
+            "error_outline",
+            -1
+            /* CACHED */
+          ),
+          createTextVNode(
+            " 无效的 IP 地址 ",
+            -1
+            /* CACHED */
+          )
+        ])])) : createCommentVNode("v-if", true),
+        result.value ? (openBlock(), createElementBlock("div", _hoisted_7, [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(result.value, (r) => {
+              return openBlock(), createElementBlock("div", {
+                key: r.label,
+                class: "bg-deep-charcoal border-4 border-black rounded-xl p-4 shadow-hard cursor-pointer hover:border-primary transition-all group",
+                onClick: ($event) => copy(r.value, r.label)
+              }, [
+                createElementVNode("div", _hoisted_9, [
+                  createElementVNode(
+                    "span",
+                    _hoisted_10,
+                    toDisplayString(r.label),
+                    1
+                    /* TEXT */
+                  ),
+                  createElementVNode(
+                    "span",
+                    {
+                      class: normalizeClass(["material-icons text-sm opacity-0 group-hover:opacity-100 transition-opacity", copyField.value === r.label ? "text-neon-green" : "text-gray-500"])
+                    },
+                    toDisplayString(copyField.value === r.label ? "check" : "content_copy"),
+                    3
+                    /* TEXT, CLASS */
+                  )
+                ]),
+                createElementVNode(
+                  "div",
+                  {
+                    class: normalizeClass(["font-mono text-sm select-all break-all", r.color])
+                  },
+                  toDisplayString(r.value),
+                  3
+                  /* TEXT, CLASS */
+                )
+              ], 8, _hoisted_8);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ])) : createCommentVNode("v-if", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};