From 387460f4e5bd0d2424ba9fc0171e902f06f5daf2 Mon Sep 17 00:00:00 2001
From: RubyLiu <liulubingjava@163.com>
Date: Mon, 18 Sep 2023 18:26:44 +0800
Subject: [PATCH] =?UTF-8?q?style(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/style/arco-reset.less     |   3 +
 .../createOrUpdateUserGroup.vue               |  17 +-
 .../ms-user-group-comp/msUserGroupLeft.vue    | 515 +++++++++---------
 .../business/ms-user-group-comp/userTable.vue |   3 +-
 .../userGroup/projectUserGroup.vue            |   6 +-
 .../userGroup/userDrawer.vue                  |   5 +-
 .../project/components/userDrawer.vue         |   6 +-
 .../organization/project/orgProject.vue       |   1 +
 .../organization/usergroup/orgUserGroup.vue   | 100 ++--
 .../components/projectDrawer.vue              |   5 +-
 .../components/systemProject.vue              |   8 +-
 .../components/userDrawer.vue                 |   5 +-
 .../system/usergroup/systemUserGroup.vue      |  95 ++--
 13 files changed, 424 insertions(+), 345 deletions(-)

diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
index 71b70bb8cc..c695b07cd9 100644
--- a/frontend/src/assets/style/arco-reset.less
+++ b/frontend/src/assets/style/arco-reset.less
@@ -589,6 +589,9 @@
       background: var(--color-text-10);
       box-sizing: border-box;
       input {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        height: 22px;
         text-align: center;
       }
     }
diff --git a/frontend/src/components/business/ms-user-group-comp/createOrUpdateUserGroup.vue b/frontend/src/components/business/ms-user-group-comp/createOrUpdateUserGroup.vue
index 5709d4e357..34bb200f36 100644
--- a/frontend/src/components/business/ms-user-group-comp/createOrUpdateUserGroup.vue
+++ b/frontend/src/components/business/ms-user-group-comp/createOrUpdateUserGroup.vue
@@ -1,5 +1,11 @@
 <template>
-  <a-popover :popup-visible="currentVisible" position="bl" trigger="click" class="w-[276px]">
+  <a-popover
+    :popup-visible="currentVisible"
+    position="bl"
+    trigger="click"
+    class="w-[277px]"
+    :content-class="props.id ? 'move-left' : ''"
+  >
     <template #content>
       <div class="form">
         <a-form
@@ -18,7 +24,7 @@
           <a-form-item field="name" :rules="[{ validator: validateName }]">
             <a-input
               v-model="form.name"
-              class="w-[228px]"
+              class="w-[243px]"
               :placeholder="t('system.userGroup.pleaseInputUserGroupName')"
               @press-enter="handleBeforeOk"
               @keyup.esc="handleCancel"
@@ -146,3 +152,10 @@
     form.name = props.defaultName || '';
   });
 </script>
+
+<style lang="less">
+  .move-left {
+    position: relative;
+    right: 22px;
+  }
+</style>
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 d5118a961b..cac3a77b8d 100644
--- a/frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue
+++ b/frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue
@@ -1,245 +1,259 @@
 <template>
