visual-novel-web/src/app/(main)/character/[id]/chat/ChatMode/index.tsx

54 lines
1.4 KiB
TypeScript
Raw Normal View History

2025-11-05 11:32:23 +00:00
'use client';
import Input from './input';
import Actions from './actions';
import ChatList from './ChatList';
import { useAtom } from 'jotai';
import { settingOpenAtom } from '../atoms';
import SettingForm from './Right';
import { Drawer } from '@/components';
import Left from './Left';
import { ExitFullScreenIcon, FullScreenIcon } from '@/assets/common';
import { cn } from '@/lib';
export default function Main() {
const [settingOpen, setSettingOpen] = useAtom(settingOpenAtom);
return (
<>
{/* main */}
<div className="flex h-full w-[calc(100vw-900px)] flex-col px-10">
{/* chat list */}
<ChatList />
{/* actions */}
<Actions />
{/* inputs */}
<Input />
</div>
{/* 左侧 */}
<Drawer open={settingOpen} position="left" width={448} destroyOnClose>
<Left />
</Drawer>
{/* 右侧设置 */}
<Drawer open={settingOpen} position="right" width={448} destroyOnClose>
<SettingForm />
</Drawer>
{/* 设置按钮 */}
<div
className={cn(
'absolute top-8 right-10 h-10 w-10 select-none hover:cursor-pointer',
'text-text-color/10 hover:text-text-color/20'
)}
onClick={() => setSettingOpen(!settingOpen)}
>
{settingOpen ? <FullScreenIcon /> : <ExitFullScreenIcon />}
</div>
</>
);
}