init

frontend/src/pages/login/index.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { Form, Input, Button, Card, message, theme } from 'antd'
+import { UserOutlined, LockOutlined } from '@ant-design/icons'
+import { useNavigate } from 'react-router-dom'
+import { useUserStore } from '@/store/user'
+
+// ---- 私有类型 ----
+interface LoginFormValues {
+  phone: string
+  password: string
+}
+
+function LoginPage() {
+  const [loading, setLoading] = useState(false)
+  const navigate = useNavigate()
+  const { token } = theme.useToken()
+  const storeLogin = useUserStore(s => s.login)
+
+  const handleFinish = async (values: LoginFormValues) => {
+    setLoading(true)
+    try {
+      const result = await storeLogin(values)
+      if (result === true) {
+        message.success('登录成功')
+        navigate('/', { replace: true })
+      } else {
+        message.error(result || '登录失败，请检查账号密码')
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: token.colorBgLayout,
+      }}
+    >
+      <Card
+        style={{ width: 400, boxShadow: token.boxShadowSecondary }}
+        variant="borderless"
+      >
+        {/* 标题 */}
+        <div style={{ textAlign: 'center', marginBottom: 32 }}>
+          <div
+            style={{
+              fontSize: 28,
+              fontWeight: 700,
+              color: token.colorPrimary,
+              marginBottom: 8,
+            }}
+          >
+            SmartServe
+          </div>
+          <div style={{ color: token.colorTextSecondary }}>请登录您的账号</div>
+        </div>
+
+        <Form<LoginFormValues>
+          layout="vertical"
+          onFinish={handleFinish}
+          autoComplete="off"
+          size="large"
+        >
+          <Form.Item
+            name="phone"
+            rules={[
+              { required: true, message: '请输入手机号码' },
+              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' },
+            ]}
+          >
+            <Input prefix={<UserOutlined />} placeholder="手机号码" maxLength={11} />
+          </Form.Item>
+
+          <Form.Item
+            name="password"
+            rules={[{ required: true, message: '请输入密码' }]}
+          >
+            <Input.Password prefix={<LockOutlined />} placeholder="密码" />
+          </Form.Item>
+
+          <Form.Item style={{ marginBottom: 0 }}>
+            <Button type="primary" htmlType="submit" block loading={loading}>
+              登录
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  )
+}
+
+export default LoginPage