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

web/src/render/App.vue

@@ -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,88 +26,82 @@ 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: {
-    EmptyPage,
-    IndexPage,
-    ErrorPage,
-    SuccessPage,
-    LogoIcon
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    skinConf() {
-      return _get(this.$store, 'state.skinConf', {})
-    }
-  },
-  watch: {
-    skinConf(value) {
-      this.setSkin(value)
-    }
-  },
-  async created() {
-    this.init()
-    this.alert = useCommandComponent(AlertDialog)
-  },
-  beforeCreate() {},
-  methods: {
-    async init() {
-      const surveyPath = location.pathname.split('/').pop()
-      if (!surveyPath) {
-        this.$store.commit('setRouter', 'EmptyPage')
-      } else {
-        try {
-          const res = 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,
-              bottomConf,
-              dataConf,
-              skinConf,
-              submitConf
-            }
-            this.setSkin(skinConf)
-            this.$store.commit('setSurveyPath', surveyPath)
-            this.$store.dispatch('init', questionData)
-            this.$store.dispatch('getEncryptInfo')
-          } else {
-            throw new Error(res.errmsg)
-          }
-        } catch (error) {
-          console.log(error)
-          this.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) // 设置全局透明度
-      }
-    }
+const store = useStore()
+const skinConf = computed(() => _get(store, 'state.skinConf', {}))
+const components = {
+  EmptyPage,
+  IndexPage,
+  ErrorPage,
+  SuccessPage
+}
+
+const updateSkinConfig = (value: any) => {
+  const root = document.documentElement
+  const { themeConf, backgroundConf, contentConf } = value
+
+  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()) {
+    // 设置全局透明度
+    root.style.setProperty('--opacity', `${parseInt(contentConf.opacity) / 100}`)
   }
 }
-</script>
 
+watch(skinConf, (value) => {
+  updateSkinConfig(value)
+})
+
+onMounted(async () => {
+  const surveyPath = location.pathname.split('/').pop()
+
+  if (!surveyPath) {
+    store.commit('setRouter', 'EmptyPage')
+    return
+  }
+
+  const alert = useCommandComponent(AlertDialog)
+
+  try {
+    const res: any = await getPublishedSurveyInfo({ surveyPath })
+
+    if (res.code === 200) {
+      const data = res.data
+      const { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf } = data.code
+      const questionData = {
+        bannerConf,
+        baseConf,
+        bottomConf,
+        dataConf,
+        skinConf,
+        submitConf
+      }
+
+      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: any) {
+    console.log(error)
+    alert({ title: error.message || '获取问卷失败' })
+  }
+})
+</script>
 <style lang="scss">
 @import url('./styles/icon.scss');
 @import url('../materials/questions/common/css/icon.scss');

web/src/render/main.js

@@ -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)