style(css): 优化问卷设计和预览样式

- 添加自定义复选框和单选按钮样式
- 调整矩阵问题表格样式
- 优化 NPS 问题布局
- 统一预览组件属性命名
-调整部分颜色变量

src/assets/css/base.scss

@@ -1,6 +1,7 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
   --primary-color: #71b73c;
+  --van-primary-color: #71b73c;
   --vt-c-white: #fff;
   --vt-c-white-soft: #f8f8f8;
   --vt-c-white-mute: #f2f2f2;
@@ -28,6 +29,9 @@
   --van-loading-text-color: #fff;
   --van-loading-spinner-color: #fff;
   --van-action-sheet-cancel-text-color: #000;
+  --van-checkbox-checked-icon-color: var(--primary-color);
+  --van-coupon-checkbox-color: var(--primary-color);
+  --van-blue: var(--primary-color);
 }
 
 /* semantic color variables for this project */

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

@@ -1,6 +1,7 @@
 <template>
   <input
     type="checkbox"
+    class="mobilefont"
     :name="`R${rowIndex + 1}`"
     :checked="isOptionChecked(rowIndex, colIndex)"
     @change="handleMatrixCheckboxChange(rowIndex, colIndex)"
@@ -58,3 +59,35 @@ const emitValue = (/* val: unknown */) => {
   emit('update:element', element.value);
 };
 </script>
