feat: 头像国际化更新和同步的冲突解决

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"
       >
     </label>
+
+    <label class="w-full max-w-xs mb-10 form-control">
+        <div class="label">
+            <span class="label-text">{{ t('table.avatarDisplay') }}</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/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 ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-';
+    }
+  },
   {
     label: i18n.global.t('data.identity'),
     props: 'identity',

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 ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-';
+    }
+  },
   {
     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 ? `<img src="${row.avatar}" alt="avatar" style="width: 50px; height: 50px;"/>` : '-';
+    }
+  },
   {
     label: i18n.global.t('data.department'),
     props: 'department',

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<any[]>([])
 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}<br/>${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