fix: 修复自定义小助手颜色问题

Author: wangdan-fit2cloud

ui/src/utils/theme.ts

@@ -46,3 +46,13 @@ export const defaultPlatformSetting = {
   showProject: true,
   projectUrl: 'https://github.com/1Panel-dev/MaxKB'
 }
+
+export function hexToRgba(hex: string, alpha: number) {
+  // 将16进制颜色值的两个字符一起转换成十进制
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+
+  // 返回RGBA格式的字符串
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}

ui/src/views/chat/embed/index.vue

@@ -2,7 +2,10 @@
   <div
     class="chat-embed layout-bg"
     v-loading="loading"
-    :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
+    :style="{
+      '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
+      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1)
+    }"
   >
     <div class="chat-embed__header" :style="customStyle">
       <div class="chat-width flex align-center">
@@ -73,6 +76,7 @@
           <el-scrollbar max-height="300">
             <div class="p-8">
               <common-list
+                :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
                 :data="chatLogData"
                 v-loading="left_loading"
                 :defaultActive="currentChatId"
@@ -111,8 +115,8 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted, reactive, nextTick, computed } from 'vue'
-
 import { isAppIcon } from '@/utils/application'
+import { hexToRgba } from '@/utils/theme'
 import useStore from '@/stores'
 
 const { user, log } = useStore()
@@ -252,6 +256,7 @@ const init = () => {
     getChatLog(applicationDetail.value.id)
   }
 }
+
 onMounted(() => {
   init()
 })

ui/src/views/chat/pc/index.vue

@@ -3,7 +3,10 @@
     class="chat-pc layout-bg"
     :class="classObj"
     v-loading="loading"
-    :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
+    :style="{
+      '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
+      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1)
+    }"
   >
     <div class="chat-pc__header" :style="customStyle">
       <div class="flex align-center">
@@ -43,6 +46,13 @@
             <el-scrollbar>
               <div class="p-8 pt-0">
                 <common-list
+                  :style="{
+                    '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
+                    '--el-color-primary-light-9': hexToRgba(
+                      applicationDetail?.custom_theme?.theme_color,
+                      0.1
+                    )
+                  }"
                   :data="chatLogData"
                   class="mt-8"
                   v-loading="left_loading"
@@ -135,6 +145,7 @@ import { saveAs } from 'file-saver'
 import { isAppIcon } from '@/utils/application'
 import useStore from '@/stores'
 import useResize from '@/layout/hooks/useResize'
+import { hexToRgba } from '@/utils/theme'
 
 useResize()
 

ui/src/workflow/nodes/search-dataset-node/index.vue

@@ -38,9 +38,13 @@
                   <AppAvatar v-else class="mr-8 avatar-blue" shape="square" :size="20">
                     <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
                   </AppAvatar>
-                  <div class="ellipsis">
+
+                  <auto-tooltip
+                    :content="relatedObject(datasetList, item, 'id')?.name"
+                    style="width: 80%"
+                  >
                     {{ relatedObject(datasetList, item, 'id')?.name }}
-                  </div>
+                  </auto-tooltip>
                 </div>
                 <el-button text @click="removeDataset(item)">
                   <el-icon><Close /></el-icon>