feat: 支持创建空知识库及交互流程优化(#601)

ui/src/router/modules/dataset.ts

@@ -13,9 +13,9 @@ const datasetRouter = {
     },
     {
       path: '/dataset/:type', // create 或者 upload
-      name: 'CreateDataset',
+      name: 'UploadDocumentDataset',
       meta: { activeMenu: '/dataset' },
-      component: () => import('@/views/dataset/CreateDataset.vue'),
+      component: () => import('@/views/dataset/UploadDocumentDataset.vue'),
       hidden: true
     },
     {

ui/src/views/application/component/CreateApplicationDialog.vue

@@ -63,10 +63,10 @@
     </el-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click.prevent="dialogVisible = false">
+        <el-button @click.prevent="dialogVisible = false" :loading="loading">
           {{ $t('views.application.applicationForm.buttons.cancel') }}
         </el-button>
-        <el-button type="primary" @click="submitValid(applicationFormRef)">
+        <el-button type="primary" @click="submitValid(applicationFormRef)" :loading="loading">
           {{ $t('views.application.applicationForm.buttons.create') }}
         </el-button>
       </span>

ui/src/views/dataset/UploadDocumentDataset.vue

@@ -1,15 +1,18 @@
 <template>
-  <LayoutContainer :header="isCreate ? '创建知识库' : '上传文档'" class="create-dataset">
+  <LayoutContainer header="上传文档" class="create-dataset">
     <template #backButton>
       <back-button @click="back"></back-button>
     </template>
     <div class="create-dataset__main flex" v-loading="loading">
       <div class="create-dataset__component main-calc-height">
         <template v-if="active === 0">
-          <StepFirst ref="StepFirstRef" />
+          <div class="upload-document p-24">
+            <!-- 上传文档 -->
+            <UploadComponent ref="UploadComponentRef" />
+          </div>
         </template>
         <template v-else-if="active === 1">
-          <StepSecond ref="StepSecondRef" />
+          <SetRules ref="SetRulesRef" />
         </template>
         <template v-else-if="active === 2">
           <ResultSuccess :data="successInfo" />
@@ -19,12 +22,7 @@
     <div class="create-dataset__footer text-right border-t" v-if="active !== 2">
       <el-button @click="router.go(-1)" :disabled="loading">取消</el-button>
       <el-button @click="prev" v-if="active === 1" :disabled="loading">上一步</el-button>
-      <el-button
-        @click="next"
-        type="primary"
-        v-if="active === 0"
-        :disabled="loading || StepFirstRef?.loading"
-      >
+      <el-button @click="next" type="primary" v-if="active === 0" :disabled="loading">
         创建并导入
       </el-button>
       <el-button @click="submit" type="primary" v-if="active === 1" :disabled="loading">
@@ -36,9 +34,9 @@
 <script setup lang="ts">
 import { ref, computed, onUnmounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import StepFirst from './step/StepFirst.vue'
-import StepSecond from './step/StepSecond.vue'
-import ResultSuccess from './step/ResultSuccess.vue'
+import SetRules from './component/SetRules.vue'
+import ResultSuccess from './component/ResultSuccess.vue'
+import UploadComponent from './component/UploadComponent.vue'
 import datasetApi from '@/api/dataset'
 import documentApi from '@/api/document'
 import type { datasetData } from '@/api/type/dataset'
@@ -46,33 +44,17 @@ import { MsgConfirm, MsgSuccess } from '@/utils/message'
 
 import useStore from '@/stores'
 const { dataset, document } = useStore()
-const baseInfo = computed(() => dataset.baseInfo)
-const webInfo = computed(() => dataset.webInfo)
 const documentsFiles = computed(() => dataset.documentsFiles)
 const documentsType = computed(() => dataset.documentsType)
 
 const router = useRouter()
 const route = useRoute()
 const {
-  params: { type },
   query: { id } // id为datasetID，有id的是上传文档
 } = route
-const isCreate = type === 'create'
-// const steps = [
-//   {
-//     ref: 'StepFirstRef',
-//     name: '上传文档',
-//     component: StepFirst
-//   },
-//   {
-//     ref: 'StepSecondRef',
-//     name: '设置分段规则',
-//     component: StepSecond
-//   }
-// ]
 
-const StepFirstRef = ref()
-const StepSecondRef = ref()
+const SetRulesRef = ref()
+const UploadComponentRef = ref()
 
 const loading = ref(false)
 const disabled = ref(false)
@@ -81,7 +63,7 @@ const successInfo = ref<any>(null)
 
 async function next() {
   disabled.value = true
-  if (await StepFirstRef.value?.onSubmit()) {
+  if (await UploadComponentRef.value.validate()) {
     if (documentsType.value === 'QA') {
       let fd = new FormData()
       documentsFiles.value.forEach((item: any) => {
@@ -118,16 +100,14 @@ const prev = () => {
 }
 
 function clearStore() {
-  dataset.saveBaseInfo(null)
-  dataset.saveWebInfo(null)
   dataset.saveDocumentsFile([])
   dataset.saveDocumentsType('')
 }
 function submit() {
   loading.value = true
   const documents = [] as any
-  StepSecondRef.value?.paragraphList.map((item: any) => {
-    if (!StepSecondRef.value?.checkedConnect) {
+  SetRulesRef.value?.paragraphList.map((item: any) => {
+    if (!SetRulesRef.value?.checkedConnect) {
       item.content.map((v: any) => {
         delete v['problem_list']
       })
@@ -159,7 +139,7 @@ function submit() {
   }
 }
 function back() {
-  if (baseInfo.value || webInfo.value || documentsFiles.value?.length > 0) {
+  if (documentsFiles.value?.length > 0) {
     MsgConfirm(`提示`, `当前的更改尚未保存，确认退出吗?`, {
       confirmButtonText: '确认',
       type: 'warning'
@@ -206,5 +186,10 @@ onUnmounted(() => {
     width: 100%;
     box-sizing: border-box;
   }
+  .upload-document {
+    width: 70%;
+    margin: 0 auto;
+    margin-bottom: 20px;
+  }
 }
 </style>

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

@@ -70,10 +70,10 @@
     </el-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click.prevent="dialogVisible = false">
+        <el-button @click.prevent="dialogVisible = false" :loading="loading">
           {{ $t('views.application.applicationForm.buttons.cancel') }}
         </el-button>
-        <el-button type="primary" @click="submitValid">
+        <el-button type="primary" @click="submitValid" :loading="loading">
           {{ $t('views.application.applicationForm.buttons.create') }}
         </el-button>
       </span>
@@ -126,18 +126,16 @@ const submitValid = () => {
   if (user.isEnterprise()) {
     submitHandle()
   } else {
-    common
-      .asyncGetValid(ValidType.Application, ValidCount.Application, loading)
-      .then(async (res: any) => {
-        if (res?.data) {
-          submitHandle()
-        } else {
-          MsgAlert(
-            '提示',
-            '社区版最多支持 5 个应用，如需拥有更多应用，请联系我们（https://fit2cloud.com/）。'
-          )
-        }
-      })
+    common.asyncGetValid(ValidType.Dataset, ValidCount.Dataset, loading).then(async (res: any) => {
+      if (res?.data) {
+        submitHandle()
+      } else {
+        MsgAlert(
+          '提示',
+          '社区版最多支持 50 个知识库，如需拥有更多知识库，请联系我们（https://fit2cloud.com/）。'
+        )
+      }
+    })
   }
 }
 const submitHandle = async () => {

ui/src/views/dataset/step/StepFirst.vue

@@ -1,183 +0,0 @@
-<template>
-  <el-scrollbar>
-    <div class="upload-document p-24">
-      <!-- 基本信息 -->
-      <BaseForm ref="BaseFormRef" v-if="isCreate" />
-      <el-form
-        v-if="isCreate"
-        ref="webFormRef"
-        :rules="rules"
-        :model="form"
-        label-position="top"
-        require-asterisk-position="right"
-      >
-        <el-form-item label="知识库类型" required>
-          <el-radio-group v-model="form.type" class="card__radio" @change="radioChange">
-            <el-row :gutter="20">
-              <el-col :span="12">
-                <el-card shadow="never" class="mb-16" :class="form.type === '0' ? 'active' : ''">
-                  <el-radio value="0" size="large">
-                    <div class="flex align-center">
-                      <AppAvatar class="mr-8" shape="square" :size="32">
-                        <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
-                      </AppAvatar>
-                      <div>
-                        <p class="mb-4">通用型</p>
-                        <el-text type="info">可以通过上传文件或手动录入方式构建知识库</el-text>
-                      </div>
-                    </div>
-                  </el-radio>
-                </el-card>
-              </el-col>
-              <el-col :span="12">
-                <el-card shadow="never" class="mb-16" :class="form.type === '1' ? 'active' : ''">
-                  <el-radio value="1" size="large">
-                    <div class="flex align-center">
-                      <AppAvatar class="mr-8 avatar-purple" shape="square" :size="32">
-                        <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
-                      </AppAvatar>
-                      <div>
-                        <p class="mb-4">Web 站点</p>
-                        <el-text type="info">通过网站链接同步方式构建知识库 </el-text>
-                      </div>
-                    </div>
-                  </el-radio>
-                </el-card>
-              </el-col>
-            </el-row>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="Web 根地址" prop="source_url" v-if="form.type === '1'">
-          <el-input
-            v-model="form.source_url"
-            placeholder="请输入 Web 根地址"
-            @blur="form.source_url = form.source_url.trim()"
-          />
-        </el-form-item>
-        <el-form-item label="选择器" v-if="form.type === '1'">
-          <el-input
-            v-model="form.selector"
-            placeholder="默认为 body，可输入 .classname/#idname/tagname"
-            @blur="form.selector = form.selector.trim()"
-          />
-        </el-form-item>
-      </el-form>
-
-      <!-- 上传文档 -->
-      <UploadComponent ref="UploadComponentRef" v-if="form.type === '0'" />
-    </div>
-  </el-scrollbar>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, reactive, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import BaseForm from '@/views/dataset/component/BaseForm.vue'
-import UploadComponent from '@/views/dataset/component/UploadComponent.vue'
-import { isAllPropertiesEmpty } from '@/utils/utils'
-import datasetApi from '@/api/dataset'
-import { MsgError, MsgSuccess } from '@/utils/message'
-import useStore from '@/stores'
-const { dataset } = useStore()
-
-const route = useRoute()
-const router = useRouter()
-const {
-  params: { type }
-} = route
-const isCreate = type === 'create'
-const BaseFormRef = ref()
-const UploadComponentRef = ref()
-const webFormRef = ref()
-const loading = ref(false)
-
-const form = ref<any>({
-  type: '0',
-  source_url: '',
-  selector: ''
-})
-
-const rules = reactive({
-  source_url: [{ required: true, message: '请输入 Web 根地址', trigger: 'blur' }]
-})
-
-watch(form.value, (value) => {
-  if (isAllPropertiesEmpty(value)) {
-    dataset.saveWebInfo(null)
-  } else {
-    dataset.saveWebInfo(value)
-  }
-})
-
-function radioChange() {
-  dataset.saveDocumentsFile([])
-  dataset.saveDocumentsType('')
-  form.value.source_url = ''
-  form.value.selector = ''
-}
-
-const onSubmit = async () => {
-  if (isCreate) {
-    if (form.value.type === '0') {
-      if ((await BaseFormRef.value?.validate()) && (await UploadComponentRef.value.validate())) {
-        if (UploadComponentRef.value.form.fileList.length > 50) {
-          MsgError('每次最多上传50个文件！')
-          return false
-        } else {
-          /*
-        stores保存数据
-      */
-          dataset.saveBaseInfo(BaseFormRef.value.form)
-          dataset.saveDocumentsType(UploadComponentRef.value.form.fileType)
-          dataset.saveDocumentsFile(UploadComponentRef.value.form.fileList)
-          return true
-        }
-      } else {
-        return false
-      }
-    } else {
-      if (await BaseFormRef.value?.validate()) {
-        await webFormRef.value.validate((valid: any) => {
-          if (valid) {
-            const obj = { ...BaseFormRef.value.form, ...form.value }
-            datasetApi.postWebDataset(obj, loading).then((res) => {
-              MsgSuccess('提交成功')
-              dataset.saveBaseInfo(null)
-              dataset.saveWebInfo(null)
-              router.push({ path: `/dataset/${res.data.id}/document` })
-            })
-          } else {
-            return false
-          }
-        })
-      } else {
-        return false
-      }
-    }
-  } else {
-    if (await UploadComponentRef.value.validate()) {
-      /*
-        stores保存数据
-      */
-      dataset.saveDocumentsType(UploadComponentRef.value.form.fileType)
-      dataset.saveDocumentsFile(UploadComponentRef.value.form.fileList)
-      return true
-    } else {
-      return false
-    }
-  }
-}
-
-onMounted(() => {})
-
-defineExpose({
-  onSubmit,
-  loading
-})
-</script>
-<style scoped lang="scss">
-.upload-document {
-  width: 70%;
-  margin: 0 auto;
-  margin-bottom: 20px;
-}
-</style>