fix(chat): replace Android keyboard workaround
This commit is contained in:
@@ -1,20 +1,13 @@
|
||||
/* ChatInputBar 输入栏容器样式(与 Dart chat_input_bar.dart 对齐) */
|
||||
|
||||
/* 键盘适配:
|
||||
* --chat-input-lift 是小米 Android + Facebook IAB 的专用抬升值。
|
||||
* --chat-input-lift-effective 只有目标设备标记存在时才读取抬升值。
|
||||
* --app-safe-bottom 处理小米全面屏手势条 / iPhone home indicator。
|
||||
* 正常浏览器中 --chat-input-lift 为 0,因此无视觉副作用。 */
|
||||
:global(html[data-keyboard-adapt="android-facebook-target"]) {
|
||||
--chat-input-lift-effective: var(--chat-input-lift, 0px);
|
||||
}
|
||||
/* 键盘适配:--chat-input-lift 仅写入当前聊天输入栏。 */
|
||||
|
||||
.bar {
|
||||
flex: 0 0 auto;
|
||||
padding: 0
|
||||
calc(var(--chat-inline-padding, 16px) + var(--app-safe-right, 0px))
|
||||
calc(
|
||||
var(--spacing-lg, 16px) + var(--chat-input-lift-effective, 0px) +
|
||||
var(--spacing-lg, 16px) + var(--chat-input-lift, 0px) +
|
||||
var(--app-safe-bottom, 0px)
|
||||
)
|
||||
calc(var(--chat-inline-padding, 16px) + var(--app-safe-left, 0px));
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
import { useChatDispatch } from "@/stores/chat/chat-context";
|
||||
import { useKeyboardHeight } from "@/hooks";
|
||||
import { Logger } from "@/utils/logger";
|
||||
|
||||
import { useChatKeyboardAvoidance } from "../hooks/use-chat-keyboard-avoidance";
|
||||
import { ChatInputTextField } from "./chat-input-text-field";
|
||||
import { ChatSendButton } from "./chat-send-button";
|
||||
import styles from "./chat-input-bar.module.css";
|
||||
@@ -20,13 +20,14 @@ export function ChatInputBar({ disabled = false }: ChatInputBarProps) {
|
||||
const dispatch = useChatDispatch();
|
||||
const [input, setInput] = useState("");
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const barRef = useRef<HTMLDivElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const lastPointerSendAtRef = useRef(0);
|
||||
|
||||
const hasContent = input.trim().length > 0;
|
||||
|
||||
useKeyboardHeight({
|
||||
targetRef: textareaRef,
|
||||
useChatKeyboardAvoidance({
|
||||
containerRef: barRef,
|
||||
active: isFocused,
|
||||
});
|
||||
|
||||
@@ -68,7 +69,10 @@ export function ChatInputBar({ disabled = false }: ChatInputBarProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${styles.bar} ${isFocused ? styles.barFocused : ""}`}>
|
||||
<div
|
||||
ref={barRef}
|
||||
className={`${styles.bar} ${isFocused ? styles.barFocused : ""}`}
|
||||
>
|
||||
<div className={`${styles.row} ${isFocused ? styles.rowFocused : ""}`}>
|
||||
<ChatInputTextField
|
||||
ref={textareaRef}
|
||||
|
||||
Reference in New Issue
Block a user