fix(Smart Query): The color value after selecting in the drop-down list is the current main color

Author: dataeaseShu

frontend/src/assets/svg/chart/icon_bar_outlined.svg

@@ -216,7 +216,7 @@ strong {
 }
 
 .ed-button.is-plain:active {
-  background-color: #a4e3d3 !important;
+  background-color: var(--ed-color-primary-60, #a4e3d3) !important;
 }
 
 .ed-drawer__footer {
@@ -409,3 +409,7 @@ strong {
     }
   }
 }
+
+.ed-dropdown__popper {
+  --ed-dropdown-menuItem-hover-fill: #1f23291a !important;
+}

frontend/src/assets/svg/chart/icon_chart-line.svg

@@ -66,7 +66,7 @@ const handleDefaultChatChange = (val: any) => {
           @click="handleDefaultChatChange(ele)"
         >
           <el-icon style="color: #646a73" size="16">
-            <component :is="ele.icon" />
+            <component :is="ele.icon" :class="chartType === ele.value && 'icon-primary'" />
           </el-icon>
           <div class="model-name">{{ ele.name }}</div>
           <el-icon size="16" class="done">

frontend/src/assets/svg/chart/icon_pie_outlined.svg

@@ -382,7 +382,7 @@ import icon_sidebar_outlined from '@/assets/svg/icon_sidebar_outlined.svg'
 import icon_replace_outlined from '@/assets/svg/icon_replace_outlined.svg'
 import icon_screen_outlined from '@/assets/svg/icon_screen_outlined.svg'
 import icon_start_outlined from '@/assets/svg/icon_start_outlined.svg'
-import logo_fold from '@/assets/LOGO-fold.svg'
+import logo_fold from '@/assets/svg/logo-custom_small.svg'
 import logo from '@/assets/LOGO.svg'
 import icon_send_filled from '@/assets/svg/icon_send_filled.svg'
 import { useAssistantStore } from '@/stores/assistant'

frontend/src/style.less

@@ -482,11 +482,11 @@ defineExpose({
 
     &:hover,
     &:focus {
-      background: #d2f1e9;
+      background: var(--ed-color-primary-80, #d2f1e9);
     }
 
     &:active {
-      background: #a4e3d3;
+      background: var(--ed-color-primary-60, #a4e3d3);
     }
   }
 }
@@ -626,6 +626,9 @@ defineExpose({
     border-radius: 4px;
     padding: 0 8px !important;
   }
+  .ed-dropdown-menu__item:not(.is-disabled):not(.selected):hover {
+    color: #1f2329;
+  }
 }
 .menu-outer-dv_popper {
   min-width: 140px;

frontend/src/views/chat/chat-block/ChartPopover.vue

@@ -130,6 +130,7 @@ const close = () => {
 
 const initForm = (item: any, editTable: boolean = false) => {
   isEditTable.value = false
+  keywords.value = ''
   dsFormRef.value!.clearValidate()
   if (item) {
     dialogTitle.value = editTable ? t('ds.form.title.choose_tables') : t('ds.form.title.edit')
@@ -228,15 +229,15 @@ const save = async (formEl: FormInstance | undefined) => {
     if (valid) {
       const list = tableList.value
         .filter((ele: any) => {
-          return checkList.value.includes(ele.tableName)
+          return checkTableList.value.includes(ele.tableName)
         })
         .map((ele: any) => {
           return { table_name: ele.tableName, table_comment: ele.tableComment }
         })
 
-      if (checkList.value.length > 30) {
+      if (checkTableList.value.length > 30) {
         const excessive = await ElMessageBox.confirm(t('common.excessive_tables_selected'), {
-          tip: t('common.to_continue_saving', { msg: checkList.value.length }),
+          tip: t('common.to_continue_saving', { msg: checkTableList.value.length }),
           confirmButtonText: t('common.save'),
           cancelButtonText: t('common.cancel'),
           confirmButtonType: 'primary',
@@ -434,7 +435,7 @@ const tableListWithSearch = computed(() => {
 
 watch(keywords, () => {
   const tableNameArr = tableListWithSearch.value.map((ele: any) => ele.tableName)
-  checkList.value = checkTableList.filter((ele) => tableNameArr.includes(ele))
+  checkList.value = checkTableList.value.filter((ele) => tableNameArr.includes(ele))
   const checkedCount = checkList.value.length
   checkAll.value = checkedCount === tableListWithSearch.value.length
   isIndeterminate.value = checkedCount > 0 && checkedCount < tableListWithSearch.value.length
@@ -460,7 +461,7 @@ const setFile = (file: any) => {
 
 const checkAll = ref(false)
 const isIndeterminate = ref(false)
-let checkTableList = [] as any[]
+const checkTableList = ref([] as any[])
 
 const handleCheckAllChange = (val: any) => {
   checkList.value = val
@@ -473,18 +474,18 @@ const handleCheckAllChange = (val: any) => {
     : []
   isIndeterminate.value = false
   const tableNameArr = tableListWithSearch.value.map((ele: any) => ele.tableName)
-  checkTableList = val
-    ? [...new Set([...tableNameArr, ...checkTableList])]
-    : checkTableList.filter((ele) => !tableNameArr.includes(ele))
+  checkTableList.value = val
+    ? [...new Set([...tableNameArr, ...checkTableList.value])]
+    : checkTableList.value.filter((ele) => !tableNameArr.includes(ele))
 }
 
 const handleCheckedTablesChange = (value: any[]) => {
   const checkedCount = value.length
   checkAll.value = checkedCount === tableListWithSearch.value.length
   isIndeterminate.value = checkedCount > 0 && checkedCount < tableListWithSearch.value.length
   const tableNameArr = tableListWithSearch.value.map((ele: any) => ele.tableName)
-  checkTableList = [
-    ...new Set([...checkTableList.filter((ele) => !tableNameArr.includes(ele)), ...value]),
+  checkTableList.value = [
+    ...new Set([...checkTableList.value.filter((ele) => !tableNameArr.includes(ele)), ...value]),
   ]
 }
 
@@ -693,7 +694,7 @@ defineExpose({
       </el-form>
       <div v-show="activeStep === 2" v-loading="tableListLoading" class="select-data_table">
         <div class="title">
-          {{ $t('ds.form.choose_tables') }} ({{ checkList.length }}/ {{ tableList.length }})
+          {{ $t('ds.form.choose_tables') }} ({{ checkTableList.length }}/ {{ tableList.length }})
         </div>
         <el-input
           v-model="keywords"

frontend/src/views/chat/index.vue

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue'
 import icon_sidebar_outlined from '@/assets/embedded/icon_sidebar_outlined_nofill.svg'
 import icon_new_chat_outlined from '@/assets/svg/icon_new_chat_outlined.svg'
-import LOGO from '@/assets/embedded/LOGO.png'
+import LOGO from '@/assets/svg/logo-custom_small.svg'
 import disable_answer from '@/assets/embedded/disable.png'
 import icon_close_outlined from '@/assets/svg/icon_close_outlined.svg'
 import icon_magnify_outlined from '@/assets/svg/icon_magnify_outlined.svg'
@@ -19,7 +19,7 @@ const basePath = import.meta.env.VITE_API_BASE_URL
 const baseUrl = basePath + '/system/assistant/picture/'
 
 const pageLogo = computed(() => {
-  return !props.logo ? LOGO : props.logo.startsWith('blob') ? props.logo : baseUrl + props.logo
+  return props.logo.startsWith('blob') ? props.logo : baseUrl + props.logo
 })
 </script>
 
@@ -29,7 +29,10 @@ const pageLogo = computed(() => {
       <el-icon size="20">
         <icon_sidebar_outlined></icon_sidebar_outlined>
       </el-icon>
-      <img :src="pageLogo" class="logo" width="30px" height="30px" alt="" />
+      <el-icon v-if="!props.logo" class="logo" size="30">
+        <LOGO></LOGO>
+      </el-icon>
+      <img v-else :src="pageLogo" class="logo" width="30px" height="30px" alt="" />
       <span class="title">{{ name }}</span>
 
       <el-tooltip effect="dark" :content="$t('embedded.new_conversation')" placement="top">
@@ -47,7 +50,10 @@ const pageLogo = computed(() => {
       </el-icon>
     </div>
     <div class="center">
-      <img :src="pageLogo" class="logo" width="30px" height="30px" alt="" />
+      <el-icon v-if="!props.logo" class="logo" size="30">
+        <LOGO></LOGO>
+      </el-icon>
+      <img v-else :src="pageLogo" class="logo" width="30px" height="30px" alt="" />
       <div class="i-am">{{ welcome }}</div>
       <div class="i-can">{{ welcomeDesc }}</div>
     </div>

frontend/src/views/dashboard/common/ResourceTree.vue

@@ -4,7 +4,10 @@
       <el-icon size="20" @click="openHistory">
         <icon_sidebar_outlined></icon_sidebar_outlined>
       </el-icon>
-      <img :src="logo || LOGO" class="logo" width="30px" height="30px" alt="" />
+      <el-icon v-if="!logo" class="logo" size="30">
+        <LOGO></LOGO>
+      </el-icon>
+      <img v-else :src="logo" class="logo" width="30px" height="30px" alt="" />
       <span class="title">{{ customSet.name || $t('embedded.intelligent_customer_service') }}</span>
 
       <el-tooltip effect="dark" :content="$t('embedded.new_conversation')" placement="top">
@@ -29,16 +32,19 @@
 import { onBeforeMount, nextTick, onBeforeUnmount, ref, onMounted, reactive } from 'vue'
 import ChatComponent from '@/views/chat/index.vue'
 import { request } from '@/utils/request'
-import LOGO from '@/assets/embedded/LOGO.png'
+import LOGO from '@/assets/svg/logo-custom_small.svg'
 import icon_sidebar_outlined from '@/assets/embedded/icon_sidebar_outlined_nofill.svg'
 import icon_new_chat_outlined from '@/assets/svg/icon_new_chat_outlined.svg'
+import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import { useRoute } from 'vue-router'
 import { assistantApi } from '@/api/assistant'
 import { useAssistantStore } from '@/stores/assistant'
 import { setCurrentColor } from '@/utils/utils'
 import { useI18n } from 'vue-i18n'
+
 const { t } = useI18n()
 const assistantStore = useAssistantStore()
+const appearanceStore = useAppearanceStoreWithOut()
 const route = useRoute()
 const chatRef = ref()
 
@@ -111,12 +117,12 @@ const logo = ref()
 const basePath = import.meta.env.VITE_API_BASE_URL
 const baseUrl = basePath + '/system/assistant/picture/'
 const setPageCustomColor = (val: any) => {
-  const ele = document.querySelector('.sqlbot-assistant-container') as HTMLElement
+  const ele = document.querySelector('body') as HTMLElement
   setCurrentColor(val, ele)
 }
 
 const setPageHeaderFontColor = (val: any) => {
-  const ele = document.querySelector('.sqlbot-assistant-container') as HTMLElement
+  const ele = document.querySelector('body') as HTMLElement
   ele.style.setProperty('--ed-text-color-primary', val)
 }
 onBeforeMount(async () => {
@@ -159,11 +165,22 @@ onBeforeMount(async () => {
       }
 
       for (const key in customSet) {
-        if (Object.prototype.hasOwnProperty.call(customSet, key) && rawData[key]) {
+        if (Object.prototype.hasOwnProperty.call(customSet, key)) {
           customSet[key] = rawData[key]
         }
       }
 
+      if (!rawData.theme) {
+        const { customColor, themeColor } = appearanceStore
+        const currentColor =
+          themeColor === 'custom' && customColor
+            ? customColor
+            : themeColor === 'blue'
+              ? '#3370ff'
+              : '#1CBA90'
+        customSet.theme = currentColor || customSet.theme
+      }
+
       nextTick(() => {
         setPageCustomColor(customSet.theme)
         setPageHeaderFontColor(customSet.header_font_color)