From 377d3d740947c59af73cb2890022aec9ea0de98c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9F=B3=E4=BE=9D=E5=A9=B7?= <1322922489@qq.com>
Date: Mon, 10 Jun 2024 10:56:22 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E6=96=AD=E7=82=B9?=
 =?UTF-8?q?=E7=BB=AD=E7=AD=94=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/components.d.ts                           |   4 -
 .../modules/settingModule/SettingPanel.vue    |   2 +-
 .../settingModule/config/baseConfig.js        |   2 +-
 .../settingModule/config/baseFormConfig.js    |  14 ++
 web/src/management/store/edit/state.js        |   4 +-
 .../materials/setters/widgets/ELSwitch.vue    |  38 ++++
 .../render/components/BackAnswerDialog.vue    |  78 ++++++++
 web/src/render/pages/IndexPage.vue            |  13 ++
 web/src/render/store/actions.js               | 166 +++++++++++++++---
 web/src/render/store/mutations.js             |  13 +-
 10 files changed, 299 insertions(+), 35 deletions(-)
 create mode 100644 web/src/materials/setters/widgets/ELSwitch.vue
 create mode 100644 web/src/render/components/BackAnswerDialog.vue

diff --git a/web/components.d.ts b/web/components.d.ts
index 8824b169..1163e3dd 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -11,7 +11,6 @@ declare module 'vue' {
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
-    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -25,13 +24,10 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
diff --git a/web/src/management/pages/edit/modules/settingModule/SettingPanel.vue b/web/src/management/pages/edit/modules/settingModule/SettingPanel.vue
index 176dbaee..629b713e 100644
--- a/web/src/management/pages/edit/modules/settingModule/SettingPanel.vue
+++ b/web/src/management/pages/edit/modules/settingModule/SettingPanel.vue
@@ -67,13 +67,13 @@ const setterList = computed(() => {
         }
       } else {
         formValue = _get(store.state.edit.schema, formKey, formItem.value)
+        console.log("formVaue:", formValue)
         dataConfig[formKey] = formValue
       }
       formItem.value = formValue
     }
 
     form.dataConfig = dataConfig
-
     return form
   })
 })
diff --git a/web/src/management/pages/edit/modules/settingModule/config/baseConfig.js b/web/src/management/pages/edit/modules/settingModule/config/baseConfig.js
index bdeab24a..6af2a296 100644
--- a/web/src/management/pages/edit/modules/settingModule/config/baseConfig.js
+++ b/web/src/management/pages/edit/modules/settingModule/config/baseConfig.js
@@ -7,6 +7,6 @@ export default [
   {
     title: '提交限制',
     key: 'limitConfig',
-    formList: ['limit_tLimit']
+    formList: ['limit_tLimit', 'limit_breakAnswer', 'limit_backAnswer']
   }
 ]
diff --git a/web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js b/web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js
index 59fed0a1..e1556f87 100644
--- a/web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js
+++ b/web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js
@@ -21,5 +21,19 @@ export default {
     tip: '问卷仅在指定时间段内可填写',
     type: 'QuestionTimeHour',
     placement: 'top'
+  },
+  limit_breakAnswer: {
+    key: 'baseConf.breakAnswer',
+    label: '允许断点续答',
+    tip: '回填前一次作答中的内容（注：更换设备/浏览器/清除缓存/更改内容重新发布则此功能失效）',
+    type: 'ELSwitch',
+    value: false
+  },
+  limit_backAnswer: {
+    key: 'baseConf.backAnswer',
+    label: '自动填充上次填写内容',
+    tip: '回填前一次提交的内容（注：更换设备/浏览器/清除缓存/更改内容重新发布则此功能失效）',
+    type: 'ELSwitch',
+    value: false
   }
 }
