@vigilkids/section-renderer-vue 0.2.2 → 0.5.0

package/dist/sections/article/vigilkids/ArticleTipNote.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../composables/useInlineEdit'
+
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:setting', key: string, value: unknown): void
+  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
+  (e: 'inline-edit-start', key: string): void
+  (e: 'inline-edit-end'): void
+  (e: 'undo-redo', action: 'redo' | 'undo'): void
+}>()
+
+const s = computed(() => props.settings)
+
+const variant = computed(() => String(s.value.variant || 'note'))
+
+const containerClass = computed(() => {
+  if (variant.value === 'tips')
+    return 'tips-box'
+  if (variant.value === 'warning')
+    return 'note-box note-warning'
+  return 'note-box'
+})
+
+const labelClass = computed(() => (variant.value === 'tips' ? 'tips-box-label' : 'note-box-label'))
+
+const contentClass = computed(() => (variant.value === 'tips' ? 'tips-box-content' : 'note-box-content'))
+
+const { editableAttrs } = useInlineEdit({
+  editorMode: () => !!props.editorMode,
+  onSettingUpdate: (key, value) => emit('update:setting', key, value),
+  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
+  onEditStart: key => emit('inline-edit-start', key),
+  onEditEnd: () => emit('inline-edit-end'),
+  onUndoRedo: action => emit('undo-redo', action),
+})
+</script>
+
+<template>
+  <div :class="containerClass">
+    <div :class="labelClass">
+      <img v-if="s.icon_url" :src="(s.icon_url as string)" :alt="(s.label_text as string) || ''">
+      <span v-bind="editableAttrs('label_text')">{{ s.label_text }}</span>
+    </div>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p :class="contentClass" v-bind="editableAttrs('content')" v-html="s.content" />
+  </div>
+</template>

package/dist/sections/article/vigilkids/ArticleTipNote.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/vigilkids/ArticleToc.vue

@@ -28,7 +28,13 @@ const emit = defineEmits<{
   (e: 'undo-redo', action: 'redo' | 'undo'): void
 }>()
 
