@ebiz/designer-components 0.1.80 → 0.1.81

package/src/components/EbizSApprovalProcess.vue

@@ -1,1430 +1,1430 @@
-<template>
-    <div class="ebiz-approval-process">
-        <div class="block-base-style">
-            <ebiz-tdesign-loading v-if="state.loading" :loading="true" theme="circular" size="small" text=""
-                :reverse="false" layout="vertical" :delay="0" class="component-base-style">
-                <span style="display: inline-block" class="component-base-style">加载中</span>
-            </ebiz-tdesign-loading>
-
-            <div class="card">
-                <div style="margin: 10px 0" class="component-base-style">
-                    <span style="display: inline-block" class="title">审批流程</span>
-                </div>
-
-                <!-- 流程基本信息 -->
-                <div v-if="state.processInfo" class="process-info">
-                    <div class="info-item" v-if="getStartUserInfo().userId">
-                        <span class="label">发起人：</span>
-                        <user-info :userId="getStartUserInfo().userId" :userInfo="getStartUserInfo().userInfo"
-                            avatar-size="small" name-size="small" :show-job-number="true" :show-department="false" />
-                    </div>
-                    <div class="info-item">
-                        <span class="label">发起时间：</span>
-                        <span>{{ state.processInfo.startTimeStr || '--' }}</span>
-                    </div>
-                    <div class="info-item">
-                        <span class="label">流程状态：</span>
-                        <t-tag :theme="getProcessStatusTheme(state.processInfo.processStatus)" size="small">
-                            {{ getProcessStatusText(state.processInfo.processStatus) }}
-                        </t-tag>
-                    </div>
-                    <!-- 抄送人信息 -->
-                </div>
-
-                <!-- 审批步骤 -->
-                <div class="simple-approval-steps">
-                    <!-- 节点步骤 -->
-                    <div v-for="(node, index) in state.nodes" :key="'node-' + index" class="simple-step-item">
-
-                        <div
-                            v-if="node.nodeStatus == 'PENDING' && getPendingApprovers(node).length === 0 && state.processInfo.processStatus != 'ACTIVE'">
-                        </div>
-                        <div v-else>
-                            <div class="step-header">
-                                <div class="step-icon" :class="getSimpleStepIconClass(node)">
-                                    <t-icon name="user" size="12px" color="white" />
-                                </div>
-                                <div class="step-info">
-                                    <div class="step-title-row">
-                                        <span class="step-title">{{ node.nodeName }}</span>
-                                        <t-tag :theme="getNodeStatusTheme(node)" size="small">
-                                            {{ getNodeStatusText(node) }}
-                                        </t-tag>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- 简化的审批人信息 -->
-                            <div class="step-content">
-                                <!-- 已完成节点 -->
-                                <div v-for="approver in getCompletedApprovers(node)"
-                                    :key="approver.nodeUser?.userId || approver.userId" class="simple-approver-wrapper">
-                                    <div class="simple-approver">
-                                        <!-- 操作用户信息 -->
-                                        <div class="approver-user-info">
-                                            <user-info :userId="approver.nodeUser?.userId || approver.userId"
-                                                :userInfo="getUserInfo(approver)" avatar-size="small" name-size="small"
-                                                :show-department="false" />
-                                        </div>
-
-                                        <!-- 操作类型和时间 -->
-                                        <div class="approver-action-info">
-                                            <div class="action-type">{{ getOperationTypeText(approver) }}</div>
-                                            <div class="approver-time">{{ formatTime(approver.operation?.operationTime
-                                                ||
-                                                approver.completedTime || approver.endTime) }}</div>
-                                        </div>
-                                    </div>
-
-                                    <!-- 目标用户信息（转审、加签等操作） -->
-                                    <div v-if="approver.targetUsers && needShowTargetUser(approver)"
-                                        class="target-user-info">
-                                        <div class="target-label">{{ getTargetUserLabel(approver) }}</div>
-                                        <div style="display: flex; flex-direction: column; gap: 4px;">
-                                            <div v-for="targetUser in approver.targetUsers" :key="targetUser.userId">
-                                                <user-info :userId="targetUser.userId"
-                                                    :userInfo="getTargetUserInfo(targetUser)" avatar-size="small"
-                                                    name-size="small" :show-department="false" />
-                                            </div>
-                                        </div>
-                                    </div>
-
-
-                                    <!-- 评论信息 -->
-                                    <div v-if="approver.comment || (approver.operation.attachmentsList && approver.operation.attachmentsList.length > 0)"
-                                        class="approver-comment">
-                                        <div v-if="approver.comment">{{ approver.comment }}</div>
-                                        <div
-                                            v-if="approver.operation.attachmentsList && approver.operation.attachmentsList.length > 0">
-                                            <ebiz-file-list size="mini" :files="approver.operation.attachmentsList" />
-                                        </div>
-                                    </div>
-                                    <!-- <div v-if="approver.comment" class="approver-comment">{{ approver.comment }}</div> -->
-                                </div>
-
-                                <!-- 进行中节点 -->
-                                <!-- 当前处理人 -->
-                                <div v-if="getCurrentApprover(node)" class="simple-approver">
-                                    <user-info
-                                        :userId="getCurrentApprover(node).nodeUser?.userId || getCurrentApprover(node).userId"
-                                        :userInfo="getUserInfo(getCurrentApprover(node))" avatar-size="small"
-                                        name-size="small" :show-department="false" />
-                                    <div class="approver-time">处理中</div>
-                                </div>
-
-                                <!-- 待处理人 -->
-                                <div v-for="approver in getPendingApprovers(node)"
-                                    :key="'pending-' + (approver.nodeUser?.userId || approver.userId)"
-                                    class="simple-approver">
-                                    <user-info :userId="approver.nodeUser?.userId || approver.userId"
-                                        :userInfo="getUserInfo(approver)" avatar-size="small" name-size="small"
-                                        :show-department="false" />
-                                    <!-- <div class="approver-time">待处理</div> -->
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- 抄送人步骤 -->
-                    <div v-if="state.processInfo" class="simple-step-item">
-                        <div class="step-header">
-                            <div class="step-icon" :class="getCcSimpleIconClass()">
-                                <t-icon name="mail" size="12px" color="white" />
-                            </div>
-                            <div class="step-info">
-                                <div class="step-title-row">
-                                    <span class="step-title">抄送</span>
-                                    <!-- 增加抄送人按钮 -->
-                                    <div v-if="state.processInfo.processStatus === 'ACTIVE'">
-                                        <ebiz-employee-selector content="增加抄送人" :single="false"
-                                            defaultTab="organization" class="component-base-style"
-                                            @click="handleAddCcUser" @confirm="onAddCcListConfirm">
-                                            <template #selected-items="{ event, data }">
-                                                <div></div>
-                                            </template>
-                                        </ebiz-employee-selector>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="step-content">
-                            <div v-for="ccUser in state.processInfo.ccUserList"
-                                :key="ccUser.nodeUser?.userId || ccUser.userId" class="simple-approver">
-                                <user-info :userId="ccUser.nodeUser?.userId || ccUser.userId"
-                                    :userInfo="ccUser.nodeUser || ccUser" avatar-size="small" name-size="small"
-                                    :show-department="false" />
-                                <div class="approver-time">{{ getCcTimeText() }}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 备注部分 -->
-            <div class="block-base-style">
-                <div class="card">
-                    <div class="card-header">
-                        <span class="title">备注 <span v-if="state.remarks.length > 0">({{ state.remarks.length
-                        }})</span></span>
-                        <div class="card-actions">
-                            <t-button variant="text" @click="showAddRemarkDialog">添加备注</t-button>
-                        </div>
-                    </div>
-
-                    <!-- 备注列表 -->
-                    <div class="remark-list" v-if="state.remarks.length > 0">
-                        <div v-for="remark in state.remarks" :key="remark.id" class="remark-item">
-                            <div class="remark-header">
-                                <user-info :userId="remark.userId" :userInfo="remark.userDetail" avatar-size="small"
-                                    name-size="small" :show-job-number="true" :show-department="false" />
-                                <div class="remark-actions">
-                                    <div class="remark-time">{{ remark.createdTimeStr }}</div>
-                                    <t-button v-if="canDeleteRemark(remark)" variant="text" theme="danger" size="small"
-                                        class="delete-btn" @click="confirmDeleteRemark(remark)">
-                                        <t-icon name="delete" />
-                                    </t-button>
-                                </div>
-                            </div>
-                            <div class="remark-content">{{ remark.content }}</div>
-                            <div class="remark-attachments" v-if="remark.attachments && remark.attachments.length > 0">
-                                <ebiz-file-list size="mini" :files="remark.attachments" />
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- 无备注时的提示 -->
-                    <div class="no-remarks" v-else>
-                        <div class="no-remarks-tip">暂无备注信息</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 添加备注对话框 -->
-            <t-dialog v-model:visible="state.showRemarkDialog" header="添加备注" :width="500" :footer="false" attach="body"
-                :close-on-overlay-click="false" :close-btn="true">
-                <div class="remark-form">
-                    <t-textarea v-model="state.newRemark.content" placeholder="请输入备注内容" :maxlength="500"
-                        :autosize="{ minRows: 3, maxRows: 5 }" />
-
-                    <div>
-                        <ebiz-upload v-model="state.newRemark.attachments" :multiple="true" theme="file">
-                            <template #trigger>
-                                <t-button variant="outline">
-                                    <template #icon>
-                                        <t-icon name="attach" />
-                                    </template>
-                                    上传附件
-                                </t-button>
-                            </template>
-                        </ebiz-upload>
-                    </div>
-                    <div class="remark-form-footer">
-                        <div></div>
-                        <div class="remark-form-actions">
-                            <t-button theme="default" @click="cancelAddRemark">取消</t-button>
-                            <t-button theme="primary" :loading="state.submittingRemark"
-                                @click="submitRemark">提交</t-button>
-                        </div>
-                    </div>
-                </div>
-            </t-dialog>
-
-            <!-- 删除确认对话框 -->
-            <t-dialog v-model:visible="state.showDeleteConfirmDialog" header="删除确认" :width="400"
-                :confirm-btn="{ content: '确认', theme: 'danger', loading: state.deletingRemark }"
-                :cancel-btn="{ content: '取消', theme: 'default' }" @confirm="deleteRemark" @cancel="cancelDeleteRemark">
-                <div class="delete-confirm-content">
-                    <t-icon name="error-circle-filled" size="large" style="color: #E34D59; margin-right: 8px;" />
-                    <span>确定要删除此备注吗？此操作不可恢复。</span>
-                </div>
-            </t-dialog>
-        </div>
-    </div>
-</template>
-
-<script>
-/**
- * @displayName 审批流程
- * @description 审批流程组件，用于展示审批流程的详细信息
- * @category 业务组件
- * @name EbizApprovalProcess
- */
-export default {
-    name: "EbizApprovalProcess",
-    components: {
-        't-tag': Tag,
-        't-icon': Icon,
-        't-button': Button,
-        't-dialog': Dialog,
-        't-textarea': Textarea,
-        't-upload': Upload
-    }
-}
-</script>
-
-<script setup>
-import { reactive, onMounted, ref } from 'vue'
-import { defineProps, defineEmits } from 'vue'
-import { Tag, Icon, Button, Dialog, Textarea, Upload, MessagePlugin as message } from 'tdesign-vue-next'
-import EbizEmployeeSelector from './EbizEmployeeSelector.vue'
-import EbizTdesignLoading from './EbizTdesignLoading.vue'
-import dataService from '../apiService/simpleDataService.js'
-import UserInfo from './mItems/UserInfo.vue'
-import EbizFileList from './EbizFileList.vue'
-import { EbizUpload } from '../index.js'
-
-// 定义 props
-const props = defineProps({
-    /**
-     * 业务键
-     */
-    businessKey: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 业务类型
-     */
-    type: {
-        type: String,
-        default: ''
-    }
-})
-
-// 定义 emits
-const emit = defineEmits(['load-success', 'add-cc-user'])
-
-// 响应式状态
-const state = reactive({
-    loading: false,
-    processInfo: null,
-    nodes: [], // 直接保存节点数据
-    historyRecords: [],
-    currentNodes: [],
-    futureNodes: [],
-    approvalDetail: {},
-    selectedCCList: [],
-    showCcListSelector: false,
-
-    // 备注相关
-    remarks: [],
-    remarksLoading: false,
-    showRemarkDialog: false,
-    submittingRemark: false,
-    newRemark: {
-        content: '',
-        attachments: []
-    },
-    showDeleteConfirmDialog: false,
-    deletingRemark: false,
-    remarkToDelete: null
-})
-
-// 处理审批详情响应
-const handleApprovalDetailResponse = (data) => {
-    // 构建流程信息
-    state.processInfo = {
-        processInstanceId: data.processInstanceId,
-        businessKey: data.businessKey,
-        processDefinitionKey: data.processDefinitionKey,
-        processDefinitionName: data.processDefinitionName,
-        startTime: data.startTime,
-        startTimeStr: data.startTime, // 使用startTime作为显示时间
-        endTime: data.endTime,
-        startUserId: data.startUserId,
-        startUserName: data.startUserName,
-        startUserInfo: data.startUserInfo,
-        processStatus: data.processStatus,
-        processStatusDesc: data.processStatusDesc,
-        ccUserList: data.ccUserList || []
-    }
-
-    // 直接保存节点数据，不进行拆分
-    state.nodes = data.nodes || []
-
-    // 清空原有的分类数据
-    state.historyRecords = []
-    state.currentNodes = []
-    state.futureNodes = []
-
-    state.approvalDetail = data
-    state.loading = false
-
-    emit('load-success', data)
-}
-
-// 判断是否可以删除备注（只能删除自己的备注）
-const canDeleteRemark = (remark) => {
-    if (!state.currentUser) {
-        try {
-            const userStr = localStorage.getItem('user')
-            if (userStr) {
-                state.currentUser = JSON.parse(userStr)
-            }
-        } catch (e) {
-            console.error('解析用户信息失败', e)
-            return false
-        }
-    }
-
-    // 如果没有获取到当前用户信息，则不允许删除
-    if (!state.currentUser || !state.currentUser.userId) {
-        return false
-    }
-
-    // 判断备注的用户ID是否与当前用户ID一致
-    const remarkUserId = remark.userId || remark.userDetail?.userId
-    return remarkUserId && String(remarkUserId) === String(state.currentUser.userId)
-}
-
-// 处理审批详情错误
-const handleApprovalDetailError = (err) => {
-    state.loading = false
-    message.error(err.message || '获取审批信息失败')
-}
-
-// 请求审批详情
-const requestApprovalDetail = (businessKey, type) => {
-    state.loading = true
-
-    const requestData = {
-        businessKey: businessKey,
-        businessType: type
-    }
-
-    // 使用新的接口获取审批详情
-    dataService.fetch(
-        requestData,
-        {},
-        '/tasks/approval-detail'
-    ).then((res) => {
-        console.log("approval-detail res", res)
-        handleApprovalDetailResponse(res)
-    }).catch((err) => {
-        handleApprovalDetailError(err)
-    })
-}
-
-// 获取操作类型的样式类
-const getOperationClass = (operationType, operationResult) => {
-    const typeMap = {
-        'START': 'start',
-        'COMPLETE': operationResult === '通过' ? 'approved' : operationResult === '拒绝' ? 'rejected' : 'completed',
-        'CLAIM': 'claimed',
-        'ASSIGN': 'assigned',
-        'TRANSFER': 'transferred',
-        'REJECT': 'rejected',
-        'ADD_SIGN': 'add-sign'
-    }
-    return typeMap[operationType] || 'default'
-}
-
-// 获取操作类型的文本
-const getOperationTypeText = (approver) => {
-    if (!approver.operation) {
-        return getSimpleStatusText(null, approver)
-    }
-
-    const operationType = approver.operation.operationType
-    switch (operationType) {
-        case 'COMPLETE':
-            // 从operationData中获取审批结果
-            try {
-                const operationData = JSON.parse(approver.operation.operationData || '{}')
-                if (operationData.approved === true) {
-                    return '已同意'
-                } else if (operationData.approved === false) {
-                    return '已拒绝'
-                }
-            } catch (e) {
-                // 解析失败，使用默认逻辑
-            }
-            return '已完成'
-        case 'TRANSFER':
-            return '转审'
-        case 'ADD_SIGN':
-            const operationData = JSON.parse(approver.operation.operationData || '{}')
-            if (operationData.position == 'before') {
-                return "向前加签";
-            }
-            return '已同意并加签'
-        // return '加签'
-        case 'REJECT':
-            return '驳回'
-        case 'RETURN':
-            return '退回'
-        case 'CLAIM':
-            return '认领'
-        case 'ASSIGN':
-            return '分配'
-        default:
-            return '已处理'
-    }
-}
-
-// 获取流程状态主题
-const getProcessStatusTheme = (status) => {
-    const statusMap = {
-        'CANCELED': 'default',
-        'REJECTED': 'danger',
-        'APPROVED': "success",
-        'ACTIVE': 'primary',
-        'COMPLETED': 'success',
-        'SUSPENDED': 'warning'
-    }
-    return statusMap[status] || 'default'
-}
-
-// 获取流程状态文本
-const getProcessStatusText = (status) => {
-    const statusMap = {
-        'CANCELED': '已取消',
-        'REJECTED': '已驳回',
-        'APPROVED': "已通过",
-        'ACTIVE': '进行中',
-        'COMPLETED': '已完成',
-        'SUSPENDED': '已暂停'
-    }
-    return statusMap[status] || status
-}
-
-// 获取节点状态主题
-const getNodeStatusTheme = (node) => {
-    switch (node.nodeStatus) {
-        case 'COMPLETED':
-            return 'success'
-        case 'ACTIVE':
-            return 'primary'
-        default:
-            return 'default'
-    }
-}
-
-// 获取节点状态文本
-const getNodeStatusText = (node) => {
-    switch (node.nodeStatus) {
-        case 'COMPLETED':
-            return '已完成'
-        case 'ACTIVE':
-            return '进行中'
-        default:
-            return '未开始'
-    }
-}
-
-// 获取已完成的审批人
-const getCompletedApprovers = (node) => {
-    if (!node.approvers) return []
-    return node.approvers.filter(approver => approver.approvalStatus === 'COMPLETED')
-}
-
-// 获取当前审批人
-const getCurrentApprover = (node) => {
-    if (!node.approvers) return null
-    return node.approvers.find(approver => approver.approvalStatus === 'ACTIVE' && approver.isCurrent)
-}
-
-// 获取待处理审批人
-const getPendingApprovers = (node) => {
-    if (!node.approvers) return []
-    return node.approvers.filter(approver => approver.approvalStatus === 'PENDING')
-}
-
-// 获取用户信息
-const getUserInfo = (approver) => {
-    // 新数据结构：用户信息在nodeUser对象中
-    const userInfo = approver.nodeUser || approver
-    return {
-        userId: userInfo.userId,
-        name: userInfo.userName,
-        employeeNo: userInfo.employeeNo,
-        photo: userInfo.photo,
-        departmentName: userInfo.deptName,
-        position: userInfo.position,
-        phone: userInfo.phone,
-        email: userInfo.email
-    }
-}
-
-// 判断流程是否已完成
-const isProcessCompleted = () => {
-    return state.processInfo && state.processInfo.processStatus === 'COMPLETED'
-}
-
-// 获取简单步骤图标类
-const getSimpleStepIconClass = (node) => {
-    switch (node.nodeStatus) {
-        case 'COMPLETED':
-            return 'step-icon-completed'
-        case 'ACTIVE':
-            return 'step-icon-active'
-        default:
-            return 'step-icon-waiting'
-    }
-}
-
-// 获取抄送简单图标类
-const getCcSimpleIconClass = () => {
-    return isProcessCompleted() ? 'step-icon-completed' : 'step-icon-waiting'
-}
-
-// 获取简单状态文本
-const getSimpleStatusText = (node, approver) => {
-    // 优先使用approvalResult
-    if (approver.approvalResult) {
-        return approver.approvalResult === '通过' ? '已同意' : approver.approvalResult === '拒绝' ? '已拒绝' : '已完成'
-    }
-    // 如果没有approvalResult，使用approved字段
-    if (approver.approved !== null && approver.approved !== undefined) {
-        return approver.approved ? '已同意' : '已拒绝'
-    }
-    // 默认返回已完成
-    return '已完成'
-}
-
-// 格式化时间
-const formatTime = (timeStr) => {
-    if (!timeStr) return '--'
-
-    let date
-    // 如果是数字（时间戳），直接使用
-    if (typeof timeStr === 'number') {
-        date = new Date(timeStr)
-    } else {
-        // 如果是字符串，尝试解析
-        date = new Date(timeStr)
-    }
-
-    if (isNaN(date.getTime())) return timeStr
-
-    const month = date.getMonth() + 1
-    const day = date.getDate()
-    const hours = date.getHours().toString().padStart(2, '0')
-    const minutes = date.getMinutes().toString().padStart(2, '0')
-
-    return `${month}/${day} ${hours}:${minutes}`
-}
-
-// 获取抄送时间文本
-const getCcTimeText = () => {
-    if (isProcessCompleted()) {
-        return `已抄送 · ${formatTime(state.processInfo.endTime || state.processInfo.startTimeStr)}`
-    }
-    return ''
-}
-
-// 获取发起人信息
-const getStartUserInfo = () => {
-    // 优先从历史记录中查找发起人
-    const startRecord = state.historyRecords.find(record => record.operationType === 'START')
-    if (startRecord) {
-        return {
-            userId: startRecord.operatorId,
-            userInfo: startRecord.assigneeInfo
-        }
-    }
-
-    // 如果没有发起记录，从流程信息中获取
-    if (state.processInfo && state.processInfo.startUserId) {
-        return {
-            userId: state.processInfo.startUserId,
-            userInfo: state.processInfo.startUserInfo || {
-                name: state.processInfo.startUserName || '未知用户'
-            }
-        }
-    }
-
-    // 如果都没有，尝试从第一个已完成节点的审批人获取（可能是发起人）
-    if (state.historyRecords.length > 0) {
-        const firstRecord = state.historyRecords[0]
-        return {
-            userId: firstRecord.operatorId,
-            userInfo: firstRecord.assigneeInfo
-        }
-    }
-
-    return { userId: '', userInfo: {} }
-}
-
-// 处理增加抄送人
-const handleAddCcUser = () => {
-    console.log("handleAddCcUser")
-    state.showCcListSelector = true
-    emit('add-cc-user', {
-        processInstanceId: state.processInfo?.processInstanceId,
-        businessKey: state.processInfo?.businessKey,
-        processDefinitionKey: state.processInfo?.processDefinitionKey
-    })
-}
-
-function onAddCcListConfirm(event) {
-    let selectedCCList = event.map(item => Number(item))
-    if (selectedCCList?.length === 0) return
-    state.showCcListSelector = false
-    dataService.fetch(
-        {
-            businessKey: state.processInfo?.businessKey,
-            type: state.processInfo?.processDefinitionKey,
-            processInstanceId: state.processInfo?.processInstanceId,
-            ccUsers: selectedCCList
-        },
-        {},
-        '/tasks/batchAddCcInfo'
-    )
-        .then((res) => {
-            // 重新加载数据
-            requestApprovalDetail(String(props.businessKey), props.type)
-            message.success("添加成功")
-        })
-        .catch((err) => {
-            message.error(err.message)
-        })
-}
-
-// 判断是否需要显示目标用户
-const needShowTargetUser = (approver) => {
-    if (!approver.operation || !approver.targetUsers) return false
-
-    return true;
-    // const operationType = approver.operation.operationType
-    // return ['TRANSFER', 'ADD_SIGN', 'RETURN'].includes(operationType)
-}
-
-// 获取目标用户标签
-const getTargetUserLabel = (approver) => {
-    if (!approver.operation) return ''
-
-    const operationType = approver.operation.operationType
-    switch (operationType) {
-        case 'TRANSFER':
-            return '转审给：'
-        case 'ADD_SIGN':
-            return '加签：'
-        case 'RETURN':
-            return '退回给：'
-        default:
-            return '目标：'
-    }
-}
-
-// 获取目标用户信息
-const getTargetUserInfo = (targetUser) => {
-    // const targetUser = approver.targetUser
-    return {
-        userId: targetUser.userId,
-        name: targetUser.userName,
-        employeeNo: targetUser.employeeNo,
-        photo: targetUser.photo,
-        departmentName: targetUser.deptName,
-        position: targetUser.position,
-        phone: targetUser.phone,
-        email: targetUser.email
-    }
-}
-
-// 获取流程备注列表
-const fetchProcessRemarks = () => {
-    if (!props.businessKey || !props.type) return
-
-    state.remarksLoading = true
-    dataService.fetch(
-        {
-            businessKey: props.businessKey,
-            processKey: props.type
-        },
-        {},
-        '/process/remark/list'
-    ).then(res => {
-        // API 返回的数据结构是 { code, message, data }，data 才是实际的备注数组
-        state.remarks = res || []
-        state.remarksLoading = false
-    }).catch(err => {
-        message.error('获取备注失败：' + (err.message || '未知错误'))
-        state.remarksLoading = false
-        state.remarks = []
-    })
-}
-
-// 确认删除备注
-const confirmDeleteRemark = (remark) => {
-    state.remarkToDelete = remark
-    state.showDeleteConfirmDialog = true
-}
-
-// 取消删除备注
-const cancelDeleteRemark = () => {
-    state.showDeleteConfirmDialog = false
-    state.remarkToDelete = null
-}
-
-// 删除备注
-const deleteRemark = () => {
-    if (!state.remarkToDelete || !state.remarkToDelete.id) {
-        message.error('备注信息不完整，无法删除')
-        state.showDeleteConfirmDialog = false
-        return
-    }
-
-    state.deletingRemark = true
-
-    dataService.fetch(
-        {},
-        {},
-        '/process/remark/delete/' + state.remarkToDelete.id,
-        'POST'
-    ).then(res => {
-        message.success('删除备注成功')
-        state.deletingRemark = false
-        state.showDeleteConfirmDialog = false
-        state.remarkToDelete = null
-
-        // 重新获取备注列表
-        fetchProcessRemarks()
-    }).catch(err => {
-        message.error('删除备注失败：' + (err.message || '未知错误'))
-        state.deletingRemark = false
-    })
-}
-
-// 显示添加备注对话框
-const showAddRemarkDialog = () => {
-    state.newRemark = {
-        content: '',
-        attachments: []
-    }
-    state.showRemarkDialog = true
-}
-
-// 取消添加备注
-const cancelAddRemark = () => {
-    state.showRemarkDialog = false
-}
-
-// 处理附件上传成功
-const handleUploadSuccess = (file, fileList) => {
-    // 这里可以处理文件上传后的回调，如果需要的话
-    console.log('文件上传成功', file, fileList)
-}
-
-// 提交备注
-const submitRemark = () => {
-    if (!state.newRemark.content.trim()) {
-        message.warning('请输入备注内容')
-        return
-    }
-
-    state.submittingRemark = true
-
-    // 准备附件数据
-    const attachments = state.newRemark.attachments.map(file => ({
-        url: file.url || file.response?.url,
-        name: file.name,
-        size: file.size,
-        type: file.raw?.type || file.type
-    }))
-
-    // 提交备注请求
-    dataService.fetch(
-        {
-            businessKey: props.businessKey,
-            processKey: props.type,
-            content: state.newRemark.content,
-            attachments: attachments
-        },
-        {},
-        '/process/remark/add',
-        'POST'
-    ).then(res => {
-        message.success('添加备注成功')
-        state.submittingRemark = false
-        state.showRemarkDialog = false
-
-        // 重新获取备注列表
-        fetchProcessRemarks()
-    }).catch(err => {
-        message.error('添加备注失败：' + (err.message || '未知错误'))
-        state.submittingRemark = false
-    })
-}
-
-// 组件挂载时请求数据
-onMounted(() => {
-    if (props.businessKey && props.type) {
-        requestApprovalDetail(String(props.businessKey), props.type)
-        fetchProcessRemarks()
-    }
-})
-
-// 暴露方法供外部调用
-defineExpose({
-    requestApprovalDetail,
-    fetchProcessRemarks,
-    state
-})
-</script>
-
-<style scoped>
-.ebiz-approval-process {
-    width: 100%;
-}
-
-.card {
-    background-color: #ffffff;
-    padding: 10px;
-}
-
-.title {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-}
-
-.process-info {
-    background-color: #fafafa;
-    padding: 10px 12px;
-    border-radius: 6px;
-    margin-bottom: 12px;
-    border: 1px solid #f0f0f0;
-}
-
-.info-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 6px;
-}
-
-.info-item:last-child {
-    margin-bottom: 0;
-}
-
-.label {
-    font-weight: 500;
-    color: #595959;
-    margin-right: 8px;
-    min-width: 70px;
-    font-size: 13px;
-}
-
-.step-content {
-    /* padding: 8px 0; */
-}
-
-.operation-info {
-    margin-bottom: 8px;
-}
-
-.operation-tag {
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    display: inline-block;
-}
-
-.operation-tag.start {
-    background-color: #f3e5f5;
-    color: #7b1fa2;
-}
-
-.operation-tag.approved {
-    background-color: #e8f5e8;
-    color: #388e3c;
-}
-
-.operation-tag.rejected {
-    background-color: #ffebee;
-    color: #d32f2f;
-}
-
-.operation-tag.completed {
-    background-color: #e3f2fd;
-    color: #1976d2;
-}
-
-.operation-tag.claimed {
-    background-color: #f3e5f5;
-    color: #7b1fa2;
-}
-
-.operation-tag.assigned {
-    background-color: #e0f2f1;
-    color: #00695c;
-}
-
-.operation-tag.transferred {
-    background-color: #fff8e1;
-    color: #f57c00;
-}
-
-.operation-tag.add-sign {
-    background-color: #fce4ec;
-    color: #c2185b;
-}
-
-.operation-tag.pending {
-    background-color: #fff3e0;
-    color: #f57c00;
-}
-
-.operation-tag.future {
-    background-color: #f5f5f5;
-    color: #757575;
-}
-
-.operation-tag.cc-status {
-    background-color: #fffbe6;
-    color: #faad14;
-}
-
-.operation-tag.cc-pending {
-    background-color: #f5f5f5;
-    color: #999999;
-}
-
-.step-detail {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 4px;
-    font-size: 14px;
-}
-
-.step-detail:last-child {
-    margin-bottom: 0;
-}
-
-.current-step {
-    background-color: #f8f9fa;
-    padding: 12px;
-    border-radius: 8px;
-    border-left: 4px solid #1976d2;
-}
-
-.future-step {
-    opacity: 0.7;
-}
-
-.multi-instance-details {
-    margin-top: 8px;
-}
-
-.instance-list {
-    margin-top: 12px;
-}
-
-.instance-item {
-    background-color: #ffffff;
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
-    padding: 8px;
-    margin-bottom: 8px;
-}
-
-.instance-item:last-child {
-    margin-bottom: 0;
-}
-
-.instance-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 4px;
-}
-
-.instance-status {
-    padding: 2px 6px;
-    border-radius: 3px;
-    font-size: 11px;
-    font-weight: 500;
-}
-
-.instance-approved {
-    background-color: #e8f5e8;
-    color: #388e3c;
-}
-
-.instance-rejected {
-    background-color: #ffebee;
-    color: #d32f2f;
-}
-
-.instance-completed {
-    background-color: #e3f2fd;
-    color: #1976d2;
-}
-
-.instance-pending {
-    background-color: #fff3e0;
-    color: #f57c00;
-}
-
-.instance-comment {
-    font-size: 12px;
-    color: #666;
-    margin-bottom: 4px;
-    line-height: 1.4;
-}
-
-.instance-time {
-    font-size: 11px;
-    color: #999;
-}
-
-.multi-instance-badge {
-    background-color: #e3f2fd;
-    color: #1976d2;
-    padding: 2px 6px;
-    border-radius: 3px;
-    font-size: 11px;
-    font-weight: 500;
-}
-
-.instance-section {
-    margin-bottom: 12px;
-}
-
-.instance-section h5 {
-    font-size: 12px;
-    color: #666;
-    margin: 0 0 8px 0;
-    font-weight: 500;
-}
-
-.instance-section:last-child {
-    margin-bottom: 0;
-}
-
-/* 用户信息相关样式 */
-.assignee-info {
-    display: flex;
-    align-items: center;
-}
-
-.approver-info {
-    margin-bottom: 12px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #f0f0f0;
-}
-
-.approver-info:last-child {
-    margin-bottom: 0;
-    border-bottom: none;
-}
-
-.candidate-users {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: center;
-}
-
-.candidate-user {
-    background-color: #f8f9fa;
-    padding: 4px 8px;
-    border-radius: 12px;
-    border: 1px solid #e9ecef;
-}
-
-/* 抄送人相关样式 */
-.cc-users {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    align-items: center;
-}
-
-.cc-user {
-    background-color: #f6ffed;
-    padding: 3px 6px;
-    border-radius: 10px;
-    border: 1px solid #d9f7be;
-    font-size: 12px;
-}
-
-.cc-users-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.cc-user-item {
-    background-color: #fffbe6;
-    padding: 8px;
-    border-radius: 8px;
-    border: 1px solid #ffd666;
-}
-
-/* 简化审批步骤样式 */
-.simple-approval-steps {
-    background-color: #ffffff;
-    padding: 12px 16px;
-}
-
-.simple-step-item {
-    position: relative;
-    padding-bottom: 16px;
-    border-left: 2px solid #e8e8e8;
-    margin-left: 10px;
-}
-
-.simple-step-item:last-child {
-    border-left: none;
-    padding-bottom: 0;
-}
-
-.step-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 8px;
-    margin-left: -11px;
-}
-
-.step-icon {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 10px;
-    flex-shrink: 0;
-    position: relative;
-    z-index: 1;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.step-icon-completed {
-    background: linear-gradient(135deg, #52c41a, #73d13d);
-}
-
-.step-icon-active {
-    background: linear-gradient(135deg, #1890ff, #40a9ff);
-}
-
-.step-icon-waiting {
-    background: linear-gradient(135deg, #d9d9d9, #f0f0f0);
-}
-
-.step-info {
-    flex: 1;
-}
-
-.step-title-row {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-}
-
-.step-title {
-    font-size: 15px;
-    font-weight: 600;
-    color: #262626;
-    line-height: 1.3;
-    flex: 1;
-    margin-right: 8px;
-}
-
-.step-status {
-    margin-left: 8px;
-    white-space: nowrap;
-}
-
-.step-content {
-    margin-left: 19px;
-    padding-bottom: 4px;
-}
-
-.simple-approver-wrapper {
-    padding: 6px 0;
-    margin: 6px 0;
-    border-bottom: 1px solid #f5f5f5;
-}
-
-.simple-approver-wrapper:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
-}
-
-.simple-approver {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    min-height: 40px;
-}
-
-.approver-user-info {
-    flex: 1;
-    margin-right: 8px;
-}
-
-.approver-action-info {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    white-space: nowrap;
-}
-
-.action-type {
-    font-size: 12px;
-    font-weight: 500;
-    color: #1890ff;
-    margin-bottom: 2px;
-}
-
-.target-user-info {
-    padding: 8px 12px;
-    background-color: #f8f9fa;
-    border-radius: 6px;
-    border-left: 3px solid #1890ff;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.target-label {
-    font-size: 12px;
-    color: #666;
-    font-weight: 500;
-    white-space: nowrap;
-}
-
-.approver-time {
-    font-size: 11px;
-    color: #8c8c8c;
-    margin-left: 8px;
-    white-space: nowrap;
-    font-weight: 500;
-}
-
-.approver-comment {
-    background-color: #fafafa;
-    padding: 8px 12px;
-    border-radius: 6px;
-    font-size: 12px;
-    color: #595959;
-    line-height: 1.4;
-    width: 100%;
-    border: 1px solid #f0f0f0;
-    box-sizing: border-box;
-}
-
-/* 增加抄送人按钮样式 */
-.add-cc-button-inline {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 11px;
-    border-color: #d9d9d9;
-    color: #666;
-    height: 24px;
-    padding: 0 8px;
-    white-space: nowrap;
-}
-
-.add-cc-button-inline:hover {
-    border-color: #1890ff;
-    color: #1890ff;
-}
-
-/* 备注相关样式 */
-.card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-}
-
-.card-actions {
-    display: flex;
-    align-items: center;
-}
-
-.remark-list {
-    padding: 0 4px;
-}
-
-.remark-item {
-    padding: 12px 0;
-    border-bottom: 1px solid #f0f0f0;
-}
-
-.remark-item:last-child {
-    border-bottom: none;
-}
-
-.remark-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-}
-
-.remark-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.remark-time {
-    font-size: 12px;
-    color: #8c8c8c;
-}
-
-.delete-btn {
-    opacity: 0.6;
-    padding: 0 4px;
-    height: 24px;
-    min-width: 24px;
-}
-
-.delete-btn:hover {
-    opacity: 1;
-}
-
-.delete-confirm-content {
-    display: flex;
-    align-items: center;
-    padding: 16px 0;
-}
-
-.remark-content {
-    margin-bottom: 10px;
-    font-size: 14px;
-    line-height: 1.6;
-    color: #333;
-    word-break: break-word;
-}
-
-.remark-attachments {
-    background-color: #f9f9f9;
-    padding: 8px;
-    border-radius: 4px;
-}
-
-.no-remarks {
-    padding: 24px 0;
-    text-align: center;
-}
-
-.no-remarks-tip {
-    color: #999;
-    font-size: 14px;
-}
-
-.remark-form {
-    padding: 10px 0;
-}
-
-.remark-form-footer {
-    margin-top: 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.remark-form-actions {
-    display: flex;
-    gap: 8px;
-}
+<template>
+    <div class="ebiz-approval-process">
+        <div class="block-base-style">
+            <ebiz-tdesign-loading v-if="state.loading" :loading="true" theme="circular" size="small" text=""
+                :reverse="false" layout="vertical" :delay="0" class="component-base-style">
+                <span style="display: inline-block" class="component-base-style">加载中</span>
+            </ebiz-tdesign-loading>
+
+            <div class="card">
+                <div style="margin: 10px 0" class="component-base-style">
+                    <span style="display: inline-block" class="title">审批流程</span>
+                </div>
+
+                <!-- 流程基本信息 -->
+                <div v-if="state.processInfo" class="process-info">
+                    <div class="info-item" v-if="getStartUserInfo().userId">
+                        <span class="label">发起人：</span>
+                        <user-info :userId="getStartUserInfo().userId" :userInfo="getStartUserInfo().userInfo"
+                            avatar-size="small" name-size="small" :show-job-number="true" :show-department="false" />
+                    </div>
+                    <div class="info-item">
+                        <span class="label">发起时间：</span>
+                        <span>{{ state.processInfo.startTimeStr || '--' }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">流程状态：</span>
+                        <t-tag :theme="getProcessStatusTheme(state.processInfo.processStatus)" size="small">
+                            {{ getProcessStatusText(state.processInfo.processStatus) }}
+                        </t-tag>
+                    </div>
+                    <!-- 抄送人信息 -->
+                </div>
+
+                <!-- 审批步骤 -->
+                <div class="simple-approval-steps">
+                    <!-- 节点步骤 -->
+                    <div v-for="(node, index) in state.nodes" :key="'node-' + index" class="simple-step-item">
+
+                        <div
+                            v-if="node.nodeStatus == 'PENDING' && getPendingApprovers(node).length === 0 && state.processInfo.processStatus != 'ACTIVE'">
+                        </div>
+                        <div v-else>
+                            <div class="step-header">
+                                <div class="step-icon" :class="getSimpleStepIconClass(node)">
+                                    <t-icon name="user" size="12px" color="white" />
+                                </div>
+                                <div class="step-info">
+                                    <div class="step-title-row">
+                                        <span class="step-title">{{ node.nodeName }}</span>
+                                        <t-tag :theme="getNodeStatusTheme(node)" size="small">
+                                            {{ getNodeStatusText(node) }}
+                                        </t-tag>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- 简化的审批人信息 -->
+                            <div class="step-content">
+                                <!-- 已完成节点 -->
+                                <div v-for="approver in getCompletedApprovers(node)"
+                                    :key="approver.nodeUser?.userId || approver.userId" class="simple-approver-wrapper">
+                                    <div class="simple-approver">
+                                        <!-- 操作用户信息 -->
+                                        <div class="approver-user-info">
+                                            <user-info :userId="approver.nodeUser?.userId || approver.userId"
+                                                :userInfo="getUserInfo(approver)" avatar-size="small" name-size="small"
+                                                :show-department="false" />
+                                        </div>
+
+                                        <!-- 操作类型和时间 -->
+                                        <div class="approver-action-info">
+                                            <div class="action-type">{{ getOperationTypeText(approver) }}</div>
+                                            <div class="approver-time">{{ formatTime(approver.operation?.operationTime
+                                                ||
+                                                approver.completedTime || approver.endTime) }}</div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 目标用户信息（转审、加签等操作） -->
+                                    <div v-if="approver.targetUsers && needShowTargetUser(approver)"
+                                        class="target-user-info">
+                                        <div class="target-label">{{ getTargetUserLabel(approver) }}</div>
+                                        <div style="display: flex; flex-direction: column; gap: 4px;">
+                                            <div v-for="targetUser in approver.targetUsers" :key="targetUser.userId">
+                                                <user-info :userId="targetUser.userId"
+                                                    :userInfo="getTargetUserInfo(targetUser)" avatar-size="small"
+                                                    name-size="small" :show-department="false" />
+                                            </div>
+                                        </div>
+                                    </div>
+
+
+                                    <!-- 评论信息 -->
+                                    <div v-if="approver.comment || (approver.operation.attachmentsList && approver.operation.attachmentsList.length > 0)"
+                                        class="approver-comment">
+                                        <div v-if="approver.comment">{{ approver.comment }}</div>
+                                        <div
+                                            v-if="approver.operation.attachmentsList && approver.operation.attachmentsList.length > 0">
+                                            <ebiz-file-list size="mini" :files="approver.operation.attachmentsList" />
+                                        </div>
+                                    </div>
+                                    <!-- <div v-if="approver.comment" class="approver-comment">{{ approver.comment }}</div> -->
+                                </div>
+
+                                <!-- 进行中节点 -->
+                                <!-- 当前处理人 -->
+                                <div v-if="getCurrentApprover(node)" class="simple-approver">
+                                    <user-info
+                                        :userId="getCurrentApprover(node).nodeUser?.userId || getCurrentApprover(node).userId"
+                                        :userInfo="getUserInfo(getCurrentApprover(node))" avatar-size="small"
+                                        name-size="small" :show-department="false" />
+                                    <div class="approver-time">处理中</div>
+                                </div>
+
+                                <!-- 待处理人 -->
+                                <div v-for="approver in getPendingApprovers(node)"
+                                    :key="'pending-' + (approver.nodeUser?.userId || approver.userId)"
+                                    class="simple-approver">
+                                    <user-info :userId="approver.nodeUser?.userId || approver.userId"
+                                        :userInfo="getUserInfo(approver)" avatar-size="small" name-size="small"
+                                        :show-department="false" />
+                                    <!-- <div class="approver-time">待处理</div> -->
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 抄送人步骤 -->
+                    <div v-if="state.processInfo" class="simple-step-item">
+                        <div class="step-header">
+                            <div class="step-icon" :class="getCcSimpleIconClass()">
+                                <t-icon name="mail" size="12px" color="white" />
+                            </div>
+                            <div class="step-info">
+                                <div class="step-title-row">
+                                    <span class="step-title">抄送</span>
+                                    <!-- 增加抄送人按钮 -->
+                                    <div v-if="state.processInfo.processStatus === 'ACTIVE'">
+                                        <ebiz-employee-selector content="增加抄送人" :single="false"
+                                            defaultTab="organization" class="component-base-style"
+                                            @click="handleAddCcUser" @confirm="onAddCcListConfirm">
+                                            <template #selected-items="{ event, data }">
+                                                <div></div>
+                                            </template>
+                                        </ebiz-employee-selector>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="step-content">
+                            <div v-for="ccUser in state.processInfo.ccUserList"
+                                :key="ccUser.nodeUser?.userId || ccUser.userId" class="simple-approver">
+                                <user-info :userId="ccUser.nodeUser?.userId || ccUser.userId"
+                                    :userInfo="ccUser.nodeUser || ccUser" avatar-size="small" name-size="small"
+                                    :show-department="false" />
+                                <div class="approver-time">{{ getCcTimeText() }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 备注部分 -->
+            <div class="block-base-style">
+                <div class="card">
+                    <div class="card-header">
+                        <span class="title">备注 <span v-if="state.remarks.length > 0">({{ state.remarks.length
+                        }})</span></span>
+                        <div class="card-actions">
+                            <t-button variant="text" @click="showAddRemarkDialog">添加备注</t-button>
+                        </div>
+                    </div>
+
+                    <!-- 备注列表 -->
+                    <div class="remark-list" v-if="state.remarks.length > 0">
+                        <div v-for="remark in state.remarks" :key="remark.id" class="remark-item">
+                            <div class="remark-header">
+                                <user-info :userId="remark.userId" :userInfo="remark.userDetail" avatar-size="small"
+                                    name-size="small" :show-job-number="true" :show-department="false" />
+                                <div class="remark-actions">
+                                    <div class="remark-time">{{ remark.createdTimeStr }}</div>
+                                    <t-button v-if="canDeleteRemark(remark)" variant="text" theme="danger" size="small"
+                                        class="delete-btn" @click="confirmDeleteRemark(remark)">
+                                        <t-icon name="delete" />
+                                    </t-button>
+                                </div>
+                            </div>
+                            <div class="remark-content">{{ remark.content }}</div>
+                            <div class="remark-attachments" v-if="remark.attachments && remark.attachments.length > 0">
+                                <ebiz-file-list size="mini" :files="remark.attachments" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 无备注时的提示 -->
+                    <div class="no-remarks" v-else>
+                        <div class="no-remarks-tip">暂无备注信息</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 添加备注对话框 -->
+            <t-dialog v-model:visible="state.showRemarkDialog" header="添加备注" :width="500" :footer="false" attach="body"
+                :close-on-overlay-click="false" :close-btn="true">
+                <div class="remark-form">
+                    <t-textarea v-model="state.newRemark.content" placeholder="请输入备注内容" :maxlength="500"
+                        :autosize="{ minRows: 3, maxRows: 5 }" />
+
+                    <div>
+                        <ebiz-upload v-model="state.newRemark.attachments" :multiple="true" theme="file">
+                            <template #trigger>
+                                <t-button variant="outline">
+                                    <template #icon>
+                                        <t-icon name="attach" />
+                                    </template>
+                                    上传附件
+                                </t-button>
+                            </template>
+                        </ebiz-upload>
+                    </div>
+                    <div class="remark-form-footer">
+                        <div></div>
+                        <div class="remark-form-actions">
+                            <t-button theme="default" @click="cancelAddRemark">取消</t-button>
+                            <t-button theme="primary" :loading="state.submittingRemark"
+                                @click="submitRemark">提交</t-button>
+                        </div>
+                    </div>
+                </div>
+            </t-dialog>
+
+            <!-- 删除确认对话框 -->
+            <t-dialog v-model:visible="state.showDeleteConfirmDialog" header="删除确认" :width="400"
+                :confirm-btn="{ content: '确认', theme: 'danger', loading: state.deletingRemark }"
+                :cancel-btn="{ content: '取消', theme: 'default' }" @confirm="deleteRemark" @cancel="cancelDeleteRemark">
+                <div class="delete-confirm-content">
+                    <t-icon name="error-circle-filled" size="large" style="color: #E34D59; margin-right: 8px;" />
+                    <span>确定要删除此备注吗？此操作不可恢复。</span>
+                </div>
+            </t-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+/**
+ * @displayName 审批流程
+ * @description 审批流程组件，用于展示审批流程的详细信息
+ * @category 业务组件
+ * @name EbizApprovalProcess
+ */
+export default {
+    name: "EbizApprovalProcess",
+    components: {
+        't-tag': Tag,
+        't-icon': Icon,
+        't-button': Button,
+        't-dialog': Dialog,
+        't-textarea': Textarea,
+        't-upload': Upload
+    }
+}
+</script>
+
+<script setup>
+import { reactive, onMounted, ref } from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { Tag, Icon, Button, Dialog, Textarea, Upload, MessagePlugin as message } from 'tdesign-vue-next'
+import EbizEmployeeSelector from './EbizEmployeeSelector.vue'
+import EbizTdesignLoading from './EbizTdesignLoading.vue'
+import dataService from '../apiService/simpleDataService.js'
+import UserInfo from './mItems/UserInfo.vue'
+import EbizFileList from './EbizFileList.vue'
+import { EbizUpload } from '../index.js'
+
+// 定义 props
+const props = defineProps({
+    /**
+     * 业务键
+     */
+    businessKey: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 业务类型
+     */
+    type: {
+        type: String,
+        default: ''
+    }
+})
+
+// 定义 emits
+const emit = defineEmits(['load-success', 'add-cc-user'])
+
+// 响应式状态
+const state = reactive({
+    loading: false,
+    processInfo: null,
+    nodes: [], // 直接保存节点数据
+    historyRecords: [],
+    currentNodes: [],
+    futureNodes: [],
+    approvalDetail: {},
+    selectedCCList: [],
+    showCcListSelector: false,
+
+    // 备注相关
+    remarks: [],
+    remarksLoading: false,
+    showRemarkDialog: false,
+    submittingRemark: false,
+    newRemark: {
+        content: '',
+        attachments: []
+    },
+    showDeleteConfirmDialog: false,
+    deletingRemark: false,
+    remarkToDelete: null
+})
+
+// 处理审批详情响应
+const handleApprovalDetailResponse = (data) => {
+    // 构建流程信息
+    state.processInfo = {
+        processInstanceId: data.processInstanceId,
+        businessKey: data.businessKey,
+        processDefinitionKey: data.processDefinitionKey,
+        processDefinitionName: data.processDefinitionName,
+        startTime: data.startTime,
+        startTimeStr: data.startTime, // 使用startTime作为显示时间
+        endTime: data.endTime,
+        startUserId: data.startUserId,
+        startUserName: data.startUserName,
+        startUserInfo: data.startUserInfo,
+        processStatus: data.processStatus,
+        processStatusDesc: data.processStatusDesc,
+        ccUserList: data.ccUserList || []
+    }
+
+    // 直接保存节点数据，不进行拆分
+    state.nodes = data.nodes || []
+
+    // 清空原有的分类数据
+    state.historyRecords = []
+    state.currentNodes = []
+    state.futureNodes = []
+
+    state.approvalDetail = data
+    state.loading = false
+
+    emit('load-success', data)
+}
+
+// 判断是否可以删除备注（只能删除自己的备注）
+const canDeleteRemark = (remark) => {
+    if (!state.currentUser) {
+        try {
+            const userStr = localStorage.getItem('user')
+            if (userStr) {
+                state.currentUser = JSON.parse(userStr)
+            }
+        } catch (e) {
+            console.error('解析用户信息失败', e)
+            return false
+        }
+    }
+
+    // 如果没有获取到当前用户信息，则不允许删除
+    if (!state.currentUser || !state.currentUser.userId) {
+        return false
+    }
+
+    // 判断备注的用户ID是否与当前用户ID一致
+    const remarkUserId = remark.userId || remark.userDetail?.userId
+    return remarkUserId && String(remarkUserId) === String(state.currentUser.userId)
+}
+
+// 处理审批详情错误
+const handleApprovalDetailError = (err) => {
+    state.loading = false
+    message.error(err.message || '获取审批信息失败')
+}
+
+// 请求审批详情
+const requestApprovalDetail = (businessKey, type) => {
+    state.loading = true
+
+    const requestData = {
+        businessKey: businessKey,
+        businessType: type
+    }
+
+    // 使用新的接口获取审批详情
+    dataService.fetch(
+        requestData,
+        {},
+        '/tasks/approval-detail'
+    ).then((res) => {
+        console.log("approval-detail res", res)
+        handleApprovalDetailResponse(res)
+    }).catch((err) => {
+        handleApprovalDetailError(err)
+    })
+}
+
+// 获取操作类型的样式类
+const getOperationClass = (operationType, operationResult) => {
+    const typeMap = {
+        'START': 'start',
+        'COMPLETE': operationResult === '通过' ? 'approved' : operationResult === '拒绝' ? 'rejected' : 'completed',
+        'CLAIM': 'claimed',
+        'ASSIGN': 'assigned',
+        'TRANSFER': 'transferred',
+        'REJECT': 'rejected',
+        'ADD_SIGN': 'add-sign'
+    }
+    return typeMap[operationType] || 'default'
+}
+
+// 获取操作类型的文本
+const getOperationTypeText = (approver) => {
+    if (!approver.operation) {
+        return getSimpleStatusText(null, approver)
+    }
+
+    const operationType = approver.operation.operationType
+    switch (operationType) {
+        case 'COMPLETE':
+            // 从operationData中获取审批结果
+            try {
+                const operationData = JSON.parse(approver.operation.operationData || '{}')
+                if (operationData.approved === true) {
+                    return '已同意'
+                } else if (operationData.approved === false) {
+                    return '已拒绝'
+                }
+            } catch (e) {
+                // 解析失败，使用默认逻辑
+            }
+            return '已完成'
+        case 'TRANSFER':
+            return '转审'
+        case 'ADD_SIGN':
+            const operationData = JSON.parse(approver.operation.operationData || '{}')
+            if (operationData.position == 'before') {
+                return "向前加签";
+            }
+            return '已同意并加签'
+        // return '加签'
+        case 'REJECT':
+            return '驳回'
+        case 'RETURN':
+            return '退回'
+        case 'CLAIM':
+            return '认领'
+        case 'ASSIGN':
+            return '分配'
+        default:
+            return '已处理'
+    }
+}
+
+// 获取流程状态主题
+const getProcessStatusTheme = (status) => {
+    const statusMap = {
+        'CANCELED': 'default',
+        'REJECTED': 'danger',
+        'APPROVED': "success",
+        'ACTIVE': 'primary',
+        'COMPLETED': 'success',
+        'SUSPENDED': 'warning'
+    }
+    return statusMap[status] || 'default'
+}
+
+// 获取流程状态文本
+const getProcessStatusText = (status) => {
+    const statusMap = {
+        'CANCELED': '已取消',
+        'REJECTED': '已驳回',
+        'APPROVED': "已通过",
+        'ACTIVE': '进行中',
+        'COMPLETED': '已完成',
+        'SUSPENDED': '已暂停'
+    }
+    return statusMap[status] || status
+}
+
+// 获取节点状态主题
+const getNodeStatusTheme = (node) => {
+    switch (node.nodeStatus) {
+        case 'COMPLETED':
+            return 'success'
+        case 'ACTIVE':
+            return 'primary'
+        default:
+            return 'default'
+    }
+}
+
+// 获取节点状态文本
+const getNodeStatusText = (node) => {
+    switch (node.nodeStatus) {
+        case 'COMPLETED':
+            return '已完成'
+        case 'ACTIVE':
+            return '进行中'
+        default:
+            return '未开始'
+    }
+}
+
+// 获取已完成的审批人
+const getCompletedApprovers = (node) => {
+    if (!node.approvers) return []
+    return node.approvers.filter(approver => approver.approvalStatus === 'COMPLETED')
+}
+
+// 获取当前审批人
+const getCurrentApprover = (node) => {
+    if (!node.approvers) return null
+    return node.approvers.find(approver => approver.approvalStatus === 'ACTIVE' && approver.isCurrent)
+}
+
+// 获取待处理审批人
+const getPendingApprovers = (node) => {
+    if (!node.approvers) return []
+    return node.approvers.filter(approver => approver.approvalStatus === 'PENDING')
+}
+
+// 获取用户信息
+const getUserInfo = (approver) => {
+    // 新数据结构：用户信息在nodeUser对象中
+    const userInfo = approver.nodeUser || approver
+    return {
+        userId: userInfo.userId,
+        name: userInfo.userName,
+        employeeNo: userInfo.employeeNo,
+        photo: userInfo.photo,
+        departmentName: userInfo.deptName,
+        position: userInfo.position,
+        phone: userInfo.phone,
+        email: userInfo.email
+    }
+}
+
+// 判断流程是否已完成
+const isProcessCompleted = () => {
+    return state.processInfo && state.processInfo.processStatus === 'COMPLETED'
+}
+
+// 获取简单步骤图标类
+const getSimpleStepIconClass = (node) => {
+    switch (node.nodeStatus) {
+        case 'COMPLETED':
+            return 'step-icon-completed'
+        case 'ACTIVE':
+            return 'step-icon-active'
+        default:
+            return 'step-icon-waiting'
+    }
+}
+
+// 获取抄送简单图标类
+const getCcSimpleIconClass = () => {
+    return isProcessCompleted() ? 'step-icon-completed' : 'step-icon-waiting'
+}
+
+// 获取简单状态文本
+const getSimpleStatusText = (node, approver) => {
+    // 优先使用approvalResult
+    if (approver.approvalResult) {
+        return approver.approvalResult === '通过' ? '已同意' : approver.approvalResult === '拒绝' ? '已拒绝' : '已完成'
+    }
+    // 如果没有approvalResult，使用approved字段
+    if (approver.approved !== null && approver.approved !== undefined) {
+        return approver.approved ? '已同意' : '已拒绝'
+    }
+    // 默认返回已完成
+    return '已完成'
+}
+
+// 格式化时间
+const formatTime = (timeStr) => {
+    if (!timeStr) return '--'
+
+    let date
+    // 如果是数字（时间戳），直接使用
+    if (typeof timeStr === 'number') {
+        date = new Date(timeStr)
+    } else {
+        // 如果是字符串，尝试解析
+        date = new Date(timeStr)
+    }
+
+    if (isNaN(date.getTime())) return timeStr
+
+    const month = date.getMonth() + 1
+    const day = date.getDate()
+    const hours = date.getHours().toString().padStart(2, '0')
+    const minutes = date.getMinutes().toString().padStart(2, '0')
+
+    return `${month}/${day} ${hours}:${minutes}`
+}
+
+// 获取抄送时间文本
+const getCcTimeText = () => {
+    if (isProcessCompleted()) {
+        return `已抄送 · ${formatTime(state.processInfo.endTime || state.processInfo.startTimeStr)}`
+    }
+    return ''
+}
+
+// 获取发起人信息
+const getStartUserInfo = () => {
+    // 优先从历史记录中查找发起人
+    const startRecord = state.historyRecords.find(record => record.operationType === 'START')
+    if (startRecord) {
+        return {
+            userId: startRecord.operatorId,
+            userInfo: startRecord.assigneeInfo
+        }
+    }
+
+    // 如果没有发起记录，从流程信息中获取
+    if (state.processInfo && state.processInfo.startUserId) {
+        return {
+            userId: state.processInfo.startUserId,
+            userInfo: state.processInfo.startUserInfo || {
+                name: state.processInfo.startUserName || '未知用户'
+            }
+        }
+    }
+
+    // 如果都没有，尝试从第一个已完成节点的审批人获取（可能是发起人）
+    if (state.historyRecords.length > 0) {
+        const firstRecord = state.historyRecords[0]
+        return {
+            userId: firstRecord.operatorId,
+            userInfo: firstRecord.assigneeInfo
+        }
+    }
+
+    return { userId: '', userInfo: {} }
+}
+
+// 处理增加抄送人
+const handleAddCcUser = () => {
+    console.log("handleAddCcUser")
+    state.showCcListSelector = true
+    emit('add-cc-user', {
+        processInstanceId: state.processInfo?.processInstanceId,
+        businessKey: state.processInfo?.businessKey,
+        processDefinitionKey: state.processInfo?.processDefinitionKey
+    })
+}
+
+function onAddCcListConfirm(event) {
+    let selectedCCList = event.map(item => Number(item))
+    if (selectedCCList?.length === 0) return
+    state.showCcListSelector = false
+    dataService.fetch(
+        {
+            businessKey: state.processInfo?.businessKey,
+            type: state.processInfo?.processDefinitionKey,
+            processInstanceId: state.processInfo?.processInstanceId,
+            ccUsers: selectedCCList
+        },
+        {},
+        '/tasks/batchAddCcInfo'
+    )
+        .then((res) => {
+            // 重新加载数据
+            requestApprovalDetail(String(props.businessKey), props.type)
+            message.success("添加成功")
+        })
+        .catch((err) => {
+            message.error(err.message)
+        })
+}
+
+// 判断是否需要显示目标用户
+const needShowTargetUser = (approver) => {
+    if (!approver.operation || !approver.targetUsers) return false
+
+    return true;
+    // const operationType = approver.operation.operationType
+    // return ['TRANSFER', 'ADD_SIGN', 'RETURN'].includes(operationType)
+}
+
+// 获取目标用户标签
+const getTargetUserLabel = (approver) => {
+    if (!approver.operation) return ''
+
+    const operationType = approver.operation.operationType
+    switch (operationType) {
+        case 'TRANSFER':
+            return '转审给：'
+        case 'ADD_SIGN':
+            return '加签：'
+        case 'RETURN':
+            return '退回给：'
+        default:
+            return '目标：'
+    }
+}
+
+// 获取目标用户信息
+const getTargetUserInfo = (targetUser) => {
+    // const targetUser = approver.targetUser
+    return {
+        userId: targetUser.userId,
+        name: targetUser.userName,
+        employeeNo: targetUser.employeeNo,
+        photo: targetUser.photo,
+        departmentName: targetUser.deptName,
+        position: targetUser.position,
+        phone: targetUser.phone,
+        email: targetUser.email
+    }
+}
+
+// 获取流程备注列表
+const fetchProcessRemarks = () => {
+    if (!props.businessKey || !props.type) return
+
+    state.remarksLoading = true
+    dataService.fetch(
+        {
+            businessKey: props.businessKey,
+            processKey: props.type
+        },
+        {},
+        '/process/remark/list'
+    ).then(res => {
+        // API 返回的数据结构是 { code, message, data }，data 才是实际的备注数组
+        state.remarks = res || []
+        state.remarksLoading = false
+    }).catch(err => {
+        message.error('获取备注失败：' + (err.message || '未知错误'))
+        state.remarksLoading = false
+        state.remarks = []
+    })
+}
+
+// 确认删除备注
+const confirmDeleteRemark = (remark) => {
+    state.remarkToDelete = remark
+    state.showDeleteConfirmDialog = true
+}
+
+// 取消删除备注
+const cancelDeleteRemark = () => {
+    state.showDeleteConfirmDialog = false
+    state.remarkToDelete = null
+}
+
+// 删除备注
+const deleteRemark = () => {
+    if (!state.remarkToDelete || !state.remarkToDelete.id) {
+        message.error('备注信息不完整，无法删除')
+        state.showDeleteConfirmDialog = false
+        return
+    }
+
+    state.deletingRemark = true
+
+    dataService.fetch(
+        {},
+        {},
+        '/process/remark/delete/' + state.remarkToDelete.id,
+        'POST'
+    ).then(res => {
+        message.success('删除备注成功')
+        state.deletingRemark = false
+        state.showDeleteConfirmDialog = false
+        state.remarkToDelete = null
+
+        // 重新获取备注列表
+        fetchProcessRemarks()
+    }).catch(err => {
+        message.error('删除备注失败：' + (err.message || '未知错误'))
+        state.deletingRemark = false
+    })
+}
+
+// 显示添加备注对话框
+const showAddRemarkDialog = () => {
+    state.newRemark = {
+        content: '',
+        attachments: []
+    }
+    state.showRemarkDialog = true
+}
+
+// 取消添加备注
+const cancelAddRemark = () => {
+    state.showRemarkDialog = false
+}
+
+// 处理附件上传成功
+const handleUploadSuccess = (file, fileList) => {
+    // 这里可以处理文件上传后的回调，如果需要的话
+    console.log('文件上传成功', file, fileList)
+}
+
+// 提交备注
+const submitRemark = () => {
+    if (!state.newRemark.content.trim()) {
+        message.warning('请输入备注内容')
+        return
+    }
+
+    state.submittingRemark = true
+
+    // 准备附件数据
+    const attachments = state.newRemark.attachments.map(file => ({
+        url: file.url || file.response?.url,
+        name: file.name,
+        size: file.size,
+        type: file.raw?.type || file.type
+    }))
+
+    // 提交备注请求
+    dataService.fetch(
+        {
+            businessKey: props.businessKey,
+            processKey: props.type,
+            content: state.newRemark.content,
+            attachments: attachments
+        },
+        {},
+        '/process/remark/add',
+        'POST'
+    ).then(res => {
+        message.success('添加备注成功')
+        state.submittingRemark = false
+        state.showRemarkDialog = false
+
+        // 重新获取备注列表
+        fetchProcessRemarks()
+    }).catch(err => {
+        message.error('添加备注失败：' + (err.message || '未知错误'))
+        state.submittingRemark = false
+    })
+}
+
+// 组件挂载时请求数据
+onMounted(() => {
+    if (props.businessKey && props.type) {
+        requestApprovalDetail(String(props.businessKey), props.type)
+        fetchProcessRemarks()
+    }
+})
+
+// 暴露方法供外部调用
+defineExpose({
+    requestApprovalDetail,
+    fetchProcessRemarks,
+    state
+})
+</script>
+
+<style scoped>
+.ebiz-approval-process {
+    width: 100%;
+}
+
+.card {
+    background-color: #ffffff;
+    padding: 10px;
+}
+
+.title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+}
+
+.process-info {
+    background-color: #fafafa;
+    padding: 10px 12px;
+    border-radius: 6px;
+    margin-bottom: 12px;
+    border: 1px solid #f0f0f0;
+}
+
+.info-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 6px;
+}
+
+.info-item:last-child {
+    margin-bottom: 0;
+}
+
+.label {
+    font-weight: 500;
+    color: #595959;
+    margin-right: 8px;
+    min-width: 70px;
+    font-size: 13px;
+}
+
+.step-content {
+    /* padding: 8px 0; */
+}
+
+.operation-info {
+    margin-bottom: 8px;
+}
+
+.operation-tag {
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    display: inline-block;
+}
+
+.operation-tag.start {
+    background-color: #f3e5f5;
+    color: #7b1fa2;
+}
+
+.operation-tag.approved {
+    background-color: #e8f5e8;
+    color: #388e3c;
+}
+
+.operation-tag.rejected {
+    background-color: #ffebee;
+    color: #d32f2f;
+}
+
+.operation-tag.completed {
+    background-color: #e3f2fd;
+    color: #1976d2;
+}
+
+.operation-tag.claimed {
+    background-color: #f3e5f5;
+    color: #7b1fa2;
+}
+
+.operation-tag.assigned {
+    background-color: #e0f2f1;
+    color: #00695c;
+}
+
+.operation-tag.transferred {
+    background-color: #fff8e1;
+    color: #f57c00;
+}
+
+.operation-tag.add-sign {
+    background-color: #fce4ec;
+    color: #c2185b;
+}
+
+.operation-tag.pending {
+    background-color: #fff3e0;
+    color: #f57c00;
+}
+
+.operation-tag.future {
+    background-color: #f5f5f5;
+    color: #757575;
+}
+
+.operation-tag.cc-status {
+    background-color: #fffbe6;
+    color: #faad14;
+}
+
+.operation-tag.cc-pending {
+    background-color: #f5f5f5;
+    color: #999999;
+}
+
+.step-detail {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 4px;
+    font-size: 14px;
+}
+
+.step-detail:last-child {
+    margin-bottom: 0;
+}
+
+.current-step {
+    background-color: #f8f9fa;
+    padding: 12px;
+    border-radius: 8px;
+    border-left: 4px solid #1976d2;
+}
+
+.future-step {
+    opacity: 0.7;
+}
+
+.multi-instance-details {
+    margin-top: 8px;
+}
+
+.instance-list {
+    margin-top: 12px;
+}
+
+.instance-item {
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    padding: 8px;
+    margin-bottom: 8px;
+}
+
+.instance-item:last-child {
+    margin-bottom: 0;
+}
+
+.instance-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.instance-status {
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.instance-approved {
+    background-color: #e8f5e8;
+    color: #388e3c;
+}
+
+.instance-rejected {
+    background-color: #ffebee;
+    color: #d32f2f;
+}
+
+.instance-completed {
+    background-color: #e3f2fd;
+    color: #1976d2;
+}
+
+.instance-pending {
+    background-color: #fff3e0;
+    color: #f57c00;
+}
+
+.instance-comment {
+    font-size: 12px;
+    color: #666;
+    margin-bottom: 4px;
+    line-height: 1.4;
+}
+
+.instance-time {
+    font-size: 11px;
+    color: #999;
+}
+
+.multi-instance-badge {
+    background-color: #e3f2fd;
+    color: #1976d2;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.instance-section {
+    margin-bottom: 12px;
+}
+
+.instance-section h5 {
+    font-size: 12px;
+    color: #666;
+    margin: 0 0 8px 0;
+    font-weight: 500;
+}
+
+.instance-section:last-child {
+    margin-bottom: 0;
+}
+
+/* 用户信息相关样式 */
+.assignee-info {
+    display: flex;
+    align-items: center;
+}
+
+.approver-info {
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.approver-info:last-child {
+    margin-bottom: 0;
+    border-bottom: none;
+}
+
+.candidate-users {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+}
+
+.candidate-user {
+    background-color: #f8f9fa;
+    padding: 4px 8px;
+    border-radius: 12px;
+    border: 1px solid #e9ecef;
+}
+
+/* 抄送人相关样式 */
+.cc-users {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+}
+
+.cc-user {
+    background-color: #f6ffed;
+    padding: 3px 6px;
+    border-radius: 10px;
+    border: 1px solid #d9f7be;
+    font-size: 12px;
+}
+
+.cc-users-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.cc-user-item {
+    background-color: #fffbe6;
+    padding: 8px;
+    border-radius: 8px;
+    border: 1px solid #ffd666;
+}
+
+/* 简化审批步骤样式 */
+.simple-approval-steps {
+    background-color: #ffffff;
+    padding: 12px 16px;
+}
+
+.simple-step-item {
+    position: relative;
+    padding-bottom: 16px;
+    border-left: 2px solid #e8e8e8;
+    margin-left: 10px;
+}
+
+.simple-step-item:last-child {
+    border-left: none;
+    padding-bottom: 0;
+}
+
+.step-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    margin-left: -11px;
+}
+
+.step-icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.step-icon-completed {
+    background: linear-gradient(135deg, #52c41a, #73d13d);
+}
+
+.step-icon-active {
+    background: linear-gradient(135deg, #1890ff, #40a9ff);
+}
+
+.step-icon-waiting {
+    background: linear-gradient(135deg, #d9d9d9, #f0f0f0);
+}
+
+.step-info {
+    flex: 1;
+}
+
+.step-title-row {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.step-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #262626;
+    line-height: 1.3;
+    flex: 1;
+    margin-right: 8px;
+}
+
+.step-status {
+    margin-left: 8px;
+    white-space: nowrap;
+}
+
+.step-content {
+    margin-left: 19px;
+    padding-bottom: 4px;
+}
+
+.simple-approver-wrapper {
+    padding: 6px 0;
+    margin: 6px 0;
+    border-bottom: 1px solid #f5f5f5;
+}
+
+.simple-approver-wrapper:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+}
+
+.simple-approver {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    min-height: 40px;
+}
+
+.approver-user-info {
+    flex: 1;
+    margin-right: 8px;
+}
+
+.approver-action-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    white-space: nowrap;
+}
+
+.action-type {
+    font-size: 12px;
+    font-weight: 500;
+    color: #1890ff;
+    margin-bottom: 2px;
+}
+
+.target-user-info {
+    padding: 8px 12px;
+    background-color: #f8f9fa;
+    border-radius: 6px;
+    border-left: 3px solid #1890ff;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.target-label {
+    font-size: 12px;
+    color: #666;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.approver-time {
+    font-size: 11px;
+    color: #8c8c8c;
+    margin-left: 8px;
+    white-space: nowrap;
+    font-weight: 500;
+}
+
+.approver-comment {
+    background-color: #fafafa;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    color: #595959;
+    line-height: 1.4;
+    width: 100%;
+    border: 1px solid #f0f0f0;
+    box-sizing: border-box;
+}
+
+/* 增加抄送人按钮样式 */
+.add-cc-button-inline {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    border-color: #d9d9d9;
+    color: #666;
+    height: 24px;
+    padding: 0 8px;
+    white-space: nowrap;
+}
+
+.add-cc-button-inline:hover {
+    border-color: #1890ff;
+    color: #1890ff;
+}
+
+/* 备注相关样式 */
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.card-actions {
+    display: flex;
+    align-items: center;
+}
+
+.remark-list {
+    padding: 0 4px;
+}
+
+.remark-item {
+    padding: 12px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.remark-item:last-child {
+    border-bottom: none;
+}
+
+.remark-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.remark-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.remark-time {
+    font-size: 12px;
+    color: #8c8c8c;
+}
+
+.delete-btn {
+    opacity: 0.6;
+    padding: 0 4px;
+    height: 24px;
+    min-width: 24px;
+}
+
+.delete-btn:hover {
+    opacity: 1;
+}
+
+.delete-confirm-content {
+    display: flex;
+    align-items: center;
+    padding: 16px 0;
+}
+
+.remark-content {
+    margin-bottom: 10px;
+    font-size: 14px;
+    line-height: 1.6;
+    color: #333;
+    word-break: break-word;
+}
+
+.remark-attachments {
+    background-color: #f9f9f9;
+    padding: 8px;
+    border-radius: 4px;
+}
+
+.no-remarks {
+    padding: 24px 0;
+    text-align: center;
+}
+
+.no-remarks-tip {
+    color: #999;
+    font-size: 14px;
+}
+
+.remark-form {
+    padding: 10px 0;
+}
+
+.remark-form-footer {
+    margin-top: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.remark-form-actions {
+    display: flex;
+    gap: 8px;
+}
 </style>