From 88cc7cd9668efc9217d41bc34822aa4df36eb23a Mon Sep 17 00:00:00 2001
From: bridge <wangxin4qiao@163.com>
Date: Sun, 11 Jan 2026 18:54:34 +0800
Subject: [PATCH] feat: add color to map avatar names

---
 web/src/components/game/AnimatedAvatar.vue |  9 ++++----
 web/src/components/panels/EventPanel.vue   | 26 ++++++++++++++++++++--
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/web/src/components/game/AnimatedAvatar.vue b/web/src/components/game/AnimatedAvatar.vue
index 92e669b..c6e063b 100644
--- a/web/src/components/game/AnimatedAvatar.vue
+++ b/web/src/components/game/AnimatedAvatar.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useTextures } from './composables/useTextures'
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { Graphics } from 'pixi.js'
 import type { AvatarSummary } from '../../types/core'
 import { useSharedTicker } from './composables/useSharedTicker'
+import { avatarIdToColor } from '../../utils/eventHelper'
 
 const props = defineProps<{
   avatar: AvatarSummary
@@ -101,11 +102,11 @@ const drawFallback = (g: Graphics) => {
     g.stroke({ width: 2, color: 0x000000 })
 }
 
-const nameStyle = {
+const nameStyle = computed(() => ({
     fontFamily: '"Microsoft YaHei", sans-serif',
     fontSize: 50,
     fontWeight: 'bold',
-    fill: '#ffffff',
+    fill: avatarIdToColor(props.avatar.id),
     stroke: { color: '#000000', width: 4 },
     align: 'center',
     dropShadow: {
@@ -115,7 +116,7 @@ const nameStyle = {
         distance: 2,
         alpha: 0.8
     }
-} as any
+} as any))
 
 function handlePointerTap() {
     emit('select', {
diff --git a/web/src/components/panels/EventPanel.vue b/web/src/components/panels/EventPanel.vue
index e598ede..210abdc 100644
--- a/web/src/components/panels/EventPanel.vue
+++ b/web/src/components/panels/EventPanel.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, watch, nextTick, onMounted } from 'vue'
+import { computed, ref, watch, nextTick, onMounted, h } from 'vue'
 import { useWorldStore } from '../../stores/world'
 import { NSelect, NSpin, NButton } from 'naive-ui'
-import { highlightAvatarNames, buildAvatarColorMap } from '../../utils/eventHelper'
+import type { SelectOption } from 'naive-ui'
+import { highlightAvatarNames, buildAvatarColorMap, avatarIdToColor } from '../../utils/eventHelper'
 import type { GameEvent } from '../../types/core'
 
 const worldStore = useWorldStore()
@@ -31,6 +32,25 @@ const filterOptions2 = computed(() =>
 // 直接使用 store 中的事件（已由 API 过滤）
 const displayEvents = computed(() => worldStore.events || [])
 
+// 渲染带颜色圆点的选项标签
+const renderLabel = (option: SelectOption) => {
+  if (option.value === 'all') return option.label as string
+  
+  const color = avatarIdToColor(option.value as string)
+  return h('div', { style: { display: 'flex', alignItems: 'center', gap: '6px' } }, [
+    h('span', {
+      style: {
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        backgroundColor: color,
+        flexShrink: 0
+      }
+    }),
+    option.label as string
+  ])
+}
+
 // 向上滚动加载更多
 function handleScroll(e: Event) {
   const el = e.target as HTMLElement
@@ -154,6 +174,7 @@ function renderEventContent(event: GameEvent): string {
         <n-select
           v-model:value="filterValue1"
           :options="filterOptions"
+          :render-label="renderLabel"
           size="tiny"
           class="event-filter"
         />
@@ -162,6 +183,7 @@ function renderEventContent(event: GameEvent): string {
           <n-select
             v-model:value="filterValue2"
             :options="filterOptions2"
+            :render-label="renderLabel"
             size="tiny"
             class="event-filter"
           />