From 75d52afdf840eef849491a2917e13bc8ec0a6c53 Mon Sep 17 00:00:00 2001
From: chaorenluo <1243357953@qq.com>
Date: Fri, 17 May 2024 21:01:24 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=E6=8A=BD=E7=A6=BBB=EF=BC=8CC=E7=AB=AF?=
 =?UTF-8?q?=E9=80=9A=E7=94=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../materials/communals/common/utils/index.js | 11 +++
 web/src/materials/communals/communalLoader.js | 10 ++
 .../HeaderContent/Components/HeaderBanner.jsx | 87 +++++++++++++++++
 .../HeaderContent/Components/HeaderVideo.jsx  | 63 +++++++++++++
 .../communals/widgets/HeaderContent/index.jsx | 43 +++++++++
 .../widgets/HeaderContent/index.scss          | 69 ++++++++++++++
 .../communals/widgets/LogoIcon/index.jsx      | 93 +++++++++++++++++++
 .../communals/widgets/LogoIcon/index.scss     | 43 +++++++++
 .../communals/widgets/MainTitle/index.jsx     | 91 ++++++++++++++++++
 .../communals/widgets/MainTitle/index.scss    | 62 +++++++++++++
 .../communals/widgets/SubmitButton/index.jsx  | 54 +++++++++++
 .../communals/widgets/SubmitButton/index.scss | 26 ++++++
 web/src/materials/setters/widgets/Header.vue  | 29 ++++++
 13 files changed, 681 insertions(+)
 create mode 100644 web/src/materials/communals/common/utils/index.js
 create mode 100644 web/src/materials/communals/communalLoader.js
 create mode 100644 web/src/materials/communals/widgets/HeaderContent/Components/HeaderBanner.jsx
 create mode 100644 web/src/materials/communals/widgets/HeaderContent/Components/HeaderVideo.jsx
 create mode 100644 web/src/materials/communals/widgets/HeaderContent/index.jsx
 create mode 100644 web/src/materials/communals/widgets/HeaderContent/index.scss
 create mode 100644 web/src/materials/communals/widgets/LogoIcon/index.jsx
 create mode 100644 web/src/materials/communals/widgets/LogoIcon/index.scss
 create mode 100644 web/src/materials/communals/widgets/MainTitle/index.jsx
 create mode 100644 web/src/materials/communals/widgets/MainTitle/index.scss
 create mode 100644 web/src/materials/communals/widgets/SubmitButton/index.jsx
 create mode 100644 web/src/materials/communals/widgets/SubmitButton/index.scss
 create mode 100644 web/src/materials/setters/widgets/Header.vue

