57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { cn } from '@/lib';
|
||
|
|
import SettingForm from './Right';
|
||
|
|
import { useAtom } from 'jotai';
|
||
|
|
import { settingOpenAtom } from './atoms';
|
||
|
|
import Main from './Main';
|
||
|
|
import Left from './Left';
|
||
|
|
import { Drawer } from '@/components';
|
||
|
|
import './index.css';
|
||
|
|
import { useRef } from 'react';
|
||
|
|
import { ExitFullScreenIcon, FullScreenIcon } from '@/assets/common';
|
||
|
|
|
||
|
|
export default function CharacterChat() {
|
||
|
|
const [settingOpen, setSettingOpen] = useAtom(settingOpenAtom);
|
||
|
|
const container = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={container}
|
||
|
|
className="relative flex h-full w-full justify-center overflow-hidden"
|
||
|
|
>
|
||
|
|
<Main />
|
||
|
|
{/* 设置按钮 */}
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
'absolute top-8 right-10 z-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>
|
||
|
|
{/* 左侧 */}
|
||
|
|
<Drawer
|
||
|
|
open={settingOpen}
|
||
|
|
position="left"
|
||
|
|
width={448}
|
||
|
|
destroyOnClose
|
||
|
|
container={container.current}
|
||
|
|
>
|
||
|
|
<Left />
|
||
|
|
</Drawer>
|
||
|
|
{/* 右侧设置 */}
|
||
|
|
<Drawer
|
||
|
|
open={settingOpen}
|
||
|
|
position="right"
|
||
|
|
width={448}
|
||
|
|
destroyOnClose
|
||
|
|
container={container.current}
|
||
|
|
>
|
||
|
|
<SettingForm />
|
||
|
|
</Drawer>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|