From 34aad04edd2fe7e65e7f2f02b45096cfb5beb227 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 2 Nov 2023 09:56:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/dataset.ts                         | 42 +++++++-
 ui/src/api/type/dataset.ts                    |  8 +-
 ui/src/components/card-add/index.vue          |  2 +-
 ui/src/components/card-box/index.vue          |  2 +-
 ui/src/stores/index.ts                        |  4 +-
 ui/src/stores/modules/dataset.ts              | 26 +++++
 ui/src/stores/modules/user.ts                 |  4 +-
 ui/src/styles/element-plus.scss               |  6 ++
 ui/src/views/dataset/CreateDataset.vue        | 26 +++--
 ui/src/views/dataset/component/BaseForm.vue   | 15 ++-
 .../dataset/component/SegmentPreview.vue      | 30 ++++++
 ...UploadDocument.vue => UploadComponent.vue} | 18 ++--
 ui/src/views/dataset/index.vue                | 97 +++++++++----------
 ui/src/views/dataset/step/SetRules.vue        | 64 ++++++++++++
 ui/src/views/dataset/step/UploadDocument.vue  | 35 +++++++
 15 files changed, 299 insertions(+), 80 deletions(-)
 create mode 100644 ui/src/stores/modules/dataset.ts
 create mode 100644 ui/src/views/dataset/component/SegmentPreview.vue
 rename ui/src/views/dataset/component/{UploadDocument.vue => UploadComponent.vue} (80%)
 create mode 100644 ui/src/views/dataset/step/SetRules.vue
 create mode 100644 ui/src/views/dataset/step/UploadDocument.vue

diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index ef5f09fb1..caee05921 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -32,9 +32,49 @@ const delDateset: (dataset_id: String) => Promise<Result<boolean>> = (dataset_id
   return del(`${prefix}/${dataset_id}`)
 }
 
+/**
+ * 创建数据集
+ * @param 参数 
+ * {
+  "name": "string",
+  "desc": "string",
+  "documents": [
+    {
+      "name": "string",
+      "paragraphs": [
+        {
+          "content": "string",
+          "title": "string",
+          "is_active": true,
+          "problem_list": [
+            {
+              "id": "string",
+              "content": "string"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+ */
+const postDateset: (data: any) => Promise<Result<any>> = (data) => {
+  return post(`${prefix}`, data)
+}
+
+/**
+ * 分段预览（上传文档）
+ * @param 参数  file:file,limit:number,patterns:array,with_filter:boolean
+ */
+const postSplitDocument: (data: any) => Promise<Result<any>> = (data) => {
+  console.log(data)
+  return post(`${prefix}/document/split`, data)
+}
 
 export default {
   getDateset,
   getAllDateset,
-  delDateset
+  delDateset,
+  postDateset,
+  postSplitDocument
 }
diff --git a/ui/src/api/type/dataset.ts b/ui/src/api/type/dataset.ts
index f8247e1ac..becec96d7 100644
--- a/ui/src/api/type/dataset.ts
+++ b/ui/src/api/type/dataset.ts
@@ -4,4 +4,10 @@ interface datasetListRequest {
   search_text: string
 }
 
-export type { datasetListRequest }
+interface datasetData {
+  name: String
+  desc: String
+  documents?: Array<any>
+}
+
+export type { datasetListRequest, datasetData }
diff --git a/ui/src/components/card-add/index.vue b/ui/src/components/card-add/index.vue
index c6f7673be..678322484 100644
--- a/ui/src/components/card-add/index.vue
+++ b/ui/src/components/card-add/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card shadow="hover">
+  <el-card shadow="always">
     <div class="card-add">
       <AppIcon :iconName="icon" class="add-icon" />
       <span class="ml-10">{{ title }}</span>
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index 902ad7b03..eeb05ab34 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card shadow="hover" class="card-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
+  <el-card shadow="always" class="card-box" @mouseenter="cardEnter()" @mouseleave="cardLeave()">
     <div class="card-header">
       <slot name="header">
         <div class="title flex align-center">
diff --git a/ui/src/stores/index.ts b/ui/src/stores/index.ts
index ffbf4f695..4ce567603 100644
--- a/ui/src/stores/index.ts
+++ b/ui/src/stores/index.ts
@@ -2,9 +2,11 @@ import { createPinia } from 'pinia'
 const store = createPinia()
 export { store }
 import useUserStore from './modules/user'
+import useDatasetStore from './modules/dataset'
 
 const useStore = () => ({
-  user: useUserStore()
+  user: useUserStore(),
+  dataset: useDatasetStore()
 })
 
 export default useStore
