julian/ai-translate-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

fix label ui

Browse Source
This commit is contained in:
Julian Freeman
2026-04-03 19:27:06 -04:00
parent 2a940534f2
commit 4f6ab39ed5
1 changed files with 37 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/ConversationView.vue
View File

@@ -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 -->