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

src/components/DaiysuiTable/index.vue

@@ -49,7 +49,7 @@ const actionsColumns = computed<any[]>(() => {
         <tr v-for="item in data" :key="item.id" class="hover">
           <th>{{ item.id }}</th>
           <td v-for="(column, index) in dataColumns" :key="index">
-            <span v-if="column.formatValue">{{ column.formatValue(item) }}</span>
+            <span v-if="column.formatValue" v-html="column.formatValue(item)"></span>
             <span v-else>{{ item[column.props] }}</span>
           </td>
           <!-- action -->

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',

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: '身份',

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: {

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