MailUI4Agents/client/electron/src/components/AccountPage.tsx

import { useCallback, useEffect, useState } from 'react';
import { useAuthStore } from '../stores/authStore';
import * as api from '../api/client';
import { LockIcon, LogoutIcon } from './icons';
import KeyPanel from './KeyPanel';
import ThemePicker from './ThemePicker';
import BackgroundPicker from './BackgroundPicker';

/** 当前用户个人中心：查看资料、修改密码、管理客户端连接密钥 */
export default function AccountPage() {
  const user = useAuthStore(s => s.user);
  const logout = useAuthStore(s => s.logout);
  const [oldPw, setOldPw] = useState('');
  const [newPw, setNewPw] = useState('');
  const [confirmPw, setConfirmPw] = useState('');
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  // 密钥面板状态
  const [keys, setKeys] = useState<api.UserKey[]>([]);
  const [keyBusy, setKeyBusy] = useState(false);
  const [keyError, setKeyError] = useState<string | null>(null);
  const [newToken, setNewToken] = useState<string | null>(null);

  const loadKeys = useCallback(async () => {
    try {
      const r = await api.listMyKeys();
      setKeys(r.keys);
      setKeyError(null);
    } catch (err) {
      setKeyError(err instanceof Error ? err.message : String(err));
    }
  }, []);

  useEffect(() => {
    loadKeys();
  }, [loadKeys]);

  const createKey = async (payload: api.CreateKeyPayload) => {
    setKeyBusy(true);
    setKeyError(null);
    try {
      const r = await api.createMyKey(payload);
      // 全文只在创建响应里出现一次，必须当场展示
      setNewToken(r.key.key_token ?? null);
      await loadKeys();
    } catch (err) {
      setKeyError(err instanceof Error ? err.message : String(err));
    } finally {
      setKeyBusy(false);
    }
  };

  const deleteKey = async (id: string) => {
    setKeyError(null);
    try {
      await api.deleteMyKey(id);
      await loadKeys();
    } catch (err) {
      setKeyError(err instanceof Error ? err.message : String(err));
    }
  };

  const mismatch = confirmPw !== '' && newPw !== confirmPw;
  const canSubmit = oldPw.length > 0 && newPw.length >= 8 && !mismatch && !busy;

  const changePw = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!canSubmit) return;
    setBusy(true);
    setError(null);
    setMsg(null);
    try {
      await api.changePassword(oldPw, newPw);
      setMsg('密码已修改，请重新登录');
      setOldPw('');
      setNewPw('');
      setConfirmPw('');
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setBusy(false);
    }
  };

  if (!user) return null;

  return (
    <div className="flex-1 min-w-0 flex flex-col bg-white">
      <div className="shrink-0 px-4 md:px-6 py-3 border-b border-gray-200 flex items-center gap-2">
        <h2 className="text-sm font-semibold text-gray-900">账号信息</h2>
      </div>

      {/* 滚动容器。
          缺了它的后果：这个页的内容（资料 + 权限 + 改密码 + 密钥 + 退出）
          比视口高，而父级是 overflow-hidden 的 flex 列 —— 超出那段直接被裁掉，
          没有任何办法滚到。实测 390px 下内容需 860px、容器只有 795px；
          1280x800 的桌面上同样看不到最后的「退出登录」。 */}
      <div className="flex-1 overflow-y-auto">
        <div className="max-w-lg px-4 md:px-6 py-6 space-y-6">
          {/* 基本信息 */}
          <section>
            <h3 className="text-xs font-medium text-gray-500 mb-3">基本资料</h3>
            <dl className="text-sm space-y-2">
              <Row label="用户名" value={user.username} mono />
              <Row label="显示名" value={user.display_name} />
              <Row label="角色" value={user.role === 'admin' ? '管理员' : '普通用户'} />
              <Row label="状态" value={user.status === 'active' ? '启用' : '禁用'} />
              <Row label="创建时间" value={user.created_at || '-'} />
              <Row label="最后登录" value={user.last_login || '从未登录'} />
            </dl>
          </section>

          {/* 权限边界 */}
          {user.role !== 'admin' && (
            <section>
              <h3 className="text-xs font-medium text-gray-500 mb-3">权限范围</h3>
              <dl className="text-sm space-y-2">
                <Row
                  label="可调用 Agent"
                  value={
                    user.allowed_agents.length === 0
                      ? '不限（全部可用）'
                      : user.allowed_agents.join(', ')
                  }
                />
                <Row
                  label="可访问目录"
                  value={
                    user.allowed_paths.length === 0
                      ? '不限（全部可用）'
                      : user.allowed_paths.join(', ')
                  }
                />
              </dl>
            </section>
          )}

          {/* 修改密码 */}
          <section>
            <h3 className="text-xs font-medium text-gray-500 mb-3 inline-flex items-center gap-1">
              <LockIcon className="w-3.5 h-3.5" />
              修改密码
            </h3>
            <form onSubmit={changePw} className="space-y-3">
              <div>
                <label className="block text-[11px] font-medium text-gray-500 mb-1">当前密码</label>
                <input
                  type="password"
                  value={oldPw}
                  onChange={e => setOldPw(e.target.value)}
                  autoComplete="current-password"
                  className="w-full text-sm border border-gray-300 rounded-md px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400"
                />
              </div>
              <div>
                <label className="block text-[11px] font-medium text-gray-500 mb-1">新密码（至少 8 位）</label>
                <input
                  type="password"
                  value={newPw}
                  onChange={e => setNewPw(e.target.value)}
                  autoComplete="new-password"
                  className="w-full text-sm border border-gray-300 rounded-md px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400"
                />
              </div>
              <div>
                <label className="block text-[11px] font-medium text-gray-500 mb-1">确认新密码</label>
                <input
                  type="password"
                  value={confirmPw}
                  onChange={e => setConfirmPw(e.target.value)}
                  autoComplete="new-password"
                  className={`w-full text-sm border rounded-md px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-100 ${
                    mismatch ? 'border-red-300' : 'border-gray-300 focus:border-blue-400'
                  }`}
                />
                {mismatch && <p className="mt-1 text-[10px] text-red-500">两次密码不一致</p>}
              </div>

              {error && (
                <p className="text-xs text-red-600 bg-red-50 border border-red-100 rounded-md px-2.5 py-1.5">
                  {error}
                </p>
              )}
              {msg && (
                <p className="text-xs text-green-600 bg-green-50 border border-green-100 rounded-md px-2.5 py-1.5">
                  {msg}
                </p>
              )}

              <button
                type="submit"
                disabled={!canSubmit}
                className="px-4 py-1.5 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                {busy ? '保存中' : '保存'}
              </button>
            </form>
          </section>

          {/* 客户端连接密钥 */}
          <section className="border-t border-gray-200 pt-6">
            <KeyPanel
              variant="user"
              keys={keys}
              loading={keyBusy}
              error={keyError}
              newToken={newToken}
              onCreate={createKey}
              onDelete={deleteKey}
              onDismissToken={() => setNewToken(null)}
            />
          </section>

          {/* 外观。放在密钥之后、退出之前：它是一个高频且完全可逆的偏好，
              与「账号自身」的密码/密钥属于不同性质，但同样是「我的设置」。 */}
          <section className="border-t border-gray-200 pt-6 space-y-6">
            <ThemePicker />
            <BackgroundPicker />
          </section>

          {/* 退出登录。
              放在这里而不是导航里：它是一个低频且不可逆的动作，
              与密码、密钥同属「账号自身」。窄屏下这也是唯一的退出口：
              抽屉式侧栏已删（它的其余入口与底部导航完全重复）。 */}
          <section className="border-t border-gray-200 pt-6">
            <h3 className="text-xs font-medium text-gray-500 mb-3">登录状态</h3>
            <button
              onClick={logout}
              className="tap inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-colors"
            >
              <LogoutIcon className="w-4 h-4" />
              退出登录
            </button>
          </section>
        </div>
      </div>
    </div>
  );
}

function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
  return (
    <div className="flex items-baseline gap-3">
      <dt className="w-20 shrink-0 text-xs text-gray-400">{label}</dt>
      <dd className={`text-sm text-gray-900 break-all ${mono ? 'font-mono' : ''}`}>{value}</dd>
    </div>
  );
}