From 659d5f7221fffb5d3e6dd10a5fc53a8b7a38e806 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 6 Nov 2022 11:11:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=86=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=94=B9=E4=B8=BA=E7=BB=84=E4=BB=B6=E5=86=85?=
 =?UTF-8?q?=E5=BC=95=E7=94=A8=EF=BC=88Volar=E7=BB=8F=E5=B8=B8=E8=8E=AB?=
 =?UTF-8?q?=E5=90=8D=E5=85=B6=E5=A6=99=E6=97=A0=E6=B3=95=E8=AF=86=E5=88=AB?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E7=BB=84=E4=BB=B6=E7=B1=BB=E5=9E=8B=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                           | 45 +-----------------
 src/components/FullscreenSpin.vue             |  4 +-
 src/components/LaTeXEditor/index.vue          |  7 ++-
 src/main.ts                                   | 46 -------------------
 src/plugins/component.ts                      | 25 ----------
 src/views/Editor/Canvas/LinkDialog.vue        |  6 +++
 .../Editor/Canvas/Operate/LinkHandler.vue     |  2 +
 src/views/Editor/Canvas/index.vue             |  1 +
 src/views/Editor/CanvasTool/MediaInput.vue    |  6 ++-
 .../Editor/CanvasTool/TableGenerator.vue      |  6 ++-
 src/views/Editor/CanvasTool/index.vue         |  6 +++
 src/views/Editor/EditorHeader/index.vue       |  8 ++++
 src/views/Editor/ExportDialog/ExportImage.vue |  9 ++++
 src/views/Editor/ExportDialog/ExportJSON.vue  |  2 +
 src/views/Editor/ExportDialog/ExportPDF.vue   |  8 ++++
 src/views/Editor/ExportDialog/ExportPPTX.vue  |  9 ++++
 .../ExportDialog/ExportSpecificFile.vue       |  7 +++
 src/views/Editor/SelectPanel.vue              |  3 ++
 src/views/Editor/Thumbnails/index.vue         |  1 +
 .../Editor/Toolbar/ElementAnimationPanel.vue  |  9 ++++
 .../Editor/Toolbar/ElementPositionPanel.vue   |  8 ++++
 .../ElementStylePanel/AudioStylePanel.vue     |  2 +
 .../ChartStylePanel/ChartDataEditor.vue       |  2 +
 .../ChartStylePanel/index.vue                 | 12 +++++
 .../ElementStylePanel/ImageStylePanel.vue     |  7 +++
 .../ElementStylePanel/LatexStylePanel.vue     |  8 ++++
 .../ElementStylePanel/LineStylePanel.vue      |  8 ++++
 .../ElementStylePanel/MultiStylePanel.vue     | 15 ++++++
 .../ElementStylePanel/ShapeStylePanel.vue     | 17 +++++++
 .../ElementStylePanel/TableStylePanel.vue     | 18 ++++++++
 .../ElementStylePanel/TextStylePanel.vue      | 19 +++++++-
 .../ElementStylePanel/VideoStylePanel.vue     |  3 ++
 .../Editor/Toolbar/MultiPositionPanel.vue     |  7 +++
 .../Editor/Toolbar/SlideAnimationPanel.vue    |  2 +
 src/views/Editor/Toolbar/SlideDesignPanel.vue | 12 ++++-
 .../Editor/Toolbar/common/ColorButton.vue     |  2 +
 .../Toolbar/common/ElementColorMask.vue       |  6 +++
 .../Editor/Toolbar/common/ElementFilter.vue   |  2 +
 .../Editor/Toolbar/common/ElementFlip.vue     |  3 ++
 .../Editor/Toolbar/common/ElementOpacity.vue  |  2 +
 .../Editor/Toolbar/common/ElementOutline.vue  |  8 ++++
 .../Editor/Toolbar/common/ElementShadow.vue   |  6 +++
 .../Editor/Toolbar/common/TextColorButton.vue |  2 +
 src/views/Editor/index.vue                    |  1 +
 .../Mobile/MobileEditor/ElementToolbar.vue    | 10 ++++
 .../Mobile/MobileEditor/SlideToolbar.vue      |  3 ++
 src/views/Mobile/MobilePreview.vue            |  3 +-
 src/views/Screen/BaseView.vue                 |  1 +
 src/views/Screen/CountdownTimer.vue           |  2 +
 src/views/Screen/PresenterView.vue            |  1 +
 src/views/Screen/WritingBoardTool.vue         |  7 +++
 51 files changed, 286 insertions(+), 123 deletions(-)
 delete mode 100644 src/plugins/component.ts

