富文本拼音效果和汉字一一对应

src/components/PinyinText.vue

@@ -22,25 +22,20 @@
               :title="isPreview ? '' : '点击校对'"
               :style="{
                 cursor: isPreview ? '' : 'pointer',
-                'align-items': 'flex-start',
               }"
               @click="correctPinyin(word, block.paragraphIndex, block.oldIndex, wIndex)"
             >
-              <span
-                v-if="pinyinPosition === 'top' && hasPinyinInParagraphNeVersion(block.paragraphIndex)"
-                class="pinyin"
-                :style="getPinyinStyle(word)"
-              >
-                {{ getPinyinText(word) }}</span
-              >
-              <span class="py-char" :style="textStyle(word)">{{ convertText(word.text) }}</span>
-              <span
-                v-if="pinyinPosition !== 'top' && hasPinyinInParagraphNeVersion(block.paragraphIndex)"
-                class="pinyin"
-                :style="getPinyinStyle(word)"
-              >
-                {{ getPinyinText(word) }}</span
-              >
+              <span v-for="(char, cIndex) in Array.from(word.text)" :key="cIndex">
+                <span
+                  :style="{
+                    flexDirection: pinyinPosition === 'top' ? 'column' : 'column-reverse',
+                    'align-items': getWordAlignItems(word),
+                  }"
+                >
+                  <span class="pinyin" :style="getPinyinStyle(word)"> {{ getCharPinyin(word, cIndex) }}</span>
+                  <span class="py-char" :style="textStyle(word)">{{ convertText(char) }}</span>
+                </span>
+              </span>
             </span>
           </span>
         </span>
@@ -387,9 +382,26 @@ export default {
   },
 
   methods: {
+    // 兼容历史数据
     getPinyinText(item) {
       return this.checkShowPinyin(item.showPinyin) ? item.pinyin.replace(/\s+/g, '') : '\u200B';
     },
+    // 拼音与汉字一一对应
+    getCharPinyin(word, charIndex) {
+      if (!this.checkShowPinyin(word.showPinyin)) {
+        return '\u200B';
+      }
+      const pinyinList = word.pinyin ? word.pinyin.trim().split(/\s+/) : [];
+      return pinyinList[charIndex] || '\u200B';
+    },
+    // 如果汉字有字间距，拼音与汉字左对齐，如果没有则居中对齐
+    getWordAlignItems(word) {
+      const letterSpacing = word.activeTextStyle?.letterSpacing || word.activeTextStyle?.['letter-spacing'];
+      if (letterSpacing && letterSpacing !== '0' && letterSpacing !== '0px') {
+        return 'flex-start';
+      }
+      return 'center';
+    },
     // 拼音固定为拼音字体，跟随汉字的字号、颜色、粗细的样式
     getPinyinStyle(item) {
       const styles = {};
@@ -581,7 +593,8 @@ export default {
 
     > span {
       display: inline-flex;
-      flex-direction: column;
+
+      // flex-direction: column;
     }
 
     .py-char {