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

@@ -402,9 +402,19 @@ export default {
             },
           });
 
+          // 注册自定义字间距图标
+          editor.ui.registry.addIcon(
+            'letter-spacing-icon',
+            `<svg viewBox="4 4 18 18" width="44" height="24">
+              <text x="17" y="18" text-anchor="middle" font-size="14" font-weight="bold" fill="#000">A</text>
+              <path d="M12 10 L6 10 M6 10 L7.5 8.5 M6 10 L7.5 11.5" stroke="#1E90FF" stroke-width="1.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M22 10 L28 10 M28 10 L26.5 8.5 M28 10 L26.5 11.5" stroke="#1E90FF" stroke-width="1.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>`,
+          );
+
           // 添加字间距下拉菜单
           editor.ui.registry.addMenuButton('letterSpacing', {
-            icon: 'border-width',
+            icon: 'letter-spacing-icon',
             // text: '字间距',
             tooltip: '字间距',
             fetch: (callback) => {

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

@@ -77,15 +77,17 @@
           <CheckWord :data="wordData" @saveWord="saveWord" />
         </el-dialog>
 
-        <el-button
-          v-show="isEnable(data.property.view_pinyin)"
-          style="margin-left: 10px"
-          class="btn"
-          @click.native="generatPinyin"
-          >生成拼音</el-button
-        >
-
-        <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">拼音效果</el-divider>
+        <el-divider v-if="isEnable(data.property.view_pinyin)" content-position="left">
+          拼音效果
+          <el-button
+            v-show="isEnable(data.property.view_pinyin)"
+            type="text"
+            icon="el-icon-refresh"
+            title="刷新"
+            class="refresh-pinyin-btn"
+            @click.native="generatPinyin"
+          />
+        </el-divider>
         <PinyinText
           v-if="isEnable(data.property.view_pinyin)"
           :id="richId + '_pinyin_text'"
@@ -197,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;
           }
@@ -220,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;
     },
@@ -248,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() {
@@ -498,4 +500,17 @@ export default {
     cursor: pointer;
   }
 }
+
+.refresh-pinyin-btn {
+  cursor: pointer;
+  outline: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    outline: none;
+  }
+}
 </style>

src/views/book/courseware/preview/components/common/VideoPlay.vue

@@ -47,7 +47,12 @@
           <h2>您的浏览器<strong>不支持video标签</strong></h2>
         </video>
       </template>
-      <SvgIcon v-show="originPlay || showPlay" :class="{ hidden: hidden }" icon-class="paused" size="16" />
+      <SvgIcon
+        v-show="viewMethod === 'independent' && (originPlay || showPlay)"
+        :class="{ hidden: hidden }"
+        icon-class="paused"
+        size="16"
+      />
     </div>
   </div>
 </template>