diff --git a/src/components/SecondDev/FlowHistory.vue b/src/components/SecondDev/FlowHistory.vue
new file mode 100644
index 0000000..4f9e8a9
--- /dev/null
+++ b/src/components/SecondDev/FlowHistory.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="geg-flow-history">
+        <div v-for="(item, index) in items" :class="{ sep: index !== 0 }" class="item">
+            <template v-if="mode === 'simple'"></template>
+            <template v-if="mode === 'complex'">
+                <div class="row">
+                    <div class="col-1">审批人</div>
+                    <div class="col-2">用时：1小时10分</div>
+                    <div class="col-3 agree">{{ item.nodeName }}</div>
+                </div>
+                <div class="row">
+                    <div class="col-1 position">职务</div>
+                    <div class="col-2">2023-03-27 12:00:00</div>
+                    <div class="col-3">{{ item.comment }}</div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<style lang="less">
+    .geg-flow-history {
+        .row {
+            display: flex;
+            flex-direction: row;
+            margin: 6px 0;
+            line-height: 20px;
+            font-size: 14px;
+        }
+
+        .col-1 {
+            width: 180px;
+        }
+
+        .col-2 {
+            width: 180px;
+            color: #5a6875;
+        }
+
+        .col-3 {
+            flex: 1;
+
+            &.agree {
+                color: #52c41a;
+            }
+        }
+
+        .position{
+            color: #90a0af;
+        }
+
+        .item {
+            padding: 8px 0;
+
+            &.sep {
+                border-top: 1px solid #e9e9e9;
+            }
+        }
+    }
+</style>
+
+<script setup>
+    import { defineProps, ref } from 'vue';
+
+    const props = defineProps({
+        mode: {
+            type: String,
+            default: 'complex'
+        },
+        items: Array,
+        autoHide: {
+            type: Boolean,
+            default: true
+        },
+        sort: {
+            type: String,
+            default: 'desc'
+        }
+    });
+</script>
diff --git a/src/views/secondDev/approveFlowPage.vue b/src/views/secondDev/approveFlowPage.vue
index 5302e90..957a29c 100644
--- a/src/views/secondDev/approveFlowPage.vue
+++ b/src/views/secondDev/approveFlowPage.vue
@@ -47,6 +47,7 @@
                 @get-form-configs="(config) => (formConfigs = config)"
             />
             <Title :font-size="18" default-value="流转信息"></Title>
+            <flow-history :items="getTaskRecords()"></flow-history>
             <opinion-dialog ref="opinionDlg" />
         </div>
     </div>
@@ -64,10 +65,10 @@
     import { separator } from '/@bpmn/config/info';
     import { useMultipleTabStore } from '/@/store/modules/multipleTab';
     import Title from '/@/components/Title/src/Title.vue';
+    import FlowHistory from '/@/components/SecondDev/FlowHistory.vue';
 
     const { data, approveUserData, initProcessData, notificationError, notificationSuccess } = userTaskItem();
 
-
     const tabStore = useMultipleTabStore();
     const router = useRouter();
     const currentRoute = router.currentRoute.value;
@@ -146,6 +147,12 @@
         approvalData.circulateConfigs = [];
     }
 
+    function getTaskRecords() {
+        if (data.taskRecords.length) {
+            return data.taskRecords[0]?.records || [];
+        }
+    }
+
     onMounted(async () => {
         if (unref(taskId)) {
             try {
@@ -215,7 +222,7 @@
         return fileFolderIds;
     }
 
-    async function getApproveParams(){
+    async function getApproveParams() {
         let formModels = await formInformation.value.getFormModels();
         let system = formInformation.value.getSystemType();
         let fileFolderIds = getUploadFileFolderIds(formModels);