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

fix 3

Browse Source
This commit is contained in:
Julian
2026-04-20 13:01:00 -04:00
parent bdad27d6ac
commit 505c7e612c
10 changed files with 307 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/App.vue
View File

@@ -3,10 +3,8 @@ import { ref, watch } from 'vue';
import {
Settings,
Languages,
FileText,
Sun,
Moon,
Clock,
MessageSquare
} from 'lucide-vue-next';
import { useSettingsStore } from './stores/settings';
@@ -17,8 +15,6 @@ import { cn } from './lib/utils';
import TranslationView from './components/TranslationView.vue';
import ConversationView from './components/ConversationView.vue';
import SettingsView from './components/SettingsView.vue';
import LogsView from './components/LogsView.vue';
import HistoryView from './components/HistoryView.vue';
const settings = useSettingsStore();
@@ -36,7 +32,7 @@ const toggleTheme = () => {
};
// Global Routing State
const view = ref<'translate' | 'conversation' | 'settings' | 'logs' | 'history'>('translate');
const view = ref<'translate' | 'conversation' | 'settings'>('translate');
</script>
@@ -48,6 +44,20 @@ const view = ref<'translate' | 'conversation' | 'settings' | 'logs' | 'history'>
<Languages class="w-6 h-6 text-blue-600 group-hover:scale-110 transition-transform" />
<h1 class="font-semibold text-lg tracking-tight">AI 翻译</h1>
</div>
<nav class="flex items-center gap-1 rounded-full bg-slate-200/60 dark:bg-slate-800/70 p-1">
<button
@click="view = 'translate'"
:class="cn('px-4 py-1.5 rounded-full text-sm font-medium transition-colors', view === 'translate' ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-700 dark:text-slate-100' : 'text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200')"
>
单轮翻译
</button>
<button
@click="view = 'conversation'"
:class="cn('px-4 py-1.5 rounded-full text-sm font-medium transition-colors', view === 'conversation' ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-700 dark:text-slate-100' : 'text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200')"
>
多轮翻译
</button>
</nav>
<div class="flex items-center gap-2">
<button
@click="toggleTheme"
@@ -71,20 +81,6 @@ const view = ref<'translate' | 'conversation' | 'settings' | 'logs' | 'history'>
>
<Settings class="w-5 h-5" />
</button>
<button
@click="view = 'logs'"
:class="cn('p-2 rounded-full transition-colors', view === 'logs' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
title="日志"
>
<FileText class="w-5 h-5" />
</button>
<button
@click="view = 'history'"
:class="cn('p-2 rounded-full transition-colors', view === 'history' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
title="历史记录"
>
<Clock class="w-5 h-5" />
</button>
</div>
</header>
@@ -94,8 +90,6 @@ const view = ref<'translate' | 'conversation' | 'settings' | 'logs' | 'history'>
<TranslationView v-if="view === 'translate'" />
<ConversationView v-else-if="view === 'conversation'" />
<SettingsView v-else-if="view === 'settings'" />
<LogsView v-else-if="view === 'logs'" />
<HistoryView v-else-if="view === 'history'" />
</keep-alive>
</main>

52
src/components/ConversationView.vue
View File

