Browse Source

修改并打包

yangg 5 tháng trước cách đây
mục cha
commit
b12553688d

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
dist/index.html


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
dist/static/js/app.59e9791a.js


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
dist/static/js/app.9ad331e0.js


+ 303 - 74
src/components/CanvasEditor/index.vue

@@ -27,7 +27,7 @@
                 <span class="select" title="字体">Arial</span>
                 <div class="options">
                   <ul>
-                     <li data-family="Arial" style="font-family: 'Arial'">
+                    <li data-family="Arial" style="font-family: 'Arial'">
                       Arial
                     </li>
                     <li
@@ -48,7 +48,7 @@
                 <li data-family="华文行楷" style="font-family:'华文行楷';">华文行楷</li>
                 <li data-family="华文中宋" style="font-family:'华文中宋';">华文中宋</li>
                 <li data-family="华文彩云" style="font-family:'华文彩云';">华文彩云</li> -->
-                   
+
                     <li data-family="Segoe UI" style="font-family: 'Segoe UI'">
                       Segoe UI
                     </li>
@@ -115,39 +115,135 @@
                     <div class="section-title">主题颜色</div>
                     <ul>
                       <!-- 第一行 -->
-                      <li data-color="#000000" title="黑色" style="background-color: #000000"></li>
-                      <li data-color="#2B579A" title="深蓝色" style="background-color: #2B579A"></li>
-                      <li data-color="#4472C4" title="蓝色" style="background-color: #4472C4"></li>
-                      <li data-color="#70AD47" title="绿色" style="background-color: #70AD47"></li>
-                      <li data-color="#FFC000" title="黄色" style="background-color: #FFC000"></li>
-                      <li data-color="#ED7D31" title="橙色" style="background-color: #ED7D31"></li>
-                      <li data-color="#C00000" title="红色" style="background-color: #C00000"></li>
-                      <li data-color="#7030A0" title="紫色" style="background-color: #7030A0"></li>
-                      <li data-color="#FFFFFF" title="白色" style="background-color: #FFFFFF"></li>
+                      <li
+                        data-color="#000000"
+                        title="黑色"
+                        style="background-color: #000000"
+                      ></li>
+                      <li
+                        data-color="#2B579A"
+                        title="深蓝色"
+                        style="background-color: #2b579a"
+                      ></li>
+                      <li
+                        data-color="#4472C4"
+                        title="蓝色"
+                        style="background-color: #4472c4"
+                      ></li>
+                      <li
+                        data-color="#70AD47"
+                        title="绿色"
+                        style="background-color: #70ad47"
+                      ></li>
+                      <li
+                        data-color="#FFC000"
+                        title="黄色"
+                        style="background-color: #ffc000"
+                      ></li>
+                      <li
+                        data-color="#ED7D31"
+                        title="橙色"
+                        style="background-color: #ed7d31"
+                      ></li>
+                      <li
+                        data-color="#C00000"
+                        title="红色"
+                        style="background-color: #c00000"
+                      ></li>
+                      <li
+                        data-color="#7030A0"
+                        title="紫色"
+                        style="background-color: #7030a0"
+                      ></li>
+                      <li
+                        data-color="#FFFFFF"
+                        title="白色"
+                        style="background-color: #ffffff"
+                      ></li>
 
                       <!-- 灰度行 -->
-                      <li data-color="#7F7F7F" title="深灰色" style="background-color: #7F7F7F"></li>
-                      <li data-color="#A5A5A5" title="灰色" style="background-color: #A5A5A5"></li>
-                      <li data-color="#D0D0D0" title="浅灰色" style="background-color: #D0D0D0"></li>
+                      <li
+                        data-color="#7F7F7F"
+                        title="深灰色"
+                        style="background-color: #7f7f7f"
+                      ></li>
+                      <li
+                        data-color="#A5A5A5"
+                        title="灰色"
+                        style="background-color: #a5a5a5"
+                      ></li>
+                      <li
+                        data-color="#D0D0D0"
+                        title="浅灰色"
+                        style="background-color: #d0d0d0"
+                      ></li>
 
                       <!-- 蓝色系列 -->
