feat: 新增题目操作功能

- 添加 OptionAction 和 QuestionAction 组件
- 在 BaseSelect 组件中集成新功能
- 更新 ChooseQuestion 组件，添加单选题添加选项功能
-调整样式，增加空间间隔和对齐方式

components.d.ts

@@ -2,7 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {};
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -11,6 +11,7 @@ declare module 'vue' {
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElMain: typeof import('element-plus/es')['ElMain']
+    Index: typeof import('./src/components/VanCellModel/Index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Van: typeof import('vant/es')['default']

src/assets/css/main.scss

@@ -31,3 +31,7 @@ a,
 .flex-start {
   justify-content: flex-start;
 }
+
+.space-between {
+  justify-content: space-between;
+}

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

@@ -0,0 +1,16 @@
+<template>
+  <div class="flex option-action">
+    <van-icon name="close"></van-icon>
+    <van-icon name="more-o"></van-icon>
+  </div>
+</template>
+<script setup></script>
+<style scoped lang="scss">
+.option-action {
+  font-size: 20px;
+
+  & .van-icon + .van-icon {
+    margin-left: 5px;
+  }
+}
+</style>

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

@@ -0,0 +1,16 @@
+<template>
+  <div class="container question-action-container flex">
+    <van-icon name="delete"></van-icon>
+    <van-icon name="more"></van-icon>
+  </div>
+</template>
+<script setup></script>
+<style scoped lang="scss">
+.question-action-container {
+  font-size: 20px;
+
+  & .van-icon + .van-icon {
+    margin-left: 5px;
+  }
+}
+</style>

src/views/Design/components/ChooseQuestion.vue

@@ -9,11 +9,15 @@
       <!--      题目操作-->
       <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>
+          <div class="flex align-center" @click="radioAddOption">
-          <span class="ml10">添加选项</span>
+            <van-icon name="add" class="fs20"></van-icon>
+            <span class="ml10">添加选项</span>
+          </div>
         </template>
         <template #title>{{}}</template>
-        <template #right-icon> 123 </template>
+        <template #right-icon>
+          <question-action></question-action>
+        </template>
         <!--        <div-->
         <!--          v-for="item in questionAction"-->
         <!--          :key="item.key"-->
@@ -31,7 +35,9 @@
   </div>
 </template>
 <script setup>
+import QuestionAction from '@/views/Design/components/ActionCompoents/QuestionAction.vue';
 import { ref } from 'vue';
+import { v4 as uuidv4 } from 'uuid';
 // import { useRouter } from 'vue-router';
 // const router = useRouter();
 const props = defineProps({
@@ -51,6 +57,29 @@ const props = defineProps({
   }
 });
 const element = ref(props.element);
+
+//  单选事件  添加选项
+const radioAddOption = () => {
+  element.value.options.map((item) => {
+    item.push({
+      id: uuidv4(),
+      option: `选项${item.length + 1}`,
+      option_config: {
+        image_url: [],
+        title: '',
+        instructions: [],
+        option_type: 0,
+        limit_right_content: ''
+      },
+      option_index: 1,
+      parent_id: 0,
+      type: 0,
+      cascade: [],
+      config: []
+    });
+  });
+};
+
 // emit 事件
 
 // 选中题目后出现的操作
@@ -127,13 +156,17 @@ const chooseItem = () => {
   }
 
   & .choose-question-active {
-    outline: 1px dashed #409eff;
+    outline: 2px solid #70b936;
   }
 
   & .ml10 {
     margin-left: 10px;
   }
 
+  & .fs20 {
+    font-size: 20px;
+  }
+
   & .choose-question-active-container {
     display: flex;
     align-items: center;

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

@@ -4,9 +4,15 @@
     :label="element.stem"
     :required="element.config.is_required === 1"
     label-align="top"
+    class="base-select"
   >
     <template #label>
-      <div v-html="element.stem"></div>
+      <div
+        :contenteditable="active"
+        class="van-field"
+        @blur="saveStem($event, element)"
+        v-html="element.stem"
+      ></div>
     </template>
     <template #input>
       <van-checkbox-group>
@@ -17,10 +23,20 @@
             :name="it.value"
             :label="it.label"
             :disabled="it.disabled"
-            icon-size="0.35rem"
+            icon-size="0.45rem"
           >
             <template #default>
-              <div class="van-cell" :contenteditable="active" v-html="it.option"></div>
+              <div class="flex align-center space-between">
+                <div
+                  class="van-cell van-cell--borderless"
+                  :contenteditable="active"
+                  @blur="saveOption($event, it)"
+                  v-html="it.option"
+                ></div>
+                <div class="right-action">
+                  <option-action v-if="active"></option-action>
+                </div>
+              </div>
             </template>
           </van-checkbox>
         </template>
@@ -29,6 +45,7 @@
   </van-field>
 </template>
 <script setup>
+import OptionAction from '@/views/Design/components/ActionCompoents/OptionAction.vue';
 import { ref } from 'vue';
 const props = defineProps({
   element: {
@@ -46,5 +63,25 @@ const props = defineProps({
 });
 
 const element = ref(props.element);
+const saveOption = (e, ele) => {
+  ele.option = e.target.innerHTML;
+};
+const saveStem = (e, ele) => {
+  ele.stem = e.target.innerHTML;
+};
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.base-select {
+  & .van-checkbox-group {
+    width: 100%;
+
+    & .van-checkbox {
+      width: 100%;
+
+      & ::v-deep .van-checkbox__label {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>