diff --git a/frontend/src/api/modules/test-plan/report.ts b/frontend/src/api/modules/test-plan/report.ts
index 239449d918..0858307e0b 100644
--- a/frontend/src/api/modules/test-plan/report.ts
+++ b/frontend/src/api/modules/test-plan/report.ts
@@ -56,7 +56,10 @@ export function updateReportDetail(data: UpdateReportDetailParams) {
 }
 
 // 测试计划-报告-详情
-export function getReportDetail(id: string) {
+export function getReportDetail(id: string, shareId?: string) {
+  if (shareId) {
+    return MSR.get({ url: `${reportUrl.PlanReportShareDetailUrl}/${shareId}/${id}` });
+  }
   return MSR.get({ url: `${reportUrl.PlanReportDetailUrl}/${id}` });
 }
 
diff --git a/frontend/src/router/constants.ts b/frontend/src/router/constants.ts
index 49f2e82efb..b4914ee808 100644
--- a/frontend/src/router/constants.ts
+++ b/frontend/src/router/constants.ts
@@ -16,6 +16,11 @@ export const WHITE_LIST = [
         path: '/shareReportCase',
         children: [],
       },
+      {
+        name: 'shareReportTestPlan',
+        path: '/shareReportTestPlan',
+        children: [],
+      },
     ],
   },
   {
diff --git a/frontend/src/views/test-plan/report/detail/component/bugTable.vue b/frontend/src/views/test-plan/report/detail/component/bugTable.vue
index 4769a78414..f2e034bf83 100644
--- a/frontend/src/views/test-plan/report/detail/component/bugTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/bugTable.vue
@@ -17,7 +17,6 @@
   const props = defineProps<{
     reportId: string;
     shareId?: string;
-    isDelete: boolean;
   }>();
 
   const tableStore = useTableStore();
@@ -81,7 +80,7 @@
   }
 
   watchEffect(() => {
-    if (props.reportId && !props.isDelete) {
+    if (props.reportId) {
       loadCaseList();
     }
   });
diff --git a/frontend/src/views/test-plan/report/detail/component/featureCaseTable.vue b/frontend/src/views/test-plan/report/detail/component/featureCaseTable.vue
index 2f00eda8ba..2c5097ad73 100644
--- a/frontend/src/views/test-plan/report/detail/component/featureCaseTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/featureCaseTable.vue
@@ -32,7 +32,6 @@
   const props = defineProps<{
     reportId: string;
     shareId?: string;
-    isDelete: boolean;
   }>();
 
   const tableStore = useTableStore();
@@ -116,7 +115,7 @@
   }
 
   watchEffect(() => {
-    if (props.reportId && !props.isDelete) {
+    if (props.reportId) {
       loadCaseList();
     }
   });
diff --git a/frontend/src/views/test-plan/report/detail/component/planDetail.vue b/frontend/src/views/test-plan/report/detail/component/planDetail.vue
index 2dcc308848..b9b99a1282 100644
--- a/frontend/src/views/test-plan/report/detail/component/planDetail.vue
+++ b/frontend/src/views/test-plan/report/detail/component/planDetail.vue
@@ -153,19 +153,14 @@
       no-content
       class="relative mb-[16px] border-b"
     />
-    <BugTable v-if="activeTab === 'bug'" :report-id="reportId" :share-id="shareId" :is-delete="isDelete" />
-    <FeatureCaseTable
-      v-if="activeTab === 'featureCase'"
-      :report-id="reportId"
-      :is-delete="isDelete"
-      :share-id="shareId"
-    />
+    <BugTable v-if="activeTab === 'bug'" :report-id="detail.id" :share-id="shareId" />
+    <FeatureCaseTable v-if="activeTab === 'featureCase'" :report-id="detail.id" :share-id="shareId" />
   </MsCard>
 </template>
 
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { useRoute, useRouter } from 'vue-router';
+  import { useRoute } from 'vue-router';
   import { useEventListener } from '@vueuse/core';
   import { Message } from '@arco-design/web-vue';
   import { cloneDeep } from 'lodash-es';
@@ -181,18 +176,10 @@
   import BugTable from '@/views/test-plan/report/detail/component/bugTable.vue';
   import FeatureCaseTable from '@/views/test-plan/report/detail/component/featureCaseTable.vue';
 
-  import {
-    editorUploadFile,
-    getReportDetail,
-    planGetShareHref,
-    planReportShare,
-    planReportShareDetail,
-    updateReportDetail,
-  } from '@/api/modules/test-plan/report';
+  import { editorUploadFile, planReportShare, updateReportDetail } from '@/api/modules/test-plan/report';
   import { PreviewEditorImageUrl } from '@/api/requrls/case-management/featureCase';
   import { defaultReportDetail, statusConfig } from '@/config/testPlan';
   import { useI18n } from '@/hooks/useI18n';
-  import { NOT_FOUND_RESOURCE } from '@/router/constants';
   import useAppStore from '@/store/modules/app';
   import { addCommasToNumber } from '@/utils';
   import { hasAnyPermission } from '@/utils/permission';
@@ -208,7 +195,11 @@
   const route = useRoute();
   const appStore = useAppStore();
   const props = defineProps<{
-    reportId: string;
+    detailInfo: PlanReportDetail;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'updateSuccess'): void;
   }>();
 
   const detail = ref<PlanReportDetail>({ ...cloneDeep(defaultReportDetail) });
