Add File
This commit is contained in:
321
frontend/src/stores/appearance.ts
Normal file
321
frontend/src/stores/appearance.ts
Normal file
@@ -0,0 +1,321 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { store } from '@/stores/index'
|
||||
// import { defaultFont, list } from '@/api/font'
|
||||
import { request } from '@/utils/request'
|
||||
|
||||
import { setTitle, setCurrentColor } from '@/utils/utils'
|
||||
|
||||
const basePath = import.meta.env.VITE_API_BASE_URL
|
||||
const baseUrl = basePath + '/system/appearance/picture/'
|
||||
import { isBtnShow } from '@/utils/utils'
|
||||
import type { LinkHTMLAttributes } from 'vue'
|
||||
interface AppearanceState {
|
||||
themeColor?: string
|
||||
customColor?: string
|
||||
navigateBg?: string
|
||||
navigate?: string
|
||||
mobileLogin?: string
|
||||
mobileLoginBg?: string
|
||||
help?: string
|
||||
showAi?: string
|
||||
showCopilot?: string
|
||||
showDoc?: string
|
||||
showAbout?: string
|
||||
bg?: string
|
||||
login?: string
|
||||
slogan?: string
|
||||
web?: string
|
||||
name?: string
|
||||
foot?: string
|
||||
showSlogan?: string
|
||||
footContent?: string
|
||||
loaded: boolean
|
||||
showDemoTips?: boolean
|
||||
demoTipsContent?: string
|
||||
fontList?: Array<{ name: string; id: string; isDefault: boolean }>
|
||||
}
|
||||
|
||||
interface KeyValue {
|
||||
pkey: string
|
||||
pval: string
|
||||
}
|
||||
// const { wsCache } = useCache()
|
||||
export const useAppearanceStore = defineStore('appearanceStore', {
|
||||
state: (): AppearanceState => {
|
||||
return {
|
||||
themeColor: '',
|
||||
customColor: '',
|
||||
navigateBg: '',
|
||||
navigate: '',
|
||||
mobileLogin: '',
|
||||
mobileLoginBg: '',
|
||||
help: '',
|
||||
showDoc: '0',
|
||||
showSlogan: '0',
|
||||
showAi: '0',
|
||||
showCopilot: '0',
|
||||
showAbout: '0',
|
||||
bg: '',
|
||||
login: '',
|
||||
slogan: '',
|
||||
web: '',
|
||||
name: '',
|
||||
foot: 'false',
|
||||
footContent: '',
|
||||
loaded: false,
|
||||
showDemoTips: false,
|
||||
demoTipsContent: '',
|
||||
fontList: [],
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
getNavigate(): string {
|
||||
if (this.navigate) {
|
||||
return baseUrl + this.navigate
|
||||
}
|
||||
return null!
|
||||
},
|
||||
getMobileLogin(): string {
|
||||
if (this.mobileLogin) {
|
||||
return baseUrl + this.mobileLogin
|
||||
}
|
||||
return null!
|
||||
},
|
||||
getMobileLoginBg(): string {
|
||||
if (this.mobileLoginBg) {
|
||||
return baseUrl + this.mobileLoginBg
|
||||
}
|
||||
return null!
|
||||
},
|
||||
getHelp(): string {
|
||||
return this.help!
|
||||
},
|
||||
getThemeColor(): string {
|
||||
return this.themeColor!
|
||||
},
|
||||
isBlue(): boolean {
|
||||
return this.themeColor! === 'blue'
|
||||
},
|
||||
getCustomColor(): string {
|
||||
return this.customColor!
|
||||
},
|
||||
getNavigateBg(): string {
|
||||
return this.navigateBg!
|
||||
},
|
||||
getBg(): string {
|
||||
if (this.bg) {
|
||||
return baseUrl + this.bg
|
||||
}
|
||||
return null!
|
||||
},
|
||||
getLogin(): string {
|
||||
if (this.login) {
|
||||
return baseUrl + this.login
|
||||
}
|
||||
return null!
|
||||
},
|
||||
getSlogan(): string {
|
||||
return this.slogan!
|
||||
},
|
||||
getWeb(): string {
|
||||
if (this.web) {
|
||||
return baseUrl + this.web
|
||||
}
|
||||
return null!
|
||||
},
|
||||
getName(): string {
|
||||
return this.name!
|
||||
},
|
||||
getLoaded(): boolean {
|
||||
return this.loaded
|
||||
},
|
||||
getFoot(): string {
|
||||
return this.foot!
|
||||
},
|
||||
getFootContent(): string {
|
||||
return this.footContent!
|
||||
},
|
||||
getShowDemoTips(): boolean {
|
||||
return this.showDemoTips!
|
||||
},
|
||||
getDemoTipsContent(): string {
|
||||
return this.demoTipsContent!
|
||||
},
|
||||
getShowAi(): boolean {
|
||||
return isBtnShow(this.showAi!)
|
||||
},
|
||||
getShowCopilot(): boolean {
|
||||
return isBtnShow(this.showCopilot!)
|
||||
},
|
||||
getShowSlogan(): boolean {
|
||||
return isBtnShow(this.showSlogan!)
|
||||
},
|
||||
getShowDoc(): boolean {
|
||||
return isBtnShow(this.showDoc!)
|
||||
},
|
||||
getShowAbout(): boolean {
|
||||
return isBtnShow(this.showAbout!)
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
setNavigate(data: string) {
|
||||
this.navigate = data
|
||||
},
|
||||
setMobileLogin(data: string) {
|
||||
this.mobileLogin = data
|
||||
},
|
||||
// async setFontList() {
|
||||
// const res = await list()
|
||||
// this.fontList = res || []
|
||||
// },
|
||||
// setCurrentFont(name) {
|
||||
// const currentFont = this.fontList.find(ele => ele.name === name)
|
||||
// if (currentFont) {
|
||||
// let fontStyleElement = document.querySelector(`#de-custom_font${name}`)
|
||||
// if (!fontStyleElement) {
|
||||
// fontStyleElement = document.createElement('style')
|
||||
// fontStyleElement.setAttribute('id', `de-custom_font${name}`)
|
||||
// document.querySelector('head').appendChild(fontStyleElement)
|
||||
// }
|
||||
// fontStyleElement.innerHTML = `@font-face {
|
||||
// font-family: '${name}';
|
||||
// src: url(${
|
||||
// embeddedStore.baseUrl
|
||||
// ? (embeddedStore.baseUrl + basePath).replace('/./', '/')
|
||||
// : basePath
|
||||
// }/typeface/download/${currentFont.fileTransName});
|
||||
// font-weight: normal;
|
||||
// font-style: normal;
|
||||
// }`
|
||||
// }
|
||||
// },
|
||||
setMobileLoginBg(data: string) {
|
||||
this.mobileLoginBg = data
|
||||
},
|
||||
setHelp(data: string) {
|
||||
this.help = data
|
||||
},
|
||||
setNavigateBg(data: string) {
|
||||
this.navigateBg = data
|
||||
},
|
||||
setThemeColor(data: string) {
|
||||
this.themeColor = data
|
||||
},
|
||||
setCustomColor(data: string) {
|
||||
this.customColor = data
|
||||
},
|
||||
setLoaded(data: boolean) {
|
||||
this.loaded = data
|
||||
},
|
||||
async setAppearance() {
|
||||
// const desktop = wsCache.get('app.desktop')
|
||||
// if (desktop) {
|
||||
// this.loaded = true
|
||||
// this.community = true
|
||||
// }
|
||||
if (this.loaded) {
|
||||
return
|
||||
}
|
||||
// defaultFont().then(res => {
|
||||
// const [font] = res || []
|
||||
// setDefaultFont(
|
||||
// `${
|
||||
// embeddedStore.baseUrl
|
||||
// ? (embeddedStore.baseUrl + basePath).replace('/./', '/')
|
||||
// : basePath
|
||||
// }/typeface/download/${font?.fileTransName}`,
|
||||
// font?.name,
|
||||
// font?.fileTransName
|
||||
// )
|
||||
// function setDefaultFont(url, name, fileTransName) {
|
||||
// let fontStyleElement = document.querySelector('#de-custom_font')
|
||||
// if (!fontStyleElement) {
|
||||
// fontStyleElement = document.createElement('style')
|
||||
// fontStyleElement.setAttribute('id', 'de-custom_font')
|
||||
// document.querySelector('head').appendChild(fontStyleElement)
|
||||
// }
|
||||
// fontStyleElement.innerHTML =
|
||||
// name && fileTransName
|
||||
// ? `@font-face {
|
||||
// font-family: '${name}';
|
||||
// src: url(${url});
|
||||
// font-weight: normal;
|
||||
// font-style: normal;
|
||||
// }`
|
||||
// : ''
|
||||
// document.documentElement.style.setProperty('--de-custom_font', `${name}`)
|
||||
// document.documentElement.style.setProperty('--van-base-font', `${name}`)
|
||||
// }
|
||||
// })
|
||||
// if (!isDataEaseBi) {
|
||||
// document.title = ''
|
||||
// }
|
||||
const obj = LicenseGenerator.getLicense()
|
||||
if (obj?.status !== 'valid') {
|
||||
setCurrentColor('#1CBA90')
|
||||
document.title = 'SQLBot'
|
||||
setLinkIcon()
|
||||
return
|
||||
}
|
||||
const resData = await request.get('/system/appearance/ui')
|
||||
this.loaded = true
|
||||
if (!resData?.length) {
|
||||
setCurrentColor('#1CBA90')
|
||||
setLinkIcon()
|
||||
return
|
||||
}
|
||||
const data: AppearanceState = { loaded: false }
|
||||
resData.forEach((item: KeyValue) => {
|
||||
;(
|
||||
data as {
|
||||
[key: string]: any
|
||||
}
|
||||
)[item.pkey] = item.pval
|
||||
})
|
||||
|
||||
this.navigate = data.navigate
|
||||
this.help = data.help
|
||||
this.showDoc = data.showDoc
|
||||
this.showAbout = data.showAbout
|
||||
this.navigateBg = data.navigateBg
|
||||
this.themeColor = data.themeColor
|
||||
this.customColor = data.customColor
|
||||
const currentColor =
|
||||
this.themeColor === 'custom' && this.customColor
|
||||
? this.customColor
|
||||
: this.isBlue
|
||||
? '#3370ff'
|
||||
: '#1CBA90'
|
||||
setCurrentColor(currentColor)
|
||||
this.bg = data.bg
|
||||
this.login = data.login
|
||||
this.slogan = data.slogan
|
||||
this.showSlogan = data.showSlogan
|
||||
this.web = data.web
|
||||
this.name = data.name
|
||||
if (this.name) {
|
||||
document.title = this.name
|
||||
setTitle(this.name)
|
||||
} else {
|
||||
document.title = 'SQLBot'
|
||||
setTitle('SQLBot')
|
||||
}
|
||||
setLinkIcon(this.web)
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const setLinkIcon = (linkWeb?: string) => {
|
||||
const link = document.querySelector('link[rel="icon"]') as LinkHTMLAttributes
|
||||
if (link) {
|
||||
if (linkWeb) {
|
||||
link['href'] = baseUrl + linkWeb
|
||||
} else {
|
||||
link['href'] = '/LOGO-fold.svg'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const useAppearanceStoreWithOut = () => {
|
||||
return useAppearanceStore(store)
|
||||
}
|
||||
Reference in New Issue
Block a user