diff --git a/README.md b/README.md
index f298ed11..0a38a6e2 100644
--- a/README.md
+++ b/README.md
@@ -229,7 +229,8 @@ A. 首先需要明确的一点，就是移动端无论怎么做，体验上都
 └── views                         // 业务组件目录，分为 `编辑器` 和 `播放器` 两个部分。
     ├── components                // 公用的业务组件
     ├── Editor                    // 编辑器模块
-    └── Screen                    // 播放器模块
+    ├── Screen                    // 播放器模块
+    └── Screen                    // 移动端模块
 ```
 
 
diff --git a/src/components.d.ts b/src/components.d.ts
index 10d9bd75..f865f0fe 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -115,143 +115,143 @@ declare module 'vue' {
   export interface GlobalComponents {
 
     // antd 组件
-    InputNumber: typeof import('ant-design-vue')['InputNumber'];
-    Divider: typeof import('ant-design-vue')['Divider'];
-    Button: typeof import('ant-design-vue')['Button'];
-    ButtonGroup: typeof import('ant-design-vue')['Button']['Group'];
-    Tooltip: typeof import('ant-design-vue')['Tooltip'];
-    Popover: typeof import('ant-design-vue')['Popover'];
-    Slider: typeof import('ant-design-vue')['Slider'];
-    Select: typeof import('ant-design-vue')['Select'];
-    SelectOption: typeof import('ant-design-vue')['Select']['Option'];
-    SelectOptGroup: typeof import('ant-design-vue')['Select']['OptGroup'];
-    Switch: typeof import('ant-design-vue')['Switch'];
-    Radio: typeof import('ant-design-vue')['Radio'];
-    RadioGroup: typeof import('ant-design-vue')['Radio']['Group'];
-    RadioButton: typeof import('ant-design-vue')['Radio']['Button'];
-    Input: typeof import('ant-design-vue')['Input'];
-    InputGroup: typeof import('ant-design-vue')['Input']['Group'];
-    TextArea: typeof import('ant-design-vue')['Input']['TextArea'];
-    Modal: typeof import('ant-design-vue')['Modal'];
-    Dropdown: typeof import('ant-design-vue')['Dropdown'];
-    Menu: typeof import('ant-design-vue')['Menu'];
-    MenuItem: typeof import('ant-design-vue')['Menu']['Item'];
-    Checkbox: typeof import('ant-design-vue')['Checkbox'];
-    Drawer: typeof import('ant-design-vue')['Drawer'];
-    Spin: typeof import('ant-design-vue')['Spin'];
+    InputNumber: typeof import('ant-design-vue')['InputNumber']
+    Divider: typeof import('ant-design-vue')['Divider']
+    Button: typeof import('ant-design-vue')['Button']
+    ButtonGroup: typeof import('ant-design-vue')['Button']['Group']
+    Tooltip: typeof import('ant-design-vue')['Tooltip']
+    Popover: typeof import('ant-design-vue')['Popover']
+    Slider: typeof import('ant-design-vue')['Slider']
+    Select: typeof import('ant-design-vue')['Select']
+    SelectOption: typeof import('ant-design-vue')['Select']['Option']
+    SelectOptGroup: typeof import('ant-design-vue')['Select']['OptGroup']
+    Switch: typeof import('ant-design-vue')['Switch']
+    Radio: typeof import('ant-design-vue')['Radio']
+    RadioGroup: typeof import('ant-design-vue')['Radio']['Group']
+    RadioButton: typeof import('ant-design-vue')['Radio']['Button']
+    Input: typeof import('ant-design-vue')['Input']
+    InputGroup: typeof import('ant-design-vue')['Input']['Group']
+    TextArea: typeof import('ant-design-vue')['Input']['TextArea']
+    Modal: typeof import('ant-design-vue')['Modal']
+    Dropdown: typeof import('ant-design-vue')['Dropdown']
+    Menu: typeof import('ant-design-vue')['Menu']
+    MenuItem: typeof import('ant-design-vue')['Menu']['Item']
+    Checkbox: typeof import('ant-design-vue')['Checkbox']
+    Drawer: typeof import('ant-design-vue')['Drawer']
+    Spin: typeof import('ant-design-vue')['Spin']
 
     // 自定义组件
-    FileInput: typeof FileInput;
-    CheckboxButton: typeof CheckboxButton;
-    CheckboxButtonGroup: typeof CheckboxButtonGroup;
-    ColorPicker: typeof ColorPicker;
-    FullscreenSpin: typeof FullscreenSpin;
+    FileInput: typeof FileInput
+    CheckboxButton: typeof CheckboxButton
+    CheckboxButtonGroup: typeof CheckboxButtonGroup
+    ColorPicker: typeof ColorPicker
+    FullscreenSpin: typeof FullscreenSpin
 
     // IconPark 图标组件
-    IconPlayOne: typeof PlayOne;
-    IconFullScreenPlay: typeof FullScreenPlay;
-    IconLock: typeof Lock;
-    IconUnlock: typeof Unlock;
-    IconPpt: typeof Ppt;
-    IconFormat: typeof Format;
-    IconPicture: typeof Picture;
-    IconFullScreen: typeof FullScreen;
-    IconList: typeof List;
-    IconOrderedList: typeof OrderedList;
-    IconHelpcenter: typeof Helpcenter;
-    IconFlipVertically: typeof FlipVertically;
-    IconFlipHorizontally: typeof FlipHorizontally;
-    IconFontSize: typeof FontSize;
-    IconCode: typeof Code;
-    IconTextBold: typeof TextBold;
-    IconTextItalic: typeof TextItalic;
-    IconTextUnderline: typeof TextUnderline;
-    IconStrikethrough: typeof Strikethrough;
-    IconEdit: typeof Edit;
-    IconQuote: typeof Quote;
-    IconBackgroundColor: typeof BackgroundColor;
-    IconGroup: typeof Group;
-    IconUngroup: typeof Ungroup;
-    IconBack: typeof Back;
-    IconNext: typeof Next;
-    IconFullwidth: typeof Fullwidth;
-    IconAlignTop: typeof AlignTop;
-    IconAlignLeft: typeof AlignLeft;
-    IconAlignRight: typeof AlignRight;
-    IconAlignBottom: typeof AlignBottom;
-    IconAlignVertically: typeof AlignVertically;
-    IconAlignHorizontally: typeof AlignHorizontally;
-    IconBringToFront: typeof BringToFront;
-    IconSendToBack: typeof SendToBack;
-    IconAlignTextLeft: typeof AlignTextLeft;
-    IconAlignTextRight: typeof AlignTextRight;
-    IconAlignTextCenter: typeof AlignTextCenter;
-    IconRowHeight: typeof RowHeight;
-    IconWrite: typeof Write;
-    IconInsertTable: typeof InsertTable;
-    IconAddText: typeof AddText;
-    IconFill: typeof Fill;
-    IconTailoring: typeof Tailoring;
-    IconEffects: typeof Effects;
-    IconColorFilter: typeof ColorFilter;
-    IconDown: typeof Down;
-    IconPlus: typeof Plus;
-    IconMinus: typeof Minus;
-    IconConnection: typeof Connection;
-    IconBringToFrontOne: typeof BringToFrontOne;
-    IconSentToBack: typeof SentToBack;
-    IconGithub: typeof Github;
-    IconChartProportion: typeof ChartProportion;
-    IconChartHistogram: typeof ChartHistogram;
-    IconChartHistogramOne: typeof ChartHistogramOne;
-    IconChartLineArea: typeof ChartLineArea;
-    IconChartRing: typeof ChartRing;
-    IconChartScatter: typeof ChartScatter;
-    IconChartLine: typeof ChartLine;
-    IconChartPie: typeof ChartPie;
-    IconText: typeof Text;
-    IconRotate: typeof Rotate;
-    IconLeftTwo: typeof LeftTwo;
-    IconRightTwo: typeof RightTwo;
-    IconPlatte: typeof Platte;
-    IconUpOne: typeof UpOne;
-    IconDownOne: typeof DownOne;
-    IconClose: typeof Close;
-    IconCloseSmall: typeof CloseSmall;
-    IconUndo: typeof Undo;
-    IconTransform: typeof Transform;
-    IconClick: typeof Click;
-    IconTheme: typeof Theme;
-    IconArrowCircleLeft: typeof ArrowCircleLeft;
-    IconGraphicDesign: typeof GraphicDesign;
-    IconLogout: typeof Logout;
-    IconErase: typeof Erase;
-    IconClear: typeof Clear;
-    IconFolderClose: typeof FolderClose;
-    IconAlignTextTopOne: typeof AlignTextTopOne;
-    IconAlignTextBottomOne: typeof AlignTextBottomOne;
-    IconAlignTextMiddleOne: typeof AlignTextMiddleOne;
-    IconPause: typeof Pause;
-    IconVolumeMute: typeof VolumeMute;
-    IconVolumeNotice: typeof VolumeNotice;
-    IconVolumeSmall: typeof VolumeSmall;
-    IconVideoTwo: typeof VideoTwo;
-    IconFormula: typeof Formula;
-    IconLinkOne: typeof LinkOne;
-    IconFullScreenOne: typeof FullScreenOne;
-    IconOffScreenOne: typeof OffScreenOne;
-    IconPower: typeof Power;
-    IconListView: typeof ListView;
-    IconMagic: typeof Magic;
-    IconHighLight: typeof HighLight;
-    IconShare: typeof Share;
-    IconIndentLeft: typeof IndentLeft;
-    IconIndentRight: typeof IndentRight;
-    IconVerticalSpacingBetweenItems: typeof VerticalSpacingBetweenItems;
-    IconCopy: typeof Copy;
-    IconDelete: typeof Delete;
-    IconSquare: typeof Square;
-    IconRound: typeof Round;
+    IconPlayOne: typeof PlayOne
+    IconFullScreenPlay: typeof FullScreenPlay
+    IconLock: typeof Lock
+    IconUnlock: typeof Unlock
+    IconPpt: typeof Ppt
+    IconFormat: typeof Format
+    IconPicture: typeof Picture
+    IconFullScreen: typeof FullScreen
+    IconList: typeof List
+    IconOrderedList: typeof OrderedList
+    IconHelpcenter: typeof Helpcenter
+    IconFlipVertically: typeof FlipVertically
+    IconFlipHorizontally: typeof FlipHorizontally
+    IconFontSize: typeof FontSize
+    IconCode: typeof Code
+    IconTextBold: typeof TextBold
+    IconTextItalic: typeof TextItalic
+    IconTextUnderline: typeof TextUnderline
+    IconStrikethrough: typeof Strikethrough
+    IconEdit: typeof Edit
+    IconQuote: typeof Quote
+    IconBackgroundColor: typeof BackgroundColor
+    IconGroup: typeof Group
+    IconUngroup: typeof Ungroup
+    IconBack: typeof Back
+    IconNext: typeof Next
+    IconFullwidth: typeof Fullwidth
+    IconAlignTop: typeof AlignTop
+    IconAlignLeft: typeof AlignLeft
+    IconAlignRight: typeof AlignRight
+    IconAlignBottom: typeof AlignBottom
+    IconAlignVertically: typeof AlignVertically
+    IconAlignHorizontally: typeof AlignHorizontally
+    IconBringToFront: typeof BringToFront
+    IconSendToBack: typeof SendToBack
+    IconAlignTextLeft: typeof AlignTextLeft
+    IconAlignTextRight: typeof AlignTextRight
+    IconAlignTextCenter: typeof AlignTextCenter
+    IconRowHeight: typeof RowHeight
+    IconWrite: typeof Write
+    IconInsertTable: typeof InsertTable
+    IconAddText: typeof AddText
+    IconFill: typeof Fill
+    IconTailoring: typeof Tailoring
+    IconEffects: typeof Effects
+    IconColorFilter: typeof ColorFilter
+    IconDown: typeof Down
+    IconPlus: typeof Plus
+    IconMinus: typeof Minus
+    IconConnection: typeof Connection
+    IconBringToFrontOne: typeof BringToFrontOne
+    IconSentToBack: typeof SentToBack
+    IconGithub: typeof Github
+    IconChartProportion: typeof ChartProportion
+    IconChartHistogram: typeof ChartHistogram
+    IconChartHistogramOne: typeof ChartHistogramOne
+    IconChartLineArea: typeof ChartLineArea
+    IconChartRing: typeof ChartRing
+    IconChartScatter: typeof ChartScatter
+    IconChartLine: typeof ChartLine
+    IconChartPie: typeof ChartPie
+    IconText: typeof Text
+    IconRotate: typeof Rotate
+    IconLeftTwo: typeof LeftTwo
+    IconRightTwo: typeof RightTwo
+    IconPlatte: typeof Platte
+    IconUpOne: typeof UpOne
+    IconDownOne: typeof DownOne
+    IconClose: typeof Close
+    IconCloseSmall: typeof CloseSmall
+    IconUndo: typeof Undo
+    IconTransform: typeof Transform
+    IconClick: typeof Click
+    IconTheme: typeof Theme
+    IconArrowCircleLeft: typeof ArrowCircleLeft
+    IconGraphicDesign: typeof GraphicDesign
+    IconLogout: typeof Logout
+    IconErase: typeof Erase
+    IconClear: typeof Clear
+    IconFolderClose: typeof FolderClose
+    IconAlignTextTopOne: typeof AlignTextTopOne
+    IconAlignTextBottomOne: typeof AlignTextBottomOne
+    IconAlignTextMiddleOne: typeof AlignTextMiddleOne
+    IconPause: typeof Pause
+    IconVolumeMute: typeof VolumeMute
+    IconVolumeNotice: typeof VolumeNotice
+    IconVolumeSmall: typeof VolumeSmall
+    IconVideoTwo: typeof VideoTwo
+    IconFormula: typeof Formula
+    IconLinkOne: typeof LinkOne
+    IconFullScreenOne: typeof FullScreenOne
+    IconOffScreenOne: typeof OffScreenOne
+    IconPower: typeof Power
+    IconListView: typeof ListView
+    IconMagic: typeof Magic
+    IconHighLight: typeof HighLight
+    IconShare: typeof Share
+    IconIndentLeft: typeof IndentLeft
+    IconIndentRight: typeof IndentRight
+    IconVerticalSpacingBetweenItems: typeof VerticalSpacingBetweenItems
+    IconCopy: typeof Copy
+    IconDelete: typeof Delete
+    IconSquare: typeof Square
+    IconRound: typeof Round
   }
 }
 
diff --git a/src/components/CheckboxButtonGroup.vue b/src/components/CheckboxButtonGroup.vue
index cfa06fd2..a57b6642 100644
--- a/src/components/CheckboxButtonGroup.vue
+++ b/src/components/CheckboxButtonGroup.vue
@@ -5,9 +5,11 @@
 </template>
 
 <script lang="ts">
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'checkbox-button-group',
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Contextmenu/types.ts b/src/components/Contextmenu/types.ts
index 2f91e35a..d7cad39d 100644
--- a/src/components/Contextmenu/types.ts
+++ b/src/components/Contextmenu/types.ts
@@ -1,14 +1,14 @@
 export interface ContextmenuItem {
-  text?: string;
-  subText?: string;
-  divider?: boolean;
-  disable?: boolean;
-  hide?: boolean;
-  children?: ContextmenuItem[];
-  handler?: (el: HTMLElement) => void;
+  text?: string
+  subText?: string
+  divider?: boolean
+  disable?: boolean
+  hide?: boolean
+  children?: ContextmenuItem[]
+  handler?: (el: HTMLElement) => void
 }
 
 export interface Axis {
-  x: number;
-  y: number;
+  x: number
+  y: number
 }
\ No newline at end of file
diff --git a/src/components/LaTeXEditor/index.vue b/src/components/LaTeXEditor/index.vue
index 3ef7f746..b4709dac 100644
--- a/src/components/LaTeXEditor/index.vue
+++ b/src/components/LaTeXEditor/index.vue
@@ -74,8 +74,8 @@ import FormulaContent from './FormulaContent.vue'
 import SymbolContent from './SymbolContent.vue'
 
 interface Tab {
-  label: string;
-  value: 'symbol' | 'formula';
+  label: string
+  value: 'symbol' | 'formula'
 }
 
 const tabs: Tab[] = [
diff --git a/src/configs/chartTypes.ts b/src/configs/chartTypes.ts
index 7626110d..eb7e7e31 100644
--- a/src/configs/chartTypes.ts
+++ b/src/configs/chartTypes.ts
@@ -1,7 +1,7 @@
 import { ChartType } from '@/types/slides'
 
 interface ChartTypes {
-  [propName: string]: ChartType;
+  [propName: string]: ChartType
 }
 
 export const CHART_TYPES: ChartTypes = {
diff --git a/src/configs/lines.ts b/src/configs/lines.ts
index 962b76ae..fbcc7f0b 100644
--- a/src/configs/lines.ts
+++ b/src/configs/lines.ts
@@ -2,17 +2,17 @@ import { LinePoint } from '@/types/slides'
 
 
 export interface LinePoolItem {
-  path: string;
-  style: 'solid' | 'dashed';
-  points: [LinePoint, LinePoint];
-  isBroken?: boolean;
-  isCurve?: boolean;
-  isCubic?: boolean;
+  path: string
+  style: 'solid' | 'dashed'
+  points: [LinePoint, LinePoint]
+  isBroken?: boolean
+  isCurve?: boolean
+  isCubic?: boolean
 }
 
 interface PresetLine {
-  type: string;
-  children: LinePoolItem[];
+  type: string
+  children: LinePoolItem[]
 }
 
 export const LINE_LIST: PresetLine[] = [
diff --git a/src/configs/shapes.ts b/src/configs/shapes.ts
index 655cfcaf..fab59606 100644
--- a/src/configs/shapes.ts
+++ b/src/configs/shapes.ts
@@ -1,16 +1,16 @@
 import { ShapePathFormulasKeys } from '@/types/slides'
 
 export interface ShapePoolItem {
-  viewBox: [number, number];
-  path: string;
-  special?: boolean;
-  pathFormula?: ShapePathFormulasKeys;
-  outlined?: boolean;
+  viewBox: [number, number]
+  path: string
+  special?: boolean
+  pathFormula?: ShapePathFormulasKeys
+  outlined?: boolean
 }
 
 interface ShapeListItem {
-  type: string;
-  children: ShapePoolItem[];
+  type: string
+  children: ShapePoolItem[]
 }
 
 export const SHAPE_PATH_FORMULAS = {
diff --git a/src/global.d.ts b/src/global.d.ts
index e37c69f6..98265c07 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,16 +1,16 @@
 interface HTMLElement {
-  webkitRequestFullScreen(options?: FullscreenOptions): Promise<void>;
-  mozRequestFullScreen(options?: FullscreenOptions): Promise<void>;
-  msRequestFullscreen(options?: FullscreenOptions): Promise<void>;
+  webkitRequestFullScreen(options?: FullscreenOptions): Promise<void>
+  mozRequestFullScreen(options?: FullscreenOptions): Promise<void>
+  msRequestFullscreen(options?: FullscreenOptions): Promise<void>
 }
 
 interface Document {
-  webkitFullscreenElement: Element | null;
-  mozFullScreenElement: Element | null;
-  msFullscreenElement: Element | null;
-  webkitCurrentFullScreenElement: Element | null;
+  webkitFullscreenElement: Element | null
+  mozFullScreenElement: Element | null
+  msFullscreenElement: Element | null
+  webkitCurrentFullScreenElement: Element | null
 
-  mozCancelFullScreen(): Promise<void>;
-  webkitExitFullscreen(): Promise<void>;
-  msExitFullscreen(): Promise<void>;
+  mozCancelFullScreen(): Promise<void>
+  webkitExitFullscreen(): Promise<void>
+  msExitFullscreen(): Promise<void>
 }
\ No newline at end of file
diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts
index f4c6f1e8..40e51267 100644
--- a/src/hooks/useCreateElement.ts
+++ b/src/hooks/useCreateElement.ts
@@ -10,17 +10,17 @@ import { CHART_TYPES } from '@/configs/chartTypes'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 interface CommonElementPosition {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
+  top: number
+  left: number
+  width: number
+  height: number
 }
 
 interface LineElementPosition {
-  top: number;
-  left: number;
-  start: [number, number];
-  end: [number, number];
+  top: number
+  left: number
+  start: [number, number]
+  end: [number, number]
 }
 
 export default () => {
diff --git a/src/hooks/useExport.ts b/src/hooks/useExport.ts
index f21c366a..c5088c35 100644
--- a/src/hooks/useExport.ts
+++ b/src/hooks/useExport.ts
@@ -16,9 +16,9 @@ import { message } from 'ant-design-vue'
 import useAddSlidesOrElements from '@/hooks/useAddSlidesOrElements'
 
 interface ExportImageConfig {
-  quality: number;
-  width: number;
-  fontEmbedCSS?: string;
+  quality: number
+  width: number
+  fontEmbedCSS?: string
 }
 
 export default () => {
diff --git a/src/hooks/usePasteTextClipboardData.ts b/src/hooks/usePasteTextClipboardData.ts
index a1606d24..ec37d3e7 100644
--- a/src/hooks/usePasteTextClipboardData.ts
+++ b/src/hooks/usePasteTextClipboardData.ts
@@ -4,8 +4,8 @@ import useCreateElement from '@/hooks/useCreateElement'
 import useAddSlidesOrElements from '@/hooks/useAddSlidesOrElements'
 
 interface PasteTextClipboardDataOptions {
-  onlySlide?: boolean;
-  onlyElements?: boolean;
+  onlySlide?: boolean
+  onlyElements?: boolean
 }
 
 export default () => {
diff --git a/src/hooks/useUniformDisplayElement.ts b/src/hooks/useUniformDisplayElement.ts
index f16634ab..638ba798 100644
--- a/src/hooks/useUniformDisplayElement.ts
+++ b/src/hooks/useUniformDisplayElement.ts
@@ -6,32 +6,32 @@ import { getElementRange, getElementListRange, getRectRotatedOffset } from '@/ut
 import useHistorySnapshot from './useHistorySnapshot'
 
 interface ElementItem {
-  min: number;
-  max: number;
-  el: PPTElement;
+  min: number
+  max: number
+  el: PPTElement
 }
 
 interface GroupItem {
-  groupId: string;
-  els: PPTElement[];
+  groupId: string
+  els: PPTElement[]
 }
 
 interface GroupElementsItem {
-  min: number;
-  max: number;
-  els: PPTElement[];
+  min: number
+  max: number
+  els: PPTElement[]
 }
 
 type Item = ElementItem | GroupElementsItem
 
 interface ElementWithPos {
-  pos: number;
-  el: PPTElement;
+  pos: number
+  el: PPTElement
 }
 
 interface LastPos {
-  min: number;
-  max: number;
+  min: number
+  max: number
 }
 
 export default () => {
diff --git a/src/store/keyboard.ts b/src/store/keyboard.ts
index 795c6589..60d1792b 100644
--- a/src/store/keyboard.ts
+++ b/src/store/keyboard.ts
@@ -1,9 +1,9 @@
 import { defineStore } from 'pinia'
 
 export interface KeyboardState {
-  ctrlKeyState: boolean;
-  shiftKeyState: boolean;
-  spaceKeyState: boolean;
+  ctrlKeyState: boolean
+  shiftKeyState: boolean
+  spaceKeyState: boolean
 }
 
 export const useKeyboardStore = defineStore('keyboard', {
diff --git a/src/store/main.ts b/src/store/main.ts
index ae6a0e40..41dce63b 100644
--- a/src/store/main.ts
+++ b/src/store/main.ts
@@ -10,27 +10,27 @@ import { isSupportFont } from '@/utils/font'
 import { useSlidesStore } from './slides'
 
 export interface MainState {
-  activeElementIdList: string[];
-  handleElementId: string;
-  activeGroupElementId: string;
-  canvasPercentage: number;
-  canvasScale: number;
-  canvasDragged: boolean;
-  thumbnailsFocus: boolean;
-  editorAreaFocus: boolean;
-  disableHotkeys: boolean;
-  showGridLines: boolean;
-  showRuler: boolean;
-  creatingElement: CreatingElement | null;
-  availableFonts: typeof SYS_FONTS;
-  toolbarState: ToolbarStates;
-  clipingImageElementId: string;
-  isScaling: boolean;
-  richTextAttrs: TextAttrs;
-  selectedTableCells: string[];
-  selectedSlidesIndex: number[];
-  dialogForExport: DialogForExportTypes;
-  databaseId: string;
+  activeElementIdList: string[]
+  handleElementId: string
+  activeGroupElementId: string
+  canvasPercentage: number
+  canvasScale: number
+  canvasDragged: boolean
+  thumbnailsFocus: boolean
+  editorAreaFocus: boolean
+  disableHotkeys: boolean
+  showGridLines: boolean
+  showRuler: boolean
+  creatingElement: CreatingElement | null
+  availableFonts: typeof SYS_FONTS
+  toolbarState: ToolbarStates
+  clipingImageElementId: string
+  isScaling: boolean
+  richTextAttrs: TextAttrs
+  selectedTableCells: string[]
+  selectedSlidesIndex: number[]
+  dialogForExport: DialogForExportTypes
+  databaseId: string
 }
 
 const nanoid = customAlphabet('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz')
diff --git a/src/store/screen.ts b/src/store/screen.ts
index c6f054e2..ec997458 100644
--- a/src/store/screen.ts
+++ b/src/store/screen.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 
 export interface ScreenState {
-  screening: boolean;
+  screening: boolean
 }
 
 export const useScreenStore = defineStore('screen', {
diff --git a/src/store/slides.ts b/src/store/slides.ts
index 90234c0b..fed60944 100644
--- a/src/store/slides.ts
+++ b/src/store/slides.ts
@@ -7,25 +7,25 @@ import { theme } from '@/mocks/theme'
 import { layouts } from '@/mocks/layout'
 
 interface RemoveElementPropData {
-  id: string;
-  propName: string | string[];
+  id: string
+  propName: string | string[]
 }
 
 interface UpdateElementData {
-  id: string | string[];
-  props: Partial<PPTElement>;
+  id: string | string[]
+  props: Partial<PPTElement>
 }
 
 interface FormatedAnimation {
-  animations: PPTAnimation[];
-  autoNext: boolean;
+  animations: PPTAnimation[]
+  autoNext: boolean
 }
 
 export interface SlidesState {
-  theme: SlideTheme;
-  slides: Slide[];
-  slideIndex: number;
-  viewportRatio: number;
+  theme: SlideTheme
+  slides: Slide[]
+  slideIndex: number
+  viewportRatio: number
 }
 
 export const useSlidesStore = defineStore('slides', {
diff --git a/src/store/snapshot.ts b/src/store/snapshot.ts
index 0fea0efe..b85faa0b 100644
--- a/src/store/snapshot.ts
+++ b/src/store/snapshot.ts
@@ -6,8 +6,8 @@ import { useSlidesStore } from './slides'
 import { useMainStore } from './main'
 
 export interface ScreenState {
-  snapshotCursor: number;
-  snapshotLength: number;
+  snapshotCursor: number
+  snapshotLength: number
 }
 
 export const useSnapshotStore = defineStore('snapshot', {
diff --git a/src/types/edit.ts b/src/types/edit.ts
index 0e2d625b..9c4b05ef 100644
--- a/src/types/edit.ts
+++ b/src/types/edit.ts
@@ -46,47 +46,47 @@ export const enum OperateLineHandlers {
 }
 
 export interface AlignmentLineAxis {
-  x: number; 
-  y: number;
+  x: number
+  y: number
 }
 
 export interface AlignmentLineProps {
-  type: 'vertical' | 'horizontal';
-  axis: AlignmentLineAxis;
-  length: number;
+  type: 'vertical' | 'horizontal'
+  axis: AlignmentLineAxis
+  length: number
 }
 
 export interface MultiSelectRange {
-  minX: number;
-  maxX: number;
-  minY: number;
-  maxY: number;
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
 }
 
 export interface ImageClipedEmitData {
-  range: ImageClipDataRange;
+  range: ImageClipDataRange
   position: {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-  };
+    left: number
+    top: number
+    width: number
+    height: number
+  }
 }
 
 export interface CreateElementSelectionData {
-  start: [number, number];
-  end: [number, number];
+  start: [number, number]
+  end: [number, number]
 }
 
 export interface CreatingTextElement {
-  type: 'text';
+  type: 'text'
 }
 export interface CreatingShapeElement {
-  type: 'shape';
-  data: ShapePoolItem;
+  type: 'shape'
+  data: ShapePoolItem
 }
 export interface CreatingLineElement {
-  type: 'line';
-  data: LinePoolItem;
+  type: 'line'
+  data: LinePoolItem
 }
 export type CreatingElement = CreatingTextElement | CreatingShapeElement | CreatingLineElement
\ No newline at end of file
diff --git a/src/types/slides.ts b/src/types/slides.ts
index 92110662..7ba20ef4 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -39,10 +39,10 @@ export const enum ElementTypes {
  * color: 阴影颜色
  */
 export interface PPTElementShadow {
-  h: number;
-  v: number;
-  blur: number;
-  color: string;
+  h: number
+  v: number
+  blur: number
+  color: string
 }
 
 /**
@@ -55,9 +55,9 @@ export interface PPTElementShadow {
  * color?: 边框颜色
  */
 export interface PPTElementOutline {
-  style?: 'dashed' | 'solid';
-  width?: number;
-  color?: string;
+  style?: 'dashed' | 'solid'
+  width?: number
+  color?: string
 }
 
 /**
@@ -68,8 +68,8 @@ export interface PPTElementOutline {
  * target: 目标地址（网页链接、幻灯片页面ID）
  */
 export interface PPTElementLink {
-  type: 'web' | 'slide';
-  target: string;
+  type: 'web' | 'slide'
+  target: string
 }
 
 
@@ -95,15 +95,15 @@ export interface PPTElementLink {
  * link?: 超链接
  */
 interface PPTBaseElement {
-  id: string;
-  left: number;
-  top: number;
-  lock?: boolean;
-  groupId?: string;
-  width: number;
-  height: number;
-  rotate: number;
-  link?: PPTElementLink;
+  id: string
+  left: number
+  top: number
+  lock?: boolean
+  groupId?: string
+  width: number
+  height: number
+  rotate: number
+  link?: PPTElementLink
 }
 
 
@@ -135,18 +135,18 @@ interface PPTBaseElement {
  * paragraphSpace?: 段间距，默认 5px
  */
 export interface PPTTextElement extends PPTBaseElement {
-  type: 'text';
-  content: string;
-  defaultFontName: string;
-  defaultColor: string;
-  outline?: PPTElementOutline;
-  fill?: string;
-  lineHeight?: number;
-  wordSpace?: number;
-  opacity?: number;
-  shadow?: PPTElementShadow;
-  textIndent?: number;
-  paragraphSpace?: number;
+  type: 'text'
+  content: string
+  defaultFontName: string
+  defaultColor: string
+  outline?: PPTElementOutline
+  fill?: string
+  lineHeight?: number
+  wordSpace?: number
+  opacity?: number
+  shadow?: PPTElementShadow
+  textIndent?: number
+  paragraphSpace?: number
 }
 
 
@@ -158,8 +158,8 @@ export interface PPTTextElement extends PPTBaseElement {
  * flipV?: 垂直翻转
  */
 export interface ImageOrShapeFlip {
-  flipH?: boolean;
-  flipV?: boolean;
+  flipH?: boolean
+  flipV?: boolean
 }
 
 /**
@@ -182,13 +182,13 @@ export interface ImageOrShapeFlip {
  * 'opacity'?: 不透明度，默认100（%）
  */
 export interface ImageElementFilters {
-  'blur'?: string;
-  'brightness'?: string;
-  'contrast'?: string;
-  'grayscale'?: string;
-  'saturate'?: string;
-  'hue-rotate'?: string;
-  'opacity'?: string;
+  'blur'?: string
+  'brightness'?: string
+  'contrast'?: string
+  'grayscale'?: string
+  'saturate'?: string
+  'hue-rotate'?: string
+  'opacity'?: string
 }
 
 export type ImageClipDataRange = [[number, number], [number, number]]
@@ -201,8 +201,8 @@ export type ImageClipDataRange = [[number, number], [number, number]]
  * shape: 裁剪形状，见 configs/imageClip.ts CLIPPATHS 
  */
 export interface ImageElementClip {
-  range: ImageClipDataRange;
-  shape: string;
+  range: ImageClipDataRange
+  shape: string
 }
 
 /**
@@ -227,15 +227,15 @@ export interface ImageElementClip {
  * shadow?: 阴影
  */
 export interface PPTImageElement extends PPTBaseElement {
-  type: 'image';
-  fixedRatio: boolean;
-  src: string;
-  outline?: PPTElementOutline;
-  filters?: ImageElementFilters;
-  clip?: ImageElementClip;
-  flipH?: boolean;
-  flipV?: boolean;
-  shadow?: PPTElementShadow;
+  type: 'image'
+  fixedRatio: boolean
+  src: string
+  outline?: PPTElementOutline
+  filters?: ImageElementFilters
+  clip?: ImageElementClip
+  flipH?: boolean
+  flipV?: boolean
+  shadow?: PPTElementShadow
 }
 
 
@@ -249,9 +249,9 @@ export interface PPTImageElement extends PPTBaseElement {
  * rotate: 渐变角度（线性渐变）
  */
 export interface ShapeGradient {
-  type: 'linear' | 'radial';
-  color: [string, string];
-  rotate: number;
+  type: 'linear' | 'radial'
+  color: [string, string]
+  rotate: number
 }
 
 /**
@@ -266,10 +266,10 @@ export interface ShapeGradient {
  * align: 文本对齐方向（垂直方向）
  */
 export interface ShapeText {
-  content: string;
-  defaultFontName: string;
-  defaultColor: string;
-  align: 'top' | 'middle' | 'bottom';
+  content: string
+  defaultFontName: string
+  defaultColor: string
+  align: 'top' | 'middle' | 'bottom'
 }
 
 /**
@@ -306,20 +306,20 @@ export interface ShapeText {
  * 但也有一些形状希望能更精确的控制一些关键点的位置，此时就需要提供路径计算公式，通过在缩放时更新 viewBox 并重新计算 path 来重新绘制形状
  */
 export interface PPTShapeElement extends PPTBaseElement {
-  type: 'shape';
-  viewBox: [number, number];
-  path: string;
-  fixedRatio: boolean;
-  fill: string;
-  gradient?: ShapeGradient;
-  outline?: PPTElementOutline;
-  opacity?: number;
-  flipH?: boolean;
-  flipV?: boolean;
-  shadow?: PPTElementShadow;
-  special?: boolean;
-  text?: ShapeText;
-  pathFormula?: ShapePathFormulasKeys;
+  type: 'shape'
+  viewBox: [number, number]
+  path: string
+  fixedRatio: boolean
+  fill: string
+  gradient?: ShapeGradient
+  outline?: PPTElementOutline
+  opacity?: number
+  flipH?: boolean
+  flipV?: boolean
+  shadow?: PPTElementShadow
+  special?: boolean
+  text?: ShapeText
+  pathFormula?: ShapePathFormulasKeys
 }
 
 
@@ -349,16 +349,16 @@ export type LinePoint = '' | 'arrow' | 'dot'
  * curve?: 三次曲线控制点位置（[[x1, y1], [x2, y2]]）
  */
 export interface PPTLineElement extends Omit<PPTBaseElement, 'height' | 'rotate'> {
-  type: 'line';
-  start: [number, number];
-  end: [number, number];
-  style: 'solid' | 'dashed';
-  color: string;
-  points: [LinePoint, LinePoint];
-  shadow?: PPTElementShadow;
-  broken?: [number, number];
-  curve?: [number, number];
-  cubic?: [[number, number], [number, number]];
+  type: 'line'
+  start: [number, number]
+  end: [number, number]
+  style: 'solid' | 'dashed'
+  color: string
+  points: [LinePoint, LinePoint]
+  shadow?: PPTElementShadow
+  broken?: [number, number]
+  curve?: [number, number]
+  cubic?: [[number, number], [number, number]]
 }
 
 
@@ -366,9 +366,9 @@ export type PresetChartType = 'bar' | 'horizontalBar' | 'line' | 'area' | 'scatt
 export type ChartType = 'bar' | 'line' | 'pie'
 export type ChartOptions = ILineChartOptions & IBarChartOptions & IPieChartOptions
 export interface ChartData {
-  labels: string[];
-  legends: string[];
-  series: number[][];
+  labels: string[]
+  legends: string[]
+  series: number[][]
 }
 
 /**
@@ -393,15 +393,15 @@ export interface ChartData {
  * legend?: 图例/位置
  */
 export interface PPTChartElement extends PPTBaseElement {
-  type: 'chart';
-  fill?: string;
-  chartType: ChartType;
-  data: ChartData;
-  options?: ChartOptions;
-  outline?: PPTElementOutline;
-  themeColor: string[];
-  gridColor?: string;
-  legend?: '' | 'top' | 'bottom',
+  type: 'chart'
+  fill?: string
+  chartType: ChartType
+  data: ChartData
+  options?: ChartOptions
+  outline?: PPTElementOutline
+  themeColor: string[]
+  gridColor?: string
+  legend?: '' | 'top' | 'bottom'
 }
 
 
@@ -427,15 +427,15 @@ export interface PPTChartElement extends PPTBaseElement {
  * align?: 对齐方式
  */
 export interface TableCellStyle {
-  bold?: boolean;
-  em?: boolean;
-  underline?: boolean;
-  strikethrough?: boolean;
-  color?: string;
-  backcolor?: string;
-  fontsize?: string;
-  fontname?: string;
-  align?: 'left' | 'center' | 'right';
+  bold?: boolean
+  em?: boolean
+  underline?: boolean
+  strikethrough?: boolean
+  color?: string
+  backcolor?: string
+  fontsize?: string
+  fontname?: string
+  align?: 'left' | 'center' | 'right'
 }
 
 
@@ -453,11 +453,11 @@ export interface TableCellStyle {
  * style?: 单元格样式
  */
 export interface TableCell {
-  id: string;
-  colspan: number;
-  rowspan: number;
-  text: string;
-  style?: TableCellStyle;
+  id: string
+  colspan: number
+  rowspan: number
+  text: string
+  style?: TableCellStyle
 }
 
 /**
@@ -474,11 +474,11 @@ export interface TableCell {
  * colFooter: 最后一列
  */
 export interface TableTheme {
-  color: string;
-  rowHeader: boolean;
-  rowFooter: boolean;
-  colHeader: boolean;
-  colFooter: boolean;
+  color: string
+  rowHeader: boolean
+  rowFooter: boolean
+  colHeader: boolean
+  colFooter: boolean
 }
 
 /**
@@ -495,11 +495,11 @@ export interface TableTheme {
  * data: 表格数据
  */
 export interface PPTTableElement extends PPTBaseElement {
-  type: 'table';
-  outline: PPTElementOutline;
-  theme?: TableTheme;
-  colWidths: number[];
-  data: TableCell[][];
+  type: 'table'
+  outline: PPTElementOutline
+  theme?: TableTheme
+  colWidths: number[]
+  data: TableCell[][]
 }
 
 
@@ -521,13 +521,13 @@ export interface PPTTableElement extends PPTBaseElement {
  * fixedRatio: 固定形状宽高比例
  */
 export interface PPTLatexElement extends PPTBaseElement {
-  type: 'latex';
-  latex: string;
-  path: string;
-  color: string;
-  strokeWidth: number;
-  viewBox: [number, number];
-  fixedRatio: boolean;
+  type: 'latex'
+  latex: string
+  path: string
+  color: string
+  strokeWidth: number
+  viewBox: [number, number]
+  fixedRatio: boolean
 }
 
 /**
@@ -540,9 +540,9 @@ export interface PPTLatexElement extends PPTBaseElement {
  * poster: 预览封面
  */
 export interface PPTVideoElement extends PPTBaseElement {
-  type: 'video';
-  src: string;
-  poster?: string;
+  type: 'video'
+  src: string
+  poster?: string
 }
 
 /**
@@ -561,12 +561,12 @@ export interface PPTVideoElement extends PPTBaseElement {
  * src: 音频地址
  */
 export interface PPTAudioElement extends PPTBaseElement {
-  type: 'audio';
-  fixedRatio: boolean;
+  type: 'audio'
+  fixedRatio: boolean
   color: string,
   loop: boolean,
   autoplay: boolean,
-  src: string;
+  src: string
 }
 
 
@@ -589,12 +589,12 @@ export type PPTElement = PPTTextElement | PPTImageElement | PPTShapeElement | PP
  * trigger: 动画触发方式(click - 单击时、meantime - 与上一动画同时、auto - 上一动画之后)
  */
 export interface PPTAnimation {
-  id: string;
-  elId: string;
-  effect: string;
-  type: 'in' | 'out' | 'attention';
-  duration: number;
-  trigger: 'click' | 'meantime' | 'auto';
+  id: string
+  elId: string
+  effect: string
+  type: 'in' | 'out' | 'attention'
+  duration: number
+  trigger: 'click' | 'meantime' | 'auto'
 }
 
 /**
@@ -615,13 +615,13 @@ export interface PPTAnimation {
  * gradientRotate?: 渐变角度（线性）
  */
 export interface SlideBackground {
-  type: 'solid' | 'image' | 'gradient';
-  color?: string;
-  image?: string;
-  imageSize?: 'cover' | 'contain' | 'repeat';
-  gradientType?: 'linear' | 'radial';
-  gradientColor?: [string, string];
-  gradientRotate?: number;
+  type: 'solid' | 'image' | 'gradient'
+  color?: string
+  image?: string
+  imageSize?: 'cover' | 'contain' | 'repeat'
+  gradientType?: 'linear' | 'radial'
+  gradientColor?: [string, string]
+  gradientRotate?: number
 }
 
 
@@ -643,12 +643,12 @@ export type TurningMode = 'no' | 'fade' | 'slideX' | 'slideY'
  * turningMode?: 翻页方式
  */
 export interface Slide {
-  id: string;
-  elements: PPTElement[];
-  remark?: string;
-  background?: SlideBackground;
-  animations?: PPTAnimation[];
-  turningMode?: TurningMode;
+  id: string
+  elements: PPTElement[]
+  remark?: string
+  background?: SlideBackground
+  animations?: PPTAnimation[]
+  turningMode?: TurningMode
 }
 
 /**
@@ -663,8 +663,8 @@ export interface Slide {
  * fontName: 字体
  */
 export interface SlideTheme {
-  backgroundColor: string;
-  themeColor: string;
-  fontColor: string;
-  fontName: string;
+  backgroundColor: string
+  themeColor: string
+  fontColor: string
+  fontName: string
 }
\ No newline at end of file
diff --git a/src/utils/database.ts b/src/utils/database.ts
index 7354bc52..e5b57b55 100644
--- a/src/utils/database.ts
+++ b/src/utils/database.ts
@@ -4,8 +4,8 @@ import { Slide } from '@/types/slides'
 import { LOCALSTORAGE_KEY_DISCARDED_DB } from '@/configs/storage'
 
 export interface Snapshot {
-  index: number;
-  slides: Slide[];
+  index: number
+  slides: Slide[]
 }
 
 const databaseNamePrefix = 'PPTist'
diff --git a/src/utils/element.ts b/src/utils/element.ts
index f6a9e9b5..f1646f44 100644
--- a/src/utils/element.ts
+++ b/src/utils/element.ts
@@ -3,11 +3,11 @@ import { nanoid } from 'nanoid'
 import { PPTElement, PPTLineElement } from '@/types/slides'
 
 interface RotatedElementData {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-  rotate: number;
+  left: number
+  top: number
+  width: number
+  height: number
+  rotate: number
 }
 
 /**
@@ -127,8 +127,8 @@ export const getElementListRange = (elementList: PPTElement[]) => {
 }
 
 export interface AlignLine {
-  value: number;
-  range: [number, number];
+  value: number
+  range: [number, number]
 }
 
 /**
diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts
index 7403cce2..f2b29091 100644
--- a/src/utils/emitter.ts
+++ b/src/utils/emitter.ts
@@ -7,19 +7,19 @@ export const enum EmitterEvents {
 }
 
 export interface RichTextAction {
-  command: string;
-  value?: string;
+  command: string
+  value?: string
 }
 
 export interface RichTextCommand {
-  target?: string;
-  action: RichTextAction | RichTextAction[];
+  target?: string
+  action: RichTextAction | RichTextAction[]
 }
 
 type Events = {
-  [EmitterEvents.RICH_TEXT_COMMAND]: RichTextCommand;
-  [EmitterEvents.OPEN_CHART_DATA_EDITOR]: void;
-  [EmitterEvents.OPEN_LATEX_EDITOR]: void;
+  [EmitterEvents.RICH_TEXT_COMMAND]: RichTextCommand
+  [EmitterEvents.OPEN_CHART_DATA_EDITOR]: void
+  [EmitterEvents.OPEN_LATEX_EDITOR]: void
 } 
 
 const emitter: Emitter<Events> = mitt<Events>()
diff --git a/src/utils/htmlParser/lexer.ts b/src/utils/htmlParser/lexer.ts
index 78c4a6d3..e142f63d 100644
--- a/src/utils/htmlParser/lexer.ts
+++ b/src/utils/htmlParser/lexer.ts
@@ -3,9 +3,9 @@ import { Token } from './types'
 import { childlessTags } from './tags'
 
 interface State {
-  str: string;
-  position: number;
-  tokens: Token[];
+  str: string
+  position: number
+  tokens: Token[]
 }
 
 const jumpPosition = (state: State, end: number) => {
diff --git a/src/utils/htmlParser/parser.ts b/src/utils/htmlParser/parser.ts
index 6c835627..f0a721f1 100644
--- a/src/utils/htmlParser/parser.ts
+++ b/src/utils/htmlParser/parser.ts
@@ -2,14 +2,14 @@ import { Token, HTMLNode, TagToken, NormalElement, TagEndToken, AttributeToken,
 import { closingTags, closingTagAncestorBreakers, voidTags } from './tags'
 
 interface StackItem {
-  tagName: string | null;
-  children: HTMLNode[];
+  tagName: string | null
+  children: HTMLNode[]
 }
 
 interface State {
-  stack: StackItem[];
-  cursor: number;
-  tokens: Token[];
+  stack: StackItem[]
+  cursor: number
+  tokens: Token[]
 }
 
 export const parser = (tokens: Token[]) => {
diff --git a/src/utils/htmlParser/types.ts b/src/utils/htmlParser/types.ts
index 93f198f7..5cc0b869 100644
--- a/src/utils/htmlParser/types.ts
+++ b/src/utils/htmlParser/types.ts
@@ -1,69 +1,69 @@
 export interface ElementAttribute {
-  key: string;
-  value: string | null;
+  key: string
+  value: string | null
 }
 
 export interface CommentElement {
-  type: 'comment';
-  content: string;
+  type: 'comment'
+  content: string
 }
 
 export interface TextElement {
-  type: 'text';
-  content: string;
+  type: 'text'
+  content: string
 }
 
 export interface NormalElement {
-  type: 'element';
-  tagName: string;
-  children: HTMLNode[];
-  attributes: string[];
+  type: 'element'
+  tagName: string
+  children: HTMLNode[]
+  attributes: string[]
 }
 
 export type HTMLNode = CommentElement | TextElement | NormalElement
 
 export interface ElementAST {
-  type: 'element';
-  tagName: string;
-  children: AST[];
-  attributes: ElementAttribute[];
+  type: 'element'
+  tagName: string
+  children: AST[]
+  attributes: ElementAttribute[]
 }
 
 export interface CommentOrTextAST {
-  type: 'comment' | 'text';
-  content: string;
+  type: 'comment' | 'text'
+  content: string
 }
 
 export type AST = CommentOrTextAST | ElementAST
 
 export interface TagStartToken {
-  type: 'tag-start';
-  close: boolean;
+  type: 'tag-start'
+  close: boolean
 }
 
 export interface TagEndToken {
-  type: 'tag-end';
-  close: boolean;
+  type: 'tag-end'
+  close: boolean
 }
 
 export interface TagToken {
-  type: 'tag';
-  content: string;
+  type: 'tag'
+  content: string
 }
 
 export interface TextToken {
-  type: 'text';
-  content: string;
+  type: 'text'
+  content: string
 }
 
 export interface CommentToken {
-  type: 'comment';
-  content: string;
+  type: 'comment'
+  content: string
 }
 
 export interface AttributeToken {
-  type: 'attribute';
-  content: string;
+  type: 'attribute'
+  content: string
 }
 
 export type Token = TagStartToken | TagEndToken | TagToken | TextToken | CommentToken | AttributeToken
diff --git a/src/utils/image.ts b/src/utils/image.ts
index ac7881b4..08ca2268 100644
--- a/src/utils/image.ts
+++ b/src/utils/image.ts
@@ -1,6 +1,6 @@
 interface ImageSize {
-  width: number;
-  height: number;
+  width: number
+  height: number
 }
 
 /**
diff --git a/src/utils/print.ts b/src/utils/print.ts
index 1988a93d..3a58357d 100644
--- a/src/utils/print.ts
+++ b/src/utils/print.ts
@@ -1,7 +1,7 @@
 interface PageSize {
-  width: number;
-  height: number;
-  margin: number;
+  width: number
+  height: number
+  margin: number
 }
 
 const createIframe = () => {
diff --git a/src/utils/prosemirror/commands/setTextAlign.ts b/src/utils/prosemirror/commands/setTextAlign.ts
index 025084ae..049864f5 100644
--- a/src/utils/prosemirror/commands/setTextAlign.ts
+++ b/src/utils/prosemirror/commands/setTextAlign.ts
@@ -14,9 +14,9 @@ export const setTextAlign = (tr: Transaction, schema: Schema, alignment: string)
   const paragraph = nodes.paragraph
 
   interface Task {
-    node: Node;
-    pos: number;
-    nodeType: NodeType;
+    node: Node
+    pos: number
+    nodeType: NodeType
   }
 
   const tasks: Task[] = []
diff --git a/src/utils/prosemirror/utils.ts b/src/utils/prosemirror/utils.ts
index 300a7e94..e8a6d1f6 100644
--- a/src/utils/prosemirror/utils.ts
+++ b/src/utils/prosemirror/utils.ts
@@ -160,11 +160,11 @@ export const getAttrValueInSelection = (view: EditorView, attr: string) => {
 }
 
 interface DefaultAttrs {
-  color?: string;
-  backcolor?: string;
-  fontsize?: string;
-  fontname?: string;
-  align?: string;
+  color?: string
+  backcolor?: string
+  fontsize?: string
+  fontname?: string
+  align?: string
 }
 const _defaultAttrs: DefaultAttrs = {
   color: '#000',
diff --git a/src/views/Editor/Canvas/LinkDialog.vue b/src/views/Editor/Canvas/LinkDialog.vue
index 3082ea4d..cae07d37 100644
--- a/src/views/Editor/Canvas/LinkDialog.vue
+++ b/src/views/Editor/Canvas/LinkDialog.vue
@@ -48,8 +48,8 @@ import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
 type TypeKey = 'web' | 'slide'
 interface TabItem {
-  key: TypeKey;
-  label: string;
+  key: TypeKey
+  label: string
 }
 
 export default defineComponent({
diff --git a/src/views/Editor/Canvas/Ruler.vue b/src/views/Editor/Canvas/Ruler.vue
index 00f994ae..ceb1bc6d 100644
--- a/src/views/Editor/Canvas/Ruler.vue
+++ b/src/views/Editor/Canvas/Ruler.vue
@@ -42,10 +42,10 @@ import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 
 interface ViewportStyles {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
+  top: number
+  left: number
+  width: number
+  height: number
 }
 
 export default defineComponent({
diff --git a/src/views/Editor/Canvas/hooks/useDragLineElement.ts b/src/views/Editor/Canvas/hooks/useDragLineElement.ts
index 1be14033..26504436 100644
--- a/src/views/Editor/Canvas/hooks/useDragLineElement.ts
+++ b/src/views/Editor/Canvas/hooks/useDragLineElement.ts
@@ -6,8 +6,8 @@ import { OperateLineHandlers } from '@/types/edit'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 interface AdsorptionPoint {
-  x: number;
-  y: number;
+  x: number
+  y: number
 }
 
 export default (elementList: Ref<PPTElement[]>) => {
diff --git a/src/views/Editor/Canvas/hooks/useScaleElement.ts b/src/views/Editor/Canvas/hooks/useScaleElement.ts
index 398b56e4..0ca38f24 100644
--- a/src/views/Editor/Canvas/hooks/useScaleElement.ts
+++ b/src/views/Editor/Canvas/hooks/useScaleElement.ts
@@ -10,10 +10,10 @@ import { AlignLine, uniqAlignLines } from '@/utils/element'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 interface RotateElementData {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
+  left: number
+  top: number
+  width: number
+  height: number
 }
 
 /**
diff --git a/src/views/Editor/CanvasTool/MediaInput.vue b/src/views/Editor/CanvasTool/MediaInput.vue
index 3d2b27e6..95cc5b48 100644
--- a/src/views/Editor/CanvasTool/MediaInput.vue
+++ b/src/views/Editor/CanvasTool/MediaInput.vue
@@ -34,8 +34,8 @@ import { message } from 'ant-design-vue'
 
 type TypeKey = 'video' | 'audio'
 interface TabItem {
-  key: TypeKey;
-  label: string;
+  key: TypeKey
+  label: string
 }
 
 export default defineComponent({
diff --git a/src/views/Editor/ExportDialog/index.vue b/src/views/Editor/ExportDialog/index.vue
index 4d0c9aea..ac54da17 100644
--- a/src/views/Editor/ExportDialog/index.vue
+++ b/src/views/Editor/ExportDialog/index.vue
@@ -28,8 +28,8 @@ import ExportPPTX from './ExportPPTX.vue'
 import ExportSpecificFile from './ExportSpecificFile.vue'
 
 interface TabItem {
-  key: DialogForExportTypes;
-  label: string;
+  key: DialogForExportTypes
+  label: string
 }
 
 export default defineComponent({
diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index 1e61b176..a3fde63e 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -151,8 +151,8 @@ for (const effect of ATTENTION_ANIMATIONS) {
 
 type AnimationType = 'in' | 'out' | 'attention'
 interface TabItem {
-  key: AnimationType;
-  label: string;
+  key: AnimationType
+  label: string
 }
 
 const animationTypes: AnimationType[] = ['in', 'out', 'attention']
diff --git a/src/views/Editor/Toolbar/SlideAnimationPanel.vue b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
index 0afa3a75..a77b76a0 100644
--- a/src/views/Editor/Toolbar/SlideAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
@@ -24,8 +24,8 @@ import { TurningMode } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 interface Animations {
-  label: string;
-  value: TurningMode;
+  label: string
+  value: TurningMode
 }
 
 export default defineComponent({
diff --git a/src/views/Editor/Toolbar/common/ElementFilter.vue b/src/views/Editor/Toolbar/common/ElementFilter.vue
index dc7155ea..2ac76352 100644
--- a/src/views/Editor/Toolbar/common/ElementFilter.vue
+++ b/src/views/Editor/Toolbar/common/ElementFilter.vue
@@ -33,13 +33,13 @@ import { PPTImageElement } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 interface FilterOption {
-  label: string;
-  key: string;
-  default: number;
-  value: number;
-  unit: string;
-  max: number;
-  step: number;
+  label: string
+  key: string
+  default: number
+  value: number
+  unit: string
+  max: number
+  step: number
 }
 
 const defaultFilters: FilterOption[] = [
diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue
index 416dcafc..f53cc1f0 100644
--- a/src/views/Editor/Toolbar/index.vue
+++ b/src/views/Editor/Toolbar/index.vue
@@ -30,8 +30,8 @@ import MultiPositionPanel from './MultiPositionPanel.vue'
 import SymbolPanel from './SymbolPanel.vue'
 
 interface ElementTabs {
-  label: string;
-  value: ToolbarStates;
+  label: string
+  value: ToolbarStates
 }
 
 export default defineComponent({
diff --git a/src/views/Mobile/MobileEditor/ElementToolbar.vue b/src/views/Mobile/MobileEditor/ElementToolbar.vue
index 175650fd..c1049160 100644
--- a/src/views/Mobile/MobileEditor/ElementToolbar.vue
+++ b/src/views/Mobile/MobileEditor/ElementToolbar.vue
@@ -133,8 +133,8 @@ import useAddSlidesOrElements from '@/hooks/useAddSlidesOrElements'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 interface TabItem {
-  key: 'style' | 'common';
-  label: string;
+  key: 'style' | 'common'
+  label: string
 }
 
 const colors = ['#000000', '#ffffff', '#eeece1', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c', '#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57']
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index da702021..4770cadd 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/src/views/Screen/WritingBoardTool.vue
@@ -48,18 +48,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue'
+import { defineComponent, PropType, ref, StyleValue } from 'vue'
 import WritingBoard from '@/components/WritingBoard.vue'
 
 const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c', '#ffff3a']
 
-interface Position {
-  left?: number | string;
-  right?: number | string;
-  top?: number | string;
-  bottom?: number | string;
-}
-
 type WritingBoardModel = 'pen' | 'mark' | 'eraser'
 
 export default defineComponent({
@@ -78,7 +71,7 @@ export default defineComponent({
       required: true,
     },
     position: {
-      type: Object as PropType<Position>,
+      type: Object as PropType<StyleValue>,
       default: () => ({
         right: '5px',
         bottom: '5px',