feat: 合并main至dev

.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.github/workflows/node.js.yml

@@ -15,7 +15,7 @@ jobs:
       contents: read
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

.gitignore

@@ -128,3 +128,4 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+target

Dockerfile

@@ -0,0 +1,37 @@
+# 使用官方的 Node 镜像作为基础镜像
+FROM node:20.12.2
+
+# 设置工作目录
+WORKDIR /usr/src/app
+
+# 将本地的 Vite 项目文件复制到工作目录
+COPY . .
+
+# 安装依赖
+
+RUN npm install pnpm -g
+
+RUN pnpm install
+
+# 执行 Vite 构建命令，生成 dist 目录
+RUN pnpm build
+
+# 使用 Nginx 镜像作为运行时镜像
+FROM nginx:1.26
+
+# 修改nginx配置
+# 向 #error_page 前添加内容
+# location /log-lottery {
+#           alias /usr/share/nginx/log-lottery;
+#           index index.html index.htm;
+#           try_files $uri $uri/ /log-lottery/index.html;
+#         }
+RUN sed -i 's/#error_page/location \/log-lottery {\n          alias \/usr\/share\/nginx\/log-lottery;\n          index index.html index.htm;\n          try_files $uri $uri\/ \/log-lottery\/index.html;\n        }\n#error_page/' /etc/nginx/conf.d/default.conf
+
+# 将 Vite 项目的 dist 目录复制到 Nginx 的默认静态文件目录
+COPY --from=0 /usr/src/app/dist /usr/share/nginx/log-lottery
+
+# 暴露容器的 80 端口
+EXPOSE 80
+
+# Nginx 会在容器启动时自动运行，无需手动设置 CMD

README.md

@@ -1,20 +1,26 @@
-<p align="center">
+<div align="center">
-    <a href="http://www.form-create.com">
+    <a href="https://log1997.github.io/log-lottery/">
-        <svg t="1704902663531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4318" width="200" height="200"><path d="M433.230769 630.153846m-275.692307 0a275.692308 275.692308 0 1 0 551.384615 0 275.692308 275.692308 0 1 0-551.384615 0Z" fill="#E2FFFF" p-id="4319"></path><path d="M512 0C228.903385 0 0 228.903385 0 512s228.903385 512 512 512 512-228.903385 512-512S795.096615 0 512 0z m42.968615 938.653538V883.396923c0-27.608615-21.464615-46.040615-46.040615-46.040615-24.536615 0-46.040615 21.504-46.040615 46.08v55.21723c-196.450462-21.464615-356.036923-181.090462-377.540923-377.540923H140.603077c24.536615 0 46.040615-21.504 46.040615-46.08 0-24.536615-21.504-46.001231-46.08-46.00123H85.385846c18.392615-199.522462 178.018462-362.220308 377.540923-383.684923v61.36123c0 24.576 21.504 46.08 46.08 46.08 24.536615 0 46.001231-21.504 46.001231-46.08V85.346462c202.594462 21.464615 365.292308 181.090462 383.684923 383.684923h-61.361231c-27.648 0-46.08 18.392615-46.08 46.040615 0 24.536615 21.504 46.040615 46.08 46.040615h61.361231c-21.464615 199.522462-184.162462 359.148308-383.684923 377.540923z" fill="#437DFF" p-id="4320"></path><path d="M499.396923 291.170462a19.692308 19.692308 0 0 1 25.245539 0.039384l2.520615 2.520616 9.964308 12.169846C625.427692 414.208 669.538462 495.340308 669.538462 549.218462 669.538462 637.44 599.04 708.923077 512 708.923077s-157.538462-71.483077-157.538462-159.704615c0-49.900308 37.809231-123.155692 113.506462-219.72677l18.904615-23.630769 9.964308-12.130461a19.692308 19.692308 0 0 1 2.599385-2.56z m12.603077 110.434461l-9.570462 13.075692-13.23323 18.747077-11.815385 17.644308C447.763692 496.679385 433.230769 530.313846 433.230769 549.218462c0 44.937846 35.524923 80.935385 78.769231 80.935384 43.244308 0 78.769231-35.997538 78.769231-80.935384 0-16.305231-11.027692-43.992615-33.437539-81.053539l-10.318769-16.462769a790.843077 790.843077 0 0 0-11.697231-17.565539l-13.115077-18.668307-10.200615-13.863385z" fill="#437DFF" p-id="4321"></path></svg>
+        <img src="./static/images/lottery.png" width="100" height="100" />
     </a>
-</p>
 
 # log-lottery 🚀🚀🚀🚀
 