@@ -220,16 +211,13 @@
   /**
    * 分享share
    */
-  const router = useRouter();
   const shareLink = ref<string>('');
   const shareId = ref<string>(route.query.shareId as string);
-  const reportId = ref<string>(props.reportId);
   const shareLoading = ref<boolean>(false);
-  const isDelete = ref<boolean>(false);
   async function shareHandler() {
     try {
       const res = await planReportShare({
-        reportId: reportId.value,
+        reportId: detail.value.id,
         projectId: appStore.currentProjectId,
       });
       const { origin } = window.location;
@@ -271,8 +259,8 @@
       name: '',
       type: 'pie',
       radius: ['62%', '80%'],
+      center: ['50%', '50%'],
       avoidLabelOverlap: false,
-      padAngle: 10,
       label: {
         show: false,
         position: 'center',
@@ -287,18 +275,6 @@
       labelLine: {
         show: false,
       },
-      itemStyle: {
-        normal: {
-          borderWidth: 2,
-          borderColor: '#ffffff',
-        },
-        emphasis: {
-          borderWidth: 0,
-          shadowBlur: 0,
-          shadowOffsetX: 0,
-          shadowColor: 'rgba(0, 0, 0, 0.5)',
-        },
-      },
       data: [
         {
           value: 0,
@@ -366,18 +342,6 @@
       labelLine: {
         show: false,
       },
-      itemStyle: {
-        normal: {
-          borderWidth: 2,
-          borderColor: '#ffffff',
-        },
-        emphasis: {
-          borderWidth: 0,
-          shadowBlur: 0,
-          shadowOffsetX: 0,
-          shadowColor: 'rgba(0, 0, 0, 0.5)',
-        },
-      },
       data: [
         {
           value: 0,
@@ -398,6 +362,8 @@
         name: t(item.label),
         itemStyle: {
           color: item.color,
+          borderWidth: 2,
+          borderColor: '#ffffff',
         },
       };
     });
@@ -422,36 +388,13 @@
         name: t(item.label),
         itemStyle: {
           color: success ? item.color : '#D4D4D8',
+          borderWidth: 2,
+          borderColor: '#ffffff',
         },
       };
     });
   }
 
-  async function getDetail() {
-    try {
-      // 如果分享id存在则为分享页面
-      if (shareId.value) {
-        // 获取分享资源的详情
-        const hrefShareDetail = await planGetShareHref(shareId.value);
-        if (hrefShareDetail.deleted) {
-          isDelete.value = hrefShareDetail.deleted;
-          router.push({
-            name: NOT_FOUND_RESOURCE,
-          });
-          return;
-        }
-        reportId.value = hrefShareDetail.reportId;
-        const result = await planReportShareDetail(shareId.value, reportId.value);
-        detail.value = result;
-      } else {
-        detail.value = await getReportDetail(reportId.value);
-      }
-      richText.value = { summary: detail.value.summary };
-    } catch (error) {
-      console.log(error);
-    }
-  }
-
   async function handleUploadImage(file: File) {
     const { data } = await editorUploadFile({
       fileList: [file],
@@ -468,7 +411,7 @@
       });
       Message.success(t('common.updateSuccess'));
       showButton.value = false;
-      getDetail();
+      emit('updateSuccess');
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
@@ -498,9 +441,10 @@
     },
   ]);
 