-const title = computed(() => String(props.settings.title || 'Table Of Contents'))
+// 标题允许富文本（例如带 <b>）；空值时回退默认文案
+const title = computed(() => {
+  const raw = props.settings.title
+  if (typeof raw === 'string' && raw.trim() !== '')
+    return raw
+  return 'Table Of Contents'
+})
 
 // 将 blockOrder 中连续的 toc-h3 归组到前一个 toc-h2 下
 const tocGroups = computed<TocGroup[]>(() => {
@@ -63,7 +69,7 @@ const tocGroups = computed<TocGroup[]>(() => {
 const hotIconSrc
   = 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjU0NzkgMTEuOTcwMkMxMC4wOTY2IDExLjk3MDIgOS43MTQ1NiAxMi41Mzg5IDkuNzE0NTYgMTMuMjE4OEM5LjcxNDU2IDEzLjg5NDggMTAuMDk2NiAxNC40NjY4IDEwLjU0NzkgMTQuNDY2OEMxMC45OTkyIDE0LjQ2NjggMTEuMzgxOSAxMy44OTY4IDExLjM4MTkgMTMuMjE3NUMxMS4zODE5IDEyLjUzODkgMTAuOTk5OSAxMS45Njg5IDEwLjU0ODUgMTEuOTY4OUwxMC41NDc5IDExLjk3MDJaTTE1LjM5NzcgMy41NDg0MUMxNS4zMjU4IDMuNDY4MTcgMTUuMjMzOCAzLjQwODQ4IDE1LjEzMTIgMy4zNzU0NUMxNS4wMjg2IDMuMzQyNDIgMTQuOTE5IDMuMzM3MjMgMTQuODEzOCAzLjM2MDQyQzE0LjYwMTggMy40MTEwOCAxNC40MjcxIDMuNTczNzQgMTQuMzQ3MSAzLjc5NTA3QzE0LjE2ODggNC4zMTgxNiAxNC4wMDM2IDQuODQ1NjUgMTMuODUxOCA1LjM3NzA0QzEzLjYzODUgNC45MzQzOCAxMy4zOTg1IDQuNTA5NzIgMTMuMTMxOCA0LjEwMzc0QzEyLjE0NzggMi42MDQ0NCAxMC43OTg1IDEuMzMxOCA4Ljg4NjU3IDAuMDk4NTAzN0M4Ljc5NTYgMC4wMzkxOTE2IDguNjkwMzIgMC4wMDU0NzcyOCA4LjU4MTgyIDAuMDAwOTAyOTA5QzguNDczMzEgLTAuMDAzNjcxNDYgOC4zNjU1OCAwLjAyMTA2MyA4LjI2OTkzIDAuMDcyNTA3NkM4LjE3MTE2IDAuMTI5NTgzIDguMDg3NjcgMC4yMDk3MjMgOC4wMjY2MSAwLjMwNjA3OUM3Ljk2NTU0IDAuNDAyNDM1IDcuOTI4NzEgMC41MTIxNDMgNy45MTkyNyAwLjYyNTgyOEM3LjY1MzI3IDMuMjI5NzMgNy4xNjM5NSA1Ljg2OTAxIDUuNDkyIDcuNzI2OTZMNS4yNzAwMSA3LjI1MzY0QzUuMDc0NyA2Ljg0NDMyIDQuODkyMDIgNi40NTkwMSA0Ljc3NDcgNi4xMjkwMUM0LjY0ODAyIDUuNzY1NjkgNC4yNzY3MSA1LjU4MzcgMy45NDUzOCA1LjcyMjM3QzMuNzkzMSA1Ljc4ODQ4IDMuNjcwOTMgNS45MDg5OCAzLjYwMjcyIDYuMDYwMzRMMy40NjgwNiA2LjM0N0MyLjY0NzQxIDguMDg2OTYgMS41MjU0NCAxMC40NzM2IDEuMzU2MSAxMi40OTE1QzEuMDA0NzcgMTYuNzY4NyA0LjU1NjY5IDE5LjQ1NjcgOC4yNTA1OSAxOS45MDMzQzkuMDYxOTIgMjAuMDAxMyA5Ljg3NzIyIDIwLjAyMzMgMTAuNjkxOSAxOS45NzMzQzEzLjU5NjUgMTkuNzg0IDE3LjEyNSAxOC4xNTU0IDE4LjMxNDMgMTQuMTQ2OEMxOS4wODQzIDExLjU0NDkgMTguNzgzNyA3LjIxMDMyIDE1LjM5NzcgMy41NDcwOFYzLjU0Nzc0VjMuNTQ4NDFaTTcuODI3OTQgMTUuMTUyMUM3LjgyNzk0IDE1LjQ5MDEgNy41NzUyOCAxNS43NjU1IDcuMjY0NjIgMTUuNzY1NUM2Ljk1NDY0IDE1Ljc2NjggNi43MDMyOSAxNS40OTIxIDYuNzAxOTYgMTUuMTUyMVYxMy43NTg4TDUuNTQyIDEzLjc3ODhWMTUuMTg2MUM1LjU0MiAxNS41MjM0IDUuMjg5MzQgMTUuNzk5NCA0Ljk3ODY4IDE1Ljc5OTRDNC42NjkzNiAxNS44MDA4IDQuNDE2NjkgMTUuNTI2MSA0LjQxNTM2IDE1LjE4NjFWMTEuNDE4OUM0LjQxNTM2IDExLjA4MDIgNC42NjczNSAxMC44MDU2IDQuOTc4NjggMTAuODA1NkM1LjI4OTM0IDEwLjgwNTYgNS41NDEzNCAxMS4wODAyIDUuNTQxMzQgMTEuNDE4OVYxMi41NTE1TDYuNzAxOTYgMTIuNTMyMlYxMS4zODU1QzYuNzAxOTYgMTEuMDQ2OSA2Ljk1Mzk1IDEwLjc3MTYgNy4yNjQ2MiAxMC43NzE2QzcuNTc1MjggMTAuNzcxNiA3LjgyNzI3IDExLjA0NjkgNy44MjcyNyAxMS4zODQ5VjE1LjE1MTVINy44Mjc5NFYxNS4xNTIxWk0xMC41NDc5IDE1LjY5MDhDOS40Njc5IDE1LjY5MDggOC41OTA1OSAxNC41ODAxIDguNTkwNTkgMTMuMjE1NUM4LjU5MDU5IDExLjg1MDkgOS40Njc5IDEwLjc0MDIgMTAuNTQ3OSAxMC43NDAyQzExLjYyNzggMTAuNzQwMiAxMi41MDc4IDExLjg1MDkgMTIuNTA3OCAxMy4yMTU1QzEyLjUwNjUgMTQuNTgwMSAxMS42Mjc4IDE1LjY5MDggMTAuNTQ3OSAxNS42OTA4VjE1LjY5MDhaTTE1LjY1MDQgMTIuMTAyMkgxNC45MzUxVjE1LjExODhDMTQuOTM1MSAxNS40NTY4IDE0LjY4MzggMTUuNzMyMSAxNC4zNzMxIDE1LjczMjFDMTQuMDYzMSAxNS43MzM0IDEzLjgxMTEgMTUuNDU4OCAxMy44MDkxIDE1LjExODhWMTIuMTAyMkgxMy4wOTUxQzEzLjAyMDIgMTIuMTAyMiAxMi45NDYxIDEyLjA4NjIgMTIuODc3OCAxMi4wNTUzQzEyLjgwOTUgMTIuMDI0NCAxMi43NDg2IDExLjk3OTIgMTIuNjk5MSAxMS45MjI5QzEyLjU5MzEgMTEuODAyMyAxMi41MzM5IDExLjY0NzUgMTIuNTMyNSAxMS40ODY5QzEyLjUzMjUgMTEuMTQ4MiAxMi43ODQ1IDEwLjg3MzYgMTMuMDk1MSAxMC44NzM2SDE1LjY0ODRDMTUuOTU5MSAxMC44NzM2IDE2LjIxMDQgMTEuMTQ4MiAxNi4yMTA0IDExLjQ4NjlDMTYuMjA5OSAxMS42NDc3IDE2LjE1MDYgMTEuODAyOCAxNi4wNDM3IDExLjkyMjlDMTUuOTk1MSAxMS45Nzk2IDE1LjkzNDggMTIuMDI1MSAxNS44NjY5IDEyLjA1NjJDMTUuNzk5IDEyLjA4NzIgMTUuNzI1MSAxMi4xMDMyIDE1LjY1MDQgMTIuMTAyOVYxMi4xMDIyWiIgZmlsbD0iI0Y3NDM0MyIvPjwvc3ZnPg=='
 
-const { editableAttrs } = useInlineEdit({
+const { editableAttrs, blockEditableAttrs } = useInlineEdit({
   editorMode: () => !!props.editorMode,
   onSettingUpdate: (key, value) => emit('update:setting', key, value),
   onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
@@ -75,13 +81,17 @@ const { editableAttrs } = useInlineEdit({
 
 <template>
   <ul class="level-1">
-    <li class="table-of-contents" v-bind="editableAttrs('title')">
-      {{ title }}
-    </li>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <li
+      class="table-of-contents"
+      v-bind="editableAttrs('title')"
+      v-html="title"
+    />
     <template v-for="group in tocGroups" :key="group.id">
       <li :class="{ 'hot-link': group.hot }">
         <a :href="`#${group.anchor}`">
-          {{ group.text }}
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <span v-bind="blockEditableAttrs(group.id, 'text')" v-html="group.text" />
           <img
             v-if="group.hot"
             class="hot-icon"
@@ -94,7 +104,12 @@ const { editableAttrs } = useInlineEdit({
       </li>
       <ul v-if="group.children.length > 0" class="level-2">
         <li v-for="child in group.children" :key="child.id">
-          <a :href="`#${child.anchor}`">{{ child.text }}</a>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <a
+            :href="`#${child.anchor}`"
+            v-bind="blockEditableAttrs(child.id, 'text')"
+            v-html="child.text"
+          />
         </li>
       </ul>
     </template>

package/dist/sections/article/vigilkids/ArticleTocList.d.vue.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/vigilkids/ArticleTocList.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../composables/useInlineEdit'
+
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:setting', key: string, value: unknown): void
+  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
+  (e: 'inline-edit-start', key: string): void
+  (e: 'inline-edit-end'): void
+  (e: 'undo-redo', action: 'redo' | 'undo'): void
+}>()
+
+const s = computed(() => props.settings)
+
+const variant = computed(() => String(s.value.variant || 'dot'))
+
+const listClass = computed(() => `toc-list-${variant.value}`)
+
+const isOrdered = computed(() => variant.value === 'ordered')
+
+const items = computed(() =>
+  props.blockOrder
+    .filter(id => props.blocks[id]?.type === 'toc_item')
+    .map(id => ({ id, block: props.blocks[id]! })),
+)
+
+const { blockEditableAttrs } = useInlineEdit({
+  editorMode: () => !!props.editorMode,
+  onSettingUpdate: (key, value) => emit('update:setting', key, value),
+  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
+  onEditStart: key => emit('inline-edit-start', key),
+  onEditEnd: () => emit('inline-edit-end'),
+  onUndoRedo: action => emit('undo-redo', action),
+})
+</script>
+
+<template>
+  <ol v-if="isOrdered" :class="listClass">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <li v-for="item in items" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
+  </ol>
+  <ul v-else :class="listClass">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <li v-for="item in items" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
+  </ul>
+</template>

package/dist/sections/article/vigilkids/ArticleTocList.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/vigilkids/ArticleTopAd.d.vue.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/vigilkids/ArticleTopAd.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../composables/useInlineEdit'
+
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:setting', key: string, value: unknown): void
+  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
+  (e: 'inline-edit-start', key: string): void
+  (e: 'inline-edit-end'): void
+  (e: 'undo-redo', action: 'redo' | 'undo'): void
+}>()
+
+const s = computed(() => props.settings)
+
+const features = computed(() =>
+  props.blockOrder
+    .filter(id => props.blocks[id]?.type === 'feature')
+    .map(id => ({ id, block: props.blocks[id]! })),
+)
+
+const { editableAttrs, blockEditableAttrs } = useInlineEdit({
+  editorMode: () => !!props.editorMode,
+  onSettingUpdate: (key, value) => emit('update:setting', key, value),
+  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
+  onEditStart: key => emit('inline-edit-start', key),
+  onEditEnd: () => emit('inline-edit-end'),
+  onUndoRedo: action => emit('undo-redo', action),
+})
+</script>
+
+<template>
+  <section class="top-banner">
+    <div class="top-banner-info">
+      <img
+        v-if="s.header_image_url"
+        class="top-banner-header"
+        :src="(s.header_image_url as string)"
+        :alt="(s.header_alt as string) || ''"
+      >
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <p
+        v-if="s.description"
+        class="top-banner-desc"
+        v-bind="editableAttrs('description')"
+        v-html="s.description"
+      />
+      <ul v-if="features.length" class="top-banner-features">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <li
+          v-for="item in features"
+          :key="item.id"
+          v-bind="blockEditableAttrs(item.id, 'text')"
+          v-html="item.block.settings.text"
+        />
+      </ul>
+      <a
+        v-if="s.cta_primary_label"
+        class="top-banner-btn-primary"
+        :href="(s.cta_primary_url as string) || '#'"
+        v-bind="editableAttrs('cta_primary_label')"
+      >
+        {{ s.cta_primary_label }}
+      </a>
+      <a
+        v-if="s.cta_outline_label"
+        class="top-banner-btn-outline"
+        :href="(s.cta_outline_url as string) || '#'"
+        v-bind="editableAttrs('cta_outline_label')"
+      >
+        {{ s.cta_outline_label }}
+      </a>
+    </div>
+    <img
+      v-if="s.mockup_image_url"
+      class="top-banner-mockup"
+      :src="(s.mockup_image_url as string)"
+      :alt="(s.mockup_alt as string) || ''"
+    >
+  </section>
+</template>

package/dist/sections/article/vigilkids/ArticleTopAd.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/vigilkids/product-card/ProductCardCtaGroup.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    s: Record<string, unknown>;
+    editableAttrs: (settingKey: string) => Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/vigilkids/product-card/ProductCardCtaGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// CTA 按钮组：7 个 variant 共用同一套主/次按钮 DOM 结构
+// 通过 props 接收 settings 和 editableAttrs（由父组件内的 useInlineEdit 生成）
+// 拆出此组件是为了消除 v-if 链中的 CTA 重复（原文件有 7 次相同的 action-buttons 块）
+const props = defineProps<{
+  s: Record<string, unknown>
+  editableAttrs: (settingKey: string) => Record<string, unknown>
+}>()
+
+// 解构响应式数据仅用于模板引用简写，不破坏 props 响应性（props 本身是 reactive）
+const { s, editableAttrs } = props
+</script>
+
+<template>
+  <div class="action-buttons">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <a :href="(s.cta_primary_url as string) || '#'" class="article-btn-primary" v-bind="editableAttrs('cta_primary_label')" v-html="s.cta_primary_label" />
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <a :href="(s.cta_outline_url as string) || '#'" class="article-btn-outline" v-bind="editableAttrs('cta_outline_label')" v-html="s.cta_outline_label" />
+  </div>
+</template>

package/dist/sections/article/vigilkids/product-card/ProductCardCtaGroup.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    s: Record<string, unknown>;
+    editableAttrs: (settingKey: string) => Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/vigilkids/product-card/ProductCardVariantA.d.vue.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/vigilkids/product-card/ProductCardVariantA.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../../composables/useInlineEdit'
+import ProductCardCtaGroup from './ProductCardCtaGroup.vue'
+
+// Variant A: 无图，标准型（product-card）
+// 契约与主组件对齐：每个 variant 独立完整 emit + useInlineEdit，保证可单独测试/替换
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:setting', key: string, value: unknown): void
+  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
+  (e: 'inline-edit-start', key: string): void
+  (e: 'inline-edit-end'): void
+  (e: 'undo-redo', action: 'redo' | 'undo'): void
+}>()
+
+const s = computed(() => props.settings)
+
+const { editableAttrs } = useInlineEdit({
+  editorMode: () => !!props.editorMode,
+  onSettingUpdate: (key, value) => emit('update:setting', key, value),
+  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
+  onEditStart: key => emit('inline-edit-start', key),
+  onEditEnd: () => emit('inline-edit-end'),
+  onUndoRedo: action => emit('undo-redo', action),
+})
+</script>
+
+<template>
+  <div class="product-card-content">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p class="product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p class="product-desc" v-bind="editableAttrs('product_desc')" v-html="s.product_desc" />
+  </div>
+  <ProductCardCtaGroup :s="s" :editable-attrs="editableAttrs" />
+</template>

package/dist/sections/article/vigilkids/product-card/ProductCardVariantA.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/vigilkids/product-card/ProductCardVariantB.d.vue.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/vigilkids/product-card/ProductCardVariantB.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../../composables/useInlineEdit'
+import ProductCardCtaGroup from './ProductCardCtaGroup.vue'
+
+// Variant B: 无图，紧凑型（product-card-compact）
+// 与 Variant A 的 DOM 相同，区别仅在根 class（由主分发器提供），因此结构对齐
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:setting', key: string, value: unknown): void
+  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
+  (e: 'inline-edit-start', key: string): void
+  (e: 'inline-edit-end'): void
+  (e: 'undo-redo', action: 'redo' | 'undo'): void
+}>()
+
+const s = computed(() => props.settings)
+
+const { editableAttrs } = useInlineEdit({
+  editorMode: () => !!props.editorMode,
+  onSettingUpdate: (key, value) => emit('update:setting', key, value),
+  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
+  onEditStart: key => emit('inline-edit-start', key),
+  onEditEnd: () => emit('inline-edit-end'),
+  onUndoRedo: action => emit('undo-redo', action),
+})
+</script>
+
+<template>
+  <div class="product-card-content">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p class="product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p class="product-desc" v-bind="editableAttrs('product_desc')" v-html="s.product_desc" />
+  </div>
+  <ProductCardCtaGroup :s="s" :editable-attrs="editableAttrs" />
+</template>

package/dist/sections/article/vigilkids/product-card/ProductCardVariantB.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/vigilkids/product-card/ProductCardVariantC.d.vue.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;