Optimize: card operator

frontend/src/components/CardOperator.vue

@@ -69,7 +69,7 @@ let btns = arrayFilter([
       <a-button
         :style="item.style"
         type="text"
-        size="default"
+        size="mini"
         :icon="h(item.icon)"
         @click="() => item.click(card.id)"
       />
@@ -100,7 +100,7 @@ let btns = arrayFilter([
   align-items: center;
   justify-content: center;
   background-color: var(--float-box-bg-color);
-  backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(16px);
   font-size: 12px;
   border: 1px dashed var(--gray-border-color);
   font-size: 12px;
@@ -110,10 +110,14 @@ let btns = arrayFilter([
 
 .number-card {
   position: absolute;
-  right: 16px;
-  top: 0px;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -4px;
   z-index: 10;
+  display: flex;
   > div {
+    min-width: 110px;
+    margin: 0px 6px;
     margin-bottom: 8px;
     padding: 2px 4px;
   }
@@ -126,10 +130,10 @@ let btns = arrayFilter([
 }
 .layout-card-design-btn {
   @extend .base;
-  width: 32px;
+  width: 28px;
   position: absolute;
-  left: -6px;
-  top: 0px;
+  left: -4px;
+  top: -4px;
 
   i {
     margin: 4px;

frontend/src/components/CardPanel.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   >
     <div v-if="$slots.title" class="card-panel-title">
       <div>
-        <a-typography-title :level="5">
+        <a-typography-title :level="5" style="margin-bottom: 0px">
           <slot name="title"></slot>
         </a-typography-title>
       </div>
@@ -58,6 +58,7 @@ const props = defineProps({
     justify-content: space-between;
     align-items: center;
     margin-top: -4px; // For Ant-Design Font
+    margin-bottom: 8px;
   }
   .card-panel-content {
     flex-grow: 1;

frontend/src/widgets/others/LinkCard.vue

@@ -69,11 +69,13 @@ const deleteLink = (index: number) => {
     <template #title>
       <div class="flex">
         {{ card.title }}
-        <div v-if="containerState.isDesignMode" class="btn-group ml-10">
-          <a-button type="primary" size="small" @click="addLink.show = true">
-            {{ t("添加") }}
-          </a-button>
-        </div>
+      </div>
+    </template>
+    <template #operator>
+      <div v-if="containerState.isDesignMode" class="btn-group ml-10">
+        <a-button type="primary" size="small" @click="addLink.show = true">
+          {{ t("添加") }}
+        </a-button>
       </div>
     </template>
 

frontend/src/widgets/others/TextCard.vue

@@ -39,19 +39,21 @@ const editTextContent = () => {
     <template #title>
       <div class="flex">
         {{ card.title }}
-        <div v-if="containerState.isDesignMode" class="ml-10">
-          <a-button
-            v-if="status !== EDIT_MODE.PREVIEW"
-            type="primary"
-            size="small"
-            @click="previewsTextContent()"
-          >
-            {{ t("预览") }}
-          </a-button>
-          <a-button v-else type="primary" size="small" @click="editTextContent()">
-            {{ t("编辑") }}
-          </a-button>
-        </div>
+      </div>
+    </template>
+    <template #operator>
+      <div v-if="containerState.isDesignMode" class="ml-10">
+        <a-button
+          v-if="status !== EDIT_MODE.PREVIEW"
+          type="primary"
+          size="small"
+          @click="previewsTextContent()"
+        >
+          {{ t("预览") }}
+        </a-button>
+        <a-button v-else type="primary" size="small" @click="editTextContent()">
+          {{ t("编辑") }}
+        </a-button>
       </div>
     </template>