-  <a-input-search
-    class="w-[252px]"
-    :placeholder="t('system.userGroup.searchHolder')"
-    allow-clear
-    @press-enter="enterData"
-    @search="searchData"
-  />
-  <div v-if="showSystem" class="mt-2 w-[252px]">
-    <CreateUserGroupPopup
-      :list="systemUserGroupList"
-      :visible="systemUserGroupVisible"
-      :auth-scope="AuthScopeEnum.SYSTEM"
-      @cancel="systemUserGroupVisible = false"
-      @submit="handleCreateUserGroup"
-    >
-      <div class="flex items-center justify-between px-[4px] py-[7px]">
-        <div class="flex flex-row items-center gap-1 text-[var(--color-text-4)]">
-          <MsIcon
-            v-if="systemToggle"
-            class="cursor-pointer"
-            type="icon-icon_expand-down_filled"
-            size="12"
-            @click="systemToggle = false"
-          />
-          <MsIcon
-            v-else
-            class="cursor-pointer"
-            type="icon-icon_expand-right_filled"
-            size="12"
-            @click="systemToggle = true"
-          />
-          <div class="text-[14px]">
-            {{ t('system.userGroup.systemUserGroup') }}
+  <div class="flex h-full flex-col overflow-auto px-[24px] py-[24px]">
+    <div class="sticky top-0 z-[999] w-[252px] bg-white">
+      <a-input-search
+        :placeholder="t('system.userGroup.searchHolder')"
+        allow-clear
+        @press-enter="enterData"
+        @search="searchData"
+      />
+    </div>
+    <div v-if="showSystem" class="mt-2 w-[252px]">
+      <CreateUserGroupPopup
+        :list="systemUserGroupList"
+        :visible="systemUserGroupVisible"
+        :auth-scope="AuthScopeEnum.SYSTEM"
+        @cancel="systemUserGroupVisible = false"
+        @submit="handleCreateUserGroup"
+      >
+        <div class="flex items-center justify-between px-[4px] py-[7px]">
+          <div class="flex flex-row items-center gap-1 text-[var(--color-text-4)]">
+            <MsIcon
+              v-if="systemToggle"
+              class="cursor-pointer"
+              type="icon-icon_expand-down_filled"
+              size="12"
+              @click="systemToggle = false"
+            />
+            <MsIcon
+              v-else
+              class="cursor-pointer"
+              type="icon-icon_expand-right_filled"
+              size="12"
+              @click="systemToggle = true"
+            />
+            <div class="text-[14px]">
+              {{ t('system.userGroup.systemUserGroup') }}
+            </div>
+          </div>
+          <MsMoreAction :list="createSystemUGActionItem" @select="systemUserGroupVisible = true">
+            <icon-plus-circle-fill class="text-[rgb(var(--primary-7))]" size="20" />
+          </MsMoreAction>
+        </div>
+      </CreateUserGroupPopup>
+      <Transition>
+        <div v-if="systemToggle">
+          <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 }"
+            @click="handleListItemClick(element)"
+          >
+            <CreateUserGroupPopup
+              :list="systemUserGroupList"
+              v-bind="popVisible[element.id]"
+              @cancel="handleRenameCancel(element)"
+              @submit="handleRenameCancel(element, element.id)"
+            >
+              <div class="flex grow flex-row items-center justify-between">
+                <a-tooltip :content="element.name">
+                  <div
+                    class="one-line-text max-w-[156px] text-[var(--color-text-1)]"
+                    :class="{ 'text-[rgb(var(--primary-7))]': element.id === currentId }"
+                    >{{ element.name }}</div
+                  >
+                </a-tooltip>
+                <div v-if="element.id === currentId && !element.internal" class="flex flex-row items-center gap-[8px]">
+                  <MsMoreAction
+                    v-if="element.type === systemType"
+                    :list="addMemberActionItem"
+                    @select="handleAddMember"
+                  >
+                    <div class="icon-button">
+                      <MsIcon type="icon-icon_add_outlined" size="16" />
+                    </div>
+                  </MsMoreAction>
+                  <MsMoreAction
+                    :list="moreAction"
+                    @select="(value) => handleMoreAction(value, element.id, AuthScopeEnum.SYSTEM)"
+                  >
+                    <div class="icon-button">
+                      <MsIcon type="icon-icon_more_outlined" size="16" />
+                    </div>
+                  </MsMoreAction>
+                </div>
+              </div>
+            </CreateUserGroupPopup>
+          </div>
+          <a-divider class="my-[0px] mt-[6px]" />
+        </div>
+      </Transition>
+    </div>
+    <div v-if="showOrg" class="mt-2 w-[252px]">
+      <CreateUserGroupPopup
+        :list="orgUserGroupList"
+        :visible="orgUserGroupVisible"
+        :auth-scope="AuthScopeEnum.ORGANIZATION"
+        @cancel="orgUserGroupVisible = false"
+        @submit="handleCreateUserGroup"
+      >
+        <div class="flex items-center justify-between px-[4px] py-[7px]">
+          <div class="flex flex-row items-center gap-1 text-[var(--color-text-4)]">
+            <MsIcon
+              v-if="orgToggle"
+              class="cursor-pointer"
+              type="icon-icon_expand-down_filled"
+              size="12"
+              @click="orgToggle = false"
+            />
+            <MsIcon
+              v-else
+              class="cursor-pointer"
+              type="icon-icon_expand-right_filled"
+              size="12"
+              @click="orgToggle = true"
+            />
+            <div class="text-[14px]">
+              {{ t('system.userGroup.orgUserGroup') }}
+            </div>
+          </div>
+          <MsMoreAction :list="createOrgUGActionItem" @select="orgUserGroupVisible = true">
+            <icon-plus-circle-fill class="text-[rgb(var(--primary-7))]" size="20" />
+          </MsMoreAction>
+        </div>
+      </CreateUserGroupPopup>
+      <Transition>
+        <div v-if="orgToggle">
+          <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 }"
+            @click="handleListItemClick(element)"
+          >
+            <CreateUserGroupPopup
+              :list="orgUserGroupList"
+              v-bind="popVisible[element.id]"
+              @cancel="handleRenameCancel(element)"
+              @submit="handleRenameCancel(element, element.id)"
+            >
+              <div class="flex grow flex-row items-center justify-between">
+                <a-tooltip :content="element.name">
+                  <div
+                    class="one-line-text max-w-[156px] text-[var(--color-text-1)]"
+                    :class="{ 'text-[rgb(var(--primary-7))]': element.id === currentId }"
+                    >{{ element.name }}</div
+                  >
+                </a-tooltip>
+                <div v-if="element.id === currentId && !element.internal" class="flex flex-row items-center gap-[8px]">
+                  <MsMoreAction
+                    v-if="element.type === systemType"
+                    :list="addMemberActionItem"
+                    @select="handleAddMember"
+                  >
+                    <div class="icon-button">
+                      <MsIcon type="icon-icon_add_outlined" size="16" />
+                    </div>
+                  </MsMoreAction>
+                  <MsMoreAction
+                    :list="moreAction"
+                    @select="(value) => handleMoreAction(value, element.id, AuthScopeEnum.ORGANIZATION)"
+                  >
+                    <div class="icon-button">
+                      <MsIcon type="icon-icon_more_outlined" size="16" />
+                    </div>
+                  </MsMoreAction>
+                </div>
+              </div>
+            </CreateUserGroupPopup>
+          </div>
+          <a-divider v-if="showSystem" class="my-[0px] mt-[6px]" />
+        </div>
+      </Transition>
+    </div>
+    <div v-if="showProject" class="mt-2 w-[252px]">
+      <CreateUserGroupPopup
+        :list="projectUserGroupList"
+        :visible="projectUserGroupVisible"
+        :auth-scope="AuthScopeEnum.PROJECT"
+        @cancel="projectUserGroupVisible = false"
+        @submit="handleCreateUserGroup"
+      >
+        <div class="flex items-center justify-between px-[4px] py-[7px]">
+          <div class="flex flex-row items-center gap-1 text-[var(--color-text-4)]">
+            <MsIcon
+              v-if="projectToggle"
+              class="cursor-pointer"
+              type="icon-icon_expand-down_filled"
+              size="12"
+              @click="projectToggle = false"
+            />
+            <MsIcon
+              v-else
+              class="cursor-pointer"
+              type="icon-icon_expand-right_filled"
+              size="12"
+              @click="projectToggle = true"
+            />
+            <div class="text-[14px]">
+              {{ t('system.userGroup.projectUserGroup') }}
+            </div>
+          </div>
+          <MsMoreAction :list="createProjectUGActionItem" @select="projectUserGroupVisible = true">
+            <icon-plus-circle-fill class="text-[rgb(var(--primary-7))]" size="20" />
+          </MsMoreAction>
+        </div>
+      </CreateUserGroupPopup>
+      <Transition>
+        <div v-if="projectToggle">
+          <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 }"
+            @click="handleListItemClick(element)"
+          >
+            <CreateUserGroupPopup
+              :list="projectUserGroupList"
+              v-bind="popVisible[element.id]"
+              @cancel="handleRenameCancel(element)"
+              @submit="handleRenameCancel(element, element.id)"
+            >
+              <div class="flex grow flex-row items-center justify-between">
+                <a-tooltip :content="element.name">
+                  <div
+                    class="one-line-text max-w-[156px] text-[var(--color-text-1)]"
+                    :class="{ 'text-[rgb(var(--primary-7))]': element.id === currentId }"
+                    >{{ element.name }}</div
+                  >
+                </a-tooltip>
+                <div v-if="element.id === currentId && !element.internal" class="flex flex-row items-center gap-[8px]">
+                  <MsMoreAction
+                    v-if="element.type === systemType"
+                    :list="addMemberActionItem"
+                    @select="handleAddMember"
+                  >
+                    <div class="icon-button">
+                      <MsIcon type="icon-icon_add_outlined" size="16" />
+                    </div>
+                  </MsMoreAction>
+                  <MsMoreAction
+                    :list="moreAction"
+                    @select="(value) => handleMoreAction(value, element.id, AuthScopeEnum.PROJECT)"
+                  >
+                    <div class="icon-button">
+                      <MsIcon type="icon-icon_more_outlined" size="16" />
+                    </div>
+                  </MsMoreAction>
+                </div>
+              </div>
+            </CreateUserGroupPopup>
           </div>
         </div>
