From 5ee4a88cdfe20d7d5db04828916896b904a718ac Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Thu, 21 Nov 2024 18:17:51 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92):=20?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E7=94=A8=E4=BE=8B-=E6=89=A7=E8=A1=8C?=
 =?UTF-8?q?=E8=84=91=E5=9B=BE-=E8=B0=83=E6=95=B4=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E6=89=B9=E9=87=8F=E6=93=8D=E4=BD=9C=E7=9A=84=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1048405 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001048405
---
 .../pure/ms-minder-editor/menu/batchMenu.vue  | 182 +++++++++---------
 1 file changed, 95 insertions(+), 87 deletions(-)

diff --git a/frontend/src/components/pure/ms-minder-editor/menu/batchMenu.vue b/frontend/src/components/pure/ms-minder-editor/menu/batchMenu.vue
index 7e5b688765..0af549aa8c 100644
--- a/frontend/src/components/pure/ms-minder-editor/menu/batchMenu.vue
+++ b/frontend/src/components/pure/ms-minder-editor/menu/batchMenu.vue
@@ -1,97 +1,104 @@
 <template>
-  <div v-if="batchMenuVisible" class="ms-minder-node-float-menu ms-minder-batch-menu">
-    <a-dropdown
-      v-if="props.priorityCount && props.canShowPriorityMenu"
-      v-model:popup-visible="priorityMenuVisible"
-      class="ms-minder-dropdown"
-      :popup-translate="[0, 4]"
-      position="bl"
-      trigger="click"
-      @select="(val) => handleMinderMenuSelect('priority', val as string)"
-    >
-      <a-tooltip :content="props.priorityTooltip" :disabled="!props.priorityTooltip">
-        <MsButton
-          type="icon"
-          class="ms-minder-node-float-menu-icon-button"
-          :class="[priorityMenuVisible ? 'ms-minder-node-float-menu-icon-button--focus' : '']"
-        >
-          <div
-            class="h-[16px] w-[16px] rounded-full bg-[rgb(var(--primary-5))] text-center text-[12px] font-medium text-white"
+  <a-affix
+    v-if="batchMenuVisible"
+    :offset-bottom="32"
+    target-container=".page-content"
+    class="absolute bottom-0 left-[50%]"
+  >
+    <div class="ms-minder-batch-menu">
+      <a-dropdown
+        v-if="props.priorityCount && props.canShowPriorityMenu"
+        v-model:popup-visible="priorityMenuVisible"
+        class="ms-minder-dropdown"
+        :popup-translate="[0, 4]"
+        position="bl"
+        trigger="click"
+        @select="(val) => handleMinderMenuSelect('priority', val as string)"
+      >
+        <a-tooltip :content="props.priorityTooltip" :disabled="!props.priorityTooltip">
+          <MsButton
+            type="icon"
+            class="ms-minder-node-float-menu-icon-button"
+            :class="[priorityMenuVisible ? 'ms-minder-node-float-menu-icon-button--focus' : '']"
           >
-            P
+            <div
+              class="h-[16px] w-[16px] rounded-full bg-[rgb(var(--primary-5))] text-center text-[12px] font-medium text-white"
+            >
+              P
+            </div>
+          </MsButton>
+        </a-tooltip>
+        <template #content>
+          <div v-if="props.priorityTooltip" class="mx-[6px] px-[8px] py-[3px] text-[var(--color-text-4)]">
+            {{ props.priorityTooltip }}
           </div>
+          <template v-for="(item, pIndex) in priorityCount + 1" :key="item">
+            <a-doption v-if="pIndex != 0" :value="pIndex">
+              <div
+                class="flex h-[20px] w-[20px] items-center justify-center rounded-full text-[12px] font-medium text-white"
+                :style="{
+                  backgroundColor: priorityColorMap[pIndex],
+                }"
+              >
+                {{ priorityPrefix }}{{ priorityStartWithZero ? pIndex - 1 : pIndex }}
+              </div>
+            </a-doption>
+          </template>
+        </template>
+      </a-dropdown>
+      <slot name="batchMenu"></slot>
+      <a-tooltip v-if="onlyDelete" :content="t('common.delete')">
+        <MsButton type="icon" class="ms-minder-node-float-menu-icon-button" @click="handleMinderMenuSelect('delete')">
+          <MsIcon type="icon-icon_delete-trash_outlined1" class="text-[var(--color-text-4)]" />
         </MsButton>
       </a-tooltip>
