diff --git a/index.html b/index.html index 3de9164c..c155997e 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -
基于 Vue 3.x + TypeScript 的在线演示文稿应用
",rotate:0},{type:"line",id:"FnpZs4",left:361,top:238,start:[0,0],end:[549,0],points:["",""],color:"#5b9bd5",style:"solid",width:2}],background:{type:"solid",color:"#ffffff"}}],S={themeColor:"#5b9bd5",fontColor:"#333",fontName:"微软雅黑",backgroundColor:"#fff"},C={activeElementIdList:[],handleElementId:"",activeGroupElementId:"",canvasPercentage:90,canvasScale:1,thumbnailsFocus:!1,editorAreaFocus:!1,disableHotkeys:!1,showGridLines:!1,creatingElement:null,availableFonts:[],toolbarState:"slideStyle",viewportRatio:.5625,theme:S,slides:I,slideIndex:0,selectedSlidesIndex:[],snapshotCursor:-1,snapshotLength:0,ctrlKeyState:!1,shiftKeyState:!1,screening:!1,clipingImageElementId:""},N=(n("d81d"),n("4de4"),n("caad"),n("2532"),n("7db0"),{currentSlide:function(e){return e.slides[e.slideIndex]||null},currentSlideAnimations:function(e){var t=e.slides[e.slideIndex];if(!t)return null;var n=t.animations;if(!n)return null;var o=t.elements,c=o.map((function(e){return e.id}));return n.filter((function(e){return c.includes(e.elId)}))},activeElementList:function(e){var t=e.slides[e.slideIndex];return t&&t.elements?t.elements.filter((function(t){return e.activeElementIdList.includes(t.id)})):[]},handleElement:function(e){var t=e.slides[e.slideIndex];return t&&t.elements&&t.elements.find((function(t){return e.handleElementId===t.id}))||null},canUndo:function(e){return e.snapshotCursor>0},canRedo:function(e){return e.snapshotCursorPPTIST
',\n rotate: 0\n },\n {\n type: 'text',\n id: '7stmVP',\n left: 355,\n top: 253.25,\n width: 585,\n height: 56,\n content: '基于 Vue 3.x + TypeScript 的在线演示文稿应用
',\n rotate: 0\n },\n {\n type: 'line',\n id: 'FnpZs4',\n left: 361,\n top: 238,\n start: [0, 0],\n end: [549, 0],\n points: ['', ''],\n color: '#5b9bd5',\n style: 'solid',\n width: 2,\n },\n ],\n background: {\n type: 'solid',\n color: '#ffffff',\n },\n }\n]","import { SlideTheme } from '@/types/slides'\n\nexport const theme: SlideTheme = {\n themeColor: '#5b9bd5',\n fontColor: '#333',\n fontName: '微软雅黑',\n backgroundColor: '#fff',\n}","import { Slide, SlideTheme } from '@/types/slides'\r\nimport { CreatingElement } from '@/types/edit'\r\nimport { ToolbarState } from '@/types/toolbar'\r\nimport { slides } from '@/mocks/slides'\r\nimport { theme } from '@/mocks/theme'\r\nimport { SYS_FONTS } from '@/configs/font'\r\n\r\nexport interface State {\r\n activeElementIdList: string[];\r\n handleElementId: string;\r\n activeGroupElementId: string;\r\n canvasPercentage: number;\r\n canvasScale: number;\r\n thumbnailsFocus: boolean;\r\n editorAreaFocus: boolean;\r\n disableHotkeys: boolean;\r\n showGridLines: boolean;\r\n creatingElement: CreatingElement | null;\r\n availableFonts: typeof SYS_FONTS;\r\n toolbarState: ToolbarState;\r\n theme: SlideTheme;\r\n viewportRatio: number;\r\n slides: Slide[];\r\n slideIndex: number;\r\n selectedSlidesIndex: number[];\r\n snapshotCursor: number;\r\n snapshotLength: number;\r\n ctrlKeyState: boolean;\r\n shiftKeyState: boolean;\r\n screening: boolean;\r\n clipingImageElementId: string;\r\n}\r\n\r\nexport const state: State = {\r\n activeElementIdList: [], // 被选中的元素ID集合,包含 handleElementId\r\n handleElementId: '', // 正在操作的元素ID\r\n activeGroupElementId: '', // 组合元素成员中,被选中可独立操作的元素ID\r\n canvasPercentage: 90, // 画布可视区域百分比\r\n canvasScale: 1, // 画布缩放比例(基于宽度1000px)\r\n thumbnailsFocus: false, // 左侧导航缩略图区域聚焦\r\n editorAreaFocus: false, // 编辑区域聚焦\r\n disableHotkeys: false, // 禁用快捷键\r\n showGridLines: false, // 显示网格线\r\n creatingElement: null, // 正在插入的元素信息,需要绘制插入的元素需要(文字、形状、线条)\r\n availableFonts: [], // 当前环境可用字体\r\n toolbarState: 'slideStyle', // 右侧工具栏状态\r\n viewportRatio: 0.5625, // 可是区域比例,默认16:9\r\n theme: theme, // 主题样式\r\n slides: slides, // 幻灯片页面数据\r\n slideIndex: 0, // 当前页面索引\r\n selectedSlidesIndex: [], // 当前被选中的页面索引集合\r\n snapshotCursor: -1, // 历史快照指针\r\n snapshotLength: 0, // 历史快照长度\r\n ctrlKeyState: false, // ctrl键按下状态\r\n shiftKeyState: false, // shift键按下状态\r\n screening: false, // 是否进入放映状态\r\n clipingImageElementId: '', // 当前正在裁剪的图片ID \r\n}","import { GetterTree } from 'vuex'\r\nimport { State } from './state'\r\n\r\nexport const getters: GetterTree{{slides}}\n
1,\n 'active': activedCell === `${rowIndex}_${colIndex}`,\n }\"\n :style=\"{\n borderStyle: outline.style,\n borderColor: outline.color,\n borderWidth: outline.width + 'px',\n ...getTextStyle(cell.style),\n }\"\n v-for=\"(cell, colIndex) in rowCells\"\n :key=\"cell.id\"\n :rowspan=\"cell.rowspan\"\n :colspan=\"cell.colspan\"\n :data-cell-index=\"`${rowIndex}_${colIndex}`\"\n v-show=\"!hideCells.includes(`${rowIndex}_${colIndex}`)\"\n @mousedown=\"$event => handleCellMousedown($event, rowIndex, colIndex)\"\n @mouseenter=\"handleCellMouseenter(rowIndex, colIndex)\"\n v-contextmenu=\"el => contextmenus(el)\"\n >\n | \n
\n \n | \n
\n \n | \n
\n \n | \n
基于 Vue 3.x + TypeScript 的在线演示文稿应用
",rotate:0},{type:"line",id:"FnpZs4",left:361,top:238,start:[0,0],end:[549,0],points:["",""],color:"#5b9bd5",style:"solid",width:2}],background:{type:"solid",color:"#ffffff"}}],S={themeColor:"#5b9bd5",fontColor:"#333",fontName:"微软雅黑",backgroundColor:"#fff"},C={activeElementIdList:[],handleElementId:"",activeGroupElementId:"",canvasPercentage:90,canvasScale:1,thumbnailsFocus:!1,editorAreaFocus:!1,disableHotkeys:!1,showGridLines:!1,creatingElement:null,availableFonts:[],toolbarState:"slideStyle",viewportRatio:.5625,theme:S,slides:I,slideIndex:0,selectedSlidesIndex:[],snapshotCursor:-1,snapshotLength:0,ctrlKeyState:!1,shiftKeyState:!1,screening:!1,clipingImageElementId:""},N=(n("d81d"),n("4de4"),n("caad"),n("2532"),n("7db0"),{currentSlide:function(e){return e.slides[e.slideIndex]||null},currentSlideAnimations:function(e){var t=e.slides[e.slideIndex];if(!t)return null;var n=t.animations;if(!n)return null;var o=t.elements,c=o.map((function(e){return e.id}));return n.filter((function(e){return c.includes(e.elId)}))},activeElementList:function(e){var t=e.slides[e.slideIndex];return t&&t.elements?t.elements.filter((function(t){return e.activeElementIdList.includes(t.id)})):[]},handleElement:function(e){var t=e.slides[e.slideIndex];return t&&t.elements&&t.elements.find((function(t){return e.handleElementId===t.id}))||null},canUndo:function(e){return e.snapshotCursor>0},canRedo:function(e){return e.snapshotCursor