富文本拼音效果下的拼音固定为拼音字体

src/components/PinyinText.vue

@@ -22,13 +22,14 @@
               :title="isPreview ? '' : '点击校对'"
               :style="{
                 cursor: isPreview ? '' : 'pointer',
-                'align-items': wIndex == 0 ? 'flex-start' : 'center',
+                '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
               >
@@ -36,6 +37,7 @@
               <span
                 v-if="pinyinPosition !== 'top' && hasPinyinInParagraphNeVersion(block.paragraphIndex)"
                 class="pinyin"
+                :style="getPinyinStyle(word)"
               >
                 {{ getPinyinText(word) }}</span
               >
@@ -385,6 +387,39 @@ export default {
   },
 
   methods: {
+    getPinyinText(item) {
+      return this.checkShowPinyin(item.showPinyin) ? item.pinyin.replace(/\s+/g, '') : '\u200B';
+    },
+    // 拼音固定为拼音字体，跟随汉字的字号、颜色、粗细的样式
+    getPinyinStyle(item) {
+      const styles = {};
+
+      // 固定使用 League 字体
+      styles['font-family'] = 'League';
+
+      // 只继承字号和颜色
+      if (item.activeTextStyle) {
+        if (item.activeTextStyle.fontSize) {
+          styles['font-size'] = item.activeTextStyle.fontSize;
+        }
+        if (item.activeTextStyle.color) {
+          styles['color'] = item.activeTextStyle.color;
+        }
+      }
+
+      // 如果设置了全局字号，优先使用全局字号
+      if (this.isAllSetting && this.fontSize) {
+        styles['font-size'] = this.fontSize;
+        this.isAllSetting = false;
+      }
+
+      // 明确重置不应该继承的样式
+      styles['text-decoration'] = 'none';
+      styles['font-style'] = 'normal';
+      styles['letter-spacing'] = '0';
+
+      return styles;
+    },
     removeTagFromStack(tagStack, tagName) {
       for (let i = tagStack.length - 1; i >= 0; i--) {
         if (tagStack[i].tag === tagName) {
@@ -496,9 +531,6 @@ export default {
       }
       return this.isEnable(showPinyin);
     },
-    getPinyinText(item) {
-      return this.checkShowPinyin(item.showPinyin) ? item.pinyin.replace(/\s+/g, '') : '\u200B';
-    },
   },
 };
 </script>
@@ -550,7 +582,6 @@ export default {
     > span {
       display: inline-flex;
       flex-direction: column;
-      align-items: center;
     }
 
     .py-char {
@@ -561,6 +592,7 @@ export default {
     .pinyin {
       display: inline-block;
       min-height: 12px;
+      font-family: 'League';
 
       // font-family: 'PINYIN-B';
       // font-size: 12px;
@@ -568,6 +600,10 @@ export default {
       // line-height: 12px;
       // color: $font-color;
       line-height: 1em;
+      text-decoration: none !important;
+
+      // 防止继承父元素的删除线
+      text-decoration-skip-ink: none;
     }
   }
 

src/views/book/courseware/create/components/base/rich_text/RichText.vue

@@ -199,21 +199,21 @@ export default {
     },
   },
   methods: {
-    uploads(file_id, index, file_url) {
+    uploads(file_id, file_url) {
       this.data.audio_file_id = file_id;
     },
-    deleteFiles(index) {
+    deleteFiles() {
       this.data.audio_file_id = '';
     },
     // 生成音频
-    handleMatic(con, index) {
+    handleMatic(con) {
       TextToAudioFile({
         text: con.replace(/<[^>]+>/g, ''),
         voice_type: this.data.property.voice_type,
         emotion: this.data.property.emotion,
         speed_ratio: this.data.property.speed_ratio,
       })
-        .then(({ status, file_id, file_url }) => {
+        .then(({ status, file_id }) => {
           if (status === 1) {
             this.data.audio_file_id = file_id;
           }
@@ -222,7 +222,7 @@ export default {
     },
 
     async saveWord(saveArr) {
-      const text = this.data.content.replace(/<[^>]+>/g, '');
+      // const text = this.data.content.replace(/<[^>]+>/g, '');
       await this.createParsedTextInfoPinyin(null, null, saveArr);
       this.showWordFlag = false;
     },
@@ -250,8 +250,8 @@ export default {
         return;
       }
       let styles = this.$refs.richText.getFirstCharStyles();
-      let content = this.$refs.richText.getRichContent();
-      let text = content.replace(/<[^>]+>/g, '');
+      // let content = this.$refs.richText.getRichContent();
+      // let text = content.replace(/<[^>]+>/g, '');
       this.createParsedTextInfoPinyin(null, styles);
     },
     showSetting() {
@@ -500,4 +500,17 @@ export default {
     cursor: pointer;
   }
 }
+
+.refresh-pinyin-btn {
+  cursor: pointer;
+  outline: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    outline: none;
+  }
+}
 </style>