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

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

src/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Layouts from './layouts/index.vue';
+import { RouterView } from 'vue-router';
 </script>
 
 <template>
   <div>
-    <Layouts />
+    <RouterView />
   </div>
 </template>

src/router/index.ts

@@ -1,25 +1,25 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import Home from '../views/Home/Index.vue';
+import layout from '@/layouts/index.vue';
 import Design from '@/views/Design/Index.vue';
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: Home,
+      name: '/',
+      component: layout,
+      redirect: '/home',
       meta: {
         title: '首页'
-      }
       },
+      children: [
         {
-      path: '/design',
-      name: 'design',
-      meta: {},
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: Design
+          path: '/home',
+          name: 'home',
+          meta: {
+            title: '首页'
+          },
+          component: () => import('../views/Home/Index.vue')
         },
         {
           path: '/survey',
@@ -38,6 +38,17 @@ const router = createRouter({
           component: () => import('../views/Market/Index.vue')
         }
       ]
+    },
+    {
+      path: '/design',
+      name: 'design',
+      meta: {},
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: Design
+    }
+  ]
 });
 
 export default router;

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

@@ -35,19 +35,21 @@
       <van-divider></van-divider>
       <van-cell title="题前隐藏" :border="false">
         <template #right-icon>
-          <span> {{ getSkipTypeText() }} <van-icon name="arrow"></van-icon></span>
+          <span> {{ getSkipTypeText(0) }} <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>
+          <span> {{ getSkipTypeText(1) }} <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 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>
 import { showConfirmDialog } from 'vant';
@@ -80,6 +82,7 @@ const props = defineProps({
   }
 });
 const questions = ref(props.questions);
+
 // 当前题目
 const activeQuestion = ref(props.data);
 
@@ -122,11 +125,21 @@ const questionMove = (action) => {
 };
 
 // 获取题前隐藏  和题后 跳转 文字
-const getSkipTypeText = () => {
-  setTimeout(() => {
-    logics[0].id = 123;
-  }, 2000);
-  return logics[0].id;
+const getSkipTypeText = (skipType) => {
+  const ls = [];
+  logics.map((item) => {
+    if (
+      item.skip_type === skipType &&
+      item.question_index === activeQuestion.value.question_index
+    ) {
+      ls.push(item);
+    }
+  });
+  let text = '未设置';
+  if (ls.length > 0) {
+    text = `已配置 (${ls.length})`;
+  }
+  return text;
 };
 </script>
 <style scoped lang="scss">

src/views/Design/components/Questions/paging/Paging.vue

@@ -11,7 +11,8 @@
           class="iconfont active-icon"
           :style="{ marginRight: isLastPage ? '0' : '16px' }"
           @click="activePage"
-        >&#xe86c;</i>
+          >&#xe86c;</i
+        >
         <template v-if="!isLastPage">
           <i class="iconfont moverQues" style="margin-right: 16px">&#xe71b;</i>
           <i class="iconfont" @click="deleteHandle">&#xe6c5;</i>

src/views/Home/components/Market/Index.vue

@@ -11,13 +11,11 @@
   </div>
 </template>
 
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <style scoped>
 .market {
-  &> :first-child {
+  & > :first-child {
     display: flex;
     align-items: end;
     justify-content: space-between;

src/views/Home/components/Suvrey/Index.vue

@@ -6,25 +6,22 @@
       <span @click="$router.push('/survey')">全部问卷></span>
     </div>
     <div class="survey_items">
-      <div v-for="survey in 3" :key="survey">
-      </div>
+      <div v-for="survey in 3" :key="survey"></div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <style scoped>
 .survey {
-  &> :first-child {
+  & > :first-child {
     display: flex;
     align-items: end;
     justify-content: space-between;
     margin: 10px 0;
 
-    &>span {
+    & > span {
       color: grey;
       font-size: 10px;
     }
@@ -44,6 +41,5 @@
       background-color: white;
     }
   }
-
 }
 </style>

src/views/Market/Index.vue

@@ -3,7 +3,9 @@
     <div v-for="item in 10" :key="item" class="template">
       <img src="https://picsum.photos/131/128" width="110" height="100" alt="" />
       <span>报名/签到模板</span>
-      <span style="color: rgb(127, 127, 127);">报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span>
+      <span style="color: rgb(127, 127, 127)"
+        >报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span
+      >
     </div>
   </div>
 </template>