feat(测试计划): 测试计划详情-双击功能用例详情里富文本内容打开弹窗&样式细节

frontend/src/views/case-management/caseManagementFeature/components/addStep.vue

@@ -44,6 +44,7 @@
         v-model:model-value="record.executeResult"
         :placeholder="t('common.pleaseSelect')"
         class="param-input w-full"
+        allow-clear
       >
         <template #label>
           <span class="text-[var(--color-text-2)]"><ExecuteResult :execute-result="record.executeResult" /></span>

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue

@@ -590,7 +590,7 @@
           step: item.desc,
           expected: item.result,
           actualResult: item.actualResult ?? '',
-          executeResult: item.executeResult ?? 'PASSED',
+          executeResult: item.executeResult,
         };
       });
     }

frontend/src/views/test-plan/testPlan/detail/featureCase/components/executeForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-form ref="formRef" :model="form">
+  <a-form :model="form">
     <a-form-item field="lastExecResult" class="mb-[8px]">
       <a-radio-group v-model:model-value="form.lastExecResult" @change="clearContent">
         <a-radio v-for="item in executionResultList" :key="item.key" :value="item.key">
@@ -12,9 +12,15 @@
         <MsRichText
           v-model:raw="form.content"
           v-model:commentIds="form.commentIds"
+          v-model:filedIds="form.planCommentFileIds"
           :upload-image="handleUploadImage"
           :preview-url="PreviewEditorImageUrl"
           class="w-full"
+          :placeholder="
+            props.isDblclickPlaceholder
+              ? t('testPlan.featureCase.richTextDblclickPlaceholder')
+              : t('editor.placeholder')
+          "
         />
       </div>
     </a-form-item>
@@ -22,26 +28,28 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-  import { FormInstance } from '@arco-design/web-vue';
-
   import MsRichText from '@/components/pure/ms-rich-text/MsRichText.vue';
   import ExecuteResult from '@/components/business/ms-case-associate/executeResult.vue';
 
   import { editorUploadFile } from '@/api/modules/case-management/featureCase';
   import { PreviewEditorImageUrl } from '@/api/requrls/case-management/featureCase';
   import { defaultExecuteForm } from '@/config/testPlan';
+  import { useI18n } from '@/hooks/useI18n';
 
   import type { ExecuteFeatureCaseFormParams } from '@/models/testPlan/testPlan';
   import { LastExecuteResults } from '@/enums/caseEnum';
 
   import { executionResultMap } from '@/views/case-management/caseManagementFeature/components/utils';
 
+  const props = defineProps<{
+    isDblclickPlaceholder?: boolean;
+  }>();
+
   const form = defineModel<ExecuteFeatureCaseFormParams>('form', {
     required: true,
   });
 
-  const formRef = ref<FormInstance>();
+  const { t } = useI18n();
 
   const executionResultList = computed(() =>
     Object.values(executionResultMap).filter((item) => item.key !== LastExecuteResults.PENDING)

frontend/src/views/test-plan/testPlan/detail/featureCase/detail/executeSubmit.vue

@@ -1,6 +1,5 @@
 <template>
-  <ExecuteForm v-model:form="form" />
-  <!-- TODO: 双击富文本内容打开弹窗 -->
+  <ExecuteForm v-model:form="form" is-dblclick-placeholder class="execute-form" />
   <a-button
     type="primary"
     class="mt-[12px]"
@@ -29,6 +28,7 @@
 
 <script setup lang="ts">
   import { computed, ref } from 'vue';
+  import { useEventListener } from '@vueuse/core';
   import { Message } from '@arco-design/web-vue';
 
   import ExecuteForm from '@/views/test-plan/testPlan/detail/featureCase/components/executeForm.vue';
@@ -66,6 +66,16 @@
       (form.value.content === '' || form.value.content?.trim() === '<p style=""></p>')
   );
 