-                      <li data-color="#D6E3F3" title="浅蓝色-1" style="background-color: #D6E3F3"></li>
-                      <li data-color="#B4C7E7" title="浅蓝色-2" style="background-color: #B4C7E7"></li>
-                      <li data-color="#8EAADB" title="浅蓝色-3" style="background-color: #8EAADB"></li>
-                      <li data-color="#2E75B6" title="深蓝色-1" style="background-color: #2E75B6"></li>
-                      <li data-color="#1F4E79" title="深蓝色-2" style="background-color: #1F4E79"></li>
+                      <li
+                        data-color="#D6E3F3"
+                        title="浅蓝色-1"
+                        style="background-color: #d6e3f3"
+                      ></li>
+                      <li
+                        data-color="#B4C7E7"
+                        title="浅蓝色-2"
+                        style="background-color: #b4c7e7"
+                      ></li>
+                      <li
+                        data-color="#8EAADB"
+                        title="浅蓝色-3"
+                        style="background-color: #8eaadb"
+                      ></li>
+                      <li
+                        data-color="#2E75B6"
+                        title="深蓝色-1"
+                        style="background-color: #2e75b6"
+                      ></li>
+                      <li
+                        data-color="#1F4E79"
+                        title="深蓝色-2"
+                        style="background-color: #1f4e79"
+                      ></li>
                     </ul>
                   </div>
                   <div class="color-section">
                     <div class="section-title">标准色</div>
                     <ul>
-                      <li data-color="#FF0000" title="红色" style="background-color: #FF0000"></li>
-                      <li data-color="#FF6600" title="橙色" style="background-color: #FF6600"></li>
-                      <li data-color="#FFFF00" title="黄色" style="background-color: #FFFF00"></li>
-                      <li data-color="#00FF00" title="绿色" style="background-color: #00FF00"></li>
-                      <li data-color="#00FFFF" title="青色" style="background-color: #00FFFF"></li>
-                      <li data-color="#0000FF" title="蓝色" style="background-color: #0000FF"></li>
-                      <li data-color="#FF00FF" title="紫色" style="background-color: #FF00FF"></li>
+                      <li
+                        data-color="#FF0000"
+                        title="红色"
+                        style="background-color: #ff0000"
+                      ></li>
+                      <li
+                        data-color="#FF6600"
+                        title="橙色"
+                        style="background-color: #ff6600"
+                      ></li>
+                      <li
+                        data-color="#FFFF00"
+                        title="黄色"
+                        style="background-color: #ffff00"
+                      ></li>
+                      <li
+                        data-color="#00FF00"
+                        title="绿色"
+                        style="background-color: #00ff00"
+                      ></li>
+                      <li
+                        data-color="#00FFFF"
+                        title="青色"
+                        style="background-color: #00ffff"
+                      ></li>
+                      <li
+                        data-color="#0000FF"
+                        title="蓝色"
+                        style="background-color: #0000ff"
+                      ></li>
+                      <li
+                        data-color="#FF00FF"
+                        title="紫色"
+                        style="background-color: #ff00ff"
+                      ></li>
                     </ul>
                   </div>
                 </div>
@@ -157,25 +253,87 @@
                 <div class="options">
                   <ul>
                     <!-- 第一行 -->
-                    <li data-color="transparent" title="无" style="background-color: transparent">✓</li>
-                    <li data-color="#ffff00" title="黄色" style="background-color: #ffff00"></li>
-                    <li data-color="#00ff00" title="绿色" style="background-color: #00ff00"></li>
-                    <li data-color="#00ffff" title="青色" style="background-color: #00ffff"></li>
-                    <li data-color="#ff00ff" title="粉色" style="background-color: #ff00ff"></li>
-                    <li data-color="#0000ff" title="蓝色" style="background-color: #0000ff"></li>
-                    
+                    <li
+                      data-color="transparent"
+                      title="无"
+                      style="background-color: transparent"
+                    >
+                      ✓
+                    </li>
+                    <li
+                      data-color="#ffff00"
+                      title="黄色"
+                      style="background-color: #ffff00"
+                    ></li>
+                    <li
+                      data-color="#00ff00"
+                      title="绿色"
+                      style="background-color: #00ff00"
+                    ></li>
+                    <li
+                      data-color="#00ffff"
+                      title="青色"
+                      style="background-color: #00ffff"
+                    ></li>
+                    <li
+                      data-color="#ff00ff"
+                      title="粉色"
+                      style="background-color: #ff00ff"
+                    ></li>
+                    <li
+                      data-color="#0000ff"
+                      title="蓝色"
+                      style="background-color: #0000ff"
+                    ></li>
+
                     <!-- 第二行 -->
