style(sj_map_reduce): 优化工作流详情组件

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 }}

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">
+  <DetailDrawer v-model="visible" title="决策详情" :width="['50%', '90%']" @after-leave="onClose">
-    <NDrawerContent title="决策详情">
     <BranchDesc v-if="visible" :model-value="modelValue" />
-    </NDrawerContent>
+  </DetailDrawer>
-  </NDrawer>
 </template>

src/components/workflow/modules/detail/callback-detail.vue

@@ -38,8 +38,7 @@ const onClose = () => {
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
+  <DetailDrawer v-model="visible" title="回调详情" :width="['50%', '90%']" @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>
@@ -50,8 +49,7 @@ const onClose = () => {
         {{ modelValue.callback?.secret }}
       </NDescriptionsItem>
     </NDescriptions>
-    </NDrawerContent>
+  </DetailDrawer>
-  </NDrawer>
 </template>
 
 <style scoped lang="scss"></style>

src/components/workflow/modules/detail/start-detail.vue

@@ -39,8 +39,7 @@ const onClose = () => {
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
+  <DetailDrawer v-model="visible" title="工作流详情" :width="['50%', '90%']" @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>
@@ -57,6 +56,5 @@ const onClose = () => {
         {{ $t(workFlowNodeStatusRecord[modelValue.workflowStatus!]) }}
       </NDescriptionsItem>
     </NDescriptions>
-    </NDrawerContent>
+  </DetailDrawer>
-  </NDrawer>
 </template>

src/components/workflow/modules/detail/task-detail.vue

@@ -46,8 +46,7 @@ const getTaskName = (id: string) => {
 </script>
 
 <template>
-  <NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
+  <DetailDrawer v-model="visible" title="任务详情" :width="['50%', '90%']" @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>
@@ -59,8 +58,7 @@ const getTaskName = (id: string) => {
         {{ $t(workFlowNodeStatusRecord[modelValue.workflowNodeStatus!]) }}
       </NDescriptionsItem>
     </NDescriptions>
-    </NDrawerContent>
+  </DetailDrawer>
-  </NDrawer>
 </template>
 
 <style scoped lang="scss"></style>