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

--story=1017246 --user=吕梦园
https://www.tapd.cn/55049933/prong/stories/view/1155049933001017246
This commit is contained in:
teukkk 2024-11-29 17:14:43 +08:00 committed by Craftsman
parent 5c204dcda1
commit 8bde662985
3 changed files with 30 additions and 28 deletions

View File

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

View File

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

View File

@ -18,7 +18,7 @@
@loaded="loadedCase" @loaded="loadedCase"
> >
<template #titleName> <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 <a-select
v-if="!isEditTitle" v-if="!isEditTitle"
v-model:model-value="caseLevels" v-model:model-value="caseLevels"
@ -48,12 +48,12 @@
@blur="handleEditName" @blur="handleEditName"
@keydown.enter="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> [ {{ detailInfo?.num }} ] </div>
<div <div
:class="`${ :class="`${
hasAnyPermission(['FUNCTIONAL_CASE:READ+UPDATE']) ? 'hover-title-name' : '' 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" @click="clickTitleHandler"
>{{ detailInfo.name }} >{{ detailInfo.name }}
</div> </div>