From 76dd9d21925aa4d4a891360f0877203e071610c0 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 10 Nov 2023 19:05:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=86=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/dataset.ts                        |  26 ++++-
 ui/src/components/card-box/index.vue         |   6 +-
 ui/src/components/layout-container/index.vue |   2 +-
 ui/src/components/read-write/index.vue       |   6 +-
 ui/src/router/modules/dataset.ts             |   7 ++
 ui/src/stores/modules/dataset.ts             |   2 +-
 ui/src/utils/utils.ts                        |   2 +-
 ui/src/views/dataset/CreateDataset.vue       |  54 ++++++++--
 ui/src/views/dataset/DatasetDocument.vue     |  11 +-
 ui/src/views/dataset/DatasetSetting.vue      |   2 +-
 ui/src/views/dataset/DocumentDetail.vue      | 107 +++++++++++++++++++
 ui/src/views/dataset/component/BaseForm.vue  |   2 +-
 ui/src/views/dataset/step/StepFirst.vue      |   1 +
 13 files changed, 207 insertions(+), 21 deletions(-)
 create mode 100644 ui/src/views/dataset/DocumentDetail.vue

diff --git a/ui/src/api/dataset.ts b/ui/src/api/dataset.ts
index 667033c12..a3ebca6f1 100644
--- a/ui/src/api/dataset.ts
+++ b/ui/src/api/dataset.ts
@@ -162,6 +162,28 @@ const delDocument: (dataset_id: string, document_id: string) => Promise<Result<b
   return del(`${prefix}/${dataset_id}/document/${document_id}`)
 }
 
+/**
+ * 文档详情
+ * @param 参数 dataset_id
+ */
+const getDocumentDetail: (dataset_id: string, document_id: string) => Promise<Result<any>> = (
+  dataset_id,
+  document_id
+) => {
+  return get(`${prefix}/${dataset_id}/document/${document_id}`)
+}
+
+/**
+ * 段落列表
+ * @param 参数 dataset_id
+ */
+const getParagraph: (dataset_id: string, document_id: string) => Promise<Result<any>> = (
+  dataset_id,
+  document_id
+) => {
+  return get(`${prefix}/${dataset_id}/document/${document_id}/paragraph`)
+}
+
 export default {
   getDateset,
   getAllDateset,
@@ -173,5 +195,7 @@ export default {
   getDocument,
   postDocument,
   putDocument,
-  delDocument
+  delDocument,
+  getDocumentDetail,
+  getParagraph
 }
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index 7a53e97bc..98e027215 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -3,7 +3,7 @@
     <div class="card-header">
       <slot name="header">
         <div class="title flex align-center">
-          <AppAvatar class="mr-12" shape="square" :size="32">
+          <AppAvatar class="mr-12" shape="square" :size="32" v-if="showIcon">
             <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
           </AppAvatar>
           <h4>{{ title }}</h4>
@@ -33,6 +33,10 @@ const props = defineProps({
   description: {
     type: String,
     default: ''
+  },
+  showIcon: {
+    type: Boolean,
+    default: true
   }
 })
 
diff --git a/ui/src/components/layout-container/index.vue b/ui/src/components/layout-container/index.vue
index b548756b3..8ce1f322c 100644
--- a/ui/src/components/layout-container/index.vue
+++ b/ui/src/components/layout-container/index.vue
@@ -17,7 +17,7 @@ import { computed, useSlots } from 'vue'
 defineOptions({ name: 'LayoutContainer' })
 const slots = useSlots()
 const props = defineProps({
-  header: String,
+  header: String || null,
   backTo: String
 })
 const showBack = computed(() => {
diff --git a/ui/src/components/read-write/index.vue b/ui/src/components/read-write/index.vue
index d0c06433d..93719dcb4 100644
--- a/ui/src/components/read-write/index.vue
+++ b/ui/src/components/read-write/index.vue
@@ -3,7 +3,7 @@
     <slot name="read">
       <div class="flex align-center" v-if="!isEdit">
         <span>{{ data }}</span>
-        <el-button @click.prevent="editNameHandle" text v-if="showEditIcon">
+        <el-button @click.stop="editNameHandle" text v-if="showEditIcon">
           <el-icon><Edit /></el-icon>
         </el-button>
       </div>
@@ -12,12 +12,12 @@
       <div class="flex align-center" v-if="isEdit">
         <el-input ref="inputRef" v-model="writeValue" placeholder="请输入"></el-input>
         <span class="ml-4">
-          <el-button type="primary" text @click="submit" :disabled="loading">
+          <el-button type="primary" text @click.stop="submit" :disabled="loading">
             <el-icon><Select /></el-icon>
           </el-button>
         </span>
         <span>
-          <el-button text @click="isEdit = false" :disabled="loading">
+          <el-button text @click.stop="isEdit = false" :disabled="loading">
             <el-icon><CloseBold /></el-icon>
           </el-button>
         </span>
diff --git a/ui/src/router/modules/dataset.ts b/ui/src/router/modules/dataset.ts
index 0e8cdc5c6..b3aa75e31 100644
--- a/ui/src/router/modules/dataset.ts
+++ b/ui/src/router/modules/dataset.ts
@@ -49,6 +49,13 @@ const datasetRouter = {
           component: () => import('@/views/dataset/DatasetSetting.vue')
         }
       ]
+    },
+    {
+      path: '/dataset/:datasetId/:documentId', // 分段详情
+      name: 'DocumentDetail',
+      meta: { activeMenu: '/dataset' },
+      component: () => import('@/views/dataset/DocumentDetail.vue'),
+      hidden: true
     }
   ]
 }
