feat(工具栏): 添加模板页面创建功能并优化工具栏样式

支持通过工具栏快速创建标题页、图片页、内容页和图文页模板
调整工具栏在不同屏幕尺寸下的宽度显示

src/components/CollapsibleToolbar/index2.vue

@@ -86,7 +86,7 @@
         </div>
       </div>
       <div class="submenu-item-box2">
-        <div class="submenu-item">
+        <div class="submenu-item" @click="handleToolClick('titlepage')">
           <div class="submenu-icon">
             <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
               <g id="Component 1">
@@ -96,7 +96,7 @@
           </div>
           <span class="submenu-label">{{ lang.ssTitlePage }}</span>
         </div>
-        <div class="submenu-item">
+        <div class="submenu-item" @click="handleToolClick('ImagePage')">
           <div class="submenu-icon">
             <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
               <g id="Component 1">
@@ -112,7 +112,7 @@
           </div>
           <span class="submenu-label">{{ lang.ssImagePage }}</span>
         </div>
-        <div class="submenu-item">
+        <div class="submenu-item" @click="handleToolClick('ContentPage')">
           <div class="submenu-icon">
             <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
               <g id="Component 1">
@@ -126,22 +126,7 @@
           </div>
           <span class="submenu-label">{{ lang.ssContentPage }}</span>
         </div>
-        <div class="submenu-item">
-          <div class="submenu-icon">
-            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <g id="Component 1">
-                <path id="Vector"
-                  d="M18 6H8C6.89543 6 6 6.89543 6 8V40C6 41.1046 6.89543 42 8 42H18C19.1046 42 20 41.1046 20 40V8C20 6.89543 19.1046 6 18 6Z"
-                  stroke="currentColor" stroke-width="4" />
-                <path id="Vector_2"
-                  d="M40 6H30C28.8954 6 28 6.89543 28 8V40C28 41.1046 28.8954 42 30 42H40C41.1046 42 42 41.1046 42 40V8C42 6.89543 41.1046 6 40 6Z"
-                  stroke="currentColor" stroke-width="4" />
-              </g>
-            </svg>
-          </div>
-          <span class="submenu-label">{{ lang.ssTextImagePage }}</span>
-        </div>
-        <div class="submenu-item">
+        <div class="submenu-item" @click="handleToolClick('ImageTextPage')">
           <div class="submenu-icon">
             <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
               <g id="Component 1">
@@ -492,7 +477,7 @@ const slidesStore = useSlidesStore()
 const { currentSlide } = storeToRefs(slidesStore)
 
 const { createFrameElement } = useCreateElement()
-const { createSlide } = useSlideHandler()
+const { createSlide, createSlideByTemplate } = useSlideHandler()
 
 const toggleCollapse = () => {
   isCollapsed.value = !isCollapsed.value
@@ -508,6 +493,11 @@ const toggleSubmenu = (menu: string) => {
   }
 }
 