-        <MsMoreAction :list="createSystemUGActionItem" @select="systemUserGroupVisible = true">
-          <icon-plus-circle-fill class="text-[rgb(var(--primary-7))]" size="20" />
-        </MsMoreAction>
-      </div>
-    </CreateUserGroupPopup>
-    <Transition>
-      <div v-if="systemToggle">
-        <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 }"
-          @click="handleListItemClick(element)"
-        >
-          <CreateUserGroupPopup
-            :list="systemUserGroupList"
-            v-bind="popVisible[element.id]"
-            @cancel="handleRenameCancel(element)"
-            @submit="handleRenameCancel(element, element.id)"
-          >
-            <div class="flex grow flex-row items-center justify-between">
-              <a-tooltip :content="element.name">
-                <div
-                  class="one-line-text max-w-[156px] text-[var(--color-text-1)]"
-                  :class="{ 'text-[rgb(var(--primary-7))]': element.id === currentId }"
-                  >{{ element.name }}</div
-                >
-              </a-tooltip>
-              <div v-if="element.id === currentId && !element.internal" class="flex flex-row items-center gap-[8px]">
-                <MsMoreAction v-if="element.type === systemType" :list="addMemberActionItem" @select="handleAddMember">
-                  <div class="icon-button">
-                    <MsIcon type="icon-icon_add_outlined" size="16" />
-                  </div>
-                </MsMoreAction>
-                <MsMoreAction
-                  :list="moreAction"
-                  @select="(value) => handleMoreAction(value, element.id, AuthScopeEnum.SYSTEM)"
-                >
-                  <div class="icon-button">
-                    <MsIcon type="icon-icon_more_outlined" size="16" />
-                  </div>
-                </MsMoreAction>
-              </div>
-            </div>
-          </CreateUserGroupPopup>
-        </div>
-        <a-divider class="my-[0px] mt-[6px]" />
-      </div>
-    </Transition>
+      </Transition>
+    </div>
   </div>
