feats

config/defaultSettings.js

@@ -3,18 +3,16 @@ const Settings = {
   navTheme: 'dark',
   // 拂晓蓝
   primaryColor: '#1890ff',
-  layout: 'side',
   contentWidth: 'Fluid',
   fixedHeader: false,
   fixSiderbar: true,
   colorWeak: false,
-  title: '海安军供',
+  title: '', // 必须为空
   pwa: false,
-  logo: '/w2/logo.png',
   iconfontUrl: '',
-  splitMenus: false,
-  headerRender: false,
   footerRender: false,
+  layout: 'mix',
+  splitMenus: true,
 };
 
 export default Settings;

config/routes.js

@@ -1,18 +1,18 @@
 export default [
-  // {
-  //   path: '/user',
-  //   layout: false,
-  //   routes: [
-  //     {
-  //       name: 'login',
-  //       path: '/user/login',
-  //       component: './User/Login',
-  //     },
-  //     {
-  //       component: './404',
-  //     },
-  //   ],
-  // },
+  {
+    path: '/user',
+    layout: false,
+    routes: [
+      {
+        name: 'login',
+        path: '/user/login',
+        component: './User/Login',
+      },
+      {
+        component: './404',
+      },
+    ],
+  },
   // {
   //   path: '/welcome',
   //   name: 'welcome',

package.json

@@ -50,6 +50,7 @@
     "antd": "^4.20.0",
     "classnames": "^2.3.0",
     "lodash": "^4.17.0",
+    "md5": "^2.3.0",
     "moment": "^2.29.0",
     "omit.js": "^2.0.2",
     "rc-menu": "^9.1.0",

src/app.jsx

@@ -1,36 +1,41 @@
 import { requestConfig } from '@/utils/request';
+import { Link } from 'umi';
 import { history } from '@umijs/max';
+import RightContent from '@/components/RightContent';
 import { SettingDrawer } from '@ant-design/pro-components';
+import { queryCurrentUser } from '@/services/api/user';
+import logoImg from '@/assets/images/logo.png';
 import defaultSettings from '../config/defaultSettings';
 
 const isDev = process.env.NODE_ENV === 'development';
-// const loginPath = '/user/login';
+const loginPath = '/user/login';
 
 /**
  * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
  * */
 
 export async function getInitialState() {
-  // const fetchUserInfo = async () => {
-  //   try {
-  //     const msg = await queryCurrentUser();
-  //     return msg.data;
-  //   } catch (error) {
-  //     history.push(loginPath);
-  //   }
-  //   return undefined;
-  // };
-  // // 如果不是登录页面，执行
-  // if (history.location.pathname !== loginPath) {
-  //   const currentUser = await fetchUserInfo();
-  //   return {
-  //     fetchUserInfo,
-  //     currentUser,
-  //     settings: defaultSettings,
-  //   };
-  // }
+  const fetchUserInfo = async () => {
+    try {
+      const msg = await queryCurrentUser();
+      return msg;
+    } catch (error) {
+      history.push(loginPath);
+    }
+    return undefined;
+  };
+
+  // 如果不是登录页面，执行
+  if (history.location.pathname !== loginPath) {
+    const currentUser = await fetchUserInfo();
+    return {
+      fetchUserInfo,
+      currentUser,
+      settings: defaultSettings,
+    };
+  }
   return {
-    // fetchUserInfo,
+    fetchUserInfo,
     settings: defaultSettings,
   };
 }
@@ -38,7 +43,7 @@ export async function getInitialState() {
 // ProLayout 支持的api https://procomponents.ant.design/components/layout
 export const layout = ({ initialState, setInitialState }) => {
   const cfg = {
-    // rightContentRender: () => <RightContent />,
+    rightContentRender: () => <RightContent />,
     disableContentMargin: false,
     token: {
       sider: {
@@ -49,36 +54,33 @@ export const layout = ({ initialState, setInitialState }) => {
         colorTextMenuSelected: '#fff',
         colorTextMenuTitle: '#fff',
         colorTextMenu: 'hsla(0,0%,100%,.65);',
-        
-        // colorTextMenuTitle: string,
-        // colorTextCollapsedButtonHover: string,
-        // colorTextCollapsedButton: string,
-        // colorTextMenuSecondary: string,
-        // colorTextSubMenuSelected: string,
-        // colorBgMenuItemCollapsedHover: string,
-        // colorBgMenuItemCollapsedSelected: string,
+
       },
+      header: {
+        colorBgHeader: '#0D267C',
+        colorHeaderTitle: '#fff',
+        colorTextMenuActive: '#fff',
+        colorTextMenu: '#fff',
+        colorTextMenuSelected: '#fff',
+        colorBgMenuItemHover: '#4276F5',
+        colorBgMenuItemSelected: '#4276F5',
+        colorTextRightActionsItem: '#fff',
+        heightLayoutHeader: 64,
+      }
     },
     // waterMarkProps: {
     //   content: initialState?.currentUser?.name,
     // },
     // footerRender: () => <Footer />,
+    headerTitleRender: () => <Link to="/"><img src={logoImg} style={{ height: '42px' }} alt="" /></Link>,
     onPageChange: () => {
       const { location } = history;
 
       // 如果没有登录，重定向到 login
-      // if (!initialState?.currentUser && location.pathname !== loginPath) {
-      //   history.push(loginPath);
-      // }
+      if (!initialState?.currentUser && location.pathname !== loginPath) {
+        history.push(loginPath);
+      }
     },
-    // links: isDev
-    //   ? [
-    //       <Link key="openapi" to="/umi/plugin/openapi" target="_blank">
-    //         <LinkOutlined />
-    //         <span>OpenAPI 文档</span>
-    //       </Link>,
-    //     ]
-    //   : [],
     menuHeaderRender: undefined,
     // 自定义 403 页面
     // unAccessible: <div>unAccessible</div>,

src/components/RightContent/index.less

@@ -1,6 +1,6 @@
 @import (reference) '~antd/es/style/themes/index';
 
-@pro-header-hover-bg: rgba(0, 0, 0, 0.025);
+@pro-header-hover-bg: rgba(255, 255, 255, 0.025);
 
 .menu {
   :global(.anticon) {
@@ -41,11 +41,13 @@
     }
   }
   .account {
+    color: #fff;
+
     .avatar {
       margin-right: 8px;
       color: @primary-color;
       vertical-align: top;
-      background: rgba(255, 255, 255, 0.85);
+      // background: rgba(255, 255, 255, 0.85);
     }
   }
 }

src/global.less

@@ -17,6 +17,19 @@ body,
 .ant-layout {
   min-height: 100vh;
 }
+
+.ant-pro .ant-layout-header.ant-pro-layout-header {
+  padding: 0;
+}
+
+.ant-pro-top-nav-header-menu {
+  line-height: 64px !important;
+}
+
+.ant-pro-layout .ant-pro-top-nav-header-base-menu.ant-menu-light .ant-menu-item-selected {
+  border-radius: 0;
+}
+
 .ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
   left: unset;
 }

src/pages/User/Login/index.jsx

@@ -1,116 +1,71 @@
 import Footer from '@/components/Footer';
-import { login } from '@/services/api/login';
+import { login } from '@/services/api/user';
 import { LockOutlined, UserOutlined } from '@ant-design/icons';
 import { LoginForm, ProFormText } from '@ant-design/pro-components';
 import { history, useModel } from '@umijs/max';
-import { Alert, message, Tabs } from 'antd';
+import { Alert, message, Form, Button, Input } from 'antd';
 import { useState } from 'react';
-import styles from './index.less';
+import md5 from 'md5';
+import Logo from '@/assets/images/logo.png';
+import decorateLeft from '@/assets/images/login/装饰左.png';
+import decorateRight from '@/assets/images/login/装饰右.png';
+import './index.less';
 
-const LoginMessage = ({ content }) => {
-  return (
-    <Alert
-      style={{
-        marginBottom: 24,
-      }}
-      message={content}
-      type="error"
-      showIcon
-    />
-  );
-};
+const errStyle = {color: 'red', paddingBottom: '10px'}
 
 const Login = () => {
-  const [userLoginState, setUserLoginState] = useState({});
   const [type, setType] = useState('account');
   const { initialState, setInitialState } = useModel('@@initialState');
-
-  const fetchUserInfo = async () => {
-    const userInfo = await initialState?.fetchUserInfo?.();
-    if (userInfo) {
-      await setInitialState((s) => ({
-        ...s,
-        currentUser: userInfo,
-      }));
-    }
-  };
+  const [errMsg, setErrMsg] = useState()
 
   const handleSubmit = async (values) => {
     try {
       // 登录
-      const msg = await login({ params: values });
-      console.log(msg);
-      if (msg.success === 'true') {
-        const defaultLoginSuccessMessage = '登录成功！';
-        message.success(defaultLoginSuccessMessage);
-        await fetchUserInfo();
-        const urlParams = new URL(window.location.href).searchParams;
-        history.push(urlParams.get('redirect') || '/');
-        return;
-      }
+      const res = await login({ ...values, password: md5(values.password) });
+      console.log(res);
+
+      const defaultLoginSuccessMessage = '登录成功！';
+      message.success(defaultLoginSuccessMessage);
+      
+      setInitialState({
+        currentUser: res.user,
+      });
+      
+      const urlParams = new URL(window.location.href).searchParams;
+      history.push(urlParams.get('redirect') || '/');
+      return;
 
-      // 如果失败去设置用户错误信息
-      setUserLoginState(msg);
+      
     } catch (error) {
-      const defaultLoginFailureMessage = '登录失败，请重试！';
       console.log(error);
-      message.error(defaultLoginFailureMessage);
     }
   };
 
   return (
-    <div className={styles.container}>
-      <div className={styles.content}>
-        <LoginForm
-          // logo={<img alt="logo" src="/logo.svg" />}
-          title="军供"
-          onFinish={async (values) => {
-            await handleSubmit(values);
-          }}
-        >
-          <Tabs activeKey={type} onChange={setType}>
-            <Tabs.TabPane key="account" tab="账户密码登录" />
-          </Tabs>
-
-          {userLoginState.success === 'false' && (
-            <LoginMessage content={userLoginState.errorMessage} />
-          )}
-
-          <>
-            <ProFormText
-              name="account"
-              fieldProps={{
-                size: 'large',
-                prefix: <UserOutlined className={styles.prefixIcon} />,
-              }}
-              placeholder="admin"
-              // placeholder="请输入用户名"
-              rules={[
-                {
-                  required: true,
-                  message: '请输入用户名!',
-                },
-              ]}
-            />
-            <ProFormText.Password
-              name="password"
-              fieldProps={{
-                size: 'large',
-                prefix: <LockOutlined className={styles.prefixIcon} />,
-              }}
-              placeholder="123456"
-              // placeholder="请输入密码！"
-              rules={[
-                {
-                  required: true,
-                  message: '请输入密码！',
-                },
-              ]}
-            />
-          </>
-        </LoginForm>
-      </div>
-      <Footer />
+    <div className="page-container">
+      <Form name="login" id="login" onFinish={handleSubmit}>
+        <div className="form-left">
+          <img src={Logo} />
+        </div>
+        <div className="form-right">
+          <h2>用户登录</h2>
+          <div className="sub-title">
+            <img src={decorateLeft} alt="" />
+            <span>Welcome</span>
+            <img src={decorateRight} alt="" />
+          </div>
+          <div id="msg" style={errStyle}>{errMsg}</div>
+          <Form.Item className="input-control" name="userName" required>
+            <Input type="text" prefix={<UserOutlined />} className="form-control cust-input" placeholder="用户名" />
+          </Form.Item>
+          <Form.Item className="input-control" name="password" required>
+            <Input type="password" prefix={<LockOutlined />} className="form-control cust-input" placeholder="密码" />
+          </Form.Item>
+          <Form.Item className="form-group" style={{ marginBottom: '60px' }}>
+            <Button type="primary" className="btn-primary" htmlType="submit">登 录</Button>
+          </Form.Item>
+        </div>
+      </Form>
     </div>
   );
 };

src/pages/User/Login/index.less

@@ -1,48 +1,110 @@
-@import (reference) '~antd/es/style/themes/index';
 
-.container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: auto;
-  background: @layout-body-background;
+html, body {
+  height: 100%;
+  margin: 0;
 }
 
-.lang {
+.page-container {
   width: 100%;
-  height: 40px;
-  line-height: 44px;
-  text-align: right;
-  :global(.ant-dropdown-trigger) {
-    margin-right: 24px;
-  }
-}
+  height: 100%;
+  background-image: url(~@/assets/images/login/background.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-.content {
-  flex: 1;
-  padding: 32px 0;
-}
+  form {
+    flex: none;
+    width: 720px;
+    margin: 0 auto;
+    border-radius: 20px;
+    overflow: hidden;
+    background: transparent;
+    display: flex;
 
-@media (min-width: @screen-md-min) {
-  .container {
-    background-image: url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr');
-    background-size: cover;
-  }
+    .form-left {
+      flex: 2;
+      height: 480px;
+      background-image: url(~@/assets/images/login/小背景.png);
+      background-color: transparent;
+      background-repeat: no-repeat;
+      background-size: cover;
+      display: flex;
+      align-items: center;
 
-  .content {
-    padding: 32px 0 24px;
-  }
-}
+      img {
+        background: rgba(5,33,59,0.5);
+        padding: 16px 40px;
+      }
+    }
+
+    .form-right {
+      flex: 1;
+      background: #fff;
+      box-sizing: border-box;
+      padding: 0 1em;
+      padding-top: 40px;
+      overflow: hidden;
 
-.icon {
-  margin-left: 8px;
-  color: rgba(0, 0, 0, 0.2);
-  font-size: 24px;
-  vertical-align: middle;
-  cursor: pointer;
-  transition: color 0.3s;
+      h2 {
+        text-align: center;
+        font-size: 24px;
+        color: #0D267C;
+        line-height: 36px;
+      }
 
-  &:hover {
-    color: @primary-color;
+      .sub-title {
+        box-sizing: border-box;
+        padding: 0 1em;
+        font-size: 18px;
+        color: #0D267C;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        img {
+          width: 60px;
+          display: block;
+          box-sizing: border-box;
+          flex: none;
+        }
+        
+      }
+
+      .input-control {
+        margin-top: 2em;
+      }
+
+      .form-control.cust-input {
+        border-radius: 0;
+        border: none;
+        border-bottom: 1px solid #0D267C;
+        box-shadow: none;
+      }
+
+      .btn-primary {
+        display: inline-block;
+        margin-bottom: 0;
+        user-select: none;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        transition: .4s cubic-bezier(.175, .885, .32, 1);
+
+        padding: 10px 16px;
+        font-size: 17px;
+        line-height: 1.25;
+        border-radius: 4px;
+
+        color: #fff;
+        background-color: #0D267C;
+        border-color: #0D267C;
+
+        margin-top: 4em;
+        width: 100%;
+        height: auto;
+      }
+    }
   }
-}
+  
+}

src/services/api/user.js

@@ -0,0 +1,19 @@
+import { request } from '@umijs/max';
+
+/**
+ * 获取当前人员
+ * 
+ * showType 是 umi 封装的 request 参数, 0 代表不显示错误
+ * 
+ * @param {*} 
+ * @returns
+ */
+ export const queryCurrentUser = () => request('/users/current', { showType: 0 });
+
+ /**
+  * 登录
+  * @param {*} 
+  * @returns
+  */
+  export const login = (data) => request('/login', { data, method: 'post' });
+

src/utils/request.js

@@ -2,9 +2,7 @@ import { message } from 'antd';
 
 function requestInterceptor(url, options) {
   const headers = options.headers || {};
-  // const token = sessionStorage.getItem('token')
-  //   ? { Authorization: `Bearer ${sessionStorage.getItem('token')}` }
-  //   : {};
+  const token = sessionStorage.getItem('token') || '';
 
   return {
     // url,
@@ -13,27 +11,34 @@ function requestInterceptor(url, options) {
       ...options,
       headers: {
         ...headers,
-        // ...token,
+        Authorization: token,
       },
     },
   };
 }
 
 async function responseInterceptor(response) {
-  console.log(response, 'responseresponse');
-
   if (response.headers['content-type'] === 'application/vnd.ms-excel;charset=utf-8') {
-    console.log(response.data, 'data');
     return response;
   }
 
   const { data } = response;
   if (data.code === 1000) {
+    if (data.data.token) {
+      sessionStorage.setItem('token', data.data.token);
+    }
+
     return data;
   } else {
-    message.error(data.message || '系统错误');
+    if (response.config.showType !== 0) {
+      const errMsg = data.message || '系统错误';
+      message.error(errMsg.indexOf('exception') > -1 ? '服务异常' : errMsg);
+    }
   }
-  return Promise.reject(data);
+
+  console.error(response);
+
+  return Promise.reject(data.message || '系统错误');
 }
 
 export const requestConfig = {