update

src/components/IconFont.ts

@@ -3,5 +3,5 @@
 import { createFromIconfontCN } from '@ant-design/icons-vue'
 
 export default createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2317509_4g5g5hxi0xh.js',
+  scriptUrl: '//at.alicdn.com/t/font_2317509_83tu8tohuv.js',
 }) as any

src/hooks/useSlideBackgroundStyle.ts

@@ -5,9 +5,20 @@ export default (background: Ref<SlideBackground | undefined>) => {
   const backgroundStyle = computed(() => {
     if(!background.value) return { backgroundColor: '#fff' }
 
-    const { type, value } = background.value
+    const { type, value, size } = background.value
     if(type === 'solid') return { backgroundColor: value }
-    else if(type === 'image') return { backgroundImage: `url(${value}` }
+    else if(type === 'image') {
+      if(size === 'repeat') {
+        return {
+          backgroundImage: `url(${value}`,
+          backgroundRepeat: 'repeat',
+        }
+      }
+      return {
+        backgroundImage: `url(${value}`,
+        backgroundSize: size,
+      }
+    }
 
     return { backgroundColor: '#fff' }
   })

src/main.ts

@@ -11,8 +11,53 @@ import 'animate.css'
 import contextmenu from './plugins/contextmenu'
 import clickOutside from './plugins/clickOutside'
 
+import IconFont from '@/components/IconFont'
+import FileInput from '@/components/FileInput.vue'
+import SvgWrapper from '@/components/SvgWrapper.vue'
+import CheckboxButton from '@/components/CheckboxButton.vue'
+import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
+import ColorPicker from '@/components/ColorPicker/index.vue'
+
+import {
+  InputNumber,
+  Divider,
+  Button,
+  Tooltip,
+  Popover,
+  Slider,
+  Select,
+  Switch,
+  Radio,
+  Input,
+} 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('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.use(contextmenu)
 app.use(clickOutside)
+
+app.component('IconFont', IconFont)
+app.component('FileInput', FileInput)
+app.component('SvgWrapper', SvgWrapper)
+app.component('CheckboxButton', CheckboxButton)
+app.component('CheckboxButtonGroup', CheckboxButtonGroup)
+app.component('ColorPicker', ColorPicker)
+
 app.use(store)
 app.mount('#app')

src/types/slides.ts

@@ -153,6 +153,7 @@ export interface PPTAnimation {
 export interface SlideBackground {
   type: 'solid' | 'image';
   value: string;
+  size?: 'cover' | 'contain' | 'repeat';
 }
 
 export interface Slide {

src/views/Editor/Canvas/ElementCreateSelection.vue

@@ -32,13 +32,8 @@ import { computed, defineComponent, onMounted, reactive, Ref, ref } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 
-import SvgWrapper from '@/components/SvgWrapper.vue'
-
 export default defineComponent({
   name: 'element-create-selection',
-  components: {
-    SvgWrapper,
-  },
   setup(props, { emit }) {
     const store = useStore<State>()
     const ctrlOrShiftKeyActive: Ref<boolean> = computed(() => store.getters.ctrlOrShiftKeyActive)

src/views/Editor/Canvas/Operate/ImageClipHandler.vue

@@ -52,15 +52,10 @@ import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive,
 import { KEYS } from '@/configs/hotkey'
 import { ImageClipData, ImageClipDataRange, ImageClipedEmitData } from '@/types/edit'
 
-import SvgWrapper from '@/components/SvgWrapper.vue'
-
 type ScaleClipRangeType = 't-l' | 't-r' | 'b-l' | 'b-r'
 
 export default defineComponent({
   name: 'image-clip-handler',
-  components: {
-    SvgWrapper,
-  },
   props: {
     src: {
       type: String,

src/views/Editor/CanvasTool/LinePool.vue

@@ -47,13 +47,11 @@
 import { defineComponent } from 'vue'
 import { LINE_LIST, LinePoolItem } from '@/configs/lines'
 
-import SvgWrapper from '@/components/SvgWrapper.vue'
 import LinePointMarker from '@/views/components/element/LineElement/LinePointMarker.vue'
 
 export default defineComponent({
   name: 'line-pool',
   components: {
-    SvgWrapper,
     LinePointMarker,
   },
   setup(props, { emit }) {

src/views/Editor/CanvasTool/ShapePool.vue

@@ -31,13 +31,8 @@
 import { defineComponent } from 'vue'
 import { SHAPE_LIST, ShapePoolItem } from '@/configs/shapes'
 
-import SvgWrapper from '@/components/SvgWrapper.vue'
-
 export default defineComponent({
   name: 'shape-pool',
-  components: {
-    SvgWrapper,
-  },
   setup(props, { emit }) {
     const shapeList = SHAPE_LIST
 

src/views/Editor/CanvasTool/index.vue

@@ -1,35 +1,35 @@
 <template>
   <div class="canvas-tool">
     <div class="left-handler">
-      <UndoOutlined class="handler-item" :class="{ 'disable': !canUndo }" @click="undo()" />
+      <IconFont type="icon-undo" class="handler-item" :class="{ 'disable': !canUndo }" @click="undo()" />
-      <RedoOutlined class="handler-item" :class="{ 'disable': !canRedo }" @click="redo()" />
+      <IconFont type="icon-redo" class="handler-item" :class="{ 'disable': !canRedo }" @click="redo()" />
     </div>
 
     <div class="add-element-handler">
-      <FontSizeOutlined class="handler-item" @click="drawText()" />
+      <IconFont type="icon-font-size" class="handler-item" @click="drawText()" />
       <FileInput @change="files => insertImageElement(files)">
-        <PictureOutlined class="handler-item" />
+        <IconFont type="icon-image" class="handler-item" />
       </FileInput>
       <Popover trigger="click" v-model:visible="isOpenShapePool">
         <template #content>
           <ShapePool @select="shape => drawShape(shape)" />
         </template>
-        <StarOutlined class="handler-item" />
+        <IconFont type="icon-star" class="handler-item" />
       </Popover>
       <Popover trigger="click" v-model:visible="isOpenLinePool">
         <template #content>
           <LinePool @select="line => drawLine(line)" />
         </template>
-        <LineOutlined class="handler-item" />
+        <IconFont type="icon-line" class="handler-item" />
       </Popover>
-      <TableOutlined class="handler-item" />
+      <IconFont type="icon-table" class="handler-item" />
-      <PieChartOutlined class="handler-item" />
+      <IconFont type="icon-piechart" class="handler-item" />
     </div>
 
     <div class="right-handler">
-      <MinusOutlined class="handler-item viewport-size" @click="scaleCanvas('-')" />
+      <IconFont type="icon-minus" class="handler-item viewport-size" @click="scaleCanvas('-')" />
       <span class="text">{{canvasScalePercentage}}</span>
-      <PlusOutlined class="handler-item viewport-size" @click="scaleCanvas('+')" />
+      <IconFont type="icon-plus" class="handler-item viewport-size" @click="scaleCanvas('+')" />
     </div>
   </div>
 </template>
@@ -47,38 +47,12 @@ import useCreateElement from '@/hooks/useCreateElement'
 
 import ShapePool from './ShapePool.vue'
 import LinePool from './LinePool.vue'
-import FileInput from '@/components/FileInput.vue'
-import { Popover } from 'ant-design-vue'
-import {
-  UndoOutlined,
-  RedoOutlined,
-  FontSizeOutlined,
-  PictureOutlined,
-  StarOutlined,
-  LineOutlined,
-  TableOutlined,
-  PieChartOutlined,
-  MinusOutlined,
-  PlusOutlined,
-} from '@ant-design/icons-vue'
 
 export default defineComponent({
   name: 'canvas-tool',
   components: {
     ShapePool,
     LinePool,
-    FileInput,
-    UndoOutlined,
-    RedoOutlined,
-    FontSizeOutlined,
-    PictureOutlined,
-    StarOutlined,
-    LineOutlined,
-    TableOutlined,
-    PieChartOutlined,
-    MinusOutlined,
-    PlusOutlined,
-    Popover,
   },
   setup() {
     const store = useStore<State>()

src/views/Editor/EditorHeader/index.vue

@@ -11,7 +11,7 @@
 
     <div class="right">
       <div class="menu-item icon">
-        <GithubOutlined />
+        <IconFont type="icon-github-fill" />
       </div>
     </div>
   </div>
@@ -19,13 +19,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { GithubOutlined } from '@ant-design/icons-vue'
 
 export default defineComponent({
   name: 'editor-header',
-  components: {
-    GithubOutlined,
-  },
 })
 </script>
 

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -45,10 +45,10 @@
           <div class="text">【{{element.elType}}】{{element.animationType}}</div>
           <div class="handler">
             <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="预览">
-              <PlayCircleOutlined class="handler-btn" @click="runAnimation(element.elId, element.type)" />
+              <IconFont type="icon-play-circle" class="handler-btn" @click="runAnimation(element.elId, element.type)" />
             </Tooltip>
             <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除">
-              <CloseOutlined class="handler-btn" @click="deleteAnimation(element.elId)" />
+              <IconFont type="icon-delete" class="handler-btn" @click="deleteAnimation(element.elId)" />
             </Tooltip>
           </div>
         </div>
@@ -67,11 +67,6 @@ import { ELEMENT_TYPE } from '@/configs/element'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import Draggable from 'vuedraggable'
-import { Button, Divider, Popover, Tooltip } from 'ant-design-vue'
-import {
-  PlayCircleOutlined,
-  CloseOutlined,
-} from '@ant-design/icons-vue'
 
 const animationTypes: { [key: string]: string } = {}
 for(const type of ANIMATIONS) {
@@ -84,12 +79,6 @@ export default defineComponent({
   name: 'element-animation-panel',
   components: {
     Draggable,
-    Button,
-    Divider,
-    PlayCircleOutlined,
-    CloseOutlined,
-    Popover,
-    Tooltip,
   },
   setup() {
     const store = useStore<State>()

src/views/Editor/Toolbar/ElementPositionPanel.vue

@@ -75,10 +75,10 @@
         />
         <template v-if="['image', 'shape'].includes(handleElement.type)">
           <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="解除宽高比锁定" v-if="fixedRatio">
-            <LockOutlined style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" />
+            <IconFont type="icon-lock" style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" />
           </Tooltip>
           <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="宽高比锁定" v-else>
-            <UnlockOutlined style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" />
+            <IconFont type="icon-unlock" style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" />
           </Tooltip>
         </template>
         <div style="flex: 1;" v-else></div>
@@ -106,10 +106,10 @@
       <div class="row">
         <div style="flex: 3;">旋转：</div>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="逆时针旋转">
-          <RotateLeftOutlined class="icon-btn" @click="updateRotate45('-')" style="flex: 2;" />
+          <IconFont type="icon-rotate-left" class="icon-btn" @click="updateRotate45('-')" style="flex: 2;" />
         </Tooltip>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="顺时针旋转">
-          <RotateRightOutlined class="icon-btn" @click="updateRotate45('+')" style="flex: 2;" />
+          <IconFont type="icon-rotate-right" class="icon-btn" @click="updateRotate45('+')" style="flex: 2;" />
         </Tooltip>
         <div style="flex: 1;"></div>
         <InputNumber 
@@ -135,29 +135,8 @@ import useOrderElement from '@/hooks/useOrderElement'
 import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-import { InputNumber, Divider, Button, Tooltip } from 'ant-design-vue'
-import {
-  LockOutlined,
-  UnlockOutlined,
-  RotateLeftOutlined,
-  RotateRightOutlined,
-} from '@ant-design/icons-vue'
-import IconFont from '@/components/IconFont'
-
 export default defineComponent({
   name: 'element-positopn-panel',
-  components: {
-    InputNumber,
-    Divider,
-    Button,
-    ButtonGroup: Button.Group,
-    Tooltip,
-    LockOutlined,
-    UnlockOutlined,
-    RotateLeftOutlined,
-    RotateRightOutlined,
-    IconFont,
-  },
   setup() {
     const store = useStore<State>()
     const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -31,7 +31,7 @@
         </template>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
           <Button class="text-color-btn" style="flex: 1;">
-            <FontColorsOutlined />
+            <IconFont type="icon-font-colors" />
             <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
           </Button>
         </Tooltip>
@@ -45,7 +45,7 @@
         </template>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
           <Button class="text-color-btn" style="flex: 1;">
-            <HighlightOutlined />
+            <IconFont type="icon-highlight" />
             <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
           </Button>
         </Tooltip>
@@ -59,7 +59,7 @@
         </template>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文本框填充">
           <Button class="text-color-btn" style="flex: 1;">
-            <BgColorsOutlined />
+            <IconFont type="icon-bg-colors" />
             <div class="text-color-block" :style="{ backgroundColor: fill }"></div>
           </Button>
         </Tooltip>
@@ -72,28 +72,28 @@
           style="flex: 1;"
           :checked="richTextAttrs.bold"
           @click="emitRichTextCommand('bold')"
-        ><BoldOutlined /></CheckboxButton>
+        ><IconFont type="icon-bold" /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="斜体">
         <CheckboxButton 
           style="flex: 1;"
           :checked="richTextAttrs.em"
           @click="emitRichTextCommand('em')"
-        ><ItalicOutlined /></CheckboxButton>
+        ><IconFont type="icon-italic" /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下划线">
         <CheckboxButton 
           style="flex: 1;"
           :checked="richTextAttrs.underline"
           @click="emitRichTextCommand('underline')"
-        ><UnderlineOutlined /></CheckboxButton>
+        ><IconFont type="icon-underline" /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除线">
         <CheckboxButton 
           style="flex: 1;"
           :checked="richTextAttrs.strikethrough"
           @click="emitRichTextCommand('strikethrough')"
-        ><StrikethroughOutlined /></CheckboxButton>
+        ><IconFont type="icon-strikethrough" /></CheckboxButton>
       </Tooltip>
     </CheckboxButtonGroup>
 
@@ -143,13 +143,13 @@
       @change="e => emitRichTextCommand('align', e.target.value)"
     >
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
-        <RadioButton value="left" style="flex: 1;"><AlignLeftOutlined /></RadioButton>
+        <RadioButton value="left" style="flex: 1;"><IconFont type="icon-text-align-left" /></RadioButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="居中">
-        <RadioButton value="center" style="flex: 1;"><AlignCenterOutlined /></RadioButton>
+        <RadioButton value="center" style="flex: 1;"><IconFont type="icon-text-align-center" /></RadioButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
-        <RadioButton value="right" style="flex: 1;"><AlignRightOutlined /></RadioButton>
+        <RadioButton value="right" style="flex: 1;"><IconFont type="icon-text-align-right" /></RadioButton>
       </Tooltip>
     </RadioGroup>
 
@@ -159,14 +159,14 @@
           style="flex: 1;" 
           :checked="richTextAttrs.bulletList"
           @click="emitRichTextCommand('bulletList')"
-        ><UnorderedListOutlined /></CheckboxButton>
+        ><IconFont type="icon-unorderedlist" /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="编号">
         <CheckboxButton 
           style="flex: 1;" 
           :checked="richTextAttrs.orderedList"
           @click="emitRichTextCommand('orderedList')"
-        ><OrderedListOutlined /></CheckboxButton>
+        ><IconFont type="icon-orderedlist" /></CheckboxButton>
       </Tooltip>
     </CheckboxButtonGroup>
 
@@ -175,14 +175,14 @@
     <div class="row">
       <div style="flex: 2;">行间距：</div>
       <Select style="flex: 3;" :value="lineHeight" @change="value => updateLineHeight(value)">
-        <template #suffixIcon><ColumnHeightOutlined /></template>
+        <template #suffixIcon><IconFont type="icon-column-height" /></template>
         <SelectOption v-for="item in lineHeightOptions" :key="item" :value="item">{{item}}倍</SelectOption>
       </Select>
     </div>
     <div class="row">
       <div style="flex: 2;">字间距：</div>
       <Select style="flex: 3;" :value="wordSpace" @change="value => updateWordSpace(value)">
-        <template #suffixIcon><ColumnWidthOutlined /></template>
+        <template #suffixIcon><IconFont type="icon-column-width" /></template>
         <SelectOption v-for="item in wordSpaceOptions" :key="item" :value="item">{{item}}px</SelectOption>
       </Select>
     </div>
@@ -208,27 +208,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import ElementOpacity from '../common/ElementOpacity.vue'
 import ElementOutline from '../common/ElementOutline.vue'
 import ElementShadow from '../common/ElementShadow.vue'
-import ColorPicker from '@/components/ColorPicker/index.vue'
-import CheckboxButton from '@/components/CheckboxButton.vue'
-import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
-import { Select, Input, Button, Divider, Popover, Radio, Tooltip } from 'ant-design-vue'
-import {
-  FontColorsOutlined,
-  HighlightOutlined,
-  BgColorsOutlined,
-  BoldOutlined,
-  ItalicOutlined,
-  UnderlineOutlined,
-  StrikethroughOutlined,
-  AlignLeftOutlined,
-  AlignCenterOutlined,
-  AlignRightOutlined,
-  OrderedListOutlined,
-  UnorderedListOutlined,
-  ColumnHeightOutlined,
-  ColumnWidthOutlined,
-} from '@ant-design/icons-vue'
-import IconFont from '@/components/IconFont'
 
 export default defineComponent({
   name: 'text-style-panel',
@@ -236,34 +215,6 @@ export default defineComponent({
     ElementOpacity,
     ElementOutline,
     ElementShadow,
-    ColorPicker,
-    CheckboxButton,
-    CheckboxButtonGroup,
-    Select,
-    SelectOption: Select.Option,
-    InputGroup: Input.Group,
-    Button,
-    ButtonGroup: Button.Group,
-    Divider,
-    Popover,
-    RadioGroup: Radio.Group,
-    RadioButton: Radio.Button,
-    Tooltip,
-    FontColorsOutlined,
-    HighlightOutlined,
-    BgColorsOutlined,
-    BoldOutlined,
-    ItalicOutlined,
-    UnderlineOutlined,
-    StrikethroughOutlined,
-    AlignLeftOutlined,
-    AlignCenterOutlined,
-    AlignRightOutlined,
-    OrderedListOutlined,
-    UnorderedListOutlined,
-    ColumnHeightOutlined,
-    ColumnWidthOutlined,
-    IconFont,
   },
   setup() {
     const store = useStore<State>()

src/views/Editor/Toolbar/MultiPositionPanel.vue

@@ -42,18 +42,8 @@ import { getElementListRange } from '@/utils/element'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import useCombineElement from '@/hooks/useCombineElement'
 
-import { Button, Divider, Tooltip } from 'ant-design-vue'
-import IconFont from '@/components/IconFont'
-
 export default defineComponent({
   name: 'multi-position-panel',
-  components: {
-    Button,
-    ButtonGroup: Button.Group,
-    Divider,
-    Tooltip,
-    IconFont,
-  },
   setup() {
     const store = useStore<State>()
     const activeElementIdList = computed(() => store.state.activeElementIdList)

src/views/Editor/Toolbar/SlideStylePanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="slide-style-panel">
-    slide-style-panel
+    <div>背景填充</div>
   </div>
 </template>
 

src/views/Editor/Toolbar/common/ElementOpacity.vue

@@ -21,13 +21,8 @@ import { MutationTypes, State } from '@/store'
 import { PPTElement } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-import { Slider } from 'ant-design-vue'
-
 export default defineComponent({
   name: 'element-opacity',
-  components: {
-    Slider,
-  },
   setup() {
     const store = useStore<State>()
     const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)

src/views/Editor/Toolbar/common/ElementOutline.vue

@@ -32,7 +32,7 @@
           </template>
           <Button class="color-btn" style="flex: 3;">
             <div class="color-block" :style="{ backgroundColor: outline.color }"></div>
-            <DownOutlined class="color-btn-icon" />
+            <IconFont type="icon-down" class="color-btn-icon" />
           </Button>
         </Popover>
       </div>
@@ -55,22 +55,8 @@ import { MutationTypes, State } from '@/store'
 import { PPTElement, PPTElementOutline } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-import ColorPicker from '@/components/ColorPicker/index.vue'
-import { Select, Button, Popover, InputNumber, Switch } from 'ant-design-vue'
-import { DownOutlined } from '@ant-design/icons-vue'
-
 export default defineComponent({
   name: 'element-outline',
-  components: {
-    ColorPicker,
-    Select,
-    SelectOption: Select.Option,
-    Button,
-    Popover,
-    InputNumber,
-    Switch,
-    DownOutlined,
-  },
   setup() {
     const store = useStore<State>()
     const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)

src/views/Editor/Toolbar/common/ElementShadow.vue

@@ -51,7 +51,7 @@
           </template>
           <Button class="color-btn" style="flex: 3;">
             <div class="color-block"></div>
-            <DownOutlined class="color-btn-icon" />
+            <IconFont type="icon-down" class="color-btn-icon" />
           </Button>
         </Popover>
       </div>
@@ -66,20 +66,8 @@ import { MutationTypes, State } from '@/store'
 import { PPTElement, PPTElementShadow } from '@/types/slides'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-import ColorPicker from '@/components/ColorPicker/index.vue'
-import { Slider, Button, Popover, Switch } from 'ant-design-vue'
-import { DownOutlined } from '@ant-design/icons-vue'
-
 export default defineComponent({
   name: 'element-shadow',
-  components: {
-    ColorPicker,
-    Slider,
-    Button,
-    Popover,
-    Switch,
-    DownOutlined,
-  },
   setup() {
     const store = useStore<State>()
     const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)

src/views/components/element/ElementOutline.vue

@@ -23,14 +23,10 @@
 <script lang="ts">
 import { PropType, defineComponent, toRef } from 'vue'
 import { PPTElementOutline } from '@/types/slides'
-import SvgWrapper from '@/components/SvgWrapper.vue'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 
 export default defineComponent({
-  name: 'element-outline', 
+  name: 'element-outline',
-  components: {
-    SvgWrapper,
-  },
   props: {
     width: {
       type: Number,

src/views/components/element/ImageElement/ImageEllipseOutline.vue

@@ -26,14 +26,10 @@
 <script lang="ts">
 import { PropType, defineComponent, toRef } from 'vue'
 import { PPTElementOutline } from '@/types/slides'
-import SvgWrapper from '@/components/SvgWrapper.vue'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 
 export default defineComponent({
   name: 'image-ellipse-outline',
-  components: {
-    SvgWrapper,
-  },
   props: {
     width: {
       type: Number,

src/views/components/element/ImageElement/ImagePolygonOutline.vue

@@ -23,14 +23,10 @@
 <script lang="ts">
 import { PropType, defineComponent, toRef } from 'vue'
 import { PPTElementOutline } from '@/types/slides'
-import SvgWrapper from '@/components/SvgWrapper.vue'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 
 export default defineComponent({
   name: 'image-polygon-outline',
-  components: {
-    SvgWrapper,
-  },
   props: {
     width: {
       type: Number,

src/views/components/element/ImageElement/ImageRectOutline.vue

@@ -26,14 +26,10 @@
 <script lang="ts">
 import { PropType, defineComponent, toRef } from 'vue'
 import { PPTElementOutline } from '@/types/slides'
-import SvgWrapper from '@/components/SvgWrapper.vue'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 
 export default defineComponent({
   name: 'image-rect-outline',
-  components: {
-    SvgWrapper,
-  },
   props: {
     width: {
       type: Number,

src/views/components/element/LineElement/BaseLineElement.vue

@@ -56,13 +56,11 @@ import { PPTLineElement } from '@/types/slides'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
 import LinePointMarker from './LinePointMarker.vue'
-import SvgWrapper from '@/components/SvgWrapper.vue'
 
 export default defineComponent({
   name: 'editable-element-shape',
   components: {
     LinePointMarker,
-    SvgWrapper,
   },
   props: {
     elementInfo: {

src/views/components/element/LineElement/index.vue

@@ -60,13 +60,11 @@ import { ContextmenuItem } from '@/components/Contextmenu/types'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
 import LinePointMarker from './LinePointMarker.vue'
-import SvgWrapper from '@/components/SvgWrapper.vue'
 
 export default defineComponent({
   name: 'editable-element-shape',
   components: {
     LinePointMarker,
-    SvgWrapper,
   },
   props: {
     elementInfo: {

src/views/components/element/ShapeElement/BaseShapeElement.vue

@@ -45,13 +45,8 @@ import { PPTShapeElement } from '@/types/slides'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
-import SvgWrapper from '@/components/SvgWrapper.vue'
-
 export default defineComponent({
   name: 'base-element-shape',
-  components: {
-    SvgWrapper,
-  },
   props: {
     elementInfo: {
       type: Object as PropType<PPTShapeElement>,

src/views/components/element/ShapeElement/index.vue

@@ -49,13 +49,8 @@ import { ContextmenuItem } from '@/components/Contextmenu/types'
 import useElementOutline from '@/views/components/element/hooks/useElementOutline'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
-import SvgWrapper from '@/components/SvgWrapper.vue'
-
 export default defineComponent({
   name: 'editable-element-shape',
-  components: {
-    SvgWrapper,
-  },
   props: {
     elementInfo: {
       type: Object as PropType<PPTShapeElement>,