From c2fe67664fa33ae500de6e16cf58cf632a2790d5 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 1 Dec 2023 15:59:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=94=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ai-dialog/OperationButton.vue  |  4 +-
 ui/src/components/ai-dialog/index.vue         |  8 +--
 ui/src/components/app-avatar/index.vue        | 54 +++++++++----------
 ui/src/components/card-box/index.vue          |  9 ++--
 .../components/sidebar/AppBreadcrumb.vue      | 13 ++++-
 ui/src/views/application/AppOverview.vue      | 15 ++++--
 .../application/components/EmbedDialog.vue    | 45 ++++++++--------
 ui/src/views/application/index.vue            | 10 ++++
 ui/src/views/chat/index.vue                   |  5 +-
 9 files changed, 88 insertions(+), 75 deletions(-)

diff --git a/ui/src/components/ai-dialog/OperationButton.vue b/ui/src/components/ai-dialog/OperationButton.vue
index e747b01c9..0690529d7 100644
--- a/ui/src/components/ai-dialog/OperationButton.vue
+++ b/ui/src/components/ai-dialog/OperationButton.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     <el-tooltip effect="dark" content="重新生成" placement="top">
-      <el-button text @click.stop @click="getAccessToken(item.id)">
+      <el-button text @click.stop>
         <AppIcon iconName="VideoPlay"></AppIcon>
       </el-button>
     </el-tooltip>
     <el-divider direction="vertical" />
     <el-tooltip effect="dark" content="复制" placement="top">
-      <el-button text @click="copyClick(item.answer_text)">
+      <el-button text @click="copyClick(item?.answer_text)">
         <AppIcon iconName="app-copy"></AppIcon>
       </el-button>
     </el-tooltip>
diff --git a/ui/src/components/ai-dialog/index.vue b/ui/src/components/ai-dialog/index.vue
index d88e1424c..dd186c63e 100644
--- a/ui/src/components/ai-dialog/index.vue
+++ b/ui/src/components/ai-dialog/index.vue
@@ -109,16 +109,10 @@
 </template>
 <script setup lang="ts">
 import { ref, nextTick, onUpdated, computed } from 'vue'
-import { useRoute } from 'vue-router'
 import OperationButton from './OperationButton.vue'
 import applicationApi from '@/api/application'
 import { ChatManagement, type chatType } from '@/api/type/application'
 import { randomId } from '@/utils/utils'
