From e8ffc7b3b3e8f9a8892b956ca3702140bc184869 Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Wed, 3 Jul 2024 19:16:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92):=20?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92=E6=8A=A5=E5=91=8A=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E9=85=8D=E7=BD=AE=E4=BB=A5=E6=8A=A5=E5=91=8A?=
 =?UTF-8?q?=E5=8F=8A=E9=A2=84=E8=A7=88=E9=A1=B5=E9=9D=A2=E5=88=9D=E7=A8=BF?=
 =?UTF-8?q?=E5=BE=85=E8=81=94=E8=B0=83&=E8=AE=A1=E5=88=92=E7=BB=84?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pure/ms-rich-text/MsRichText.vue          |  11 +-
 frontend/src/enums/routeEnum.ts               |   1 +
 frontend/src/enums/testPlanReportEnum.ts      |  11 +
 frontend/src/hooks/useDoubleClick.ts          |  31 +
 .../models/projectManagement/taskCenter.ts    |  10 +
 frontend/src/models/testPlan/report.ts        |   1 +
 .../src/models/testPlan/testPlanReport.ts     |  20 +
 .../src/router/routes/modules/testPlan.ts     |  13 +-
 .../api-test/report/component/scenarioCom.vue |   2 +-
 .../components/addStep.vue                    |   5 +-
 .../taskCenter/component/testPlan.vue         |  41 +-
 .../report/detail/component/config.vue        | 375 ++++++++++
 .../component/custom-card/customRichText.vue  |  87 +++
 .../report/detail/component/planDetail.vue    | 448 ------------
 .../detail/component/planGroupDetail.vue      | 185 -----
 .../detail/component/planOrGroupReport.vue    |  38 -
 .../report/detail/component/reportConfig.ts   | 175 +++++
 .../{ => system-card}/ReportMetricsItem.vue   |   0
 .../{ => system-card}/apiAndScenarioTable.vue |  37 +-
 .../component/{ => system-card}/bugTable.vue  |  14 +-
 .../{ => system-card}/executeAnalysis.vue     |   0
 .../{ => system-card}/featureCaseTable.vue    |  71 +-
 .../planDetailHeaderRight.vue                 |   0
 .../{ => system-card}/reportDetailTable.vue   |  17 +-
 .../{ => system-card}/reportHeader.vue        |   2 +-
 .../component/{ => system-card}/summary.vue   |  61 +-
 .../component/system-card/systemTrigger.vue   |  29 +
 .../report/detail/component/viewReport.vue    | 663 ++++++++++++++++++
 .../test-plan/report/detail/configReport.vue  | 101 +++
 .../report/detail/{index.vue => detail.vue}   |  14 +-
 .../report/detail/sharePlanReportIndex.vue    |  13 +-
 .../views/test-plan/report/locale/en-US.ts    |  15 +-
 .../views/test-plan/report/locale/zh-CN.ts    |  15 +-
 .../testPlan/components/planExpandRow.vue     |  81 +++
 .../testPlan/components/planTable.vue         |  94 +--
 .../detail/executionHistory/index.vue         |  53 +-
 .../detail/featureCase/detail/index.vue       |   9 +-
 .../views/test-plan/testPlan/detail/index.vue |  69 +-
 .../testPlan/detail/reportDrawer.vue          |  12 +-
 .../views/test-plan/testPlan/locale/en-US.ts  |   4 +-
 .../views/test-plan/testPlan/locale/zh-CN.ts  |   2 +
 41 files changed, 1979 insertions(+), 851 deletions(-)
 create mode 100644 frontend/src/enums/testPlanReportEnum.ts
 create mode 100644 frontend/src/hooks/useDoubleClick.ts
 create mode 100644 frontend/src/views/test-plan/report/detail/component/config.vue
 create mode 100644 frontend/src/views/test-plan/report/detail/component/custom-card/customRichText.vue
 delete mode 100644 frontend/src/views/test-plan/report/detail/component/planDetail.vue
 delete mode 100644 frontend/src/views/test-plan/report/detail/component/planGroupDetail.vue
 delete mode 100644 frontend/src/views/test-plan/report/detail/component/planOrGroupReport.vue
 create mode 100644 frontend/src/views/test-plan/report/detail/component/reportConfig.ts
 rename frontend/src/views/test-plan/report/detail/component/{ => system-card}/ReportMetricsItem.vue (100%)
 rename frontend/src/views/test-plan/report/detail/component/{ => system-card}/apiAndScenarioTable.vue (84%)
 rename frontend/src/views/test-plan/report/detail/component/{ => system-card}/bugTable.vue (82%)
 rename frontend/src/views/test-plan/report/detail/component/{ => system-card}/executeAnalysis.vue (100%)
 rename frontend/src/views/test-plan/report/detail/component/{ => system-card}/featureCaseTable.vue (67%)
 rename frontend/src/views/test-plan/report/detail/component/{ => system-card}/planDetailHeaderRight.vue (100%)
 rename frontend/src/views/test-plan/report/detail/component/{ => system-card}/reportDetailTable.vue (88%)
 rename frontend/src/views/test-plan/report/detail/component/{ => system-card}/reportHeader.vue (94%)
 rename frontend/src/views/test-plan/report/detail/component/{ => system-card}/summary.vue (80%)
 create mode 100644 frontend/src/views/test-plan/report/detail/component/system-card/systemTrigger.vue
 create mode 100644 frontend/src/views/test-plan/report/detail/component/viewReport.vue
 create mode 100644 frontend/src/views/test-plan/report/detail/configReport.vue
 rename frontend/src/views/test-plan/report/detail/{index.vue => detail.vue} (56%)
 create mode 100644 frontend/src/views/test-plan/testPlan/components/planExpandRow.vue

diff --git a/frontend/src/components/pure/ms-rich-text/MsRichText.vue b/frontend/src/components/pure/ms-rich-text/MsRichText.vue
index 7ac833a719..ecbbfa393b 100644
--- a/frontend/src/components/pure/ms-rich-text/MsRichText.vue
+++ b/frontend/src/components/pure/ms-rich-text/MsRichText.vue
@@ -100,6 +100,7 @@
       placeholder: 'editor.placeholder',
       draggable: false,
       autoHeight: true,
+      editable: true,
     }
   );
 
@@ -137,6 +138,14 @@
       if (props.raw !== editor.value?.getHTML()) {
         editor.value?.commands.setContent(props.raw);
       }
+    }
+  );
+
+  watch(
+    () => props.editable,
+    (val) => {
+      // 更新富文本的可编辑配置
+      editor.value?.setOptions({ editable: val });
     },
     {
       immediate: true,
@@ -347,7 +356,7 @@
         }),
       ],
       autofocus: false,
-      editable: !props.editable,
+      editable: props.editable,
       onUpdate: () => {
         debounceOnUpdate();
       },
