feat: theme

ui/src/layout/layout-template/MainLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-layout">
-    <div class="app-header">
+    <div class="app-header" :class="!isDefaultTheme ? 'custom-header' : ''">
       <SystemHeader v-if="isShared"></SystemHeader>
       <UserHeader v-else />
     </div>
@@ -27,7 +27,10 @@ const route = useRoute()
 const isShared = computed(() => {
   return route.path.endsWith('hared') || route.name.includes('ResourceManagement')
 })
-const { user } = useStore()
+const { theme } = useStore()
+const isDefaultTheme = computed(() => {
+  return theme.isDefaultTheme()
+})
 </script>
 <style lang="scss" scoped>
 @use './index.scss';

ui/src/layout/layout-template/SimpleLayout.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import UserHeader from '@/layout/layout-header/UserHeader.vue'
 import AppMain from '@/layout/app-main/index.vue'
+import useStore from '@/stores'
+const { theme } = useStore()
+const isDefaultTheme = computed(() => {
+  return theme.isDefaultTheme()
+})
 </script>
 
 <template>
   <div class="app-layout">
-    <div class="app-header">
+    <div class="app-header" :class="!isDefaultTheme ? 'custom-header' : ''">
       <UserHeader />
     </div>
     <div class="app-main">

ui/src/layout/layout-template/SystemMainLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-layout">
-    <div class="app-header">
+    <div class="app-header" :class="!isDefaultTheme ? 'custom-header' : ''">
       <SystemHeader />
     </div>
     <div class="app-main">
@@ -14,11 +14,15 @@
   </div>
 </template>
 <script setup lang="ts">
+import { computed } from 'vue'
 import SystemHeader from '@/layout/layout-header/SystemHeader.vue'
 import Sidebar from '@/layout/components/sidebar/index.vue'
 import AppMain from '@/layout/app-main/index.vue'
 import useStore from '@/stores'
-const { user } = useStore()
+const { theme } = useStore()
+const isDefaultTheme = computed(() => {
+  return theme.isDefaultTheme()
+})
 </script>
 <style lang="scss" scoped>
 @use './index.scss';

ui/src/stores/modules/theme.ts

@@ -24,16 +24,16 @@ const useThemeStore = defineStore('theme', {
       this.themeInfo = cloneDeep(data)
     },
 
-    // async theme(loading?: Ref<boolean>) {
-    //   return await ThemeApi.getThemeInfo(loading).then((ok) => {
-    //     this.setTheme(ok.data)
-    //     // window.document.title = this.themeInfo['title'] || 'MaxKB'
-    //     // const link = document.querySelector('link[rel="icon"]') as any
-    //     // if (link) {
-    //     //   link['href'] = this.themeInfo['icon'] || '/favicon.ico'
-    //     // }
-    //   })
-    // },
+    async theme(loading?: Ref<boolean>) {
+      return await ThemeApi.getThemeInfo(loading).then((ok) => {
+        this.setTheme(ok.data)
+        // window.document.title = this.themeInfo['title'] || 'MaxKB'
+        // const link = document.querySelector('link[rel="icon"]') as any
+        // if (link) {
+        //   link['href'] = this.themeInfo['icon'] || '/favicon.ico'
+        // }
+      })
+    },
   },
 })
 

ui/src/stores/modules/user.ts

@@ -20,7 +20,6 @@ export interface userStateTypes {
   version?: string
   license_is_valid: boolean
   edition: 'CE' | 'PE' | 'EE'
-  themeInfo: any
   workspace_id: string
   workspace_list: Array<any>
 }
@@ -32,7 +31,6 @@ const useUserStore = defineStore('user', {
     version: '',
     license_is_valid: false,
     edition: 'CE',
-    themeInfo: null,
     workspace_id: '',
     workspace_list: [],
   }),
