feat(design): 添加题目预览功能并优化题目组件

- 新增 Preview 组件用于题目预览
- 重构 Index 组件,移除冗余代码
-优化 QuestionBefore 组件,添加题目标题
- 重构 ChooseQuestion组件,支持自定义操作
- 新增题目类型判断和对应操作功能

src/views/Design/Index.vue

@@ -43,7 +43,25 @@
             :active="chooseQuestionId === element.id"
             sn="lXEBBpE2"
           />
-          <!-- @update="updateHandle" -->
+          <!--组件底部左侧操作-->
+          <template #action="{ element: el }">
+            <div class="flex slot-actions">
+              <template v-for="(item, optionIndex) in actionOptions">
+                <div
+                  v-if="item.question_type.includes(el.question_type)"
+                  :key="optionIndex"
+                  class="flex"
+                >
+                  <template v-for="(act, actIndex) in item.actions" :key="actIndex">
+                    <div class="flex align-center action-item" @click="actionEvent(act, el)">
+                      <van-icon :name="act.icon"></van-icon>
+                      <span class="ml10">{{ act.label }}</span>
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </template>
         </choose-question>
 
         <!--        {{ element.question_type }}-->
@@ -60,6 +78,7 @@
   </div>
 </template>
 <script setup>
+import { v4 as uuidv4 } from 'uuid';
 import { ref, onMounted } from 'vue';
 import { useCounterStore } from '@/stores/counter';
 import { storeToRefs } from 'pinia';
@@ -129,15 +148,67 @@ const questionInfo = ref(store.questionsInfo.value);
 const getChooseQuestionId = (questionItem) => {
   chooseQuestionId.value = questionItem.id;
 };
+// 组件对应的操作
+const actionOptions = [
+  {
+    question_type: [1, 5],
+    actions: [
+      {
+        label: '添加选项',
+        icon: 'add',
+        fun: 'radioAddOption'
+      }
+    ]
+  }
+];
+//  事件分发
+const actionEvent = (item, el) => {
+  actionFun[item.fun](el);
+};
+// 总事件注册
+const actionFun = {
+  //  单选事件  添加选项
+  radioAddOption: (element) => {
+    element.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: element.last_option_index + 1,
+        parent_id: 0,
+        type: 0,
+        cascade: [],
+        config: []
+      });
+    });
+    element.last_option_index += 1;
+  }
+};
 
 onMounted(() => {
   questionInfo.value = store.questionsInfo.value;
 });
 </script>
 <style scoped lang="scss">
+.ml10 {
+  margin-left: 5px;
+}
+
 .design-create {
   min-height: calc(100vh);
   background-color: #e9eef3;
   color: #333;
+
+  .slot-actions {
+    & .action-item + .action-item {
+      margin-left: 10px;
+    }
+  }
 }
 </style>