feat(prize-config): 引入拖拽功能并优化奖品配置界面

- 添加 `vue-draggable-plus` 和 `lodash-es` 依赖以支持列表拖拽排序 - 使用 `cloneDeep` 深拷贝奖品列表，避免直接修改原始数据 - 移除原有的手动排序逻辑（上下移动按钮），改用可视化拖拽方式 - 调整 UI 布局和样式，增强用户体验与可操作性 - 在 Demo 页面中添加 draggable 示例用于验证功能实现
2025-12-04 20:40:06 +08:00
parent 0d97c592e1
commit 4729566b56
5 changed files with 207 additions and 43 deletions
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
        "dexie": "^4.2.1",
        "github-markdown-css": "^5.8.0",
        "localforage": "^1.10.0",
+        "lodash-es": "^4.17.21",
        "lucide-vue-next": "^0.555.0",
        "markdown-it": "^14.1.0",
        "pinia": "^3.0.3",
@@ -34,6 +35,7 @@
        "uuid": "^13.0.0",
        "vue": "^3.5.13",
        "vue-dompurify-html": "^5.2.0",
+        "vue-draggable-plus": "^0.6.0",
        "vue-i18n": "^11.1.12",
        "vue-router": "^4.5.0",
        "vue-toast-notification": "^3",
@@ -51,6 +53,7 @@
        "@tailwindcss/vite": "^4.1.13",
        "@testing-library/vue": "^8.1.0",
        "@types/canvas-confetti": "^1.6.4",
+        "@types/lodash-es": "^4.17.12",
        "@types/markdown-it": "^14.1.2",
        "@types/node": "^24.5.2",
        "@types/three": "^0.166.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
      localforage:
        specifier: ^1.10.0
        version: 1.10.0
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.21
      lucide-vue-next:
        specifier: ^0.555.0
        version: 0.555.0(vue@3.5.13(typescript@5.5.3))
@@ -62,6 +65,9 @@ importers:
      vue-dompurify-html:
        specifier: ^5.2.0
        version: 5.2.0(vue@3.5.13(typescript@5.5.3))
+      vue-draggable-plus:
+        specifier: ^0.6.0
+        version: 0.6.0(@types/sortablejs@1.15.9)
      vue-i18n:
        specifier: ^11.1.12
        version: 11.1.12(vue@3.5.13(typescript@5.5.3))
@@ -108,6 +114,9 @@ importers:
      '@types/canvas-confetti':
        specifier: ^1.6.4
        version: 1.6.4
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
      '@types/markdown-it':
        specifier: ^14.1.2
        version: 14.1.2
@@ -1728,6 +1737,12 @@ packages:
  '@types/linkify-it@5.0.0':
    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}

+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash@4.17.21':
+    resolution: {integrity: sha512-FOvQ0YPD5NOfPgMzJihoT+Za5pdkDJWcbpuj1DjaKZIr/gxodQjY/uWEFlTNqW2ugXHUiL8lRQgw63dzKHZdeQ==}
+
  '@types/markdown-it@14.1.2':
    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}

@@ -1746,6 +1761,9 @@ packages:
  '@types/node@24.5.2':
    resolution: {integrity: sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==}

+  '@types/sortablejs@1.15.9':
+    resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==}
+
  '@types/stats.js@0.17.3':
    resolution: {integrity: sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==}

@@ -5407,6 +5425,15 @@ packages:
    peerDependencies:
      vue: ^3.0.0