@@ -13,6 +13,8 @@ import {
TONE_REGISTER_OPTIONS,
type Participant
} from '../stores/settings';
import { useConversationStore } from '../stores/conversation';
import { useLogsStore } from '../stores/logs';
import { cn } from '../lib/utils';
import { listen } from '@tauri-apps/api/event';
import { useClipboard } from '../composables/useClipboard';
@@ -26,6 +28,8 @@ import {
} from '../lib/translation-service';
const settings = useSettingsStore();
const conversationStore = useConversationStore();
const logsStore = useLogsStore();
const { activeCopyId, copyWithFeedback } = useClipboard();
// UI States
@@ -72,7 +76,7 @@ const closeAllModalDropdowns = () => {
// Current active session
const activeSession = computed(() =>
settings.chatSessions.find(s => s.id === settings.activeSessionId) || null
conversationStore.chatSessions.find(s => s.id === conversationStore.activeSessionId) || null
);
const scrollToBottom = async (smooth = true) => {
@@ -86,7 +90,7 @@ const scrollToBottom = async (smooth = true) => {
};
// Watch for session switch
watch(() => settings.activeSessionId, async (newVal) => {
watch(() => conversationStore.activeSessionId, async (newVal) => {
if (newVal) {
// 切换会话时，先立即滚动到底部（非平滑），然后再等 DOM 渲染完成后尝试平滑滚动确保到位
await scrollToBottom(false);
@@ -95,9 +99,9 @@ watch(() => settings.activeSessionId, async (newVal) => {
});
const filteredSessions = computed(() => {
if (!searchQuery.value.trim()) return settings.chatSessions;
if (!searchQuery.value.trim()) return conversationStore.chatSessions;
const q = searchQuery.value.toLowerCase();
return settings.chatSessions.filter(s =>
return conversationStore.chatSessions.filter(s =>
s.title.toLowerCase().includes(q) ||
s.partner.name.toLowerCase().includes(q)
);
@@ -116,9 +120,9 @@ const myToneDropdownOpen = ref(false);
// Methods
const handleCreateSession = () => {
if (!newSessionPartner.value.name.trim()) return;
const id = settings.createSession({ ...newSessionMe.value }, { ...newSessionPartner.value });
const id = conversationStore.createSession({ ...newSessionMe.value }, { ...newSessionPartner.value });
isCreatingSession.value = false;
settings.activeSessionId = id;
conversationStore.activeSessionId = id;
};
let unlisten: (() => void) | null = null;
@@ -129,7 +133,7 @@ onMounted(async () => {
currentStreamingMessageId.value &&
event.payload.request_id === activeStreamRequestId.value
) {
settings.updateChatMessage(activeSession.value.id, currentStreamingMessageId.value, {
conversationStore.updateChatMessage(activeSession.value.id, currentStreamingMessageId.value, {
translated: (activeSession.value.messages.find(m => m.id === currentStreamingMessageId.value)?.translated || '') + event.payload.chunk
});
@@ -154,12 +158,12 @@ const translateMessage = async (sender: 'me' | 'partner', retranslateId?: string
if (!msg) return;
text = msg.original;
messageId = retranslateId;
settings.updateChatMessage(activeSession.value.id, messageId, { translated: '', evaluation: undefined });
conversationStore.updateChatMessage(activeSession.value.id, messageId, { translated: '', evaluation: undefined });
} else {
text = sender === 'me' ? myInput.value.trim() : partnerInput.value.trim();
if (!text) return;
const newId = settings.addMessageToSession(activeSession.value.id, sender, text, '');
const newId = conversationStore.addMessageToSession(activeSession.value.id, sender, text, '');
if (!newId) return;
messageId = newId;
if (sender === 'me') myInput.value = ''; else partnerInput.value = '';
@@ -219,7 +223,7 @@ const translateMessage = async (sender: 'me' | 'partner', retranslateId?: string
apiAddress: settings.apiBaseUrl,
apiKey: settings.apiKey,
payload: requestBody,
logger: settings,
logger: logsStore,
logType: retranslateId ? 'conversation-retranslate' : 'conversation',
onStreamStart: (requestId) => {
activeStreamRequestId.value = requestId;
@@ -227,10 +231,10 @@ const translateMessage = async (sender: 'me' | 'partner', retranslateId?: string
});
if (!settings.enableStreaming) {
settings.updateChatMessage(activeSession.value.id, messageId, { translated: extractAssistantContent(response) });
conversationStore.updateChatMessage(activeSession.value.id, messageId, { translated: extractAssistantContent(response) });
}
} catch (err: any) {
settings.updateChatMessage(activeSession.value.id, messageId, { translated: `Error: ${String(err)}` });
conversationStore.updateChatMessage(activeSession.value.id, messageId, { translated: `Error: ${String(err)}` });
} finally {
isTranslating.value = false;
currentStreamingMessageId.value = null;
@@ -245,7 +249,7 @@ const translateMessage = async (sender: 'me' | 'partner', retranslateId?: string
const deleteMessage = (messageId: string) => {
if (!activeSession.value) return;
settings.deleteChatMessage(activeSession.value.id, messageId);
conversationStore.deleteChatMessage(activeSession.value.id, messageId);
};
const evaluateMessage = async (messageId: string, force = false) => {
@@ -261,7 +265,7 @@ const evaluateMessage = async (messageId: string, force = false) => {
if (!force && (msg.evaluation || msg.isEvaluating)) return;
settings.updateChatMessage(activeSession.value.id, messageId, { isEvaluating: true, evaluation: undefined });
conversationStore.updateChatMessage(activeSession.value.id, messageId, { isEvaluating: true, evaluation: undefined });
const historyLimit = 10;
const recentMessages = activeSession.value.messages.filter(m => m.id !== messageId).slice(-historyLimit);
@@ -318,13 +322,13 @@ const evaluateMessage = async (messageId: string, force = false) => {
apiAddress: modelConfig.apiBaseUrl,
apiKey: modelConfig.apiKey,
payload: requestBody,
logger: settings,
logger: logsStore,
logType: 'conversation-eval',
});
settings.updateChatMessage(activeSession.value.id, messageId, { evaluation: extractAssistantContent(response) });
conversationStore.updateChatMessage(activeSession.value.id, messageId, { evaluation: extractAssistantContent(response) });
} catch {
} finally {
settings.updateChatMessage(activeSession.value.id, messageId, { isEvaluating: false });
conversationStore.updateChatMessage(activeSession.value.id, messageId, { isEvaluating: false });
}
};
@@ -350,7 +354,7 @@ const refineMessage = async (messageId: string) => {
const currentTranslation = msg.translated;
isAuditModalOpen.value = false; // 关闭弹窗开始润色
settings.updateChatMessage(activeSession.value.id, messageId, { isRefining: true, translated: '' });
conversationStore.updateChatMessage(activeSession.value.id, messageId, { isRefining: true, translated: '' });
currentStreamingMessageId.value = messageId;
const historyLimit = 10;
@@ -407,7 +411,7 @@ const refineMessage = async (messageId: string) => {
apiAddress: modelConfig.apiBaseUrl,
apiKey: modelConfig.apiKey,
payload: requestBody,
logger: settings,
logger: logsStore,
logType: 'conversation-refine',
onStreamStart: (requestId) => {
activeStreamRequestId.value = requestId;
@@ -415,11 +419,11 @@ const refineMessage = async (messageId: string) => {
});
if (!settings.enableStreaming) {
settings.updateChatMessage(activeSession.value.id, messageId, { translated: extractAssistantContent(response) });
conversationStore.updateChatMessage(activeSession.value.id, messageId, { translated: extractAssistantContent(response) });
}
} catch {
} finally {
settings.updateChatMessage(activeSession.value.id, messageId, { isRefining: false, evaluation: undefined });
conversationStore.updateChatMessage(activeSession.value.id, messageId, { isRefining: false, evaluation: undefined });
currentStreamingMessageId.value = null;
activeStreamRequestId.value = null;
@@ -477,10 +481,10 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
<div
v-for="session in filteredSessions"
:key="session.id"
@click="settings.activeSessionId = session.id"
@click="conversationStore.activeSessionId = session.id"
:class="cn(
'w-full p-4 rounded-xl text-left transition-all border group relative cursor-pointer',
settings.activeSessionId === session.id
conversationStore.activeSessionId === session.id
? 'bg-blue-50 dark:bg-blue-900/20 border-blue-100 dark:border-blue-900/50 shadow-sm'
: 'hover:bg-slate-100 dark:hover:bg-slate-800/50 border-transparent'
)"
@@ -499,7 +503,7 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
</p>
<button
@click.stop="settings.deleteSession(session.id)"
@click.stop="conversationStore.deleteSession(session.id)"
class="absolute right-2 bottom-2 p-1.5 rounded-md text-red-400 opacity-0 group-hover:opacity-100 hover:bg-red-50 dark:hover:bg-red-900/30 transition-all"
title="删除会话"
>

17
src/components/HistoryView.vue
View File

@@ -1,27 +1,28 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { Clock, Search, ArrowRightLeft, Trash2, User, Type, Copy, Check, FileText } from 'lucide-vue-next';
import { useSettingsStore, SPEAKER_IDENTITY_OPTIONS, TONE_REGISTER_OPTIONS } from '../stores/settings';
import { useHistoryStore } from '../stores/history';
import { SPEAKER_IDENTITY_OPTIONS, TONE_REGISTER_OPTIONS } from '../stores/settings';
import { cn } from '../lib/utils';
import { useClipboard } from '../composables/useClipboard';
const settings = useSettingsStore();
const historyStore = useHistoryStore();
const { activeCopyId, copyWithFeedback } = useClipboard();
const searchQuery = ref('');
const selectedHistoryId = ref<string | null>(null);
const filteredHistory = computed(() => {
if (!searchQuery.value.trim()) return settings.history;
if (!searchQuery.value.trim()) return historyStore.history;
const q = searchQuery.value.toLowerCase();
return settings.history.filter(h =>
return historyStore.history.filter(h =>
h.sourceText.toLowerCase().includes(q) ||
h.targetText.toLowerCase().includes(q)
);
});
const selectedHistoryItem = computed(() =>
settings.history.find(h => h.id === selectedHistoryId.value) || null
historyStore.history.find(h => h.id === selectedHistoryId.value) || null
);
watch(filteredHistory, (newVal) => {
@@ -31,7 +32,7 @@ watch(filteredHistory, (newVal) => {
}, { immediate: true });
const deleteHistoryItem = (id: string) => {
settings.history = settings.history.filter(h => h.id !== id);
historyStore.deleteHistoryItem(id);
if (selectedHistoryId.value === id) {
selectedHistoryId.value = filteredHistory.value[0]?.id || null;
}
@@ -55,7 +56,7 @@ const deleteHistoryItem = (id: string) => {
<div class="flex items-center justify-between px-1">
<span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">共 {{ filteredHistory.length }} 条记录</span>
<button
@click="settings.history = []"
@click="historyStore.clearHistory()"
class="text-[11px] text-red-500 hover:underline font-medium"
>清空全部</button>
</div>
@@ -194,4 +195,4 @@ const deleteHistoryItem = (id: string) => {
</div>
</div>
</div>
</template>
</template>

16
src/components/LogsView.vue
View File

@@ -1,19 +1,19 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { FileText, Check, Copy } from 'lucide-vue-next';
import { useSettingsStore } from '../stores/settings';
import { useLogsStore } from '../stores/logs';
import { cn } from '../lib/utils';
import { useClipboard } from '../composables/useClipboard';
const settings = useSettingsStore();
const logsStore = useLogsStore();
const { activeCopyId, copyWithFeedback } = useClipboard();
const selectedLogId = ref<string | null>(null);
const selectedLogItem = computed(() =>
settings.logs.find(l => l.id === selectedLogId.value) || null
logsStore.logs.find(l => l.id === selectedLogId.value) || null
);
watch(() => settings.logs, (newVal) => {
watch(() => logsStore.logs, (newVal) => {
if (newVal.length > 0 && !selectedLogId.value) {
selectedLogId.value = newVal[0].id;
}
@@ -47,7 +47,7 @@ const getLogSummary = (log: any) => {
<div class="flex items-center justify-between">
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">系统日志</h2>
<button
@click="settings.logs = []"
@click="logsStore.clearLogs()"
class="text-[11px] text-red-500 hover:underline font-medium flex items-center gap-1"
>
清空全部
@@ -56,12 +56,12 @@ const getLogSummary = (log: any) => {
</div>
<div class="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-1">
<div v-if="settings.logs.length === 0" class="py-20 text-center space-y-2">
<div v-if="logsStore.logs.length === 0" class="py-20 text-center space-y-2">
<FileText class="w-10 h-10 text-slate-200 dark:text-slate-800 mx-auto" />
<p class="text-sm text-slate-400 italic">暂无日志记录</p>
</div>
<div
v-for="log in settings.logs"
v-for="log in logsStore.logs"
:key="log.id"
@click="selectedLogId = log.id"
:class="cn(
@@ -144,4 +144,4 @@ const getLogSummary = (log: any) => {
</div>
</div>
</div>
</template>
</template>

63
src/components/SettingsView.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown, Eye, EyeOff, Pencil, MessageSquare } from 'lucide-vue-next';
import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown, Eye, EyeOff, Pencil, MessageSquare, Clock, FileText } from 'lucide-vue-next';
import {
useSettingsStore,
DEFAULT_TEMPLATE,
@@ -12,9 +12,11 @@ import {
type ApiProfile
} from '../stores/settings';
import { cn } from '../lib/utils';
import HistoryView from './HistoryView.vue';
import LogsView from './LogsView.vue';
const settings = useSettingsStore();
const settingsCategory = ref<'api' | 'general' | 'prompts' | 'chat-prompts'>('api');
const settingsCategory = ref<'api' | 'general' | 'prompts' | 'chat-prompts' | 'history' | 'debug'>('api');
const showApiKey = ref(false);
const newProfileName = ref('');
@@ -83,6 +85,8 @@ const currentEvaluationProfileLabel = computed(() => {
return profile ? `${profile.name} — ${profile.modelName}` : '使用主翻译配置（默认）';
});
const isToolCategory = computed(() => settingsCategory.value === 'history' || settingsCategory.value === 'debug');
const handleGlobalClick = (e: MouseEvent) => {
const target = e.target as HTMLElement;
if (!target.closest('.lang-dropdown')) {
@@ -150,12 +154,37 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
</div>
对话提示词
</button>
<div class="mx-3 my-3 h-px bg-slate-200 dark:bg-slate-800"></div>
<button
@click="settingsCategory = 'history'"
:class="cn(
'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
settingsCategory === 'history' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800/50'
)"
>
<div :class="cn('p-1.5 rounded-md', settingsCategory === 'history' ? 'bg-blue-100 dark:bg-blue-900/50' : 'bg-slate-100 dark:bg-slate-800')">
<Clock class="w-4 h-4" />
</div>
翻译历史
</button>
<button
@click="settingsCategory = 'debug'"
:class="cn(
'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
settingsCategory === 'debug' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800/50'
)"
>
<div :class="cn('p-1.5 rounded-md', settingsCategory === 'debug' ? 'bg-blue-100 dark:bg-blue-900/50' : 'bg-slate-100 dark:bg-slate-800')">
<FileText class="w-4 h-4" />
</div>
调试日志
</button>
</nav>
</div>
<!-- Settings Content (Detail) -->
<div class="flex-1 overflow-y-auto p-6 md:p-10 custom-scrollbar bg-slate-50/30 dark:bg-transparent">
<div class="max-w-3xl mx-auto space-y-8 pb-20">
<div :class="cn('flex-1 overflow-y-auto custom-scrollbar bg-slate-50/30 dark:bg-transparent', isToolCategory ? 'p-4 md:p-6' : 'p-6 md:p-10')">
<div :class="cn(isToolCategory ? 'space-y-6 pb-8' : 'max-w-3xl mx-auto space-y-8 pb-20')">
<!-- API & Models -->
<template v-if="settingsCategory === 'api'">
@@ -587,7 +616,31 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
</div>
</template>
<template v-if="settingsCategory === 'history'">
<div class="px-2 md:px-4">
<div class="mb-6 border-b dark:border-slate-800 pb-4">
<h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">翻译历史</h1>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">历史记录是单轮翻译的辅助工具，不再与核心模式并列展示。</p>
</div>
<div class="h-[720px] min-h-[560px] overflow-hidden rounded-3xl border border-slate-200/80 bg-white/70 shadow-sm dark:border-slate-800 dark:bg-slate-900/70">
<HistoryView />
</div>
</div>
</template>
<template v-if="settingsCategory === 'debug'">
<div class="px-2 md:px-4">
<div class="mb-6 border-b dark:border-slate-800 pb-4">
<h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">调试日志</h1>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">日志属于排错与提示词调试工具，不再作为顶层业务入口。</p>
</div>
<div class="h-[720px] min-h-[560px] overflow-hidden rounded-3xl border border-slate-200/80 bg-white/70 shadow-sm dark:border-slate-800 dark:bg-slate-900/70">
<LogsView />
</div>
</div>
</template>
</div>
</div>
</div>
</template>
</template>

16
src/components/TranslationView.vue
View File

@@ -3,6 +3,8 @@ import { ref, computed, onMounted, onUnmounted } from 'vue';
import { ChevronDown, Check, ArrowRightLeft, Trash2, FileText, Plus, Loader2, Send, User, Type, Copy, Save } from 'lucide-vue-next';
import { listen } from '@tauri-apps/api/event';
import { useSettingsStore, LANGUAGES, SPEAKER_IDENTITY_OPTIONS, TONE_REGISTER_OPTIONS } from '../stores/settings';
import { useHistoryStore } from '../stores/history';
import { useLogsStore } from '../stores/logs';
import { cn } from '../lib/utils';
import { useClipboard } from '../composables/useClipboard';
import {
@@ -16,6 +18,8 @@ import {
} from '../lib/translation-service';
const settings = useSettingsStore();
const historyStore = useHistoryStore();
const logsStore = useLogsStore();
const { activeCopyId, copyWithFeedback } = useClipboard();
const sourceDropdownOpen = ref(false);
@@ -144,13 +148,13 @@ const evaluateTranslation = async () => {
apiAddress: modelConfig.apiBaseUrl,
apiKey: modelConfig.apiKey,
payload: requestBody,
logger: settings,
logger: logsStore,
logType: 'evaluation',
});
const parsedEvaluation = tryParseEvaluationResult(extractAssistantContent(response));
if (!parsedEvaluation.ok) {
console.error(parsedEvaluation.error, response);
settings.addLog('error', `Evaluation parsing error: ${response}`);
logsStore.addLog('error', `Evaluation parsing error: ${response}`);
}
evaluationResult.value = parsedEvaluation.result;
} catch {
@@ -195,7 +199,7 @@ const refineTranslation = async () => {
apiAddress: modelConfig.apiBaseUrl,
apiKey: modelConfig.apiKey,
payload: requestBody,
logger: settings,
logger: logsStore,
logType: 'refinement',
onStreamStart: (requestId) => {
activeStreamRequestId.value = requestId;
@@ -210,7 +214,7 @@ const refineTranslation = async () => {
}
if (currentHistoryId.value) {
settings.updateHistoryItem(currentHistoryId.value, {
historyStore.updateHistoryItem(currentHistoryId.value, {
targetText: targetText.value
});
}
@@ -253,7 +257,7 @@ const translate = async () => {
apiAddress: settings.apiBaseUrl,
apiKey: settings.apiKey,
payload: requestBody,
logger: settings,
logger: logsStore,
onStreamStart: (requestId) => {
activeStreamRequestId.value = requestId;
},
@@ -267,7 +271,7 @@ const translate = async () => {
targetText.value = finalTargetText;
}
currentHistoryId.value = settings.addHistory({
currentHistoryId.value = historyStore.addHistory({
sourceLang: { ...sourceLang.value },
targetLang: { ...targetLang.value },
sourceText: sourceText.value,

86
src/stores/conversation.ts Normal file
View File

@@ -0,0 +1,86 @@
import { defineStore } from 'pinia';
import { useLocalStorage } from '@vueuse/core';
import type { ChatMessage, ChatSession, Participant } from './settings';
function formatTimestamp() {
const now = new Date();
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
}
export const useConversationStore = defineStore('conversation', () => {
const chatSessions = useLocalStorage<ChatSession[]>('chat-sessions-v1', []);
const activeSessionId = useLocalStorage<string | null>('active-session-id-v1', null);
const createSession = (me: Participant, partner: Participant) => {
const id = crypto.randomUUID();
const timestamp = formatTimestamp();
const newSession: ChatSession = {
id,
title: `${partner.name} 的对话`,
me,
partner,
messages: [],
lastActivity: timestamp,
};
chatSessions.value.unshift(newSession);
activeSessionId.value = id;
return id;
};
const deleteSession = (id: string) => {
chatSessions.value = chatSessions.value.filter((session) => session.id !== id);
if (activeSessionId.value === id) {
activeSessionId.value = chatSessions.value[0]?.id || null;
}
};
const addMessageToSession = (sessionId: string, sender: 'me' | 'partner', original: string, translated = '') => {
const session = chatSessions.value.find((item) => item.id === sessionId);
if (!session) return null;
const timestamp = formatTimestamp();
const newMessage: ChatMessage = {
id: crypto.randomUUID(),
sender,
original,
translated,
timestamp,
};
session.messages.push(newMessage);
session.lastActivity = timestamp;
const index = chatSessions.value.findIndex((item) => item.id === sessionId);
if (index > 0) {
const [current] = chatSessions.value.splice(index, 1);
chatSessions.value.unshift(current);
}
return newMessage.id;
};
const updateChatMessage = (sessionId: string, messageId: string, updates: Partial<ChatMessage>) => {
const session = chatSessions.value.find((item) => item.id === sessionId);
const message = session?.messages.find((item) => item.id === messageId);
if (message) Object.assign(message, updates);
};
const deleteChatMessage = (sessionId: string, messageId: string) => {
const session = chatSessions.value.find((item) => item.id === sessionId);
if (session) {
session.messages = session.messages.filter((item) => item.id !== messageId);
}
};
return {
chatSessions,
activeSessionId,
createSession,
deleteSession,
addMessageToSession,
updateChatMessage,
deleteChatMessage,
};
});

51
src/stores/history.ts Normal file
View File

@@ -0,0 +1,51 @@
import { defineStore } from 'pinia';
import { useLocalStorage } from '@vueuse/core';
import type { HistoryItem } from './settings';
function formatTimestamp() {
const now = new Date();
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
}
export const useHistoryStore = defineStore('history', () => {
const history = useLocalStorage<HistoryItem[]>('translation-history-v1', []);
const addHistory = (item: Omit<HistoryItem, 'id' | 'timestamp'>) => {
const id = crypto.randomUUID();
history.value.unshift({
...item,
id,
timestamp: formatTimestamp(),
});
if (history.value.length > 100) {
history.value = history.value.slice(0, 100);
}
return id;
};
const updateHistoryItem = (id: string, updates: Partial<HistoryItem>) => {
const index = history.value.findIndex((item) => item.id === id);
if (index !== -1) {
history.value[index] = { ...history.value[index], ...updates };
}
};
const deleteHistoryItem = (id: string) => {
history.value = history.value.filter((item) => item.id !== id);
};
const clearHistory = () => {
history.value = [];
};
return {
history,
addHistory,
updateHistoryItem,
deleteHistoryItem,
clearHistory,
};
});

41
src/stores/logs.ts Normal file
View File

@@ -0,0 +1,41 @@
import { ref } from 'vue';
import { defineStore } from 'pinia';
export interface LogEntry {
id: string;
timestamp: string;
type: 'request' | 'response' | 'error';
content: any;
curl?: string;
}
function createTimestamp() {
const now = new Date();
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
}
export const useLogsStore = defineStore('logs', () => {
const logs = ref<LogEntry[]>([]);
const addLog = (type: LogEntry['type'], content: any, curl?: string) => {
logs.value.unshift({
id: crypto.randomUUID(),
timestamp: createTimestamp(),
type,
content,
curl,
});
if (logs.value.length > 50) logs.value.pop();
};
const clearLogs = () => {
logs.value = [];
};
return {
logs,
addLog,
clearLogs,
};
});

134
src/stores/settings.ts
View File

@@ -1,4 +1,4 @@
import { ref, computed } from 'vue';
import { computed } from 'vue';
import { defineStore } from 'pinia';
import { useLocalStorage } from '@vueuse/core';
@@ -277,126 +277,6 @@ export const useSettingsStore = defineStore('settings', () => {
set: (val) => { toneRegisterMap.value[sourceLang.value.code] = val; }
});
const logs = ref<{ id: string; timestamp: string; type: 'request' | 'response' | 'error'; content: any; curl?: string }[]>([]);
const history = useLocalStorage<HistoryItem[]>('translation-history-v1', []);
// 对话模式状态
const chatSessions = useLocalStorage<ChatSession[]>('chat-sessions-v1', []);
const activeSessionId = useLocalStorage<string | null>('active-session-id-v1', null);
const addLog = (type: 'request' | 'response' | 'error', content: any, curl?: string) => {
const now = new Date();
const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
logs.value.unshift({
id: crypto.randomUUID(),
timestamp,
type,
content,
curl
});
if (logs.value.length > 50) logs.value.pop(); // 稍微增加日志保留数量
};
const addHistory = (item: Omit<HistoryItem, 'id' | 'timestamp'>) => {
const now = new Date();
const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
const id = crypto.randomUUID();
history.value.unshift({
...item,
id,
timestamp
});
// 限制 100 条
if (history.value.length > 100) {
history.value = history.value.slice(0, 100);
}
return id;
};
const updateHistoryItem = (id: string, updates: Partial<HistoryItem>) => {
const index = history.value.findIndex(h => h.id === id);
if (index !== -1) {
history.value[index] = { ...history.value[index], ...updates };
}
};
// 对话模式方法
const createSession = (me: Participant, partner: Participant) => {
const id = crypto.randomUUID();
const now = new Date();
const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
const newSession: ChatSession = {
id,
title: `${partner.name} 的对话`,
me,
partner,
messages: [],
lastActivity: timestamp
};
chatSessions.value.unshift(newSession);
activeSessionId.value = id;
return id;
};
const deleteSession = (id: string) => {
chatSessions.value = chatSessions.value.filter(s => s.id !== id);
if (activeSessionId.value === id) {
activeSessionId.value = chatSessions.value[0]?.id || null;
}
};
const addMessageToSession = (sessionId: string, sender: 'me' | 'partner', original: string, translated: string = '') => {
const session = chatSessions.value.find(s => s.id === sessionId);
if (session) {
const now = new Date();
const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
const newMessage: ChatMessage = {
id: crypto.randomUUID(),
sender,
original,
translated,
timestamp
};
session.messages.push(newMessage);
session.lastActivity = timestamp;
// 将活跃会话移至顶部
const index = chatSessions.value.findIndex(s => s.id === sessionId);
if (index > 0) {
const [s] = chatSessions.value.splice(index, 1);
chatSessions.value.unshift(s);
}
return newMessage.id;
}
return null;
};
const updateChatMessage = (sessionId: string, messageId: string, updates: Partial<ChatMessage>) => {
const session = chatSessions.value.find(s => s.id === sessionId);
if (session) {
const message = session.messages.find(m => m.id === messageId);
if (message) {
Object.assign(message, updates);
}
}
};
const deleteChatMessage = (sessionId: string, messageId: string) => {
const session = chatSessions.value.find(s => s.id === sessionId);
if (session) {
session.messages = session.messages.filter(m => m.id !== messageId);
}
};
return {
isDark,
apiBaseUrl,
@@ -416,17 +296,5 @@ export const useSettingsStore = defineStore('settings', () => {
targetLang,
speakerIdentity,
toneRegister,
logs,
history,
chatSessions,
activeSessionId,
addLog,
addHistory,
updateHistoryItem,
createSession,
deleteSession,
addMessageToSession,
updateChatMessage,
deleteChatMessage
};
});