feat(player,shared): 内置球员头像名称支持三语显示

apps/player/src/components/PlayerAvatarPicker.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { BUILTIN_PLAYERS, playerAvatarUrl } from '@thebet365/shared';
+import {
+  BUILTIN_PLAYERS,
+  playerAvatarUrl,
+  getPlayerDisplayName,
+  formatPlayerMeta,
+  getPlayerSearchTokens,
+} from '@thebet365/shared';
 
 const props = defineProps<{
   modelValue: string | null;
@@ -11,18 +17,13 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | null];
 }>();
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 const keyword = ref('');
 
 const filtered = computed(() => {
   const q = keyword.value.trim().toLowerCase();
   if (!q) return BUILTIN_PLAYERS;
-  return BUILTIN_PLAYERS.filter(
-    (p) =>
-      p.name.toLowerCase().includes(q) ||
-      p.country.toLowerCase().includes(q) ||
-      p.position.toLowerCase().includes(q),
-  );
+  return BUILTIN_PLAYERS.filter((p) => getPlayerSearchTokens(p).some((token) => token.includes(q)));
 });
 
 function select(key: string) {
@@ -51,9 +52,13 @@ function select(key: string) {
         :class="{ active: modelValue === player.id }"
         @click="select(player.id)"
       >
-        <img :src="playerAvatarUrl(player.id) ?? ''" :alt="player.name" class="picker-photo" />
-        <span class="picker-name">{{ player.name }}</span>
-        <span class="picker-meta">{{ player.position }} · {{ player.country }}</span>
+        <img
+          :src="playerAvatarUrl(player.id) ?? ''"
+          :alt="getPlayerDisplayName(player, locale)"
+          class="picker-photo"
+        />
+        <span class="picker-name">{{ getPlayerDisplayName(player, locale) }}</span>
+        <span class="picker-meta">{{ formatPlayerMeta(player, locale) }}</span>
       </button>
     </div>