From 6771b831e540b08b0a849cb344bbf7539cb0b7c4 Mon Sep 17 00:00:00 2001
From: Weiguo Wang <wangweiguo2013@icloud.com>
Date: Thu, 9 May 2024 20:34:24 +0800
Subject: [PATCH] feat: vue3 (#103)

---
 web/.eslintrc.cjs                             |  15 +
 web/.eslintrc.js                              |  20 -
 web/.gitignore                                |   1 +
 web/.prettierrc.js                            |   5 -
 web/.prettierrc.json                          |   8 +
 web/auto-imports.d.ts                         |  10 +
 web/babel.config.js                           |  11 -
 web/components.d.ts                           |  63 +++
 web/env.d.ts                                  |   8 +
 web/package.json                              |  70 +--
 web/public/management.html                    |  14 -
 web/public/render.html                        |  49 --
 web/src/common/Editor/EditorV2.vue            |  28 +-
 web/src/common/Editor/ReadOnly.vue            |  52 +-
 web/src/common/Editor/RichEditor.vue          | 205 ++++----
 .../Editor/styles/reset-wangeditor.scss       |  19 +
 web/src/common/xss.js                         |  60 +--
 web/src/management/App.vue                    |   6 +-
 web/src/management/api/analysis.js            |  10 +-
 web/src/management/api/auth.js                |  10 +-
 web/src/management/api/base.js                |  91 ++--
 web/src/management/api/captcha.js             |   6 +-
 web/src/management/api/skin.js                |   6 +-
 web/src/management/api/survey.js              |  50 +-
 .../components/{empty.vue => EmptyIndex.vue}  |  14 +-
 .../components/{leftMenu.vue => LeftMenu.vue} |  40 +-
 .../components/{logo.vue => LogoIcon.vue}     |  14 +-
 web/src/management/config/questionConfig.js   |  22 +-
 .../management/config/questionMenuConfig.js   |  47 +-
 .../config/setterConfig/bannerConfig.js       |  24 +-
 .../config/setterConfig/logoConfig.js         |   8 +-
 .../config/setterConfig/skinConfig.js         |  48 +-
 .../config/setterConfig/submitConfig.js       |  59 +--
 web/src/management/config/skinPresets.js      |   5 +-
 web/src/management/directive/plainText.ts     |  16 +
 web/src/management/directive/safeHtml.ts      |  17 +
 web/src/management/index.html                 |  12 +
 web/src/management/main.js                    |  43 +-
 .../analysis/{index.vue => AnalysisPage.vue}  |  93 ++--
 .../pages/analysis/components/DataTable.vue   | 120 +++++
 .../pages/analysis/components/table.vue       | 108 ----
 .../create/{index.vue => CreatePage.vue}      |  33 +-
 .../{createForm.vue => CreateForm.vue}        |  81 ++-
 .../{navHeader.vue => NavHeader.vue}          |  24 +-
 .../components/{typeList.vue => TypeList.vue} |  30 +-
 web/src/management/pages/create/types.js      |  10 +-
 ...{commonTemplate.vue => CommonTemplate.vue} |  20 +-
 .../components/{logo.vue => LogoPreview.vue}  |  20 +-
 .../{mainTitle.vue => MainTitle.vue}          |  46 +-
 .../pages/edit/components/MaterialGroup.vue   | 101 ++++
 .../{navbar.vue => ModuleNavbar.vue}          |  52 +-
 .../pages/edit/components/QuestionWrapper.vue | 182 +++++++
 .../pages/edit/components/SetterField.vue     | 225 +++++++++
 .../{submit.vue => SubmitButton.vue}          |  32 +-
 .../pages/edit/components/materialGroup.vue   | 121 -----
 .../pages/edit/components/questionWrapper.vue | 335 -------------
 .../pages/edit/components/setterField.vue     | 190 --------
 web/src/management/pages/edit/index.vue       |  49 +-
 .../{history.vue => HistoryPanel.vue}         |  76 +--
 .../modules/contentModule/PublishPanel.vue    |  75 +++
 .../contentModule/{save.vue => SavePanel.vue} | 106 ++--
 .../edit/modules/contentModule/buildData.js   |  18 +-
 .../edit/modules/contentModule/publish.vue    |  72 ---
 .../generalModule/{back.vue => BackPanel.vue} |  12 +-
 .../{pageNav.vue => NavPanel.vue}             |  52 +-
 .../{pageTitle.vue => TitlePanel.vue}         |  12 +-
 .../{catalogPanel.vue => CatalogPanel.vue}    |  29 +-
 .../{previewPanel.vue => PreviewPanel.vue}    | 142 +++---
 .../{setterPanel.vue => SetterPanel.vue}      |  37 +-
 .../{catalogItem.vue => CatalogItem.vue}      |  23 +-
 .../{catalog.vue => QuestionCatalog.vue}      |  58 +--
 .../questionModule/components/TypeList.vue    | 131 +++++
 .../questionModule/components/typeList.vue    | 162 ------
 .../{setting.vue => SettingPanel.vue}         | 116 ++---
 .../{banner.vue => BannerContent.vue}         |  29 +-
 .../components/{overTime.vue => OverTime.vue} |  18 +-
 .../{success.vue => SuccessContent.vue}       |  20 +-
 .../settingModule/config/baseConfig.js        |   8 +-
 .../settingModule/config/baseFormConfig.js    |  67 +--
 .../settingModule/config/statusConfig.js      |  16 +-
 .../pages/edit/modules/settingModule/enum.js  |   4 +-
 .../{catalogPanel.vue => CatalogPanel.vue}    |  30 +-
 .../{previewPanel.vue => PreviewPanel.vue}    |  46 +-
 .../{setterPanel.vue => SetterPanel.vue}      | 118 +++--
 .../{catalogPanel.vue => CatalogPanel.vue}    |  95 ++--
 .../{previewPanel.vue => PreviewPanel.vue}    | 109 ++---
 .../skin/{setterPanel.vue => SetterPanel.vue} |  64 +--
 .../management/pages/edit/pages/EditPage.vue  |  36 ++
 .../pages/{setting.vue => SettingPage.vue}    |  14 +-
 web/src/management/pages/edit/pages/edit.vue  |  28 --
 .../pages/edit/pages/skin/ContentPage.vue     |  37 ++
 .../pages/edit/pages/skin/ResultPage.vue      |  30 ++
 .../pages/edit/pages/skin/content.vue         |  32 --
 .../pages/edit/pages/skin/index.vue           |  45 +-
 .../pages/edit/pages/skin/result.vue          |  24 -
 .../components/{baseList.vue => BaseList.vue} | 259 +++++-----
 .../{modify.vue => ModifyDialog.vue}          | 100 ++--
 .../components/{state.vue => StateModule.vue} |  18 +-
 .../pages/list/components/StaticIcon.vue      |  15 +
 .../components/{tag.vue => TagModule.vue}     |  22 +-
 .../{textButton.vue => TextButton.vue}        |  55 ++-
 .../{textSearch.vue => TextSearch.vue}        |  43 +-
 .../{textSelect.vue => TextSelect.vue}        |  30 +-
 .../components/{toolBar.vue => ToolBar.vue}   |  50 +-
 .../components/{tool.vue => ToolModule.vue}   |  22 +-
 web/src/management/pages/list/config/index.js |  84 ++--
 web/src/management/pages/list/index.vue       |  25 +-
 .../pages/login/{index.vue => LoginPage.vue}  | 114 +++--
 .../{index.vue => PublishResultPage.vue}      |  69 +--
 .../{channelRow.vue => ChannelRow.vue}        |  69 +--
 .../pages/publishResult/components/QRCode.vue |  34 +-
 web/src/management/router/index.js            | 155 ------
 web/src/management/router/index.ts            | 134 +++++
 web/src/management/store/actions.js           |  12 +-
 web/src/management/store/edit/actions.js      |  68 ++-
 web/src/management/store/edit/getters.js      |  77 ++-
 web/src/management/store/edit/index.js        |  12 +-
 web/src/management/store/edit/mutations.js    |  86 ++--
 web/src/management/store/edit/state.js        |  24 +-
 web/src/management/store/index.js             |  23 +-
 web/src/management/store/mutations.js         |   6 +-
 web/src/management/store/state.js             |   4 +-
 web/src/management/store/user/index.js        |  52 +-
 web/src/management/styles/edit-btn.scss       |   2 +-
 .../management/styles/element-variables.scss  |  17 +-
 web/src/management/styles/icon.scss           |  73 +--
 .../management/styles/reset-wangeditor.scss   |  15 -
 web/src/management/styles/reset.scss          |  16 +-
 web/src/management/styles/skin.scss           |  12 -
 web/src/management/styles/variable.scss       |  35 +-
 web/src/management/utils/constant.js          |   4 +-
 web/src/management/utils/index.js             |  82 ++--
 .../questions/QuestionContainerB/index.jsx    | 138 ++++++
 .../style.scss}                               |   4 +-
 .../questions/QuestionContainerC/index.jsx    |  96 ++++
 .../questions/QuestionContainerC/style.scss   |   8 +
 .../ErrorTip/index.vue}                       |  15 +-
 .../questions/QuestionRuleContainer/index.jsx | 186 +++++++
 .../style.scss}                               |   6 +-
 .../questions/common/config/basicConfig.js    |  23 +-
 .../questions/common/config/moduleList.js     |   4 +-
 .../questions/common/config/tagList.js        |   6 +-
 .../questions/common/config/typeMap.js        |   4 +-
 .../questions/common/css/default.scss         |   1 -
 .../materials/questions/common/css/group.scss | 193 --------
 .../materials/questions/common/css/icon.scss  |  21 +-
 .../materials/questions/common/css/input.scss |  94 ----
 .../questions/common/css/option.scss          | 230 ---------
 .../questions/common/css/radioQuestion.scss   | 110 -----
 .../questions/common/css/radioStar.scss       |  87 ----
 .../questions/common/css/textarea.scss        |  81 ---
 .../materials/questions/common/css/title.scss |  75 ---
 .../materials/questions/common/css/vote.scss  |  30 --
 .../questions/common/utils/getOptionHash.js   |  16 +-
 .../materials/questions/common/utils/index.js |  74 ++-
 .../AdvancedConfig/OptionConfig.vue           | 461 ------------------
 .../components/Options/BatchAddPopover.vue    |  79 ---
 .../components/Options/OptionEdit.vue         | 298 -----------
 .../components/Options/OptionEditBar.vue      | 216 --------
 .../components/Options/OptionSetting.vue      | 258 ----------
 web/src/materials/questions/questionLoader.js |  49 +-
 .../questions/widgets/BaseChoice/index.jsx    | 154 +++---
 .../BaseChoice/style.scss}                    | 177 +------
 .../questions/widgets/BaseInput/index.jsx     | 108 ++--
 .../questions/widgets/BaseInput/style.scss    |  71 +++
 .../questions/widgets/BaseRate/index.jsx      |  70 +--
 .../questions/widgets/BaseRate/style.scss     |  32 ++
 .../widgets/BinaryChoiceModule/index.jsx      |  68 ++-
 .../widgets/BinaryChoiceModule/meta.js        |  47 +-
 .../widgets/CheckboxModule/index.jsx          | 127 ++---
 .../questions/widgets/CheckboxModule/meta.js  | 174 +------
 .../questions/widgets/EditOptions.jsx         | 156 ------
 .../AdvancedConfig/OptionConfig.vue           | 387 +++++++++++++++
 .../AdvancedConfig/RateConfig.vue             |  98 ++--
 .../EditOptions/ExtraIcon/index.vue}          |  55 +--
 .../EditOptions/Options/OptionEdit.vue        | 162 ++++++
 .../EditOptions/Options/OptionEditBar.vue     | 163 +++++++
 .../EditOptions}/Options/UseOptionBase.jsx    |  70 +--
 .../questions/widgets/EditOptions/index.jsx   | 112 +++++
 .../questions/widgets/InputModule/index.jsx   | 135 ++---
 .../questions/widgets/InputModule/meta.js     | 131 ++---
 .../questions/widgets/InputModule/style.scss  |  19 +
 .../questions/widgets/NpsModule/index.jsx     | 160 ++++++
 .../questions/widgets/NpsModule/index.vue     | 157 ------
 .../questions/widgets/NpsModule/meta.js       |  74 ++-
 .../questions/widgets/NpsModule/style.scss    |  36 ++
 .../questions/widgets/QuestionContainer.jsx   | 168 -------
 .../widgets/QuestionRuleContainer.jsx         | 193 --------
 .../questions/widgets/RadioModule/index.jsx   | 110 ++---
 .../questions/widgets/RadioModule/meta.js     | 185 +------
 .../widgets/SelectMoreModule/index.jsx        |  50 +-
 .../questions/widgets/StarModule/index.jsx    | 115 +++--
 .../questions/widgets/StarModule/meta.js      | 104 +---
 .../questions/widgets/StarModule/style.scss   |  24 +
 .../widgets/TextareaModule/index.jsx          | 120 ++---
 .../questions/widgets/TextareaModule/meta.js  | 128 ++---
 .../widgets/TextareaModule/style.scss         |  11 +
 web/src/materials/questions/widgets/Title.jsx | 127 -----
 .../widgets/TitleModules/EditTitle/index.jsx  |  80 +++
 .../widgets/TitleModules/EditTitle/style.scss |   9 +
 .../TitleModules/PreviewTitle/index.jsx       |  48 ++
 .../TitleModules/TitleContent/index.jsx       | 106 ++++
 .../TitleModules/TitleContent/style.scss      |  59 +++
 .../VoteModule/AnswerProcess/index.vue}       |  25 +-
 .../questions/widgets/VoteModule/index.jsx    | 150 +++---
 .../questions/widgets/VoteModule/meta.js      | 162 +-----
 .../questions/widgets/VoteModule/style.scss   |  21 +
 web/src/materials/setters/constant.js         |   2 +-
 web/src/materials/setters/setterLoader.js     |   8 +-
 .../materials/setters/widgets/CheckBox.vue    |  60 ++-
 .../setters/widgets/CheckboxGroup.vue         |  48 +-
 .../materials/setters/widgets/ColorInput.vue  |  20 +-
 .../materials/setters/widgets/ColorPicker.vue |  30 +-
 .../setters/widgets/CustomedSwitch.vue        |  44 +-
 .../materials/setters/widgets/FormItem.vue    |  71 ++-
 .../setters/widgets/FormdataBackFill.vue      |  66 +--
 .../setters/widgets/FreqAndNumberLimit.vue    |  30 +-
 .../materials/setters/widgets/InputNumber.vue |  88 ++--
 .../setters/widgets/InputPercent.vue          |  61 ++-
 .../widgets/{Input.vue => InputSetter.vue}    |  50 +-
 .../materials/setters/widgets/MultiInput.vue  |  34 +-
 .../materials/setters/widgets/MultiSelect.vue |  38 +-
 .../setters/widgets/QuestionTime.vue          |  60 +--
 .../setters/widgets/QuestionTimeHour.vue      |  57 +--
 .../materials/setters/widgets/RadioGroup.vue  |  69 ++-
 .../widgets/{Radio.vue => RadioSetter.vue}    |  69 ++-
 .../widgets/{Range.vue => RangeSetter.vue}    |  68 +--
 .../materials/setters/widgets/RichText.vue    | 131 ++---
 .../widgets/{Select.vue => SelectSetter.vue}  |  63 ++-
 .../setters/widgets/SliderSetter.vue          |  32 +-
 web/src/materials/utils/componentLoader.js    |  50 +-
 web/src/render/App.vue                        | 102 ++--
 web/src/render/adapter/formValue.js           |  32 +-
 web/src/render/adapter/index.js               |  37 +-
 web/src/render/adapter/question.js            |  32 +-
 web/src/render/adapter/questionSeq.js         |  14 +-
 web/src/render/adapter/rules.js               | 220 ++++-----
 web/src/render/api/base.js                    |  60 +--
 web/src/render/api/survey.js                  |  26 +-
 .../components/{alert.vue => AlertDialog.vue} |  24 +-
 .../{confirm.vue => ConfirmDialog.vue}        |  30 +-
 .../{header.vue => HeaderSetter.vue}          |  50 +-
 .../components/{logo.vue => LogoIcon.vue}     |  21 +-
 web/src/render/components/MainRenderer.vue    |  42 ++
 .../{mainTitle.vue => MainTitle.vue}          |  15 +-
 web/src/render/components/MaterialGroup.vue   | 111 +++++
 .../{progressBar.vue => ProgressBar.vue}      |  12 +-
 .../{submit.vue => SubmitSetter.vue}          |  33 +-
 web/src/render/components/form.vue            |  82 ----
 web/src/render/components/mainRenderer.vue    |  44 --
 web/src/render/components/materialGroup.vue   |  65 ---
 web/src/render/hook/useProgress.js            |  40 --
 web/src/render/hooks/useCommandComponent.ts   |  88 ++++
 web/src/render/hooks/useProgress.js           |  44 ++
 web/src/render/index.html                     |  45 ++
 web/src/render/main.js                        |  31 +-
 .../pages/{emptyPage.vue => EmptyPage.vue}    |   4 +-
 .../pages/{errorPage.vue => ErrorPage.vue}    |  29 +-
 web/src/render/pages/IndexPage.vue            | 155 ++++++
 .../{successPage.vue => SuccessPage.vue}      |  26 +-
 web/src/render/pages/index.vue                | 150 ------
 web/src/render/plugins/dialog/index.js        |  58 +--
 web/src/render/store/actions.js               | 126 ++---
 web/src/render/store/getters.js               |  96 ++--
 web/src/render/store/index.js                 |  18 +-
 web/src/render/store/mutations.js             |  37 +-
 web/src/render/store/state.js                 |   8 +-
 web/src/render/styles/default.scss            |   3 +-
 web/src/render/styles/dialog.scss             |   4 +-
 web/src/render/styles/icon.scss               |  13 +-
 web/src/render/styles/reset.scss              |  23 +-
 web/src/render/styles/variable.scss           |  18 +-
 web/src/render/utils/encrypt.js               |  20 +-
 web/src/render/utils/eventbus.js              |  27 +
 web/src/render/utils/index.js                 |  35 +-
 web/tsconfig.app.json                         |  15 +
 web/tsconfig.json                             |  11 +
 web/tsconfig.node.json                        |  19 +
 web/vite.config.ts                            | 117 +++++
 web/vue.config.js                             | 124 -----
 280 files changed, 8111 insertions(+), 10342 deletions(-)
 create mode 100644 web/.eslintrc.cjs
 delete mode 100644 web/.eslintrc.js
 delete mode 100644 web/.prettierrc.js
 create mode 100644 web/.prettierrc.json
 create mode 100644 web/auto-imports.d.ts
 delete mode 100644 web/babel.config.js
 create mode 100644 web/components.d.ts
 create mode 100644 web/env.d.ts
 delete mode 100644 web/public/management.html
 delete mode 100644 web/public/render.html
 create mode 100644 web/src/common/Editor/styles/reset-wangeditor.scss
 rename web/src/management/components/{empty.vue => EmptyIndex.vue} (82%)
 rename web/src/management/components/{leftMenu.vue => LeftMenu.vue} (78%)
 rename web/src/management/components/{logo.vue => LogoIcon.vue} (86%)
 create mode 100644 web/src/management/directive/plainText.ts
 create mode 100644 web/src/management/directive/safeHtml.ts
 create mode 100644 web/src/management/index.html
 rename web/src/management/pages/analysis/{index.vue => AnalysisPage.vue} (62%)
 create mode 100644 web/src/management/pages/analysis/components/DataTable.vue
 delete mode 100644 web/src/management/pages/analysis/components/table.vue
 rename web/src/management/pages/create/{index.vue => CreatePage.vue} (52%)
 rename web/src/management/pages/create/components/{createForm.vue => CreateForm.vue} (72%)
 rename web/src/management/pages/create/components/{navHeader.vue => NavHeader.vue} (88%)
 rename web/src/management/pages/create/components/{typeList.vue => TypeList.vue} (89%)
 rename web/src/management/pages/edit/components/{commonTemplate.vue => CommonTemplate.vue} (66%)
 rename web/src/management/pages/edit/components/{logo.vue => LogoPreview.vue} (89%)
 rename web/src/management/pages/edit/components/{mainTitle.vue => MainTitle.vue} (59%)
 create mode 100644 web/src/management/pages/edit/components/MaterialGroup.vue
 rename web/src/management/pages/edit/components/{navbar.vue => ModuleNavbar.vue} (50%)
 create mode 100644 web/src/management/pages/edit/components/QuestionWrapper.vue
 create mode 100644 web/src/management/pages/edit/components/SetterField.vue
 rename web/src/management/pages/edit/components/{submit.vue => SubmitButton.vue} (53%)
 delete mode 100644 web/src/management/pages/edit/components/materialGroup.vue
 delete mode 100644 web/src/management/pages/edit/components/questionWrapper.vue
 delete mode 100644 web/src/management/pages/edit/components/setterField.vue
 rename web/src/management/pages/edit/modules/contentModule/{history.vue => HistoryPanel.vue} (66%)
 create mode 100644 web/src/management/pages/edit/modules/contentModule/PublishPanel.vue
 rename web/src/management/pages/edit/modules/contentModule/{save.vue => SavePanel.vue} (59%)
 delete mode 100644 web/src/management/pages/edit/modules/contentModule/publish.vue
 rename web/src/management/pages/edit/modules/generalModule/{back.vue => BackPanel.vue} (83%)
 rename web/src/management/pages/edit/modules/generalModule/{pageNav.vue => NavPanel.vue} (66%)
 rename web/src/management/pages/edit/modules/generalModule/{pageTitle.vue => TitlePanel.vue} (83%)
 rename web/src/management/pages/edit/modules/questionModule/{catalogPanel.vue => CatalogPanel.vue} (58%)
 rename web/src/management/pages/edit/modules/questionModule/{previewPanel.vue => PreviewPanel.vue} (58%)
 rename web/src/management/pages/edit/modules/questionModule/{setterPanel.vue => SetterPanel.vue} (74%)
 rename web/src/management/pages/edit/modules/questionModule/components/{catalogItem.vue => CatalogItem.vue} (85%)
 rename web/src/management/pages/edit/modules/questionModule/components/{catalog.vue => QuestionCatalog.vue} (55%)
 create mode 100644 web/src/management/pages/edit/modules/questionModule/components/TypeList.vue
 delete mode 100644 web/src/management/pages/edit/modules/questionModule/components/typeList.vue
 rename web/src/management/pages/edit/modules/settingModule/{setting.vue => SettingPanel.vue} (63%)
 rename web/src/management/pages/edit/modules/settingModule/components/{banner.vue => BannerContent.vue} (85%)
 rename web/src/management/pages/edit/modules/settingModule/components/{overTime.vue => OverTime.vue} (74%)
 rename web/src/management/pages/edit/modules/settingModule/components/{success.vue => SuccessContent.vue} (88%)
 rename web/src/management/pages/edit/modules/settingModule/result/{catalogPanel.vue => CatalogPanel.vue} (82%)
 rename web/src/management/pages/edit/modules/settingModule/result/{previewPanel.vue => PreviewPanel.vue} (58%)
 rename web/src/management/pages/edit/modules/settingModule/result/{setterPanel.vue => SetterPanel.vue} (55%)
 rename web/src/management/pages/edit/modules/settingModule/skin/{catalogPanel.vue => CatalogPanel.vue} (65%)
 rename web/src/management/pages/edit/modules/settingModule/skin/{previewPanel.vue => PreviewPanel.vue} (56%)
 rename web/src/management/pages/edit/modules/settingModule/skin/{setterPanel.vue => SetterPanel.vue} (67%)
 create mode 100644 web/src/management/pages/edit/pages/EditPage.vue
 rename web/src/management/pages/edit/pages/{setting.vue => SettingPage.vue} (56%)
 delete mode 100644 web/src/management/pages/edit/pages/edit.vue
 create mode 100644 web/src/management/pages/edit/pages/skin/ContentPage.vue
 create mode 100644 web/src/management/pages/edit/pages/skin/ResultPage.vue
 delete mode 100644 web/src/management/pages/edit/pages/skin/content.vue
 delete mode 100644 web/src/management/pages/edit/pages/skin/result.vue
 rename web/src/management/pages/list/components/{baseList.vue => BaseList.vue} (63%)
 rename web/src/management/pages/list/components/{modify.vue => ModifyDialog.vue} (52%)
 rename web/src/management/pages/list/components/{state.vue => StateModule.vue} (82%)
 create mode 100644 web/src/management/pages/list/components/StaticIcon.vue
 rename web/src/management/pages/list/components/{tag.vue => TagModule.vue} (75%)
 rename web/src/management/pages/list/components/{textButton.vue => TextButton.vue} (51%)
 rename web/src/management/pages/list/components/{textSearch.vue => TextSearch.vue} (58%)
 rename web/src/management/pages/list/components/{textSelect.vue => TextSelect.vue} (67%)
 rename web/src/management/pages/list/components/{toolBar.vue => ToolBar.vue} (61%)
 rename web/src/management/pages/list/components/{tool.vue => ToolModule.vue} (80%)
 rename web/src/management/pages/login/{index.vue => LoginPage.vue} (71%)
 rename web/src/management/pages/publishResult/{index.vue => PublishResultPage.vue} (70%)
 rename web/src/management/pages/publishResult/components/{channelRow.vue => ChannelRow.vue} (62%)
 delete mode 100644 web/src/management/router/index.js
 create mode 100644 web/src/management/router/index.ts
 delete mode 100644 web/src/management/styles/reset-wangeditor.scss
 delete mode 100644 web/src/management/styles/skin.scss
 create mode 100644 web/src/materials/questions/QuestionContainerB/index.jsx
 rename web/src/materials/questions/{common/css/question.scss => QuestionContainerB/style.scss} (78%)
 create mode 100644 web/src/materials/questions/QuestionContainerC/index.jsx
 create mode 100644 web/src/materials/questions/QuestionContainerC/style.scss
 rename web/src/materials/questions/{components/ErrorTip.vue => QuestionRuleContainer/ErrorTip/index.vue} (80%)
 create mode 100644 web/src/materials/questions/QuestionRuleContainer/index.jsx
 rename web/src/materials/questions/{common/css/formItem.scss => QuestionRuleContainer/style.scss} (96%)
 delete mode 100644 web/src/materials/questions/common/css/group.scss
 delete mode 100644 web/src/materials/questions/common/css/input.scss
 delete mode 100644 web/src/materials/questions/common/css/option.scss
 delete mode 100644 web/src/materials/questions/common/css/radioQuestion.scss
 delete mode 100644 web/src/materials/questions/common/css/radioStar.scss
 delete mode 100644 web/src/materials/questions/common/css/textarea.scss
 delete mode 100644 web/src/materials/questions/common/css/title.scss
 delete mode 100644 web/src/materials/questions/common/css/vote.scss
 delete mode 100644 web/src/materials/questions/components/AdvancedConfig/OptionConfig.vue
 delete mode 100644 web/src/materials/questions/components/Options/BatchAddPopover.vue
 delete mode 100644 web/src/materials/questions/components/Options/OptionEdit.vue
 delete mode 100644 web/src/materials/questions/components/Options/OptionEditBar.vue
 delete mode 100644 web/src/materials/questions/components/Options/OptionSetting.vue
 rename web/src/materials/questions/{common/css/choice.scss => widgets/BaseChoice/style.scss} (50%)
 create mode 100644 web/src/materials/questions/widgets/BaseInput/style.scss
 create mode 100644 web/src/materials/questions/widgets/BaseRate/style.scss
 delete mode 100644 web/src/materials/questions/widgets/EditOptions.jsx
 create mode 100644 web/src/materials/questions/widgets/EditOptions/AdvancedConfig/OptionConfig.vue
 rename web/src/materials/questions/{components => widgets/EditOptions}/AdvancedConfig/RateConfig.vue (64%)
 rename web/src/materials/questions/{components/ExtraIcon.vue => widgets/EditOptions/ExtraIcon/index.vue} (80%)
 create mode 100644 web/src/materials/questions/widgets/EditOptions/Options/OptionEdit.vue
 create mode 100644 web/src/materials/questions/widgets/EditOptions/Options/OptionEditBar.vue
 rename web/src/materials/questions/{components => widgets/EditOptions}/Options/UseOptionBase.jsx (51%)
 create mode 100644 web/src/materials/questions/widgets/EditOptions/index.jsx
 create mode 100644 web/src/materials/questions/widgets/InputModule/style.scss
 create mode 100644 web/src/materials/questions/widgets/NpsModule/index.jsx
 delete mode 100644 web/src/materials/questions/widgets/NpsModule/index.vue
 create mode 100644 web/src/materials/questions/widgets/NpsModule/style.scss
 delete mode 100644 web/src/materials/questions/widgets/QuestionContainer.jsx
 delete mode 100644 web/src/materials/questions/widgets/QuestionRuleContainer.jsx
 create mode 100644 web/src/materials/questions/widgets/StarModule/style.scss
 create mode 100644 web/src/materials/questions/widgets/TextareaModule/style.scss
 delete mode 100644 web/src/materials/questions/widgets/Title.jsx
 create mode 100644 web/src/materials/questions/widgets/TitleModules/EditTitle/index.jsx
 create mode 100644 web/src/materials/questions/widgets/TitleModules/EditTitle/style.scss
 create mode 100644 web/src/materials/questions/widgets/TitleModules/PreviewTitle/index.jsx
 create mode 100644 web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx
 create mode 100644 web/src/materials/questions/widgets/TitleModules/TitleContent/style.scss
 rename web/src/materials/questions/{components/Progress.vue => widgets/VoteModule/AnswerProcess/index.vue} (70%)
 create mode 100644 web/src/materials/questions/widgets/VoteModule/style.scss
 rename web/src/materials/setters/widgets/{Input.vue => InputSetter.vue} (53%)
 rename web/src/materials/setters/widgets/{Radio.vue => RadioSetter.vue} (64%)
 rename web/src/materials/setters/widgets/{Range.vue => RangeSetter.vue} (58%)
 rename web/src/materials/setters/widgets/{Select.vue => SelectSetter.vue} (67%)
 rename web/src/render/components/{alert.vue => AlertDialog.vue} (71%)
 rename web/src/render/components/{confirm.vue => ConfirmDialog.vue} (75%)
 rename web/src/render/components/{header.vue => HeaderSetter.vue} (73%)
 rename web/src/render/components/{logo.vue => LogoIcon.vue} (52%)
 create mode 100644 web/src/render/components/MainRenderer.vue
 rename web/src/render/components/{mainTitle.vue => MainTitle.vue} (73%)
 create mode 100644 web/src/render/components/MaterialGroup.vue
 rename web/src/render/components/{progressBar.vue => ProgressBar.vue} (87%)
 rename web/src/render/components/{submit.vue => SubmitSetter.vue} (67%)
 delete mode 100644 web/src/render/components/form.vue
 delete mode 100644 web/src/render/components/mainRenderer.vue
 delete mode 100644 web/src/render/components/materialGroup.vue
 delete mode 100644 web/src/render/hook/useProgress.js
 create mode 100644 web/src/render/hooks/useCommandComponent.ts
 create mode 100644 web/src/render/hooks/useProgress.js
 create mode 100644 web/src/render/index.html
 rename web/src/render/pages/{emptyPage.vue => EmptyPage.vue} (96%)
 rename web/src/render/pages/{errorPage.vue => ErrorPage.vue} (75%)
 create mode 100644 web/src/render/pages/IndexPage.vue
 rename web/src/render/pages/{successPage.vue => SuccessPage.vue} (75%)
 delete mode 100644 web/src/render/pages/index.vue
 create mode 100644 web/src/render/utils/eventbus.js
 create mode 100644 web/tsconfig.app.json
 create mode 100644 web/tsconfig.json
 create mode 100644 web/tsconfig.node.json
 create mode 100644 web/vite.config.ts
 delete mode 100644 web/vue.config.js

diff --git a/web/.eslintrc.cjs b/web/.eslintrc.cjs
new file mode 100644
index 00000000..50ee96f9
--- /dev/null
+++ b/web/.eslintrc.cjs
@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
deleted file mode 100644
index 6a92b6a6..00000000
--- a/web/.eslintrc.js
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
-  root: false,
-  env: {
-    node: true,
-  },
-  extends: [
-    'plugin:vue/essential',
-    'eslint:recommended',
-    'plugin:prettier/recommended',
-  ],
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'vue/multi-word-component-names': 'off',
-    semi: ['error', 'always'],
-  },
-};
diff --git a/web/.gitignore b/web/.gitignore
index 9effb928..6bf0eb84 100644
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -14,6 +14,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 package-lock.json
+pnpm-lock.yaml
 
 # Editor directories and files
 .idea
diff --git a/web/.prettierrc.js b/web/.prettierrc.js
deleted file mode 100644
index 42b53e57..00000000
--- a/web/.prettierrc.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  singleQuote: true, // 使用单引号
-  semi: true, // 不使用分号
-  // trailingComma: 'all', // 在对象和数组末尾加上逗号
-};
diff --git a/web/.prettierrc.json b/web/.prettierrc.json
new file mode 100644
index 00000000..66e23359
--- /dev/null
+++ b/web/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
\ No newline at end of file
diff --git a/web/auto-imports.d.ts b/web/auto-imports.d.ts
new file mode 100644
index 00000000..d7d6df67
--- /dev/null
+++ b/web/auto-imports.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
+}
diff --git a/web/babel.config.js b/web/babel.config.js
deleted file mode 100644
index 104f822b..00000000
--- a/web/babel.config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset',
-    [
-      '@vue/babel-preset-jsx',
-      {
-        injectH: false,
-      },
-    ],
-  ],
-};
diff --git a/web/components.d.ts b/web/components.d.ts
new file mode 100644
index 00000000..411d01a0
--- /dev/null
+++ b/web/components.d.ts
@@ -0,0 +1,63 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+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']
+    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']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    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']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    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']
+    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']
+    'IEp-[]': typeof import('~icons/ep/[]')['default']
+    'IEp-[test]': typeof import('~icons/ep/[test]')['default']
+    'IEp-]': typeof import('~icons/ep/]')['default']
+    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']
+    IEpLoading: typeof import('~icons/ep/loading')['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']
+  }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+    vPopover: typeof import('element-plus/es')['ElPopoverDirective']
+  }
+}
diff --git a/web/env.d.ts b/web/env.d.ts
new file mode 100644
index 00000000..9706856f
--- /dev/null
+++ b/web/env.d.ts
@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+declare module "vuex" {
+    export * from "vuex/types/index.d.ts";
+    export * from "vuex/types/helpers.d.ts";
+    export * from "vuex/types/logger.d.ts";
+    export * from "vuex/types/vue.d.ts";
+  }
+  
\ No newline at end of file
diff --git a/web/package.json b/web/package.json
index eb054e0a..cada0c8c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -2,55 +2,57 @@
   "name": "web",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "report": "vue-cli-service build --report",
-    "lint": "vue-cli-service lint",
-    "lintfix": "eslint --fix ."
+    "serve": "vite",
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
   },
   "dependencies": {
-    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
-    "@vue/babel-preset-jsx": "^1.4.0",
     "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "async-validator": "^4.2.5",
     "axios": "^1.4.0",
     "clipboard": "^2.0.11",
-    "core-js": "^3.8.3",
     "crypto-js": "^4.2.0",
-    "element-ui": "^2.15.13",
+    "element-plus": "^2.7.0",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.4",
     "node-forge": "^1.3.1",
     "qrcode": "^1.5.3",
-    "vue": "^2.7.14",
-    "vue-router": "^3.5.1",
-    "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2",
+    "vue": "^3.4.15",
+    "vue-router": "^4.2.5",
+    "vuedraggable": "^4.1.0",
+    "vuex": "^4.0.2",
     "xss": "^1.0.14"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.7.1",
-    "less-loader": "^11.1.3",
-    "postcss-import": "^15.1.0",
-    "postcss-url": "^10.1.3",
-    "prettier": "^2.4.1",
-    "sass": "^1.32.7",
-    "sass-loader": "^12.0.0",
-    "speed-measure-webpack-plugin": "^1.5.0",
-    "style-resources-loader": "^1.5.0",
-    "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.7.14"
+    "@iconify-json/ep": "^1.1.15",
+    "@rushstack/eslint-patch": "^1.10.2",
+    "@tsconfig/node20": "^20.1.2",
+    "@types/node": "^20.11.19",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^8.49.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "npm-run-all2": "^6.1.1",
+    "prettier": "^3.0.3",
+    "sass": "^1.72.0",
+    "typescript": "~5.3.0",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-icons": "^0.18.5",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.1.4",
+    "vite-plugin-virtual-mpa": "^1.11.0",
+    "vue-tsc": "^1.8.27"
   },
   "engines": {
     "node": ">=14.21.0",
diff --git a/web/public/management.html b/web/public/management.html
deleted file mode 100644
index 6ee8228b..00000000
--- a/web/public/management.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>imgs/favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
diff --git a/web/public/render.html b/web/public/render.html
deleted file mode 100644
index e31ce4d8..00000000
--- a/web/public/render.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>imgs/favicon.ico">
-  <title>
-    <%= htmlWebpackPlugin.options.title %>
-  </title>
-  <script>
-    (function () {
-      function resetRemUnit() {
-        var PC_W = 750;
-        var docEl = window.document.documentElement;
-        var width = docEl.getBoundingClientRect().width || 375;
-
-        if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent)) {
-          width = width < PC_W ? width : PC_W;
-          docEl.className += ' ispc-html';
-        }
-
-        var f = Math.min(width / 7.5, 50);
-        docEl.style.fontSize = f + 'px';
-
-        var d = window.document.createElement('div');
-        d.style.width = '1rem';
-        d.style.display = "none";
-        var head = window.document.getElementsByTagName('head')[0];
-        head.appendChild(d);
-        var realf = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
-
-        if (f !== realf) {
-          docEl.style.fontSize = f * (f / realf) + 'px';
-        }
-      }
-      resetRemUnit();
-      window.addEventListener('resize', resetRemUnit);
-    })();
-  </script>
-  <style></style>
-</head>
-
-<body>
-  <div id="app"></div>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/web/src/common/Editor/EditorV2.vue b/web/src/common/Editor/EditorV2.vue
index 0f7ed8a9..38a4ff07 100644
--- a/web/src/common/Editor/EditorV2.vue
+++ b/web/src/common/Editor/EditorV2.vue
@@ -1,43 +1,43 @@
 <template>
   <div class="editor-v2">
-    <RichEditor :value="realData" @input="handleChange" @blur="handleBlur" />
+    <RichEditor :modelValue="realData" @input="handleChange" @blur="handleBlur" />
   </div>
 </template>
 <script>
-import RichEditor from './RichEditor';
+import RichEditor from './RichEditor.vue'
 
 export default {
   components: {
-    RichEditor,
+    RichEditor
     // ReadOnly,
   },
   props: {
     realData: {
       type: String,
-      default: () => '',
+      default: () => ''
     },
     questionDataList: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
   data() {
-    return {};
+    return {}
   },
   computed: {},
   watch: {},
-  destroyed() {
-    this.$emit('onDestroy');
+  unmounted() {
+    this.$emit('onDestroy')
   },
   methods: {
     handleChange(v) {
-      this.$emit('change', v);
+      this.$emit('change', v)
     },
     handleBlur(v) {
-      this.$emit('blur', v);
-    },
-  },
-};
+      this.$emit('blur', v)
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .editor-v2 {
diff --git a/web/src/common/Editor/ReadOnly.vue b/web/src/common/Editor/ReadOnly.vue
index 3f2a2b19..1719dc3e 100644
--- a/web/src/common/Editor/ReadOnly.vue
+++ b/web/src/common/Editor/ReadOnly.vue
@@ -4,33 +4,33 @@
   </div>
 </template>
 <script>
-import { filterXSS } from '@/common/xss';
+import { filterXSS } from '@/common/xss'
 export default {
   name: 'ReadOnly',
   props: {
     realData: {
       type: String,
-      default: () => '',
+      default: () => ''
     },
     viewData: {
       type: String,
-      default: () => '',
+      default: () => ''
     },
     tag: {
       tyle: String,
-      default: () => '',
+      default: () => ''
     },
     border: {
       tyle: Boolean,
-      default: () => false,
+      default: () => false
     },
     defaultStyle: {
       tyle: Boolean,
-      default: () => false,
-    },
+      default: () => false
+    }
   },
   data() {
-    return {};
+    return {}
   },
   computed: {
     tagHtml() {
@@ -47,38 +47,38 @@ export default {
             border-radius: 0 0.06rem;
             background: rgba(250,136,26,0.1);
           ">${this.tag}</span>`
-        : '';
+        : ''
     },
     getHtml() {
-      const title = filterXSS(this.viewData);
-      if (!this.tag) return title;
-      let html = this.isRichText(title) ? title : `<p>${title}</p>`;
-      const index = html.lastIndexOf('</p>');
+      const title = filterXSS(this.viewData)
+      if (!this.tag) return title
+      let html = this.isRichText(title) ? title : `<p>${title}</p>`
+      const index = html.lastIndexOf('</p>')
       if (this.viewData.indexOf(this.tagHtml) < 0) {
-        html = html.slice(0, index) + this.tagHtml + html.slice(index);
+        html = html.slice(0, index) + this.tagHtml + html.slice(index)
       }
-      return html;
+      return html
     },
     getStyle() {
-      let style = '';
+      let style = ''
       if (this.border) {
-        style += 'border:1px solid #c8c9cd;padding:10px;';
+        style += 'border:1px solid #c8c9cd;padding:10px;'
       }
       if (this.defaultStyle) {
-        style += 'color: #6e707c;font-size: 12px;';
+        style += 'color: #6e707c;font-size: 12px;'
       }
-      return style;
-    },
+      return style
+    }
   },
-  destroyed() {
-    this.$emit('onDestroy');
+  unmounted() {
+    this.$emit('onDestroy')
   },
   methods: {
     isRichText(str) {
-      return /^<p[\s\S]*>[\s\S]*<\/p>$/.test(str);
-    },
-  },
-};
+      return /^<p[\s\S]*>[\s\S]*<\/p>$/.test(str)
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .read-only {
diff --git a/web/src/common/Editor/RichEditor.vue b/web/src/common/Editor/RichEditor.vue
index 44e2b578..4d616459 100644
--- a/web/src/common/Editor/RichEditor.vue
+++ b/web/src/common/Editor/RichEditor.vue
@@ -1,126 +1,119 @@
 <template>
   <div class="editor-wrapper border">
-    <div class="toolbar" ref="toolbar" v-show="showToolbar"></div>
-    <div class="editor" ref="editor"></div>
+    <Toolbar
+      :class="['toolbar', props.staticToolBar ? 'static-toolbar' : 'dynamic-toolbar']"
+      ref="toolbar"
+      v-show="showToolbar"
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+    />
+    <Editor
+      class="editor"
+      ref="editor"
+      :modelValue="curValue"
+      :defaultConfig="editorConfig"
+      @onCreated="onCreated"
+      @onChange="onChange"
+      @onBlur="onBlur"
+      @onFocus="onFocus"
+      :mode="mode"
+    />
   </div>
 </template>
 
-<script>
-import { createEditor, createToolbar } from '@wangeditor/editor';
+<script setup>
+import '@wangeditor/editor/dist/css/style.css'
+import './styles/reset-wangeditor.scss'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { ref, shallowRef, onBeforeMount, watch } from 'vue'
 
-export default {
-  name: 'richEditor',
-  data() {
-    return {
-      curValue: '',
-      editor: null,
-      showToolbar: false,
-    };
-  },
-  props: ['value'], // value 用于自定义 v-model
-  mounted() {
-    this.create();
-  },
-  watch: {
-    value: {
-      immediate: true,
-      handler(newVal) {
-        const isEqual = newVal === this.curValue;
-        if (isEqual) return; // 和当前内容一样，则忽略
+const emit = defineEmits(['input', 'onFocus', 'change', 'blur'])
+const model = defineModel()
+const props = defineProps(['staticToolBar'])
+
+const curValue = ref('')
+const editorRef = shallowRef()
+const showToolbar = ref(props.staticToolBar || false)
+
+const mode = 'simple'
+
+const toolbarConfig = {
+  toolbarKeys: [
+    'color', // 字体色
+    'bgColor', // 背景色
+    'bold',
+    'insertLink' // 链接
+  ]
+}
+
+const editorConfig = {}
+
+const setHtml = (newHtml) => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.setHtml(newHtml)
+}
+
+const onCreated = (editor) => {
+  editorRef.value = editor
+  if (model.value) {
+    setHtml(model.value)
+  }
+}
+const onChange = (editor) => {
+  const editorHtml = editor.getHtml()
+  curValue.value = editorHtml // 记录当前 html 内容
+  emit('input', editorHtml) // 用于自定义 v-model
+}
+const onFocus = (editor) => {
+  emit('onFocus', editor)
+  setToolbarStatus(true)
+}
+const onBlur = (editor) => {
+  const editorHtml = editor.getHtml()
+  curValue.value = editorHtml // 记录当前 html 内容
+  emit('change', editorHtml)
+  emit('blur', editor)
+  setToolbarStatus(false)
+}
+
+const setToolbarStatus = (status) => {
+  if (props.staticToolBar) return
+  showToolbar.value = status
+}
+
+watch(
+  () => model.value,
+  (newVal) => {
+    const isEqual = newVal === curValue.value
+    if (isEqual) return // 和当前内容一样，则忽略
 
-        // 重置 HTML
-        this.setHtml(newVal);
-      },
-    },
-  },
-  methods: {
     // 重置 HTML
-    setHtml(newHtml) {
-      const editor = this.editor;
-      if (editor === null) return;
-      editor.setHtml(newHtml);
-    },
-    // 创建 editor
-    create() {
-      if (this.$refs.editor === null) return;
-
-      createEditor({
-        selector: this.$refs.editor,
-        html: this.defaultHtml || this.value || '',
-        config: {
-          onCreated: (editor) => {
-            this.editor = Object.seal(editor);
-
-            if (this.value) {
-              this.setHtml(this.value);
-            }
-
-            this.$refs.toolbar &&
-              createToolbar({
-                editor,
-                selector: this.$refs.toolbar,
-                config: {
-                  toolbarKeys: [
-                    'color', // 字体色
-                    'bgColor', // 背景色
-                    'bold',
-                    // 'insertImage', // 插入图片
-                    // 'video',
-                    // 'fontSize', // 字号
-                    // 'justify', // 对齐方式
-                    'insertLink', // 链接
-                    // 'clean',
-                  ],
-                },
-                mode: 'simple',
-              });
-          },
-          onChange: (editor) => {
-            const editorHtml = editor.getHtml();
-            this.curValue = editorHtml; // 记录当前 html 内容
-            this.$emit('input', editorHtml); // 用于自定义 v-model
-          },
-          onDestroyed: (editor) => {
-            this.$emit('onDestroyed', editor);
-            editor.destroy();
-          },
-          onFocus: (editor) => {
-            this.$emit('onFocus', editor);
-            this.showToolbar = true;
-          },
-          onBlur: (editor) => {
-            const editorHtml = editor.getHtml();
-            this.curValue = editorHtml; // 记录当前 html 内容
-            this.$emit('change', editorHtml);
-            this.$emit('blur', editor);
-            this.showToolbar = false;
-          },
-          // customPaste: (editor, event) => {
-          //   let res;
-          //   this.$emit('customPaste', editor, event, (val) => {
-          //     res = val;
-          //   });
-          //   return res;
-          // },
-        },
-        content: [],
-        mode: 'simple',
-      });
-    },
+    setHtml(newVal)
   },
-};
+  {
+    // immediate: true
+  }
+)
+
+onBeforeMount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
 </script>
 <style lang="scss" scoped>
-@import url('@wangeditor/editor/dist/css/style.css');
-@import url('@/management/styles/reset-wangeditor.scss');
-
 .editor-wrapper {
   position: relative;
   width: 100%;
   // min-height: 45px;
 }
 
-.toolbar {
+.static-toolbar {
+  border-bottom: 1px solid #dedede;
+}
+.dynamic-toolbar {
   position: absolute;
   left: 0;
   top: -44px;
diff --git a/web/src/common/Editor/styles/reset-wangeditor.scss b/web/src/common/Editor/styles/reset-wangeditor.scss
new file mode 100644
index 00000000..61333ad4
--- /dev/null
+++ b/web/src/common/Editor/styles/reset-wangeditor.scss
@@ -0,0 +1,19 @@
+:root {
+  --w-e-textarea-bg-color: transparent;
+}
+
+.w-e-text-container * {
+  font-size: inherit;
+}
+
+.w-e-text-container [data-slate-editor] h1,
+.w-e-text-container [data-slate-editor] h2,
+.w-e-text-container [data-slate-editor] h3,
+.w-e-text-container [data-slate-editor] h4,
+.w-e-text-container [data-slate-editor] h5 {
+  margin: 0;
+}
+
+.w-e-text-container [data-slate-editor] p {
+  margin: 0;
+}
diff --git a/web/src/common/xss.js b/web/src/common/xss.js
index 79154118..e12e20ff 100644
--- a/web/src/common/xss.js
+++ b/web/src/common/xss.js
@@ -1,62 +1,62 @@
-import xss from 'xss';
+import xss from 'xss'
 
 const myxss = new xss.FilterXSS({
   onIgnoreTagAttr(tag, name, value) {
     if (name === 'style' || name === 'class') {
-      return `${name}="${value}"`;
+      return `${name}="${value}"`
     }
-    return undefined;
+    return undefined
   },
   onIgnoreTag(tag, html) {
     // <xxx>过滤为空，否则不过滤为空
-    var re1 = new RegExp('<.+?>', 'g');
+    var re1 = new RegExp('<.+?>', 'g')
     if (re1.test(html)) {
-      return '';
+      return ''
     } else {
-      return html;
+      return html
     }
-  },
-});
+  }
+})
 
 const isImg = (html) => {
-  html = html + '';
-  return html.indexOf('<img') > -1;
-};
+  html = html + ''
+  return html.indexOf('<img') > -1
+}
 const isVideo = (html) => {
-  html = html + '';
-  return html.indexOf('<video') > -1;
-};
+  html = html + ''
+  return html.indexOf('<video') > -1
+}
 
 export const cleanRichText = (text) => {
   if (!text) {
-    return text === 0 ? 0 : '';
+    return text === 0 ? 0 : ''
   }
-  const html = transformHtmlTag(text);
-  const content = html.replace(/<[^<>]+>/g, '').replace(/&nbsp;/g, '');
-  if (content) return content;
+  const html = transformHtmlTag(text)
+  const content = html.replace(/<[^<>]+>/g, '').replace(/&nbsp;/g, '')
+  if (content) return content
 
-  if (isImg(html)) return '图片';
-  if (isVideo(html)) return '视频';
-  return '文本';
-};
+  if (isImg(html)) return '图片'
+  if (isVideo(html)) return '视频'
+  return '文本'
+}
 export function escapeHtml(html) {
-  return html.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  return html.replace(/</g, '&lt;').replace(/>/g, '&gt;')
 }
 export const transformHtmlTag = (html) => {
-  if (!html) return '';
-  if (typeof html !== 'string') return html + '';
+  if (!html) return ''
+  if (typeof html !== 'string') return html + ''
   return html
     .replace(html ? /&(?!#?\w+;)/g : /&/g, '&amp;')
     .replace(/&lt;/g, '<')
     .replace(/&gt;/g, '>')
     .replace(/&quot;/g, '"')
     .replace(/&#39;/g, "'")
-    .replace(/\\\n/g, '\\n');
+    .replace(/\\\n/g, '\\n')
   //.replace(/&nbsp;/g, "")
-};
+}
 
-const filterXSSClone = myxss.process.bind(myxss);
+const filterXSSClone = myxss.process.bind(myxss)
 
-export const filterXSS = (html) => filterXSSClone(transformHtmlTag(html));
+export const filterXSS = (html) => filterXSSClone(transformHtmlTag(html))
 
-export const escapeFilterXSS = (html) => escapeHtml(filterXSS(html));
+export const escapeFilterXSS = (html) => escapeHtml(filterXSS(html))
diff --git a/web/src/management/App.vue b/web/src/management/App.vue
index 879ef969..545876c4 100644
--- a/web/src/management/App.vue
+++ b/web/src/management/App.vue
@@ -3,11 +3,13 @@
     <router-view></router-view>
   </div>
 </template>
+
 <script>
 export default {
-  name: 'App',
-};
+  name: 'App'
+}
 </script>
+
 <style lang="scss">
 @import url('./styles/icon.scss');
 @import url('../materials/questions/common/css/icon.scss');
diff --git a/web/src/management/api/analysis.js b/web/src/management/api/analysis.js
index c5648ec7..8e55a48a 100644
--- a/web/src/management/api/analysis.js
+++ b/web/src/management/api/analysis.js
@@ -1,10 +1,10 @@
-import axios from './base';
+import axios from './base'
 
 export const getRecycleList = (data) => {
   return axios.get('/survey/dataStatistic/dataTable', {
     params: {
       pageSize: 10,
-      ...data,
-    },
-  });
-};
+      ...data
+    }
+  })
+}
diff --git a/web/src/management/api/auth.js b/web/src/management/api/auth.js
index 2cad287b..d654488a 100644
--- a/web/src/management/api/auth.js
+++ b/web/src/management/api/auth.js
@@ -1,9 +1,9 @@
-import axios from './base';
+import axios from './base'
 
 export const register = (data) => {
-  return axios.post('/auth/register', data);
-};
+  return axios.post('/auth/register', data)
+}
 
 export const login = (data) => {
-  return axios.post('/auth/login', data);
-};
+  return axios.post('/auth/login', data)
+}
diff --git a/web/src/management/api/base.js b/web/src/management/api/base.js
index 145233e5..45687330 100644
--- a/web/src/management/api/base.js
+++ b/web/src/management/api/base.js
@@ -1,49 +1,50 @@
-import axios from 'axios';
-import store from '@/management/store/index';
-import router from '@/management/router/index';
-import { get as _get } from 'lodash-es';
-
-const instance = axios.create({
-  baseURL: '/api',
-  timeout: 10000,
-});
-
-instance.interceptors.response.use(
-  (response) => {
-    if (response.status !== 200) {
-      throw new Error('http请求出错');
-    }
-    const res = response.data;
-    if (res.code === 403) {
-      router.replace({
-        name: 'login',
-      });
-      return res;
-    } else {
-      return res;
-    }
-  },
-  (err) => {
-    throw new Error(err);
-  }
-);
-
-instance.interceptors.request.use((config) => {
-  const hasLogined = _get(store, 'state.user.hasLogined');
-  const token = _get(store, 'state.user.userInfo.token');
-  if (hasLogined && token) {
-    if (!config.headers) {
-      config.headers = {};
-    }
-    config.headers.Authorization = `Bearer ${token}`;
-  }
-  return config;
-});
-
-export default instance;
+import axios from 'axios'
+import store from '@/management/store/index'
+import router from '@/management/router/index'
+import { get as _get } from 'lodash-es'
 
 export const CODE_MAP = {
   SUCCESS: 200,
   ERROR: 500,
-  NOTAUTH: 403,
-};
+  NO_AUTH: 403,
+  ERR_AUTH: 1001
+}
+
+const instance = axios.create({
+  baseURL: '/api',
+  timeout: 10000
+})
+
+instance.interceptors.response.use(
+  (response) => {
+    if (response.status !== 200) {
+      throw new Error('http请求出错')
+    }
+    const res = response.data
+    if (res.code === CODE_MAP.NO_AUTH || res.code === CODE_MAP.ERR_AUTH) {
+      router.replace({
+        name: 'login'
+      })
+      return res
+    } else {
+      return res
+    }
+  },
+  (err) => {
+    throw new Error(err)
+  }
+)
+
+instance.interceptors.request.use((config) => {
+  const hasLogined = _get(store, 'state.user.hasLogined')
+  const token = _get(store, 'state.user.userInfo.token')
+  if (hasLogined && token) {
+    if (!config.headers) {
+      config.headers = {}
+    }
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+})
+
+export default instance
diff --git a/web/src/management/api/captcha.js b/web/src/management/api/captcha.js
index 0c2cd172..a9fb7336 100644
--- a/web/src/management/api/captcha.js
+++ b/web/src/management/api/captcha.js
@@ -1,5 +1,5 @@
-import axios from './base';
+import axios from './base'
 
 export const refreshCaptcha = ({ captchaId }) => {
-  return axios.post('/auth/captcha', { captchaId });
-};
+  return axios.post('/auth/captcha', { captchaId })
+}
diff --git a/web/src/management/api/skin.js b/web/src/management/api/skin.js
index 67ff23e2..0d7d0b86 100644
--- a/web/src/management/api/skin.js
+++ b/web/src/management/api/skin.js
@@ -1,5 +1,5 @@
-import axios from './base';
+import axios from './base'
 
 export const getBannerData = () => {
-  return axios.get('/survey/getBannerData');
-};
+  return axios.get('/survey/getBannerData')
+}
diff --git a/web/src/management/api/survey.js b/web/src/management/api/survey.js
index fb758ede..7a3d36d4 100644
--- a/web/src/management/api/survey.js
+++ b/web/src/management/api/survey.js
@@ -1,4 +1,4 @@
-import axios from './base';
+import axios from './base'
 
 export const getSurveyList = ({ curPage, filter, order }) => {
   return axios.get('/survey/getList', {
@@ -6,48 +6,48 @@ export const getSurveyList = ({ curPage, filter, order }) => {
       pageSize: 10,
       curPage,
       filter,
-      order,
-    },
-  });
-};
+      order
+    }
+  })
+}
 
 export const getSurveyById = (id) => {
   return axios.get('/survey/getSurvey', {
     params: {
-      surveyId: id,
-    },
-  });
-};
+      surveyId: id
+    }
+  })
+}
 
 export const saveSurvey = ({ surveyId, configData }) => {
-  return axios.post('/survey/updateConf', { surveyId, configData });
-};
+  return axios.post('/survey/updateConf', { surveyId, configData })
+}
 
 export const publishSurvey = ({ surveyId }) => {
   return axios.post('/survey/publishSurvey', {
-    surveyId,
-  });
-};
+    surveyId
+  })
+}
 
 export const createSurvey = (data) => {
-  return axios.post('/survey/createSurvey', data);
-};
+  return axios.post('/survey/createSurvey', data)
+}
 
 export const getSurveyHistory = ({ surveyId, historyType }) => {
   return axios.get('/surveyHisotry/getList', {
     params: {
       surveyId,
-      historyType,
-    },
-  });
-};
+      historyType
+    }
+  })
+}
 
 export const deleteSurvey = (surveyId) => {
   return axios.post('/survey/deleteSurvey', {
-    surveyId,
-  });
-};
+    surveyId
+  })
+}
 
 export const updateSurvey = (data) => {
-  return axios.post('/survey/updateMeta', data);
-};
+  return axios.post('/survey/updateMeta', data)
+}
diff --git a/web/src/management/components/empty.vue b/web/src/management/components/EmptyIndex.vue
similarity index 82%
rename from web/src/management/components/empty.vue
rename to web/src/management/components/EmptyIndex.vue
index 807c8ca8..9143ff1e 100644
--- a/web/src/management/components/empty.vue
+++ b/web/src/management/components/EmptyIndex.vue
@@ -2,23 +2,23 @@
   <div class="default-empty-root">
     <img class="img" :src="data.img" />
     <div class="title">{{ data.title }}</div>
-    <div class="desc" v-html="data.desc" />
+    <div class="desc" v-html="data.desc"></div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Empty',
+  name: 'EmptyModule',
   props: {
     data: {
       type: Object,
-      required: true,
-    },
-  },
-};
+      required: true
+    }
+  }
+}
 </script>
 
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .default-empty-root {
   width: 350px;
   margin: 200px auto;
diff --git a/web/src/management/components/leftMenu.vue b/web/src/management/components/LeftMenu.vue
similarity index 78%
rename from web/src/management/components/leftMenu.vue
rename to web/src/management/components/LeftMenu.vue
index 88e51ce5..cf95c30d 100644
--- a/web/src/management/components/leftMenu.vue
+++ b/web/src/management/components/LeftMenu.vue
@@ -1,28 +1,22 @@
 <template>
   <div class="nav">
-    <logo></logo>
-    <router-link
-      v-for="(tab, index) in tabList"
-      :key="index"
-      class="tab-btn"
-      :to="tab.to"
-      replace
-    >
+    <LogoIcon />
+    <RouterLink v-for="(tab, index) in tabList" :key="index" class="tab-btn" :to="tab.to" replace>
       <div class="icon">
         <i class="iconfont" :class="tab.icon"></i>
       </div>
       <p>{{ tab.text }}</p>
-    </router-link>
+    </RouterLink>
   </div>
 </template>
 
 <script>
-import logo from './logo.vue';
+import LogoIcon from './LogoIcon.vue'
 
 export default {
-  name: 'leftMenu',
+  name: 'LeftMenu',
   components: {
-    logo,
+    LogoIcon
   },
   data() {
     return {
@@ -31,27 +25,27 @@ export default {
           text: '编辑问卷',
           icon: 'icon-bianji',
           to: {
-            name: 'QuestionEditIndex',
-          },
+            name: 'QuestionEditIndex'
+          }
         },
         {
           text: '投放问卷',
           icon: 'icon-toufang',
           to: {
-            name: 'publishResultPage',
-          },
+            name: 'publishResultPage'
+          }
         },
         {
           text: '数据统计',
           icon: 'icon-shujutongji',
           to: {
-            name: 'analysisPage',
-          },
-        },
-      ],
-    };
-  },
-};
+            name: 'analysisPage'
+          }
+        }
+      ]
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/management/components/logo.vue b/web/src/management/components/LogoIcon.vue
similarity index 86%
rename from web/src/management/components/logo.vue
rename to web/src/management/components/LogoIcon.vue
index c39fb13b..b8e1eacc 100644
--- a/web/src/management/components/logo.vue
+++ b/web/src/management/components/LogoIcon.vue
@@ -3,18 +3,20 @@
     <img src="/imgs/s-logo.webp" />
   </div>
 </template>
+
 <script>
 export default {
-  name: 'logoIcon',
+  name: 'LogoIcon',
   methods: {
     toHomePage() {
       this.$router.push({
-        name: 'survey',
-      });
-    },
-  },
-};
+        name: 'survey'
+      })
+    }
+  }
+}
 </script>
+
 <style lang="scss" scoped>
 .navbar-main-logo {
   width: 80px;
diff --git a/web/src/management/config/questionConfig.js b/web/src/management/config/questionConfig.js
index 9de31599..b6964730 100644
--- a/web/src/management/config/questionConfig.js
+++ b/web/src/management/config/questionConfig.js
@@ -41,14 +41,14 @@ export const defaultQuestionConfig = {
       text: '选项1',
       others: false,
       othersKey: '',
-      placeholderDesc: '',
+      placeholderDesc: ''
     },
     {
       text: '选项2',
       others: false,
       othersKey: '',
-      placeholderDesc: '',
-    },
+      placeholderDesc: ''
+    }
   ],
   star: 5,
   optionOrigin: '',
@@ -57,21 +57,21 @@ export const defaultQuestionConfig = {
   numberRange: {
     min: {
       placeholder: '0',
-      value: 0,
+      value: 0
     },
     max: {
       placeholder: '1000',
-      value: 1000,
-    },
+      value: 1000
+    }
   },
   textRange: {
     min: {
       placeholder: '0',
-      value: 0,
+      value: 0
     },
     max: {
       placeholder: '500',
-      value: 500,
-    },
-  },
-};
+      value: 500
+    }
+  }
+}
diff --git a/web/src/management/config/questionMenuConfig.js b/web/src/management/config/questionMenuConfig.js
index 3d279a9f..2eaa27f0 100644
--- a/web/src/management/config/questionMenuConfig.js
+++ b/web/src/management/config/questionMenuConfig.js
@@ -4,84 +4,75 @@ const menuItems = {
     snapshot: '/imgs/question-type-snapshot/iL84te6xxU1657702189333.webp',
     path: 'InputModule',
     icon: 'tixing-danhangshuru',
-    title: '单行输入框',
+    title: '单行输入框'
   },
   textarea: {
     type: 'textarea',
     snapshot: '/imgs/question-type-snapshot/11iAo3ca0u1657702225416.webp',
     path: 'TextareaModule',
     icon: 'tixing-duohangshuru',
-    title: '多行输入框',
+    title: '多行输入框'
   },
   radio: {
     type: 'radio',
     snapshot: '/imgs/question-type-snapshot/TgeRDfURJZ1657702220602.webp',
     icon: 'tixing-danxuan',
     path: 'RadioModule',
-    title: '单项选择',
+    title: '单项选择'
   },
   checkbox: {
     type: 'checkbox',
     path: 'CheckboxModule',
     snapshot: '/imgs/question-type-snapshot/Md2YmzBBpV1657702223744.webp',
     icon: 'tixing-duoxuan',
-    title: '多项选择',
+    title: '多项选择'
   },
   'binary-choice': {
     type: 'binary-choice',
     snapshot: '/imgs/question-type-snapshot/blW8U1ckzd1657702223023.webp',
     path: 'BinaryChoiceModule',
     icon: 'tixing-panduanti',
-    title: '判断题',
+    title: '判断题'
   },
   'radio-star': {
     type: 'radio-star',
     snapshot: '/imgs/question-type-snapshot/7CU6tn4XqT1657702221208.webp',
     path: 'StarModule',
     icon: 'tixing-pingfen',
-    title: '评分',
+    title: '评分'
   },
   'radio-nps': {
     type: 'radio-nps',
     path: 'NpsModule',
     snapshot: '/imgs/question-type-snapshot/radio-nps.webp',
     icon: 'NPSpingfen',
-    title: 'nps评分',
+    title: 'nps评分'
   },
   vote: {
     type: 'vote',
     path: 'VoteModule',
     snapshot: '/imgs/question-type-snapshot/nGTscsZlwn1657702222857.webp',
     icon: 'tixing-toupiao',
-    title: '投票',
-  },
-};
+    title: '投票'
+  }
+}
 
 const menuGroup = [
   {
     title: '输入类题型',
-    questionList: ['text', 'textarea'],
+    questionList: ['text', 'textarea']
   },
   {
     title: '选择类题型',
-    questionList: [
-      'radio',
-      'checkbox',
-      'binary-choice',
-      'radio-star',
-      'radio-nps',
-      'vote',
-    ],
-  },
-];
+    questionList: ['radio', 'checkbox', 'binary-choice', 'radio-star', 'radio-nps', 'vote']
+  }
+]
 
 const menu = menuGroup.map((group) => {
-  group.questionList = group.questionList.map(
-    (question) => menuItems[question]
-  );
-  return group;
-});
+  group.questionList = group.questionList.map((question) => menuItems[question])
+  return group
+})
 
-export const questionTypeList = Object.values(menuItems);
+export const questionTypeList = Object.values(menuItems)
 
-export default menu;
+export default menu
diff --git a/web/src/management/config/setterConfig/bannerConfig.js b/web/src/management/config/setterConfig/bannerConfig.js
index 49c0d771..9263920e 100644
--- a/web/src/management/config/setterConfig/bannerConfig.js
+++ b/web/src/management/config/setterConfig/bannerConfig.js
@@ -1,41 +1,35 @@
 export default [
   {
     label: '顶部图片地址',
-    type: 'Input',
+    type: 'InputSetter',
     key: 'bgImage',
-    inline: true,
-    direction: 'horizon',
     labelStyle: { width: '120px' }
   },
   {
     label: '顶部视频地址',
-    type: 'Input',
+    type: 'InputSetter',
     key: 'videoLink',
-    direction: 'horizon',
     labelStyle: { width: '120px' }
   },
   {
     label: '视频海报地址',
-    type: 'Input',
+    type: 'InputSetter',
     key: 'postImg',
-    direction: 'horizon',
     labelStyle: { width: '120px' }
   },
   {
     label: '图片支持点击',
     type: 'CustomedSwitch',
-    direction: 'horizon',
     labelStyle: { width: '120px' },
-    key: 'bgImageAllowJump',
+    key: 'bgImageAllowJump'
   },
   {
     label: '跳转链接',
-    type: 'Input',
-    direction: 'horizon',
+    type: 'InputSetter',
     labelStyle: { width: '120px' },
     key: 'bgImageJumpLink',
     relyFunc: (data) => {
-      return !!data?.bgImageAllowJump;
-    },
-  },
-];
+      return !!data?.bgImageAllowJump
+    }
+  }
+]
diff --git a/web/src/management/config/setterConfig/logoConfig.js b/web/src/management/config/setterConfig/logoConfig.js
index 94505b34..9d2bff7f 100644
--- a/web/src/management/config/setterConfig/logoConfig.js
+++ b/web/src/management/config/setterConfig/logoConfig.js
@@ -1,10 +1,9 @@
 export default [
   {
     label: '自定义Logo',
-    type: 'Input',
+    type: 'InputSetter',
     key: 'logoImage',
     tip: '默认尺寸200px*50px',
-    direction: 'horizon',
     labelStyle: { width: '120px' }
   },
   {
@@ -12,7 +11,6 @@ export default [
     type: 'InputPercent',
     key: 'logoImageWidth',
     tip: '填写宽度百分比，例如30%',
-    direction: 'horizon',
     labelStyle: { width: '120px' }
-  },
-];
+  }
+]
diff --git a/web/src/management/config/setterConfig/skinConfig.js b/web/src/management/config/setterConfig/skinConfig.js
index 84b00601..9177466d 100644
--- a/web/src/management/config/setterConfig/skinConfig.js
+++ b/web/src/management/config/setterConfig/skinConfig.js
@@ -1,46 +1,48 @@
-import bannerConfig from "./bannerConfig"
-import logoConfig from "./logoConfig"
+import bannerConfig from './bannerConfig'
+import logoConfig from './logoConfig'
 
 export default [
   {
     name: '头图',
     key: 'bannerConf.bannerConfig',
     formConfigList: bannerConfig
-  }, 
+  },
   {
     name: '背景',
     key: 'skinConf.backgroundConf',
-    formConfigList: [{
-      direction: 'space_between',
-      label: '背景颜色',
-      type: 'ColorPicker',
-      key: 'color',
-    }],
+    formConfigList: [
+      {
+        label: '背景颜色',
+        type: 'ColorPicker',
+        key: 'color'
+      }
+    ]
   },
   {
     name: '主题色',
     key: 'skinConf.themeConf',
-    formConfigList: [{
-      direction: 'space_between',
-      direction: 'space_between',
-      label: '全局应用',
-      type: 'ColorPicker',
-      key: 'color',
-    }],
+    formConfigList: [
+      {
+        label: '全局应用',
+        type: 'ColorPicker',
+        key: 'color'
+      }
+    ]
   },
   {
     key: 'skinConf.contentConf',
     name: '内容区域',
-    formConfigList: [{
-      direction: 'space_between',
-      label: '内容透明度',
-      type: 'SliderSetter',
-      key: 'opacity',
-    }],
+    formConfigList: [
+      {
+        label: '内容透明度',
+        type: 'SliderSetter',
+        key: 'opacity'
+      }
+    ]
   },
   {
     name: '品牌logo',
     key: 'bottomConf',
     formConfigList: logoConfig
   }
-]
\ No newline at end of file
+]
diff --git a/web/src/management/config/setterConfig/submitConfig.js b/web/src/management/config/setterConfig/submitConfig.js
index 2a11a2bf..ae4efa97 100644
--- a/web/src/management/config/setterConfig/submitConfig.js
+++ b/web/src/management/config/setterConfig/submitConfig.js
@@ -1,71 +1,62 @@
 export default [
   {
-    label: '提交按钮文案',
-    type: 'Input',
+    title: '提交按钮文案',
+    type: 'InputSetter',
     key: 'submitTitle',
     placeholder: '提交',
-    value: '',
-    labelStyle: {
-      fontWeight: 'bold',
-    },
+    value: ''
   },
   {
-    label: '提交确认弹窗',
+    title: '提交确认弹窗',
     type: 'Customed',
     key: 'confirmAgain',
-    labelStyle: {
-      fontWeight: 'bold',
-    },
     content: [
       {
         label: '是否配置该项',
+        labelStyle: { width: '120px' },
         type: 'CustomedSwitch',
         key: 'confirmAgain.is_again',
-        direction: 'horizon',
-        value: true,
+        value: true
       },
       {
         label: '二次确认文案',
-        type: 'Input',
+        labelStyle: { width: '120px' },
+        type: 'InputSetter',
         key: 'confirmAgain.again_text',
-        direction: 'horizon',
         placeholder: '确认要提交吗？',
-        value: '确认要提交吗？',
-      },
-    ],
+        value: '确认要提交吗？'
+      }
+    ]
   },
   {
-    label: '提交文案配置',
+    title: '提交文案配置',
     type: 'Customed',
     key: 'msgContent',
-    labelStyle: {
-      fontWeight: 'bold',
-    },
     content: [
       {
         label: '已提交',
-        type: 'Input',
+        labelStyle: { width: '120px' },
+        type: 'InputSetter',
         key: 'msgContent.msg_9002',
         placeholder: '请勿多次提交！',
-        value: '请勿多次提交！',
-        direction: 'horizon',
+        value: '请勿多次提交！'
       },
       {
         label: '提交结束',
-        type: 'Input',
+        labelStyle: { width: '120px' },
+        type: 'InputSetter',
         key: 'msgContent.msg_9003',
         placeholder: '您来晚了，已经满额！',
-        value: '您来晚了，已经满额！',
-        direction: 'horizon',
+        value: '您来晚了，已经满额！'
       },
       {
         label: '其他提交失败',
-        type: 'Input',
+        labelStyle: { width: '120px' },
+        type: 'InputSetter',
         key: 'msgContent.msg_9004',
         placeholder: '提交失败！',
-        value: '提交失败！',
-        direction: 'horizon',
-      },
-    ],
-  },
-];
+        value: '提交失败！'
+      }
+    ]
+  }
+]
diff --git a/web/src/management/config/skinPresets.js b/web/src/management/config/skinPresets.js
index ad622e19..a3f47ca0 100644
--- a/web/src/management/config/skinPresets.js
+++ b/web/src/management/config/skinPresets.js
@@ -1,7 +1,6 @@
-
 export default {
   'default-1': {
     'skinConf.backgroundConf.color': '#90b4fa',
-    'skinConf.themeConf.color': '#FAA600',
+    'skinConf.themeConf.color': '#FAA600'
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/management/directive/plainText.ts b/web/src/management/directive/plainText.ts
new file mode 100644
index 00000000..23484ef1
--- /dev/null
+++ b/web/src/management/directive/plainText.ts
@@ -0,0 +1,16 @@
+import { cleanRichText } from '@/common/xss'
+import type { DirectiveBinding, Directive, Plugin } from 'vue'
+
+function _plainText(el: HTMLElement, binding: DirectiveBinding) {
+  const text = cleanRichText(binding.value)
+  el.innerText = `${text}`
+}
+const plainText: Directive & Plugin = {
+  mounted: _plainText,
+  updated: _plainText,
+  install: function (app) {
+    app.directive('plain-text', this)
+  }
+}
+
+export default plainText
diff --git a/web/src/management/directive/safeHtml.ts b/web/src/management/directive/safeHtml.ts
new file mode 100644
index 00000000..dcc2e4c6
--- /dev/null
+++ b/web/src/management/directive/safeHtml.ts
@@ -0,0 +1,17 @@
+import { filterXSS } from '@/common/xss'
+import type { Directive, Plugin, DirectiveBinding } from 'vue'
+
+function _safeHtml(el: HTMLElement, binding: DirectiveBinding) {
+  const res = filterXSS(binding.value)
+  el.innerHTML = res
+}
+
+const safeHtml: Directive & Plugin = {
+  mounted: _safeHtml,
+  updated: _safeHtml,
+  install: function (app) {
+    app.directive('safe-html', this)
+  }
+}
+
+export default safeHtml
diff --git a/web/src/management/index.html b/web/src/management/index.html
new file mode 100644
index 00000000..12a1fc59
--- /dev/null
+++ b/web/src/management/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="/imgs/favicon.ico" />
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/web/src/management/main.js b/web/src/management/main.js
index 0ab60b21..56af3ac3 100644
--- a/web/src/management/main.js
+++ b/web/src/management/main.js
@@ -1,36 +1,17 @@
-import Vue from 'vue';
-import App from './App.vue';
-import router from './router';
-import store from './store';
-import ElementUI from 'element-ui';
-import './styles/element-variables.scss';
-import { filterXSS, cleanRichText } from '@/common/xss';
+import { createApp } from 'vue'
+import store from './store'
+import plainText from './directive/plainText'
+import safeHtml from './directive/safeHtml'
 
-Vue.config.productionTip = false;
-Vue.use(ElementUI);
+import App from './App.vue'
+import router from './router'
 
-const safeHtml = function (el, binding) {
-  const res = filterXSS(binding.value);
-  el.innerHTML = res;
-};
+const app = createApp(App)
 
-const plainText = function (el, binding) {
-  const text = cleanRichText(binding.value);
-  el.innerText = text;
-};
+app.use(store)
+app.use(router)
 
-Vue.directive('safe-html', {
-  inserted: safeHtml,
-  componentUpdated: safeHtml,
-});
+app.use(plainText)
+app.use(safeHtml)
 
-Vue.directive('plain-text', {
-  inserted: plainText,
-  componentUpdated: plainText,
-});
-
-new Vue({
-  router,
-  store,
-  render: (h) => h(App),
-}).$mount('#app');
+app.mount('#app')
diff --git a/web/src/management/pages/analysis/index.vue b/web/src/management/pages/analysis/AnalysisPage.vue
similarity index 62%
rename from web/src/management/pages/analysis/index.vue
rename to web/src/management/pages/analysis/AnalysisPage.vue
index 155b8774..0577b8c3 100644
--- a/web/src/management/pages/analysis/index.vue
+++ b/web/src/management/pages/analysis/AnalysisPage.vue
@@ -6,7 +6,7 @@
         <h2 class="data-list">数据列表</h2>
         <div class="menus">
           <el-switch
-            :value="isShowOriginData"
+            :model-value="isShowOriginData"
             active-text="是否展示原数据"
             @input="onIsShowOriginChange"
           >
@@ -15,10 +15,7 @@
       </template>
 
       <template v-if="tableData.total">
-        <DataTable
-          :main-table-loading="mainTableLoading"
-          :table-data="tableData"
-        />
+        <DataTable :main-table-loading="mainTableLoading" :table-data="tableData" />
         <el-pagination
           background
           layout="prev, pager, next"
@@ -29,110 +26,114 @@
         </el-pagination>
       </template>
       <div v-else>
-        <empty :data="noDataConfig" />
+        <EmptyIndex :data="noDataConfig" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import DataTable from './components/table.vue';
-import empty from '@/management/components/empty';
-import leftMenu from '@/management/components/leftMenu.vue';
-import { getRecycleList } from '@/management/api/analysis';
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import EmptyIndex from '@/management/components/EmptyIndex.vue'
+import LeftMenu from '@/management/components/LeftMenu.vue'
+import { getRecycleList } from '@/management/api/analysis'
+
+import DataTable from './components/DataTable.vue'
 
 export default {
-  name: 'analysisPage',
+  name: 'AnalysisPage',
   data() {
     return {
       mainTableLoading: false,
       tableData: {
         total: 0,
         listHead: [],
-        listBody: [],
+        listBody: []
       },
       noDataConfig: {
         title: '暂无数据',
         desc: '您的问卷当前还没有数据，快去回收问卷吧！',
-        img: '/imgs/icons/analysis-empty.webp',
+        img: '/imgs/icons/analysis-empty.webp'
       },
       currentPage: 1,
       isShowOriginData: false,
-      tmpIsShowOriginData: false,
-    };
+      tmpIsShowOriginData: false
+    }
   },
   computed: {},
   created() {
-    this.init();
+    this.init()
   },
   methods: {
     async init() {
       if (!this.$route.params.id) {
-        this.$message.error('没有传入问卷参数~');
-        return;
+        ElMessage.error('没有传入问卷参数~')
+        return
       }
-      this.mainTableLoading = true;
+      this.mainTableLoading = true
       try {
         const res = await getRecycleList({
           page: this.currentPage,
           surveyId: this.$route.params.id,
-          isDesensitive: !this.tmpIsShowOriginData, // 发起请求的时候，isShowOriginData还没改变，暂存了一个字段
-        });
+          isDesensitive: !this.tmpIsShowOriginData // 发起请求的时候，isShowOriginData还没改变，暂存了一个字段
+        })
 
         if (res.code === 200) {
-          const listHead = this.formatHead(res.data.listHead);
-          this.tableData = { ...res.data, listHead };
-          this.mainTableLoading = false;
+          const listHead = this.formatHead(res.data.listHead)
+          this.tableData = { ...res.data, listHead }
+          this.mainTableLoading = false
         }
       } catch (error) {
-        this.$message.error('查询回收数据失败，请重试');
+        ElMessage.error('查询回收数据失败，请重试')
       }
     },
     handleCurrentChange(current) {
       if (this.mainTableLoading) {
-        return;
+        return
       }
-      this.currentPage = current;
-      this.init();
+      this.currentPage = current
+      this.init()
     },
     formatHead(listHead = []) {
-      const head = [];
+      const head = []
 
       listHead.forEach((headItem) => {
         head.push({
           field: headItem.field,
-          title: headItem.title,
-        });
+          title: headItem.title
+        })
 
         if (headItem.othersCode?.length) {
           headItem.othersCode.forEach((item) => {
             head.push({
               field: item.code,
-              title: `${headItem.title}-${item.option}`,
-            });
-          });
+              title: `${headItem.title}-${item.option}`
+            })
+          })
         }
-      });
+      })
 
-      return head;
+      return head
     },
     async onIsShowOriginChange(data) {
       if (this.mainTableLoading) {
-        return;
+        return
       }
       // console.log(data)
-      this.tmpIsShowOriginData = data;
-      await this.init();
-      this.isShowOriginData = data;
-    },
+      this.tmpIsShowOriginData = data
+      await this.init()
+      this.isShowOriginData = data
+    }
   },
 
   components: {
     DataTable,
-    empty,
-    leftMenu,
-  },
-};
+    EmptyIndex,
+    LeftMenu
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -166,7 +167,7 @@ export default {
   box-sizing: border-box;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 
-  ::v-deep .el-pagination {
+  :deep(.el-pagination) {
     margin-top: 20px;
     display: flex;
     justify-content: flex-end;
diff --git a/web/src/management/pages/analysis/components/DataTable.vue b/web/src/management/pages/analysis/components/DataTable.vue
new file mode 100644
index 00000000..4ad07baf
--- /dev/null
+++ b/web/src/management/pages/analysis/components/DataTable.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="data-table-wrapper">
+    <el-table
+      ref="multipleTable"
+      :data="props.tableData.listBody"
+      style="width: 100%"
+      header-row-class-name="thead-cell"
+      class="table-border"
+      v-loading="props.mainTableLoading"
+      element-loading-text="数据处理中，请稍等..."
+    >
+      <el-table-column
+        v-for="item in props.tableData.listHead"
+        :key="item.field"
+        :prop="item.field"
+        :label="cleanRichText(item.title)"
+        minWidth="200"
+      >
+        <template #header="scope">
+          <div class="table-row-cell">
+            <span
+              @mouseover="onPopoverRefOver(scope, 'head')"
+              :ref="(el) => (popoverRefMap[scope.column.id] = el)"
+            >
+              {{ scope.column.label.replace(/&nbsp;/g, '') }}
+            </span>
+          </div>
+        </template>
+        <template #default="scope">
+          <div>
+            <span
+              class="table-row-cell"
+              @mouseover="onPopoverRefOver(scope, 'content')"
+              :ref="(el) => (popoverRefMap[scope.$index + scope.column.property] = el)"
+            >
+              {{ getContent(scope.row[scope.column.property]) }}
+            </span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-popover
+      ref="popover"
+      popper-style="text-align: center;"
+      :virtual-ref="popoverVirtualRef"
+      placement="top"
+      trigger="hover"
+      virtual-triggering
+      :content="popoverContent"
+    >
+    </el-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { cleanRichText } from '@/common/xss'
+
+const props = defineProps({
+  tableData: {
+    type: Object
+  },
+  mainTableLoading: {
+    type: Boolean
+  }
+})
+const popoverRefMap = ref({})
+const popoverVirtualRef = ref()
+const popoverContent = ref('')
+
+const getContent = (value) => {
+  const content = cleanRichText(value)
+  return content === 0 ? 0 : content || '未知'
+}
+const setPopoverContent = (content) => {
+  popoverContent.value = content
+}
+const onPopoverRefOver = (scope, type) => {
+  let popoverContent
+  if (type == 'head') {
+    popoverVirtualRef.value = popoverRefMap.value[scope.column.id]
+    popoverContent = scope.column.label.replace(/&nbsp;/g, '')
+  }
+  if (type == 'content') {
+    popoverVirtualRef.value = popoverRefMap.value[scope.$index + scope.column.property]
+    popoverContent = getContent(scope.row[scope.column.property])
+  }
+  setPopoverContent(popoverContent)
+}
+</script>
+
+<style lang="scss" scoped>
+.data-table-wrapper {
+  position: relative;
+  width: 100%;
+  padding-bottom: 20px;
+  min-height: 620px;
+  background: #fff;
+  padding: 10px 20px;
+  .table-border {
+    box-sizing: border-box;
+    text-align: center;
+  }
+  :deep(.el-table__header) {
+    width: 100%;
+    .thead-cell .el-table__cell {
+      .cell {
+        height: 24px;
+        color: #4a4c5b;
+        font-size: 14px;
+      }
+    }
+  }
+  .table-row-cell {
+    white-space: nowrap; /* 禁止自动换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 显示省略号 */
+  }
+}
+</style>
diff --git a/web/src/management/pages/analysis/components/table.vue b/web/src/management/pages/analysis/components/table.vue
deleted file mode 100644
index 21950f0a..00000000
--- a/web/src/management/pages/analysis/components/table.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div class="data-table-wrapper">
-    <el-table
-      ref="multipleTable"
-      :data="tableData.listBody"
-      tooltip-effect="dark"
-      style="width: 100%"
-      header-row-class-name="thead-cell"
-      class="table-border"
-      show-overflow-tooltip
-      v-loading="mainTableLoading"
-      element-loading-text="数据处理中，请稍等..."
-    >
-      <el-table-column
-        v-for="item in tableData.listHead"
-        :key="item.field"
-        :prop="item.field"
-        :label="cleanRichText(item.title)"
-        minWidth="200"
-      >
-        <template slot="header" slot-scope="scope">
-          <div class="table-row-cell">
-            <span slot="reference" v-popover="scope.column.id">
-              {{ scope.column.label.replace(/&nbsp;/g, '') }}
-            </span>
-            <el-popover
-              :ref="scope.column.id"
-              placement="top-start"
-              width="200"
-              trigger="hover"
-              :content="scope.column.label.replace(/&nbsp;/g, '')"
-            >
-            </el-popover>
-          </div>
-        </template>
-        <template slot-scope="scope">
-          <span
-            slot="reference"
-            class="table-row-cell"
-            v-popover="scope.$index + scope.column.property"
-          >
-            {{ getContent(scope.row[scope.column.property]) }}
-          </span>
-          <el-popover
-            :ref="scope.$index + scope.column.property"
-            placement="top-start"
-            trigger="hover"
-            width="300"
-            :content="getContent(scope.row[scope.column.property])"
-          >
-          </el-popover>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-<script>
-import { cleanRichText } from '@/common/xss';
-
-export default {
-  name: 'DataTable',
-  data() {
-    return {};
-  },
-  props: {
-    mainTableLoading: Boolean,
-    tableData: Object,
-  },
-
-  methods: {
-    cleanRichText,
-    getContent(value) {
-      const content = cleanRichText(value)
-
-      return content === 0 ? 0 : (content || '未知')
-    }
-  },
-};
-</script>
-<style lang="scss" rel="stylesheet/scss" scoped>
-.data-table-wrapper {
-  position: relative;
-  width: 100%;
-  padding-bottom: 20px;
-  min-height: 620px;
-  background: #fff;
-  padding: 10px 20px;
-  .table-border {
-    box-sizing: border-box;
-    text-align: center;
-  }
-  ::v-deep .el-table__header {
-    width: 100%;
-    .thead-cell .el-table__cell {
-      .cell {
-        height: 24px;
-        color: #4a4c5b;
-        font-size: 14px;
-      }
-    }
-  }
-  .table-row-cell {
-    white-space: nowrap; /* 禁止自动换行 */
-    overflow: hidden; /* 超出部分隐藏 */
-    text-overflow: ellipsis; /* 显示省略号 */
-  }
-}
-</style>
diff --git a/web/src/management/pages/create/index.vue b/web/src/management/pages/create/CreatePage.vue
similarity index 52%
rename from web/src/management/pages/create/index.vue
rename to web/src/management/pages/create/CreatePage.vue
index 36a2784b..0b9461df 100644
--- a/web/src/management/pages/create/index.vue
+++ b/web/src/management/pages/create/CreatePage.vue
@@ -1,35 +1,34 @@
 <template>
   <div class="new">
-    <type-list
-      :selectType="selectType"
-      @selectTypeChange="onSelectTypeChange"
-    />
-    <create-form :selectType="selectType" />
+    <TypeList :selectType="selectType" @selectTypeChange="onSelectTypeChange" />
+    <CreateForm :selectType="selectType" />
   </div>
 </template>
+
 <script>
-import typeList from './components/typeList';
-import createForm from './components/createForm';
+import TypeList from './components/TypeList.vue'
+import CreateForm from './components/CreateForm.vue'
 
 export default {
-  name: 'createPage',
+  name: 'CreatePage',
   components: {
-    typeList,
-    createForm,
+    TypeList,
+    CreateForm
   },
   data() {
     return {
-      selectType: 'normal',
-    };
+      selectType: 'normal'
+    }
   },
   methods: {
     onSelectTypeChange(selectType) {
-      this.selectType = selectType;
-    },
-  },
-};
+      this.selectType = selectType
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .new {
   position: relative;
   min-height: 750px;
diff --git a/web/src/management/pages/create/components/createForm.vue b/web/src/management/pages/create/components/CreateForm.vue
similarity index 72%
rename from web/src/management/pages/create/components/createForm.vue
rename to web/src/management/pages/create/components/CreateForm.vue
index f1378850..ea174ab2 100644
--- a/web/src/management/pages/create/components/createForm.vue
+++ b/web/src/management/pages/create/components/CreateForm.vue
@@ -8,20 +8,18 @@
       :model="form"
       label-width="100px"
       :rules="rules"
-      @submit.native.prevent
+      @submit.prevent
     >
       <el-form-item prop="title" label="问卷名称">
         <el-input
           v-model="form.title"
           :class="form.title ? 'nonempty' : 'empty'"
-          size="small"
           placeholder="请输入问卷名称"
         />
         <p class="form-item-tip">该标题可在打开问卷的浏览器顶部展示</p>
       </el-form-item>
       <el-form-item prop="remark" label="问卷备注">
         <el-input
-          size="small"
           v-model="form.remark"
           :class="form.remark ? 'nonempty' : 'empty'"
           placeholder="请输入备注"
@@ -29,91 +27,90 @@
         <p class="form-item-tip">备注仅自己可见</p>
       </el-form-item>
       <el-form-item>
-        <el-button
-          class="create-btn"
-          type="primary"
-          size="small"
-          @click="submit"
-          :loading="!canSubmit"
-        >
+        <el-button class="create-btn" type="primary" @click="submit" :loading="!canSubmit">
           开始创建
         </el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
+
 <script>
-import { SURVEY_TYPE_LIST } from '../types';
-import { createSurvey } from '@/management/api/survey';
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import { createSurvey } from '@/management/api/survey'
+
+import { SURVEY_TYPE_LIST } from '../types'
 
 export default {
   name: 'CreateForm',
   props: {
     selectType: {
       type: String,
-      default: 'normal',
-    },
+      default: 'normal'
+    }
   },
   data() {
     return {
       rules: {
-        title: [{ required: true, message: '请输入问卷标题', trigger: 'blur' }],
+        title: [{ required: true, message: '请输入问卷标题', trigger: 'blur' }]
       },
       canSubmit: true,
       form: {
         title: '问卷调研',
-        remark: '问卷调研',
-      },
-    };
+        remark: '问卷调研'
+      }
+    }
   },
   computed: {
     SURVEY_TYPE_LIST() {
-      return SURVEY_TYPE_LIST;
+      return SURVEY_TYPE_LIST
     },
     title() {
-      return this.SURVEY_TYPE_LIST.find((item) => item.type === this.selectType)
-        ?.title;
-    },
+      return this.SURVEY_TYPE_LIST.find((item) => item.type === this.selectType)?.title
+    }
   },
   methods: {
     checkForm(fn) {
       this.$refs.ruleForm.validate((valid) => {
-        valid && typeof fn === 'function' && fn();
-      });
+        valid && typeof fn === 'function' && fn()
+      })
     },
     submit() {
       if (!this.canSubmit) {
-        return;
+        return
       }
       this.checkForm(async () => {
-        const { selectType } = this;
+        const { selectType } = this
         if (!this.canSubmit) {
-          return;
+          return
         }
-        this.canSubmit = false;
+        this.canSubmit = false
         const res = await createSurvey({
           surveyType: selectType,
-          ...this.form,
-        });
+          ...this.form
+        })
         if (res.code === 200 && res?.data?.id) {
-          const id = res.data.id;
+          const id = res.data.id
           this.$router.push({
             name: 'QuestionEditIndex',
             params: {
-              id,
-            },
-          });
+              id
+            }
+          })
         } else {
-          this.$message.error(res.errmsg || '创建失败');
+          ElMessage.error(res.errmsg || '创建失败')
         }
 
-        this.canSubmit = true;
-      });
-    },
-  },
-};
+        this.canSubmit = true
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .right-side {
   width: 538px;
   margin: auto;
@@ -142,7 +139,7 @@ export default {
     border: unset;
     color: white;
 
-    ::v-deep span {
+    :deep(span) {
       font-size: 14px;
     }
   }
diff --git a/web/src/management/pages/create/components/navHeader.vue b/web/src/management/pages/create/components/NavHeader.vue
similarity index 88%
rename from web/src/management/pages/create/components/navHeader.vue
rename to web/src/management/pages/create/components/NavHeader.vue
index 56be8f2d..fc58183d 100644
--- a/web/src/management/pages/create/components/navHeader.vue
+++ b/web/src/management/pages/create/components/NavHeader.vue
@@ -8,33 +8,35 @@
     </div>
   </div>
 </template>
+
 <script>
 export default {
   props: {
     boxShadow: {
       type: Boolean,
-      default: true,
-    },
+      default: true
+    }
   },
   name: 'NavHeader',
   data() {
     return {
-      img: '/imgs/s-logo.webp',
-    };
+      img: '/imgs/s-logo.webp'
+    }
   },
   methods: {
     toHomePage() {
       this.$router.replace({
-        name: 'survey',
-      });
+        name: 'survey'
+      })
     },
     onBack() {
-      this.$router.go(-1);
-    },
-  },
-};
+      this.$router.go(-1)
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .nav-header {
   z-index: 99;
   position: relative;
diff --git a/web/src/management/pages/create/components/typeList.vue b/web/src/management/pages/create/components/TypeList.vue
similarity index 89%
rename from web/src/management/pages/create/components/typeList.vue
rename to web/src/management/pages/create/components/TypeList.vue
index 160cf451..541c5be5 100644
--- a/web/src/management/pages/create/components/typeList.vue
+++ b/web/src/management/pages/create/components/TypeList.vue
@@ -23,36 +23,38 @@
     </div>
   </div>
 </template>
-<script>
-import NavHeader from './navHeader';
 
-import { SURVEY_TYPE_LIST } from '../types';
+<script>
+import NavHeader from './NavHeader.vue'
+
+import { SURVEY_TYPE_LIST } from '../types'
 
 export default {
   name: 'LeftSide',
   components: {
-    NavHeader,
+    NavHeader
   },
   props: {
     selectType: {
       type: String,
-      default: '',
-    },
+      default: ''
+    }
   },
   computed: {
     renderData() {
-      return SURVEY_TYPE_LIST;
-    },
+      return SURVEY_TYPE_LIST
+    }
   },
   methods: {
     handleSelectType(key, value) {
-      const { type } = value;
-      this.$emit('selectTypeChange', type);
-    },
-  },
-};
+      const { type } = value
+      this.$emit('selectTypeChange', type)
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .left-side {
   position: relative;
   height: 100%;
diff --git a/web/src/management/pages/create/types.js b/web/src/management/pages/create/types.js
index a17fc022..157dbf3e 100644
--- a/web/src/management/pages/create/types.js
+++ b/web/src/management/pages/create/types.js
@@ -3,7 +3,7 @@ export const SURVEY_TYPE_LIST = [
     type: 'normal',
     title: '基础调查',
     img: '/imgs/create/normal-icon.webp',
-    desc: '市场调研 / 用户分析 / 产品测评 / 需求调研',
+    desc: '市场调研 / 用户分析 / 产品测评 / 需求调研'
   },
   // {
   //   type: 'nps',
@@ -15,12 +15,12 @@ export const SURVEY_TYPE_LIST = [
     type: 'vote',
     title: '投票评选',
     img: '/imgs/create/vote-icon.webp',
-    desc: '才艺比赛 / 优秀员工 / 最佳人气 / 投票选举',
+    desc: '才艺比赛 / 优秀员工 / 最佳人气 / 投票选举'
   },
   {
     type: 'register',
     title: '在线报名',
     img: '/imgs/create/register-icon.webp',
-    desc: '活动报名 / 会议报名',
-  },
-];
+    desc: '活动报名 / 会议报名'
+  }
+]
diff --git a/web/src/management/pages/edit/components/commonTemplate.vue b/web/src/management/pages/edit/components/CommonTemplate.vue
similarity index 66%
rename from web/src/management/pages/edit/components/commonTemplate.vue
rename to web/src/management/pages/edit/components/CommonTemplate.vue
index 03654232..23c742c0 100644
--- a/web/src/management/pages/edit/components/commonTemplate.vue
+++ b/web/src/management/pages/edit/components/CommonTemplate.vue
@@ -1,29 +1,31 @@
 <template>
   <div class="main">
-    <div class="nav" v-if="$slots.hasOwnProperty('nav')">
+    <div class="nav" v-if="slots.hasOwnProperty('nav')">
       <slot name="nav"></slot>
     </div>
     <div class="body">
-      <slot v-if="$slots.hasOwnProperty('body')" name="body"></slot>
+      <slot v-if="slots.hasOwnProperty('body')" name="body"></slot>
       <template v-else>
-        <div class="left" v-if="$slots.hasOwnProperty('left')">
+        <div class="left" v-if="slots.hasOwnProperty('left')">
           <slot name="left"></slot>
         </div>
-        <div class="center" v-if="$slots.hasOwnProperty('center')">
+        <div class="center" v-if="slots.hasOwnProperty('center')">
           <slot name="center"></slot>
         </div>
-        <div class="right" v-if="$slots.hasOwnProperty('right')">
+        <div class="right" v-if="slots.hasOwnProperty('right')">
           <slot name="right"></slot>
         </div>
       </template>
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'commonTemplate',
-};
+
+<script setup>
+import { useSlots } from 'vue'
+
+const slots = useSlots()
 </script>
+
 <style lang="scss" scoped>
 .main {
   width: 100%;
diff --git a/web/src/management/pages/edit/components/logo.vue b/web/src/management/pages/edit/components/LogoPreview.vue
similarity index 89%
rename from web/src/management/pages/edit/components/logo.vue
rename to web/src/management/pages/edit/components/LogoPreview.vue
index 2fd94f74..bb332c1e 100644
--- a/web/src/management/pages/edit/components/logo.vue
+++ b/web/src/management/pages/edit/components/LogoPreview.vue
@@ -14,6 +14,7 @@
     </div>
   </div>
 </template>
+
 <script>
 export default {
   name: 'LogoPreview',
@@ -22,24 +23,25 @@ export default {
       type: Object,
       default: () => {}
     },
-    isSelected: Boolean,
+    isSelected: Boolean
   },
   data() {
-    return {};
+    return {}
   },
   methods: {
     onSelect() {
-      this.$emit('select');
-    },
+      this.$emit('select')
+    }
   },
   computed: {
     logoImg() {
-      const { logoImage = {} } = this.logoConf;
-      return logoImage;
-    },
-  },
-};
+      const { logoImage } = this.logoConf
+      return logoImage
+    }
+  }
+}
 </script>
+
 <style lang="scss" rel="stylesheet/scss" scoped>
 .container {
   display: flex;
diff --git a/web/src/management/pages/edit/components/mainTitle.vue b/web/src/management/pages/edit/components/MainTitle.vue
similarity index 59%
rename from web/src/management/pages/edit/components/mainTitle.vue
rename to web/src/management/pages/edit/components/MainTitle.vue
index 53932a43..23658fa7 100644
--- a/web/src/management/pages/edit/components/mainTitle.vue
+++ b/web/src/management/pages/edit/components/MainTitle.vue
@@ -1,58 +1,56 @@
 <template>
   <div class="title-wrapper" @click="handleClick()">
-    <div class="main-title" :class="{ active: isSelected }" >
-      <richEditor
-        :value="bannerConf?.titleConfig?.mainTitle"
+    <div class="main-title" :class="{ active: isSelected }">
+      <RichEditor
+        :modelValue="bannerConf?.titleConfig?.mainTitle"
         @input="onTitleInput"
-      ></richEditor>
+      ></RichEditor>
     </div>
   </div>
 </template>
+
 <script>
-import richEditor from '@/common/Editor/RichEditor';
+import RichEditor from '@/common/Editor/RichEditor.vue'
 
 export default {
   name: 'mainTitlePreview',
   data() {
-    return {};
+    return {}
   },
   props: {
     preview: {
       type: Boolean,
-      default: false,
+      default: false
     },
     bannerConf: {
-      type: Object,
+      type: Object
     },
     isSelected: {
-      type: Boolean,
-    },
+      type: Boolean
+    }
   },
   computed: {},
   methods: {
     handleClick() {
-      if(this.preview) {
-        return false
-      } else {
-        this.$emit('select');
-      }
+      this.$emit('select')
     },
     onTitleInput(val) {
       if (!this.isSelected) {
-        return;
+        return
       }
       this.$emit('change', {
         key: 'titleConfig.mainTitle',
-        value: val,
-      });
-    },
+        value: val
+      })
+    }
   },
   components: {
-    richEditor,
-  },
-};
+    RichEditor
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .title-wrapper {
   padding: 15px;
 }
@@ -65,7 +63,7 @@ export default {
     background-color: #f6f7f9;
     box-shadow: 0 0 5px #dedede;
 
-    ::v-deep .w-e-text-container {
+    :deep(.w-e-text-container) {
       background-color: #f6f7f9;
     }
   }
diff --git a/web/src/management/pages/edit/components/MaterialGroup.vue b/web/src/management/pages/edit/components/MaterialGroup.vue
new file mode 100644
index 00000000..e581ca5c
--- /dev/null
+++ b/web/src/management/pages/edit/components/MaterialGroup.vue
@@ -0,0 +1,101 @@
+<template>
+  <draggable
+    :list="renderData"
+    handle=".question-wrapper.isSelected"
+    filter=".question-wrapper.isSelected .question.isSelected"
+    :onEnd="checkEnd"
+    :move="checkMove"
+    itemKey="field"
+  >
+    <template #item="{ element, index }">
+      <QuestionWrapper
+        v-bind="$attrs"
+        :ref="`questionWrapper-${element.field}`"
+        :moduleConfig="element"
+        :qIndex="element.qIndex"
+        :indexNumber="element.indexNumber"
+        :isSelected="currentEditOne === index"
+        :isLast="index + 1 === questionDataList.length"
+        @select="handleSelect"
+      >
+        <QuestionContainerB
+          v-bind="$attrs"
+          :type="element.type"
+          :moduleConfig="element"
+          :indexNumber="element.indexNumber"
+          :isSelected="currentEditOne === index"
+          :readonly="true"
+          @select="handleSelect"
+        ></QuestionContainerB>
+      </QuestionWrapper>
+    </template>
+  </draggable>
+</template>
+
+<script>
+import { computed, defineComponent, ref, getCurrentInstance } from 'vue'
+import QuestionContainerB from '@/materials/questions/QuestionContainerB'
+import QuestionWrapper from '@/management/pages/edit/components/QuestionWrapper.vue'
+import draggable from 'vuedraggable'
+import { filterQuestionPreviewData } from '@/management/utils/index'
+
+export default defineComponent({
+  components: {
+    draggable,
+    QuestionWrapper,
+    QuestionContainerB
+  },
+  props: {
+    currentEditOne: {
+      type: [Number, String],
+      default: null
+    },
+    questionDataList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  setup(props, { emit }) {
+    const renderData = computed(() => {
+      return filterQuestionPreviewData(props.questionDataList)
+    })
+    const handleSelect = (index) => {
+      emit('select', index)
+    }
+    const handleChangeSeq = (data) => {
+      emit('changeSeq', data)
+    }
+
+    const isMoving = ref(false)
+
+    const checkMove = () => {
+      isMoving.value = true
+    }
+
+    const checkEnd = ({ oldIndex, newIndex }) => {
+      emit('changeSeq', {
+        type: 'move',
+        index: oldIndex,
+        range: newIndex - oldIndex
+      })
+    }
+
+    const instance = getCurrentInstance()
+
+    const getQuestionRefByField = (field) => {
+      return instance?.proxy?.$refs[`questionWrapper-${field}`] || null
+    }
+
+    return {
+      renderData,
+      handleSelect,
+      handleChangeSeq,
+      checkMove,
+      checkEnd,
+      getQuestionRefByField
+    }
+  }
+})
+</script>
diff --git a/web/src/management/pages/edit/components/navbar.vue b/web/src/management/pages/edit/components/ModuleNavbar.vue
similarity index 50%
rename from web/src/management/pages/edit/components/navbar.vue
rename to web/src/management/pages/edit/components/ModuleNavbar.vue
index f91fe9f2..a8250340 100644
--- a/web/src/management/pages/edit/components/navbar.vue
+++ b/web/src/management/pages/edit/components/ModuleNavbar.vue
@@ -1,49 +1,49 @@
 <template>
   <div class="nav">
     <div class="left-group">
-      <back></back>
-      <pageTitle :style="{ marginLeft: '30px' }" :title="title"></pageTitle>
+      <BackPanel></BackPanel>
+      <TitlePanel :style="{ marginLeft: '30px' }" :title="title"></TitlePanel>
     </div>
     <div class="center-group">
-      <pageNav></pageNav>
+      <NavPanel></NavPanel>
     </div>
     <div class="right-group">
-      <history></history>
-      <save></save>
-      <publish></publish>
+      <HistoryPanel></HistoryPanel>
+      <SavePanel></SavePanel>
+      <PublishPanel></PublishPanel>
     </div>
   </div>
 </template>
 
 <script>
-import back from '../modules/generalModule/back.vue';
-import pageTitle from '../modules/generalModule/pageTitle.vue';
-import pageNav from '../modules/generalModule/pageNav.vue';
-import history from '../modules/contentModule/history.vue';
-import save from '../modules/contentModule/save.vue';
-import publish from '../modules/contentModule/publish.vue';
-import { mapState } from 'vuex';
-import { get as _get } from 'lodash-es';
+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 SavePanel from '../modules/contentModule/SavePanel.vue'
+import PublishPanel from '../modules/contentModule/PublishPanel.vue'
+import { mapState } from 'vuex'
+import { get as _get } from 'lodash-es'
 
 export default {
-  name: 'navbar',
+  name: 'ModuleNavbar',
   components: {
-    back,
-    pageTitle,
-    pageNav,
-    history,
-    save,
-    publish,
+    BackPanel,
+    TitlePanel,
+    NavPanel,
+    HistoryPanel,
+    SavePanel,
+    PublishPanel
   },
   data() {
-    return {};
+    return {}
   },
   computed: {
     ...mapState({
-      title: (state) => _get(state, 'edit.schema.metaData.title'),
-    }),
-  },
-};
+      title: (state) => _get(state, 'edit.schema.metaData.title')
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/management/pages/edit/components/QuestionWrapper.vue b/web/src/management/pages/edit/components/QuestionWrapper.vue
new file mode 100644
index 00000000..4ca3df14
--- /dev/null
+++ b/web/src/management/pages/edit/components/QuestionWrapper.vue
@@ -0,0 +1,182 @@
+<template>
+  <div
+    :class="itemClass"
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+    @click="clickFormItem"
+  >
+    <div><slot v-if="moduleConfig.type !== 'section'"></slot></div>
+
+    <div :class="[showHover ? 'visibily' : 'hidden', 'hoverItem']">
+      <div class="item el-icon-rank" @click.stop.prevent="onMove">
+        <i-ep-rank />
+      </div>
+      <div v-if="showUp" class="item" @click.stop.prevent="onMoveUp">
+        <i-ep-top />
+      </div>
+      <div v-if="showDown" class="item" @click.stop.prevent="onMoveDown">
+        <i-ep-bottom />
+      </div>
+      <div v-if="showCopy" class="item" @click.stop.prevent="onCopy">
+        <i-ep-copyDocument />
+      </div>
+      <div class="item" @click.stop.prevent="onDelete">
+        <i-ep-close />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import 'element-plus/theme-chalk/src/message-box.scss'
+
+const props = defineProps({
+  qIndex: {
+    type: Number,
+    default: 0
+  },
+  indexNumber: {
+    type: Number,
+    default: 1
+  },
+  isSelected: {
+    type: Boolean,
+    default: false
+  },
+  isLast: {
+    type: Boolean,
+    default: false
+  },
+  moduleConfig: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
+const emit = defineEmits(['changeSeq', 'select'])
+
+const isHover = ref(false)
+
+const itemClass = computed(() => {
+  return {
+    'question-wrapper': true,
+    'mouse-hover': isHover.value,
+    isSelected: props.isSelected,
+    spliter: props.moduleConfig.showSpliter
+  }
+})
+const showHover = computed(() => {
+  return isHover.value
+})
+const showUp = computed(() => {
+  return props.qIndex !== 0
+})
+const showDown = computed(() => {
+  return !props.isLast
+})
+const showCopy = computed(() => {
+  const field = props.moduleConfig.field
+  const hiddenCopFields = ['mob', 'mobileHidden', 'userAgreement']
+  return hiddenCopFields.indexOf(field) <= -1
+})
+
+const clickFormItem = () => {
+  const index = props.qIndex
+  emit('select', index)
+}
+const onCopy = () => {
+  const index = props.qIndex
+  emit('changeSeq', { type: 'copy', index })
+  isHover.value = false
+
+  return false
+}
+const onMoveUp = () => {
+  const index = props.qIndex
+  emit('changeSeq', { type: 'move', index, range: -1 })
+  isHover.value = false
+}
+
+const onMouseenter = () => {
+  isHover.value = true
+}
+const onMouseleave = () => {
+  isHover.value = false
+}
+const onMoveDown = () => {
+  const index = props.qIndex
+  emit('changeSeq', { type: 'move', index, range: 1 })
+  isHover.value = false
+}
+const onDelete = async () => {
+  try {
+    await ElMessageBox.confirm('本次操作会影响数据统计查看，是否确认删除？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+
+    const index = props.qIndex
+    emit('changeSeq', { type: 'delete', index })
+    isHover.value = false
+  } catch (error) {
+    console.log('取消删除')
+  }
+}
+
+const onMove = () => {}
+</script>
+
+<style lang="scss" scoped>
+.question-wrapper {
+  position: relative;
+  padding: 0.36rem 0 0.36rem;
+  border: 1px solid transparent;
+  &.spliter {
+    border-bottom: 0.12rem solid $spliter-color;
+  }
+
+  &.mouse-hover {
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.09);
+  }
+  &.isSelected {
+    background-color: #f2f4f7;
+    box-shadow: 0 0 5px #e3e4e8;
+  }
+
+  .hoverItem {
+    position: absolute;
+    top: 0;
+    margin-top: -5px;
+    right: -32px;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    &.hidden {
+      display: none;
+    }
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 5px;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: #eceff1;
+      margin-right: 2px;
+      cursor: pointer;
+      color: #506b7b;
+      font-size: 12px;
+      text-align: center;
+      line-height: 28px;
+      &:hover {
+        background-color: $primary-color;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
diff --git a/web/src/management/pages/edit/components/SetterField.vue b/web/src/management/pages/edit/components/SetterField.vue
new file mode 100644
index 00000000..9f53717a
--- /dev/null
+++ b/web/src/management/pages/edit/components/SetterField.vue
@@ -0,0 +1,225 @@
+<template>
+  <el-form class="config-form" @submit.prevent>
+    <div v-for="(item, index) in formFieldData" :key="`${item.key}${index}`" class="group-wrap">
+      <div v-if="item.title" class="group-title">
+        {{ item.title }}
+
+        <el-tooltip v-if="item.tip" :content="item.tip" placement="right">
+          <i-ep-questionFilled class="icon-tip" />
+        </el-tooltip>
+      </div>
+
+      <template v-if="item.type === 'Customed'">
+        <FormItem
+          v-for="(content, contentIndex) in item.content"
+          :key="`${item.key}${contentIndex}`"
+          :form-config="content"
+        >
+          <Component
+            :is="content.type"
+            :form-config="content"
+            :module-config="moduleConfig"
+            @form-change="onFormChange($event, content)"
+            :class="content.contentClass"
+          />
+        </FormItem>
+      </template>
+      <FormItem v-else :form-config="item">
+        <Component
+          :is="item.type"
+          :form-config="item"
+          :module-config="moduleConfig"
+          @form-change="onFormChange($event, item)"
+          :class="item.contentClass"
+        />
+      </FormItem>
+    </div>
+  </el-form>
+</template>
+
+<script>
+import { get as _get, pick as _pick, isFunction as _isFunction } from 'lodash-es'
+
+import FormItem from '@/materials/setters/widgets/FormItem.vue'
+import setterLoader from '@/materials/setters/setterLoader'
+
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
+// 静态配置设置动态值
+const formatValue = ({ item, moduleConfig }) => {
+  if (_isFunction(item.valueAdapter)) {
+    const value = item.valueAdapter({ moduleConfig })
+
+    return value
+  } else {
+    const { key, keys } = item
+    let result = null
+    if (key) {
+      result = _get(moduleConfig, key, item.value)
+    }
+    if (keys) {
+      result = _pick(moduleConfig, keys)
+    }
+
+    return result
+  }
+}
+
+export default {
+  name: 'SettersField',
+  props: {
+    formConfigList: Array, // 对应题型组件的meta.js内容
+    moduleConfig: Object
+  },
+  data() {
+    return {
+      register: {},
+      formFieldData: [],
+      init: true
+    }
+  },
+  components: {
+    FormItem
+  },
+  watch: {
+    formConfigList: {
+      deep: true,
+      immediate: true,
+      async handler(newVal) {
+        this.init = true
+        if (!newVal || !newVal.length) {
+          return
+        }
+
+        // 组件注册
+        await this.handleComponentRegister(newVal)
+
+        this.init = false
+        this.formFieldData = this.setValues(this.formConfigList)
+      }
+    },
+    // schema变化联动
+    moduleConfig: {
+      deep: true,
+      async handler() {
+        // 配置变化后初次不监听value变化（如题型切换场景避免多次计算）
+        if (this.init) {
+          return
+        }
+
+        // TODO: 优化，依赖的schema变化时，均会重新计算
+        this.formFieldData = this.setValues(this.formConfigList)
+      }
+    }
+  },
+  methods: {
+    setValues(configList = []) {
+      return configList
+        .filter((item) => {
+          // 组件组
+          if (item.type === 'Customed') {
+            item.content = this.setValues(item.content)
+            return true
+          }
+
+          if (!item.type) {
+            return false
+          }
+          if (item.hidden) {
+            return false
+          }
+
+          // 动态显隐设置器
+          if (_isFunction(item.relyFunc)) {
+            return item.relyFunc(this.moduleConfig)
+          }
+
+          return true
+        })
+        .map((item) => {
+          return {
+            ...item,
+            value: formatValue({ item, moduleConfig: this.moduleConfig }) // 动态复值
+          }
+        })
+    },
+    async handleComponentRegister(formFieldData) {
+      let innerSetters = []
+      const setters = formFieldData.map((item) => {
+        if (item.type === 'Customed') {
+          innerSetters.push(...(item.content || []).map((content) => content.type))
+        }
+
+        return item.type
+      })
+
+      const settersSet = new Set([...setters, ...innerSetters])
+      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
+            if (!this.$options.components) {
+              this.$options.components = {}
+            }
+            this.$options.components[componentName] = component
+            this.register[type] = componentName
+          }
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    },
+
+    onFormChange(data, formConfig) {
+      if (_isFunction(formConfig?.setterAdapter)) {
+        const resultData = formConfig.setterAdapter(data)
+        if (Array.isArray(resultData)) {
+          resultData.forEach((item) => {
+            this.$emit(FORM_CHANGE_EVENT_KEY, item)
+          })
+        } else {
+          this.$emit(FORM_CHANGE_EVENT_KEY, resultData)
+        }
+      } else {
+        this.$emit(FORM_CHANGE_EVENT_KEY, data)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.config-form {
+  padding: 15px 0;
+
+  .group-wrap {
+    margin-bottom: 20px;
+  }
+
+  .group-title {
+    font-size: 14px;
+    color: #606266;
+    margin-bottom: 20px;
+    font-weight: bold;
+    align-items: center;
+    display: flex;
+
+    .icon-tip {
+      font-size: 13px;
+      color: #606266;
+    }
+  }
+}
+</style>
diff --git a/web/src/management/pages/edit/components/submit.vue b/web/src/management/pages/edit/components/SubmitButton.vue
similarity index 53%
rename from web/src/management/pages/edit/components/submit.vue
rename to web/src/management/pages/edit/components/SubmitButton.vue
index b3b1ee50..274b5c28 100644
--- a/web/src/management/pages/edit/components/submit.vue
+++ b/web/src/management/pages/edit/components/SubmitButton.vue
@@ -1,38 +1,32 @@
 <template>
-  <div
-    class="submit-wrapper"
-    @click="onClick"
-    :class="{ isSelected: isSelected }"
-  >
-    <el-button
-      class="submit-btn"
-      type="primary"
-      >{{ submitConf.submitTitle }}</el-button
-    >
+  <div class="submit-wrapper" @click="onClick" :class="{ isSelected: isSelected }">
+    <el-button class="submit-btn" type="primary">{{ submitConf.submitTitle }}</el-button>
   </div>
 </template>
+
 <script>
 export default {
-  name: 'Submit',
+  name: 'SubmitButton',
   data() {
-    return {};
+    return {}
   },
   props: {
     submitConf: Object,
     isSelected: Boolean,
     skinConf: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   methods: {
     onClick() {
-      this.$emit('select');
-    },
-  },
-};
+      this.$emit('select')
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .submit-wrapper {
   padding: 25px;
   text-align: center;
diff --git a/web/src/management/pages/edit/components/materialGroup.vue b/web/src/management/pages/edit/components/materialGroup.vue
deleted file mode 100644
index 677ebe67..00000000
--- a/web/src/management/pages/edit/components/materialGroup.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script>
-import { computed, defineComponent, ref, getCurrentInstance } from 'vue';
-import QuestionContainer from '@/materials/questions/widgets/QuestionContainer.jsx';
-import questionWrapper from './questionWrapper.vue';
-import draggable from 'vuedraggable';
-import { filterQuestionPreviewData } from '@/management/utils/index';
-
-export default defineComponent({
-  name: '',
-  components: { draggable },
-  props: {
-    currentEditOne: {
-      type: [Number, String],
-      default: null,
-    },
-    questionDataList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-  },
-  watch: {},
-  setup(props, { emit }) {
-    const renderData = computed(() => {
-      return filterQuestionPreviewData(props.questionDataList);
-    });
-    const handleSelect = (index) => {
-      emit('select', index);
-    };
-    const handleChangeSeq = (data) => {
-      emit('changeSeq', data);
-    };
-
-    const isMoving = ref(false);
-
-    const checkMove = () => {
-      isMoving.value = true;
-    };
-
-    const checkEnd = ({ oldIndex, newIndex }) => {
-      emit('changeSeq', {
-        type: 'move',
-        index: oldIndex,
-        range: newIndex - oldIndex,
-      });
-    };
-
-    const instance = getCurrentInstance();
-
-    const getQuestionRefByField = (field) => {
-      return instance?.proxy?.$refs[`questionWrapper-${field}`] || null;
-    };
-
-    return {
-      renderData,
-      handleSelect,
-      handleChangeSeq,
-      checkMove,
-      checkEnd,
-      dragOptions: {
-        animation: 0,
-        group: 'previewList',
-        handle: '.el-icon-rank',
-        scroll: true,
-        scrollSpeed: 2500,
-        scrollSensitivity: 150,
-        forceFallback: true,
-      },
-      getQuestionRefByField,
-    };
-  },
-  render(h) {
-    return (
-      <draggable
-        list={this.renderData}
-        options={this.dragOptions}
-        onEnd={this.checkEnd}
-        move={this.checkMove}
-      >
-        {this.renderData.map((item, index) => {
-          return h(
-            questionWrapper,
-            {
-              ref: `questionWrapper-${item.field}`,
-              key: item.field,
-              props: {
-                moduleConfig: item,
-                qIndex: item.qIndex,
-                indexNumber: item.indexNumber,
-                isSelected: this.currentEditOne === index,
-                isLast: index + 1 === this.questionDataList.length,
-              },
-              on: {
-                ...this.$listeners,
-                select: this.handleSelect,
-                changeSeq: this.handleChangeSeq,
-              },
-            },
-            [
-              h(QuestionContainer, {
-                props: {
-                  type: item.type,
-                  moduleConfig: item,
-                  indexNumber: item.indexNumber,
-                  isSelected: this.currentEditOne === index,
-                  readonly: true,
-                },
-                on: {
-                  ...this.$listeners,
-                  select: this.handleSelect,
-                },
-              }),
-            ]
-          );
-        })}
-      </draggable>
-    );
-  },
-});
-</script>
diff --git a/web/src/management/pages/edit/components/questionWrapper.vue b/web/src/management/pages/edit/components/questionWrapper.vue
deleted file mode 100644
index b8080352..00000000
--- a/web/src/management/pages/edit/components/questionWrapper.vue
+++ /dev/null
@@ -1,335 +0,0 @@
-<script>
-import {
-  defineComponent,
-  reactive,
-  toRefs,
-  computed,
-  getCurrentInstance,
-} from 'vue';
-
-export default defineComponent({
-  name: 'QuestionWrapper',
-  props: {
-    qIndex: {
-      type: Number,
-      default: 0,
-    },
-    indexNumber: {
-      type: Number,
-      default: 1,
-    },
-    isSelected: {
-      type: Boolean,
-      default: false,
-    },
-    isLast: {
-      type: Boolean,
-      default: false,
-    },
-    moduleConfig: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-  },
-  setup(props, { emit }) {
-    const state = reactive({
-      isHover: false,
-    });
-    const { proxy } = getCurrentInstance();
-    const itemClass = computed(() => {
-      return {
-        'question-wrapper': true,
-        'mouse-hover': state.isHover,
-        isSelected: props.isSelected,
-        spliter: props.moduleConfig.showSpliter,
-      };
-    });
-    const showHover = computed(() => {
-      return state.isHover;
-    });
-    const showUp = computed(() => {
-      return props.qIndex !== 0;
-    });
-    const showDown = computed(() => {
-      return !props.isLast;
-    });
-    const showCopy = computed(() => {
-      const field = props.moduleConfig.field;
-      const hiddenCopFields = ['mob', 'mobileHidden', 'userAgreement'];
-      return hiddenCopFields.indexOf(field) <= -1;
-    });
-    const toggleHoverClass = (status) => {
-      state.isHover = status;
-    };
-    const clickFormItem = () => {
-      const index = props.qIndex;
-      emit('select', index);
-    };
-    const onCopy = () => {
-      const index = props.qIndex;
-      // this.changeQuestionSeq({ type: 'copy', index })
-      emit('changeSeq', { type: 'copy', index });
-      state.isHover = false;
-    };
-    const onMoveUp = () => {
-      const index = props.qIndex;
-      // this.changeQuestionSeq({ type: 'move', index, range: -1 })
-      emit('changeSeq', { type: 'move', index, range: -1 });
-      state.isHover = false;
-    };
-    // const onMoveTop = () => {
-    //   const index = props.qIndex
-    //   // this.changeQuestionSeq({ type: 'move', index, range: -index })
-    //   emit('changeSeq', { type: 'move', index, range: -index })
-    //   state.isHover = false
-    // }
-    const onMoveDown = () => {
-      const index = props.qIndex;
-      // this.changeQuestionSeq({ type: 'move', index, range: 1 })
-      emit('changeSeq', { type: 'move', index, range: 1 });
-      state.isHover = false;
-    };
-    const onDelete = async () => {
-      try {
-        await proxy.$confirm(
-          '本次操作会影响数据统计查看，是否确认删除？',
-          '提示',
-          {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning',
-          }
-        );
-        const index = props.qIndex;
-        // this.changeQuestionSeq({ type: 'move', index, range: 1 })
-        emit('changeSeq', { type: 'delete', index });
-        state.isHover = false;
-      } catch (error) {
-        console.log('取消删除');
-      }
-    };
-    // const onMoveBottom = () => {
-    //   const index = props.qIndex
-    //   this.changeQuestionSeq({
-    //     type: 'move',
-    //     index,
-    //     range: props.questionDataList.length - index,
-    //   })
-    //   state.isHover = false
-    // }
-    return {
-      ...toRefs(state),
-      itemClass,
-      showHover,
-      showUp,
-      showDown,
-      showCopy,
-      onCopy,
-      onMoveUp,
-      onMoveDown,
-      onDelete,
-      toggleHoverClass,
-      clickFormItem,
-    };
-  },
-  render() {
-    const { showHover, itemClass, showUp, showDown, showCopy } = this;
-    return (
-      <div
-        class={itemClass}
-        onMouseenter={() => {
-          this.isHover = true;
-        }}
-        onMouseleave={() => {
-          this.isHover = false;
-        }}
-        onClick={this.clickFormItem}
-      >
-        {this.moduleConfig.type !== 'section' && (
-          <div>{this.$slots.default}</div>
-        )}
-        {
-          <div class={[showHover ? 'visibily' : 'hidden', 'hoverItem']}>
-            <div
-              class="item move el-icon-rank"
-              vOn:click_stop_prevent={this.onMove}
-            ></div>
-            {showUp && (
-              <div
-                class="item iconfont icon-shangyi"
-                vOn:click_stop_prevent={this.onMoveUp}
-              ></div>
-            )}
-            {showDown && (
-              <div
-                class="item iconfont icon-xiayi"
-                vOn:click_stop_prevent={this.onMoveDown}
-              ></div>
-            )}
-            {showCopy && (
-              <div
-                class="item copy iconfont icon-fuzhi"
-                vOn:click_stop_prevent={this.onCopy}
-              ></div>
-            )}
-            <div
-              class="item iconfont icon-shanchu"
-              vOn:click_stop_prevent={this.onDelete}
-            ></div>
-          </div>
-        }
-      </div>
-    );
-  },
-});
-</script>
-<style lang="scss" rel="stylesheet/scss" scoped>
-.question-wrapper {
-  position: relative;
-  padding: 0.36rem 0 0.36rem;
-  border: 1px solid transparent;
-  &.spliter {
-    border-bottom: 0.12rem solid $spliter-color;
-  }
-  &:last-child{
-    border: none;
-  }
-  .editor {
-    display: flex;
-    font-size: 0.32rem;
-    margin-bottom: 0.4rem;
-    padding: 0 0.4rem;
-    .icon-required {
-      color: $error-color;
-      position: absolute;
-      left: 0.16rem;
-      font-size: 0.46rem;
-    }
-    .index {
-      flex-shrink: 0;
-    }
-  }
-  .component-wrapper {
-    padding: 0 0.4rem;
-    .editor {
-      padding-left: 0.4rem;
-    }
-  }
-
-  &.no-padding {
-    .component-wrapper {
-      padding: 0;
-    }
-  }
-
-  &.mouse-hover {
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.09);
-  }
-  &.isSelected {
-    background-color: #f2f4f7;
-    box-shadow: 0 0 5px #e3e4e8;
-  }
-
-  .clear {
-    clear: both;
-  }
-
-  &.question-type-section {
-    .module-title {
-      padding-bottom: 0;
-    }
-  }
-  &.horizon {
-    display: flex;
-    .module-title .m-title {
-      width: 1.2rem;
-      margin-right: 8px;
-      text-align: justify;
-      position: relative;
-      &::before {
-        content: ':';
-        display: block;
-        position: absolute;
-        right: -5px;
-      }
-      &::after {
-        content: '';
-        display: inline-block;
-        width: 100%;
-      }
-    }
-    .component-wrapper {
-      flex: 1;
-    }
-  }
-  .hoverItem {
-    position: absolute;
-    top: 0;
-    margin-top: -5px;
-    right: -32px;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    &.hidden {
-      display: none;
-    }
-    .item {
-      margin-top: 5px;
-      display: inline-block;
-      width: 28px;
-      height: 28px;
-      border-radius: 50%;
-      background: #eceff1;
-      margin-right: 2px;
-      cursor: pointer;
-      color: #506b7b;
-      font-size: 12px;
-      text-align: center;
-      line-height: 28px;
-      &:hover {
-        background-color: $primary-color;
-        color: #fff;
-      }
-    }
-    .move {
-      cursor: move;
-      font-size: 14px;
-    }
-    .copy {
-      font-size: 14px;
-    }
-  }
-  .titleGray {
-    color: #ddd;
-  }
-  .relation-show,
-  .jumpto-show,
-  .listenmerge-show {
-    margin-top: 0.4rem;
-    font-size: 12px;
-    color: $placeholder-color;
-    padding: 0 0.4rem;
-  }
-  .relyList {
-    white-space: pre-wrap;
-  }
-  .font-bold {
-    font-weight: 500;
-  }
-  .option-origin-text {
-    color: #ccc;
-    margin-left: 17px;
-  }
-  .sort-tip {
-    font-size: 0.26rem;
-    line-height: 0.26rem;
-    opacity: 0.5;
-    margin-top: -0.24rem;
-    margin-bottom: 0.4rem;
-    padding-left: 0.4rem;
-    color: #92949d;
-  }
-}
-</style>
diff --git a/web/src/management/pages/edit/components/setterField.vue b/web/src/management/pages/edit/components/setterField.vue
deleted file mode 100644
index a587192d..00000000
--- a/web/src/management/pages/edit/components/setterField.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<template>
-  <el-form
-    class="config-form"
-    size="small"
-    :labelPosition="labelPosition"
-    label-width="110px"
-    :inline="inline"
-    @submit.native.prevent
-  >
-    <template v-for="(item, index) in formFieldData">
-      <FormItem :key="item.key + index" class="form-item" :form-config="item">
-        <template v-if="item.type === 'Customed'">
-          <SettersField
-            :key="index"
-            :form-config-list="item.content"
-            :module-config="moduleConfig"
-            @form-change="onFormChange($event, item)"
-            :inline="true"
-            labelPosition="left"
-            :class="item.contentClass"
-          ></SettersField>
-        </template>
-        <Component
-          v-else
-          :is="item.type"
-          :module-config="moduleConfig"
-          :form-config="item"
-          @form-change="onFormChange($event, item)"
-          :slot="item.contentPosition || null"
-        />
-      </FormItem>
-    </template>
-  </el-form>
-</template>
-<script>
-import {
-  get as _get,
-  pick as _pick,
-  isFunction as _isFunction,
-} from 'lodash-es';
-
-import FormItem from '@/materials/setters/widgets/FormItem.vue';
-import setterLoader from '@/materials/setters/setterLoader';
-
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
-
-const formatValue = ({ item, moduleConfig }) => {
-  if (_isFunction(item.valueAdapter)) {
-    const value = item.valueAdapter({ moduleConfig });
-    return value;
-  } else {
-    const { key, keys } = item;
-
-    let result = null;
-    if (key) {
-      result = _get(moduleConfig, key, item.value);
-    }
-    if (keys) {
-      result = _pick(moduleConfig, keys);
-    }
-    return result;
-  }
-};
-
-export default {
-  name: 'SettersField',
-  props: {
-    formConfigList: Array,
-    moduleConfig: Object,
-    inline: {
-      type: Boolean,
-      default: false,
-    },
-    labelPosition: {
-      type: String,
-      default: 'top',
-    },
-  },
-  data() {
-    return {
-      registerd: {},
-    };
-  },
-  components: {
-    FormItem,
-  },
-  computed: {
-    formFieldData() {
-      return this.formConfigList
-        .filter((item) => {
-          if (!item.type) {
-            return false;
-          }
-          if (item.type !== 'Customed' && !this.registerd[item.type]) {
-            return false;
-          }
-          if (item.hidden) {
-            return false;
-          }
-          if (_isFunction(item.relyFunc)) {
-            return item.relyFunc(this.moduleConfig);
-          }
-          return true;
-        })
-        .map((item) => {
-          return {
-            ...item,
-            value: formatValue({ item, moduleConfig: this.moduleConfig }),
-          };
-        });
-    },
-  },
-  watch: {
-    formConfigList: {
-      deep: true,
-      immediate: true,
-      handler(newVal) {
-        if (!newVal || !newVal.length) {
-          return;
-        }
-        this.handleComponentRegister(newVal);
-      },
-    },
-  },
-  methods: {
-    async handleComponentRegister(formFieldData) {
-      const setters = formFieldData.map((item) => 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;
-            if (!this.$options.components) {
-              this.$options.components = {};
-            }
-            this.$options.components[componentName] = component;
-            this.$set(this.registerd, type, componentName);
-          }
-        }
-      } catch (err) {
-        console.error(err);
-      }
-    },
-
-    onFormChange(data, formConfig) {
-      if (_isFunction(formConfig?.setterAdapter)) {
-        const resultData = formConfig.setterAdapter(data);
-        if (Array.isArray(resultData)) {
-          resultData.forEach((item) => {
-            this.$emit(FORM_CHANGE_EVENT_KEY, item);
-          });
-        } else {
-          this.$emit(FORM_CHANGE_EVENT_KEY, resultData);
-        }
-      } else {
-        this.$emit(FORM_CHANGE_EVENT_KEY, data);
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" rel="stylesheet/scss" scoped>
-.config-form {
-  padding: 15px 0;
-}
-.nps-customed-config {
-  .el-form-item {
-    margin-right: 0px;
-    ::v-deep .el-form-item__label {
-      width: 70px !important;
-      margin-right: 8px;
-    }
-    ::v-deep .el-input__inner {
-      width: 234px;
-    }
-  }
-}
-</style>
diff --git a/web/src/management/pages/edit/index.vue b/web/src/management/pages/edit/index.vue
index 414d2d3e..c7079333 100644
--- a/web/src/management/pages/edit/index.vue
+++ b/web/src/management/pages/edit/index.vue
@@ -1,42 +1,52 @@
 <template>
   <div class="edit-index">
-    <leftMenu class="left"></leftMenu>
+    <LeftMenu class="left"></LeftMenu>
     <div class="right">
-      <commonTemplate style="background-color: #f6f7f9">
-        <navbar class="navbar" slot="nav"></navbar>
-        <router-view slot="body"></router-view>
-      </commonTemplate>
+      <CommonTemplate style="background-color: #f6f7f9">
+        <template #nav>
+          <Navbar class="navbar"></Navbar>
+        </template>
+        <template #body>
+          <router-view></router-view>
+        </template>
+      </CommonTemplate>
     </div>
   </div>
 </template>
 
 <script>
-import commonTemplate from './components/commonTemplate.vue';
-import navbar from './components/navbar.vue';
-import leftMenu from '@/management/components/leftMenu.vue';
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import LeftMenu from '@/management/components/LeftMenu.vue'
+
+import CommonTemplate from './components/CommonTemplate.vue'
+import Navbar from './components/ModuleNavbar.vue'
+
 export default {
   name: 'questionEditPage',
   components: {
-    commonTemplate,
-    navbar,
-    leftMenu,
+    CommonTemplate,
+    Navbar,
+    LeftMenu
   },
   async created() {
-    this.$store.commit('edit/setSurveyId', this.$route.params.id);
+    this.$store.commit('edit/setSurveyId', this.$route.params.id)
     try {
-      await this.$store.dispatch('edit/init');
+      await this.$store.dispatch('edit/init')
     } catch (error) {
-      this.$message.error(error.message);
+      ElMessage.error(error.message)
       // 自动跳转回列表页
       setTimeout(() => {
         this.$router.replace({
-          name: 'survey',
-        });
-      }, 1000);
+          name: 'survey'
+        })
+      }, 1000)
     }
-  },
-};
+  }
+}
 </script>
+
 <style lang="scss" scoped>
 .edit-index {
   height: 100%;
@@ -56,6 +66,7 @@ export default {
     padding-left: 80px;
     overflow: hidden;
   }
+
   .navbar {
     border-bottom: 1px solid #e7e9eb;
   }
diff --git a/web/src/management/pages/edit/modules/contentModule/history.vue b/web/src/management/pages/edit/modules/contentModule/HistoryPanel.vue
similarity index 66%
rename from web/src/management/pages/edit/modules/contentModule/history.vue
rename to web/src/management/pages/edit/modules/contentModule/HistoryPanel.vue
index 9eb37d44..651e5245 100644
--- a/web/src/management/pages/edit/modules/contentModule/history.vue
+++ b/web/src/management/pages/edit/modules/contentModule/HistoryPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-popover placement="top" trigger="click" @show="onShow">
+  <el-popover placement="top" trigger="click" @show="onShow" :width="320">
     <el-tabs v-model="currentTab" class="custom-tab" v-if="visible">
       <el-tab-pane label="修改历史" name="daily" class="custom-tab-pane">
         <div class="line" v-for="(his, index) in dailyList" :key="index">
@@ -16,48 +16,51 @@
         </div>
       </el-tab-pane>
     </el-tabs>
-    <div class="btn" slot="reference">
-      <i class="iconfont icon-lishi"></i>
-      <span class="btn-txt">历史</span>
-    </div>
+    <template #reference>
+      <div class="btn">
+        <i class="iconfont icon-lishi"></i>
+        <span class="btn-txt">历史</span>
+      </div>
+    </template>
   </el-popover>
 </template>
-<script>
-import { getSurveyHistory } from '@/management/api/survey';
-import moment from 'moment';
-// 引入中文
-import 'moment/locale/zh-cn';
-// 设置中文
-moment.locale('zh-cn');
 
-import { mapState } from 'vuex';
-import { get as _get } from 'lodash-es';
+<script>
+import { getSurveyHistory } from '@/management/api/survey'
+import moment from 'moment'
+// 引入中文
+import 'moment/locale/zh-cn'
+// 设置中文
+moment.locale('zh-cn')
+
+import { mapState } from 'vuex'
+import { get as _get } from 'lodash-es'
 
 const getItemData = (item) => ({
   operator: item?.operator?.username || '未知用户',
-  time: moment(item.createDate).format('YYYY-MM-DD HH:mm:ss'),
-});
+  time: moment(item.createDate).format('YYYY-MM-DD HH:mm:ss')
+})
 
 export default {
-  name: 'history',
+  name: 'HistoryPanel',
   computed: {
     ...mapState({
-      surveyId: (state) => _get(state, 'edit.surveyId'),
+      surveyId: (state) => _get(state, 'edit.surveyId')
     }),
     dailyList() {
-      return this.dailyHis.map(getItemData);
+      return this.dailyHis.map(getItemData)
     },
     publishList() {
-      return this.publishHis.map(getItemData);
-    },
+      return this.publishHis.map(getItemData)
+    }
   },
   data() {
     return {
       dailyHis: [],
       publishHis: [],
       currentTab: 'daily',
-      visible: false,
-    };
+      visible: false
+    }
   },
   watch: {
     surveyId: {
@@ -67,31 +70,32 @@ export default {
           const [dailyHis, publishHis] = await Promise.all([
             getSurveyHistory({
               surveyId: this.surveyId,
-              historyType: 'dailyHis',
+              historyType: 'dailyHis'
             }),
             getSurveyHistory({
               surveyId: this.surveyId,
-              historyType: 'publishHis',
-            }),
-          ]);
-          this.dailyHis = dailyHis.data || [];
-          this.publishHis = publishHis.data || [];
+              historyType: 'publishHis'
+            })
+          ])
+          this.dailyHis = dailyHis.data || []
+          this.publishHis = publishHis.data || []
         }
-      },
-    },
+      }
+    }
   },
   methods: {
     onShow() {
-      this.visible = true;
-    },
-  },
-};
+      this.visible = true
+    }
+  }
+}
 </script>
+
 <style lang="scss" scoped>
 @import url('@/management/styles/edit-btn.scss');
 .custom-tab {
   width: 300px;
-  ::v-deep .el-tabs__nav {
+  :deep(.el-tabs__nav) {
     width: 100%;
 
     .el-tabs__item {
diff --git a/web/src/management/pages/edit/modules/contentModule/PublishPanel.vue b/web/src/management/pages/edit/modules/contentModule/PublishPanel.vue
new file mode 100644
index 00000000..c8f85c99
--- /dev/null
+++ b/web/src/management/pages/edit/modules/contentModule/PublishPanel.vue
@@ -0,0 +1,75 @@
+<template>
+  <el-button type="primary" :loading="isPublishing" class="publish-btn" @click="onPublish">
+    发布
+  </el-button>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import { get as _get } from 'lodash-es'
+
+import { publishSurvey, saveSurvey } from '@/management/api/survey'
+import buildData from './buildData'
+
+export default {
+  name: 'PublishPanel',
+  data() {
+    return {
+      isPublishing: false
+    }
+  },
+  computed: {
+    ...mapState({
+      surveyId: (state) => _get(state, 'edit.surveyId')
+    })
+  },
+  methods: {
+    async onPublish() {
+      const saveData = buildData(this.$store.state.edit.schema)
+      if (!saveData.surveyId) {
+        ElMessage.error('未获取到问卷id')
+        return
+      }
+      if (this.isPublishing) {
+        return
+      }
+      try {
+        this.isPublishing = true
+        const saveRes = await saveSurvey(saveData)
+        if (saveRes.code !== 200) {
+          ElMessage.error(saveRes.errmsg || '问卷保存失败')
+          return
+        }
+        const publishRes = await publishSurvey({ surveyId: this.surveyId })
+        if (publishRes.code === 200) {
+          ElMessage.success('发布成功')
+          this.$store.dispatch('edit/getSchemaFromRemote')
+          this.$router.push({
+            name: 'publishResultPage'
+          })
+        } else {
+          ElMessage.error(`发布失败 ${publishRes.errmsg}`)
+        }
+      } catch (error) {
+        ElMessage.error(`发布失败`)
+      } finally {
+        this.isPublishing = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.publish-btn {
+  width: 100px;
+  font-size: 14px;
+  height: 36px;
+  line-height: 36px;
+  padding: 0;
+}
+</style>
diff --git a/web/src/management/pages/edit/modules/contentModule/save.vue b/web/src/management/pages/edit/modules/contentModule/SavePanel.vue
similarity index 59%
rename from web/src/management/pages/edit/modules/contentModule/save.vue
rename to web/src/management/pages/edit/modules/contentModule/SavePanel.vue
index 3e172240..ba2ddcc3 100644
--- a/web/src/management/pages/edit/modules/contentModule/save.vue
+++ b/web/src/management/pages/edit/modules/contentModule/SavePanel.vue
@@ -7,115 +7,119 @@
         <span class="sv-text">
           {{ saveText }}
         </span>
-        <i class="icon el-icon-loading" v-if="autoSaveStatus === 'saving'"></i>
-        <i
-          class="icon succeed el-icon-check"
-          v-else-if="autoSaveStatus === 'succeed'"
-        ></i>
+        <i-ep-loading class="icon" v-if="autoSaveStatus === 'saving'" />
+        <i-ep-check class="icon succeed" v-else-if="autoSaveStatus === 'succeed'" />
       </div>
     </transition>
   </div>
 </template>
+
 <script>
-import { saveSurvey } from '@/management/api/survey';
-import buildData from './buildData';
-import { mapState } from 'vuex';
-import { get as _get } from 'lodash-es';
+import { mapState } from 'vuex'
+import { get as _get } from 'lodash-es'
+
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import { saveSurvey } from '@/management/api/survey'
+import buildData from './buildData'
 
 export default {
-  name: 'save',
+  components: {},
+  name: 'SavePanel',
   data() {
     return {
       isSaving: false,
       isShowAutoSave: false,
-      autoSaveStatus: 'succeed',
-    };
+      autoSaveStatus: 'succeed'
+    }
   },
   computed: {
     ...mapState({
-      schemaUpdateTime: (state) => _get(state, 'edit.schemaUpdateTime'),
+      schemaUpdateTime: (state) => _get(state, 'edit.schemaUpdateTime')
     }),
     saveText() {
       const statusMap = {
         saving: '保存中',
         succeed: '保存成功',
-        failed: '保存失败',
-      };
-      return statusMap[this.autoSaveStatus];
-    },
+        failed: '保存失败'
+      }
+      return statusMap[this.autoSaveStatus]
+    }
   },
   watch: {
     schemaUpdateTime() {
-      this.triggerAutoSave();
-    },
+      this.triggerAutoSave()
+    }
   },
   methods: {
     triggerAutoSave() {
       if (this.autoSaveStatus === 'saving') {
         // 正在调用接口
         setTimeout(() => {
-          this.triggerAutoSave();
-        }, 1000);
+          this.triggerAutoSave()
+        }, 1000)
       } else {
         if (this.timer) {
-          clearTimeout(this.timer);
+          clearTimeout(this.timer)
         }
         this.timer = setTimeout(() => {
-          this.autoSaveStatus = 'saving';
-          this.isShowAutoSave = true;
+          this.autoSaveStatus = 'saving'
+          this.isShowAutoSave = true
           this.$nextTick(() => {
             this.saveData()
               .then((res) => {
                 if (res.code === 200) {
-                  this.autoSaveStatus = 'succeed';
+                  this.autoSaveStatus = 'succeed'
                 } else {
-                  this.autoSaveStatus = 'failed';
+                  this.autoSaveStatus = 'failed'
                 }
                 setTimeout(() => {
-                  this.isShowAutoSave = false;
-                  this.timer = null;
-                }, 300);
+                  this.isShowAutoSave = false
+                  this.timer = null
+                }, 300)
               })
               .catch(() => {
-                this.timer = null;
-                this.autoSaveStatus = 'failed';
-                this.isShowAutoSave = true;
-              });
-          });
-        }, 2000);
+                this.timer = null
+                this.autoSaveStatus = 'failed'
+                this.isShowAutoSave = true
+              })
+          })
+        }, 2000)
       }
     },
     async saveData() {
-      const saveData = buildData(this.$store.state.edit.schema);
+      const saveData = buildData(this.$store.state.edit.schema)
       if (!saveData.surveyId) {
-        this.$message.error('未获取到问卷id');
-        return null;
+        ElMessage.error('未获取到问卷id')
+        return null
       }
-      const res = await saveSurvey(saveData);
-      return res;
+      const res = await saveSurvey(saveData)
+      return res
     },
     async onSave() {
       if (this.isSaving) {
-        return;
+        return
       }
-      this.isShowAutoSave = false;
+      this.isShowAutoSave = false
       try {
-        this.isSaving = true;
-        const res = await this.saveData();
+        this.isSaving = true
+        const res = await this.saveData()
         if (res.code === 200) {
-          this.$message.success('保存成功');
+          ElMessage.success('保存成功')
         } else {
-          this.$message.error(res.errmsg);
+          ElMessage.error(res.errmsg)
         }
       } catch (error) {
-        this.$message.error('保存问卷失败');
+        ElMessage.error('保存问卷失败')
       } finally {
-        this.isSaving = false;
+        this.isSaving = false
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
+
 <style lang="scss" scoped>
 @import url('@/management/styles/edit-btn.scss');
 
diff --git a/web/src/management/pages/edit/modules/contentModule/buildData.js b/web/src/management/pages/edit/modules/contentModule/buildData.js
index 318836c8..c10fa713 100644
--- a/web/src/management/pages/edit/modules/contentModule/buildData.js
+++ b/web/src/management/pages/edit/modules/contentModule/buildData.js
@@ -1,22 +1,22 @@
-import { pick as _pick, get as _get } from 'lodash-es';
+import { pick as _pick, get as _get } from 'lodash-es'
 
 // 生成需要保存到接口的数据
 export default function (schema) {
-  const surveyId = _get(schema, 'metaData._id');
+  const surveyId = _get(schema, 'metaData._id')
   const configData = _pick(schema, [
     'bannerConf',
     'baseConf',
     'bottomConf',
     'skinConf',
     'submitConf',
-    'questionDataList',
-  ]);
+    'questionDataList'
+  ])
   configData.dataConf = {
-    dataList: configData.questionDataList,
-  };
-  delete configData.questionDataList;
+    dataList: configData.questionDataList
+  }
+  delete configData.questionDataList
   return {
     surveyId,
-    configData,
-  };
+    configData
+  }
 }
diff --git a/web/src/management/pages/edit/modules/contentModule/publish.vue b/web/src/management/pages/edit/modules/contentModule/publish.vue
deleted file mode 100644
index 22ab459a..00000000
--- a/web/src/management/pages/edit/modules/contentModule/publish.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <el-button
-    type="primary"
-    :loading="isPublishing"
-    class="publish-btn"
-    @click="onPublish"
-  >
-    发布
-  </el-button>
-</template>
-<script>
-import { mapState } from 'vuex';
-import { publishSurvey, saveSurvey } from '@/management/api/survey';
-import buildData from './buildData';
-import { get as _get } from 'lodash-es';
-export default {
-  name: 'publish',
-  data() {
-    return {
-      isPublishing: false,
-    };
-  },
-  computed: {
-    ...mapState({
-      surveyId: (state) => _get(state, 'edit.surveyId'),
-    }),
-  },
-  methods: {
-    async onPublish() {
-      const saveData = buildData(this.$store.state.edit.schema);
-      if (!saveData.surveyId) {
-        this.$message.error('未获取到问卷id');
-        return;
-      }
-      if (this.isPublishing) {
-        return;
-      }
-      try {
-        this.isPublishing = true;
-        const saveRes = await saveSurvey(saveData);
-        if (saveRes.code !== 200) {
-          this.$message.error(saveRes.errmsg || '问卷保存失败');
-          return;
-        }
-        const publishRes = await publishSurvey({ surveyId: this.surveyId });
-        if (publishRes.code === 200) {
-          this.$message.success('发布成功');
-          this.$store.dispatch('edit/getSchemaFromRemote');
-          this.$router.push({
-            name: 'publishResultPage',
-          });
-        } else {
-          this.$message.error(`发布失败 ${publishRes.errmsg}`);
-        }
-      } catch (error) {
-        this.$message.error(`发布失败`);
-      } finally {
-        this.isPublishing = false;
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.publish-btn {
-  width: 100px;
-  font-size: 14px;
-  height: 36px;
-  line-height: 36px;
-  padding: 0;
-}
-</style>
diff --git a/web/src/management/pages/edit/modules/generalModule/back.vue b/web/src/management/pages/edit/modules/generalModule/BackPanel.vue
similarity index 83%
rename from web/src/management/pages/edit/modules/generalModule/back.vue
rename to web/src/management/pages/edit/modules/generalModule/BackPanel.vue
index 578e5034..e6559fe7 100644
--- a/web/src/management/pages/edit/modules/generalModule/back.vue
+++ b/web/src/management/pages/edit/modules/generalModule/BackPanel.vue
@@ -4,16 +4,18 @@
     <span>返回</span>
   </div>
 </template>
+
 <script>
 export default {
-  name: 'back',
+  name: 'BackPanel',
   methods: {
     onBack() {
-      this.$router.go(-1);
-    },
-  },
-};
+      window.open('/survey', '_self')
+    }
+  }
+}
 </script>
+
 <style lang="scss" scoped>
 .back-btn {
   height: 100%;
diff --git a/web/src/management/pages/edit/modules/generalModule/pageNav.vue b/web/src/management/pages/edit/modules/generalModule/NavPanel.vue
similarity index 66%
rename from web/src/management/pages/edit/modules/generalModule/pageNav.vue
rename to web/src/management/pages/edit/modules/generalModule/NavPanel.vue
index 5cfef8b5..a62a6695 100644
--- a/web/src/management/pages/edit/modules/generalModule/pageNav.vue
+++ b/web/src/management/pages/edit/modules/generalModule/NavPanel.vue
@@ -1,31 +1,34 @@
 <template>
   <div class="content">
-    <template v-for="btnItem in btnList">
+    <template v-for="btnItem in btnList" :key="btnItem.key">
       <router-link
-        class="navbar-btn"
-        :key="btnItem.key"
         :to="{ name: btnItem.router }"
-        tag="div"
         replace
-        v-slot="{ href, route, navigate, isActive, isExactActive }"
+        v-slot="{ href, navigate, isActive, isExactActive }"
         custom
       >
-      <div
-        :class="[
-          (isActive && btnItem.key === 'skinsettings'  ) || isExactActive ? 'router-link-exact-active' : '']"
-      >
-        <i class="iconfont" :class="[btnItem.icon]"></i>
-        <a :href="href" @click="navigate"><span>{{ btnItem.text }}</span></a>
-        <!-- <span>{{ btnItem.text }}</span> -->
-      </div>
-        
+        <div
+          :class="[
+            'navbar-btn',
+            (isActive && btnItem.key === 'skinsettings') || isExactActive
+              ? 'router-link-exact-active'
+              : ''
+          ]"
+        >
+          <i class="iconfont" :class="[btnItem.icon]"></i>
+          <a :href="href" @click="navigate"
+            ><span>{{ btnItem.text }}</span></a
+          >
+          <!-- <span>{{ btnItem.text }}</span> -->
+        </div>
       </router-link>
     </template>
   </div>
 </template>
+
 <script>
 export default {
-  name: 'pageNav',
+  name: 'NavPanel',
   props: {},
   data() {
     return {
@@ -35,27 +38,28 @@ export default {
           text: '问卷编辑',
           router: 'QuestionEditIndex',
           key: 'edit',
-          next: true,
+          next: true
         },
         {
           icon: 'icon-wenjuanshezhi',
           text: '问卷设置',
           router: 'QuestionEditSetting',
           key: 'settings',
-          next: true,
+          next: true
         },
         {
           icon: 'icon-yangshishezhi',
           text: '皮肤设置',
           router: 'QuestionSkinSetting',
           key: 'skinsettings',
-          next: true,
-        },
-      ],
-    };
-  },
-};
+          next: true
+        }
+      ]
+    }
+  }
+}
 </script>
+
 <style lang="scss" scoped>
 .content {
   display: flex;
@@ -67,7 +71,7 @@ export default {
     color: #92949d;
     padding: 0 20px;
     cursor: pointer;
-    a{
+    a {
       color: inherit;
     }
     &.router-link-exact-active {
diff --git a/web/src/management/pages/edit/modules/generalModule/pageTitle.vue b/web/src/management/pages/edit/modules/generalModule/TitlePanel.vue
similarity index 83%
rename from web/src/management/pages/edit/modules/generalModule/pageTitle.vue
rename to web/src/management/pages/edit/modules/generalModule/TitlePanel.vue
index 15a131b4..26e30ef7 100644
--- a/web/src/management/pages/edit/modules/generalModule/pageTitle.vue
+++ b/web/src/management/pages/edit/modules/generalModule/TitlePanel.vue
@@ -3,17 +3,19 @@
     {{ title }}
   </div>
 </template>
+
 <script>
 export default {
-  name: 'pageTitle',
+  name: 'TitlePanel',
   props: {
     title: {
       type: String,
-      default: '',
-    },
-  },
-};
+      default: ''
+    }
+  }
+}
 </script>
+
 <style lang="scss" scoped>
 .title {
   overflow: hidden;
diff --git a/web/src/management/pages/edit/modules/questionModule/catalogPanel.vue b/web/src/management/pages/edit/modules/questionModule/CatalogPanel.vue
similarity index 58%
rename from web/src/management/pages/edit/modules/questionModule/catalogPanel.vue
rename to web/src/management/pages/edit/modules/questionModule/CatalogPanel.vue
index de4bd201..c09d02f6 100644
--- a/web/src/management/pages/edit/modules/questionModule/catalogPanel.vue
+++ b/web/src/management/pages/edit/modules/questionModule/CatalogPanel.vue
@@ -1,43 +1,44 @@
 <template>
   <el-tabs type="border-card" v-model="tabSelected" class="tab-box">
     <el-tab-pane label="题型选择">
-      <type-list />
+      <TypeList />
     </el-tab-pane>
     <el-tab-pane label="题目大纲">
-      <catalog />
+      <QuestionCatalog />
     </el-tab-pane>
   </el-tabs>
 </template>
 
 <script>
-import typeList from './components/typeList';
-import catalog from './components/catalog.vue';
+import TypeList from './components/TypeList.vue'
+import QuestionCatalog from './components/QuestionCatalog.vue'
 
 export default {
-  name: 'EditLeftTabPanel',
+  name: 'CatalogPanel',
   data() {
     return {
-      tabSelected: '0',
-    };
+      tabSelected: '0'
+    }
   },
   components: {
-    typeList,
-    catalog,
+    TypeList,
+    QuestionCatalog
   },
-  methods: {},
-};
+  methods: {}
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .tab-box {
   width: 300px;
   height: 100%;
   box-shadow: none;
   border: none;
   overflow-y: auto;
-  ::v-deep .el-tabs__nav {
+  :deep(.el-tabs__nav) {
     width: 100%;
   }
-  ::v-deep .el-tabs__item {
+  :deep(.el-tabs__item) {
     width: 50%;
     text-align: center;
   }
diff --git a/web/src/management/pages/edit/modules/questionModule/previewPanel.vue b/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue
similarity index 58%
rename from web/src/management/pages/edit/modules/questionModule/previewPanel.vue
rename to web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue
index 2a8c1728..6479d35f 100644
--- a/web/src/management/pages/edit/modules/questionModule/previewPanel.vue
+++ b/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue
@@ -2,13 +2,13 @@
   <div class="main-operation" @click="onMainClick" ref="mainOperation">
     <div class="operation-wrapper" ref="operationWrapper">
       <div class="box content" ref="box">
-        <mainTitle
+        <MainTitle
           :bannerConf="bannerConf"
           :is-selected="currentEditOne === 'mainTitle'"
           @select="onSelectEditOne('mainTitle')"
           @change="handleChange"
         />
-        <materialGroup
+        <MaterialGroup
           :current-edit-one="parseInt(currentEditOne)"
           :questionDataList="questionDataList"
           @select="onSelectEditOne"
@@ -16,7 +16,7 @@
           @changeSeq="onQuestionOperation"
           ref="materialGroup"
         />
-        <submit
+        <SubmitButton
           :submit-conf="submitConf"
           :skin-conf="skinConf"
           :is-selected="currentEditOne === 'submit'"
@@ -28,25 +28,23 @@
 </template>
 
 <script>
-import materialGroup from '@/management/pages/edit/components/materialGroup.vue';
-import mainTitle from '@/management/pages/edit/components/mainTitle.vue';
-import submit from '@/management/pages/edit/components/submit.vue';
-import logo from '@/management/pages/edit/components/logo.vue';
-import { mapState, mapGetters } from 'vuex';
-import { get as _get } from 'lodash-es';
+import MaterialGroup from '@/management/pages/edit/components/MaterialGroup.vue'
+import MainTitle from '@/management/pages/edit/components/MainTitle.vue'
+import SubmitButton from '@/management/pages/edit/components/SubmitButton.vue'
+import { mapState, mapGetters } from 'vuex'
+import { get as _get } from 'lodash-es'
 
 export default {
-  name: 'mainOperation',
+  name: 'PreviewPanel',
   components: {
-    mainTitle,
-    submit,
-    logo,
-    materialGroup,
+    MainTitle,
+    SubmitButton,
+    MaterialGroup
   },
   data() {
     return {
-      isAnimating: false,
-    };
+      isAnimating: false
+    }
   },
   computed: {
     ...mapState({
@@ -55,99 +53,91 @@ export default {
       skinConf: (state) => _get(state, 'edit.schema.skinConf'),
       bottomConf: (state) => _get(state, 'edit.schema.bottomConf'),
       questionDataList: (state) => _get(state, 'edit.schema.questionDataList'),
-      currentEditOne: (state) => _get(state, 'edit.currentEditOne'),
+      currentEditOne: (state) => _get(state, 'edit.currentEditOne')
     }),
     ...mapGetters({
-      currentEditKey: 'edit/currentEditKey',
+      currentEditKey: 'edit/currentEditKey'
     }),
     autoScrollData() {
       return {
         currentEditOne: this.currentEditOne,
-        len: this.questionDataList.length,
-      };
-    },
+        len: this.questionDataList.length
+      }
+    }
   },
   watch: {
     skinConf: {
-      handler (skinConf)  {
-        const { themeConf, backgroundConf, contentConf} = skinConf
-        const root = document.documentElement;
-        if(themeConf?.color) {
-          root.style.setProperty('--primary-color', themeConf?.color); // 设置主题颜色
+      handler(skinConf) {
+        const { themeConf, backgroundConf, contentConf } = skinConf
+        const root = document.documentElement
+        if (themeConf?.color) {
+          root.style.setProperty('--primary-color', themeConf?.color) // 设置主题颜色
         }
-        if(backgroundConf?.color) {
-          root.style.setProperty('--primary-background-color', backgroundConf?.color); // 设置背景颜色
+        if (backgroundConf?.color) {
+          root.style.setProperty('--primary-background-color', backgroundConf?.color) // 设置背景颜色
         }
-        if(contentConf?.opacity) {
-          root.style.setProperty('--opacity', contentConf?.opacity/100); // 设置全局透明度
+        if (contentConf?.opacity) {
+          root.style.setProperty('--opacity', contentConf?.opacity / 100) // 设置全局透明度
         }
       },
       immediate: true, // 立即触发回调函数
       deep: true
     },
     autoScrollData(newVal) {
-      const { currentEditOne } = newVal;
+      const { currentEditOne } = newVal
       if (typeof currentEditOne === 'number') {
         setTimeout(() => {
-          // if (this.isAnimating) {
-          //   return;
-          // }
-          const field = this.questionDataList?.[currentEditOne]?.field;
+          const field = this.questionDataList?.[currentEditOne]?.field
           if (field) {
-            const questionComp =
-              this.$refs.materialGroup.getQuestionRefByField(field);
-            if (questionComp && questionComp.$el) {
-              questionComp.$el.scrollIntoView({
-                behavior: 'smooth',
-              });
-              // this.isAnimating = true;
-              // const maxScrollTop = this.$refs.box.clientHeight - this.$refs.operationWrapper.clientHeight
-              // const targetVal = Math.min(questionComp.$el.offsetTop - this.$refs.operationWrapper.clientHeight / 2, maxScrollTop)
-              // this.animate(this.$refs.operationWrapper, 'scrollTop', targetVal)
+            const questionModule = this.$refs.materialGroup.getQuestionRefByField(field)
+            if (questionModule && questionModule.$el) {
+              questionModule.$el.scrollIntoView({
+                behavior: 'smooth'
+              })
             }
           }
-        }, 0);
+        }, 0)
       }
-    },
+    }
   },
   methods: {
     animate(dom, property, targetValue) {
-      const origin = dom[property];
-      const subVal = targetValue - origin;
+      const origin = dom[property]
+      const subVal = targetValue - origin
 
-      const flag = subVal < 0 ? -1 : 1;
+      const flag = subVal < 0 ? -1 : 1
 
-      const step = flag * 50;
+      const step = flag * 50
 
-      const totalCount = Math.floor(subVal / step) + 1;
+      const totalCount = Math.floor(subVal / step) + 1
 
-      let runCount = 0;
+      let runCount = 0
       const run = () => {
-        dom[property] += step;
-        runCount++;
+        dom[property] += step
+        runCount++
         if (runCount < totalCount) {
-          requestAnimationFrame(run);
+          requestAnimationFrame(run)
         } else {
-          this.isAnimating = false;
+          this.isAnimating = false
         }
-      };
+      }
 
-      requestAnimationFrame(run);
+      requestAnimationFrame(run)
     },
     async onSelectEditOne(currentEditOne) {
-      this.$store.commit('edit/setCurrentEditOne', currentEditOne);
+      this.$store.commit('edit/setCurrentEditOne', currentEditOne)
     },
     handleChange(data) {
       if (this.currentEditOne === null) {
-        return;
+        return
       }
-      const { key, value } = data;
-      const resultKey = `${this.currentEditKey}.${key}`;
-      this.$store.dispatch('edit/changeSchema', { key: resultKey, value });
+      const { key, value } = data
+      const resultKey = `${this.currentEditKey}.${key}`
+      this.$store.dispatch('edit/changeSchema', { key: resultKey, value })
     },
     onMainClick(e) {
       if (e.target === this.$refs.mainOperation) {
-        this.$store.commit('edit/setCurrentEditOne', null);
+        this.$store.commit('edit/setCurrentEditOne', null)
       }
     },
     onQuestionOperation(data) {
@@ -155,21 +145,21 @@ export default {
         case 'move':
           this.$store.dispatch('edit/moveQuestion', {
             index: data.index,
-            range: data.range,
-          });
-          break;
+            range: data.range
+          })
+          break
         case 'delete':
-          this.$store.dispatch('edit/deleteQuestion', { index: data.index });
-          break;
+          this.$store.dispatch('edit/deleteQuestion', { index: data.index })
+          break
         case 'copy':
-          this.$store.dispatch('edit/copyQuestion', { index: data.index });
-          break;
+          this.$store.dispatch('edit/copyQuestion', { index: data.index })
+          break
         default:
-          break;
+          break
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/management/pages/edit/modules/questionModule/setterPanel.vue b/web/src/management/pages/edit/modules/questionModule/SetterPanel.vue
similarity index 74%
rename from web/src/management/pages/edit/modules/questionModule/setterPanel.vue
rename to web/src/management/pages/edit/modules/questionModule/SetterPanel.vue
index 8b90bbe9..b51bd650 100644
--- a/web/src/management/pages/edit/modules/questionModule/setterPanel.vue
+++ b/web/src/management/pages/edit/modules/questionModule/SetterPanel.vue
@@ -7,7 +7,7 @@
     </div>
     <template v-else>
       <div class="setter-title">{{ currentEditMeta?.title || '' }}</div>
-      <setterField
+      <SetterField
         class="question-config-form"
         :form-config-list="formConfigList"
         :module-config="moduleConfig"
@@ -18,40 +18,41 @@
 </template>
 
 <script>
-import setterField from '@/management/pages/edit/components/setterField.vue';
-import { mapGetters } from 'vuex';
+import SetterField from '@/management/pages/edit/components/SetterField.vue'
+import { mapGetters } from 'vuex'
 
 export default {
-  name: 'setterWrapper',
+  name: 'SetterPanel',
   data() {
     return {
-      tabSelected: '0',
-    };
+      tabSelected: '0'
+    }
   },
   computed: {
     currentEditOne() {
-      return this.$store.state?.edit?.currentEditOne;
+      return this.$store.state?.edit?.currentEditOne
     },
     ...mapGetters({
       formConfigList: 'edit/formConfigList',
       moduleConfig: 'edit/moduleConfig',
       currentEditKey: 'edit/currentEditKey',
-      currentEditMeta: 'edit/currentEditMeta',
-    }),
+      currentEditMeta: 'edit/currentEditMeta'
+    })
   },
   components: {
-    setterField,
+    SetterField
   },
   methods: {
     onFormChange(data) {
-      const { key, value } = data;
-      const resultKey = `${this.currentEditKey}.${key}`;
-      this.$store.dispatch('edit/changeSchema', { key: resultKey, value });
-    },
-  },
-};
+      const { key, value } = data
+      const resultKey = `${this.currentEditKey}.${key}`
+      this.$store.dispatch('edit/changeSchema', { key: resultKey, value })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .setter-wrapper {
   width: 360px;
   height: 100%;
@@ -88,6 +89,6 @@ export default {
 }
 
 .question-config-form {
-  padding: 30px 20px 50px 20px!important;
+  padding: 30px 20px 50px 20px;
 }
 </style>
diff --git a/web/src/management/pages/edit/modules/questionModule/components/catalogItem.vue b/web/src/management/pages/edit/modules/questionModule/components/CatalogItem.vue
similarity index 85%
rename from web/src/management/pages/edit/modules/questionModule/components/catalogItem.vue
rename to web/src/management/pages/edit/modules/questionModule/components/CatalogItem.vue
index a84d3004..9ab8947e 100644
--- a/web/src/management/pages/edit/modules/questionModule/components/catalogItem.vue
+++ b/web/src/management/pages/edit/modules/questionModule/components/CatalogItem.vue
@@ -10,34 +10,35 @@
 
 <script>
 export default {
-  name: 'QuestionCatalogItem',
+  name: 'CatalogItem',
   data() {
-    return {};
+    return {}
   },
   computed: {},
   props: {
     title: {
       type: String,
-      default: '',
+      default: ''
     },
     indexNumber: {
       type: [String, Number],
-      default: '',
+      default: ''
     },
     showIndex: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
   components: {},
   methods: {
     onSelect() {
-      this.$emit('select');
-    },
-  },
-};
+      this.$emit('select')
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .question-catalog-item {
   position: relative;
   border-top: 1px solid #ebebeb;
diff --git a/web/src/management/pages/edit/modules/questionModule/components/catalog.vue b/web/src/management/pages/edit/modules/questionModule/components/QuestionCatalog.vue
similarity index 55%
rename from web/src/management/pages/edit/modules/questionModule/components/catalog.vue
rename to web/src/management/pages/edit/modules/questionModule/components/QuestionCatalog.vue
index 06d48780..3aff6f08 100644
--- a/web/src/management/pages/edit/modules/questionModule/components/catalog.vue
+++ b/web/src/management/pages/edit/modules/questionModule/components/QuestionCatalog.vue
@@ -1,12 +1,17 @@
 <template>
   <div class="question-catalog-wrapper">
-    <draggable :list="renderData" :options="dragOptions" @end="onDragEnd">
-      <template v-for="(catalogItem, index) in renderData">
-        <catalogItem
-          :key="catalogItem.field"
-          :title="catalogItem.title"
-          :indexNumber="catalogItem.indexNumber"
-          :showIndex="catalogItem.showIndex"
+    <draggable
+      :list="renderData"
+      @end="onDragEnd"
+      itemKey="field"
+      handle=".draggHandle"
+      host-class="catalog-item-ghost"
+    >
+      <template #item="{ element, index }">
+        <CatalogItem
+          :title="element.title"
+          :indexNumber="element.indexNumber"
+          :showIndex="element.showIndex"
           @select="onSelect(index)"
         />
       </template>
@@ -15,48 +20,43 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable';
-import catalogItem from './catalogItem';
-import { filterQuestionPreviewData } from '@/management/utils/index';
+import draggable from 'vuedraggable'
+import CatalogItem from './CatalogItem.vue'
+import { filterQuestionPreviewData } from '@/management/utils/index'
 
 export default {
   name: 'QuestionCatalog',
   data() {
-    return {
-      dragOptions: {
-        handle: '.draggHandle',
-        ghostClass: 'catalog-item-ghost',
-        dragClass: 'catalog-item-dragging',
-      },
-    };
+    return {}
   },
   computed: {
     questionDataList() {
-      return this.$store.state.edit.schema.questionDataList;
+      return this.$store.state.edit.schema.questionDataList
     },
     renderData() {
-      return filterQuestionPreviewData(this.questionDataList) || [];
-    },
+      return filterQuestionPreviewData(this.questionDataList) || []
+    }
   },
   components: {
     draggable,
-    catalogItem,
+    CatalogItem
   },
   methods: {
     onDragEnd(data) {
-      const { newIndex, oldIndex } = data;
+      const { newIndex, oldIndex } = data
       this.$store.dispatch('edit/moveQuestion', {
         index: oldIndex,
-        range: newIndex - oldIndex,
-      });
+        range: newIndex - oldIndex
+      })
     },
     onSelect(index) {
-      this.$store.commit('edit/setCurrentEditOne', index);
-    },
-  },
-};
+      this.$store.commit('edit/setCurrentEditOne', index)
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .question-catalog-wrapper {
   padding-bottom: 400px; // 考试题有个上拉框会盖住，改成和题型一致的
   .catelog-first-page {
diff --git a/web/src/management/pages/edit/modules/questionModule/components/TypeList.vue b/web/src/management/pages/edit/modules/questionModule/components/TypeList.vue
new file mode 100644
index 00000000..652feb7f
--- /dev/null
+++ b/web/src/management/pages/edit/modules/questionModule/components/TypeList.vue
@@ -0,0 +1,131 @@
+<template>
+  <el-collapse class="question-type-wrapper" v-model="activeNames">
+    <el-collapse-item
+      v-for="(item, index) of questionMenuConfig"
+      :title="item.title"
+      :name="index"
+      :key="index"
+    >
+      <div class="questiontype-list">
+        <el-popover
+          v-for="(item, index) in item.questionList"
+          :key="item.type"
+          placement="right"
+          trigger="hover"
+          :popper-class="'qtype-popper-' + (index % 3)"
+          :popper-style="{ width: '369px' }"
+        >
+          <img :src="item.snapshot" width="345px" />
+          <template #reference>
+            <div :key="item.type" class="qtopic-item" @click="onQuestionType({ type: item.type })">
+              <i class="iconfont" :class="['icon-' + item.icon]"></i>
+              <p class="text">{{ item.title }}</p>
+            </div>
+          </template>
+        </el-popover>
+      </div>
+    </el-collapse-item>
+  </el-collapse>
+</template>
+
+<script setup>
+import questionLoader from '@/materials/questions/questionLoader'
+
+import questionMenuConfig, { questionTypeList } from '@/management/config/questionMenuConfig'
+import { getQuestionByType } from '@/management/utils/index'
+import { useStore } from 'vuex'
+import { get as _get } from 'lodash-es'
+import { computed, ref } from 'vue'
+
+const activeNames = ref([0, 1])
+
+const store = useStore()
+const questionDataList = computed(() => _get(store, 'state.edit.schema.questionDataList'))
+
+questionLoader.init({
+  typeList: questionTypeList.map((item) => item.type)
+})
+
+const onQuestionType = ({ type }) => {
+  const fields = questionDataList.value.map((item) => item.field)
+  const currentEditOne = _get(store, 'state.edit.currentEditOne')
+  const index =
+    typeof currentEditOne === 'number' ? currentEditOne + 1 : questionDataList.value.length
+  const newQuestion = getQuestionByType(type, fields)
+  newQuestion.title = newQuestion.title = `标题${index + 1}`
+  if (type === 'vote') {
+    newQuestion.innerType = 'radio'
+  }
+  store.dispatch('edit/addQuestion', { question: newQuestion, index })
+  store.commit('edit/setCurrentEditOne', index)
+}
+</script>
+
+<style lang="scss" scoped>
+.question-type-wrapper {
+  padding: 0 20px;
+  border: none;
+
+  :deep(.el-collapse-item__header) {
+    font-size: 16px;
+    font-weight: bold;
+    color: #4a4c5b;
+  }
+}
+
+.questiontype-list {
+  // height: 100%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  // padding-bottom: 25px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  border-top: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .qtopic-item {
+    height: 77px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    border: 1px solid $disable-color;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: $primary-color-light;
+      border: 1px solid $primary-color;
+    }
+
+    .text {
+      font-size: 12px;
+    }
+  }
+
+  .iconfont::before {
+    font-size: 21px;
+    color: $font-color-title;
+  }
+}
+</style>
+
+<style lang="scss">
+.qtype-popper-0 {
+  transform: translateX(183px);
+}
+
+.qtype-popper-1 {
+  transform: translateX(106px);
+}
+
+.qtype-popper-2 {
+  transform: translateX(30px);
+}
+</style>
diff --git a/web/src/management/pages/edit/modules/questionModule/components/typeList.vue b/web/src/management/pages/edit/modules/questionModule/components/typeList.vue
deleted file mode 100644
index f5673f63..00000000
--- a/web/src/management/pages/edit/modules/questionModule/components/typeList.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-  <el-collapse class="question-type-wrapper" v-model="activeNames">
-    <el-collapse-item
-      v-for="(item, index) of questionMenuConfig"
-      :title="item.title"
-      :name="index"
-      :key="index"
-    >
-      <draggable
-        class="questiontype-list item-wrapper"
-        :options="{
-          element: 'li',
-          sort: false,
-          group: { name: 'previewList', pull: 'clone', put: false },
-        }"
-      >
-        <el-popover
-          v-for="(item, index) in item.questionList"
-          :key="item.type"
-          placement="right"
-          trigger="hover"
-          :popper-class="'qtype-popper-' + (index % 3)"
-        >
-          <img :src="item.snapshot" width="345px" />
-          <div
-            slot="reference"
-            :key="item.type"
-            class="qtopic-item"
-            @click="onQuestionType({ type: item.type })"
-          >
-            <i class="iconfont" :class="['icon-' + item.icon]"></i>
-            <p class="text">{{ item.title }}</p>
-          </div>
-        </el-popover>
-      </draggable>
-    </el-collapse-item>
-  </el-collapse>
-</template>
-
-<script>
-import questionLoader from '@/materials/questions/questionLoader';
-import draggable from 'vuedraggable';
-
-import questionMenuConfig, {
-  questionTypeList,
-} from '@/management/config/questionMenuConfig';
-import { getQuestionByType } from '@/management/utils/index';
-import { mapState, mapActions } from 'vuex';
-import { get as _get } from 'lodash-es';
-
-export default {
-  name: 'QuestionTypeList',
-  components: {
-    draggable,
-  },
-  data() {
-    return {
-      activeNames: [0, 1],
-      questionMenuConfig,
-    };
-  },
-  computed: {
-    ...mapState({
-      questionDataList: (state) => _get(state, 'edit.schema.questionDataList'),
-      currentEditOne: (state) => _get(state, 'edit.currentEditOne'),
-    }),
-  },
-  async created() {
-    await questionLoader.init({
-      typeList: questionTypeList.map((item) => item.type),
-    });
-  },
-  methods: {
-    ...mapActions({
-      addQuestion: 'edit/addQuestion',
-    }),
-    onQuestionType({ type }) {
-      const questionDataList = this.questionDataList || [];
-      const fields = questionDataList.map((item) => item.field);
-      const currentEditOne = this.currentEditOne;
-      const index =
-        typeof currentEditOne === 'number'
-          ? currentEditOne + 1
-          : questionDataList.length;
-      const newQuestion = getQuestionByType(type, fields);
-      newQuestion.title = newQuestion.title = `标题${index + 1}`;
-      if (type === 'vote') {
-        newQuestion.innerType = 'radio';
-      }
-      this.addQuestion({ question: newQuestion, index });
-      this.$store.commit('edit/setCurrentEditOne', index);
-    },
-  },
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-.question-type-wrapper {
-  padding: 0 20px;
-  border: none;
-  ::v-deep .el-collapse-item__header {
-    font-size: 16px;
-    font-weight: bold;
-    color: #4a4c5b;
-  }
-}
-
-.questiontype-list {
-  // height: 100%;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  // padding-bottom: 25px;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  border-top: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .qtopic-item {
-    height: 77px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-size: 12px;
-    border: 1px solid $disable-color;
-    cursor: pointer;
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: $primary-color-light;
-      border: 1px solid $primary-color;
-    }
-
-    .text {
-      font-size: 12px;
-    }
-  }
-
-  .iconfont::before {
-    font-size: 21px;
-    color: $font-color-title;
-  }
-}
-</style>
-<style lang="scss" rel="stylesheet/scss">
-.qtype-popper-0 {
-  transform: translateX(183px);
-}
-
-.qtype-popper-1 {
-  transform: translateX(106px);
-}
-
-.qtype-popper-2 {
-  transform: translateX(30px);
-}
-</style>
diff --git a/web/src/management/pages/edit/modules/settingModule/setting.vue b/web/src/management/pages/edit/modules/settingModule/SettingPanel.vue
similarity index 63%
rename from web/src/management/pages/edit/modules/settingModule/setting.vue
rename to web/src/management/pages/edit/modules/settingModule/SettingPanel.vue
index c1a90060..025bcf5b 100644
--- a/web/src/management/pages/edit/modules/settingModule/setting.vue
+++ b/web/src/management/pages/edit/modules/settingModule/SettingPanel.vue
@@ -10,22 +10,19 @@
           </div>
           <el-form
             class="question-config-form"
-            size="small"
             label-position="left"
             label-width="200px"
-            @submit.native.prevent
+            @submit.prevent
           >
             <template v-for="(item, index) in form.formList">
               <FormItem
+                v-if="item.type && !item.hidden && Boolean(register[item.type])"
                 :key="index"
-                v-if="
-                  item.type && !item.hidden && Boolean(registerd[item.type])
-                "
                 :form-config="item"
                 :style="item.style"
               >
                 <Component
-                  v-if="Boolean(registerd[item.type])"
+                  v-if="Boolean(register[item.type])"
                   :is="item.type"
                   :module-config="form.dataConfig"
                   :form-config="item"
@@ -39,106 +36,95 @@
     </div>
   </div>
 </template>
+
 <script>
-import baseConfig from './config/baseConfig';
-import baseFormConfig from './config/baseFormConfig';
-import FormItem from '@/materials/setters/widgets/FormItem.vue';
-import setterLoader from '@/materials/setters/setterLoader';
-import {
-  cloneDeep as _cloneDeep,
-  isArray as _isArray,
-  get as _get,
-} from 'lodash-es';
+import baseConfig from './config/baseConfig'
+import baseFormConfig from './config/baseFormConfig'
+import FormItem from '@/materials/setters/widgets/FormItem.vue'
+import setterLoader from '@/materials/setters/setterLoader'
+import { cloneDeep as _cloneDeep, isArray as _isArray, get as _get } from 'lodash-es'
 
 export default {
-  name: 'QuestionConfig',
+  name: 'SettingPanel',
   components: {
-    FormItem,
+    FormItem
   },
   data() {
     return {
       formConfigList: [],
-      registerd: {},
-    };
+      register: {}
+    }
   },
   methods: {
     onFormChange(data) {
       this.$store.dispatch('edit/changeSchema', {
         key: data.key,
-        value: data.value,
-      });
-    },
+        value: data.value
+      })
+    }
   },
   computed: {
     allSetters() {
-      const formList = this.formConfigList.map((item) => item.formList).flat();
+      const formList = this.formConfigList.map((item) => item.formList).flat()
       const typeList = formList.map((item) => ({
         type: item.type,
-        path: item.path || item.type,
-      }));
-      return typeList;
+        path: item.path || item.type
+      }))
+
+      return typeList
     },
     renderData() {
       // todo: 1、给formConfig组装value；2、新增dataConfig字段
-      const formConfigList = _cloneDeep(this.formConfigList);
+      const formConfigList = _cloneDeep(this.formConfigList)
 
       return formConfigList.map((form) => {
-        const dataConfig = {};
+        const dataConfig = {}
         for (const formItem of form.formList) {
-          const formKey = formItem.key ? formItem.key : formItem.keys;
-          let formValue;
+          const formKey = formItem.key ? formItem.key : formItem.keys
+          let formValue
           if (_isArray(formKey)) {
-            formValue = [];
+            formValue = []
             for (const key of formKey) {
-              const val = _get(
-                this.$store.state.edit.schema,
-                key,
-                formItem.value
-              );
-              formValue.push(val);
-              dataConfig[key] = val;
+              const val = _get(this.$store.state.edit.schema, key, formItem.value)
+              formValue.push(val)
+              dataConfig[key] = val
             }
           } else {
-            formValue = _get(
-              this.$store.state.edit.schema,
-              formKey,
-              formItem.value
-            );
-            dataConfig[formKey] = formValue;
+            formValue = _get(this.$store.state.edit.schema, formKey, formItem.value)
+            dataConfig[formKey] = formValue
           }
-          formItem.value = formValue;
+          formItem.value = formValue
         }
-        form.dataConfig = dataConfig;
-        return form;
-      });
-    },
+        form.dataConfig = dataConfig
+        return form
+      })
+    }
   },
   async created() {
     this.formConfigList = baseConfig.map((item) => {
       return {
         ...item,
-        formList: item.formList
-          .map((key) => baseFormConfig[key])
-          .filter((config) => !!config),
-      };
-    });
+        formList: item.formList.map((key) => baseFormConfig[key]).filter((config) => !!config)
+      }
+    })
 
-    const comps = await setterLoader.loadComponents(this.allSetters);
+    const comps = await setterLoader.loadComponents(this.allSetters)
     for (const comp of comps) {
       if (!comp) {
-        continue;
+        continue
       }
-      const { type, component, err } = comp;
+      const { type, component, err } = comp
       if (!err) {
-        const componentName = component.name;
-        this.$options.components[componentName] = component;
-        this.$set(this.registerd, type, componentName);
+        const componentName = component.name
+        this.$options.components[componentName] = component
+        this.register[type] = componentName
       }
     }
-  },
-};
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .question-config {
   width: 100%;
   min-width: 1080px;
@@ -177,7 +163,7 @@ export default {
             &:after {
               position: absolute;
               left: 0;
-              top: 41px;
+              top: 42px;
               width: 100%;
               height: 3px;
               background-color: $primary-color;
@@ -191,7 +177,7 @@ export default {
           padding-top: 15px;
           padding-right: 1rem;
 
-          ::v-deep .star-form.star-form_horizon .star-form-label {
+          :deep(.star-form.star-form_horizon .star-form-label) {
             display: inline-block;
             width: 3.4rem;
             text-align: left;
diff --git a/web/src/management/pages/edit/modules/settingModule/components/banner.vue b/web/src/management/pages/edit/modules/settingModule/components/BannerContent.vue
similarity index 85%
rename from web/src/management/pages/edit/modules/settingModule/components/banner.vue
rename to web/src/management/pages/edit/modules/settingModule/components/BannerContent.vue
index 79d470cf..255f1095 100644
--- a/web/src/management/pages/edit/modules/settingModule/components/banner.vue
+++ b/web/src/management/pages/edit/modules/settingModule/components/BannerContent.vue
@@ -20,13 +20,14 @@
     </div>
   </div>
 </template>
+
 <script>
-import { get as _get } from 'lodash-es';
+import { get as _get } from 'lodash-es'
 
 export default {
-  name: 'banner',
+  name: 'BannerContent',
   data() {
-    return {};
+    return {}
   },
   props: {
     bannerConf: {
@@ -34,23 +35,24 @@ export default {
       default: () => {}
     },
     isSelected: {
-      type: Boolean,
-    },
+      type: Boolean
+    }
   },
   computed: {
     bgImage() {
-      return _get(this.bannerConf, 'bannerConfig.bgImage', '');
-    },
+      return _get(this.bannerConf, 'bannerConfig.bgImage', '')
+    }
   },
   methods: {
     handleClick() {
-      this.$emit('select');
-    },
+      this.$emit('select')
+    }
   },
-  components: {},
-};
+  components: {}
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .banner-preview {
   width: 100%;
 }
@@ -61,6 +63,7 @@ export default {
   .banner {
     width: 100%;
     display: flex;
+    justify-content: center;
 
     img {
       width: 100%;
@@ -107,7 +110,7 @@ export default {
     background-color: #f6f7f9;
     box-shadow: 0 0 5px #dedede;
 
-    ::v-deep .w-e-text-container {
+    :deep(.w-e-text-container) {
       background-color: #f6f7f9;
     }
   }
diff --git a/web/src/management/pages/edit/modules/settingModule/components/overTime.vue b/web/src/management/pages/edit/modules/settingModule/components/OverTime.vue
similarity index 74%
rename from web/src/management/pages/edit/modules/settingModule/components/overTime.vue
rename to web/src/management/pages/edit/modules/settingModule/components/OverTime.vue
index 178f0235..83118c08 100755
--- a/web/src/management/pages/edit/modules/settingModule/components/overTime.vue
+++ b/web/src/management/pages/edit/modules/settingModule/components/OverTime.vue
@@ -4,25 +4,25 @@
     <p class="title-msg" v-safe-html="resultText"></p>
   </div>
 </template>
+
 <script>
 export default {
   name: 'OverTime',
   props: {
     moduleConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   computed: {
     resultText() {
-      return (
-        this.moduleConfig?.submitConf?.msgContent?.msg_9001 || '问卷已过期'
-      );
-    },
-  },
-};
+      return this.moduleConfig?.submitConf?.msgContent?.msg_9001 || '问卷已过期'
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .over-time {
   text-align: center;
   margin-bottom: 5.5rem;
diff --git a/web/src/management/pages/edit/modules/settingModule/components/success.vue b/web/src/management/pages/edit/modules/settingModule/components/SuccessContent.vue
similarity index 88%
rename from web/src/management/pages/edit/modules/settingModule/components/success.vue
rename to web/src/management/pages/edit/modules/settingModule/components/SuccessContent.vue
index c978b10e..439f308e 100644
--- a/web/src/management/pages/edit/modules/settingModule/components/success.vue
+++ b/web/src/management/pages/edit/modules/settingModule/components/SuccessContent.vue
@@ -9,23 +9,25 @@
     </div>
   </div>
 </template>
+
 <script>
 export default {
-  name: 'Success',
+  name: 'SuccessContent',
   props: {
     moduleConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   computed: {
     successText() {
-      return this.moduleConfig?.submitConf?.msgContent?.msg_200 || '';
-    },
-  },
-};
+      return this.moduleConfig?.submitConf?.msgContent?.msg_200 || ''
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 /*成功页面跳转全屏展示浮层*/
 .suc-page {
   padding: 0;
@@ -53,7 +55,7 @@ export default {
   margin-bottom: 0.4rem;
   font-size: 0.36rem;
   color: #666;
-  ::v-deep * {
+  :deep(*) {
     font-size: 0.36rem;
   }
 }
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 726b370f..bdeab24a 100644
--- a/web/src/management/pages/edit/modules/settingModule/config/baseConfig.js
+++ b/web/src/management/pages/edit/modules/settingModule/config/baseConfig.js
@@ -2,11 +2,11 @@ export default [
   {
     title: '时间配置',
     key: 'timeConfig',
-    formList: ['base_effectTime', 'limit_answerTime'],
+    formList: ['base_effectTime', 'limit_answerTime']
   },
   {
     title: '提交限制',
     key: 'limitConfig',
-    formList: ['limit_tLimit'],
-  },
-];
+    formList: ['limit_tLimit']
+  }
+]
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 db8bab33..59fed0a1 100644
--- a/web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js
+++ b/web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js
@@ -4,79 +4,22 @@ export default {
     keys: ['baseConf.begTime', 'baseConf.endTime'],
     label: '答题有效期',
     type: 'QuestionTime',
-    placeholder: 'yyyy-MM-dd hh:mm:ss',
-    // direction: 'horizon',
+    placeholder: 'yyyy-MM-dd hh:mm:ss'
   },
-  // base_showVote: {
-  //   key: 'baseConf.showVoteProcess',
-  //   label: '投票配置',
-  //   type: 'Select',
-  //   direction: 'horizon',
-  //   tip: '是否实时展示投票进度',
-  //   placement: 'top',
-  //   options: [
-  //     {
-  //       label: '实时展示投票进度',
-  //       value: 'allow',
-  //     },
-  //     {
-  //       label: '提交后才可以查看进度',
-  //       value: 'notallow',
-  //     },
-  //     {
-  //       label: '不展示投票进度',
-  //       value: 'never',
-  //     },
-  //   ],
-  // },
-  // base_shortestTime: {
-  //   key: 'baseConf.shortestTime',
-  //   label: '最短答题时长(分钟)',
-  //   type: 'InputNumber',
-  //   direction: 'horizon',
-  //   tip: '问卷仅可在所设置的时间之后才能进行提交，0为无限制',
-  //   tipShow: true,
-  //   placement: 'top',
-  // },
   limit_tLimit: {
     key: 'baseConf.tLimit',
     label: '问卷回收总数',
     type: 'InputNumber',
-    // direction: 'horizon',
     tip: '0为无限制，此功能用于限制该问卷总提交的数据量。当数据量达到限额时，该问卷将不能继续提交',
     tipShow: true,
     placement: 'top',
-    min: 0,
+    min: 0
   },
   limit_answerTime: {
     keys: ['baseConf.answerBegTime', 'baseConf.answerEndTime'],
     label: '答题时段',
     tip: '问卷仅在指定时间段内可填写',
     type: 'QuestionTimeHour',
-    // direction: 'horizon',
-    placement: 'top',
-  },
-  // skin_skinColor: {
-  //   key: 'skinConf.skinColor',
-  //   label: '页面主题颜色',
-  //   type: 'Select',
-  //   direction: 'horizon',
-  //   options: [
-  //     {
-  //       label: '橘色主题',
-  //       value: '#ff8a01',
-  //     },
-  //     {
-  //       label: '深灰蓝主题',
-  //       value: '#4a4c5b',
-  //     },
-  //   ],
-  // },
-  // skin_inputBgColor: {
-  //   key: 'skinConf.inputBgColor',
-  //   label: '输入框底色',
-  //   type: 'ColorInput',
-  //   direction: 'horizon',
-  //   maxlength: 6,
-  // },
-};
+    placement: 'top'
+  }
+}
diff --git a/web/src/management/pages/edit/modules/settingModule/config/statusConfig.js b/web/src/management/pages/edit/modules/settingModule/config/statusConfig.js
index 07b61d0b..520732a0 100644
--- a/web/src/management/pages/edit/modules/settingModule/config/statusConfig.js
+++ b/web/src/management/pages/edit/modules/settingModule/config/statusConfig.js
@@ -7,9 +7,9 @@ export default {
       placeholder: '提交成功',
       value: '提交成功',
       labelStyle: {
-        'font-weight': 'bold',
-      },
-    },
+        'font-weight': 'bold'
+      }
+    }
   ],
   OverTime: [
     {
@@ -19,8 +19,8 @@ export default {
       placeholder: '问卷已过期',
       value: '问卷已过期',
       labelStyle: {
-        'font-weight': 'bold',
-      },
-    },
-  ],
-};
+        'font-weight': 'bold'
+      }
+    }
+  ]
+}
diff --git a/web/src/management/pages/edit/modules/settingModule/enum.js b/web/src/management/pages/edit/modules/settingModule/enum.js
index 0c8b418b..31f86c81 100644
--- a/web/src/management/pages/edit/modules/settingModule/enum.js
+++ b/web/src/management/pages/edit/modules/settingModule/enum.js
@@ -1,4 +1,4 @@
 export const EDIT_STATUS_MAP = {
   SUCCESS: 'Success',
-  OVERTIME: 'OverTime',
-};
+  OVERTIME: 'OverTime'
+}
diff --git a/web/src/management/pages/edit/modules/settingModule/result/catalogPanel.vue b/web/src/management/pages/edit/modules/settingModule/result/CatalogPanel.vue
similarity index 82%
rename from web/src/management/pages/edit/modules/settingModule/result/catalogPanel.vue
rename to web/src/management/pages/edit/modules/settingModule/result/CatalogPanel.vue
index cbd80fd1..4aa2125b 100644
--- a/web/src/management/pages/edit/modules/settingModule/result/catalogPanel.vue
+++ b/web/src/management/pages/edit/modules/settingModule/result/CatalogPanel.vue
@@ -16,40 +16,42 @@
     </div>
   </div>
 </template>
+
 <script>
-import { mapMutations } from 'vuex';
-import { EDIT_STATUS_MAP } from '../enum';
+import { mapMutations } from 'vuex'
+import { EDIT_STATUS_MAP } from '../enum'
 
 export default {
-  name: 'resultConfigList',
+  name: 'CatalogPanel',
   data() {
     return {
       statusList: [
         {
           type: EDIT_STATUS_MAP.SUCCESS,
           title: '提交成功',
-          previewImg: '/imgs/icons/success.webp',
+          previewImg: '/imgs/icons/success.webp'
         },
         {
           type: EDIT_STATUS_MAP.OVERTIME,
           title: '问卷过期',
-          previewImg: '/imgs/icons/overtime.webp',
-        },
-      ],
-    };
+          previewImg: '/imgs/icons/overtime.webp'
+        }
+      ]
+    }
   },
   computed: {},
   methods: {
     ...mapMutations({
-      changeStatusPreview: 'edit/changeStatusPreview',
+      changeStatusPreview: 'edit/changeStatusPreview'
     }),
     filterDisabledStatus(data) {
-      this.changeStatusPreview(data);
-    },
-  },
-};
+      this.changeStatusPreview(data)
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .tab-box {
   width: 300px;
   height: 100%;
diff --git a/web/src/management/pages/edit/modules/settingModule/result/previewPanel.vue b/web/src/management/pages/edit/modules/settingModule/result/PreviewPanel.vue
similarity index 58%
rename from web/src/management/pages/edit/modules/settingModule/result/previewPanel.vue
rename to web/src/management/pages/edit/modules/settingModule/result/PreviewPanel.vue
index 8cf41327..ff6c34dc 100644
--- a/web/src/management/pages/edit/modules/settingModule/result/previewPanel.vue
+++ b/web/src/management/pages/edit/modules/settingModule/result/PreviewPanel.vue
@@ -2,46 +2,44 @@
   <div class="result-config-preview">
     <div class="result-page-wrap">
       <div class="result-page">
-        <component
-          :is="currentEditStatus"
-          :key="currentEditStatus"
-          :module-config="moduleConfig"
-        />
+        <component :is="currentEditStatus" :key="currentEditStatus" :module-config="moduleConfig" />
       </div>
-    </div>  
+    </div>
   </div>
 </template>
+
 <script>
-import { mapState } from 'vuex';
-import success from '../components/success';
-import overTime from '../components/overTime';
-import { EDIT_STATUS_MAP } from '../enum';
-import { get as _get } from 'lodash-es';
+import { mapState } from 'vuex'
+import SuccessContent from '../components/SuccessContent.vue'
+import OverTime from '../components/OverTime.vue'
+import { EDIT_STATUS_MAP } from '../enum'
+import { get as _get } from 'lodash-es'
 
 export default {
-  name: 'ResultConfigPreivew',
+  name: 'PreviewPanel',
   props: {},
   data() {
-    return {};
+    return {}
   },
   computed: {
     ...mapState({
       currentEditStatus: (state) => state.edit.currentEditStatus,
-      submitConf: (state) => _get(state, 'edit.schema.submitConf'),
+      submitConf: (state) => _get(state, 'edit.schema.submitConf')
     }),
     moduleConfig() {
       return {
-        submitConf: this.submitConf,
-      };
-    },
+        submitConf: this.submitConf
+      }
+    }
   },
   components: {
-    [EDIT_STATUS_MAP.SUCCESS]: success,
-    [EDIT_STATUS_MAP.OVERTIME]: overTime,
-  },
-};
+    [EDIT_STATUS_MAP.SUCCESS]: SuccessContent,
+    [EDIT_STATUS_MAP.OVERTIME]: OverTime
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .result-config-preview {
   width: 100%;
   height: 100%;
@@ -62,8 +60,8 @@ export default {
   overflow-y: auto;
   background-color: var(--primary-background-color);
   padding: 0 0.3rem;
-  .result-page{
-    background: rgba(255, 255, 255, var(--opacity)); 
+  .result-page {
+    background: rgba(255, 255, 255, var(--opacity));
     display: flex;
     flex-direction: column;
     height: 100%;
diff --git a/web/src/management/pages/edit/modules/settingModule/result/setterPanel.vue b/web/src/management/pages/edit/modules/settingModule/result/SetterPanel.vue
similarity index 55%
rename from web/src/management/pages/edit/modules/settingModule/result/setterPanel.vue
rename to web/src/management/pages/edit/modules/settingModule/result/SetterPanel.vue
index 466b92b5..b2435875 100644
--- a/web/src/management/pages/edit/modules/settingModule/result/setterPanel.vue
+++ b/web/src/management/pages/edit/modules/settingModule/result/SetterPanel.vue
@@ -3,21 +3,15 @@
     <div class="setter-title">
       {{ currentEditText }}
     </div>
-    <el-form
-      class="question-config-form"
-      size="small"
-      label-position="top"
-      @submit.native.prevent
-    >
-      <template v-for="(item, index) in formFieldData">
+    <el-form class="question-config-form" label-position="top" @submit.prevent>
+      <template v-for="(item, index) in formFieldData" :key="index">
         <FormItem
-          :key="index"
-          v-if="item.type && !item.hidden && Boolean(registerd[item.type])"
+          v-if="item.type && !item.hidden && Boolean(register[item.type])"
           :form-config="item"
           :style="item.style"
         >
           <Component
-            v-if="Boolean(registerd[item.type])"
+            v-if="Boolean(register[item.type])"
             :is="item.type"
             :module-config="moduleConfig"
             :form-config="item"
@@ -28,115 +22,117 @@
     </el-form>
   </div>
 </template>
+
 <script>
-import FormItem from '@/materials/setters/widgets/FormItem.vue';
-import setterLoader from '@/materials/setters/setterLoader';
-import statusConfig from '../config/statusConfig';
-import { mapState } from 'vuex';
-import { get as _get, pick as _pick } from 'lodash-es';
+import FormItem from '@/materials/setters/widgets/FormItem.vue'
+import setterLoader from '@/materials/setters/setterLoader'
+import statusConfig from '../config/statusConfig'
+import { mapState } from 'vuex'
+import { get as _get, pick as _pick } from 'lodash-es'
 
 const textMap = {
   Success: '提交成功页面配置',
-  OverTime: '问卷过期页面配置',
-};
+  OverTime: '问卷过期页面配置'
+}
 
 export default {
-  name: 'StatusEditForm',
+  name: 'SetterPanel',
   components: {
-    FormItem,
+    FormItem
   },
   data() {
     return {
-      registerd: {},
-    };
+      register: {}
+    }
   },
   computed: {
     formFieldData() {
-      const formList = statusConfig[this.currentEditStatus] || [];
+      const formList = statusConfig[this.currentEditStatus] || []
       return formList.map((item) => {
-        const value = _get(this.moduleConfig, item.key, item.value);
+        const value = _get(this.moduleConfig, item.key, item.value)
         return {
           ...item,
-          value,
-        };
-      });
+          value
+        }
+      })
     },
     currentEditText() {
-      return textMap[this.currentEditStatus] || '';
+      return textMap[this.currentEditStatus] || ''
     },
     ...mapState({
       currentEditStatus: (state) => state.edit.currentEditStatus,
-      submitConf: (state) => _get(state, 'edit.schema.submitConf'),
+      submitConf: (state) => _get(state, 'edit.schema.submitConf')
     }),
     moduleConfig() {
-      return this.submitConf;
-    },
+      return this.submitConf
+    }
   },
   watch: {
     formFieldData: {
       immediate: true,
       handler(newVal) {
         if (Array.isArray(newVal)) {
-          this.handleComponentRegister(newVal);
+          this.handleComponentRegister(newVal)
         }
-      },
-    },
+      }
+    }
   },
   methods: {
     async handleComponentRegister(formFieldData) {
-      const setters = formFieldData.map((item) => item.type);
-      const settersSet = new Set(setters);
-      const settersArr = Array.from(settersSet);
+      const setters = formFieldData.map((item) => item.type)
+      const settersSet = new Set(setters)
+      const settersArr = Array.from(settersSet)
       const allSetters = settersArr.map((item) => {
         return {
           type: item,
-          path: item,
-        };
-      });
+          path: item
+        }
+      })
       try {
-        const comps = await setterLoader.loadComponents(allSetters);
+        const comps = await setterLoader.loadComponents(allSetters)
         for (const comp of comps) {
           if (!comp) {
-            continue;
+            continue
           }
-          const { type, component, err } = comp;
+          const { type, component, err } = comp
           if (!err) {
-            const componentName = component.name;
-            this.$options.components[componentName] = component;
-            this.$set(this.registerd, type, componentName);
+            const componentName = component.name
+            this.$options.components[componentName] = component
+            this.register[type] = componentName
           }
         }
       } catch (err) {
-        console.error(err);
+        console.error(err)
       }
     },
     getValueFromModuleConfig(item) {
-      const { key, keys } = item;
-      const moduleConfig = this.moduleConfig;
-      let result = item;
+      const { key, keys } = item
+      const moduleConfig = this.moduleConfig
+      let result = item
       if (key) {
         result = {
           ...item,
-          value: _get(moduleConfig, key, item.value),
-        };
+          value: _get(moduleConfig, key, item.value)
+        }
       }
       if (keys) {
         result = {
           ...item,
-          value: _pick(moduleConfig, keys),
-        };
+          value: _pick(moduleConfig, keys)
+        }
       }
-      return result;
+      return result
     },
     onFormChange(data) {
-      const { key, value } = data;
-      const resultKey = `submitConf.${key}`;
-      this.$store.dispatch('edit/changeSchema', { key: resultKey, value });
-    },
-  },
-};
+      const { key, value } = data
+      const resultKey = `submitConf.${key}`
+      this.$store.dispatch('edit/changeSchema', { key: resultKey, value })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .question-edit-form {
   width: 360px;
   height: 100%;
diff --git a/web/src/management/pages/edit/modules/settingModule/skin/catalogPanel.vue b/web/src/management/pages/edit/modules/settingModule/skin/CatalogPanel.vue
similarity index 65%
rename from web/src/management/pages/edit/modules/settingModule/skin/catalogPanel.vue
rename to web/src/management/pages/edit/modules/settingModule/skin/CatalogPanel.vue
index ad3f76eb..cc789e9b 100644
--- a/web/src/management/pages/edit/modules/settingModule/skin/catalogPanel.vue
+++ b/web/src/management/pages/edit/modules/settingModule/skin/CatalogPanel.vue
@@ -2,14 +2,15 @@
   <div class="tab-box">
     <div class="title">主题设置</div>
     <div class="content">
-      <div  class="tag-list">
-        <el-tag 
+      <div class="tag-list">
+        <el-tag
           v-for="item in groupList"
-          :class="[groupName === item.value ? 'current' : '', 'tag']"  
-          type = 'info' 
+          :class="[groupName === item.value ? 'current' : '', 'tag']"
+          type="info"
           :key="item.value"
-          @click="() => changeGroup(item.value)">
-          {{item.label}}
+          @click="() => changeGroup(item.value)"
+        >
+          {{ item.label }}
         </el-tag>
       </div>
       <div class="banner-list-wrapper">
@@ -18,17 +19,10 @@
           v-for="(banner, bannerIndex) in currentBannerList"
           :key="bannerIndex"
         >
-          <img
-            class="banner-img"
-            :src="banner.src"
-            loading="lazy"
-            @click="changePreset(banner)"
-          />
+          <img class="banner-img" :src="banner.src" loading="lazy" @click="changePreset(banner)" />
         </div>
       </div>
     </div>
-    
-   
   </div>
 </template>
 <script>
@@ -36,16 +30,16 @@ import { mapActions } from 'vuex'
 
 import skinPresets from '@/management/config/skinPresets.js'
 export default {
-  name: 'catalogPanel',
+  name: 'CatalogPanel',
   data() {
     return {
       skinPresets: [],
-      groupName: 'temp',
-    };
+      groupName: 'temp'
+    }
   },
   computed: {
     bannerList() {
-      return this.$store?.state?.bannerList || [];
+      return this.$store?.state?.bannerList || []
     },
     groupList() {
       return Object.keys(this.bannerList).map((key) => {
@@ -55,20 +49,22 @@ export default {
         }
       })
     },
-    currentBannerList () {
-      const arr =  Object.keys(this.bannerList).map((key) => {
-        return  this.bannerList[key]
-      }).map(data => {
-        return data.list.map(item => {
-          item.group = data.key;
-          return item;
+    currentBannerList() {
+      const arr = Object.keys(this.bannerList)
+        .map((key) => {
+          return this.bannerList[key]
         })
-      })
-      const  allbanner =  arr.reduce((acc, curr) => {
-        return acc.concat(curr);
-      }, []);
-      return allbanner.filter(item => {
-        if(this.groupName === "temp") {
+        .map((data) => {
+          return data.list.map((item) => {
+            item.group = data.key
+            return item
+          })
+        })
+      const allbanner = arr.reduce((acc, curr) => {
+        return acc.concat(curr)
+      }, [])
+      return allbanner.filter((item) => {
+        if (this.groupName === 'temp') {
           return true
         } else {
           return item.group === this.groupName
@@ -76,34 +72,31 @@ export default {
       })
     }
   },
-  mounted() {
-    
-  },
+  mounted() {},
   methods: {
     ...mapActions({
-      changeThemePreset: 'edit/changeThemePreset',
+      changeThemePreset: 'edit/changeThemePreset'
     }),
     changeGroup(value) {
       this.groupName = value
     },
-  changePreset(banner) {
+    changePreset(banner) {
       const name = banner.group + '-' + banner.title
       let presets = {
         'bannerConf.bannerConfig.bgImage': banner.src,
         'skinConf.themeConf.color': '#FAA600',
-        'skinConf.backgroundConf.color': '#fff',
+        'skinConf.backgroundConf.color': '#fff'
       }
-      if(skinPresets[name]){
+      if (skinPresets[name]) {
         presets = Object.assign(presets, skinPresets[name])
       }
-       
-      
+
       this.changeThemePreset(presets)
     }
-  },
-};
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .tab-box {
   width: 300px;
   height: 100%;
@@ -120,16 +113,16 @@ export default {
     // background: #f9fafc;
     border-bottom: 1px solid #edeffc;
   }
-  .content{ 
+  .content {
     padding: 12px;
   }
-  .tag-list{
+  .tag-list {
     display: flex;
     flex-wrap: wrap;
-    .tag{
+    .tag {
       margin: 5px 8px;
       cursor: pointer;
-      &.current{
+      &.current {
         color: $primary-color;
         background-color: $primary-bg-color;
       }
@@ -153,18 +146,18 @@ export default {
       }
     }
 
-    ::v-deep .el-collapse-item__header {
+    :deep(.el-collapse-item__header) {
       font-size: 16px;
       color: $font-color-title;
       border-bottom: none;
     }
 
-    ::v-deep .el-collapse-item__arrow.is-active {
+    :deep(.el-collapse-item__arrow.is-active) {
       right: 0;
     }
-    ::v-deep .el-collapse-item__arrow {
+    :deep(.el-collapse-item__arrow) {
       right: 0;
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/management/pages/edit/modules/settingModule/skin/previewPanel.vue b/web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue
similarity index 56%
rename from web/src/management/pages/edit/modules/settingModule/skin/previewPanel.vue
rename to web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue
index 6ea54b15..d0bda6df 100644
--- a/web/src/management/pages/edit/modules/settingModule/skin/previewPanel.vue
+++ b/web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue
@@ -3,27 +3,16 @@
     <div class="operation-wrapper">
       <div class="box" ref="box">
         <div class="mask"></div>
-        <banner
-          :bannerConf="bannerConf"
-        />
+        <BannerContent :bannerConf="bannerConf" />
         <div class="content">
-          <mainTitle
-            :isSelected="false"
-            :bannerConf="bannerConf"
-          />
-          <materialGroup
-            :questionDataList="questionDataList"
-            ref="materialGroup"
-          />
-          <submit
+          <MainTitle :isSelected="false" :bannerConf="bannerConf" />
+          <MaterialGroup :questionDataList="questionDataList" ref="MaterialGroup" />
+          <SubmitButton
             :submit-conf="submitConf"
             :skin-conf="skinConf"
             :is-selected="currentEditOne === 'submit'"
           />
-          <logo
-            :logo-conf="bottomConf"
-            :is-selected="currentEditOne === 'logo'"
-          />
+          <LogoPreview :logo-conf="bottomConf" :is-selected="currentEditOne === 'logo'" />
         </div>
       </div>
     </div>
@@ -31,27 +20,27 @@
 </template>
 
 <script>
-import materialGroup from '@/management/pages/edit/components/materialGroup.vue';
-import banner from '../components/banner.vue';
-import mainTitle from '@/management/pages/edit/components/mainTitle.vue';
-import submit from '@/management/pages/edit/components/submit.vue';
-import logo from '@/management/pages/edit/components/logo.vue';
-import { mapState, mapGetters } from 'vuex';
-import { get as _get } from 'lodash-es';
+import MaterialGroup from '@/management/pages/edit/components/MaterialGroup.vue'
+import BannerContent from '../components/BannerContent.vue'
+import MainTitle from '@/management/pages/edit/components/MainTitle.vue'
+import SubmitButton from '@/management/pages/edit/components/SubmitButton.vue'
+import LogoPreview from '@/management/pages/edit/components/LogoPreview.vue'
+import { mapState, mapGetters } from 'vuex'
+import { get as _get } from 'lodash-es'
 
 export default {
-  name: 'previewPanel',
+  name: 'PreviewPanel',
   components: {
-    banner,
-    mainTitle,
-    submit,
-    logo,
-    materialGroup,
+    BannerContent,
+    MainTitle,
+    SubmitButton,
+    LogoPreview,
+    MaterialGroup
   },
   data() {
     return {
-      isAnimating: false,
-    };
+      isAnimating: false
+    }
   },
   computed: {
     ...mapState({
@@ -60,25 +49,25 @@ export default {
       bottomConf: (state) => _get(state, 'edit.schema.bottomConf'),
       skinConf: (state) => _get(state, 'edit.schema.skinConf'),
       questionDataList: (state) => _get(state, 'edit.schema.questionDataList'),
-      currentEditOne: (state) => _get(state, 'edit.currentEditOne'),
+      currentEditOne: (state) => _get(state, 'edit.currentEditOne')
     }),
     ...mapGetters({
-      currentEditKey: 'edit/currentEditKey',
-    }),
+      currentEditKey: 'edit/currentEditKey'
+    })
   },
   watch: {
     skinConf: {
-      handler (skinConf)  {
-        const { themeConf, backgroundConf, contentConf} = skinConf
-        const root = document.documentElement;
-        if(themeConf?.color) {
-          root.style.setProperty('--primary-color', themeConf?.color); // 设置主题颜色
+      handler(skinConf) {
+        const { themeConf, backgroundConf, contentConf } = skinConf
+        const root = document.documentElement
+        if (themeConf?.color) {
+          root.style.setProperty('--primary-color', themeConf?.color) // 设置主题颜色
         }
-        if(backgroundConf?.color) {
-          root.style.setProperty('--primary-background-color', backgroundConf?.color); // 设置背景颜色
+        if (backgroundConf?.color) {
+          root.style.setProperty('--primary-background-color', backgroundConf?.color) // 设置背景颜色
         }
-        if(contentConf?.opacity.toString()) {
-          root.style.setProperty('--opacity', contentConf?.opacity/100); // 设置全局透明度
+        if (contentConf?.opacity.toString()) {
+          root.style.setProperty('--opacity', contentConf?.opacity / 100) // 设置全局透明度
         }
       },
       immediate: true, // 立即触发回调函数
@@ -87,30 +76,30 @@ export default {
   },
   methods: {
     animate(dom, property, targetValue) {
-      const origin = dom[property];
-      const subVal = targetValue - origin;
+      const origin = dom[property]
+      const subVal = targetValue - origin
 
-      const flag = subVal < 0 ? -1 : 1;
+      const flag = subVal < 0 ? -1 : 1
 
-      const step = flag * 50;
+      const step = flag * 50
 
-      const totalCount = Math.floor(subVal / step) + 1;
+      const totalCount = Math.floor(subVal / step) + 1
 
-      let runCount = 0;
+      let runCount = 0
       const run = () => {
-        dom[property] += step;
-        runCount++;
+        dom[property] += step
+        runCount++
         if (runCount < totalCount) {
-          requestAnimationFrame(run);
+          requestAnimationFrame(run)
         } else {
-          this.isAnimating = false;
+          this.isAnimating = false
         }
-      };
+      }
 
-      requestAnimationFrame(run);
-    },
-  },
-};
+      requestAnimationFrame(run)
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -143,7 +132,7 @@ export default {
   scrollbar-width: none;
   width: 90%;
   -ms-overflow-style: none;
-  
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -151,7 +140,7 @@ export default {
   .box {
     background-color: var(--primary-background-color);
     position: relative;
-    .mask{
+    .mask {
       position: absolute;
       top: 0;
       bottom: 0;
diff --git a/web/src/management/pages/edit/modules/settingModule/skin/setterPanel.vue b/web/src/management/pages/edit/modules/settingModule/skin/SetterPanel.vue
similarity index 67%
rename from web/src/management/pages/edit/modules/settingModule/skin/setterPanel.vue
rename to web/src/management/pages/edit/modules/settingModule/skin/SetterPanel.vue
index 6b0bd46f..a740ca64 100644
--- a/web/src/management/pages/edit/modules/settingModule/skin/setterPanel.vue
+++ b/web/src/management/pages/edit/modules/settingModule/skin/SetterPanel.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="setter-wrapper">
-    <div class="setter-title">
-      样式设置
-    </div>
+    <div class="setter-title">样式设置</div>
     <div class="setter-content">
       <el-collapse v-model="collapse">
         <el-collapse-item
@@ -11,51 +9,54 @@
           :title="collapse.name"
           :name="collapse.key"
         >
-          <setterField
+          <SetterField
             :form-config-list="collapse.formConfigList"
             :module-config="_get(schema, collapse.key, {})"
-            @form-change="(key) => { onFormChange(key, collapse.key) }"
-          /> 
+            @form-change="
+              (key) => {
+                onFormChange(key, collapse.key)
+              }
+            "
+          />
         </el-collapse-item>
       </el-collapse>
     </div>
-     <!-- -->
   </div>
 </template>
 <script>
-import skinConfig from '@/management/config/setterConfig/skinConfig';
-import setterField from '@/management/pages/edit/components/setterField.vue';
-import { mapState, mapGetters } from 'vuex';
+import skinConfig from '@/management/config/setterConfig/skinConfig'
+import SetterField from '@/management/pages/edit/components/SetterField.vue'
+import { mapState } from 'vuex'
 import { get as _get } from 'lodash-es'
 export default {
-  name: 'setterPanel',
+  name: 'SetterPanel',
   components: {
-    setterField,
+    SetterField
   },
   data() {
     return {
       collapse: '',
-      skinConfig,
-    };
+      skinConfig
+    }
   },
   computed: {
     ...mapState({
       skinConf: (state) => _get(state, 'edit.schema.skinConf'),
-      schema: (state) => _get(state, 'edit.schema'),
-    }),
+      schema: (state) => _get(state, 'edit.schema')
+    })
   },
   methods: {
     _get,
-    onFormChange(data,collapse) {
-      const { key, value } = data;
+    onFormChange(data, collapse) {
+      const { key, value } = data
       const currentEditKey = `${collapse}`
-      const resultKey = `${currentEditKey}.${key}`;
-      this.$store.dispatch('edit/changeSchema', { key: resultKey, value });
-    },
-  },
-};
+      const resultKey = `${currentEditKey}.${key}`
+      this.$store.dispatch('edit/changeSchema', { key: resultKey, value })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .setter-wrapper {
   width: 360px;
   height: 100%;
@@ -73,26 +74,25 @@ export default {
   // background: #f9fafc;
   border-bottom: 1px solid #edeffc;
 }
-.setter-content{
+.setter-content {
   padding: 10px 20px;
   .el-collapse {
     border: none;
-    ::v-deep .el-collapse-item__header{
+    :deep(.el-collapse-item__header) {
       font-size: 14px;
       color: #606266;
       font-weight: bold;
       border: none;
     }
-    ::v-deep .el-collapse-item__wrap{
+    :deep(.el-collapse-item__wrap) {
       border: none;
-      .el-collapse-item__content{
-        padding-bottom: 0px!important;
+      .el-collapse-item__content {
+        padding-bottom: 0px !important;
       }
-
     }
   }
-  .config-form{
-    padding: 0!important;
+  .config-form {
+    padding: 0 !important;
   }
 }
 .no-select-question {
diff --git a/web/src/management/pages/edit/pages/EditPage.vue b/web/src/management/pages/edit/pages/EditPage.vue
new file mode 100644
index 00000000..9c7849e0
--- /dev/null
+++ b/web/src/management/pages/edit/pages/EditPage.vue
@@ -0,0 +1,36 @@
+<template>
+  <commonTemplate>
+    <template #left>
+      <CatalogPanel></CatalogPanel>
+    </template>
+    <template #center>
+      <PreviewPanel></PreviewPanel>
+    </template>
+    <template #right>
+      <SetterPanel></SetterPanel>
+    </template>
+  </commonTemplate>
+</template>
+
+<script>
+import commonTemplate from '../components/CommonTemplate.vue'
+import CatalogPanel from '../modules/questionModule/CatalogPanel.vue'
+import PreviewPanel from '../modules/questionModule/PreviewPanel.vue'
+import SetterPanel from '../modules/questionModule/SetterPanel.vue'
+
+export default {
+  name: 'EditPage',
+  components: {
+    commonTemplate,
+    CatalogPanel,
+    PreviewPanel,
+    SetterPanel
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  border-bottom: 1px solid #e7e9eb;
+}
+</style>
diff --git a/web/src/management/pages/edit/pages/setting.vue b/web/src/management/pages/edit/pages/SettingPage.vue
similarity index 56%
rename from web/src/management/pages/edit/pages/setting.vue
rename to web/src/management/pages/edit/pages/SettingPage.vue
index c38529e4..eceba5e5 100644
--- a/web/src/management/pages/edit/pages/setting.vue
+++ b/web/src/management/pages/edit/pages/SettingPage.vue
@@ -1,17 +1,19 @@
 <template>
   <div class="setting-page">
-    <setting></setting>
+    <SettingPanel></SettingPanel>
   </div>
 </template>
+
 <script>
-import setting from '../modules/settingModule/setting.vue';
+import SettingPanel from '../modules/settingModule/SettingPanel.vue'
 export default {
-  name: 'questionSettingPage',
+  name: 'SettingPage',
   components: {
-    setting,
-  },
-};
+    SettingPanel
+  }
+}
 </script>
+
 <style lang="scss" scoped>
 .setting-page {
   width: 100%;
diff --git a/web/src/management/pages/edit/pages/edit.vue b/web/src/management/pages/edit/pages/edit.vue
deleted file mode 100644
index f7ac519d..00000000
--- a/web/src/management/pages/edit/pages/edit.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <commonTemplate>
-    <catalogPanel slot="left"></catalogPanel>
-    <previewPanel slot="center"></previewPanel>
-    <setterPanel slot="right"></setterPanel>
-  </commonTemplate>
-</template>
-<script>
-import commonTemplate from '../components/commonTemplate.vue';
-import catalogPanel from '../modules/questionModule/catalogPanel.vue';
-import previewPanel from '../modules/questionModule/previewPanel.vue';
-import setterPanel from '../modules/questionModule/setterPanel.vue';
-
-export default {
-  name: 'editIndex',
-  components: {
-    commonTemplate,
-    catalogPanel,
-    previewPanel,
-    setterPanel,
-  },
-};
-</script>
-<style lang="scss" scoped>
-.navbar {
-  border-bottom: 1px solid #e7e9eb;
-}
-</style>
diff --git a/web/src/management/pages/edit/pages/skin/ContentPage.vue b/web/src/management/pages/edit/pages/skin/ContentPage.vue
new file mode 100644
index 00000000..cc646c24
--- /dev/null
+++ b/web/src/management/pages/edit/pages/skin/ContentPage.vue
@@ -0,0 +1,37 @@
+<template>
+  <commonTemplate>
+    <template #left>
+      <CatalogPanel />
+    </template>
+    <template #center>
+      <PreviewPanel />
+    </template>
+    <template #right>
+      <SetterPanel />
+    </template>
+  </commonTemplate>
+</template>
+<script>
+import commonTemplate from '../../components/CommonTemplate.vue'
+import CatalogPanel from '../../modules/settingModule/skin/CatalogPanel.vue'
+import PreviewPanel from '../../modules/settingModule/skin/PreviewPanel.vue'
+import SetterPanel from '../../modules/settingModule/skin/SetterPanel.vue'
+
+export default {
+  name: 'ContentPage',
+  components: {
+    commonTemplate,
+    CatalogPanel,
+    PreviewPanel,
+    SetterPanel
+  },
+  created() {
+    this.$store.dispatch('getBannerData')
+  }
+}
+</script>
+<style lang="scss" scoped>
+.navbar {
+  border-bottom: 1px solid #e7e9eb;
+}
+</style>
diff --git a/web/src/management/pages/edit/pages/skin/ResultPage.vue b/web/src/management/pages/edit/pages/skin/ResultPage.vue
new file mode 100644
index 00000000..b7c2d11d
--- /dev/null
+++ b/web/src/management/pages/edit/pages/skin/ResultPage.vue
@@ -0,0 +1,30 @@
+<template>
+  <commonTemplate>
+    <template #left>
+      <ResultCatalog />
+    </template>
+    <template #center>
+      <ResultPreview />
+    </template>
+    <template #right>
+      <ResultSetter />
+    </template>
+  </commonTemplate>
+</template>
+
+<script>
+import commonTemplate from '../../components/CommonTemplate.vue'
+import ResultCatalog from '../../modules/settingModule/result/CatalogPanel.vue'
+import ResultPreview from '../../modules/settingModule/result/PreviewPanel.vue'
+import ResultSetter from '../../modules/settingModule/result/SetterPanel.vue'
+
+export default {
+  name: 'ResultPage',
+  components: {
+    commonTemplate,
+    ResultCatalog,
+    ResultPreview,
+    ResultSetter
+  }
+}
+</script>
diff --git a/web/src/management/pages/edit/pages/skin/content.vue b/web/src/management/pages/edit/pages/skin/content.vue
deleted file mode 100644
index fe396def..00000000
--- a/web/src/management/pages/edit/pages/skin/content.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <commonTemplate>
-      <catalogPanel slot="left"></catalogPanel>
-      <previewPanel slot="center"></previewPanel>
-      <setterPanel slot="right"></setterPanel>
-    </commonTemplate>
-  </template>
-  <script>
-  import commonTemplate from '../../components/commonTemplate.vue';
-  import catalogPanel from '../../modules/settingModule/skin/catalogPanel.vue';
-  import previewPanel from '../../modules/settingModule/skin/previewPanel.vue';
-  import setterPanel from '../../modules/settingModule/skin/setterPanel.vue';
-  
-  export default {
-    name: 'editIndex',
-    components: {
-      commonTemplate,
-      catalogPanel,
-      previewPanel,
-      setterPanel,
-    },
-    created() {
-      this.$store.dispatch('getBannerData');
-    }
-  };
-  </script>
-  <style lang="scss" scoped>
-  .navbar {
-    border-bottom: 1px solid #e7e9eb;
-  }
-  </style>
-  
\ No newline at end of file
diff --git a/web/src/management/pages/edit/pages/skin/index.vue b/web/src/management/pages/edit/pages/skin/index.vue
index c211d413..2b4df480 100644
--- a/web/src/management/pages/edit/pages/skin/index.vue
+++ b/web/src/management/pages/edit/pages/skin/index.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="skin-content">
-    <div class="navbar-tab"> 
-      <el-radio-group size="mini" style="margin-bottom: 30px;" v-model="activeRouter">
-        <el-radio-button :label="btnItem.router" :key="btnItem.router" v-for="btnItem in btnList" >
-          <span>{{ btnItem.text }}</span>
-        </el-radio-button>
+    <div class="navbar-tab">
+      <el-radio-group v-model="activeRouter">
+        <el-radio-button
+          v-for="btnItem in btnList"
+          :key="btnItem.router"
+          :label="btnItem.text"
+          :value="btnItem.router"
+        />
       </el-radio-group>
     </div>
     <router-view></router-view>
@@ -22,24 +25,24 @@ export default {
           text: '内容页',
           router: 'QuestionSkinSetting',
           key: 'skinsettings',
-          next: true,
+          next: true
         },
         {
           text: '结果页',
           router: 'QuestionEditResultConfig',
-          key: 'status',
-        },
-      ],
-    };
+          key: 'status'
+        }
+      ]
+    }
   },
   watch: {
     activeRouter: {
-      handler (val)  {
-        this.$router.push({ name: val})
+      handler(val) {
+        this.$router.push({ name: val })
       }
     }
-  },
-};
+  }
+}
 </script>
 <style lang="scss" scoped>
 .skin-content {
@@ -55,14 +58,14 @@ export default {
     top: 10px;
     cursor: pointer;
     z-index: 9999;
-    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner{
-        color:  $primary-color;
-        background-color: #fff!important;
-        // &:active{
-        //   color: $primary-color;
-        // }
+    :deep(.el-radio-button__original-radio + .el-radio-button__inner) {
+      font-size: 12px;
+      height: 28px;
+    }
+    :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+      color: $primary-color;
+      background-color: #fff;
     }
-    
   }
 }
 </style>
diff --git a/web/src/management/pages/edit/pages/skin/result.vue b/web/src/management/pages/edit/pages/skin/result.vue
deleted file mode 100644
index 60bd114d..00000000
--- a/web/src/management/pages/edit/pages/skin/result.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <commonTemplate>
-    <resultCatalog slot="left"></resultCatalog>
-    <resultPreview slot="center"></resultPreview>
-    <resultSetter slot="right"></resultSetter>
-  </commonTemplate>
-</template>
-<script>
-import commonTemplate from '../../components/commonTemplate.vue';
-import resultCatalog from '../../modules/settingModule/result/catalogPanel.vue';
-import resultPreview from '../../modules/settingModule/result/previewPanel.vue';
-import resultSetter from '../../modules/settingModule/result/setterPanel.vue';
-
-export default {
-  name: 'editIndex',
-  components: {
-    commonTemplate,
-    resultCatalog,
-    resultPreview,
-    resultSetter,
-  },
-};
-</script>
-<style lang="scss" scoped></style>
diff --git a/web/src/management/pages/list/components/baseList.vue b/web/src/management/pages/list/components/BaseList.vue
similarity index 63%
rename from web/src/management/pages/list/components/baseList.vue
rename to web/src/management/pages/list/components/BaseList.vue
index 884b8a9d..7b082ac3 100644
--- a/web/src/management/pages/list/components/baseList.vue
+++ b/web/src/management/pages/list/components/BaseList.vue
@@ -2,7 +2,7 @@
   <div class="tableview-root">
     <div class="filter-wrap">
       <div class="select">
-        <text-select
+        <TextSelect
           v-for="item in Object.keys(selectOptionsDict)"
           :key="item"
           :effect-fun="onSelectChange"
@@ -11,7 +11,7 @@
         />
       </div>
       <div class="search">
-        <text-button
+        <TextButton
           v-for="item in Object.keys(buttonOptionsDict)"
           :key="item"
           :effect-fun="onButtonChange"
@@ -20,16 +20,11 @@
           :icon="
             buttonOptionsDict[item].icons.find(
               (iconItem) => iconItem.effectValue === buttonValueMap[item]
-            ).name
+            ).icon
           "
-          size="mini"
-          type="text"
-        ></text-button>
-        <text-search
-          placeholder="请输入问卷标题"
-          :value="searchVal"
-          @search="onSearchText"
+          link
         />
+        <TextSearch placeholder="请输入问卷标题" :value="searchVal" @search="onSearchText" />
       </div>
     </div>
     <el-table
@@ -56,7 +51,7 @@
         :min-width="field.width || field.minWidth"
         class-name="link"
       >
-        <template slot-scope="scope">
+        <template #default="scope">
           <template v-if="field.comp">
             <component :is="field.comp" type="table" :value="scope.row" />
           </template>
@@ -67,7 +62,7 @@
       </el-table-column>
 
       <el-table-column label="操作" :width="300" class-name="table-options">
-        <template slot-scope="scope">
+        <template #default="scope">
           <ToolBar
             :data="scope.row"
             type="list"
@@ -91,10 +86,10 @@
     </div>
 
     <div v-else>
-      <empty :data="!searchVal ? noListDataConfig : noSearchDataConfig" />
+      <EmptyIndex :data="!searchVal ? noListDataConfig : noSearchDataConfig" />
     </div>
 
-    <modify-dialog
+    <ModifyDialog
       :type="modifyType"
       :visible="showModify"
       :question-info="questionInfo"
@@ -104,44 +99,43 @@
 </template>
 
 <script>
-import { get, map } from 'lodash-es';
-import moment from 'moment';
+import { get, map } from 'lodash-es'
+
+import { ElMessage, ElMessageBox } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+import 'element-plus/theme-chalk/src/message-box.scss'
+
+import moment from 'moment'
 // 引入中文
-import 'moment/locale/zh-cn';
+import 'moment/locale/zh-cn'
 // 设置中文
-moment.locale('zh-cn');
-import empty from '@/management/components/empty';
-import ModifyDialog from './modify';
-import Tag from './tag';
-import State from './state';
-import ToolBar from './toolBar';
-import TextSearch from './textSearch';
-import TextSelect from './textSelect';
-import TextButton from './textButton';
+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 { getSurveyList, deleteSurvey } from '@/management/api/survey'
+
+import ModifyDialog from './ModifyDialog.vue'
+import TagModule from './TagModule.vue'
+import StateModule from './StateModule.vue'
+import ToolBar from './ToolBar.vue'
+import TextSearch from './TextSearch.vue'
+import TextSelect from './TextSelect.vue'
+import TextButton from './TextButton.vue'
 import {
   fieldConfig,
   noListDataConfig,
   noSearchDataConfig,
   selectOptionsDict,
-  buttonOptionsDict,
-} from '../config';
-import { CODE_MAP } from '@/management/api/base';
-import { QOP_MAP } from '@/management/utils/constant';
-import { getSurveyList, deleteSurvey } from '@/management/api/survey';
+  buttonOptionsDict
+} from '../config'
 
 export default {
   name: 'BaseList',
   data() {
     return {
-      fields: [
-        'type',
-        'title',
-        'remark',
-        'owner',
-        'state',
-        'createDate',
-        'updateDate',
-      ],
+      fields: ['type', 'title', 'remark', 'owner', 'state', 'createDate', 'updateDate'],
       showModify: false,
       modifyType: '',
       loading: false,
@@ -155,29 +149,29 @@ export default {
       selectOptionsDict,
       selectValueMap: {
         surveyType: '',
-        'curStatus.status': '',
+        'curStatus.status': ''
       },
       buttonOptionsDict,
       buttonValueMap: {
         'curStatus.date': '',
-        createDate: -1,
-      },
-    };
+        createDate: -1
+      }
+    }
   },
   computed: {
     fieldList() {
       const fieldInfo = map(this.fields, (f) => {
-        return get(fieldConfig, f, null);
-      });
-      return fieldInfo;
+        return get(fieldConfig, f, null)
+      })
+      return fieldInfo
     },
     dataList() {
       return this.data.map((item) => {
         return {
           ...item,
-          'curStatus.date': item.curStatus.date,
-        };
-      });
+          'curStatus.date': item.curStatus.date
+        }
+      })
     },
     filter() {
       return [
@@ -187,193 +181,188 @@ export default {
             {
               field: 'title',
               value: this.searchVal,
-              comparator: '$regex',
-            },
-          ],
+              comparator: '$regex'
+            }
+          ]
         },
         {
           comparator: '',
           condition: [
             {
               field: 'curStatus.status',
-              value: this.selectValueMap['curStatus.status'],
-            },
-          ],
+              value: this.selectValueMap['curStatus.status']
+            }
+          ]
         },
         {
           comparator: '',
           condition: [
             {
               field: 'surveyType',
-              value: this.selectValueMap.surveyType,
-            },
-          ],
-        },
-      ];
+              value: this.selectValueMap.surveyType
+            }
+          ]
+        }
+      ]
     },
     order() {
       const formatOrder = Object.entries(this.buttonValueMap)
         .filter(([, effectValue]) => effectValue)
         .reduce((prev, item) => {
-          const [effectKey, effectValue] = item;
-          prev.push({ field: effectKey, value: effectValue });
-          return prev;
-        }, []);
-      return JSON.stringify(formatOrder);
-    },
+          const [effectKey, effectValue] = item
+          prev.push({ field: effectKey, value: effectValue })
+          return prev
+        }, [])
+      return JSON.stringify(formatOrder)
+    }
   },
   created() {
-    this.init();
+    this.init()
   },
   methods: {
     async init() {
-      this.loading = true;
+      this.loading = true
       try {
         const filter = JSON.stringify(
           this.filter.filter((item) => {
-            return item.condition[0].value;
+            return item.condition[0].value
           })
-        );
+        )
         const res = await getSurveyList({
           curPage: this.currentPage,
           filter,
-          order: this.order,
-        });
-        this.loading = false;
+          order: this.order
+        })
+        this.loading = false
         if (res.code === CODE_MAP.SUCCESS) {
-          this.total = res.data.count;
-          this.data = res.data.data;
+          this.total = res.data.count
+          this.data = res.data.data
         } else {
-          this.$message({
-            type: 'error',
-            message: res.errmsg,
-          });
+          ElMessage.error(res.errmsg)
         }
       } catch (error) {
-        this.$message({
-          type: 'error',
-          message: error,
-        });
-        this.loading = false;
+        ElMessage.error(error)
+        this.loading = false
       }
     },
     getStatus(data) {
-      return get(data, 'curStatus.status', 'new');
+      return get(data, 'curStatus.status', 'new')
     },
     getToolConfig() {
       const funcList = [
         {
           key: QOP_MAP.EDIT,
-          label: '修改',
+          label: '修改'
         },
         {
           key: 'analysis',
-          label: '数据',
+          label: '数据'
         },
         {
           key: 'release',
-          label: '投放',
+          label: '投放'
         },
         {
           key: 'delete',
           label: '删除',
-          icon: 'icon-shanchu',
+          icon: 'icon-shanchu'
         },
         {
           key: QOP_MAP.COPY,
           label: '复制',
-          icon: 'icon-shanchu',
-        },
-      ];
-      return funcList;
+          icon: 'icon-shanchu'
+        }
+      ]
+      return funcList
     },
     async onDelete(row) {
       try {
-        await this.$confirm('是否确认删除？', '提示', {
+        await ElMessageBox.confirm('是否确认删除？', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
-          type: 'warning',
-        });
+          type: 'warning'
+        })
       } catch (error) {
-        console.log('取消删除');
-        return;
+        console.log('取消删除')
+        return
       }
 
-      const res = await deleteSurvey(row._id);
+      const res = await deleteSurvey(row._id)
       if (res.code === CODE_MAP.SUCCESS) {
-        this.$message.success('删除成功');
-        this.init();
+        ElMessage.success('删除成功')
+        this.init()
       } else {
-        this.$message.error(res.errmsg || '删除失败');
+        ElMessage.error(res.errmsg || '删除失败')
       }
     },
     handleCurrentChange(current) {
-      this.currentPage = current;
-      this.init();
+      this.currentPage = current
+      this.init()
     },
     onModify(data, type = QOP_MAP.EDIT) {
-      this.showModify = true;
-      this.modifyType = type;
-      this.questionInfo = data;
+      this.showModify = true
+      this.modifyType = type
+      this.questionInfo = data
     },
     onCloseModify(type) {
-      this.showModify = false;
-      this.questionInfo = {};
+      this.showModify = false
+      this.questionInfo = {}
       if (type === 'update') {
-        this.init();
+        this.init()
       }
     },
     onRowClick(row) {
       this.$router.push({
         name: 'QuestionEditIndex',
         params: {
-          id: row._id,
-        },
-      });
+          id: row._id
+        }
+      })
     },
     onSearchText(e) {
-      this.searchVal = e;
-      this.currentPage = 1;
-      this.init();
+      this.searchVal = e
+      this.currentPage = 1
+      this.init()
     },
     onSelectChange(selectValue, selectKey) {
-      this.selectValueMap[selectKey] = selectValue;
-      this.currentPage = 1;
-      this.init();
+      this.selectValueMap[selectKey] = selectValue
+      this.currentPage = 1
+      this.init()
     },
     onButtonChange(effectValue, effectKey) {
       this.buttonValueMap = {
         'curStatus.date': '',
-        createDate: '',
-      };
-      this.buttonValueMap[effectKey] = effectValue;
-      this.init();
-    },
+        createDate: ''
+      }
+      this.buttonValueMap[effectKey] = effectValue
+      this.init()
+    }
   },
   components: {
-    empty,
+    EmptyIndex,
     ModifyDialog,
-    Tag,
+    TagModule,
     ToolBar,
     TextSearch,
     TextSelect,
     TextButton,
-    State,
-  },
-};
+    StateModule
+  }
+}
 </script>
 
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .tableview-root {
   .filter-wrap {
     display: flex;
     justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
     .select {
       display: flex;
     }
     .search {
       display: flex;
-      padding-bottom: 20px;
     }
   }
 
@@ -383,12 +372,12 @@ export default {
   }
   .list-pagination {
     margin-top: 20px;
-    ::v-deep .el-pagination {
+    :deep(.el-pagination) {
       display: flex;
       justify-content: flex-end;
     }
   }
-  ::v-deep .el-table__header {
+  :deep(.el-table__header) {
     .tableview-header .el-table__cell {
       .cell {
         height: 24px;
@@ -397,7 +386,7 @@ export default {
       }
     }
   }
-  ::v-deep .tableview-row {
+  :deep(.tableview-row) {
     .tableview-cell {
       padding: 5px 0;
       &.link {
diff --git a/web/src/management/pages/list/components/modify.vue b/web/src/management/pages/list/components/ModifyDialog.vue
similarity index 52%
rename from web/src/management/pages/list/components/modify.vue
rename to web/src/management/pages/list/components/ModifyDialog.vue
index 5f34f335..1ac7da58 100644
--- a/web/src/management/pages/list/components/modify.vue
+++ b/web/src/management/pages/list/components/ModifyDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     class="base-dialog-root"
-    :visible="visible"
+    :model-value="visible"
     width="40%"
     title="基础信息"
     @close="onClose"
@@ -10,91 +10,97 @@
       class="base-form-root"
       ref="ruleForm"
       :model="current"
-      label-width="80px"
       :rules="rules"
       label-position="top"
-      @submit.native.prevent
+      size="large"
+      @submit.prevent
     >
       <el-form-item label="标题" prop="title">
-        <el-input size="medium" v-model="current.title" />
+        <el-input v-model="current.title" />
       </el-form-item>
       <el-form-item label="备注">
-        <el-input size="medium" v-model="current.remark" />
+        <el-input v-model="current.remark" />
       </el-form-item>
     </el-form>
 
-    <div slot="footer" class="dialog-footer">
-      <el-button type="primary" class="save-btn" @click="onSave">{{
-        type === QOP_MAP.EDIT ? '保存' : '确定'
-      }}</el-button>
-    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" class="save-btn" @click="onSave">{{
+          type === QOP_MAP.EDIT ? '保存' : '确定'
+        }}</el-button>
+      </div>
+    </template>
   </el-dialog>
 </template>
 
 <script>
-import { CODE_MAP } from '@/management/api/base';
-import { updateSurvey, createSurvey } from '@/management/api/survey';
-import { pick as _pick } from 'lodash-es';
-import { QOP_MAP } from '@/management/utils/constant';
+import { pick as _pick } from 'lodash-es'
+
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import { CODE_MAP } from '@/management/api/base'
+import { updateSurvey, createSurvey } from '@/management/api/survey'
+import { QOP_MAP } from '@/management/utils/constant'
 
 export default {
-  name: 'modifyDialog',
+  name: 'ModifyDialog',
   props: {
     type: String,
     questionInfo: Object,
     width: String,
-    visible: Boolean,
+    visible: Boolean
   },
   data() {
     return {
       QOP_MAP,
       loadingInstance: null,
       rules: {
-        title: [{ required: true, message: '请输入问卷标题', trigger: 'blur' }],
+        title: [{ required: true, message: '请输入问卷标题', trigger: 'blur' }]
       },
-      current: this.getCurrent(this.questionInfo),
-    };
+      current: this.getCurrent(this.questionInfo)
+    }
   },
   watch: {
     questionInfo: {
       handler(val) {
-        this.current = this.getCurrent(val);
+        this.current = this.getCurrent(val)
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   methods: {
     getCurrent(val) {
       return {
-        ..._pick(val, ['title', 'remark']),
-      };
+        ..._pick(val, ['title', 'remark'])
+      }
     },
     onClose() {
-      this.$emit('on-close-codify');
+      this.$emit('on-close-codify')
     },
     async onSave() {
       if (this.type === QOP_MAP.COPY) {
-        await this.handleCopy();
+        await this.handleCopy()
       } else {
-        await this.handleUpdate();
+        await this.handleUpdate()
       }
 
-      this.$emit('on-close-codify', 'update');
+      this.$emit('on-close-codify', 'update')
     },
     async handleUpdate() {
       try {
         const res = await updateSurvey({
           surveyId: this.questionInfo._id,
-          ...this.current,
-        });
+          ...this.current
+        })
 
         if (res.code === CODE_MAP.SUCCESS) {
-          this.$message.success('修改成功');
+          ElMessage.success('修改成功')
         } else {
-          this.$message.error(res.errmsg);
+          ElMessage.error(res.errmsg)
         }
       } catch (err) {
-        this.$message.error(err);
+        ElMessage.error(err)
       }
     },
     async handleCopy() {
@@ -102,26 +108,30 @@ export default {
         const res = await createSurvey({
           createFrom: this.questionInfo._id,
           createMethod: QOP_MAP.COPY,
-          ...this.current,
-        });
+          ...this.current
+        })
 
         if (res.code === CODE_MAP.SUCCESS) {
-          const { data } = res;
+          const { data } = res
           this.$router.push({
             name: 'QuestionEditIndex',
             params: {
-              id: data.id,
-            },
-          });
+              id: data.id
+            }
+          })
         } else {
-          this.$message.error(res.errmsg);
+          ElMessage.error(res.errmsg)
         }
       } catch (err) {
-        this.$message.error(err);
+        ElMessage.error(err)
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
-<style lang="scss" rel="lang/scss" scoped></style>
+<style lang="scss" rel="lang/scss" scoped>
+.base-form-root {
+  padding: 20px;
+}
+</style>
diff --git a/web/src/management/pages/list/components/state.vue b/web/src/management/pages/list/components/StateModule.vue
similarity index 82%
rename from web/src/management/pages/list/components/state.vue
rename to web/src/management/pages/list/components/StateModule.vue
index 19cd2c30..13fa4daa 100644
--- a/web/src/management/pages/list/components/state.vue
+++ b/web/src/management/pages/list/components/StateModule.vue
@@ -4,21 +4,23 @@
     <span>{{ statusMaps[value.curStatus.status] }}</span>
   </div>
 </template>
+
 <script>
-import { statusMaps } from '../config';
+import { statusMaps } from '../config'
 export default {
-  name: 'State',
+  name: 'StateModule',
   props: {
-    value: Object,
+    value: Object
   },
   data() {
     return {
-      statusMaps,
-    };
-  },
-};
+      statusMaps
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .list-state {
   display: flex;
   align-items: center;
diff --git a/web/src/management/pages/list/components/StaticIcon.vue b/web/src/management/pages/list/components/StaticIcon.vue
new file mode 100644
index 00000000..4905a13d
--- /dev/null
+++ b/web/src/management/pages/list/components/StaticIcon.vue
@@ -0,0 +1,15 @@
+<template>
+  <i-ep-sort v-if="props.icon === 'sort'" />
+  <i-ep-sort-up v-if="props.icon === 'sort-up'" />
+  <i-ep-sort-down v-if="props.icon === 'sort-down'" />
+</template>
+<script setup>
+// unplugin-icons只能处理静态组件，因此将使用的动态icon在这里转成静态组件
+// see https://github.com/unplugin/unplugin-icons/issues/5
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true
+  }
+})
+</script>
diff --git a/web/src/management/pages/list/components/tag.vue b/web/src/management/pages/list/components/TagModule.vue
similarity index 75%
rename from web/src/management/pages/list/components/tag.vue
rename to web/src/management/pages/list/components/TagModule.vue
index 9d94f043..0e07e619 100644
--- a/web/src/management/pages/list/components/tag.vue
+++ b/web/src/management/pages/list/components/TagModule.vue
@@ -1,27 +1,27 @@
 <template>
   <span :class="['list-tag-root', 'list-tag-' + type]">
     <div class="tag-bg"></div>
-    <span>{{
-      surveyType[value.surveyType] || surveyType[value.questionType]
-    }}</span>
+    <span>{{ surveyType[value.surveyType] || surveyType[value.questionType] }}</span>
   </span>
 </template>
+
 <script>
-import { type as surveyType } from '../config';
+import { type as surveyType } from '../config'
 export default {
-  name: 'Tag',
+  name: 'TagModule',
   props: {
     value: Object,
-    type: String,
+    type: String
   },
   data() {
     return {
-      surveyType,
-    };
-  },
-};
+      surveyType
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .list-tag-root {
   display: inline-block;
   position: relative;
diff --git a/web/src/management/pages/list/components/textButton.vue b/web/src/management/pages/list/components/TextButton.vue
similarity index 51%
rename from web/src/management/pages/list/components/textButton.vue
rename to web/src/management/pages/list/components/TextButton.vue
index 3a2e9b90..ab1c57fb 100644
--- a/web/src/management/pages/list/components/textButton.vue
+++ b/web/src/management/pages/list/components/TextButton.vue
@@ -1,60 +1,75 @@
 <template>
   <div class="text-button-root" @click="onClick">
     <el-button v-bind="{ ...$attrs }">
-      <slot>{{ option.label }}</slot>
+      <template #icon>
+        <StaticIcon :icon="icon" />
+      </template>
+      {{ option.label }}
     </el-button>
   </div>
 </template>
+
 <script>
+import StaticIcon from './StaticIcon.vue'
+
 export default {
   name: 'TextButton',
+  components: {
+    StaticIcon
+  },
   data() {
     return {
-      iconIndex: 0,
-    };
+      iconIndex: 0
+    }
   },
   props: {
     option: {
       type: Object,
-      required: true,
+      required: true
     },
     effectFun: {
-      type: Function,
+      type: Function
     },
     effectKey: {
-      type: String,
+      type: String
     },
+    icon: {
+      type: String
+    }
   },
   computed: {
     toggleOptionIcons() {
-      return this.option.icons.slice(1);
+      return this.option.icons.slice(1)
     },
     iconsLength() {
-      return this.toggleOptionIcons.length;
+      return this.toggleOptionIcons.length
     },
     currentIconItem() {
-      let finalIconIndex = this.iconIndex % this.iconsLength;
-      return this.toggleOptionIcons[finalIconIndex];
-    },
+      let finalIconIndex = this.iconIndex % this.iconsLength
+      return this.toggleOptionIcons[finalIconIndex]
+    }
   },
   methods: {
     onClick() {
-      this.iconIndex++;
+      this.iconIndex++
       if (this.iconIndex >= this.iconsLength) {
-        this.iconIndex = 0;
+        this.iconIndex = 0
       }
       typeof this.effectFun === 'function' &&
-        this.effectFun(this.currentIconItem.effectValue, this.effectKey);
-    },
+        this.effectFun(this.currentIconItem.effectValue, this.effectKey)
+    }
   },
   created() {
-    this.iconIndex = this.toggleOptionIcons.findIndex(
-      (iconItem) => iconItem.isDefaultValue
-    );
-  },
-};
+    this.iconIndex = this.toggleOptionIcons.findIndex((iconItem) => iconItem.isDefaultValue)
+  }
+}
 </script>
+
 <style lang="scss" scoped>
+.text-button-root {
+  display: flex;
+  align-items: center;
+}
 .el-button {
   margin-right: 20px;
   font-size: 14px;
diff --git a/web/src/management/pages/list/components/textSearch.vue b/web/src/management/pages/list/components/TextSearch.vue
similarity index 58%
rename from web/src/management/pages/list/components/textSearch.vue
rename to web/src/management/pages/list/components/TextSearch.vue
index b60f594c..10a39692 100644
--- a/web/src/management/pages/list/components/textSearch.vue
+++ b/web/src/management/pages/list/components/TextSearch.vue
@@ -1,63 +1,62 @@
 <template>
   <div class="filter-input">
-    <input
-      :class="['text-search_root']"
+    <el-input
       v-model="curValue"
       @keyup.enter="onSearch"
       autocomplete="off"
       :placeholder="placeholder"
-      type="text"
-      rows="1"
-      class="el-input__inner"
-    />
-    <i class="el-icon-search el-input__icon" @click="onSearch"></i>
+    >
+      <template #suffix>
+        <i-ep-search class="el-input__icon" />
+      </template>
+    </el-input>
   </div>
 </template>
+
 <script>
 export default {
+  components: {},
   name: 'TextSearch',
   props: {
     value: String,
-    placeholder: String,
+    placeholder: String
   },
   data() {
     return {
-      curValue: this.value,
-    };
+      curValue: this.value
+    }
   },
   watch: {
     value(val) {
-      this.curValue = val;
-    },
+      this.curValue = val
+    }
   },
   methods: {
     onSearch() {
-      this.$emit('search', this.curValue);
-    },
-  },
-};
+      this.$emit('search', this.curValue)
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss">
-// @import '@didi/question-common/assets/css/variable';
+
+<style lang="scss" scoped>
 .filter-input {
   position: relative;
   width: 200px;
-  .el-input__inner {
+  :deep(.el-input__wrapper) {
     height: 32px;
     line-height: 32px;
     padding: 0 25px;
     font-size: 12px;
     background: #ffffff;
-    border: 1px solid $border-color;
     border-radius: 18px;
     &:focus {
       border-color: $primary-color;
     }
   }
-  .el-icon-search {
+  .el-input__icon {
     position: absolute;
     line-height: 32px;
-    right: 10px;
     color: #7e7f8a;
     cursor: pointer;
     &:hover {
diff --git a/web/src/management/pages/list/components/textSelect.vue b/web/src/management/pages/list/components/TextSelect.vue
similarity index 67%
rename from web/src/management/pages/list/components/textSelect.vue
rename to web/src/management/pages/list/components/TextSelect.vue
index 6adf326f..e3ca453b 100644
--- a/web/src/management/pages/list/components/textSelect.vue
+++ b/web/src/management/pages/list/components/TextSelect.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="text-select-root">
-    <el-select v-model="selectValue" :placeholder="options.label">
+    <el-select v-model="selectValue" :empty-values="[null, undefined]" :placeholder="options.label">
       <el-option
         v-for="item in options.value"
         :key="item.value"
@@ -17,28 +17,28 @@ export default {
   name: 'TextSelect',
   data() {
     return {
-      selectValue: this.options.default,
-    };
+      selectValue: this.options.default
+    }
   },
   props: {
     options: {
       type: Object,
-      required: true,
+      required: true
     },
     effectFun: {
-      type: Function,
+      type: Function
     },
     effectKey: {
-      type: String,
-    },
+      type: String
+    }
   },
   watch: {
     selectValue(newSelect) {
-      const { effectFun } = this;
-      typeof effectFun === 'function' && effectFun(newSelect, this.effectKey);
-    },
-  },
-};
+      const { effectFun } = this
+      typeof effectFun === 'function' && effectFun(newSelect, this.effectKey)
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -46,12 +46,12 @@ export default {
   width: 105px;
   line-height: 35px;
   margin-right: 20px;
-  ::v-deep .el-input__inner {
-    border: none;
+  :deep(.el-select__wrapper) {
+    box-shadow: none;
     height: 35px;
     //   line-height: 35px;
   }
-  ::v-deep .el-icon-arrow-up:before {
+  :deep(.el-icon-arrow-up:before) {
     position: relative;
     top: -2px;
   }
diff --git a/web/src/management/pages/list/components/toolBar.vue b/web/src/management/pages/list/components/ToolBar.vue
similarity index 61%
rename from web/src/management/pages/list/components/toolBar.vue
rename to web/src/management/pages/list/components/ToolBar.vue
index 45c59aca..95f4f336 100644
--- a/web/src/management/pages/list/components/toolBar.vue
+++ b/web/src/management/pages/list/components/ToolBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tool-bar-root">
     <template v-if="tools.length">
-      <tool
+      <ToolModule
         v-for="t in tools"
         :key="t.key"
         :type="type"
@@ -15,8 +15,8 @@
 </template>
 
 <script>
-import { QOP_MAP } from '@/management/utils/constant';
-import Tool from './tool';
+import { QOP_MAP } from '@/management/utils/constant'
+import ToolModule from './ToolModule.vue'
 
 export default {
   name: 'ToolBar',
@@ -24,51 +24,51 @@ export default {
     data: Object,
     type: String,
     toolWidth: Number,
-    tools: Array,
+    tools: Array
   },
   data() {
-    return {};
+    return {}
   },
   methods: {
     onCall(val) {
       switch (val.key) {
         case QOP_MAP.EDIT:
-          this.$emit('on-modify', this.data, QOP_MAP.EDIT);
-          return;
+          this.$emit('on-modify', this.data, QOP_MAP.EDIT)
+          return
         case QOP_MAP.COPY:
-          this.$emit('on-modify', this.data, QOP_MAP.COPY);
-          return;
+          this.$emit('on-modify', this.data, QOP_MAP.COPY)
+          return
         case 'analysis':
           this.$router.push({
             name: 'analysisPage',
             params: {
-              id: this.data._id,
-            },
-          });
-          return;
+              id: this.data._id
+            }
+          })
+          return
         case 'release':
           this.$router.push({
             name: 'publishResultPage',
             params: {
-              id: this.data._id,
-            },
-          });
-          return;
+              id: this.data._id
+            }
+          })
+          return
         case 'delete':
-          this.$emit('on-delete', this.data);
-          return;
+          this.$emit('on-delete', this.data)
+          return
         default:
-          return;
+          return
       }
-    },
+    }
   },
   components: {
-    Tool,
-  },
-};
+    ToolModule
+  }
+}
 </script>
 
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .tool-bar-root {
   margin-left: -16px;
   .tool-root:not(:last-child) {
diff --git a/web/src/management/pages/list/components/tool.vue b/web/src/management/pages/list/components/ToolModule.vue
similarity index 80%
rename from web/src/management/pages/list/components/tool.vue
rename to web/src/management/pages/list/components/ToolModule.vue
index aec475cd..15515778 100644
--- a/web/src/management/pages/list/components/tool.vue
+++ b/web/src/management/pages/list/components/ToolModule.vue
@@ -1,30 +1,30 @@
 <template>
   <div class="tool-root" @click.stop="onClick">
-    <span class="tool-root-btn-text" :style="{ width: width + 'px' }">{{
-      label
-    }}</span>
+    <span class="tool-root-btn-text" :style="{ width: width + 'px' }">{{ label }}</span>
   </div>
 </template>
+
 <script>
 export default {
-  name: 'Tool',
+  name: 'ToolModule',
   props: {
     value: String,
     label: String,
     type: String,
-    width: Number,
+    width: Number
   },
   methods: {
     onClick() {
       this.$emit('call', {
         key: this.value,
-        name: this.label,
-      });
-    },
-  },
-};
+        name: this.label
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+
+<style lang="scss" scoped>
 .tool-root {
   display: inline-block;
   font-size: 0;
diff --git a/web/src/management/pages/list/config/index.js b/web/src/management/pages/list/config/index.js
index a159735f..3df1066c 100644
--- a/web/src/management/pages/list/config/index.js
+++ b/web/src/management/pages/list/config/index.js
@@ -2,70 +2,70 @@ export const type = {
   normal: '调查问卷',
   vote: '投票评选',
   nps: 'NPS评分',
-  register: '在线报名',
-};
+  register: '在线报名'
+}
 
 export const fieldConfig = {
   type: {
     title: '类型',
     key: 'type',
     width: 150,
-    comp: 'tag',
+    comp: 'TagModule'
   },
   title: {
     title: '标题',
     key: 'title',
     width: 240,
-    tip: true,
+    tip: true
   },
   remark: {
     title: '备注',
     key: 'remark',
     width: 200,
-    tip: true,
+    tip: true
   },
   state: {
     title: '状态',
     key: 'state',
     width: 140,
-    comp: 'state',
+    comp: 'StateModule'
   },
   owner: {
     title: '所有者',
     key: 'owner',
-    width: 140,
+    width: 140
   },
   updateDate: {
     title: '更新时间',
     key: 'curStatus.date',
-    minWidth: 200,
+    minWidth: 200
   },
   createDate: {
     title: '创建时间',
     key: 'createDate',
-    minWidth: 200,
-  },
-};
+    minWidth: 200
+  }
+}
 
 export const noListDataConfig = {
   title: '您还没有创建问卷',
   desc: '赶快点击右上角立即创建问卷吧！',
-  img: '/imgs/icons/list-empty.webp',
-};
+  img: '/imgs/icons/list-empty.webp'
+}
 
 export const noSearchDataConfig = {
   title: '没有满足该查询条件的问卷哦',
   desc: '可以更换条件查询试试',
-  img: '/imgs/icons/list-empty.webp',
-};
+  img: '/imgs/icons/list-empty.webp'
+}
 
 export const statusMaps = {
   new: '未发布',
   editing: '修改中',
   published: '已发布',
   removed: '',
-  pausing: '',
-};
+  pausing: ''
+}
 
 // 问卷类型
 export const surveyTypeSelect = {
@@ -73,11 +73,11 @@ export const surveyTypeSelect = {
   value: [
     {
       value: '',
-      label: '全部类型',
+      label: '全部类型'
     },
     {
       value: 'normal',
-      label: '基础调查',
+      label: '基础调查'
     },
     // {
     //   value: 'exam',
@@ -89,15 +89,15 @@ export const surveyTypeSelect = {
     // },
     {
       value: 'vote',
-      label: '投票评选',
+      label: '投票评选'
     },
     {
       value: 'register',
-      label: '在线报名',
-    },
+      label: '在线报名'
+    }
   ],
-  default: '',
-};
+  default: ''
+}
 
 // 问卷状态
 export const curStatusSelect = {
@@ -105,28 +105,28 @@ export const curStatusSelect = {
   value: [
     {
       value: '',
-      label: '全部状态',
+      label: '全部状态'
     },
     {
       value: 'new',
-      label: '未发布',
+      label: '未发布'
     },
     {
       value: 'published',
-      label: '已发布',
+      label: '已发布'
     },
     {
       value: 'editing',
-      label: '修改中',
-    },
+      label: '修改中'
+    }
   ],
-  default: '',
-};
+  default: ''
+}
 
 export const selectOptionsDict = Object.freeze({
   surveyType: surveyTypeSelect,
-  'curStatus.status': curStatusSelect,
-});
+  'curStatus.status': curStatusSelect
+})
 
 export const buttonOptionsDict = Object.freeze({
   'curStatus.date': {
@@ -136,16 +136,19 @@ export const buttonOptionsDict = Object.freeze({
         name: 'el-icon-sort',
         effectValue: '',
         isDefaultValue: true,
+        icon: 'sort'
       },
       {
         name: 'el-icon-sort-up',
         effectValue: 1,
+        icon: 'sort-up'
       },
       {
         name: 'el-icon-sort-down',
         effectValue: -1,
-      },
-    ],
+        icon: 'sort-down'
+      }
+    ]
   },
   createDate: {
     label: '创建时间',
@@ -153,16 +156,19 @@ export const buttonOptionsDict = Object.freeze({
       {
         name: 'el-icon-sort',
         effectValue: '',
+        icon: 'sort'
       },
       {
         name: 'el-icon-sort-up',
         effectValue: 1,
+        icon: 'sort-up'
       },
       {
         name: 'el-icon-sort-down',
         effectValue: -1,
         isDefaultValue: true,
-      },
-    ],
-  },
-});
+        icon: 'sort-down'
+      }
+    ]
+  }
+})
diff --git a/web/src/management/pages/list/index.vue b/web/src/management/pages/list/index.vue
index 5723fe7c..722865b3 100644
--- a/web/src/management/pages/list/index.vue
+++ b/web/src/management/pages/list/index.vue
@@ -16,33 +16,34 @@
           <span>创建问卷</span>
         </el-button>
       </div>
-      <base-list />
+      <BaseList />
     </div>
   </div>
 </template>
+
 <script>
-import baseList from './components/baseList.vue';
-import { mapState, mapActions } from 'vuex';
+import BaseList from './components/BaseList.vue'
+import { mapState, mapActions } from 'vuex'
 export default {
-  components: { baseList },
+  components: { BaseList },
   name: 'listPage',
   computed: {
-    ...mapState('user', ['userInfo']),
+    ...mapState('user', ['userInfo'])
   },
   methods: {
     ...mapActions('user', ['logout']),
     onCreate() {
-      this.$router.push('/create');
+      this.$router.push('/create')
     },
     handleLogout() {
-      this.logout();
-      this.$router.replace({ name: 'login' });
-    },
-  },
-};
+      this.logout()
+      this.$router.replace({ name: 'login' })
+    }
+  }
+}
 </script>
 
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .question-list-root {
   height: 100%;
   background-color: #f6f7f9;
diff --git a/web/src/management/pages/login/index.vue b/web/src/management/pages/login/LoginPage.vue
similarity index 71%
rename from web/src/management/pages/login/index.vue
rename to web/src/management/pages/login/LoginPage.vue
index e036e4bf..377eca25 100644
--- a/web/src/management/pages/login/index.vue
+++ b/web/src/management/pages/login/LoginPage.vue
@@ -3,7 +3,7 @@
     class="login-page"
     :style="{
       background: `url('/imgs/create/background.webp') no-repeat bottom right`,
-      'background-size': 'cover',
+      'background-size': 'cover'
     }"
   >
     <div class="login-top">
@@ -17,27 +17,20 @@
         ref="formData"
         label-width="100px"
         class="login-form"
-        @submit.native.prevent
+        @submit.prevent
       >
         <el-form-item label="账号" prop="name">
-          <el-input v-model="formData.name"></el-input>
+          <el-input v-model="formData.name" size="large"></el-input>
         </el-form-item>
 
         <el-form-item label="密码" prop="password">
-          <el-input type="password" v-model="formData.password"></el-input>
+          <el-input type="password" v-model="formData.password" size="large"></el-input>
         </el-form-item>
 
         <el-form-item label="验证码" prop="captcha">
           <div class="captcha-wrapper">
-            <el-input
-              style="width: 150px"
-              v-model="formData.captcha"
-            ></el-input>
-            <div
-              class="captcha-img"
-              @click="refreshCaptcha"
-              v-html="captchaImgData"
-            ></div>
+            <el-input style="width: 150px" v-model="formData.captcha" size="large"></el-input>
+            <div class="captcha-img" @click="refreshCaptcha" v-html="captchaImgData"></div>
           </div>
         </el-form-item>
 
@@ -52,7 +45,6 @@
           >
           <el-button
             :loading="registerPending"
-            size="small"
             class="button register-button"
             @click="submitForm('formData', 'register')"
             >注册</el-button
@@ -62,19 +54,23 @@
     </div>
   </div>
 </template>
+
 <script>
-import { login, register } from '@/management/api/auth';
-import { refreshCaptcha } from '@/management/api/captcha';
-import { CODE_MAP } from '@/management/api/base';
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import { login, register } from '@/management/api/auth'
+import { refreshCaptcha } from '@/management/api/captcha'
+import { CODE_MAP } from '@/management/api/base'
 export default {
-  name: 'loginPage',
+  name: 'LoginPage',
   data() {
     return {
       formData: {
         name: '',
         password: '',
         captcha: '',
-        captchaId: '',
+        captchaId: ''
       },
       rules: {
         name: [
@@ -83,8 +79,8 @@ export default {
             min: 3,
             max: 10,
             message: '长度在 3 到 10 个字符',
-            trigger: 'blur',
-          },
+            trigger: 'blur'
+          }
         ],
         password: [
           { required: true, message: '请输入密码', trigger: 'blur' },
@@ -92,24 +88,24 @@ export default {
             min: 8,
             max: 16,
             message: '长度在 8 到 16 个字符',
-            trigger: 'blur',
-          },
+            trigger: 'blur'
+          }
         ],
         captcha: [
           {
             required: true,
             message: '请输入验证码',
-            trigger: 'blur',
-          },
-        ],
+            trigger: 'blur'
+          }
+        ]
       },
       loginPending: false,
       registerPending: false,
-      captchaImgData: '',
-    };
+      captchaImgData: ''
+    }
   },
   created() {
-    this.refreshCaptcha();
+    this.refreshCaptcha()
   },
   methods: {
     submitForm(formName, type) {
@@ -118,58 +114,58 @@ export default {
           try {
             const submitTypes = {
               login,
-              register,
-            };
-            this[`${type}Pending`] = true;
+              register
+            }
+            this[`${type}Pending`] = true
             const res = await submitTypes[type]({
               username: this.formData.name,
               password: this.formData.password,
               captcha: this.formData.captcha,
-              captchaId: this.formData.captchaId,
-            });
-            this[`${type}Pending`] = false;
+              captchaId: this.formData.captchaId
+            })
+            this[`${type}Pending`] = false
             if (res.code !== CODE_MAP.SUCCESS) {
-              this.$message.error(res.errmsg);
-              throw new Error('登录/注册失败' + res.errmsg);
+              ElMessage.error(res.errmsg)
+              throw new Error('登录/注册失败' + res.errmsg)
             }
             this.$store.dispatch('user/login', {
               username: res.data.username,
-              token: res.data.token,
-            });
+              token: res.data.token
+            })
             let redirect = {
-              name: 'survey',
-            };
-            if (this.$route.query.redirect) {
-              redirect = decodeURIComponent(this.$route.query.redirect);
+              name: 'survey'
             }
-            this.$router.replace(redirect);
+            if (this.$route.query.redirect) {
+              redirect = decodeURIComponent(this.$route.query.redirect)
+            }
+            this.$router.replace(redirect)
           } catch (error) {
-            this[`${type}Pending`] = false;
-            console.log(error);
+            this[`${type}Pending`] = false
           }
-          return true;
+          return true
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     async refreshCaptcha() {
       try {
         const res = await refreshCaptcha({
-          captchaId: this.formData.captchaId,
-        });
+          captchaId: this.formData.captchaId
+        })
         if (res.code === 200) {
-          const { id, img } = res.data;
-          this.formData.captchaId = id;
-          this.captchaImgData = img;
+          const { id, img } = res.data
+          this.formData.captchaId = id
+          this.captchaImgData = img
         }
       } catch (error) {
-        this.$message.error('获取验证码失败');
+        ElMessage.error('获取验证码失败')
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
+
 <style lang="scss" scoped>
 .login-page {
   overflow: hidden;
@@ -236,7 +232,7 @@ export default {
     .captcha-img {
       height: 40px;
       cursor: pointer;
-      ::v-deep > svg {
+      :deep(> svg) {
         max-height: 40px;
       }
     }
diff --git a/web/src/management/pages/publishResult/index.vue b/web/src/management/pages/publishResult/PublishResultPage.vue
similarity index 70%
rename from web/src/management/pages/publishResult/index.vue
rename to web/src/management/pages/publishResult/PublishResultPage.vue
index 3bbd8bd3..c7e48f5e 100644
--- a/web/src/management/pages/publishResult/index.vue
+++ b/web/src/management/pages/publishResult/PublishResultPage.vue
@@ -1,12 +1,9 @@
 <template>
   <div class="publish-result-page">
-    <leftMenu class="left"></leftMenu>
+    <LeftMenu class="left" />
     <div class="right">
       <template v-if="curStatus !== 'new'">
-        <div
-          class="preview-container"
-          :style="{ backgroundImage: `url('${this.phoneBg}')` }"
-        >
+        <div class="preview-container" :style="{ backgroundImage: `url('${this.phoneBg}')` }">
           <iframe :src="mainChannel.fullUrl"></iframe>
         </div>
         <div class="container-content">
@@ -15,7 +12,7 @@
           >
           <h2>问卷链接</h2>
           <div class="main-channel-wrap">
-            <channel-row
+            <ChannelRow
               :disable-delete="true"
               :data="mainChannel"
               :style-wrap="{ marginBottom: '8px' }"
@@ -23,67 +20,73 @@
           </div>
         </div>
       </template>
-      <empty v-else :data="noDataConfig" />
+      <EmptyIndex v-else :data="noDataConfig" />
     </div>
   </div>
 </template>
+
 <script>
-import ChannelRow from './components/channelRow';
-import empty from '@/management/components/empty';
-import { get as _get } from 'lodash-es';
-import leftMenu from '@/management/components/leftMenu.vue';
-import { mapState } from 'vuex';
+import { mapState } from 'vuex'
+import { get as _get } from 'lodash-es'
+
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import EmptyIndex from '@/management/components/EmptyIndex.vue'
+import LeftMenu from '@/management/components/LeftMenu.vue'
+
+import ChannelRow from './components/ChannelRow.vue'
 
 export default {
-  name: 'publishResultPage',
+  name: 'PublishResultPage',
   data() {
     return {
       noDataConfig: {
         title: '问卷未发布',
         desc: '点击发布后，问卷就可以对外投放了哦！',
-        img: '/imgs/icons/unpublished.webp',
+        img: '/imgs/icons/unpublished.webp'
       },
-      phoneBg: '/imgs/phone-bg.webp',
-    };
+      phoneBg: '/imgs/phone-bg.webp'
+    }
   },
   async created() {
-    this.$store.commit('edit/setSurveyId', this.$route.params.id);
+    this.$store.commit('edit/setSurveyId', this.$route.params.id)
     try {
-      await this.$store.dispatch('edit/init');
+      await this.$store.dispatch('edit/init')
     } catch (error) {
-      this.$message.error(error.message);
+      ElMessage.error(error.message)
       // 自动跳转回列表页
       setTimeout(() => {
         this.$router.replace({
-          name: 'survey',
-        });
-      }, 1000);
+          name: 'survey'
+        })
+      }, 1000)
     }
   },
   computed: {
     ...mapState({
-      metaData: (state) => _get(state, 'edit.schema.metaData'),
+      metaData: (state) => _get(state, 'edit.schema.metaData')
     }),
     curStatus() {
-      return _get(this.metaData, 'curStatus.status', 'new');
+      return _get(this.metaData, 'curStatus.status', 'new')
     },
     mainChannel() {
       if (!this.metaData) {
         return {
-          fullUrl: '',
-        };
+          fullUrl: ''
+        }
       }
       return {
-        fullUrl: `${location.origin}/render/${this.metaData.surveyPath}`,
-      };
-    },
+        fullUrl: `${location.origin}/render/${this.metaData.surveyPath}`
+      }
+    }
   },
   components: {
     ChannelRow,
-    empty,
-    leftMenu,
-  },
-};
+    EmptyIndex,
+    LeftMenu
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/management/pages/publishResult/components/channelRow.vue b/web/src/management/pages/publishResult/components/ChannelRow.vue
similarity index 62%
rename from web/src/management/pages/publishResult/components/channelRow.vue
rename to web/src/management/pages/publishResult/components/ChannelRow.vue
index 21f5f533..632e805a 100644
--- a/web/src/management/pages/publishResult/components/channelRow.vue
+++ b/web/src/management/pages/publishResult/components/ChannelRow.vue
@@ -1,44 +1,21 @@
 <template>
-  <div
-    class="channel-row-container"
-    :style="styleWrap"
-    :class="data.vertical ? 'vertical' : ''"
-  >
+  <div class="channel-row-container" :style="styleWrap" :class="data.vertical ? 'vertical' : ''">
     <div class="normal-row-wrap">
       <div class="left">
         <div class="crc-url-wrap" :class="{ 'no-name': !data.name }">
           <div style="margin-bottom: 16px">
-            <el-input
-              size="small"
-              class="cru-content"
-              :value="getFullUrl(data)"
-              readonly="readonly"
-            />
+            <el-input class="cru-content" :model-value="getFullUrl(data)" :readonly="true" />
           </div>
         </div>
       </div>
       <div class="operate-btn-group">
-        <el-tooltip
-          class="item"
-          effect="dark"
-          content="在新页面打开"
-          placement="top"
-        >
+        <el-tooltip class="item" effect="dark" content="在新页面打开" placement="top">
           <a class="cru-suffix j-open" @click="openPage(getFullUrl(data))">
             <i class="font23 iconfont icon-jinru"></i>
           </a>
         </el-tooltip>
-        <el-tooltip
-          class="item"
-          effect="dark"
-          content="复制链接"
-          placement="top"
-        >
-          <a
-            class="cru-suffix j-copy"
-            :data-clipboard-text="getFullUrl(data)"
-            @click="handleCopy"
-          >
+        <el-tooltip class="item" effect="dark" content="复制链接" placement="top">
+          <a class="cru-suffix j-copy" :data-clipboard-text="getFullUrl(data)" @click="handleCopy">
             <i class="font23 iconfont icon-fuzhi"></i>
           </a>
         </el-tooltip>
@@ -49,35 +26,39 @@
 </template>
 
 <script>
-import QRCode from './QRCode';
-import Clipboard from 'clipboard';
+import Clipboard from 'clipboard'
+
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import QRCode from './QRCode.vue'
 
 export default {
   name: 'ChannelRow',
   components: {
-    QRCode,
+    QRCode
   },
   props: ['data', 'styleWrap'],
   methods: {
     handleCopy() {
-      const clipboard = new Clipboard('.j-copy');
+      const clipboard = new Clipboard('.j-copy')
       clipboard.on('success', (e) => {
-        this.$message({
+        ElMessage({
           type: 'success',
-          message: `已复制渠道链接：${e.text}`,
-        });
-      });
+          message: `已复制渠道链接：${e.text}`
+        })
+      })
     },
     openPage(url) {
-      window.open(url);
+      window.open(url)
     },
     getFullUrl(v) {
-      const url = v.fullUrl;
-      const protocol = window.location.protocol;
-      return `${protocol}//${url.split('//')[1]}`;
-    },
-  },
-};
+      const url = v.fullUrl
+      const protocol = window.location.protocol
+      return `${protocol}//${url.split('//')[1]}`
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -134,7 +115,7 @@ export default {
         background: $background-color-gray;
       }
 
-      ::v-deep .font23 {
+      :deep(.font23) {
         font-size: 23px;
       }
     }
diff --git a/web/src/management/pages/publishResult/components/QRCode.vue b/web/src/management/pages/publishResult/components/QRCode.vue
index bc62add8..849ccf5c 100644
--- a/web/src/management/pages/publishResult/components/QRCode.vue
+++ b/web/src/management/pages/publishResult/components/QRCode.vue
@@ -8,16 +8,18 @@
         trigger="hover"
       >
         <img :src="qRCodeImg" width="120" height="120" />
+        <template #reference>
+          <el-button>
+            <i style="font-size: 24px" class="iconfont icon-erweima"></i>
+          </el-button>
+        </template>
       </el-popover>
-      <el-button v-popover:popover>
-        <i style="font-size: 24px" class="iconfont icon-erweima"></i>
-      </el-button>
     </div>
   </div>
 </template>
 
 <script>
-import QRCode from 'qrcode';
+import QRCode from 'qrcode'
 
 export default {
   name: 'QRCode',
@@ -25,19 +27,19 @@ export default {
   data() {
     return {
       inQcode: false,
-      qRCodeImg: '',
-    };
+      qRCodeImg: ''
+    }
   },
   methods: {
     initQRCodeImg() {
       QRCode.toDataURL(this.url)
         .then((url) => {
-          this.qRCodeImg = url;
+          this.qRCodeImg = url
         })
         .catch((err) => {
-          console.error(err);
-        });
-    },
+          console.error(err)
+        })
+    }
   },
   watch: {
     url: {
@@ -45,13 +47,13 @@ export default {
       handler(newVal) {
         if (newVal) {
           this.$nextTick(() => {
-            this.initQRCodeImg();
-          });
+            this.initQRCodeImg()
+          })
         }
-      },
-    },
-  },
-};
+      }
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/management/router/index.js b/web/src/management/router/index.js
deleted file mode 100644
index cce439ef..00000000
--- a/web/src/management/router/index.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
-
-Vue.use(VueRouter);
-
-const routes = [
-  {
-    path: '/',
-    redirect: '/survey',
-  },
-  {
-    path: '/survey',
-    name: 'survey',
-    component: () =>
-      import(/* webpackChunkName: "survey" */ '../pages/list/index.vue'),
-    meta: {
-      needLogin: true,
-      title: '问卷列表',
-    },
-  },
-  {
-    path: '/survey/:id/edit',
-    name: 'editPage',
-    meta: {
-      needLogin: true,
-    },
-    // redirect: '/question',
-    component: () =>
-      import(/* webpackChunkName: "editPage" */ '../pages/edit/index.vue'),
-    children: [
-      {
-        path: '',
-        name: 'QuestionEditIndex',
-        
-        meta: {
-          needLogin: true,
-        },
-        component: () =>
-          import(
-            /* webpackChunkName: "QuestionEditIndex" */ '../pages/edit/pages/edit.vue'
-          ),
-      },
-      {
-        path: 'setting',
-        name: 'QuestionEditSetting',
-        meta: {
-          needLogin: true,
-        },
-        component: () =>
-          import(
-            /* webpackChunkName: "QuestionEditSetting" */ '../pages/edit/pages/setting.vue'
-          ),
-      },
-      {
-        path: 'skin',
-        name: 'SkinSetting',
-        meta: {
-          needLogin: true,
-        },
-        component: () => import(/* webpackChunkName: "skin" */ '../pages/edit/pages/skin/index.vue'),
-        children: [
-          {
-            path: '',
-            name: 'QuestionSkinSetting',
-            meta: {
-              needLogin: true,
-            },
-            component: () =>
-              import('../pages/edit/pages/skin/content.vue'),
-          },
-          {
-            path: 'result',
-            name: 'QuestionEditResultConfig',
-            meta: {
-              needLogin: true,
-            },
-            component: () =>
-              import('../pages/edit/pages/skin/result.vue'),
-          }
-        ],
-      },
-    ],
-  },
-  {
-    path: '/survey/:id/analysis',
-    name: 'analysisPage',
-    meta: {
-      needLogin: true,
-    },
-    component: () =>
-      import(
-        /* webpackChunkName: "analysisPage" */ '../pages/analysis/index.vue'
-      ),
-  },
-  {
-    path: '/survey/:id/publishResult',
-    name: 'publishResultPage',
-    meta: {
-      needLogin: true,
-    },
-    component: () =>
-      import(
-        /* webpackChunkName: "publishResultPage" */ '../pages/publishResult/index.vue'
-      ),
-  },
-  {
-    path: '/create',
-    name: 'create',
-    meta: {
-      needLogin: true,
-      title: '创建问卷',
-    },
-    component: () =>
-      import(/* webpackChunkName: "create" */ '../pages/create/index.vue'),
-  },
-  {
-    path: '/login',
-    name: 'login',
-    title: '登陆',
-    component: () =>
-      import(/* webpackChunkName: "login" */ '../pages/login/index.vue'),
-  },
-];
-
-const router = new VueRouter({
-  mode: 'history',
-  base: '/management',
-  routes,
-});
-
-router.beforeEach((to, from, next) => {
-  const store = router.app.$options.store;
-  if (!store?.state?.user?.initialized) {
-    store.dispatch('user/init');
-  }
-  if (to.meta.title) {
-    document.title = to.meta.title;
-  }
-  if (to.meta.needLogin) {
-    if (store?.state?.user?.hasLogined) {
-      next();
-    } else {
-      next({
-        name: 'login',
-        query: {
-          redirect: encodeURIComponent(to.path),
-        },
-      });
-    }
-  } else {
-    next();
-  }
-});
-
-export default router;
diff --git a/web/src/management/router/index.ts b/web/src/management/router/index.ts
new file mode 100644
index 00000000..0492b0c6
--- /dev/null
+++ b/web/src/management/router/index.ts
@@ -0,0 +1,134 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import { useStore } from 'vuex'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    redirect: '/survey'
+  },
+  {
+    path: '/survey',
+    name: 'survey',
+    component: () => import('../pages/list/index.vue'),
+    meta: {
+      needLogin: true,
+      title: '问卷列表'
+    }
+  },
+  {
+    path: '/survey/:id/edit',
+    meta: {
+      needLogin: true
+    },
+    component: () => import('../pages/edit/index.vue'),
+    children: [
+      {
+        path: '',
+        name: 'QuestionEditIndex',
+        meta: {
+          needLogin: true
+        },
+        component: () => import('../pages/edit/pages/EditPage.vue')
+      },
+      {
+        path: 'setting',
+        name: 'QuestionEditSetting',
+        meta: {
+          needLogin: true
+        },
+        component: () => import('../pages/edit/pages/SettingPage.vue')
+      },
+      {
+        path: 'skin',
+        // name: 'SkinSetting',
+        meta: {
+          needLogin: true
+        },
+        component: () => import('../pages/edit/pages/skin/index.vue'),
+        children: [
+          {
+            path: '',
+            name: 'QuestionSkinSetting',
+            meta: {
+              needLogin: true
+            },
+            component: () => import('../pages/edit/pages/skin/ContentPage.vue')
+          },
+          {
+            path: 'result',
+            name: 'QuestionEditResultConfig',
+            meta: {
+              needLogin: true
+            },
+            component: () => import('../pages/edit/pages/skin/ResultPage.vue')
+          }
+        ]
+      }
+    ]
+  },
+  {
+    path: '/survey/:id/analysis',
+    name: 'analysisPage',
+    meta: {
+      needLogin: true
+    },
+    component: () => import('../pages/analysis/AnalysisPage.vue')
+  },
+  {
+    path: '/survey/:id/publishResult',
+    name: 'publishResultPage',
+    meta: {
+      needLogin: true
+    },
+    component: () => import('../pages/publishResult/PublishResultPage.vue')
+  },
+  {
+    path: '/create',
+    name: 'create',
+    meta: {
+      needLogin: true,
+      title: '创建问卷'
+    },
+    component: () => import('../pages/create/CreatePage.vue')
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('../pages/login/LoginPage.vue'),
+    meta: {
+      title: '登陆'
+    }
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory('/management'),
+  routes
+})
+
+router.beforeEach((to, from, next) => {
+  const store = useStore()
+  if (!store.state.user?.initialized) {
+    store?.dispatch('user/init')
+  }
+  if (to.meta.title) {
+    document.title = to.meta.title as string
+  }
+  if (to.meta.needLogin) {
+    if (store?.state?.user?.hasLogined) {
+      next()
+    } else {
+      next({
+        name: 'login',
+        query: {
+          redirect: encodeURIComponent(to.path)
+        }
+      })
+    }
+  } else {
+    next()
+  }
+})
+
+export default router
diff --git a/web/src/management/store/actions.js b/web/src/management/store/actions.js
index bab9a729..91071b4c 100644
--- a/web/src/management/store/actions.js
+++ b/web/src/management/store/actions.js
@@ -1,13 +1,13 @@
-import { getBannerData } from '@/management/api/skin.js';
+import { getBannerData } from '@/management/api/skin.js'
 
 export default {
   async getBannerData({ state, commit }) {
     if (state.bannerList && state.bannerList.length > 0) {
-      return;
+      return
     }
-    const res = await getBannerData();
+    const res = await getBannerData()
     if (res.code === 200) {
-      commit('setBannerList', res.data);
+      commit('setBannerList', res.data)
     }
-  },
-};
+  }
+}
diff --git a/web/src/management/store/edit/actions.js b/web/src/management/store/edit/actions.js
index 0d6b34c1..771917bd 100644
--- a/web/src/management/store/edit/actions.js
+++ b/web/src/management/store/edit/actions.js
@@ -1,28 +1,22 @@
-import { getNewField } from '@/management/utils';
-import { cloneDeep as _cloneDeep, get as _get } from 'lodash-es';
-import { getSurveyById } from '@/management/api/survey';
+import { getNewField } from '@/management/utils'
+import { cloneDeep as _cloneDeep, get as _get } from 'lodash-es'
+import { getSurveyById } from '@/management/api/survey'
 
 export default {
   async init({ state, dispatch }) {
-    const metaData = _get(state, 'schema.metaData');
+    const metaData = _get(state, 'schema.metaData')
     if (!metaData || metaData._id !== state.surveyId) {
-      await dispatch('getSchemaFromRemote');
+      await dispatch('getSchemaFromRemote')
     }
-    dispatch('resetState');
+    dispatch('resetState')
   },
   async getSchemaFromRemote({ commit, state }) {
-    const res = await getSurveyById(state.surveyId);
+    const res = await getSurveyById(state.surveyId)
     if (res.code === 200) {
-      const metaData = res.data.surveyMetaRes;
-      document.title = metaData.title;
-      const {
-        bannerConf,
-        bottomConf,
-        skinConf,
-        baseConf,
-        submitConf,
-        dataConf,
-      } = res.data.surveyConfRes.code;
+      const metaData = res.data.surveyMetaRes
+      document.title = metaData.title
+      const { bannerConf, bottomConf, skinConf, baseConf, submitConf, dataConf } =
+        res.data.surveyConfRes.code
       commit('initSchema', {
         metaData,
         codeData: {
@@ -31,42 +25,40 @@ export default {
           skinConf,
           baseConf,
           submitConf,
-          questionDataList: dataConf.dataList,
-        },
-      });
+          questionDataList: dataConf.dataList
+        }
+      })
     } else {
-      throw new Error(res.errmsg || '问卷不存在');
+      throw new Error(res.errmsg || '问卷不存在')
     }
   },
   resetState({ commit }) {
-    commit('setCurrentEditOne', null);
-    commit('changeStatusPreview', { type: 'Success' });
+    commit('setCurrentEditOne', null)
+    commit('changeStatusPreview', { type: 'Success' })
   },
   // 复制题目到当前题目后
   copyQuestion({ commit, state }, { index }) {
-    const newQuestion = _cloneDeep(state.schema.questionDataList[index]);
-    newQuestion.field = getNewField(
-      state.schema.questionDataList.map((item) => item.field)
-    );
-    commit('addQuestion', { question: newQuestion, index });
+    const newQuestion = _cloneDeep(state.schema.questionDataList[index])
+    newQuestion.field = getNewField(state.schema.questionDataList.map((item) => item.field))
+    commit('addQuestion', { question: newQuestion, index })
   },
   addQuestion({ commit }, { question, index }) {
-    commit('addQuestion', { question, index });
-    commit('updateSchemaUpdateTime', Date.now());
+    commit('addQuestion', { question, index })
+    commit('updateSchemaUpdateTime', Date.now())
   },
   deleteQuestion({ commit }, { index }) {
-    commit('deleteQuestion', { index });
-    commit('updateSchemaUpdateTime', Date.now());
+    commit('deleteQuestion', { index })
+    commit('updateSchemaUpdateTime', Date.now())
   },
   moveQuestion({ commit }, { index, range }) {
-    commit('moveQuestion', { index, range });
-    commit('updateSchemaUpdateTime', Date.now());
+    commit('moveQuestion', { index, range })
+    commit('updateSchemaUpdateTime', Date.now())
   },
   changeSchema({ commit }, { key, value }) {
-    commit('changeSchema', { key, value });
-    commit('updateSchemaUpdateTime', Date.now());
+    commit('changeSchema', { key, value })
+    commit('updateSchemaUpdateTime', Date.now())
   },
   changeThemePreset({ commit }, presets) {
     commit('changeThemePreset', presets)
-  },
-};
+  }
+}
diff --git a/web/src/management/store/edit/getters.js b/web/src/management/store/edit/getters.js
index ec83eb93..3350922d 100644
--- a/web/src/management/store/edit/getters.js
+++ b/web/src/management/store/edit/getters.js
@@ -1,82 +1,71 @@
-import bannerFormConfig from '@/management/config/setterConfig/bannerConfig';
-import logoFormConfig from '@/management/config/setterConfig/logoConfig';
-import submitFormConfig from '@/management/config/setterConfig/submitConfig';
-import questionLoader from '@/materials/questions/questionLoader';
+import submitFormConfig from '@/management/config/setterConfig/submitConfig'
+import questionLoader from '@/materials/questions/questionLoader'
 
 const innerMetaConfig = {
-  banner: {
-    title: '规则说明配置',
-    formConfig: bannerFormConfig,
-  },
-  logo: {
-    title: 'Logo 配置',
-    formConfig: logoFormConfig,
-  },
   submit: {
     title: '提交配置',
-    formConfig: submitFormConfig,
-  },
-};
+    formConfig: submitFormConfig
+  }
+}
 
 export default {
   moduleConfig(state) {
-    const currentEditOne = state.currentEditOne;
+    const currentEditOne = state.currentEditOne
     if (currentEditOne === null) {
-      return null;
+      return null
     }
 
     if (currentEditOne === 'banner' || currentEditOne === 'mainTitle') {
-      return state?.schema?.bannerConf;
+      return state?.schema?.bannerConf
     } else if (currentEditOne === 'submit') {
-      return state?.schema?.submitConf;
+      return state?.schema?.submitConf
     } else if (currentEditOne === 'logo') {
-      return state?.schema?.bottomConf;
+      return state?.schema?.bottomConf
     } else if (!Number.isNaN(currentEditOne)) {
-      return state?.schema?.questionDataList?.[currentEditOne];
+      return state?.schema?.questionDataList?.[currentEditOne]
     } else {
-      return null;
+      return null
     }
   },
   formConfigList(state, getters) {
-    const currentEditOne = state.currentEditOne;
+    const currentEditOne = state.currentEditOne
     if (currentEditOne === null) {
-      return null;
+      return null
     }
 
-    return getters?.currentEditMeta?.formConfig || [];
+    return getters?.currentEditMeta?.formConfig || []
   },
   currentEditMeta(state) {
-    const currentEditOne = state.currentEditOne;
+    const currentEditOne = state.currentEditOne
     if (currentEditOne === null) {
-      return null;
+      return null
     } else if (innerMetaConfig[currentEditOne]) {
-      return innerMetaConfig[currentEditOne];
+      return innerMetaConfig[currentEditOne]
     } else {
-      const questionType =
-        state.schema?.questionDataList?.[currentEditOne]?.type;
-      return questionLoader.getMeta(questionType);
+      const questionType = state.schema?.questionDataList?.[currentEditOne]?.type
+      return questionLoader.getMeta(questionType)
     }
   },
   currentEditKey(state) {
-    const currentEditOne = state.currentEditOne;
+    const currentEditOne = state.currentEditOne
     if (currentEditOne === null) {
-      return null;
+      return null
     }
-    let key = '';
+    let key = ''
     switch (currentEditOne) {
       case 'banner':
       case 'mainTitle':
-        key = 'bannerConf';
-        break;
+        key = 'bannerConf'
+        break
       case 'submit':
-        key = 'submitConf';
-        break;
+        key = 'submitConf'
+        break
       case 'logo':
-        key = 'bottomConf';
-        break;
+        key = 'bottomConf'
+        break
       default:
-        key = `questionDataList.${currentEditOne}`;
+        key = `questionDataList.${currentEditOne}`
     }
-    return key;
-  },
-};
+    return key
+  }
+}
diff --git a/web/src/management/store/edit/index.js b/web/src/management/store/edit/index.js
index 7ab204c5..41d27622 100644
--- a/web/src/management/store/edit/index.js
+++ b/web/src/management/store/edit/index.js
@@ -1,12 +1,12 @@
-import state from './state';
-import mutations from './mutations';
-import actions from './actions';
-import getters from './getters';
+import state from './state'
+import mutations from './mutations'
+import actions from './actions'
+import getters from './getters'
 
 export default {
   namespaced: true,
   state,
   actions,
   getters,
-  mutations,
-};
+  mutations
+}
diff --git a/web/src/management/store/edit/mutations.js b/web/src/management/store/edit/mutations.js
index 3a01ee78..ea62db2f 100644
--- a/web/src/management/store/edit/mutations.js
+++ b/web/src/management/store/edit/mutations.js
@@ -1,94 +1,64 @@
-import { get as _get, set as _set, merge as _merge } from 'lodash-es';
+import { set as _set, merge as _merge } from 'lodash-es'
 
 export default {
   setCurrentEditOne(state, data) {
-    state.currentEditOne = data;
+    state.currentEditOne = data
   },
   changeStatusPreview(state, { type }) {
-    state.currentEditStatus = type;
+    state.currentEditStatus = type
   },
   updateSchemaUpdateTime(state) {
-    state.schemaUpdateTime = Date.now();
+    state.schemaUpdateTime = Date.now()
   },
   initSchema(state, { metaData, codeData }) {
-    state.schema.metaData = metaData;
-    state.schema.bannerConf = _merge(
-      {},
-      state.schema.bannerConf,
-      codeData.bannerConf
-    );
-    state.schema.bottomConf = _merge(
-      {},
-      state.schema.bottomConf,
-      codeData.bottomConf
-    );
-    state.schema.skinConf = _merge(
-      {},
-      state.schema.skinConf,
-      codeData.skinConf
-    );
-    state.schema.baseConf = _merge(
-      {},
-      state.schema.baseConf,
-      codeData.baseConf
-    );
-    state.schema.submitConf = _merge(
-      {},
-      state.schema.submitConf,
-      codeData.submitConf
-    );
-    state.schema.questionDataList = codeData.questionDataList || [];
+    state.schema.metaData = metaData
+    state.schema.bannerConf = _merge({}, state.schema.bannerConf, codeData.bannerConf)
+    state.schema.bottomConf = _merge({}, state.schema.bottomConf, codeData.bottomConf)
+    state.schema.skinConf = _merge({}, state.schema.skinConf, codeData.skinConf)
+    state.schema.baseConf = _merge({}, state.schema.baseConf, codeData.baseConf)
+    state.schema.submitConf = _merge({}, state.schema.submitConf, codeData.submitConf)
+    state.schema.questionDataList = codeData.questionDataList || []
   },
   setSurveyId(state, data) {
-    state.surveyId = data;
+    state.surveyId = data
   },
   addQuestion(state, { question, index }) {
-    state.schema.questionDataList.splice(index, 0, question);
+    state.schema.questionDataList.splice(index, 0, question)
   },
   deleteQuestion(state, { index }) {
-    state.schema.questionDataList.splice(index, 1);
+    state.schema.questionDataList.splice(index, 1)
   },
   moveQuestion(state, { index, range }) {
-    let start, end;
+    let start, end
     if (range < 0) {
       // 向上移动
-      start = index + range;
-      end = index;
+      start = index + range
+      end = index
     } else if (range > 0) {
       // 向下移动
-      start = index + 1;
-      end = index + range + 1;
+      start = index + 1
+      end = index + range + 1
     } else {
       // 无变化
-      return;
+      return
     }
-    const currentData = state.schema.questionDataList[index];
+    const currentData = state.schema.questionDataList[index]
     // 新位置和老位置之间所有的题目
-    const comparedList = state.schema.questionDataList.slice(start, end);
+    const comparedList = state.schema.questionDataList.slice(start, end)
     if (range < 0) {
       // 向上移动
-      state.schema.questionDataList.splice(
-        index + range,
-        1 - range,
-        currentData,
-        ...comparedList
-      );
+      state.schema.questionDataList.splice(index + range, 1 - range, currentData, ...comparedList)
     } else if (range > 0) {
       // 向下移动
-      state.schema.questionDataList.splice(
-        index,
-        range + 1,
-        ...comparedList,
-        currentData
-      );
+      state.schema.questionDataList.splice(index, range + 1, ...comparedList, currentData)
     }
   },
   changeSchema(state, { key, value }) {
-    _set(state.schema, key, value);
+    _set(state.schema, key, value)
   },
   changeThemePreset(state, presets) {
-    Object.keys(presets).forEach(key => {
-      _set(state.schema, key, presets[key]);
+    Object.keys(presets).forEach((key) => {
+      _set(state.schema, key, presets[key])
     })
   }
-};
+}
diff --git a/web/src/management/store/edit/state.js b/web/src/management/store/edit/state.js
index cd2fee07..1175f2f7 100644
--- a/web/src/management/store/edit/state.js
+++ b/web/src/management/store/edit/state.js
@@ -9,26 +9,26 @@ export default {
       titleConfig: {
         mainTitle: '<h3 style="text-align: center">欢迎填写问卷</h3>',
         subTitle: `<p>为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，<span style="color: rgb(204, 0, 0)">期待您的参与！</span></p>`,
-        applyTitle: '',
+        applyTitle: ''
       },
       bannerConfig: {
         bgImage: '',
         bgImageAllowJump: false,
         bgImageJumpLink: '',
         videoLink: '',
-        postImg: '',
-      },
+        postImg: ''
+      }
     },
     bottomConf: {
       logoImage: '',
-      logoImageWidth: '28%',
+      logoImageWidth: '28%'
     },
     skinConf: {
       backgroundConf: {
-        color: "#fff"
+        color: '#fff'
       },
       themeConf: {
-        color: "#ffa600"
+        color: '#ffa600'
       },
       contentConf: {
         opacity: 100
@@ -42,16 +42,16 @@ export default {
       tLimit: 0,
       answerBegTime: '',
       answerEndTime: '',
-      answerLimitTime: 0,
+      answerLimitTime: 0
     },
     submitConf: {
       submitTitle: '',
       msgContent: {},
       confirmAgain: {
-        is_again: true,
+        is_again: true
       },
-      link: '',
+      link: ''
     },
-    questionDataList: [],
-  },
-};
+    questionDataList: []
+  }
+}
diff --git a/web/src/management/store/index.js b/web/src/management/store/index.js
index 5b6176c3..69d22b47 100644
--- a/web/src/management/store/index.js
+++ b/web/src/management/store/index.js
@@ -1,21 +1,18 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import edit from './edit';
-import user from './user';
+import { createStore } from 'vuex'
+import edit from './edit'
+import user from './user'
 
-import actions from './actions';
-import mutations from './mutations';
-import state from './state';
+import actions from './actions'
+import mutations from './mutations'
+import state from './state'
 
-Vue.use(Vuex);
-
-export default new Vuex.Store({
+export default createStore({
   state,
   getters: {},
   mutations,
   actions,
   modules: {
     edit,
-    user,
-  },
-});
+    user
+  }
+})
diff --git a/web/src/management/store/mutations.js b/web/src/management/store/mutations.js
index 33d987c3..4995fdc0 100644
--- a/web/src/management/store/mutations.js
+++ b/web/src/management/store/mutations.js
@@ -1,5 +1,5 @@
 export default {
   setBannerList(state, data) {
-    state.bannerList = data;
-  },
-};
+    state.bannerList = data
+  }
+}
diff --git a/web/src/management/store/state.js b/web/src/management/store/state.js
index e32f38af..54246623 100644
--- a/web/src/management/store/state.js
+++ b/web/src/management/store/state.js
@@ -1,3 +1,3 @@
 export default {
-  bannerList: [],
-};
+  bannerList: []
+}
diff --git a/web/src/management/store/user/index.js b/web/src/management/store/user/index.js
index 30b9b285..14a991eb 100644
--- a/web/src/management/store/user/index.js
+++ b/web/src/management/store/user/index.js
@@ -1,64 +1,64 @@
-const USER_INFO_KEY = 'surveyUserInfo';
+const USER_INFO_KEY = 'surveyUserInfo'
 
 export default {
   namespaced: true,
   state: {
     userInfo: {
       token: '',
-      username: '',
+      username: ''
     },
     hasLogined: false,
     loginTime: null,
-    initialized: false,
+    initialized: false
   },
   mutations: {
     setUserInfo(state, data) {
-      state.userInfo = data;
+      state.userInfo = data
     },
     setHsLogined(state, data) {
-      state.hasLogined = data;
+      state.hasLogined = data
     },
     setLoginTime(state, data) {
-      state.loginTime = data;
+      state.loginTime = data
     },
     setInitialized(state, data) {
-      state.initialized = data;
-    },
+      state.initialized = data
+    }
   },
   actions: {
     init({ dispatch, commit }) {
-      const localData = localStorage.getItem(USER_INFO_KEY);
+      const localData = localStorage.getItem(USER_INFO_KEY)
       if (localData) {
         try {
-          const { userInfo, loginTime } = JSON.parse(localData);
+          const { userInfo, loginTime } = JSON.parse(localData)
           if (Date.now() - loginTime > 7 * 3600000) {
-            localStorage.removeItem(USER_INFO_KEY);
+            localStorage.removeItem(USER_INFO_KEY)
           } else {
-            dispatch('login', userInfo);
+            dispatch('login', userInfo)
           }
         } catch (error) {
-          console.log(error);
+          console.log(error)
         }
       }
-      commit('setInitialized', true);
+      commit('setInitialized', true)
     },
     login({ commit }, data) {
-      const loginTime = Date.now();
-      commit('setUserInfo', data);
-      commit('setHsLogined', true);
-      commit('setLoginTime', loginTime);
+      const loginTime = Date.now()
+      commit('setUserInfo', data)
+      commit('setHsLogined', true)
+      commit('setLoginTime', loginTime)
       localStorage.setItem(
         USER_INFO_KEY,
         JSON.stringify({
           userInfo: data,
-          loginTime: loginTime,
+          loginTime: loginTime
         })
-      );
+      )
     },
     logout({ commit }) {
-      commit('setUserInfo', null);
-      commit('setHsLogined', false);
-      localStorage.removeItem(USER_INFO_KEY);
-    },
-  },
-};
+      commit('setUserInfo', null)
+      commit('setHsLogined', false)
+      localStorage.removeItem(USER_INFO_KEY)
+    }
+  }
+}
diff --git a/web/src/management/styles/edit-btn.scss b/web/src/management/styles/edit-btn.scss
index 138b8f0b..84cf2d68 100644
--- a/web/src/management/styles/edit-btn.scss
+++ b/web/src/management/styles/edit-btn.scss
@@ -15,4 +15,4 @@
   .btn-txt {
     font-size: 12px;
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/management/styles/element-variables.scss b/web/src/management/styles/element-variables.scss
index 8340d777..9ae46b7f 100644
--- a/web/src/management/styles/element-variables.scss
+++ b/web/src/management/styles/element-variables.scss
@@ -1,10 +1,9 @@
-@import "./variable.scss";
-@import "./reset.scss";
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #ffa600
+    )
+  )
+);
 
-/* 改变主题色变量 */
-$--color-primary: $primary-color;
-
-/* 改变 icon 字体路径变量，必需 */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-
-@import "~element-ui/packages/theme-chalk/src/index";
\ No newline at end of file
+@import './variable.scss';
diff --git a/web/src/management/styles/icon.scss b/web/src/management/styles/icon.scss
index 2faad019..dcef1b00 100644
--- a/web/src/management/styles/icon.scss
+++ b/web/src/management/styles/icon.scss
@@ -1,12 +1,13 @@
 @font-face {
-  font-family: 'iconfont';  /* Project id 4263849 */
-  src: url('//at.alicdn.com/t/c/font_4263849_xndlbqcha3l.woff2?t=1711101684869') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4263849_xndlbqcha3l.woff?t=1711101684869') format('woff'),
-       url('//at.alicdn.com/t/c/font_4263849_xndlbqcha3l.ttf?t=1711101684869') format('truetype');
+  font-family: 'iconfont'; /* Project id 4263849 */
+  src:
+    url('//at.alicdn.com/t/c/font_4263849_xndlbqcha3l.woff2?t=1711101684869') format('woff2'),
+    url('//at.alicdn.com/t/c/font_4263849_xndlbqcha3l.woff?t=1711101684869') format('woff'),
+    url('//at.alicdn.com/t/c/font_4263849_xndlbqcha3l.ttf?t=1711101684869') format('truetype');
 }
 
 .iconfont {
-  font-family: "iconfont" !important;
+  font-family: 'iconfont' !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -14,119 +15,119 @@
 }
 
 .icon-fuzhi:before {
-  content: "\e6c4";
+  content: '\e6c4';
 }
 
 .icon-lishi:before {
-  content: "\e6cd";
+  content: '\e6cd';
 }
 
 .icon-baocun:before {
-  content: "\e6ce";
+  content: '\e6ce';
 }
 
 .icon-fanhui:before {
-  content: "\e6cf";
+  content: '\e6cf';
 }
 
 .icon-bianji:before {
-  content: "\e6d0";
+  content: '\e6d0';
 }
 
 .icon-shujutongji:before {
-  content: "\e6d1";
+  content: '\e6d1';
 }
 
 .icon-toufang:before {
-  content: "\e6d2";
+  content: '\e6d2';
 }
 
 .icon-wenjuanbianji:before {
-  content: "\e6ca";
+  content: '\e6ca';
 }
 
 .icon-jieguoyeshezhi:before {
-  content: "\e6cb";
+  content: '\e6cb';
 }
 
 .icon-wenjuanshezhi:before {
-  content: "\eacc";
+  content: '\eacc';
 }
 
 .icon-jiantou:before {
-  content: "\e6c7";
+  content: '\e6c7';
 }
 
 .icon-shangyi:before {
-  content: "\e6c8";
+  content: '\e6c8';
 }
 
 .icon-xiayi:before {
-  content: "\e6c9";
+  content: '\e6c9';
 }
 
 .icon-tuodong:before {
-  content: "\e6c5";
+  content: '\e6c5';
 }
 
 .icon-shanchu:before {
-  content: "\e6c6";
+  content: '\e6c6';
 }
 
 .icon-tixing-toupiao:before {
-  content: "\e6bc";
+  content: '\e6bc';
 }
 
 .icon-tixing-duoxuan:before {
-  content: "\e6c1";
+  content: '\e6c1';
 }
 
 .icon-tixing-panduanti:before {
-  content: "\e6c2";
+  content: '\e6c2';
 }
 
 .icon-tixing-danxuan:before {
-  content: "\e6c3";
+  content: '\e6c3';
 }
 
 .icon-tixing-pingfen:before {
-  content: "\e6be";
+  content: '\e6be';
 }
 
 .icon-tixing-chengshixuanze:before {
-  content: "\e6bf";
+  content: '\e6bf';
 }
 
 .icon-tixing-duohangshuru:before {
-  content: "\e6b4";
+  content: '\e6b4';
 }
 
 .icon-tixing-danhangshuru:before {
-  content: "\e6b5";
+  content: '\e6b5';
 }
 
 .icon-tixing-tiankongti:before {
-  content: "\e6b7";
+  content: '\e6b7';
 }
 
 .icon-tixing-tupian:before {
-  content: "\e6bb";
+  content: '\e6bb';
 }
 
 .icon-chuangjian:before {
-  content: "\e6b3";
+  content: '\e6b3';
 }
 
 .icon-jinru:before {
-  content: "\e6b2";
+  content: '\e6b2';
 }
 
 .icon-erweima:before {
-  content: "\e6c0";
+  content: '\e6c0';
 }
 .icon-yangshishezhi:before {
-  content: "\e6e6";
+  content: '\e6e6';
 }
 .icon-NPSpingfen::before {
-  content: "\e6e7";
-}
\ No newline at end of file
+  content: '\e6e7';
+}
diff --git a/web/src/management/styles/reset-wangeditor.scss b/web/src/management/styles/reset-wangeditor.scss
deleted file mode 100644
index 74c44009..00000000
--- a/web/src/management/styles/reset-wangeditor.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-:root {
-  --w-e-textarea-bg-color: transparent;
-}
-
-.w-e-text-container * {
-  font-size: inherit;
-}
-
-.w-e-text-container [data-slate-editor] h1, .w-e-text-container [data-slate-editor] h2, .w-e-text-container [data-slate-editor] h3, .w-e-text-container [data-slate-editor] h4, .w-e-text-container [data-slate-editor] h5 {
-  margin: 0;
-}
-
-.w-e-text-container [data-slate-editor] p {
-  margin: 0;
-}
\ No newline at end of file
diff --git a/web/src/management/styles/reset.scss b/web/src/management/styles/reset.scss
index c967cda6..9d33cdb9 100644
--- a/web/src/management/styles/reset.scss
+++ b/web/src/management/styles/reset.scss
@@ -20,7 +20,12 @@ html * {
 }
 
 body {
-  font-family: Pingfang SC, 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
+  font-family:
+    Pingfang SC,
+    'Helvetica Neue',
+    Helvetica,
+    STHeiTi,
+    sans-serif;
   font-size: 14px;
   line-height: 1.42857143;
 }
@@ -76,6 +81,13 @@ textarea {
 input {
   -webkit-appearance: none;
 }
+// chrome自动填充密码背景色
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px white inset !important;
+}
 
 input:-ms-clear {
   display: none;
@@ -147,4 +159,4 @@ a {
 
 a:hover * {
   text-decoration: none;
-}
\ No newline at end of file
+}
diff --git a/web/src/management/styles/skin.scss b/web/src/management/styles/skin.scss
deleted file mode 100644
index 99eedd02..00000000
--- a/web/src/management/styles/skin.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// 定义颜色变量
-$primary-color: #ffa600;
-$primary-background-color: #fff;
-$opacity: 1;
-
-// 使用CSS自定义属性
-:root {
-  --primary-color: #{$primary-color};
-  --primary-background-color: #{$primary-background-color};
-  --opacity: #{$opacity};
-}
-
diff --git a/web/src/management/styles/variable.scss b/web/src/management/styles/variable.scss
index 93924326..769ea4c8 100644
--- a/web/src/management/styles/variable.scss
+++ b/web/src/management/styles/variable.scss
@@ -1,30 +1,31 @@
-@import './skin.scss';
+// 定义颜色变量
+$opacity: 1;
+
 $primary-color: #ffa600;
 $primary-color-hover: #fbb733;
-$primary-color-deep: #D48D00;
+$primary-color-deep: #d48d00;
 $primary-color-light: #fffcf0;
 
-
 $normal-color: #4a4c5b;
 $normal-color-hover: #626369;
 $normal-color-deep: #292a36;
 $normal-color-light: #92959c;
 
-
 $disable-color: #f2f4f7;
 $border-color: #e3e4e8;
 $sub-color: #0f8a82;
 
-$font-color: #6E707C;
+$font-color: #6e707c;
 $font-color-title: $normal-color;
-$font-color-stress: #2B3035;
-$font-color-invert: #FFFFFF;
+$font-color-stress: #2b3035;
+$font-color-invert: #ffffff;
 
 $background-color: #f6f7f9;
 $background-color-light: #ffffff;
-$background-color-gray: #F7F9Fb;
-$background-color-dark: #E7E9EB;
+$background-color-gray: #f7f9fb;
+$background-color-dark: #e7e9eb;
 $primary-bg-color: #fef6e6;
+$primary-background-color: #fff;
 
 $title-color-deep: #292a36;
 $title-color: #4a4c5b;
@@ -38,14 +39,18 @@ $error-color: #ec4e29;
 
 $primary-color-light: hsl(48, 100%, 97%);
 
-
-
-
 $title-size: 0.32rem;
 $font-size: 0.28rem;
 $tip-size: 0.22rem;
 
-.el-radio__input.is-checked+.el-radio__label {
+// 使用CSS自定义属性
+:root {
+  --primary-color: #{$primary-color};
+  --primary-background-color: #{$primary-background-color};
+  --opacity: #{$opacity};
+}
+
+.el-radio__input.is-checked + .el-radio__label {
   color: $font-color !important;
 }
 
@@ -64,6 +69,6 @@ $tip-size: 0.22rem;
   border-color: $primary-color !important;
 }
 
-.el-checkbox__input.is-checked+.el-checkbox__label {
+.el-checkbox__input.is-checked + .el-checkbox__label {
   color: $font-color !important;
-}
\ No newline at end of file
+}
diff --git a/web/src/management/utils/constant.js b/web/src/management/utils/constant.js
index 6dde6b4b..e591a75b 100644
--- a/web/src/management/utils/constant.js
+++ b/web/src/management/utils/constant.js
@@ -1,5 +1,5 @@
 // 问卷操作枚举
 export const QOP_MAP = {
   COPY: 'copy',
-  EDIT: 'edit',
-};
+  EDIT: 'edit'
+}
diff --git a/web/src/management/utils/index.js b/web/src/management/utils/index.js
index 6110651c..d756bd8a 100644
--- a/web/src/management/utils/index.js
+++ b/web/src/management/utils/index.js
@@ -1,83 +1,83 @@
-import { defaultQuestionConfig } from '../config/questionConfig';
-import { cloneDeep as _cloneDeep, map as _map } from 'lodash-es';
+import { defaultQuestionConfig } from '../config/questionConfig'
+import { cloneDeep as _cloneDeep, map as _map } from 'lodash-es'
 
 const generateQuestionField = () => {
-  const num = Math.floor(Math.random() * 1000);
-  return `data${num}`;
-};
+  const num = Math.floor(Math.random() * 1000)
+  return `data${num}`
+}
 
 function getRandom(len) {
   return Math.random()
     .toString()
-    .slice(len && typeof len === 'number' ? 0 - len : -6);
+    .slice(len && typeof len === 'number' ? 0 - len : -6)
 }
 
 const generateHash = (hashList) => {
-  let hash = getRandom();
-  let isExistsHash = hashList.includes(hash);
+  let hash = getRandom()
+  let isExistsHash = hashList.includes(hash)
 
   while (isExistsHash) {
-    hash = getRandom();
-    isExistsHash = hashList.includes(hash);
+    hash = getRandom()
+    isExistsHash = hashList.includes(hash)
   }
-  return hash;
-};
+  return hash
+}
 
 function getOptions(type) {
-  const options = [].concat({ ..._cloneDeep(defaultQuestionConfig) }.options);
+  const options = [].concat({ ..._cloneDeep(defaultQuestionConfig) }.options)
   if (type === 'binary-choice') {
-    options[0].text = '对';
-    options[1].text = '错';
+    options[0].text = '对'
+    options[1].text = '错'
   }
-  return options;
+  return options
 }
 
 export const getNewField = (fields) => {
-  let field = generateQuestionField();
-  let isFieldExists = fields.includes(field);
+  let field = generateQuestionField()
+  let isFieldExists = fields.includes(field)
 
   while (isFieldExists) {
-    field = generateQuestionField();
-    isFieldExists = fields.includes(field);
+    field = generateQuestionField()
+    isFieldExists = fields.includes(field)
   }
-  return field;
-};
+  return field
+}
 
 export const getQuestionByType = (type, fields) => {
-  const newQuestion = _cloneDeep(defaultQuestionConfig);
-  newQuestion.type = type;
-  newQuestion.field = getNewField(fields);
-  newQuestion.options = getOptions(type);
-  const hashList = [];
+  const newQuestion = _cloneDeep(defaultQuestionConfig)
+  newQuestion.type = type
+  newQuestion.field = getNewField(fields)
+  newQuestion.options = getOptions(type)
+  const hashList = []
   for (const option of newQuestion.options) {
-    const hash = generateHash(hashList);
-    hashList.push(hash);
-    option.hash = hash;
+    const hash = generateHash(hashList)
+    hashList.push(hash)
+    option.hash = hash
   }
-  return newQuestion;
-};
+  return newQuestion
+}
 
 export function filterQuestionPreviewData(data, currentEditOne = '') {
-  let indexNumber = 1;
+  let indexNumber = 1
 
   return _map(data, (item, index) => {
-    const preType = item.type;
+    const preType = item.type
 
     const newData = {
       ...item,
       isSelected: index === currentEditOne,
       indexNumber: 0,
-      qIndex: index,
-    };
+      qIndex: index
+    }
     // 根据是否展示序号，处理 indexNumber
     if (newData.showIndex) {
-      newData.indexNumber = indexNumber;
-      indexNumber++;
+      newData.indexNumber = indexNumber
+      indexNumber++
     }
 
     // 处理选项的方向
-    newData.layout = /-v/.test(preType) ? 'vertical' : newData.layout;
+    newData.layout = /-v/.test(preType) ? 'vertical' : newData.layout
 
-    return newData;
-  });
+    return newData
+  })
 }
diff --git a/web/src/materials/questions/QuestionContainerB/index.jsx b/web/src/materials/questions/QuestionContainerB/index.jsx
new file mode 100644
index 00000000..2660c75f
--- /dev/null
+++ b/web/src/materials/questions/QuestionContainerB/index.jsx
@@ -0,0 +1,138 @@
+import { computed, defineComponent, onMounted, shallowRef, ref } from 'vue'
+
+import questionLoader from '@/materials/questions/questionLoader.js'
+
+import moduleList from '../common/config/moduleList.js'
+import './style.scss'
+
+import EditOptions from '../widgets/EditOptions'
+import EditTitle from '../widgets/TitleModules/EditTitle'
+
+export const getBlockComponent = async (type) => {
+  const path = moduleList[type]
+  const componentRes = await questionLoader.loadComponent(type, path)
+  const meta = await questionLoader.loadMeta(type)
+  return { componentRes, meta }
+}
+
+export default defineComponent({
+  name: 'QuestionContainerB',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
+    indexNumber: {
+      type: [Number, String],
+      default: 1
+    },
+    moduleConfig: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    isSelected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['blur', 'focus', 'change', 'select'],
+  setup(props, { emit }) {
+    const BlockComponent = shallowRef(null)
+
+    const questionMeta = ref({})
+
+    onMounted(async () => {
+      const { componentRes, meta } = await getBlockComponent(props.type)
+      BlockComponent.value = componentRes.component
+      questionMeta.value = meta
+    })
+    // 根据选中状态和是否meta中的编辑态配置判断是否显示编辑态
+    const showEditComponent = computed(() => {
+      let result = false
+      if (props.isSelected) {
+        const { editConfigure = { optionEdit: { show: false } } } = questionMeta.value
+        result = editConfigure?.optionEdit?.show || editConfigure?.optionEditBar?.show
+      }
+      return result
+    })
+
+    const onBlur = () => {
+      emit('blur')
+    }
+    const onFocus = () => {
+      emit('focus')
+    }
+    const onChange = (data) => {
+      emit('change', data)
+    }
+    const onClick = () => {
+      emit('select', props.indexNumber)
+    }
+
+    return {
+      props,
+      BlockComponent,
+      onClick,
+      onBlur,
+      onFocus,
+      onChange,
+      showEditComponent,
+      questionMeta
+    }
+  },
+  render() {
+    const { isSelected, questionMeta } = this
+
+    const props = {
+      isSelected,
+      ...this.moduleConfig,
+      ...this.$props
+    }
+
+    const { BlockComponent } = this
+    let dynamicComponent = <span>题型组件加载中</span>
+    if (BlockComponent) {
+      dynamicComponent = BlockComponent
+    }
+    return (
+      <div class={['question', isSelected ? 'isSelected' : '']}>
+        {this.showTitle && <EditTitle {...props} onChange={this.onChange} />}
+
+        <div class="question-block">
+          {this.showEditComponent ? (
+            <EditOptions
+              moduleConfig={props.moduleConfig}
+              editConfigure={questionMeta?.editConfigure}
+            >
+              <dynamicComponent
+                readonly
+                {...props}
+                onBlur={this.onBlur}
+                onFocus={this.onFocus}
+                change={this.onChange}
+              />
+            </EditOptions>
+          ) : (
+            <dynamicComponent
+              readonly
+              {...props}
+              onBlur={this.onBlur}
+              onFocus={this.onFocus}
+              change={this.onChange}
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+})
diff --git a/web/src/materials/questions/common/css/question.scss b/web/src/materials/questions/QuestionContainerB/style.scss
similarity index 78%
rename from web/src/materials/questions/common/css/question.scss
rename to web/src/materials/questions/QuestionContainerB/style.scss
index 373380fc..eb516888 100644
--- a/web/src/materials/questions/common/css/question.scss
+++ b/web/src/materials/questions/QuestionContainerB/style.scss
@@ -1,5 +1,3 @@
-@import './default.scss';
-
 .question {
   position: relative;
   padding: 0.2rem 0 0.3rem;
@@ -7,4 +5,4 @@
   &-block {
     padding: 0 0.4rem;
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/materials/questions/QuestionContainerC/index.jsx b/web/src/materials/questions/QuestionContainerC/index.jsx
new file mode 100644
index 00000000..7e7c6bd4
--- /dev/null
+++ b/web/src/materials/questions/QuestionContainerC/index.jsx
@@ -0,0 +1,96 @@
+import { defineComponent, onMounted, shallowRef } from 'vue'
+
+import questionLoader from '@/materials/questions/questionLoader.js'
+
+import moduleList from '../common/config/moduleList.js'
+import './style.scss'
+
+import PreviewTitle from '../widgets/TitleModules/PreviewTitle'
+
+export const getBlockComponent = async (type) => {
+  const path = moduleList[type]
+  const component = await questionLoader.loadComponent(type, path)
+
+  return component
+}
+
+export default defineComponent({
+  name: 'QuestionContainerC',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
+    indexNumber: {
+      type: [Number, String],
+      default: 1
+    },
+    moduleConfig: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    isSelected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['change', 'focus', 'blur'],
+  setup(props, { emit }) {
+    const BlockComponent = shallowRef(null)
+    onMounted(async () => {
+      const { component } = await getBlockComponent(props.type)
+      BlockComponent.value = component
+    })
+    const onBlur = () => {
+      emit('blur')
+    }
+    const onFocus = () => {
+      emit('focus')
+    }
+    const onChange = (data) => {
+      emit('change', data)
+    }
+    return {
+      props,
+      BlockComponent,
+      onBlur,
+      onFocus,
+      onChange
+    }
+  },
+  render() {
+    const props = {
+      ...this.moduleConfig,
+      ...this.$props
+    }
+    const BlockComponent = this.BlockComponent
+    return (
+      <div class={['question']}>
+        {this.showTitle && <PreviewTitle {...props} />}
+        <div class="question-block">
+          {this.BlockComponent ? (
+            <BlockComponent
+              readonly
+              {...props}
+              onBlur={this.onBlur}
+              onFocus={this.onFocus}
+              onChange={this.onChange}
+            />
+          ) : (
+            <span>题型控件加载中</span>
+          )}
+        </div>
+      </div>
+    )
+  }
+})
diff --git a/web/src/materials/questions/QuestionContainerC/style.scss b/web/src/materials/questions/QuestionContainerC/style.scss
new file mode 100644
index 00000000..eb516888
--- /dev/null
+++ b/web/src/materials/questions/QuestionContainerC/style.scss
@@ -0,0 +1,8 @@
+.question {
+  position: relative;
+  padding: 0.2rem 0 0.3rem;
+
+  &-block {
+    padding: 0 0.4rem;
+  }
+}
diff --git a/web/src/materials/questions/components/ErrorTip.vue b/web/src/materials/questions/QuestionRuleContainer/ErrorTip/index.vue
similarity index 80%
rename from web/src/materials/questions/components/ErrorTip.vue
rename to web/src/materials/questions/QuestionRuleContainer/ErrorTip/index.vue
index 8a516d56..b4aec8be 100644
--- a/web/src/materials/questions/components/ErrorTip.vue
+++ b/web/src/materials/questions/QuestionRuleContainer/ErrorTip/index.vue
@@ -8,20 +8,17 @@
 </template>
 <script>
 export default {
-  name: 'ModuleErrTip',
+  name: 'ErrorTip',
   data() {
-    return {};
+    return {}
   },
   props: {
-    msg: String,
+    msg: String
   },
-  methods: {},
-};
+  methods: {}
+}
 </script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" rel="stylesheet/scss" scoped>
-@import '@/render/styles/default.scss';
-
+<style lang="scss" scoped>
 .module-err-tip {
   color: $error-color;
   padding: 0 0.4rem;
diff --git a/web/src/materials/questions/QuestionRuleContainer/index.jsx b/web/src/materials/questions/QuestionRuleContainer/index.jsx
new file mode 100644
index 00000000..76f2b549
--- /dev/null
+++ b/web/src/materials/questions/QuestionRuleContainer/index.jsx
@@ -0,0 +1,186 @@
+import {
+  defineComponent,
+  ref,
+  nextTick,
+  computed,
+  inject,
+  h,
+  unref,
+  onMounted,
+  onBeforeUnmount,
+  getCurrentInstance
+} from 'vue'
+
+import { assign } from 'lodash-es'
+import AsyncValidator from 'async-validator'
+
+import QuestionContainerC from '@/materials/questions/QuestionContainerC'
+import ErrorTip from './ErrorTip/index.vue'
+
+import './style.scss'
+
+export default defineComponent({
+  name: 'QuestionRuleContainer',
+  components: { ErrorTip },
+  props: {
+    readonly: Boolean,
+    showTitle: Boolean,
+    moduleConfig: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    showSpliter: {
+      type: Boolean,
+      default: false
+    },
+    indexNumber: {
+      type: [Number, String],
+      default: 1
+    }
+  },
+  emits: ['change', 'blur'],
+  setup(props, { emit }) {
+    const validateMessage = ref('')
+    const validateState = ref('')
+    const { proxy: instance } = getCurrentInstance()
+    const form = inject('Form', {
+      default: {},
+      type: Object
+    })
+    const $bus = inject('$bus')
+
+    const itemClass = computed(() => {
+      const classList = []
+      classList.push(props.moduleConfig.direction)
+      const type = props.moduleConfig.type
+      if (type) {
+        if (type === 'section') {
+          classList.push('question-type-section')
+        }
+
+        if (type === 'scroll') {
+          classList.push('no-padding')
+        }
+        if (type === 'user-agreement') {
+          classList.push('no-out-padding')
+        }
+      }
+      return classList.join(' ')
+    })
+
+    const show = computed(() => {
+      const { type } = props.moduleConfig
+      return !/hidden|mobileHidden/.test(type)
+    })
+
+    onMounted(() => {
+      $bus.emit && $bus.emit('form.addField', instance)
+    })
+
+    onBeforeUnmount(() => {
+      $bus.emit && $bus.emit('form.removeField', instance)
+    })
+
+    const validate = (trigger, callback = () => {}) => {
+      const rules = getFilteredRule(trigger)
+      // 无规则直接执行回调
+      if (!rules || rules.length === 0) {
+        callback && callback()
+        return true
+      }
+
+      const { field } = props.moduleConfig
+
+      const validator = new AsyncValidator({
+        [field]: rules
+      })
+      //  因为有些input的value是bind上去的，所以应该在下一帧再去校验，否则会出现第一次blur没反应
+      nextTick(() => {
+        // 对填空题单独设置其value
+        let value = unref(form.model)[field]
+        validator.validate(
+          {
+            [field]: value
+          },
+          {
+            firstFields: true
+          },
+          (errors) => {
+            validateState.value = !errors ? 'success' : 'error'
+            validateMessage.value = errors ? errors[0].message : ''
+            callback && callback(validateMessage.value)
+          }
+        )
+      })
+    }
+
+    const onFieldBlur = () => {
+      validate('blur')
+    }
+    const onFieldChange = () => {
+      validate('change')
+    }
+    const getRules = () => {
+      const rules = unref(form.rules)
+      const { field } = props.moduleConfig
+      return rules[field]
+    }
+    const getFilteredRule = (trigger) => {
+      let rules = getRules()
+      if (!rules) {
+        rules = []
+      }
+      return rules
+        .filter((rule) => !rule.trigger || rule.trigger.indexOf(trigger) !== -1)
+        .map((rule) => assign({}, rule))
+    }
+    const handleBlur = () => {
+      emit('blur')
+      onFieldBlur()
+    }
+    const handleChange = (data) => {
+      emit('change', data)
+      onFieldChange()
+    }
+    return {
+      validateMessage,
+      validate,
+      itemClass,
+      show,
+      onFieldBlur,
+      onFieldChange,
+      getRules,
+      getFilteredRule,
+      handleBlur,
+      handleChange
+    }
+  },
+  render() {
+    const { itemClass, validateMessage } = this
+
+    return (
+      <div
+        class={[
+          'question-wrapper',
+          this.moduleConfig.showSpliter ? 'spliter' : '',
+          validateMessage ? 'hasError' : '',
+          itemClass
+        ]}
+      >
+        {h(QuestionContainerC, {
+          type: this.moduleConfig.type,
+          moduleConfig: this.moduleConfig,
+          value: this.moduleConfig.value,
+          indexNumber: this.indexNumber,
+          showTitle: this.showTitle,
+          readonly: this.readonly,
+          onBlur: this.handleBlur,
+          onChange: this.handleChange
+        })}
+        <ErrorTip msg={validateMessage} />
+      </div>
+    )
+  }
+})
diff --git a/web/src/materials/questions/common/css/formItem.scss b/web/src/materials/questions/QuestionRuleContainer/style.scss
similarity index 96%
rename from web/src/materials/questions/common/css/formItem.scss
rename to web/src/materials/questions/QuestionRuleContainer/style.scss
index 189ad997..e4b9ae84 100644
--- a/web/src/materials/questions/common/css/formItem.scss
+++ b/web/src/materials/questions/QuestionRuleContainer/style.scss
@@ -1,4 +1,4 @@
-@import './default.scss';
+@import '@materials/questions/common/css/default.scss';
 
 .question-wrapper {
   position: relative;
@@ -112,8 +112,6 @@
   }
 }
 
-
-
 .isPc .question-form-item {
   border-bottom: none;
 
@@ -122,4 +120,4 @@
     margin-bottom: 0.24rem;
     margin-top: -0.14rem;
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/materials/questions/common/config/basicConfig.js b/web/src/materials/questions/common/config/basicConfig.js
index 2f08c079..a2b53e6b 100644
--- a/web/src/materials/questions/common/config/basicConfig.js
+++ b/web/src/materials/questions/common/config/basicConfig.js
@@ -1,36 +1,33 @@
-import { pick as _pick } from 'lodash-es';
+import { pick as _pick } from 'lodash-es'
 
 export default {
   name: 'basicConfig',
-  label: '基础配置',
+  title: '基础配置',
   type: 'CheckboxGroup',
   key: 'basicConfig',
-  labelStyle: {
-    'font-weight': 'bold',
-  },
   options: [
     {
       label: '必填',
-      key: 'isRequired',
+      key: 'isRequired'
     },
     {
       label: '显示类型',
-      key: 'showType',
+      key: 'showType'
     },
     {
       label: '显示序号',
-      key: 'showIndex',
+      key: 'showIndex'
     },
     {
       label: '显示分割线',
       key: 'showSpliter',
-      tip: '题目下方分割线，仅在移动端展示。',
-    },
+      tip: '题目下方分割线，仅在移动端展示。'
+    }
   ],
   valueAdapter({ moduleConfig }) {
     return _pick(
       moduleConfig,
       this.options.map((item) => item.key)
-    );
-  },
-};
+    )
+  }
+}
diff --git a/web/src/materials/questions/common/config/moduleList.js b/web/src/materials/questions/common/config/moduleList.js
index 06e54a67..d922b0f3 100644
--- a/web/src/materials/questions/common/config/moduleList.js
+++ b/web/src/materials/questions/common/config/moduleList.js
@@ -10,5 +10,5 @@ export default {
   city: 'CityModule',
   vote: 'VoteModule',
   'matrix-checkbox': 'GroupModule',
-  selectMoreModule: 'SelectMoreModule',
-};
+  selectMoreModule: 'SelectMoreModule'
+}
diff --git a/web/src/materials/questions/common/config/tagList.js b/web/src/materials/questions/common/config/tagList.js
index 8da5835f..a04862e7 100644
--- a/web/src/materials/questions/common/config/tagList.js
+++ b/web/src/materials/questions/common/config/tagList.js
@@ -9,7 +9,7 @@ const config = {
   city: '城市选择',
   vote: '投票',
   'binary-choice': '判断',
-  fillin: '填空',
-};
+  fillin: '填空'
+}
 
-export default config;
+export default config
diff --git a/web/src/materials/questions/common/config/typeMap.js b/web/src/materials/questions/common/config/typeMap.js
index f807c509..4c292103 100644
--- a/web/src/materials/questions/common/config/typeMap.js
+++ b/web/src/materials/questions/common/config/typeMap.js
@@ -5,5 +5,5 @@ export const typeMap = {
   'checkbox-v': 'checkbox',
   'checkbox-h': 'checkbox',
   'vote-checkbox': 'vote',
-  'vote-radio': 'vote',
-};
+  'vote-radio': 'vote'
+}
diff --git a/web/src/materials/questions/common/css/default.scss b/web/src/materials/questions/common/css/default.scss
index 576ae519..5737121b 100644
--- a/web/src/materials/questions/common/css/default.scss
+++ b/web/src/materials/questions/common/css/default.scss
@@ -15,7 +15,6 @@ $spliter-color: #f7f7f7;
 
 $error-color: #ec4e29;
 
-
 $title-size: 0.32rem;
 $font-size: 0.28rem;
 $tip-size: 0.22rem;
diff --git a/web/src/materials/questions/common/css/group.scss b/web/src/materials/questions/common/css/group.scss
deleted file mode 100644
index 087caa5a..00000000
--- a/web/src/materials/questions/common/css/group.scss
+++ /dev/null
@@ -1,193 +0,0 @@
-@import './default.scss';
-
-.isPc .group-wrapper.group-radio .module-err-tip {
-  position: relative;
-}
-
-.isPc .group-wrapper.group-radio .question-form-item {
-  margin-bottom: 0;
-}
-
-.isPc .group-wrapper.group-radio {
-  .matrix-select-more {
-    margin-left: 0;
-
-    .module-err-tip {
-      left: 0;
-    }
-  }
-}
-
-.group-wrapper {
-  width: 100%;
-
-  // overflow: hidden;
-  &::-webkit-scrollbar {
-    display: block;
-    height: 10px;
-    background-color: #F2F4F7;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: #E3E4E8;
-  }
-
-  &::-webkit-scrollbar-track {
-    height: 16px;
-    background: #F2F4F7;
-  }
-
-  .form-item-wrapper {
-    padding: 0 0 .2rem 0;
-    box-sizing: border-box;
-  }
-
-  .question-form-item {
-    padding: .16rem 0 .4rem;
-    border-bottom: none;
-
-    .module-title {
-      padding: 0 0 .24rem 0.2rem;
-      font-size: .28rem;
-      font-weight: 400;
-    }
-
-    .component-wrapper {
-      padding: 0;
-
-      .star-wrapper {
-        padding: 0 .35rem;
-      }
-
-      .nps-wrapper {
-        padding: 0;
-      }
-    }
-
-    &:last-child {
-      padding-bottom: 0;
-    }
-
-    &.hasError .module-err-tip.show {
-      padding: 0;
-    }
-  }
-
-  .box {
-    display: flex;
-  }
-
-  .group-title.main {
-    background: #F2F4F7;
-    padding: 0;
-    min-height: .4rem;
-    line-height: .4rem;
-    box-sizing: border-box;
-    display: flex;
-
-    span {
-      display: inline-block;
-      box-sizing: border-box;
-      vertical-align: top;
-      font-size: .28rem;
-      color: $title-color;
-      text-align: center;
-      line-height: 0.4rem;
-      // font-weight: 500;
-      width: 100%;
-      word-break: break-word;
-      border-left: 1px dotted rgba(200, 201, 205, 1);
-      height: auto;
-    }
-
-    &>span:first-child {
-      border: none;
-    }
-
-    .group-title-text span {
-      border: none;
-    }
-
-    &>span {
-      padding: .2rem .1rem;
-    }
-  }
-
-  &.group-radio {
-    .module-title {
-      // color: $font-color;
-      line-height: .36rem;
-    }
-
-    .question-form-item {
-      padding: .4rem 0 .4rem 0;
-    }
-
-    .checkbox-wrapper,
-    .radio-wrapper {
-      .radio-box.nest-box .radio-outer .radio-item {
-        padding: .22rem 0;
-      }
-    }
-
-    .module-err-tip {
-      margin-top: .25rem;
-    }
-  }
-}
-
-.horizontal {
-  .group-title {
-    padding-left: 25%;
-  }
-
-  .question-form-item {
-    width: 100%;
-    font-size: 0;
-    overflow: hidden;
-    border-bottom: 1px solid #eee;
-    margin-bottom: .2rem;
-    padding-top: .2rem;
-
-    .module-title {
-      float: left;
-      width: 27%;
-      vertical-align: top;
-      font-size: .26rem !important;
-    }
-
-    .checkbox-wrapper,
-    .radio-wrapper {
-      display: inline-block;
-      width: 70%;
-      vertical-align: top;
-      border-bottom: none;
-    }
-  }
-}
-
-.select-more-label {
-  display: block;
-  margin-top: .2rem;
-  // margin-bottom: -.2rem;
-  height: .3rem;
-  line-height: .3rem;
-  width: 100%;
-  color: #666;
-  font-size: .26rem;
-}
-
-.matrix-select-more {
-  max-width: 10rem;
-
-  .question-form-item {
-    padding-top: 0px;
-
-    .m-select-more {
-      margin-top: .3rem;
-      margin-bottom: .5rem;
-      width: 100% !important;
-    }
-  }
-}
\ No newline at end of file
diff --git a/web/src/materials/questions/common/css/icon.scss b/web/src/materials/questions/common/css/icon.scss
index 876f00c2..8bb68231 100644
--- a/web/src/materials/questions/common/css/icon.scss
+++ b/web/src/materials/questions/common/css/icon.scss
@@ -1,13 +1,14 @@
 @font-face {
-  font-family: "qicon";
+  font-family: 'qicon';
   /* Project id 4263885 */
-  src: url('//at.alicdn.com/t/c/font_4263885_u91txz1d68.woff2?t=1697079806138') format('woff2'),
+  src:
+    url('//at.alicdn.com/t/c/font_4263885_u91txz1d68.woff2?t=1697079806138') format('woff2'),
     url('//at.alicdn.com/t/c/font_4263885_u91txz1d68.woff?t=1697079806138') format('woff'),
     url('//at.alicdn.com/t/c/font_4263885_u91txz1d68.ttf?t=1697079806138') format('truetype');
 }
 
 .qicon {
-  font-family: "qicon" !important;
+  font-family: 'qicon' !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -15,25 +16,25 @@
 }
 
 .qicon-tishi:before {
-  content: "\e6cc";
+  content: '\e6cc';
 }
 
 .qicon-fuzhi:before {
-  content: "\e6c4";
+  content: '\e6c4';
 }
 
 .qicon-tuodong:before {
-  content: "\e6c7";
+  content: '\e6c7';
 }
 
 .qicon-gouxuan:before {
-  content: "\a6c8";
+  content: '\a6c8';
 }
 
 .qicon-aixin:before {
-  content: "\e6cd";
+  content: '\e6cd';
 }
 
 .qicon-xingxing:before {
-  content: "\a6ca";
-}
\ No newline at end of file
+  content: '\a6ca';
+}
diff --git a/web/src/materials/questions/common/css/input.scss b/web/src/materials/questions/common/css/input.scss
deleted file mode 100644
index a4b4d1b3..00000000
--- a/web/src/materials/questions/common/css/input.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-@import './default.scss';
-
-.input-wrapper {
-    font-size: 0;
-
-    .input-box {
-        outline: none;
-        font-size: 0.56rem;
-        padding: 0.4rem;
-        border-radius: .08rem;
-        background-color: #fff;
-        vertical-align: top;
-
-        border: 1px solid $border-color;
-        width: 200%;
-        height: 1.61rem;
-
-        transform: scale(0.5, 0.5);
-        transform-origin: left top;
-        box-sizing: border-box;
-        margin-bottom: -.81rem;
-        overflow: hidden;
-        // overflow: hidden;
-        color: $font-color;
-        z-index: 10;
-
-        &.is-focused:focus {
-            border: 1px solid $primary-color;
-            height: 3.5rem;
-            margin-bottom: -1.75rem;
-            overflow-y: scroll;
-        }
-
-        &:not([readonly="readonly"]):hover {
-            border: 1px solid $primary-color;
-        }
-
-        &.print {
-            border: none;
-            border-bottom: 1px solid $border-color;
-            border-radius: 0;
-        }
-
-        &::-webkit-input-placeholder {
-            /* WebKit browsers */
-            font-size: .56rem;
-            font-weight: 300;
-            color: $placeholder-color;
-        }
-
-        &:-moz-placeholder {
-            /* Mozilla Firefox 4 to 18 */
-            font-size: .56rem;
-            font-weight: 300;
-            color: $placeholder-color;
-        }
-
-        &::-moz-placeholder {
-            /* Mozilla Firefox 19+ */
-            font-size: .56rem;
-            font-weight: 300;
-            color: $placeholder-color;
-        }
-
-        &:-ms-input-placeholder {
-            /* Internet Explorer 10+ */
-            font-size: .56rem;
-            font-weight: 300;
-            color: $placeholder-color;
-        }
-    }
-
-    .text-number-tip {
-        font-size: .24rem;
-        color: $font-color;
-        float: right;
-        margin-right: .1rem;
-        margin-top: .1rem;
-    }
-
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-        -webkit-appearance: none !important;
-        margin: 0;
-    }
-
-    input[type="number"] {
-        -moz-appearance: textfield;
-    }
-
-    textarea {
-        resize: none;
-    }
-}
\ No newline at end of file
diff --git a/web/src/materials/questions/common/css/option.scss b/web/src/materials/questions/common/css/option.scss
deleted file mode 100644
index 203f4105..00000000
--- a/web/src/materials/questions/common/css/option.scss
+++ /dev/null
@@ -1,230 +0,0 @@
-@import "./default.scss";
-
-.question-preview .radio-wrapper {
-    font-size: 14px;
-    .radio-box {
-        .draggHandle {
-            cursor: move;
-        }
-        #sortDraggable {
-            user-select: none;
-            padding-right: 0.08rem;
-            .sortable-drag,
-            .sortable-ghost {
-                .radio-item {
-                    border-color: $primary-color;
-                    border-radius: 0.04rem;
-                }
-            }
-            .sortable-fallback {
-                .radio-item {
-                    background-color: $primary-color;
-                }
-            }
-        }
-        .radio-item {
-            position: relative;
-            display: inline-flex;
-            width: 50%;
-            box-sizing: border-box;
-            vertical-align: top;
-            // padding: 0.1rem 0.2rem 0.1rem 0.35rem;
-            margin-bottom: 0.36rem;
-            cursor: pointer;
-            border: 1px solid transparent;
-            align-items: center;
-            .item-input {
-                position: relative;
-                vertical-align: top;
-                width: 0.32rem;
-                height: 0.32rem;
-                margin: 0 0.24rem 0 0;
-                border: 1px solid $border-color;
-                border-radius: 100%;
-                background-color: #fff;
-                cursor: pointer;
-            }
-
-            .item-title {
-                flex: 1;
-                vertical-align: top;
-                color: $font-color;
-                font-size: $font-size;
-                overflow: hidden;
-                word-wrap: break-word;
-                cursor: pointer;
-                padding: 9px 0;
-                .label-img {
-                    display: block;
-                    width: 1.7rem;
-                    height: 1.7rem;
-                    margin-top: 0.25rem;
-                }
-                .render-html {
-                    display: block;
-                    margin: 5px 0;
-                }
-            }
-            .center-text {
-                span {
-                    display: inline-block;
-                    text-align: center;
-                }
-            }
-
-            &.lastchild,
-            &.last2child {
-                margin-bottom: 0;
-            }
-            &.is-checked {
-                .item-title {
-                    color: $primary-color;
-                }
-                .item-input {
-                    background-color: $primary-color;
-                    border-color: $primary-color;
-                }
-                .text-checked {
-                    font-size: 0.20rem;
-                    line-height: 0.32rem;
-                    color: #fff;
-                    text-align: center;
-                }
-                .checked:before {
-                    display: inline-block;
-                    margin-left: 0.05rem;
-                    font-size: 0.20rem;
-                    line-height: 0.32rem;
-                    color: #fff;
-                    content: '✓';
-                }
-                transition: all 0.3s ease-in-out;
-            }
-            &:not(.is-checked) {
-                background-color: transparent;
-                .item-title {
-                    color: $font-color;
-                }
-                transition: all 0.3s ease-in-out;
-            }
-            &.freezing-right {
-                background-color: $primary-color-light;
-            }
-            &.freezing-wrong {
-                background-color: #fafbfc;
-            }
-            .answer {
-                color: $normal-color;
-                font-size: 13px;
-                display: flex;
-                align-items: center;
-                .answer-circle {
-                    display: inline-block;
-                    width: 0.3rem;
-                    height: 0.3rem;
-                    text-align: center;
-                    line-height: 0.3rem;
-                    border-radius: 0.15rem;
-                    margin-right: 0.1rem;
-                    vertical-align: sub;
-                    &.success {
-                        color: white;
-                        background: #05c98a;
-                    }
-                    &.error {
-                        color: white;
-                        background: #ff612c;
-                    }
-                }
-            }
-        }
-        .vertical {
-            width: 100%;
-            &.radio-item.last2child {
-                margin-bottom: 0.36rem;
-            }
-        }
-        .option-jumpto-tip {
-            position: relative;
-            display: block;
-            color: $placeholder-color;
-            font-size: 12px;
-            margin-top: 12px;
-        }
-    }
-
-    .nest-box {
-        display: flex;
-        justify-content: space-around;
-        .radio-outer {
-            flex: 1;
-            display: inline-block;
-            text-align: center;
-            .radio-item {
-                display: inline-block;
-                margin-bottom: 0;
-                .item-input {
-                    margin-right: 0;
-                }
-                .item-title {
-                    visibility: hidden;
-                    opacity: 0;
-                    display: block;
-                    height: 0.3rem;
-                    font-size: 0.23rem;
-                    margin-top: 0.05rem;
-                    margin-bottom: 0.06rem;
-                    color: $font-color;
-                }
-            }
-        }
-        &.radio-box {
-            padding: 0;
-        }
-    }
-    .showScoreItem {
-        font-size: 12px;
-        display: inline-block;
-        position: absolute;
-        bottom: -18px;
-        left: 40px;
-        color: $placeholder-color;
-    }
-}
-.radio {
-    .radio-box .radio-item.enable-hover:hover {
-        border: 1px dashed $placeholder-color;
-    }
-}
-.optionRelyTips {
-    text-indent: 16px;
-    width: 100%;
-    height: 15px;
-    font-size: 14px;
-    line-height: 15px;
-    color: #aaa;
-}
-
-.answer-tip {
-    position: relative;
-    color: $font-color;
-    font-size: 13px;
-    background: #f8f9fb;
-    margin-top: 0.15rem;
-    padding: 15px;
-    &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 0.2rem solid transparent;
-        border-top: 0.2rem solid #f3f4f7;
-        border-left: 0.2rem solid #f3f4f7;
-    }
-    p {
-        display: flex;
-    }
-    .answer {
-        flex: 3;
-    }
-}
\ No newline at end of file
diff --git a/web/src/materials/questions/common/css/radioQuestion.scss b/web/src/materials/questions/common/css/radioQuestion.scss
deleted file mode 100644
index 0fe51337..00000000
--- a/web/src/materials/questions/common/css/radioQuestion.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@import './default.scss';
-
-.question-form-item {
-  position: relative;
-  padding: 0.2rem 0 0.8rem;
-
-  .component-wrapper {
-    padding: 0 0.4rem;
-  }
-
-  .noPadding {
-    padding: 0;
-  }
-
-  &.no-padding {
-    .component-wrapper {
-      padding: 0;
-    }
-  }
-
-  &.no-out-padding {
-    padding: 0 0 0.2rem;
-  }
-
-  .clear {
-    clear: both;
-  }
-
-  &.question-type-section {
-    padding-bottom: 0;
-
-    .module-title {
-      padding-bottom: 0;
-    }
-  }
-
-  &.horizon {
-    display: flex;
-
-    .module-title .m-title {
-      width: 1.2rem;
-      margin-right: 8px;
-      text-align: justify;
-      position: relative;
-
-      &::before {
-        content: ':';
-        display: block;
-        position: absolute;
-        right: -5px;
-      }
-
-      &::after {
-        content: '';
-        display: inline-block;
-        width: 100%;
-      }
-    }
-
-    .component-wrapper {
-      flex: 1;
-    }
-
-    &.hasError {
-      margin-bottom: 0.4rem;
-    }
-
-    .module-err-tip {
-      position: absolute;
-      padding: 0;
-      margin-top: -5px;
-      left: 0;
-
-      .tip-text {
-        padding-top: 0;
-      }
-    }
-  }
-
-  &.hasError {
-    .item-border {
-      border-color: $error-color;
-    }
-
-    /*由于错误提示可能多行，因此有错误时取消margin，让错误提示撑开边距*/
-    margin-bottom: 0;
-  }
-
-  &.special .module-err-tip {
-    padding: 0.12rem 0.75rem 0;
-  }
-
-  &.spliter {
-    border-bottom: 0.12rem solid $spliter-color;
-  }
-
-  &:last-child {
-    border-bottom: 0;
-  }
-
-  .sort-tip {
-    font-size: 0.26rem;
-    line-height: 0.26rem;
-    opacity: 0.5;
-    margin-top: -0.24rem;
-    margin-bottom: 0.4rem;
-    padding-left: 0.4rem;
-    color: #92949d;
-  }
-}
\ No newline at end of file
diff --git a/web/src/materials/questions/common/css/radioStar.scss b/web/src/materials/questions/common/css/radioStar.scss
deleted file mode 100644
index ee38b93d..00000000
--- a/web/src/materials/questions/common/css/radioStar.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@import './default.scss';
-.star-wrapper-main {
-    // .isShowInput{
-    //   padding-bottom: 0 !important ;
-    // }
-      .explain {
-          line-height: 0.48rem;
-          font-size: 0.24rem;
-          color: #92949D;
-          padding: 0 0.4rem;
-      }
-      .radio-star {
-          &.isPc {
-              margin-bottom: 0.2rem;
-          }
-      }
-      .matrix-radio-star {
-          &.isPc {
-              margin-bottom: -0.2rem;
-          }
-      }
-      .star-box {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 0.2rem;
-      }
-      .star-item {
-          display: inline-block;
-          font-size: .42rem;
-          flex: 1;
-          text-align: center;
-          cursor: pointer;
-          &.qicon {
-            color: #E3E4E8;
-              &.on {
-                  color: $primary-color;
-              }
-              &.off {
-                  color: #E3E4E8;
-              }
-          }
-          &.number {
-              color: #fff;
-              height: 0.62rem;
-              font-size: 0.28rem;
-              line-height: 0.62rem;
-              &.on {
-                  background-color: $primary-color;
-              }
-              &.off {
-                  background-color: #E3E4E8;
-              }
-              &:not(:last-child) {
-                  margin-right: .08rem;
-              }
-          }
-
-      }
-      .print {
-          width: 96%;
-          margin-left: -3%;
-          display: flex;
-          div {
-              flex: 1;
-              display: inline-block;
-              div {
-                  display: inline-block;
-                  color: #333;
-                  font-size: 0.27rem;
-                  height: .32rem;
-                  line-height: .32rem;
-                  vertical-align: middle;
-              }
-              .box {
-                  display: inline-block;
-                  width: .32rem;
-                  height: .32rem;
-                  border: 1px solid #ddd;
-              }
-          }
-      }
-      
-      .hidden {
-          display: none;
-          visibility: hidden;
-      }
-  }
\ No newline at end of file
diff --git a/web/src/materials/questions/common/css/textarea.scss b/web/src/materials/questions/common/css/textarea.scss
deleted file mode 100644
index 74cb8af6..00000000
--- a/web/src/materials/questions/common/css/textarea.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-@import './default.scss';
-.textarea-wrapper {
-    font-size: 0;
-    .input-box {
-        resize: vertical;
-        padding: 0.4rem;
-        border-radius: .08rem;
-        background-color: #fff;
-        border: 1px solid #ddd;
-        -webkit-appearance: none;
-        vertical-align: top;
-
-        width: 200%;
-        font-size: 0.54rem;
-        height: 1.61rem;
-        transform: scale(0.5, 0.5);
-        transform-origin: 0 0;
-        box-sizing: border-box;
-        margin-bottom: -.81rem;
-        overflow: hidden;
-        resize: none;
-        transition: height .2s ease-out;
-        -webkit-transition: height .2s ease-out;
-        color: $font-color;
-        &:focus, &.is-focused {
-            border: 1px solid $primary-color;
-            height: 3.5rem;
-            margin-bottom: -1.75rem;
-            overflow-y: scroll;
-        }
-        &:hover{
-            border: 1px solid $primary-color;
-        }
-        &::-webkit-input-placeholder { /* WebKit browsers */
-            font-size: .56rem;
-            font-weight: 300;
-            color: $placeholder-color;
-        }
-        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-            font-size: .56rem;
-            font-weight: 300;
-            color: $placeholder-color;
-        }
-        &::-moz-placeholder { /* Mozilla Firefox 19+ */
-            font-size: .56rem;
-            font-weight: 300;
-            color: $placeholder-color;
-        }
-        &:-ms-input-placeholder { /* Internet Explorer 10+ */
-            font-size: .56rem;
-            font-weight: 300;
-            color: $placeholder-color;
-        }
-    }
-
-    .print-line-wrapper {
-        width: 96%;
-        margin: 0 2%;
-        .print-line {
-            height: .75rem;
-            border-bottom: 1px solid #ddd;
-        }
-    }
-
-    .text-number-tip {
-        font-size: .24rem;
-        color: $font-color;
-        float: right;
-        margin-top: .1rem;
-    }
-
-    .answer-tip {
-        width: 98%;
-        height: auto;
-        font-size: 0.25rem;
-        color: #666;
-        margin-top: .2rem;
-        padding: 5px;
-        border: 1px dashed $border-color;
-    }
-}
\ No newline at end of file
diff --git a/web/src/materials/questions/common/css/title.scss b/web/src/materials/questions/common/css/title.scss
deleted file mode 100644
index b41856cb..00000000
--- a/web/src/materials/questions/common/css/title.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-@import './default.scss';
-.question-form-item.isSelected{ 
-  background-color: #f2f4f7;
-  -webkit-box-shadow: 0 0 5px #e3e4e8;
-  box-shadow: 0 0 5px #e3e4e8;
-}
-.module-title {
-  position: relative;
-  height: auto;
-  line-height: 0.45rem;
-  font-size: $title-size;
-  padding: 0 0.4rem 0.4rem;
-  color: #000000;
-  font-weight: normal;
-  &-required {
-    color: $error-color;
-    position: absolute;
-    left: 0.16rem;
-    top: 0rem;
-    font-size: 0.2rem;
-    // transform: scale(0.5);
-    transform-origin: left top;
-  }
-  .score-text {
-    color: #999;
-    margin-left: 0.2rem;
-    font-size: 0.24rem;
-  }
-  &-title {
-    zoom: 1;
-    display: flex;
-    font-size: $title-size;
-    img {
-      max-width: 100%;
-    }
-    .index {
-      float: left;
-      padding-right: 0.06rem;
-      font-size: $title-size;
-    }
-    &-text{
-      font-size: $title-size;
-      p, span{
-        font-size: inherit;
-      }
-    }
-    em {
-      font-style: italic;
-    }
-    u {
-      text-decoration: underline;
-    }
-    .richeditor {
-      position: relative;
-      cursor: pointer;
-      width: 100%;
-      margin: -10px 0;
-      flex: 1;
-      font-size: .32rem;
-      background-color: #fff;
-    }
-  }
-
-  .m-tag {
-    border: 1px solid $primary-color;
-    font-size: 0.18rem;
-    height: 0.4rem;
-    line-height: 0.4rem;
-    display: inline-block;
-    color: $primary-color;
-    padding: 0 0.16rem;
-    margin-left: 0.16rem;
-    border-radius: 0 0.06rem 0 0.06rem;
-  }
-}
diff --git a/web/src/materials/questions/common/css/vote.scss b/web/src/materials/questions/common/css/vote.scss
deleted file mode 100644
index 99e73d10..00000000
--- a/web/src/materials/questions/common/css/vote.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@import './default.scss';
-// .vote-wrapper {
-//     .radio-wrapper.vote .radio-box .radio-item {
-//         padding-left: .35rem;
-//         &:hover {
-//             background-color: transparent;
-//         }
-//     }
-    .vote-detail{
-        padding-top: 0.12rem;
-        align-items:center;
-        display: flex;
-        .process-outer{
-            flex: 1;
-        }
-        .vote-percent{
-            width: 0.86rem;
-            font-size: 0.24rem;
-            color: $font-color;
-            margin-left: 0.24rem;
-        }
-        .vote-count{
-            width: 0.8rem;
-            margin-left: 0.1rem;
-            text-align: right;
-            font-size: 0.24rem;
-            color: $font-color;
-        }
-    }
-// }
diff --git a/web/src/materials/questions/common/utils/getOptionHash.js b/web/src/materials/questions/common/utils/getOptionHash.js
index 3bda318c..064bf468 100644
--- a/web/src/materials/questions/common/utils/getOptionHash.js
+++ b/web/src/materials/questions/common/utils/getOptionHash.js
@@ -1,23 +1,23 @@
 function getRandom(len) {
   return Math.random()
     .toString()
-    .slice(len && typeof len === 'number' ? 0 - len : -6);
+    .slice(len && typeof len === 'number' ? 0 - len : -6)
 }
 export default class GetHash {
   constructor() {
-    this.hashMap = {};
+    this.hashMap = {}
   }
 
   getHash(len) {
-    let random = getRandom(len);
+    let random = getRandom(len)
     while (random in this.hashMap) {
-      random = getRandom(len);
+      random = getRandom(len)
     }
-    this.hashMap[random] = true;
-    return random;
+    this.hashMap[random] = true
+    return random
   }
 }
 
-const hashGen = new GetHash();
+const hashGen = new GetHash()
 
-export { hashGen };
+export { hashGen }
diff --git a/web/src/materials/questions/common/utils/index.js b/web/src/materials/questions/common/utils/index.js
index c1b9ea27..2262b92f 100644
--- a/web/src/materials/questions/common/utils/index.js
+++ b/web/src/materials/questions/common/utils/index.js
@@ -1,20 +1,20 @@
-import { forEach as _forEach, trim as _trim } from 'lodash-es';
-import { escapeFilterXSS } from '@/common/xss';
+import { forEach as _forEach, trim as _trim } from 'lodash-es'
+import { escapeFilterXSS } from '@/common/xss'
 
 // 获取选项的hash
 export function getNewHash(hashMap) {
-  let random = getRandom();
+  let random = getRandom()
   while (random in hashMap) {
-    random = getRandom();
+    random = getRandom()
   }
-  return random;
+  return random
 }
 
 // 获取长度为6或者指定长度的的随机字符串
 export function getRandom(len) {
   return Math.random()
     .toString()
-    .slice(len && typeof len === 'number' ? 0 - len : -6);
+    .slice(len && typeof len === 'number' ? 0 - len : -6)
 }
 
 const optionListItem = [
@@ -26,58 +26,52 @@ const optionListItem = [
   'score',
   'othersKey',
   'placeholderDesc',
-  'hash',
-];
+  'hash'
+]
 
 // 根据批量导入的问题生成多个选项
 export function getMultiOptionByText(text) {
-  let moduleData = [];
-  let data = text.split('\n').filter((item) => item.trim());
+  let moduleData = []
+  let data = text.split('\n').filter((item) => item.trim())
   if (data && data.length > 0) {
     _forEach(data, (d) => {
-      const rData = d.split('\t');
+      const rData = d.split('\t')
       let rObj = {},
-        j = 0;
-      let hashMap = {};
+        j = 0
+      let hashMap = {}
       try {
         _forEach(optionListItem, (key) => {
           switch (key) {
             case 'mustOthers':
-              rObj[key] = !(
-                _trim(rData[j]) === 'false' || _trim(rData[j]) === ''
-              );
-              j++;
-              break;
+              rObj[key] = !(_trim(rData[j]) === 'false' || _trim(rData[j]) === '')
+              j++
+              break
             case 'others':
-              rObj[key] = !(
-                _trim(rData[j]) === 'false' || _trim(rData[j]) === ''
-              );
-              j++;
-              break;
+              rObj[key] = !(_trim(rData[j]) === 'false' || _trim(rData[j]) === '')
+              j++
+              break
             case 'score':
-              rObj[key] = parseInt(_trim(rData[j]))
-                ? parseInt(_trim(rData[j]))
-                : 0;
-              j++;
-              break;
+              rObj[key] = parseInt(_trim(rData[j])) ? parseInt(_trim(rData[j])) : 0
+              j++
+              break
             case 'hash':
               rObj[key] = parseInt(_trim(rData[j]))
                 ? parseInt(_trim(rData[j]))
-                : getNewHash(hashMap);
-              j++;
-              hashMap[rObj[key]] = true;
-              break;
+                : getNewHash(hashMap)
+              j++
+              hashMap[rObj[key]] = true
+              break
             default:
-              rObj[key] = escapeFilterXSS(_trim(rData[j]));
-              j++;
-              break;
+              rObj[key] = escapeFilterXSS(_trim(rData[j]))
+              j++
+              break
           }
-        });
+        })
       } catch (e) {
-        console.error(e);
+        console.error(e)
       }
-      moduleData.push(rObj);
-    });
-    return moduleData;
+      moduleData.push(rObj)
+    })
+    return moduleData
   }
 }
diff --git a/web/src/materials/questions/components/AdvancedConfig/OptionConfig.vue b/web/src/materials/questions/components/AdvancedConfig/OptionConfig.vue
deleted file mode 100644
index 42f6a959..00000000
--- a/web/src/materials/questions/components/AdvancedConfig/OptionConfig.vue
+++ /dev/null
@@ -1,461 +0,0 @@
-<template>
-  <el-dialog
-    title="选项高级设置"
-    custom-class="option-config-wrapper"
-    :visible.sync="configVisible"
-    :append-to-body="true"
-    :width="dialogWidth"
-  >
-    <div class="J-option-handwrite">
-      <div class="option-header">
-        <div class="ohItem flex-1" v-if="showText">选项内容</div>
-        <div class="ohItem w285" v-if="showOthers">选项后增添输入框</div>
-      </div>
-      <div>
-        <draggable :list="curOptions" :options="{ handle: '.drag-handle' }">
-          <div
-            class="option-item"
-            v-for="(optionItem, index) in curOptions"
-            :key="optionItem.hash"
-          >
-            <span class="drag-handle qicon qicon-tuodong"></span>
-            <div class="flex-1 oitem" v-if="showText">
-              <div
-                contenteditable="true"
-                class="render-html"
-                v-safe-html="textOptions[index]"
-                @blur="onBlur($event, index)"
-              ></div>
-            </div>
-            <div class="oitem moreInfo lh36" v-if="showOthers">
-              <el-switch
-                :value="optionItem.others"
-                @change="(val) => changeOptionOthers(val, optionItem)"
-              ></el-switch>
-              <div class="more-info-content" v-if="optionItem.others">
-                <el-input
-                  v-model="optionItem.placeholderDesc"
-                  placeholder="提示文案"
-                ></el-input>
-                <el-checkbox v-model="optionItem.mustOthers">必填</el-checkbox>
-              </div>
-            </div>
-            <div class="operate-area" v-if="showOperateOption">
-              <i
-                class="add el-icon-circle-plus-outline"
-                @click="addOption('选项', false, index)"
-              ></i>
-              <i
-                class="el-icon-remove-outline"
-                v-show="curOptions.length > 1"
-                @click="deleteOption(index)"
-              ></i>
-            </div>
-          </div>
-        </draggable>
-      </div>
-      <div class="add-btn-row">
-        <div
-          class="add-option primary-color"
-          v-if="showOperateOption"
-          @click="addOption()"
-        >
-          <span>
-            <i class="el-icon-circle-plus-outline primary-color"></i>
-            添加新选项
-          </span>
-        </div>
-
-        <div
-          v-if="showOperateOption && showOthers"
-          class="add-option primary-color"
-          @click="addOtherOption"
-        >
-          <span>
-            <extra-icon type="add-square"></extra-icon>
-            其他____
-          </span>
-        </div>
-      </div>
-    </div>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="configVisible = false">取消</el-button>
-      <el-button type="primary" @click="optionConfigChange">确认</el-button>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-import draggable from 'vuedraggable';
-import { forEach as _forEach, cloneDeep as _cloneDeep } from 'lodash-es';
-import ExtraIcon from '../ExtraIcon';
-import { cleanRichText } from '@/common/xss';
-
-export default {
-  name: 'OptionConfig',
-  inject: ['moduleConfig'],
-  data() {
-    return {
-      curOptions: _cloneDeep(this.options),
-      popoverVisible: false,
-    };
-  },
-  props: {
-    options: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    showOptionDialog: {
-      type: Boolean,
-      default: false,
-    },
-    dialogWidth: {
-      type: String,
-      default: '60%',
-    },
-    showOperateOption: {
-      type: Boolean,
-      default: true,
-    },
-    showText: {
-      type: Boolean,
-      default: true,
-    },
-    showOthers: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  computed: {
-    configVisible: {
-      get() {
-        return this.showOptionDialog;
-      },
-      set(newVal) {
-        this.$emit('visibleChange', newVal);
-      },
-    },
-    hashMap() {
-      const mapData = {};
-      _forEach(this.curOptions, (item) => {
-        if (item.hash) {
-          mapData[item.hash] = true;
-        }
-      });
-      return mapData;
-    },
-    textOptions() {
-      return this.curOptions.map((item) => item.text);
-    },
-  },
-  components: {
-    draggable,
-    ExtraIcon,
-  },
-  methods: {
-    addOtherOption() {
-      const { field } = this.moduleConfig;
-      this.addOption('其他', true, -1, field);
-    },
-    addOption(text = '选项', others = false, index = -1, field) {
-      let addOne;
-      if (this.curOptions[0]) {
-        addOne = _cloneDeep(this.curOptions[0]);
-      } else {
-        addOne = {
-          text: '',
-          hash: '',
-          others: false,
-          mustOthers: false,
-          othersKey: '',
-          placeholderDesc: '',
-          score: 0,
-          limit: '',
-        };
-      }
-      for (const i in addOne) {
-        if (i === 'others') {
-          addOne[i] = others;
-          if (others) addOne.othersKey = `${field}_${addOne.hash}`;
-        } else if (i === 'mustOthers') {
-          addOne[i] = false;
-        } else if (i === 'text') {
-          addOne[i] = text;
-        } else if (i === 'score') {
-          addOne[i] = 0;
-        }
-      }
-      addOne.hash = this.getNewHash();
-      if (index < 0 || typeof index !== 'number') {
-        this.curOptions.push(addOne);
-      } else {
-        this.curOptions.splice(index + 1, 0, addOne);
-      }
-
-      return addOne;
-    },
-    async deleteOption(index) {
-      this.curOptions.splice(index, 1);
-    },
-    parseImport(newOptions) {
-      if (typeof newOptions !== 'undefined' && newOptions.length > 0) {
-        this.curOptions = newOptions;
-        this.importKey = 'single';
-        this.popoverVisible = false;
-      } else {
-        this.$message.warning('最少保留一项');
-      }
-    },
-    getNewHash() {
-      let random = this.getRandom();
-      while (random in this.hashMap) {
-        random = this.getRandom();
-      }
-      return random;
-    },
-    getRandom() {
-      return Math.random().toString().slice(-6);
-    },
-    changeOptionOthers(val, option) {
-      const { field } = this.moduleConfig;
-      option.others = val;
-      if (val) {
-        option.othersKey = `${field}_${option.hash}`;
-      } else {
-        option.othersKey = '';
-      }
-    },
-    optionConfigChange() {
-      const arr = [];
-      this.curOptions.forEach((item) => {
-        item.label !== undefined && item.label !== '' && arr.push(item.label);
-      });
-      const set = [...new Set(arr)];
-      if (set.length < arr.length) {
-        this.curOptions.forEach((item, index) => {
-          item.label = this.options[index].label || '';
-        });
-        this.$message.warning('已存在相同的标签内容，请重新输入');
-        return;
-      }
-      this.$emit('optionChange', this.curOptions);
-      this.configVisible = false;
-    },
-    onBlur(e, index) {
-      if (cleanRichText(e.target.innerHTML) === '') return;
-      this.curOptions[index].text = e.target.innerHTML;
-    },
-  },
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-// @import '../../common/css/default.scss';
-.ceilingPopper {
-  max-width: 1000px !important ;
-}
-.option-config-wrapper {
-  .J-option-handwrite {
-    .patch-import-btn {
-      position: absolute;
-      right: 45px;
-      top: 54px;
-      width: 35px;
-      display: flex;
-      justify-content: center;
-      color: #4a4c5b;
-      background: #ffffff;
-    }
-    .option-header {
-      position: relative;
-      background: #f9fafc;
-      border: 1px solid #edeffc;
-      border-radius: 2px;
-      font-size: inherit;
-      color: #506b7b;
-      height: 32px;
-      line-height: 32px;
-      padding-left: 24px;
-      padding-right: 50px;
-      display: flex;
-      overflow: hidden;
-      .el-icon-question {
-        cursor: pointer;
-      }
-      .showMore {
-        position: absolute;
-        right: 0;
-        line-height: 36px;
-        transform: rotate(0deg);
-        width: 30px;
-        text-align: center;
-        cursor: pointer;
-        font-size: 12px;
-        &.toggleLeft {
-          transform: rotate(180deg);
-        }
-      }
-      .ohItem {
-        margin-right: 8px;
-        &.mutex-head {
-          text-align: center;
-        }
-      }
-    }
-    .option-item {
-      display: flex;
-      align-items: center;
-      margin-top: 10px;
-      padding-right: 50px;
-      position: relative;
-      .oitem {
-        margin-right: 8px;
-        text-align: center;
-        &.moreInfo {
-          text-align: left;
-        }
-        .star-imgupload-icon {
-          color: #92949d;
-          background-color: #fff !important;
-        }
-      }
-      .icon-mobile {
-        line-height: 36px;
-        margin-right: 8px;
-      }
-      .lh36 {
-        line-height: 36px;
-      }
-      .moreInfo {
-        width: 285px;
-        .more-info-content {
-          display: inline-block;
-          margin-left: 10px;
-          border-bottom: 1px solid #e3e4e8;
-          border-radius: 2px;
-          .el-input {
-            width: 150px;
-            ::v-deep .el-input__inner {
-              border: none;
-            }
-          }
-          .el-checkbox {
-            color: #6e707c;
-          }
-        }
-      }
-    }
-    .flex-1 {
-      flex: 1;
-      .render-html {
-        border-color: #e3e4e8;
-        border-radius: 2px;
-        color: #6e707c;
-        height: auto;
-        padding: 9px 0;
-        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-        width: 100%;
-        border: 1px solid #dcdfe6;
-      }
-    }
-    .w50 {
-      width: 50px;
-    }
-    .w100 {
-      width: 100px;
-    }
-    .w285 {
-      width: 285px;
-    }
-    .operate-area {
-      width: 50px;
-      position: absolute;
-      right: 0;
-      z-index: 2;
-      border-color: #fff;
-      font-size: 18px;
-      text-align: right;
-      i {
-        cursor: pointer;
-        font-size: inherit;
-        &.add {
-          margin-right: 8px;
-        }
-      }
-    }
-    .sortable-ghost {
-      background-color: rgba(0, 0, 0, 0.1) !important;
-    }
-
-    .sortable-drag {
-      background-color: rgba(0, 0, 0, 0.1) !important;
-    }
-
-    .sortable-chosen {
-      background-color: rgba(0, 0, 0, 0.1) !important;
-    }
-    .drag-handle {
-      margin-top: 0;
-      cursor: move;
-    }
-    .el-select-dropdown__item {
-      font-size: 12px;
-      height: 32px;
-      line-height: 32px;
-    }
-    .scoreconf-type-wrapper {
-      margin-bottom: 10px;
-      .scoreconf-type-label {
-        color: #666;
-        font-weight: 500;
-        height: 30px;
-        line-height: 30px;
-      }
-      .scoreconf-type-select {
-        flex: 1;
-        margin-left: 20px;
-        width: auto;
-        .el-radio__label {
-          font-size: 12px;
-        }
-      }
-      .score-input {
-        flex: 1;
-        margin-left: 68px;
-        width: 200px;
-        .el-radio__label {
-          font-size: 12px;
-        }
-      }
-    }
-    .add-btn-row {
-      color: $primary-color;
-      .add-option {
-        display: inline-block;
-        padding-left: 23px;
-        margin-top: 15px;
-        margin-bottom: 15px;
-        font-size: 12px;
-        color: $primary-color;
-        cursor: pointer;
-        .el-icon-circle-plus {
-          padding-right: 6px;
-          font-size: 16px;
-          vertical-align: -2px;
-        }
-      }
-      .add-option:first-child {
-        padding-left: 0;
-      }
-      .primary-color {
-        color: $primary-color;
-      }
-    }
-  }
-}
-// .el-icon-circle-plus-outline {
-//   color: $primary-color;
-// }
-</style>
diff --git a/web/src/materials/questions/components/Options/BatchAddPopover.vue b/web/src/materials/questions/components/Options/BatchAddPopover.vue
deleted file mode 100644
index 053a1e34..00000000
--- a/web/src/materials/questions/components/Options/BatchAddPopover.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <el-popover
-    class="mypopover"
-    placement="right"
-    width="440"
-    v-model="visible"
-    trigger="click"
-  >
-    <div class="mypopover-body">
-      <div class="mypopover-body-header">
-        <div class="mypopover-body-header-title">
-          {{ title }}
-        </div>
-        <div class="mypopover-body-header-desc" v-if="desc">
-          {{ desc }}
-        </div>
-      </div>
-      <el-input type="textarea" rows="7" v-model="myValue"></el-input>
-      <div class="mypopover-body-footer">
-        <el-button size="mini" type="text" @click="handleClose">取消</el-button>
-        <el-button type="primary" size="mini" @click="handleConfirm"
-          >确定</el-button
-        >
-      </div>
-    </div>
-    <slot name="reference" slot="reference"></slot>
-  </el-popover>
-</template>
-<script>
-export default {
-  props: {
-    title: String,
-    desc: String,
-  },
-  data() {
-    return {
-      visible: false,
-      myValue: '',
-    };
-  },
-  methods: {
-    handleClose() {
-      this.visible = false;
-      this.$emit('cancel');
-    },
-    handleConfirm() {
-      this.visible = false;
-      this.$emit('confirm', this.myValue);
-      // 清空值
-      this.myValue = '';
-    },
-  },
-};
-</script>
-<style lang="scss">
-.mypopover {
-  &-body {
-    padding: 0px 5px;
-    &-header {
-      padding: 5px 0;
-      text-align: left;
-      line-height: 30px;
-      &-title {
-        font-size: 14px;
-        color: #1f1f1f;
-      }
-      &-desc {
-        font-size: 12px;
-        color: #8c8c8c;
-      }
-    }
-    &-footer {
-      padding: 5px 0;
-      text-align: right;
-      margin-top: 10px;
-    }
-  }
-}
-</style>
diff --git a/web/src/materials/questions/components/Options/OptionEdit.vue b/web/src/materials/questions/components/Options/OptionEdit.vue
deleted file mode 100644
index d5c8cac6..00000000
--- a/web/src/materials/questions/components/Options/OptionEdit.vue
+++ /dev/null
@@ -1,298 +0,0 @@
-<template>
-  <div class="option-edit-wrap">
-    <draggable
-      id="sortDraggable"
-      :list="optionList"
-      :options="{ handle: '.drag-handle' }"
-      @update="optionSortChange"
-    >
-      <div
-        class="draggdiv dragg-handle"
-        v-for="(item, index) in optionList"
-        :key="index"
-      >
-        <span class="drag-handle qicon qicon-tuodong"></span>
-        <div class="input-box">
-          <EditorV2
-            :realData="item.text"
-            @change="(value) => handleChange(index, value)"
-            :is-show-operation="isShowOperation"
-          />
-        </div>
-
-        <i
-          v-if="isShowOperation"
-          class="icon el-icon-circle-plus-outline"
-          @click="onAddOption(index)"
-        ></i>
-        <el-tooltip
-          v-if="isShowOperation"
-          v-show="optionList.length > 1"
-          class="icon delete"
-          effect="dark"
-          content="删除"
-          placement="top"
-        >
-          <i class="el-icon-remove-outline" @click="deleteOption(index)"></i>
-        </el-tooltip>
-      </div>
-    </draggable>
-  </div>
-</template>
-
-<script>
-import draggable from 'vuedraggable';
-import { mapGetters } from 'vuex';
-import { cloneDeep as _cloneDeep } from 'lodash-es';
-import EditorV2 from '@/common/Editor/EditorV2';
-
-export default {
-  name: 'OptionEdit',
-  computed: {
-    ...mapGetters({
-      currentEditKey: 'edit/currentEditKey',
-    }),
-  },
-  props: {
-    optionList: {
-      type: Array,
-    },
-    isShowOperation: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  components: {
-    draggable,
-    EditorV2,
-  },
-  mounted() {
-    // 选项hash兜底
-    const hashMap = {};
-    let hashHasChanged = false;
-    for (const item of this.optionList) {
-      if (!item.hash) {
-        item.hash = this.getNewHash(hashMap);
-        hashHasChanged = true;
-      }
-    }
-    const originOptionList = _cloneDeep(this.optionList);
-    if (hashHasChanged) {
-      this.$emit('optionChange', originOptionList);
-    }
-  },
-  methods: {
-    getRandom() {
-      return Math.random().toString().slice(-6);
-    },
-    getNewHash(hashMap) {
-      let random = this.getRandom();
-      while (random in hashMap) {
-        random = this.getRandom();
-      }
-      return random;
-    },
-    handleChange(index, value) {
-      // 更新单个选项文案
-      const optionKey = `options[${index}].text`;
-      const key = `${this.currentEditKey}.${optionKey}`;
-      this.$emit('change', { key, value });
-    },
-    onAddOption(index) {
-      this.$emit('addOption', '选项', false, index);
-    },
-    async deleteOption(index) {
-      const optionList = _cloneDeep(this.optionList);
-      optionList.splice(index, 1);
-      this.$emit('optionChange', optionList);
-    },
-    optionSortChange() {
-      const optionList = _cloneDeep(this.optionList);
-      this.$emit('optionChange', optionList);
-    },
-  },
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-// @import '../../common/css/default.scss';
-.option-edit-wrap {
-  .focus {
-    margin-top: 31px;
-    .input-box {
-      padding: 0 !important;
-    }
-  }
-  #sortDraggable {
-    user-select: none;
-    padding-right: 0.08rem;
-    .sortable-drag,
-    .sortable-ghost {
-      border-color: $primary-color;
-      border-radius: 0.04rem;
-    }
-    .sortable-fallback {
-      background-color: $primary-color;
-    }
-  }
-  .draggdiv {
-    display: block;
-    .remainText {
-      font-size: 0.24rem;
-      margin-left: 10px;
-      color: red;
-      width: 100%;
-    }
-    cursor: move;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    border: 1px solid transparent;
-    // border: 1px dashed $placeholder-color;
-    // border-left: 3px solid $placeholder-color;
-    margin-bottom: 10px;
-    padding-right: 7px;
-    position: relative;
-    height: auto;
-    .input-box {
-      display: inline-block;
-      height: auto;
-      min-width: 210px;
-      flex: 1;
-      position: relative;
-      align-items: center;
-      border: 1px solid transparent;
-      border-left: 3px solid transparent;
-      margin-right: 10px;
-      // padding: 10px 0;
-      .fn-box {
-        display: none;
-        position: absolute;
-        height: 28px;
-        padding: 0 6px;
-        left: 0;
-        top: -28px;
-        box-shadow: 0 0 3px 3px #eee;
-        background-color: #fff;
-      }
-    }
-    .icon-mobile {
-      color: $light-focus-color;
-      visibility: hidden;
-    }
-    .img-option {
-      //  display: none;
-      display: inline-block;
-    }
-    .el-icon-error {
-      visibility: hidden;
-    }
-    .icon {
-      margin-left: 4px;
-      font-size: 17px;
-      color: #888;
-      cursor: pointer;
-    }
-    .icon.delete:hover {
-      color: red;
-    }
-    &.dragg-handle {
-      border: 1px solid transparent;
-      // border-left: 3px solid $placeholder-color;
-      // background: rgba(242, 244, 247, 0.5);
-      .icon-mobile {
-        visibility: visible;
-      }
-      .img-option {
-        display: inline-block;
-      }
-      .el-icon-error {
-        visibility: visible;
-      }
-
-      .input-box {
-        margin-left: 5px;
-        background-color: #fff;
-        border: 1px solid #e3e4e6;
-        border-radius: 2px;
-      }
-    }
-    &.dragg-handle-focus {
-      .input-box {
-        padding: 0 !important;
-        .fn-box {
-          display: inline-block;
-        }
-      }
-    }
-    .icon-mobile {
-      margin-left: 5px;
-    }
-    .item-text-input {
-      width: 200px;
-      .el-input__inner {
-        border: none;
-        background: none;
-      }
-    }
-    .input-div {
-      margin-left: 12px;
-      color: #6e707c;
-    }
-    .item-type-input {
-      position: relative;
-      vertical-align: top;
-      width: 0.32rem;
-      height: 0.32rem;
-      margin-left: 0.1rem;
-      border: 1px solid $border-color;
-      border-radius: 100%;
-      background-color: #fff;
-    }
-    .checkbox-type-input {
-      border-radius: 0;
-    }
-    .img-option {
-      .star-imgupload-icon {
-        color: #92949d;
-        background: transparent;
-        padding: 0 5px;
-        .biz-upload-input {
-          cursor: pointer;
-          width: 27px;
-        }
-      }
-    }
-    .el-icon-error {
-      margin-left: 10px;
-      margin-right: 5px;
-      cursor: pointer;
-      color: #92949d;
-    }
-  }
-  .dragg-handle-focus {
-    .input-box {
-      padding: 0 !important;
-    }
-  }
-  .radio-select-config {
-    margin-top: 20px;
-    font-size: 12px;
-    .add-option {
-      line-height: 24px;
-      cursor: pointer;
-      .el-icon-circle-plus {
-        padding-right: 4px;
-        font-size: 17px;
-        vertical-align: -2px;
-      }
-    }
-    .option-advanced-config {
-      line-height: 24px;
-      float: right;
-      color: #0f8a82;
-      cursor: pointer;
-    }
-  }
-}
-</style>
diff --git a/web/src/materials/questions/components/Options/OptionEditBar.vue b/web/src/materials/questions/components/Options/OptionEditBar.vue
deleted file mode 100644
index 25927d03..00000000
--- a/web/src/materials/questions/components/Options/OptionEditBar.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<script>
-import OptionConfig from '@/materials/questions/components/AdvancedConfig/OptionConfig.vue';
-import RateConfig from '../AdvancedConfig/RateConfig.vue';
-import { defineComponent, ref, computed, inject } from 'vue';
-import ExtraIcon from '@/materials/questions/components/ExtraIcon.vue';
-
-export default defineComponent({
-  name: 'optionEditBar',
-  components: { OptionConfig, ExtraIcon, RateConfig },
-  props: {
-    optionList: {
-      type: Array,
-      default: () => [],
-    },
-    showOthers: {
-      type: Boolean,
-      default: true,
-    },
-    hasAdvancedConfig: {
-      type: Boolean,
-      default: true,
-    },
-    hasAdvancedRateConfig: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props, { emit }) {
-    const moduleConfig = inject('moduleConfig');
-    const optionConfigVisible = ref(false);
-
-    const addOther = () => {
-      emit('addOther');
-    };
-    const openOptionConfig = () => {
-      optionConfigVisible.value = true;
-    };
-    const handleOptionChange = (value) => {
-      emit('optionChange', value);
-    };
-    const handleChange = (data) => {
-      emit('change', data);
-    };
-    const rateConfigVisible = ref(false);
-    const openRateConfig = () => {
-      rateConfigVisible.value = true;
-    };
-
-    const isNps = computed(() => {
-      return moduleConfig.value.type === 'radio-nps';
-    });
-
-    const min = computed(() => {
-      const { min, starMin } = moduleConfig.value;
-      return isNps.value ? min : starMin;
-    });
-
-    const max = computed(() => {
-      const { max, starMax } = moduleConfig.value;
-      return isNps.value ? max : starMax;
-    });
-
-    const explain = computed(() => {
-      const { type } = moduleConfig.value;
-      if (type == 'radio-start') return true;
-      if (isNps.value) return false;
-      return true;
-    });
-
-    return {
-      addOther,
-      optionConfigVisible,
-      openOptionConfig,
-      openRateConfig,
-      handleOptionChange,
-      handleChange,
-      moduleConfig,
-      rateConfigVisible,
-      min,
-      max,
-      isNps,
-      explain,
-    };
-  },
-  render() {
-    const {
-      showOthers,
-      hasAdvancedConfig,
-      hasAdvancedRateConfig,
-      min,
-      max,
-      explain,
-      isNps,
-    } = this;
-    return (
-      <div class="option-edit-bar-wrap">
-        <div class="option-edit-bar">
-          {showOthers && (
-            <div class="add-option primary-color" onClick={this.addOther}>
-              <extra-icon type="add-square"></extra-icon>
-              其他____
-            </div>
-          )}
-          {hasAdvancedConfig && (
-            <span
-              class="option-advanced-config primary-color"
-              onClick={this.openOptionConfig}
-            >
-              {'高级设置>'}
-            </span>
-          )}
-          {hasAdvancedRateConfig && (
-            <span
-              class="option-advanced-config primary-color"
-              onClick={this.openRateConfig}
-            >
-              {'高级评分设置>'}
-            </span>
-          )}
-        </div>
-        {this.optionConfigVisible && (
-          <OptionConfig
-            options={this.optionList}
-            show-option-dialog={this.optionConfigVisible}
-            show-others={this.showOthers}
-            show-limit={false}
-            onVisibleChange={(val) => {
-              this.optionConfigVisible = val;
-            }}
-            onAddOther={this.addOther}
-            onOptionChange={this.handleOptionChange}
-            onChange={this.handleChange}
-          />
-        )}
-        {this.rateConfigVisible && (
-          <RateConfig
-            min={min}
-            max={max}
-            rangeConfig={this.moduleConfig.rangeConfig}
-            visible={this.rateConfigVisible}
-            onVisibleChange={(val) => {
-              this.rateConfigVisible = val;
-            }}
-            explain={explain}
-            dialogWidth="800px"
-            onConfirm={this.handleChange}
-            class={[isNps ? 'nps-rate-config' : '']}
-          />
-        )}
-      </div>
-    );
-  },
-});
-</script>
-<style lang="scss" rel="stylesheet/scss" scoped>
-// @import '../../common/css/default.scss';
-
-.option-edit-bar-wrap {
-  margin-top: 20px;
-  padding-left: 10px;
-  position: relative;
-  line-height: 24px;
-  font-size: 12px;
-  color: $primary-color;
-
-  .add-option {
-    display: inline-block;
-    margin-right: 10px;
-    cursor: pointer;
-    font-size: 12px;
-  }
-
-  .option-advanced-config {
-    color: #0f8a82;
-    float: right;
-    cursor: pointer;
-    font-size: 12px;
-  }
-
-  .primary-color {
-    color: $primary-color;
-  }
-}
-
-.nps-rate-config {
-  ::v-deep .row {
-    height: 47px;
-  }
-  ::v-deep .text {
-    input {
-      height: 32px;
-    }
-  }
-}
-
-.pop-title {
-  font-family: PingFangSC-Medium;
-  font-size: 14px;
-  color: #4a4c5b;
-  letter-spacing: 0;
-  text-align: left;
-}
-
-.pop-tip {
-  font-family: PingFangSC-Regular;
-  font-size: 12px;
-  color: #999999;
-  letter-spacing: 0.65px;
-  text-align: left;
-}
-
-.pop-input {
-  margin-top: 6px;
-  margin-bottom: 16px;
-}
-</style>
diff --git a/web/src/materials/questions/components/Options/OptionSetting.vue b/web/src/materials/questions/components/Options/OptionSetting.vue
deleted file mode 100644
index d3bbeded..00000000
--- a/web/src/materials/questions/components/Options/OptionSetting.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<script>
-import { defineComponent, reactive, toRefs, watch } from 'vue';
-import ElPopconfirm from './ElPopconfirm.vue';
-import BatchAddPopover from './BatchAddPopover.vue';
-const OptionSetting = defineComponent({
-  name: 'OptionSetting',
-  components: { ElPopconfirm },
-  props: {
-    level: {
-      type: Number,
-      default: 0,
-    },
-    active: {
-      type: Number,
-      default: 0,
-    },
-    levelOptions: {
-      type: Array,
-      default: () => [],
-    },
-    addBtnShow: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props, { emit }) {
-    const gethoverlist = (arr) => {
-      return arr.map(() => {
-        return false;
-      });
-    };
-    const state = reactive({
-      formValue: { options: props.levelOptions },
-      itemHover: gethoverlist(props.levelOptions),
-      hoverable: true,
-    });
-    watch(
-      () => props.levelOptions,
-      (value) => {
-        (state.formValue.options = value),
-          (state.itemHover = gethoverlist(value));
-      },
-      {
-        immediate: true,
-        deep: true,
-      }
-    );
-    const handleClick = (value) => {
-      emit('change', value);
-    };
-    const handleEdit = (val) => {
-      let newOptions = state.formValue.options;
-      newOptions[props.active].name = val.trim();
-      emit('update', newOptions);
-    };
-    const addField = () => {
-      emit('add', props.levelOptions.length);
-    };
-    const addBatchField = (value) => {
-      // 每行代表一个选项；空行会被忽略；相同选项内容会被自动去重。
-      let arr = value.split('\n');
-      arr = arr.map(function (s) {
-        return s && String(s).trim();
-      });
-      const options = [...new Set(arr)];
-      emit('addBatch', options);
-    };
-    const handelDelete = (active) => {
-      emit('delete', active);
-    };
-    const handleMouseEnter = (active) => {
-      if (state.hoverable) {
-        state.itemHover.splice(active, 1, true);
-      }
-    };
-    const handleMouseLeave = (active) => {
-      if (state.hoverable) {
-        state.itemHover.splice(active, 1, false);
-      }
-    };
-    const validateFieldFun = (rule, value, callback) => {
-      const existValues = state.formValue.options
-        .filter((item) => item.id !== rule.id)
-        .map((item) => item.name);
-      if (value === '') {
-        callback(new Error('请输入选项内容!'));
-      } else if (existValues.includes(value)) {
-        callback(new Error('选项内容不可重复!'));
-      } else {
-        callback();
-      }
-    };
-    return {
-      ...toRefs(state),
-      handleClick,
-      handleEdit,
-      addField,
-      addBatchField,
-      handelDelete,
-      handleMouseEnter,
-      handleMouseLeave,
-      validateFieldFun,
-    };
-  },
-  render() {
-    return (
-      <div class="setting">
-        <el-form
-          ref={`FormLevel${this.level}`}
-          {...{
-            props: {
-              model: this.formValue, // vue jsx element 表单校验的model不可以直接写 以这种方式解决
-            },
-          }}
-        >
-          {this.formValue.options.map((item, index) => {
-            return (
-              <div
-                class={[
-                  'setting-item',
-                  this.active === index ? 'setting-item-active' : '',
-                ]}
-                onClick={() => this.handleClick(index)}
-                onmouseenter={() => {
-                  this.handleMouseEnter(index);
-                }}
-                onmouseleave={() => {
-                  this.handleMouseLeave(index);
-                }}
-              >
-                <el-form-item
-                  prop={`options[${index}].name`}
-                  key={item.id}
-                  rules={[
-                    {
-                      validator: this.validateFieldFun,
-                      trigger: ['blur', 'change'],
-                      id: item.id,
-                    },
-                  ]}
-                >
-                  <el-input
-                    value={item.name}
-                    onInput={(val) => {
-                      this.handleEdit(val);
-                    }}
-                  >
-                    {this.itemHover[index] ? (
-                      // 有子级的话删除确认框，否则直接删除
-                      item.children && item.children.length !== 0 ? (
-                        <ElPopconfirm
-                          slot="suffix"
-                          title="你确定删除这个选项吗？"
-                          desc="删除该选项，会将其关联的下级选项也删除；且删除后不可恢复，请谨慎操作。"
-                          onConfirm={() => {
-                            this.handelDelete(index);
-                          }}
-                          onCancel={() => {
-                            this.handleMouseLeave(index);
-                          }}
-                          onShow={() => {
-                            this.hoverable = false;
-                          }}
-                          onHide={() => {
-                            this.hoverable = true;
-                          }}
-                        >
-                          {
-                            <i
-                              class="el-input__icon el-icon-shanchu"
-                              slot="reference"
-                              style="cursor: pointer"
-                            ></i>
-                          }
-                        </ElPopconfirm>
-                      ) : (
-                        <i
-                          class="el-input__icon el-icon-shanchu"
-                          slot="suffix"
-                          style="cursor: pointer"
-                          onClick={() => {
-                            this.handelDelete(index);
-                          }}
-                        ></i>
-                      )
-                    ) : (
-                      ''
-                    )}
-                  </el-input>
-                </el-form-item>
-              </div>
-            );
-          })}
-          {this.addBtnShow && (
-            <el-form-item class="setting-btn">
-              <el-button
-                type="text"
-                class="setting-btn-item"
-                onClick={() => {
-                  this.addField(this.level);
-                }}
-              >
-                单个添加
-              </el-button>
-              <BatchAddPopover
-                class="setting-btn-item"
-                title="批量添加选项"
-                desc="备注：每行代表一个选项；空行会被忽略；相同选项内容会被自动去重。"
-                onConfirm={this.addBatchField}
-              >
-                <el-button
-                  type="text"
-                  class="setting-btn-item"
-                  slot="reference"
-                >
-                  批量添加
-                </el-button>
-              </BatchAddPopover>
-            </el-form-item>
-          )}
-        </el-form>
-      </div>
-    );
-  },
-});
-
-export default OptionSetting;
-</script>
-
-<style lang="scss" scoped>
-.setting {
-  padding: 10px 0;
-
-  &-item {
-    padding: 0 6px;
-
-    &-active {
-      .el-input__inner {
-        border-color: orange !important;
-      }
-    }
-  }
-
-  &-btn {
-    > div {
-      display: flex;
-    }
-
-    &-item {
-      flex: 1;
-      color: orange !important;
-      text-align: center;
-      height: 32px;
-      line-height: 32px;
-    }
-  }
-}
-</style>
diff --git a/web/src/materials/questions/questionLoader.js b/web/src/materials/questions/questionLoader.js
index 54de424b..14865898 100644
--- a/web/src/materials/questions/questionLoader.js
+++ b/web/src/materials/questions/questionLoader.js
@@ -1,55 +1,58 @@
-import ComponentLoader from '../utils/componentLoader';
-import moduleList from './common/config/moduleList';
+import ComponentLoader from '../utils/componentLoader'
+import moduleList from './common/config/moduleList'
+
 export class MaterialLoader extends ComponentLoader {
-  metaCache = {};
-  inited = false;
+  metaCache = {}
+  inited = false
   async init({ typeList }) {
     if (this.inited) {
-      return;
+      return
     }
-    this.inited = true;
+
+    this.inited = true
     this.componentInfoList = typeList.map((type) => ({
       type,
-      path: moduleList[type],
-    }));
-    await this.loadComponents();
-    await this.loadMetas();
+      path: moduleList[type]
+    }))
+    await this.loadComponents()
+    await this.loadMetas()
   }
 
   dynamicImport(path) {
-    return import(`@/materials/questions/widgets/${path}`);
+    // see https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
+    return import(`./widgets/${path}/index.jsx`)
   }
 
   setMeta(type, config) {
-    this.components[type].meta = config;
+    this.components[type].meta = config
   }
 
   async loadMeta(type, path) {
     if (this.metaCache[type]) {
-      return this.metaCache[type];
+      return this.metaCache[type]
     } else {
       if (!this.components[type]) {
-        console.error('The component has not been loaded yet');
+        console.error('The component has not been loaded yet')
       }
-      path = path || this.components[type]?.path || type;
-      const res = await import(`@/materials/questions/widgets/${path}/meta.js`);
-      this.metaCache[type] = res.default || res.meta || null;
-      return this.metaCache[type];
+      path = path || this.components[type]?.path || type
+      const res = await import(`./widgets/${path}/meta.js`)
+      this.metaCache[type] = res.default || res.meta || null
+      return this.metaCache[type]
     }
   }
 
   getMeta(type) {
-    return this.metaCache[type] ? this.metaCache[type] : {};
+    return this.metaCache[type] ? this.metaCache[type] : {}
   }
 
   loadMetas(typeList) {
     if (!typeList) {
-      typeList = this.componentInfoList.map((item) => item.type);
+      typeList = this.componentInfoList.map((item) => item.type)
     }
-    return Promise.all(typeList.map((type) => this.loadMeta(type)));
+    return Promise.all(typeList.map((type) => this.loadMeta(type)))
   }
 }
 
-const quetsionLoader = new MaterialLoader();
+const quetsionLoader = new MaterialLoader()
 
-export default quetsionLoader;
+export default quetsionLoader
diff --git a/web/src/materials/questions/widgets/BaseChoice/index.jsx b/web/src/materials/questions/widgets/BaseChoice/index.jsx
index 4bd3236c..b4322568 100644
--- a/web/src/materials/questions/widgets/BaseChoice/index.jsx
+++ b/web/src/materials/questions/widgets/BaseChoice/index.jsx
@@ -1,95 +1,98 @@
-import { defineComponent, computed } from 'vue';
-import { findIndex, includes } from 'lodash-es';
-import { filterXSS } from '@/common/xss';
-import '../../common/css/choice.scss';
+import { defineComponent, computed } from 'vue'
+import { findIndex, includes, cloneDeep } from 'lodash-es'
+import { filterXSS } from '@/common/xss'
+import './style.scss'
 
 export default defineComponent({
   name: 'BaseChoice',
   props: {
     uiTarget: {
       type: String,
-      default: 'radio',
+      default: 'radio'
     },
     hideText: {
       type: Boolean,
-      default: false,
+      default: false
     },
     isMatrix: {
       type: Boolean,
-      default: false,
+      default: false
     },
     choiceStyle: {
       type: String,
-      default: '',
+      default: ''
     },
     name: {
       type: String,
-      default: '',
+      default: ''
     },
     readonly: {
       type: Boolean,
-      default: false,
+      default: false
     },
     options: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     value: {
       type: [Array, String],
       default: () => {
-        return '';
-      },
+        return ''
+      }
     },
     layout: {
       type: String,
-      default: 'vertical',
+      default: 'vertical'
     },
     voteTotal: {
       type: Number,
-      default: 10,
-    },
+      default: 10
+    }
   },
-  setup(props, { emit }) {
+  emits: ['change'],
+  setup(props, { emit, slots }) {
     const getOptions = computed(() => {
-      return props.options;
-    });
+      return props.options
+    })
     const isChecked = (item) => {
       if (props.uiTarget === 'radio') {
-        return props.value === item.hash;
+        return props.value === item.hash
       } else {
-        return props.value.includes(item.hash);
+        return props.value.includes(item.hash)
       }
-    };
+    }
     const onRadioClick = (item, $event) => {
-      $event && $event.stopPropagation();
-      $event && $event.preventDefault();
-      emit('change', item.hash);
-    };
+      $event && $event.stopPropagation()
+      $event && $event.preventDefault()
+      emit('change', item.hash)
+    }
     const onCheckboxClick = (item, $event) => {
-      $event && $event.stopPropagation();
-      $event && $event.preventDefault();
-      const targetValue = item.hash;
-      let values = props.value;
+      $event && $event.stopPropagation()
+      $event && $event.preventDefault()
+      const targetValue = item.hash
+      const values = cloneDeep(props.value)
       if (!includes(values, targetValue)) {
-        values.push(targetValue);
+        values.push(targetValue)
       } else {
-        const index = findIndex(values, (val) => val === targetValue);
+        const index = findIndex(values, (val) => val === targetValue)
         if (index !== -1) {
-          values.splice(index, 1);
+          values.splice(index, 1)
         }
       }
-      emit('change', values);
+      emit('change', values)
       // return values
-    };
+    }
     return {
+      slots,
       getOptions,
       isChecked,
       onRadioClick,
-      onCheckboxClick,
-    };
+      onCheckboxClick
+    }
   },
   render() {
-    const { uiTarget, isMatrix, hideText, getOptions, isChecked } = this;
+    const { uiTarget, isMatrix, hideText, getOptions, isChecked, slots } = this
+
     return (
       <div class="choice-wrapper">
         <div class={[isMatrix ? 'nest-box' : '', 'choice-box']}>
@@ -110,15 +113,13 @@ export default defineComponent({
                           index === getOptions.length - 1 ? 'lastchild' : '',
                           index === getOptions.length - 2 ? 'last2child' : '',
                           item.disabled ? 'disabled' : '',
-                          'choice-item',
+                          'choice-item'
                         ]}
                         onClick={($event) => {
-                          if (this.readonly) return;
-                          if (item.disabled) return;
-                          if (uiTarget === 'radio')
-                            this.onRadioClick(item, $event);
-                          if (uiTarget === 'checkbox')
-                            this.onCheckboxClick(item, $event);
+                          if (this.readonly) return
+                          if (item.disabled) return
+                          if (uiTarget === 'radio') this.onRadioClick(item, $event)
+                          if (uiTarget === 'checkbox') this.onCheckboxClick(item, $event)
                         }}
                       >
                         <input
@@ -131,62 +132,45 @@ export default defineComponent({
                           disabled={item.disabled}
                           class={[
                             'item-input',
-                            isChecked(item)
-                              ? 'qicon qicon-gouxuan ql-checked-input'
-                              : '',
+                            isChecked(item) ? 'qicon qicon-gouxuan ql-checked-input' : ''
                           ]}
                         />
-                        <label
-                          class={'item-title'}
-                          for={`${uiTarget}${this.name}${index}`}
-                        >
+                        <label class={'item-title'} for={`${uiTarget}${this.name}${index}`}>
                           {!hideText && (
                             <span
-                              domPropsInnerHTML={filterXSS(item.text)}
+                              v-html={filterXSS(item.text)}
                               class="item-title-text"
                               style="display: block; height: auto; padding: 9px 0"
                             ></span>
                           )}
-                          {this.$scopedSlots.vote?.({
+                          {slots.vote?.({
                             option: item,
-                            voteTotal: this.voteTotal,
+                            voteTotal: this.voteTotal
                           })}
                         </label>
                       </div>
                     )}
                   </div>
-                  {!this.readonly
-                    ? item.others &&
-                      isChecked(item) &&
-                      this.$scopedSlots.selectMore?.({
-                        showTitle: false,
-                        selectMoreConfig: {
-                          type: 'selectMoreModule',
-                          index: index,
-                          field: item.othersKey,
-                          placeholder: item.placeholderDesc,
-                          require: item.mustOthers,
-                          value: item.othersValue,
-                        },
-                      })
-                    : item.others &&
-                      this.$scopedSlots.selectMore?.({
-                        showTitle: false,
-                        selectMoreConfig: {
-                          type: 'selectMoreModule',
-                          index: index,
-                          field: item.othersKey,
-                          placeholder: item.placeholderDesc,
-                          require: item.mustOthers,
-                          value: item.othersValue,
-                        },
-                      })}
+                  {item.others &&
+                    // 如果开启了其他，在运行态需要选中后显示输入框，而预览态直接显示输入框
+                    (this.readonly || (!this.readonly && isChecked(item))) &&
+                    slots.selectMore?.({
+                      showTitle: false,
+                      selectMoreConfig: {
+                        type: 'selectMoreModule',
+                        index: index,
+                        field: item.othersKey,
+                        placeholder: item.placeholderDesc,
+                        require: item.mustOthers,
+                        value: item.othersValue
+                      }
+                    })}
                 </div>
               )
-            );
+            )
           })}
         </div>
       </div>
-    );
-  },
-});
+    )
+  }
+})
diff --git a/web/src/materials/questions/common/css/choice.scss b/web/src/materials/questions/widgets/BaseChoice/style.scss
similarity index 50%
rename from web/src/materials/questions/common/css/choice.scss
rename to web/src/materials/questions/widgets/BaseChoice/style.scss
index c504587d..291fb67a 100644
--- a/web/src/materials/questions/common/css/choice.scss
+++ b/web/src/materials/questions/widgets/BaseChoice/style.scss
@@ -1,4 +1,4 @@
-@import './default.scss';
+@import '@materials/questions/common/css/default.scss';
 
 .isPc .choice-wrapper {
   .choice-box .choice-item {
@@ -22,10 +22,9 @@
   font-size: 0;
 
   .choice-box {
-    padding: 0 .2rem !important;
+    padding: 0 0.2rem !important;
     box-sizing: border-box;
 
-    // margin-bottom: -0.22rem;
     .choice-item {
       position: relative;
       display: inline-flex;
@@ -73,11 +72,10 @@
             background: #eee;
           }
 
-          &+label {
+          & + label {
             color: #ccc !important;
           }
         }
-
       }
 
       .item-title {
@@ -88,26 +86,6 @@
         overflow: hidden;
         word-wrap: break-word;
         cursor: pointer;
-
-        .label-img-wrapper {
-          width: 80%;
-          text-align: center;
-        }
-
-        .label-img {
-          display: inline-block !important;
-          width: 2rem;
-          height: auto;
-          margin-top: 0.25rem;
-        }
-      }
-
-      .center-text {
-        span {
-          display: inline-block;
-          width: 80%;
-          text-align: center;
-        }
       }
 
       &.is-checked {
@@ -122,7 +100,7 @@
           border-color: $primary-color;
           background-color: $primary-color;
           color: #fff;
-          border: none
+          border: none;
         }
 
         transition: all 0.3s ease-in-out;
@@ -144,127 +122,14 @@
       }
     }
 
-    .option-wrapper {
-      display: flex;
-      // justify-content: center;
-    }
-
     .vertical {
       width: 100%;
 
       .item-title .label-img {
         width: 75%;
       }
-
-      // &.choice-item.last2child {
-      //     margin-bottom: .08rem;
-      // }
     }
   }
-
-  .answer-tip {
-    width: 100%;
-    height: auto;
-    font-size: 0.25rem;
-    color: #666;
-    padding: 5px;
-    border: 1px dashed $border-color;
-  }
-}
-
-.optionRelyTips {
-  text-indent: 16px;
-  width: 100%;
-  height: 15px;
-  font-size: 14px;
-  line-height: 15px;
-  color: #aaa;
-}
-
-
-.input-wrapper {
-  font-size: 0;
-
-  .input-box {
-    outline: none;
-    font-size: 0.56rem;
-    padding: 0.4rem;
-    border-radius: .08rem;
-    background-color: #fff;
-    vertical-align: top;
-
-    border: 1px solid $border-color;
-    width: 200%;
-    height: 1.61rem;
-
-    transform: scale(0.5, 0.5);
-    transform-origin: left top;
-    box-sizing: border-box;
-    margin-bottom: -.81rem;
-    overflow: hidden;
-    // overflow: hidden;
-    color: $font-color;
-    z-index: 10;
-
-    // &:focus, &.is-focused {
-    //     border: 1px solid $primary-color;
-    // }
-    &:not([readonly="readonly"]):hover {
-      border: 1px solid $primary-color;
-    }
-
-    &.print {
-      border: none;
-      border-bottom: 1px solid $border-color;
-      border-radius: 0;
-    }
-
-    &::-webkit-input-placeholder {
-      /* WebKit browsers */
-      font-size: .56rem;
-      font-weight: 300;
-      color: $placeholder-color;
-    }
-
-    &:-moz-placeholder {
-      /* Mozilla Firefox 4 to 18 */
-      font-size: .56rem;
-      font-weight: 300;
-      color: $placeholder-color;
-    }
-
-    &::-moz-placeholder {
-      /* Mozilla Firefox 19+ */
-      font-size: .56rem;
-      font-weight: 300;
-      color: $placeholder-color;
-    }
-
-    &:-ms-input-placeholder {
-      /* Internet Explorer 10+ */
-      font-size: .56rem;
-      font-weight: 300;
-      color: $placeholder-color;
-    }
-  }
-
-  .text-number-tip {
-    font-size: .24rem;
-    color: $font-color;
-    float: right;
-    margin-right: .1rem;
-    margin-top: .1rem;
-  }
-
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-    margin: 0;
-  }
-
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
 }
 
 .nest-box {
@@ -285,7 +150,7 @@
         margin-right: 0;
         border-radius: 2px;
 
-        &.ql-checked-input+.item-title {
+        &.ql-checked-input + .item-title {
           visibility: visible;
           height: auto;
           opacity: 1;
@@ -314,36 +179,4 @@
       }
     }
   }
-
-  // &.choice-box {
-  //   padding: 0;
-  // }
 }
-
-// input[type="radio"]{
-//   cursor: pointer;
-//   // position: relative;
-//   width: 15px;
-//   height: 15px;
-//   font-size: 14px;
-// }
-// input[type="radio"]::before{
-//   position: relative;
-//   content: '';
-//   width: 15px;
-//   height: 15px;
-// }
-// input[type="radio"]:checked::before{
-//   // position: relative;
-//   content: '';
-//   width: 15px;
-//   height: 15px;
-//   background-color: $primary-color;
-//   border-color: $primary-color;
-// }
-
-// .radio-wrapper .radio-box .radio-item.is-checked .item-input:checked {
-//   background-color: ${primaryColor};
-//   border-color: ${primaryColor};
-//   box-shadow: 0 2px 6px 0 ${shadowColor};
-// }
\ No newline at end of file
diff --git a/web/src/materials/questions/widgets/BaseInput/index.jsx b/web/src/materials/questions/widgets/BaseInput/index.jsx
index 28f5d8a6..9c77384b 100644
--- a/web/src/materials/questions/widgets/BaseInput/index.jsx
+++ b/web/src/materials/questions/widgets/BaseInput/index.jsx
@@ -1,100 +1,94 @@
-import { defineComponent } from 'vue';
-import '../../common/css/choice.scss';
-import '../../common/css/input.scss';
+import { defineComponent } from 'vue'
+import './style.scss'
 
 export default defineComponent({
-  name: 'baseInput',
+  name: 'BaseInput',
   props: {
     uiTarget: {
       type: String,
-      default: 'radio',
+      default: 'radio'
     },
     customClass: {
       type: String,
-      default: '',
+      default: ''
+    },
+    field: {
+      type: String,
+      default: ''
     },
     type: {
       type: String,
-      default: '',
+      default: ''
     },
     name: {
       type: String,
-      default: '',
+      default: ''
     },
     readonly: {
       type: Boolean,
-      default: false,
+      default: false
     },
     placeholder: {
       type: String,
-      default: '请填写',
+      default: '请填写'
     },
     maxlength: {
       type: Number,
-      default: 500,
+      default: 500
     },
     minlength: {
       type: Number,
-      default: 0,
+      default: 0
     },
     value: {
       type: String,
-      default: '',
-    },
+      default: ''
+    }
   },
+  emits: ['input', 'change', 'blur', 'focus'],
   setup(props, { emit }) {
     const onBlur = () => {
-      emit('blur');
-    };
+      emit('blur')
+    }
     const onInput = (e) => {
-      emit('input', e);
-    };
+      emit('input', e)
+    }
     const onChange = (e) => {
-      emit('change', e);
-    };
+      emit('change', e)
+    }
     const onFocus = () => {
-      if (props.readonly) return false;
-      emit('focus');
-    };
+      if (props.readonly) return false
+      emit('focus')
+    }
     return {
       onBlur,
       onInput,
       onFocus,
-      onChange,
-    };
+      onChange
+    }
   },
-  render(h) {
-    const { uiTarget, customClass } = this;
+  render() {
+    const { uiTarget, customClass } = this
+
     return (
       <div class="input-wrapper">
-        {h(
-          uiTarget,
-          {
-            // class: ['input-box','item-border', ],
-            class: ['input-box item-border', customClass],
-            attrs: {
-              type: this.type,
-              readonly: this.readonly,
-              placeholder: this.placeholder,
-              name: this.name,
-              value: this.value,
-              maxlength: this.maxlength,
-              minlength: this.minlength,
-              autocomplete: 'off',
-            },
-            on: {
-              blur: this.onBlur,
-              input: this.onInput,
-              focus: this.onFocus,
-              change: this.onChange,
-            },
-          },
-          [this.value]
-        )}
-        {this.$slots.default}
-        {/* {this.$scopedSlots.default} */}
-        {/* {renderSlot(this.$slots, 'default')}   */}
+        <uiTarget
+          class={['input-box item-border', customClass]}
+          type={this.type}
+          name={this.name}
+          field={this.field}
+          readonly={this.readonly}
+          placeholder={this.placeholder}
+          value={this.value}
+          maxlength={this.maxlength}
+          minlength={this.minlength}
+          autocomplete={'off'}
+          onInput={this.onInput}
+          onBlur={this.onBlur}
+          onChange={this.onChange}
+          onFocus={this.onFocus}
+        />
       </div>
-    );
-  },
-});
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/BaseInput/style.scss b/web/src/materials/questions/widgets/BaseInput/style.scss
new file mode 100644
index 00000000..b6c6462b
--- /dev/null
+++ b/web/src/materials/questions/widgets/BaseInput/style.scss
@@ -0,0 +1,71 @@
+@import '@materials/questions/common/css/default.scss';
+
+.input-wrapper {
+  font-size: 0;
+
+  .input-box {
+    outline: none;
+    font-size: 0.56rem;
+    padding: 0.4rem;
+    border-radius: 0.08rem;
+    background-color: #fff;
+    vertical-align: top;
+
+    border: 1px solid $border-color;
+    width: 200%;
+    height: 1.61rem;
+
+    transform: scale(0.5, 0.5);
+    transform-origin: left top;
+    box-sizing: border-box;
+    margin-bottom: -0.81rem;
+    overflow: hidden;
+    color: $font-color;
+    z-index: 10;
+
+    &.is-focused:focus {
+      border: 1px solid $primary-color;
+      height: 3.5rem;
+      margin-bottom: -1.75rem;
+      overflow-y: scroll;
+    }
+
+    &:not([readonly]):hover {
+      border: 1px solid $primary-color;
+    }
+
+    &.print {
+      border: none;
+      border-bottom: 1px solid $border-color;
+      border-radius: 0;
+    }
+
+    &::-webkit-input-placeholder {
+      /* WebKit browsers */
+      font-size: 0.56rem;
+      font-weight: 300;
+      color: $placeholder-color;
+    }
+
+    &:-moz-placeholder {
+      /* Mozilla Firefox 4 to 18 */
+      font-size: 0.56rem;
+      font-weight: 300;
+      color: $placeholder-color;
+    }
+
+    &::-moz-placeholder {
+      /* Mozilla Firefox 19+ */
+      font-size: 0.56rem;
+      font-weight: 300;
+      color: $placeholder-color;
+    }
+
+    &:-ms-input-placeholder {
+      /* Internet Explorer 10+ */
+      font-size: 0.56rem;
+      font-weight: 300;
+      color: $placeholder-color;
+    }
+  }
+}
diff --git a/web/src/materials/questions/widgets/BaseRate/index.jsx b/web/src/materials/questions/widgets/BaseRate/index.jsx
index 51b541bb..3d6f9a9a 100644
--- a/web/src/materials/questions/widgets/BaseRate/index.jsx
+++ b/web/src/materials/questions/widgets/BaseRate/index.jsx
@@ -1,84 +1,86 @@
-import { defineComponent, computed } from 'vue';
-import '../../common/css/radioStar.scss';
+import { defineComponent, computed } from 'vue'
+import './style.scss'
+
 export default defineComponent({
   name: 'BaseRate',
   props: {
     name: {
       type: String,
-      default: '',
+      default: ''
     },
     value: {
       type: [String, Number],
-      default: 0,
+      default: 0
     },
     min: {
       type: Number,
-      default: 1,
+      default: 1
     },
     max: {
       type: Number,
-      default: 5,
+      default: 5
     },
     iconClass: {
       type: String,
-      default: 'number',
+      default: 'number'
     },
     readonly: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
+  emits: ['change'],
   setup(props, { emit }) {
     const rating = computed({
       get() {
-        return props.value;
+        return props.value
       },
       set(val) {
-        emit('change', val);
-      },
-    });
+        emit('change', val)
+      }
+    })
     const range = computed(() => {
-      const { min, max } = props;
+      const { min, max } = props
       if (min > max) {
-        return [];
+        return []
       }
-      const res = [];
+      const res = []
       for (let i = min; i <= max; i++) {
-        res.push(i);
+        res.push(i)
       }
-      return res;
-    });
+      return res
+    })
     const handleClick = (num) => {
-      if (props.readonly) return;
-      rating.value = num;
-    };
+      if (props.readonly) return
+      rating.value = num
+    }
     return {
       rating,
       range,
-      handleClick,
-    };
+      handleClick
+    }
   },
   render() {
-    const { rating, range, iconClass } = this;
+    const { rating, range, iconClass } = this
 
     return (
-      <div class="star-wrapper-main">
-        <div class="star-box">
+      <div class="rate-wrapper-main">
+        <div class="rate-box">
           {range.map((num, index) => {
             return (
               <div
-                class={['star-item', num <= rating ? 'on' : 'off', iconClass]}
-                key={'star' + index}
+                class={['rate-item', num <= rating ? 'on' : 'off', iconClass]}
+                key={'rate' + index}
                 onClick={() => {
-                  this.handleClick(num);
+                  this.handleClick(num)
                 }}
               >
                 {iconClass === 'number' ? num : ''}
               </div>
-            );
+            )
           })}
         </div>
       </div>
-    );
-  },
-});
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/BaseRate/style.scss b/web/src/materials/questions/widgets/BaseRate/style.scss
new file mode 100644
index 00000000..265c7591
--- /dev/null
+++ b/web/src/materials/questions/widgets/BaseRate/style.scss
@@ -0,0 +1,32 @@
+@import '../../common/css/default.scss';
+
+.rate-wrapper-main {
+  .rate-box {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.2rem;
+  }
+  .rate-item {
+    display: inline-block;
+    font-size: 0.42rem;
+    flex: 1;
+    text-align: center;
+    cursor: pointer;
+
+    &.number {
+      color: #fff;
+      height: 0.62rem;
+      font-size: 0.28rem;
+      line-height: 0.62rem;
+      &.on {
+        background-color: $primary-color;
+      }
+      &.off {
+        background-color: #e3e4e8;
+      }
+      &:not(:last-child) {
+        margin-right: 0.08rem;
+      }
+    }
+  }
+}
diff --git a/web/src/materials/questions/widgets/BinaryChoiceModule/index.jsx b/web/src/materials/questions/widgets/BinaryChoiceModule/index.jsx
index 5664ad0c..be41d390 100644
--- a/web/src/materials/questions/widgets/BinaryChoiceModule/index.jsx
+++ b/web/src/materials/questions/widgets/BinaryChoiceModule/index.jsx
@@ -1,69 +1,67 @@
-import baseChoice from '../BaseChoice';
-import { defineComponent } from 'vue';
-import metaConfig from './meta.js';
-export const meta = metaConfig;
+import { defineComponent } from 'vue'
+import BaseChoice from '../BaseChoice'
+import metaConfig from './meta.js'
+
+export const meta = metaConfig
 /**
  * 支持配置：
  * 排列方式, layout
  */
 export default defineComponent({
   name: 'BinaryChoiceModule',
-  components: { baseChoice },
   props: {
     type: {
       type: String,
-      default: '',
+      default: ''
     },
     field: {
       type: String,
-      default: '',
+      default: ''
     },
     value: {
       type: String,
-      default: '',
+      default: ''
     },
     layout: {
       type: String,
-      default: 'vertical',
+      default: 'vertical'
     },
     options: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     readonly: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
+  emits: ['change'],
   setup(props, { emit }) {
     const onChange = (value) => {
-      const key = props.field;
+      const key = props.field
       emit('change', {
         key,
-        value,
-      });
-    };
+        value
+      })
+    }
     return {
-      onChange,
-    };
+      props,
+      onChange
+    }
   },
   render() {
-    const { readonly, field } = this;
-    const props = {
-      ...this.$props,
-      readonly,
-      name: field,
-    };
     return (
-      <baseChoice
+      <BaseChoice
         uiTarget="radio"
-        {...{ props: props }}
-        {...{
-          on: {
-            change: this.onChange,
-          },
-        }}
-      ></baseChoice>
-    );
-  },
-});
+        type={this.type}
+        readonly={this.readonly}
+        name={this.field}
+        field={this.field}
+        value={this.value}
+        layout={this.layout}
+        options={this.options}
+        onChange={this.onChange}
+      ></BaseChoice>
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/BinaryChoiceModule/meta.js b/web/src/materials/questions/widgets/BinaryChoiceModule/meta.js
index 75b2353d..9bdec1ec 100644
--- a/web/src/materials/questions/widgets/BinaryChoiceModule/meta.js
+++ b/web/src/materials/questions/widgets/BinaryChoiceModule/meta.js
@@ -1,51 +1,22 @@
-import basicConfig from '../../common/config/basicConfig';
+import basicConfig from '@materials/questions/common/config/basicConfig'
 
 const meta = {
   title: '判断题',
   type: 'binary-choice',
   componentName: 'BinaryChoiceModule',
-  formConfig: [
-    // {
-    //   name: 'fieldId',
-    //   label: '题目ID',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'field',
-    //   tip: '请谨慎修改题目ID，并保证此ID在整个问卷中唯一',
-    //   relyField: 'questionIdCustomize',
-    //   noNeedRelyClean: true,
-    // },
-    // {
-    //   name: 'questionLabel',
-    //   label: '题目标签',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'label',
-    //   tip: '请谨慎修改题目标签，并保证此标签在整个问卷中唯一',
-    //   relyField: 'questionLabelCustomize',
-    //   noNeedRelyClean: true,
-    // },
-    // {
-    //   name: 'titleOrigin',
-    //   label: '标题引用其他题目选项',
-    //   type: 'TitleOrigin',
-    //   options: [],
-    //   key: 'title',
-    // },
-    basicConfig,
-  ],
+  formConfig: [basicConfig],
   editConfigure: {
     optionEdit: {
-      show: false,
+      show: false
     },
     optionEditBar: {
       show: false,
       configure: {
         showOthers: false,
-        showAdvancedConfig: false,
-      },
-    },
-  },
-};
+        showAdvancedConfig: false
+      }
+    }
+  }
+}
 
-export default meta;
+export default meta
diff --git a/web/src/materials/questions/widgets/CheckboxModule/index.jsx b/web/src/materials/questions/widgets/CheckboxModule/index.jsx
index 1564c612..b48c649c 100644
--- a/web/src/materials/questions/widgets/CheckboxModule/index.jsx
+++ b/web/src/materials/questions/widgets/CheckboxModule/index.jsx
@@ -1,119 +1,126 @@
-import baseChoice from '../BaseChoice';
-import { computed, defineComponent } from 'vue';
-import QuestionWithRule from '@/materials/questions/widgets/QuestionRuleContainer';
-import { includes } from 'lodash-es';
-import metaConfig from './meta.js';
-export const meta = metaConfig;
+import { computed, defineComponent, shallowRef, defineAsyncComponent } from 'vue'
+import { includes } from 'lodash-es'
+
+import BaseChoice from '../BaseChoice'
+import metaConfig from './meta.js'
+
+export const meta = metaConfig
 /**
  * 支持配置：
  * 排列方式, layout
  */
 export default defineComponent({
   name: 'CheckBoxModule',
-  components: { baseChoice, QuestionWithRule },
   props: {
     type: {
       type: String,
-      default: '',
+      default: ''
     },
     field: {
       type: String,
-      default: '',
+      default: ''
     },
     value: {
       type: Array,
       default: () => {
-        return [];
-      },
+        return []
+      }
     },
     layout: {
       type: String,
-      default: 'vertical',
+      default: 'vertical'
     },
     options: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     readonly: {
       type: Boolean,
-      default: false,
+      default: false
     },
     maxNum: {
       type: [Number, String],
-      default: 1,
-    },
+      default: 1
+    }
   },
+  emits: ['change'],
   setup(props, { emit }) {
     const disableState = computed(() => {
       if (!props.maxNum) {
-        return false;
+        return false
       }
-      return props.value.length >= +props.maxNum;
-    });
+      return props.value.length >= +props.maxNum
+    })
     const isDisabled = (item) => {
-      const { value } = props;
-      return disableState.value && !includes(value, item.value);
-    };
+      const { value } = props
+      return disableState.value && !includes(value, item.value)
+    }
     const myOptions = computed(() => {
-      const { options } = props;
+      const { options } = props
       return options.map((item) => {
         return {
           ...item,
-          disabled: isDisabled(item),
-        };
-      });
-    });
+          disabled: isDisabled(item)
+        }
+      })
+    })
     const onChange = (value) => {
-      const key = props.field;
+      const key = props.field
       emit('change', {
         key,
-        value,
-      });
-    };
+        value
+      })
+    }
     const handleSelectMoreChange = (data) => {
-      const { key, value } = data;
+      const { key, value } = data
       emit('change', {
         key,
-        value,
-      });
-    };
+        value
+      })
+    }
+
+    const selectMoreView = shallowRef(null)
+    if (props.readonly) {
+      selectMoreView.value = defineAsyncComponent(
+        () => import('@materials/questions/QuestionContainerB')
+      )
+    } else {
+      selectMoreView.value = defineAsyncComponent(
+        () => import('@materials/questions/QuestionRuleContainer')
+      )
+    }
     return {
       onChange,
       handleSelectMoreChange,
       myOptions,
-    };
+      selectMoreView
+    }
   },
   render() {
-    const { readonly, field, myOptions } = this;
-
-    const props = {
-      ...this.$props,
-      readonly,
-      name: field,
-      options: myOptions,
-    };
+    const { readonly, field, myOptions, onChange, maxNum, value, selectMoreView } = this
     return (
-      <baseChoice
+      <BaseChoice
         uiTarget="checkbox"
-        {...{ props: props }}
-        {...{
-          on: {
-            change: this.onChange,
-          },
-        }}
-        scopedSlots={{
+        readonly={readonly}
+        name={field}
+        maxNum={maxNum}
+        options={myOptions}
+        onChange={onChange}
+        value={value}
+      >
+        {{
           selectMore: (scoped) => {
             return (
-              <QuestionWithRule
+              <selectMoreView
                 readonly={this.readonly}
                 showTitle={false}
                 moduleConfig={scoped.selectMoreConfig}
                 onChange={(e) => this.handleSelectMoreChange(e)}
-              ></QuestionWithRule>
-            );
-          },
+              ></selectMoreView>
+            )
+          }
         }}
-      ></baseChoice>
-    );
-  },
-});
+      </BaseChoice>
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/CheckboxModule/meta.js b/web/src/materials/questions/widgets/CheckboxModule/meta.js
index 2a248681..d9148884 100644
--- a/web/src/materials/questions/widgets/CheckboxModule/meta.js
+++ b/web/src/materials/questions/widgets/CheckboxModule/meta.js
@@ -1,195 +1,49 @@
-import basicConfig from '../../common/config/basicConfig';
+import basicConfig from '@materials/questions/common/config/basicConfig'
 
 const meta = {
   title: '多选',
-  questExtra: ['listenMerge'],
   type: 'checkbox',
   componentName: 'CheckBoxModule',
   formConfig: [
-    // {
-    //   name: 'fieldId',
-    //   label: '题目ID',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'field',
-    //   tip: '请谨慎修改题目ID，并保证此ID在整个问卷中唯一',
-    //   relyField: 'questionIdCustomize',
-    //   noNeedRelyClean: true,
-    // },
-    // {
-    //   name: 'questionLabel',
-    //   label: '题目标签',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'label',
-    //   tip: '请谨慎修改题目标签，并保证此标签在整个问卷中唯一',
-    //   relyField: 'questionLabelCustomize',
-    //   noNeedRelyClean: true,
-    // },
-    // {
-    //   name: 'titleOrigin',
-    //   label: '标题引用其他题目选项',
-    //   type: 'TitleOrigin',
-    //   options: [],
-    //   key: 'title',
-    // },
     basicConfig,
-    // {
-    //   name: 'optionOrigin',
-    //   label: '选项引用其他题目选项',
-    //   type: 'Select',
-    //   options: [],
-    //   key: 'optionOrigin',
-    //   tip: '支持引用多选题、单选题、矩阵单选题',
-    // },
-    // {
-    //   name: 'originType',
-    //   label: '',
-    //   type: 'Select',
-    //   options: [
-    //     {
-    //       label: '选中项',
-    //       value: 'selected',
-    //     },
-    //     {
-    //       label: '未选中项',
-    //       value: 'noSelected',
-    //     },
-    //   ],
-    //   key: 'originType',
-    // },
-    // {
-    //   name: 'optionsExtra',
-    //   label: '固定选项配置',
-    //   type: 'Options',
-    //   options: [],
-    //   keys: 'extraOptions',
-    //   hidden: true,
-    // },
     {
       name: 'optionConfig',
-      label: '选项配置',
+      title: '选项配置',
       type: 'Customed',
       key: 'optionConfig',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
       content: [
-        // {
-        //   label: '选项随机排序',
-        //   type: 'CheckBox',
-        //   key: 'randomSort',
-        //   direction: 'horizon',
-        //   value: false,
-        //   contentPosition: 'before',
-        //   contentClass: 'check-box-config',
-        // },
-        // {
-        //   label: '固定最后一个选项',
-        //   type: 'CustomedSwitch',
-        //   key: 'pinLastOption',
-        //   direction: 'horizon',
-        //   value: false,
-        //   exclude: ['combination'],
-        //   contentClass: 'check-box-config',
-        //   tip: '开关开启后，本题的最后一个选项不参与随机，位置固定显示在最后',
-        // },
-        // {
-        //   label: '默认选中第一项',
-        //   type: 'CheckBox',
-        //   key: 'checked',
-        //   direction: 'horizon',
-        //   value: false,
-        //   contentPosition: 'before',
-        //   contentClass: 'check-box-config',
-        // },
-        // {
-        //   label: '展示选项余量',
-        //   type: 'CheckBox',
-        //   key: 'showLeftNum',
-        //   direction: 'horizon',
-        //   value: true,
-        //   include: ['appointment'],
-        //   contentPosition: 'before',
-        //   contentClass: 'check-box-config',
-        // },
-        // {
-        //   label: '切换题型',
-        //   type: 'Radio',
-        //   key: 'selectType',
-        //   direction: 'horizon',
-        //   value: '',
-        //   options: [
-        //     {
-        //       label: '单选',
-        //       value: 'radio',
-        //     },
-        //     {
-        //       label: '多选',
-        //       value: 'checkbox',
-        //     },
-        //   ],
-        //   contentClass: 'radio-config',
-        // },
-        // {
-        //   label: '排列方式',
-        //   type: 'Radio',
-        //   key: 'sortWay',
-        //   direction: 'horizon',
-        //   value: '',
-        //   options: [
-        //     {
-        //       label: '竖排',
-        //       value: 'v',
-        //     },
-        //     {
-        //       label: '横排',
-        //       value: 'h',
-        //     },
-        //   ],
-        //   contentClass: 'radio-config',
-        // },
         {
           label: '至少选择数',
           type: 'InputNumber',
           key: 'minNum',
-          direction: 'horizon',
           value: '',
           min: 0,
           max: 'maxNum',
-          contentClass: 'input-number-config',
+          contentClass: 'input-number-config'
         },
         {
           label: '最多选择数',
           type: 'InputNumber',
           key: 'maxNum',
-          direction: 'horizon',
           value: '',
           min: 'minNum',
-          contentClass: 'input-number-config',
-        },
-      ],
-    },
-    // {
-    //   name: 'randomCheckbox',
-    //   label: '随机单个选项显示关联题目',
-    //   type: 'CustomedSwitch',
-    //   direction: 'horizon',
-    //   key: 'randomCheckbox',
-    // },
+          contentClass: 'input-number-config'
+        }
+      ]
+    }
   ],
   editConfigure: {
     optionEdit: {
-      show: true,
+      show: true
     },
     optionEditBar: {
       show: true,
       configure: {
         showOthers: true,
-        showAdvancedConfig: true,
-      },
-    },
-  },
-};
+        showAdvancedConfig: true
+      }
+    }
+  }
+}
 
-export default meta;
+export default meta
diff --git a/web/src/materials/questions/widgets/EditOptions.jsx b/web/src/materials/questions/widgets/EditOptions.jsx
deleted file mode 100644
index fe6488cd..00000000
--- a/web/src/materials/questions/widgets/EditOptions.jsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { defineComponent, ref, computed, onMounted } from 'vue';
-import OptionEdit from '@/materials/questions/components/Options/OptionEdit.vue';
-import OptionEditBar from '@/materials/questions/components/Options/OptionEditBar.vue';
-import store from '@/management/store';
-import questionLoader from '@/materials/questions/questionLoader';
-import UseOptionBase from '@/materials/questions/components/Options/UseOptionBase';
-
-export default defineComponent({
-  name: 'EditOptions',
-  components: {
-    OptionEdit,
-    OptionEditBar,
-  },
-  provide() {
-    return {
-      currentEditKey: store.getters['edit/currentEditKey'],
-      moduleConfig: computed(() => this.moduleConfig),
-    };
-  },
-  props: {
-    moduleConfig: {
-      type: Object,
-      required: true,
-    },
-  },
-  setup(props) {
-    const questionDataList = computed(() => {
-      return store.state.schema.questionDataList;
-    });
-    const currentEditOne = computed(() => {
-      return store.state?.edit?.currentEditOne;
-    });
-    const currentEditKey = computed(() => {
-      return store.getters['edit/currentEditKey'];
-    });
-    const getOptions = computed(() => {
-      return props.moduleConfig.options;
-    });
-    const { addOption, addOtherOption } = UseOptionBase(getOptions);
-    const handleAddOption = (
-      text = '选项',
-      others = false,
-      index = -1,
-      field
-    ) => {
-      const value = addOption(text, others, index, field);
-      handleOptionChange(value);
-    };
-    const handleAddOtherOption = () => {
-      const { field } = props.moduleConfig;
-      const value = addOtherOption(field);
-      handleOptionChange(value);
-    };
-
-    const handleOptionChange = (value) => {
-      const optionKey = `options`;
-      const key = `${currentEditKey.value}.${optionKey}`;
-      handleChange({ key, value });
-    };
-
-    const handleChange = ({ key, value }) => {
-      store.dispatch('edit/changeSchema', { key, value });
-    };
-    // const questionMeta = ref({})
-    const isShowOptionConfig = ref(false);
-    const hasAdvancedConfig = ref(false);
-    const hasAdvancedRateConfig = ref(false);
-    const showOthers = ref(false);
-    const showOptionEdit = ref(false);
-    const showOptionEditBar = ref(true);
-    onMounted(() => {
-      const questionMeta = questionLoader.getMeta(props.moduleConfig.type);
-      const { editConfigure } = questionMeta;
-
-      if (editConfigure) {
-        showOptionEdit.value = editConfigure.optionEdit.show;
-        const { optionEditBar } = editConfigure;
-        showOptionEditBar.value = optionEditBar.show;
-        showOthers.value = optionEditBar.configure.showOthers;
-        hasAdvancedConfig.value = Boolean(
-          optionEditBar.configure.showAdvancedConfig
-        );
-        hasAdvancedRateConfig.value = Boolean(
-          optionEditBar.configure.showAdvancedRateConfig
-        );
-      } else {
-        // meta不存在的兜底程序
-        if (
-          ['radio-star', 'text', 'textarea'].includes(props.moduleConfig.type)
-        ) {
-          showOptionEdit.value = false;
-        } else {
-          showOptionEdit.value = true;
-        }
-        if (['radio-star'].includes(props.moduleConfig.type)) {
-          showOthers.value = false;
-        } else {
-          showOthers.value = true;
-        }
-        if (['binary-choice'].includes(props.moduleConfig.type)) {
-          showOptionEditBar.value = false;
-        }
-        if (!['radio-star'].includes(props.moduleConfig.type)) {
-          hasAdvancedConfig.value = true;
-        } else {
-          hasAdvancedRateConfig.value = true;
-        }
-      }
-    });
-    return {
-      questionDataList,
-      currentEditOne,
-      currentEditKey,
-      getOptions,
-      isShowOptionConfig,
-      hasAdvancedConfig,
-      hasAdvancedRateConfig,
-      showOptionEdit,
-      showOptionEditBar,
-      showOthers,
-      handleAddOption,
-      handleAddOtherOption,
-      handleOptionChange,
-      handleChange,
-    };
-  },
-  render() {
-    return (
-      <div class="selected-wrapper radio-selected-wrapper">
-        {this.showOptionEdit ? (
-          <OptionEdit
-            option-list={this.getOptions}
-            onAddOption={this.handleAddOption}
-            onOptionChange={this.handleOptionChange}
-            onChange={this.handleChange}
-          />
-        ) : (
-          this.$slots.default
-        )}
-        {this.showOptionEditBar && (
-          <OptionEditBar
-            ref="optionEditBar"
-            option-list={this.getOptions}
-            showOthers={this.showOthers}
-            hasAdvancedConfig={this.hasAdvancedConfig}
-            hasAdvancedRateConfig={this.hasAdvancedRateConfig}
-            onAddOption={this.handleAddOption}
-            onAddOther={this.handleAddOtherOption}
-            onOptionChange={this.handleOptionChange}
-            onChange={this.handleChange}
-          />
-        )}
-      </div>
-    );
-  },
-});
diff --git a/web/src/materials/questions/widgets/EditOptions/AdvancedConfig/OptionConfig.vue b/web/src/materials/questions/widgets/EditOptions/AdvancedConfig/OptionConfig.vue
new file mode 100644
index 00000000..8f9c9cac
--- /dev/null
+++ b/web/src/materials/questions/widgets/EditOptions/AdvancedConfig/OptionConfig.vue
@@ -0,0 +1,387 @@
+<template>
+  <el-dialog
+    title="选项高级设置"
+    class="option-config-wrapper"
+    v-model="configVisible"
+    :append-to-body="true"
+    :width="dialogWidth"
+    size="large"
+  >
+    <div class="option-handwrite">
+      <div class="option-header">
+        <div class="header-item flex-1" v-if="showText">选项内容</div>
+        <div class="header-item w285" v-if="showOthers">选项后增添输入框</div>
+      </div>
+      <div>
+        <draggable :list="curOptions" handle=".drag-handle" itemKey="hash">
+          <template #item="{ element, index }">
+            <div class="option-item">
+              <span class="drag-handle qicon qicon-tuodong"></span>
+              <div class="flex-1 oitem" v-if="showText">
+                <div
+                  contenteditable="true"
+                  class="render-html"
+                  v-html="textOptions[index]"
+                  @blur="onBlur($event, index)"
+                ></div>
+              </div>
+              <div class="oitem moreInfo lh36" v-if="showOthers">
+                <el-switch
+                  :modelValue="element.others"
+                  @change="(val) => changeOptionOthers(val, element)"
+                ></el-switch>
+                <div class="more-info-content" v-if="element.others">
+                  <el-input v-model="element.placeholderDesc" placeholder="提示文案"></el-input>
+                  <el-checkbox v-model="element.mustOthers">必填</el-checkbox>
+                </div>
+              </div>
+
+              <div class="operate-area" v-if="showOperateOption">
+                <i-ep-circlePlus
+                  v-if="showOperateOption"
+                  class="area-btn-icon"
+                  @click="addOption('选项', false, index)"
+                />
+                <i-ep-remove
+                  v-show="curOptions.length"
+                  class="area-btn-icon"
+                  @click="deleteOption(index)"
+                />
+              </div>
+            </div>
+          </template>
+        </draggable>
+      </div>
+      <div class="add-btn-row">
+        <div class="add-option" v-if="showOperateOption" @click="addOption()">
+          <span class="add-option-item"> <i-ep-circlePlus class="icon" /> 添加新选项 </span>
+        </div>
+
+        <div v-if="showOperateOption && showOthers" class="add-option" @click="addOtherOption">
+          <span>
+            <extra-icon type="add-square"></extra-icon>
+            其他____
+          </span>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="configVisible = false">取消</el-button>
+        <el-button type="primary" @click="optionConfigChange">确认</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import { forEach as _forEach, cloneDeep as _cloneDeep } from 'lodash-es'
+
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import { cleanRichText } from '@/common/xss'
+import ExtraIcon from '../ExtraIcon/index.vue'
+
+export default {
+  name: 'OptionConfig',
+  inject: ['moduleConfig'],
+  data() {
+    return {
+      curOptions: _cloneDeep(this.options),
+      popoverVisible: false
+    }
+  },
+  props: {
+    options: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    showOptionDialog: {
+      type: Boolean,
+      default: false
+    },
+    dialogWidth: {
+      type: String,
+      default: '60%'
+    },
+    showOperateOption: {
+      type: Boolean,
+      default: true
+    },
+    showText: {
+      type: Boolean,
+      default: true
+    },
+    showOthers: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    configVisible: {
+      get() {
+        return this.showOptionDialog
+      },
+      set(newVal) {
+        this.$emit('update:modelValue', newVal)
+      }
+    },
+    hashMap() {
+      const mapData = {}
+      _forEach(this.curOptions, (item) => {
+        if (item.hash) {
+          mapData[item.hash] = true
+        }
+      })
+      return mapData
+    },
+    textOptions() {
+      return this.curOptions.map((item) => item.text)
+    }
+  },
+  components: {
+    draggable,
+    ExtraIcon
+  },
+  watch: {
+    options(val) {
+      this.curOptions = _cloneDeep(val)
+    }
+  },
+  methods: {
+    addOtherOption() {
+      const { field } = this.moduleConfig
+      this.addOption('其他', true, -1, field)
+    },
+    addOption(text = '选项', others = false, index = -1, field) {
+      let addOne
+      if (this.curOptions[0]) {
+        addOne = _cloneDeep(this.curOptions[0])
+      } else {
+        addOne = {
+          text: '',
+          hash: '',
+          others: false,
+          mustOthers: false,
+          othersKey: '',
+          placeholderDesc: '',
+          score: 0,
+          limit: ''
+        }
+      }
+      for (const i in addOne) {
+        if (i === 'others') {
+          addOne[i] = others
+          if (others) addOne.othersKey = `${field}_${addOne.hash}`
+        } else if (i === 'mustOthers') {
+          addOne[i] = false
+        } else if (i === 'text') {
+          addOne[i] = text
+        } else if (i === 'score') {
+          addOne[i] = 0
+        }
+      }
+      addOne.hash = this.getNewHash()
+      if (index < 0 || typeof index !== 'number') {
+        this.curOptions.push(addOne)
+      } else {
+        this.curOptions.splice(index + 1, 0, addOne)
+      }
+
+      return addOne
+    },
+    async deleteOption(index) {
+      this.curOptions.splice(index, 1)
+    },
+    parseImport(newOptions) {
+      if (typeof newOptions !== 'undefined' && newOptions.length > 0) {
+        this.curOptions = newOptions
+        this.importKey = 'single'
+        this.popoverVisible = false
+      } else {
+        ElMessage.warning('最少保留一项')
+      }
+    },
+    getNewHash() {
+      let random = this.getRandom()
+      while (random in this.hashMap) {
+        random = this.getRandom()
+      }
+      return random
+    },
+    getRandom() {
+      return Math.random().toString().slice(-6)
+    },
+    changeOptionOthers(val, option) {
+      const { field } = this.moduleConfig
+      option.others = val
+      if (val) {
+        option.othersKey = `${field}_${option.hash}`
+      } else {
+        option.othersKey = ''
+      }
+    },
+    optionConfigChange() {
+      const arr = []
+      this.curOptions.forEach((item) => {
+        item.label !== undefined && item.label !== '' && arr.push(item.label)
+      })
+      const set = [...new Set(arr)]
+      if (set.length < arr.length) {
+        this.curOptions.forEach((item, index) => {
+          item.label = this.options[index].label || ''
+        })
+        ElMessage.warning('已存在相同的标签内容，请重新输入')
+        return
+      }
+      this.$emit('optionChange', this.curOptions)
+      this.configVisible = false
+    },
+    onBlur(e, index) {
+      if (cleanRichText(e.target.innerHTML) === '') return
+      this.curOptions[index].text = e.target.innerHTML
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.option-config-wrapper {
+  .option-handwrite {
+    .option-header {
+      position: relative;
+      background: #f9fafc;
+      border: 1px solid #edeffc;
+      border-radius: 2px;
+      font-size: inherit;
+      color: #506b7b;
+      height: 32px;
+      line-height: 32px;
+      padding-left: 24px;
+      padding-right: 50px;
+      display: flex;
+      overflow: hidden;
+
+      .option-item {
+        margin-right: 8px;
+        &.mutex-head {
+          text-align: center;
+        }
+      }
+    }
+    .option-item {
+      display: flex;
+      align-items: center;
+      margin-top: 10px;
+      padding-right: 50px;
+      position: relative;
+      .oitem {
+        margin-right: 8px;
+        text-align: center;
+        &.moreInfo {
+          text-align: left;
+        }
+        .star-imgupload-icon {
+          color: #92949d;
+          background-color: #fff !important;
+        }
+      }
+      .icon-mobile {
+        line-height: 36px;
+        margin-right: 8px;
+      }
+      .lh36 {
+        line-height: 36px;
+      }
+      .moreInfo {
+        width: 285px;
+        .more-info-content {
+          display: inline-block;
+          margin-left: 10px;
+          border-bottom: 1px solid #e3e4e8;
+          border-radius: 2px;
+          .el-input {
+            width: 150px;
+            :deep(.el-input__wrapper) {
+              box-shadow: none;
+            }
+          }
+          .el-checkbox {
+            color: #6e707c;
+          }
+        }
+      }
+
+      .area-btn-icon {
+        margin-right: 5px;
+        cursor: pointer;
+        font-size: 16px;
+      }
+    }
+    .flex-1 {
+      flex: 1;
+      .render-html {
+        border-color: #e3e4e8;
+        border-radius: 2px;
+        color: #6e707c;
+        height: auto;
+        padding: 9px 0;
+        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+        width: 100%;
+        border: 1px solid #dcdfe6;
+      }
+    }
+
+    .w285 {
+      width: 285px;
+    }
+    .operate-area {
+      width: 50px;
+      position: absolute;
+      right: 0;
+      z-index: 2;
+      border-color: #fff;
+      font-size: 18px;
+      text-align: right;
+      .el-icon {
+        cursor: pointer;
+        font-size: inherit;
+        &:first-child {
+          margin-right: 8px;
+        }
+      }
+    }
+    .drag-handle {
+      margin-top: 0;
+      cursor: move;
+    }
+
+    .add-btn-row {
+      color: $primary-color;
+      display: flex;
+      align-items: center;
+      .add-option {
+        padding-left: 23px;
+        margin-top: 15px;
+        margin-bottom: 15px;
+        font-size: 12px;
+        cursor: pointer;
+        .add-option-item {
+          display: flex;
+          align-items: center;
+          .icon {
+            margin-right: 5px;
+          }
+        }
+      }
+      .add-option:first-child {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/web/src/materials/questions/components/AdvancedConfig/RateConfig.vue b/web/src/materials/questions/widgets/EditOptions/AdvancedConfig/RateConfig.vue
similarity index 64%
rename from web/src/materials/questions/components/AdvancedConfig/RateConfig.vue
rename to web/src/materials/questions/widgets/EditOptions/AdvancedConfig/RateConfig.vue
index 1cbeb6b2..4737b457 100644
--- a/web/src/materials/questions/components/AdvancedConfig/RateConfig.vue
+++ b/web/src/materials/questions/widgets/EditOptions/AdvancedConfig/RateConfig.vue
@@ -2,7 +2,7 @@
   <el-dialog
     title="评分高级设置"
     custom-class="option-config-wrapper"
-    :visible.sync="innerVisible"
+    v-model="innerVisible"
     :append-to-body="true"
     :width="dialogWidth"
   >
@@ -17,12 +17,7 @@
       <div class="row" v-for="item in range" :key="item.index">
         <div class="score">{{ item.index }}</div>
         <div class="explain" v-if="explain">
-          <el-input
-            class="text"
-            v-model="item.explain"
-            maxlength="200"
-            placeholder="最多200字"
-          />
+          <el-input class="text" v-model="item.explain" maxlength="200" placeholder="最多200字" />
         </div>
         <div class="other">
           <el-switch class="is-show" v-model="item.isShowInput"></el-switch>
@@ -32,117 +27,110 @@
             v-model="item.text"
             placeholder="提示文案"
           />
-          <el-checkbox
-            class="required"
-            v-show="item.isShowInput"
-            v-model="item.required"
+          <el-checkbox class="required" v-show="item.isShowInput" v-model="item.required"
             >必填</el-checkbox
           >
         </div>
       </div>
     </div>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="innerVisible = false">取消</el-button>
-      <el-button type="primary" @click="onConfirm">确认</el-button>
-    </span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="innerVisible = false">取消</el-button>
+        <el-button type="primary" @click="onConfirm">确认</el-button>
+      </span>
+    </template>
   </el-dialog>
 </template>
 <script>
-import { get as _get } from 'lodash-es';
-import { mapGetters } from 'vuex';
+import { get as _get } from 'lodash-es'
+import { mapGetters } from 'vuex'
 export default {
   props: {
     min: {
       type: Number,
-      default: 1,
+      default: 1
     },
     max: {
       type: Number,
-      default: 5,
+      default: 5
     },
     visible: {
       type: Boolean,
-      default: false,
+      default: false
     },
     dialogWidth: {
       type: [Number, String],
-      default: '600px',
+      default: '600px'
     },
     rangeConfig: {
       type: Object,
-      default: () => ({}),
+      default: () => ({})
     },
     explain: {
       type: Boolean,
-      default: false,
-    },
-  },
-  watch: {
-    // innerVisible(newVal) {
-    // this.$emit('update:visible', newVal)
-    // },
+      default: false
+    }
   },
   data() {
     return {
-      // innerVisible: this.visible,
-      range: [],
-    };
+      range: []
+    }
   },
   created() {
-    this.initRange();
+    this.initRange()
   },
   computed: {
     ...mapGetters({
-      currentEditKey: 'edit/currentEditKey',
+      currentEditKey: 'edit/currentEditKey'
     }),
     innerVisible: {
       get() {
-        return this.visible;
+        return this.visible
       },
       set(newVal) {
-        this.$emit('visibleChange', newVal);
-      },
-    },
+        this.$emit('update:modelValue', newVal)
+      }
+    }
   },
   methods: {
     initRange() {
       if (this.min >= this.max) {
-        return;
+        return
       }
-      const res = [];
+      const res = []
       for (let i = this.min; i <= this.max; i++) {
         res.push({
           index: i,
           isShowInput: _get(this.rangeConfig, `${i}.isShowInput`) || false,
           text: _get(this.rangeConfig, `${i}.text`) || '',
           required: _get(this.rangeConfig, `${i}.required`) || false,
-          explain: _get(this.rangeConfig, `${i}.explain`) || '',
-        });
+          explain: _get(this.rangeConfig, `${i}.explain`) || ''
+        })
       }
-      this.range = res;
+      this.range = res
     },
     onConfirm() {
-      const res = {};
+      const res = {}
       for (const item of this.range) {
         res[item.index] = {
           isShowInput: item.isShowInput,
           text: item.text,
           required: item.required,
-          explain: item.explain,
-        };
+          explain: item.explain
+        }
       }
-      const paramsKey = `rangeConfig`;
+      const paramsKey = `rangeConfig`
       const payload = {
         key: `${this.currentEditKey}.${paramsKey}`,
-        value: res,
-      };
-      this.$emit('confirm', payload);
-      this.innerVisible = false;
-    },
-  },
-};
+        value: res
+      }
+      this.$emit('confirm', payload)
+      this.innerVisible = false
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .row {
   display: flex;
   height: 60px;
diff --git a/web/src/materials/questions/components/ExtraIcon.vue b/web/src/materials/questions/widgets/EditOptions/ExtraIcon/index.vue
similarity index 80%
rename from web/src/materials/questions/components/ExtraIcon.vue
rename to web/src/materials/questions/widgets/EditOptions/ExtraIcon/index.vue
index d3ffee69..509af784 100644
--- a/web/src/materials/questions/components/ExtraIcon.vue
+++ b/web/src/materials/questions/widgets/EditOptions/ExtraIcon/index.vue
@@ -11,27 +11,12 @@
       >
         <title>添加</title>
         <desc>Created with Sketch.</desc>
-        <g
-          id="页面-1"
-          stroke="none"
-          stroke-width="1"
-          fill="none"
-          fill-rule="evenodd"
-        >
-          <g
-            id="单选编辑-未hover任何"
-            transform="translate(-635.000000, -631.000000)"
-          >
+        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g id="单选编辑-未hover任何" transform="translate(-635.000000, -631.000000)">
             <g id="编组-14" transform="translate(528.000000, 625.000000)">
               <g id="添加" transform="translate(107.000000, 6.000000)">
                 <g>
-                  <rect
-                    id="Rectangle-35-Copy-8"
-                    x="0"
-                    y="0"
-                    width="12"
-                    height="12"
-                  />
+                  <rect id="Rectangle-35-Copy-8" x="0" y="0" width="12" height="12" />
                   <path
                     d="M10.4561141,1.64271542 L10.4561141,1.64271542 L10.4561141,1.64271542 L10.4561141,10.4572846 L10.4561141,10.4572846 L1.64271542,10.4572846 L1.64271542,10.4572846 L1.64271542,1.64271542 L1.64271542,1.64271542 L10.4561141,1.64271542 L10.4561141,1.64271542 Z M10.4561141,0.8 L1.64271542,0.8 C1.17688106,0.8 0.8,1.17688106 0.8,1.64271542 L0.8,10.4572846 C0.8,10.9231189 1.17688106,11.3 1.64271542,11.3 L10.4572846,11.3 C10.9231189,11.3 11.3,10.9231189 11.3,10.4572846 L11.3,1.64271542 C11.2988296,1.17688106 10.9219485,0.8 10.4561141,0.8 L10.4561141,0.8 Z M8.62437855,5.63390926 L6.47662468,5.63390926 L6.47662468,3.48615539 C6.47662468,3.25323821 6.28818415,3.06479768 6.05526697,3.06479768 L6.05526697,3.06479768 C5.82234979,3.06479768 5.63390926,3.25323821 5.63390926,3.48615539 L5.63390926,5.63390926 L3.47445101,5.63390926 C3.24153383,5.63390926 3.0530933,5.82234979 3.0530933,6.05526697 L3.0530933,6.05526697 C3.0530933,6.28818415 3.24153383,6.47662468 3.47445101,6.47662468 L5.63390926,6.47662468 L5.63390926,8.61267417 C5.63390926,8.84559135 5.82234979,9.03403188 6.05526697,9.03403188 L6.05526697,9.03403188 C6.28818415,9.03403188 6.47662468,8.84559135 6.47662468,8.61267417 L6.47662468,6.47662468 L8.62437855,6.47662468 C8.85729573,6.47662468 9.04573626,6.28818415 9.04573626,6.05526697 L9.04573626,6.05526697 C9.04573626,5.82234979 8.85729573,5.63390926 8.62437855,5.63390926 Z"
                     :fill="getColor"
@@ -56,31 +41,15 @@
         <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
         <title>批量选项</title>
         <desc>Created with Sketch.</desc>
-        <g
-          id="页面-1"
-          stroke="none"
-          stroke-width="1"
-          fill="none"
-          fill-rule="evenodd"
-        >
-          <g
-            id="单选编辑-未hover任何"
-            transform="translate(-528.000000, -631.000000)"
-          >
+        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+          <g id="单选编辑-未hover任何" transform="translate(-528.000000, -631.000000)">
             <g id="编组-14" transform="translate(528.000000, 625.000000)">
               <g id="编组">
                 <g
                   id="批量选项"
                   transform="translate(6.000000, 12.000000) scale(-1, -1) translate(-6.000000, -12.000000) translate(0.000000, 6.000000)"
                 >
-                  <rect
-                    id="Rectangle-41-Copy-4"
-                    fill=""
-                    x="0"
-                    y="0"
-                    width="12"
-                    height="12"
-                  />
+                  <rect id="Rectangle-41-Copy-4" fill="" x="0" y="0" width="12" height="12" />
                   <path
                     d="M7.208125,6.578125 L2.801875,6.578125 C2.56867188,6.578125 2.38,6.76679688 2.38,7 C2.38,7.23320312 2.56867188,7.421875 2.801875,7.421875 L7.208125,7.421875 C7.44132813,7.421875 7.63,7.23320312 7.63,7 C7.63,6.76679688 7.44132813,6.578125 7.208125,6.578125 Z M5.44375,9.203125 L5.44375,4.796875 C5.44375,4.56367187 5.25507813,4.375 5.021875,4.375 C4.78867188,4.375 4.6,4.56367187 4.6,4.796875 L4.6,9.203125 C4.6,9.43632812 4.78867188,9.625 5.021875,9.625 C5.25507813,9.625 5.44375,9.43632812 5.44375,9.203125 Z M9.2,3.34375 L9.2,10.65625 L0.85,10.65625 L0.85,3.34375 L9.2,3.34375 L9.2,3.34375 Z M9.0625,2.5 L0.9375,2.5 C0.419270833,2.5 0,2.87734375 0,3.34375 L0,10.65625 C0,11.1226562 0.419270833,11.5 0.9375,11.5 L9.0625,11.5 C9.58072917,11.5 10,11.1226562 10,10.65625 L10,3.34375 C10,2.87734375 9.58072917,2.5 9.0625,2.5 Z M11.15625,0.5 L3.421875,0.5 C3.18867187,0.5 3,0.688671875 3,0.921875 C3,1.15507813 3.18867187,1.34375 3.421875,1.34375 L11.15625,1.34375 L11.15625,9.078125 C11.15625,9.31132812 11.3449219,9.5 11.578125,9.5 C11.8113281,9.5 12,9.31132812 12,9.078125 L12,1.34375 C12,0.87734375 11.6226562,0.5 11.15625,0.5 Z"
                     :fill="getColor"
@@ -99,16 +68,16 @@
 export default {
   name: 'ExtraIcon',
   props: {
-    type: String,
+    type: String
   },
   computed: {
     getColor() {
-      return '#FAA600';
-    },
-  },
-};
+      return '#FAA600'
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .icon {
   margin-right: 2px;
   svg {
diff --git a/web/src/materials/questions/widgets/EditOptions/Options/OptionEdit.vue b/web/src/materials/questions/widgets/EditOptions/Options/OptionEdit.vue
new file mode 100644
index 00000000..623dd55d
--- /dev/null
+++ b/web/src/materials/questions/widgets/EditOptions/Options/OptionEdit.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="option-edit-wrap">
+    <draggable
+      id="sortDraggable"
+      :list="optionList"
+      handle=".drag-handle"
+      @update="optionSortChange"
+      itemKey="hash"
+    >
+      <template #item="{ element, index }">
+        <div class="draggdiv dragg-handle">
+          <span class="drag-handle qicon qicon-tuodong"></span>
+          <div class="input-box">
+            <RichEditor
+              :modelValue="element.text"
+              @change="(value) => handleChange(index, value)"
+            />
+          </div>
+
+          <i-ep-circlePlus
+            v-if="isShowOperation"
+            class="opt-btn-icon"
+            @click="onAddOption(index)"
+          />
+          <el-tooltip
+            v-if="isShowOperation"
+            class="icon delete"
+            effect="dark"
+            content="删除"
+            placement="top"
+          >
+            <i-ep-remove @click="deleteOption(index)" class="opt-btn-icon delete" />
+          </el-tooltip>
+        </div>
+      </template>
+    </draggable>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import { mapGetters } from 'vuex'
+import { cloneDeep as _cloneDeep } from 'lodash-es'
+import RichEditor from '@/common/Editor/RichEditor.vue'
+
+export default {
+  name: 'OptionEdit',
+  computed: {
+    ...mapGetters({
+      currentEditKey: 'edit/currentEditKey'
+    })
+  },
+  props: {
+    optionList: {
+      type: Array
+    },
+    isShowOperation: {
+      type: Boolean,
+      default: true
+    }
+  },
+  components: {
+    draggable,
+    RichEditor
+  },
+  mounted() {
+    // 选项hash兜底
+    const hashMap = {}
+    let hashHasChanged = false
+    for (const item of this.optionList) {
+      if (!item.hash) {
+        item.hash = this.getNewHash(hashMap)
+        hashHasChanged = true
+      }
+    }
+    const originOptionList = _cloneDeep(this.optionList)
+    if (hashHasChanged) {
+      this.$emit('optionChange', originOptionList)
+    }
+  },
+  methods: {
+    getRandom() {
+      return Math.random().toString().slice(-6)
+    },
+    getNewHash(hashMap) {
+      let random = this.getRandom()
+      while (random in hashMap) {
+        random = this.getRandom()
+      }
+      return random
+    },
+    handleChange(index, value) {
+      // 更新单个选项文案
+      const optionKey = `options[${index}].text`
+      const key = `${this.currentEditKey}.${optionKey}`
+      this.$emit('change', { key, value })
+    },
+    onAddOption(index) {
+      this.$emit('addOption', '选项', false, index)
+    },
+    async deleteOption(index) {
+      const optionList = _cloneDeep(this.optionList)
+      optionList.splice(index, 1)
+      this.$emit('optionChange', optionList)
+    },
+    optionSortChange() {
+      const optionList = _cloneDeep(this.optionList)
+      this.$emit('optionChange', optionList)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.option-edit-wrap {
+  #sortDraggable {
+    user-select: none;
+    padding-right: 0.08rem;
+  }
+
+  .draggdiv {
+    display: block;
+    cursor: move;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    border: 1px solid transparent;
+    margin-bottom: 10px;
+    padding-right: 7px;
+    position: relative;
+    height: auto;
+    .input-box {
+      display: inline-block;
+      height: auto;
+      min-width: 210px;
+      flex: 1;
+      position: relative;
+      align-items: center;
+      border: 1px solid transparent;
+      border-left: 3px solid transparent;
+      margin-right: 10px;
+    }
+
+    &.dragg-handle {
+      border: 1px solid transparent;
+
+      .input-box {
+        margin-left: 5px;
+        background-color: #fff;
+        border: 1px solid #e3e4e6;
+        border-radius: 2px;
+      }
+
+      .opt-btn-icon {
+        margin-right: 5px;
+        color: #888;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>
diff --git a/web/src/materials/questions/widgets/EditOptions/Options/OptionEditBar.vue b/web/src/materials/questions/widgets/EditOptions/Options/OptionEditBar.vue
new file mode 100644
index 00000000..552c98e2
--- /dev/null
+++ b/web/src/materials/questions/widgets/EditOptions/Options/OptionEditBar.vue
@@ -0,0 +1,163 @@
+<template>
+  <!-- const { showOthers, hasAdvancedConfig, hasAdvancedRateConfig, min, max, explain, isNps } = this -->
+  <div class="option-edit-bar-wrap">
+    <div class="option-edit-bar">
+      <div v-if="showOthers" class="add-option primary-color" @click="addOther">
+        <extra-icon type="add-square"></extra-icon>
+        其他____
+      </div>
+
+      <span
+        v-if="hasAdvancedConfig"
+        class="option-advanced-config primary-color"
+        @click="openOptionConfig"
+      >
+        高级设置>
+      </span>
+
+      <span
+        v-if="hasAdvancedRateConfig"
+        class="option-advanced-config primary-color"
+        @click="openRateConfig"
+      >
+        高级评分设置>
+      </span>
+    </div>
+
+    <OptionConfig
+      :options="optionList"
+      :showOptionDialog="optionConfigVisible"
+      :showOthers="showOthers"
+      :showLimit="false"
+      v-model="optionConfigVisible"
+      @addOther="addOther"
+      @optionChange="handleOptionChange"
+      @change="handleChange"
+    />
+
+    <RateConfig
+      :class="isNps ? 'nps-rate-config' : ''"
+      dialogWidth="800px"
+      :min="min"
+      :max="max"
+      :rangeConfig="moduleConfig.rangeConfig"
+      v-model="rateConfigVisible"
+      :explain="explain"
+      @confirm="handleChange"
+      @visibleChange="onVisibleChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject } from 'vue'
+import OptionConfig from '../AdvancedConfig/OptionConfig.vue'
+import RateConfig from '../AdvancedConfig/RateConfig.vue'
+import ExtraIcon from '../ExtraIcon/index.vue'
+
+defineProps({
+  optionList: {
+    type: Array,
+    default: () => []
+  },
+  showOthers: {
+    type: Boolean,
+    default: true
+  },
+  hasAdvancedConfig: {
+    type: Boolean,
+    default: true
+  },
+  hasAdvancedRateConfig: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['addOther', 'optionChange', 'change'])
+
+const moduleConfig = inject('moduleConfig') as any
+const optionConfigVisible = ref(false)
+const openOptionConfig = () => {
+  console.log('open')
+  optionConfigVisible.value = true
+}
+
+const addOther = () => {
+  emit('addOther')
+}
+const handleOptionChange = (value: any[]) => {
+  emit('optionChange', value)
+}
+const handleChange = (data: any) => {
+  emit('change', data)
+}
+
+const rateConfigVisible = ref(false)
+const openRateConfig = () => {
+  rateConfigVisible.value = true
+}
+const onVisibleChange = (val: boolean) => {
+  rateConfigVisible.value = val
+}
+
+const isNps = computed(() => {
+  return moduleConfig.value.type === 'radio-nps'
+})
+
+const min = computed(() => {
+  const { min, starMin } = moduleConfig.value
+  return isNps.value ? min : starMin
+})
+
+const max = computed(() => {
+  const { max, starMax } = moduleConfig.value
+  return isNps.value ? max : starMax
+})
+
+const explain = computed(() => {
+  const { type } = moduleConfig.value
+  if (type == 'radio-start') return true
+  if (isNps.value) return false
+  return true
+})
+</script>
+
+<style lang="scss" scoped>
+.option-edit-bar-wrap {
+  margin-top: 20px;
+  padding-left: 10px;
+  position: relative;
+  line-height: 24px;
+  font-size: 12px;
+  color: $primary-color;
+
+  .add-option {
+    display: inline-block;
+    margin-right: 10px;
+    cursor: pointer;
+    font-size: 12px;
+  }
+
+  .option-advanced-config {
+    color: #0f8a82;
+    float: right;
+    cursor: pointer;
+    font-size: 12px;
+  }
+
+  .primary-color {
+    color: $primary-color;
+  }
+}
+
+.nps-rate-config {
+  :deep(.row) {
+    height: 47px;
+  }
+  :deep(.text) {
+    input {
+      height: 32px;
+    }
+  }
+}
+</style>
diff --git a/web/src/materials/questions/components/Options/UseOptionBase.jsx b/web/src/materials/questions/widgets/EditOptions/Options/UseOptionBase.jsx
similarity index 51%
rename from web/src/materials/questions/components/Options/UseOptionBase.jsx
rename to web/src/materials/questions/widgets/EditOptions/Options/UseOptionBase.jsx
index 46f7ff74..02a644ef 100644
--- a/web/src/materials/questions/components/Options/UseOptionBase.jsx
+++ b/web/src/materials/questions/widgets/EditOptions/Options/UseOptionBase.jsx
@@ -1,15 +1,15 @@
-import { ref } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { ref } from 'vue'
+import { cloneDeep } from 'lodash-es'
 
-import GetHash from '../../common/utils/getOptionHash';
+import GetHash from '@materials/questions/common/utils/getOptionHash'
 
 function useOptionBase(options) {
-  const optionList = ref(options);
+  const optionList = ref(options)
   const addOption = (text = '选项', others = false, index = -1, field) => {
     // const {} = payload
-    let addOne;
+    let addOne
     if (optionList.value[0]) {
-      addOne = cloneDeep(optionList.value[0]);
+      addOne = cloneDeep(optionList.value[0])
     } else {
       addOne = {
         text: '',
@@ -20,41 +20,41 @@ function useOptionBase(options) {
         othersKey: '',
         placeholderDesc: '',
         score: 0,
-        limit: '',
-      };
-    }
-    if (typeof text !== 'string') {
-      text = '选项';
-    }
-
-    const getHash = new GetHash();
-    addOne.hash = getHash.getHash();
-    for (const i in addOne) {
-      if (i === 'others') {
-        addOne[i] = others;
-        if (others) addOne.othersKey = `${field}_${addOne.hash}`;
-      } else if (i === 'mustOthers') {
-        addOne[i] = false;
-      } else if (i === 'text') {
-        addOne[i] = text;
+        limit: ''
       }
     }
-    let myoptionList = cloneDeep(optionList.value);
-    if (index < 0) {
-      myoptionList.push(addOne);
-    } else {
-      myoptionList.splice(index + 1, 0, addOne);
+    if (typeof text !== 'string') {
+      text = '选项'
     }
-    return myoptionList;
-  };
+
+    const getHash = new GetHash()
+    addOne.hash = getHash.getHash()
+    for (const i in addOne) {
+      if (i === 'others') {
+        addOne[i] = others
+        if (others) addOne.othersKey = `${field}_${addOne.hash}`
+      } else if (i === 'mustOthers') {
+        addOne[i] = false
+      } else if (i === 'text') {
+        addOne[i] = text
+      }
+    }
+    let myoptionList = cloneDeep(optionList.value)
+    if (index < 0) {
+      myoptionList.push(addOne)
+    } else {
+      myoptionList.splice(index + 1, 0, addOne)
+    }
+    return myoptionList
+  }
 
   const addOtherOption = (field) => {
-    return addOption('其他', true, -1, field);
-  };
+    return addOption('其他', true, -1, field)
+  }
   return {
     addOption,
-    addOtherOption,
-  };
+    addOtherOption
+  }
 }
 
-export default useOptionBase;
+export default useOptionBase
diff --git a/web/src/materials/questions/widgets/EditOptions/index.jsx b/web/src/materials/questions/widgets/EditOptions/index.jsx
new file mode 100644
index 00000000..a9c6f9c8
--- /dev/null
+++ b/web/src/materials/questions/widgets/EditOptions/index.jsx
@@ -0,0 +1,112 @@
+import { defineComponent, ref, computed, onMounted } from 'vue'
+
+import store from '@/management/store'
+
+import OptionEdit from './Options/OptionEdit.vue'
+import OptionEditBar from './Options/OptionEditBar.vue'
+import UseOptionBase from './Options/UseOptionBase'
+
+export default defineComponent({
+  name: 'EditOptions',
+  provide() {
+    return {
+      currentEditKey: store.getters['edit/currentEditKey'],
+      moduleConfig: computed(() => this.moduleConfig)
+    }
+  },
+  props: {
+    editConfigure: {
+      type: Object,
+      required: true
+    },
+    moduleConfig: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props, { slots }) {
+    const currentEditKey = computed(() => {
+      return store.getters['edit/currentEditKey']
+    })
+    const getOptions = computed(() => {
+      return props.moduleConfig.options
+    })
+    const { addOption, addOtherOption } = UseOptionBase(getOptions)
+    const handleAddOption = (text = '选项', others = false, index = -1, field) => {
+      const value = addOption(text, others, index, field)
+      handleOptionChange(value)
+    }
+    const handleAddOtherOption = () => {
+      const { field } = props.moduleConfig
+      const value = addOtherOption(field)
+      handleOptionChange(value)
+    }
+
+    const handleOptionChange = (value) => {
+      const optionKey = `options`
+      const key = `${currentEditKey.value}.${optionKey}`
+      handleChange({ key, value })
+    }
+
+    const handleChange = ({ key, value }) => {
+      store.dispatch('edit/changeSchema', { key, value })
+    }
+
+    const hasAdvancedConfig = ref(false)
+    const hasAdvancedRateConfig = ref(false)
+    const showOthers = ref(false)
+    const showOptionEdit = ref(true)
+    const showOptionEditBar = ref(true)
+    onMounted(() => {
+      const { optionEdit, optionEditBar } = props.editConfigure
+      showOptionEdit.value = optionEdit.show
+      showOptionEditBar.value = optionEditBar.show
+      showOthers.value = optionEditBar.configure.showOthers
+      hasAdvancedConfig.value = Boolean(optionEditBar.configure.showAdvancedConfig)
+      hasAdvancedRateConfig.value = Boolean(optionEditBar.configure.showAdvancedRateConfig)
+    })
+    return {
+      slots,
+      getOptions,
+      hasAdvancedConfig,
+      hasAdvancedRateConfig,
+      showOptionEdit,
+      showOptionEditBar,
+      showOthers,
+      handleAddOption,
+      handleAddOtherOption,
+      handleOptionChange,
+      handleChange
+    }
+  },
+  render() {
+    const { slots } = this
+    return (
+      <div class="selected-wrapper radio-selected-wrapper">
+        {this.showOptionEdit ? (
+          <OptionEdit
+            option-list={this.getOptions}
+            onAddOption={this.handleAddOption}
+            onOptionChange={this.handleOptionChange}
+            onChange={this.handleChange}
+          />
+        ) : (
+          slots.default()
+        )}
+        {this.showOptionEditBar && (
+          <OptionEditBar
+            ref="optionEditBar"
+            option-list={this.getOptions}
+            showOthers={this.showOthers}
+            hasAdvancedConfig={this.hasAdvancedConfig}
+            hasAdvancedRateConfig={this.hasAdvancedRateConfig}
+            onAddOption={this.handleAddOption}
+            onAddOther={this.handleAddOtherOption}
+            onOptionChange={this.handleOptionChange}
+            onChange={this.handleChange}
+          />
+        )}
+      </div>
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/InputModule/index.jsx b/web/src/materials/questions/widgets/InputModule/index.jsx
index 54028bfa..85d27455 100644
--- a/web/src/materials/questions/widgets/InputModule/index.jsx
+++ b/web/src/materials/questions/widgets/InputModule/index.jsx
@@ -1,9 +1,12 @@
-import baseInput from '../BaseInput';
-import { defineComponent, ref } from 'vue';
-import '../../common/css/input.scss';
-import { get } from 'lodash-es';
-import myMeta from './meta';
-export const meta = myMeta;
+import { defineComponent, ref } from 'vue'
+import { get } from 'lodash-es'
+
+import BaseInput from '../BaseInput'
+
+import './style.scss'
+import myMeta from './meta'
+
+export const meta = myMeta
 /**
  * 支持配置：
  * 内容限制格式，valid
@@ -12,23 +15,22 @@ export const meta = myMeta;
  */
 export default defineComponent({
   name: 'InputModule',
-  components: { baseInput },
   props: {
     type: {
       type: String,
-      default: '',
+      default: ''
     },
     field: {
       type: String,
-      default: '',
+      default: ''
     },
     value: {
       type: String,
-      default: '',
+      default: ''
     },
     placeholder: {
       type: String,
-      default: '请填写',
+      default: '请填写'
     },
     textRange: {
       type: Object,
@@ -36,101 +38,102 @@ export default defineComponent({
         return {
           max: {
             placeholder: '500',
-            value: 500,
+            value: 500
           },
           min: {
             placeholder: '0',
-            value: 0,
-          },
-        };
-      },
+            value: 0
+          }
+        }
+      }
     },
     valid: {
       type: String,
-      default: '',
+      default: ''
     },
     readonly: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
+  emits: ['blur', 'focus', 'input', 'change'],
   setup(props, { emit }) {
-    const focusFlag = ref(false);
-    const initial = props.textRange.max.value - props.value.length;
-    const getLeftTextNumber = ref(initial);
+    const focusFlag = ref(false)
+    const initial = props.textRange.max.value - props.value.length
+    const getLeftTextNumber = ref(initial)
     const onBlur = () => {
-      emit('blur');
-    };
+      emit('blur')
+    }
     const onFocus = () => {
       if (props.type !== 'mob' && (props.valid === '' || props.valid === 'n')) {
-        focusFlag.value = true;
+        focusFlag.value = true
       }
-      emit('focus');
-    };
+      emit('focus')
+    }
     const onInput = (e) => {
       if (props.type !== 'mob' && (props.valid === '' || props.valid === 'n')) {
-        getLeftTextNumber.value =
-          props.textRange.max.value - e.target.value.length;
+        getLeftTextNumber.value = props.textRange.max.value - e.target.value.length
       }
-      emit('input');
-    };
+      emit('input')
+    }
     const onChange = (e) => {
-      const key = props.field;
-      const maxLength = get(props, 'textRange.max.value');
+      const key = props.field
+      const maxLength = get(props, 'textRange.max.value')
       if (
         get(props, 'valid') === 'n' &&
         maxLength &&
         e.target.value.toString().length > maxLength
       ) {
-        e.target.value = e.target.value.slice(0, props.textRange.max.value);
+        e.target.value = e.target.value.slice(0, props.textRange.max.value)
       }
       if (['m', 'idcard', 'e', 'licensePlate'].includes(props.valid)) {
-        e.target.value = e.target.value.replace(/\s+/g, '');
+        e.target.value = e.target.value.replace(/\s+/g, '')
       }
+
       emit('change', {
         key,
-        value: e.target.value,
-      });
-    };
+        value: e.target.value
+      })
+    }
     return {
+      props,
       focusFlag,
       getLeftTextNumber,
       onBlur,
       onFocus,
       onInput,
-      onChange,
-    };
+      onChange
+    }
   },
   render() {
-    const { readonly, focusFlag, getLeftTextNumber, field, valid, textRange } =
-      this;
-    const props = {
-      ...this.$props,
-      readonly,
-      name: field,
-      type: valid === 'n' ? 'number' : 'text',
-      maxlength: textRange.max.value,
-      minlength: textRange.min.value,
-    };
+    const { focusFlag, getLeftTextNumber, valid, textRange, props } = this
+
     return (
-      <baseInput
-        uiTarget="input"
-        {...{ props: props }}
-        {...{
-          on: {
-            blur: this.onBlur,
-            focus: this.onFocus,
-            input: this.onInput,
-            change: this.onChange,
-          },
-        }}
-      >
+      <div>
+        <BaseInput
+          uiTarget="input"
+          type={valid === 'n' ? 'number' : 'text'}
+          field={props.field}
+          name={props.field}
+          value={props.value}
+          placeholder={props.placeholder}
+          textRange={props.textRange}
+          maxlength={textRange.max.value}
+          minlength={textRange.min.value}
+          valid={props.valid}
+          readonly={props.readonly}
+          onBlur={this.onBlur}
+          onFocus={this.onFocus}
+          onInput={this.onInput}
+          onChange={this.onChange}
+        />
+
         {focusFlag && (
           <div class="text-number-tip">
             <p>{getLeftTextNumber}</p>
           </div>
         )}
-      </baseInput>
-    );
-  },
-});
+      </div>
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/InputModule/meta.js b/web/src/materials/questions/widgets/InputModule/meta.js
index 95d83fd2..ef856e50 100644
--- a/web/src/materials/questions/widgets/InputModule/meta.js
+++ b/web/src/materials/questions/widgets/InputModule/meta.js
@@ -1,91 +1,47 @@
-import basicConfig from '../../common/config/basicConfig';
+import basicConfig from '@materials/questions/common/config/basicConfig'
 
 export const meta = {
   title: '单行输入框',
-  questExtra: ['listenMerge'],
   type: 'text',
   componentName: 'InputModule',
   formConfig: [
-    // {
-    //   name: 'fieldId',
-    //   label: '题目ID',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'field',
-    //   tip: '请谨慎修改题目ID，并保证此ID在整个问卷中唯一',
-    //   relyField: 'questionIdCustomize',
-    //   noNeedRelyClean: true,
-    // },
-    // {
-    //   name: 'questionLabel',
-    //   label: '题目标签',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'label',
-    //   tip: '请谨慎修改题目标签，并保证此标签在整个问卷中唯一',
-    //   relyField: 'questionLabelCustomize',
-    //   noNeedRelyClean: true,
-    // },
-    // {
-    //   name: 'titleOrigin',
-    //   label: '标题引用其他题目选项',
-    //   type: 'TitleOrigin',
-    //   options: [],
-    //   key: 'title',
-    // },
     basicConfig,
     {
       name: 'valid',
-      label: '内容限制格式',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
-      type: 'Select',
+      title: '内容限制格式',
+      type: 'SelectSetter',
       key: 'valid',
       options: [
         {
           label: '请选择',
-          value: '',
+          value: ''
         },
         {
           label: '手机号',
-          value: 'm',
+          value: 'm'
         },
         {
           label: '身份证',
-          value: 'idcard',
+          value: 'idcard'
         },
         {
           label: '数字',
-          value: 'n',
+          value: 'n'
         },
         {
           label: '邮箱',
-          value: 'e',
+          value: 'e'
         },
         {
           label: '车牌号',
-          value: 'licensePlate',
-        },
-      ],
+          value: 'licensePlate'
+        }
+      ]
     },
-    // {
-    //   name: 'qQuestionLimit',
-    //   label: '相同填写内容提交次数',
-    //   type: 'QuestionLimit',
-    //   key: 'qQuestionLimit',
-    //   value: {
-    //     type: 0,
-    //     limit: 0,
-    //   },
-    // },
     {
       name: 'numberRange',
-      label: '数字限制',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
-      type: 'Range',
+      title: '数字限制',
+      type: 'RangeSetter',
       options: [],
       key: 'numberRange',
       value: [],
@@ -93,65 +49,40 @@ export const meta = {
         numberRange: {
           min: {
             placeholder: '0',
-            value: 0,
+            value: 0
           },
           max: {
             placeholder: '1000',
-            value: 1000,
-          },
-        },
+            value: 1000
+          }
+        }
       },
-      relyFunc: (data) => data.valid && data.valid === 'n',
+      relyFunc: (data) => data.valid && data.valid === 'n'
     },
     {
       name: 'textRange',
-      label: '字数限制',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
-      type: 'Range',
+      title: '字数限制',
+      type: 'RangeSetter',
       options: [],
       key: 'textRange',
-      value: [],
+      value: []
     },
-    // {
-    //   name: 'inputType',
-    //   label: '切换题型',
-    //   type: 'Radio',
-    //   key: 'type',
-    //   direction: 'horizon',
-    //   value: '',
-    //   options: [
-    //     {
-    //       label: '单行',
-    //       value: 'text',
-    //     },
-    //     {
-    //       label: '多行',
-    //       value: 'textarea',
-    //     },
-    //   ],
-    //   contentClass: 'radio-config',
-    // },
     {
       name: 'placeholder',
-      label: '引导提示文案',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
-      type: 'Input',
+      title: '引导提示文案',
+      type: 'InputSetter',
       placeholder: '限制20字',
       key: 'placeholder',
       tip: '限制20字',
       validate(value) {
         if (value && value.length > 20) {
-          console.warn('引导提示文案字数不能超过20个字，请修改后重新保存');
-          return false;
+          console.warn('引导提示文案字数不能超过20个字，请修改后重新保存')
+          return false
         }
-        return true;
-      },
-    },
-  ],
-};
+        return true
+      }
+    }
+  ]
+}
 
-export default meta;
+export default meta
diff --git a/web/src/materials/questions/widgets/InputModule/style.scss b/web/src/materials/questions/widgets/InputModule/style.scss
new file mode 100644
index 00000000..7e50f179
--- /dev/null
+++ b/web/src/materials/questions/widgets/InputModule/style.scss
@@ -0,0 +1,19 @@
+@import '@materials/questions/common/css/default.scss';
+
+.text-number-tip {
+  font-size: 0.24rem;
+  color: $font-color;
+  float: right;
+  margin-right: 0.1rem;
+  margin-top: 0.1rem;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
diff --git a/web/src/materials/questions/widgets/NpsModule/index.jsx b/web/src/materials/questions/widgets/NpsModule/index.jsx
new file mode 100644
index 00000000..a58780bc
--- /dev/null
+++ b/web/src/materials/questions/widgets/NpsModule/index.jsx
@@ -0,0 +1,160 @@
+import { defineComponent, computed, shallowRef, defineAsyncComponent } from 'vue'
+import BaseRate from '../BaseRate'
+import './style.scss'
+
+export default defineComponent({
+  name: 'NpsModule',
+  props: {
+    field: {
+      type: [String, Number],
+      default: ''
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    min: {
+      type: Number,
+      default: 1
+    },
+    max: {
+      type: Number,
+      default: 10
+    },
+    minMsg: {
+      type: String,
+      default: ''
+    },
+    maxMsg: {
+      type: String,
+      default: ''
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    rangeConfig: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const rating = computed({
+      get() {
+        return props.value
+      },
+      set(val) {
+        const key = props.field
+        emit('change', {
+          key,
+          value: val
+        })
+      }
+    })
+
+    const confirmNps = (num) => {
+      if (props.readonly) return
+      rating.value = num
+    }
+
+    const minMessage = computed(() => {
+      return props.minMsg || '极不满意'
+    })
+
+    const maxMessage = computed(() => {
+      return props.maxMsg || '十分满意'
+    })
+
+    const indexValue = computed(() => {
+      return props.value !== '' ? props.value : -1
+    })
+    const currentRangeConfig = computed(() => {
+      return props.rangeConfig[rating.value]
+    })
+    const isShowInput = computed(() => {
+      return currentRangeConfig.value?.isShowInput
+    })
+
+    const onMoreDataChange = (data) => {
+      const { key, value } = data
+      emit('change', {
+        key,
+        value
+      })
+    }
+
+    const selectMoreView = shallowRef(null)
+    if (props.readonly) {
+      selectMoreView.value = defineAsyncComponent(
+        () => import('@materials/questions/QuestionContainerB')
+      )
+    } else {
+      selectMoreView.value = defineAsyncComponent(
+        () => import('@materials/questions/QuestionRuleContainer')
+      )
+    }
+
+    return {
+      rating,
+      confirmNps,
+      minMessage,
+      maxMessage,
+      indexValue,
+      isShowInput,
+      onMoreDataChange,
+      selectMoreView
+    }
+  },
+  render() {
+    const {
+      field,
+      rating,
+      confirmNps,
+      indexValue,
+      minMessage,
+      maxMessage,
+      isShowInput,
+      min,
+      max,
+      readonly,
+      rangeConfig,
+      onMoreDataChange
+    } = this
+
+    return (
+      <div class="nps-wrapper-main">
+        <div class="nps-row-msg">
+          <div class="nps-msg left">{minMessage}</div>
+          <div class="nps-msg right">{maxMessage}</div>
+        </div>
+        <BaseRate
+          name={field}
+          min={min}
+          max={max}
+          readonly={readonly}
+          value={indexValue}
+          iconClass="number"
+          onChange={confirmNps}
+          class={!readonly ? 'radio-nps-hover' : ''}
+        >
+          {isShowInput && (
+            <selectMoreView
+              showTitle={false}
+              key={`${field}_${rating}`}
+              moduleConfig={{
+                type: 'selectMoreModule',
+                field: `${field}_${rating}`,
+                placeholder: rangeConfig[rating]?.text,
+                value: rangeConfig[rating]?.othersValue || ''
+              }}
+              onChange={(e) => onMoreDataChange(e)}
+            ></selectMoreView>
+          )}
+        </BaseRate>
+      </div>
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/NpsModule/index.vue b/web/src/materials/questions/widgets/NpsModule/index.vue
deleted file mode 100644
index ea4f2a2c..00000000
--- a/web/src/materials/questions/widgets/NpsModule/index.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-  <div class="nps-wrapper-main">
-    <div class="nps-row-msg">
-      <div class="nps-msg left">{{ minMsg }}</div>
-      <div class="nps-msg right">{{ maxMsg }}</div>
-    </div>
-    <BaseRate
-      :name="props.field"
-      :min="props.min"
-      :max="props.max"
-      :readonly="props.readonly"
-      :value="indexValue"
-      iconClass="number"
-      @change="confirmNps"
-      :class="npsClass"
-    />
-    <QuestionWithRule
-      v-if="isShowInput"
-      :showTitle="false"
-      :key="`${props.field}_${rating}`"
-      :moduleConfig="moduleConfig"
-      @change="onMoreDataChange"
-    ></QuestionWithRule>
-  </div>
-</template>
-<script setup>
-import { defineProps, defineEmits, computed } from 'vue';
-import QuestionWithRule from '@/materials/questions/widgets/QuestionRuleContainer';
-import BaseRate from '../BaseRate';
-const props = defineProps({
-  field: {
-    type: [String, Number],
-    default: '',
-  },
-  value: {
-    type: [String, Number],
-    default: '',
-  },
-  min: {
-    type: Number,
-    default: 1,
-  },
-  max: {
-    type: Number,
-    default: 10,
-  },
-  minMsg: {
-    type: String,
-    default: '',
-  },
-  maxMsg: {
-    type: String,
-    default: '',
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  rangeConfig: {
-    type: Object,
-    default: () => {
-      return {};
-    },
-  },
-});
-const emit = defineEmits(['change']);
-
-const npsClass = !props.readonly ? 'radio-nps-hover' : '';
-
-const rating = computed({
-  get() {
-    return props.value;
-  },
-  set(val) {
-    const key = props.field;
-    emit('change', {
-      key,
-      value: val,
-    });
-  },
-});
-
-const confirmNps = (num) => {
-  if (props.readonly) return;
-  rating.value = num;
-};
-
-const minMsg = computed(() => {
-  return props.minMsg || '极不满意';
-});
-
-const maxMsg = computed(() => {
-  return props.maxMsg || '十分满意';
-});
-
-const indexValue = computed(() => {
-  return props.value !== '' ? props.value : -1;
-});
-const currentRangeConfig = computed(() => {
-  return props.rangeConfig[rating.value];
-});
-const isShowInput = computed(() => {
-  return currentRangeConfig.value?.isShowInput;
-});
-const moduleConfig = computed(() => {
-  return {
-    type: 'selectMoreModule',
-    field: `${props.field}_${rating.value}`,
-    placeholder: props.rangeConfig[rating.value]?.text,
-    value: props.rangeConfig[rating.value]?.othersValue || '',
-  };
-});
-
-const onMoreDataChange = (data) => {
-  const { key, value } = data;
-  emit('change', {
-    key,
-    value,
-  });
-};
-</script>
-<style lang="scss" rel="stylesheet/scss" scoped>
-.nps-wrapper-main {
-  .nps-row-msg {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.2rem;
-    .nps-msg {
-      flex: 1;
-      font-size: 0.22rem;
-      color: #92949d;
-      &.left {
-        text-align: left;
-      }
-      &.right {
-        text-align: right;
-      }
-    }
-  }
-  @media (max-width: 930px) {
-    ::v-deep .question-block {
-      padding: 0;
-    }
-  }
-  ::v-deep .radio-nps-hover {
-    .star-item {
-      &:hover {
-        background-color: $primary-color;
-      }
-    }
-    &:has(.star-item:hover) .star-item:not(:hover, :hover ~ *) {
-      background-color: $primary-color;
-    }
-  }
-}
-</style>
diff --git a/web/src/materials/questions/widgets/NpsModule/meta.js b/web/src/materials/questions/widgets/NpsModule/meta.js
index 42c620fd..02c3f5bd 100644
--- a/web/src/materials/questions/widgets/NpsModule/meta.js
+++ b/web/src/materials/questions/widgets/NpsModule/meta.js
@@ -1,97 +1,81 @@
-import basicConfig from '../../common/config/basicConfig';
-import { Message } from 'element-ui';
+import { ElMessage } from 'element-plus'
+import basicConfig from '@materials/questions/common/config/basicConfig'
 
 const meta = {
   title: '评分',
-  questExtra: ['listenMerge'],
   type: 'radio-nps',
   componentName: 'NpsModule',
   formConfig: [
     basicConfig,
     {
       name: 'min',
-      label: 'NPS量表最小值',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
+      title: 'NPS量表最小值',
       contentClass: 'nps-select-config',
       key: 'min',
-      type: 'Select',
+      type: 'SelectSetter',
       options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((v) => ({
         value: v,
-        label: v,
+        label: v
       })),
       valueSetter: (val, moduleConfig) => {
         if (moduleConfig['max'] && val >= moduleConfig['max']) {
-          Message({
-            type: 'info',
-            message: '最小值不可大于最大值',
-          });
-          return true;
+          ElMessage.info('最小值不可大于最大值')
+          return true
         }
-      },
+      }
     },
     {
       name: 'max',
-      label: 'NPS量表最大值',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
+      title: 'NPS量表最大值',
       key: 'max',
-      type: 'Select',
+      type: 'SelectSetter',
       contentClass: 'nps-select-config',
       options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((v) => ({
         value: v,
-        label: v,
+        label: v
       })),
       valueSetter: (val, moduleConfig) => {
         if (moduleConfig['min'] && val <= moduleConfig['min']) {
-          Message({
-            type: 'info',
-            message: '最大值不可小于最小值',
-          });
-          return true;
+          ElMessage.info('最大值不可小于最小值')
+          return true
         }
-      },
+      }
     },
     {
       name: 'npsMsg',
-      label: 'NPS两级文案',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
+      title: 'NPS两级文案',
       contentClass: 'nps-customed-config',
       type: 'Customed',
       content: [
         {
           label: '最小值文案',
-          type: 'Input',
+          type: 'InputSetter',
           key: 'minMsg',
-          direction: 'horizon',
           placeholder: '极不满意',
+          value: '极不满意'
         },
         {
           label: '最大值文案',
-          type: 'Input',
+          type: 'InputSetter',
           key: 'maxMsg',
-          direction: 'horizon',
           placeholder: '十分满意',
-        },
-      ],
-    },
+          value: '十分满意'
+        }
+      ]
+    }
   ],
   editConfigure: {
     optionEdit: {
-      show: false,
+      show: false
     },
     optionEditBar: {
       show: true,
       configure: {
         showOthers: false,
-        showAdvancedRateConfig: true,
-      },
-    },
-  },
-};
+        showAdvancedRateConfig: true
+      }
+    }
+  }
+}
 
-export default meta;
+export default meta
diff --git a/web/src/materials/questions/widgets/NpsModule/style.scss b/web/src/materials/questions/widgets/NpsModule/style.scss
new file mode 100644
index 00000000..ec2a82d1
--- /dev/null
+++ b/web/src/materials/questions/widgets/NpsModule/style.scss
@@ -0,0 +1,36 @@
+@import '@materials/questions/common/css/default.scss';
+
+.nps-wrapper-main {
+  .nps-row-msg {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.2rem;
+    .nps-msg {
+      flex: 1;
+      font-size: 0.22rem;
+      color: #92949d;
+      &.left {
+        text-align: left;
+      }
+      &.right {
+        text-align: right;
+      }
+    }
+  }
+  @media (max-width: 930px) {
+    :deep(.question-block) {
+      padding: 0;
+    }
+  }
+  .radio-nps-hover {
+    .rate-item {
+      &:hover {
+        background-color: $primary-color;
+      }
+    }
+    &:has(.rate-item:hover) .rate-item:not(:hover, :hover ~ *) {
+      background-color: $primary-color;
+    }
+  }
+}
diff --git a/web/src/materials/questions/widgets/QuestionContainer.jsx b/web/src/materials/questions/widgets/QuestionContainer.jsx
deleted file mode 100644
index a60a2282..00000000
--- a/web/src/materials/questions/widgets/QuestionContainer.jsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { computed, defineComponent, onMounted, ref } from 'vue';
-import moduleTitle from './Title.jsx';
-import EditOptions from './EditOptions.jsx';
-import moduleList from '../common/config/moduleList.js';
-import '../common/css/question.scss';
-
-import questionLoader from '@/materials/questions/questionLoader.js';
-import '../common/css/title.scss';
-
-export const getBlockComponent = async (type) => {
-  const path = moduleList[type];
-  const component = await questionLoader.loadComponent(type, path);
-
-  return component;
-};
-
-export default defineComponent({
-  name: 'QuestionContainer',
-  props: {
-    type: {
-      type: String,
-      default: 'text',
-    },
-    showTitle: {
-      type: Boolean,
-      default: true,
-    },
-    indexNumber: {
-      type: [Number, String],
-      default: 1,
-    },
-    moduleConfig: {
-      type: Object,
-      default: () => {
-        return {
-          field: 'quiestion01',
-          type: 'text',
-          component: 'InputModule',
-          title: '标题1单行输入框',
-          value: '123444',
-          showType: 'text',
-          placeholder: '请填写',
-          textRange: {
-            max: {
-              placeholder: '500',
-              value: 500,
-            },
-            min: {
-              placeholder: '0',
-              value: 0,
-            },
-          },
-          valid: 'n',
-        };
-      },
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    isSelected: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    moduleTitle,
-  },
-  setup(props, { emit }) {
-    const blockComponent = ref(null);
-    const showEditCom = computed(() => {
-      let result = false;
-      if (props.isSelected) {
-        if (!['text', 'textarea'].includes(props.type)) {
-          result = true;
-        }
-      }
-      return result;
-    });
-
-    // const isSelected = ref(false)
-    onMounted(async () => {
-      const { component } = await getBlockComponent(props.type);
-      blockComponent.value = component;
-    });
-    const onBlur = () => {
-      emit('blur');
-    };
-    const onFoucs = () => {
-      emit('focus');
-    };
-    const onChange = (data) => {
-      emit('change', data);
-    };
-    const onClick = () => {
-      emit('select', props.indexNumber);
-    };
-    return {
-      // isSelected,
-      blockComponent,
-      onClick,
-      onBlur,
-      onFoucs,
-      onChange,
-      showEditCom,
-      // showOthers
-    };
-  },
-  render(h) {
-    const { readonly, isSelected } = this;
-
-    const props = {
-      isSelected,
-      ...this.moduleConfig,
-      ...this.$props,
-    };
-    return (
-      <div class={['question', isSelected ? 'isSelected' : '']}>
-        {this.showTitle && (
-          <moduleTitle {...{ props: props }} {...{ on: this.$listeners }} />
-        )}
-        <div class="question-block">
-          {this.showEditCom
-            ? h(
-                EditOptions,
-                {
-                  props: {
-                    moduleConfig: this.moduleConfig,
-                  },
-                },
-                [
-                  h(
-                    this.blockComponent,
-                    {
-                      props: {
-                        readonly,
-                        ...props,
-                      },
-                      on: {
-                        blur: this.onBlur,
-                        focus: this.onFoucs,
-                        change: this.onChange,
-                      },
-                    },
-                    []
-                  ),
-                ]
-              )
-            : h(
-                this.blockComponent,
-                {
-                  props: {
-                    readonly,
-                    ...props,
-                  },
-                  on: {
-                    blur: this.onBlur,
-                    focus: this.onFoucs,
-                    change: this.onChange,
-                  },
-                },
-                []
-              )}
-        </div>
-      </div>
-    );
-  },
-});
diff --git a/web/src/materials/questions/widgets/QuestionRuleContainer.jsx b/web/src/materials/questions/widgets/QuestionRuleContainer.jsx
deleted file mode 100644
index df49e687..00000000
--- a/web/src/materials/questions/widgets/QuestionRuleContainer.jsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import '../common/css/formItem.scss';
-import Vue, {
-  defineComponent,
-  getCurrentInstance,
-  ref,
-  nextTick,
-  computed,
-  inject,
-  onMounted,
-  onBeforeUnmount,
-} from 'vue';
-import QuestionContainer from '@/materials/questions/widgets/QuestionContainer.jsx';
-import ErrorTip from '../components/ErrorTip.vue';
-import { assign } from 'lodash-es';
-import AsyncValidator from 'async-validator';
-export default defineComponent({
-  name: 'QuestionRuleContainer',
-  components: { ErrorTip },
-  props: {
-    readonly: Boolean,
-    showTitle: Boolean,
-    moduleConfig: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    showSpliter: {
-      type: Boolean,
-      default: false,
-    },
-    indexNumber: {
-      type: [Number, String],
-      default: 1,
-    },
-  },
-  setup(props, { emit }) {
-    const validateMessage = ref('');
-    const validateState = ref('');
-    const { proxy: instance } = getCurrentInstance();
-
-    const itemClass = computed(() => {
-      const classList = [];
-      classList.push(props.moduleConfig.direction);
-      const type = props.moduleConfig.type;
-      if (type) {
-        if (type === 'section') {
-          classList.push('question-type-section');
-        }
-        // if (includes(['radio', 'checkbox', 'vote', 'radio-star', 'binary-choice'], type)) {
-        //   classList.push('special')
-        // }
-
-        if (type === 'scroll') {
-          classList.push('no-padding');
-        }
-        if (type === 'user-agreement') {
-          classList.push('no-out-padding');
-        }
-      }
-      return classList.join(' ');
-    });
-    const form = inject('Form', {
-      default: {},
-      type: Object,
-    });
-    const show = computed(() => {
-      const { type } = props.moduleConfig;
-      return !/hidden|mobileHidden/.test(type);
-    });
-    onMounted(() => {
-      form.$emit && form.$emit('form.addField', instance);
-    });
-    onBeforeUnmount(() => {
-      form.$emit && form.$emit('form.removeField', instance);
-    });
-    const validate = (trigger, callback = () => {}) => {
-      const rules = getFilteredRule(trigger);
-      if (!rules || rules.length === 0) {
-        callback && callback();
-        return true;
-      }
-
-      const { field, options } = props.moduleConfig;
-
-      const descriptor = {};
-      if (rules && rules.length > 0) {
-        rules.forEach((rule) => {
-          // eslint-disable-next-line no-param-reassign
-          delete rule.trigger;
-        });
-      }
-      // 有选项的题才需要判断这步，如果没有选项，就不校验，如果有，就要校验
-      if (options && options.length) {
-        const trueOptions = options.filter((i) => !i.hide);
-        if (trueOptions.length === 0) {
-          callback && callback();
-          return true;
-        }
-      }
-
-      descriptor[field] = rules;
-      const validator = new AsyncValidator(descriptor);
-      //  因为有些input的value是bind上去的，所以应该在下一帧再去校验，否则会出现第一次blur没反应
-      nextTick(() => {
-        // 对填空题单独设置其value
-        let value = form.model[field];
-        validator.validate(
-          { [field]: value },
-          { firstFields: true },
-          (errors) => {
-            validateState.value = !errors ? 'success' : 'error';
-            validateMessage.value = errors ? errors[0].message : '';
-            callback && callback(validateMessage.value);
-          }
-        );
-      });
-    };
-    const onFieldBlur = () => {
-      if (!(form && form instanceof Vue)) return;
-      validate('blur');
-    };
-    // eslint-disable-next-line no-unused-vars
-    const onFieldChange = () => {
-      if (!(form && form instanceof Vue)) return;
-      validate('change');
-    };
-    const getRules = () => {
-      const { rules } = form;
-      const { field } = props.moduleConfig;
-      return rules[field];
-    };
-    const getFilteredRule = (trigger) => {
-      let rules = getRules();
-      if (!rules) {
-        rules = [];
-      }
-      return rules
-        .filter((rule) => !rule.trigger || rule.trigger.indexOf(trigger) !== -1)
-        .map((rule) => assign({}, rule));
-    };
-    const handleBlur = () => {
-      emit('blur');
-      onFieldBlur();
-    };
-    const handleChange = (data) => {
-      emit('change', data);
-      onFieldChange();
-    };
-    return {
-      validateMessage,
-      validate,
-      itemClass,
-      show,
-      onFieldBlur,
-      onFieldChange,
-      getRules,
-      getFilteredRule,
-      handleBlur,
-      handleChange,
-    };
-  },
-  render(h) {
-    const { itemClass, validateMessage } = this;
-    return (
-      <div
-        class={[
-          'question-wrapper',
-          this.moduleConfig.showSpliter ? 'spliter' : '',
-          validateMessage ? 'hasError' : '',
-          itemClass,
-        ]}
-      >
-        {h(QuestionContainer, {
-          props: {
-            type: this.moduleConfig.type,
-            moduleConfig: this.moduleConfig,
-            value: this.moduleConfig.value,
-            indexNumber: this.indexNumber,
-            showTitle: this.showTitle,
-            readonly: this.readonly,
-          },
-          on: {
-            ...this.$listeners,
-            blur: this.handleBlur,
-            change: this.handleChange,
-          },
-        })}
-        <ErrorTip msg={validateMessage} />
-      </div>
-    );
-  },
-});
diff --git a/web/src/materials/questions/widgets/RadioModule/index.jsx b/web/src/materials/questions/widgets/RadioModule/index.jsx
index 5b5e9f76..6985478c 100644
--- a/web/src/materials/questions/widgets/RadioModule/index.jsx
+++ b/web/src/materials/questions/widgets/RadioModule/index.jsx
@@ -1,6 +1,5 @@
-import baseChoice from '../BaseChoice';
-import { defineComponent } from 'vue';
-import QuestionWithRule from '@/materials/questions/widgets/QuestionRuleContainer';
+import { defineComponent, shallowRef, defineAsyncComponent } from 'vue'
+import BaseChoice from '../BaseChoice'
 
 /**
  * 支持配置：
@@ -8,100 +7,95 @@ import QuestionWithRule from '@/materials/questions/widgets/QuestionRuleContaine
  */
 export default defineComponent({
   name: 'RadioModule',
-  components: { baseChoice, QuestionWithRule },
   props: {
     type: {
       type: String,
-      default: '',
+      default: ''
     },
     field: {
       type: String,
-      default: '',
+      default: ''
     },
     value: {
       type: String,
-      default: '',
+      default: ''
     },
     layout: {
       type: String,
-      default: 'vertical',
+      default: 'vertical'
     },
     options: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     readonly: {
       type: Boolean,
-      default: false,
-    },
-    // moduleConfig: {
-    //   type: Object,
-    //   default: () => {
-    //     return {
-    //       field: 'quiestion01',
-    //       component: 'RadioModule',
-    //       options:  [{
-    //           text: '选项2',
-    //           hash: 'item1'
-    //         }, {
-    //           text: '选项2',
-    //           hash: 'item2'
-    //         }]
-    //     }
-    //   }
-    // }
+      default: false
+    }
   },
+  emits: ['change'],
   setup(props, { emit }) {
     const onChange = (value) => {
-      const key = props.field;
+      const key = props.field
       emit('change', {
         key,
-        value,
-      });
-    };
+        value
+      })
+    }
     const handleSelectMoreChange = (data) => {
-      const { key, value } = data;
+      const { key, value } = data
       emit('change', {
         key,
-        value,
-      });
-    };
+        value
+      })
+    }
+    // 填写更多传入一个动态组件
+    const selectMoreView = shallowRef(null)
+    if (props.readonly) {
+      selectMoreView.value = defineAsyncComponent(
+        () => import('@materials/questions/QuestionContainerB')
+      )
+    } else {
+      selectMoreView.value = defineAsyncComponent(
+        () => import('@materials/questions/QuestionRuleContainer')
+      )
+    }
     return {
       onChange,
       handleSelectMoreChange,
-    };
+      selectMoreView
+    }
   },
   render() {
-    const { readonly, field } = this;
-    const props = {
-      ...this.$props,
-      readonly,
-      name: field,
-    };
+    const { selectMoreView } = this
+
     return (
       <div>
-        <baseChoice
+        <BaseChoice
           uiTarget="radio"
-          {...{ props: props }}
-          {...{
-            on: {
-              change: this.onChange,
-            },
-          }}
-          scopedSlots={{
+          readonly={this.readonly}
+          name={this.field}
+          options={this.options}
+          value={this.value}
+          type={this.type}
+          field={this.field}
+          layout={this.layout}
+          onChange={this.onChange}
+        >
+          {{
             selectMore: (scoped) => {
               return (
-                <QuestionWithRule
+                <selectMoreView
                   readonly={this.readonly}
                   showTitle={false}
                   moduleConfig={scoped.selectMoreConfig}
                   onChange={(e) => this.handleSelectMoreChange(e)}
-                ></QuestionWithRule>
-              );
-            },
+                ></selectMoreView>
+              )
+            }
           }}
-        ></baseChoice>
+        </BaseChoice>
       </div>
-    );
-  },
-});
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/RadioModule/meta.js b/web/src/materials/questions/widgets/RadioModule/meta.js
index 045c51fb..20e8c6a9 100644
--- a/web/src/materials/questions/widgets/RadioModule/meta.js
+++ b/web/src/materials/questions/widgets/RadioModule/meta.js
@@ -1,208 +1,55 @@
-import basicConfig from '../../common/config/basicConfig';
+import basicConfig from '@materials/questions/common/config/basicConfig'
 
 const meta = {
   title: '单选',
-  questExtra: ['listenMerge'],
   type: 'radio',
+  componentName: 'RadioModule',
   props: [
     {
       name: 'title',
       propType: 'String',
       description: '这是用于描述题目标题',
-      defaultValue: '标题一',
+      defaultValue: '标题一'
     },
     {
       name: 'type',
       propType: 'String',
       description: '这是用于描述题目类型',
-      defaultValue: '标题一',
+      defaultValue: '标题一'
     },
     {
       name: 'extraOptions',
       propType: Array,
       description: '这是用于固定选项配置',
-      defaultValue: [],
-    },
+      defaultValue: []
+    }
   ],
   formConfig: [
-    // {
-    //   name: 'fieldId',
-    //   label: '题目ID',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'field',
-    //   tip: '请谨慎修改题目ID，并保证此ID在整个问卷中唯一',
-    //   relyField: 'questionIdCustomize',
-    //   noNeedRelyClean: true,
-    // },
-    // {
-    //   name: 'questionLabel',
-    //   label: '题目标签',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'label',
-    //   tip: '请谨慎修改题目标签，并保证此标签在整个问卷中唯一',
-    //   relyField: 'questionLabelCustomize',
-    //   noNeedRelyClean: true,
-    // },
-    // {
-    //   name: 'titleOrigin',
-    //   label: '标题引用其他题目选项',
-    //   type: 'TitleOrigin',
-    //   options: [],
-    //   key: 'title',
-    // },
     basicConfig,
-    // {
-    //   name: 'optionOrigin',
-    //   label: '选项引用其他题目选项',
-    //   type: 'Select',
-    //   options: [],
-    //   key: 'optionOrigin',
-    //   tip: '支持引用多选题、单选题、矩阵单选题',
-    // },
-    // {
-    //   name: 'originType',
-    //   label: '',
-    //   type: 'Select',
-    //   options: [
-    //     {
-    //       label: '选中项',
-    //       value: 'selected',
-    //     },
-    //     {
-    //       label: '未选中项',
-    //       value: 'noSelected',
-    //     },
-    //   ],
-    //   key: 'originType',
-    // },
     {
       name: 'optionsExtra',
       label: '固定选项配置',
       labelStyle: {
-        'font-weight': 'bold',
+        'font-weight': 'bold'
       },
       type: 'Options',
       options: [],
       keys: 'extraOptions',
-      hidden: true,
-    },
-    // {
-    //   name: 'optionConfig',
-    //   label: '选项配置',
-    //   type: 'Customed',
-    //   key: 'optionConfig',
-    //   content: [
-    // {
-    //   label: '选项随机排序',
-    //   type: 'CheckBox',
-    //   key: 'randomSort',
-    //   direction: 'horizon',
-    //   value: false,
-    //   contentPosition: 'before',
-    //   contentClass: 'check-box-config',
-    // },
-    // {
-    //   label: '固定最后一个选项',
-    //   type: 'CustomedSwitch',
-    //   key: 'pinLastOption',
-    //   direction: 'horizon',
-    //   value: false,
-    //   exclude: ['combination'],
-    //   contentClass: 'check-box-config',
-    //   tip: '开关开启后，本题的最后一个选项不参与随机，位置固定显示在最后',
-    // },
-    // {
-    //   label: '默认选中第一项',
-    //   type: 'CheckBox',
-    //   key: 'checked',
-    //   direction: 'horizon',
-    //   value: false,
-    //   contentPosition: 'before',
-    //   contentClass: 'check-box-config',
-    // },
-    // {
-    //   label: '展示选项余量',
-    //   type: 'CheckBox',
-    //   key: 'showLeftNum',
-    //   direction: 'horizon',
-    //   value: true,
-    //   include: ['appointment'],
-    //   contentPosition: 'before',
-    //   contentClass: 'check-box-config',
-    // },
-    // {
-    //   name: 'inputType',
-    //   label: '切换题型',
-    //   type: 'Radio',
-    //   key: 'selectType',
-    //   direction: 'horizon',
-    //   value: '',
-    //   options: [
-    //     {
-    //       label: '单选',
-    //       value: 'radio',
-    //     },
-    //     {
-    //       label: '多选',
-    //       value: 'checkbox',
-    //     },
-    //   ],
-    //   contentClass: 'radio-config',
-    // },
-    // {
-    //   label: '排列方式',
-    //   type: 'Radio',
-    //   key: 'sortWay',
-    //   direction: 'horizon',
-    //   value: '',
-    //   options: [
-    //     {
-    //       label: '竖排',
-    //       value: 'v',
-    //     },
-    //     {
-    //       label: '横排',
-    //       value: 'h',
-    //     },
-    //   ],
-    //   contentClass: 'radio-config',
-    // },
-    //     {
-    //       label: '至少选择数',
-    //       type: 'InputNumber',
-    //       key: 'minNum',
-    //       direction: 'horizon',
-    //       value: '',
-    //       min: 0,
-    //       max: 'maxNum',
-    //       contentClass: 'input-number-config',
-    //     },
-    //     {
-    //       label: '最多选择数',
-    //       type: 'InputNumber',
-    //       key: 'maxNum',
-    //       direction: 'horizon',
-    //       value: '',
-    //       min: 'minNum',
-    //       contentClass: 'input-number-config',
-    //     },
-    //   ],
-    // },
+      hidden: true
+    }
   ],
   editConfigure: {
     optionEdit: {
-      show: true,
+      show: true
     },
     optionEditBar: {
       show: true,
       configure: {
         showOthers: true,
-        showAdvancedConfig: true,
-      },
-    },
-  },
-};
+        showAdvancedConfig: true
+      }
+    }
+  }
+}
 
-export default meta;
+export default meta
diff --git a/web/src/materials/questions/widgets/SelectMoreModule/index.jsx b/web/src/materials/questions/widgets/SelectMoreModule/index.jsx
index 2ee24264..aaf7900b 100644
--- a/web/src/materials/questions/widgets/SelectMoreModule/index.jsx
+++ b/web/src/materials/questions/widgets/SelectMoreModule/index.jsx
@@ -1,51 +1,45 @@
-import { defineComponent } from 'vue';
-import baseInput from '../BaseInput';
+import { defineComponent } from 'vue'
+import BaseInput from '../BaseInput'
 
 export default defineComponent({
   name: 'SelectMoreData',
-  components: { baseInput },
   props: {
     readonly: Boolean,
     field: String,
     placeholder: String,
-    value: String,
+    value: String
   },
+  emits: ['blur', 'change'],
   setup(props, { emit }) {
-    // const moduleConfig = ref({
-    //   type: 'text'
-    // })
     const onBlur = () => {
-      emit('blur');
-    };
+      emit('blur')
+    }
     const onChange = (e) => {
-      const key = props.field;
-      const value = e.target.value;
+      const key = props.field
+      const value = e.target.value
       emit('change', {
         key,
-        value,
-      });
-    };
+        value
+      })
+    }
     return {
       // moduleConfig,
       onBlur,
-      onChange,
-    };
+      onChange
+    }
   },
   render() {
+    const props = this.$props
     return (
-      <baseInput
+      <BaseInput
         readonly={this.readonly}
         uiTarget="input"
-        {...{ props: this.$props }}
+        {...props}
         {...{
-          on: {
-            blur: this.onBlur,
-            // 'focus': this.onFocus,
-            // 'input': this.onInput,
-            change: this.onChange,
-          },
+          onBlur: this.onBlur,
+          onChange: this.onChange
         }}
-      ></baseInput>
-    );
-  },
-});
+      ></BaseInput>
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/StarModule/index.jsx b/web/src/materials/questions/widgets/StarModule/index.jsx
index a0e713fd..991a8179 100644
--- a/web/src/materials/questions/widgets/StarModule/index.jsx
+++ b/web/src/materials/questions/widgets/StarModule/index.jsx
@@ -1,89 +1,99 @@
-import { defineComponent, computed } from 'vue';
-import '../../common/css/radioStar.scss';
-import BaseRate from '../BaseRate';
-import QuestionWithRule from '@/materials/questions/widgets/QuestionRuleContainer';
+import { defineComponent, computed, shallowRef, defineAsyncComponent } from 'vue'
+import BaseRate from '../BaseRate'
+import './style.scss'
+
 export default defineComponent({
   name: 'StarModule',
-  components: { BaseRate, QuestionWithRule },
   props: {
     type: {
       type: String,
-      default: '',
+      default: ''
     },
     field: {
       type: String,
-      default: '',
+      default: ''
     },
     value: {
       type: [String, Number],
-      default: 0,
+      default: 0
     },
     starMin: {
       type: Number,
-      default: 1,
+      default: 1
     },
     starMax: {
       type: Number,
-      default: 5,
+      default: 5
     },
     starStyle: {
       type: String,
-      default: 'star',
+      default: 'star'
     },
     readonly: {
       type: Boolean,
-      default: false,
+      default: false
     },
     rangeConfig: {
       type: Object,
       default: () => {
-        return {};
-      },
-    },
+        return {}
+      }
+    }
   },
+  emits: ['change'],
   setup(props, { emit }) {
     const rating = computed({
       get() {
-        return props.value;
+        return props.value
       },
       set(val) {
-        const key = props.field;
+        const key = props.field
         emit('change', {
           key,
-          value: val,
-        });
-      },
-    });
+          value: val
+        })
+      }
+    })
     const currentRangeConfig = computed(() => {
-      return props.rangeConfig[rating.value];
-    });
+      return props.rangeConfig[rating.value]
+    })
     const isShowInput = computed(() => {
-      return currentRangeConfig.value?.isShowInput;
-    });
+      return currentRangeConfig.value?.isShowInput
+    })
     const starClass = computed(() => {
-      const { starStyle } = props;
+      const { starStyle } = props
       switch (starStyle) {
         case 'star':
-          return 'qicon qicon-xingxing';
+          return 'qicon qicon-xingxing'
         case 'love':
-          return 'qicon qicon-aixin';
+          return 'qicon qicon-aixin'
         case 'number':
-          return 'number';
+          return 'number'
         default:
-          return 'qicon qicon-xingxing';
+          return 'qicon qicon-xingxing'
       }
-    });
+    })
     const confirmStar = (num) => {
-      if (props.readonly) return;
-      rating.value = num;
-    };
+      if (props.readonly) return
+      rating.value = num
+    }
     const onMoreDataChange = (data) => {
-      const { key, value } = data;
+      const { key, value } = data
       emit('change', {
         key,
-        value,
-      });
-    };
+        value
+      })
+    }
+    const selectMoreView = shallowRef(null)
+    if (props.readonly) {
+      selectMoreView.value = defineAsyncComponent(
+        () => import('@materials/questions/QuestionContainerB')
+      )
+    } else {
+      selectMoreView.value = defineAsyncComponent(
+        () => import('@materials/questions/QuestionRuleContainer')
+      )
+    }
     return {
       rating,
       currentRangeConfig,
@@ -91,7 +101,8 @@ export default defineComponent({
       isShowInput,
       confirmStar,
       onMoreDataChange,
-    };
+      selectMoreView
+    }
   },
   render() {
     const {
@@ -104,7 +115,9 @@ export default defineComponent({
       isShowInput,
       onMoreDataChange,
       rangeConfig,
-    } = this;
+      selectMoreView,
+      confirmStar
+    } = this
 
     return (
       <div class="star-wrapper-main">
@@ -113,25 +126,23 @@ export default defineComponent({
           value={value}
           readonly={readonly}
           iconClass={starClass}
-          onChange={this.confirmStar}
+          onChange={confirmStar}
         />
-        {currentRangeConfig && (
-          <p class="explain radio-star">{currentRangeConfig.explain}</p>
-        )}
+        {currentRangeConfig && <p class="explain radio-star">{currentRangeConfig.explain}</p>}
         {isShowInput && (
-          <QuestionWithRule
+          <selectMoreView
             showTitle={false}
-            key={ `${this.field}_${this.rating}`}
+            key={`${field}_${rating}`}
             moduleConfig={{
               type: 'selectMoreModule',
-              field: `${this.field}_${this.rating}`,
+              field: `${field}_${rating}`,
               placeholder: rangeConfig[rating]?.text,
-              value: rangeConfig[rating]?.othersValue || '',
+              value: rangeConfig[rating]?.othersValue || ''
             }}
             onChange={(e) => onMoreDataChange(e)}
-          ></QuestionWithRule>
+          ></selectMoreView>
         )}
       </div>
-    );
-  },
-});
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/StarModule/meta.js b/web/src/materials/questions/widgets/StarModule/meta.js
index 19c20702..3d6ca731 100644
--- a/web/src/materials/questions/widgets/StarModule/meta.js
+++ b/web/src/materials/questions/widgets/StarModule/meta.js
@@ -1,118 +1,48 @@
-import basicConfig from '../../common/config/basicConfig';
+import basicConfig from '@materials/questions/common/config/basicConfig'
 
 const meta = {
   title: '评分',
-  questExtra: ['listenMerge'],
   type: 'radio-star',
   componentName: 'StarModule',
   formConfig: [
-    // {
-    //   name: 'fieldId',
-    //   label: '题目ID',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'field',
-    //   tip: '请谨慎修改题目ID，并保证此ID在整个问卷中唯一',
-    //   relyField: 'questionIdCustomize',
-    //   noNeedRelyClean: true
-    // },
-    // {
-    //   name: 'questionLabel',
-    //   label: '题目标签',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'label',
-    //   tip: '请谨慎修改题目标签，并保证此标签在整个问卷中唯一',
-    //   relyField: 'questionLabelCustomize',
-    //   noNeedRelyClean: true
-    // },
-    // {
-    //   name: 'titleOrigin',
-    //   label: '标题引用其他题目选项',
-    //   type: 'TitleOrigin',
-    //   options: [],
-    //   key: 'title'
-    // },
     basicConfig,
     {
       name: 'starConfig',
-      label: '评分显示样式',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
+      title: '评分显示样式',
       type: 'RadioGroup',
       key: 'starStyle',
       options: [
         {
           label: [1, 2, 3, 4, 5]
-            .map(
-              () =>
-                `<i class='qicon qicon-xingxing' style='margin-right: 4px;'></i>`
-            )
+            .map(() => `<i class='qicon qicon-xingxing' style='margin-right: 4px;'></i>`)
             .join(''),
-          value: 'star',
+          value: 'star'
         },
         {
           label: [1, 2, 3, 4, 5]
-            .map(
-              () =>
-                `<i class='qicon qicon-aixin' style='margin-right: 4px;'></i>`
-            )
+            .map(() => `<i class='qicon qicon-aixin' style='margin-right: 4px;'></i>`)
             .join(''),
-          value: 'love',
+          value: 'love'
         },
         {
           label: `1  2  3  4  5`,
-          value: 'number',
-        },
-      ],
-    },
-    // {
-    //   name: 'starMin',
-    //   label: '评分最小值',
-    //   type: 'InputNumber',
-    //   key: 'starMin',
-    //   direction: 'horizon',
-    //   value: '',
-    //   min: data => Math.max(data.starMax - 10, -10),
-    //   max: 'starMax',
-    //   relyFunc: data => data.starStyle === 'number',
-    // },
-    // {
-    //   name: 'starMax',
-    //   label: '评分最大值',
-    //   type: 'InputNumber',
-    //   key: 'starMax',
-    //   direction: 'horizon',
-    //   value: '',
-    //   min: 'starMin',
-    //   max: data => Math.min(data.starMin + 10, 10),
-    //   relyFunc: data => data.starStyle === 'number',
-    // },
-    // {
-    //   name: 'starMaxSingle',
-    //   label: '评分最大值',
-    //   type: 'InputNumber',
-    //   key: 'starMax',
-    //   direction: 'horizon',
-    //   value: 5,
-    //   min: 1,
-    //   max: 10,
-    //   relyFunc: data => data.starStyle !== 'number',
-    // },
+          value: 'number'
+        }
+      ]
+    }
   ],
   editConfigure: {
     optionEdit: {
-      show: false,
+      show: false
     },
     optionEditBar: {
       show: true,
       configure: {
         showOthers: false,
-        showAdvancedRateConfig: true,
-      },
-    },
-  },
-};
+        showAdvancedRateConfig: true
+      }
+    }
+  }
+}
 
-export default meta;
+export default meta
diff --git a/web/src/materials/questions/widgets/StarModule/style.scss b/web/src/materials/questions/widgets/StarModule/style.scss
new file mode 100644
index 00000000..f94143f1
--- /dev/null
+++ b/web/src/materials/questions/widgets/StarModule/style.scss
@@ -0,0 +1,24 @@
+@import '@materials/questions/common/css/default.scss';
+
+.explain {
+  line-height: 0.48rem;
+  font-size: 0.24rem;
+  color: #92949d;
+  padding: 0 0.4rem;
+}
+
+.radio-star {
+  &.isPc {
+    margin-bottom: 0.2rem;
+  }
+}
+
+.qicon {
+  // color: #e3e4e8;
+  &.on {
+    color: $primary-color;
+  }
+  &.off {
+    color: #e3e4e8;
+  }
+}
diff --git a/web/src/materials/questions/widgets/TextareaModule/index.jsx b/web/src/materials/questions/widgets/TextareaModule/index.jsx
index d376c48f..e8ef947c 100644
--- a/web/src/materials/questions/widgets/TextareaModule/index.jsx
+++ b/web/src/materials/questions/widgets/TextareaModule/index.jsx
@@ -1,9 +1,12 @@
-import baseInput from '../BaseInput';
-import { defineComponent, ref } from 'vue';
-import '../../common/css/input.scss';
-import { get } from 'lodash-es';
-import myMeta from './meta';
-export const meta = myMeta;
+import { defineComponent, ref } from 'vue'
+import { get } from 'lodash-es'
+
+import BaseInput from '../BaseInput'
+import myMeta from './meta'
+
+import './style.scss'
+
+export const meta = myMeta
 /**
  * 支持配置：
  * 内容限制格式，valid
@@ -12,17 +15,16 @@ export const meta = myMeta;
  */
 export default defineComponent({
   name: 'TextareaModule',
-  components: { baseInput },
   props: {
     type: {},
     field: {},
     value: {
       type: String,
-      default: '',
+      default: ''
     },
     placeholder: {
       type: String,
-      default: '请填写',
+      default: '请填写'
     },
     textRange: {
       type: Object,
@@ -30,101 +32,101 @@ export default defineComponent({
         return {
           max: {
             placeholder: '500',
-            value: 500,
+            value: 500
           },
           min: {
             placeholder: '0',
-            value: 0,
-          },
-        };
-      },
+            value: 0
+          }
+        }
+      }
     },
     valid: {
       type: String,
-      default: '',
+      default: ''
     },
     readonly: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
+  emits: ['change', 'blur', 'focus', 'input'],
   setup(props, { emit }) {
-    const focusFlag = ref(false);
-    const initial = props.textRange.max.value - props.value.length;
-    const getLeftTextNumber = ref(initial);
+    const focusFlag = ref(false)
+    const initial = props.textRange.max.value - props.value.length
+    const getLeftTextNumber = ref(initial)
     const onFocus = () => {
-      if (props.readonly) return;
+      if (props.readonly) return
       if (props.type !== 'mob' && (props.valid === '' || props.valid === 'n')) {
-        focusFlag.value = true;
+        focusFlag.value = true
       }
-      emit('focus');
-    };
+      emit('focus')
+    }
     const onBlur = () => {
-      emit('blur');
-    };
+      emit('blur')
+    }
     const onInput = (e) => {
       if (props.type !== 'mob' && (props.valid === '' || props.valid === 'n')) {
-        getLeftTextNumber.value =
-          props.textRange.max.value - e.target.value.length;
+        getLeftTextNumber.value = props.textRange.max.value - e.target.value.length
       }
-      emit('input');
-    };
+      emit('input')
+    }
     const onChange = (e) => {
-      const key = props.field;
-      const maxLength = get(props, 'textRange.max.value');
+      const key = props.field
+      const maxLength = get(props, 'textRange.max.value')
       if (
         get(props, 'valid') === 'n' &&
         maxLength &&
         e.target.value.toString().length > maxLength
       ) {
-        e.target.value = e.target.value.slice(0, props.textRange.max.value);
+        e.target.value = e.target.value.slice(0, props.textRange.max.value)
       }
       if (['m', 'idcard', 'e', 'licensePlate'].includes(props.valid)) {
-        e.target.value = e.target.value.replace(/\s+/g, '');
+        e.target.value = e.target.value.replace(/\s+/g, '')
       }
       emit('change', {
         key,
-        value: e.target.value,
-      });
-    };
+        value: e.target.value
+      })
+    }
     return {
       focusFlag,
       getLeftTextNumber,
       onBlur,
       onFocus,
       onInput,
-      onChange,
-    };
+      onChange
+    }
   },
   render() {
-    const { focusFlag, getLeftTextNumber, field, textRange } = this;
+    const { focusFlag, getLeftTextNumber, field, textRange } = this
     const props = {
       ...this.$props,
       value: this.value,
       name: field,
       maxlength: textRange.max.value,
-      minlength: textRange.min.value,
-    };
+      minlength: textRange.min.value
+    }
     return (
-      <baseInput
-        uiTarget="textarea"
-        customClass={focusFlag ? 'is-focused' : ''}
-        {...{ props: props }}
-        {...{
-          on: {
-            blur: this.onBlur,
-            focus: this.onFocus,
-            input: this.onInput,
-            change: this.onChange,
-          },
-        }}
-      >
+      <div>
+        <BaseInput
+          uiTarget="textarea"
+          customClass={focusFlag ? 'is-focused' : ''}
+          {...props}
+          {...{
+            onBlur: this.onBlur,
+            onFocus: this.onFocus,
+            onInput: this.onInput,
+            onChange: this.onChange
+          }}
+        />
+
         {focusFlag && (
           <div class="text-number-tip">
             <p>{getLeftTextNumber}</p>
           </div>
         )}
-      </baseInput>
-    );
-  },
-});
+      </div>
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/TextareaModule/meta.js b/web/src/materials/questions/widgets/TextareaModule/meta.js
index 6a95858a..73f39d26 100644
--- a/web/src/materials/questions/widgets/TextareaModule/meta.js
+++ b/web/src/materials/questions/widgets/TextareaModule/meta.js
@@ -1,90 +1,47 @@
-import basicConfig from '../../common/config/basicConfig';
+import basicConfig from '@materials/questions/common/config/basicConfig'
 
 const meta = {
   title: '多行输入框',
   type: 'textarea',
   componentName: 'TextareaModule',
   formConfig: [
-    // {
-    //   name: 'fieldId',
-    //   label: '题目ID',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'field',
-    //   tip: '请谨慎修改题目ID，并保证此ID在整个问卷中唯一',
-    //   relyField: 'questionIdCustomize',
-    //   noNeedRelyClean: true
-    // },
-    // {
-    //   name: 'questionLabel',
-    //   label: '题目标签',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'label',
-    //   tip: '请谨慎修改题目标签，并保证此标签在整个问卷中唯一',
-    //   relyField: 'questionLabelCustomize',
-    //   noNeedRelyClean: true
-    // },
-    // {
-    //   name: 'titleOrigin',
-    //   label: '标题引用其他题目选项',
-    //   type: 'TitleOrigin',
-    //   options: [],
-    //   key: 'title'
-    // },
     basicConfig,
     {
       name: 'valid',
-      label: '内容限制格式',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
-      type: 'Select',
+      title: '内容限制格式',
+      type: 'SelectSetter',
       key: 'valid',
       options: [
         {
           label: '请选择',
-          value: '',
+          value: ''
         },
         {
           label: '手机号',
-          value: 'm',
+          value: 'm'
         },
         {
           label: '身份证',
-          value: 'idcard',
+          value: 'idcard'
         },
         {
           label: '数字',
-          value: 'n',
+          value: 'n'
         },
         {
           label: '邮箱',
-          value: 'e',
+          value: 'e'
         },
         {
           label: '车牌号',
-          value: 'licensePlate',
-        },
-      ],
+          value: 'licensePlate'
+        }
+      ]
     },
-    // {
-    //   name: 'qQuestionLimit',
-    //   label: '相同填写内容提交次数',
-    //   type: 'QuestionLimit',
-    //   key: 'qQuestionLimit',
-    //   value: {
-    //     type: 0,
-    //     limit: 0
-    //   }
-    // },
     {
       name: 'numberRange',
-      label: '数字限制',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
-      type: 'Range',
+      title: '数字限制',
+      type: 'RangeSetter',
       options: [],
       key: 'numberRange',
       value: [],
@@ -92,63 +49,38 @@ const meta = {
         numberRange: {
           min: {
             placeholder: '0',
-            value: 0,
+            value: 0
           },
           max: {
             placeholder: '1000',
-            value: 1000,
-          },
-        },
+            value: 1000
+          }
+        }
       },
-      relyFunc: (data) => data.valid && data.valid === 'n',
+      relyFunc: (data) => data.valid && data.valid === 'n'
     },
     {
       name: 'textRange',
-      label: '字数限制',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
-      type: 'Range',
+      title: '字数限制',
+      type: 'RangeSetter',
       options: [],
       key: 'textRange',
-      value: [],
+      value: []
     },
-    // {
-    //   name: 'inputType',
-    //   label: '切换题型',
-    //   type: 'Radio',
-    //   key: 'type',
-    //   direction: 'horizon',
-    //   value: '',
-    //   options: [
-    //     {
-    //       label: '单行',
-    //       value: 'text'
-    //     },
-    //     {
-    //       label: '多行',
-    //       value: 'textarea'
-    //     }
-    //   ],
-    //   contentClass: 'radio-config'
-    // },
     {
       name: 'placeholder',
-      label: '引导提示文案',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
-      type: 'Input',
+      title: '引导提示文案',
+      type: 'InputSetter',
       placeholder: '限制20字',
       key: 'placeholder',
       tip: '限制20字',
       validate(value) {
         if (value && value.length > 20) {
-          return false;
+          return false
         }
-        return true;
-      },
-    },
-  ],
-};
-export default meta;
+        return true
+      }
+    }
+  ]
+}
+export default meta
diff --git a/web/src/materials/questions/widgets/TextareaModule/style.scss b/web/src/materials/questions/widgets/TextareaModule/style.scss
new file mode 100644
index 00000000..576225c9
--- /dev/null
+++ b/web/src/materials/questions/widgets/TextareaModule/style.scss
@@ -0,0 +1,11 @@
+.text-number-tip {
+  font-size: 0.24rem;
+  color: $font-color;
+  float: right;
+  margin-right: 0.1rem;
+  margin-top: 0.1rem;
+}
+
+textarea {
+  resize: none;
+}
diff --git a/web/src/materials/questions/widgets/Title.jsx b/web/src/materials/questions/widgets/Title.jsx
deleted file mode 100644
index cefa5568..00000000
--- a/web/src/materials/questions/widgets/Title.jsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { defineComponent, ref, computed, watch } from 'vue';
-import { filterXSS } from '@/common/xss';
-import '../common/css/title.scss';
-import tagList from '../common/config/tagList';
-import richEditor from '@/common/Editor/RichEditor';
-
-export default defineComponent({
-  name: 'ModuleTitle',
-  components: { richEditor },
-  props: {
-    isSelected: {
-      type: Boolean,
-      default: false,
-    },
-    showIndex: {
-      type: Boolean,
-      default: false,
-    },
-    indexNumber: {
-      type: [Number, String],
-      default: '',
-    },
-    isRequired: {
-      type: Boolean,
-      default: true,
-    },
-    title: {
-      type: String,
-      default: '标题',
-    },
-    showType: {
-      type: Boolean,
-      default: false,
-    },
-    type: {
-      type: String,
-      default: '',
-    },
-  },
-  setup(props, { emit }) {
-    const status = ref('');
-    watch(
-      () => props.isSelected,
-      () => {
-        status.value = 'preview';
-      }
-    );
-    const typeName = computed(() => {
-      if (!props.showType) return '';
-      const types = props.showType ? [props.type] : [];
-      if (!types || !types.length) return '';
-      let ret = '';
-      types.forEach((t) => {
-        if (ret) return;
-        const tv = tagList && tagList[t];
-        if (tv && typeof tv === 'string') {
-          ret = tv.trim();
-        }
-      });
-      return ret;
-    });
-    const tagTitle = computed(() => {
-      let htmlText = '';
-      htmlText += filterXSS(props.title);
-      htmlText = `<span>${htmlText}</span>`;
-      if (typeName.value) {
-        const index = htmlText.lastIndexOf('</p>');
-        if (index > -1) {
-          htmlText =
-            htmlText.slice(0, index) +
-            `<span class="m-tag">${typeName.value}</span>` +
-            htmlText.slice(index);
-        } else {
-          htmlText = htmlText + `<span class="m-tag">${typeName.value}</span>`;
-        }
-      }
-      return htmlText;
-    });
-    const handleClick = () => {
-      if (props.isSelected) {
-        status.value = 'edit';
-      }
-    };
-    const handleChange = (val) => {
-      emit('change', {
-        key: 'title',
-        value: val,
-      });
-    };
-    return {
-      status,
-      typeName,
-      tagTitle,
-      handleClick,
-      handleChange,
-    };
-  },
-  render() {
-    const { isRequired, tagTitle, indexNumber } = this;
-    return (
-      <div
-        class={['module-title', isRequired ? 'is-required' : '']}
-        onClick={this.handleClick}
-      >
-        <div>
-          {isRequired && <i class="module-title-required">*</i>}
-          <div class="module-title-title">
-            {this.showIndex && <span class="index"> {indexNumber}.</span>}
-            {this.status === 'edit' ? (
-              <div class="richeditor">
-                <richEditor
-                  value={filterXSS(this.title)}
-                  onChange={this.handleChange}
-                ></richEditor>
-              </div>
-            ) : (
-              <div
-                domPropsInnerHTML={filterXSS(tagTitle)}
-                class="flex module-title-title-text"
-              ></div>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  },
-});
diff --git a/web/src/materials/questions/widgets/TitleModules/EditTitle/index.jsx b/web/src/materials/questions/widgets/TitleModules/EditTitle/index.jsx
new file mode 100644
index 00000000..29abab89
--- /dev/null
+++ b/web/src/materials/questions/widgets/TitleModules/EditTitle/index.jsx
@@ -0,0 +1,80 @@
+import { defineComponent } from 'vue'
+import { filterXSS } from '@/common/xss'
+import RichEditor from '@/common/Editor/RichEditor.vue'
+
+import TitleContent from '../TitleContent'
+
+import './style.scss'
+
+export default defineComponent({
+  name: 'EditTitle',
+  props: {
+    isSelected: {
+      type: Boolean,
+      default: false
+    },
+    showIndex: {
+      type: Boolean,
+      default: false
+    },
+    indexNumber: {
+      type: [Number, String],
+      default: ''
+    },
+    isRequired: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: '标题'
+    },
+    showType: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const handleChange = (val) => {
+      emit('change', {
+        key: 'title',
+        value: val
+      })
+    }
+    return {
+      handleChange
+    }
+  },
+  render() {
+    const { isRequired, indexNumber, title, showType, type, isSelected, showIndex } = this
+
+    return (
+      <TitleContent
+        isRequired={isRequired}
+        indexNumber={indexNumber}
+        title={title}
+        showType={showType}
+        showIndex={showIndex}
+        type={type}
+        isSelected={isSelected}
+      >
+        {{
+          edit: () => {
+            return (
+              <RichEditor
+                class="rich-editor"
+                modelValue={filterXSS(this.title)}
+                onChange={this.handleChange}
+              />
+            )
+          }
+        }}
+      </TitleContent>
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/TitleModules/EditTitle/style.scss b/web/src/materials/questions/widgets/TitleModules/EditTitle/style.scss
new file mode 100644
index 00000000..a3cd8de5
--- /dev/null
+++ b/web/src/materials/questions/widgets/TitleModules/EditTitle/style.scss
@@ -0,0 +1,9 @@
+.rich-editor {
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+  margin: -10px 0;
+  flex: 1;
+  font-size: 0.32rem;
+  background-color: #fff;
+}
diff --git a/web/src/materials/questions/widgets/TitleModules/PreviewTitle/index.jsx b/web/src/materials/questions/widgets/TitleModules/PreviewTitle/index.jsx
new file mode 100644
index 00000000..80b6c487
--- /dev/null
+++ b/web/src/materials/questions/widgets/TitleModules/PreviewTitle/index.jsx
@@ -0,0 +1,48 @@
+import { defineComponent } from 'vue'
+
+import TitleContent from '../TitleContent'
+
+export default defineComponent({
+  name: 'PreviewTitle',
+  props: {
+    indexNumber: {
+      type: [Number, String],
+      default: ''
+    },
+    showIndex: {
+      type: Boolean,
+      default: false
+    },
+    isRequired: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    showType: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  setup() {},
+  render() {
+    const { isRequired, indexNumber, title, showType, type, showIndex } = this
+
+    return (
+      <TitleContent
+        isRequired={isRequired}
+        indexNumber={indexNumber}
+        title={title}
+        showIndex={showIndex}
+        showType={showType}
+        type={type}
+      />
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx b/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx
new file mode 100644
index 00000000..8bd47f3a
--- /dev/null
+++ b/web/src/materials/questions/widgets/TitleModules/TitleContent/index.jsx
@@ -0,0 +1,106 @@
+import { defineComponent, watch, ref, computed } from 'vue'
+import { filterXSS } from '@/common/xss'
+import tagList from '@materials/questions/common/config/tagList'
+
+import './style.scss'
+
+export default defineComponent({
+  name: 'TitleContent',
+  props: {
+    isSelected: {
+      type: Boolean,
+      default: false
+    },
+    showIndex: {
+      type: Boolean,
+      default: false
+    },
+    indexNumber: {
+      type: [Number, String],
+      default: ''
+    },
+    isRequired: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: '标题'
+    },
+    showType: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props, { slots }) {
+    const status = ref('')
+    watch(
+      () => props.isSelected,
+      () => {
+        status.value = 'preview'
+      }
+    )
+
+    const handleClick = () => {
+      if (props.isSelected) {
+        status.value = 'edit'
+      }
+    }
+
+    const typeName = computed(() => {
+      if (!props.showType) return ''
+      const types = props.showType ? [props.type] : []
+      if (!types || !types.length) return ''
+      let ret = ''
+      types.forEach((t) => {
+        if (ret) return
+        const tv = tagList && tagList[t]
+        if (tv && typeof tv === 'string') {
+          ret = tv.trim()
+        }
+      })
+      return ret
+    })
+
+    const tagTitle = computed(() => {
+      let htmlText = ''
+      htmlText += filterXSS(props.title)
+      htmlText = `<span>${htmlText}</span>`
+      if (typeName.value) {
+        const index = htmlText.lastIndexOf('</p>')
+        if (index > -1) {
+          htmlText =
+            htmlText.slice(0, index) +
+            `<span class="m-tag">${typeName.value}</span>` +
+            htmlText.slice(index)
+        } else {
+          htmlText = htmlText + `<span class="m-tag">${typeName.value}</span>`
+        }
+      }
+      return htmlText
+    })
+
+    return { slots, handleClick, status, tagTitle }
+  },
+  render() {
+    const { isRequired, indexNumber, slots, status, tagTitle } = this
+
+    return (
+      <div class={['module-title', isRequired ? 'is-required' : '']} onClick={this.handleClick}>
+        {isRequired && <i class="module-title-required">*</i>}
+        <div class="module-content">
+          {this.showIndex && <span class="index"> {indexNumber}.</span>}
+          {status === 'edit' && slots.edit ? (
+            slots.edit()
+          ) : (
+            <div v-html={filterXSS(tagTitle)} class="flex module-text"></div>
+          )}
+        </div>
+      </div>
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/TitleModules/TitleContent/style.scss b/web/src/materials/questions/widgets/TitleModules/TitleContent/style.scss
new file mode 100644
index 00000000..dea76e98
--- /dev/null
+++ b/web/src/materials/questions/widgets/TitleModules/TitleContent/style.scss
@@ -0,0 +1,59 @@
+@import '@materials/questions/common/css/default.scss';
+
+.module-title {
+  position: relative;
+  height: auto;
+  line-height: 0.45rem;
+  font-size: $title-size;
+  padding: 0 0.4rem 0.4rem;
+  color: #000000;
+  font-weight: normal;
+  &-required {
+    color: $error-color;
+    position: absolute;
+    left: 0.16rem;
+    top: 0rem;
+    font-size: 0.2rem;
+    transform-origin: left top;
+  }
+
+  .module-content {
+    zoom: 1;
+    display: flex;
+    font-size: $title-size;
+    img {
+      max-width: 100%;
+    }
+    .index {
+      float: left;
+      padding-right: 0.06rem;
+      font-size: $title-size;
+    }
+    em {
+      font-style: italic;
+    }
+    u {
+      text-decoration: underline;
+    }
+  }
+
+  .module-text {
+    font-size: $title-size;
+    p,
+    span {
+      font-size: inherit;
+    }
+
+    .m-tag {
+      border: 1px solid $primary-color;
+      font-size: 0.18rem;
+      height: 0.4rem;
+      line-height: 0.4rem;
+      display: inline-block;
+      color: $primary-color;
+      padding: 0 0.16rem;
+      margin-left: 0.16rem;
+      border-radius: 0 0.06rem 0 0.06rem;
+    }
+  }
+}
diff --git a/web/src/materials/questions/components/Progress.vue b/web/src/materials/questions/widgets/VoteModule/AnswerProcess/index.vue
similarity index 70%
rename from web/src/materials/questions/components/Progress.vue
rename to web/src/materials/questions/widgets/VoteModule/AnswerProcess/index.vue
index ddd82d5c..5ca22779 100644
--- a/web/src/materials/questions/components/Progress.vue
+++ b/web/src/materials/questions/widgets/VoteModule/AnswerProcess/index.vue
@@ -3,13 +3,13 @@
     class="process-outer"
     :style="{
       width: processConf.width || 'auto',
-      height: processConf.height || '0.03rem',
+      height: processConf.height || '0.03rem'
     }"
   >
     <div
       class="process-inner"
       :style="{
-        width: processConf.percent || 0,
+        width: processConf.percent || 0
       }"
     ></div>
   </div>
@@ -24,23 +24,24 @@ export default {
         */
     processConf: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   computed: {},
   methods: {
     calcVotePercent(option) {
-      const { voteCount = 0, voteTotal = 0 } = option;
+      const { voteCount = 0, voteTotal = 0 } = option
       if (voteTotal === 0) {
-        return '0.0';
+        return '0.0'
       }
-      return ((voteCount * 100) / voteTotal).toFixed(1);
-    },
-  },
-};
+      return ((voteCount * 100) / voteTotal).toFixed(1)
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
-@import '../common/css/default.scss';
+<style lang="scss" scoped>
+@import '@materials/questions/common/css/default.scss';
+
 .process-outer {
   position: relative;
   border-radius: 0.16rem;
diff --git a/web/src/materials/questions/widgets/VoteModule/index.jsx b/web/src/materials/questions/widgets/VoteModule/index.jsx
index 61d2b8ec..90211b65 100644
--- a/web/src/materials/questions/widgets/VoteModule/index.jsx
+++ b/web/src/materials/questions/widgets/VoteModule/index.jsx
@@ -1,151 +1,137 @@
-import { computed, defineComponent } from 'vue';
-import baseChoice from '../BaseChoice';
-import Progress from '../../components/Progress.vue';
-import '../../common/css/vote.scss';
-import QuestionWithRule from '@/materials/questions/widgets/QuestionRuleContainer';
-import { includes } from 'lodash-es';
+import { computed, defineComponent } from 'vue'
+import { includes } from 'lodash-es'
+
+import AnswerProcess from './AnswerProcess/index.vue'
+import BaseChoice from '../BaseChoice'
+
+import './style.scss'
+
 export default defineComponent({
   name: 'VoteModule',
-  components: { baseChoice, Progress, QuestionWithRule },
   props: {
     innerType: {
       type: String,
-      default: 'radio',
+      default: 'radio'
     },
     field: {
       type: String,
-      default: '',
+      default: ''
     },
     value: {
       type: [String, Array],
-      default: '',
+      default: ''
     },
     layout: {
       type: String,
-      default: 'vertical',
+      default: 'vertical'
     },
     options: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     readonly: {
       type: Boolean,
-      default: false,
+      default: false
     },
     voteTotal: {
       type: Number,
-      default: 10,
+      default: 10
     },
     maxNum: {
       type: [Number, String],
-      default: 1,
-    },
+      default: 1
+    }
   },
+  emits: ['change'],
   setup(props, { emit }) {
     const disableState = computed(() => {
       if (!props.maxNum) {
-        return false;
+        return false
       }
-      return props.value.length >= +props.maxNum;
-    });
+      return props.value.length >= +props.maxNum
+    })
     const isDisabled = (item) => {
-      const { value } = props;
-      return disableState.value && !includes(value, item.value);
-    };
+      const { value } = props
+      return disableState.value && !includes(value, item.value)
+    }
     const myOptions = computed(() => {
-      const { options } = props;
+      const { options } = props
       if (props.innerType === 'checkbox') {
         return options.map((item) => {
           return {
             ...item,
-            disabled: isDisabled(item),
-          };
-        });
+            disabled: isDisabled(item)
+          }
+        })
       } else {
-        return options;
+        return options
       }
-    });
+    })
     const calcVotePercent = (option, total) => {
-      const { voteCount = 0 } = option;
-      const voteTotal = total || 0;
+      const { voteCount = 0 } = option
+      const voteTotal = total || 0
 
       if (voteTotal === 0) {
-        return '0.0';
+        return '0.0'
       }
-      return ((voteCount * 100) / voteTotal).toFixed(1);
-    };
+      return ((voteCount * 100) / voteTotal).toFixed(1)
+    }
     const onChange = (value) => {
-      const key = props.field;
+      const key = props.field
       emit('change', {
         key,
-        value,
-      });
-    };
+        value
+      })
+    }
     const handleSelectMoreChange = (data) => {
-      const { key, value } = data;
+      const { key, value } = data
       emit('change', {
         key,
-        value,
-      });
-    };
+        value
+      })
+    }
     return {
       myOptions,
       calcVotePercent,
       onChange,
-      handleSelectMoreChange,
-    };
+      handleSelectMoreChange
+    }
   },
   render() {
-    const { calcVotePercent, innerType, field, myOptions } = this;
-    const props = {
-      ...this.$props,
-      options: myOptions,
-      layout: 'vertical',
-      readonly: this.readonly,
-      name: field,
-    };
+    const { calcVotePercent, innerType } = this
+
     return (
-      <baseChoice
+      <BaseChoice
         uiTarget={innerType}
-        {...{ props: props }}
-        {...{
-          on: {
-            change: this.onChange,
-          },
-        }}
-        scopedSlots={{
+        layout={'vertical'}
+        name={this.field}
+        innerType={this.innerType}
+        value={this.value}
+        options={this.options}
+        readonly={this.readonly}
+        voteTotal={this.voteTotal}
+        maxNum={this.maxNum}
+        onChange={this.onChange}
+      >
+        {{
           vote: (scoped) => {
             return (
               <div class="vote-detail">
-                <Progress
+                <AnswerProcess
                   process-conf={{
-                    percent: `${calcVotePercent(
-                      scoped.option,
-                      scoped.voteTotal
-                    )}%`,
+                    percent: `${calcVotePercent(scoped.option, scoped.voteTotal)}%`
                   }}
                 />
                 <div class="vote-percent">{`${calcVotePercent(
                   scoped.option,
                   scoped.voteTotal
                 )}%`}</div>
-                <div class="vote-count">{`${
-                  scoped.option.voteCount || 0
-                }票`}</div>
+                <div class="vote-count">{`${scoped.option.voteCount || 0}票`}</div>
               </div>
-            );
-          },
-          selectMore: (scoped) => {
-            return (
-              <QuestionWithRule
-                showTitle={false}
-                moduleConfig={scoped.selectMoreConfig}
-                onChange={(e) => this.handleSelectMoreChange(e)}
-              ></QuestionWithRule>
-            );
-          },
+            )
+          }
         }}
-      ></baseChoice>
-    );
-  },
-});
+      </BaseChoice>
+    )
+  }
+})
diff --git a/web/src/materials/questions/widgets/VoteModule/meta.js b/web/src/materials/questions/widgets/VoteModule/meta.js
index 699a01f7..ca1e47d2 100644
--- a/web/src/materials/questions/widgets/VoteModule/meta.js
+++ b/web/src/materials/questions/widgets/VoteModule/meta.js
@@ -1,194 +1,70 @@
-import basicConfig from '../../common/config/basicConfig';
+import basicConfig from '@materials/questions/common/config/basicConfig'
 
 const meta = {
   title: '投票',
   type: 'vote',
   componentName: 'VoteModule',
   formConfig: [
-    // {
-    //   name: 'fieldId',
-    //   label: '题目ID',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'field',
-    //   tip: '请谨慎修改题目ID，并保证此ID在整个问卷中唯一',
-    //   relyField: 'questionIdCustomize',
-    //   noNeedRelyClean: true
-    // },
-    // {
-    //   name: 'questionLabel',
-    //   label: '题目标签',
-    //   type: 'Input',
-    //   placeholder: '',
-    //   key: 'label',
-    //   tip: '请谨慎修改题目标签，并保证此标签在整个问卷中唯一',
-    //   relyField: 'questionLabelCustomize',
-    //   noNeedRelyClean: true
-    // },
-    // {
-    //   name: 'titleOrigin',
-    //   label: '标题引用其他题目选项',
-    //   type: 'TitleOrigin',
-    //   options: [],
-    //   key: 'title'
-    // },
     basicConfig,
     {
       name: 'optionConfig',
-      label: '选项配置',
-      labelStyle: {
-        'font-weight': 'bold',
-      },
+      title: '选项配置',
       type: 'Customed',
       key: 'optionConfig',
       content: [
-        // {
-        //   label: '选项随机排序',
-        //   type: 'CheckBox',
-        //   key: 'randomSort',
-        //   direction: 'horizon',
-        //   value: false,
-        //   contentPosition: 'before',
-        //   contentClass: 'check-box-config'
-        // },
-        // {
-        //   label: '默认选中第一项',
-        //   type: 'CheckBox',
-        //   key: 'checked',
-        //   direction: 'horizon',
-        //   value: false,
-        //   contentPosition: 'before',
-        //   contentClass: 'check-box-config'
-        // },
         {
           label: '设置为多选题',
           type: 'CheckBox',
           key: 'innerType',
-          direction: 'horizon',
           value: false,
-          contentPosition: 'before',
-          inline: true,
           // 输入转换
           valueAdapter({ moduleConfig }) {
             if (moduleConfig.innerType === 'checkbox') {
-              return true;
+              return true
             } else {
-              return false;
+              return false
             }
           },
           // 输出转换
           setterAdapter({ value }) {
             return {
               key: 'innerType',
-              value: value ? 'checkbox' : 'radio',
-            };
-          },
+              value: value ? 'checkbox' : 'radio'
+            }
+          }
         },
-        // {
-        //   label: '展示选项余量',
-        //   type: 'CheckBox',
-        //   key: 'showLeftNum',
-        //   direction: 'horizon',
-        //   value: true,
-        //   include: ['appointment'],
-        //   contentPosition: 'before',
-        //   contentClass: 'check-box-config'
-        // },
-        // {
-        //   name: 'inputType',
-        //   label: '切换题型',
-        //   type: 'Radio',
-        //   key: 'selectType',
-        //   direction: 'horizon',
-        //   value: '',
-        //   options: [
-        //     {
-        //       label: '单选',
-        //       value: 'radio'
-        //     },
-        //     {
-        //       label: '多选',
-        //       value: 'checkbox'
-        //     }
-        //   ],
-        //   contentClass: 'radio-config'
-        // },
-        // {
-        //   label: '排列方式',
-        //   type: 'Radio',
-        //   key: 'sortWay',
-        //   direction: 'horizon',
-        //   value: '',
-        //   options: [
-        //     {
-        //       label: '竖排',
-        //       value: 'v'
-        //     },
-        //     {
-        //       label: '横排',
-        //       value: 'h'
-        //     }
-        //   ],
-        //   contentClass: 'radio-config'
-        // },
         {
           label: '至少选择数',
           type: 'InputNumber',
           key: 'minNum',
-          direction: 'horizon',
           value: '',
           min: 0,
           max: 'maxNum',
-          contentClass: 'input-number-config',
+          contentClass: 'input-number-config'
         },
         {
           label: '最多选择数',
           type: 'InputNumber',
           key: 'maxNum',
-          direction: 'horizon',
           value: '',
           min: 'minNum',
-          contentClass: 'input-number-config',
-        },
-      ],
-    },
-    // {
-    //   name: 'optionOrigin',
-    //   label: '选项引用其他题目选项',
-    //   type: 'Select',
-    //   options: [],
-    //   key: 'optionOrigin',
-    //   tip: '支持引用多选题、单选题、矩阵单选题'
-    // },
-    // {
-    //   name: 'originType',
-    //   label: '',
-    //   type: 'Select',
-    //   options: [
-    //     {
-    //       label: '选中项',
-    //       value: 'selected'
-    //     },
-    //     {
-    //       label: '未选中项',
-    //       value: 'noSelected'
-    //     }
-    //   ],
-    //   key: 'originType'
-    // },
+          contentClass: 'input-number-config'
+        }
+      ]
+    }
   ],
   editConfigure: {
     optionEdit: {
-      show: true,
+      show: true
     },
     optionEditBar: {
       show: true,
       configure: {
         showOthers: false,
-        showAdvancedConfig: true,
-      },
-    },
-  },
-};
+        showAdvancedConfig: true
+      }
+    }
+  }
+}
 
-export default meta;
+export default meta
diff --git a/web/src/materials/questions/widgets/VoteModule/style.scss b/web/src/materials/questions/widgets/VoteModule/style.scss
new file mode 100644
index 00000000..531148fb
--- /dev/null
+++ b/web/src/materials/questions/widgets/VoteModule/style.scss
@@ -0,0 +1,21 @@
+.vote-detail {
+  padding-top: 0.12rem;
+  align-items: center;
+  display: flex;
+  .process-outer {
+    flex: 1;
+  }
+  .vote-percent {
+    width: 0.86rem;
+    font-size: 0.24rem;
+    color: $font-color;
+    margin-left: 0.24rem;
+  }
+  .vote-count {
+    width: 0.8rem;
+    margin-left: 0.1rem;
+    text-align: right;
+    font-size: 0.24rem;
+    color: $font-color;
+  }
+}
diff --git a/web/src/materials/setters/constant.js b/web/src/materials/setters/constant.js
index e26ee302..016df4ba 100644
--- a/web/src/materials/setters/constant.js
+++ b/web/src/materials/setters/constant.js
@@ -1 +1 @@
-export const FORM_CHANGE_EVENT_KEY = 'form-change';
+export const FORM_CHANGE_EVENT_KEY = 'form-change'
diff --git a/web/src/materials/setters/setterLoader.js b/web/src/materials/setters/setterLoader.js
index 2f74e854..504b7fa5 100644
--- a/web/src/materials/setters/setterLoader.js
+++ b/web/src/materials/setters/setterLoader.js
@@ -1,10 +1,10 @@
-import ComponentLoader from '@/materials/utils/componentLoader';
+import ComponentLoader from '@/materials/utils/componentLoader'
 export class SetterLoader extends ComponentLoader {
   dynamicImport(path) {
-    return import(`@/materials/setters/widgets/${path}.vue`);
+    return import(`@/materials/setters/widgets/${path}.vue`)
   }
 }
 
-const setterLoader = new SetterLoader();
+const setterLoader = new SetterLoader()
 
-export default setterLoader;
+export default setterLoader
diff --git a/web/src/materials/setters/widgets/CheckBox.vue b/web/src/materials/setters/widgets/CheckBox.vue
index 5812628a..8d0e7ff1 100644
--- a/web/src/materials/setters/widgets/CheckBox.vue
+++ b/web/src/materials/setters/widgets/CheckBox.vue
@@ -8,23 +8,23 @@
   </el-checkbox>
 </template>
 <script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 export default {
   name: 'CheckBox',
   data() {
     return {
-      validValue: this.formConfig.value,
-    };
+      validValue: this.formConfig.value
+    }
   },
   props: {
     formConfig: {
       type: Object,
-      required: true,
+      required: true
     },
     moduleConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   computed: {
     checkBoxDis() {
@@ -33,14 +33,14 @@ export default {
         this.moduleConfig?.optionOrigin?.length > 0 &&
         this.moduleConfig?.extraOptions &&
         this.moduleConfig?.extraOptions.length === 0
-      );
+      )
     },
     optionOrigin() {
-      return this.moduleConfig.optionOrigin;
+      return this.moduleConfig.optionOrigin
     },
     extraOptionsLength() {
-      return this.moduleConfig?.extraOptions?.length || [];
-    },
+      return this.moduleConfig?.extraOptions?.length || []
+    }
   },
   watch: {
     optionOrigin(newVal) {
@@ -51,48 +51,44 @@ export default {
       ) {
         this.$emit(FORM_CHANGE_EVENT_KEY, {
           key: 'randomSort',
-          value: false,
-        });
-        this.validValue = false;
+          value: false
+        })
+        this.validValue = false
       }
     },
     extraOptionsLength(newVal) {
-      if (
-        this.formConfig.key === 'randomSort' &&
-        this.moduleConfig?.optionOrigin &&
-        newVal === 0
-      ) {
+      if (this.formConfig.key === 'randomSort' && this.moduleConfig?.optionOrigin && newVal === 0) {
         this.$emit(FORM_CHANGE_EVENT_KEY, {
           key: 'randomSort',
-          value: false,
-        });
-        this.validValue = false;
+          value: false
+        })
+        this.validValue = false
       }
     },
     'formConfig.value': {
       immediate: true,
       handler(newVal) {
         if (newVal === this.validValue) {
-          return;
+          return
         }
-        this.validValue = !!newVal;
-      },
-    },
+        this.validValue = !!newVal
+      }
+    }
   },
 
   methods: {
     changeData(value) {
-      const key = this.formConfig.key;
+      const key = this.formConfig.key
 
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value,
-      });
-    },
-  },
-};
+        value
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .inline {
   width: 140px;
 }
diff --git a/web/src/materials/setters/widgets/CheckboxGroup.vue b/web/src/materials/setters/widgets/CheckboxGroup.vue
index 3c680e4a..54beb0f9 100644
--- a/web/src/materials/setters/widgets/CheckboxGroup.vue
+++ b/web/src/materials/setters/widgets/CheckboxGroup.vue
@@ -1,66 +1,59 @@
 <template>
   <div class="checkbox-group">
-    <div
-      class="customed-checkbox"
-      v-for="item in this.formConfig.options"
-      :key="item.key"
-    >
+    <div class="customed-checkbox" v-for="item in this.formConfig.options" :key="item.key">
       <el-checkbox
         v-model="values[item.key]"
         :label="item.label"
         @change="onChange(item.key, $event)"
       >
       </el-checkbox>
-      <el-tooltip
-        v-if="item.tip"
-        class="tooltip"
-        effect="dark"
-        placement="right"
-      >
-        <div slot="content" v-plain-text="item.tip"></div>
-        <i class="el-icon-question icon-tip"></i>
+      <el-tooltip v-if="item.tip" class="tooltip" effect="dark" placement="right">
+        <template #content>
+          <div v-plain-text="item.tip"></div>
+        </template>
+        <i-ep-questionFilled v-if="item.tip" class="icon-tip" />
       </el-tooltip>
     </div>
   </div>
 </template>
 <script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 export default {
   name: 'CheckboxGroup',
   props: {
     formConfig: {
       type: Object,
-      default: () => ({}),
-    },
+      default: () => ({})
+    }
   },
   data() {
     return {
-      values: this.formConfig.value,
-    };
+      values: this.formConfig.value
+    }
   },
   watch: {
     'formConfig.value': {
       immediate: true,
       deep: true,
       handler(newVal) {
-        const keys = Object.keys(newVal);
+        const keys = Object.keys(newVal)
         for (const key of keys) {
           if (newVal[key] !== this.values[key]) {
-            this.$set(this.values, key, newVal[key]);
+            this.values[key] = newVal[key]
           }
         }
-      },
-    },
+      }
+    }
   },
   methods: {
     onChange(key, value) {
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value,
-      });
-    },
-  },
-};
+        value
+      })
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .customed-checkbox {
@@ -69,6 +62,7 @@ export default {
 }
 
 .icon-tip {
+  font-size: 13px;
   color: #606266;
 }
 </style>
diff --git a/web/src/materials/setters/widgets/ColorInput.vue b/web/src/materials/setters/widgets/ColorInput.vue
index 247d7bdc..0495409a 100644
--- a/web/src/materials/setters/widgets/ColorInput.vue
+++ b/web/src/materials/setters/widgets/ColorInput.vue
@@ -6,28 +6,28 @@
       :maxLength="formConfig.maxlength"
       @change="changeData"
     >
-      <template slot="prepend">#</template>
+      <template #prepend>#</template>
     </el-input>
   </el-form-item>
 </template>
 <script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 export default {
   name: 'ColorInput',
   props: {
     formConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   methods: {
     changeData(value) {
-      const key = this.formConfig.key;
+      const key = this.formConfig.key
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value,
-      });
-    },
-  },
-};
+        value
+      })
+    }
+  }
+}
 </script>
diff --git a/web/src/materials/setters/widgets/ColorPicker.vue b/web/src/materials/setters/widgets/ColorPicker.vue
index f8fae036..406a4332 100644
--- a/web/src/materials/setters/widgets/ColorPicker.vue
+++ b/web/src/materials/setters/widgets/ColorPicker.vue
@@ -1,31 +1,37 @@
 <template>
   <el-form-item class="pick-wrap">
-    <el-color-picker :value="formConfig.value" @change="changeData"></el-color-picker>
+    <el-color-picker :modelValue="formConfig.value" @change="changeData"></el-color-picker>
   </el-form-item>
 </template>
 <script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 export default {
   name: 'ColorPicker',
   props: {
     formConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   methods: {
     changeData(value) {
-      const key = this.formConfig.key;
+      const key = this.formConfig.key
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value,
-      });
-    },
-  },
-};
+        value
+      })
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
-.pick-wrap{
-  text-align: end;
+.pick-wrap {
+  width: 100%;
+
+  :deep(.el-form-item__content) {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 </style>
diff --git a/web/src/materials/setters/widgets/CustomedSwitch.vue b/web/src/materials/setters/widgets/CustomedSwitch.vue
index eb8b9f69..bb4ad191 100644
--- a/web/src/materials/setters/widgets/CustomedSwitch.vue
+++ b/web/src/materials/setters/widgets/CustomedSwitch.vue
@@ -1,24 +1,26 @@
 <template>
-  <el-switch :value="!!formConfig.value" @change="changeData" />
+  <el-switch v-model="newValue" @change="changeData" />
 </template>
-<script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
-export default {
-  name: 'CustomedSwitch',
-  props: {
-    formConfig: {
-      type: Object,
-      required: true,
-    },
-  },
-  methods: {
-    changeData(value) {
-      const key = this.formConfig.key;
-      this.$emit(FORM_CHANGE_EVENT_KEY, {
-        key,
-        value,
-      });
-    },
-  },
-};
+<script setup>
+import { ref } from 'vue'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
+const props = defineProps({
+  formConfig: {
+    type: Object,
+    required: true
+  }
+})
+const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
+
+const newValue = ref(props.formConfig.value)
+
+const changeData = (value) => {
+  const key = props.formConfig.key
+
+  emit(FORM_CHANGE_EVENT_KEY, {
+    key,
+    value
+  })
+}
 </script>
diff --git a/web/src/materials/setters/widgets/FormItem.vue b/web/src/materials/setters/widgets/FormItem.vue
index 5f27d5ff..e1b44e05 100644
--- a/web/src/materials/setters/widgets/FormItem.vue
+++ b/web/src/materials/setters/widgets/FormItem.vue
@@ -1,28 +1,19 @@
 <template>
-  <el-form-item
-    :class="{
-      horizon: formConfig.direction === 'horizon',
-      space_between: formConfig.direction === 'space_between',
-    }"
-  >
-    <slot name="before"></slot>
-    <div
-      v-if="formConfig.label"
-      slot="label"
-      class="customed-label"
-      :style="formConfig.labelStyle"
-    >
-      <span class="label" v-plain-text="formConfig.label"></span>
-      <el-tooltip
-        v-if="formConfig.tip"
-        class="tooltip"
-        effect="dark"
-        :placement="formConfig.placement || 'right'"
-      >
-        <div slot="content" v-plain-text="formConfig.tip"></div>
-        <i class="el-icon-question"></i>
-      </el-tooltip>
-    </div>
+  <el-form-item>
+    <template #label v-if="formConfig.label">
+      <div v-if="formConfig.label" class="item-label" :style="formConfig.labelStyle">
+        <span class="label" v-plain-text="formConfig.label"><i-ep-questionFilled /></span>
+
+        <el-tooltip
+          v-if="formConfig.tip"
+          class="tooltip"
+          :content="formConfig.tip"
+          :placement="formConfig.placement || 'right'"
+        >
+          <i-ep-questionFilled class="icon-tip" />
+        </el-tooltip>
+      </div>
+    </template>
     <slot></slot>
   </el-form-item>
 </template>
@@ -33,28 +24,22 @@ export default {
   props: {
     formConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   data() {
-    return {};
-  },
-};
-</script>
-<style lang="scss" rel="stylesheet/scss" scoped>
-.horizon {
-  display: flex;
-  flex-direction: row;
+    return {}
+  }
 }
-.space_between{
+</script>
+<style lang="scss" scoped>
+.item-label {
+  align-items: center;
   display: flex;
-  justify-content: space-between;
-  
-  ::v-deep> label{
-    flex: 1;
-  }
-  ::v-deep> div{
-    flex: 1;
-  }
+}
+
+.icon-tip {
+  font-size: 13px;
+  color: #606266;
 }
 </style>
diff --git a/web/src/materials/setters/widgets/FormdataBackFill.vue b/web/src/materials/setters/widgets/FormdataBackFill.vue
index a3236219..98ce77d2 100644
--- a/web/src/materials/setters/widgets/FormdataBackFill.vue
+++ b/web/src/materials/setters/widgets/FormdataBackFill.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row class="row">
-      <el-select :value="backfillSelect" @change="onSelectChange">
+      <el-select :modelValue="backfillSelect" @change="onSelectChange">
         <el-option
           v-for="item in options"
           :label="`${item.label}`"
@@ -20,78 +20,78 @@
   </div>
 </template>
 <script>
-import { cleanRichText } from '@/common/xss';
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
-const formdataBackfillKey = 'baseConf.formdataBackfill';
-const formdataBackfillHourKey = 'baseConf.formdataBackfillHour';
+import { cleanRichText } from '@/common/xss'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+const formdataBackfillKey = 'baseConf.formdataBackfill'
+const formdataBackfillHourKey = 'baseConf.formdataBackfillHour'
 
 export default {
-  name: 'FormdataBackFill',
+  name: 'FormDataBackFill',
   data() {
     return {
       backfillSelect: this.formConfig.value[formdataBackfillKey],
-      hourSwitch: !!this.formConfig.value[formdataBackfillHourKey],
-    };
+      hourSwitch: !!this.formConfig.value[formdataBackfillHourKey]
+    }
   },
   props: {
     formConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   watch: {
     'formConfig.value': {
       deep: true,
       handler(newVal) {
-        const formdataBackfill = newVal[formdataBackfillKey];
-        const formdataBackfillHour = !!newVal[formdataBackfillHourKey];
+        const formdataBackfill = newVal[formdataBackfillKey]
+        const formdataBackfillHour = !!newVal[formdataBackfillHourKey]
         if (formdataBackfill !== this.backfillSelect) {
-          this.backfillSelect = formdataBackfill;
+          this.backfillSelect = formdataBackfill
         }
         if (formdataBackfillHour !== this.hourSwitch) {
-          this.hourSwitch = formdataBackfillHour;
+          this.hourSwitch = formdataBackfillHour
         }
-      },
-    },
+      }
+    }
   },
   computed: {
     showFormdataBackfillHour() {
       if (this.backfillSelect === 'notallow') {
-        return false;
+        return false
       }
-      return true;
+      return true
     },
     options() {
-      let options = [];
+      let options = []
       if (Array.isArray(this.formConfig?.options)) {
-        options = this.formConfig?.options;
+        options = this.formConfig?.options
       }
       return options.map((item) => {
-        item.label = cleanRichText(item.label);
-        return item;
-      });
-    },
+        item.label = cleanRichText(item.label)
+        return item
+      })
+    }
   },
   methods: {
     onSelectChange(newVal) {
-      this.changeData({ key: formdataBackfillKey, value: newVal });
+      this.changeData({ key: formdataBackfillKey, value: newVal })
     },
     onSwitchChange(newVal) {
       this.changeData({
         key: formdataBackfillHourKey,
-        value: newVal ? 24 : null,
-      });
+        value: newVal ? 24 : null
+      })
     },
     changeData({ key, value }) {
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value,
-      });
-    },
-  },
-};
+        value
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .row {
   margin-bottom: 20px;
 }
diff --git a/web/src/materials/setters/widgets/FreqAndNumberLimit.vue b/web/src/materials/setters/widgets/FreqAndNumberLimit.vue
index bc3e50e1..719e9c27 100644
--- a/web/src/materials/setters/widgets/FreqAndNumberLimit.vue
+++ b/web/src/materials/setters/widgets/FreqAndNumberLimit.vue
@@ -24,39 +24,37 @@
   </el-form-item>
 </template>
 <script>
-import { get as _get } from 'lodash-es';
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { get as _get } from 'lodash-es'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 export default {
   name: 'FreqAndNumberLimit',
   props: {
     formConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   computed: {
     isShowNumberFn() {
-      return !!this.formConfig.value[this.formConfig.selectKey];
-    },
+      return !!this.formConfig.value[this.formConfig.selectKey]
+    }
   },
   data() {
     return {
-      numberValue: Number(
-        _get(this.formConfig.value, this.formConfig.numberKey, 0)
-      ),
-    };
+      numberValue: Number(_get(this.formConfig.value, this.formConfig.numberKey, 0))
+    }
   },
   methods: {
     onChange(e, key) {
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value: e,
-      });
-    },
-  },
-};
+        value: e
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss">
+<style lang="scss" scoped>
 .option-select {
   width: 130px !important;
 }
diff --git a/web/src/materials/setters/widgets/InputNumber.vue b/web/src/materials/setters/widgets/InputNumber.vue
index 94ee0357..2129b1b3 100644
--- a/web/src/materials/setters/widgets/InputNumber.vue
+++ b/web/src/materials/setters/widgets/InputNumber.vue
@@ -1,107 +1,103 @@
 <template>
   <el-input-number
     :placeholder="formConfig.placeholder"
-    :value="numberValue"
+    :modelValue="numberValue"
     @change="changeData"
     :min="min"
     :max="max"
   />
 </template>
 <script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
 export default {
   name: 'InputNumber',
   props: {
     formConfig: {
       type: Object,
-      required: true,
+      required: true
     },
     moduleConfig: {
       type: Object,
-      required: true,
-    },
-    questionDataList: {
-      type: Array,
-    },
+      required: true
+    }
   },
   data() {
     return {
-      numberValue: 0,
-    };
+      numberValue: 0
+    }
   },
   watch: {
     'formConfig.value': {
       immediate: true,
       handler(newVal) {
-        const val = parseInt(newVal || '0');
+        const val = parseInt(newVal || '0')
         if (val === this.numberValue) {
-          return;
+          return
         }
-        this.numberValue = val;
-      },
-    },
+        this.numberValue = val
+      }
+    }
   },
   computed: {
     min() {
-      const { min } = this.formConfig;
-      const { type } = this.moduleConfig;
+      const { min } = this.formConfig
+      const { type } = this.moduleConfig
       if (min !== undefined) {
         if (typeof min === 'string') {
           return this.judgeType(type)
             ? Number(this.moduleConfig[min])
-            : Number(Number(this.moduleConfig[min]) + 1);
+            : Number(Number(this.moduleConfig[min]) + 1)
         } else if (typeof this.formConfig.min === 'function') {
-          return min(this.moduleConfig);
+          return min(this.moduleConfig)
         } else {
-          return Number(min);
+          return Number(min)
         }
       }
-      return -Infinity;
+      return -Infinity
     },
     max() {
-      const { type } = this.moduleConfig;
-      const { max, min } = this.formConfig;
+      const { type } = this.moduleConfig
+      const { max, min } = this.formConfig
 
       if (max) {
         if (typeof max === 'string') {
-          return this.judgeType(type)
-            ? Number(this.moduleConfig[max])
-            : this.moduleConfig[max] - 1;
+          return this.judgeType(type) ? Number(this.moduleConfig[max]) : this.moduleConfig[max] - 1
         } else if (typeof max === 'function') {
-          return max(this.moduleConfig);
+          return max(this.moduleConfig)
         }
-        return Number(max);
-      } else if (
-        min !== undefined &&
-        Array.isArray(this.moduleConfig?.options)
-      ) {
+        return Number(max)
+      } else if (min !== undefined && Array.isArray(this.moduleConfig?.options)) {
         // inputNumber 配置了最小值，没有配置最大值（checkbox, vote, matrix-checkbox, 最大选择数 ）
-        return this.moduleConfig.options.length;
+        return this.moduleConfig.options.length
       } else {
-        return Infinity;
+        return Infinity
       }
-    },
+    }
   },
   methods: {
     judgeType(type) {
-      return ['checkbox', 'vote'].includes(type);
+      return ['checkbox', 'vote'].includes(type)
     },
     changeData(value) {
-      const reg = /^(-)?[0-9]+$/;
+      const reg = /^(-)?[0-9]+$/
       if (!reg.test(value)) {
-        this.$message.warning('只能输入整数');
+        ElMessage.warning('只能输入整数')
       }
-      this.numberValue = value;
-      const key = this.formConfig.key;
+      this.numberValue = value
+      const key = this.formConfig.key
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value,
-      });
-    },
-  },
-};
+        value
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .star-form.star-form_horizon {
   .star-form-label + .el-form-item {
     margin-left: 0px;
diff --git a/web/src/materials/setters/widgets/InputPercent.vue b/web/src/materials/setters/widgets/InputPercent.vue
index 84ccbb3d..a3270fc7 100644
--- a/web/src/materials/setters/widgets/InputPercent.vue
+++ b/web/src/materials/setters/widgets/InputPercent.vue
@@ -8,72 +8,71 @@
     :max="max"
     type="number"
   >
-    <template slot="append">%</template>
+    <template #append>%</template>
   </el-input>
 </template>
 <script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 export default {
   name: 'InputPercent',
   props: {
     formConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   data() {
     return {
-      value: '',
-    };
+      value: ''
+    }
   },
   watch: {
     'formConfig.value': {
       immediate: true,
       handler(newVal) {
-        let val = parseFloat(newVal);
+        let val = parseFloat(newVal)
         if (val === this.value) {
-          return;
+          return
         }
-        this.value = val;
-      },
-    },
+        this.value = val
+      }
+    }
   },
   computed: {
     max() {
-      let max = parseFloat(this.formConfig.max);
+      let max = parseFloat(this.formConfig.max)
       if (isNaN(max)) {
-        max = 100;
+        max = 100
       }
-      return max;
+      return max
     },
     min() {
-      let min = parseFloat(this.formConfig.min);
+      let min = parseFloat(this.formConfig.min)
       if (isNaN(min)) {
-        min = 0;
+        min = 0
       }
-      return min;
-    },
+      return min
+    }
   },
   methods: {
     changeData() {
-      const key = this.formConfig.key;
-      let value = parseFloat(this.value);
-      value = Math.max(value, this.min);
-      value = Math.min(value, this.max);
+      const key = this.formConfig.key
+      let value = parseFloat(this.value)
+      value = Math.max(value, this.min)
+      value = Math.min(value, this.max)
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value: `${value}%`,
-      });
-    },
-  },
-};
+        value: `${value}%`
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
-.custom-input{
-  ::v-deep .el-input__inner{
+<style lang="scss" scoped>
+.custom-input {
+  :deep(.el-input__inner) {
     width: 100px;
     padding-right: 0px;
   }
 }
-
 </style>
diff --git a/web/src/materials/setters/widgets/Input.vue b/web/src/materials/setters/widgets/InputSetter.vue
similarity index 53%
rename from web/src/materials/setters/widgets/Input.vue
rename to web/src/materials/setters/widgets/InputSetter.vue
index d37fc22e..283d9626 100644
--- a/web/src/materials/setters/widgets/Input.vue
+++ b/web/src/materials/setters/widgets/InputSetter.vue
@@ -1,58 +1,54 @@
 <template>
-  <el-input
-    :placeholder="formConfig.placeholder"
-    v-model="inputData"
-    @blur="changeData"
-  ></el-input>
+  <el-input :placeholder="formConfig.placeholder" v-model="inputData" @blur="changeData"></el-input>
 </template>
 <script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
 export default {
-  name: 'Input',
+  name: 'InputSetter',
   props: {
     formConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   data() {
     return {
-      inputData: this.formConfig.value || '',
-    };
+      inputData: this.formConfig.value || ''
+    }
   },
   watch: {
     'formConfig.value': {
       handler(newVal) {
         if (newVal === this.inputData) {
-          return;
+          return
         }
-        this.inputData = newVal;
-      },
-    },
+        this.inputData = newVal
+      }
+    }
   },
   methods: {
     saveData(val) {
-      this.inputData = val;
+      this.inputData = val
     },
     changeData: function () {
-      let key = this.formConfig.key;
+      let key = this.formConfig.key
       if (this.formConfig.validate) {
-        const validateResult = this.formConfig.validate(this.inputData);
+        const validateResult = this.formConfig.validate(this.inputData)
         if (!validateResult) {
-          return false;
+          return false
         }
       }
-      const preValue = this.formConfig.value || '';
+      const preValue = this.formConfig.value || ''
       if (this.inputData === preValue) {
-        return false;
+        return false
       }
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value: this.inputData,
-      });
-    },
-  },
-};
+        value: this.inputData
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/web/src/materials/setters/widgets/MultiInput.vue b/web/src/materials/setters/widgets/MultiInput.vue
index 35082695..41c3feff 100644
--- a/web/src/materials/setters/widgets/MultiInput.vue
+++ b/web/src/materials/setters/widgets/MultiInput.vue
@@ -3,14 +3,8 @@
     <el-form-item v-for="item in formConfig.content" :key="item.key">
       <label class="multiline-label">
         {{ item.label }}
-        <el-tooltip
-          v-if="item.tip"
-          class="item"
-          effect="dark"
-          :content="item.tip"
-          placement="top"
-        >
-          <i class="el-icon-question"></i>
+        <el-tooltip v-if="item.tip" class="item" effect="dark" :content="item.tip" placement="top">
+          <i-ep-questionFilled />
         </el-tooltip>
       </label>
       <el-input
@@ -23,39 +17,39 @@
   </div>
 </template>
 <script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 export default {
   name: 'MultiInput',
   props: {
     formConfig: {
       type: Object,
-      required: true,
+      required: true
     },
     moduleConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   methods: {
     changeData(key, value) {
       if (this.formConfig.key) {
         this.$emit(FORM_CHANGE_EVENT_KEY, {
           key: this.formConfig.key + '.' + key,
-          value,
-        });
+          value
+        })
       } else if (this.formConfig.keys) {
         this.$emit(FORM_CHANGE_EVENT_KEY, {
           key,
-          value,
-        });
+          value
+        })
       } else {
         // todo
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .star-question-multiline {
   .el-form-item__content {
     display: flex;
diff --git a/web/src/materials/setters/widgets/MultiSelect.vue b/web/src/materials/setters/widgets/MultiSelect.vue
index 0acbe22a..8a9d6e53 100644
--- a/web/src/materials/setters/widgets/MultiSelect.vue
+++ b/web/src/materials/setters/widgets/MultiSelect.vue
@@ -18,44 +18,44 @@
 </template>
 
 <script>
-import { cleanRichText } from '@/common/xss';
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { cleanRichText } from '@/common/xss'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
 export default {
-  name: 'Select',
+  name: 'SelectSetter',
   props: {
     formConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   data() {
-    return {};
+    return {}
   },
   computed: {
     options() {
-      let options = [];
+      let options = []
       if (Array.isArray(this.formConfig?.options)) {
-        options = this.formConfig?.options;
+        options = this.formConfig?.options
       }
       return options.map((item) => {
-        item.label = cleanRichText(item.label);
-        return item;
-      });
-    },
+        item.label = cleanRichText(item.label)
+        return item
+      })
+    }
   },
   methods: {
     changeData(value) {
-      const key = this.formConfig.key;
+      const key = this.formConfig.key
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value,
-      });
-    },
-  },
-};
+        value
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .select-wrapper {
   .el-select-dropdown__item {
     font-size: 12px;
diff --git a/web/src/materials/setters/widgets/QuestionTime.vue b/web/src/materials/setters/widgets/QuestionTime.vue
index 748ab6c3..f2786b57 100644
--- a/web/src/materials/setters/widgets/QuestionTime.vue
+++ b/web/src/materials/setters/widgets/QuestionTime.vue
@@ -4,7 +4,7 @@
       v-model="begTime"
       type="datetime"
       placeholder="开始日期"
-      format="yyyy-MM-dd HH:mm:ss"
+      format="YYYY-MM-DD HH:mm:ss"
       @change="changeData(formConfig.keys[0], $event)"
     >
     </el-date-picker>
@@ -13,67 +13,69 @@
       v-model="endTime"
       type="datetime"
       placeholder="结束日期"
-      format="yyyy-MM-dd HH:mm:ss"
+      format="YYYY-MM-DD HH:mm:ss"
       @change="changeData(formConfig.keys[1], $event)"
     >
     </el-date-picker>
   </div>
 </template>
 <script>
-// 要注意，element的format和moment的format的D是不同的
-import moment from 'moment';
+// 要注意，element的format和moment的format的是不同的
+import moment from 'moment'
 // 引入中文
-import 'moment/locale/zh-cn';
+import 'moment/locale/zh-cn'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 // 设置中文
-moment.locale('zh-cn');
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+moment.locale('zh-cn')
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 export default {
   name: 'QuestionTime',
   data() {
-    const defaultBeginTime = new Date();
-    const defaultEndTime = moment(defaultBeginTime).add(10, 'year').toDate();
-    const format = 'yyyy-MM-DD HH:mm:ss';
+    const defaultBeginTime = new Date()
+    const defaultEndTime = moment(defaultBeginTime).add(10, 'year').toDate()
+    const format = 'yyyy-MM-DD HH:mm:ss'
     return {
       begTime: defaultBeginTime,
-      endTime: defaultEndTime,
+      endTime: new Date(defaultEndTime),
       format,
+      zhCn,
       begTimeStr: moment(defaultBeginTime).format(format),
-      endTimeStr: moment(defaultEndTime).format(format),
-    };
+      endTimeStr: moment(defaultEndTime).format(format)
+    }
   },
   props: {
     formConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   watch: {
     'formConfig.value': {
       handler([begTime, endTime]) {
-        if (begTime !== this.begTimeStr) {
-          this.begTimeStr = begTime;
-          this.begTime = new Date(begTime);
+        if (!!begTime && begTime !== this.begTimeStr) {
+          this.begTimeStr = begTime
+          this.begTime = new Date(begTime)
         }
-        if (endTime !== this.endTimeStr) {
-          this.endTimeStr = endTime;
-          this.endTime = new Date(endTime);
+        if (!!endTime && endTime !== this.endTimeStr) {
+          this.endTimeStr = endTime
+          this.endTime = new Date(endTime)
         }
       },
       immediate: true,
-      deep: true,
-    },
+      deep: true
+    }
   },
   methods: {
     async changeData(key, value) {
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value: moment(value).format(this.format),
-      });
-    },
-  },
-};
+        value: moment(value).format(this.format)
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .custom-time-range {
   display: flex;
 
diff --git a/web/src/materials/setters/widgets/QuestionTimeHour.vue b/web/src/materials/setters/widgets/QuestionTimeHour.vue
index 5f8ed325..b4f1053a 100644
--- a/web/src/materials/setters/widgets/QuestionTimeHour.vue
+++ b/web/src/materials/setters/widgets/QuestionTimeHour.vue
@@ -13,67 +13,64 @@
   </el-time-picker>
 </template>
 <script>
-import moment from 'moment';
+import moment from 'moment'
 // 引入中文
-import 'moment/locale/zh-cn';
+import 'moment/locale/zh-cn'
 // 设置中文
-moment.locale('zh-cn');
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+moment.locale('zh-cn')
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
 export default {
   name: 'QuestionTimeHour',
   props: {
     formConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   data() {
     return {
       value: [],
-      timeValue: [],
-    };
+      timeValue: []
+    }
   },
   watch: {
     'formConfig.value': {
       handler([answerBeginTime = '00:00:00', answerEndTime = '23:59:59']) {
-        if (
-          answerBeginTime !== this.timeValue[0] ||
-          answerEndTime !== this.timeValue[1]
-        ) {
-          this.timeValue = [answerBeginTime, answerEndTime];
+        if (answerBeginTime !== this.timeValue[0] || answerEndTime !== this.timeValue[1]) {
+          this.timeValue = [answerBeginTime, answerEndTime]
 
-          const ymd = '2023-01-01';
-          const time = [];
-          time.push(`${ymd} ${answerBeginTime}`);
-          time.push(`${ymd} ${answerEndTime}`);
-          this.value = time;
+          const ymd = '2023-01-01'
+          const time = []
+          time.push(`${ymd} ${answerBeginTime}`)
+          time.push(`${ymd} ${answerEndTime}`)
+          this.value = time
         }
       },
       immediate: true,
-      deep: true,
-    },
+      deep: true
+    }
   },
   methods: {
     onTimeChange(data) {
       if (!data) {
-        return;
+        return
       }
-      this.timeValue = data.map((item) => moment(item).format('HH:mm:ss'));
+      this.timeValue = data.map((item) => moment(item).format('HH:mm:ss'))
       this.timeValue.forEach((item, i) => {
-        this.changeData(this.formConfig.keys[i], item);
-      });
+        this.changeData(this.formConfig.keys[i], item)
+      })
     },
     changeData(key, value) {
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value,
-      });
-    },
-  },
-};
+        value
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .star-question-begAndEndHour {
   display: flex;
 
diff --git a/web/src/materials/setters/widgets/RadioGroup.vue b/web/src/materials/setters/widgets/RadioGroup.vue
index e8ec1345..d6481070 100644
--- a/web/src/materials/setters/widgets/RadioGroup.vue
+++ b/web/src/materials/setters/widgets/RadioGroup.vue
@@ -1,81 +1,72 @@
 <template>
-  <el-radio-group
-    v-model="validValue"
-    @change="changeData"
-    :disabled="formConfig.disabled"
-  >
-    <el-radio
-      v-for="item in options"
-      :key="item.value"
-      :label="item.value"
-      class="customed-radio"
-    >
+  <el-radio-group v-model="validValue" @change="changeData" :disabled="formConfig.disabled">
+    <el-radio v-for="item in options" :key="item.value" :value="item.value" class="customed-radio">
       <el-tooltip v-if="item.tip" class="item right" effect="dark">
-        <div slot="content" v-html="item.tip"></div>
-        <span>{{ item.label }} <i class="el-icon-question"></i></span>
+        <template #content>
+          <div v-html="item.tip"></div>
+        </template>
+        <span>{{ item.label }} <i-ep-questionFilled /></span>
       </el-tooltip>
-      <div v-else v-safe-html="item.label"></div>
+      <div v-else v-html="item.label"></div>
     </el-radio>
   </el-radio-group>
 </template>
 <script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 
 export default {
   name: 'RadioGroup',
   computed: {
     options() {
-      let options = [];
+      let options = []
       if (Array.isArray(this.formConfig?.options)) {
-        options = this.formConfig?.options;
+        options = this.formConfig?.options
       }
       return options.map((item) => {
-        return item;
-      });
-    },
+        return item
+      })
+    }
   },
   data() {
-    let value;
+    let value
     if (this.formConfig.value === undefined || this.formConfig.value === null) {
-      value = this.formConfig.defaultValue;
+      value = this.formConfig.defaultValue
     } else {
-      value = this.formConfig.value;
+      value = this.formConfig.value
     }
     return {
       validValue: value,
       noMargin: this.formConfig.noMargin,
-      isActive: {},
-    };
+      isActive: {}
+    }
   },
   props: {
     formConfig: {
-      type: Object,
-    },
+      type: Object
+    }
   },
   watch: {
     formConfig: {
       handler(val) {
         this.validValue =
-          val.value === undefined || val.value === null
-            ? val.defaultValue
-            : val.value;
+          val.value === undefined || val.value === null ? val.defaultValue : val.value
       },
       immediate: true,
-      deep: true,
-    },
+      deep: true
+    }
   },
   methods: {
     changeData(value) {
-      const key = this.formConfig.key;
+      const key = this.formConfig.key
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value,
-      });
-    },
-  },
-};
+        value
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .customed-radio {
   display: flex;
   margin-bottom: 10px;
diff --git a/web/src/materials/setters/widgets/Radio.vue b/web/src/materials/setters/widgets/RadioSetter.vue
similarity index 64%
rename from web/src/materials/setters/widgets/Radio.vue
rename to web/src/materials/setters/widgets/RadioSetter.vue
index 40426b0e..934dbf35 100644
--- a/web/src/materials/setters/widgets/Radio.vue
+++ b/web/src/materials/setters/widgets/RadioSetter.vue
@@ -6,25 +6,24 @@
     popper-class="option-list-width"
     :disabled="formConfig.disabled"
   >
-    <el-radio v-for="item in options" :key="item.value" :label="item.value">
+    <el-radio v-for="item in options" :key="item.value" :value="item.value">
       <el-tooltip
         v-if="item.tip"
         class="item right"
         effect="dark"
         :placement="setTipPosition(item)"
       >
-        <div slot="content" v-html="item.tip"></div>
-        <span>{{ item.label }} <i class="el-icon-question"></i></span>
+        <template #content>
+          <div v-html="item.tip"></div>
+        </template>
+        <span>{{ item.label }} <i-ep-questionFilled /></span>
       </el-tooltip>
       <template v-else-if="item.labelType === 'array'">
         <span
           class="span"
           v-for="(label, index) in item.label"
           :key="index"
-          :class="[
-            item.labelClasses && item.labelClasses[index],
-            item.labelClass,
-          ]"
+          :class="[item.labelClasses && item.labelClasses[index], item.labelClass]"
           >{{ label }}</span
         >
       </template>
@@ -33,69 +32,67 @@
   </el-radio-group>
 </template>
 <script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 const tipPosition = {
-  前置限制条件: 'top',
-};
+  前置限制条件: 'top'
+}
 
 export default {
-  name: 'Radio',
+  name: 'RadioSetter',
   computed: {
     options() {
-      let options = [];
+      let options = []
       if (Array.isArray(this.formConfig?.options)) {
-        options = this.formConfig?.options;
+        options = this.formConfig?.options
       }
       return options.map((item) => {
-        return item;
-      });
-    },
+        return item
+      })
+    }
   },
   data() {
-    let value;
+    let value
     if (this.formConfig.value === undefined || this.formConfig.value === null) {
-      value = this.formConfig.defaultValue;
+      value = this.formConfig.defaultValue
     } else {
-      value = this.formConfig.value;
+      value = this.formConfig.value
     }
     return {
       validValue: value,
       noMargin: this.formConfig.noMargin,
-      isActive: {},
-    };
+      isActive: {}
+    }
   },
   props: {
     formConfig: {
-      type: Object,
-    },
+      type: Object
+    }
   },
   watch: {
     formConfig: {
       handler(val) {
         this.validValue =
-          val.value === undefined || val.value === null
-            ? val.defaultValue
-            : val.value;
+          val.value === undefined || val.value === null ? val.defaultValue : val.value
       },
       immediate: true,
-      deep: true,
-    },
+      deep: true
+    }
   },
   methods: {
     changeData(value) {
-      const key = this.formConfig.key;
+      const key = this.formConfig.key
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value,
-      });
+        value
+      })
     },
     setTipPosition(item) {
-      return tipPosition[item.label] || 'right';
-    },
-  },
-};
+      return tipPosition[item.label] || 'right'
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .star-radio-wrapper {
   margin-left: 28px;
   height: 45px;
diff --git a/web/src/materials/setters/widgets/Range.vue b/web/src/materials/setters/widgets/RangeSetter.vue
similarity index 58%
rename from web/src/materials/setters/widgets/Range.vue
rename to web/src/materials/setters/widgets/RangeSetter.vue
index 98c20fd1..eaa87896 100644
--- a/web/src/materials/setters/widgets/Range.vue
+++ b/web/src/materials/setters/widgets/RangeSetter.vue
@@ -1,78 +1,80 @@
 <template>
   <div class="range-wrapper">
-    <el-input-number :value="minValue" @change="changeDataMin" :min="0" />
+    <el-input-number :modelValue="minValue" @change="changeDataMin" :min="0" />
     <span class="split-text">至</span>
-    <el-input-number :value="maxValue" @change="changeDataMax" :min="0" />
+    <el-input-number :modelValue="maxValue" @change="changeDataMax" :min="0" />
   </div>
 </template>
 <script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
 export default {
-  name: 'Range',
+  name: 'RangeSetter',
   props: {
     formConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   data() {
-    return {};
+    return {}
   },
   computed: {
     minValue() {
       if (this.formConfig.key === 'textRange') {
-        return parseInt(this.formConfig?.value?.min?.value);
+        return parseInt(this.formConfig?.value?.min?.value)
       } else {
-        return this.formConfig?.value?.min?.value || 1;
+        return this.formConfig?.value?.min?.value || 1
       }
     },
     maxValue() {
       if (this.formConfig.key === 'textRange') {
-        return parseInt(this.formConfig?.value?.max?.value);
+        return parseInt(this.formConfig?.value?.max?.value)
       } else {
-        return this.formConfig?.value?.max?.value || 1;
+        return this.formConfig?.value?.max?.value || 1
       }
-    },
+    }
   },
   methods: {
     changeDataMin(value) {
-      const key = this.formConfig.key;
+      const key = this.formConfig.key
       if (value > this.formConfig.value.max.value) {
-        this.$message({
+        ElMessage({
           type: 'info',
-          message: '最小值大于最大值，请重新输入！',
-        });
+          message: '最小值大于最大值，请重新输入！'
+        })
       } else {
         this.$emit(FORM_CHANGE_EVENT_KEY, {
           key: key + '.min.value',
-          value,
-        });
+          value
+        })
       }
     },
     changeDataMax(value) {
-      const key = this.formConfig.key;
+      const key = this.formConfig.key
       if (value < this.formConfig.value.min.value) {
-        this.$message({
+        ElMessage({
           type: 'info',
-          message: '最大值小于最小值，请重新输入！',
-        });
+          message: '最大值小于最小值，请重新输入！'
+        })
       } else {
         this.$emit(FORM_CHANGE_EVENT_KEY, {
           key: key + '.max.value',
-          value,
-        });
+          value
+        })
       }
-    },
-  },
-};
-</script>
-<style lang="scss" rel="stylesheet/scss" scoped>
-.range-wrapper {
-  ::v-deep .el-form-item {
-    .el-form-item__content .el-input-number {
-      width: 40%;
     }
   }
+}
+</script>
+<style lang="scss" scoped>
+.range-wrapper {
+  .el-input-number {
+    width: 40%;
+  }
 
   .split-text {
     font-size: 14px;
diff --git a/web/src/materials/setters/widgets/RichText.vue b/web/src/materials/setters/widgets/RichText.vue
index 303c5929..959da520 100644
--- a/web/src/materials/setters/widgets/RichText.vue
+++ b/web/src/materials/setters/widgets/RichText.vue
@@ -1,124 +1,49 @@
 <template>
-  <div class="editor-wrapper">
-    <div class="toolbar" ref="toolbar"></div>
-    <div class="editor" ref="editor"></div>
-  </div>
+  <RichEditor
+    :modelValue="formConfig.value"
+    @change="onChange"
+    :staticToolBar="true"
+    @input="onInput"
+  />
 </template>
 
 <script>
-import { createEditor, createToolbar } from '@wangeditor/editor';
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+import RichEditor from '@/common/Editor/RichEditor.vue'
 
 export default {
   name: 'RichText',
-  data() {
-    return {
-      curValue: '',
-      editor: null,
-    };
+  components: {
+    RichEditor
   },
   props: {
     formConfig: {
       type: Object,
-      default: () => ({}),
-    },
+      default: () => ({})
+    }
   }, // value 用于自定义 v-model
-  mounted() {
-    this.create();
-  },
-  watch: {
-    'formConfig.value': {
-      immediate: true,
-      handler(newVal) {
-        const isEqual = newVal === this.curValue;
-        if (isEqual) return; // 和当前内容一样，则忽略
-        console.log({
-          msg: 'watch',
-          newVal,
-          curValue: this.curValue,
-        });
-        this.curValue = newVal;
 
-        // 重置 HTML
-        this.setHtml(newVal);
-      },
-    },
-  },
   methods: {
-    // 重置 HTML
-    setHtml(newHtml) {
-      const editor = this.editor;
-      if (editor === null) return;
-      editor.setHtml(newHtml);
+    onChange(newHtml) {
+      this.$emit(FORM_CHANGE_EVENT_KEY, {
+        key: this.formConfig.key,
+        value: newHtml
+      })
+      this.$emit('change', newHtml)
     },
-
-    // 创建 editor
-    create() {
-      if (this.$refs.editor === null) return;
-      console.log('create', this.curValue);
-      createEditor({
-        selector: this.$refs.editor,
-        html: this.curValue || '',
-        config: {
-          onCreated: (editor) => {
-            this.editor = Object.seal(editor);
-
-            if (this.formConfig?.value) {
-              this.setHtml(this.formConfig.value);
-            }
-
-            createToolbar({
-              editor,
-              selector: this.$refs.toolbar,
-              config: {
-                toolbarKeys: [
-                  'bold',
-                  // 'insertImage', // 插入图片
-                  // 'video',
-                  // 'fontSize', // 字号
-                  'color', // 字体色
-                  'bgColor', // 背景色
-                  // 'justify', // 对齐方式
-                  'insertLink', // 链接
-                  // 'clean',
-                ],
-              },
-              mode: 'simple',
-            });
-          },
-          onChange: (editor) => {
-            let editorHtml = editor.getHtml();
-            if (editorHtml === '<p><br></p>') {
-              editorHtml = '';
-            }
-            this.curValue = editorHtml; // 记录当前 html 内容
-            this.$emit(FORM_CHANGE_EVENT_KEY, {
-              key: this.formConfig.key,
-              value: editorHtml,
-            });
-            this.$emit('input', editorHtml); // 用于自定义 v-model
-          },
-          onDestroyed: (editor) => {
-            this.$emit('destroyed', editor);
-            editor.destroy();
-          },
-          onFocus: (editor) => {
-            this.$emit('focus', editor);
-          },
-          onBlur: (editor) => {
-            this.$emit('blur', editor);
-          },
-        },
-        content: [],
-        mode: 'simple',
-      });
-    },
-  },
-};
+    onInput(newHtml) {
+      this.$emit(FORM_CHANGE_EVENT_KEY, {
+        key: this.formConfig.key,
+        value: newHtml
+      })
+      this.$emit('input', newHtml)
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 @import url('@wangeditor/editor/dist/css/style.css');
-@import url('@/management/styles/reset-wangeditor.scss');
+@import url('@/common/Editor/styles/reset-wangeditor.scss');
 
 .editor-wrapper {
   position: relative;
diff --git a/web/src/materials/setters/widgets/Select.vue b/web/src/materials/setters/widgets/SelectSetter.vue
similarity index 67%
rename from web/src/materials/setters/widgets/Select.vue
rename to web/src/materials/setters/widgets/SelectSetter.vue
index 70a646da..b33d02f4 100644
--- a/web/src/materials/setters/widgets/Select.vue
+++ b/web/src/materials/setters/widgets/SelectSetter.vue
@@ -1,11 +1,10 @@
 <template>
   <el-select
     :placeholder="
-      ['matrixOptionsRely', 'optionOrigin'].includes(formConfig.key)
-        ? '请选择'
-        : formConfig.label
+      ['matrixOptionsRely', 'optionOrigin'].includes(formConfig.key) ? '请选择' : formConfig.label
     "
     v-model="validValue"
+    :empty-values="[null, undefined]"
     @change="changeData"
     popper-class="option-list-width"
     :disabled="formConfig.disabled"
@@ -21,67 +20,65 @@
   </el-select>
 </template>
 <script>
-import { cleanRichText } from '@/common/xss';
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { cleanRichText } from '@/common/xss'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 export default {
-  name: 'Select',
+  name: 'SelectSetter',
   data() {
     return {
-      validValue:
-        !this.formConfig.value && this.formConfig.value != 0
-          ? ''
-          : this.formConfig.value,
-    };
+      validValue: !this.formConfig.value && this.formConfig.value != 0 ? '' : this.formConfig.value
+    }
   },
   props: {
     formConfig: {
       type: Object,
-      required: true,
+      required: true
     },
     moduleConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   watch: {
     formConfig: {
       handler(v) {
-        this.validValue = v.value;
+        this.validValue = v.value
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   computed: {
     options() {
-      let options = [];
+      let options = []
       if (Array.isArray(this.formConfig?.options)) {
-        options = this.formConfig?.options;
+        options = this.formConfig?.options
       }
       return options.map((item) => {
-        item.label = cleanRichText(item.label);
-        return item;
-      });
-    },
+        item.label = cleanRichText(item.label)
+        return item
+      })
+    }
   },
   methods: {
     changeData(value) {
-      const { key, valueSetter } = this.formConfig;
+      const { key, valueSetter } = this.formConfig
+
       if (valueSetter && typeof valueSetter == 'function') {
-        let status = valueSetter(value, this.moduleConfig);
+        let status = valueSetter(value, this.moduleConfig)
         if (status) {
-          this.validValue = '';
-          return;
+          this.validValue = this.moduleConfig[key]
+          return
         }
       }
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value,
-      });
-    },
-  },
-};
+        value
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .option-list-width {
   max-width: 400px;
 }
diff --git a/web/src/materials/setters/widgets/SliderSetter.vue b/web/src/materials/setters/widgets/SliderSetter.vue
index b34f1d62..07113b06 100644
--- a/web/src/materials/setters/widgets/SliderSetter.vue
+++ b/web/src/materials/setters/widgets/SliderSetter.vue
@@ -1,37 +1,41 @@
 <template>
   <el-form-item class="slider-wrap">
-    <el-slider :value="formConfig.value" @input="changeData" :format-tooltip="formatTooltip"></el-slider>
+    <el-slider
+      :modelValue="formConfig.value"
+      @input="changeData"
+      :format-tooltip="formatTooltip"
+    ></el-slider>
     <!-- <span>{{ formConfig.value + '%'  }}</span> -->
   </el-form-item>
 </template>
 <script>
-import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 export default {
   name: 'SliderSetter',
   props: {
     formConfig: {
       type: Object,
-      required: true,
-    },
+      required: true
+    }
   },
   methods: {
-    formatTooltip (val) {
-      return val + '%';
+    formatTooltip(val) {
+      return val + '%'
     },
     changeData(value) {
-      const key = this.formConfig.key;
+      const key = this.formConfig.key
       this.$emit(FORM_CHANGE_EVENT_KEY, {
         key,
-        value,
-      });
-    },
-  },
-};
+        value
+      })
+    }
+  }
+}
 </script>
 <style>
-.slider-wrap{
+.slider-wrap {
   flex: 1;
   /* display: flex; */
   padding: 0 20px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/materials/utils/componentLoader.js b/web/src/materials/utils/componentLoader.js
index 6318dc04..fbcd827f 100644
--- a/web/src/materials/utils/componentLoader.js
+++ b/web/src/materials/utils/componentLoader.js
@@ -1,59 +1,55 @@
-import { cloneDeep as _cloneDeep } from 'lodash-es';
+import { cloneDeep as _cloneDeep } from 'lodash-es'
 export default class ComponentLoader {
   constructor(options = {}) {
-    const { componentList, lifeCycle } = options;
-    this.components = {}; // 已加载组件
-    this.componentInfoList = componentList || [];
+    const { componentList, lifeCycle } = options
+    this.components = {} // 已加载组件
+    this.componentInfoList = componentList || []
     if (lifeCycle) {
-      this.lifeCycle = lifeCycle;
+      this.lifeCycle = lifeCycle
     }
   }
 
   async loadComponent(type, path) {
     if (this.components[type]) {
-      return { type, component: this.components[type] };
+      return { type, component: this.components[type] }
     } else {
-      let count = 0;
+      let count = 0
       const load = async () => {
         try {
-          count++;
-          const res = await this.dynamicImport(path);
-          const index = _cloneDeep(
-            res.default.components && res.default.components.Index
-          );
-          const component = index ? index : res.default;
+          count++
+          const res = await this.dynamicImport(path)
+          const index = _cloneDeep(res.default.components && res.default.components.Index)
+          const component = index ? index : res.default
           if (!component.name) {
             // console.error(`组件：${type} 未定义 name`)
-            component.name = path || type;
+            component.name = path || type
           }
-          component.path = path;
-          this.components[type] = component;
+          component.path = path
+          this.components[type] = component
           if (this.lifeCycle?.onComponentLoaded) {
             this.lifeCycle?.onComponentLoaded.call(this, {
               component,
               type,
-              meta: res.meta,
-            });
+              meta: res.meta
+            })
           }
-          return { type, component };
+          return { type, component }
         } catch (error) {
           if (count < 3) {
-            return await load();
+            return await load()
           }
         }
-      };
+      }
 
-      const result = await load();
-      return result;
+      const result = await load()
+      return result
     }
   }
 
   loadComponents(componentList) {
     if (componentList === undefined) {
-      componentList = this.componentInfoList;
+      componentList = this.componentInfoList
     }
-    return Promise.all(
-      componentList.map((item) => this.loadComponent(item.type, item.path))
-    );
+    return Promise.all(componentList.map((item) => this.loadComponent(item.type, item.path)))
   }
 }
diff --git a/web/src/render/App.vue b/web/src/render/App.vue
index 00dcdc07..563cecb1 100644
--- a/web/src/render/App.vue
+++ b/web/src/render/App.vue
@@ -1,37 +1,39 @@
 <template>
   <div id="app">
     <Component v-if="$store.state.router" :is="$store.state.router"></Component>
-    <logo v-if="!['successPage', 'indexPage'].includes($store.state.router)"></logo>
+    <LogoIcon v-if="!['successPage', 'indexPage'].includes($store.state.router)" />
   </div>
 </template>
 
 <script>
-import { getPublishedSurveyInfo } from './api/survey';
+import { getPublishedSurveyInfo } from './api/survey'
+import useCommandComponent from './hooks/useCommandComponent'
 
-import emptyPage from './pages/emptyPage.vue';
-import indexPage from './pages/index.vue';
-import errorPage from './pages/errorPage.vue';
-import successPage from './pages/successPage.vue';
+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'
 
-import logo from './components/logo.vue';
-import { get as _get, value } from 'lodash-es'
+import LogoIcon from './components/LogoIcon.vue'
+import { get as _get } from 'lodash-es'
 
 export default {
   name: 'App',
   components: {
-    emptyPage,
-    indexPage,
-    errorPage,
-    successPage,
-    logo,
+    EmptyPage,
+    IndexPage,
+    ErrorPage,
+    SuccessPage,
+    LogoIcon
   },
   data() {
-    return {};
+    return {}
   },
   computed: {
-    skinConf () {
-      return _get(this.$store, 'state.skinConf', {});
-    },
+    skinConf() {
+      return _get(this.$store, 'state.skinConf', {})
+    }
   },
   watch: {
     skinConf(value) {
@@ -39,67 +41,61 @@ export default {
     }
   },
   async created() {
-    this.init();
+    this.init()
+    this.alert = useCommandComponent(AlertDialog)
   },
   beforeCreate() {},
   methods: {
     async init() {
-      const surveyPath = location.pathname.split('/').pop();
+      const surveyPath = location.pathname.split('/').pop()
       if (!surveyPath) {
-        this.$store.commit('setRouter', 'emptyPage');
+        this.$store.commit('setRouter', 'EmptyPage')
       } else {
         try {
-          const res = await getPublishedSurveyInfo({ surveyPath });
+          const res = await getPublishedSurveyInfo({ surveyPath })
           if (res.code === 200) {
-            const data = res.data;
-            const {
-              bannerConf,
-              baseConf,
-              bottomConf,
-              dataConf,
-              skinConf,
-              submitConf,
-            } = data.code;
-            document.title = data.title;
+            const data = res.data
+            const { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf } = data.code
+            document.title = data.title
             const questionData = {
               bannerConf,
               baseConf,
               bottomConf,
               dataConf,
               skinConf,
-              submitConf,
-            };
+              submitConf
+            }
             this.setSkin(skinConf)
-            this.$store.commit('setSurveyPath', surveyPath);
-            this.$store.dispatch('init', questionData);
-            this.$store.dispatch('getEncryptInfo');
+            this.$store.commit('setSurveyPath', surveyPath)
+            this.$store.dispatch('init', questionData)
+            this.$store.dispatch('getEncryptInfo')
           } else {
-            throw new Error(res.errmsg);
+            throw new Error(res.errmsg)
           }
         } catch (error) {
-          console.log(error);
-          this.$dialog.alert({
-            title: error.message || '获取问卷失败',
-          });
+          console.log(error)
+          this.alert({
+            title: error.message || '获取问卷失败'
+          })
         }
       }
     },
     setSkin(skinConf) {
-      const { themeConf, backgroundConf, contentConf} = skinConf
-      const root = document.documentElement;
-      if(themeConf?.color) {
-        root.style.setProperty('--primary-color', themeConf?.color); // 设置主题颜色
+      const { themeConf, backgroundConf, contentConf } = skinConf
+      const root = document.documentElement
+      if (themeConf?.color) {
+        root.style.setProperty('--primary-color', themeConf?.color) // 设置主题颜色
       }
-      if(backgroundConf?.color) {
-        root.style.setProperty('--primary-background-color', backgroundConf?.color); // 设置背景颜色
+      if (backgroundConf?.color) {
+        root.style.setProperty('--primary-background-color', backgroundConf?.color) // 设置背景颜色
       }
-      if(contentConf?.opacity.toString()) {
-        console.log({opacity: (contentConf?.opacity)/100})
-        root.style.setProperty('--opacity', (contentConf?.opacity)/100); // 设置全局透明度
+      if (contentConf?.opacity.toString()) {
+        console.log({ opacity: contentConf?.opacity / 100 })
+        root.style.setProperty('--opacity', contentConf?.opacity / 100) // 设置全局透明度
       }
     }
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss">
@@ -111,8 +107,6 @@ html {
   background: rgb(238, 238, 238);
 }
 
-
-
 #app {
   position: relative;
   overflow-x: hidden;
diff --git a/web/src/render/adapter/formValue.js b/web/src/render/adapter/formValue.js
index 62c73e5c..9b31735e 100644
--- a/web/src/render/adapter/formValue.js
+++ b/web/src/render/adapter/formValue.js
@@ -1,12 +1,12 @@
 // 定义提交的数据结构：{ field1: '', field2: [], field1_hash1: '', }
 export default function ({ dataConf }) {
-  const dataList = dataConf.dataList;
-  const formValues = {};
+  const dataList = dataConf.dataList
+  const formValues = {}
   for (const item of dataList) {
     // 题目id
-    const key = item.field;
-    const { extraOptions, options, type, rangeConfig, innerType } = item;
-    let value = '';
+    const key = item.field
+    const { extraOptions, options, type, rangeConfig, innerType } = item
+    let value = ''
 
     // if (Array.isArray(extraOptions) || Array.isArray(options)) {
     //   // 有固定选项或者有选项，开启了默认选中第一个
@@ -18,25 +18,25 @@ export default function ({ dataConf }) {
 
     // 题型是多选，或者子题型是多选（innerType是用于投票）
     if (/checkbox/.test(type) || innerType === 'checkbox') {
-      value = value ? [value] : [];
+      value = value ? [value] : []
     }
-    formValues[key] = value;
+    formValues[key] = value
 
-    const allOptions = [];
+    const allOptions = []
     // 有固定选项
     if (Array.isArray(extraOptions)) {
-      allOptions.push(...extraOptions);
+      allOptions.push(...extraOptions)
     }
     // 有选项
     if (Array.isArray(options)) {
-      allOptions.push(...options);
+      allOptions.push(...options)
     }
     // 对所有选项遍历
     for (const optionItem of allOptions) {
       if (optionItem.others) {
         // 开启了更多输入框，生成更多输入框的key
-        const opKey = `${key}_${optionItem.hash}`;
-        formValues[opKey] = '';
+        const opKey = `${key}_${optionItem.hash}`
+        formValues[opKey] = ''
       }
     }
 
@@ -44,13 +44,13 @@ export default function ({ dataConf }) {
     if (rangeConfig && Object.keys(rangeConfig).length > 0) {
       for (const rkey of Object.keys(rangeConfig)) {
         if (rangeConfig[rkey].isShowInput) {
-          const rangeKey = `${key}_${rkey}`;
-          formValues[rangeKey] = '';
+          const rangeKey = `${key}_${rkey}`
+          formValues[rangeKey] = ''
         }
       }
     }
   }
   return {
-    formValues,
-  };
+    formValues
+  }
 }
diff --git a/web/src/render/adapter/index.js b/web/src/render/adapter/index.js
index f3179762..3f6b279f 100644
--- a/web/src/render/adapter/index.js
+++ b/web/src/render/adapter/index.js
@@ -1,34 +1,31 @@
-import question from './question';
-import rules from './rules';
-import questionSeq from './questionSeq';
-import formValue from './formValue';
+import question from './question'
+import rules from './rules'
+import questionSeq from './questionSeq'
+import formValue from './formValue'
 
 const adapter = (() => {
-  const list = [];
+  const list = []
 
   const exec = (questionData) => {
-    return list.reduce(
-      (pre, next) => ({ ...pre, ...next(questionData, pre) }),
-      {}
-    );
-  };
+    return list.reduce((pre, next) => ({ ...pre, ...next(questionData, pre) }), {})
+  }
 
   return {
     add(fun) {
-      list.push(fun);
+      list.push(fun)
     },
     exec,
     // 部分问卷需要依赖一些异步的数据
     generateData(questionData) {
-      return exec(questionData);
-    },
-  };
-})();
+      return exec(questionData)
+    }
+  }
+})()
 
-adapter.add(question);
-adapter.add(rules);
-adapter.add(questionSeq);
-adapter.add(formValue);
+adapter.add(question)
+adapter.add(rules)
+adapter.add(questionSeq)
+adapter.add(formValue)
 
 // 对
-export default adapter;
+export default adapter
diff --git a/web/src/render/adapter/question.js b/web/src/render/adapter/question.js
index 9a52a247..2ab6bcde 100644
--- a/web/src/render/adapter/question.js
+++ b/web/src/render/adapter/question.js
@@ -2,29 +2,29 @@
  * 处理单题的配置
  */
 
-import { get as _get, map as _map } from 'lodash-es';
+import { get as _get, map as _map } from 'lodash-es'
 
 // 处理选择题的options
 function handleOptions(item) {
-  const { type } = item;
-  const options = item.options || [];
+  const { type } = item
+  const options = item.options || []
 
   const arr = _map(options, (optionItem) => {
-    const cleanOption = {};
+    const cleanOption = {}
 
     // 投票逻辑处理
     if (type.indexOf('vote') > -1) {
-      cleanOption.voteCount = 0;
+      cleanOption.voteCount = 0
     }
 
-    return { value: optionItem['hash'], ...optionItem, ...cleanOption };
-  });
+    return { value: optionItem['hash'], ...optionItem, ...cleanOption }
+  })
 
-  return { options: arr };
+  return { options: arr }
 }
 
 export default function (questionConfig) {
-  let dataList = _get(questionConfig, 'dataConf.dataList');
+  let dataList = _get(questionConfig, 'dataConf.dataList')
   // 将题目列表转成对象，并且对题目类型、题目的选项做一些字段的增加和转换
   const questionData = dataList.reduce((pre, item) => {
     Object.assign(pre, {
@@ -32,13 +32,13 @@ export default function (questionConfig) {
         indexNumber: '',
         voteTotal: 0,
         ...item,
-        ...handleOptions(item),
-      },
-    });
-    return pre;
-  }, {});
+        ...handleOptions(item)
+      }
+    })
+    return pre
+  }, {})
 
   return {
-    questionData,
-  };
+    questionData
+  }
 }
diff --git a/web/src/render/adapter/questionSeq.js b/web/src/render/adapter/questionSeq.js
index 98d062c3..0ed60478 100644
--- a/web/src/render/adapter/questionSeq.js
+++ b/web/src/render/adapter/questionSeq.js
@@ -1,19 +1,19 @@
-import { get as _get, last as _last } from 'lodash-es';
+import { get as _get, last as _last } from 'lodash-es'
 
 export default function handleQuestionSeq(questionConfig) {
-  const dataList = _get(questionConfig, 'dataConf.dataList', []);
+  const dataList = _get(questionConfig, 'dataConf.dataList', [])
   return {
     // 对题目做一些排序和分组，返回题目id的列表
     questionSeq: dataList.reduce(
       (pre, item) => {
-        const { field } = item;
+        const { field } = item
 
         // 每次都在最后一个数组里push题目
-        _last(pre).push(field);
+        _last(pre).push(field)
 
-        return pre;
+        return pre
       },
       [[]]
-    ),
-  };
+    )
+  }
 }
diff --git a/web/src/render/adapter/rules.js b/web/src/render/adapter/rules.js
index 36961568..8c3b12fd 100644
--- a/web/src/render/adapter/rules.js
+++ b/web/src/render/adapter/rules.js
@@ -3,8 +3,8 @@ import {
   get as _get,
   isArray as _isArray,
   keys as _keys,
-  set as _set,
-} from 'lodash-es';
+  set as _set
+} from 'lodash-es'
 
 const regexpMap = {
   nd: /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/,
@@ -15,8 +15,8 @@ const regexpMap = {
   n: /^[0-9]+([.]{1}[0-9]+){0,1}$/,
   e: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
   licensePlate:
-    /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DFAG]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}[A-Z0-9挂学警港澳]{1})$/,
-};
+    /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DFAG]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}[A-Z0-9挂学警港澳]{1})$/
+}
 
 const msgMap = {
   '*': '必填',
@@ -26,55 +26,55 @@ const msgMap = {
   n: '请输入数字',
   nd: '请输入数字',
   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'];
+  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) {
-  let tip = minNum === maxNum ? checkBoxTipSame : checkBoxTip;
+  let tip = minNum === maxNum ? checkBoxTipSame : checkBoxTip
   if (_isArray(value) && value.length < minNum) {
-    const less = minNum - value.length;
-    tip = tip.replace(/#min#/g, minNum);
-    tip = tip.replace(/#less#/g, less);
-    return tip;
+    const less = minNum - value.length
+    tip = tip.replace(/#min#/g, minNum)
+    tip = tip.replace(/#less#/g, less)
+    return tip
   }
-  return '';
+  return ''
 }
 
 // textarea最小字数检验
 export function textAreaValidator(isRequired, value, textRangeMin) {
-  let tip = textRangeMinTip;
+  let tip = textRangeMinTip
   if (value && value.length < parseInt(textRangeMin)) {
-    tip = tip.replace(/#min#/g, textRangeMin);
-    return tip;
+    tip = tip.replace(/#min#/g, textRangeMin)
+    return tip
   }
-  return '';
+  return ''
 }
 
 // 数字类的输入框，配置了最小值的，要对数值做校验
 export function numberMinValidator(value, numberRangeMin) {
-  let tip = numberRangeMinTip;
+  let tip = numberRangeMinTip
   if (Number(value) < Number(numberRangeMin)) {
-    tip = tip.replace(/#min#/g, numberRangeMin);
-    return tip;
+    tip = tip.replace(/#min#/g, numberRangeMin)
+    return tip
   }
-  return '';
+  return ''
 }
 // 数字类的输入框，配置了最大值的，要对数值做校验
 export function numberMaxValidator(value, numberRangeMax) {
-  let tip = numberRangeMaxTip;
+  let tip = numberRangeMaxTip
   if (Number(value) > Number(numberRangeMax)) {
-    tip = tip.replace(/#max#/g, numberRangeMax);
-    return tip;
+    tip = tip.replace(/#max#/g, numberRangeMax)
+    return tip
   }
-  return '';
+  return ''
 }
 
 // 根据提醒和题目的配置，生成本题的校验规则
@@ -87,139 +87,139 @@ export function generateValidArr(
   numberRangeMin,
   numberRangeMax
 ) {
-  const validArr = [];
-  const isInput = inputType.indexOf(type) !== -1;
+  const validArr = []
+  const isInput = inputType.indexOf(type) !== -1
   if (isRequired || valid === '*') {
     // 输入框的必填校验做trim
     if (!isInput) {
       validArr.push({
         required: true,
-        message: '此项未填，请填写完整',
-        trigger: 'change|blur',
-      });
+        message: '此项未填，请填写完整'
+        // trigger: 'change|blur'
+      })
     } else {
       validArr.push({
         required: true,
         validator(rule, value, callback) {
-          let errors = [];
-          let tip = '';
+          let errors = []
+          let tip = ''
           if (value === '' || value?.replace(/\s*/, '') === '') {
-            tip = '此项未填，请填写完整';
+            tip = '此项未填，请填写完整'
           }
           if (tip) {
-            errors = [tip];
+            errors = [tip]
           }
-          callback(errors);
-        },
-        trigger: 'change|blur',
-      });
+          callback(errors)
+        }
+        // trigger: 'change|blur'
+      })
     }
   }
   if (regexpMap[valid]) {
     validArr.push({
       validator(rule, value, callback) {
-        let errors = [];
-        let tip = '';
+        let errors = []
+        let tip = ''
         if (!regexpMap[valid].test(value)) {
-          tip = msgMap[valid];
+          tip = msgMap[valid]
         }
         if (value === '') {
-          tip = '';
+          tip = ''
         }
         if (tip) {
-          errors = [tip];
+          errors = [tip]
         }
-        callback(errors);
-      },
-      trigger: 'change|blur',
-    });
+        callback(errors)
+      }
+      // trigger: 'change|blur'
+    })
   }
 
   if (minNum) {
     validArr.unshift({
       validator(rule, value, callback) {
-        let errors = [];
-        const tip = optionValidator(value, minNum);
+        let errors = []
+        const tip = optionValidator(value, minNum)
         if (tip) {
-          errors = [tip];
+          errors = [tip]
         }
-        callback(errors);
-      },
-      trigger: 'change|blur',
-    });
+        callback(errors)
+      }
+      // trigger: 'change|blur'
+    })
   }
 
   if (textRangeMin) {
     validArr.push({
       validator(rule, value, callback) {
-        let errors = [];
-        const tip = textAreaValidator(isRequired, value, textRangeMin);
+        let errors = []
+        const tip = textAreaValidator(isRequired, value, textRangeMin)
         if (tip) {
-          errors = [tip];
+          errors = [tip]
         }
-        callback(errors);
-      },
-      trigger: 'change|blur',
-    });
+        callback(errors)
+      }
+      // trigger: 'change|blur'
+    })
   }
 
   if (isInput && valid === 'n' && numberRangeMin) {
     validArr.push({
       validator(rule, value, callback) {
-        let errors = [];
-        const tip = numberMinValidator(value, numberRangeMin);
+        let errors = []
+        const tip = numberMinValidator(value, numberRangeMin)
         if (tip) {
-          errors = [tip];
+          errors = [tip]
         }
-        callback(errors);
-      },
-      trigger: 'change|blur',
-    });
+        callback(errors)
+      }
+      // trigger: 'change|blur'
+    })
   }
 
   if (isInput && valid === 'n' && numberRangeMax) {
     validArr.push({
       validator(rule, value, callback) {
-        let errors = [];
-        const tip = numberMaxValidator(value, numberRangeMax);
+        let errors = []
+        const tip = numberMaxValidator(value, numberRangeMax)
         if (tip) {
-          errors = [tip];
+          errors = [tip]
         }
-        callback(errors);
-      },
-      trigger: 'change|blur',
-    });
+        callback(errors)
+      }
+      // trigger: 'change|blur'
+    })
   }
 
-  return validArr;
+  return validArr
 }
 
 // 生成选择类或者评分类的题目的更多输入框
 const generateOthersKeyMap = (question) => {
-  const { type, field, options, rangeConfig } = question;
-  let othersKeyMap = undefined;
+  const { type, field, options, rangeConfig } = question
+  let othersKeyMap = undefined
 
   if (radioType.includes(type)) {
-    othersKeyMap = {};
+    othersKeyMap = {}
     for (const key in rangeConfig) {
       if (rangeConfig[key].isShowInput) {
-        othersKeyMap[`${field}_${key}`] = key;
+        othersKeyMap[`${field}_${key}`] = key
       }
     }
   } else if (type.includes('radio') || type.includes('checkbox')) {
-    othersKeyMap = {};
+    othersKeyMap = {}
     options
       .filter((op) => op.others)
       .forEach((option) => {
-        othersKeyMap[`${field}_${option.hash}`] = option.text;
-      });
+        othersKeyMap[`${field}_${option.hash}`] = option.text
+      })
   }
-  return othersKeyMap;
-};
+  return othersKeyMap
+}
 
 // 生成所有题目的校验规则
 export default function (questionConfig) {
-  const dataList = _get(questionConfig, 'dataConf.dataList');
+  const dataList = _get(questionConfig, 'dataConf.dataList')
   const rules = dataList.reduce((pre, current) => {
     const {
       field,
@@ -231,18 +231,18 @@ export default function (questionConfig) {
       isRequired,
       textRange,
       numberRange,
-      rangeConfig,
-    } = current;
-    const othersKeyMap = generateOthersKeyMap(current);
+      rangeConfig
+    } = current
+    const othersKeyMap = generateOthersKeyMap(current)
     // 部分题目不校验
     if (valid === '0' || /mobileHidden|section|hidden/.test(type)) {
-      return pre;
+      return pre
     }
 
-    let validMap = {};
-    const textRangeMin = _get(textRange, 'min.value');
-    const numberRangeMin = _get(numberRange, 'min.value');
-    const numberRangeMax = _get(numberRange, 'max.value');
+    let validMap = {}
+    const textRangeMin = _get(textRange, 'min.value')
+    const numberRangeMin = _get(numberRange, 'min.value')
+    const numberRangeMax = _get(numberRange, 'max.value')
 
     const validArr = generateValidArr(
       isRequired,
@@ -252,9 +252,9 @@ export default function (questionConfig) {
       type,
       numberRangeMin,
       numberRangeMax
-    );
+    )
 
-    validMap = { [field]: validArr };
+    validMap = { [field]: validArr }
 
     // 对于选择题支持填写更多信息的，需要做是否必填的校验
     if (_keys(othersKeyMap).length) {
@@ -262,21 +262,21 @@ export default function (questionConfig) {
         if (rangeConfig) {
           for (const key in rangeConfig) {
             if (rangeConfig[key].isShowInput && rangeConfig[key].required) {
-              _set(validMap, `${field}_${key}`, generateValidArr(true, ''));
+              _set(validMap, `${field}_${key}`, generateValidArr(true, ''))
             }
           }
         }
       } else {
         _forEach(options, (item) => {
-          const othersKey = `${field}_${item.hash}`;
-          const { mustOthers } = item;
+          const othersKey = `${field}_${item.hash}`
+          const { mustOthers } = item
           if (mustOthers) {
-            _set(validMap, othersKey, generateValidArr(true, ''));
+            _set(validMap, othersKey, generateValidArr(true, ''))
           }
-        });
+        })
       }
     }
-    return Object.assign(validMap, pre);
-  }, {});
-  return { rules };
+    return Object.assign(validMap, pre)
+  }, {})
+  return { rules }
 }
diff --git a/web/src/render/api/base.js b/web/src/render/api/base.js
index ed894fda..0b7da531 100644
--- a/web/src/render/api/base.js
+++ b/web/src/render/api/base.js
@@ -1,60 +1,60 @@
-import axios from 'axios';
-import sha256 from 'crypto-js/sha256';
+import axios from 'axios'
+import sha256 from 'crypto-js/sha256'
 
 // 生成axios实例
 const instance = axios.create({
   baseURL: '/api',
-  timeout: 3000,
-});
+  timeout: 3000
+})
 
 // 对数据进行过滤，将undefined转成空字符串
 const undefinedToString = (data) => {
-  const res = {};
+  const res = {}
   for (const key in data) {
     if (data[key] === undefined) {
-      res[key] = '';
+      res[key] = ''
     } else {
-      res[key] = data[key];
+      res[key] = data[key]
     }
   }
-  return res;
-};
+  return res
+}
 
 // 根据数据生成签名
 const getSignByData = (sourceData) => {
-  const data = undefinedToString(sourceData);
-  const keysArr = Object.keys(data);
-  keysArr.sort();
+  const data = undefinedToString(sourceData)
+  const keysArr = Object.keys(data)
+  keysArr.sort()
   let signArr = keysArr.map((key) => {
     if (typeof data[key] === 'string') {
-      return `${key}=${encodeURIComponent(data[key])}`;
+      return `${key}=${encodeURIComponent(data[key])}`
     }
-    return `${key}=${JSON.stringify(data[key])}`;
-  });
-  const ts = Date.now();
-  const sign = sha256(signArr.join('') + ts);
-  return `${sign}.${ts}`;
-};
+    return `${key}=${JSON.stringify(data[key])}`
+  })
+  const ts = Date.now()
+  const sign = sha256(signArr.join('') + ts)
+  return `${sign}.${ts}`
+}
 
 // 请求中间件，对所有请求都生成签名
 instance.interceptors.request.use((request) => {
-  let data = {};
+  let data = {}
   if (request.method === 'get') {
-    data = request.params || data;
+    data = request.params || data
   } else if (request.method === 'post') {
-    data = request.data || data;
+    data = request.data || data
   }
-  const sign = getSignByData(data);
-  data.sign = sign;
-  return request;
-});
+  const sign = getSignByData(data)
+  data.sign = sign
+  return request
+})
 
 // 对响应的数据，取data
 instance.interceptors.response.use((response) => {
   if (response.status !== 200) {
-    throw new Error('http请求出错');
+    throw new Error('http请求出错')
   }
-  return response.data;
-});
+  return response.data
+})
 
-export default instance;
+export default instance
diff --git a/web/src/render/api/survey.js b/web/src/render/api/survey.js
index 06d09e00..8ae6929c 100644
--- a/web/src/render/api/survey.js
+++ b/web/src/render/api/survey.js
@@ -1,26 +1,26 @@
-import axios from './base';
+import axios from './base'
 
 export const getPublishedSurveyInfo = ({ surveyPath }) => {
   return axios.get('/responseSchema/getSchema', {
     params: {
-      surveyPath,
-    },
-  });
-};
+      surveyPath
+    }
+  })
+}
 
 export const submitForm = (data) => {
-  return axios.post('/surveyResponse/createResponse', data);
-};
+  return axios.post('/surveyResponse/createResponse', data)
+}
 
 export const queryVote = ({ surveyPath, fieldList }) => {
   return axios.get('/counter/queryOptionCountInfo', {
     params: {
       surveyPath,
-      fieldList,
-    },
-  });
-};
+      fieldList
+    }
+  })
+}
 
 export const getEncryptInfo = () => {
-  return axios.get('/clientEncrypt/getEncryptInfo');
-};
+  return axios.get('/clientEncrypt/getEncryptInfo')
+}
diff --git a/web/src/render/components/alert.vue b/web/src/render/components/AlertDialog.vue
similarity index 71%
rename from web/src/render/components/alert.vue
rename to web/src/render/components/AlertDialog.vue
index ede3fa71..61e4bf15 100644
--- a/web/src/render/components/alert.vue
+++ b/web/src/render/components/AlertDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mask">
+  <div class="mask" v-if="visible">
     <div class="box">
       <div class="title">{{ title }}</div>
       <div class="btn" @click="onConfirm">{{ btnText }}</div>
@@ -8,24 +8,30 @@
 </template>
 <script>
 export default {
+  name: 'AlertDialog',
   props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
     btnText: {
       type: String,
-      default: '我知道了',
+      default: '我知道了'
     },
     title: {
       type: String,
-      default: '',
-    },
+      default: ''
+    }
   },
   methods: {
     onConfirm() {
-      this.$emit('confirm');
-    },
-  },
-};
+      this.$emit('confirm')
+      this.$emit('close')
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 @import url('../styles/dialog.scss');
 
 .btn {
diff --git a/web/src/render/components/confirm.vue b/web/src/render/components/ConfirmDialog.vue
similarity index 75%
rename from web/src/render/components/confirm.vue
rename to web/src/render/components/ConfirmDialog.vue
index 04797f2d..ca14ceae 100644
--- a/web/src/render/components/confirm.vue
+++ b/web/src/render/components/ConfirmDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mask">
+  <div class="mask" v-show="visible">
     <div class="box">
       <div class="title">{{ title }}</div>
       <div class="btn-box">
@@ -11,31 +11,39 @@
 </template>
 <script>
 export default {
+  name: 'ConfirmDialog',
   props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
     cancelBtnText: {
       type: String,
-      default: '取消',
+      default: '取消'
     },
     confirmBtnText: {
       type: String,
-      default: '确定',
+      default: '确定'
     },
     title: {
       type: String,
-      default: '',
-    },
+      default: ''
+    }
   },
   methods: {
     onCancel() {
-      this.$emit('cancel');
+      // this.$emit('cancel');
+      this.$emit('close')
     },
     onConfirm() {
-      this.$emit('confirm');
-    },
-  },
-};
+      this.$emit('confirm', () => {
+        this.$emit('close')
+      })
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 @import url('../styles/dialog.scss');
 
 .btn-box {
diff --git a/web/src/render/components/header.vue b/web/src/render/components/HeaderSetter.vue
similarity index 73%
rename from web/src/render/components/header.vue
rename to web/src/render/components/HeaderSetter.vue
index 86a2ed50..b73eb844 100755
--- a/web/src/render/components/header.vue
+++ b/web/src/render/components/HeaderSetter.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="question-header">
-    <div
-      class="banner"
-      v-if="bannerConf.bannerConfig && bannerConf.bannerConfig.bgImage"
-    >
+    <div class="banner" v-if="bannerConf.bannerConfig && bannerConf.bannerConfig.bgImage">
       <img
         class="banner-img"
         :src="bannerConf.bannerConfig.bgImage"
@@ -11,10 +8,7 @@
         @click="onBannerClick"
       />
     </div>
-    <div
-      class="banner"
-      v-if="bannerConf.bannerConfig && bannerConf.bannerConfig.videoLink"
-    >
+    <div class="banner" v-if="bannerConf.bannerConfig && bannerConf.bannerConfig.videoLink">
       <div class="video">
         <video
           id="video"
@@ -45,43 +39,35 @@
   </div>
 </template>
 <script>
-import { get as _get } from 'lodash-es';
-import { formatLink } from '../utils/index.js';
+import { get as _get } from 'lodash-es'
+import { formatLink } from '../utils/index.js'
 
 export default {
-  name: 'TheHeader',
+  name: 'HeaderSetter',
   computed: {
     bannerConf() {
-      return _get(this.$store, 'state.bannerConf', {});
+      return _get(this.$store, 'state.bannerConf', {})
     }
   },
   methods: {
     onBannerClick() {
-      const allow = _get(
-        this.bannerConf,
-        'bannerConfig.bgImageAllowJump',
-        false
-      );
-      const jumpLink = _get(
-        this.bannerConf,
-        'bannerConfig.bgImageJumpLink',
-        ''
-      );
+      const allow = _get(this.bannerConf, 'bannerConfig.bgImageAllowJump', false)
+      const jumpLink = _get(this.bannerConf, 'bannerConfig.bgImageJumpLink', '')
       if (!allow || !jumpLink) {
-        return;
+        return
       }
-      window.open(formatLink(jumpLink));
+      window.open(formatLink(jumpLink))
     },
     play() {
-      const video = document.getElementById('video');
-      document.querySelector('.play-icon').style.display = 'none';
-      document.querySelector('.video-modal').style.display = 'none';
-      video.play();
-    },
-  },
-};
+      const video = document.getElementById('video')
+      document.querySelector('.play-icon').style.display = 'none'
+      document.querySelector('.video-modal').style.display = 'none'
+      video.play()
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .question-header {
   .banner,
   .titlePanel {
diff --git a/web/src/render/components/logo.vue b/web/src/render/components/LogoIcon.vue
similarity index 52%
rename from web/src/render/components/logo.vue
rename to web/src/render/components/LogoIcon.vue
index 037dd5ea..39ef1678 100644
--- a/web/src/render/components/logo.vue
+++ b/web/src/render/components/LogoIcon.vue
@@ -1,30 +1,27 @@
 <template>
   <div class="container">
     <div v-if="logoImage" class="logo-wrapper">
-      <img
-        :style="{ width: !isMobile ? '20%' : logoImageWidth || '20%' }"
-        :src="logoImage"
-      />
+      <img :style="{ width: !isMobile ? '20%' : logoImageWidth || '20%' }" :src="logoImage" />
     </div>
   </div>
 </template>
 <script>
 export default {
-  name: 'logoPreview',
+  name: 'LogoIcon',
   computed: {
     logoImage() {
-      return this.$store.state?.bottomConf?.logoImage;
+      return this.$store.state?.bottomConf?.logoImage
     },
     logoImageWidth() {
-      return this.$store.state?.bottomConf?.logoImageWidth;
+      return this.$store.state?.bottomConf?.logoImageWidth
     },
     isMobile() {
-      return this.$store.state?.isMobile;
-    },
-  },
-};
+      return this.$store.state?.isMobile
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .container {
   display: flex;
   justify-content: center;
diff --git a/web/src/render/components/MainRenderer.vue b/web/src/render/components/MainRenderer.vue
new file mode 100644
index 00000000..38895a07
--- /dev/null
+++ b/web/src/render/components/MainRenderer.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="main">
+    <template v-for="(item, index) in renderData" :key="index">
+      <MaterialGroup
+        ref="formGroup"
+        :render-data="item"
+        :rules="rules"
+        :formModel="formModel"
+        @formChange="changeData"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import MaterialGroup from './MaterialGroup.vue'
+export default {
+  name: 'MainRenderer',
+  computed: {
+    questionData() {
+      return this.$store.state.questionData
+    },
+    renderData() {
+      return this.$store.getters.renderData
+    },
+    rules() {
+      return this.$store.state.rules
+    },
+    formModel() {
+      return this.$store.getters.formModel
+    }
+  },
+  mounted() {},
+  components: { MaterialGroup },
+  methods: {
+    ...mapActions(['changeData'])
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/web/src/render/components/mainTitle.vue b/web/src/render/components/MainTitle.vue
similarity index 73%
rename from web/src/render/components/mainTitle.vue
rename to web/src/render/components/MainTitle.vue
index 54579068..23ee3c13 100644
--- a/web/src/render/components/mainTitle.vue
+++ b/web/src/render/components/MainTitle.vue
@@ -1,26 +1,23 @@
 <template>
   <div class="question-header">
-    <div
-      class="titlePanel"
-      v-if="bannerConf.titleConfig && bannerConf.titleConfig.mainTitle"
-    >
+    <div class="titlePanel" v-if="bannerConf.titleConfig && bannerConf.titleConfig.mainTitle">
       <div
         class="mainTitle"
         v-if="bannerConf.titleConfig.mainTitle"
-        v-safe-html="bannerConf.titleConfig.mainTitle"
+        v-html="bannerConf.titleConfig.mainTitle"
       ></div>
     </div>
   </div>
 </template>
 <script>
-import { get as _get } from 'lodash-es';
+import { get as _get } from 'lodash-es'
 export default {
-  name: 'mainTitle',
+  name: 'MainTitle',
   computed: {
     bannerConf() {
-      return _get(this.$store, 'state.bannerConf', {});
+      return _get(this.$store, 'state.bannerConf', {})
     }
-  },
+  }
 }
 </script>
 
diff --git a/web/src/render/components/MaterialGroup.vue b/web/src/render/components/MaterialGroup.vue
new file mode 100644
index 00000000..98ab9a5a
--- /dev/null
+++ b/web/src/render/components/MaterialGroup.vue
@@ -0,0 +1,111 @@
+<template>
+  <form ref="ruleForm" :model="formModel" :rules="rules">
+    <questionWrapper
+      v-for="item in renderData"
+      :key="item.field"
+      class="gap"
+      v-bind="$attrs"
+      :moduleConfig="item"
+      :qIndex="item.qIndex"
+      :indexNumber="item.indexNumber"
+      :showTitle="true"
+      @change="handleChange"
+    ></questionWrapper>
+  </form>
+</template>
+<script setup>
+import { inject, provide, computed, onBeforeMount } from 'vue'
+import questionWrapper from '../../materials/questions/QuestionRuleContainer'
+
+const $bus = inject('$bus')
+
+const props = defineProps({
+  rules: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  formModel: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  renderData: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+})
+const emit = defineEmits(['formChange', 'blur'])
+
+// 这里不能直接使用change事件，否则父元素监听change的事件，会被绑定到里面的input上
+// 导致接受到的data是个Event
+const handleChange = (data) => {
+  emit('formChange', data)
+}
+// 动态 field 管理
+const fields = []
+provide('Form', {
+  model: computed(() => {
+    return props.formModel
+  }),
+  rules: computed(() => {
+    return props.rules
+  })
+})
+
+// 记录当前视图中渲染的元素，用于提交时全局表单校验
+onBeforeMount(() => {
+  $bus.on('form.addField', (field) => {
+    if (field) {
+      fields.push(field)
+    }
+  })
+
+  $bus.on('form.removeField', (field) => {
+    if (field) {
+      fields.splice(fields.indexOf(field), 1)
+    }
+  })
+})
+
+const validate = (callback) => {
+  const length = fields.length
+  if (length === 0) {
+    callback(true)
+  }
+
+  let valid = true
+  let count = 0
+  let flag = false // 滚动到第一个未验证成功的元素
+
+  // 表单校验
+  fields.forEach((field) => {
+    field.validate('', (errors) => {
+      count++
+      if (errors) {
+        if (!flag) {
+          flag = true
+          try {
+            const el = field.$el
+            el.scrollIntoViewIfNeeded()
+          } catch (e) {
+            console.error(e)
+          }
+        }
+        valid = false
+      }
+      if (typeof callback === 'function' && count === length) {
+        callback(valid)
+      }
+    })
+  })
+}
+
+defineExpose({
+  validate
+})
+</script>
diff --git a/web/src/render/components/progressBar.vue b/web/src/render/components/ProgressBar.vue
similarity index 87%
rename from web/src/render/components/progressBar.vue
rename to web/src/render/components/ProgressBar.vue
index c49149f7..8e10f2b7 100644
--- a/web/src/render/components/progressBar.vue
+++ b/web/src/render/components/ProgressBar.vue
@@ -6,7 +6,7 @@
           class="progress-inner-mobile"
           :style="{
             transition: 'all 0.5s',
-            width: precent || 0,
+            width: percent || 0
           }"
         ></div>
       </div>
@@ -16,21 +16,21 @@
             class="progress-inner-pc"
             :style="{
               transition: 'all 0.5s',
-              height: precent || 0,
+              height: percent || 0
             }"
           ></div>
         </div>
-        <div class="percent-pc">{{ precent || '0%' }}</div>
+        <div class="percent-pc">{{ percent || '0%' }}</div>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import { useProgressBar } from '../hook/useProgress';
+import { useProgressBar } from '../hooks/useProgress'
 
-const { precent } = useProgressBar();
+const { percent } = useProgressBar()
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 .progress-outer {
   z-index: 10000;
   position: relative;
diff --git a/web/src/render/components/submit.vue b/web/src/render/components/SubmitSetter.vue
similarity index 67%
rename from web/src/render/components/submit.vue
rename to web/src/render/components/SubmitSetter.vue
index 5b362f13..e3ac7806 100644
--- a/web/src/render/components/submit.vue
+++ b/web/src/render/components/SubmitSetter.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="question-submit_wrapper">
-    <button
-      class="question-submit-btn"
-      @click="submit"
-    >
+    <button class="question-submit-btn" @click="submit">
       {{ submitConf.submitTitle }}
     </button>
   </div>
@@ -11,39 +8,39 @@
 
 <script>
 export default {
-  name: 'submit',
+  name: 'SubmitSetter',
   props: {
     validate: Function,
-    renderData: Array,
+    renderData: Array
   },
   data() {
-    return {};
+    return {}
   },
   computed: {
     submitConf() {
-      return this.$store.state?.submitConf || {};
+      return this.$store.state?.submitConf || {}
     },
     skinConf() {
-      return this.$store.state?.skinConf || {};
-    },
+      return this.$store.state?.skinConf || {}
+    }
   },
   methods: {
     submit(e) {
-      const validate = this.validate;
+      const validate = this.validate
       if (e) {
-        e.preventDefault();
+        e.preventDefault()
         validate((valid) => {
           if (valid) {
-            this.$emit('submit');
+            this.$emit('submit')
           }
-        });
+        })
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 @import '@/render/styles/variable.scss';
 .question-submit_wrapper {
   margin: 0 0.4rem;
diff --git a/web/src/render/components/form.vue b/web/src/render/components/form.vue
deleted file mode 100644
index 1375e738..00000000
--- a/web/src/render/components/form.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <form class="question-form" @submit="submit">
-    <slot></slot>
-  </form>
-</template>
-<script>
-export default {
-  name: 'Form',
-  componentName: 'Form',
-  provide() {
-    return {
-      Form: this,
-    };
-  },
-  props: {
-    model: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    rules: Object,
-  },
-  computed: {},
-  components: {},
-  data() {
-    return {
-      fields: [],
-    };
-  },
-  created() {
-    this.$on('form.addField', (field) => {
-      if (field) {
-        this.fields.push(field);
-      }
-    });
-
-    this.$on('form.removeField', (field) => {
-      if (field) {
-        this.fields.splice(this.fields.indexOf(field), 1);
-      }
-    });
-  },
-  methods: {
-    submit(e) {
-      e.preventDefault();
-    },
-    validate(callback) {
-      const length = this.fields.length;
-      if (length === 0) {
-        callback(true);
-      }
-
-      let valid = true;
-      let count = 0;
-      let flag = false; // 滚动到第一个未验证成功的元素
-
-      this.fields.forEach((field) => {
-        field.validate('', (errors) => {
-          count++;
-          if (errors) {
-            if (!flag) {
-              flag = true;
-              try {
-                const el = field.$el;
-                el.scrollIntoViewIfNeeded();
-              } catch (e) {
-                console.error(e);
-              }
-            }
-            valid = false;
-          }
-          if (typeof callback === 'function' && count === length) {
-            callback(valid);
-          }
-        });
-      });
-    },
-  },
-};
-</script>
-<style></style>
diff --git a/web/src/render/components/mainRenderer.vue b/web/src/render/components/mainRenderer.vue
deleted file mode 100644
index a6372602..00000000
--- a/web/src/render/components/mainRenderer.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="main">
-    <template v-for="(item, index) in renderData">
-      <div :key="index">
-        <materialGroup
-          ref="formGroup"
-          :render-data="item"
-          :rules="rules"
-          :formModel="formModel"
-          @change="changeData"
-        />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex';
-import materialGroup from './materialGroup';
-export default {
-  name: 'mainRenderer',
-  computed: {
-    questionData() {
-      return this.$store.state.questionData;
-    },
-    renderData() {
-      return this.$store.getters.renderData;
-    },
-    rules() {
-      return this.$store.state.rules;
-    },
-    formModel() {
-      return this.$store.getters.formModel;
-    },
-  },
-  mounted() {},
-  components: { materialGroup },
-  methods: {
-    ...mapActions(['changeData']),
-  },
-};
-</script>
-
-<style scoped lang="scss"></style>
diff --git a/web/src/render/components/materialGroup.vue b/web/src/render/components/materialGroup.vue
deleted file mode 100644
index 98955c34..00000000
--- a/web/src/render/components/materialGroup.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script>
-import { defineComponent } from 'vue';
-import Form from './form';
-import questionWrapper from '../../materials/questions/widgets/QuestionRuleContainer';
-
-export default defineComponent({
-  name: 'MaterialGroup',
-  components: { Form },
-  props: {
-    rules: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    formModel: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    renderData: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
-  },
-  setup(props, { emit }) {
-    const handleChange = (data) => {
-      emit('change', data);
-    };
-    const handleBlur = () => {
-      emit('blur');
-    };
-    return {
-      handleChange,
-      handleBlur,
-    };
-  },
-  render(h) {
-    const { formModel } = this;
-    return (
-      <Form ref="ruleForm" props={{ model: formModel }} rules={this.rules}>
-        {this.renderData.map((item) => {
-          return h(questionWrapper, {
-            key: item.field,
-            class: 'gap',
-            props: {
-              moduleConfig: item,
-              qIndex: item.qIndex,
-              indexNumber: item.indexNumber,
-              showTitle: true,
-            },
-            on: {
-              ...this.$listeners,
-              change: this.handleChange,
-            },
-          });
-        })}
-      </Form>
-    );
-  },
-});
-</script>
diff --git a/web/src/render/hook/useProgress.js b/web/src/render/hook/useProgress.js
deleted file mode 100644
index 058cab53..00000000
--- a/web/src/render/hook/useProgress.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import store from '../store/index';
-import { computed } from 'vue';
-export const useProgressBar = () => {
-  const isVariableEmpty = (variable) => {
-    if (variable === undefined || variable === null) {
-      return true;
-    }
-    if (typeof variable === 'string' && variable.trim() === '') {
-      return true;
-    }
-    if (Array.isArray(variable) && variable.length === 0) {
-      return true;
-    }
-    if (typeof variable === 'object' && Object.keys(variable).length === 0) {
-      return true;
-    }
-    return false;
-  };
-
-  const surveySchedule = computed(() => {
-    let data = {
-      fillCount: 0,
-      topicCount: 0,
-    };
-    const formValues = store.state.formValues;
-    for (let key in formValues) {
-      if (key.split('_').length > 1) continue;
-      data.topicCount++;
-      if (!isVariableEmpty(formValues[key])) data.fillCount++;
-    }
-    return data;
-  });
-
-  const precent = computed(() => {
-    const { fillCount, topicCount } = surveySchedule.value;
-    return Math.floor((100 / topicCount) * fillCount) + '%';
-  });
-
-  return { surveySchedule, precent };
-};
diff --git a/web/src/render/hooks/useCommandComponent.ts b/web/src/render/hooks/useCommandComponent.ts
new file mode 100644
index 00000000..2c6b6fa9
--- /dev/null
+++ b/web/src/render/hooks/useCommandComponent.ts
@@ -0,0 +1,88 @@
+import { createVNode, getCurrentInstance, render } from 'vue'
+import type { AppContext, Component, ComponentPublicInstance, VNode } from 'vue'
+
+export interface Options {
+  visible?: boolean
+  onClose?: () => void
+  appendTo?: HTMLElement | string
+  [key: string]: unknown
+}
+
+export interface CommandComponent {
+  (options: Options): VNode
+  close: () => void
+}
+
+const getAppendToElement = (props: Options): HTMLElement => {
+  let appendTo: HTMLElement | null = document.body
+  if (props.appendTo) {
+    if (typeof props.appendTo === 'string') {
+      appendTo = document.querySelector<HTMLElement>(props.appendTo)
+    }
+    if (props.appendTo instanceof HTMLElement) {
+      appendTo = props.appendTo
+    }
+    if (!(appendTo instanceof HTMLElement)) {
+      appendTo = document.body
+    }
+  }
+  return appendTo
+}
+
+const initInstance = <T extends Component>(
+  Component: T,
+  props: Options,
+  container: HTMLElement,
+  appContext: AppContext | null = null
+) => {
+  const vNode = createVNode(Component, props)
+  vNode.appContext = appContext
+  render(vNode, container)
+
+  getAppendToElement(props).appendChild(container)
+  return vNode
+}
+
+export const useCommandComponent = <T extends Component>(Component: T): CommandComponent => {
+  const appContext = getCurrentInstance()?.appContext
+  if (appContext) {
+    const currentProvides = (getCurrentInstance() as any)?.provides
+    Reflect.set(appContext, 'provides', { ...appContext.provides, ...currentProvides })
+  }
+
+  const container = document.createElement('div')
+
+  const close = () => {
+    render(null, container)
+    container.parentNode?.removeChild(container)
+  }
+
+  const CommandComponent = (options: Options): VNode => {
+    if (!Reflect.has(options, 'visible')) {
+      options.visible = true
+    }
+    if (typeof options.onClose !== 'function') {
+      options.onClose = close
+    } else {
+      const originOnClose = options.onClose
+      options.onClose = () => {
+        originOnClose()
+        close()
+      }
+    }
+    const vNode = initInstance<T>(Component, options, container, appContext)
+    const vm = vNode.component?.proxy as ComponentPublicInstance<Options>
+    for (const prop in options) {
+      if (Reflect.has(options, prop) && !Reflect.has(vm.$props, prop)) {
+        vm[prop as keyof ComponentPublicInstance] = options[prop]
+      }
+    }
+    return vNode
+  }
+
+  CommandComponent.close = close
+
+  return CommandComponent
+}
+
+export default useCommandComponent
diff --git a/web/src/render/hooks/useProgress.js b/web/src/render/hooks/useProgress.js
new file mode 100644
index 00000000..731b0a48
--- /dev/null
+++ b/web/src/render/hooks/useProgress.js
@@ -0,0 +1,44 @@
+import store from '../store/index'
+import { computed } from 'vue'
+export const useProgressBar = () => {
+  const isVariableEmpty = (variable) => {
+    if (variable === undefined || variable === null) {
+      return true
+    }
+    if (typeof variable === 'string' && variable.trim() === '') {
+      return true
+    }
+    if (Array.isArray(variable) && variable.length === 0) {
+      return true
+    }
+    if (typeof variable === 'object' && Object.keys(variable).length === 0) {
+      return true
+    }
+    return false
+  }
+
+  const surveySchedule = computed(() => {
+    let data = {
+      fillCount: 0,
+      topicCount: 0
+    }
+    const formValues = store.state.formValues
+    for (let key in formValues) {
+      if (key.split('_').length > 1) continue
+
+      data.topicCount++
+      if (!isVariableEmpty(formValues[key])) {
+        data.fillCount++
+      }
+    }
+
+    return data
+  })
+
+  const percent = computed(() => {
+    const { fillCount, topicCount } = surveySchedule.value
+    return Math.floor((100 / topicCount) * fillCount) + '%'
+  })
+
+  return { surveySchedule, percent }
+}
diff --git a/web/src/render/index.html b/web/src/render/index.html
new file mode 100644
index 00000000..e555720c
--- /dev/null
+++ b/web/src/render/index.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="/imgs/favicon.ico" />
+    <title></title>
+    <script>
+      ;(function () {
+        function resetRemUnit() {
+          var PC_W = 750
+          var docEl = window.document.documentElement
+          var width = docEl.getBoundingClientRect().width || 375
+
+          if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
+            width = width < PC_W ? width : PC_W
+            docEl.className += ' ispc-html'
+          }
+
+          var f = Math.min(width / 7.5, 50)
+          docEl.style.fontSize = f + 'px'
+
+          var d = window.document.createElement('div')
+          d.style.width = '1rem'
+          d.style.display = 'none'
+          var head = window.document.getElementsByTagName('head')[0]
+          head.appendChild(d)
+          var realf = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'))
+
+          if (f !== realf) {
+            docEl.style.fontSize = f * (f / realf) + 'px'
+          }
+        }
+        resetRemUnit()
+        window.addEventListener('resize', resetRemUnit)
+      })()
+    </script>
+    <style></style>
+  </head>
+
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/web/src/render/main.js b/web/src/render/main.js
index d378be33..cd5b7278 100644
--- a/web/src/render/main.js
+++ b/web/src/render/main.js
@@ -1,22 +1,17 @@
-import Vue from 'vue';
-import App from './App.vue';
-import store from './store';
-import { filterXSS } from '@/common/xss';
-import DialogPlugin from '@/render/plugins/dialog/index';
-import './styles/reset.scss';
+import { createApp } from 'vue'
+import App from './App.vue'
+import EventBus from './utils/eventbus'
 
-Vue.config.productionTip = false;
+import store from './store'
+import './styles/reset.scss'
 
-Vue.use(DialogPlugin);
+const app = createApp(App)
 
-Vue.directive('safe-html', {
-  inserted: function (el, binding) {
-    const res = filterXSS(binding.value);
-    el.innerHTML = res;
-  },
-});
+const $bus = new EventBus()
+app.provide('$bus', $bus)
+// 挂载到this上
+app.config.globalProperties.$bus = $bus
 
-new Vue({
-  render: (h) => h(App),
-  store,
-}).$mount('#app');
+app.use(store)
+
+app.mount('#app')
diff --git a/web/src/render/pages/emptyPage.vue b/web/src/render/pages/EmptyPage.vue
similarity index 96%
rename from web/src/render/pages/emptyPage.vue
rename to web/src/render/pages/EmptyPage.vue
index 3c5b94b4..1d5df382 100644
--- a/web/src/render/pages/emptyPage.vue
+++ b/web/src/render/pages/EmptyPage.vue
@@ -9,8 +9,8 @@
 
 <script>
 export default {
-  name: 'NotFound',
-};
+  name: 'NotFound'
+}
 </script>
 
 <style scoped>
diff --git a/web/src/render/pages/errorPage.vue b/web/src/render/pages/ErrorPage.vue
similarity index 75%
rename from web/src/render/pages/errorPage.vue
rename to web/src/render/pages/ErrorPage.vue
index 69a0a9f8..c7fb81f5 100755
--- a/web/src/render/pages/errorPage.vue
+++ b/web/src/render/pages/ErrorPage.vue
@@ -6,7 +6,7 @@
         <div class="bottom-word" v-html="errorMsg"></div>
       </div>
     </div>
-  </div>  
+  </div>
 </template>
 <script>
 export default {
@@ -14,36 +14,35 @@ export default {
   data() {
     return {
       imageMap: {
-        overTime: '/imgs/icons/overtime.webp',
-      },
-    };
+        overTime: '/imgs/icons/overtime.webp'
+      }
+    }
   },
   computed: {
     errorImageUrl() {
-      return this.imageMap[this.errorType] || this.imageMap.default;
+      return this.imageMap[this.errorType] || this.imageMap.default
     },
     errorType() {
-      return this.$store.state?.errorInfo?.errorType;
+      return this.$store.state?.errorInfo?.errorType
     },
     errorMsg() {
-      return this.$store.state?.errorInfo?.errorMsg;
-    },
+      return this.$store.state?.errorInfo?.errorMsg
+    }
   },
-  mounted() {},
-};
+  mounted() {}
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
-
+<style lang="scss" scoped>
 .result-page-wrap {
   width: 100%;
   flex: 1;
   text-align: center;
   overflow: hidden;
   background: var(--primary-background-color);
-  
+
   padding: 0 0.3rem;
-  .result-page{
-    background: rgba(255, 255, 255, var(--opacity)); 
+  .result-page {
+    background: rgba(255, 255, 255, var(--opacity));
     display: flex;
     flex-direction: column;
     height: 100%;
diff --git a/web/src/render/pages/IndexPage.vue b/web/src/render/pages/IndexPage.vue
new file mode 100644
index 00000000..296596ec
--- /dev/null
+++ b/web/src/render/pages/IndexPage.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="index">
+    <progressBar />
+    <div class="wrapper" ref="box">
+      <HeaderSetter></HeaderSetter>
+      <div class="content">
+        <MainTitle></MainTitle>
+        <MainRenderer ref="main"></MainRenderer>
+        <submit :validate="validate" :renderData="renderData" @submit="onSubmit"></submit>
+        <LogoIcon />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderSetter from '../components/HeaderSetter.vue'
+import MainTitle from '../components/MainTitle.vue'
+import submit from '../components/SubmitSetter.vue'
+import MainRenderer from '../components/MainRenderer.vue'
+import AlertDialog from '../components/AlertDialog.vue'
+import ConfirmDialog from '../components/ConfirmDialog.vue'
+import progressBar from '../components/ProgressBar.vue'
+import LogoIcon from '../components/LogoIcon.vue'
+
+import { submitForm } from '../api/survey'
+import encrypt from '../utils/encrypt'
+
+import useCommandComponent from '../hooks/useCommandComponent'
+
+export default {
+  name: 'indexPage',
+  props: {
+    questionInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    isMobile: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    HeaderSetter,
+    MainTitle,
+    submit,
+    MainRenderer,
+    progressBar,
+    LogoIcon
+  },
+  computed: {
+    formModel() {
+      return this.$store.getters.formModel
+    },
+    confirmAgain() {
+      return this.$store.state.submitConf.confirmAgain
+    },
+    surveyPath() {
+      return this.$store.state.surveyPath
+    },
+    renderData() {
+      return this.$store.getters.renderData
+    },
+    encryptInfo() {
+      return this.$store.state.encryptInfo
+    }
+  },
+  created() {
+    this.alert = useCommandComponent(AlertDialog)
+    this.confirm = useCommandComponent(ConfirmDialog)
+  },
+  methods: {
+    validate(cbk) {
+      const index = 0
+      this.$refs.main.$refs.formGroup[index].validate(cbk)
+    },
+    onSubmit() {
+      const { again_text, is_again } = this.confirmAgain
+      if (is_again) {
+        this.confirm({
+          title: again_text,
+          onConfirm: async () => {
+            try {
+              await this.submitForm()
+            } catch (error) {
+              console.error(error)
+            } finally {
+              this.confirm.close()
+            }
+          }
+        })
+      } else {
+        this.submitForm()
+      }
+    },
+    getSubmitData() {
+      const result = {
+        surveyPath: this.surveyPath,
+        data: JSON.stringify(this.formModel),
+        difTime: Date.now() - this.$store.state.enterTime,
+        clientTime: Date.now()
+      }
+      if (this.encryptInfo?.encryptType) {
+        result.encryptType = this.encryptInfo?.encryptType
+        result.data = encrypt[result.encryptType]({
+          data: result.data,
+          secretKey: this.encryptInfo?.data?.secretKey
+        })
+        if (this.encryptInfo?.data?.sessionId) {
+          result.sessionId = this.encryptInfo.data.sessionId
+        }
+      } else {
+        result.data = JSON.stringify(result.data)
+      }
+
+      return result
+    },
+    async submitForm() {
+      try {
+        const submitData = this.getSubmitData()
+        const res = await submitForm(submitData)
+        if (res.code === 200) {
+          this.$store.commit('setRouter', 'successPage')
+        } else {
+          this.alert({
+            title: res.errmsg || '提交失败'
+          })
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.index {
+  // padding-bottom: 0.8rem;
+  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/successPage.vue b/web/src/render/pages/SuccessPage.vue
similarity index 75%
rename from web/src/render/pages/successPage.vue
rename to web/src/render/pages/SuccessPage.vue
index 2a79d6ac..171cdbfb 100644
--- a/web/src/render/pages/successPage.vue
+++ b/web/src/render/pages/SuccessPage.vue
@@ -3,28 +3,28 @@
     <div class="result-page">
       <div class="result-content">
         <img src="/imgs/icons/success.webp" />
-        <div class="msg" v-safe-html="successMsg"></div>
+        <div class="msg" v-html="successMsg"></div>
       </div>
-      <logo></logo>
+      <LogoIcon />
     </div>
   </div>
 </template>
 <script>
-import logo from '../components/logo.vue';
+import LogoIcon from '../components/LogoIcon.vue'
 export default {
   name: 'resultPage',
-  components: {logo},
+  components: { LogoIcon },
   computed: {
     submitConf() {
-      return this.$store?.state?.submitConf || {};
+      return this.$store?.state?.submitConf || {}
     },
     successMsg() {
-      return this.submitConf?.msgContent?.msg_200 || '提交成功';
-    },
-  },
-};
+      return this.submitConf?.msgContent?.msg_200 || '提交成功'
+    }
+  }
+}
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped>
+<style lang="scss" scoped>
 @import '@/render/styles/variable.scss';
 
 .result-page-wrap {
@@ -33,10 +33,10 @@ export default {
   text-align: center;
   overflow: hidden;
   background: var(--primary-background-color);
-  
+
   padding: 0 0.3rem;
-  .result-page{
-    background: rgba(255, 255, 255, var(--opacity)); 
+  .result-page {
+    background: rgba(255, 255, 255, var(--opacity));
     display: flex;
     flex-direction: column;
     height: 100%;
diff --git a/web/src/render/pages/index.vue b/web/src/render/pages/index.vue
deleted file mode 100644
index 9df1ac08..00000000
--- a/web/src/render/pages/index.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-  <div class="index">
-    <progressBar />
-    <div class="wrapper" ref="box">
-      <Header></Header>
-      <div class="content">
-        <mainTitle></mainTitle>
-        <mainRenderer ref="main"></mainRenderer>
-        <submit
-          :validate="validate"
-          :renderData="renderData"
-          @submit="onSubmit"
-        ></submit>
-        <logo></logo>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Header from '../components/header.vue';
-import mainTitle from '../components/mainTitle.vue'
-import submit from '../components/submit.vue';
-import mainRenderer from '../components/mainRenderer';
-import progressBar from '../components/progressBar';
-import { submitForm } from '@/render/api/survey';
-import encrypt from '../utils/encrypt';
-import logo from '../components/logo.vue';
-
-export default {
-  name: 'indexPage',
-  props: {
-    questionInfo: {
-      type: Object,
-      default: () => ({}),
-    },
-    isMobile: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    Header,
-    mainTitle,
-    submit,
-    mainRenderer,
-    progressBar,
-    logo,
-  },
-  computed: {
-    formModel() {
-      return this.$store.getters.formModel;
-    },
-    confirmAgain() {
-      return this.$store.state.submitConf.confirmAgain;
-    },
-    surveyPath() {
-      return this.$store.state.surveyPath;
-    },
-    renderData() {
-      return this.$store.getters.renderData;
-    },
-    encryptInfo() {
-      return this.$store.state.encryptInfo;
-    },
-  },
-  methods: {
-    validate(cbk) {
-      const index = 0;
-      this.$refs.main.$refs.formGroup[index].$refs.ruleForm.validate(cbk);
-    },
-    onSubmit() {
-      const { again_text, is_again } = this.confirmAgain;
-      if (is_again) {
-        this.$dialog.confirm({
-          title: again_text,
-          onConfirm: async (closeDialogFn) => {
-            try {
-              await this.submitForm();
-            } catch (error) {
-              console.error(error);
-            } finally {
-              closeDialogFn();
-            }
-          },
-        });
-      } else {
-        this.submitForm();
-      }
-    },
-    getSubmitData() {
-      const result = {
-        surveyPath: this.surveyPath,
-        data: JSON.stringify(this.formModel),
-        difTime: Date.now() - this.$store.state.enterTime,
-        clientTime: Date.now(),
-      };
-      if (this.encryptInfo?.encryptType) {
-        result.encryptType = this.encryptInfo?.encryptType;
-        result.data = encrypt[result.encryptType]({
-          data: result.data,
-          secretKey: this.encryptInfo?.data?.secretKey,
-        });
-        if (this.encryptInfo?.data?.sessionId) {
-          result.sessionId = this.encryptInfo.data.sessionId;
-        }
-      } else {
-        result.data = JSON.stringify(result.data);
-      }
-
-      return result;
-    },
-    async submitForm() {
-      try {
-        const submitData = this.getSubmitData();
-        const res = await submitForm(submitData);
-        if (res.code === 200) {
-          this.$store.commit('setRouter', 'successPage');
-        } else {
-          this.$dialog.alert({
-            title: res.errmsg || '提交失败',
-          });
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.index {
-  // padding-bottom: 0.8rem;
-  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/plugins/dialog/index.js b/web/src/render/plugins/dialog/index.js
index 77add5d2..433c334d 100644
--- a/web/src/render/plugins/dialog/index.js
+++ b/web/src/render/plugins/dialog/index.js
@@ -1,56 +1,56 @@
-import confirm from '../../components/confirm.vue';
-import alert from '../../components/alert.vue';
+import ConfirmDialog from '../../components/ConfirmDialog.vue'
+import AlertDialog from '../../components/AlertDialog.vue'
 
-import { isFunction as _isFunction } from 'lodash-es';
+import { isFunction as _isFunction } from 'lodash-es'
 
 export default {
   install(Vue) {
     Vue.prototype.$dialog = {
       confirm(options) {
-        const MyComponent = Vue.extend(confirm);
+        const MyComponent = Vue.extend(ConfirmDialog)
         const instance = new MyComponent({
-          propsData: options,
-        });
+          propsData: options
+        })
         const closeConfirm = () => {
           if (instance && instance.$el) {
-            instance.$el.remove();
+            instance.$el.remove()
           }
-        };
+        }
         instance.$on('cancel', () => {
           if (options?.onCancel && _isFunction(options.onCancel)) {
-            options.onCancel(closeConfirm);
+            options.onCancel(closeConfirm)
           } else {
-            closeConfirm();
+            closeConfirm()
           }
-        });
+        })
         instance.$on('confirm', () => {
           if (options?.onConfirm && _isFunction(options.onConfirm)) {
-            options.onConfirm(closeConfirm);
+            options.onConfirm(closeConfirm)
           }
-        });
-        instance.$mount();
-        document.body.append(instance.$el);
+        })
+        instance.$mount()
+        document.body.append(instance.$el)
       },
       alert(options) {
-        const MyComponent = Vue.extend(alert);
+        const MyComponent = Vue.extend(AlertDialog)
         const instance = new MyComponent({
-          propsData: options,
-        });
+          propsData: options
+        })
         const closeConfirm = () => {
           if (instance && instance.$el) {
-            instance.$el.remove();
+            instance.$el.remove()
           }
-        };
+        }
         instance.$on('confirm', () => {
           if (options?.onConfirm && _isFunction(options.onConfirm)) {
-            options.onConfirm(closeConfirm);
+            options.onConfirm(closeConfirm)
           } else {
-            closeConfirm();
+            closeConfirm()
           }
-        });
-        instance.$mount();
-        document.body.append(instance.$el);
-      },
-    };
-  },
-};
+        })
+        instance.$mount()
+        document.body.append(instance.$el)
+      }
+    }
+  }
+}
diff --git a/web/src/render/store/actions.js b/web/src/render/store/actions.js
index 88c8bf58..50dec853 100644
--- a/web/src/render/store/actions.js
+++ b/web/src/render/store/actions.js
@@ -1,67 +1,67 @@
-import moment from 'moment';
+import moment from 'moment'
 // 引入中文
-import 'moment/locale/zh-cn';
+import 'moment/locale/zh-cn'
 // 设置中文
-moment.locale('zh-cn');
-import adapter from '../adapter';
-import { queryVote, getEncryptInfo } from '@/render/api/survey';
-import { CODE_MAP } from '@/management/api/base';
+moment.locale('zh-cn')
+import adapter from '../adapter'
+import { queryVote, getEncryptInfo } from '@/render/api/survey'
+/**
+ * CODE_MAP不从management引入，在dev阶段，会导致B端 router被加载，进而导致C端路由被添加 baseUrl: /management
+ */
+const CODE_MAP = {
+  SUCCESS: 200,
+  ERROR: 500,
+  NO_AUTH: 403
+}
 
 export default {
   // 初始化
-  init(
-    { commit, dispatch },
-    { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }
-  ) {
-    commit('setEnterTime');
-    const { begTime, endTime, answerBegTime, answerEndTime } = baseConf;
-    const { msgContent } = submitConf;
-    const now = Date.now();
+  init({ commit, dispatch }, { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }) {
+    commit('setEnterTime')
+    const { begTime, endTime, answerBegTime, answerEndTime } = baseConf
+    const { msgContent } = submitConf
+    const now = Date.now()
     if (now < new Date(begTime).getTime()) {
-      commit('setRouter', 'errorPage');
+      commit('setRouter', 'errorPage')
       commit('setErrorInfo', {
         errorType: 'overTime',
         errorMsg: `<p>问卷未到开始填写时间，暂时无法进行填写<p/>
-                   <p>开始时间为: ${begTime}</p>`,
-      });
-      return;
+                   <p>开始时间为: ${begTime}</p>`
+      })
+      return
     } else if (now > new Date(endTime).getTime()) {
-      commit('setRouter', 'errorPage');
+      commit('setRouter', 'errorPage')
       commit('setErrorInfo', {
         errorType: 'overTime',
-        errorMsg: msgContent.msg_9001 || '您来晚了，感谢支持问卷~',
-      });
-      return;
+        errorMsg: msgContent.msg_9001 || '您来晚了，感谢支持问卷~'
+      })
+      return
     } else if (answerBegTime && answerEndTime) {
-      const momentNow = moment();
-      const todayStr = momentNow.format('yyyy-MM-DD');
-      const momentStartTime = moment(`${todayStr} ${answerBegTime}`);
-      const momentEndTime = moment(`${todayStr} ${answerEndTime}`);
-      if (
-        momentNow.isBefore(momentStartTime) ||
-        momentNow.isAfter(momentEndTime)
-      ) {
-        commit('setRouter', 'errorPage');
+      const momentNow = moment()
+      const todayStr = momentNow.format('yyyy-MM-DD')
+      const momentStartTime = moment(`${todayStr} ${answerBegTime}`)
+      const momentEndTime = moment(`${todayStr} ${answerEndTime}`)
+      if (momentNow.isBefore(momentStartTime) || momentNow.isAfter(momentEndTime)) {
+        commit('setRouter', 'errorPage')
         commit('setErrorInfo', {
           errorType: 'overTime',
           errorMsg: `<p>不在答题时间范围内，暂时无法进行填写<p/>
-                    <p>答题时间为: ${answerBegTime} ~ ${answerEndTime}</p>`,
-        });
-        return;
+                    <p>答题时间为: ${answerBegTime} ~ ${answerEndTime}</p>`
+        })
+        return
       }
     }
-    commit('setRouter', 'indexPage');
+    commit('setRouter', 'indexPage')
 
     // 根据初始的schema生成questionData, questionSeq, rules, formValues, 这四个字段
-    const { questionData, questionSeq, rules, formValues } =
-      adapter.generateData({
-        bannerConf,
-        baseConf,
-        bottomConf,
-        dataConf,
-        skinConf,
-        submitConf,
-      });
+    const { questionData, questionSeq, rules, formValues } = adapter.generateData({
+      bannerConf,
+      baseConf,
+      bottomConf,
+      dataConf,
+      skinConf,
+      submitConf
+    })
 
     // 将数据设置到state上
     commit('assignState', {
@@ -74,53 +74,53 @@ export default {
       dataConf,
       skinConf,
       submitConf,
-      formValues,
-    });
+      formValues
+    })
     // 获取已投票数据
-    dispatch('initVoteData');
+    dispatch('initVoteData')
   },
   // 用户输入或者选择后，更新表单数据
   changeData({ commit }, data) {
-    commit('changeFormData', data);
+    commit('changeFormData', data)
   },
   // 初始化投票题的数据
   async initVoteData({ state, commit }) {
-    const questionData = state.questionData;
-    const surveyPath = state.surveyPath;
+    const questionData = state.questionData
+    const surveyPath = state.surveyPath
 
-    const fieldList = [];
+    const fieldList = []
 
     for (const field in questionData) {
-      const { type } = questionData[field];
+      const { type } = questionData[field]
       if (/vote/.test(type)) {
-        fieldList.push(field);
+        fieldList.push(field)
       }
     }
 
     if (fieldList.length <= 0) {
-      return;
+      return
     }
     try {
       const voteRes = await queryVote({
         surveyPath,
-        fieldList: fieldList.join(','),
-      });
+        fieldList: fieldList.join(',')
+      })
 
       if (voteRes.code === 200) {
-        commit('setVoteMap', voteRes.data);
+        commit('setVoteMap', voteRes.data)
       }
     } catch (error) {
-      console.log(error);
+      console.log(error)
     }
   },
   async getEncryptInfo({ commit }) {
     try {
-      const res = await getEncryptInfo();
+      const res = await getEncryptInfo()
       if (res.code === CODE_MAP.SUCCESS) {
-        commit('setEncryptInfo', res.data);
+        commit('setEncryptInfo', res.data)
       }
     } catch (error) {
-      console.log(error);
+      console.log(error)
     }
-  },
-};
+  }
+}
diff --git a/web/src/render/store/getters.js b/web/src/render/store/getters.js
index c2f3f476..9764b6b3 100644
--- a/web/src/render/store/getters.js
+++ b/web/src/render/store/getters.js
@@ -1,101 +1,97 @@
-import { flatten } from 'lodash-es';
+import { flatten } from 'lodash-es'
 
 export default {
   // 题目列表
   renderData: (state) => {
-    const { questionSeq, questionData, formValues } = state;
-    let index = 1;
+    const { questionSeq, questionData, formValues } = state
+    let index = 1
     return (
       questionSeq &&
       questionSeq.reduce((pre, item) => {
-        const questionArr = [];
+        const questionArr = []
         for (const questionKey of item) {
-          const question = { ...questionData[questionKey] };
-          const { type, extraOptions, options, rangeConfig } = question;
+          const question = { ...questionData[questionKey] }
+          const { type, extraOptions, options, rangeConfig } = question
 
-          const questionVal = formValues[questionKey];
+          const questionVal = formValues[questionKey]
 
-          question.value = questionVal;
+          question.value = questionVal
           // 本题开启了
           if (question.showIndex) {
-            question.indexNumber = index++;
+            question.indexNumber = index++
           }
 
-          const allOptions = [];
+          const allOptions = []
           if (Array.isArray(extraOptions)) {
-            allOptions.push(...extraOptions);
+            allOptions.push(...extraOptions)
           }
           if (Array.isArray(options)) {
-            allOptions.push(...options);
+            allOptions.push(...options)
           }
 
-          let othersValue = {};
-          let voteTotal = 0;
-          const voteMap = state.voteMap;
+          let othersValue = {}
+          let voteTotal = 0
+          const voteMap = state.voteMap
           if (/vote/.test(type)) {
-            voteTotal = voteMap?.[questionKey]?.total || 0;
+            voteTotal = voteMap?.[questionKey]?.total || 0
           }
           // 遍历所有的选项
           for (const optionItem of allOptions) {
             // 开启了更多输入框，生成othersValue的值
             if (optionItem.others) {
-              const opKey = `${questionKey}_${optionItem.hash}`;
-              optionItem.othersKey = opKey;
-              optionItem.othersValue = formValues[opKey];
-              othersValue[opKey] = formValues[opKey];
+              const opKey = `${questionKey}_${optionItem.hash}`
+              optionItem.othersKey = opKey
+              optionItem.othersValue = formValues[opKey]
+              othersValue[opKey] = formValues[opKey]
             }
 
             // 投票题，用户手动选择选项后，要实时更新展示数据和进度
             if (/vote/.test(type)) {
-              const voteCount = voteMap?.[questionKey]?.[optionItem.hash] || 0;
+              const voteCount = voteMap?.[questionKey]?.[optionItem.hash] || 0
               if (
                 Array.isArray(questionVal)
                   ? questionVal.includes(optionItem.hash)
                   : questionVal === optionItem.hash
               ) {
-                optionItem.voteCount = voteCount + 1;
-                voteTotal = voteTotal + 1;
+                optionItem.voteCount = voteCount + 1
+                voteTotal = voteTotal + 1
               } else {
-                optionItem.voteCount = voteCount;
+                optionItem.voteCount = voteCount
               }
-              question.voteTotal = voteTotal;
+              question.voteTotal = voteTotal
             }
           }
 
           // 开启了更多输入框，要将当前的value赋值给question
-          if (
-            rangeConfig &&
-            Object.keys(rangeConfig).length > 0 &&
-            rangeConfig[questionVal]
-          ) {
-            const curRange = rangeConfig[questionVal];
+          if (rangeConfig && Object.keys(rangeConfig).length > 0 && rangeConfig[questionVal]) {
+            const curRange = rangeConfig[questionVal]
             if (curRange?.isShowInput) {
-              const rangeKey = `${questionKey}_${questionVal}`;
-              curRange.othersKey = rangeKey;
-              curRange.othersValue = formValues[rangeKey];
-              othersValue[rangeKey] = formValues[rangeKey];
+              const rangeKey = `${questionKey}_${questionVal}`
+              curRange.othersKey = rangeKey
+              curRange.othersValue = formValues[rangeKey]
+              othersValue[rangeKey] = formValues[rangeKey]
             }
           }
 
           // 将othersValue赋值给
-          question.othersValue = othersValue;
-          questionArr.push(question);
+          question.othersValue = othersValue
+          questionArr.push(question)
         }
 
         if (questionArr && questionArr.length) {
-          pre.push(questionArr);
+          pre.push(questionArr)
         }
-        return pre;
+        return pre
       }, [])
-    );
+    )
   },
   // 根据渲染的题目生成的用户输入或者选择的数据
   formModel: (state, getters) => {
-    const { renderData } = getters;
+    const { renderData } = getters
     const formdata = flatten(renderData).reduce((pre, current) => {
-      const { othersValue, type, field } = current;
+      const { othersValue, type, field } = current
       if (othersValue && Object.keys(othersValue).length) {
-        Object.assign(pre, othersValue);
+        Object.assign(pre, othersValue)
       }
       switch (type) {
         // case 'fillin':
@@ -110,12 +106,12 @@ export default {
         //   Object.assign(pre, { [field]: formValues[field] })
         //   break
         default:
-          Object.assign(pre, { [field]: current.value });
-          break;
+          Object.assign(pre, { [field]: current.value })
+          break
       }
 
-      return pre;
-    }, {});
-    return formdata;
-  },
-};
+      return pre
+    }, {})
+    return formdata
+  }
+}
diff --git a/web/src/render/store/index.js b/web/src/render/store/index.js
index eaeceff0..4013b40c 100644
--- a/web/src/render/store/index.js
+++ b/web/src/render/store/index.js
@@ -1,15 +1,13 @@
-import Vue from 'vue';
-import Vuex, { Store } from 'vuex';
-Vue.use(Vuex);
+import { createStore } from 'vuex'
 
-import state from './state';
-import getters from './getters';
-import mutations from './mutations';
-import actions from './actions';
+import state from './state'
+import getters from './getters'
+import mutations from './mutations'
+import actions from './actions'
 
-export default new Store({
+export default createStore({
   state,
   getters,
   mutations,
-  actions,
-});
+  actions
+})
diff --git a/web/src/render/store/mutations.js b/web/src/render/store/mutations.js
index f3fd4493..d88fb2a1 100644
--- a/web/src/render/store/mutations.js
+++ b/web/src/render/store/mutations.js
@@ -1,46 +1,45 @@
-import Vue from 'vue';
-import { forEach, set } from 'lodash-es';
+import { forEach, set } from 'lodash-es'
 export default {
   // 将数据设置到state上
   assignState(state, data) {
     forEach(data, (value, key) => {
-      Vue.set(state, key, value);
-    });
+      state[key] = value
+    })
   },
   setQuestionData(state, data) {
-    state.questionData = data;
+    state.questionData = data
   },
   setRouter(state, data) {
-    state.router = data;
+    state.router = data
   },
   setErrorInfo(state, { errorType, errorMsg }) {
     state.errorInfo = {
       errorType,
-      errorMsg,
-    };
+      errorMsg
+    }
   },
   changeFormData(state, data) {
-    let { key, value } = data;
-    set(state, `formValues.${key}`, value);
+    let { key, value } = data
+    set(state, `formValues.${key}`, value)
     // set(state, `questionData.${key}.value`, value)
   },
   changeSelectMoreData(state, data) {
-    const { key, value, field } = data;
-    set(state, `questionData.${field}.othersValue.${key}`, value);
+    const { key, value, field } = data
+    set(state, `questionData.${field}.othersValue.${key}`, value)
   },
   setEnterTime(state) {
-    state.enterTime = Date.now();
+    state.enterTime = Date.now()
   },
   setSurveyPath(state, data) {
-    state.surveyPath = data;
+    state.surveyPath = data
   },
   setVoteMap(state, data) {
-    Vue.set(state, 'voteMap', data);
+    state.voteMap = data
   },
   setQuestionSeq(state, data) {
-    state.questionSeq = data;
+    state.questionSeq = data
   },
   setEncryptInfo(state, data) {
-    state.encryptInfo = data;
-  },
-};
+    state.encryptInfo = data
+  }
+}
diff --git a/web/src/render/store/state.js b/web/src/render/store/state.js
index b69de743..ac3f523f 100644
--- a/web/src/render/store/state.js
+++ b/web/src/render/store/state.js
@@ -1,4 +1,4 @@
-import { isMobile } from '../utils/index';
+import { isMobile } from '../utils/index'
 
 export default {
   surveyPath: '',
@@ -7,10 +7,10 @@ export default {
   isMobile: isMobile(),
   errorInfo: {
     errorType: '',
-    errorMsg: '',
+    errorMsg: ''
   },
   enterTime: null,
   questionSeq: [], // 题目的顺序，因为可能会有分页的情况，所以是一个二维数组[[qid1, qid2], [qid3,qid4]]
   voteMap: {},
-  encryptInfo: null,
-};
+  encryptInfo: null
+}
diff --git a/web/src/render/styles/default.scss b/web/src/render/styles/default.scss
index 4b67849b..eaebf2a6 100644
--- a/web/src/render/styles/default.scss
+++ b/web/src/render/styles/default.scss
@@ -1,4 +1,4 @@
-$primary-color: #FAA600;
+$primary-color: #faa600;
 $primary-color-light: hsl(48, 100%, 97%);
 
 $title-color-deep: #292a36;
@@ -15,7 +15,6 @@ $spliter-color: #f7f7f7;
 
 $error-color: #ec4e29;
 
-
 @import './variable';
 
 $title-size: 0.32rem;
diff --git a/web/src/render/styles/dialog.scss b/web/src/render/styles/dialog.scss
index 85eb6b08..55845cc4 100644
--- a/web/src/render/styles/dialog.scss
+++ b/web/src/render/styles/dialog.scss
@@ -18,9 +18,9 @@
 }
 
 .title {
-  font-size: .3rem;
+  font-size: 0.3rem;
   color: #4a4c5b;
   letter-spacing: 0;
   text-align: center;
   font-weight: 600;
-}
\ No newline at end of file
+}
diff --git a/web/src/render/styles/icon.scss b/web/src/render/styles/icon.scss
index 6c75ec54..6a01c53e 100644
--- a/web/src/render/styles/icon.scss
+++ b/web/src/render/styles/icon.scss
@@ -1,12 +1,13 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 4263882 */
-  src: url('//at.alicdn.com/t/c/font_4263882_y9jng0gwthr.woff2?t=1695631530492') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4263882_y9jng0gwthr.woff?t=1695631530492') format('woff'),
-       url('//at.alicdn.com/t/c/font_4263882_y9jng0gwthr.ttf?t=1695631530492') format('truetype');
+  font-family: 'iconfont'; /* Project id 4263882 */
+  src:
+    url('//at.alicdn.com/t/c/font_4263882_y9jng0gwthr.woff2?t=1695631530492') format('woff2'),
+    url('//at.alicdn.com/t/c/font_4263882_y9jng0gwthr.woff?t=1695631530492') format('woff'),
+    url('//at.alicdn.com/t/c/font_4263882_y9jng0gwthr.ttf?t=1695631530492') format('truetype');
 }
 
 .iconfont {
-  font-family: "iconfont" !important;
+  font-family: 'iconfont' !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -14,5 +15,5 @@
 }
 
 .icon-kaishi:before {
-  content: "\e6ad";
+  content: '\e6ad';
 }
diff --git a/web/src/render/styles/reset.scss b/web/src/render/styles/reset.scss
index 981aa5f0..236e4cee 100644
--- a/web/src/render/styles/reset.scss
+++ b/web/src/render/styles/reset.scss
@@ -7,7 +7,14 @@
 
 body {
   height: 100%;
-  font-family: "-apple-system", BlinkMacSystemFont, Droid Sans, Droid Sans Fallback, Helvetica Neue, Helvetica, Arial;
+  font-family:
+    '-apple-system',
+    BlinkMacSystemFont,
+    Droid Sans,
+    Droid Sans Fallback,
+    Helvetica Neue,
+    Helvetica,
+    Arial;
 }
 
 html {
@@ -28,7 +35,9 @@ input {
   background-color: #fff;
 }
 
-button, button:active, button:focus {
+button,
+button:active,
+button:focus {
   border: none;
 }
 
@@ -62,9 +71,13 @@ textarea::-webkit-input-placeholder {
   font-family: normal !important;
 }
 
-
 body {
-  font-family: Pingfang SC, 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
+  font-family:
+    Pingfang SC,
+    'Helvetica Neue',
+    Helvetica,
+    STHeiTi,
+    sans-serif;
   font-size: 14px;
   line-height: 1.42857143;
 }
@@ -191,4 +204,4 @@ a {
 
 a:hover * {
   text-decoration: none;
-}
\ No newline at end of file
+}
diff --git a/web/src/render/styles/variable.scss b/web/src/render/styles/variable.scss
index 553eaeff..2b0db56a 100644
--- a/web/src/render/styles/variable.scss
+++ b/web/src/render/styles/variable.scss
@@ -1,15 +1,15 @@
-$primary-color: #FA881A;
-$primary-color-light: #FEF3E8;
+$primary-color: #fa881a;
+$primary-color-light: #fef3e8;
 
-$title-color-deep: #292A36;
-$title-color: #4A4C5B;
-$font-color: #6E707C;
+$title-color-deep: #292a36;
+$title-color: #4a4c5b;
+$font-color: #6e707c;
 
-$placeholder-color: #C8C9CD;
+$placeholder-color: #c8c9cd;
 
-$disable-color: #F2F4F7;
-$border-color: #DEE2E6;
+$disable-color: #f2f4f7;
+$border-color: #dee2e6;
 
 $spliter-color: #f7f7f7;
 
-$error-color: #EC4E29;
+$error-color: #ec4e29;
diff --git a/web/src/render/utils/encrypt.js b/web/src/render/utils/encrypt.js
index 3db82973..1d325e5d 100644
--- a/web/src/render/utils/encrypt.js
+++ b/web/src/render/utils/encrypt.js
@@ -1,19 +1,19 @@
-import * as forge from 'node-forge';
+import * as forge from 'node-forge'
 
 function rsa({ data, secretKey }) {
-  const publicKeyObject = forge.pki.publicKeyFromPem(secretKey);
-  const dataArr = [];
-  const originData = encodeURIComponent(data);
-  const step = 200;
+  const publicKeyObject = forge.pki.publicKeyFromPem(secretKey)
+  const dataArr = []
+  const originData = encodeURIComponent(data)
+  const step = 200
   for (let i = 0; i < originData.length; i += step) {
     const encryptData = forge.util.encode64(
       publicKeyObject.encrypt(originData.slice(i, i + step), 'RSA-OAEP')
-    );
-    dataArr.push(encryptData);
+    )
+    dataArr.push(encryptData)
   }
-  return dataArr;
+  return dataArr
 }
 
 export default {
-  rsa,
-};
+  rsa
+}
diff --git a/web/src/render/utils/eventbus.js b/web/src/render/utils/eventbus.js
new file mode 100644
index 00000000..455d3332
--- /dev/null
+++ b/web/src/render/utils/eventbus.js
@@ -0,0 +1,27 @@
+export default class EventBus {
+  constructor() {
+    this.events = {}
+  }
+  emit(eventName, data) {
+    if (this.events[eventName]) {
+      this.events[eventName].forEach(function (fn) {
+        fn(data)
+      })
+    }
+  }
+  on(eventName, fn) {
+    this.events[eventName] = this.events[eventName] || []
+    this.events[eventName].push(fn)
+  }
+
+  off(eventName, fn) {
+    if (this.events[eventName]) {
+      for (var i = 0; i < this.events[eventName].length; i++) {
+        if (this.events[eventName][i] === fn) {
+          this.events[eventName].splice(i, 1)
+          break
+        }
+      }
+    }
+  }
+}
diff --git a/web/src/render/utils/index.js b/web/src/render/utils/index.js
index cb0ec650..610e506f 100644
--- a/web/src/render/utils/index.js
+++ b/web/src/render/utils/index.js
@@ -1,39 +1,32 @@
 export function isMobile() {
-  const userAgentInfo = navigator.userAgent;
-  const Agents = [
-    'Android',
-    'iPhone',
-    'SymbianOS',
-    'Windows Phone',
-    'iPad',
-    'iPod',
-  ];
-  let flag = false;
+  const userAgentInfo = navigator.userAgent
+  const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
+  let flag = false
   for (let v = 0; v < Agents.length; v++) {
     if (userAgentInfo.indexOf(Agents[v]) > 0) {
-      flag = true;
-      break;
+      flag = true
+      break
     }
   }
-  const w = document.body && document.body.clientWidth;
+  const w = document.body && document.body.clientWidth
 
   if (w > 960) {
-    return false;
+    return false
   } else if (w < 480) {
-    return true;
+    return true
   } else {
-    return flag;
+    return flag
   }
 }
 
 // 对链接做一个兼容转换，支持用户不配置http开头或者配置 // 开头
 export const formatLink = (url) => {
-  url = url.trim();
+  url = url.trim()
   if (!url) {
-    return url;
+    return url
   }
   if (url.startsWith('http') || url.startsWith('//')) {
-    return url;
+    return url
   }
-  return `http://${url}`;
-};
+  return `http://${url}`
+}
diff --git a/web/tsconfig.app.json b/web/tsconfig.app.json
new file mode 100644
index 00000000..2bdf1188
--- /dev/null
+++ b/web/tsconfig.app.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "allowJs": true
+  }
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 00000000..66b5e570
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
new file mode 100644
index 00000000..f0940630
--- /dev/null
+++ b/web/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
new file mode 100644
index 00000000..d7e5a8d8
--- /dev/null
+++ b/web/vite.config.ts
@@ -0,0 +1,117 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig, normalizePath } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import { createMpaPlugin, createPages } from 'vite-plugin-virtual-mpa'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+const isProd = process.env.NODE_ENV === 'production'
+
+const pages = createPages([
+  {
+    name: 'management',
+    filename: isProd ? 'management.html' : 'src/management/index.html',
+    template: 'src/management/index.html',
+    entry: '/src/management/main.js'
+  },
+  {
+    name: 'render',
+    filename: isProd ? 'render.html' : 'src/render/index.html',
+    template: 'src/render/index.html',
+    entry: '/src/render/main.js'
+  }
+])
+const mpaPlugin = createMpaPlugin({
+  pages,
+  verbose: true,
+  rewrites: [
+    {
+      from: /render/,
+      to: () => normalizePath('/src/render/index.html')
+    },
+    {
+      from: /\/|\/management\/.?/,
+      to: () => normalizePath('/src/management/index.html')
+    }
+  ]
+})
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  optimizeDeps: {
+    include: [
+      'lodash-es',
+      'async-validator',
+      'vuedraggable',
+      'element-plus/es',
+      '@wangeditor/editor-for-vue',
+      'element-plus/es/components/*/style/index',
+      'element-plus/dist/locale/zh-cn.mjs',
+      'clipboard',
+      'qrcode',
+      'moment',
+      'moment/locale/zh-cn'
+    ]
+  },
+  plugins: [
+    vue(),
+    vueJsx(),
+    AutoImport({
+      resolvers: [
+        ElementPlusResolver(),
+        // Auto import icon components
+        IconsResolver({
+          prefix: 'Icon'
+        })
+      ]
+    }),
+    Components({
+      resolvers: [
+        ElementPlusResolver({
+          importStyle: 'sass'
+        }),
+        // Auto register icon components
+        IconsResolver({
+          enabledCollections: ['ep']
+        })
+      ]
+    }),
+    Icons({
+      autoInstall: true
+    }),
+    mpaPlugin
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@management': fileURLToPath(new URL('./src/management', import.meta.url)),
+      '@materials': fileURLToPath(new URL('./src/materials', import.meta.url)),
+      '@render': fileURLToPath(new URL('./src/render', import.meta.url))
+    }
+  },
+  appType: 'mpa',
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "@/management/styles/element-variables.scss" as *;`
+      }
+    }
+  },
+  server: {
+    port: 8080,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:3000',
+        changeOrigin: true
+      }
+    }
+  },
+  build: {
+    rollupOptions: {}
+  }
+})
diff --git a/web/vue.config.js b/web/vue.config.js
deleted file mode 100644
index 4ed0498b..00000000
--- a/web/vue.config.js
+++ /dev/null
@@ -1,124 +0,0 @@
-const { defineConfig } = require('@vue/cli-service');
-const Webpack = require('webpack');
-// 分析打包时间
-const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
-
-module.exports = defineConfig({
-  transpileDependencies: true,
-  lintOnSave: false,
-  pages: {
-    management: {
-      entry: `src/management/main.js`,
-      template: 'public/management.html',
-      filename: `management.html`,
-      title: '问卷调研',
-    },
-    render: {
-      entry: `src/render/main.js`,
-      template: 'public/render.html',
-      filename: `render.html`,
-      title: '问卷调研',
-    },
-  },
-  css: {
-    loaderOptions: {
-      sass: {
-        additionalData: `@import "./src/management/styles/variable.scss";`,
-      },
-    },
-  },
-  devServer: {
-    proxy: {
-      '/api': {
-        target: 'http://127.0.0.1:3000',
-        changeOrigin: true,
-      },
-    },
-    setupMiddlewares(middlewares, devServer) {
-      if (!devServer) {
-        throw new Error('webpack-dev-server is not defined');
-      }
-      devServer.app.get('/', function (req, res) {
-        res.redirect('/management');
-      });
-      return middlewares;
-    },
-    open: true,
-  },
-  configureWebpack: {
-    plugins: [
-      new Webpack.IgnorePlugin({
-        resourceRegExp: /^\.\/locale$/,
-        contextRegExp: /moment$/,
-      }),
-    ],
-  },
-  chainWebpack: (config) => {
-    config.module
-      .rule('js')
-      .test(/\.jsx?$/)
-      .exclude.add(/node_modules/)
-      .end()
-      .use('babel-loader')
-      .loader('babel-loader')
-      .end();
-
-    config.optimization.splitChunks({
-      cacheGroups: {
-        setterWidgets: {
-          name: 'chunk-setterWidgets',
-          test: /\/materials\/setters[\\/]/,
-          chunks: 'async',
-          enforce: true,
-        },
-        materialWidgets: {
-          name: 'chunk-materialWidgets',
-          test: /\/materials\/questions[\\/]/,
-          chunks: 'async',
-          enforce: true,
-        },
-        commonEditor: {
-          name: 'chunk-commonEditor',
-          test: /\/common\/Editor[\\/]/,
-          enforce: true,
-        },
-        element: {
-          name: 'chunk-element-ui',
-          test: /[\\/]node_modules[\\/]element-ui[\\/]/,
-          chunks: 'all',
-          priority: 3,
-          reuseExistingChunk: true,
-          enforce: true,
-        },
-        moment: {
-          name: 'chunk-moment',
-          test: /[\\/]node_modules[\\/]moment[\\/]/,
-          chunks: 'all',
-          priority: 3,
-          reuseExistingChunk: true,
-          enforce: true,
-        },
-        '@wangeditor': {
-          name: 'chunk-wangeditor',
-          test: /[\\/]node_modules[\\/]@wangeditor[\\/]/,
-          chunks: 'all',
-          priority: 3,
-          reuseExistingChunk: true,
-          enforce: true,
-        },
-        common: {
-          //抽取所有入口页面都需要的公共chunk
-          name: 'chunk-common',
-          chunks: 'initial',
-          minChunks: 2,
-          maxInitialRequests: 5,
-          minSize: 0,
-          priority: 1,
-          reuseExistingChunk: true,
-          enforce: true,
-        },
-      },
-    });
-    config.plugin('speed').use(SpeedMeasureWebpackPlugin);
-  },
-});