From 5bbb65e4c45183cd7e0757550d32d992de7daffa Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 18 Jul 2024 15:18:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=B3=E8=81=94=E7=9F=A5=E8=AF=86?=
 =?UTF-8?q?=E5=BA=93=E5=A2=9E=E5=8A=A0=E6=A0=A1=E9=AA=8C=E5=90=91=E9=87=8F?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/card-checkbox/index.vue     |  9 ++-
 .../component/AddDatasetDialog.vue            | 79 +++++++++++++++----
 ui/src/views/log/component/EditMarkDialog.vue | 11 ++-
 3 files changed, 79 insertions(+), 20 deletions(-)

diff --git a/ui/src/components/card-checkbox/index.vue b/ui/src/components/card-checkbox/index.vue
index fad15107c..fb5e2f296 100644
--- a/ui/src/components/card-checkbox/index.vue
+++ b/ui/src/components/card-checkbox/index.vue
@@ -18,7 +18,8 @@
         </slot>
         <slot></slot>
       </div>
-      <el-checkbox v-bind:modelValue="modelValue.includes(toModelValue)"> </el-checkbox>
+      <el-checkbox v-bind:modelValue="modelValue.includes(toModelValue)" @change="checkboxChange">
+      </el-checkbox>
     </div>
   </el-card>
 </template>
@@ -40,7 +41,7 @@ const toModelValue = computed(() => (props.valueField ? props.data[props.valueFi
 //   set: (val) => val
 // })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'change'])
 
 const checked = () => {
   const value = props.modelValue ? props.modelValue : []
@@ -53,6 +54,10 @@ const checked = () => {
     emit('update:modelValue', [...value, toModelValue.value])
   }
 }
+
+function checkboxChange() {
+  emit('change')
+}
 </script>
 <style lang="scss" scoped>
 .card-checkbox {
diff --git a/ui/src/views/application/component/AddDatasetDialog.vue b/ui/src/views/application/component/AddDatasetDialog.vue
index ede10143c..e66e73b79 100644
--- a/ui/src/views/application/component/AddDatasetDialog.vue
+++ b/ui/src/views/application/component/AddDatasetDialog.vue
@@ -4,21 +4,28 @@
     v-model="dialogVisible"
     width="600"
     append-to-body
+    class="addDataset-dialog"
   >
     <template #header="{ titleId, titleClass }">
-      <div class="my-header flex">
+      <div class="flex-between mb-8">
         <h4 :id="titleId" :class="titleClass">
           {{ $t('views.application.applicationForm.dialogues.addDataset') }}
         </h4>
-        <el-button link class="ml-16" @click="refresh">
-          <el-icon class="mr-4"><Refresh /></el-icon
-          >{{ $t('views.application.applicationForm.dialogues.refresh') }}
-        </el-button>
+        <div class="flex align-center">
+          <el-button link class="ml-16" @click="refresh">
+            <el-icon class="mr-4"><Refresh /></el-icon
+            >{{ $t('views.application.applicationForm.dialogues.refresh') }}
+          </el-button>
+          <el-divider direction="vertical" />
+        </div>
       </div>
+      <el-text type="info" class="color-secondary">
+        所选知识库必须使用相同的 Embedding 模型
+      </el-text>
     </template>
     <el-row :gutter="12" v-loading="loading">
-      <el-col :span="12" v-for="(item, index) in data" :key="index" class="mb-16">
-        <CardCheckbox value-field="id" :data="item" v-model="checkList">
+      <el-col :span="12" v-for="(item, index) in filterData" :key="index" class="mb-16">
+        <CardCheckbox value-field="id" :data="item" v-model="checkList" @change="changeHandle">
           <span class="ellipsis">
             {{ item.name }}
           </span>
@@ -26,19 +33,29 @@
       </el-col>
     </el-row>
     <template #footer>
-      <span class="dialog-footer">
-        <el-button @click.prevent="dialogVisible = false">
-          {{ $t('views.application.applicationForm.buttons.cancel') }}
-        </el-button>
-        <el-button type="primary" @click="submitHandle">
-          {{ $t('views.application.applicationForm.buttons.confirm') }}
-        </el-button>
-      </span>
+      <div class="flex-between">
+        <div>
+          <el-text type="info" class="color-secondary" v-if="checkList.length > 0">
+            已选 {{ checkList.length }} 个知识库
+          </el-text>
+          <el-button link type="primary" v-if="checkList.length > 0" @click="clearCheck">
+            清空
+          </el-button>
+        </div>
+        <span>
+          <el-button @click.prevent="dialogVisible = false">
+            {{ $t('views.application.applicationForm.buttons.cancel') }}
+          </el-button>
+          <el-button type="primary" @click="submitHandle">
+            {{ $t('views.application.applicationForm.buttons.confirm') }}
+          </el-button>
+        </span>
+      </div>
     </template>
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 const props = defineProps({
   data: {
     type: Array<any>,
@@ -51,6 +68,13 @@ const emit = defineEmits(['addData', 'refresh'])
 
 const dialogVisible = ref<boolean>(false)
 const checkList = ref([])
+const currentEmbedding = ref('')
+
+const filterData = computed(() => {
+  return currentEmbedding.value
+    ? props.data.filter((v) => v.embedding_mode_id === currentEmbedding.value)
+    : props.data
+})
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
@@ -58,6 +82,18 @@ watch(dialogVisible, (bool) => {
   }
 })
 
+function changeHandle() {
+  if (checkList.value.length === 1) {
+    currentEmbedding.value = props.data.filter(
+      (v) => v.id === checkList.value[0]
+    )[0].embedding_mode_id
+  }
+}
+function clearCheck() {
+  checkList.value = []
+  currentEmbedding.value = ''
+}
+
 const open = (checked: any) => {
   checkList.value = checked
   dialogVisible.value = true
@@ -73,4 +109,13 @@ const refresh = () => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scope>
+.addDataset-dialog {
+  .el-dialog__header.show-close {
+    padding-right: 15px;
+  }
+  .el-dialog__headerbtn {
+    top: 13px;
+  }
+}
+</style>
diff --git a/ui/src/views/log/component/EditMarkDialog.vue b/ui/src/views/log/component/EditMarkDialog.vue
index cae7155c5..29adb9282 100644
--- a/ui/src/views/log/component/EditMarkDialog.vue
+++ b/ui/src/views/log/component/EditMarkDialog.vue
@@ -141,4 +141,13 @@ const submit = async (formEl: FormInstance) => {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope></style>
+<style lang="scss" scope>
+.edit-mark-dialog {
+  .el-dialog__header.show-close {
+    padding-right: 15px;
+  }
+  .el-dialog__headerbtn {
+    top: 13px;
+  }
+}
+</style>