@vigilkids/section-renderer-vue 0.0.1

package/dist/sections/article/prosemirror.mjs

@@ -0,0 +1,65 @@
+function renderNode(node) {
+  switch (node.type) {
+    case "blockquote":
+      return `<blockquote>${renderChildren(node)}</blockquote>`;
+    case "bulletList":
+      return `<ul>${renderChildren(node)}</ul>`;
+    case "codeBlock":
+      return `<pre><code>${renderChildren(node)}</code></pre>`;
+    case "hardBreak":
+      return "<br />";
+    case "heading": {
+      const level = node.attrs?.level ?? 2;
+      return `<h${level}>${renderChildren(node)}</h${level}>`;
+    }
+    case "horizontalRule":
+      return "<hr />";
+    case "listItem":
+      return `<li>${renderChildren(node)}</li>`;
+    case "orderedList":
+      return `<ol>${renderChildren(node)}</ol>`;
+    case "paragraph":
+      return `<p>${renderChildren(node)}</p>`;
+    case "text":
+      return applyMarks(node.text ?? "", node.marks);
+    default:
+      return renderChildren(node);
+  }
+}
+function renderChildren(node) {
+  if (!node.content) return node.text ?? "";
+  return node.content.map(renderNode).join("");
+}
+function applyMarks(text, marks) {
+  if (!marks) return text;
+  let result = text;
+  for (const mark of marks) {
+    switch (mark.type) {
+      case "bold":
+        result = `<strong>${result}</strong>`;
+        break;
+      case "code":
+        result = `<code>${result}</code>`;
+        break;
+      case "italic":
+        result = `<em>${result}</em>`;
+        break;
+      case "link":
+        result = `<a href="${mark.attrs?.href ?? "#"}">${result}</a>`;
+        break;
+      case "underline":
+        result = `<span class="underline">${result}</span>`;
+        break;
+    }
+  }
+  return result;
+}
+export function renderContent(content) {
+  if (typeof content === "string") return content;
+  if (content && typeof content === "object" && content.type === "doc") {
+    const doc = content;
+    if (!doc.content) return "";
+    return doc.content.map(renderNode).join("");
+  }
+  return "";
+}

package/dist/sections/article/shared/ArticleCustomHtml.d.vue.ts

@@ -0,0 +1,9 @@
+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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/shared/ArticleCustomHtml.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+import type { Ref } from 'vue'
+
+import { computed, inject } from 'vue'
+
+import { renderContent } from '../prosemirror'
+
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+// 从 createPreviewApp 注入当前产品标识，用于加载对应产品的 CSS
+const currentProduct = inject<Ref<string>>('currentProduct')
+const productClass = computed(() => {
+  const code = currentProduct?.value || 'vigilkids'
+  return `article-content--${code}`
+})
+
+/* 兼容 article-prose 的 settings.content 字段（可能是 ProseMirror JSON） */
+const htmlContent = computed(() => {
+  const raw = props.settings.html_content ?? props.settings.content ?? ''
+  return renderContent(raw)
+})
+</script>
+
+<template>
+  <div :class="['article-custom-html', 'article-content', productClass]" v-html="htmlContent" />
+</template>

package/dist/sections/article/shared/ArticleCustomHtml.vue.d.ts

