From 9daa8beb115b2c319dab005e1c39626dc0995256 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 24 Jan 2024 15:42:12 +0800
Subject: [PATCH] feat:

---
 .../ai-chat/ParagraphSourceDialog.vue         | 10 +--
 ui/src/components/card-box/index.vue          | 18 +++--
 ui/src/components/tags-input/index.vue        | 75 ++++++++++++-------
 ui/src/styles/element-plus.scss               | 17 +++++
 ui/src/views/log/component/EditMarkDialog.vue |  2 +-
 ui/src/views/paragraph/index.vue              |  4 +-
 .../setting/component/CreateMemberDialog.vue  | 58 +++++++-------
 7 files changed, 118 insertions(+), 66 deletions(-)

diff --git a/ui/src/components/ai-chat/ParagraphSourceDialog.vue b/ui/src/components/ai-chat/ParagraphSourceDialog.vue
index f1c784796..20c5dd42f 100644
--- a/ui/src/components/ai-chat/ParagraphSourceDialog.vue
+++ b/ui/src/components/ai-chat/ParagraphSourceDialog.vue
@@ -20,7 +20,6 @@
               <CardBox
                 shadow="none"
                 :title="item.title || '-'"
-                :description="item.content"
                 class="paragraph-source-card cursor mb-8"
                 :class="item.is_active ? '' : 'disabled'"
                 :showIcon="false"
@@ -29,6 +28,11 @@
                   <AppAvatar :name="index + 1 + ''" class="mr-12 avatar-light" :size="22" />
                 </template>
                 <div class="active-button primary">{{ item.similarity?.toFixed(3) }}</div>
+                <template #description>
+                  <el-scrollbar height="90">
+                    {{ item.content }}
+                  </el-scrollbar>
+                </template>
                 <template #footer>
                   <div class="footer-content flex-between">
                     <el-text>
