@vigilkids/section-renderer-vue 0.0.1 → 0.1.1

package/dist/composables/useInlineEdit.d.ts

@@ -1,4 +1,4 @@
-import { type Ref } from 'vue';
+import type { Ref } from 'vue';
 export interface UseInlineEditOptions {
     /** 是否处于编辑器模式 */
     editorMode: () => boolean;

package/dist/composables/useInlineEdit.mjs

@@ -6,7 +6,8 @@ export function useInlineEdit(options) {
   let originalText = "";
   function selectAllText(el) {
     const selection = window.getSelection();
-    if (!selection) return;
+    if (!selection)
+      return;
     const range = document.createRange();
     range.selectNodeContents(el);
     selection.removeAllRanges();
@@ -35,7 +36,8 @@ export function useInlineEdit(options) {
     onEditEnd?.();
   }
   function buildAttrs(compositeKey, emitFn) {
-    if (!editorMode()) return {};
+    if (!editorMode())
+      return {};
     if (editingKey.value === compositeKey) {
       return {
         contenteditable: "plaintext-only",

package/dist/composables/useLazyRender.mjs

@@ -4,7 +4,8 @@ export function useLazyRender(targetRef, options = {}) {
   const isVisible = ref(typeof window === "undefined" ? ssrEager : false);
   let observer = null;
   onMounted(() => {
-    if (isVisible.value) return;
+    if (isVisible.value)
+      return;
     const el = targetRef.value;
     if (!el) {
       isVisible.value = true;

package/dist/composables/useRegistry.d.ts

@@ -1,5 +1,5 @@
-import type { Component } from 'vue';
 import type { SectionRegistration } from '@vigilkids/section-core';
+import type { Component } from 'vue';
 import { defineAsyncComponent } from 'vue';
 /** Vue 组件工厂函数 */
 type ComponentFactory = () => Promise<{

package/dist/composables/useRegistry.mjs

@@ -1,5 +1,5 @@
-import { defineAsyncComponent } from "vue";
 import { SectionRegistryCore } from "@vigilkids/section-core";
+import { defineAsyncComponent } from "vue";
 import FallbackSection from "../renderer/FallbackSection.vue";
 class VueSectionRegistry {
   core = new SectionRegistryCore();
@@ -8,7 +8,9 @@ class VueSectionRegistry {
   /** 注册 Section 组件（可选 productCode 用于产品级覆盖） */
   register(registration) {
     if (this.frozen) {
-      throw new Error(`[SectionRegistry] Registry is frozen, cannot register "${registration.name}"`);
+      throw new Error(
+        `[SectionRegistry] Registry is frozen, cannot register "${registration.name}"`
+      );
     }
     this.core.register(registration);
     const key = registration.productCode ? `${registration.productCode}:${registration.name}` : registration.name;
@@ -27,7 +29,8 @@ class VueSectionRegistry {
   resolve(type, productCode) {
     if (productCode) {
       const productComponent = this.components.get(`${productCode}:${type}`);
-      if (productComponent) return productComponent;
+      if (productComponent)
+        return productComponent;
     }
     return this.components.get(type) ?? null;
   }

package/dist/composables/useSectionSEO.mjs

@@ -69,7 +69,8 @@ function mapSectionToSchema(section) {
 }
 function generateFAQSchema(section) {
   const blocks = getOrderedBlocks(section);
-  if (blocks.length === 0) return null;
+  if (blocks.length === 0)
+    return null;
   return {
     "@context": "https://schema.org",
     "@type": "FAQPage",
@@ -95,9 +96,12 @@ export function generateSectionJsonLd(sectionsData, options) {
     "name": options.title,
     "description": options.description
   };
-  if (options.url) webPage.url = options.url;
-  if (options.datePublished) webPage.datePublished = options.datePublished;
-  if (options.dateModified) webPage.dateModified = options.dateModified;
+  if (options.url)
+    webPage.url = options.url;
+  if (options.datePublished)
+    webPage.datePublished = options.datePublished;
+  if (options.dateModified)
+    webPage.dateModified = options.dateModified;
   if (options.author) {
     webPage.author = { "@type": "Person", "name": options.author };
   }
@@ -109,7 +113,8 @@ export function generateSectionJsonLd(sectionsData, options) {
   const faqSections = orderedSections.filter((s) => s.type === "faq");
   for (const faq of faqSections) {
     const faqSchema = generateFAQSchema(faq);
-    if (faqSchema) schemas.push(faqSchema);
+    if (faqSchema)
+      schemas.push(faqSchema);
   }
   return schemas;
 }

package/dist/composables/useSectionStyle.d.ts

@@ -1,4 +1,4 @@
-import { type Ref } from 'vue';
+import type { Ref } from 'vue';
 export interface SectionStyleResult {
     /** Tailwind class 列表（语义 token 映射） */
     wrapperClasses: string;

package/dist/composables/useSectionStyle.mjs

@@ -1,5 +1,5 @@
 import { computed, toValue } from "vue";
-const SAFE_COLOR_PATTERN = /^#[\da-fA-F]{6}$/;
+const SAFE_COLOR_PATTERN = /^#[\da-f]{6}$/i;
 const SPACING_PRESETS = {
   compact: "py-8 sm:py-12",
   standard: "py-12 sm:py-24",
@@ -16,19 +16,21 @@ const MAX_WIDTH_CLASSES = {
   full: "w-full"
 };
 const VISIBILITY_CLASSES = {
-  visible: "",
-  hidden: "hidden",
+  "visible": "",
+  "hidden": "hidden",
   "mobile-only": "sm:hidden",
   "desktop-only": "hidden sm:block"
 };
 function safeColor(value) {
   const s = typeof value === "string" ? value : void 0;
-  if (s && SAFE_COLOR_PATTERN.test(s)) return s;
+  if (s && SAFE_COLOR_PATTERN.test(s))
+    return s;
   return void 0;
 }
 function safePixel(value) {
   const n = typeof value === "number" ? value : Number(value);
-  if (!Number.isNaN(n) && n >= 0 && n <= 500) return n;
+  if (!Number.isNaN(n) && n >= 0 && n <= 500)
+    return n;
   return void 0;
 }
 export function useSectionStyle(sectionId, settings) {
@@ -89,7 +91,9 @@ export function useSectionStyle(sectionId, settings) {
           desktopRules.push(`padding-bottom: ${pb}px`);
         }
         cssParts.push(`#section-${id} { ${mobileRules.join("; ")}; }`);
-        cssParts.push(`@media (min-width: 768px) { #section-${id} { ${desktopRules.join("; ")}; } }`);
+        cssParts.push(
+          `@media (min-width: 768px) { #section-${id} { ${desktopRules.join("; ")}; } }`
+        );
       }
     }
     const customCSS = typeof s.custom_css === "string" ? s.custom_css.trim() : "";

package/dist/editor.d.ts

@@ -1,4 +1,4 @@
 export * from './index';
 export { createPreviewApp } from './preview/createPreviewApp';
-export type { EditorToPreviewMessage, PreviewToEditorMessage, } from '@vigilkids/section-core/bridge';
-export { BRIDGE_PROTOCOL_VERSION, HEARTBEAT_INTERVAL_MS, HEARTBEAT_MAX_MISSES, PreviewBridge, PREVIEW_CHANNEL, } from '@vigilkids/section-core/bridge';
+export type { EditorToPreviewMessage, PreviewToEditorMessage } from '@vigilkids/section-core/bridge';
+export { BRIDGE_PROTOCOL_VERSION, HEARTBEAT_INTERVAL_MS, HEARTBEAT_MAX_MISSES, PREVIEW_CHANNEL, PreviewBridge, } from '@vigilkids/section-core/bridge';

package/dist/editor.mjs

@@ -4,6 +4,6 @@ export {
   BRIDGE_PROTOCOL_VERSION,
   HEARTBEAT_INTERVAL_MS,
   HEARTBEAT_MAX_MISSES,
-  PreviewBridge,
-  PREVIEW_CHANNEL
+  PREVIEW_CHANNEL,
+  PreviewBridge
 } from "@vigilkids/section-core/bridge";

package/dist/index.d.ts

@@ -1,18 +1,18 @@
-export type { BlockData, SectionDefinition, SectionInstance, SectionRegistration, SectionsData, } from '@vigilkids/section-core';
-export { safeColor, safeUrl } from '@vigilkids/section-core';
-export { default as FallbackSection } from './renderer/FallbackSection.vue';
-export { default as LazySection } from './renderer/LazySection.vue';
-export { default as SectionErrorBoundary } from './renderer/SectionErrorBoundary.vue';
-export { default as SectionRenderer } from './renderer/SectionRenderer.vue';
-export { default as SectionWrapper } from './renderer/SectionWrapper.vue';
-export { registerSection, useRegistry } from './composables/useRegistry';
-export { useLazyRender } from './composables/useLazyRender';
-export { useSectionStyle } from './composables/useSectionStyle';
-export type { SectionStyleResult } from './composables/useSectionStyle';
 export { useInlineEdit } from './composables/useInlineEdit';
 export type { UseInlineEditOptions } from './composables/useInlineEdit';
+export { useLazyRender } from './composables/useLazyRender';
+export { registerSection, useRegistry } from './composables/useRegistry';
 export { generateJsonLdScripts, generateSectionJsonLd } from './composables/useSectionSEO';
 export type { SectionSEOOptions } from './composables/useSectionSEO';
+export { useSectionStyle } from './composables/useSectionStyle';
+export type { SectionStyleResult } from './composables/useSectionStyle';
 export { SectionRendererPlugin } from './plugin';
-export { default as RichTextSection } from './sections/RichTextSection.vue';
+export { default as FallbackSection } from './renderer/FallbackSection.vue';
+export { default as LazySection } from './renderer/LazySection.vue';
+export { default as SectionErrorBoundary } from './renderer/SectionErrorBoundary.vue';
+export { default as SectionRenderer } from './renderer/SectionRenderer.vue';
+export { default as SectionWrapper } from './renderer/SectionWrapper.vue';
 export { registerArticleSections } from './sections/article';
+export { default as RichTextSection } from './sections/RichTextSection.vue';
+export type { BlockData, SectionDefinition, SectionInstance, SectionRegistration, SectionsData, } from '@vigilkids/section-core';
+export { safeColor, safeUrl } from '@vigilkids/section-core';

package/dist/index.mjs

@@ -1,14 +1,14 @@
-export { safeColor, safeUrl } from "@vigilkids/section-core";
+export { useInlineEdit } from "./composables/useInlineEdit.mjs";
+export { useLazyRender } from "./composables/useLazyRender.mjs";
+export { registerSection, useRegistry } from "./composables/useRegistry.mjs";
+export { generateJsonLdScripts, generateSectionJsonLd } from "./composables/useSectionSEO.mjs";
+export { useSectionStyle } from "./composables/useSectionStyle.mjs";
+export { SectionRendererPlugin } from "./plugin.mjs";
 export { default as FallbackSection } from "./renderer/FallbackSection.vue";
 export { default as LazySection } from "./renderer/LazySection.vue";
 export { default as SectionErrorBoundary } from "./renderer/SectionErrorBoundary.vue";
 export { default as SectionRenderer } from "./renderer/SectionRenderer.vue";
 export { default as SectionWrapper } from "./renderer/SectionWrapper.vue";
-export { registerSection, useRegistry } from "./composables/useRegistry.mjs";
-export { useLazyRender } from "./composables/useLazyRender.mjs";
-export { useSectionStyle } from "./composables/useSectionStyle.mjs";
-export { useInlineEdit } from "./composables/useInlineEdit.mjs";
-export { generateJsonLdScripts, generateSectionJsonLd } from "./composables/useSectionSEO.mjs";
-export { SectionRendererPlugin } from "./plugin.mjs";
-export { default as RichTextSection } from "./sections/RichTextSection.vue";
 export { registerArticleSections } from "./sections/article/index.mjs";
+export { default as RichTextSection } from "./sections/RichTextSection.vue";
+export { safeColor, safeUrl } from "@vigilkids/section-core";

package/dist/interactions/common.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 通用 DOM 交互 — 所有产品共享
+ * 使用事件委托，覆盖 innerHTML 直出内容的基础交互
+ */
+export declare function setupCommonInteractions(): void;

package/dist/interactions/common.mjs

@@ -0,0 +1,10 @@
+export function setupCommonInteractions() {
+  document.addEventListener("click", (e) => {
+    const anchor = e.target.closest?.("a");
+    if (!anchor)
+      return;
+    const href = anchor.getAttribute("href");
+    if (!href?.startsWith("#"))
+      e.preventDefault();
+  });
+}

package/dist/interactions/vigilkids.d.ts

@@ -0,0 +1,5 @@
+/**
+ * vigilkids 产品专属 DOM 交互
+ * 使用事件委托，覆盖 innerHTML 直出内容的产品特有交互
+ */
+export declare function setupInteractions(): void;

package/dist/interactions/vigilkids.mjs

@@ -0,0 +1,26 @@
+export function setupInteractions() {
+  document.addEventListener("click", (e) => {
+    const faqTitle = e.target.closest?.(".faq-item-title");
+    if (!faqTitle)
+      return;
+    const faqItem = faqTitle.closest(".faq-item");
+    if (!faqItem)
+      return;
+    const faqList = faqItem.closest(".faq-list");
+    const isActive = faqItem.classList.contains("active");
+    if (faqList) {
+      faqList.querySelectorAll(".faq-item.active").forEach((item) => {
+        if (item !== faqItem) {
+          item.classList.remove("active");
+          const body2 = item.querySelector(".faq-item-answer");
+          if (body2)
+            body2.style.maxHeight = "0";
+        }
+      });
+    }
+    faqItem.classList.toggle("active", !isActive);
+    const body = faqItem.querySelector(".faq-item-answer");
+    if (body)
+      body.style.maxHeight = isActive ? "0" : `${body.scrollHeight}px`;
+  });
+}

package/dist/preview/createPreviewApp.mjs

@@ -8,13 +8,27 @@ const productCSSLoaders = {
   visiva: () => import("../styles/products/visiva.css")
 };
 async function loadProductCSS(productCode) {
-  if (loadedProducts.has(productCode)) return;
+  if (loadedProducts.has(productCode))
+    return;
   const loader = productCSSLoaders[productCode];
   if (loader) {
     await loader();
     loadedProducts.add(productCode);
   }
 }
+const loadedInteractions = /* @__PURE__ */ new Set();
+const productInteractionLoaders = {
+  vigilkids: () => import("../interactions/vigilkids.mjs").then((m) => m.setupInteractions())
+};
+async function loadProductInteractions(productCode) {
+  if (loadedInteractions.has(productCode))
+    return;
+  const loader = productInteractionLoaders[productCode];
+  if (loader) {
+    await loader();
+    loadedInteractions.add(productCode);
+  }
+}
 export function createPreviewApp(selector, options) {
   const sectionsData = ref({
     sections: {},
@@ -43,6 +57,8 @@ export function createPreviewApp(selector, options) {
       options.bridge.on("html:preview", (payload) => {
         const data = payload;
         rawHtmlContent.value = data.html;
+        const product = currentProduct.value || "vigilkids";
+        loadProductInteractions(product);
       });
       options.bridge.on("section:select", (payload) => {
         const data = payload;
@@ -78,6 +94,7 @@ export function createPreviewApp(selector, options) {
         if (data.productCode) {
           currentProduct.value = data.productCode;
           loadProductCSS(data.productCode);
+          loadProductInteractions(data.productCode);
         }
       });
       function handleSectionClick(sectionId) {
@@ -86,7 +103,9 @@ export function createPreviewApp(selector, options) {
       return () => rawHtmlContent.value !== null ? h("div", {
         class: `article-content article-content--${currentProduct.value || "vigilkids"}`,
         innerHTML: rawHtmlContent.value
-      }) : h(SectionRenderer, {
+      }) : h("div", {
+        class: `article-content article-content--${currentProduct.value || "vigilkids"}`
+      }, [h(SectionRenderer, {
         sectionsData: sectionsData.value,
         editorMode: true,
         selectedSectionId: selectedSectionId.value,
@@ -94,10 +113,16 @@ export function createPreviewApp(selector, options) {
         productCode: currentProduct.value || void 0,
         onSectionClick: handleSectionClick,
         onSettingUpdate: (sectionId, key, value) => {
-          options.bridge.send({ type: "inline-edit:update", payload: { sectionId, key, value } });
+          options.bridge.send({
+            type: "inline-edit:update",
+            payload: { sectionId, key, value }
+          });
         },
         onBlockSettingUpdate: (sectionId, blockId, key, value) => {
-          options.bridge.send({ type: "inline-edit:block-update", payload: { sectionId, blockId, key, value } });
+          options.bridge.send({
+            type: "inline-edit:block-update",
+            payload: { sectionId, blockId, key, value }
+          });
         },
         onInlineEditStart: (sectionId, key) => {
           inlineEditingField.value = { sectionId, key };
@@ -110,13 +135,15 @@ export function createPreviewApp(selector, options) {
         onInlineEditUndoRedo: (action) => {
           options.bridge.send({ type: action === "undo" ? "shortcut:undo" : "shortcut:redo" });
         }
-      });
+      })]);
     }
   });
   app.use(SectionRendererPlugin);
   app.mount(selector);
+  import("../interactions/common.mjs").then((m) => m.setupCommonInteractions());
   document.addEventListener("keydown", (e) => {
-    if (isEditableTarget(e)) return;
+    if (isEditableTarget(e))
+      return;
     const undoRedoAction = detectUndoRedo(e);
     if (undoRedoAction) {
       e.preventDefault();

package/dist/renderer/FallbackSection.vue

@@ -8,10 +8,16 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex items-center justify-center rounded border border-dashed border-gray-300 bg-gray-50 p-8 text-gray-400">
+  <div
+    class="flex items-center justify-center rounded border border-dashed border-gray-300 bg-gray-50 p-8 text-gray-400"
+  >
     <div class="text-center">
-      <div class="mb-2 text-2xl">📦</div>
-      <p class="text-sm">组件加载中...</p>
+      <div class="mb-2 text-2xl">
+        📦
+      </div>
+      <p class="text-sm">
+        组件加载中...
+      </p>
     </div>
   </div>
 </template>

package/dist/renderer/LazySection.vue

@@ -1,18 +1,5 @@
 <script lang="ts">
 /** 根据 Section 类型返回占位高度，防止 CLS 布局偏移 */
-function getPlaceholderHeight(type: string): string {
-  const heights: Record<string, string> = {
-    'hero-banner': '400px',
-    'feature-grid': '300px',
-    'text-with-image': '250px',
-    'testimonials': '280px',
-    'faq': '200px',
-    'cta': '180px',
-    'rich-text': '200px',
-    'spacer': '40px',
-  }
-  return heights[type] ?? '200px'
-}
 </script>
 
 <script setup lang="ts">
@@ -26,7 +13,7 @@ import SectionWrapper from './SectionWrapper.vue'
 
 const props = defineProps<{
   /** Block 实例映射 */
-  blocks: Record<string, { type: string; settings: Record<string, unknown> }>
+  blocks: Record<string, { type: string, settings: Record<string, unknown> }>
   /** Block 排序 */
   blockOrder: string[]
   /** 编辑器模式 */
@@ -54,6 +41,20 @@ const emit = defineEmits<{
   (e: 'inlineEditUndoRedo', action: 'redo' | 'undo'): void
 }>()
 
+function getPlaceholderHeight(type: string): string {
+  const heights: Record<string, string> = {
+    'hero-banner': '400px',
+    'feature-grid': '300px',
+    'text-with-image': '250px',
+    'testimonials': '280px',
+    'faq': '200px',
+    'cta': '180px',
+    'rich-text': '200px',
+    'spacer': '40px',
+  }
+  return heights[type] ?? '200px'
+}
+
 const containerRef = ref<HTMLElement | null>(null)
 const { isVisible } = useLazyRender(containerRef, {
   rootMargin: props.rootMargin ?? '200px',
@@ -64,18 +65,15 @@ const { isVisible } = useLazyRender(containerRef, {
 const registry = useRegistry()
 
 // 解析注册表中的组件，未注册则降级到 FallbackSection
-const resolvedComponent = computed(() =>
-  registry.resolve(props.sectionType, props.productCode) ?? FallbackSection,
+const resolvedComponent = computed(
+  () => registry.resolve(props.sectionType, props.productCode) ?? FallbackSection,
 )
 </script>
 
 <template>
 <div ref="containerRef">
     <template v-if="isVisible || isSelected">
-      <SectionErrorBoundary
-        :section-id="sectionId"
-        :section-type="sectionType"
-      >
+      <SectionErrorBoundary :section-id="sectionId" :section-type="sectionType">
         <SectionWrapper
           :section-id="sectionId"
           :section-type="sectionType"
@@ -90,8 +88,13 @@ const resolvedComponent = computed(() =>
             :blocks="blocks"
             :block-order="blockOrder"
             :editor-mode="editorMode"
-            @update:setting="(key: string, value: unknown) => emit('settingUpdate', sectionId, key, value)"
-            @update:block-setting="(blockId: string, key: string, value: unknown) => emit('blockSettingUpdate', sectionId, blockId, key, value)"
+            @update:setting="
+              (key: string, value: unknown) => emit('settingUpdate', sectionId, key, value)
+            "
+            @update:block-setting="
+              (blockId: string, key: string, value: unknown) =>
+                emit('blockSettingUpdate', sectionId, blockId, key, value)
+            "
             @inline-edit-start="(key: string) => emit('inlineEditStart', sectionId, key)"
             @inline-edit-end="emit('inlineEditEnd')"
             @undo-redo="(action: 'redo' | 'undo') => emit('inlineEditUndoRedo', action)"

package/dist/renderer/SectionErrorBoundary.vue

@@ -24,7 +24,9 @@ onErrorCaptured((err) => {
       可能原因：组件加载失败或数据格式异常。此错误不影响其他组件。
     </p>
     <details class="mb-3">
-      <summary class="cursor-pointer text-xs text-red-500">技术详情</summary>
+      <summary class="cursor-pointer text-xs text-red-500">
+        技术详情
+      </summary>
       <code class="mt-1 block whitespace-pre-wrap text-xs">{{ error.message }}</code>
     </details>
     <button

package/dist/renderer/SectionRenderer.vue

@@ -3,11 +3,11 @@ import type { SectionsData } from '@vigilkids/section-core'
 
 import { computed } from 'vue'
 
+import { useRegistry } from '../composables/useRegistry'
 import FallbackSection from './FallbackSection.vue'
 import LazySection from './LazySection.vue'
 import SectionErrorBoundary from './SectionErrorBoundary.vue'
 import SectionWrapper from './SectionWrapper.vue'
-import { useRegistry } from '../composables/useRegistry'
 
 const props = defineProps<{
   /** 是否处于编辑器预览模式（启用 data-* 属性和高亮） */
@@ -67,8 +67,13 @@ const orderedSections = computed(() =>
             :blocks="item.section.blocks"
             :block-order="item.section.block_order"
             :editor-mode="editorMode"
-            @update:setting="(key: string, value: unknown) => emit('setting-update', item.id, key, value)"
-            @update:block-setting="(blockId: string, key: string, value: unknown) => emit('block-setting-update', item.id, blockId, key, value)"
+            @update:setting="
+              (key: string, value: unknown) => emit('setting-update', item.id, key, value)
+            "
+            @update:block-setting="
+              (blockId: string, key: string, value: unknown) =>
+                emit('block-setting-update', item.id, blockId, key, value)
+            "
             @inline-edit-start="(key: string) => emit('inline-edit-start', item.id, key)"
             @inline-edit-end="emit('inline-edit-end')"
             @undo-redo="(action: 'redo' | 'undo') => emit('inline-edit-undo-redo', action)"
@@ -88,9 +93,17 @@ const orderedSections = computed(() =>
         :is-selected="allSectionsSelected || selectedSectionId === item.id"
         :product-code="productCode"
         @section-click="emit('section-click', $event)"
-        @setting-update="(sectionId: string, key: string, value: unknown) => emit('setting-update', sectionId, key, value)"
-        @block-setting-update="(sectionId: string, blockId: string, key: string, value: unknown) => emit('block-setting-update', sectionId, blockId, key, value)"
-        @inline-edit-start="(sectionId: string, key: string) => emit('inline-edit-start', sectionId, key)"
+        @setting-update="
+          (sectionId: string, key: string, value: unknown) =>
+            emit('setting-update', sectionId, key, value)
+        "
+        @block-setting-update="
+          (sectionId: string, blockId: string, key: string, value: unknown) =>
+            emit('block-setting-update', sectionId, blockId, key, value)
+        "
+        @inline-edit-start="
+          (sectionId: string, key: string) => emit('inline-edit-start', sectionId, key)
+        "
         @inline-edit-end="emit('inline-edit-end')"
         @inline-edit-undo-redo="(action: 'redo' | 'undo') => emit('inline-edit-undo-redo', action)"
       />

package/dist/renderer/SectionWrapper.vue

@@ -41,12 +41,11 @@ const { style } = useSectionStyle(
   </section>
 
   <!-- Scoped CSS 注入（自定义间距 + custom_css） -->
-  <component
-    v-if="style.scopedCSS"
-    :is="'style'"
-  >{{ style.scopedCSS }}</component>
+  <component is="style" v-if="style.scopedCSS">
+    {{ style.scopedCSS }}
+  </component>
 </template>
 
 <style scoped>
-.section-wrapper{position:relative}.section-wrapper--hoverable:hover{outline:2px solid rgba(22,119,255,.3);outline-offset:-2px}.section-wrapper--selected{outline:2px solid #1677ff;outline-offset:-2px}.section-wrapper--hoverable:hover:before{background:#1677ff;border-radius:4px;color:#fff;content:attr(data-section-type);font-size:12px;left:8px;padding:2px 8px;position:absolute;top:-24px;z-index:10}.section-wrapper :deep(.inline-editable){border-radius:2px;cursor:text;transition:outline .15s ease}.section-wrapper :deep(.inline-editable:hover){outline:1px dashed rgba(22,119,255,.4);outline-offset:2px}.section-wrapper :deep(.inline-editing){border-radius:2px;cursor:text;min-height:1em;min-width:20px;outline:2px solid #1677ff;outline-offset:2px}
+.section-wrapper{position:relative}.section-wrapper--hoverable:hover{outline:2px solid rgba(22,119,255,.3);outline-offset:1px}.section-wrapper--selected{outline:2px solid #1677ff;outline-offset:1px}.section-wrapper--hoverable:hover:before{background:#1677ff;border-radius:4px;color:#fff;content:attr(data-section-type);font-size:12px;left:8px;padding:2px 8px;position:absolute;top:-24px;z-index:10}.section-wrapper :deep(.inline-editable){cursor:text;transition:outline .15s ease}.section-wrapper :deep(.inline-editable:hover){outline:1px dashed rgba(22,119,255,.4);outline-offset:2px}.section-wrapper :deep(.inline-editing){cursor:text;min-height:1em;min-width:20px;outline:2px solid #1677ff;outline-offset:2px}
 </style>

package/dist/sections/RichTextSection.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { BlockData } from '@vigilkids/section-core'
 
-import { computed } from 'vue'
-
 import { safeColor } from '@vigilkids/section-core'
 
+import { computed } from 'vue'
+
 const props = defineProps<{
   blockOrder: string[]
   blocks: Record<string, BlockData>
@@ -35,7 +35,8 @@ const paddingClass = computed(() => {
 /** 将 ProseMirror JSON 或 HTML 字符串转为渲染 HTML */
 const renderedContent = computed(() => {
   const content = s.value.content
-  if (typeof content === 'string') return content
+  if (typeof content === 'string')
+    return content
   if (content && typeof content === 'object') {
     return renderProseMirrorBasic(content as ProseMirrorDoc)
   }
@@ -46,7 +47,7 @@ const renderedContent = computed(() => {
 interface ProseMirrorNode {
   attrs?: Record<string, unknown>
   content?: ProseMirrorNode[]
-  marks?: Array<{ attrs?: Record<string, unknown>; type: string }>
+  marks?: Array<{ attrs?: Record<string, unknown>, type: string }>
   text?: string
   type: string
 }
@@ -59,7 +60,8 @@ interface ProseMirrorDoc {
 
 /** 基础 ProseMirror JSON → HTML 转换 */
 function renderProseMirrorBasic(doc: ProseMirrorDoc): string {
-  if (!doc.content) return ''
+  if (!doc.content)
+    return ''
   return doc.content.map(renderNode).join('')
 }
 
@@ -93,12 +95,14 @@ function renderNode(node: ProseMirrorNode): string {
 }
 
 function renderChildren(node: ProseMirrorNode): string {
-  if (!node.content) return node.text ?? ''
+  if (!node.content)
+    return node.text ?? ''
   return node.content.map(renderNode).join('')
 }
 
 function applyMarks(text: string, marks?: ProseMirrorNode['marks']): string {
-  if (!marks) return text
+  if (!marks)
+    return text
   let result = text
   for (const mark of marks) {
     switch (mark.type) {
@@ -126,10 +130,6 @@ function applyMarks(text: string, marks?: ProseMirrorNode['marks']): string {
     :class="paddingClass"
     :style="{ backgroundColor: safeColor(String(s.bg_color ?? '#ffffff')) }"
   >
-    <div
-      class="prose prose-lg mx-auto"
-      :class="maxWidthClass"
-      v-html="renderedContent"
-    />
+    <div class="prose prose-lg mx-auto" :class="maxWidthClass" v-html="renderedContent" />
   </article>
 </template>