单个翻译使用组件，优化翻译逻辑

src/components/PromptEditor.vue

@@ -41,6 +41,14 @@ const selectedFolderId = ref<string>('');
 const viewMode = ref<'compact' | 'detail'>('compact');
 const showPresetDropdown = ref(false);
 const showTranslationPopup = ref(false);
+const translationTargetToken = ref<string | null>(null);
+
+const translationTokens = computed(() => {
+  if (translationTargetToken.value) {
+    return [translationTargetToken.value];
+  }
+  return unmappedTokens.value;
+});
 const notification = ref<{ message: string; type: 'success' | 'error' | 'info'; show: boolean }>({ 
   message: '', 
   type: 'info', 
@@ -623,8 +631,10 @@ function commitEdit() {
 function cancelEdit() { editingIndex.value = null; }
 
 function showAddMap(i: number) {
-  addingMapIndex.value = i; addingMapValue.value = '';
+  const token = tokens.value[i];
-  editingIndex.value = null;
+  if (!token) return;
+  translationTargetToken.value = token;
+  showTranslationPopup.value = true;
 }
 function commitAddMap() {
   if (addingMapIndex.value == null) return;
@@ -990,7 +1000,7 @@ function isRemoveDisabled(token: string): boolean {
             <button 
               v-if="unmappedTokens.length > 0" 
               class="pe-auto-trans-btn" 
-              @click="showTranslationPopup = true"
+              @click="() => { translationTargetToken = null; showTranslationPopup = true; }"
               title="自动翻译未映射词条"
             >
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -1184,23 +1194,7 @@ function isRemoveDisabled(token: string): boolean {
               </div>
             </div>
             
-            <div v-if="addingMapIndex === i" class="pe-add-panel">
+
-              <input v-model="addingMapValue" :placeholder="`请输入 ${selectedLang} 的翻译`" @keyup.enter="commitAddMap" />
-              <div class="pe-add-actions">
-                <button @click="autoTranslateSingle" class="pe-trans-btn" title="自动翻译">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M5 8l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M4 14l6-6 2-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M2 5h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M7 2v3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M22 22l-5-13-5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    <path d="M14.2 18h5.6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                  </svg>
-                </button>
-                <button @click="commitAddMap" class="pe-confirm-btn">添加</button>
-                <button @click="() => { addingMapIndex = null; addingMapValue = ''; }" class="pe-cancel-btn">取消</button>
-              </div>
-            </div>
           </div>
         </div>
         </div>
@@ -1210,9 +1204,9 @@ function isRemoveDisabled(token: string): boolean {
     <!-- 翻译弹窗 -->
     <TranslationPopup
       :visible="showTranslationPopup"
-      :tokens="unmappedTokens"
+      :tokens="translationTokens"
       :target-lang="selectedLang"
-      @close="showTranslationPopup = false"
+      @close="() => { showTranslationPopup = false; translationTargetToken = null; }"
       @apply="handleApplyTranslation"
     />
 

src/components/TranslationPopup.vue

@@ -30,7 +30,7 @@
               <span>全选</span>
             </label>
             <span>原词</span>
-            <span>翻译结果</span>
+            <span>翻译结果 (可直接编辑)</span>
           </div>
           
           <div v-for="token in tokens" :key="token" class="tp-item" :class="{ selected: selected.has(token) }">
@@ -43,17 +43,21 @@
             </label>
             <div class="tp-item-key" :title="token">{{ parseDetailedToken(token).core }}</div>
             <div class="tp-item-trans">
-              <div v-if="results[token] !== undefined" class="tp-trans-result">
+              <div class="tp-trans-wrapper">
                 <input 
                   v-model="results[token]" 
                   class="tp-trans-input" 
-                  placeholder="翻译结果"
+                  :class="{ 'has-error': errors[token] }"
+                  placeholder="待翻译"
+                  :disabled="translating.has(token)"
                 />
+                <div v-if="translating.has(token)" class="tp-input-spinner">
+                  <span class="spinner"></span>
+                </div>
               </div>
-              <div v-else-if="translating.has(token)" class="tp-status loading">
+              <div v-if="errors[token]" class="tp-error-msg" :title="errors[token]">
-                <span class="spinner"></span>
+                {{ errors[token] }}
               </div>
-              <div v-else class="tp-status pending">待翻译</div>
             </div>
           </div>
         </div>
@@ -85,6 +89,7 @@ const emit = defineEmits<{
 }>();
 
 const results = reactive<Record<string, string>>({});
+const errors = reactive<Record<string, string>>({});
 const translating = reactive(new Set<string>());
 const selected = reactive(new Set<string>());
 const loading = ref(false);
@@ -96,7 +101,16 @@ watch(() => props.visible, (val) => {
   if (val) {
     // 初始化选中状态
     selected.clear();
-    props.tokens.forEach(t => selected.add(t));
+    props.tokens.forEach(t => {
+      selected.add(t);
+      // 确保每个 token 都有对应的 result 条目，方便绑定 v-model
+      if (results[t] === undefined) {
+        results[t] = '';
+      }
+      // 清除旧错误
+      delete errors[t];
+    });
+    
     // 检查缓存
     props.tokens.forEach(t => {
       if (cache[t]) {
@@ -133,9 +147,15 @@ function close() {
 
 async function startTranslation() {
   if (loading.value) return;
+  
+  // 只翻译选中的项目
+  const toTranslate = Array.from(selected);
+  if (toTranslate.length === 0) return;
+
   loading.value = true;
   
-  const toTranslate = props.tokens.filter(t => !results[t]);
+  // 清除之前的错误
+  toTranslate.forEach(t => delete errors[t]);
   
   // 使用换行符作为分隔符，大多数翻译 API 能正确处理多行文本
   const SEPARATOR = '\n';
@@ -171,17 +191,21 @@ async function startTranslation() {
         batch.forEach((token, idx) => {
           const trans = translations[idx] ? translations[idx].trim() : '';
           if (trans) {
-            // 保存时，如果 token 是纯词（无包裹/权重），直接保存翻译结果
-            // 如果 token 有包裹/权重，我们应该只保存核心词的映射，而不是将整个 token 作为 key
-            // 但是这里的 results 是按 token 索引的显示结果。
-            // 用户希望在这里看到的是核心词的翻译结果，而不是带符号的。
             results[token] = trans;
             cache[token] = trans;
+          } else {
+             // 翻译结果为空
+             // errors[token] = '翻译为空';
           }
         });
+      } else {
+        throw new Error(data.message || '翻译失败');
       }
-    } catch (e) {
+    } catch (e: any) {
       console.error('Batch translation failed', e);
+      batch.forEach(token => {
+        errors[token] = '翻译失败';
+      });
     } finally {
       batch.forEach(t => translating.delete(t));
     }
@@ -193,7 +217,7 @@ async function startTranslation() {
 function apply() {
   const list: { key: string; trans: string }[] = [];
   for (const key of selected) {
-    if (results[key]) {
+    if (results[key] && results[key].trim()) {
       const { core } = parseDetailedToken(key);
       list.push({ key: core, trans: results[key] });
     }
@@ -498,4 +522,43 @@ function apply() {
   cursor: not-allowed;
   transform: none;
 }
+
+.tp-trans-wrapper {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.tp-input-spinner {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-accent);
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+.tp-input-spinner .spinner {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.tp-trans-input.has-error {
+  border-color: var(--color-error);
+  background-color: #fff1f2;
+}
+
+.tp-error-msg {
+  color: var(--color-error);
+  font-size: 0.75rem;
+  margin-left: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+}
 </style>