Merge pull request #61 from hujinbin/main

feat: 新增头像功能，可配置是否启用(#28)

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/hooks/useElement.ts

@@ -49,7 +49,12 @@ export function useElementStyle(element: any, person: IPersonConfig, index: numb
     element.children[2].innerHTML = `${person.department ? person.department : ''}<br/>${person.identity ? person.identity : ''}`
   }
 
-  return element
+    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[3].src = person.avatar
+    return element
 }
 
 /**

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

@@ -9,6 +9,7 @@ export const useGlobalConfig = defineStore('global', {
       globalConfig: {
         rowCount: 17,
         isSHowPrizeList: true,
+        isShowAvatar: true,
         topTitle: i18n.global.t('data.defaultTitle'),
         language: browserLanguage,
         theme: {
@@ -105,6 +106,10 @@ export const useGlobalConfig = defineStore('global', {
     getBackground(state) {
       return state.globalConfig.theme.background
     },
+     // 获取是否显示头像
+    getIsShowAvatar(state) {
+      return state.globalConfig.isShowAvatar;
+    }
   },
   actions: {
     // 设置rowCount
@@ -226,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/style/style.scss

@@ -4,8 +4,9 @@
     user-select: none;
     .card-id {
         position: absolute;
-        top: 20px;
+        top: 10px;
         right: 20px;
+        z-index: 2;
     }
 
     .card-name {
@@ -17,6 +18,15 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        z-index: 2;
+    }
+
+    .card-avatar-name{
+        top: auto;
+        bottom: 0;
+        left: 0px;
+        right: 0;
+        line-height: 2 !important;
     }
 
     .card-detail {
@@ -24,12 +34,24 @@
         left: 0;
         right: 0;
         bottom: 15px;
+        z-index: 2;
+    }
+
+    .card-avatar{
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        width: 140px !important;
+        height: auto !important;
+        object-fit: cover;
     }
 }
 
 .lucky-element-card {
     cursor: default;
-    text-align: center;
     &::before {
         background-color: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);
         border: 1px solid linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);
@@ -39,9 +61,12 @@
         position: absolute;
         top: 20px;
         right: 20px;
+        z-index: 2;
     }
 
     .card-name {
+        text-align: center;
+        z-index: 2;
         position: absolute;
         top: 40px;
         left: 0px;
@@ -59,6 +84,20 @@
         position: absolute;
         left: 0;
         right: 0;
+        text-align: center;
+        z-index: 2;
         bottom: 15px;
     }
+
+    .card-avatar{
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        width: 280px !important;
+        height: auto !important;
+        object-fit: cover;
+    }
 }

src/types/storeType.ts

@@ -1,17 +1,18 @@
 export interface IPersonConfig {
-  id: number
-  uid: string
-  name: string
-  department: string
-  identity: string
-  isWin: boolean
-  x: number
-  y: number
-  createTime: string
-  updateTime: string
-  prizeName: string[]
-  prizeId: string[]
-  prizeTime: string[]
+    id: number;
+    uid: string;
+    name: string;
+    department: string;
+    identity: string;
+    avatar: string;
+    isWin: boolean;
+    x: number;
+    y: number
+    createTime: string;
+    updateTime: string;
+    prizeName: string[];
+    prizeId: string[];
+    prizeTime: string[];
 }
 export interface Separate {
   id: string

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()
@@ -36,6 +36,7 @@ const textSizeValue = ref(structuredClone(textSize.value))
 const rowCountValue = ref(structuredClone(rowCount.value))
 const languageValue = ref(structuredClone(userLanguage.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)
@@ -156,6 +157,9 @@ watch(backgroundImageValue, (val) => {
 watch(languageValue, (val: string) => {
   globalConfig.setLanguage(val)
 })
+watch(isShowAvatarValue, () => {
+    globalConfig.setIsShowAvatar(isShowAvatarValue.value)
+})
 onMounted(() => {
 })
 </script>
@@ -344,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