feat: 对话可更换主题

feat: 对话可更换主题

ui/src/components/ai-chat/index.vue

@@ -4,9 +4,10 @@
       <div ref="dialogScrollbar" class="ai-chat__content p-24 chat-width">
         <div class="item-content mb-16" v-if="!props.available || (props.data?.prologue && !log)">
           <div class="avatar">
-            <AppAvatar class="avatar-gradient">
+            <!-- <AppAvatar class="avatar-gradient">
               <img src="@/assets/icon_robot.svg" style="width: 75%" alt="" />
-            </AppAvatar>
+            </AppAvatar> -->
+            <LogoIcon height="30px" />
           </div>
 
           <div class="content">
@@ -51,9 +52,10 @@
           <!-- 回答 -->
           <div class="item-content mb-16 lighter">
             <div class="avatar">
-              <AppAvatar class="avatar-gradient">
+              <!-- <AppAvatar class="avatar-gradient">
                 <img src="@/assets/icon_robot.svg" style="width: 75%" alt="" />
-              </AppAvatar>
+              </AppAvatar> -->
+              <LogoIcon height="30px" />
             </div>
 
             <div class="content">

ui/src/layout/components/app-header/index.vue

@@ -31,7 +31,4 @@ const isDefaultTheme = computed(() => {
   top: 0;
   z-index: 100;
 }
-.custom-header {
-  background: var(--el-color-primary-light-9) !important;
-}
 </style>

ui/src/styles/app.scss

@@ -690,3 +690,8 @@ h5 {
     box-shadow: none;
   }
 }
+
+// 自定义主题
+.custom-header {
+  background: var(--el-color-primary-light-9) !important;
+}

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

@@ -1,6 +1,6 @@
 <template>
   <div class="chat layout-bg" v-loading="loading">
-    <div class="chat__header">
+    <div class="chat__header" :class="!isDefaultTheme ? 'custom-header' : ''">
       <div class="chat-width">
         <h2 class="ml-24">{{ applicationDetail?.name }}</h2>
       </div>
@@ -16,7 +16,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import applicationApi from '@/api/application'
 import useStore from '@/stores'
@@ -27,6 +27,10 @@ const {
 
 const { application, user } = useStore()
 
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+
 const loading = ref(false)
 const applicationDetail = ref<any>({})
 const applicationAvailable = ref<boolean>(true)

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

@@ -1,6 +1,6 @@
 <template>
   <div class="chat-embed layout-bg" v-loading="loading">
-    <div class="chat-embed__header">
+    <div class="chat-embed__header" :class="!isDefaultTheme ? 'custom-header' : ''">
       <div class="chat-width">
         <h4 class="ml-24">{{ applicationDetail?.name }}</h4>
       </div>
@@ -75,7 +75,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, reactive, nextTick } from 'vue'
+import { ref, onMounted, reactive, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import applicationApi from '@/api/application'
 import useStore from '@/stores'
@@ -86,6 +86,10 @@ const {
 
 const { application, user, log } = useStore()
 
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+
 const AiChatRef = ref()
 const loading = ref(false)
 const left_loading = ref(false)

ui/src/views/chat/index.vue

@@ -4,6 +4,8 @@
 <script setup lang="ts">
 import { onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
+import useStore from '@/stores'
+const { user } = useStore()
 
 const components: any = import.meta.glob('@/views/chat/**/index.vue', {
   eager: true
@@ -18,6 +20,8 @@ const currentTemplate = computed(() => {
   return components[name].default
 })
 
-onMounted(() => {})
+onMounted(() => {
+  user.asyncGetProfile()
+})
 </script>
 <style lang="scss"></style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="chat-pc layout-bg" :class="classObj" v-loading="loading">
-    <div class="chat-pc__header">
+    <div class="chat-pc__header" :class="!isDefaultTheme ? 'custom-header' : ''">
       <h4 class="ml-24">{{ applicationDetail?.name }}</h4>
     </div>
     <div class="flex">
@@ -122,6 +122,10 @@ const {
 
 const { application, user, log, common } = useStore()
 
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+
 const isCollapse = ref(false)
 
 const classObj = computed(() => {