@@ -0,0 +1,9 @@
+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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/shared/ArticleImage.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/shared/ArticleImage.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { safeUrl } 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 { 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>
+<figure class="article-image">
+    <img
+      v-if="s.src"
+      :alt="String(s.alt || '')"
+      :src="safeUrl(String(s.src))"
+      class="article-image__img"
+      loading="lazy"
+    />
+    <figcaption v-if="s.caption" class="article-image__caption" v-bind="editableAttrs('caption')">
+      {{ s.caption }}
+    </figcaption>
+  </figure>
+</template>
+
+<style scoped>
+.article-image{text-align:center}.article-image__img{height:auto;margin:10px auto 30px;max-width:500px;-o-object-fit:cover;object-fit:cover;width:auto}.article-image__caption{color:#999;font-size:14px;margin-bottom:10px;margin-top:-20px;text-align:center}@media (max-width:515px){.article-image__img{max-width:100%;width:auto}}
+</style>

package/dist/sections/article/shared/ArticleImage.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/ArticleBulletList.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/ArticleBulletList.vue

@@ -0,0 +1,48 @@
+<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 blockOrder = computed(() => props.blockOrder)
+const blocks = computed(() => props.blocks)
+
+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>
+<ul class="article-bullet-list">
+    <template v-for="blockId in blockOrder" :key="blockId">
+      <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
+        {{ blocks[blockId]!.settings.text }}
+      </li>
+    </template>
+  </ul>
+</template>
+
+<style scoped>
+.article-bullet-list{color:var(--article-text,#3a4259);list-style-type:disc;margin-top:10px;padding-left:20px}
+</style>

package/dist/sections/article/vigilkids/ArticleBulletList.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/ArticleCta.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/ArticleCta.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { safeUrl } 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 || 'button'))
+
+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>
+<!-- button variant: 单个居中按钮 -->
+  <a
+    v-if="variant === 'button'"
+    :href="safeUrl(String(s.button_url || ''))"
+    class="btn btn-primary"
+    v-bind="editableAttrs('button_text')"
+  >
+    {{ s.button_text }}
+  </a>
+
+  <!-- button-group variant: 两个按钮并排 -->
+  <div v-else-if="variant === 'button-group'" class="btn-group">
+    <a
+      :href="safeUrl(String(s.button_url || ''))"
+      class="btn btn-primary"
+      v-bind="editableAttrs('button_text')"
+    >
+      {{ s.button_text }}
+    </a>
+    <a
+      v-if="s.secondary_button_text"
+      :href="safeUrl(String(s.secondary_button_url || ''))"
+      class="btn outline-btn"
+      v-bind="editableAttrs('secondary_button_text')"
+    >
+      {{ s.secondary_button_text }}
+    </a>
+  </div>
+
+  <!-- card variant: 左文字右按钮 -->
+  <div v-else-if="variant === 'card'" class="article-try">
+    <div class="article-try-content">
+      <p v-if="s.title" class="article-try-title" v-bind="editableAttrs('title')">{{ s.title }}</p>
+      <p v-if="s.description" class="article-try-description" v-bind="editableAttrs('description')">{{ s.description }}</p>
+    </div>
+    <a
+      v-if="s.button_text"
+      :href="safeUrl(String(s.button_url || ''))"
+      class="btn btn-primary"
+      v-bind="editableAttrs('button_text')"
+    >
+      {{ s.button_text }}
+    </a>
+  </div>
+
+  <!-- showcase variant: 左文字+按钮，右图片 -->
+  <div v-else-if="variant === 'showcase'" class="article-show">
+    <div class="article-show-content">
+      <p v-if="s.title" class="article-show-title" v-bind="editableAttrs('title')">{{ s.title }}</p>
+      <p v-if="s.description" class="article-show-description" v-bind="editableAttrs('description')">{{ s.description }}</p>
+      <a
+        v-if="s.button_text"
+        :href="safeUrl(String(s.button_url || ''))"
+        class="btn btn-primary"
+        v-bind="editableAttrs('button_text')"
+      >
+        {{ s.button_text }}
+      </a>
+    </div>
+    <img
+      v-if="s.image_src"
+      :src="String(s.image_src)"
+      alt=""
+      loading="lazy"
+    >
+  </div>
+
+  <!-- button-group-dark variant: 黑底容器+白边主按钮+渐变次按钮 (Visiva) -->
+  <div v-else-if="variant === 'button-group-dark'" class="btn-group-dark">
+    <div class="btn-group-dark__buttons">
+      <div v-if="s.button_text" class="btn-group-dark__item">
+        <a :href="safeUrl(String(s.button_url || ''))" class="btn btn-outline-white" v-bind="editableAttrs('button_text')">
+          {{ s.button_text }}
+        </a>
+        <p v-if="s.button_caption" class="btn-group-dark__caption" v-bind="editableAttrs('button_caption')">{{ s.button_caption }}</p>
+      </div>
+      <div v-if="s.secondary_button_text" class="btn-group-dark__item">
+        <a :href="safeUrl(String(s.secondary_button_url || ''))" class="btn btn-gradient" v-bind="editableAttrs('secondary_button_text')">
+          {{ s.secondary_button_text }}
+        </a>
+        <p v-if="s.secondary_button_caption" class="btn-group-dark__caption" v-bind="editableAttrs('secondary_button_caption')">{{ s.secondary_button_caption }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.btn{align-items:center;border:none;border-radius:var(--article-btn-radius,10px);box-sizing:border-box;cursor:pointer;display:flex;font-size:16px;font-weight:700;height:var(--article-btn-height,52px);justify-content:center;line-height:24px;padding:10px 20px;text-decoration:none;transition:all .3s ease;width:220px}.btn.btn-primary{background:var(--article-primary,#24c790);color:var(--article-btn-color,#fff);margin:20px auto 30px}.btn.btn-primary:active,.btn.btn-primary:hover{background:var(--article-primary-hover,#1ba97a)}.btn.outline-btn{background:#fff;border:2px solid var(--article-primary,#24c790);border-radius:var(--article-btn-radius,10px);color:var(--article-primary-hover,#1ba97a);height:var(--article-btn-height,52px);margin:20px auto 30px}.btn.outline-btn:hover{background:var(--article-primary,#24c790);color:#fff}.btn.outline-btn:active{background:var(--article-primary-hover,#1ba97a);color:#fff}.btn-group{align-items:center;display:flex;gap:40px;justify-content:center;margin-bottom:30px}.btn-group .btn{margin:0}.article-try{align-items:center;background:var(--article-bg-gray,#f3f5f7);border-radius:10px;color:var(--article-text,#3a4259);margin-top:30px;padding:40px 60px}.article-try,.article-try-content{display:flex;justify-content:space-between}.article-try-content{flex-direction:column}.article-try-title{font-size:20px;font-weight:700;line-height:23px;margin-bottom:10px;margin-top:0}.article-try-description{line-height:32px;margin-bottom:0;margin-top:0}.article-try .btn{margin:0 0 0 10px;min-width:220px}.article-show{align-items:center;background:var(--article-bg-gray,#f3f5f7);border-radius:10px;color:var(--article-text,#3a4259);margin-top:30px;padding:40px 30px 40px 60px}.article-show,.article-show-content{display:flex;justify-content:space-between}.article-show-content{flex-direction:column}.article-show-title{font-size:24px;font-weight:700;line-height:28px;margin-bottom:14px;margin-top:0}.article-show-description{line-height:30px;margin-bottom:0;margin-top:0}.article-show .btn{margin-left:0;margin-top:20px;min-width:220px}.article-show img{border-radius:10px;height:auto;margin-left:32px;max-width:368px;-o-object-fit:cover;object-fit:cover;width:100%}.btn-group-dark{background:#000;border-radius:20px;margin-top:40px;padding:16px 40px}.btn-group-dark__buttons{align-items:center;display:flex;flex-direction:column;gap:16px;justify-content:center}.btn-group-dark__item{text-align:center}.btn-group-dark__caption{color:#9ca3af;font-size:14px;font-weight:500;margin:16px 0 0}.btn.btn-outline-white{background:transparent;border:1px solid #fff;color:#fff;margin:0}.btn.btn-outline-white:hover{background:#fff;color:#000}.btn.btn-gradient{background:linear-gradient(to right,var(--article-gradient-start,#24c790),var(--article-gradient-end,#1ba97a));border:none;color:#000;margin:0}.btn.btn-gradient:hover{opacity:.9}@media (min-width:769px){.btn-group-dark{padding:40px}.btn-group-dark__buttons{flex-direction:row;gap:24px}}@media (max-width:768px){.btn-group{flex-direction:column;gap:10px}.article-try{align-items:center;flex-direction:column;padding:20px 16px;text-align:center}.article-try-description{line-height:21px}.article-try .btn{margin:20px 0}.article-show{flex-direction:column;padding:20px 16px;text-align:center}.article-show,.article-show-content{align-items:center}.article-show-description{line-height:21px}.article-show .btn,.article-show img{margin:20px 0}.btn-group-dark__buttons{gap:16px}}
+</style>

package/dist/sections/article/vigilkids/ArticleCta.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/ArticleFaq.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/ArticleFaq.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../composables/useInlineEdit'
+import ArticleFaqItem from './ArticleFaqItem.vue'
+
+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, 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>
+<!-- Visiva 风格：浅绿卡片 + 绿色标题 + 静态列表 -->
+  <div v-if="s.title" class="faq-card">
+    <div class="faq-card__header">
+      <h2 class="faq-card__title" v-bind="editableAttrs('title')">{{ s.title }}</h2>
+    </div>
+    <div class="faq-card__list">
+      <template v-for="blockId in blockOrder" :key="blockId">
+        <div v-if="blocks[blockId]" class="faq-card__item">
+          <h3 class="faq-card__question" v-bind="blockEditableAttrs(blockId, 'question')">{{ blocks[blockId]!.settings.question }}</h3>
+          <p class="faq-card__answer" v-bind="blockEditableAttrs(blockId, 'answer')">{{ blocks[blockId]!.settings.answer }}</p>
+        </div>
+      </template>
+    </div>
+  </div>
+
+  <!-- VigilKids 风格：手风琴折叠 -->
+  <div v-else class="faq-list">
+    <template v-for="blockId in blockOrder" :key="blockId">
+      <ArticleFaqItem v-if="blocks[blockId]" :settings="blocks[blockId]!.settings" />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.faq-list{background:var(--article-bg-gray,#f3f5f7);border-radius:10px;color:#333;margin-bottom:50px;margin-top:20px;padding:26px 20px}.faq-list :deep(.faq-item:not(:last-child)){margin-bottom:10px}.faq-card{background:var(--article-bg-faq,#f9fafb);border-radius:10px;font-size:14px;margin-top:40px;padding:28px 16px}.faq-card__header{align-items:center;display:flex;gap:8px;margin-bottom:16px}.faq-card__title{color:var(--article-primary,#24c790);font-size:18px;font-weight:700;margin:0}.faq-card__list{display:flex;flex-direction:column;gap:16px}.faq-card__question{font-size:14px;font-weight:700;margin:0 0 6px}.faq-card__answer{line-height:1.6;margin:0}@media (min-width:769px){.faq-card{border-radius:15px;font-size:16px;padding:28px 20px}.faq-card__title{font-size:20px}.faq-card__list{gap:24px}.faq-card__question{font-size:16px;margin-bottom:12px}}
+</style>

package/dist/sections/article/vigilkids/ArticleFaq.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/ArticleFaqItem.d.vue.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    settings: 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/ArticleFaqItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  settings: Record<string, unknown>
+}>()
+
+const active = ref(false)
+
+function toggle() {
+  active.value = !active.value
+}
+</script>
+
+<template>
+<div class="faq-item" :class="{ active }" @click="toggle">
+    <p class="faq-item-title">{{ settings.question }}</p>
+    <p class="faq-item-answer">{{ settings.answer }}</p>
+  </div>
+</template>
+
+<style scoped>
+.faq-item{background:#fff;border-radius:10px;cursor:pointer;padding:32px 26px 32px 18px;position:relative;transition:all .3s ease}.faq-item:hover{transform:translateY(-2px)}.faq-item-title{cursor:pointer;font-size:18px;font-weight:700;line-height:26px;margin-bottom:0;margin-top:0;padding-right:74px;transition:margin-bottom .3s ease}.faq-item-title:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:cover;content:"";height:26px;position:absolute;right:26px;top:30px;transition:transform .3s ease;width:26px}.faq-item.active .faq-item-title{margin-bottom:18px}.faq-item.active .faq-item-title:before{transform:rotate(180deg)}.faq-item-answer{color:#666;font-size:18px;line-height:27px;margin:0;max-height:0;opacity:0;overflow:hidden;padding:0 74px 0 22px;transition:max-height .4s ease,opacity .3s ease,padding .3s ease}.faq-item.active .faq-item-answer{max-height:500px;opacity:1;padding-bottom:0;padding-top:0}@media (max-width:768px){.faq-item{padding:20px 16px}.faq-item-title{font-size:14px;line-height:16px;padding-right:40px}.faq-item-title:before{height:16px;right:16px;top:20px;width:16px}.faq-item-answer{font-size:14px;line-height:16px;padding-left:0;padding-right:0}.faq-item.active .faq-item-title{margin-bottom:10px}}
+</style>

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    settings: 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;