feat(message): add embedded mode to ChatScreen for desktop dual-column layout
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:
@@ -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,
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user