From fb19cc623467b35829a895c3cc507b8cb4427307 Mon Sep 17 00:00:00 2001 From: inter Date: Mon, 8 Sep 2025 16:36:33 +0800 Subject: [PATCH] Add File --- frontend/src/stores/appearance.ts | 321 ++++++++++++++++++++++++++++++ 1 file changed, 321 insertions(+) create mode 100644 frontend/src/stores/appearance.ts diff --git a/frontend/src/stores/appearance.ts b/frontend/src/stores/appearance.ts new file mode 100644 index 0000000..cfc9bd0 --- /dev/null +++ b/frontend/src/stores/appearance.ts @@ -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) +}