diff --git a/frontend/src/enums/routeEnum.ts b/frontend/src/enums/routeEnum.ts
index 1523183752..6121fb7a64 100644
--- a/frontend/src/enums/routeEnum.ts
+++ b/frontend/src/enums/routeEnum.ts
@@ -62,6 +62,7 @@ export enum TestPlanRouteEnum {
   TEST_PLAN = 'testPlan',
   TEST_PLAN_INDEX = 'testPlanIndex',
   TEST_PLAN_INDEX_DETAIL = 'testPlanIndexDetail',
+  TEST_PLAN_INDEX_CONFIG = 'testPlanIndexConfig',
   TEST_PLAN_INDEX_DETAIL_FEATURE_CASE_DETAIL = 'testPlanIndexDetailFeatureCaseDetail',
   TEST_PLAN_REPORT = 'testPlanReport',
   TEST_PLAN_REPORT_DETAIL = 'testPlanReportDetail',
diff --git a/frontend/src/enums/testPlanReportEnum.ts b/frontend/src/enums/testPlanReportEnum.ts
new file mode 100644
index 0000000000..666528e333
--- /dev/null
+++ b/frontend/src/enums/testPlanReportEnum.ts
@@ -0,0 +1,11 @@
+export enum ReportCardTypeEnum {
+  SUMMARY = 'SUMMARY', // 报告总结
+  BUG_DETAIL = 'BUG_DETAIL', // 缺陷明细
+  FUNCTIONAL_DETAIL = 'FUNCTIONAL_DETAIL', // 功能用例明细
+  API_CASE_DETAIL = 'API_CASE_DETAIL', // 接口用例明细
+  SCENARIO_CASE_DETAIL = 'SCENARIO_CASE_DETAIL', // 场景用例明细
+  SUB_PLAN_DETAIL = 'SUB_PLAN_DETAIL', // 计划组子计划详情
+  CUSTOM_CARD = 'CUSTOM_CARD', // 自定义卡片
+}
+
+export default {};
diff --git a/frontend/src/hooks/useDoubleClick.ts b/frontend/src/hooks/useDoubleClick.ts
new file mode 100644
index 0000000000..d0d9a46afc
--- /dev/null
+++ b/frontend/src/hooks/useDoubleClick.ts
@@ -0,0 +1,31 @@
+import { ref } from 'vue';
+
+/**
+ * @description 用于自定义双击事件
+ */
+export default function useDoubleClick(callback: () => void) {
+  const count = ref(0);
+  const lastClickTime = ref(0);
+  const DOUBLE_CLICK_THRESHOLD = 300; // 300毫秒
+
+  function handleClick() {
+    const currentTime = new Date().getTime();
+    const timeDiff = currentTime - lastClickTime.value;
+
+    if (timeDiff < DOUBLE_CLICK_THRESHOLD) {
+      count.value++;
+    } else {
+      count.value = 1;
+    }
+    lastClickTime.value = currentTime;
+
+    if (count.value >= 2) {
+      callback();
+      count.value = 0;
+    }
+  }
+
+  return {
+    handleClick,
+  };
+}
diff --git a/frontend/src/models/projectManagement/taskCenter.ts b/frontend/src/models/projectManagement/taskCenter.ts
index 41b1b3417d..fb18f4fcfd 100644
--- a/frontend/src/models/projectManagement/taskCenter.ts
+++ b/frontend/src/models/projectManagement/taskCenter.ts
@@ -1,4 +1,7 @@
 // 实时
+
+import { testPlanTypeEnum } from '@/enums/testPlanEnum';
+
 export interface RealTaskCenterApiCaseItem {
   organizationName: string; // 所属组织
   projectName: string;
@@ -14,6 +17,13 @@ export interface RealTaskCenterApiCaseItem {
   operationTime: string;
   integrated: boolean; // 是否为集合报告
 }
+
+export interface TestPlanTaskCenterItem extends RealTaskCenterApiCaseItem {
+  children: TestPlanTaskCenterItem[];
+  childrenCount: number;
+  groupId: string;
+  type: keyof typeof testPlanTypeEnum;
+}
 // 定时任务
 export interface TimingTaskCenterApiCaseItem {
   organizationName: string;
diff --git a/frontend/src/models/testPlan/report.ts b/frontend/src/models/testPlan/report.ts
index 52c5d7ad84..9965df599c 100644
--- a/frontend/src/models/testPlan/report.ts
+++ b/frontend/src/models/testPlan/report.ts
@@ -34,4 +34,5 @@ export interface ApiOrScenarioCaseItem {
   executeUser: string;
   bugCount: number;
   reportId: string;
+  projectId: string;
 }
diff --git a/frontend/src/models/testPlan/testPlanReport.ts b/frontend/src/models/testPlan/testPlanReport.ts
index 3f17505069..605c72de81 100644
--- a/frontend/src/models/testPlan/testPlanReport.ts
+++ b/frontend/src/models/testPlan/testPlanReport.ts
@@ -1,3 +1,5 @@
+import { ReportCardTypeEnum } from '@/enums/testPlanReportEnum';
+
 export interface countDetail {
   success: number;
   error: number;
@@ -28,8 +30,11 @@ export interface PlanReportDetail {
   apiBugCount: number; // 接口用例明细bug总数
   scenarioBugCount: number; // 场景用例明细bug总数
   testPlanName: string;
+  resultStatus?: string; // 报告结果
 }
 
+export type detailCountKey = 'functionalCount' | 'apiCaseCount' | 'apiScenarioCount';
+
 export type AnalysisType = 'FUNCTIONAL' | 'API' | 'SCENARIO';
 
 export interface ReportMetricsItemModel {
@@ -49,3 +54,18 @@ export interface StatusListType {
   rateKey: string;
   key: string;
 }
+
+export interface configItem {
+  id: string;
+  value: ReportCardTypeEnum;
+  label: string;
+  content?: string;
+  system: boolean;
+  enableEdit: boolean;
+}
+
+export interface customValueForm {
+  content?: string;
+  label: string;
+  richTextTmpFileIds?: string[];
+}
diff --git a/frontend/src/router/routes/modules/testPlan.ts b/frontend/src/router/routes/modules/testPlan.ts
index bd5338cee9..65ae29f0ed 100644
--- a/frontend/src/router/routes/modules/testPlan.ts
+++ b/frontend/src/router/routes/modules/testPlan.ts
@@ -41,7 +41,7 @@ const TestPlan: AppRouteRecordRaw = {
     {
       path: 'testPlanReportDetail',
       name: TestPlanRouteEnum.TEST_PLAN_REPORT_DETAIL,
-      component: () => import('@/views/test-plan/report/detail/index.vue'),
+      component: () => import('@/views/test-plan/report/detail/detail.vue'),
       meta: {
         locale: 'menu.apiTest.reportDetail',
         roles: ['PROJECT_TEST_PLAN_REPORT:READ'],
@@ -77,6 +77,17 @@ const TestPlan: AppRouteRecordRaw = {
         ],
       },
     },
+    // 自定义配置报告
+    {
+      path: 'testPlanIndexConfig',
+      name: TestPlanRouteEnum.TEST_PLAN_INDEX_CONFIG,
+      component: () => import('@/views/test-plan/report/detail/configReport.vue'),
+      meta: {
+        locale: 'testPlan.planConfigReport',
+        roles: ['PROJECT_TEST_PLAN_REPORT:READ'],
+        isTopMenu: false,
+      },
+    },
     // 测试计划-测试计划详情-功能用例详情
     {
       path: 'testPlanIndexDetailFeatureCaseDetail',
diff --git a/frontend/src/views/api-test/report/component/scenarioCom.vue b/frontend/src/views/api-test/report/component/scenarioCom.vue
index 2610c44d13..dddc999163 100644
--- a/frontend/src/views/api-test/report/component/scenarioCom.vue
+++ b/frontend/src/views/api-test/report/component/scenarioCom.vue
@@ -56,7 +56,7 @@
   import ReportDetailHeader from './reportDetailHeader.vue';
   import reportInfoHeader from './step/reportInfoHeaders.vue';
   import TiledList from './tiledList.vue';
-  import ReportMetricsItem from '@/views/test-plan/report/detail/component/ReportMetricsItem.vue';
+  import ReportMetricsItem from '@/views/test-plan/report/detail/component/system-card/ReportMetricsItem.vue';
 
   import { toolTipConfig } from '@/config/testPlan';
   import { useI18n } from '@/hooks/useI18n';
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/addStep.vue b/frontend/src/views/case-management/caseManagementFeature/components/addStep.vue
index bbe8b1f700..af07d72e54 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/addStep.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/addStep.vue
@@ -33,7 +33,9 @@
       v-if="hasAnyPermission(['PROJECT_TEST_PLAN:READ+EXECUTE']) && !props.isDisabledTestPlan"
       #actualResult="{ record }"
     >
+      <div v-if="props.isPreview">{{ record.actualResult }}</div>
       <a-textarea
+        v-else
         v-model="record.actualResult"
         :max-length="1000"
         size="mini"
@@ -44,7 +46,7 @@
     </template>
     <template #lastExecResult="{ record }">
       <a-select
-        v-if="hasAnyPermission(['PROJECT_TEST_PLAN:READ+EXECUTE']) && !props.isDisabledTestPlan"
+        v-if="hasAnyPermission(['PROJECT_TEST_PLAN:READ+EXECUTE']) && !props.isDisabledTestPlan && !props.isPreview"
         v-model:model-value="record.executeResult"
         :placeholder="t('common.pleaseSelect')"
         class="param-input w-full"
@@ -105,6 +107,7 @@
       isScrollY?: boolean;
       isTestPlan?: boolean;
       isDisabledTestPlan?: boolean;
+      isPreview?: boolean; // 仅预览不展示状态可操作下拉和文本框
     }>(),
     {
       isDisabled: false,
diff --git a/frontend/src/views/project-management/taskCenter/component/testPlan.vue b/frontend/src/views/project-management/taskCenter/component/testPlan.vue
index 6c27a7b3fa..a5ccd8311c 100644
--- a/frontend/src/views/project-management/taskCenter/component/testPlan.vue
+++ b/frontend/src/views/project-management/taskCenter/component/testPlan.vue
@@ -19,17 +19,21 @@
       ref="tableRef"
       :action-config="tableBatchActions"
       :selectable="hasOperationPermission"
+      :expanded-keys="expandedKeys"
       v-on="propsEvent"
       @batch-action="handleTableBatch"
     >
+      <!-- TOTO 等待联调 后台接口需要调整 -->
       <template #resourceNum="{ record }">
-        <div
-          v-if="!record.integrated"
-          type="text"
-          class="one-line-text w-full"
-          :class="[hasJumpPermission ? 'text-[rgb(var(--primary-5))]' : '']"
-          @click="showDetail(record)"
-          >{{ record.resourceNum }}
+        <div class="flex items-center">
+          <PlanExpandRow
+            v-model:expanded-keys="expandedKeys"
+            num-key="resourceNum"
+            :record="record"
+            :permission="permissionsMap[props.group].jump"
+            @action="showDetail(record)"
+            @expand="expandHandler(record)"
+          />
         </div>
       </template>
       <template #resourceName="{ record }">
@@ -114,6 +118,7 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import ExecStatus from '@/views/test-plan/report/component/execStatus.vue';
   import ExecutionStatus from '@/views/test-plan/report/component/reportStatus.vue';
+  import PlanExpandRow from '@/views/test-plan/testPlan/components/planExpandRow.vue';
 
   import {
     batchStopRealOrgPlan,
@@ -134,6 +139,7 @@
   import { hasAnyPermission } from '@/utils/permission';
 
   import { BatchApiParams } from '@/models/common';
+  import type { TestPlanTaskCenterItem } from '@/models/projectManagement/taskCenter';
   import { ReportExecStatus } from '@/enums/apiEnum';
   import { PlanReportStatus } from '@/enums/reportEnum';
   import { RouteEnum } from '@/enums/routeEnum';
@@ -464,12 +470,22 @@
     });
   }
 
+  const expandedKeys = ref<string[]>([]);
+
+  function expandHandler(record: TestPlanTaskCenterItem) {
+    if (expandedKeys.value.includes(record.id)) {
+      expandedKeys.value = expandedKeys.value.filter((key) => key !== record.id);
+    } else {
+      expandedKeys.value = [...expandedKeys.value, record.id];
+    }
+  }
+
   function searchList() {
     resetSelector();
     initData();
   }
 
-  onBeforeMount(async () => {
+  onBeforeMount(() => {
     initData();
   });
 
@@ -487,4 +503,11 @@
   await tableStore.initColumn(tableKeysMap[props.group], groupColumnsMap[props.group], 'drawer', true);
 </script>
 
-<style scoped></style>
+<style scoped lang="less">
+  :deep(.arco-table-cell-expand-icon .arco-table-cell-inline-icon) {
+    display: none;
+  }
+  :deep(.arco-table-cell-align-left) > span:first-child {
+    padding-left: 0 !important;
+  }
+</style>
diff --git a/frontend/src/views/test-plan/report/detail/component/config.vue b/frontend/src/views/test-plan/report/detail/component/config.vue
new file mode 100644
index 0000000000..72ad21cd14
--- /dev/null
+++ b/frontend/src/views/test-plan/report/detail/component/config.vue
@@ -0,0 +1,375 @@
+<template>
+  <!-- 配置头开始 -->
+  <div class="report-name">
+    <div class="font-medium">
+      {{ t('testPlan.testPlanDetail.generateReport') }}
+    </div>
+    <div class="flex items-center">
+      <a-form ref="formRef" class="mt-1 max-w-[710px]" :model="reportForm">
+        <a-form-item
+          field="reportName"
+          asterisk-position="end"
+          :hide-label="true"
+          hide-asterisk
+          content-class="contentClass"
+          class="mb-0 max-w-[732px]"
+        >
+          <a-input
+            v-model:model-value="reportForm.reportName"
+            :placeholder="t('report.detail.enterReportNamePlaceHolder')"
+            :max-length="255"
+            class="w-[732px]"
+            :error="isError"
+            @input="inputHandler"
+          ></a-input>
+        </a-form-item>
+      </a-form>
+      <div class="ml-[12px]">
+        <a-button type="secondary" @click="cancelHandler">{{ t('common.cancel') }}</a-button>
+        <a-button class="ml-[12px]" type="primary" @click="handleSave">{{ t('common.save') }}</a-button>
+      </div>
+    </div>
+  </div>
+  <!-- 配置头结束 -->
+  <!-- 报告头 -->
+  <div class="config-container">
+    <div class="config-left-container">
+      <div class="sticky top-[16px]">
+        <div class="mb-[16px] flex items-center justify-between">
+          <div class="flex items-center">
+            <div class="text-[16px] font-medium">{{ t('report.detail.baseField') }}</div>
+            <a-tooltip :content="t('report.detail.customFieldTooltip')" position="right">
+              <icon-question-circle
+                class="ml-[4px] text-[var(--color-text-brand)] hover:text-[rgb(var(--primary-5))]"
+                size="16"
+              />
+            </a-tooltip>
+          </div>
+          <MsButton :disabled="!hasChange" class="cursor-pointer text-[rgb(var(--primary-5))]" @click="handleReset"
+            >{{ t('common.resetDefault') }}
+          </MsButton>
+        </div>
+        <!-- 自定义字段列表 -->
+        <VueDraggable
+          v-model="configList"
+          :sort="false"
+          class="custom-card-list w-full"
+          :group="{ name: 'report', pull: 'clone', put: false }"
+          :clone="onClone"
+        >
+          <div
+            v-for="item of configList"
+            v-show="showItem(item)"
+            :key="item.value"
+            :class="`${getHoverClass(item)} custom-card-item`"
+            @click.stop="addField(item)"
+          >
+            <a-tooltip :mouse-enter-delay="300" :content="t(item.label)" position="top">
+              <div class="flex items-center justify-between">
+                <div :class="`${getLabelClass(item)} custom-card-item-label one-line-text max-w-[calc(100%-14px)]`">{{
+                  t(item.label)
+                }}</div>
+                <icon-close
+                  v-if="!item.system"
+                  :style="{ 'font-size': '14px' }"
+                  class="cursor-pointer text-[var(--color-text-3)]"
+                  @click.stop="removeField(item)"
+                />
+              </div>
+            </a-tooltip>
+          </div>
+          <a-tooltip class="ms-tooltip-white" :disabled="!limitCustomLength">
+            <a-button type="outline" class="!h-[30px]" :disabled="limitCustomLength" @click.stop="addCustomField">
+              <div class="flex flex-row items-center gap-[8px]">
+                <icon-plus />
+                <span>{{ t('report.detail.customButton') }}</span>
+              </div>
+            </a-button>
+            <template #content>
+              <div class="text-[var(--color-text-1)]">{{ t('report.detail.customMaxNumber') }}</div>
+            </template>
+          </a-tooltip>
+        </VueDraggable>
+      </div>
+    </div>
+    <div class="config-right-container">
+      <ViewReport
+        v-model:card-list="cardItemList"
+        :detail-info="props.detailInfo"
+        :is-drawer="props.isDrawer"
+        :is-group="props.isGroup"
+        :is-preview="false"
+        @update-custom="updateCustom"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { Message } from '@arco-design/web-vue';
+  import { cloneDeep, isEqual } from 'lodash-es';
+  import { VueDraggable } from 'vue-draggable-plus';
+
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import ViewReport from '@/views/test-plan/report/detail/component/viewReport.vue';
+
+  import { updateReportDetail } from '@/api/modules/test-plan/report';
+  import { defaultReportDetail } from '@/config/testPlan';
+  import { useI18n } from '@/hooks/useI18n';
+  import { getGenerateId } from '@/utils';
+
+  import type { configItem, PlanReportDetail } from '@/models/testPlan/testPlanReport';
+  import { ReportCardTypeEnum } from '@/enums/testPlanReportEnum';
+
+  import { defaultCustomConfig, defaultGroupConfig, defaultSingleConfig } from './reportConfig';
+  import { getSummaryDetail } from '@/views/test-plan/report/utils';
+
+  const { t } = useI18n();
+
+  const router = useRouter();
+  const props = defineProps<{
+    detailInfo: PlanReportDetail;
+    isDrawer?: boolean;
+    isGroup?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'updateSuccess'): void;
+  }>();
+
+  const detail = ref<PlanReportDetail>({ ...cloneDeep(defaultReportDetail) });
+  const showButton = ref<boolean>(false);
+
+  const richText = ref<{ summary: string; richTextTmpFileIds?: string[] }>({
+    summary: '',
+  });
+
+  const isError = ref(false);
+  const hasChange = ref(false);
+  const reportForm = ref({
+    reportName: '',
+  });
+
+  function inputHandler(value: string) {
+    if (value.trim().length === 0) {
+      isError.value = true;
+    }
+    isError.value = false;
+  }
+
+  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;
+      emit('updateSuccess');
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  watchEffect(() => {
+    if (props.detailInfo) {
+      detail.value = cloneDeep(props.detailInfo);
+      reportForm.value.reportName = detail.value.name;
+    }
+  });
+
+  const configList = ref<configItem[]>([]);
+  const cardItemList = ref<configItem[]>([]);
+
+  watch(
+    () => props.isGroup,
+    () => {
+      configList.value = props.isGroup ? cloneDeep(defaultGroupConfig) : cloneDeep(defaultSingleConfig);
+      cardItemList.value = cloneDeep(configList.value);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  function getExist(cardItem: configItem) {
+    return cardItemList.value.find((item) => item.id === cardItem.id);
+  }
+
+  function getHoverClass(cardItem: configItem) {
+    if (getExist(cardItem) && !cardItem.system) {
+      return 'hover-selected-item-class';
+    }
+    if (!getExist(cardItem) && cardItem.system) {
+      return 'hover-item-class';
+    }
+    return '';
+  }
+
+  function getLabelClass(cardItem: configItem) {
+    const isSystemColor = cardItem.system ? 'cursor-not-allowed' : '';
+    return getExist(cardItem)
+      ? `text-[var(--color-text-4)] ${isSystemColor}`
+      : `text-[var(--color-text-1)] cursor-pointer hover:text-[rgb(var(--primary-4))]`;
+  }
+
+  const limitCustomLength = computed(
+    () => configList.value.filter((item) => item.value === ReportCardTypeEnum.CUSTOM_CARD).length >= 10
+  );
+
+  const deleteCard = (cardItem: configItem) => {
+    cardItemList.value = cardItemList.value.filter((item) => item.id !== cardItem.id);
+  };
+
+  function addCustomField() {
+    if (limitCustomLength.value) {
+      return;
+    }
+    const id = getGenerateId();
+    configList.value.push({
+      ...defaultCustomConfig,
+      id,
+    });
+  }
+
+  // 恢复默认
+  function handleReset() {
+    configList.value = props.isGroup ? cloneDeep(defaultGroupConfig) : cloneDeep(defaultSingleConfig);
+    cardItemList.value = cloneDeep(configList.value);
+    nextTick(() => {
+      hasChange.value = false;
+    });
+  }
+
+  function resetConfigEditList(list: configItem[]) {
+    return list.map((item: configItem) => {
+      return {
+        ...item,
+        enableEdit: false,
+      };
+    });
+  }
+
+  watch(
+    [() => configList.value, () => cardItemList.value],
+    () => {
+      const configValue = resetConfigEditList(configList.value);
+      const cardItemValue = resetConfigEditList(cardItemList.value);
+
+      const isisEqualList = props.isGroup ? cloneDeep(defaultGroupConfig) : cloneDeep(defaultSingleConfig);
+      if (!isEqual(configValue, isisEqualList) || !isEqual(cardItemValue, isisEqualList)) {
+        nextTick(() => {
+          hasChange.value = true;
+        });
+      }
+    },
+    { deep: true }
+  );
+
+  // 移除字段
+  function removeField(currentItem: configItem) {
+    configList.value = configList.value.filter((item) => item.id !== currentItem.id);
+    deleteCard(currentItem);
+  }
+  // 添加字段
+  function addField(cardItem: configItem) {
+    const isHasCard = cardItemList.value.find((item) => item.id === cardItem.id);
+    if (!isHasCard) {
+      cardItemList.value.push(cardItem);
+    }
+  }
+  // 拖拽克隆
+  function onClone(element: Record<'name' | 'id', string>) {
+    const isHasCard = cardItemList.value.find((item) => item.id === element.id);
+    if (!isHasCard) {
+      return element;
+    }
+  }
+
+  function cancelHandler() {
+    router.back();
+  }
+
+  // 更新自定义字段
+  function updateCustom(currentItem: configItem) {
+    const currentIndex = configList.value.findIndex((item) => item.id === currentItem.id);
+    configList.value.splice(currentIndex, 1, currentItem);
+  }
+
+  const functionalCaseTotal = computed(() => getSummaryDetail(detail.value.functionalCount).caseTotal);
+  const apiCaseTotal = computed(() => getSummaryDetail(detail.value.apiCaseCount).caseTotal);
+  const scenarioCaseTotal = computed(() => getSummaryDetail(detail.value.apiScenarioCount).caseTotal);
+
+  function showItem(item: configItem) {
+    switch (item.value) {
+      case ReportCardTypeEnum.FUNCTIONAL_DETAIL:
+        return functionalCaseTotal.value > 0;
+      case ReportCardTypeEnum.API_CASE_DETAIL:
+        return apiCaseTotal.value > 0;
+      case ReportCardTypeEnum.SCENARIO_CASE_DETAIL:
+        return scenarioCaseTotal.value > 0;
+      default:
+        return true;
+    }
+  }
+  // 保存配置
+  function handleSave() {}
+</script>
+
+<style scoped lang="less">
+  .report-name {
+    padding: 0 16px;
+    height: 56px;
+    @apply flex items-center justify-between border-b bg-white;
+  }
+  .block-title {
+    @apply mb-4 font-medium;
+  }
+  .config-container {
+    @apply flex w-full;
+    .config-left-container {
+      margin-bottom: 16px;
+      padding: 16px;
+      width: 300px;
+      border-radius: 0 0 10px 10px;
+      box-sizing: border-box;
+      @apply bg-white;
+      .custom-card-list {
+        @apply grid grid-cols-2 gap-2;
+        .custom-card-item {
+          padding: 4px 8px;
+          border-radius: 4px;
+          background: var(--color-bg-3);
+          &.custom-button {
+            border: 1px solid rgb(var(--primary-5));
+            color: rgb(var(--primary-5));
+            @apply cursor-pointer;
+          }
+        }
+      }
+    }
+    .config-right-container {
+      padding: 16px;
+      width: calc(100% - 300px);
+      background: var(--color-bg-3);
+    }
+  }
+  .hover-item-class {
+    &:hover {
+      .custom-card-item-label {
+        color: rgb(var(--primary-4));
+      }
+    }
+  }
+  .hover-selected-item-class {
+    &:hover {
+      .custom-card-item-label {
+        color: rgb(var(--primary-3));
+      }
+    }
+  }
+</style>
diff --git a/frontend/src/views/test-plan/report/detail/component/custom-card/customRichText.vue b/frontend/src/views/test-plan/report/detail/component/custom-card/customRichText.vue
new file mode 100644
index 0000000000..993707275e
--- /dev/null
+++ b/frontend/src/views/test-plan/report/detail/component/custom-card/customRichText.vue
@@ -0,0 +1,87 @@
+<template>
+  <a-tooltip
+    v-if="!props.canEdit"
+    :mouse-enter-delay="300"
+    :disabled="!props.customForm.label"
+    :content="props.customForm.label"
+    position="tl"
+  >
+    <div class="one-line-text mb-[8px] font-medium">{{ innerTextForm.label }}</div>
+  </a-tooltip>
+  <a-input
+    v-else
+    v-model:model-value="innerTextForm.label"
+    :placeholder="t('report.detail.customTitlePlaceHolder')"
+    :max-length="255"
+    allow-clear
+    @blur="blurHandler"
+  />
+  <div :class="`${hasAnyPermission(['PROJECT_TEST_PLAN_REPORT:READ+UPDATE']) && !shareId ? '' : 'cursor-not-allowed'}`">
+    <MsRichText
+      v-model:raw="innerTextForm.content"
+      v-model:filedIds="innerTextForm.richTextTmpFileIds"
+      :upload-image="handleUploadImage"
+      class="mt-[8px] w-full"
+      :editable="props.canEdit"
+      @click="handleClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import MsRichText from '@/components/pure/ms-rich-text/MsRichText.vue';
+
+  import { editorUploadFile } from '@/api/modules/test-plan/report';
+  import useDoubleClick from '@/hooks/useDoubleClick';
+  import { useI18n } from '@/hooks/useI18n';
+  import { hasAnyPermission } from '@/utils/permission';
+
+  import { customValueForm } from '@/models/testPlan/testPlanReport';
+
+  const { t } = useI18n();
+
+  const props = defineProps<{
+    customForm: customValueForm;
+    canEdit: boolean;
+    shareId?: string;
+    currentId: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'updateCustom', formValue: customValueForm): void;
+    (e: 'dblclick'): void;
+  }>();
+
+  const innerTextForm = ref<customValueForm>({
+    content: '',
+    label: '',
+    richTextTmpFileIds: [],
+  });
+
+  watchEffect(() => {
+    innerTextForm.value = { ...props.customForm };
+  });
+
+  async function handleUploadImage(file: File) {
+    const { data } = await editorUploadFile({
+      fileList: [file],
+    });
+    return data;
+  }
+
+  function blurHandler() {
+    emit('updateCustom', {
+      ...innerTextForm.value,
+      label: innerTextForm.value.label || t('report.detail.customDefaultCardName'),
+    });
+  }
+  function emitDoubleClick() {
+    emit('dblclick');
+  }
+
+  const { handleClick } = useDoubleClick(emitDoubleClick);
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/views/test-plan/report/detail/component/planDetail.vue b/frontend/src/views/test-plan/report/detail/component/planDetail.vue
deleted file mode 100644
index d86d1a4df1..0000000000
--- a/frontend/src/views/test-plan/report/detail/component/planDetail.vue
+++ /dev/null
@@ -1,448 +0,0 @@
-<template>
-  <ReportHeader v-if="!props.isDrawer" :detail="detail" :share-id="shareId" :is-group="false" />
-  <div class="analysis-wrapper" :data-cards="cardCount">
-    <div class="analysis min-w-[238px]">
-      <div class="block-title">{{ t('report.detail.api.reportAnalysis') }}</div>
-      <ReportMetricsItem
-        v-for="analysisItem in reportAnalysisList"
-        :key="analysisItem.name"
-        :item-info="analysisItem"
-      />
-    </div>
-    <div class="analysis min-w-[410px]">
-      <ExecuteAnalysis :detail="detail" />
-    </div>
-    <div v-if="functionalCaseTotal" class="analysis min-w-[330px]">
-      <div class="block-title">{{ t('report.detail.useCaseAnalysis') }}</div>
-      <div class="flex">
-        <div class="w-[70%]">
-          <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="pending" />
-          <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="success" />
-          <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="block" />
-          <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="error" />
-        </div>
-        <div class="relative w-[30%] min-w-[150px]">
-          <div class="charts absolute w-full text-center">
-            <div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
-            <a-popover position="bottom" content-class="response-popover-content">
-              <div class="flex justify-center text-[18px] font-medium">
-                <div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{ functionCasePassRate }} </div>
-              </div>
-              <template #content>
-                <div class="min-w-[95px] max-w-[400px] p-4 text-[14px]">
-                  <div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
-                  <div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{ functionCasePassRate }}</div>
-                </div>
-              </template>
-            </a-popover>
-          </div>
-          <div class="flex h-full w-full min-w-[150px] items-center justify-center">
-            <MsChart width="150px" height="150px" :options="functionCaseOptions"
-          /></div>
-        </div>
-      </div>
-    </div>
-    <div v-if="apiCaseTotal" class="analysis min-w-[330px]">
-      <div class="block-title">{{ t('report.detail.apiUseCaseAnalysis') }}</div>
-      <div class="flex">
-        <div class="w-[70%]">
-          <SingleStatusProgress type="API" :detail="detail" status="pending" />
-          <SingleStatusProgress type="API" :detail="detail" status="success" />
-          <SingleStatusProgress type="API" :detail="detail" status="fakeError" />
-          <SingleStatusProgress type="API" :detail="detail" status="error" />
-        </div>
-        <div class="relative w-[30%] min-w-[150px]">
-          <div class="charts absolute w-full text-center">
-            <div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
-            <a-popover position="bottom" content-class="response-popover-content">
-              <div class="flex justify-center text-[18px] font-medium">
-                <div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{ apiCasePassRate }} </div>
-              </div>
-              <template #content>
-                <div class="min-w-[95px] max-w-[400px] p-4 text-[14px]">
-                  <div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
-                  <div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{ apiCasePassRate }}</div>
-                </div>
-              </template>
-            </a-popover>
-          </div>
-          <div class="flex h-full w-full min-w-[150px] items-center justify-center">
-            <MsChart width="150px" height="150px" :options="apiCaseOptions"
-          /></div>
-        </div>
-      </div>
-    </div>
-    <div v-if="scenarioCaseTotal" class="analysis min-w-[330px]">
-      <div class="block-title">{{ t('report.detail.scenarioUseCaseAnalysis') }}</div>
-      <div class="flex">
-        <div class="w-[70%]">
-          <SingleStatusProgress type="SCENARIO" :detail="detail" status="pending" />
-          <SingleStatusProgress type="SCENARIO" :detail="detail" status="success" />
-          <SingleStatusProgress type="SCENARIO" :detail="detail" status="fakeError" />
-          <SingleStatusProgress type="SCENARIO" :detail="detail" status="error" />
-        </div>
-        <div class="relative w-[30%] min-w-[150px]">
-          <div class="charts absolute w-full text-center">
-            <div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
-            <a-popover position="bottom" content-class="response-popover-content">
-              <div class="flex justify-center text-[18px] font-medium">
-                <div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{ scenarioCasePassRate }} </div>
-              </div>
-              <template #content>
-                <div class="min-w-[95px] max-w-[400px] p-4 text-[14px]">
-                  <div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
-                  <div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{ scenarioCasePassRate }}</div>
-                </div>
-              </template>
-            </a-popover>
-          </div>
-          <div class="flex h-full w-full min-w-[150px] items-center justify-center">
-            <MsChart width="150px" height="150px" :options="scenarioCaseOptions"
-          /></div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <Summary
-    v-model:richText="richText"
-    :share-id="shareId"
-    :show-button="showButton"
-    :is-plan-group="false"
-    :detail="detail"
-    @update-summary="handleUpdateReportDetail"
-    @cancel="handleCancel"
-    @handle-summary="handleSummary"
-  />
-  <MsCard simple auto-height auto-width>
-    <MsTab
-      v-model:active-key="activeTab"
-      :show-badge="false"
-      :content-tab-list="contentTabList"
-      no-content
-      class="relative mb-[16px] border-b"
-    />
-    <BugTable v-if="activeTab === 'bug'" :report-id="detail.id" :share-id="shareId" />
-    <FeatureCaseTable
-      v-if="activeTab === 'featureCase'"
-      :active-tab="activeTab"
-      :report-id="detail.id"
-      :share-id="shareId"
-    />
-    <ApiAndScenarioTable
-      v-if="['apiCase', 'scenarioCase'].includes(activeTab)"
-      :report-id="detail.id"
-      :share-id="shareId"
-      :active-tab="activeTab"
-    />
-  </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 MsChart from '@/components/pure/chart/index.vue';
-  import MsCard from '@/components/pure/ms-card/index.vue';
-  import MsTab from '@/components/pure/ms-tab/index.vue';
-  import ReportMetricsItem from './ReportMetricsItem.vue';
-  import SingleStatusProgress from '@/views/test-plan/report/component/singleStatusProgress.vue';
-  import ApiAndScenarioTable from '@/views/test-plan/report/detail/component/apiAndScenarioTable.vue';
-  import BugTable from '@/views/test-plan/report/detail/component/bugTable.vue';
-  import ExecuteAnalysis from '@/views/test-plan/report/detail/component/executeAnalysis.vue';
-  import FeatureCaseTable from '@/views/test-plan/report/detail/component/featureCaseTable.vue';
-  import ReportHeader from '@/views/test-plan/report/detail/component/reportHeader.vue';
-  import Summary from '@/views/test-plan/report/detail/component/summary.vue';
-
-  import { updateReportDetail } from '@/api/modules/test-plan/report';
-  import { commonConfig, defaultCount, defaultReportDetail, seriesConfig, statusConfig } from '@/config/testPlan';
-  import { useI18n } from '@/hooks/useI18n';
-  import { addCommasToNumber } from '@/utils';
-
-  import type {
-    countDetail,
-    PlanReportDetail,
-    ReportMetricsItemModel,
-    StatusListType,
-  } from '@/models/testPlan/testPlanReport';
-
-  import { getSummaryDetail } from '@/views/test-plan/report/utils';
-
-  const { t } = useI18n();
-
-  const route = useRoute();
-  const props = defineProps<{
-    detailInfo: PlanReportDetail;
-    isDrawer?: boolean;
-  }>();
-
-  const emit = defineEmits<{
-    (e: 'updateSuccess'): void;
-  }>();
-
-  const detail = ref<PlanReportDetail>({ ...cloneDeep(defaultReportDetail) });
-  const showButton = ref<boolean>(false);
-  const richText = ref<{ summary: string; richTextTmpFileIds?: string[] }>({
-    summary: '',
-  });
-
-  /**
-   * 分享share
-   */
-  const shareId = ref<string>(route.query.shareId as string);
-
-  // 功能用例分析
-  const functionCaseOptions = ref({
-    ...commonConfig,
-    series: {
-      ...seriesConfig,
-      data: [
-        {
-          value: 0,
-          name: t('common.success'),
-          itemStyle: {
-            color: '#00C261',
-          },
-        },
-      ],
-    },
-  });
-  // 接口用例分析
-  const apiCaseOptions = ref({
-    ...commonConfig,
-    series: {
-      ...seriesConfig,
-      data: [
-        {
-          value: 0,
-          name: t('common.success'),
-          itemStyle: {
-            color: '#00C261',
-          },
-        },
-      ],
-    },
-  });
-  // 场景用例分析
-  const scenarioCaseOptions = ref({
-    ...commonConfig,
-    series: {
-      ...seriesConfig,
-      data: [
-        {
-          value: 0,
-          name: t('common.success'),
-          itemStyle: {
-            color: '#00C261',
-          },
-        },
-      ],
-    },
-  });
-
-  // 获取通过率
-  function getPassRateData(caseDetailCount: countDetail) {
-    const caseCountDetail = caseDetailCount || defaultCount;
-    const passRateData = statusConfig.filter((item) => ['success'].includes(item.value));
-    const { success } = caseCountDetail;
-    const valueList = success ? statusConfig : passRateData;
-    return valueList.map((item: StatusListType) => {
-      return {
-        value: caseCountDetail[item.value] || 0,
-        name: t(item.label),
-        itemStyle: {
-          color: success ? item.color : '#D4D4D8',
-          borderWidth: 2,
-          borderColor: '#ffffff',
-        },
-      };
-    });
-  }
-
-  // 初始化图表
-  function initOptionsData() {
-    const { functionalCount, apiCaseCount, apiScenarioCount } = detail.value;
-    functionCaseOptions.value.series.data = getPassRateData(functionalCount);
-    apiCaseOptions.value.series.data = getPassRateData(apiCaseCount);
-    scenarioCaseOptions.value.series.data = getPassRateData(apiScenarioCount);
-  }
-
-  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;
-      emit('updateSuccess');
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error);
-    }
-  }
-
-  const reportAnalysisList = computed<ReportMetricsItemModel[]>(() => [
-    {
-      name: t('report.detail.threshold'),
-      value: detail.value.passThreshold,
-      unit: '%',
-      icon: 'threshold',
-    },
-    {
-      name: t('report.passRate'),
-      value: detail.value.passRate,
-      unit: '%',
-      icon: 'passRate',
-    },
-    {
-      name: t('report.detail.performCompletion'),
-      value: detail.value.executeRate,
-      unit: '%',
-      icon: 'passRate',
-    },
-    {
-      name: t('report.detail.totalDefects'),
-      value: addCommasToNumber(detail.value.bugCount),
-      unit: t('report.detail.number'),
-      icon: 'bugTotal',
-    },
-  ]);
-
-  const functionCasePassRate = computed(() => {
-    const apiCaseDetail = getSummaryDetail(detail.value.functionalCount || defaultCount);
-    return apiCaseDetail.successRate;
-  });
-
-  const apiCasePassRate = computed(() => {
-    const apiCaseDetail = getSummaryDetail(detail.value.apiCaseCount || defaultCount);
-    return apiCaseDetail.successRate;
-  });
-
-  const scenarioCasePassRate = computed(() => {
-    const apiScenarioDetail = getSummaryDetail(detail.value.apiScenarioCount || defaultCount);
-    return apiScenarioDetail.successRate;
-  });
-  const functionalCaseTotal = computed(() => getSummaryDetail(detail.value.functionalCount).caseTotal);
-  const apiCaseTotal = computed(() => getSummaryDetail(detail.value.apiCaseCount).caseTotal);
-  const scenarioCaseTotal = computed(() => getSummaryDetail(detail.value.apiScenarioCount).caseTotal);
-
-  const featureCaseTab = [
-    {
-      value: 'featureCase',
-      label: t('report.detail.featureCaseDetails'),
-    },
-  ];
-  const scenarioCaseTab = [
-    {
-      value: 'scenarioCase',
-      label: t('report.detail.scenarioCaseDetails'),
-    },
-  ];
-  const apiCaseTab = [
-    {
-      value: 'apiCase',
-      label: t('report.detail.apiCaseDetails'),
-    },
-  ];
-
-  const activeTab = ref('bug');
-
-  const contentTabList = computed(() => {
-    const featureTab = functionalCaseTotal.value ? featureCaseTab : [];
-    const apiTab = apiCaseTotal.value ? apiCaseTab : [];
-    const scenarioTab = scenarioCaseTotal.value ? scenarioCaseTab : [];
-
-    return [
-      {
-        value: 'bug',
-        label: t('report.detail.bugDetails'),
-      },
-      ...featureTab,
-      ...apiTab,
-      ...scenarioTab,
-    ];
-  });
-
-  const cardCount = computed(() => {
-    const totalList = [functionalCaseTotal.value, apiCaseTotal.value, scenarioCaseTotal.value];
-    let count = 2;
-    totalList.forEach((item: number) => {
-      if (item > 0) {
-        count++;
-      }
-    });
-    return count;
-  });
-
-  watchEffect(() => {
-    if (props.detailInfo) {
-      detail.value = cloneDeep(props.detailInfo);
-      richText.value.summary = detail.value.summary;
-      initOptionsData();
-    }
-  });
-
-  onMounted(async () => {
-    nextTick(() => {
-      const editorContent = document.querySelector('.editor-content');
-      useEventListener(editorContent, 'click', () => {
-        showButton.value = true;
-      });
-    });
-  });
-
-  function handleCancel() {
-    richText.value = { summary: detail.value.summary };
-    showButton.value = false;
-  }
-
-  function handleSummary(content: string) {
-    richText.value.summary = content;
-  }
-</script>
-
-<style scoped lang="less">
-  .block-title {
-    @apply mb-4 font-medium;
-  }
-  .analysis-wrapper {
-    @apply mb-4 grid items-center gap-4;
-    .analysis {
-      padding: 24px;
-      height: 250px;
-      box-shadow: 0 0 10px rgba(120 56 135/ 5%);
-      @apply rounded-xl bg-white;
-      .charts {
-        top: 36%;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 99;
-        margin: auto;
-      }
-    }
-    &[data-cards='2'],
-    &[data-cards='4'] {
-      grid-template-columns: repeat(2, 1fr);
-    }
-    &[data-cards='3'] {
-      grid-template-columns: repeat(3, 1fr);
-    }
-    // 有5个的时候，上面2个，下面3个
-    &[data-cards='5'] {
-      grid-template-columns: repeat(6, 1fr);
-      & > .analysis:nth-child(1),
-      & > .analysis:nth-child(2) {
-        grid-column: span 3;
-      }
-      & > .analysis:nth-child(n + 3) {
-        grid-column: span 2;
-      }
-    }
-  }
-</style>
diff --git a/frontend/src/views/test-plan/report/detail/component/planGroupDetail.vue b/frontend/src/views/test-plan/report/detail/component/planGroupDetail.vue
deleted file mode 100644
index 25a7a25dfe..0000000000
--- a/frontend/src/views/test-plan/report/detail/component/planGroupDetail.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-  <ReportHeader v-if="!props.isDrawer" :detail="detail" :share-id="shareId" is-group />
-  <div class="analysis-wrapper">
-    <div class="analysis min-w-[238px]">
-      <div class="block-title">{{ t('report.detail.api.reportAnalysis') }}</div>
-      <ReportMetricsItem
-        v-for="analysisItem in reportAnalysisList"
-        :key="analysisItem.name"
-        :item-info="analysisItem"
-      />
-    </div>
-    <div class="analysis min-w-[410px]">
-      <ExecuteAnalysis :detail="detail" />
-    </div>
-  </div>
-  <Summary
-    v-model:richText="richText"
-    :share-id="shareId"
-    :show-button="showButton"
-    :is-plan-group="true"
-    :detail="detail"
-    @update-summary="handleUpdateReportDetail"
-    @cancel="handleCancel"
-    @handle-summary="handleSummary"
-  />
-  <MsCard simple auto-height auto-width>
-    <div class="mb-[16px] flex items-center justify-between">
-      <div class="block-title">{{ t('report.detail.api.reportDetail') }}</div>
-      <a-radio-group class="mb-2" :model-value="currentMode" type="button" @change="handleModeChange">
-        <a-radio value="drawer">
-          <div class="mode-button">
-            <MsIcon :class="{ 'active-color': currentMode === 'drawer' }" type="icon-icon_drawer" />
-            <span class="mode-button-title">{{ t('msTable.columnSetting.drawer') }}</span>
-          </div>
-        </a-radio>
-        <a-radio value="new_window">
-          <div class="mode-button">
-            <MsIcon :class="{ 'active-color': currentMode === 'new_window' }" type="icon-icon_into-item_outlined" />
-            <span class="mode-button-title">{{ t('msTable.columnSetting.newWindow') }}</span>
-          </div>
-        </a-radio>
-      </a-radio-group>
-    </div>
-    <ReportDetailTable :current-mode="currentMode" :report-id="detail.id" :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 MsCard from '@/components/pure/ms-card/index.vue';
-  import ExecuteAnalysis from '@/views/test-plan/report/detail/component/executeAnalysis.vue';
-  import ReportDetailTable from '@/views/test-plan/report/detail/component/reportDetailTable.vue';
-  import ReportHeader from '@/views/test-plan/report/detail/component/reportHeader.vue';
-  import ReportMetricsItem from '@/views/test-plan/report/detail/component/ReportMetricsItem.vue';
-  import Summary from '@/views/test-plan/report/detail/component/summary.vue';
-
-  import { updateReportDetail } from '@/api/modules/test-plan/report';
-  import { defaultReportDetail } from '@/config/testPlan';
-  import { useI18n } from '@/hooks/useI18n';
-  import { addCommasToNumber } from '@/utils';
-
-  import type { PlanReportDetail, ReportMetricsItemModel } from '@/models/testPlan/testPlanReport';
-
-  const { t } = useI18n();
-
-  const route = useRoute();
-  const props = defineProps<{
-    detailInfo: PlanReportDetail;
-    isDrawer?: boolean;
-  }>();
-
-  const emit = defineEmits<{
-    (e: 'updateSuccess'): void;
-  }>();
-
-  const detail = ref<PlanReportDetail>({ ...cloneDeep(defaultReportDetail) });
-  const shareId = ref<string>(route.query.shareId as string);
-
-  const reportAnalysisList = computed<ReportMetricsItemModel[]>(() => [
-    {
-      name: t('report.detail.testPlanTotal'),
-      value: addCommasToNumber(detail.value.planCount),
-      unit: t('report.detail.number'),
-      icon: 'plan_total',
-    },
-    {
-      name: t('report.detail.testPlanCaseTotal'),
-      value: addCommasToNumber(detail.value.caseTotal),
-      unit: t('report.detail.number'),
-      icon: 'case_total',
-    },
-    {
-      name: t('report.passRate'),
-      value: detail.value.passRate,
-      unit: '%',
-      icon: 'passRate',
-    },
-    {
-      name: t('report.detail.totalDefects'),
-      value: addCommasToNumber(detail.value.bugCount),
-      unit: t('report.detail.number'),
-      icon: 'bugTotal',
-    },
-  ]);
-
-  const showButton = ref(false);
-
-  const richText = ref<{ summary: string; richTextTmpFileIds?: string[] }>({
-    summary: '',
-  });
-
-  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;
-      emit('updateSuccess');
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error);
-    }
-  }
-
-  function handleCancel() {
-    richText.value = { summary: detail.value.summary };
-    showButton.value = false;
-  }
-
-  function handleSummary(content: string) {
-    richText.value.summary = content;
-  }
-
-  const currentMode = ref<string>('drawer');
-  const handleModeChange = (value: string | number | boolean) => {
-    currentMode.value = value as string;
-  };
-
-  watchEffect(() => {
-    if (props.detailInfo) {
-      detail.value = cloneDeep(props.detailInfo);
-      richText.value.summary = detail.value.summary;
-    }
-  });
-
-  onMounted(async () => {
-    nextTick(() => {
-      const editorContent = document.querySelector('.editor-content');
-      useEventListener(editorContent, 'click', () => {
-        showButton.value = true;
-      });
-    });
-  });
-</script>
-
-<style scoped lang="less">
-  .block-title {
-    @apply mb-4 font-medium;
-  }
-  .analysis-wrapper {
-    @apply mb-4 flex flex-wrap items-center gap-4;
-    .analysis {
-      padding: 24px;
-      height: 250px;
-      box-shadow: 0 0 10px rgba(120 56 135/ 5%);
-      @apply flex-1 rounded-xl bg-white;
-      .charts {
-        top: 36%;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 99;
-        margin: auto;
-      }
-    }
-  }
-</style>
diff --git a/frontend/src/views/test-plan/report/detail/component/planOrGroupReport.vue b/frontend/src/views/test-plan/report/detail/component/planOrGroupReport.vue
deleted file mode 100644
index fa4b0abc82..0000000000
--- a/frontend/src/views/test-plan/report/detail/component/planOrGroupReport.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <PlanGroupDetail v-if="props.isGroup" :detail-info="detail" @update-success="getDetail()" />
-  <PlanDetail v-else :detail-info="detail" @update-success="getDetail()" />
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue';
-  import { cloneDeep } from 'lodash-es';
-
-  import PlanDetail from '@/views/test-plan/report/detail/component/planDetail.vue';
-  import PlanGroupDetail from '@/views/test-plan/report/detail/component/planGroupDetail.vue';
-
-  import { getReportDetail } from '@/api/modules/test-plan/report';
-  import { defaultReportDetail } from '@/config/testPlan';
-
-  import type { PlanReportDetail } from '@/models/testPlan/testPlanReport';
-
-  const props = defineProps<{
-    isGroup: boolean;
-    reportId: string;
-  }>();
-
-  const detail = ref<PlanReportDetail>(cloneDeep(defaultReportDetail));
-
-  async function getDetail() {
-    try {
-      detail.value = await getReportDetail(props.reportId);
-    } catch (error) {
-      console.log(error);
-    }
-  }
-
-  onBeforeMount(() => {
-    getDetail();
-  });
-</script>
-
-<style scoped lang="less"></style>
diff --git a/frontend/src/views/test-plan/report/detail/component/reportConfig.ts b/frontend/src/views/test-plan/report/detail/component/reportConfig.ts
new file mode 100644
index 0000000000..357d50bbbc
--- /dev/null
+++ b/frontend/src/views/test-plan/report/detail/component/reportConfig.ts
@@ -0,0 +1,175 @@
+import { defaultCount } from '@/config/testPlan';
+
+import { ApiOrScenarioCaseItem, FeatureCaseItem, ReportBugItem } from '@/models/testPlan/report';
+import type { configItem } from '@/models/testPlan/testPlanReport';
+import { PlanReportDetail } from '@/models/testPlan/testPlanReport';
+import { ReportCardTypeEnum } from '@/enums/testPlanReportEnum';
+
+export const commonDefaultConfig: configItem[] = [
+  {
+    id: ReportCardTypeEnum.SUMMARY,
+    value: ReportCardTypeEnum.SUMMARY,
+    label: 'report.detail.reportSummary',
+    system: true,
+    enableEdit: false,
+  },
+  {
+    id: ReportCardTypeEnum.BUG_DETAIL,
+    value: ReportCardTypeEnum.BUG_DETAIL,
+    label: 'report.detail.bugDetails',
+    system: true,
+    enableEdit: false,
+  },
+  {
+    id: ReportCardTypeEnum.FUNCTIONAL_DETAIL,
+    value: ReportCardTypeEnum.FUNCTIONAL_DETAIL,
+    label: 'report.detail.featureCaseDetails',
+    system: true,
+    enableEdit: false,
+  },
+  {
+    id: ReportCardTypeEnum.API_CASE_DETAIL,
+    value: ReportCardTypeEnum.API_CASE_DETAIL,
+    label: 'report.detail.apiCaseDetails',
+    system: true,
+    enableEdit: false,
+  },
+  {
+    id: ReportCardTypeEnum.SCENARIO_CASE_DETAIL,
+    value: ReportCardTypeEnum.SCENARIO_CASE_DETAIL,
+    label: 'report.detail.scenarioCaseDetails',
+    system: true,
+    enableEdit: false,
+  },
+];
+
+export const defaultCustomConfig: configItem = {
+  id: '',
+  value: ReportCardTypeEnum.CUSTOM_CARD,
+  label: 'report.detail.customDefaultCardName',
+  system: false,
+  enableEdit: false,
+  content: '',
+};
+
+// 独立报告默认配置
+export const defaultSingleConfig: configItem[] = [...commonDefaultConfig];
+// 集合报告默认配置
+export const defaultGroupConfig: configItem[] = [
+  {
+    id: ReportCardTypeEnum.SUB_PLAN_DETAIL,
+    value: ReportCardTypeEnum.SUB_PLAN_DETAIL,
+    label: 'report.detail.subPlanDetails',
+    system: true,
+    enableEdit: false,
+  },
+  ...commonDefaultConfig,
+];
+
+interface NamedItem {
+  name?: string;
+  title?: string;
+  testPlanName?: string;
+}
+
+export function createData<T extends NamedItem>(listItem: T): T[] {
+  const list = [];
+  for (let index = 0; index < 10; index++) {
+    const numIndex = index + 1;
+    const item = {
+      id: `Example_${index}`,
+      ...listItem,
+      num: numIndex,
+      name: `${listItem.name}_${numIndex}`,
+      title: `${listItem.title}_${numIndex}`,
+      testPlanName: `${listItem.testPlanName}_${numIndex}`,
+    };
+    list.push(item);
+  }
+  return list;
+}
+
+// 示例数据
+// 子计划报告
+const subPlanList: PlanReportDetail = {
+  id: 'Example_738373617320062',
+  name: '子计划明细_示例数据',
+  testPlanName: '子计划明细_示例数据',
+  createTime: 1719374179322,
+  startTime: 0,
+  endTime: 0,
+  summary: '',
+  caseTotal: 1,
+  passThreshold: 100.0,
+  passRate: 0.0,
+  executeRate: 0,
+  bugCount: 0,
+  planCount: 0,
+  executeCount: defaultCount,
+  functionalCount: defaultCount,
+  apiCaseCount: defaultCount,
+  apiScenarioCount: defaultCount,
+  passCountOfPlan: 0,
+  failCountOfPlan: 0,
+  functionalBugCount: 0,
+  apiBugCount: 0,
+  scenarioBugCount: 0,
+  resultStatus: 'SUCCESS',
+};
+
+// 功能用例明细
+const functionalList: FeatureCaseItem = {
+  id: 'Example_738373617320062',
+  num: 1,
+  name: '用例明细_示例数据',
+  moduleName: '/未规划模块',
+  priority: 'P1',
+  executeResult: 'SUCCESS',
+  executeUserName: '',
+  bugCount: 0,
+};
+// 缺陷明细
+const bugList: ReportBugItem = {
+  id: 'Example_738373617320062',
+  num: 1,
+  title: '缺陷明细_示例数据',
+  status: '新建',
+  handleUserName: 'admin',
+  relationCaseCount: 0,
+};
+// 接口明细
+const apiCaseList: ApiOrScenarioCaseItem = {
+  id: 'Example_738373617320062',
+  num: 1,
+  name: '接口明细_示例数据',
+  moduleName: '/未规划模块',
+  priority: 'P0',
+  executeResult: 'SUCCESS',
+  executeUser: 'admin',
+  bugCount: 0,
+  reportId: '718255970852864',
+  projectId: '718255970852864',
+};
+// 场景明细
+const scenarioCaseList: ApiOrScenarioCaseItem = {
+  id: 'Example_738373617320062',
+  num: 1,
+  name: '场景明细_示例数据',
+  moduleName: '/未规划模块',
+  priority: 'P2',
+  executeResult: 'SUCCESS',
+  executeUser: '社恐程序员',
+  bugCount: 0,
+  reportId: '718255970852864',
+  projectId: '718255970852864',
+};
+
+export const detailTableExample: Record<string, any> = {
+  [ReportCardTypeEnum.SUB_PLAN_DETAIL]: createData<PlanReportDetail>(subPlanList),
+  [ReportCardTypeEnum.FUNCTIONAL_DETAIL]: createData<FeatureCaseItem>(functionalList),
+  [ReportCardTypeEnum.BUG_DETAIL]: createData<ReportBugItem>(bugList),
+  [ReportCardTypeEnum.API_CASE_DETAIL]: createData<ApiOrScenarioCaseItem>(apiCaseList),
+  [ReportCardTypeEnum.SCENARIO_CASE_DETAIL]: createData<ApiOrScenarioCaseItem>(scenarioCaseList),
+};
+
+export default {};
diff --git a/frontend/src/views/test-plan/report/detail/component/ReportMetricsItem.vue b/frontend/src/views/test-plan/report/detail/component/system-card/ReportMetricsItem.vue
similarity index 100%
rename from frontend/src/views/test-plan/report/detail/component/ReportMetricsItem.vue
rename to frontend/src/views/test-plan/report/detail/component/system-card/ReportMetricsItem.vue
diff --git a/frontend/src/views/test-plan/report/detail/component/apiAndScenarioTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue
similarity index 84%
rename from frontend/src/views/test-plan/report/detail/component/apiAndScenarioTable.vue
rename to frontend/src/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue
index f84ed55c18..6423704509 100644
--- a/frontend/src/views/test-plan/report/detail/component/apiAndScenarioTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue
@@ -26,9 +26,13 @@
     v-model:visible="reportVisible"
     :report-id="apiReportId"
     do-not-show-share
