☰

Illusion

Illusion（幻觉）是一个跨平台 Prompts 管理工具，支持在以下平台使用：Google AI Studio, ChatGPT, Claude, Grok 和 DeepSeek

  1. // ==UserScript==
  2. // @name         Illusion
  3. // @icon         https://raw.githubusercontent.com/cattail-mutt/Illusion/refs/heads/main/image/icons/illusion.png
  4. // @namespace    https://github.com/cattail-mutt
  5. // @version      1.5
  6. // @description  Illusion（幻觉）是一个跨平台 Prompts 管理工具，支持在以下平台使用：Google AI Studio, ChatGPT, Claude, Grok 和 DeepSeek
  7. // @author       Mukai
  8. // @license      MIT
  9. // @match        https://aistudio.google.com/*
  10. // @match        https://chatgpt.com/*
  11. // @match        https://claude.ai/*
  12. // @match        https://chat.deepseek.com/*
  13. // @match        https://grok.com/*
  14. // @grant        GM_setValue
  15. // @grant        GM_getValue
  16. // @grant        GM_getResourceText
  17. // @resource     PROMPTS https://raw.githubusercontent.com/cattail-mutt/Illusion/refs/heads/main/prompt/prompts.json
  18. // @resource     THEMES https://raw.githubusercontent.com/cattail-mutt/Illusion/refs/heads/main/style/themes.json
  19. // @resource     CSS https://raw.githubusercontent.com/cattail-mutt/Illusion/refs/heads/main/style/illusion.css
  20. // @homepage     https://greasyfork.org/zh-CN/scripts/527451-%E5%B9%BB%E8%A7%89-illusion
  21. // ==/UserScript==
  22.  
  23. (function() {
  24.     'use strict';
  25.  
  26.     const debug = {
  27.         enabled: true,
  28.         log: (...args) => debug.enabled && console.log('> Illusion 日志:', ...args),
  29.         error: (...args) => console.error('> Illusion 错误:', ...args)
  30.     };
  31.  
  32.     let modalRef = null;
  33.     let overlayRef = null;
  34.     let savedPrompts = {};
  35.  
  36.     const initialPrompts = JSON.parse(GM_getResourceText('PROMPTS'));
  37.     const promptsObject = Object.fromEntries(
  38.     (initialPrompts || [])
  39.             .filter(item => item?.id && item?.value)
  40.             .map(item => [item.id, item.value])
  41.     );
  42.     console.log('PROMPTS解析结果:', promptsObject);
  43.  
  44.     const THEMECONFIG = JSON.parse(GM_getResourceText('THEMES'));
  45.     debug.log('THEMES解析结果:', THEMECONFIG);
  46.  
  47.     function dispatchEvents(element, events) {
  48.         events.forEach(eventName => {
  49.             const event = eventName === 'input' 
  50.                 ? new InputEvent(eventName, { bubbles: true }) 
  51.                 : new Event(eventName, { bubbles: true });
  52.             element.dispatchEvent(event);
  53.         });
  54.     }
  55.  
  56.     function createParagraph(line) {
  57.         const p = document.createElement('p');
  58.         if (line.trim()) {
  59.             p.textContent = line;
  60.         } else {
  61.             p.innerHTML = '<br>';
  62.         }
  63.         return p;
  64.     }
  65.  
  66.     const updateProseMirror = (editor, prompt) => {  // ChatGPT 和 Claude 均使用了 ProseMirror 库构建富文本编辑器
  67.         const paragraphs = Array.from(editor.querySelectorAll('p'));
  68.         let currentContent = '';
  69.         paragraphs.forEach(p => {
  70.             const text = p.textContent.trim();
  71.             if (text) {
  72.                 currentContent += text + '\n';
  73.             } else {
  74.                 currentContent += '\n';
  75.             }
  76.         });
  77.         let newContent = currentContent.trim();
  78.         if (newContent) {
  79.             newContent += '\n';
  80.         }
  81.         editor.innerHTML = '';
  82.         if (newContent) {
  83.             newContent.split('\n').forEach(line => {
  84.                 editor.appendChild(createParagraph(line));
  85.             });
  86.         }
  87.         const lines = prompt.split('\n');
  88.         lines.forEach((line, index) => {
  89.             editor.appendChild(createParagraph(line));
  90.             if (index < lines.length - 1 && !line.trim()) {
  91.                 const brP = document.createElement('p');
  92.                 brP.innerHTML = '<br>';
  93.                 editor.appendChild(brP);
  94.             }
  95.         });
  96.         dispatchEvents(editor, ['input', 'change']);
  97.     };
  98.  
  99.     const updateTextArea = async (textarea, prompt) => {  // Gemini 和 DeepSeek 使用的均是纯文本输入框 <textarea>
  100.         const currentContent = textarea.value;
  101.         const newContent = currentContent === '' 
  102.             ? prompt 
  103.             : currentContent + "\n" + prompt;
  104.         const setter = Object.getOwnPropertyDescriptor(
  105.             window.HTMLTextAreaElement.prototype,
  106.             "value"
  107.         ).set;
  108.         setter.call(textarea, newContent);
  109.         dispatchEvents(textarea, ['focus', 'input', 'change']);
  110.     };
  111.  
  112.     const CONFIG = {
  113.         maxRetries: 3,
  114.         retryDelay: 1000,
  115.         initTimeout: 10000,
  116.         sync: {
  117.             enabled: true,  // 是否同步仓库中的 prompts.yaml
  118.             blacklist: ['undesired_prompt,e.g. dev', 'undesired_prompt,e.g. graphviz']  // 同步黑名单，其中的键名对应的提示词将不会被同步
  119.         },
  120.         sites: {
  121.             CHATGPT: {
  122.                 id: 'chatgpt',
  123.                 icon: 'https://raw.githubusercontent.com/cattail-mutt/Illusion/refs/heads/main/image/icons/chatgpt.svg',
  124.                 buttonSize: '48px',
  125.                 selector: 'div.ProseMirror[contenteditable=true]',
  126.                 setPrompt: updateProseMirror
  127.             },
  128.             CLAUDE: {  // CSP 限制：用 svg 塞图标
  129.                 id: 'claude',
  130.                 icon: `<svg xmlns="http://www.w3.org/2000/svg" style="flex:none;line-height:1" viewBox="0 0 24 24"><title>Claude</title><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" fill="#D97757" fill-rule="nonzero"/></svg>`,
  131.                 buttonSize: '48px',
  132.                 selector: 'div.ProseMirror[contenteditable=true]',
  133.                 setPrompt: updateProseMirror
  134.             },
  135.             DEEPSEEK: {
  136.                 id: 'deepseek',
  137.                 icon: 'https://raw.githubusercontent.com/cattail-mutt/Illusion/refs/heads/main/image/icons/deepseek.svg',
  138.                 buttonSize: '48px',
  139.                 selector: 'textarea[id="chat-input"]',
  140.                 setPrompt: updateTextArea
  141.             },
  142.             GEMINI: {
  143.                 id: 'gemini',
  144.                 icon: 'https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg',
  145.                 buttonSize: '48px',
  146.                 selector: 'ms-autosize-textarea textarea',
  147.                 setPrompt: updateTextArea
  148.             },
  149.             
  150.             GROK: {  // CSP 限制：用 svg 塞图标
  151.                 id: 'grok',
  152.                 icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24"><title>Grok</title><path d="M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815"/></svg>',
  153.                 buttonSize: '48px',
  154.                 selector: 'textarea',
  155.                 setPrompt: updateTextArea
  156.             }
  157.         }
  158.     };
  159.  
  160.     function loadExternalCSS() {
  161.         const style = document.createElement('style');
  162.         style.textContent = GM_getResourceText('CSS');
  163.         document.head.appendChild(style);
  164.     }
  165.  
  166.     function loadsiteTheme() {
  167.         const currentSite = getCurrentSite();
  168.         const theme = THEMECONFIG[currentSite];
  169.         const config = Object.values(CONFIG.sites).find(s => s.id === currentSite);
  170.         const root = document.documentElement;
  171.         root.style.setProperty('--secondary-bg', theme.secondary);
  172.         root.style.setProperty('--text-color', theme.text);
  173.         root.style.setProperty('--border-color', theme.border);
  174.         root.style.setProperty('--button-bg', theme.button.bg);
  175.         root.style.setProperty('--button-hover', theme.button.hover);
  176.         root.style.setProperty('--button-size', config.buttonSize);
  177.         root.style.setProperty('--panel-bg', theme.panel.bg);
  178.         root.style.setProperty('--panel-button-bg', theme.panel.buttonBg);
  179.         root.style.setProperty('--panel-button-hover', theme.panel.buttonHover);
  180.     }
  181.  
  182.     function waitForElement(selector, maxTimeout = CONFIG.initTimeout) {
  183.         return new Promise((resolve, reject) => {
  184.             const element = document.querySelector(selector);
  185.             if(element) {
  186.                 return resolve(element);
  187.             }
  188.             let timeout;
  189.             const observer = new MutationObserver(() => {
  190.                 const el = document.querySelector(selector);
  191.                 if (el) {
  192.                     observer.disconnect();
  193.                     clearTimeout(timeout);
  194.                     resolve(el);
  195.                 }
  196.             });
  197.             timeout = setTimeout(() => {
  198.                 observer.disconnect();
  199.                 reject(new Error(`超时：使用选择器 ${selector} 寻找元素`));
  200.             }, maxTimeout);
  201.             observer.observe(document.body, {
  202.                 childList: true,
  203.                 subtree: true
  204.             });
  205.         });
  206.     }
  207.  
  208.     function getCurrentSite() {
  209.         const url = window.location.href;
  210.         if(url.includes('aistudio.google.com')) return CONFIG.sites.GEMINI.id;
  211.         if(url.includes('chatgpt.com')) return CONFIG.sites.CHATGPT.id;
  212.         if(url.includes('claude.ai')) return CONFIG.sites.CLAUDE.id;
  213.         if(url.includes('chat.deepseek.com')) return CONFIG.sites.DEEPSEEK.id;
  214.         if(url.includes('grok.com')) return CONFIG.sites.GROK.id;
  215.     }
  216.  
  217.     function createElement(tag, attributes = {}) {
  218.         const element = document.createElement(tag);
  219.         Object.entries(attributes).forEach(([key, value]) => {
  220.             if (key === 'className') {
  221.                 element.className = value;
  222.             } else if (key === 'textContent') {
  223.                 element.textContent = value;
  224.             } else if (key === 'style' && typeof value === 'object') {
  225.                 Object.assign(element.style, value);
  226.             } else if (key === 'onclick') {
  227.                 element.addEventListener('click', value);
  228.             } else if (key.startsWith('data-')) {
  229.                 element.setAttribute(key, value);
  230.             } else if (key === 'html') {
  231.                 element.innerHTML = value;
  232.             } else if (key === 'on' && typeof value === 'object') {
  233.                 Object.entries(value).forEach(([event, handler]) => {
  234.                     element.addEventListener(event, handler);
  235.                 });
  236.             } else {
  237.                 element.setAttribute(key, value);
  238.             }
  239.         });
  240.         return element;
  241.     }
  242.  
  243.     function filterPromptsByBlacklist(prompts) {
  244.         const blacklist = new Set(CONFIG.sync.blacklist);
  245.         const filteredPrompts = {};
  246.         for (const [id, content] of Object.entries(prompts)) {
  247.             if (!blacklist.has(id)) {
  248.                 filteredPrompts[id] = content;
  249.             } else {
  250.                 debug.log(`提示词 "${id}" 在黑名单中，已过滤`);
  251.             }
  252.         }
  253.         return filteredPrompts;
  254.     }
  255.  
  256.     function syncPrompts(storedPrompts, initialPromptsObject) {
  257.         if (!CONFIG.sync.enabled) {
  258.             debug.log('提示词同步功能已禁用');
  259.             return storedPrompts;
  260.         }
  261.         debug.log('提示词库同步中...');
  262.         const filteredInitialPrompts = filterPromptsByBlacklist(initialPromptsObject);
  263.         let hasNewPrompts = false;
  264.         const syncedPrompts = { ...storedPrompts };
  265.         for (const [id, content] of Object.entries(filteredInitialPrompts)) {
  266.             if (!syncedPrompts[id]) {
  267.                 debug.log(`发现新提示词: "${id}"`);
  268.                 syncedPrompts[id] = content;
  269.                 hasNewPrompts = true;
  270.             }
  271.         }
  272.         if (hasNewPrompts) {
  273.             debug.log('同步完成，发现并添加了新的提示词');
  274.             GM_setValue('prompts', syncedPrompts);
  275.         } else {
  276.             debug.log('同步完成，没有发现新的提示词');
  277.         }
  278.         return syncedPrompts;
  279.     }
  280.  
  281.     function loadPrompts() {
  282.         debug.log('正在载入提示词...');
  283.         const storedPrompts = GM_getValue('prompts');
  284.         if (!storedPrompts) {
  285.             const filteredPrompts = filterPromptsByBlacklist(promptsObject);
  286.             savedPrompts = filteredPrompts;
  287.             debug.log('未发现 GM 存储中的提示词，将使用初始化时加载的默认提示词:', savedPrompts);
  288.             GM_setValue('prompts', savedPrompts);
  289.         } else {
  290.             debug.log('发现 GM 存储中已有提示词如下', storedPrompts);
  291.             savedPrompts = syncPrompts(storedPrompts, promptsObject);
  292.         }
  293.         return savedPrompts;
  294.     }
  295.  
  296.     function saveNewPrompt(id, content) {
  297.         savedPrompts[id] = content;
  298.         GM_setValue('prompts', savedPrompts);
  299.         updateDatalist();
  300.         debug.log('新的提示词已保存:', id);
  301.     }
  302.  
  303.     async function setPromptWithRetry(site, prompt, maxRetries = CONFIG.maxRetries) {
  304.         return new Promise(async (resolve, reject) => {
  305.             let attempts = 0;
  306.             const trySetPrompt = async () => {
  307.                 try {
  308.                     const config = Object.values(CONFIG.sites).find(s => s.id === site);
  309.                     if(!config || !config.setPrompt) {
  310.                         return reject(new Error(`缺少当前站点对应的文本编辑器配置: ${site}`));
  311.                     }
  312.                     const editor = document.querySelector(config.selector);
  313.                     if(!editor) {
  314.                         throw new Error('在页面上没有找到配置所指定的文本编辑器');
  315.                     }
  316.                     await config.setPrompt(editor, prompt);
  317.                     resolve(true);
  318.                 } catch (err) {
  319.                     if (attempts < maxRetries) {
  320.                         attempts++;
  321.                         setTimeout(trySetPrompt, CONFIG.retryDelay);
  322.                     } else {
  323.                         reject(err);
  324.                     }
  325.                 }
  326.             };
  327.             trySetPrompt();
  328.         });
  329.     }
  330.  
  331.     function initializeUI() {
  332.         if (!document.body) {
  333.             console.error('找不到 <body>');
  334.             setTimeout(initializeUI, 100);
  335.             return;
  336.         }
  337.         loadExternalCSS();
  338.         loadsiteTheme();
  339.         const button = createButton();
  340.         const panel = createPanel();
  341.         const { modal, overlay } = createModal();
  342.         setupEventListeners(button, panel, modal, overlay);
  343.     }
  344.  
  345.     function createButton() {
  346.         const button = createElement('div', {
  347.             className: 'illusion-button',
  348.             'data-tooltip': 'Illusion',
  349.             'data-tooltip-position': 'left',
  350.             'aria-label': 'Illusion'
  351.         });
  352.         const currentSite = getCurrentSite();
  353.         const config = Object.values(CONFIG.sites).find(s => s.id === currentSite);
  354.         if(config.icon.startsWith('http')) {
  355.             const img = createElement('img', {
  356.                 src: config.icon,
  357.                 width: '24',
  358.                 height: '24',
  359.                 style: {
  360.                     pointerEvents: 'none'
  361.                 }
  362.             });
  363.             button.appendChild(img);
  364.         } else {
  365.             button.innerHTML = config.icon;
  366.             const svg = button.querySelector('svg');
  367.             if(svg) {
  368.                 svg.style.width = '24px';
  369.                 svg.style.height = '24px';
  370.                 svg.style.pointerEvents = 'none';
  371.             }
  372.         }
  373.         document.body.appendChild(button);
  374.         makeDraggable(button);
  375.         return button;
  376.     }
  377.  
  378.     function createPanel() {
  379.         const panel = createElement('div', {
  380.             className: 'illusion-panel'
  381.         });
  382.         const title = createElement('div', {
  383.             className: 'panel-title',
  384.             textContent: 'Illusion'
  385.         });
  386.         panel.appendChild(title);
  387.         const inputGroup = createElement('div', {
  388.             className: 'input-group'
  389.         });
  390.         const input = createElement('input', {
  391.             className: 'prompt-input',
  392.             type: 'text',
  393.             list: 'prompt-options',
  394.             placeholder: '查找 Prompt'
  395.         });
  396.         const datalist = createElement('datalist', {
  397.             id: 'prompt-options'
  398.         });
  399.         Object.keys(savedPrompts).forEach(id => {
  400.             const option = createElement('option', {
  401.                 value: id
  402.             });
  403.             datalist.appendChild(option);
  404.         });
  405.         inputGroup.appendChild(input);
  406.         inputGroup.appendChild(datalist);
  407.         panel.appendChild(inputGroup);
  408.         const buttonGroup = createElement('div', {
  409.             className: 'button-group'
  410.         });
  411.         const newButton = createElement('button', {
  412.             className: 'panel-button',
  413.             textContent: 'New',
  414.             'data-action': 'new',
  415.             onclick: () => {
  416.                 const modal = document.querySelector('.modal');
  417.                 const overlay = document.querySelector('.modal-overlay');
  418.                 if (modal && overlay) {
  419.                     showNewPromptModal(modal, overlay);
  420.                 } else {
  421.                     debug.error('找不到模态框/遮罩层');
  422.                 }
  423.             }
  424.         });
  425.         buttonGroup.appendChild(newButton);
  426.         const manageButton = createElement('button', {
  427.             className: 'panel-button',
  428.             textContent: 'Manage',
  429.             'data-action': 'manage',
  430.             onclick: () => {
  431.                 const modal = document.querySelector('.modal');
  432.                 const overlay = document.querySelector('.modal-overlay');
  433.                 if (modal && overlay) {
  434.                     showManagePromptsModal(modal, overlay);
  435.                 } else {
  436.                     debug.error('找不到模态框/遮罩层');
  437.                 }
  438.             }
  439.         });
  440.         buttonGroup.appendChild(manageButton);
  441.         panel.appendChild(buttonGroup);
  442.         document.body.appendChild(panel);
  443.         return panel;
  444.     }
  445.  
  446.     function createModal() {
  447.         overlayRef = createElement('div', {
  448.             className: 'modal-overlay'
  449.         });
  450.         document.body.appendChild(overlayRef);
  451.         modalRef = createElement('div', {
  452.             className: 'modal',
  453.             role: 'dialog',
  454.             'aria-modal': 'true'
  455.         });
  456.         document.body.appendChild(modalRef);
  457.         return { modal: modalRef, overlay: overlayRef };
  458.     }
  459.  
  460.     function createModalFooter(buttonConfigs, modal, overlay) {
  461.         const footer = createElement('div', { className: 'modal-footer' });
  462.         buttonConfigs.forEach(config => {
  463.             const btn = createElement('button', {
  464.                 className: 'panel-button',
  465.                 textContent: config.text,
  466.                 onclick: () => {
  467.                     config.onClick && config.onClick(modal, overlay);
  468.                 }
  469.             });
  470.             footer.appendChild(btn);
  471.         });
  472.         return footer;
  473.     }
  474.  
  475.     function openModal(modal, overlay, container) {
  476.         modal.textContent = '';
  477.         modal.appendChild(container);
  478.         modal.classList.add('visible');
  479.         overlay.classList.add('visible');
  480.     }
  481.  
  482.     function hideModal(modal, overlay) {
  483.         modal.classList.remove('visible');
  484.         overlay.classList.remove('visible');
  485.     }
  486.  
  487.     function getEventPosition(e) {
  488.         if (e.touches && e.touches.length) {
  489.             return { x: e.touches[0].clientX, y: e.touches[0].clientY };
  490.         }
  491.         return { x: e.clientX, y: e.clientY };
  492.     }
  493.  
  494.     function makeDraggable(button) {
  495.         let isDragging = false;
  496.         let startX, startY;
  497.         let initialX, initialY;
  498.         let lastValidX, lastValidY;
  499.         let dragThrottle;
  500.  
  501.         function setButtonPosition(x, y) {
  502.             button.style.left = x + 'px';
  503.             button.style.top = y + 'px';
  504.             GM_setValue('buttonPosition', { x, y });
  505.         }
  506.  
  507.         function dragStart(e) {
  508.             const pos = getEventPosition(e);
  509.             startX = pos.x;
  510.             startY = pos.y;
  511.             
  512.             const rect = button.getBoundingClientRect();
  513.             initialX = rect.left;
  514.             initialY = rect.top;
  515.             
  516.             isDragging = true;
  517.             button.classList.remove('docked');
  518.             button.classList.add('dragging');
  519.         }
  520.  
  521.         function dragEnd() {
  522.             if (!isDragging) return;
  523.             isDragging = false;
  524.             button.classList.remove('dragging');
  525.     
  526.             const rect = button.getBoundingClientRect();
  527.             const viewportWidth = window.innerWidth;
  528.             const threshold = viewportWidth * 0.3;
  529.     
  530.             if (rect.left > viewportWidth - threshold) {
  531.                 setButtonPosition(viewportWidth - rect.width, rect.top);
  532.                 button.classList.add('docked');
  533.             } else if (rect.left < threshold) {
  534.                 setButtonPosition(0, rect.top);
  535.                 button.classList.add('docked');
  536.             }
  537.         }
  538.  
  539.         function drag(e) {
  540.             if (!isDragging) return;
  541.             e.preventDefault();
  542.     
  543.             if (dragThrottle) return;
  544.             dragThrottle = setTimeout(() => {
  545.                 dragThrottle = null;
  546.             }, 16);
  547.             
  548.             const { x: currentX, y: currentY } = getEventPosition(e);
  549.             const deltaX = currentX - startX;
  550.             const deltaY = currentY - startY;
  551.  
  552.             requestAnimationFrame(() => {
  553.                 setButtonPosition(initialX + deltaX, initialY + deltaY);
  554.                 lastValidX = initialX + deltaX;
  555.                 lastValidY = initialY + deltaY;
  556.             });
  557.         }
  558.  
  559.         button.addEventListener('touchstart', dragStart, { passive: false });
  560.         button.addEventListener('touchend', dragEnd, { passive: false });
  561.         button.addEventListener('touchmove', drag, { passive: false });
  562.         button.addEventListener('mousedown', dragStart);
  563.         document.addEventListener('mousemove', drag);
  564.         document.addEventListener('mouseup', dragEnd);
  565.         window.addEventListener('resize', () => {
  566.             if (lastValidX !== undefined && lastValidY !== undefined) {
  567.                 setButtonPosition(lastValidX, lastValidY);
  568.             }
  569.         });
  570.         const savedPosition = GM_getValue('buttonPosition');
  571.         if (savedPosition) {
  572.             setButtonPosition(savedPosition.x, savedPosition.y);
  573.         } else {
  574.             setButtonPosition(
  575.                 window.innerWidth - button.offsetWidth - 20, 
  576.                 window.innerHeight / 2 - button.offsetHeight / 2
  577.             );
  578.         }
  579.     }
  580.  
  581.     function createModalContainer(title, contentElement, footerElement) {
  582.         const container = createElement('div');
  583.         const header = createElement('div', {
  584.             className: 'modal-header',
  585.             textContent: title
  586.         });
  587.         container.appendChild(header);
  588.         container.appendChild(contentElement);
  589.         container.appendChild(footerElement);
  590.         return container;
  591.     }
  592.  
  593.     function createFormGroup(labelText, inputOptions) {
  594.         const group = createElement('div', { className: 'form-group' });
  595.         const label = createElement('label', {
  596.             className: 'form-label',
  597.             textContent: labelText
  598.         });
  599.         let input;
  600.         if (inputOptions.type === 'textarea') {
  601.             input = createElement('textarea', inputOptions);
  602.         } else {
  603.             input = createElement('input', inputOptions);
  604.         }
  605.         group.appendChild(label);
  606.         group.appendChild(input);
  607.         return { group, input };
  608.     }
  609.  
  610.     function createPromptModal({ title, promptId, promptContent, isEditable, onSave, modal, overlay }) {
  611.         const content = createElement('div', { className: 'modal-content' });
  612.         const { group: idGroup, input: idInput } = createFormGroup('Prompt ID', {
  613.             className: 'form-input',
  614.             type: 'text',
  615.             value: promptId || '',
  616.             placeholder: '为提示词命名'
  617.         });
  618.         if (promptId && !isEditable) {
  619.             idInput.disabled = true;
  620.         }
  621.         content.appendChild(idGroup);
  622.         const { group: contentGroup, input: contentInput } = createFormGroup('Prompt Content', {
  623.             className: 'form-textarea',
  624.             type: 'textarea',
  625.             value: promptContent || '',
  626.             placeholder: '输入提示词的内容'
  627.         });
  628.         contentInput.value = promptContent || '';
  629.         content.appendChild(contentGroup);
  630.         const footerButtons = [
  631.             {
  632.                 text: 'Cancel',
  633.                 onClick: (modal, overlay) => hideModal(modal, overlay)
  634.             },
  635.             {
  636.                 text: promptId ? 'Update' : 'Save',
  637.                 onClick: () => {
  638.                     const idVal = idInput.value.trim();
  639.                     const contentVal = contentInput.value.trim();
  640.                     onSave(idVal, contentVal);
  641.                 }
  642.             }
  643.         ];
  644.         const footer = createModalFooter(footerButtons, modal, overlay);
  645.         const container = createModalContainer(title, content, footer);
  646.         openModal(modal, overlay, container);
  647.         setTimeout(() => contentInput.focus(), 100);
  648.     }
  649.  
  650.     function showNewPromptModal(modal, overlay) {
  651.         createPromptModal({
  652.             title: 'New Prompt',
  653.             promptId: '',
  654.             promptContent: '',
  655.             isEditable: true,
  656.             onSave: (id, content) => {
  657.                 if (id && content) {
  658.                     try {
  659.                         saveNewPrompt(id, content);
  660.                         hideModal(modal, overlay);
  661.                     } catch (err) {
  662.                         debug.error('提示词保存失败:', err);
  663.                         alert('保存失败，请重试');
  664.                     }
  665.                 } else {
  666.                     alert('请填写所有必填字段');
  667.                 }
  668.             },
  669.             modal,
  670.             overlay
  671.         });
  672.     }
  673.     
  674.     function showEditPromptModal(modal, overlay, id, content) {
  675.         createPromptModal({
  676.             title: 'Prompt Editing',
  677.             promptId: id,
  678.             promptContent: content,
  679.             isEditable: false,
  680.             onSave: (id, newContent) => {
  681.                 if (newContent) {
  682.                     savedPrompts[id] = newContent;
  683.                     GM_setValue('prompts', savedPrompts);
  684.                     hideModal(modal, overlay);
  685.                     showManagePromptsModal(modal, overlay);
  686.                     updateDatalist();
  687.                 } else {
  688.                     alert('内容不能为空');
  689.                 }
  690.             },
  691.             modal,
  692.             overlay
  693.         });
  694.     }
  695.  
  696.     function showManagePromptsModal(modal, overlay) {
  697.         const container = createElement('div');
  698.         const header = createElement('div', {
  699.             className: 'modal-header',
  700.             textContent: 'Manage Prompts'
  701.         });
  702.         container.appendChild(header);
  703.         const content = createElement('div', {
  704.             className: 'modal-content'
  705.         });
  706.         Object.entries(savedPrompts).forEach(([id, promptContent]) => {
  707.             const promptGroup = createElement('div', {
  708.                 className: 'form-group',
  709.                 style: {
  710.                     display: 'flex',
  711.                     alignItems: 'center',
  712.                     justifyContent: 'space-between',
  713.                     padding: '8px',
  714.                     borderBottom: '1px solid #eee'
  715.                 }
  716.             });
  717.             const promptId = createElement('div', {
  718.                 className: 'form-label',
  719.                 style: { margin: '0', flex: '1' },
  720.                 textContent: id
  721.             });
  722.             const buttonGroup = createElement('div', {
  723.                 className: 'button-group',
  724.                 style: { marginLeft: '16px' }
  725.             });
  726.             const editButton = createElement('button', {
  727.                 className: 'panel-button',
  728.                 textContent: 'Edit',
  729.                 onclick: () => {
  730.                     showEditPromptModal(modal, overlay, id, promptContent);
  731.                 }
  732.             });
  733.             const deleteButton = createElement('button', {
  734.                 className: 'panel-button',
  735.                 textContent: 'Delete',
  736.                 onclick: () => {
  737.                     if (confirm(`确定要删除 "${id}" 吗？`)) {
  738.                         delete savedPrompts[id];
  739.                         GM_setValue('prompts', savedPrompts);
  740.                         promptGroup.remove();
  741.                         updateDatalist();
  742.                     }
  743.                 }
  744.             });
  745.             buttonGroup.appendChild(editButton);
  746.             buttonGroup.appendChild(deleteButton);
  747.             promptGroup.appendChild(promptId);
  748.             promptGroup.appendChild(buttonGroup);
  749.             content.appendChild(promptGroup);
  750.         });
  751.         container.appendChild(content);
  752.         const footer = createElement('div', {
  753.             className: 'modal-footer'
  754.         });
  755.         const closeButton = createElement('button', {
  756.             className: 'panel-button',
  757.             textContent: 'Close',
  758.             onclick: () => {
  759.                 hideModal(modal, overlay);
  760.             }
  761.         });
  762.         footer.appendChild(closeButton);
  763.         container.appendChild(footer);
  764.         openModal(modal, overlay, container);
  765.     }
  766.  
  767.     function updateDatalist() {
  768.         const datalist = document.getElementById('prompt-options');
  769.         if (!datalist) return;
  770.         debug.log('最新的提示词列表:', savedPrompts);
  771.         datalist.textContent = '';
  772.         Object.keys(savedPrompts).forEach(id => {
  773.             const option = createElement('option', { value: id });
  774.             datalist.appendChild(option);
  775.         });
  776.     }
  777.  
  778.     function setupEventListeners(button, panel, modal, overlay) {
  779.         panel.addEventListener('click', (e) => {
  780.             e.stopPropagation();
  781.         });
  782.  
  783.         button.addEventListener('click', (e) => {
  784.             if(!e.target.classList.contains('dragging')) {
  785.                 e.stopPropagation();
  786.                 panel.classList.toggle('visible');
  787.             }
  788.         });
  789.  
  790.         document.addEventListener('click', () => {
  791.             if (panel.classList.contains('visible')) {
  792.                 panel.classList.remove('visible');
  793.             }
  794.         });
  795.  
  796.         panel.addEventListener('click', (e) => {
  797.             const btn = e.target.closest('button[data-action]');
  798.             if (!btn) return;
  799.             const action = btn.dataset.action;
  800.             try {
  801.                 if (action === 'new') {
  802.                     showNewPromptModal(modalRef, overlayRef);
  803.                 } else if (action === 'manage') {
  804.                     showManagePromptsModal(modalRef, overlayRef);
  805.                 }
  806.             } catch (error) {
  807.                 debug.error('无效的点击操作或按钮绑定的操作异常', error);
  808.             }
  809.         });
  810.  
  811.         const promptInput = panel.querySelector('.prompt-input');
  812.  
  813.         promptInput.addEventListener('change', async (e) => {
  814.             const selectedValue = e.target.value.trim();
  815.             const promptContent = savedPrompts[selectedValue];
  816.             if (promptContent) {
  817.                 debug.log('已选择提示词:', selectedValue);
  818.                 try {
  819.                     const site = getCurrentSite();
  820.                     const success = await setPromptWithRetry(site, promptContent);
  821.                     if (!success) {
  822.                         alert('提示词输入失败，请重试');
  823.                     }
  824.                 } catch(err) {
  825.                     alert('提示词输入过程中出现如下错误：' + err.message);
  826.                 }
  827.             }
  828.             e.target.value = '';
  829.         });
  830.  
  831.         overlay.addEventListener('click', () => {
  832.             hideModal(modal, overlay);
  833.         });
  834.  
  835.         document.addEventListener('keydown', (e) => {
  836.             if (e.key === 'Escape' && modal.classList.contains('visible')) {
  837.                 hideModal(modal, overlay);
  838.             }
  839.         });
  840.     }
  841.  
  842.     async function initialize() {
  843.         debug.log('正在初始化...');
  844.         try {
  845.             const savedSyncConfig = GM_getValue('syncConfig');
  846.             if (savedSyncConfig) {
  847.                 CONFIG.sync = { ...CONFIG.sync, ...savedSyncConfig };
  848.             }
  849.             const currentSite = getCurrentSite();
  850.             savedPrompts = loadPrompts();
  851.             const siteConfig = Object.values(CONFIG.sites).find(s => s.id === currentSite);
  852.             if (!siteConfig) {
  853.                 debug.error('缺少当前站点的相关配置');
  854.                 return;
  855.             }
  856.             const editorSelector = siteConfig.selector;
  857.             try {
  858.                 await waitForElement(editorSelector);
  859.             } catch(err) {
  860.                 debug.error('找不到与配置匹配的文本编辑器元素:', err);
  861.                 return;
  862.             }
  863.             initializeUI();
  864.         } catch (error) {
  865.             debug.error('初始化过程中发生错误：', error);
  866.         }
  867.     }
  868.  
  869.     if (document.readyState === 'loading') {
  870.         document.addEventListener('DOMContentLoaded', initialize);
  871.     } else {
  872.         initialize();
  873.     }
  874. })();