Merge pull request #4 from ynnnny/main

style: modify style
Muxi-X · Sep 6, 2024 · 25c55f0 · 25c55f0
2 parents f67e33d + 00ee942
commit 25c55f0
Show file tree

Hide file tree

Showing 68 changed files with 3,580 additions and 3,310 deletions.
diff --git a/.commitlintrc.cjs b/.commitlintrc.cjs
@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']}
+module.exports = { extends: ['@commitlint/config-conventional'] };
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -2,13 +2,13 @@
 
 module.exports = {
   root: true,
-  env: {browser: true, es2020: true},
+  env: { browser: true, es2020: true },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'plugin:react-hooks/recommended',
-    "prettier"
+    'prettier',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -19,16 +19,17 @@ module.exports = {
   },
   plugins: ['react-refresh', 'prettier'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      {allowConstantExport: true},
-    ],
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     '@typescript-eslint/no-non-null-assertion': 'off',
-    "prettier/prettier": ["error", {}, {
-      usePrettierrc: true,
-      fileInfoOptions: {}
-    }],
-    "arrow-body-style": "off",
-    "prefer-arrow-callback": "off"
+    'prettier/prettier': [
+      'error',
+      {},
+      {
+        usePrettierrc: true,
+        fileInfoOptions: {},
+      },
+    ],
+    'arrow-body-style': 'off',
+    'prefer-arrow-callback': 'off',
   },
-}
+};
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
@@ -1,8 +1,8 @@
 module.exports = {
-    semi: true,
-    singleQuote: true,
-    "arrowParens": "always",
-    printWidth: 90,
-    tabWidth: 2,
-    endOfLine: 'auto',
+  semi: true,
+  singleQuote: true,
+  arrowParens: 'always',
+  printWidth: 90,
+  tabWidth: 2,
+  endOfLine: 'auto',
 };
diff --git a/README.md b/README.md
@@ -49,4 +49,3 @@
 然后通过**commitlint**进行提交规范的检查，`git commit -m "<type>(<scope>): <subject>"`
 
 [commit规范](https://juejin.cn/post/7091276495972204580)
-
diff --git a/index.html b/index.html
@@ -1,19 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="zh">
-<head>
-    <meta charset="UTF-8"/>
-    <link rel="icon" href="/muxilogo.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/muxilogo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MuxiFresh</title>
     <style>
-        * {
-            padding: 0;
-            margin: 0;
-        }
+      * {
+        padding: 0;
+        margin: 0;
+      }
     </style>
-</head>
-<body>
-<div id="root"></div>
-<script type="module" src="/src/main.tsx"></script>
-</body>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/src/components/Layout/Layout.less b/src/components/Layout/Layout.less
@@ -63,8 +63,6 @@
     .layoutLinkTestTitle:hover {
       color: #1d1507;
     }
-
-
   }
 
   .layoutBox {
@@ -79,4 +77,4 @@
       box-shadow: 0 5px 10px #d4d4d4;
     }
   }
-}
+}
diff --git a/src/pages/AuthorityManage/AdminFilter.ts b/src/pages/AuthorityManage/AdminFilter.ts
@@ -0,0 +1,15 @@
+export interface AdminFilter {
+  grade: string;
+  group: Group;
+  school: string;
+  status: string;
+}
+
+export enum Group {
+  All = 'All',
+  // Android = 'Android',
+  Backend = 'Backend',
+  Design = 'Design',
+  Frontend = 'Frontend',
+  Product = 'Product',
+}
diff --git a/src/pages/AuthorityManage/AuthorityManage.less b/src/pages/AuthorityManage/AuthorityManage.less
@@ -13,4 +13,8 @@
     border-radius: 0.5vw;
     padding: 5vh 0 5vh 0;
   }
-}
+}
+
+.selectGroup {
+  margin: 2vw;
+}
diff --git a/src/pages/AuthorityManage/AuthorityManage.tsx b/src/pages/AuthorityManage/AuthorityManage.tsx
@@ -5,14 +5,32 @@ import { get, post } from '../../fetch.ts';
 import { AdminList, AdminRow, ChangeUserType } from './AdminList.ts';
 import AdminLists from './components/AdminLists/AdminLists.tsx';
 import { useNavigate } from 'react-router-dom';
