style(1.4.0-beta1): 优化溢出文本样式

This commit is contained in:
xlsea 2025-02-25 18:01:36 +08:00
parent d31dd100d6
commit d8cdd22294
3 changed files with 28 additions and 6 deletions

View File

@ -1,5 +1,7 @@
<script setup lang="ts">
<script setup lang="tsx">
import { ref } from 'vue';
import type { SelectOption } from 'naive-ui';
import { NEllipsis } from 'naive-ui';
import { $t } from '@/locales';
import { translateOptions2 } from '@/utils/common';
import { fetchGetAllGroupNameList } from '@/service/api';
@ -39,6 +41,8 @@ const handleUpdate = (value: string) => {
};
getGroupNameList();
const renderLabel = (option: SelectOption) => <NEllipsis>{option.label}</NEllipsis>;
</script>
<template>
@ -49,6 +53,7 @@ getGroupNameList();
:disabled="props.disabled"
:clearable="props.clearable"
filterable
:render-label="renderLabel"
@update:value="handleUpdate"
/>
</template>

View File

@ -1,5 +1,7 @@
<script setup lang="ts">
<script setup lang="tsx">
import { ref, watch } from 'vue';
import type { SelectOption } from 'naive-ui';
import { NEllipsis } from 'naive-ui';
import { $t } from '@/locales';
import { translateOptions2 } from '@/utils/common';
import { fetchGetRetrySceneList } from '@/service/api';
@ -64,6 +66,8 @@ watch(
emit('update:value', sceneNameRef.value);
}
);
const renderLabel = (option: SelectOption) => <NEllipsis>{option.label}</NEllipsis>;
</script>
<template>
@ -72,6 +76,7 @@ watch(
:placeholder="$t('page.retryTask.form.sceneName')"
:options="translateOptions2(sceneNameList)"
:clearable="props.clearable"
:render-label="renderLabel"
/>
</template>

View File

@ -1,5 +1,5 @@
<script setup lang="tsx">
import { NButton, NPopconfirm, NTag } from 'naive-ui';
import { NButton, NEllipsis, NPopconfirm, NTag } from 'naive-ui';
import { ref } from 'vue';
import { useBoolean } from '@sa/hooks';
import { fetchBatchDeleteNotify, fetchGetNotifyConfigList, fetchUpdateNotifyStatus } from '@/service/api';
@ -122,17 +122,29 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
if (row.systemTaskType === 1) {
const label = $t(retryNotifyScene[row.notifyScene! as Api.NotifyConfig.RetryNotifyScene]);
return <NTag type={tagColor(row.notifyScene)}>{label}</NTag>;
return (
<NTag type={tagColor(row.notifyScene)}>
<NEllipsis class="w-136px">{label}</NEllipsis>
</NTag>
);
}
if (row.systemTaskType === 3) {
const label = $t(jobNotifyScene[row.notifyScene! as Api.NotifyConfig.JobNotifyScene]);
return <NTag type={tagColor(row.notifyScene)}>{label}</NTag>;
return (
<NTag type={tagColor(row.notifyScene)}>
<NEllipsis class="w-136px">{label}</NEllipsis>
</NTag>
);
}
if (row.systemTaskType === 4) {
const label = $t(workflowNotifyScene[row.notifyScene! as Api.NotifyConfig.WorkflowNotifyScene]);
return <NTag type={tagColor(row.notifyScene)}>{label}</NTag>;
return (
<NTag type={tagColor(row.notifyScene)}>
<NEllipsis class="w-136px">{label}</NEllipsis>
</NTag>
);
}
return null;