+<style scoped lang="scss">
+@import '@/assets/css/main';
+input[type='checkbox'] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #ccc;
+  border-radius: 1px;
+  outline: none;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  transition: border-color 0.4s ease;
+  &:checked {
+    border-color: $theme-color;
+    background: $theme-color;
+    &::after {
+      content: '\2713';
+      font-family: 'Arial', sans-serif; // 确保符号正常显示
+      color: #fff; // 勾选符号的颜色
+      font-size: 12px; // 勾选符号的大小
+      display: block;
+      position: absolute;
+      background: $theme-color;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+</style>

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

@@ -127,7 +127,7 @@ const errorMessage = defineModel('errorMessage', {
     </template>
 
     <template #input>
-      <el-table :data="rows" style="width: 90vw">
+      <el-table :data="rows" style="width: 90vw" border stripe>
         <el-table-column :width="tableWidth">
           <template #header></template>
           <template #default="{ row /*, column, $index*/ }">
@@ -173,6 +173,7 @@ const errorMessage = defineModel('errorMessage', {
             </div>
           </template>
           <template #default="{ /*row, column, */ $index: rowIndex }">
+            <div>
               <component
                 :is="activeComponent"
                 :element="element"
@@ -180,6 +181,7 @@ const errorMessage = defineModel('errorMessage', {
                 :colIndex="colIndex"
                 v-model:rowRecord="rowRecord"
               />
+            </div>
           </template>
         </el-table-column>
       </el-table>
@@ -219,7 +221,6 @@ input[type='text'] {
 .matrix-radio:checked {
   border-color: transparent; /* 选中时边框颜色 */
 }
-
 .matrix-radio:checked::before {
   content: '\e728';
   position: absolute;

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

@@ -45,3 +45,34 @@ const emitValue = () => {
   emit('update:element', element.value);
 };
 </script>
+
+<style scoped lang="scss">
+@import '@/assets/css/main';
+input[type='radio'] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1px solid #ccc;
+  border-radius: 50%;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  transition: border-color 0.4s ease;
+  &:checked {
+    border-color: $theme-color;
+    &::after {
+      content: '';
+      display: block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: $theme-color;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+</style>

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

@@ -1,6 +1,7 @@
 <template>
   <input
     type="text"
+    class="el-input"
     style="width: 100%"
     :name="`R${rowIndex + 1}`"
     :value="getInputValue(rowIndex, colIndex)"

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

@@ -23,11 +23,11 @@
           :key="optionItemIndex"
           class="rate-content"
         >
-          <div
-            v-for="(item, optionIndex) in isPreview ? optionItem.options : optionItem"
-            :key="optionIndex"
-            @click="chooseOption(item)"
-          >
+          <!--          <div-->
+          <!--            v-for="(item, optionIndex) in isPreview ? optionItem.options : optionItem"-->
+          <!--            :key="optionIndex"-->
+          <!--            @click="chooseOption(item)"-->
+          <!--          >-->
           <div class="tips mb5">
             <p>{{ element.config.prompt_left }}</p>
             <p>{{ element.config.prompt_center }}</p>
@@ -36,10 +36,10 @@
           <RateCharacter
             v-model:model="value"
             :config="element.config"
-              :index="optionIndex"
+            :index="optionItemIndex"
             @change="handleRateChange"
           />
-          </div>
+          <!--          </div>-->
         </div>
       </template>
     </van-field>
@@ -83,6 +83,8 @@ const element = defineModel('element', {
   }
 });
 
+console.log(element.value, 1);
+
 /**
  *
  * @param index {number} 索引

src/views/Survey/Index.vue

@@ -72,7 +72,7 @@
             <!--        <el-space direction="horizontal">-->
             <div>
               <el-button :disabled="item.source === 0" @click="deleteItem(item)"> 删除</el-button>
-              <el-button :disabled="item.source === 0" @click="copyItem(item)"> 复制</el-button>
+              <!--              <el-button :disabled="item.source === 0" @click="copyItem(item)"> 复制</el-button>-->
               <el-button style="border: 2px solid #71b73c" @click="toPreview(item)">
                 <el-text style="color: #71b73c">预览</el-text>
               </el-button>
@@ -96,6 +96,7 @@
                   :close-on-click-overlay="false"
                   :close-on-click-outside="false"
                 >
+                  <el-dropdown-item @click="copyItem(item)">复制</el-dropdown-item>
                   <el-dropdown-item @click="editItem(item)">编辑</el-dropdown-item>
                   <el-dropdown-item @click="saveTemplate(item)">存为模板</el-dropdown-item>
                 </el-dropdown-menu>

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

@@ -1528,7 +1528,7 @@ function clearAnswer(questions) {
     .question {
       overflow: hidden;
       //margin-top: 10px;
-      //margin-bottom: 10px;
+      margin-bottom: 10px;
       border: 1px solid #e5e5e5;
       border-radius: 16px;
       background: #fff;

src/views/Survey/views/Preview/components/questions/PreviewNPS.vue

@@ -1,17 +1,20 @@
 <template>
-  <n-p-s
+  <div>
+    <NPS
       v-model:element="question"
       v-model:value="value"
       :active="false"
-    :isPreview="true"
+      :is-preview="true"
       :index="answerIndex"
       :errorMessage="question.error"
     />
+  </div>
 </template>
 
 <script setup lang="ts">
 import NPS from '@/views/Design/components/Questions/NPS.vue';
 import { watch, ref } from 'vue';
+import Rate from '@/views/Design/components/Questions/Rate.vue';
 
 const value = ref(-1);
 // // 预览新增 emit ['changeAnswer', 'previous', 'next']

src/views/Survey/views/Preview/components/questions/PreviewRate.vue

@@ -3,7 +3,7 @@
     v-model:element="question"
     v-model:answer-value="value"
     :active="false"
-    :isPreview="true"
+    :is-preview="true"
     :index="answerIndex"
     :errorMessage="question.error"
   />

src/views/Survey/views/Preview/components/questions/PreviewTextWithImages.vue

@@ -12,7 +12,12 @@ answer.value = {};
 </script>
 
 <template>
-  <text-with-images :element="question" :index="answerIndex" :error-message="question.error" />
+  <text-with-images
+    :element="question"
+    :index="answerIndex"
+    :error-message="question.error"
+    :is-preview="true"
+  />
 </template>
 
 <style scoped lang="scss"></style>