From b494bd617478a392347ea236e1f292cfb7426608 Mon Sep 17 00:00:00 2001
From: sudoooooo <zjbbabybaby@gmail.com>
Date: Mon, 22 Jul 2024 20:27:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E9=A1=B5=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/edit/components/ModuleNavbar.vue    |   2 +
 .../modules/contentModule/PublishPanel.vue    |   6 -
 .../edit/modules/contentModule/SavePanel.vue  |   2 -
 .../modules/resultModule/CatalogPanel.vue     |  98 +++++++++++
 .../modules/resultModule/PreviewPanel.vue     |  62 +++++++
 .../edit/modules/resultModule/SetterPanel.vue | 120 ++++++++++++++
 .../resultModule/components/OverTime.vue      |  34 ++++
 .../components/SuccessContent.vue             |  56 +++++++
 .../pages/edit/modules/resultModule/enum.js   |   4 +
 .../components/TeamMemberList.vue             | 101 ++++++++++++
 .../settingModule/components/WhiteList.vue    | 155 ++++++++++++++++++
 .../skin => skinModule}/CatalogPanel.vue      |   7 +-
 .../skin => skinModule}/PreviewPanel.vue      |  10 +-
 .../edit/modules/skinModule/SetterPanel.vue   |  85 ++++++++++
 .../pages/edit/setterConfig/bannerConfig.js   |  35 ++++
 .../config => setterConfig}/baseConfig.js     |   5 +-
 .../config => setterConfig}/baseFormConfig.js |  37 +++--
 .../pages/edit/setterConfig/logoConfig.js     |  16 ++
 .../pages/edit/setterConfig/skinConfig.js     |  48 ++++++
 .../pages/edit/setterConfig/statusConfig.js   |  26 +++
 .../pages/edit/setterConfig/submitConfig.js   |  62 +++++++
 web/src/management/store/edit/getters.js      |   2 +-
 22 files changed, 940 insertions(+), 33 deletions(-)
 create mode 100644 web/src/management/pages/edit/modules/resultModule/CatalogPanel.vue
 create mode 100644 web/src/management/pages/edit/modules/resultModule/PreviewPanel.vue
 create mode 100644 web/src/management/pages/edit/modules/resultModule/SetterPanel.vue
 create mode 100755 web/src/management/pages/edit/modules/resultModule/components/OverTime.vue
 create mode 100644 web/src/management/pages/edit/modules/resultModule/components/SuccessContent.vue
 create mode 100644 web/src/management/pages/edit/modules/resultModule/enum.js
 create mode 100644 web/src/management/pages/edit/modules/settingModule/components/TeamMemberList.vue
 create mode 100644 web/src/management/pages/edit/modules/settingModule/components/WhiteList.vue
 rename web/src/management/pages/edit/modules/{settingModule/skin => skinModule}/CatalogPanel.vue (96%)
 rename web/src/management/pages/edit/modules/{settingModule/skin => skinModule}/PreviewPanel.vue (96%)
 create mode 100644 web/src/management/pages/edit/modules/skinModule/SetterPanel.vue
 create mode 100644 web/src/management/pages/edit/setterConfig/bannerConfig.js
 rename web/src/management/pages/edit/{modules/settingModule/config => setterConfig}/baseConfig.js (97%)
 rename web/src/management/pages/edit/{modules/settingModule/config => setterConfig}/baseFormConfig.js (69%)
 create mode 100644 web/src/management/pages/edit/setterConfig/logoConfig.js
 create mode 100644 web/src/management/pages/edit/setterConfig/skinConfig.js
 create mode 100644 web/src/management/pages/edit/setterConfig/statusConfig.js
 create mode 100644 web/src/management/pages/edit/setterConfig/submitConfig.js

diff --git a/web/src/management/pages/edit/components/ModuleNavbar.vue b/web/src/management/pages/edit/components/ModuleNavbar.vue
index 14cdaf12..719af815 100644
--- a/web/src/management/pages/edit/components/ModuleNavbar.vue
+++ b/web/src/management/pages/edit/components/ModuleNavbar.vue
@@ -72,6 +72,8 @@ const updateLogicConf = () => {
 
     return res
   }
+
+  return res
 }
 
 // 校验 - 白名单
diff --git a/web/src/management/pages/edit/modules/contentModule/PublishPanel.vue b/web/src/management/pages/edit/modules/contentModule/PublishPanel.vue
index 118345a8..e8e68409 100644
--- a/web/src/management/pages/edit/modules/contentModule/PublishPanel.vue
+++ b/web/src/management/pages/edit/modules/contentModule/PublishPanel.vue
@@ -66,12 +66,6 @@ const handlePublish = async () => {
     return
   }
 
