feat(Design): 优化题目和选项的移动操作

- 在 OptionAction 组件中添加新的移动选项功能
- 在 QuestionAction 组件中增加题目移动和复制功能- 更新组件样式，替换部分图标
- 优化移动操作的交互逻辑

components.d.ts

@@ -16,11 +16,11 @@ declare module 'vue' {
     VanCheckbox: typeof import('vant/es')['Checkbox']
     VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
     VanCol: typeof import('vant/es')['Col']
+    VanDialog: typeof import('vant/es')['Dialog']
     VanDivider: typeof import('vant/es')['Divider']
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
     VanPopup: typeof import('vant/es')['Popup']
-    VanRate: typeof import('vant/es')['Rate']
     VanRow: typeof import('vant/es')['Row']
     VanSearch: typeof import('vant/es')['Search']
     VanSwitch: typeof import('vant/es')['Switch']

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

@@ -5,6 +5,7 @@
         <slot name="item" :element="item" :index="index"></slot>
         <span v-if="active" class="flex">
           <van-icon name="close" @click="deleteOption(index)"></van-icon>
+          <van-icon name="setting-o" @click="openMoveModel(item, index)"></van-icon>
           <van-icon name="more-o" @click="openOptionActionModel(item, index)"></van-icon>
         </span>
       </div>
@@ -43,6 +44,21 @@
       <van-cell title="上移选项" :border="false" @click="optionMove('up')"></van-cell>
     </van-cell-group>
   </van-action-sheet>
+  <van-action-sheet
+    v-model:show="moveShow"
+    cancel-text="取消"
+    @select="optionMove"
+    @cancel="moveShow = false"
+    :actions="actions"
+  >
+    <!--    <template #description>-->
+    <!--      <div class="flex flex-start">操作选项</div>-->
+    <!--    </template>-->
+    <!--    <van-cell-group :border="false" class="ml10">-->
+    <!--      <van-cell title="下移选项" :border="false" @click="optionMove('down')"></van-cell>-->
+    <!--      <van-cell title="上移选项" :border="false" @click="optionMove('up')"></van-cell>-->
+    <!--    </van-cell-group>-->
+  </van-action-sheet>
 </template>
 <script setup>
 import { ref } from 'vue';
@@ -61,8 +77,14 @@ const props = defineProps({
     default: false
   }
 });
+
+const actions = [
+  { name: '上移选项', action: 'up' },
+  { name: '下移选项', action: 'down' }
+];
 // const emit = defineEmits(['update:data']);
 const show = ref(false);
+const moveShow = ref(false);
 const activeOption = ref({});
 const activeIndex = ref(-1);
 const element = ref(props.data);
@@ -78,23 +100,27 @@ const openOptionActionModel = (item, index) => {
   activeOption.value = item;
   activeIndex.value = index;
 };
-
+const openMoveModel = (item, index) => {
+  moveShow.value = true;
+  activeOption.value = item;
+  activeIndex.value = index;
+};
 // 上下移动
 const optionMove = (action) => {
-  switch (action) {
+  switch (action.action) {
     case 'up':
       if (activeIndex.value === 0) {
-        show.value = false;
+        moveShow.value = false;
-        return;
+        return false;
       }
       // 向上移动
       element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
       activeIndex.value -= 1;
       break;
     case 'down':
-      if (activeIndex.value === element.value.length) {
+      if (activeIndex.value === element.value.length - 1) {
-        show.value = false;
+        moveShow.value = false;
-        return;
+        return false;
       }
       element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
       activeIndex.value += 1;

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

@@ -1,6 +1,7 @@
 <template>
   <div class="container question-action-container flex">
-    <van-icon name="delete" @click="deleteQuestion"></van-icon>
+    <van-icon name="clear" @click="deleteQuestion"></van-icon>
+    <van-icon name="setting" @click="openQuestionSettingModel"></van-icon>
     <van-icon name="more" @click="openQuestionActionModel"></van-icon>
   </div>
 
@@ -48,9 +49,21 @@
       <van-cell title="上移题目" :border="false" @click="questionMove('up')"></van-cell>
     </van-cell-group>
   </van-action-sheet>
+  <!--  移动 复制-->
+  <van-action-sheet
+    v-model:show="questionShow"
+    title=""
+    @select="questionMove"
+    :actions="actions"
+    cancel-text="取消"
+  >
+    <!--    <van-cell-group :border="false" class="ml10">-->
+    <!--      <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>
 
   <!-- 题目操作   题前  题后-->
-
   <van-popup
     v-model:show="questionBeforeShow"
     :close-on-click-overlay="false"
@@ -86,6 +99,7 @@ import QuestionBefore from '@/views/Design/components/ActionCompoents/components
 const store = useCounterStore();
 const { questionsInfo } = storeToRefs(store);
 const logics = questionsInfo.value.logics;
+import { v4 as uuidv4 } from 'uuid';
 
 const props = defineProps({
   index: {
@@ -113,7 +127,13 @@ const questions = ref(props.questions);
 const activeQuestion = ref(props.data);
 
 const show = ref(false);
+const questionShow = ref(false);
 const questionBeforeShow = ref(false);
+const actions = [
+  { name: '上移题目', action: 'up' },
+  { name: '下移题目', action: 'down' },
+  { name: '复制题目', action: 'copy' }
+];
 const deleteQuestion = () => {
   showConfirmDialog({
     title: '提示',
@@ -132,22 +152,35 @@ const deleteQuestion = () => {
 const openQuestionActionModel = () => {
   show.value = true;
 };
+
+const openQuestionSettingModel = () => {
+  questionShow.value = true;
+};
 // 题目上下移动
 const questionMove = (action) => {
-  if (action === 'down') {
+  if (action.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 {
+  } else if (action.action === 'up') {
     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);
+  } else {
+    //   复制 题目  生成新的id   更新最新的 last index
+    const temp = questions.value[props.questionIndex];
+    questions.value.splice(props.questionIndex + 1, 0, {
+      ...temp,
+      id: uuidv4(),
+      question_index: questionsInfo.value.survey.last_question_index + 1
+    });
+    questionsInfo.value.survey.last_question_index += 1;
   }
 };
 
@@ -193,10 +226,12 @@ const questionSetting = (type) => {
 .mv10 {
   margin: 10px;
 }
+
 .before-or-after {
-  height: 500px;
   overflow: auto;
+  height: 500px;
 }
+
 .y-select {
   min-width: 10vw;