From 05115b43accb414c8622fce6deab8feedea468a5 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Wed, 3 Apr 2024 13:02:16 +0800
Subject: [PATCH] =?UTF-8?q?style(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4UI=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1035327 --user=吕梦园
--bug=1035260 --user=吕梦园
--bug=1035252 --user=吕梦园
--bug=1035619 --user=吕梦园
--bug=1035633 --user=吕梦园
--bug=1035641 --user=吕梦园
---
 frontend/src/assets/style/arco-reset.less     |   1 +
 .../ms-user-group-comp/msUserGroupLeft.vue    | 111 ++++++++++--------
 .../project/components/addProjectModal.vue    |  10 +-
 .../template/components/templateItem.vue      |   5 +-
 .../organization/template/locale/en-US.ts     |   2 +-
 .../organization/template/locale/zh-CN.ts     |   2 +-
 .../organization/usergroup/orgUserGroup.vue   |   2 +-
 .../setting/system/resourcePool/detail.vue    |   2 +-
 .../system/usergroup/systemUserGroup.vue      |   2 +-
 9 files changed, 78 insertions(+), 59 deletions(-)

diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
index 5ba8328d94..d66ff8612e 100644
--- a/frontend/src/assets/style/arco-reset.less
+++ b/frontend/src/assets/style/arco-reset.less
@@ -292,6 +292,7 @@
 .arco-select-view-inner,
 .arco-input-tag-inner {
   .arco-tag {
+    font-weight: 400;
     background-color: var(--color-text-n8) !important;
   }
 }
diff --git a/frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue b/frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue
index 47c7e7020a..020c34c691 100644
--- a/frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue
+++ b/frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col px-[24px] pb-[24px]">
-    <div class="sticky top-0 z-[999] bg-white pt-[24px]">
+    <div class="sticky top-0 z-[999] bg-white pb-[8px] pt-[24px]">
       <a-input-search
         :placeholder="t('system.userGroup.searchHolder')"
         allow-clear
@@ -51,8 +51,8 @@
           <div
             v-for="element in systemUserGroupList"
             :key="element.id"
-            class="flex h-[38px] cursor-pointer items-center py-[7px] pl-[20px] pr-[4px]"
-            :class="{ 'bg-[rgb(var(--primary-1))]': element.id === currentId }"
+            class="list-item"
+            :class="{ '!bg-[rgb(var(--primary-1))]': element.id === currentId }"
             @click="handleListItemClick(element)"
           >
             <CreateUserGroupPopup
@@ -64,22 +64,24 @@
               <div class="flex max-w-[100%] grow flex-row items-center justify-between">
                 <a-tooltip :content="element.name">
                   <div
-                    class="one-line-text text-[var(--color-text-1)]"
-                    :class="{ 'text-[rgb(var(--primary-7))]': element.id === currentId }"
+                    class="list-item-name one-line-text text-[var(--color-text-1)]"
+                    :class="{ '!text-[rgb(var(--primary-5))]': element.id === currentId }"
                     >{{ element.name }}</div
                   >
                 </a-tooltip>
-                <div v-if="element.id === currentId" class="flex flex-row items-center gap-[8px]">
-                  <MsMoreAction
-                    v-if="element.type === systemType"
-                    v-permission="props.updatePermission"
-                    :list="addMemberActionItem"
-                    @select="handleAddMember"
-                  >
-                    <div class="icon-button">
-                      <MsIcon type="icon-icon_add_outlined" size="16" />
-                    </div>
-                  </MsMoreAction>
+                <div
+                  class="list-item-action flex flex-row items-center gap-[8px] opacity-0"
+                  :class="{ '!opacity-100': element.id === currentId }"
+                >
+                  <div class="icon-button">
+                    <MsIcon
+                      v-if="element.type === systemType"
+                      v-permission="props.updatePermission"
+                      type="icon-icon_add_outlined"
+                      size="16"
+                      @click="handleAddMember"
+                    />
+                  </div>
                   <MsMoreAction
                     v-if="isSystemShowAll && !element.internal && (element.scopeId !== 'global' || !isGlobalDisable)"
                     :list="systemMoreAction"
@@ -139,8 +141,8 @@
           <div
             v-for="element in orgUserGroupList"
             :key="element.id"
-            class="flex h-[38px] cursor-pointer items-center py-[7px] pl-[20px] pr-[4px]"
-            :class="{ 'bg-[rgb(var(--primary-1))]': element.id === currentId }"
+            class="list-item"
+            :class="{ '!bg-[rgb(var(--primary-1))]': element.id === currentId }"
             @click="handleListItemClick(element)"
           >
             <CreateUserGroupPopup
@@ -152,22 +154,24 @@
               <div class="flex max-w-[100%] grow flex-row items-center justify-between">
                 <a-tooltip :content="element.name">
                   <div
-                    class="one-line-text text-[var(--color-text-1)]"
-                    :class="{ 'text-[rgb(var(--primary-7))]': element.id === currentId }"
+                    class="list-item-name one-line-text text-[var(--color-text-1)]"
+                    :class="{ '!text-[rgb(var(--primary-5))]': element.id === currentId }"
                     >{{ element.name }}</div
                   >
                 </a-tooltip>
-                <div v-if="element.id === currentId" class="flex flex-row items-center gap-[8px]">
-                  <MsMoreAction
-                    v-if="element.type === systemType"
-                    v-permission="props.updatePermission"
-                    :list="addMemberActionItem"
-                    @select="handleAddMember"
-                  >
-                    <div class="icon-button">
-                      <MsIcon type="icon-icon_add_outlined" size="16" />
-                    </div>
-                  </MsMoreAction>
+                <div
+                  class="list-item-action flex flex-row items-center gap-[8px] opacity-0"
+                  :class="{ '!opacity-100': element.id === currentId }"
+                >
+                  <div class="icon-button">
+                    <MsIcon
+                      v-if="element.type === systemType"
+                      v-permission="props.updatePermission"
+                      type="icon-icon_add_outlined"
+                      size="16"
+                      @click="handleAddMember"
+                    />
+                  </div>
                   <MsMoreAction
                     v-if="isOrdShowAll && !element.internal && (element.scopeId !== 'global' || !isGlobalDisable)"
                     :list="orgMoreAction"
@@ -227,8 +231,8 @@
           <div
             v-for="element in projectUserGroupList"
             :key="element.id"
-            class="flex h-[38px] cursor-pointer items-center py-[7px] pl-[20px] pr-[4px]"
-            :class="{ 'bg-[rgb(var(--primary-1))]': element.id === currentId }"
+            class="list-item"
+            :class="{ '!bg-[rgb(var(--primary-1))]': element.id === currentId }"
             @click="handleListItemClick(element)"
           >
             <CreateUserGroupPopup
@@ -240,22 +244,24 @@
               <div class="flex max-w-[100%] grow flex-row items-center justify-between">
                 <a-tooltip :content="element.name">
                   <div
-                    class="one-line-text text-[var(--color-text-1)]"
-                    :class="{ 'text-[rgb(var(--primary-7))]': element.id === currentId }"
+                    class="list-item-name one-line-text text-[var(--color-text-1)]"
+                    :class="{ '!text-[rgb(var(--primary-5))]': element.id === currentId }"
                     >{{ element.name }}</div
                   >
                 </a-tooltip>
-                <div v-if="element.id === currentId" class="flex flex-row items-center gap-[8px]">
-                  <MsMoreAction
-                    v-if="element.type === systemType"
-                    v-permission="props.updatePermission"
-                    :list="addMemberActionItem"
-                    @select="handleAddMember"
-                  >
-                    <div v-permission="props.updatePermission" class="icon-button">
-                      <MsIcon type="icon-icon_add_outlined" size="16" />
-                    </div>
-                  </MsMoreAction>
+                <div
+                  class="list-item-action flex flex-row items-center gap-[8px] opacity-0"
+                  :class="{ '!opacity-100': element.id === currentId }"
+                >
+                  <div class="icon-button">
+                    <MsIcon
+                      v-if="element.type === systemType"
+                      v-permission="props.updatePermission"
+                      type="icon-icon_add_outlined"
+                      size="16"
+                      @click="handleAddMember"
+                    />
+                  </div>
                   <MsMoreAction
                     v-if="isProjectShowAll && !element.internal && (element.scopeId !== 'global' || !isGlobalDisable)"
                     :list="projectMoreAction"
@@ -363,10 +369,6 @@
     return userGroupList.value.filter((ele) => ele.type === AuthScopeEnum.PROJECT);
   });
 
