Style-dataset-2.5 (#2580)

* style: dataset detail page 2.5 * fix merge error * fix: flash bug * fix: build error * revert: 滚动变回分页
2025-07-22 12:20:34 +00:00 · 2024-09-02 10:00:55 +08:00
parent 060492dbf7
commit fdab383b26
14 changed files with 473 additions and 311 deletions
--- a/packages/web/components/common/Icon/constants.ts
+++ b/packages/web/components/common/Icon/constants.ts
@@ -2,6 +2,7 @@

 export const iconPaths = {
  book: () => import('./icons/book.svg'),
+  visible: () => import('./icons/visible.svg'),
  change: () => import('./icons/change.svg'),
  chatSend: () => import('./icons/chatSend.svg'),
  closeSolid: () => import('./icons/closeSolid.svg'),
--- a/packages/web/components/common/Icon/icons/book.svg
+++ b/packages/web/components/common/Icon/icons/book.svg
@@ -1,3 +1,3 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.18118 2.74428L4.49007 2.74428C5.17179 2.74427 5.72618 2.74427 6.17608 2.78102C6.64077 2.81899 7.0558 2.89966 7.44194 3.09642C7.85435 3.30655 8.21445 3.60159 8.50012 3.95943C8.78579 3.60159 9.14588 3.30655 9.55829 3.09642C9.94444 2.89966 10.3595 2.81899 10.8242 2.78102C11.2741 2.74427 11.8284 2.74427 12.5102 2.74428L12.8191 2.74428C13.1499 2.74426 13.4396 2.74425 13.6792 2.76382C13.9333 2.78459 14.1925 2.83086 14.4436 2.95881C14.8139 3.14753 15.1151 3.44864 15.3038 3.81901C15.4317 4.07013 15.478 4.32926 15.4988 4.58343C15.5183 4.82296 15.5183 5.11271 15.5183 5.44351V11.5565C15.5183 11.8873 15.5183 12.177 15.4988 12.4166C15.478 12.6707 15.4317 12.9299 15.3038 13.181C15.1151 13.5514 14.8139 13.8525 14.4436 14.0412C14.1925 14.1691 13.9333 14.2154 13.6792 14.2362C13.4396 14.2557 13.1499 14.2557 12.819 14.2557H4.18119C3.85038 14.2557 3.56062 14.2557 3.32108 14.2362C3.06691 14.2154 2.80778 14.1691 2.55666 14.0412C2.1863 13.8525 1.88518 13.5514 1.69647 13.181C1.56852 12.9299 1.52225 12.6707 1.50148 12.4166C1.48191 12.177 1.48192 11.8873 1.48193 11.5565V5.44352C1.48192 5.11272 1.48191 4.82296 1.50148 4.58343C1.52225 4.32926 1.56852 4.07013 1.69647 3.81901C1.88518 3.44864 2.1863 3.14753 2.55666 2.95881C2.80778 2.83086 3.06691 2.78459 3.32108 2.76382C3.56062 2.74425 3.85037 2.74426 4.18118 2.74428ZM7.79425 7.49003C7.79425 6.77134 7.7937 6.27477 7.76219 5.88914C7.73136 5.51176 7.67443 5.3032 7.59598 5.14924C7.42158 4.80696 7.1433 4.52869 6.80103 4.35429C6.64706 4.27584 6.43851 4.21891 6.06112 4.18808C5.6755 4.15657 5.17893 4.15602 4.46024 4.15602H4.20775C3.84258 4.15602 3.61115 4.15657 3.43604 4.17088C3.26918 4.18451 3.21652 4.20704 3.19758 4.21669C3.09285 4.27005 3.0077 4.3552 2.95434 4.45993C2.94469 4.47886 2.92217 4.53152 2.90853 4.69839C2.89423 4.87349 2.89368 5.10492 2.89368 5.47009V11.5299C2.89368 11.8951 2.89423 12.1265 2.90853 12.3016C2.92217 12.4685 2.94469 12.5211 2.95434 12.5401C3.0077 12.6448 3.09285 12.73 3.19758 12.7833C3.21652 12.793 3.26918 12.8155 3.43604 12.8291C3.61115 12.8434 3.84258 12.844 4.20775 12.844H7.79425V7.49003ZM9.20599 12.844V7.49003C9.20599 6.77134 9.20654 6.27477 9.23805 5.88914C9.26888 5.51176 9.32581 5.3032 9.40425 5.14924C9.57865 4.80696 9.85693 4.52869 10.1992 4.35429C10.3532 4.27584 10.5617 4.21891 10.9391 4.18808C11.3247 4.15657 11.8213 4.15602 12.54 4.15602H12.7925C13.1577 4.15602 13.3891 4.15657 13.5642 4.17088C13.7311 4.18451 13.7837 4.20704 13.8027 4.21669C13.9074 4.27005 13.9925 4.3552 14.0459 4.45993C14.0555 4.47886 14.0781 4.53152 14.0917 4.69839C14.106 4.87349 14.1066 5.10492 14.1066 5.47009V11.5299C14.1066 11.8951 14.106 12.1265 14.0917 12.3016C14.0781 12.4685 14.0555 12.5211 14.0459 12.5401C13.9925 12.6448 13.9074 12.73 13.8027 12.7833C13.7837 12.793 13.7311 12.8155 13.5642 12.8291C13.3891 12.8434 13.1577 12.844 12.7925 12.844H9.20599Z" fill="#2B5FD9"/>
+<svg  viewBox="0 0 17 17"  xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.18118 2.74428L4.49007 2.74428C5.17179 2.74427 5.72618 2.74427 6.17608 2.78102C6.64077 2.81899 7.0558 2.89966 7.44194 3.09642C7.85435 3.30655 8.21445 3.60159 8.50012 3.95943C8.78579 3.60159 9.14588 3.30655 9.55829 3.09642C9.94444 2.89966 10.3595 2.81899 10.8242 2.78102C11.2741 2.74427 11.8284 2.74427 12.5102 2.74428L12.8191 2.74428C13.1499 2.74426 13.4396 2.74425 13.6792 2.76382C13.9333 2.78459 14.1925 2.83086 14.4436 2.95881C14.8139 3.14753 15.1151 3.44864 15.3038 3.81901C15.4317 4.07013 15.478 4.32926 15.4988 4.58343C15.5183 4.82296 15.5183 5.11271 15.5183 5.44351V11.5565C15.5183 11.8873 15.5183 12.177 15.4988 12.4166C15.478 12.6707 15.4317 12.9299 15.3038 13.181C15.1151 13.5514 14.8139 13.8525 14.4436 14.0412C14.1925 14.1691 13.9333 14.2154 13.6792 14.2362C13.4396 14.2557 13.1499 14.2557 12.819 14.2557H4.18119C3.85038 14.2557 3.56062 14.2557 3.32108 14.2362C3.06691 14.2154 2.80778 14.1691 2.55666 14.0412C2.1863 13.8525 1.88518 13.5514 1.69647 13.181C1.56852 12.9299 1.52225 12.6707 1.50148 12.4166C1.48191 12.177 1.48192 11.8873 1.48193 11.5565V5.44352C1.48192 5.11272 1.48191 4.82296 1.50148 4.58343C1.52225 4.32926 1.56852 4.07013 1.69647 3.81901C1.88518 3.44864 2.1863 3.14753 2.55666 2.95881C2.80778 2.83086 3.06691 2.78459 3.32108 2.76382C3.56062 2.74425 3.85037 2.74426 4.18118 2.74428ZM7.79425 7.49003C7.79425 6.77134 7.7937 6.27477 7.76219 5.88914C7.73136 5.51176 7.67443 5.3032 7.59598 5.14924C7.42158 4.80696 7.1433 4.52869 6.80103 4.35429C6.64706 4.27584 6.43851 4.21891 6.06112 4.18808C5.6755 4.15657 5.17893 4.15602 4.46024 4.15602H4.20775C3.84258 4.15602 3.61115 4.15657 3.43604 4.17088C3.26918 4.18451 3.21652 4.20704 3.19758 4.21669C3.09285 4.27005 3.0077 4.3552 2.95434 4.45993C2.94469 4.47886 2.92217 4.53152 2.90853 4.69839C2.89423 4.87349 2.89368 5.10492 2.89368 5.47009V11.5299C2.89368 11.8951 2.89423 12.1265 2.90853 12.3016C2.92217 12.4685 2.94469 12.5211 2.95434 12.5401C3.0077 12.6448 3.09285 12.73 3.19758 12.7833C3.21652 12.793 3.26918 12.8155 3.43604 12.8291C3.61115 12.8434 3.84258 12.844 4.20775 12.844H7.79425V7.49003ZM9.20599 12.844V7.49003C9.20599 6.77134 9.20654 6.27477 9.23805 5.88914C9.26888 5.51176 9.32581 5.3032 9.40425 5.14924C9.57865 4.80696 9.85693 4.52869 10.1992 4.35429C10.3532 4.27584 10.5617 4.21891 10.9391 4.18808C11.3247 4.15657 11.8213 4.15602 12.54 4.15602H12.7925C13.1577 4.15602 13.3891 4.15657 13.5642 4.17088C13.7311 4.18451 13.7837 4.20704 13.8027 4.21669C13.9074 4.27005 13.9925 4.3552 14.0459 4.45993C14.0555 4.47886 14.0781 4.53152 14.0917 4.69839C14.106 4.87349 14.1066 5.10492 14.1066 5.47009V11.5299C14.1066 11.8951 14.106 12.1265 14.0917 12.3016C14.0781 12.4685 14.0555 12.5211 14.0459 12.5401C13.9925 12.6448 13.9074 12.73 13.8027 12.7833C13.7837 12.793 13.7311 12.8155 13.5642 12.8291C13.3891 12.8434 13.1577 12.844 12.7925 12.844H9.20599Z" />
 </svg>
--- a/packages/web/components/common/Icon/icons/visible.svg
+++ b/packages/web/components/common/Icon/icons/visible.svg
@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00011 6.3335C8.44214 6.3335 8.86606 6.50909 9.17863 6.82165C9.49119 7.13421 9.66678 7.55814 9.66678 8.00016C9.66678 8.44219 9.49119 8.86611 9.17863 9.17867C8.86606 9.49124 8.44214 9.66683 8.00011 9.66683C7.55809 9.66683 7.13416 9.49124 6.8216 9.17867C6.50904 8.86611 6.33345 8.44219 6.33345 8.00016C6.33345 7.55814 6.50904 7.13421 6.8216 6.82165C7.13416 6.50909 7.55809 6.3335 8.00011 6.3335ZM8.00011 3.8335C10.4794 3.8335 12.6356 5.20988 13.7537 7.23977C13.862 7.43633 13.9161 7.53461 13.9567 7.73345C13.9835 7.86447 13.9835 8.13586 13.9567 8.26688C13.9161 8.46572 13.862 8.564 13.7537 8.76055C12.6356 10.7905 10.4794 12.1668 8.00011 12.1668C5.52085 12.1668 3.36466 10.7905 2.2465 8.76055C2.13823 8.564 2.0841 8.46572 2.0435 8.26688C2.01675 8.13586 2.01675 7.86447 2.0435 7.73345C2.0841 7.53461 2.13823 7.43633 2.2465 7.23977C3.36466 5.20988 5.52085 3.8335 8.00011 3.8335ZM3.64644 7.11141C3.49828 7.30756 3.4242 7.40563 3.35714 7.65897C3.31559 7.81594 3.31559 8.18438 3.35714 8.34135C3.4242 8.5947 3.49828 8.69277 3.64644 8.88891C4.04722 9.41949 4.54344 9.87474 5.1126 10.2297C5.97881 10.77 6.97922 11.0565 8.00011 11.0565C9.021 11.0565 10.0214 10.77 10.8876 10.2297C11.4568 9.87474 11.953 9.41949 12.3538 8.88891C12.5019 8.69277 12.576 8.5947 12.6431 8.34135C12.6846 8.18438 12.6846 7.81594 12.6431 7.65897C12.576 7.40563 12.5019 7.30756 12.3538 7.11141C11.953 6.58083 11.4568 6.12558 10.8876 5.77058C10.0214 5.2303 9.021 4.94387 8.00011 4.94387C6.97922 4.94387 5.97881 5.2303 5.1126 5.77058C4.54344 6.12558 4.04722 6.58083 3.64644 7.11141Z" />
+</svg>
--- a/packages/web/i18n/en/common.json
+++ b/packages/web/i18n/en/common.json
@@ -443,7 +443,8 @@
      "tool_label": {
        "doc": "Use documentation",
        "github": "GitHub address",
-        "price": "Billing instructions"
+        "price": "Billing instructions",
+        "view_doc": "View documentation"
      },
      "tts": {
        "Close": "Do not use",
@@ -659,6 +660,7 @@
        "Search data placeholder": "Search related data",
        "Too Long": "Total length too long",
        "Total Amount": "{{total}} sets",
+        "empty_index": "No custom index",
        "group": "Group",
        "unit": "items"
      },
@@ -1062,7 +1064,8 @@
        "Content": "Data content",
        "Course": "Documentation",
        "Delete": "Delete data",
-        "Index": "Data Index ({{amount}})"
+        "Index": "Data Index ({{amount}})",
+        "divide_content": "Chunked content"
      },
      "input is empty": "Data content cannot be empty"
    },
