完善 React 前端项目

主要改进:
- 新增 HomePage 组件，包含统计数据和内容展示
- 新增 ArticlesPage 和 ServicesPage 列表页，支持搜索和筛选
- 新增 UserProfilePage 个人中心页面
- 新增 NotFoundPage 404 页面
- 改进 Layout 组件，添加用户登录状态和动态导航
- 完善所有 Stores (AuthStore, UserStore, ArticleStore, ServiceStore)
- 优化全局样式和响应式设计
- 添加环境变量配置
- 修复构建警告

技术栈:
- React 18 + MobX + React Router v6 + Styled Components

frontend/src/components/auth/RegisterPage.js

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import { observer } from 'mobx-react-lite';
+import { useAuthStore } from '../../stores/AuthStore';
 import { useNavigate } from 'react-router-dom';
 
 const Container = styled.div`
@@ -60,6 +62,20 @@ const Button = styled.button`
   &:hover {
     background: #5568d3;
   }
+
+  &:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: #dc3545;
+  font-size: 14px;
+  text-align: center;
+  background: #f8d7da;
+  padding: 10px;
+  border-radius: 4px;
 `;
 
 const Link = styled.a`
@@ -67,44 +83,35 @@ const Link = styled.a`
   color: #667eea;
   text-decoration: none;
   font-size: 14px;
+  display: block;
+  margin-top: 15px;
 
   &:hover {
     text-decoration: underline;
   }
 `;
 
-const RegisterPage = () => {
+const RegisterPage = observer(() => {
   const navigate = useNavigate();
+  const authStore = useAuthStore();
   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;
+    const result = await authStore.register(username, email, password, confirmPassword);
+    if (result.success) {
+      navigate('/');
     }
-
-    // TODO: 调用注册 API
-    console.log('Register:', { username, email, password });
-
-    navigate('/login');
   };
 
   return (
     <Container>
-      <Title>注册</Title>
+      <Title>注册账号</Title>
       <Form onSubmit={handleSubmit}>
-        {error && (
-          <div style={{ color: '#dc3545', fontSize: '14px', textAlign: 'center' }}>
-            {error}
-          </div>
-        )}
+        {authStore.error && <ErrorMessage>{authStore.error}</ErrorMessage>}
 
         <InputGroup>
           <Label>用户名</Label>
@@ -114,6 +121,7 @@ const RegisterPage = () => {
             onChange={(e) => setUsername(e.target.value)}
             placeholder="请输入用户名"
             required
+            disabled={authStore.loading}
           />
         </InputGroup>
 
@@ -125,6 +133,7 @@ const RegisterPage = () => {
             onChange={(e) => setEmail(e.target.value)}
             placeholder="请输入邮箱"
             required
+            disabled={authStore.loading}
           />
         </InputGroup>
 
@@ -136,6 +145,7 @@ const RegisterPage = () => {
             onChange={(e) => setPassword(e.target.value)}
             placeholder="请输入密码"
             required
+            disabled={authStore.loading}
           />
         </InputGroup>
 
@@ -147,15 +157,18 @@ const RegisterPage = () => {
             onChange={(e) => setConfirmPassword(e.target.value)}
             placeholder="请再次输入密码"
             required
+            disabled={authStore.loading}
           />
         </InputGroup>
 
-        <Button type="submit">注册</Button>
+        <Button type="submit" disabled={authStore.loading}>
+          {authStore.loading ? '注册中...' : '注册'}
+        </Button>
       </Form>
 
       <Link href="/login">已有账号？立即登录</Link>
     </Container>
   );
-};
+});
 
-export default RegisterPage;
+export default RegisterPage;