fix(user-head): modify mobile problem (#2699)

Author: James-9696

examples/sites/demos/mobile/app/user-head/basic-usage.vue

@@ -3,9 +3,9 @@
     <div class="title">尺寸</div>
     <div class="item-content">
       <tiny-user-head type="label" v-model="name" :size="80" round></tiny-user-head>
-      <tiny-user-head type="label" v-model="name" size="large" round></tiny-user-head>
-      <tiny-user-head type="label" v-model="name" size="medium" round></tiny-user-head>
-      <tiny-user-head type="label" v-model="namePrefix" size="small" round></tiny-user-head>
+      <tiny-user-head type="label" v-model="name" :size="70" round></tiny-user-head>
+      <tiny-user-head type="label" v-model="name" :size="60" round></tiny-user-head>
+      <tiny-user-head type="label" v-model="name" :size="50" round></tiny-user-head>
     </div>
 
     <div class="title">类型</div>
@@ -35,8 +35,7 @@ export default {
   data() {
     return {
       imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
-      name: '小明',
-      namePrefix: '小'
+      name: '小明'
     }
   }
 }

examples/sites/demos/mobile/app/user-head/custom-background-color.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-user-head type="icon" background-color="var(--ti-common-color-line-active)"></tiny-user-head>
+  <tiny-user-head type="icon" background-color="'#5E7CE0'"></tiny-user-head>
 </template>
 
 <script lang="jsx">

examples/sites/demos/mobile/app/user-head/webdoc/user-head.js

@@ -135,18 +135,6 @@ export default {
       },
       codeFiles: ['min-user-head.vue']
     },
-    {
-      demoId: 'render-user-head-in-grid',
-      name: {
-        'zh-CN': '渲染用户头像在网格中',
-        'en-US': 'button type'
-      },
-      desc: {
-        'zh-CN': '<p>渲染用户头像在网格中</p>',
-        'en-US': '<p>button type</p>'
-      },
-      codeFiles: ['render-user-head-in-grid.vue']
-    },
     {
       demoId: 'round-user-head',
       name: {

packages/mobile/components/user-head/src/renderless/index.ts

@@ -27,7 +27,7 @@ export const computedMessage =
   ({ props }: Pick<IUserHeadRenderlessParams, 'props'>) =>
   () => {
     let result = ''
-    const total = Math.floor(props.messageTotal || NaN)
+    const total = Math.floor(Number(props.messageTotal) || NaN)
 
     if (props.messageType === 'details' && !isNaN(total) && total > 0) {
       result = String(total)
@@ -65,11 +65,7 @@ export const computedFontSize =
         6: `${state.size / 9}px`
       }
 
-      if (mode === 'mobile-first') {
-        fontSize = mfsizeMap[length]
-      } else {
-        fontSize = sizeMap[length]
-      }
+      fontSize = sizeMap[length]
     }
 
     return { fontSize }

packages/mobile/components/user-head/src/user-head.ts

@@ -12,9 +12,10 @@
 
 import type { ExtractPropTypes } from 'vue'
 import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from '../../../types/shared.type'
-export type { ISharedRenderlessParamHooks } from '../../../types/shared.type'
 import type { computedFontSize, computedLabel, computedMessage, computedStyle, getInternalValue } from './renderless'
 
+export type { ISharedRenderlessParamHooks } from '../../../types/shared.type'
+
 export const $constants = {
   ITEM_NAME: '.user-head-item'
 }
@@ -80,7 +81,7 @@ export const userHeadProps = {
   /**
    * @property {Number} - 消息计数
    */
-  messageTotal: Number,
+  messageTotal: [Number, String],
 
   /**
    * @property {String} [messageType=details] - 消息类型 details|basic 可选