-  <div v-if="showOrg" class="mt-2 w-[252px]">
-    <CreateUserGroupPopup
-      :list="orgUserGroupList"
-      :visible="orgUserGroupVisible"
-      :auth-scope="AuthScopeEnum.ORGANIZATION"
-      @cancel="orgUserGroupVisible = false"
-      @submit="handleCreateUserGroup"
-    >
-      <div class="flex items-center justify-between px-[4px] py-[7px]">
-        <div class="flex flex-row items-center gap-1 text-[var(--color-text-4)]">
-          <MsIcon
-            v-if="orgToggle"
-            class="cursor-pointer"
-            type="icon-icon_expand-down_filled"
-            size="12"
-            @click="orgToggle = false"
-          />
-          <MsIcon
-            v-else
-            class="cursor-pointer"
-            type="icon-icon_expand-right_filled"
-            size="12"
-            @click="orgToggle = true"
-          />
-          <div class="text-[14px]">
-            {{ t('system.userGroup.orgUserGroup') }}
-          </div>
-        </div>
-        <MsMoreAction :list="createOrgUGActionItem" @select="orgUserGroupVisible = true">
-          <icon-plus-circle-fill class="text-[rgb(var(--primary-7))]" size="20" />
-        </MsMoreAction>
-      </div>
-    </CreateUserGroupPopup>
-    <Transition>
-      <div v-if="orgToggle">
-        <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 }"
-          @click="handleListItemClick(element)"
-        >
-          <CreateUserGroupPopup
-            :list="orgUserGroupList"
-            v-bind="popVisible[element.id]"
-            @cancel="handleRenameCancel(element)"
-            @submit="handleRenameCancel(element, element.id)"
-          >
-            <div class="flex grow flex-row items-center justify-between">
-              <a-tooltip :content="element.name">
-                <div
-                  class="one-line-text max-w-[156px] text-[var(--color-text-1)]"
-                  :class="{ 'text-[rgb(var(--primary-7))]': element.id === currentId }"
-                  >{{ element.name }}</div
-                >
-              </a-tooltip>
-              <div v-if="element.id === currentId && !element.internal" class="flex flex-row items-center gap-[8px]">
-                <MsMoreAction v-if="element.type === systemType" :list="addMemberActionItem" @select="handleAddMember">
-                  <div class="icon-button">
-                    <MsIcon type="icon-icon_add_outlined" size="16" />
-                  </div>
-                </MsMoreAction>
-                <MsMoreAction
-                  :list="moreAction"
-                  @select="(value) => handleMoreAction(value, element.id, AuthScopeEnum.ORGANIZATION)"
-                >
-                  <div class="icon-button">
-                    <MsIcon type="icon-icon_more_outlined" size="16" />
-                  </div>
-                </MsMoreAction>
-              </div>
-            </div>
-          </CreateUserGroupPopup>
-        </div>
-        <a-divider v-if="showSystem" class="my-[0px] mt-[6px]" />
-      </div>
-    </Transition>
-  </div>
-  <div v-if="showProject" class="mt-2 w-[252px]">
-    <CreateUserGroupPopup
-      :list="projectUserGroupList"
-      :visible="projectUserGroupVisible"
-      :auth-scope="AuthScopeEnum.PROJECT"
-      @cancel="projectUserGroupVisible = false"
-      @submit="handleCreateUserGroup"
-    >
-      <div class="flex items-center justify-between px-[4px] py-[7px]">
-        <div class="flex flex-row items-center gap-1 text-[var(--color-text-4)]">
-          <MsIcon
-            v-if="projectToggle"
-            class="cursor-pointer"
-            type="icon-icon_expand-down_filled"
-            size="12"
-            @click="projectToggle = false"
-          />
-          <MsIcon
-            v-else
-            class="cursor-pointer"
-            type="icon-icon_expand-right_filled"
-            size="12"
-            @click="projectToggle = true"
-          />
-          <div class="text-[14px]">
-            {{ t('system.userGroup.projectUserGroup') }}
-          </div>
-        </div>
-        <MsMoreAction :list="createProjectUGActionItem" @select="projectUserGroupVisible = true">
-          <icon-plus-circle-fill class="text-[rgb(var(--primary-7))]" size="20" />
-        </MsMoreAction>
-      </div>
-    </CreateUserGroupPopup>
-    <Transition>
-      <div v-if="projectToggle">
-        <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 }"
-          @click="handleListItemClick(element)"
-        >
-          <CreateUserGroupPopup
-            :list="projectUserGroupList"
-            v-bind="popVisible[element.id]"
-            @cancel="handleRenameCancel(element)"
-            @submit="handleRenameCancel(element, element.id)"
-          >
-            <div class="flex grow flex-row items-center justify-between">
-              <a-tooltip :content="element.name">
-                <div
-                  class="one-line-text max-w-[156px] text-[var(--color-text-1)]"
-                  :class="{ 'text-[rgb(var(--primary-7))]': element.id === currentId }"
-                  >{{ element.name }}</div
-                >
-              </a-tooltip>
-              <div v-if="element.id === currentId && !element.internal" class="flex flex-row items-center gap-[8px]">
-                <MsMoreAction v-if="element.type === systemType" :list="addMemberActionItem" @select="handleAddMember">
-                  <div class="icon-button">
-                    <MsIcon type="icon-icon_add_outlined" size="16" />
-                  </div>
-                </MsMoreAction>
-                <MsMoreAction
-                  :list="moreAction"
-                  @select="(value) => handleMoreAction(value, element.id, AuthScopeEnum.PROJECT)"
-                >
-                  <div class="icon-button">
-                    <MsIcon type="icon-icon_more_outlined" size="16" />
-                  </div>
-                </MsMoreAction>
-              </div>
-            </div>
-          </CreateUserGroupPopup>
-        </div>
-      </div>
-    </Transition>
-  </div>
-
   <AddUserModal :visible="userModalVisible" :current-id="currentItem.id" @cancel="userModalVisible = false" />
 </template>
 
