From fb81ab845ae3eda595f0e15249a8021f5b6b603d Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Thu, 10 Aug 2023 17:06:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4&=E9=A1=B5=E9=9D=A2=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/requrls/setting/config.ts    |  8 ++---
 frontend/src/assets/style/arco-reset.less     | 15 ++++++--
 .../src/components/pure/ms-card/index.vue     |  2 +-
 .../components/pure/ms-table/base-table.vue   |  3 +-
 frontend/src/layout/default-layout.vue        |  2 +-
 frontend/src/locale/en-US/index.ts            |  1 +
 frontend/src/locale/zh-CN/index.ts            |  1 +
 frontend/src/main.ts                          |  1 -
 frontend/src/utils/index.ts                   | 13 +++++++
 .../src/views/login/components/login-form.vue |  2 +-
 .../setting/organization/member/index.vue     | 13 ++-----
 .../system/config/components/authConfig.vue   | 17 +++------
 .../system/config/components/pageConfig.vue   | 14 +++++---
 .../pluginManager/components/pluginTable.vue  |  5 +--
 .../setting/system/resourcePool/index.vue     | 15 ++------
 .../src/views/setting/system/user/index.vue   | 36 +++++++++----------
 .../system/usergroup/components/index.vue     |  3 +-
 17 files changed, 78 insertions(+), 73 deletions(-)

diff --git a/frontend/src/api/requrls/setting/config.ts b/frontend/src/api/requrls/setting/config.ts
index 3c954e1682..1c6dfa8e03 100644
--- a/frontend/src/api/requrls/setting/config.ts
+++ b/frontend/src/api/requrls/setting/config.ts
@@ -25,10 +25,10 @@ export const GetAuthDetailUrl = '/system/authsource/get';
 // 删除认证源
 export const DeleteAuthUrl = '/system/authsource/delete';
 // 获取系统主页左上角图片
-export const GetTitleImgUrl = `${import.meta.env.VITE_API_BASE_URL}/display/get/title`;
+export const GetTitleImgUrl = `${import.meta.env.VITE_API_BASE_URL}/base-display/get/logo-platform`;
 // 获取登录 logo
-export const GetLoginLogoUrl = `${import.meta.env.VITE_API_BASE_URL}/display/get/loginLogo`;
+export const GetLoginLogoUrl = `${import.meta.env.VITE_API_BASE_URL}/base-display/get/login-logo`;
 // 获取登录大图
-export const GetLoginImageUrl = `${import.meta.env.VITE_API_BASE_URL}/display/get/loginImage`;
+export const GetLoginImageUrl = `${import.meta.env.VITE_API_BASE_URL}/base-display/get/login-image`;
 // 获取平台标签图标