-    :is-scenario="props.activeTab === 'scenarioCase'"
-    :report-detail="props.activeTab === 'scenarioCase' ? reportScenarioDetail : reportCaseDetail"
-    :get-report-step-detail="props.activeTab === 'scenarioCase' ? reportStepDetail : reportCaseStepDetail"
+    :is-scenario="props.activeType === ReportCardTypeEnum.SCENARIO_CASE_DETAIL"
+    :report-detail="
+      props.activeType === ReportCardTypeEnum.SCENARIO_CASE_DETAIL ? reportScenarioDetail : reportCaseDetail
+    "
+    :get-report-step-detail="
+      props.activeType === ReportCardTypeEnum.SCENARIO_CASE_DETAIL ? reportStepDetail : reportCaseStepDetail
+    "
   />
 </template>
 
@@ -56,15 +60,18 @@
   import { ReportEnum } from '@/enums/reportEnum';
   import { ApiTestRouteEnum } from '@/enums/routeEnum';
   import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
+  import { ReportCardTypeEnum } from '@/enums/testPlanReportEnum';
 
   import { casePriorityOptions, lastReportStatusListOptions } from '@/views/api-test/components/config';
+  import { detailTableExample } from '@/views/test-plan/report/detail/component/reportConfig';
 
   const { openNewPage } = useOpenNewPage();
 
   const props = defineProps<{
     reportId: string;
     shareId?: string;
-    activeTab: string;
+    activeType: ReportCardTypeEnum;
+    isPreview?: boolean;
   }>();
 
   const columns: MsTableColumn = [
@@ -128,13 +135,6 @@
     },
   ];
 
