Feat: Add ChunkedResultPanel #3221 (#5085)

### What problem does this PR solve?

Feat: Add ChunkedResultPanel #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu 2025-02-18 17:53:51 +08:00 committed by GitHub
parent 3356de55ed
commit 18e43831bc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 69 additions and 10 deletions

View File

@ -1,4 +1,6 @@
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import { Annoyed } from 'lucide-react';
interface ParsedPageCardProps { interface ParsedPageCardProps {
page: string; page: string;
@ -20,14 +22,23 @@ export function ParsedPageCard({ page, content }: ParsedPageCardProps) {
interface ChunkCardProps { interface ChunkCardProps {
activated: boolean; activated: boolean;
content: string;
} }
export function ChunkCard({}: ChunkCardProps) { export function ChunkCard({ content }: ChunkCardProps) {
return ( return (
<Card className="bg-colors-outline-neutral-standard border-colors-outline-neutral-strong rounded-3xl"> <Card className="bg-colors-outline-neutral-standard border-colors-outline-neutral-strong rounded-3xl">
<CardContent className="p-4"> <CardContent className="p-4">
<p className="text-colors-text-neutral-standard text-base">{}</p> <div className="flex justify-between items-center">
<div className="text-colors-text-neutral-strong text-lg mt-2">{}</div> <Annoyed />
<div className="flex items-center space-x-2">
<Switch />
<span className="text-colors-text-neutral-strong">Active</span>
</div>
</div>
<div className="text-colors-text-neutral-strong text-lg mt-2 line-clamp-4">
{content}
</div>
</CardContent> </CardContent>
</Card> </Card>
); );

View File

@ -1,10 +1,13 @@
import ChunkedResultPanel from '../chunked-result-panel';
import ParsedResultPanel from '../parsed-result-panel'; import ParsedResultPanel from '../parsed-result-panel';
export default function ChunkResult() { export default function ChunkResult() {
return ( return (
<section className="flex"> <section className="flex">
<ParsedResultPanel></ParsedResultPanel> <ParsedResultPanel></ParsedResultPanel>
<div className="flex-1"></div> <div className="flex-1">
<ChunkedResultPanel></ChunkedResultPanel>
</div>
</section> </section>
); );
} }

View File

@ -1,11 +1,15 @@
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Copy } from 'lucide-react'; import { Copy } from 'lucide-react';
export function ChunkToolbar() { interface ChunkToolbarProps {
text: string;
}
export function ChunkToolbar({ text }: ChunkToolbarProps) {
return ( return (
<div className="flex justify-between px-9"> <div className="flex justify-between px-9">
<span className="text-colors-text-neutral-strong text-3xl font-bold"> <span className="text-colors-text-neutral-strong text-3xl font-bold">
Parsed results {text}
</span> </span>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Button variant={'icon'} size={'icon'}> <Button variant={'icon'} size={'icon'}>

View File

@ -0,0 +1,31 @@
import { ChunkCard } from './chunk-card';
import { ChunkToolbar } from './chunk-toolbar';
const list = new Array(10).fill({
page: 'page 1',
content: `Word并不像 TeXLaTeX为我们提供了合适的定理环境因此需要我们另想办法。
1
使
1.1
仿
1.2
Theorem里面Theorem工具栏SetTheorem`,
});
export default function ChunkedResultPanel() {
return (
<div className="flex-1 py-6 border-l space-y-6">
<ChunkToolbar text="Chunked results"></ChunkToolbar>
<div className="space-y-6 overflow-auto max-h-[87vh] px-9">
{list.map((x, idx) => (
<ChunkCard key={idx} content={x.content} activated></ChunkCard>
))}
</div>
</div>
);
}

View File

@ -6,7 +6,7 @@ import {
useNavigatePage, useNavigatePage,
} from '@/hooks/logic-hooks/navigate-hooks'; } from '@/hooks/logic-hooks/navigate-hooks';
import { Routes } from '@/routes'; import { Routes } from '@/routes';
import { EllipsisVertical } from 'lucide-react'; import { EllipsisVertical, Save } from 'lucide-react';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { Outlet, useLocation } from 'umi'; import { Outlet, useLocation } from 'umi';
@ -57,6 +57,7 @@ export default function ChunkPage() {
<EllipsisVertical /> <EllipsisVertical />
</Button> </Button>
<Button variant={'tertiary'} size={'sm'}> <Button variant={'tertiary'} size={'sm'}>
<Save />
Save Save
</Button> </Button>
</div> </div>

View File

@ -20,8 +20,8 @@ const list = new Array(10).fill({
export default function ParsedResultPanel() { export default function ParsedResultPanel() {
return ( return (
<div className="flex-1 py-6 border-l space-y-6"> <div className="flex-1 py-6 border-l space-y-6">
<ChunkToolbar></ChunkToolbar> <ChunkToolbar text="Parsed results"></ChunkToolbar>
<div className="space-y-6 overflow-auto max-h-[94vh] px-9"> <div className="space-y-6 overflow-auto max-h-[87vh] px-9">
{list.map((x, idx) => ( {list.map((x, idx) => (
<ParsedPageCard <ParsedPageCard
key={idx} key={idx}

View File

@ -1,3 +1,12 @@
import ChunkedResultPanel from '../chunked-result-panel';
export default function ResultView() { export default function ResultView() {
return <div>ResultView</div>; return (
<section className="flex">
<div className="flex-1">xxx</div>
<div className="flex-1">
<ChunkedResultPanel></ChunkedResultPanel>
</div>
</section>
);
} }