Confilct dev date 12 22 (#131)
* fix(home): 🐛 解决多次切换路由后页面卡顿的问题 #96 卸载路由时清除requestAnimationFrame * feat: ✨ 文件存储使用Blob格式 * style: 💄 修改部分类型any为具体类型 * feat: ✨ 界面设置中模块使用瀑布流布局 #96 * fix: 🐛 md文档更换文件夹解决控制台警告 * style: 💄 switch按钮改回使用daisyui组件 * refactor: ♻️ 所有人员列表提取tableColumn * style: 💄 奖项列表中的图片类型修复 * fix(globalConfig): 修复当前音乐项类型缺失问题 * feat: ✨ single person not done * feat: ✨ 可添加单人 #96 * build(.gitignore): 添加 auto-imports.d.ts 到忽略文件 * fix: 🐛 上传、下载excel文件时修复路径错误 打包成应用和网页端的baseUrl不一样，使用环境变量来表示 * fix: 🐛 导入人员列表时处理有值为空的情况 * style: 💄 改变toaster的组件 * fix: 🐛 上传文件、解析数据与存储/读取数据的处理 、
This commit is contained in:
LOG1997
GitHub
@@ -2,54 +2,56 @@ 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
|
||||
}
|
||||
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[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].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 : ''}`
|
||||
}
|
||||
@@ -63,36 +65,36 @@ export function useElementStyle(element: any, person: IPersonConfig, index: numb
|
||||
*/
|
||||
// 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 / 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)
|
||||
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 {
|
||||
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)
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
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 }
|
||||
return { xTable, yTable }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user