feat: 云端优先架构 — 桌面/Web/PWA 全走服务器 API

2026-10-16 17:34:26 +08:00
parent 629c7e4073
commit aea94de9e5
22 changed files with 472 additions and 445 deletions
@@ -1,12 +1,24 @@
+// Deprecated: 统一使用 LoginPage（桌面/Web 均走全屏登录页）
 import { useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { serverLogin, serverRegister } from '@/lib/api';
-import { Button, Dialog, Field, Input } from '@/components/ui';
+import { Button, Field, Input, useToast } from '@/components/ui';
+
+function LogoMark({ size = 44 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 26 26" fill="none" aria-hidden>
+      <rect x="1" y="1" width="24" height="24" rx="6" fill="var(--brand)" />
+      <ellipse cx="11" cy="10" rx="4.2" ry="5.2" fill="#fff" opacity="0.95" transform="rotate(-18 11 10)" />
+      <circle cx="17.5" cy="17.5" r="3.1" fill="#fff" opacity="0.7" />
+    </svg>
+  );
+}

 export function LoginDialog({ open, onClose, defaultUrl }: { open: boolean; onClose: () => void; defaultUrl: string }) {
  const qc = useQueryClient();
+  const toast = useToast();
  const [mode, setMode] = useState<'login' | 'register'>('login');
-  const [serverUrl, setServerUrl] = useState(defaultUrl);
+  const [serverUrl, setServerUrl] = useState(defaultUrl || 'https://footpr.linyux.cn');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [invite, setInvite] = useState('');
@@ -26,44 +38,62 @@ export function LoginDialog({ open, onClose, defaultUrl }: { open: boolean; onCl
        await serverRegister(username.trim(), password, invite.trim(), base);
      }
      void qc.invalidateQueries();
+      toast('success', mode === 'login' ? '已登录 · 同步已开启' : '已注册登录 · 同步已开启');
      onClose();
-      window.location.reload(); // 触发侧边栏与同步引擎重启
+      setTimeout(() => window.location.reload(), 300);
    } catch (e) {
      setError((e as Error).message);
    } finally { setBusy(false); }
  };

+  if (!open) return null;
+
  return (
-    <Dialog open={open} onClose={onClose} width={440} title={mode === 'login' ? '登录账号' : '注册账号'}
-      footer={
-        <>
-          <Button variant="secondary" onClick={onClose}>取消</Button>
-          <Button variant="primary" onClick={() => void submit()} disabled={busy}>{busy ? '请稍候…' : '确定'}</Button>
-        </>
-      }
-    >
-      <div className="flex flex-col gap-3">
-        <Field label="服务器地址" hint="默认与网页版同一账号体系">
-          <Input value={serverUrl} onChange={e => setServerUrl(e.target.value)} placeholder="https://footpr.linyux.cn" />
-        </Field>
-        <Field label="用户名" required>
-          <Input value={username} onChange={e => setUsername(e.target.value)} placeholder="3-32 位字母数字-_" />
-        </Field>
-        <Field label="密码" required>
-          <Input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="至少 8 位" />
-        </Field>
-        {mode === 'register' && (
-          <Field label="邀请码" required hint="向管理员索取">
-            <Input value={invite} onChange={e => setInvite(e.target.value)} placeholder="邀请码" />
-          </Field>
-        )}
-        {error && <div className="text-[12px] text-danger">{error}</div>}
-        <div className="flex text-[12px] text-ink-3 gap-2">
-          <button className="underline hover:text-ink-1" onClick={() => { setMode(mode === 'login' ? 'register' : 'login'); setError(''); }}>
-            {mode === 'login' ? '没有账号？注册' : '已有账号？登录'}
+    <div className="fixed inset-0 z-[70] flex items-center justify-center bg-bg/95">
+      <div className="w-full max-w-[380px] rounded-lg border border-line bg-surface p-6 shadow-pop">
+        <div className="flex flex-col items-center gap-1.5 pb-5">
+          <LogoMark />
+          <div className="text-[17px] font-semibold tracking-tight text-ink-1">足迹</div>
+          <div className="text-[10px] font-medium tracking-[0.2em] text-ink-3">FOOTPRINTS</div>
+        </div>
+
+        <div className="mb-4 flex rounded-md border border-line bg-surface-2 p-0.5 text-[12.5px]">
+          <button
+            className={'flex-1 rounded-sm px-2 py-1 transition-colors ' + (mode === 'login' ? 'bg-surface font-medium text-ink-1 shadow-card' : 'text-ink-3')}
+            onClick={() => { setMode('login'); setError(''); }}
+          >
+            登录
+          </button>
+          <button
+            className={'flex-1 rounded-sm px-2 py-1 transition-colors ' + (mode === 'register' ? 'bg-surface font-medium text-ink-1 shadow-card' : 'text-ink-3')}
+            onClick={() => { setMode('register'); setError(''); }}
+          >
+            注册
          </button>
        </div>
+
+        <div className="flex flex-col gap-3">
+          <Field label="服务器地址" hint="与网页版同一账号体系">
+            <Input value={serverUrl} onChange={e => setServerUrl(e.target.value)} placeholder="https://footpr.linyux.cn" />
+          </Field>
+          <Field label="用户名" required>
+            <Input value={username} onChange={e => setUsername(e.target.value)} placeholder="3-32 位字母数字-_" />
+          </Field>
+          <Field label="密码" required>
+            <Input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="至少 8 位" />
+          </Field>
+          {mode === 'register' && (
+            <Field label="邀请码" required hint="向管理员索取">
+              <Input value={invite} onChange={e => setInvite(e.target.value)} placeholder="邀请码" />
+          </Field>
+          )}
+          {error && <div className="text-[12px] text-danger">{error}</div>}
+          <Button variant="primary" size="lg" onClick={() => void submit()} disabled={busy}>
+            {busy ? "请稍候…" : (mode === "login" ? "登录并同步" : "注册并同步")}
+          </Button>
+          <p className="text-center text-[11px] text-ink-3">登录后本机数据将多端同步</p>
+        </div>
      </div>
-    </Dialog>
+    </div>
  );
 }
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { serverLogin, serverRegister } from '@/lib/api';
+import { serverLogin, serverRegister, getServerUrl, setServerUrl } from '@/lib/api';
 import { Button, Field, Input } from '@/components/ui';

 function LogoMark() {
@@ -19,6 +19,9 @@ export function LoginPage({ onAuthed }: { onAuthed: () => void }) {
  const [invite, setInvite] = useState('');
  const [error, setError] = useState('');
  const [busy, setBusy] = useState(false);
+  const isDesktop = '__TAURI_INTERNALS__' in window;
+  const [serverUrl, setServerUrlState] = useState(getServerUrl());
+  const setUrl = (v: string) => { setServerUrlState(v); setServerUrl(v); }

  const submit = async () => {
    if (!username.trim() || !password) { setError('请填写账号与密码'); return; }
@@ -64,6 +67,11 @@ export function LoginPage({ onAuthed }: { onAuthed: () => void }) {
        </div>

        <div className="flex flex-col gap-3">
+          {isDesktop && (
+            <Field label="服务器地址" hint="默认即可">
+              <Input value={serverUrl} onChange={e => setUrl(e.target.value)} placeholder="https://footpr.linyux.cn" />
+            </Field>
+          )}
          <Field label="用户名" required>
            <Input value={username} onChange={e => setUsername(e.target.value)} placeholder="3-32 位字母数字-_" onKeyDown={e => { if (e.key === 'Enter') void submit(); }} />
          </Field>
@@ -5,10 +5,9 @@ import { Header } from './Header';
 import { ToastProvider } from '@/components/ui';
 import { LoginPage } from '@/components/auth/LoginPage';
 import { getToken } from '@/lib/api';
-import { isTauriRef } from '@/lib/api';

 export function AppShell() {
-  const [authed, setAuthed] = useState(() => isTauriRef() || !!getToken());
+  const [authed, setAuthed] = useState(() => !!getToken());
  const [navOpen, setNavOpen] = useState(false);

  useEffect(() => {
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { NavLink } from 'react-router-dom';
-import { useQuery } from '@tanstack/react-query';
-import { CalendarDays, Rows3, ChartColumn, GraduationCap, Shapes, SlidersHorizontal, LogIn, ShieldCheck } from 'lucide-react';
-import { syncStatus, serverMe, clearToken, isTauriRef, getToken } from '@/lib/api';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { CalendarDays, Rows3, ChartColumn, GraduationCap, Shapes, SlidersHorizontal, LogIn, ShieldCheck, Cloud } from 'lucide-react';
+import { serverMe, clearToken, getToken } from '@/lib/api';
 import { LoginDialog } from '@/components/auth/LoginDialog';
 import { cn } from '@/lib/utils';

@@ -36,21 +36,16 @@ function LogoMark() {
  );
 }

-function baseUrl() {
-  return isTauriRef() ? (localStorage.getItem('fp-server-url') || '') : '';
-}
-
 export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void }) {
-  const isWeb = !isTauriRef();
-  const sync = useQuery({ queryKey: ['sync-status'], queryFn: syncStatus, refetchInterval: 15000 });
+  const qc = useQueryClient();
  const meQ = useQuery({
    queryKey: ['me'],
-    queryFn: () => serverMe(baseUrl()),
+    queryFn: () => serverMe(),
    enabled: !!getToken(),
    retry: 0
  });
-  const me = meQ.data ?? null;
  const [loginOpen, setLoginOpen] = useState(false);
+  const me = meQ.data ?? null;

  return (
    <aside
@@ -67,7 +62,7 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
          <div className="text-[10px] font-medium tracking-[0.18em] text-ink-3">FOOTPRINTS</div>
        </div>
      </div>
-      <LoginDialog open={loginOpen} onClose={() => setLoginOpen(false)} defaultUrl={localStorage.getItem('fp-server-url') || 'https://footpr.linyux.cn'} />
+      <LoginDialog open={loginOpen} onClose={() => setLoginOpen(false)} defaultUrl={'https://footpr.linyux.cn'} />
      <nav className="flex-1 overflow-y-auto px-2 py-3">
        {NAV.map(group => (
          <div key={group.section} className="mb-4">
@@ -97,41 +92,28 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
      </nav>

      <div className="border-t border-line px-4 py-3">
-        {/* 左下角：账号区 */}
-        {/* 左下角账号区 */}{getToken() ? (
-          <div className="mb-2">
-            {me && (
-              <div className="flex items-center justify-between gap-2">
+        {/* 左下角：账号区（云端模式） */}
+        {getToken() && me ? (
+          <div className="flex flex-col gap-1">
+            <div className="flex items-center justify-between gap-2">
+              <div className="flex items-center gap-1.5 min-w-0">
+                <Cloud size={13} className="shrink-0 text-success" />
                <div className="min-w-0 truncate text-[12px] font-medium text-ink-1" title={me.username}>
-                  {me.is_admin && <span className="mr-1 text-brand-text">管理员</span>}
+                  {me.is_admin && <span className="mr-0.5 text-brand-text">管理员</span>}
                  {me.username}
                </div>
-                <button
-                  className="shrink-0 text-[11px] text-ink-3 underline transition-colors hover:text-danger"
-                  onClick={() => {
-                    clearToken();
-                    localStorage.removeItem('fp-server-url');
-                    window.location.reload();
-                  }}
-                >
-                  退出
-                </button>
              </div>
-            )}
-            {!isWeb && (
              <button
-                className="flex w-full items-center gap-1.5 rounded-md px-1 py-1 text-[12px] text-ink-2 transition-colors hover:bg-surface-3 hover:text-ink-1"
-                onClick={() => setLoginOpen(true)}
+                className="shrink-0 text-[11px] text-ink-3 underline transition-colors hover:text-danger"
+                onClick={() => { clearToken(); qc.clear(); window.location.reload(); }}
              >
-                <LogIn size={13} />
-                {me ? "账号与同步设置" : "登录我的档案"}
+                退出
              </button>
-            )}
-            {!isWeb && (
-              <div className="num text-[10px] text-ink-3">
-                {sync.data ? ("同步 · 待推送 " + sync.data.pending_ops) : "…"}
-              </div>
-            )}
+            </div>
+            <div className="flex items-center gap-1 text-[10px] text-success">
+              <Cloud size={10} />
+              云端同步已开启
+            </div>
          </div>
        ) : (
          <div className="flex flex-col gap-1.5">
@@ -140,22 +122,12 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
              onClick={() => setLoginOpen(true)}
            >
              <LogIn size={13} />
-              我的档案 · 登录
+              登录账号
            </button>
-            <div className="text-[10px] text-ink-3">未登录=本地模式 · 登录后各端互通</div>
-          </div>
-        )}
-        {!isWeb && (
-          <div className="mt-1.5 flex items-center gap-1 text-[11px] text-ink-3">
-            <ChevronsLeftSvg />
-            数据库 · 本地存储
+            <div className="text-[10px] text-ink-3">登录后数据云端互通</div>
          </div>
        )}
      </div>
    </aside>
  );
-}
-
-function ChevronsLeftSvg() {
-  return <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M11 17l-5-5 5-5" /><path d="M18 17l-5-5 5-5" /></svg>
-}
+}