feat(embedded): Helper embedded display settings

Author: dataeaseShu

frontend/src/utils/utils.ts

@@ -107,47 +107,50 @@ export const setTitle = (title?: string) => {
   document.title = title || 'SQLBot'
 }
 
-export const setCurrentColor = (currentColor: any) => {
-  document.documentElement.style.setProperty('--ed-color-primary', currentColor)
-  document.documentElement.style.setProperty('--van-blue', currentColor)
-  document.documentElement.style.setProperty(
+export const setCurrentColor = (
+  currentColor: any,
+  elemet: HTMLElement = document.documentElement
+) => {
+  elemet.style.setProperty('--ed-color-primary', currentColor)
+  elemet.style.setProperty('--van-blue', currentColor)
+  elemet.style.setProperty(
     '--ed-color-primary-light-5',
     colorFunctions
       .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 40 })
       .toRGB()
   )
-  document.documentElement.style.setProperty(
+  elemet.style.setProperty(
     '--ed-color-primary-light-3',
     colorFunctions
       .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 15 })
       .toRGB()
   )
 
-  document.documentElement.style.setProperty(
+  elemet.style.setProperty(
     '--ed-color-primary-60',
     colorFunctions
       .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 60 })
       .toRGB()
   )
 
-  document.documentElement.style.setProperty(
+  elemet.style.setProperty(
     '--ed-color-primary-80',
     colorFunctions
       .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 80 })
       .toRGB()
   )
 
-  document.documentElement.style.setProperty(
+  elemet.style.setProperty(
     '--ed-color-primary-15-d',
     colorFunctions
       .mix(new colorTree('000000'), new colorTree(currentColor.substr(1)), { value: 15 })
       .toRGB()
   )
-  document.documentElement.style.setProperty('--ed-color-primary-1a', `${currentColor}1a`)
-  document.documentElement.style.setProperty('--ed-color-primary-14', `${currentColor}14`)
-  document.documentElement.style.setProperty('--ed-color-primary-33', `${currentColor}33`)
-  document.documentElement.style.setProperty('--ed-color-primary-99', `${currentColor}99`)
-  document.documentElement.style.setProperty(
+  elemet.style.setProperty('--ed-color-primary-1a', `${currentColor}1a`)
+  elemet.style.setProperty('--ed-color-primary-14', `${currentColor}14`)
+  elemet.style.setProperty('--ed-color-primary-33', `${currentColor}33`)
+  elemet.style.setProperty('--ed-color-primary-99', `${currentColor}99`)
+  elemet.style.setProperty(
     '--ed-color-primary-dark-2',
     colorFunctions
       .mix(new colorTree('000000'), new colorTree(currentColor.substr(1)), { value: 15 })

frontend/src/views/embedded/assistant.vue

@@ -1,13 +1,26 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import icon_sidebar_outlined from '@/assets/embedded/icon_sidebar_outlined.svg'
 import icon_new_chat_outlined from '@/assets/embedded/icon_new-chat_outlined.svg'
 import LOGO from '@/assets/embedded/LOGO.png'
 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'
-
+import { propTypes } from '@/utils/propTypes'
+
+const props = defineProps({
+  welcomeDesc: propTypes.string.def(''),
+  logo: propTypes.string.def(''),
+  welcome: propTypes.string.def(''),
+  name: propTypes.string.def(''),
+})
 const textareaVal = ref('')
+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
+})
 </script>
 
 <template>
@@ -16,8 +29,8 @@ const textareaVal = ref('')
       <el-icon size="20">
         <icon_sidebar_outlined></icon_sidebar_outlined>
       </el-icon>
-      <img :src="LOGO" class="logo" width="30px" height="30px" alt="" />
-      <span class="tite">{{ $t('embedded.intelligent_customer_service') }}</span>
+      <img :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">
         <el-icon class="new-chat" size="20">
@@ -34,10 +47,9 @@ const textareaVal = ref('')
       </el-icon>
     </div>
     <div class="center">
-      <img :src="LOGO" class="logo" width="30px" height="30px" alt="" />
-      <div class="i-am">{{ $t('embedded.i_am_sqlbot') }}</div>
-      <div class="i-can">{{ $t('embedded.predict_data_etc') }}</div>
-      <div class="data-query">{{ $t('embedded.intelligent_data_query') }}</div>
+      <img :src="pageLogo" class="logo" width="30px" height="30px" alt="" />
+      <div class="i-am">{{ welcome }}</div>
+      <div class="i-can">{{ welcomeDesc }}</div>
     </div>
     <div class="content">
       <div class="textarea-send">
@@ -95,6 +107,7 @@ const textareaVal = ref('')
       font-weight: 500;
       font-size: 16px;
       line-height: 24px;
+      color: var(--ed-text-color-primary);
     }
 
     .ed-icon {
@@ -146,13 +159,11 @@ const textareaVal = ref('')
 
     .i-can {
       margin-bottom: 4px;
-    }
-
-    .data-query,
-    .i-can {
+      max-width: 350px;
+      text-align: center;
       font-weight: 400;
       font-size: 14px;
-      line-height: 22px;
+      line-height: 24px;
       color: #646a73;
     }
   }

