55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
import { useQuery } from '@tanstack/react-query';
|
||
import { Header } from '@/components/layout/header';
|
||
import { Main } from '@/components/layout/main';
|
||
import { ProfileDropdown } from '@/components/profile-dropdown';
|
||
import { Search } from '@/components/search';
|
||
import { ThemeSwitch } from '@/components/theme-switch';
|
||
import { CharactersTable } from './components/characters-table';
|
||
import { CharacterDialogProvider } from './components/character-dialog-context';
|
||
import { CharactersPrimaryButtons } from './components/characters-primary-buttons';
|
||
import { CharacterDialog } from './components/character-dialog';
|
||
import { getCharacters } from './data/api';
|
||
|
||
export default function Characters() {
|
||
const { data: characters, isLoading, error } = useQuery({
|
||
queryKey: ['characters'],
|
||
queryFn: getCharacters,
|
||
});
|
||
|
||
if (error) {
|
||
return <div>加载角色卡失败：{(error as Error).message}</div>;
|
||
}
|
||
|
||
return (
|
||
<CharacterDialogProvider>
|
||
<Header fixed>
|
||
<Search />
|
||
<div className='ms-auto flex items-center space-x-4'>
|
||
<ThemeSwitch />
|
||
<ProfileDropdown />
|
||
</div>
|
||
</Header>
|
||
|
||
<Main className='flex flex-1 flex-col gap-4 sm:gap-6'>
|
||
<div className='flex flex-wrap items-end justify-between gap-2'>
|
||
<div>
|
||
<h2 className='text-2xl font-bold tracking-tight'>角色卡</h2>
|
||
<p className='text-muted-foreground'>
|
||
管理你的 AI 角色卡与相关配置。
|
||
</p>
|
||
</div>
|
||
<CharactersPrimaryButtons />
|
||
</div>
|
||
|
||
{isLoading ? (
|
||
<div>加载中...</div>
|
||
) : (
|
||
<CharactersTable data={characters || []} />
|
||
)}
|
||
</Main>
|
||
|
||
<CharacterDialog />
|
||
</CharacterDialogProvider>
|
||
);
|
||
}
|