1404/11/01-add dynamic config
This commit is contained in:
+84
-67
@@ -2,101 +2,104 @@
|
||||
<div class="desktopConfig w-full right-0 left-0 absolute">
|
||||
<div v-if="popVisible" class="top-0 bottom-0 wrap-fix bg-primary z-100 opacity-60">
|
||||
<div class="absolute right-0 left-0 bottom-10vh flex flex-col items-center">
|
||||
<div><BasicButton>درباره ما</BasicButton></div>
|
||||
<div>
|
||||
<BasicButton>درباره ما</BasicButton>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<transition mode="out-in" name="fade">
|
||||
<AConfigProvider
|
||||
v-if="!showSplash"
|
||||
:theme="{
|
||||
token: {
|
||||
colorPrimary: colors.primary,
|
||||
colorLink: colors.primary,
|
||||
colorLinkActive: colors.primary,
|
||||
colorLinkHover: colors['primary-rgba']
|
||||
}
|
||||
}"
|
||||
<AConfigProvider
|
||||
v-if=" antTheme"
|
||||
:theme="antTheme"
|
||||
direction="rtl"
|
||||
>
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<!-- Use any custom transition and to `fade` -->
|
||||
<transition :name="route.meta.transition || 'fade'">
|
||||
<div>
|
||||
<component :is="Component" />
|
||||
</div>
|
||||
</transition>
|
||||
</router-view>
|
||||
</AConfigProvider>
|
||||
>
|
||||
<transition mode="out-in" name="fade">
|
||||
|
||||
<div v-else class="flex bottom-0 wrap-fix top-0 bg-white z-1000000000000 justify-center">
|
||||
<div class="top-0 wrap-fix h-1/3 w-screen flex">
|
||||
<img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover" />
|
||||
<img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
|
||||
</div>
|
||||
<div class="wrap-fix bottom-0 h-1/3 w-screen">
|
||||
<img
|
||||
:src="img_bottomGradiant"
|
||||
alt=""
|
||||
class="absolute z-10 w-screen h-full object-cover"
|
||||
/>
|
||||
<img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
|
||||
</div>
|
||||
<div class="self-center splash_appear_fade_in">
|
||||
<img :src="config?.config?.avatar" class="h-[20vh]">
|
||||
<div v-if="!showSplash">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<!-- Use any custom transition and to `fade` -->
|
||||
<transition :name="route.meta.transition || 'fade'">
|
||||
|
||||
<!-- <img :src="logoFull" class="h-[20vh]">-->
|
||||
<!-- <img :src="logo" alt="" class="z-100 bg-primary rounded-full w-full aspect-square self-center h-40" />-->
|
||||
<div>
|
||||
<component :is="Component"/>
|
||||
</div>
|
||||
</transition>
|
||||
</router-view>
|
||||
|
||||
</div>
|
||||
<div class="fixed w-full bottom-5 home_appear_fade_in_up">
|
||||
<div class="text-center text-xs">نسخه: {{ pkg.version }}</div>
|
||||
<div v-else class="flex bottom-0 wrap-fix top-0 bg-white z-1000000000000 justify-center">
|
||||
<div class="top-0 wrap-fix h-1/3 w-screen flex">
|
||||
<img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover"/>
|
||||
<img :src="img_pattern" alt="" class="absolute w-screen h-full object-none"/>
|
||||
</div>
|
||||
<div class="wrap-fix bottom-0 h-1/3 w-screen">
|
||||
<img
|
||||
:src="img_bottomGradiant"
|
||||
alt=""
|
||||
class="absolute z-10 w-screen h-full object-cover"
|
||||
/>
|
||||
<img :src="img_pattern" alt="" class="absolute w-screen h-full object-none"/>
|
||||
</div>
|
||||
<div class="self-center splash_appear_fade_in">
|
||||
<img :src="config?.config?.avatar" class="h-[20vh]">
|
||||
|
||||
<!-- <img :src="logoFull" class="h-[20vh]">-->
|
||||
<!-- <img :src="logo" alt="" class="z-100 bg-primary rounded-full w-full aspect-square self-center h-40" />-->
|
||||
|
||||
</div>
|
||||
<div class="fixed w-full bottom-5 home_appear_fade_in_up">
|
||||
<div class="text-center text-xs">نسخه: {{ pkg.version }}</div>
|
||||
</div>
|
||||
<div class="absolute bottom-10">
|
||||
<a-spin :indicator="indicator" size="small"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-10">
|
||||
<a-spin :indicator="indicator" size="small" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</transition>
|
||||
|
||||
</AConfigProvider>
|
||||
|
||||
|
||||
<van-dialog
|
||||
v-model:show="versionDialog"
|
||||
class="updateButton"
|
||||
confirm-button-text="به روزرسانی کنید"
|
||||
show-confirm-button
|
||||
@confirm="update()"
|
||||
v-model:show="versionDialog"
|
||||
class="updateButton"
|
||||
confirm-button-text="به روزرسانی کنید"
|
||||
show-confirm-button
|
||||
@confirm="update()"
|
||||
>
|
||||
<div class="flex flex-col items-center p-2">
|
||||
<DotLottieVue
|
||||
class="w-full aspect-square"
|
||||
autoplay
|
||||
loop
|
||||
src="https://lottie.host/cb620e8e-c64a-42e8-a6b5-8844146e5999/nmft7oBO8q.json"
|
||||
class="w-full aspect-square"
|
||||
autoplay
|
||||
loop
|
||||
src="https://lottie.host/cb620e8e-c64a-42e8-a6b5-8844146e5999/nmft7oBO8q.json"
|
||||
/>
|
||||
<div class="home_appear_fade_in_up mt-2">نسخه جدید گلد منتشر شد!</div>
|
||||
<div class="home_appear_fade_in_up mt-2">نسخه جدید }ککک منتشر شد!</div>
|
||||
</div>
|
||||
</van-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { colors } from './themeConfig'
|
||||
import {colors} from './themeConfig'
|
||||
import pkg from '../package.json'
|
||||
import { useRegisterSW } from 'virtual:pwa-register/vue'
|
||||
import { h, onMounted, ref } from 'vue'
|
||||
import { update } from 'lodash'
|
||||
import {useRegisterSW} from 'virtual:pwa-register/vue'
|
||||
import {computed, h, onMounted, ref} from 'vue'
|
||||
import {update} from 'lodash'
|
||||
import img_topGradiant from '@/views/login/assets/img/gr_top_white.svg'
|
||||
import img_pattern from '@/views/login/assets/img/pattern.svg'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue'
|
||||
import {LoadingOutlined} from '@ant-design/icons-vue'
|
||||
|
||||
import img_bottomGradiant from '@/views/login/assets/img/gr_bottom_white.svg'
|
||||
import logoFull from '@/assets/img/logo_full_.png'
|
||||
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
|
||||
import {DotLottieVue} from '@lottiefiles/dotlottie-vue'
|
||||
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
||||
import {getConfig} from "@/api/config";
|
||||
import {useConfigStore} from "@/store/configStore";
|
||||
import { ConfigProvider as AConfigProvider } from 'ant-design-vue'
|
||||
|
||||
const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW()
|
||||
const config=useConfigStore()
|
||||
const {offlineReady, needRefresh, updateServiceWorker} = useRegisterSW()
|
||||
const config = useConfigStore()
|
||||
const indicator = h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '24px'
|
||||
@@ -104,8 +107,22 @@ const indicator = h(LoadingOutlined, {
|
||||
spin: true
|
||||
})
|
||||
const showSplash = ref(true)
|
||||
|
||||
const antTheme = computed(() => {
|
||||
if (!config.config?.color) return null
|
||||
|
||||
return {
|
||||
token: {
|
||||
colorPrimary: "#ff0000",
|
||||
colorLink: config.config.color,
|
||||
colorLinkActive: config.config.color,
|
||||
colorLinkHover: config.config.color,
|
||||
},
|
||||
}
|
||||
})
|
||||
onMounted(async () => {
|
||||
await config.getConfigData()
|
||||
await config.getConfigData()
|
||||
console.log(config.config.color)
|
||||
checkVersion()
|
||||
setTimeout(() => {
|
||||
showSplash.value = false
|
||||
@@ -117,7 +134,7 @@ const versionDialog = ref<boolean>(false)
|
||||
function checkVersion() {
|
||||
const version = localStorage.getItem('version')
|
||||
// if (true) {
|
||||
if (!version){
|
||||
if (!version) {
|
||||
update()
|
||||
}
|
||||
if (version != pkg.version) {
|
||||
@@ -135,7 +152,7 @@ function update() {
|
||||
|
||||
<style lang="less">
|
||||
.updateButton .van-dialog__confirm .van-button__text {
|
||||
color: @primary-color !important;
|
||||
color: @App-primary-color !important;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user