xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-01 23:56:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix mobile bug

Browse Source
This commit is contained in:
sijinhui 2024-09-26 16:40:29 +08:00
parent ac9e66bff7
commit e1ad7c5234
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/components/chat-list.tsx
View File

@ -22,7 +22,7 @@ import { useMobileScreen } from "../utils";
// motion // motion
import QueueAnim from "rc-queue-anim"; import QueueAnim from "rc-queue-anim";
export function ChatItem(props: { function ChatItem(props: {
onClick?: () => void; onClick?: () => void;
onDelete?: () => void; onDelete?: () => void;
title: string; title: string;
@ -34,6 +34,7 @@ export function ChatItem(props: {
narrow?: boolean; narrow?: boolean;
mask: Mask; mask: Mask;
provided: DraggableProvided; provided: DraggableProvided;
isMobileScreen: boolean;
}) { }) {
const draggableRef = useRef<HTMLDivElement | null>(null); const draggableRef = useRef<HTMLDivElement | null>(null);
useEffect(() => { useEffect(() => {
@ -57,8 +58,8 @@ export function ChatItem(props: {
draggableRef.current = ele; draggableRef.current = ele;
props.provided.innerRef(ele); props.provided.innerRef(ele);
}} }}
{...props.provided.draggableProps} {...(props.isMobileScreen ? {} : props.provided.draggableProps)}
{...props.provided.dragHandleProps} {...(props.isMobileScreen ? {} : props.provided.dragHandleProps)}
title={`${props.title}\n${Locale.ChatItem.ChatItemCount(props.count)}`} title={`${props.title}\n${Locale.ChatItem.ChatItemCount(props.count)}`}
> >
{props.narrow ? ( {props.narrow ? (
@ -84,7 +85,10 @@ export function ChatItem(props: {
)} )}
<div <div
className={styles["chat-item-delete"]} className={
styles["chat-item-delete"] +
` ${props.isMobileScreen ? styles["chat-item-delete-visible"] : ""}`
}
onClickCapture={(e) => { onClickCapture={(e) => {
props.onDelete?.(); props.onDelete?.();
e.preventDefault(); e.preventDefault();
@ -155,6 +159,7 @@ export function ChatList(props: { narrow?: boolean }) {
narrow={props.narrow} narrow={props.narrow}
mask={sessions[rubic.source.index].mask} mask={sessions[rubic.source.index].mask}
provided={provided} provided={provided}
isMobileScreen={isMobileScreen}
/> />
)} )}
> >
@ -172,7 +177,7 @@ export function ChatList(props: { narrow?: boolean }) {
{ opacity: [1, 0], translateY: [0, -30], height: [71, 0] }, { opacity: [1, 0], translateY: [0, -30], height: [71, 0] },
{ height: 0 }, { height: 0 },
]} ]}
// TODO：修复添加元素其他元素平移动画问题，但下面的好像不生效全靠指定高度 // TODO：手机端好像还有点问题,先把拖拽关了
onEnd={({ key, type, target }) => { onEnd={({ key, type, target }) => {
if (type === "enter") target.style.height = "auto"; if (type === "enter") target.style.height = "auto";
}} }}
@ -205,6 +210,7 @@ export function ChatList(props: { narrow?: boolean }) {
narrow={props.narrow} narrow={props.narrow}
mask={item.mask} mask={item.mask}
provided={provided} provided={provided}
isMobileScreen={isMobileScreen}
/> />
)} )}
</Draggable> </Draggable>

7
app/components/home.module.scss
View File

@ -229,6 +229,13 @@
opacity: 1; opacity: 1;
} }
/* 新增类，按钮持续显示 */
.chat-item > .chat-item-delete-visible {
opacity: 0.5;
transform: translateX(-4px);
}
.chat-item-info { .chat-item-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;