diff --git a/web/src/management/store/edit/state.js b/web/src/management/store/edit/state.js
index 1927e24a..42730268 100644
--- a/web/src/management/store/edit/state.js
+++ b/web/src/management/store/edit/state.js
@@ -42,7 +42,9 @@ export default {
       tLimit: 0,
       answerBegTime: '',
       answerEndTime: '',
-      answerLimitTime: 0
+      answerLimitTime: 0,
+      breakAnswer: false,
+      backAnswer: false
     },
     submitConf: {
       submitTitle: '',
diff --git a/web/src/materials/setters/widgets/ELSwitch.vue b/web/src/materials/setters/widgets/ELSwitch.vue
new file mode 100644
index 00000000..10347939
--- /dev/null
+++ b/web/src/materials/setters/widgets/ELSwitch.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-switch
+    v-model="modelValue"
+    class="ml-2"
+    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+    active-text="是"
+    inactive-text="否"
+    @change="handleInputChange"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
+interface Props {
+  formConfig: any
+  moduleConfig: any
+}
+
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: boolean }): void
+}
+
+const emit = defineEmits<Emit>()
+const props = defineProps<Props>()
+const modelValue = ref(props.formConfig.value)
+
+const handleInputChange = (value: boolean) => {
+  const key = props.formConfig.key
+
+  modelValue.value = value
+
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
+}
+</script>
+
+  
\ No newline at end of file
diff --git a/web/src/render/components/BackAnswerDialog.vue b/web/src/render/components/BackAnswerDialog.vue
new file mode 100644
index 00000000..630308c2
--- /dev/null
+++ b/web/src/render/components/BackAnswerDialog.vue
@@ -0,0 +1,78 @@
+<template>
+    <div class="mask" v-show="visible">
+      <div class="box">
+        <div class="title">{{ title }}</div>
+        <div class="btn-box">
+          <div class="btn cancel" @click="handleCancel">{{ cancelBtnText }}</div>
+          <div class="btn confirm" @click="handleConfirm">{{ confirmBtnText }}</div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script setup lang="ts">
+  interface Props {
+    visible?: boolean
+    cancelBtnText?: string
+    confirmBtnText?: string
+    title?: string
+  }
+  
+  interface Emit {
+    (ev: 'confirm', callback: () => void): void
+    (ev: 'close'): void
+  }
+  
+  const emit = defineEmits<Emit>()
+  
+  withDefaults(defineProps<Props>(), {
+    visible: false,
+    cancelBtnText: '取消',
+    confirmBtnText: '确定',
+    title: ''
+  })
+  
+  const handleConfirm = () => {
+    emit('confirm', () => {
+      emit('close')
+    })
+  }
+  
+  const handleCancel = () => {
+    emit('cancel', () => {
+        emit('close')
+    })
+  }
+  </script>
+  <style lang="scss" scoped>
+  @import url('../styles/dialog.scss');
+  
+  .btn-box {
+    padding: 20px 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  
+    .btn {
+      width: 48%;
+      font-size: 0.28rem;
+      border-radius: 0.04rem;
+      text-align: center;
+      padding: 0.16rem 0;
+      line-height: 0.4rem;
+      cursor: pointer;
+  
+      &.cancel {
+        background: #fff;
+        color: #92949d;
+        border: 1px solid #e3e4e8;
+      }
+  
+      &.confirm {
+        background-color: #4a4c5b;
+        border: 1px solid #4a4c5b;
+        color: #fff;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/web/src/render/pages/IndexPage.vue b/web/src/render/pages/IndexPage.vue
index 7f02b5cd..669d852c 100644
--- a/web/src/render/pages/IndexPage.vue
+++ b/web/src/render/pages/IndexPage.vue
@@ -79,6 +79,18 @@ const normalizationRequestBody = () => {
     clientTime: Date.now()
   }
 
+  //浏览器缓存数据
+  localStorage.removeItem(surveyPath + "_questionData")
+  localStorage.removeItem("isSubmit")
+
+  //数据加密
+  var formData  = Object.assign({}, store.state.formValues)
+    for(const key in formData){
+      formData[key] = encodeURIComponent(formData[key])
+    }
+  localStorage.setItem(surveyPath + "_questionData", JSON.stringify(formData))
+  localStorage.setItem('isSubmit', JSON.stringify(true))
+
   if (encryptInfo?.encryptType) {
     result.encryptType = encryptInfo?.encryptType
     result.data = encrypt[result.encryptType as 'rsa']({
@@ -100,6 +112,7 @@ const submitSurver = async () => {
     const params = normalizationRequestBody()
     console.log(params)
     const res: any = await submitForm(params)
+
     if (res.code === 200) {
       store.commit('setRouter', 'successPage')
     } else {
diff --git a/web/src/render/store/actions.js b/web/src/render/store/actions.js
index 3438ebea..34958c1e 100644
--- a/web/src/render/store/actions.js
+++ b/web/src/render/store/actions.js
@@ -6,6 +6,9 @@ moment.locale('zh-cn')
 import adapter from '../adapter'
 import { queryVote, getEncryptInfo } from '@/render/api/survey'
 import { RuleMatch } from '@/common/logicEngine/RulesMatch'
+import state from './state'
+import useCommandComponent from '../hooks/useCommandComponent'
+import BackAnswerDialog from '../components/BackAnswerDialog.vue'
 /**
  * CODE_MAP不从management引入，在dev阶段，会导致B端 router被加载，进而导致C端路由被添加 baseUrl: /management
  */
@@ -15,12 +18,13 @@ const CODE_MAP = {
   NO_AUTH: 403
 }
 const VOTE_INFO_KEY = 'voteinfo'
+const confirm = useCommandComponent(BackAnswerDialog)
 
 export default {
   // 初始化
-  init({ commit, dispatch }, { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }) {
+  init({ commit, dispatch },{ bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf}) {
     commit('setEnterTime')
-    const { begTime, endTime, answerBegTime, answerEndTime } = baseConf
+    const { begTime, endTime, answerBegTime, answerEndTime, breakAnswer, backAnswer} = baseConf
     const { msgContent } = submitConf
     const now = Date.now()
     if (now < new Date(begTime).getTime()) {
@@ -53,33 +57,73 @@ export default {
         return
       }
     }
-    commit('setRouter', 'indexPage')
 
-    // 根据初始的schema生成questionData, questionSeq, rules, formValues, 这四个字段
-    const { questionData, questionSeq, rules, formValues } = adapter.generateData({
-      bannerConf,
-      baseConf,
-      bottomConf,
-      dataConf,
-      skinConf,
-      submitConf
-    })
+    //回填，断点续填
+    const localData = JSON.parse(localStorage.getItem(state.surveyPath + "_questionData"))
 
-    // 将数据设置到state上
-    commit('assignState', {
-      questionData,
-      questionSeq,
-      rules,
-      bannerConf,
-      baseConf,
-      bottomConf,
-      dataConf,
-      skinConf,
-      submitConf,
-      formValues
-    })
-    // 获取已投票数据
-    dispatch('initVoteData')
+    //数据解密
+    for(const key in localData){
+      localData[key] = decodeURIComponent(localData[key])
+    }
+
+    const isSubmit = JSON.parse(localStorage.getItem('isSubmit'))
+    if(localData) {
+      if(isSubmit){
+        if(!backAnswer) {
+          clearFormData({ commit, dispatch }, { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf })
+        } else {
+          confirm({
+            title: "您之前已提交过问卷，是否要回填？",
+            onConfirm: async () => {
+              try {
+                loadFormData({ commit, dispatch }, {bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }, localData)
+              } catch (error) {
+                console.log(error)
+              } finally {
+                confirm.close()
+              }
+            },
+            onCancel: async() => {
+              try {
+                clearFormData({ commit, dispatch }, { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf })
+              } catch (error) {
+                console.log(error)
+              } finally {
+                confirm.close()
+              }
+            }
+          })
+        }
+      } else{
+        if(!breakAnswer) {
+          clearFormData({ commit, dispatch }, { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf })
+        } else {
+          confirm({
+            title: "您之前已填写部分内容, 是否要继续填写?",
+            onConfirm: async () => {
+              try {
+                loadFormData({ commit, dispatch }, {bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }, localData)
+              } catch (error) {
+                console.log(error)
+              } finally {
+                confirm.close()
+              }
+            },
+            onCancel: async() => {
+              try {
+                clearFormData({ commit, dispatch }, { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf })
+              } catch (error) {
+                console.log(error)
+              } finally {
+                confirm.close()
+              }
+            }
+          })
+        }
+      }
+    } else {
+      clearFormData({ commit, dispatch }, { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf })
+    }
   },
   // 用户输入或者选择后，更新表单数据
   changeData({ commit }, data) {
@@ -175,3 +219,71 @@ export default {
     commit('setRuleEgine', ruleEngine)
   }
 }
+
+  // 加载上次填写过的数据到问卷页
+  function loadFormData({ commit, dispatch }, {bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }, formData) {
+    commit('setRouter', 'indexPage')
+
+    // 根据初始的schema生成questionData, questionSeq, rules, formValues, 这四个字段
+    const { questionData, questionSeq, rules, formValues } = adapter.generateData({
+      bannerConf,
+      baseConf,
+      bottomConf,
+      dataConf,
+      skinConf,
+      submitConf
+    })
+    console.log("formdata", formData)
+
+    for(const key in formData){
+      formValues[key] = formData[key]
+      console.log("formValues",formValues)
+    }
+
+    // 将数据设置到state上
+    commit('assignState', {
+      questionData,
+      questionSeq,
+      rules,
+      bannerConf,
+      baseConf,
+      bottomConf,
+      dataConf,
+      skinConf,
+      submitConf,
+      formValues
+    })
+    // 获取已投票数据
+    dispatch('initVoteData')
+  }
+
+  // 加载空白页面
+  function clearFormData({ commit, dispatch }, { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }) {
+    commit('setRouter', 'indexPage')
+
+    // 根据初始的schema生成questionData, questionSeq, rules, formValues, 这四个字段
+    const { questionData, questionSeq, rules, formValues } = adapter.generateData({
+      bannerConf,
+      baseConf,
+      bottomConf,
+      dataConf,
+      skinConf,
+      submitConf
+    })
+
+    // 将数据设置到state上
+    commit('assignState', {
+      questionData,
+      questionSeq,
+      rules,
+      bannerConf,
+      baseConf,
+      bottomConf,
+      dataConf,
+      skinConf,
+      submitConf,
+      formValues
+    })
+    // 获取已投票数据
+    dispatch('initVoteData')
+  }
diff --git a/web/src/render/store/mutations.js b/web/src/render/store/mutations.js
index 33bc69f0..7ba6ab41 100644
--- a/web/src/render/store/mutations.js
+++ b/web/src/render/store/mutations.js
@@ -20,8 +20,19 @@ export default {
   },
   changeFormData(state, data) {
     let { key, value } = data
-    // console.log('formValues', key, value)
     set(state, `formValues.${key}`, value)
+
+    //数据加密
+    var formData = Object.assign({}, state.formValues);
+    for(const key in formData){
+      formData[key] = encodeURIComponent(formData[key])
+    }
+
+    //浏览器存储
+    localStorage.removeItem(state.surveyPath + "_questionData")
+    localStorage.setItem(state.surveyPath + "_questionData", JSON.stringify(formData))
+    localStorage.setItem('isSubmit', JSON.stringify(false))
+
   },
   changeSelectMoreData(state, data) {
     const { key, value, field } = data

From f5d343d420d5d41dc1dabf699ec777ff753bb512 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9F=B3=E4=BE=9D=E5=A9=B7?= <1322922489@qq.com>
Date: Tue, 18 Jun 2024 10:05:19 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E6=96=AD=E7=82=B9?=
 =?UTF-8?q?=E7=BB=AD=E7=AD=94=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/components.d.ts                           | 24 -------------------
 .../render/components/BackAnswerDialog.vue    |  1 +
 2 files changed, 1 insertion(+), 24 deletions(-)

diff --git a/web/components.d.ts b/web/components.d.ts
index 1163e3dd..c054149b 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -9,51 +9,27 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCollapse: typeof import('element-plus/es')['ElCollapse']
-    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
-    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    IEpBottom: typeof import('~icons/ep/bottom')['default']
-    IEpCheck: typeof import('~icons/ep/check')['default']
-    IEpCirclePlus: typeof import('~icons/ep/circle-plus')['default']
-    IEpClose: typeof import('~icons/ep/close')['default']
-    IEpCopyDocument: typeof import('~icons/ep/copy-document')['default']
-    IEpDelete: typeof import('~icons/ep/delete')['default']
-    IEpLoading: typeof import('~icons/ep/loading')['default']
-    IEpMinus: typeof import('~icons/ep/minus')['default']
     IEpMore: typeof import('~icons/ep/more')['default']
-    IEpPlus: typeof import('~icons/ep/plus')['default']
-    IEpQuestionFilled: typeof import('~icons/ep/question-filled')['default']
-    IEpRank: typeof import('~icons/ep/rank')['default']
-    IEpRemove: typeof import('~icons/ep/remove')['default']
     IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSort: typeof import('~icons/ep/sort')['default']
     IEpSortDown: typeof import('~icons/ep/sort-down')['default']
     IEpSortUp: typeof import('~icons/ep/sort-up')['default']
-    IEpTop: typeof import('~icons/ep/top')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/web/src/render/components/BackAnswerDialog.vue b/web/src/render/components/BackAnswerDialog.vue
index 630308c2..eeafa7ee 100644
--- a/web/src/render/components/BackAnswerDialog.vue
+++ b/web/src/render/components/BackAnswerDialog.vue
@@ -19,6 +19,7 @@
   
   interface Emit {
     (ev: 'confirm', callback: () => void): void
+    (ev: 'cancel', callback: () => void): void
     (ev: 'close'): void
   }
   

From aa0c4b8afc7a7a683b03bfecb155a5fb09dfc53c Mon Sep 17 00:00:00 2001
From: dayou <853094838@qq.com>
Date: Fri, 21 Jun 2024 11:41:50 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E5=90=8C=E6=AD=A5=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=B9=B6=E4=B8=94=E8=A7=A3=E5=86=B3=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   2 +-
 README_EN.md                                  |   4 +-
 nginx/nginx.conf                              |   5 +
 server/package.json                           |   4 +
 .../survey/controllers/survey.controller.ts   |  32 +++
 web/components.d.ts                           |  12 ++
 web/public/imgs/preview-phone.png             | Bin 0 -> 7320 bytes
 web/src/common/typeEnum.ts                    |  50 +++++
 web/src/management/api/space.ts               |   5 +-
 web/src/management/components/LeftMenu.vue    |  14 +-
 .../pages/edit/components/ModuleNavbar.vue    |   2 +
 .../modules/contentModule/PreviewPanel.vue    | 177 ++++++++++++++++
 .../edit/modules/generalModule/BackPanel.vue  |   8 +-
 .../logicModule/components/ConditionView.vue  |  25 +--
 .../logicModule/components/RuleNodeView.vue   |   4 +-
 .../questionModule/components/TypeList.vue    |   6 +-
 .../pages/list/components/BaseList.vue        |   2 +-
 .../pages/list/components/SpaceList.vue       |   5 +-
 .../pages/list/components/SpaceModify.vue     |   1 -
 .../management/pages/publish/PublishPage.vue  |   2 +-
 web/src/management/router/index.ts            |  97 ++++-----
 web/src/management/store/actions.js           |   1 -
 .../utils/{constant.js => constant.ts}        |   9 +-
 web/src/management/utils/index.js             |   3 +-
 .../questions/common/config/tagList.js        |  15 --
 .../EditOptions/Options/OptionEditBar.vue     |   4 +-
 .../TitleModules/TitleContent/index.jsx       |   4 +-
 .../questions/widgets/VoteModule/index.jsx    |   4 +-
 .../materials/setters/widgets/InputNumber.vue |   4 +-
 web/src/render/App.vue                        |  83 +-------
 web/src/render/adapter/formValue.js           |   3 +-
 web/src/render/adapter/question.js            |   4 +-
 web/src/render/adapter/rules.js               |  11 +-
 web/src/render/api/survey.js                  |   8 +
 web/src/render/components/MaterialGroup.vue   |   3 -
 web/src/render/components/QuestionWrapper.vue |   8 +-
 web/src/render/constant/index.js              |  14 --
 web/src/render/main.js                        |   4 +-
 web/src/render/pages/EmptyPage.vue            |   6 +-
 web/src/render/pages/ErrorPage.vue            |  44 ++--
 web/src/render/pages/IndexPage.vue            | 196 +++++-------------
 web/src/render/pages/RenderPage.vue           | 173 ++++++++++++++++
 web/src/render/router/index.ts                |  38 ++++
 web/src/render/store/actions.js               |  12 +-
 web/src/render/store/getters.js               |   1 -
 web/src/render/store/mutations.js             |   3 -
 web/src/render/store/state.js                 |   1 -
 web/vite.config.ts                            |   4 +
 48 files changed, 706 insertions(+), 411 deletions(-)
 create mode 100644 web/public/imgs/preview-phone.png
 create mode 100644 web/src/common/typeEnum.ts
 create mode 100644 web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue
 rename web/src/management/utils/{constant.js => constant.ts} (52%)
 delete mode 100644 web/src/materials/questions/common/config/tagList.js
 delete mode 100644 web/src/render/constant/index.js
 create mode 100644 web/src/render/pages/RenderPage.vue
 create mode 100644 web/src/render/router/index.ts

diff --git a/README.md b/README.md
index 0973f75d..ddd9e1ab 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@
       <img src="https://img.shields.io/badge/help-%E5%AE%98%E7%BD%91-blue" alt="docs">
     </a>
     <a href="https://github.com/didi/xiaoju-survey/blob/main/README_EN.md">
-      <img src="https://img.shields.io/badge/help-%E8%8B%B1%E6%96%87README-50c62a" alt="docs">
+      <img src="https://img.shields.io/badge/help-README_EN-50c62a" alt="docs">
     </a>
   </div>
 </div>
diff --git a/README_EN.md b/README_EN.md
index b69c0da0..b827ecf7 100644
--- a/README_EN.md
+++ b/README_EN.md
@@ -19,10 +19,10 @@
       <img src="https://img.shields.io/badge/PRs-welcome-%23ffa600" alt="pr">
     </a>
     <a href="https://xiaojusurvey.didi.cn">
-      <img src="https://img.shields.io/badge/help-%E5%AE%98%E7%BD%91-blue" alt="docs">
+      <img src="https://img.shields.io/badge/help-website-blue" alt="docs">
     </a>
     <a href="https://github.com/didi/xiaoju-survey/blob/main/README.md">
-      <img src="https://img.shields.io/badge/help-README-50c62a" alt="docs">
+      <img src="https://img.shields.io/badge/help-README_ZH-50c62a" alt="docs">
     </a>
   </div>
 </div>
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
index 88c6265d..34854cdf 100644
--- a/nginx/nginx.conf
+++ b/nginx/nginx.conf
@@ -39,6 +39,11 @@ http {
       try_files $uri $uri/ /management.html;
     }
 
+    location /management/preview/ {
+      try_files $uri $uri/ /render.html;
+    }
+
+
     location /render/ {
       try_files $uri $uri/ /render.html;
     }
diff --git a/server/package.json b/server/package.json
index 44164d74..f6aade83 100644
--- a/server/package.json
+++ b/server/package.json
@@ -97,5 +97,9 @@
     "moduleNameMapper": {
       "^src/(.*)$": "<rootDir>/$1"
     }
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=8.6.0"
   }
 }
diff --git a/server/src/modules/survey/controllers/survey.controller.ts b/server/src/modules/survey/controllers/survey.controller.ts
index c8b59fb2..df1a3d62 100644
--- a/server/src/modules/survey/controllers/survey.controller.ts
+++ b/server/src/modules/survey/controllers/survey.controller.ts
@@ -223,6 +223,38 @@ export class SurveyController {
     };
   }
 
+  @Get('/getPreviewSchema')
+  @HttpCode(200)
+  async getPreviewSchema(
+    @Query()
+    queryInfo: {
+      surveyPath: string;
+    },
+    @Request()
+    req,
+  ) {
+    const { value, error } = Joi.object({
+      surveyId: Joi.string().required(),
+    }).validate({ surveyId: queryInfo.surveyPath });
+
+    if (error) {
+      this.logger.error(error.message, { req });
+      throw new HttpException('参数有误', EXCEPTION_CODE.PARAMETER_ERROR);
+    }
+    const surveyId = value.surveyId;
+    const surveyConf =
+      await this.surveyConfService.getSurveyConfBySurveyId(surveyId);
+    const surveyMeta = await this.surveyMetaService.getSurveyById({ surveyId });
+    return {
+      code: 200,
+      data: {
+        ...surveyConf,
+        title: surveyMeta?.title,
+        surveyPath: surveyMeta?.surveyPath,
+      },
+    };
+  }
+
   @Post('/publishSurvey')
   @HttpCode(200)
   @UseGuards(SurveyGuard)
diff --git a/web/components.d.ts b/web/components.d.ts
index c054149b..259d398d 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -25,11 +25,23 @@ declare module 'vue' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    IEpBottom: typeof import('~icons/ep/bottom')['default']
+    IEpCheck: typeof import('~icons/ep/check')['default']
+    IEpCirclePlus: typeof import('~icons/ep/circle-plus')['default']
+    IEpClose: typeof import('~icons/ep/close')['default']
+    IEpCopyDocument: typeof import('~icons/ep/copy-document')['default']
+    IEpDelete: typeof import('~icons/ep/delete')['default']
+    IEpIphone: typeof import('~icons/ep/iphone')['default']
+    IEpLoading: typeof import('~icons/ep/loading')['default']
+    IEpMinus: typeof import('~icons/ep/minus')['default']
+    IEpMonitor: typeof import('~icons/ep/monitor')['default']
     IEpMore: typeof import('~icons/ep/more')['default']
     IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSort: typeof import('~icons/ep/sort')['default']
     IEpSortDown: typeof import('~icons/ep/sort-down')['default']
     IEpSortUp: typeof import('~icons/ep/sort-up')['default']
+    IEpView: typeof import('~icons/ep/view')['default']
+    IEpWarningFilled: typeof import('~icons/ep/warning-filled')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/web/public/imgs/preview-phone.png b/web/public/imgs/preview-phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..375bf1b52f21b1bc8908a667f238e53e4ebe4665
GIT binary patch
literal 7320
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

literal 0
HcmV?d00001

diff --git a/web/src/common/typeEnum.ts b/web/src/common/typeEnum.ts
new file mode 100644
index 00000000..755e6f24
--- /dev/null
+++ b/web/src/common/typeEnum.ts
@@ -0,0 +1,50 @@
+// 题型枚举
+export enum QUESTION_TYPE {
+  TEXT = 'text',
+  TEXTAREA = 'textarea',
+  RADIO = 'radio',
+  CHECKBOX = 'checkbox',
+  BINARY_CHOICE = 'binary-choice',
+  RADIO_STAR = 'radio-star',
+  RADIO_NPS = 'radio-nps',
+  VOTE = 'vote',
+}
+
+// 题目类型标签映射对象
+export const typeTagLabels: Record<QUESTION_TYPE, string> = {
+  [QUESTION_TYPE.TEXT]: '单行输入框',
+  [QUESTION_TYPE.TEXTAREA]: '多行输入框',
+  [QUESTION_TYPE.RADIO]: '单选',
+  [QUESTION_TYPE.CHECKBOX]: '多选',
+  [QUESTION_TYPE.BINARY_CHOICE]: '判断',
+  [QUESTION_TYPE.RADIO_STAR]: '评分',
+  [QUESTION_TYPE.RADIO_NPS]: 'NPS评分',
+  [QUESTION_TYPE.VOTE]: '投票'
+}
+
+// 输入类题型
+export const INPUT = [
+  QUESTION_TYPE.TEXT,
+  QUESTION_TYPE.TEXTAREA
+]
+
+// 选择类题型分类
+export const NORMAL_CHOICES =  [
+  QUESTION_TYPE.RADIO,
+  QUESTION_TYPE.CHECKBOX
+]
+
+// 选择类题型分类
+export const CHOICES =  [
+  QUESTION_TYPE.RADIO,
+  QUESTION_TYPE.CHECKBOX,
+  QUESTION_TYPE.BINARY_CHOICE,
+  QUESTION_TYPE.VOTE
+]
+
+// 评分题题型分类
+export const RATES = [
+  QUESTION_TYPE.RADIO_STAR,
+  QUESTION_TYPE.RADIO_NPS
+]
+
diff --git a/web/src/management/api/space.ts b/web/src/management/api/space.ts
index 24de4466..b0aadda9 100644
--- a/web/src/management/api/space.ts
+++ b/web/src/management/api/space.ts
@@ -1,5 +1,4 @@
 import axios from './base'
-
 // 空间
 export const createSpace = ({ name, description, members }: any) => {
   return axios.post('/workspace', { name, description, members })
@@ -29,7 +28,7 @@ export const getUserList = (username: string) => {
   })
 }
 
-// 协作权限列表
+// 获取协作权限下拉框枚举
 export const getPermissionList = () => {
   return axios.get('collaborator/getPermissionList')
 }
@@ -72,4 +71,4 @@ export const getCollaboratorPermissions = (surveyId: string) => {
       surveyId
     }
   })
-}
+}
\ No newline at end of file
diff --git a/web/src/management/components/LeftMenu.vue b/web/src/management/components/LeftMenu.vue
index 7f631fe6..e9dc05ab 100644
--- a/web/src/management/components/LeftMenu.vue
+++ b/web/src/management/components/LeftMenu.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 const route = useRoute()
@@ -58,18 +58,18 @@ const tabArr = [
   }
 ]
 const tabs = ref([])
-onMounted(async () => {
-  await store.dispatch('fetchCooperPermissions', route.params.id)
+watch(() => store.state.cooperPermissions, (newVal) => {
+  tabs.value = []
   // 如果有问卷管理权限，则加入问卷编辑和投放菜单
-  if (store.state.cooperPermissions.includes(SurveyPermissions.SurveyManage)) {
+  if (newVal.includes(SurveyPermissions.SurveyManage)) {
     tabs.value.push(tabArr[0])
     tabs.value.push(tabArr[1])
-  }
+  } 
   // 如果有数据分析权限，则加入数据分析菜单
-  if (store.state.cooperPermissions.includes(SurveyPermissions.DataManage)) {
+  if (newVal.includes(SurveyPermissions.DataManage))  {
     tabs.value.push(tabArr[2])
   }
-})
+}, { immediate: true })
 </script>
 <style lang="scss" scoped>
 .nav {
diff --git a/web/src/management/pages/edit/components/ModuleNavbar.vue b/web/src/management/pages/edit/components/ModuleNavbar.vue
index 4754af42..0965cddf 100644
--- a/web/src/management/pages/edit/components/ModuleNavbar.vue
+++ b/web/src/management/pages/edit/components/ModuleNavbar.vue
@@ -8,6 +8,7 @@
       <NavPanel></NavPanel>
     </div>
     <div class="right-group">
+      <PreviewPanel></PreviewPanel>
       <HistoryPanel></HistoryPanel>
       <SavePanel></SavePanel>
       <PublishPanel></PublishPanel>
@@ -23,6 +24,7 @@ import BackPanel from '../modules/generalModule/BackPanel.vue'
 import TitlePanel from '../modules/generalModule/TitlePanel.vue'
 import NavPanel from '../modules/generalModule/NavPanel.vue'
 import HistoryPanel from '../modules/contentModule/HistoryPanel.vue'
+import PreviewPanel from '../modules/contentModule/PreviewPanel.vue'
 import SavePanel from '../modules/contentModule/SavePanel.vue'
 import PublishPanel from '../modules/contentModule/PublishPanel.vue'
 
diff --git a/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue
new file mode 100644
index 00000000..7c51c200
--- /dev/null
+++ b/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="preview-panel">
+    <div class="btn preview-btn" @click="dialogTableVisible = true">
+      <i-ep-view class="view-icon" :size="20" />
+      <span class="btn-txt">预览</span>
+    </div>
+    <el-dialog
+      :z-index="99999"
+      top="50px"
+      class="preview-config-wrapper"
+      :destroy-on-close="true"
+      :show-close="false"
+      @open="openDialog"
+      @closed="closedDialog"
+      v-model="dialogTableVisible"
+      :width="`${previewTab == 1 ? '398' : '1290'}`"
+    >
+      <div class="ml75">
+        <div class="preview-tab">
+          <div
+            :class="`preview-tab-item ${previewTab == 1 ? 'active' : ''}`"
+            @click="previewTab = 1"
+          >
+            <i-ep-iphone />
+          </div>
+          <div
+            :class="`preview-tab-item ${previewTab == 2 ? 'active' : ''}`"
+            @click="previewTab = 2"
+          >
+            <i-ep-monitor />
+          </div>
+        </div>
+        <div :class="`preview-panel ${previewTab == 1 ? 'phone' : 'pc'}`">
+          <div class="wrapper">
+            <div class="tips-wrapper">
+              <i-ep-WarningFilled /> <span>用户预览模式，数据不保存！</span>
+            </div>
+            <div v-loading="loading" element-loading-text="加载中..." style="height: 100%">
+              <iframe
+                v-loading="loading"
+                id="iframe-preview"
+                :src="`/management/preview/${surveyId}`"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const dialogTableVisible = ref(false)
+const previewTab = ref(1)
+const surveyId = route.params.id
+const loading = ref(true)
+
+const openDialog = () => {
+  const iframePreview = document.getElementById('iframe-preview')
+  if (!iframePreview) return
+  iframePreview.onload = function () {
+    loading.value = false
+  }
+}
+
+const closedDialog = () => {
+  loading.value = true
+}
+</script>
+<style lang="scss" scoped>
+@import url('@/management/styles/edit-btn.scss');
+
+.preview-panel {
+  :deep(.preview-config-wrapper) {
+    background-color: transparent;
+    box-shadow: none;
+    padding: 0;
+  }
+  .ml75 {
+    margin-left: 75px;
+  }
+
+  .view-icon {
+    font-size: 20px;
+    height: 29px;
+    line-height: 29px;
+  }
+
+  .preview-tab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .border-right-none {
+      border-right: none;
+    }
+
+    .active {
+      border-color: $primary-color;
+      color: $primary-color;
+    }
+
+    .border-left-none {
+      border-left: none;
+    }
+
+    &-item {
+      width: 80px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #ffffff;
+      border: 1px solid rgba(227, 228, 232, 1);
+      cursor: pointer;
+      &:hover {
+        border-color: $primary-color;
+        color: $primary-color;
+      }
+    }
+  }
+  .preview-panel {
+    margin-top: 16px;
+    &.pc {
+      display: flex;
+      justify-content: center;
+      background: #ffffff;
+      box-shadow: 0px 2px 10px -2px rgba(82, 82, 102, 0.2);
+      height: 726px;
+      .wrapper {
+        width: 636px;
+        height: 704px;
+      }
+    }
+    &.phone {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .wrapper {
+        background: url('/imgs/preview-phone.png') no-repeat;
+        width: 328px;
+        height: 678px;
+        background-size: 100% 100%;
+        padding: 0 14px;
+        padding-top: 58px;
+        padding-bottom: 14px;
+        display: flex;
+        flex-direction: column;
+      }
+      iframe {
+        border-radius: 0px 0px 20px 20px;
+      }
+    }
+  }
+  .tips-wrapper {
+    display: flex;
+    align-items: center;
+    background: $primary-bg-color;
+    color: $primary-color;
+    font-size: 12px;
+    padding: 2px 0;
+    padding-left: 9px;
+
+    span {
+      margin-left: 5px;
+    }
+  }
+}
+</style>
diff --git a/web/src/management/pages/edit/modules/generalModule/BackPanel.vue b/web/src/management/pages/edit/modules/generalModule/BackPanel.vue
index 60a595dd..ff728371 100644
--- a/web/src/management/pages/edit/modules/generalModule/BackPanel.vue
+++ b/web/src/management/pages/edit/modules/generalModule/BackPanel.vue
@@ -5,7 +5,13 @@
   </div>
 </template>
 <script setup lang="ts">
-const handleNavigateHome = () => window.open('/survey', '_self')
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const handleNavigateHome = () => {
+  router.push({
+    name: 'survey'
+  })
+}
 </script>
 <style lang="scss" scoped>
 .back-btn {
diff --git a/web/src/management/pages/edit/modules/logicModule/components/ConditionView.vue b/web/src/management/pages/edit/modules/logicModule/components/ConditionView.vue
index b1bef149..01065654 100644
--- a/web/src/management/pages/edit/modules/logicModule/components/ConditionView.vue
+++ b/web/src/management/pages/edit/modules/logicModule/components/ConditionView.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-      class="condition-wrapper"
-      :class="{ 'is-last': isLastCondition }"
-      :data-content-before="!isLastCondition ? '且' : ''"
+    class="condition-wrapper"
+    :class="{ 'is-last': isLastCondition }"
+    :data-content-before="!isLastCondition ? '且' : ''"
   >
     <span class="desc">如果</span>
     <el-form-item
@@ -15,16 +15,9 @@
         placeholder="请选择题目"
         @change="(val: any) => handleChange(conditionNode, 'field', val)"
       >
-        <el-option
-            v-for="{ label, value } in fieldList"
-            :key="value"
-            :label="label"
-            :value="value"
-        >
+        <el-option v-for="{ label, value } in fieldList" :key="value" :label="label" :value="value">
         </el-option>
-        <template #empty>
-          无数据
-        </template>
+        <template #empty> 无数据 </template>
       </el-select>
     </el-form-item>
     <span class="desc">选择了</span>
@@ -45,9 +38,7 @@
           :label="label"
           :value="value"
         ></el-option>
-        <template #empty>
-          无数据
-        </template>
+        <template #empty> 无数据 </template>
       </el-select>
     </el-form-item>
     <span class="desc">中的任一选项 </span>
@@ -65,7 +56,7 @@
 <script setup lang="ts">
 import { computed, inject, ref, type ComputedRef } from 'vue'
 import { ConditionNode, RuleNode } from '@/common/logicEngine/RuleBuild'
-import { qAbleList } from '@/management/utils/constant.js'
+import { CHOICES } from '@/common/typeEnum'
 import { cleanRichText } from '@/common/xss'
 const renderData = inject<ComputedRef<Array<any>>>('renderData') || ref([])
 const props = defineProps({
@@ -94,7 +85,7 @@ const fieldList = computed(() => {
   const currentIndex = renderData.value.findIndex((item) => item.field === props.ruleNode.target)
   return renderData.value
     .slice(0, currentIndex)
-    .filter((question: any) => qAbleList.includes(question.type))
+    .filter((question: any) => CHOICES.includes(question.type))
     .map((item: any) => {
       return {
         label: `${item.showIndex ? item.indexNumber + '.' : ''} ${cleanRichText(item.title)}`,
diff --git a/web/src/management/pages/edit/modules/logicModule/components/RuleNodeView.vue b/web/src/management/pages/edit/modules/logicModule/components/RuleNodeView.vue
index 86f43aef..f24a9705 100644
--- a/web/src/management/pages/edit/modules/logicModule/components/RuleNodeView.vue
+++ b/web/src/management/pages/edit/modules/logicModule/components/RuleNodeView.vue
@@ -36,9 +36,7 @@
                 :value="value"
               >
               </el-option>
-              <template #empty>
-                无数据
-              </template>
+              <template #empty> 无数据 </template>
             </el-select>
           </el-form-item>
         </div>
diff --git a/web/src/management/pages/edit/modules/questionModule/components/TypeList.vue b/web/src/management/pages/edit/modules/questionModule/components/TypeList.vue
index 72b5306c..b19077ab 100644
--- a/web/src/management/pages/edit/modules/questionModule/components/TypeList.vue
+++ b/web/src/management/pages/edit/modules/questionModule/components/TypeList.vue
@@ -48,7 +48,7 @@ import { getQuestionByType } from '@/management/utils/index'
 import { useStore } from 'vuex'
 import { get as _get, isNumber as _isNumber } from 'lodash-es'
 import { computed, ref } from 'vue'
-
+import { QUESTION_TYPE } from '@/common/typeEnum.ts'
 const store = useStore()
 
 const activeNames = ref([0, 1])
@@ -70,8 +70,8 @@ const getNewQuestion = ({ type }) => {
   const fields = questionDataList.value.map((item) => item.field)
   const newQuestion = getQuestionByType(type, fields)
   newQuestion.title = newQuestion.title = `标题${newQuestionIndex.value + 1}`
-  if (type === 'vote') {
-    newQuestion.innerType = 'radio'
+  if (type === QUESTION_TYPE.VOTE) {
+    newQuestion.innerType = QUESTION_TYPE.RADIO
   }
   return newQuestion
 }
diff --git a/web/src/management/pages/list/components/BaseList.vue b/web/src/management/pages/list/components/BaseList.vue
index 23fece9e..a476c92b 100644
--- a/web/src/management/pages/list/components/BaseList.vue
+++ b/web/src/management/pages/list/components/BaseList.vue
@@ -121,7 +121,7 @@ moment.locale('zh-cn')
 
 import EmptyIndex from '@/management/components/EmptyIndex.vue'
 import { CODE_MAP } from '@/management/api/base'
-import { QOP_MAP } from '@/management/utils/constant'
+import { QOP_MAP } from '@/management/utils/constant.ts'
 import { deleteSurvey } from '@/management/api/survey'
 import ModifyDialog from './ModifyDialog.vue'
 import TagModule from './TagModule.vue'
diff --git a/web/src/management/pages/list/components/SpaceList.vue b/web/src/management/pages/list/components/SpaceList.vue
index 181d1b6d..e642f84f 100644
--- a/web/src/management/pages/list/components/SpaceList.vue
+++ b/web/src/management/pages/list/components/SpaceList.vue
@@ -10,7 +10,6 @@
       row-class-name="tableview-row"
       cell-class-name="tableview-cell"
       style="width: 100%"
-      @row-click="onRowClick"
     >
       <el-table-column column-key="space" width="20" />
       <el-table-column
@@ -98,9 +97,7 @@ const isAdmin = (id: string) => {
     UserRole.Admin
   )
 }
-const onRowClick = () => {
-  console.log('onRowClick')
-}
+
 const handleModify = async (id: string) => {
   await store.dispatch('list/getSpaceDetail', id)
   modifyType.value = 'edit'
diff --git a/web/src/management/pages/list/components/SpaceModify.vue b/web/src/management/pages/list/components/SpaceModify.vue
index 6218b5a7..668fd038 100644
--- a/web/src/management/pages/list/components/SpaceModify.vue
+++ b/web/src/management/pages/list/components/SpaceModify.vue
@@ -48,7 +48,6 @@ import { useStore } from 'vuex'
 import { pick as _pick } from 'lodash-es'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
-
 import { QOP_MAP } from '@/management/utils/constant'
 import MemberSelect from './MemberSelect.vue'
 import { type IMember, type IWorkspace, UserRole } from '@/management/utils/types/workSpace'
diff --git a/web/src/management/pages/publish/PublishPage.vue b/web/src/management/pages/publish/PublishPage.vue
index 4cd31798..8fdb054b 100644
--- a/web/src/management/pages/publish/PublishPage.vue
+++ b/web/src/management/pages/publish/PublishPage.vue
@@ -51,7 +51,7 @@ const mainChannel = computed(() => {
   let fullUrl = ''
 
   if (metaData.value) {
-    fullUrl = `${location.origin}/render/${metaData.value.surveyPath}`
+    fullUrl = `${location.origin}/render/${metaData.value.surveyPath}?t=${Date.now()}`
   }
 
   return { fullUrl }
diff --git a/web/src/management/router/index.ts b/web/src/management/router/index.ts
index e6a2652e..d2c0beda 100644
--- a/web/src/management/router/index.ts
+++ b/web/src/management/router/index.ts
@@ -1,6 +1,6 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, type RouteLocationNormalized, type NavigationGuardNext } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
-import { useStore } from 'vuex'
+import { useStore, type Store } from 'vuex'
 import { SurveyPermissions } from '@/management/utils/types/workSpace'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
@@ -23,7 +23,7 @@ const routes: RouteRecordRaw[] = [
     path: '/survey/:id/edit',
     meta: {
       needLogin: true,
-      premissions: [SurveyPermissions.SurveyManage]
+      permissions: [SurveyPermissions.SurveyManage]
     },
     name: 'QuestionEdit',
     component: () => import('../pages/edit/index.vue'),
@@ -94,7 +94,7 @@ const routes: RouteRecordRaw[] = [
     name: 'analysisPage',
     meta: {
       needLogin: true,
-      premissions: [SurveyPermissions.DataManage]
+      permissions: [SurveyPermissions.DataManage]
     },
     component: () => import('../pages/analysis/AnalysisPage.vue')
   },
@@ -103,7 +103,7 @@ const routes: RouteRecordRaw[] = [
     name: 'publish',
     meta: {
       needLogin: true,
-      premissions: [SurveyPermissions.SurveyManage]
+      permissions: [SurveyPermissions.SurveyManage]
     },
     component: () => import('../pages/publish/PublishPage.vue')
   },
@@ -132,57 +132,60 @@ const router = createRouter({
 })
 
 router.beforeEach(async (to, from, next) => {
-  const store = useStore()
+  const store = useStore();
+  // 初始化用户信息
   if (!store.state.user?.initialized) {
-    store?.dispatch('user/init')
+    await store.dispatch('user/init');
   }
+  // 更新页面标题
   if (to.meta.title) {
-    document.title = to.meta.title as string
+    document.title = to.meta.title as string;
   }
+
   if (to.meta.needLogin) {
-    if (store?.state?.user?.hasLogined) {
-      if (to.meta.premissions) {
-        const params = to.params
-        await store.dispatch('fetchCooperPermissions', params.id)
-        if (
-          (to.meta.premissions as []).some((permission) =>
-            store.state?.cooperPermissions?.includes(permission)
-          )
-        ) {
-          next()
-        } else {
-          ElMessage.warning('您没有该问卷的相关协作权限')
-          next({
-            name: 'survey'
-          })
-        }
+    await handleLoginGuard(to, from, next, store);
+  } else {
+    next();
+  }
+});
+
+async function handleLoginGuard(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext, store: Store<any>) {
+  if (store.state.user?.hasLogined) {
+    await handlePermissionsGuard(to, from, next, store);
+  } else {
+    next({
+      name: 'login',
+      query: { redirect: encodeURIComponent(to.path) },
+    });
+  }
+}
+
+async function handlePermissionsGuard(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext, store: Store<any>) {
+  const currSurveyId = to?.params?.id || ''
+  const prevSurveyId = from?.params?.id || ''
+  // 如果跳转页面不存在surveyId 或者不需要页面权限，则直接跳转
+  if (!to.meta.permissions || !currSurveyId) {
+    next()
+  } else {
+    // 如果跳转编辑页面，且跳转页面和上一页的surveyId不同，判断是否有对应页面权限
+    if (currSurveyId !== prevSurveyId) {
+      await store.dispatch('fetchCooperPermissions', currSurveyId)
+      if (hasRequiredPermissions(to.meta.permissions as string[], store.state.cooperPermissions)) {
+        next();
       } else {
-        next()
+        ElMessage.warning('您没有该问卷的相关协作权限');
+        next({ name: 'survey' });
       }
     } else {
-      next({
-        name: 'login',
-        query: {
-          redirect: encodeURIComponent(to.path)
-        }
-      })
+      next();
     }
-  } else {
-    next()
   }
-})
+}
+
+function hasRequiredPermissions(requiredPermissions: string[], userPermissions: string[]) {
+  return requiredPermissions.some(permission => userPermissions.includes(permission));
+}
+
+
 
-// router.afterEach(async (to, from) => {
-//   const store = useStore()
-//   if (to.meta.premissions) {
-//     const params = to.params
-//     await store.dispatch('fetchCooperPermissions', params.id)
-//     if (!(to.meta.premissions as []).some((permission) => store.state?.cooperPermissions?.includes(permission))) {
-//       ElMessage.warning('您没有该问卷的相关协作权限')
-//       router.push({
-//         name: 'survey'
-//       })
-//     }
-//   }
-// })
 export default router
diff --git a/web/src/management/store/actions.js b/web/src/management/store/actions.js
index 7652fb26..c8e185ea 100644
--- a/web/src/management/store/actions.js
+++ b/web/src/management/store/actions.js
@@ -14,7 +14,6 @@ export default {
   },
   async fetchCooperPermissions({ commit }, id) {
     const res = await getCollaboratorPermissions(id)
-    console.log(res.data)
     if (res.code === CODE_MAP.SUCCESS) {
       commit('setCooperPermissions', res.data.permissions)
     }
diff --git a/web/src/management/utils/constant.js b/web/src/management/utils/constant.ts
similarity index 52%
rename from web/src/management/utils/constant.js
rename to web/src/management/utils/constant.ts
index f48115f0..79452572 100644
--- a/web/src/management/utils/constant.js
+++ b/web/src/management/utils/constant.ts
@@ -1,11 +1,10 @@
 // 问卷操作枚举
-export const QOP_MAP = {
-  ADD: 'add',
-  COPY: 'copy',
-  EDIT: 'edit'
+export enum QOP_MAP {
+  ADD = 'add',
+  COPY = 'copy',
+  EDIT = 'edit'
 }
 
-export const qAbleList = ['radio', 'checkbox', 'binary-choice', 'vote']
 export const operatorOptions = [
   {
     label: '选择了',
diff --git a/web/src/management/utils/index.js b/web/src/management/utils/index.js
index 170e8d98..3e158328 100644
--- a/web/src/management/utils/index.js
+++ b/web/src/management/utils/index.js
@@ -1,5 +1,6 @@
 import { defaultQuestionConfig } from '../config/questionConfig'
 import { cloneDeep as _cloneDeep, map as _map } from 'lodash-es'
+import { QUESTION_TYPE } from '@/common/typeEnum.ts'
 const generateQuestionField = () => {
   const num = Math.floor(Math.random() * 1000)
   return `data${num}`
@@ -24,7 +25,7 @@ const generateHash = (hashList) => {
 
 function getOptions(type) {
   const options = [].concat({ ..._cloneDeep(defaultQuestionConfig) }.options)
-  if (type === 'binary-choice') {
+  if (type === QUESTION_TYPE.BINARY_CHOICE) {
     options[0].text = '对'
     options[1].text = '错'
   }
diff --git a/web/src/materials/questions/common/config/tagList.js b/web/src/materials/questions/common/config/tagList.js
deleted file mode 100644
index a04862e7..00000000
--- a/web/src/materials/questions/common/config/tagList.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const config = {
-  mob: '手机号',
-  text: '单行输入框',
-  textarea: '多行输入框',
-  radio: '单选',
-  checkbox: '多选',
-  'radio-star': '评分',
-  'radio-nps': 'NPS评分',
-  city: '城市选择',
-  vote: '投票',
-  'binary-choice': '判断',
-  fillin: '填空'
-}
-
-export default config
diff --git a/web/src/materials/questions/widgets/EditOptions/Options/OptionEditBar.vue b/web/src/materials/questions/widgets/EditOptions/Options/OptionEditBar.vue
index 1fcdc518..58a66a64 100644
--- a/web/src/materials/questions/widgets/EditOptions/Options/OptionEditBar.vue
+++ b/web/src/materials/questions/widgets/EditOptions/Options/OptionEditBar.vue
@@ -54,6 +54,7 @@ import { ref, computed, inject } from 'vue'
 import OptionConfig from '../AdvancedConfig/OptionConfig.vue'
 import RateConfig from '../AdvancedConfig/RateConfig.vue'
 import ExtraIcon from '../ExtraIcon/index.vue'
+import { QUESTION_TYPE } from '@/common/typeEnum'
 
 defineProps({
   optionList: {
@@ -78,7 +79,6 @@ const emit = defineEmits(['addOther', 'optionChange', 'change'])
 const moduleConfig = inject('moduleConfig')
 const optionConfigVisible = ref(false)
 const openOptionConfig = () => {
-  console.log('open')
   optionConfigVisible.value = true
 }
 
@@ -101,7 +101,7 @@ const onVisibleChange = (val) => {
 }
 
 const isNps = computed(() => {
-  return moduleConfig.value.type === 'radio-nps'
+  return moduleConfig.value.type === QUESTION_TYPE.RADIO_NPS
 })
 
 const min = computed(() => {
diff --git a/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx b/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx
index 8bd47f3a..560fe7dd 100644
--- a/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx
+++ b/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx
@@ -1,6 +1,6 @@
 import { defineComponent, watch, ref, computed } from 'vue'
 import { filterXSS } from '@/common/xss'
-import tagList from '@materials/questions/common/config/tagList'
+import { typeTagLabels } from '@/common/typeEnum.ts'
 
 import './style.scss'
 
@@ -58,7 +58,7 @@ export default defineComponent({
       let ret = ''
       types.forEach((t) => {
         if (ret) return
-        const tv = tagList && tagList[t]
+        const tv = typeTagLabels && typeTagLabels[t]
         if (tv && typeof tv === 'string') {
           ret = tv.trim()
         }
diff --git a/web/src/materials/questions/widgets/VoteModule/index.jsx b/web/src/materials/questions/widgets/VoteModule/index.jsx
index 90211b65..8869e794 100644
--- a/web/src/materials/questions/widgets/VoteModule/index.jsx
+++ b/web/src/materials/questions/widgets/VoteModule/index.jsx
@@ -1,6 +1,6 @@
 import { computed, defineComponent } from 'vue'
 import { includes } from 'lodash-es'
-
+import { QUESTION_TYPE } from '@/common/typeEnum'
 import AnswerProcess from './AnswerProcess/index.vue'
 import BaseChoice from '../BaseChoice'
 
@@ -56,7 +56,7 @@ export default defineComponent({
     }
     const myOptions = computed(() => {
       const { options } = props
-      if (props.innerType === 'checkbox') {
+      if (props.innerType === QUESTION_TYPE.CHECKBOX) {
         return options.map((item) => {
           return {
             ...item,
diff --git a/web/src/materials/setters/widgets/InputNumber.vue b/web/src/materials/setters/widgets/InputNumber.vue
index 44b08611..6aea2a67 100644
--- a/web/src/materials/setters/widgets/InputNumber.vue
+++ b/web/src/materials/setters/widgets/InputNumber.vue
@@ -11,7 +11,7 @@
 import { ref, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
-
+import { QUESTION_TYPE } from '@/common/typeEnum'
 import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
 interface Props {
@@ -25,7 +25,7 @@ interface Emit {
 
 const emit = defineEmits<Emit>()
 const props = defineProps<Props>()
-const setterTypes = ['checkbox', 'vote']
+const setterTypes = [QUESTION_TYPE.CHECKBOX, QUESTION_TYPE.VOTE]
 const modelValue = ref(props.formConfig.value || 0)
 const minModelValue = computed(() => {
   const { min } = props.formConfig
diff --git a/web/src/render/App.vue b/web/src/render/App.vue
index 1ffd4724..c4f914ea 100644
--- a/web/src/render/App.vue
+++ b/web/src/render/App.vue
@@ -1,49 +1,15 @@
 <template>
   <div id="app">
-    <Component
-      v-if="store.state.router"
-      :is="
-        components[
-          upperFirst(store.state.router) as 'IndexPage' | 'EmptyPage' | 'ErrorPage' | 'SuccessPage'
-        ]
-      "
-    >
-    </Component>
-    <LogoIcon
-      v-if="!['successPage', 'indexPage'].includes(store.state.router)"
-      :logo-conf="logoConf"
-      :readonly="true"
-    />
+    <router-view></router-view>
   </div>
 </template>
 <script setup lang="ts">
-import { computed, watch, onMounted } from 'vue'
+import { computed, watch } from 'vue'
 import { useStore } from 'vuex'
-
-import { getPublishedSurveyInfo } from './api/survey'
-import useCommandComponent from './hooks/useCommandComponent'
-
-import EmptyPage from './pages/EmptyPage.vue'
-import IndexPage from './pages/IndexPage.vue'
-import ErrorPage from './pages/ErrorPage.vue'
-import SuccessPage from './pages/SuccessPage.vue'
-import AlertDialog from './components/AlertDialog.vue'
-// @ts-ignore
-import communalLoader from '@materials/communals/communalLoader.js'
-import { get as _get, upperFirst } from 'lodash-es'
-import { initRuleEngine } from '@/render/hooks/useRuleEngine.js'
-
-const LogoIcon = communalLoader.loadComponent('LogoIcon')
+import { get as _get } from 'lodash-es'
 
 const store = useStore()
-const logoConf = computed(() => store.state?.bottomConf || {})
 const skinConf = computed(() => _get(store, 'state.skinConf', {}))
-const components = {
-  EmptyPage,
-  IndexPage,
-  ErrorPage,
-  SuccessPage
-}
 
 const updateSkinConfig = (value: any) => {
   const root = document.documentElement
@@ -68,49 +34,6 @@ const updateSkinConfig = (value: any) => {
 watch(skinConf, (value) => {
   updateSkinConfig(value)
 })
-
-onMounted(async () => {
-  const surveyPath = location.pathname.split('/').pop()
-
-  if (!surveyPath) {
-    store.commit('setRouter', 'EmptyPage')
-    return
-  }
-
-  const alert = useCommandComponent(AlertDialog)
-
-  try {
-    const res: any = await getPublishedSurveyInfo({ surveyPath })
-
-    if (res.code === 200) {
-      const data = res.data
-      const { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf, logicConf } =
-        data.code
-      const questionData = {
-        bannerConf,
-        baseConf,
-        bottomConf,
-        dataConf,
-        skinConf,
-        submitConf
-      }
-
-      document.title = data.title
-
-      updateSkinConfig(skinConf)
-
-      store.commit('setSurveyPath', surveyPath)
-      store.dispatch('init', questionData)
-      store.dispatch('getEncryptInfo')
-      initRuleEngine(logicConf?.showLogicConf)
-    } else {
-      throw new Error(res.errmsg)
-    }
-  } catch (error: any) {
-    console.log(error)
-    alert({ title: error.message || '获取问卷失败' })
-  }
-})
 </script>
 <style lang="scss">
 @import url('./styles/icon.scss');
diff --git a/web/src/render/adapter/formValue.js b/web/src/render/adapter/formValue.js
index 9b31735e..33a66775 100644
--- a/web/src/render/adapter/formValue.js
+++ b/web/src/render/adapter/formValue.js
@@ -1,4 +1,5 @@
 // 定义提交的数据结构：{ field1: '', field2: [], field1_hash1: '', }
+import { QUESTION_TYPE } from '@/common/typeEnum.ts'
 export default function ({ dataConf }) {
   const dataList = dataConf.dataList
   const formValues = {}
@@ -17,7 +18,7 @@ export default function ({ dataConf }) {
     // }
 
     // 题型是多选，或者子题型是多选（innerType是用于投票）
-    if (/checkbox/.test(type) || innerType === 'checkbox') {
+    if (/checkbox/.test(type) || innerType === QUESTION_TYPE.CHECKBOX) {
       value = value ? [value] : []
     }
     formValues[key] = value
diff --git a/web/src/render/adapter/question.js b/web/src/render/adapter/question.js
index 2ab6bcde..429bfb25 100644
--- a/web/src/render/adapter/question.js
+++ b/web/src/render/adapter/question.js
@@ -3,7 +3,7 @@
  */
 
 import { get as _get, map as _map } from 'lodash-es'
-
+import { QUESTION_TYPE } from '@/common/typeEnum.ts'
 // 处理选择题的options
 function handleOptions(item) {
   const { type } = item
@@ -13,7 +13,7 @@ function handleOptions(item) {
     const cleanOption = {}
 
     // 投票逻辑处理
-    if (type.indexOf('vote') > -1) {
+    if (type.indexOf(QUESTION_TYPE.VOTE) > -1) {
       cleanOption.voteCount = 0
     }
 
diff --git a/web/src/render/adapter/rules.js b/web/src/render/adapter/rules.js
index 8c3b12fd..22eb496c 100644
--- a/web/src/render/adapter/rules.js
+++ b/web/src/render/adapter/rules.js
@@ -5,6 +5,7 @@ import {
   keys as _keys,
   set as _set
 } from 'lodash-es'
+import { INPUT, RATES, QUESTION_TYPE } from '@/common/typeEnum.ts'
 
 const regexpMap = {
   nd: /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/,
@@ -28,13 +29,11 @@ const msgMap = {
   e: '请输入邮箱',
   licensePlate: '请输入车牌号'
 }
-const inputType = ['text', 'textarea']
 const checkBoxTip = '至少选择#min#项，少选择了#less#项'
 const checkBoxTipSame = '请选择#min#项，少选择了#less#项'
 const textRangeMinTip = '至少输入#min#字'
 const numberRangeMinTip = '数字最小为#min#'
 const numberRangeMaxTip = '数字最大为#max#'
-const radioType = ['radio-star', 'radio-nps']
 
 // 多选题的选项数目限制
 export function optionValidator(value, minNum, maxNum) {
@@ -88,7 +87,7 @@ export function generateValidArr(
   numberRangeMax
 ) {
   const validArr = []
-  const isInput = inputType.indexOf(type) !== -1
+  const isInput = INPUT.indexOf(type) !== -1
   if (isRequired || valid === '*') {
     // 输入框的必填校验做trim
     if (!isInput) {
@@ -199,14 +198,14 @@ const generateOthersKeyMap = (question) => {
   const { type, field, options, rangeConfig } = question
   let othersKeyMap = undefined
 
-  if (radioType.includes(type)) {
+  if (RATES.includes(type)) {
     othersKeyMap = {}
     for (const key in rangeConfig) {
       if (rangeConfig[key].isShowInput) {
         othersKeyMap[`${field}_${key}`] = key
       }
     }
-  } else if (type.includes('radio') || type.includes('checkbox')) {
+  } else if (type.includes(QUESTION_TYPE.RADIO) || type.includes(QUESTION_TYPE.CHECKBOX)) {
     othersKeyMap = {}
     options
       .filter((op) => op.others)
@@ -258,7 +257,7 @@ export default function (questionConfig) {
 
     // 对于选择题支持填写更多信息的，需要做是否必填的校验
     if (_keys(othersKeyMap).length) {
-      if (radioType.includes(type)) {
+      if (RATES.includes(type)) {
         if (rangeConfig) {
           for (const key in rangeConfig) {
             if (rangeConfig[key].isShowInput && rangeConfig[key].required) {
diff --git a/web/src/render/api/survey.js b/web/src/render/api/survey.js
index 8ae6929c..5b6824f3 100644
--- a/web/src/render/api/survey.js
+++ b/web/src/render/api/survey.js
@@ -8,6 +8,14 @@ export const getPublishedSurveyInfo = ({ surveyPath }) => {
   })
 }
 
+export const getPreviewSchema = ({ surveyPath }) => {
+  return axios.get('/survey/getPreviewSchema', {
+    params: {
+      surveyPath
+    }
+  })
+}
+
 export const submitForm = (data) => {
   return axios.post('/surveyResponse/createResponse', data)
 }
diff --git a/web/src/render/components/MaterialGroup.vue b/web/src/render/components/MaterialGroup.vue
index 113b9637..78b3b6fb 100644
--- a/web/src/render/components/MaterialGroup.vue
+++ b/web/src/render/components/MaterialGroup.vue
@@ -3,11 +3,8 @@
     <div v-for="item in renderData" :key="item.field">
       <QuestionWrapper
         class="gap"
-        v-bind="$attrs"
         :moduleConfig="item"
-        :qIndex="item.qIndex"
         :indexNumber="item.indexNumber"
-        :showTitle="true"
         @change="handleChange"
       ></QuestionWrapper>
     </div>
diff --git a/web/src/render/components/QuestionWrapper.vue b/web/src/render/components/QuestionWrapper.vue
index 97f568b0..84114c1b 100644
--- a/web/src/render/components/QuestionWrapper.vue
+++ b/web/src/render/components/QuestionWrapper.vue
@@ -1,7 +1,6 @@
 <template>
   <QuestionRuleContainer
     v-if="visible"
-    v-bind="$attrs"
     :moduleConfig="questionConfig"
     :indexNumber="indexNumber"
     :showTitle="true"
@@ -17,7 +16,8 @@ import { useShowInput } from '@/render/hooks/useShowInput'
 import store from '@/render/store'
 import { cloneDeep } from 'lodash-es'
 import { ruleEngine } from '@/render/hooks/useRuleEngine.js'
-import { QUESTION_TYPE } from '@/render/constant/index'
+
+import { NORMAL_CHOICES, RATES, QUESTION_TYPE } from '@/common/typeEnum.ts'
 
 const props = defineProps({
   indexNumber: {
@@ -48,7 +48,7 @@ const questionConfig = computed(() => {
     moduleConfig.voteTotal = unref(voteTotal)
   }
   if (
-    QUESTION_TYPE.CHOICES.includes(type) &&
+    NORMAL_CHOICES.includes(type) &&
     options.filter((optionItem) => optionItem.others).length > 0
   ) {
     let { options, othersValue } = useShowOthers(field)
@@ -57,7 +57,7 @@ const questionConfig = computed(() => {
     moduleConfig.othersValue = unref(othersValue)
   }
   if (
-    QUESTION_TYPE.RATES.includes(type) &&
+    RATES.includes(type) &&
     Object.keys(rest.rangeConfig).filter((index) => rest.rangeConfig[index].isShowInput).length > 0
   ) {
     let { rangeConfig, othersValue } = useShowInput(field)
diff --git a/web/src/render/constant/index.js b/web/src/render/constant/index.js
deleted file mode 100644
index e0e807d3..00000000
--- a/web/src/render/constant/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export const QUESTION_TYPE = {
-  VOTE: 'vote',
-  CHECKBOX: 'checkbox',
-  CHOICES: [
-    // 选择类题型分类
-    'radio',
-    'checkbox'
-  ],
-  RATES: [
-    // 评分题题型分类
-    'radio-star',
-    'radio-nps'
-  ]
-}
diff --git a/web/src/render/main.js b/web/src/render/main.js
index ecc3e906..e8cc2762 100644
--- a/web/src/render/main.js
+++ b/web/src/render/main.js
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import EventBus from './utils/eventbus'
-
+import router from './router'
 import store from './store'
 
 const app = createApp(App)
@@ -10,7 +10,7 @@ const $bus = new EventBus()
 app.provide('$bus', $bus)
 // 挂载到this上
 app.config.globalProperties.$bus = $bus
-
+app.use(router)
 app.use(store)
 
 app.mount('#app')
diff --git a/web/src/render/pages/EmptyPage.vue b/web/src/render/pages/EmptyPage.vue
index 1d5df382..74c7206f 100644
--- a/web/src/render/pages/EmptyPage.vue
+++ b/web/src/render/pages/EmptyPage.vue
@@ -7,10 +7,8 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'NotFound'
-}
+<script setup>
+
 </script>
 
 <style scoped>
diff --git a/web/src/render/pages/ErrorPage.vue b/web/src/render/pages/ErrorPage.vue
index 30c5a30d..88a209ce 100755
--- a/web/src/render/pages/ErrorPage.vue
+++ b/web/src/render/pages/ErrorPage.vue
@@ -1,16 +1,21 @@
 <template>
   <div class="result-page-wrap">
     <div class="result-page">
-      <div class="error-wrapper">
-        <img class="error-img" :src="errorImageUrl" />
-        <div class="bottom-word" v-html="errorMsg"></div>
+      <div class="page-content">
+        <img class="img" :src="errorImageUrl" />
+        <div class="msg" v-html="errorMsg"></div>
       </div>
+      <LogoIcon :logo-conf="logoConf" :readonly="true" />
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useStore } from 'vuex'
+// @ts-ignore
+import communalLoader from '@materials/communals/communalLoader.js'
+
+const LogoIcon = communalLoader.loadComponent('LogoIcon')
 
 const store = useStore()
 
@@ -24,7 +29,8 @@ const errorImageUrl = computed(() => {
   return imageMap[errorType as 'overTime'] || imageMap.default
 })
 
-const errorMsg = computed(() => store.state?.errorInfo?.errorMsg)
+const errorMsg = computed(() => store.state?.errorInfo?.errorMsg || '提交失败')
+const logoConf = computed(() => store.state?.bottomConf || {})
 </script>
 <style lang="scss" scoped>
 .result-page-wrap {
@@ -42,25 +48,27 @@ const errorMsg = computed(() => store.state?.errorInfo?.errorMsg)
     height: 100%;
   }
 }
-.error-wrapper {
-  text-align: center;
-  font-size: 14px;
+.page-content {
+  position: relative;
+  max-width: 920px;
+  margin: 0 auto;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  padding-top: 2rem;
   flex: 1;
 
-  p {
-    text-align: center;
-  }
-
-  .error-img {
-    margin-top: 2rem;
-    margin-bottom: 30px;
+  .img {
     width: 2rem;
-    height: auto;
   }
 
-  .bottom-word {
-    color: #999;
-    margin-top: 10px;
+  .msg {
+    font-size: 0.32rem;
+    color: #4a4c5b;
+    letter-spacing: 0;
+    text-align: center;
+    font-weight: 500;
+    margin-top: 0.15rem;
   }
 }
 </style>
diff --git a/web/src/render/pages/IndexPage.vue b/web/src/render/pages/IndexPage.vue
index 669d852c..338f03a5 100644
--- a/web/src/render/pages/IndexPage.vue
+++ b/web/src/render/pages/IndexPage.vue
@@ -1,169 +1,71 @@
 <template>
-  <div class="index">
-    <ProgressBar />
-    <div class="wrapper" ref="boxRef">
-      <HeaderContent :bannerConf="bannerConf" :readonly="true" />
-      <div class="content">
-        <MainTitle :bannerConf="bannerConf" :readonly="true"></MainTitle>
-        <MainRenderer ref="mainRef"></MainRenderer>
-        <SubmitButton
-          :validate="validate"
-          :submitConf="submitConf"
-          :readonly="true"
-          :renderData="renderData"
-          @submit="handleSubmit"
-        ></SubmitButton>
-        <LogoIcon :logo-conf="logoConf" :readonly="true" />
-      </div>
-    </div>
-  </div>
+  <router-view></router-view>
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { onMounted } from 'vue'
 import { useStore } from 'vuex'
-// @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 { submitForm } from '../api/survey'
-import encrypt from '../utils/encrypt'
+import { useRoute } from 'vue-router'
 
+import { getPublishedSurveyInfo, getPreviewSchema } from '../api/survey'
 import useCommandComponent from '../hooks/useCommandComponent'
 
-interface Props {
-  questionInfo?: any
-  isMobile?: boolean
-}
-
-withDefaults(defineProps<Props>(), {
-  questionInfo: {},
-  isMobile: false
-})
-
-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>()
-
-const alert = useCommandComponent(AlertDialog)
-const confirm = useCommandComponent(ConfirmDialog)
+import AlertDialog from '../components/AlertDialog.vue'
+import { initRuleEngine } from '@/render/hooks/useRuleEngine.js'
 
 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
-  mainRef.value.$refs.formGroup[index].validate(cbk)
-}
-
-const normalizationRequestBody = () => {
-  const enterTime = store.state.enterTime
-  const encryptInfo = store.state.encryptInfo
-  const formValues = store.state.formValues
-  const surveyPath = store.state.surveyPath
-
-  const result: any = {
-    surveyPath,
-    data: JSON.stringify(formValues),
-    difTime: Date.now() - enterTime,
-    clientTime: Date.now()
-  }
-
-  //浏览器缓存数据
-  localStorage.removeItem(surveyPath + "_questionData")
-  localStorage.removeItem("isSubmit")
-
-  //数据加密
-  var formData  = Object.assign({}, store.state.formValues)
-    for(const key in formData){
-      formData[key] = encodeURIComponent(formData[key])
+const route = useRoute()
+const loadData = (res: any, surveyPath: string) => {
+  if (res.code === 200) {
+    const data = res.data
+    const {
+      bannerConf,
+      baseConf,
+      bottomConf,
+      dataConf,
+      skinConf,
+      submitConf,
+      logicConf
+    } = data.code
+    const questionData = {
+      bannerConf,
+      baseConf,
+      bottomConf,
+      dataConf,
+      skinConf,
+      submitConf
     }
-  localStorage.setItem(surveyPath + "_questionData", JSON.stringify(formData))
-  localStorage.setItem('isSubmit', JSON.stringify(true))
 
-  if (encryptInfo?.encryptType) {
-    result.encryptType = encryptInfo?.encryptType
-    result.data = encrypt[result.encryptType as 'rsa']({
-      data: result.data,
-      secretKey: encryptInfo?.data?.secretKey
-    })
-    if (encryptInfo?.data?.sessionId) {
-      result.sessionId = encryptInfo.data.sessionId
-    }
+    document.title = data.title
+
+    store.commit('setSurveyPath', surveyPath)
+    store.dispatch('init', questionData)
+    initRuleEngine(logicConf?.showLogicConf)
   } else {
-    result.data = JSON.stringify(result.data)
+    throw new Error(res.errmsg)
   }
-
-  return result
 }
+onMounted(() => {
+  const surveyId = route.params.surveyId
+  console.log({ surveyId })
+  store.commit('setSurveyPath', surveyId)
+  getDetail(surveyId as string)
+})
 
-const submitSurver = async () => {
-  try {
-    const params = normalizationRequestBody()
-    console.log(params)
-    const res: any = await submitForm(params)
+const getDetail = async (surveyPath: string) => {
+  const alert = useCommandComponent(AlertDialog)
 
-    if (res.code === 200) {
-      store.commit('setRouter', 'successPage')
+  try {
+    if (surveyPath.length > 8) {
+      const res: any = await getPreviewSchema({ surveyPath })
+      loadData(res, surveyPath)
     } else {
-      alert({
-        title: res.errmsg || '提交失败'
-      })
+      const res: any = await getPublishedSurveyInfo({ surveyPath })
+      loadData(res, surveyPath)
+      store.dispatch('getEncryptInfo')
     }
-  } catch (error) {
+  } catch (error: any) {
     console.log(error)
-  }
-}
-
-const handleSubmit = () => {
-  const confirmAgain = store.state.submitConf.confirmAgain
-  const { again_text, is_again } = confirmAgain
-
-  if (is_again) {
-    confirm({
-      title: again_text,
-      onConfirm: async () => {
-        try {
-          submitSurver()
-        } catch (error) {
-          console.log(error)
-        } finally {
-          confirm.close()
-        }
-      }
-    })
-  } else {
-    submitSurver()
+    alert({ title: error.message || '获取问卷失败' })
   }
 }
 </script>
-<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;
-      background: rgba(255, 255, 255, var(--opacity));
-      border-radius: 8px 8px 0 0;
-      height: 100%;
-    }
-  }
-}
-</style>
diff --git a/web/src/render/pages/RenderPage.vue b/web/src/render/pages/RenderPage.vue
new file mode 100644
index 00000000..04b7bcdb
--- /dev/null
+++ b/web/src/render/pages/RenderPage.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="index">
+    <ProgressBar />
+    <div class="wrapper" ref="boxRef">
+      <HeaderContent :bannerConf="bannerConf" :readonly="true" />
+      <div class="content">
+        <MainTitle :bannerConf="bannerConf" :readonly="true"></MainTitle>
+        <MainRenderer ref="mainRef"></MainRenderer>
+        <SubmitButton
+          :validate="validate"
+          :submitConf="submitConf"
+          :readonly="true"
+          :renderData="renderData"
+          @submit="handleSubmit"
+        ></SubmitButton>
+        <LogoIcon :logo-conf="logoConf" :readonly="true" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+// @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 { submitForm } from '../api/survey'
+import encrypt from '../utils/encrypt'
+
+import useCommandComponent from '../hooks/useCommandComponent'
+
+interface Props {
+  questionInfo?: any
+  isMobile?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  questionInfo: {},
+  isMobile: false
+})
+
+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>()
+
+const alert = useCommandComponent(AlertDialog)
+const confirm = useCommandComponent(ConfirmDialog)
+
+const store = useStore()
+const router = useRouter()
+
+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 surveyPath = computed(() => store.state?.surveyPath || '')
+
+const validate = (cbk: (v: boolean) => void) => {
+  const index = 0
+  mainRef.value.$refs.formGroup[index].validate(cbk)
+}
+
+const normalizationRequestBody = () => {
+  const enterTime = store.state.enterTime
+  const encryptInfo = store.state.encryptInfo
+  const formValues = store.state.formValues
+
+  const result: any = {
+    surveyPath: surveyPath.value,
+    data: JSON.stringify(formValues),
+    difTime: Date.now() - enterTime,
+    clientTime: Date.now()
+  }
+
+  //浏览器缓存数据
+  localStorage.removeItem(surveyPath + "_questionData")
+  localStorage.removeItem("isSubmit")
+  //数据加密
+  var formData  = Object.assign({}, store.state.formValues)
+    for(const key in formData){
+      formData[key] = encodeURIComponent(formData[key])
+    }
+  localStorage.setItem(surveyPath + "_questionData", JSON.stringify(formData))
+  localStorage.setItem('isSubmit', JSON.stringify(true))
+  
+  if (encryptInfo?.encryptType) {
+    result.encryptType = encryptInfo?.encryptType
+    result.data = encrypt[result.encryptType as 'rsa']({
+      data: result.data,
+      secretKey: encryptInfo?.data?.secretKey
+    })
+    if (encryptInfo?.data?.sessionId) {
+      result.sessionId = encryptInfo.data.sessionId
+    }
+  } else {
+    result.data = JSON.stringify(result.data)
+  }
+
+  return result
+}
+
+const submitSurver = async () => {
+  if (surveyPath.value.length > 8) {
+    router.push({ name: 'successPage' })
+    return
+  }
+  try {
+    const params = normalizationRequestBody()
+    console.log(params)
+    const res: any = await submitForm(params)
+    if (res.code === 200) {
+      router.push({ name: 'successPage' })
+    } else {
+      alert({
+        title: res.errmsg || '提交失败'
+      })
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const handleSubmit = () => {
+  const confirmAgain = store.state.submitConf.confirmAgain
+  const { again_text, is_again } = confirmAgain
+
+  if (is_again) {
+    confirm({
+      title: again_text,
+      onConfirm: async () => {
+        try {
+          submitSurver()
+        } catch (error) {
+          console.log(error)
+        } finally {
+          confirm.close()
+        }
+      }
+    })
+  } else {
+    submitSurver()
+  }
+}
+</script>
+<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;
+      background: rgba(255, 255, 255, var(--opacity));
+      border-radius: 8px 8px 0 0;
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/web/src/render/router/index.ts b/web/src/render/router/index.ts
new file mode 100644
index 00000000..01d8f095
--- /dev/null
+++ b/web/src/render/router/index.ts
@@ -0,0 +1,38 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/:surveyId',
+    component: () => import('../pages/IndexPage.vue'),
+    children: [
+      {
+        path: '',
+        name: 'renderPage',
+        component: () => import('../pages/RenderPage.vue')
+      },
+      {
+        path: 'success',
+        name: 'successPage',
+        component: () => import('../pages/SuccessPage.vue')
+      },
+      {
+        path: 'error',
+        name: 'errorPage',
+        component: () => import('../pages/ErrorPage.vue')
+      }
+    ]
+  },
+  {
+    path: '/:catchAll(.*)',
+    name: 'emptyPage',
+    component: () => import('../pages/EmptyPage.vue')
+  }
+]
+// 兼容预览模式
+const base = window.location.pathname.includes('preview') ? 'management/preview' : 'render'
+const router = createRouter({
+  history: createWebHistory(base),
+  routes
+})
+
+export default router
diff --git a/web/src/render/store/actions.js b/web/src/render/store/actions.js
index 34958c1e..8f14cf8a 100644
--- a/web/src/render/store/actions.js
+++ b/web/src/render/store/actions.js
@@ -18,17 +18,21 @@ const CODE_MAP = {
   NO_AUTH: 403
 }
 const VOTE_INFO_KEY = 'voteinfo'
+import router from '../router'
 const confirm = useCommandComponent(BackAnswerDialog)
 
 export default {
   // 初始化
-  init({ commit, dispatch },{ bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf}) {
+  init(
+    { commit, dispatch },
+    { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }
+  ) {
     commit('setEnterTime')
     const { begTime, endTime, answerBegTime, answerEndTime, breakAnswer, backAnswer} = baseConf
     const { msgContent } = submitConf
     const now = Date.now()
     if (now < new Date(begTime).getTime()) {
-      commit('setRouter', 'errorPage')
+      router.push({ name: 'errorPage' })
       commit('setErrorInfo', {
         errorType: 'overTime',
         errorMsg: `<p>问卷未到开始填写时间，暂时无法进行填写<p/>
@@ -36,7 +40,7 @@ export default {
       })
       return
     } else if (now > new Date(endTime).getTime()) {
-      commit('setRouter', 'errorPage')
+      router.push({ name: 'errorPage' })
       commit('setErrorInfo', {
         errorType: 'overTime',
         errorMsg: msgContent.msg_9001 || '您来晚了，感谢支持问卷~'
@@ -48,7 +52,7 @@ export default {
       const momentStartTime = moment(`${todayStr} ${answerBegTime}`)
       const momentEndTime = moment(`${todayStr} ${answerEndTime}`)
       if (momentNow.isBefore(momentStartTime) || momentNow.isAfter(momentEndTime)) {
-        commit('setRouter', 'errorPage')
+        router.push({ name: 'errorPage' })
         commit('setErrorInfo', {
           errorType: 'overTime',
           errorMsg: `<p>不在答题时间范围内，暂时无法进行填写<p/>
diff --git a/web/src/render/store/getters.js b/web/src/render/store/getters.js
index 0dd0a32f..79d8a23f 100644
--- a/web/src/render/store/getters.js
+++ b/web/src/render/store/getters.js
@@ -10,7 +10,6 @@ export default {
         const questionArr = []
 
         item.forEach((questionKey) => {
-          console.log('题目重新计算')
           const question = { ...questionData[questionKey] }
           // 开启显示序号
           if (question.showIndex) {
diff --git a/web/src/render/store/mutations.js b/web/src/render/store/mutations.js
index 7ba6ab41..4a5c22ca 100644
--- a/web/src/render/store/mutations.js
+++ b/web/src/render/store/mutations.js
@@ -9,9 +9,6 @@ export default {
   setQuestionData(state, data) {
     state.questionData = data
   },
-  setRouter(state, data) {
-    state.router = data
-  },
   setErrorInfo(state, { errorType, errorMsg }) {
     state.errorInfo = {
       errorType,
diff --git a/web/src/render/store/state.js b/web/src/render/store/state.js
index 233de0d3..2a63c735 100644
--- a/web/src/render/store/state.js
+++ b/web/src/render/store/state.js
@@ -3,7 +3,6 @@ import { isMobile } from '../utils/index'
 export default {
   surveyPath: '',
   questionData: null,
-  router: '',
   isMobile: isMobile(),
   errorInfo: {
     errorType: '',
diff --git a/web/vite.config.ts b/web/vite.config.ts
index d7e5a8d8..1d36bdcf 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -34,6 +34,10 @@ const mpaPlugin = createMpaPlugin({
       from: /render/,
       to: () => normalizePath('/src/render/index.html')
     },
+    {
+      from: /management\/preview/,
+      to: () => normalizePath('/src/render/index.html')
+    },
     {
       from: /\/|\/management\/.?/,
       to: () => normalizePath('/src/management/index.html')