feat: add local auth billing and usage management

components/account-security-panel.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import { KeyRound, Loader2 } from "lucide-react";
+
+export function AccountSecurityPanel() {
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  async function submit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setMessage(null);
+    setError(null);
+    if (newPassword.length < 8) {
+      setError("新密码至少需要 8 位。");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError("两次输入的新密码不一致。");
+      return;
+    }
+    setSaving(true);
+    try {
+      const response = await fetch("/api/auth/password/change", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ currentPassword, newPassword, confirmPassword })
+      });
+      const payload = await response.json().catch(() => ({})) as { error?: string };
+      if (!response.ok) throw new Error(payload.error || "密码修改失败。");
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+      setMessage("密码已修改。");
+    } catch (requestError) {
+      setError(requestError instanceof Error ? requestError.message : String(requestError));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <section className="account-security-card" aria-labelledby="account-security-title">
+      <header className="account-panel-heading account-security-heading">
+        <div>
+          <h2 id="account-security-title">修改密码</h2>
+        </div>
+        <span className="account-panel-icon" aria-hidden="true"><KeyRound /></span>
+      </header>
+
+      {message ? <div className="account-feedback success" role="status">{message}</div> : null}
+      {error ? <div className="account-feedback error" role="alert">{error}</div> : null}
+
+      <form className="account-security-form" onSubmit={submit}>
+        <div className="account-security-fields">
+          <label className="field">
+            <span>当前密码</span>
+            <input type="password" autoComplete="current-password" value={currentPassword} onChange={(event) => setCurrentPassword(event.target.value)} />
+          </label>
+          <label className="field">
+            <span>新密码</span>
+            <input type="password" autoComplete="new-password" value={newPassword} onChange={(event) => setNewPassword(event.target.value)} />
+          </label>
+          <label className="field">
+            <span>确认新密码</span>
+            <input type="password" autoComplete="new-password" value={confirmPassword} onChange={(event) => setConfirmPassword(event.target.value)} />
+          </label>
+        </div>
+        <footer className="account-form-footer">
+          <button className="button primary" type="submit" disabled={saving || !currentPassword || !newPassword || !confirmPassword}>
+            {saving ? <Loader2 className="spin" size={17} /> : <KeyRound size={17} />}
+            保存密码
+          </button>
+        </footer>
+      </form>
+    </section>
+  );
+}