style(测试计划): 功能用例-执行脑图-调整底部批量操作的位置

--bug=1048405 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001048405

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-affix
-    <a-dropdown
+    v-if="batchMenuVisible"
-      v-if="props.priorityCount && props.canShowPriorityMenu"
+    :offset-bottom="32"
-      v-model:popup-visible="priorityMenuVisible"
+    target-container=".page-content"
-      class="ms-minder-dropdown"
+    class="absolute bottom-0 left-[50%]"
-      :popup-translate="[0, 4]"
+  >
-      position="bl"
+    <div class="ms-minder-batch-menu">
-      trigger="click"
+      <a-dropdown
-      @select="(val) => handleMinderMenuSelect('priority', val as string)"
+        v-if="props.priorityCount && props.canShowPriorityMenu"
-    >
+        v-model:popup-visible="priorityMenuVisible"
-      <a-tooltip :content="props.priorityTooltip" :disabled="!props.priorityTooltip">
+        class="ms-minder-dropdown"
-        <MsButton
+        :popup-translate="[0, 4]"
-          type="icon"
+        position="bl"
-          class="ms-minder-node-float-menu-icon-button"
+        trigger="click"
-          :class="[priorityMenuVisible ? 'ms-minder-node-float-menu-icon-button--focus' : '']"
+        @select="(val) => handleMinderMenuSelect('priority', val as string)"
-        >
+      >
-          <div
+        <a-tooltip :content="props.priorityTooltip" :disabled="!props.priorityTooltip">
-            class="h-[16px] w-[16px] rounded-full bg-[rgb(var(--primary-5))] text-center text-[12px] font-medium text-white"
+          <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>
+      <a-dropdown
-        <div v-if="props.priorityTooltip" class="mx-[6px] px-[8px] py-[3px] text-[var(--color-text-4)]">
+        v-else-if="props.canShowMoreBatchMenu"
-          {{ props.priorityTooltip }}
+        v-model:popup-visible="moreMenuVisible"
-        </div>
+        class="ms-minder-dropdown"
-        <template v-for="(item, pIndex) in priorityCount + 1" :key="item">
+        :popup-translate="[0, -4]"
-          <a-doption v-if="pIndex != 0" :value="pIndex">
+        position="tl"
-            <div
+        trigger="hover"
-              class="flex h-[20px] w-[20px] items-center justify-center rounded-full text-[12px] font-medium text-white"
+        @select="(val) => handleMinderMenuSelect(val)"
-              :style="{
+      >
-                backgroundColor: priorityColorMap[pIndex],
+        <a-tooltip :content="t('common.more')">
-              }"
+          <MsButton
-            >
+            type="icon"
-              {{ priorityPrefix }}{{ priorityStartWithZero ? pIndex - 1 : pIndex }}
+            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>
-    </a-dropdown>
+    </div>
-    <slot name="batchMenu"></slot>
+  </a-affix>
-    <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>
 </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;
   }