From 888ba752d377b4b1b0685d92a28110d22f03de19 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 23 Oct 2024 18:17:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AE=BE=E7=BD=AE=E5=B0=8F=E5=8A=A9?=
 =?UTF-8?q?=E6=89=8B=E4=B8=BB=E9=A2=98=E8=89=B2=E9=97=AE=E9=A2=98=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/XPackDisplaySettingDialog.vue   | 58 ++++++++++++-------
 ui/src/views/chat/embed/index.vue             | 28 ++++++---
 ui/src/views/chat/pc/index.vue                | 23 ++++++--
 3 files changed, 75 insertions(+), 34 deletions(-)

diff --git a/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue b/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
index 3d2f83dd9..65d246679 100644
--- a/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
+++ b/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
@@ -25,7 +25,7 @@
       <el-col :span="12">
         <div class="setting-preview border border-r-4 mr-16">
           <div class="setting-preview-container">
-            <div class="setting-preview-header" :class="!isDefaultTheme ? 'custom-header' : ''">
+            <div class="setting-preview-header" :style="customStyle">
               <div class="flex-between">
                 <div class="flex align-center">
                   <div class="mr-12 ml-24 flex">
@@ -54,12 +54,21 @@
                   <el-button link>
                     <AppIcon
                       :iconName="'app-magnify'"
-                      class="color-secondary"
+                      :style="{
+                        color: xpackForm.custom_theme?.header_font_color
+                      }"
                       style="font-size: 20px"
                     ></AppIcon>
                   </el-button>
                   <el-button link>
-                    <el-icon :size="20" class="color-secondary"><Close /></el-icon>
+                    <el-icon
+                      :size="20"
+                      class="color-secondary"
+                      :style="{
+                        color: xpackForm.custom_theme?.header_font_color
+                      }"
+                      ><Close
+                    /></el-icon>
                   </el-button>
                 </div>
               </div>
@@ -93,15 +102,12 @@
                       fit="cover"
                       style="width: 35px; height: 35px; display: block"
                     />
-                    <LogoIcon
-                      v-else
-                      height="35px"
-                      style="width: 35px; height: 35px; display: block"
-                    />
+                    <AppAvatar v-else>
+                      <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+                    </AppAvatar>
                   </div>
-                  <img src="@/assets/user-icon.svg" width="270" alt="" />
 
-                  <img src="@/assets/display-bg3.png" alt="" width="270" />
+                  <img src="@/assets/display-bg3.png" alt="" width="270" class="ml-8" />
                 </div>
               </div>
               <div style="position: absolute; bottom: 0">
@@ -132,8 +138,11 @@
           <el-row class="w-full mb-8">
             <el-col :span="12">
               <h5 class="mb-8">自定义主题色</h5>
-              <el-color-picker v-model="form.custom_theme.theme_color"
-            /></el-col>
+              <div>
+                <el-color-picker v-model="form.custom_theme.theme_color" />
+                {{ !form.custom_theme.theme_color ? '默认' : '' }}
+              </div>
+            </el-col>
             <el-col :span="12">
               <h5 class="mb-8">头部标题字体颜色</h5>
               <el-color-picker v-model="form.custom_theme.header_font_color" />
@@ -260,7 +269,7 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
 import { isAppIcon } from '@/utils/application'
@@ -289,11 +298,11 @@ const defaultSetting = {
   disclaimer_value: '「以上内容均由AI生成，仅供参考和借鉴」',
   custom_theme: {
     theme_color: '',
-    header_font_color: ''
+    header_font_color: '#1f2329'
   },
   float_location: {
-    x: { type: '', value: '' },
-    y: { type: '', value: '' }
+    x: { type: '', value: 0 },
+    y: { type: '', value: 0 }
   }
 }
 
@@ -314,11 +323,11 @@ const xpackForm = ref<any>({
   disclaimer_value: '「以上内容均由AI生成，仅供参考和借鉴」',
   custom_theme: {
     theme_color: '',
-    header_font_color: ''
+    header_font_color: '#1f2329'
   },
   float_location: {
-    x: { type: '', value: '' },
-    y: { type: '', value: '' }
+    x: { type: '', value: 0 },
+    y: { type: '', value: 0 }
   }
 })
 
@@ -332,6 +341,13 @@ const loading = ref(false)
 
 const detail = ref<any>(null)
 
