style(系统设置): 样式修改

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;
       }
     }

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>

frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue

@@ -1,11 +1,13 @@
 <template>
+  <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
-    class="w-[252px]"
         :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"
@@ -63,7 +65,11 @@
                   >
                 </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">
+                  <MsMoreAction
+                    v-if="element.type === systemType"
+                    :list="addMemberActionItem"
+                    @select="handleAddMember"
+                  >
                     <div class="icon-button">
                       <MsIcon type="icon-icon_add_outlined" size="16" />
                     </div>
@@ -141,7 +147,11 @@
                   >
                 </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">
+                  <MsMoreAction
+                    v-if="element.type === systemType"
+                    :list="addMemberActionItem"
+                    @select="handleAddMember"
+                  >
                     <div class="icon-button">
                       <MsIcon type="icon-icon_add_outlined" size="16" />
                     </div>
@@ -219,7 +229,11 @@
                   >
                 </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">
+                  <MsMoreAction
+                    v-if="element.type === systemType"
+                    :list="addMemberActionItem"
+                    @select="handleAddMember"
+                  >
                     <div class="icon-button">
                       <MsIcon type="icon-icon_add_outlined" size="16" />
                     </div>
@@ -239,7 +253,7 @@
         </div>
       </Transition>
     </div>
-
+  </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];
         }
+        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(() => {
+  defineExpose({
-    initData();
+    initData,
   });
 </script>
 

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 () => {

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);
 

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;

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;

frontend/src/views/setting/organization/project/orgProject.vue

@@ -151,6 +151,7 @@
       slotName: 'operation',
       dataIndex: 'operation',
       fixed: 'right',
+      width: 230,
     },
   ];
 

frontend/src/views/setting/organization/usergroup/orgUserGroup.vue

@@ -1,14 +1,18 @@
 <template>
-  <MsCard simple>
+  <div class="card">
-    <div class="flex flex-row">
+    <div class="flex h-full flex-row">
-      <div class="user-group-left" :style="{ padding: leftCollapse ? '24px 24px 24px 0' : 0 }">
+      <Transition>
-        <UserGroupLeft v-if="leftCollapse" @on-select="handleSelect" />
+        <div v-if="leftCollapse" class="user-group-left">
-        <div class="usergroup-collapse" @click="handleCollapse">
+          <UserGroupLeft ref="ugLeftRef" @handle-select="handleSelect" />
-          <MsIcon v-if="leftCollapse" type="icon-icon_up-left_outlined" class="icon" />
-          <MsIcon v-else type="icon-icon_down-right_outlined" class="icon" />
         </div>
+      </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>
-      <div class="relative w-[100%] overflow-x-scroll p-[24px]">
+      </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 {
+  .card {
-    color: var(--color-text-1);
+    @apply overflow-hidden bg-white;
-  }
+
-  .user-group {
+    position: relative;
-    height: calc(100vh - 72px);
+    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);
+    min-width: 300px;
-    border-right: 1px solid var(--color-border);
+    height: 100%;
+    border-right: 1px solid var(--color-border-1);
+  }
   .usergroup-collapse {
     position: absolute;
     top: 50%;
-      right: -16px;
+    left: 300px;
-      z-index: 100;
+    z-index: 101;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 16px;
     height: 36px;
     background-color: var(--color-text-n8);
-      opacity: 0;
+    flex-shrink: 0;
     cursor: pointer;
-      &:hover {
-        opacity: 1;
-      }
-      .icon {
-        font-size: 12px;
-        color: var(--color-text-brand);
   }
+  .v-enter-active,
+  .v-leave-active {
+    transition: opacity 0.5s ease;
   }
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
   }
 </style>

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;

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,

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;

frontend/src/views/setting/system/usergroup/systemUserGroup.vue

@@ -1,14 +1,18 @@
 <template>
-  <MsCard auto-height simple>
+  <div class="card">
-    <div class="flex flex-row">
+    <div class="flex h-full flex-row">
-      <div class="user-group-left" :style="{ padding: leftCollapse ? '24px 24px 24px 0' : 0 }">
+      <Transition>
-        <UserGroupLeft v-if="leftCollapse" @on-select="handleSelect" />
+        <div v-if="leftCollapse" class="user-group-left">
-        <div class="usergroup-collapse" @click="handleCollapse">
+          <UserGroupLeft ref="ugLeftRef" @handle-select="handleSelect" />
-          <MsIcon v-if="leftCollapse" type="icon-icon_up-left_outlined" class="icon" />
-          <MsIcon v-else type="icon-icon_down-right_outlined" class="icon" />
         </div>
+      </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>
-      <div class="relative w-[100%] overflow-x-scroll p-[24px]">
+      </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;
+    left: 300px;
-      z-index: 100;
+    z-index: 101;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 16px;
     height: 36px;
-      background-color: var(--color-text-8);
+    background-color: var(--color-text-n8);
-      opacity: 1;
+    flex-shrink: 0;
     cursor: pointer;
-      &:hover {
-        opacity: 1;
-      }
-      .icon {
-        font-size: 12px;
-        color: var(--color-text-brand);
   }
+  .v-enter-active,
+  .v-leave-active {
+    transition: opacity 0.5s ease;
   }
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
   }
 </style>