Initial commit: accountbook project

- Node.js backend server - Frontend application - Backup script - Project specification Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 11:24:10 +08:00
commit 3347a256b2
131 changed files with 7287 additions and 0 deletions
@@ -0,0 +1,120 @@
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { login, register, isLoggedIn } from '../lib/api';
+import AppShell from '../components/AppShell';
+import { Icon } from '../components/icons';
+import { useToast } from '../components/ToastProvider';
+
+export default function Login() {
+  const router = useRouter();
+  const { showToast } = useToast();
+  const [isLoginMode, setIsLoginMode] = useState(true);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (isLoggedIn()) {
+      router.push('/');
+    }
+  }, [router]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      if (isLoginMode) {
+        await login(username, password);
+        showToast('登录成功', { tone: 'success' });
+      } else {
+        await register(username, password);
+        showToast('注册成功', { tone: 'success' });
+      }
+      router.push('/');
+    } catch (err) {
+      setError(err.message);
+      showToast(err.message, { tone: 'error' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <AppShell title="记账本" subtitle="随时记录每一笔收支" hideNav contentClassName="auth-layout" compactHeader>
+      <div className="auth-page">
+        <div className="auth-card auth-card--refresh">
+          <div className="auth-logo auth-logo--refresh">
+            <div className="auth-logo__mark" aria-hidden="true">
+              <Icon name="chart" size={24} />
+            </div>
+            <h1>{isLoginMode ? '欢迎回来' : '创建账户'}</h1>
+            <p>{isLoginMode ? '登录后继续记录每一笔收支' : '注册后即可开始管理你的账本'}</p>
+          </div>
+
+          <div className="auth-switch" role="tablist" aria-label="登录或注册">
+            <button
+              type="button"
+              className={isLoginMode ? 'is-active' : ''}
+              onClick={() => {
+                setIsLoginMode(true);
+                setError('');
+              }}
+            >
+              登录
+            </button>
+            <button
+              type="button"
+              className={!isLoginMode ? 'is-active' : ''}
+              onClick={() => {
+                setIsLoginMode(false);
+                setError('');
+              }}
+            >
+              注册
+            </button>
+          </div>
+
+          {error && <div className="error-msg">{error}</div>}
+
+          <form onSubmit={handleSubmit} className="auth-form">
+            <div className="form-group">
+              <label htmlFor="username">用户名</label>
+              <input
+                id="username"
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="3-20个字符"
+                required
+                disabled={loading}
+              />
+            </div>
+            <div className="form-group">
+              <label htmlFor="password">密码</label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="6-20个字符"
+                required
+                disabled={loading}
+              />
+            </div>
+            <button type="submit" className="btn btn-primary" disabled={loading}>
+              {loading ? (
+                <span className="button-content">
+                  <Icon name="spinner" size={16} className="is-spinning" />
+                  处理中...
+                </span>
+              ) : isLoginMode ? '登录' : '注册'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </AppShell>
+  );
+}