From a865539a74fc3e27cfea22e2a7e4cc6b0aa78731 Mon Sep 17 00:00:00 2001
From: jiangchunfu <jiangchunfu@kaike.la>
Date: Fri, 13 Sep 2024 15:03:46 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dwindows=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E6=96=87=E4=BB=B6=E8=B7=AF=E5=BE=84=E5=8F=8D=E6=96=9C?=
 =?UTF-8?q?=E6=9D=A0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/file/services/uploadHandlers/local.handler.ts  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/server/src/modules/file/services/uploadHandlers/local.handler.ts b/server/src/modules/file/services/uploadHandlers/local.handler.ts
index 122e7dcb..5c8b46d5 100644
--- a/server/src/modules/file/services/uploadHandlers/local.handler.ts
+++ b/server/src/modules/file/services/uploadHandlers/local.handler.ts
@@ -1,4 +1,4 @@
-import { join, dirname } from 'path';
+import { join, dirname, sep } from 'path';
 import fse from 'fs-extra';
 import { createWriteStream } from 'fs';
 import { FileUploadHandler } from './uploadHandler.interface';
@@ -18,7 +18,10 @@ export class LocalHandler implements FileUploadHandler {
     const filePath = join(
       options?.pathPrefix ? options?.pathPrefix : '',
       filename,
-    );
+    )
+      .split(sep)
+      .join('/');
+    console.log(filePath);
     const physicalPath = join(this.physicalRootPath, filePath);
     await fse.mkdir(dirname(physicalPath), { recursive: true });
     const writeStream = createWriteStream(physicalPath);

From 291c3595619d73ea79d4cf906ea439879e0ba4d2 Mon Sep 17 00:00:00 2001
From: jiangchunfu <jiangchunfu@kaike.la>
Date: Fri, 13 Sep 2024 15:16:36 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=A8=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E7=AB=AFskinConf=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/interfaces/survey.ts               | 11 ++++++++++
 .../__test/dataStatistic.controller.spec.ts   |  2 ++
 .../survey/__test/mockResponseSchema.ts       | 22 +++++++++++++++++++
 .../survey/__test/survey.controller.spec.ts   | 16 +++++++++++++-
 .../template/surveyTemplate/templateBase.json |  4 +++-
 .../__test/mockResponseSchema.ts              | 11 ++++++++++
 6 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/server/src/interfaces/survey.ts b/server/src/interfaces/survey.ts
