add chat sys prompts to settings

src/components/SettingsView.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown, Eye, EyeOff, Pencil } from 'lucide-vue-next';
-import { useSettingsStore, DEFAULT_TEMPLATE, DEFAULT_EVALUATION_TEMPLATE, DEFAULT_REFINEMENT_TEMPLATE, type ApiProfile } from '../stores/settings';
+import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown, Eye, EyeOff, Pencil, MessageSquare } from 'lucide-vue-next';
+import { 
+  useSettingsStore, 
+  DEFAULT_TEMPLATE, 
+  DEFAULT_EVALUATION_TEMPLATE, 
+  DEFAULT_REFINEMENT_TEMPLATE, 
+  CONVERSATION_SYSTEM_PROMPT_TEMPLATE,
+  CONVERSATION_EVALUATION_PROMPT_TEMPLATE,
+  CONVERSATION_REFINEMENT_PROMPT_TEMPLATE,
+  type ApiProfile 
+} from '../stores/settings';
 import { cn } from '../lib/utils';
 
 const settings = useSettingsStore();
-const settingsCategory = ref<'api' | 'general' | 'prompts'>('api');
+const settingsCategory = ref<'api' | 'general' | 'prompts' | 'chat-prompts'>('api');
 const showApiKey = ref(false);
 
 const newProfileName = ref('');
@@ -129,6 +138,18 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
               </div>
               提示词工程
             </button>
+            <button 
+              @click="settingsCategory = 'chat-prompts'"
+              :class="cn(
+                'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
+                settingsCategory === 'chat-prompts' ? '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 === 'chat-prompts' ? 'bg-blue-100 dark:bg-blue-900/50' : 'bg-slate-100 dark:bg-slate-800')">
+                <MessageSquare class="w-4 h-4" />
+              </div>
+              对话提示词
+            </button>
           </nav>
         </div>
 
@@ -490,6 +511,82 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
               </div>
             </template>
 
+            <!-- Chat Prompt Engineering -->
+            <template v-if="settingsCategory === 'chat-prompts'">
+              <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="space-y-8">
+                <!-- Chat Translation Prompt -->
+                <div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 overflow-hidden flex flex-col">
+                  <div class="px-5 py-3 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-950 flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                      <div class="w-2 h-2 rounded-full bg-blue-500"></div>
+                      <h3 class="text-sm font-bold text-slate-700 dark:text-slate-200">对话翻译指令</h3>
+                    </div>
+                    <button @click="settings.chatSystemPromptTemplate = CONVERSATION_SYSTEM_PROMPT_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline font-medium">恢复默认</button>
+                  </div>
+                  <textarea 
+                    v-model="settings.chatSystemPromptTemplate"
+                    rows="10"
+                    class="w-full p-5 bg-transparent outline-none font-mono text-xs leading-relaxed text-slate-800 dark:text-slate-300 resize-y"
+                    spellcheck="false"
+                  ></textarea>
+                  <div class="px-5 py-3 bg-slate-50 dark:bg-slate-950 border-t dark:border-slate-800">
+                    <div class="flex flex-wrap gap-1.5">
+                      <span v-for="tag in ['{ME_NAME}', '{ME_GENDER}', '{ME_LANG}', '{PART_NAME}', '{PART_GENDER}', '{PART_LANG}', '{HISTORY_BLOCK}', '{FROM_LANG}', '{TO_LANG}', '{MY_TONE}']" :key="tag" class="px-2 py-0.5 bg-white dark:bg-slate-800 text-[10px] font-mono rounded-md border dark:border-slate-700 text-slate-500 shadow-sm">{{ tag }}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Chat Evaluation Prompt -->
+                <div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 overflow-hidden flex flex-col">
+                  <div class="px-5 py-3 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-950 flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                      <div class="w-2 h-2 rounded-full bg-amber-500"></div>
+                      <h3 class="text-sm font-bold text-slate-700 dark:text-slate-200">对话审计指令</h3>
+                    </div>
+                    <button @click="settings.chatEvaluationPromptTemplate = CONVERSATION_EVALUATION_PROMPT_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline font-medium">恢复默认</button>
+                  </div>
+                  <textarea 
+                    v-model="settings.chatEvaluationPromptTemplate"
+                    rows="12"
+                    class="w-full p-5 bg-transparent outline-none font-mono text-xs leading-relaxed text-slate-800 dark:text-slate-300 resize-y"
+                    spellcheck="false"
+                  ></textarea>
+                  <div class="px-5 py-3 bg-slate-50 dark:bg-slate-950 border-t dark:border-slate-800">
+                    <div class="flex flex-wrap gap-1.5">
+                      <span v-for="tag in ['{ME_NAME}', '{ME_GENDER}', '{ME_LANG}', '{PART_NAME}', '{PART_GENDER}', '{PART_LANG}', '{TARGET_TONE}', '{HISTORY_BLOCK}']" :key="tag" class="px-2 py-0.5 bg-white dark:bg-slate-800 text-[10px] font-mono rounded-md border dark:border-slate-700 text-slate-500 shadow-sm">{{ tag }}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Chat Refinement Prompt -->
+                <div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 overflow-hidden flex flex-col">
+                  <div class="px-5 py-3 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-950 flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                      <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                      <h3 class="text-sm font-bold text-slate-700 dark:text-slate-200">对话润色指令</h3>
+                    </div>
+                    <button @click="settings.chatRefinementPromptTemplate = CONVERSATION_REFINEMENT_PROMPT_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline font-medium">恢复默认</button>
+                  </div>
+                  <textarea 
+                    v-model="settings.chatRefinementPromptTemplate"
+                    rows="10"
+                    class="w-full p-5 bg-transparent outline-none font-mono text-xs leading-relaxed text-slate-800 dark:text-slate-300 resize-y"
+                    spellcheck="false"
+                  ></textarea>
+                  <div class="px-5 py-3 bg-slate-50 dark:bg-slate-950 border-t dark:border-slate-800">
+                    <div class="flex flex-wrap gap-1.5">
+                      <span v-for="tag in ['{ME_NAME}', '{ME_GENDER}', '{ME_LANG}', '{PART_NAME}', '{PART_GENDER}', '{PART_LANG}', '{TARGET_TONE}', '{HISTORY_BLOCK}', '{ORIGINAL_TEXT}', '{CURRENT_TRANSLATION}', '{SUGGESTIONS}']" :key="tag" class="px-2 py-0.5 bg-white dark:bg-slate-800 text-[10px] font-mono rounded-md border dark:border-slate-700 text-slate-500 shadow-sm">{{ tag }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+
           </div>
         </div>
       </div>