diff --git a/src/views/workflow/task/TaskForm.vue b/src/views/workflow/task/TaskForm.vue
index 13466ef..705c048 100644
--- a/src/views/workflow/task/TaskForm.vue
+++ b/src/views/workflow/task/TaskForm.vue
@@ -13,7 +13,7 @@
               <Icon icon="fa6-solid:file-lines"/>表单信息
             </span>
           </template>
-          <!-- 动态表单:内置使用枇杷表单设计器(待更新为海豚表单设计器) -->
+          <!-- 动态表单:内置使用枇杷表单设计器(待更新为VUE3海豚表单设计器) -->
           <workflow-preview-form v-if="state.formType !== '2'"
                                  ref="formPreview"
                                  :taskFormData="state.taskFormData"
@@ -21,7 +21,7 @@
           <!-- 外置表单:内置使用用户自定义的vue页面,手动填写页面路径即可 -->
           <component :is="state.formPath"
                      v-if="state.formType === '2'"
-                     ref="form"
+                     ref="formPreview"
                      :formReadOnly="state.formReadOnly"
                      :businessId="state.businessId"
           />
@@ -32,7 +32,7 @@
               <Icon icon="fa6-solid:money-bill-wheat"/>流程信息
             </span>
           </template>
-          <WorkflowTimeLine/>
+          <WorkflowTimeLine :history-flow-change-list="state.historyFlowChangeList"/>
         </ATabPane>
         <ATabPane key="processChart">
           <template #tab>
@@ -139,8 +139,14 @@
       </a-card>
     </ALayoutContent>
     <footer class="workflow-form__footer" :style="getWrapFormFooterStyle">
-      <a-button size="large" type="primary" @click="commit">审批</a-button>
-      <a-button size="large" type="primary" danger>驳回</a-button>
+      <template v-for="(button, index) in state.buttons" :key="index">
+        <!-- 渲染配置按钮 -->
+        <a-button v-show="button.isHide === '0'"
+                  size="large"
+                  type="primary"
+                  @click="submit(button)"
+        >{{ button.name }}</a-button>
+      </template>
     </footer>
     <UserPicker :title="state.userPickerProps.title"
                 :limit="state.userPickerProps.limit"
@@ -577,7 +583,7 @@
     cc({ processInsId: state.processInsId });
   }
 
-  function submit(button: WorkflowButton) {
+  function submit(button: Partial<WorkflowButton>) {
     // 设置流程变量
     const vars: Recordable = {};
     // 流程表单标题
@@ -585,9 +591,9 @@
     // 指定的下一步骤处理人
     vars.assignee = state.auditForm.assignee;
     // 操作类型
-    state.auditForm.mesCode = button.code;
+    state.auditForm.mesCode = button.code!;
     // 操作名称
-    state.auditForm.mesName = button.name;
+    state.auditForm.mesName = button.name!;
     switch (button.code) {
         // 启动流程
       case '_workflow_activity_start':
diff --git a/src/views/workflow/task/WorkflowTimeLine.vue b/src/views/workflow/task/WorkflowTimeLine.vue
index 0faf92e..140fde3 100644
--- a/src/views/workflow/task/WorkflowTimeLine.vue
+++ b/src/views/workflow/task/WorkflowTimeLine.vue
@@ -1,46 +1,41 @@
 <template>
   <a-card :class="prefixCls" title="流程信息" :bordered="false">
     <a-timeline>
-      <a-timeline-item color="#3f9eff">
+      <a-timeline-item v-for="(historyFlowChange, index) in historyFlowChangeList" :key="index" color="#3f9eff">
         <div class="workflow">
-          <div class="timestamp">{{formatToDateTime()}}</div>
+          <div class="timestamp">{{ getHistoricActivityInstance(historyFlowChange).endTime }}</div>
           <a-card>
-            <h4>{{'管理员审批'}}</h4>
+            <h4>{{ getHistoricActivityInstance(historyFlowChange).activityName }}</h4>
             <a-row :gutter="25">
               <a-col class="tip" style="margin-left:10px" :span="11">
                 <div class="item">
                   <span class="label">审批人 : </span>
-                  <span class="value">{{'虚拟内容'}}</span>
+                  <span class="value">{{ historyFlowChange.assigneeName }}</span>
                 </div>
                 <div class="item">
                   <span class="label">办理状态 : </span>
                   <span class="value">
-                    <!--                  <a-tag :type="historyFlowChange.activityCommentInfo.mesLevel"
-                          effect="dark"
-                          size="small"
-                  >{{'虚拟内容}}</a-tag>-->
+                    <a-tag :color="getActivityCommentInfo(historyFlowChange).mesLevel">{{ getActivityCommentInfo(historyFlowChange).mesName }}</a-tag>
                   </span>
                 </div>
                 <div class="item">
                   <span class="label">审批意见 : </span>
-                  <!--                <a-tooltip effect="dark"
-                                              :content="historyFlowChange.activityCommentInfo.message"
-                                              placement="top-start"
-                                  >
-                                    <span class="value">{{'虚拟内容'}}</span>
-                                  </a-tooltip>-->
+                  <a-tooltip>
+                    <template #title>{{ getActivityCommentInfo(historyFlowChange).message }}</template>
+                    {{ getActivityCommentInfo(historyFlowChange).message }}
+                  </a-tooltip>
                 </div>
                 <div class="item">
                   <span class="label">开始时间 : </span>
-                  <span class="value">{{'虚拟内容'}}</span>
+                  <span class="value">{{ getHistoricActivityInstance(historyFlowChange).startTime || '--' }}</span>
                 </div>
                 <div class="item">
                   <span class="label">结束时间 : </span>
-                  <span class="value">{{'虚拟内容'}}</span>
+                  <span class="value">{{ getHistoricActivityInstance(historyFlowChange).endTime || '' }}</span>
                 </div>
                 <div class="item">
                   <span class="label">用时 : </span>
-                  <span class="value">{{'虚拟内容'}}</span>
+                  <span class="value">{{ historyFlowChange.durationTime || '0秒' }}</span>
                 </div>
               </a-col>
             </a-row>
@@ -60,8 +55,9 @@
   import { PropType } from 'vue';
   import { Workflow } from '/@/api/platform/workflow/entity/workflow';
   import { Timeline } from 'ant-design-vue';
-  import { formatToDateTime } from '/@/utils/dateUtil';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import {HistoricActivityInstance} from '/@/api/platform/workflow/entity/historicActivityInstance';
+  import {ActivityCommentInfo} from '/@/api/platform/workflow/entity/activityCommentInfo';
 
   const ATimeline = Timeline;
   const ATimelineItem = Timeline.Item;
@@ -73,6 +69,9 @@
     }
   });
 
+  const getHistoricActivityInstance = (historyFlowChange: Workflow): HistoricActivityInstance => historyFlowChange.historicActivityInstance || {};
+  const getActivityCommentInfo = (historyFlowChange: Workflow): ActivityCommentInfo => historyFlowChange.activityCommentInfo || {};
+
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-workflow-time-line';