index 1e68afcc..34f1659f 100644
--- a/server/src/interfaces/survey.ts
+++ b/server/src/interfaces/survey.ts
@@ -135,6 +135,17 @@ export interface BaseConf {
 export interface SkinConf {
   skinColor: string;
   inputBgColor: string;
+  backgroundConf: {
+    color: string;
+    type: string;
+    image: string;
+  };
+  contentConf: {
+    opacity: number;
+  };
+  themeConf: {
+    color: string;
+  };
 }
 
 export interface BottomConf {
diff --git a/server/src/modules/survey/__test/dataStatistic.controller.spec.ts b/server/src/modules/survey/__test/dataStatistic.controller.spec.ts
index 5b9b5d82..14a588ae 100644
--- a/server/src/modules/survey/__test/dataStatistic.controller.spec.ts
+++ b/server/src/modules/survey/__test/dataStatistic.controller.spec.ts
@@ -251,6 +251,8 @@ describe('DataStatisticController', () => {
           skinConf: {
             backgroundConf: {
               color: '#fff',
+              type: 'color',
+              image: '',
             },
             themeConf: {
               color: '#ffa600',
diff --git a/server/src/modules/survey/__test/mockResponseSchema.ts b/server/src/modules/survey/__test/mockResponseSchema.ts
index c0e44602..7adb3e0c 100644
--- a/server/src/modules/survey/__test/mockResponseSchema.ts
+++ b/server/src/modules/survey/__test/mockResponseSchema.ts
@@ -44,6 +44,17 @@ export const mockSensitiveResponseSchema: ResponseSchema = {
       logoImageWidth: '60%',
     },
     skinConf: {
+      backgroundConf: {
+        color: '#fff',
+        type: 'color',
+        image: '',
+      },
+      themeConf: {
+        color: '#ffa600',
+      },
+      contentConf: {
+        opacity: 100,
+      },
       skinColor: '#4a4c5b',
       inputBgColor: '#ffffff',
     },
@@ -327,6 +338,17 @@ export const mockResponseSchema: ResponseSchema = {
       logoImageWidth: '60%',
     },
     skinConf: {
+      backgroundConf: {
+        color: '#fff',
+        type: 'color',
+        image: '',
+      },
+      themeConf: {
+        color: '#ffa600',
+      },
+      contentConf: {
+        opacity: 100,
+      },
       skinColor: '#4a4c5b',
       inputBgColor: '#ffffff',
     },
diff --git a/server/src/modules/survey/__test/survey.controller.spec.ts b/server/src/modules/survey/__test/survey.controller.spec.ts
index a23f56d8..99b39f5d 100644
--- a/server/src/modules/survey/__test/survey.controller.spec.ts
+++ b/server/src/modules/survey/__test/survey.controller.spec.ts
@@ -172,7 +172,21 @@ describe('SurveyController', () => {
             endTime: '2034-01-23 21:59:05',
           },
           bottomConf: { logoImage: '/imgs/Logo.webp', logoImageWidth: '60%' },
-          skinConf: { skinColor: '#4a4c5b', inputBgColor: '#ffffff' },
+          skinConf: {
+            skinColor: '#4a4c5b',
+            inputBgColor: '#ffffff',
+            backgroundConf: {
+              color: '#fff',
+              type: 'color',
+              image: '',
+            },
+            themeConf: {
+              color: '#ffa600',
+            },
+            contentConf: {
+              opacity: 100,
+            },
+          },
           submitConf: {},
           dataConf: {
             dataList: [],
diff --git a/server/src/modules/survey/template/surveyTemplate/templateBase.json b/server/src/modules/survey/template/surveyTemplate/templateBase.json
index fd3e76e9..416a726a 100644
--- a/server/src/modules/survey/template/surveyTemplate/templateBase.json
+++ b/server/src/modules/survey/template/surveyTemplate/templateBase.json
@@ -40,7 +40,9 @@
     "skinColor": "#4a4c5b",
     "inputBgColor": "#ffffff",
     "backgroundConf": {
-      "color": "#ffffff"
+      "color": "#ffffff",
+      "type": "color",
+      "image": ""
     },
     "themeConf": {
       "color": "#ffa600"
diff --git a/server/src/modules/surveyResponse/__test/mockResponseSchema.ts b/server/src/modules/surveyResponse/__test/mockResponseSchema.ts
index bef78ad8..607de2a2 100644
--- a/server/src/modules/surveyResponse/__test/mockResponseSchema.ts
+++ b/server/src/modules/surveyResponse/__test/mockResponseSchema.ts
@@ -44,6 +44,17 @@ export const mockResponseSchema: ResponseSchema = {
       logoImageWidth: '60%',
     },
     skinConf: {
+      backgroundConf: {
+        color: '#fff',
+        type: 'color',
+        image: '',
+      },
+      themeConf: {
+        color: '#ffa600',
+      },
+      contentConf: {
+        opacity: 100,
+      },
       skinColor: '#4a4c5b',
       inputBgColor: '#ffffff',
     },

From 69ffdc5bc4e7b77ab744c74514a48e1fe434362c Mon Sep 17 00:00:00 2001
From: jiangchunfu <jiangchunfu@kaike.la>
Date: Fri, 13 Sep 2024 16:05:52 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20web=E7=AB=AF=E7=9A=AE=E8=82=A4?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=AE=BE=E7=BD=AE2.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/public/imgs/icons/upload.png              | Bin 0 -> 340 bytes
 .../modules/contentModule/PreviewPanel.vue    |  46 ++++++--
 .../modules/resultModule/PreviewPanel.vue     |   2 -
 .../edit/modules/skinModule/PreviewPanel.vue  |   3 -
 .../pages/edit/setterConfig/skinConfig.js     |  29 ++++-
 web/src/management/stores/edit.ts             |   2 +
 .../materials/setters/widgets/TabsSetter.vue  |  65 ++++++++++++
 .../setters/widgets/UploadSingleFile.vue      | 100 ++++++++++++++++++
 web/src/render/App.vue                        |  22 +++-
 web/src/render/pages/RenderPage.vue           |   2 -
 10 files changed, 253 insertions(+), 18 deletions(-)
 create mode 100644 web/public/imgs/icons/upload.png
 create mode 100644 web/src/materials/setters/widgets/TabsSetter.vue
 create mode 100644 web/src/materials/setters/widgets/UploadSingleFile.vue

diff --git a/web/public/imgs/icons/upload.png b/web/public/imgs/icons/upload.png
new file mode 100644
index 0000000000000000000000000000000000000000..950531ca151cd82f43ed4045af2e14c24a4ac6a2
GIT binary patch
literal 340
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|Tv8)E(|mmy
zw18|52FCVG1{RPKAeI7R1_tH@j10^`nh_+nfC(-uuz(rC1}QWNE&K$e_IbKEhFAzD
zCrD%*=s3-2oPI9l@7LL>svh%tzxr2HRsG7($=WEzaOuxy{?l4*|9SEfe0z9y--!Iz
zl4#6wm|;iSgmeFSt}kHAXw1lIGiVf55OkP*SmK{y4ZG&Q|MMT3b2Q&@IQ);{snWzL
zLTP?;Y_>DDd|Y{?fYI*gjVEjq87D70x3~3ZXMSUnLJyOg@62L$wF6Aa49=0F=h}=u
z6;D=Q-0k?I=afNV*I|Z-Ol)oClb4<O%WpiB;cs7qjqFm!mt77^HAGyGf_&uZ>gTe~
HDWM4fQt)pX

literal 0
HcmV?d00001

diff --git a/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue
index 0965dfce..4fb9b725 100644
--- a/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue
+++ b/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue
@@ -30,12 +30,15 @@
             <i-ep-monitor />
           </div>
         </div>
-        <div :class="`preview-panel ${previewTab == 1 ? 'phone' : 'pc'}`">
+        <div
+          :class="`preview-panel ${previewTab == 1 ? 'phone' : 'pc'}`"
+          :style="[previewPanelBgStyle]"
+        >
           <div class="wrapper">
             <div class="tips-wrapper">
               <i-ep-WarningFilled /> <span>用户预览模式，数据不保存！</span>
             </div>
-            <div v-loading="loading" element-loading-text="加载中..." style="height: 100%">
+            <div class="iframe-wrapper" v-loading="loading" element-loading-text="加载中...">
               <iframe
                 v-loading="loading"
                 id="iframe-preview"
@@ -52,8 +55,9 @@
   </div>
 </template>
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { useEditStore } from '@/management/stores/edit'
 
 const route = useRoute()
 
@@ -61,6 +65,17 @@ 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')
@@ -125,12 +140,27 @@ const closedDialog = () => {
     &.pc {
       display: flex;
       justify-content: center;
-      background: #f7f7f7;
       box-shadow: 0px 2px 10px -2px rgba(82, 82, 102, 0.2);
       height: 726px;
       .wrapper {
-        width: 636px;
-        height: 704px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .tips-wrapper {
+          justify-content: center;
+        }
+
+        .iframe-wrapper {
+          width: 636px;
+          flex: 1;
+          margin-top: 20px;
+          border-radius: 8px 8px 0 0;
+          overflow: hidden;
+        }
       }
     }
     &.phone {
@@ -148,6 +178,9 @@ const closedDialog = () => {
         padding-bottom: 14px;
         display: flex;
         flex-direction: column;
+        .iframe-wrapper {
+          height: 100%;
+        }
       }
       iframe {
         border-radius: 0px 0px 20px 20px;
@@ -156,6 +189,7 @@ const closedDialog = () => {
   }
   .tips-wrapper {
     display: flex;
+    width: 100%;
     align-items: center;
     background: $primary-bg-color;
     color: $primary-color;
diff --git a/web/src/management/pages/edit/modules/resultModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/resultModule/PreviewPanel.vue
index e6f09deb..69b9bb38 100644
--- a/web/src/management/pages/edit/modules/resultModule/PreviewPanel.vue
+++ b/web/src/management/pages/edit/modules/resultModule/PreviewPanel.vue
@@ -49,8 +49,6 @@ const moduleConfig = toRef(schema, 'submitConf')
   max-height: 812px;
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: var(--primary-background-color);
-  padding: 0 0.3rem;
   .result-page {
     background: rgba(255, 255, 255, var(--opacity));
     display: flex;
diff --git a/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue
index a90dfc03..a2bc3470 100644
--- a/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue
+++ b/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue
@@ -137,7 +137,6 @@ export default defineComponent({
   }
 
   .box {
-    background-color: var(--primary-background-color);
     position: relative;
 
     .mask {
@@ -150,9 +149,7 @@ export default defineComponent({
     }
 
     .content {
-      margin: 0 0.3rem;
       background: rgba(255, 255, 255, var(--opacity));
-      border-radius: 8px 8px 0 0;
     }
   }
 }
diff --git a/web/src/management/pages/edit/setterConfig/skinConfig.js b/web/src/management/pages/edit/setterConfig/skinConfig.js
index 9177466d..4fbec3c8 100644
--- a/web/src/management/pages/edit/setterConfig/skinConfig.js
+++ b/web/src/management/pages/edit/setterConfig/skinConfig.js
@@ -11,10 +11,37 @@ export default [
     name: '背景',
     key: 'skinConf.backgroundConf',
     formConfigList: [
+      {
+        type: 'TabsSetter',
+        key: 'type',
+        tabList: [
+          {
+            label: '图片(<5M)',
+            value: 'image',
+          },
+          {
+            label: '颜色',
+            value: 'color',
+          }
+        ]
+      },
+      {
+        label: '背景图片',
+        type: 'UploadSingleFile',
+        accept: "image/*",
+        limitSize: 5,// 单位MB
+        key: 'image',
+        relyFunc: (data) => {
+          return data.type === 'image'
+        }
+      },
       {
         label: '背景颜色',
         type: 'ColorPicker',
-        key: 'color'
+        key: 'color',
+        relyFunc: (data) => {
+          return data.type === 'color'
+        }
       }
     ]
   },
diff --git a/web/src/management/stores/edit.ts b/web/src/management/stores/edit.ts
index 6d19f76d..13719776 100644
--- a/web/src/management/stores/edit.ts
+++ b/web/src/management/stores/edit.ts
@@ -56,6 +56,8 @@ function useInitializeSchema(surveyId: Ref<string>, initializeSchemaCallBack: ()
     },
     skinConf: {
       backgroundConf: {
+        type: 'color',
+        image: '',
         color: '#fff'
       },
       themeConf: {
diff --git a/web/src/materials/setters/widgets/TabsSetter.vue b/web/src/materials/setters/widgets/TabsSetter.vue
new file mode 100644
index 00000000..b50c0d97
--- /dev/null
+++ b/web/src/materials/setters/widgets/TabsSetter.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="tabs-setter">
+    <div class="tabs-header">
+      <div
+        v-for="item in tabList"
+        :class="['tabs-header__item', { active: props.formConfig.value === item.value }]"
+        :key="item.value"
+        @click="handleTabClick(item)"
+      >
+        {{ item.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
+interface IProps {
+  formConfig: any
+}
+
+interface IEmit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
+}
+
+const props = defineProps<IProps>()
+const emit = defineEmits<IEmit>()
+
+const tabList = computed(() => {
+  return props.formConfig?.tabList || []
+})
+
+function handleTabClick(item: any) {
+  const key = props.formConfig.key
+
+  emit(FORM_CHANGE_EVENT_KEY, { key, value: item.value })
+}
+</script>
+
+<style lang="scss" scoped>
+.tabs-setter {
+  background: #f2f4f7;
+  border-radius: 4px;
+  width: 100%;
+  padding: 4px;
+
+  .tabs-header {
+    display: flex;
+    width: 100%;
+    &__item {
+      flex: 1;
+      line-height: 24px;
+      text-align: center;
+      cursor: pointer;
+
+      &.active {
+        background: #fff;
+      }
+    }
+  }
+}
+</style>
diff --git a/web/src/materials/setters/widgets/UploadSingleFile.vue b/web/src/materials/setters/widgets/UploadSingleFile.vue
new file mode 100644
index 00000000..2cbac721
--- /dev/null
+++ b/web/src/materials/setters/widgets/UploadSingleFile.vue
@@ -0,0 +1,100 @@
+<template>
+  <el-input size="small" v-model="inputValue">
+    <template #append>
+      <el-upload
+        ref="upload"
+        class="upload-img"
+        action="/api/file/upload"
+        :accept="formConfig.accept"
+        :limit="1"
+        :show-file-list="false"
+        :data="{ channel: 'upload' }"
+        :on-exceed="handleExceed"
+        :headers="{
+          Authorization: `Bearer ${token}`
+        }"
+        :before-upload="beforeAvatarUpload"
+        :on-success="onSuccess"
+      >
+        <img src="/imgs/icons/upload.png" alt="上传图标" />
+      </el-upload>
+    </template>
+  </el-input>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { ElMessage, genFileId } from 'element-plus'
+import { get as _get } from 'lodash-es'
+import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
+import { useUserStore } from '@/management/stores/user'
+
+const upload = ref<UploadInstance>()
+
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
+interface IProps {
+  formConfig: any
+}
+
+interface IEmit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: string }): void
+}
+
+const props = defineProps<IProps>()
+const emit = defineEmits<IEmit>()
+
+const userStore = useUserStore()
+const token = _get(userStore, 'userInfo.token')
+const inputValue = ref(props.formConfig.value)
+
+watch(inputValue, (newValue) => {
+  emit(FORM_CHANGE_EVENT_KEY, { key: props.formConfig.key, value: newValue })
+})
+
+watch(
+  () => props.formConfig.value,
+  (newValue) => {
+    inputValue.value = newValue
+  }
+)
+
+const handleExceed: UploadProps['onExceed'] = (files) => {
+  upload.value!.clearFiles()
+  const file = files[0] as UploadRawFile
+  file.uid = genFileId()
+  upload.value!.handleStart(file)
+}
+
+function onSuccess(response: any) {
+  if (response?.data?.url) {
+    const key = props.formConfig.key
+    emit(FORM_CHANGE_EVENT_KEY, { key, value: response.data.url })
+  }
+}
+
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  const { limitSize } = props.formConfig
+  if (limitSize) {
+    if (rawFile.size / 1024 / 1024 > limitSize) {
+      ElMessage.error(`图片大小不得超过 ${limitSize}MB!`)
+      return false
+    }
+  }
+
+  return true
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-input-group__append) {
+  padding: 0;
+  box-sizing: border-box;
+  .upload-img {
+    .el-upload {
+      width: 80px;
+      height: 32px;
+    }
+  }
+}
+</style>
diff --git a/web/src/render/App.vue b/web/src/render/App.vue
index 28416b75..c180f50d 100644
--- a/web/src/render/App.vue
+++ b/web/src/render/App.vue
@@ -18,10 +18,12 @@ const updateSkinConfig = (value: any) => {
     root.style.setProperty('--primary-color', themeConf?.color)
   }
 
-  if (backgroundConf?.color) {
-    // 设置背景颜色
-    root.style.setProperty('--primary-background-color', backgroundConf?.color)
-  }
+  // 设置背景
+  const { color, type, image } = backgroundConf || {}
+  root.style.setProperty(
+    '--primary-background',
+    type === 'image' ? `url(${image}) no-repeat center center` : color
+  )
 
   if (contentConf?.opacity.toString()) {
     // 设置全局透明度
@@ -54,4 +56,16 @@ html {
   flex: 1;
   background-color: #fff;
 }
+
+@media screen and (min-width: 750px) {
+  body {
+    padding-top: 40px;
+    background: var(--primary-background);
+    background-size: cover;
+  }
+  #app {
+    border-radius: 8px 8px 0 0;
+    box-shadow: var(--el-box-shadow);
+  }
+}
 </style>
diff --git a/web/src/render/pages/RenderPage.vue b/web/src/render/pages/RenderPage.vue
index 97f45c68..bad96457 100644
--- a/web/src/render/pages/RenderPage.vue
+++ b/web/src/render/pages/RenderPage.vue
@@ -156,13 +156,11 @@ const handleSubmit = () => {
 
   .wrapper {
     min-height: 100%;
-    background-color: var(--primary-background-color);
     display: flex;
     flex-direction: column;
 
     .content {
       flex: 1;
-      margin: 0 0.3rem;
       background: rgba(255, 255, 255, var(--opacity));
       border-radius: 8px 8px 0 0;
       height: 100%;

From 794abdc07d75b44d6750066d7f9c972b3ca15199 Mon Sep 17 00:00:00 2001
From: jiangchunfu <jiangchunfu@kaike.la>
Date: Fri, 13 Sep 2024 16:08:18 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E5=88=A0=E9=99=A4console.log?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/src/modules/file/services/uploadHandlers/local.handler.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/server/src/modules/file/services/uploadHandlers/local.handler.ts b/server/src/modules/file/services/uploadHandlers/local.handler.ts
index 5c8b46d5..b760c920 100644
--- a/server/src/modules/file/services/uploadHandlers/local.handler.ts
+++ b/server/src/modules/file/services/uploadHandlers/local.handler.ts
@@ -21,7 +21,6 @@ export class LocalHandler implements FileUploadHandler {
     )
       .split(sep)
       .join('/');
-    console.log(filePath);
     const physicalPath = join(this.physicalRootPath, filePath);
     await fse.mkdir(dirname(physicalPath), { recursive: true });
     const writeStream = createWriteStream(physicalPath);

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 5/5] =?UTF-8?q?feat:=20=E7=9A=AE=E8=82=A4=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=86=85=E5=AE=B9=E7=BB=93=E6=9E=9C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=AE=BE=E7=BD=AE=E4=BB=A5=E5=8F=8A=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E7=9A=AE=E8=82=A4=E8=AE=BE=E7=BD=AE=E6=96=B9=E6=B3=95?=
 =?UTF-8?q?=E6=8A=BD=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;