-                    <li data-color="#800000" title="深红色" style="background-color: #800000"></li>
-                    <li data-color="#ff0000" title="红色" style="background-color: #ff0000"></li>
-                    <li data-color="#808000" title="橄榄色" style="background-color: #808000"></li>
-                    <li data-color="#008000" title="深绿色" style="background-color: #008000"></li>
-                    <li data-color="#008080" title="青灰色" style="background-color: #008080"></li>
-                    <li data-color="#000080" title="深蓝色" style="background-color: #000080"></li>
-                    
+                    <li
+                      data-color="#800000"
+                      title="深红色"
+                      style="background-color: #800000"
+                    ></li>
+                    <li
+                      data-color="#ff0000"
+                      title="红色"
+                      style="background-color: #ff0000"
+                    ></li>
+                    <li
+                      data-color="#808000"
+                      title="橄榄色"
+                      style="background-color: #808000"
+                    ></li>
+                    <li
+                      data-color="#008000"
+                      title="深绿色"
+                      style="background-color: #008000"
+                    ></li>
+                    <li
+                      data-color="#008080"
+                      title="青灰色"
+                      style="background-color: #008080"
+                    ></li>
+                    <li
+                      data-color="#000080"
+                      title="深蓝色"
+                      style="background-color: #000080"
+                    ></li>
+
                     <!-- 第三行 -->
-                    <li data-color="#000000" title="黑色" style="background-color: #000000"></li>
-                    <li data-color="#808080" title="深灰色" style="background-color: #808080"></li>
-                    <li data-color="#c0c0c0" title="灰色" style="background-color: #c0c0c0"></li>
+                    <li
+                      data-color="#000000"
+                      title="黑色"
+                      style="background-color: #000000"
+                    ></li>
+                    <li
+                      data-color="#808080"
+                      title="深灰色"
+                      style="background-color: #808080"
+                    ></li>
+                    <li
+                      data-color="#c0c0c0"
+                      title="灰色"
+                      style="background-color: #c0c0c0"
+                    ></li>
                   </ul>
                 </div>
               </div>
@@ -505,7 +663,7 @@ export default {
   name: "CanvasEditor", // 确保设置了组件名称
   data() {
     return {
-      editorRef: null,
+      editorRef: null, // 将editor实例存储在data中
       isApple:
         typeof navigator !== "undefined" &&
         /Mac OS X/.test(navigator.userAgent),
@@ -523,15 +681,15 @@ export default {
       header: [], // 页眉配置
       main: [], // 主要编辑内容
       footer: [], // 页脚信息
-      options:{
-        width: 794,  // A4 纸张宽度
-        height: 1123,  // A4 纸张高度
-        defaultSize:Number(this.editorOptions.size) ,
+      options: {
+        width: 794, // A4 纸张宽度
+        height: 1123, // A4 纸张高度
+        defaultSize: Number(this.editorOptions.size),
         defaultFont: this.editorOptions.font,
-      //  defaultSize: 14,//Number(this.editorOptions.size),
+        //  defaultSize: 14,//Number(this.editorOptions.size),
         defaultBold: this.editorOptions.bold,
-        defaultAlign: this.editorOptions.align
-      },// IEditorOption,
+        defaultAlign: this.editorOptions.align,
+      }, // IEditorOption,
       // 批注 TODO
       commentList: [],
     };
@@ -552,12 +710,12 @@ export default {
     editorOptions: {
       type: Object,
       default: () => ({
-        defaultFont: 'Arial',
+        defaultFont: "Arial",
         //defaultSize: 14,
         defaultBold: false,
-        defaultAlign: 'left'
-      })
-    }
+        defaultAlign: "left",
+      }),
+    },
   },
   watch: {
     // 监听父组件传过来的编辑模式,设置模式
@@ -597,6 +755,18 @@ export default {
         }, delay);
       };
     },
+    applyBoldToAll() {
+      if (!this.editorRef) return;
+      
+      try {
+        this.editorRef.command.executeSelectAll();
+        this.editorRef.command.executeBold();
+        this.editorRef.command.executeSelectAll();
+        this.editorRef.command.executeSelect(0, 0);
+      } catch (error) {
+        console.error('Apply bold failed:', error);
+      }
+    }
   },
   mounted() {
     console.log(this.editorOptions);
@@ -609,9 +779,9 @@ export default {
         main: this.main,
         footer: this.footer,
         defaultFont: this.editorOptions.font,
-      //  defaultSize: 14,//Number(this.editorOptions.size),
+        //  defaultSize: 14,//Number(this.editorOptions.size),
         defaultBold: this.editorOptions.bold,
-        defaultAlign: this.editorOptions.align
+        defaultAlign: this.editorOptions.align,
       },
       this.options
     );
@@ -647,6 +817,16 @@ export default {
         capture: true,
       }
     );
+  /*   if (this.editorOptions.align == "") {
+        instance.command.executeRowFlex(RowFlex.CENTER);
+    }
+    if (this.editorOptions.bold == "不加粗") {
+      console.log(instance);
+      // 等待editor实例初始化完成
+      this.$nextTick(() => {
+        instance.command.executeBold(); // 切换加粗状态
+      });
+    } */
     /*
         工具栏方法
       */
@@ -780,13 +960,13 @@ export default {
       instance.command.executeSubscript();
     };
 
