refactor: 将全局组件改为组件内引用（Volar经常莫名其妙无法识别全局组件类型）

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 {
+  export type GlobalComponents = typeof icons
-    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 {}

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,

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

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())

src/plugins/component.ts

@@ -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])
-    }
-  }
-}

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 {

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>,

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 {

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 {

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

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)

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)

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

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
 }>()

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

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
 }>()

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
 }>()

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)

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()

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) {

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())
 

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())

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>,

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'],

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 = [

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())

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())

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())

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()

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())

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，如果文本加粗后文本框高度增加，画布的可视区域定位会出现错误
 // 因此在执行预置样式命令时，将加粗命令放在尽可能靠前的位置，避免字号增大后再加粗

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())
 

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()

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

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())

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,

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 }
 

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

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())
 

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())
 

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: {

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())

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,

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)

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

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)

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,

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: {

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,

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: {

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']