左侧菜单和右上角管理员模块优化

src/compenents/header/index.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import styles from "./index.module.less";
-import { Layout, Button, Dropdown, MenuProps } from "antd";
+import { Layout, Button, Dropdown, MenuProps, Image } from "antd";
 import { useSelector } from "../../store/hooks";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { LoginOutActionCreator } from "../../store/user/userActions";
+import avatar from "../../assets/images/commen/avatar.png";
+import edit from "../../assets/images/commen/edit.png";
+import logout from "../../assets/images/commen/logout.png";
+import { PoweroffOutlined, UnlockOutlined } from "@ant-design/icons";
 
 export const Header: React.FC = () => {
   const dispatch = useDispatch();
@@ -23,10 +27,12 @@ export const Header: React.FC = () => {
     {
       label: "修改密码",
       key: "change_password",
+      icon: <UnlockOutlined style={{ color: "#ff4d4f" }} />,
     },
     {
       label: "退出登录",
       key: "login_out",
+      icon: <PoweroffOutlined style={{ color: "#ff4d4f" }} />,
     },
   ];
   return (
@@ -35,8 +41,14 @@ export const Header: React.FC = () => {
         <div></div>
         <Button.Group className={styles["button-group"]}>
           <Dropdown menu={{ items, onClick }} placement="bottomRight">
-            <Button type="link" danger>
+            <Button type="link">
-              {user.name}
+              <Image
+                preview={false}
+                width={30}
+                height={30}
+                src={avatar}
+              ></Image>
+              <span className="ml-8 c-default">{user.name}</span>
             </Button>
           </Dropdown>
         </Button.Group>

src/compenents/left-menu/index.tsx

@@ -21,19 +21,13 @@ function getItem(label: any, key: any, icon: any, children: any, type: any) {
 }
 const items = [
   getItem("首页概览", "/", <SettingOutlined />, null, null),
-  getItem(
+  getItem("分类管理", "/resource-category", <MailOutlined />, null, null),
-    "课程内容",
+  getItem("课程管理", "/course", <AppstoreOutlined />, null, null),
-    "8",
-    <AppstoreOutlined />,
-    [getItem("课程", "/course", null, null, null)],
-    null
-  ),
   getItem(
     "资源管理",
     "3",
     <MailOutlined />,
     [
-      getItem("资源分类", "/resource-category", null, null, null),
       getItem("视频", "/videos", null, null, null),
       getItem("图片", "/images", null, null, null),
     ],
@@ -43,21 +37,20 @@ const items = [
     "学员管理",
     "4",
     <AppstoreOutlined />,
-    [getItem("学员", "/member", null, null, null)],
+    [
-    null
+      getItem("学员", "/member", null, null, null),
-  ),
+      getItem("部门", "/department", null, null, null),
-  getItem(
+    ],
-    "部门管理",
-    "7",
-    <AppstoreOutlined />,
-    [getItem("部门", "/department", null, null, null)],
     null
   ),
   getItem(
     "系统设置",
     "6",
     <SettingOutlined />,
-    [getItem("管理人员", "/system/administrator", null, null, null)],
+    [
+      getItem("管理人员", "/system/administrator", null, null, null),
+      getItem("角色配置", "/system/adminroles", null, null, null),
+    ],
     null
   ),
 ];
@@ -85,7 +78,6 @@ export const LeftMenu: React.FC = () => {
         style={{
           width: 200,
           background: "#ffffff",
-     
         }}
         openKeys={openKeys}
         onOpenChange={onOpenChange}

src/index.less

@@ -12,6 +12,10 @@ code {
     monospace;
 }
 
+.ml-8 {
+  margin-left: 8px;
+}
+
 .mt-10 {
   margin-top: 10px;
 }
@@ -78,6 +82,13 @@ code {
   flex-direction: column;
 }
 
+.c-default{
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(0,0,0,0.88);
+  line-height: 22px;
+}
+
 .primary {
   color: #ff4d4f;
 }

src/pages/login/index.tsx

@@ -17,7 +17,7 @@ import "./login.less";
 export const Login: React.FC = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
   const [image, setImage] = useState<string>("");
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
@@ -50,13 +50,15 @@ export const Login: React.FC = () => {
   };
 
   const handleSubmit = () => {
+    if (loading) {
+      return;
+    }
     setLoading(true);
     login
       .login(email, password, captcha_key, captcha_val)
       .then((res: any) => {
         const token = res.data.token;
         setToken(token);
-
         getUser();
       })
       .catch((e) => {

src/pages/system/administrator/create.tsx

@@ -4,7 +4,6 @@ import styles from "./create.module.less";
 import { adminUser } from "../../../api/index";
 import { useNavigate } from "react-router-dom";
 import { BackBartment } from "../../../compenents";
-import { PerButton } from "../../../compenents";
 
 export const AdministratorCreatePage: React.FC = () => {
   const navigate = useNavigate();
@@ -80,24 +79,14 @@ export const AdministratorCreatePage: React.FC = () => {
               autoComplete="off"
             >
               <Form.Item label="角色" name="roleIds">
-                <div className="d-flex">
+                <Select
-                  <Select
+                  style={{ width: 300 }}
-                    style={{ width: 300 }}
+                  mode="multiple"
-                    mode="multiple"
+                  allowClear
-                    allowClear
+                  placeholder="请选择角色"
-                    placeholder="请选择角色"
+                  onChange={handleChange}
-                    onChange={handleChange}
+                  options={roles}
-                    options={roles}
+                />
-                  />
-                  <PerButton
-                    type="link"
-                    text="角色管理"
-                    class="c-red"
-                    icon={null}
-                    p="admin-role"
-                    onClick={() => navigate(`/system/adminroles`)}
-                  />
-                </div>
               </Form.Item>
               <Form.Item
                 label="姓名"

src/pages/system/administrator/update.tsx

@@ -4,7 +4,6 @@ import styles from "./update.module.less";
 import { adminUser } from "../../../api/index";
 import { useParams, useNavigate } from "react-router-dom";
 import { BackBartment } from "../../../compenents";
-import { PerButton } from "../../../compenents";
 
 export const AdministratorUpdatePage: React.FC = () => {
   const params = useParams();
@@ -98,24 +97,14 @@ export const AdministratorUpdatePage: React.FC = () => {
               autoComplete="off"
             >
               <Form.Item label="角色" name="roleIds">
-                <div className="d-flex">
+                <Select
-                  <Select
+                  style={{ width: 300 }}
-                    style={{ width: 300 }}
+                  mode="multiple"
-                    mode="multiple"
+                  allowClear
-                    allowClear
+                  placeholder="请选择角色"
-                    placeholder="请选择角色"
+                  onChange={handleChange}
-                    onChange={handleChange}
+                  options={roles}
-                    options={roles}
+                />
-                  />
-                  <PerButton
-                    type="link"
-                    text="角色管理"
-                    class="c-red"
-                    icon={null}
-                    p="admin-role"
-                    onClick={() => navigate(`/system/adminroles`)}
-                  />
-                </div>
               </Form.Item>
               <Form.Item
                 label="姓名"

src/pages/system/adminroles/index.tsx

@@ -6,7 +6,6 @@ import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
 import { adminRole } from "../../../api/index";
 import { dateFormat } from "../../../utils/index";
 import { Link, useNavigate } from "react-router-dom";
-import { BackBartment } from "../../../compenents";
 
 interface DataType {
   id: React.Key;
@@ -89,9 +88,6 @@ export const SystemAdminrolesPage: React.FC = () => {
   return (
     <>
       <div className="playedu-main-body">
-        <div className="float-left mb-24">
-          <BackBartment title="管理员角色" />
-        </div>
         <div className="float-left j-b-flex mb-24">
           <div className="d-flex">
             <Link