-    const colorDom = document.querySelector('.menu-item__color');
-    const colorOptionDom = colorDom.querySelector('.options');
-    colorDom.onclick = function() {
-      console.log('color');
-      colorOptionDom.classList.toggle('visible');
+    const colorDom = document.querySelector(".menu-item__color");
+    const colorOptionDom = colorDom.querySelector(".options");
+    colorDom.onclick = function () {
+      console.log("color");
+      colorOptionDom.classList.toggle("visible");
     };
-    colorOptionDom.onclick = function(evt) {
+    colorOptionDom.onclick = function (evt) {
       const li = evt.target;
       const color = li.dataset.color;
       if (color) {
@@ -795,18 +975,18 @@ export default {
     };
 
     // 高亮功能代码
-    const highlightDom = document.querySelector('.menu-item__highlight');
-    const highlightOptionDom = highlightDom.querySelector('.options');
-    highlightDom.onclick = function() {
-      console.log('highlight');
-      highlightOptionDom.classList.toggle('visible');
+    const highlightDom = document.querySelector(".menu-item__highlight");
+    const highlightOptionDom = highlightDom.querySelector(".options");
+    highlightDom.onclick = function () {
+      console.log("highlight");
+      highlightOptionDom.classList.toggle("visible");
     };
-    highlightOptionDom.onclick = function(evt) {
+    highlightOptionDom.onclick = function (evt) {
       const li = evt.target;
       const color = li.dataset.color;
       if (color) {
         // 如果选择"无",则清除高亮
-        if (color === 'transparent') {
+        if (color === "transparent") {
           instance.command.executeHighlight(null);
         } else {
           instance.command.executeHighlight(color);
@@ -1930,13 +2110,13 @@ export default {
         : strikeoutDom.classList.remove("active");
       if (payload.color) {
         colorDom.classList.add("active");
-        const colorSpan = colorDom.querySelector('span');
+        const colorSpan = colorDom.querySelector("span");
         if (colorSpan) {
           colorSpan.style.backgroundColor = payload.color;
         }
       } else {
         colorDom.classList.remove("active");
-        const colorSpan = colorDom.querySelector('span');
+        const colorSpan = colorDom.querySelector("span");
         if (colorSpan) {
           colorSpan.style.backgroundColor = "#000000";
         }
@@ -2228,7 +2408,7 @@ export default {
       },
     ]);
 
-   /*  // 设置初始样式
+    /*  // 设置初始样式
     this.$nextTick(() => {
       // 设置字体
       instance.command.executeFont(this.editorOptions.defaultFont)
@@ -2241,6 +2421,55 @@ export default {
       // 设置对齐方式
       instance.command.executeAlign(this.editorOptions.defaultAlign)
     }) */
+
+    // 在编辑器实例化后立即应用默认样式
+    this.$nextTick(() => {
+      if (this.editorOptions.bold !== undefined) {
+        const shouldBeBold = this.editorOptions.bold !== "不加粗";
+        if (shouldBeBold) {
+          this.editorRef.command.executeBold();
+        }
+      }
+    });
+
+    // 使用setTimeout确保编辑器完全准备就绪
+    setTimeout(() => {
+      if (this.editorOptions.bold === "加粗") {
+        try {
+          // 1. 先全选所有内容
+          instance.command.executeSelectAll();
+          
+          // 2. 执行加粗命令
+          instance.command.executeBold();
+          
+          // 3. 取消选择
+          instance.command.executeSelectAll();
+          
+          // 4. 将光标移到开始位置
+          instance.command.executeSelect(0, 0);
+        } catch (error) {
+          console.error('Apply bold failed:', error);
+        }
+      }
+      // 处理居中对齐
+    if (this.editorOptions.align === "居中") {
+      try {
+        // 1. 先全选所有内容
+        instance.command.executeSelectAll();
+        
+        // 2. 执行居中命令
+        instance.command.executeRowFlex(RowFlex.CENTER);;
+        
+        // 3. 取消选择
+        instance.command.executeSelectAll();
+        
+        // 4. 将光标移到开始位置
+        instance.command.executeSelect(0, 0);
+      } catch (error) {
+        console.error('Apply center alignment failed:', error);
+      }
+    }
+    }, 500); // 延迟500ms执行
   },
 };
 </script>
@@ -2271,7 +2500,7 @@ export default {
       position: static;
       display: flex;
       flex-direction: column;
-      max-height: 600px;//calc(100% - 90px); /* 减去header和footer的高度 */
+      max-height: 600px; //calc(100% - 90px); /* 减去header和footer的高度 */
       background-color: #f2f4f7;
       overflow: auto; /* 仅让Main区域可滚动 */
       flex-grow: 1; /* 让Main区域占据剩余空间 */

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác