From 2ed6104a2f523ec34fd53ae44b0a68dd32b7f79c Mon Sep 17 00:00:00 2001
From: RubyLiu <liulubingjava@163.com>
Date: Fri, 4 Aug 2023 15:31:22 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=88=86=E9=A1=B5=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/README.md                            |   8 ++
 frontend/src/assets/style/arco-reset.less     | 115 +++++++++---------
 .../components/pure/ms-pagination/utils.ts    |   2 +-
 frontend/src/components/pure/ms-table/type.ts |   2 +
 frontend/src/store/modules/setting/types.ts   |   2 +
 .../src/store/modules/setting/usergroup.ts    |   1 +
 .../system/usergroup/components/authTable.vue |   1 -
 .../system/usergroup/components/index.vue     |   2 +-
 .../system/usergroup/components/userTable.vue |   4 +-
 .../views/setting/system/usergroup/index.vue  |   7 +-
 10 files changed, 79 insertions(+), 65 deletions(-)

diff --git a/frontend/README.md b/frontend/README.md
index 4e8ebe9ad4..e99820df9f 100644
--- a/frontend/README.md
+++ b/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
+```
diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
index 1b61a1d7b0..1ccb77cecf 100644
--- a/frontend/src/assets/style/arco-reset.less
+++ b/frontend/src/assets/style/arco-reset.less
@@ -494,67 +494,68 @@
 }
 
 /** 分页 **/
-.arco-pagination {
+.ms-pagination {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 16px;
-}
-.arco-pagination-list {
-  display: flex;
-  flex-direction: row;
-}
-.arco-pagination-jumper {
-  padding: 2px 8px;
-  background: var(--color-text-n9);
-  .arco-pagination-jumper-input {
-    padding: 3px 8px;
-    width: 57px;
-    height: 28px;
-    border: 1px solid var(--color-text-input-border);
-    border-radius: 3px;
+  &-list {
+    display: flex;
+    flex-direction: row;
+  }
+  &-jumper {
+    display: flex;
+    align-items: center;
+    padding: 2px 8px;
+    width: 160px;
+    background: var(--color-text-n9);
+    gap: 8px;
+    .ms-pagination-jumper-input {
+      padding: 3px 8px;
+      width: 57px;
+      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;
+      }
+    }
+    &-text-goto,
+    &-total-page {
+      color: var(--color-text-2);
+    }
+  }
+  &-total {
+    margin-right: 16px !important;
+    color: var(--color-text-2) !important;
+  }
+  &-options {
+    margin-left: 0 !important;
+  }
+  &-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 5px 0;
+    width: 32px;
+    height: 32px;
     box-sizing: border-box;
+    &-previous {
+      margin-left: 14px !important;
+    }
+    &-ellipsis:hover {
+      width: 32px;
+      height: 32px;
+    }
+    &:not(:last-child):not(:first-child):not(.arco-pagination-item-ellipsis) {
+      border: 1px solid var(--color-text-input-border);
+    }
+    &-active {
+      border-color: rgb(var(--primary-5)) !important;
+      color: rgb(var(--primary-5)) !important;
+      background-color: rgb(var(--primary-1)) !important;
+    }
   }
 }
-.arco-pagination-jumper-total-page {
-  margin-right: 0;
-  margin-left: 8px;
-  color: var(--color-text-2);
-}
-.arco-pagination-simple .arco-pagination-jumper .arco-pagination-jumper-input {
-  width: 57px;
-}
-.arco-pagination-total {
-  color: var(--color-text-2) !important;
-}
-.arco-pagination-options {
-  margin-left: 0 !important;
-}
-.arco-pagination-total {
-  margin-right: 16px !important;
-}
-.arco-pagination-item-previous {
-  margin-left: 14px !important;
-}
-.arco-pagination-size-small .arco-pagination-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 5px 0;
-  width: 32px;
-  height: 32px;
-  box-sizing: border-box;
-}
-.arco-pagination-item-ellipsis:hover {
-  width: 32px;
-  height: 32px;
-}
-.arco-pagination-size-small
-  .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 {
-  border-color: rgb(var(--primary-5)) !important;
-  color: rgb(var(--primary-5)) !important;
-  background-color: rgb(var(--primary-1)) !important;
-}
diff --git a/frontend/src/components/pure/ms-pagination/utils.ts b/frontend/src/components/pure/ms-pagination/utils.ts
index 4579a2f722..25669893c5 100644
--- a/frontend/src/components/pure/ms-pagination/utils.ts
+++ b/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');
diff --git a/frontend/src/components/pure/ms-table/type.ts b/frontend/src/components/pure/ms-table/type.ts
index e667eb34f3..69b84997bd 100644
--- a/frontend/src/components/pure/ms-table/type.ts
+++ b/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 {
diff --git a/frontend/src/store/modules/setting/types.ts b/frontend/src/store/modules/setting/types.ts
index 2841938921..383893ab70 100644
--- a/frontend/src/store/modules/setting/types.ts
+++ b/frontend/src/store/modules/setting/types.ts
@@ -3,4 +3,6 @@ export interface UserGroupState {
   currentName: string;
   currentTitle: string;
   currentId: string;
+  // 当前用户类型
+  currentType: string;
 }
diff --git a/frontend/src/store/modules/setting/usergroup.ts b/frontend/src/store/modules/setting/usergroup.ts
index 5c0e0eb9dc..a90a11c50d 100644
--- a/frontend/src/store/modules/setting/usergroup.ts
+++ b/frontend/src/store/modules/setting/usergroup.ts
@@ -6,6 +6,7 @@ const useUserGroupStore = defineStore('userGroup', {
     currentName: '',
     currentTitle: '',
     currentId: '',
+    currentType: '',
   }),
   getters: {
     userGroupInfo(state: UserGroupState): UserGroupState {
diff --git a/frontend/src/views/setting/system/usergroup/components/authTable.vue b/frontend/src/views/setting/system/usergroup/components/authTable.vue
index 956751e142..320cf10068 100644
--- a/frontend/src/views/setting/system/usergroup/components/authTable.vue
+++ b/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;
diff --git a/frontend/src/views/setting/system/usergroup/components/index.vue b/frontend/src/views/setting/system/usergroup/components/index.vue
index 23b5253ed4..84dff1e296 100644
--- a/frontend/src/views/setting/system/usergroup/components/index.vue
+++ b/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 });
   };
 
   // 用户组数据初始化
diff --git a/frontend/src/views/setting/system/usergroup/components/userTable.vue b/frontend/src/views/setting/system/usergroup/components/userTable.vue
index 5c405ba73c..70c38d3e32 100644
--- a/frontend/src/views/setting/system/usergroup/components/userTable.vue
+++ b/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 () => {
diff --git a/frontend/src/views/setting/system/usergroup/index.vue b/frontend/src/views/setting/system/usergroup/index.vue
index 1bad2aaeac..740d5194f2 100644
--- a/frontend/src/views/setting/system/usergroup/index.vue
+++ b/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>