--- a/packages/web/i18n/zh/common.json
+++ b/packages/web/i18n/zh/common.json
@@ -443,7 +443,8 @@
      "tool_label": {
        "doc": "使用文档",
        "github": "GitHub地址",
-        "price": "计费说明"
+        "price": "计费说明",
+        "view_doc": "查看说明文档"
      },
      "tts": {
        "Close": "不使用",
@@ -658,6 +659,7 @@
        "Search data placeholder": "搜索相关数据",
        "Too Long": "总长度超长了",
        "Total Amount": "{{total}} 组",
+        "empty_index": "无自定义索引",
        "group": "组",
        "unit": "条"
      },
@@ -1061,7 +1063,8 @@
        "Content": "数据内容",
        "Course": "说明文档",
        "Delete": "删除数据",
-        "Index": "数据索引（{{amount}}）"
+        "Index": "数据索引({{amount}})",
+        "divide_content": "分块内容"
      },
      "input is empty": "数据内容不能为空 "
    },
--- a/projects/app/src/components/common/ParentPaths/index.tsx
+++ b/projects/app/src/components/common/ParentPaths/index.tsx
@@ -60,7 +60,7 @@ const ParentPaths = (props: {
            {item.parentName}
          </Box>
          {i !== concatPaths.length - 1 && (
-            <Box mx={1.5} color={'myGray.500'}>
+            <Box mx={1} color={'myGray.500'}>
              /
            </Box>
          )}
--- a/projects/app/src/components/core/app/InputGuideConfig.tsx
+++ b/projects/app/src/components/core/app/InputGuideConfig.tsx
@@ -150,7 +150,7 @@ const InputGuideConfig = ({
                    alignItems={'center'}
                    cursor={'pointer'}
                  >
-                    <MyIcon name={'book'} ml={4} mr={1} />
+                    <MyIcon name={'book'} w={'17px'} ml={4} mr={1} color={'myGray.600'} />
                    {commonT('common.Documents')}
                  </Flex>
                  <Box flex={'1 0 0'} />
--- a/projects/app/src/components/core/dataset/QuoteItem.tsx
+++ b/projects/app/src/components/core/dataset/QuoteItem.tsx
@@ -275,9 +275,6 @@ const QuoteItem = ({
          onSuccess={() => {
            console.log('更新引用成功');
          }}
-          onDelete={() => {
-            console.log('删除引用成功');
-          }}
          dataId={editInputData.dataId}
          collectionId={editInputData.collectionId}
        />
--- a/projects/app/src/pages/dataset/detail/components/DataCard.tsx
+++ b/projects/app/src/pages/dataset/detail/components/DataCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useMemo } from 'react';
+import React, { useState, useRef, useMemo, useCallback } from 'react';
 import {
  Box,
  Card,
@@ -69,8 +69,6 @@ const DataCard = () => {
    content: t('common:dataset.Confirm to delete the data'),
    type: 'delete'
  });
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const readSource = getCollectionSourceAndOpen(collectionId);

  const {
    data: datasetDataList,
@@ -136,10 +134,10 @@ const DataCard = () => {
  const isLoading = isRequesting || loading;

  return (
-    <MyBox isLoading={isLoading} position={'relative'} py={[1, 5]} h={'100%'}>
+    <MyBox isLoading={isLoading} position={'relative'} py={[1, 0]} h={'100%'}>
      <Flex ref={BoxRef} flexDirection={'column'} h={'100%'}>
        {/* Header */}
-        <Flex alignItems={'center'} px={5}>
+        <Flex alignItems={'center'} px={6}>
          <Flex className="textEllipsis" flex={'1 0 0'} mr={[3, 5]} alignItems={'center'}>
            <Box>
              <Box alignItems={'center'} gap={2} display={isPc ? 'flex' : ''}>
@@ -174,10 +172,10 @@ const DataCard = () => {
            </Box>
          )}
        </Flex>
-        <Box justifyContent={'center'} px={5} pos={'relative'} w={'100%'}>
+        <Box justifyContent={'center'} px={6} pos={'relative'} w={'100%'}>
          <MyDivider my={'17px'} w={'100%'} />
        </Box>
-        <Flex alignItems={'center'} px={5} pb={4}>
+        <Flex alignItems={'center'} px={6} pb={4}>
          <Flex align={'center'} color={'myGray.500'}>
            <MyIcon name="common/list" mr={2} w={'18px'} />
            <Box as={'span'} fontSize={['sm', '14px']} fontWeight={'500'}>
@@ -227,7 +225,7 @@ const DataCard = () => {
                  '& .forbid-switch': { display: 'flex' },
                  bg: index % 2 === 1 ? 'myGray.200' : 'blue.100'
                }}
-                onClickCapture={(e) => {
+                onClick={(e) => {
                  e.stopPropagation();
                  if (!collection) return;
                  setEditDataId(item._id);
@@ -316,7 +314,7 @@ const DataCard = () => {
                      display={'flex'}
                      p={1}
                      boxShadow={'1'}
-                      icon={<MyIcon name={'common/trash'} w={'14px'} />}
+                      icon={<MyIcon name={'common/trash'} w={'14px'} color={'myGray.600'} />}
                      variant={'whiteDanger'}
                      size={'xsSquare'}
                      aria-label={'delete'}
@@ -355,7 +353,6 @@ const DataCard = () => {
          dataId={editDataId}
          onClose={() => setEditDataId(undefined)}
          onSuccess={() => getData(pageNum)}
-          onDelete={() => getData(pageNum)}
        />
      )}
      <ConfirmModal />
--- a/projects/app/src/pages/dataset/detail/components/InputDataModal.tsx
+++ b/projects/app/src/pages/dataset/detail/components/InputDataModal.tsx
@@ -1,6 +1,14 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Box, Flex, Button, Textarea, useTheme, Grid, HStack } from '@chakra-ui/react';
-import { UseFormRegister, useFieldArray, useForm } from 'react-hook-form';
+import {
+  Control,
+  FieldArrayWithId,
+  UseFieldArrayAppend,
+  UseFieldArrayRemove,
+  UseFormRegister,
+  useFieldArray,
+  useForm
+} from 'react-hook-form';
 import {
  postInsertData2Dataset,
  putDatasetDataById,
@@ -16,7 +24,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
 import { useRequest, useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
-import { getDefaultIndex } from '@fastgpt/global/core/dataset/utils';
+import { getDefaultIndex, getSourceNameIcon } from '@fastgpt/global/core/dataset/utils';
 import { DatasetDataIndexItemType } from '@fastgpt/global/core/dataset/type';
 import SideTabs from '@/components/SideTabs';
 import DeleteIcon from '@fastgpt/web/components/common/Icon/delete';
@@ -27,6 +35,9 @@ import MyBox from '@fastgpt/web/components/common/MyBox';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';
+import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
+import styles from './styles.module.scss';

 export type InputDataType = {
  q: string;
@@ -38,9 +49,7 @@ export type InputDataType = {

 enum TabEnum {
  content = 'content',
-  index = 'index',
-  delete = 'delete',
-  doc = 'doc'
+  index = 'index'
 }

 const InputDataModal = ({
@@ -48,22 +57,20 @@ const InputDataModal = ({
  dataId,
  defaultValue,
  onClose,
-  onSuccess,
-  onDelete
+  onSuccess
 }: {
  collectionId: string;
  dataId?: string;
  defaultValue?: { q: string; a?: string };
  onClose: () => void;
  onSuccess: (data: InputDataType & { dataId: string }) => void;
-  onDelete?: () => void;
 }) => {
  const { t } = useTranslation();
  const theme = useTheme();
  const { toast } = useToast();
  const [currentTab, setCurrentTab] = useState(TabEnum.content);
  const { vectorModelList } = useSystemStore();
-
+  const { isPc } = useSystem();
  const { register, handleSubmit, reset, control } = useForm<InputDataType>();
  const {
    fields: indexes,
@@ -76,19 +83,35 @@ const InputDataModal = ({

  const tabList = [
    {
-      label: t('common:dataset.data.edit.Content'),
-      value: TabEnum.content,
-      icon: 'common/overviewLight'
+      label: (
+        <Flex align={'center'}>
+          <Box>{t('common:dataset.data.edit.divide_content')}</Box>
+        </Flex>
+      ),
+      value: TabEnum.content
    },
    {
-      label: t('common:dataset.data.edit.Index', { amount: indexes.length }),
-      value: TabEnum.index,
-      icon: 'kbTest'
-    },
-    ...(dataId
-      ? [{ label: t('common:dataset.data.edit.Delete'), value: TabEnum.delete, icon: 'delete' }]
-      : []),
-    { label: t('common:dataset.data.edit.Course'), value: TabEnum.doc, icon: 'common/courseLight' }
+      label: (
+        <Flex align={'center'}>
+          <Box>{t('common:dataset.data.edit.Index', { amount: indexes.length })}</Box>
+          <MyTooltip label={t('common:core.app.tool_label.view_doc')}>
+            <MyIcon
+              name={'book'}
+              w={'1rem'}
+              mr={'0.38rem'}
+              color={'myGray.500'}
+              ml={1}
+              onClick={() => window.open(getDocPath('/docs/course/dataset_engine'), '_blank')}
+              _hover={{
+                color: 'primary.600',
+                cursor: 'pointer'
+              }}
+            />
+          </MyTooltip>
+        </Flex>
+      ),
+      value: TabEnum.index
+    }
  ];

  const { ConfirmModal, openConfirm } = useConfirm({
@@ -181,7 +204,7 @@ const InputDataModal = ({
        a: '',
        indexes: []
      });
-
+      console.log('执行onSuccess');
      onSuccess(e);
    },
    errorToast: t('common:common.error.unKnow')
@@ -215,176 +238,101 @@ const InputDataModal = ({
      }
    }
  );
-  // delete
-  const { mutate: onDeleteData, isLoading: isDeleting } = useRequest({
-    mutationFn: () => {
-      if (!onDelete || !dataId) return Promise.resolve(null);
-      return delOneDatasetDataById(dataId);
-    },
-    onSuccess() {
-      if (!onDelete) return;
-      onDelete();
-      onClose();
-    },
-    successToast: t('common:common.Delete Success'),
-    errorToast: t('common:common.error.unKnow')
-  });

-  const isLoading = isFetchingData || isDeleting;
+  const isLoading = isFetchingData;

+  const icon = useMemo(
+    () => getSourceNameIcon({ sourceName: collection.sourceName, sourceId: collection.sourceId }),
+    [collection]
+  );
  return (
-    <MyModal isOpen={true} isCentered w={'90vw'} maxW={'1440px'} h={'90vh'}>
-      <MyBox isLoading={isLoading} display={'flex'} h={'100%'}>
-        <Box p={5} bg={'myGray.50'} borderLeftRadius={'md'} borderRight={theme.borders.base}>
-          <RawSourceBox
-            w={'210px'}
-            className="textEllipsis3"
-            whiteSpace={'pre-wrap'}
-            collectionId={collection._id}
-            sourceName={collection.sourceName}
-            sourceId={collection.sourceId}
-            mb={6}
-            fontSize={'sm'}
-          />
-          <SideTabs<TabEnum>
-            list={tabList}
-            value={currentTab}
-            onChange={async (e) => {
-              if (e === TabEnum.delete) {
-                return openConfirm(onDeleteData)();
-              }
-              if (e === TabEnum.doc) {
-                return window.open(getDocPath('/docs/course/dataset_engine'), '_blank');
-              }
-              setCurrentTab(e);
-            }}
-          />
-        </Box>
-        <Flex flexDirection={'column'} pb={8} flex={1} h={'100%'}>
-          <Box fontSize={'md'} px={5} py={3} fontWeight={'medium'}>
-            {currentTab === TabEnum.content && (
-              <>
-                {dataId
-                  ? t('common:dataset.data.Update Data')
-                  : t('common:dataset.data.Input Data')}
-              </>
-            )}
-            {currentTab === TabEnum.index && <> {t('common:dataset.data.Index Edit')}</>}
+    <MyModal
+      isOpen={true}
+      isCentered
+      w={['20rem', '64rem']}
+      onClose={() => onClose()}
+      closeOnOverlayClick={false}
+      maxW={'1440px'}
+      h={'46.25rem'}
+      title={
+        <Flex ml={-3}>
+          <MyIcon name={icon as any} w={['16px', '20px']} mr={2} />
+          <Box
+            className={'textEllipsis'}
+            wordBreak={'break-all'}
+            fontSize={'md'}
+            maxW={['200px', '80vw']}
+            fontWeight={'500'}
+            color={'myGray.900'}
+          >
+            {collection.sourceName || t('common:common.UnKnow Source')}
          </Box>
-          <Box flex={1} px={9} overflow={'auto'}>
-            {currentTab === TabEnum.content && <InputTab maxToken={maxToken} register={register} />}
-            {currentTab === TabEnum.index && (
-              <Grid mt={3} gridTemplateColumns={['1fr', '1fr 1fr']} gridGap={4}>
-                {indexes?.map((index, i) => (
-                  <Box
-                    key={index.dataId || i}
-                    p={4}
-                    borderRadius={'md'}
-                    border={
-                      index.defaultIndex
-                        ? '1.5px solid var(--light-fastgpt-primary-opacity-01, rgba(51, 112, 255, 0.10))'
-                        : '1.5px solid var(--Gray-Modern-200, #E8EBF0)'
-                    }
-                    bg={index.defaultIndex ? 'primary.50' : 'myGray.25'}
-                    _hover={{
-                      '& .delete': {
-                        display: index.defaultIndex ? 'none' : 'block'
-                      }
-                    }}
-                  >
-                    <Flex mb={2}>
-                      <Box
-                        flex={1}
-                        fontWeight={'medium'}
-                        color={index.defaultIndex ? 'primary.700' : 'myGray.900'}
-                      >
-                        {index.defaultIndex
-                          ? t('common:dataset.data.Default Index')
-                          : t('dataset.data.Custom Index Number', { number: i })}
-                      </Box>
-                      <DeleteIcon
-                        onClick={() => {
-                          if (indexes.length <= 1) {
-                            appendIndexes(getDefaultIndex({ dataId: `${Date.now()}` }));
-                          }
-                          removeIndexes(i);
-                        }}
-                      />
-                    </Flex>
-                    {index.defaultIndex ? (
-                      <Box fontSize={'sm'} fontWeight={'medium'} color={'myGray.600'}>
-                        {t('common:core.dataset.data.Default Index Tip')}
-                      </Box>
-                    ) : (
-                      <Textarea
-                        maxLength={maxToken}
-                        rows={10}
-                        borderColor={'transparent'}
-                        px={0}
-                        pt={0}
-                        _focus={{
-                          px: 3,
-                          py: 2,
-                          borderColor: 'primary.500',
-                          boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)',
-                          bg: 'white'
-                        }}
-                        placeholder={t('common:dataset.data.Index Placeholder')}
-                        {...register(`indexes.${i}.text`, {
-                          required: true
-                        })}
-                      />
-                    )}
-                  </Box>
-                ))}
-                <Flex
-                  alignItems={'center'}
-                  justifyContent={'center'}
-                  borderRadius={'md'}
-                  color={'myGray.600'}
-                  fontWeight={'medium'}
-                  border={'1.5px solid var(--Gray-Modern-200, #E8EBF0)'}
-                  bg={'myGray.25'}
-                  cursor={'pointer'}
-                  _hover={{
-                    bg: 'primary.50',
-                    color: 'primary.600',
-                    border:
-                      '1.5px solid var(--light-fastgpt-primary-opacity-01, rgba(51, 112, 255, 0.10))'
-                  }}
-                  minH={'100px'}
-                  onClick={() =>
-                    appendIndexes({
-                      defaultIndex: false,
-                      text: '',
-                      dataId: `${Date.now()}`
-                    })
-                  }
-                >
-                  <MyIcon name={'common/addLight'} w={'18px'} mr={1.5} />
-                  <Box>{t('common:dataset.data.Add Index')}</Box>
-                </Flex>
-              </Grid>
-            )}
-          </Box>
-          {/* footer */}
-          <Flex justifyContent={'flex-end'} px={9} mt={6}>
-            <Button variant={'whiteBase'} mr={3} onClick={onClose}>
-              {t('common:common.Close')}
-            </Button>
-            <MyTooltip
-              label={collection.permission.hasWritePer ? '' : t('common:dataset.data.Can not edit')}
-            >
-              <Button
-                isDisabled={!collection.permission.hasWritePer}
-                isLoading={isImporting || isUpdating}
-                // @ts-ignore
-                onClick={handleSubmit(dataId ? onUpdateData : sureImportData)}
-              >
-                {dataId ? t('common:common.Confirm Update') : t('common:common.Confirm Import')}
-              </Button>
-            </MyTooltip>
+        </Flex>
+      }
+    >
+      <MyBox
+        display={'flex'}
+        flexDir={'column'}
+        isLoading={isLoading}
+        h={'100%'}
+        py={[6, '1.5rem']}
+        px={[5, '3.25rem']}
+      >
+        <Flex justify={'space-between'} gap={4} w={'100%'}>
+          <Flex justify={'space-between'} pb={4}>
+            <LightRowTabs<TabEnum>
+              list={tabList}
+              p={0}
+              value={currentTab}
+              onChange={(e: TabEnum) => setCurrentTab(e)}
+            />
          </Flex>
+          {currentTab === TabEnum.index && (
+            <Button
+              variant={'whiteBase'}
+              boxShadow={'1'}
+              p={0}
+              onClick={() =>
+                appendIndexes({
+                  defaultIndex: false,
+                  text: '',
+                  dataId: `${Date.now()}`
+                })
+              }
+            >
+              <Flex px={'0.62rem'} py={2}>
+                <MyIcon name={'common/addLight'} w={'1rem'} mr={'0.38rem'} />
+                {t('common:add_new')}
+              </Flex>
+            </Button>
+          )}
+        </Flex>
+        <Box w={'100%'} flexGrow={1} overflow={'scroll'}>
+          {currentTab === TabEnum.content && <InputTab maxToken={maxToken} register={register} />}
+          {currentTab === TabEnum.index && (
+            <DataIndex
+              register={register}
+              maxToken={maxToken}
+              appendIndexes={appendIndexes}
+              removeIndexes={removeIndexes}
+              indexes={indexes}
+            />
+          )}
+        </Box>
+
+        <Flex justifyContent={'flex-end'} pt={8} pb={[8, 0]} h={[24, 16]}>
+          <MyTooltip
+            label={collection.permission.hasWritePer ? '' : t('common:dataset.data.Can not edit')}
+          >
+            <Button
+              isDisabled={!collection.permission.hasWritePer}
+              isLoading={isImporting || isUpdating}
+              // @ts-ignore
+              onClick={handleSubmit(dataId ? onUpdateData : sureImportData)}
+            >
+              {dataId ? t('common:common.Confirm Update') : t('common:common.Confirm Import')}
+            </Button>
+          </MyTooltip>
        </Flex>
      </MyBox>
      <ConfirmModal />
@@ -404,44 +352,205 @@ const InputTab = ({
  const { t } = useTranslation();

  return (
-    <HStack h={'100%'} spacing={6}>
-      <Flex flexDirection={'column'} w={'50%'} h={'100%'}>
-        <Flex pt={3} pb={2} fontWeight={'medium'} fontSize={'md'} alignItems={'center'}>
-          <Box color={'red.600'}>*</Box>
-          <Box color={'myGray.900'}>{t('common:core.dataset.data.Main Content')}</Box>
-          <QuestionTip label={t('common:core.dataset.data.Data Content Tip')} ml={1} />
+    <>
+      <Flex h={'100%'} gap={6} flexDir={['column', 'row']} w={'100%'} pr={2}>
+        <Flex flexDir={'column'} flex={1}>
+          <Flex mb={2} fontWeight={'medium'} fontSize={'sm'} alignItems={'center'} h={8}>
+            <Box color={'red.600'}>*</Box>
+            <Box color={'myGray.900'}>{t('common:core.dataset.data.Main Content')}</Box>
+            <QuestionTip label={t('common:core.dataset.data.Data Content Tip')} ml={1} />
+          </Flex>
+          <Box
+            borderRadius={'md'}
+            border={'1.5px solid var(--Gray-Modern-200, #E8EBF0)'}
+            bg={'myGray.25'}
+            flex={1}
+          >
+            <Textarea
+              resize={'none'}
+              placeholder={t('core.dataset.data.Data Content Placeholder', { maxToken })}
+              className={styles.scrollbar}
+              maxLength={maxToken}
+              h={'100%'}
+              tabIndex={1}
+              _focus={{
+                borderColor: 'primary.500',
+                boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)',
+                bg: 'white'
+              }}
+              borderColor={'transparent'}
+              bg={'myGray.25'}
+              {...register(`q`, {
+                required: true
+              })}
+            />
+          </Box>
        </Flex>
-        <Box flex={'1 0 0'}>
-          <Textarea
-            placeholder={t('core.dataset.data.Data Content Placeholder', { maxToken })}
-            maxLength={maxToken}
-            tabIndex={1}
-            bg={'myGray.50'}
-            h={'full'}
-            {...register(`q`, {
-              required: true
-            })}
-          />
-        </Box>
-      </Flex>
-      <Flex flexDirection={'column'} w={'50%'} h={'100%'}>
-        <Flex pt={3} pb={2} fontWeight={'medium'} fontSize={'md'} alignItems={'center'}>
-          <Box color={'myGray.900'}>{t('common:core.dataset.data.Auxiliary Data')}</Box>
-          <QuestionTip label={t('common:core.dataset.data.Auxiliary Data Tip')} ml={1} />
+        <Flex flex={1} flexDir={'column'}>
+          <Flex mb={2} fontWeight={'medium'} fontSize={'sm'} alignItems={'center'} h={8}>
+            <Box color={'myGray.900'}>{t('common:core.dataset.data.Auxiliary Data')}</Box>
+            <QuestionTip label={t('common:core.dataset.data.Auxiliary Data Tip')} ml={1} />
+          </Flex>
+          <Box
+            borderRadius={'md'}
+            border={'1.5px solid '}
+            borderColor={'myGray.200'}
+            bg={'myGray.25'}
+            flex={1}
+          >
+            <Textarea
+              resize={'none'}
+              placeholder={t('core.dataset.data.Auxiliary Data Placeholder', {
+                maxToken: maxToken * 1.5
+              })}
+              className={styles.scrollbar}
+              borderColor={'transparent'}
+              h={'100%'}
+              tabIndex={1}
+              bg={'myGray.25'}
+              maxLength={maxToken * 1.5}
+              {...register('a')}
+            />
+          </Box>
        </Flex>
-        <Box flex={'1 0 0'}>
-          <Textarea
-            placeholder={t('core.dataset.data.Auxiliary Data Placeholder', {
-              maxToken: maxToken * 1.5
-            })}
-            h={'100%'}
-            tabIndex={1}
-            bg={'myGray.50'}
-            maxLength={maxToken * 1.5}
-            {...register('a')}
-          />
-        </Box>
      </Flex>
-    </HStack>
+    </>
+  );
+};
+
+const DataIndex = ({
+  maxToken,
+  register,
+  indexes,
+  appendIndexes,
+  removeIndexes
+}: {
+  maxToken: number;
+  register: UseFormRegister<InputDataType>;
+  indexes: FieldArrayWithId<InputDataType, 'indexes', 'id'>[];
+  appendIndexes: UseFieldArrayAppend<InputDataType, 'indexes'>;
+  removeIndexes: UseFieldArrayRemove;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Flex mt={3} gap={3} flexDir={'column'} pr={2}>
+        <Box
+          p={4}
+          borderRadius={'md'}
+          border={'1.5px solid var(--light-fastgpt-primary-opacity-01, rgba(51, 112, 255, 0.10))'}
+          bg={'primary.50'}
+        >
+          <Flex mb={2}>
+            <Box flex={1} fontWeight={'medium'} fontSize={'sm'} color={'primary.700'}>
+              {t('common:dataset.data.Default Index')}
+            </Box>
+          </Flex>
+          <Box fontSize={'sm'} fontWeight={'medium'} color={'myGray.600'}>
+            {t('common:core.dataset.data.Default Index Tip')}
+          </Box>
+        </Box>
+        {indexes?.map((index, i) => {
+          return (
+            !index.defaultIndex && (
+              <Box
+                key={index.dataId || i}
+                p={4}
+                borderRadius={'md'}
+                border={'1.5px solid var(--Gray-Modern-200, #E8EBF0)'}
+                bg={'myGray.25'}
+                _hover={{
+                  '& .delete': {
+                    display: 'block'
+                  }
+                }}
+              >
+                <Flex mb={2}>
+                  <Box flex={1} fontWeight={'medium'} fontSize={'sm'} color={'myGray.900'}>
+                    {t('dataset.data.Custom Index Number', { number: i })}
+                  </Box>
+                  <DeleteIcon
+                    onClick={() => {
+                      if (indexes.length <= 1) {
+                        appendIndexes(getDefaultIndex({ dataId: `${Date.now()}` }));
+                      }
+                      removeIndexes(i);
+                    }}
+                  />
+                </Flex>
+                <DataIndexTextArea index={i} maxToken={maxToken} register={register} />
+              </Box>
+            )
+          );
+        })}
+      </Flex>
+    </>
+  );
+};
+
+const DataIndexTextArea = ({
+  index,
+  maxToken,
+  register
+}: {
+  index: number;
+  maxToken: number;
+  register: UseFormRegister<InputDataType>;
+}) => {
+  const { t } = useTranslation();
+  const TextareaDom = useRef<HTMLTextAreaElement | null>(null);
+  const {
+    ref: TextareaRef,
+    required,
+    name,
+    onChange: onTextChange,
+    onBlur
+  } = register(`indexes.${index}.text`, { required: true });
+  const textareaMinH = '40px';
+  useEffect(() => {
+    if (TextareaDom.current) {
+      TextareaDom.current.style.height = textareaMinH;
+      TextareaDom.current.style.height = `${TextareaDom.current.scrollHeight + 5}px`;
+    }
+  }, []);
+  const autoHeight = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (e.target) {
+      e.target.style.height = textareaMinH;
+      e.target.style.height = `${e.target.scrollHeight + 5}px`;
+    }
+  }, []);
+  return (
+    <Textarea
+      maxLength={maxToken}
+      borderColor={'transparent'}
+      className={styles.scrollbar}
+      minH={textareaMinH}
+      px={0}
+      pt={0}
+      isRequired={required}
+      whiteSpace={'pre-wrap'}
+      resize={'none'}
+      _focus={{
+        px: 3,
+        py: 1,
+        borderColor: 'primary.500',
+        boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)',
+        bg: 'white'
+      }}
+      placeholder={t('common:dataset.data.Index Placeholder')}
+      ref={(e) => {
+        if (e) TextareaDom.current = e;
+        TextareaRef(e);
+      }}
+      required
+      name={name}
+      onChange={(e) => {
+        autoHeight(e);
+        onTextChange(e);
+      }}
+      onFocus={autoHeight}
+      onBlur={onBlur}
+    />
  );
 };
--- a/projects/app/src/pages/dataset/detail/components/MetaDataCard.tsx
+++ b/projects/app/src/pages/dataset/detail/components/MetaDataCard.tsx
@@ -10,6 +10,7 @@ import { formatFileSize } from '@fastgpt/global/common/file/tools';
 import { formatTime2YMDHM } from '@fastgpt/global/common/string/time';
 import { DatasetCollectionTypeMap, TrainingTypeMap } from '@fastgpt/global/core/dataset/constants';
 import { getCollectionSourceAndOpen } from '@/web/core/dataset/hooks/readCollectionSource';
+import MyIcon from '@fastgpt/web/components/common/Icon';

 const MetaDataCard = ({ datasetId }: { datasetId: string }) => {
  const { t } = useTranslation();
@@ -94,26 +95,33 @@ const MetaDataCard = ({ datasetId }: { datasetId: string }) => {

  return (
    <MyBox isLoading={isLoading} w={'100%'} h={'100%'} p={6}>
-      <Box fontSize={'lg'} pb={4}>
+      <Box fontSize={'md'} pb={4}>
        {t('common:core.dataset.collection.metadata.metadata')}
      </Box>
-      <Box fontSize={'sm'} color={'myGray.500'} mb={5}>
-        {t('common:core.dataset.collection.id')}:{' '}
-        <Box as={'span'} userSelect={'all'}>
-          {collection?._id}
+      <Flex mb={4} wordBreak={'break-all'} fontSize={'sm'}>
+        <Box color={'myGray.500'} flex={'0 0 70px'}>
+          {t('common:core.dataset.collection.id')}:
        </Box>
-      </Box>
-      {metadataList.map((item, i) => (
-        <Flex key={i} alignItems={'center'} mb={5} wordBreak={'break-all'} fontSize={'sm'}>
-          <Box color={'myGray.500'} flex={'0 0 70px'}>
-            {item.label}
-          </Box>
-          <Box>{item.value}</Box>
-        </Flex>
-      ))}
+        <Box>{collection?._id}</Box>
+      </Flex>
+      {metadataList.map(
+        (item, i) =>
+          item.label &&
+          item.value && (
+            <Flex key={i} alignItems={'center'} mb={4} wordBreak={'break-all'} fontSize={'sm'}>
+              <Box color={'myGray.500'} flex={'0 0 70px'}>
+                {item.label}
+              </Box>
+              <Box>{item.value}</Box>
+            </Flex>
+          )
+      )}
      {collection?.sourceId && (
        <Button variant={'whitePrimary'} onClick={readSource}>
-          {t('common:core.dataset.collection.metadata.read source')}
+          <Flex py={2} px={3}>
+            <MyIcon name="visible" w={'1rem'} mr={'0.38rem'} />
+            <Box>{t('common:core.dataset.collection.metadata.read source')}</Box>
+          </Flex>
        </Button>
      )}
    </MyBox>
--- a/projects/app/src/pages/dataset/detail/components/NavBar.tsx
+++ b/projects/app/src/pages/dataset/detail/components/NavBar.tsx
@@ -9,6 +9,7 @@ import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
 import { useI18n } from '@/web/context/I18n';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import MyPopover from '@fastgpt/web/components/common/MyPopover';
+import ParentPaths from '@/components/common/ParentPaths';

 export enum TabEnum {
  dataCard = 'dataCard',
@@ -25,7 +26,7 @@ const NavBar = ({ currentTab }: { currentTab: TabEnum }) => {
  const router = useRouter();
  const query = router.query;
  const { isPc } = useSystem();
-  const { datasetDetail, vectorTrainingMap, agentTrainingMap, rebuildingCount } =
+  const { datasetDetail, vectorTrainingMap, agentTrainingMap, rebuildingCount, paths } =
    useContextSelector(DatasetPageContext, (v) => v);

  const tabList = [
@@ -55,56 +56,67 @@ const NavBar = ({ currentTab }: { currentTab: TabEnum }) => {
    <>
      {isPc ? (
        <Flex
-          py={2}
+          pb={2}
+          pt={3}
          px={4}
          justify={'space-between'}
-          borderBottom={theme.borders.base}
+          borderBottom={currentTab === TabEnum.dataCard ? 'none' : theme.borders.base}
          borderColor={'myGray.200'}
          position={'relative'}
        >
-          <Flex
-            alignItems={'center'}
-            cursor={'pointer'}
-            py={'0.38rem'}
-            px={2}
-            h={10}
-            borderRadius={'md'}
-            _hover={{ bg: 'myGray.05' }}
-            fontSize={'sm'}
-            fontWeight={500}
-            onClick={() => {
-              if (currentTab !== TabEnum.dataCard) router.replace('/dataset/list');
-              else
-                router.replace({
-                  query: {
-                    datasetId: router.query.datasetId,
-                    parentId: router.query.parentId,
-                    currentTab: TabEnum.collectionCard
-                  }
-                });
-            }}
-          >
-            <IconButton
-              p={2}
-              mr={2}
-              w={'1.5rem'}
-              h={'24px'}
-              border={'1px solid'}
-              borderColor={'myGray.200'}
-              boxShadow={'1'}
-              icon={<MyIcon name={'common/arrowLeft'} w={'16px'} color={'myGray.500'} />}
-              bg={'white'}
-              size={'smSquare'}
-              borderRadius={'50%'}
-              aria-label={''}
-              _hover={'none'}
-            />
-            <Box fontWeight={500} color={'myGray.600'} fontSize={'sm'}>
-              {currentTab !== TabEnum.dataCard
-                ? t('common:core.dataset.All Dataset')
-                : datasetDetail.name}
-            </Box>
-          </Flex>
+          {currentTab === TabEnum.dataCard ? (
+            <>
+              <Flex
+                alignItems={'center'}
+                cursor={'pointer'}
+                py={'0.38rem'}
+                px={2}
+                ml={0}
+                borderRadius={'md'}
+                _hover={{ bg: 'myGray.05' }}
+                fontSize={'sm'}
+                fontWeight={500}
+                onClick={() => {
+                  router.replace({
+                    query: {
+                      datasetId: router.query.datasetId,
+                      parentId: router.query.parentId,
+                      currentTab: TabEnum.collectionCard
+                    }
+                  });
+                }}
+              >
+                <IconButton
+                  p={2}
+                  mr={2}
+                  w={'1.5rem'}
+                  h={'24px'}
+                  border={'1px solid'}
+                  borderColor={'myGray.200'}
+                  boxShadow={'1'}
+                  icon={<MyIcon name={'common/arrowLeft'} w={'16px'} color={'myGray.500'} />}
+                  bg={'white'}
+                  size={'smSquare'}
+                  borderRadius={'50%'}
+                  aria-label={''}
+                  _hover={'none'}
+                />
+                <Box fontWeight={500} color={'myGray.600'} fontSize={'sm'}>
+                  {datasetDetail.name}
+                </Box>
+              </Flex>
+            </>
+          ) : (
+            <Flex py={'0.38rem'} px={2} h={10} ml={0.5}>
+              <ParentPaths
+                paths={paths}
+                onClick={(e) => {
+                  router.push(`/dataset/list?parentId=${e}`);
+                }}
+              />
+            </Flex>
+          )}
+
          <Box position={'absolute'} left={'50%'} transform={'translateX(-50%)'}>
            <LightRowTabs<TabEnum>
              px={4}
--- a/projects/app/src/pages/dataset/detail/components/styles.module.scss
+++ b/projects/app/src/pages/dataset/detail/components/styles.module.scss
@@ -0,0 +1,11 @@
+.scrollbar {
+  &::-webkit-scrollbar-thumb {
+    background: var(--chakra-colors-myGray-150) !important;
+    transition: background 1s;
+    margin-left: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--chakra-colors-myGray-250) !important;
+  }
+}
--- a/projects/app/src/web/core/dataset/context/datasetPageContext.tsx
+++ b/projects/app/src/web/core/dataset/context/datasetPageContext.tsx
@@ -6,6 +6,7 @@ import {
  getAllTags,
  getDatasetById,
  getDatasetCollectionTags,
+  getDatasetPaths,
  getDatasetTrainingQueue,
  getTrainingQueueLen,
  postCreateDatasetCollectionTag,
@@ -15,6 +16,7 @@ import { defaultDatasetDetail } from '../constants';
 import { DatasetUpdateBody } from '@fastgpt/global/core/dataset/api';
 import { DatasetItemType, DatasetTagType } from '@fastgpt/global/core/dataset/type';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
+import { ParentTreePathItemType } from '@fastgpt/global/common/parentFolder/type';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';

 type DatasetPageContextType = {
@@ -32,7 +34,8 @@ type DatasetPageContextType = {
  isCreateCollectionTagLoading: boolean;
  searchTagKey: string;
  setSearchTagKey: Dispatch<SetStateAction<string>>;
-
+  paths: ParentTreePathItemType[];
+  refetchPaths: () => void;
  vectorTrainingMap: {
    colorSchema: string;
    tip: string;
@@ -84,7 +87,9 @@ export const DatasetPageContext = createContext<DatasetPageContextType>({
  searchTagKey: '',
  setSearchTagKey: function (value: SetStateAction<string>): void {
    throw new Error('Function not implemented.');
-  }
+  },
+  paths: [],
+  refetchPaths: () => {}
 });

 export const DatasetPageContextProvider = ({
@@ -99,12 +104,9 @@ export const DatasetPageContextProvider = ({

  // dataset detail
  const [datasetDetail, setDatasetDetail] = useState(defaultDatasetDetail);
-
  const loadDatasetDetail = async (id: string) => {
    const data = await getDatasetById(id);
-
    setDatasetDetail(data);
-
    return data;
  };
  const updateDataset = async (data: DatasetUpdateBody) => {
@@ -224,12 +226,28 @@ export const DatasetPageContextProvider = ({
      refetchInterval: 10000
    });

+  const { data: paths = [], runAsync: refetchPaths } = useRequest2(
+    () =>
+      getDatasetPaths(datasetDetail.parentId).then((res) => {
+        res.push({
+          parentId: '',
+          parentName: datasetDetail.name
+        });
+        return res;
+      }),
+    {
+      manual: false,
+      refreshDeps: [datasetDetail.parentId]
+    }
+  );
+
  const contextValue: DatasetPageContextType = {
    datasetId,
    datasetDetail,
    loadDatasetDetail,
    updateDataset,
-
+    paths,
+    refetchPaths,
    vectorTrainingMap,
    agentTrainingMap,
    rebuildingCount,