refactor(layout): 优化页面布局和滚动体验

- 在 index.vue 和 redirect.vue 中添加 layout-body 类，用于控制内容区域高度和滚动
- 调整 Publish 和 Survey 组件中的样式，以适应新的布局结构
- 优化部分组件的代码格式和逻辑

src/layouts/index.vue

@@ -16,8 +16,10 @@
       </van-nav-bar>
     </header>
     <!-- content -->
+    <div class="layout-body">
       <RouterView />
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -35,7 +37,12 @@ function goBack() {
 }
 </script>
 <style scoped lang="scss">
+@import '@/assets/css/main';
+
 .common-layout {
+  overflow: hidden;
+  height: 100vh;
+
   //background-size: contain; /* 或者使用具体的尺寸，如 100% 100% */
   //background-position: center; /* 确保图片居中显示 */
   //background-repeat: no-repeat;
@@ -50,6 +57,11 @@ function goBack() {
   background-image: url('@/assets/img/home/home-pen.png');
 }
 
+.layout-body {
+  overflow: scroll;
+  height: calc(100vh - var(--sticky-top-height) - 5px);
+}
+
 .header {
   position: sticky;
   top: 0;

src/layouts/redirect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="common-layout">
+  <div class="common-layout container">
     <!-- title 标题和搜索栏 -->
     <header class="header">
       <van-nav-bar
@@ -16,8 +16,10 @@
       </van-nav-bar>
     </header>
     <!-- content -->
+    <div class="redirect-body">
       <RouterView />
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -35,16 +37,28 @@ function goBack() {
 }
 </script>
 <style scoped lang="scss">
+@import '@/assets/css/main';
+
 .common-layout {
+  overflow: hidden;
+  height: 100vh;
   background-color: white;
   color: #333;
 }
 
+.redirect-body {
+  overflow: scroll;
+  height: calc(100vh - var(--sticky-top-height) - 1px);
+
+  //padding: 10px 0 0 0;
+  background: transparent;
+}
+
 .header {
   position: sticky;
   top: 0;
   z-index: 1000;
-  background-color: #a5d380;
+  background-color: transparent;
 
   .title {
     display: flex;

src/router/index.ts

@@ -48,14 +48,12 @@ const router = createRouter({
             title: '模板'
           },
           component: () => import('../views/Market/Index.vue')
-        }
-      ]
         },
         {
-      path: '/design',
+          path: '/create',
-      name: 'design',
+          name: 'create',
-      meta: {},
+          meta: { title: '问卷编辑' },
-      component: Design
+          component: () => import('../views/Survey/views/Create/Index.vue')
         },
         {
           path: '/preview',
@@ -65,12 +63,7 @@ const router = createRouter({
           },
           component: () => import('@/views/Survey/views/Preview/Index.vue')
         },
-    {
+
-      path: '/create',
-      name: 'create',
-      meta: { title: '问卷编辑' },
-      component: () => import('../views/Survey/views/Create/Index.vue')
-    },
         {
           path: '/publish',
           name: 'publish',
@@ -78,6 +71,14 @@ const router = createRouter({
           component: () => import('../views/Survey/views/Publish/Index.vue')
         }
       ]
+    },
+    {
+      path: '/design',
+      name: 'design',
+      meta: {},
+      component: Design
+    }
+  ]
 });
 
 export default router;

src/views/Design/components/ActionCompoents/QuestionAction.vue

