feat: 数据集

ui/src/components/back-button/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <el-icon class="back-button cursor mr-10 vertical-middle" @click="jump">
+    <Back />
+  </el-icon>
+</template>
+
+<script setup lang="ts">
+import { useRouter, type RouteLocationRaw } from 'vue-router'
+defineOptions({ name: 'BackButton' })
+const router = useRouter()
+const props = defineProps({
+  to: String
+})
+
+const back: any = router.options.history.state.back // 上一层路由
+function jump() {
+  if (props.to === '-1') {
+    back ? router.push(back) : router.go(-1)
+  } else {
+    router.push(props.to as RouteLocationRaw)
+  }
+}
+</script>
+
+<style lang="scss"></style>

ui/src/components/content-container/LayoutContent.vue

@@ -2,7 +2,8 @@
   <div class="content-container">
     <div class="content-container__header mb-10" v-if="slots.header || header">
       <slot name="header">
-        <span>{{ header }}</span>
+        <back-button :to="backTo" v-if="showBack"></back-button>
+        <span class="vertical-middle">{{ header }}</span>
       </slot>
     </div>
     <el-scrollbar>
@@ -14,11 +15,16 @@
 </template>
 
 <script setup lang="ts">
-import { useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 defineOptions({ name: 'LayoutContent' })
 const slots = useSlots()
-defineProps({
-  header: String
+const props = defineProps({
+  header: String,
+  backTo: String
+})
+const showBack = computed(() => {
+  const { backTo } = props
+  return backTo
 })
 </script>
 

ui/src/components/index.ts

@@ -7,7 +7,7 @@ import LayoutContent from './content-container/LayoutContent.vue'
 import TagsInput from './tags-input/index.vue'
 import CardBox from './card-box/index.vue'
 import CardAdd from './card-add/index.vue'
-
+import BackButton from './back-button/index.vue'
 
 
 export default {
@@ -20,5 +20,6 @@ export default {
     app.component(TagsInput.name, TagsInput)
     app.component(CardBox.name, CardBox)
     app.component(CardAdd.name, CardAdd)
+    app.component(BackButton.name, BackButton)
   }
 }

ui/src/styles/app.scss

@@ -144,6 +144,10 @@ h4 {
   text-align: right;
 }
 
+.vertical-middle {
+  vertical-align: middle;
+}
+
 .border-b {
   border-bottom: 1px solid var(--el-border-color);
 }
@@ -173,4 +177,22 @@ h4 {
 // 内容部分 自适应高度
 .main-calc-height {
   height: calc(100vh - 125px);
+  box-sizing: border-box;
+}
+
+// 标题前带竖线样式
+.title-decoration-1 {
+  position: relative;
+  padding-left: 15px;
+  &:before {
+    position: absolute;
+    left: 2px;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 4px;
+    height: 90%;
+    content: '';
+    background: var(--el-color-primary);
+    border-radius: 10px;
+  }
 }

ui/src/styles/element-plus.scss

@@ -2,6 +2,10 @@
   --el-menu-item-height: 45px;
   --el-text-color-primary: '#1F2329';
 }
+
+.el-button {
+  padding: 5px 12px;
+}
 .el-avatar {
   --el-avatar-bg-color: var(--el-color-primary);
   --el-avatar-size-small: 33px;
@@ -41,7 +45,6 @@
   }
 }
 
-
 .el-message-box__content {
   padding: 24px;
   color: var(--el-text-color-primary);

ui/src/views/dataset/CreateDataset.vue

@@ -1,21 +1,59 @@
 <template>
-  <LayoutContent header="创建数据集">
-    <el-steps :active="active" finish-status="success">
-      <el-step title="步骤 1"></el-step>
-      <el-step title="步骤 2"></el-step>
-      <el-step title="步骤 3"></el-step>
-    </el-steps>
-
-    <el-button style="margin-top: 12px" @click="next">下一步</el-button>
+  <LayoutContent header="创建数据集" back-to="-1">
+    <div class="create-dataset flex main-calc-height">
+      <div class="p-15">
+        <el-steps :active="active" finish-status="success" align-center>
+          <el-step v-for="(item, index) in steps" :key="index" :title="item.name" />
+        </el-steps>
+      </div>
+      <div class="create-dataset__component p-15">
+        <el-scrollbar>
+          <component :is="steps[active].component" />
+        </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="next" type="primary">下一步</el-button>
+        <el-button @click="next" type="primary">开始导入</el-button>
+      </div>
+    </div>
   </LayoutContent>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
+import BaseForm from './component/BaseForm.vue'
 
 const active = ref(0)
 
+const steps = [
+  {
+    name: '上传文档',
+    component: BaseForm
+  },
+  {
+    name: '设置分段规则',
+    component: ''
+  }
+]
+
 const next = () => {
   if (active.value++ > 2) active.value = 0
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.create-dataset {
+  flex-direction: column;
+  // height: 100%;
+  &__component {
+    flex: 1;
+    flex-basis: auto;
+    min-width: 70%;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+  &__footer {
+    flex: 0 0 auto;
+  }
+}
+</style>

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

@@ -0,0 +1,52 @@
+<template>
+  <h4 class="title-decoration-1 mb-10">基本信息</h4>
+  <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
+    <el-form-item label="数据集名称" prop="name">
+      <el-input
+        v-model.trim="form.name"
+        placeholder="请输入数据集名称"
+        maxlength="64"
+        show-word-limit
+      />
+    </el-form-item>
+    <el-form-item label="数据集描述" prop="describe">
+      <el-input
+        v-model.trim="form.describe"
+        type="textarea"
+        placeholder="描述数据集的内容，详尽的描述将帮助AI能深入理解该数据集的内容，能更准确的检索到内容，提高该数据集的命中率。"
+        maxlength="500"
+        show-word-limit
+        :autosize="{ minRows: 3 }"
+      />
+    </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: ''
+})
+
+const rules = reactive({
+  name: [{ required: true, message: '请输入数据集名称', trigger: 'blur' }],
+  describe: [{ required: true, message: '请输入数据集描述', trigger: 'blur' }]
+})
+const FormRef = ref()
+// 表单校验
+function validate() {
+  if (!FormRef.value) return
+  return FormRef.value.validate((valid) => {
+    return valid
+  })
+}
+
+onMounted(() => {})
+
+defineExpose({
+  validate
+})
+</script>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,60 @@
+<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-upload
+        class="w-full"
+        drag
+        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+        multiple
+      >
+        <div class="el-upload__text">
+          <p>
+            拖拽文件到此上传或
+            <em>
+              选择文件
+              <el-icon style="font-size: 25px"><upload-filled /></el-icon>
+            </em>
+          </p>
+          <div class="upload__decoration">
+            <p>1. 当前支持TXT、Markdown文本文件。</p>
+            <p>2. 每次最多上传50个文档，每个文档最大不能超过10MB。</p>
+            <p>3. 系统会对文档进行分段处理，若使用【高级分段】建议上传文档前规范文档的分段标识。</p>
+          </div>
+        </div>
+      </el-upload>
+    </el-form-item>
+  </el-form>
+  <p>文档列表</p>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+const form = reactive({
+  name: '',
+  describe: ''
+})
+
+const rules = reactive({})
+const FormRef = ref()
+
+// 表单校验
+function validate() {
+  if (!FormRef.value) return
+  return FormRef.value.validate((valid) => {
+    return valid
+  })
+}
+
+onMounted(() => {})
+
+defineExpose({
+  validate
+})
+</script>
+<style scoped lang="scss">
+.upload__decoration {
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--el-text-color-secondary);
+}
+</style>

ui/src/views/dataset/index.vue

@@ -55,8 +55,8 @@ import { ref, onMounted } from 'vue'
 import datasetApi from '@/api/dataset'
 import type { datasetListRequest } from '@/api/type/dataset'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
-import { useRouter } from 'vue-router';
-const router = useRouter();
+import { useRouter } from 'vue-router'
+const router = useRouter()
 
 const loading = ref(false)
 const filterText = ref('')
@@ -68,20 +68,23 @@ const pageConfig = ref<datasetListRequest>({
   search_text: ''
 })
 
-function loadDataset() { }
-
+function loadDataset() {}
 
 function deleteDateset(row: any) {
-  MsgConfirm({
-    title: `是否删除数据集：${row.name}？`,
-    decription: '此数据集关联2个应用，删除后无法恢复，请谨慎操作。',
-    confirmButtonText: '删除',
-  }, {
-    confirmButtonClass: 'danger',
-  })
+  MsgConfirm(
+    {
+      title: `是否删除数据集：${row.name}？`,
+      decription: '此数据集关联2个应用，删除后无法恢复，请谨慎操作。',
+      confirmButtonText: '删除'
+    },
+    {
+      confirmButtonClass: 'danger'
+    }
+  )
     .then(() => {
       loading.value = true
-      datasetApi.delDateset(row.id)
+      datasetApi
+        .delDateset(row.id)
         .then(() => {
           MsgSuccess('删除成功')
           getList()