feat: migrate runtime backend to node server

2026-04-08 16:41:29 +08:00
parent 9d2fc9e4b8
commit a83841ff2d
70 changed files with 8239 additions and 1561 deletions
--- a/src/components/CustomWorldEntityEditorModal.tsx
+++ b/src/components/CustomWorldEntityEditorModal.tsx
@@ -19,7 +19,7 @@ import {
 import {
  type CustomWorldSceneImageResult,
  generateCustomWorldSceneImage,
-} from '../services/ai';
+} from '../services/aiService';
 import {
  buildCustomWorldSceneImagePrompt,
  DEFAULT_CUSTOM_WORLD_SCENE_IMAGE_NEGATIVE_PROMPT,
--- a/src/components/CustomWorldGenerationView.tsx
+++ b/src/components/CustomWorldGenerationView.tsx
@@ -2,7 +2,7 @@ import { motion } from 'motion/react';

 import type {
  CustomWorldGenerationProgress,
-} from '../services/ai';
+} from '../services/aiService';
 import { getNineSliceStyle, UI_CHROME } from '../uiAssets';

 interface CustomWorldGenerationViewProps {
--- a/src/components/auth/AuthGate.tsx
+++ b/src/components/auth/AuthGate.tsx
@@ -0,0 +1,160 @@
+import { type ReactNode, useEffect, useState } from 'react';
+
+import {
+  AUTH_STATE_EVENT,
+  getStoredAccessToken,
+} from '../../services/apiClient';
+import {
+  type AuthUser,
+  ensureAutoAuthUser,
+  getCurrentAuthUser,
+  logoutAuthUser,
+} from '../../services/authService';
+
+type AuthGateProps = {
+  children: ReactNode;
+};
+
+type AuthStatus = 'checking' | 'recovering' | 'ready' | 'error';
+
+export function AuthGate({ children }: AuthGateProps) {
+  const [status, setStatus] = useState<AuthStatus>('checking');
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    let isActive = true;
+
+    const ensureAutoUser = async () => {
+      if (!isActive) {
+        return;
+      }
+
+      setStatus('recovering');
+
+      try {
+        const { user: nextUser } = await ensureAutoAuthUser();
+        if (!isActive) {
+          return;
+        }
+
+        setUser(nextUser);
+        setStatus('ready');
+        setError('');
+      } catch (autoAuthError) {
+        if (!isActive) {
+          return;
+        }
+
+        setUser(null);
+        setStatus('error');
+        setError(
+          autoAuthError instanceof Error
+            ? autoAuthError.message
+            : '自动登录失败，请稍后再试。',
+        );
+      }
+    };
+
+    const hydrate = async () => {
+      const token = getStoredAccessToken();
+      if (!token) {
+        await ensureAutoUser();
+        return;
+      }
+
+      try {
+        const nextUser = await getCurrentAuthUser();
+        if (!isActive) {
+          return;
+        }
+
+        if (nextUser) {
+          setUser(nextUser);
+          setStatus('ready');
+          setError('');
+          return;
+        }
+
+        await ensureAutoUser();
+      } catch {
+        if (!isActive) {
+          return;
+        }
+        await ensureAutoUser();
+      }
+    };
+
+    void hydrate();
+
+    const handleAuthStateChange = () => {
+      setStatus('checking');
+      void hydrate();
+    };
+
+    window.addEventListener(AUTH_STATE_EVENT, handleAuthStateChange);
+
+    return () => {
+      isActive = false;
+      window.removeEventListener(AUTH_STATE_EVENT, handleAuthStateChange);
+    };
+  }, []);
+
+  if (status === 'checking') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-[#090b11] text-sm text-zinc-300">
+        正在校验登录状态...
+      </div>
+    );
+  }
+
+  if (status === 'recovering') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-[#090b11] text-sm text-zinc-300">
+        正在自动创建或恢复账号...
+      </div>
+    );
+  }
+
+  if (status !== 'ready' || !user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-[#090b11] px-6 text-zinc-200">
+        <div className="max-w-md rounded-3xl border border-white/10 bg-black/40 px-6 py-7 text-center shadow-[0_20px_60px_rgba(0,0,0,0.35)]">
+          <div className="text-base font-medium text-zinc-50">自动登录失败</div>
+          <div className="mt-3 text-sm leading-6 text-zinc-300">
+            {error || '账号恢复失败，请刷新页面后重试。'}
+          </div>
+          <button
+            type="button"
+            className="mt-5 rounded-full border border-amber-300/30 px-4 py-2 text-sm text-amber-100 transition hover:border-amber-300/60 hover:bg-amber-300/10"
+            onClick={() => {
+              window.location.reload();
+            }}
+          >
+            重新尝试
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      <div className="pointer-events-none fixed right-3 top-3 z-50 flex justify-end">
+        <div className="pointer-events-auto flex items-center gap-2 rounded-full border border-white/10 bg-black/45 px-3 py-2 text-xs text-zinc-200 backdrop-blur">
+          <span>{user.username}</span>
+          <button
+            type="button"
+            className="rounded-full border border-white/10 px-2 py-1 text-[11px] text-zinc-100 transition hover:border-amber-300/40 hover:text-amber-100"
+            onClick={() => {
+              void logoutAuthUser();
+            }}
+          >
+            退出
+          </button>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}
--- a/src/components/auth/LoginScreen.tsx
+++ b/src/components/auth/LoginScreen.tsx
@@ -0,0 +1,89 @@
+import { useState } from 'react';
+
+type LoginScreenProps = {
+  loading: boolean;
+  error: string;
+  onSubmit: (username: string, password: string) => Promise<void>;
+};
+
+export function LoginScreen({
+  loading,
+  error,
+  onSubmit,
+}: LoginScreenProps) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  return (
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(245,158,11,0.18),_transparent_38%),linear-gradient(180deg,_#13151c_0%,_#090b11_100%)] px-4 py-8 text-zinc-100">
+      <div className="mx-auto flex min-h-[calc(100vh-4rem)] w-full max-w-5xl items-center justify-center">
+        <div className="grid w-full max-w-4xl overflow-hidden rounded-[28px] border border-amber-200/15 bg-zinc-950/78 shadow-[0_24px_80px_rgba(0,0,0,0.45)] md:grid-cols-[1.15fr_0.85fr]">
+          <div className="border-b border-amber-200/10 bg-[linear-gradient(135deg,_rgba(245,158,11,0.16),_rgba(20,184,166,0.08))] px-6 py-8 md:border-b-0 md:border-r md:px-10 md:py-12">
+            <p className="text-xs uppercase tracking-[0.35em] text-amber-200/70">
+              Genarrative
+            </p>
+            <h1 className="mt-4 text-3xl font-semibold tracking-tight text-zinc-50 md:text-4xl">
+              登录后进入冒险
+            </h1>
+            <p className="mt-4 max-w-md text-sm leading-7 text-zinc-300">
+              当前版本已切到后端账号模式。输入用户名和密码即可直接进入，用户名不存在时会自动创建账号。
+            </p>
+            <div className="mt-8 grid gap-3 text-sm text-zinc-300">
+              <div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3">
+                用户名：3 到 24 位字母、数字、下划线
+              </div>
+              <div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3">
+                第一次提交会自动注册，后续同名即登录
+              </div>
+            </div>
+          </div>
+
+          <form
+            className="flex flex-col justify-center gap-5 px-6 py-8 md:px-10 md:py-12"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void onSubmit(username, password);
+            }}
+          >
+            <label className="grid gap-2 text-sm text-zinc-300">
+              <span>用户名</span>
+              <input
+                className="h-12 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-amber-300/50 focus:bg-black/40"
+                autoComplete="username"
+                value={username}
+                onChange={(event) => setUsername(event.target.value)}
+                placeholder="hero_name"
+              />
+            </label>
+
+            <label className="grid gap-2 text-sm text-zinc-300">
+              <span>密码</span>
+              <input
+                className="h-12 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-amber-300/50 focus:bg-black/40"
+                type="password"
+                autoComplete="current-password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                placeholder="至少 6 位"
+              />
+            </label>
+
+            {error ? (
+              <div className="rounded-2xl border border-rose-400/25 bg-rose-500/10 px-4 py-3 text-sm text-rose-100">
+                {error}
+              </div>
+            ) : null}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="mt-2 h-12 rounded-2xl bg-[linear-gradient(135deg,_#f59e0b,_#f97316)] px-4 text-base font-medium text-zinc-950 transition hover:brightness-105 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              {loading ? '正在进入...' : '进入游戏'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/game-shell/PreGameSelectionFlow.tsx
+++ b/src/components/game-shell/PreGameSelectionFlow.tsx
@@ -4,20 +4,20 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import {
  buildCustomWorldPlayableCharacters,
 } from '../../data/characterPresets';
