☰

Text Explainer Settings

Settings module for Text Explainer

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/528763/1549028/Text%20Explainer%20Settings.js 

  1. // ==UserScript==
  2. // @name         Text Explainer Settings
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.5
  5. // @description  Settings module for Text Explainer
  6. // @author       RoCry
  7. // @license      MIT
  8. // ==/UserScript==
  9.  
  10. class TextExplainerSettings {
  11.   constructor(defaultConfig = {}) {
  12.     this.defaultConfig = Object.assign({
  13.       model: "openai-large",
  14.       apiKey: "fake",
  15.       baseUrl: "https://text.pollinations.ai/openai#",
  16.       provider: "openai",
  17.       language: "Chinese",
  18.       shortcut: {
  19.         key: "d",
  20.         ctrlKey: false,
  21.         altKey: true,
  22.         shiftKey: false,
  23.         metaKey: false
  24.       },
  25.       floatingButton: {
  26.         enabled: true,
  27.         size: "medium", // small, medium, large
  28.       }
  29.     }, defaultConfig);
  30.  
  31.     this.config = this.load();
  32.   }
  33.  
  34.   /**
  35.    * Load settings from storage
  36.    */
  37.   load() {
  38.     try {
  39.       const savedConfig = typeof GM_getValue === 'function'
  40.         ? GM_getValue('explainerConfig', {})
  41.         : JSON.parse(localStorage.getItem('explainerConfig') || '{}');
  42.       return Object.assign({}, this.defaultConfig, savedConfig);
  43.     } catch (e) {
  44.       console.error('Error loading settings:', e);
  45.       return Object.assign({}, this.defaultConfig);
  46.     }
  47.   }
  48.  
  49.   /**
  50.    * Save settings to storage
  51.    */
  52.   save() {
  53.     try {
  54.       if (typeof GM_setValue === 'function') {
  55.         GM_setValue('explainerConfig', this.config);
  56.       } else {
  57.         localStorage.setItem('explainerConfig', JSON.stringify(this.config));
  58.       }
  59.       return true;
  60.     } catch (e) {
  61.       console.error('Error saving settings:', e);
  62.       return false;
  63.     }
  64.   }
  65.  
  66.   /**
  67.    * Get setting value
  68.    */
  69.   get(key) {
  70.     return this.config[key];
  71.   }
  72.  
  73.   /**
  74.    * Set setting value
  75.    */
  76.   set(key, value) {
  77.     this.config[key] = value;
  78.     return this;
  79.   }
  80.  
  81.   /**
  82.    * Update multiple settings at once
  83.    */
  84.   update(settings) {
  85.     Object.assign(this.config, settings);
  86.     return this;
  87.   }
  88.  
  89.   /**
  90.    * Reset settings to defaults
  91.    */
  92.   reset() {
  93.     this.config = Object.assign({}, this.defaultConfig);
  94.     return this;
  95.   }
  96.  
  97.   /**
  98.    * Get all settings
  99.    */
  100.   getAll() {
  101.     return Object.assign({}, this.config);
  102.   }
  103.  
  104.   /**
  105.    * Open settings dialog
  106.    */
  107.   openDialog(onSave = null) {
  108.     // First check if dialog already exists and remove it
  109.     const existingDialog = document.getElementById('explainer-settings-dialog');
  110.     if (existingDialog) existingDialog.remove();
  111.  
  112.     // Create dialog container
  113.     const dialog = document.createElement('div');
  114.     dialog.id = 'explainer-settings-dialog';
  115.     dialog.style = `
  116.       position: fixed;
  117.       top: 50%;
  118.       left: 50%;
  119.       transform: translate(-50%, -50%);
  120.       background: white;
  121.       padding: 12px;
  122.       border-radius: 8px;
  123.       box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  124.       z-index: 10001;
  125.       width: 400px;
  126.       max-width: 90vw;
  127.       max-height: 80vh;
  128.       overflow-y: auto;
  129.       font-family: system-ui, sans-serif;
  130.       font-size: 14px;
  131.     `;
  132.  
  133.     // Add dark mode support
  134.     const styleElement = document.createElement('style');
  135.     styleElement.textContent = `
  136.       #explainer-settings-dialog {
  137.         color: #333;
  138.       }
  139.       #explainer-settings-dialog h3 {
  140.         margin-top: 0;
  141.         margin-bottom: 10px;
  142.         font-size: 16px;
  143.       }
  144.       #explainer-settings-dialog .row {
  145.         display: flex;
  146.         gap: 10px;
  147.         margin-bottom: 8px;
  148.       }
  149.       #explainer-settings-dialog .col {
  150.         flex: 1;
  151.       }
  152.       #explainer-settings-dialog label {
  153.         display: block;
  154.         margin: 4px 0 2px;
  155.         font-weight: 500;
  156.         font-size: 12px;
  157.       }
  158.       #explainer-settings-dialog input[type="text"],
  159.       #explainer-settings-dialog select {
  160.         width: 100%;
  161.         padding: 4px 6px;
  162.         border: 1px solid #ccc;
  163.         border-radius: 4px;
  164.         box-sizing: border-box;
  165.         font-size: 13px;
  166.       }
  167.       /* Fix for shortcut key width */
  168.       #explainer-settings-dialog input#explainer-shortcut-key {
  169.         width: 30px !important;
  170.         min-width: 30px;
  171.         max-width: 30px;
  172.         text-align: center;
  173.         padding: 4px 0;
  174.       }
  175.       #explainer-settings-dialog .buttons {
  176.         display: flex;
  177.         justify-content: flex-end;
  178.         gap: 8px;
  179.         margin-top: 12px;
  180.       }
  181.       #explainer-settings-dialog button {
  182.         padding: 6px 10px;
  183.         border: none;
  184.         border-radius: 4px;
  185.         cursor: pointer;
  186.         font-size: 13px;
  187.       }
  188.       #explainer-settings-dialog button.primary {
  189.         background-color: #4285f4;
  190.         color: white;
  191.       }
  192.       #explainer-settings-dialog button.secondary {
  193.         background-color: #f1f1f1;
  194.         color: #333;
  195.       }
  196.       #explainer-settings-dialog .shortcut-section {
  197.         display: flex;
  198.         align-items: flex-end;
  199.         gap: 15px;
  200.         margin-bottom: 4px;
  201.       }
  202.       #explainer-settings-dialog .key-container {
  203.         display: flex;
  204.         flex-direction: column;
  205.       }
  206.       #explainer-settings-dialog .modifier-group {
  207.         display: flex;
  208.         align-items: center;
  209.         gap: 8px;
  210.         height: 28px; /* Match the height of the input field */
  211.       }
  212.       #explainer-settings-dialog .modifier {
  213.         display: flex;
  214.         flex-direction: column;
  215.         align-items: center;
  216.         margin: 0 2px;
  217.       }
  218.       #explainer-settings-dialog .modifier input[type="checkbox"] {
  219.         margin: 0 0 2px;
  220.       }
  221.       #explainer-settings-dialog .modifier label {
  222.         font-size: 11px;
  223.         margin: 0;
  224.         user-select: none;
  225.       }
  226.       #explainer-settings-dialog .section-title {
  227.         font-weight: 600;
  228.         margin-top: 12px;
  229.         margin-bottom: 6px;
  230.         border-bottom: 1px solid #ddd;
  231.         padding-bottom: 2px;
  232.         font-size: 13px;
  233.       }
  234.       #explainer-settings-dialog .checkbox-label {
  235.         display: flex;
  236.         align-items: center;
  237.         margin: 4px 0;
  238.       }
  239.       #explainer-settings-dialog .checkbox-label input {
  240.         margin-right: 6px;
  241.       }
  242.       @media (prefers-color-scheme: dark) {
  243.         #explainer-settings-dialog {
  244.           background: #333;
  245.           color: #eee;
  246.         }
  247.         #explainer-settings-dialog input[type="text"],
  248.         #explainer-settings-dialog select {
  249.           background: #444;
  250.           color: #eee;
  251.           border-color: #555;
  252.         }
  253.         #explainer-settings-dialog button.secondary {
  254.           background-color: #555;
  255.           color: #eee;
  256.         }
  257.         #explainer-settings-dialog .section-title {
  258.           border-bottom-color: #555;
  259.         }
  260.       }
  261.     `;
  262.     document.head.appendChild(styleElement);
  263.  
  264.     // Prepare shortcut configuration
  265.     const shortcut = this.config.shortcut || this.defaultConfig.shortcut;
  266.     const floatingButton = this.config.floatingButton || this.defaultConfig.floatingButton;
  267.  
  268.     // Create dialog content with a more compact layout
  269.     dialog.innerHTML = `
  270.       <h3>Text Explainer Settings</h3>
  271.       
  272.       <div class="section-title">Language & API Settings</div>
  273.       
  274.       <div class="row">
  275.         <div class="col">
  276.           <label for="explainer-language">Language</label>
  277.           <select id="explainer-language">
  278.             <option value="Chinese" ${this.config.language === 'Chinese' ? 'selected' : ''}>Chinese</option>
  279.             <option value="English" ${this.config.language === 'English' ? 'selected' : ''}>English</option>
  280.             <option value="Japanese" ${this.config.language === 'Japanese' ? 'selected' : ''}>Japanese</option>
  281.           </select>
  282.         </div>
  283.         <div class="col">
  284.           <label for="explainer-provider">Provider</label>
  285.           <select id="explainer-provider">
  286.             <option value="gemini" ${this.config.provider === 'gemini' ? 'selected' : ''}>Gemini</option>
  287.             <option value="openai" ${this.config.provider === 'openai' ? 'selected' : ''}>OpenAI</option>
  288.             <option value="anthropic" ${this.config.provider === 'anthropic' ? 'selected' : ''}>Anthropic</option>
  289.           </select>
  290.         </div>
  291.         <div class="col">
  292.           <label for="explainer-model">Model</label>
  293.           <input id="explainer-model" type="text" value="${this.config.model}">
  294.         </div>
  295.       </div>
  296.  
  297.       <div class="row">
  298.         <div class="col">
  299.           <label for="explainer-api-key">API Key</label>
  300.           <input id="explainer-api-key" type="text" value="${this.config.apiKey || ''}">
  301.           <p style="font-size: 11px; color: #666; margin-top: 0; margin-bottom: 8px;">
  302.             Multiple keys supported, separated by commas
  303.           </p>
  304.         </div>
  305.       </div>
  306.       
  307.       <div>
  308.         <label for="explainer-base-url">API Base URL</label>
  309.         <input id="explainer-base-url" type="text" value="${this.config.baseUrl}">
  310.         <p style="font-size: 11px; color: #666; margin-top: 0; margin-bottom: 8px;">
  311.           Ending with / ignores v1, ending with # forces use of input address
  312.         </p>
  313.       </div>
  314.       
  315.       <div class="section-title">Shortcut Settings</div>
  316.       <div class="shortcut-section">
  317.         <div class="key-container">
  318.           <label for="explainer-shortcut-key">Key</label>
  319.           <input id="explainer-shortcut-key" type="text" maxlength="1" value="${shortcut.key}">
  320.         </div>
  321.         
  322.         <div class="modifier-group">
  323.           <div class="modifier">
  324.             <label for="explainer-shortcut-ctrl">⌃</label>
  325.             <input type="checkbox" id="explainer-shortcut-ctrl" ${shortcut.ctrlKey ? 'checked' : ''}>
  326.           </div>
  327.           <div class="modifier">
  328.             <label for="explainer-shortcut-alt">⌥</label>
  329.             <input type="checkbox" id="explainer-shortcut-alt" ${shortcut.altKey ? 'checked' : ''}>
  330.           </div>
  331.           <div class="modifier">
  332.             <label for="explainer-shortcut-shift">⇧</label>
  333.             <input type="checkbox" id="explainer-shortcut-shift" ${shortcut.shiftKey ? 'checked' : ''}>
  334.           </div>
  335.           <div class="modifier">
  336.             <label for="explainer-shortcut-meta">⌘</label>
  337.             <input type="checkbox" id="explainer-shortcut-meta" ${shortcut.metaKey ? 'checked' : ''}>
  338.           </div>
  339.         </div>
  340.       </div>
  341.       <p style="font-size: 11px; color: #666; margin-top: 0; margin-bottom: 8px;">
  342.         Tip: Choose a letter key (a-z) with at least one modifier key.
  343.       </p>
  344.       
  345.       <div class="section-title">Touch Device Settings</div>
  346.       <div class="row">
  347.         <div class="col">
  348.           <div class="checkbox-label">
  349.             <input type="checkbox" id="explainer-floating-enabled" ${floatingButton.enabled ? 'checked' : ''}>
  350.             <span>Show floating button</span>
  351.           </div>
  352.         </div>
  353.       </div>
  354.       
  355.       <div class="row">
  356.         <div class="col">
  357.           <label for="explainer-floating-size">Button Size</label>
  358.           <select id="explainer-floating-size">
  359.             <option value="small" ${floatingButton.size === 'small' ? 'selected' : ''}>Small</option>
  360.             <option value="medium" ${floatingButton.size === 'medium' ? 'selected' : ''}>Medium</option>
  361.             <option value="large" ${floatingButton.size === 'large' ? 'selected' : ''}>Large</option>
  362.           </select>
  363.         </div>
  364.       </div>
  365.       
  366.       <div class="buttons">
  367.         <button id="explainer-settings-cancel" class="secondary">Cancel</button>
  368.         <button id="explainer-settings-save" class="primary">Save</button>
  369.       </div>
  370.     `;
  371.  
  372.     document.body.appendChild(dialog);
  373.  
  374.     // Add event listeners
  375.     document.getElementById('explainer-settings-save').addEventListener('click', () => {
  376.       // Get shortcut settings
  377.       const shortcutSettings = {
  378.         key: document.getElementById('explainer-shortcut-key').value.toLowerCase(),
  379.         ctrlKey: document.getElementById('explainer-shortcut-ctrl').checked,
  380.         altKey: document.getElementById('explainer-shortcut-alt').checked,
  381.         shiftKey: document.getElementById('explainer-shortcut-shift').checked,
  382.         metaKey: document.getElementById('explainer-shortcut-meta').checked
  383.       };
  384.  
  385.       // Get floating button settings
  386.       const floatingButtonSettings = {
  387.         enabled: document.getElementById('explainer-floating-enabled').checked,
  388.         size: document.getElementById('explainer-floating-size').value,
  389.       };
  390.  
  391.       // Update config with all form values
  392.       this.update({
  393.         language: document.getElementById('explainer-language').value,
  394.         model: document.getElementById('explainer-model').value,
  395.         apiKey: document.getElementById('explainer-api-key').value,
  396.         baseUrl: document.getElementById('explainer-base-url').value,
  397.         provider: document.getElementById('explainer-provider').value,
  398.         shortcut: shortcutSettings,
  399.         floatingButton: floatingButtonSettings
  400.       });
  401.  
  402.       // Save to storage
  403.       this.save();
  404.  
  405.       // Remove dialog
  406.       dialog.remove();
  407.       styleElement.remove();
  408.  
  409.       // Call save callback if provided
  410.       if (typeof onSave === 'function') {
  411.         onSave(this.config);
  412.       }
  413.     });
  414.  
  415.     document.getElementById('explainer-settings-cancel').addEventListener('click', () => {
  416.       dialog.remove();
  417.       styleElement.remove();
  418.     });
  419.  
  420.     // Focus first field
  421.     document.getElementById('explainer-language').focus();
  422.  
  423.     // Add validation for the shortcut key
  424.     const keyInput = document.getElementById('explainer-shortcut-key');
  425.     keyInput.addEventListener('input', () => {
  426.       // Ensure it's a single character and convert to lowercase
  427.       if (keyInput.value.length > 0) {
  428.         keyInput.value = keyInput.value.charAt(0).toLowerCase();
  429.       }
  430.     });
  431.   }
  432. }
  433.  
  434. // Make available globally and as a module if needed
  435. window.TextExplainerSettings = TextExplainerSettings;
  436.  
  437. if (typeof module !== 'undefined') {
  438.   module.exports = TextExplainerSettings;
  439. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址