@@ -88,10 +92,6 @@ defineExpose({ open })
 .paragraph-source-card {
   height: 210px;
   width: 100%;
-  :deep(.description) {
-    -webkit-line-clamp: 5 !important;
-    height: 110px !important;
-  }
   .active-button {
     position: absolute;
     right: 16px;
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index 00750e960..84721522c 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -12,9 +12,11 @@
         </div>
       </slot>
     </div>
-    <div class="description mt-12" v-if="$slots.description || description">
+    <div class="description break-all mt-12" v-if="$slots.description || description">
       <slot name="description">
-        {{ description }}
+        <div class="content">
+          {{ description }}
+        </div>
       </slot>
     </div>
     <slot />
@@ -63,14 +65,16 @@ function cardLeave() {
   min-width: var(--card-min-width);
   border-radius: 8px;
   .description {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    height: var(--app-card-box-description-height, 40px);
     color: var(--app-text-color-secondary);
     line-height: 22px;
     font-weight: 400;
+    .content {
+      display: -webkit-box;
+      height: var(--app-card-box-description-height, 40px);
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
   }
   .card-footer {
     position: absolute;
diff --git a/ui/src/components/tags-input/index.vue b/ui/src/components/tags-input/index.vue
index 94796f8e7..1c0d99e21 100644
--- a/ui/src/components/tags-input/index.vue
+++ b/ui/src/components/tags-input/index.vue
@@ -6,13 +6,28 @@
       <el-tag
         v-for="(item, index) in tagsList"
         :key="index"
-        @close="removeTag(item)"
+        @close="removeTag(index)"
         closable
         class="mr-8"
-        >{{ item }}
+        type="info"
+        >{{ item.username }}
       </el-tag>
     </div>
     <!-- 输入框 -->
+    <el-autocomplete
+      :placeholder="tagsList.length == 0 ? placeholder : ''"
+      :validate-event="false"
+      v-model="currentval"
+      :fetch-suggestions="querySearchAsync"
+      @select="handleSelect"
+      :popper-class="noData ? 'platform-auto-complete' : ''"
+    >
+      <template #default="{ item }">
+        <!-- 解决匹配不到提示无匹配数据 -->
+        <div class="default" v-if="noData">{{ item.default }}</div>
+        <div class="value" v-else>{{ item.username }}</div>
+      </template>
+    </el-autocomplete>
     <!-- <el-input
       :validate-event="false"
       v-model="currentval"
@@ -23,18 +38,14 @@
 </template>
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import UserApi from '@/api/user'
 defineOptions({ name: 'TagsInput' })
 const props = defineProps({
   tags: {
     /* 多个 */
-    type: Array<String>,
+    type: Array<any>,
     default: () => []
   },
-  tag: {
-    /* 单个 */
-    type: String,
-    default: ''
-  },
   placeholder: {
     type: String,
     default: '请输入'
@@ -43,33 +54,44 @@ const props = defineProps({
     /* 最多生成标签数 */
     type: Number,
     default: -1
-  },
-  reg: {
-    type: String,
-    default: ''
   }
 })
-const emit = defineEmits(['update:tags', 'update:tag'])
+const emit = defineEmits(['update:tags'])
 const currentval = ref('')
-const tagsList = ref<String[]>([])
+const tagsList = ref<any[]>([])
+const noData = ref(false) // 是否匹配到数据了
 
 watch([tagsList, currentval], (val) => {
-  if (val[0]?.length > 0) {
-    emit('update:tags', val[0])
-  } else if (val[1]) {
-    emit('update:tag', val[1])
-  }
+  emit('update:tags', val[0])
 })
 
-function addTags() {
-  const val = currentval.value.trim()
-  if (val) {
-    tagsList.value.push(val)
+const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
+  if (queryString) {
+    let matchResults
+    UserApi.getUserList(queryString).then((res) => {
+      if (res.data.length === 0) {
+        noData.value = true
+        matchResults = [{ default: '无匹配数据' }]
+      } else {
+        noData.value = false
+        matchResults = res.data
+      }
+      cb(matchResults)
+    })
+  } else {
+    cb([])
+  }
+}
+
+const handleSelect = (item: any) => {
+  if (!tagsList.value.some((obj: any) => obj.id === item.id)) {
+    tagsList.value.push(item)
   }
   currentval.value = ''
 }
-function removeTag(tag: String) {
-  tagsList.value.splice(tagsList.value.indexOf(tag), 1)
+
+function removeTag(index: number) {
+  tagsList.value.splice(index, 1)
 }
 </script>
 <style lang="scss" scoped>
@@ -78,6 +100,9 @@ function removeTag(tag: String) {
   min-height: 70px;
   border: 1px solid var(--el-border-color);
   border-radius: var(--el-border-radius-base);
+  :deep(.el-autocomplete) {
+    width: 100%;
+  }
   :deep(.el-input__wrapper) {
     background: none !important;
     box-shadow: none !important;
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 999f202c4..f36045ef8 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -216,3 +216,20 @@
   right: 10px;
   left: auto;
 }
+
+// 自动补全增加暂无数据
+.platform-auto-complete {
+  .el-autocomplete-suggestion__wrap {
+    padding: 5px 0;
+    ul li {
+      pointer-events: none; // 阻止可点击事件
+      .default {
+        text-align: center;
+        color: #999;
+      }
+      &:hover {
+        background-color: #fff;
+      }
+    }
+  }
+}
diff --git a/ui/src/views/log/component/EditMarkDialog.vue b/ui/src/views/log/component/EditMarkDialog.vue
index 70629ec97..e9477fec5 100644
--- a/ui/src/views/log/component/EditMarkDialog.vue
+++ b/ui/src/views/log/component/EditMarkDialog.vue
@@ -97,7 +97,7 @@ function deleteParagraph() {
 }
 
 function getMark(data: any) {
-  logApi.getMarkRecord(id as string, data.chat, data.id, loading).then((res: any) => {
+  logApi.getMarkRecord(id as string, data.chat_id, data.id, loading).then((res: any) => {
     if (res.data.length > 0) {
       form.value = res.data[0]
     }
diff --git a/ui/src/views/paragraph/index.vue b/ui/src/views/paragraph/index.vue
index 48640d036..b52924f5e 100644
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -232,9 +232,9 @@ onMounted(() => {
         color: var(--app-border-color-dark);
       }
     }
-    :deep(.description) {
+    :deep(.content) {
       -webkit-line-clamp: 5 !important;
-      height: 110px;
+      height: 110px !important;
     }
     .active-button {
       position: absolute;
diff --git a/ui/src/views/setting/component/CreateMemberDialog.vue b/ui/src/views/setting/component/CreateMemberDialog.vue
index 5c23748ba..61c926ef0 100644
--- a/ui/src/views/setting/component/CreateMemberDialog.vue
+++ b/ui/src/views/setting/component/CreateMemberDialog.vue
@@ -20,7 +20,8 @@
       @submit.prevent
     >
       <el-form-item label="用户名/邮箱" prop="users">
-        <el-select
+        <tags-input v-model:tags="memberForm.users" placeholder="请输入成员的用户名或邮箱" />
+        <!-- <el-select
           ref="SelectRemoteRef"
           class="custom-select-multiple"
           v-model="memberForm.users"
@@ -40,13 +41,15 @@
             :label="item?.username"
             :value="item?.id"
           />
-        </el-select>
+        </el-select> -->
       </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
-        <el-button type="primary" @click="submitMember(addMemberFormRef)"> 添加 </el-button>
+        <el-button type="primary" @click="submitMember(addMemberFormRef)" :loading="loading">
+          添加
+        </el-button>
       </span>
     </template>
   </el-dialog>
@@ -56,7 +59,7 @@ import { ref, watch, onMounted } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import { MsgSuccess } from '@/utils/message'
 import TeamApi from '@/api/team'
-import UserApi from '@/api/user'
+// import UserApi from '@/api/user'
 
 const emit = defineEmits(['refresh'])
 
@@ -66,11 +69,11 @@ const memberForm = ref({
   users: []
 })
 
-const SelectRemoteRef = ref()
+// const SelectRemoteRef = ref()
 const addMemberFormRef = ref<FormInstance>()
 
 const loading = ref<boolean>(false)
-const userOptions = ref<Array<any>>([])
+// const userOptions = ref<Array<any>>([])
 
 const rules = ref<FormRules>({
   users: [
@@ -88,23 +91,24 @@ watch(dialogVisible, (bool) => {
     memberForm.value = {
       users: []
     }
+    loading.value = false
   }
 })
 
-const remoteMethod = (query: string) => {
-  if (query) {
-    setTimeout(() => {
-      getUser(query)
-    }, 200)
-  } else {
-    userOptions.value = []
-  }
-}
+// const remoteMethod = (query: string) => {
+//   if (query) {
+//     setTimeout(() => {
+//       getUser(query)
+//     }, 200)
+//   } else {
+//     userOptions.value = []
+//   }
+// }
 
-const changeSelectHandle = () => {
-  SelectRemoteRef.value.query = ''
-  SelectRemoteRef.value.blur()
-}
+// const changeSelectHandle = () => {
+//   SelectRemoteRef.value.query = ''
+//   SelectRemoteRef.value.blur()
+// }
 
 const open = () => {
   dialogVisible.value = true
@@ -114,10 +118,12 @@ const submitMember = async (formEl: FormInstance | undefined) => {
   await formEl.validate((valid, fields) => {
     if (valid) {
       loading.value = true
-      TeamApi.postCreatTeamMember(memberForm.value.users).then((res) => {
+      let idsArray = memberForm.value.users.map((obj: any) => obj.id)
+      TeamApi.postCreatTeamMember(idsArray).then((res) => {
         MsgSuccess('提交成功')
-        emit('refresh', memberForm.value.users)
+        emit('refresh', idsArray)
         dialogVisible.value = false
+        loading.value = false
       })
     } else {
       console.log('error submit!')
@@ -125,11 +131,11 @@ const submitMember = async (formEl: FormInstance | undefined) => {
   })
 }
 
-const getUser = (val: string) => {
-  UserApi.getUserList(val, loading).then((res) => {
-    userOptions.value = res.data
-  })
-}
+// const getUser = (val: string) => {
+//   UserApi.getUserList(val, loading).then((res) => {
+//     userOptions.value.push(res.data)
+//   })
+// }
 
 onMounted(() => {})