+  vue-draggable-plus@0.6.0:
+    resolution: {integrity: sha512-G5TSfHrt9tX9EjdG49InoFJbt2NYk0h3kgjgKxkFWr3ulIUays0oFObr5KZ8qzD4+QnhtALiRwIqY6qul4egqw==}
+    peerDependencies:
+      '@types/sortablejs': ^1.15.0
+      '@vue/composition-api': '*'
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
  vue-eslint-parser@10.2.0:
    resolution: {integrity: sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -7211,6 +7238,12 @@ snapshots:

  '@types/linkify-it@5.0.0': {}

+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.21
+
+  '@types/lodash@4.17.21': {}
+
  '@types/markdown-it@14.1.2':
    dependencies:
      '@types/linkify-it': 5.0.0
@@ -7232,6 +7265,8 @@ snapshots:
    dependencies:
      undici-types: 7.12.0

+  '@types/sortablejs@1.15.9': {}
+
  '@types/stats.js@0.17.3': {}

  '@types/svgo@2.6.4':
@@ -11307,6 +11342,10 @@ snapshots:
      dompurify: 3.2.1
      vue: 3.5.13(typescript@5.5.3)

+  vue-draggable-plus@0.6.0(@types/sortablejs@1.15.9):
+    dependencies:
+      '@types/sortablejs': 1.15.9
+
  vue-eslint-parser@10.2.0(eslint@9.15.0(jiti@2.5.1)):
    dependencies:
      debug: 4.4.3
--- a/src/views/Config/Prize/PrizeConfig.vue
+++ b/src/views/Config/Prize/PrizeConfig.vue
@@ -1,8 +1,11 @@
 <script setup lang='ts'>
 import type { IPrizeConfig } from '@/types/storeType'
 import localforage from 'localforage'
+import { cloneDeep } from 'lodash-es'
+import { Grip } from 'lucide-vue-next'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
 import { useI18n } from 'vue-i18n'
 import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
 import PageHeader from '@/components/PageHeader/index.vue'
@@ -18,7 +21,7 @@ const globalConfig = useStore().globalConfig
 const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)

 const { getImageList: localImageList } = storeToRefs(globalConfig)
-const prizeList = ref(localPrizeList)
+const prizeList = ref(cloneDeep(localPrizeList.value))
 const imgList = ref<any[]>([])

 const selectedPrize = ref<IPrizeConfig | null>()
@@ -123,17 +126,6 @@ async function getImageDbStore() {
  }
 }

-function sort(item: IPrizeConfig, isUp: number) {
-  const itemIndex = prizeList.value.indexOf(item)
-  if (isUp === 1) {
-    prizeList.value.splice(itemIndex, 1)
-    prizeList.value.splice(itemIndex - 1, 0, item)
-  }
-  else {
-    prizeList.value.splice(itemIndex, 1)
-    prizeList.value.splice(itemIndex + 1, 0, item)
-  }
-}
 function delItem(item: IPrizeConfig) {
  prizeConfig.deletePrizeConfig(item.id)
 }
@@ -144,6 +136,7 @@ onMounted(() => {
  getImageDbStore()
 })
 watch(() => prizeList.value, (val: IPrizeConfig[]) => {
+  console.log('prizeList', val)
  prizeConfig.setPrizeConfig(val)
 }, { deep: true })
 </script>
@@ -176,27 +169,20 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
        </div>
      </template>
    </PageHeader>
-
-    <ul class="p-0 m-0">
-      <li
-        v-for="item in prizeList" :key="item.id" class="flex gap-10"
+    <VueDraggable
+      v-model="prizeList"
+      :animation="150"
+      handle=".handle"
+      class="p-0 m-0"
+    >
+      <div
+        v-for="item in prizeList" :key="item.id" class="flex gap-10 items-center justify-center py-5"
        :class="currentPrize.id === item.id ? 'border-1 border-dotted rounded-xl' : null"
      >
-        <label class="max-w-xs mb-10 form-control">
-          <!-- 向上向下 -->
-          <div class="flex flex-col items-center gap-2 pt-5">
-            <svg-icon
-              class="cursor-pointer hover:text-blue-400"
-              :class="prizeList.indexOf(item) === 0 ? 'opacity-0 cursor-default' : ''" name="up"
-              @click="sort(item, 1)"
-            />
-            <svg-icon
-              class="cursor-pointer hover:text-blue-400" name="down" :class="prizeList.indexOf(item) === prizeList.length - 1 ? 'opacity-0 cursor-default' : ''"
-              @click="sort(item, 0)"
-            />
-          </div>
+        <label class="handle max-w-xs form-control flex items-center justify-center px-2">
+          <Grip class="handle cursor-move w-10 h-10" />
        </label>
