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

Compare commits

base: julian:985cfd933aa6ba8551a8952bdbb4b7ff081dedea
Branches Tags
julian:main
julian:v0.3.3 julian:v0.3.2 julian:v0.3.1 julian:v0.3.0
..
compare: julian:v0.3.1
Branches Tags
julian:main
julian:v0.3.3 julian:v0.3.2 julian:v0.3.1 julian:v0.3.0

5 Commits
985cfd933a ... v0.3.1

Author SHA1 Message Date
Julian Freeman
f6bc4152b0 change the left bottom 2026-02-24 22:27:19 -04:00
Julian Freeman
5b493ce767 make light softer 2 2026-02-24 22:23:58 -04:00
Julian Freeman
49b96eeaeb make light softer 2026-02-24 22:07:45 -04:00
Julian Freeman
d259b54f11 not store context 2026-02-24 22:00:56 -04:00
Julian Freeman
484dd17f1c fix ui 2026-02-24 21:49:58 -04:00
2 changed files with 30 additions and 31 deletions
Expand all files Collapse all files

59
src/App.vue
View File

@@ -129,6 +129,7 @@ onUnmounted(() => {
// Translation State // Translation State
const sourceText = ref(''); const sourceText = ref('');
const context = ref('');
const targetText = ref(''); const targetText = ref('');
const isTranslating = ref(false); const isTranslating = ref(false);
const showCopyFeedback = ref(false); const showCopyFeedback = ref(false);
@@ -212,8 +213,8 @@ const translate = async () => {
.replace(/{SPEAKER_IDENTITY}/g, settings.speakerIdentity) .replace(/{SPEAKER_IDENTITY}/g, settings.speakerIdentity)
.replace(/{TONE_REGISTER}/g, settings.toneRegister); .replace(/{TONE_REGISTER}/g, settings.toneRegister);
const userMessage = settings.context const userMessage = context.value
? `[Context]\n${settings.context}\n\n[Text to Translate]\n${sourceText.value}` ? `[Context]\n${context.value}\n\n[Text to Translate]\n${sourceText.value}`
: `[Text to Translate]\n${sourceText.value}`; : `[Text to Translate]\n${sourceText.value}`;
const requestBody = { const requestBody = {
@@ -250,9 +251,9 @@ const translate = async () => {
</script> </script>
<template> <template>
<div class="h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col overflow-hidden"> <div class="h-screen bg-slate-100/50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col overflow-hidden">
<!-- Header --> <!-- Header -->
<header class="h-14 border-b dark:border-slate-800 bg-white dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm"> <header class="h-14 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm/5">
<div class="flex items-center gap-2 cursor-pointer group" @click="view = 'translate'"> <div class="flex items-center gap-2 cursor-pointer group" @click="view = 'translate'">
<Languages class="w-6 h-6 text-blue-600 group-hover:scale-110 transition-transform" /> <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> <h1 class="font-semibold text-lg tracking-tight">AI 翻译</h1>
@@ -260,7 +261,7 @@ const translate = async () => {
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button <button
@click="toggleTheme" @click="toggleTheme"
class="p-2 rounded-full transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300" class="p-2 rounded-full transition-colors hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300"
:title="settings.isDark ? '切换亮色主题' : '切换暗色主题'" :title="settings.isDark ? '切换亮色主题' : '切换暗色主题'"
> >
<Sun v-if="settings.isDark" class="w-5 h-5" /> <Sun v-if="settings.isDark" class="w-5 h-5" />
@@ -268,15 +269,15 @@ const translate = async () => {
</button> </button>
<button <button
@click="view = 'settings'" @click="view = 'settings'"
:class="cn('p-2 rounded-full transition-colors', view === 'settings' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')" :class="cn('p-2 rounded-full transition-colors', view === 'settings' ? '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="设置" title="设置"
> >
<Settings class="w-5 h-5" /> <Settings class="w-5 h-5" />
</button> </button>
<button <button
@click="view = 'logs'" @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-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')" :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="调试日志" title="日志"
> >
<FileText class="w-5 h-5" /> <FileText class="w-5 h-5" />
</button> </button>
@@ -285,10 +286,10 @@ const translate = async () => {
<main class="flex-1 flex overflow-hidden min-h-0 relative"> <main class="flex-1 flex overflow-hidden min-h-0 relative">
<!-- Translation View --> <!-- Translation View -->
<div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white dark:bg-slate-900 overflow-hidden h-full"> <div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white/50 dark:bg-slate-900 overflow-hidden h-full">
<!-- Source Pane --> <!-- Source Pane -->
<div class="flex-1 flex flex-col min-h-0 relative h-full"> <div class="flex-1 flex flex-col min-h-0 relative h-full">
<div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40 shrink-0"> <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
<!-- Custom Source Dropdown --> <!-- Custom Source Dropdown -->
<div class="relative lang-dropdown min-w-30"> <div class="relative lang-dropdown min-w-30">
<button <button
@@ -344,15 +345,15 @@ const translate = async () => {
></textarea> ></textarea>
<!-- Context Input Area --> <!-- Context Input Area -->
<div class="px-6 py-3 bg-slate-50/50 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative"> <div class="px-6 py-3 bg-slate-200/20 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative">
<div class="flex items-center justify-between mb-1.5"> <div class="flex items-center justify-between mb-1.5 h-5">
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<FileText class="w-4 h-4 text-slate-400" /> <FileText class="w-4 h-4 text-slate-400" />
<span class="text-[12px] font-bold text-slate-400 uppercase tracking-widest">情景背景 (可选)</span> <span class="text-[12px] font-bold text-slate-400 uppercase tracking-widest">情景背景 (可选)</span>
</div> </div>
<button <button
v-if="settings.context" v-if="context"
@click="settings.context = ''" @click="context = ''"
class="p-1 hover:bg-slate-200 dark:hover:bg-slate-700 rounded opacity-0 group-hover/context:opacity-100 transition-opacity" class="p-1 hover:bg-slate-200 dark:hover:bg-slate-700 rounded opacity-0 group-hover/context:opacity-100 transition-opacity"
title="清空背景" title="清空背景"
> >
@@ -360,13 +361,13 @@ const translate = async () => {
</button> </button>
</div> </div>
<textarea <textarea
v-model="settings.context" v-model="context"
placeholder="在此输入背景信息，有助于提升翻译准确度..." placeholder="在此输入背景信息，有助于提升翻译准确度..."
class="w-full bg-transparent border-none outline-none text-sm text-slate-500 dark:text-slate-400 resize-none h-14 leading-normal placeholder:italic placeholder:text-slate-300 dark:placeholder:text-slate-600" class="w-full bg-transparent border-none outline-none text-sm text-slate-500 dark:text-slate-400 resize-none h-14 leading-normal placeholder:italic placeholder:text-slate-300 dark:placeholder:text-slate-600"
></textarea> ></textarea>
</div> </div>
<div class="p-4 border-t dark:border-slate-800 flex justify-end shrink-0"> <button <div class="p-4 border-t dark:border-slate-800 bg-slate-50/30 dark:bg-transparent flex justify-end shrink-0"> <button
@click="translate" @click="translate"
:disabled="isTranslating || !sourceText.trim()" :disabled="isTranslating || !sourceText.trim()"
class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm" class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
@@ -379,8 +380,8 @@ const translate = async () => {
</div> </div>
<!-- Target Pane --> <!-- Target Pane -->
<div class="flex-1 flex flex-col min-h-0 bg-slate-50/30 dark:bg-slate-900/50 relative h-full"> <div class="flex-1 flex flex-col min-h-0 bg-slate-100/20 dark:bg-slate-900/50 relative h-full">
<div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40 shrink-0"> <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
<!-- Custom Target Dropdown --> <!-- Custom Target Dropdown -->
<div class="relative lang-dropdown min-w-30"> <div class="relative lang-dropdown min-w-30">
<button <button
@@ -524,18 +525,18 @@ const translate = async () => {
</div> </div>
<!-- Settings View --> <!-- Settings View -->
<div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10 min-h-0"> <div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-100/50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
<div class="max-w-2xl mx-auto space-y-8"> <div class="max-w-2xl mx-auto space-y-8">
<section> <section>
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">API 配置预设</h2> <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">API 配置预设</h2>
<div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-1.5 space-y-1"> <div class="bg-white/60 dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-1.5 space-y-1">
<div v-if="settings.profiles.length === 0" class="p-8 text-center text-sm text-slate-400 dark:text-slate-600 italic"> <div v-if="settings.profiles.length === 0" class="p-8 text-center text-sm text-slate-400 dark:text-slate-600 italic">
暂无预设配置 暂无预设配置
</div> </div>
<div <div
v-for="profile in settings.profiles" v-for="profile in settings.profiles"
:key="profile.id" :key="profile.id"
class="p-3 flex items-center justify-between group hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors rounded-lg" class="p-3 flex items-center justify-between group hover:bg-slate-100/50 dark:hover:bg-slate-800/50 transition-colors rounded-lg"
> >
<div class="flex flex-col gap-0.5 min-w-0"> <div class="flex flex-col gap-0.5 min-w-0">
<span class="text-sm font-semibold text-slate-700 dark:text-slate-200 truncate">{{ profile.name }}</span> <span class="text-sm font-semibold text-slate-700 dark:text-slate-200 truncate">{{ profile.name }}</span>
@@ -600,7 +601,7 @@ const translate = async () => {
</button> </button>
</div> </div>
</div> </div>
<div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-6 space-y-4"> <div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6 space-y-4">
<div class="space-y-2"> <div class="space-y-2">
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Base URL</label> <label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Base URL</label>
<input <input
@@ -651,7 +652,7 @@ const translate = async () => {
<section> <section>
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">提示词工程</h2> <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">提示词工程</h2>
<div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-6"> <div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-6">
<div class="space-y-2"> <div class="space-y-2">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<label class="text-sm font-medium text-slate-700 dark:text-slate-300">系统提示词模板</label> <label class="text-sm font-medium text-slate-700 dark:text-slate-300">系统提示词模板</label>
@@ -672,10 +673,10 @@ const translate = async () => {
</div> </div>
<!-- Logs View --> <!-- Logs View -->
<div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10 min-h-0"> <div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-100/50 dark:bg-slate-950 p-6 md:p-10 min-h-0">
<div class="max-w-3xl mx-auto space-y-6"> <div class="max-w-3xl mx-auto space-y-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">调试日志</h2> <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">日志</h2>
<button <button
@click="settings.logs = []" @click="settings.logs = []"
class="text-xs text-red-600 dark:text-red-400 hover:underline flex items-center gap-1" class="text-xs text-red-600 dark:text-red-400 hover:underline flex items-center gap-1"
@@ -684,7 +685,7 @@ const translate = async () => {
清空 清空
</button> </button>
</div> </div>
<div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-4 space-y-4"> <div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm/5 border dark:border-slate-800 p-4 space-y-4">
<div v-if="settings.logs.length === 0" class="text-sm text-slate-400 dark:text-slate-500 text-center py-10 italic"> <div v-if="settings.logs.length === 0" class="text-sm text-slate-400 dark:text-slate-500 text-center py-10 italic">
暂无日志记录。请尝试进行翻译。 暂无日志记录。请尝试进行翻译。
</div> </div>
@@ -704,7 +705,7 @@ const translate = async () => {
)" )"
>{{ log.type === 'request' ? '请求' : log.type === 'response' ? '响应' : '错误' }}</span> >{{ log.type === 'request' ? '请求' : log.type === 'response' ? '响应' : '错误' }}</span>
</div> </div>
<pre class="bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg overflow-x-auto text-slate-600 dark:text-slate-300 max-h-56 leading-relaxed shadow-inner border border-slate-100 dark:border-slate-700">{{ typeof log.content === 'object' ? JSON.stringify(log.content, null, 2) : log.content }}</pre> <pre class="bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg overflow-x-auto text-slate-600 dark:text-slate-300 max-h-48 leading-relaxed shadow-inner border border-slate-100 dark:border-slate-700">{{ typeof log.content === 'object' ? JSON.stringify(log.content, null, 2) : log.content }}</pre>
</div> </div>
</div> </div>
</div> </div>
@@ -712,9 +713,9 @@ const translate = async () => {
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer class="h-8 bg-slate-100 dark:bg-slate-900 border-t dark:border-slate-800 flex items-center px-4 justify-between shrink-0"> <footer class="h-8 bg-slate-200/40 dark:bg-slate-900 border-t dark:border-slate-800 flex items-center px-4 justify-between shrink-0">
<div class="text-[10px] text-slate-400 dark:text-slate-500"> <div class="text-[10px] text-slate-400 dark:text-slate-500">
{{ settings.apiBaseUrl }} {{ settings.modelName }}
</div> </div>
<div class="text-[10px] text-slate-400 dark:text-slate-500"> <div class="text-[10px] text-slate-400 dark:text-slate-500">
Client v{{ pkg.version }} Client v{{ pkg.version }}

2
src/stores/settings.ts
View File

@@ -67,7 +67,6 @@ export const useSettingsStore = defineStore('settings', () => {
const profiles = useLocalStorage<ApiProfile[]>('api-profiles', []); const profiles = useLocalStorage<ApiProfile[]>('api-profiles', []);
const enableStreaming = useLocalStorage('enable-streaming', true); const enableStreaming = useLocalStorage('enable-streaming', true);
const systemPromptTemplate = useLocalStorage('system-prompt-template', DEFAULT_TEMPLATE); const systemPromptTemplate = useLocalStorage('system-prompt-template', DEFAULT_TEMPLATE);
const context = useLocalStorage('translation-context', '');
// 存储整个对象以保持一致性 // 存储整个对象以保持一致性
const sourceLang = useLocalStorage<Language>('source-lang-v2', LANGUAGES[0]); const sourceLang = useLocalStorage<Language>('source-lang-v2', LANGUAGES[0]);
@@ -98,7 +97,6 @@ export const useSettingsStore = defineStore('settings', () => {
profiles, profiles,
enableStreaming, enableStreaming,
systemPromptTemplate, systemPromptTemplate,
context,
sourceLang, sourceLang,
targetLang, targetLang,
speakerIdentity, speakerIdentity,