From 6df0b4e0cf1b3d850496e4a7be4ce8fe117a61d9 Mon Sep 17 00:00:00 2001
From: xion <xiongxiao1012@outlook.com>
Date: Sat, 19 Oct 2024 17:33:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20login=20=E4=BF=AE=E6=94=B9=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0redirect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/user/login/Login.tsx | 57 ++++++++++++++++++++--------------
 src/pages/user/store/login.ts  | 12 +++++--
 src/utils/extra.ts             |  5 +++
 3 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/src/pages/user/login/Login.tsx b/src/pages/user/login/Login.tsx
index 7a1a99c..04b2154 100644
--- a/src/pages/user/login/Login.tsx
+++ b/src/pages/user/login/Login.tsx
@@ -3,6 +3,7 @@ import { useLoginStore } from '../store/login';
 import { useShallow } from 'zustand/react/shallow';
 import { useEffect } from 'react';
 import { isObjectNull } from '@/utils/is-null';
+import { LockOutlined, UserOutlined } from '@ant-design/icons';
 export const Login = () => {
   const [form] = Form.useForm();
   const loginStore = useLoginStore(
@@ -27,30 +28,38 @@ export const Login = () => {
     loginStore.login();
   };
   return (
-    <div className='flex w-full h-full bg-slate-200'>
-      <div className='w-[600px] mx-auto mt-[10%]  '>
-        <h1 className='mb-4 tracking-widest'>Login</h1>
-        <div className='card border-t-2 pt-8 px-8'>
-          <Form
-            form={form}
-            onFinish={onFinish}
-            labelCol={{
-              span: 4,
-            }}>
-            <Form.Item label='username' name='username'>
-              <Input />
-            </Form.Item>
-            <Form.Item label='password' name='password'>
-              <Input type='password' />
-            </Form.Item>
-            <Form.Item label=' ' colon={false}>
-              <div className='flex gap-2'>
-                <Button type='primary' htmlType='submit'>
-                  Login
-                </Button>
-              </div>
-            </Form.Item>
-          </Form>
+    <div className='bg-slate-200 text-slate-900 w-full h-full overflow-hidden'>
+      <div className='w-full h-full absolute top-[10%] xl:top-[15%] 2xl:top-[18%] 3xl:top-[20%] '>
+        <div className='w-[400px] mx-auto'>
+          <h1 className='mb-4 tracking-widest text-center'>Login</h1>
+          <div className='card border-t-2 pt-8 px-8'>
+            <Form
+              className='mt-2'
+              form={form}
+              onFinish={onFinish}
+              labelCol={{
+                span: 6,
+              }}>
+              <Form.Item label='' name='username'>
+                <Input addonBefore={<UserOutlined />} placeholder='Username' />
+              </Form.Item>
+              <Form.Item label='' name='password'>
+                <Input type='password' addonBefore={<LockOutlined />} placeholder='Password' />
+              </Form.Item>
+              <Form.Item label='' colon={false}>
+                <div className='flex gap-2'>
+                  <Button
+                    type='primary'
+                    htmlType='submit'
+                    style={{
+                      background: '#84d5e8',
+                    }}>
+                    Login
+                  </Button>
+                </div>
+              </Form.Item>
+            </Form>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/pages/user/store/login.ts b/src/pages/user/store/login.ts
index 047dc1a..8258533 100644
--- a/src/pages/user/store/login.ts
+++ b/src/pages/user/store/login.ts
@@ -33,9 +33,15 @@ export const useLoginStore = create<LoginStore>((set, get) => {
         const { token } = res.data;
         message.success('Success');
         set({ isLogin: true });
-        localStorage.setItem('token', token);
-        // 跳到某一个页面，更新localStorage
-        history.push('/map');
+        query.saveToken(token);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        const search = new URLSearchParams(window.location.search);
+        const redirect = search.get('redirect');
+        if (redirect) {
+          window.location.href = redirect;
+        } else {
+          window.location.href = '/';
+        }
       } else {
         message.error(res.message || 'Request failed');
       }
diff --git a/src/utils/extra.ts b/src/utils/extra.ts
index 70727c0..6128de0 100644
--- a/src/utils/extra.ts
+++ b/src/utils/extra.ts
@@ -1,3 +1,8 @@
+/**
+ * 提取 {{}} 中的 key
+ * @param text
+ * @returns
+ */
 export function extractKeysFromBraces(text: string) {
   const regex = /\{\{\s*(.*?)\s*\}\}/g;
   const keys: string[] = [];