+import titlePage from './page/TitlePage.json'
+import ImagePage from './page/ImagePage.json'
+import ContentPage from './page/ContentPage.json'
+import ImageTextPage from './page/ImageTextPage.json'
+
 const handleToolClick = (tool: string) => {
   interface ParentWindowWithToolList extends Window {
     addTool?: (id: number) => void;
@@ -545,6 +535,18 @@ const handleToolClick = (tool: string) => {
   else if (tool === 'qa') {
     parentWindow?.addTool?.(15)
   }
+  else if (tool === 'titlepage') {
+    createSlideByTemplate(titlePage)
+  }
+  else if (tool === 'ImagePage') {
+    createSlideByTemplate(ImagePage)
+  }
+  else if (tool === 'ContentPage') {
+    createSlideByTemplate(ContentPage)
+  }
+  else if (tool === 'ImageTextPage') {
+    createSlideByTemplate(ImageTextPage)
+  }
 }
 
 const loadContentList = () => {
@@ -789,11 +791,22 @@ const handleParsingClose = () => {
   z-index: 100;
 
   &.visible {
-    width: 350px;
-    min-width: 350px;
+    width: 420px;
     // padding: 16px;
     border-left: 1px solid #E5E7EB;
   }
+
+  @media screen and (max-width: 1920px) {
+    &.visible {
+      width: 360px;
+    }
+  }
+
+  @media screen and (max-width: 1440px) {
+    &.visible {
+      width: 320px;
+    }
+  }
 }
 
 .submenu-title {

src/components/CollapsibleToolbar/page/ContentPage.json

@@ -0,0 +1,48 @@
+{
+    "id": "test-slide-1",
+    "elements": [
+        {
+            "type": "text",
+            "id": "Wy9M1HzdpW",
+            "left": 104.88621151271751,
+            "top": 283.9625167336011,
+            "width": 403.7483266398929,
+            "height": 76.03748326639892,
+            "content": "<ol style=\"font-size: 18px;color: #333;\"><li><p style=\"\"><span style=\"font-size: 18px;\">单击此处修改文本。&nbsp;Click here to edit the text.</span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\">单击此处修改文本。&nbsp;Click here to edit the text.</span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\">单击此处修改文本。&nbsp;Click here to edit the text.</span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\">单击此处修改文本。&nbsp;Click here to edit the text.</span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\">单击此处修改文本。&nbsp;Click here to edit the text.</span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\">单击此处修改文本。&nbsp;Click here to edit the text.</span></p></li></ol><p style=\"\"><br class=\"ProseMirror-trailingBreak\"></p>",
+            "rotate": 0,
+            "defaultFontName": "",
+            "defaultColor": "#333",
+            "vertical": false
+        },
+        {
+            "type": "text",
+            "id": "JBGGLlQU2W",
+            "left": 104.88621151271751,
+            "top": 57.28915662650606,
+            "width": 747.5234270414993,
+            "height": 76.03748326639892,
+            "content": "<p style=\"\"><span style=\"font-size: 36px;\">单击此处修改标题</span></p><p style=\"\"><span style=\"font-size: 36px;\"> Click here to edit the title</span></p>",
+            "rotate": 0,
+            "defaultFontName": "",
+            "defaultColor": "#333",
+            "vertical": false
+        },
+        {
+            "type": "text",
+            "id": "6209GCogeQ",
+            "left": 682.4899598393573,
+            "top": 283.9625167336011,
+            "width": 403.7483266398929,
+            "height": 76.03748326639892,
+            "content": "<ul style=\"list-style-type: circle;font-size: 18px;color: rgb(51, 51, 51);\"><li><p style=\"\"><span style=\"font-size: 18px;\"><span style=\"color: rgb(51, 51, 51);\">单击此处修改文本。&nbsp;Click here to edit the text.</span></span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\"><span style=\"color: rgb(51, 51, 51);\">单击此处修改文本。&nbsp;Click here to edit the text.</span></span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\"><span style=\"color: rgb(51, 51, 51);\">单击此处修改文本。&nbsp;Click here to edit the text.</span></span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\"><span style=\"color: rgb(51, 51, 51);\">单击此处修改文本。&nbsp;Click here to edit the text.</span></span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\"><span style=\"color: rgb(51, 51, 51);\">单击此处修改文本。&nbsp;Click here to edit the text.</span></span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\"><span style=\"color: rgb(51, 51, 51);\">单击此处修改文本。&nbsp;Click here to edit the text.</span></span></p></li></ul>",
+            "rotate": 0,
+            "defaultFontName": "",
+            "defaultColor": "#333",
+            "vertical": false
+        }
+    ],
+    "background": {
+        "type": "solid",
+        "color": "#fff"
+    }
+}

src/components/CollapsibleToolbar/page/ImagePage.json

@@ -0,0 +1,38 @@
+{
+    "id": "test-slide-1",
+    "elements": [
+        {
+            "type": "text",
+            "id": "Wy9M1HzdpW",
+            "left": 266.2,
+            "top": 593.4738955823293,
+            "width": 747.5234270414993,
+            "height": 76.03748326639892,
+            "content": "<p style=\"text-align: center;text-align-last: center;\"><span style=\"font-size: 18px;\">这是这幅图片的描述。This is the description of this picture. 這是這幅圖片的描述。</span></p>",
+            "rotate": 0,
+            "defaultFontName": "",
+            "defaultColor": "#333",
+            "vertical": false
+        },
+        {
+            "type": "shape",
+            "id": "-SplTJKvh_",
+            "left": 254.41954484605088,
+            "top": 109.40428380187416,
+            "width": 771.0843373493975,
+            "height": 430.5220883534136,
+            "viewBox": [
+                200,
+                200
+            ],
+            "path": "M 0 0 L 200 0 L 200 200 L 0 200 Z",
+            "fill": "#5b9bd5",
+            "fixedRatio": false,
+            "rotate": 0
+        }
+    ],
+    "background": {
+        "type": "solid",
+        "color": "#fff"
+    }
+}

src/components/CollapsibleToolbar/page/ImageTextPage.json

@@ -0,0 +1,64 @@
+{
+    "id": "test-slide-1",
+    "elements": [
+        {
+            "type": "text",
+            "id": "Wy9M1HzdpW",
+            "left": 104.88621151271751,
+            "top": 283.9625167336011,
+            "width": 403.7483266398929,
+            "height": 76.03748326639892,
+            "content": "<ol style=\"font-size: 18px;color: #333;\"><li><p style=\"\"><span style=\"font-size: 18px;\">单击此处修改文本。&nbsp;Click here to edit the text.</span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\">单击此处修改文本。&nbsp;Click here to edit the text.</span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\">单击此处修改文本。&nbsp;Click here to edit the text.</span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\">单击此处修改文本。&nbsp;Click here to edit the text.</span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\">单击此处修改文本。&nbsp;Click here to edit the text.</span></p></li><li><p style=\"\"><span style=\"font-size: 18px;\">单击此处修改文本。&nbsp;Click here to edit the text.</span></p></li></ol><p style=\"\"><br class=\"ProseMirror-trailingBreak\"></p>",
+            "rotate": 0,
+            "defaultFontName": "",
+            "defaultColor": "#333",
+            "vertical": false
+        },
+        {
+            "type": "text",
+            "id": "JBGGLlQU2W",
+            "left": 104.88621151271751,
+            "top": 57.28915662650606,
+            "width": 747.5234270414993,
+            "height": 76.03748326639892,
+            "content": "<p style=\"\"><span style=\"font-size: 36px;\">单击此处修改标题</span></p><p style=\"\"><span style=\"font-size: 36px;\"> Click here to edit the title</span></p>",
+            "rotate": 0,
+            "defaultFontName": "",
+            "defaultColor": "#333",
+            "vertical": false
+        },
+        {
+            "type": "shape",
+            "id": "yn3lcZe3MS",
+            "left": 710.6827309236947,
+            "top": 243.2730923694779,
+            "width": 358.7684069611781,
+            "height": 268.80856760374826,
+            "viewBox": [
+                200,
+                200
+            ],
+            "path": "M 0 0 L 200 0 L 200 200 L 0 200 Z",
+            "fill": "#5b9bd5",
+            "fixedRatio": false,
+            "rotate": 0
+        },
+        {
+            "type": "text",
+            "id": "TZWTJZ70aj",
+            "left": 667.1753681392235,
+            "top": 554.7523427041499,
+            "width": 445.7831325301205,
+            "height": 50,
+            "content": "<p style=\"text-align: center;text-align-last: center;\">这是这幅图片的描述。This is the description of this picture. </p>",
+            "rotate": 0,
+            "defaultFontName": "",
+            "defaultColor": "#333",
+            "vertical": false
+        }
+    ],
+    "background": {
+        "type": "solid",
+        "color": "#fff"
+    }
+}

src/components/CollapsibleToolbar/page/TitlePage.json

@@ -0,0 +1,36 @@
+{
+    "id": "test-slide-1",
+    "elements": [
+        {
+            "type": "text",
+            "id": "qjXk3C3iwg",
+            "left": 119.51807228915663,
+            "top": 181.73012048192768,
+            "width": 1040.9638554216867,
+            "height": 221.68674698795178,
+            "content": "<p style=\"text-align: center;text-align-last: center;\"><span style=\"font-size: 104px;\"><span style=\"color: #000000;\">单击此处修改标题</span></span></p>",
+            "rotate": 0,
+            "defaultFontName": "",
+            "defaultColor": "#333",
+            "vertical": false,
+            "lineHeight": 1
+        },
+        {
+            "type": "text",
+            "id": "hm9gt3tnn-",
+            "left": 161.82061579651946,
+            "top": 416.7670682730924,
+            "width": 956.3587684069611,
+            "height": 157.429718875502,
+            "content": "<p style=\"text-align: center;text-align-last: center;\"><span style=\"font-size: 80px;\">单击此处修改副标题</span></p>",
+            "rotate": 0,
+            "defaultFontName": "",
+            "defaultColor": "#333",
+            "vertical": false
+        }
+    ],
+    "background": {
+        "type": "solid",
+        "color": "#fff"
+    }
+}