diff --git a/apps/web-antd/src/api/bpm/definition/index.ts b/apps/web-antd/src/api/bpm/definition/index.ts
index b591de12d..c7facf6ec 100644
--- a/apps/web-antd/src/api/bpm/definition/index.ts
+++ b/apps/web-antd/src/api/bpm/definition/index.ts
@@ -8,6 +8,7 @@ export namespace BpmProcessDefinitionApi {
     id: string;
     version: number;
     name: string;
+    description: string;
     deploymentTime: number;
     suspensionState: number;
     modelType: number;
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
index 4577a9343..5d8eb78d5 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue
@@ -62,9 +62,15 @@ const [Modal, modalApi] = useVbenModal({
   },
 });
 
-// TODO xingyu 暴露 modalApi 给父组件是否合适? trigger-node-config.vue 会有多个 conditionDialog 实例
-// TODO @jason：回复 from xingyu：不用暴露啊，用 useVbenModal 就可以了
-defineExpose({ modalApi });
+/**
+ * 打开条件配置弹窗，不暴露 modalApi 给父组件
+ */
+function openModal(conditionObj: any) {
+  modalApi.setData(conditionObj).open();
+}
+
+// 暴露方法给父组件
+defineExpose({ openModal });
 </script>
 <template>
   <Modal class="w-1/2">
diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
index 79e4b5706..2516af9f8 100644
--- a/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
+++ b/apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue
@@ -200,8 +200,8 @@ function addFormSettingCondition(
   formSetting: FormTriggerSetting,
 ) {
   const conditionDialog = proxy.$refs[`condition-${index}`][0];
-  // 使用modalApi来打开模态框并传递数据
-  conditionDialog.modalApi.setData(formSetting).open();
+  // 打开模态框并传递数据
+  conditionDialog.openModal(formSetting);
 }
 
 /** 删除条件配置 */
@@ -215,8 +215,8 @@ function openFormSettingCondition(
   formSetting: FormTriggerSetting,
 ) {
   const conditionDialog = proxy.$refs[`condition-${index}`][0];
-  // 使用 modalApi 来打开模态框并传递数据
-  conditionDialog.modalApi.setData(formSetting).open();
+  // 打开模态框并传递数据
+  conditionDialog.openModal(formSetting);
 }
 
 /** 处理条件配置保存 */
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
index 7eacfdae7..87f0a545a 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
@@ -335,7 +335,7 @@ defineExpose({ validate });
           <div
             v-for="user in selectedStartUsers"
             :key="user.id"
-            class="relative flex h-9 items-center rounded-full pr-2 hover:bg-gray-200"
+            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
           >
             <Avatar
               class="m-1"
@@ -346,7 +346,9 @@ defineExpose({ validate });
             <Avatar class="m-1" :size="28" v-else>
               {{ user.nickname?.substring(0, 1) }}
             </Avatar>
-            {{ user.nickname }}
+            <span class="text-gray-700 dark:text-gray-200">
+              {{ user.nickname }}
+            </span>
             <IconifyIcon
               icon="lucide:x"
               class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
@@ -371,10 +373,12 @@ defineExpose({ validate });
           <div
             v-for="dept in selectedStartDepts"
             :key="dept.id"
-            class="relative flex h-9 items-center rounded-full pr-2 shadow-sm hover:bg-gray-200"
+            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 shadow-sm hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
           >
             <IconifyIcon icon="lucide:building" class="size-6 px-1" />
-            {{ dept.name }}
+            <span class="text-gray-700 dark:text-gray-200">
+              {{ dept.name }}
+            </span>
             <IconifyIcon
               icon="lucide:x"
               class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
@@ -398,7 +402,7 @@ defineExpose({ validate });
           <div
             v-for="user in selectedManagerUsers"
             :key="user.id"
-            class="hover:bg-primary-500 relative flex h-9 items-center rounded-full pr-2"
+            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
           >
             <Avatar
               class="m-1"
@@ -409,7 +413,9 @@ defineExpose({ validate });
             <Avatar class="m-1" :size="28" v-else>
               {{ user.nickname?.substring(0, 1) }}
             </Avatar>
-            {{ user.nickname }}
+            <span class="text-gray-700 dark:text-gray-200">
+              {{ user.nickname }}
+            </span>
             <IconifyIcon
               icon="lucide:x"
               class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
@@ -432,6 +438,7 @@ defineExpose({ validate });
 
     <!-- 用户选择弹窗 -->
     <UserSelectModalComp
+      class="w-3/5"
       v-model:value="selectedUsers"
       :multiple="true"
       title="选择用户"
@@ -441,6 +448,7 @@ defineExpose({ validate });
     />
     <!-- 部门选择对话框 -->
     <DeptSelectModalComp
+      class="w-3/5"
       title="发起人部门选择"
       :check-strictly="true"
       @confirm="handleDeptSelectConfirm"
diff --git a/apps/web-antd/src/views/bpm/processInstance/create/index.vue b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
index 8684f183e..95c1e45f4 100644
--- a/apps/web-antd/src/views/bpm/processInstance/create/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
@@ -2,7 +2,7 @@
 import type { BpmCategoryApi } from '#/api/bpm/category';
 import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
 
-import { computed, nextTick, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
@@ -146,6 +146,11 @@ function handleQuery() {
     // 如果没有搜索关键字，恢复所有数据
     isSearching.value = false;
     filteredProcessDefinitionList.value = processDefinitionList.value;
+
+    // 恢复到第一个可用分类
+    if (availableCategories.value.length > 0) {
+      activeCategory.value = availableCategories.value[0].code;
+    }
   }
 }
 
