diff --git a/package-lock.json b/package-lock.json index 283dc697..6ccb8cd0 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ef0099f6..347018d1 100644 --- a/package.json +++ b/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", diff --git a/src/hooks/useCombineElement.ts b/src/hooks/useCombineElement.ts index 885badf1..dd64e458 100644 --- a/src/hooks/useCombineElement.ts +++ b/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[] = [] diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts index 698322ac..0c1de7de 100644 --- a/src/hooks/useCreateElement.ts +++ b/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, diff --git a/src/hooks/usePasteTextClipboardData.ts b/src/hooks/usePasteTextClipboardData.ts index 8e6cfd5b..e11040ff 100644 --- a/src/hooks/usePasteTextClipboardData.ts +++ b/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) diff --git a/src/hooks/useSlideHandler.ts b/src/hooks/useSlideHandler.ts index 2f1e8b86..17fc13f7 100644 --- a/src/hooks/useSlideHandler.ts +++ b/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) diff --git a/src/utils/common.ts b/src/utils/common.ts index 630b35da..d2260c53 100644 --- a/src/utils/common.ts +++ b/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 数字 diff --git a/src/utils/element.ts b/src/utils/element.ts index 7063237d..f6a9e9b5 100644 --- a/src/utils/element.ts +++ b/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, diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue index e1440080..7ada2b97 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue @@ -188,9 +188,9 @@