超管用户登录；

代码核销功能

apps/admin-web/src/pages/LoginPage.tsx

@@ -1,14 +1,17 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Button, Card, Form, Input, message, Typography } from 'antd';
+import { Button, Card, Form, Input, Tabs, message, Typography } from 'antd';
 import { saveAuth, request } from '../lib/api';
 
+type LoginResult = { accessToken: string; refreshToken: string };
+
 export default function LoginPage() {
   const navigate = useNavigate();
-  const [form] = Form.useForm();
+  const [smsForm] = Form.useForm();
+  const [passwordForm] = Form.useForm();
   const [loading, setLoading] = useState(false);
   const [codeCooldown, setCodeCooldown] = useState(0);
-  const phone = Form.useWatch('phone', form);
+  const phone = Form.useWatch('phone', smsForm);
 
   async function sendCode() {
     if (!phone) {
@@ -19,7 +22,7 @@ export default function LoginPage() {
       method: 'POST',
       body: JSON.stringify({ phone, scene: 'HQ_LOGIN' }),
     });
-    message.success('验证码已发送（Mock: 123456）');
+    message.success('验证码已发送');
     setCodeCooldown(60);
     const timer = setInterval(() => {
       setCodeCooldown((c) => {
@@ -32,19 +35,35 @@ export default function LoginPage() {
     }, 1000);
   }
 
-  async function onFinish(values: { phone: string; code: string }) {
+  async function finishLogin(data: LoginResult) {
+    saveAuth(data);
+    message.success('登录成功');
+    navigate('/');
+  }
+
+  async function onSmsFinish(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('/');
+      const data = await request<LoginResult>('/admin/auth/login/sms', {
+        method: 'POST',
+        body: JSON.stringify(values),
+      });
+      await finishLogin(data);
+    } catch (e) {
+      message.error(e instanceof Error ? e.message : '登录失败');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function onPasswordFinish(values: { loginName: string; password: string }) {
+    setLoading(true);
+    try {
+      const data = await request<LoginResult>('/admin/auth/login/password', {
+        method: 'POST',
+        body: JSON.stringify(values),
+      });
+      await finishLogin(data);
     } catch (e) {
       message.error(e instanceof Error ? e.message : '登录失败');
     } finally {
@@ -66,24 +85,61 @@ export default function LoginPage() {
         <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>
+        <Tabs
+          items={[
+            {
+              key: 'password',
+              label: '账号密码',
+              children: (
+                <Form
+                  form={passwordForm}
+                  layout="vertical"
+                  onFinish={onPasswordFinish}
+                  initialValues={{ loginName: 'admin' }}
+                >
+                  <Form.Item name="loginName" label="账号" rules={[{ required: true, message: '请输入账号' }]}>
+                    <Input placeholder="admin" autoComplete="username" />
+                  </Form.Item>
+                  <Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]}>
+                    <Input.Password placeholder="请输入密码" autoComplete="current-password" />
+                  </Form.Item>
+                  <Button type="primary" htmlType="submit" block loading={loading}>
+                    登录
+                  </Button>
+                </Form>
+              ),
+            },
+            {
+              key: 'sms',
+              label: '短信验证码',
+              children: (
+                <Form
+                  form={smsForm}
+                  layout="vertical"
+                  onFinish={onSmsFinish}
+                  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>
   );