diff --git a/src/components.d.ts b/src/components.d.ts
index 3a587216..549a0f69 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -1,50 +1,7 @@
 import { icons } from '@/plugins/icon'
-import { components } from '@/plugins/component'
-
-import FileInput from '@/components/FileInput.vue'
-import CheckboxButton from '@/components/CheckboxButton.vue'
-import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
-import ColorPicker from '@/components/ColorPicker/index.vue'
-import FullscreenSpin from '@/components/FullscreenSpin.vue'
-import MoveablePanel from '@/components/MoveablePanel.vue'
-
-type Icon = typeof icons
 
 declare module 'vue' {
-  export interface GlobalComponents extends Icon {
-    FileInput: typeof FileInput
-    CheckboxButton: typeof CheckboxButton
-    CheckboxButtonGroup: typeof CheckboxButtonGroup
-    ColorPicker: typeof ColorPicker
-    FullscreenSpin: typeof FullscreenSpin
-    MoveablePanel: typeof MoveablePanel
-
-    // 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']
-  }
+  export type GlobalComponents = typeof icons
 }
 
 export {}
\ No newline at end of file
diff --git a/src/components/FullscreenSpin.vue b/src/components/FullscreenSpin.vue
index a9fcdeda..4293e741 100644
--- a/src/components/FullscreenSpin.vue
+++ b/src/components/FullscreenSpin.vue
@@ -3,7 +3,9 @@
 </template>
 
 <script lang="ts" setup>
