feat: 皮肤设置内容结果增加背景设置以及应用皮肤设置方法抽离

web/src/common/utils/applySkinConfig.ts

@@ -0,0 +1,21 @@
+export default function (skinConfig: any) {
+ const root = document.documentElement
+ const { themeConf, backgroundConf, contentConf } = skinConfig
+
+ if (themeConf?.color) {
+ // 设置主题颜色
+ root.style.setProperty('--primary-color', themeConf?.color)
+ }
+
+ // 设置背景
+ const { color, type, image } = backgroundConf || {}
+ root.style.setProperty(
+ '--primary-background',
+ type === 'image' ? `url(${image}) no-repeat center / cover` : color
+ )
+
+ if (contentConf?.opacity.toString()) {
+ // 设置全局透明度
+ root.style.setProperty('--opacity', `${contentConf.opacity / 100}`)
+ }
+}

web/src/management/pages/edit/index.vue

@@ -14,22 +14,34 @@
  </div>
 </template>
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
 import { useEditStore } from '@/management/stores/edit'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
+import applySkinConfig from '@/common/utils/applySkinConfig'
 
 import LeftMenu from '@/management/components/LeftMenu.vue'
 import CommonTemplate from './components/CommonTemplate.vue'
 import Navbar from './components/ModuleNavbar.vue'
 
 const editStore = useEditStore()
-const { init, setSurveyId } = editStore
+const { init, setSurveyId, schema } = editStore
 
 const router = useRouter()
 const route = useRoute()
 
+watch(
+ () => schema.skinConf,
+ (v) => {
+ applySkinConfig(v)
+ },
+ {
+ deep: true,
+ immediate: true
+ }
+)
+
 onMounted(async () => {
  const surveyId = route.params.id as string
  setSurveyId(surveyId)

web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue

@@ -32,7 +32,6 @@
  </div>
  <div
  :class="`preview-panel ${previewTab == 1 ? 'phone' : 'pc'}`"
- :style="[previewPanelBgStyle]"
  >
  <div class="wrapper">
  <div class="tips-wrapper">
@@ -55,27 +54,15 @@
  </div>
 </template>
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { useEditStore } from '@/management/stores/edit'
 
 const route = useRoute()
 
 const dialogTableVisible = ref(false)
 const previewTab = ref(1)
 const surveyId = route.params.id
 const loading = ref(true)
-const editStore = useEditStore()
-const { schema } = editStore
-
-const previewPanelBgStyle = computed(() => {
- const isPc = previewTab.value === 2
- if (!isPc) return {}
- const { type, image, color } = schema?.skinConf?.backgroundConf ?? {}
- return type === 'image'
- ? { background: `url(${image}) no-repeat center center`, backgroundSize: 'cover' }
- : { backgroundColor: color }
-})
 
 const openDialog = () => {
  const iframePreview = document.getElementById('iframe-preview')
@@ -142,6 +129,7 @@ const closedDialog = () => {
  justify-content: center;
  box-shadow: 0px 2px 10px -2px rgba(82, 82, 102, 0.2);
  height: 726px;
+ background: var(--primary-background);
  .wrapper {
  width: 100%;
  height: 100%;

web/src/management/pages/edit/modules/resultModule/PreviewPanel.vue

@@ -39,7 +39,7 @@ const moduleConfig = toRef(schema, 'submitConf')
  display: flex;
  flex-direction: column;
  align-items: center;
- background-color: #f6f7f9;
+ background: var(--primary-background);
 }
 
 .result-page-wrap {

web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue

@@ -73,25 +73,6 @@ export default defineComponent({
  pageEditOne
  }
  },
- watch: {
- skinConf: {
- handler(newVal) {
- const { themeConf, backgroundConf, contentConf } = newVal
- 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()) {
- root.style.setProperty('--opacity', contentConf?.opacity / 100) // 设置全局透明度
- }
- },
- immediate: true,
- deep: true
- }
- }
 })
 </script>
 
@@ -103,7 +84,7 @@ export default defineComponent({
  display: flex;
  flex-direction: column;
  align-items: center;
- background-color: #f6f7f9;
+ background: var(--primary-background);
 }
 
 .pagination-wrapper {

web/src/render/App.vue

@@ -6,33 +6,12 @@ import { watch } from 'vue'
 import { storeToRefs } from 'pinia'
 
 import { useSurveyStore } from './stores/survey'
+import applySkinConfig from '@/common/utils/applySkinConfig';
 
 const { skinConf } = storeToRefs(useSurveyStore())
 
-const updateSkinConfig = (value: any) => {
- const root = document.documentElement
- const { themeConf, backgroundConf, contentConf } = value
-
- if (themeConf?.color) {
- // 设置主题颜色
- root.style.setProperty('--primary-color', themeConf?.color)
- }
-
- // 设置背景
- const { color, type, image } = backgroundConf || {}
- root.style.setProperty(
- '--primary-background',
- type === 'image' ? `url(${image}) no-repeat center center` : color
- )
-
- if (contentConf?.opacity.toString()) {
- // 设置全局透明度
- root.style.setProperty('--opacity', `${parseInt(contentConf.opacity) / 100}`)
- }
-}
-
 watch(skinConf, (value) => {
- updateSkinConfig(value)
+ applySkinConfig(value)
 })
 </script>
 <style lang="scss">
@@ -61,7 +40,6 @@ html {
  body {
  padding-top: 40px;
  background: var(--primary-background);
- background-size: cover;
  }
  #app {
  border-radius: 8px 8px 0 0;