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

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

@@ -397,9 +397,11 @@ onBeforeUnmount(() => {
 
 <template>
   <Page auto-content-height>
-    <!-- 主体内容 -->
-    <Card class="mb-4">
-      <template #title>
+    <div class="mx-auto">
+      <!-- 头部导航栏 -->
+      <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,82 +415,88 @@ 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">
-          <div
-            v-for="(step, index) in steps"
-            :key="index"
-            class="relative mx-6 flex h-full cursor-pointer items-center"
-            :class="[
-              currentStep === index
-                ? 'border-b-2 border-solid border-blue-500 text-blue-500'
-                : 'text-gray-500',
-            ]"
-            @click="handleStepClick(index)"
-          >
+
+        <!-- 步骤条 -->
+        <div class="flex h-full flex-1 items-center justify-center">
+          <div class="flex h-full w-auto items-center justify-center">
             <div
-              class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-[15px]"
+              v-for="(step, index) in steps"
+              :key="index"
+              class="relative mx-6 flex h-full cursor-pointer items-center"
               :class="[
                 currentStep === index
-                  ? 'border-blue-500 bg-blue-500 text-white'
-                  : 'border-gray-300 bg-white text-gray-500',
+                  ? 'border-b-2 border-solid border-blue-500 text-blue-500'
+                  : 'text-gray-500',
               ]"
+              @click="handleStepClick(index)"
             >
-              {{ index + 1 }}
+              <div
+                class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-[15px]"
+                :class="[
+                  currentStep === index
+                    ? 'border-blue-500 bg-blue-500 text-white'
+                    : 'border-gray-300 bg-white text-gray-500',
+                ]"
+              >
+                {{ index + 1 }}
+              </div>
+              <span class="whitespace-nowrap text-base font-bold">{{
+                step.title
+              }}</span>
             </div>
-            <span class="whitespace-nowrap text-base font-bold">{{
-              step.title
-            }}</span>
           </div>
         </div>
-      </div>
-      <div class="mt-[50px]">
-        <!-- 第一步：基本信息 -->
-        <div v-if="currentStep === 0" class="mx-auto w-4/6">
-          <BasicInfo
-            v-model="formData"
-            :category-list="categoryList"
-            :user-list="userList"
-            :dept-list="deptList"
-            ref="basicInfoRef"
-          />
-        </div>
-        <!-- 第二步：表单设计  -->
-        <div v-if="currentStep === 1" class="mx-auto w-4/6">
-          <FormDesign
-            v-model="formData"
-            :form-list="formList"
-            ref="formDesignRef"
-          />
-        </div>
 
-        <!-- 第三步：流程设计 -->
-        <ProcessDesign
-          v-if="currentStep === 2"
-          v-model="formData"
-          ref="processDesignRef"
-        />
-
-        <!-- 第四步：更多设置 -->
-        <div v-if="currentStep === 3" class="mx-auto w-4/6">
-          <ExtraSetting v-model="formData" ref="extraSettingRef" />
+        <!-- 右侧按钮 -->
+        <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>
+      <!-- 主体内容 -->
+      <Card :body-style="{ padding: '10px' }" class="mb-4">
+        <div class="mt-[50px]">
+          <!-- 第一步：基本信息 -->
+          <div v-if="currentStep === 0" class="mx-auto w-4/6">
+            <BasicInfo
+              v-model="formData"
+              :category-list="categoryList"
+              :user-list="userList"
+              :dept-list="deptList"
+              ref="basicInfoRef"
+            />
+          </div>
+          <!-- 第二步：表单设计  -->
+          <div v-if="currentStep === 1" class="mx-auto w-4/6">
+            <FormDesign
+              v-model="formData"
+              :form-list="formList"
+              ref="formDesignRef"
+            />
+          </div>
+
+          <!-- 第三步：流程设计 -->
+          <ProcessDesign
+            v-if="currentStep === 2"
+            v-model="formData"
+            ref="processDesignRef"
+          />
+
+          <!-- 第四步：更多设置 -->
+          <div v-if="currentStep === 3" class="mx-auto w-4/6">
+            <ExtraSetting v-model="formData" ref="extraSettingRef" />
+          </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>