fix(appearance): The community version prohibits appearance configuration

frontend/src/stores/appearance.ts

@@ -2,9 +2,8 @@ import { defineStore } from 'pinia'
 import { store } from '@/stores/index'
 // import { defaultFont, list } from '@/api/font'
 import { request } from '@/utils/request'
-import colorFunctions from 'less/lib/less/functions/color.js'
-import colorTree from 'less/lib/less/tree/color.js'
-import { setTitle } from '@/utils/utils'
+
+import { setTitle, setCurrentColor } from '@/utils/utils'
 
 const basePath = import.meta.env.VITE_API_BASE_URL
 const baseUrl = basePath + '/system/appearance/picture/'
@@ -32,7 +31,6 @@ interface AppearanceState {
   loaded: boolean
   showDemoTips?: boolean
   demoTipsContent?: string
-  community: boolean
   fontList?: Array<{ name: string; id: string; isDefault: boolean }>
 }
 
@@ -65,7 +63,6 @@ export const useAppearanceStore = defineStore('appearanceStore', {
       loaded: false,
       showDemoTips: false,
       demoTipsContent: '',
-      community: true,
       fontList: [],
     }
   },
@@ -142,9 +139,6 @@ export const useAppearanceStore = defineStore('appearanceStore', {
     getDemoTipsContent(): string {
       return this.demoTipsContent!
     },
-    getCommunity(): boolean {
-      return this.community
-    },
     getShowAi(): boolean {
       return isBtnShow(this.showAi!)
     },
@@ -208,7 +202,7 @@ export const useAppearanceStore = defineStore('appearanceStore', {
     setLoaded(data: boolean) {
       this.loaded = data
     },
-    async setAppearance(isDataEaseBi?: boolean) {
+    async setAppearance() {
       // const desktop = wsCache.get('app.desktop')
       // if (desktop) {
       //   this.loaded = true
@@ -252,43 +246,28 @@ export const useAppearanceStore = defineStore('appearanceStore', {
       //   document.title = ''
       // }
       const obj = LicenseGenerator.getLicense()
-      if (obj?.status !== 'valid') return
+      if (obj?.status !== 'valid') {
+        setCurrentColor('#1CBA90')
+        document.title = 'SQLBot'
+        setLinkIcon()
+        return
+      }
       const resData = await request.get('/system/appearance')
       this.loaded = true
       if (!resData?.length) {
-        if (!isDataEaseBi) {
-          document.title = 'SQLBot'
-          setLinkIcon()
-        }
         return
       }
-      const data: AppearanceState = { loaded: false, community: true }
-      let isCommunity = false
+      const data: AppearanceState = { loaded: false }
       resData.forEach((item: KeyValue) => {
         ;(
           data as {
             [key: string]: any
           }
         )[item.pkey] = item.pval
-        if (item.pkey === 'community') {
-          isCommunity = true
-        }
       })
-      data.community = isCommunity
-      this.community = data.community
-      if (this.community) {
-        this.showDemoTips = data.showDemoTips
-        this.demoTipsContent = data.demoTipsContent
-        this.loaded = true
-        setLinkIcon()
-        return
-      }
+
       this.navigate = data.navigate
-      this.mobileLogin = data.mobileLogin
-      this.mobileLoginBg = data.mobileLoginBg
       this.help = data.help
-      this.showAi = data.showAi
-      this.showCopilot = data.showCopilot
       this.showDoc = data.showDoc
       this.showAbout = data.showAbout
       this.navigateBg = data.navigateBg
@@ -300,53 +279,12 @@ export const useAppearanceStore = defineStore('appearanceStore', {
           : this.isBlue
             ? '#3370ff'
             : '#1CBA90'
-      document.documentElement.style.setProperty('--ed-color-primary', currentColor)
-      document.documentElement.style.setProperty('--van-blue', currentColor)
-      document.documentElement.style.setProperty(
-        '--ed-color-primary-light-5',
-        colorFunctions
-          .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 40 })
-          .toRGB()
-      )
-      document.documentElement.style.setProperty(
-        '--ed-color-primary-light-3',
-        colorFunctions
-          .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 15 })
-          .toRGB()
-      )
-
-      document.documentElement.style.setProperty(
-        '--ed-color-primary-60',
-        colorFunctions
-          .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 60 })
-          .toRGB()
-      )
-
-      document.documentElement.style.setProperty(
-        '--ed-color-primary-80',
-        colorFunctions
-          .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 80 })
-          .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(
-        '--ed-color-primary-dark-2',
-        colorFunctions
-          .mix(new colorTree('000000'), new colorTree(currentColor.substr(1)), { value: 15 })
-          .toRGB()
-      )
-
+      setCurrentColor(currentColor)
       this.bg = data.bg
       this.login = data.login
       this.slogan = data.slogan
       this.web = data.web
       this.name = data.name
-      this.foot = data.foot
-      this.footContent = data.footContent
-      if (isDataEaseBi) return
       if (this.name) {
         document.title = this.name
         setTitle(this.name)

frontend/src/utils/utils.ts

@@ -1,5 +1,8 @@
 import dayjs from 'dayjs'
 import { useCache } from '@/utils/useCache'
+import colorFunctions from 'less/lib/less/functions/color.js'
+import colorTree from 'less/lib/less/tree/color.js'
+
 const { wsCache } = useCache()
 const getCheckDate = (timestamp: any) => {
   if (!timestamp) return false
@@ -103,3 +106,44 @@ export const isBtnShow = (val: string) => {
 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(
+    '--ed-color-primary-light-5',
+    colorFunctions
+      .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 40 })
+      .toRGB()
+  )
+  document.documentElement.style.setProperty(
+    '--ed-color-primary-light-3',
+    colorFunctions
+      .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 15 })
+      .toRGB()
+  )
+
+  document.documentElement.style.setProperty(
+    '--ed-color-primary-60',
+    colorFunctions
+      .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 60 })
+      .toRGB()
+  )
+
+  document.documentElement.style.setProperty(
+    '--ed-color-primary-80',
+    colorFunctions
+      .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 80 })
+      .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(
+    '--ed-color-primary-dark-2',
+    colorFunctions
+      .mix(new colorTree('000000'), new colorTree(currentColor.substr(1)), { value: 15 })
+      .toRGB()
+  )
+}

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

@@ -307,12 +307,7 @@ defineExpose({
           </div>
           <div class="position-set_input">
             <div class="x">
-              <el-input-number
-                v-model="sqlBotForm.x_val"
-                :min="0"
-                controls-position="right"
-                @change="handleChange"
-              >
+              <el-input-number v-model="sqlBotForm.x_val" :min="0" controls-position="right">
                 <template #prefix>
                   <el-select v-model="sqlBotForm.x_type" style="width: 51px">
                     <el-option
@@ -326,12 +321,7 @@ defineExpose({
               >px
             </div>
             <div class="y">
-              <el-input-number
-                v-model="sqlBotForm.y_val"
-                :min="0"
-                controls-position="right"
-                @change="handleChange"
-              >
+              <el-input-number v-model="sqlBotForm.y_val" :min="0" controls-position="right">
                 <template #prefix>
                   <el-select v-model="sqlBotForm.y_type" style="width: 51px">
                     <el-option