feat: 创建Web站点

ui/src/api/dataset.ts

@@ -69,8 +69,28 @@ const delDateset: (dataset_id: String, loading?: Ref<boolean>) => Promise<Result
   ]
 }
  */
-const postDateset: (data: datasetData) => Promise<Result<any>> = (data) => {
-  return post(`${prefix}`, data)
+const postDateset: (data: datasetData, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return post(`${prefix}`, data, undefined, loading)
+}
+
+/**
+ * 创建Web知识库
+ * @param 参数 
+ * {
+  "name": "string",
+  "desc": "string",
+  "url": "string",
+  "selector": "string",
+}
+ */
+const postWebDateset: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return post(`${prefix}`, data, undefined, loading)
 }
 
 /**
@@ -132,5 +152,6 @@ export default {
   getDatesetDetail,
   putDateset,
   listUsableApplication,
-  getDatasetHitTest
+  getDatasetHitTest,
+  postWebDateset
 }

ui/src/api/type/dataset.ts

@@ -2,6 +2,7 @@ interface datasetData {
   name: String
   desc: String
   documents?: Array<any>
+  type?: String
 }
 
 export type { datasetData }

ui/src/stores/modules/dataset.ts

@@ -6,6 +6,7 @@ import { type Ref } from 'vue'
 
 export interface datasetStateTypes {
   baseInfo: datasetData | null
+  webInfo: any
   documentsFiles: UploadUserFile[]
 }
 
@@ -13,12 +14,16 @@ const useDatasetStore = defineStore({
   id: 'dataset',
   state: (): datasetStateTypes => ({
     baseInfo: null,
+    webInfo: null,
     documentsFiles: []
   }),
   actions: {
     saveBaseInfo(info: datasetData | null) {
       this.baseInfo = info
     },
+    saveWebInfo(info: any) {
+      this.webInfo = info
+    },
     saveDocumentsFile(file: UploadUserFile[]) {
       this.documentsFiles = file
     },

ui/src/styles/app.scss

@@ -398,6 +398,9 @@ h4 {
 .primary {
   color: var(--el-color-primary);
 }
+.info {
+  color: var(--el-color-info);
+}
 
 .dotting {
   display: inline-block;
@@ -454,3 +457,28 @@ h4 {
     padding: 8px 16px 8px 12px;
   }
 }
+
+.card__radio {
+  width: 100%;
+  display: block;
+
+  .el-radio {
+    white-space: break-spaces;
+    width: 100%;
+    height: 100%;
+    line-height: 22px;
+    color: var(--app-text-color);
+  }
+
+  :deep(.el-radio__label) {
+    padding-left: 30px;
+    width: 100%;
+  }
+  :deep(.el-radio__input) {
+    position: absolute;
+    top: 16px;
+  }
+  .active {
+    border: 1px solid var(--el-color-primary);
+  }
+}

ui/src/utils/utils.ts

@@ -56,3 +56,11 @@ export function arraySort(list: Array<string>, property: any, desc?: boolean) {
     return desc ? b[property] - a[property] : a[property] - b[property]
   })
 }
+
+// 判断对象里所有属性全部为空
+export function isAllPropertiesEmpty(obj: object) {
+  return Object.values(obj).every(
+    (value) =>
+      value === null || typeof value === 'undefined' || (typeof value === 'string' && !value)
+  )
+}

ui/src/views/dataset/CreateDataset.vue

@@ -3,7 +3,7 @@
     <template #backButton>
       <back-button @click="back"></back-button>
     </template>
-    <template #header>
+    <!-- <template #header>
       <el-steps :active="active" finish-status="success" align-center class="create-dataset__steps">
         <el-step v-for="(item, index) in steps" :key="index">
           <template #icon>
@@ -19,7 +19,7 @@
           </template>
         </el-step>
       </el-steps>
-    </template>
+    </template> -->
     <div class="create-dataset__main flex" v-loading="loading">
       <div class="create-dataset__component main-calc-height">
         <!-- <template v-if="steps[active]?.component">
@@ -40,7 +40,7 @@
       <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"
-        >下一步</el-button
+        >创建并导入</el-button
       >
       <el-button @click="submit" type="primary" v-if="active === 1" :disabled="loading">
         开始导入
@@ -49,7 +49,7 @@
   </LayoutContainer>
 </template>
 <script setup lang="ts">
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, onUnmounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import StepFirst from './step/StepFirst.vue'
 import StepSecond from './step/StepSecond.vue'
@@ -62,6 +62,7 @@ import { MsgConfirm, MsgSuccess } from '@/utils/message'
 import useStore from '@/stores'
 const { dataset } = useStore()
 const baseInfo = computed(() => dataset.baseInfo)
+const webInfo = computed(() => dataset.webInfo)
 
 const router = useRouter()
 const route = useRoute()
@@ -100,6 +101,7 @@ const prev = () => {
 
 function clearStore() {
   dataset.saveBaseInfo(null)
+  dataset.saveWebInfo(null)
   dataset.saveDocumentsFile([])
 }
 function submit() {
@@ -124,21 +126,15 @@ function submit() {
         loading.value = false
       })
   } else {
-    datasetApi
-      .postDateset(obj)
-      .then((res) => {
-        successInfo.value = res.data
-        active.value = 2
-        clearStore()
-        loading.value = false
-      })
-      .catch(() => {
-        loading.value = false
-      })
+    datasetApi.postDateset(obj, loading).then((res) => {
+      successInfo.value = res.data
+      active.value = 2
+      clearStore()
+    })
   }
 }
 function back() {
-  if (baseInfo.value || StepSecondRef.value?.paragraphList?.length > 0) {
+  if (baseInfo.value || webInfo.value || StepSecondRef.value?.paragraphList?.length > 0) {
     MsgConfirm(`提示`, `当前的更改尚未保存，确认退出吗?`, {
       confirmButtonText: '确认',
       type: 'warning'
@@ -152,6 +148,9 @@ function back() {
     router.go(-1)
   }
 }
+onUnmounted(() => {
+  clearStore()
+})
 </script>
 <style lang="scss" scoped>
 .create-dataset {

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

@@ -32,6 +32,8 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
 import useStore from '@/stores'
+import type { datasetData } from '@/api/type/dataset'
+import { isAllPropertiesEmpty } from '@/utils/utils'
 
 const props = defineProps({
   data: {
@@ -41,7 +43,7 @@ const props = defineProps({
 })
 const { dataset } = useStore()
 const baseInfo = computed(() => dataset.baseInfo)
-const form = ref<any>({
+const form = ref<datasetData>({
   name: '',
   desc: ''
 })
@@ -65,6 +67,14 @@ watch(
   }
 )
 
+watch(form.value, (value) => {
+  if (isAllPropertiesEmpty(value)) {
+    dataset.saveBaseInfo(null)
+  } else {
+    dataset.saveBaseInfo(value)
+  }
+})
+
 /*
   表单校验
 */
