style(测试用例): 用例详情-用例标题名称自适应展示

--story=1017246 --user=吕梦园
https://www.tapd.cn/55049933/prong/stories/view/1155049933001017246

frontend/src/components/business/ms-detail-drawer/index.vue

@@ -9,33 +9,35 @@
     unmount-on-close
   >
     <template #title>
-      <div class="flex flex-1 items-center">
+      <div class="flex flex-1 items-center overflow-hidden">
         <!-- 如果设置了tooltipText，则优先展示-->
-        <a-tooltip :content="props.tooltipText ? props.tooltipText : props.title" position="bottom">
+        <div class="flex flex-1 items-center overflow-hidden">
-          <slot name="titleName">
+          <a-tooltip :content="props.tooltipText ? props.tooltipText : props.title" position="bottom">
-            <div class="one-line-text max-w-[300px]">
+            <slot name="titleName">
-              {{ props.title }}
+              <div class="one-line-text">
-            </div>
+                {{ props.title }}
-          </slot>
+              </div>
-        </a-tooltip>
+            </slot>
-        <div class="ml-4 flex items-center">
+          </a-tooltip>
-          <slot name="titleLeft" :loading="loading" :detail="detail"></slot>
+          <div class="mx-4 flex items-center">
+            <slot name="titleLeft" :loading="loading" :detail="detail"></slot>
+          </div>
         </div>
-        <MsPrevNextButton
-          v-if="props.tableData && props.pagination && props.pageChange"
-          ref="prevNextButtonRef"
-          v-model:loading="loading"
-          class="ml-[16px]"
-          :page-change="props.pageChange"
-          :pagination="props.pagination"
-          :get-detail-func="props.getDetailFunc"
-          :detail-id="props.detailId"
-          :detail-index="props.detailIndex"
-          :table-data="props.tableData"
-          @loading-detail="setDetailLoading"
-          @loaded="handleDetailLoaded"
-        />
         <div class="ml-auto flex items-center">
+          <MsPrevNextButton
+            v-if="props.tableData && props.pagination && props.pageChange"
+            ref="prevNextButtonRef"
+            v-model:loading="loading"
+            class="mr-[16px]"
+            :page-change="props.pageChange"
+            :pagination="props.pagination"
+            :get-detail-func="props.getDetailFunc"
+            :detail-id="props.detailId"
+            :detail-index="props.detailIndex"
+            :table-data="props.tableData"
+            @loading-detail="setDetailLoading"
+            @loaded="handleDetailLoaded"
+          />
           <slot name="titleRight" :loading="loading" :detail="detail"></slot>
         </div>
       </div>

frontend/src/components/business/ms-prev-next-button/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="props.pagination?.total > 1">
+  <div v-if="props.pagination?.total > 1" class="flex items-center">
     <a-tooltip
       :content="activeDetailIsFirst ? t('ms.prevNextButton.noPrev') : t('ms.prevNextButton.prev')"
       :mouse-enter-delay="300"

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

@@ -18,7 +18,7 @@
     @loaded="loadedCase"
   >
     <template #titleName>
-      <div :class="`case-title flex items-center gap-[8px] ${isEditTitle ? 'w-full' : ''}`">
+      <div :class="`case-title flex flex-1 items-center gap-[8px] overflow-hidden ${isEditTitle ? 'w-full' : ''}`">
         <a-select
           v-if="!isEditTitle"
           v-model:model-value="caseLevels"
@@ -48,12 +48,12 @@
           @blur="handleEditName"
           @keydown.enter="handleEditName"
         />
-        <div v-else class="flex items-center">
+        <div v-else class="flex items-center overflow-hidden">
           <div> [ {{ detailInfo?.num }} ] </div>
           <div
             :class="`${
               hasAnyPermission(['FUNCTIONAL_CASE:READ+UPDATE']) ? 'hover-title-name' : ''
-            } one-line-text max-w-[200px] cursor-pointer`"
+            } one-line-text flex-1 cursor-pointer`"
             @click="clickTitleHandler"
             >{{ detailInfo.name }}
           </div>