support provide context

src/App.vue

@@ -204,19 +204,21 @@ 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]\n${settings.context || 'None provided.'}\n\n[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
   };
@@ -333,13 +335,36 @@ const translate = async () => {
               </button>
             </div>
           </div>
-          <textarea
-            v-model="sourceText"
-            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">
-            <button 
+                      <textarea
+                      v-model="sourceText"
+                      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>
+          
+                    <!-- 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="flex items-center justify-between mb-1.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="settings.context"
+                            @click="settings.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="settings.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 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"
@@ -636,7 +661,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>