feat: 新增选项操作功能并优化问卷设计页面

- 新增 OptionAction 组件用于选项操作
- 更新 BaseSelect 组件，集成 OptionAction 功能
- 优化 Paging 组件样式
- 调整 Design 页面布局和样式

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

@@ -1,11 +1,139 @@
 <template>
   <div class="container question-action-container flex">
-    <van-icon name="delete"></van-icon>
-    <van-icon name="more"></van-icon>
+    <van-icon name="delete" @click="deleteQuestion"></van-icon>
+    <van-icon name="more" @click="openQuestionActionModel"></van-icon>
   </div>
+
+  <!--  操作项弹窗-->
+  <van-action-sheet v-model:show="show">
+    <template #description>
+      <div class="flex flex-start">操作选项</div>
+    </template>
+    <van-cell-group :border="false" class="ml10">
+      <van-cell title="此题必答" :border="false" label-align="left">
+        <template #right-icon>
+          <van-switch
+            v-model="activeQuestion.config.is_required"
+            class="option-action-sheet-switch"
+            size="0.5rem"
+            :active-value="1"
+            :inactive-value="0"
+          ></van-switch>
+        </template>
+      </van-cell>
+      <van-cell title="选项随机" :border="false">
+        <template #right-icon>
+          <van-switch
+            v-model="activeQuestion.config.select_random"
+            class="option-action-sheet-switch"
+            size="0.5rem"
+            :active-value="1"
+            :inactive-value="0"
+          ></van-switch>
+        </template>
+      </van-cell>
+      <van-divider></van-divider>
+      <van-cell title="题前隐藏" :border="false">
+        <template #right-icon>
+          <span> {{ getSkipTypeText() }} <van-icon name="arrow"></van-icon></span>
+        </template>
+      </van-cell>
+      <van-cell title="题后跳转" :border="false">
+        <template #right-icon>
+          <span> 设置 <van-icon name="arrow"></van-icon></span>
+        </template>
+      </van-cell>
+      <van-divider></van-divider>
+      <van-cell title="下移选项" :border="false" @click="questionMove('down')"></van-cell>
+      <van-cell title="上移选项" :border="false" @click="questionMove('up')"></van-cell>
+    </van-cell-group>
+  </van-action-sheet>
 </template>
-<script setup></script>
+<script setup>
+import { showConfirmDialog } from 'vant';
+import { ref } from 'vue';
+import { useCounterStore } from '@/stores/counter';
+import { storeToRefs } from 'pinia';
+
+const store = useCounterStore();
+const { questionsInfo } = storeToRefs(store);
+const logics = questionsInfo.value.logics;
+
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0
+  },
+  data: {
+    type: Object,
+    default: () => {
+      // 传递
+    }
+  },
+  questions: {
+    type: Array,
+    default: () => []
+  },
+  questionIndex: {
+    type: Number,
+    default: 0
+  }
+});
+const questions = ref(props.questions);
+// 当前题目
+const activeQuestion = ref(props.data);
+
+const show = ref(false);
+const deleteQuestion = () => {
+  showConfirmDialog({
+    title: '提示',
+    message: '是否删除问题？'
+  })
+    .then(() => {
+      // on confirm
+      questions.value.splice(props.questionIndex, 1);
+    })
+    .catch(() => {
+      // on cancel
+    });
+};
+
+// 打开题目弹窗
+const openQuestionActionModel = () => {
+  show.value = true;
+};
+// 题目上下移动
+const questionMove = (action) => {
+  if (action === 'down') {
+    if (props.questionIndex === questions.value.length - 1) {
+      return;
+    }
+    const temp = questions.value[props.questionIndex];
+    questions.value.splice(props.questionIndex, 1);
+    questions.value.splice(props.questionIndex + 1, 0, temp);
+  } else {
+    if (props.questionIndex === 0) {
+      return;
+    }
+    const temp = questions.value[props.questionIndex];
+    questions.value.splice(props.questionIndex, 1);
+    questions.value.splice(props.questionIndex - 1, 0, temp);
+  }
+};
+
+// 获取题前隐藏  和题后 跳转 文字
+const getSkipTypeText = () => {
+  setTimeout(() => {
+    logics[0].id = 123;
+  }, 2000);
+  return logics[0].id;
+};
+</script>
 <style scoped lang="scss">
+.ml10 {
+  margin-left: 10px;
+}
+
 .question-action-container {
   font-size: 20px;