-  const getReportApiList = () => {
-    if (props.activeTab === 'apiCase') {
-      return getApiPage;
-    }
-    return getScenarioPage;
-  };
-
   const useApiTable = useTable(getApiPage, {
     scroll: { x: '100%' },
     columns,
@@ -149,7 +149,7 @@
   });
 
   const currentCaseTable = computed(() => {
-    return props.activeTab === 'apiCase' ? useApiTable : useScenarioTable;
+    return props.activeType === ReportCardTypeEnum.API_CASE_DETAIL ? useApiTable : useScenarioTable;
   });
 
   async function loadCaseList() {
@@ -170,7 +170,7 @@
 
   // 去接口用例详情页面
   function toDetail(record: PlanDetailApiCaseItem) {
-    if (props.activeTab === 'scenarioCase') {
+    if (props.activeType === ReportCardTypeEnum.SCENARIO_CASE_DETAIL) {
       openNewPage(ApiTestRouteEnum.API_TEST_SCENARIO, {
         id: record.id,
         pId: record.projectId,
@@ -183,16 +183,13 @@
     }
   }
 
-  watch(
-    () => props.activeTab,
-    () => {
+  watchEffect(() => {
+    if (props.reportId && props.activeType && props.isPreview) {
       currentCaseTable.value.resetFilterParams();
       currentCaseTable.value.resetPagination();
       loadCaseList();
+    } else {
+      currentCaseTable.value.propsRes.value.data = detailTableExample[props.activeType];
     }
-  );
-
-  onMounted(() => {
-    loadCaseList();
   });
 </script>
diff --git a/frontend/src/views/test-plan/report/detail/component/bugTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/bugTable.vue
similarity index 82%
rename from frontend/src/views/test-plan/report/detail/component/bugTable.vue
rename to frontend/src/views/test-plan/report/detail/component/system-card/bugTable.vue
index 6062c5a6c7..cbd258bae7 100644
--- a/frontend/src/views/test-plan/report/detail/component/bugTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/bugTable.vue
@@ -3,17 +3,23 @@
 </template>
 
 <script setup lang="ts">
-  import { onBeforeMount } from 'vue';
-
   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, getReportShareBugList } from '@/api/modules/test-plan/report';
+  import { useI18n } from '@/hooks/useI18n';
+
+  import { ReportCardTypeEnum } from '@/enums/testPlanReportEnum';
+
+  import { detailTableExample } from '@/views/test-plan/report/detail/component/reportConfig';
+
+  const { t } = useI18n();
 
   const props = defineProps<{
     reportId: string;
     shareId?: string;
+    isPreview?: boolean;
   }>();
 
   const columns: MsTableColumn = [
@@ -73,8 +79,10 @@
   }
 
   watchEffect(() => {
-    if (props.reportId) {
+    if (props.reportId && props.isPreview) {
       loadCaseList();
+    } else {
+      propsRes.value.data = detailTableExample[ReportCardTypeEnum.BUG_DETAIL];
     }
   });
 </script>
diff --git a/frontend/src/views/test-plan/report/detail/component/executeAnalysis.vue b/frontend/src/views/test-plan/report/detail/component/system-card/executeAnalysis.vue
similarity index 100%
rename from frontend/src/views/test-plan/report/detail/component/executeAnalysis.vue
rename to frontend/src/views/test-plan/report/detail/component/system-card/executeAnalysis.vue
diff --git a/frontend/src/views/test-plan/report/detail/component/featureCaseTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
similarity index 67%
rename from frontend/src/views/test-plan/report/detail/component/featureCaseTable.vue
rename to frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
index 6b35800780..f57a02e093 100644
--- a/frontend/src/views/test-plan/report/detail/component/featureCaseTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
@@ -8,31 +8,60 @@
     </template>
     <template #lastExecResult="{ record }">
       <ExecuteResult :execute-result="record.executeResult" />
+      <MsButton class="ml-[8px]" :disabled="!props.isPreview" @click="openExecuteHistory(record)">{{
+        t('common.detail')
+      }}</MsButton>
     </template>
   </MsBaseTable>
+  <MsDrawer
+    v-model:visible="showDetailVisible"
+    :title="t('ms.case.associate.title')"
+    :width="1200"
+    :footer="false"
+    no-content-padding
+    unmount-on-close
+  >
+    <!-- TODO 等待联调 后台没出接口 -->
+    <ExecutionHistory
+      :extra-params="{
+        caseId: '',
+        id: '',
+        testPlanId: '',
+      }"
+      :load-list-fun="executeHistory"
+    />
+  </MsDrawer>
 </template>
 
 <script setup lang="ts">
   import { onBeforeMount } from 'vue';
 
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
   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 CaseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
   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 { useI18n } from '@/hooks/useI18n';
 
+  import { FeatureCaseItem } from '@/models/testPlan/report';
   import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
+  import { ReportCardTypeEnum } from '@/enums/testPlanReportEnum';
 
   import { executionResultMap } from '@/views/case-management/caseManagementFeature/components/utils';
+  import { detailTableExample } from '@/views/test-plan/report/detail/component/reportConfig';
 
   const props = defineProps<{
     reportId: string;
     shareId?: string;
-    activeTab: string;
+    isPreview?: boolean;
   }>();
-
+  const { t } = useI18n();
   const columns: MsTableColumn = [
     {
       title: 'ID',
@@ -58,6 +87,18 @@
       },
       width: 180,
     },
+    {
+      title: 'common.executionResult',
+      dataIndex: 'executeResult',
+      slotName: 'lastExecResult',
+      filterConfig: {
+        valueKey: 'key',
+        labelKey: 'statusText',
+        options: Object.values(executionResultMap),
+        filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_EXECUTE_RESULT,
+      },
+      width: 150,
+    },
     {
       title: 'common.belongModule',
       dataIndex: 'moduleName',
@@ -71,18 +112,7 @@
       slotName: 'caseLevel',
       width: 120,
     },
-    {
-      title: 'common.executionResult',
-      dataIndex: 'executeResult',
-      slotName: 'lastExecResult',
-      filterConfig: {
-        valueKey: 'key',
-        labelKey: 'statusText',
-        options: Object.values(executionResultMap),
-        filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_EXECUTE_RESULT,
-      },
-      width: 150,
-    },
+
     {
       title: 'testPlan.featureCase.executor',
       dataIndex: 'executeUser',
@@ -111,8 +141,19 @@
   }
 
   watchEffect(() => {
-    if (props.reportId) {
+    if (props.reportId && props.isPreview) {
       loadCaseList();
+    } else {
+      propsRes.value.data = detailTableExample[ReportCardTypeEnum.FUNCTIONAL_DETAIL];
     }
   });
+
+  const showDetailVisible = ref<boolean>(false);
+
+  const detailRecord = ref();
+
+  function openExecuteHistory(record: FeatureCaseItem) {
+    detailRecord.value = record;
+    showDetailVisible.value = true;
+  }
 </script>
diff --git a/frontend/src/views/test-plan/report/detail/component/planDetailHeaderRight.vue b/frontend/src/views/test-plan/report/detail/component/system-card/planDetailHeaderRight.vue
similarity index 100%
rename from frontend/src/views/test-plan/report/detail/component/planDetailHeaderRight.vue
rename to frontend/src/views/test-plan/report/detail/component/system-card/planDetailHeaderRight.vue
diff --git a/frontend/src/views/test-plan/report/detail/component/reportDetailTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/reportDetailTable.vue
similarity index 88%
rename from frontend/src/views/test-plan/report/detail/component/reportDetailTable.vue
rename to frontend/src/views/test-plan/report/detail/component/system-card/reportDetailTable.vue
index 48a55beba8..1478871bde 100644
--- a/frontend/src/views/test-plan/report/detail/component/reportDetailTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/reportDetailTable.vue
@@ -23,7 +23,7 @@
       <ExecutionStatus :status="filterContent.value" />
     </template>
     <template #operation="{ record }">
-      <MsButton class="!mx-0" :disabled="record.deleted" @click="openReport(record)">{{
+      <MsButton class="!mx-0" :disabled="record.deleted || !props.isPreview" @click="openReport(record)">{{
         t('report.detail.testPlanGroup.viewReport')
       }}</MsButton>
     </template>
@@ -49,6 +49,9 @@
   import { PlanReportStatus } from '@/enums/reportEnum';
   import { RouteEnum } from '@/enums/routeEnum';
   import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
+  import { ReportCardTypeEnum } from '@/enums/testPlanReportEnum';
+
+  import { detailTableExample } from '@/views/test-plan/report/detail/component/reportConfig';
 
   const { openNewPage } = useOpenNewPage();
 
@@ -57,9 +60,13 @@
   const props = defineProps<{
     reportId: string;
     shareId?: string;
-    currentMode: string;
+    isPreview?: boolean;
   }>();
 
+  const innerCurrentMode = defineModel<string>('currentMode', {
+    default: 'drawer',
+  });
+
   const statusResultOptions = computed(() => {
     return Object.keys(PlanReportStatus).map((key) => {
       return {
@@ -132,8 +139,10 @@
   }
 
   watchEffect(() => {
-    if (props.reportId) {
+    if (props.reportId && props.isPreview) {
       loadReportDetailList();
+    } else {
+      propsRes.value.data = detailTableExample[ReportCardTypeEnum.SUB_PLAN_DETAIL];
     }
   });
 
@@ -143,7 +152,7 @@
 
   function openReport(record: PlanReportDetail) {
     independentReportId.value = record.id;
-    if (props.currentMode === 'drawer') {
+    if (innerCurrentMode.value === 'drawer') {
       reportVisible.value = true;
     } else {
       openNewPage(RouteEnum.TEST_PLAN_REPORT_DETAIL, {
diff --git a/frontend/src/views/test-plan/report/detail/component/reportHeader.vue b/frontend/src/views/test-plan/report/detail/component/system-card/reportHeader.vue
similarity index 94%
rename from frontend/src/views/test-plan/report/detail/component/reportHeader.vue
rename to frontend/src/views/test-plan/report/detail/component/system-card/reportHeader.vue
index 729f19e891..867d855bf0 100644
--- a/frontend/src/views/test-plan/report/detail/component/reportHeader.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/reportHeader.vue
@@ -17,7 +17,7 @@
   import { ref } from 'vue';
 
   import MsCard from '@/components/pure/ms-card/index.vue';
-  import PlanDetailHeaderRight from '@/views/test-plan/report/detail/component/planDetailHeaderRight.vue';
+  import PlanDetailHeaderRight from '@/views/test-plan/report/detail/component/system-card/planDetailHeaderRight.vue';
 
   import type { PlanReportDetail } from '@/models/testPlan/testPlanReport';
 
diff --git a/frontend/src/views/test-plan/report/detail/component/summary.vue b/frontend/src/views/test-plan/report/detail/component/system-card/summary.vue
similarity index 80%
rename from frontend/src/views/test-plan/report/detail/component/summary.vue
rename to frontend/src/views/test-plan/report/detail/component/system-card/summary.vue
index f9b96e35ff..5b434b1fab 100644
--- a/frontend/src/views/test-plan/report/detail/component/summary.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/summary.vue
@@ -1,45 +1,41 @@
 <template>
-  <MsCard class="mb-[16px]" simple auto-height auto-width>
-    <div class="font-medium">{{ t('report.detail.reportSummary') }}</div>
-    <div
-      :class="`${hasAnyPermission(['PROJECT_TEST_PLAN_REPORT:READ+UPDATE']) && !shareId ? '' : 'cursor-not-allowed'}`"
-    >
-      <MsRichText
-        v-model:raw="innerSummary.summary"
-        v-model:filedIds="innerSummary.richTextTmpFileIds"
-        :upload-image="handleUploadImage"
-        :preview-url="ReportPlanPreviewImageUrl"
-        class="mt-[8px] w-full"
-        :editable="!!shareId"
-      />
-      <MsFormItemSub
-        v-if="hasAnyPermission(['PROJECT_TEST_PLAN_REPORT:READ+UPDATE']) && !shareId && props.showButton"
-        :text="t('report.detail.oneClickSummary')"
-        :show-fill-icon="true"
-        @fill="handleSummary"
-      />
-    </div>
+  <div :class="`${hasAnyPermission(['PROJECT_TEST_PLAN_REPORT:READ+UPDATE']) && !shareId ? '' : 'cursor-not-allowed'}`">
+    <MsRichText
+      v-model:raw="innerSummary.summary"
+      v-model:filedIds="innerSummary.richTextTmpFileIds"
+      :upload-image="handleUploadImage"
+      :preview-url="ReportPlanPreviewImageUrl"
+      class="mt-[8px] w-full"
+      :editable="props.canEdit"
+      @click="handleClick"
+    />
+    <MsFormItemSub
+      v-if="hasAnyPermission(['PROJECT_TEST_PLAN_REPORT:READ+UPDATE']) && !shareId && props.showButton && props.canEdit"
+      :text="t('report.detail.oneClickSummary')"
+      :show-fill-icon="true"
+      @fill="handleSummary"
+    />
+  </div>
 
-    <div
-      v-show="props.showButton && hasAnyPermission(['PROJECT_TEST_PLAN_REPORT:READ+UPDATE']) && !shareId"
-      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>
-  </MsCard>
+  <div
+    v-show="props.showButton && hasAnyPermission(['PROJECT_TEST_PLAN_REPORT:READ+UPDATE']) && !shareId && props.canEdit"
+    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>
 </template>
 
 <script setup lang="ts">
   import { ref } from 'vue';
   import { useVModel } from '@vueuse/core';
 
-  import MsCard from '@/components/pure/ms-card/index.vue';
   import MsRichText from '@/components/pure/ms-rich-text/MsRichText.vue';
   import MsFormItemSub from '@/components/business/ms-form-item-sub/index.vue';
 
   import { editorUploadFile } from '@/api/modules/test-plan/report';
   import { ReportPlanPreviewImageUrl } from '@/api/requrls/test-plan/report';
+  import useDoubleClick from '@/hooks/useDoubleClick';
   import { useI18n } from '@/hooks/useI18n';
   import { hasAnyPermission } from '@/utils/permission';
 
@@ -54,11 +50,13 @@
     showButton: boolean;
     isPlanGroup: boolean;
     detail: PlanReportDetail;
+    canEdit: boolean;
   }>();
 
   const emit = defineEmits<{
     (e: 'updateSummary'): void;
     (e: 'cancel'): void;
+    (e: 'dblclick'): void;
     (e: 'handleSummary', content: string): void;
   }>();
 
@@ -128,6 +126,11 @@
   function handleSummary() {
     emit('handleSummary', summaryContent.value);
   }
+
+  function emitDoubleClick() {
+    emit('dblclick');
+  }
+  const { handleClick } = useDoubleClick(emitDoubleClick);
 </script>
 
 <style scoped></style>
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/systemTrigger.vue b/frontend/src/views/test-plan/report/detail/component/system-card/systemTrigger.vue
new file mode 100644
index 0000000000..a319caf197
--- /dev/null
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/systemTrigger.vue
@@ -0,0 +1,29 @@
+<template>
+  <a-trigger
+    unmount-on-close
+    trigger="hover"
+    :disabled="props.isPreview"
+    :popup-translate="props.popupTranslate || [100, -100]"
+  >
+    <slot></slot>
+    <template #content>
+      <div class="arco-table-filters-content px-[8px] py-[4px]">{{ t('report.detail.systemInternalTooltip') }}</div>
+    </template>
+  </a-trigger>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { TriggerPopupTranslate } from '@arco-design/web-vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+
+  const props = defineProps<{
+    isPreview?: boolean;
+    popupTranslate?: TriggerPopupTranslate | undefined;
+  }>();
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/views/test-plan/report/detail/component/viewReport.vue b/frontend/src/views/test-plan/report/detail/component/viewReport.vue
new file mode 100644
index 0000000000..366c89df92
--- /dev/null
+++ b/frontend/src/views/test-plan/report/detail/component/viewReport.vue
@@ -0,0 +1,663 @@
+<template>
+  <ReportHeader v-if="!props.isDrawer && props.isPreview" :detail="detail" :share-id="shareId" :is-group="false" />
+  <div class="analysis-wrapper" :data-cards="cardCount">
+    <SystemTrigger :is-preview="props.isPreview">
+      <div :class="`${getAnalysisHover} analysis min-w-[238px]`">
+        <div class="block-title">{{ t('report.detail.api.reportAnalysis') }}</div>
+        <ReportMetricsItem
+          v-for="analysisItem in reportAnalysisList"
+          :key="analysisItem.name"
+          :item-info="analysisItem"
+        />
+      </div>
+    </SystemTrigger>
+    <SystemTrigger :is-preview="props.isPreview">
+      <div :class="`${getAnalysisHover} analysis min-w-[410px]`">
+        <ExecuteAnalysis :detail="detail" />
+      </div>
+      <template #content>
+        <div class="arco-table-filters-content px-[8px] py-[4px]">{{ t('report.detail.systemInternalTooltip') }}</div>
+      </template>
+    </SystemTrigger>
+    <SystemTrigger :is-preview="props.isPreview">
+      <div v-if="functionalCaseTotal" :class="`${getAnalysisHover} analysis min-w-[330px]`">
+        <div class="block-title">{{ t('report.detail.useCaseAnalysis') }}</div>
+        <div class="flex">
+          <div class="w-[70%]">
+            <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="pending" />
+            <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="success" />
+            <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="block" />
+            <SingleStatusProgress :detail="detail" type="FUNCTIONAL" status="error" />
+          </div>
+          <div class="relative w-[30%] min-w-[150px]">
+            <div class="charts absolute w-full text-center">
+              <div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
+              <a-popover position="bottom" content-class="response-popover-content">
+                <div class="flex justify-center text-[18px] font-medium">
+                  <div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{ functionCasePassRate }} </div>
+                </div>
+                <template #content>
+                  <div class="min-w-[95px] max-w-[400px] p-4 text-[14px]">
+                    <div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
+                    <div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{
+                      functionCasePassRate
+                    }}</div>
+                  </div>
+                </template>
+              </a-popover>
+            </div>
+            <div class="flex h-full w-full min-w-[150px] items-center justify-center">
+              <MsChart width="150px" height="150px" :options="functionCaseOptions" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </SystemTrigger>
+    <SystemTrigger :is-preview="props.isPreview">
+      <div v-if="apiCaseTotal" :class="`${getAnalysisHover} analysis min-w-[330px]`">
+        <div class="block-title">{{ t('report.detail.apiUseCaseAnalysis') }}</div>
+        <div class="flex">
+          <div class="w-[70%]">
+            <SingleStatusProgress type="API" :detail="detail" status="pending" />
+            <SingleStatusProgress type="API" :detail="detail" status="success" />
+            <SingleStatusProgress type="API" :detail="detail" status="fakeError" />
+            <SingleStatusProgress type="API" :detail="detail" status="error" />
+          </div>
+          <div class="relative w-[30%] min-w-[150px]">
+            <div class="charts absolute w-full text-center">
+              <div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
+              <a-popover position="bottom" content-class="response-popover-content">
+                <div class="flex justify-center text-[18px] font-medium">
+                  <div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{ apiCasePassRate }} </div>
+                </div>
+                <template #content>
+                  <div class="min-w-[95px] max-w-[400px] p-4 text-[14px]">
+                    <div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
+                    <div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{ apiCasePassRate }}</div>
+                  </div>
+                </template>
+              </a-popover>
+            </div>
+            <div class="flex h-full w-full min-w-[150px] items-center justify-center">
+              <MsChart width="150px" height="150px" :options="apiCaseOptions" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #content>
+        <div class="arco-table-filters-content px-[8px] py-[4px]">{{ t('report.detail.systemInternalTooltip') }}</div>
+      </template>
+    </SystemTrigger>
+    <SystemTrigger :is-preview="props.isPreview">
+      <div v-if="scenarioCaseTotal" :class="`${getAnalysisHover} analysis min-w-[330px]`">
+        <div class="block-title">{{ t('report.detail.scenarioUseCaseAnalysis') }}</div>
+        <div class="flex">
+          <div class="w-[70%]">
+            <SingleStatusProgress type="SCENARIO" :detail="detail" status="pending" />
+            <SingleStatusProgress type="SCENARIO" :detail="detail" status="success" />
+            <SingleStatusProgress type="SCENARIO" :detail="detail" status="fakeError" />
+            <SingleStatusProgress type="SCENARIO" :detail="detail" status="error" />
+          </div>
+          <div class="relative w-[30%] min-w-[150px]">
+            <div class="charts absolute w-full text-center">
+              <div class="text-[12px] !text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
+              <a-popover position="bottom" content-class="response-popover-content">
+                <div class="flex justify-center text-[18px] font-medium">
+                  <div class="one-line-text max-w-[80px] text-[var(--color-text-1)]">{{ scenarioCasePassRate }} </div>
+                </div>
+                <template #content>
+                  <div class="min-w-[95px] max-w-[400px] p-4 text-[14px]">
+                    <div class="text-[12px] font-medium text-[var(--color-text-4)]">{{ t('report.passRate') }}</div>
+                    <div class="mt-2 text-[18px] font-medium text-[var(--color-text-1)]">{{
+                      scenarioCasePassRate
+                    }}</div>
+                  </div>
+                </template>
+              </a-popover>
+            </div>
+            <div class="flex h-full w-full min-w-[150px] items-center justify-center">
+              <MsChart width="150px" height="150px" :options="scenarioCaseOptions" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </SystemTrigger>
+  </div>
+
+  <div :class="`${props.isPreview ? 'mt-[16px]' : 'mt-[24px]'} drag-container`">
+    <VueDraggable v-model="innerCardList" :disabled="props.isPreview" group="report">
+      <div
+        v-for="(item, index) of innerCardList"
+        v-show="showItem(item)"
+        :key="item.id"
+        :class="`${props.isPreview ? 'mt-[16px]' : 'hover-card mt-[24px]'} card-item`"
+      >
+        <div v-if="!props.isPreview" class="action">
+          <div class="actionList">
+            <a-tooltip :content="t('system.orgTemplate.toTop')">
+              <MsIcon
+                type="icon-icon_up_outlined"
+                size="16"
+                :class="getColor(index, 'top')"
+                @click="moveCard(item, 'top')"
+              />
+            </a-tooltip>
+            <a-divider direction="vertical" class="!m-0 !mx-2" />
+            <a-tooltip :content="t('system.orgTemplate.toBottom')">
+              <MsIcon
+                :class="getColor(index, 'bottom')"
+                type="icon-icon_down_outlined"
+                size="16"
+                @click="moveCard(item, 'bottom')"
+              />
+            </a-tooltip>
+            <a-divider direction="vertical" class="!m-0 !mx-2" />
+            <a-tooltip v-if="allowEdit(item.value)" :content="t('common.edit')">
+              <MsIcon type="icon-icon_edit_outlined" size="16" @click="editField(item)" />
+            </a-tooltip>
+            <a-divider v-if="allowEdit(item.value)" direction="vertical" class="!m-0 !mx-2" />
+            <a-tooltip :content="t('common.delete')">
+              <MsIcon type="icon-icon_delete-trash_outlined" size="16" @click="deleteCard(item)" />
+            </a-tooltip>
+          </div>
+        </div>
+        <MsCard simple auto-height auto-width>
+          <div v-if="item.value !== ReportCardTypeEnum.CUSTOM_CARD" class="mb-[8px] font-medium">
+            {{ t(item.label) }}
+          </div>
+          <ReportDetailTable
+            v-if="item.value === ReportCardTypeEnum.SUB_PLAN_DETAIL"
+            v-model:current-mode="currentMode"
+            :report-id="detail.id"
+            :share-id="shareId"
+            :is-preview="props.isPreview"
+          />
+          <Summary
+            v-else-if="item.value === ReportCardTypeEnum.SUMMARY"
+            v-model:richText="richText"
+            :share-id="shareId"
+            :can-edit="item.enableEdit"
+            :show-button="showButton"
+            :is-plan-group="props.isGroup"
+            :detail="detail"
+            @update-summary="handleUpdateReportDetail"
+            @cancel="() => handleCancel(item)"
+            @handle-summary="handleSummary"
+            @dblclick="handleDoubleClick(item)"
+          />
+          <BugTable
+            v-else-if="item.value === ReportCardTypeEnum.BUG_DETAIL"
+            :report-id="detail.id"
+            :share-id="shareId"
+            :is-preview="props.isPreview"
+          />
+
+          <FeatureCaseTable
+            v-else-if="item.value === ReportCardTypeEnum.FUNCTIONAL_DETAIL"
+            :report-id="detail.id"
+            :share-id="shareId"
+            :is-preview="props.isPreview"
+          />
+          <ApiAndScenarioTable
+            v-else-if="
+              item.value === ReportCardTypeEnum.API_CASE_DETAIL ||
+              item.value === ReportCardTypeEnum.SCENARIO_CASE_DETAIL
+            "
+            :report-id="detail.id"
+            :share-id="shareId"
+            :active-type="item.value"
+            :is-preview="props.isPreview"
+          />
+          <CustomRichText
+            v-else-if="item.value === ReportCardTypeEnum.CUSTOM_CARD"
+            :can-edit="item.enableEdit"
+            :share-id="shareId"
+            :current-id="item.id"
+            :custom-form="{
+              content: item.content,
+              label: t(item.label),
+              richTextTmpFileIds: [],
+            }"
+            @update-custom="(formValue:customValueForm)=>updateCustom(formValue,item)"
+            @dblclick="handleDoubleClick(item)"
+          />
+        </MsCard>
+      </div>
+    </VueDraggable>
+  </div>
+</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 { VueDraggable } from 'vue-draggable-plus';
+
+  import MsChart from '@/components/pure/chart/index.vue';
+  import MsCard from '@/components/pure/ms-card/index.vue';
+  import SingleStatusProgress from '@/views/test-plan/report/component/singleStatusProgress.vue';
+  import CustomRichText from '@/views/test-plan/report/detail/component/custom-card/customRichText.vue';
+  import ApiAndScenarioTable from '@/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue';
+  import BugTable from '@/views/test-plan/report/detail/component/system-card/bugTable.vue';
+  import ExecuteAnalysis from '@/views/test-plan/report/detail/component/system-card/executeAnalysis.vue';
+  import FeatureCaseTable from '@/views/test-plan/report/detail/component/system-card/featureCaseTable.vue';
+  import ReportDetailTable from '@/views/test-plan/report/detail/component/system-card/reportDetailTable.vue';
+  import ReportHeader from '@/views/test-plan/report/detail/component/system-card/reportHeader.vue';
+  import ReportMetricsItem from '@/views/test-plan/report/detail/component/system-card/ReportMetricsItem.vue';
+  import Summary from '@/views/test-plan/report/detail/component/system-card/summary.vue';
+  import SystemTrigger from '@/views/test-plan/report/detail/component/system-card/systemTrigger.vue';
+
+  import { updateReportDetail } from '@/api/modules/test-plan/report';
+  import { commonConfig, defaultCount, defaultReportDetail, seriesConfig, statusConfig } from '@/config/testPlan';
+  import { useI18n } from '@/hooks/useI18n';
+  import { addCommasToNumber } from '@/utils';
+
+  import type {
+    configItem,
+    countDetail,
+    PlanReportDetail,
+    ReportMetricsItemModel,
+    StatusListType,
+  } from '@/models/testPlan/testPlanReport';
+  import { customValueForm } from '@/models/testPlan/testPlanReport';
+  import { ReportCardTypeEnum } from '@/enums/testPlanReportEnum';
+
+  import { getSummaryDetail } from '@/views/test-plan/report/utils';
+
+  const { t } = useI18n();
+
+  const route = useRoute();
+  const props = defineProps<{
+    detailInfo: PlanReportDetail;
+    isDrawer?: boolean;
+    isGroup?: boolean;
+    isPreview?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'updateSuccess'): void;
+    (e: 'updateSuccess'): void;
+    (e: 'updateCustom', item: configItem): void;
+  }>();
+
+  const innerCardList = defineModel<configItem[]>('cardList', {
+    default: [],
+  });
+
+  const detail = ref<PlanReportDetail>({ ...cloneDeep(defaultReportDetail) });
+  const showButton = ref<boolean>(false);
+
+  const richText = ref<{ summary: string; richTextTmpFileIds?: string[] }>({
+    summary: '',
+  });
+
+  const isError = ref(false);
+  const reportForm = ref({
+    reportName: '',
+  });
+
+  function inputHandler(value: string) {
+    if (value.trim().length === 0) {
+      isError.value = true;
+    }
+    isError.value = false;
+  }
+
+  const getAnalysisHover = computed(() => (props.isPreview ? '' : 'hover-analysis cursor-not-allowed'));
+
+  /**
+   * 分享share
+   */
+  const shareId = ref<string>(route.query.shareId as string);
+
+  // 功能用例分析
+  const functionCaseOptions = ref({
+    ...commonConfig,
+    series: {
+      ...seriesConfig,
+      data: [
+        {
+          value: 0,
+          name: t('common.success'),
+          itemStyle: {
+            color: '#00C261',
+          },
+        },
+      ],
+    },
+  });
+  // 接口用例分析
+  const apiCaseOptions = ref({
+    ...commonConfig,
+    series: {
+      ...seriesConfig,
+      data: [
+        {
+          value: 0,
+          name: t('common.success'),
+          itemStyle: {
+            color: '#00C261',
+          },
+        },
+      ],
+    },
+  });
+  // 场景用例分析
+  const scenarioCaseOptions = ref({
+    ...commonConfig,
+    series: {
+      ...seriesConfig,
+      data: [
+        {
+          value: 0,
+          name: t('common.success'),
+          itemStyle: {
+            color: '#00C261',
+          },
+        },
+      ],
+    },
+  });
+
+  // 获取通过率
+  function getPassRateData(caseDetailCount: countDetail) {
+    const caseCountDetail = caseDetailCount || defaultCount;
+    const passRateData = statusConfig.filter((item) => ['success'].includes(item.value));
+    const { success } = caseCountDetail;
+    const valueList = success ? statusConfig : passRateData;
+    return valueList.map((item: StatusListType) => {
+      return {
+        value: caseCountDetail[item.value] || 0,
+        name: t(item.label),
+        itemStyle: {
+          color: success ? item.color : '#D4D4D8',
+          borderWidth: 2,
+          borderColor: '#ffffff',
+        },
+      };
+    });
+  }
+
+  // 初始化图表
+  function initOptionsData() {
+    const { functionalCount, apiCaseCount, apiScenarioCount } = detail.value;
+    functionCaseOptions.value.series.data = getPassRateData(functionalCount);
+    apiCaseOptions.value.series.data = getPassRateData(apiCaseCount);
+    scenarioCaseOptions.value.series.data = getPassRateData(apiScenarioCount);
+  }
+
+  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;
+      emit('updateSuccess');
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  const reportAnalysisList = computed<ReportMetricsItemModel[]>(() => [
+    {
+      name: t('report.detail.threshold'),
+      value: detail.value.passThreshold,
+      unit: '%',
+      icon: 'threshold',
+    },
+    {
+      name: t('report.passRate'),
+      value: detail.value.passRate,
+      unit: '%',
+      icon: 'passRate',
+    },
+    {
+      name: t('report.detail.performCompletion'),
+      value: detail.value.executeRate,
+      unit: '%',
+      icon: 'passRate',
+    },
+    {
+      name: t('report.detail.totalDefects'),
+      value: addCommasToNumber(detail.value.bugCount),
+      unit: t('report.detail.number'),
+      icon: 'bugTotal',
+    },
+  ]);
+
+  const functionCasePassRate = computed(() => {
+    const apiCaseDetail = getSummaryDetail(detail.value.functionalCount || defaultCount);
+    return apiCaseDetail.successRate;
+  });
+
+  const apiCasePassRate = computed(() => {
+    const apiCaseDetail = getSummaryDetail(detail.value.apiCaseCount || defaultCount);
+    return apiCaseDetail.successRate;
+  });
+
+  const scenarioCasePassRate = computed(() => {
+    const apiScenarioDetail = getSummaryDetail(detail.value.apiScenarioCount || defaultCount);
+    return apiScenarioDetail.successRate;
+  });
+  const functionalCaseTotal = computed(() => getSummaryDetail(detail.value.functionalCount).caseTotal);
+  const apiCaseTotal = computed(() => getSummaryDetail(detail.value.apiCaseCount).caseTotal);
+  const scenarioCaseTotal = computed(() => getSummaryDetail(detail.value.apiScenarioCount).caseTotal);
+
+  function showItem(item: configItem) {
+    switch (item.value) {
+      case ReportCardTypeEnum.FUNCTIONAL_DETAIL:
+        return functionalCaseTotal.value > 0;
+      case ReportCardTypeEnum.API_CASE_DETAIL:
+        return apiCaseTotal.value > 0;
+      case ReportCardTypeEnum.SCENARIO_CASE_DETAIL:
+        return scenarioCaseTotal.value > 0;
+      default:
+        return true;
+    }
+  }
+
+  const cardCount = computed(() => {
+    const totalList = [functionalCaseTotal.value, apiCaseTotal.value, scenarioCaseTotal.value];
+    let count = 2;
+    totalList.forEach((item: number) => {
+      if (item > 0) {
+        count++;
+      }
+    });
+    return count;
+  });
+
+  watchEffect(() => {
+    if (props.detailInfo) {
+      detail.value = cloneDeep(props.detailInfo);
+      richText.value.summary = detail.value.summary;
+      reportForm.value.reportName = detail.value.name;
+      initOptionsData();
+    }
+  });
+
+  onMounted(async () => {
+    nextTick(() => {
+      const editorContent = document.querySelector('.editor-content');
+      useEventListener(editorContent, 'click', () => {
+        showButton.value = true;
+      });
+    });
+  });
+
+  function handleCancel(cardItem: configItem) {
+    richText.value = { summary: detail.value.summary };
+    showButton.value = false;
+    cardItem.enableEdit = false;
+  }
+
+  function handleSummary(content: string) {
+    richText.value.summary = content;
+  }
+
+  const currentMode = ref<string>('drawer');
+
+  function getColor(index: number, type: string) {
+    if (type === 'top' && index === 0) {
+      return ['text-[rgb(var(--primary-3))]'];
+    }
+    if (type === 'bottom' && index === innerCardList.value.length - 1) {
+      return ['text-[rgb(var(--primary-3))]'];
+    }
+  }
+
+  const allowEditType = [ReportCardTypeEnum.SUMMARY, ReportCardTypeEnum.CUSTOM_CARD];
+  function allowEdit(value: ReportCardTypeEnum) {
+    return allowEditType.includes(value);
+  }
+  // 移动卡片
+  function moveCard(cardItem: configItem, type: string) {
+    const moveIndex = innerCardList.value.findIndex((item: any) => item.id === cardItem.id);
+    if (type === 'top') {
+      if (moveIndex === 0) {
+        return;
+      }
+      innerCardList.value.splice(moveIndex, 1);
+      innerCardList.value.splice(moveIndex - 1, 0, cardItem);
+    } else {
+      if (moveIndex === innerCardList.value.length - 1) {
+        return;
+      }
+      innerCardList.value.splice(moveIndex, 1);
+      innerCardList.value.splice(moveIndex + 1, 0, cardItem);
+    }
+  }
+  // 删除卡片
+  const deleteCard = (cardItem: configItem) => {
+    innerCardList.value = innerCardList.value.filter((item) => item.id !== cardItem.id);
+  };
+  // 编辑模式和预览模式切换
+  function editField(cardItem: configItem) {
+    if (allowEditType.includes(cardItem.value)) {
+      cardItem.enableEdit = !cardItem.enableEdit;
+    }
+    if (cardItem.value === ReportCardTypeEnum.SUMMARY) {
+      showButton.value = true;
+    }
+  }
+
+  function handleDoubleClick(cardItem: configItem) {
+    editField(cardItem);
+  }
+
+  function updateCustom(formValue: customValueForm, currentItem: configItem) {
+    const newCurrentItem = {
+      ...currentItem,
+      ...formValue,
+    };
+    innerCardList.value = innerCardList.value.map((item) => {
+      if (item.id === currentItem.id) {
+        return {
+          ...item,
+          ...formValue,
+          enableEdit: false,
+        };
+      }
+      return item;
+    });
+    emit('updateCustom', newCurrentItem);
+  }
+</script>
+
+<style scoped lang="less">
+  .report-name {
+    padding: 0 16px;
+    height: 56px;
+    @apply flex items-center justify-between border-b bg-white;
+  }
+  .block-title {
+    @apply mb-4 font-medium;
+  }
+  .config-right-container {
+    padding: 16px;
+    width: calc(100% - 300px);
+    background: var(--color-bg-3);
+  }
+  .analysis-wrapper {
+    @apply mb-4 grid items-center gap-4;
+    .analysis {
+      padding: 24px;
+      height: 250px;
+      border: 1px solid transparent;
+      box-shadow: 0 0 10px rgba(120 56 135/ 5%);
+      @apply rounded-xl bg-white;
+      .charts {
+        top: 36%;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 99;
+        margin: auto;
+      }
+    }
+    &[data-cards='2'],
+    &[data-cards='4'] {
+      grid-template-columns: repeat(2, 1fr);
+    }
+    &[data-cards='3'] {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    // 有5个的时候，上面2个，下面3个
+    &[data-cards='5'] {
+      grid-template-columns: repeat(6, 1fr);
+      & > .analysis:nth-child(1),
+      & > .analysis:nth-child(2) {
+        grid-column: span 3;
+      }
+      & > .analysis:nth-child(n + 3) {
+        grid-column: span 2;
+      }
+    }
+  }
+  .hover-analysis {
+    &:hover {
+      border: 1px solid rgb(var(--primary-5));
+    }
+  }
+  .drag-container {
+    .card-item {
+      position: relative;
+      border: 1px solid transparent;
+      border-radius: 12px;
+      .action {
+        position: absolute;
+        top: -14px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 9 !important;
+        background: white;
+        opacity: 0;
+        @apply flex items-center justify-end;
+        .actionList {
+          padding: 4px;
+          border-radius: 4px;
+          @apply flex items-center justify-center;
+        }
+      }
+      &:hover > .action {
+        opacity: 1;
+      }
+      &:hover > .action > .actionList {
+        color: rgb(var(--primary-5));
+        box-shadow: 0 4px 10px -1px rgba(100 100 102/ 15%);
+      }
+    }
+  }
+  .hover-card {
+    &:hover {
+      border: 1px solid rgb(var(--primary-5));
+      background: var(--color-text-n9);
+    }
+  }
+</style>
diff --git a/frontend/src/views/test-plan/report/detail/configReport.vue b/frontend/src/views/test-plan/report/detail/configReport.vue
new file mode 100644
index 0000000000..9508b0483a
--- /dev/null
+++ b/frontend/src/views/test-plan/report/detail/configReport.vue
@@ -0,0 +1,101 @@
+<template>
+  <configDetail :is-group="isGroup" :detail-info="detail" />
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useRoute } from 'vue-router';
+
+  import configDetail from './component/config.vue';
+
+  import { getPlanPassRate } from '@/api/modules/test-plan/testPlan';
+
+  import type { detailCountKey, PlanReportDetail } from '@/models/testPlan/testPlanReport';
+
+  const route = useRoute();
+
+  const detail = ref<PlanReportDetail>({
+    id: '',
+    name: '',
+    startTime: 0,
+    createTime: 0, // 报告执行开始时间
+    endTime: 0,
+    summary: '',
+    passThreshold: 100, // 通过阈值
+    passRate: 100, // 通过率
+    executeRate: 100, // 执行完成率
+    bugCount: 0,
+    caseTotal: 0,
+    executeCount: {
+      success: 0,
+      error: 0,
+      fakeError: 0,
+      block: 0,
+      pending: 0,
+    },
+    functionalCount: {
+      success: 0,
+      error: 0,
+      fakeError: 0,
+      block: 0,
+      pending: 0,
+    },
+    apiCaseCount: {
+      success: 0,
+      error: 0,
+      fakeError: 0,
+      block: 0,
+      pending: 0,
+    },
+    apiScenarioCount: {
+      success: 0,
+      error: 0,
+      fakeError: 0,
+      block: 0,
+      pending: 0,
+    },
+    planCount: 10,
+    passCountOfPlan: 0,
+    failCountOfPlan: 0,
+    functionalBugCount: 0,
+    apiBugCount: 0,
+    scenarioBugCount: 0,
+    testPlanName: '',
+  });
+
+  const isGroup = computed(() => route.query.type === 'GROUP');
+
+  async function getStatistics() {
+    detail.value.caseTotal = 0;
+    try {
+      const selectedPlanIds = [route.query.id];
+      const result = await getPlanPassRate(selectedPlanIds as string[]);
+      const [countDetail] = result;
+
+      const { apiCaseCount, apiScenarioCount, functionalCaseCount } = countDetail;
+
+      const totalCase: { key: detailCountKey; count: number }[] = [
+        { key: 'apiCaseCount', count: apiCaseCount },
+        { key: 'apiScenarioCount', count: apiScenarioCount },
+        { key: 'functionalCount', count: functionalCaseCount },
+      ];
+
+      totalCase.forEach((item: { key: detailCountKey; count: number }) => {
+        if (item.count > 0) {
+          detail.value.caseTotal += 10;
+          detail.value.executeCount.success += 10;
+          detail.value[item.key].success = 10;
+        }
+      });
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  onBeforeMount(() => {
+    getStatistics();
+  });
+</script>
+
+<style scoped lang="less"></style>
diff --git a/frontend/src/views/test-plan/report/detail/index.vue b/frontend/src/views/test-plan/report/detail/detail.vue
similarity index 56%
rename from frontend/src/views/test-plan/report/detail/index.vue
rename to frontend/src/views/test-plan/report/detail/detail.vue
index 048b341485..8eac62afe9 100644
--- a/frontend/src/views/test-plan/report/detail/index.vue
+++ b/frontend/src/views/test-plan/report/detail/detail.vue
@@ -1,20 +1,21 @@
 <template>
-  <PlanGroupDetail v-if="isGroup" :detail-info="detail" @update-success="getDetail()" />
-  <PlanDetail v-else :detail-info="detail" @update-success="getDetail()" />
+  <ViewReport v-model:card-list="cardItemList" :detail-info="detail" :is-group="isGroup" is-preview />
 </template>
 
 <script setup lang="ts">
+  // TODO 待联调 需要接口更新后联调下
   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 PlanGroupDetail from '@/views/test-plan/report/detail/component/planGroupDetail.vue';
+  import ViewReport from '@/views/test-plan/report/detail/component/viewReport.vue';
 
   import { getReportDetail } from '@/api/modules/test-plan/report';
   import { defaultReportDetail } from '@/config/testPlan';
 
-  import type { PlanReportDetail } from '@/models/testPlan/testPlanReport';
+  import type { configItem, PlanReportDetail } from '@/models/testPlan/testPlanReport';
+
+  import { defaultGroupConfig, defaultSingleConfig } from '@/views/test-plan/report/detail/component/reportConfig';
 
   const route = useRoute();
   const reportId = ref<string>(route.query.id as string);
@@ -23,7 +24,10 @@
 
   const isGroup = computed(() => route.query.type === 'GROUP');
 
+  const cardItemList = ref<configItem[]>([]);
+
   async function getDetail() {
+    cardItemList.value = isGroup ? cloneDeep(defaultGroupConfig) : cloneDeep(defaultSingleConfig);
     try {
       detail.value = await getReportDetail(reportId.value);
     } catch (error) {
diff --git a/frontend/src/views/test-plan/report/detail/sharePlanReportIndex.vue b/frontend/src/views/test-plan/report/detail/sharePlanReportIndex.vue
index 69614bb24a..07755e92c8 100644
--- a/frontend/src/views/test-plan/report/detail/sharePlanReportIndex.vue
+++ b/frontend/src/views/test-plan/report/detail/sharePlanReportIndex.vue
@@ -1,21 +1,22 @@
 <template>
-  <PlanGroupDetail v-if="isGroup" :detail-info="detail" />
-  <PlanDetail v-else :detail-info="detail" />
+  <ViewReport v-model:card-list="cardItemList" :detail-info="detail" :is-group="isGroup" is-preview />
 </template>
 
 <script setup lang="ts">
+  // TODO 待联调 分享页面也要调整
   import { ref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { cloneDeep } from 'lodash-es';
 
-  import PlanDetail from '@/views/test-plan/report/detail/component/planDetail.vue';
-  import PlanGroupDetail from '@/views/test-plan/report/detail/component/planGroupDetail.vue';
+  import ViewReport from '@/views/test-plan/report/detail/component/viewReport.vue';
 
   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';
+  import type { configItem, PlanReportDetail } from '@/models/testPlan/testPlanReport';
+
+  import { defaultGroupConfig, defaultSingleConfig } from '@/views/test-plan/report/detail/component/reportConfig';
 
   const route = useRoute();
   const router = useRouter();
@@ -23,7 +24,9 @@
   const isGroup = computed(() => route.query.type === 'GROUP');
   const detail = ref<PlanReportDetail>(cloneDeep(defaultReportDetail));
 
+  const cardItemList = ref<configItem[]>([]);
   async function getShareDetail() {
+    cardItemList.value = isGroup ? cloneDeep(defaultGroupConfig) : cloneDeep(defaultSingleConfig);
     try {
       const hrefShareDetail = await planGetShareHref(route.query.shareId as string);
       reportId.value = hrefShareDetail.reportId;
diff --git a/frontend/src/views/test-plan/report/locale/en-US.ts b/frontend/src/views/test-plan/report/locale/en-US.ts
index fddbcf0ebb..720ee9a285 100644
--- a/frontend/src/views/test-plan/report/locale/en-US.ts
+++ b/frontend/src/views/test-plan/report/locale/en-US.ts
@@ -26,7 +26,7 @@ export default {
   'report.passRateTip': 'Pass rate: successful cases in the plan / cases in the plan * 100%',
   'report.detail.reportSummary': 'Report summary',
   'report.detail.bugDetails': 'Bug details',
-  'report.detail.featureCaseDetails': 'Feature case details',
+  'report.detail.featureCaseDetails': 'Case details',
   'report.detail.executionAnalysis': 'Execution Analysis',
   'report.detail.threshold': 'Pass threshold',
   'report.detail.performCompletion': 'Perform completion',
@@ -36,8 +36,8 @@ export default {
   'report.detail.scenarioUseCaseAnalysis': 'Scenario use case analysis',
   'report.detail.number': 'number',
   'report.detail.level': 'level',
-  'report.detail.apiCaseDetails': 'Api use case details',
-  'report.detail.scenarioCaseDetails': 'Scenario use case details',
+  'report.detail.apiCaseDetails': 'Api details',
+  'report.detail.scenarioCaseDetails': 'Scenario details',
   'report.detail.oneClickSummary': 'One click report summary',
   'report.detail.testPlanTotal': 'Total plan',
   'report.detail.testPlanCaseTotal': 'Total use cases',
@@ -46,4 +46,13 @@ export default {
   'report.detail.testPlanGroup.viewReport': 'View Report',
   'report.detail.testReport': 'Planning report',
   'report.detail.testPlanGroupReport': 'Planning groups report',
+  'report.detail.customFieldTooltip': 'Click Add card; Custom can add up to 10; Card support sort',
+  'report.detail.customButton': 'Custom',
+  'report.detail.customDefaultCardName': 'Custom title',
+  'report.detail.subPlanDetails': 'Sub-plan report details',
+  'report.detail.customTitlePlaceHolder': 'Please enter a custom title',
+  'report.detail.baseField': 'Base field',
+  'report.detail.customMaxNumber': 'A maximum of 10 can be added',
+  'report.detail.enterReportNamePlaceHolder': 'Please enter a report name',
+  'report.detail.systemInternalTooltip': 'System built-in, not editable',
 };
diff --git a/frontend/src/views/test-plan/report/locale/zh-CN.ts b/frontend/src/views/test-plan/report/locale/zh-CN.ts
index 72bd2b2071..c900c74ca6 100644
--- a/frontend/src/views/test-plan/report/locale/zh-CN.ts
+++ b/frontend/src/views/test-plan/report/locale/zh-CN.ts
@@ -26,7 +26,7 @@ export default {
   'report.completed': '已完成',
   'report.detail.reportSummary': '报告总结',
   'report.detail.bugDetails': '缺陷明细',
-  'report.detail.featureCaseDetails': '功能用例明细',
+  'report.detail.featureCaseDetails': '用例明细',
   'report.detail.executionAnalysis': '执行分析',
   'report.detail.threshold': '通过阈值',
   'report.detail.performCompletion': '执行完成率',
@@ -36,8 +36,8 @@ export default {
   'report.detail.scenarioUseCaseAnalysis': '场景用例分析',
   'report.detail.number': '个',
   'report.detail.level': '等级',
-  'report.detail.apiCaseDetails': '接口用例明细',
-  'report.detail.scenarioCaseDetails': '场景用例明细',
+  'report.detail.apiCaseDetails': '接口明细',
+  'report.detail.scenarioCaseDetails': '场景明细',
   'report.detail.oneClickSummary': '一键填写报告总结',
   'report.detail.testPlanTotal': '计划总数',
   'report.detail.testPlanCaseTotal': '用例总数',
@@ -46,4 +46,13 @@ export default {
   'report.detail.testPlanGroup.viewReport': '查看报告',
   'report.detail.testReport': '计划报告',
   'report.detail.testPlanGroupReport': '计划组报告',
+  'report.detail.customFieldTooltip': '点击添加卡片；自定义最多可添加 10 个；卡片支持排序',
+  'report.detail.customButton': '自定义',
+  'report.detail.customDefaultCardName': '自定义标题',
+  'report.detail.subPlanDetails': '子计划报告明细',
+  'report.detail.customTitlePlaceHolder': '请输入自定义标题',
+  'report.detail.baseField': '基础字段',
+  'report.detail.customMaxNumber': '最多可添加10个',
+  'report.detail.enterReportNamePlaceHolder': '请输入报告名称',
+  'report.detail.systemInternalTooltip': '系统内置，不可编辑',
 };
diff --git a/frontend/src/views/test-plan/testPlan/components/planExpandRow.vue b/frontend/src/views/test-plan/testPlan/components/planExpandRow.vue
new file mode 100644
index 0000000000..c90394b1fa
--- /dev/null
+++ b/frontend/src/views/test-plan/testPlan/components/planExpandRow.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    v-if="record.type === testPlanTypeEnum.GROUP || record.integrated"
+    class="mr-2 flex items-center"
+    @click="expandHandler"
+  >
+    <MsIcon
+      type="icon-icon_split_turn-down_arrow"
+      class="arrowIcon mr-1 cursor-pointer text-[16px]"
+      :class="getIconClass"
+    />
+    <span :class="getIconClass">{{ record.childrenCount || (record.children || []).length || 0 }}</span>
+  </div>
+  <div v-if="record.type === testPlanTypeEnum.TEST_PLAN || !record.integrated" :class="`one-line-text ${hasIndent}`">
+    <MsButton type="text" @click="handleAction">
+      <a-tooltip :content="content">
+        <span>{{ record[props.numKey || 'num'] }}</span>
+      </a-tooltip>
+    </MsButton>
+  </div>
+  <a-tooltip v-else :content="content">
+    <div :class="`one-line-text ${hasIndent}`">{{ record[props.numKey || 'num'] }}</div>
+  </a-tooltip>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import MsButton from '@/components/pure/ms-button/index.vue';
+
+  import { hasAnyPermission } from '@/utils/permission';
+
+  import { testPlanTypeEnum } from '@/enums/testPlanEnum';
+
+  const props = defineProps<{
+    record: Record<string, any>;
+    numKey?: string;
+    idKey?: string;
+    permission?: string[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'expand'): void;
+    (e: 'action'): void;
+  }>();
+
+  const innerExpandedKeys = defineModel<string[]>('expandedKeys', { default: [] });
+
+  const getIconClass = computed(() => {
+    if (hasAnyPermission(props.permission || [])) {
+      return innerExpandedKeys.value.includes(props.record[props.idKey || 'id'])
+        ? 'text-[rgb(var(--primary-5))]'
+        : 'text-[var(--color-text-4)]';
+    }
+    return '';
+  });
+
+  const content = computed(() => {
+    const key = props.numKey || 'num';
+    return typeof props.record[key] === 'string' ? props.record[key] : props.record[key].toString();
+  });
+
+  const hasIndent = computed(() =>
+    (props.record.type === testPlanTypeEnum.TEST_PLAN && props.record.groupId && props.record.groupId !== 'NONE') ||
+    (!props.record.integrated && props.record.parentId)
+      ? 'pl-[36px]'
+      : ''
+  );
+
+  function expandHandler() {
+    emit('expand');
+  }
+
+  function handleAction() {
+    if (hasAnyPermission(props.permission || [])) {
+      emit('action');
+    }
+  }
+</script>
+
+<style scoped lang="less"></style>
diff --git a/frontend/src/views/test-plan/testPlan/components/planTable.vue b/frontend/src/views/test-plan/testPlan/components/planTable.vue
index 0aa1fd667f..138b9d43eb 100644
--- a/frontend/src/views/test-plan/testPlan/components/planTable.vue
+++ b/frontend/src/views/test-plan/testPlan/components/planTable.vue
@@ -97,29 +97,12 @@
     </template> -->
     <template #num="{ record }">
       <div class="flex items-center">
-        <div
-          v-if="record.type === testPlanTypeEnum.GROUP"
-          class="mr-2 flex items-center"
-          @click="expandHandler(record)"
-        >
-          <MsIcon
-            type="icon-icon_split_turn-down_arrow"
-            class="arrowIcon mr-1 cursor-pointer text-[16px]"
-            :class="getIconClass(record)"
-          />
-          <span :class="getIconClass(record)">{{ record.childrenCount || 0 }}</span>
-        </div>
-
-        <div v-if="record.type === testPlanTypeEnum.TEST_PLAN" :class="`one-line-text ${hasIndent(record)}`">
-          <MsButton type="text" @click="openDetail(record.id)"
-            ><a-tooltip :content="record.num.toString()"
-              ><span>{{ record.num }}</span></a-tooltip
-            ></MsButton
-          >
-        </div>
-        <a-tooltip v-else :content="record.num.toString()">
-          <div :class="`one-line-text ${hasIndent(record)}`">{{ record.num }}</div>
-        </a-tooltip>
+        <PlanExpandRow
+          v-model:expanded-keys="expandedKeys"
+          :record="record"
+          @action="openDetail(record.id)"
+          @expand="expandHandler(record)"
+        />
         <a-tooltip position="right" :disabled="!getSchedule(record.id)" :mouse-enter-delay="300">
           <MsTag
             v-if="getSchedule(record.id)"
@@ -186,13 +169,12 @@
     </template>
 
     <template #passRate="{ record }">
-      <div v-if="record.type === testPlanTypeEnum.TEST_PLAN" class="mr-[8px] w-[100px]">
+      <div class="mr-[8px] w-[100px]">
         <StatusProgress :status-detail="defaultCountDetailMap[record.id]" height="5px" />
       </div>
-      <div v-if="record.type === testPlanTypeEnum.TEST_PLAN" class="text-[var(--color-text-1)]">
+      <div class="text-[var(--color-text-1)]">
         {{ `${defaultCountDetailMap[record.id]?.passRate ? defaultCountDetailMap[record.id].passRate : '-'}%` }}
       </div>
-      <span v-else> - </span>
     </template>
     <template #passRateTitleSlot="{ columnConfig }">
       <div class="flex items-center text-[var(--color-text-3)]">
@@ -206,13 +188,8 @@
       </div>
     </template>
     <template #functionalCaseCount="{ record }">
-      <a-popover
-        v-if="record.type === testPlanTypeEnum.TEST_PLAN"
-        position="bottom"
-        content-class="p-[16px]"
-        :disabled="getFunctionalCount(record.id) < 1"
-      >
-        <div v-if="record.type === testPlanTypeEnum.TEST_PLAN">{{ getFunctionalCount(record.id) }}</div>
+      <a-popover position="bottom" content-class="p-[16px]" :disabled="getFunctionalCount(record.id) < 1">
+        <div>{{ getFunctionalCount(record.id) }}</div>
         <template #content>
           <table class="min-w-[140px] max-w-[176px]">
             <tr>
@@ -250,7 +227,6 @@
           </table>
         </template>
       </a-popover>
-      <span v-else>-</span>
     </template>
 
     <template #operation="{ record }">
@@ -403,6 +379,7 @@
   import BatchMoveOrCopy from './batchMoveOrCopy.vue';
   import ScheduledModal from './scheduledModal.vue';
   import StatusProgress from './statusProgress.vue';
+  import PlanExpandRow from '@/views/test-plan/testPlan/components/planExpandRow.vue';
 
   import {
     addTestPlan,
@@ -628,16 +605,6 @@
     }
   }
 
-  // 设置对齐缩进
-  function hasIndent(record: TestPlanItem) {
-    return (showType.value === 'ALL' || showType.value === 'GROUP') &&
-      record.type === testPlanTypeEnum.TEST_PLAN &&
-      record.groupId &&
-      record.groupId !== 'NONE'
-      ? 'pl-[36px]'
-      : '';
-  }
-
   const batchCopyActions = [
     {
       label: 'common.copy',
@@ -742,6 +709,14 @@
     },
   ];
 
+  const configReportActions: ActionsItem[] = [
+    {
+      label: 'testPlan.planConfigReport',
+      eventTag: 'configReport',
+      permission: ['PROJECT_TEST_PLAN:READ+EXECUTE'],
+    },
+  ];
+
   const defaultCountDetailMap = ref<Record<string, PassRateCountDetail>>({});
   function getFunctionalCount(id: string) {
     return defaultCountDetailMap.value[id]?.caseTotal ?? 0;
@@ -779,11 +754,15 @@
         ? []
         : archiveActions;
 
+    const reportAction =
+      planStatus !== 'ARCHIVED' && record.type === testPlanTypeEnum.GROUP ? [...configReportActions] : [];
+
     // 已归档和已完成不展示归档
     if (planStatus === 'ARCHIVED' || planStatus === 'PREPARED' || planStatus === 'UNDERWAY') {
       return [
         ...copyAction,
         ...scheduledTaskAction,
+        ...reportAction,
         {
           label: 'common.delete',
           danger: true,
@@ -796,6 +775,7 @@
       ...copyAction,
       ...archiveAction,
       ...scheduledTaskAction,
+      ...reportAction,
       {
         isDivider: true,
       },
@@ -1316,6 +1296,26 @@
     activeRecord.value = cloneDeep(record);
     showStatusDeleteModal.value = true;
   }
+  // 计划组配置报告 TODO 后台需要加接口
+  async function configReportHandler(record: TestPlanItem) {
+    try {
+      // await generateReport({
+      //   projectId: appStore.currentProjectId,
+      //   testPlanId: record.id,
+      //   triggerMode: 'MANUAL',
+      // });
+      router.push({
+        name: TestPlanRouteEnum.TEST_PLAN_INDEX_CONFIG,
+        query: {
+          id: record.id,
+          type: record.type === testPlanTypeEnum.GROUP ? 'GROUP' : 'TEST_PLAN',
+        },
+      });
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
 
   // 拖拽排序
   async function handleDragChange(params: DragSortParams) {
@@ -1401,6 +1401,9 @@
       case 'delete':
         deleteStatusHandler(record);
         break;
+      case 'configReport':
+        configReportHandler(record);
+        break;
       case 'archive':
         archiveHandle(record);
         break;
@@ -1422,9 +1425,6 @@
       }
     }
   }
-  function getIconClass(record: TestPlanItem) {
-    return expandedKeys.value.includes(record.id) ? 'text-[rgb(var(--primary-5))]' : 'text-[var(--color-text-4)]';
-  }
 
   /** *
    * 高级检索
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 4483f1f58f..04568f4c4a 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
@@ -24,6 +24,15 @@
           </div>
         </div>
         <div class="markdown-body" style="margin-left: 48px" v-html="item.contentText"></div>
+        <div v-if="props.showStepResult" class="ml-[48px] mt-[8px]">
+          <StepDetail
+            :step-list="getStepData(item.stepsExecResult)"
+            is-disabled
+            is-preview
+            is-test-plan
+            :is-disabled-test-plan="false"
+          />
+        </div>
         <div class="ml-[48px] mt-[8px] flex text-[var(--color-text-4)]">
           {{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}
           <div>
@@ -42,37 +51,37 @@
 
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { useRoute } from 'vue-router';
   import dayjs from 'dayjs';
 
   import MsAvatar from '@/components/pure/ms-avatar/index.vue';
   import MsEmpty from '@/components/pure/ms-empty/index.vue';
+  import StepDetail from '@/views/case-management/caseManagementFeature/components/addStep.vue';
 
-  import { executeHistory } from '@/api/modules/test-plan/testPlan';
   import { useI18n } from '@/hooks/useI18n';
   import { characterLimit } from '@/utils';
 
-  import type { ExecuteHistoryItem } from '@/models/testPlan/testPlan';
+  import type { ExecuteHistoryItem, ExecuteHistoryType } from '@/models/testPlan/testPlan';
 
   const { t } = useI18n();
+
   const props = defineProps<{
-    caseId: string;
-    testPlanCaseId: string;
+    loadListFun: (params: ExecuteHistoryType) => Promise<ExecuteHistoryItem[]>;
+    extraParams: ExecuteHistoryType;
+    showStepResult?: boolean; // 是否展示执行步骤
   }>();
 
   const executeHistoryList = ref<ExecuteHistoryItem[]>([]);
 
-  const route = useRoute();
   const loading = ref<boolean>(false);
 
   async function initList() {
     loading.value = true;
     try {
-      executeHistoryList.value = await executeHistory({
-        caseId: props.caseId,
-        id: props.testPlanCaseId,
-        testPlanId: route.query.id as string,
-      });
+      if (props.loadListFun) {
+        executeHistoryList.value = await props.loadListFun({
+          ...props.extraParams,
+        });
+      }
     } catch (error) {
       console.log(error);
     } finally {
@@ -80,16 +89,30 @@
     }
   }
 
-  onBeforeMount(() => {
-    initList();
-  });
+  function getStepData(steps: string) {
+    if (steps) {
+      return JSON.parse(steps).map((item: any) => {
+        return {
+          id: item.id,
+          step: item.desc,
+          expected: item.result,
+          actualResult: item.actualResult,
+          executeResult: item.executeResult,
+        };
+      });
+    }
+    return [];
+  }
 
   watch(
-    () => props.caseId,
+    () => props.extraParams.caseId,
     (val) => {
       if (val) {
         initList();
       }
+    },
+    {
+      immediate: true,
     }
   );
 </script>
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 8baeb3d46a..25735181a7 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,8 +193,12 @@
           />
           <ExecutionHistory
             v-if="activeTab === 'executionHistory'"
-            :case-id="activeCaseId"
-            :test-plan-case-id="activeId"
+            :extra-params="{
+              caseId:activeCaseId,
+              id: activeId,
+              testPlanId: route.query.id as string,
+            }"
+            :load-list-fun="executeHistory"
           />
         </div>
       </a-spin>
@@ -245,6 +249,7 @@
   import { getBugList } from '@/api/modules/bug-management';
   import {
     associateBugToPlan,
+    executeHistory,
     getCaseDetail,
     getPlanDetailFeatureCaseList,
     getTestPlanDetail,
diff --git a/frontend/src/views/test-plan/testPlan/detail/index.vue b/frontend/src/views/test-plan/testPlan/detail/index.vue
index ff6c1ab826..6ab043377a 100644
--- a/frontend/src/views/test-plan/testPlan/detail/index.vue
+++ b/frontend/src/views/test-plan/testPlan/detail/index.vue
@@ -33,15 +33,17 @@
         <MsIcon type="icon-icon_edit_outlined" class="mr-[8px]" />
         {{ t('common.edit') }}
       </MsButton>
-      <MsButton
-        v-if="hasAnyPermission(['PROJECT_TEST_PLAN:READ+EXECUTE']) && detail.status !== 'ARCHIVED'"
-        type="button"
-        status="default"
-        @click="handleGenerateReport"
-      >
-        <MsIcon type="icon-icon_generate_report" class="mr-[8px]" />
-        {{ t('testPlan.testPlanDetail.generateReport') }}
-      </MsButton>
+      <!-- TODO 等待联调 接口需要调整和增加 -->
+      <MsTableMoreAction :list="reportMoreAction" @select="handleMoreReportSelect">
+        <MsButton
+          v-if="hasAnyPermission(['PROJECT_TEST_PLAN:READ+EXECUTE']) && detail.status !== 'ARCHIVED'"
+          type="button"
+          status="default"
+        >
+          <MsIcon type="icon-icon_generate_report" class="mr-[8px]" />
+          {{ t('testPlan.testPlanDetail.generateReport') }}
+        </MsButton>
+      </MsTableMoreAction>
       <MsButton
         v-if="hasAnyPermission(['PROJECT_TEST_PLAN:READ+ADD']) && detail.status !== 'ARCHIVED'"
         type="button"
@@ -185,6 +187,7 @@
   import { ModuleTreeNode } from '@/models/common';
   import type { PassRateCountDetail, TestPlanDetail, TestPlanItem } from '@/models/testPlan/testPlan';
   import { TestPlanRouteEnum } from '@/enums/routeEnum';
+  import { testPlanTypeEnum } from '@/enums/testPlanEnum';
 
   const userStore = useUserStore();
   const appStore = useAppStore();
@@ -380,7 +383,7 @@
 
   const showPlanDrawer = ref(false);
 
-  // 生成报告
+  // 生成报告  TODO 等待联调 后台要改接口
   async function handleGenerateReport() {
     try {
       loading.value = true;
@@ -397,6 +400,52 @@
       loading.value = false;
     }
   }
+  // 自定义报告  TODO 等待联调 后台缺接口
+  function configReportHandler() {
+    try {
+      // await generateReport({
+      //   projectId: appStore.currentProjectId,
+      //   testPlanId: record.id,
+      //   triggerMode: 'MANUAL',
+      // });
+      router.push({
+        name: TestPlanRouteEnum.TEST_PLAN_INDEX_CONFIG,
+        query: {
+          id: detail.value.id,
+          type: detail.value.type === testPlanTypeEnum.GROUP ? 'GROUP' : 'TEST_PLAN',
+        },
+      });
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  const reportMoreAction: ActionsItem[] = [
+    {
+      label: t('testPlan.planAutomaticGeneration'),
+      eventTag: 'autoGeneration',
+      permission: ['PROJECT_TEST_PLAN:READ+EXECUTE'],
+    },
+    {
+      label: t('testPlan.planConfigReport'),
+      eventTag: 'configReport',
+      permission: ['PROJECT_TEST_PLAN:READ+EXECUTE'],
+    },
+  ];
+
+  function handleMoreReportSelect(item: ActionsItem) {
+    switch (item.eventTag) {
+      case 'autoGeneration':
+        handleGenerateReport();
+        break;
+      case 'configReport':
+        configReportHandler();
+        break;
+      default:
+        break;
+    }
+  }
 
   // 更新 | 复制
   const isCopy = ref<boolean>(false);
diff --git a/frontend/src/views/test-plan/testPlan/detail/reportDrawer.vue b/frontend/src/views/test-plan/testPlan/detail/reportDrawer.vue
index 21c9ee4cbe..ee6302b72f 100644
--- a/frontend/src/views/test-plan/testPlan/detail/reportDrawer.vue
+++ b/frontend/src/views/test-plan/testPlan/detail/reportDrawer.vue
@@ -12,7 +12,7 @@
     <template #tbutton>
       <PlanDetailHeaderRight share-id="" :detail="detail" />
     </template>
-    <PlanDetail is-drawer :detail-info="detail" @update-success="getDetail()" />
+    <ViewReport v-model:card-list="cardItemList" :detail-info="detail" :is-group="false" is-preview is-drawer />
   </MsDrawer>
 </template>
 
@@ -22,13 +22,15 @@
   import { cloneDeep } from 'lodash-es';
 
   import MsDrawer from '@/components/pure/ms-drawer/index.vue';
-  import PlanDetail from '@/views/test-plan/report/detail/component/planDetail.vue';
-  import PlanDetailHeaderRight from '@/views/test-plan/report/detail/component/planDetailHeaderRight.vue';
+  import PlanDetailHeaderRight from '@/views/test-plan/report/detail/component/system-card/planDetailHeaderRight.vue';
+  import ViewReport from '@/views/test-plan/report/detail/component/viewReport.vue';
 
   import { getReportDetail } from '@/api/modules/test-plan/report';
   import { defaultReportDetail } from '@/config/testPlan';
 
-  import type { PlanReportDetail } from '@/models/testPlan/testPlanReport';
+  import type { configItem, PlanReportDetail } from '@/models/testPlan/testPlanReport';
+
+  import { defaultSingleConfig } from '@/views/test-plan/report/detail/component/reportConfig';
 
   const props = defineProps<{
     reportId: string;
@@ -40,6 +42,8 @@
 
   const route = useRoute();
 
+  const cardItemList = ref<configItem[]>(cloneDeep(defaultSingleConfig));
+
   const shareId = ref<string>(route.query.shareId as string);
 
   const detail = ref<PlanReportDetail>(cloneDeep(defaultReportDetail));
diff --git a/frontend/src/views/test-plan/testPlan/locale/en-US.ts b/frontend/src/views/test-plan/testPlan/locale/en-US.ts
index 59568957fd..079939f760 100644
--- a/frontend/src/views/test-plan/testPlan/locale/en-US.ts
+++ b/frontend/src/views/test-plan/testPlan/locale/en-US.ts
@@ -144,5 +144,7 @@ export default {
   'testPlan.plan': 'Test plan',
   'testPlan.planTip':
     '1. Create a test set for business classification testing; 2. Select the test set associated use case',
-  'testPlan.planStartToEndTimeTip': '测试计划已超时',
+  'testPlan.planStartToEndTimeTip': 'The test plan timed out',
+  'testPlan.planConfigReport': 'Configuration Report',
+  'testPlan.planAutomaticGeneration': 'Automatic generation',
 };
diff --git a/frontend/src/views/test-plan/testPlan/locale/zh-CN.ts b/frontend/src/views/test-plan/testPlan/locale/zh-CN.ts
index 872cef3cda..9c6491485c 100644
--- a/frontend/src/views/test-plan/testPlan/locale/zh-CN.ts
+++ b/frontend/src/views/test-plan/testPlan/locale/zh-CN.ts
@@ -135,4 +135,6 @@ export default {
   'testPlan.plan': '测试规划',
   'testPlan.planTip': '1.创建测试点进行业务分类测试；2.选择测试点关联用例',
   'testPlan.planStartToEndTimeTip': '测试计划已超时',
+  'testPlan.planConfigReport': '自定义报告',
+  'testPlan.planAutomaticGeneration': '自动生成',
 };