@toototech/webbuilder-plugins 0.1.0

package/dist/vue.js

@@ -0,0 +1,2171 @@
+import './style.css';
+import { defineComponent, ref, shallowRef, computed, watch, nextTick, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createElementVNode, withModifiers, createVNode, normalizeClass, createElementBlock, Fragment, renderList, normalizeStyle, toDisplayString, createCommentVNode, createTextVNode, onMounted } from "vue";
+import { ElPopover, ElInput, ElSelect, ElOption, ElSwitch, ElPopconfirm, ElInputNumber, ElDatePicker } from "element-plus";
+import { Icon } from "@iconify/vue";
+import { u as useFontManager, a as useGoogleFonts, i as injectGoogleFontCss } from "./useFontManager-CdrLq1eG.js";
+import { d as collectI18nKeysFromModel, j as isModelI18nSkipped, g as getWebBuilderI18nEntryId, s as setModelI18nSkipped } from "./i18n-BYR3l48y.js";
+import { a as getPageLayoutSlot, g as getGrapesPageId, h as getGrapesPageName, o as layoutTargetMatchesPage, d as cloneLayoutSettings } from "./layoutSettings-D4SYUMri.js";
+const _hoisted_1$4 = { class: "wb-font-trigger-label" };
+const _hoisted_2$4 = { class: "wb-fp-search" };
+const _hoisted_3$4 = { class: "wb-fp-tabs" };
+const _hoisted_4$4 = ["onClick"];
+const _hoisted_5$4 = {
+  key: 0,
+  class: "wb-fp-empty"
+};
+const _hoisted_6$4 = ["onClick"];
+const _hoisted_7$4 = {
+  key: 0,
+  class: "wb-fp-empty"
+};
+const _hoisted_8$4 = {
+  key: 0,
+  class: "wb-fp-loading"
+};
+const _hoisted_9$4 = ["data-google-name", "onClick"];
+const _hoisted_10$4 = {
+  key: 0,
+  class: "wb-fp-sentinel-hint"
+};
+const _hoisted_11$4 = {
+  key: 0,
+  class: "wb-fp-empty"
+};
+const _hoisted_12$4 = {
+  key: 1,
+  class: "wb-fp-end"
+};
+const PAGE_SIZE$1 = 40;
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "FontFamilySelect",
+  props: {
+    modelValue: {},
+    grapes: {}
+  },
+  emits: ["update:modelValue", "select"],
+  setup(__props, { emit: __emit }) {
+    var _a;
+    const SYSTEM_FONTS = [
+      { value: "", label: "默认" },
+      { value: "Arial, sans-serif", label: "Arial" },
+      { value: '"Helvetica Neue", Helvetica, Arial, sans-serif', label: "Helvetica Neue" },
+      { value: "Verdana, Geneva, sans-serif", label: "Verdana" },
+      { value: '"Trebuchet MS", Helvetica, sans-serif', label: "Trebuchet MS" },
+      { value: "Tahoma, Geneva, sans-serif", label: "Tahoma" },
+      { value: 'Georgia, "Times New Roman", serif', label: "Georgia" },
+      { value: '"Times New Roman", Times, serif', label: "Times New Roman" },
+      { value: 'Palatino, "Palatino Linotype", "Book Antiqua", serif', label: "Palatino" },
+      { value: '"Courier New", Courier, monospace', label: "Courier New" },
+      { value: '"Lucida Console", Monaco, monospace', label: "Lucida Console" },
+      { value: '"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif', label: "PingFang SC（苹方）" },
+      { value: '"Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif', label: "微软雅黑" },
+      { value: '"Source Han Sans CN", "Noto Sans CJK SC", "PingFang SC", sans-serif', label: "思源黑体" },
+      { value: '"Source Han Serif CN", "Noto Serif CJK SC", serif', label: "思源宋体" },
+      { value: '"STSong", "SimSun", serif', label: "宋体" },
+      { value: '"STKaiti", "KaiTi", serif', label: "楷体" }
+    ];
+    const props = __props;
+    const emit = __emit;
+    const visible = ref(false);
+    const activeTab = ref("installed");
+    const search = ref("");
+    const editorRef = shallowRef(null);
+    const fontManager = useFontManager();
+    const { allFonts, loading, load, search: searchFonts } = useGoogleFonts();
+    (_a = props.grapes) == null ? void 0 : _a.onInit((editor) => {
+      editorRef.value = editor;
+    });
+    const canvasDoc = computed(() => {
+      var _a2, _b, _c;
+      try {
+        return ((_c = (_b = (_a2 = editorRef.value) == null ? void 0 : _a2.Canvas) == null ? void 0 : _b.getDocument) == null ? void 0 : _c.call(_b)) ?? null;
+      } catch {
+        return null;
+      }
+    });
+    const currentLabel = computed(() => {
+      const val = props.modelValue;
+      if (!val)
+        return "默认字体";
+      const installed = fontManager.installedFonts.value.find((font) => font.cssFamily === val);
+      if (installed)
+        return installed.family;
+      const systemFont = SYSTEM_FONTS.find((font) => font.value === val);
+      if (systemFont)
+        return systemFont.label;
+      const googleFont = allFonts.value.find((font) => font.cssFamily === val);
+      if (googleFont)
+        return googleFont.family;
+      return val.replace(/^["']?([^"',]+)["']?.*$/, "$1").trim();
+    });
+    const filteredSystemFonts = computed(() => {
+      const q = search.value.toLowerCase();
+      return q ? SYSTEM_FONTS.filter((font) => font.label.toLowerCase().includes(q)) : SYSTEM_FONTS;
+    });
+    const filteredGoogleFonts = computed(() => searchFonts(search.value));
+    const displayCount = ref(PAGE_SIZE$1);
+    const listRef = ref(null);
+    const sentinelRef = ref(null);
+    watch(search, () => {
+      displayCount.value = PAGE_SIZE$1;
+    });
+    watch(activeTab, () => {
+      displayCount.value = PAGE_SIZE$1;
+    });
+    const visibleGoogleFonts = computed(
+      () => filteredGoogleFonts.value.slice(0, displayCount.value)
+    );
+    const hasMore = computed(
+      () => displayCount.value < filteredGoogleFonts.value.length
+    );
+    let sentinelObserver = null;
+    function setupSentinelObserver() {
+      sentinelObserver == null ? void 0 : sentinelObserver.disconnect();
+      if (!sentinelRef.value)
+        return;
+      sentinelObserver = new IntersectionObserver(
+        (entries) => {
+          var _a2;
+          if (((_a2 = entries[0]) == null ? void 0 : _a2.isIntersecting) && hasMore.value) {
+            displayCount.value += PAGE_SIZE$1;
+          }
+        },
+        { root: listRef.value, threshold: 0.1 }
+      );
+      sentinelObserver.observe(sentinelRef.value);
+    }
+    watch([activeTab, visibleGoogleFonts], async () => {
+      if (activeTab.value !== "google")
+        return;
+      await nextTick();
+      setupSentinelObserver();
+    }, { flush: "post" });
+    onBeforeUnmount(() => sentinelObserver == null ? void 0 : sentinelObserver.disconnect());
+    const fontPreviewObserver = ref(null);
+    function setupFontPreviewObserver() {
+      var _a2;
+      (_a2 = fontPreviewObserver.value) == null ? void 0 : _a2.disconnect();
+      fontPreviewObserver.value = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            var _a3;
+            if (!entry.isIntersecting)
+              return;
+            const googleName = entry.target.dataset.googleName;
+            if (googleName) {
+              injectGoogleFontCss(googleName, canvasDoc.value);
+              (_a3 = fontPreviewObserver.value) == null ? void 0 : _a3.unobserve(entry.target);
+            }
+          });
+        },
+        { root: listRef.value, rootMargin: "100px", threshold: 0 }
+      );
+    }
+    async function observeFontItems() {
+      var _a2;
+      await nextTick();
+      if (!fontPreviewObserver.value)
+        return;
+      const items = ((_a2 = listRef.value) == null ? void 0 : _a2.querySelectorAll("[data-google-name]")) ?? [];
+      items.forEach((el) => {
+        var _a3;
+        return (_a3 = fontPreviewObserver.value) == null ? void 0 : _a3.observe(el);
+      });
+    }
+    watch(visibleGoogleFonts, async () => {
+      if (activeTab.value !== "google")
+        return;
+      await nextTick();
+      observeFontItems();
+    }, { flush: "post" });
+    onBeforeUnmount(() => {
+      var _a2;
+      return (_a2 = fontPreviewObserver.value) == null ? void 0 : _a2.disconnect();
+    });
+    async function onShow() {
+      displayCount.value = PAGE_SIZE$1;
+      if (allFonts.value.length === 0)
+        await load();
+      if (activeTab.value === "google") {
+        await nextTick();
+        setupFontPreviewObserver();
+        observeFontItems();
+        setupSentinelObserver();
+      }
+    }
+    watch(activeTab, async (tab) => {
+      if (tab !== "google")
+        return;
+      await nextTick();
+      setupFontPreviewObserver();
+      observeFontItems();
+      setupSentinelObserver();
+    });
+    function selectSystemFont(font) {
+      emit("update:modelValue", font.value);
+      emit("select", {
+        value: font.value,
+        source: "system"
+      });
+      visible.value = false;
+      search.value = "";
+    }
+    function selectInstalledFont(font) {
+      emit("update:modelValue", font.cssFamily);
+      emit("select", {
+        value: font.cssFamily,
+        source: "installed",
+        family: font.family,
+        googleName: font.googleName
+      });
+      visible.value = false;
+      search.value = "";
+    }
+    function selectGoogleFont(family, googleName, cssFamily) {
+      injectGoogleFontCss(googleName, canvasDoc.value);
+      emit("update:modelValue", cssFamily);
+      emit("select", {
+        value: cssFamily,
+        source: "google",
+        family,
+        googleName
+      });
+      visible.value = false;
+      search.value = "";
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElPopover), {
+        visible: visible.value,
+        "onUpdate:visible": _cache[7] || (_cache[7] = ($event) => visible.value = $event),
+        placement: "bottom-start",
+        width: 270,
+        trigger: "click",
+        "popper-class": "wb-font-popover",
+        onShow
+      }, {
+        reference: withCtx(() => [
+          createElementVNode("button", {
+            class: "wb-font-trigger",
+            style: normalizeStyle(_ctx.modelValue ? { fontFamily: _ctx.modelValue } : {}),
+            type: "button"
+          }, [
+            createElementVNode("span", _hoisted_1$4, toDisplayString(currentLabel.value), 1),
+            createVNode(unref(Icon), {
+              icon: "lucide:chevron-down",
+              size: 12,
+              class: "text-gray-400 flex-shrink-0"
+            })
+          ], 4)
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: "wb-font-panel",
+            onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {
+            }, ["stop"])),
+            onPointerdown: _cache[6] || (_cache[6] = withModifiers(() => {
+            }, ["stop"]))
+          }, [
+            createElementVNode("div", _hoisted_2$4, [
+              createVNode(unref(ElInput), {
+                modelValue: search.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
+                size: "small",
+                placeholder: "搜索字体...",
+                clearable: ""
+              }, {
+                prefix: withCtx(() => [
+                  createVNode(unref(Icon), {
+                    icon: "lucide:search",
+                    size: 12
+                  })
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ]),
+            createElementVNode("div", _hoisted_3$4, [
+              createElementVNode("button", {
+                class: normalizeClass(["wb-fp-tab", { "wb-fp-tab--active": activeTab.value === "installed" }]),
+                type: "button",
+                onClick: _cache[1] || (_cache[1] = ($event) => activeTab.value = "installed")
+              }, " 已安装 ", 2),
+              createElementVNode("button", {
+                class: normalizeClass(["wb-fp-tab", { "wb-fp-tab--active": activeTab.value === "system" }]),
+                type: "button",
+                onClick: _cache[2] || (_cache[2] = ($event) => activeTab.value = "system")
+              }, " 系统字体 ", 2),
+              createElementVNode("button", {
+                class: normalizeClass(["wb-fp-tab", { "wb-fp-tab--active": activeTab.value === "google" }]),
+                type: "button",
+                onClick: _cache[3] || (_cache[3] = ($event) => activeTab.value = "google")
+              }, " Google 字体 ", 2)
+            ]),
+            createElementVNode("div", {
+              ref_key: "listRef",
+              ref: listRef,
+              class: "wb-fp-list"
+            }, [
+              activeTab.value === "installed" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createElementVNode("button", {
+                  class: normalizeClass(["wb-fp-item", { "wb-fp-item--active": !_ctx.modelValue }]),
+                  type: "button",
+                  onClick: _cache[4] || (_cache[4] = ($event) => selectSystemFont({ value: "" }))
+                }, _cache[8] || (_cache[8] = [
+                  createElementVNode("span", { class: "wb-fp-name" }, "默认字体", -1)
+                ]), 2),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(fontManager).installedFonts.value, (font) => {
+                  return openBlock(), createElementBlock("button", {
+                    key: font.family,
+                    class: normalizeClass(["wb-fp-item", { "wb-fp-item--active": _ctx.modelValue === font.cssFamily }]),
+                    type: "button",
+                    onClick: ($event) => selectInstalledFont(font)
+                  }, [
+                    createElementVNode("span", {
+                      class: "wb-fp-name",
+                      style: normalizeStyle({ fontFamily: font.cssFamily })
+                    }, toDisplayString(font.family), 5),
+                    createElementVNode("span", {
+                      class: "wb-fp-preview",
+                      style: normalizeStyle({ fontFamily: font.cssFamily })
+                    }, " Aa ", 4)
+                  ], 10, _hoisted_4$4);
+                }), 128)),
+                unref(fontManager).installedFonts.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$4, " 暂无已安装字体，请在「全局设置 → 字体管理」中安装 ")) : createCommentVNode("", true)
+              ], 64)) : activeTab.value === "system" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(filteredSystemFonts.value, (font) => {
+                  return openBlock(), createElementBlock("button", {
+                    key: font.value,
+                    class: normalizeClass(["wb-fp-item", { "wb-fp-item--active": _ctx.modelValue === font.value }]),
+                    type: "button",
+                    onClick: ($event) => selectSystemFont(font)
+                  }, [
+                    createElementVNode("span", {
+                      class: "wb-fp-name",
+                      style: normalizeStyle(font.value ? { fontFamily: font.value } : {})
+                    }, toDisplayString(font.label), 5),
+                    font.value ? (openBlock(), createElementBlock("span", {
+                      key: 0,
+                      class: "wb-fp-preview",
+                      style: normalizeStyle({ fontFamily: font.value })
+                    }, " Aa ", 4)) : createCommentVNode("", true)
+                  ], 10, _hoisted_6$4);
+                }), 128)),
+                filteredSystemFonts.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_7$4, "无匹配字体")) : createCommentVNode("", true)
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_8$4, [
+                  createVNode(unref(Icon), {
+                    icon: "lucide:loader-2",
+                    class: "animate-spin",
+                    size: 16
+                  }),
+                  _cache[9] || (_cache[9] = createElementVNode("span", null, "加载字体列表...", -1))
+                ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(visibleGoogleFonts.value, (font) => {
+                    return openBlock(), createElementBlock("button", {
+                      key: font.family,
+                      class: normalizeClass(["wb-fp-item", { "wb-fp-item--active": _ctx.modelValue === font.cssFamily }]),
+                      type: "button",
+                      "data-google-name": font.googleName,
+                      onClick: ($event) => selectGoogleFont(font.family, font.googleName, font.cssFamily)
+                    }, [
+                      createElementVNode("span", {
+                        class: "wb-fp-name",
+                        style: normalizeStyle({ fontFamily: font.cssFamily })
+                      }, toDisplayString(font.family), 5),
+                      createElementVNode("span", {
+                        class: "wb-fp-preview",
+                        style: normalizeStyle({ fontFamily: font.cssFamily })
+                      }, " Aa ", 4)
+                    ], 10, _hoisted_9$4);
+                  }), 128)),
+                  createElementVNode("div", {
+                    ref_key: "sentinelRef",
+                    ref: sentinelRef,
+                    class: "wb-fp-sentinel"
+                  }, [
+                    hasMore.value ? (openBlock(), createElementBlock("span", _hoisted_10$4, [
+                      createVNode(unref(Icon), {
+                        icon: "lucide:loader-2",
+                        class: "animate-spin",
+                        size: 13
+                      })
+                    ])) : createCommentVNode("", true)
+                  ], 512),
+                  !hasMore.value && filteredGoogleFonts.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_11$4, " 无匹配字体 ")) : createCommentVNode("", true),
+                  !hasMore.value && filteredGoogleFonts.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_12$4, " 共 " + toDisplayString(filteredGoogleFonts.value.length) + " 个字体 ", 1)) : createCommentVNode("", true)
+                ], 64))
+              ], 64))
+            ], 512)
+          ], 32)
+        ]),
+        _: 1
+      }, 8, ["visible"]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const FontFamilySelect = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-e45386ba"]]);
+const _hoisted_1$3 = { class: "font-manager" };
+const _hoisted_2$3 = { class: "fm-header" };
+const _hoisted_3$3 = { class: "flex items-center gap-1.5" };
+const _hoisted_4$3 = { class: "text-[10px] text-gray-400" };
+const _hoisted_5$3 = { class: "fm-global" };
+const _hoisted_6$3 = { class: "fm-section-title" };
+const _hoisted_7$3 = { class: "fm-delivery" };
+const _hoisted_8$3 = ["aria-checked"];
+const _hoisted_9$3 = { class: "fm-tabs" };
+const _hoisted_10$3 = {
+  key: 0,
+  class: "fm-search"
+};
+const _hoisted_11$3 = {
+  key: 1,
+  class: "fm-list"
+};
+const _hoisted_12$3 = {
+  key: 0,
+  class: "fm-empty"
+};
+const _hoisted_13$3 = ["onClick"];
+const _hoisted_14$3 = { class: "fm-font-meta" };
+const _hoisted_15$3 = ["onClick"];
+const _hoisted_16$3 = {
+  class: "fm-icon-btn text-gray-400",
+  type: "button"
+};
+const _hoisted_17$3 = {
+  key: 0,
+  class: "fm-variants"
+};
+const _hoisted_18$3 = { class: "fm-variant-grid" };
+const _hoisted_19$3 = ["checked", "onChange"];
+const _hoisted_20$3 = { class: "fm-variant-text" };
+const _hoisted_21$3 = {
+  key: 0,
+  class: "fm-loading"
+};
+const _hoisted_22$3 = ["data-preview-font"];
+const _hoisted_23$3 = { class: "fm-browse-row" };
+const _hoisted_24$3 = { class: "fm-font-category" };
+const _hoisted_25$1 = {
+  key: 0,
+  class: "fm-installed-badge",
+  type: "button",
+  disabled: ""
+};
+const _hoisted_26$1 = ["onClick"];
+const _hoisted_27$1 = {
+  key: 0,
+  class: "text-gray-400"
+};
+const _hoisted_28$1 = {
+  key: 0,
+  class: "fm-empty"
+};
+const _hoisted_29$1 = {
+  key: 1,
+  class: "fm-end"
+};
+const PAGE_SIZE = 30;
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "FontManagerPanel",
+  props: {
+    grapes: {},
+    hostUi: {},
+    globalFontFamily: {},
+    fontDelivery: {}
+  },
+  emits: ["select-global-font", "reset-global-font", "update:font-delivery"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const fontManager = useFontManager();
+    const { installedFonts, googleFonts } = fontManager;
+    const activeView = ref("installed");
+    const search = ref("");
+    const expandedFamily = ref(null);
+    const isLocalFontDelivery = computed({
+      get: () => props.fontDelivery === "local",
+      set: (value) => {
+        emit("update:font-delivery", value ? "local" : "remote");
+      }
+    });
+    const { allFonts, loading, load } = googleFonts;
+    async function switchToBrowse() {
+      activeView.value = "browse";
+      if (allFonts.value.length === 0)
+        await load();
+    }
+    const filteredBrowseFonts = computed(() => {
+      const q = search.value.toLowerCase();
+      let fonts = allFonts.value;
+      if (q) {
+        fonts = fonts.filter(
+          (font) => font.family.toLowerCase().includes(q) || font.category.toLowerCase().includes(q)
+        );
+      }
+      return fonts;
+    });
+    const displayCount = ref(PAGE_SIZE);
+    const listRef = ref(null);
+    const sentinelRef = ref(null);
+    watch(search, () => {
+      displayCount.value = PAGE_SIZE;
+    });
+    watch(activeView, () => {
+      displayCount.value = PAGE_SIZE;
+    });
+    const visibleBrowseFonts = computed(
+      () => filteredBrowseFonts.value.slice(0, displayCount.value)
+    );
+    const hasMore = computed(
+      () => displayCount.value < filteredBrowseFonts.value.length
+    );
+    let sentinelObserver = null;
+    function setupSentinelObserver() {
+      sentinelObserver == null ? void 0 : sentinelObserver.disconnect();
+      if (!sentinelRef.value || !listRef.value)
+        return;
+      sentinelObserver = new IntersectionObserver(
+        (entries) => {
+          var _a;
+          if (((_a = entries[0]) == null ? void 0 : _a.isIntersecting) && hasMore.value) {
+            displayCount.value += PAGE_SIZE;
+          }
+        },
+        { root: listRef.value, threshold: 0.1 }
+      );
+      sentinelObserver.observe(sentinelRef.value);
+    }
+    watch([activeView, visibleBrowseFonts], async () => {
+      if (activeView.value !== "browse")
+        return;
+      await nextTick();
+      setupSentinelObserver();
+    }, { flush: "post" });
+    onBeforeUnmount(() => sentinelObserver == null ? void 0 : sentinelObserver.disconnect());
+    const previewObserver = ref(null);
+    const loadedPreviews = ref(/* @__PURE__ */ new Set());
+    function setupPreviewObserver() {
+      var _a;
+      (_a = previewObserver.value) == null ? void 0 : _a.disconnect();
+      previewObserver.value = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            var _a2;
+            if (!entry.isIntersecting)
+              return;
+            const googleName = entry.target.dataset.previewFont;
+            if (googleName && !loadedPreviews.value.has(googleName)) {
+              loadedPreviews.value.add(googleName);
+              const href = `https://fonts.googleapis.com/css2?family=${googleName}:wght@400;700&display=swap`;
+              if (!document.head.querySelector(`link[data-wb-font-preview="${googleName}"]`)) {
+                const link = document.createElement("link");
+                link.rel = "stylesheet";
+                link.setAttribute("data-wb-font-preview", googleName);
+                link.href = href;
+                document.head.appendChild(link);
+              }
+              (_a2 = previewObserver.value) == null ? void 0 : _a2.unobserve(entry.target);
+            }
+          });
+        },
+        { root: listRef.value, rootMargin: "200px", threshold: 0 }
+      );
+    }
+    async function observePreviewItems() {
+      var _a;
+      await nextTick();
+      if (!previewObserver.value)
+        return;
+      const items = ((_a = listRef.value) == null ? void 0 : _a.querySelectorAll("[data-preview-font]")) ?? [];
+      items.forEach((el) => {
+        var _a2;
+        return (_a2 = previewObserver.value) == null ? void 0 : _a2.observe(el);
+      });
+    }
+    watch(visibleBrowseFonts, async () => {
+      if (activeView.value !== "browse")
+        return;
+      await nextTick();
+      observePreviewItems();
+    }, { flush: "post" });
+    watch(activeView, async (view) => {
+      if (view !== "browse")
+        return;
+      await nextTick();
+      setupPreviewObserver();
+      observePreviewItems();
+      setupSentinelObserver();
+    });
+    onBeforeUnmount(() => {
+      var _a;
+      return (_a = previewObserver.value) == null ? void 0 : _a.disconnect();
+    });
+    function handleInstall(font) {
+      fontManager.installFont(font);
+    }
+    function handleGlobalFontSelect(payload) {
+      emit("select-global-font", payload);
+    }
+    function resetGlobalFont() {
+      emit("reset-global-font");
+    }
+    async function handleRemove(font) {
+      var _a;
+      const confirmed = await ((_a = props.hostUi) == null ? void 0 : _a.confirm({
+        message: `确定要卸载字体 "${font.family}" 吗？已使用该字体的组件将回退到默认字体。`,
+        title: "卸载字体",
+        confirmText: "卸载",
+        cancelText: "取消"
+      }));
+      if (!confirmed)
+        return;
+      fontManager.removeFont(font.family);
+      expandedFamily.value = null;
+    }
+    function toggleVariant(font, variant) {
+      const has = font.variants.includes(variant);
+      let newVariants;
+      if (has) {
+        newVariants = font.variants.filter((v) => v !== variant);
+        if (newVariants.length === 0)
+          newVariants = ["regular"];
+      } else {
+        newVariants = [...font.variants, variant];
+      }
+      fontManager.updateVariants(font.family, newVariants);
+    }
+    function toggleExpand(family) {
+      expandedFamily.value = expandedFamily.value === family ? null : family;
+    }
+    function variantLabel(variant) {
+      const map = {
+        "100": "Thin",
+        "200": "Extra Light",
+        "300": "Light",
+        "regular": "Regular",
+        "500": "Medium",
+        "600": "Semi Bold",
+        "700": "Bold",
+        "800": "Extra Bold",
+        "900": "Black"
+      };
+      return map[variant] ?? variant;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        createElementVNode("div", _hoisted_2$3, [
+          createElementVNode("div", _hoisted_3$3, [
+            createVNode(unref(Icon), {
+              icon: "lucide:type",
+              size: 14,
+              class: "text-gray-500"
+            }),
+            _cache[3] || (_cache[3] = createElementVNode("span", { class: "text-sm font-semibold text-gray-700" }, "字体管理", -1))
+          ]),
+          createElementVNode("span", _hoisted_4$3, toDisplayString(unref(installedFonts).length) + " 个已安装", 1)
+        ]),
+        createElementVNode("div", _hoisted_5$3, [
+          createElementVNode("div", _hoisted_6$3, [
+            _cache[4] || (_cache[4] = createElementVNode("span", null, "全局字体", -1)),
+            props.globalFontFamily ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              class: "fm-reset-btn",
+              type: "button",
+              onClick: resetGlobalFont
+            }, " 恢复默认 ")) : createCommentVNode("", true)
+          ]),
+          createVNode(FontFamilySelect, {
+            "model-value": props.globalFontFamily,
+            grapes: props.grapes,
+            onSelect: handleGlobalFontSelect
+          }, null, 8, ["model-value", "grapes"]),
+          _cache[5] || (_cache[5] = createElementVNode("div", { class: "fm-helper" }, " 应用于页面正文、表单控件和 H1-H6 默认样式，最终通过 CSS 变量输出。 ", -1))
+        ]),
+        createElementVNode("div", _hoisted_7$3, [
+          _cache[7] || (_cache[7] = createElementVNode("div", { class: "fm-delivery-copy" }, [
+            createElementVNode("span", { class: "fm-delivery-title" }, "发布字体本地化"),
+            createElementVNode("span", { class: "fm-delivery-desc" }, "开启后发布时下载 Google Fonts 并引用本地字体文件")
+          ], -1)),
+          createElementVNode("button", {
+            class: normalizeClass(["fm-switch", { "fm-switch--active": isLocalFontDelivery.value }]),
+            type: "button",
+            role: "switch",
+            "aria-checked": isLocalFontDelivery.value,
+            title: "发布字体本地化",
+            onClick: _cache[0] || (_cache[0] = ($event) => isLocalFontDelivery.value = !isLocalFontDelivery.value)
+          }, _cache[6] || (_cache[6] = [
+            createElementVNode("span", { class: "fm-switch-thumb" }, null, -1)
+          ]), 10, _hoisted_8$3)
+        ]),
+        createElementVNode("div", _hoisted_9$3, [
+          createElementVNode("button", {
+            class: normalizeClass(["fm-tab", { "fm-tab--active": activeView.value === "installed" }]),
+            type: "button",
+            onClick: _cache[1] || (_cache[1] = ($event) => activeView.value = "installed")
+          }, " 已安装 ", 2),
+          createElementVNode("button", {
+            class: normalizeClass(["fm-tab", { "fm-tab--active": activeView.value === "browse" }]),
+            type: "button",
+            onClick: switchToBrowse
+          }, " 浏览字体 ", 2)
+        ]),
+        activeView.value === "browse" ? (openBlock(), createElementBlock("div", _hoisted_10$3, [
+          createVNode(unref(ElInput), {
+            modelValue: search.value,
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => search.value = $event),
+            size: "small",
+            placeholder: "搜索 Google 字体...",
+            clearable: ""
+          }, {
+            prefix: withCtx(() => [
+              createVNode(unref(Icon), {
+                icon: "lucide:search",
+                size: 12
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ])) : createCommentVNode("", true),
+        activeView.value === "installed" ? (openBlock(), createElementBlock("div", _hoisted_11$3, [
+          unref(installedFonts).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_12$3, [
+            createVNode(unref(Icon), {
+              icon: "lucide:type",
+              size: 24,
+              class: "text-gray-300 mb-2"
+            }),
+            _cache[9] || (_cache[9] = createElementVNode("p", { class: "text-xs text-gray-400" }, "暂无已安装字体", -1)),
+            createElementVNode("button", {
+              class: "fm-browse-btn",
+              type: "button",
+              onClick: switchToBrowse
+            }, [
+              createVNode(unref(Icon), {
+                icon: "lucide:plus",
+                size: 12
+              }),
+              _cache[8] || (_cache[8] = createTextVNode(" 浏览并安装字体 "))
+            ])
+          ])) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(installedFonts), (font) => {
+            return openBlock(), createElementBlock("div", {
+              key: font.family,
+              class: "fm-installed-item"
+            }, [
+              createElementVNode("div", {
+                class: "fm-installed-row",
+                onClick: ($event) => toggleExpand(font.family)
+              }, [
+                createElementVNode("span", {
+                  class: "fm-font-name",
+                  style: normalizeStyle({ fontFamily: font.cssFamily })
+                }, toDisplayString(font.family), 5),
+                createElementVNode("span", _hoisted_14$3, toDisplayString(font.variants.length) + " 个变体", 1),
+                createElementVNode("button", {
+                  class: "fm-icon-btn text-gray-400 hover:text-red-500",
+                  title: "卸载",
+                  type: "button",
+                  onClick: withModifiers(($event) => handleRemove(font), ["stop"])
+                }, [
+                  createVNode(unref(Icon), {
+                    icon: "lucide:trash-2",
+                    size: 13
+                  })
+                ], 8, _hoisted_15$3),
+                createElementVNode("button", _hoisted_16$3, [
+                  createVNode(unref(Icon), {
+                    icon: expandedFamily.value === font.family ? "lucide:chevron-up" : "lucide:chevron-down",
+                    size: 13
+                  }, null, 8, ["icon"])
+                ])
+              ], 8, _hoisted_13$3),
+              expandedFamily.value === font.family ? (openBlock(), createElementBlock("div", _hoisted_17$3, [
+                _cache[10] || (_cache[10] = createElementVNode("div", { class: "fm-variant-label" }, "选择字重变体：", -1)),
+                createElementVNode("div", _hoisted_18$3, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(fontManager).ALL_VARIANTS, (variant) => {
+                    return openBlock(), createElementBlock("label", {
+                      key: variant,
+                      class: "fm-variant-checkbox"
+                    }, [
+                      createElementVNode("input", {
+                        type: "checkbox",
+                        checked: font.variants.includes(variant),
+                        onChange: ($event) => toggleVariant(font, variant)
+                      }, null, 40, _hoisted_19$3),
+                      createElementVNode("span", _hoisted_20$3, toDisplayString(variantLabel(variant)), 1)
+                    ]);
+                  }), 128))
+                ]),
+                createElementVNode("div", {
+                  class: "fm-preview-text",
+                  style: normalizeStyle({ fontFamily: font.cssFamily, fontWeight: 400 })
+                }, " The quick brown fox jumps over the lazy dog ", 4),
+                createElementVNode("div", {
+                  class: "fm-preview-text",
+                  style: normalizeStyle({ fontFamily: font.cssFamily, fontWeight: 700 })
+                }, " The quick brown fox jumps over the lazy dog ", 4)
+              ])) : createCommentVNode("", true)
+            ]);
+          }), 128))
+        ])) : (openBlock(), createElementBlock("div", {
+          key: 2,
+          ref_key: "listRef",
+          ref: listRef,
+          class: "fm-list fm-browse-list"
+        }, [
+          unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_21$3, [
+            createVNode(unref(Icon), {
+              icon: "lucide:loader-2",
+              class: "animate-spin",
+              size: 16
+            }),
+            _cache[11] || (_cache[11] = createElementVNode("span", null, "加载字体列表...", -1))
+          ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(visibleBrowseFonts.value, (font) => {
+              return openBlock(), createElementBlock("div", {
+                key: font.family,
+                class: "fm-browse-item",
+                "data-preview-font": font.googleName
+              }, [
+                createElementVNode("div", _hoisted_23$3, [
+                  createElementVNode("span", {
+                    class: "fm-font-name",
+                    style: normalizeStyle({ fontFamily: font.cssFamily })
+                  }, toDisplayString(font.family), 5),
+                  createElementVNode("span", _hoisted_24$3, toDisplayString(font.category), 1),
+                  unref(fontManager).isInstalled(font.family) ? (openBlock(), createElementBlock("button", _hoisted_25$1, [
+                    createVNode(unref(Icon), {
+                      icon: "lucide:check",
+                      size: 11
+                    }),
+                    _cache[12] || (_cache[12] = createTextVNode(" 已安装 "))
+                  ])) : (openBlock(), createElementBlock("button", {
+                    key: 1,
+                    class: "fm-install-btn",
+                    type: "button",
+                    onClick: ($event) => handleInstall(font)
+                  }, [
+                    createVNode(unref(Icon), {
+                      icon: "lucide:plus",
+                      size: 11
+                    }),
+                    _cache[13] || (_cache[13] = createTextVNode(" 安装 "))
+                  ], 8, _hoisted_26$1))
+                ])
+              ], 8, _hoisted_22$3);
+            }), 128)),
+            createElementVNode("div", {
+              ref_key: "sentinelRef",
+              ref: sentinelRef,
+              class: "fm-sentinel"
+            }, [
+              hasMore.value ? (openBlock(), createElementBlock("span", _hoisted_27$1, [
+                createVNode(unref(Icon), {
+                  icon: "lucide:loader-2",
+                  class: "animate-spin",
+                  size: 13
+                })
+              ])) : createCommentVNode("", true)
+            ], 512),
+            !hasMore.value && filteredBrowseFonts.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_28$1, _cache[14] || (_cache[14] = [
+              createElementVNode("p", { class: "text-xs text-gray-400" }, "无匹配字体", -1)
+            ]))) : createCommentVNode("", true),
+            !hasMore.value && filteredBrowseFonts.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_29$1, " 共 " + toDisplayString(filteredBrowseFonts.value.length) + " 个字体 ", 1)) : createCommentVNode("", true)
+          ], 64))
+        ], 512))
+      ]);
+    };
+  }
+});
+const FontManagerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-d94b5511"]]);
+const _hoisted_1$2 = { class: "wb-i18n-panel" };
+const _hoisted_2$2 = { class: "wb-i18n-panel__header" };
+const _hoisted_3$2 = { class: "wb-i18n-panel__meta" };
+const _hoisted_4$2 = { class: "wb-i18n-controls" };
+const _hoisted_5$2 = { class: "wb-i18n-field" };
+const _hoisted_6$2 = ["disabled", "aria-expanded"];
+const _hoisted_7$2 = { class: "wb-i18n-select-ui__value" };
+const _hoisted_8$2 = {
+  key: 0,
+  class: "wb-i18n-select-ui__menu",
+  role: "listbox"
+};
+const _hoisted_9$2 = ["aria-selected", "onClick"];
+const _hoisted_10$2 = { class: "wb-i18n-field" };
+const _hoisted_11$2 = ["disabled", "aria-expanded"];
+const _hoisted_12$2 = { class: "wb-i18n-select-ui__value" };
+const _hoisted_13$2 = {
+  key: 0,
+  class: "wb-i18n-select-ui__menu",
+  role: "listbox"
+};
+const _hoisted_14$2 = ["aria-selected", "onClick"];
+const _hoisted_15$2 = {
+  key: 0,
+  class: "wb-i18n-field__tip"
+};
+const _hoisted_16$2 = { class: "wb-i18n-summary" };
+const _hoisted_17$2 = {
+  key: 1,
+  class: "wb-i18n-error"
+};
+const _hoisted_18$2 = { class: "wb-i18n-panel__body" };
+const _hoisted_19$2 = {
+  key: 0,
+  class: "wb-i18n-empty"
+};
+const _hoisted_20$2 = {
+  key: 1,
+  class: "wb-i18n-empty"
+};
+const _hoisted_21$2 = {
+  key: 2,
+  class: "wb-i18n-empty"
+};
+const _hoisted_22$2 = { class: "wb-i18n-field wb-i18n-picker" };
+const _hoisted_23$2 = ["aria-expanded"];
+const _hoisted_24$2 = { class: "wb-i18n-select-ui__value" };
+const _hoisted_25 = {
+  key: 0,
+  class: "wb-i18n-select-ui__menu wb-i18n-select-ui__menu--tall",
+  role: "listbox"
+};
+const _hoisted_26 = ["aria-selected", "onClick"];
+const _hoisted_27 = {
+  key: 0,
+  class: "wb-i18n-editor"
+};
+const _hoisted_28 = { class: "wb-i18n-editor__bar" };
+const _hoisted_29 = { class: "wb-i18n-editor__title" };
+const _hoisted_30 = {
+  key: 0,
+  class: "wb-i18n-dirty"
+};
+const _hoisted_31 = { class: "wb-i18n-translation-stack" };
+const _hoisted_32 = { class: "wb-i18n-translation-block" };
+const _hoisted_33 = ["value"];
+const _hoisted_34 = { class: "wb-i18n-translation-block wb-i18n-translation-block--target" };
+const _hoisted_35 = ["value"];
+const _hoisted_36 = { class: "wb-i18n-actions wb-i18n-actions--inline" };
+const _hoisted_37 = ["disabled"];
+const _hoisted_38 = { class: "wb-i18n-actions wb-i18n-panel__footer" };
+const _hoisted_39 = ["disabled"];
+const _hoisted_40 = ["disabled"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "I18nPanel",
+  props: {
+    manager: {},
+    selectedComponent: {},
+    selectedRevision: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const fieldLabels = {
+      text: "文本",
+      html: "HTML",
+      alt: "图片 Alt",
+      title: "Title",
+      placeholder: "Placeholder",
+      "aria-label": "ARIA Label",
+      "seo.title": "SEO 标题",
+      "seo.description": "SEO 描述",
+      "seo.keywords": "SEO 关键词"
+    };
+    const statusLabels = {
+      translated: "已翻译",
+      missing: "缺失",
+      stale: "源文已变更",
+      pending: "待翻译",
+      source_changed: "源文已变更",
+      draft: "草稿",
+      empty: "空内容",
+      error: "翻译失败"
+    };
+    const statusClass = {
+      translated: "wb-i18n-status--translated",
+      missing: "wb-i18n-status--missing",
+      stale: "wb-i18n-status--stale",
+      pending: "wb-i18n-status--missing",
+      source_changed: "wb-i18n-status--stale",
+      draft: "wb-i18n-status--stale",
+      empty: "wb-i18n-status--missing",
+      error: "wb-i18n-status--error"
+    };
+    const engineLabels = {
+      qwen_mt: "Qwen-MT",
+      qwen: "Qwen-MT",
+      qwenmt: "Qwen-MT",
+      deepseek: "DeepSeek",
+      deepl: "DeepL",
+      tencent_tmt: "腾讯云 TMT",
+      volcengine_mt: "火山引擎翻译"
+    };
+    const selectedEntryId = ref("");
+    const openSelectId = ref("");
+    const providerOptions = ref([]);
+    const providerLoading = ref(false);
+    const providerConfigError = ref("");
+    const noTranslateRevision = ref(0);
+    const selectedComponent = computed(() => unref(props.selectedComponent));
+    const selectedRevision = computed(
+      () => props.selectedRevision === void 0 ? 0 : unref(props.selectedRevision)
+    );
+    const selectedKeyDependency = computed(
+      () => {
+        var _a;
+        return `${props.manager.sourceRevision.value}:${selectedRevision.value}:${((_a = selectedComponent.value) == null ? void 0 : _a.cid) ?? ""}`;
+      }
+    );
+    const selectedKeys = computed(() => {
+      if (!selectedKeyDependency.value && !selectedComponent.value)
+        return /* @__PURE__ */ new Set();
+      return collectI18nKeysFromModel(selectedComponent.value, { includeAncestors: true });
+    });
+    const hasSelectedComponent = computed(() => Boolean(selectedComponent.value));
+    const selectedNoTranslate = computed(() => {
+      void noTranslateRevision.value;
+      void selectedKeyDependency.value;
+      return isModelI18nSkipped(selectedComponent.value);
+    });
+    const scopedEntries = computed(() => {
+      if (hasSelectedComponent.value && !selectedKeys.value.size)
+        return [];
+      const keys = selectedKeys.value;
+      if (!keys.size)
+        return props.manager.entries.value;
+      const selectedEntries = props.manager.entries.value.filter((entry) => keys.has(entry.key));
+      return selectedEntries.length ? selectedEntries : props.manager.entries.value;
+    });
+    const visibleEntries = computed(() => scopedEntries.value);
+    const selectedOnly = computed(() => hasSelectedComponent.value);
+    const dirtyIds = computed(() => new Set(props.manager.dirtyEntryIds.value));
+    const isActionableEntry = (entry) => entry.status === "missing" || entry.status === "stale" || entry.status === "error";
+    const activeEntry = computed(() => {
+      return visibleEntries.value.find(
+        (entry) => getWebBuilderI18nEntryId(entry) === selectedEntryId.value
+      ) || visibleEntries.value[0] || null;
+    });
+    const hasEnabledProvider = computed(() => providerOptions.value.length > 0);
+    const visibleActionableEntries = computed(() => visibleEntries.value.filter(isActionableEntry));
+    const hasActionableEntries = computed(() => props.manager.actionableEntries.value.length > 0);
+    const localeOptions = computed(() => {
+      const languages = props.manager.targetLanguages.value;
+      if (!languages.length) {
+        return [{ key: "empty-locale", label: "未启用目标语言", value: "" }];
+      }
+      return languages.map((lang) => ({
+        key: lang.value,
+        label: lang.label,
+        value: lang.value
+      }));
+    });
+    const localeSelectDisabled = computed(() => !props.manager.targetLanguages.value.length);
+    const providerSelectDisabled = computed(() => providerLoading.value || !providerOptions.value.length);
+    const providerSelectOptions = computed(() => {
+      if (providerLoading.value) {
+        return [{ key: "provider-loading", label: "加载启用引擎...", value: "" }];
+      }
+      if (!providerOptions.value.length) {
+        return [{ key: "provider-empty", label: "未启用翻译引擎", value: "" }];
+      }
+      return providerOptions.value;
+    });
+    const entryOptions = computed(
+      () => visibleEntries.value.map((entry) => ({
+        key: getWebBuilderI18nEntryId(entry),
+        label: entryOptionLabel(entry),
+        value: getWebBuilderI18nEntryId(entry)
+      }))
+    );
+    const sourceLanguageLabel = computed(() => {
+      var _a;
+      const current = props.manager.sourceLocale.value;
+      return ((_a = props.manager.languages.value.find((lang) => lang.value === current)) == null ? void 0 : _a.label) || current || "源语言";
+    });
+    const targetLanguageLabel = computed(() => {
+      var _a;
+      const current = props.manager.locale.value;
+      return ((_a = props.manager.languages.value.find((lang) => lang.value === current)) == null ? void 0 : _a.label) || current || "目标语言";
+    });
+    const selectedOptionLabel = (options, value, fallback) => {
+      var _a;
+      return ((_a = options.find((option) => option.value === value)) == null ? void 0 : _a.label) || fallback;
+    };
+    const selectedLocaleLabel = computed(
+      () => selectedOptionLabel(localeOptions.value, props.manager.locale.value, "选择语言")
+    );
+    const selectedProviderLabel = computed(
+      () => selectedOptionLabel(providerSelectOptions.value, props.manager.provider.value, "选择翻译引擎")
+    );
+    const selectedEntryLabel = computed(
+      () => selectedOptionLabel(entryOptions.value, selectedEntryId.value, "选择片段")
+    );
+    const sourcePreview = (entry) => {
+      const source = `${entry.source ?? ""}`.trim();
+      return source.length > 320 ? `${source.slice(0, 320)}...` : source;
+    };
+    const entryOptionLabel = (entry) => {
+      const source = sourcePreview(entry).replace(/\s+/g, " ");
+      const label = fieldLabel(entry.field);
+      const text = source.length > 64 ? `${source.slice(0, 64)}...` : source;
+      return `${label} - ${text || entry.label || entry.key}`;
+    };
+    const fieldLabel = (field) => {
+      const known = fieldLabels[field];
+      if (known)
+        return known;
+      if (`${field}`.startsWith("prop:"))
+        return "组件配置";
+      if (`${field}`.startsWith("attr:"))
+        return "属性";
+      return `${field}`;
+    };
+    const providerLabel = (config) => {
+      const engineType = `${config.engineType || ""}`;
+      const engineLabel = engineLabels[engineType] || engineType || "翻译引擎";
+      return config.model ? `${engineLabel} / ${config.model}` : engineLabel;
+    };
+    const loadProviderOptions = async () => {
+      providerLoading.value = true;
+      providerConfigError.value = "";
+      try {
+        const configs = await props.manager.loadProviderConfigs();
+        providerOptions.value = configs.filter((config) => config.engineType).map((config) => ({
+          key: `${config.id ?? config.engineType}-${config.model ?? ""}`,
+          label: providerLabel(config),
+          value: `${config.engineType}`
+        }));
+        if (!providerOptions.value.length) {
+          props.manager.setProvider("");
+          providerConfigError.value = "未启用翻译引擎，请先到翻译配置中启用";
+          return;
+        }
+        if (!providerOptions.value.some((option) => option.value === props.manager.provider.value)) {
+          props.manager.setProvider(providerOptions.value[0].value);
+        }
+      } catch (error) {
+        providerOptions.value = [];
+        props.manager.setProvider("");
+        providerConfigError.value = (error == null ? void 0 : error.message) || "加载启用翻译引擎失败";
+      } finally {
+        providerLoading.value = false;
+      }
+    };
+    const handleMachineTranslate = async () => {
+      if (!hasEnabledProvider.value) {
+        props.manager.hostUi.message.warning(providerConfigError.value || "请先启用翻译引擎");
+        return;
+      }
+      await props.manager.machineTranslate("missing");
+      if (props.manager.lastError.value) {
+        props.manager.hostUi.message.warning(props.manager.lastError.value);
+      }
+    };
+    const handleMachineTranslateActive = async () => {
+      const entry = activeEntry.value;
+      if (!entry)
+        return;
+      if (!hasEnabledProvider.value) {
+        props.manager.hostUi.message.warning(providerConfigError.value || "请先启用翻译引擎");
+        return;
+      }
+      await props.manager.machineTranslateEntries([entry]);
+      if (props.manager.lastError.value) {
+        props.manager.hostUi.message.warning(props.manager.lastError.value);
+      }
+    };
+    const handleNextTodo = () => {
+      const candidates = visibleActionableEntries.value.length ? visibleEntries.value : props.manager.entries.value;
+      if (!candidates.length)
+        return;
+      const currentIndex = candidates.findIndex(
+        (entry) => getWebBuilderI18nEntryId(entry) === selectedEntryId.value
+      );
+      const next = candidates.slice(currentIndex + 1).find(isActionableEntry) || candidates.find(isActionableEntry);
+      if (!next)
+        return;
+      selectedEntryId.value = getWebBuilderI18nEntryId(next);
+      props.manager.selectEntryComponent(next);
+    };
+    const handleRefresh = async () => {
+      await loadProviderOptions();
+      props.manager.refreshSourceEntries();
+      await props.manager.loadBundle();
+    };
+    const toggleSelect = (selectId, disabled = false) => {
+      if (disabled)
+        return;
+      openSelectId.value = openSelectId.value === selectId ? "" : selectId;
+    };
+    const closeSelect = () => {
+      openSelectId.value = "";
+    };
+    const handleLocaleSelect = (value) => {
+      if (!value || localeSelectDisabled.value)
+        return;
+      props.manager.setLocale(value);
+      closeSelect();
+    };
+    const handleProviderSelect = (value) => {
+      if (!value || providerSelectDisabled.value)
+        return;
+      props.manager.setProvider(value);
+      closeSelect();
+    };
+    const handleEntrySelect = (value) => {
+      if (!value)
+        return;
+      selectedEntryId.value = value;
+      closeSelect();
+    };
+    const handleToggleNoTranslate = () => {
+      const nextSkipped = !selectedNoTranslate.value;
+      if (!setModelI18nSkipped(selectedComponent.value, nextSkipped))
+        return;
+      noTranslateRevision.value += 1;
+      props.manager.refreshSourceEntries();
+      props.manager.hostUi.message.success(nextSkipped ? "已设为不翻译" : "已恢复翻译");
+    };
+    const handleActiveTranslationInput = (event) => {
+      const entry = activeEntry.value;
+      if (!entry)
+        return;
+      props.manager.setTranslation(entry, event.target.value);
+    };
+    onMounted(async () => {
+      await props.manager.loadLanguages();
+      await loadProviderOptions();
+      await props.manager.loadBundle();
+    });
+    watch(
+      visibleEntries,
+      (entries) => {
+        const ids = entries.map(getWebBuilderI18nEntryId);
+        if (!ids.length) {
+          selectedEntryId.value = "";
+          return;
+        }
+        if (!selectedEntryId.value || !ids.includes(selectedEntryId.value)) {
+          selectedEntryId.value = ids[0];
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => {
+        var _a;
+        return [((_a = selectedComponent.value) == null ? void 0 : _a.cid) ?? "", selectedRevision.value];
+      },
+      ([cid]) => {
+        if (!cid)
+          return;
+        props.manager.refreshSourceEntries();
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("aside", _hoisted_1$2, [
+        createElementVNode("div", _hoisted_2$2, [
+          createElementVNode("div", null, [
+            _cache[3] || (_cache[3] = createElementVNode("div", { class: "wb-i18n-panel__title" }, "片段翻译", -1)),
+            createElementVNode("div", _hoisted_3$2, toDisplayString(selectedOnly.value ? "当前选中组件" : "全部可翻译片段"), 1)
+          ]),
+          createElementVNode("button", {
+            class: "wb-i18n-icon-btn",
+            type: "button",
+            title: "刷新",
+            onClick: handleRefresh
+          }, " ↻ ")
+        ]),
+        createElementVNode("div", _hoisted_4$2, [
+          createElementVNode("div", _hoisted_5$2, [
+            _cache[5] || (_cache[5] = createElementVNode("span", null, "语言", -1)),
+            createElementVNode("div", {
+              class: normalizeClass(["wb-i18n-select-ui", { "is-open": openSelectId.value === "locale", "is-disabled": localeSelectDisabled.value }])
+            }, [
+              createElementVNode("button", {
+                class: "wb-i18n-select-ui__trigger",
+                type: "button",
+                disabled: localeSelectDisabled.value,
+                "aria-haspopup": "listbox",
+                "aria-expanded": openSelectId.value === "locale",
+                onClick: _cache[0] || (_cache[0] = ($event) => toggleSelect("locale", localeSelectDisabled.value))
+              }, [
+                createElementVNode("span", _hoisted_7$2, toDisplayString(selectedLocaleLabel.value), 1),
+                _cache[4] || (_cache[4] = createElementVNode("span", { class: "wb-i18n-select-ui__chevron" }, "⌄", -1))
+              ], 8, _hoisted_6$2),
+              openSelectId.value === "locale" ? (openBlock(), createElementBlock("div", _hoisted_8$2, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(localeOptions.value, (option) => {
+                  return openBlock(), createElementBlock("button", {
+                    key: option.key,
+                    class: normalizeClass(["wb-i18n-select-ui__option", { "is-selected": option.value === _ctx.manager.locale.value }]),
+                    type: "button",
+                    role: "option",
+                    "aria-selected": option.value === _ctx.manager.locale.value,
+                    onClick: ($event) => handleLocaleSelect(option.value)
+                  }, toDisplayString(option.label), 11, _hoisted_9$2);
+                }), 128))
+              ])) : createCommentVNode("", true)
+            ], 2)
+          ]),
+          createElementVNode("div", _hoisted_10$2, [
+            _cache[7] || (_cache[7] = createElementVNode("span", null, "翻译引擎", -1)),
+            createElementVNode("div", {
+              class: normalizeClass(["wb-i18n-select-ui", { "is-open": openSelectId.value === "provider", "is-disabled": providerSelectDisabled.value }])
+            }, [
+              createElementVNode("button", {
+                class: "wb-i18n-select-ui__trigger",
+                type: "button",
+                disabled: providerSelectDisabled.value,
+                "aria-haspopup": "listbox",
+                "aria-expanded": openSelectId.value === "provider",
+                onClick: _cache[1] || (_cache[1] = ($event) => toggleSelect("provider", providerSelectDisabled.value))
+              }, [
+                createElementVNode("span", _hoisted_12$2, toDisplayString(selectedProviderLabel.value), 1),
+                _cache[6] || (_cache[6] = createElementVNode("span", { class: "wb-i18n-select-ui__chevron" }, "⌄", -1))
+              ], 8, _hoisted_11$2),
+              openSelectId.value === "provider" ? (openBlock(), createElementBlock("div", _hoisted_13$2, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(providerSelectOptions.value, (option) => {
+                  return openBlock(), createElementBlock("button", {
+                    key: option.key,
+                    class: normalizeClass(["wb-i18n-select-ui__option", { "is-selected": option.value === _ctx.manager.provider.value }]),
+                    type: "button",
+                    role: "option",
+                    "aria-selected": option.value === _ctx.manager.provider.value,
+                    onClick: ($event) => handleProviderSelect(option.value)
+                  }, toDisplayString(option.label), 11, _hoisted_14$2);
+                }), 128))
+              ])) : createCommentVNode("", true)
+            ], 2),
+            providerConfigError.value ? (openBlock(), createElementBlock("span", _hoisted_15$2, toDisplayString(providerConfigError.value), 1)) : createCommentVNode("", true)
+          ])
+        ]),
+        createElementVNode("div", _hoisted_16$2, [
+          createElementVNode("span", null, toDisplayString(_ctx.manager.translatedCount.value) + " 已翻译", 1),
+          createElementVNode("span", null, toDisplayString(_ctx.manager.missingCount.value) + " 缺失", 1)
+        ]),
+        hasSelectedComponent.value ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          class: "wb-i18n-btn wb-i18n-btn--secondary wb-i18n-no-translate-btn",
+          type: "button",
+          onClick: handleToggleNoTranslate
+        }, toDisplayString(selectedNoTranslate.value ? "恢复翻译此组件" : "不翻译此组件"), 1)) : createCommentVNode("", true),
+        _ctx.manager.lastError.value ? (openBlock(), createElementBlock("div", _hoisted_17$2, toDisplayString(_ctx.manager.lastError.value), 1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_18$2, [
+          _ctx.manager.loading.value ? (openBlock(), createElementBlock("div", _hoisted_19$2, "加载翻译 bundle...")) : selectedNoTranslate.value ? (openBlock(), createElementBlock("div", _hoisted_20$2, " 当前组件已排除翻译。 ")) : !visibleEntries.value.length ? (openBlock(), createElementBlock("div", _hoisted_21$2, " 当前项目没有可翻译文本。 ")) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+            createElementVNode("div", _hoisted_22$2, [
+              _cache[9] || (_cache[9] = createElementVNode("span", null, "片段", -1)),
+              createElementVNode("div", {
+                class: normalizeClass(["wb-i18n-select-ui", { "is-open": openSelectId.value === "entry" }])
+              }, [
+                createElementVNode("button", {
+                  class: "wb-i18n-select-ui__trigger",
+                  type: "button",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": openSelectId.value === "entry",
+                  onClick: _cache[2] || (_cache[2] = ($event) => toggleSelect("entry"))
+                }, [
+                  createElementVNode("span", _hoisted_24$2, toDisplayString(selectedEntryLabel.value), 1),
+                  _cache[8] || (_cache[8] = createElementVNode("span", { class: "wb-i18n-select-ui__chevron" }, "⌄", -1))
+                ], 8, _hoisted_23$2),
+                openSelectId.value === "entry" ? (openBlock(), createElementBlock("div", _hoisted_25, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(entryOptions.value, (option) => {
+                    return openBlock(), createElementBlock("button", {
+                      key: option.key,
+                      class: normalizeClass(["wb-i18n-select-ui__option", { "is-selected": option.value === selectedEntryId.value }]),
+                      type: "button",
+                      role: "option",
+                      "aria-selected": option.value === selectedEntryId.value,
+                      onClick: ($event) => handleEntrySelect(option.value)
+                    }, toDisplayString(option.label), 11, _hoisted_26);
+                  }), 128))
+                ])) : createCommentVNode("", true)
+              ], 2)
+            ]),
+            activeEntry.value ? (openBlock(), createElementBlock("section", _hoisted_27, [
+              createElementVNode("div", _hoisted_28, [
+                createElementVNode("span", _hoisted_29, toDisplayString(fieldLabel(activeEntry.value.field)), 1),
+                createElementVNode("span", {
+                  class: normalizeClass(["wb-i18n-status", statusClass[activeEntry.value.status || "missing"]])
+                }, toDisplayString(statusLabels[activeEntry.value.status || "missing"]), 3),
+                dirtyIds.value.has(unref(getWebBuilderI18nEntryId)(activeEntry.value)) ? (openBlock(), createElementBlock("span", _hoisted_30, " 未保存 ")) : createCommentVNode("", true)
+              ]),
+              createElementVNode("div", _hoisted_31, [
+                createElementVNode("label", _hoisted_32, [
+                  createElementVNode("span", null, "From " + toDisplayString(sourceLanguageLabel.value), 1),
+                  createElementVNode("textarea", {
+                    class: "wb-i18n-textarea wb-i18n-textarea--source",
+                    value: activeEntry.value.source,
+                    rows: "3",
+                    readonly: ""
+                  }, null, 8, _hoisted_33)
+                ]),
+                createElementVNode("label", _hoisted_34, [
+                  createElementVNode("span", null, "To " + toDisplayString(targetLanguageLabel.value), 1),
+                  createElementVNode("textarea", {
+                    class: "wb-i18n-textarea",
+                    value: activeEntry.value.translation,
+                    rows: "4",
+                    placeholder: "输入译文，或使用翻译引擎生成",
+                    onInput: handleActiveTranslationInput
+                  }, null, 40, _hoisted_35)
+                ])
+              ]),
+              createElementVNode("div", _hoisted_36, [
+                createElementVNode("button", {
+                  class: "wb-i18n-btn",
+                  type: "button",
+                  disabled: _ctx.manager.translating.value || _ctx.manager.loading.value || !activeEntry.value || !hasEnabledProvider.value,
+                  onClick: handleMachineTranslateActive
+                }, toDisplayString(_ctx.manager.translating.value ? "翻译中..." : "AI 生成"), 9, _hoisted_37)
+              ])
+            ])) : createCommentVNode("", true)
+          ], 64))
+        ]),
+        createElementVNode("div", _hoisted_38, [
+          createElementVNode("button", {
+            class: "wb-i18n-btn wb-i18n-btn--secondary",
+            type: "button",
+            disabled: _ctx.manager.translating.value || _ctx.manager.loading.value || !_ctx.manager.missingCount.value || !hasEnabledProvider.value,
+            onClick: handleMachineTranslate
+          }, " 自动翻译缺失项 ", 8, _hoisted_39),
+          createElementVNode("button", {
+            class: "wb-i18n-btn wb-i18n-btn--secondary",
+            type: "button",
+            disabled: !hasActionableEntries.value,
+            onClick: handleNextTodo
+          }, " 下一个待处理 ", 8, _hoisted_40)
+        ])
+      ]);
+    };
+  }
+});
+const I18nPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-a53e606f"]]);
+const _hoisted_1$1 = { class: "layout-panel" };
+const _hoisted_2$1 = { class: "layout-panel__header" };
+const _hoisted_3$1 = { class: "layout-panel__title" };
+const _hoisted_4$1 = { class: "layout-panel__description" };
+const _hoisted_5$1 = { class: "layout-panel__actions" };
+const _hoisted_6$1 = ["disabled"];
+const _hoisted_7$1 = {
+  key: 0,
+  class: "layout-panel__note"
+};
+const _hoisted_8$1 = {
+  key: 1,
+  class: "layout-panel__note"
+};
+const _hoisted_9$1 = { class: "layout-rules" };
+const _hoisted_10$1 = ["onClick"];
+const _hoisted_11$1 = { class: "min-w-0 flex-1" };
+const _hoisted_12$1 = { class: "layout-rule-card__title" };
+const _hoisted_13$1 = { class: "layout-rule-card__meta" };
+const _hoisted_14$1 = { class: "layout-rule-card__badge" };
+const _hoisted_15$1 = {
+  key: 0,
+  class: "layout-rule-card__body"
+};
+const _hoisted_16$1 = { class: "layout-form-field" };
+const _hoisted_17$1 = ["value", "disabled", "onInput"];
+const _hoisted_18$1 = { class: "layout-form-row" };
+const _hoisted_19$1 = { class: "layout-form-field layout-form-field--grow" };
+const _hoisted_20$1 = { class: "layout-form-field layout-form-field--inline" };
+const _hoisted_21$1 = { class: "layout-form-field" };
+const _hoisted_22$1 = { class: "layout-rule-card__hint" };
+const _hoisted_23$1 = { class: "layout-rule-card__footer" };
+const _hoisted_24$1 = {
+  key: 1,
+  class: "layout-panel__empty"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "LayoutPanel",
+  props: {
+    pages: {},
+    layoutSettings: {},
+    setLayoutSettings: { type: Function },
+    loadRulePageOptions: { type: Function },
+    ensureRulesEditable: { type: Function },
+    getRulesLockState: { type: Function }
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const expandedRuleId = ref(null);
+    const selectablePages = ref([]);
+    const loadingPages = ref(false);
+    const currentLayoutPage = computed(() => {
+      return props.pages.find((page) => !!getPageLayoutSlot(page)) ?? null;
+    });
+    const currentSlot = computed(() => {
+      return currentLayoutPage.value ? getPageLayoutSlot(currentLayoutPage.value) : null;
+    });
+    const currentLayoutId = computed(() => {
+      return currentLayoutPage.value ? getGrapesPageId(currentLayoutPage.value) : "";
+    });
+    const currentLayoutName = computed(() => {
+      return currentLayoutPage.value ? getGrapesPageName(currentLayoutPage.value) : "";
+    });
+    const rulesLockState = computed(() => {
+      var _a;
+      return ((_a = props.getRulesLockState) == null ? void 0 : _a.call(props)) ?? {};
+    });
+    const rulesReadonly = computed(
+      () => ["conflict", "error", "acquiring"].includes(`${rulesLockState.value.status ?? ""}`)
+    );
+    const activeRules = computed(() => {
+      const slotKey = currentSlot.value;
+      const layoutPage = currentLayoutPage.value;
+      if (!slotKey || !layoutPage)
+        return [];
+      return props.layoutSettings[slotKey].rules.filter((rule) => layoutTargetMatchesPage(rule.layoutId, layoutPage));
+    });
+    async function loadSelectablePages() {
+      loadingPages.value = true;
+      try {
+        selectablePages.value = await props.loadRulePageOptions();
+      } catch (error) {
+        console.warn("[WebBuilder] 页面规则候选页加载失败", error);
+        selectablePages.value = [];
+      } finally {
+        loadingPages.value = false;
+      }
+    }
+    async function ensureRulesAccess(silent = false) {
+      if (!props.ensureRulesEditable)
+        return true;
+      return props.ensureRulesEditable(silent);
+    }
+    function updateSettings(mutator) {
+      const next = cloneLayoutSettings(props.layoutSettings);
+      mutator(next);
+      props.setLayoutSettings(next);
+      emit("change");
+    }
+    function normalizeRuleOrder(rules) {
+      rules.forEach((rule, index) => {
+        rule.priority = index;
+      });
+    }
+    function createRule(slotKey, layoutId, index) {
+      return {
+        id: `${slotKey}-rule-${Date.now().toString(36)}-${index + 1}`,
+        name: `规则 ${index + 1}`,
+        layoutId,
+        matchMode: "exclude",
+        pageIds: [],
+        enabled: true,
+        priority: index
+      };
+    }
+    async function addRule() {
+      const slotKey = currentSlot.value;
+      const layoutId = currentLayoutId.value;
+      if (!slotKey || !layoutId)
+        return;
+      if (!await ensureRulesAccess())
+        return;
+      let createdRuleId = "";
+      updateSettings((next) => {
+        const rules = next[slotKey].rules;
+        const currentLayoutRules = rules.filter((rule2) => `${rule2.layoutId ?? ""}`.trim() === layoutId);
+        const rule = createRule(slotKey, layoutId, currentLayoutRules.length);
+        createdRuleId = rule.id;
+        rules.push(rule);
+        normalizeRuleOrder(rules);
+      });
+      expandedRuleId.value = createdRuleId;
+    }
+    async function removeRule(ruleId) {
+      const slotKey = currentSlot.value;
+      if (!slotKey)
+        return;
+      if (!await ensureRulesAccess())
+        return;
+      updateSettings((next) => {
+        next[slotKey].rules = next[slotKey].rules.filter((rule) => rule.id !== ruleId);
+        normalizeRuleOrder(next[slotKey].rules);
+      });
+      if (expandedRuleId.value === ruleId) {
+        expandedRuleId.value = null;
+      }
+    }
+    async function patchRule(ruleId, patch) {
+      const slotKey = currentSlot.value;
+      if (!slotKey)
+        return;
+      if (!await ensureRulesAccess(true))
+        return;
+      updateSettings((next) => {
+        const rule = next[slotKey].rules.find((item) => item.id === ruleId);
+        if (!rule)
+          return;
+        Object.assign(rule, patch);
+      });
+    }
+    async function updateRuleName(ruleId, value) {
+      await patchRule(ruleId, { name: value });
+    }
+    async function updateRuleMatchMode(ruleId, value) {
+      await patchRule(ruleId, { matchMode: value });
+    }
+    async function updateRulePages(ruleId, value) {
+      await patchRule(ruleId, {
+        pageIds: value.map((item) => `${item ?? ""}`.trim()).filter(Boolean)
+      });
+    }
+    async function updateRuleEnabled(ruleId, value) {
+      await patchRule(ruleId, { enabled: value });
+    }
+    function getRuleDisplayName(rule, index) {
+      var _a;
+      return ((_a = rule.name) == null ? void 0 : _a.trim()) || `规则 ${index + 1}`;
+    }
+    function getRuleModeLabel(rule) {
+      return rule.matchMode === "exclude" ? "排除页面" : "指定页面";
+    }
+    function getRuleScopeText(rule) {
+      const selectedCount = rule.pageIds.length;
+      if (rule.matchMode === "include") {
+        return selectedCount > 0 ? `命中 ${selectedCount} 个页面` : "未选择页面，规则暂不生效";
+      }
+      return selectedCount > 0 ? `排除 ${selectedCount} 个页面` : "除已排除页面外全部命中";
+    }
+    function toggleRule(ruleId) {
+      expandedRuleId.value = expandedRuleId.value === ruleId ? null : ruleId;
+    }
+    onMounted(() => {
+      loadSelectablePages();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        currentSlot.value && currentLayoutId.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("div", _hoisted_2$1, [
+            createElementVNode("div", _hoisted_3$1, toDisplayString(currentLayoutName.value || currentLayoutId.value), 1),
+            createElementVNode("div", _hoisted_4$1, toDisplayString(currentSlot.value === "header" ? "Header 规则配置" : "Footer 规则配置"), 1)
+          ]),
+          createElementVNode("div", _hoisted_5$1, [
+            createElementVNode("button", {
+              type: "button",
+              class: "layout-action-button",
+              disabled: rulesReadonly.value,
+              onClick: addRule
+            }, [
+              createVNode(unref(Icon), {
+                icon: "material-symbols-light:rule-rounded",
+                size: 16
+              }),
+              _cache[1] || (_cache[1] = createElementVNode("span", null, "新增规则", -1))
+            ], 8, _hoisted_6$1)
+          ]),
+          rulesLockState.value.message ? (openBlock(), createElementBlock("div", _hoisted_7$1, toDisplayString(rulesLockState.value.message), 1)) : activeRules.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_8$1, " 当前没有命中规则，页面不会显示该布局。添加规则后才会生效。 ")) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_9$1, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(activeRules.value, (rule, index) => {
+              return openBlock(), createElementBlock("div", {
+                key: rule.id,
+                class: "layout-rule-card"
+              }, [
+                createElementVNode("button", {
+                  type: "button",
+                  class: "layout-rule-card__summary",
+                  onClick: ($event) => toggleRule(rule.id)
+                }, [
+                  createElementVNode("div", _hoisted_11$1, [
+                    createElementVNode("div", _hoisted_12$1, toDisplayString(getRuleDisplayName(rule, index)), 1),
+                    createElementVNode("div", _hoisted_13$1, toDisplayString(getRuleScopeText(rule)), 1)
+                  ]),
+                  createElementVNode("div", _hoisted_14$1, toDisplayString(getRuleModeLabel(rule)), 1),
+                  createVNode(unref(Icon), {
+                    class: normalizeClass(["layout-rule-card__chevron", { "layout-rule-card__chevron--open": expandedRuleId.value === rule.id }]),
+                    icon: "lucide:chevron-down",
+                    size: 16
+                  }, null, 8, ["class"])
+                ], 8, _hoisted_10$1),
+                expandedRuleId.value === rule.id ? (openBlock(), createElementBlock("div", _hoisted_15$1, [
+                  createElementVNode("label", _hoisted_16$1, [
+                    _cache[2] || (_cache[2] = createElementVNode("span", { class: "layout-form-field__label" }, "规则名称", -1)),
+                    createElementVNode("input", {
+                      value: rule.name || "",
+                      class: "layout-input",
+                      type: "text",
+                      disabled: rulesReadonly.value,
+                      onInput: ($event) => updateRuleName(rule.id, $event.target.value)
+                    }, null, 40, _hoisted_17$1)
+                  ]),
+                  createElementVNode("div", _hoisted_18$1, [
+                    createElementVNode("label", _hoisted_19$1, [
+                      _cache[3] || (_cache[3] = createElementVNode("span", { class: "layout-form-field__label" }, "匹配模式", -1)),
+                      createVNode(unref(ElSelect), {
+                        "model-value": rule.matchMode,
+                        class: "w-full",
+                        disabled: rulesReadonly.value,
+                        "onUpdate:modelValue": (value) => updateRuleMatchMode(rule.id, value)
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(ElOption), {
+                            label: "排除选中页面，其它页面生效",
+                            value: "exclude"
+                          }),
+                          createVNode(unref(ElOption), {
+                            label: "仅选中页面生效",
+                            value: "include"
+                          })
+                        ]),
+                        _: 2
+                      }, 1032, ["model-value", "disabled", "onUpdate:modelValue"])
+                    ]),
+                    createElementVNode("label", _hoisted_20$1, [
+                      _cache[4] || (_cache[4] = createElementVNode("span", { class: "layout-form-field__label" }, "启用", -1)),
+                      createVNode(unref(ElSwitch), {
+                        "model-value": rule.enabled !== false,
+                        disabled: rulesReadonly.value,
+                        "onUpdate:modelValue": (value) => updateRuleEnabled(rule.id, Boolean(value))
+                      }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"])
+                    ])
+                  ]),
+                  createElementVNode("label", _hoisted_21$1, [
+                    _cache[5] || (_cache[5] = createElementVNode("span", { class: "layout-form-field__label" }, "页面多选", -1)),
+                    createVNode(unref(ElSelect), {
+                      "model-value": rule.pageIds,
+                      class: "w-full",
+                      multiple: "",
+                      filterable: "",
+                      clearable: "",
+                      disabled: rulesReadonly.value || loadingPages.value,
+                      placeholder: "选择页面",
+                      "onUpdate:modelValue": (value) => updateRulePages(rule.id, value)
+                    }, {
+                      default: withCtx(() => [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(selectablePages.value, (option) => {
+                          return openBlock(), createBlock(unref(ElOption), {
+                            key: option.id,
+                            label: option.label,
+                            value: option.id
+                          }, null, 8, ["label", "value"]);
+                        }), 128))
+                      ]),
+                      _: 2
+                    }, 1032, ["model-value", "disabled", "onUpdate:modelValue"])
+                  ]),
+                  createElementVNode("div", _hoisted_22$1, [
+                    rule.matchMode === "exclude" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      createTextVNode(" 排除：除勾选页面外全部生效。不勾选页面时，表示全站生效。 ")
+                    ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      createTextVNode(" 指定：仅在勾选页面生效。 ")
+                    ], 64))
+                  ]),
+                  createElementVNode("div", _hoisted_23$1, [
+                    createVNode(unref(ElPopconfirm), {
+                      title: "确定删除这条规则？",
+                      "confirm-button-text": "删除",
+                      "cancel-button-text": "取消",
+                      onConfirm: ($event) => removeRule(rule.id)
+                    }, {
+                      reference: withCtx(() => [
+                        createElementVNode("button", {
+                          type: "button",
+                          class: "layout-action-button layout-action-button--danger",
+                          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                          }, ["stop"]))
+                        }, [
+                          createVNode(unref(Icon), {
+                            icon: "iconamoon:trash-thin",
+                            size: 16
+                          }),
+                          _cache[6] || (_cache[6] = createElementVNode("span", null, "删除规则", -1))
+                        ])
+                      ]),
+                      _: 2
+                    }, 1032, ["onConfirm"])
+                  ])
+                ])) : createCommentVNode("", true)
+              ]);
+            }), 128))
+          ])
+        ], 64)) : (openBlock(), createElementBlock("div", _hoisted_24$1, " 当前布局页面尚未就绪。 "))
+      ]);
+    };
+  }
+});
+const LayoutPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-558d1955"]]);
+const _hoisted_1 = { class: "layout-panel" };
+const _hoisted_2 = { class: "layout-panel__actions" };
+const _hoisted_3 = ["disabled"];
+const _hoisted_4 = {
+  key: 0,
+  class: "layout-panel__note"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "layout-panel__note"
+};
+const _hoisted_6 = { class: "layout-rules" };
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = { class: "min-w-0 flex-1" };
+const _hoisted_9 = { class: "layout-rule-card__title" };
+const _hoisted_10 = { class: "layout-rule-card__meta" };
+const _hoisted_11 = { class: "layout-rule-card__badge" };
+const _hoisted_12 = {
+  key: 0,
+  class: "layout-rule-card__body"
+};
+const _hoisted_13 = { class: "layout-form-field" };
+const _hoisted_14 = ["value", "disabled", "onInput"];
+const _hoisted_15 = { class: "layout-form-row" };
+const _hoisted_16 = { class: "layout-form-field layout-form-field--grow" };
+const _hoisted_17 = { class: "layout-form-field layout-form-field--inline" };
+const _hoisted_18 = {
+  key: 0,
+  class: "layout-form-field"
+};
+const _hoisted_19 = { class: "layout-form-field__label" };
+const _hoisted_20 = {
+  key: 1,
+  class: "layout-form-field"
+};
+const _hoisted_21 = { class: "layout-form-field__label" };
+const _hoisted_22 = { class: "layout-rule-card__footer" };
+const _hoisted_23 = ["disabled"];
+const _hoisted_24 = {
+  key: 1,
+  class: "layout-panel__empty"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TemplateRulesPanel",
+  props: {
+    currentTemplateType: {},
+    currentRules: {},
+    ensureRulesEditable: { type: Function },
+    getRulesLockState: { type: Function },
+    addRule: { type: Function },
+    patchRule: { type: Function },
+    removeRule: { type: Function },
+    getFieldOptions: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const expandedRuleId = ref(null);
+    const rulesLockState = computed(() => {
+      var _a;
+      return ((_a = props.getRulesLockState) == null ? void 0 : _a.call(props)) ?? {};
+    });
+    const rulesReadonly = computed(
+      () => ["conflict", "error", "acquiring"].includes(`${rulesLockState.value.status ?? ""}`)
+    );
+    const conditionFieldMap = {
+      TEMP_POST_DETAIL: [
+        { key: "postIds", label: "文章 ID", kind: "numbers", placeholder: "输入文章 ID" },
+        { key: "excludePostIds", label: "排除文章 ID", kind: "numbers", placeholder: "输入不包含的文章 ID" },
+        { key: "typeIds", label: "文章类型 ID", kind: "numbers", placeholder: "输入文章类型 ID" },
+        { key: "excludeTypeIds", label: "排除类型 ID", kind: "numbers", placeholder: "输入不包含的文章类型 ID" },
+        { key: "tagIds", label: "标签 ID", kind: "numbers", placeholder: "输入标签 ID" },
+        { key: "templateNames", label: "模板名", kind: "strings", placeholder: "输入模板名" },
+        { key: "publishTimeRange", label: "发布时间范围", kind: "daterange", placeholder: "" }
+      ],
+      TEMP_POST_CATEGORY_LIST: [
+        { key: "categoryIds", label: "文章分类 ID", kind: "numbers", placeholder: "输入分类 ID" },
+        { key: "excludeCategoryIds", label: "排除分类 ID", kind: "numbers", placeholder: "输入不包含的分类 ID" },
+        { key: "rootCategoryIds", label: "根分类 ID", kind: "numbers", placeholder: "输入根分类 ID" },
+        { key: "levels", label: "分类层级", kind: "numbers", placeholder: "输入层级" }
+      ],
+      TEMP_MEDIA_DETAIL: [
+        { key: "resourceIds", label: "媒体资源 ID", kind: "numbers", placeholder: "输入媒体资源 ID" },
+        { key: "excludeResourceIds", label: "排除媒体资源 ID", kind: "numbers", placeholder: "输入不包含的媒体资源 ID" },
+        { key: "categoryIds", label: "媒体分类 ID", kind: "numbers", placeholder: "输入分类 ID" },
+        { key: "excludeCategoryIds", label: "排除分类 ID", kind: "numbers", placeholder: "输入不包含的分类 ID" },
+        { key: "mediaTypes", label: "媒体类型", kind: "strings", placeholder: "输入媒体类型" },
+        { key: "publishTimeRange", label: "发布时间范围", kind: "daterange", placeholder: "" }
+      ],
+      TEMP_MEDIA_CATEGORY_LIST: [
+        { key: "categoryIds", label: "媒体分类 ID", kind: "numbers", placeholder: "输入分类 ID" },
+        { key: "excludeCategoryIds", label: "排除分类 ID", kind: "numbers", placeholder: "输入不包含的分类 ID" }
+      ],
+      TEMP_PRODUCT_DETAIL: [
+        { key: "spuIds", label: "产品 SPU ID", kind: "numbers", placeholder: "输入 SPU ID" },
+        { key: "excludeSpuIds", label: "排除产品 SPU ID", kind: "numbers", placeholder: "输入不包含的 SPU ID" },
+        { key: "categoryIds", label: "产品分类 ID", kind: "numbers", placeholder: "输入分类 ID" },
+        { key: "excludeCategoryIds", label: "排除分类 ID", kind: "numbers", placeholder: "输入不包含的分类 ID" },
+        { key: "brandIds", label: "品牌 ID", kind: "numbers", placeholder: "输入品牌 ID" },
+        { key: "createTimeRange", label: "创建时间范围", kind: "daterange", placeholder: "" }
+      ],
+      TEMP_PRODUCT_CATEGORY_LIST: [
+        { key: "categoryIds", label: "分类 ID", kind: "numbers", placeholder: "输入分类 ID" },
+        { key: "excludeCategoryIds", label: "排除分类 ID", kind: "numbers", placeholder: "输入不包含的分类 ID" },
+        { key: "rootCategoryIds", label: "根分类 ID", kind: "numbers", placeholder: "输入根分类 ID" },
+        { key: "levels", label: "分类层级", kind: "numbers", placeholder: "输入层级" }
+      ]
+    };
+    const activeFields = computed(
+      () => props.currentTemplateType && props.currentTemplateType in conditionFieldMap ? conditionFieldMap[props.currentTemplateType] : []
+    );
+    const isFixedOptionField = (fieldKey) => fieldKey === "levels";
+    const ensureAccess = async (silent = false) => {
+      if (!props.ensureRulesEditable)
+        return true;
+      return props.ensureRulesEditable(silent);
+    };
+    const toggleRule = (ruleId) => {
+      expandedRuleId.value = expandedRuleId.value === ruleId ? null : ruleId;
+    };
+    const getRuleDisplayName = (rule, index) => {
+      var _a;
+      return ((_a = rule.name) == null ? void 0 : _a.trim()) || `规则 ${index + 1}`;
+    };
+    const getConditionSummary = (rule) => {
+      const conditions = rule.conditions || {};
+      const entries = Object.entries(conditions).filter(([, value]) => {
+        if (Array.isArray(value))
+          return value.length > 0;
+        if (value && typeof value === "object") {
+          return !!(`${value.start ?? ""}`.trim() || `${value.end ?? ""}`.trim());
+        }
+        return false;
+      });
+      if (!entries.length)
+        return "空条件，作为兜底规则";
+      return `已配置 ${entries.length} 组匹配条件`;
+    };
+    const updateRuleName = async (ruleId, value) => {
+      var _a;
+      await ((_a = props.patchRule) == null ? void 0 : _a.call(props, ruleId, { name: value }));
+    };
+    const updateRuleEnabled = async (ruleId, value) => {
+      var _a;
+      await ((_a = props.patchRule) == null ? void 0 : _a.call(props, ruleId, { enabled: value }));
+    };
+    const updateRulePriority = async (ruleId, value) => {
+      var _a;
+      await ((_a = props.patchRule) == null ? void 0 : _a.call(props, ruleId, { priority: Number.isFinite(Number(value)) ? Number(value) : 0 }));
+    };
+    const buildNextConditions = (rule, key, value) => ({
+      ...rule.conditions || {},
+      [key]: value
+    });
+    const updateNumberTags = async (rule, key, values) => {
+      var _a;
+      if (!await ensureAccess(true))
+        return;
+      const nextValues = values.map((item) => Number(item)).filter((item) => Number.isFinite(item));
+      await ((_a = props.patchRule) == null ? void 0 : _a.call(props, rule.id, {
+        conditions: buildNextConditions(rule, key, nextValues)
+      }));
+    };
+    const updateStringTags = async (rule, key, values) => {
+      var _a;
+      if (!await ensureAccess(true))
+        return;
+      const nextValues = values.map((item) => `${item ?? ""}`.trim()).filter(Boolean);
+      await ((_a = props.patchRule) == null ? void 0 : _a.call(props, rule.id, {
+        conditions: buildNextConditions(rule, key, nextValues)
+      }));
+    };
+    const updateDateRange = async (rule, key, range) => {
+      var _a;
+      if (!await ensureAccess(true))
+        return;
+      const nextRange = range ? {
+        start: `${range[0] ?? ""}`.trim(),
+        end: `${range[1] ?? ""}`.trim()
+      } : void 0;
+      await ((_a = props.patchRule) == null ? void 0 : _a.call(props, rule.id, {
+        conditions: buildNextConditions(rule, key, nextRange)
+      }));
+    };
+    const getDateRangeValue = (rule, key) => {
+      var _a;
+      const range = (_a = rule.conditions) == null ? void 0 : _a[key];
+      if (!(range == null ? void 0 : range.start) && !(range == null ? void 0 : range.end))
+        return null;
+      return [range.start || "", range.end || ""];
+    };
+    const mergeFieldOptions = (fieldKey, rule) => {
+      var _a;
+      const fetched = props.getFieldOptions ? props.getFieldOptions(props.currentTemplateType, fieldKey) : [];
+      const known = /* @__PURE__ */ new Map();
+      fetched.forEach((option) => {
+        known.set(`${option.value}`, option);
+      });
+      const selected = ((_a = rule.conditions) == null ? void 0 : _a[fieldKey]) || [];
+      selected.forEach((value) => {
+        const key = `${value}`;
+        if (!known.has(key)) {
+          known.set(key, { value, label: `${value}` });
+        }
+      });
+      return Array.from(known.values());
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _ctx.currentTemplateType ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          _cache[8] || (_cache[8] = createElementVNode("div", { class: "layout-panel__header" }, [
+            createElementVNode("div", { class: "layout-panel__title" }, "模板规则"),
+            createElementVNode("div", { class: "layout-panel__description" }, "当前模板的命中规则配置")
+          ], -1)),
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("button", {
+              type: "button",
+              class: "layout-action-button",
+              disabled: rulesReadonly.value,
+              onClick: _cache[0] || (_cache[0] = ($event) => {
+                var _a;
+                return (_a = _ctx.addRule) == null ? void 0 : _a.call(_ctx);
+              })
+            }, [
+              createVNode(unref(Icon), {
+                icon: "lucide:plus",
+                size: 16
+              }),
+              _cache[2] || (_cache[2] = createElementVNode("span", null, "新增规则", -1))
+            ], 8, _hoisted_3)
+          ]),
+          rulesLockState.value.message ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(rulesLockState.value.message), 1)) : _ctx.currentRules.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5, " 当前模板还没有规则，未命中时不会参与渲染。 ")) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_6, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.currentRules, (rule, index) => {
+              return openBlock(), createElementBlock("div", {
+                key: rule.id,
+                class: "layout-rule-card"
+              }, [
+                createElementVNode("button", {
+                  type: "button",
+                  class: "layout-rule-card__summary",
+                  onClick: ($event) => toggleRule(rule.id)
+                }, [
+                  createElementVNode("div", _hoisted_8, [
+                    createElementVNode("div", _hoisted_9, toDisplayString(getRuleDisplayName(rule, index)), 1),
+                    createElementVNode("div", _hoisted_10, toDisplayString(getConditionSummary(rule)), 1)
+                  ]),
+                  createElementVNode("div", _hoisted_11, " 优先级 " + toDisplayString(rule.priority ?? 0), 1),
+                  createVNode(unref(Icon), {
+                    class: normalizeClass(["layout-rule-card__chevron", { "layout-rule-card__chevron--open": expandedRuleId.value === rule.id }]),
+                    icon: "lucide:chevron-down",
+                    size: 16
+                  }, null, 8, ["class"])
+                ], 8, _hoisted_7),
+                expandedRuleId.value === rule.id ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                  createElementVNode("label", _hoisted_13, [
+                    _cache[3] || (_cache[3] = createElementVNode("span", { class: "layout-form-field__label" }, "规则名称", -1)),
+                    createElementVNode("input", {
+                      value: rule.name || "",
+                      class: "layout-input",
+                      type: "text",
+                      disabled: rulesReadonly.value,
+                      onInput: ($event) => updateRuleName(rule.id, $event.target.value)
+                    }, null, 40, _hoisted_14)
+                  ]),
+                  createElementVNode("div", _hoisted_15, [
+                    createElementVNode("label", _hoisted_16, [
+                      _cache[4] || (_cache[4] = createElementVNode("span", { class: "layout-form-field__label" }, "优先级", -1)),
+                      createVNode(unref(ElInputNumber), {
+                        "model-value": rule.priority,
+                        class: "w-full",
+                        min: 0,
+                        step: 10,
+                        disabled: rulesReadonly.value,
+                        "onUpdate:modelValue": (value) => updateRulePriority(rule.id, value)
+                      }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"])
+                    ]),
+                    createElementVNode("label", _hoisted_17, [
+                      _cache[5] || (_cache[5] = createElementVNode("span", { class: "layout-form-field__label" }, "启用", -1)),
+                      createVNode(unref(ElSwitch), {
+                        "model-value": rule.enabled !== false,
+                        disabled: rulesReadonly.value,
+                        "onUpdate:modelValue": (value) => updateRuleEnabled(rule.id, Boolean(value))
+                      }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"])
+                    ])
+                  ]),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(activeFields.value, (field) => {
+                    var _a;
+                    return openBlock(), createElementBlock(Fragment, {
+                      key: field.key
+                    }, [
+                      field.kind !== "daterange" ? (openBlock(), createElementBlock("label", _hoisted_18, [
+                        createElementVNode("span", _hoisted_19, toDisplayString(field.label), 1),
+                        createVNode(unref(ElSelect), {
+                          "model-value": ((_a = rule.conditions) == null ? void 0 : _a[field.key]) || [],
+                          class: "w-full",
+                          multiple: "",
+                          filterable: "",
+                          "allow-create": !isFixedOptionField(field.key),
+                          "default-first-option": "",
+                          "reserve-keyword": false,
+                          disabled: rulesReadonly.value,
+                          placeholder: field.placeholder,
+                          "onUpdate:modelValue": (value) => field.kind === "numbers" ? updateNumberTags(rule, field.key, value) : updateStringTags(rule, field.key, value)
+                        }, {
+                          default: withCtx(() => [
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(mergeFieldOptions(field.key, rule), (item) => {
+                              return openBlock(), createBlock(unref(ElOption), {
+                                key: `${field.key}-${item.value}`,
+                                label: item.label,
+                                value: item.value
+                              }, null, 8, ["label", "value"]);
+                            }), 128))
+                          ]),
+                          _: 2
+                        }, 1032, ["model-value", "allow-create", "disabled", "placeholder", "onUpdate:modelValue"])
+                      ])) : (openBlock(), createElementBlock("label", _hoisted_20, [
+                        createElementVNode("span", _hoisted_21, toDisplayString(field.label), 1),
+                        createVNode(unref(ElDatePicker), {
+                          "model-value": getDateRangeValue(rule, field.key),
+                          class: "w-full",
+                          type: "datetimerange",
+                          "value-format": "YYYY-MM-DD HH:mm:ss",
+                          "range-separator": "至",
+                          "start-placeholder": "开始时间",
+                          "end-placeholder": "结束时间",
+                          disabled: rulesReadonly.value,
+                          "onUpdate:modelValue": (value) => updateDateRange(rule, field.key, value)
+                        }, null, 8, ["model-value", "disabled", "onUpdate:modelValue"])
+                      ]))
+                    ], 64);
+                  }), 128)),
+                  _cache[7] || (_cache[7] = createElementVNode("div", { class: "layout-rule-card__hint" }, " 条件之间为 AND，同一字段内多个值为 OR；`排除*` 字段命中任一值即视为不匹配。若条件为空，则作为该模板类型的兜底规则。 ", -1)),
+                  createElementVNode("div", _hoisted_22, [
+                    createVNode(unref(ElPopconfirm), {
+                      title: "确认删除当前规则？",
+                      "confirm-button-text": "删除",
+                      "cancel-button-text": "取消",
+                      onConfirm: ($event) => {
+                        var _a;
+                        return (_a = _ctx.removeRule) == null ? void 0 : _a.call(_ctx, rule.id);
+                      }
+                    }, {
+                      reference: withCtx(() => [
+                        createElementVNode("button", {
+                          type: "button",
+                          class: "layout-action-button layout-action-button--danger",
+                          disabled: rulesReadonly.value,
+                          onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                          }, ["stop"]))
+                        }, [
+                          createVNode(unref(Icon), {
+                            icon: "lucide:trash-2",
+                            size: 16
+                          }),
+                          _cache[6] || (_cache[6] = createElementVNode("span", null, "删除规则", -1))
+                        ], 8, _hoisted_23)
+                      ]),
+                      _: 2
+                    }, 1032, ["onConfirm"])
+                  ])
+                ])) : createCommentVNode("", true)
+              ]);
+            }), 128))
+          ])
+        ], 64)) : (openBlock(), createElementBlock("div", _hoisted_24, " 当前资源不支持模板规则配置。 "))
+      ]);
+    };
+  }
+});
+const TemplateRulesPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-033df7a7"]]);
+export {
+  FontManagerPanel,
+  I18nPanel,
+  LayoutPanel,
+  TemplateRulesPanel
+};