diff --git a/ui/src/stores/modules/dataset.ts b/ui/src/stores/modules/dataset.ts
index 103d62331..84cc1574c 100644
--- a/ui/src/stores/modules/dataset.ts
+++ b/ui/src/stores/modules/dataset.ts
@@ -14,7 +14,7 @@ const useDatasetStore = defineStore({
     documentsFiles: []
   }),
   actions: {
-    saveBaseInfo(info: datasetData) {
+    saveBaseInfo(info: datasetData | null) {
       this.baseInfo = info
     },
     saveDocumentsFile(file: UploadUserFile[]) {
diff --git a/ui/src/utils/utils.ts b/ui/src/utils/utils.ts
index b6229faba..792158798 100644
--- a/ui/src/utils/utils.ts
+++ b/ui/src/utils/utils.ts
@@ -1,5 +1,5 @@
 export function toThousands(num: any) {
-  return num.toString().replace(/\d+/, function (n: any) {
+  return num?.toString().replace(/\d+/, function (n: any) {
     return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
   })
 }
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index f2d05264f..ef6ad1e43 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -4,22 +4,51 @@
       <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>
-            <div class="app-step">
+            <div class="app-step flex align-center">
               <div class="el-step__icon is-text">
-                <div class="el-step__icon-inner">{{ index + 1 }}</div>
+                <div class="el-step__icon-inner">
+                  <el-icon v-if="active == index + 1" style="margin-top: 1px"><Select /></el-icon>
+                  <span v-else> {{ index + 1 }}</span>
+                </div>
               </div>
-              {{ item.name }}
+              <span class="ml-4">{{ item.name }}</span>
             </div>
           </template>
         </el-step>
       </el-steps>
     </template>
     <div class="create-dataset__main flex" v-loading="loading">
-      <div class="create-dataset__component">
-        <component :is="steps[active].component" :ref="steps[active]?.ref" />
+      <div class="create-dataset__component main-calc-height">
+        <template v-if="steps[active]?.component">
+          <component :is="steps[active].component" :ref="steps[active]?.ref" />
+        </template>
+        <template v-else-if="active === 2">
+          <el-result icon="success" title="🎉 数据集创建成功 🎉">
+            <template #sub-title>
+              <div class="mt-8">
+                <span class="bold">{{ successInfo?.document_count || 0 }}</span>
+                <el-text type="info" class="ml-4">文档</el-text>
+                <el-divider direction="vertical" />
+                <span class="bold">{{ successInfo?.document_list.length || 0 }}</span>
+                <el-text type="info" class="ml-4">分段</el-text>
+                <el-divider direction="vertical" />
+                <span class="bold">{{ toThousands(successInfo?.char_length) || 0 }}</span>
+                <el-text type="info" class="ml-4">字符</el-text>
+              </div>
+            </template>
+            <template #extra>
+              <el-button @click="router.push({ path: `/dataset` })">返回数据集列表</el-button>
+              <el-button
+                type="primary"
+                @click="router.push({ path: `/dataset/${successInfo?.id}/document` })"
+                >前往文档</el-button
+              >
+            </template>
+          </el-result>
+        </template>
       </div>
     </div>
-    <div class="create-dataset__footer text-right border-t">
+    <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"
@@ -39,6 +68,7 @@ import StepSecond from './step/StepSecond.vue'
 import datasetApi from '@/api/dataset'
 import type { datasetData } from '@/api/type/dataset'
 import { MsgSuccess } from '@/utils/message'
+import { toThousands } from '@/utils/utils'
 import useStore from '@/stores'
 const { dataset } = useStore()
 const baseInfo = computed(() => dataset.baseInfo)
@@ -46,7 +76,6 @@ const baseInfo = computed(() => dataset.baseInfo)
 const router = useRouter()
 const route = useRoute()
 const {
-  params: { type },
   query: { id }
 } = route as any
 
@@ -68,6 +97,7 @@ const StepSecondRef = ref()
 
 const loading = ref(false)
 const active = ref(0)
+const successInfo = ref<any>(null)
 
 async function next() {
   if (await StepFirstRef.value.onSubmit()) {
@@ -78,6 +108,10 @@ const prev = () => {
   active.value = 0
 }
 
+function clearStore() {
+  dataset.saveBaseInfo(null)
+  dataset.saveDocumentsFile([])
+}
 function submit() {
   loading.value = true
   const documents = [] as any[]
@@ -93,6 +127,7 @@ function submit() {
       .postDocument(id, documents)
       .then((res) => {
         MsgSuccess('提交成功')
+        clearStore()
         router.push({ path: `/dataset/${id}/document` })
       })
       .catch(() => {
@@ -102,7 +137,9 @@ function submit() {
     datasetApi
       .postDateset(obj)
       .then((res) => {
-        MsgSuccess('提交成功')
+        successInfo.value = res.data
+        active.value = 2
+        clearStore()
         loading.value = false
       })
       .catch(() => {
@@ -128,7 +165,6 @@ function submit() {
 
   &__component {
     width: 100%;
-    height: var(--create-dataset-height);
     margin: 0 auto;
     overflow: hidden;
     box-sizing: border-box;
diff --git a/ui/src/views/dataset/DatasetDocument.vue b/ui/src/views/dataset/DatasetDocument.vue
index 155af0dbd..eef9f4f5c 100644
--- a/ui/src/views/dataset/DatasetDocument.vue
+++ b/ui/src/views/dataset/DatasetDocument.vue
@@ -26,6 +26,7 @@
           @cell-mouse-enter="cellMouseEnter"
           @cell-mouse-leave="cellMouseLeave"
           @creatQuick="creatQuickHandle"
+          @row-click="rowClickHandle"
           v-loading="loading"
         >
           <el-table-column prop="name" label="文件名称" min-width="280">
@@ -58,7 +59,9 @@
           </el-table-column>
           <el-table-column prop="name" label="启动状态">
             <template #default="{ row }">
-              <el-switch v-model="row.is_active" @change="changeState($event, row)" />
+              <div @click.stop>
+                <el-switch v-model="row.is_active" @change="changeState($event, row)" />
+              </div>
             </template>
           </el-table-column>
           <el-table-column prop="create_time" label="创建时间" width="170">
@@ -82,7 +85,7 @@
               </span>
               <span class="ml-4">
                 <el-tooltip effect="dark" content="删除" placement="top">
-                  <el-button type="primary" text @click="deleteDocument(row)">
+                  <el-button type="primary" text @click.stop="deleteDocument(row)">
                     <el-icon><Delete /></el-icon>
                   </el-button>
                 </el-tooltip>
@@ -118,6 +121,10 @@ const paginationConfig = reactive({
   total: 0
 })
 
+function rowClickHandle(row: any) {
+  router.push({ path: `/dataset/${datasetId}/${row.id}` })
+}
+
 // 快速创建空白文档
 function creatQuickHandle(val: string) {
   loading.value = true
diff --git a/ui/src/views/dataset/DatasetSetting.vue b/ui/src/views/dataset/DatasetSetting.vue
index ad54c97ef..d49d52c0a 100644
--- a/ui/src/views/dataset/DatasetSetting.vue
+++ b/ui/src/views/dataset/DatasetSetting.vue
@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer header="设置">
-    <div class="main-calc-height dataset-setting">
+    <div class="dataset-setting">
       <div class="p-24" v-loading="loading">
         <BaseForm ref="BaseFormRef" :data="detail" />
         <div class="text-right">
diff --git a/ui/src/views/dataset/DocumentDetail.vue b/ui/src/views/dataset/DocumentDetail.vue
new file mode 100644
index 000000000..01abfbd92
--- /dev/null
+++ b/ui/src/views/dataset/DocumentDetail.vue
@@ -0,0 +1,107 @@
+<template>
+  <LayoutContainer :header="documentDetail?.name" back-to="-1" class="dataset-detail">
+    <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>
+            <div class="app-step flex align-center">
+              <div class="el-step__icon is-text">
+                <div class="el-step__icon-inner">
+                  <el-icon v-if="active == index + 1" style="margin-top: 1px"><Select /></el-icon>
+                  <span v-else> {{ index + 1 }}</span>
+                </div>
+              </div>
+              <span class="ml-4">{{ item.name }}</span>
+            </div>
+          </template>
+        </el-step>
+      </el-steps> -->
+    </template>
+    <div class="dataset-detail__main main-calc-height p-24">
+      <el-row :gutter="15">
+        <el-col
+          :xs="24"
+          :sm="12"
+          :md="8"
+          :lg="6"
+          :xl="4"
+          v-for="(item, index) in paragraphDetail"
+          :key="index"
+          class="mt-8"
+        >
+          <CardBox
+            shadow="hover"
+            :title="item.title"
+            :description="item.content"
+            class="cursor"
+            :showIcon="false"
+          >
+            <!-- <template #footer>
+              <div class="footer-content">
+                <span class="bold">{{ item?.document_count || 0 }}</span>
+                文档<el-divider direction="vertical" />
+                <span class="bold">{{ numberFormat(item?.char_length) || 0 }}</span>
+                字符<el-divider direction="vertical" />
+                <span class="bold">{{ item?.char_length || 0 }}</span>
+                关联应用
+              </div>
+            </template> -->
+          </CardBox>
+        </el-col>
+      </el-row>
+    </div>
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import datasetApi from '@/api/dataset'
+
+const router = useRouter()
+const route = useRoute()
+const {
+  params: { datasetId, documentId }
+} = route as any
+
+const loading = ref(false)
+const documentDetail = ref<any>({})
+const paragraphDetail = ref<any[]>([])
+
+function getDetail() {
+  loading.value = true
+  datasetApi
+    .getDocumentDetail(datasetId, documentId)
+    .then((res) => {
+      documentDetail.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getParagraphDetail() {
+  loading.value = true
+  datasetApi
+    .getParagraph(datasetId, documentId)
+    .then((res) => {
+      paragraphDetail.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+onMounted(() => {
+  getDetail()
+  getParagraphDetail()
+})
+</script>
+<style lang="scss" scoped>
+.dataset-detail {
+  &__main{
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index c673abed8..3825aeb3b 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -49,7 +49,7 @@ const FormRef = ref()
 watch(
   () => props.data,
   (value) => {
-    if (JSON.stringify(value) !== '{}') {
+    if (value && JSON.stringify(value) !== '{}') {
       form.value.name = value.name
       form.value.desc = value.desc
     }
diff --git a/ui/src/views/dataset/step/StepFirst.vue b/ui/src/views/dataset/step/StepFirst.vue
index 514ce7610..8ad011f1f 100644
--- a/ui/src/views/dataset/step/StepFirst.vue
+++ b/ui/src/views/dataset/step/StepFirst.vue
@@ -57,5 +57,6 @@ defineExpose({
 .upload-document {
   width: 70%;
   margin: 0 auto;
+  margin-bottom: 20px;
 }
 </style>