feat: 重构样式文件并添加新功能

- 将 main.css 重命名为 main.scss，并移动到 css 目录
- 添加 mixin.scss、vant.scss 和 variables.scss 新样式文件
- 更新样式导入路径
- 新增多个 CSS混入和变量，提升样式可维护性
- 调整部分样式规则，优化页面布局和视觉效果

src/views/Design/components/ChooseQuestion.vue

@@ -7,26 +7,33 @@
     >
       <slot></slot>
       <!--      题目操作-->
-      <div v-if="chooseQuestionId === element.id" class="choose-question-active-container">
-        <div
-          v-for="item in questionAction"
-          :key="item.key"
-          class=""
-          :class="item.class ? item.class : ''"
-          @click="itemAction(item)"
-        >
-          <i class="icon iconfont choose-question-active-container-icon" v-html="item.icon"></i>
-          <div class="choose-question-active-container-name">
-            {{ item.name }}
-          </div>
-        </div>
-      </div>
+      <van-cell v-if="chooseQuestionId === element.id" class="choose-question-active-container">
+        <template v-if="element.question_type === 1" #icon>
+          <van-icon name="add"></van-icon>
+          <span class="ml10">添加选项</span>
+        </template>
+        <template #title>{{}}</template>
+        <template #right-icon> 123 </template>
+        <!--        <div-->
+        <!--          v-for="item in questionAction"-->
+        <!--          :key="item.key"-->
+        <!--          class=""-->
+        <!--          :class="item.class ? item.class : ''"-->
+        <!--          @click="itemAction(item)"-->
+        <!--        >-->
+        <!--          <i class="icon iconfont choose-question-active-container-icon" v-html="item.icon"></i>-->
+        <!--          <div class="choose-question-active-container-name">-->
+        <!--            {{ item.name }}-->
+        <!--          </div>-->
+        <!--        </div>-->
+      </van-cell>
     </div>
   </div>
 </template>
 <script setup>
 import { ref } from 'vue';
-
+// import { useRouter } from 'vue-router';
+// const router = useRouter();
 const props = defineProps({
   element: {
     type: Object,
@@ -47,38 +54,38 @@ const element = ref(props.element);
 // emit 事件
 
 // 选中题目后出现的操作
-const questionAction = ref([
-  {
-    icon: '&#xe630;',
-    name: '编辑',
-    key: 'edit',
-    class: ''
-  },
-  {
-    icon: '&#xe632;',
-    name: '复制',
-    key: 'copy',
-    class: ''
-  },
-  {
-    icon: '&#xe6a0;',
-    name: '移动',
-    key: 'moveUp',
-    class: 'moverQues'
-  },
-  // {
-  //   icon:'',
-  //   name:'下移',
-  //   key:'moveDown',
-  // class:''
-  // },
-  {
-    icon: '&#xe63f;',
-    name: '删除',
-    key: 'delete',
-    class: ''
-  }
-]);
+// const questionAction = ref([
+//   {
+//     icon: '&#xe630;',
+//     name: '编辑',
+//     key: 'edit',
+//     class: ''
+//   },
+//   {
+//     icon: '&#xe632;',
+//     name: '复制',
+//     key: 'copy',
+//     class: ''
+//   },
+//   {
+//     icon: '&#xe6a0;',
+//     name: '移动',
+//     key: 'moveUp',
+//     class: 'moverQues'
+//   },
+//   // {
+//   //   icon:'',
+//   //   name:'下移',
+//   //   key:'moveDown',
+//   // class:''
+//   // },
+//   {
+//     icon: '&#xe63f;',
+//     name: '删除',
+//     key: 'delete',
+//     class: ''
+//   }
+// ]);
 const emit = defineEmits(['getChooseQuestionId']);
 
 // 选中题目
@@ -87,20 +94,28 @@ const chooseItem = () => {
   emit('getChooseQuestionId', props.element);
 };
 
-const itemAction = (item) => {
-  switch (item.key) {
-    case 'edit':
-      break;
-    case 'copy':
-      break;
-    case 'moveUp':
-      break;
-    case 'moveDown':
-      break;
-    case 'delete':
-      break;
-  }
-};
+// const itemAction = (item) => {
+//   switch (item.key) {
+//     case 'edit':
+//       // vue router跳转到/edit
+//
+//       router.push({
+//         path: '/design/edit',
+//         query: {
+//           id: props.element.id
+//         }
+//       });
+//       break;
+//     case 'copy':
+//       break;
+//     case 'moveUp':
+//       break;
+//     case 'moveDown':
+//       break;
+//     case 'delete':
+//       break;
+//   }
+// };
 </script>
 <style scoped lang="scss">
 .choose-question-container {
@@ -115,11 +130,16 @@ const itemAction = (item) => {
     outline: 1px dashed #409eff;
   }
 
+  & .ml10 {
+    margin-left: 10px;
+  }
+
   & .choose-question-active-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 0 20px;
+
+    //margin: 0 20px;
     color: #666;
     font-size: 12px;