fix(测试用例): 修复用例步骤描述文本选择与表单重叠覆盖

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

@@ -122,7 +122,7 @@
     <template #default="{ detail, loading }">
       <div ref="wrapperRef" class="bg-white">
         <div class="header relative h-[48px] border-b pl-2">
-          <div class="max-w-[calc(100%-72px)]">
+          <div class="max-w-[calc(100%-100px)]">
             <MsTab
               v-model:active-key="activeTab"
               :content-tab-list="tabSetting"
@@ -683,6 +683,7 @@
     right: 16px;
     height: 48px;
     line-height: 48px;
+    @apply bg-white;
   }
   :deep(.arco-menu-light) {
     height: 50px;

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

@@ -24,31 +24,8 @@
             :preview-url="`${PreviewEditorImageUrl}/${currentProjectId}`"
           />
         </a-form-item>
-        <a-form-item
+        <StepDescription v-model:caseEditType="form.caseEditType" />
-          field="step"
+        <div v-if="form.caseEditType === 'STEP'" class="mb-[20px] w-full">
-          :label="
-            form.caseEditType === 'STEP'
-              ? t('system.orgTemplate.stepDescription')
-              : t('system.orgTemplate.textDescription')
-          "
-          class="relative"
-        >
-          <div class="absolute left-16 top-0">
-            <a-divider direction="vertical" />
-            <a-dropdown :popup-max-height="false" @select="handleSelectType">
-              <span class="changeType">{{ t('system.orgTemplate.changeType') }} <icon-down /></span>
-              <template #content>
-                <a-doption value="STEP" :class="getSelectTypeClass('STEP')">
-                  {{ t('system.orgTemplate.stepDescription') }}</a-doption
-                >
-                <a-doption value="TEXT" :class="getSelectTypeClass('TEXT')">{{
-                  t('system.orgTemplate.textDescription')
-                }}</a-doption>
-              </template>
-            </a-dropdown>
-          </div>
-          <!-- 步骤描述 -->
-          <div v-if="form.caseEditType === 'STEP'" class="w-full">
           <AddStep v-model:step-list="stepData" :is-disabled="false" />
         </div>
         <!-- 文本描述 -->
@@ -56,10 +33,10 @@
           v-else
           v-model:raw="form.textDescription"
           v-model:filed-ids="textDescriptionFileIds"
+          class="mb-[20px]"
           :upload-image="handleUploadImage"
           :preview-url="`${PreviewEditorImageUrl}/${currentProjectId}`"
         />
-        </a-form-item>
         <a-form-item
           v-if="form.caseEditType === 'TEXT'"
           field="remark"
@@ -269,6 +246,7 @@
   import SaveAsFilePopover from '@/components/business/ms-add-attachment/saveAsFilePopover.vue';
   import LinkFileDrawer from '@/components/business/ms-link-file/associatedFileDrawer.vue';
   import AddStep from './addStep.vue';
+  import StepDescription from '@/views/case-management/caseManagementFeature/components/tabContent/stepDescription.vue';
 
   import {
     checkFileIsUpdateRequest,

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

@@ -0,0 +1,49 @@
+<template>
+  <div class="mb-[16px] flex items-center">
+    <div class="font-bold text-[var(--color-text-1)]">
+      {{
+        innerCaseEditType === 'STEP' ? t('system.orgTemplate.stepDescription') : t('system.orgTemplate.textDescription')
+      }}
+    </div>
+    <div v-if="!props.isTestPlan" class="font-normal">
+      <a-divider direction="vertical" />
+      <a-dropdown :popup-max-height="false" @select="handleSelectType">
+        <span class="changeType">{{ t('system.orgTemplate.changeType') }} <icon-down /></span>
+        <template #content>
+          <a-doption value="STEP" :class="getSelectTypeClass('STEP')">
+            {{ t('system.orgTemplate.stepDescription') }}
+          </a-doption>
+          <a-doption value="TEXT" :class="getSelectTypeClass('TEXT')">
+            {{ t('system.orgTemplate.textDescription') }}
+          </a-doption>
+        </template>
+      </a-dropdown>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+
+  const props = defineProps<{
+    isTestPlan?: boolean;
+  }>();
+
+  const innerCaseEditType = defineModel<string>('caseEditType', {
+    required: true,
+  });
+
+  // 更改类型
+  const handleSelectType = (value: string | number | Record<string, any> | undefined) => {
+    innerCaseEditType.value = value as string;
+  };
+
+  // 获取类型样式
+  function getSelectTypeClass(type: string) {
+    return innerCaseEditType.value === type ? ['bg-[rgb(var(--primary-1))]', '!text-[rgb(var(--primary-5))]'] : [];
+  }
+</script>
+
+<style scoped></style>

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

@@ -36,33 +36,9 @@
           class="markdown-body list-item-css !break-words break-all"
         ></div>
       </a-form-item>
-      <a-form-item
+      <StepDescription v-model:caseEditType="detailForm.caseEditType" :is-test-plan="props.isTestPlan" />
-        field="step"
-        :label="
-          detailForm.caseEditType === 'STEP'
-            ? t('system.orgTemplate.stepDescription')
-            : t('system.orgTemplate.textDescription')
-        "
-        class="relative"
-      >
-        <div v-if="!props.isTestPlan" class="absolute left-16 top-0 font-normal">
-          <a-divider direction="vertical" />
-          <a-dropdown :popup-max-height="false" @select="handleSelectType">
-            <span class="changeType cursor-pointer text-[var(--color-text-3)]"
-              >{{ t('system.orgTemplate.changeType') }} <icon-down
-            /></span>
-            <template #content>
-              <a-doption value="STEP" :class="getSelectTypeClass('STEP')">
-                {{ t('system.orgTemplate.stepDescription') }}</a-doption
-              >
-              <a-doption value="TEXT" :class="getSelectTypeClass('TEXT')">{{
-                t('system.orgTemplate.textDescription')
-              }}</a-doption>
-            </template>
-          </a-dropdown>
-        </div>
       <!-- 步骤描述 -->
-        <div v-if="detailForm.caseEditType === 'STEP'" class="w-full">
+      <div v-if="detailForm.caseEditType === 'STEP'" class="mb-[20px] w-full">
         <AddStep
           v-model:step-list="stepData"
           :is-scroll-y="false"
@@ -84,10 +60,10 @@
         v-dompurify-html="detailForm.textDescription || '-'"
         class="markdown-body !break-words break-all"
       ></div>
-      </a-form-item>
       <a-form-item
         v-if="detailForm.caseEditType === 'TEXT'"
         field="remark"
+        class="mt-[20px]"
         :label="t('caseManagement.featureCase.expectedResult')"
       >
         <MsRichText
@@ -263,6 +239,7 @@
   import SaveAsFilePopover from '@/components/business/ms-add-attachment/saveAsFilePopover.vue';
   import LinkFileDrawer from '@/components/business/ms-link-file/associatedFileDrawer.vue';
   import AddStep from '../addStep.vue';
+  import StepDescription from '@/views/case-management/caseManagementFeature/components/tabContent/stepDescription.vue';
 
   import {
     checkFileIsUpdateRequest,

frontend/src/views/setting/organization/template/components/caseTemplateLeftContent.vue

@@ -24,41 +24,21 @@
         :editable="!props.isDisabled"
       />
     </a-form-item>
-    <a-form-item
+    <StepDescription v-model:caseEditType="form.caseEditType" />
-      field="step"
-      :label="
-        form.caseEditType === 'STEP' ? t('system.orgTemplate.stepDescription') : t('system.orgTemplate.textDescription')
-      "
-      class="relative"
-    >
-      <div class="absolute left-16 top-0">
-        <a-divider direction="vertical" />
-        <a-dropdown :popup-max-height="false" @select="handleSelectType">
-          <span class="changeType">{{ t('system.orgTemplate.changeType') }} <icon-down /></span>
-          <template #content>
-            <a-doption value="STEP" :class="getSelectTypeClass('STEP')">
-              {{ t('system.orgTemplate.stepDescription') }}</a-doption
-            >
-            <a-doption value="TEXT" :class="getSelectTypeClass('TEXT')">{{
-              t('system.orgTemplate.textDescription')
-            }}</a-doption>
-          </template>
-        </a-dropdown>
-      </div>
     <!-- 步骤描述 -->
-      <div v-if="form.caseEditType === 'STEP'" class="w-full">
+    <div v-if="form.caseEditType === 'STEP'" class="mb-[20px] w-full">
       <AddStep v-model:step-list="stepData" :is-disabled="props.isDisabled" />
     </div>
     <!-- 文本描述 -->
+    <div v-else class="pb-[20px]">
       <MsRichText
-        v-else
         v-model:raw="form.textDescription"
         v-model:filed-ids="textDescriptionFileIds"
         :upload-image="handleUploadImage"
         :preview-url="previewEditorImageUrl"
         :editable="!props.isDisabled"
       />
-    </a-form-item>
+    </div>
     <a-form-item
       v-if="form.caseEditType === 'TEXT'"
       field="remark"
@@ -94,6 +74,7 @@
   import MsRichText from '@/components/pure/ms-rich-text/MsRichText.vue';
   import AddAttachment from '@/components/business/ms-add-attachment/index.vue';
   import AddStep from '@/views/case-management/caseManagementFeature/components/addStep.vue';
+  import StepDescription from '@/views/case-management/caseManagementFeature/components/tabContent/stepDescription.vue';
 
   import { editorUploadFile } from '@/api/modules/setting/template';
   import { previewOrgImageUrl, previewProImageUrl } from '@/api/requrls/setting/template';