-import {
-  readSavedCustomWorldProfiles,
-  upsertSavedCustomWorldProfile,
-} from '../../data/customWorldLibrary';
 import { getScenePreset } from '../../data/scenePresets';
 import {
  type CustomWorldGenerationProgress,
  generateCustomWorldProfile,
-} from '../../services/ai';
+} from '../../services/aiService';
 import {
  buildCustomWorldCreatorIntentDisplayText,
  buildCustomWorldCreatorIntentGenerationText,
  createEmptyCustomWorldCreatorIntent,
 } from '../../services/customWorldCreatorIntent';
+import {
+  listCustomWorldLibrary,
+  upsertCustomWorldProfile,
+} from '../../services/storageService';
 import {
  type CustomWorldCreatorIntent,
  type CustomWorldGenerationMode,
@@ -172,7 +172,7 @@ export function PreGameSelectionFlow({
    useState<GameState['customWorldProfile']>(null);
  const [savedCustomWorldProfiles, setSavedCustomWorldProfiles] = useState<
    CustomWorldProfile[]
-  >(() => readSavedCustomWorldProfiles());
+  >([]);
  const [showDeveloperTeamModal, setShowDeveloperTeamModal] = useState(false);
  const [worldOnlineCounts, setWorldOnlineCounts] = useState<WorldOnlineCounts>(
    () => generateWorldOnlineCounts(),
@@ -280,6 +280,25 @@ export function PreGameSelectionFlow({
    },
    [],
  );
+  useEffect(() => {
+    let isActive = true;
+
+    void listCustomWorldLibrary()
+      .then((profiles) => {
+        if (!isActive) return;
+        setSavedCustomWorldProfiles(profiles);
+      })
+      .catch((error) => {
+        console.warn(
+          '[PreGameSelectionFlow] failed to load custom world library',
+          error,
+        );
+      });
+
+    return () => {
+      isActive = false;
+    };
+  }, []);

  const leaveCustomWorldResult = () => {
    setGeneratedCustomWorldProfile(null);
@@ -331,18 +350,18 @@ export function PreGameSelectionFlow({
    setShowCustomWorldModal(true);
  };

-  const saveGeneratedCustomWorld = () => {
+  const saveGeneratedCustomWorld = async () => {
    if (!generatedCustomWorldProfile) {
      return;
    }

    try {
      setSavedCustomWorldProfiles(
-        upsertSavedCustomWorldProfile(generatedCustomWorldProfile),
+        await upsertCustomWorldProfile(generatedCustomWorldProfile),
      );
    } catch (error) {
      setCustomWorldError(
-        error instanceof Error ? error.message : '本地保存自定义世界失败。',
+        error instanceof Error ? error.message : '保存自定义世界失败。',
      );
      return;
    }
@@ -650,7 +669,7 @@ export function PreGameSelectionFlow({
            id: generatedCustomWorldProfile.id,
          }
        : profile;
-      const savedProfiles = upsertSavedCustomWorldProfile(persistedProfile);
+      const savedProfiles = await upsertCustomWorldProfile(persistedProfile);
      setSavedCustomWorldProfiles(savedProfiles);
      setGeneratedCustomWorldProfile(null);
      setCustomWorldError(null);
@@ -1034,7 +1053,9 @@ export function PreGameSelectionFlow({
                onRegenerateLandmarkNetwork={() => {
                  void regenerateLandmarkNetwork();
                }}
-                onSave={saveGeneratedCustomWorld}
+                onSave={() => {
+                  void saveGeneratedCustomWorld();
+                }}
              />
            </motion.div>
          )}