优化富文本拼音效果换行情况

src/components/PinyinText.vue

@@ -14,9 +14,9 @@
           v-if="block.type === 'text'"
           :key="'text-' + index"
           class="pinyin-sentence"
-          :style="[{ 'align-items': pinyinPosition === 'top' ? 'flex-end' : 'flex-start' }, block.styleObj]"
+          :style="[{ 'align-items': pinyinPosition === 'top' ? 'flex-end' : 'flex-start' }]"
         >
-          <span v-for="(word, wIndex) in block.word_list" :key="wIndex" class="pinyin-text">
+          <span v-for="(word, wIndex) in block.word_list" :key="wIndex" class="pinyin-text" :style="block.styleObj">
             <span
               :title="isPreview ? '' : '点击校对'"
               :style="{
@@ -26,17 +26,29 @@
               @mouseover="isPreview && handlePreviewHover(word, $event)"
               @mouseleave="onLeave"
             >
-              <span v-for="(char, cIndex) in Array.from(word.text)" :key="cIndex">
-                <span
-                  :style="{
-                    flexDirection: pinyinPosition === 'top' ? 'column' : 'column-reverse',
-                    'align-items': getWordAlignItems(word, block),
-                  }"
-                >
-                  <span class="pinyin" :style="getPinyinStyle(word)"> {{ getCharPinyin(word, cIndex) }}</span>
-                  <span class="py-char" :style="getCharStyle(word, block, cIndex)">{{ convertText(char) }}</span>
-                </span>
+              <span
+                v-if="word.pinyin_list && word.pinyin_list.length < Array.from(word.text).length"
+                :style="{
+                  flexDirection: pinyinPosition === 'top' ? 'column' : 'column-reverse',
+                  'align-items': getWordAlignItems(word, block),
+                }"
+              >
+                <span class="pinyin" :style="getPinyinStyle(word)"> {{ getPinyinText(word) }}</span>
+                <span class="py-char" :style="getCharStyle(word, block)">{{ convertText(word.text) }}</span>
               </span>
+              <template v-else>
+                <span v-for="(char, cIndex) in Array.from(word.text)" :key="cIndex">
+                  <span
+                    :style="{
+                      flexDirection: pinyinPosition === 'top' ? 'column' : 'column-reverse',
+                      'align-items': getWordAlignItems(word, block),
+                    }"
+                  >
+                    <span class="pinyin" :style="getPinyinStyle(word)"> {{ getCharPinyin(word, cIndex) }}</span>
+                    <span class="py-char" :style="getCharStyle(word, block, cIndex)">{{ convertText(char) }}</span>
+                  </span>
+                </span>
+              </template>
             </span>
           </span>
         </span>
@@ -467,6 +479,7 @@ export default {
       }
       // 优先使用新的 pinyin_list 字段（与字符一一对应）
       if (word.pinyin_list && Array.isArray(word.pinyin_list)) {
+        console.log(word.pinyin_list && word.pinyin_list.length < Array.from(word.text).length);
         return word.pinyin_list[charIndex] || '\u200B';
       }
       // 兼容旧数据：使用 pinyin 字段

src/components/RichText.vue

@@ -159,17 +159,16 @@ export default {
             line-height: 1.2 !important; /* 避免行高影响 */
           }
           .rich-text-emphasis-dot {
-           --letter-spacing-value: attr(data-letter-spacing number, 0);
             border-bottom: none;
             background-image: radial-gradient(
               circle at center,
-              currentColor 0.15em,  /* 圆点大小相对于字体 */
-              transparent 0.16em
+              currentColor 0.08em,  /* 圆点大小相对于字体 */
+              transparent 0.09em
             );
-            background-size: calc((1 + var(--letter-spacing-value)) * 1em) 0.3em;
+            background-size: 1em 0.15em; /* 间距相对于字体大小，高度相对字体 */
             background-repeat: repeat-x;
-            background-position: calc(var(--letter-spacing-value) * -0.5em) 100%;
-            padding-bottom: 0.3em; /* 间距也相对于字体 */
+            background-position: 0 100%;
+            padding-bottom: 0.15em; /* 间距也相对于字体 */
             display: inline;
           }
           `, // 解决公式每点击一次字体就变大