diff --git a/ui/src/stores/modules/dataset.ts b/ui/src/stores/modules/dataset.ts
new file mode 100644
index 000000000..103d62331
--- /dev/null
+++ b/ui/src/stores/modules/dataset.ts
@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia'
+import type { datasetData } from '@/api/type/dataset'
+import type { UploadUserFile } from 'element-plus'
+
+export interface datasetStateTypes {
+  baseInfo: datasetData | null
+  documentsFiles: UploadUserFile[]
+}
+
+const useDatasetStore = defineStore({
+  id: 'dataset',
+  state: (): datasetStateTypes => ({
+    baseInfo: null,
+    documentsFiles: []
+  }),
+  actions: {
+    saveBaseInfo(info: datasetData) {
+      this.baseInfo = info
+    },
+    saveDocumentsFile(file: UploadUserFile[]) {
+      this.documentsFiles = file
+    }
+  }
+})
+
+export default useDatasetStore
diff --git a/ui/src/stores/modules/user.ts b/ui/src/stores/modules/user.ts
index 224dc39f2..c99135ed8 100644
--- a/ui/src/stores/modules/user.ts
+++ b/ui/src/stores/modules/user.ts
@@ -2,14 +2,14 @@ import { defineStore } from 'pinia'
 import type { User } from '@/api/type/user'
 import UserApi from '@/api/user'
 
