表格预览对齐问题

src/views/book/courseware/create/components/question/table/Table.vue

@@ -83,7 +83,7 @@
           <span
             :class="[data.styles.textAlign === 'LEFT' ? 'active' : '']"
             @click="
-              data.styles.textAlign = 'LEFT';
+              data.styles.textAlign = data.styles.textAlign === 'LEFT' ? '' : 'LEFT';
               BatchSetFormat('align', 'LEFT');
             "
           >
@@ -92,8 +92,8 @@
           <span
             :class="[data.styles.textAlign === 'MIDDLE' ? 'active' : '']"
             @click="
-              data.styles.textAlign = 'MIDDLE';
-              BatchSetFormat('align', 'MIDDLE');
+              data.styles.textAlign = data.styles.textAlign === 'MIDDLE' ? '' : 'MIDDLE';
+              BatchSetFormat('align', data.styles.textAlign === 'MIDDLE' ? 'MIDDLE' : 'LEFT');
             "
           >
             <SvgIcon icon-class="align-center" size="20" />
@@ -101,8 +101,8 @@
           <span
             :class="[data.styles.textAlign === 'RIGHT' ? 'active' : '']"
             @click="
-              data.styles.textAlign = 'RIGHT';
-              BatchSetFormat('align', 'RIGHT');
+              data.styles.textAlign = data.styles.textAlign === 'RIGHT' ? '' : 'RIGHT';
+              BatchSetFormat('align', data.styles.textAlign === 'RIGHT' ? 'RIGHT' : 'LEFT');
             "
           >
             <SvgIcon icon-class="align-right" size="20" />
@@ -403,7 +403,7 @@ export default {
           this.data.styles.fontFamily = this.data?.unified_attrib?.font || '楷体,微软雅黑';
           this.data.styles.fontSize = this.data?.unified_attrib?.font_size || '12pt';
           this.data.styles.fontColor = this.data?.unified_attrib?.text_color || '#1d2129';
-          this.data.styles.textAlign = this.data?.unified_attrib?.align || 'LEFT';
+          this.data.styles.textAlign = this.data?.unified_attrib?.align || '';
         }
       },
       deep: true,

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -51,7 +51,8 @@
                 }"
               >
                 <div class="cell-wrap">
-                  <div class="cell-wrap-content" :style="[tdStyle, computedRichStyle(col.content)]">
+                  <!-- , computedRichStyle(col.content) -->
+                  <div class="cell-wrap-content" :style="[tdStyle(col.content)]">
                     <template v-if="isEnable(data.property.view_pinyin)">
                       <template v-if="col.rich_text_list">
                         <div
@@ -303,7 +304,8 @@
                     @click="toggle(col)"
                   ></i>
                 </div>
-                <span v-if="showLang" class="multilingual" :style="[tdStyle, computedRichStyle(col.content)]">
+                <!-- , computedRichStyle(col.content) -->
+                <span v-if="showLang" class="multilingual" :style="[tdStyle(col.content)]">
                   {{
                     multilingualTextList[getLang()] &&
                     multilingualTextList[getLang()][i] &&
@@ -387,7 +389,8 @@
                   }"
                 >
                   <div class="cell-wrap">
-                    <div class="cell-wrap-content" :style="[tdStyle, computedRichStyle(col.content)]">
+                    <!-- , computedRichStyle(col.content) -->
+                    <div class="cell-wrap-content" :style="[tdStyle(col.content)]">
                       <template v-if="isEnable(data.property.view_pinyin)">
                         <template v-if="col.rich_text_list">
                           <div
@@ -586,7 +589,8 @@
                       style="display: block; width: 18px; height: 18px; border: 1px solid #30a47d"
                     ></i>
                   </div>
-                  <span v-if="showLang" class="multilingual" :style="[tdStyle, computedRichStyle(col.content)]">
+                  <!-- , computedRichStyle(col.content) -->
+                  <span v-if="showLang" class="multilingual" :style="[tdStyle(col.content)]">
                     {{
                       multilingualTextList[getLang()] &&
                       multilingualTextList[getLang()][i] &&
@@ -639,25 +643,51 @@ export default {
   },
   computed: {
     tdStyle() {
-      let obj = {};
-      // if (this.data.mode === 'short') {
-      let styles = this.data.styles;
-      obj = {
-        fontFamily: styles.fontFamily,
-        fontSize: styles.fontSize,
-        color: styles.fontColor,
-        textDecoration: styles.isUnderline ? 'underline' : styles.isStrikethrough ? 'line-through' : '',
-        fontWeight: styles.isBold ? 'bold' : '',
-        fontStyle: styles.isItalic ? 'italic' : '',
-        justifyContent: styles.textAlign === 'MIDDLE' ? 'center' : styles.textAlign === 'RIGHT' ? 'end' : 'left',
-        textAlign: styles.textAlign === 'MIDDLE' ? 'center' : styles.textAlign === 'RIGHT' ? 'end' : 'left',
+      return function (content) {
+        if (!content) return {};
+
+        let styleObject = {};
+        // 提取首个标签的 style 样式属性
+        let styleMatch = content.match(/<\w+\s+[^>]*style=["']([^"']*)["'][^>]*>/i);
+        if (styleMatch && styleMatch[1]) {
+          let styleString = styleMatch[1];
+          let styleArray = styleString.split(';').filter((s) => s.trim() !== '');
+          styleArray.forEach((style) => {
+            let [key, value] = style.split(':');
+            if (key && value) {
+              styleObject[key.trim()] = value.trim();
+            }
+          });
+          if (styleObject.hasOwnProperty('text-align')) {
+            if (styleObject['text-align'] === 'center') {
+              this.$set(styleObject, 'justify-content', 'center');
+            } else if (styleObject['text-align'] === 'right') {
+              this.$set(styleObject, 'justify-content', 'end');
+            } else {
+              this.$set(styleObject, 'justify-content', 'left');
+            }
+          }
+        }
+        let obj = {};
+        // if (this.data.mode === 'short') {
+        let styles = this.data.styles;
+        obj = {
+          fontFamily: styles.fontFamily,
+          fontSize: styles.fontSize,
+          color: styles.fontColor,
+          textDecoration: styles.isUnderline ? 'underline' : styles.isStrikethrough ? 'line-through' : '',
+          fontWeight: styles.isBold ? 'bold' : '',
+          fontStyle: styles.isItalic ? 'italic' : '',
+          // justifyContent: styles.textAlign === 'MIDDLE' ? 'center' : styles.textAlign === 'RIGHT' ? 'end' : 'left',
+          // textAlign: styles.textAlign === 'MIDDLE' ? 'center' : styles.textAlign === 'RIGHT' ? 'end' : 'left',
+        };
+        // } else {
+        //   obj = {
+        //     width: '100%',
+        //   };
+        // }
+        return { ...obj, ...styleObject };
       };
-      // } else {
-      //   obj = {
-      //     width: '100%',
-      //   };
-      // }
-      return obj;
     },
   },
   watch: {
@@ -1484,6 +1514,7 @@ $border-color: #e6e6e6;
 
       span {
         display: inline-flex;
+        flex-wrap: wrap;
       }
 
       .pinyin-sentence {