frontend/src/views/system/embedded/SetUi.vue

@@ -4,9 +4,8 @@ import { ref, unref, reactive, nextTick } from 'vue'
 import { type UploadUserFile, ElMessage } from 'element-plus-secondary'
 import { useI18n } from 'vue-i18n'
 import { request } from '@/utils/request'
+import { setCurrentColor } from '@/utils/utils'
 import { useAppearanceStoreWithOut } from '@/stores/appearance'
-import colorFunctions from 'less/lib/less/functions/color.js'
-import colorTree from 'less/lib/less/tree/color.js'
 import { cloneDeep } from 'lodash-es'
 
 const appearanceStore = useAppearanceStoreWithOut()
@@ -145,26 +144,8 @@ const customColorChange = (val: any) => {
 }
 
 const setPageCustomColor = (val: any) => {
-  const ele = document.getElementsByClassName('ui-main')[0] as HTMLElement
-
-  ele.style.setProperty('--ed-color-primary', val)
-  ele.style.setProperty('--van-blue', val)
-  ele.style.setProperty(
-    '--ed-color-primary-light-5',
-    colorFunctions.mix(new colorTree('ffffff'), new colorTree(val.substr(1)), { value: 40 }).toRGB()
-  )
-  ele.style.setProperty(
-    '--ed-color-primary-light-3',
-    colorFunctions.mix(new colorTree('ffffff'), new colorTree(val.substr(1)), { value: 15 }).toRGB()
-  )
-  ele.style.setProperty('--ed-color-primary-1a', `${val}1a`)
-  ele.style.setProperty('--ed-color-primary-14', `${val}14`)
-  ele.style.setProperty('--ed-color-primary-33', `${val}33`)
-  ele.style.setProperty('--ed-color-primary-99', `${val}99`)
-  ele.style.setProperty(
-    '--ed-color-primary-dark-2',
-    colorFunctions.mix(new colorTree('000000'), new colorTree(val.substr(1)), { value: 15 }).toRGB()
-  )
+  const ele = document.querySelector('.ui-main') as HTMLElement
+  setCurrentColor(val, ele)
 }
 
 const setPageHeaderFontColor = (val: any) => {
@@ -224,6 +205,9 @@ const open = (row: any) => {
   // rawData = JSON.parse(row.configuration)
   // init()
   dialogVisible.value = true
+  nextTick(() => {
+    setPageCustomColor('#1CBA90')
+  })
 }
 defineExpose({
   open,
@@ -239,7 +223,12 @@ defineExpose({
   >
     <div class="ui-main">
       <div class="left-preview">
-        <assistant></assistant>
+        <assistant
+          :welcome-desc="sqlBotForm.welcome_desc"
+          :welcome="sqlBotForm.welcome"
+          :name="sqlBotForm.name"
+          :logo="logo"
+        ></assistant>
       </div>
       <div class="right-form">
         <div style="display: flex; align-items: center; justify-content: space-between">