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