diff --git a/web/src/materials/communals/common/utils/index.js b/web/src/materials/communals/common/utils/index.js
new file mode 100644
index 00000000..83858f35
--- /dev/null
+++ b/web/src/materials/communals/common/utils/index.js
@@ -0,0 +1,11 @@
+// 对链接做一个兼容转换，支持用户不配置http开头或者配置 // 开头
+export const formatLink = (url) => {
+  url = url.trim()
+  if (!url) {
+    return url
+  }
+  if (url.startsWith('http') || url.startsWith('//')) {
+    return url
+  }
+  return `http://${url}`
+}
\ No newline at end of file
diff --git a/web/src/materials/communals/communalLoader.js b/web/src/materials/communals/communalLoader.js
new file mode 100644
index 00000000..c22f1321
--- /dev/null
+++ b/web/src/materials/communals/communalLoader.js
@@ -0,0 +1,10 @@
+import ComponentLoader from '@/materials/utils/componentLoader'
+export class CommunalLoader extends ComponentLoader {
+  dynamicImport(path) {
+    return import(`./widgets/${path}.vue`)
+  }
+}
+
+const communalLoader = new CommunalLoader()
+
+export default communalLoader
diff --git a/web/src/materials/communals/widgets/HeaderContent/Components/HeaderBanner.jsx b/web/src/materials/communals/widgets/HeaderContent/Components/HeaderBanner.jsx
new file mode 100644
index 00000000..34f1e401
--- /dev/null
+++ b/web/src/materials/communals/widgets/HeaderContent/Components/HeaderBanner.jsx
@@ -0,0 +1,87 @@
+import { defineComponent, onMounted, computed } from 'vue'
+import { get as _get } from 'lodash-es'
+import { formatLink } from '@materials/communals/common/utils'
+
+export default defineComponent({
+  name: 'HeaderContent',
+  props: {
+    bannerConf: {
+      type: Object,
+      default: () => {}
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    isSelected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) { 
+
+    const bgImage = computed(() => {
+      return _get(props.bannerConf, 'bannerConfig.bgImage', '')
+    })
+
+    const onBannerClick = () => {
+      const allow = _get(props.bannerConf, 'bannerConfig.bgImageAllowJump', false)
+      const jumpLink = _get(props.bannerConf, 'bannerConfig.bgImageJumpLink', '')
+      if (!allow || !jumpLink) {
+        return
+      }
+      window.open(formatLink(jumpLink))
+    }
+
+    const emptyBannerRender = () => {
+      if(!bgImage.value && props.readonly) {
+        let classStr = 'empty-banner';
+        if (props.isSelected) {
+          classStr += 'banner-active'
+        } 
+        return (
+          <div class={classStr}>
+            <p>点击配置头图</p>
+            <p>若不配置头图，将不在问卷中展示</p>
+          </div>
+        )
+      }
+      return ''
+    }
+
+    const bannerRender = () => {
+      let attribute = {
+        class:'banner-img'
+      }
+      if (!props.readonly) {
+        const allow = _get(props.bannerConf, 'bannerConfig.bgImageAllowJump', false)
+        attribute = {
+          class: `${attribute.class}  ${allow ? 'pointer' : ''}`,
+          onClick:onBannerClick
+        }
+      }
+      if (bgImage.value) {
+        return (
+          <div class="banner">
+            <img src={bgImage.value} {...attribute} />
+          </div>
+        )
+      }
+      return '';
+    }
+    
+    return {
+      bgImage,
+      emptyBannerRender,
+      bannerRender
+    }
+  },
+  render() {
+    return (
+      <div class="header-banner-wrap">
+        {this.bannerRender()}
+        {this.emptyBannerRender()}
+      </div>
+    )
+  }
+})
\ No newline at end of file
diff --git a/web/src/materials/communals/widgets/HeaderContent/Components/HeaderVideo.jsx b/web/src/materials/communals/widgets/HeaderContent/Components/HeaderVideo.jsx
new file mode 100644
index 00000000..c5a01525
--- /dev/null
+++ b/web/src/materials/communals/widgets/HeaderContent/Components/HeaderVideo.jsx
@@ -0,0 +1,63 @@
+import { defineComponent, computed } from 'vue'
+
+
+export default defineComponent({
+  name: 'HeaderVideo',
+  props: {
+    bannerConf: {
+      type: Object,
+      default: () => {}
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) { 
+
+    const attributeVideo = computed(() => { 
+      const { bannerConf,readonly} = props;
+      let data = {
+        id:'video',
+        preload: 'auto',
+        style: readonly ? '' : 'margin: 0 auto; width: 100%; display: block;',
+        poster: readonly ? bannerConf?.bannerConfigpostImg : bannerConf?.bannerConfig?.postImg,
+        controls: '',
+        class:readonly ? 'custom-video' : ''
+      }
+      return data;
+    })
+
+    const play = () => {
+      const video = document.getElementById('video');
+      if(!video) return;
+      document.querySelector('.play-icon').style.display = 'none'
+      document.querySelector('.video-modal').style.display = 'none'
+      video.play()
+    }
+
+    return {
+      attributeVideo,
+      play
+    }
+  },
+  render() {
+    return (
+      <div class="header-video-warp">
+        <div class="video">
+          <video {...this.attributeVideo}>
+            <source src={ this.bannerConf?.bannerConfig?.videoLink} type="video/mp4" />
+          </video>
+          {
+            !this.readonly ? (
+              <>
+                <div class="video-modal" style={`background-image:url(${this.attributeVideo.poster})` }></div>
+                <div class="iconfont icon-kaishi play-icon" onClick={this.play}></div>
+              </>
+            ) : ''
+          }
+        </div>
+      </div>
+    )
+  }
+})
\ No newline at end of file
diff --git a/web/src/materials/communals/widgets/HeaderContent/index.jsx b/web/src/materials/communals/widgets/HeaderContent/index.jsx
new file mode 100644
index 00000000..3d29b8c7
--- /dev/null
+++ b/web/src/materials/communals/widgets/HeaderContent/index.jsx
@@ -0,0 +1,43 @@
+import { defineComponent } from 'vue'
+import './index.scss';
+import HeaderBanner from './Components/HeaderBanner';
+import HeaderVideo from './Components/HeaderVideo';
+
+export default defineComponent({
+  name: 'HeaderContent',
+  props: {
+    bannerConf: {
+      type: Object,
+      default: () => {}
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    isSelected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits:['select'],
+  setup(props, { emit }) { 
+    const handleClick = () => {
+      if (!props.readonly) return;
+      emit('select')
+    }
+
+    return {
+      handleClick,
+      props
+    }
+  },
+  render() {
+    const bannerConf = this.props.bannerConf;
+    return (
+      <div class="header-content-warp" onClick={this.handleClick}>
+        <HeaderBanner {...this.props} />
+        {bannerConf?.bannerConfig?.videoLink ? <HeaderVideo {...this.props}/> : ''}
+      </div>
+    )
+  }
+})
\ No newline at end of file
diff --git a/web/src/materials/communals/widgets/HeaderContent/index.scss b/web/src/materials/communals/widgets/HeaderContent/index.scss
new file mode 100644
index 00000000..75f9631c
--- /dev/null
+++ b/web/src/materials/communals/widgets/HeaderContent/index.scss
@@ -0,0 +1,69 @@
+.header-content-warp{
+  width: 100%;
+  .header-banner-wrap{
+    .banner {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    } 
+    .banner-img {
+      width: 100%;
+      &.pointer {
+        cursor: pointer;
+      }
+    }
+    .empty-banner {
+      height: 120px;
+      border: 1px dashed #e3e4e8;
+  
+      p {
+        text-align: center;
+        color: #c8c9cd;
+        font-size: 16px;
+        &:first-child {
+          font-size: 24px;
+          color: #92949d;
+          margin: 20px 0 24px 0;
+        }
+      }
+  
+      &.banner-active {
+        background-color: #f2f4f7;
+        box-shadow: 0 0 5px #e3e4e8;
+      }
+    }
+  }
+  .header-video-warp{
+    .video {
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+    .video-modal {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+      z-index: 100;
+    }
+    .play-icon {
+      position: absolute;
+      background-repeat: no-repeat;
+      background-position: center;
+      font-size: 1.8rem;
+      left: 50%;
+      top: 49%;
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+      z-index: 101;
+    }
+    .custom-video {
+      margin: 0 auto;
+      width: 100%;
+      display: block;
+    }
+  }
+}
\ No newline at end of file
diff --git a/web/src/materials/communals/widgets/LogoIcon/index.jsx b/web/src/materials/communals/widgets/LogoIcon/index.jsx
new file mode 100644
index 00000000..7221272b
--- /dev/null
+++ b/web/src/materials/communals/widgets/LogoIcon/index.jsx
@@ -0,0 +1,93 @@
+import { defineComponent,computed } from 'vue'
+import './index.scss';
+import { useStore } from 'vuex'
+
+export default defineComponent({
+  name: 'LogoIcon',
+  props: {
+    logoConf: {
+      type: Object,
+      default: () => ({
+        logoImageWidth: Number,
+        logoImage:String
+      })
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits:['select'],
+  setup(props,{emit}) { 
+
+    const store = useStore()
+
+    const logoImage = computed(() => { 
+      return props.logoConf?.logoImage;
+    })
+
+    const logoImageWidth = computed(() => { 
+      return props.logoConf?.logoImageWidth;
+    })
+
+    const isMobile = computed(() => {
+      return store.state?.isMobile
+    })
+
+    const logoStyle = computed(() => {
+      let style = {};
+      if (props.readonly) {
+        style = {
+          width: logoImageWidth.value
+        }
+      } else {
+        style={
+          width: !isMobile.value ? '20%' : logoImageWidth.value || '20%'  
+        }
+      }
+      return style
+    })
+
+    const onSelect = () => {
+      if (!props.readonly) return;
+      emit('select')
+    }
+
+    const noLogoRender = () => { 
+      if (!logoImage.value && props.readonly) {
+        return (
+          <div class="logo-placeholder-wrapper">
+            <div class="logo-placeholder">LOGO</div>
+            <div class="no-logo-tip">若不配置logo，该图片将不会在问卷中展示</div>
+          </div>
+        )
+      }
+      return ''
+    }
+
+    return {
+      logoImage,
+      logoImageWidth,
+      logoStyle,
+      props,
+      onSelect,
+      noLogoRender
+    }
+
+  },
+  render() {
+    const { readonly } = this.props;
+    return (
+      <div class="logo-icon-warp" onClick={this.onSelect}>
+        <div class={[readonly ? 'question-logo' : 'logo-wrapper']}>
+          {this.logoImage
+            ?
+              <img src={this.logoImage} style={this.logoStyle} />
+            :
+            this.noLogoRender()
+          }
+        </div>
+      </div>
+    )
+  }
+})
\ No newline at end of file
diff --git a/web/src/materials/communals/widgets/LogoIcon/index.scss b/web/src/materials/communals/widgets/LogoIcon/index.scss
new file mode 100644
index 00000000..068fa496
--- /dev/null
+++ b/web/src/materials/communals/widgets/LogoIcon/index.scss
@@ -0,0 +1,43 @@
+.logo-icon-warp{
+  display: flex;
+  justify-content: center;
+  .logo-wrapper {
+    text-align: center;
+    font-size: 0;
+    padding: 0.1rem 0 0.5rem;
+  }
+  .question-logo {
+    max-width: 300px;
+    text-align: center;
+    padding: 0 0 0.6rem;
+    margin-top: -0.2rem;
+    cursor: pointer;
+  }
+  .logo-placeholder-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  
+    .logo-placeholder {
+      width: 200px;
+      height: 50px;
+      font-size: 40px;
+      color: #d8d8d8;
+      letter-spacing: 0;
+      line-height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px dashed #d8d8d8;
+    }
+  
+    .no-logo-tip {
+      font-size: 13px;
+      line-height: 13px;
+      opacity: 0.5;
+      margin-top: 13px;
+      color: #92949d;
+    }
+  }
+}
\ No newline at end of file
diff --git a/web/src/materials/communals/widgets/MainTitle/index.jsx b/web/src/materials/communals/widgets/MainTitle/index.jsx
new file mode 100644
index 00000000..03c35117
--- /dev/null
+++ b/web/src/materials/communals/widgets/MainTitle/index.jsx
@@ -0,0 +1,91 @@
+import { defineComponent,computed } from 'vue'
+import RichEditor from '@/common/Editor/RichEditor.vue'
+import '@/render/styles/variable.scss';
+import './index.scss';
+
+export default defineComponent({
+  name: 'HeaderContent',
+  props: {
+    bannerConf: {
+      type: Object,
+      default: () => {}
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    isSelected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits:['select'],
+  setup(props, { emit }) { 
+
+    const titleClass = computed(() => {
+      let classStr = '';
+      if (props.readonly) {
+        classStr = `main-title ${props.isSelected ? 'active' : ''}`;
+      } else {
+        classStr = 'titlePanel';
+        
+      }
+      return classStr
+    });
+
+    const isTitleHide = computed(() => { 
+      if (!props.readonly && !mainTitle.value) {
+        return false
+      }
+      return true;
+    })
+
+    const mainTitle = computed(() => { 
+      return props.bannerConf.titleConfig?.mainTitle
+    })
+
+    const handleClick = () => {
+      if (!props.readonly) return;
+      emit('select')
+    }
+
+    const onTitleInput = (val) => {
+      if (!props.isSelected) {
+        return
+      }
+      emit('change', {
+        key: 'titleConfig.mainTitle',
+        value: val
+      })
+    }
+
+    return {
+      props,
+      titleClass,
+      isTitleHide,
+      mainTitle,
+      handleClick,
+      onTitleInput,
+    }
+  },
+  render() {
+    return (
+      <div class={['main-title-warp', this.props.readonly ? 'pd15' : '']} onClick={this.handleClick}>
+        {this.isTitleHide ? 
+          <div class={this.titleClass}>
+            {this.props.readonly ?
+              <RichEditor 
+                modelValue={this.mainTitle}
+                onInput={this.onTitleInput}
+                placeholder="请输入标题"
+              />
+            :
+              <div class="main-title" v-html={this.mainTitle}></div>
+            }
+          </div>
+        :
+        ''}
+      </div>
+    )
+  }
+})
\ No newline at end of file
diff --git a/web/src/materials/communals/widgets/MainTitle/index.scss b/web/src/materials/communals/widgets/MainTitle/index.scss
new file mode 100644
index 00000000..33794c3b
--- /dev/null
+++ b/web/src/materials/communals/widgets/MainTitle/index.scss
@@ -0,0 +1,62 @@
+.main-title-warp{
+  .mainTitle {
+    font-size: 0.28rem;
+    line-height: 0.4rem;
+    color: $title-color;
+  
+    ol {
+      list-style: decimal;
+    }
+  
+    ul {
+      list-style: disc;
+    }
+  
+    img {
+      width: 100%;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      line-height: 0.6rem;
+      color: $title-color-deep;
+      margin-bottom: 0.35rem;
+    }
+    p {
+      margin-bottom: 0;
+    }
+  }
+  .title-wrapper {
+    padding: 15px;
+  }
+  .main-title {
+    border: 1px solid transparent;
+  
+    &.active {
+      border: 1px solid #e3e4e6;
+      background-color: #f6f7f9;
+      box-shadow: 0 0 5px #dedede;
+  
+      :deep(.w-e-text-container) {
+        background-color: #f6f7f9;
+      }
+    }
+  }
+  
+  .main-title:hover {
+    border: 1px dashed #eee;
+  }
+  &.pd15{
+    padding: 15px;
+  }
+  .titlePanel {
+    position: relative;
+    width: 100%;
+    padding: 0.4rem 0.4rem;
+    box-sizing: border-box;
+  }
+}
\ No newline at end of file
diff --git a/web/src/materials/communals/widgets/SubmitButton/index.jsx b/web/src/materials/communals/widgets/SubmitButton/index.jsx
new file mode 100644
index 00000000..e2cfae7b
--- /dev/null
+++ b/web/src/materials/communals/widgets/SubmitButton/index.jsx
@@ -0,0 +1,54 @@
+import { defineComponent } from 'vue'
+import '@/render/styles/variable.scss';
+import './index.scss';
+
+export default defineComponent({
+  name: 'SubmitButton',
+  props: {
+    submitConf: Object,
+    isSelected: Boolean,
+    skinConf: {
+      type: Object,
+      required: true
+    },
+    readonly: Boolean,
+    validate: Function,
+    renderData: Array
+  },
+  emits: ['submit','select'],
+  setup(props, { emit }) {
+    
+    const submit = (e) => {
+      if (props.readonly) return;
+      const validate = props.validate
+      if (e) {
+        e.preventDefault()
+        validate((valid) => {
+          if (valid) {
+            this.$emit('submit')
+          }
+        })
+      }
+    }
+
+    const handleClick = () => {
+      if (!props.readonly) return;
+      emit('select')
+    }
+
+    return {
+      props,
+      submit,
+      handleClick
+    }
+
+  },
+  render() {
+    const { readonly,submitConf } = this.props;
+    return (
+      <div class={ ['submit-warp',readonly ? 'preview-submit_wrapper' : 'question-submit_wrapper']} onClick={ this.handleClick }>
+        <el-button class="submit-btn" type="primary" onClick={this.submit}>{ submitConf.submitTitle }</el-button>
+      </div>
+    )
+  }
+})
\ No newline at end of file
diff --git a/web/src/materials/communals/widgets/SubmitButton/index.scss b/web/src/materials/communals/widgets/SubmitButton/index.scss
new file mode 100644
index 00000000..0b2c9cb1
--- /dev/null
+++ b/web/src/materials/communals/widgets/SubmitButton/index.scss
@@ -0,0 +1,26 @@
+.submit-warp{
+  &.question-submit_wrapper{
+    margin: 0 0.4rem;
+    font-size: 0;
+    position: relative;
+  }
+  &.preview-submit_wrapper{
+    padding: 25px;
+    text-align: center;
+  }
+  .submit-btn {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    padding: 0.25rem 0;
+    font-size: 0.36rem;
+    line-height: 0.5rem;
+    font-weight: 500;
+    text-align: center;
+    color: #fff;
+    background: var(--primary-color);
+    border-radius: 0.08rem;
+    margin: 0.4rem 0;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/web/src/materials/setters/widgets/Header.vue b/web/src/materials/setters/widgets/Header.vue
new file mode 100644
index 00000000..f26082ce
--- /dev/null
+++ b/web/src/materials/setters/widgets/Header.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="header-wrap">
+
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex'
+
+const store = useStore()
+// store.state.
+
+// const bgImage = computed(() => {
+  
+// })
+
+</script>
+<style lang="scss" scoped>
+.header-wrap {
+  width: 100%;
+  .header-setter{
+
+  }
+  .banner{
+
+  }
+
+}
+</style>
\ No newline at end of file

From cdff32477c00abcad027488db3dc16c7743520bd Mon Sep 17 00:00:00 2001
From: chaorenluo <1243357953@qq.com>
Date: Fri, 24 May 2024 09:16:03 +0800
Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20=E9=80=9A=E7=94=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=BB=9F=E4=B8=80=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HeaderContent/Components/HeaderBanner.jsx | 48 ++++++++++++-------
 .../HeaderContent/Components/HeaderVideo.jsx  | 10 ++--
 .../communals/widgets/HeaderContent/index.jsx |  8 ++--
 .../communals/widgets/LogoIcon/index.jsx      |  7 ++-
 .../communals/widgets/MainTitle/index.jsx     |  8 ++--
 .../communals/widgets/SubmitButton/index.jsx  |  7 ++-
 web/src/render/pages/IndexPage.vue            |  3 +-
 7 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/web/src/materials/communals/widgets/HeaderContent/Components/HeaderBanner.jsx b/web/src/materials/communals/widgets/HeaderContent/Components/HeaderBanner.jsx
index 34f1e401..cccd6f24 100644
--- a/web/src/materials/communals/widgets/HeaderContent/Components/HeaderBanner.jsx
+++ b/web/src/materials/communals/widgets/HeaderContent/Components/HeaderBanner.jsx
@@ -33,27 +33,27 @@ export default defineComponent({
       window.open(formatLink(jumpLink))
     }
 
-    const emptyBannerRender = () => {
-      if(!bgImage.value && props.readonly) {
-        let classStr = 'empty-banner';
-        if (props.isSelected) {
-          classStr += 'banner-active'
-        } 
-        return (
-          <div class={classStr}>
-            <p>点击配置头图</p>
-            <p>若不配置头图，将不在问卷中展示</p>
-          </div>
-        )
-      }
-      return ''
-    }
+    // const emptyBannerRender = () => {
+    //   if(!bgImage.value && !props.readonly) {
+    //     let classStr = 'empty-banner';
+    //     if (props.isSelected) {
+    //       classStr += 'banner-active'
+    //     } 
+    //     return (
+    //       <div class={classStr}>
+    //         <p>点击配置头图</p>
+    //         <p>若不配置头图，将不在问卷中展示</p>
+    //       </div>
+    //     )
+    //   }
+    //   return ''
+    // }
 
     const bannerRender = () => {
       let attribute = {
         class:'banner-img'
       }
-      if (!props.readonly) {
+      if (props.readonly) {
         const allow = _get(props.bannerConf, 'bannerConfig.bgImageAllowJump', false)
         attribute = {
           class: `${attribute.class}  ${allow ? 'pointer' : ''}`,
@@ -67,12 +67,24 @@ export default defineComponent({
           </div>
         )
       }
+      if(!bgImage.value && !props.readonly) {
+        let classStr = 'empty-banner';
+        if (props.isSelected) {
+          classStr += 'banner-active'
+        } 
+        return (
+          <div class={classStr}>
+            <p>点击配置头图</p>
+            <p>若不配置头图，将不在问卷中展示</p>
+          </div>
+        )
+      }
       return '';
     }
     
     return {
       bgImage,
-      emptyBannerRender,
+      // emptyBannerRender,
       bannerRender
     }
   },
@@ -80,7 +92,7 @@ export default defineComponent({
     return (
       <div class="header-banner-wrap">
         {this.bannerRender()}
-        {this.emptyBannerRender()}
+        {/* {this.emptyBannerRender()} */}
       </div>
     )
   }
diff --git a/web/src/materials/communals/widgets/HeaderContent/Components/HeaderVideo.jsx b/web/src/materials/communals/widgets/HeaderContent/Components/HeaderVideo.jsx
index c5a01525..3c9105dd 100644
--- a/web/src/materials/communals/widgets/HeaderContent/Components/HeaderVideo.jsx
+++ b/web/src/materials/communals/widgets/HeaderContent/Components/HeaderVideo.jsx
@@ -20,10 +20,10 @@ export default defineComponent({
       let data = {
         id:'video',
         preload: 'auto',
-        style: readonly ? '' : 'margin: 0 auto; width: 100%; display: block;',
-        poster: readonly ? bannerConf?.bannerConfigpostImg : bannerConf?.bannerConfig?.postImg,
+        style: readonly ? 'margin: 0 auto; width: 100%; display: block;' : '' ,
+        poster:   bannerConf?.bannerConfig?.postImg,
         controls: '',
-        class:readonly ? 'custom-video' : ''
+        class:readonly ?  '' : 'custom-video' 
       }
       return data;
     })
@@ -38,10 +38,12 @@ export default defineComponent({
 
     return {
       attributeVideo,
+      props,
       play
     }
   },
   render() {
+    const { readonly } = this.props;
     return (
       <div class="header-video-warp">
         <div class="video">
@@ -49,7 +51,7 @@ export default defineComponent({
             <source src={ this.bannerConf?.bannerConfig?.videoLink} type="video/mp4" />
           </video>
           {
-            !this.readonly ? (
+            readonly ? (
               <>
                 <div class="video-modal" style={`background-image:url(${this.attributeVideo.poster})` }></div>
                 <div class="iconfont icon-kaishi play-icon" onClick={this.play}></div>
diff --git a/web/src/materials/communals/widgets/HeaderContent/index.jsx b/web/src/materials/communals/widgets/HeaderContent/index.jsx
index 3d29b8c7..e3e6118c 100644
--- a/web/src/materials/communals/widgets/HeaderContent/index.jsx
+++ b/web/src/materials/communals/widgets/HeaderContent/index.jsx
@@ -22,7 +22,7 @@ export default defineComponent({
   emits:['select'],
   setup(props, { emit }) { 
     const handleClick = () => {
-      if (!props.readonly) return;
+      if (props.readonly) return;
       emit('select')
     }
 
@@ -32,11 +32,11 @@ export default defineComponent({
     }
   },
   render() {
-    const bannerConf = this.props.bannerConf;
+    const { bannerConf,readonly,isSelected} = this.props;
     return (
       <div class="header-content-warp" onClick={this.handleClick}>
-        <HeaderBanner {...this.props} />
-        {bannerConf?.bannerConfig?.videoLink ? <HeaderVideo {...this.props}/> : ''}
+        <HeaderBanner bannerConf={bannerConf} readonly={readonly} isSelected={isSelected} />
+        {bannerConf?.bannerConfig?.videoLink ? <HeaderVideo bannerConf={bannerConf} readonly={readonly} /> : ''}
       </div>
     )
   }
diff --git a/web/src/materials/communals/widgets/LogoIcon/index.jsx b/web/src/materials/communals/widgets/LogoIcon/index.jsx
index 7221272b..b308aa4d 100644
--- a/web/src/materials/communals/widgets/LogoIcon/index.jsx
+++ b/web/src/materials/communals/widgets/LogoIcon/index.jsx
@@ -49,12 +49,12 @@ export default defineComponent({
     })
 
     const onSelect = () => {
-      if (!props.readonly) return;
+      if (props.readonly) return;
       emit('select')
     }
 
     const noLogoRender = () => { 
-      if (!logoImage.value && props.readonly) {
+      if ( !props.readonly) {
         return (
           <div class="logo-placeholder-wrapper">
             <div class="logo-placeholder">LOGO</div>
@@ -62,7 +62,6 @@ export default defineComponent({
           </div>
         )
       }
-      return ''
     }
 
     return {
@@ -79,7 +78,7 @@ export default defineComponent({
     const { readonly } = this.props;
     return (
       <div class="logo-icon-warp" onClick={this.onSelect}>
-        <div class={[readonly ? 'question-logo' : 'logo-wrapper']}>
+        <div class={[readonly ? 'logo-wrapper' : 'question-logo']}>
           {this.logoImage
             ?
               <img src={this.logoImage} style={this.logoStyle} />
diff --git a/web/src/materials/communals/widgets/MainTitle/index.jsx b/web/src/materials/communals/widgets/MainTitle/index.jsx
index 03c35117..808ebcaf 100644
--- a/web/src/materials/communals/widgets/MainTitle/index.jsx
+++ b/web/src/materials/communals/widgets/MainTitle/index.jsx
@@ -24,7 +24,7 @@ export default defineComponent({
 
     const titleClass = computed(() => {
       let classStr = '';
-      if (props.readonly) {
+      if (!props.readonly) {
         classStr = `main-title ${props.isSelected ? 'active' : ''}`;
       } else {
         classStr = 'titlePanel';
@@ -34,7 +34,7 @@ export default defineComponent({
     });
 
     const isTitleHide = computed(() => { 
-      if (!props.readonly && !mainTitle.value) {
+      if (props.readonly && !mainTitle.value) {
         return false
       }
       return true;
@@ -45,7 +45,7 @@ export default defineComponent({
     })
 
     const handleClick = () => {
-      if (!props.readonly) return;
+      if (props.readonly) return;
       emit('select')
     }
 
@@ -73,7 +73,7 @@ export default defineComponent({
       <div class={['main-title-warp', this.props.readonly ? 'pd15' : '']} onClick={this.handleClick}>
         {this.isTitleHide ? 
           <div class={this.titleClass}>
-            {this.props.readonly ?
+            {!this.props.readonly ?
               <RichEditor 
                 modelValue={this.mainTitle}
                 onInput={this.onTitleInput}
diff --git a/web/src/materials/communals/widgets/SubmitButton/index.jsx b/web/src/materials/communals/widgets/SubmitButton/index.jsx
index e2cfae7b..8cc53b38 100644
--- a/web/src/materials/communals/widgets/SubmitButton/index.jsx
+++ b/web/src/materials/communals/widgets/SubmitButton/index.jsx
@@ -6,7 +6,6 @@ export default defineComponent({
   name: 'SubmitButton',
   props: {
     submitConf: Object,
-    isSelected: Boolean,
     skinConf: {
       type: Object,
       required: true
@@ -19,7 +18,7 @@ export default defineComponent({
   setup(props, { emit }) {
     
     const submit = (e) => {
-      if (props.readonly) return;
+      if (!props.readonly) return;
       const validate = props.validate
       if (e) {
         e.preventDefault()
@@ -32,7 +31,7 @@ export default defineComponent({
     }
 
     const handleClick = () => {
-      if (!props.readonly) return;
+      if (props.readonly) return;
       emit('select')
     }
 
@@ -46,7 +45,7 @@ export default defineComponent({
   render() {
     const { readonly,submitConf } = this.props;
     return (
-      <div class={ ['submit-warp',readonly ? 'preview-submit_wrapper' : 'question-submit_wrapper']} onClick={ this.handleClick }>
+      <div class={ ['submit-warp',readonly ? 'question-submit_wrapper' : 'preview-submit_wrapper']} onClick={ this.handleClick }>
         <el-button class="submit-btn" type="primary" onClick={this.submit}>{ submitConf.submitTitle }</el-button>
       </div>
     )
diff --git a/web/src/render/pages/IndexPage.vue b/web/src/render/pages/IndexPage.vue
index 784f10f5..98e914a9 100644
--- a/web/src/render/pages/IndexPage.vue
+++ b/web/src/render/pages/IndexPage.vue
@@ -2,7 +2,7 @@
   <div class="index">
     <progressBar />
     <div class="wrapper" ref="boxRef">
-      <HeaderSetter></HeaderSetter>
+      <HeaderContent :bannerConf="" />
       <div class="content">
         <MainTitle></MainTitle>
         <MainRenderer ref="mainRef"></MainRenderer>
@@ -17,6 +17,7 @@ import { computed, ref } from 'vue'
 import { useStore } from 'vuex'
 
 import HeaderSetter from '../components/HeaderSetter.vue'
+import HeaderContent from '@materials/communals/widgets/HeaderContent/index.jsx'
 import MainTitle from '../components/MainTitle.vue'
 import submit from '../components/SubmitSetter.vue'
 import MainRenderer from '../components/MainRenderer.vue'

From 813952fda0e7c3463179b3de53ab66cb79558b77 Mon Sep 17 00:00:00 2001
From: chaorenluo <1243357953@qq.com>
Date: Fri, 24 May 2024 17:31:39 +0800
Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20=E6=9B=BF=E6=8D=A2=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E6=B8=B2=E6=9F=93=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/questionModule/PreviewPanel.vue   | 217 ++++++++----------
 .../settingModule/skin/PreviewPanel.vue       | 107 ++++-----
 .../materials/communals/common/utils/index.js |   2 +-
 web/src/materials/communals/communalLoader.js |   9 +
 .../HeaderContent/Components/HeaderBanner.jsx |  37 +--
 .../HeaderContent/Components/HeaderVideo.jsx  |  49 ++--
 .../communals/widgets/HeaderContent/index.jsx |  22 +-
 .../widgets/HeaderContent/index.scss          |  14 +-
 .../communals/widgets/LogoIcon/index.jsx      |  47 ++--
 .../communals/widgets/LogoIcon/index.scss     |   8 +-
 .../communals/widgets/MainTitle/index.jsx     |  56 ++---
 .../communals/widgets/MainTitle/index.scss    |  18 +-
 .../communals/widgets/SubmitButton/index.jsx  |  29 +--
 .../communals/widgets/SubmitButton/index.scss |   9 +-
 web/src/materials/setters/widgets/Header.vue  |  29 ---
 web/src/render/hooks/useShowInput.js          |   1 -
 web/src/render/pages/IndexPage.vue            |  40 ++--
 17 files changed, 316 insertions(+), 378 deletions(-)
 delete mode 100644 web/src/materials/setters/widgets/Header.vue

diff --git a/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue
index e4dfa24d..f297aff6 100644
--- a/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue
+++ b/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue
@@ -4,6 +4,7 @@
       <div class="box content" ref="box">
         <MainTitle
           :bannerConf="bannerConf"
+          :readonly="false"
           :is-selected="currentEditOne === 'mainTitle'"
           @select="onSelectEditOne('mainTitle')"
           @change="handleChange"
@@ -18,6 +19,7 @@
         />
         <SubmitButton
           :submit-conf="submitConf"
+          :readonly="false"
           :skin-conf="skinConf"
           :is-selected="currentEditOne === 'submit'"
           @select="onSelectEditOne('submit')"
@@ -27,139 +29,107 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref, watch } from 'vue'
+import communalLoader from '@materials/communals/communalLoader.js'
 import MaterialGroup from '@/management/pages/edit/components/MaterialGroup.vue'
-import MainTitle from '@/management/pages/edit/components/MainTitle.vue'
-import SubmitButton from '@/management/pages/edit/components/SubmitButton.vue'
-import { mapState, mapGetters } from 'vuex'
-import { get as _get } from 'lodash-es'
+import { useStore } from 'vuex'
 
-export default {
-  name: 'PreviewPanel',
-  components: {
-    MainTitle,
-    SubmitButton,
-    MaterialGroup
-  },
-  data() {
-    return {
-      isAnimating: false
-    }
-  },
-  computed: {
-    ...mapState({
-      bannerConf: (state) => _get(state, 'edit.schema.bannerConf'),
-      submitConf: (state) => _get(state, 'edit.schema.submitConf'),
-      skinConf: (state) => _get(state, 'edit.schema.skinConf'),
-      bottomConf: (state) => _get(state, 'edit.schema.bottomConf'),
-      questionDataList: (state) => _get(state, 'edit.schema.questionDataList'),
-      currentEditOne: (state) => _get(state, 'edit.currentEditOne')
-    }),
-    ...mapGetters({
-      currentEditKey: 'edit/currentEditKey'
-    }),
-    autoScrollData() {
-      return {
-        currentEditOne: this.currentEditOne,
-        len: this.questionDataList.length
-      }
-    }
-  },
-  watch: {
-    skinConf: {
-      handler(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) {
-          root.style.setProperty('--opacity', contentConf?.opacity / 100) // 设置全局透明度
-        }
-      },
-      immediate: true, // 立即触发回调函数
-      deep: true
-    },
-    autoScrollData(newVal) {
-      const { currentEditOne } = newVal
-      if (typeof currentEditOne === 'number') {
-        setTimeout(() => {
-          const field = this.questionDataList?.[currentEditOne]?.field
-          if (field) {
-            const questionModule = this.$refs.materialGroup.getQuestionRefByField(field)
-            if (questionModule && questionModule.$el) {
-              questionModule.$el.scrollIntoView({
-                behavior: 'smooth'
-              })
-            }
-          }
-        }, 0)
-      }
-    }
-  },
-  methods: {
-    animate(dom, property, targetValue) {
-      const origin = dom[property]
-      const subVal = targetValue - origin
+const MainTitle = communalLoader.defineAsyncComponent('MainTitle')
+const SubmitButton = communalLoader.defineAsyncComponent('SubmitButton')
 
-      const flag = subVal < 0 ? -1 : 1
+const store = useStore()
+const mainOperation = ref(null)
+const materialGroup = ref(null)
 
-      const step = flag * 50
+const bannerConf = computed(() => store.state.edit.schema.bannerConf)
+const submitConf = computed(() => store.state.edit.schema.submitConf)
+const skinConf = computed(() => store.state.edit.schema.skinConf)
+const questionDataList = computed(() => store.state.edit.schema.questionDataList)
+const currentEditOne = computed(() => store.state.edit.currentEditOne)
+const currentEditKey = computed(() => store.getters['edit/currentEditKey'])
+const autoScrollData = computed(() => {
+  return {
+    currentEditOne: currentEditOne.value,
+    len: questionDataList.value.length
+  }
+})
 
-      const totalCount = Math.floor(subVal / step) + 1
+const onSelectEditOne = async (currentEditOne) => {
+  store.commit('edit/setCurrentEditOne', currentEditOne)
+}
 
-      let runCount = 0
-      const run = () => {
-        dom[property] += step
-        runCount++
-        if (runCount < totalCount) {
-          requestAnimationFrame(run)
-        } else {
-          this.isAnimating = false
-        }
-      }
+const handleChange = (data) => {
+  if (currentEditOne.value === null) {
+    return
+  }
+  const { key, value } = data
+  const resultKey = `${currentEditKey.value}.${key}`
+  store.dispatch('edit/changeSchema', { key: resultKey, value })
+}
 
-      requestAnimationFrame(run)
-    },
-    async onSelectEditOne(currentEditOne) {
-      this.$store.commit('edit/setCurrentEditOne', currentEditOne)
-    },
-    handleChange(data) {
-      if (this.currentEditOne === null) {
-        return
-      }
-      const { key, value } = data
-      const resultKey = `${this.currentEditKey}.${key}`
-      this.$store.dispatch('edit/changeSchema', { key: resultKey, value })
-    },
-    onMainClick(e) {
-      if (e.target === this.$refs.mainOperation) {
-        this.$store.commit('edit/setCurrentEditOne', null)
-      }
-    },
-    onQuestionOperation(data) {
-      switch (data.type) {
-        case 'move':
-          this.$store.dispatch('edit/moveQuestion', {
-            index: data.index,
-            range: data.range
+const onMainClick = (e) => {
+  if (e.target === mainOperation.value) {
+    store.commit('edit/setCurrentEditOne', null)
+  }
+}
+
+const onQuestionOperation = (data) => {
+  switch (data.type) {
+    case 'move':
+      store.dispatch('edit/moveQuestion', {
+        index: data.index,
+        range: data.range
+      })
+      break
+    case 'delete':
+      store.dispatch('edit/deleteQuestion', { index: data.index })
+      break
+    case 'copy':
+      store.dispatch('edit/copyQuestion', { index: data.index })
+      break
+    default:
+      break
+  }
+}
+
+watch(
+  skinConf,
+  (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) {
+      root.style.setProperty('--opacity', contentConf?.opacity / 100) // 设置全局透明度
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(autoScrollData, (newVal) => {
+  const { currentEditOne } = newVal
+  if (typeof currentEditOne === 'number') {
+    setTimeout(() => {
+      const field = questionDataList.value?.[currentEditOne]?.field
+      if (field) {
+        const questionModule = materialGroup.value?.getQuestionRefByField(field)
+        if (questionModule && questionModule.$el) {
+          questionModule.$el.scrollIntoView({
+            behavior: 'smooth'
           })
-          break
-        case 'delete':
-          this.$store.dispatch('edit/deleteQuestion', { index: data.index })
-          break
-        case 'copy':
-          this.$store.dispatch('edit/copyQuestion', { index: data.index })
-          break
-        default:
-          break
+        }
       }
-    }
+    }, 0)
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -198,6 +168,7 @@ export default {
 
   .content {
     background-color: #fff;
+    padding-top: 40px;
   }
 }
 </style>
diff --git a/web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue b/web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue
index d0bda6df..f2b0b159 100644
--- a/web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue
+++ b/web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue
@@ -3,62 +3,70 @@
     <div class="operation-wrapper">
       <div class="box" ref="box">
         <div class="mask"></div>
-        <BannerContent :bannerConf="bannerConf" />
+        <HeaderContent :bannerConf="bannerConf" :readonly="false" />
         <div class="content">
-          <MainTitle :isSelected="false" :bannerConf="bannerConf" />
+          <MainTitle :isSelected="false" :bannerConf="bannerConf" :readonly="false" />
           <MaterialGroup :questionDataList="questionDataList" ref="MaterialGroup" />
           <SubmitButton
             :submit-conf="submitConf"
             :skin-conf="skinConf"
+            :readonly="false"
             :is-selected="currentEditOne === 'submit'"
           />
-          <LogoPreview :logo-conf="bottomConf" :is-selected="currentEditOne === 'logo'" />
+          <LogoIcon
+            :logo-conf="bottomConf"
+            :readonly="false"
+            :is-selected="currentEditOne === 'logo'"
+          />
         </div>
       </div>
     </div>
   </div>
 </template>
-
 <script>
+import { computed, defineComponent, ref } from 'vue'
 import MaterialGroup from '@/management/pages/edit/components/MaterialGroup.vue'
-import BannerContent from '../components/BannerContent.vue'
-import MainTitle from '@/management/pages/edit/components/MainTitle.vue'
-import SubmitButton from '@/management/pages/edit/components/SubmitButton.vue'
-import LogoPreview from '@/management/pages/edit/components/LogoPreview.vue'
-import { mapState, mapGetters } from 'vuex'
-import { get as _get } from 'lodash-es'
+import { useStore } from 'vuex'
+import communalLoader from '@materials/communals/communalLoader.js'
+
+const HeaderContent = ()=>communalLoader.defineAsyncComponent('HeaderContent')
+const MainTitle = ()=>communalLoader.defineAsyncComponent('MainTitle')
+const SubmitButton = ()=>communalLoader.defineAsyncComponent('SubmitButton')
+const LogoIcon = ()=>communalLoader.defineAsyncComponent('LogoIcon')
 
-export default {
-  name: 'PreviewPanel',
+export default defineComponent({
   components: {
-    BannerContent,
-    MainTitle,
-    SubmitButton,
-    LogoPreview,
-    MaterialGroup
+    MaterialGroup,
+    HeaderContent:HeaderContent(),
+    MainTitle:MainTitle(),
+    SubmitButton:SubmitButton(),
+    LogoIcon:LogoIcon()
   },
-  data() {
+  setup() {
+    const store = useStore()
+
+    const bannerConf = computed(() => store.state.edit.schema.bannerConf)
+    const submitConf = computed(() => store.state.edit.schema.submitConf)
+    const bottomConf = computed(() => store.state.edit.schema.bottomConf)
+    const skinConf = computed(() => store.state.edit.schema.skinConf)
+    const questionDataList = computed(() => store.state.edit.schema.questionDataList)
+    const currentEditOne = computed(() => store.state.edit.currentEditOne)
+    const currentEditKey = computed(() => store.getters['edit/currentEditKey'])
+
     return {
-      isAnimating: false
+      bannerConf,
+      submitConf,
+      bottomConf,
+      skinConf,
+      questionDataList,
+      currentEditOne,
+      currentEditKey
     }
   },
-  computed: {
-    ...mapState({
-      bannerConf: (state) => _get(state, 'edit.schema.bannerConf'),
-      submitConf: (state) => _get(state, 'edit.schema.submitConf'),
-      bottomConf: (state) => _get(state, 'edit.schema.bottomConf'),
-      skinConf: (state) => _get(state, 'edit.schema.skinConf'),
-      questionDataList: (state) => _get(state, 'edit.schema.questionDataList'),
-      currentEditOne: (state) => _get(state, 'edit.currentEditOne')
-    }),
-    ...mapGetters({
-      currentEditKey: 'edit/currentEditKey'
-    })
-  },
   watch: {
     skinConf: {
-      handler(skinConf) {
-        const { themeConf, backgroundConf, contentConf } = skinConf
+      handler(newVal) {
+        const { themeConf, backgroundConf, contentConf } = newVal
         const root = document.documentElement
         if (themeConf?.color) {
           root.style.setProperty('--primary-color', themeConf?.color) // 设置主题颜色
@@ -70,36 +78,11 @@ export default {
           root.style.setProperty('--opacity', contentConf?.opacity / 100) // 设置全局透明度
         }
       },
-      immediate: true, // 立即触发回调函数
+      immediate: true,
       deep: true
     }
-  },
-  methods: {
-    animate(dom, property, targetValue) {
-      const origin = dom[property]
-      const subVal = targetValue - origin
-
-      const flag = subVal < 0 ? -1 : 1
-
-      const step = flag * 50
-
-      const totalCount = Math.floor(subVal / step) + 1
-
-      let runCount = 0
-      const run = () => {
-        dom[property] += step
-        runCount++
-        if (runCount < totalCount) {
-          requestAnimationFrame(run)
-        } else {
-          this.isAnimating = false
-        }
-      }
-
-      requestAnimationFrame(run)
-    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -140,6 +123,7 @@ export default {
   .box {
     background-color: var(--primary-background-color);
     position: relative;
+
     .mask {
       position: absolute;
       top: 0;
@@ -148,6 +132,7 @@ export default {
       right: 0;
       z-index: 999;
     }
+
     .content {
       margin: 0 0.3rem;
       background: rgba(255, 255, 255, var(--opacity));
diff --git a/web/src/materials/communals/common/utils/index.js b/web/src/materials/communals/common/utils/index.js
index 83858f35..fced2142 100644
--- a/web/src/materials/communals/common/utils/index.js
+++ b/web/src/materials/communals/common/utils/index.js
@@ -8,4 +8,4 @@ export const formatLink = (url) => {
     return url
   }
   return `http://${url}`
-}
\ No newline at end of file
+}
diff --git a/web/src/materials/communals/communalLoader.js b/web/src/materials/communals/communalLoader.js
index c22f1321..8755616b 100644
--- a/web/src/materials/communals/communalLoader.js
+++ b/web/src/materials/communals/communalLoader.js
@@ -1,8 +1,17 @@
 import ComponentLoader from '@/materials/utils/componentLoader'
+import { defineAsyncComponent } from 'vue'
+
 export class CommunalLoader extends ComponentLoader {
   dynamicImport(path) {
     return import(`./widgets/${path}.vue`)
   }
+  defineAsyncComponent(path) {
+    return defineAsyncComponent({
+      loader: () => import(`./widgets/${path}/index.jsx`),
+      delay: 200,
+      timeout: 3000
+    })
+  }
 }
 
 const communalLoader = new CommunalLoader()
diff --git a/web/src/materials/communals/widgets/HeaderContent/Components/HeaderBanner.jsx b/web/src/materials/communals/widgets/HeaderContent/Components/HeaderBanner.jsx
index cccd6f24..ab7fce60 100644
--- a/web/src/materials/communals/widgets/HeaderContent/Components/HeaderBanner.jsx
+++ b/web/src/materials/communals/widgets/HeaderContent/Components/HeaderBanner.jsx
@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, computed } from 'vue'
+import { defineComponent, computed } from 'vue'
 import { get as _get } from 'lodash-es'
 import { formatLink } from '@materials/communals/common/utils'
 
@@ -18,8 +18,7 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props) { 
-
+  setup(props) {
     const bgImage = computed(() => {
       return _get(props.bannerConf, 'bannerConfig.bgImage', '')
     })
@@ -33,31 +32,15 @@ export default defineComponent({
       window.open(formatLink(jumpLink))
     }
 
-    // const emptyBannerRender = () => {
-    //   if(!bgImage.value && !props.readonly) {
-    //     let classStr = 'empty-banner';
-    //     if (props.isSelected) {
-    //       classStr += 'banner-active'
-    //     } 
-    //     return (
-    //       <div class={classStr}>
-    //         <p>点击配置头图</p>
-    //         <p>若不配置头图，将不在问卷中展示</p>
-    //       </div>
-    //     )
-    //   }
-    //   return ''
-    // }
-
     const bannerRender = () => {
       let attribute = {
-        class:'banner-img'
+        class: 'banner-img'
       }
       if (props.readonly) {
         const allow = _get(props.bannerConf, 'bannerConfig.bgImageAllowJump', false)
         attribute = {
           class: `${attribute.class}  ${allow ? 'pointer' : ''}`,
-          onClick:onBannerClick
+          onClick: onBannerClick
         }
       }
       if (bgImage.value) {
@@ -67,11 +50,11 @@ export default defineComponent({
           </div>
         )
       }
-      if(!bgImage.value && !props.readonly) {
-        let classStr = 'empty-banner';
+      if (!bgImage.value && !props.readonly) {
+        let classStr = 'empty-banner'
         if (props.isSelected) {
           classStr += 'banner-active'
-        } 
+        }
         return (
           <div class={classStr}>
             <p>点击配置头图</p>
@@ -79,9 +62,9 @@ export default defineComponent({
           </div>
         )
       }
-      return '';
+      return ''
     }
-    
+
     return {
       bgImage,
       // emptyBannerRender,
@@ -96,4 +79,4 @@ export default defineComponent({
       </div>
     )
   }
-})
\ No newline at end of file
+})
diff --git a/web/src/materials/communals/widgets/HeaderContent/Components/HeaderVideo.jsx b/web/src/materials/communals/widgets/HeaderContent/Components/HeaderVideo.jsx
index 3c9105dd..98cfdc87 100644
--- a/web/src/materials/communals/widgets/HeaderContent/Components/HeaderVideo.jsx
+++ b/web/src/materials/communals/widgets/HeaderContent/Components/HeaderVideo.jsx
@@ -1,6 +1,5 @@
 import { defineComponent, computed } from 'vue'
 
-
 export default defineComponent({
   name: 'HeaderVideo',
   props: {
@@ -13,24 +12,23 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props) { 
-
-    const attributeVideo = computed(() => { 
-      const { bannerConf,readonly} = props;
+  setup(props) {
+    const attributeVideo = computed(() => {
+      const { bannerConf, readonly } = props
       let data = {
-        id:'video',
+        id: 'video',
         preload: 'auto',
-        style: readonly ? 'margin: 0 auto; width: 100%; display: block;' : '' ,
-        poster:   bannerConf?.bannerConfig?.postImg,
+        style: readonly ? 'margin: 0 auto; width: 100%; display: block;' : '',
+        poster: bannerConf?.bannerConfig?.postImg,
         controls: '',
-        class:readonly ?  '' : 'custom-video' 
+        class: readonly ? '' : 'custom-video'
       }
-      return data;
+      return data
     })
 
     const play = () => {
-      const video = document.getElementById('video');
-      if(!video) return;
+      const video = document.getElementById('video')
+      if (!video) return
       document.querySelector('.play-icon').style.display = 'none'
       document.querySelector('.video-modal').style.display = 'none'
       video.play()
@@ -43,23 +41,26 @@ export default defineComponent({
     }
   },
   render() {
-    const { readonly } = this.props;
+    const { readonly } = this.props
     return (
       <div class="header-video-warp">
         <div class="video">
-          <video {...this.attributeVideo}>
-            <source src={ this.bannerConf?.bannerConfig?.videoLink} type="video/mp4" />
+          <video {...this.attributeVideo} >
+            <source src={this.bannerConf?.bannerConfig?.videoLink} type="video/mp4" />
           </video>
-          {
-            readonly ? (
-              <>
-                <div class="video-modal" style={`background-image:url(${this.attributeVideo.poster})` }></div>
-                <div class="iconfont icon-kaishi play-icon" onClick={this.play}></div>
-              </>
-            ) : ''
-          }
+          {readonly ? (
+            <>
+              <div
+                class="video-modal"
+                style={`background-image:url(${this.attributeVideo.poster})`}
+              ></div>
+              <div class="iconfont icon-kaishi play-icon" onClick={this.play}></div>
+            </>
+          ) : (
+            ''
+          )}
         </div>
       </div>
     )
   }
-})
\ No newline at end of file
+})
diff --git a/web/src/materials/communals/widgets/HeaderContent/index.jsx b/web/src/materials/communals/widgets/HeaderContent/index.jsx
index e3e6118c..f7eea294 100644
--- a/web/src/materials/communals/widgets/HeaderContent/index.jsx
+++ b/web/src/materials/communals/widgets/HeaderContent/index.jsx
@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue'
-import './index.scss';
-import HeaderBanner from './Components/HeaderBanner';
-import HeaderVideo from './Components/HeaderVideo';
+import './index.scss'
+import HeaderBanner from './Components/HeaderBanner'
+import HeaderVideo from './Components/HeaderVideo'
 
 export default defineComponent({
   name: 'HeaderContent',
@@ -19,10 +19,10 @@ export default defineComponent({
       default: false
     }
   },
-  emits:['select'],
-  setup(props, { emit }) { 
+  emits: ['select'],
+  setup(props, { emit }) {
     const handleClick = () => {
-      if (props.readonly) return;
+      if (props.readonly) return
       emit('select')
     }
 
@@ -32,12 +32,16 @@ export default defineComponent({
     }
   },
   render() {
-    const { bannerConf,readonly,isSelected} = this.props;
+    const { bannerConf, readonly, isSelected } = this.props
     return (
       <div class="header-content-warp" onClick={this.handleClick}>
         <HeaderBanner bannerConf={bannerConf} readonly={readonly} isSelected={isSelected} />
-        {bannerConf?.bannerConfig?.videoLink ? <HeaderVideo bannerConf={bannerConf} readonly={readonly} /> : ''}
+        {bannerConf?.bannerConfig?.videoLink ? (
+          <HeaderVideo bannerConf={bannerConf} readonly={readonly} />
+        ) : (
+          ''
+        )}
       </div>
     )
   }
-})
\ No newline at end of file
+})
diff --git a/web/src/materials/communals/widgets/HeaderContent/index.scss b/web/src/materials/communals/widgets/HeaderContent/index.scss
index 75f9631c..e2e6980b 100644
--- a/web/src/materials/communals/widgets/HeaderContent/index.scss
+++ b/web/src/materials/communals/widgets/HeaderContent/index.scss
@@ -1,11 +1,11 @@
-.header-content-warp{
+.header-content-warp {
   width: 100%;
-  .header-banner-wrap{
+  .header-banner-wrap {
     .banner {
       width: 100%;
       display: flex;
       justify-content: center;
-    } 
+    }
     .banner-img {
       width: 100%;
       &.pointer {
@@ -15,7 +15,7 @@
     .empty-banner {
       height: 120px;
       border: 1px dashed #e3e4e8;
-  
+
       p {
         text-align: center;
         color: #c8c9cd;
@@ -26,14 +26,14 @@
           margin: 20px 0 24px 0;
         }
       }
-  
+
       &.banner-active {
         background-color: #f2f4f7;
         box-shadow: 0 0 5px #e3e4e8;
       }
     }
   }
-  .header-video-warp{
+  .header-video-warp {
     .video {
       width: 100%;
       height: 100%;
@@ -66,4 +66,4 @@
       display: block;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/materials/communals/widgets/LogoIcon/index.jsx b/web/src/materials/communals/widgets/LogoIcon/index.jsx
index b308aa4d..7227f161 100644
--- a/web/src/materials/communals/widgets/LogoIcon/index.jsx
+++ b/web/src/materials/communals/widgets/LogoIcon/index.jsx
@@ -1,5 +1,5 @@
-import { defineComponent,computed } from 'vue'
-import './index.scss';
+import { defineComponent, computed } from 'vue'
+import './index.scss'
 import { useStore } from 'vuex'
 
 export default defineComponent({
@@ -9,7 +9,7 @@ export default defineComponent({
       type: Object,
       default: () => ({
         logoImageWidth: Number,
-        logoImage:String
+        logoImage: String
       })
     },
     readonly: {
@@ -17,17 +17,16 @@ export default defineComponent({
       default: false
     }
   },
-  emits:['select'],
-  setup(props,{emit}) { 
-
+  emits: ['select'],
+  setup(props, { emit }) {
     const store = useStore()
 
-    const logoImage = computed(() => { 
-      return props.logoConf?.logoImage;
+    const logoImage = computed(() => {
+      return props.logoConf?.logoImage
     })
 
-    const logoImageWidth = computed(() => { 
-      return props.logoConf?.logoImageWidth;
+    const logoImageWidth = computed(() => {
+      return props.logoConf?.logoImageWidth
     })
 
     const isMobile = computed(() => {
@@ -35,26 +34,26 @@ export default defineComponent({
     })
 
     const logoStyle = computed(() => {
-      let style = {};
-      if (props.readonly) {
+      let style = {}
+      if (!props.readonly) {
         style = {
           width: logoImageWidth.value
         }
       } else {
-        style={
-          width: !isMobile.value ? '20%' : logoImageWidth.value || '20%'  
+        style = {
+          width: !isMobile.value ? '20%' : logoImageWidth.value || '20%'
         }
       }
       return style
     })
 
     const onSelect = () => {
-      if (props.readonly) return;
+      if (props.readonly) return
       emit('select')
     }
 
-    const noLogoRender = () => { 
-      if ( !props.readonly) {
+    const noLogoRender = () => {
+      if (!props.readonly) {
         return (
           <div class="logo-placeholder-wrapper">
             <div class="logo-placeholder">LOGO</div>
@@ -72,21 +71,19 @@ export default defineComponent({
       onSelect,
       noLogoRender
     }
-
   },
   render() {
-    const { readonly } = this.props;
+    const { readonly } = this.props
     return (
       <div class="logo-icon-warp" onClick={this.onSelect}>
         <div class={[readonly ? 'logo-wrapper' : 'question-logo']}>
-          {this.logoImage
-            ?
-              <img src={this.logoImage} style={this.logoStyle} />
-            :
+          {this.logoImage ? (
+            <img src={this.logoImage} style={this.logoStyle} />
+          ) : (
             this.noLogoRender()
-          }
+          )}
         </div>
       </div>
     )
   }
-})
\ No newline at end of file
+})
diff --git a/web/src/materials/communals/widgets/LogoIcon/index.scss b/web/src/materials/communals/widgets/LogoIcon/index.scss
index 068fa496..a14fa920 100644
--- a/web/src/materials/communals/widgets/LogoIcon/index.scss
+++ b/web/src/materials/communals/widgets/LogoIcon/index.scss
@@ -1,4 +1,4 @@
-.logo-icon-warp{
+.logo-icon-warp {
   display: flex;
   justify-content: center;
   .logo-wrapper {
@@ -18,7 +18,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-  
+
     .logo-placeholder {
       width: 200px;
       height: 50px;
@@ -31,7 +31,7 @@
       justify-content: center;
       border: 1px dashed #d8d8d8;
     }
-  
+
     .no-logo-tip {
       font-size: 13px;
       line-height: 13px;
@@ -40,4 +40,4 @@
       color: #92949d;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/materials/communals/widgets/MainTitle/index.jsx b/web/src/materials/communals/widgets/MainTitle/index.jsx
index 808ebcaf..4d66a9df 100644
--- a/web/src/materials/communals/widgets/MainTitle/index.jsx
+++ b/web/src/materials/communals/widgets/MainTitle/index.jsx
@@ -1,10 +1,10 @@
-import { defineComponent,computed } from 'vue'
+import { defineComponent, computed } from 'vue'
 import RichEditor from '@/common/Editor/RichEditor.vue'
-import '@/render/styles/variable.scss';
-import './index.scss';
+import '@/render/styles/variable.scss'
+import './index.scss'
 
 export default defineComponent({
-  name: 'HeaderContent',
+  name: 'MainTitle',
   props: {
     bannerConf: {
       type: Object,
@@ -19,33 +19,31 @@ export default defineComponent({
       default: false
     }
   },
-  emits:['select'],
-  setup(props, { emit }) { 
-
+  emits: ['select', 'change'],
+  setup(props, { emit }) {
     const titleClass = computed(() => {
-      let classStr = '';
+      let classStr = ''
       if (!props.readonly) {
-        classStr = `main-title ${props.isSelected ? 'active' : ''}`;
+        classStr = `main-title ${props.isSelected ? 'active' : ''}`
       } else {
-        classStr = 'titlePanel';
-        
+        classStr = 'titlePanel'
       }
       return classStr
-    });
+    })
 
-    const isTitleHide = computed(() => { 
+    const isTitleHide = computed(() => {
       if (props.readonly && !mainTitle.value) {
         return false
       }
-      return true;
+      return true
     })
 
-    const mainTitle = computed(() => { 
+    const mainTitle = computed(() => {
       return props.bannerConf.titleConfig?.mainTitle
     })
 
     const handleClick = () => {
-      if (props.readonly) return;
+      if (props.readonly) return
       emit('select')
     }
 
@@ -65,27 +63,31 @@ export default defineComponent({
       isTitleHide,
       mainTitle,
       handleClick,
-      onTitleInput,
+      onTitleInput
     }
   },
   render() {
     return (
-      <div class={['main-title-warp', this.props.readonly ? 'pd15' : '']} onClick={this.handleClick}>
-        {this.isTitleHide ? 
+      <div
+        class={['main-title-warp', !this.props.readonly ? 'pd15' : '']}
+        onClick={this.handleClick}
+      >
+        {this.isTitleHide ? (
           <div class={this.titleClass}>
-            {!this.props.readonly ?
-              <RichEditor 
+            {!this.props.readonly ? (
+              <RichEditor
                 modelValue={this.mainTitle}
                 onInput={this.onTitleInput}
                 placeholder="请输入标题"
               />
-            :
-              <div class="main-title" v-html={this.mainTitle}></div>
-            }
+            ) : (
+              <div class="mainTitle" v-html={this.mainTitle}></div>
+            )}
           </div>
-        :
-        ''}
+        ) : (
+          ''
+        )}
       </div>
     )
   }
-})
\ No newline at end of file
+})
diff --git a/web/src/materials/communals/widgets/MainTitle/index.scss b/web/src/materials/communals/widgets/MainTitle/index.scss
index 33794c3b..a0624e93 100644
--- a/web/src/materials/communals/widgets/MainTitle/index.scss
+++ b/web/src/materials/communals/widgets/MainTitle/index.scss
@@ -1,17 +1,17 @@
-.main-title-warp{
+.main-title-warp {
   .mainTitle {
     font-size: 0.28rem;
     line-height: 0.4rem;
     color: $title-color;
-  
+
     ol {
       list-style: decimal;
     }
-  
+
     ul {
       list-style: disc;
     }
-  
+
     img {
       width: 100%;
     }
@@ -35,22 +35,22 @@
   }
   .main-title {
     border: 1px solid transparent;
-  
+
     &.active {
       border: 1px solid #e3e4e6;
       background-color: #f6f7f9;
       box-shadow: 0 0 5px #dedede;
-  
+
       :deep(.w-e-text-container) {
         background-color: #f6f7f9;
       }
     }
   }
-  
+
   .main-title:hover {
     border: 1px dashed #eee;
   }
-  &.pd15{
+  &.pd15 {
     padding: 15px;
   }
   .titlePanel {
@@ -59,4 +59,4 @@
     padding: 0.4rem 0.4rem;
     box-sizing: border-box;
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/materials/communals/widgets/SubmitButton/index.jsx b/web/src/materials/communals/widgets/SubmitButton/index.jsx
index 8cc53b38..b7f56061 100644
--- a/web/src/materials/communals/widgets/SubmitButton/index.jsx
+++ b/web/src/materials/communals/widgets/SubmitButton/index.jsx
@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
-import '@/render/styles/variable.scss';
-import './index.scss';
+import '@/render/styles/variable.scss'
+import './index.scss'
 
 export default defineComponent({
   name: 'SubmitButton',
@@ -8,30 +8,29 @@ export default defineComponent({
     submitConf: Object,
     skinConf: {
       type: Object,
-      required: true
+      default: () => ({})
     },
     readonly: Boolean,
     validate: Function,
     renderData: Array
   },
-  emits: ['submit','select'],
+  emits: ['submit', 'select'],
   setup(props, { emit }) {
-    
     const submit = (e) => {
-      if (!props.readonly) return;
+      if (!props.readonly) return
       const validate = props.validate
       if (e) {
         e.preventDefault()
         validate((valid) => {
           if (valid) {
-            this.$emit('submit')
+            emit('submit')
           }
         })
       }
     }
 
     const handleClick = () => {
-      if (props.readonly) return;
+      if (props.readonly) return
       emit('select')
     }
 
@@ -40,14 +39,18 @@ export default defineComponent({
       submit,
       handleClick
     }
-
   },
   render() {
-    const { readonly,submitConf } = this.props;
+    const { readonly, submitConf } = this.props
     return (
-      <div class={ ['submit-warp',readonly ? 'question-submit_wrapper' : 'preview-submit_wrapper']} onClick={ this.handleClick }>
-        <el-button class="submit-btn" type="primary" onClick={this.submit}>{ submitConf.submitTitle }</el-button>
+      <div
+        class={['submit-warp', readonly ? 'question-submit_wrapper' : 'preview-submit_wrapper']}
+        onClick={this.handleClick}
+      >
+        <button class="submit-btn" type="primary" onClick={this.submit}>
+          {submitConf.submitTitle}
+        </button>
       </div>
     )
   }
-})
\ No newline at end of file
+})
diff --git a/web/src/materials/communals/widgets/SubmitButton/index.scss b/web/src/materials/communals/widgets/SubmitButton/index.scss
index 0b2c9cb1..63d52741 100644
--- a/web/src/materials/communals/widgets/SubmitButton/index.scss
+++ b/web/src/materials/communals/widgets/SubmitButton/index.scss
@@ -1,10 +1,10 @@
-.submit-warp{
-  &.question-submit_wrapper{
+.submit-warp {
+  &.question-submit_wrapper {
     margin: 0 0.4rem;
     font-size: 0;
     position: relative;
   }
-  &.preview-submit_wrapper{
+  &.preview-submit_wrapper {
     padding: 25px;
     text-align: center;
   }
@@ -22,5 +22,6 @@
     border-radius: 0.08rem;
     margin: 0.4rem 0;
     cursor: pointer;
+    border: none;
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/materials/setters/widgets/Header.vue b/web/src/materials/setters/widgets/Header.vue
deleted file mode 100644
index f26082ce..00000000
--- a/web/src/materials/setters/widgets/Header.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div class="header-wrap">
-
-  </div>
-</template>
-<script setup>
-import { computed } from 'vue';
-import { useStore } from 'vuex'
-
-const store = useStore()
-// store.state.
-
-// const bgImage = computed(() => {
-  
-// })
-
-</script>
-<style lang="scss" scoped>
-.header-wrap {
-  width: 100%;
-  .header-setter{
-
-  }
-  .banner{
-
-  }
-
-}
-</style>
\ No newline at end of file
diff --git a/web/src/render/hooks/useShowInput.js b/web/src/render/hooks/useShowInput.js
index de90ab59..b6cccb20 100644
--- a/web/src/render/hooks/useShowInput.js
+++ b/web/src/render/hooks/useShowInput.js
@@ -10,7 +10,6 @@ export const useShowInput = (questionKey) => {
       if (curRange.isShowInput) {
         const rangeKey = `${questionKey}_${key}`
         othersValue[rangeKey] = formValues[rangeKey]
-
         ;(curRange.othersKey = rangeKey), (curRange.othersValue = formValues[rangeKey])
         if (!questionVal.toString().includes(key) && formValues[rangeKey]) {
           // 如果分值被未被选中且对应的填写更多有值，则清空填写更多
diff --git a/web/src/render/pages/IndexPage.vue b/web/src/render/pages/IndexPage.vue
index 8dd379e4..2a6f1e8c 100644
--- a/web/src/render/pages/IndexPage.vue
+++ b/web/src/render/pages/IndexPage.vue
@@ -1,13 +1,19 @@
 <template>
   <div class="index">
-    <ProgressBar />
+    <progressBar />
     <div class="wrapper" ref="boxRef">
-      <HeaderContent :bannerConf="" />
+      <HeaderContent :bannerConf="bannerConf" :readonly="true" />
       <div class="content">
-        <MainTitle></MainTitle>
+        <MainTitle :bannerConf="bannerConf" :readonly="true"></MainTitle>
         <MainRenderer ref="mainRef"></MainRenderer>
-        <Submit :validate="validate" :renderData="renderData" @submit="handleSubmit"></Submit>
-        <LogoIcon />
+        <SubmitButton
+          :validate="validate"
+          :submitConf="submitConf"
+          :readonly="true"
+          :renderData="renderData"
+          @submit="handleSubmit"
+        ></SubmitButton>
+        <LogoIcon :logo-conf="logoConf" :readonly="true" />
       </div>
     </div>
   </div>
@@ -15,16 +21,12 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useStore } from 'vuex'
-
-import HeaderSetter from '../components/HeaderSetter.vue'
-import HeaderContent from '@materials/communals/widgets/HeaderContent/index.jsx'
-import MainTitle from '../components/MainTitle.vue'
-import Submit from '../components/SubmitSetter.vue'
+// @ts-ignore
+import communalLoader from '@materials/communals/communalLoader.js'
 import MainRenderer from '../components/MainRenderer.vue'
 import AlertDialog from '../components/AlertDialog.vue'
 import ConfirmDialog from '../components/ConfirmDialog.vue'
-import ProgressBar from '../components/ProgressBar.vue'
-import LogoIcon from '../components/LogoIcon.vue'
+import progressBar from '../components/ProgressBar.vue'
 
 import { submitForm } from '../api/survey'
 import encrypt from '../utils/encrypt'
@@ -41,6 +43,11 @@ withDefaults(defineProps<Props>(), {
   isMobile: false
 })
 
+const HeaderContent = communalLoader.defineAsyncComponent('HeaderContent')
+const MainTitle = communalLoader.defineAsyncComponent('MainTitle')
+const SubmitButton = communalLoader.defineAsyncComponent('SubmitButton')
+const LogoIcon = communalLoader.defineAsyncComponent('LogoIcon')
+
 const mainRef = ref<any>()
 const boxRef = ref<HTMLElement>()
 
@@ -49,7 +56,10 @@ const confirm = useCommandComponent(ConfirmDialog)
 
 const store = useStore()
 
+const bannerConf = computed(() => store.state?.bannerConf || {})
 const renderData = computed(() => store.getters.renderData)
+const submitConf = computed(() => store.state?.submitConf || {})
+const logoConf = computed(() => store.state?.bottomConf || {})
 
 const validate = (cbk: (v: boolean) => void) => {
   const index = 0
@@ -59,12 +69,12 @@ const validate = (cbk: (v: boolean) => void) => {
 const normalizationRequestBody = () => {
   const enterTime = store.state.enterTime
   const encryptInfo = store.state.encryptInfo
-  const formValues = store.state.formValues
+  const formModel = store.getters.formModel
   const surveyPath = store.state.surveyPath
 
   const result: any = {
     surveyPath,
-    data: JSON.stringify(formValues),
+    data: JSON.stringify(formModel),
     difTime: Date.now() - enterTime,
     clientTime: Date.now()
   }
@@ -127,11 +137,13 @@ const handleSubmit = () => {
 <style scoped lang="scss">
 .index {
   min-height: 100%;
+
   .wrapper {
     min-height: 100%;
     background-color: var(--primary-background-color);
     display: flex;
     flex-direction: column;
+
     .content {
       flex: 1;
       margin: 0 0.3rem;

From cfb0e72107ae9a6e728f983b394de00229748ea9 Mon Sep 17 00:00:00 2001
From: chaorenluo <1243357953@qq.com>
Date: Tue, 28 May 2024 15:50:14 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E5=85=BC=E5=AE=B9=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../communals/widgets/LogoIcon/index.jsx      | 21 +++-------------
 .../communals/widgets/MainTitle/index.jsx     | 25 +++++++++++++------
 .../communals/widgets/MainTitle/index.scss    |  1 +
 .../communals/widgets/SubmitButton/index.jsx  |  4 +--
 web/src/render/pages/IndexPage.vue            |  4 +--
 5 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/web/src/materials/communals/widgets/LogoIcon/index.jsx b/web/src/materials/communals/widgets/LogoIcon/index.jsx
index 7227f161..55b0301a 100644
--- a/web/src/materials/communals/widgets/LogoIcon/index.jsx
+++ b/web/src/materials/communals/widgets/LogoIcon/index.jsx
@@ -1,6 +1,5 @@
 import { defineComponent, computed } from 'vue'
 import './index.scss'
-import { useStore } from 'vuex'
 
 export default defineComponent({
   name: 'LogoIcon',
@@ -19,7 +18,6 @@ export default defineComponent({
   },
   emits: ['select'],
   setup(props, { emit }) {
-    const store = useStore()
 
     const logoImage = computed(() => {
       return props.logoConf?.logoImage
@@ -29,20 +27,10 @@ export default defineComponent({
       return props.logoConf?.logoImageWidth
     })
 
-    const isMobile = computed(() => {
-      return store.state?.isMobile
-    })
-
     const logoStyle = computed(() => {
       let style = {}
-      if (!props.readonly) {
-        style = {
-          width: logoImageWidth.value
-        }
-      } else {
-        style = {
-          width: !isMobile.value ? '20%' : logoImageWidth.value || '20%'
-        }
+      style = {
+        width: logoImageWidth.value
       }
       return style
     })
@@ -73,12 +61,11 @@ export default defineComponent({
     }
   },
   render() {
-    const { readonly } = this.props
     return (
       <div class="logo-icon-warp" onClick={this.onSelect}>
-        <div class={[readonly ? 'logo-wrapper' : 'question-logo']}>
+        <div class="question-logo">
           {this.logoImage ? (
-            <img src={this.logoImage} style={this.logoStyle} />
+            <img src={this.logoImage} style={{width: this.logoImageWidth}} />
           ) : (
             this.noLogoRender()
           )}
diff --git a/web/src/materials/communals/widgets/MainTitle/index.jsx b/web/src/materials/communals/widgets/MainTitle/index.jsx
index 4d66a9df..6d57797b 100644
--- a/web/src/materials/communals/widgets/MainTitle/index.jsx
+++ b/web/src/materials/communals/widgets/MainTitle/index.jsx
@@ -1,4 +1,4 @@
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed,shallowRef,defineAsyncComponent} from 'vue'
 import RichEditor from '@/common/Editor/RichEditor.vue'
 import '@/render/styles/variable.scss'
 import './index.scss'
@@ -21,6 +21,7 @@ export default defineComponent({
   },
   emits: ['select', 'change'],
   setup(props, { emit }) {
+
     const titleClass = computed(() => {
       let classStr = ''
       if (!props.readonly) {
@@ -57,31 +58,41 @@ export default defineComponent({
       })
     }
 
+    const richEditorView = shallowRef(null)
+    if (!props.readonly) {
+      richEditorView.value = defineAsyncComponent(
+        () => import('@/common/Editor/RichEditor.vue')
+      )
+    }
+
     return {
       props,
       titleClass,
       isTitleHide,
       mainTitle,
+      richEditorView,
       handleClick,
       onTitleInput
     }
   },
   render() {
+    const { readonly,mainTitle,onTitleInput,richEditorView} = this;
     return (
       <div
-        class={['main-title-warp', !this.props.readonly ? 'pd15' : '']}
+        class={['main-title-warp', !readonly ? 'pd15' : '']}
         onClick={this.handleClick}
       >
         {this.isTitleHide ? (
           <div class={this.titleClass}>
-            {!this.props.readonly ? (
-              <RichEditor
-                modelValue={this.mainTitle}
-                onInput={this.onTitleInput}
+            {!readonly ? (
+              <richEditorView
+                modelValue={mainTitle}
+                onInput={onTitleInput}
                 placeholder="请输入标题"
+                class="mainTitle"
               />
             ) : (
-              <div class="mainTitle" v-html={this.mainTitle}></div>
+              <div class="mainTitle" v-html={mainTitle}></div>
             )}
           </div>
         ) : (
diff --git a/web/src/materials/communals/widgets/MainTitle/index.scss b/web/src/materials/communals/widgets/MainTitle/index.scss
index a0624e93..ae67bcee 100644
--- a/web/src/materials/communals/widgets/MainTitle/index.scss
+++ b/web/src/materials/communals/widgets/MainTitle/index.scss
@@ -23,6 +23,7 @@
     h6,
     p {
       line-height: 0.6rem;
+      font-size: 0.28rem;
       color: $title-color-deep;
       margin-bottom: 0.35rem;
     }
diff --git a/web/src/materials/communals/widgets/SubmitButton/index.jsx b/web/src/materials/communals/widgets/SubmitButton/index.jsx
index b7f56061..64439893 100644
--- a/web/src/materials/communals/widgets/SubmitButton/index.jsx
+++ b/web/src/materials/communals/widgets/SubmitButton/index.jsx
@@ -41,10 +41,10 @@ export default defineComponent({
     }
   },
   render() {
-    const { readonly, submitConf } = this.props
+    const { submitConf } = this.props
     return (
       <div
-        class={['submit-warp', readonly ? 'question-submit_wrapper' : 'preview-submit_wrapper']}
+        class={['submit-warp', 'preview-submit_wrapper']}
         onClick={this.handleClick}
       >
         <button class="submit-btn" type="primary" onClick={this.submit}>
diff --git a/web/src/render/pages/IndexPage.vue b/web/src/render/pages/IndexPage.vue
index 2a6f1e8c..6a2d48bd 100644
--- a/web/src/render/pages/IndexPage.vue
+++ b/web/src/render/pages/IndexPage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="index">
-    <progressBar />
+    <ProgressBar />
     <div class="wrapper" ref="boxRef">
       <HeaderContent :bannerConf="bannerConf" :readonly="true" />
       <div class="content">
@@ -26,7 +26,7 @@ import communalLoader from '@materials/communals/communalLoader.js'
 import MainRenderer from '../components/MainRenderer.vue'
 import AlertDialog from '../components/AlertDialog.vue'
 import ConfirmDialog from '../components/ConfirmDialog.vue'
-import progressBar from '../components/ProgressBar.vue'
+import ProgressBar from '../components/ProgressBar.vue'
 
 import { submitForm } from '../api/survey'
 import encrypt from '../utils/encrypt'

From 2eabecb47044174fb2a21aed96a03922e25baa61 Mon Sep 17 00:00:00 2001
From: chaorenluo <1243357953@qq.com>
Date: Tue, 28 May 2024 15:59:47 +0800
Subject: [PATCH 5/5] =?UTF-8?q?defineAsyncComponent=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95=E5=90=8D=E6=94=B9=E4=B8=BAloadComponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/edit/modules/questionModule/PreviewPanel.vue |  4 ++--
 .../edit/modules/settingModule/skin/PreviewPanel.vue   | 10 +++++-----
 web/src/materials/communals/communalLoader.js          |  8 ++------
 .../materials/communals/widgets/MainTitle/index.jsx    |  1 -
 web/src/render/pages/IndexPage.vue                     |  8 ++++----
 5 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue
index f297aff6..ea59380a 100644
--- a/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue
+++ b/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue
@@ -35,8 +35,8 @@ import communalLoader from '@materials/communals/communalLoader.js'
 import MaterialGroup from '@/management/pages/edit/components/MaterialGroup.vue'
 import { useStore } from 'vuex'
 
-const MainTitle = communalLoader.defineAsyncComponent('MainTitle')
-const SubmitButton = communalLoader.defineAsyncComponent('SubmitButton')
+const MainTitle = communalLoader.loadComponent('MainTitle')
+const SubmitButton = communalLoader.loadComponent('SubmitButton')
 
 const store = useStore()
 const mainOperation = ref(null)
diff --git a/web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue b/web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue
index f2b0b159..94071d1f 100644
--- a/web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue
+++ b/web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue
@@ -24,15 +24,15 @@
   </div>
 </template>
 <script>
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 import MaterialGroup from '@/management/pages/edit/components/MaterialGroup.vue'
 import { useStore } from 'vuex'
 import communalLoader from '@materials/communals/communalLoader.js'
 
-const HeaderContent = ()=>communalLoader.defineAsyncComponent('HeaderContent')
-const MainTitle = ()=>communalLoader.defineAsyncComponent('MainTitle')
-const SubmitButton = ()=>communalLoader.defineAsyncComponent('SubmitButton')
-const LogoIcon = ()=>communalLoader.defineAsyncComponent('LogoIcon')
+const HeaderContent = ()=>communalLoader.loadComponent('HeaderContent')
+const MainTitle = ()=>communalLoader.loadComponent('MainTitle')
+const SubmitButton = ()=>communalLoader.loadComponent('SubmitButton')
+const LogoIcon = ()=>communalLoader.loadComponent('LogoIcon')
 
 export default defineComponent({
   components: {
diff --git a/web/src/materials/communals/communalLoader.js b/web/src/materials/communals/communalLoader.js
index 8755616b..20e69e52 100644
--- a/web/src/materials/communals/communalLoader.js
+++ b/web/src/materials/communals/communalLoader.js
@@ -1,11 +1,7 @@
-import ComponentLoader from '@/materials/utils/componentLoader'
 import { defineAsyncComponent } from 'vue'
 
-export class CommunalLoader extends ComponentLoader {
-  dynamicImport(path) {
-    return import(`./widgets/${path}.vue`)
-  }
-  defineAsyncComponent(path) {
+export class CommunalLoader {
+  loadComponent(path) {
     return defineAsyncComponent({
       loader: () => import(`./widgets/${path}/index.jsx`),
       delay: 200,
diff --git a/web/src/materials/communals/widgets/MainTitle/index.jsx b/web/src/materials/communals/widgets/MainTitle/index.jsx
index 6d57797b..19eae754 100644
--- a/web/src/materials/communals/widgets/MainTitle/index.jsx
+++ b/web/src/materials/communals/widgets/MainTitle/index.jsx
@@ -1,5 +1,4 @@
 import { defineComponent, computed,shallowRef,defineAsyncComponent} from 'vue'
-import RichEditor from '@/common/Editor/RichEditor.vue'
 import '@/render/styles/variable.scss'
 import './index.scss'
 
diff --git a/web/src/render/pages/IndexPage.vue b/web/src/render/pages/IndexPage.vue
index 6a2d48bd..3f7e40bd 100644
--- a/web/src/render/pages/IndexPage.vue
+++ b/web/src/render/pages/IndexPage.vue
@@ -43,10 +43,10 @@ withDefaults(defineProps<Props>(), {
   isMobile: false
 })
 
-const HeaderContent = communalLoader.defineAsyncComponent('HeaderContent')
-const MainTitle = communalLoader.defineAsyncComponent('MainTitle')
-const SubmitButton = communalLoader.defineAsyncComponent('SubmitButton')
-const LogoIcon = communalLoader.defineAsyncComponent('LogoIcon')
+const HeaderContent = communalLoader.loadComponent('HeaderContent')
+const MainTitle = communalLoader.loadComponent('MainTitle')
+const SubmitButton = communalLoader.loadComponent('SubmitButton')
+const LogoIcon = communalLoader.loadComponent('LogoIcon')
 
 const mainRef = ref<any>()
 const boxRef = ref<HTMLElement>()