gtsoft/gtsoft-snail-job-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/common/select-group.vue
View File

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

7
src/components/common/select-scene.vue
View File

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

20
src/views/notify/config/index.vue
View File

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