feat: 头像全局配置功能

src/store/globalConfig.ts

@@ -8,6 +8,7 @@ export const useGlobalConfig = defineStore('global', {
             globalConfig: {
                 rowCount: 17,
                 isSHowPrizeList: true,
+                isShowAvatar: true,
                 topTitle: '大明内阁六部御前奏对',
                 theme: {
                     name: 'dracula',
@@ -93,8 +94,11 @@ export const useGlobalConfig = defineStore('global', {
         // 获取是否显示奖品列表
         getIsShowPrizeList(state) {
             return state.globalConfig.isSHowPrizeList;
+        },
+        // 获取是否显示头像
+        getIsShowAvatar(state) {
+            return state.globalConfig.isShowAvatar;
         }
-
     },
     actions: {
         // 设置rowCount
@@ -207,12 +211,17 @@ export const useGlobalConfig = defineStore('global', {
         // 设置是否显示奖品列表
         setIsShowPrizeList(isShowPrizeList: boolean) {
             this.globalConfig.isSHowPrizeList = isShowPrizeList;
+        },
+         // 设置是否显示头像
+        setIsShowAvatar(isShowAvatar: boolean) {
+            this.globalConfig.isShowAvatar = isShowAvatar;
         },
         // 重置所有配置
         reset() {
             this.globalConfig = {
                 rowCount: 17,
                 isSHowPrizeList: true,
+                isShowAvatar: false,
                 topTitle: '大明内阁六部御前奏对',
                 theme: {
                     name: 'dracula',

src/style/style.scss

@@ -21,6 +21,14 @@
         z-index: 2;
     }
 
+    .card-avatar-name{
+        top: auto;
+        bottom: 0;
+        left: 0px;
+        right: 0;
+        line-height: 2 !important;
+    }
+
     .card-detail {
         position: absolute;
         left: 0;

src/views/Config/Global/FaceConfig.vue

@@ -13,7 +13,7 @@ import PatternSetting from './components/PatternSetting.vue'
 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 } = 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, getIsShowAvatar: isShowAvatar } = storeToRefs(globalConfig)
 const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
 const colorPickerRef = ref()
 const resetDataDialogRef=ref()
@@ -30,6 +30,7 @@ const cardSizeValue = ref(structuredClone(cardSize.value))
 const textSizeValue = ref(structuredClone(textSize.value))
 const rowCountValue = ref(structuredClone(rowCount.value))
 const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
+const isShowAvatarValue = ref(structuredClone(isShowAvatar.value))
 const patternColorValue = ref(structuredClone(patternColor.value))
 const themeList = ref(Object.keys(daisyuiThemes))
 const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
@@ -142,9 +143,12 @@ watch(textColorValue, (val: string) => {
 watch(cardSizeValue, (val: { width: number; height: number; }) => {
     globalConfig.setCardSize(val)
 }, { deep: true }),
-    watch(isShowPrizeListValue, () => {
-        globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
-    })
+watch(isShowPrizeListValue, () => {
+    globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
+})
+watch(isShowAvatarValue, () => {
+    globalConfig.setIsShowAvatar(isShowAvatarValue.value)
+})
 onMounted(() => {
 })
 </script>
@@ -288,6 +292,14 @@ onMounted(() => {
                 class="mt-2 border-solid checkbox checkbox-secondary border-1" />
         </label>
 
+        <label class="w-full max-w-xs mb-10 form-control">
+            <div class="label">
+                <span class="label-text">是否显示头像</span>
+            </div>
+            <input type="checkbox" :checked="isShowAvatarValue" @change="isShowAvatarValue = !isShowAvatarValue"
+                class="mt-2 border-solid checkbox checkbox-secondary border-1" />
+        </label>
+
     </div>
 </template>
 

src/views/Home/index.vue

@@ -31,7 +31,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 } = storeToRefs(globalConfig)
+const { getTopTitle: topTitle, getCardColor: cardColor, getPatterColor: patternColor, getPatternList: patternList, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowAvatar: isShowAvatar } = storeToRefs(globalConfig)
 const tableData = ref<any[]>([])
 // const tableData = ref<any[]>(JSON.parse(JSON.stringify(alreadyPersonList.value)).concat(JSON.parse(JSON.stringify(notPersonList.value))))
 const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
@@ -119,16 +119,19 @@ const 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}<br/>${tableData.value[i].identity}`;
+        if(isShowAvatar.value) detail.style.display = 'none'
         element.appendChild(detail);
            
         const avatar = document.createElement('img');
@@ -137,6 +140,7 @@ const init = () => {
         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)