-const props = defineProps({
+import { Spin } from 'ant-design-vue'
+
+defineProps({
   loading: {
     type: Boolean,
     default: false,
diff --git a/src/components/LaTeXEditor/index.vue b/src/components/LaTeXEditor/index.vue
index a759a6d1..6c25f4ff 100644
--- a/src/components/LaTeXEditor/index.vue
+++ b/src/components/LaTeXEditor/index.vue
@@ -73,7 +73,12 @@ import { FORMULA_LIST, SYMBOL_LIST } from '@/configs/latex'
 import FormulaContent from './FormulaContent.vue'
 import SymbolContent from './SymbolContent.vue'
 
-import { message } from 'ant-design-vue'
+import {
+  Button,
+  Input,
+  message,
+} from 'ant-design-vue'
+const TextArea = Input.TextArea
 
 interface Tab {
   label: string
diff --git a/src/main.ts b/src/main.ts
index 70e33c9c..87b408c6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -13,57 +13,11 @@ import '@/assets/styles/antd.scss'
 import '@/assets/styles/font.scss'
 
 import Icon from '@/plugins/icon'
-import Component from '@/plugins/component'
 import Directive from '@/plugins/directive'
 
-import {
-  InputNumber,
-  Divider,
-  Button,
-  Tooltip,
-  Popover,
-  Slider,
-  Select,
-  Switch,
-  Radio,
-  Input,
-  Modal,
-  Dropdown,
-  Menu,
-  Checkbox,
-  Drawer,
-  Spin,
-} from 'ant-design-vue'
-
 const app = createApp(App)
 
-app.component('InputNumber', InputNumber)
-app.component('Divider', Divider)
-app.component('Button', Button)
-app.component('ButtonGroup', Button.Group)
-app.component('Tooltip', Tooltip)
-app.component('Popover', Popover)
-app.component('Slider', Slider)
-app.component('Select', Select)
-app.component('SelectOption', Select.Option)
-app.component('SelectOptGroup', Select.OptGroup)
-app.component('Switch', Switch)
-app.component('Radio', Radio)
-app.component('RadioGroup', Radio.Group)
-app.component('RadioButton', Radio.Button)
-app.component('Input', Input)
-app.component('InputGroup', Input.Group)
-app.component('TextArea', Input.TextArea)
-app.component('Modal', Modal)
-app.component('Dropdown', Dropdown)
-app.component('Menu', Menu)
-app.component('MenuItem', Menu.Item)
-app.component('Checkbox', Checkbox)
-app.component('Drawer', Drawer)
-app.component('Spin', Spin)
-
 app.use(Icon)
-app.use(Component)
 app.use(Directive)
 
 app.use(createPinia())
diff --git a/src/plugins/component.ts b/src/plugins/component.ts
deleted file mode 100644
index cd71bded..00000000
--- a/src/plugins/component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { App } from 'vue'
-
-import FileInput from '@/components/FileInput.vue'
-import CheckboxButton from '@/components/CheckboxButton.vue'
-import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
-import ColorPicker from '@/components/ColorPicker/index.vue'
-import FullscreenSpin from '@/components/FullscreenSpin.vue'
-import MoveablePanel from '@/components/MoveablePanel.vue'
-
-const components = {
-  FileInput,
-  CheckboxButton,
-  CheckboxButtonGroup,
-  ColorPicker,
-  FullscreenSpin,
-  MoveablePanel,
-}
-
-export default {
-  install(app: App) {
-    for (const key of Object.keys(components)) {
-      app.component(key, components[key])
-    }
-  }
-}
diff --git a/src/views/Editor/Canvas/LinkDialog.vue b/src/views/Editor/Canvas/LinkDialog.vue
index 95241662..4050fd8a 100644
--- a/src/views/Editor/Canvas/LinkDialog.vue
+++ b/src/views/Editor/Canvas/LinkDialog.vue
@@ -50,6 +50,12 @@ import { PPTElementLink } from '@/types/slides'
 import useLink from '@/hooks/useLink'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
+import {
+  Button,
+  Select,
+  Input,
+} from 'ant-design-vue'
+const SelectOption = Select.Option
 
 type TypeKey = 'web' | 'slide'
 interface TabItem {
diff --git a/src/views/Editor/Canvas/Operate/LinkHandler.vue b/src/views/Editor/Canvas/Operate/LinkHandler.vue
index 448d1d89..cfde85e1 100644
--- a/src/views/Editor/Canvas/Operate/LinkHandler.vue
+++ b/src/views/Editor/Canvas/Operate/LinkHandler.vue
@@ -17,6 +17,8 @@ import { useMainStore, useSlidesStore } from '@/store'
 import { PPTElement, PPTElementLink } from '@/types/slides'
 import useLink from '@/hooks/useLink'
 
+import { Divider } from 'ant-design-vue'
+
 const props = defineProps({
   elementInfo: {
     type: Object as PropType<PPTElement>,
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index bcd54d07..be946764 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -133,6 +133,7 @@ import ElementCreateSelection from './ElementCreateSelection.vue'
 import MultiSelectOperate from './Operate/MultiSelectOperate.vue'
 import Operate from './Operate/index.vue'
 import LinkDialog from './LinkDialog.vue'
+import { Modal } from 'ant-design-vue'
 
 const mainStore = useMainStore()
 const {
diff --git a/src/views/Editor/CanvasTool/MediaInput.vue b/src/views/Editor/CanvasTool/MediaInput.vue
index c83e8120..8386d601 100644
--- a/src/views/Editor/CanvasTool/MediaInput.vue
+++ b/src/views/Editor/CanvasTool/MediaInput.vue
@@ -30,7 +30,11 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { message } from 'ant-design-vue'
+import {
+  Button,
+  Input,
+  message,
+} from 'ant-design-vue'
 
 type TypeKey = 'video' | 'audio'
 interface TabItem {
diff --git a/src/views/Editor/CanvasTool/TableGenerator.vue b/src/views/Editor/CanvasTool/TableGenerator.vue
index 576ac91d..64fc10ba 100644
--- a/src/views/Editor/CanvasTool/TableGenerator.vue
+++ b/src/views/Editor/CanvasTool/TableGenerator.vue
@@ -53,7 +53,11 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { message } from 'ant-design-vue'
+import {
+  InputNumber,
+  Button,
+  message,
+} from 'ant-design-vue'
 
 interface InsertData {
   row: number
diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue
index 97d140ad..3cf38095 100644
--- a/src/views/Editor/CanvasTool/index.vue
+++ b/src/views/Editor/CanvasTool/index.vue
@@ -133,6 +133,12 @@ import ChartPool from './ChartPool.vue'
 import TableGenerator from './TableGenerator.vue'
 import MediaInput from './MediaInput.vue'
 import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
+import FileInput from '@/components/FileInput.vue'
+import {
+  Tooltip,
+  Popover,
+  Modal,
+} from 'ant-design-vue'
 
 const mainStore = useMainStore()
 const { creatingElement } = storeToRefs(mainStore)
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index 4d360aa6..d5f13e8d 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@@ -90,6 +90,14 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import useExport from '@/hooks/useExport'
 
 import HotkeyDoc from './HotkeyDoc.vue'
+import FileInput from '@/components/FileInput.vue'
+import {
+  Tooltip,
+  Dropdown,
+  Menu,
+  Drawer,
+} from 'ant-design-vue'
+const MenuItem = Menu.Item
 
 const mainStore = useMainStore()
 const { gridLineSize, showRuler, showSelectPanel } = storeToRefs(mainStore)
diff --git a/src/views/Editor/ExportDialog/ExportImage.vue b/src/views/Editor/ExportDialog/ExportImage.vue
index fcd41755..23500e8e 100644
--- a/src/views/Editor/ExportDialog/ExportImage.vue
+++ b/src/views/Editor/ExportDialog/ExportImage.vue
@@ -82,6 +82,15 @@ import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
+import FullscreenSpin from '@/components/FullscreenSpin.vue'
+import {
+  Button,
+  Tooltip,
+  Slider,
+  Switch,
+  Radio,
+} from 'ant-design-vue'
+const { Group: RadioGroup, Button: RadioButton } = Radio
 
 const emit = defineEmits<{
   (event: 'close'): void
diff --git a/src/views/Editor/ExportDialog/ExportJSON.vue b/src/views/Editor/ExportDialog/ExportJSON.vue
index 91af452c..39fdef34 100644
--- a/src/views/Editor/ExportDialog/ExportJSON.vue
+++ b/src/views/Editor/ExportDialog/ExportJSON.vue
@@ -16,6 +16,8 @@ import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
+import { Button } from 'ant-design-vue'
+
 const emit = defineEmits<{
   (event: 'close'): void
 }>()
diff --git a/src/views/Editor/ExportDialog/ExportPDF.vue b/src/views/Editor/ExportDialog/ExportPDF.vue
index adf511ae..4eddab70 100644
--- a/src/views/Editor/ExportDialog/ExportPDF.vue
+++ b/src/views/Editor/ExportDialog/ExportPDF.vue
@@ -67,6 +67,14 @@ import { useSlidesStore } from '@/store'
 import { print } from '@/utils/print'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
+import {
+  Button,
+  Select,
+  Switch,
+  Radio,
+} from 'ant-design-vue'
+const { Group: RadioGroup, Button: RadioButton } = Radio
+const SelectOption = Select.Option
 
 const emit = defineEmits<{
   (event: 'close'): void
diff --git a/src/views/Editor/ExportDialog/ExportPPTX.vue b/src/views/Editor/ExportDialog/ExportPPTX.vue
index 76414fff..bd7b3cc1 100644
--- a/src/views/Editor/ExportDialog/ExportPPTX.vue
+++ b/src/views/Editor/ExportDialog/ExportPPTX.vue
@@ -45,6 +45,15 @@ import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
+import FullscreenSpin from '@/components/FullscreenSpin.vue'
+import {
+  Button,
+  Slider,
+  Switch,
+  Radio,
+} from 'ant-design-vue'
+const { Group: RadioGroup, Button: RadioButton } = Radio
+
 const emit = defineEmits<{
   (event: 'close'): void
 }>()
diff --git a/src/views/Editor/ExportDialog/ExportSpecificFile.vue b/src/views/Editor/ExportDialog/ExportSpecificFile.vue
index bfad54e0..823cd75d 100644
--- a/src/views/Editor/ExportDialog/ExportSpecificFile.vue
+++ b/src/views/Editor/ExportDialog/ExportSpecificFile.vue
@@ -40,6 +40,13 @@ import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useExport from '@/hooks/useExport'
 
+import {
+  Button,
+  Slider,
+  Radio,
+} from 'ant-design-vue'
+const { Group: RadioGroup, Button: RadioButton } = Radio
+
 const emit = defineEmits<{
   (event: 'close'): void
 }>()
diff --git a/src/views/Editor/SelectPanel.vue b/src/views/Editor/SelectPanel.vue
index 380e57e4..752203e9 100644
--- a/src/views/Editor/SelectPanel.vue
+++ b/src/views/Editor/SelectPanel.vue
@@ -85,6 +85,9 @@ import { ELEMENT_TYPE_ZH } from '@/configs/element'
 import useOrderElement from '@/hooks/useOrderElement'
 import { ElementOrderCommands } from '@/types/edit'
 
+import MoveablePanel from '@/components/MoveablePanel.vue'
+import { Button, Input } from 'ant-design-vue'
+
 const slidesStore = useSlidesStore()
 const mainStore = useMainStore()
 const { currentSlide } = storeToRefs(slidesStore)
diff --git a/src/views/Editor/Thumbnails/index.vue b/src/views/Editor/Thumbnails/index.vue
index e8467071..1d43514b 100644
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@@ -58,6 +58,7 @@ import useLoadSlides from '@/hooks/useLoadSlides'
 import Draggable from 'vuedraggable'
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import LayoutPool from './LayoutPool.vue'
+import { Popover } from 'ant-design-vue'
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index bcca288c..a5473b1f 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -131,6 +131,15 @@ import { ELEMENT_TYPE_ZH } from '@/configs/element'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import Draggable from 'vuedraggable'
+import {
+  InputNumber,
+  Divider,
+  Button,
+  Tooltip,
+  Popover,
+  Select,
+} from 'ant-design-vue'
+const SelectOption = Select.Option
 
 const animationEffects: { [key: string]: string } = {}
 for (const effect of ENTER_ANIMATIONS) {
diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index 48a69590..9e760b2a 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue
@@ -123,6 +123,14 @@ import useOrderElement from '@/hooks/useOrderElement'
 import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
+import {
+  InputNumber,
+  Divider,
+  Button,
+  Tooltip,
+} from 'ant-design-vue'
+const ButtonGroup = Button.Group
+
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId } = storeToRefs(useMainStore())
 
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
index 6b780e9a..a63f0876 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/AudioStylePanel.vue
@@ -43,6 +43,8 @@ import { PPTAudioElement } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from '../common/ColorButton.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import { Popover, Switch } from 'ant-design-vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
index cb38e80a..928d44e0 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
@@ -60,6 +60,8 @@ import { ChartData } from '@/types/slides'
 import { KEYS } from '@/configs/hotkey'
 import { pasteCustomClipboardString, pasteExcelClipboardString } from '@/utils/clipboard'
 
+import { Button, Input } from 'ant-design-vue'
+
 const props = defineProps({
   data: {
     type: Object as PropType<ChartData>,
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index 00dc9157..1b00ae95 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -162,6 +162,18 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ElementOutline from '../../common/ElementOutline.vue'
 import ColorButton from '../../common/ColorButton.vue'
 import ChartDataEditor from './ChartDataEditor.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import {
+  Divider,
+  Button,
+  Tooltip,
+  Popover,
+  Select,
+  Modal,
+  Checkbox,
+} from 'ant-design-vue'
+const ButtonGroup = Button.Group
+const SelectOption = Select.Option
 
 const presetChartThemes = [
   ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d'],
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
index 423ee8ed..90ad364a 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
@@ -73,6 +73,13 @@ import ElementShadow from '../common/ElementShadow.vue'
 import ElementFlip from '../common/ElementFlip.vue'
 import ElementFilter from '../common/ElementFilter.vue'
 import ElementColorMask from '../common/ElementColorMask.vue'
+import FileInput from '@/components/FileInput.vue'
+import {
+  Divider,
+  Button,
+  Popover,
+} from 'ant-design-vue'
+const ButtonGroup = Button.Group
 
 const shapeClipPathOptions = CLIPPATHS
 const ratioClipOptions = [
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
index 26df4d85..c1b63e7a 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
@@ -53,6 +53,14 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from '../common/ColorButton.vue'
 import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import {
+  InputNumber,
+  Divider,
+  Button,
+  Popover,
+  Modal,
+} from 'ant-design-vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
index 1c4f5115..f45ccc00 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue
@@ -71,6 +71,14 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ElementShadow from '../common/ElementShadow.vue'
 import ColorButton from '../common/ColorButton.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import {
+  InputNumber,
+  Divider,
+  Popover,
+  Select,
+} from 'ant-design-vue'
+const SelectOption = Select.Option
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
index fc16425f..906bbff3 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
@@ -150,6 +150,21 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from '../common/ColorButton.vue'
 import TextColorButton from '../common/TextColorButton.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import {
+  InputNumber,
+  Divider,
+  Button,
+  Tooltip,
+  Popover,
+  Select,
+  Radio,
+  Input,
+} from 'ant-design-vue'
+const { Button: RadioButton, Group: RadioGroup } = Radio
+const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
+const InputGroup = Input.Group
+const ButtonGroup = Button.Group
 
 const slidesStore = useSlidesStore()
 const { richTextAttrs, availableFonts, activeElementList } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index 91451f87..b6f0bba0 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
@@ -255,6 +255,23 @@ import ElementShadow from '../common/ElementShadow.vue'
 import ElementFlip from '../common/ElementFlip.vue'
 import ColorButton from '../common/ColorButton.vue'
 import TextColorButton from '../common/TextColorButton.vue'
+import CheckboxButton from '@/components/CheckboxButton.vue'
+import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import {
+  Divider,
+  Button,
+  Tooltip,
+  Popover,
+  Slider,
+  Select,
+  Radio,
+  Input,
+} from 'ant-design-vue'
+const { Group: RadioGroup, Button: RadioButton } = Radio
+const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
+const InputGroup = Input.Group
+const ButtonGroup = Button.Group
 
 const mainStore = useMainStore()
 const slidesStore = useSlidesStore()
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
index fc662841..edf079d3 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@@ -195,6 +195,24 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ElementOutline from '../common/ElementOutline.vue'
 import ColorButton from '../common/ColorButton.vue'
 import TextColorButton from '../common/TextColorButton.vue'
+import CheckboxButton from '@/components/CheckboxButton.vue'
+import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import {
+  Divider,
+  Button,
+  Tooltip,
+  Popover,
+  Select,
+  Switch,
+  Checkbox,
+  Radio,
+  Input,
+} from 'ant-design-vue'
+const { Group: RadioGroup, Button: RadioButton } = Radio
+const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
+const InputGroup = Input.Group
+const ButtonGroup = Button.Group
 
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId, selectedTableCells: selectedCells, availableFonts } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index 36b3dc1b..f8eabe22 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -323,13 +323,28 @@ import { WEB_FONTS } from '@/configs/font'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import useTextFormatPainter from '@/hooks/useTextFormatPainter'
 
-import { message } from 'ant-design-vue'
-
 import ElementOpacity from '../common/ElementOpacity.vue'
 import ElementOutline from '../common/ElementOutline.vue'
 import ElementShadow from '../common/ElementShadow.vue'
 import ColorButton from '../common/ColorButton.vue'
 import TextColorButton from '../common/TextColorButton.vue'
+import CheckboxButton from '@/components/CheckboxButton.vue'
+import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import {
+  Divider,
+  Button,
+  Tooltip,
+  Popover,
+  Select,
+  Radio,
+  Input,
+  message,
+} from 'ant-design-vue'
+const { Group: RadioGroup, Button: RadioButton } = Radio
+const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
+const InputGroup = Input.Group
+const ButtonGroup = Button.Group
 
 // 注意，存在一个未知原因的BUG，如果文本加粗后文本框高度增加，画布的可视区域定位会出现错误
 // 因此在执行预置样式命令时，将加粗命令放在尽可能靠前的位置，避免字号增大后再加粗
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
index 8fc9b935..44562a7a 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/VideoStylePanel.vue
@@ -22,6 +22,9 @@ import { PPTVideoElement } from '@/types/slides'
 import { getImageDataURL } from '@/utils/image'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
+import FileInput from '@/components/FileInput.vue'
+import { Button } from 'ant-design-vue'
+
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
 
diff --git a/src/views/Editor/Toolbar/MultiPositionPanel.vue b/src/views/Editor/Toolbar/MultiPositionPanel.vue
index 707e1824..b8061371 100644
--- a/src/views/Editor/Toolbar/MultiPositionPanel.vue
+++ b/src/views/Editor/Toolbar/MultiPositionPanel.vue
@@ -43,6 +43,13 @@ import useAlignActiveElement from '@/hooks/useAlignActiveElement'
 import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
 import useUniformDisplayElement from '@/hooks/useUniformDisplayElement'
 
+import {
+  Divider,
+  Button,
+  Tooltip,
+} from 'ant-design-vue'
+const ButtonGroup = Button.Group
+
 const { canCombine, combineElements, uncombineElements } = useCombineElement()
 const { alignActiveElement } = useAlignActiveElement()
 const { alignElementToCanvas } = useAlignElementToCanvas()
diff --git a/src/views/Editor/Toolbar/SlideAnimationPanel.vue b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
index 163e77b3..ceb5e881 100644
--- a/src/views/Editor/Toolbar/SlideAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
@@ -23,6 +23,8 @@ import { useSlidesStore } from '@/store'
 import { TurningMode } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
+import { Button } from 'ant-design-vue'
+
 interface Animations {
   label: string
   value: TurningMode
diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue
index 1dd2a9c3..94f87a4e 100644
--- a/src/views/Editor/Toolbar/SlideDesignPanel.vue
+++ b/src/views/Editor/Toolbar/SlideDesignPanel.vue
@@ -206,9 +206,19 @@ import { PRESET_THEMES } from '@/configs/theme'
 import { WEB_FONTS } from '@/configs/font'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import useSlideTheme from '@/hooks/useSlideTheme'
+import { getImageDataURL } from '@/utils/image'
 
 import ColorButton from './common/ColorButton.vue'
-import { getImageDataURL } from '@/utils/image'
+import FileInput from '@/components/FileInput.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import {
+  Divider,
+  Button,
+  Popover,
+  Slider,
+  Select,
+} from 'ant-design-vue'
+const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
 
 const slidesStore = useSlidesStore()
 const { availableFonts } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/common/ColorButton.vue b/src/views/Editor/Toolbar/common/ColorButton.vue
index 131df430..8d50235e 100644
--- a/src/views/Editor/Toolbar/common/ColorButton.vue
+++ b/src/views/Editor/Toolbar/common/ColorButton.vue
@@ -8,6 +8,8 @@
 </template>
 
 <script lang="ts" setup>
+import { Button } from 'ant-design-vue'
+
 defineProps({
   color: {
     type: String,
diff --git a/src/views/Editor/Toolbar/common/ElementColorMask.vue b/src/views/Editor/Toolbar/common/ElementColorMask.vue
index 0030290c..a9c4465c 100644
--- a/src/views/Editor/Toolbar/common/ElementColorMask.vue
+++ b/src/views/Editor/Toolbar/common/ElementColorMask.vue
@@ -45,6 +45,12 @@ import { ImageColorElementMask } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from './ColorButton.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import {
+  Popover,
+  Slider,
+  Switch,
+} from 'ant-design-vue'
 
 const defaultColorMask = { color: 'transparent', opacity: 0.3 }
 
diff --git a/src/views/Editor/Toolbar/common/ElementFilter.vue b/src/views/Editor/Toolbar/common/ElementFilter.vue
index fa064e33..afb2dc1d 100644
--- a/src/views/Editor/Toolbar/common/ElementFilter.vue
+++ b/src/views/Editor/Toolbar/common/ElementFilter.vue
@@ -32,6 +32,8 @@ import { useMainStore, useSlidesStore } from '@/store'
 import { PPTImageElement } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
+import { Slider, Switch } from 'ant-design-vue'
+
 interface FilterOption {
   label: string
   key: string
diff --git a/src/views/Editor/Toolbar/common/ElementFlip.vue b/src/views/Editor/Toolbar/common/ElementFlip.vue
index 49c37f28..28674e47 100644
--- a/src/views/Editor/Toolbar/common/ElementFlip.vue
+++ b/src/views/Editor/Toolbar/common/ElementFlip.vue
@@ -22,6 +22,9 @@ import { useMainStore, useSlidesStore } from '@/store'
 import { ImageOrShapeFlip } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
+import CheckboxButton from '@/components/CheckboxButton.vue'
+import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
+
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
 
diff --git a/src/views/Editor/Toolbar/common/ElementOpacity.vue b/src/views/Editor/Toolbar/common/ElementOpacity.vue
index 66eec393..09155096 100644
--- a/src/views/Editor/Toolbar/common/ElementOpacity.vue
+++ b/src/views/Editor/Toolbar/common/ElementOpacity.vue
@@ -20,6 +20,8 @@ import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
+import { Slider } from 'ant-design-vue'
+
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
 
diff --git a/src/views/Editor/Toolbar/common/ElementOutline.vue b/src/views/Editor/Toolbar/common/ElementOutline.vue
index bb8ca79b..f10d5e92 100644
--- a/src/views/Editor/Toolbar/common/ElementOutline.vue
+++ b/src/views/Editor/Toolbar/common/ElementOutline.vue
@@ -53,6 +53,14 @@ import { PPTElementOutline } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from './ColorButton.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import {
+  InputNumber,
+  Popover,
+  Select,
+  Switch,
+} from 'ant-design-vue'
+const SelectOption = Select.Option
 
 defineProps({
   fixed: {
diff --git a/src/views/Editor/Toolbar/common/ElementShadow.vue b/src/views/Editor/Toolbar/common/ElementShadow.vue
index 4a08d85d..20262a22 100644
--- a/src/views/Editor/Toolbar/common/ElementShadow.vue
+++ b/src/views/Editor/Toolbar/common/ElementShadow.vue
@@ -64,6 +64,12 @@ import { PPTElementShadow } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from './ColorButton.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+import {
+  Popover,
+  Slider,
+  Switch,
+} from 'ant-design-vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement } = storeToRefs(useMainStore())
diff --git a/src/views/Editor/Toolbar/common/TextColorButton.vue b/src/views/Editor/Toolbar/common/TextColorButton.vue
index 7448e4e7..7055a24d 100644
--- a/src/views/Editor/Toolbar/common/TextColorButton.vue
+++ b/src/views/Editor/Toolbar/common/TextColorButton.vue
@@ -8,6 +8,8 @@
 </template>
 
 <script lang="ts" setup>
+import { Button } from 'ant-design-vue'
+
 defineProps({
   color: {
     type: String,
diff --git a/src/views/Editor/index.vue b/src/views/Editor/index.vue
index 359ccba0..03b40128 100644
--- a/src/views/Editor/index.vue
+++ b/src/views/Editor/index.vue
@@ -46,6 +46,7 @@ import Toolbar from './Toolbar/index.vue'
 import Remark from './Remark/index.vue'
 import ExportDialog from './ExportDialog/index.vue'
 import SelectPanel from './SelectPanel.vue'
+import { Modal } from 'ant-design-vue'
 
 const mainStore = useMainStore()
 const { dialogForExport, showSelectPanel } = storeToRefs(mainStore)
diff --git a/src/views/Mobile/MobileEditor/ElementToolbar.vue b/src/views/Mobile/MobileEditor/ElementToolbar.vue
index 28b8ba57..11a1baf3 100644
--- a/src/views/Mobile/MobileEditor/ElementToolbar.vue
+++ b/src/views/Mobile/MobileEditor/ElementToolbar.vue
@@ -132,6 +132,16 @@ import useDeleteElement from '@/hooks/useDeleteElement'
 import useAddSlidesOrElements from '@/hooks/useAddSlidesOrElements'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
+import CheckboxButton from '@/components/CheckboxButton.vue'
+import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
+import {
+  Divider,
+  Button,
+  Radio,
+} from 'ant-design-vue'
+const { Group: RadioGroup, Button: RadioButton } = Radio
+const ButtonGroup = Button.Group
+
 interface TabItem {
   key: 'style' | 'common'
   label: string
diff --git a/src/views/Mobile/MobileEditor/SlideToolbar.vue b/src/views/Mobile/MobileEditor/SlideToolbar.vue
index f1255abe..9800a5f2 100644
--- a/src/views/Mobile/MobileEditor/SlideToolbar.vue
+++ b/src/views/Mobile/MobileEditor/SlideToolbar.vue
@@ -40,6 +40,9 @@ import { ShapePoolItem } from '@/configs/shapes'
 import { VIEWPORT_SIZE } from '@/configs/canvas'
 
 import MobileThumbnails from '../MobileThumbnails.vue'
+import FileInput from '@/components/FileInput.vue'
+import { Button } from 'ant-design-vue'
+const ButtonGroup = Button.Group
 
 const slidesStore = useSlidesStore()
 const { viewportRatio, currentSlide } = storeToRefs(slidesStore)
diff --git a/src/views/Mobile/MobilePreview.vue b/src/views/Mobile/MobilePreview.vue
index dbf4d57e..91aaeb11 100644
--- a/src/views/Mobile/MobilePreview.vue
+++ b/src/views/Mobile/MobilePreview.vue
@@ -25,8 +25,9 @@ import useLoadSlides from '@/hooks/useLoadSlides'
 import { Mode } from '@/types/mobile'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
+import { Divider } from 'ant-design-vue'
 
-const props = defineProps({
+defineProps({
   changeMode: {
     type: Function as PropType<(mode: Mode) => void>,
     required: true,
diff --git a/src/views/Screen/BaseView.vue b/src/views/Screen/BaseView.vue
index 7fe4ef9f..de3d33f6 100644
--- a/src/views/Screen/BaseView.vue
+++ b/src/views/Screen/BaseView.vue
@@ -81,6 +81,7 @@ import ScreenSlideList from './ScreenSlideList.vue'
 import SlideThumbnails from './SlideThumbnails.vue'
 import WritingBoardTool from './WritingBoardTool.vue'
 import CountdownTimer from './CountdownTimer.vue'
+import { Tooltip } from 'ant-design-vue'
 
 const props = defineProps({
   changeViewMode: {
diff --git a/src/views/Screen/CountdownTimer.vue b/src/views/Screen/CountdownTimer.vue
index 199f6d1d..0fedd5d2 100644
--- a/src/views/Screen/CountdownTimer.vue
+++ b/src/views/Screen/CountdownTimer.vue
@@ -45,6 +45,8 @@
 import { computed, onUnmounted, ref } from 'vue'
 import { fillDigit } from '@/utils/common'
 
+import MoveablePanel from '@/components/MoveablePanel.vue'
+
 defineProps({
   left: {
     type: Number,
diff --git a/src/views/Screen/PresenterView.vue b/src/views/Screen/PresenterView.vue
index b04af86c..7453e441 100644
--- a/src/views/Screen/PresenterView.vue
+++ b/src/views/Screen/PresenterView.vue
@@ -93,6 +93,7 @@ import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import ScreenSlideList from './ScreenSlideList.vue'
 import WritingBoardTool from './WritingBoardTool.vue'
 import CountdownTimer from './CountdownTimer.vue'
+import { Divider } from 'ant-design-vue'
 
 const props = defineProps({
   changeViewMode: {
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index e9701583..cf9f81ee 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/src/views/Screen/WritingBoardTool.vue
@@ -91,7 +91,14 @@ import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { db } from '@/utils/database'
+
 import WritingBoard from '@/components/WritingBoard.vue'
+import MoveablePanel from '@/components/MoveablePanel.vue'
+import {
+  Tooltip,
+  Popover,
+  Slider,
+} from 'ant-design-vue'
 
 const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c', '#ffff3a']