update

src/assets/styles/global.scss

@@ -59,4 +59,18 @@ 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/components/ColorPicker/index.vue

@@ -160,6 +160,7 @@ export default defineComponent({
   width: 240px;
   background: #fff;
   user-select: none;
+  margin-bottom: -10px;
 }
 .picker-saturation-wrap {
   width: 100%;

src/views/Editor/Toolbar/SlideStylePanel.vue

@@ -1,17 +1,25 @@
 <template>
   <div class="slide-style-panel">
-    <ColorPicker v-model="color" />
+    <Popover trigger="click">
+      <template v-slot:content>
+        <ColorPicker v-model="color" />
+      </template>
+      <button>Hover me</button>
+    </Popover>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
+
 import ColorPicker from '@/components/ColorPicker/index.vue'
+import { Popover } from 'ant-design-vue'
 
 export default defineComponent({
   name: 'slide-style-panel',
   components: {
     ColorPicker,
+    Popover,
   },
   setup() {
     const color = ref('#888')

src/views/Editor/Toolbar/index.vue

@@ -120,7 +120,7 @@ export default defineComponent({
   }
 }
 .content {
-  padding: 5px;
+  padding: 12px;
   overflow: auto;
 }
 </style>