From d8cdd2229491f1fca0a4f80ef4c9375fa07e59bb Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Tue, 25 Feb 2025 18:01:36 +0800
Subject: [PATCH] =?UTF-8?q?style(1.4.0-beta1):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=BA=A2=E5=87=BA=E6=96=87=E6=9C=AC=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/select-group.vue |  7 ++++++-
 src/components/common/select-scene.vue |  7 ++++++-
 src/views/notify/config/index.vue      | 20 ++++++++++++++++----
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/common/select-group.vue b/src/components/common/select-group.vue
index a6e2e30..da5bbb1 100644
--- a/src/components/common/select-group.vue
+++ b/src/components/common/select-group.vue
@@ -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>
diff --git a/src/components/common/select-scene.vue b/src/components/common/select-scene.vue
index 1184bb0..dec1e97 100644
--- a/src/components/common/select-scene.vue
+++ b/src/components/common/select-scene.vue
@@ -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>
 
diff --git a/src/views/notify/config/index.vue b/src/views/notify/config/index.vue
index 1b33107..fca1315 100644
--- a/src/views/notify/config/index.vue
+++ b/src/views/notify/config/index.vue
@@ -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;