Browse Source

富文本组件删除文字对应样式清除

zq 1 week ago
parent
commit
cd5f1a8afc

+ 1 - 11
src/components/PinyinText.vue

@@ -12,23 +12,13 @@
             :class="{ active: visible && word_index == k && paragraph_index === i && sentence_index === j }"
             :title="isPreview ? '' : '点击校对'"
             :style="{
-              ...item.activeTextStyle,
               cursor: isPreview ? '' : 'pointer',
               'align-items': k == 0 ? 'flex-start' : 'center',
             }"
             @click="correctPinyin(item, i, j, k)"
           >
-            <!-- <ruby class="py-char" :style="{ 'ruby-position': pinyinPosition === 'top' ? 'over' : 'under' }">
-              {{ item.text }}
-              <rt
-                class="pinyin"
-                :class="{ active: visible && word_index == k && paragraph_index === i && sentence_index === j }"
-              >
-                {{ item.pinyin }}
-              </rt>
-            </ruby> -->
             <span v-if="pinyinPosition === 'top'" class="pinyin">{{ item.pinyin.replace(/\s+/g, '') }}</span>
-            <span class="py-char">{{ item.text }}</span>
+            <span class="py-char" :style="{ ...item.activeTextStyle }">{{ item.text }}</span>
             <span v-if="pinyinPosition !== 'top'" class="pinyin">{{ item.pinyin.replace(/\s+/g, '') }}</span>
           </span>
         </span>

+ 26 - 8
src/views/book/courseware/create/components/base/rich_text/RichText.vue

@@ -126,22 +126,40 @@ export default {
         this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
       CrateParsedTextInfo_Pinyin(data).then(({ parsed_text }) => {
         if (parsed_text) {
-          // 合并 activeTextStyle
           const mergedData = parsed_text.paragraph_list.map((outerArr, i) =>
             outerArr.map((innerArr, j) =>
-              innerArr.map((newItem, k) => ({
-                ...newItem,
-                // 如果 originalItem 有 activeTextStyle,就合并到 newItem
-                ...(this.data.paragraph_list[i]?.[j]?.[k]?.activeTextStyle && {
-                  activeTextStyle: this.data.paragraph_list[i][j][k].activeTextStyle,
-                }),
-              })),
+              innerArr.map((newItem, k) => {
+                const originalItem = this.data.paragraph_list[i]?.[j]?.[k];
+                // 唯一性校验:位置+内容哈希
+                const isSameItem =
+                  originalItem &&
+                  originalItem.hash === this.hashText(newItem.text) &&
+                  originalItem.id === `p${i}-l${j}-i${k}`;
+
+                return {
+                  ...newItem,
+                  id: `p${i}-l${j}-i${k}`,
+                  hash: this.hashText(newItem.text),
+                  ...(isSameItem && originalItem.activeTextStyle && { activeTextStyle: originalItem.activeTextStyle }),
+                };
+              }),
             ),
           );
           this.data.paragraph_list = mergedData; // 取出合并后的数组
         }
       });
     },
+    // 文本哈希函数
+    hashText(text) {
+      if (!text) return '0';
+      let hash = 0;
+      for (let i = 0; i < text.length; i++) {
+        const char = text.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash; // 转换为32位整数
+      }
+      return hash.toString(36); // 转为base36缩短长度
+    },
     // 填充校对后的拼音
     fillCorrectPinyin({ selectContent: { text, pinyin, activeTextStyle }, i, j, k }) {
       this.data.paragraph_list_parameter.pinyin_proofread_word_list.push({