feat: 优化审批面板抽屉组件类型与逻辑

- 引入 ApprovalType 类型替代内联联合类型，提升代码可维护性
- 使用 computed 计算属性 showFooter 控制底部操作栏显隐逻辑
- 移除原先通过 drawerApi 动态设置 footer 的方式，改用条件渲染
- 修复 footer 插槽在只读模式下仍渲染内容的问题
- 添加 TODO 注释说明当前 footer 插槽存在的设计问题

apps/web-antd/src/views/workflow/components/approval-panel-drawer.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { ApprovalType } from './type';
+
 import type { FlowInfoResponse } from '#/api/workflow/instance/model';
 import type { TaskInfo } from '#/api/workflow/task/model';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenDrawer, VbenAvatar } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
@@ -22,7 +24,7 @@ const emit = defineEmits<{ reload: [] }>();
 
 interface DrawerProps {
   task: TaskInfo;
-  type: 'admin' | 'approve' | 'myself' | 'readonly';
+  type: ApprovalType;
 }
 
 const currentTask = ref<null | TaskInfo>(null);
@@ -31,8 +33,6 @@ const currentType = ref<DrawerProps['type'] | null>(null);
 
 const [BasicDrawer, drawerApi] = useVbenDrawer({
   title: '流程',
-  // 默认不显示footer
-  footer: false,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
       return null;
@@ -62,10 +62,10 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
       }
       // 最后赋值type
       currentType.value = type;
-      // 设置是否显示footer
-      drawerApi.setState({
-        footer: type !== 'readonly',
-      });
+      // // 设置是否显示footer
+      // drawerApi.setState({
+      //   footer: type !== 'readonly',
+      // });
     } catch (error) {
       console.error(error);
     } finally {
@@ -88,6 +88,10 @@ async function handleAfterAction() {
   emit('reload');
   drawerApi.close();
 }
+
+const showFooter = computed(() => {
+  return ![null, 'readonly'].includes(currentType.value);
+});
 </script>
 
 <template>
@@ -152,12 +156,14 @@ async function handleAfterAction() {
     </div>
 
     <template #footer>
+      <!-- TODO: 暂时只能这样处理 footer常驻但不显示内容 这个插槽有点迷 -->
       <FlowActions
-        v-if="currentTask && currentType"
+        v-if="showFooter && currentTask && currentType"
         :task="currentTask"
         :type="currentType"
         @reload="handleAfterAction"
       />
+      <div v-else></div>
     </template>
   </BasicDrawer>
 </template>