-export interface appStateTypes {
+export interface userStateTypes {
   userInfo: User | null
   token: any
 }
 
 const useUserStore = defineStore({
   id: 'user',
-  state: (): appStateTypes => ({
+  state: (): userStateTypes => ({
     userInfo: null,
     token: ''
   }),
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index b6efe3b86..4ac1a64d2 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -1,6 +1,7 @@
 :root {
   --el-menu-item-height: 45px;
   --el-text-color-primary: '#1F2329';
+  --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
 }
 
 .el-button {
@@ -85,6 +86,11 @@
   }
 }
 
+.el-card {
+  --el-card-border-radius: 8px;
+  border: none !important;
+}
+
 // 抽屉样式整体修改
 .el-drawer {
   .el-drawer__header {
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index 438ff2b82..8c1133271 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -8,12 +8,12 @@
       </div>
       <div class="create-dataset__component p-15">
         <el-scrollbar>
-          <component :is="steps[active].component" />
+          <component :is="steps[active].component" :ref="steps[active]?.ref" />
         </el-scrollbar>
       </div>
       <div class="create-dataset__footer text-right p-15 border-t">
         <el-button @click="next">取 消</el-button>
-        <el-button @click="next">上一步</el-button>
+        <el-button @click="prev">上一步</el-button>
         <el-button @click="next" type="primary">下一步</el-button>
         <el-button @click="next" type="primary">开始导入</el-button>
       </div>
@@ -22,24 +22,32 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import BaseForm from './component/BaseForm.vue'
-
-const active = ref(0)
+import UploadDocument from './step/UploadDocument.vue'
+import SetRules from './step/SetRules.vue'
 
 const steps = [
   {
+    ref: 'UploadDocumentRef',
     name: '上传文档',
-    component: BaseForm
+    component: UploadDocument
   },
   {
+    ref: 'SetRulesRef',
     name: '设置分段规则',
-    component: ''
+    component: SetRules
   }
 ]
 
-const next = () => {
-  if (active.value++ > 2) active.value = 0
+const UploadDocumentRef = ref()
+
+const active = ref(0)
+
+async function next() {
+  if (await UploadDocumentRef.value.onSubmit()) {
+    if (active.value++ > 2) active.value = 0
+  }
 }
+const prev = () => {}
 </script>
 <style lang="scss" scoped>
 .create-dataset {
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index c2cdf882b..e18afc7de 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -9,9 +9,9 @@
         show-word-limit
       />
     </el-form-item>
-    <el-form-item label="数据集描述" prop="describe">
+    <el-form-item label="数据集描述" prop="desc">
       <el-input
-        v-model.trim="form.describe"
+        v-model.trim="form.desc"
         type="textarea"
         placeholder="描述数据集的内容，详尽的描述将帮助AI能深入理解该数据集的内容，能更准确的检索到内容，提高该数据集的命中率。"
         maxlength="500"
@@ -20,25 +20,23 @@
       />
     </el-form-item>
   </el-form>
-  <UploadDocument />
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import UploadDocument from '@/views/dataset/component/UploadDocument.vue'
 const form = reactive({
   name: '',
-  describe: ''
+  desc: ''
 })
 
 const rules = reactive({
   name: [{ required: true, message: '请输入数据集名称', trigger: 'blur' }],
-  describe: [{ required: true, message: '请输入数据集描述', trigger: 'blur' }]
+  desc: [{ required: true, message: '请输入数据集描述', trigger: 'blur' }]
 })
 const FormRef = ref()
 // 表单校验
 function validate() {
   if (!FormRef.value) return
-  return FormRef.value.validate((valid) => {
+  return FormRef.value.validate((valid: any) => {
     return valid
   })
 }
@@ -46,7 +44,8 @@ function validate() {
 onMounted(() => {})
 
 defineExpose({
-  validate
+  validate,
+  form
 })
 </script>
 <style scoped lang="scss"></style>
diff --git a/ui/src/views/dataset/component/SegmentPreview.vue b/ui/src/views/dataset/component/SegmentPreview.vue
new file mode 100644
index 000000000..c5885219d
--- /dev/null
+++ b/ui/src/views/dataset/component/SegmentPreview.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="User" name="first">
+      <div>
+        
+      </div>
+
+    </el-tab-pane>
+    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
+    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
+    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
+  </el-tabs>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import type { TabsPaneContext } from 'element-plus'
+const activeName = ref('first')
+onMounted(() => {})
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+<style scoped lang="scss">
+.set-rules {
+  &__radio {
+    display: block;
+  }
+}
+</style>
diff --git a/ui/src/views/dataset/component/UploadDocument.vue b/ui/src/views/dataset/component/UploadComponent.vue
similarity index 80%
rename from ui/src/views/dataset/component/UploadDocument.vue
rename to ui/src/views/dataset/component/UploadComponent.vue
index c28da3657..558968b48 100644
--- a/ui/src/views/dataset/component/UploadDocument.vue
+++ b/ui/src/views/dataset/component/UploadComponent.vue
@@ -1,12 +1,14 @@
 <template>
   <h4 class="title-decoration-1 mb-10">上传文档</h4>
   <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
-    <el-form-item prop="name">
+    <el-form-item prop="fileList">
       <el-upload
         class="w-full"
         drag
-        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
         multiple
+        v-model:file-list="form.fileList"
+        action="#"
+        :auto-upload="false"
       >
         <div class="el-upload__text">
           <p>
@@ -30,17 +32,18 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
 const form = reactive({
-  name: '',
-  describe: ''
+  fileList: []
 })
 
-const rules = reactive({})
+const rules = reactive({
+  fileList: [{ required: true, message: '请上传文件', trigger: 'change' }]
+})
 const FormRef = ref()
 
 // 表单校验
 function validate() {
   if (!FormRef.value) return
-  return FormRef.value.validate((valid) => {
+  return FormRef.value.validate((valid: any) => {
     return valid
   })
 }
@@ -48,7 +51,8 @@ function validate() {
 onMounted(() => {})
 
 defineExpose({
-  validate
+  validate,
+  form
 })
 </script>
 <style scoped lang="scss">
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 4073426a6..92583d4d8 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -1,54 +1,53 @@
 <template>
-  <LayoutContent header="数据集">
-    <div class="dataset-list-container p-15">
-      <div class="text-right">
-        <el-input
-          v-model="filterText"
-          placeholder="搜索内容"
-          suffix-icon="Search"
-          style="width: 300px"
-        />
-      </div>
-      <div>
-        <el-row
-          :gutter="15"
-          v-infinite-scroll="loadDataset"
-          :infinite-scroll-disabled="disabledScroll"
-        >
-          <el-col :xs="24" :sm="12" :md="6" :lg="5" :xl="4" class="mt-10">
-            <CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
-          </el-col>
-          <el-col
-            :xs="24"
-            :sm="12"
-            :md="6"
-            :lg="5"
-            :xl="4"
-            v-for="(item, index) in datasetList"
-            :key="index"
-            class="mt-10"
-          >
-            <CardBox :title="item.name" :description="item.desc" class="cursor">
-              <template #mouseEnter>
-                <div class="delete-button">
-                  <el-button type="primary" link @click.stop="deleteDateset(item)">
-                    <el-icon><Delete /></el-icon>
-                  </el-button>
-                </div>
-              </template>
-
-              <template #footer>
-                <div class="footer-content">
-                  {{ item?.document_count || 0 }}文档数 {{ item?.char_length || 0 }}字符数
-                  {{ item?.char_length || 0 }}关联应用
-                </div>
-              </template>
-            </CardBox>
-          </el-col>
-        </el-row>
-      </div>
+  <div class="dataset-list-container p-15">
+    <div class="flex-between">
+      <h3>数据集</h3>
+      <el-input
+        v-model="filterText"
+        placeholder="搜索内容"
+        suffix-icon="Search"
+        style="width: 300px"
+      />
     </div>
-  </LayoutContent>
+    <div>
+      <el-row
+        :gutter="15"
+        v-infinite-scroll="loadDataset"
+        :infinite-scroll-disabled="disabledScroll"
+      >
+        <el-col :xs="24" :sm="12" :md="6" :lg="5" :xl="4" class="mt-10">
+          <CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
+        </el-col>
+        <el-col
+          :xs="24"
+          :sm="12"
+          :md="6"
+          :lg="5"
+          :xl="4"
+          v-for="(item, index) in datasetList"
+          :key="index"
+          class="mt-10"
+        >
+          <CardBox :title="item.name" :description="item.desc" class="cursor">
+            <template #mouseEnter>
+              <div class="delete-button">
+                <el-button type="primary" link @click.stop="deleteDateset(item)">
+                  <el-icon><Delete /></el-icon>
+                </el-button>
+              </div>
+            </template>
+
+            <template #footer>
+              <div class="footer-content">
+                {{ item?.document_count || 0 }}文档数 {{ item?.char_length || 0 }}字符数
+                {{ item?.char_length || 0 }}关联应用
+              </div>
+            </template>
+          </CardBox>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
diff --git a/ui/src/views/dataset/step/SetRules.vue b/ui/src/views/dataset/step/SetRules.vue
new file mode 100644
index 000000000..40022731d
--- /dev/null
+++ b/ui/src/views/dataset/step/SetRules.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="set-rules">
+    <el-row>
+      <el-col :span="12">
+        <h4 class="title-decoration-1 mb-10">分段规则</h4>
+        <el-radio-group v-model="radio1" class="set-rules__radio">
+          <div>
+            <el-radio label="1" size="large">智能分段（推荐）</el-radio>
+          </div>
+          <div>
+            <el-radio label="2" size="large">高级分段</el-radio>
+          </div>
+        </el-radio-group>
+        <div>
+          <el-button @click="splitDocument">生成预览</el-button>
+        </div>
+      </el-col>
+
+      <el-col :span="12">
+        <h4 class="title-decoration-1 mb-10">分段预览</h4>
+        <SegmentPreview />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import SegmentPreview from '@/views/dataset/component/SegmentPreview.vue'
+import DatasetApi from '@/api/dataset'
+import useStore from '@/stores'
+const { dataset } = useStore()
+const documentsFiles = computed(() => dataset.documentsFiles)
+
+const radio1 = ref('1')
+const loading = ref(false)
+
+function splitDocument() {
+  loading.value = true
+  let fd = new FormData()
+  console.log(documentsFiles.value)
+  documentsFiles.value.forEach((item) => {
+    if (item?.raw) {
+      fd.append('file', item?.raw)
+    }
+  })
+
+  DatasetApi.postSplitDocument(fd)
+    .then((res) => {
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+onMounted(() => {})
+</script>
+<style scoped lang="scss">
+.set-rules {
+  &__radio {
+    display: block;
+  }
+}
+</style>
diff --git a/ui/src/views/dataset/step/UploadDocument.vue b/ui/src/views/dataset/step/UploadDocument.vue
new file mode 100644
index 000000000..5c77b41e7
--- /dev/null
+++ b/ui/src/views/dataset/step/UploadDocument.vue
@@ -0,0 +1,35 @@
+<template>
+  <!-- 基本信息 -->
+  <BaseForm ref="BaseFormRef" />
+  <!-- 上传文档 -->
+  <UploadComponent ref="UploadComponentRef" />
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import BaseForm from '@/views/dataset/component/BaseForm.vue'
+import UploadComponent from '@/views/dataset/component/UploadComponent.vue'
+import useStore from '@/stores'
+const { dataset } = useStore()
+
+const BaseFormRef = ref()
+const UploadComponentRef = ref()
+
+// submit
+const onSubmit = async () => {
+  if ((await BaseFormRef.value.validate()) && (await UploadComponentRef.value.validate())) {
+    // stores保存数据
+    dataset.saveBaseInfo(BaseFormRef.value.form)
+    dataset.saveDocumentsFile(UploadComponentRef.value.form.fileList)
+    return true
+  } else {
+    return false
+  }
+}
+
+onMounted(() => {})
+
+defineExpose({
+  onSubmit
+})
+</script>
+<style scoped lang="scss"></style>