+import SelectGroup from './components/AdminLists/SelectGroup/SelectGroup.tsx';
+import { AdminFilter, Group } from './AdminFilter.ts';
 
 const AuthorityManage = () => {
+  const [adminFilter, setAdminFilter] = useState<AdminFilter>({
+    grade: '',
+    group: Group.Product,
+    school: '',
+    status: '',
+  });
   const [superAdmin, setSuperAdmin] = useState<AdminRow[]>([]);
   const [admin, setAdmin] = useState<AdminRow[]>([]);
   const [ordinary, setOrdinary] = useState<AdminRow[]>([]);
 
   const [loading, setLoading] = useState<boolean>(false);
 
+  const changeGroup = (group: Group) => {
+    setAdminFilter((preAdminFilter) => {
+      if (group === 'All') {
+        return preAdminFilter;
+      } else {
+        return { ...preAdminFilter, group: group };
+      }
+    });
+  };
+
   const navigate = useNavigate();
   const getUserList = (
     user_type: string,
@@ -68,31 +86,36 @@ const AuthorityManage = () => {
   };
 
   return (
-    <div className="authorityManageBox">
-      <div className={'authorityManage'}>
-        <AdminLists
-          header={'超级管理员'}
-          dataSource={superAdmin}
-          user_type={'super_admin'}
-          loading={loading}
-          changeUserIdentity={changeUserIdentity}
-        ></AdminLists>
-        <AdminLists
-          header={'管理员'}
-          dataSource={admin}
-          user_type={'admin'}
-          loading={loading}
-          changeUserIdentity={changeUserIdentity}
-        ></AdminLists>
-        <AdminLists
-          header={'普通成员'}
-          dataSource={ordinary}
-          user_type={'normal'}
-          loading={loading}
-          changeUserIdentity={changeUserIdentity}
-        ></AdminLists>
+    <>
+      <div className="authorityManageBox">
+        <div className="selectGroup">
+          <SelectGroup adminFilter={adminFilter} changeGroup={changeGroup}></SelectGroup>
+        </div>
+        <div className={'authorityManage'}>
+          <AdminLists
+            header={'超级管理员'}
+            dataSource={superAdmin}
+            user_type={'super_admin'}
+            loading={loading}
+            changeUserIdentity={changeUserIdentity}
+          ></AdminLists>
+          <AdminLists
+            header={'管理员'}
+            dataSource={admin}
+            user_type={'admin'}
+            loading={loading}
+            changeUserIdentity={changeUserIdentity}
+          ></AdminLists>
+          <AdminLists
+            header={'普通成员'}
+            dataSource={ordinary}
+            user_type={'normal'}
+            loading={loading}
+            changeUserIdentity={changeUserIdentity}
+          ></AdminLists>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/src/pages/AuthorityManage/components/AdminLists/SelectGroup/SelectGroup.less b/src/pages/AuthorityManage/components/AdminLists/SelectGroup/SelectGroup.less
@@ -0,0 +1,31 @@
+.reviewGroupSelect {
+  width: 20vw;
+  height: 540px;
+  margin-top: 3vh;
+  border-radius: 0.5vw;
+  box-shadow: 0 5px 10px #d4d4d4;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: space-evenly;
+  flex-direction: column;
+  color: #818181;
+  font-size: 1.2vw;
+  transform: translateY(-11%);
+
+  .reviewGroupSelectTitle {
+    padding: 0 2.5vw;
+    box-sizing: border-box;
+  }
+
+  .reviewGroups {
+    height: 8vh;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    color: #818181;
+    padding-left: 2.5vw;
+    box-sizing: border-box;
+    font-size: 1.08vw;
+    cursor: pointer;
+  }
+}
diff --git a/src/pages/AuthorityManage/components/AdminLists/SelectGroup/SelectGroup.tsx b/src/pages/AuthorityManage/components/AdminLists/SelectGroup/SelectGroup.tsx
@@ -0,0 +1,63 @@
+import './SelectGroup.less';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Group, AdminFilter } from '../../../AdminFilter';
+import { ConfigProvider, Menu } from 'antd';
+
+type ReviewGroupSelectProps = {
+  adminFilter: AdminFilter;
+  changeGroup(group: Group): void;
+};
+
+const SelectGroup: React.FC<ReviewGroupSelectProps> = ({ adminFilter, changeGroup }) => {
+  const groups = useMemo(
+    () => [Group.All, Group.Product, Group.Frontend, Group.Backend, Group.Design],
+    [],
+  );
+  const chineseGroups: { [key in Group]: string } = {
+    // Android: '安卓组',
+    All: '全部',
+    Backend: '后端组',
+    Design: '设计组',
+    Frontend: '前端组',
+    Product: '产品组',
+  };
+
+  const [selectedGroup, setSelectedGroup] = useState<Group>(adminFilter.group);
+
+  const handleChange = useCallback(
+    (group: Group) => {
+      setSelectedGroup(group);
+      changeGroup(group);
+    },
+    [changeGroup],
+  );
+
+  return (
+    <div className={'reviewGroupSelect'}>
+      <div className={'reviewGroupSelectTitle'}>选择组别</div>
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              itemHeight: 76,
+            },
+          },
+        }}
+      >
+        <Menu
+          // mode="inline"
+          selectedKeys={[selectedGroup]}
+          onClick={(e) => handleChange(e.key as Group)}
+          items={groups.map((group) => ({
+            key: group,
+            title: chineseGroups[group],
+            label: <div className={'reviewGroups'}>{chineseGroups[group]}</div>,
+          }))}
+          style={{ height: '400px', textAlign: 'center' }}
+        />
+      </ConfigProvider>
+    </div>
+  );
+};
+
+export default SelectGroup;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		module.exports = {extends: ['@commitlint/config-conventional']}
		module.exports = { extends: ['@commitlint/config-conventional'] };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -49,4 +49,3 @@
		然后通过commitlint进行提交规范的检查，`git commit -m "<type>(<scope>): <subject>"`

		[commit规范](https://juejin.cn/post/7091276495972204580)