feat: 1. 增加Demo登录 2. 降级Demo账号 3.屏蔽antd主题hash生成

JackySoft · Sep 3, 2024 · 3359739 · 3359739
1 parent e2c7cea
commit 3359739
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 27 deletions.
diff --git a/packages/admin/src/layout/layout.tsx b/packages/admin/src/layout/layout.tsx
@@ -93,6 +93,7 @@ const AdminLayout = () => {
         token: {
           colorPrimary: projectInfo.system_theme_color || '#1677ff',
         },
+        hashed: false,
       }}
     >
       <Layout>

diff --git a/packages/admin/src/pages/login/Login.tsx b/packages/admin/src/pages/login/Login.tsx
@@ -1,5 +1,5 @@
 import type { FormProps } from 'antd';
-import { Button, Form, Input } from 'antd';
+import { Button, Flex, Form, Input } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { login } from '@/api';
 import storage from '@/utils/storage';
@@ -13,6 +13,7 @@ type FieldType = {
 export default function Login() {
   const navigate = useNavigate();
   const saveUserInfo = usePageStore((state) => state.saveUserInfo);
+  const [form] = Form.useForm();
   const onFinish: FormProps<FieldType>['onFinish'] = async (values: FieldType) => {
     const res = await login<FieldType>(values);
     if (res.token) {
@@ -40,28 +41,31 @@ export default function Login() {
             <img src="/imgs/mars-logo.png" width={45} />
             <span>Marsview</span>
           </div>
-          <Form
-            name="basic"
-            layout="vertical"
-            className={style.form}
-            onFinish={onFinish}
-            initialValues={{ userName: '[email protected]', userPwd: 'marsview' }}
-            autoComplete="off"
-            size="large"
-          >
+          <Form name="basic" layout="vertical" className={style.form} onFinish={onFinish} autoComplete="off" size="large" form={form}>
             <Form.Item<FieldType> name="userName" rules={[{ required: true, message: '请输入邮箱' }]}>
-              <Input prefix={<UserOutlined />} />
+              <Input prefix={<UserOutlined />} allowClear placeholder="输入个人邮箱" />
             </Form.Item>
 
             <Form.Item<FieldType> style={{ marginTop: 32 }} name="userPwd" rules={[{ required: true, message: '请输入密码' }]}>
-              <Input.Password prefix={<LockOutlined />} />
+              <Input.Password prefix={<LockOutlined />} placeholder="输入密码" allowClear />
             </Form.Item>
 
             <Form.Item style={{ marginTop: 40 }}>
               <Button type="primary" block htmlType="submit">
                 登录
               </Button>
             </Form.Item>
+            <Form.Item>
+              <Flex justify="center" gap={20}>
+                <a
+                  onClick={() => {
+                    form.setFieldsValue({ userName: '[email protected]', userPwd: 'marsview' });
+                  }}
+                >
+                  没有账号？使用体验号
+                </a>
+              </Flex>
+            </Form.Item>
           </Form>
         </div>
       </div>

diff --git a/packages/admin/src/pages/page/index.tsx b/packages/admin/src/pages/page/index.tsx
@@ -53,6 +53,7 @@ export default function () {
           colorLink: theme,
           colorInfo: theme,
         },
+        hashed: false,
       }}
     >
       <Page />

diff --git a/packages/editor/src/App.tsx b/packages/editor/src/App.tsx
@@ -20,6 +20,7 @@ function App() {
           colorLink: '#7D33FF',
           colorInfo: '#7D33FF',
         },
+        hashed: false,
       }}
     >
       <AntdApp>

diff --git a/packages/editor/src/pages/login/Demo.tsx b/packages/editor/src/pages/login/Demo.tsx
@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react';
+import type { FormProps } from 'antd';
+import { Button, Flex, Form, Input, InputNumber, Space } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import { login, sendEmail, regist } from '@/api/user';
+import storage from '@/utils/storage';
+import { usePageStore } from '@/stores/pageStore';
+import { LockOutlined, SafetyOutlined, UserOutlined } from '@ant-design/icons';
+import style from './index.module.less';
+type FieldType = {
+  userName: string;
+  code?: number;
+  userPwd: string;
+};
+export default function Login() {
+  const [type, setType] = useState('login');
+  const [count, setCount] = useState(0);
+  const [loading1, setLoading1] = useState(false);
+  const [loading2, setLoading2] = useState(false);
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+  const saveUserInfo = usePageStore((state) => state.saveUserInfo);
+
+  // 生成验证码
+  const handleCreateCode = () => {
+    form.validateFields(['userName']).then(async ({ userName }) => {
+      setLoading1(true);
+      try {
+        await sendEmail({ email: userName });
+        setCount(60);
+        setLoading1(false);
+      } catch (error) {
+        setLoading1(false);
+      }
+    });
+  };
+
+  // 登录或注册
+  const onFinish: FormProps<FieldType>['onFinish'] = async (values: FieldType) => {
+    setLoading2(true);
+    try {
+      const res = await login<FieldType>(values);
+      setLoading2(false);
+      if (res.token) {
+        storage.set('token', res.token);
+        saveUserInfo(res);
+        if (location.search) {
+          const params = new URLSearchParams(location.search);
+          setTimeout(() => {
+            const url = new URL(params.get('callback') as string);
+            navigate(url.pathname || '/projects');
+          });
+        } else {
+          navigate('/projects');
+        }
+      }
+    } catch (error) {
+      setLoading2(false);
+    }
+  };
+  return (
+    <div className={style.container}>
+      <div className={style.login}>
+        <div className={style.left}>
+          <img src="/imgs/login-bg.png" />
+        </div>
+        <div className={style.form}>
+          <div className={style.title}>
+            <span>Demo体验</span>
+          </div>
+          <Form
+            name="basic"
+            layout="vertical"
+            className={style.form}
+            initialValues={{
+              userName: '[email protected]',
+              userPwd: 'marsview',
+            }}
+            onFinish={onFinish}
+            size="large"
+            form={form}
+          >
+            <Form.Item<FieldType>
+              name="userName"
+              rules={[
+                { required: true, message: '请输入邮箱' },
+                { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '请输入正确的邮箱' },
+              ]}
+            >
+              <Input prefix={<UserOutlined />} placeholder="请输入个人邮箱" autoComplete="off" allowClear />
+            </Form.Item>
+
+            <Form.Item<FieldType> style={{ marginTop: 32 }} name="userPwd" rules={[{ required: true, message: '请输入密码' }]}>
+              <Input.Password prefix={<LockOutlined />} autoComplete="off" allowClear />
+            </Form.Item>
+
+            <Form.Item style={{ marginTop: 40 }}>
+              <Button type="primary" block htmlType="submit" loading={loading2}>
+                体验号登录
+              </Button>
+            </Form.Item>
+            <Form.Item style={{ marginTop: 40 }}>
+              <Flex justify="center" gap={20}>
+                <a
+                  onClick={() => {
+                    navigate('/login');
+                  }}
+                >
+                  返回注册
+                </a>
+              </Flex>
+            </Form.Item>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/editor/src/pages/login/Login.tsx b/packages/editor/src/pages/login/Login.tsx
@@ -24,6 +24,10 @@ export default function Login() {
   // 类型切换
   const onChange = () => {
     setType(type == 'login' ? 'regist' : 'login');
+    form.setFieldsValue({
+      userName: '',
+      userPwd: '',
+    });
   };
 
   // 生成验证码
@@ -87,26 +91,17 @@ export default function Login() {
               <span>Marsview</span>
             </div>
           ) : (
-            <div className={style.title}>账号注册</div>
+            <div className={style.title}>邮箱注册</div>
           )}
-          <Form
-            name="basic"
-            layout="vertical"
-            className={style.form}
-            onFinish={onFinish}
-            initialValues={{ userName: '[email protected]', userPwd: 'marsview' }}
-            autoComplete="off"
-            size="large"
-            form={form}
-          >
+          <Form name="basic" layout="vertical" className={style.form} onFinish={onFinish} size="large" form={form}>
             <Form.Item<FieldType>
               name="userName"
               rules={[
                 { required: true, message: '请输入邮箱' },
                 { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '请输入正确的邮箱' },
               ]}
             >
-              <Input prefix={<UserOutlined />} placeholder="请输入个人邮箱" />
+              <Input prefix={<UserOutlined />} placeholder="请输入个人邮箱" autoComplete="off" allowClear />
             </Form.Item>
 
             {type === 'regist' && (
@@ -123,7 +118,7 @@ export default function Login() {
             )}
 
             <Form.Item<FieldType> style={{ marginTop: 32 }} name="userPwd" rules={[{ required: true, message: '请输入密码' }]}>
-              <Input.Password prefix={<LockOutlined />} />
+              <Input.Password prefix={<LockOutlined />} autoComplete="off" allowClear />
             </Form.Item>
 
             <Form.Item style={{ marginTop: 40 }}>
@@ -132,9 +127,16 @@ export default function Login() {
               </Button>
             </Form.Item>
             <Form.Item style={{ marginTop: 40 }}>
-              <div style={{ textAlign: 'center' }}>
+              <Flex justify="center" gap={20}>
                 <a onClick={onChange}>{type === 'login' ? '没有账号？去注册' : '已有账号？去登录'}</a>
-              </div>
+                <a
+                  onClick={() => {
+                    navigate('/demo');
+                  }}
+                >
+                  体验 Demo
+                </a>
+              </Flex>
             </Form.Item>
           </Form>
         </div>

diff --git a/packages/editor/src/router/index.tsx b/packages/editor/src/router/index.tsx
@@ -40,6 +40,10 @@ export const router = [
     path: '/login',
     element: lazyLoad(React.lazy(() => import('@/pages/login/Login'))),
   },
+  {
+    path: '/demo',
+    element: lazyLoad(React.lazy(() => import('@/pages/login/Demo'))),
+  },
   {
     path: '/',
     loader: AuthLoader,