perf: btn color (#423)

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> : '确认导入'}

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 && (

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',

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 && (