☰

ParaTranz-AI

ParaTranz文本替换和AI翻译功能拓展。

  1. // ==UserScript==
  2. // @name         ParaTranz-AI
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.4.4
  5. // @description  ParaTranz文本替换和AI翻译功能拓展。
  6. // @author       HCPTangHY
  7. // @license      WTFPL
  8. // @match        https://paratranz.cn/*
  9. // @icon         https://paratranz.cn/favicon.png
  10. // @require      https://cdn.jsdelivr.net/npm/diff@5.1.0/dist/diff.min.js
  11. // @require      https://cdn.jsdelivr.net/npm/diff2html@3.4.51/bundles/js/diff2html-ui.min.js
  12. // @resource     css https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css
  13. // @grant        GM_getResourceURL
  14. // @grant        GM_getResourceText
  15. // @grant        GM_addStyle
  16. // ==/UserScript==
  17.  
  18. const PARATRANZ_AI_TOAST_STYLES = `
  19. /* Toast Notifications */
  20. #toast-container-paratranz-ai {
  21.     position: fixed;
  22.     bottom: 20px;
  23.     left: 50%;
  24.     transform: translateX(-50%);
  25.     z-index: 10000;
  26.     display: flex;
  27.     flex-direction: column-reverse;
  28.     align-items: center;
  29.     pointer-events: none; /* Allow clicks to pass through the container */
  30. }
  31.  
  32. .toast-message {
  33.     padding: 10px 20px;
  34.     margin-top: 10px;
  35.     border-radius: 5px;
  36.     color: white;
  37.     box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  38.     opacity: 0;
  39.     transform: translateY(20px);
  40.     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  41.     min-width: 250px;
  42.     max-width: 80vw;
  43.     text-align: center;
  44.     pointer-events: all; /* Individual toasts should be interactive if needed */
  45. }
  46.  
  47. .toast-message.show {
  48.     opacity: 1;
  49.     transform: translateY(0);
  50. }
  51.  
  52. .toast-message.toast-success { background-color: #28a745; }
  53. .toast-message.toast-error   { background-color: #dc3545; }
  54. .toast-message.toast-warning { background-color: #ffc107; color: black; }
  55. .toast-message.toast-info    { background-color: #17a2b8; }
  56. `;
  57. GM_addStyle(GM_getResourceText("css") + PARATRANZ_AI_TOAST_STYLES);
  58.  
  59. // fork from HeliumOctahelide https://greasyfork.org/zh-CN/scripts/503063-paratranz-tools
  60. (function() {
  61.     'use strict';
  62.  
  63.     // Helper function for Toast Notifications
  64.     function showToast(message, type = 'info', duration = 3000) {
  65.         let toastContainer = document.getElementById('toast-container-paratranz-ai');
  66.         if (!toastContainer) {
  67.             toastContainer = document.createElement('div');
  68.             toastContainer.id = 'toast-container-paratranz-ai';
  69.             document.body.appendChild(toastContainer);
  70.         }
  71.  
  72.         const toast = document.createElement('div');
  73.         toast.className = `toast-message toast-${type}`;
  74.         toast.textContent = message;
  75.  
  76.         toastContainer.appendChild(toast);
  77.  
  78.         // Animate in
  79.         requestAnimationFrame(() => {
  80.             toast.classList.add('show');
  81.         });
  82.  
  83.         // Auto-dismiss
  84.         setTimeout(() => {
  85.             toast.classList.remove('show');
  86.             toast.addEventListener('transitionend', () => {
  87.                 if (toast.parentElement) { // Check if still attached
  88.                     toast.remove();
  89.                 }
  90.                 if (toastContainer && !toastContainer.hasChildNodes()) {
  91.                     // Check if toastContainer is still in the DOM before removing
  92.                     if (toastContainer.parentElement) {
  93.                         toastContainer.remove();
  94.                     }
  95.                 }
  96.             }, { once: true });
  97.         }, duration);
  98.     }
  99.  
  100.     // 基类定义
  101.     class BaseComponent {
  102.         constructor(selector) {
  103.             this.selector = selector;
  104.             this.init();
  105.         }
  106.  
  107.         init() {
  108.             this.checkExistence();
  109.         }
  110.  
  111.         checkExistence() {
  112.             const element = document.querySelector(this.selector);
  113.             if (!element) {
  114.                 this.insert();
  115.             }
  116.             setTimeout(() => this.checkExistence(), 1000);
  117.         }
  118.  
  119.         insert() {
  120.             // 留空，子类实现具体插入逻辑
  121.         }
  122.     }
  123.  
  124.     // 按钮类定义，继承自BaseComponent
  125.     class Button extends BaseComponent {
  126.         constructor(selector, toolbarSelector, htmlContent, callback) {
  127.             super(selector);
  128.             this.toolbarSelector = toolbarSelector;
  129.             this.htmlContent = htmlContent;
  130.             this.callback = callback;
  131.         }
  132.  
  133.         insert() {
  134.             const toolbar = document.querySelector(this.toolbarSelector);
  135.             if (!toolbar) {
  136.                 console.log(`Toolbar not found: ${this.toolbarSelector}`);
  137.                 return;
  138.             }
  139.             if (toolbar && !document.querySelector(this.selector)) {
  140.                 const button = document.createElement('button');
  141.                 button.className = this.selector.split('.').join(' ');
  142.                 button.innerHTML = this.htmlContent;
  143.                 button.type = 'button';
  144.                 button.addEventListener('click', this.callback);
  145.                 toolbar.insertAdjacentElement('afterbegin', button);
  146.                 console.log(`Button inserted: ${this.selector}`);
  147.             }
  148.         }
  149.     }
  150.  
  151.     // 手风琴类定义，继承自BaseComponent
  152.     class Accordion extends BaseComponent {
  153.         constructor(selector, parentSelector) {
  154.             super(selector);
  155.             this.parentSelector = parentSelector;
  156.         }
  157.  
  158.         insert() {
  159.             const parentElement = document.querySelector(this.parentSelector);
  160.             if (!parentElement) {
  161.                 console.log(`Parent element not found: ${this.parentSelector}`);
  162.                 return;
  163.             }
  164.             if (parentElement && !document.querySelector(this.selector)) {
  165.                 const accordionHTML = `
  166.                     <div class="accordion" id="accordionExample"></div>
  167.                     <hr>
  168.                 `;
  169.                 parentElement.insertAdjacentHTML('afterbegin', accordionHTML);
  170.             }
  171.         }
  172.  
  173.         addCard(card) {
  174.             card.insert();
  175.         }
  176.     }
  177.  
  178.     // 卡片类定义，继承自BaseComponent
  179.     class Card extends BaseComponent {
  180.         constructor(selector, parentSelector, headingId, title, contentHTML) {
  181.             super(selector);
  182.             this.parentSelector = parentSelector;
  183.             this.headingId = headingId;
  184.             this.title = title;
  185.             this.contentHTML = contentHTML;
  186.         }
  187.  
  188.         insert() {
  189.             const parentElement = document.querySelector(this.parentSelector);
  190.             if (!parentElement) {
  191.                 console.log(`Parent element not found: ${this.parentSelector}`);
  192.                 return;
  193.             }
  194.             if (parentElement && !document.querySelector(this.selector)) {
  195.                 const cardHTML = `
  196.                     <div class="card m-0">
  197.                         <div class="card-header p-0" id="${this.headingId}">
  198.                             <h2 class="mb-0">
  199.                                 <button class="btn btn-link" type="button" aria-expanded="false" aria-controls="${this.selector.substring(1)}">
  200.                                     ${this.title}
  201.                                 </button>
  202.                             </h2>
  203.                         </div>
  204.                         <div id="${this.selector.substring(1)}" class="collapse" aria-labelledby="${this.headingId}" data-parent="#accordionExample" style="max-height: 70vh; overflow-y: auto;">
  205.                             <div class="card-body">
  206.                                 ${this.contentHTML}
  207.                             </div>
  208.                         </div>
  209.                     </div>
  210.                 `;
  211.                 parentElement.insertAdjacentHTML('beforeend', cardHTML);
  212.  
  213.                 const toggleButton = document.querySelector(`#${this.headingId} button`);
  214.                 const collapseDiv = document.querySelector(this.selector);
  215.                 toggleButton.addEventListener('click', function() {
  216.                     if (collapseDiv.style.maxHeight === '0px' || !collapseDiv.style.maxHeight) {
  217.                         collapseDiv.style.display = 'block';
  218.                         requestAnimationFrame(() => {
  219.                             collapseDiv.style.maxHeight = collapseDiv.scrollHeight + 'px';
  220.                         });
  221.                         toggleButton.setAttribute('aria-expanded', 'true');
  222.                     } else {
  223.                         collapseDiv.style.maxHeight = '0px';
  224.                         toggleButton.setAttribute('aria-expanded', 'false');
  225.                         collapseDiv.addEventListener('transitionend', () => {
  226.                             if (collapseDiv.style.maxHeight === '0px') {
  227.                                 collapseDiv.style.display = 'none';
  228.                             }
  229.                         }, { once: true });
  230.                     }
  231.                 });
  232.  
  233.                 collapseDiv.style.maxHeight = '0px';
  234.                 collapseDiv.style.overflow = 'hidden';
  235.                 collapseDiv.style.transition = 'max-height 0.3s ease';
  236.             }
  237.         }
  238.     }
  239.  
  240.     // 定义具体的文本替换管理卡片
  241.     class StringReplaceCard extends Card {
  242.         constructor(parentSelector) {
  243.             const headingId = 'headingOne';
  244.             const contentHTML = `
  245.                 <div id="manageReplacePage">
  246.                     <div id="replaceListContainer"></div>
  247.                     <div class="replace-item mb-3 p-2" style="border: 1px solid #ccc; border-radius: 8px;">
  248.                         <input type="text" placeholder="查找文本" id="newFindText" class="form-control mb-2"/>
  249.                         <input type="text" placeholder="替换为" id="newReplacementText" class="form-control mb-2"/>
  250.                         <button class="btn btn-secondary" id="addReplaceRuleButton">
  251.                             <i class="far fa-plus-circle"></i> 添加替换规则
  252.                         </button>
  253.                     </div>
  254.                     <div class="mt-3">
  255.                         <button class="btn btn-primary" id="exportReplaceRulesButton">导出替换规则</button>
  256.                         <input type="file" id="importReplaceRuleInput" class="d-none"/>
  257.                         <button class="btn btn-primary" id="importReplaceRuleButton">导入替换规则</button>
  258.                     </div>
  259.                 </div>
  260.             `;
  261.             super('#collapseOne', parentSelector, headingId, '文本替换', contentHTML);
  262.         }
  263.  
  264.         insert() {
  265.             super.insert();
  266.             if (!document.querySelector('#collapseOne')) {
  267.                 return;
  268.             }
  269.             document.getElementById('addReplaceRuleButton').addEventListener('click', this.addReplaceRule);
  270.             document.getElementById('exportReplaceRulesButton').addEventListener('click', this.exportReplaceRules);
  271.             document.getElementById('importReplaceRuleButton').addEventListener('click', () => {
  272.                 document.getElementById('importReplaceRuleInput').click();
  273.             });
  274.             document.getElementById('importReplaceRuleInput').addEventListener('change', this.importReplaceRules);
  275.             this.loadReplaceList();
  276.         }
  277.  
  278.         addReplaceRule = () => {
  279.             const findText = document.getElementById('newFindText').value;
  280.             const replacementText = document.getElementById('newReplacementText').value;
  281.  
  282.             if (findText) {
  283.                 const replaceList = JSON.parse(localStorage.getItem('replaceList')) || [];
  284.                 replaceList.push({ findText, replacementText, disabled: false });
  285.                 localStorage.setItem('replaceList', JSON.stringify(replaceList));
  286.                 this.loadReplaceList();
  287.                 document.getElementById('newFindText').value = '';
  288.                 document.getElementById('newReplacementText').value = '';
  289.             }
  290.         };
  291.  
  292.         updateRuleText(index, type, value) {
  293.             const replaceList = JSON.parse(localStorage.getItem('replaceList')) || [];
  294.             if (replaceList[index]) {
  295.                 if (type === 'findText') {
  296.                     replaceList[index].findText = value;
  297.                 } else if (type === 'replacementText') {
  298.                     replaceList[index].replacementText = value;
  299.                 }
  300.                 localStorage.setItem('replaceList', JSON.stringify(replaceList));
  301.             }
  302.         }
  303.  
  304.         loadReplaceList() {
  305.             const replaceList = JSON.parse(localStorage.getItem('replaceList')) || [];
  306.             const replaceListDiv = document.getElementById('replaceListContainer');
  307.             replaceListDiv.innerHTML = '';
  308.             // Add scrollbar when rules are too many
  309.             replaceListDiv.style.maxHeight = '40vh'; // Adjust as needed
  310.             replaceListDiv.style.overflowY = 'auto';
  311.             replaceList.forEach((rule, index) => {
  312.                 const ruleDiv = document.createElement('div');
  313.                 ruleDiv.className = 'replace-item mb-3 p-2';
  314.                 ruleDiv.style.border = '1px solid #ccc';
  315.                 ruleDiv.style.borderRadius = '8px';
  316.                 ruleDiv.style.transition = 'transform 0.3s';
  317.                 ruleDiv.style.backgroundColor = rule.disabled ? '#f2dede' : '#fff';
  318.  
  319.                 const inputsDiv = document.createElement('div');
  320.                 inputsDiv.className = 'mb-2';
  321.  
  322.                 const findInput = document.createElement('input');
  323.                 findInput.type = 'text';
  324.                 findInput.className = 'form-control mb-1';
  325.                 findInput.value = rule.findText;
  326.                 findInput.placeholder = '查找文本';
  327.                 findInput.dataset.index = index;
  328.                 findInput.addEventListener('change', (event) => this.updateRuleText(index, 'findText', event.target.value));
  329.                 inputsDiv.appendChild(findInput);
  330.  
  331.                 const replInput = document.createElement('input');
  332.                 replInput.type = 'text';
  333.                 replInput.className = 'form-control';
  334.                 replInput.value = rule.replacementText;
  335.                 replInput.placeholder = '替换为';
  336.                 replInput.dataset.index = index;
  337.                 replInput.addEventListener('change', (event) => this.updateRuleText(index, 'replacementText', event.target.value));
  338.                 inputsDiv.appendChild(replInput);
  339.                 ruleDiv.appendChild(inputsDiv);
  340.  
  341.                 const buttonsDiv = document.createElement('div');
  342.                 buttonsDiv.className = 'd-flex justify-content-between';
  343.  
  344.                 const leftButtonGroup = document.createElement('div');
  345.                 leftButtonGroup.className = 'btn-group';
  346.                 leftButtonGroup.setAttribute('role', 'group');
  347.  
  348.                 const moveUpButton = this.createButton('上移', 'fas fa-arrow-up', () => this.moveReplaceRule(index, -1));
  349.                 const moveDownButton = this.createButton('下移', 'fas fa-arrow-down', () => this.moveReplaceRule(index, 1));
  350.                 const toggleButton = this.createButton('禁用/启用', rule.disabled ? 'fas fa-toggle-off' : 'fas fa-toggle-on', () => this.toggleReplaceRule(index));
  351.                 const applyButton = this.createButton('应用此规则', 'fas fa-play', () => this.applySingleReplaceRule(index));
  352.  
  353.                 leftButtonGroup.append(moveUpButton, moveDownButton, toggleButton, applyButton);
  354.  
  355.                 const rightButtonGroup = document.createElement('div');
  356.                 rightButtonGroup.className = 'btn-group';
  357.                 rightButtonGroup.setAttribute('role', 'group');
  358.  
  359.                 const deleteButton = this.createButton('删除', 'far fa-trash-alt', () => this.deleteReplaceRule(index), 'btn-danger');
  360.                 rightButtonGroup.appendChild(deleteButton);
  361.  
  362.                 buttonsDiv.append(leftButtonGroup, rightButtonGroup);
  363.                 ruleDiv.appendChild(buttonsDiv);
  364.                 replaceListDiv.appendChild(ruleDiv);
  365.             });
  366.  
  367.             replaceListDiv.style.display = 'none';
  368.             replaceListDiv.offsetHeight;
  369.             replaceListDiv.style.display = '';
  370.         }
  371.  
  372.         createButton(title, iconClass, onClick, btnClass = 'btn-secondary') {
  373.             const button = document.createElement('button');
  374.             button.className = `btn ${btnClass}`;
  375.             button.title = title;
  376.             button.innerHTML = `<i class="${iconClass}"></i>`;
  377.             button.addEventListener('click', onClick);
  378.             return button;
  379.         }
  380.  
  381.         deleteReplaceRule(index) {
  382.             const replaceList = JSON.parse(localStorage.getItem('replaceList')) || [];
  383.             replaceList.splice(index, 1);
  384.             localStorage.setItem('replaceList', JSON.stringify(replaceList));
  385.             this.loadReplaceList();
  386.         }
  387.  
  388.         toggleReplaceRule(index) {
  389.             const replaceList = JSON.parse(localStorage.getItem('replaceList')) || [];
  390.             replaceList[index].disabled = !replaceList[index].disabled;
  391.             localStorage.setItem('replaceList', JSON.stringify(replaceList));
  392.             this.loadReplaceList();
  393.         }
  394.  
  395.         applySingleReplaceRule(index) {
  396.             const replaceList = JSON.parse(localStorage.getItem('replaceList')) || [];
  397.             const rule = replaceList[index];
  398.             if (rule.disabled || !rule.findText) return;
  399.  
  400.             const textareas = document.querySelectorAll('textarea.translation.form-control');
  401.             textareas.forEach(textarea => {
  402.                 let text = textarea.value;
  403.                 text = text.replaceAll(rule.findText, rule.replacementText);
  404.                 this.simulateInputChange(textarea, text);
  405.             });
  406.         }
  407.  
  408.         moveReplaceRule(index, direction) {
  409.             const replaceList = JSON.parse(localStorage.getItem('replaceList')) || [];
  410.             const newIndex = index + direction;
  411.             if (newIndex >= 0 && newIndex < replaceList.length) {
  412.                 const [movedItem] = replaceList.splice(index, 1);
  413.                 replaceList.splice(newIndex, 0, movedItem);
  414.                 localStorage.setItem('replaceList', JSON.stringify(replaceList));
  415.                 this.loadReplaceListWithAnimation(index, newIndex);
  416.             }
  417.         }
  418.  
  419.         loadReplaceListWithAnimation(oldIndex, newIndex) {
  420.             const replaceListDiv = document.getElementById('replaceListContainer');
  421.             const items = replaceListDiv.querySelectorAll('.replace-item');
  422.             if (items[oldIndex] && items[newIndex]) {
  423.                 items[oldIndex].style.transform = `translateY(${(newIndex - oldIndex) * 100}%)`;
  424.                 items[newIndex].style.transform = `translateY(${(oldIndex - newIndex) * 100}%)`;
  425.             }
  426.  
  427.             setTimeout(() => {
  428.                 this.loadReplaceList();
  429.             }, 300);
  430.         }
  431.  
  432.         simulateInputChange(element, newValue) {
  433.             const inputEvent = new Event('input', { bubbles: true });
  434.             const originalValue = element.value;
  435.             element.value = newValue;
  436.  
  437.             const tracker = element._valueTracker;
  438.             if (tracker) {
  439.                 tracker.setValue(originalValue);
  440.             }
  441.             element.dispatchEvent(inputEvent);
  442.         }
  443.  
  444.         exportReplaceRules() {
  445.             const replaceList = JSON.parse(localStorage.getItem('replaceList')) || [];
  446.             const json = JSON.stringify(replaceList, null, 2);
  447.             const blob = new Blob([json], { type: 'application/json' });
  448.             const url = URL.createObjectURL(blob);
  449.             const a = document.createElement('a');
  450.             a.href = url;
  451.             a.download = 'replaceList.json';
  452.             a.click();
  453.             URL.revokeObjectURL(url);
  454.         }
  455.  
  456.         importReplaceRules(event) {
  457.             const file = event.target.files[0];
  458.             if (!file) return;
  459.             const reader = new FileReader();
  460.             reader.onload = e => {
  461.                 try {
  462.                     const content = e.target.result;
  463.                     const importedList = JSON.parse(content);
  464.                     if (Array.isArray(importedList) && importedList.every(item => typeof item.findText === 'string' && typeof item.replacementText === 'string')) {
  465.                         localStorage.setItem('replaceList', JSON.stringify(importedList));
  466.                         this.loadReplaceList();
  467.                         showToast('替换规则导入成功！', 'success');
  468.                     } else {
  469.                         showToast('导入的文件格式不正确。', 'error');
  470.                     }
  471.                 } catch (error) {
  472.                     console.error('Error importing rules:', error);
  473.                     showToast('导入失败，文件可能已损坏或格式不正确。', 'error');
  474.                 }
  475.             };
  476.             reader.readAsText(file);
  477.             event.target.value = null;
  478.         }
  479.     }
  480.  
  481.     // 定义具体的机器翻译卡片
  482.     class MachineTranslationCard extends Card {
  483.         constructor(parentSelector) {
  484.             const headingId = 'headingTwo';
  485.             const contentHTML = `
  486.                     <button class="btn btn-primary" id="openTranslationConfigButton">配置翻译</button>
  487.                 <div class="mt-3">
  488.                     <div class="d-flex">
  489.                         <textarea id="originalText" class="form-control" style="width: 100%; height: 25vh;"></textarea>
  490.                         <div class="d-flex flex-column ml-2">
  491.                             <button class="btn btn-secondary mb-2" id="copyOriginalButton">
  492.                                 <i class="fas fa-copy"></i>
  493.                             </button>
  494.                             <button class="btn btn-secondary" id="translateButton">
  495.                                 <i class="fas fa-globe"></i>
  496.                             </button>
  497.                         </div>
  498.                     </div>
  499.                     <div class="d-flex mt-2">
  500.                         <textarea id="translatedText" class="form-control" style="width: 100%; height: 25vh;"></textarea>
  501.                         <div class="d-flex flex-column ml-2">
  502.                             <button class="btn btn-secondary mb-2" id="pasteTranslationButton">
  503.                                 <i class="fas fa-arrow-alt-left"></i>
  504.                             </button>
  505.                             <button class="btn btn-secondary" id="copyTranslationButton">
  506.                                 <i class="fas fa-copy"></i>
  507.                             </button>
  508.                         </div>
  509.                     </div>
  510.                 </div>
  511.  
  512.                 <!-- Translation Configuration Modal -->
  513.                 <div class="modal" id="translationConfigModal" tabindex="-1" role="dialog" style="display: none;">
  514.                     <div class="modal-dialog modal-lg" role="document"> <!-- Added modal-lg -->
  515.                         <div class="modal-content">
  516.                             <div class="modal-header py-2">
  517.                                 <h5 class="modal-title">翻译配置</h5>
  518.                                 <button type="button" class="close" id="closeTranslationConfigModal" aria-label="Close">
  519.                                     <span aria-hidden="true">&times;</span>
  520.                                 </button>
  521.                             </div>
  522.                             <div class="modal-body p-3" style="max-height: 80vh; overflow-y: auto;"> <!-- Increased max-height, added p-3 -->
  523.                                 <form id="translationConfigForm">
  524.                                     <div class="form-row">
  525.                                         <div class="form-group col-md-7">
  526.                                             <label for="apiConfigSelect">API 配置</label>
  527.                                             <select class="custom-select" id="apiConfigSelect">
  528.                                                 <option value="" selected>选择或新建配置...</option>
  529.                                             </select>
  530.                                         </div>
  531.                                         <div class="form-group col-md-5 d-flex align-items-end">
  532.                                             <button type="button" class="btn btn-success mr-2 w-100" id="saveApiConfigButton" title="保存或更新当前填写的配置"><i class="fas fa-save"></i> 保存</button>
  533.                                             <button type="button" class="btn btn-info mr-2 w-100" id="newApiConfigButton" title="清空表单以新建配置"><i class="fas fa-plus-circle"></i> 新建</button>
  534.                                             <button type="button" class="btn btn-danger w-100" id="deleteApiConfigButton" title="删除下拉框中选中的配置"><i class="fas fa-trash-alt"></i> 删除</button>
  535.                                         </div>
  536.                                     </div>
  537.                                     <hr>
  538.                                     <p><strong>当前配置详情：</strong></p>
  539.                                     <div class="form-row">
  540.                                         <div class="form-group col-md-6">
  541.                                             <label for="apiConfigName">配置名称</label>
  542.                                             <input type="text" class="form-control" id="apiConfigName" placeholder="为此配置命名 (例如 My OpenAI)">
  543.                                         </div>
  544.                                         <div class="form-group col-md-6">
  545.                                             <label for="apiKey">API Key</label>
  546.                                             <input type="text" class="form-control" id="apiKey" placeholder="Enter API key">
  547.                                         </div>
  548.                                     </div>
  549.                                     <div class="form-group">
  550.                                         <label for="baseUrl">Base URL</label>
  551.                                         <div class="input-group">
  552.                                             <input type="text" class="form-control" id="baseUrl" placeholder="Enter base URL">
  553.                                             <div class="input-group-append">
  554.                                                 <button class="btn btn-outline-secondary" type="button" title="OpenAI API" id="openaiButton">
  555.                                                     <img src="https://paratranz.cn/media/f2014e0647283fcff54e3a8f4edaa488.png!webp160" style="width: 16px; height: 16px;">
  556.                                                 </button>
  557.                                                 <button class="btn btn-outline-secondary" type="button" title="DeepSeek API" id="deepseekButton">
  558.                                                     <img src="https://paratranz.cn/media/0bfd294f99b9141e3432c0ffbf3d8e78.png!webp160" style="width: 16px; height: 16px;">
  559.                                                 </button>
  560.                                             </div>
  561.                                         </div>
  562.                                         <small id="fullUrlPreview" class="form-text text-muted mt-1" style="word-break: break-all;"></small>
  563.                                     </div>
  564.                                     <div class="form-row">
  565.                                         <div class="form-group col-md-8">
  566.                                             <label for="model">Model</label>
  567.                                             <div class="input-group">
  568.                                                 <input type="text" class="form-control" id="model" placeholder="Enter model (e.g., gpt-4o-mini)" list="modelDatalist">
  569.                                                 <datalist id="modelDatalist"></datalist>
  570.                                                 <div class="input-group-append">
  571.                                                     <button class="btn btn-outline-secondary" type="button" id="fetchModelsButton" title="Fetch Models from API">
  572.                                                         <i class="fas fa-sync-alt"></i>
  573.                                                     </button>
  574.                                                 </div>
  575.                                             </div>
  576.                                         </div>
  577.                                         <div class="form-group col-md-4">
  578.                                             <label for="temperature">Temperature</label>
  579.                                             <input type="number" step="0.1" class="form-control" id="temperature" placeholder="e.g., 0.7">
  580.                                         </div>
  581.                                     </div>
  582.                                     <div class="form-group">
  583.                                         <label for="prompt">Prompt</label>
  584.                                         <textarea class="form-control" id="prompt" rows="3" placeholder="Enter prompt or use default prompt. 可用变量: {{original}}, {{context}}, {{terms}}"></textarea>
  585.                                     </div>
  586.                                     <div class="form-group">
  587.                                         <label for="promptLibrarySelect">Prompt 库</label>
  588.                                         <div class="input-group">
  589.                                             <select class="custom-select" id="promptLibrarySelect">
  590.                                                 <option value="" selected>从库中选择或管理...</option>
  591.                                             </select>
  592.                                             <div class="input-group-append">
  593.                                                 <button class="btn btn-outline-secondary" type="button" id="saveToPromptLibraryButton" title="保存当前Prompt到库"><i class="fas fa-save"></i></button>
  594.                                                 <button class="btn btn-outline-danger" type="button" id="deleteFromPromptLibraryButton" title="从库中删除选定Prompt"><i class="fas fa-trash-alt"></i></button>
  595.                                             </div>
  596.                                         </div>
  597.                                     </div>
  598.                                     <div class="form-group">
  599.                                         <label>自动化选项</label>
  600.                                         <div class="d-flex">
  601.                                             <div class="custom-control custom-switch mr-3">
  602.                                                 <input type="checkbox" class="custom-control-input" id="autoTranslateToggle">
  603.                                                 <label class="custom-control-label" for="autoTranslateToggle">自动翻译</label>
  604.                                             </div>
  605.                                             <div class="custom-control custom-switch">
  606.                                                 <input type="checkbox" class="custom-control-input" id="autoPasteToggle">
  607.                                                 <label class="custom-control-label" for="autoPasteToggle">自动粘贴</label>
  608.                                             </div>
  609.                                         </div>
  610.                                         <small class="form-text text-muted">自动翻译：进入新条目时自动翻译 / 自动粘贴：翻译完成后自动填充到翻译框</small>
  611.                                     </div>
  612.                                 </form>
  613.                             </div>
  614.                             <div class="modal-footer">
  615.                                 <button type="button" class="btn btn-secondary" id="closeTranslationConfigModalButton">关闭</button>
  616.                             </div>
  617.                         </div>
  618.                     </div>
  619.                 </div>
  620.             `;
  621.             super('#collapseTwo', parentSelector, headingId, '机器翻译', contentHTML);
  622.         }
  623.  
  624.         insert() {
  625.             super.insert();
  626.             if (!document.querySelector('#collapseTwo')) {
  627.                 return;
  628.             }
  629.             const translationConfigModal = document.getElementById('translationConfigModal');
  630.             document.getElementById('openTranslationConfigButton').addEventListener('click', function() {
  631.                 translationConfigModal.style.display = 'block';
  632.             });
  633.  
  634.             function closeModal() {
  635.                 translationConfigModal.style.display = 'none';
  636.             }
  637.  
  638.             document.getElementById('closeTranslationConfigModal').addEventListener('click', closeModal);
  639.             document.getElementById('closeTranslationConfigModalButton').addEventListener('click', closeModal);
  640.  
  641.             const apiConfigSelect = document.getElementById('apiConfigSelect');
  642.             const saveApiConfigButton = document.getElementById('saveApiConfigButton');
  643.             const newApiConfigButton = document.getElementById('newApiConfigButton');
  644.             const deleteApiConfigButton = document.getElementById('deleteApiConfigButton');
  645.             const apiConfigNameInput = document.getElementById('apiConfigName');
  646.             const baseUrlInput = document.getElementById('baseUrl');
  647.             const apiKeyInput = document.getElementById('apiKey');
  648.             const modelSelect = document.getElementById('model'); // This is now an input text field
  649.             const fetchModelsButton = document.getElementById('fetchModelsButton');
  650.             const promptInput = document.getElementById('prompt');
  651.             const temperatureInput = document.getElementById('temperature');
  652.             const autoTranslateToggle = document.getElementById('autoTranslateToggle');
  653.             const autoPasteToggle = document.getElementById('autoPasteToggle');
  654.             const promptLibrarySelect = document.getElementById('promptLibrarySelect');
  655.             const saveToPromptLibraryButton = document.getElementById('saveToPromptLibraryButton');
  656.             const deleteFromPromptLibraryButton = document.getElementById('deleteFromPromptLibraryButton');
  657.  
  658.             // API Config related functions are now defined in IIFE scope
  659.  
  660.             function updateActiveConfigField(fieldName, value) {
  661.                 const activeConfigName = getCurrentApiConfigName();
  662.                 if (activeConfigName) {
  663.                     let configs = getApiConfigurations();
  664.                     const activeConfigIndex = configs.findIndex(c => c.name === activeConfigName);
  665.                     if (activeConfigIndex > -1) {
  666.                         configs[activeConfigIndex][fieldName] = value;
  667.                         saveApiConfigurations(configs);
  668.                         // console.log(`Field '${fieldName}' for active config '${activeConfigName}' updated to '${value}' and saved.`);
  669.                     }
  670.                 }
  671.             }
  672.             
  673.             function updateFullUrlPreview(baseUrl) {
  674.                 const fullUrlPreview = document.getElementById('fullUrlPreview');
  675.                 if (baseUrl) {
  676.                     const fullUrl = `${baseUrl}${baseUrl.endsWith('/') ? '' : '/'}chat/completions`;
  677.                     fullUrlPreview.textContent = `完整URL: ${fullUrl}`;
  678.                 } else {
  679.                     fullUrlPreview.textContent = '';
  680.                 }
  681.             }
  682.  
  683.             function populateApiConfigSelect() {
  684.                 const configs = getApiConfigurations();
  685.                 const currentConfigName = getCurrentApiConfigName();
  686.                 apiConfigSelect.innerHTML = '<option value="">选择或新建配置...</option>'; // Changed placeholder
  687.                 configs.forEach(config => {
  688.                     const option = document.createElement('option');
  689.                     option.value = config.name;
  690.                     option.textContent = config.name;
  691.                     if (config.name === currentConfigName) {
  692.                         option.selected = true;
  693.                     }
  694.                     apiConfigSelect.appendChild(option);
  695.                 });
  696.             }
  697.  
  698.             function clearConfigForm() {
  699.                 apiConfigNameInput.value = '';
  700.                 baseUrlInput.value = '';
  701.                 apiKeyInput.value = '';
  702.                 // Optionally reset model, prompt, temp, toggles to defaults or leave them
  703.                 // modelSelect.value = 'gpt-4o-mini';
  704.                 // promptInput.value = '';
  705.                 // temperatureInput.value = '';
  706.                 // autoTranslateToggle.checked = false;
  707.                 // autoPasteToggle.checked = false;
  708.                 updateFullUrlPreview('');
  709.                 apiConfigSelect.value = ""; // Reset dropdown to placeholder
  710.             }
  711.             
  712.             function loadConfigToUI(configName) {
  713.                 const configs = getApiConfigurations();
  714.                 const config = configs.find(c => c.name === configName);
  715.                 if (config) {
  716.                     apiConfigNameInput.value = config.name;
  717.                     baseUrlInput.value = config.baseUrl;
  718.                     apiKeyInput.value = config.apiKey;
  719.                     modelSelect.value = config.model || localStorage.getItem('model') || 'gpt-4o-mini';
  720.                     promptInput.value = config.prompt || localStorage.getItem('prompt') || '';
  721.                     temperatureInput.value = config.temperature || localStorage.getItem('temperature') || '';
  722.                     autoTranslateToggle.checked = config.autoTranslateEnabled !== undefined ? config.autoTranslateEnabled : (localStorage.getItem('autoTranslateEnabled') === 'true');
  723.                     autoPasteToggle.checked = config.autoPasteEnabled !== undefined ? config.autoPasteEnabled : (localStorage.getItem('autoPasteEnabled') === 'true');
  724.                     setCurrentApiConfigName(config.name);
  725.                     apiConfigSelect.value = config.name; // Ensure dropdown reflects loaded config
  726.                 } else {
  727.                     clearConfigForm(); // Clear form if no specific config is loaded (e.g., "Select or create new")
  728.                 }
  729.                 updateFullUrlPreview(baseUrlInput.value);
  730.             }
  731.             
  732.             // Initial load
  733.             populateApiConfigSelect();
  734.             const activeConfigName = getCurrentApiConfigName();
  735.             if (activeConfigName) {
  736.                 loadConfigToUI(activeConfigName);
  737.             } else { 
  738.                 // Try to migrate old settings if no new config is active
  739.                 const oldBaseUrl = localStorage.getItem('baseUrl'); // Check for old individual settings
  740.                 const oldApiKey = localStorage.getItem('apiKey');
  741.                 if (oldBaseUrl && oldApiKey && !getApiConfigurations().length) { // Migrate only if no new configs exist
  742.                     const defaultConfigName = "默认迁移配置";
  743.                     const newConfig = {
  744.                         name: defaultConfigName,
  745.                         baseUrl: oldBaseUrl,
  746.                         apiKey: oldApiKey,
  747.                         model: localStorage.getItem('model') || 'gpt-4o-mini',
  748.                         prompt: localStorage.getItem('prompt') || '',
  749.                         temperature: localStorage.getItem('temperature') || '',
  750.                         autoTranslateEnabled: localStorage.getItem('autoTranslateEnabled') === 'true',
  751.                         autoPasteEnabled: localStorage.getItem('autoPasteEnabled') === 'true'
  752.                     };
  753.                     let configs = getApiConfigurations();
  754.                     configs.push(newConfig);
  755.                     saveApiConfigurations(configs);
  756.                     setCurrentApiConfigName(defaultConfigName);
  757.                     populateApiConfigSelect();
  758.                     loadConfigToUI(defaultConfigName);
  759.                     // Optionally remove old keys after successful migration
  760.                     // localStorage.removeItem('baseUrl'); localStorage.removeItem('apiKey');
  761.                 } else {
  762.                     // If no active config and no old settings to migrate, or if configs already exist, load general settings.
  763.                     modelSelect.value = localStorage.getItem('model') || 'gpt-4o-mini';
  764.                     promptInput.value = localStorage.getItem('prompt') || '';
  765.                     temperatureInput.value = localStorage.getItem('temperature') || '';
  766.                     autoTranslateToggle.checked = localStorage.getItem('autoTranslateEnabled') === 'true';
  767.                     autoPasteToggle.checked = localStorage.getItem('autoPasteEnabled') === 'true';
  768.                     clearConfigForm(); // Start with a clean slate for API specific parts if no config selected
  769.                 }
  770.             }
  771.  
  772.             apiConfigSelect.addEventListener('change', function() {
  773.                 if (this.value) {
  774.                     loadConfigToUI(this.value);
  775.                 } else {
  776.                     clearConfigForm();
  777.                     // User selected "Select or create new...", so we clear the form for a new entry.
  778.                     // Do not clear currentApiConfigName here, as they might just be viewing.
  779.                 }
  780.             });
  781.             
  782.             newApiConfigButton.addEventListener('click', function() {
  783.                 clearConfigForm();
  784.                 apiConfigNameInput.focus();
  785.             });
  786.  
  787.             saveApiConfigButton.addEventListener('click', function() {
  788.                 const name = apiConfigNameInput.value.trim();
  789.                 const baseUrl = baseUrlInput.value.trim();
  790.                 const apiKey = apiKeyInput.value.trim();
  791.  
  792.                 if (!name || !baseUrl || !apiKey) {
  793.                     showToast('配置名称、Base URL 和 API Key 不能为空。', 'error');
  794.                     return;
  795.                 }
  796.  
  797.                 let configs = getApiConfigurations();
  798.                 const existingConfigIndex = configs.findIndex(c => c.name === name);
  799.  
  800.                 const currentConfigData = {
  801.                     name,
  802.                     baseUrl,
  803.                     apiKey,
  804.                     model: modelSelect.value,
  805.                     prompt: promptInput.value,
  806.                     temperature: temperatureInput.value,
  807.                     autoTranslateEnabled: autoTranslateToggle.checked,
  808.                     autoPasteEnabled: autoPasteToggle.checked
  809.                 };
  810.  
  811.                 if (existingConfigIndex > -1) {
  812.                     configs[existingConfigIndex] = currentConfigData; // Update existing
  813.                 } else {
  814.                     configs.push(currentConfigData); // Add new
  815.                 }
  816.                 saveApiConfigurations(configs);
  817.                 setCurrentApiConfigName(name); // Set this as the active config
  818.                 populateApiConfigSelect(); // Refresh dropdown
  819.                 apiConfigSelect.value = name; // Ensure the saved/updated config is selected
  820.                 showToast(`API 配置 "${name}" 已保存！`, 'success');
  821.             });
  822.  
  823.             deleteApiConfigButton.addEventListener('click', function() {
  824.                 const selectedNameToDelete = apiConfigSelect.value; // The config selected in dropdown
  825.                 if (!selectedNameToDelete) {
  826.                     showToast('请先从下拉列表中选择一个要删除的配置。', 'error');
  827.                     return;
  828.                 }
  829.                 if (!confirm(`确定要删除配置 "${selectedNameToDelete}" 吗？`)) {
  830.                     return;
  831.                 }
  832.  
  833.                 let configs = getApiConfigurations();
  834.                 configs = configs.filter(c => c.name !== selectedNameToDelete);
  835.                 saveApiConfigurations(configs);
  836.  
  837.                 // If the deleted config was the currently active one, clear the form and active status
  838.                 if (getCurrentApiConfigName() === selectedNameToDelete) {
  839.                     setCurrentApiConfigName(''); 
  840.                     clearConfigForm();
  841.                 }
  842.                 populateApiConfigSelect(); // Refresh dropdown
  843.                 showToast(`API 配置 "${selectedNameToDelete}" 已删除！`, 'success');
  844.                  // If there are other configs, load the first one or leave blank
  845.                 if (getApiConfigurations().length > 0) {
  846.                     const firstConfigName = getApiConfigurations()[0].name;
  847.                     loadConfigToUI(firstConfigName);
  848.                     apiConfigSelect.value = firstConfigName;
  849.                 } else {
  850.                     clearConfigForm(); // No configs left, clear form
  851.                 }
  852.             });
  853.             
  854.             // Event listeners for general (non-API-config specific) fields
  855.             // Event listeners for general (non-API-config specific) fields
  856.             // These save to general localStorage and also update the active API config if one is selected.
  857.             baseUrlInput.addEventListener('input', () => {
  858.                 updateFullUrlPreview(baseUrlInput.value);
  859.                 // Base URL and API Key are core to a config, usually not changed outside explicit save.
  860.             });
  861.             // apiKeyInput does not have a live update to avoid frequent writes of sensitive data.
  862.  
  863.             document.getElementById('openaiButton').addEventListener('click', () => {
  864.                 baseUrlInput.value = 'https://api.openai.com/v1';
  865.                 updateFullUrlPreview(baseUrlInput.value);
  866.             });
  867.             document.getElementById('deepseekButton').addEventListener('click', () => {
  868.                 baseUrlInput.value = 'https://api.deepseek.com';
  869.                 updateFullUrlPreview(baseUrlInput.value);
  870.             });
  871.             
  872.             fetchModelsButton.addEventListener('click', async () => {
  873.                 await this.fetchModelsAndUpdateDatalist();
  874.             });
  875.  
  876.             modelSelect.addEventListener('input', () => { // modelSelect is the input field
  877.                 localStorage.setItem('model', modelSelect.value);
  878.                 updateActiveConfigField('model', modelSelect.value);
  879.             });
  880.             promptInput.addEventListener('input', () => {
  881.                 localStorage.setItem('prompt', promptInput.value);
  882.                 updateActiveConfigField('prompt', promptInput.value);
  883.             });
  884.             temperatureInput.addEventListener('input', () => {
  885.                 const tempValue = temperatureInput.value;
  886.                 localStorage.setItem('temperature', tempValue);
  887.                 updateActiveConfigField('temperature', tempValue);
  888.             });
  889.             autoTranslateToggle.addEventListener('change', () => {
  890.                 localStorage.setItem('autoTranslateEnabled', autoTranslateToggle.checked);
  891.                 updateActiveConfigField('autoTranslateEnabled', autoTranslateToggle.checked);
  892.             });
  893.             autoPasteToggle.addEventListener('change', () => {
  894.                 localStorage.setItem('autoPasteEnabled', autoPasteToggle.checked);
  895.                 updateActiveConfigField('autoPasteEnabled', autoPasteToggle.checked);
  896.             });
  897.  
  898.             const PROMPT_LIBRARY_KEY = 'promptLibrary';
  899.  
  900.             function getPromptLibrary() {
  901.                 return JSON.parse(localStorage.getItem(PROMPT_LIBRARY_KEY)) || [];
  902.             }
  903.  
  904.             function savePromptLibrary(library) {
  905.                 localStorage.setItem(PROMPT_LIBRARY_KEY, JSON.stringify(library));
  906.             }
  907.  
  908.             function populatePromptLibrarySelect() {
  909.                 const library = getPromptLibrary();
  910.                 promptLibrarySelect.innerHTML = '<option value="" selected>从库中选择或管理...</option>';
  911.                 library.forEach((promptText) => {
  912.                     const option = document.createElement('option');
  913.                     option.value = promptText;
  914.                     option.textContent = promptText.substring(0, 50) + (promptText.length > 50 ? '...' : '');
  915.                     option.dataset.fulltext = promptText;
  916.                     promptLibrarySelect.appendChild(option);
  917.                 });
  918.             }
  919.  
  920.             promptLibrarySelect.addEventListener('change', function() {
  921.                 if (this.value) {
  922.                     promptInput.value = this.value;
  923.                     localStorage.setItem('prompt', this.value); // Keep for fallback if no config selected
  924.                     updateActiveConfigField('prompt', this.value);
  925.                 }
  926.             });
  927.  
  928.             saveToPromptLibraryButton.addEventListener('click', function() {
  929.                 const currentPrompt = promptInput.value.trim();
  930.                 if (currentPrompt) {
  931.                     let library = getPromptLibrary();
  932.                     if (!library.includes(currentPrompt)) {
  933.                         library.push(currentPrompt);
  934.                         savePromptLibrary(library);
  935.                         populatePromptLibrarySelect();
  936.                         promptLibrarySelect.value = currentPrompt;
  937.                         showToast('Prompt 已保存到库中。', 'success');
  938.                     } else {
  939.                         showToast('此 Prompt 已存在于库中。', 'warning');
  940.                     }
  941.                 } else {
  942.                     showToast('Prompt 内容不能为空。', 'error');
  943.                 }
  944.             });
  945.  
  946.             deleteFromPromptLibraryButton.addEventListener('click', function() {
  947.                 const selectedPromptValue = promptLibrarySelect.value;
  948.                 if (selectedPromptValue) {
  949.                     let library = getPromptLibrary();
  950.                     const indexToRemove = library.indexOf(selectedPromptValue);
  951.                     if (indexToRemove > -1) {
  952.                         library.splice(indexToRemove, 1);
  953.                         savePromptLibrary(library);
  954.                         populatePromptLibrarySelect();
  955.                         if (promptInput.value === selectedPromptValue) {
  956.                             promptInput.value = '';
  957.                             localStorage.setItem('prompt', '');
  958.                         }
  959.                         showToast('选定的 Prompt 已从库中删除。', 'success');
  960.                     }
  961.                 } else {
  962.                     showToast('请先从库中选择一个 Prompt 进行删除。', 'error');
  963.                 }
  964.             });
  965.  
  966.             populatePromptLibrarySelect();
  967.  
  968.             // Sync promptLibrarySelect with the initial promptInput value
  969.             const initialPromptValue = promptInput.value;
  970.             if (initialPromptValue) {
  971.                 const library = getPromptLibrary();
  972.                 if (library.includes(initialPromptValue)) {
  973.                     promptLibrarySelect.value = initialPromptValue;
  974.                 } else {
  975.                     promptLibrarySelect.value = ""; // If not in library, keep placeholder
  976.                 }
  977.             } else {
  978.                  promptLibrarySelect.value = ""; // Default to placeholder if no initial prompt
  979.             }
  980.             // Removed duplicated listeners for temperature and autoTranslateToggle here,
  981.             // as they are already defined above with updateActiveConfigField logic.
  982.  
  983.             this.setupTranslation();
  984.         }
  985.  
  986.         async fetchModelsAndUpdateDatalist() {
  987.             const modelDatalist = document.getElementById('modelDatalist');
  988.             const fetchModelsButton = document.getElementById('fetchModelsButton');
  989.             const originalButtonHtml = fetchModelsButton.innerHTML;
  990.             fetchModelsButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
  991.             fetchModelsButton.disabled = true;
  992.  
  993.             let API_SECRET_KEY = '';
  994.             let BASE_URL = '';
  995.  
  996.             const currentConfigName = getCurrentApiConfigName();
  997.             let activeConfig = null;
  998.  
  999.             if (currentConfigName) {
  1000.                 const configs = getApiConfigurations();
  1001.                 activeConfig = configs.find(c => c.name === currentConfigName);
  1002.             }
  1003.  
  1004.             if (activeConfig) {
  1005.                 BASE_URL = activeConfig.baseUrl;
  1006.                 API_SECRET_KEY = activeConfig.apiKey;
  1007.             } else {
  1008.                 // Fallback to general localStorage if no active config (less ideal)
  1009.                 BASE_URL = localStorage.getItem('baseUrl');
  1010.                 API_SECRET_KEY = localStorage.getItem('apiKey');
  1011.             }
  1012.  
  1013.             if (!BASE_URL || !API_SECRET_KEY) {
  1014.                 showToast('请先配置并选择一个有效的 API 配置 (包含 Base URL 和 API Key)。', 'error', 5000);
  1015.                 fetchModelsButton.innerHTML = originalButtonHtml;
  1016.                 fetchModelsButton.disabled = false;
  1017.                 return;
  1018.             }
  1019.  
  1020.             // Construct the models API URL (OpenAI standard is /models)
  1021.             const modelsUrl = `${BASE_URL}${BASE_URL.endsWith('/') ? '' : '/'}models`;
  1022.  
  1023.             try {
  1024.                 const response = await fetch(modelsUrl, {
  1025.                     method: 'GET',
  1026.                     headers: {
  1027.                         'Authorization': `Bearer ${API_SECRET_KEY}`
  1028.                     }
  1029.                 });
  1030.  
  1031.                 if (!response.ok) {
  1032.                     const errorData = await response.text();
  1033.                     console.error('Error fetching models:', response.status, errorData);
  1034.                     showToast(`获取模型列表失败: ${response.status} - ${errorData.substring(0,100)}`, 'error', 5000);
  1035.                     return;
  1036.                 }
  1037.  
  1038.                 const data = await response.json();
  1039.                 if (data && data.data && Array.isArray(data.data)) {
  1040.                     modelDatalist.innerHTML = ''; // Clear existing options
  1041.                     data.data.forEach(model => {
  1042.                         if (model.id) {
  1043.                             const option = document.createElement('option');
  1044.                             option.value = model.id;
  1045.                             modelDatalist.appendChild(option);
  1046.                         }
  1047.                     });
  1048.                     showToast('模型列表已更新。', 'success');
  1049.                 } else {
  1050.                     console.warn('Unexpected models API response structure:', data);
  1051.                     showToast('获取模型列表成功，但响应数据格式不符合预期。', 'warning', 4000);
  1052.                 }
  1053.             } catch (error) {
  1054.                 console.error('Failed to fetch models:', error);
  1055.                 showToast(`获取模型列表时发生网络错误: ${error.message}`, 'error', 5000);
  1056.             } finally {
  1057.                 fetchModelsButton.innerHTML = originalButtonHtml;
  1058.                 fetchModelsButton.disabled = false;
  1059.             }
  1060.         }
  1061.  
  1062.         setupTranslation() {
  1063.             function removeThoughtProcessContent(text) {
  1064.                 if (typeof text !== 'string') return text;
  1065.                 // 移除XML风格的思考标签
  1066.                 let cleanedText = text.replace(/<thought>[\s\S]*?<\/thought>/gi, '');
  1067.                 cleanedText = cleanedText.replace(/<thinking>[\s\S]*?<\/thinking>/gi, '');cleanedText = cleanedText.replace(/<think>[\s\S]*?<\/think>/gi, '');
  1068.                 cleanedText = cleanedText.replace(/<reasoning>[\s\S]*?<\/reasoning>/gi, '');
  1069.                 // 移除Markdown风格的思考标签
  1070.                 cleanedText = cleanedText.replace(/\[THOUGHT\][\s\S]*?\[\/THOUGHT\]/gi, '');
  1071.                 cleanedText = cleanedText.replace(/\[REASONING\][\s\S]*?\[\/REASONING\]/gi, '');
  1072.                 // 移除以特定关键词开头的思考过程
  1073.                 cleanedText = cleanedText.replace(/^(思考过程：|思考：|Thought process:|Thought:|Thinking:|Reasoning:)[\s\S]*?(\n|$)/gim, '');
  1074.                 // 移除常见的工具交互XML标签
  1075.                 cleanedText = cleanedText.replace(/<tool_code>[\s\S]*?<\/tool_code>/gi, '');
  1076.                 cleanedText = cleanedText.replace(/<tool_code_executing>[\s\S]*?<\/tool_code_executing>/gi, '');
  1077.                 cleanedText = cleanedText.replace(/<tool_code_completed>[\s\S]*?<\/tool_code_completed>/gi, '');
  1078.                 cleanedText = cleanedText.replace(/<tool_code_error>[\s\S]*?<\/tool_code_error>/gi, '');
  1079.                 cleanedText = cleanedText.replace(/<tool_code_output>[\s\S]*?<\/tool_code_output>/gi, '');
  1080.                 cleanedText = cleanedText.replace(/<tool_code_execution_succeeded>[\s\S]*?<\/tool_code_execution_succeeded>/gi, '');
  1081.                 cleanedText = cleanedText.replace(/<tool_code_execution_failed>[\s\S]*?<\/tool_code_execution_failed>/gi, '');
  1082.                 // 移除 SEARCH/REPLACE 块标记
  1083.                 cleanedText = cleanedText.replace(/<<<<<<< SEARCH[\s\S]*?>>>>>>> REPLACE/gi, '');
  1084.  
  1085.                 // 清理多余的空行，并将多个连续空行合并为一个
  1086.                 cleanedText = cleanedText.replace(/\n\s*\n/g, '\n');
  1087.                 // 移除首尾空白字符 (包括换行符)
  1088.                 cleanedText = cleanedText.trim();
  1089.  
  1090.                 return cleanedText;
  1091.             }
  1092.  
  1093.             const translationCache = {};
  1094.             const translationsInProgress = {}; 
  1095.  
  1096.             async function getCurrentStringId() {
  1097.                 const pathParts = window.location.pathname.split('/');
  1098.                 let stringId = null;
  1099.                 const stringsIndex = pathParts.indexOf('strings');
  1100.                 if (stringsIndex !== -1 && pathParts.length > stringsIndex + 1) {
  1101.                     const idFromPath = pathParts[stringsIndex + 1];
  1102.                     if (!isNaN(parseInt(idFromPath, 10))) {
  1103.                         stringId = idFromPath;
  1104.                     }
  1105.                 }
  1106.                 if (!stringId) {
  1107.                     const copyLinkButton = document.querySelector('.string-editor a.float-right.no-select[href*="/strings?id="]');
  1108.                     if (copyLinkButton) {
  1109.                         const href = copyLinkButton.getAttribute('href');
  1110.                         const urlParams = new URLSearchParams(href.split('?')[1]);
  1111.                         stringId = urlParams.get('id');
  1112.                     } else {
  1113.                          const settingsLink = document.querySelector('.string-editor .tab.context-tab a[href*="/settings/strings?id="]');
  1114.                          if (settingsLink) {
  1115.                             const href = settingsLink.getAttribute('href');
  1116.                             const urlParams = new URLSearchParams(href.split('?')[1]);
  1117.                             stringId = urlParams.get('id');
  1118.                          }
  1119.                     }
  1120.                 }
  1121.                 return stringId && !isNaN(parseInt(stringId, 10)) ? stringId : null;
  1122.             }
  1123.             
  1124.             function updateTranslationUI(text, modelName, stringIdForUI) {
  1125.                 document.getElementById('translatedText').value = text;
  1126.  
  1127.                 if (localStorage.getItem('autoPasteEnabled') === 'true') {
  1128.                     const targetTextarea = document.querySelector('textarea.translation.form-control');
  1129.                     // 修复：仅当翻译框为空时才自动粘贴
  1130.                     if (targetTextarea && targetTextarea.value.trim() === '') {
  1131.                         simulateInputChange(targetTextarea, text);
  1132.                     }
  1133.                 }
  1134.  
  1135.                 let translationMemoryDiv = document.querySelector('.translation-memory');
  1136.                 let mtListContainer;
  1137.  
  1138.                 if (!translationMemoryDiv) {
  1139.                     const tabs = document.querySelector('.sidebar-right .tabs');
  1140.                     if (!tabs) {
  1141.                         console.error('找不到.sidebar-right .tabs元素');
  1142.                         return;
  1143.                     }
  1144.                     translationMemoryDiv = document.createElement('div');
  1145.                     translationMemoryDiv.className = 'translation-memory';
  1146.                     translationMemoryDiv.style.display = 'block';
  1147.                     const header = document.createElement('header');
  1148.                     header.className = 'mb-3';
  1149.                     const headerContent = document.createElement('div');
  1150.                     headerContent.className = 'row medium align-items-center';
  1151.                     headerContent.innerHTML = `
  1152.                         <div class="col-auto">
  1153.                             <button title="Ctrl + Shift + F" type="button" class="btn btn-secondary btn-sm">
  1154.                                 <i class="far fa-search"></i> 搜索历史翻译
  1155.                             </button>
  1156.                         </div>
  1157.                         <div class="col text-right">
  1158.                             <span class="text-muted">共 0 条建议</span>
  1159.                             <button type="button" class="btn btn-secondary btn-sm"><i class="far fa-cog fa-fw"></i></button>
  1160.                         </div>`;
  1161.                     header.appendChild(headerContent);
  1162.                     translationMemoryDiv.appendChild(header);
  1163.                     mtListContainer = document.createElement('div');
  1164.                     mtListContainer.className = 'list mt-list';
  1165.                     translationMemoryDiv.appendChild(mtListContainer);
  1166.                     tabs.insertBefore(translationMemoryDiv, tabs.firstChild);
  1167.                 } else {
  1168.                     mtListContainer = translationMemoryDiv.querySelector('.list.mt-list');
  1169.                     if (!mtListContainer) {
  1170.                         mtListContainer = document.createElement('div');
  1171.                         mtListContainer.className = 'list mt-list';
  1172.                         const header = translationMemoryDiv.querySelector('header');
  1173.                         if (header) header.insertAdjacentElement('afterend', mtListContainer);
  1174.                         else translationMemoryDiv.appendChild(mtListContainer);
  1175.                     }
  1176.                 }
  1177.  
  1178.                 const existingAiReferences = mtListContainer.querySelectorAll('.mt-reference.paratranz-ai-reference');
  1179.                 existingAiReferences.forEach(ref => ref.remove());
  1180.  
  1181.                 if (mtListContainer) {
  1182.                     const newReferenceDiv = document.createElement('div');
  1183.                     newReferenceDiv.className = 'mt-reference paratranz-ai-reference';
  1184.                     newReferenceDiv.dataset.stringId = stringIdForUI; 
  1185.                     const header = document.createElement('header');
  1186.                     header.className = 'medium mb-2 text-muted';
  1187.                     const icon = document.createElement('i');
  1188.                     icon.className = 'far fa-language';
  1189.                     header.appendChild(icon);
  1190.                     header.appendChild(document.createTextNode(' 机器翻译参考'));
  1191.                     newReferenceDiv.appendChild(header);
  1192.                     const bodyRow = document.createElement('div');
  1193.                     bodyRow.className = 'row align-items-center';
  1194.                     const colAuto = document.createElement('div');
  1195.                     colAuto.className = 'col-auto pr-0';
  1196.                     const copyButton = document.createElement('button');
  1197.                     copyButton.title = '复制当前文本至翻译框';
  1198.                     copyButton.type = 'button';
  1199.                     copyButton.className = 'btn btn-link';
  1200.                     const copyIcon = document.createElement('i');
  1201.                     copyIcon.className = 'far fa-clone';
  1202.                     copyButton.appendChild(copyIcon);
  1203.                     copyButton.addEventListener('click', function() {
  1204.                         simulateInputChange(document.querySelector('textarea.translation.form-control'), text);
  1205.                     });
  1206.                     colAuto.appendChild(copyButton);
  1207.                     bodyRow.appendChild(colAuto);
  1208.                     const colText = document.createElement('div');
  1209.                     colText.className = 'col';
  1210.                     const translationSpan = document.createElement('span');
  1211.                     translationSpan.className = 'translation notranslate';
  1212.                     translationSpan.textContent = text;
  1213.                     colText.appendChild(translationSpan);
  1214.                     bodyRow.appendChild(colText);
  1215.                     newReferenceDiv.appendChild(bodyRow);
  1216.                     const footer = document.createElement('footer');
  1217.                     footer.className = 'medium mt-2 text-muted';
  1218.                     const leftText = document.createElement('span');
  1219.                     leftText.textContent = 'Paratranz-AI';
  1220.                     const rightText = document.createElement('div');
  1221.                     rightText.className = 'float-right';
  1222.                     rightText.textContent = modelName || 'N/A';
  1223.                     footer.appendChild(leftText);
  1224.                     footer.appendChild(rightText);
  1225.                     newReferenceDiv.appendChild(footer);
  1226.                     mtListContainer.prepend(newReferenceDiv);
  1227.                 }
  1228.             }
  1229.  
  1230.             async function processTranslationRequest(stringIdToProcess, textToTranslate) {
  1231.                 const translateButtonElement = document.getElementById('translateButton');
  1232.  
  1233.                 if (!stringIdToProcess) {
  1234.                     console.warn('processTranslationRequest called with no stringId.');
  1235.                     return;
  1236.                 }
  1237.                 if (translationsInProgress[stringIdToProcess]) {
  1238.                     console.log(`Translation for ${stringIdToProcess} is already in progress. Ignoring new request.`);
  1239.                     return;
  1240.                 }
  1241.  
  1242.                 translationsInProgress[stringIdToProcess] = true;
  1243.                 if (translateButtonElement) translateButtonElement.disabled = true;
  1244.                 
  1245.                 document.getElementById('translatedText').value = '翻译中...';
  1246.                 let translatedTextOutput = '';
  1247.  
  1248.                 try {
  1249.                     console.log(`Processing translation for stringId ${stringIdToProcess}:`, textToTranslate);
  1250.                     const model = localStorage.getItem('model') || 'gpt-4o-mini';
  1251.                     const promptStr = localStorage.getItem('prompt') || `You are a translator, you will translate all the message I send to you.\n\nSource Language: en\nTarget Language: zh-cn\n\nOutput result and thought with zh-cn, and keep the result pure text\nwithout any markdown syntax and any thought or references.\n\nInstructions:\n  - Accuracy: Ensure the translation accurately conveys the original meaning.\n  - Context: Adapt to cultural nuances and specific context to avoid misinterpretation.\n  - Tone: Match the tone (formal, informal, technical) of the source text.\n  - Grammar: Use correct grammar and sentence structure in the target language.\n  - Readability: Ensure the translation is clear and easy to understand.\n  - Keep Tags: Maintain the original tags intact, do not translate tags themselves!\n  - Keep or remove the spaces around the tags based on the language manners (in CJK, usually the spaces will be removed).\n\nTags are matching the following regular expressions (one per line):\n/{\w+}/\n/%[ds]?\d/\n/\\s#\d{1,2}/\n/<[^>]+?>/\n/%{\d}[a-z]/\n/@[a-zA-Z.]+?@/`;
  1252.                     const temperature = parseFloat(localStorage.getItem('temperature')) || 0;
  1253.  
  1254.                     translatedTextOutput = await translateText(textToTranslate, model, promptStr, temperature);
  1255.  
  1256.                     const replaceList = JSON.parse(localStorage.getItem('replaceList')) || [];
  1257.                     replaceList.forEach(rule => {
  1258.                         if (!rule.disabled && rule.findText) {
  1259.                             translatedTextOutput = translatedTextOutput.replaceAll(rule.findText, rule.replacementText);
  1260.                         }
  1261.                     });
  1262.  
  1263.                     // 新增：去除思维链内容
  1264.                     translatedTextOutput = removeThoughtProcessContent(translatedTextOutput);
  1265.                     
  1266.                     // 检查翻译是否成功，如果失败则不保存到缓存
  1267.                     const isTranslationError = translatedTextOutput.startsWith("API Base URL 或 Key 未配置。") ||
  1268.                                                translatedTextOutput.startsWith("API 翻译失败:") ||
  1269.                                                translatedTextOutput === "翻译失败: API响应格式无效" ||
  1270.                                                translatedTextOutput === "翻译请求超时。" ||
  1271.                                                translatedTextOutput.startsWith("翻译请求失败:");
  1272.  
  1273.                     if (!isTranslationError) {
  1274.                         translationCache[stringIdToProcess] = translatedTextOutput;
  1275.                     }
  1276.  
  1277.                     const currentPageId = await getCurrentStringId();
  1278.                     if (currentPageId === stringIdToProcess) {
  1279.                         updateTranslationUI(translatedTextOutput, model, stringIdToProcess);
  1280.                     } else {
  1281.                         console.log(`Translated stringId ${stringIdToProcess}, but page is now ${currentPageId}. Reference UI not updated for ${stringIdToProcess}.`);
  1282.                         document.getElementById('translatedText').value = translatedTextOutput;
  1283.                     }
  1284.  
  1285.                 } catch (error) {
  1286.                     console.error(`Error during translation processing for stringId ${stringIdToProcess}:`, error);
  1287.                     const translatedTextArea = document.getElementById('translatedText');
  1288.                     if (translatedTextArea) {
  1289.                         translatedTextArea.value = `翻译出错 (ID: ${stringIdToProcess}): ${error.message}`;
  1290.                     }
  1291.                 } finally {
  1292.                     delete translationsInProgress[stringIdToProcess];
  1293.                     if (translateButtonElement) translateButtonElement.disabled = false;
  1294.                     console.log(`Translation processing for stringId ${stringIdToProcess} finished, flags reset.`);
  1295.                 }
  1296.             }
  1297.  
  1298.             async function updateOriginalTextAndTranslateIfNeeded() {
  1299.                 const currentStringId = await getCurrentStringId();
  1300.                 if (!currentStringId) {
  1301.                     return;
  1302.                 }
  1303.  
  1304.                 const originalDiv = document.querySelector('.original.well');
  1305.                 if (originalDiv) {
  1306.                     const originalText = originalDiv.innerText;
  1307.                     document.getElementById('originalText').value = originalText;
  1308.                     
  1309.                     const existingAiReference = document.querySelector('.mt-reference.paratranz-ai-reference');
  1310.  
  1311.                     if (translationCache[currentStringId]) {
  1312.                         console.log(`Using cached translation for stringId: ${currentStringId}`);
  1313.                         const model = localStorage.getItem('model') || 'gpt-4o-mini';
  1314.                         if (existingAiReference && existingAiReference.dataset.stringId !== currentStringId) {
  1315.                             existingAiReference.remove();
  1316.                         }
  1317.                         updateTranslationUI(translationCache[currentStringId], model, currentStringId);
  1318.                         return; 
  1319.                     } else {
  1320.                          if (existingAiReference) { 
  1321.                             existingAiReference.remove();
  1322.                         }
  1323.                     }
  1324.  
  1325.                     if (localStorage.getItem('autoTranslateEnabled') === 'true' && originalText.trim() !== '' && !translationsInProgress[currentStringId]) {
  1326.                         console.log(`Auto-translating for stringId: ${currentStringId}`);
  1327.                         await processTranslationRequest(currentStringId, originalText);
  1328.                     } else if (translationsInProgress[currentStringId]) {
  1329.                         console.log(`Translation already in progress for stringId: ${currentStringId} (checked in updateOriginalText)`);
  1330.                     }
  1331.                 }
  1332.             }
  1333.  
  1334.             let debounceTimer = null;
  1335.             const observer = new MutationObserver(async () => {
  1336.                 if (debounceTimer) clearTimeout(debounceTimer);
  1337.                 debounceTimer = setTimeout(async () => {
  1338.                     console.log('Observer triggered, updating original text and checking translation.');
  1339.                     await updateOriginalTextAndTranslateIfNeeded();
  1340.                 }, 200);
  1341.             });
  1342.  
  1343.             const config = { childList: true, subtree: true, characterData: true };
  1344.             const originalDivTarget = document.querySelector('.original.well');
  1345.             if (originalDivTarget) {
  1346.                 observer.observe(originalDivTarget, config);
  1347.                 updateOriginalTextAndTranslateIfNeeded(); 
  1348.             } else {
  1349.                 console.warn("Original text container (.original.well) not found at observer setup.");
  1350.             }
  1351.             
  1352.             document.getElementById('copyOriginalButton').addEventListener('click', async () => {
  1353.                 await updateOriginalTextAndTranslateIfNeeded();
  1354.             });
  1355.  
  1356.             document.getElementById('translateButton').addEventListener('click', async function() {
  1357.                 const currentStringId = await getCurrentStringId();
  1358.                 const originalText = document.getElementById('originalText').value;
  1359.                 if (!currentStringId) {
  1360.                     console.error('Cannot translate: No valid stringId found for manual trigger.');
  1361.                     return;
  1362.                 }
  1363.                 await processTranslationRequest(currentStringId, originalText);
  1364.             });
  1365.  
  1366.             document.getElementById('copyTranslationButton').addEventListener('click', function() {
  1367.                 const translatedText = document.getElementById('translatedText').value;
  1368.                 navigator.clipboard.writeText(translatedText).then(() => {
  1369.                     console.log('Translated text copied to clipboard');
  1370.                 }).catch(err => {
  1371.                     console.error('Failed to copy text: ', err);
  1372.                 });
  1373.             });
  1374.  
  1375.             document.getElementById('pasteTranslationButton').addEventListener('click', function() {
  1376.                 const translatedText = document.getElementById('translatedText').value;
  1377.                 simulateInputChange(document.querySelector('textarea.translation.form-control'), translatedText);
  1378.             });
  1379.         }
  1380.     }
  1381.  
  1382.     // 辅助函数：获取项目ID和字符串ID
  1383.     async function getProjectIdAndStringId() {
  1384.         const pathParts = window.location.pathname.split('/');
  1385.         let projectId = null;
  1386.         let stringId = null;
  1387.  
  1388.         // 尝试从当前URL路径获取项目ID
  1389.         let projectPathIndex = pathParts.indexOf('projects');
  1390.         if (projectPathIndex !== -1 && pathParts.length > projectPathIndex + 1) {
  1391.             projectId = pathParts[projectPathIndex + 1];
  1392.         }
  1393.  
  1394.         // 尝试从当前URL路径获取字符串ID
  1395.         const stringsPathIndex = pathParts.indexOf('strings');
  1396.         if (stringsPathIndex !== -1 && pathParts.length > stringsPathIndex + 1) {
  1397.             const idFromPath = pathParts[stringsPathIndex + 1];
  1398.             if (idFromPath && !isNaN(parseInt(idFromPath, 10))) {
  1399.                 stringId = idFromPath;
  1400.             }
  1401.         }
  1402.  
  1403.         // 如果未在路径中找到，或为了确认/覆盖，则回退到使用页面元素
  1404.         const copyLinkButton = document.querySelector('.string-editor a.float-right.no-select[href*="/strings?id="]');
  1405.         if (copyLinkButton) {
  1406.             const href = copyLinkButton.getAttribute('href');
  1407.             const url = new URL(href, window.location.origin); // 确保是完整URL以便解析
  1408.             const urlParams = new URLSearchParams(url.search);
  1409.             const idFromHref = urlParams.get('id');
  1410.             if (idFromHref && !isNaN(parseInt(idFromHref, 10))) {
  1411.                 if (!stringId) stringId = idFromHref; // 如果路径中没有，则优先使用href中的ID
  1412.                 
  1413.                 const hrefPathParts = url.pathname.split('/');
  1414.                 const projectIdxHref = hrefPathParts.indexOf('projects');
  1415.                 if (projectIdxHref !== -1 && hrefPathParts.length > projectIdxHref + 1) {
  1416.                     const pidFromHref = hrefPathParts[projectIdxHref + 1];
  1417.                     if (pidFromHref) {
  1418.                         if (!projectId || projectId !== pidFromHref) projectId = pidFromHref; // 如果项目ID不同或未找到，则更新
  1419.                     }
  1420.                 }
  1421.             }
  1422.         }
  1423.         
  1424.         if (!stringId) { // 如果仍然没有字符串ID，尝试设置链接
  1425.             const settingsLink = document.querySelector('.string-editor .tab.context-tab a[href*="/settings/strings?id="]');
  1426.             if (settingsLink) {
  1427.                 const href = settingsLink.getAttribute('href');
  1428.                 const url = new URL(href, window.location.origin);
  1429.                 const urlParams = new URLSearchParams(url.search);
  1430.                 const idFromHref = urlParams.get('id');
  1431.                 if (idFromHref && !isNaN(parseInt(idFromHref, 10))) {
  1432.                     stringId = idFromHref;
  1433.                     const hrefPathParts = url.pathname.split('/');
  1434.                     const projectIdxHref = hrefPathParts.indexOf('projects');
  1435.                     if (projectIdxHref !== -1 && hrefPathParts.length > projectIdxHref + 1) {
  1436.                         const pidFromHref = hrefPathParts[projectIdxHref + 1];
  1437.                         if (pidFromHref && (!projectId || projectId !== pidFromHref)) {
  1438.                              projectId = pidFromHref;
  1439.                         }
  1440.                     }
  1441.                 }
  1442.             }
  1443.         }
  1444.         
  1445.         // 确保projectId和stringId是字符串类型
  1446.         if (projectId && typeof projectId !== 'string') {
  1447.             projectId = String(projectId);
  1448.         }
  1449.         if (stringId && typeof stringId !== 'string') {
  1450.             stringId = String(stringId);
  1451.         }
  1452.  
  1453.         return { projectId, stringId: stringId && !isNaN(parseInt(stringId, 10)) ? stringId : null };
  1454.     }
  1455.  
  1456.     // 获取术语表数据 (异步)
  1457.     async function getTermsData() {
  1458.         const terms = [];
  1459.         const { projectId, stringId } = await getProjectIdAndStringId();
  1460.  
  1461.         if (!projectId) {
  1462.             console.warn('无法从 URL 或页面元素中解析项目 ID，跳过术语获取。');
  1463.             return terms;
  1464.         }
  1465.         if (!stringId) {
  1466.             console.warn('无法从 URL 或页面元素中解析有效的字符串 ID，跳过术语获取。');
  1467.             return terms;
  1468.         }
  1469.  
  1470.         const apiUrl = `https://paratranz.cn/api/projects/${projectId}/strings/${stringId}/terms`;
  1471.         try {
  1472.             const controller = new AbortController();
  1473.             const timeoutId = setTimeout(() => controller.abort(), 10000); // 10秒超时
  1474.  
  1475.             const response = await fetch(apiUrl, { signal: controller.signal });
  1476.             clearTimeout(timeoutId);
  1477.  
  1478.             if (!response.ok) {
  1479.                 console.error(`获取术语 API 失败: ${response.status} ${response.statusText}`);
  1480.                 return terms; 
  1481.             }
  1482.             const apiResult = await response.json();
  1483.             apiResult.forEach(item => {
  1484.                 if (item.term && item.translation) {
  1485.                     terms.push({
  1486.                         source: item.term,
  1487.                         target: item.translation,
  1488.                         note: item.note || '' 
  1489.                     });
  1490.                 }
  1491.             });
  1492.             // console.log(`通过 API 获取到 ${terms.length} 条术语。`);
  1493.         } catch (error) {
  1494.             if (error.name === 'AbortError') {
  1495.                 console.error('获取术语 API 超时。');
  1496.             } else {
  1497.                 console.error('调用术语 API 时发生错误:', error);
  1498.             }
  1499.         }
  1500.         return terms;
  1501.     }
  1502.  
  1503.     async function buildTermsSystemMessageWithRetry() {
  1504.         let terms = await getTermsData(); 
  1505.         if (!terms.length) {
  1506.             // console.log('第一次通过 API 获取术语表失败或为空，等待100ms后重试...');
  1507.             await new Promise(resolve => setTimeout(resolve, 100)); 
  1508.             terms = await getTermsData(); 
  1509.             if (!terms.length) {
  1510.                 // console.log('第二次通过 API 获取术语表仍然失败或为空。');
  1511.                 return null;
  1512.             }
  1513.             // console.log(`第二次尝试通过 API 获取到 ${terms.length} 条术语。`);
  1514.         } else {
  1515.             // console.log(`第一次尝试通过 API 获取到 ${terms.length} 条术语。`);
  1516.         }
  1517.  
  1518.         const termsContext = terms.map(term => {
  1519.             let termString = `${term.source} → ${term.target}`;
  1520.             if (term.note) {
  1521.                 termString += ` (备注(辅助思考不要出现在译文中)：${term.note})`;
  1522.             }
  1523.             return termString;
  1524.         }).join('\n');
  1525.  
  1526.         return {
  1527.             role: "user",
  1528.             content: `翻译时请参考以下术语表:\n${termsContext}`
  1529.         };
  1530.     }
  1531.  
  1532.     // 新增：获取翻译建议上下文
  1533.     async function getTranslationSuggestionsContext() {
  1534.         const { projectId, stringId } = await getProjectIdAndStringId();
  1535.         const suggestionsContext = [];
  1536.  
  1537.         if (!projectId || !stringId) {
  1538.             // console.warn('无法获取翻译建议：项目 ID 或字符串 ID 未找到。');
  1539.             return suggestionsContext;
  1540.         }
  1541.  
  1542.         const apiUrl = `https://paratranz.cn/api/projects/${projectId}/strings/${stringId}/suggestions`;
  1543.         try {
  1544.             const controller = new AbortController();
  1545.             const timeoutId = setTimeout(() => controller.abort(), 10000); // 10秒超时
  1546.  
  1547.             const response = await fetch(apiUrl, { signal: controller.signal });
  1548.             clearTimeout(timeoutId);
  1549.  
  1550.             if (!response.ok) {
  1551.                 console.error(`获取翻译建议 API 失败: ${response.status} ${response.statusText}`);
  1552.                 return suggestionsContext;
  1553.             }
  1554.             const apiResult = await response.json();
  1555.             
  1556.             if (Array.isArray(apiResult)) {
  1557.                 apiResult.forEach(suggestion => {
  1558.                     // 确保 original 和 translation 存在且不为空字符串
  1559.                     if (suggestion.original && suggestion.translation && 
  1560.                         typeof suggestion.matching === 'number' && suggestion.matching >= 0.7) {
  1561.                         suggestionsContext.push({ role: "user", content: suggestion.original });
  1562.                         suggestionsContext.push({ role: "assistant", content: suggestion.translation });
  1563.                     }
  1564.                 });
  1565.             }
  1566.             // console.log(`获取到 ${suggestionsContext.length / 2} 条符合条件的翻译建议。`);
  1567.         } catch (error) {
  1568.             if (error.name === 'AbortError') {
  1569.                 console.error('获取翻译建议 API 超时。');
  1570.             } else {
  1571.                 console.error('调用翻译建议 API 时发生错误:', error);
  1572.             }
  1573.         }
  1574.         return suggestionsContext;
  1575.     }
  1576.  
  1577.     class PromptTagProcessor {
  1578.         constructor() {
  1579.             this.tagProcessors = new Map();
  1580.             this.setupDefaultTags();
  1581.         }
  1582.  
  1583.         setupDefaultTags() {
  1584.             this.registerTag('original', (text) => text);
  1585.             this.registerTag('context', async () => {
  1586.                 const contextDiv = document.querySelector('.context .well');
  1587.                 if (!contextDiv) return '';
  1588.                 return contextDiv.innerText.trim();
  1589.             });
  1590.             this.registerTag('terms', async () => {
  1591.                 const terms = await getTermsData();
  1592.                 if (!terms.length) return '';
  1593.                 return terms.map(term => {
  1594.                     let termString = `${term.source} → ${term.target}`;
  1595.                     if (term.note) termString += ` (${term.note})`;
  1596.                     return termString;
  1597.                 }).join('\n');
  1598.             });
  1599.         }
  1600.  
  1601.         registerTag(tagName, processor) {
  1602.             this.tagProcessors.set(tagName, processor);
  1603.         }
  1604.  
  1605.         async processPrompt(prompt, originalText) {
  1606.             let processedPrompt = prompt;
  1607.             for (const [tagName, processor] of this.tagProcessors) {
  1608.                 const tagPattern = new RegExp(`{{${tagName}}}`, 'g');
  1609.                 if (tagPattern.test(processedPrompt)) {
  1610.                     let replacement;
  1611.                     try {
  1612.                         replacement = (tagName === 'original') ? originalText : await processor();
  1613.                         processedPrompt = processedPrompt.replace(tagPattern, replacement || '');
  1614.                         // console.log(`替换标签 {{${tagName}}} 成功`);
  1615.                     } catch (error) {
  1616.                         console.error(`处理标签 {{${tagName}}} 时出错:`, error);
  1617.                     }
  1618.                 }
  1619.             }
  1620.             // console.log('处理后的prompt:', processedPrompt);
  1621.             return processedPrompt;
  1622.         }
  1623.     }
  1624.     // Define API config utility functions in IIFE scope
  1625.     const API_CONFIGURATIONS_KEY = 'apiConfigurations';
  1626.     const CURRENT_API_CONFIG_NAME_KEY = 'currentApiConfigName';
  1627.  
  1628.     function getApiConfigurations() {
  1629.         return JSON.parse(localStorage.getItem(API_CONFIGURATIONS_KEY)) || [];
  1630.     }
  1631.  
  1632.     function saveApiConfigurations(configs) {
  1633.         localStorage.setItem(API_CONFIGURATIONS_KEY, JSON.stringify(configs));
  1634.     }
  1635.  
  1636.     function getCurrentApiConfigName() {
  1637.         return localStorage.getItem(CURRENT_API_CONFIG_NAME_KEY);
  1638.     }
  1639.  
  1640.     function setCurrentApiConfigName(name) {
  1641.         localStorage.setItem(CURRENT_API_CONFIG_NAME_KEY, name);
  1642.     }
  1643.  
  1644.     async function translateText(query, model, prompt, temperature) {
  1645.         let API_SECRET_KEY = '';
  1646.         let BASE_URL = '';
  1647.         
  1648.         const currentConfigName = getCurrentApiConfigName();
  1649.         let activeConfig = null;
  1650.  
  1651.         if (currentConfigName) {
  1652.             const configs = getApiConfigurations();
  1653.             activeConfig = configs.find(c => c.name === currentConfigName);
  1654.         }
  1655.  
  1656.         if (activeConfig) {
  1657.             BASE_URL = activeConfig.baseUrl;
  1658.             API_SECRET_KEY = activeConfig.apiKey;
  1659.             model = activeConfig.model || localStorage.getItem('model') || 'gpt-4o-mini'; // Fallback to general localStorage then default
  1660.             prompt = activeConfig.prompt || localStorage.getItem('prompt') || ''; 
  1661.             temperature = activeConfig.temperature !== undefined && activeConfig.temperature !== '' ? parseFloat(activeConfig.temperature) : (localStorage.getItem('temperature') !== null ? parseFloat(localStorage.getItem('temperature')) : 0);
  1662.         } else {
  1663.             // If no active config, try to use general localStorage settings as a last resort for key/URL
  1664.             // This case should ideally be handled by prompting user to select/create a config
  1665.             console.warn("No active API configuration selected. Translation might fail or use stale settings.");
  1666.             BASE_URL = localStorage.getItem('baseUrl_fallback_for_translate') || ''; // Example of a dedicated fallback key
  1667.             API_SECRET_KEY = localStorage.getItem('apiKey_fallback_for_translate') || '';
  1668.             // For other params, use general localStorage or defaults
  1669.             model = localStorage.getItem('model') || 'gpt-4o-mini';
  1670.             prompt = localStorage.getItem('prompt') || '';
  1671.             temperature = localStorage.getItem('temperature') !== null ? parseFloat(localStorage.getItem('temperature')) : 0;
  1672.         }
  1673.  
  1674.         if (!BASE_URL || !API_SECRET_KEY) {
  1675.             console.error("API Base URL or Key is missing. Please configure an API setting.");
  1676.             return "API Base URL 或 Key 未配置。请在翻译配置中设置。";
  1677.         }
  1678.         
  1679.         if (!prompt) { // Default prompt if still empty after all fallbacks
  1680.             prompt = "You are a professional translator focusing on translating Magic: The Gathering cards from English to Chinese. You are given a card's original text in English. Translate it into Chinese.";
  1681.         }
  1682.  
  1683.         const tagProcessor = new PromptTagProcessor();
  1684.         const processedPrompt = await tagProcessor.processPrompt(prompt, query);
  1685.  
  1686.         const messages = [{ role: "system", content: processedPrompt }];
  1687.  
  1688.         // console.log('准备获取术语表信息...');
  1689.         const termsMessage = await buildTermsSystemMessageWithRetry(); // 间接使用 getProjectIdAndStringId
  1690.         if (termsMessage && termsMessage.content) {
  1691.             // console.log('成功获取术语表信息，添加到请求中。');
  1692.             messages.push(termsMessage);
  1693.         } else {
  1694.             // console.log('未获取到术语表信息或术语表为空，翻译请求将不包含术语表。');
  1695.         }
  1696.  
  1697.         // 新增：获取并添加翻译建议上下文
  1698.         // console.log('准备获取翻译建议上下文...');
  1699.         const suggestionContextMessages = await getTranslationSuggestionsContext(); // 直接使用 getProjectIdAndStringId
  1700.         if (suggestionContextMessages && suggestionContextMessages.length > 0) {
  1701.             // console.log(`成功获取 ${suggestionContextMessages.length / 2} 条翻译建议，添加到请求中。`);
  1702.             messages.push(...suggestionContextMessages);
  1703.         } else {
  1704.             // console.log('未获取到符合条件的翻译建议，或获取失败。');
  1705.         }
  1706.  
  1707.         messages.push({ role: "user", content: "text below\n```\n" + query + "\n```\nreturn without `" });
  1708.  
  1709.         const requestBody = { model, temperature, messages };
  1710.  
  1711.         try {
  1712.             const controller = new AbortController();
  1713.             const timeoutId = setTimeout(() => controller.abort(), 250000); // 25秒超时
  1714.  
  1715.             const response = await fetch(`${BASE_URL}${BASE_URL.endsWith('/') ? '' : '/'}chat/completions`, {
  1716.                 method: 'POST',
  1717.                 headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${API_SECRET_KEY}` },
  1718.                 body: JSON.stringify(requestBody),
  1719.                 signal: controller.signal
  1720.             });
  1721.             clearTimeout(timeoutId);
  1722.  
  1723.             if (!response.ok) {
  1724.                 let errorData;
  1725.                 try { errorData = await response.json(); } catch (e) { /* ignore */ }
  1726.                 console.error('API Error:', errorData || response.statusText);
  1727.                 return `API 翻译失败: ${response.status} - ${errorData?.error?.message || errorData?.message || response.statusText}`;
  1728.             }
  1729.  
  1730.             const data = await response.json();
  1731.             if (data.choices && data.choices[0]?.message?.content) {
  1732.                 return data.choices[0].message.content;
  1733.             } else {
  1734.                 console.error('Invalid API response structure:', data);
  1735.                 return '翻译失败: API响应格式无效';
  1736.             }
  1737.         } catch (error) {
  1738.             if (error.name === 'AbortError') {
  1739.                 console.error('API translation request timed out.');
  1740.                 return '翻译请求超时。';
  1741.             }
  1742.             console.error('Translation Fetch/Network Error:', error);
  1743.             return `翻译请求失败: ${error.message || error.toString()}`;
  1744.         }
  1745.     }
  1746.  
  1747.     function simulateInputChange(element, newValue) {
  1748.         if (element.value.trim() !== '') {
  1749.             // return; // Allowing overwrite now based on typical user expectation for paste
  1750.         }
  1751.         const inputEvent = new Event('input', { bubbles: true });
  1752.         const originalValue = element.value;
  1753.         element.value = newValue;
  1754.         const tracker = element._valueTracker;
  1755.         if (tracker) tracker.setValue(originalValue);
  1756.         element.dispatchEvent(inputEvent);
  1757.     }
  1758.  
  1759.     const accordion = new Accordion('#accordionExample', '.sidebar-right');
  1760.     const stringReplaceCard = new StringReplaceCard('#accordionExample');
  1761.     const machineTranslationCard = new MachineTranslationCard('#accordionExample');
  1762.  
  1763.     accordion.addCard(stringReplaceCard);
  1764.     accordion.addCard(machineTranslationCard);
  1765.  
  1766.     // Diff对比模态框类
  1767.     class DiffModal {
  1768.         constructor() {
  1769.             this.modalId = 'diffModal';
  1770.             this.diffLib = null;
  1771.             this.initModal();
  1772.             this.initDiffLibraries();
  1773.         }
  1774.  
  1775.         initDiffLibraries() {
  1776.             if (typeof Diff !== 'undefined') {
  1777.                 this.diffLib = Diff;
  1778.                 console.log('jsdiff library initialized successfully');
  1779.             } else {
  1780.                 console.error('jsdiff library is not available');
  1781.             }
  1782.         }
  1783.  
  1784.         initModal() {
  1785.             if (document.getElementById(this.modalId)) return;
  1786.  
  1787.             const modalHTML = `
  1788.                 <div class="modal" id="${this.modalId}" tabindex="-1" role="dialog" style="display: none;">
  1789.                     <div class="modal-dialog modal-xl" role="document">
  1790.                         <div class="modal-content">
  1791.                             <div class="modal-header py-2">
  1792.                                 <h5 class="modal-title">文本对比</h5>
  1793.                                 <button type="button" class="close" id="closeDiffModal" aria-label="Close">
  1794.                                     <span aria-hidden="true">&times;</span>
  1795.                                 </button>
  1796.                             </div>
  1797.                             <div class="modal-body p-0" style="height: 70vh;">
  1798.                                 <div class="diff-container d-flex h-100">
  1799.                                     <div class="diff-original w-50 border-right" style="overflow-y: auto;">
  1800.                                         <div class="diff-header bg-light p-2">原文</div>
  1801.                                         <div class="diff-content" id="originalDiffContent"></div>
  1802.                                     </div>
  1803.                                     <div class="diff-translation w-50" style="overflow-y: auto;">
  1804.                                         <div class="diff-header bg-light p-2 d-flex justify-content-between align-items-center">
  1805.                                             <span>当前翻译</span>
  1806.                                             <button class="btn btn-sm btn-primary" id="editTranslationButton">编辑</button>
  1807.                                         </div>
  1808.                                         <div class="diff-content" id="translationDiffContent" style="display: block;"></div>
  1809.                                         <textarea class="form-control" id="translationEditor" style="display: none; height: 100%; width: 100%; border: none; resize: none; font-family: monospace;" placeholder="在此编辑翻译内容..."></textarea>
  1810.                                     </div>
  1811.                                 </div>
  1812.                             </div>
  1813.                             <div class="modal-footer">
  1814.                                 <button type="button" class="btn btn-secondary" id="closeDiffModalButton">关闭</button>
  1815.                                 <button type="button" class="btn btn-primary" id="saveTranslationButton" style="display: none;">保存</button>
  1816.                             </div>
  1817.                         </div>
  1818.                     </div>
  1819.                 </div>
  1820.             `;
  1821.             document.body.insertAdjacentHTML('beforeend', modalHTML);
  1822.  
  1823.             const style = document.createElement('style');
  1824.             style.textContent = `
  1825.                 .diff-line {
  1826.                     display: flex;
  1827.                     padding: 2px 5px;
  1828.                     font-family: monospace;
  1829.                     line-height: 1.4;
  1830.                 }
  1831.                 .diff-line-number {
  1832.                     min-width: 35px;
  1833.                     color: #999;
  1834.                     text-align: right;
  1835.                     padding-right: 10px;
  1836.                     user-select: none;
  1837.                     font-size: 0.9em;
  1838.                 }
  1839.                 .diff-line-content {
  1840.                     flex: 1;
  1841.                     white-space: pre-wrap;
  1842.                     word-break: break-word;
  1843.                     padding-left: 5px;
  1844.                 }
  1845.                 .diff-line.diff-added {
  1846.                     background-color: #e6ffed; /* Light green for whole line add */
  1847.                 }
  1848.                 .diff-line.diff-removed {
  1849.                     background-color: #ffeef0; /* Light red for whole line remove */
  1850.                 }
  1851.                 .diff-line.diff-common {
  1852.                     background-color: #ffffff;
  1853.                 }
  1854.                 .diff-line.diff-placeholder,
  1855.                 .diff-line.diff-modified-old, /* Placeholder for original side of a modification */
  1856.                 .diff-line.diff-added-extra { /* Placeholder for translation side of a modification where original has fewer lines */
  1857.                     background-color: #f0f0f0; /* Grey for placeholders */
  1858.                 }
  1859.                 .copy-action-button { /* Unified class for action buttons */
  1860.                     cursor: pointer;
  1861.                     margin-left: 8px;
  1862.                     padding: 0 4px;
  1863.                     font-size: 0.9em;
  1864.                     line-height: 1;
  1865.                     border: 1px solid #ccc;
  1866.                     border-radius: 3px;
  1867.                     background-color: #f0f0f0;
  1868.                 }
  1869.                 .copy-action-button:hover {
  1870.                     background-color: #e0e0e0;
  1871.                 }
  1872.                 .diff-header {
  1873.                     font-weight: bold;
  1874.                     position: sticky;
  1875.                     top: 0;
  1876.                     z-index: 1;
  1877.                     background-color: #f8f9fa; /* Ensure header bg covers scrolling content */
  1878.                 }
  1879.                 /* Intra-line diff styles */
  1880.                 .diff-intraline-added {
  1881.                     background-color: #acf2bd; /* More prominent green for intra-line additions */
  1882.                     /* text-decoration: underline; */
  1883.                 }
  1884.                 .diff-intraline-removed {
  1885.                     background-color: #fdb8c0; /* More prominent red for intra-line deletions */
  1886.                     text-decoration: line-through;
  1887.                 }
  1888.             `;
  1889.             document.head.appendChild(style);
  1890.  
  1891.             document.getElementById('closeDiffModal').addEventListener('click', this.closeModal.bind(this));
  1892.             document.getElementById('closeDiffModalButton').addEventListener('click', this.closeModal.bind(this));
  1893.             document.getElementById('editTranslationButton').addEventListener('click', this.toggleEditMode.bind(this));
  1894.             document.getElementById('saveTranslationButton').addEventListener('click', this.saveTranslation.bind(this));
  1895.         }
  1896.  
  1897.         toggleEditMode() {
  1898.             const translationContent = document.getElementById('translationDiffContent');
  1899.             const translationEditor = document.getElementById('translationEditor');
  1900.             const editButton = document.getElementById('editTranslationButton');
  1901.             const saveButton = document.getElementById('saveTranslationButton');
  1902.  
  1903.             if (translationContent.style.display === 'block') {
  1904.                 translationContent.style.display = 'none';
  1905.                 translationEditor.style.display = 'block';
  1906.                 editButton.textContent = '取消编辑';
  1907.                 saveButton.style.display = 'inline-block';
  1908.                 translationEditor.value = document.querySelector('textarea.translation.form-control')?.value || '';
  1909.                 translationEditor.focus();
  1910.             } else {
  1911.                 translationContent.style.display = 'block';
  1912.                 translationEditor.style.display = 'none';
  1913.                 editButton.textContent = '编辑';
  1914.                 saveButton.style.display = 'none';
  1915.             }
  1916.         }
  1917.  
  1918.         saveTranslation() {
  1919.             const translationEditor = document.getElementById('translationEditor');
  1920.             const textarea = document.querySelector('textarea.translation.form-control');
  1921.             if (textarea) {
  1922.                 textarea.value = translationEditor.value;
  1923.                 simulateInputChange(textarea, textarea.value); // Ensure change is registered by React/Vue if applicable
  1924.                 this.toggleEditMode(); // Switch back to diff view
  1925.                 this.generateDiff(); // Regenerate diff with new translation
  1926.             }
  1927.         }
  1928.  
  1929.         show() {
  1930.             const modal = document.getElementById(this.modalId);
  1931.             modal.style.display = 'block';
  1932.             this.generateDiff();
  1933.         }
  1934.  
  1935.         closeModal() {
  1936.             document.getElementById(this.modalId).style.display = 'none';
  1937.         }
  1938.  
  1939.         // Helper to split lines, handling trailing newline consistently and removing CR
  1940.         splitIntoLines(text) {
  1941.             if (text === null || text === undefined) return [];
  1942.             if (text === '') return ['']; // An empty text is one empty line for diffing purposes
  1943.             let lines = text.split('\n');
  1944.             // If the text ends with a newline, split will produce an empty string at the end.
  1945.             // jsdiff's diffLines handles this by considering the newline as part of the last line's value or as a separate token.
  1946.             // For our rendering, we want to represent each line distinctly.
  1947.             // If text is "a\nb\n", split gives ["a", "b", ""]. We want ["a", "b"].
  1948.             // If text is "a\nb", split gives ["a", "b"]. We want ["a", "b"].
  1949.             // If text is "\n", split gives ["", ""]. We want [""] for one empty line.
  1950.             if (text.endsWith('\n') && lines.length > 0) {
  1951.                  lines.pop(); // Remove the empty string caused by a trailing newline
  1952.             }
  1953.             return lines.map(l => l.replace(/\r$/, '')); // Remove CR if present for consistency
  1954.         }
  1955.  
  1956.  
  1957.         generateDiff() {
  1958.             const originalText = document.querySelector('.original.well')?.innerText || '';
  1959.             const translationText = document.querySelector('textarea.translation.form-control')?.value || '';
  1960.  
  1961.             const originalContent = document.getElementById('originalDiffContent');
  1962.             const translationContent = document.getElementById('translationDiffContent');
  1963.             originalContent.innerHTML = '';
  1964.             translationContent.innerHTML = '';
  1965.  
  1966.             if (!this.diffLib) {
  1967.                 console.error('Diff library (jsdiff) not loaded.');
  1968.                 originalContent.innerHTML = '<p>差异库未加载</p>';
  1969.                 return;
  1970.             }
  1971.  
  1972.             const lineDiffResult = this.diffLib.diffLines(originalText, translationText, { newlineIsToken: false, ignoreWhitespace: false });
  1973.  
  1974.             let origDisplayLineNum = 1;
  1975.             let transDisplayLineNum = 1;
  1976.             let currentTranslationLineIndexForAction = 0;
  1977.  
  1978.             for (let i = 0; i < lineDiffResult.length; i++) {
  1979.                 const part = lineDiffResult[i];
  1980.                 const nextPart = (i + 1 < lineDiffResult.length) ? lineDiffResult[i + 1] : null;
  1981.  
  1982.                 let linesInPart = this.splitIntoLines(part.value);
  1983.  
  1984.                 if (part.removed) {
  1985.                     if (nextPart && nextPart.added) { // This is a modification block
  1986.                         let linesInNextPart = this.splitIntoLines(nextPart.value);
  1987.                         const maxLines = Math.max(linesInPart.length, linesInNextPart.length);
  1988.  
  1989.                         for (let j = 0; j < maxLines; j++) {
  1990.                             const removedLine = j < linesInPart.length ? linesInPart[j] : null;
  1991.                             const addedLine = j < linesInNextPart.length ? linesInNextPart[j] : null;
  1992.  
  1993.                             if (removedLine !== null) {
  1994.                                 this.appendLine(originalContent, origDisplayLineNum++, removedLine, 'diff-removed', removedLine, currentTranslationLineIndexForAction, true, 'original', addedLine, 'replace'); // Action: replace for modified lines
  1995.                             } else {
  1996.                                 this.appendLine(originalContent, '-', '', 'diff-placeholder diff-added-extra', null, null, false, 'original', null);
  1997.                             }
  1998.  
  1999.                             if (addedLine !== null) {
  2000.                                 this.appendLine(translationContent, transDisplayLineNum++, addedLine, 'diff-added', addedLine, currentTranslationLineIndexForAction, true, 'translation', removedLine);
  2001.                             } else {
  2002.                                 this.appendLine(translationContent, '-', '', 'diff-placeholder diff-modified-old', null, null, false, 'translation', null);
  2003.                             }
  2004.                             currentTranslationLineIndexForAction++;
  2005.                         }
  2006.                         i++; // Skip nextPart as it's processed
  2007.                     } else { // Pure removal
  2008.                         linesInPart.forEach(lineText => {
  2009.                             this.appendLine(originalContent, origDisplayLineNum++, lineText, 'diff-removed', lineText, currentTranslationLineIndexForAction, true, 'original', '', 'insert'); // Action: insert for removed lines
  2010.                             this.appendLine(translationContent, '-', '', 'diff-placeholder diff-removed', null, null, false, 'translation', null);
  2011.                             // currentTranslationLineIndexForAction does not advance for placeholders on translation side if original is removed
  2012.                         });
  2013.                     }
  2014.                 } else if (part.added) { // Pure addition (modification handled above)
  2015.                     linesInPart.forEach(lineText => {
  2016.                         this.appendLine(originalContent, '-', '', 'diff-placeholder diff-added', null, null, false, 'original', null, 'insert'); // Or 'replace' if that makes more sense for placeholder context
  2017.                         this.appendLine(translationContent, transDisplayLineNum++, lineText, 'diff-added', lineText, currentTranslationLineIndexForAction, true, 'translation', '');
  2018.                         currentTranslationLineIndexForAction++;
  2019.                     });
  2020.                 } else { // Common part
  2021.                     linesInPart.forEach(lineText => {
  2022.                         this.appendLine(originalContent, origDisplayLineNum++, lineText, 'diff-common', lineText, currentTranslationLineIndexForAction, true, 'original', lineText, 'replace'); // Action: replace for common lines
  2023.                         this.appendLine(translationContent, transDisplayLineNum++, lineText, 'diff-common', lineText, currentTranslationLineIndexForAction, true, 'translation', lineText, 'replace');
  2024.                         currentTranslationLineIndexForAction++;
  2025.                     });
  2026.                 }
  2027.             }
  2028.         }
  2029.  
  2030.         appendLine(container, lineNumber, text, diffClass, lineTextForAction = null, translationLineIndexForAction = null, showActionButton = false, side = 'original', otherTextForIntralineDiff = null, actionType = 'replace') { // Added actionType, default to 'replace'
  2031.             const lineDiv = document.createElement('div');
  2032.             lineDiv.className = `diff-line ${diffClass || ''}`;
  2033.  
  2034.             const numberSpan = document.createElement('span');
  2035.             numberSpan.className = 'diff-line-number';
  2036.             numberSpan.textContent = lineNumber;
  2037.             lineDiv.appendChild(numberSpan);
  2038.  
  2039.             const contentSpan = document.createElement('span');
  2040.             contentSpan.className = 'diff-line-content';
  2041.  
  2042.             if (text === null || (text === '' && diffClass.includes('placeholder'))) {
  2043.                 contentSpan.innerHTML = '&nbsp;';
  2044.             } else if (this.diffLib && otherTextForIntralineDiff !== null && (diffClass.includes('diff-removed') || diffClass.includes('diff-added') || diffClass.includes('diff-common'))) {
  2045.                 let oldContentForWordDiff, newContentForWordDiff;
  2046.  
  2047.                 if (diffClass.includes('diff-removed')) { // Displaying on original side, text is old
  2048.                     oldContentForWordDiff = text;
  2049.                     newContentForWordDiff = otherTextForIntralineDiff || '';
  2050.                 } else if (diffClass.includes('diff-added')) { // Displaying on translation side, text is new
  2051.                     oldContentForWordDiff = otherTextForIntralineDiff || '';
  2052.                     newContentForWordDiff = text;
  2053.                 } else { // Common line
  2054.                     oldContentForWordDiff = text;
  2055.                     newContentForWordDiff = text; // or otherTextForIntralineDiff, they are the same
  2056.                 }
  2057.  
  2058.                 const wordDiff = this.diffLib.diffWordsWithSpace(oldContentForWordDiff, newContentForWordDiff);
  2059.                 wordDiff.forEach(part => {
  2060.                     const span = document.createElement('span');
  2061.                     if (part.added) {
  2062.                         // Style as added if we are on the side that displays the "new" content of the pair
  2063.                         if (diffClass.includes('diff-added') || (diffClass.includes('diff-removed') && side === 'original')) {
  2064.                              span.className = 'diff-intraline-added';
  2065.                         }
  2066.                     } else if (part.removed) {
  2067.                         // Style as removed if we are on the side that displays the "old" content of the pair
  2068.                          if (diffClass.includes('diff-removed') || (diffClass.includes('diff-added') && side === 'translation')) {
  2069.                             span.className = 'diff-intraline-removed';
  2070.                         }
  2071.                     }
  2072.                     span.textContent = part.value;
  2073.                     contentSpan.appendChild(span);
  2074.                 });
  2075.  
  2076.             } else {
  2077.                 contentSpan.textContent = text;
  2078.             }
  2079.             lineDiv.appendChild(contentSpan);
  2080.  
  2081.             if (showActionButton && lineTextForAction !== null && translationLineIndexForAction !== null && !diffClass.includes('placeholder')) {
  2082.                 const actionButton = document.createElement('button');
  2083.                 actionButton.className = `btn btn-link p-0 ml-2 copy-action-button`;
  2084.                 let buttonTitle = '';
  2085.                 let buttonIconClass = '';
  2086.  
  2087.                 if (side === 'original') {
  2088.                     buttonIconClass = 'fas fa-arrow-right';
  2089.                     if (actionType === 'replace') {
  2090.                         buttonTitle = '使用此原文行覆盖译文对应行';
  2091.                     } else { // actionType === 'insert'
  2092.                         buttonTitle = '将此原文行插入到译文对应位置';
  2093.                     }
  2094.                 }
  2095.                 // Add logic for buttons on translation side if needed later
  2096.  
  2097.                 if (buttonIconClass && !diffClass.includes('diff-common')) { // <--- 修改点在这里
  2098.                     actionButton.innerHTML = `<i class="${buttonIconClass}"></i>`;
  2099.                     actionButton.title = buttonTitle;
  2100.                     actionButton.addEventListener('click', () => {
  2101.                         const textarea = document.querySelector('textarea.translation.form-control');
  2102.                         if (!textarea) return;
  2103.                         let lines = textarea.value.split('\n');
  2104.                         const targetIndex = Math.max(0, translationLineIndexForAction);
  2105.  
  2106.                         while (lines.length <= targetIndex) {
  2107.                             lines.push('');
  2108.                         }
  2109.                         if (actionType === 'replace') {
  2110.                             // 确保目标索引在数组范围内，如果超出则扩展数组
  2111.                             while (lines.length <= targetIndex) {
  2112.                                 lines.push('');
  2113.                             }
  2114.                             lines[targetIndex] = lineTextForAction;
  2115.                         } else { // actionType === 'insert'
  2116.                             const effectiveTargetIndex = Math.min(lines.length, targetIndex);
  2117.                             lines.splice(effectiveTargetIndex, 0, lineTextForAction);
  2118.                         }
  2119.  
  2120.                         textarea.value = lines.join('\n');
  2121.                         simulateInputChange(textarea, textarea.value);
  2122.                         requestAnimationFrame(() => this.generateDiff());
  2123.                     });
  2124.                     lineDiv.appendChild(actionButton);
  2125.                 }
  2126.             }
  2127.             container.appendChild(lineDiv);
  2128.         }
  2129.     }
  2130.  
  2131.     // 添加对比按钮
  2132.     const diffButton = new Button(
  2133.         '.btn.btn-secondary.show-diff-button',
  2134.         '.toolbar .right .btn-group',
  2135.         '<i class="fas fa-file-alt"></i> 对比文本',
  2136.         function() {
  2137.             new DiffModal().show();
  2138.         }
  2139.     );
  2140.  
  2141.     const runAllReplacementsButton = new Button(
  2142.         '.btn.btn-secondary.apply-all-rules-button',
  2143.         '.toolbar .right .btn-group',
  2144.         '<i class="fas fa-cogs"></i> 应用全部替换',
  2145.         function() {
  2146.             const replaceList = JSON.parse(localStorage.getItem('replaceList')) || [];
  2147.             const textareas = document.querySelectorAll('textarea.translation.form-control');
  2148.             textareas.forEach(textarea => {
  2149.                 let text = textarea.value;
  2150.                 replaceList.forEach(rule => {
  2151.                     if (!rule.disabled && rule.findText) {
  2152.                          text = text.replaceAll(rule.findText, rule.replacementText);
  2153.                     }
  2154.                 });
  2155.                 simulateInputChange(textarea, text);
  2156.             });
  2157.         }
  2158.     );
  2159.  
  2160.     // AI 对话框类
  2161.     class AIChatDialog {
  2162.         constructor() {
  2163.             this.fabId = 'ai-chat-fab';
  2164.             this.dialogId = 'ai-chat-dialog';
  2165.             this.messagesContainerId = 'ai-chat-messages';
  2166.             this.inputAreaId = 'ai-chat-input';
  2167.             this.sendButtonId = 'ai-chat-send';
  2168.             this.closeButtonId = 'ai-chat-close';
  2169.             this.clearHistoryButtonId = 'ai-chat-clear-history'; // New ID for clear button
  2170.             this.isDragging = false;
  2171.             this.dragStartX = 0;
  2172.             this.dragStartY = 0;
  2173.             this.dialogX = 0;
  2174.             this.dialogY = 0;
  2175.             this.sendContextToggleId = 'ai-chat-send-context-toggle';
  2176.             this.localStorageKeySendContext = 'aiChatSendContextEnabled';
  2177.             this.aiChatModelInputId = 'aiChatModelInput';
  2178.             this.aiChatModelDatalistId = 'aiChatModelDatalist';
  2179.             this.fetchAiChatModelsButtonId = 'fetchAiChatModelsButton';
  2180.             this.localStorageKeyAiChatModel = 'aiChatModelName'; // New key for AI chat model
  2181.             this.init();
  2182.         }
  2183.  
  2184.         init() {
  2185.             this.addStyles();
  2186.             this.insertFab();
  2187.             // Dialog is inserted only when FAB is clicked for the first time
  2188.         }
  2189.  
  2190.         addStyles() {
  2191.             const css = `
  2192.                 #${this.fabId} {
  2193.                     position: fixed;
  2194.                     bottom: 20px;
  2195.                     right: 20px;
  2196.                     width: 50px;
  2197.                     height: 50px;
  2198.                     background-color: #007bff;
  2199.                     color: white;
  2200.                     border-radius: 50%;
  2201.                     display: flex;
  2202.                     justify-content: center;
  2203.                     align-items: center;
  2204.                     font-size: 24px;
  2205.                     cursor: pointer;
  2206.                     box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  2207.                     z-index: 9998; /* Below dialog */
  2208.                     transition: background-color 0.3s ease;
  2209.                 }
  2210.                 #${this.fabId}:hover {
  2211.                     background-color: #0056b3;
  2212.                 }
  2213.                 #${this.dialogId} {
  2214.                     position: fixed;
  2215.                     bottom: 80px; /* Position above FAB */
  2216.                     right: 20px;
  2217.                     width: 380px; /* Increased width */
  2218.                     height: 450px;
  2219.                     background-color: white;
  2220.                     border: 1px solid #ccc;
  2221.                     border-radius: 8px;
  2222.                     box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  2223.                     display: none; /* Hidden by default */
  2224.                     flex-direction: column;
  2225.                     z-index: 9999;
  2226.                     overflow: hidden; /* Prevent content spill */
  2227.                 }
  2228.                 #${this.dialogId} .ai-chat-header {
  2229.                     padding: 10px 15px;
  2230.                     background-color: #f8f9fa;
  2231.                     border-bottom: 1px solid #dee2e6;
  2232.                     display: flex;
  2233.                     justify-content: space-between;
  2234.                     align-items: center;
  2235.                     cursor: move; /* Make header draggable */
  2236.                 }
  2237.                 #${this.dialogId} .ai-chat-header h5 {
  2238.                     margin: 0;
  2239.                     font-size: 1rem;
  2240.                     flex-grow: 1; /* Allow title to take space */
  2241.                 }
  2242.                 #${this.dialogId} .ai-chat-header .header-buttons {
  2243.                     display: flex;
  2244.                     align-items: center;
  2245.                 }
  2246.                 #${this.dialogId} .ai-chat-header .btn-icon { /* Style for icon buttons */
  2247.                     background: none;
  2248.                     border: none;
  2249.                     font-size: 1.2rem; /* Adjust icon size */
  2250.                     opacity: 0.6;
  2251.                     cursor: pointer;
  2252.                     padding: 5px;
  2253.                     margin-left: 8px;
  2254.                 }
  2255.                 #${this.dialogId} .ai-chat-header .btn-icon:hover {
  2256.                     opacity: 1;
  2257.                 }
  2258.                 #${this.messagesContainerId} {
  2259.                     flex-grow: 1;
  2260.                     overflow-y: auto;
  2261.                     padding: 15px;
  2262.                     background-color: #f0f0f0; /* Light grey background for messages */
  2263.                 }
  2264.                 #${this.messagesContainerId} .message {
  2265.                     margin-bottom: 10px;
  2266.                     padding: 8px 12px;
  2267.                     border-radius: 15px;
  2268.                     max-width: 80%;
  2269.                     word-wrap: break-word;
  2270.                 }
  2271.                 #${this.messagesContainerId} .message.user {
  2272.                     background-color: #007bff;
  2273.                     color: white;
  2274.                     margin-left: auto;
  2275.                     border-bottom-right-radius: 5px;
  2276.                 }
  2277.                 #${this.messagesContainerId} .message.ai {
  2278.                     background-color: #e9ecef;
  2279.                     color: #333;
  2280.                     margin-right: auto;
  2281.                     border-bottom-left-radius: 5px;
  2282.                 }
  2283.                  #${this.messagesContainerId} .message.error {
  2284.                     background-color: #f8d7da;
  2285.                     color: #721c24;
  2286.                     margin-right: auto;
  2287.                     border-bottom-left-radius: 5px;
  2288.                     font-style: italic;
  2289.                 }
  2290.                 #${this.dialogId} .ai-chat-input-area {
  2291.                     display: flex;
  2292.                     align-items: flex-start; /* Align items to the start for multi-line textarea */
  2293.                     padding: 10px;
  2294.                     border-top: 1px solid #dee2e6;
  2295.                     background-color: #f8f9fa;
  2296.                 }
  2297.                 #${this.inputAreaId} {
  2298.                     flex-grow: 1;
  2299.                     margin-right: 8px; /* Reduced margin */
  2300.                     resize: none; /* Prevent manual resize */
  2301.                     min-height: 40px; /* Ensure it's at least one line */
  2302.                     max-height: 120px; /* Limit max height for textarea */
  2303.                     overflow-y: auto; /* Allow scroll if content exceeds max-height */
  2304.                     line-height: 1.5; /* Adjust line height for better readability */
  2305.                 }
  2306.                 #${this.sendButtonId} {
  2307.                     height: 40px; /* Keep button height consistent */
  2308.                     min-width: 65px; /* Ensure button has enough space for "发送" */
  2309.                     padding-left: 12px; 
  2310.                     padding-right: 12px;
  2311.                     align-self: flex-end; /* Align button to bottom if textarea grows */
  2312.                 }
  2313.                 .ai-chat-options {
  2314.                     padding: 5px 10px;
  2315.                     background-color: #f8f9fa;
  2316.                     border-bottom: 1px solid #dee2e6;
  2317.                     font-size: 0.85rem;
  2318.                 }
  2319.                 .ai-chat-options .custom-control-label {
  2320.                     font-weight: normal;
  2321.                 }
  2322.             `;
  2323.             GM_addStyle(css);
  2324.         }
  2325.  
  2326.         insertFab() {
  2327.             if (document.getElementById(this.fabId)) return;
  2328.             const fab = document.createElement('div');
  2329.             fab.id = this.fabId;
  2330.             fab.innerHTML = '<i class="fas fa-robot"></i>'; // Example icon
  2331.             fab.title = 'AI 助手';
  2332.             fab.addEventListener('click', () => this.toggleDialog());
  2333.             document.body.appendChild(fab);
  2334.         }
  2335.  
  2336.         insertDialog() {
  2337.             if (document.getElementById(this.dialogId)) return;
  2338.  
  2339.             const dialog = document.createElement('div');
  2340.             dialog.id = this.dialogId;
  2341.             dialog.innerHTML = `
  2342.                 <div class="ai-chat-header">
  2343.                     <h5>AI 助手</h5>
  2344.                     <div class="header-buttons">
  2345.                         <button type="button" class="btn-icon" id="${this.clearHistoryButtonId}" title="清空聊天记录">
  2346.                             <i class="fas fa-trash-alt"></i>
  2347.                         </button>
  2348.                         <button type="button" class="btn-icon close" id="${this.closeButtonId}" aria-label="Close" title="关闭对话框">
  2349.                             <span aria-hidden="true">&times;</span>
  2350.                         </button>
  2351.                     </div>
  2352.                 </div>
  2353.                 <div id="${this.messagesContainerId}">
  2354.                     <div class="message ai">你好！有什么可以帮你的吗？</div>
  2355.                 </div>
  2356.                 <div class="ai-chat-options">
  2357.                     <div class="custom-control custom-switch custom-control-sm">
  2358.                         <input type="checkbox" class="custom-control-input" id="${this.sendContextToggleId}">
  2359.                         <label class="custom-control-label" for="${this.sendContextToggleId}">发送页面上下文给AI</label>
  2360.                     </div>
  2361.                 </div>
  2362.                 <div class="ai-chat-options" style="border-top: 1px solid #dee2e6; padding-top: 8px; margin-top: 5px;"> <!-- Model selection for AI Chat -->
  2363.                     <div class="form-group mb-1">
  2364.                         <label for="${this.aiChatModelInputId}" style="font-size: 0.85rem; margin-bottom: .2rem;">AI 模型:</label>
  2365.                         <div class="input-group input-group-sm">
  2366.                             <input type="text" class="form-control form-control-sm" id="${this.aiChatModelInputId}" placeholder="默认 (gpt-4o-mini)" list="${this.aiChatModelDatalistId}">
  2367.                             <datalist id="${this.aiChatModelDatalistId}"></datalist>
  2368.                             <div class="input-group-append">
  2369.                                 <button class="btn btn-outline-secondary btn-sm" type="button" id="${this.fetchAiChatModelsButtonId}" title="获取模型列表">
  2370.                                     <i class="fas fa-sync-alt"></i>
  2371.                                 </button>
  2372.                             </div>
  2373.                         </div>
  2374.                     </div>
  2375.                 </div>
  2376.                 <div class="ai-chat-input-area">
  2377.                     <textarea id="${this.inputAreaId}" class="form-control" placeholder="输入消息..."></textarea>
  2378.                     <button id="${this.sendButtonId}" class="btn btn-primary">发送</button>
  2379.                 </div>
  2380.             `;
  2381.             document.body.appendChild(dialog);
  2382.  
  2383.             // Add event listeners
  2384.             document.getElementById(this.closeButtonId).addEventListener('click', () => this.toggleDialog(false));
  2385.             document.getElementById(this.clearHistoryButtonId).addEventListener('click', () => this.clearChatHistory());
  2386.             document.getElementById(this.sendButtonId).addEventListener('click', () => this.sendMessage());
  2387.             
  2388.             const sendContextToggle = document.getElementById(this.sendContextToggleId);
  2389.             const aiChatModelInput = document.getElementById(this.aiChatModelInputId);
  2390.             const fetchAiChatModelsButton = document.getElementById(this.fetchAiChatModelsButtonId);
  2391.  
  2392.             // Load saved preference for sending context
  2393.             const savedSendContextPreference = localStorage.getItem(this.localStorageKeySendContext);
  2394.             if (savedSendContextPreference === 'true') {
  2395.                 sendContextToggle.checked = true;
  2396.             } else if (savedSendContextPreference === 'false') {
  2397.                 sendContextToggle.checked = false;
  2398.             } else {
  2399.                 sendContextToggle.checked = true; // Default to true if not set
  2400.                 localStorage.setItem(this.localStorageKeySendContext, 'true');
  2401.             }
  2402.  
  2403.             sendContextToggle.addEventListener('change', (e) => {
  2404.                 localStorage.setItem(this.localStorageKeySendContext, e.target.checked);
  2405.             });
  2406.  
  2407.             // AI Chat Model preferences
  2408.             let initialAiChatModel = localStorage.getItem(this.localStorageKeyAiChatModel);
  2409.             if (!initialAiChatModel) {
  2410.                 // If no specific AI chat model is saved, try to use the model from the current translation config
  2411.                 const currentTranslationConfigName = getCurrentApiConfigName();
  2412.                 if (currentTranslationConfigName) {
  2413.                     const configs = getApiConfigurations();
  2414.                     const activeTranslationConfig = configs.find(c => c.name === currentTranslationConfigName);
  2415.                     if (activeTranslationConfig && activeTranslationConfig.model) {
  2416.                         initialAiChatModel = activeTranslationConfig.model;
  2417.                         // Save this inherited model as the current AI chat model
  2418.                         localStorage.setItem(this.localStorageKeyAiChatModel, initialAiChatModel);
  2419.                     }
  2420.                 }
  2421.             }
  2422.             aiChatModelInput.value = initialAiChatModel || ''; // Fallback to empty if no model found
  2423.  
  2424.             aiChatModelInput.addEventListener('input', () => {
  2425.                 localStorage.setItem(this.localStorageKeyAiChatModel, aiChatModelInput.value);
  2426.             });
  2427.             fetchAiChatModelsButton.addEventListener('click', async () => {
  2428.                 await this.fetchModelsAndUpdateDatalistForChat();
  2429.             });
  2430.  
  2431.             document.getElementById(this.inputAreaId).addEventListener('keypress', (e) => {
  2432.                 if (e.key === 'Enter' && !e.shiftKey) {
  2433.                     e.preventDefault(); // Prevent newline
  2434.                     this.sendMessage();
  2435.                 }
  2436.             });
  2437.              // Auto-resize textarea
  2438.             const textarea = document.getElementById(this.inputAreaId);
  2439.             textarea.addEventListener('input', () => {
  2440.                 // Auto-resize textarea based on content, up to max-height
  2441.                 textarea.style.height = 'auto'; // Reset height to shrink if text is deleted
  2442.                 let scrollHeight = textarea.scrollHeight;
  2443.                 const maxHeight = parseInt(window.getComputedStyle(textarea).maxHeight, 10);
  2444.                 if (maxHeight && scrollHeight > maxHeight) {
  2445.                     textarea.style.height = maxHeight + 'px';
  2446.                     textarea.style.overflowY = 'auto';
  2447.                 } else {
  2448.                     textarea.style.height = scrollHeight + 'px';
  2449.                     textarea.style.overflowY = 'hidden';
  2450.                 }
  2451.             });
  2452.  
  2453.             // Make dialog draggable
  2454.             const header = dialog.querySelector('.ai-chat-header');
  2455.             header.addEventListener('mousedown', (e) => {
  2456.                 this.isDragging = true;
  2457.                 this.dragStartX = e.clientX - dialog.offsetLeft;
  2458.                 this.dragStartY = e.clientY - dialog.offsetTop;
  2459.                 header.style.cursor = 'grabbing'; // Change cursor while dragging
  2460.                 // Prevent text selection during drag
  2461.                 document.body.style.userSelect = 'none';
  2462.             });
  2463.  
  2464.             document.addEventListener('mousemove', (e) => {
  2465.                 if (!this.isDragging) return;
  2466.                 const newX = e.clientX - this.dragStartX;
  2467.                 const newY = e.clientY - this.dragStartY;
  2468.  
  2469.                 // Keep dialog within viewport boundaries (optional)
  2470.                 const maxX = window.innerWidth - dialog.offsetWidth;
  2471.                 const maxY = window.innerHeight - dialog.offsetHeight;
  2472.  
  2473.                 dialog.style.left = Math.max(0, Math.min(newX, maxX)) + 'px';
  2474.                 dialog.style.top = Math.max(0, Math.min(newY, maxY)) + 'px';
  2475.                 // Update position relative to bottom/right if needed, but left/top is simpler for dragging
  2476.                 dialog.style.bottom = 'auto';
  2477.                 dialog.style.right = 'auto';
  2478.             });
  2479.  
  2480.             document.addEventListener('mouseup', () => {
  2481.                 if (this.isDragging) {
  2482.                     this.isDragging = false;
  2483.                     header.style.cursor = 'move';
  2484.                     document.body.style.userSelect = ''; // Restore text selection
  2485.                 }
  2486.             });
  2487.         }
  2488.  
  2489.         toggleDialog(forceShow = null) {
  2490.             if (!document.getElementById(this.dialogId)) {
  2491.                 this.insertDialog(); // Create dialog on first open
  2492.             }
  2493.             const dialog = document.getElementById(this.dialogId);
  2494.             const shouldShow = forceShow !== null ? forceShow : dialog.style.display === 'none';
  2495.  
  2496.             if (shouldShow) {
  2497.                 dialog.style.display = 'flex';
  2498.                 // Focus input when opened
  2499.                 setTimeout(() => document.getElementById(this.inputAreaId)?.focus(), 0);
  2500.             } else {
  2501.                 dialog.style.display = 'none';
  2502.             }
  2503.         }
  2504.  
  2505.         displayMessage(text, sender = 'ai', isError = false) {
  2506.             const messagesContainer = document.getElementById(this.messagesContainerId);
  2507.             if (!messagesContainer) return;
  2508.  
  2509.             const messageDiv = document.createElement('div');
  2510.             messageDiv.classList.add('message', sender);
  2511.             if (isError) {
  2512.                 messageDiv.classList.add('error');
  2513.             }
  2514.             
  2515.             if (sender === 'ai' && !isError) {
  2516.                 messageDiv.innerHTML = text.replace(/\n/g, '<br>'); // Initial text or full text if not streaming
  2517.             } else {
  2518.                 messageDiv.textContent = text;
  2519.             }
  2520.             
  2521.             messagesContainer.appendChild(messageDiv);
  2522.             messagesContainer.scrollTop = messagesContainer.scrollHeight;
  2523.             return messageDiv; // Return the created message element for potential stream updates
  2524.         }
  2525.  
  2526.         updateAIMessage(messageElement, chunk) {
  2527.             if (!messageElement) return;
  2528.             // Append new chunk, converting newlines.
  2529.             // For proper Markdown streaming, this would need to be more sophisticated,
  2530.             // potentially re-rendering the whole Markdown on each chunk or using a lib that supports streaming.
  2531.             messageElement.innerHTML += chunk.replace(/\n/g, '<br>');
  2532.             const messagesContainer = document.getElementById(this.messagesContainerId);
  2533.             if (messagesContainer) {
  2534.                 messagesContainer.scrollTop = messagesContainer.scrollHeight;
  2535.             }
  2536.         }
  2537.         
  2538.         clearChatHistory() {
  2539.             const messagesContainer = document.getElementById(this.messagesContainerId);
  2540.             if (messagesContainer) {
  2541.                 messagesContainer.innerHTML = ''; // Clear all messages
  2542.                 this.displayMessage('你好！有什么可以帮你的吗？', 'ai'); // Display initial greeting
  2543.             }
  2544.         }
  2545.  
  2546.         async sendMessage() {
  2547.             const inputArea = document.getElementById(this.inputAreaId);
  2548.             const sendButton = document.getElementById(this.sendButtonId);
  2549.             const messageText = inputArea.value.trim();
  2550.  
  2551.             if (!messageText) return;
  2552.  
  2553.             this.displayMessage(messageText, 'user');
  2554.             inputArea.value = '';
  2555.             // Reset textarea height after sending
  2556.             inputArea.style.height = 'auto'; 
  2557.             inputArea.style.height = (inputArea.scrollHeight < 40 ? 40 : inputArea.scrollHeight) + 'px';
  2558.             if (parseInt(inputArea.style.height) > parseInt(window.getComputedStyle(inputArea).maxHeight)) {
  2559.                  inputArea.style.height = window.getComputedStyle(inputArea).maxHeight;
  2560.                  inputArea.style.overflowY = 'auto';
  2561.             } else {
  2562.                  inputArea.style.overflowY = 'hidden';
  2563.             }
  2564.             inputArea.disabled = true;
  2565.             sendButton.disabled = true;
  2566.             
  2567.             // Display "Thinking..." and get the message element
  2568.             let aiMessageElement = this.displayMessage('思考中...', 'ai'); 
  2569.             const messagesContainerElement = document.getElementById(this.messagesContainerId);
  2570.  
  2571.             try {
  2572.                 // Call chatWithAI, now potentially streaming
  2573.                 await this.chatWithAI(messageText, (chunk) => {
  2574.                     if (aiMessageElement && aiMessageElement.textContent === '思考中...') {
  2575.                         // Replace "Thinking..." with the first chunk
  2576.                         aiMessageElement.innerHTML = chunk.replace(/\n/g, '<br>');
  2577.                     } else if (aiMessageElement) {
  2578.                         // Append subsequent chunks
  2579.                         this.updateAIMessage(aiMessageElement, chunk);
  2580.                     }
  2581.                 });
  2582.  
  2583.                 // If the "Thinking..." message is still there (e.g. stream was empty or very fast non-streamed error)
  2584.                 // This case should ideally be handled by the streaming logic itself replacing "Thinking..."
  2585.                 // For non-streaming success, chatWithAI would have to call the onChunk callback once.
  2586.                 // If chatWithAI throws an error before any chunk, the catch block handles it.
  2587.  
  2588.             } catch (error) {
  2589.                 if (aiMessageElement && messagesContainerElement) { // Ensure element exists
  2590.                     // If "Thinking..." is still shown, replace it with error. Otherwise, display a new error message.
  2591.                     if (aiMessageElement.textContent === '思考中...') {
  2592.                          aiMessageElement.classList.add('error');
  2593.                          aiMessageElement.innerHTML = `抱歉，与 AI 通信时出错: ${error.message}`.replace(/\n/g, '<br>');
  2594.                     } else {
  2595.                         this.displayMessage(`抱歉，与 AI 通信时出错: ${error.message}`, 'ai', true);
  2596.                     }
  2597.                 } else { // Fallback if aiMessageElement somehow isn't there
  2598.                      this.displayMessage(`抱歉，与 AI 通信时出错: ${error.message}`, 'ai', true);
  2599.                 }
  2600.                 console.error('AI Chat Error:', error);
  2601.                 this.displayMessage(`抱歉，与 AI 通信时出错: ${error.message}`, 'ai', true);
  2602.             } finally {
  2603.                 inputArea.disabled = false;
  2604.                 sendButton.disabled = false;
  2605.                 inputArea.focus();
  2606.             }
  2607.         }
  2608.  
  2609.         // Modified chat function to support streaming
  2610.         async fetchModelsAndUpdateDatalistForChat() {
  2611.             const modelDatalist = document.getElementById(this.aiChatModelDatalistId);
  2612.             const fetchButton = document.getElementById(this.fetchAiChatModelsButtonId);
  2613.             const originalButtonHtml = fetchButton.innerHTML;
  2614.             fetchButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
  2615.             fetchButton.disabled = true;
  2616.  
  2617.             let API_SECRET_KEY = '';
  2618.             let BASE_URL = '';
  2619.             const currentConfigName = getCurrentApiConfigName();
  2620.             let activeConfig = null;
  2621.  
  2622.             if (currentConfigName) {
  2623.                 const configs = getApiConfigurations();
  2624.                 activeConfig = configs.find(c => c.name === currentConfigName);
  2625.             }
  2626.  
  2627.             if (activeConfig) {
  2628.                 BASE_URL = activeConfig.baseUrl;
  2629.                 API_SECRET_KEY = activeConfig.apiKey;
  2630.             } else {
  2631.                 showToast('请先在“机器翻译”配置中选择一个有效的 API 配置。', 'error', 5000);
  2632.                 fetchButton.innerHTML = originalButtonHtml;
  2633.                 fetchButton.disabled = false;
  2634.                 return;
  2635.             }
  2636.  
  2637.             if (!BASE_URL || !API_SECRET_KEY) {
  2638.                 showToast('当前选中的 API 配置缺少 Base URL 或 API Key。', 'error', 5000);
  2639.                 fetchButton.innerHTML = originalButtonHtml;
  2640.                 fetchButton.disabled = false;
  2641.                 return;
  2642.             }
  2643.  
  2644.             const modelsUrl = `${BASE_URL}${BASE_URL.endsWith('/') ? '' : '/'}models`;
  2645.  
  2646.             try {
  2647.                 const response = await fetch(modelsUrl, {
  2648.                     method: 'GET',
  2649.                     headers: { 'Authorization': `Bearer ${API_SECRET_KEY}` }
  2650.                 });
  2651.                 if (!response.ok) {
  2652.                     const errorData = await response.text();
  2653.                     showToast(`为AI助手获取模型列表失败: ${response.status} - ${errorData.substring(0,100)}`, 'error', 5000);
  2654.                     return;
  2655.                 }
  2656.                 const data = await response.json();
  2657.                 if (data && data.data && Array.isArray(data.data)) {
  2658.                     modelDatalist.innerHTML = ''; // Clear existing options
  2659.                     data.data.forEach(model => {
  2660.                         if (model.id) {
  2661.                             const option = document.createElement('option');
  2662.                             option.value = model.id;
  2663.                             modelDatalist.appendChild(option);
  2664.                         }
  2665.                     });
  2666.                     showToast('AI助手模型列表已更新。', 'success');
  2667.                 } else {
  2668.                     showToast('AI助手模型列表响应数据格式不符合预期。', 'warning', 4000);
  2669.                 }
  2670.             } catch (error) {
  2671.                 showToast(`为AI助手获取模型列表时发生网络错误: ${error.message}`, 'error', 5000);
  2672.             } finally {
  2673.                 fetchButton.innerHTML = originalButtonHtml;
  2674.                 fetchButton.disabled = false;
  2675.             }
  2676.         }
  2677.  
  2678.         async chatWithAI(userMessage, onChunkReceived) {
  2679.             let API_SECRET_KEY = '';
  2680.             let BASE_URL = '';
  2681.             
  2682.             const currentConfigName = getCurrentApiConfigName(); // This is the translation config
  2683.             let activeTranslationConfig = null;
  2684.             if (currentConfigName) {
  2685.                 const configs = getApiConfigurations();
  2686.                 activeTranslationConfig = configs.find(c => c.name === currentConfigName);
  2687.             }
  2688.  
  2689.             // Get AI Chat specific model.
  2690.             // Priority: 1. localStorageKeyAiChatModel, 2. activeTranslationConfig.model, 3. 'gpt-4o-mini'
  2691.             let model = localStorage.getItem(this.localStorageKeyAiChatModel);
  2692.             if (!model && activeTranslationConfig && activeTranslationConfig.model) {
  2693.                 model = activeTranslationConfig.model;
  2694.             }
  2695.             if (!model) {
  2696.                 model = 'gpt-4o-mini'; // Ultimate fallback
  2697.             }
  2698.             
  2699.             let temperature = 0.7; // Default temperature for chat
  2700.             let systemPrompt = `你是一个在 Paratranz 翻译平台工作的 AI 助手。请根据用户的问题，结合当前条目的原文、上下文、术语等信息（如果提供），提供翻译建议、解释或回答相关问题。请保持回答简洁明了。`;
  2701.  
  2702.             if (activeTranslationConfig) {
  2703.                 BASE_URL = activeTranslationConfig.baseUrl;
  2704.                 API_SECRET_KEY = activeTranslationConfig.apiKey;
  2705.                 temperature = (activeTranslationConfig.temperature !== undefined && activeTranslationConfig.temperature !== '') 
  2706.                               ? parseFloat(activeTranslationConfig.temperature) 
  2707.                               : temperature;
  2708.             } else {
  2709.                 console.warn("AI Chat: No active API configuration selected for API credentials. Chat might fail.");
  2710.                 // Attempt to use fallback keys if absolutely necessary, but ideally user should configure
  2711.                 BASE_URL = localStorage.getItem('baseUrl_fallback_for_translate') || ''; 
  2712.                 API_SECRET_KEY = localStorage.getItem('apiKey_fallback_for_translate') || '';
  2713.             }
  2714.  
  2715.             if (!BASE_URL || !API_SECRET_KEY) {
  2716.                 throw new Error("API Base URL 或 Key 未配置。请在“机器翻译”配置中设置。");
  2717.             }
  2718.  
  2719.             // --- Context Gathering (Optional but Recommended) ---
  2720.             let contextInfo = "";
  2721.             const shouldSendContext = localStorage.getItem(this.localStorageKeySendContext) === 'true';
  2722.  
  2723.             if (shouldSendContext) {
  2724.                 try {
  2725.                     const originalDiv = document.querySelector('.original.well');
  2726.                     if (originalDiv) contextInfo += `当前原文 (Original Text):\n${originalDiv.innerText.trim()}\n\n`;
  2727.  
  2728.                     const currentTranslationTextarea = document.querySelector('textarea.translation.form-control');
  2729.                     if (currentTranslationTextarea && currentTranslationTextarea.value.trim()) {
  2730.                         contextInfo += `当前翻译 (Current Translation):\n${currentTranslationTextarea.value.trim()}\n\n`;
  2731.                     }
  2732.  
  2733.                     const contextNoteDiv = document.querySelector('.context .well');
  2734.                     if (contextNoteDiv) contextInfo += `上下文注释 (Context Note):\n${contextNoteDiv.innerText.trim()}\n\n`;
  2735.  
  2736.                     const terms = await getTermsData(); // Reuse existing function
  2737.                     if (terms.length > 0) {
  2738.                         contextInfo += `相关术语 (Terms):\n${terms.map(t => `${t.source} -> ${t.target}${t.note ? ` (${t.note})` : ''}`).join('\n')}\n\n`;
  2739.                     }
  2740.                 } catch (e) {
  2741.                     console.warn("AI Chat: Error gathering context:", e);
  2742.                 }
  2743.             }
  2744.             // --- End Context Gathering ---
  2745.  
  2746.             const messages = [
  2747.                 { role: "system", content: systemPrompt }
  2748.             ];
  2749.  
  2750.             if (contextInfo) {
  2751.                 messages.push({ role: "user", content: `请参考以下上下文信息：\n${contextInfo}我的问题是：\n${userMessage}` });
  2752.             } else {
  2753.                 messages.push({ role: "user", content: userMessage });
  2754.             }
  2755.  
  2756.             const requestBody = { model, temperature, messages, stream: true }; // Enable streaming
  2757.  
  2758.             const response = await fetch(`${BASE_URL}${BASE_URL.endsWith('/') ? '' : '/'}chat/completions`, {
  2759.                 method: 'POST',
  2760.                 headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${API_SECRET_KEY}` },
  2761.                 body: JSON.stringify(requestBody),
  2762.             });
  2763.  
  2764.             if (!response.ok) {
  2765.                 let errorData;
  2766.                 try { errorData = await response.json(); } catch (e) { /* ignore parsing error for non-json errors */ }
  2767.                 console.error('AI Chat API Error:', errorData || response.statusText);
  2768.                 throw new Error(`API 请求失败: ${response.status} - ${errorData?.error?.message || errorData?.message || response.statusText}`);
  2769.             }
  2770.  
  2771.             if (!response.body) {
  2772.                 throw new Error('ReadableStream not available in response.');
  2773.             }
  2774.  
  2775.             const reader = response.body.getReader();
  2776.             const decoder = new TextDecoder();
  2777.             let buffer = '';
  2778.  
  2779.             try {
  2780.                 while (true) {
  2781.                     const { done, value } = await reader.read();
  2782.                     if (done) break;
  2783.  
  2784.                     buffer += decoder.decode(value, { stream: true });
  2785.                     
  2786.                     let eolIndex;
  2787.                     while ((eolIndex = buffer.indexOf('\n')) >= 0) {
  2788.                         const line = buffer.substring(0, eolIndex).trim();
  2789.                         buffer = buffer.substring(eolIndex + 1);
  2790.  
  2791.                         if (line.startsWith('data: ')) {
  2792.                             const jsonData = line.substring(6);
  2793.                             if (jsonData === '[DONE]') {
  2794.                                 console.log("Stream finished.");
  2795.                                 return; // Stream ended
  2796.                             }
  2797.                             try {
  2798.                                 const parsed = JSON.parse(jsonData);
  2799.                                 if (parsed.choices && parsed.choices[0]?.delta?.content) {
  2800.                                     onChunkReceived(parsed.choices[0].delta.content);
  2801.                                 }
  2802.                             } catch (e) {
  2803.                                 console.error('Error parsing stream JSON:', e, jsonData);
  2804.                             }
  2805.                         }
  2806.                     }
  2807.                 }
  2808.                 // Process any remaining buffer content if necessary (though for SSE, lines usually end with \n)
  2809.                 if (buffer.trim().startsWith('data: ')) {
  2810.                      const jsonData = buffer.trim().substring(6);
  2811.                      if (jsonData !== '[DONE]') {
  2812.                         try {
  2813.                             const parsed = JSON.parse(jsonData);
  2814.                             if (parsed.choices && parsed.choices[0]?.delta?.content) {
  2815.                                 onChunkReceived(parsed.choices[0].delta.content);
  2816.                             }
  2817.                         } catch (e) {
  2818.                             console.error('Error parsing final buffer JSON:', e, jsonData);
  2819.                         }
  2820.                      }
  2821.                 }
  2822.  
  2823.  
  2824.             } catch (error) {
  2825.                 console.error('Error reading stream:', error);
  2826.                 throw new Error(`读取流时出错: ${error.message}`);
  2827.             } finally {
  2828.                 reader.releaseLock();
  2829.             }
  2830.         }
  2831.     }
  2832.  
  2833.     // --- Initialization ---
  2834.     const aiChatDialog = new AIChatDialog(); // Initialize AI Chat Dialog
  2835.  
  2836. })();