-export const GetPlatformIconUrl = `${import.meta.env.VITE_API_BASE_URL}/display/get/icon`;
+export const GetPlatformIconUrl = `${import.meta.env.VITE_API_BASE_URL}/base-display/get/icon`;
diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
index 6ae06ec160..d3f6a7e713 100644
--- a/frontend/src/assets/style/arco-reset.less
+++ b/frontend/src/assets/style/arco-reset.less
@@ -41,20 +41,26 @@
 
   padding: 24px;
   .arco-modal-header {
-    @apply h-auto border-b-0 p-0;
+    @apply h-auto items-baseline border-b-0 p-0;
 
     margin-bottom: 16px;
     .arco-modal-title {
-      @apply flex items-center font-semibold;
+      @apply flex items-baseline font-semibold;
 
+      max-width: calc(100% - 16px);
       font-size: 14px;
       .arco-modal-title-icon {
-        @apply flex items-center;
+        @apply relative;
+
+        top: 3px;
         .arco-icon {
           font-size: 20px;
         }
       }
     }
+    .arco-modal-close-btn {
+      @apply ml-0;
+    }
   }
   .arco-modal-body {
     color: var(--color-text-2);
@@ -176,6 +182,9 @@
 .arco-input-wrapper,
 .arco-textarea-wrapper,
 .arco-input-tag,
+.arco-picker,
+.arco-select-view,
+.arco-select-view-single,
 .arco-select {
   border: 1px solid var(--color-text-input-border);
   background-color: var(--color-text-fff) !important;
diff --git a/frontend/src/components/pure/ms-card/index.vue b/frontend/src/components/pure/ms-card/index.vue
index 6e293bdd1c..535a876067 100644
--- a/frontend/src/components/pure/ms-card/index.vue
+++ b/frontend/src/components/pure/ms-card/index.vue
@@ -19,7 +19,7 @@
           class="pr-[5px]"
           :style="{
             overflow: 'auto',
-            width: `calc(100vw - ${menuWidth}px - 48px)`,
+            width: `calc(100vw - ${menuWidth}px - 58px)`,
             height: props.autoHeight ? 'auto' : `calc(100vh - ${cardOverHeight}px)`,
           }"
         >
diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue
index d5b3fc8d10..c8437d8d47 100644
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@@ -50,7 +50,7 @@
                   {{ t('system.user.tableEnable') }}
                 </div>
                 <div v-else class="flex items-center text-[var(--color-text-4)]">
-                  <icon-stop class="mr-[2px]" />
+                  <MsIcon type="icon-icon_disable" class="mr-[2px]" />
                   {{ t('system.user.tableDisable') }}
                 </div>
               </template>
@@ -118,6 +118,7 @@
   import MsPagination from '@/components/pure/ms-pagination/index';
   import type { TableData } from '@arco-design/web-vue';
   import ColumnSelector from './columnSelector.vue';
+  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
 
   const batchleft = ref('10px');
   const { t } = useI18n();
diff --git a/frontend/src/layout/default-layout.vue b/frontend/src/layout/default-layout.vue
index 94ce5fbda6..263143b8fb 100644
--- a/frontend/src/layout/default-layout.vue
+++ b/frontend/src/layout/default-layout.vue
@@ -97,7 +97,7 @@
   const route = useRoute();
   const permission = usePermission();
 
-  const innerLogo = computed(() => (props.isPreview ? innerProps.value.logo : GetTitleImgUrl));
+  const innerLogo = computed(() => (props.isPreview && innerProps.value.logo ? innerProps.value.logo : GetTitleImgUrl));
   const innerName = computed(() => (props.isPreview ? innerProps.value.name : appStore.pageConfig.platformName));
 
   const navbarHeight = `56px`;
diff --git a/frontend/src/locale/en-US/index.ts b/frontend/src/locale/en-US/index.ts
index 07560eed48..59d035bd8a 100644
--- a/frontend/src/locale/en-US/index.ts
+++ b/frontend/src/locale/en-US/index.ts
@@ -38,6 +38,7 @@ export default {
     'menu.settings.system.resourcePoolDetail': 'Add resource pool',
     'menu.settings.system.resourcePoolEdit': 'Edit resource pool',
     'menu.settings.system.parameter': 'System parameter',
+    'menu.settings.system.log': 'Log',
     'navbar.action.locale': 'Switch to English',
     ...sys,
     ...localeSettings,
diff --git a/frontend/src/locale/zh-CN/index.ts b/frontend/src/locale/zh-CN/index.ts
index cef6899f98..35bfff0f5e 100644
--- a/frontend/src/locale/zh-CN/index.ts
+++ b/frontend/src/locale/zh-CN/index.ts
@@ -38,6 +38,7 @@ export default {
     'menu.settings.system.resourcePoolDetail': '添加资源池',
     'menu.settings.system.resourcePoolEdit': '编辑资源池',
     'menu.settings.system.parameter': '系统参数',
+    'menu.settings.system.log': '日志',
     'navbar.action.locale': '切换为中文',
     ...sys,
     ...localeSettings,
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index e39aad5854..d13c69b804 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -8,7 +8,6 @@ import router from './router';
 import store from './store';
 import { setupI18n } from './locale';
 import directive from './directive';
-import './mock';
 import App from './App.vue';
 // eslint-disable-next-line import/no-unresolved
 import 'virtual:svg-icons-register';
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 11e6925d76..985709ca92 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -133,3 +133,16 @@ export function desensitize(str: string): string {
 
   return str.replace(/./g, '*');
 }
+
+/**
+ * 对话框标题动态内容字符限制
+ * @param str 标题的动态内容
+ * @returns 转化后的字符串
+ */
+export function characterLimit(str?: string): string {
+  if (!str) return '';
+  if (str.length <= 20) {
+    return str;
+  }
+  return `${str.slice(0, 20 - 3)}...`;
+}
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index f6f5299e36..2fdc5594e9 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -77,7 +77,7 @@
   }>();
 
   const innerLogo = computed(() => {
-    return props.isPreview ? props.logo : GetLoginLogoUrl;
+    return props.isPreview && props.logo ? props.logo : GetLoginLogoUrl;
   });
 
   const innerSlogan = computed(() => {
diff --git a/frontend/src/views/setting/organization/member/index.vue b/frontend/src/views/setting/organization/member/index.vue
index 85aea035f2..736feb703a 100644
--- a/frontend/src/views/setting/organization/member/index.vue
+++ b/frontend/src/views/setting/organization/member/index.vue
@@ -89,16 +89,6 @@
           </a-select>
         </a-tooltip>
       </template>
-      <template #enable="{ record }">
-        <div v-if="record.enable" class="flex items-center">
-          <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
-          {{ t('organization.member.tableEnable') }}
-        </div>
-        <div v-else class="flex items-center text-[var(--color-text-4)]">
-          <icon-stop class="mr-[2px]" />
-          {{ t('organization.member.tableDisable') }}
-        </div>
-      </template>
       <template #action="{ record }">
         <MsButton @click="addOrEditMember('edit', record)">{{ t('organization.member.edit') }}</MsButton>
         <MsButton @click="deleteMember(record)">{{ t('organization.member.remove') }}</MsButton>
@@ -155,6 +145,7 @@
     LinkItem,
     BatchAddProjectModel,
   } from '@/models/setting/member';
+  import { characterLimit } from '@/utils';
 
   const tableStore = useTableStore();
   const { t } = useI18n();
@@ -265,7 +256,7 @@
   const deleteMember = (record: MemberItem) => {
     openModal({
       type: 'warning',
-      title: t('organization.member.deleteMemberTip', { name: record.name }),
+      title: t('organization.member.deleteMemberTip', { name: characterLimit(record.name) }),
       content: '',
       okText: t('organization.member.deleteMemberConfirm'),
       cancelText: t('organization.member.deleteMemberCancel'),
diff --git a/frontend/src/views/setting/system/config/components/authConfig.vue b/frontend/src/views/setting/system/config/components/authConfig.vue
index 5293b0eba9..488bdb2750 100644
--- a/frontend/src/views/setting/system/config/components/authConfig.vue
+++ b/frontend/src/views/setting/system/config/components/authConfig.vue
@@ -10,16 +10,6 @@
         <template #name="{ record }">
           <a-button type="text" @click="openAuthDetail(record)">{{ record.name }}</a-button>
         </template>
-        <template #enable="{ record }">
-          <div v-if="record.enable" class="flex items-center">
-            <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
-            {{ t('system.config.auth.enable') }}
-          </div>
-          <div v-else class="flex items-center text-[var(--color-text-4)]">
-            <icon-stop class="mr-[2px]" />
-            {{ t('system.config.auth.disable') }}
-          </div>
-        </template>
         <template #action="{ record }">
           <MsButton @click="editAuth(record)">{{ t('system.config.auth.edit') }}</MsButton>
           <MsButton v-if="record.enable" @click="disabledAuth(record)">
@@ -511,6 +501,7 @@
   } from '@/api/modules/setting/config';
   import MsFormItemSub from '@/components/bussiness/ms-form-item-sub/index.vue';
   import { scrollIntoView } from '@/utils/dom';
+  import { characterLimit } from '@/utils';
 
   import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
   import type { MsTableColumn } from '@/components/pure/ms-table/type';
@@ -587,7 +578,7 @@
   async function enableAuth(record: any) {
     openModal({
       type: 'info',
-      title: t('system.config.auth.enableTipTitle', { name: record.name }),
+      title: t('system.config.auth.enableTipTitle', { name: characterLimit(record.name) }),
       content: t('system.config.auth.enableTipContent'),
       okText: t('system.config.auth.enableConfirm'),
       cancelText: t('system.config.auth.cancel'),
@@ -624,7 +615,7 @@
   function disabledAuth(record: any) {
     openModal({
       type: 'info',
-      title: t('system.config.auth.disableTipTitle', { name: record.name }),
+      title: t('system.config.auth.disableTipTitle', { name: characterLimit(record.name) }),
       content: t('system.config.auth.disableTipContent'),
       okText: t('system.config.auth.disableConfirm'),
       cancelText: t('system.config.auth.cancel'),
@@ -661,7 +652,7 @@
   function delAuth(record: any) {
     openModal({
       type: 'warning',
-      title: t('system.config.auth.deleteTipTitle', { name: record.name }),
+      title: t('system.config.auth.deleteTipTitle', { name: characterLimit(record.name) }),
       content: t('system.config.auth.deleteTipContent'),
       okText: t('system.config.auth.deleteConfirm'),
       cancelText: t('system.config.auth.cancel'),
diff --git a/frontend/src/views/setting/system/config/components/pageConfig.vue b/frontend/src/views/setting/system/config/components/pageConfig.vue
index a368d0ab87..5f4ebb803b 100644
--- a/frontend/src/views/setting/system/config/components/pageConfig.vue
+++ b/frontend/src/views/setting/system/config/components/pageConfig.vue
@@ -60,8 +60,12 @@
             </div>
             <!-- 登录页预览实际渲染 DOM，按三种屏幕尺寸缩放 -->
             <div :class="['page-preview', isLoginPageFullscreen ? 'full-preview' : 'normal-preview']">
-              <banner :banner="pageConfig.loginImage[0]?.url || defaultBanner" is-preview />
-              <loginForm :slogan="pageConfig.slogan" :logo="pageConfig.loginLogo[0]?.url" is-preview />
+              <banner :banner="pageConfig.loginImage[0]?.url || defaultLoginImage" is-preview />
+              <loginForm
+                :slogan="pageConfig.slogan"
+                :logo="pageConfig.loginLogo[0]?.url || defaultLoginLogo"
+                is-preview
+              />
             </div>
           </div>
           <div class="config-form">
@@ -213,7 +217,7 @@
               ]"
             >
               <defaultLayout
-                :logo="pageConfig.logoPlatform[0]?.url"
+                :logo="pageConfig.logoPlatform[0]?.url || defaultPlatformLogo"
                 :name="pageConfig.platformName"
                 class="overflow-hidden"
                 is-preview
@@ -319,7 +323,9 @@
 
   import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
 
-  const defaultBanner = `${import.meta.env.BASE_URL}images/login-banner.jpg`;
+  const defaultLoginImage = `${import.meta.env.BASE_URL}images/login-banner.jpg`;
+  const defaultLoginLogo = `${import.meta.env.BASE_URL}images/login-logo.svg`;
+  const defaultPlatformLogo = `${import.meta.env.BASE_URL}images/MS-full-logo.svg`;
   const { t } = useI18n();
   const { currentLocale } = useLocale();
   const appStore = useAppStore();
diff --git a/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue b/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
index 2d47cafa88..55151e8a25 100644
--- a/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
+++ b/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
@@ -165,6 +165,7 @@
   } from '@/models/setting/plugin';
   import dayjs from 'dayjs';
   import TableExpand from './tableExpand.vue';
+  import { characterLimit } from '@/utils';
 
   const { t } = useI18n();
   const visitedKey = 'doNotShowAgain';
@@ -236,7 +237,7 @@
   function deletePlugin(record: any) {
     openModal({
       type: 'warning',
-      title: t('system.plugin.deletePluginTip', { name: record.name }),
+      title: t('system.plugin.deletePluginTip', { name: characterLimit(record.name) }),
       content: '',
       okText: t('system.plugin.deletePluginConfirm'),
       cancelText: t('system.plugin.pluginCancel'),
@@ -293,7 +294,7 @@
   const disableHandler = (record: PluginItem) => {
     openModal({
       type: 'info',
-      title: t('system.plugin.disablePluginTip', { name: record.name }),
+      title: t('system.plugin.disablePluginTip', { name: characterLimit(record.name) }),
       content: t('system.plugin.disablePluginContent'),
       okText: t('system.plugin.disablePluginConfirm'),
       cancelText: t('system.plugin.pluginCancel'),
diff --git a/frontend/src/views/setting/system/resourcePool/index.vue b/frontend/src/views/setting/system/resourcePool/index.vue
index 3988bfc6b4..6db6faddf1 100644
--- a/frontend/src/views/setting/system/resourcePool/index.vue
+++ b/frontend/src/views/setting/system/resourcePool/index.vue
@@ -17,16 +17,6 @@
       <template #name="{ record }">
         <a-button type="text" @click="showPoolDetail(record)">{{ record.name }}</a-button>
       </template>
-      <template #enable="{ record }">
-        <div v-if="record.enable" class="flex items-center">
-          <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
-          {{ t('system.resourcePool.tableEnable') }}
-        </div>
-        <div v-else class="flex items-center text-[var(--color-text-4)]">
-          <icon-stop class="mr-[2px]" />
-          {{ t('system.resourcePool.tableDisable') }}
-        </div>
-      </template>
       <template #action="{ record }">
         <MsButton @click="editPool(record)">{{ t('system.resourcePool.editPool') }}</MsButton>
         <MsButton v-if="record.enable" @click="disabledPool(record)">{{
@@ -78,6 +68,7 @@
   import JobTemplateDrawer from './components/jobTemplateDrawer.vue';
   import { TableKeyEnum } from '@/enums/tableEnum';
   import { useTableStore } from '@/store';
+  import { characterLimit } from '@/utils';
 
   import type { Description } from '@/components/pure/ms-description/index.vue';
   import type { MsTableColumn } from '@/components/pure/ms-table/type';
@@ -186,7 +177,7 @@
   function disabledPool(record: any) {
     openModal({
       type: 'warning',
-      title: t('system.resourcePool.disablePoolTip', { name: record.name }),
+      title: t('system.resourcePool.disablePoolTip', { name: characterLimit(record.name) }),
       content: t('system.resourcePool.disablePoolContent'),
       okText: t('system.resourcePool.disablePoolConfirm'),
       cancelText: t('system.resourcePool.disablePoolCancel'),
@@ -223,7 +214,7 @@
   function deletePool(record: any) {
     openModal({
       type: 'warning',
-      title: t('system.resourcePool.deletePoolTip', { name: record.name }),
+      title: t('system.resourcePool.deletePoolTip', { name: characterLimit(record.name) }),
       content: t('system.resourcePool.deletePoolContentUsed'),
       okText: t('system.resourcePool.deletePoolConfirm'),
       cancelText: t('system.resourcePool.deletePoolCancel'),
diff --git a/frontend/src/views/setting/system/user/index.vue b/frontend/src/views/setting/system/user/index.vue
index 23bdba7523..bc1097b1f3 100644
--- a/frontend/src/views/setting/system/user/index.vue
+++ b/frontend/src/views/setting/system/user/index.vue
@@ -48,14 +48,14 @@
             <a-tag
               v-for="org of record.userRoleList.slice(0, 2)"
               :key="org.id"
-              class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
+              :class="['mr-[4px]', 'bg-transparent', record.enable ? 'enableTag' : 'disableTag']"
               bordered
             >
               {{ org.name }}
             </a-tag>
             <a-tag
               v-show="record.organizationList.length > 2"
-              class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
+              :class="['mr-[4px]', 'bg-transparent', record.enable ? 'enableTag' : 'disableTag']"
               bordered
             >
               +{{ record.organizationList.length - 2 }}
@@ -63,16 +63,6 @@
           </div>
         </a-tooltip>
       </template>
-      <template #enable="{ record }">
-        <div v-if="record.enable" class="flex items-center">
-          <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
-          {{ t('system.user.tableEnable') }}
-        </div>
-        <div v-else class="flex items-center text-[var(--color-text-4)]">
-          <icon-stop class="mr-[2px]" />
-          {{ t('system.user.tableDisable') }}
-        </div>
-      </template>
       <template #action="{ record }">
         <template v-if="!record.enable">
           <MsButton @click="enableUser(record)">{{ t('system.user.enable') }}</MsButton>
@@ -243,13 +233,14 @@
   import MsUpload from '@/components/pure/ms-upload/index.vue';
   import { TableKeyEnum } from '@/enums/tableEnum';
   import { useTableStore } from '@/store';
+  import MsCard from '@/components/pure/ms-card/index.vue';
+  import { characterLimit } from '@/utils';
 
   import type { FormInstance, ValidatedError, FileItem } from '@arco-design/web-vue';
   import type { MsTableColumn, BatchActionParams } from '@/components/pure/ms-table/type';
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
   import type { SimpleUserInfo, SystemRole, UserListItem } from '@/models/setting/user';
   import type { FormItemModel, MsBatchFormInstance } from '@/components/bussiness/ms-batch-form/types';
-  import MsCard from '@/components/pure/ms-card/index.vue';
 
   const { t } = useI18n();
 
@@ -326,7 +317,7 @@
    * 重置密码
    */
   function resetPassword(record: any, isbatch?: boolean) {
-    let title = t('system.user.resetPswTip', { name: record?.name });
+    let title = t('system.user.resetPswTip', { name: characterLimit(record?.name) });
     let userIdList = [record?.id];
     if (isbatch) {
       title = t('system.user.batchResetPswTip', { count: tableSelected.value.length });
@@ -357,7 +348,7 @@
    * 禁用用户
    */
   function disabledUser(record: any, isbatch?: boolean) {
-    let title = t('system.user.disableUserTip', { name: record?.name });
+    let title = t('system.user.disableUserTip', { name: characterLimit(record?.name) });
     let userIdList = [record?.id];
     if (isbatch) {
       title = t('system.user.batchDisableUserTip', { count: tableSelected.value.length });
@@ -402,7 +393,7 @@
    * 启用用户
    */
   function enableUser(record: any, isbatch?: boolean) {
-    let title = t('system.user.enableUserTip', { name: record?.name });
+    let title = t('system.user.enableUserTip', { name: characterLimit(record?.name) });
     let userIdList = [record?.id];
     if (isbatch) {
       title = t('system.user.batchEnableUserTip', { count: tableSelected.value.length });
@@ -444,7 +435,7 @@
    * 删除用户
    */
   function deleteUser(record: any, isbatch?: boolean) {
-    let title = t('system.user.deleteUserTip', { name: record?.name });
+    let title = t('system.user.deleteUserTip', { name: characterLimit(record?.name) });
     let userIdList = [record?.id];
     if (isbatch) {
       title = t('system.user.batchDeleteUserTip', { count: tableSelected.value.length });
@@ -936,4 +927,13 @@
   }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .disableTag {
+    border-color: rgb(var(--primary-3));
+    color: rgb(var(--primary-3));
+  }
+  .enableTag {
+    border-color: rgb(var(--primary-5));
+    color: rgb(var(--primary-5));
+  }
+</style>
diff --git a/frontend/src/views/setting/system/usergroup/components/index.vue b/frontend/src/views/setting/system/usergroup/components/index.vue
index 84dff1e296..fc81dd23da 100644
--- a/frontend/src/views/setting/system/usergroup/components/index.vue
+++ b/frontend/src/views/setting/system/usergroup/components/index.vue
@@ -71,6 +71,7 @@
   import popconfirm from './popconfirm.vue';
   import useUserGroupStore from '@/store/modules/setting/usergroup';
   import { getUserGroupList, updateOrAddUserGroup, deleteUserGroup } from '@/api/modules/setting/usergroup';
+  import { characterLimit } from '@/utils';
 
   const { t } = useI18n();
 
@@ -156,7 +157,7 @@
     } else {
       openModal({
         type: 'warning',
-        title: t('system.userGroup.isDeleteUserGroup', { name: store.currentName }),
+        title: t('system.userGroup.isDeleteUserGroup', { name: characterLimit(store.currentName) }),
         content: t('system.userGroup.beforeDeleteUserGroup'),
         okText: t('system.userGroup.confirmDelete'),
         cancelText: t('system.userGroup.cancel'),