feat: ✨ 提示最大单次抽奖人数为30

src/components/HoverTip/index.vue

@@ -0,0 +1,57 @@
+<script setup lang='ts'>
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from 'lucide-vue-next'
+import { computed } from 'vue'
+
+interface Props {
+    tip: string
+    type?: 'success' | 'warning' | 'error' | 'info'
+    direction?: 'top' | 'bottom' | 'left' | 'right'
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    type: 'info',
+    direction: 'top',
+    size: 'sm',
+})
+
+const sizeObj = {
+    '2xs': 'w-2 h-2',
+    'xs': 'w-3 h-3',
+    'sm': 'w-4 h-4',
+    'md': 'w-5 h-5',
+    'lg': 'w-6 h-6',
+    'xl': 'w-7 h-7',
+    '2xl': 'w-8 h-8',
+}
+
+const tipClassNames = computed(() => {
+    return [
+        `tooltip-${props.direction}`,
+    ]
+})
+
+const iconClassNames = computed(() => {
+    return [
+        `w-${sizeObj[props.size]}`,
+    ]
+})
+</script>
+
+<template>
+  <div class="tooltip" :class="tipClassNames" :data-tip="tip">
+    <slot name="content" />
+    <slot>
+      <div :class="iconClassNames" class="hover:text-primary cursor-pointer">
+        <CircleAlert v-if="type === 'warning'" class="w-full h-full text-warning" />
+        <Info v-else-if="type === 'info'" class="w-full h-full" />
+        <CircleCheck v-else-if="type === 'success'" class="w-full h-full text-success" />
+        <TriangleAlert v-else-if="type === 'error'" class="w-full h-full text-error" />
+      </div>
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/index.ts

@@ -1,5 +1 @@
-export { default as Footer } from './Footer/index.vue'
+export { default as HoverTip } from './HoverTip/index.vue'
-/**
- *title: 自动导出组件
- */
-export { default as Header } from './Header/index.vue'

src/locales/modules/tooltip.ts

@@ -1,3 +1,5 @@
+import { SINGLE_TIME_MAX_PERSON_COUNT } from '@/constant/config'
+
 export const tooltipEn = {
     settingConfiguration: 'Setting/Configuration',
     nextSong: 'Right Click to Next Song',
@@ -16,6 +18,7 @@ export const tooltipEn = {
     timedStop: 'After the lottery begins, it will stop at a scheduled time by default, set to 0, with the unit in seconds. A value of 0 disables the scheduled stopping function',
     uploadImage: 'Upload Image',
     pleaseGoto: 'Please go to',
+    onceNumberMax: `The maximum quantity for a single extraction is ${SINGLE_TIME_MAX_PERSON_COUNT}. If it exceeds ${SINGLE_TIME_MAX_PERSON_COUNT}, it will be automatically extracted in batches for you`,
 }
 
 export const tooltipZhCn = {
@@ -36,6 +39,7 @@ export const tooltipZhCn = {
     timedStop: '开始抽奖过后定时停止，默认为0，单位为秒，0为关闭定时停止功能',
     uploadImage: '上传图片',
     pleaseGoto: '请先前往',
+    onceNumberMax: `单次抽取数量最大为${SINGLE_TIME_MAX_PERSON_COUNT}，若设置超过${SINGLE_TIME_MAX_PERSON_COUNT}会自动为您分批次抽取`,
 }
 
 export const tooltip = {

src/views/Config/Prize/PrizeConfig.vue

@@ -2,6 +2,7 @@
 import { Grip } from 'lucide-vue-next'
 import { VueDraggable } from 'vue-draggable-plus'
 import { useI18n } from 'vue-i18n'
+import { HoverTip } from '@/components/index'
 import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
 import PageHeader from '@/components/PageHeader/index.vue'
 import { usePrizeConfig } from './usePrizeConfig'
@@ -69,7 +70,7 @@ const { t } = useI18n()
             @change="item.isAll = !item.isAll"
           >
         </label>
-        <label class="w-1/2 max-w-xs form-control">
+        <label class="w-1/2 max-w-2xl form-control">
           <div class="label">
             <span class="label-text">{{ t('table.numberParticipants') }}</span>
           </div>
@@ -77,8 +78,8 @@ const { t } = useI18n()
             v-model="item.count" type="number" :placeholder="t('placeHolder.winnerCount')" class="w-full max-w-xs p-0 m-0 input-sm input input-bordered"
             @change="changePrizePerson(item)"
           >
-          <div class="tooltip tooltip-bottom" :data-tip="`${t('table.isDone') + item.isUsedCount}/${item.count}`">
+          <div class="tooltip tooltip-bottom w-full" :data-tip="`${t('table.isDone') + item.isUsedCount}/${item.count}`">
-            <progress class="w-full progress" :value="item.isUsedCount" :max="item.count" />
+            <progress class="progress w-full" :value="item.isUsedCount" :max="item.count" />
           </div>
         </label>
         <label class="flex items-center w-1/2 max-w-xs gap-2 form-control">
@@ -105,7 +106,11 @@ const { t } = useI18n()
         <label v-if="item.separateCount" class="w-full max-w-xs form-control">
           <div class="label">
             <span class="label-text">{{ t('table.onceNumber') }}</span>
+            <HoverTip
+              :tip="t('tooltip.onceNumberMax')"
+            />
           </div>
+
           <div class="flex justify-start w-full h-full" @click="selectPrize(item)">
             <ul
               v-if="item.separateCount.countList.length"