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

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

@@ -150,6 +150,7 @@ async function handleCategorySortSubmit() {
       v-spinning="modelListSpinning"
     >
       <template #extra>
+        <div v-if="!isCategorySorting">
           <Input
             v-model:value="queryParams.name"
             placeholder="搜索流程"
@@ -185,9 +186,8 @@ async function handleCategorySortSubmit() {
               </Menu>
             </template>
           </Dropdown>
-      </template>
+        </div>
-      <div class="flex h-full items-center justify-between pl-5">
+        <div class="flex h-full items-center justify-between" v-else>
-        <div class="mb-4 mr-6" v-if="isCategorySorting">
           <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
+            <!-- drag-handle 标识可以拖动，不能删掉 -->
-              class="icon-[ic--round-drag-indicator] ml-2.5 cursor-move text-2xl text-gray-500"
+            <IconifyIcon
-            ></span>
+              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,10 +586,12 @@ function handleRenameSuccess() {
                   class="mr-2.5 h-9 w-9 flex-shrink-0 rounded"
                   alt="图标"
                 />
-                <EllipsisText :max-width="160" :tooltip-when-ellipsis="true">
+                <div class="min-w-0 overflow-hidden">
+                  <EllipsisText :tooltip-when-ellipsis="true">
                     {{ row.name }}
                   </EllipsisText>
                 </div>
+              </div>
             </template>
             <template #startUserIds="{ row }">
               <span v-if="!row.startUsers?.length && !row.startDepts?.length">