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

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

src/views/Design/Preview.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="container preview-container">
+    <div v-for="(element, index) in questionsInfo.questions" :key="index" class="element-container">
+      <Choice v-if="element.question_type === 1" :element="element" :active="false"></Choice>
+      <!-- 填空题 -->
+      <Completion
+        v-if="element.question_type === 4"
+        :element="element"
+        :active="chooseQuestionId === element.id"
+        sn="lXEBBpE2"
+      ></Completion>
+
+      <martrix-question
+        v-if="element.question_type === 9"
+        :element="element"
+        :active="chooseQuestionId === element.id"
+      />
+
+      <!-- 打分题 -->
+      <Rate
+        v-if="element.question_type === 5"
+        :element="element"
+        :active="chooseQuestionId === element.id"
+        sn="lXEBBpE2"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+import Choice from '@/views/Design/components/Questions/Choice.vue';
+// store paine
+import { storeToRefs } from 'pinia';
+import { useCounterStore } from '@/stores/counter';
+import MartrixQuestion from '@/views/Design/components/Questions/MartrixQuestion.vue';
+import Rate from '@/views/Design/components/Questions/Rate.vue';
+import Completion from '@/views/Design/components/Questions/Completion.vue';
+const store = useCounterStore();
+const { questionsInfo } = storeToRefs(store);
+</script>
+<style scoped lang="scss">
+.preview-container {
+  background: #f5f5f5;
+
+  & .element-container {
+    padding: 8px;
+  }
+}
+</style>