perf: btn color (#423)

2025-08-03 05:19:51 +00:00 · 2023-10-24 13:19:23 +08:00
parent bf6dbfb245
commit 1942cb0d67
41 changed files with 350 additions and 221 deletions
--- a/projects/app/src/pages/dataset/detail/components/CollectionCard.tsx
+++ b/projects/app/src/pages/dataset/detail/components/CollectionCard.tsx
@@ -47,7 +47,6 @@ import { getCollectionIcon } from '@fastgpt/global/core/dataset/utils';
 import EditFolderModal, { useEditFolder } from '../../component/EditFolderModal';
 import { TabEnum } from '..';
 import ParentPath from '@/components/common/ParentPaths';
-import { useDatasetStore } from '@/web/core/dataset/store/dataset';
 import dynamic from 'next/dynamic';
 import { useDrag } from '@/web/common/hooks/useDrag';
 import SelectCollections from '@/web/core/dataset/components/SelectCollections';
@@ -68,7 +67,6 @@ const CollectionCard = () => {
  const { isPc } = useSystemStore();
  const [searchText, setSearchText] = useState('');
  const { setLoading } = useSystemStore();
-  const { datasetDetail, loadDatasetDetail } = useDatasetStore();

  const { openConfirm, ConfirmModal } = useConfirm({
    content: t('dataset.Confirm to delete the file')
@@ -114,8 +112,7 @@ const CollectionCard = () => {
    }
  });

-  const { moveDataId, setMoveDataId, dragStartId, setDragStartId, dragTargetId, setDragTargetId } =
-    useDrag();
+  const { dragStartId, setDragStartId, dragTargetId, setDragTargetId } = useDrag();

  // change search
  const debounceRefetch = useCallback(
@@ -209,7 +206,6 @@ const CollectionCard = () => {
    getDatasetCollectionPathById(parentId)
  );

-  useQuery(['loadDatasetDetail', datasetId], () => loadDatasetDetail(datasetId));
  useQuery(
    ['refreshCollection'],
    () => {
@@ -279,7 +275,7 @@ const CollectionCard = () => {
          </Flex>
        )}
        <MyMenu
-          offset={[-10, 10]}
+          offset={[-40, 10]}
          width={120}
          Button={
            <MenuButton
@@ -290,15 +286,17 @@ const CollectionCard = () => {
            >
              <Flex
                alignItems={'center'}
-                border={theme.borders.base}
                px={5}
                py={2}
                borderRadius={'md'}
                cursor={'pointer'}
+                bg={'myBlue.600'}
+                overflow={'hidden'}
+                color={'white'}
                h={['28px', '35px']}
              >
-                <AddIcon mr={2} />
-                <Box>{t('Create New')}</Box>
+                <MyIcon name={'importLight'} mr={2} w={'14px'} />
+                <Box>{t('dataset.collections.Create And Import')}</Box>
              </Flex>
            </MenuButton>
          }
@@ -410,7 +408,7 @@ const CollectionCard = () => {
                  }
                }}
              >
-                <Td maxW={['200px', '300px']} draggable>
+                <Td minW={'150px'} maxW={['200px', '300px']} draggable>
                  <Flex alignItems={'center'}>
                    <Image src={collection.icon} w={'16px'} mr={2} alt={''} />
                    <MyTooltip label={t('common.folder.Drag Tip')} shouldWrapChildren={false}>
--- a/projects/app/src/pages/dataset/detail/components/DataCard.tsx
+++ b/projects/app/src/pages/dataset/detail/components/DataCard.tsx
@@ -100,14 +100,23 @@ const DataCard = () => {
          }
        />
        <Flex className="textEllipsis" flex={'1 0 0'} mr={[3, 5]} alignItems={'center'}>
-          <Image src={fileIcon || '/imgs/files/file.svg'} w={'16px'} mr={2} alt={''} />
-          <RawSourceText
-            sourceName={collection?.name}
-            sourceId={collection?.metadata?.fileId || collection?.metadata?.rawLink}
-            fontSize={['md', 'lg']}
-            color={'black'}
-            textDecoration={'none'}
-          />
+          <Image src={fileIcon || '/imgs/files/file.svg'} w={['16px', '18px']} mr={2} alt={''} />
+
+          <Box lineHeight={1.2}>
+            <RawSourceText
+              sourceName={collection?.name}
+              sourceId={collection?.metadata?.fileId || collection?.metadata?.rawLink}
+              fontSize={['md', 'lg']}
+              color={'black'}
+              textDecoration={'none'}
+            />
+            <Box fontSize={'sm'} color={'myGray.500'}>
+              文件ID:{' '}
+              <Box as={'span'} userSelect={'all'}>
+                {collection?._id}
+              </Box>
+            </Box>
+          </Box>
        </Flex>
        <Box>
          <Button
--- a/projects/app/src/pages/dataset/detail/components/Import/Csv.tsx
+++ b/projects/app/src/pages/dataset/detail/components/Import/Csv.tsx
@@ -4,6 +4,7 @@ import { useConfirm } from '@/web/common/hooks/useConfirm';
 import { useImportStore, SelectorContainer, PreviewFileOrChunk } from './Provider';

 const fileExtension = '.csv';
+const csvTemplate = `index,content\n"被索引的内容","对应的答案。CSV 中请注意内容不能包含双引号，双引号是列分割符号"\n"什么是 laf","laf 是一个云函数开发平台……",""\n"什么是 sealos","Sealos 是以 kubernetes 为内核的云操作系统发行版,可以……"`;

 const CsvImport = () => {
  const { successChunks, totalChunks, isUnselectedFile, onclickUpload, uploading } =
@@ -15,7 +16,15 @@ const CsvImport = () => {

  return (
    <Box display={['block', 'flex']} h={['auto', '100%']}>
-      <SelectorContainer fileExtension={fileExtension} showUrlFetch={false}>
+      <SelectorContainer
+        fileExtension={fileExtension}
+        showUrlFetch={false}
+        fileTemplate={{
+          filename: 'csv 模板.csv',
+          value: csvTemplate,
+          type: 'text/csv'
+        }}
+      >
        <Flex mt={3}>
          <Button isDisabled={uploading} onClick={openConfirm(onclickUpload)}>
            {uploading ? <Box>{Math.round((successChunks / totalChunks) * 100)}%</Box> : '确认导入'}
--- a/projects/app/src/pages/dataset/detail/components/Import/FileSelect.tsx
+++ b/projects/app/src/pages/dataset/detail/components/Import/FileSelect.tsx
@@ -13,7 +13,7 @@ import {
  readDocContent
 } from '@/web/common/file/utils';
 import { Box, Flex, useDisclosure, type BoxProps } from '@chakra-ui/react';
-import { DragEvent, useCallback, useState } from 'react';
+import React, { DragEvent, useCallback, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { customAlphabet } from 'nanoid';
 import dynamic from 'next/dynamic';
@@ -33,7 +33,6 @@ const UrlFetchModal = dynamic(() => import('./UrlFetchModal'));
 const CreateFileModal = dynamic(() => import('./CreateFileModal'));

 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 12);
-const csvTemplate = `index,content\n"被索引的内容","对应的答案。CSV 中请注意内容不能包含双引号，双引号是列分割符号"\n"什么是 laf","laf 是一个云函数开发平台……",""\n"什么是 sealos","Sealos 是以 kubernetes 为内核的云操作系统发行版,可以……"`;

 export type FileItemType = {
  id: string; // fileId / raw Link
@@ -46,12 +45,16 @@ export type FileItemType = {
  metadata: DatasetCollectionSchemaType['metadata'];
 };

-interface Props extends BoxProps {
+export interface Props extends BoxProps {
  fileExtension: string;
  onPushFiles: (files: FileItemType[]) => void;
  tipText?: string;
  chunkLen?: number;
-  isCsv?: boolean;
+  fileTemplate?: {
+    type: string;
+    filename: string;
+    value: string;
+  };
  showUrlFetch?: boolean;
  showCreateFile?: boolean;
 }
@@ -61,7 +64,7 @@ const FileSelect = ({
  onPushFiles,
  tipText,
  chunkLen = 500,
-  isCsv = false,
+  fileTemplate,
  showUrlFetch = true,
  showCreateFile = true,
  ...props
@@ -396,7 +399,7 @@ const FileSelect = ({
          {t(tipText)}
        </Box>
      )}
-      {isCsv && (
+      {!!fileTemplate && (
        <Box
          mt={1}
          cursor={'pointer'}
@@ -405,13 +408,13 @@ const FileSelect = ({
          fontSize={'12px'}
          onClick={() =>
            fileDownload({
-              text: csvTemplate,
-              type: 'text/csv',
-              filename: 'template.csv'
+              text: fileTemplate.value,
+              type: fileTemplate.type,
+              filename: fileTemplate.filename
            })
          }
        >
-          {t('file.Click to download CSV template')}
+          {t('file.Click to download file template', { name: fileTemplate.filename })}
        </Box>
      )}
      {selectingText !== undefined && (
--- a/projects/app/src/pages/dataset/detail/components/Import/ImportModal.tsx
+++ b/projects/app/src/pages/dataset/detail/components/Import/ImportModal.tsx
@@ -76,7 +76,7 @@ const ImportData = ({
      <Flex flexDirection={'column'} flex={'1 0 0'}>
        <Box pb={[5, 7]} px={[4, 8]} borderBottom={theme.borders.base}>
          <MyRadio
-            gridTemplateColumns={['repeat(1,1fr)', 'repeat(3, 350px)']}
+            gridTemplateColumns={['repeat(1,1fr)', 'repeat(3,1fr)']}
            list={[
              {
                icon: 'indexImport',
--- a/projects/app/src/pages/dataset/detail/components/Import/Provider.tsx
+++ b/projects/app/src/pages/dataset/detail/components/Import/Provider.tsx
@@ -8,7 +8,7 @@ import React, {
  useMemo,
  useEffect
 } from 'react';
-import FileSelect, { FileItemType } from './FileSelect';
+import FileSelect, { FileItemType, Props as FileSelectProps } from './FileSelect';
 import { useRequest } from '@/web/common/hooks/useRequest';
 import { postDatasetCollection } from '@/web/core/dataset/api';
 import { formatPrice } from '@fastgpt/global/common/bill/tools';
@@ -394,11 +394,13 @@ export const SelectorContainer = ({
  fileExtension,
  showUrlFetch,
  showCreateFile,
+  fileTemplate,
  children
 }: {
  fileExtension: string;
  showUrlFetch?: boolean;
  showCreateFile?: boolean;
+  fileTemplate?: FileSelectProps['fileTemplate'];
  children: React.ReactNode;
 }) => {
  const { files, setPreviewFile, isUnselectedFile, setFiles, chunkLen } = useImportStore();
@@ -422,6 +424,7 @@ export const SelectorContainer = ({
        chunkLen={chunkLen}
        showUrlFetch={showUrlFetch}
        showCreateFile={showCreateFile}
+        fileTemplate={fileTemplate}
        py={isUnselectedFile ? '100px' : 5}
      />
      {!isUnselectedFile && (
--- a/projects/app/src/pages/dataset/detail/components/Info.tsx
+++ b/projects/app/src/pages/dataset/detail/components/Info.tsx
@@ -185,6 +185,7 @@ const Info = (
        </Box>
        <Input
          flex={[1, '0 0 300px']}
+          maxLength={30}
          {...register('name', {
            required: '知识库名称不能为空'
          })}
--- a/projects/app/src/pages/dataset/list/component/CreateModal.tsx
+++ b/projects/app/src/pages/dataset/list/component/CreateModal.tsx
@@ -99,6 +99,7 @@ const CreateModal = ({ onClose, parentId }: { onClose: () => void; parentId?: st
            flex={1}
            autoFocus
            bg={'myWhite.600'}
+            maxLength={30}
            {...register('name', {
              required: '知识库名称不能为空~'
            })}
--- a/projects/app/src/pages/dataset/list/index.tsx
+++ b/projects/app/src/pages/dataset/list/index.tsx
@@ -363,7 +363,9 @@ const Kb = () => {
            />
            <Flex alignItems={'center'} h={'38px'}>
              <Avatar src={dataset.avatar} borderRadius={'lg'} w={'28px'} />
-              <Box ml={3}>{dataset.name}</Box>
+              <Box mx={3} className="textEllipsis3">
+                {dataset.name}
+              </Box>
            </Flex>
            <Box flex={'1 0 0'} overflow={'hidden'} pt={2}>
              <Flex>