hqweb端

2026-07-01 08:27:26 +08:00
parent 9f4577d3d8
commit 25f0d8e97b
56 changed files with 5298 additions and 2 deletions
@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, Card, Form, Input, message, Typography } from 'antd';
+import { saveAuth, request } from '../lib/api';
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [codeCooldown, setCodeCooldown] = useState(0);
+  const phone = Form.useWatch('phone', form);
+
+  async function sendCode() {
+    if (!phone) {
+      message.warning('请先输入手机号');
+      return;
+    }
+    await request('/admin/auth/sms/send', {
+      method: 'POST',
+      body: JSON.stringify({ phone, scene: 'HQ_LOGIN' }),
+    });
+    message.success('验证码已发送（Mock: 123456）');
+    setCodeCooldown(60);
+    const timer = setInterval(() => {
+      setCodeCooldown((c) => {
+        if (c <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return c - 1;
+      });
+    }, 1000);
+  }
+
+  async function onFinish(values: { phone: string; code: string }) {
+    setLoading(true);
+    try {
+      const data = await request<{ accessToken: string; refreshToken: string }>(
+        '/admin/auth/login/sms',
+        {
+          method: 'POST',
+          body: JSON.stringify(values),
+        },
+      );
+      saveAuth(data);
+      message.success('登录成功');
+      navigate('/');
+    } catch (e) {
+      message.error(e instanceof Error ? e.message : '登录失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#f5f5f5',
+      }}
+    >
+      <Card style={{ width: 400 }}>
+        <Typography.Title level={3} style={{ textAlign: 'center', marginBottom: 24 }}>
+          HQ 管理后台
+        </Typography.Title>
+        <Form form={form} layout="vertical" onFinish={onFinish} initialValues={{ phone: '13600000001', code: '123456' }}>
+          <Form.Item name="phone" label="手机号" rules={[{ required: true, message: '请输入手机号' }]}>
+            <Input placeholder="13600000001" maxLength={11} />
+          </Form.Item>
+          <Form.Item name="code" label="验证码" rules={[{ required: true, message: '请输入验证码' }]}>
+            <Input
+              placeholder="123456"
+              addonAfter={
+                <Button type="link" size="small" disabled={codeCooldown > 0} onClick={() => void sendCode()}>
+                  {codeCooldown > 0 ? `${codeCooldown}s` : '获取验证码'}
+                </Button>
+              }
+            />
+          </Form.Item>
+          <Button type="primary" htmlType="submit" block loading={loading}>
+            登录
+          </Button>
+        </Form>
+      </Card>
+    </div>
+  );
+}