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

- 添加 `vue-draggable-plus` 和 `lodash-es` 依赖以支持列表拖拽排序
- 使用 `cloneDeep` 深拷贝奖品列表，避免直接修改原始数据
- 移除原有的手动排序逻辑（上下移动按钮），改用可视化拖拽方式
- 调整 UI 布局和样式，增强用户体验与可操作性
- 在 Demo 页面中添加 draggable 示例用于验证功能实现

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,
+
+    }
+}