-  const addMemberActionItem: ActionsItem[] = [
-    { label: 'system.userGroup.addMember', eventTag: 'addMember', permission: props.updatePermission },
-  ];
-
   const systemMoreAction: ActionsItem[] = [
     {
       label: 'system.userGroup.rename',
@@ -594,4 +596,13 @@
   .v-leave-to {
     opacity: 0;
   }
+  .list-item {
+    padding: 7px 4px 7px 20px;
+    height: 38px;
+    border-radius: var(--border-radius-small);
+    @apply flex cursor-pointer items-center hover:bg-[rgb(var(--primary-9))];
+    &:hover .list-item-action {
+      opacity: 1;
+    }
+  }
 </style>
diff --git a/frontend/src/views/setting/organization/project/components/addProjectModal.vue b/frontend/src/views/setting/organization/project/components/addProjectModal.vue
index 2f9d0e38e1..dfadda2460 100644
--- a/frontend/src/views/setting/organization/project/components/addProjectModal.vue
+++ b/frontend/src/views/setting/organization/project/components/addProjectModal.vue
@@ -8,9 +8,15 @@
     @cancel="handleCancel(false)"
   >
     <template #title>
-      <span v-if="isEdit">
+      <span v-if="isEdit" class="flex">
         {{ t('system.project.updateProject') }}
-        <span class="text-[var(--color-text-4)]">({{ props.currentProject?.name }})</span>
+        <div class="ml-[4px] flex text-[var(--color-text-4)]">
+          (
+          <a-tooltip :content="props.currentProject?.name">
+            <div class="one-line-text max-w-[300px]">{{ props.currentProject?.name }}</div>
+          </a-tooltip>
+          )
+        </div>
       </span>
       <span v-else>
         {{ t('system.project.createProject') }}
diff --git a/frontend/src/views/setting/organization/template/components/templateItem.vue b/frontend/src/views/setting/organization/template/components/templateItem.vue
index 53a5eb4f67..83c84b42d5 100644
--- a/frontend/src/views/setting/organization/template/components/templateItem.vue
+++ b/frontend/src/views/setting/organization/template/components/templateItem.vue
@@ -61,7 +61,7 @@
       <span class="text-[rgb(var(--warning-6))]">{{ t('system.orgTemplate.enableWarningTip') }}</span>
       <a-input
         v-model="validateKeyWord"
-        :placeholder="t('system.orgTemplate.searchOrgPlaceholder', { name: orgName })"
+        :placeholder="t('system.orgTemplate.searchOrgPlaceholder')"
         allow-clear
         class="mb-4 mt-[8px]"
         :max-length="255"
@@ -228,7 +228,8 @@
       .content {
         @apply flex;
         .logo-img {
-          @apply mr-3 flex items-center bg-white;
+          border-radius: var(--border-radius-small);
+          @apply mr-3 flex items-center justify-center bg-white;
         }
         .template-operation {
           .operation {
diff --git a/frontend/src/views/setting/organization/template/locale/en-US.ts b/frontend/src/views/setting/organization/template/locale/en-US.ts
index f775aab581..9767b4bc97 100644
--- a/frontend/src/views/setting/organization/template/locale/en-US.ts
+++ b/frontend/src/views/setting/organization/template/locale/en-US.ts
@@ -185,7 +185,7 @@ export default {
   'system.orgTemplate.enableTip': 'Are you sure to enable the project template',
   'system.orgTemplate.enableWarningTip': 'Enabled, irreversible for organization template, please careful operation.',
   'system.orgTemplate.typeEmptyTip': 'The filed type cannot be empty',
-  'system.orgTemplate.searchOrgPlaceholder': 'Please enter the organization name :{name}',
+  'system.orgTemplate.searchOrgPlaceholder': 'Please enter the organization name',
   'system.orgTemplate.associatedField': 'Associated field ',
   'system.orgTemplate.associatedHasField': 'Associate an added field',
   'system.orgTemplate.addFieldDesc': 'Adds a new field',
diff --git a/frontend/src/views/setting/organization/template/locale/zh-CN.ts b/frontend/src/views/setting/organization/template/locale/zh-CN.ts
index 96a6300fd2..c95d2ae8ce 100644
--- a/frontend/src/views/setting/organization/template/locale/zh-CN.ts
+++ b/frontend/src/views/setting/organization/template/locale/zh-CN.ts
@@ -174,7 +174,7 @@ export default {
   'system.orgTemplate.enableTip': '确认启用项目模版吗',
   'system.orgTemplate.enableWarningTip': '启用后，不可恢复为组织模版，请谨慎操作！',
   'system.orgTemplate.typeEmptyTip': '字段类型不能为空',
-  'system.orgTemplate.searchOrgPlaceholder': '请输入组织名称: {name} ',
+  'system.orgTemplate.searchOrgPlaceholder': '请输入组织名称',
   'system.orgTemplate.associatedField': '关联字段 ',
   'system.orgTemplate.associatedHasField': '关联已添加的字段',
   'system.orgTemplate.addFieldDesc': '新增一个新的字段',
diff --git a/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue b/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
index aec7b6f0db..26c5a96985 100644
--- a/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
+++ b/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
@@ -15,7 +15,7 @@
         <div class="p-[24px]">
           <div class="flex flex-row items-center justify-between">
             <a-tooltip :content="currentUserGroupItem.name">
-              <div class="one-line-text max-w-[300px]">{{ currentUserGroupItem.name }}</div>
+              <div class="one-line-text max-w-[300px] font-medium">{{ currentUserGroupItem.name }}</div>
             </a-tooltip>
             <div class="flex items-center">
               <a-input-search
diff --git a/frontend/src/views/setting/system/resourcePool/detail.vue b/frontend/src/views/setting/system/resourcePool/detail.vue
index 1fae7283ff..c8c173860a 100644
--- a/frontend/src/views/setting/system/resourcePool/detail.vue
+++ b/frontend/src/views/setting/system/resourcePool/detail.vue
@@ -211,7 +211,7 @@
               </a-form-item>
             </template>
           </MsCodeEditor>
-          <div class="mb-[24px] text-[12px] leading-[16px] text-[var(--color-text-4)]">
+          <div class="mb-[24px] mt-[4px] text-[12px] leading-[16px] text-[var(--color-text-4)]">
             {{ t('system.resourcePool.nodeConfigEditorTip') }}
           </div>
         </div>
diff --git a/frontend/src/views/setting/system/usergroup/systemUserGroup.vue b/frontend/src/views/setting/system/usergroup/systemUserGroup.vue
index db50ca782c..9cb0eb3f9a 100644
--- a/frontend/src/views/setting/system/usergroup/systemUserGroup.vue
+++ b/frontend/src/views/setting/system/usergroup/systemUserGroup.vue
@@ -15,7 +15,7 @@
         <div class="p-[24px]">
           <div class="flex flex-row items-center justify-between">
             <a-tooltip :content="currentUserGroupItem.name">
-              <div class="one-line-text max-w-[300px]">{{ currentUserGroupItem.name }}</div>
+              <div class="one-line-text max-w-[300px] font-medium">{{ currentUserGroupItem.name }}</div>
             </a-tooltip>
             <div class="flex items-center">
               <a-input-search