+const customStyle = computed(() => {
+  return {
+    background: xpackForm.value.custom_theme?.theme_color,
+    color: xpackForm.value.custom_theme?.header_font_color
+  }
+})
+
 watch(dialogVisible, (bool) => {
   if (!bool) {
     form.value = {
@@ -381,7 +397,9 @@ const open = (data: any, content: any) => {
   xpackForm.value.user_avatar = data.user_avatar
   xpackForm.value.disclaimer = data.disclaimer
   xpackForm.value.disclaimer_value = data.disclaimer_value
-  xpackForm.value.custom_theme = data.custom_theme
+  xpackForm.value.custom_theme.theme_color = data.custom_theme?.theme_color
+  xpackForm.value.custom_theme.header_font_color = data.custom_theme?.header_font_color || '#1f2329'
+
   xpackForm.value.float_location = data.float_location
   form.value = xpackForm.value
 
diff --git a/ui/src/views/chat/embed/index.vue b/ui/src/views/chat/embed/index.vue
index f58a26277..7d2e56d33 100644
--- a/ui/src/views/chat/embed/index.vue
+++ b/ui/src/views/chat/embed/index.vue
@@ -1,6 +1,10 @@
 <template>
-  <div class="chat-embed layout-bg" v-loading="loading">
-    <div class="chat-embed__header" :class="!isDefaultTheme ? 'custom-header' : ''">
+  <div
+    class="chat-embed layout-bg"
+    v-loading="loading"
+    :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
+  >
+    <div class="chat-embed__header" :style="customStyle">
       <div class="chat-width flex align-center">
         <div class="mr-12 ml-24 flex">
           <AppAvatar
@@ -52,7 +56,12 @@
         @click.prevent.stop="show = !show"
         class="chat-popover-button cursor color-secondary"
       >
-        <AppIcon iconName="app-history-outlined"></AppIcon>
+        <AppIcon
+          iconName="app-history-outlined"
+          :style="{
+            color: applicationDetail?.custom_theme?.header_font_color
+          }"
+        ></AppIcon>
       </div>
 
       <el-collapse-transition>
@@ -108,14 +117,10 @@ import useStore from '@/stores'
 
 const { user, log } = useStore()
 
-const isDefaultTheme = computed(() => {
-  return user.isDefaultTheme()
-})
-
 const AiChatRef = ref()
 const loading = ref(false)
 const left_loading = ref(false)
-const chatLogeData = ref<any[]>([])
+const chatLogData = ref<any[]>([])
 const show = ref(false)
 const props = defineProps<{
   application_profile: any
@@ -138,6 +143,13 @@ const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
 
 const mouseId = ref('')
 
+const customStyle = computed(() => {
+  return {
+    background: applicationDetail.value?.custom_theme?.theme_color,
+    color: applicationDetail.value?.custom_theme?.header_font_color
+  }
+})
+
 function mouseenter(row: any) {
   mouseId.value = row.id
 }
diff --git a/ui/src/views/chat/pc/index.vue b/ui/src/views/chat/pc/index.vue
index d03dfebd5..0c5043add 100644
--- a/ui/src/views/chat/pc/index.vue
+++ b/ui/src/views/chat/pc/index.vue
@@ -1,6 +1,11 @@
 <template>
-  <div class="chat-pc layout-bg" :class="classObj" v-loading="loading">
-    <div class="chat-pc__header" :class="!isDefaultTheme ? 'custom-header' : ''">
+  <div
+    class="chat-pc layout-bg"
+    :class="classObj"
+    v-loading="loading"
+    :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
+  >
+    <div class="chat-pc__header" :style="customStyle">
       <div class="flex align-center">
         <div class="mr-12 ml-24 flex">
           <AppAvatar
@@ -66,7 +71,7 @@
                   </template>
                 </common-list>
               </div>
-              <div v-if="chatLogData.length" class="gradient-divider lighter mt-8">
+              <div v-if="chatLogData?.length" class="gradient-divider lighter mt-8">
                 <span>仅显示最近 20 条对话</span>
               </div>
             </el-scrollbar>
@@ -141,6 +146,13 @@ const isDefaultTheme = computed(() => {
 
 const isCollapse = ref(false)
 
+const customStyle = computed(() => {
+  return {
+    background: applicationDetail.value?.custom_theme?.theme_color,
+    color: applicationDetail.value?.custom_theme?.header_font_color
+  }
+})
+
 const classObj = computed(() => {
   return {
     mobile: common.isMobile(),
@@ -161,7 +173,6 @@ const AiChatRef = ref()
 const loading = ref(false)
 const left_loading = ref(false)
 
-
 const applicationDetail = computed({
   get: () => {
     return props.application_profile
@@ -169,7 +180,7 @@ const applicationDetail = computed({
   set: (v) => {}
 })
 
-const chatLogeData = ref<any[]>([])
+const chatLogData = ref<any[]>([])
 
 const paginationConfig = ref({
   current_page: 1,
@@ -239,7 +250,7 @@ function getChatLog(id: string, refresh?: boolean) {
   log.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
     chatLogData.value = res.data.records
     if (refresh) {
-      currentChatName.value = chatLogData.value[0].abstract
+      currentChatName.value = chatLogData.value?.[0].abstract
     }
   })
 }