-      <template #content>
-        <div v-if="props.priorityTooltip" class="mx-[6px] px-[8px] py-[3px] text-[var(--color-text-4)]">
-          {{ props.priorityTooltip }}
-        </div>
-        <template v-for="(item, pIndex) in priorityCount + 1" :key="item">
-          <a-doption v-if="pIndex != 0" :value="pIndex">
-            <div
-              class="flex h-[20px] w-[20px] items-center justify-center rounded-full text-[12px] font-medium text-white"
-              :style="{
-                backgroundColor: priorityColorMap[pIndex],
-              }"
-            >
-              {{ priorityPrefix }}{{ priorityStartWithZero ? pIndex - 1 : pIndex }}
+      <a-dropdown
+        v-else-if="props.canShowMoreBatchMenu"
+        v-model:popup-visible="moreMenuVisible"
+        class="ms-minder-dropdown"
+        :popup-translate="[0, -4]"
+        position="tl"
+        trigger="hover"
+        @select="(val) => handleMinderMenuSelect(val)"
+      >
+        <a-tooltip :content="t('common.more')">
+          <MsButton
+            type="icon"
+            class="ms-minder-node-float-menu-icon-button"
+            :class="[moreMenuVisible ? 'ms-minder-node-float-menu-icon-button--focus' : '']"
+          >
+            <MsIcon type="icon-icon_more_outlined" class="text-[var(--color-text-4)]" />
+          </MsButton>
+        </a-tooltip>
+        <template #content>
+          <a-doption v-if="props.canShowBatchCopy" value="copy">
+            <div class="flex items-center">
+              <div>{{ t('minder.hotboxMenu.copy') }}</div>
+              <div class="ml-[4px] text-[var(--color-text-4)]">(<MsCtrlOrCommand /> + C)</div>
+            </div>
+          </a-doption>
+          <a-doption v-if="props.canShowBatchCut" value="cut">
+            <div class="flex items-center">
+              <div>{{ t('minder.hotboxMenu.cut') }}</div>
+              <div class="ml-[4px] text-[var(--color-text-4)]">(<MsCtrlOrCommand /> + X)</div>
+            </div>
+          </a-doption>
+          <a-doption v-if="props.canShowBatchDelete" value="delete">
+            <div class="flex items-center">
+              <div>{{ t('minder.hotboxMenu.delete') }}</div>
+              <div class="ml-[4px] text-[var(--color-text-4)]">(Backspace)</div>
+            </div>
+          </a-doption>
+          <a-doption v-if="props.canShowBatchExpand" value="expand">
+            <div class="flex items-center">
+              <div>{{ t('minder.hotboxMenu.expand') }}</div>
+              <div class="ml-[4px] text-[var(--color-text-4)]">(/)</div>
             </div>
           </a-doption>
         </template>
-      </template>
-    </a-dropdown>
-    <slot name="batchMenu"></slot>
-    <a-tooltip v-if="onlyDelete" :content="t('common.delete')">
-      <MsButton type="icon" class="ms-minder-node-float-menu-icon-button" @click="handleMinderMenuSelect('delete')">
-        <MsIcon type="icon-icon_delete-trash_outlined1" class="text-[var(--color-text-4)]" />
-      </MsButton>
-    </a-tooltip>
-    <a-dropdown
-      v-else-if="props.canShowMoreBatchMenu"
-      v-model:popup-visible="moreMenuVisible"
-      class="ms-minder-dropdown"
-      :popup-translate="[0, -4]"
-      position="tl"
-      trigger="hover"
-      @select="(val) => handleMinderMenuSelect(val)"
-    >
-      <a-tooltip :content="t('common.more')">
-        <MsButton
-          type="icon"
-          class="ms-minder-node-float-menu-icon-button"
-          :class="[moreMenuVisible ? 'ms-minder-node-float-menu-icon-button--focus' : '']"
-        >
-          <MsIcon type="icon-icon_more_outlined" class="text-[var(--color-text-4)]" />
-        </MsButton>
-      </a-tooltip>
-      <template #content>
-        <a-doption v-if="props.canShowBatchCopy" value="copy">
-          <div class="flex items-center">
-            <div>{{ t('minder.hotboxMenu.copy') }}</div>
-            <div class="ml-[4px] text-[var(--color-text-4)]">(<MsCtrlOrCommand /> + C)</div>
-          </div>
-        </a-doption>
-        <a-doption v-if="props.canShowBatchCut" value="cut">
-          <div class="flex items-center">
-            <div>{{ t('minder.hotboxMenu.cut') }}</div>
-            <div class="ml-[4px] text-[var(--color-text-4)]">(<MsCtrlOrCommand /> + X)</div>
-          </div>
-        </a-doption>
-        <a-doption v-if="props.canShowBatchDelete" value="delete">
-          <div class="flex items-center">
-            <div>{{ t('minder.hotboxMenu.delete') }}</div>
-            <div class="ml-[4px] text-[var(--color-text-4)]">(Backspace)</div>
-          </div>
-        </a-doption>
-        <a-doption v-if="props.canShowBatchExpand" value="expand">
-          <div class="flex items-center">
-            <div>{{ t('minder.hotboxMenu.expand') }}</div>
-            <div class="ml-[4px] text-[var(--color-text-4)]">(/)</div>
-          </div>
-        </a-doption>
-      </template>
-    </a-dropdown>
-  </div>
+      </a-dropdown>
+    </div>
+  </a-affix>
 </template>
 
 <script setup lang="ts">
@@ -187,12 +194,13 @@
 
 <style lang="less" scoped>
   .ms-minder-batch-menu {
-    @apply absolute flex w-auto flex-1 items-center bg-white;
+    @apply absolute flex w-auto flex-1 items-center;
 
     bottom: 6px;
     left: 50%;
     padding: 4px 8px;
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
     box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
     gap: 8px;
   }