Feat: Upload document #3221 (#7209)

### What problem does this PR solve?

Feat: Upload document #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/datasets/dataset-card.tsx

@@ -0,0 +1,64 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { IKnowledge } from '@/interfaces/database/knowledge';
+import { formatDate } from '@/utils/date';
+import { Ellipsis } from 'lucide-react';
+import { DatasetDropdown } from './dataset-dropdown';
+import { useDisplayOwnerName } from './use-display-owner';
+import { useRenameDataset } from './use-rename-dataset';
+
+export type DatasetCardProps = {
+  dataset: IKnowledge;
+} & Pick<ReturnType<typeof useRenameDataset>, 'showDatasetRenameModal'>;
+
+export function DatasetCard({
+  dataset,
+  showDatasetRenameModal,
+}: DatasetCardProps) {
+  const { navigateToDataset } = useNavigatePage();
+  const displayOwnerName = useDisplayOwnerName();
+
+  const owner = displayOwnerName(dataset.tenant_id, dataset.nickname);
+
+  return (
+    <Card
+      key={dataset.id}
+      className="bg-colors-background-inverse-weak flex-1"
+      onClick={navigateToDataset(dataset.id)}
+    >
+      <CardContent className="p-4">
+        <section className="flex justify-between mb-4">
+          <div className="flex  gap-2">
+            <Avatar className="w-[70px] h-[70px] rounded-lg">
+              <AvatarImage src={dataset.avatar} />
+              <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+            </Avatar>
+            {owner && <Badge className="h-5">{owner}</Badge>}
+          </div>
+          <DatasetDropdown
+            showDatasetRenameModal={showDatasetRenameModal}
+            dataset={dataset}
+          >
+            <Button variant="ghost" size="icon">
+              <Ellipsis />
+            </Button>
+          </DatasetDropdown>
+        </section>
+        <div className="flex justify-between items-end">
+          <div>
+            <h3 className="text-lg font-semibold mb-2 line-clamp-1">
+              {dataset.name}
+            </h3>
+            <p className="text-sm opacity-80">{dataset.doc_num} files</p>
+            <p className="text-sm opacity-80">
+              Created {formatDate(dataset.update_time)}
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

web/src/pages/datasets/dataset-dropdown.tsx

@@ -9,7 +9,7 @@ import {
 import { useDeleteKnowledge } from '@/hooks/use-knowledge-request';
 import { IKnowledge } from '@/interfaces/database/knowledge';
 import { PenLine, Trash2 } from 'lucide-react';
-import { PropsWithChildren, useCallback } from 'react';
+import { MouseEventHandler, PropsWithChildren, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRenameDataset } from './use-rename-dataset';
 
@@ -24,11 +24,16 @@ export function DatasetDropdown({
   const { t } = useTranslation();
   const { deleteKnowledge } = useDeleteKnowledge();
 
-  const handleShowDatasetRenameModal = useCallback(() => {
-    showDatasetRenameModal(dataset);
-  }, [dataset, showDatasetRenameModal]);
+  const handleShowDatasetRenameModal: MouseEventHandler<HTMLDivElement> =
+    useCallback(
+      (e) => {
+        e.stopPropagation();
+        showDatasetRenameModal(dataset);
+      },
+      [dataset, showDatasetRenameModal],
+    );
 
-  const handleDelete = useCallback(() => {
+  const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
     deleteKnowledge(dataset.id);
   }, [dataset.id, deleteKnowledge]);
 
@@ -43,7 +48,12 @@ export function DatasetDropdown({
         <ConfirmDeleteDialog onOk={handleDelete}>
           <DropdownMenuItem
             className="text-text-delete-red"
-            onSelect={(e) => e.preventDefault()}
+            onSelect={(e) => {
+              e.preventDefault();
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
           >
             {t('common.delete')} <Trash2 />
           </DropdownMenuItem>

web/src/pages/datasets/index.tsx

@@ -1,21 +1,14 @@
 import ListFilterBar from '@/components/list-filter-bar';
 import { RenameDialog } from '@/components/rename-dialog';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchNextKnowledgeListByPage } from '@/hooks/use-knowledge-request';
-import { formatDate } from '@/utils/date';
 import { pick } from 'lodash';
-import { ChevronRight, Ellipsis, Plus } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { PropsWithChildren, useCallback } from 'react';
+import { DatasetCard } from './dataset-card';
 import { DatasetCreatingDialog } from './dataset-creating-dialog';
-import { DatasetDropdown } from './dataset-dropdown';
 import { DatasetsFilterPopover } from './datasets-filter-popover';
 import { DatasetsPagination } from './datasets-pagination';
 import { useSaveKnowledge } from './hooks';
-import { useDisplayOwnerName } from './use-display-owner';
 import { useRenameDataset } from './use-rename-dataset';
 
 export default function Datasets() {
@@ -26,7 +19,6 @@ export default function Datasets() {
     onCreateOk,
     loading: creatingLoading,
   } = useSaveKnowledge();
-  const { navigateToDataset } = useNavigatePage();
 
   const {
     kbs,
@@ -48,8 +40,6 @@ export default function Datasets() {
     showDatasetRenameModal,
   } = useRenameDataset();
 
-  const displayOwnerName = useDisplayOwnerName();
-
   const handlePageChange = useCallback(
     (page: number, pageSize?: number) => {
       setPagination({ page, pageSize });
@@ -76,52 +66,12 @@ export default function Datasets() {
       </ListFilterBar>
       <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8">
         {kbs.map((dataset) => {
-          const owner = displayOwnerName(dataset.tenant_id, dataset.nickname);
           return (
-            <Card
+            <DatasetCard
+              dataset={dataset}
               key={dataset.id}
-              className="bg-colors-background-inverse-weak flex-1"
-            >
-              <CardContent className="p-4">
-                <section className="flex justify-between mb-4">
-                  <div className="flex  gap-2">
-                    <Avatar className="w-[70px] h-[70px] rounded-lg">
-                      <AvatarImage src={dataset.avatar} />
-                      <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                    </Avatar>
-                    {owner && <Badge className="h-5">{owner}</Badge>}
-                  </div>
-                  <DatasetDropdown
-                    showDatasetRenameModal={showDatasetRenameModal}
-                    dataset={dataset}
-                  >
-                    <Button variant="ghost" size="icon">
-                      <Ellipsis />
-                    </Button>
-                  </DatasetDropdown>
-                </section>
-                <div className="flex justify-between items-end">
-                  <div>
-                    <h3 className="text-lg font-semibold mb-2">
-                      {dataset.name}
-                    </h3>
-                    <p className="text-sm opacity-80">
-                      {dataset.doc_num} files
-                    </p>
-                    <p className="text-sm opacity-80">
-                      Created {formatDate(dataset.update_time)}
-                    </p>
-                  </div>
-                  <Button
-                    variant="icon"
-                    size="icon"
-                    onClick={navigateToDataset(dataset.id)}
-                  >
-                    <ChevronRight className="h-6 w-6" />
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
+              showDatasetRenameModal={showDatasetRenameModal}
+            ></DatasetCard>
           );
         })}
       </div>