-        <label class="w-1/2 max-w-xs mb-10 form-control">
+        <label class="w-1/2 max-w-xs form-control">
          <div class="label">
            <span class="label-text">{{ t('table.prizeName') }}</span>
          </div>
@@ -205,16 +191,16 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
            class="w-full max-w-xs input-sm input input-bordered"
          >
        </label>
-        <label class="w-1/2 max-w-xs mb-10 form-control">
+        <label class="w-1/2 max-w-xs flex items-center gap-2 form-control">
          <div class="label">
            <span class="label-text">{{ t('table.fullParticipation') }}</span>
          </div>
          <input
-            type="checkbox" :checked="item.isAll" class="mt-2 border-solid checkbox checkbox-secondary border-1"
+            type="checkbox" :checked="item.isAll" class="border-solid checkbox checkbox-secondary border-1"
            @change="item.isAll = !item.isAll"
          >
        </label>
-        <label class="w-1/2 max-w-xs mb-10 form-control">
+        <label class="w-1/2 max-w-xs  form-control">
          <div class="label">
            <span class="label-text">{{ t('table.numberParticipants') }}</span>
          </div>
@@ -226,27 +212,28 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
            <progress class="w-full progress" :value="item.isUsedCount" :max="item.count" />
          </div>
        </label>
-        <label class="w-1/2 max-w-xs mb-10 form-control">
+        <label class="w-1/2 max-w-xs flex items-center gap-2 form-control">
          <div class="label">
            <span class="label-text">{{ t('table.isDone') }}</span>
          </div>
          <input
-            type="checkbox" :checked="item.isUsed" class="mt-2 border-solid checkbox checkbox-secondary border-1"
+            type="checkbox" :checked="item.isUsed" class="border-solid checkbox checkbox-secondary border-1"
            @change="changePrizeStatus(item)"
          >
        </label>
-        <label class="w-full max-w-xs mb-10 form-control">
+        <label class="w-full max-w-xs form-control">
          <div class="label">
            <span class="label-text">{{ t('table.image') }}</span>
          </div>
-          <select v-model="item.picture" class="w-full max-w-xs select select-warning select-sm">
+          <select v-model="item.picture" class="select select-warning select-sm truncate">
            <option v-if="item.picture.id" :value="{ id: '', name: '', url: '' }">❌</option>
            <option disabled selected>{{ t('table.selectPicture') }}</option>
-            <option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}
+            <option v-for="picItem in localImageList" :key="picItem.id" class="w-full max-w-full" :value="picItem">
+              <span class="w-full max-w-[200px] truncate" :title="picItem.name">{{ picItem.name }}</span>
            </option>
          </select>
        </label>
-        <label v-if="item.separateCount" class="w-full max-w-xs mb-10 form-control">
+        <label v-if="item.separateCount" class="w-full max-w-xs  form-control">
          <div class="label">
            <span class="label-text">{{ t('table.onceNumber') }}</span>
          </div>
@@ -274,16 +261,16 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
            <button v-else class="btn btn-secondary btn-xs">{{ t('button.setting') }}</button>
          </div>
        </label>
-        <label class="w-full max-w-xs mb-10 form-control">
+        <label class="w-full max-w-xs  form-control">
          <div class="label">
            <span class="label-text">{{ t('table.operation') }}</span>
          </div>
          <div class="flex gap-2">
-            <button class="btn btn-error btn-sm" @click="delItem(item)">{{ t('button.delete') }}</button>
+            <button class="btn btn-error btn-xs" @click="delItem(item)">{{ t('button.delete') }}</button>
          </div>
        </label>
-      </li>
-    </ul>
+      </div>
+    </VueDraggable>
    <EditSeparateDialog
      :total-number="selectedPrize?.count" :separated-number="selectedPrize?.separateCount.countList"
      @submit-data="submitData"