+[![MIT](https://img.shields.io/github/package-json/v/log1997/log-lottery)](https://github.com/LOG1997/log-lottery)
 [![MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/LOG1997/log-lottery)
 [![github](https://img.shields.io/badge/Author-log1997-blue.svg)](https://github.com/log1997)
-[![vue3](https://img.shields.io/badge/VUE-3.0-green.svg)](https://github.com/log1997)
+[![vue3](https://img.shields.io/badge/VUE-3-green.svg)](https://github.com/log1997)
+[![build](https://img.shields.io/github/actions/workflow/status/log1997/log-lottery/node.js.yml)](https://github.com/log1997)
+
+</div>
 
 log-lottery是一个可配置可定制化的抽奖应用，炫酷3D球体，可用于年会抽奖等活动，支持奖品、人员、界面、图片音乐配置。
 
 > 因原域名到期，现将原域名 (<https://24years.top/log-lottery>)
 迁移到 (<https://1kw20.fun/log-lottery>) 。
-如果进入到新域名遇到图片无法访问的情况，请到【全局配置】-【界面配置】菜单中点击【重置所有数据】按钮进行更新
+
+> 如果进入网站遇到图片无法显示或有报错的情况，请先到【全局配置】-【界面配置】菜单中点击【重置所有数据】按钮清除数据后进行更新。
+
+> 请尽量拉取代码进行构建部署，本线上网站代码会保持更新，可能影响原有功能和数据。
 
 ## 要求
 
@@ -38,10 +44,13 @@ or
 - [x] 🖼️ excel表格导入人员名单、抽奖结果使用excel导出
 - [x] 🎈 可增加临时抽奖
 - [x] 🧨 国际化多语言
-- [ ] 添加docker构建部署和镜像
+- [x] 🍃 更换背景图片
-- [ ] 更换背景图片
+- [x] 🚅 添加docker构建
+- [x] 😘 弹幕（开发中）
+- [ ] 🧵 卡片组成多种形状
+
 ...
-需要更多功能请留言
+需要更多功能或发现bug请留言[issues](https://github.com/LOG1997/log-lottery/issues)
 
 ## 详细介绍
 
@@ -105,24 +114,64 @@ or
 
 ```bash
 pnpm i
+or
+npm install
 ```
 
 开发运行
 
 ```bash
 pnpm dev
+or
+npm run dev
 ```
 
 打包
 
 ```bash
 pnpm build
+or
+npm run build
+```
+
+预览
+
+```bash
+pnpm preview
+or
+npm run preview
+```
+
+若想直接以打开html文件的方式运行，请执行以下命令进行打包。打包完成后在dist目录中直接打开index.html即可。
+
+```bash
+pnpm build:file
+or
+npm run build:file
 ```
 
 > 项目思路来源于 <https://github.com/moshang-xc/lottery>
 
+## Docker支持
+
+构建镜像
+
+```bash
+docker build -t log-lottery .
+```
+
+运行容器
+
+```bash
+docker run -d -p 9279:80 log-lottery
+```
+
+容器运行成功后即可在本地通过<http://localhost:9279/log-lottery/>访问
+
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=LOG1997/log-lottery&type=Date)](https://star-history.com/#LOG1997/log-lottery&Date)
+
 ## License
 
 [MIT](http://opensource.org/licenses/MIT)
-
-Copyright (c) 2024-present log1997

eslint.config.js

@@ -2,11 +2,6 @@ import antfu from '@antfu/eslint-config'
 
 export default antfu(
   {
-        ignores: ['**/node_modules', '**/public', '**/dist', '**/package.json', '**/*.yaml', '**/.gitignore', '**/.env*', '**/tsconfig*']
+    ignores: ['**/node_modules', '**/public', '**/dist', '**/package.json', '**/*.yaml', '**/.gitignore', '**/.env*', '**/tsconfig*'],
-    },
-    {
-        rules: {
-          "no-console": [1],
-        },
   },
 )

package.json

@@ -1,13 +1,14 @@
 {
     "name": "log-lottery",
     "private": true,
-    "version": "0.0.2",
+    "version": "0.0.3",
     "type": "module",
     "license": "MIT",
     "scripts": {
         "dev": "vite --host 0.0.0.0",
         "build": "vue-tsc --noEmit && vite build",
         "build:pre": "vue-tsc --noEmit && vite build --mode prebuild",
+        "build:file": "vue-tsc --noEmit && vite build --mode file",
         "test": "vitest",
         "test:ui": "vitest --ui",
         "preview": "vite preview",
@@ -52,6 +53,7 @@
         "@types/three": "^0.166.0",
         "@typescript-eslint/eslint-plugin": "^8.16.0",
         "@typescript-eslint/parser": "^8.16.0",
+        "@vitejs/plugin-legacy": "^6.0.0",
         "@vitejs/plugin-vue": "^5.2.0",
         "@vitest/ui": "^2.1.5",
         "@vue/test-utils": "^2.4.6",

src/components/StarsBackground/index.vue

@@ -1,27 +1,56 @@
 <script setup lang='ts'>
-import { useElementSize } from '@vueuse/core'
+import Sparticles from 'sparticles';
-import Sparticles from 'sparticles'
+import { ref, onMounted, onUnmounted } from 'vue';
-import { onMounted, onUnmounted, ref } from 'vue'
+import { useElementSize } from '@vueuse/core';
+import localforage from 'localforage'
+const props = defineProps({
+    homeBackground: {
+        type: Object,
+        default: () => ({
+            id: '',
+            name: '',
+            url: ''
+        })
+    }
+})
+const imageDbStore = localforage.createInstance({
+    name: 'imgStore'
+})
+const imgUrl = ref('')
+const starRef = ref();
 
-const starRef = ref()
+const { width, height } = useElementSize(starRef);
-
+let options = ref({ shape: 'star', parallax: 1.2, rotate: true, twinkle: true, speed: 10, count: 200 });
-const { width, height } = useElementSize(starRef)
-const options = ref({ shape: 'star', parallax: 1.2, rotate: true, twinkle: true, speed: 10, count: 200 })
 function addSparticles(node: any, width: number, height: number) {
-  // eslint-disable-next-line no-new
+    new Sparticles(node, options.value, width, height);
-  new Sparticles(node, options.value, width, height)
 }
 // 页面大小改变时
-function listenWindowSize() {
+const listenWindowSize = () => {
     window.addEventListener('resize', () => {
         if (width.value && height.value) {
-      addSparticles(starRef.value, width.value, height.value)
+            addSparticles(starRef.value, width.value, height.value);
         }
-  })
+    });
 }
 
+const getImageStoreItem = async (item: any): Promise<string> => {
+    let image = ''
+    if (item.url == 'Storage') {
+        const key = item.id;
+        image = await imageDbStore.getItem(key) as string
+    }
+    else {
+        image = item.url
+    }
+
+
+    return image
+}
 onMounted(() => {
-  addSparticles(starRef.value, width.value, height.value)
+    getImageStoreItem(props.homeBackground).then((image) => {
+        imgUrl.value = image
+    })
+    addSparticles(starRef.value, width.value, height.value);
     listenWindowSize()
 })
 onUnmounted(() => {
@@ -30,7 +59,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="starRef" class="w-screen h-screen overflow-hidden bg-transparent" />
+    <div class="home-background w-screen h-screen overflow-hidden" v-if="homeBackground.url">
+        <img :src="imgUrl" class="w-full h-full object-cover" alt="">
+    </div>
+    <div v-else class="w-screen h-screen overflow-hidden" ref="starRef">
+    </div>
 </template>
 
-<style lang='scss' scoped></style>
+<style lang='scss' scoped>
+
+</style>

src/hooks/useElement.ts

@@ -1,21 +1,21 @@
 import type { IPersonConfig } from '@/types/storeType'
 import { rgba } from '@/utils/color'
 
-export function useElementStyle(element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky' | 'sphere' = 'default') {
+export const useElementStyle = (element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky' | 'sphere' = 'default') => {
-  if (patternList.includes(index + 1) && mod === 'default') {
+    if (patternList.includes(index + 1) && mod == 'default') {
         element.style.backgroundColor = rgba(patternColor, Math.random() * 0.2 + 0.8)
     }
-  else if (mod === 'sphere' || mod === 'default') {
+    else if (mod == 'sphere' || mod == 'default') {
         element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
     }
-  else if (mod === 'lucky') {
+    else if (mod == 'lucky') {
         element.style.backgroundColor = rgba(cardColor, 0.8)
     }
     element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
     element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
-  element.style.width = `${cardSize.width}px`
+    element.style.width = `${cardSize.width}px`;
-  element.style.height = `${cardSize.height}px`
+    element.style.height = `${cardSize.height}px`;
-  if (mod === 'lucky') {
+    if (mod == 'lucky') {
         element.className = 'lucky-element-card'
     }
     else {
@@ -32,9 +32,9 @@ export function useElementStyle(element: any, person: IPersonConfig, index: numb
         target.style.border = `1px solid ${rgba(cardColor, 0.25)}`
         target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
     })
-  element.children[0].style.fontSize = `${textSize * 0.5}px`
+    element.children[0].style.fontSize = textSize * 0.5 + 'px';
     if (person.uid) {
-    element.children[0].textContent = person.uid
+        element.children[0].textContent = person.uid;
     }
 
   element.children[1].style.fontSize = `${textSize}px`
@@ -52,33 +52,24 @@ export function useElementStyle(element: any, person: IPersonConfig, index: numb
   return element
 }
 
-// export const useElementPosition=(element:any,count:number,cardSize:{width:number,height:number},windowSize:{width:number,height:number},cardIndex:number)=>{
+/**
-//     const centerPosition={
+ * @description 设置抽中卡片的位置
-//         x:0,
+ * 最少一个，最大十个
-//         y:windowSize.height/2-cardSize.height/2
+ */
-//     }
+// TODO:不超过5个时：单行排列；超过5个时，6：上3下3；7：上3下4；8：上3下5；9：上4下5；10：上5下5
-//   const index =cardIndex%5
+export const useElementPosition = (element: any, count: number, totalCount: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) => {
-//     if(index==0){
-//         element.position.x=centerPosition.x
-//         element.position.y=centerPosition.y-Math.floor(cardIndex/5)*(cardSize.height+60)
-//     }
-//     else{
-//         element.position.x=index%2===0?Math.ceil(index/2)*(cardSize.width+100):-Math.ceil(index/2)*(cardSize.width+100)
-//         element.position.y=centerPosition.y-Math.floor(cardIndex/5)*(cardSize.height+60)
-//     }
-
-//     return element
-// }
-
-export function useElementPosition(element: any, count: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) {
     let xTable = 0
     let yTable = 0
     const centerPosition = {
         x: 0,
-    y: windowSize.height / 2 - cardSize.height / 2,
+        y: windowSize.height / 2 - cardSize.height / 2
     }
+    // 有一行为偶数的特殊数量
+    const specialPosition = [2, 4, 7, 9]
+    // 不包含特殊值的 和 分两行中第一行为奇数值的
+    if (!specialPosition.includes(totalCount) || (totalCount > 5 && cardIndex < 5)) {
         const index = cardIndex % 5
-  if (index === 0) {
+        if (index == 0) {
             xTable = centerPosition.x
             yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
         }
@@ -86,6 +77,17 @@ export function useElementPosition(element: any, count: number, cardSize: { widt
             xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) : -Math.ceil(index / 2) * (cardSize.width + 100)
             yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
         }
-
+    }
+    else {
+        const index = cardIndex % 5
+        if (index == 0) {
+            xTable = centerPosition.x + (cardSize.width + 100) / 2
+            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
+        }
+        else {
+            xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) + (cardSize.width + 100) / 2 : -(Math.ceil(index / 2) * (cardSize.width + 100)) + (cardSize.width + 100) / 2
+            yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
+        }
+    }
     return { xTable, yTable }
 }

src/locales/en.ts

@@ -80,6 +80,7 @@ export default {
     patternSetting: 'Pattern Setting',
     alwaysDisplay: 'Always Display Prize List',
     selectPicture: 'Select a Picture',
+    backgroundImage: 'Select Background Image',
   },
   dialog: {
     titleTip: 'Tip!',
@@ -118,6 +119,7 @@ export default {
     notImage: 'Not Image',
     personIsAllDone: 'All Person Is Done',
     personNotEnough: 'Person Is Not Enough',
+    startDraw: 'Now Draw {count} {leftover} people',
     completeInformation: 'Please provide complete information',
   },
   placeHolder: {

src/locales/zhCn.ts

@@ -80,6 +80,7 @@ export default {
     patternSetting: '图案设置',
     alwaysDisplay: '常显奖项列表',
     selectPicture: '选择一张图片',
+    backgroundImage: '选择背景图片',
   },
   dialog: {
     titleTip: '提示!',

src/router/index.ts

@@ -1,7 +1,7 @@
 import Layout from '@/layout/index.vue'
 import i18n from '@/locales/i18n'
 import Home from '@/views/Home/index.vue'
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
 
 export const configRoutes = {
   path: '/log-lottery/config',
@@ -131,10 +131,11 @@ const routes = [
       configRoutes,
     ],
   },
-]
+];
-
+const envMode=import.meta.env.MODE;
 const router = createRouter({
-  history: createWebHistory(),
+    // 读取环境变量
+  history: envMode==='file'?createWebHashHistory():createWebHistory(),
   routes,
 })
 

src/store/globalConfig.ts

@@ -22,6 +22,7 @@ export const useGlobalConfig = defineStore('global', {
           textSize: 30,
           patternColor: '#1b66c9',
           patternList: defaultPatternList as number[],
+          background: {}, // 背景颜色或图片
         },
         musicList: defaultMusicList as IMusic[],
         imageList: defaultImageList as IImage[],
@@ -100,6 +101,10 @@ export const useGlobalConfig = defineStore('global', {
     getLanguage(state) {
       return state.globalConfig.language
     },
+    // 获取背景图片设置
+    getBackground(state) {
+      return state.globalConfig.theme.background
+    },
   },
   actions: {
     // 设置rowCount
@@ -218,6 +223,10 @@ export const useGlobalConfig = defineStore('global', {
       this.globalConfig.language = language
       i18n.global.locale.value = language
     },
+    // 设置背景图片
+    setBackground(background: any) {
+      this.globalConfig.theme.background = background
+    },
     // 重置所有配置
     reset() {
       this.globalConfig = {
@@ -236,6 +245,7 @@ export const useGlobalConfig = defineStore('global', {
           textSize: 30,
           patternColor: '#1b66c9',
           patternList: defaultPatternList as number[],
+          background: {}, // 背景颜色或图片
         },
         musicList: defaultMusicList as IMusic[],
         imageList: defaultImageList as IImage[],

src/utils/color.ts

@@ -39,3 +39,33 @@ export function rgba(color: string, opacity: number) {
 
   return rgbaStr
 }
+
+export function rgbToHex(color:string) {
+   // 去掉字符串中的空格
+   color = color.replace(/\s+/g, '');
+
+   // 匹配rgba或rgb格式的字符串
+   const rgbaMatch = color.match(/^rgba?\((\d+),(\d+),(\d+),?(\d*\.?\d+)?\)$/i);
+   if (!rgbaMatch) {
+       throw new Error('Invalid color format');
+   }
+
+   const r = parseInt(rgbaMatch[1], 10);
+   const g = parseInt(rgbaMatch[2], 10);
+   const b = parseInt(rgbaMatch[3], 10);
+   const a = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : undefined;
+
+   // 将RGB值转换为十六进制
+   let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+
+   // 如果提供了alpha值，则将其转换为十六进制并附加到结果中
+   if (a !== undefined) {
+       let alphaHex = Math.round(a * 255).toString(16).toUpperCase();
+       if (alphaHex.length === 1) {
+           alphaHex = "0" + alphaHex; // 确保alpha值是两位数
+       }
+       hex += alphaHex;
+   }
+
+   return hex;
+}

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>
 

vite.config.ts

@@ -2,6 +2,7 @@
 
 import { createRequire } from 'node:module'
 import path from 'node:path'
+import legacy from '@vitejs/plugin-legacy'
 import vue from '@vitejs/plugin-vue'
 import { visualizer } from 'rollup-plugin-visualizer'
 import AutoImport from 'unplugin-auto-import/vite'
@@ -22,10 +23,15 @@ export default defineConfig(({ mode }) => {
   const chunkName = mode === 'prebuild' ? '[name]' : 'chunk'
 
   return {
-    base: '/log-lottery/',
+    base: mode === 'file' ? './' : '/log-lottery/',
     plugins: [
       vue(),
-      vueDevTools(),
+      mode === 'file'
+        ? legacy({
+            additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
+          })
+        : null,
+      // vueDevTools(),
       viteCompression({
         verbose: true,
         disable: false,
@@ -91,7 +97,7 @@ export default defineConfig(({ mode }) => {
           // 是否跨域
           changeOrigin: true,
           // 路径重写
-                    rewrite: (path) => path.replace(/^\/api/, ''),
+          rewrite: path => path.replace(/^\/api/, ''),
         },
       },
     },
@@ -104,7 +110,7 @@ export default defineConfig(({ mode }) => {
       minify: 'terser',
       terserOptions: {
         compress: {
-                    //生产环境时移除console
+          // 生产环境时移除console
           drop_console: true,
           drop_debugger: true,
         },
@@ -124,7 +130,7 @@ export default defineConfig(({ mode }) => {
                 .toString()
                 .split('node_modules/')[1]
                 .split('/')[0]
-                                .toString();
+                .toString()
             }
           },
         },
@@ -140,5 +146,5 @@ export default defineConfig(({ mode }) => {
         web: [/\.[jt]sx$/],
       },
     },
-    };
+  }
-});
+})