fix: fix dataset-page's bugs (#8786)

### What problem does this PR solve?

fix dataset-page's bugs,Input component supports icon, added Radio
component, and removed antd from chunk-result-bar page [#3221
](https://github.com/infiniflow/ragflow/issues/3221)

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/components/chunk-result-bar/index.tsx

@@ -1,18 +1,26 @@
-import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
-import { useTranslate } from '@/hooks/common-hooks';
-import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
+import { Input } from '@/components/originui/input';
+import { Button } from '@/components/ui/button';
 import {
-  Button,
-  Input,
   Popover,
-  Radio,
-  RadioChangeEvent,
-  Segmented,
-  SegmentedProps,
-  Space,
-} from 'antd';
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Radio } from '@/components/ui/radio';
+import { useTranslate } from '@/hooks/common-hooks';
+import { cn } from '@/lib/utils';
+import { SearchOutlined } from '@ant-design/icons';
+import { ListFilter, Plus } from 'lucide-react';
+import { useState } from 'react';
 import { ChunkTextMode } from '../../constant';
-
+interface ChunkResultBarProps {
+  changeChunkTextMode: React.Dispatch<React.SetStateAction<string | number>>;
+  available: number | undefined;
+  selectAllChunk: (value: boolean) => void;
+  handleSetAvailable: (value: number | undefined) => void;
+  createChunk: () => void;
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  searchString: string;
+}
 export default ({
   changeChunkTextMode,
   available,
@@ -21,52 +29,75 @@ export default ({
   createChunk,
   handleInputChange,
   searchString,
-}) => {
+}: ChunkResultBarProps) => {
   const { t } = useTranslate('chunk');
-
-  const handleFilterChange = (e: RadioChangeEvent) => {
+  const [textSelectValue, setTextSelectValue] = useState<string | number>(
+    ChunkTextMode.Full,
+  );
+  const handleFilterChange = (e: string | number) => {
+    const value = e === -1 ? undefined : (e as number);
     selectAllChunk(false);
-    handleSetAvailable(e.target.value);
+    handleSetAvailable(value);
   };
   const filterContent = (
-    <Radio.Group onChange={handleFilterChange} value={available}>
-      <Space direction="vertical">
-        <Radio value={undefined}>{t('all')}</Radio>
-        <Radio value={1}>{t('enabled')}</Radio>
-        <Radio value={0}>{t('disabled')}</Radio>
-      </Space>
-    </Radio.Group>
+    <div className="w-[200px]">
+      <Radio.Group onChange={handleFilterChange} value={available}>
+        <div className="flex flex-col gap-2 p-4">
+          <Radio value={-1}>{t('all')}</Radio>
+          <Radio value={1}>{t('enabled')}</Radio>
+          <Radio value={0}>{t('disabled')}</Radio>
+        </div>
+      </Radio.Group>
+    </div>
   );
+  const textSelectOptions = [
+    { label: t(ChunkTextMode.Full), value: ChunkTextMode.Full },
+    { label: t(ChunkTextMode.Ellipse), value: ChunkTextMode.Ellipse },
+  ];
 
+  const changeTextSelectValue = (value: string | number) => {
+    setTextSelectValue(value);
+    changeChunkTextMode(value);
+  };
   return (
     <div className="flex pr-[25px]">
-      <Segmented
-        options={[
-          { label: t(ChunkTextMode.Full), value: ChunkTextMode.Full },
-          { label: t(ChunkTextMode.Ellipse), value: ChunkTextMode.Ellipse },
-        ]}
-        onChange={changeChunkTextMode as SegmentedProps['onChange']}
-      />
+      <div className="flex items-center gap-4 bg-card text-muted-foreground w-fit h-[35px] rounded-md px-4 py-2 text-base">
+        {textSelectOptions.map((option) => (
+          <div
+            key={option.value}
+            className={cn('flex items-center cursor-pointer', {
+              'text-white': option.value === textSelectValue,
+            })}
+            onClick={() => changeTextSelectValue(option.value)}
+          >
+            {option.label}
+          </div>
+        ))}
+      </div>
       <div className="ml-auto"></div>
       <Input
+        className="bg-card text-muted-foreground"
         style={{ width: 200 }}
-        size="middle"
         placeholder={t('search')}
-        prefix={<SearchOutlined />}
-        allowClear
+        icon={<SearchOutlined />}
         onChange={handleInputChange}
         value={searchString}
       />
       <div className="w-[20px]"></div>
-      <Popover content={filterContent} placement="bottom" arrow={false}>
-        <Button icon={<FilterIcon />} />
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button className="bg-card text-muted-foreground hover:bg-card">
+            <ListFilter />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-0 w-[200px]">
+          {filterContent}
+        </PopoverContent>
       </Popover>
       <div className="w-[20px]"></div>
-      <Button
-        icon={<PlusOutlined />}
-        type="primary"
-        onClick={() => createChunk()}
-      />
+      <Button onClick={() => createChunk()}>
+        <Plus size={44} />
+      </Button>
     </div>
   );
 };

web/src/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk/index.tsx

@@ -20,12 +20,17 @@ import ChunkResultBar from './components/chunk-result-bar';
 import CheckboxSets from './components/chunk-result-bar/checkbox-sets';
 import DocumentHeader from './components/document-preview/document-header';
 
+import { PageHeader } from '@/components/page-header';
 import message from '@/components/ui/message';
 import {
   RAGFlowPagination,
   RAGFlowPaginationType,
 } from '@/components/ui/ragflow-pagination';
 import { Spin } from '@/components/ui/spin';
+import {
+  QueryStringMap,
+  useNavigatePage,
+} from '@/hooks/logic-hooks/navigate-hooks';
 import styles from './index.less';
 
 const Chunk = () => {
@@ -56,7 +61,7 @@ const Chunk = () => {
     chunkUpdatingVisible,
     documentId,
   } = useUpdateChunk();
-
+  const { navigateToDataset, getQueryString } = useNavigatePage();
   useEffect(() => {
     setChunkList(data);
   }, [data]);
@@ -159,6 +164,10 @@ const Chunk = () => {
 
   return (
     <>
+      <PageHeader
+        title="Back"
+        back={navigateToDataset(getQueryString(QueryStringMap.id) as string)}
+      ></PageHeader>
       <div className={styles.chunkPage}>
         <div className="flex flex-1 gap-8">
           <div className="w-2/5">