--- a/src/views/Config/Prize/usePrizeConfig.ts
+++ b/src/views/Config/Prize/usePrizeConfig.ts
@@ -0,0 +1,100 @@
+import type { IPrizeConfig } from '@/types/storeType'
+import localforage from 'localforage'
+import { cloneDeep } from 'lodash-es'
+import { Grip } from 'lucide-vue-next'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref, watch } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'
+import { useI18n } from 'vue-i18n'
+import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
+import i18n from '@/locales/i18n'
+import useStore from '@/store'
+
+export function usePrizeConfig() {
+    const { t } = useI18n()
+    const imageDbStore = localforage.createInstance({
+        name: 'imgStore',
+    })
+    const prizeConfig = useStore().prizeConfig
+    const globalConfig = useStore().globalConfig
+    const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
+
+    const { getImageList: localImageList } = storeToRefs(globalConfig)
+    const imgList = ref<any[]>([])
+
+    const prizeList = ref(cloneDeep(localPrizeList.value))
+    const selectedPrize = ref<IPrizeConfig | null>()
+
+    function selectPrize(item: IPrizeConfig) {
+        selectedPrize.value = item
+        selectedPrize.value.isUsedCount = 0
+        selectedPrize.value.isUsed = false
+
+        if (selectedPrize.value.separateCount.countList.length > 1) {
+            return
+        }
+        selectedPrize.value.separateCount = {
+            enable: true,
+            countList: [
+                {
+                    id: '0',
+                    count: item.count,
+                    isUsedCount: 0,
+                },
+            ],
+        }
+    }
+
+    function changePrizeStatus(item: IPrizeConfig) {
+        item.isUsed ? item.isUsedCount = 0 : item.isUsedCount = item.count
+        item.separateCount.countList = []
+        item.isUsed = !item.isUsed
+    }
+
+    function changePrizePerson(item: IPrizeConfig) {
+        let indexPrize = -1
+        for (let i = 0; i < prizeList.value.length; i++) {
+            if (prizeList.value[i].id === item.id) {
+                indexPrize = i
+                break
+            }
+        }
+        if (indexPrize > -1) {
+            prizeList.value[indexPrize].separateCount.countList = []
+            prizeList.value[indexPrize].isUsed ? prizeList.value[indexPrize].isUsedCount = prizeList.value[indexPrize].count : prizeList.value[indexPrize].isUsedCount = 0
+        }
+    }
+    function submitData(value: any) {
+        selectedPrize.value!.separateCount.countList = value
+        selectedPrize.value = null
+    }
+
+    async function getImageDbStore() {
+        const keys = await imageDbStore.keys()
+        if (keys.length > 0) {
+            imageDbStore.iterate((value, key) => {
+                imgList.value.push({
+                    key,
+                    value,
+                })
+            })
+        }
+    }
+
+    function delItem(item: IPrizeConfig) {
+        prizeConfig.deletePrizeConfig(item.id)
+    }
+    onMounted(() => {
+        getImageDbStore()
+    })
+    watch(() => prizeList.value, (val: IPrizeConfig[]) => {
+        console.log('prizeList', val)
+        prizeConfig.setPrizeConfig(val)
+    }, { deep: true })
+
+    return {
+        currentPrize,
+
+    }
+}
--- a/src/views/Demo/index.vue
+++ b/src/views/Demo/index.vue
@@ -1,6 +1,26 @@
 <script setup lang='ts'>
+import { Grip } from 'lucide-vue-next'
 import { onMounted, ref, watch } from 'vue'
+import { VueDraggable } from 'vue-draggable-plus'

+const list = ref([
+  {
+    name: 'Joao',
+    id: '1',
+  },
+  {
+    name: 'Jean',
+    id: '2',
+  },
+  {
+    name: 'Johanna',
+    id: '3',
+  },
+  {
+    name: 'Juan',
+    id: '4',
+  },
+])
 onMounted(() => {

 })
@@ -11,6 +31,21 @@ onMounted(() => {
    <button class="btn btn-error">
      打印
    </button>
+    <VueDraggable
+      v-model="list"
+      :animation="150"
+      handle=".handle"
+      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
+    >
+      <div
+        v-for="(item, index) in list"
+        :key="item.id"
+        class="h-50px bg-gray-500/5 px-2 rounded flex items-center justify-between"
+      >
+        <Grip class="handle cursor-move" />
+        <input v-model="item.name" type="text">
+      </div>
+    </VueDraggable>
  </div>
 </template>