diff --git a/apps/web-antd/src/views/bpm/model/form/modules/custom-print-template.vue b/apps/web-antd/src/views/bpm/model/form/modules/custom-print-template.vue
index ca18c1216..7133eb252 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/custom-print-template.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/custom-print-template.vue
@@ -6,7 +6,7 @@ import { computed, onBeforeUnmount, ref, shallowRef } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 
 import Editor from '@tinymce/tinymce-vue';
-import { Alert, Button } from 'ant-design-vue';
+import { Alert } from 'ant-design-vue';
 
 import { setupTinyPlugins } from './tinymce-plugin';
 
@@ -19,11 +19,14 @@ const props = withDefaults(
   },
 );
 
+const emits = defineEmits<{
+  (e: 'confirm', value: string): void;
+}>();
+
 /** TinyMCE 自托管：https://www.jianshu.com/p/59a9c3802443 */
 const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
 
 const [Modal, modalApi] = useVbenModal({
-  footer: false,
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
@@ -40,15 +43,12 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
+  onConfirm() {
+    emits('confirm', valueHtml.value);
+    modalApi.close();
+  },
 });
 
-const handleConfirm = () => {
-  /** 通过 setData 传递确认的数据，在父组件的 onConfirm 中获取 */
-  modalApi.setData({ confirmedTemplate: valueHtml.value as string });
-  modalApi.onConfirm();
-  modalApi.close();
-};
-
 const mentionList = computed<MentionItem[]>(() => {
   const base: MentionItem[] = [
     { id: 'startUser', name: '发起人' },
@@ -99,7 +99,6 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <!-- TODO @jason：a-button 改成 Modal 自带的 onConfirm 替代；= = 我貌似试着改了下，有点问题，略奇怪 -->
   <Modal class="w-3/4" title="自定义模板">
     <div class="mb-3">
       <Alert
@@ -114,11 +113,5 @@ onBeforeUnmount(() => {
       :tinymce-script-src="tinymceScriptSrc"
       license-key="gpl"
     />
-    <template #footer>
-      <div class="flex justify-end gap-2">
-        <Button @click="modalApi.onCancel()">取 消</Button>
-        <Button type="primary" @click="handleConfirm">确 定</Button>
-      </div>
-    </template>
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue b/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
index af725817d..b2d7c2eb0 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
@@ -266,23 +266,14 @@ async function validate() {
 const [PrintTemplateModal, printTemplateModalApi] = useVbenModal({
   connectedComponent: PrintTemplate,
   destroyOnClose: true,
-  onConfirm() {
-    // 会在内部模态框中设置数据，这里获取数据， 内部模态框中不能有 onConfirm 方法
-    const { confirmedTemplate } = printTemplateModalApi.getData<{
-      confirmedTemplate: string;
-    }>();
-    if (confirmedTemplate !== undefined) {
-      modelData.value.printTemplateSetting.template = confirmedTemplate;
-    }
-  },
 });
 
 /** 弹出自定义打印模板弹窗 */
-const openPrintTemplateModal = () => {
+function openPrintTemplateModal() {
   printTemplateModalApi
     .setData({ template: modelData.value.printTemplateSetting.template })
     .open();
-};
+}
 
 /** 默认的打印模板， 目前自定义模板没有引入自定义样式。 看后续是否需要 */
 const defaultTemplate = `<p style="text-align: center;font-size: 1.25rem;"><strong><span data-w-e-type="mention" data-value="流程名称" data-info="%7B%22id%22%3A%22processName%22%7D">@流程名称</span></strong></p>
@@ -341,6 +332,10 @@ function handlePrintTemplateEnableChange(checked: any) {
   }
 }
 
+function confirmPrintTemplate(template: string) {
+  modelData.value.printTemplateSetting.template = template;
+}
+
 defineExpose({ initData, validate });
 </script>
 <template>
@@ -625,6 +620,9 @@ defineExpose({ initData, validate });
         </div>
       </div>
     </FormItem>
-    <PrintTemplateModal :form-fields="formFields" />
+    <PrintTemplateModal
+      :form-fields="formFields"
+      @confirm="confirmPrintTemplate"
+    />
   </Form>
 </template>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue
index 2759edf23..487c7b442 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/process-print.vue
@@ -233,7 +233,6 @@ function getPrintTemplateHTML() {
               </td>
               <td class="w-1/4 border border-black p-1.5">发起时间</td>
               <td class="w-1/4 border border-black p-1.5">
-                <!-- TODO @jason：这里会告警呢 TODO @芋艿 我这边不会有警告呀 -->
                 {{ formatDate(printData.processInstance.startTime) }}
               </td>
             </tr>
diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts
index 27917454f..c93703bbb 100644
--- a/apps/web-ele/src/adapter/vxe-table.ts
+++ b/apps/web-ele/src/adapter/vxe-table.ts
@@ -85,6 +85,10 @@ setupVbenVxeTable({
           src,
           previewSrcList: [src],
           class: props?.class,
+          style: {
+            width: props?.width ? `${props.width}px` : undefined,
+            height: props?.height ? `${props.height}px` : undefined,
+          },
           previewTeleported: true,
         });
       },
diff --git a/apps/web-ele/src/router/routes/modules/bpm.ts b/apps/web-ele/src/router/routes/modules/bpm.ts
index d732af975..c895a34ee 100644
--- a/apps/web-ele/src/router/routes/modules/bpm.ts
+++ b/apps/web-ele/src/router/routes/modules/bpm.ts
@@ -9,24 +9,24 @@ const routes: RouteRecordRaw[] = [
       hideInMenu: true,
     },
     children: [
-      // {
-      //   path: 'task',
-      //   name: 'BpmTask',
-      //   meta: {
-      //     title: '审批中心',
-      //     icon: 'ant-design:history-outlined',
-      //   },
-      //   children: [
-      //     {
-      //       path: 'my',
-      //       name: 'BpmTaskMy',
-      //       component: () => import('#/views/bpm/processInstance/index.vue'),
-      //       meta: {
-      //         title: '我的流程',
-      //       },
-      //     },
-      //   ],
-      // },
+      {
+        path: 'task',
+        name: 'BpmTask',
+        meta: {
+          title: '审批中心',
+          icon: 'ant-design:history-outlined',
+        },
+        children: [
+          {
+            path: 'my',
+            name: 'BpmTaskMy',
+            component: () => import('#/views/bpm/processInstance/index.vue'),
+            meta: {
+              title: '我的流程',
+            },
+          },
+        ],
+      },
       // {
       //   path: 'process-instance/detail',
       //   component: () => import('#/views/bpm/processInstance/detail/index.vue'),
@@ -86,18 +86,18 @@ const routes: RouteRecordRaw[] = [
       //     keepAlive: true,
       //   },
       // },
-      // {
-      //   path: 'manager/definition',
-      //   component: () => import('#/views/bpm/model/definition/index.vue'),
-      //   name: 'BpmProcessDefinition',
-      //   meta: {
-      //     title: '流程定义',
-      //     activePath: '/bpm/manager/model',
-      //     icon: 'carbon:flow-modeler',
-      //     hideInMenu: true,
-      //     keepAlive: true,
-      //   },
-      // },
+      {
+        path: 'manager/definition',
+        component: () => import('#/views/bpm/model/definition/index.vue'),
+        name: 'BpmProcessDefinition',
+        meta: {
+          title: '流程定义',
+          activePath: '/bpm/manager/model',
+          icon: 'carbon:flow-modeler',
+          hideInMenu: true,
+          keepAlive: true,
+        },
+      },
       {
         path: 'process-instance/report',
         component: () => import('#/views/bpm/processInstance/report/index.vue'),
diff --git a/apps/web-ele/src/views/bpm/model/data.ts b/apps/web-ele/src/views/bpm/model/data.ts
new file mode 100644
index 000000000..59405e77a
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/data.ts
@@ -0,0 +1,49 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmModelApi } from '#/api/bpm/model';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<BpmModelApi.Model>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '流程名称',
+      minWidth: 200,
+      slots: { default: 'name' },
+    },
+    {
+      field: 'startUserIds',
+      title: '可见范围',
+      minWidth: 150,
+      slots: { default: 'startUserIds' },
+    },
+    {
+      field: 'type',
+      title: '流程类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_MODEL_TYPE },
+      },
+    },
+    {
+      field: 'formType',
+      title: '表单信息',
+      minWidth: 150,
+      slots: { default: 'formInfo' },
+    },
+    {
+      field: 'deploymentTime',
+      title: '最后发布',
+      minWidth: 280,
+      slots: { default: 'deploymentTime' },
+    },
+    {
+      title: '操作',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/model/definition/data.ts b/apps/web-ele/src/views/bpm/model/definition/data.ts
new file mode 100644
index 000000000..c5dff8010
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/definition/data.ts
@@ -0,0 +1,73 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '定义编号',
+      minWidth: 250,
+    },
+    {
+      field: 'name',
+      title: '流程名称',
+      minWidth: 150,
+    },
+    {
+      field: 'icon',
+      title: '流程图标',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          width: 32,
+          height: 32,
+          class: 'rounded',
+        },
+      },
+    },
+    {
+      field: 'startUsers',
+      title: '可见范围',
+      minWidth: 100,
+      slots: { default: 'startUsers' },
+    },
+    {
+      field: 'modelType',
+      title: '流程类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_MODEL_TYPE },
+      },
+    },
+    {
+      field: 'formType',
+      title: '表单信息',
+      minWidth: 150,
+      slots: { default: 'formInfo' },
+    },
+    {
+      field: 'version',
+      title: '流程版本',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellTag',
+      },
+    },
+    {
+      field: 'deploymentTime',
+      title: '部署时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/model/definition/index.vue b/apps/web-ele/src/views/bpm/model/definition/index.vue
new file mode 100644
index 000000000..7934c7617
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/definition/index.vue
@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
+
+import { onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { BpmModelFormType } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElTooltip } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessDefinitionPage } from '#/api/bpm/definition';
+
+import FormCreateDetail from '../../form/modules/detail.vue';
+import { useGridColumns } from './data';
+
+defineOptions({ name: 'BpmProcessDefinition' });
+
+const route = useRoute();
+const router = useRouter();
+
+const [FormCreateDetailModal, formCreateDetailModalApi] = useVbenModal({
+  connectedComponent: FormCreateDetail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看表单详情 */
+async function handleFormDetail(
+  row: BpmProcessDefinitionApi.ProcessDefinition,
+) {
+  if (row.formType === BpmModelFormType.NORMAL) {
+    const data = {
+      id: row.formId,
+    };
+    formCreateDetailModalApi.setData(data).open();
+  } else {
+    await router.push({
+      path: row.formCustomCreatePath,
+    });
+  }
+}
+
+/** 恢复流程模型 */
+async function handleRecover(row: BpmProcessDefinitionApi.ProcessDefinition) {
+  await router.push({
+    name: 'BpmModelUpdate',
+    params: { id: row.id, type: 'definition' },
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getProcessDefinitionPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            key: route.query.key as string,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<BpmProcessDefinitionApi.ProcessDefinition>,
+});
+
+/** 初始化 */
+onMounted(() => {
+  handleRefresh();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormCreateDetailModal />
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
+    <Grid table-title="流程定义列表">
+      <template #startUsers="{ row }">
+        <template v-if="!row.startUsers || row.startUsers.length === 0">
+          全部可见
+        </template>
+        <template v-else-if="row.startUsers.length === 1">
+          {{ row.startUsers[0]!.nickname }}
+        </template>
+        <template v-else>
+          <ElTooltip
+            placement="top"
+            :content="
+              row.startUsers.map((user: any) => user.nickname).join(',')
+            "
+          >
+            {{ row.startUsers[0]!.nickname }}等
+            {{ row.startUsers.length }} 人可见
+          </ElTooltip>
+        </template>
+      </template>
+      <template #formInfo="{ row }">
+        <ElButton
+          v-if="row.formType === BpmModelFormType.NORMAL"
+          link
+          @click="handleFormDetail(row)"
+        >
+          <IconifyIcon icon="lucide:file-text" class="mr-1" />
+          <span>{{ row.formName }}</span>
+        </ElButton>
+        <ElButton
+          v-else-if="row.formType === BpmModelFormType.CUSTOM"
+          link
+          @click="handleFormDetail(row)"
+        >
+          <IconifyIcon icon="lucide:file-code" class="mr-1" />
+          <span>{{ row.formCustomCreatePath }}</span>
+        </ElButton>
+        <span v-else>暂无表单</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '恢复',
+              icon: 'lucide:undo-2',
+              link: true,
+              auth: ['bpm:model:update'],
+              onClick: handleRecover.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/index.vue b/apps/web-ele/src/views/bpm/model/index.vue
new file mode 100644
index 000000000..e66062b6b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/index.vue
@@ -0,0 +1,220 @@
+<script lang="ts" setup>
+import type { ModelCategoryInfo } from '#/api/bpm/model';
+
+import { onActivated, reactive, ref, useTemplateRef, watch } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { useSortable } from '@vueuse/integrations/useSortable';
+import { ElButton, ElCard, ElDropdown, ElInput, ElMessage } from 'element-plus';
+
+import {
+  getCategorySimpleList,
+  updateCategorySortBatch,
+} from '#/api/bpm/category';
+import { getModelList } from '#/api/bpm/model';
+import { router } from '#/router';
+
+import CategoryForm from '../category/modules/form.vue';
+import CategoryDraggableModel from './modules/category-draggable-model.vue';
+
+const [CategoryFormModal, categoryFormModalApi] = useVbenModal({
+  connectedComponent: CategoryForm,
+  destroyOnClose: true,
+});
+
+const modelListSpinning = ref(false); // 模型列表加载状态
+
+const saveSortLoading = ref(false); // 保存排序状态
+const categoryGroup = ref<ModelCategoryInfo[]>([]); // 按照 category 分组的数据
+const originalData = ref<ModelCategoryInfo[]>([]); // 未排序前的原始数据
+
+const sortable = useTemplateRef<HTMLElement>('categoryGroupRef'); // 可以排序元素的容器
+const sortableInstance = ref<any>(null); // 排序引用，以便后续启用或禁用排序
+const isCategorySorting = ref(false); // 分类排序状态
+
+const queryParams = reactive({
+  name: '',
+}); // 查询参数
+
+/** 监听分类排序模式切换 */
+watch(
+  () => isCategorySorting.value,
+  (newValue) => {
+    if (sortableInstance.value) {
+      if (newValue) {
+        // 启用排序功能
+        sortableInstance.value.option('disabled', false);
+      } else {
+        // 禁用排序功能
+        sortableInstance.value.option('disabled', true);
+      }
+    }
+  },
+);
+
+/** 加载数据 */
+async function getList() {
+  modelListSpinning.value = true;
+  try {
+    const modelList = await getModelList(queryParams.name);
+    const categoryList = await getCategorySimpleList();
+    // 按照 category 聚合
+    categoryGroup.value = categoryList.map((category: any) => ({
+      ...category,
+      modelList: modelList.filter(
+        (model: any) => model.categoryName === category.name,
+      ),
+    }));
+    // 重置排序实例
+    sortableInstance.value = null;
+  } finally {
+    modelListSpinning.value = false;
+  }
+}
+
+/** 初始化 */
+onActivated(() => {
+  getList();
+});
+
+/** 新增模型 */
+function createModel() {
+  router.push({
+    name: 'BpmModelCreate',
+  });
+}
+
+/** 处理下拉菜单命令 */
+function handleCommand(command: string) {
+  if (command === 'handleCategoryAdd') {
+    // 打开新建流程分类弹窗
+    categoryFormModalApi.open();
+  } else if (command === 'handleCategorySort') {
+    originalData.value = cloneDeep(categoryGroup.value);
+    isCategorySorting.value = true;
+    // 如果排序实例不存在，则初始化
+    if (sortableInstance.value) {
+      // 已存在实例，则启用排序功能
+      sortableInstance.value.option('disabled', false);
+    } else {
+      sortableInstance.value = useSortable(sortable, categoryGroup, {
+        disabled: false, // 启用排序
+      });
+    }
+  }
+}
+
+/** 取消分类排序 */
+function handleCategorySortCancel() {
+  // 恢复初始数据
+  categoryGroup.value = cloneDeep(originalData.value);
+  isCategorySorting.value = false;
+  // 直接禁用排序功能
+  if (sortableInstance.value) {
+    sortableInstance.value.option('disabled', true);
+  }
+}
+
+/** 提交分类排序 */
+async function handleCategorySortSubmit() {
+  saveSortLoading.value = true;
+  try {
+    // 保存排序逻辑
+    const ids = categoryGroup.value.map((item: any) => item.id);
+    await updateCategorySortBatch(ids);
+    ElMessage.success('分类排序成功');
+  } finally {
+    saveSortLoading.value = false;
+  }
+  isCategorySorting.value = false;
+  // 刷新列表
+  await getList();
+  // 禁用排序功能
+  if (sortableInstance.value) {
+    sortableInstance.value.option('disabled', true);
+  }
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 流程分类表单弹窗 -->
+    <CategoryFormModal @success="getList" />
+    <ElCard
+      body-style="padding: 10px"
+      class="mb-4"
+      v-loading="modelListSpinning"
+    >
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span>流程模型</span>
+          <div v-if="!isCategorySorting">
+            <ElInput
+              v-model="queryParams.name"
+              placeholder="搜索流程"
+              clearable
+              @keyup.enter="getList"
+              class="!w-60"
+            />
+            <ElButton class="ml-2" type="primary" @click="createModel">
+              <IconifyIcon icon="lucide:plus" /> 新建模型
+            </ElButton>
+            <ElDropdown class="ml-2" placement="bottom-end" trigger="click">
+              <ElButton>
+                <div class="flex items-center justify-center">
+                  <IconifyIcon icon="lucide:settings" />
+                </div>
+              </ElButton>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="handleCommand('handleCategoryAdd')">
+                    <div class="flex items-center gap-1">
+                      <IconifyIcon icon="lucide:plus" />
+                      新建分类
+                    </div>
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    @click="handleCommand('handleCategorySort')"
+                  >
+                    <div class="flex items-center gap-1">
+                      <IconifyIcon icon="lucide:align-start-vertical" />
+                      分类排序
+                    </div>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </ElDropdown>
+          </div>
+          <div class="flex h-full items-center justify-between" v-else>
+            <ElButton @click="handleCategorySortCancel" class="mr-3">
+              取 消
+            </ElButton>
+            <ElButton
+              type="primary"
+              :loading="saveSortLoading"
+              @click="handleCategorySortSubmit"
+            >
+              保存排序
+            </ElButton>
+          </div>
+        </div>
+      </template>
+
+      <!-- 按照分类，展示其所属的模型列表 -->
+      <div class="px-3" ref="categoryGroupRef">
+        <CategoryDraggableModel
+          v-for="(element, index) in categoryGroup"
+          :class="isCategorySorting ? 'cursor-move' : ''"
+          :key="element.id"
+          :category-info="element"
+          :is-category-sorting="isCategorySorting"
+          :is-first="index === 0"
+          @success="getList"
+        />
+      </div>
+    </ElCard>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/bpm/model/modules/category-draggable-model.vue b/apps/web-ele/src/views/bpm/model/modules/category-draggable-model.vue
new file mode 100644
index 000000000..575f81f21
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/model/modules/category-draggable-model.vue
@@ -0,0 +1,750 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmModelApi, ModelCategoryInfo } from '#/api/bpm/model';
+
+import { computed, ref, watchEffect } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useAccess } from '@vben/access';
+import { confirm, EllipsisText, useVbenModal } from '@vben/common-ui';
+import { BpmModelFormType } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { useUserStore } from '@vben/stores';
+import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';
+
+import { useDebounceFn } from '@vueuse/core';
+import { useSortable } from '@vueuse/integrations/useSortable';
+import {
+  ElButton,
+  ElCard,
+  ElCollapse,
+  ElCollapseItem,
+  ElDropdown,
+  ElLoading,
+  ElMessage,
+  ElTag,
+  ElTooltip,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteCategory } from '#/api/bpm/category';
+import {
+  cleanModel,
+  deleteModel,
+  deployModel,
+  updateModelSortBatch,
+  updateModelState,
+} from '#/api/bpm/model';
+import { $t } from '#/locales';
+
+import CategoryRenameForm from '../../category/modules/rename-form.vue';
+import FormCreateDetail from '../../form/modules/detail.vue';
+import { useGridColumns } from '../data';
+
+const props = defineProps<{
+  categoryInfo: ModelCategoryInfo;
+  isCategorySorting: boolean;
+  isFirst?: boolean; // 是否为第一个分类
+}>();
+
+const emit = defineEmits(['success']);
+
+const [CategoryRenameModal, categoryRenameModalApi] = useVbenModal({
+  connectedComponent: CategoryRenameForm,
+  destroyOnClose: true,
+});
+
+const [FormCreateDetailModal, formCreateDetailModalApi] = useVbenModal({
+  connectedComponent: FormCreateDetail,
+  destroyOnClose: true,
+});
+
+const router = useRouter();
+const userId = useUserStore().userInfo?.id;
+
+const isModelSorting = ref(false);
+const originalData = ref<BpmModelApi.Model[]>([]);
+const modelList = ref<BpmModelApi.Model[]>([]);
+// TODO @jason：可以全部展开么？ @芋艿 上次讨论。好像是因为性能问题才只展开第一个分类
+const isExpand = ref(props.isFirst); // 根据是否为第一个分类, 来设置初始展开状态
+
+const sortableInstance = ref<any>(null); // 排序引用，以便后续启用或禁用排序
+/** 解决 v-model 问题，使用计算属性 */
+const expandKeys = computed(() => (isExpand.value ? ['1'] : []));
+
+const { hasAccessByCodes } = useAccess();
+/** 权限校验：通过 computed 解决列表的卡顿问题 */
+const hasPermiUpdate = computed(() => {
+  return hasAccessByCodes(['bpm:model:update']);
+});
+const hasPermiDelete = computed(() => {
+  return hasAccessByCodes(['bpm:model:delete']);
+});
+const hasPermiDeploy = computed(() => {
+  return hasAccessByCodes(['bpm:model:deploy']);
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    data: modelList.value,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions,
+});
+
+/** 处理模型的排序 */
+function handleModelSort() {
+  // 保存初始数据并确保数据完整
+  if (props.categoryInfo.modelList && props.categoryInfo.modelList.length > 0) {
+    originalData.value = cloneDeep(props.categoryInfo.modelList);
+    modelList.value = cloneDeep(props.categoryInfo.modelList);
+  }
+
+  // 更新表格数据
+  gridApi.setGridOptions({
+    data: modelList.value,
+  });
+
+  // 展开数据
+  isExpand.value = true;
+  isModelSorting.value = true;
+  // 如果排序实例不存在，则初始化
+  if (sortableInstance.value) {
+    // 已存在实例，则启用排序功能
+    sortableInstance.value.option('disabled', false);
+  } else {
+    // 确保使用最新的数据
+    modelList.value = cloneDeep(props.categoryInfo.modelList);
+    // 更新表格数据
+    gridApi.setGridOptions({
+      data: modelList.value,
+    });
+
+    sortableInstance.value = useSortable(
+      `.category-${props.categoryInfo.id} .vxe-table .vxe-table--body-wrapper:not(.fixed-right--wrapper) .vxe-table--body tbody`,
+      modelList.value,
+      {
+        draggable: '.vxe-body--row',
+        animation: 150,
+        handle: '.drag-handle',
+        disabled: false,
+        onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
+          if (oldDraggableIndex !== newDraggableIndex) {
+            modelList.value.splice(
+              newDraggableIndex ?? 0,
+              0,
+              modelList.value.splice(oldDraggableIndex ?? 0, 1)[0]!,
+            );
+          }
+        },
+      },
+    );
+  }
+}
+
+/** 处理模型的排序提交 */
+async function handleModelSortSubmit() {
+  // 确保数据已经正确同步
+  if (!modelList.value || modelList.value.length === 0) {
+    ElMessage.error('排序数据异常，请重试');
+    return;
+  }
+
+  const loadingInstance = ElLoading.service({
+    text: '正在保存排序...',
+  });
+  try {
+    // 保存排序
+    const ids = modelList.value.map((item) => item.id);
+    await updateModelSortBatch(ids);
+    // 刷新列表
+    isModelSorting.value = false;
+    ElMessage.success('排序模型成功');
+    emit('success');
+  } catch (error) {
+    console.error('排序保存失败', error);
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 处理模型的排序取消 */
+function handleModelSortCancel() {
+  // 恢复初始数据
+  if (originalData.value && originalData.value.length > 0) {
+    modelList.value = cloneDeep(originalData.value);
+    // 更新表格数据
+    gridApi.setGridOptions({
+      data: modelList.value,
+    });
+  }
+  // 禁用排序功能
+  if (sortableInstance.value) {
+    sortableInstance.value.option('disabled', true);
+  }
+  isModelSorting.value = false;
+}
+
+/** 处理下拉菜单命令 */
+function handleCommand(command: string) {
+  if (command === 'renameCategory') {
+    // 打开重命名分类对话框
+    categoryRenameModalApi.setData(props.categoryInfo).open();
+  } else if (command === 'deleteCategory') {
+    handleDeleteCategory();
+  }
+}
+
+/** 删除流程分类 */
+async function handleDeleteCategory() {
+  if (props.categoryInfo.modelList.length > 0) {
+    ElMessage.warning('该分类下仍有流程定义,不允许删除');
+    return;
+  }
+
+  await confirm({
+    beforeClose: async ({ isConfirm }) => {
+      if (!isConfirm) return;
+      // 发起删除
+      const loadingInstance = ElLoading.service({
+        text: `正在删除分类: "${props.categoryInfo.name}"...`,
+      });
+      try {
+        await deleteCategory(props.categoryInfo.id);
+      } finally {
+        loadingInstance.close();
+      }
+      return true;
+    },
+    content: `确定要删除[${props.categoryInfo.name}]吗？`,
+    icon: 'question',
+  });
+  ElMessage.success(
+    $t('ui.actionMessage.deleteSuccess', [props.categoryInfo.name]),
+  );
+  // 刷新列表
+  emit('success');
+}
+
+/** 处理表单详情点击 */
+async function handleFormDetail(row: any) {
+  if (row.formType === BpmModelFormType.NORMAL) {
+    const data = {
+      id: row.formId,
+    };
+    formCreateDetailModalApi.setData(data).open();
+  } else {
+    await router.push({
+      path: row.formCustomCreatePath,
+    });
+  }
+}
+
+/** 判断是否是流程管理员 */
+function isManagerUser(row: any) {
+  return row.managerUserIds && row.managerUserIds.includes(userId);
+}
+
+/** 模型操作 */
+async function modelOperation(type: string, id: number) {
+  await router.push({
+    name: 'BpmModelUpdate',
+    params: { id, type },
+  });
+}
+
+/** 发布流程 */
+async function handleDeploy(row: any) {
+  await confirm({
+    beforeClose: async ({ isConfirm }) => {
+      if (!isConfirm) return;
+      // 发起部署
+      const loadingInstance = ElLoading.service({
+        text: `正在发布流程: "${row.name}"...`,
+      });
+      try {
+        await deployModel(row.id);
+      } finally {
+        loadingInstance.close();
+      }
+      return true;
+    },
+    content: `确认要发布[${row.name}]流程吗？`,
+    icon: 'question',
+  });
+  ElMessage.success(`发布[${row.name}]流程成功`);
+  // 刷新列表
+  emit('success');
+}
+
+/** '更多'操作按钮 */
+function handleModelCommand(command: string, row: any) {
+  switch (command) {
+    case 'handleChangeState': {
+      handleChangeState(row);
+      break;
+    }
+    case 'handleClean': {
+      handleClean(row);
+      break;
+    }
+    case 'handleCopy': {
+      modelOperation('copy', row.id);
+      break;
+    }
+    case 'handleDefinitionList': {
+      handleDefinitionList(row);
+      break;
+    }
+    case 'handleDelete': {
+      handleDelete(row);
+      break;
+    }
+    case 'handleReport': {
+      handleReport(row);
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+
+/** 更新状态操作 */
+async function handleChangeState(row: any) {
+  const state = row.processDefinition.suspensionState;
+  const newState = state === 1 ? 2 : 1;
+  const statusState = state === 1 ? '停用' : '启用';
+  await confirm({
+    beforeClose: async ({ isConfirm }) => {
+      if (!isConfirm) return;
+      // 发起更新状态
+      const loadingInstance = ElLoading.service({
+        text: `正在${statusState}流程: "${row.name}"...`,
+      });
+      try {
+        await updateModelState(row.id, newState);
+      } finally {
+        loadingInstance.close();
+      }
+      return true;
+    },
+    content: `确认要${statusState}流程: "${row.name}" 吗？`,
+    icon: 'question',
+  });
+  ElMessage.success(`${statusState} 流程: "${row.name}" 成功`);
+  // 刷新列表
+  emit('success');
+}
+
+/** 清理流程操作 */
+async function handleClean(row: any) {
+  await confirm({
+    beforeClose: async ({ isConfirm }) => {
+      if (!isConfirm) return;
+      // 发起清理操作
+      const loadingInstance = ElLoading.service({
+        text: `正在清理流程: "${row.name}"...`,
+      });
+      try {
+        await cleanModel(row.id);
+      } finally {
+        loadingInstance.close();
+      }
+      return true;
+    },
+    content: `确认要清理流程: "${row.name}" 吗？`,
+    icon: 'question',
+  });
+  ElMessage.success(`清理流程: "${row.name}" 成功`);
+  // 刷新列表
+  emit('success');
+}
+
+/** 删除流程操作 */
+async function handleDelete(row: any) {
+  await confirm({
+    beforeClose: async ({ isConfirm }) => {
+      if (!isConfirm) return;
+      // 发起删除操作
+      const loadingInstance = ElLoading.service({
+        text: $t('ui.actionMessage.deleting', [row.name]),
+      });
+      try {
+        await deleteModel(row.id);
+      } finally {
+        loadingInstance.close();
+      }
+      return true;
+    },
+    content: `确认要删除流程: "${row.name}" 吗？`,
+    icon: 'question',
+  });
+
+  ElMessage.success(`删除流程: "${row.name}" 成功`);
+  // 刷新列表
+  emit('success');
+}
+
+/** 跳转到指定流程定义列表 */
+function handleDefinitionList(row: any) {
+  router.push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key,
+    },
+  });
+}
+
+/** 跳转到流程报表页面 */
+function handleReport(row: any) {
+  router.push({
+    name: 'BpmProcessInstanceReport',
+    query: {
+      processDefinitionId: row.processDefinition.id,
+      processDefinitionKey: row.key,
+    },
+  });
+}
+
+/** 更新 modelList 模型列表 */
+const updateModelList = useDebounceFn(() => {
+  const newModelList = props.categoryInfo.modelList;
+  if (!isEqual(modelList.value, newModelList)) {
+    modelList.value = cloneDeep(newModelList);
+    // 不再自动设置展开状态，除非是第一个分类
+    // 关闭排序
+    isModelSorting.value = false;
+    // 重置排序实例
+    sortableInstance.value = null;
+    // 更新表格数据
+    gridApi.setGridOptions({
+      data: modelList.value,
+    });
+  }
+}, 100);
+
+/** 监听分类信息和排序状态变化 */
+watchEffect(() => {
+  if (props.categoryInfo?.modelList) {
+    updateModelList();
+  }
+
+  if (props.isCategorySorting) {
+    isExpand.value = false;
+  }
+});
+
+/** 处理重命名成功 */
+function handleRenameSuccess() {
+  emit('success');
+}
+</script>
+
+<template>
+  <div>
+    <ElCard
+      body-style="padding: 0"
+      shadow="hover"
+      class="category-draggable-model mb-5 rounded-lg transition-all duration-300 ease-in-out"
+    >
+      <div class="flex h-12 items-center">
+        <!-- 头部：分类名 -->
+        <!-- TODO @jason：2）拖动后，直接请求排序，不用有个【保存】；排序模型分类，和排序分类里的模型，交互有点不同哈。@芋艿 好像 yudao-ui-admin-vue3 交互也是这样的，需要改吗? -->
+        <div class="flex items-center">
+          <ElTooltip v-if="isCategorySorting" content="拖动排序">
+            <!-- drag-handle 标识可以拖动，不能删掉 -->
+            <IconifyIcon
+              icon="ic:round-drag-indicator"
+              class="drag-handle ml-2.5 cursor-move text-2xl text-gray-500"
+            />
+          </ElTooltip>
+          <div class="ml-4 mr-2 text-lg font-medium">
+            {{ categoryInfo.name }}
+          </div>
+          <div class="text-gray-500">
+            ({{ categoryInfo.modelList?.length || 0 }})
+          </div>
+        </div>
+
+        <!-- 头部：操作 -->
+        <div class="flex flex-1 items-center" v-show="!isCategorySorting">
+          <div
+            v-if="categoryInfo.modelList.length > 0"
+            class="ml-3 flex cursor-pointer items-center transition-transform duration-300"
+            :class="isExpand ? 'rotate-180' : 'rotate-0'"
+            @click="isExpand = !isExpand"
+          >
+            <IconifyIcon
+              icon="lucide:chevron-down"
+              class="text-3xl text-gray-400"
+            />
+          </div>
+
+          <div
+            class="ml-auto flex items-center"
+            :class="isModelSorting ? 'mr-4' : 'mr-8'"
+          >
+            <template v-if="!isModelSorting">
+              <ElButton
+                v-if="categoryInfo.modelList.length > 0"
+                link
+                size="small"
+                class="flex items-center text-sm"
+                @click.stop="handleModelSort"
+              >
+                <template #icon>
+                  <IconifyIcon icon="lucide:align-start-vertical" />
+                </template>
+                排序
+              </ElButton>
+              <ElDropdown placement="bottom" trigger="click">
+                <ElButton link size="small" class="flex items-center text-sm">
+                  <template #icon>
+                    <IconifyIcon icon="lucide:settings" />
+                  </template>
+                  分类
+                </ElButton>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="handleCommand('renameCategory')">
+                      重命名
+                    </el-dropdown-item>
+                    <el-dropdown-item @click="handleCommand('deleteCategory')">
+                      删除分类
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </ElDropdown>
+            </template>
+
+            <template v-else>
+              <ElButton @click.stop="handleModelSortCancel" class="mr-2">
+                取 消
+              </ElButton>
+              <ElButton type="primary" @click.stop="handleModelSortSubmit">
+                保存排序
+              </ElButton>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <!-- 模型列表 -->
+      <ElCollapse
+        v-model="expandKeys"
+        class="collapse-no-padding bg-transparent"
+      >
+        <ElCollapseItem
+          name="1"
+          class="border-0 bg-transparent p-0"
+          v-show="isExpand"
+        >
+          <template #title>
+            <span></span>
+          </template>
+          <Grid
+            v-if="modelList && modelList.length > 0"
+            :class="`category-${categoryInfo.id}`"
+          >
+            <template #name="{ row }">
+              <div class="flex items-center overflow-hidden">
+                <ElTooltip
+                  v-if="isModelSorting"
+                  content="拖动排序"
+                  placement="left"
+                >
+                  <!-- drag-handle 标识用于推动排序。 useSortable 用到 -->
+                  <IconifyIcon
+                    icon="ic:round-drag-indicator"
+                    class="drag-handle mr-2.5 flex-shrink-0 cursor-move text-2xl text-gray-500"
+                  />
+                </ElTooltip>
+                <div
+                  v-if="!row.icon"
+                  class="mr-2.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded bg-blue-500 text-white"
+                >
+                  <span class="text-xs">
+                    {{ row.name.substring(0, 2) }}
+                  </span>
+                </div>
+                <img
+                  v-else
+                  :src="row.icon"
+                  class="mr-2.5 h-9 w-9 flex-shrink-0 rounded"
+                  alt="图标"
+                />
+                <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">
+                全部可见
+              </span>
+              <span v-else-if="row.startUsers?.length === 1">
+                {{ row.startUsers[0].nickname }}
+              </span>
+              <span v-else-if="row.startDepts?.length === 1">
+                {{ row.startDepts[0].name }}
+              </span>
+              <span v-else-if="row.startDepts?.length > 1">
+                <ElTooltip
+                  placement="top"
+                  :content="
+                    row.startDepts.map((dept: any) => dept.name).join('、')
+                  "
+                >
+                  {{ row.startDepts[0].name }}等
+                  {{ row.startDepts.length }} 个部门可见
+                </ElTooltip>
+              </span>
+              <span v-else-if="row.startUsers?.length > 1">
+                <ElTooltip
+                  placement="top"
+                  :content="
+                    row.startUsers.map((user: any) => user.nickname).join('、')
+                  "
+                >
+                  {{ row.startUsers[0].nickname }}等
+                  {{ row.startUsers.length }} 人可见
+                </ElTooltip>
+              </span>
+            </template>
+            <template #formInfo="{ row }">
+              <ElButton
+                v-if="row.formType === BpmModelFormType.NORMAL"
+                link
+                @click="handleFormDetail(row)"
+              >
+                {{ row.formName }}
+              </ElButton>
+              <ElButton
+                v-else-if="row.formType === BpmModelFormType.CUSTOM"
+                link
+                @click="handleFormDetail(row)"
+              >
+                {{ row.formCustomCreatePath }}
+              </ElButton>
+              <span v-else>暂无表单</span>
+            </template>
+            <template #deploymentTime="{ row }">
+              <div class="flex items-center justify-center">
+                <span v-if="row.processDefinition" class="w-36">
+                  {{ formatDateTime(row.processDefinition.deploymentTime) }}
+                </span>
+                <ElTag v-if="row.processDefinition">
+                  v{{ row.processDefinition.version }}
+                </ElTag>
+                <ElTag v-else type="warning">未部署</ElTag>
+                <ElTag
+                  v-if="row.processDefinition?.suspensionState === 2"
+                  type="warning"
+                  class="ml-2.5"
+                >
+                  已停用
+                </ElTag>
+              </div>
+            </template>
+            <template #actions="{ row }">
+              <div class="flex items-center justify-center space-x-2">
+                <ElButton
+                  link
+                  size="small"
+                  @click="modelOperation('update', row.id)"
+                  :disabled="!isManagerUser(row) || !hasPermiUpdate"
+                >
+                  修改
+                </ElButton>
+                <ElButton
+                  link
+                  size="small"
+                  @click="handleDeploy(row)"
+                  :disabled="!isManagerUser(row) || !hasPermiDeploy"
+                >
+                  发布
+                </ElButton>
+                <ElDropdown placement="bottom-end" trigger="click">
+                  <ElButton link size="small">更多</ElButton>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item
+                        @click="handleModelCommand('handleCopy', row)"
+                      >
+                        复制
+                      </el-dropdown-item>
+                      <el-dropdown-item
+                        @click="handleModelCommand('handleDefinitionList', row)"
+                      >
+                        历史
+                      </el-dropdown-item>
+
+                      <el-dropdown-item
+                        @click="handleModelCommand('handleReport', row)"
+                        :disabled="!isManagerUser(row)"
+                      >
+                        报表
+                      </el-dropdown-item>
+                      <el-dropdown-item
+                        v-if="row.processDefinition"
+                        @click="handleModelCommand('handleChangeState', row)"
+                        :disabled="!isManagerUser(row)"
+                      >
+                        {{
+                          row.processDefinition.suspensionState === 1
+                            ? '停用'
+                            : '启用'
+                        }}
+                      </el-dropdown-item>
+                      <el-dropdown-item
+                        @click="handleModelCommand('handleClean', row)"
+                        :disabled="!isManagerUser(row)"
+                      >
+                        清理
+                      </el-dropdown-item>
+                      <el-dropdown-item
+                        @click="handleModelCommand('handleDelete', row)"
+                        :disabled="!isManagerUser(row) || !hasPermiDelete"
+                      >
+                        删除
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </ElDropdown>
+              </div>
+            </template>
+          </Grid>
+        </ElCollapseItem>
+      </ElCollapse>
+    </ElCard>
+
+    <!-- 重命名分类弹窗 -->
+    <CategoryRenameModal @success="handleRenameSuccess" />
+    <!-- 流程表单详情对话框 -->
+    <FormCreateDetailModal />
+  </div>
+</template>
+
+<style scoped>
+/* :deep() 实现样式穿透 */
+.collapse-no-padding :deep(.el-collapse-item__header) {
+  min-height: 0;
+}
+
+.collapse-no-padding :deep(.el-collapse-item__arrow) {
+  display: none;
+}
+</style>