login

.umirc.ts

@@ -26,14 +26,4 @@ export default defineConfig({
       // target: 'http://120.55.44.4:8900/',
     },
   },
-});
-
-// axios配置
-export const request = {
-  // errorConfig: {
-  //   errorHandler() {},
-  //   errorThrower() {},
-  // },
-  // requestInterceptors: [],
-  // responseInterceptors: [],
-};
+});

src/Frameworks/SysRouter.ts

@@ -37,6 +37,7 @@ export const route: GT.IRouterOptions[] = [
       top: 0,
       width: '100%',
       height: '100%',
+      header: false,
     },
   },
 ];

src/Project/pages/Login/index.js

@@ -2,6 +2,9 @@ import React, { Component } from 'react';
 import { connect } from 'umi';
 import { Checkbox, Form, Select, Input, Button } from 'antd';
 import { queryDepList } from '@/Project/services/user';
+import styles from './index.less';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+
 const { Option } = Select;
 
 class LoginPage extends Component {
@@ -15,8 +18,7 @@ class LoginPage extends Component {
     super(props);
     this.formRef = React.createRef();
   }
-  componentDidMount = () => {
-  };
+  componentDidMount = () => {};
   onHandleChange = async (name) => {
     var res = await queryDepList(name);
     this.setState({
@@ -40,61 +42,74 @@ class LoginPage extends Component {
         type,
       },
       callback: () => {
-        this.props.params.gotoA()
-      }
+        this.props.params.gotoA();
+      },
     });
   };
 
   render() {
     const { depList, hasName } = this.state;
-    const { submitting, form } = this.props;
+    const { submitting } = this.props;
     return (
-      <div style={{ margin: '200px auto', width: '40%' }}>
-        <Form
-          name="basic"
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 16 }}
-          onFinish={this.handleSubmit}
-          autoComplete="new-password"
-          ref={this.formRef}
-        >
-          <Form.Item
-            label="用户名"
-            name="username"
-            autoComplete="off"
-            rules={[{ required: true, message: '请输入用户名' }]}
+      <div className={styles.main}>
+        <div className={styles.content}>
+          <Form
+            name="basic"
+            className={styles.inp_box}
+            labelCol={{ span: 0 }}
+            wrapperCol={{ span: 24 }}
+            onFinish={this.handleSubmit}
+            autoComplete="new-password"
+            ref={this.formRef}
           >
