feat:run batch style

web/app/components/share/text-generation/run-batch/csv-download/index.tsx

@@ -15,35 +15,57 @@ const CSVDownload: FC<ICSVDownloadProps> = ({
   vars,
 }) => {
   const { t } = useTranslation()
-
   const { CSVDownloader, Type } = useCSVDownloader()
+  const addQueryContentVars = [...vars, { name: t('share.generation.queryTitle') }]
   const template = (() => {
     const res: Record<string, string> = {}
-    vars.forEach((item) => {
+    addQueryContentVars.forEach((item) => {
       res[item.name] = ''
     })
-    console.log(res)
+    // console.log(res)
     return res
   })()
-  // debugger
+
   return (
-    <CSVDownloader
-      className="block mt-2 cursor-pointer"
-      type={Type.Link}
-      filename={'template'}
-      bom={true}
-      config={{
-        delimiter: ';',
-      }}
-      data={[
-        template,
-      ]}
-    >
-      <div className='flex items-center h-[18px] space-x-1 text-[#155EEF] text-xs font-medium'>
-        <DownloadIcon className='w-3 h-3' />
-        <span>{t('share.generation.downloadTemplate')}</span>
+    <div className='mt-6'>
+      <div className='text-sm text-gray-900 font-medium'>{t('share.generation.csvStructureTitle')}</div>
+      <div className='mt-2 max-h-[500px] overflow-auto'>
+        <table className='w-full border-separate border-spacing-0 border border-gray-200 rounded-lg'>
+          <thead className='text-gray-500'>
+            <tr>
+              {addQueryContentVars.map((item, i) => (
+                <td key={i} className='h-9 pl-4 border-b border-gray-200'>{item.name}</td>
+              ))}
+            </tr>
+          </thead>
+          <tbody className='text-gray-300'>
+            <tr>
+              {addQueryContentVars.map((item, i) => (
+                <td key={i} className='h-9 pl-4'>{item.name} {t('share.generation.field')}</td>
+              ))}
+            </tr>
+          </tbody>
+        </table>
       </div>
-    </CSVDownloader>
+      <CSVDownloader
+        className="block mt-2 cursor-pointer"
+        type={Type.Link}
+        filename={'template'}
+        bom={true}
+        config={{
+          delimiter: ';',
+        }}
+        data={[
+          template,
+        ]}
+      >
+        <div className='flex items-center h-[18px] space-x-1 text-[#155EEF] text-xs font-medium'>
+          <DownloadIcon className='w-3 h-3' />
+          <span>{t('share.generation.downloadTemplate')}</span>
+        </div>
+      </CSVDownloader>
+    </div>
+
   )
 }
 export default React.memo(CSVDownload)

web/app/components/share/text-generation/run-batch/index.tsx

@@ -28,13 +28,13 @@ const RunBatch: FC<IRunBatchProps> = ({
     setIsParsed(true)
   }
   return (
-    <div>
+    <div className='pt-4'>
       <CSVReader onParsed={handleParsed} />
       <CSVDownload vars={vars} />
-
+      <div className='mt-4 h-[1px] bg-gray-100'></div>
       <Button
         type="primary"
-        className='w-[80px] !h-8 !p-0'
+        className='mt-4 !h-8 !pl-3 !pr-4'
         onClick={onSend}
         disabled={!isParsed}
       >

web/i18n/lang/share-app.en.ts

@@ -42,11 +42,13 @@ const translation = {
     title: 'AI Completion',
     queryTitle: 'Query content',
     queryPlaceholder: 'Write your query content...',
-    run: 'RUN',
+    run: 'Execute',
     copy: 'Copy',
     resultTitle: 'AI Completion',
     noData: 'AI will give you what you want here.',
+    csvStructureTitle: 'The CSV file must conform to the following structure:',
     downloadTemplate: 'Download the template here',
+    field: 'Field',
   },
 }
 

web/i18n/lang/share-app.zh.ts

@@ -42,7 +42,9 @@ const translation = {
     copy: '拷贝',
     resultTitle: 'AI 书写',
     noData: 'AI 会在这里给你惊喜。',
+    csvStructureTitle: 'CSV 文件必须符合以下结构：',
     downloadTemplate: '下载模板',
+    field: '',
   },
 }