富文本拼音效果优化

src/components/PinyinText.vue

@@ -7,7 +7,7 @@
     />
 
     <!-- 新规则：使用 richTextList -->
-    <div v-if="richTextList && richTextList.length > 0" class="rich-text-container">
+    <div v-if="richTextList && richTextList.length > 0" class="rich-text-container" :style="bodyStyles">
       <template v-for="(block, index) in parsedBlocks">
         <!-- 文字块：包含 word_list -->
         <span
@@ -107,7 +107,7 @@
 
     <!-- 老规则：使用 paragraphList -->
     <template v-else-if="paragraphList && paragraphList.length > 0">
-      <div v-for="(paragraph, pIndex) in paragraphList" :key="pIndex" class="pinyin-paragraph">
+      <div v-for="(paragraph, pIndex) in paragraphList" :key="pIndex" class="pinyin-paragraph" :style="bodyStyles">
         <div
           v-for="(sentence, sIndex) in paragraph"
           :key="sIndex"
@@ -236,6 +236,10 @@ export default {
       type: String,
       default: '0px 0px 0px 0px',
     },
+    bodyStyles: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return {

src/views/book/courseware/preview/components/rich_text/RichTextPreview.vue

@@ -20,6 +20,7 @@
           :font-family="data?.unified_attrib?.font"
           :pinyin-padding="data.property.pinyin_padding"
           :is-preview="isPreview"
+          :body-styles="getBodyStyles()"
         />
         <div v-else>
           <AudioPlay
@@ -58,7 +59,6 @@ import PreviewMixin from '../common/PreviewMixin';
 import { isEnable } from '@/views/book/courseware/data/common';
 import PinyinText from '@/components/PinyinText.vue';
 import AudioPlay from '../character_base/components/AudioPlay.vue';
-import { getRandomNumber } from '@/utils';
 
 export default {
   name: 'RichTextPreview',
@@ -145,6 +145,24 @@ export default {
 
       return noTextContentData;
     },
+
+    getBodyStyles() {
+      const styles = {};
+      const unifiedAttrib = this.data?.unified_attrib || {};
+
+      // 从统一属性中获取样式
+      if (unifiedAttrib.font) {
+        styles['font-family'] = unifiedAttrib.font;
+      }
+      if (unifiedAttrib.font_size) {
+        styles['font-size'] = unifiedAttrib.font_size;
+      }
+      if (unifiedAttrib.text_color) {
+        styles['color'] = unifiedAttrib.text_color;
+      }
+
+      return styles;
+    },
   },
 };
 </script>