@@ -307,8 +307,8 @@ const getSkipTypeText = (skipType) => {
   const ls = [];
   logics.map((item) => {
     if (
-      item.skip_type === skipType &&
+      item.skip_type === skipType
-      item.question_index === activeQuestion.value.question_index
+      && item.question_index === activeQuestion.value.question_index
     ) {
       ls.push(item);
     }

src/views/Home/Index.vue

@@ -95,6 +95,7 @@ function create() {
 
 .container-body {
   padding: 0 10px 80px;
+
   & > :first-child {
     & > div {
       display: flex;
@@ -104,6 +105,7 @@ function create() {
       margin: 10px;
     }
   }
+
   .new_survey {
     position: fixed;
     bottom: 0;

src/views/Home/components/CreateSurvey/Index.vue

@@ -5,10 +5,10 @@ import { snQuestions, saveQuestions } from '@/api/design/index.js';
 import { useRouter } from 'vue-router';
 import { useCounterStore } from '@/stores/counter';
 import { storeToRefs } from 'pinia';
+import homePen from '@/assets/img/home/home-pen.png';
 // 获取 Store 实例
 const counterStore = useCounterStore();
 const store = storeToRefs(counterStore);
-import homePen from '@/assets/img/home/home-pen.png';
 
 const router = useRouter();
 const surveys = ref([]);

src/views/Home/components/Market/components/MarketItem.vue

@@ -88,7 +88,7 @@ const deleteItem = (item) => {
     });
 };
 const setImg = (code) => {
-  let text = 'src/assets/img/home/' + code + '.png';
+  const text = `src/assets/img/home/${code}.png`;
   return text;
 };
 

src/views/Survey/Index.vue

@@ -272,7 +272,7 @@ onMounted(() => {
 
 .survey-search {
   position: sticky;
-  top: var(--sticky-top-height);
+  top: 0;
   z-index: 1000;
   width: 100%;
   padding: 0;

src/views/Survey/views/Create/Index.vue

@@ -1,18 +1,5 @@
 <template>
-  <div class="container">
+  <div class="">
-    <van-nav-bar
-      :border="false"
-      class="navbar-header"
-      :title="surveyTitle"
-      left-text=""
-      left-arrow
-      @click-left="$router.go(-1)"
-    >
-      <template #left>
-        <van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: #fff" />
-      </template>
-    </van-nav-bar>
-
     <div class="question-title flex space-between">
       <div class="title-left">
         <!--问卷标题-->
@@ -370,7 +357,6 @@ const currentDate = ref();
 const currentType = ref();
 const route = useRoute();
 const router = useRouter();
-const surveyTitle = route.meta.title as string;
 const show = ref(false);
 // const textModel = ref(false);
 const activeId = ref(0);

src/views/Survey/views/Preview/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <layout />
+  <!--  <layout />-->
   <div ref="scrollbar" class="preview-container">
     <!--    <van-nav-bar :title="getDomString(questionsData?.survey?.title)" left-arrow />-->
 
@@ -529,7 +529,6 @@ import PreviewMatrixText from '@/views/Survey/views/Preview/components/questions
 import PreviewNPS from '@/views/Survey/views/Preview/components/questions/PreviewNPS.vue';
 import msg from './js/message';
 import answerMock from '@/views/Survey/views/Preview/js/mock.js';
-import Layout from '@/layouts/redirect.vue';
 // const isPreview = ref(true);
 
 // hooks file
@@ -670,9 +669,9 @@ async function answer(callback, callbackBeforePage) {
           question.error = translatedText.value.ThisIsARequiredQuestion;
         }
       } else if (
-        answer
+        answer &&
-        && questionType === 1
+        questionType === 1 &&
-        && Object.keys(answer).findIndex((value) => !answer[value]) !== -1
+        Object.keys(answer).findIndex((value) => !answer[value]) !== -1
       ) {
         // 单选题
         isError = true;
@@ -852,16 +851,16 @@ async function answer(callback, callbackBeforePage) {
             // eslint-disable-next-line
             const reg =
               /^[a-zA-Z·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]]+$/;
-          isError
+            isError =
-              = config.include_mark === 1
+              config.include_mark === 1
                 ? !reg.test(newValue) || !newValue.length
                 : !/^[a-zA-Z]+$/.test(newValue) || !newValue.length;
             question.error = isError ? translatedText.value.PleaseEnterEnglishLetters : '';
             break;
           // 中文
           case 4:
-          isError
+            isError =
-              = config.include_mark === 1
+              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]|[a-zA-Z·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]])+$/.test(
                     newValue
                   ) || !newValue.length
@@ -872,8 +871,8 @@ async function answer(callback, callbackBeforePage) {
             break;
           // 邮箱
           case 5:
-          isError
+            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(
+              !/^(([^<>()[\]\\.,;:\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 : '';
@@ -885,8 +884,8 @@ async function answer(callback, callbackBeforePage) {
             break;
           // 身份证号
           case 7:
-          isError
+            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(
+              !/^[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 : '';
@@ -1028,14 +1027,14 @@ async function answer(callback, callbackBeforePage) {
               currentQuestions.forEach((question, index) => {
                 if (index >= warnStart && index < warnEnd) {
                   if (repeat.repeat_type) {
-                    question.warning
+                    question.warning =
-                      = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
+                      translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
                         repeat.allow_repeat_num,
                         repeat.repeat_type
                       );
                   } else {
-                    question.error
+                    question.error =
-                      = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
+                      translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
                         repeat.allow_repeat_num,
                         repeat.repeat_type
                       );
@@ -1382,8 +1381,8 @@ function updateAnswer(auto) {
       const evt1 = {};
 
       if ([1].includes(question.question_type)) {
-        evt1.value
+        evt1.value =
-          = Object.keys(question.answer)
+          Object.keys(question.answer)
             .map((key) => (question.answer[key] ? key : undefined))
             .filter((i) => !!i)?.[0] || undefined;
         evt1.options = question.list.flatMap((i) => i.options);

src/views/Survey/views/Publish/Index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
+  <div class="">
-    <layout />
+    <!--    <layout />-->
     <div class="content">
       <div v-if="status === 1" inset>
         <div>
@@ -42,7 +42,6 @@
 </template>
 
 <script setup lang="ts">
-import layout from '@/layouts/index.vue';
 import { useRoute } from 'vue-router';
 import { onMounted, reactive, ref, watch } from 'vue';
 import { showFailToast, showToast } from 'vant';
@@ -121,7 +120,11 @@ function copyLink() {
 function shareLink() {
   const params = {
     type: 'shareToWx',
-    title: surveyTitle.value || (publishInfo.value.download_url.title ? publishInfo.value.download_url.title.replace(/_发布二维码\.[a-zA-Z]+$/, '') : ''),
+    title:
+      surveyTitle.value ||
+      (publishInfo.value.download_url.title
+        ? publishInfo.value.download_url.title.replace(/_发布二维码\.[a-zA-Z]+$/, '')
+        : ''),
     description: publishInfo.value.desc || '填写问卷',
     thumbImageUrl: publishInfo.value.img_url,
     webpageUrl: publishInfo.value.url,
@@ -199,9 +202,6 @@ onMounted(async() => {
 
 <style scoped lang="scss">
 .container {
-  height: 100vh;
-  background: linear-gradient(to bottom, #70b937 5.3rem, #f2f2f2 8rem);
-
   button {
     padding: 3px 20px;
     border: none;
@@ -210,7 +210,8 @@ onMounted(async() => {
 
 .content {
   margin: 10px;
-  padding-bottom: 30px;
+
+  //padding-bottom: 30px;
   border-radius: 8px;
   background: #fff;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);