From 4f6ab39ed58d79891a664e67c4b5094b77f2b30a Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Fri, 3 Apr 2026 19:27:06 -0400
Subject: [PATCH] fix label ui

---
 src/components/ConversationView.vue | 44 ++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/ConversationView.vue b/src/components/ConversationView.vue
index 7c72dfb..a8fd9b9 100644
--- a/src/components/ConversationView.vue
+++ b/src/components/ConversationView.vue
@@ -3,7 +3,7 @@ import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue';
 import { 
   Plus, Search, Trash2, Send, User, Type, ChevronDown, Check, 
   MessageSquare, Loader2, Copy, 
-  X, Sparkles
+  X, Sparkles, Languages, Venus, Mars, CircleSlash
 } from 'lucide-vue-next';
 import { useSettingsStore, LANGUAGES, SPEAKER_IDENTITY_OPTIONS, TONE_REGISTER_OPTIONS, CONVERSATION_SYSTEM_PROMPT_TEMPLATE, type Participant } from '../stores/settings';
 import { cn } from '../lib/utils';
@@ -367,9 +367,24 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
             <!-- Partner Input (Left) -->
             <div class="flex flex-col gap-2">
               <div class="flex items-center justify-between px-1 h-7">
-                <div class="flex items-center gap-1.5 text-[10px] font-bold text-slate-400 uppercase">
-                  <User class="w-3 h-3" />
-                  {{ activeSession.partner.name }} 说 ({{ activeSession.partner.language.displayName }})
+                <div class="flex items-center gap-1">
+                  <!-- Name Badge -->
+                  <div class="flex items-center gap-1 px-1.5 py-0.5 bg-slate-100 dark:bg-slate-800 rounded text-[10px] font-bold text-slate-500 dark:text-slate-400">
+                    <User class="w-3 h-3" />
+                    {{ activeSession!.partner.name }}
+                  </div>
+                  <!-- Gender Badge -->
+                  <div class="flex items-center gap-1 px-1.5 py-0.5 bg-slate-100 dark:bg-slate-800 rounded text-[10px] font-bold text-slate-500 dark:text-slate-400">
+                    <Venus v-if="activeSession!.partner.gender === 'Female'" class="w-3 h-3 text-pink-500" />
+                    <Mars v-else-if="activeSession!.partner.gender === 'Male'" class="w-3 h-3 text-blue-500" />
+                    <CircleSlash v-else class="w-3 h-3 text-slate-400" />
+                    {{ SPEAKER_IDENTITY_OPTIONS.find(o => o.value === activeSession!.partner.gender)?.label }}
+                  </div>
+                  <!-- Language Badge -->
+                  <div class="flex items-center gap-1 px-1.5 py-0.5 bg-slate-100 dark:bg-slate-800 rounded text-[10px] font-bold text-slate-500 dark:text-slate-400">
+                    <Languages class="w-3 h-3 text-emerald-500" />
+                    {{ activeSession!.partner.language.displayName }}
+                  </div>
                 </div>
                 <div class="text-[10px] text-slate-400 italic flex items-center h-full">自动识别语气</div>
               </div>
@@ -394,9 +409,24 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
             <!-- My Input (Right) -->
             <div class="flex flex-col gap-2">
               <div class="flex items-center justify-between px-1 h-7">
-                <div class="flex items-center gap-1.5 text-[10px] font-bold text-slate-400 uppercase">
-                  <User class="w-3 h-3 text-blue-500" />
-                  {{ activeSession.me.name }} 说 ({{ activeSession.me.language.displayName }})
+                <div class="flex items-center gap-1">
+                  <!-- Name Badge -->
+                  <div class="flex items-center gap-1 px-1.5 py-0.5 bg-blue-50 dark:bg-blue-900/20 rounded text-[10px] font-bold text-blue-600 dark:text-blue-400">
+                    <User class="w-3 h-3" />
+                    {{ activeSession!.me.name }}
+                  </div>
+                  <!-- Gender Badge -->
+                  <div class="flex items-center gap-1 px-1.5 py-0.5 bg-blue-50 dark:bg-blue-900/20 rounded text-[10px] font-bold text-blue-600 dark:text-blue-400">
+                    <Venus v-if="activeSession!.me.gender === 'Female'" class="w-3 h-3 text-pink-500" />
+                    <Mars v-else-if="activeSession!.me.gender === 'Male'" class="w-3 h-3 text-blue-500" />
+                    <CircleSlash v-else class="w-3 h-3 text-slate-400" />
+                    {{ SPEAKER_IDENTITY_OPTIONS.find(o => o.value === activeSession!.me.gender)?.label }}
+                  </div>
+                  <!-- Language Badge -->
+                  <div class="flex items-center gap-1 px-1.5 py-0.5 bg-blue-50 dark:bg-blue-900/20 rounded text-[10px] font-bold text-blue-600 dark:text-blue-400">
+                    <Languages class="w-3 h-3 text-emerald-500" />
+                    {{ activeSession!.me.language.displayName }}
+                  </div>
                 </div>
                 
                 <!-- My Tone Selector -->