perf: 优化上传文档页面

ui/src/components/icons/index.ts

@@ -551,6 +551,27 @@ export const iconMap: any = {
       ])
     }
   },
+  'app-warning-colorful': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M42.666667 512c0 259.2 210.133333 469.333333 469.333333 469.333333s469.333333-210.133333 469.333333-469.333333S771.2 42.666667 512 42.666667 42.666667 252.8 42.666667 512z m469.333333-277.333333A53.333333 53.333333 0 1 1 512 341.333333a53.333333 53.333333 0 0 1 0-106.666666zM458.666667 384h64a42.666667 42.666667 0 0 1 42.666666 42.666667v256h53.333334a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333H426.666667a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333h53.333333v-213.333334h-21.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333334-21.333333z',
+              fill: '#3370FF'
+            })
+          ]
+        )
+      ])
+    }
+  },
   'app-operation': {
     iconReader: () => {
       return h('i', [
@@ -906,23 +927,7 @@ export const iconMap: any = {
           },
           [
             h('path', {
-              d: 'M494.592 165.12l-320 208a32 32 0 0 0-14.592 26.88v224a32 32 0 0 0 14.592 26.88l320 208a32 32 0 0 0 34.88 0l320-208a32 32 0 0 0 14.528-26.88v-224a32 32 0 0 0-14.528-26.88l-320-208a32 32 0 0 0-34.88 0zM224 417.408L512 230.144l288 187.2V606.72L512 793.856 224 606.656V417.28z',
-              fill: 'currentColor'
-            }),
-            h('path', {
-              d: 'M512 592a32 32 0 0 0-32 32V832a32 32 0 0 0 64 0V624a32 32 0 0 0-32-32z',
-              fill: 'currentColor'
-            }),
-            h('path', {
-              d: 'M165.76 381.632a32 32 0 0 0 7.872 44.608l320 224a32 32 0 0 0 36.736 0l320-224a32 32 0 0 0-36.736-52.48L512 584.96l-301.632-211.2a32 32 0 0 0-44.608 7.872z',
-              fill: 'currentColor'
-            }),
-            h('path', {
-              d: 'M493.632 373.76a32 32 0 0 1 36.736 0l320 224a32 32 0 0 1-36.736 52.48L512 439.04l-301.632 211.2a32 32 0 1 1-36.736-52.48l320-224z',
-              fill: 'currentColor'
-            }),
-            h('path', {
-              d: 'M512 160a32 32 0 0 0-32 32v208a32 32 0 0 0 64 0V192a32 32 0 0 0-32-32z',
+              d: 'M512 170.666667a85.333333 85.333333 0 0 1 85.333333-85.333334h256a85.333333 85.333333 0 0 1 85.333334 85.333334v256a85.333333 85.333333 0 0 1-85.333334 85.333333h-256a85.333333 85.333333 0 0 1-85.333333-85.333333V170.666667z m85.333333 0v256h256V170.666667h-256zM85.333333 597.333333a85.333333 85.333333 0 0 1 85.333334-85.333333h256a85.333333 85.333333 0 0 1 85.333333 85.333333v256a85.333333 85.333333 0 0 1-85.333333 85.333334H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333334v-256z m85.333334 0v256h256v-256H170.666667zM128 298.666667a213.333333 213.333333 0 0 1 213.333333-213.333334h85.333334v85.333334H341.333333a128 128 0 0 0-128 128h57.514667a12.8 12.8 0 0 1 9.728 21.12l-100.181333 116.906666a12.8 12.8 0 0 1-19.456 0l-100.181334-116.906666A12.8 12.8 0 0 1 70.485333 298.666667H128zM896 725.333333a213.333333 213.333333 0 0 1-213.333333 213.333334h-85.333334v-85.333334h85.333334a128 128 0 0 0 128-128v-21.333333h-57.514667a12.8 12.8 0 0 1-9.728-21.12l100.181333-116.906667a12.8 12.8 0 0 1 19.456 0l100.181334 116.906667a12.8 12.8 0 0 1-9.728 21.12H896v21.333333z',
               fill: 'currentColor'
             })
           ]

ui/src/styles/app.scss

@@ -699,10 +699,11 @@ h5 {
     font-weight: 400;
   }
   .el-radio-button__original-radio:checked + .el-radio-button__inner {
-    color: var(--el-color-primary);
-    background: var(--el-color-primary-light-9);
-    border: none;
-    box-shadow: none;
+    color: var(--el-color-primary) !important;
+    background: var(--el-color-primary-light-9) !important;
+    border: none !important;
+    box-shadow: none !important;
+    font-weight: 500;
   }
 }
 

ui/src/utils/utils.ts

@@ -38,7 +38,7 @@ export function fileType(name: string) {
   获得文件对应图片
 */
 const typeList: any = {
-  txt: ['txt', 'pdf', 'docx', 'csv', 'md', 'html', 'PDF'],
+  txt: ['txt', 'pdf', 'docx', 'csv', 'md', 'html'],
   table: ['xlsx', 'xls', 'csv'],
   QA: ['xlsx', 'csv', 'xls']
 }
@@ -46,12 +46,12 @@ const typeList: any = {
 export function getImgUrl(name: string) {
   const list = Object.values(typeList).flat()
 
-  const type = list.includes(fileType(name.toLowerCase())) ? fileType(name.toLowerCase()) : 'unknow'
+  const type = list.includes(fileType(name).toLowerCase()) ? fileType(name).toLowerCase() : 'unknow'
   return new URL(`../assets/${type}-icon.svg`, import.meta.url).href
 }
 // 是否是白名单后缀
 export function isRightType(name: string, type: string) {
-  return typeList[type].includes(fileType(name))
+  return typeList[type].includes(fileType(name).toLowerCase())
 }
 
 /*

ui/src/views/dataset/component/UploadComponent.vue

@@ -7,14 +7,33 @@
     label-position="top"
     require-asterisk-position="right"
   >
-    <el-form-item>
-      <el-radio-group v-model="form.fileType" @change="radioChange">
-        <el-radio value="txt">文本文件</el-radio>
-        <el-radio value="table">表格</el-radio>
-        <el-radio value="QA">QA 问答对</el-radio>
+    <div class="mt-16 mb-16">
+      <el-radio-group v-model="form.fileType" @change="radioChange" class="app-radio-button-group">
+        <el-radio-button value="txt">文本文件</el-radio-button>
+        <el-radio-button value="table">表格</el-radio-button>
+        <el-radio-button value="QA">QA 问答对</el-radio-button>
       </el-radio-group>
-    </el-form-item>
+    </div>
+
     <el-form-item prop="fileList" v-if="form.fileType === 'QA'">
+      <div class="update-info flex p-8-12 border-r-4 mb-16 w-full">
+        <div class="mt-4">
+          <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+        </div>
+        <div class="ml-16 lighter">
+          <p>
+            1、点击下载对应模版并完善信息：
+            <el-button type="primary" link @click="downloadTemplate('excel')">
+              下载 Excel 模版
+            </el-button>
+            <el-button type="primary" link @click="downloadTemplate('csv')">
+              下载 CSV 模版
+            </el-button>
+          </p>
+          <p>2、上传的表格文件中每个 sheet 会作为一个文档，sheet名称为文档名称</p>
+          <p>3、每次最多上传 50 个文件，每个文件不超过 100MB</p>
+        </div>
+      </div>
       <el-upload
         :webkitdirectory="false"
         class="w-full mb-4"
@@ -38,18 +57,31 @@
             <em class="hover" @click.prevent="handlePreview(true)"> 选择文件夹 </em>
           </p>
           <div class="upload__decoration">
-            <p>当前支持 XLSX / XLS / CSV 格式的文档</p>
-            <p>每次最多上传50个文件，每个文件不超过 100MB</p>
+            <p>支持格式：EXCEL、CSV</p>
           </div>
         </div>
       </el-upload>
-      <el-button type="primary" link @click="downloadTemplate('excel')">
-        下载 Excel 模板
-      </el-button>
-      <el-divider direction="vertical" />
-      <el-button type="primary" link @click="downloadTemplate('csv')"> 下载 CSV 模板 </el-button>
     </el-form-item>
     <el-form-item prop="fileList" v-else-if="form.fileType === 'table'">
+      <div class="update-info flex p-8-12 border-r-4 mb-16 w-full">
+        <div class="mt-4">
+          <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+        </div>
+        <div class="ml-16 lighter">
+          <p>
+            1、点击下载对应模版并完善信息：
+            <el-button type="primary" link @click="downloadTableTemplate('excel')">
+              下载 Excel 模版
+            </el-button>
+            <el-button type="primary" link @click="downloadTableTemplate('csv')">
+              下载 CSV 模版
+            </el-button>
+          </p>
+          <p>2、第一行必须是列标题，且列标题必须是有意义的术语，表中每条记录将作为一个分段</p>
+          <p>3、上传的表格文件中每个 sheet 会作为一个文档，sheet名称为文档名称</p>
+          <p>4、每次最多上传 50 个文件，每个文件不超过 100MB</p>
+        </div>
+      </div>
       <el-upload
         :webkitdirectory="false"
         class="w-full mb-4"
@@ -73,19 +105,21 @@
             <em class="hover" @click.prevent="handlePreview(true)"> 选择文件夹 </em>
           </p>
           <div class="upload__decoration">
-            <p>当前支持 EXCEL和CSV 格式文件。</p>
-            <p>第一行必须是列标题，且列标题必须是有意义的术语，表中每条记录将作为一个分段。</p>
-            <p>每次最多上传50个文档，每个文档最大不能超过100MB。</p>
+            <p>支持格式：EXCEL 和 CSV</p>
           </div>
         </div>
       </el-upload>
-      <el-button type="primary" link @click="downloadTableTemplate('excel')">
-        下载 Excel 模板
-      </el-button>
-      <el-divider direction="vertical" />
-      <el-button type="primary" link @click="downloadTableTemplate('csv')"> 下载 CSV 模板 </el-button>
     </el-form-item>
     <el-form-item prop="fileList" v-else>
+      <div class="update-info flex p-8-12 border-r-4 mb-16 w-full">
+        <div class="mt-4">
+          <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+        </div>
+        <div class="ml-16 lighter">
+          <p>1、文件上传前，建议规范文件的分段标识</p>
+          <p>2、每次最多上传 50 个文件，每个文件不超过 100MB</p>
+        </div>
+      </div>
       <el-upload
         :webkitdirectory="false"
         class="w-full"
@@ -95,7 +129,7 @@
         action="#"
         :auto-upload="false"
         :show-file-list="false"
-        accept=".txt, .md, .csv, .log, .docx, .pdf, .html, .PDF"
+        accept=".txt, .md, .csv, .log, .docx, .pdf, .html"
         :limit="50"
         :on-exceed="onExceed"
         :on-change="fileHandleChange"
@@ -109,10 +143,7 @@
             <em class="hover" @click.prevent="handlePreview(true)"> 选择文件夹 </em>
           </p>
           <div class="upload__decoration">
-            <p>
-              支持格式：TXT、Markdown、PDF、DOCX、HTML、Excel、CSV 每次最多上传50个文件，每个文件不超过 100MB
-            </p>
-            <p>若使用【高级分段】建议上传前规范文件的分段标识</p>
+            <p>支持格式：TXT、Markdown、PDF、DOCX、HTML</p>
           </div>
         </div>
       </el-upload>
@@ -253,4 +284,8 @@ defineExpose({
     color: var(--el-color-primary-light-5);
   }
 }
+.update-info {
+  background: #d6e2ff;
+  line-height: 25px;
+}
 </style>

ui/src/views/document/index.vue

@@ -153,6 +153,13 @@
                     </el-button>
                   </el-tooltip>
                 </span>
+                <span class="mr-4">
+                  <el-tooltip effect="dark" content="设置" placement="top">
+                    <el-button type="primary" text @click.stop="settingDoc(row)">
+                      <el-icon><Setting /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
                 <span @click.stop>
                   <el-dropdown trigger="click">
                     <el-button text type="primary">
@@ -160,10 +167,6 @@
                     </el-button>
                     <template #dropdown>
                       <el-dropdown-menu>
-                        <el-dropdown-item @click="settingDoc(row)">
-                          <el-icon><Setting /></el-icon>
-                          设置
-                        </el-dropdown-item>
                         <el-dropdown-item @click="openDatasetDialog(row)">
                           <AppIcon iconName="app-migrate"></AppIcon>
                           迁移
@@ -181,11 +184,21 @@
                 </span>
               </div>
               <div v-if="datasetDetail.type === '1'">
-                <el-tooltip effect="dark" content="同步" placement="top">
-                  <el-button type="primary" text @click.stop="syncDocument(row)">
-                    <el-icon><Refresh /></el-icon>
-                  </el-button>
-                </el-tooltip>
+                <span class="mr-4">
+                  <el-tooltip effect="dark" content="同步" placement="top">
+                    <el-button type="primary" text @click.stop="syncDocument(row)">
+                      <el-icon><Refresh /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+                <span class="mr-4">
+                  <el-tooltip effect="dark" content="重新向量化" placement="top">
+                    <el-button type="primary" text @click.stop="refreshDocument(row)">
+                      <AppIcon iconName="app-document-refresh" style="font-size: 16px"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+
                 <span @click.stop>
                   <el-dropdown trigger="click">
                     <el-button text type="primary">
@@ -193,13 +206,6 @@
                     </el-button>
                     <template #dropdown>
                       <el-dropdown-menu>
-                        <el-dropdown-item @click="refreshDocument(row)">
-                          <AppIcon
-                            iconName="app-document-refresh"
-                            style="font-size: 16px"
-                          ></AppIcon>
-                          重新向量化</el-dropdown-item
-                        >
                         <el-dropdown-item icon="Setting" @click="settingDoc(row)"
                           >设置</el-dropdown-item
                         >