From 8282f98d3412c48a1608ae75682bfeafc8b8f0e3 Mon Sep 17 00:00:00 2001
From: jiangchunfu <mrj_kevin@163.com>
Date: Mon, 23 Sep 2024 19:05:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9A=AE=E8=82=A4=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E7=BB=93=E6=9E=9C=E5=A2=9E=E5=8A=A0=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E8=AE=BE=E7=BD=AE=E4=BB=A5=E5=8F=8A=E5=BA=94=E7=94=A8?=
 =?UTF-8?q?=E7=9A=AE=E8=82=A4=E8=AE=BE=E7=BD=AE=E6=96=B9=E6=B3=95=E6=8A=BD?=
 =?UTF-8?q?=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/common/utils/applySkinConfig.ts       | 21 +++++++++++++++
 web/src/management/pages/edit/index.vue       | 16 ++++++++++--
 .../modules/contentModule/PreviewPanel.vue    | 16 ++----------
 .../modules/resultModule/PreviewPanel.vue     |  2 +-
 .../edit/modules/skinModule/PreviewPanel.vue  | 21 +--------------
 web/src/render/App.vue                        | 26 ++-----------------
 6 files changed, 41 insertions(+), 61 deletions(-)
 create mode 100644 web/src/common/utils/applySkinConfig.ts

diff --git a/web/src/common/utils/applySkinConfig.ts b/web/src/common/utils/applySkinConfig.ts
new file mode 100644
index 00000000..1d489d17
--- /dev/null
+++ b/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}`)
+  }
+}
diff --git a/web/src/management/pages/edit/index.vue b/web/src/management/pages/edit/index.vue
index 704e0593..6f5425fa 100644
--- a/web/src/management/pages/edit/index.vue
+++ b/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)
diff --git a/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue
index 4fb9b725..371f7bbf 100644
--- a/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue
+++ b/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,9 +54,8 @@
   </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()
 
@@ -65,17 +63,6 @@ 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%;
diff --git a/web/src/management/pages/edit/modules/resultModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/resultModule/PreviewPanel.vue
index 69b9bb38..767f0953 100644
--- a/web/src/management/pages/edit/modules/resultModule/PreviewPanel.vue
+++ b/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 {
diff --git a/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue
index a2bc3470..d3552cd7 100644
--- a/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue
+++ b/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 {
diff --git a/web/src/render/App.vue b/web/src/render/App.vue
index c180f50d..5108916c 100644
--- a/web/src/render/App.vue
+++ b/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;