Merge branch 'feature/feature-20250331-h5' into uat

2025-03-17 10:12:16 +08:00
parent 4ade72bda1 83e00d4677
commit a06eb2709e
55 changed files with 1007 additions and 1471 deletions
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -5,4 +5,6 @@
 // Generated by unplugin-auto-import
 // biome-ignore lint: disable
 export {}
-declare global {}
+declare global {
+
+}
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,15 +8,9 @@ export {}
 declare module 'vue' {
  export interface GlobalComponents {
    Contenteditable: typeof import('./src/components/contenteditable.vue')['default']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSpace: typeof import('element-plus/es')['ElSpace']
-    ElText: typeof import('element-plus/es')['ElText']
    RichText: typeof import('./src/components/RichText.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
@@ -29,8 +23,6 @@ declare module 'vue' {
    VanCol: typeof import('vant/es')['Col']
    VanDivider: typeof import('vant/es')['Divider']
    VanField: typeof import('vant/es')['Field']
-    VanGrid: typeof import('vant/es')['Grid']
-    VanGridItem: typeof import('vant/es')['GridItem']
    VanIcon: typeof import('vant/es')['Icon']
    VanNavBar: typeof import('vant/es')['NavBar']
    VanPicker: typeof import('vant/es')['Picker']
@@ -38,12 +30,9 @@ declare module 'vue' {
    VanRadio: typeof import('vant/es')['Radio']
    VanRadioGroup: typeof import('vant/es')['RadioGroup']
    VanRow: typeof import('vant/es')['Row']
-    VanSearch: typeof import('vant/es')['Search']
    VanStepper: typeof import('vant/es')['Stepper']
    VanSwitch: typeof import('vant/es')['Switch']
    VanTab: typeof import('vant/es')['Tab']
-    VanTabbar: typeof import('vant/es')['Tabbar']
-    VanTabbarItem: typeof import('vant/es')['TabbarItem']
    VanTabs: typeof import('vant/es')['Tabs']
    YLCascader: typeof import('./src/components/YLCascader.vue')['default']
    YLInput: typeof import('./src/components/YLInput.vue')['default']
--- a/package.json
+++ b/package.json
@@ -19,11 +19,13 @@
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.8.2",
+    "cos-js-sdk-v5": "^1.8.7",
    "dotenv": "^16.4.7",
    "element-plus": "^2.7.8",
    "js-base64": "^3.7.7",
    "lodash": "^4.17.21",
    "pinia": "^2.1.7",
+    "shrinkpng": "^1.2.0-beta.1",
    "sortablejs": "^1.15.6",
    "uuid": "^11.1.0",
    "vant": "^4.9.17",
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@ import { onMounted } from 'vue';
 import appBridge from '@/assets/js/appBridge';
 import utils from '@/assets/js/common';

-onMounted(async () => {
+onMounted(async() => {
  if (utils.getParameter('digitalYiliToken')) {
    // 隐藏/显示 header
    appBridge.setHeaderShown(false);
--- a/src/api/common.js
+++ b/src/api/common.js
@@ -85,9 +85,9 @@ export default class CommonApi {
    };
    /* eslint-disable no-useless-escape */
    const reg = /\\|\/|\?|\？|\*|"|“|”|'|‘|’|<|>|{|}|\[|\]|\【|\】|：|:|、|\^|\$|!|~|`|\s|\+/g;
-    name =
-      name ||
-      getRandomFileName(file?.name?.replace(reg, '') ?? '' ?? `${new Date().getTime()}.png`);
+    name
+      = name
+      || getRandomFileName(file?.name?.replace(reg, '') ?? '' ?? `${new Date().getTime()}.png`);
    const res = await CommonApi.getOssInfo();
    /* eslint-enable no-useless-escape */

--- a/src/assets/css/public.scss
+++ b/src/assets/css/public.scss
@@ -1,7 +1,8 @@
 .van-nav-bar {
-  padding-top: calc(var(--status-bar-height) + 10px) !important;
-  // height: calc(46px + var(--status-bar-height)) !important;
+  padding-top: calc(var(--status-bar-height) + 15px) !important;
+  z-index:999;
 }
+
 .van-cell {
  padding: 8px !important;
 }
--- a/src/assets/js/appBridge.js
+++ b/src/assets/js/appBridge.js
@@ -311,11 +311,14 @@ export default {
   * @returns {Boolean} 操作是否成功
   */
  async h5RouterBack(router) {
-    const canGoBack = this.routerCanGoBack(router);
-    if (canGoBack) {
+    const routerCanGoBack = () => {
+      const position = router.options.history.state?.position;
+      return typeof position === 'number' && position > 0;
+    };
+    if (routerCanGoBack()) {
      router.go(-1);
    } else {
-      this.navigateBack();
+      appBridge.navigateBack();
    }
  }
 };
--- a/src/components/YLPicker.vue
+++ b/src/components/YLPicker.vue
@@ -170,8 +170,8 @@ const getMaxDateLimit = computed(() => {
    props.format
  );
  const tempStr = '0000-12-31 23:59:59';
-  const result =
-    props.maxDate.length !== 0 && thisMax.length > props.maxDate.length
+  const result
+    = props.maxDate.length !== 0 && thisMax.length > props.maxDate.length
      ? thisMax.slice(0, props.maxDate.length) + tempStr.slice(props.maxDate.length)
      : thisMax;
  return result.slice(0, props.format.length);
@@ -194,8 +194,8 @@ function onChange({ selectedValues, columnIndex }) {
    renderMinuteColumns,
    renderSecondColumns
  ];
-  updateColumns[columnIndex] &&
-    updateColumns[columnIndex](changeValue, getMinDateLimit.value, getMaxDateLimit.value, false);
+  updateColumns[columnIndex]
+    && updateColumns[columnIndex](changeValue, getMinDateLimit.value, getMaxDateLimit.value, false);
 }

 // 渲染全部列
--- a/src/fonts/demo.css
+++ b/src/fonts/demo.css
@@ -4,17 +4,17 @@
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  src:
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix')
-      format('embedded-opentype'),
+    format('embedded-opentype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont')
-      format('svg');
+    format('svg');
 }

 .logo {
-  font-family: 'iconfont logo';
-  font-size: 160px;
  font-style: normal;
+  font-size: 160px;
+  font-family: 'iconfont logo';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
@@ -29,8 +29,8 @@
  right: 0;
  bottom: 0;
  height: 42px;
-  line-height: 42px;
  color: #666;
+  line-height: 42px;
 }

 #tabs {
@@ -38,17 +38,17 @@
 }

 #tabs li {
-  cursor: pointer;
-  width: 100px;
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  font-size: 16px;
-  border-bottom: 2px solid transparent;
  position: relative;
  z-index: 1;
+  width: 100px;
+  height: 40px;
  margin-bottom: -1px;
+  border-bottom: 2px solid transparent;
  color: #666;
+  font-size: 16px;
+  line-height: 40px;
+  text-align: center;
+  cursor: pointer;
 }

 #tabs .active {
@@ -62,25 +62,25 @@

 /* 页面布局 */
 .main {
-  padding: 30px 100px;
  width: 960px;
  margin: 0 auto;
+  padding: 30px 100px;
 }

 .main .logo {
-  color: #333;
-  text-align: left;
-  margin-bottom: 30px;
-  line-height: 1;
+  overflow: hidden;
  height: 110px;
  margin-top: -50px;
-  overflow: hidden;
+  margin-bottom: 30px;
+  color: #333;
+  line-height: 1;
+  text-align: left;
  *zoom: 1;
 }

 .main .logo a {
-  font-size: 160px;
  color: #333;
+  font-size: 160px;
 }

 .helps {
@@ -88,25 +88,25 @@
 }

 .helps pre {
-  padding: 20px;
+  overflow: auto;
  margin: 10px 0;
+  padding: 20px;
  border: solid 1px #e7e1cd;
  background-color: #fffdef;
-  overflow: auto;
 }

 .icon_lists {
-  width: 100% !important;
  overflow: hidden;
+  width: 100% !important;
  *zoom: 1;
 }

 .icon_lists li {
  width: 100px;
-  margin-bottom: 10px;
  margin-right: 20px;
-  text-align: center;
+  margin-bottom: 10px;
  list-style: none !important;
+  text-align: center;
  cursor: default;
 }

@@ -117,10 +117,10 @@
 .icon_lists .icon {
  display: block;
  height: 100px;
-  line-height: 100px;
-  font-size: 42px;
  margin: 10px auto;
  color: #333;
+  font-size: 42px;
+  line-height: 100px;
  -webkit-transition:
    font-size 0.25s linear,
    width 0.25s linear;
@@ -137,15 +137,18 @@
 }

 .icon_lists .svg-icon {
-  /* 通过设置 font-size 来改变图标大小 */
-  width: 1em;
  /* 图标和文字相邻时，垂直对齐 */
  vertical-align: -0.15em;
-  /* 通过设置 color 来改变 SVG 的颜色/fill */
-  fill: currentColor;
+
  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
      normalize.css 中也包含这行 */
  overflow: hidden;
+
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentcolor;
 }

 .icon_lists li .name,
@@ -170,10 +173,10 @@
 }

 .markdown h1 {
+  margin-bottom: 24px;
  color: #404040;
  font-weight: 500;
  line-height: 40px;
-  margin-bottom: 24px;
 }

 .markdown h2,
@@ -181,10 +184,10 @@
 .markdown h4,
 .markdown h5,
 .markdown h6 {
-  color: #404040;
-  margin: 1.6em 0 0.6em 0;
-  font-weight: 500;
  clear: both;
+  margin: 1.6em 0 0.6em;
+  color: #404040;
+  font-weight: 500;
 }

 .markdown h1 {
@@ -212,11 +215,11 @@
 }

 .markdown hr {
+  clear: both;
  height: 1px;
+  margin: 16px 0;
  border: 0;
  background: #e9e9e9;
-  margin: 16px 0;
-  clear: both;
 }

 .markdown p {
@@ -259,8 +262,8 @@
 .markdown code {
  margin: 0 3px;
  padding: 0 5px;
-  background: #eee;
  border-radius: 3px;
+  background: #eee;
 }

 .markdown strong,
@@ -269,24 +272,24 @@
 }

 .markdown > table {
-  border-collapse: collapse;
-  border-spacing: 0px;
-  empty-cells: show;
-  border: 1px solid #e9e9e9;
  width: 95%;
  margin-bottom: 24px;
+  border: 1px solid #e9e9e9;
+  border-spacing: 0;
+  border-collapse: collapse;
+  empty-cells: show;
 }

 .markdown > table th {
-  white-space: nowrap;
  color: #333;
  font-weight: 600;
+  white-space: nowrap;
 }

 .markdown > table th,
 .markdown > table td {
-  border: 1px solid #e9e9e9;
  padding: 8px 16px;
+  border: 1px solid #e9e9e9;
  text-align: left;
 }

@@ -295,11 +298,11 @@
 }

 .markdown blockquote {
-  font-size: 90%;
-  color: #999;
-  border-left: 4px solid #e9e9e9;
-  padding-left: 0.8em;
  margin: 1em 0;
+  padding-left: 0.8em;
+  border-left: 4px solid #e9e9e9;
+  color: #999;
+  font-size: 90%;
 }

 .markdown blockquote p {
@@ -307,9 +310,9 @@
 }

 .markdown .anchor {
+  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
-  margin-left: 8px;
 }

 .markdown .waiting {
@@ -322,8 +325,8 @@
 .markdown h4:hover .anchor,
 .markdown h5:hover .anchor,
 .markdown h6:hover .anchor {
-  opacity: 1;
  display: inline-block;
+  opacity: 1;
 }

 .markdown > br,
@@ -333,10 +336,10 @@

 .hljs {
  display: block;
-  background: white;
-  padding: 0.5em;
-  color: #333333;
  overflow-x: auto;
+  padding: 0.5em;
+  background: white;
+  color: #333;
 }

 .hljs-comment,
@@ -372,7 +375,7 @@
 }

 .hljs-tag {
-  color: #333333;
+  color: #333;
 }

 .hljs-title,
@@ -385,13 +388,13 @@
 }

 .hljs-addition {
-  color: #55a532;
  background-color: #eaffea;
+  color: #55a532;
 }

 .hljs-deletion {
-  color: #bd2c00;
  background-color: #ffecec;
+  color: #bd2c00;
 }

 .hljs-link {
@@ -399,8 +402,10 @@
 }

 /* 代码高亮 */
+
 /* PrismJS 1.15.0
 https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+
 /**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
@@ -408,21 +413,19 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc
 */
 code[class*='language-'],
 pre[class*='language-'] {
-  color: black;
  background: none;
-  text-shadow: 0 1px white;
+  color: black;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  line-height: 1.5;
  text-align: left;
+  text-shadow: 0 1px white;
  white-space: pre;
  word-spacing: normal;
-  word-break: normal;
  word-wrap: normal;
-  line-height: 1.5;
-
+  word-break: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
-
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
@@ -433,16 +436,16 @@ pre[class*='language-']::-moz-selection,
 pre[class*='language-'] ::-moz-selection,
 code[class*='language-']::-moz-selection,
 code[class*='language-'] ::-moz-selection {
-  text-shadow: none;
  background: #b3d4fc;
+  text-shadow: none;
 }

 pre[class*='language-']::selection,
 pre[class*='language-'] ::selection,
 code[class*='language-']::selection,
 code[class*='language-'] ::selection {
-  text-shadow: none;
  background: #b3d4fc;
+  text-shadow: none;
 }

@media print {
@@ -454,9 +457,9 @@ code[class*='language-'] ::selection {

 /* Code blocks */
 pre[class*='language-'] {
-  padding: 1em;
-  margin: 0.5em 0;
  overflow: auto;
+  margin: 0.5em 0;
+  padding: 1em;
 }

 :not(pre) > code[class*='language-'],
@@ -510,8 +513,8 @@ pre[class*='language-'] {
 .token.url,
 .language-css .token.string,
 .style .token.string {
+  background: hsla(0deg, 0%, 100%, 0.5);
  color: #9a6e3a;
-  background: hsla(0, 0%, 100%, 0.5);
 }

 .token.atrule,
--- a/src/fonts/demo_index.html
+++ b/src/fonts/demo_index.html
@@ -23,8 +23,8 @@
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
    <style>
      .main .logo {
-        margin-top: 0;
        height: auto;
+        margin-top: 0;
      }

      .main .logo a {
@@ -34,10 +34,10 @@

      .main .logo .sub-title {
        margin-left: 0.5em;
-        font-size: 22px;
-        color: #fff;
        background: linear-gradient(-45deg, #3967ff, #b500fe);
        -webkit-background-clip: text;
+        color: #fff;
+        font-size: 22px;
        -webkit-text-fill-color: transparent;
      }
    </style>
--- a/src/fonts/iconfont.css
+++ b/src/fonts/iconfont.css
@@ -1,5 +1,5 @@
@font-face {
-  font-family: 'mobilefont'; /* Project id 4841764 */
+  font-family: mobilefont; /* Project id 4841764 */
  src:
    url('iconfont.woff2?t=1742102742566') format('woff2'),
    url('iconfont.woff?t=1742102742566') format('woff'),
@@ -7,133 +7,133 @@
 }

 .mobilefont {
-  font-family: 'mobilefont' !important;
-  font-size: 16px;
  font-style: normal;
+  font-size: 16px;
+  font-family: mobilefont !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

-.mobilefont-rubber:before {
+.mobilefont-rubber::before {
  content: '\ea15';
 }

-.mobilefont-huabi:before {
+.mobilefont-huabi::before {
  content: '\e61f';
 }

-.mobilefont-chexiao:before {
+.mobilefont-chexiao::before {
  content: '\e6e2';
 }

-.mobilefont-shangchuan:before {
+.mobilefont-shangchuan::before {
  content: '\e613';
 }

-.mobilefont-qingkong:before {
+.mobilefont-qingkong::before {
  content: '\e6dc';
 }

-.mobilefont-jiacu:before {
+.mobilefont-jiacu::before {
  content: '\e71d';
 }

-.mobilefont-qingxie:before {
+.mobilefont-qingxie::before {
  content: '\e71e';
 }

-.mobilefont-xiahuaxian:before {
+.mobilefont-xiahuaxian::before {
  content: '\e720';
 }

-.mobilefont-tupian:before {
+.mobilefont-tupian::before {
  content: '\e730';
 }

-.mobilefont-del1:before {
+.mobilefont-del1::before {
  content: '\e637';
 }

-.mobilefont-gengduo:before {
+.mobilefont-gengduo::before {
  content: '\e600';
 }

-.mobilefont-delete1:before {
+.mobilefont-delete1::before {
  content: '\e66d';
 }

-.mobilefont-del:before {
+.mobilefont-del::before {
  content: '\e6f5';
 }

-.mobilefont-option:before {
+.mobilefont-option::before {
  content: '\e6ff';
 }

-.mobilefont-setting:before {
+.mobilefont-setting::before {
  content: '\e633';
 }

-.mobilefont-add:before {
+.mobilefont-add::before {
  content: '\e686';
 }

-.mobilefont-radiobox:before {
+.mobilefont-radiobox::before {
  content: '\e75b';
 }

-.mobilefont-juzhendafen:before {
+.mobilefont-juzhendafen::before {
  content: '\e641';
 }

-.mobilefont-checkbox-checked:before {
+.mobilefont-checkbox-checked::before {
  content: '\e6c3';
 }

-.mobilefont-nps:before {
+.mobilefont-nps::before {
  content: '\e6b0';
 }

-.mobilefont-input:before {
+.mobilefont-input::before {
  content: '\e6fd';
 }

-.mobilefont-juzhentiankong:before {
+.mobilefont-juzhentiankong::before {
  content: '\e62e';
 }

-.mobilefont-wenjianshangchuan:before {
+.mobilefont-wenjianshangchuan::before {
  content: '\e631';
 }

-.mobilefont-qianming:before {
+.mobilefont-qianming::before {
  content: '\e661';
 }

-.mobilefont-tuwen:before {
+.mobilefont-tuwen::before {
  content: '\e62c';
 }

-.mobilefont-juzhenduoxuan:before {
+.mobilefont-juzhenduoxuan::before {
  content: '\e818';
 }

-.mobilefont-juzhendanxuan:before {
+.mobilefont-juzhendanxuan::before {
  content: '\13c7f';
 }

-.mobilefont-edit2:before {
+.mobilefont-edit2::before {
  content: '\e630';
 }

-.mobilefont-copy:before {
+.mobilefont-copy::before {
  content: '\e632';
 }

-.mobilefont-delete:before {
+.mobilefont-delete::before {
  content: '\e63f';
 }

-.mobilefont-sort:before {
+.mobilefont-sort::before {
  content: '\e6a0';
 }
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -19,13 +19,15 @@ import appBridge from '@/assets/js/appBridge';
 const router = useRouter();

 function goBack() {
-  appBridge.h5RouterBack(router);
+  if (window.history.length > 1) {
+    router.go(-1);
+  } else {
+    appBridge.navigateBack();
+  }
 }
 </script>
-
 <style scoped lang="scss">
 .common-layout {
-  //min-height: calc(100vh);
  background-color: white;
  color: #333;
 }
--- a/src/request/api/modules/survey.ts
+++ b/src/request/api/modules/survey.ts
@@ -1,2 +1,2 @@
-export const surveyQuestion =
-  'https://yls-api-uat.dctest.digitalyili.com/api/console/surveys/RWNK9BYp/questions';
+export const surveyQuestion
+  = 'https://yls-api-uat.dctest.digitalyili.com/api/console/surveys/RWNK9BYp/questions';
--- a/src/request/axios/index.ts
+++ b/src/request/axios/index.ts
@@ -38,10 +38,10 @@ service.interceptors.request.use(
 service.interceptors.response.use(
  (response) => {
    if (
-      response.status === 200 ||
-      response.status === 201 ||
-      response.status === 202 ||
-      response.status === 204
+      response.status === 200
+      || response.status === 201
+      || response.status === 202
+      || response.status === 204
    ) {
      if (response.config.method === 'put') {
        // message.success('保存中...');
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -43,10 +43,10 @@ service.interceptors.request.use(
 service.interceptors.response.use(
  (response) => {
    if (
-      response.status === 200 ||
-      response.status === 201 ||
-      response.status === 202 ||
-      response.status === 204
+      response.status === 200
+      || response.status === 201
+      || response.status === 202
+      || response.status === 204
    ) {
      if (response.config.method === 'put') {
        // message.success('保存中...');
--- a/src/views/Design/Index.vue
+++ b/src/views/Design/Index.vue
@@ -52,8 +52,8 @@
          <martrix-question
            v-if="
              element.question_type === 8 ||
-              element.question_type === 9 ||
-              element.question_type === 10
+                element.question_type === 9 ||
+                element.question_type === 10
            "
            :element="computedElement(element)"
            :index="index"
@@ -77,7 +77,7 @@
            :index="index"
            :active="chooseQuestionId === element.id"
            @update:element="updateElement"
-          ></file-upload>
+          />

          <!--图文-->
          <TextWithImages
--- a/src/views/Design/components/ActionCompoents/OptionAction.vue
+++ b/src/views/Design/components/ActionCompoents/OptionAction.vue
@@ -134,23 +134,23 @@ const openOptionActionModel = (item, index) => {
 // 上下移动
 const optionMove = (action) => {
  switch (action.action) {
-    case 'up':
-      if (activeIndex.value === 0) {
-        moveShow.value = false;
-        return false;
-      }
-      // 向上移动
-      element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
-      activeIndex.value -= 1;
-      break;
-    case 'down':
-      if (activeIndex.value === element.value.length - 1) {
-        moveShow.value = false;
-        return false;
-      }
-      element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
-      activeIndex.value += 1;
-      break;
+  case 'up':
+    if (activeIndex.value === 0) {
+      moveShow.value = false;
+      return false;
+    }
+    // 向上移动
+    element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+    activeIndex.value -= 1;
+    break;
+  case 'down':
+    if (activeIndex.value === element.value.length - 1) {
+      moveShow.value = false;
+      return false;
+    }
+    element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
+    activeIndex.value += 1;
+    break;
  }
 };

--- a/src/views/Design/components/ActionCompoents/QuestionAction.vue
+++ b/src/views/Design/components/ActionCompoents/QuestionAction.vue
@@ -260,8 +260,8 @@ const getSkipTypeText = (skipType) => {
  const ls = [];
  logics.map((item) => {
    if (
-      item.skip_type === skipType &&
-      item.question_index === activeQuestion.value.question_index
+      item.skip_type === skipType
+      && item.question_index === activeQuestion.value.question_index
    ) {
      ls.push(item);
    }
@@ -277,13 +277,13 @@ const getSkipTypeText = (skipType) => {

 const questionSetting = (type) => {
  switch (type) {
-    case 'before':
-      questionBeforeShow.value = true;
+  case 'before':
+    questionBeforeShow.value = true;

-      break;
-    case 'after':
-      questionBeforeShow.value = true;
-      break;
+    break;
+  case 'after':
+    questionBeforeShow.value = true;
+    break;
  }
  skipType.value = type === 'before' ? 1 : 0;
 };
--- a/src/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue
+++ b/src/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue
@@ -144,8 +144,8 @@
              <BeforeRate
                v-if="
                  log.logic !== 'always' &&
-                  log.is_answer !== 0 &&
-                  [5, 106].includes(log.question_type)
+                    log.is_answer !== 0 &&
+                    [5, 106].includes(log.question_type)
                "
                :activeQuestion="activeQuestion"
                :logic="log"
--- a/src/views/Design/components/ActionCompoents/components/QuestionItemAction/RateQuestionAction.vue
+++ b/src/views/Design/components/ActionCompoents/components/QuestionItemAction/RateQuestionAction.vue
@@ -108,9 +108,9 @@ function isSurplus() {
    return false;
  } else {
    return (
-      parseFloat(((localConfig.value.max - localConfig.value.min) * 1000).toFixed(4, 10)) %
-        parseFloat((localConfig.value.score_interval * 1000).toFixed(4, 10)) ===
-      0
+      parseFloat(((localConfig.value.max - localConfig.value.min) * 1000).toFixed(4, 10))
+        % parseFloat((localConfig.value.score_interval * 1000).toFixed(4, 10))
+      === 0
    );
  }
 }
--- a/src/views/Design/components/Questions/Choice.vue
+++ b/src/views/Design/components/Questions/Choice.vue
@@ -1,47 +1,31 @@
 <template>
  <van-field
-    v-model="element.stem"
-    :label="element.stem"
-    :required="element.config.is_required === 1"
-    label-align="top"
+    v-model="element.stem" :label="element.stem" :required="element.config.is_required === 1" label-align="top"
    class="contenteditable-question-title base-select"
  >
    <template #left-icon>
      {{ index + 1 }}
    </template>
    <template #label>
-      <contenteditable
-        v-model="element.stem"
-        className="contenteditable-label"
-        :active="active"
-        @blur="emitValue"
-      ></contenteditable>
+      <contenteditable v-model="element.stem" className="contenteditable-label" :active="active" @blur="emitValue">
+      </contenteditable>
    </template>
    <template #input>
      <template v-for="(item, optionIndex) in element.options" :key="item.id">
        <van-radio-group v-if="element.question_type === 1" v-model="choiceValue">
          <option-action
-            v-model:data="element.options[optionIndex]"
-            :active="active"
-            :question="element"
+            :data="isPreview ? item.options : item" :active="active" :question="element"
            handle=".moverQues"
          >
            <template #item="{ element: it, index: itIndex }">
              <van-radio
-                :key="itIndex"
-                :name="it.option_index"
-                :label="it.label"
-                :disabled="it.disabled"
+                :key="itIndex" :name="it.option_index" :label="it.label" :disabled="it.disabled"
                icon-size="0.45rem"
              >
                <!--       自定义文本         -->
                <template #default>
                  <div class="flex align-center van-cell">
-                    <contenteditable
-                      v-model="it.option"
-                      className="contenteditable-input"
-                      :active="active"
-                    >
+                    <contenteditable v-model="it.option" className="contenteditable-input" :active="active">
                      <template #right-icon>
                        <div v-if="active" class="moverQues">
                          <van-icon class-prefix="mobilefont" name="option "></van-icon>
@@ -60,26 +44,17 @@

        <van-checkbox-group v-if="element.question_type === 2" v-model="value" shape="square">
          <option-action
-            v-model:data="element.options[optionIndex]"
-            handle=".moverQues"
-            :active="active"
+            v-model:data="element.options[optionIndex]" handle=".moverQues" :active="active"
            :question="element"
          >
            <template #item="{ element: it, index: itIndex }">
              <van-checkbox
-                :key="itIndex"
-                :name="it.option_index"
-                :label="it.label"
-                :disabled="it.disabled"
+                :key="itIndex" :name="it.option_index" :label="it.label" :disabled="it.disabled"
                icon-size="0.45rem"
              >
                <template #default>
                  <div class="flex align-center van-cell">
-                    <contenteditable
-                      v-model="it.option"
-                      className="contenteditable-input"
-                      :active="active"
-                    >
+                    <contenteditable v-model="it.option" className="contenteditable-input" :active="active">
                      <template #right-icon>
                        <div v-if="active" class="moverQues">
                          <van-icon class-prefix="mobilefont" name="option "></van-icon>
@@ -103,7 +78,12 @@
 import OptionAction from '@/views/Design/components/ActionCompoents/OptionAction.vue';
 import { defineAsyncComponent, toRefs, ref } from 'vue';

-const choiceValue = ref('checked');
+// 是否是预览
+const isPreview = defineModel('isPreview', { default: false });
+const choiceValue = defineModel('answer', { default: '1', type: String });
+
+console.log(`choiceValue.value`, choiceValue.value);
+
 const Contenteditable = defineAsyncComponent(() => import('@/components/contenteditable.vue'));
 const props = defineProps({
  element: {
--- a/src/views/Design/components/Questions/Completion.vue
+++ b/src/views/Design/components/Questions/Completion.vue
@@ -18,6 +18,7 @@
      </template>
      <template #input>
        <textarea
+          v-model="completionValue"
          class="other_input"
          :placeholder="element.config.placeholder"
          :rows="element.config.line_height"
@@ -29,6 +30,8 @@

 <script setup>
 import { toRefs } from 'vue';
+
+const completionValue = defineModel('completionValue', { default: '' });
 const props = defineProps({
  element: {
    type: Object,
--- a/src/views/Design/components/Questions/MartrixQuestion.vue
+++ b/src/views/Design/components/Questions/MartrixQuestion.vue
@@ -21,14 +21,14 @@ const { element } = toRefs(props);
 */
 const tableInputTypeMapping = (/** regx?: any */) => {
  switch (element.value.question_type) {
-    case 8:
-      return 'text';
-    case 9:
-      return 'radio';
-    case 10:
-      return 'checkbox';
-    default:
-      return 'radio';
+  case 8:
+    return 'text';
+  case 9:
+    return 'radio';
+  case 10:
+    return 'checkbox';
+  default:
+    return 'radio';
  }
 };

--- a/src/views/Design/components/Questions/MatrixCheckbox.vue
+++ b/src/views/Design/components/Questions/MatrixCheckbox.vue
@@ -3,29 +3,23 @@
    <thead>
      <tr>
        <th></th>
-        <td v-for="col in columns" :key="col.option">
+        <td v-for="col in cols" :key="col.option">
          <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
          <input
-            v-if="col.editor"
-            v-model="col.option"
-            v-focus
-            type="text"
-            @focusout="col.editor = false"
+            v-if="col.editor" v-model="col.option" v-focus type="text" @focusout="col.editor = false"
            @click="handleRowNameChange(col.option!)"
          />
-          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option" />
+          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option"></span>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
-        <th v-html="row.option" />
-        <td v-for="(col, colIndex) in columns" :key="colIndex">
+        <th v-html="row.option"></th>
+        <td v-for="(col, colIndex) in cols" :key="colIndex">
          <input
-            type="checkbox"
-            :value="`${rowIndex + 1}_${colIndex + 1}`"
-            :checked="isOptionChecked(rowIndex, colIndex)"
-            @change="handleColNameChange(row.option, col.option, $event)"
+            type="checkbox" :name="`R${rowIndex + 1}`" :value="`${rowIndex + 1}_${colIndex + 1}`"
+            :checked="isOptionChecked(rowIndex, colIndex)" @change="handleMatrixRadioChange(rowIndex, colIndex)"
          />
        </td>
      </tr>
@@ -37,50 +31,73 @@
 import { defineProps } from 'vue';
 import { vFocus } from '@/utils/directives/useVFocus';

-const props = defineProps<{
-  rows: { option: string }[];
-  columns: { option: string; editor?: boolean }[];
-  questionType: number;
-  matrixAnswer: { [key: string]: any };
-  rowRecord: (number | string)[];
+// 记录行和列的索引
+const rowRecord = defineModel<number[][]>('rowRecord', { required: false, default: () => [] });
+// const matrixAnswer = defineModel<{ [key: string]: 1 }>('matrixAnswer', { required: false, default: () => ({}) });
+// 检查 rowRecord 是否存在
+console.log(`rowRecord:`, rowRecord.value);
+
+/* const isPreview =  */defineModel<boolean>('isPreview', { required: false, default: false });
+defineProps<{
+  rows: OptionType[];
+  cols: OptionType[];
 }>();

-/* const emits = */ defineEmits(['update:matrixAnswer', 'update:rowRecord']);
+// const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);

+// 判断是否选中
 const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
-  const key = `R${rowIndex + 1}_C${colIndex + 1}`;
-  return !!props.matrixAnswer[key];
+  // [
+  //   [0, 1],
+  //   [0, 1]
+  // ]
+  if (!rowRecord.value[rowIndex]) {
+    return false;
+  }
+  return rowRecord.value[rowIndex].includes(colIndex);
 };

-const handleRowNameChange = () => {
+const handleRowNameChange = (/* value: string */) => {
+  // console.log(`row change: ${value}`);
  // 你可以在这里添加其他逻辑
 };

-// const handleColNameChange = (rowOption: string, colOption: string, e: Event) => {
-//   const target = e.target as HTMLInputElement;
-//   const col = props.columns.findIndex(option => option.option === colOption);
-//   const row = props.rows.findIndex(option => option.option === rowOption);
-//
-//   if (props.questionType === 10) {
-//     if (target.checked) {
-//       props.rowRecord[col] = (props.rowRecord[col] || []).concat(row + 1);
-//     } else {
-//       props.rowRecord[col] = (props.rowRecord[col] || []).filter(item => item !== row + 1);
-//     }
-//     const newMatrixAnswer: { [key: string]: boolean } = {};
-//     const newRowRecord: (number | string)[] = [...props.rowRecord];
-//     props.rows.forEach((rowOption, rowIndex) => {
-//       const colOptions = newRowRecord[rowIndex];
-//       if (colOptions) {
-//         colOptions.forEach((col: any) => {
-//           newMatrixAnswer[`R${rowIndex + 1}_C${col}`] = true;
-//         });
-//       }
-//     });
-//   }
-//
-//   emits('update:matrixAnswer', newMatrixAnswer);
-//   emits('update:rowRecord', newRowRecord);
+// 当 matrix radio 选中时，更新 rowRecord 和 matrixAnswer
+function handleMatrixRadioChange(row: number, col: number) {
+  // 获取 colIndexArray
+  if (!rowRecord.value[row]) {
+    // 如果没有对应的row，创建一个
+    rowRecord.value[row] = [];
+  }
+  // cols 的逻辑 和 handleMatrixRadioChange 一致
+  const cols = rowRecord.value[row];
+
+  // 检查 cols 对应的 col 是否有 数值
+  if (cols.includes(col)) {
+    // 如果有，删除
+    cols.splice(cols.indexOf(col), 1);
+  } else {
+    // 如果没有，添加
+    cols.push(col);
+  }
+
+  console.log(`rowRecord:`, rowRecord.value);
+}
+// const handleColNameChange = (rowOption: string, colOption: string) => {
+// // const target = e.target as HTMLInputElement;
+// const col = props.columns.findIndex((option) => option.option === colOption);
+// const row = props.rows.findIndex((option) => option.option === rowOption);
+
+// if (props.questionType === 9) {
+//   props.rowRecord[col] = row + 1;
+//   props.matrixAnswer = {};
+//   props.rowRecord.forEach((row, index) => {
+//     props.matrixAnswer[`${index + 1}_${row}`] = 1;
+//   });
+// }
+
+// emits('update:matrixAnswer', props.matrixAnswer);
+// emits('update:rowRecord', props.rowRecord);
 // };
 </script>

--- a/src/views/Design/components/Questions/MatrixQuestion.vue
+++ b/src/views/Design/components/Questions/MatrixQuestion.vue
@@ -23,14 +23,14 @@ const matrixAnswer = ref({
 */
 const tableInputTypeMapping = (/** regx?: any */) => {
  switch (element.question_type) {
-    case 8:
-      return 'text';
-    case 9:
-      return 'radio';
-    case 10:
-      return 'checkbox';
-    default:
-      return 'radio';
+  case 8:
+    return 'text';
+  case 9:
+    return 'radio';
+  case 10:
+    return 'checkbox';
+  default:
+    return 'radio';
  }
 };

@@ -67,55 +67,55 @@ function handleColNameChange(rowOption: string, colOption: string, e: any) {

  // 不同的 question_type 的 matrix 问卷处理不同的结果
  switch (element.question_type) {
-    case 8: {
-      // 获取输入框元素
-      const inputElement = e.target as HTMLInputElement;
-      // 如果没有获取到输入框元素，则直接返回
-      if (!inputElement) return;
-      // 将输入框的值保存到 rowRecord 对应位置
-      rowRecord[col] = e!.target!.value;
-      // 清空 matrixAnswer 的 answer 属性
-      matrixAnswer.value.answer = {};
-      // 遍历所有行选项
-      element.options[0].forEach((_, rowIndex) => {
-        // 获取当前行记录
-        const colOptions = rowRecord[rowIndex];
-        // 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
-        if (colOptions) {
-          matrixAnswer.value.answer[`R${rowIndex + 1}_C${col + 1}`] = colOptions;
-        }
-      });
-      break;
-    }
-    case 9:
-      // 将选择的行索引加1后保存到 rowRecord 对应位置
-      rowRecord[col] = row + 1;
-      // 清空 matrixAnswer 的 answer 属性
-      matrixAnswer.value.answer = {};
-      // 遍历 rowRecord，更新 matrixAnswer 的 answer 属性
-      rowRecord.forEach((row, index) => {
-        matrixAnswer.value.answer[`${index + 1}_${row}`] = 1;
-      });
-      break;
-    case 10:
-      // 将选择的行索引加1后添加到 rowRecord 对应位置的数组中
-      rowRecord[col] = (rowRecord[col] || []).concat(row + 1);
-      // 清空 matrixAnswer 的 answer 属性
-      matrixAnswer.value.answer = {};
-      // 遍历所有行选项
-      element.options[0].forEach((rowOption, rowIndex) => {
-        // 获取当前行记录
-        const colOptions = rowRecord[rowIndex];
-        // 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
-        if (colOptions) {
-          colOptions.forEach((col: any) => {
-            matrixAnswer.value.answer[`R${rowIndex + 1}_C${col}`] = true;
-          });
-        }
-      });
-      break;
-    default:
-      break;
+  case 8: {
+    // 获取输入框元素
+    const inputElement = e.target as HTMLInputElement;
+    // 如果没有获取到输入框元素，则直接返回
+    if (!inputElement) return;
+    // 将输入框的值保存到 rowRecord 对应位置
+    rowRecord[col] = e!.target!.value;
+    // 清空 matrixAnswer 的 answer 属性
+    matrixAnswer.value.answer = {};
+    // 遍历所有行选项
+    element.options[0].forEach((_, rowIndex) => {
+      // 获取当前行记录
+      const colOptions = rowRecord[rowIndex];
+      // 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
+      if (colOptions) {
+        matrixAnswer.value.answer[`R${rowIndex + 1}_C${col + 1}`] = colOptions;
+      }
+    });
+    break;
+  }
+  case 9:
+    // 将选择的行索引加1后保存到 rowRecord 对应位置
+    rowRecord[col] = row + 1;
+    // 清空 matrixAnswer 的 answer 属性
+    matrixAnswer.value.answer = {};
+    // 遍历 rowRecord，更新 matrixAnswer 的 answer 属性
+    rowRecord.forEach((row, index) => {
+      matrixAnswer.value.answer[`${index + 1}_${row}`] = 1;
+    });
+    break;
+  case 10:
+    // 将选择的行索引加1后添加到 rowRecord 对应位置的数组中
+    rowRecord[col] = (rowRecord[col] || []).concat(row + 1);
+    // 清空 matrixAnswer 的 answer 属性
+    matrixAnswer.value.answer = {};
+    // 遍历所有行选项
+    element.options[0].forEach((rowOption, rowIndex) => {
+      // 获取当前行记录
+      const colOptions = rowRecord[rowIndex];
+      // 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
+      if (colOptions) {
+        colOptions.forEach((col: any) => {
+          matrixAnswer.value.answer[`R${rowIndex + 1}_C${col}`] = true;
+        });
+      }
+    });
+    break;
+  default:
+    break;
  }
 }
 </script>
--- a/src/views/Design/components/Questions/MatrixRadio.vue
+++ b/src/views/Design/components/Questions/MatrixRadio.vue
@@ -3,14 +3,10 @@
    <thead>
      <tr>
        <th></th>
-        <td v-for="col in columns" :key="col.option">
+        <td v-for="col in cols" :key="col.option">
          <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
          <input
-            v-if="col.editor"
-            v-model="col.option"
-            v-focus
-            type="text"
-            @focusout="col.editor = false"
+            v-if="col.editor" v-model="col.option" v-focus type="text" @focusout="col.editor = false"
            @click="handleRowNameChange(col.option!)"
          />
          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option"></span>
@@ -20,13 +16,10 @@
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <th v-html="row.option"></th>
-        <td v-for="(col, colIndex) in columns" :key="colIndex">
+        <td v-for="(col, colIndex) in cols" :key="colIndex">
          <input
-            type="radio"
-            :name="`R${rowIndex + 1}`"
-            :value="`${rowIndex + 1}_${colIndex + 1}`"
-            :checked="isOptionChecked(rowIndex, colIndex)"
-            @change="handleColNameChange(row.option, col.option, $event)"
+            type="radio" :name="`R${rowIndex + 1}`" :value="`${rowIndex + 1}_${colIndex + 1}`"
+            :checked="isOptionChecked(rowIndex, colIndex)" @change="handleMatrixRadioChange(rowIndex, colIndex)"
          />
        </td>
      </tr>
@@ -38,19 +31,28 @@
 import { defineProps } from 'vue';
 import { vFocus } from '@/utils/directives/useVFocus';

-const props = defineProps<{
-  rows: { option: string }[];
-  columns: { option: string; editor?: boolean }[];
-  questionType: number;
-  matrixAnswer: { [key: string]: any };
-  rowRecord: (number | string)[];
+// 记录行和列的索引
+const rowRecord = defineModel<number[]>('rowRecord', { required: false, default: () => [] });
+// const matrixAnswer = defineModel<{ [key: string]: 1 }>('matrixAnswer', { required: false, default: () => ({}) });
+// 检查 rowRecord 是否存在
+console.log(`rowRecord:`, rowRecord.value);
+
+/* const isPreview =  */defineModel<boolean>('isPreview', { required: false, default: false });
+defineProps<{
+  rows: OptionType[];
+  cols: OptionType[];
 }>();

-/* const emits = */ defineEmits(['update:matrixAnswer', 'update:rowRecord']);
+// const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);

+// 判断是否选中
 const isOptionChecked = (rowIndex: number, colIndex: number): boolean => {
-  const key = `R${rowIndex + 1}_C${colIndex + 1}`;
-  return !!props.matrixAnswer[key];
+  // console.log(`rowIndex: ${rowIndex}, colIndex: ${colIndex}`);
+  // console.log(`rowRecord.value[rowIndex] === colIndex`, rowRecord.value[rowIndex] === colIndex);
+
+  return rowRecord.value[rowIndex] === colIndex;
+  // const key = `R${rowIndex + 1}_C${colIndex + 1}`;
+  // return !!matrixAnswer.value?.[key];
 };

 const handleRowNameChange = (/* value: string */) => {
@@ -58,21 +60,29 @@ const handleRowNameChange = (/* value: string */) => {
  // 你可以在这里添加其他逻辑
 };

+// 当 matrix radio 选中时，更新 rowRecord 和 matrixAnswer
+function handleMatrixRadioChange(row: number, col: number) {
+  rowRecord.value[row] = col;
+  // matrixAnswer.value = {};
+  // rowRecord.value.forEach((row, col) => {
+  //   matrixAnswer.value[`${col + 1}_${row}`] = 1;
+  // });
+}
 // const handleColNameChange = (rowOption: string, colOption: string) => {
-//   // const target = e.target as HTMLInputElement;
-//   const col = props.columns.findIndex((option) => option.option === colOption);
-//   const row = props.rows.findIndex((option) => option.option === rowOption);
-//
-//   if (props.questionType === 9) {
-//     props.rowRecord[col] = row + 1;
-//     props.matrixAnswer = {};
-//     props.rowRecord.forEach((row, index) => {
-//       props.matrixAnswer[`${index + 1}_${row}`] = 1;
-//     });
-//   }
-//
-//   emits('update:matrixAnswer', props.matrixAnswer);
-//   emits('update:rowRecord', props.rowRecord);
+// // const target = e.target as HTMLInputElement;
+// const col = props.columns.findIndex((option) => option.option === colOption);
+// const row = props.rows.findIndex((option) => option.option === rowOption);
+
+// if (props.questionType === 9) {
+//   props.rowRecord[col] = row + 1;
+//   props.matrixAnswer = {};
+//   props.rowRecord.forEach((row, index) => {
+//     props.matrixAnswer[`${index + 1}_${row}`] = 1;
+//   });
+// }
+
+// emits('update:matrixAnswer', props.matrixAnswer);
+// emits('update:rowRecord', props.rowRecord);
 // };
 </script>

--- a/src/views/Design/components/Questions/MatrixText.vue
+++ b/src/views/Design/components/Questions/MatrixText.vue
@@ -3,14 +3,10 @@
    <thead>
      <tr>
        <th></th>
-        <td v-for="col in columns" :key="col.option">
+        <td v-for="col in cols" :key="col.option">
          <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
          <input
-            v-if="col.editor"
-            v-model="col.option"
-            v-focus
-            type="text"
-            @focusout="col.editor = false"
+            v-if="col.editor" v-model="col.option" v-focus type="text" @focusout="col.editor = false"
            @click="handleRowNameChange(col.option!)"
          />
          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option"></span>
@@ -20,11 +16,10 @@
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <th v-html="row.option"></th>
-        <td v-for="(col, colIndex) in columns" :key="colIndex">
+        <td v-for="(col, colIndex) in cols" :key="colIndex">
          <input
-            type="text"
-            :value="matrixAnswer[`${rowIndex + 1}_${colIndex + 1}`]"
-            @change="handleColNameChange(row.option, col.option, $event, rowIndex, colIndex)"
+            type="text" :name="`R${rowIndex + 1}`" :value="getInputValue(rowIndex, colIndex)"
+            @change="handleMatrixTextChange(rowIndex, colIndex, $event)"
          />
        </td>
      </tr>
@@ -33,36 +28,66 @@
 </template>

 <script setup lang="ts">
-import { defineProps, defineEmits } from 'vue';
+import { defineProps } from 'vue';
 import { vFocus } from '@/utils/directives/useVFocus';

-const props = defineProps<{
-  rows: { option: string }[];
-  columns: { option: string; editor?: boolean }[];
-  questionType: number;
-  matrixAnswer: { [key: string]: any };
+// 记录行和列的索引
+const rowRecord = defineModel<string[][]>('rowRecord', { required: false, default: () => [] });
+// const matrixAnswer = defineModel<{ [key: string]: 1 }>('matrixAnswer', { required: false, default: () => ({}) });
+// 检查 rowRecord 是否存在
+console.log(`rowRecord:`, rowRecord.value);
+
+/* const isPreview =  */defineModel<boolean>('isPreview', { required: false, default: false });
+defineProps<{
+  rows: OptionType[];
+  cols: OptionType[];
 }>();

-const emits = defineEmits(['update:matrixAnswer']);
+// const emits = defineEmits(['update:matrixAnswer', 'update:rowRecord']);

 const handleRowNameChange = (/* value: string */) => {
  // console.log(`row change: ${value}`);
  // 你可以在这里添加其他逻辑
 };

-const handleColNameChange = (
-  rowOption: string,
-  colOption: string,
-  e: Event,
-  rowIndex: number,
-  colIndex: number
-) => {
-  const target = e.target as HTMLInputElement;
-  const key = `R${rowIndex + 1}_C${colIndex + 1}`;
-  const newMatrixAnswer = { ...props.matrixAnswer, [key]: target.value };
+function getInputValue(row: number, col: number) {
+  console.log(`row: ${row}, col: ${col}`);
+  console.log(`rowRecord:`, rowRecord.value);

-  emits('update:matrixAnswer', newMatrixAnswer);
-};
+  return rowRecord.value?.[row]?.[col] ?? '';
+}
+
+// 当 matrix text 选中时，更新 rowRecord 和 matrixAnswer
+function handleMatrixTextChange(row: number, col: number, e: Event) {
+  const target = e.target as HTMLInputElement;
+  const inputValue = target.value;
+
+  // 获取 colIndexArray
+  if (!rowRecord.value[row]) {
+    // 如果没有对应的row，创建一个
+    rowRecord.value[row] = [];
+  }
+  // cols 的逻辑 和 handleMatrixRadioChange 一致
+  const cols = rowRecord.value[row];
+  cols[col] = inputValue;
+  console.log(`rowRecord:`, rowRecord.value);
+}
+// const handleColNameChange = (rowOption: string, colOption: string) => {
+// // const target = e.target as HTMLInputElement;
+// const col = props.columns.findIndex((option) => option.option === colOption);
+// const row = props.rows.findIndex((option) => option.option === rowOption);
+
+// if (props.questionType === 9) {
+//   props.rowRecord[col] = row + 1;
+//   props.matrixAnswer = {};
+//   props.rowRecord.forEach((row, index) => {
+//     props.matrixAnswer[`${index + 1}_${row}`] = 1;
+//   });
+// }
+
+// emits('update:matrixAnswer', props.matrixAnswer);
+// emits('update:rowRecord', props.rowRecord);
+// };
 </script>

 <style scoped lang="scss">
--- a/src/views/Design/components/Questions/NPS.vue
+++ b/src/views/Design/components/Questions/NPS.vue
@@ -1,9 +1,7 @@
 <template>
  <div class="content">
    <van-field
-      v-model="element.stem"
-      :label="element.stem"
-      :required="element.config.is_required === 1"
+      v-model="element.stem" :label="element.stem" :required="element.config.is_required === 1"
      label-align="top"
    >
      <template #left-icon>
@@ -13,12 +11,13 @@
        <contenteditable v-model="element.stem" :active="active" @blur="saveStem"></contenteditable>
      </template>
      <template #input>
-        <div v-for="(optionItem, optionItemIndex) in element.options" :key="optionItemIndex">
+        <div v-for="(optionItem, optionItemIndex) in isPreview ? element.list : element.options" :key="optionItemIndex">
          <div
-            v-for="(item, optionIndex) in optionItem"
-            :key="optionIndex"
+            v-for="(item, optionIndex) in isPreview ? optionItem.options : optionItem" :key="optionIndex"
            @click="chooseOption(item)"
          >
+            <RateCharacter v-model="rate" :index="optionIndex" :config="element.config" @change="handleRateChange">
+            </RateCharacter>
            <div class="tips">
              <p>{{ element.config.prompt_left }}</p>
              <p>{{ element.config.prompt_center }}</p>
@@ -36,6 +35,7 @@
 import { ref, toRefs } from 'vue';
 import RateCharacter from './RateCharacter.vue';

+const isPreview = defineModel('isPreview', { default: false });
 const props = defineProps({
  element: {
    type: Object
@@ -51,6 +51,36 @@ const props = defineProps({
  sn: { type: String, default: '' },
  questionType: { type: [String, Number], default: 4 }
 });
+
+// answer 的答案以 矩阵形式存储， 例如 [4,7]，上层更新答案的时候也容易
+const rates = defineModel('rates', { default: [] });
+const rate = ref(0);
+
+// 不知道的 BUG ，开始的时候不能重置颜色。 故如此
+setTimeout(() => {
+  rate.value = localStorage.getItem(props.sn);
+  console.log(`rate value:`, rate.value);
+  // if (rates.value[0] !== undefined) {
+  // console.log(`rates value:`, rates.value);
+  // rate.value = rates.value[0]
+  // }
+  // else return
+}, 1000);
+
+/**
+ *
+ * @param index {number} 索引
+ * @param rate {number} 具体数值
+ */
+function handleRateChange(index, rate) {
+  //  如果没有查询到对应索引的数值， 那么就直接push一个，直到有数值为止
+  while (rates.value.length < index) {
+    rates.value.push(NaN);
+  }
+  rates.value[index] = rate;
+  localStorage.setItem(props.sn, rate.value);
+}
+
 const { element } = toRefs(props);
 const chooseId = ref('');
 const emit = defineEmits(['update:element']);
--- a/src/views/Design/components/Questions/RateCharacter.vue
+++ b/src/views/Design/components/Questions/RateCharacter.vue
@@ -1,11 +1,8 @@
 <template>
  <div>
-    <ul>
+    <ul :key="test">
      <li
-        v-for="(rate, rateIndex) in rateItem"
-        :key="rateIndex"
-        class="rate_item"
-        :class="{ active_item: rate.active }"
+        v-for="(rate, rateIndex) in rateItem" :key="rateIndex" class="rate_item" :class="{ active_item: rate.active }"
        @click="getItem(rate)"
      >
        {{ rate.label }}
@@ -40,6 +37,11 @@ const rateItem = ref([
  }
 ]);

+const test = ref(1);
+
+setTimeout(() => {
+  test.value = 2;
+}, 300);
 const props = defineProps({
  config: {
    type: Object,
@@ -49,6 +51,8 @@ const props = defineProps({

 const model = defineModel();

+const index = defineModel('index');
+const emit = defineEmits(['change']);
 const renderScore = (min, max, interval) => {
  const result = [];
  for (let i = min; i <= max; i += interval) {
@@ -64,15 +68,18 @@ const renderScore = (min, max, interval) => {
  rateItem.value = result;
 };
 // 重置颜色
-const getItem = (value) => {
+function getItem(value) {
  model.value = value.label;
  rateItem.value.forEach((item, index) => {
    rateItem.value[index].active = item.label <= value.label;
  });
-};
+}

 watch(model, () => {
  getItem({ label: model.value, active: false });
+  emit('change', index.value, model.value);
+}, {
+  // immediate: true
 });

 // 监听 min、max 和 score_interval 的变化
--- a/src/views/Design/components/Questions/paging/Paging.vue
+++ b/src/views/Design/components/Questions/paging/Paging.vue
@@ -11,8 +11,7 @@
          class="iconfont active-icon"
          :style="{ marginRight: isLastPage ? '0' : '16px' }"
          @click="activePage"
-          >&#xe86c;</i
-        >
+        >&#xe86c;</i>
        <template v-if="!isLastPage">
          <i class="iconfont moverQues" style="margin-right: 16px">&#xe71b;</i>
          <i class="iconfont" @click="deleteHandle">&#xe6c5;</i>
--- a/src/views/Design/components/Questions/types/question.d.ts
+++ b/src/views/Design/components/Questions/types/question.d.ts
@@ -38,11 +38,12 @@ type questionsList = {
 };

 type question = {
+  answer?: unknown;
  id?: string;
  title?: string;
  stem?: string;
  other?: string;
-  list: questionsList[][];
+  list: questionsList[];
  question_index?: number;
  question_type?: number;
  config?: Config;
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -13,7 +13,7 @@ const router = useRouter();
 const contentShow = ref(false);
 const show = ref(false);

-onMounted(async () => {
+onMounted(async() => {
  contentShow.value = true;
  // if (utils.getSessionStorage('xToken')) {
  //   const appToken = utils.getParameter('digitalYiliToken');
--- a/src/views/Home/components/LastSurvey/Index.vue
+++ b/src/views/Home/components/LastSurvey/Index.vue
@@ -46,7 +46,7 @@ import { consoleSurveys } from '@/api/home/index.js';
 const survey = ref({
  project_name: ''
 });
-const fetchSurveys = async () => {
+const fetchSurveys = async() => {
  const params = {
    page: 1,
    per_page: 10,
--- a/src/views/Home/components/Market/Index.vue
+++ b/src/views/Home/components/Market/Index.vue
@@ -20,7 +20,7 @@ const marketList = ref([]);
 const active = ref(null);
 const marketInfo = ref([]);

-const getTableList = async () => {
+const getTableList = async() => {
  const res = await getListScene();
  if (res.data.code === 0) {
    res.data.data.forEach((item) => {
@@ -32,7 +32,7 @@ const getTableList = async () => {
    getMarketInfo(marketList.value[0]);
  }
 };
-const getMarketInfo = async (item) => {
+const getMarketInfo = async(item) => {
  const code = marketList.value.filter((market, index) => item === index)[0].code;
  const params = {
    page: 1,
--- a/src/views/Market/Index.vue
+++ b/src/views/Market/Index.vue
@@ -3,9 +3,7 @@
    <div v-for="item in 10" :key="item" class="template">
      <img src="https://picsum.photos/131/128" width="110" height="100" alt="" />
      <span>报名/签到模板</span>
-      <span style="color: rgb(127, 127, 127)"
-        >报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span
-      >
+      <span style="color: rgb(127, 127, 127)">报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span>
    </div>
  </div>
 </template>
--- a/src/views/Survey/Index.vue
+++ b/src/views/Survey/Index.vue
@@ -105,8 +105,7 @@ import { Io5EllipsisHorizontalSharp } from 'vue-icons-plus/io5';
        top: 0;
        right: 10px;
        padding: 28px 13px 19px 7px;
-        background: url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbb370d01215f9cedc28d567c637c011047f83a99fbb5e7ac348ebd0ef0015f32')
-          100% no-repeat;
+        background: url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbb370d01215f9cedc28d567c637c011047f83a99fbb5e7ac348ebd0ef0015f32') 100% no-repeat;
        background-size: 100% 100%;
        opacity: 1;

@@ -130,7 +129,7 @@ import { Io5EllipsisHorizontalSharp } from 'vue-icons-plus/io5';
          font-size: 15px;
        }

-        & > :nth-child(2) {
+        &> :nth-child(2) {
          position: relative;
          left: 10px;
          padding: 1px;
--- a/src/views/Survey/views/Preview/Index.vue
+++ b/src/views/Survey/views/Preview/Index.vue
@@ -299,6 +299,7 @@
          :config="question.config"
          :question="question"
          isMobile
+          :questionIndex="question.question_index"
          @change-answer="onRelation($event, question)"
        />
        <!--        &lt;!&ndash; 地理位置题 &ndash;&gt;-->
--- a/src/views/Survey/views/Preview/components/AnswerViewer.vue
+++ b/src/views/Survey/views/Preview/components/AnswerViewer.vue
@@ -227,8 +227,8 @@ export default defineComponent({
            .map((option) => {
              return this.wares.find(
                (ware) =>
-                  ware.question_index === option.question_index &&
-                  ware.option_index === option.option_index
+                  ware.question_index === option.question_index
+                  && ware.option_index === option.option_index
              );
            });
          wares = wares.filter((x) => x);
--- a/src/views/Survey/views/Preview/components/SceneSurveyViewerPage/Index.vue
+++ b/src/views/Survey/views/Preview/components/SceneSurveyViewerPage/Index.vue
@@ -144,7 +144,7 @@ export default {
  methods: {
    debounce(func, wait) {
      let timeout;
-      return function (...args) {
+      return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
      };
--- a/src/views/Survey/views/Preview/components/questions/PreviewChoice.vue
+++ b/src/views/Survey/views/Preview/components/questions/PreviewChoice.vue
@@ -1,341 +1,42 @@
 <template>
-  <van-field
-    v-model="stem"
-    :label="element.stem"
-    :required="element.config.is_required === 1"
-    label-align="top"
-    class="base-select"
-  >
-    <template #label>
-      <contenteditable v-model="element.stem" :active="active" @blur="emitValue"></contenteditable>
-    </template>
-    <template #input>
-      <template v-for="listItem in list" :key="listItem.options">
-        <template v-for="(option, optionIndex) in listItem.options" :key="option.option">
-          <!--     单选题     -->
-          <van-radio-group v-if="question?.question_type === 1" v-model="choiceValue">
-            <van-radio :name="optionIndex">{{ getDomText(option.option!) }}</van-radio>
-          </van-radio-group>
-          <!--   多选题       -->
-          <van-checkbox-group
-            v-else-if="question!.question_type! === 2"
-            v-model="choiceValue"
-            shape="square"
-          >
-            <van-checkbox :name="optionIndex">{{ getDomText(option.option!) }}</van-checkbox>
-          </van-checkbox-group>
-        </template>
-      </template>
-    </template>
-  </van-field>
+  <choice v-model:answer="choiceValue" :element="question" :index="answerIndex" :is-preview="true" />
 </template>
 <script setup lang="ts">
-import { defineAsyncComponent, ref, watch } from 'vue';
-import { getDomText } from '@/utils/utils';
+import { watch, ref } from 'vue';
+import Choice from '@/views/Design/components/Questions/Choice.vue';

+type answerType = {
+  options: any[];
+  value: number;
+};
 // // 预览新增 v-model
-const answer = defineModel('answer');
-// const answerIndex = defineModel('answerIndex');
-const stem = defineModel('stem');
-const question = defineModel<question>('question', {});
-const list = defineModel<questionsList[]>('list');
+const answer = defineModel<answerType>('answer', { default: undefined });
+const answerIndex = defineModel<number>('answerIndex');
+// const stem = defineModel<string>('stem', { default: '' });4
+const question = defineModel<question>('question', { default: { config: { is_required: false } } });
+const list = defineModel<questionsList[]>('list', { default: [[]] });

+const choiceValue = ref<string>((answer.value?.value - 1).toString() ?? '0');
+
+// 初始化数据，因为 preview 的数据源和 element 的数据源不相同， 所以需要配置一遍数据
+initData();
+function initData() {
+  question.value.options = list.value;
+}
 // // 预览新增 emit ['changeAnswer', 'previous', 'next']
 const emit = defineEmits(['update:element', 'changeAnswer', 'previous', 'next', 'update:element']);

-// 用戶選擇的答案
-const choiceValue = ref(answer.value?.value - 1 ?? undefined);
-const Contenteditable = defineAsyncComponent(() => import('@/components/contenteditable.vue'));
-
-// console.log(`choice question.value:`, question.value);
-watch(choiceValue, () => {
-  answer.value = {
-    options: list.value.flatMap((group) => group.options || []),
-    value: choiceValue.value + 1
-  };
-  // console.log(answer.value);
-
-  // 需要在 question 里面附加 answer 信息
-  // question.value[`answer`] =
-  emit('changeAnswer', {
-    options: list.value.flatMap((group) => group.options || []),
-    value: choiceValue.value + 1
-  });
-});
-// console.log(`question:`, question.value);
-// console.log(`list: `, list.value);
-// const props = defineProps({
-//   // 预览新增 props
-//   config: {
-//     type: Object,
-//     default: () => {
-//       return {};
-//     }
-//   },
-//   hideOptions: {
-//     type: Object,
-//     default: () => {
-//       return {};
-//     }
-//   },
-//   answerSn: {
-//     type: String,
-//     default: ''
-//   },
-//   answerSurveySn: {
-//     type: String,
-//     default: ''
-//   },
-//   // 原先 props
-//   element: {
-//     type: Object,
-//     default: () => {
-//       return {
-//         config: {
-//           is_required: undefined
-//         }
-//       };
-//     }
-//   },
-//   active: {
-//     type: Boolean,
-//     default: false
-//   },
-//   index: {
-//     type: Number,
-//     default: 0
-//   }
-// });
-
-// initData();
-//
-// function initData() {
-//   // 当预览时， 某些数据可能不存在
-//   // 若 element有些数据不存在， 默认去 props 里面 取值
-//   !props.element.stem && (props.element.stem = stem.value);
-//
-//   !props.element.options && (props.element.stem = stem.value);
-// }
-
-// console.log(`props.element`, props.element);
-// console.log(`props.question: `, question.value);
-// const { element } = toRefs(props);
-
-const emitValue = () => {
-  // emit('update:element', element.value);
-};
-
-// const value = ref(''); // 值
-// const options = ref([]); // 选项
-// const optionGroups = ref([]); // 分组
-//
-// console.log(`radio input question: `, props.question);
-//
-// // 初始化
-// function init() {
-//   props.list.forEach((list) => {
-//     options.value = [...options.value, ...list.options];
-//   });
-//   if (props.answer) {
-//     value.value = Object.keys(props.answer)[0];
-//     options.value.forEach((option) => {
-//       if (option.is_other && option.option_key === value.value) {
-//         option.value = props.answer[value.value];
-//       }
-//     });
-//   }
-// }
-//
-// init();
-//
-// // 选项分组
-// function setOptionGroups() {
-//   optionGroups.value = [];
-//   const copyOptions = JSON.parse(JSON.stringify(options.value));
-//   props.config.option_groups?.option_group.forEach((optionGroup) => {
-//     const group = {
-//       title: optionGroup.title,
-//       options: []
-//     };
-//     optionGroup.groups.forEach((groups) => {
-//       const index = copyOptions.findIndex((option) => option.option_key === groups.option_key);
-//       if (index === -1) return;
-//       group.options.push(copyOptions.splice(index, 1)[0]);
-//     });
-//     group.options = sortOptions(
-//       group.options,
-//       props.question.config.select_random && props.question.config.option_group_random_inside
-//     );
-//     optionGroups.value.push(group);
-//   });
-//   optionGroups.value = sortOptions(
-//     optionGroups.value,
-//     props.question.config.select_random && props.question.config.option_group_random_outside
-//   );
-//   // 若是 group 是undefined ，默认给一个空对象
-//   const group = optionGroups.value.find((group) => !group.title) ?? {};
-//   // console.log(group);
-//   group.options = sortOptions(copyOptions, props.question.config.select_random);
-// }
-//
-// // 排序(固定项和其他项不参与随机)
-// function sortOptions(oldOptions, isRandom) {
-//   const sorts = [];
-//   const fixed = [];
-//   const others = [];
-//   const removeOther = [];
-//   oldOptions.forEach((option) => {
-//     if (option.is_remove_other) {
-//       removeOther.push(option);
-//     } else if (option.is_other) {
-//       others.push(option);
-//     } else if (option.is_fixed) {
-//       fixed.push(option);
-//     } else {
-//       sorts.push(option);
-//     }
-//   });
-//   return [...randomOptions(sorts, isRandom), ...fixed, ...others, ...removeOther];
-// }
-//
-// // 选择回调
-// function changeValue(e) {
-//   // 更新答案
-//   const option = options.value.find((option) => option.option_key === e.target.value);
-//   context.emit('update:answer', {
-//     [e.target.value]: option.value || (option.is_other ? '' : '1')
-//   });
-//   // 清空未选中项输入框值
-//   options.value.forEach((option) => {
-//     if (option.is_other && option.option_key !== e.target.value) {
-//       option.value = '';
-//     }
-//   });
-// }
-//
-// function onChangeValue(key) {
-//   value.value = key;
-//   changeValue({ target: { value: key } });
-// }
-//
-// // 输入回调
-// function changeInput(e, key) {
-//   const option = options.value.find((option) => option.option_key === key);
-//   option.value = e.target.value;
-//   value.value = key;
-//   // 更新答案
-//   context.emit('update:answer', { [key]: e.target.value });
-// }
-//
-// // 监听答案
-// watch(
-//   () => props.answer,
-//   () => {
-//     context.emit('changeAnswer', {
-//       options: optionGroups.value.flatMap((group) => group.options || []),
-//       value: value.value
-//     });
-//     // 质量控制
-//     const timer = setTimeout(() => {
-//       if (value.value) {
-//         const index = optionGroups.value
-//           .flatMap((group) => group.options.map((option) => option))
-//           .findIndex((option) => option.option_key === value.value);
-//         context.emit('update:answerIndex', `${index}`);
-//       } else if (props.answerIndex) {
-//         context.emit('update:answerIndex', '');
-//       }
-//       clearTimeout(timer);
-//     });
-//   },
-//   {
-//     deep: true,
-//     immediate: true
-//   }
-// );
-//
-// // 监听list，更新关联选项
-// watch(
-//   () => props.list,
-//   () => {
-//     // 更新关联题选项
-//     let newOptions = [];
-//     props.list.forEach((list) => {
-//       newOptions = [...newOptions, ...list.options];
-//     });
-//     // 其他项
-//     newOptions.forEach((option) => {
-//       if (option.is_other && option.option_key === value.value) {
-//         const timer = setTimeout(() => {
-//           option.value = props.answer[value.value];
-//           clearTimeout(timer);
-//         });
-//       }
-//     });
-//
-//     if (
-//       !compareArrayByField(options.value, newOptions, 'option_key') ||
-//       !compareArrayByField(options.value, newOptions, 'option')
-//     ) {
-//       options.value = newOptions;
-//     }
-//
-//     // 清空值和答案
-//     if (
-//       value.value &&
-//       options.value.findIndex((option) => option.option_key === value.value) === -1
-//     ) {
-//       // 清空值
-//       value.value = '';
-//       // 清空答案
-//       context.emit('update:answer', null);
-//     }
-//   },
-//   {
-//     deep: true
-//   }
-// );
-//
-// // 监听list，更新关联选项
-// watch(
-//   () => options.value,
-//   (val, oldVal) => {
-//     if (
-//       compareArrayByField(val, oldVal || [], 'option_key') &&
-//       compareArrayByField(val, oldVal || [], 'option')
-//     ) {
-//       return;
-//     }
-//     setOptionGroups();
-//   },
-//   {
-//     deep: true,
-//     immediate: true
-//   }
-// );
-//
-// const onHoldToCart = (target) => {
-//   value.value = target.option_key;
-//
-//   changeValue({
-//     target: {
-//       value: target.option_key
-//     }
-//   });
-// };
-//
-// const cartWaresLength = computed(() => {
-//   if (!props.answer) return 0;
-//   return Object.keys(props.answer).length;
-// });
-//
-// console.log(`car wares length:`, cartWaresLength.value);
-//
-// // 显示分组标题
-// function showGroupTitle(groupOptions) {
-//   const option = groupOptions.find((option) => !props.hideOptions.includes(option.option_key));
-//   return !!option;
-// }
+watch(
+  () => choiceValue.value,
+  () => {
+    const res = {
+      options: list.value.flatMap((group) => group.options || []),
+      value: Number(choiceValue.value) + 1
+    };
+    answer.value = res;
+    emit('changeAnswer', res);
+  }
+);
 </script>
 <style scoped lang="scss">
 .choice-html {
--- a/src/views/Survey/views/Preview/components/questions/PreviewCompletion.vue
+++ b/src/views/Survey/views/Preview/components/questions/PreviewCompletion.vue
@@ -1,13 +1,19 @@
 <template>
-  <van-field v-model="inputValue" v-focus placeholder="请输入内容"> </van-field>
+  <!--  <van-field v-model="inputValue" v-focus placeholder="请输入内容"> </van-field>-->
+  <!--  <completion />-->
+  <completion
+    v-model:completionValue="completionValue"
+    :index="answerIndex"
+    :element="question"
+  ></completion>
 </template>
 <script setup lang="ts">
 import { defineEmits, ref, watch } from 'vue';
-import { vFocus } from '@/utils/directives/useVFocus';
+import Completion from '@/views/Design/components/Questions/Completion.vue';
 // 预览新增 v-model
 // const config = defineModel('config');
-const answer = defineModel<{ value: string | number }>('answer');
-// const answerIndex = defineModel('answerIndex');
+const answer = defineModel<{ value: string | number }>('answer', { default: { value: '' } });
+const answerIndex = defineModel<number>('answerIndex');
 // const stem = defineModel('stem');
 const question = defineModel<question>('question', {});
 // const list = defineModel<questionsList[]>('list');
@@ -17,82 +23,24 @@ const question = defineModel<question>('question', {});

 // // 预览新增 emit ['changeAnswer', 'previous', 'next']
 const emit = defineEmits(['previous', 'next', 'update:modelValue', 'saveOption', 'changeAnswer']);
-// console.log(answer);
-const inputValue = ref(answer.value?.value ?? '');
+
+console.log(`answer`, answer.value);
+console.log(question.value);
+const completionValue = ref(answer.value?.value ?? '');
 // console.log(`question:`, question.value);
 // console.log(`list: `, list.value);

-// console.log(question.value);
 // 进行提交答案
-watch(inputValue, () => {
-  const res = {
-    value: inputValue.value
-  };
-
-  question.value.answer = res;
-  emit('changeAnswer', res);
-});
-
-// function handleKeyDown() {
-//   emit('changeAnswer', {
-//     options: list.value,
-//     value: inputValue.value + 1
-//   });
-// }
-
-// const props = defineProps({
-//   modelValue: {
-//     type: Object,
-//     required: false,
-//     default: () => {
-//       return {};
-//     }
-//   }
-// });
-
-// const selectTextTypeModel = ref(false);
-// const textTypeList = [
-//   {
-//     text: '不限',
-//     value: 0
-//   },
-//   {
-//     text: '整数',
-//     value: 1
-//   },
-//   {
-//     text: '小数',
-//     value: 2
-//   },
-//   {
-//     text: '字母',
-//     value: 3
-//   },
-//   {
-//     text: '中文',
-//     value: 4
-//   },
-//   {
-//     text: 'email',
-//     value: 5
-//   },
-//   {
-//     text: '手机号',
-//     value: 6
-//   },
-//   {
-//     text: '身份证号',
-//     value: 7
-//   }
-// ];
-
-// const selectText = (textType) => {
-//   return textTypeList.filter((item) => item.value === textType)[0]?.text;
-// };
-// const confirm = ({ selectedValues }) => {
-//   actionQuestion.value.config.text_type = Number(selectedValues[0]);
-//   selectTextTypeModel.value = false;
-//   emit('saveOption');
-// };
+watch(
+  () => completionValue.value,
+  () => {
+    const res = {
+      value: completionValue.value
+    };
+    answer.value = res;
+    question.value!.answer = res;
+    emit('changeAnswer', res);
+  }
+);
 </script>
 <style scoped lang="scss"></style>
--- a/src/views/Survey/views/Preview/components/questions/PreviewFileUpload.vue
+++ b/src/views/Survey/views/Preview/components/questions/PreviewFileUpload.vue
@@ -1,82 +1,20 @@
 <script setup lang="ts">
-import { showSuccessToast, showFailToast } from 'vant';
-
-// const { element } = defineProps({
-//   element: {
-//     require: false
-//   }
-// });
-
-// const config = defineModel('question', { required: false });
-// console.log(config.value);
-/**
- * 文件大小限制
- * @property {number} max - 最大文件大小
- * @property {number} min - 最小文件大小
- */
-const fileLimit = {
-  // 默认4MB
-  max: 1024 * 1024 * 40,
-  min: 0
-};
-
-/**
- * 上传文件
- * @description 上传文件
- */
-function handleFileUpload() {
-  const fileInput = document.createElement('input');
-  fileInput.type = 'file';
-  // fileInput.accept = '.jpg,.jpeg,.png,.gif';
-  // fileInput.multiple = true;
-  fileInput.click();
-
-  fileInput.addEventListener('change', handleFileChange);
-
-  function handleFileChange(event: Event) {
-    const files = (event.target as HTMLInputElement).files;
-    if (files) {
-      for (let i = 0; i < files.length; i++) {
-        const file = files[i];
-        // console.log(file.size);
-
-        if (file.size > fileLimit.max) {
-          showFailToast(`文件太大，超过${fileLimit.max / 1024 / 1024}MB`);
-          return;
-        } else if (file.size < fileLimit.min) {
-          showFailToast(`文件太小，小于${fileLimit.min / 1024 / 1024}MB`);
-          return;
-        }
-      }
-
-      //   这里保留上传的区域
-
-      // 成功
-      showSuccessToast('成功文案');
-    }
-  }
-}
+import FileUpload from '@/views/Design/components/Questions/FileUpload.vue';
+const questionIndex = defineModel<number>('questionIndex', { default: NaN });
+const question = defineModel<question>('question', {});
+// 接口还未稳定
+// 需要的数据暂时先放在这里
+// 格式如下
+// {
+//   "name": "3-12.png",
+//   "size": 238875,
+//   "type": "image/png",
+//   "url": "https://test-cxp-public-web-1302259445.cos.ap-beijing.myqcloud.com/uat-yls/answer/7JjQp7am/1742022258458_388_3-12.png"
+// }
 </script>
-
 <template>
-  <van-field>
-    <template #input>
-      <div>
-        <div class="file-upload-label" @click="handleFileUpload">
-          <van-icon name="photo"></van-icon>
-          <span>上传文件</span>
-        </div>
-      </div>
-    </template>
-  </van-field>
+  <!-- 文件上传题 -->
+  <file-upload :element="question" :index="questionIndex" :active="false" />
 </template>

-<style lang="scss" scoped>
-.file-upload-label {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  width: 100%;
-  height: 50px;
-}
-</style>
+<style scoped></style>
--- a/src/views/Survey/views/Preview/components/questions/PreviewMatrixCheckbox.vue
+++ b/src/views/Survey/views/Preview/components/questions/PreviewMatrixCheckbox.vue
@@ -1,132 +1,97 @@
 <template>
-  <table class="matrix-table">
-    <thead>
-      <tr>
-        <th></th>
-        <td v-for="col in columns" :key="col.option">
-          <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
-          <input
-            v-if="col.editor"
-            v-model="col.option"
-            v-focus
-            type="text"
-            @focusout="col.editor = false"
-            @click="handleRowNameChange(col.option!)"
-          />
-          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option" />
-        </td>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
-        <th v-html="row.option" />
-        <td v-for="(col, colIndex) in columns" :key="colIndex">
-          <input
-            type="checkbox"
-            :value="`${rowIndex + 1}_${colIndex + 1}`"
-            :checked="isOptionChecked(rowIndex, colIndex)"
-            @change="handleColValueChange(row.option, col.option)"
-          />
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <MatrixCheckbox
+    v-model:rowRecord="rowRecord" v-model:matrix-radio-answer="answer!" :rows="rows" :cols="cols"
+    :is-preview="true"
+  />
 </template>

 <script setup lang="ts">
-import { vFocus } from '@/utils/directives/useVFocus';
-
-const rows = defineModel<OptionType[]>('rows', { required: false, default: [] });
-const columns = defineModel<OptionType[]>('columns', { required: false, default: [] });
+import MatrixCheckbox from '@/views/Design/components/Questions/MatrixCheckbox.vue';
+import { computed, ref, watch } from 'vue';
 // const questionType = defineModel<number>('questionType', { required: false });
-// const matrixAnswer = defineModel<{ [key: string]: any }>('matrixAnswer', { required: false });
-const rowRecord = defineModel<number[]>('rowRecord', { required: false });
+
+// 矩阵多选的答案类型
+type answerType = {
+  [key: string]: 1;
+};

 // preview props
 // const stem = defineModel('stem');
-const list = defineModel<questionsList[]>('list', { required: false });
+// const list = defineModel<questionsList[]>('list', { required: false });
 // const config = defineModel<OptionConfigType>('config', { required: false });
-// const question = defineModel('question');
-// const answer = defineModel('answer');
+const question = defineModel<question>('question');
+const emit = defineEmits(['changeAnswer', 'previous', 'next']);
+// 示例
+// {
+//   "1_1": 1,
+//   "1_2": 1,
+//   "2_1": 1,
+//   "2_2": 1
+// }
+const answer = defineModel<answerType>('answer', {
+  // 临时赋值, 用于测试
+  // default: () => ({
+  //   "1_1": 1,
+  //   "1_2": 1,
+  //   "2_1": 1,
+  //   "2_2": 1
+  // })
+});
 // const answerIndex = defineModel('answerIndex');
 // const answerSn = defineModel('answerSn');
 // const answerSurveySn = defineModel('answerSurveySn');

-initData();
+// 记录行和列的索引
+// 记录的格式如下，
+// [
+//   [0, 1],
+//   [0, 1]
+// ]
+const rowRecord = ref<number[][]>([]);

-// 数据初始化
-function initData() {
-  if (!list.value) return;
-  console.log(list.value);
-  if (list.value[0].options.length >= 1) rows.value = list.value[0].options;
-  if (list.value[1].options.length >= 1) columns.value = list.value[1].options;
+// 假如 answer 有数值，需要解析 answer ，然后传递 record 给子组件
+answer.value && parseAnswer(answer.value);

-  // 矩阵多选数组形式 [[1,2],[3]], 长度和 行数有关， 选中的位置跟里面的位置有关
-  rowRecord.value = new Array(rows.value.length).fill(new Array(columns.value.length).fill(0));
+console.log(`answer value`, answer.value);
+/**
+ * 解析 answer
+ */
+function parseAnswer(answer: answer) {
+  console.log(`come in parseAnswer`);
+  const rowRecordList: number[][] = [];
+  Object.entries(answer).forEach(([key]) => {
+    const [row, col] = key.split('_').map(Number);
+    if (!rowRecordList[row - 1]) rowRecordList[row - 1] = [];
+    rowRecordList[row - 1].push(col - 1);
+  });
+  rowRecord.value = rowRecordList;
+
+  return rowRecordList;
 }
+// 查看parseAnswer的返回值
+// console.log(`parseAnswer value:`, parseAnswer(answer.value!))

-// console.log(`stem:`, stem.value);
-// console.log(`list:`, list.value);
-// console.log(`config:`, config.value);
-// console.log(`question:`, question.value);
-// console.log(`answer:`, answer.value);
-// console.log(`answerIndex:`, answerIndex.value);
-// console.log(`answerSn:`, answerSn.value);
-// console.log(`answerSurveySn:`, answerSurveySn.value);
+/**
+ * 获取行和列的内容
+ * 行的内容在 question.list[0].options
+ * 列的内容在 question.list[1].options
+ */
+const rows = computed(() => question.value?.list[0]?.options ?? []);
+const cols = computed(() => question.value?.list[1]?.options ?? []);

-// rows.value && console.log(`matrix rows:`, rows.value);
-// columns.value && console.log(`matrix columns:`, columns.value);
-// columns.value && console.log(`matrix questionType:`, questionType.value);
-// columns.value && console.log(`matrix matrixAnswer:`, matrixAnswer.value);
-// columns.value && console.log(`matrix rowRecord:`, rowRecord.value);
+watch(rowRecord, () => {
+  console.log(`record has changed`, rowRecord.value);
+  // 重新生成 answer
+  const newAnswer: answer = {};
+  rowRecord.value.forEach((rowOptions, rowIndex) => {
+    rowOptions.forEach((colIndex) => {
+      newAnswer[`${rowIndex + 1}_${colIndex + 1}`] = 1;
+    });
+  });
+  answer.value = newAnswer;
+  emit('changeAnswer', newAnswer);
+}, { deep: true });

-/* const emits = */
-defineEmits(['update:matrixAnswer', 'update:rowRecord']);
-
-const isOptionChecked = (/* rowIndex: number, colIndex: number */): boolean => {
-  // const key = `R${rowIndex + 1}_C${colIndex + 1}`;
-  // console.log(key);
-  // return !!matrixAnswer.value[key];
-};
-
-const handleRowNameChange = (/* value: string */) => {
-  // console.log(`row change: ${value}`);
-  // 你可以在这里添加其他逻辑
-};
-
-const handleColValueChange = (rowOption: string, colOption: string) => {
-  // const target = e.target as HTMLInputElement;
-  // 寻找行列的索引
-  const col = columns.value.findIndex((option) => option.option === colOption);
-  const row = rows.value.findIndex((option) => option.option === rowOption);
-
-  // 此处的矩阵是由二维数组组成，两者是通过 索引和 索引对应的数值来表示
-  // rowRecord 是负责记录的数组
-  // 记录之后清空结果对象，遍历数组获取相应的结果内容给 matrixAnswer
-  // rowRecord.value[row] = col;
-  // matrixAnswer.value = {};
-  // rowRecord.value.forEach((row, col) => {
-  //   matrixAnswer.value[`${col + 1}_${row + 1}`] = 1;
-  // });
-
-  // 获取row行对应的数组
-  const rowArray = rowRecord.value[row];
-  // console.log(...rowRecord.value);
-  // console.log(`rowArray`, rowArray);
-  // 检查第 col 个元素
-  const value = rowArray[col];
-  if (value) {
-    // 若元素存在，则变动元素数值
-    rowArray[col] = 0;
-  } else {
-    // 不存在记录为1
-    rowArray[col] = 1;
-  }
-
-  // console.log(...rowRecord.value);
-  // emits('update:matrixAnswer', matrixAnswer.value);
-  // emits('update:rowRecord', rowRecord.value);
-};
 </script>

 <style scoped lang="scss">
--- a/src/views/Survey/views/Preview/components/questions/PreviewMatrixRadio.vue
+++ b/src/views/Survey/views/Preview/components/questions/PreviewMatrixRadio.vue
@@ -1,117 +1,80 @@
 <template>
-  <table class="matrix-table">
-    <thead>
-      <tr>
-        <th></th>
-        <!--   1 是行标签     -->
-        <td v-for="col in columns" :key="col.option">
-          <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
-          <input
-            v-if="col.editor"
-            v-model="col.option"
-            v-focus
-            type="text"
-            @focusout="col.editor = false"
-            @click="handleRowNameChange(col.option!)"
-          />
-          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option"></span>
-        </td>
-      </tr>
-    </thead>
-    <tbody>
-      <!--   0 是列标签     -->
-      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
-        <th v-html="row.option"></th>
-        <td v-for="(col, colIndex) in columns" :key="colIndex">
-          <input
-            type="radio"
-            :name="`R${rowIndex + 1}`"
-            :value="`${rowIndex + 1}_${colIndex + 1}`"
-            :checked="isOptionChecked(rowIndex, colIndex)"
-            @change="handleColValueChange(row.option, col.option, $event)"
-          />
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <matrix-radio
+    v-model:rowRecord="rowRecord" v-model:matrix-radio-answer="answer!" :rows="rows" :cols="cols"
+    :is-preview="true"
+  ></matrix-radio>
 </template>

 <script setup lang="ts">
-import { vFocus } from '@/utils/directives/useVFocus';
-
-const rows = defineModel<OptionType[]>('rows', { required: false, default: [] });
-const columns = defineModel<OptionType[]>('columns', { required: false, default: [] });
+import matrixRadio from '@/views/Design/components/Questions/MatrixRadio.vue';
+import { computed, ref, watch } from 'vue';
 // const questionType = defineModel<number>('questionType', { required: false });
-const matrixAnswer = defineModel<{ [key: string]: any }>('matrixAnswer', { required: false });
-const rowRecord = defineModel<number[]>('rowRecord', { required: false });
+
+// 矩阵单选的答案类型
+type answerType = {
+  [key: string]: 1;
+};

 // preview props
 // const stem = defineModel('stem');
-const list = defineModel<questionsList[]>('list', { required: false });
+// const list = defineModel<questionsList[]>('list', { required: false });
 // const config = defineModel<OptionConfigType>('config', { required: false });
-// const question = defineModel('question');
-// const answer = defineModel('answer');
+const question = defineModel<question>('question');
+const emit = defineEmits(['changeAnswer', 'previous', 'next']);
+// 示例
+// {
+//   "1_2": 1,
+//   "2_2": 1
+// }
+const answer = defineModel<answerType>('answer', {
+  // 临时赋值, 用于测试
+  default: () => ({
+    // "1_2": 1,
+    // "2_2": 1
+  })
+});
 // const answerIndex = defineModel('answerIndex');
 // const answerSn = defineModel('answerSn');
 // const answerSurveySn = defineModel('answerSurveySn');
+// 记录行和列的索引
+const rowRecord = ref<number[]>([]);

-initData();
-// 数据初始化
-function initData() {
-  if (!list.value) return;
-  // console.log(list.value);
-  rows.value = list.value[0].options;
-  columns.value = list.value[1].options;
+// 假如 answer 有数值，需要解析 answer ，然后传递 record 给子组件
+answer.value && parseAnswer(answer.value);

-  rowRecord.value = new Array(rows.value.length);
+/**
+ * 解析 answer
+ */
+function parseAnswer(answer: answerType) {
+  console.log(`come in parseAnswer`);
+  const rowRecordList: number[] = [];
+  Object.entries(answer).forEach(([key]) => {
+    const [row, col] = key.split('_');
+    rowRecordList[Number(row) - 1] = Number(col) - 1;
+  });
+  rowRecord.value = rowRecordList;
+  return rowRecordList;
 }

-// console.log(`stem:`, stem.value);
-// console.log(`list:`, list.value);
-// console.log(`config:`, config.value);
-// console.log(`question:`, question.value);
-// console.log(`answer:`, answer.value);
-// console.log(`answerIndex:`, answerIndex.value);
-// console.log(`answerSn:`, answerSn.value);
-// console.log(`answerSurveySn:`, answerSurveySn.value);
-//
-// rows.value && console.log(`matrix rows:`, rows.value);
-// columns.value && console.log(`matrix columns:`, columns.value);
-// columns.value && console.log(`matrix questionType:`, questionType.value);
-// columns.value && console.log(`matrix matrixAnswer:`, matrixAnswer.value);
-// columns.value && console.log(`matrix rowRecord:`, rowRecord.value);
+/**
+ * 获取行和列的内容
+ * 行的内容在 question.list[0].options
+ * 列的内容在 question.list[1].options
+ */
+const rows = computed(() => question.value?.list[0]?.options ?? []);
+const cols = computed(() => question.value?.list[1]?.options ?? []);

-/* const emits = */
-defineEmits(['update:matrixAnswer', 'update:rowRecord']);
-
-const isOptionChecked = (/* rowIndex: number, colIndex: number */): boolean => {
-  // const key = `R${rowIndex + 1}_C${colIndex + 1}`;
-  // console.log(key);
-  // return !!matrixAnswer.value[key];
-};
-
-const handleRowNameChange = (/* value: string */) => {
-  // console.log(`row change: ${value}`);
-  // 你可以在这里添加其他逻辑
-};
-
-const handleColValueChange = (rowOption: string, colOption: string) => {
-  // const target = e.target as HTMLInputElement;
-  // 寻找行列的索引
-  const col = columns.value.findIndex((option) => option.option === colOption);
-  const row = rows.value.findIndex((option) => option.option === rowOption);
-
-  // 此处的矩阵是由一维数组组成，两者是通过 索引和 索引对应的数值来表示
-  // rowRecord 是负责记录的数组
-  // 记录之后清空结果对象，遍历数组获取相应的结果内容给 matrixAnswer
-  rowRecord.value[row] = col;
-  matrixAnswer.value = {};
+watch(rowRecord, () => {
+  console.log(`record has changed`, rowRecord.value);
+  // 生成 answer
+  const newAnswer: answerType = {};
  rowRecord.value.forEach((row, col) => {
-    matrixAnswer.value[`${col + 1}_${row + 1}`] = 1;
+    newAnswer[`${col + 1}_${row + 1}`] = 1;
  });
-  // emits('update:matrixAnswer', matrixAnswer.value);
-  // emits('update:rowRecord', rowRecord.value);
-};
+  answer.value = newAnswer;
+  emit('changeAnswer', newAnswer);
+}, { deep: true });
+
 </script>

 <style scoped lang="scss">
--- a/src/views/Survey/views/Preview/components/questions/PreviewMatrixText.vue
+++ b/src/views/Survey/views/Preview/components/questions/PreviewMatrixText.vue
@@ -1,109 +1,97 @@
 <template>
-  <table class="matrix-table">
-    <thead>
-      <tr>
-        <th></th>
-        <td v-for="col in columns" :key="col.option">
-          <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
-          <input
-            v-if="col.editor"
-            v-model="col.option"
-            v-focus
-            type="text"
-            @focusout="col.editor = false"
-            @click="handleRowNameChange(col.option!)"
-          />
-          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option"></span>
-        </td>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
-        <th v-html="row.option"></th>
-        <td v-for="(col, colIndex) in columns" :key="colIndex">
-          <input type="text" @change="handleColValueChange(rowIndex, colIndex, $event)" />
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <MatrixText
+    v-model:rowRecord="rowRecord" v-model:matrix-radio-answer="answer!" :rows="rows" :cols="cols"
+    :is-preview="true"
+  />
 </template>

 <script setup lang="ts">
-import { vFocus } from '@/utils/directives/useVFocus';
-
-const rows = defineModel<OptionType[]>('rows', { required: false, default: [] });
-const columns = defineModel<OptionType[]>('columns', { required: false, default: [] });
+import MatrixText from '@/views/Design/components/Questions/MatrixText.vue';
+import { computed, ref, watch } from 'vue';
 // const questionType = defineModel<number>('questionType', { required: false });
-const matrixAnswer = defineModel<{ [key: string]: any }>('matrixAnswer', { required: false });
-const rowRecord = defineModel<number[]>('rowRecord', { required: false });
+
+// 矩阵多选的答案类型
+type answerType = {
+  [key: string]: string;
+};

 // preview props
 // const stem = defineModel('stem');
-const list = defineModel<questionsList[]>('list', { required: false });
+// const list = defineModel<questionsList[]>('list', { required: false });
 // const config = defineModel<OptionConfigType>('config', { required: false });
-// const question = defineModel('question');
-// const answer = defineModel('answer');
+const question = defineModel<question>('question');
+const emit = defineEmits(['changeAnswer', 'previous', 'next']);
+// 示例
+// {
+//   "1_1": 1,
+//   "1_2": 1,
+//   "2_1": 1,
+//   "2_2": 1
+// }
+const answer = defineModel<answerType>('answer', {
+  // 临时赋值, 用于测试
+  // default: () => ({
+  //   "1_1": 1,
+  //   "1_2": 1,
+  //   "2_1": 1,
+  //   "2_2": 1
+  // })
+});
 // const answerIndex = defineModel('answerIndex');
 // const answerSn = defineModel('answerSn');
 // const answerSurveySn = defineModel('answerSurveySn');

-initData();
-// 数据初始化
-function initData() {
-  if (!list.value) return;
-  // console.log(list.value);
-  rows.value = list.value[0].options;
-  columns.value = list.value[1].options;
+// 记录行和列的索引
+// 记录的格式如下，
+// [
+//   ['', ''],
+//   ['', '']
+// ]
+const rowRecord = ref<string[][]>([]);

-  rowRecord.value = new Array(rows.value.length);
-}
+// 假如 answer 有数值，需要解析 answer ，然后传递 record 给子组件
+answer.value && parseAnswer(answer.value);

-// console.log(`stem:`, stem.value);
-// console.log(`list:`, list.value);
-// console.log(`config:`, config.value);
-// console.log(`question:`, question.value);
-// console.log(`answer:`, answer.value);
-// console.log(`answerIndex:`, answerIndex.value);
-// console.log(`answerSn:`, answerSn.value);
-// console.log(`answerSurveySn:`, answerSurveySn.value);
-//
-// rows.value && console.log(`matrix rows:`, rows.value);
-// columns.value && console.log(`matrix columns:`, columns.value);
-// columns.value && console.log(`matrix questionType:`, questionType.value);
-// columns.value && console.log(`matrix matrixAnswer:`, matrixAnswer.value);
-// columns.value && console.log(`matrix rowRecord:`, rowRecord.value);
-
-/* const emits = */
-defineEmits(['update:matrixAnswer', 'update:rowRecord']);
-
-// const isOptionChecked = (/*rowIndex: number, colIndex: number*/): boolean => {
-// const key = `R${rowIndex + 1}_C${colIndex + 1}`;
-// console.log(key);
-// return !!matrixAnswer.value[key];
-// };
-
-const handleRowNameChange = (/* value: string */) => {
-  // console.log(`row change: ${value}`);
-  // 你可以在这里添加其他逻辑
-};
-
-const handleColValueChange = (row: number, col: number) => {
-  // const target = e.target as HTMLInputElement;
-  // 寻找行列的索引
-  // const col = columns.value.findIndex((option) => option.option === colOption);
-  // const row = rows.value.findIndex((option) => option.option === rowOption);
-  // console.log(row, col);
-  // 此处的矩阵是由一维数组组成，两者是通过 索引和 索引对应的数值来表示
-  // rowRecord 是负责记录的数组
-  // 记录之后清空结果对象，遍历数组获取相应的结果内容给 matrixAnswer
-  rowRecord.value[row] = col;
-  matrixAnswer.value = {};
-  rowRecord.value.forEach((row, col) => {
-    matrixAnswer.value[`${col + 1}_${row + 1}`] = 1;
+console.log(`answer value`, answer.value);
+/**
+ * 解析 answer
+ */
+function parseAnswer(answer: answerType) {
+  const rowRecordList: string[][] = [];
+  Object.entries(answer).forEach(([key, value]) => {
+    const [row, col] = key.split('_');
+    // 如果对应位置不存在数组， 重新建立
+    if (!rowRecordList[Number(row) - 1]) rowRecordList[Number(row) - 1] = [];
+    console.log(`value ${value}`);
+    rowRecordList[Number(row) - 1][Number(col) - 1] = value;
  });
-  // emits('update:matrixAnswer', matrixAnswer.value);
-  // emits('update:rowRecord', rowRecord.value);
-};
+  rowRecord.value = rowRecordList;
+
+  return rowRecordList;
+}
+// 查看parseAnswer的返回值
+// console.log(`parseAnswer value:`, parseAnswer(answer.value!))
+
+/**
+ * 获取行和列的内容
+ * 行的内容在 question.list[0].options
+ * 列的内容在 question.list[1].options
+ */
+const rows = computed(() => question.value?.list[0]?.options ?? []);
+const cols = computed(() => question.value?.list[1]?.options ?? []);
+
+watch(rowRecord, () => {
+  // 重新生成 answer
+  const newAnswer: answerType = {};
+  rowRecord.value.forEach((rows, rowIndex) => {
+    rows.forEach((col, colIndex) => {
+      newAnswer[`${rowIndex + 1}_${colIndex + 1}`] = col;
+    });
+  });
+  answer.value = newAnswer;
+  emit('changeAnswer', newAnswer);
+}, { deep: true });
+
 </script>

 <style scoped lang="scss">
--- a/src/views/Survey/views/Preview/components/questions/PreviewNPS.vue
+++ b/src/views/Survey/views/Preview/components/questions/PreviewNPS.vue
@@ -1,72 +1,43 @@
 <template>
-  <div class="content">
-    <van-field
-      v-model="stem"
-      :label="stem"
-      :required="question.config.is_required === 1"
-      label-align="top"
-    >
-      <template #left-icon>
-        {{ index + 1 }}
-      </template>
-      <template #label>
-        <contenteditable v-model="stem" :active="active" @blur="saveStem"></contenteditable>
-      </template>
-      <template #input>
-        <div v-for="(optionItem, optionItemIndex) in list" :key="optionItemIndex">
-          <div
-            v-for="(item, optionIndex) in optionItem.options"
-            :key="optionIndex"
-            @click="chooseOption(item)"
-          >
-            <RateCharacter v-model="answerValue" :config="config"></RateCharacter>
-            <div class="tips">
-              <p>{{ config.prompt_left }}</p>
-              <p>{{ config.prompt_center }}</p>
-              <p>{{ config.prompt_right }}</p>
-            </div>
-          </div>
-        </div>
-      </template>
-    </van-field>
-  </div>
+  <n-p-s v-model:element="question" v-model:rates="rates" :active="false" :isPreview="true" />
 </template>

 <script setup lang="ts">
-import { ref } from 'vue';
-import RateCharacter from '@/views/Design/components/Questions/RateCharacter.vue';
+import NPS from '@/views/Design/components/Questions/NPS.vue';
+import { ref, watch } from 'vue';

-const answerValue = ref(false);
-// const isPreview = defineModel('isPreview', { required: false });
-const stem = defineModel('stem', { required: false });
-const element = defineModel('element', { required: false });
-const question = defineModel('question', { required: false });
-const list = defineModel('list', { required: false });
-const config = defineModel('config', { required: false });
-const index = defineModel('index', { required: false });
-const active = defineModel('active', { required: false });
-// const sn = defineModel('sn', { required: false });
-// const questionType = defineModel('questionType', { required: false });
+const question = defineModel<question>('question', { default: { config: { is_required: false } } });
+const answer = defineModel<{ [key: string]: number }>('answer', { default: undefined });

-const chooseId = ref('');
-const emit = defineEmits(['update:element']);
-const saveStem = () => {
-  emit('update:element', element.value);
-};
+// rates 数值取决与 answer ， 没有数据重新建立一个对应长度的数组
+const rates = ref(answer.value ? getRates() : new Array(question.value.list[0].options!.length));
+// // 预览新增 emit ['changeAnswer', 'previous', 'next']
+const emit = defineEmits(['changeAnswer', 'previous', 'next', 'update:element']);

-const chooseOption = (item) => {
-  chooseId.value = item.id;
-};
+// 获取 rates
+function getRates() {
+  const keys = Object.keys(answer.value);
+  return keys.map((item) => {
+    return answer.value[item];
+  });
+}
+
+console.log(answer.value && getRates());
+watch(
+  rates,
+  () => {
+    const res = {};
+    rates.value.map((item, index) => {
+      // index 是 key, item 是 value
+      res[index + 1] = item;
+    });
+    answer.value = res;
+    emit('changeAnswer', res);
+  },
+  {
+    deep: true
+  }
+);
 </script>

-<style scoped lang="scss">
-.content {
-  background-color: #fff;
-}
-
-.tips {
-  display: flex;
-  justify-content: space-between;
-  color: #bfbfbf;
-}
-</style>
+<style scoped></style>
--- a/src/views/Survey/views/Preview/components/questions/PreviewRate.vue
+++ b/src/views/Survey/views/Preview/components/questions/PreviewRate.vue
@@ -1,28 +1,18 @@
 <template>
  <div class="content">
    <van-field
-      v-model="element.stem"
-      :label="element.stem"
-      :required="element.config.is_required === 1"
+      v-model="element.stem" :label="element.stem" :required="element.config.is_required === 1"
      label-align="top"
    >
      <template #left-icon>
        {{ index + 1 }}
      </template>
      <template #label>
-        <contenteditable
-          v-model="element.stem"
-          :active="active"
-          @blur="emitValue"
-        ></contenteditable>
+        <contenteditable v-model="element.stem" :active="active" @blur="emitValue"></contenteditable>
      </template>
      <template #input>
        <div v-for="(optionItem, optionItemIndex) in element.options" :key="optionItemIndex">
-          <div
-            v-for="(item, optionIndex) in optionItem"
-            :key="optionIndex"
-            @click="chooseOption(item)"
-          >
+          <div v-for="(item, optionIndex) in optionItem" :key="optionIndex" @click="chooseOption(item)">
            <contenteditable v-model="item.option" :active="active"></contenteditable>
            <RateCharacter :config="element.config"></RateCharacter>
            <div class="tips">
@@ -39,7 +29,7 @@

 <script setup>
 import { ref, toRefs, watch } from 'vue';
-import RateCharacter from './RateCharacter.vue';
+// import RateCharacter from './RateCharacter.vue';

 const props = defineProps({
  element: {
--- a/src/views/Survey/views/Preview/components/questions/QLast.vue
+++ b/src/views/Survey/views/Preview/components/questions/QLast.vue
@@ -102,37 +102,37 @@ export default defineComponent({
    const isEndUrl = computed(() => {
      const code = props.action ? props.action.code : props.code;
      return (
-        (code === 20004 &&
-          props.survey.screening_end_url_select &&
-          props.survey.screening_end_url) ||
-        (code === 20011 && props.survey.success_end_url_select && props.survey.success_end_url) ||
-        (code === 20016 && props.survey.quota_end_url_select && props.survey.quota_end_url)
+        (code === 20004
+          && props.survey.screening_end_url_select
+          && props.survey.screening_end_url)
+        || (code === 20011 && props.survey.success_end_url_select && props.survey.success_end_url)
+        || (code === 20016 && props.survey.quota_end_url_select && props.survey.quota_end_url)
      );
    });

    // 跳转
    function toEndUrl() {
      switch (props.action.code) {
-        case 20004: // 被甄别
-          if (props.survey.screening_end_url_select && props.survey.screening_end_url) {
-            const url = props.survey.screening_end_url;
-            toUrl(url);
-          }
-          break;
-        case 20011: // 成功
-          if (props.survey.success_end_url_select && props.survey.success_end_url) {
-            const url = props.survey.success_end_url;
-            toUrl(url);
-          }
-          break;
-        case 20016: // 配额超限
-          if (props.survey.quota_end_url_select && props.survey.quota_end_url) {
-            const url = props.survey.quota_end_url;
-            toUrl(url);
-          }
-          break;
-        default:
-          break;
+      case 20004: // 被甄别
+        if (props.survey.screening_end_url_select && props.survey.screening_end_url) {
+          const url = props.survey.screening_end_url;
+          toUrl(url);
+        }
+        break;
+      case 20011: // 成功
+        if (props.survey.success_end_url_select && props.survey.success_end_url) {
+          const url = props.survey.success_end_url;
+          toUrl(url);
+        }
+        break;
+      case 20016: // 配额超限
+        if (props.survey.quota_end_url_select && props.survey.quota_end_url) {
+          const url = props.survey.quota_end_url;
+          toUrl(url);
+        }
+        break;
+      default:
+        break;
      }
    }

--- a/src/views/Survey/views/Preview/components/questions/QRadio.vue
+++ b/src/views/Survey/views/Preview/components/questions/QRadio.vue
@@ -264,16 +264,16 @@ export default defineComponent({
        });

        if (
-          !compareArrayByField(options.value, newOptions, 'option_key') ||
-          !compareArrayByField(options.value, newOptions, 'option')
+          !compareArrayByField(options.value, newOptions, 'option_key')
+          || !compareArrayByField(options.value, newOptions, 'option')
        ) {
          options.value = newOptions;
        }

        // 清空值和答案
        if (
-          value.value &&
-          options.value.findIndex((option) => option.option_key === value.value) === -1
+          value.value
+          && options.value.findIndex((option) => option.option_key === value.value) === -1
        ) {
          // 清空值
          value.value = '';
@@ -291,8 +291,8 @@ export default defineComponent({
      () => options.value,
      (val, oldVal) => {
        if (
-          compareArrayByField(val, oldVal || [], 'option_key') &&
-          compareArrayByField(val, oldVal || [], 'option')
+          compareArrayByField(val, oldVal || [], 'option_key')
+          && compareArrayByField(val, oldVal || [], 'option')
        ) {
          return;
        }
--- a/src/views/Survey/views/Preview/components/questions/Question.vue
+++ b/src/views/Survey/views/Preview/components/questions/Question.vue
@@ -132,8 +132,8 @@ export default defineComponent({
        const value = matchValue.replace('[%cite(', '').replace(')%]', '');
        let replacement = ''; // 替换文本
        // 查找引用问题
-        const question =
-          props.questions.find((question) => {
+        const question
+          = props.questions.find((question) => {
            // 矩阵题
            if (question.question_type >= 8 && question.question_type <= 11) {
              return question.title === value.split('_R')[0].split('_C')[0];
@@ -143,8 +143,8 @@ export default defineComponent({
              return question.title === value.split('_A')[0];
            }
            return question.title === value;
-          }) ||
-          props.questions.find((question) => {
+          })
+          || props.questions.find((question) => {
            // 矩阵题
            if (question.question_type >= 8 && question.question_type <= 11) {
              return question.title === (value + cycleIndexStr).split('_R')[0].split('_C')[0];
@@ -171,8 +171,8 @@ export default defineComponent({
                replacement = answer[option.option_key];
              }
            } else if (
-              question.question_type === 2 &&
-              Object.keys(answer).length >= question.config.min_select
+              question.question_type === 2
+              && Object.keys(answer).length >= question.config.min_select
            ) {
              // 查找引用选项(多选)
              options.forEach((option) => {
--- a/src/views/Survey/views/Preview/js/language.js
+++ b/src/views/Survey/views/Preview/js/language.js
@@ -350,7 +350,7 @@ export const language = {
    zh: '请点击查看图片'
  },
  NoteCantViewAfterTimeLimit: {
-    en: "Note: Can't view after time limit",
+    en: 'Note: Can\'t view after time limit',
    zh: '注意：超过显示时间限制后将无法再次查看'
  },
  DisplayTimeLimitExceeded: {
--- a/src/views/Survey/views/Preview/js/logical.js
+++ b/src/views/Survey/views/Preview/js/logical.js
@@ -250,10 +250,10 @@ function quesHandle(answer, logChild) {
  const matrixRateHandle = () => {
    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
    if (
-      logChild.cell_index === 0 ||
-      logChild.row_index === 0 ||
-      !logChild.operator ||
-      !logChild.value
+      logChild.cell_index === 0
+      || logChild.row_index === 0
+      || !logChild.operator
+      || !logChild.value
    ) {
      return true;
    }
@@ -265,10 +265,10 @@ function quesHandle(answer, logChild) {
  const matrixInputHandle = () => {
    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
    if (
-      logChild.cell_index === 0 ||
-      logChild.row_index === 0 ||
-      !logChild.operator ||
-      !logChild.value
+      logChild.cell_index === 0
+      || logChild.row_index === 0
+      || !logChild.operator
+      || !logChild.value
    ) {
      return true;
    }
@@ -428,59 +428,59 @@ function getConditionStatus(logChild) {
    if (answer) {
      try {
        switch (logChild.question_type) {
-          case 1:
-            quesStatus = quesHandles.choiceHandle(config);
-            break;
-          case 2:
-            quesStatus = quesHandles.choiceCheckBoxHandle(config);
-            break;
-          case 3:
-            quesStatus = quesHandles.cascaderHandle();
-            break;
-          case 4:
-            quesStatus = quesHandles.inputHandle();
-            break;
-          case 5:
-            quesStatus = quesHandles.rateHandle();
-            break;
-          case 7:
-            quesStatus = quesHandles.dateTimeHandle();
-            break;
-          case 8:
-            quesStatus = quesHandles.matrixInputHandle();
-            break;
-          case 9:
-            quesStatus = quesHandles.matrixRadioHandle(config);
-            break;
-          case 10:
-            quesStatus = quesHandles.matrixCheckboxHandle(config);
-            break;
-          case 11:
-            quesStatus = quesHandles.matrixRateHandle();
-            break;
-          case 13:
-            quesStatus = quesHandles.imgRadioHandle();
-            break;
-          case 14:
-            quesStatus = quesHandles.imgCheckBoxHandle();
-            break;
-          case 15:
-            quesStatus = quesHandles.classifyHandle();
-            break;
-          case 16:
-            quesStatus = quesHandles.sortHandle();
-            break;
-          case 17:
-            quesStatus = quesHandles.constantSumHandle();
-            break;
-          case 23:
-            quesStatus = quesHandles.agreementHandle();
-            break;
-          case 101:
-            quesStatus = quesHandles.psmHandle(config);
-            break;
-          default:
-            break;
+        case 1:
+          quesStatus = quesHandles.choiceHandle(config);
+          break;
+        case 2:
+          quesStatus = quesHandles.choiceCheckBoxHandle(config);
+          break;
+        case 3:
+          quesStatus = quesHandles.cascaderHandle();
+          break;
+        case 4:
+          quesStatus = quesHandles.inputHandle();
+          break;
+        case 5:
+          quesStatus = quesHandles.rateHandle();
+          break;
+        case 7:
+          quesStatus = quesHandles.dateTimeHandle();
+          break;
+        case 8:
+          quesStatus = quesHandles.matrixInputHandle();
+          break;
+        case 9:
+          quesStatus = quesHandles.matrixRadioHandle(config);
+          break;
+        case 10:
+          quesStatus = quesHandles.matrixCheckboxHandle(config);
+          break;
+        case 11:
+          quesStatus = quesHandles.matrixRateHandle();
+          break;
+        case 13:
+          quesStatus = quesHandles.imgRadioHandle();
+          break;
+        case 14:
+          quesStatus = quesHandles.imgCheckBoxHandle();
+          break;
+        case 15:
+          quesStatus = quesHandles.classifyHandle();
+          break;
+        case 16:
+          quesStatus = quesHandles.sortHandle();
+          break;
+        case 17:
+          quesStatus = quesHandles.constantSumHandle();
+          break;
+        case 23:
+          quesStatus = quesHandles.agreementHandle();
+          break;
+        case 101:
+          quesStatus = quesHandles.psmHandle(config);
+          break;
+        default:
+          break;
        }
      } catch (error) {
        // console.log(error);
@@ -519,10 +519,10 @@ function getlogicStatus(questionData) {
        // } else {
        //   statusStr = statusStr + conditionStatus;
        // }
-        statusStr =
-          statusStr +
-          (logChild.logic === 'and' ? '&&' : logChild.logic === 'or' ? '||' : '') +
-          conditionStatus;
+        statusStr
+          = statusStr
+          + (logChild.logic === 'and' ? '&&' : logChild.logic === 'or' ? '||' : '')
+          + conditionStatus;
      });
      // eslint-disable-next-line no-eval
      logs.logicStatus = eval(statusStr);
--- a/src/views/Survey/views/Preview/js/mock.js
+++ b/src/views/Survey/views/Preview/js/mock.js
@@ -105,8 +105,8 @@ export default function answerMock(questionsData, page) {
    } else if (logic.skip_type === 4) {
      // 只计算跳转后所在页面的隐藏逻辑，否则会出现只返回最后一道隐藏选项题目的情况，导致失效
      const toPage = page + 1;
-      const hasHiddenLogicQuizPage =
-        data.pages.findIndex((page) => page.includes(logic.question_index)) + 1;
+      const hasHiddenLogicQuizPage
+        = data.pages.findIndex((page) => page.includes(logic.question_index)) + 1;
      if (hasHiddenLogicQuizPage === toPage) {
        // 选项隐藏逻辑
        updateOptionHidden(data.hide_options, logic);
--- a/src/views/Survey/views/Preview/js/questions.js
+++ b/src/views/Survey/views/Preview/js/questions.js
@@ -154,9 +154,9 @@ export default defineComponent({
              question.error = translatedText.value.ThisIsARequiredQuestion;
            }
          } else if (
-            answer &&
-            questionType === 1 &&
-            Object.keys(answer).findIndex((value) => !answer[value]) !== -1
+            answer
+            && questionType === 1
+            && Object.keys(answer).findIndex((value) => !answer[value]) !== -1
          ) {
            // 单选题
            isError = true;
@@ -302,9 +302,9 @@ export default defineComponent({
          } else if (answer && questionType === 12) {
            question.error = '';
          } else if (
-            answer &&
-            questionType === 14 &&
-            Object.keys(answer).length < config.min_select
+            answer
+            && questionType === 14
+            && Object.keys(answer).length < config.min_select
          ) {
            // 图片多选题
            isError = true;
@@ -340,46 +340,46 @@ export default defineComponent({
            const { value } = answer;
            const newValue = value.replace(/\n|\r|\r\n/g, '');
            switch (config.text_type) {
-              case 3: // 字母
-                isError =
-                  config.include_mark === 1
-                    ? !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
-                        newValue
-                      ) || !newValue.length
-                    : !/^[a-zA-Z]+$/.test(newValue) || !newValue.length;
-                question.error = isError ? translatedText.value.PleaseEnterEnglishLetters : '';
-                break;
-              case 4: // 中文
-                isError =
-                  config.include_mark === 1
-                    ? !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]])+$/.test(
-                        newValue
-                      ) || !newValue.length
-                    : !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/.test(
-                        newValue
-                      ) || !newValue.length;
-                question.error = isError ? translatedText.value.PleaseEnterChineseWords : '';
-                break;
-              case 5: // 邮箱
-                isError =
-                  !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-                    value
-                  );
-                question.error = isError ? translatedText.value.PleaseEnterACorrectEmail : '';
-                break;
-              case 6: // 手机号
-                isError = !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value);
-                question.error = isError ? translatedText.value.PleaseEnterACorrectPhone : '';
-                break;
-              case 7: // 身份证号
-                isError =
-                  !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
-                    value
-                  );
-                question.error = isError ? translatedText.value.PleaseEnterACorrectID : '';
-                break;
-              default:
-                break;
+            case 3: // 字母
+              isError
+                  = config.include_mark === 1
+                  ? !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
+                    newValue
+                  ) || !newValue.length
+                  : !/^[a-zA-Z]+$/.test(newValue) || !newValue.length;
+              question.error = isError ? translatedText.value.PleaseEnterEnglishLetters : '';
+              break;
+            case 4: // 中文
+              isError
+                  = config.include_mark === 1
+                  ? !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]])+$/.test(
+                    newValue
+                  ) || !newValue.length
+                  : !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/.test(
+                    newValue
+                  ) || !newValue.length;
+              question.error = isError ? translatedText.value.PleaseEnterChineseWords : '';
+              break;
+            case 5: // 邮箱
+              isError
+                  = !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                  value
+                );
+              question.error = isError ? translatedText.value.PleaseEnterACorrectEmail : '';
+              break;
+            case 6: // 手机号
+              isError = !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value);
+              question.error = isError ? translatedText.value.PleaseEnterACorrectPhone : '';
+              break;
+            case 7: // 身份证号
+              isError
+                  = !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
+                  value
+                );
+              question.error = isError ? translatedText.value.PleaseEnterACorrectID : '';
+              break;
+            default:
+              break;
            }
            if (!isError && value.length < config.min && ![1, 2].includes(config.text_type)) {
              isError = true;
@@ -391,54 +391,54 @@ export default defineComponent({
            Object.keys(answer).forEach((key) => {
              const value = answer[key];
              switch (config.text_type) {
-                case 3: // 字母
-                  if (
-                    !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
-                      value
-                    )
-                  ) {
-                    question.error = translatedText.value.PleaseEnterEnglishLetters;
-                  }
-                  break;
-                case 4: // 中文
-                  if (
-                    !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]])+$/.test(
-                      value
-                    )
-                  ) {
-                    question.error = translatedText.value.PleaseEnterChineseWords;
-                  }
-                  break;
-                case 5: // 邮箱
-                  if (
-                    !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-                      value
-                    )
-                  ) {
-                    question.error = translatedText.value.PleaseEnterACorrectEmail;
-                  }
-                  break;
-                case 6: // 手机号
-                  if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
-                    question.error = translatedText.value.PleaseEnterACorrectPhone;
-                  }
-                  break;
-                case 7: // 身份证号
-                  if (
-                    !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
-                      value
-                    )
-                  ) {
-                    question.error = translatedText.value.PleaseEnterACorrectID;
-                  }
-                  break;
-                default:
-                  break;
+              case 3: // 字母
+                if (
+                  !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
+                    value
+                  )
+                ) {
+                  question.error = translatedText.value.PleaseEnterEnglishLetters;
+                }
+                break;
+              case 4: // 中文
+                if (
+                  !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]])+$/.test(
+                    value
+                  )
+                ) {
+                  question.error = translatedText.value.PleaseEnterChineseWords;
+                }
+                break;
+              case 5: // 邮箱
+                if (
+                  !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                    value
+                  )
+                ) {
+                  question.error = translatedText.value.PleaseEnterACorrectEmail;
+                }
+                break;
+              case 6: // 手机号
+                if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
+                  question.error = translatedText.value.PleaseEnterACorrectPhone;
+                }
+                break;
+              case 7: // 身份证号
+                if (
+                  !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
+                    value
+                  )
+                ) {
+                  question.error = translatedText.value.PleaseEnterACorrectID;
+                }
+                break;
+              default:
+                break;
              }
              if (
-                !question.error &&
-                value.length < config.min &&
-                ![1, 2].includes(config.text_type)
+                !question.error
+                && value.length < config.min
+                && ![1, 2].includes(config.text_type)
              ) {
                question.error = translatedText.value.PleaseEnterMoreThanOneCharacters(config.min);
              }
@@ -814,8 +814,8 @@ export default defineComponent({
          const evt1 = {};

          if ([1].includes(question.question_type)) {
-            evt1.value =
-              Object.keys(question.answer)
+            evt1.value
+              = Object.keys(question.answer)
                .map((key) => (question.answer[key] ? key : undefined))
                .filter((i) => !!i)?.[0] || undefined;
            evt1.options = question.list.flatMap((i) => i.options);
--- a/src/views/Survey/views/Success/Index.vue
+++ b/src/views/Survey/views/Success/Index.vue
@@ -6,8 +6,8 @@
 </template>

 <script setup>
-const successImg =
-  'https://files.axshare.com/gsc/DR6075/c7/5a/53/c75a534148d349f1bb8e185629f784ac/images/%E9%A2%84%E8%A7%88/u123.png?pageId=18fb9d8a-b9b7-465f-9bd7-625b1b78f72e';
+const successImg
+  = 'https://files.axshare.com/gsc/DR6075/c7/5a/53/c75a534148d349f1bb8e185629f784ac/images/%E9%A2%84%E8%A7%88/u123.png?pageId=18fb9d8a-b9b7-465f-9bd7-625b1b78f72e';
 </script>

 <style lang="scss" scoped>