update

public/index.html

@@ -14,7 +14,5 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-    
-    <script src="//at.alicdn.com/t/font_2266335_di5qehm4txu.js"></script>
   </body>
 </html>

src/assets/styles/antd.scss

@@ -0,0 +1,16 @@
+.ant-popover {
+  padding-top: 5px !important;
+}
+.ant-popover-arrow {
+  display: none;
+}
+.ant-popover-inner {
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
+  border: 1px solid #eee;
+}
+.ant-popover-inner-content {
+  padding: 12px !important;
+}
+.ant-btn {
+  font-size: 13px !important;
+}

src/assets/styles/global.scss

@@ -60,17 +60,3 @@ a {
 ::-webkit-scrollbar-thumb {
   background-color: #c1c1c1;
 }
-
-.ant-popover {
-  padding-top: 5px !important;
-}
-.ant-popover-arrow {
-  display: none;
-}
-.ant-popover-inner {
-  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
-  border: 1px solid #eee;
-}
-.ant-popover-inner-content {
-  padding: 12px !important;
-}

src/main.ts

@@ -5,6 +5,7 @@ import store from './store'
 import 'prosemirror-view/style/prosemirror.css'
 import '@/assets/styles/prosemirror.scss'
 import '@/assets/styles/global.scss'
+import '@/assets/styles/antd.scss'
 import 'animate.css'
 
 import contextmenu from './plugins/contextmenu'

src/views/Editor/CanvasTool/index.vue

@@ -10,13 +10,13 @@
       <FileInput @change="files => insertImageElement(files)">
         <PictureOutlined class="handler-item" />
       </FileInput>
-      <Popover trigger="click">
+      <Popover trigger="click" v-model:visible="isOpenShapePool">
         <template v-slot:content>
           <ShapePool @select="shape => drawShape(shape)" />
         </template>
         <StarOutlined class="handler-item" />
       </Popover>
-      <Popover trigger="click">
+      <Popover trigger="click" v-model:visible="isOpenlinePool">
         <template v-slot:content>
           <LinePool @select="line => drawLine(line)" />
         </template>
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, ref } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { getImageDataURL } from '@/utils/image'
@@ -99,25 +99,27 @@ export default defineComponent({
       getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
     }
 
+    const isOpenShapePool = ref(false)
+    const isOpenlinePool = ref(false)
     const drawText = () => {
       store.commit(MutationTypes.SET_CREATING_ELEMENT, {
         type: 'text',
         data: null,
       })
     }
-
     const drawShape = (shape: ShapePoolItem) => {
       store.commit(MutationTypes.SET_CREATING_ELEMENT, {
         type: 'shape',
         data: shape,
       })
+      isOpenShapePool.value = false
     }
-
     const drawLine = (line: LinePoolItem) => {
       store.commit(MutationTypes.SET_CREATING_ELEMENT, {
         type: 'line',
         data: line,
       })
+      isOpenShapePool.value = false
     }
 
     return {
@@ -128,6 +130,8 @@ export default defineComponent({
       redo,
       undo,
       insertImageElement,
+      isOpenShapePool,
+      isOpenlinePool,
       drawText,
       drawShape,
       drawLine,

src/views/Editor/Toolbar/ElementPositionPanel.vue

@@ -1,13 +1,95 @@
 <template>
   <div class="element-positopn-panel">
-    element-positopn-panel
+    <ButtonGroup class="row">
+      <Button style="flex: 1;">顶</Button>
+      <Button style="flex: 1;">底</Button>
+      <Button style="flex: 1;">上移</Button>
+      <Button style="flex: 1;">下移</Button>
+    </ButtonGroup>
+    <ButtonGroup class="row">
+      <Button style="flex: 1;">左</Button>
+      <Button style="flex: 1;">中</Button>
+      <Button style="flex: 1;">右</Button>
+    </ButtonGroup>
+    <ButtonGroup class="row">
+      <Button style="flex: 1;">上</Button>
+      <Button style="flex: 1;">中</Button>
+      <Button style="flex: 1;">下</Button>
+    </ButtonGroup>
+
+    <Divider />
+
+    <div class="row">
+      <div style="flex: 3;">位置：</div>
+      <InputNumber style="flex: 4;" />
+      <div style="flex: 1;"></div>
+      <InputNumber style="flex: 4;" />
+    </div>
+    <div class="row">
+      <div style="flex: 3;"></div>
+      <div style="flex: 4;" class="label">X</div>
+      <div style="flex: 1;"></div>
+      <div style="flex: 4;" class="label">Y</div>
+    </div>
+    <div class="row">
+      <div style="flex: 3;">大小：</div>
+      <InputNumber style="flex: 4;" />
+      <LockOutlined style="flex: 1;" class="icon-btn" />
+      <InputNumber style="flex: 4;" />
+    </div>
+    <div class="row">
+      <div style="flex: 3;"></div>
+      <div style="flex: 4;" class="label">宽</div>
+      <div style="flex: 1;"></div>
+      <div style="flex: 4;" class="label">高</div>
+    </div>
+
+    <Divider />
+
+    <div class="row">
+      <div style="flex: 3;">旋转：</div>
+      <RotateLeftOutlined class="icon-btn" style="flex: 2;" />
+      <RotateRightOutlined class="icon-btn" style="flex: 2;" />
+      <div style="flex: 1;"></div>
+      <InputNumber style="flex: 4;" />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { InputNumber, Divider, Button } from 'ant-design-vue'
+import {
+  LockOutlined,
+  RotateLeftOutlined,
+  RotateRightOutlined,
+} from '@ant-design/icons-vue'
 
 export default defineComponent({
   name: 'element-positopn-panel',
+  components: {
+    InputNumber,
+    Divider,
+    Button,
+    ButtonGroup: Button.Group,
+    LockOutlined,
+    RotateLeftOutlined,
+    RotateRightOutlined,
+  },
 })
-</script>
+</script>
+
+<style lang="scss" scoped>
+.row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.label {
+  text-align: center;
+}
+.icon-btn {
+  cursor: pointer;
+}
+</style>

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

@@ -1,13 +1,134 @@
 <template>
   <div class="text-style-panel">
-    text-style-panel
+    <InputGroup compact class="row">
+      <Select
+        style="flex: 3;"
+      >
+        <SelectOption value="jack">Jack</SelectOption>
+        <SelectOption value="lucy">Lucy</SelectOption>
+        <SelectOption value="disabled">Disabled</SelectOption>
+        <SelectOption value="Yiminghe">yiminghe</SelectOption>
+      </Select>
+      <Select
+        style="flex: 2;"
+      >
+        <SelectOption value="jack">Jack</SelectOption>
+        <SelectOption value="lucy">Lucy</SelectOption>
+        <SelectOption value="disabled">Disabled</SelectOption>
+        <SelectOption value="Yiminghe">yiminghe</SelectOption>
+      </Select>
+    </InputGroup>
+
+    <ButtonGroup class="row">
+      <Button style="flex: 1;"><FontColorsOutlined /></Button>
+      <Button style="flex: 1;"><HighlightOutlined /></Button>
+      <Button style="flex: 1;"><BgColorsOutlined /></Button>
+    </ButtonGroup>
+
+    <ButtonGroup class="row">
+      <Button style="flex: 1;"><BoldOutlined /></Button>
+      <Button style="flex: 1;"><ItalicOutlined /></Button>
+      <Button style="flex: 1;"><UnderlineOutlined /></Button>
+      <Button style="flex: 1;"><StrikethroughOutlined /></Button>
+    </ButtonGroup>
+
+    <Divider />
+
+    <ButtonGroup class="row">
+      <Button style="flex: 1;"><AlignLeftOutlined /></Button>
+      <Button style="flex: 1;"><AlignCenterOutlined /></Button>
+      <Button style="flex: 1;"><AlignRightOutlined /></Button>
+    </ButtonGroup>
+
+    <ButtonGroup class="row">
+      <Button style="flex: 1;"><OrderedListOutlined /></Button>
+      <Button style="flex: 1;"><UnorderedListOutlined /></Button>
+    </ButtonGroup>
+
+    <Divider />
+
+    <div class="row">
+      <div style="flex: 2;">行间距：</div>
+      <Select style="flex: 3;">
+        <SelectOption value="jack">Jack</SelectOption>
+        <SelectOption value="lucy">Lucy</SelectOption>
+        <SelectOption value="disabled">Disabled</SelectOption>
+        <SelectOption value="Yiminghe">yiminghe</SelectOption>
+      </Select>
+    </div>
+    <div class="row">
+      <div style="flex: 2;">字间距：</div>
+      <Select style="flex: 3;">
+        <SelectOption value="jack">Jack</SelectOption>
+        <SelectOption value="lucy">Lucy</SelectOption>
+        <SelectOption value="disabled">Disabled</SelectOption>
+        <SelectOption value="Yiminghe">yiminghe</SelectOption>
+      </Select>
+    </div>
+
+    <Divider />
+
+    <ButtonGroup class="row">
+      <Button style="flex: 1;">边框</Button>
+      <Button style="flex: 1;">阴影</Button>
+    </ButtonGroup>
+
+    <div class="row">
+      <div style="flex: 2;">透明度：</div>
+      <Slider style="flex: 3;" />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { Select, Input, Button, Divider, Slider } from 'ant-design-vue'
+import {
+  FontColorsOutlined,
+  HighlightOutlined,
+  BgColorsOutlined,
+  BoldOutlined,
+  ItalicOutlined,
+  UnderlineOutlined,
+  StrikethroughOutlined,
+  AlignLeftOutlined,
+  AlignCenterOutlined,
+  AlignRightOutlined,
+  OrderedListOutlined,
+  UnorderedListOutlined,
+} from '@ant-design/icons-vue'
 
 export default defineComponent({
   name: 'text-style-panel',
+  components: {
+    Select,
+    SelectOption: Select.Option,
+    InputGroup: Input.Group,
+    Button,
+    ButtonGroup: Button.Group,
+    Divider,
+    Slider,
+    FontColorsOutlined,
+    HighlightOutlined,
+    BgColorsOutlined,
+    BoldOutlined,
+    ItalicOutlined,
+    UnderlineOutlined,
+    StrikethroughOutlined,
+    AlignLeftOutlined,
+    AlignCenterOutlined,
+    AlignRightOutlined,
+    OrderedListOutlined,
+    UnorderedListOutlined,
+  },
 })
-</script>
+</script>
+
+<style lang="scss" scoped>
+.row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+</style>

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

@@ -22,6 +22,8 @@ export default defineComponent({
     const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)
 
     const currentPanelComponent = computed(() => {
+      if(!handleElement.value) return null
+      
       const panelMap = {
         [ElementTypes.TEXT]: TextStylePanel,
         [ElementTypes.IMAGE]: ImageStylePanel,

src/views/Editor/Toolbar/MultiPositionPanel.vue

@@ -1,13 +1,44 @@
 <template>
   <div class="multi-position-panel">
-    multi-position-panel
+    <ButtonGroup class="row">
+      <Button style="flex: 1;">左</Button>
+      <Button style="flex: 1;">中</Button>
+      <Button style="flex: 1;">右</Button>
+    </ButtonGroup>
+    <ButtonGroup class="row">
+      <Button style="flex: 1;">上</Button>
+      <Button style="flex: 1;">中</Button>
+      <Button style="flex: 1;">下</Button>
+    </ButtonGroup>
+
+    <Divider />
+
+    <ButtonGroup class="row">
+      <Button style="flex: 1;">组合</Button>
+      <Button style="flex: 1;">取消组合</Button>
+    </ButtonGroup>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { Button, Divider } from 'ant-design-vue'
 
 export default defineComponent({
   name: 'multi-position-panel',
+  components: {
+    Button,
+    ButtonGroup: Button.Group,
+    Divider,
+  },
 })
-</script>
+</script>
+
+<style lang="scss" scoped>
+.row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+</style>

src/views/Editor/Toolbar/index.vue

@@ -121,6 +121,7 @@ export default defineComponent({
 }
 .content {
   padding: 12px;
+  font-size: 13px;
   overflow: auto;
 }
 </style>