fix: [BPM 工作流] - 流程设计页面的步骤条问题

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

@@ -397,9 +397,11 @@ onBeforeUnmount(() => {
 
 <template>
   <Page auto-content-height>
-    <!-- 主体内容 -->
+    <div class="mx-auto">
-    <Card class="mb-4">
+      <!-- 头部导航栏 -->
-      <template #title>
+      <div
+        class="absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b bg-white px-5"
+      >
         <!-- 左侧标题 -->
         <div class="flex w-[200px] items-center overflow-hidden">
           <ArrowLeft
@@ -413,20 +415,7 @@ onBeforeUnmount(() => {
             {{ formData.name || '创建流程' }}
           </span>
         </div>
-      </template>
+
-      <template #extra>
-        <Button
-          v-if="actionType === 'update'"
-          type="primary"
-          @click="handleDeploy"
-        >
-          发 布
-        </Button>
-        <Button type="primary" @click="handleSave">
-          <span v-if="actionType === 'definition'">恢 复</span>
-          <span v-else>保 存</span>
-        </Button>
-      </template>
         <!-- 步骤条 -->
         <div class="flex h-full flex-1 items-center justify-center">
           <div class="flex h-full w-auto items-center justify-center">
@@ -457,6 +446,24 @@ onBeforeUnmount(() => {
             </div>
           </div>
         </div>
+
+        <!-- 右侧按钮 -->
+        <div class="flex w-[200px] items-center justify-end gap-2">
+          <Button
+            v-if="actionType === 'update'"
+            type="primary"
+            @click="handleDeploy"
+          >
+            发 布
+          </Button>
+          <Button type="primary" @click="handleSave">
+            <span v-if="actionType === 'definition'">恢 复</span>
+            <span v-else>保 存</span>
+          </Button>
+        </div>
+      </div>
+      <!-- 主体内容 -->
+      <Card :body-style="{ padding: '10px' }" class="mb-4">
         <div class="mt-[50px]">
           <!-- 第一步：基本信息 -->
           <div v-if="currentStep === 0" class="mx-auto w-4/6">
@@ -490,5 +497,6 @@ onBeforeUnmount(() => {
           </div>
         </div>
       </Card>
+    </div>
   </Page>
 </template>

apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue

@@ -326,12 +326,12 @@ defineExpose({ validate });
         </Select>
         <div
           v-if="modelData.startUserType === 1"
-          class="mt-2 flex flex-wrap gap-2"
+          class="mt-2 flex flex-wrap gap-1"
         >
           <div
             v-for="user in selectedStartUsers"
             :key="user.id"
-            class="bg-destructive text-destructive-foreground hover:bg-destructive-hover 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"
           >
             <Avatar
               class="m-1"
@@ -344,7 +344,7 @@ defineExpose({ validate });
             </Avatar>
             {{ user.nickname }}
             <X
-              class="ml-2 size-4 cursor-pointer"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
               @click="handleRemoveStartUser(user)"
             />
           </div>
@@ -364,17 +364,17 @@ defineExpose({ validate });
         </div>
         <div
           v-if="modelData.startUserType === 2"
-          class="mt-2 flex flex-wrap gap-2"
+          class="mt-2 flex flex-wrap gap-1"
         >
           <div
             v-for="dept in selectedStartDepts"
             :key="dept.id"
-            class="bg-destructive text-destructive-foreground hover:bg-destructive-hover relative flex h-9 items-center rounded-full pr-2 shadow-sm"
+            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 shadow-sm hover:bg-gray-200"
           >
             <IconifyIcon icon="ep:office-building" class="size-6 px-1" />
             {{ dept.name }}
             <X
-              class="ml-2 size-4 cursor-pointer"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
               @click="handleRemoveStartDept(dept)"
             />
           </div>
@@ -395,7 +395,7 @@ defineExpose({ validate });
           <div
             v-for="user in selectedManagerUsers"
             :key="user.id"
-            class="bg-destructive text-destructive-foreground hover:bg-destructive-hover 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"
           >
             <Avatar
               class="m-1"
@@ -408,7 +408,7 @@ defineExpose({ validate });
             </Avatar>
             {{ user.nickname }}
             <X
-              class="ml-2 size-4 cursor-pointer"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
               @click="handleRemoveManagerUser(user)"
             />
           </div>