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

- 在 index.vue 和 redirect.vue 中添加 layout-body 类，用于控制内容区域高度和滚动 - 调整 Publish 和 Survey 组件中的样式，以适应新的布局结构 - 优化部分组件的代码格式和逻辑
2025-03-19 14:45:43 +08:00
parent ae5b36d82e
commit 5387155e06
12 changed files with 187 additions and 172 deletions
--- a/src/layouts/index.vue
+++ b/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;
--- a/src/layouts/redirect.vue
+++ b/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;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -48,14 +48,12 @@ const router = createRouter({
            title: '模板'
          },
          component: () => import('../views/Market/Index.vue')
-        }
-      ]
        },
        {
-      path: '/design',
-      name: 'design',
-      meta: {},
-      component: Design
+          path: '/create',
+          name: 'create',
+          meta: { title: '问卷编辑' },
+          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;
--- a/src/views/Design/components/ActionCompoents/QuestionAction.vue
+++ b/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.question_index === activeQuestion.value.question_index
+      item.skip_type === skipType
+      && item.question_index === activeQuestion.value.question_index
    ) {
      ls.push(item);
    }
--- a/src/views/Home/Index.vue
+++ b/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;
--- a/src/views/Home/components/CreateSurvey/Index.vue
+++ b/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([]);
--- a/src/views/Home/components/Market/components/MarketItem.vue
+++ b/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;
 };

--- a/src/views/Survey/Index.vue
+++ b/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;
--- a/src/views/Survey/views/Create/Index.vue
+++ b/src/views/Survey/views/Create/Index.vue
@@ -1,18 +1,5 @@
 <template>
-  <div class="container">
-    <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="">
    <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);
--- a/src/views/Survey/views/Preview/Index.vue
+++ b/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
-        && questionType === 1
-        && Object.keys(answer).findIndex((value) => !answer[value]) !== -1
+        answer &&
+        questionType === 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
-              = config.include_mark === 1
+            isError =
+              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
-              = config.include_mark === 1
+            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]|[a-zA-Z·~！@#￥%…&*（）—\-+={}|《》？：“”【】、；‘’，。`!$^()_<>?:",./;'\\[\]])+$/.test(
                    newValue
                  ) || !newValue.length
@@ -872,8 +871,8 @@ async function answer(callback, callbackBeforePage) {
            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(
+            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 : '';
@@ -885,8 +884,8 @@ async function answer(callback, callbackBeforePage) {
            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(
+            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 : '';
@@ -1028,14 +1027,14 @@ async function answer(callback, callbackBeforePage) {
              currentQuestions.forEach((question, index) => {
                if (index >= warnStart && index < warnEnd) {
                  if (repeat.repeat_type) {
-                    question.warning
-                      = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
+                    question.warning =
+                      translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
                        repeat.allow_repeat_num,
                        repeat.repeat_type
                      );
                  } else {
-                    question.error
-                      = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
+                    question.error =
+                      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
-          = 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/Publish/Index.vue
+++ b/src/views/Survey/views/Publish/Index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
-    <layout />
+  <div class="">
+    <!--    <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);