@@ -42,14 +40,7 @@ const useUserStore = defineStore('user', {
         ? localStorage.getItem('MaxKB-locale') || getBrowserLang()
         : sessionStorage.getItem('language') || getBrowserLang()
     },
-    isDefaultTheme() {
-      return !this.themeInfo?.theme || this.themeInfo?.theme === '#3370FF'
-    },
-    setTheme(data: any) {
-      const { changeTheme } = useElementPlusTheme(this.themeInfo?.theme)
-      changeTheme(data?.['theme'])
-      this.themeInfo = cloneDeep(data)
-    },
+
     setWorkspaceId(workspace_id: string) {
       this.workspace_id = workspace_id
       localStorage.setItem('workspace_id', workspace_id)
@@ -114,16 +105,7 @@ const useUserStore = defineStore('user', {
       const login = useLoginStore()
       login.userAccessToken = token || ''
     },
-    async theme(loading?: Ref<boolean>) {
-      return await ThemeApi.getThemeInfo(loading).then((ok) => {
-        this.setTheme(ok.data)
-        // window.document.title = this.themeInfo['title'] || 'MaxKB'
-        // const link = document.querySelector('link[rel="icon"]') as any
-        // if (link) {
-        //   link['href'] = this.themeInfo['icon'] || '/favicon.ico'
-        // }
-      })
-    },
+
     async profile(loading?: Ref<boolean>) {
       return UserApi.getUserProfile(loading).then((ok) => {
         this.userInfo = ok.data
@@ -151,11 +133,11 @@ const useUserStore = defineStore('user', {
             // this.version = ok.data?.version || '-'
             this.license_is_valid = ok.data.license_is_valid
             this.edition = ok.data.edition
-
+            const theme = useThemeStore()
             if (this.isEE() || this.isPE()) {
-              await this.theme()
+              await theme.theme()
             } else {
-              this.themeInfo = {
+              theme.themeInfo = {
                 ...defaultPlatformSetting,
               }
             }

ui/src/styles/app.scss

@@ -485,3 +485,8 @@ h5 {
   height: var(--app-main-height);
   box-sizing: border-box;
 }
+
+// 自定义主题
+.custom-header {
+  background: var(--el-color-primary-light-9) !important;
+}

ui/src/views/application-workflow/index.vue

@@ -143,12 +143,12 @@ import { WorkFlowInstance } from '@/workflow/common/validate'
 import { hasPermission } from '@/utils/permission'
 import { t } from '@/locales'
 
-const { user, application } = useStore()
+const { theme, application } = useStore()
 const router = useRouter()
 const route = useRoute()
 
 const isDefaultTheme = computed(() => {
-  return user.isDefaultTheme()
+  return theme.isDefaultTheme()
 })
 const {
   params: { id },

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

@@ -43,10 +43,10 @@ import { ref, computed } from 'vue'
 import { isAppIcon } from '@/utils/common'
 import useStore from '@/stores'
 
-const { user } = useStore()
+const { theme } = useStore()
 
 const isDefaultTheme = computed(() => {
-  return user.isDefaultTheme()
+  return theme.isDefaultTheme()
 })
 
 const loading = ref(false)

ui/src/views/chat/user-login/index.vue

@@ -105,7 +105,7 @@
             <span
               :style="{
                 'font-size': item === 'OAUTH2' ? '8px' : '10px',
-                color: user.themeInfo?.theme,
+                color: theme.themeInfo?.theme,
               }"
               >{{ item }}</span
             >

ui/src/views/login/ForgotPassword.vue

@@ -2,7 +2,7 @@
   <login-layout v-if="!loading" v-loading="loading || sendLoading">
     <LoginContainer
       :subTitle="
-        user.themeInfo?.slogan ? user.themeInfo?.slogan : $t('views.system.theme.defaultSlogan')
+        theme.themeInfo?.slogan ? theme.themeInfo?.slogan : $t('views.system.theme.defaultSlogan')
       "
     >
       <h2 class="mb-24">{{ $t('views.login.forgotPassword') }}</h2>
@@ -81,7 +81,7 @@ import { t } from '@/locales'
 import useStore from '@/stores'
 
 const router = useRouter()
-const { user } = useStore()
+const { theme } = useStore()
 
 const CheckEmailForm = ref<CheckCodeRequest>({
   email: '',

ui/src/views/login/index.vue

@@ -96,7 +96,7 @@
             <span
               :style="{
                 'font-size': item === 'OAUTH2' ? '8px' : '10px',
-                color: user.themeInfo?.theme,
+                color: theme.themeInfo?.theme,
               }"
               >{{ item }}</span
             >

ui/src/views/theme/index.vue

@@ -263,16 +263,16 @@ import { MsgSuccess, MsgError } from '@/utils/message'
 import useStore from '@/stores'
 import { t } from '@/locales'
 
-const { user } = useStore()
+const { theme } = useStore()
 const router = useRouter()
 
 onBeforeRouteLeave((to, from) => {
-  user.setTheme(cloneTheme.value)
+  theme.setTheme(cloneTheme.value)
 })
 
-const themeInfo = computed(() => user.themeInfo)
+const themeInfo = computed(() => theme.themeInfo)
 const isDefaultTheme = computed(() => {
-  return user.isDefaultTheme()
+  return theme.isDefaultTheme()
 })
 
 const themeFormRef = ref<FormInstance>()
@@ -308,23 +308,23 @@ const onChange = (file: any, fileList: UploadFiles, attr: string) => {
   } else {
     themeForm.value[attr] = file.raw
   }
-  user.setTheme(themeForm.value)
+  theme.setTheme(themeForm.value)
 }
 
 function changeThemeHandle(val: string) {
   if (val !== 'custom') {
     themeForm.value.theme = val
-    user.setTheme(themeForm.value)
+    theme.setTheme(themeForm.value)
   }
 }
 
 function customColorHandle(val: string) {
   themeForm.value.theme = val
-  user.setTheme(themeForm.value)
+  theme.setTheme(themeForm.value)
 }
 
 function resetTheme() {
-  user.setTheme(cloneTheme.value)
+  theme.setTheme(cloneTheme.value)
   themeForm.value = cloneDeep(themeInfo.value)
 }
 
@@ -342,7 +342,7 @@ function resetForm(val: string) {
           ...defaultPlatformSetting,
         }
 
-  user.setTheme(themeForm.value)
+  theme.setTheme(themeForm.value)
 }
 
 const updateTheme = async (formEl: FormInstance | undefined, test?: string) => {
@@ -354,7 +354,7 @@ const updateTheme = async (formEl: FormInstance | undefined, test?: string) => {
         fd.append(item, themeForm.value[item])
       })
       ThemeApi.postThemeInfo(fd, loading).then((res) => {
-        user.theme()
+        theme.theme()
         cloneTheme.value = cloneDeep(themeForm.value)
         MsgSuccess(t('views.system.theme.saveSuccess'))
       })