+  // 双击富文本内容打开弹窗
+  onMounted(() => {
+    nextTick(() => {
+      const editorContent = document.querySelector('.execute-form')?.querySelector('.editor-content');
+      useEventListener(editorContent, 'dblclick', () => {
+        modalVisible.value = true;
+      });
+    });
+  });
+
   watch(
     () => props.stepExecutionResult,
     () => {
@@ -81,6 +91,13 @@
     { deep: true }
   );
 
+  watch(
+    () => props.id,
+    () => {
+      form.value = { ...defaultExecuteForm };
+    }
+  );
+
   // 提交执行
   async function submit() {
     try {
@@ -90,9 +107,8 @@
         caseId: props.caseId,
         testPlanId: props.testPlanId,
         id: props.id,
-        lastExecResult: form.value.lastExecResult,
+        ...form.value,
         stepsExecResult: JSON.stringify(props.stepExecutionResult) ?? '',
-        content: form.value.content,
         notifier: form.value?.commentIds?.join(';'),
       };
       await runFeatureCase(params);
@@ -108,3 +124,9 @@
     }
   }
 </script>
+
+<style lang="less" scoped>
+  .execute-form :deep(.rich-wrapper) .halo-rich-text-editor .ProseMirror {
+    height: 58px;
+  }
+</style>

frontend/src/views/test-plan/testPlan/detail/featureCase/detail/index.vue

@@ -45,7 +45,6 @@
             </div>
             <MsEmpty v-if="caseList.length === 0" />
           </div>
-          <!-- TODO 样式 -->
           <MsPagination
             v-model:page-size="pageNation.pageSize"
             v-model:current="pageNation.current"
@@ -85,8 +84,18 @@
           class="relative mx-[16px] border-b"
         />
         <div :class="[' flex-1', activeTab !== 'detail' ? 'tab-content' : 'overflow-hidden']">
-          <!-- TODO: 属性的样式 -->
-          <MsDescription v-if="activeTab === 'baseInfo'" :descriptions="descriptions" :column="2" />
+          <MsDescription v-if="activeTab === 'baseInfo'" :descriptions="descriptions" :column="2">
+            <template #value="{ item }">
+              <template v-if="item.key === 'reviewStatus'">
+                <MsIcon
+                  :type="statusIconMap[item.value as keyof typeof statusIconMap]?.icon || ''"
+                  class="mr-1"
+                  :class="[statusIconMap[item.value as keyof typeof statusIconMap].color]"
+                ></MsIcon>
+                <span>{{ statusIconMap[item.value as keyof typeof statusIconMap]?.statusText || '' }} </span>
+              </template>
+            </template>
+          </MsDescription>
           <div v-else-if="activeTab === 'detail'" class="align-content-start flex h-full flex-col">
             <CaseTabDetail ref="caseTabDetailRef" is-test-plan :form="caseDetail" />
             <!-- 开始执行 -->
@@ -160,7 +169,11 @@
   import { LastExecuteResults } from '@/enums/caseEnum';
   import { CaseManagementRouteEnum } from '@/enums/routeEnum';
 
-  import { executionResultMap, getCustomField } from '@/views/case-management/caseManagementFeature/components/utils';
+  import {
+    executionResultMap,
+    getCustomField,
+    statusIconMap,
+  } from '@/views/case-management/caseManagementFeature/components/utils';
 
   const { t } = useI18n();
   const route = useRoute();
@@ -280,6 +293,7 @@
         {
           label: t('caseManagement.featureCase.reviewResult'),
           value: res.reviewStatus,
+          key: 'reviewStatus',
         },
         // 解析用例模板的自定义字段
         ...res.customFields.map((e: Record<string, any>) => {

frontend/src/views/test-plan/testPlan/locale/en-US.ts

@@ -101,4 +101,5 @@ export default {
     'After cancellation, it will affect the statistics related to the test plan',
   'testPlan.featureCase.batchDisassociateTipContent':
     ' After cancellation, associate again, and the execution result is unexecuted',
+  'testPlan.featureCase.richTextDblclickPlaceholder': 'Double click for quick input',
 };

frontend/src/views/test-plan/testPlan/locale/zh-CN.ts

@@ -98,4 +98,5 @@ export default {
   'testPlan.featureCase.disassociateTipContent': '取消后，影响测试计划相关统计',
   'testPlan.featureCase.batchDisassociateTipContent': '取消后，再次关联，执行结果为：未执行',
   'testPlan.featureCase.startExecution': '开始执行',
+  'testPlan.featureCase.richTextDblclickPlaceholder': '双击可快速输入',
 };