refactor(chat): decouple chat state from auth and gate quota alerts to guests
- Remove ChatAuthStatusChanged dispatch from auth login flow; chat screen now subscribes directly to auth state machine (loginStatus) to derive isGuest and drive WS lifecycle - Gate quota-exceeded and warning dialogs to guests only (non-guests have no message limit) - Dispatch ChatLoadMoreHistory for non-guest initial load vs ChatInit for guests - Fix AppConstants import path from @/core/constants/app_constants to @/core/app_constants - Add defensive isGuest checks in quota effects to prevent non-guest quota triggers
This commit is contained in:
@@ -5,24 +5,43 @@
|
||||
* 原始 Dart: lib/ui/chat/chat_screen.dart（172 行）
|
||||
*
|
||||
* 职责（本文件）：
|
||||
* - **订阅 auth 状态机**（loginStatus）——
|
||||
* - 派生 isGuest / 驱动 WS 生命周期 / 驱动初次加载（按 loginStatus 选 ChatInit vs ChatLoadMoreHistory）
|
||||
* - 驱动历史加载
|
||||
* - 屏幕生命周期事件（init / visible / invisible）
|
||||
* - 配额告警监听（quotaExceededTrigger + warningThreshold）
|
||||
* - 配额告警监听（**仅**游客 —— "非游客无消息限制"业务事实）
|
||||
* - WebSocket 生命周期管理（基于 auth 状态机的 loginStatus）
|
||||
* - 渲染骨架（背景 + 顶部栏 + 消息区 + 输入栏）
|
||||
*
|
||||
* 子组件职责：
|
||||
* - ChatHeader：顶部栏（游客 banner / 菜单按钮）
|
||||
* - ChatArea：消息列表
|
||||
* - ChatInputBar：输入栏（文字 + 发送 + More）
|
||||
* - QuotaDialog：配额告警弹窗
|
||||
* - QuotaDialog：配额告警弹窗（**仅**游客）
|
||||
* - PwaInstallOverlay：PWA 安装提示触发器
|
||||
* - BrowserHintOverlay：浏览器提示
|
||||
* - CharacterIntro：角色介绍卡片（首屏）
|
||||
*
|
||||
* **鉴权解耦**：
|
||||
* chat 机器**不**感知鉴权 —— isGuest 在此派生自 `auth.loginStatus === "guest"`。
|
||||
* chat 机器**不**管 WebSocket 生命周期 —— 由此 useEffect 监听 loginStatus 驱动。
|
||||
*
|
||||
* **配额（**仅**游客）**：
|
||||
* - 游客：派 ChatInit → readInitData 调 ChatStorage → onDone 条件赋
|
||||
* - 非游客：派 ChatLoadMoreHistory（无配额 init）—— "非游客无消息限制"业务事实
|
||||
*/
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
import { useAuthState } from "@/stores/auth/auth-context";
|
||||
import type { LoginStatus } from "@/models/auth/login-status";
|
||||
import { AuthStorage } from "@/data/storage/auth/auth_storage";
|
||||
import { useChatDispatch, useChatState } from "@/stores/chat/chat-context";
|
||||
import { GuestChatQuota } from "@/stores/chat";
|
||||
import {
|
||||
ChatWebSocket,
|
||||
createChatWebSocket,
|
||||
} from "@/core/net/chat-websocket";
|
||||
|
||||
import { MobileShell } from "@/app/_components/core/mobile-shell";
|
||||
|
||||
@@ -34,25 +53,154 @@ import { PwaInstallOverlay } from "./pwa-install-overlay";
|
||||
import { QuotaDialog } from "./quota-dialog";
|
||||
import styles from "./chat-screen.module.css";
|
||||
|
||||
/**
|
||||
* 派生 isGuest —— 单一来源：`auth.loginStatus`
|
||||
*/
|
||||
function deriveIsGuest(loginStatus: LoginStatus): boolean {
|
||||
return loginStatus === "guest";
|
||||
}
|
||||
|
||||
/**
|
||||
* 拿 WebSocket token —— 按 loginStatus 选 loginToken 或 guestToken
|
||||
*/
|
||||
async function getWsToken(
|
||||
loginStatus: LoginStatus,
|
||||
): Promise<string | null> {
|
||||
if (loginStatus === "notLoggedIn") return null;
|
||||
const storage = AuthStorage.getInstance();
|
||||
if (loginStatus === "guest") {
|
||||
const r = await storage.getGuestToken();
|
||||
return r.success ? r.data : null;
|
||||
}
|
||||
// email / google / facebook / apple：都用业务 loginToken（OAuth sync 写下的）
|
||||
const r = await storage.getLoginToken();
|
||||
return r.success ? r.data : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 按 loginStatus 派初次加载事件（**仅**游客派 ChatInit —— 配额 init）
|
||||
*/
|
||||
function dispatchInitialLoad(
|
||||
loginStatus: LoginStatus,
|
||||
chatDispatch: ReturnType<typeof useChatDispatch>,
|
||||
): void {
|
||||
if (loginStatus === "guest") {
|
||||
chatDispatch({ type: "ChatInit" }); // 拉本地消息 + 初始化配额
|
||||
} else if (loginStatus !== "notLoggedIn") {
|
||||
chatDispatch({ type: "ChatLoadMoreHistory" }); // 拉服务器端首屏（**无**配额 init）
|
||||
}
|
||||
}
|
||||
|
||||
export function ChatScreen() {
|
||||
const state = useChatState();
|
||||
const dispatch = useChatDispatch();
|
||||
const authState = useAuthState();
|
||||
const chatDispatch = useChatDispatch();
|
||||
|
||||
// isGuest 派生（chat-screen 是**唯一**知道这个值的地方 —— chat 机器无 isGuest 字段）
|
||||
const isGuest = deriveIsGuest(authState.loginStatus);
|
||||
|
||||
const [quotaDialogOpen, setQuotaDialogOpen] = useState(false);
|
||||
const [quotaExhausted, setQuotaExhausted] = useState(false);
|
||||
|
||||
// 屏幕生命周期
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// 屏幕生命周期 —— mount 时按 loginStatus 派初次加载
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
dispatch({ type: "ChatInit" });
|
||||
dispatch({ type: "ChatScreenVisible" });
|
||||
chatDispatch({ type: "ChatScreenVisible" });
|
||||
dispatchInitialLoad(authState.loginStatus, chatDispatch);
|
||||
return () => {
|
||||
dispatch({ type: "ChatScreenInvisible" });
|
||||
chatDispatch({ type: "ChatScreenInvisible" });
|
||||
};
|
||||
}, [dispatch]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chatDispatch]);
|
||||
// 注：mount useEffect 故意**不**依赖 loginStatus —— 首次 mount 时机是固定的
|
||||
// （"用户进 /chat 那一刻"），loginStatus 由 splash/auth-screen 提前 settle。
|
||||
// loginStatus 后续变化由下方"副作用 ②" 统一处理。
|
||||
|
||||
// 配额耗尽触发器
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// 核心副作用 ①：loginStatus 变化 → 连/断 WebSocket
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
const wsRef = useRef<ChatWebSocket | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
void (async () => {
|
||||
if (authState.loginStatus === "notLoggedIn") {
|
||||
// 登出 / 未登录：断开 WS
|
||||
if (wsRef.current) {
|
||||
wsRef.current.disconnect();
|
||||
wsRef.current = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// 已登录：拿 token → 连 WS
|
||||
const token = await getWsToken(authState.loginStatus);
|
||||
if (cancelled || !token) return;
|
||||
|
||||
// 清理旧连接（如有）
|
||||
if (wsRef.current) {
|
||||
wsRef.current.disconnect();
|
||||
wsRef.current = null;
|
||||
}
|
||||
|
||||
const ws = createChatWebSocket(token);
|
||||
ws.onConnected = (userId) => {
|
||||
chatDispatch({ type: "ChatWebSocketConnected", userId });
|
||||
};
|
||||
ws.onSentence = (p) => {
|
||||
chatDispatch({
|
||||
type: "ChatAISentenceReceived",
|
||||
index: p.index,
|
||||
text: p.text,
|
||||
total: p.total,
|
||||
done: p.done,
|
||||
});
|
||||
};
|
||||
ws.onError = (msg) => {
|
||||
chatDispatch({ type: "ChatWebSocketError", errorMessage: msg });
|
||||
};
|
||||
ws.connect();
|
||||
wsRef.current = ws;
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
if (wsRef.current) {
|
||||
wsRef.current.disconnect();
|
||||
wsRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [authState.loginStatus, chatDispatch]);
|
||||
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// 副作用 ②：loginStatus 变化 → 重新加载
|
||||
//
|
||||
// 规则：
|
||||
// - 首次 mount（prev === null）→ 由 mount useEffect 统一处理
|
||||
// - "notLoggedIn" → 不加载
|
||||
// - 登录态变化（guest→email 等）→ 重新加载
|
||||
// - 游客派 ChatInit（拉本地 + **初始化配额**）
|
||||
// - 非游客派 ChatLoadMoreHistory（拉服务器端首屏，**无**配额 init）
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
const prevLoginStatusRef = useRef<LoginStatus | null>(null);
|
||||
useEffect(() => {
|
||||
const prev = prevLoginStatusRef.current;
|
||||
prevLoginStatusRef.current = authState.loginStatus;
|
||||
if (prev === null) return; // 首次 mount 由 mount useEffect 处理
|
||||
if (authState.loginStatus === "notLoggedIn") return;
|
||||
if (prev !== authState.loginStatus) {
|
||||
dispatchInitialLoad(authState.loginStatus, chatDispatch);
|
||||
}
|
||||
}, [authState.loginStatus, chatDispatch]);
|
||||
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// 配额耗尽触发器（**仅**游客 —— "非游客无消息限制"）
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
const prevTriggerRef = useRef(state.quotaExceededTrigger);
|
||||
useEffect(() => {
|
||||
if (!isGuest) return; // ← 防御：非游客 backend 不会发 ChatQuotaExceeded
|
||||
if (
|
||||
state.quotaExceededTrigger !== prevTriggerRef.current &&
|
||||
state.quotaExceededTrigger > 0
|
||||
@@ -61,13 +209,13 @@ export function ChatScreen() {
|
||||
setQuotaDialogOpen(true);
|
||||
}
|
||||
prevTriggerRef.current = state.quotaExceededTrigger;
|
||||
}, [state.quotaExceededTrigger]);
|
||||
}, [state.quotaExceededTrigger, isGuest]);
|
||||
|
||||
// 配额警告（剩余 = 5）
|
||||
// 配额警告（剩余 = 5）—— **仅**游客
|
||||
const prevRemainingRef = useRef(state.guestRemainingQuota);
|
||||
useEffect(() => {
|
||||
if (
|
||||
state.isGuest &&
|
||||
isGuest && // ← 派生自 auth.loginStatus
|
||||
state.guestRemainingQuota === GuestChatQuota.warningThreshold &&
|
||||
prevRemainingRef.current !== state.guestRemainingQuota
|
||||
) {
|
||||
@@ -75,7 +223,7 @@ export function ChatScreen() {
|
||||
setQuotaDialogOpen(true);
|
||||
}
|
||||
prevRemainingRef.current = state.guestRemainingQuota;
|
||||
}, [state.guestRemainingQuota, state.isGuest]);
|
||||
}, [state.guestRemainingQuota, isGuest]);
|
||||
|
||||
return (
|
||||
<MobileShell>
|
||||
@@ -92,12 +240,13 @@ export function ChatScreen() {
|
||||
</div>
|
||||
|
||||
<div className={styles.layout}>
|
||||
<ChatHeader isGuest={state.isGuest} />
|
||||
{/* isGuest 派生自 auth.loginStatus */}
|
||||
<ChatHeader isGuest={isGuest} />
|
||||
|
||||
<ChatArea
|
||||
messages={state.messages}
|
||||
isReplyingAI={state.isReplyingAI}
|
||||
isGuest={state.isGuest}
|
||||
isGuest={isGuest}
|
||||
/>
|
||||
|
||||
<ChatInputBar disabled={state.isReplyingAI} />
|
||||
@@ -109,7 +258,7 @@ export function ChatScreen() {
|
||||
{/* PWA 安装提示触发器（无可见 UI，3.5s 后弹 dialog） */}
|
||||
<PwaInstallOverlay />
|
||||
|
||||
{/* 配额告警弹窗 */}
|
||||
{/* 配额告警弹窗（**仅**游客，gate 在 isGuest） */}
|
||||
<QuotaDialog
|
||||
open={quotaDialogOpen}
|
||||
onClose={() => setQuotaDialogOpen(false)}
|
||||
|
||||
Reference in New Issue
Block a user