diff --git a/frontend/src/api/modules/test-plan/report.ts b/frontend/src/api/modules/test-plan/report.ts
index df13c52416..95a4d4b823 100644
--- a/frontend/src/api/modules/test-plan/report.ts
+++ b/frontend/src/api/modules/test-plan/report.ts
@@ -29,11 +29,26 @@ export function getReportBugList(data: TableQueryParams) {
   return MSR.post<CommonList<ReportBugItem>>({ url: reportUrl.ReportBugListUrl, data });
 }
 
+// 测试计划-报告-详情-缺陷分页查询 (分享)
+export function getReportShareBugList(data: TableQueryParams) {
+  return MSR.post<CommonList<ReportBugItem>>({ url: reportUrl.ReportShareBugListUrl, data });
+}
+
 // 测试计划-报告-详情-功能用例分页查询
 export function getReportFeatureCaseList(data: TableQueryParams) {
   return MSR.post<CommonList<FeatureCaseItem>>({ url: reportUrl.ReportFeatureCaseListUrl, data });
 }
 
+// 测试计划-报告-详情-功能用例分页查询 (分享)
+export function getReportShareFeatureCaseList(data: TableQueryParams) {
+  return MSR.post<CommonList<FeatureCaseItem>>({ url: reportUrl.ReportShareFeatureCaseListUrl, data });
+}
+
+// 测试计划-报告-详情-富文本编辑器上传图片文件
+export function editorUploadFile(data: { fileList: File[] }) {
+  return MSR.uploadFile({ url: reportUrl.EditorUploadFileUrl }, { fileList: data.fileList }, '', false);
+}
+
 // 测试计划-报告-详情-报告内容更新
 export function updateReportDetail(data: UpdateReportDetailParams) {
   return MSR.post({ url: reportUrl.UpdateReportDetailUrl, data });
diff --git a/frontend/src/api/requrls/test-plan/report.ts b/frontend/src/api/requrls/test-plan/report.ts
index 5ed230342a..15b2568b0e 100644
--- a/frontend/src/api/requrls/test-plan/report.ts
+++ b/frontend/src/api/requrls/test-plan/report.ts
@@ -10,7 +10,13 @@ export const PlanBatchDeleteUrl = '/test-plan/report/batch-delete';
 export const PlanReportDetailUrl = '/test-plan/report/get';
 // 测试计划-报告-详情-缺陷分页查询
 export const ReportBugListUrl = '/test-plan/report/detail/bug/page';
+// 测试计划-报告-详情-缺陷分页查询（分享）
+export const ReportShareBugListUrl = '/test-plan/report/share/detail/bug/page';
 // 测试计划-报告-详情-功能用例分页查询
 export const ReportFeatureCaseListUrl = '/test-plan/report/detail/functional/case/page';
+// 测试计划-报告-详情-功能用例分页查询（分享）
+export const ReportShareFeatureCaseListUrl = '/test-plan/report/share/detail/functional/case/page';
 // 测试计划-报告-详情-报告内容更新
 export const UpdateReportDetailUrl = '/test-plan/report/detail/edit';
+// 测试计划-报告-详情-富文本编辑器上传图片文件
+export const EditorUploadFileUrl = '/test-plan/report/upload/md/file';
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 0207e09feb..0e9b8556c0 100644
--- a/frontend/src/views/test-plan/report/detail/component/bugTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/bugTable.vue
@@ -4,23 +4,22 @@
 
 <script setup lang="ts">
   import { onBeforeMount } from 'vue';
-  import { useRoute } from 'vue-router';
 
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import type { MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
 
-  import { getReportBugList } from '@/api/modules/test-plan/report';
+  import { getReportBugList, getReportShareBugList } from '@/api/modules/test-plan/report';
   import { useTableStore } from '@/store';
 
   import { TableKeyEnum } from '@/enums/tableEnum';
 
   const props = defineProps<{
     reportId: string;
+    shareId?: string;
   }>();
 
   const tableStore = useTableStore();
-  const route = useRoute();
 
   const columns: MsTableColumn = [
     {
@@ -65,7 +64,10 @@
       width: 80,
     },
   ];
-  const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(getReportBugList, {
+  const reportBugList = () => {
+    return !props.shareId ? getReportBugList : getReportShareBugList;
+  };
+  const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(reportBugList(), {
     scroll: { x: '100%' },
     columns,
     tableKey: TableKeyEnum.TEST_PLAN_REPORT_DETAIL_BUG,
@@ -73,7 +75,7 @@
   });
 
   async function loadCaseList() {
-    setLoadListParams({ reportId: props.reportId, shareId: route.query.shareId as string | undefined });
+    setLoadListParams({ reportId: props.reportId, shareId: props.shareId ?? undefined });
     loadList();
   }
 
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 4a810a1e68..3bd95bb6dd 100644
--- a/frontend/src/views/test-plan/report/detail/component/featureCaseTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/featureCaseTable.vue
@@ -14,7 +14,6 @@
 
 <script setup lang="ts">
   import { onBeforeMount } from 'vue';
-  import { useRoute } from 'vue-router';
 
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import type { MsTableColumn } from '@/components/pure/ms-table/type';
@@ -22,7 +21,7 @@
   import CaseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
   import ExecuteResult from '@/components/business/ms-case-associate/executeResult.vue';
 
-  import { getReportFeatureCaseList } from '@/api/modules/test-plan/report';
+  import { getReportFeatureCaseList, getReportShareFeatureCaseList } from '@/api/modules/test-plan/report';
   import { useTableStore } from '@/store';
 
   import { TableKeyEnum } from '@/enums/tableEnum';
@@ -32,10 +31,10 @@
 
   const props = defineProps<{
     reportId: string;
+    shareId?: string;
   }>();
 
   const tableStore = useTableStore();
-  const route = useRoute();
 
   const columns: MsTableColumn = [
     {
@@ -62,11 +61,18 @@
       },
       width: 180,
     },
+    {
+      title: 'common.belongModule',
+      dataIndex: 'moduleName',
+      ellipsis: true,
+      showTooltip: true,
+      width: 200,
+    },
     {
       title: 'case.caseLevel',
       dataIndex: 'priority',
       slotName: 'caseLevel',
-      width: 150,
+      width: 120,
     },
     {
       title: 'common.executionResult',
@@ -81,25 +87,21 @@
       width: 150,
     },
     {
-      title: 'common.belongModule',
-      dataIndex: 'moduleName',
-      ellipsis: true,
+      title: 'testPlan.featureCase.executor',
+      dataIndex: 'executeUser',
       showTooltip: true,
-      width: 200,
+      width: 150,
     },
     {
       title: 'testPlan.featureCase.bugCount',
       dataIndex: 'bugCount',
       width: 100,
     },
-    {
-      title: 'testPlan.featureCase.executor',
-      dataIndex: 'executeUserName',
-      showTooltip: true,
-      width: 150,
-    },
   ];
-  const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(getReportFeatureCaseList, {
+  const reportFeatureCaseList = () => {
+    return !props.shareId ? getReportFeatureCaseList : getReportShareFeatureCaseList;
+  };
+  const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(reportFeatureCaseList(), {
     scroll: { x: '100%' },
     columns,
     tableKey: TableKeyEnum.TEST_PLAN_REPORT_DETAIL_FEATURE_CASE,
@@ -108,7 +110,7 @@
   });
 
   async function loadCaseList() {
-    setLoadListParams({ reportId: props.reportId, shareId: route.query.shareId as string | undefined });
+    setLoadListParams({ reportId: props.reportId, shareId: props.shareId ?? undefined });
     loadList();
   }
 
diff --git a/frontend/src/views/test-plan/report/detail/index.vue b/frontend/src/views/test-plan/report/detail/index.vue
index f40d848b36..8538f76016 100644
--- a/frontend/src/views/test-plan/report/detail/index.vue
+++ b/frontend/src/views/test-plan/report/detail/index.vue
@@ -140,7 +140,7 @@
       :preview-url="PreviewEditorImageUrl"
       class="mt-[8px] w-full"
     />
-    <div class="mt-[16px] flex items-center gap-[12px]">
+    <div v-show="showButton" class="mt-[16px] flex items-center gap-[12px]">
       <a-button type="primary" @click="handleUpdateReportDetail">{{ t('common.save') }}</a-button>
       <a-button type="secondary" @click="handleCancel">{{ t('common.cancel') }}</a-button>
     </div>
@@ -153,14 +153,16 @@
       no-content
       class="relative mb-[16px] border-b"
     />
-    <BugTable v-if="activeTab === 'bug'" :report-id="reportId" />
-    <FeatureCaseTable v-if="activeTab === 'featureCase'" :report-id="reportId" />
+    <BugTable v-if="activeTab === 'bug'" :report-id="reportId" :share-id="shareId" />
+    <FeatureCaseTable v-if="activeTab === 'featureCase'" :report-id="reportId" :share-id="shareId" />
   </MsCard>
 </template>
 
 <script setup lang="ts">
   import { ref } from 'vue';
   import { useRoute } from 'vue-router';
+  import { useEventListener } from '@vueuse/core';
+  import { Message } from '@arco-design/web-vue';
   import { cloneDeep } from 'lodash-es';
   import dayjs from 'dayjs';
 
@@ -174,8 +176,7 @@
   import FeatureCaseTable from './component/featureCaseTable.vue';
   import SetReportChart from '@/views/api-test/report/component/case/setReportChart.vue';
 
-  import { editorUploadFile } from '@/api/modules/case-management/featureCase';
-  import { getReportDetail } from '@/api/modules/test-plan/report';
+  import { editorUploadFile, getReportDetail, 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';
@@ -191,8 +192,13 @@
   const route = useRoute();
 
   const reportId = ref<string>(route.query.id as string);
+  const shareId = ref<string>(route.query.shareId as string);
 
   const detail = ref<PlanReportDetail>({ ...cloneDeep(defaultReportDetail) });
+  const showButton = ref(false);
+  const richText = ref<{ summary: string; richTextTmpFileIds?: string[] }>({
+    summary: '',
+  });
 
   // 分享
   const shareLoading = ref<boolean>(false);
@@ -342,16 +348,49 @@
   async function getDetail() {
     try {
       detail.value = await getReportDetail(reportId.value);
+      richText.value = { summary: detail.value.summary };
     } catch (error) {
       console.log(error);
     }
   }
 
   onMounted(async () => {
+    nextTick(() => {
+      const editorContent = document.querySelector('.editor-content');
+      useEventListener(editorContent, 'click', () => {
+        showButton.value = true;
+      });
+    });
     await getDetail();
     initOptionsData();
   });
 
+  async function handleUploadImage(file: File) {
+    const { data } = await editorUploadFile({
+      fileList: [file],
+    });
+    return data;
+  }
+  async function handleUpdateReportDetail() {
+    try {
+      await updateReportDetail({
+        id: detail.value.id,
+        summary: richText.value.summary,
+        richTextTmpFileIds: richText.value.richTextTmpFileIds ?? [],
+      });
+      Message.success(t('common.updateSuccess'));
+      showButton.value = false;
+      await getDetail();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+  function handleCancel() {
+    richText.value = { summary: detail.value.summary };
+    showButton.value = false;
+  }
+
   const activeTab = ref('bug');
   const contentTabList = ref([
     {
@@ -363,24 +402,6 @@
       label: t('report.detail.featureCaseDetails'),
     },
   ]);
-
-  // TODO 暂时
-  const richText = ref({
-    summary: '',
-    richTextTmpFileIds: [],
-  });
-  async function handleUploadImage(file: File) {
-    const { data } = await editorUploadFile({
-      fileList: [file],
-    });
-    return data;
-  }
-  function handleUpdateReportDetail() {
-    // TODO: 更新
-  }
-  function handleCancel() {
-    // TODO: 取消 数据还原
-  }
 </script>
 
 <style scoped lang="less">
@@ -422,4 +443,7 @@
       }
     }
   }
+  :deep(.rich-wrapper) .halo-rich-text-editor .ProseMirror {
+    height: 58px;
+  }
 </style>