refactor: 重构 render/App.vue, 使用 Vue3 组合式 API 写法 (#117)

This commit is contained in:
alwayrun 2024-05-17 11:48:51 +08:00 committed by GitHub
parent be5d48fa71
commit 318020ead7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 85 additions and 82 deletions

View File

@ -1,11 +1,21 @@
<template>
<div id="app">
<Component v-if="$store.state.router" :is="$store.state.router"></Component>
<LogoIcon v-if="!['successPage', 'indexPage'].includes($store.state.router)" />
<Component
v-if="store.state.router"
:is="
components[
upperFirst(store.state.router) as 'IndexPage' | 'EmptyPage' | 'ErrorPage' | 'SuccessPage'
]
"
>
</Component>
<LogoIcon v-if="!['successPage', 'indexPage'].includes(store.state.router)" />
</div>
</template>
<script setup lang="ts">
import { computed, watch, onMounted } from 'vue'
import { useStore } from 'vuex'
<script>
import { getPublishedSurveyInfo } from './api/survey'
import useCommandComponent from './hooks/useCommandComponent'
@ -16,47 +26,57 @@ import SuccessPage from './pages/SuccessPage.vue'
import AlertDialog from './components/AlertDialog.vue'
import LogoIcon from './components/LogoIcon.vue'
import { get as _get } from 'lodash-es'
import { get as _get, upperFirst } from 'lodash-es'
export default {
name: 'App',
components: {
const store = useStore()
const skinConf = computed(() => _get(store, 'state.skinConf', {}))
const components = {
EmptyPage,
IndexPage,
ErrorPage,
SuccessPage,
LogoIcon
},
data() {
return {}
},
computed: {
skinConf() {
return _get(this.$store, 'state.skinConf', {})
SuccessPage
}
const updateSkinConfig = (value: any) => {
const root = document.documentElement
const { themeConf, backgroundConf, contentConf } = value
if (themeConf?.color) {
//
root.style.setProperty('--primary-color', themeConf?.color)
}
},
watch: {
skinConf(value) {
this.setSkin(value)
if (backgroundConf?.color) {
//
root.style.setProperty('--primary-background-color', backgroundConf?.color)
}
},
async created() {
this.init()
this.alert = useCommandComponent(AlertDialog)
},
beforeCreate() {},
methods: {
async init() {
if (contentConf?.opacity.toString()) {
//
root.style.setProperty('--opacity', `${parseInt(contentConf.opacity) / 100}`)
}
}
watch(skinConf, (value) => {
updateSkinConfig(value)
})
onMounted(async () => {
const surveyPath = location.pathname.split('/').pop()
if (!surveyPath) {
this.$store.commit('setRouter', 'EmptyPage')
} else {
store.commit('setRouter', 'EmptyPage')
return
}
const alert = useCommandComponent(AlertDialog)
try {
const res = await getPublishedSurveyInfo({ surveyPath })
const res: any = await getPublishedSurveyInfo({ surveyPath })
if (res.code === 200) {
const data = res.data
const { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf } = data.code
document.title = data.title
const questionData = {
bannerConf,
baseConf,
@ -65,39 +85,23 @@ export default {
skinConf,
submitConf
}
this.setSkin(skinConf)
this.$store.commit('setSurveyPath', surveyPath)
this.$store.dispatch('init', questionData)
this.$store.dispatch('getEncryptInfo')
document.title = data.title
updateSkinConfig(skinConf)
store.commit('setSurveyPath', surveyPath)
store.dispatch('init', questionData)
store.dispatch('getEncryptInfo')
} else {
throw new Error(res.errmsg)
}
} catch (error) {
} catch (error: any) {
console.log(error)
this.alert({
title: error.message || '获取问卷失败'
})
alert({ title: error.message || '获取问卷失败' })
}
}
},
setSkin(skinConf) {
const { themeConf, backgroundConf, contentConf } = skinConf
const root = document.documentElement
if (themeConf?.color) {
root.style.setProperty('--primary-color', themeConf?.color) //
}
if (backgroundConf?.color) {
root.style.setProperty('--primary-background-color', backgroundConf?.color) //
}
if (contentConf?.opacity.toString()) {
console.log({ opacity: contentConf?.opacity / 100 })
root.style.setProperty('--opacity', contentConf?.opacity / 100) //
}
}
}
}
})
</script>
<style lang="scss">
@import url('./styles/icon.scss');
@import url('../materials/questions/common/css/icon.scss');

View File

@ -3,7 +3,6 @@ import App from './App.vue'
import EventBus from './utils/eventbus'
import store from './store'
import './styles/reset.scss'
const app = createApp(App)