feat(message): add embedded mode to ChatScreen for desktop dual-column layout
All checks were successful
Frontend CI / build-and-push-web (push) Successful in 2m37s
Frontend CI / ota-android (push) Successful in 10m43s
Frontend CI / build-android-apk (push) Successful in 40m4s

Replace EmbeddedChat with unified ChatScreen supporting embedded mode through props. Pass conversation data, layout constraints, and navigation callbacks directly to ChatScreen instead of using separate embedded component. Consolidates dual-column layout logic into single component with conditional rendering based on isEmbedded prop.
This commit is contained in:
lafay
2026-04-13 01:52:43 +08:00
parent fe6a03da5d
commit 4f31926eb5
8 changed files with 131 additions and 1095 deletions

View File

@@ -51,6 +51,7 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
header: {
...baseStyles.header,
paddingHorizontal: isWideScreen ? spacing.xl : spacing.md,
height: isWideScreen ? 60 : 52,
},
headerName: {
...baseStyles.headerName,

View File

@@ -62,7 +62,18 @@ export interface MenuItem {
// ChatScreen Props
export interface ChatScreenProps {
// 路由参数通过 useRoute 获取
/** 嵌入式模式:外部传入的会话 ID优先于路由参数 */
embeddedConversationId?: string;
/** 嵌入式模式:是否为群聊 */
embeddedIsGroupChat?: boolean;
/** 嵌入式模式:群组 ID */
embeddedGroupId?: string;
/** 嵌入式模式:群组名称 */
embeddedGroupName?: string;
/** 嵌入式模式:返回回调 */
onEmbeddedBack?: () => void;
/** 嵌入式模式:是否为嵌入式布局 */
isEmbedded?: boolean;
}
// 消息气泡 Props

View File

@@ -40,11 +40,12 @@ import {
ChatRouteParams,
MenuPosition,
PendingChatAttachment,
ChatScreenProps,
} from './types';
import { TIME_SEPARATOR_INTERVAL, MEMBERS_PAGE_SIZE, MAX_PENDING_CHAT_IMAGES } from './constants';
import { messageRepository } from '@/database';
export const useChatScreen = () => {
export const useChatScreen = (props?: ChatScreenProps) => {
const getSendErrorMessage = useCallback((error: unknown, fallback: string) => {
if (error instanceof ApiError && error.message) {
return error.message;
@@ -60,7 +61,17 @@ export const useChatScreen = () => {
groupName?: string | string[];
}>();
// 路由参数(动态段 + query群 ID 勿用 Number(),避免超过 2^53-1 时精度丢失
// 嵌入式模式下优先使用 props否则从路由参数获取
const routeParams = useMemo(() => {
if (props?.embeddedConversationId) {
return {
conversationId: props.embeddedConversationId,
userId: null as string | null,
isGroupChat: props.embeddedIsGroupChat ?? false,
groupId: props.embeddedGroupId ?? null,
groupName: props.embeddedGroupName ?? null,
};
}
const isGroupFlag = firstRouteParam(rawParams.isGroupChat);
return {
conversationId: firstRouteParam(rawParams.conversationId) ?? null,
@@ -70,6 +81,10 @@ export const useChatScreen = () => {
groupName: firstRouteParam(rawParams.groupName),
};
}, [
props?.embeddedConversationId,
props?.embeddedIsGroupChat,
props?.embeddedGroupId,
props?.embeddedGroupName,
rawParams.conversationId,
rawParams.userId,
rawParams.isGroupChat,