@@ -256,7 +270,7 @@
     getProjectUserGroupList,
     deleteOrgUserGroup,
   } from '@/api/modules/setting/usergroup';
-  import { computed, onMounted, ref, inject } from 'vue';
+  import { computed, ref, inject } from 'vue';
   import CreateUserGroupPopup from './createOrUpdateUserGroup.vue';
   import AddUserModal from './addUserModal.vue';
   import { Message } from '@arco-design/web-vue';
@@ -268,7 +282,7 @@
   const { t } = useI18n();
 
   const emit = defineEmits<{
-    (e: 'onSelect', element: UserGroupItem): void;
+    (e: 'handleSelect', element: UserGroupItem): void;
   }>();
   const appStore = useAppStore();
   const { openModal } = useModal();
@@ -283,7 +297,7 @@
   const userGroupList = ref<UserGroupItem[]>([]);
 
   const currentItem = ref<CurrentUserGroupItem>({ id: '', name: '', internal: false, type: AuthScopeEnum.SYSTEM });
-  const currentId = computed(() => currentItem.value.id);
+  const currentId = ref('');
   const currentName = computed(() => currentItem.value.name);
 
   const userModalVisible = ref(false);
@@ -349,11 +363,12 @@
   const handleListItemClick = (element: UserGroupItem) => {
     const { id, name, type, internal } = element;
     currentItem.value = { id, name, type, internal };
-    emit('onSelect', element);
+    currentId.value = id;
+    emit('handleSelect', element);
   };
 
   // 用户组数据初始化