-            <Input
-              autoComplete="new-password"
-              onBlur={(e) => this.onHandleChange(e.target.value)}
-            />
-          </Form.Item>
-          {hasName && (
             <Form.Item
-              label="部门"
-              name="DepId"
+              label=""
+              name="username"
+              autoComplete="off"
               rules={[{ required: true, message: '请输入用户名' }]}
             >
-              <Select placeholder="请选择部门">
-                {depList.map((item) => (
-                  <Option value={item.ID + ''} key={item.ID}>
-                    {item.Name}
-                  </Option>
-                ))}
-              </Select>
+              <Input
+                prefix={<UserOutlined className={styles.prefixIcon} />}
+                className={styles.inp}
+                size="large"
+                autoComplete="off"
+                placeholder="请输入用户名"
+                onBlur={(e) => this.onHandleChange(e.target.value)}
+              />
             </Form.Item>
-          )}
+            {hasName && (
+              <Form.Item
+                label=""
+                name="DepId"
+                rules={[{ required: true, message: '请输入用户名' }]}
+              >
+                <Select placeholder="请选择部门" size="large">
+                  {depList.map((item) => (
+                    <Option value={item.ID + ''} key={item.ID}>
+                      {item.Name}
+                    </Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            )}
 
-          <Form.Item
-            label="密码"
-            // 不使用password，防止浏览器自动填充表单
-            name="password2"
-            rules={[{ required: true, message: '请输入密码' }]}
-          >
-            <Input.Password autoComplete="new-password" />
-          </Form.Item>
+            <Form.Item
+              label=""
+              // 不使用password，防止浏览器自动填充表单
+              name="password2"
+              className={styles.inp}
+              rules={[{ required: true, message: '请输入密码' }]}
+            >
+              <Input.Password
+                prefix={<LockOutlined className={styles.prefixIcon} />}
+                className={styles.inp}
+                size="large"
+                placeholder="请输入密码"
+                autoComplete="new-password"
+              />
+            </Form.Item>
 
-          {/* <Form.Item
+            {/* <Form.Item
             name="remember"
             valuePropName="checked"
             wrapperCol={{ offset: 8, span: 16 }}
@@ -102,12 +117,19 @@ class LoginPage extends Component {
             <Checkbox>自动登录</Checkbox>
           </Form.Item> */}
 
-          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-            <Button loading={submitting} type="primary" htmlType="submit">
-              登录
-            </Button>
-          </Form.Item>
-        </Form>
+            <Form.Item>
+              <Button
+                size="large"
+                style={{ width: '100%', marginTop: 24 }}
+                loading={submitting}
+                type="primary"
+                htmlType="submit"
+              >
+                登录
+              </Button>
+            </Form.Item>
+          </Form>
+        </div>
       </div>
     );
   }

src/Project/pages/Login/index.less

@@ -1,11 +1,37 @@
 // @import '~antd/lib/style/themes/default.less';
-
 .main {
+  width: 100%;
+  height: 100%;
+  padding: 32px 0 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url('@/Project/assets/login-bg.png');
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: 100%;
+}
+
+.prefixIcon {
+  // position: absolute;
+  // top: 50%;
+  // z-index: 2;
+  // display: flex;
+  // align-items: center;
+  color: #42a0e0;
+  font-size: 18px;
+  // line-height: 0;
+  // transform: translateY(-50%);
+  // padding-left: 18px;
+}
+
+.content {
   width: 428px;
   height: 495px;
   border-radius: 8px;
   padding-top: 162px;
-  // background: #fff url('../../assets/login-box-top.png') no-repeat top center;
+  background: #fff url('@/Project/assets/login-box-top.png') no-repeat top center;
+
   @media screen and (max-width: 576px) {
     width: 95%;
   }
@@ -14,6 +40,7 @@
     width: 80%;
     margin: 0 auto;
     padding-top: 40px;
+
     a {
       color: #999;
     }
@@ -21,18 +48,17 @@
 
   .inp {
     input {
-      border: 0 none;
-      outline-style: none;
-      border-bottom: 1px solid #D8D8D8;
       border-radius: 0px;
-      padding-left: 38px !important;
+      padding: 2px 4px;
     }
+
     i {
       color: #42a0e0;
       font-size: 18px;
     }
   }
 
+
   .icon {
     margin-left: 16px;
     color: rgba(0, 0, 0, 0.2);
@@ -55,4 +81,4 @@
       float: right;
     }
   }
-}
+}

src/Project/pages/global.less

@@ -0,0 +1,3 @@
+* {
+  box-sizing: border-box;
+}

src/Project/pages/home.tsx

@@ -1,6 +1,6 @@
 import { connect } from 'umi';
 import React from 'react';
-import { Button } from 'antd';
+import './global.less';
 import Router from '@/Frameworks/SysRouter';
 import Os from '../Os';
 

src/Project/services/user.ts

@@ -18,7 +18,7 @@ export async function Logout() {
 }
 export async function queryDepList(userName: string) {
   return request(`/api/v2/user/dep`, {
-    data: { userName },
+    params: { userName },
   });
 }
 

src/app.ts

@@ -1,5 +1,8 @@
 // 运行时配置
+import type { RequestConfig } from 'umi';
 import { queryCurrent, queryAccess } from '@/Project/services/user';
+import { LocalService } from './Engine/Storage';
+import { SysStorage } from './Frameworks/SysStorage';
 // 全局初始化数据配置，用于 Layout 用户信息和权限初始化
 // 更多信息见文档：https://next.umijs.org/docs/api/runtime-config#getinitialstate
 export async function getInitialState(): Promise<any> {
@@ -8,3 +11,14 @@ export async function getInitialState(): Promise<any> {
 
   return { currentUser: {}, access: {}, projectId: 0 };
 }
+
+// axios配置
+export const request: RequestConfig = {
+  headers: { 'JWT-TOKEN': LocalService.getItem(SysStorage.token) },
+  // errorConfig: {
+  //   errorHandler() {},
+  //   errorThrower() {},
+  // },
+  // requestInterceptors: [],
+  // responseInterceptors: [],
+};