From 6e0bdcba310d3889a438afbcf3156ef88021202b Mon Sep 17 00:00:00 2001 From: hujinbin <437044048@qq.com> Date: Wed, 15 Jan 2025 20:18:24 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=B4=E5=83=8F=E5=9B=BD=E9=99=85?= =?UTF-8?q?=E5=8C=96=E6=9B=B4=E6=96=B0=E5=92=8C=E5=90=8C=E6=AD=A5=E7=9A=84?= =?UTF-8?q?=E5=86=B2=E7=AA=81=E8=A7=A3=E5=86=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DaiysuiTable/index.vue | 2 +- src/locales/en.ts | 2 ++ src/locales/zhCn.ts | 2 ++ src/store/globalConfig.ts | 11 ++++++++++- src/views/Config/Global/FaceConfig.vue | 10 +++++++++- src/views/Config/Person/PersonAll.vue | 7 +++++++ src/views/Config/Person/PersonAlready.vue | 14 ++++++++++++++ src/views/Home/index.vue | 14 +++++++++++++- 8 files changed, 58 insertions(+), 4 deletions(-) diff --git a/src/components/DaiysuiTable/index.vue b/src/components/DaiysuiTable/index.vue index 30c0fa6..86d4f4d 100644 --- a/src/components/DaiysuiTable/index.vue +++ b/src/components/DaiysuiTable/index.vue @@ -49,7 +49,7 @@ const actionsColumns = computed(() => { {{ item.id }} - {{ column.formatValue(item) }} + {{ item[column.props] }} diff --git a/src/locales/en.ts b/src/locales/en.ts index a1b698b..e304819 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -79,6 +79,7 @@ export default { highlightColor: 'HighLight Color', patternSetting: 'Pattern Setting', alwaysDisplay: 'Always Display Prize List', + avatarDisplay: 'Show avatars or not', selectPicture: 'Select a Picture', backgroundImage: 'Select Background Image', }, @@ -132,6 +133,7 @@ export default { no: 'No', number: 'Number', isWin: 'isWin', + avatar: 'avatar', department: 'Department', name: 'Name', identity: 'Identity', diff --git a/src/locales/zhCn.ts b/src/locales/zhCn.ts index 1adf959..94b741d 100644 --- a/src/locales/zhCn.ts +++ b/src/locales/zhCn.ts @@ -79,6 +79,7 @@ export default { highlightColor: '高亮颜色', patternSetting: '图案设置', alwaysDisplay: '常显奖项列表', + avatarDisplay: '是否显示头像', selectPicture: '选择一张图片', backgroundImage: '选择背景图片', }, @@ -132,6 +133,7 @@ export default { no: '否', number: '编号', isWin: '是否中奖', + avatar: '头像', department: '部门', name: '姓名', identity: '身份', diff --git a/src/store/globalConfig.ts b/src/store/globalConfig.ts index 855bcb4..a483522 100644 --- a/src/store/globalConfig.ts +++ b/src/store/globalConfig.ts @@ -4,12 +4,12 @@ import { defineStore } from 'pinia' import { defaultImageList, defaultMusicList, defaultPatternList } from './data' // import { IPrizeConfig } from '@/types/storeType'; export const useGlobalConfig = defineStore('global', { - isShowAvatar: true, state() { return { globalConfig: { rowCount: 17, isSHowPrizeList: true, + isShowAvatar: true, topTitle: i18n.global.t('data.defaultTitle'), language: browserLanguage, theme: { @@ -106,6 +106,10 @@ export const useGlobalConfig = defineStore('global', { getBackground(state) { return state.globalConfig.theme.background }, + // 获取是否显示头像 + getIsShowAvatar(state) { + return state.globalConfig.isShowAvatar; + } }, actions: { // 设置rowCount @@ -227,12 +231,17 @@ export const useGlobalConfig = defineStore('global', { // 设置背景图片 setBackground(background: any) { this.globalConfig.theme.background = background + }, + // 设置是否显示头像 + setIsShowAvatar(isShowAvatar: boolean) { + this.globalConfig.isShowAvatar = isShowAvatar; }, // 重置所有配置 reset() { this.globalConfig = { rowCount: 17, isSHowPrizeList: true, + isShowAvatar: false, topTitle: i18n.global.t('data.defaultTitle'), language: browserLanguage, theme: { diff --git a/src/views/Config/Global/FaceConfig.vue b/src/views/Config/Global/FaceConfig.vue index e73dc42..480af30 100644 --- a/src/views/Config/Global/FaceConfig.vue +++ b/src/views/Config/Global/FaceConfig.vue @@ -17,7 +17,7 @@ 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, getBackground: backgroundImage, getImageList: imageList, +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, getIsShowAvatar: isShowAvatar } = storeToRefs(globalConfig) const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig) const colorPickerRef = ref() @@ -348,6 +348,14 @@ onMounted(() => { @change="isShowPrizeListValue = !isShowPrizeListValue" > + + diff --git a/src/views/Config/Person/PersonAll.vue b/src/views/Config/Person/PersonAll.vue index 3b8402e..f2732c6 100644 --- a/src/views/Config/Person/PersonAll.vue +++ b/src/views/Config/Person/PersonAll.vue @@ -95,6 +95,13 @@ const tableColumns = [ label: i18n.global.t('data.department'), props: 'department', }, + { + label: i18n.global.t('data.avatar'), + props: 'avatar', + formatValue(row: any) { + return row.avatar ? `avatar` : '-'; + } + }, { label: i18n.global.t('data.identity'), props: 'identity', diff --git a/src/views/Config/Person/PersonAlready.vue b/src/views/Config/Person/PersonAlready.vue index fb68e6a..04335d3 100644 --- a/src/views/Config/Person/PersonAlready.vue +++ b/src/views/Config/Person/PersonAlready.vue @@ -35,6 +35,13 @@ const tableColumnsList = [ label: i18n.global.t('data.name'), props: 'name', }, + { + label: i18n.global.t('data.avatar'), + props: 'avatar', + formatValue(row: any) { + return row.avatar ? `avatar` : '-'; + } + }, { label: i18n.global.t('data.department'), props: 'department', @@ -71,6 +78,13 @@ const tableColumnsDetail = [ label: i18n.global.t('data.number'), props: 'name', }, + { + label: i18n.global.t('data.avatar'), + props: 'avatar', + formatValue(row: any) { + return row.avatar ? `avatar` : '-'; + } + }, { label: i18n.global.t('data.department'), props: 'department', diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue index 154c6f3..e14d16c 100644 --- a/src/views/Home/index.vue +++ b/src/views/Home/index.vue @@ -30,7 +30,7 @@ const prizeConfig = useStore().prizeConfig 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, getBackground: homeBackground } = storeToRefs(globalConfig) +const { getTopTitle: topTitle, getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getBackground: homeBackground, getIsShowAvatar: isShowAvatar } = storeToRefs(globalConfig) const tableData = ref([]) const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态 const ballRotationY = ref(0) @@ -119,18 +119,30 @@ function init() { const number = document.createElement('div') number.className = 'card-id' number.textContent = tableData.value[i].uid + if(isShowAvatar.value) number.style.display = 'none' element.appendChild(number) const symbol = document.createElement('div') symbol.className = 'card-name' symbol.textContent = tableData.value[i].name + if(isShowAvatar.value) symbol.className = 'card-name card-avatar-name' element.appendChild(symbol) const detail = document.createElement('div') detail.className = 'card-detail' detail.innerHTML = `${tableData.value[i].department}
${tableData.value[i].identity}` + if(isShowAvatar.value) detail.style.display = 'none' element.appendChild(detail) + const avatar = document.createElement('img'); + avatar.className = 'card-avatar'; + avatar.src = tableData.value[i].avatar; + avatar.alt = 'avatar'; + avatar.style.width = '140px'; + avatar.style.height = '140px'; + if(!isShowAvatar.value) avatar.style.display = 'none' + element.appendChild(avatar); + element = useElementStyle(element, tableData.value[i], i, patternList.value, patternColor.value, cardColor.value, cardSize.value, textSize.value) const object = new CSS3DObject(element) object.position.x = Math.random() * 4000 - 2000