-  const initData = async (id?: string) => {
+  const initData = async (id?: string, isSelect = true) => {
     try {
       let res: UserGroupItem[] = [];
       if (systemType === AuthScopeEnum.SYSTEM) {
@@ -369,7 +384,13 @@
         if (id) {
           tmpItem = res.find((i) => i.id === id) || res[0];
         }
-        handleListItemClick(tmpItem);
+        if (isSelect) {
+          // leftCollapse 切换时不重复数据请求
+          handleListItemClick(tmpItem);
+        } else {
+          // leftCollapse 切换时调用
+          currentId.value = id || '';
+        }
         // 弹窗赋值
         const tmpObj: PopVisible = {};
         res.forEach((element) => {
@@ -449,12 +470,12 @@
   };
   const handleRenameCancel = (element: UserGroupItem, id?: string) => {
     if (id) {
-      initData(id);
+      initData(id, true);
     }
     popVisible.value[element.id].visible = false;
   };
-  onMounted(() => {
-    initData();
+  defineExpose({
+    initData,
   });
 </script>
 
diff --git a/frontend/src/components/business/ms-user-group-comp/userTable.vue b/frontend/src/components/business/ms-user-group-comp/userTable.vue
index 736bad0c9d..b86435fdc9 100644
--- a/frontend/src/components/business/ms-user-group-comp/userTable.vue
+++ b/frontend/src/components/business/ms-user-group-comp/userTable.vue
@@ -72,7 +72,6 @@
     }
 
     return postOrgUserByUserGroup;
-    // TODO: 项目
   };
 
   const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(getRequestBySystemType(), {
@@ -81,7 +80,7 @@
     selectable: false,
     noDisable: true,
     showSetting: false,
-    heightUsed: 340,
+    heightUsed: 380,
   });
 
   const fetchData = async () => {
diff --git a/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue b/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue
index 7b8e375663..9804b94d48 100644
--- a/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue
+++ b/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue
@@ -34,14 +34,13 @@
       </div>
     </template>
   </MsBaseTable>
-  <a-drawer
+  <MsDrawer
     :width="928"
     :visible="authVisible"
     unmount-on-close
     :footer="!currentItem.internal"
     :title="currentItem.name"
     :mask="false"
-    class="ms-drawer-no-mask"
     @cancel="authVisible = false"
   >
     <AuthTable ref="authRef" :current="currentItem" />
@@ -55,7 +54,7 @@
         }}</a-button>
       </div>
     </template>
-  </a-drawer>
+  </MsDrawer>
   <UserDrawer
     :visible="userVisible"
     :project-id="currentProjectId"
@@ -114,6 +113,7 @@
   import MsButton from '@/components/pure/ms-button/not-mr.vue';
   import useModal from '@/hooks/useModal';
   import { Message, ValidatedError } from '@arco-design/web-vue';
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
 
   provide('systemType', AuthScopeEnum.PROJECT);
 
diff --git a/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue b/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
index 07fc1ef92d..7ecc399611 100644
--- a/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
+++ b/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-drawer
+  <MsDrawer
     :width="680"
     :visible="currentVisible"
     unmount-on-close
@@ -39,7 +39,7 @@
         </template>
       </ms-base-table>
     </div>
-  </a-drawer>
+  </MsDrawer>
   <AddUserModal
     :project-id="props.projectId"
     :user-role-id="props.userRoleId"
@@ -58,6 +58,7 @@
   import AddUserModal from './addUserModal.vue';
   import { TableData, Message } from '@arco-design/web-vue';
   import MsRemoveButton from '@/components/business/ms-remove-button/MsRemoveButton.vue';
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
 
   export interface projectDrawerProps {
     visible: boolean;
diff --git a/frontend/src/views/setting/organization/project/components/userDrawer.vue b/frontend/src/views/setting/organization/project/components/userDrawer.vue
index 9c0a71678d..f453bd3682 100644
--- a/frontend/src/views/setting/organization/project/components/userDrawer.vue
+++ b/frontend/src/views/setting/organization/project/components/userDrawer.vue
@@ -1,12 +1,11 @@
 <template>
-  <a-drawer
+  <MsDrawer
     :width="680"
     :visible="currentVisible"
     unmount-on-close
     :footer="false"
     :title="t('system.organization.addMember')"
     :mask="false"
-    class="ms-drawer-no-mask"
     @cancel="handleCancel"
   >
     <div>
@@ -39,7 +38,7 @@
         </template>
       </ms-base-table>
     </div>
-  </a-drawer>
+  </MsDrawer>
   <AddUserModal
     :project-id="props.projectId"
     :organization-id="props.organizationId"
@@ -58,6 +57,7 @@
   import AddUserModal from './addUserModal.vue';
   import { TableData, Message } from '@arco-design/web-vue';
   import MsRemoveButton from '@/components/business/ms-remove-button/MsRemoveButton.vue';
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
 
   export interface projectDrawerProps {
     visible: boolean;
diff --git a/frontend/src/views/setting/organization/project/orgProject.vue b/frontend/src/views/setting/organization/project/orgProject.vue
index f75c59e12d..5d68f7e1ab 100644
--- a/frontend/src/views/setting/organization/project/orgProject.vue
+++ b/frontend/src/views/setting/organization/project/orgProject.vue
@@ -151,6 +151,7 @@
       slotName: 'operation',
       dataIndex: 'operation',
       fixed: 'right',
+      width: 230,
     },
   ];
 
diff --git a/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue b/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
index e696604987..b047e6bc12 100644
--- a/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
+++ b/frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
@@ -1,14 +1,18 @@
 <template>
-  <MsCard simple>
-    <div class="flex flex-row">
-      <div class="user-group-left" :style="{ padding: leftCollapse ? '24px 24px 24px 0' : 0 }">
-        <UserGroupLeft v-if="leftCollapse" @on-select="handleSelect" />
-        <div class="usergroup-collapse" @click="handleCollapse">
-          <MsIcon v-if="leftCollapse" type="icon-icon_up-left_outlined" class="icon" />
-          <MsIcon v-else type="icon-icon_down-right_outlined" class="icon" />
+  <div class="card">
+    <div class="flex h-full flex-row">
+      <Transition>
+        <div v-if="leftCollapse" class="user-group-left">
+          <UserGroupLeft ref="ugLeftRef" @handle-select="handleSelect" />
         </div>
-      </div>
-      <div class="relative w-[100%] overflow-x-scroll p-[24px]">
+      </Transition>
+      <Transition>
+        <div class="usergroup-collapse" :style="leftCollapse ? 'left: 300px' : 'left: 0'" @click="handleCollapse">
+          <icon-double-left v-if="leftCollapse" class="text-[12px] text-[var(--color-text-brand)]" />
+          <icon-double-right v-else class="text-[12px] text-[var(--color-text-brand)]" />
+        </div>
+      </Transition>
+      <div class="w-[100%] 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>
@@ -39,7 +43,7 @@
         </div>
       </div>
     </div>
-  </MsCard>
+  </div>
   <div
     v-if="currentTable === 'auth'"
     class="fixed bottom-[16px] right-[16px] z-[999] flex justify-between bg-white p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
@@ -53,13 +57,11 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed, watchEffect, nextTick, provide } from 'vue';
+  import { ref, computed, watchEffect, nextTick, provide, onMounted } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
-  import MsCard from '@/components/pure/ms-card/index.vue';
   import UserGroupLeft from '@/components/business/ms-user-group-comp/msUserGroupLeft.vue';
   import UserTable from '@/components/business/ms-user-group-comp//userTable.vue';
   import AuthTable from '@/components/business/ms-user-group-comp/authTable.vue';
-  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsButton from '@/components/pure/ms-button/index.vue';
   import { useAppStore } from '@/store';
   import { AuthScopeEnum } from '@/enums/commonEnum';
@@ -72,6 +74,7 @@
 
   const { t } = useI18n();
   const currentKeyword = ref('');
+  const ugLeftRef = ref();
   const currentUserGroupItem = ref<CurrentUserGroupItem>({
     id: '',
     name: '',
@@ -114,13 +117,18 @@
 
   const handleCollapse = () => {
     leftCollapse.value = !leftCollapse.value;
+    if (leftCollapse.value) {
+      nextTick(() => {
+        ugLeftRef.value?.initData(currentUserGroupItem.value.id, false);
+      });
+    }
   };
   const menuWidth = computed(() => {
     const width = appStore.menuCollapse ? 86 : appStore.menuWidth;
     if (leftCollapse.value) {
       return width + 300;
     }
-    return width + 24;
+    return width;
   });
 
   const handleReset = () => {
@@ -144,40 +152,48 @@
       currentTable.value = 'auth';
     }
   });
+  onMounted(() => {
+    ugLeftRef.value?.initData();
+  });
 </script>
 
 <style lang="scss" scoped>
-  .title {
-    color: var(--color-text-1);
-  }
-  .user-group {
-    height: calc(100vh - 72px);
+  .card {
+    @apply overflow-hidden bg-white;
+
+    position: relative;
+    height: calc(100vh - 88px);
+    border-radius: var(--border-radius-large);
+    box-shadow: 0 0 10px rgb(120 56 135 / 5%);
   }
   .user-group-left {
     position: relative;
+    overflow: hidden;
     width: 300px;
-    height: calc(100vh - 125px);
-    border-right: 1px solid var(--color-border);
-    .usergroup-collapse {
-      position: absolute;
-      top: 50%;
-      right: -16px;
-      z-index: 100;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 16px;
-      height: 36px;
-      background-color: var(--color-text-n8);
-      opacity: 0;
-      cursor: pointer;
-      &:hover {
-        opacity: 1;
-      }
-      .icon {
-        font-size: 12px;
-        color: var(--color-text-brand);
-      }
-    }
+    min-width: 300px;
+    height: 100%;
+    border-right: 1px solid var(--color-border-1);
+  }
+  .usergroup-collapse {
+    position: absolute;
+    top: 50%;
+    left: 300px;
+    z-index: 101;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 36px;
+    background-color: var(--color-text-n8);
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+  .v-enter-active,
+  .v-leave-active {
+    transition: opacity 0.5s ease;
+  }
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
   }
 </style>
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/projectDrawer.vue b/frontend/src/views/setting/system/organizationAndProject/components/projectDrawer.vue
index 5ab1238052..ee1fc583ba 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/projectDrawer.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/projectDrawer.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-drawer
+  <ms-drawer
     :mask="false"
     :width="680"
     :visible="currentVisible"
@@ -22,7 +22,7 @@
       </div>
       <ms-base-table v-bind="propsRes" v-on="propsEvent" />
     </div>
-  </a-drawer>
+  </ms-drawer>
 </template>
 
 <script lang="ts" setup>
@@ -32,6 +32,7 @@
   import { useI18n } from '@/hooks/useI18n';
   import { watch, ref } from 'vue';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
 
   export interface projectDrawerProps {
     visible: boolean;
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue b/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
index 43e29473ef..bd11f536ed 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
@@ -99,7 +99,6 @@
       revokeDeletedSlot: 'revokeDelete',
       editType: ColumnEditTypeEnum.INPUT,
       showTooltip: true,
-      width: 300,
     },
     {
       title: 'system.organization.member',
@@ -122,6 +121,7 @@
         sorter: true,
         sortDirections: ['ascend', 'descend'],
       },
+      width: 200,
     },
     {
       title: 'system.organization.creator',
@@ -151,16 +151,18 @@
     }
   };
 
-  tableStore.initColumn(TableKeyEnum.SYSTEM_PROJECT, organizationColumns, 'drawer');
+  // tableStore.initColumn(TableKeyEnum.SYSTEM_PROJECT, organizationColumns, 'drawer');
 
   const { propsRes, propsEvent, loadList, setKeyword } = useTable(
     postProjectTable,
     {
+      columns: organizationColumns,
       tableKey: TableKeyEnum.SYSTEM_PROJECT,
+      scroll: { x: '1600px' },
       selectable: false,
       noDisable: false,
       size: 'default',
-      showSetting: true,
+      // showSetting: true,
       editKey: 'name',
     },
     undefined,
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue b/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
index 864dee9ef2..0826bb33a2 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-drawer
+  <ms-drawer
     :mask="false"
     :width="680"
     :visible="currentVisible"
@@ -39,7 +39,7 @@
         </template>
       </ms-base-table>
     </div>
-  </a-drawer>
+  </ms-drawer>
   <AddUserModal
     :project-id="props.projectId"
     :organization-id="props.organizationId"
@@ -62,6 +62,7 @@
   import AddUserModal from './addUserModal.vue';
   import { TableData, Message } from '@arco-design/web-vue';
   import MsRemoveButton from '@/components/business/ms-remove-button/MsRemoveButton.vue';
+  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
 
   export interface projectDrawerProps {
     visible: boolean;
diff --git a/frontend/src/views/setting/system/usergroup/systemUserGroup.vue b/frontend/src/views/setting/system/usergroup/systemUserGroup.vue
index cf3ff9a248..aee60f6451 100644
--- a/frontend/src/views/setting/system/usergroup/systemUserGroup.vue
+++ b/frontend/src/views/setting/system/usergroup/systemUserGroup.vue
@@ -1,14 +1,18 @@
 <template>
-  <MsCard auto-height simple>
-    <div class="flex flex-row">
-      <div class="user-group-left" :style="{ padding: leftCollapse ? '24px 24px 24px 0' : 0 }">
-        <UserGroupLeft v-if="leftCollapse" @on-select="handleSelect" />
-        <div class="usergroup-collapse" @click="handleCollapse">
-          <MsIcon v-if="leftCollapse" type="icon-icon_up-left_outlined" class="icon" />
-          <MsIcon v-else type="icon-icon_down-right_outlined" class="icon" />
+  <div class="card">
+    <div class="flex h-full flex-row">
+      <Transition>
+        <div v-if="leftCollapse" class="user-group-left">
+          <UserGroupLeft ref="ugLeftRef" @handle-select="handleSelect" />
         </div>
-      </div>
-      <div class="relative w-[100%] overflow-x-scroll p-[24px]">
+      </Transition>
+      <Transition>
+        <div class="usergroup-collapse" :style="leftCollapse ? 'left: 300px' : 'left: 0'" @click="handleCollapse">
+          <icon-double-left v-if="leftCollapse" class="text-[12px] text-[var(--color-text-brand)]" />
+          <icon-double-right v-if="!leftCollapse" class="text-[12px] text-[var(--color-text-brand)]" />
+        </div>
+      </Transition>
+      <div class="w-[100%] 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>
@@ -39,7 +43,7 @@
         </div>
       </div>
     </div>
-  </MsCard>
+  </div>
   <div
     v-if="currentTable === 'auth'"
     class="fixed bottom-[16px] right-[16px] z-[999] flex justify-between bg-white p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
@@ -53,13 +57,11 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed, watchEffect, nextTick, provide } from 'vue';
+  import { ref, computed, watchEffect, nextTick, provide, onMounted } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
-  import MsCard from '@/components/pure/ms-card/index.vue';
   import UserGroupLeft from '@/components/business/ms-user-group-comp/msUserGroupLeft.vue';
   import UserTable from '@/components/business/ms-user-group-comp/userTable.vue';
   import AuthTable from '@/components/business/ms-user-group-comp/authTable.vue';
-  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsButton from '@/components/pure/ms-button/index.vue';
   import { useAppStore } from '@/store';
   import { AuthScopeEnum } from '@/enums/commonEnum';
@@ -70,6 +72,7 @@
 
   const { t } = useI18n();
   const currentKeyword = ref('');
+  const ugLeftRef = ref();
   const currentUserGroupItem = ref<CurrentUserGroupItem>({
     id: '',
     name: '',
@@ -114,13 +117,18 @@
   const couldShowAuth = computed(() => currentUserGroupItem.value.id !== 'admin');
   const handleCollapse = () => {
     leftCollapse.value = !leftCollapse.value;
+    if (leftCollapse.value) {
+      nextTick(() => {
+        ugLeftRef.value?.initData(currentUserGroupItem.value.id, false);
+      });
+    }
   };
   const menuWidth = computed(() => {
     const width = appStore.menuCollapse ? 86 : appStore.menuWidth;
     if (leftCollapse.value) {
       return width + 300;
     }
-    return width + 24;
+    return width;
   });
 
   const handleReset = () => {
@@ -144,35 +152,48 @@
       currentTable.value = 'auth';
     }
   });
+  onMounted(() => {
+    ugLeftRef.value?.initData();
+  });
 </script>
 
 <style lang="scss" scoped>
+  .card {
+    @apply overflow-hidden bg-white;
+
+    position: relative;
+    height: calc(100vh - 88px);
+    border-radius: var(--border-radius-large);
+    box-shadow: 0 0 10px rgb(120 56 135 / 5%);
+  }
   .user-group-left {
     position: relative;
-    overflow-y: scroll;
+    overflow: hidden;
     width: 300px;
-    height: calc(100vh - 125px);
+    min-width: 300px;
+    height: 100%;
     border-right: 1px solid var(--color-border-1);
-    .usergroup-collapse {
-      position: absolute;
-      top: 50%;
-      right: -16px;
-      z-index: 100;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 16px;
-      height: 36px;
-      background-color: var(--color-text-8);
-      opacity: 1;
-      cursor: pointer;
-      &:hover {
-        opacity: 1;
-      }
-      .icon {
-        font-size: 12px;
-        color: var(--color-text-brand);
-      }
-    }
+  }
+  .usergroup-collapse {
+    position: absolute;
+    top: 50%;
+    left: 300px;
+    z-index: 101;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 36px;
+    background-color: var(--color-text-n8);
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+  .v-enter-active,
+  .v-leave-active {
+    transition: opacity 0.5s ease;
+  }
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
   }
 </style>