@@ -216,11 +221,28 @@ const availableCategories = computed(() => {
 });
 
 /** 获取 tab 的位置 */
-
 const tabPosition = computed(() => {
   return window.innerWidth < 768 ? 'top' : 'left';
 });
 
+/** 监听可用分类变化，自动设置正确的活动分类 */
+watch(
+  availableCategories,
+  (newCategories) => {
+    if (newCategories.length > 0) {
+      // 如果当前活动分类不在可用分类中，切换到第一个可用分类
+      const currentCategoryExists = newCategories.some(
+        (category: BpmCategoryApi.Category) =>
+          category.code === activeCategory.value,
+      );
+      if (!currentCategoryExists) {
+        activeCategory.value = newCategories[0].code;
+      }
+    }
+  },
+  { immediate: true },
+);
+
 /** 初始化 */
 onMounted(() => {
   getList();
@@ -241,10 +263,10 @@ onMounted(() => {
         :loading="loading"
       >
         <template #extra>
-          <div class="flex items-end">
+          <div class="flex h-full items-center justify-center">
             <InputSearch
               v-model:value="searchName"
-              class="!w-50% mb-4"
+              class="!w-50%"
               placeholder="请输入流程名称检索"
               allow-clear
               @input="handleQuery"
@@ -260,15 +282,15 @@ onMounted(() => {
               :key="category.code"
               :tab="category.name"
             >
-              <Row :gutter="[16, 16]">
+              <Row :gutter="[16, 16]" :wrap="true">
                 <Col
                   v-for="definition in processDefinitionGroup[category.code]"
                   :key="definition.id"
                   :xs="24"
                   :sm="12"
                   :md="8"
-                  :lg="6"
-                  :xl="4"
+                  :lg="8"
+                  :xl="6"
                   @click="handleSelect(definition)"
                 >
                   <Card
@@ -279,6 +301,7 @@ onMounted(() => {
                     }"
                     :body-style="{
                       width: '100%',
+                      padding: '16px',
                     }"
                   >
                     <div class="flex items-center">
@@ -290,16 +313,14 @@ onMounted(() => {
                       />
 
                       <div v-else class="flow-icon flex-shrink-0">
-                        <Tooltip :title="definition.name">
-                          <span class="text-xs text-white">
-                            {{ definition.name?.slice(0, 2) }}
-                          </span>
-                        </Tooltip>
+                        <span class="text-xs text-white">
+                          {{ definition.name?.slice(0, 2) }}
+                        </span>
                       </div>
                       <span class="ml-3 flex-1 truncate text-base">
                         <Tooltip
                           placement="topLeft"
-                          :title="`${definition.name}`"
+                          :title="`${definition.description}`"
                         >
                           {{ definition.name }}
                         </Tooltip>
diff --git a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
index 23254a457..b91202d1c 100644
--- a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
@@ -72,7 +72,6 @@ const timelineRef = ref<any>();
 const activeTab = ref('form');
 const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
 const processInstanceStartLoading = ref(false);
-
 /** 提交按钮 */
 async function submitForm() {
   if (!fApi.value || !props.selectProcessDefinition) {
@@ -109,7 +108,6 @@ async function submitForm() {
 
     await router.push({ path: '/bpm/task/my' });
   } catch (error) {
-    message.error('发起流程失败');
     console.error('发起流程失败:', error);
   } finally {
     processInstanceStartLoading.value = false;
@@ -330,7 +328,12 @@ defineExpose({ initProcessInfo });
     <template #actions>
       <template v-if="activeTab === 'form'">
         <Space wrap class="flex w-full justify-center">
-          <Button plain type="primary" @click="submitForm">
+          <Button
+            plain
+            type="primary"
+            @click="submitForm"
+            :loading="processInstanceStartLoading"
+          >
             <IconifyIcon icon="lucide:check" />
             发起
           </Button>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
index 9fd206db0..d4e4b6747 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -735,6 +735,7 @@ defineExpose({ loadTodoTask });
                   <ProcessInstanceTimeline
                     :activity-nodes="nextAssigneesActivityNode"
                     :show-status-icon="false"
+                    :use-next-assignees="true"
                     @select-user-confirm="selectNextAssigneesConfirm"
                   />
                 </div>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
index 0a5f966f5..424413a30 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -20,13 +20,15 @@ import {
 
 defineOptions({ name: 'BpmProcessInstanceTimeline' });
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[]; // 审批节点信息
     showStatusIcon?: boolean; // 是否显示头像右下角状态图标
+    useNextAssignees?: boolean; //  是否用于下一个节点审批人选择
   }>(),
   {
     showStatusIcon: true, // 默认值为 true
+    useNextAssignees: false, // 默认值为 false
   },
 );
 
@@ -196,8 +198,9 @@ function shouldShowCustomUserSelect(
     isEmpty(activity.candidateUsers) &&
     (BpmCandidateStrategyEnum.START_USER_SELECT ===
       activity.candidateStrategy ||
-      BpmCandidateStrategyEnum.APPROVE_USER_SELECT ===
-        activity.candidateStrategy)
+      (BpmCandidateStrategyEnum.APPROVE_USER_SELECT ===
+        activity.candidateStrategy &&
+        props.useNextAssignees))
   );
 }
 
@@ -457,6 +460,7 @@ function handleUserSelectCancel() {
 
     <!-- 用户选择弹窗 -->
     <UserSelectModalComp
+      class="w-3/5"
       v-model:value="selectedUsers"
       :multiple="true"
       title="选择用户"