Initial commit: React + Django 城市手册项目

- Django 4.2 + DRF + JWT + GraphQL
- React 18 + MobX + styled-components
- PostgreSQL 数据库
- Docker + Docker Compose + Nginx
- 完整的功能模块（用户、版块、文章、服务、交互、版主管理）
- 完整的文档（需求、部署、测试）

frontend/src/components/auth/RegisterPage.js

@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 50px auto;
+  padding: 30px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+`;
+
+const Title = styled.h2`
+  text-align: center;
+  margin-bottom: 30px;
+  color: #333;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+const InputGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+const Label = styled.label`
+  font-weight: 500;
+  color: #555;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus {
+    outline: none;
+    border-color: #667eea;
+  }
+`;
+
+const Button = styled.button`
+  padding: 12px;
+  background: #667eea;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover {
+    background: #5568d3;
+  }
+`;
+
+const Link = styled.a`
+  text-align: center;
+  color: #667eea;
+  text-decoration: none;
+  font-size: 14px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const RegisterPage = () => {
+  const navigate = useNavigate();
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+
+    if (password !== confirmPassword) {
+      setError('两次输入的密码不一致');
+      return;
+    }
+
+    // TODO: 调用注册 API
+    console.log('Register:', { username, email, password });
+
+    navigate('/login');
+  };
+
+  return (
+    <Container>
+      <Title>注册</Title>
+      <Form onSubmit={handleSubmit}>
+        {error && (
+          <div style={{ color: '#dc3545', fontSize: '14px', textAlign: 'center' }}>
+            {error}
+          </div>
+        )}
+
+        <InputGroup>
+          <Label>用户名</Label>
+          <Input
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="请输入用户名"
+            required
+          />
+        </InputGroup>
+
+        <InputGroup>
+          <Label>邮箱</Label>
+          <Input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="请输入邮箱"
+            required
+          />
+        </InputGroup>
+
+        <InputGroup>
+          <Label>密码</Label>
+          <Input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="请输入密码"
+            required
+          />
+        </InputGroup>
+
+        <InputGroup>
+          <Label>确认密码</Label>
+          <Input
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            placeholder="请再次输入密码"
+            required
+          />
+        </InputGroup>
+
+        <Button type="submit">注册</Button>
+      </Form>
+
+      <Link href="/login">已有账号？立即登录</Link>
+    </Container>
+  );
+};
+
+export default RegisterPage;