feat: [antd] [bpm] 流程模型排序代码评审修改

apps/web-antd/src/views/bpm/model/index.vue

@@ -150,44 +150,44 @@ async function handleCategorySortSubmit() {
       v-spinning="modelListSpinning"
     >
       <template #extra>
-        <Input
-          v-model:value="queryParams.name"
-          placeholder="搜索流程"
-          allow-clear
-          @press-enter="getList"
-          class="!w-60"
-        />
-        <Button class="ml-2" type="primary" @click="createModel">
-          <IconifyIcon icon="lucide:plus" /> 新建模型
-        </Button>
-        <Dropdown class="ml-2" placement="bottomRight" arrow>
-          <Button>
-            <template #icon>
-              <div class="flex items-center justify-center">
-                <IconifyIcon icon="lucide:settings" />
-              </div>
-            </template>
+        <div v-if="!isCategorySorting">
+          <Input
+            v-model:value="queryParams.name"
+            placeholder="搜索流程"
+            allow-clear
+            @press-enter="getList"
+            class="!w-60"
+          />
+          <Button class="ml-2" type="primary" @click="createModel">
+            <IconifyIcon icon="lucide:plus" /> 新建模型
           </Button>
-          <template #overlay>
-            <Menu @click="(e) => handleCommand(e.key as string)">
-              <Menu.Item key="handleCategoryAdd">
-                <div class="flex items-center gap-1">
-                  <IconifyIcon icon="lucide:plus" />
-                  新建分类
+          <Dropdown class="ml-2" placement="bottomRight" arrow>
+            <Button>
+              <template #icon>
+                <div class="flex items-center justify-center">
+                  <IconifyIcon icon="lucide:settings" />
                 </div>
-              </Menu.Item>
-              <Menu.Item key="handleCategorySort">
-                <div class="flex items-center gap-1">
-                  <IconifyIcon icon="lucide:align-start-vertical" />
-                  分类排序
-                </div>
-              </Menu.Item>
-            </Menu>
-          </template>
-        </Dropdown>
-      </template>
-      <div class="flex h-full items-center justify-between pl-5">
-        <div class="mb-4 mr-6" v-if="isCategorySorting">
+              </template>
+            </Button>
+            <template #overlay>
+              <Menu @click="(e) => handleCommand(e.key as string)">
+                <Menu.Item key="handleCategoryAdd">
+                  <div class="flex items-center gap-1">
+                    <IconifyIcon icon="lucide:plus" />
+                    新建分类
+                  </div>
+                </Menu.Item>
+                <Menu.Item key="handleCategorySort">
+                  <div class="flex items-center gap-1">
+                    <IconifyIcon icon="lucide:align-start-vertical" />
+                    分类排序
+                  </div>
+                </Menu.Item>
+              </Menu>
+            </template>
+          </Dropdown>
+        </div>
+        <div class="flex h-full items-center justify-between" v-else>
           <Button @click="handleCategorySortCancel" class="mr-3">
             取 消
           </Button>
@@ -199,7 +199,7 @@ async function handleCategorySortSubmit() {
             保存排序
           </Button>
         </div>
-      </div>
+      </template>
 
       <!-- 按照分类，展示其所属的模型列表 -->
       <div class="px-3" ref="categoryGroupRef">

apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

@@ -12,7 +12,6 @@ import { IconifyIcon } from '@vben/icons';
 import { useUserStore } from '@vben/stores';
 import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';
 
-// TODO @jason：某个模型下的排序功能，无法使用。操作流程：模型分类 A 的右侧【排序】，然后，无法拖拽使用；
 import { useDebounceFn } from '@vueuse/core';
 import { useSortable } from '@vueuse/integrations/useSortable';
 import {
@@ -65,7 +64,7 @@ const userId = useUserStore().userInfo?.id;
 const isModelSorting = ref(false);
 const originalData = ref<BpmModelApi.Model[]>([]);
 const modelList = ref<BpmModelApi.Model[]>([]);
-// TODO @jason：可以全部展开么？
+// TODO @jason：可以全部展开么？ @芋艿 上次讨论。好像是因为性能问题才只展开第一个分类
 const isExpand = ref(props.isFirst); // 根据是否为第一个分类, 来设置初始展开状态
 
 const sortableInstance = ref<any>(null); // 排序引用，以便后续启用或禁用排序
@@ -464,12 +463,14 @@ function handleRenameSuccess() {
     >
       <div class="flex h-12 items-center">
         <!-- 头部：分类名 -->
-        <!-- TODO @jason：1）无法拖动排序；2）拖动后，直接请求排序，不用有个【保存】；排序模型分类，和排序分类里的模型，交互有点不同哈。 -->
+        <!-- TODO @jason：2）拖动后，直接请求排序，不用有个【保存】；排序模型分类，和排序分类里的模型，交互有点不同哈。@芋艿 好像 yudao-ui-admin-vue3 交互也是这样的，需要改吗? -->
         <div class="flex items-center">
           <Tooltip v-if="isCategorySorting" title="拖动排序">
-            <span
-              class="icon-[ic--round-drag-indicator] ml-2.5 cursor-move text-2xl text-gray-500"
-            ></span>
+            <!-- drag-handle 标识可以拖动，不能删掉 -->
+            <IconifyIcon
+              icon="ic:round-drag-indicator"
+              class="drag-handle ml-2.5 cursor-move text-2xl text-gray-500"
+            />
           </Tooltip>
           <div class="ml-4 mr-2 text-lg font-medium">
             {{ categoryInfo.name }}
@@ -559,15 +560,16 @@ function handleRenameSuccess() {
             :class="`category-${categoryInfo.id}`"
           >
             <template #name="{ row }">
-              <div class="flex items-center">
+              <div class="flex items-center overflow-hidden">
                 <Tooltip
                   v-if="isModelSorting"
                   title="拖动排序"
                   placement="left"
                 >
+                  <!-- drag-handle 标识用于推动排序。 useSortable 用到 -->
                   <IconifyIcon
                     icon="ic:round-drag-indicator"
-                    class="mr-2.5 cursor-move text-2xl text-gray-500"
+                    class="drag-handle mr-2.5 flex-shrink-0 cursor-move text-2xl text-gray-500"
                   />
                 </Tooltip>
                 <div
@@ -584,9 +586,11 @@ function handleRenameSuccess() {
                   class="mr-2.5 h-9 w-9 flex-shrink-0 rounded"
                   alt="图标"
                 />
-                <EllipsisText :max-width="160" :tooltip-when-ellipsis="true">
-                  {{ row.name }}
-                </EllipsisText>
+                <div class="min-w-0 overflow-hidden">
+                  <EllipsisText :tooltip-when-ellipsis="true">
+                    {{ row.name }}
+                  </EllipsisText>
+                </div>
               </div>
             </template>
             <template #startUserIds="{ row }">