bug修复和配置调整

src/configs/shapes.ts

@@ -77,6 +77,10 @@ export const SHAPE_LIST = [
         viewBox: 200,
         path: 'M 50 0 L 200 0 L 150 200 L 0 200 L 50 0 Z'
       },
+      {
+        viewBox: 200,
+        path: 'M 0 0 L 150 0 L 200 200 L 50 200 L 0 0 Z'
+      },
       {
         viewBox: 200,
         path: 'M 50 0 L 150 0 L 200 200 L 0 200 L 50 0 Z'
@@ -117,6 +121,10 @@ export const SHAPE_LIST = [
         viewBox: 200,
         path: 'M 200 0 L 200 200 L 0 200 L 0 100 L 200 0 Z'
       },
+      {
+        viewBox: 200,
+        path: 'M 0 0 L 200 100 L 200 200 L 0 200 L 0 0 Z'
+      },
       {
         viewBox: 200,
         path: 'M 50 0 L 150 0 L 150 50 L 200 50 L 200 150 L 150 150 L 150 200 L 50 200 L 50 150 L 0 150 L 0 50 L 50 50 L 50 0 Z'

src/hooks/usePasteTextClipboardData.ts

@@ -48,8 +48,10 @@ export default () => {
   }
 
   const pasteSlide = (slide: Slide) => {
-    const newSlide = { ...slide, id: createRandomCode() }
+    store.commit(MutationTypes.ADD_SLIDE, {
-    store.commit(MutationTypes.ADD_SLIDE, newSlide)
+      ...slide,
+      id: createRandomCode(8),
+    })
     addHistorySnapshot()
   }
 

src/hooks/useSlideHandler.ts

@@ -61,11 +61,16 @@ export default () => {
   }
 
   const copyAndPasteSlide = () => {
-    store.commit(MutationTypes.ADD_SLIDE, currentSlide.value)
+    store.commit(MutationTypes.ADD_SLIDE, {
+      ...currentSlide.value,
+      id: createRandomCode(8),
+    })
     addHistorySnapshot()
   }
 
   const deleteSlide = () => {
+    if(slidesLength.value === 1) return message.warning('无法继续删除')
+    
     store.commit(MutationTypes.DELETE_SLIDE, currentSlide.value.id)
     addHistorySnapshot()
   }

src/mocks/index.ts

@@ -2,181 +2,7 @@ import { Slide } from '@/types/slides'
 
 export const slides: Slide[] = [
   {
-    id: 'xsxa123',
+    id: 'test123456',
-    elements: [
+    elements: [],
-      {
-        id: 'sdasaxs',
-        type: 'chart',
-        left: 680,
-        top: 20,
-        width: 300,
-        height: 300,
-        chartType: 'line',
-        themeColor: '#d70206',
-        data: {
-          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
-          series: [
-            [5, 2, 4, 2, 10],
-          ],
-        },
-      },
-      {
-        id: '1213asa',
-        type: 'table',
-        left: 20,
-        top: 20,
-        width: 400,
-        height: 108,
-        colWidths: [0.25, 0.25, 0.25, 0.25],
-        outline: {
-          width: 1,
-          style: 'solid',
-          color: '#999',
-        },
-        data: [
-          [
-            { id: '1', colspan: 1, rowspan: 1, text: '1' },
-            { id: '2', colspan: 1, rowspan: 1, text: '2' },
-            { id: '3', colspan: 1, rowspan: 1, text: '3' },
-            { id: '4', colspan: 1, rowspan: 1, text: '4' },
-          ],
-          [
-            { id: '6', colspan: 1, rowspan: 1, text: '6' },
-            { id: '7', colspan: 1, rowspan: 1, text: '7' },
-            { id: '8', colspan: 1, rowspan: 1, text: '8' },
-            { id: '9', colspan: 1, rowspan: 1, text: '9' },
-          ],
-          [
-            { id: '11', colspan: 1, rowspan: 1, text: '11' },
-            { id: '12', colspan: 1, rowspan: 1, text: '12' },
-            { id: '13', colspan: 1, rowspan: 1, text: '13' },
-            { id: '14', colspan: 1, rowspan: 1, text: '14' },
-          ],
-        ],
-      },
-    ],
-  },
-  {
-    id: 'xxx1',
-    background: {
-      type: 'solid',
-      color: '#fff',
-    },
-    elements: [
-      {
-        id: 'xxx1',
-        type: 'text',
-        left: 190,
-        top: 50,
-        width: 320,
-        height: 104,
-        rotate: 0,
-        shadow: {
-          h: 1,
-          v: 1,
-          blur: 3,
-          color: 'rgba(10, 10, 10, .5)'
-        },
-        opacity: 1,
-        lock: false,
-        content: '<p style=\'text-align: center;\'><span style=\'font-size: 28px;\'><span style=\'color: rgb(232, 107, 153); font-weight: bold;\'>一段测试文字</span>，字号固定为<span style=\'font-weight: bold; font-style: italic; text-decoration-line: underline;\'>28px</span></span></p>',
-      },
-      {
-        id: 'xxx3',
-        type: 'image',
-        left: 80,
-        top: 250,
-        width: 180,
-        height: 180,
-        rotate: 0,
-        outline: {
-          width: 4,
-          style: 'solid',
-          color: '#333'
-        },
-        clip: {
-          range: [[30, 0], [100, 70]],
-          shape: 'ellipse'
-        },
-        fixedRatio: false,
-        lock: false,
-        src: 'https://img.lessonplan.cn/IMG/Show/ppt/3ab74e91-c34f-499d-9711-166e423d4dd6/1573622467064v2-7aa3ce420052983d91c6d01b47a7441d_hd.jpg',
-      },
-      {
-        id: 'xxx2',
-        type: 'image',
-        left: 750,
-        top: 320,
-        width: 150,
-        height: 150,
-        rotate: 0,
-        fixedRatio: true,
-        lock: false,
-        src: 'https://img.lessonplan.cn/IMG/Show/ppt/3ab74e91-c34f-499d-9711-166e423d4dd6/62d9adb3-e7a6-4dc4-a352-095cffb49f08/b1be1a2f-f893-47d3-a8a3-eac7d04d395f/1596159381259v2-b2c69096d25ae16bf6ca09e30add3e65_hd.jpg',
-      },
-    ],
-    animations: [
-      {
-        elId: 'xxx1',
-        type: 'rotateIn',
-        duration: 1000,
-      },
-      {
-        elId: 'xxx2',
-        type: 'zoomIn',
-        duration: 1000,
-      },
-    ],
-  },
-  {
-    id: 'sajd172',
-    elements: [
-      {
-        id: 'yyx1',
-        type: 'text',
-        left: 590,
-        top: 90,
-        width: 220,
-        height: 188,
-        rotate: 0,
-        opacity: 1,
-        lock: false,
-        content: '<div>😀 😐 😶 😜 🔔 ⭐ ⚡ 🔥 👍 💡 🔰 🎀 🎁 🥇 🏅 🏆 🎈 🎉 💎 🚧 ⛔ 📢 ⌛ ⏰ 🕒 🧩 🎵 📎 🔒 🔑 ⛳ 📌 📍 💬 📅 📈 📋 📜 📁 📱 💻 💾 🌏 🚚 🚡 🚢💧 🌐 🧭 💰 💳 🛒</div>',
-      },
-      {
-        id: 'xsfdas',
-        type: 'line',
-        width: 2,
-        left: 100,
-        top: 400,
-        end: [0, 0],
-        start: [300, 120],
-        style: 'solid',
-        color: '#888',
-        points: ['', 'arrow'],
-      },
-      {
-        id: 'xxx7',
-        type: 'shape',
-        left: 130,
-        top: 50,
-        width: 150,
-        height: 150,
-        rotate: 0,
-        fill: '#eebc29',
-        opacity: 0.9,
-        fixedRatio: false,
-        lock: false,
-        viewBox: 1024,
-        path: 'M721.35111111 475.59111111H302.64888889c-5.00622222 0-9.10222222 4.096-9.10222222 9.10222222v54.61333334c0 5.00622222 4.096 9.10222222 9.10222222 9.10222222h418.70222222c5.00622222 0 9.10222222-4.096 9.10222222-9.10222222v-54.61333334c0-5.00622222-4.096-9.10222222-9.10222222-9.10222222z M512 2.27555555C230.51377778 2.27555555 2.27555555 230.51377778 2.27555555 512s228.23822222 509.72444445 509.72444445 509.72444445 509.72444445-228.23822222 509.72444445-509.72444445S793.48622222 2.27555555 512 2.27555555z m0 932.97777778c-233.69955555 0-423.25333333-189.55377778-423.25333333-423.25333333s189.55377778-423.25333333 423.25333333-423.25333333 423.25333333 189.55377778 423.25333333 423.25333333-189.55377778 423.25333333-423.25333333 423.25333333z',
-      }
-    ],
-    animations: [
-      {
-        elId: 'yyx1',
-        type: 'flipInX',
-        duration: 1000,
-      },
-    ],
   },
 ]

src/prosemirror/utils.ts

@@ -86,7 +86,7 @@ export const getTextAttrs = (view: EditorView) => {
   const isCode = isActiveMark(view, 'code')
   const color = getAttrValue(view, 'forecolor', 'color') || '#000'
   const backcolor = getAttrValue(view, 'backcolor', 'backcolor') || '#000'
-  const fontsize = getAttrValue(view, 'fontsize', 'fontsize') || '12px'
+  const fontsize = getAttrValue(view, 'fontsize', 'fontsize') || '20px'
   const fontname = getAttrValue(view, 'fontname', 'fontname') || '微软雅黑'
   const align = getAttrValueInSelection(view, 'align') || 'left'
   const isBulletList = isActiveOfParentNodeType('bullet_list', view.state)

src/views/Editor/Canvas/GridLines.vue

@@ -26,7 +26,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const canvasScale = computed(() => store.state.canvasScale)
-    const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide.background)
+    const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide?.background)
 
     const gridColor = computed(() => {
       if(!background.value || background.value.type === 'image') return 'rgba(100, 100, 100, 0.5)'

src/views/Editor/Canvas/SlideBackground.vue

@@ -22,7 +22,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const showGridLines = computed(() => store.state.showGridLines)
-    const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide.background)
+    const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide?.background)
 
     const { backgroundStyle } = useSlideBackgroundStyle(background)
 

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

@@ -343,7 +343,7 @@ export default defineComponent({
       code: false,
       color: '#000',
       backcolor: '#000',
-      fontsize: '12px',
+      fontsize: '20px',
       fontname: '微软雅黑',
       align: 'left',
       bulletList: false,
@@ -354,10 +354,11 @@ export default defineComponent({
     const availableFonts = computed(() => store.state.availableFonts)
     const fontSizeOptions = [
       '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
-      '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '80px',
+      '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '76px',
+      '80px', '88px', '96px', '104px', '112px', '120px',
     ]
-    const lineHeightOptions = [0.5, 1.0, 1.2, 1.5, 1.8, 2.0, 3.0]
+    const lineHeightOptions = [0.9, 1.0, 1.15, 1.2, 1.4, 1.5, 1.8, 2.0, 2.5, 3.0]
-    const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 8]
+    const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 6, 8, 10]
 
     const updateRichTextAttrs = (attr: TextAttrs) => richTextAttrs.value = attr