@vigilkids/section-renderer-vue 0.5.0 → 0.5.1

package/dist/sections/article/prosemirror.d.ts

@@ -1,2 +1,4 @@
 /** 将 ProseMirror JSON 或 HTML 字符串转为渲染 HTML */
 export declare function renderContent(content: unknown): string;
+/** 将单段落 richtext 规范化为内联 HTML，避免嵌入 li/span 时额外生成块级 p */
+export declare function renderInlineContent(content: unknown): string;

package/dist/sections/article/prosemirror.mjs

@@ -67,3 +67,11 @@ export function renderContent(content) {
   }
   return "";
 }
+const singleParagraphWrapperPattern = /^\s*<p(?:\s[^>]*)?>([\s\S]*)<\/p>\s*$/i;
+export function renderInlineContent(content) {
+  const html = renderContent(content);
+  const matched = html.match(singleParagraphWrapperPattern);
+  if (!matched)
+    return html;
+  return matched[1] ?? "";
+}

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

@@ -11,10 +11,6 @@ import ProductCardVariantE from './product-card/ProductCardVariantE.vue'
 import ProductCardVariantF from './product-card/ProductCardVariantF.vue'
 import ProductCardVariantG from './product-card/ProductCardVariantG.vue'
 
-// ArticleProductCard 分发器（Shopify Hydrogen section variants 模式）
-// 根据 variant 选择子组件 + 根 class，内联 HTML 全部下沉到 variant 子组件
-// 子组件各自持有完整 useInlineEdit 契约，保证可独立替换和单测
-
 const props = defineProps<{
   blockOrder: string[]
   blocks: Record<string, BlockData>
@@ -32,7 +28,6 @@ const emit = defineEmits<{
 
 const variant = computed(() => String(props.settings.variant || 'A').toUpperCase())
 
-// variant 到 { 根 class, 子组件 } 的映射（对齐 vigilkids.css 1494-1500）
 const VARIANT_MAP = {
   A: { class: 'product-card', component: ProductCardVariantA },
   B: { class: 'product-card-compact', component: ProductCardVariantB },
@@ -43,7 +38,6 @@ const VARIANT_MAP = {
   G: { class: 'product-card-checklist', component: ProductCardVariantG },
 } as const
 
-// 未知 variant 时回退到 A，保证数据异常不会渲染空节点
 const resolved = computed(() => VARIANT_MAP[variant.value as keyof typeof VARIANT_MAP] || VARIANT_MAP.A)
 </script>
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BlockData } from '@vigilkids/section-core'
+import type { ArticleReferenceSnapshot, BlockData } from '@vigilkids/section-core'
 
 import { computed } from 'vue'
 
@@ -25,12 +25,28 @@ const s = computed(() => props.settings)
 const items = computed(() =>
   props.blockOrder
     .filter(id => props.blocks[id]?.type === 'related_item')
-    .map(id => ({ id, block: props.blocks[id]! })),
+    .map((id) => {
+      const block = props.blocks[id]!
+      const article = block.settings.article as ArticleReferenceSnapshot | null | undefined
+      const overrideImageURL = String(block.settings.cover_image_url || '')
+      const overrideImageAlt = String(block.settings.cover_image_alt || '')
+      const featuredImageAlt = article?.featured_image_alt || ''
+      const title = article?.title || ''
+
+      return {
+        id,
+        href: article?.url_path || '#',
+        title,
+        description: article?.excerpt || '',
+        imageURL: overrideImageURL || article?.featured_image_url || '',
+        imageAlt: overrideImageAlt || featuredImageAlt || title,
+      }
+    }),
 )
 
 const showDots = computed(() => !!s.value.show_dots)
 
-const { editableAttrs, blockEditableAttrs } = useInlineEdit({
+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),
@@ -42,39 +58,29 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
 
 <template>
   <section class="article-recommend" data-component="related-articles-carousel">
-    <h2 v-if="s.title" class="article-recommend-title" v-bind="editableAttrs('title')">
-      {{ s.title }}
-    </h2>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <h2 v-if="s.title" class="article-recommend-title" v-bind="editableAttrs('title')" v-html="s.title" />
     <div class="recommend-grid">
       <a
         v-for="(item, i) in items"
         :key="item.id"
-        :href="(item.block.settings.url as string) || '#'"
+        :href="item.href"
         class="recommend-card"
       >
         <div class="recommend-card-image">
           <img
-            :src="(item.block.settings.image_url as string) || ''"
-            :alt="(item.block.settings.image_alt as string) || ''"
+            :src="item.imageURL"
+            :alt="item.imageAlt"
           >
         </div>
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <p
-          class="recommend-card-title"
-          v-bind="blockEditableAttrs(item.id, 'title')"
-          v-html="item.block.settings.title"
-        />
+        <p class="recommend-card-title" v-html="item.title" />
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <p
-          class="recommend-card-desc"
-          v-bind="blockEditableAttrs(item.id, 'description')"
-          v-html="item.block.settings.description"
-        />
+        <p class="recommend-card-desc" v-html="item.description" />
         <span class="sr-only">{{ i + 1 }}</span>
       </a>
     </div>
-    <div v-if="showDots && items.length > 0" class="recommend-dots">
-      <!-- 首屏先给第一个 dot 标 active 作为 init 前视觉提示；embla 初始化后由 interactions/vigilkids.ts 的 syncActive 接管 -->
+    <div v-if="showDots && items.length > 1" class="recommend-dots">
       <span
         v-for="(item, i) in items"
         :key="item.id"

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

@@ -80,8 +80,8 @@ const { editableAttrs } = useInlineEdit({
             class="retention-banner-btn"
             :href="(s.cta_url as string) || '#'"
             v-bind="editableAttrs('cta_label')"
+            v-html="s.cta_label"
           >
-            {{ s.cta_label }}
           </a>
         </div>
       </div>
@@ -91,8 +91,9 @@ const { editableAttrs } = useInlineEdit({
         aria-label="Close"
         @click.stop="handleClose"
       >
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M4 4L12 12M12 4L4 12" stroke="#000" stroke-width="1.5" stroke-linecap="round" />
+        <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 1L1 12" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          <path d="M12 12L1 1" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
       </button>
     </div>

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

@@ -4,6 +4,7 @@ import type { BlockData } from '@vigilkids/section-core'
 import { computed } from 'vue'
 
 import { useInlineEdit } from '../../../composables/useInlineEdit'
+import { renderInlineContent } from '../prosemirror'
 
 const props = defineProps<{
   blockOrder: string[]
@@ -25,7 +26,11 @@ const s = computed(() => props.settings)
 const items = computed(() =>
   props.blockOrder
     .filter(id => props.blocks[id]?.type === 'intro_item')
-    .map(id => ({ id, block: props.blocks[id]! })),
+    .map(id => ({
+      id,
+      block: props.blocks[id]!,
+      renderedText: renderInlineContent(props.blocks[id]!.settings.text),
+    })),
 )
 
 const { editableAttrs, blockEditableAttrs } = useInlineEdit({
@@ -42,15 +47,17 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
   <section>
     <p class="section-intro">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <span class="section-intro-bold" v-bind="editableAttrs('bold_text')" v-html="s.bold_text" />
+      <span v-if="s.bold_text" class="section-intro-bold" v-bind="editableAttrs('bold_text')" v-html="s.bold_text" />
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <span v-bind="editableAttrs('intro_text')" v-html="s.intro_text" />
+      <span v-if="s.intro_text" v-bind="editableAttrs('intro_text')" v-html="s.intro_text" />
     </p>
-    <ul class="section-intro-list">
+    <ul v-if="items.length" class="section-intro-list">
       <li v-for="item in items" :key="item.id">
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <span v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
+        <span v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
       </li>
     </ul>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p v-if="s.trailing_text" class="section-intro" v-bind="editableAttrs('trailing_text')" v-html="s.trailing_text" />
   </section>
 </template>

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

@@ -41,7 +41,7 @@ const { editableAttrs } = useInlineEdit({
 <template>
   <h3 :class="headingClass">
     <!-- eslint-disable-next-line vue/no-v-html -->
-    <span :class="iconClass" v-bind="editableAttrs('number')" v-html="s.number" />
+    <span :class="iconClass" v-bind="editableAttrs('badge_text')" v-html="s.badge_text" />
     <!-- eslint-disable-next-line vue/no-v-html -->
     <span v-bind="editableAttrs('text')" v-html="s.text" />
   </h3>

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

@@ -50,7 +50,8 @@ const { editableAttrs } = useInlineEdit({
   <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>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <span v-bind="editableAttrs('label_text')" v-html="s.label_text" />
     </div>
     <!-- eslint-disable-next-line vue/no-v-html -->
     <p :class="contentClass" v-bind="editableAttrs('content')" v-html="s.content" />

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

@@ -4,6 +4,7 @@ import type { BlockData } from '@vigilkids/section-core'
 import { computed } from 'vue'
 
 import { useInlineEdit } from '../../../composables/useInlineEdit'
+import { renderInlineContent } from '../prosemirror'
 
 const props = defineProps<{
   blockOrder: string[]
@@ -31,10 +32,14 @@ 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]! })),
+    .map(id => ({
+      id,
+      block: props.blocks[id]!,
+      renderedText: renderInlineContent(props.blocks[id]!.settings.text),
+    })),
 )
 
-const { blockEditableAttrs } = 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),
@@ -45,12 +50,14 @@ const { blockEditableAttrs } = useInlineEdit({
 </script>
 
 <template>
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <p v-if="s.title" class="toc-title" v-bind="editableAttrs('title')" v-html="s.title" />
   <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" />
+    <li v-for="item in items" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
   </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" />
+    <li v-for="item in items" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
   </ul>
 </template>

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

@@ -4,6 +4,7 @@ import type { BlockData } from '@vigilkids/section-core'
 import { computed } from 'vue'
 
 import { useInlineEdit } from '../../../composables/useInlineEdit'
+import { renderInlineContent } from '../prosemirror'
 
 const props = defineProps<{
   blockOrder: string[]
@@ -25,7 +26,11 @@ const s = computed(() => props.settings)
 const features = computed(() =>
   props.blockOrder
     .filter(id => props.blocks[id]?.type === 'feature')
-    .map(id => ({ id, block: props.blocks[id]! })),
+    .map(id => ({
+      id,
+      block: props.blocks[id]!,
+      renderedText: renderInlineContent(props.blocks[id]!.settings.text),
+    })),
 )
 
 const { editableAttrs, blockEditableAttrs } = useInlineEdit({
@@ -39,52 +44,56 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
 </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">
+  <section>
+    <div 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 -->
-        <li
-          v-for="item in features"
-          :key="item.id"
-          v-bind="blockEditableAttrs(item.id, 'text')"
-          v-html="item.block.settings.text"
+        <p
+          v-if="s.description"
+          class="top-banner-desc"
+          v-bind="editableAttrs('description')"
+          v-html="s.description"
         />
-      </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')"
+        <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.renderedText"
+          />
+        </ul>
+        <div class="action-buttons">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <a
+            v-if="s.cta_primary_label"
+            class="action-btn-primary"
+            :href="(s.cta_primary_url as string) || '#'"
+            v-bind="editableAttrs('cta_primary_label')"
+            v-html="s.cta_primary_label"
+          />
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <a
+            v-if="s.cta_outline_label"
+            class="action-btn-outline"
+            :href="(s.cta_outline_url as string) || '#'"
+            v-bind="editableAttrs('cta_outline_label')"
+            v-html="s.cta_outline_label"
+          />
+        </div>
+      </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) || ''"
       >
-        {{ 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/product-card/ProductCardCtaGroup.vue

@@ -14,8 +14,8 @@ const { s, editableAttrs } = props
 <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" />
+    <a :href="(s.cta_primary_url as string) || '#'" class="action-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" />
+    <a :href="(s.cta_outline_url as string) || '#'" class="action-btn-outline" v-bind="editableAttrs('cta_outline_label')" v-html="s.cta_outline_label" />
   </div>
 </template>

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

@@ -4,10 +4,9 @@ import type { BlockData } from '@vigilkids/section-core'
 import { computed } from 'vue'
 
 import { useInlineEdit } from '../../../../composables/useInlineEdit'
+import { renderInlineContent } from '../../prosemirror'
 import ProductCardCtaGroup from './ProductCardCtaGroup.vue'
 
-// Variant D: 功能列表 + 手机图（product-card-features）
-// 消费 feature_item 类型的 blocks 渲染功能列表项
 const props = defineProps<{
   blockOrder: string[]
   blocks: Record<string, BlockData>
@@ -25,11 +24,14 @@ const emit = defineEmits<{
 
 const s = computed(() => props.settings)
 
-// 按 blockOrder 顺序过滤 feature_item，保证管理端拖拽顺序与渲染一致
-const featureItems = computed(() =>
+const featureDots = computed(() =>
   props.blockOrder
-    .filter(id => props.blocks[id]?.type === 'feature_item')
-    .map(id => ({ id, block: props.blocks[id]! })),
+    .filter(id => props.blocks[id]?.type === 'feature_dot')
+    .map(id => ({
+      id,
+      block: props.blocks[id]!,
+      renderedText: renderInlineContent(props.blocks[id]!.settings.text),
+    })),
 )
 
 const { editableAttrs, blockEditableAttrs } = useInlineEdit({
@@ -47,9 +49,9 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
   <div>
     <!-- eslint-disable-next-line vue/no-v-html -->
     <p class="product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
-    <ul class="product-feature-list">
+    <ul class="feature-dot-list">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <li v-for="item in featureItems" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
+      <li v-for="item in featureDots" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
     </ul>
     <ProductCardCtaGroup :s="s" :editable-attrs="editableAttrs" />
   </div>

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

@@ -4,6 +4,7 @@ import type { BlockData } from '@vigilkids/section-core'
 import { computed } from 'vue'
 
 import { useInlineEdit } from '../../../../composables/useInlineEdit'
+import { renderInlineContent } from '../../prosemirror'
 import ProductCardCtaGroup from './ProductCardCtaGroup.vue'
 
 // Variant E: 两侧装饰 + feature-dot（product-card-split）
@@ -28,7 +29,11 @@ const s = computed(() => props.settings)
 const featureDots = computed(() =>
   props.blockOrder
     .filter(id => props.blocks[id]?.type === 'feature_dot')
-    .map(id => ({ id, block: props.blocks[id]! })),
+    .map(id => ({
+      id,
+      block: props.blocks[id]!,
+      renderedText: renderInlineContent(props.blocks[id]!.settings.text),
+    })),
 )
 
 const { editableAttrs, blockEditableAttrs } = useInlineEdit({
@@ -48,7 +53,7 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
     <p class="split-product-name product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
     <ul class="feature-dot-list">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <li v-for="item in featureDots" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
+      <li v-for="item in featureDots" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
     </ul>
     <ProductCardCtaGroup :s="s" :editable-attrs="editableAttrs" />
   </div>

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

@@ -4,11 +4,8 @@ import type { BlockData } from '@vigilkids/section-core'
 import { computed } from 'vue'
 
 import { useInlineEdit } from '../../../../composables/useInlineEdit'
+import { renderInlineContent } from '../../prosemirror'
 
-// Variant F: 按钮纵向排列（product-card-vertical）
-// 左右分栏 + 中间分隔线结构，CTA 按钮垂直堆叠
-// 因结构与其它 variant 的 action-buttons 横向布局差异大，未使用共享 CtaGroup
-// 保留直接渲染 a 标签，保证纵向容器的样式作用于按钮本身
 const props = defineProps<{
   blockOrder: string[]
   blocks: Record<string, BlockData>
@@ -26,7 +23,17 @@ const emit = defineEmits<{
 
 const s = computed(() => props.settings)
 
-const { editableAttrs } = useInlineEdit({
+const featureChecks = computed(() =>
+  props.blockOrder
+    .filter(id => props.blocks[id]?.type === 'feature_check')
+    .map(id => ({
+      id,
+      block: props.blocks[id]!,
+      renderedText: renderInlineContent(props.blocks[id]!.settings.text),
+    })),
+)
+
+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),
@@ -43,14 +50,16 @@ const { editableAttrs } = useInlineEdit({
       <!-- eslint-disable-next-line vue/no-v-html -->
       <p class="product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
     </div>
-    <!-- eslint-disable-next-line vue/no-v-html -->
-    <p class="product-desc" v-bind="editableAttrs('product_desc')" v-html="s.product_desc" />
+    <ul class="feature-check-list">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <li v-for="item in featureChecks" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
+    </ul>
   </div>
   <div class="card-vertical-divider" />
   <div class="card-vertical-right">
     <!-- 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" />
+    <a :href="(s.cta_primary_url as string) || '#'" class="action-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" />
+    <a :href="(s.cta_outline_url as string) || '#'" class="action-btn-outline" v-bind="editableAttrs('cta_outline_label')" v-html="s.cta_outline_label" />
   </div>
 </template>

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

@@ -4,10 +4,9 @@ import type { BlockData } from '@vigilkids/section-core'
 import { computed } from 'vue'
 
 import { useInlineEdit } from '../../../../composables/useInlineEdit'
+import { renderInlineContent } from '../../prosemirror'
 import ProductCardCtaGroup from './ProductCardCtaGroup.vue'
 
-// Variant G: 蓝底 checklist（product-card-checklist）
-// 与 D 相同使用 feature_item blocks，但无图片，根 class 切换为深色主题
 const props = defineProps<{
   blockOrder: string[]
   blocks: Record<string, BlockData>
@@ -28,7 +27,11 @@ const s = computed(() => props.settings)
 const featureItems = computed(() =>
   props.blockOrder
     .filter(id => props.blocks[id]?.type === 'feature_item')
-    .map(id => ({ id, block: props.blocks[id]! })),
+    .map(id => ({
+      id,
+      block: props.blocks[id]!,
+      renderedText: renderInlineContent(props.blocks[id]!.settings.text),
+    })),
 )
 
 const { editableAttrs, blockEditableAttrs } = useInlineEdit({
@@ -46,7 +49,7 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
   <p class="product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
   <ul class="product-feature-list">
     <!-- eslint-disable-next-line vue/no-v-html -->
-    <li v-for="item in featureItems" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
+    <li v-for="item in featureItems" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.renderedText" />
   </ul>
   <ProductCardCtaGroup :s="s" :editable-attrs="editableAttrs" />
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vigilkids/section-renderer-vue",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Vue 3 adapter for OneX Section Renderer SDK",
   "type": "module",
   "main": "./dist/index.mjs",
@@ -32,6 +32,12 @@
   "dependencies": {
     "embla-carousel": "^8.3.0"
   },
+  "scripts": {
+    "build": "unbuild",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write src/"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -41,8 +47,8 @@
     "directory": "packages/section-renderer-vue"
   },
   "peerDependencies": {
-    "vue": "^3.4.0",
-    "@vigilkids/section-core": "0.1.1"
+    "@vigilkids/section-core": "^0.1.2",
+    "vue": "^3.4.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.13.2",
@@ -51,11 +57,5 @@
     "prettier": "^3.5.3",
     "unbuild": "^3.5.0",
     "vue-tsc": "^2.0.21"
-  },
-  "scripts": {
-    "build": "unbuild",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "format": "prettier --write src/"
   }
-}
+}