diff --git a/frontend/src/api/modules/test-plan/report.ts b/frontend/src/api/modules/test-plan/report.ts
index 9b42a4dfc7..ef44c4f4cd 100644
--- a/frontend/src/api/modules/test-plan/report.ts
+++ b/frontend/src/api/modules/test-plan/report.ts
@@ -2,7 +2,7 @@ import MSR from '@/api/http';
 import * as reportUrl from '@/api/requrls/test-plan/report';
 
 import type { GetShareId } from '@/models/apiTest/report';
-import { ReportDetail, ReportStepDetail } from "@/models/apiTest/report";
+import { ReportDetail, ReportStepDetail } from '@/models/apiTest/report';
 import { CommonList, TableQueryParams } from '@/models/common';
 import {
   ApiOrScenarioCaseItem,
@@ -10,6 +10,7 @@ import {
   ReportBugItem,
   UpdateReportDetailParams,
 } from '@/models/testPlan/report';
+import type { ExecuteHistoryItem } from '@/models/testPlan/testPlan';
 import { PlanReportDetail } from '@/models/testPlan/testPlanReport';
 
 // 报告列表
@@ -150,4 +151,14 @@ export function reportCaseStepDetail(reportId: string, stepId: string, shareId?:
   return MSR.get<ReportStepDetail[]>({ url: `${reportUrl.ReportDetailApiUrl}/${reportId}/${stepId}` });
 }
 
+// 报告详情-用例明细-执行历史步骤
+export function getFunctionalExecuteStep(data: { reportId: string; shareId?: string }) {
+  if (data.shareId) {
+    return MSR.get<ExecuteHistoryItem>({
+      url: `${reportUrl.ReportShareFunctionalStepUrl}/${data.shareId}/${data.reportId}`,
+    });
+  }
+  return MSR.get<ExecuteHistoryItem>({ url: `${reportUrl.ReportFunctionalStepUrl}/${data.reportId}` });
+}
+
 export default {};
diff --git a/frontend/src/api/requrls/test-plan/report.ts b/frontend/src/api/requrls/test-plan/report.ts
index 7ff4f1dc3d..b39e06b786 100644
--- a/frontend/src/api/requrls/test-plan/report.ts
+++ b/frontend/src/api/requrls/test-plan/report.ts
@@ -58,3 +58,7 @@ export const ReportScenarioUrl = '/test-plan/api/scenario/report/get';
 export const ReportDetailScenarioUrl = '/test-plan/api/scenario/report/get/detail';
 // 测试计划-报告-报告富文本预览压缩图
 export const ReportPlanPreviewImageUrl = '/test-plan/report/preview/md';
+// 测试计划-报告-详情-功能用例明细-执行历史步骤
+export const ReportFunctionalStepUrl = '/test-plan/report/detail/functional/case/step';
+// 测试计划-报告-详情-功能用例明细-执行历史步骤-分享
+export const ReportShareFunctionalStepUrl = '/test-plan/report/share/detail/functional/case/step';
diff --git a/frontend/src/models/testPlan/report.ts b/frontend/src/models/testPlan/report.ts
index 9965df599c..ec9807d7d2 100644
--- a/frontend/src/models/testPlan/report.ts
+++ b/frontend/src/models/testPlan/report.ts
@@ -16,6 +16,7 @@ export interface FeatureCaseItem {
   executeResult: string;
   executeUserName: string;
   bugCount: number;
+  reportId: string;
 }
 
 export interface UpdateReportDetailParams {
diff --git a/frontend/src/views/test-plan/report/detail/component/reportConfig.ts b/frontend/src/views/test-plan/report/detail/component/reportConfig.ts
index 357d50bbbc..aaaa342062 100644
--- a/frontend/src/views/test-plan/report/detail/component/reportConfig.ts
+++ b/frontend/src/views/test-plan/report/detail/component/reportConfig.ts
@@ -127,6 +127,7 @@ const functionalList: FeatureCaseItem = {
   executeResult: 'SUCCESS',
   executeUserName: '',
   bugCount: 0,
+  reportId: '',
 };
 // 缺陷明细
 const bugList: ReportBugItem = {
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
index f57a02e093..a241eb5816 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
@@ -8,7 +8,7 @@
     </template>
     <template #lastExecResult="{ record }">
       <ExecuteResult :execute-result="record.executeResult" />
-      <MsButton class="ml-[8px]" :disabled="!props.isPreview" @click="openExecuteHistory(record)">{{
+      <MsButton class="ml-[8px]" :disabled="!props.isPreview || !record.reportId" @click="openExecuteHistory(record)">{{
         t('common.detail')
       }}</MsButton>
     </template>
@@ -21,15 +21,9 @@
     no-content-padding
     unmount-on-close
   >
-    <!-- TODO 等待联调 后台没出接口 -->
-    <ExecutionHistory
-      :extra-params="{
-        caseId: '',
-        id: '',
-        testPlanId: '',
-      }"
-      :load-list-fun="executeHistory"
-    />
+    <div class="p-[16px]">
+      <ExecutionHistory show-step-result :loading="executeLoading" :execute-list="executeList" />
+    </div>
   </MsDrawer>
 </template>
 
@@ -45,11 +39,15 @@
   import ExecuteResult from '@/components/business/ms-case-associate/executeResult.vue';
   import ExecutionHistory from '@/views/test-plan/testPlan/detail/featureCase/detail/executionHistory/index.vue';
 
-  import { getReportFeatureCaseList, getReportShareFeatureCaseList } from '@/api/modules/test-plan/report';
-  import { executeHistory } from '@/api/modules/test-plan/testPlan';
+  import {
+    getFunctionalExecuteStep,
+    getReportFeatureCaseList,
+    getReportShareFeatureCaseList,
+  } from '@/api/modules/test-plan/report';
   import { useI18n } from '@/hooks/useI18n';
 
   import { FeatureCaseItem } from '@/models/testPlan/report';
+  import type { ExecuteHistoryItem } from '@/models/testPlan/testPlan';
   import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
   import { ReportCardTypeEnum } from '@/enums/testPlanReportEnum';
 
@@ -150,10 +148,28 @@
 
   const showDetailVisible = ref<boolean>(false);
 
-  const detailRecord = ref();
+  const executeReportId = ref<string>('');
+  const executeList = ref<ExecuteHistoryItem[]>([]);
+  const executeLoading = ref<boolean>(false);
+  // 执行历史步骤
+  async function getExecuteStep() {
+    executeLoading.value = true;
+    try {
+      const res = await getFunctionalExecuteStep({
+        reportId: executeReportId.value,
+        shareId: props.shareId,
+      });
+      executeList.value = [res];
+    } catch (error) {
+      console.log(error);
+    } finally {
+      executeLoading.value = false;
+    }
+  }
 
   function openExecuteHistory(record: FeatureCaseItem) {
-    detailRecord.value = record;
+    executeReportId.value = record.reportId;
     showDetailVisible.value = true;
+    getExecuteStep();
   }
 </script>
diff --git a/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/executionHistory/index.vue b/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/executionHistory/index.vue
index 04568f4c4a..3b538852ac 100644
--- a/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/executionHistory/index.vue
+++ b/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/executionHistory/index.vue
@@ -1,7 +1,7 @@
 <template>
   <a-spin :loading="loading" class="w-full">
     <div class="execute-history-list">
-      <div v-for="item of executeHistoryList" :key="item.status" class="execute-history-list-item">
+      <div v-for="item of props.executeList" :key="item.status" class="execute-history-list-item">
         <div class="flex items-center">
           <MsAvatar :avatar="item.userLogo" />
           <div class="ml-[8px] flex items-center">
@@ -44,7 +44,7 @@
           </div>
         </div>
       </div>
-      <MsEmpty v-if="executeHistoryList.length === 0" />
+      <MsEmpty v-if="props.executeList.length === 0" />
     </div>
   </a-spin>
 </template>
@@ -60,35 +60,16 @@
   import { useI18n } from '@/hooks/useI18n';
   import { characterLimit } from '@/utils';
 
-  import type { ExecuteHistoryItem, ExecuteHistoryType } from '@/models/testPlan/testPlan';
+  import type { ExecuteHistoryItem } from '@/models/testPlan/testPlan';
 
   const { t } = useI18n();
 
   const props = defineProps<{
-    loadListFun: (params: ExecuteHistoryType) => Promise<ExecuteHistoryItem[]>;
-    extraParams: ExecuteHistoryType;
+    executeList: ExecuteHistoryItem[];
+    loading: boolean;
     showStepResult?: boolean; // 是否展示执行步骤
   }>();
 
-  const executeHistoryList = ref<ExecuteHistoryItem[]>([]);
-
-  const loading = ref<boolean>(false);
-
-  async function initList() {
-    loading.value = true;
-    try {
-      if (props.loadListFun) {
-        executeHistoryList.value = await props.loadListFun({
-          ...props.extraParams,
-        });
-      }
-    } catch (error) {
-      console.log(error);
-    } finally {
-      loading.value = false;
-    }
-  }
-
   function getStepData(steps: string) {
     if (steps) {
       return JSON.parse(steps).map((item: any) => {
@@ -103,18 +84,6 @@
     }
     return [];
   }
-
-  watch(
-    () => props.extraParams.caseId,
-    (val) => {
-      if (val) {
-        initList();
-      }
-    },
-    {
-      immediate: true,
-    }
-  );
 </script>
 
 <style scoped lang="less">
diff --git a/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/index.vue b/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/index.vue
index 25735181a7..e2d5ed930b 100644
--- a/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/index.vue
+++ b/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/index.vue
@@ -193,12 +193,8 @@
           />
           <ExecutionHistory
             v-if="activeTab === 'executionHistory'"
-            :extra-params="{
-              caseId:activeCaseId,
-              id: activeId,
-              testPlanId: route.query.id as string,
-            }"
-            :load-list-fun="executeHistory"
+            :execute-list="executeHistoryList"
+            :loading="executeLoading"
           />
         </div>
       </a-spin>
@@ -261,7 +257,7 @@
   import { hasAnyPermission } from '@/utils/permission';
 
   import type { TableQueryParams } from '@/models/common';
-  import type { PlanDetailFeatureCaseItem, TestPlanDetail } from '@/models/testPlan/testPlan';
+  import type { ExecuteHistoryItem, PlanDetailFeatureCaseItem, TestPlanDetail } from '@/models/testPlan/testPlan';
   import { LastExecuteResults } from '@/enums/caseEnum';
   import { CaseManagementRouteEnum } from '@/enums/routeEnum';
 
@@ -577,6 +573,23 @@
     initBugList();
     await loadCase();
   });
+
+  const executeLoading = ref<boolean>(false);
+  const executeHistoryList = ref<ExecuteHistoryItem[]>([]);
+  async function initExecuteHistory() {
+    executeLoading.value = true;
+    try {
+      executeHistoryList.value = await executeHistory({
+        caseId: activeCaseId.value,
+        id: activeId.value,
+        testPlanId: route.query.id as string,
+      });
+    } catch (error) {
+      console.log(error);
+    } finally {
+      executeLoading.value = false;
+    }
+  }
   watch(
     () => activeId.value,
     () => {
@@ -584,6 +597,15 @@
       initBugList();
     }
   );
+
+  watch(
+    () => activeTab.value,
+    (val) => {
+      if (val === 'executionHistory') {
+        initExecuteHistory();
+      }
+    }
+  );
 </script>
 
 <style lang="less" scoped>