fix: item 排序

src/pages/card/components/config-game.vue

@@ -74,7 +74,14 @@
         </a-row>
 
         <div v-else-if="currentLevel === 1">
-          <a-row class="config-game-list" :gutter="[8, 8]">
+        <a-row class="config-game-list" :gutter="[8, 8]">
+          <VueDraggableNext
+            :list="cardJson.game_list[currentGameIndex].items"
+            group="people"
+            item-key="id"
+            :animation="300"
+            class="config-game-list"
+          >
             <a-col
               :span="10"
               class="config-game-item"
@@ -85,6 +92,7 @@
               <img class="folder-icon" :src="require('@/assets/common/folder.svg')" alt="">
               <div>游戏 {{index + 1}}</div>
             </a-col>
+          </VueDraggableNext>
           </a-row>
           <a-empty  style="margin: 0 auto;" v-if="cardJson.game_list[currentGameIndex].items.length === 0" description="暂无游戏"> </a-empty>
         </div>
@@ -222,6 +230,7 @@ import { reactive, ref, PropType, computed, watch } from 'vue'
 import { message } from 'ant-design-vue'
 import SelectAudioNew from './select-audio-new.vue'
 import gameStage3 from './game-stage-3.vue'
+import { VueDraggableNext } from 'vue-draggable-next'
 
 const props = defineProps({
   open: {
@@ -537,8 +546,13 @@ const saveGameConfig = async () => {
 .game-modal-content {
   padding: 16px;
 
-  // .config-game-list {
-  // }
+  .config-game-list {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 16px;
+  }
 
   .config-game-item {
     display: flex;

src/pages/card/components/game-stage-3.vue

@@ -107,7 +107,7 @@
       <template #title>
         <div class="header">
           <span>新增步骤</span>
-          <a-radio-group v-if="props.rule === 9" v-model:value="btnMode">
+          <a-radio-group v-if="getBtnRuleByRule === 'multiple'" v-model:value="btnMode">
             <a-radio-button value="success">正确</a-radio-button>
             <a-radio-button value="error">错误</a-radio-button>
           </a-radio-group>
@@ -116,19 +116,30 @@
       <a-form :model="steps.ok_key" layout="vertical" v-if="btnMode === 'success'">
         <a-form-item label="选择按钮">
           <div class="button-grid">
-            <a-button
+            <div
               v-for="btn in buttonOptions"
               :key="btn.value"
-              :type="getBtnTypeByKey(btn.value)"
-              @click="selectButton(btn)"
+              class="button-wrapper"
+              @mouseenter="handleMouseEnter(btn.value)"
+              @mouseleave="handleMouseLeave"
             >
-              {{ btn.label }}
-            </a-button>
+              <a-button
+                :type="getBtnTypeByKey(btn.value)"
+                @click="selectButton(btn)"
+              >
+                {{ btn.label }}
+              </a-button>
+              <delete-outlined
+                v-if="hoveredButton === btn.value && isButtonSelected(btn.value)"
+                class="delete-icon"
+                @click.stop="handleDeleteButton(btn.value)"
+              />
+            </div>
           </div>
         </a-form-item>
         <a-form-item label="选择语音">
           <span
-            style="mergin-bottom: 8px;"
+            style="margin-bottom: 8px;"
             :key="item.value"
              v-for="item in steps.ok_key"
           >
@@ -155,7 +166,7 @@
         </a-form-item>
         <a-form-item label="选择语音">
           <span
-            style="mergin-bottom: 8px;"
+            style="margin-bottom: 8px;"
             v-for="item in steps.err_key"
             :key="item.value"
           >
@@ -209,14 +220,17 @@ const steps = computed({
   set: (value) => emits('update:modelValue', value)
 })
 
+// 有的是单选（7、10） 有的是多选（9 , 11, 12, 13, 14, 15, 16） 17 单和多都可以，直接用多选
+const getBtnRuleByRule = computed(() => {
+  if (props.rule === 7 || props.rule === 10) {
+    return 'single'
+  }
+  return 'multiple'
+})
+
 const addStepModalVisible = ref(false)
 const activeStepIndex = ref<number | null>(null)
 
-const newStepForm = reactive<Step>({
-  success: [],
-  error: []
-})
-
 const btnMode = ref<'success' | 'error'>('success')
 
 const buttonOptions = (() => {
@@ -242,7 +256,7 @@ const getBtnTypeByKey = (key: number) => {
   if (steps.value.ok_key.some(item => item.value === key)) {
     return 'primary'
   } else if (steps.value.err_key.some(item => item.value === key)) {
-    return 'dashed'
+    return 'primary'
   }
   return 'default'
 }
@@ -254,7 +268,7 @@ const showAddStepModal = (mode: 'success' | 'error') => {
 
 const selectButton = (btn: { label: string, value: number }) => {
   if (btnMode.value === 'success') {
-    if (props.rule === 7) {
+    if (getBtnRuleByRule.value === 'single') {
       steps.value.ok_key[0] = { value: btn.value, music_name: '', is_break: 1 }
     } else {
       steps.value.ok_key.push({ value: btn.value, music_name: '', is_break: 1 })
@@ -265,7 +279,7 @@ const selectButton = (btn: { label: string, value: number }) => {
 }
 
 const handleAddStep = () => {
-  if (props.rule === 7 && steps.value.ok_key.length === 0) {
+  if (getBtnRuleByRule.value === 'single' && steps.value.ok_key.length === 0) {
     message.error('请至少选择一个正确按钮')
     return
   } else {
@@ -317,6 +331,38 @@ const onDragEnd = () => {
   // draggable already updated the model
   emits('update:modelValue', steps.value)
 }
+
+// 添加按钮悬停相关的状态和方法
+const hoveredButton = ref<number | null>(null)
+
+const handleMouseEnter = (value: number) => {
+  hoveredButton.value = value
+}
+
+const handleMouseLeave = () => {
+  hoveredButton.value = null
+}
+
+const isButtonSelected = (value: number) => {
+  return steps.value.ok_key.some(item => item.value === value) ||
+         steps.value.err_key.some(item => item.value === value)
+}
+
+const handleDeleteButton = (value: number) => {
+  // 查找按钮在哪个数组中
+  const okIndex = steps.value.ok_key.findIndex(item => item.value === value)
+  if (okIndex !== -1) {
+    steps.value.ok_key.splice(okIndex, 1)
+    emits('update:modelValue', steps.value)
+    return
+  }
+
+  const errIndex = steps.value.err_key.findIndex(item => item.value === value)
+  if (errIndex !== -1) {
+    steps.value.err_key.splice(errIndex, 1)
+    emits('update:modelValue', steps.value)
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -414,6 +460,7 @@ const onDragEnd = () => {
 }
 
 .game-stage-3-modal .button-grid .ant-btn {
+  width: 100%;
   padding: 0;
   height: 40px;
   font-weight: 500;
@@ -421,4 +468,41 @@ const onDragEnd = () => {
   justify-content: center;
   align-items: center;
 }
+
+.button-wrapper {
+  width: 100%;
+  position: relative;
+}
+
+.delete-icon {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  color: #ff4d4f;
+  background-color: #fff;
+  border-radius: 50%;
+  padding: 2px;
+  font-size: 14px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  z-index: 10;
+}
+
+.button-wrapper {
+  position: relative;
+}
+
+.delete-icon {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  color: #ff4d4f;
+  background-color: #fff;
+  border-radius: 50%;
+  padding: 2px;
+  font-size: 14px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  z-index: 10;
+}
 </style>