-  if(updateWhiteConf()){
-    isPublishing.value = false
-    ElMessage.error('请检查问卷设置是否有误')
-    return
-  }
-
   try {
     const saveRes: any = await saveSurvey(saveData)
     if (saveRes.code !== 200) {
diff --git a/web/src/management/pages/edit/modules/contentModule/SavePanel.vue b/web/src/management/pages/edit/modules/contentModule/SavePanel.vue
index 9332d06f..ae09f7c0 100644
--- a/web/src/management/pages/edit/modules/contentModule/SavePanel.vue
+++ b/web/src/management/pages/edit/modules/contentModule/SavePanel.vue
@@ -32,7 +32,6 @@ interface Props {
 
 const route = useRoute()
 const props = defineProps<Props>()
-
 const isSaving = ref<boolean>(false)
 const isShowAutoSave = ref<boolean>(false)
 const autoSaveStatus = ref<'succeed' | 'saving' | 'failed'>('succeed')
@@ -127,7 +126,6 @@ const handleSave = async () => {
   const { checked, msg } = validate()
   if (!checked) {
     isSaving.value = false
-    ElMessage.error('请检查问卷设置是否有误')
     ElMessage.error(msg)
     return
   }
diff --git a/web/src/management/pages/edit/modules/resultModule/CatalogPanel.vue b/web/src/management/pages/edit/modules/resultModule/CatalogPanel.vue
new file mode 100644
index 00000000..2659584c
--- /dev/null
+++ b/web/src/management/pages/edit/modules/resultModule/CatalogPanel.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="tab-box">
+    <div class="title">结果页状态选择</div>
+    <div class="status-list-wrapper">
+      <div
+        v-for="(status, index) in statusList"
+        :key="index"
+        class="status-item"
+        @click="handleChangePreview({ type: status.type })"
+      >
+        <span>{{ status.title }}</span>
+        <div class="preview-item">
+          <img :src="status.previewImg" :alt="status.title" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useStore } from 'vuex'
+import { EDIT_STATUS_MAP } from './enum'
+
+const store = useStore()
+const statusList = [
+  {
+    type: EDIT_STATUS_MAP.SUCCESS,
+    title: '提交成功',
+    previewImg: '/imgs/icons/success.webp'
+  },
+  {
+    type: EDIT_STATUS_MAP.OVERTIME,
+    title: '问卷过期',
+    previewImg: '/imgs/icons/overtime.webp'
+  }
+]
+
+const handleChangePreview = (data: any) => {
+  const currentStatus = store.state?.edit?.currentEditStatus
+
+  if (currentStatus && currentStatus !== data.type) {
+    store.commit('edit/changeStatusPreview', data)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.tab-box {
+  width: 300px;
+  height: 100%;
+  box-shadow: none;
+  border: none;
+  overflow-y: auto;
+  background-color: #fff;
+  .title {
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    color: $primary-color;
+    padding-left: 20px;
+    // background: #f9fafc;
+    border-bottom: 1px solid #edeffc;
+  }
+}
+.status-list-wrapper {
+  padding: 19px 18px 100px 19px;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  label.title {
+    font-size: 16px;
+    color: #333;
+  }
+
+  .status-item {
+    position: relative;
+    margin-bottom: 24px;
+
+    span {
+      display: block;
+      margin-bottom: 17px;
+      color: $font-color-stress;
+      font-size: 16px;
+    }
+    .preview-item {
+      padding: 40px 80px;
+    }
+    img {
+      position: relative;
+      width: 100%;
+      cursor: pointer;
+      transition: all 0.2s;
+      &:hover {
+        -webkit-filter: brightness(90%);
+        filter: brightness(90%);
+      }
+    }
+  }
+}
+</style>
diff --git a/web/src/management/pages/edit/modules/resultModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/resultModule/PreviewPanel.vue
new file mode 100644
index 00000000..4c7ded3e
--- /dev/null
+++ b/web/src/management/pages/edit/modules/resultModule/PreviewPanel.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="result-config-preview">
+    <div class="result-page-wrap">
+      <div class="result-page">
+        <component
+          :is="components[currentEditStatus]"
+          :key="currentEditStatus"
+          :module-config="moduleConfig"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { get as _get } from 'lodash-es'
+
+import SuccessContent from './components/SuccessContent.vue'
+import OverTime from './components/OverTime.vue'
+import { EDIT_STATUS_MAP } from './enum'
+
+const components = {
+  [EDIT_STATUS_MAP.SUCCESS]: SuccessContent,
+  [EDIT_STATUS_MAP.OVERTIME]: OverTime
+}
+
+const store = useStore()
+const currentEditStatus = computed(() => store.state?.edit?.currentEditStatus)
+const moduleConfig = computed(() => {
+  return _get(store.state, 'edit.schema.submitConf')
+})
+</script>
+<style lang="scss" scoped>
+.result-config-preview {
+  width: 100%;
+  height: 100%;
+  min-width: 500px;
+  padding-bottom: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f6f7f9;
+}
+
+.result-page-wrap {
+  width: 90%;
+  margin-top: 50px;
+  min-height: 812px;
+  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;
+    flex-direction: column;
+    height: 100%;
+  }
+}
+</style>
diff --git a/web/src/management/pages/edit/modules/resultModule/SetterPanel.vue b/web/src/management/pages/edit/modules/resultModule/SetterPanel.vue
new file mode 100644
index 00000000..6b651797
--- /dev/null
+++ b/web/src/management/pages/edit/modules/resultModule/SetterPanel.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="question-edit-form">
+    <div class="setter-title">
+      {{ currentEditText }}
+    </div>
+    <el-form class="question-config-form" label-position="top" @submit.prevent>
+      <template v-for="(item, index) in formFields" :key="index">
+        <FormItem
+          v-if="item.type && !item.hidden && Boolean(registerTypes[item.type])"
+          :form-config="item"
+          :style="item.style"
+        >
+          <Component
+            v-if="Boolean(registerTypes[item.type])"
+            :is="components[item.type]"
+            :module-config="moduleConfig"
+            :form-config="item"
+            @form-change="handleFormChange"
+          />
+        </FormItem>
+      </template>
+    </el-form>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue'
+import { useStore } from 'vuex'
+import { get as _get } from 'lodash-es'
+
+import FormItem from '@/materials/setters/widgets/FormItem.vue'
+import setterLoader from '@/materials/setters/setterLoader'
+import statusConfig from '@/management/pages/edit/setterConfig/statusConfig'
+
+const textMap = {
+  Success: '提交成功页面配置',
+  OverTime: '问卷过期页面配置'
+}
+
+const store = useStore()
+
+const components = shallowRef<any>({})
+const registerTypes = ref<any>({})
+const moduleConfig = computed(() => _get(store.state, 'edit.schema.submitConf'))
+const currentEditText = computed(() => (textMap as any)[store.state.edit.currentEditStatus])
+const formFields = computed(() => {
+  const currentStatus = store.state.edit.currentEditStatus
+  const formList = (statusConfig as any)[currentStatus] || []
+  const list = formList.map((item: any) => {
+    const value = _get(moduleConfig.value, item.key, item.value)
+
+    return { ...item, value }
+  })
+
+  registerComponents(list)
+
+  return list
+})
+
+const handleFormChange = ({ key, value }: any) => {
+  store.dispatch('edit/changeSchema', {
+    key: `submitConf.${key}`,
+    value
+  })
+}
+
+const registerComponents = async (formFieldData: any) => {
+  const setters = formFieldData.map((item: any) => item.type)
+  const settersSet = new Set(setters)
+  const settersArr = Array.from(settersSet)
+  const allSetters = settersArr.map((item) => {
+    return {
+      type: item,
+      path: item
+    }
+  })
+
+  try {
+    const comps = await setterLoader.loadComponents(allSetters)
+
+    for (const comp of comps) {
+      if (!comp) {
+        continue
+      }
+
+      const { type, component, err } = comp
+
+      if (!err) {
+        const componentName = component.name
+
+        components.value[type] = component
+        registerTypes.value[type] = componentName
+      }
+    }
+  } catch (err) {
+    console.error(err)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.question-edit-form {
+  width: 360px;
+  height: 100%;
+  overflow-y: auto;
+  background-color: #ffffff;
+}
+
+.setter-title {
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  color: $primary-color;
+  padding-left: 20px;
+  // background: #f9fafc;
+  border-bottom: 1px solid #edeffc;
+}
+
+.question-config-form {
+  padding: 30px 20px 50px 20px;
+}
+</style>
diff --git a/web/src/management/pages/edit/modules/resultModule/components/OverTime.vue b/web/src/management/pages/edit/modules/resultModule/components/OverTime.vue
new file mode 100755
index 00000000..95a92c25
--- /dev/null
+++ b/web/src/management/pages/edit/modules/resultModule/components/OverTime.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="over-time">
+    <img class="over-img" src="/imgs/icons/overtime.webp" />
+    <p class="title-msg" v-safe-html="resultText"></p>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  moduleConfig: any
+}
+const props = defineProps<Props>()
+const resultText = computed(() => props.moduleConfig?.msgContent?.msg_9001 || '问卷已过期')
+</script>
+<style lang="scss" scoped>
+.over-time {
+  text-align: center;
+  margin-bottom: 5.5rem;
+  height: 100%;
+
+  .title-msg {
+    width: 100%;
+    font-size: 16px;
+    color: #666;
+  }
+}
+
+.over-time .over-img {
+  margin-top: 1.6rem;
+  margin-bottom: 15px;
+  width: 100px;
+}
+</style>
diff --git a/web/src/management/pages/edit/modules/resultModule/components/SuccessContent.vue b/web/src/management/pages/edit/modules/resultModule/components/SuccessContent.vue
new file mode 100644
index 00000000..284b5e74
--- /dev/null
+++ b/web/src/management/pages/edit/modules/resultModule/components/SuccessContent.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="suc-page">
+    <div class="suc-content">
+      <div class="title-box">
+        <img src="/imgs/icons/success.webp" class="success-img" />
+        <div class="title-msg" v-safe-html="successText"></div>
+      </div>
+      <div class="bottom-btn"></div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  moduleConfig: any
+}
+const props = defineProps<Props>()
+const successText = computed(() => props.moduleConfig?.msgContent?.msg_200 || '')
+</script>
+<style lang="scss" scoped>
+/*成功页面跳转全屏展示浮层*/
+.suc-page {
+  padding: 0;
+  text-align: center;
+  width: 100%;
+  display: inline-block;
+  height: 100%;
+  .success-img {
+    margin-top: -0.2rem;
+    width: 100px;
+  }
+}
+
+.suc-content {
+  max-width: 920px;
+  margin: 0 auto;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  padding-top: 1.8rem;
+}
+
+.title-msg {
+  margin-top: 0.4rem;
+  margin-bottom: 0.4rem;
+  font-size: 0.36rem;
+  color: #666;
+  :deep(*) {
+    font-size: 0.36rem;
+  }
+}
+.bottom-btn {
+  height: 300px;
+}
+</style>
diff --git a/web/src/management/pages/edit/modules/resultModule/enum.js b/web/src/management/pages/edit/modules/resultModule/enum.js
new file mode 100644
index 00000000..31f86c81
--- /dev/null
+++ b/web/src/management/pages/edit/modules/resultModule/enum.js
@@ -0,0 +1,4 @@
+export const EDIT_STATUS_MAP = {
+  SUCCESS: 'Success',
+  OVERTIME: 'OverTime'
+}
diff --git a/web/src/management/pages/edit/modules/settingModule/components/TeamMemberList.vue b/web/src/management/pages/edit/modules/settingModule/components/TeamMemberList.vue
new file mode 100644
index 00000000..609009eb
--- /dev/null
+++ b/web/src/management/pages/edit/modules/settingModule/components/TeamMemberList.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="team-member-wrap">
+    <div class="team-tree-wrap">
+      <el-tree
+        ref="treeRef"
+        :default-expanded-keys="defaultCheckedKeys"
+        :default-checked-keys="defaultCheckedKeys"
+        :data="treeData"
+        empty-text="暂无数据"
+        @check="handleChange"
+        style="height: 201px"
+        highlight-current
+        show-checkbox
+        node-key="id"
+        :props="defaultProps"
+      />
+    </div>
+    <div class="member-count">
+      已选择 <span>{{ selectCount }}</span> 人
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, computed, defineProps, defineEmits, onMounted } from 'vue'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+import { getMemberList } from '@/management/api/space'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  formConfig: Object
+})
+const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
+
+const treeRef = ref(null)
+const treeData = ref([])
+const defaultCheckedKeys = ref([])
+const defaultProps = {
+  children: 'children',
+  label: 'label'
+}
+
+const handleChange = () => {
+  const key = props.formConfig.key
+  const userKeys = treeRef.value?.getCheckedKeys(true)
+  if (userKeys.length > 100) {
+    ElMessage.error('最多添加100个')
+    return
+  }
+  emit(FORM_CHANGE_EVENT_KEY, { key: key, value: userKeys })
+}
+
+const selectCount = computed(() => {
+  return treeRef.value?.getCheckedKeys(true).length || 0
+})
+
+const getSpaceMenus = async () => {
+  const res = await getMemberList()
+  if (res.code != 200) {
+    ElMessage.error('获取空间成员列表失败')
+  }
+  const data = res.data
+  data.map((v) => {
+    const members = v.members || []
+    treeData.value.push({
+      id: v.ownerId,
+      label: v.name,
+      children: members?.map((v) => ({
+        id: v.userId,
+        label: v.role
+      }))
+    })
+  })
+  defaultCheckedKeys.value = props.formConfig.value
+}
+
+onMounted(() => {
+  getSpaceMenus()
+})
+</script>
+<style lang="scss" scoped>
+.team-member-wrap {
+  width: 508px;
+
+  .team-tree-wrap {
+    background: #ffffff;
+    border: 1px solid rgba(227, 228, 232, 1);
+    border-radius: 2px;
+    min-height: 204px;
+    max-height: 204px;
+    overflow-x: auto;
+  }
+
+  .member-count {
+    text-align: right;
+
+    span {
+      color: $primary-color;
+    }
+  }
+}
+</style>
diff --git a/web/src/management/pages/edit/modules/settingModule/components/WhiteList.vue b/web/src/management/pages/edit/modules/settingModule/components/WhiteList.vue
new file mode 100644
index 00000000..6db2d252
--- /dev/null
+++ b/web/src/management/pages/edit/modules/settingModule/components/WhiteList.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="white-list-wrap">
+    <el-button class="create-btn" type="primary" @click="whiteVisible = true"> 添加 </el-button>
+    <el-button v-if="whitelist.length > 0" class="create-btn" color="#4A4C5B" @click="delAllList">
+      全部删除
+    </el-button>
+    <el-table
+      class="table-wrap"
+      empty-text="暂无数据"
+      :data="whitelist"
+      height="240"
+      style="width: 426px"
+    >
+      <el-table-column label="名单" width="350">
+        <template #default="scope">
+          <div>{{ whitelist[scope.$index] }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="74">
+        <template #default="scope">
+          <div @click="delRowItem(scope.$index)" class="flex cursor">
+            <i-ep-delete :size="16" />
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog v-model="whiteVisible" title="添加白名单" width="600" @closed="handleClose">
+      <div>
+        <el-form-item label-position="top" label="类型选择" label-width="auto">
+          <el-radio-group v-model="memberType" @change="handleTypeChange">
+            <el-radio value="MOBILE">手机号</el-radio>
+            <el-radio value="EMAIL">邮箱</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label-position="top" class="flex-column" label="名单录入" label-width="auto">
+          <el-input
+            v-model="whiteTextarea"
+            placeholder="多个用逗号(半角)“,”隔开"
+            rows="7"
+            resize="none"
+            type="textarea"
+          />
+        </el-form-item>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="whiteVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleChange"> 确定 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, nextTick } from 'vue'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+import { ElMessage } from 'element-plus'
+import { regexpMap } from '@/common/regexpMap.ts'
+
+const props = defineProps({
+  formConfig: Object
+})
+const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
+
+const whitelist = ref(props.formConfig.value[0] || [])
+const memberType = ref(props.formConfig.value[1] || 'MOBILE')
+const whiteVisible = ref(false)
+const whiteTextarea = ref(whitelist.value.join(','))
+
+const regularMap = {
+  MOBILE: regexpMap.m,
+  EMAIL: regexpMap.e
+}
+
+const checkValRule = (list) => {
+  let status = false
+  if (list.length > 100) {
+    ElMessage.error('最多添加100个')
+    return true
+  }
+  const pattern = regularMap[memberType.value]
+  if (!pattern) return false
+
+  for (let i = 0; i < list.length; i++) {
+    if (!pattern.test(list[i])) {
+      status = true
+      ElMessage.error('格式错误，请检查后重新输入~')
+      break
+    }
+  }
+
+  return status
+}
+
+const handleTypeChange = () => {
+  whiteTextarea.value = ''
+}
+
+const handleChange = () => {
+  const keys = props.formConfig.keys
+  const list = whiteTextarea.value ? whiteTextarea.value.split(',') : []
+  if (checkValRule(list)) return
+
+  emit(FORM_CHANGE_EVENT_KEY, { key: keys[0], value: list })
+  emit(FORM_CHANGE_EVENT_KEY, { key: keys[1], value: memberType.value })
+  whiteVisible.value = false
+}
+
+const handleClose = () => {
+  nextTick(() => {
+    whitelist.value = props.formConfig.value[0] || []
+    whiteTextarea.value = whitelist.value.join(',')
+    memberType.value = props.formConfig.value[1] || 'MOBILE'
+  })
+}
+
+const delRowItem = (index) => {
+  whitelist.value.splice(index, 1)
+  whiteTextarea.value = whitelist.value.join(',')
+  const keys = props.formConfig.keys
+  emit(FORM_CHANGE_EVENT_KEY, { key: keys[0], value: whitelist.value })
+}
+
+const delAllList = () => {
+  whitelist.value = []
+  whiteTextarea.value = ''
+  handleChange()
+}
+</script>
+<style lang="scss" scoped>
+.white-list-wrap {
+  .flex-column {
+    flex-direction: column;
+  }
+  :deep(th) {
+    padding: 4px 0;
+    background: #f6f7f9;
+  }
+  :deep(td) {
+    padding: 6px 0;
+  }
+  .table-wrap {
+    margin-top: 16px;
+    border: 1px solid #ebeef5;
+    border-radius: 2px;
+    overflow-x: hidden;
+  }
+  .cursor {
+    cursor: pointer;
+  }
+  .flex {
+    display: flex;
+  }
+}
+</style>
diff --git a/web/src/management/pages/edit/modules/settingModule/skin/CatalogPanel.vue b/web/src/management/pages/edit/modules/skinModule/CatalogPanel.vue
similarity index 96%
rename from web/src/management/pages/edit/modules/settingModule/skin/CatalogPanel.vue
rename to web/src/management/pages/edit/modules/skinModule/CatalogPanel.vue
index f39d169d..7f663cd6 100644
--- a/web/src/management/pages/edit/modules/settingModule/skin/CatalogPanel.vue
+++ b/web/src/management/pages/edit/modules/skinModule/CatalogPanel.vue
@@ -92,10 +92,6 @@ const changePreset = (banner: any) => {
   border: none;
   overflow-y: auto;
   background-color: #fff;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
   .title {
     height: 40px;
     line-height: 40px;
@@ -112,9 +108,8 @@ const changePreset = (banner: any) => {
     display: flex;
     flex-wrap: wrap;
     .tag {
+      margin: 5px 8px;
       cursor: pointer;
-      width: 51px;
-      margin: 5px 2px;
       &.current {
         color: $primary-color;
         background-color: $primary-bg-color;
diff --git a/web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue b/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue
similarity index 96%
rename from web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue
rename to web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue
index 64af2b95..1f8b6718 100644
--- a/web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue
+++ b/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue
@@ -13,12 +13,12 @@
             :readonly="false"
             :is-selected="currentEditOne === 'submit'"
           />
+          <LogoIcon
+            :logo-conf="bottomConf"
+            :readonly="false"
+            :is-selected="currentEditOne === 'logo'"
+          />
         </div>
-        <LogoIcon
-          :logo-conf="bottomConf"
-          :readonly="false"
-          :is-selected="currentEditOne === 'logo'"
-        />
       </div>
     </div>
   </div>
diff --git a/web/src/management/pages/edit/modules/skinModule/SetterPanel.vue b/web/src/management/pages/edit/modules/skinModule/SetterPanel.vue
new file mode 100644
index 00000000..3918286b
--- /dev/null
+++ b/web/src/management/pages/edit/modules/skinModule/SetterPanel.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="setter-wrapper">
+    <div class="setter-title">样式设置</div>
+    <div class="setter-content">
+      <el-collapse v-model="collapse">
+        <el-collapse-item
+          v-for="(collapse, index) in skinConfig"
+          :key="index"
+          :title="collapse.name"
+          :name="collapse.key"
+        >
+          <SetterField
+            :form-config-list="collapse.formConfigList"
+            :module-config="_get(schema, collapse.key, {})"
+            @form-change="
+              (key) => {
+                handleFormChange(key, collapse.key)
+              }
+            "
+          />
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
+import { get as _get } from 'lodash-es'
+
+import skinConfig from '@/management/pages/edit/setterConfig/skinConfig'
+import SetterField from '@/management/pages/edit/components/SetterField.vue'
+
+const store = useStore()
+const collapse = ref<string>('')
+const schema = computed(() => _get(store.state, 'edit.schema'))
+
+const handleFormChange = (data: any, collapse: string) => {
+  const { key, value } = data
+  const currentEditKey = `${collapse}`
+  const resultKey = `${currentEditKey}.${key}`
+
+  store.dispatch('edit/changeSchema', { key: resultKey, value })
+}
+</script>
+<style lang="scss" scoped>
+.setter-wrapper {
+  width: 360px;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: #fff;
+}
+
+.setter-title {
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  color: $primary-color;
+  padding-left: 20px;
+  // background: #f9fafc;
+  border-bottom: 1px solid #edeffc;
+}
+.setter-content {
+  padding: 10px 20px;
+  .el-collapse {
+    border: none;
+    :deep(.el-collapse-item__header) {
+      font-size: 14px;
+      color: #606266;
+      font-weight: bold;
+      border: none;
+    }
+    :deep(.el-collapse-item__wrap) {
+      border: none;
+      .el-collapse-item__content {
+        padding-bottom: 0px !important;
+      }
+    }
+  }
+  .config-form {
+    padding: 0 !important;
+  }
+}
+</style>
diff --git a/web/src/management/pages/edit/setterConfig/bannerConfig.js b/web/src/management/pages/edit/setterConfig/bannerConfig.js
new file mode 100644
index 00000000..9263920e
--- /dev/null
+++ b/web/src/management/pages/edit/setterConfig/bannerConfig.js
@@ -0,0 +1,35 @@
+export default [
+  {
+    label: '顶部图片地址',
+    type: 'InputSetter',
+    key: 'bgImage',
+    labelStyle: { width: '120px' }
+  },
+  {
+    label: '顶部视频地址',
+    type: 'InputSetter',
+    key: 'videoLink',
+    labelStyle: { width: '120px' }
+  },
+  {
+    label: '视频海报地址',
+    type: 'InputSetter',
+    key: 'postImg',
+    labelStyle: { width: '120px' }
+  },
+  {
+    label: '图片支持点击',
+    type: 'CustomedSwitch',
+    labelStyle: { width: '120px' },
+    key: 'bgImageAllowJump'
+  },
+  {
+    label: '跳转链接',
+    type: 'InputSetter',
+    labelStyle: { width: '120px' },
+    key: 'bgImageJumpLink',
+    relyFunc: (data) => {
+      return !!data?.bgImageAllowJump
+    }
+  }
+]
diff --git a/web/src/management/pages/edit/modules/settingModule/config/baseConfig.js b/web/src/management/pages/edit/setterConfig/baseConfig.js
similarity index 97%
rename from web/src/management/pages/edit/modules/settingModule/config/baseConfig.js
rename to web/src/management/pages/edit/setterConfig/baseConfig.js
index 146a5a1b..5146ca37 100644
--- a/web/src/management/pages/edit/modules/settingModule/config/baseConfig.js
+++ b/web/src/management/pages/edit/setterConfig/baseConfig.js
@@ -8,10 +8,11 @@ export default [
     title: '提交限制',
     key: 'limitConfig',
     formList: ['limit_tLimit']
-  },
-  {
+  }, {
     title: '作答限制',
     key: 'respondConfig',
     formList: ['interview_pwd','answer_type','white_placeholder','white_list','team_list']
   }
 ]
+
+
diff --git a/web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js b/web/src/management/pages/edit/setterConfig/baseFormConfig.js
similarity index 69%
rename from web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js
rename to web/src/management/pages/edit/setterConfig/baseFormConfig.js
index 58f28292..726d0c48 100644
--- a/web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js
+++ b/web/src/management/pages/edit/setterConfig/baseFormConfig.js
@@ -27,36 +27,51 @@ export default {
     label: '访问密码',
     type: 'SwitchInput',
     placeholder: '请输入6位字符串类型访问密码 ',
-    maxLength: 6,
+    maxLength: 6
   },
   answer_type: {
     key: 'baseConf.whitelistType',
     label: '答题名单',
-    type: 'AnswerRadio',
+    type: 'RadioGroup',
+    options: [
+      {
+        label: '所有人',
+        value: 'ALL'
+      },
+      {
+        label: '空间成员',
+        value: 'MEMBER'
+      },
+      {
+        label: '白名单',
+        value: 'CUSTOM'
+      }
+    ]
   },
-  white_placeholder:{
+  white_placeholder: {
     key: 'baseConf.whitelistTip',
     label: '名单登录提示语',
-    placeholder:'请输入名单提示语',
+    placeholder: '请输入名单提示语',
     type: 'InputWordLimit',
     maxLength: 40,
     relyFunc: (data) => {
-      return  ['CUSTOM','MEMBER'].includes(data.whitelistType)
+      return ['CUSTOM', 'MEMBER'].includes(data.whitelistType)
     }
   },
-  white_list:{
-    keys: ['baseConf.whitelist','baseConf.memberType'],
+  white_list: {
+    keys: ['baseConf.whitelist', 'baseConf.memberType'],
     label: '白名单列表',
-    type: 'whiteList',
+    type: 'WhiteList',
+    custom: true, // 自定义导入高级组件
     relyFunc: (data) => {
-      
       return data.whitelistType == 'CUSTOM'
     }
   },
-  team_list:{
+  team_list: {
     key: 'baseConf.whitelist',
     label: '团队空间成员选择',
-    type: 'teamMemberList',
+    type: 'TeamMemberList',
+    custom: true, // 自定义导入高级组件
     relyFunc: (data) => {
       return data.whitelistType == 'MEMBER'
     }
diff --git a/web/src/management/pages/edit/setterConfig/logoConfig.js b/web/src/management/pages/edit/setterConfig/logoConfig.js
new file mode 100644
index 00000000..9d2bff7f
--- /dev/null
+++ b/web/src/management/pages/edit/setterConfig/logoConfig.js
@@ -0,0 +1,16 @@
+export default [
+  {
+    label: '自定义Logo',
+    type: 'InputSetter',
+    key: 'logoImage',
+    tip: '默认尺寸200px*50px',
+    labelStyle: { width: '120px' }
+  },
+  {
+    label: 'Logo大小',
+    type: 'InputPercent',
+    key: 'logoImageWidth',
+    tip: '填写宽度百分比，例如30%',
+    labelStyle: { width: '120px' }
+  }
+]
diff --git a/web/src/management/pages/edit/setterConfig/skinConfig.js b/web/src/management/pages/edit/setterConfig/skinConfig.js
new file mode 100644
index 00000000..9177466d
--- /dev/null
+++ b/web/src/management/pages/edit/setterConfig/skinConfig.js
@@ -0,0 +1,48 @@
+import bannerConfig from './bannerConfig'
+import logoConfig from './logoConfig'
+
+export default [
+  {
+    name: '头图',
+    key: 'bannerConf.bannerConfig',
+    formConfigList: bannerConfig
+  },
+  {
+    name: '背景',
+    key: 'skinConf.backgroundConf',
+    formConfigList: [
+      {
+        label: '背景颜色',
+        type: 'ColorPicker',
+        key: 'color'
+      }
+    ]
+  },
+  {
+    name: '主题色',
+    key: 'skinConf.themeConf',
+    formConfigList: [
+      {
+        label: '全局应用',
+        type: 'ColorPicker',
+        key: 'color'
+      }
+    ]
+  },
+  {
+    key: 'skinConf.contentConf',
+    name: '内容区域',
+    formConfigList: [
+      {
+        label: '内容透明度',
+        type: 'SliderSetter',
+        key: 'opacity'
+      }
+    ]
+  },
+  {
+    name: '品牌logo',
+    key: 'bottomConf',
+    formConfigList: logoConfig
+  }
+]
diff --git a/web/src/management/pages/edit/setterConfig/statusConfig.js b/web/src/management/pages/edit/setterConfig/statusConfig.js
new file mode 100644
index 00000000..520732a0
--- /dev/null
+++ b/web/src/management/pages/edit/setterConfig/statusConfig.js
@@ -0,0 +1,26 @@
+export default {
+  Success: [
+    {
+      label: '提示文案',
+      type: 'RichText',
+      key: 'msgContent.msg_200',
+      placeholder: '提交成功',
+      value: '提交成功',
+      labelStyle: {
+        'font-weight': 'bold'
+      }
+    }
+  ],
+  OverTime: [
+    {
+      label: '提示文案',
+      type: 'RichText',
+      key: 'msgContent.msg_9001',
+      placeholder: '问卷已过期',
+      value: '问卷已过期',
+      labelStyle: {
+        'font-weight': 'bold'
+      }
+    }
+  ]
+}
diff --git a/web/src/management/pages/edit/setterConfig/submitConfig.js b/web/src/management/pages/edit/setterConfig/submitConfig.js
new file mode 100644
index 00000000..ae4efa97
--- /dev/null
+++ b/web/src/management/pages/edit/setterConfig/submitConfig.js
@@ -0,0 +1,62 @@
+export default [
+  {
+    title: '提交按钮文案',
+    type: 'InputSetter',
+    key: 'submitTitle',
+    placeholder: '提交',
+    value: ''
+  },
+  {
+    title: '提交确认弹窗',
+    type: 'Customed',
+    key: 'confirmAgain',
+    content: [
+      {
+        label: '是否配置该项',
+        labelStyle: { width: '120px' },
+        type: 'CustomedSwitch',
+        key: 'confirmAgain.is_again',
+        value: true
+      },
+      {
+        label: '二次确认文案',
+        labelStyle: { width: '120px' },
+        type: 'InputSetter',
+        key: 'confirmAgain.again_text',
+        placeholder: '确认要提交吗？',
+        value: '确认要提交吗？'
+      }
+    ]
+  },
+  {
+    title: '提交文案配置',
+    type: 'Customed',
+    key: 'msgContent',
+    content: [
+      {
+        label: '已提交',
+        labelStyle: { width: '120px' },
+        type: 'InputSetter',
+        key: 'msgContent.msg_9002',
+        placeholder: '请勿多次提交！',
+        value: '请勿多次提交！'
+      },
+      {
+        label: '提交结束',
+        labelStyle: { width: '120px' },
+        type: 'InputSetter',
+        key: 'msgContent.msg_9003',
+        placeholder: '您来晚了，已经满额！',
+        value: '您来晚了，已经满额！'
+      },
+      {
+        label: '其他提交失败',
+        labelStyle: { width: '120px' },
+        type: 'InputSetter',
+        key: 'msgContent.msg_9004',
+        placeholder: '提交失败！',
+        value: '提交失败！'
+      }
+    ]
+  }
+]
diff --git a/web/src/management/store/edit/getters.js b/web/src/management/store/edit/getters.js
index 3350922d..2129819c 100644
--- a/web/src/management/store/edit/getters.js
+++ b/web/src/management/store/edit/getters.js
@@ -1,4 +1,4 @@
-import submitFormConfig from '@/management/config/setterConfig/submitConfig'
+import submitFormConfig from '@/management/pages/edit/setterConfig/submitConfig'
 import questionLoader from '@/materials/questions/questionLoader'
 
 const innerMetaConfig = {