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 { account, teamId, ignoreAlias, nickFromMsg } = withDefaults(
  defineProps<{
    account: string
    teamId?: string
    ignoreAlias?: boolean
    nickFromMsg?: string
    color?: string
    fontSize?: number
  }>(),
  {
    teamId: undefined,
    ignoreAlias: false,
    nickFromMsg: '-',
    color: '#333',
    fontSize: 16,
  }
)
const subtitle = ref('');
const uninstallAppellationWatch = autorun(() => {
  async function getUserInfo() {
    try {
      const res = await uni.$UIKitStore.userStore.getUserActive('10023')
      return res
    } catch (error) {
      console.error('getUserInfo error:', error)
    }
  }
  getUserInfo().then(res => {
    console.log('getUserInfo 热死', res)
    if(res.serverExtension){
      subtitle.value = '@' + JSON.parse(res.serverExtension).fullName;
    }else{
      subtitle.value = '';
    }
    appellation.value = res.name;
  })
})
onUnmounted(() => {
  uninstallAppellationWatch()
})
</script>

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