feat: ✨ 设置最多抽30人的卡片排列

src/hooks/useElement.ts

@@ -1,100 +0,0 @@
-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', type: 'add' | 'change' = 'add') {
-    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'
-    }
-    if (type === 'add') {
-        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`
-    element.children[1].style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
-    if (person.name) {
-        element.children[1].textContent = person.name
-    }
-    // element.children[2].style.fontSize = `${textSize * 0.5}px`
-    // if (person.department || person.identity) {
-    //     element.children[2].innerHTML = `${person.department ? person.department : ''}<br/>${person.identity ? person.identity : ''}`
-    // }
-
-    element.children[2].style.fontSize = `${textSize * 0.5}px`
-    // 设置部门和身份的默认值
-    element.children[2].innerHTML = ''
-    if (person.department || person.identity) {
-        element.children[2].innerHTML = `${person.department ? person.department : ''}<br/>${person.identity ? person.identity : ''}`
-    }
-    element.children[3].src = person.avatar
-    return element
-}
-
-/**
- * @description 设置抽中卡片的位置
- * 最少一个，最大十个
- */
-// TODO:不超过5个时：单行排列；超过5个时，6：上3下3；7：上3下4；8：上3下5；9：上4下5；10：上5下5
-export function 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 * 0.9,
-    }
-    // 有一行为偶数的特殊数量
-    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 }
-}

src/hooks/useElement/index.ts

@@ -0,0 +1,323 @@
+import type { IPersonConfig } from '@/types/storeType'
+import { rgba } from '@/utils/color'
+
+interface IUseElementStyle {
+    element: any
+    person: IPersonConfig
+    index: number
+    patternList: number[]
+    patternColor: string
+    cardColor: string
+    cardSize: { width: number, height: number }
+    scale: number
+    textSize: number
+    mod: 'default' | 'lucky' | 'sphere'
+    type?: 'add' | 'change'
+
+}
+export function useElementStyle(props: IUseElementStyle) {
+    const { element, person, index, patternList, patternColor, cardColor, cardSize, scale, textSize, mod, type } = props
+    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 * scale}px`
+    element.style.height = `${cardSize.height * scale}px`
+    if (mod === 'lucky') {
+        element.className = 'lucky-element-card'
+    }
+    else {
+        element.className = 'element-card'
+    }
+    if (type === 'add') {
+        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 * scale * 0.5}px`
+    if (person.uid) {
+        element.children[0].textContent = person.uid
+    }
+
+    element.children[1].style.fontSize = `${textSize * scale}px`
+    element.children[1].style.lineHeight = `${textSize * scale * 3}px`
+    element.children[1].style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
+    if (person.name) {
+        element.children[1].textContent = person.name
+    }
+
+    element.children[2].style.fontSize = `${textSize * scale * 0.5}px`
+    // 设置部门和身份的默认值
+    element.children[2].innerHTML = ''
+    if (person.department || person.identity) {
+        element.children[2].innerHTML = `${person.department ? person.department : ''}<br/>${person.identity ? person.identity : ''}`
+    }
+    element.children[3].src = person.avatar
+    return element
+}
+interface CardRule {
+    [key: number]: {
+        maxLine: number
+        scale: number
+        rule: number[]
+        length: number
+    }
+}
+const cardRule: CardRule = {
+    1: {
+        maxLine: 5,
+        scale: 2,
+        rule: [1],
+        length: 1,
+    },
+    2: {
+        maxLine: 5,
+        scale: 2,
+        rule: [2],
+        length: 1,
+    },
+    3: {
+        maxLine: 5,
+        scale: 2,
+        rule: [3],
+        length: 1,
+    },
+    4: {
+        maxLine: 5,
+        scale: 2,
+        rule: [4],
+        length: 1,
+    },
+    5: {
+        maxLine: 5,
+        scale: 2,
+        rule: [5],
+        length: 1,
+    },
+    6: {
+        maxLine: 3,
+        scale: 2,
+        rule: [3, 3],
+        length: 2,
+    },
+    7: {
+        maxLine: 4,
+        scale: 2,
+        rule: [3, 4],
+        length: 2,
+    },
+    8: {
+        maxLine: 5,
+        scale: 2,
+        rule: [3, 5],
+        length: 2,
+    },
+    9: {
+        maxLine: 5,
+        scale: 2,
+        rule: [4, 5],
+        length: 2,
+    },
+    10: {
+        maxLine: 5,
+        scale: 2,
+        rule: [5, 5],
+        length: 2,
+    },
+    11: {
+        maxLine: 6,
+        scale: 1.8,
+        rule: [5, 6],
+        length: 2,
+    },
+    12: {
+        maxLine: 6,
+        scale: 1.8,
+        rule: [6, 6],
+        length: 2,
+    },
+    13: {
+        maxLine: 7,
+        scale: 1.6,
+        rule: [6, 7],
+        length: 2,
+    },
+    14: {
+        maxLine: 7,
+        scale: 1.6,
+        rule: [7, 7],
+        length: 2,
+    },
+    15: {
+        maxLine: 8,
+        scale: 1.5,
+        rule: [7, 8],
+        length: 2,
+    },
+    16: {
+        maxLine: 8,
+        scale: 1.5,
+        rule: [8, 8],
+        length: 2,
+    },
+    17: {
+        maxLine: 6,
+        scale: 1.8,
+        rule: [5, 6, 6],
+        length: 3,
+    },
+    18: {
+        maxLine: 6,
+        scale: 1.8,
+        rule: [6, 6, 6],
+        length: 3,
+    },
+    19: {
+        maxLine: 7,
+        scale: 1.6,
+        rule: [6, 6, 7],
+        length: 3,
+    },
+    20: {
+        maxLine: 5,
+        scale: 1.6,
+        rule: [6, 7, 7],
+        length: 3,
+    },
+    21: {
+        maxLine: 7,
+        scale: 1.6,
+        rule: [7, 7, 7],
+        length: 3,
+    },
+    22: {
+        maxLine: 8,
+        scale: 1.5,
+        rule: [7, 7, 8],
+        length: 3,
+    },
+    23: {
+        maxLine: 8,
+        scale: 1.5,
+        rule: [7, 8, 8],
+        length: 3,
+    },
+    24: {
+        maxLine: 8,
+        scale: 1.5,
+        rule: [8, 8, 8],
+        length: 3,
+    },
+    25: {
+        maxLine: 9,
+        scale: 1.3,
+        rule: [8, 8, 9],
+        length: 3,
+    },
+    26: {
+        maxLine: 9,
+        scale: 1.3,
+        rule: [8, 9, 9],
+        length: 3,
+    },
+    27: {
+        maxLine: 9,
+        scale: 1.3,
+        rule: [9, 9, 9],
+        length: 3,
+    },
+    28: {
+        maxLine: 10,
+        scale: 1.2,
+        rule: [9, 9, 10],
+        length: 3,
+    },
+    29: {
+        maxLine: 10,
+        scale: 1.2,
+        rule: [9, 10, 10],
+        length: 3,
+    },
+    30: {
+        maxLine: 10,
+        scale: 1.2,
+        rule: [10, 10, 10],
+        length: 3,
+    },
+}
+/**
+ * @description 设置抽中卡片的位置
+ */
+export function useElementPosition(
+    element: any,
+    count: number,
+    totalCount: number,
+    cardSize: { width: number, height: number },
+    windowSize: { width: number, height: number },
+    cardIndex: number,
+): {
+    xTable: number
+    yTable: number
+    scale: number
+} {
+    let xTable = 0
+    let yTable = 0
+    const centerPosition = {
+        x: 0,
+        y: windowSize.height / 2,
+    }
+    const { scale, rule, length } = cardRule[totalCount]
+    // 计算缩放后的卡片尺寸
+    const scaledCardWidth = cardSize.width * scale
+    const scaledCardHeight = cardSize.height * scale
+    // 计算当前卡片在第几行（从0开始）
+    let currentRow = 0
+    let cardIndexInRow = cardIndex // 当前卡片在其所在行中的索引
+
+    // 根据规则确定卡片在哪一行及行内索引
+    let cumulativeCount = 0
+    for (let i = 0; i < rule.length; i++) {
+        if (cardIndex < cumulativeCount + rule[i]) {
+            currentRow = i
+            cardIndexInRow = cardIndex - cumulativeCount
+            break
+        }
+        cumulativeCount += rule[i]
+    }
+
+    // 计算当前行的卡片数量
+    const cardsInCurrentRow = rule[currentRow]
+
+    // 计算每行的垂直中心位置
+    const verticalSpacing = scaledCardHeight * 1.1 // 垂直间距基于缩放后的高度
+    // 计算整体高度并调整居中
+    const totalHeight = (length - 1) * verticalSpacing + scaledCardHeight // 包含卡片本身的高度
+    const centerYOffset = -totalHeight / 2
+
+    // 修改此处逻辑，确保当length=2时，两行围绕中心点对称分布
+    centerPosition.y = windowSize.height / 2 - totalHeight / 2
+
+    yTable = centerPosition.y + currentRow * verticalSpacing + centerYOffset + scaledCardHeight / 2 // 添加卡片高度的一半作为修正
+    // 计算当前行的水平居中偏移
+    const horizontalSpacing = scaledCardWidth * 1.2 // 水平间距基于缩放后的宽度
+    const rowWidth = (cardsInCurrentRow - 1) * horizontalSpacing
+    const offsetX = -rowWidth / 2 // 行内水平居中
+
+    xTable = centerPosition.x + offsetX + cardIndexInRow * horizontalSpacing
+
+    return { xTable, yTable, scale }
+}

src/views/Home/useViewModel.ts

@@ -146,7 +146,19 @@ export function useViewModel() {
                 element.appendChild(avatarEmpty)
             }
 
-            element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value)
+            element = useElementStyle({
+                element,
+                person: tableData.value[i],
+                index: i,
+                patternList: patternList.value,
+                patternColor: patternColor.value,
+                cardColor: cardColor.value,
+                cardSize: cardSize.value,
+                scale: 1,
+                textSize: textSize.value,
+                mod: 'default',
+            },
+            )
             const object = new CSS3DObject(element)
             object.position.x = Math.random() * 4000 - 2000
             object.position.y = Math.random() * 4000 - 2000
@@ -201,7 +213,18 @@ export function useViewModel() {
                         if (luckyCardList.value.length) {
                             luckyCardList.value.forEach((cardIndex: any) => {
                                 const item = objects.value[cardIndex]
-                                useElementStyle(item.element, {} as any, i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value, 'sphere')
+                                useElementStyle({
+                                    element: item.element,
+                                    person: {} as any,
+                                    index: i,
+                                    patternList: patternList.value,
+                                    patternColor: patternColor.value,
+                                    cardColor: cardColor.value,
+                                    cardSize: cardSize.value,
+                                    scale: 1,
+                                    textSize: textSize.value,
+                                    mod: 'sphere',
+                                })
                             })
                         }
                         luckyTargets.value = []
@@ -553,7 +576,14 @@ export function useViewModel() {
             luckyCardList.value.push(cardIndex)
             const totalLuckyCount = luckyTargets.value.length
             const item = objects.value[cardIndex]
-            const { xTable, yTable } = useElementPosition(item, rowCount.value, totalLuckyCount, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
+            const { xTable, yTable, scale } = useElementPosition(
+                item,
+                rowCount.value,
+                totalLuckyCount,
+                { width: cardSize.value.width, height: cardSize.value.height },
+                windowSize,
+                index,
+            )
             new TWEEN.Tween(item.position)
                 .to({
                     x: xTable,
@@ -562,7 +592,18 @@ export function useViewModel() {
                 }, 1200)
                 .easing(TWEEN.Easing.Exponential.InOut)
                 .onStart(() => {
-                    item.element = useElementStyle(item.element, person, cardIndex, patternList.value, patternColor.value, luckyColor.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, textSize.value * 2, 'lucky')
+                    item.element = useElementStyle({
+                        element: item.element,
+                        person,
+                        index: cardIndex,
+                        patternList: patternList.value,
+                        patternColor: patternColor.value,
+                        cardColor: luckyColor.value,
+                        cardSize: { width: cardSize.value.width, height: cardSize.value.height },
+                        scale,
+                        textSize: textSize.value,
+                        mod: 'lucky',
+                    })
                 })
                 .start()
                 .onComplete(() => {
@@ -691,7 +732,19 @@ export function useViewModel() {
                 if (!objects.value[cardRandomIndexArr[i]]) {
                     continue
                 }
-                objects.value[cardRandomIndexArr[i]].element = useElementStyle(objects.value[cardRandomIndexArr[i]].element, allPersonList.value[personRandomIndexArr[i]], cardRandomIndexArr[i], patternList.value, patternColor.value, cardColor.value, { width: cardSize.value.width, height: cardSize.value.height }, textSize.value, mod, 'change')
+                objects.value[cardRandomIndexArr[i]].element = useElementStyle({
+                    element: objects.value[cardRandomIndexArr[i]].element,
+                    person: allPersonList.value[personRandomIndexArr[i]],
+                    index: cardRandomIndexArr[i],
+                    patternList: patternList.value,
+                    patternColor: patternColor.value,
+                    cardColor: cardColor.value,
+                    cardSize: { width: cardSize.value.width, height: cardSize.value.height },
+                    textSize: textSize.value,
+                    scale: 1,
+                    mod,
+                    type: 'change',
+                })
             }
         }, 200)
     }