change the left bottom

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ai-translate-client",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -19,7 +19,7 @@ dependencies = [
 
 [[package]]
 name = "ai-translate-client"
-version = "0.2.1"
+version = "0.3.1"
 dependencies = [
  "futures-util",
  "reqwest 0.12.28",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ai-translate-client"
-version = "0.2.1"
+version = "0.3.1"
 description = "A client using AI models to translate"
 authors = ["Julian"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "ai-translate-client",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "identifier": "top.volan.ai-translate-client",
   "build": {
     "beforeDevCommand": "pnpm dev",

src/App.vue

@@ -129,6 +129,7 @@ onUnmounted(() => {
 
 // Translation State
 const sourceText = ref('');
+const context = ref('');
 const targetText = ref('');
 const isTranslating = ref(false);
 const showCopyFeedback = ref(false);
@@ -204,19 +205,23 @@ const translate = async () => {
   isTranslating.value = true;
   targetText.value = '';
 
-  const prompt = settings.systemPromptTemplate
+  const systemMessage = settings.systemPromptTemplate
     .replace(/{SOURCE_LANG}/g, sourceLang.value.englishName)
     .replace(/{SOURCE_CODE}/g, sourceLang.value.code)
     .replace(/{TARGET_LANG}/g, targetLang.value.englishName)
     .replace(/{TARGET_CODE}/g, targetLang.value.code)
     .replace(/{SPEAKER_IDENTITY}/g, settings.speakerIdentity)
-    .replace(/{TONE_REGISTER}/g, settings.toneRegister)
-    .replace(/{TEXT}/g, sourceText.value);
+    .replace(/{TONE_REGISTER}/g, settings.toneRegister);
+
+  const userMessage = context.value 
+    ? `[Context]\n${context.value}\n\n[Text to Translate]\n${sourceText.value}`
+    : `[Text to Translate]\n${sourceText.value}`;
 
   const requestBody = {
     model: settings.modelName,
     messages: [
-      { role: "user", content: prompt }
+      { role: "system", content: systemMessage },
+      { role: "user", content: userMessage }
     ],
     stream: settings.enableStreaming
   };
@@ -246,9 +251,9 @@ const translate = async () => {
 </script>
 
 <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 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'">
         <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>
@@ -256,7 +261,7 @@ const translate = async () => {
       <div class="flex items-center gap-2">
         <button 
           @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 ? '切换亮色主题' : '切换暗色主题'"
         >
           <Sun v-if="settings.isDark" class="w-5 h-5" />
@@ -264,15 +269,15 @@ const translate = async () => {
         </button>
         <button 
           @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="设置"
         >
           <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-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
-          title="调试日志"
+          :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>
@@ -281,10 +286,10 @@ const translate = async () => {
 
     <main class="flex-1 flex overflow-hidden min-h-0 relative">
       <!-- 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 -->
         <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 -->
             <div class="relative lang-dropdown min-w-30">
               <button 
@@ -338,8 +343,31 @@ const translate = async () => {
                       placeholder="请输入待翻译内容..."
                       class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300 dark:placeholder:text-slate-600 bg-transparent min-h-0"
                     ></textarea>
-          <div class="p-4 border-t dark:border-slate-800 flex justify-end shrink-0">
+          
+                    <!-- Context Input Area -->
+                    <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 h-5">
+                          <div class="flex items-center gap-1.5">
+                            <FileText class="w-4 h-4 text-slate-400" />
+                            <span class="text-[12px] font-bold text-slate-400 uppercase tracking-widest">情景背景 (可选)</span>
+                          </div>
                           <button 
+                            v-if="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"
+                            title="清空背景"
+                          >
+                            <Plus class="w-3 h-3 rotate-45 text-slate-400" />
+                          </button>
+                       </div>
+                       <textarea
+                          v-model="context"
+                          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"
+                       ></textarea>
+                    </div>
+          
+                    <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"
               :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"
@@ -352,8 +380,8 @@ const translate = async () => {
         </div>
 
         <!-- 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 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-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-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
             <!-- Custom Target Dropdown -->
             <div class="relative lang-dropdown min-w-30">
               <button 
@@ -497,18 +525,18 @@ const translate = async () => {
       </div>
 
       <!-- 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">
           <section>
             <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>
               <div 
                 v-for="profile in settings.profiles" 
                 :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">
                   <span class="text-sm font-semibold text-slate-700 dark:text-slate-200 truncate">{{ profile.name }}</span>
@@ -573,7 +601,7 @@ const translate = async () => {
                 </button>
               </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">
                 <label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Base URL</label>
                 <input 
@@ -624,7 +652,7 @@ const translate = async () => {
 
           <section>
             <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="flex items-center justify-between">
                   <label class="text-sm font-medium text-slate-700 dark:text-slate-300">系统提示词模板</label>
@@ -636,7 +664,7 @@ const translate = async () => {
                   class="w-full px-4 py-3 border dark:border-slate-700 rounded-lg bg-transparent focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-xs leading-relaxed text-slate-900 dark:text-slate-100"
                 ></textarea>
                 <div class="flex flex-wrap gap-2 mt-2">
-                   <span v-for="tag in ['{SOURCE_LANG}', '{SOURCE_CODE}', '{TARGET_LANG}', '{TARGET_CODE}', '{SPEAKER_IDENTITY}', '{TONE_REGISTER}', '{TEXT}']" :key="tag" class="px-2 py-1 bg-slate-100 dark:bg-slate-800 text-[10px] font-mono rounded border dark:border-slate-700 text-slate-600 dark:text-slate-400">{{ tag }}</span>
+                   <span v-for="tag in ['{SOURCE_LANG}', '{SOURCE_CODE}', '{TARGET_LANG}', '{TARGET_CODE}', '{SPEAKER_IDENTITY}', '{TONE_REGISTER}']" :key="tag" class="px-2 py-1 bg-slate-100 dark:bg-slate-800 text-[10px] font-mono rounded border dark:border-slate-700 text-slate-600 dark:text-slate-400">{{ tag }}</span>
                 </div>
               </div>
             </div>
@@ -645,10 +673,10 @@ const translate = async () => {
       </div>
 
       <!-- 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="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 
               @click="settings.logs = []" 
               class="text-xs text-red-600 dark:text-red-400 hover:underline flex items-center gap-1"
@@ -657,7 +685,7 @@ const translate = async () => {
               清空
             </button>
           </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>
@@ -677,7 +705,7 @@ const translate = async () => {
                   )"
                 >{{ log.type === 'request' ? '请求' : log.type === 'response' ? '响应' : '错误' }}</span>
               </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>
@@ -685,9 +713,9 @@ const translate = async () => {
     </main>
 
     <!-- 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">
-        {{ settings.apiBaseUrl }}
+        {{ settings.modelName }}
       </div>
       <div class="text-[10px] text-slate-400 dark:text-slate-500">
         Client v{{ pkg.version }}

src/stores/settings.ts

@@ -45,14 +45,11 @@ export const TONE_REGISTER_OPTIONS = [
 
 export const DEFAULT_TEMPLATE = `You are a professional {SOURCE_LANG} ({SOURCE_CODE}) to {TARGET_LANG} ({TARGET_CODE}) translator. Your goal is to accurately convey the meaning and nuances of the original {SOURCE_LANG} text while adhering to {TARGET_LANG} grammar, vocabulary, and cultural sensitivities.
 
-Translation Context & Style Constraints:
-Speaker Identity: {SPEAKER_IDENTITY}. Ensure all grammatical agreements and self-referential terms in {TARGET_LANG} reflect this.
-Tone & Register: {TONE_REGISTER}.
-
-Produce only the {TARGET_LANG} translation, without any additional explanations or commentary. Please translate the following {SOURCE_LANG} text into {TARGET_LANG}:
-
-
-{TEXT}`;
+[Constraints]
+1. Speaker Identity: {SPEAKER_IDENTITY}. Ensure all grammatical agreements and self-referential terms in {TARGET_LANG} reflect this.
+2. Tone & Register: {TONE_REGISTER}.
+3. Produce ONLY the {TARGET_LANG} translation, without any additional explanations, notes, or commentary.
+4. If [Context] is provided, use it strictly to disambiguate polysemous words. DO NOT add any factual information or descriptive details from the [Context] that are not present in the [Text to Translate].`;
 
 export interface ApiProfile {
   id: string;