FlowTaskDetailShell 审批详情外壳

审批任务详情外壳组件。基于 n-modal 的模态弹窗布局，左侧为主内容区（审批表单详情），右侧为审批记录时间线。支持全屏模式。

基本用法

<template>
  <FlowTaskDetailShell
    v-model:show="showDetail"
    title="请假审批"
    subtitle="张三 - 年假申请"
    status-text="审批中"
    status-class="pending"
    priority-text="紧急"
    priority-class="urgent"
    :records="approvalRecords"
    fullscreen
  >
    <LeaveDetailForm />
  </FlowTaskDetailShell>
</template>

<script setup>
import { FlowTaskDetailShell } from '@/components/flow'
import { ref } from 'vue'

const showDetail = ref(false)
const approvalRecords = ref([])
</script>

Props

属性	类型	默认值	说明
show	Boolean	false	控制弹窗显示/隐藏
title	String	''	详情标题
subtitle	String	''	详情副标题
statusText	String	''	审批状态文本（"审批中"、"已完成"等）
statusClass	String	'default'	状态 CSS class：pending/warning/success/error/default
statusIcon	String	'i-material-symbols:check-circle'	状态图标
priorityText	String	''	优先级文本
priorityClass	String	''	优先级 CSS class：high/urgent/warning/error
recordTitle	String	'审批记录'	右侧记录区标题
records	Array	[]	审批记录列表
busy	Boolean	false	忙碌状态（禁用遮罩关闭和 ESC 关闭）
fullscreen	Boolean	true	是否全屏模式

records 数组项结构

字段	类型	说明
action	String	审批操作
taskName	String	任务名称
assigneeName	String	处理人名称
completeTime	String	完成时间
comment	String	审批意见
signature	String	签名图片/文本

Events

事件名	参数	说明
update:show	Boolean	弹窗显示状态变更

Slots

插槽名	说明
default	主内容区（左侧审批详情）
toolbar	顶部工具栏区域
record-action	审批记录头部右侧操作按钮
aside-extra	审批记录列表下方额外内容