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)

web/src/pages/chunk/chunk-card.tsx

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

web/src/pages/chunk/chunk-result/index.tsx

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

web/src/pages/chunk/chunk-toolbar.tsx

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

web/src/pages/chunk/chunked-result-panel.tsx

@@ -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并不像 TeX／LaTeX为我们提供了合适的定理环境，因此需要我们另想办法。
+  
+  第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>
+  );
+}

web/src/pages/chunk/index.tsx

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

web/src/pages/chunk/parsed-result-panel.tsx

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

web/src/pages/chunk/result-view/index.tsx

@@ -1,3 +1,12 @@
+import ChunkedResultPanel from '../chunked-result-panel';
+
 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>
+  );
 }