预置文本样式UI部分

src/hooks/useCreateElement.ts

@@ -55,8 +55,8 @@ export default () => {
         src,
         width,
         height,
-        left: 0,
+        left: (VIEWPORT_SIZE - width) / 2,
-        top: 0,
+        top: (VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO - height) / 2,
         fixedRatio: true,
       })
     })
@@ -87,19 +87,22 @@ export default () => {
     const data: TableCell[][] = new Array(row).fill(rowCells)
 
     const DEFAULT_CELL_WIDTH = 100
-    const DEFAULT_CELL_HEIGHT = 40
+    const DEFAULT_CELL_HEIGHT = 36
 
     const colWidths: number[] = new Array(col).fill(1 / col)
 
+    const width = col * DEFAULT_CELL_WIDTH
+    const height = row * DEFAULT_CELL_HEIGHT
+
     createElement({
       type: 'table',
       id: createRandomCode(),
-      width: col * DEFAULT_CELL_WIDTH,
+      width,
-      height: row * DEFAULT_CELL_HEIGHT,
+      height,
       colWidths,
       data,
-      left: 0,
+      left: (VIEWPORT_SIZE - width) / 2,
-      top: 0,
+      top: (VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO - height) / 2,
       outline: {
         width: 2,
         style: 'solid',

src/views/Editor/Canvas/index.vue

@@ -128,7 +128,6 @@ export default defineComponent({
     const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
 
     const viewportRef = ref<HTMLElement>()
-    const isShowGridLines = ref(false)
     const alignmentLines = ref<AlignmentLineProps[]>([])
 
     const activeGroupElementId = ref('')
@@ -202,7 +201,7 @@ export default defineComponent({
           handler: pasteElement,
         },
         {
-          text: '网格线',
+          text: showGridLines.value ? '关闭网格线' : '打开网格线',
           handler: toggleGridLines,
         },
         {
@@ -227,7 +226,6 @@ export default defineComponent({
       handleClickBlankArea,
       removeEditorAreaFocus,
       currentSlide,
-      isShowGridLines,
       creatingElement,
       insertElementFromCreateSelection,
       alignmentLines,

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="text-style-panel">
+    <div class="preset-style">
+      <div 
+        class="preset-style-item"
+        v-for="item in presetStyles"
+        :key="item.label"
+        :style="item.style"
+      >{{item.label}}</div>
+    </div>
+
+    <Divider />
+    
     <InputGroup compact class="row">
       <Select
         style="flex: 3;"
@@ -211,6 +222,36 @@ import ElementOpacity from '../common/ElementOpacity.vue'
 import ElementOutline from '../common/ElementOutline.vue'
 import ElementShadow from '../common/ElementShadow.vue'
 
+const presetStyles = [
+  {
+    label: '大标题',
+    style: {
+      fontSize: '30px',
+      fontWeight: 700,
+    },
+  },
+  {
+    label: '小标题',
+    style: {
+      fontSize: '24px',
+      fontWeight: 700,
+    },
+  },
+  {
+    label: '正文',
+    style: {
+      fontSize: '20px',
+    },
+  },
+  {
+    label: '注释',
+    style: {
+      fontSize: '16px',
+      fontStyle: 'italic',
+    },
+  },
+]
+
 export default defineComponent({
   name: 'text-style-panel',
   components: {
@@ -304,6 +345,7 @@ export default defineComponent({
       updateWordSpace,
       updateFill,
       emitRichTextCommand,
+      presetStyles,
     }
   },
 })
@@ -319,6 +361,36 @@ export default defineComponent({
   align-items: center;
   margin-bottom: 10px;
 }
+.preset-style {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+.preset-style-item {
+  width: 50%;
+  height: 60px;
+  border: solid 1px #d6d6d6;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  transition: all .2s;
+
+  &:hover {
+    border-color: $themeColor;
+    color: $themeColor;
+    z-index: 1;
+  }
+
+  &:nth-child(2n) {
+    margin-left: -1px;
+  }
+  &:nth-child(n+3) {
+    margin-top: -1px;
+  }
+}
 .text-color-btn {
   display: flex;
   flex-direction: column;