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

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

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

@@ -33,12 +33,12 @@
         </template>
       </van-cell>
       <van-divider></van-divider>
-      <van-cell title="题前隐藏" :border="false">
+      <van-cell title="题前隐藏" :border="false" @click="questionSetting('before')">
         <template #right-icon>
           <span> {{ getSkipTypeText(0) }} <van-icon name="arrow"></van-icon></span>
         </template>
       </van-cell>
-      <van-cell title="题后跳转" :border="false">
+      <van-cell title="题后跳转" :border="false" @click="questionSetting('after')">
         <template #right-icon>
           <span> {{ getSkipTypeText(1) }} <van-icon name="arrow"></van-icon></span>
         </template>
@@ -50,6 +50,30 @@
   </van-action-sheet>
 
   <!-- 题目操作   题前  题后-->
+
+  <van-popup
+    v-model:show="questionBeforeShow"
+    title="题前隐藏逻辑"
+    position="bottom"
+    round
+    :style="{ minHeight: '60%' }"
+  >
+    <template v-for="(item, index) in logics" :key="index">
+      <div
+        v-if="item.skip_type === skipType && item.question_index === activeQuestion.question_index"
+        class="mv10 question-setting"
+      >
+        <template v-for="(log, logIndex) in item.logic" :key="logIndex">
+          <yl-select
+            v-model="log.logic"
+            :options="settingIfOption"
+            class="question-setting-if"
+          ></yl-select>
+          <yl-select v-model="log.logic" :options="settingIfOption"></yl-select>
+        </template>
+      </div>
+    </template>
+  </van-popup>
 </template>
 <script setup>
 import { showConfirmDialog } from 'vant';
@@ -57,10 +81,17 @@ import { ref } from 'vue';
 import { useCounterStore } from '@/stores/counter';
 import { storeToRefs } from 'pinia';
 
+import YlSelect from '@/components/YLSelect.vue';
+
 const store = useCounterStore();
 const { questionsInfo } = storeToRefs(store);
 const logics = questionsInfo.value.logics;
 
+const settingIfOption = [
+  { label: 'if', value: 'if' },
+  { label: 'always', value: 'always' }
+];
+
 const props = defineProps({
   index: {
     type: Number,
@@ -87,6 +118,7 @@ const questions = ref(props.questions);
 const activeQuestion = ref(props.data);
 
 const show = ref(false);
+const questionBeforeShow = ref(false);
 const deleteQuestion = () => {
   showConfirmDialog({
     title: '提示',
@@ -124,6 +156,7 @@ const questionMove = (action) => {
   }
 };
 
+const skipType = ref(-1);
 // 获取题前隐藏  和题后 跳转 文字
 const getSkipTypeText = (skipType) => {
   const ls = [];
@@ -141,12 +174,41 @@ const getSkipTypeText = (skipType) => {
   }
   return text;
 };
+
+// 题前 题后逻辑配置
+
+const questionSetting = (type) => {
+  switch (type) {
+    case 'before':
+      questionBeforeShow.value = true;
+
+      break;
+    case 'after':
+      questionBeforeShow.value = true;
+      break;
+  }
+  skipType.value = type === 'before' ? 0 : 1;
+};
 </script>
 <style scoped lang="scss">
 .ml10 {
   margin-left: 10px;
 }
 
+.mv10 {
+  margin: 10px;
+}
+
+.y-select {
+  min-width: 10vw;
+
+  //max-width: 90vw;
+}
+
+.question-setting-if {
+  width: 140px;
+}
+
 .question-action-container {
   font-size: 20px;