@@ -86,6 +96,7 @@ onUnmounted(() => {
     desc: ''
   }
 })
+
 defineExpose({
   validate,
   form

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

@@ -54,7 +54,7 @@
   </el-row>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onUnmounted, onMounted, computed } from 'vue'
+import { ref, reactive, onUnmounted, onMounted, computed, watch } from 'vue'
 import type { UploadProps } from 'element-plus'
 import { filesize, getImgUrl } from '@/utils/utils'
 import { MsgError } from '@/utils/message'
@@ -82,6 +82,10 @@ const FormRef = ref()
 //   }
 //   return true
 // }
+
+watch(form.value, (value) => {
+  dataset.saveDocumentsFile(value.fileList)
+})
 function deleteFlie(index: number) {
   form.value.fileList.splice(index, 1)
 }
@@ -112,7 +116,6 @@ defineExpose({
 })
 </script>
 <style scoped lang="scss">
-
 .upload__decoration {
   font-size: 12px;
   line-height: 20px;

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

@@ -3,39 +3,143 @@
     <div class="upload-document p-24">
       <!-- 基本信息 -->
       <BaseForm ref="BaseFormRef" v-if="isCreate" />
+      <el-form
+        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 label="0" size="large">
+                    <div class="flex align-center">
+                      <el-icon size="32" class="mr-8 info"><Document /></el-icon>
+                      <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 label="1" size="large">
+                    <div class="flex align-center">
+                      <el-icon size="32" class="mr-8 info"><Monitor /></el-icon>
+                      <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="url" v-if="form.type === '1'">
+          <el-input
+            v-model="form.url"
+            placeholder="请输入 Web 根地址"
+            @blur="form.name = form.url.trim()"
+          />
+        </el-form-item>
+        <el-form-item label="选择器" v-if="form.type === '1'">
+          <el-input
+            v-model="form.selector"
+            placeholder="请输入选择器"
+            @blur="form.name = form.selector.trim()"
+          />
+        </el-form-item>
+      </el-form>
+
       <!-- 上传文档 -->
-      <UploadComponent ref="UploadComponentRef" />
+      <UploadComponent ref="UploadComponentRef" v-if="form.type === '0'" />
     </div>
   </el-scrollbar>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+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 { MsgConfirm, 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',
+  url: '',
+  selector: ''
+})
+
+const rules = reactive({
+  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([])
+  form.value.url = ''
+  form.value.selector = ''
+}
 
 const onSubmit = async () => {
   if (isCreate) {
-    if ((await BaseFormRef.value?.validate()) && (await UploadComponentRef.value.validate())) {
-      /*
+    if (form.value.type === '0') {
+      if ((await BaseFormRef.value?.validate()) && (await UploadComponentRef.value.validate())) {
+        /*
         stores保存数据
       */
-      dataset.saveBaseInfo(BaseFormRef.value.form)
-      dataset.saveDocumentsFile(UploadComponentRef.value.form.fileList)
-      return true
+        dataset.saveBaseInfo(BaseFormRef.value.form)
+        dataset.saveDocumentsFile(UploadComponentRef.value.form.fileList)
+        return true
+      } else {
+        return false
+      }
     } else {
-      return false
+      if (await BaseFormRef.value?.validate()) {
+        await webFormRef.value.validate((valid: any) => {
+          if (valid) {
+            const obj = { ...BaseFormRef.value.form, ...form.value }
+            datasetApi.postWebDateset(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()) {