diff --git a/src/components/common/detail-drawer.vue b/src/components/common/detail-drawer.vue
index 8ccb7a0..bc8d350 100644
--- a/src/components/common/detail-drawer.vue
+++ b/src/components/common/detail-drawer.vue
@@ -14,6 +14,7 @@ const props = defineProps<Props>();
 
 interface Emits {
   (e: 'update:modelValue', modelValue: boolean): void;
+  (e: 'afterLeave'): void;
 }
 const emit = defineEmits<Emits>();
 
@@ -58,10 +59,20 @@ onUnmounted(() => {
 const onUpdateShow = (value: boolean) => {
   emit('update:modelValue', value);
 };
+
+const afterLeave = () => {
+  emit('afterLeave');
+};
 </script>
 
 <template>
-  <NDrawer v-model:show="model" display-directive="if" :width="drawerWidth" @update:show="onUpdateShow">
+  <NDrawer
+    v-model:show="model"
+    display-directive="if"
+    :width="drawerWidth"
+    @update:show="onUpdateShow"
+    @after-leave="afterLeave"
+  >
     <NDrawerContent :title="props.title" :native-scrollbar="false" closable header-class="operate-dawer-header">
       <template #header>
         {{ props.title }}
diff --git a/src/components/workflow/modules/detail/branch-detail.vue b/src/components/workflow/modules/detail/branch-detail.vue
index fb9a2b9..23597b9 100644
--- a/src/components/workflow/modules/detail/branch-detail.vue
+++ b/src/components/workflow/modules/detail/branch-detail.vue
@@ -38,9 +38,7 @@ watch(
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
-    <NDrawerContent title="决策详情">
-      <BranchDesc v-if="visible" :model-value="modelValue" />
-    </NDrawerContent>
-  </NDrawer>
+  <DetailDrawer v-model="visible" title="决策详情" :width="['50%', '90%']" @after-leave="onClose">
+    <BranchDesc v-if="visible" :model-value="modelValue" />
+  </DetailDrawer>
 </template>
diff --git a/src/components/workflow/modules/detail/callback-detail.vue b/src/components/workflow/modules/detail/callback-detail.vue
index 8b50390..0ebd10f 100644
--- a/src/components/workflow/modules/detail/callback-detail.vue
+++ b/src/components/workflow/modules/detail/callback-detail.vue
@@ -38,20 +38,18 @@ const onClose = () => {
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
-    <NDrawerContent title="工作流详情">
-      <NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
-        <NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
-        <NDescriptionsItem label="webhook">{{ modelValue.callback?.webhook }}</NDescriptionsItem>
-        <NDescriptionsItem label="请求类型">
-          {{ contentTypeRecord[modelValue.callback?.contentType!] }}
-        </NDescriptionsItem>
-        <NDescriptionsItem label="密钥">
-          {{ modelValue.callback?.secret }}
-        </NDescriptionsItem>
-      </NDescriptions>
-    </NDrawerContent>
-  </NDrawer>
+  <DetailDrawer v-model="visible" title="回调详情" :width="['50%', '90%']" @after-leave="onClose">
+    <NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
+      <NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
+      <NDescriptionsItem label="webhook">{{ modelValue.callback?.webhook }}</NDescriptionsItem>
+      <NDescriptionsItem label="请求类型">
+        {{ contentTypeRecord[modelValue.callback?.contentType!] }}
+      </NDescriptionsItem>
+      <NDescriptionsItem label="密钥">
+        {{ modelValue.callback?.secret }}
+      </NDescriptionsItem>
+    </NDescriptions>
+  </DetailDrawer>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/src/components/workflow/modules/detail/start-detail.vue b/src/components/workflow/modules/detail/start-detail.vue
index 4ff1c43..4a7a6c3 100644
--- a/src/components/workflow/modules/detail/start-detail.vue
+++ b/src/components/workflow/modules/detail/start-detail.vue
@@ -39,24 +39,22 @@ const onClose = () => {
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
-    <NDrawerContent title="工作流详情">
-      <NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
-        <NDescriptionsItem label="工作流名称">{{ modelValue.workflowName }}</NDescriptionsItem>
-        <NDescriptionsItem label="组名称">{{ modelValue.groupName }}</NDescriptionsItem>
-        <NDescriptionsItem label="触发类型">{{ $t(triggerTypeRecord[modelValue.triggerType!]) }}</NDescriptionsItem>
+  <DetailDrawer v-model="visible" title="工作流详情" :width="['50%', '90%']" @after-leave="onClose">
+    <NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
+      <NDescriptionsItem label="工作流名称">{{ modelValue.workflowName }}</NDescriptionsItem>
+      <NDescriptionsItem label="组名称">{{ modelValue.groupName }}</NDescriptionsItem>
+      <NDescriptionsItem label="触发类型">{{ $t(triggerTypeRecord[modelValue.triggerType!]) }}</NDescriptionsItem>
 
-        <NDescriptionsItem label="触发间隔">
-          {{ modelValue.triggerInterval }} {{ modelValue.triggerType === 2 ? '秒' : null }}
-        </NDescriptionsItem>
+      <NDescriptionsItem label="触发间隔">
+        {{ modelValue.triggerInterval }} {{ modelValue.triggerType === 2 ? '秒' : null }}
+      </NDescriptionsItem>
 
-        <NDescriptionsItem label="执行超时时间">{{ modelValue.executorTimeout }} 秒</NDescriptionsItem>
-        <NDescriptionsItem label="阻塞策略">{{ $t(blockStrategyRecord[modelValue.blockStrategy!]) }}</NDescriptionsItem>
-        <NDescriptionsItem label="工作流上下文">{{ modelValue.wfContext }}</NDescriptionsItem>
-        <NDescriptionsItem label="工作流状态">
-          {{ $t(workFlowNodeStatusRecord[modelValue.workflowStatus!]) }}
-        </NDescriptionsItem>
-      </NDescriptions>
-    </NDrawerContent>
-  </NDrawer>
+      <NDescriptionsItem label="执行超时时间">{{ modelValue.executorTimeout }} 秒</NDescriptionsItem>
+      <NDescriptionsItem label="阻塞策略">{{ $t(blockStrategyRecord[modelValue.blockStrategy!]) }}</NDescriptionsItem>
+      <NDescriptionsItem label="工作流上下文">{{ modelValue.wfContext }}</NDescriptionsItem>
+      <NDescriptionsItem label="工作流状态">
+        {{ $t(workFlowNodeStatusRecord[modelValue.workflowStatus!]) }}
+      </NDescriptionsItem>
+    </NDescriptions>
+  </DetailDrawer>
 </template>
diff --git a/src/components/workflow/modules/detail/task-detail.vue b/src/components/workflow/modules/detail/task-detail.vue
index 1f6f83b..8aee42b 100644
--- a/src/components/workflow/modules/detail/task-detail.vue
+++ b/src/components/workflow/modules/detail/task-detail.vue
@@ -46,21 +46,19 @@ const getTaskName = (id: string) => {
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
-    <NDrawerContent title="工作流详情">
-      <NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
-        <NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
-        <NDescriptionsItem label="任务 ID">{{ modelValue.jobTask?.jobId }}</NDescriptionsItem>
-        <NDescriptionsItem label="任务名称">{{ getTaskName(modelValue.jobTask?.jobId!) }}</NDescriptionsItem>
-        <NDescriptionsItem label="失败策略">
-          {{ $t(failStrategyRecord[modelValue.failStrategy!]) }}
-        </NDescriptionsItem>
-        <NDescriptionsItem label="工作流状态">
-          {{ $t(workFlowNodeStatusRecord[modelValue.workflowNodeStatus!]) }}
-        </NDescriptionsItem>
-      </NDescriptions>
-    </NDrawerContent>
-  </NDrawer>
+  <DetailDrawer v-model="visible" title="任务详情" :width="['50%', '90%']" @after-leave="onClose">
+    <NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
+      <NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
+      <NDescriptionsItem label="任务 ID">{{ modelValue.jobTask?.jobId }}</NDescriptionsItem>
+      <NDescriptionsItem label="任务名称">{{ getTaskName(modelValue.jobTask?.jobId!) }}</NDescriptionsItem>
+      <NDescriptionsItem label="失败策略">
+        {{ $t(failStrategyRecord[modelValue.failStrategy!]) }}
+      </NDescriptionsItem>
+      <NDescriptionsItem label="工作流状态">
+        {{ $t(workFlowNodeStatusRecord[modelValue.workflowNodeStatus!]) }}
+      </NDescriptionsItem>
+    </NDescriptions>
+  </DetailDrawer>
 </template>
 
 <style scoped lang="scss"></style>