@vigilkids/section-renderer-vue 0.0.1 → 0.1.0

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

@@ -28,9 +28,9 @@ 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),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
@@ -38,7 +38,7 @@ const { editableAttrs } = useInlineEdit({
 <!-- button variant: 单个居中按钮 -->
   <a
     v-if="variant === 'button'"
-    :href="safeUrl(String(s.button_url || ''))"
+    :href="editorMode ? undefined : safeUrl(String(s.button_url || ''))"
     class="btn btn-primary"
     v-bind="editableAttrs('button_text')"
   >
@@ -48,7 +48,7 @@ const { editableAttrs } = useInlineEdit({
   <!-- button-group variant: 两个按钮并排 -->
   <div v-else-if="variant === 'button-group'" class="btn-group">
     <a
-      :href="safeUrl(String(s.button_url || ''))"
+      :href="editorMode ? undefined : safeUrl(String(s.button_url || ''))"
       class="btn btn-primary"
       v-bind="editableAttrs('button_text')"
     >
@@ -56,7 +56,7 @@ const { editableAttrs } = useInlineEdit({
     </a>
     <a
       v-if="s.secondary_button_text"
-      :href="safeUrl(String(s.secondary_button_url || ''))"
+      :href="editorMode ? undefined : safeUrl(String(s.secondary_button_url || ''))"
       class="btn outline-btn"
       v-bind="editableAttrs('secondary_button_text')"
     >
@@ -67,12 +67,16 @@ const { editableAttrs } = useInlineEdit({
   <!-- 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>
+      <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 || ''))"
+      :href="editorMode ? undefined : safeUrl(String(s.button_url || ''))"
       class="btn btn-primary"
       v-bind="editableAttrs('button_text')"
     >
@@ -83,39 +87,62 @@ const { editableAttrs } = useInlineEdit({
   <!-- 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>
+      <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 || ''))"
+        :href="editorMode ? undefined : 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"
-    >
+    <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')">
+        <a
+          :href="editorMode ? undefined : 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>
+        <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')">
+        <a
+          :href="editorMode ? undefined : 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>
+        <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>

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

@@ -27,9 +27,9 @@ 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),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
@@ -37,13 +37,19 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
 <!-- 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>
+      <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>
+          <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>

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

@@ -14,8 +14,12 @@ function toggle() {
 
 <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>
+    <p class="faq-item-title">
+      {{ settings.question }}
+    </p>
+    <p class="faq-item-answer">
+      {{ settings.answer }}
+    </p>
   </div>
 </template>
 

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

@@ -28,9 +28,9 @@ 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),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
@@ -38,13 +38,17 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
 <!-- light / dark 变体：图片+特性列表+CTA (Visiva) -->
   <div
     v-if="variant === 'light' || variant === 'dark'"
-    :class="['feature-card', { 'feature-card--dark': variant === 'dark' }]"
+    class="feature-card" :class="[{ 'feature-card--dark': variant === 'dark' }]"
   >
     <div class="feature-card__text">
-      <h2 v-if="s.title" class="feature-card__title" v-bind="editableAttrs('title')">{{ s.title }}</h2>
+      <h2 v-if="s.title" class="feature-card__title" v-bind="editableAttrs('title')">
+        {{ s.title }}
+      </h2>
       <ul class="feature-card__list">
         <template v-for="blockId in blockOrder" :key="blockId">
-          <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">{{ blocks[blockId]!.settings.text }}</li>
+          <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
+            {{ blocks[blockId]!.settings.text }}
+          </li>
         </template>
       </ul>
       <a
@@ -57,16 +61,20 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
       </a>
     </div>
     <div v-if="s.image_src" class="feature-card__image">
-      <img :src="String(s.image_src)" alt="" loading="lazy" />
+      <img :src="String(s.image_src)" alt="" loading="lazy">
     </div>
   </div>
 
   <!-- default 变体：原有灰色特性框 (VigilKids，完全不动) -->
   <div v-else class="article-feature">
-    <p v-if="s.title" class="article-feature-title" v-bind="editableAttrs('title')">{{ s.title }}</p>
+    <p v-if="s.title" class="article-feature-title" v-bind="editableAttrs('title')">
+      {{ s.title }}
+    </p>
     <ul class="article-feature-list">
       <template v-for="blockId in blockOrder" :key="blockId">
-        <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">{{ blocks[blockId]!.settings.text }}</li>
+        <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
+          {{ blocks[blockId]!.settings.text }}
+        </li>
       </template>
     </ul>
   </div>

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

@@ -27,17 +27,16 @@ 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),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
 <template>
 <h2
     :id="String(s.anchor || '')"
-    :class="[
-      'article-heading',
+    class="article-heading" :class="[
       {
         'article-heading--plain': variant === 'plain',
         'article-heading--accent': variant === 'accent',

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

@@ -29,9 +29,9 @@ 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),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
@@ -39,11 +39,15 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
 <!-- tips / note 变体：角标样式 (Visiva) -->
   <div v-if="variant === 'tips' || variant === 'note'" class="notice-badge">
     <div class="notice-badge__tag">
-      <span class="notice-badge__label" v-bind="editableAttrs('title')">{{ s.title || 'Tips' }}</span>
+      <span class="notice-badge__label" v-bind="editableAttrs('title')">{{
+        s.title || 'Tips'
+      }}</span>
     </div>
     <div class="notice-badge__content">
       <template v-for="blockId in blockOrder" :key="blockId">
-        <p v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">{{ blocks[blockId]!.settings.text }}</p>
+        <p v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
+          {{ blocks[blockId]!.settings.text }}
+        </p>
       </template>
     </div>
   </div>
@@ -51,12 +55,30 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
   <!-- info 变体：圆角卡片+图标标题 (Visiva) -->
   <div v-else-if="variant === 'info'" class="notice-card">
     <div v-if="s.title" class="notice-card__header">
-      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
-      <h3 class="notice-card__title" v-bind="editableAttrs('title')">{{ s.title }}</h3>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="22"
+        height="22"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 16v-4" />
+        <path d="M12 8h.01" />
+      </svg>
+      <h3 class="notice-card__title" v-bind="editableAttrs('title')">
+        {{ s.title }}
+      </h3>
     </div>
     <div class="notice-card__content">
       <template v-for="blockId in blockOrder" :key="blockId">
-        <p v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">{{ blocks[blockId]!.settings.text }}</p>
+        <p v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
+          {{ blocks[blockId]!.settings.text }}
+        </p>
       </template>
     </div>
   </div>
@@ -66,12 +88,14 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
     v-else
     class="notice-info"
     :class="{
-      warning: isWarning,
+      'warning': isWarning,
       'notice-info--row-child': isRow,
     }"
   >
     <template v-for="blockId in blockOrder" :key="blockId">
-      <p v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">{{ blocks[blockId]!.settings.text }}</p>
+      <p v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
+        {{ blocks[blockId]!.settings.text }}
+      </p>
     </template>
   </div>
 </template>

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

@@ -24,14 +24,14 @@ const s = computed(() => props.settings)
 
 const pros = computed(() =>
   props.blockOrder
-    .filter((id) => props.blocks[id]?.type === 'pro')
-    .map((id) => ({ id, block: props.blocks[id]! })),
+    .filter(id => props.blocks[id]?.type === 'pro')
+    .map(id => ({ id, block: props.blocks[id]! })),
 )
 
 const cons = computed(() =>
   props.blockOrder
-    .filter((id) => props.blocks[id]?.type === 'con')
-    .map((id) => ({ id, block: props.blocks[id]! })),
+    .filter(id => props.blocks[id]?.type === 'con')
+    .map(id => ({ id, block: props.blocks[id]! })),
 )
 
 const isDashed = computed(() => String(s.value.variant) === 'dashed')
@@ -40,9 +40,9 @@ 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),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 

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

@@ -29,9 +29,9 @@ 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),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
@@ -40,15 +40,21 @@ const { blockEditableAttrs } = useInlineEdit({
   <div v-if="blockOrder.length > 0" class="qa-card">
     <template v-for="blockId in blockOrder" :key="blockId">
       <div v-if="blocks[blockId]" class="qa-card__item">
-        <h3 class="qa-card__question" v-bind="blockEditableAttrs(blockId, 'question')">{{ blocks[blockId]!.settings.question }}</h3>
-        <p class="qa-card__answer">{{ blocks[blockId]!.settings.answer }}</p>
+        <h3 class="qa-card__question" v-bind="blockEditableAttrs(blockId, 'question')">
+          {{ blocks[blockId]!.settings.question }}
+        </h3>
+        <p class="qa-card__answer" v-bind="blockEditableAttrs(blockId, 'answer')">
+          {{ blocks[blockId]!.settings.answer }}
+        </p>
       </div>
     </template>
   </div>
 
   <!-- VigilKids: 单条 richtext 问答 -->
   <div v-else class="article-question">
-    <p class="article-question-title">{{ title }}</p>
+    <p class="article-question-title">
+      {{ title }}
+    </p>
     <div class="article-question-content" v-html="renderedContent" />
   </div>
 </template>

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

@@ -28,18 +28,20 @@ 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),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
 <template>
 <div class="article-info">
-    <p v-if="s.title" class="article-info-title" v-bind="editableAttrs('title')">{{ s.title }}</p>
+    <p v-if="s.title" class="article-info-title" v-bind="editableAttrs('title')">
+      {{ s.title }}
+    </p>
     <div class="article-info-content" v-html="renderedContent" />
     <cite v-if="s.attribution" class="article-info-attribution">
-      <span class="article-info-divider"></span>
+      <span class="article-info-divider" />
       <span v-bind="editableAttrs('attribution')">by {{ s.attribution }}</span>
     </cite>
   </div>

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

@@ -27,9 +27,9 @@ 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),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
@@ -37,8 +37,12 @@ const { blockEditableAttrs } = useInlineEdit({
 <ul class="step-list">
     <template v-for="blockId in blockOrder" :key="blockId">
       <li v-if="blocks[blockId]">
-        <span class="primary-color" v-bind="blockEditableAttrs(blockId, 'label')">{{ blocks[blockId]!.settings.label }}</span>
-        {{ blocks[blockId]!.settings.description }}
+        <span class="primary-color" v-bind="blockEditableAttrs(blockId, 'label')">{{
+          blocks[blockId]!.settings.label
+        }}</span>
+        <span v-bind="blockEditableAttrs(blockId, 'description')">{{
+          blocks[blockId]!.settings.description
+        }}</span>
       </li>
     </template>
   </ul>

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

@@ -27,24 +27,36 @@ 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),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
 <template>
-<h3 :class="['article-subheading', `article-subheading--${variant}`]">
+<h3 class="article-subheading" :class="[`article-subheading--${variant}`]">
     <!-- numbered: 实心绿色圆形+白色数字 (VigilKids) -->
-    <span v-if="variant === 'numbered' && s.number" class="article-subheading__number" v-bind="editableAttrs('number')">
+    <span
+      v-if="variant === 'numbered' && s.number"
+      class="article-subheading__number"
+      v-bind="editableAttrs('number')"
+    >
       {{ s.number }}
     </span>
     <!-- pill: 绿色药丸标签 (Visiva) -->
-    <span v-else-if="variant === 'pill' && s.label" class="article-subheading__pill" v-bind="editableAttrs('label')">
+    <span
+      v-else-if="variant === 'pill' && s.label"
+      class="article-subheading__pill"
+      v-bind="editableAttrs('label')"
+    >
       {{ s.label }}
     </span>
     <!-- icon: 浅色圆形+深色数字 (Visiva) -->
-    <span v-else-if="variant === 'icon' && s.number" class="article-subheading__icon" v-bind="editableAttrs('number')">
+    <span
+      v-else-if="variant === 'icon' && s.number"
+      class="article-subheading__icon"
+      v-bind="editableAttrs('number')"
+    >
       {{ s.number }}
     </span>
     <span v-bind="editableAttrs('title')">{{ s.title }}</span>

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

@@ -18,12 +18,15 @@ interface ColumnDef {
 }
 
 function parseJsonOrArray<T>(value: unknown): T[] {
-  if (Array.isArray(value)) return value as T[]
+  if (Array.isArray(value))
+    return value as T[]
   if (typeof value === 'string') {
     try {
       const parsed = JSON.parse(value)
-      if (Array.isArray(parsed)) return parsed as T[]
-    } catch {
+      if (Array.isArray(parsed))
+        return parsed as T[]
+    }
+    catch {
       /* JSON 解析失败，返回空数组 */
     }
   }
@@ -32,13 +35,11 @@ function parseJsonOrArray<T>(value: unknown): T[] {
 
 const isSticky = computed(() => String(s.value.variant) === 'sticky')
 
-const columns = computed<ColumnDef[]>(() =>
-  parseJsonOrArray<ColumnDef>(s.value.columns),
-)
+const columns = computed<ColumnDef[]>(() => parseJsonOrArray<ColumnDef>(s.value.columns))
 
 const rows = computed(() =>
   props.blockOrder
-    .filter((id) => props.blocks[id]?.type === 'table-row')
+    .filter(id => props.blocks[id]?.type === 'table-row')
     .map((id) => {
       const block = props.blocks[id]!
       return parseJsonOrArray<string>(block.settings.cells)
@@ -47,7 +48,7 @@ const rows = computed(() =>
 </script>
 
 <template>
-<div :class="['contrast-table', { 'sticky-table': isSticky }]">
+<div class="contrast-table" :class="[{ 'sticky-table': isSticky }]">
     <table>
       <thead align="left">
         <tr>

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

@@ -10,7 +10,7 @@ interface TocGroup {
   text: string
   anchor: string
   hot: boolean
-  children: { id: string; text: string; anchor: string }[]
+  children: { id: string, text: string, anchor: string }[]
 }
 
 const props = defineProps<{
@@ -36,7 +36,8 @@ const tocGroups = computed<TocGroup[]>(() => {
 
   for (const blockId of props.blockOrder) {
     const block = props.blocks[blockId]
-    if (!block) continue
+    if (!block)
+      continue
 
     if (block.type === 'toc-h2') {
       groups.push({
@@ -46,7 +47,8 @@ const tocGroups = computed<TocGroup[]>(() => {
         hot: Boolean(block.settings.hot),
         children: [],
       })
-    } else if (block.type === 'toc-h3' && groups.length > 0) {
+    }
+    else if (block.type === 'toc-h3' && groups.length > 0) {
       groups[groups.length - 1]!.children.push({
         id: blockId,
         text: String(block.settings.text || ''),
@@ -58,22 +60,24 @@ const tocGroups = computed<TocGroup[]>(() => {
   return groups
 })
 
-const hotIconSrc =
-  "data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5479 11.9702C10.0966 11.9702 9.71456 12.5389 9.71456 13.2188C9.71456 13.8948 10.0966 14.4668 10.5479 14.4668C10.9992 14.4668 11.3819 13.8968 11.3819 13.2175C11.3819 12.5389 10.9999 11.9689 10.5485 11.9689L10.5479 11.9702ZM15.3977 3.54841C15.3258 3.46817 15.2338 3.40848 15.1312 3.37545C15.0286 3.34242 14.919 3.33723 14.8138 3.36042C14.6018 3.41108 14.4271 3.57374 14.3471 3.79507C14.1688 4.31816 14.0036 4.84565 13.8518 5.37704C13.6385 4.93438 13.3985 4.50972 13.1318 4.10374C12.1478 2.60444 10.7985 1.3318 8.88657 0.0985037C8.7956 0.0391916 8.69032 0.00547728 8.58182 0.000902909C8.47331 -0.00367146 8.36558 0.021063 8.26993 0.0725076C8.17116 0.129583 8.08767 0.209723 8.02661 0.306079C7.96554 0.402435 7.92871 0.512143 7.91927 0.625828C7.65327 3.22973 7.16395 5.86901 5.492 7.72696L5.27001 7.25364C5.0747 6.84432 4.89202 6.45901 4.7747 6.12901C4.64802 5.76569 4.27671 5.5837 3.94538 5.72237C3.7931 5.78848 3.67093 5.90898 3.60272 6.06034L3.46806 6.347C2.64741 8.08696 1.52544 10.4736 1.3561 12.4915C1.00477 16.7687 4.55669 19.4567 8.25059 19.9033C9.06192 20.0013 9.87722 20.0233 10.6919 19.9733C13.5965 19.784 17.125 18.1554 18.3143 14.1468C19.0843 11.5449 18.7837 7.21032 15.3977 3.54708V3.54774V3.54841ZM7.82794 15.1521C7.82794 15.4901 7.57528 15.7655 7.26462 15.7655C6.95464 15.7668 6.70329 15.4921 6.70196 15.1521V13.7588L5.542 13.7788V15.1861C5.542 15.5234 5.28934 15.7994 4.97868 15.7994C4.66936 15.8008 4.41669 15.5261 4.41536 15.1861V11.4189C4.41536 11.0802 4.66735 10.8056 4.97868 10.8056C5.28934 10.8056 5.54134 11.0802 5.54134 11.4189V12.5515L6.70196 12.5322V11.3855C6.70196 11.0469 6.95395 10.7716 7.26462 10.7716C7.57528 10.7716 7.82727 11.0469 7.82727 11.3849V15.1515H7.82794V15.1521ZM10.5479 15.6908C9.4679 15.6908 8.59059 14.5801 8.59059 13.2155C8.59059 11.8509 9.4679 10.7402 10.5479 10.7402C11.6278 10.7402 12.5078 11.8509 12.5078 13.2155C12.5065 14.5801 11.6278 15.6908 10.5479 15.6908V15.6908ZM15.6504 12.1022H14.9351V15.1188C14.9351 15.4568 14.6838 15.7321 14.3731 15.7321C14.0631 15.7334 13.8111 15.4588 13.8091 15.1188V12.1022H13.0951C13.0202 12.1022 12.9461 12.0862 12.8778 12.0553C12.8095 12.0244 12.7486 11.9792 12.6991 11.9229C12.5931 11.8023 12.5339 11.6475 12.5325 11.4869C12.5325 11.1482 12.7845 10.8736 13.0951 10.8736H15.6484C15.9591 10.8736 16.2104 11.1482 16.2104 11.4869C16.2099 11.6477 16.1506 11.8028 16.0437 11.9229C15.9951 11.9796 15.9348 12.0251 15.8669 12.0562C15.799 12.0872 15.7251 12.1032 15.6504 12.1029V12.1022Z' fill='%23F74343'/%3E%3C/svg%3E"
+const hotIconSrc
+  = 'data:image/svg+xml,%3Csvg viewBox=\'0 0 20 20\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M10.5479 11.9702C10.0966 11.9702 9.71456 12.5389 9.71456 13.2188C9.71456 13.8948 10.0966 14.4668 10.5479 14.4668C10.9992 14.4668 11.3819 13.8968 11.3819 13.2175C11.3819 12.5389 10.9999 11.9689 10.5485 11.9689L10.5479 11.9702ZM15.3977 3.54841C15.3258 3.46817 15.2338 3.40848 15.1312 3.37545C15.0286 3.34242 14.919 3.33723 14.8138 3.36042C14.6018 3.41108 14.4271 3.57374 14.3471 3.79507C14.1688 4.31816 14.0036 4.84565 13.8518 5.37704C13.6385 4.93438 13.3985 4.50972 13.1318 4.10374C12.1478 2.60444 10.7985 1.3318 8.88657 0.0985037C8.7956 0.0391916 8.69032 0.00547728 8.58182 0.000902909C8.47331 -0.00367146 8.36558 0.021063 8.26993 0.0725076C8.17116 0.129583 8.08767 0.209723 8.02661 0.306079C7.96554 0.402435 7.92871 0.512143 7.91927 0.625828C7.65327 3.22973 7.16395 5.86901 5.492 7.72696L5.27001 7.25364C5.0747 6.84432 4.89202 6.45901 4.7747 6.12901C4.64802 5.76569 4.27671 5.5837 3.94538 5.72237C3.7931 5.78848 3.67093 5.90898 3.60272 6.06034L3.46806 6.347C2.64741 8.08696 1.52544 10.4736 1.3561 12.4915C1.00477 16.7687 4.55669 19.4567 8.25059 19.9033C9.06192 20.0013 9.87722 20.0233 10.6919 19.9733C13.5965 19.784 17.125 18.1554 18.3143 14.1468C19.0843 11.5449 18.7837 7.21032 15.3977 3.54708V3.54774V3.54841ZM7.82794 15.1521C7.82794 15.4901 7.57528 15.7655 7.26462 15.7655C6.95464 15.7668 6.70329 15.4921 6.70196 15.1521V13.7588L5.542 13.7788V15.1861C5.542 15.5234 5.28934 15.7994 4.97868 15.7994C4.66936 15.8008 4.41669 15.5261 4.41536 15.1861V11.4189C4.41536 11.0802 4.66735 10.8056 4.97868 10.8056C5.28934 10.8056 5.54134 11.0802 5.54134 11.4189V12.5515L6.70196 12.5322V11.3855C6.70196 11.0469 6.95395 10.7716 7.26462 10.7716C7.57528 10.7716 7.82727 11.0469 7.82727 11.3849V15.1515H7.82794V15.1521ZM10.5479 15.6908C9.4679 15.6908 8.59059 14.5801 8.59059 13.2155C8.59059 11.8509 9.4679 10.7402 10.5479 10.7402C11.6278 10.7402 12.5078 11.8509 12.5078 13.2155C12.5065 14.5801 11.6278 15.6908 10.5479 15.6908V15.6908ZM15.6504 12.1022H14.9351V15.1188C14.9351 15.4568 14.6838 15.7321 14.3731 15.7321C14.0631 15.7334 13.8111 15.4588 13.8091 15.1188V12.1022H13.0951C13.0202 12.1022 12.9461 12.0862 12.8778 12.0553C12.8095 12.0244 12.7486 11.9792 12.6991 11.9229C12.5931 11.8023 12.5339 11.6475 12.5325 11.4869C12.5325 11.1482 12.7845 10.8736 13.0951 10.8736H15.6484C15.9591 10.8736 16.2104 11.1482 16.2104 11.4869C16.2099 11.6477 16.1506 11.8028 16.0437 11.9229C15.9951 11.9796 15.9348 12.0251 15.8669 12.0562C15.799 12.0872 15.7251 12.1032 15.6504 12.1029V12.1022Z\' fill=\'%23F74343\'/%3E%3C/svg%3E'
 
 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),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>
 
 <template>
 <ul class="level-1">
-    <li class="table-of-contents" v-bind="editableAttrs('title')">{{ title }}</li>
+    <li class="table-of-contents" v-bind="editableAttrs('title')">
+      {{ title }}
+    </li>
     <template v-for="group in tocGroups" :key="group.id">
       <li :class="{ 'hot-link': group.hot }">
         <a :href="`#${group.anchor}`">
@@ -85,7 +89,7 @@ const { editableAttrs } = useInlineEdit({
             width="20"
             height="20"
             alt="hot"
-          />
+          >
         </a>
       </li>
       <ul v-if="group.children.length > 0" class="level-2">

package/dist/sections/article/visiva/ArticleBulletList.vue

@@ -27,9 +27,9 @@ 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),
+  onEditStart: key => emit('inline-edit-start', key),
   onEditEnd: () => emit('inline-edit-end'),
-  onUndoRedo: (action) => emit('undo-redo', action),
+  onUndoRedo: action => emit('undo-redo', action),
 })
 </script>