style: 分页样式调整

frontend/README.md

@@ -777,3 +777,11 @@ export default mergeConfig(
   })
 );
 ```
+## 本地生产环境调试
+需安装docker： https://www.docker.com/, 选择对应系统版本安装。
+```bash
+cd frontend/
+pnpm run build:local
+docker build -t metersphere/ms-v3 .
+docker run -d -p 5100:5100 --name ms-v3 metersphere/ms-v3
+```

frontend/src/assets/style/arco-reset.less

@@ -494,49 +494,47 @@
 }
 
 /** 分页 **/
-.arco-pagination {
+.ms-pagination {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 16px;
-}
+  &-list {
-.arco-pagination-list {
     display: flex;
     flex-direction: row;
-}
+  }
-.arco-pagination-jumper {
+  &-jumper {
+    display: flex;
+    align-items: center;
     padding: 2px 8px;
+    width: 160px;
     background: var(--color-text-n9);
-  .arco-pagination-jumper-input {
+    gap: 8px;
+    .ms-pagination-jumper-input {
       padding: 3px 8px;
       width: 57px;
-    height: 28px;
       border: 1px solid var(--color-text-input-border);
       border-radius: 3px;
+      color: var(--color-text-1);
+      background: var(--color-text-10);
       box-sizing: border-box;
+      input {
+        text-align: center;
       }
-}
+    }
-.arco-pagination-jumper-total-page {
+    &-text-goto,
-  margin-right: 0;
+    &-total-page {
-  margin-left: 8px;
       color: var(--color-text-2);
-}
+    }
-.arco-pagination-simple .arco-pagination-jumper .arco-pagination-jumper-input {
+  }
-  width: 57px;
+  &-total {
-}
-.arco-pagination-total {
-  color: var(--color-text-2) !important;
-}
-.arco-pagination-options {
-  margin-left: 0 !important;
-}
-.arco-pagination-total {
     margin-right: 16px !important;
-}
+    color: var(--color-text-2) !important;
-.arco-pagination-item-previous {
+  }
-  margin-left: 14px !important;
+  &-options {
-}
+    margin-left: 0 !important;
-.arco-pagination-size-small .arco-pagination-item {
+  }
+  &-item {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -544,17 +542,20 @@
     width: 32px;
     height: 32px;
     box-sizing: border-box;
-}
+    &-previous {
-.arco-pagination-item-ellipsis:hover {
+      margin-left: 14px !important;
+    }
+    &-ellipsis:hover {
       width: 32px;
       height: 32px;
-}
+    }
-.arco-pagination-size-small
+    &:not(:last-child):not(:first-child):not(.arco-pagination-item-ellipsis) {
-  .arco-pagination-item:not(:last-child):not(:first-child):not(.arco-pagination-item-ellipsis) {
       border: 1px solid var(--color-text-input-border);
-}
+    }
-.arco-pagination-item-active {
+    &-active {
       border-color: rgb(var(--primary-5)) !important;
       color: rgb(var(--primary-5)) !important;
       background-color: rgb(var(--primary-1)) !important;
+    }
+  }
 }

frontend/src/components/pure/ms-pagination/utils.ts

@@ -3,7 +3,7 @@ import { getCurrentInstance, inject, InjectionKey } from 'vue';
 import type { ArcoOptions, ConfigProvider } from './types';
 
 const COMPONENT_PREFIX = 'A';
-const CLASS_PREFIX = 'arco';
+const CLASS_PREFIX = 'ms';
 const GLOBAL_CONFIG_NAME = '$arco';
 
 export const configProviderInjectionKey: InjectionKey<ConfigProvider> = Symbol('ArcoConfigProvider');

frontend/src/components/pure/ms-table/type.ts

@@ -64,6 +64,8 @@ export interface MsTableProps {
   // 编辑的key，默认为name
   editKey?: string;
   [key: string]: any;
+  // 是否展示禁用的行
+  noDisable?: boolean;
 }
 
 export interface MsTableSelectAll {

frontend/src/store/modules/setting/types.ts

@@ -3,4 +3,6 @@ export interface UserGroupState {
   currentName: string;
   currentTitle: string;
   currentId: string;
+  // 当前用户类型
+  currentType: string;
 }

frontend/src/store/modules/setting/usergroup.ts

@@ -6,6 +6,7 @@ const useUserGroupStore = defineStore('userGroup', {
     currentName: '',
     currentTitle: '',
     currentId: '',
+    currentType: '',
   }),
   getters: {
     userGroupInfo(state: UserGroupState): UserGroupState {

frontend/src/views/setting/system/usergroup/components/authTable.vue

@@ -286,7 +286,6 @@
 <style scoped lang="less">
   .usergroup-auth-table {
     position: relative;
-    height: 100vh;
     :deep(.arco-table-container) {
       border-top: 1px solid var(--color-text-n8) !important;
       border-right: 1px solid var(--color-text-n8) !important;

frontend/src/views/setting/system/usergroup/components/index.vue

@@ -115,7 +115,7 @@
   const handleListItemClick = (element: UserGroupItem) => {
     const { id, name, type } = element;
     currentId.value = id;
-    store.setInfo({ currentName: name, currentTitle: type, currentId: id });
+    store.setInfo({ currentName: name, currentTitle: type, currentId: id, currentType: type });
   };
 
   // 用户组数据初始化

frontend/src/views/setting/system/usergroup/components/userTable.vue

@@ -32,7 +32,6 @@
       dataIndex: 'name',
       showDrag: false,
       showInTable: true,
-      editable: true,
     },
     {
       title: 'system.userGroup.email',
@@ -60,8 +59,9 @@
 
   const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(postUserByUserGroup, {
     tableKey: TableKeyEnum.USERGROUPUSER,
-    scroll: { y: 750, x: '600px' },
+    scroll: { y: 'auto', x: '600px' },
     selectable: true,
+    noDisable: true,
   });
 
   const fetchData = async () => {

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

@@ -17,7 +17,7 @@
                 <icon-search />
               </template>
             </a-input>
-            <a-radio-group v-model="currentTable" class="ml-[14px]" type="button">
+            <a-radio-group v-if="couldShowUser" v-model="currentTable" class="ml-[14px]" type="button">
               <a-radio value="auth">{{ t('system.userGroup.auth') }}</a-radio>
               <a-radio value="user">{{ t('system.userGroup.user') }}</a-radio>
             </a-radio-group>
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, computed } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
   import MsCard from '@/components/pure/ms-card/index.vue';
   import useUserGroupStore from '@/store/modules/setting/usergroup';
@@ -41,12 +41,13 @@
   import UserTable from './components/userTable.vue';
   import AuthTable from './components/authTable.vue';
 
-  const currentTable = ref('user');
+  const currentTable = ref('auth');
   const collapse = ref(true);
 
   const { t } = useI18n();
 
   const store = useUserGroupStore();
+  const couldShowUser = computed(() => store.userGroupInfo.currentType === 'SYSTEM');
 </script>
 
 <style lang="scss" scoped>