perf: 使用 nanoid 生成随机 ID

package-lock.json

@@ -10385,9 +10385,9 @@
       }
     },
     "nanoid": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.2.0.tgz",
-      "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA=="
+      "version": "3.3.3",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.3.tgz",
+      "integrity": "sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w=="
     },
     "nanomatch": {
       "version": "1.2.13",

package.json

@@ -22,6 +22,7 @@
     "html-to-image": "^1.9.0",
     "lodash": "^4.17.20",
     "mitt": "^3.0.0",
+    "nanoid": "^3.3.3",
     "pinia": "^2.0.11",
     "pptxgenjs": "^3.10.0",
     "prosemirror-commands": "^1.1.7",

src/hooks/useCombineElement.ts

@@ -1,8 +1,8 @@
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
+import { nanoid } from 'nanoid'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElement } from '@/types/slides'
-import { createRandomCode } from '@/utils/common'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default () => {
@@ -36,7 +36,7 @@ export default () => {
     let newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
 
     // 生成分组ID
-    const groupId = createRandomCode()
+    const groupId = nanoid(10)
 
     // 收集需要组合的元素列表，并赋上唯一分组ID
     const combineElementList: PPTElement[] = []

src/hooks/useCreateElement.ts

@@ -1,6 +1,6 @@
 import { storeToRefs } from 'pinia'
+import { nanoid } from 'nanoid'
 import { useMainStore, useSlidesStore } from '@/store'
-import { createRandomCode } from '@/utils/common'
 import { getImageSize } from '@/utils/image'
 import { VIEWPORT_SIZE } from '@/configs/canvas'
 import { PPTLineElement, PPTElement, TableCell, TableCellStyle, PPTShapeElement, PPTChartElement, ChartOptions, PresetChartType } from '@/types/slides'
@@ -64,7 +64,7 @@ export default () => {
 
       createElement({
         type: 'image',
-        id: createRandomCode(),
+        id: nanoid(10),
         src,
         width,
         height,
@@ -83,7 +83,7 @@ export default () => {
   const createChartElement = (type: PresetChartType) => {
     const newElement: PPTChartElement = {
       type: 'chart',
-      id: createRandomCode(),
+      id: nanoid(10),
       chartType: CHART_TYPES[type],
       left: 300,
       top: 81.25,
@@ -127,7 +127,7 @@ export default () => {
     for (let i = 0; i < row; i++) {
       const rowCells: TableCell[] = []
       for (let j = 0; j < col; j++) {
-        rowCells.push({ id: createRandomCode(), colspan: 1, rowspan: 1, text: '', style })
+        rowCells.push({ id: nanoid(10), colspan: 1, rowspan: 1, text: '', style })
       }
       data.push(rowCells)
     }
@@ -142,7 +142,7 @@ export default () => {
 
     createElement({
       type: 'table',
-      id: createRandomCode(),
+      id: nanoid(10),
       width,
       height,
       colWidths,
@@ -174,7 +174,7 @@ export default () => {
     const { left, top, width, height } = position
     createElement({
       type: 'text',
-      id: createRandomCode(),
+      id: nanoid(10),
       left, 
       top, 
       width, 
@@ -195,7 +195,7 @@ export default () => {
     const { left, top, width, height } = position
     const newElement: PPTShapeElement = {
       type: 'shape',
-      id: createRandomCode(),
+      id: nanoid(10),
       left, 
       top, 
       width, 
@@ -225,7 +225,7 @@ export default () => {
 
     const newElement: PPTLineElement = {
       type: 'line',
-      id: createRandomCode(),
+      id: nanoid(10),
       left, 
       top, 
       start,
@@ -248,7 +248,7 @@ export default () => {
   const createLatexElement = (data: { path: string; latex: string; w: number; h: number; }) => {
     createElement({
       type: 'latex',
-      id: createRandomCode(),
+      id: nanoid(10),
       width: data.w,
       height: data.h,
       rotate: 0,
@@ -270,7 +270,7 @@ export default () => {
   const createVideoElement = (src: string) => {
     createElement({
       type: 'video',
-      id: createRandomCode(),
+      id: nanoid(10),
       width: 500,
       height: 300,
       rotate: 0,
@@ -287,7 +287,7 @@ export default () => {
   const createAudioElement = (src: string) => {
     createElement({
       type: 'audio',
-      id: createRandomCode(),
+      id: nanoid(10),
       width: 50,
       height: 50,
       rotate: 0,

src/hooks/usePasteTextClipboardData.ts

@@ -1,8 +1,8 @@
 import { storeToRefs } from 'pinia'
+import { nanoid } from 'nanoid'
 import { useSlidesStore, useMainStore } from '@/store'
 import { pasteCustomClipboardString } from '@/utils/clipboard'
 import { PPTElement, Slide } from '@/types/slides'
-import { createRandomCode } from '@/utils/common'
 import { createElementIdMap } from '@/utils/element'
 import { parseText2Paragraphs } from '@/utils/textParser'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@@ -65,7 +65,7 @@ export default () => {
       }
       return {
         ...slide,
-        id: createRandomCode(),
+        id: nanoid(10),
       }
     })
     slidesStore.addSlide(newSlides)

src/hooks/useSlideHandler.ts

@@ -1,8 +1,8 @@
 import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
+import { nanoid } from 'nanoid'
 import { useMainStore, useSlidesStore } from '@/store'
 import { Slide } from '@/types/slides'
-import { createRandomCode } from '@/utils/common'
 import { copyText, readClipboard } from '@/utils/clipboard'
 import { encrypt } from '@/utils/crypto'
 import { createElementIdMap } from '@/utils/element'
@@ -27,7 +27,7 @@ export default () => {
   // 重置幻灯片
   const resetSlides = () => {
     const emptySlide: Slide = {
-      id: createRandomCode(),
+      id: nanoid(10),
       elements: [],
       background: {
         type: 'solid',
@@ -74,7 +74,7 @@ export default () => {
   // 创建一页空白页并添加到下一页
   const createSlide = () => {
     const emptySlide: Slide = {
-      id: createRandomCode(),
+      id: nanoid(10),
       elements: [],
       background: {
         type: 'solid',
@@ -96,7 +96,7 @@ export default () => {
     }
     const newSlide = {
       ...slide,
-      id: createRandomCode(),
+      id: nanoid(10),
     }
     mainStore.setActiveElementIdList([])
     slidesStore.addSlide(newSlide)

src/utils/common.ts

@@ -1,20 +1,5 @@
 import { padStart } from 'lodash'
 
-/**
- * 生成随机码
- * @param len 随机码长度
- */
-export const createRandomCode = (len = 8) => {
-  const charset = `_0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`
-  const maxLen = charset.length
-  let ret = ''
-  for (let i = 0; i < len; i++) {
-    const randomIndex = Math.floor(Math.random() * maxLen)
-    ret += charset[randomIndex]
-  }
-  return ret
-}
-
 /**
  * 补足数字位数
  * @param digit 数字

src/utils/element.ts

@@ -1,6 +1,6 @@
 import tinycolor from 'tinycolor2'
+import { nanoid } from 'nanoid'
 import { PPTElement, PPTLineElement } from '@/types/slides'
-import { createRandomCode } from '@/utils/common'
 
 interface RotatedElementData {
   left: number;
@@ -164,9 +164,9 @@ export const createElementIdMap = (elements: PPTElement[]) => {
   for (const element of elements) {
     const groupId = element.groupId
     if (groupId && !groupIdMap[groupId]) {
-      groupIdMap[groupId] = createRandomCode()
+      groupIdMap[groupId] = nanoid(10)
     }
-    elIdMap[element.id] = createRandomCode()
+    elIdMap[element.id] = nanoid(10)
   }
   return {
     groupIdMap,

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

@@ -188,9 +188,9 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
+import { nanoid } from 'nanoid'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTTableElement, TableCell, TableCellStyle, TableTheme } from '@/types/slides'
-import { createRandomCode } from '@/utils/common'
 import { WEB_FONTS } from '@/configs/font'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
@@ -351,7 +351,7 @@ export default defineComponent({
       const rowCount = _handleElement.data.length
 
       if (value > rowCount) {
-        const rowCells: TableCell[] = new Array(colCount.value).fill({ id: createRandomCode(), colspan: 1, rowspan: 1, text: '' })
+        const rowCells: TableCell[] = new Array(colCount.value).fill({ id: nanoid(10), colspan: 1, rowspan: 1, text: '' })
         const newTableCells: TableCell[][] = new Array(value - rowCount).fill(rowCells)
   
         const tableCells: TableCell[][] = JSON.parse(JSON.stringify(_handleElement.data))
@@ -375,7 +375,7 @@ export default defineComponent({
 
       if (value > colCount) {
         tableCells = tableCells.map(item => {
-          const cells: TableCell[] = new Array(value - colCount).fill({ id: createRandomCode(), colspan: 1, rowspan: 1, text: '' })
+          const cells: TableCell[] = new Array(value - colCount).fill({ id: nanoid(10), colspan: 1, rowspan: 1, text: '' })
           item.push(...cells)
           return item
         })

src/views/components/element/TableElement/EditableTable.vue

@@ -70,11 +70,11 @@
 import { computed, defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
 import { debounce, isEqual } from 'lodash'
 import { storeToRefs } from 'pinia'
+import { nanoid } from 'nanoid'
 import { useMainStore } from '@/store'
 import { PPTElementOutline, TableCell, TableTheme } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import { KEYS } from '@/configs/hotkey'
-import { createRandomCode } from '@/utils/common'
 import { getTextStyle, formatText } from './utils'
 import useHideCells from './useHideCells'
 import useSubThemeColor from './useSubThemeColor'
@@ -332,7 +332,7 @@ export default defineComponent({
           colspan: 1,
           rowspan: 1,
           text: '',
-          id: createRandomCode(),
+          id: nanoid(10),
         })
       }
 
@@ -347,7 +347,7 @@ export default defineComponent({
           colspan: 1,
           rowspan: 1,
           text: '',
-          id: createRandomCode(),
+          id: nanoid(10),
         }
         item.splice(colIndex, 0, cell)
         return item
@@ -368,7 +368,7 @@ export default defineComponent({
           for (let j = 0; j < _tableCells[0].length; j++) {
             rowCells.push({
               ...defaultCell,
-              id: createRandomCode(),
+              id: nanoid(10),
             })
           }
           newRows.push(rowCells)
@@ -381,7 +381,7 @@ export default defineComponent({
           for (let i = 0; i < colCount; i++) {
             const cell = {
               ...defaultCell,
-              id: createRandomCode(),
+              id: nanoid(10),
             }
             cells.push(cell)
           }