富文本拼音效果优化

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/components/RichText.vue

@@ -1399,6 +1399,45 @@ export default {
       });
       return walker.nextNode();
     },
+
+    /**
+     * 获取富文本body元素的初始样式信息
+     * @returns {object} 包含字体、字号、颜色等body初始样式属性的对象
+     */
+    getBodyInitialStyles() {
+      const editor = tinymce.activeEditor;
+      if (!editor) return {};
+
+      const body = editor.getBody();
+      if (!body) return {};
+
+      const computed = window.getComputedStyle(body);
+      const styles = {};
+
+      // 获取字体家族
+      if (computed.fontFamily && computed.fontFamily !== 'inherit') {
+        styles.fontFamily = computed.fontFamily;
+      }
+
+      // 获取字体大小（px转pt）
+      if (computed.fontSize && computed.fontSize !== 'inherit') {
+        const fontSize = computed.fontSize;
+        const pxValue = parseFloat(fontSize);
+        if (!isNaN(pxValue)) {
+          const ptValue = Math.round(pxValue * 0.75 * 10) / 10;
+          styles.fontSize = `${ptValue}pt`;
+        } else {
+          styles.fontSize = fontSize;
+        }
+      }
+
+      // 获取字体颜色
+      if (computed.color && computed.color !== 'inherit' && computed.color !== 'rgb(0, 0, 0)') {
+        styles.color = computed.color;
+      }
+
+      return styles;
+    },
   },
 };
 </script>

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

@@ -104,6 +104,7 @@
           :font-family="data?.unified_attrib?.font"
           :component-type="data.type"
           :pinyin-padding="data.property.pinyin_padding"
+          :body-styles="getBodyStyles()"
           @fillCorrectPinyin="fillCorrectPinyin"
         />
       </div>
@@ -548,6 +549,10 @@ export default {
         }
       });
     },
+    getBodyStyles() {
+      if (!this.$refs.richText) return {};
+      return this.$refs.richText.getBodyInitialStyles();
+    },
   },
 };
 </script>

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
@@ -145,6 +146,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>