feat: 合并main至dev

src/views/Config/Global/FaceConfig.vue

@@ -7,8 +7,8 @@ import daisyuiThemes from 'daisyui/src/theming/themes'
 import { storeToRefs } from 'pinia'
 import { themeChange } from 'theme-change'
 import { onMounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { ColorPicker } from 'vue3-colorpicker'
+import { useI18n } from 'vue-i18n'
 import zod from 'zod'
 import PatternSetting from './components/PatternSetting.vue'
 import 'vue3-colorpicker/style.css'
@@ -17,7 +17,8 @@ const { t } = useI18n()
 const globalConfig = useStore().globalConfig
 const personConfig = useStore().personConfig
 const prizeConfig = useStore().prizeConfig
-const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getLanguage: userLanguage } = storeToRefs(globalConfig)
+const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getLanguage: userLanguage, getBackground: backgroundImage, getImageList: imageList,
+} = storeToRefs(globalConfig)
 const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
 const colorPickerRef = ref()
 const resetDataDialogRef = ref()
@@ -38,13 +39,13 @@ const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
 const patternColorValue = ref(structuredClone(patternColor.value))
 const themeList = ref(Object.keys(daisyuiThemes))
 const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
+const backgroundImageValue = ref(backgroundImage.value)
 const formData = ref({
   rowCount: rowCountValue,
 })
 const formErr = ref({
   rowCount: '',
 })
-
 const schema = zod.object({
   rowCount: zod.number({
     required_error: i18n.global.t('error.require'),
@@ -145,9 +146,13 @@ watch(textColorValue, (val: string) => {
 watch(cardSizeValue, (val: { width: number, height: number }) => {
   globalConfig.setCardSize(val)
 }, { deep: true })
+
 watch(isShowPrizeListValue, () => {
   globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
 })
+watch(backgroundImageValue, (val) => {
+  globalConfig.setBackground(val)
+})
 watch(languageValue, (val: string) => {
   globalConfig.setLanguage(val)
 })
@@ -237,6 +242,21 @@ onMounted(() => {
         <option v-for="(item, index) in themeList" :key="index" :value="item">{{ item }}</option>
       </select>
     </label>
+    <label class="w-full max-w-xs form-control">
+      <div class="label">
+        <span class="label-text">{{ t('table.backgroundImage') }}</span>
+      </div>
+      <select
+        v-model="backgroundImageValue" data-choose-theme
+        class="w-full max-w-xs border-solid select border-1"
+      >
+        <option disabled selected>{{ t('table.backgroundImage') }}</option>
+        <option
+          v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
+          :value="item"
+        >{{ item.name }}</option>
+      </select>
+    </label>
     <label class="w-full max-w-xs form-control">
       <div class="label">
         <span class="label-text">{{ t('table.cardColor') }}</span>

src/views/Config/Person/PersonAll.vue

@@ -147,7 +147,7 @@ onMounted(() => {
             {{ t('button.cancel') }}
           </button>
           <button class="btn" @click="resetData">
-            {{ t('dialog.confirm') }}
+            {{ t('button.confirm') }}
           </button>
         </form>
       </div>

src/views/Home/index.vue

@@ -10,8 +10,8 @@ import * as TWEEN from '@tweenjs/tween.js'
 import confetti from 'canvas-confetti'
 import { storeToRefs } from 'pinia'
 import { Object3D, PerspectiveCamera, Scene, Vector3 } from 'three'
-import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
 import { CSS3DObject, CSS3DRenderer } from 'three-css3d'
+import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
@@ -26,9 +26,10 @@ const personConfig = useStore().personConfig
 const globalConfig = useStore().globalConfig
 const prizeConfig = useStore().prizeConfig
 
-const { getAllPersonList: allPersonList, getNotPersonList: notPersonList, getNotThisPrizePersonList: notThisPrizePersonList } = storeToRefs(personConfig)
+const { getAllPersonList: allPersonList, getNotPersonList: notPersonList, getNotThisPrizePersonList: notThisPrizePersonList,
+} = storeToRefs(personConfig)
 const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
-const { getTopTitle: topTitle, getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig)
+const { getTopTitle: topTitle, getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getBackground: homeBackground } = storeToRefs(globalConfig)
 const tableData = ref<any[]>([])
 const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
 const ballRotationY = ref(0)
@@ -437,8 +438,9 @@ async function stopLottery() {
   luckyTargets.value.forEach((person: IPersonConfig, index: number) => {
     const cardIndex = selectCard(luckyCardList.value, tableData.value.length, person.id)
     luckyCardList.value.push(cardIndex)
+    const totalLuckyCount = luckyTargets.value.length
     const item = objects.value[cardIndex]
-    const { xTable, yTable } = useElementPosition(item, rowCount.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
+    const { xTable, yTable } = useElementPosition(item, rowCount.value, totalLuckyCount, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
     new TWEEN.Tween(item.position)
       .to({
         x: xTable,
@@ -704,7 +706,7 @@ onUnmounted(() => {
     </div>
     <!-- end -->
   </div>
-  <StarsBackground />
+  <StarsBackground :home-background="homeBackground" />
   <PrizeList class="absolute left-0 top-32" />
 </template>