apply-assistant-v3/pages/NEUIKit/components/Appellation.vue

<template>
  <span
    class="appellation"
    :style="{ color: color, fontSize: fontSize + 'px' }"
    >
      {{ appellation }}
      <span v-if="subtitle" style="color: orange;">{{ subtitle }}</span>
    </span
  >
</template>

<script lang="ts" setup>
import { autorun } from 'mobx'
import {
  onUnmounted,
  ref,
  defineProps,
  withDefaults,
} from '../utils/transformVue'

import { deepClone } from '../utils'

const appellation = ref('')

const { pid,account, teamId, ignoreAlias, nickFromMsg } = withDefaults(
  defineProps<{
    account: string
    teamId?: string
    ignoreAlias?: boolean
    nickFromMsg?: string
    color?: string
    fontSize?: number
    pid?: number
  }>(),
  {
    teamId: undefined,
    ignoreAlias: false,
    nickFromMsg: '-',
    color: '#333',
    fontSize: 16,
    pid:0
  }
)
const subtitle = ref('');
const uninstallAppellationWatch = autorun(() => {
  if(pid){
    async function getUserInfo() {
      try {
        const res = await uni.$UIKitStore.userStore.getUserActive(pid.split('|')[2])
        return res
      } catch (error) {
        console.error('getUserInfo error:', error)
      }
    }
    getUserInfo().then(res => {
      if(res.serverExtension){
        subtitle.value = '@' + JSON.parse(res.serverExtension).fullName;
      }else{
        subtitle.value = '';
      }
      appellation.value = res.name;
    })
  }else{
    appellation.value = deepClone(
      uni.$UIKitStore.uiStore.getAppellation({
        account,
        teamId,
        ignoreAlias,
        nickFromMsg,
      })
    )
  }
})
onUnmounted(() => {
  uninstallAppellationWatch()
})
</script>

<style scoped lang="scss">
.appellation {
  color: #333;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>