-  watchEffect(async () => {
-    if (props.reportId) {
-      await getDetail();
+  watchEffect(() => {
+    if (props.detailInfo) {
+      // await getDetail();
+      detail.value = cloneDeep(props.detailInfo);
       initOptionsData();
     }
   });
diff --git a/frontend/src/views/test-plan/report/detail/index.vue b/frontend/src/views/test-plan/report/detail/index.vue
index a197c3b6c1..3c54c131b2 100644
--- a/frontend/src/views/test-plan/report/detail/index.vue
+++ b/frontend/src/views/test-plan/report/detail/index.vue
@@ -1,15 +1,36 @@
 <template>
-  <PlanDetail :report-id="reportId" />
+  <PlanDetail :detail-info="detail" @update-success="getDetail()" />
 </template>
 
 <script setup lang="ts">
   import { ref } from 'vue';
   import { useRoute } from 'vue-router';
+  import { cloneDeep } from 'lodash-es';
 
   import PlanDetail from '@/views/test-plan/report/detail/component/planDetail.vue';
 
+  import { getReportDetail } from '@/api/modules/test-plan/report';
+  import { defaultReportDetail } from '@/config/testPlan';
+
+  import type { PlanReportDetail } from '@/models/testPlan/testPlanReport';
+
   const route = useRoute();
   const reportId = ref<string>(route.query.id as string);
+
+  const detail = ref<PlanReportDetail>(cloneDeep(defaultReportDetail));
+
+  async function getDetail() {
+    try {
+      detail.value = await getReportDetail(reportId.value);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  onBeforeMount(() => {
+    getDetail();
+  });
+  // 测试代码结束
 </script>
 
 <style scoped lang="less"></style>
diff --git a/frontend/src/views/test-plan/report/detail/sharePlanReportIndex.vue b/frontend/src/views/test-plan/report/detail/sharePlanReportIndex.vue
index 1621ff646e..efb65de1d6 100644
--- a/frontend/src/views/test-plan/report/detail/sharePlanReportIndex.vue
+++ b/frontend/src/views/test-plan/report/detail/sharePlanReportIndex.vue
@@ -1,30 +1,46 @@
 <template>
-  <PlanDetail :report-id="reportId" />
+  <PlanDetail :detail-info="detail" />
 </template>
 
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { useRoute } from 'vue-router';
+  import { useRoute, useRouter } from 'vue-router';
+  import { cloneDeep } from 'lodash-es';
 
   import PlanDetail from '@/views/test-plan/report/detail/component/planDetail.vue';
 
-  import { planGetShareHref } from '@/api/modules/test-plan/report';
+  import { getReportDetail, planGetShareHref } from '@/api/modules/test-plan/report';
+  import { defaultReportDetail } from '@/config/testPlan';
+  import { NOT_FOUND_RESOURCE } from '@/router/constants';
+
+  import type { PlanReportDetail } from '@/models/testPlan/testPlanReport';
 
   const route = useRoute();
-  const shareId = ref<string>(route.query.shareId as string);
+  const router = useRouter();
   const reportId = ref<string>(route.query.id as string);
 
+  const detail = ref<PlanReportDetail>(cloneDeep(defaultReportDetail));
+
   async function getShareDetail() {
     try {
-      const hrefShareDetail = await planGetShareHref(shareId.value);
+      const hrefShareDetail = await planGetShareHref(route.query.shareId as string);
       reportId.value = hrefShareDetail.reportId;
+      if (hrefShareDetail.deleted) {
+        router.push({
+          name: NOT_FOUND_RESOURCE,
+        });
+        return;
+      }
+      detail.value = await getReportDetail(reportId.value, route.query.shareId as string);
     } catch (error) {
       console.log(error);
     }
   }
 
-  onMounted(() => {
-    getShareDetail();
+  watchEffect(() => {
+    if (route.query.shareId) {
+      getShareDetail();
+    }
   });
 </script>