shishengliang/log-lottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 合并main至dev

Browse Source
This commit is contained in:
LOG1997
2025-01-08 00:07:04 +08:00
parent 4e1fe3bd7c
commit 0e5eb525aa
20 changed files with 1599 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/StarsBackground/index.vue
View File

@@ -1,36 +1,71 @@
<script setup lang='ts'>
import { useElementSize } from '@vueuse/core'
import Sparticles from 'sparticles'
import { onMounted, onUnmounted, ref } from 'vue'
import Sparticles from 'sparticles';
import { ref, onMounted, onUnmounted } 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)
const options = ref({ shape: 'star', parallax: 1.2, rotate: true, twinkle: true, speed: 10, count: 200 })
const { width, height } = useElementSize(starRef);
let 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() {
window.addEventListener('resize', () => {
if (width.value && height.value) {
addSparticles(starRef.value, width.value, height.value)
}
})
const listenWindowSize = () => {
window.addEventListener('resize', () => {
if (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)
listenWindowSize()
getImageStoreItem(props.homeBackground).then((image) => {
imgUrl.value = image
})
addSparticles(starRef.value, width.value, height.value);
listenWindowSize()
})
onUnmounted(() => {
window.removeEventListener('resize', listenWindowSize)
window.removeEventListener('resize', listenWindowSize)
})
</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>

144
src/hooks/useElement.ts
View File

@@ -1,41 +1,41 @@
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') {
if (patternList.includes(index + 1) && mod === 'default') {
element.style.backgroundColor = rgba(patternColor, Math.random() * 0.2 + 0.8)
}
else if (mod === 'sphere' || mod === 'default') {
element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
}
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.height = `${cardSize.height}px`
if (mod === 'lucky') {
element.className = 'lucky-element-card'
}
else {
element.className = 'element-card'
}
// 等比放大
element.addEventListener('mouseenter', (ev: MouseEvent) => {
const target = ev.target as HTMLElement
target.style.border = `1px solid ${rgba(cardColor, 0.75)}`
target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
})
element.addEventListener('mouseleave', (ev: MouseEvent) => {
const target = ev.target as HTMLElement
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`
if (person.uid) {
element.children[0].textContent = person.uid
}
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') {
element.style.backgroundColor = rgba(patternColor, Math.random() * 0.2 + 0.8)
}
else if (mod == 'sphere' || mod == 'default') {
element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
}
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.height = `${cardSize.height}px`;
if (mod == 'lucky') {
element.className = 'lucky-element-card'
}
else {
element.className = 'element-card'
}
// 等比放大
element.addEventListener('mouseenter', (ev: MouseEvent) => {
const target = ev.target as HTMLElement
target.style.border = `1px solid ${rgba(cardColor, 0.75)}`
target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
})
element.addEventListener('mouseleave', (ev: MouseEvent) => {
const target = ev.target as HTMLElement
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';
if (person.uid) {
element.children[0].textContent = person.uid;
}
element.children[1].style.fontSize = `${textSize}px`
element.children[1].style.lineHeight = `${textSize * 3}px`
@@ -52,40 +52,42 @@ 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={
// x:0,
// y:windowSize.height/2-cardSize.height/2
// }
// const index =cardIndex%5
// 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,
}
const index = cardIndex % 5
if (index === 0) {
xTable = centerPosition.x
yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
}
else {
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)
}
return { xTable, yTable }
/**
* @description 设置抽中卡片的位置
* 最少一个，最大十个
*/
// TODO:不超过5个时：单行排列；超过5个时，6：上3下3；7：上3下4；8：上3下5；9：上4下5；10：上5下5
export const useElementPosition = (element: any, count: number, totalCount: 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
}
// 有一行为偶数的特殊数量
const specialPosition = [2, 4, 7, 9]
// 不包含特殊值的 和 分两行中第一行为奇数值的
if (!specialPosition.includes(totalCount) || (totalCount > 5 && cardIndex < 5)) {
const index = cardIndex % 5
if (index == 0) {
xTable = centerPosition.x
yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
}
else {
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 }
}

2
src/locales/en.ts
View File

@@ -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: {

1
src/locales/zhCn.ts
View File

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

9
src/router/index.ts
View File

@@ -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,
})

10
src/store/globalConfig.ts
View File

@@ -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[],

30
src/utils/color.ts
View File

@@ -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;
}

26
src/views/Config/Global/FaceConfig.vue
View File

@@ -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>

2
src/views/Config/Person/PersonAll.vue
View File

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

12
src/views/Home/index.vue
View File

@@ -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>