refactor(css): 优化公共样式和布局

- 新增 .br12 类，用于设置 12 像素的圆角
- 调整 .container 样式，移除多余的注释
- 优化内容编辑区域的样式，使其更加美观
- 统一操作选项弹窗的样式和结构
- 调整矩阵问题和文本带图问题的样式
- 优化选择问题和可拖拽组件的样式- 更新设计页面和创建问卷页面的样式
- 移除未使用的 ElCol 和 ElRow 组件引用
- 新增 VanGrid 和 VanGridItem 组件引用

components.d.ts

@@ -9,13 +9,11 @@ declare module 'vue' {
   export interface GlobalComponents {
     Contenteditable: typeof import('./src/components/contenteditable.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCol: typeof import('element-plus/es')['ElCol']
     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']
-    ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElText: typeof import('element-plus/es')['ElText']
@@ -31,6 +29,8 @@ 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,9 +38,12 @@ 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']

src/assets/css/main.scss

@@ -24,6 +24,10 @@ a,
   margin-left: 10px;
 }
 
+.br12 {
+  border-radius: 12px;
+}
+
 .container {
   // 容器的高度 ， 减少底部之后的高度
   //height: calc(100vh - 100px);

src/assets/css/public.scss

@@ -79,7 +79,7 @@
 }
 
 .contenteditable-question-title {
-  & .van-cell__title {
+  & > .van-cell__title {
     position: relative;
 
     &::after {
@@ -104,3 +104,24 @@
     }
   }
 }
+
+.van-action-sheet-title {
+  padding: 18px 21px 6px;
+  font-weight: 600;
+  font-size: 19px;
+}
+
+.van-dialog__confirm {
+  color: $theme-color;
+}
+
+.round-group {
+  overflow: hidden;
+  margin: 13px 10px;
+  background-color: #fff;
+}
+
+.van-checkbox__icon--checked .van-icon {
+  border-color: $theme-color;
+  background-color: $theme-color;
+}

src/utils/QuestionJsons/TextWithImages.js

@@ -7,7 +7,7 @@ export default {
   options: [],
   last_option_index: 0,
   config: {
-    is_required: 1,
+    is_required: 0,
     quick_type: 0,
     is_show: []
   },

src/views/Design/Index.vue

@@ -97,7 +97,7 @@
           />
           <!--组件底部左侧操作-->
           <template #action="{ element: el }">
-            <div class="flex slot-actions">
+            <div class="flex slot-actions" v-if="el.id === chooseQuestionId">
               <template v-for="(item, optionIndex) in actionOptions">
                 <div
                   v-if="item.question_type.includes(el.question_type)"
@@ -120,9 +120,6 @@
         </choose-question>
         <!--         增加控制按钮-->
         <slot name="button" :item="element"></slot>
-
-        <!--        {{ element.question_type }}-->
-        <!--        {{questionInfo.survey.pages.length}}-->
         <div v-if="!filterGap">
           <paging
             v-if="!element.question_type && questionInfo.survey.pages.length > 1"

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

@@ -30,11 +30,10 @@
   </div>
   <!--  操作项弹窗-->
   <van-action-sheet v-model:show="show">
-    <template #description>
+    <div class="van-action-sheet-title">操作选项</div>
-      <div class="flex flex-start">操作选项</div>
+
-    </template>
+    <van-cell-group :border="false" class="br12 round-group">
-    <van-cell-group :border="false" class="ml10">
+      <van-cell title="固定置底">
-      <van-cell title="固定置底" :border="false">
         <template #right-icon>
           <van-switch
             v-model="activeOption.is_fixed"
@@ -45,7 +44,7 @@
           ></van-switch>
         </template>
       </van-cell>
-      <van-cell title="设为其他项" :border="false">
+      <van-cell title="设为其他项">
         <template #right-icon>
           <van-switch
             v-model="activeOption.is_other"

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

@@ -7,10 +7,12 @@
 
   <!--  操作项弹窗-->
   <van-action-sheet v-model:show="show" title="">
-    <template #description>
+    <div class="van-action-sheet-title">操作选项</div>
-      <div class="flex flex-start">操作选项</div>
+    <van-cell-group
-    </template>
+      v-if="![6].includes(activeQuestion.question_type)"
-    <van-cell-group :border="false" class="ml10">
+      :border="false"
+      class="round-group br12"
+    >
       <van-cell
         v-if="![6].includes(activeQuestion.question_type)"
         title="此题必答"
@@ -44,8 +46,8 @@
           ></van-switch>
         </template>
       </van-cell>
-
+    </van-cell-group>
-      <van-divider></van-divider>
+    <van-cell-group class="round-group br12">
       <van-cell title="题前隐藏" :border="false" @click="questionSetting('before')">
         <template #right-icon>
           <span> {{ getSkipTypeText(1) }} <van-icon name="arrow"></van-icon></span>
@@ -56,7 +58,12 @@
           <span> {{ getSkipTypeText(0) }} <van-icon name="arrow"></van-icon></span>
         </template>
       </van-cell>
-      <van-divider></van-divider>
+    </van-cell-group>
+    <!--    设置css样式-->
+    <van-cell-group
+      v-if="[2, 5, 4, 8, 18, 9, 10].includes(activeQuestion.question_type)"
+      class="round-group br12"
+    >
       <!--      根据不同题型 展示不同的操作-->
       <!--      多选-->
       <checkbox-question-action

src/views/Design/components/ChooseQuestion.vue

@@ -12,6 +12,7 @@
         </template>
         <template #right-icon>
           <question-action
+            v-if="chooseQuestionId === element.id"
             v-model:data="element"
             :questionsInfo="questionsInfo"
             :questions="questions"
@@ -30,7 +31,6 @@
         <template #icon>
           <slot name="action" :element="element" :index="index"></slot>
         </template>
-        <template #title>{{}}</template>
       </van-cell>
     </div>
     <div v-else>
@@ -98,9 +98,8 @@ const chooseItem = () => {
 </script>
 <style scoped lang="scss">
 @import '@/assets/css/theme';
-
 .choose-question-container {
-  padding: 12px;
+  padding: 12px 12px 0 12px;
 
   & .choose-question-context {
     overflow: hidden;

src/views/Design/components/Draggable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="draggable">
+  <div ref="draggable" class="draggable">
     <div
       v-for="(element, index) in data"
       :key="element.id || element.pageId"

src/views/Design/components/Questions/Completion.vue

@@ -5,6 +5,7 @@
       :label="element.stem"
       :required="element.config.is_required === 1"
       label-align="top"
+      class="contenteditable-question-title"
     >
       <template #left-icon>
         {{ index + 1 }}
@@ -62,6 +63,7 @@ const emitValue = () => {
   .other_input {
     width: 100%;
     min-height: 40px;
+    margin-top: 12px;
     margin-bottom: 10px;
     padding: 12px;
     border: 1px solid #f4f4f4;

src/views/Design/components/Questions/MartrixQuestion.vue

@@ -40,7 +40,9 @@ const emitValue = () => {
 
 <template>
   <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>
@@ -60,7 +62,11 @@ const emitValue = () => {
             <th></th>
             <!-- 第二行内容开始填充 -->
             <td v-for="col in element.options[1]" :key="col.option" ref="columnLabels">
-              <contenteditable v-model="col.option" :active="active" @blur="emitValue"></contenteditable>
+              <contenteditable
+                v-model="col.option"
+                :active="active"
+                @blur="emitValue"
+              ></contenteditable>
             </td>
 
             <th></th>
@@ -70,7 +76,11 @@ const emitValue = () => {
           <tr v-for="row in element.options[0]" :key="row.option">
             <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
             <td>
-              <contenteditable v-model="row.option" :active="active" @blur="emitValue"></contenteditable>
+              <contenteditable
+                v-model="row.option"
+                :active="active"
+                @blur="emitValue"
+              ></contenteditable>
             </td>
             <td v-for="col in element.options[1]" :key="col.option" class="td-input">
               <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
@@ -78,7 +88,11 @@ const emitValue = () => {
             </td>
 
             <td v-if="element.config.is_limit_right_content === 1">
-              <contenteditable v-model="row.option_config.limit_right_content" :active="active" @blur="emitValue">
+              <contenteditable
+                v-model="row.option_config.limit_right_content"
+                :active="active"
+                @blur="emitValue"
+              >
               </contenteditable>
             </td>
           </tr>

src/views/Design/components/Questions/TextWithImages.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container text-with-images-container">
+  <div class="text-with-images-container">
     <van-field
       readonly
       :label="element.stem"

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

@@ -1,7 +1,12 @@
 <template>
   <div class="container">
     <van-nav-bar
-      class="navbar-header" :title="surveyTitle" left-text="" left-arrow :border="false" @click-left="$router.go(-1)"
+      :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" />
@@ -11,11 +16,17 @@
     <div class="question-title flex space-between">
       <div class="title-left">
         <!--问卷标题-->
-        <contenteditable v-model="questionInfo.survey.title" className="content-title" :active="true" @blur="saveTitle">
+        <contenteditable
-        </contenteditable>
+          v-model="questionInfo.survey.title"
+          className="content-title"
+          :active="true"
+          @blur="saveTitle"
+        ></contenteditable>
         <!--          问卷标注-->
         <contenteditable
-          v-model="questionInfo.survey.introduction" className="introduction" :active="true"
+          v-model="questionInfo.survey.introduction"
+          className="introduction"
+          :active="true"
           @blur="saveTitle"
         ></contenteditable>
       </div>
@@ -37,24 +48,24 @@
 
     <div class="ques">
       <!--      题目-->
-      <Design :activeId="activeId" class="design" @get-active-question="getActiveQuestion">
+      <Design
+        :activeId="activeId"
+        class="design"
+        @get-active-question="getActiveQuestion"
+        :filterGap="true"
+      >
         <template #button="{ item }">
-          <div class="design-button">
+          <div v-if="activeId === item.id" class="design-button">
-            <van-button v-if="activeId === item.id" size="small" @click="show = true">
+            <van-button size="small" @click="show = true"> + 添加题目 </van-button>
-              + 添加题目
-            </van-button>
           </div>
         </template>
 
         <template #empty>
-          <div class="empty">
+          <div v-if="questionInfo.questions.length === 0" class="empty">
             <div>
               <img :src="emptyImage" alt="" class="empty-image" />
             </div>
-            <van-button
+            <van-button class="theme-background" size="small" @click="show = true">
-              v-if="questionInfo.questions.length === 0" class="theme-background" size="small"
-              @click="show = true"
-            >
               + 添加题目
             </van-button>
           </div>
@@ -63,7 +74,11 @@
       <!--      <van-button @click="show = true">添加题目</van-button>-->
       <!--   弹出的新增题目弹窗-->
       <van-popup
-        v-model:show="show" round :closeable="true" position="bottom" :style="{ maxHeight: '50%' }"
+        v-model:show="show"
+        round
+        :closeable="true"
+        position="bottom"
+        :style="{ maxHeight: '50%' }"
         title="添加题目"
       >
         <van-row class="ques_title">
@@ -72,8 +87,12 @@
 
         <van-grid :gutter="10" class="ques_list">
           <van-grid-item
-            v-for="item in quesList" :key="item.type" :icon="item.icon" icon-color="#70b936"
+            v-for="item in quesList"
-            :text="item.name" @click="questionEvent(item)"
+            :key="item.type"
+            :icon="item.icon"
+            icon-color="#70b936"
+            :text="item.name"
+            @click="questionEvent(item)"
           >
             <template #icon>
               <span class="mobilefont grid-icon" v-html="item.icon"></span>
@@ -558,7 +577,7 @@ onMounted(async () => {
       ::v-deep .introduction {
         overflow: auto;
         width: 230px;
-        height: 50px;
+        height: 45px;
       }
     }
 
@@ -659,6 +678,7 @@ onMounted(async () => {
 
   .design-button {
     text-align: center;
+    margin-top: 10px;
 
     & > button {
       padding: 0.5rem;