feat: chat panel header absolute

This commit is contained in:
butterfly 2024-04-22 11:02:25 +08:00
parent 37cc87531c
commit 4a5465f884
7 changed files with 10 additions and 10 deletions

View File

@ -17,7 +17,7 @@ export interface MenuWrapperInspectProps {
showPanel?: boolean; showPanel?: boolean;
} }
export default function MenuWrapper< export default function MenuLayout<
ListComponentProps extends MenuWrapperInspectProps, ListComponentProps extends MenuWrapperInspectProps,
PanelComponentProps extends MenuWrapperInspectProps, PanelComponentProps extends MenuWrapperInspectProps,
>( >(

View File

@ -44,7 +44,7 @@ export default function ChatHeader(props: ChatHeaderProps) {
return ( return (
<div <div
className={`flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b-[1px] border-gray-200 ${containerClassName}`} className={`absolute w-[100%] bg-gray-50 z-10 flex flex-0 justify-between items-center px-6 py-4 gap-chat-header-gap border-b-[1px] border-gray-200 ${containerClassName}`}
data-tauri-drag-region data-tauri-drag-region
> >
{isMobileScreen ? ( {isMobileScreen ? (

View File

@ -141,7 +141,7 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
return ( return (
<div <div
className={`relative flex-1 overscroll-y-none overflow-y-auto overflow-x-hidden px-3 pb-6`} className={`pt-[80px] relative flex-1 overscroll-y-none overflow-y-auto overflow-x-hidden px-3 pb-6`}
ref={scrollRef} ref={scrollRef}
onScroll={(e) => onChatBodyScroll(e.currentTarget)} onScroll={(e) => onChatBodyScroll(e.currentTarget)}
onMouseDown={() => inputRef.current?.blur()} onMouseDown={() => inputRef.current?.blur()}

View File

@ -263,7 +263,7 @@ function _Chat() {
return ( return (
<div <div
className={`flex flex-col ${ className={`relative flex flex-col ${
isMobileScreen isMobileScreen
? "absolute h-[100vh] w-[100%]" ? "absolute h-[100vh] w-[100%]"
: "h-[calc(100%-1.25rem)]" : "h-[calc(100%-1.25rem)]"

View File

@ -22,9 +22,9 @@ import { getTime } from "@/app/utils";
import DeleteIcon from "@/app/icons/deleteIcon.svg"; import DeleteIcon from "@/app/icons/deleteIcon.svg";
import LogIcon from "@/app/icons/logIcon.svg"; import LogIcon from "@/app/icons/logIcon.svg";
import MenuWrapper, { import MenuLayout, {
MenuWrapperInspectProps, MenuWrapperInspectProps,
} from "@/app/components/MenuWrapper"; } from "@/app/components/MenuLayout";
import Panel from "./ChatPanel"; import Panel from "./ChatPanel";
export function SessionItem(props: { export function SessionItem(props: {
@ -108,7 +108,7 @@ export function SessionItem(props: {
); );
} }
export default MenuWrapper(function SessionList(props) { export default MenuLayout(function SessionList(props) {
const { setShowPanel } = props; const { setShowPanel } = props;
const [sessions, selectedIndex, selectSession, moveSession] = useChatStore( const [sessions, selectedIndex, selectSession, moveSession] = useChatStore(

View File

@ -72,7 +72,7 @@ import { useMaskStore } from "@/app/store/mask";
import { ProviderType } from "@/app/utils/cloud"; import { ProviderType } from "@/app/utils/cloud";
import SettingHeader from "./SettingHeader"; import SettingHeader from "./SettingHeader";
import useMobileScreen from "@/app/hooks/useMobileScreen"; import useMobileScreen from "@/app/hooks/useMobileScreen";
import { MenuWrapperInspectProps } from "@/app/components/MenuWrapper"; import { MenuWrapperInspectProps } from "@/app/components/MenuLayout";
function EditPromptModal(props: { id: string; onClose: () => void }) { function EditPromptModal(props: { id: string; onClose: () => void }) {
const promptStore = usePromptStore(); const promptStore = usePromptStore();

View File

@ -1,12 +1,12 @@
import Locale from "@/app/locales"; import Locale from "@/app/locales";
import useMobileScreen from "@/app/hooks/useMobileScreen"; import useMobileScreen from "@/app/hooks/useMobileScreen";
import MenuWrapper from "@/app/components/MenuWrapper"; import MenuLayout from "@/app/components/MenuLayout";
import Panel from "./SettingPanel"; import Panel from "./SettingPanel";
import GotoIcon from "@/app/icons/goto.svg"; import GotoIcon from "@/app/icons/goto.svg";
export default MenuWrapper(function SettingList(props) { export default MenuLayout(function SettingList(props) {
const { setShowPanel } = props; const { setShowPanel } = props;
const isMobileScreen = useMobileScreen(); const isMobileScreen = useMobileScreen();