-
-const route = useRoute()
-const {
-  params: { accessToken }
-} = route as any
 const props = defineProps({
   data: {
     type: Object,
@@ -210,6 +204,7 @@ function chatMessage() {
     applicationApi.postChatMessage(chartOpenId.value, problem_text).then(async (response) => {
       inputValue.value = ''
       const row = chatList.value.find((item) => item.id === id)
+
       if (row) {
         ChatManagement.addChatRecord(row, 50, loading)
         ChatManagement.write(id)
@@ -226,6 +221,7 @@ function chatMessage() {
             const str = decoder.decode(value, { stream: true })
             if (str && str.startsWith('data:')) {
               const content = JSON?.parse(str.replace('data:', ''))?.content
+
               if (content) {
                 ChatManagement.append(id, content)
               }
diff --git a/ui/src/components/app-avatar/index.vue b/ui/src/components/app-avatar/index.vue
index ef88bb98b..22f72c29c 100644
--- a/ui/src/components/app-avatar/index.vue
+++ b/ui/src/components/app-avatar/index.vue
@@ -8,7 +8,7 @@
   </el-avatar>
 </template>
 <script setup lang="ts">
-import { pinyin } from 'pinyin-pro';
+import { pinyin } from 'pinyin-pro'
 import { computed } from 'vue'
 defineOptions({ name: 'AppAvatar' })
 const props = defineProps({
@@ -26,37 +26,31 @@ const firstUserName = computed(() => {
   return props.name?.substring(0, 1)
 })
 
-function getAvatarColour(name: string) {
-  const charIndex = pinyin.getFullChars(name).charAt(0).toUpperCase().charCodeAt(0) - 65
+const getAvatarColour = (name: string) => {
   const colours = [
-    '#ACA9E5',
-    '#BCC934',
-    '#B3CFE8',
-    '#DCDEB5',
-    '#D65A4A',
-    '#E0C78B',
-    '#E59191',
-    '#E99334',
-    '#FF6632',
-    '#F4B7EF',
-    '#F7D407',
-    '#F8BB98',
-    '#2BCBB1',
-    '#3594F1',
-    '#486660',
-    '#4B689F',
-    '#5976F6',
-    '#72B1B2',
-    '#778293',
-    '#7D6624',
-    '#82CBB5',
-    '#837F6A',
-    '#87B087',
-    '#9AC0C4',
-    '#958E55',
-    '#99E4F2'
+    '#3370FF',
+    '#4954E6',
+    '#F54A45',
+    '#00B69D',
+    '#2CA91F',
+    '#98B600',
+    '#F80F80',
+    '#D136D1',
+    '#F01D94',
+    '#7F3BF5',
+    '#8F959E'
   ]
-  return colours[charIndex]
+  let charIndex = name ? pinyin(name).charAt(0).toUpperCase().charCodeAt(0) - 65 : 0
+
+  function getColor() {
+    if (!colours[charIndex]) {
+      charIndex -= 10
+      getColor()
+    }
+    return colours[charIndex]
+  }
+
+  return getColor()
 }
 </script>
 <style lang="scss" scoped></style>
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index 4a6288e1a..a8bee22f4 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -3,10 +3,11 @@
     <div class="card-header">
       <slot name="header">
         <div class="title flex align-center">
-          <AppAvatar v-if="!slots.icon && showIcon" class="mr-12" shape="square" :size="32">
-            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
-          </AppAvatar>
-          <slot v-else name="icon"> </slot>
+          <slot name="icon">
+            <AppAvatar v-if="showIcon" class="mr-12" shape="square" :size="32">
+              <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+            </AppAvatar>
+          </slot>
           <h4 class="ellipsis-1" style="width: 100%">{{ title }}</h4>
         </div>
       </slot>
diff --git a/ui/src/layout/components/sidebar/AppBreadcrumb.vue b/ui/src/layout/components/sidebar/AppBreadcrumb.vue
index e6f965041..183d0ef05 100644
--- a/ui/src/layout/components/sidebar/AppBreadcrumb.vue
+++ b/ui/src/layout/components/sidebar/AppBreadcrumb.vue
@@ -11,10 +11,19 @@
           <template v-for="(item, index) in list" :key="index">
             <div :class="item.id === id ? 'dropdown-active' : ''">
               <el-dropdown-item :command="item.id">
-                <div class="flex">
-                  <AppAvatar class="mr-12" shape="square" :size="24">
+                <div class="flex align-center">
+                  <AppAvatar
+                    v-if="isApplication"
+                    :name="item.name"
+                    pinyinColor
+                    class="mr-12"
+                    shape="square"
+                    :size="24"
+                  />
+                  <AppAvatar v-else-if="isDataset" class="mr-12" shape="square" :size="24">
                     <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
                   </AppAvatar>
+
                   <span class="ellipsis-1"> {{ item?.name }}</span>
                 </div>
               </el-dropdown-item>
diff --git a/ui/src/views/application/AppOverview.vue b/ui/src/views/application/AppOverview.vue
index 8a3b850a4..9cdd48a05 100644
--- a/ui/src/views/application/AppOverview.vue
+++ b/ui/src/views/application/AppOverview.vue
@@ -4,9 +4,14 @@
       <h4 class="title-decoration-1 mb-16">应用信息</h4>
       <el-card shadow="never" class="overview-card">
         <div class="title flex align-center">
-          <AppAvatar class="mr-12" shape="square" :size="32">
-            <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
-          </AppAvatar>
+          <AppAvatar
+            v-if="detail?.name"
+            :name="detail?.name"
+            pinyinColor
+            class="mr-12"
+            shape="square"
+            :size="32"
+          />
           <h4 class="ellipsis-1">{{ detail?.name }}</h4>
           <div class="ml-8" v-if="detail">
             <el-tag v-if="detail?.status" class="success-tag">运行中</el-tag>
@@ -61,7 +66,7 @@
         </div>
       </el-card>
     </div>
-    <EmbedDialog ref="EmbedDialogRef" :accessToken="accessToken" />
+    <EmbedDialog ref="EmbedDialogRef"/>
   </LayoutContainer>
 </template>
 <script setup lang="ts">
@@ -87,7 +92,7 @@ const {
 const loading = ref(false)
 
 function openDialog() {
-  EmbedDialogRef.value.open()
+  EmbedDialogRef.value.open(accessToken.value)
 }
 function getAccessToken() {
   application.asyncGetAccessToken(id, loading).then((res) => {
diff --git a/ui/src/views/application/components/EmbedDialog.vue b/ui/src/views/application/components/EmbedDialog.vue
index d183d9c28..ccdf14c67 100644
--- a/ui/src/views/application/components/EmbedDialog.vue
+++ b/ui/src/views/application/components/EmbedDialog.vue
@@ -8,7 +8,7 @@
             <div class="flex-between">
               <span class="bold">复制以下代码进行嵌入</span>
               <el-button text @click="copyClick(source1)">
-                <AppIcon iconName="app-copy" ></AppIcon>
+                <AppIcon iconName="app-copy"></AppIcon>
               </el-button>
             </div>
             <div class="mt-8">
@@ -40,46 +40,43 @@
 import { ref, watch } from 'vue'
 import { copyClick } from '@/utils/clipboard'
 import useStore from '@/stores'
+
 const { application } = useStore()
-const props = defineProps({
-  accessToken: String
-})
 
 const emit = defineEmits(['addData'])
 
-const loading = ref(false)
 const dialogVisible = ref<boolean>(false)
 
-const source1 = ref(`<iframe 
-src="${application.location + props.accessToken}"
+const source1 = ref('')
+
+const source2 = ref('')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    source1.value = ''
+    source2.value = ''
+  }
+})
+
+const open = (val: string) => {
+  source1.value = `<iframe 
+src="${application.location + val}"
 style="width: 100%; height: 100%;" 
 frameborder="0" 
 allow="microphone">
 </iframe>
-`)
-
-const source2 = ref(`<script> window.difyChatbotConfig = { 
-  token: "${props.accessToken}"
+`
+  source2.value = `<script> window.difyChatbotConfig = { 
+  token: "${val}"
  }
  <\/script>
 <script src="https://udify.app/embed.min.js"
- id="${props.accessToken}"
+ id="${val}"
  defer>
 <\/script>
-`)
-
-watch(dialogVisible, (bool) => {
-  if (!bool) {
-    loading.value = false
-  }
-})
-
-const open = (checked: any) => {
+`
   dialogVisible.value = true
 }
-const submitHandle = () => {
-  dialogVisible.value = false
-}
 
 defineExpose({ open })
 </script>
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index 7a4aac5d2..de01d22b7 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -36,6 +36,16 @@
             class="application-card cursor"
             @click="router.push({ path: `/application/${item.id}/overview` })"
           >
+            <template #icon>
+              <AppAvatar
+                v-if="item.name"
+                :name="item.name"
+                pinyinColor
+                class="mr-12"
+                shape="square"
+                :size="32"
+              />
+            </template>
             <div class="status-tag">
               <el-tag v-if="item.status" class="success-tag">运行中</el-tag>
               <el-tag v-else class="warning-tag">已停用</el-tag>
diff --git a/ui/src/views/chat/index.vue b/ui/src/views/chat/index.vue
index eccc243b5..08db9a97c 100644
--- a/ui/src/views/chat/index.vue
+++ b/ui/src/views/chat/index.vue
@@ -27,7 +27,9 @@ const loading = ref(false)
 const applicationDetail = ref<any>({})
 
 function getAccessToken(token: string) {
-  application.asyncAppAuthentication(token, loading).then((res) => {})
+  application.asyncAppAuthentication(token, loading).then((res) => {
+    getProfile()
+  })
 }
 function getProfile() {
   applicationApi.getProfile(loading).then((res) => {
@@ -37,7 +39,6 @@ function getProfile() {
 onMounted(() => {
   user.changeUserType(2)
   getAccessToken(accessToken)
-  getProfile()
 })
 </script>
 <style lang="scss" scoped>