✨ feat: 添加全局设置功能，支持弹窗行为和快捷键管理

Author: wenyuanw

entrypoints/content/components/PromptSelector.tsx

@@ -6,6 +6,7 @@ import { extractVariables } from "../utils/variableParser";
 import { showVariableInput } from "./VariableInput";
 import { isDarkMode } from "@/utils/tools";
 import { getCategories } from "@/utils/categoryUtils";
+import { getGlobalSetting } from "@/utils/globalSettings";
 import { t } from "@/utils/i18n";
 
 interface PromptSelectorProps {
@@ -26,14 +27,16 @@ const PromptSelector: React.FC<PromptSelectorProps> = ({
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);
   const [categoriesMap, setCategoriesMap] = useState<Record<string, Category>>({});
+  const [closeOnOutsideClick, setCloseOnOutsideClick] = useState(true);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
 
-  // 加载分类列表
+  // 加载分类列表和全局设置
   useEffect(() => {
-    const loadCategories = async () => {
+    const loadData = async () => {
       try {
+        // 加载分类列表
         const categoriesList = await getCategories();
         const enabledCategories = categoriesList.filter(cat => cat.enabled);
         setCategories(enabledCategories);
@@ -44,12 +47,21 @@ const PromptSelector: React.FC<PromptSelectorProps> = ({
           categoryMap[cat.id] = cat;
         });
         setCategoriesMap(categoryMap);
+
+        // 加载全局设置
+        try {
+          const closeModalOnOutsideClick = await getGlobalSetting('closeModalOnOutsideClick');
+          setCloseOnOutsideClick(closeModalOnOutsideClick);
+        } catch (err) {
+          console.warn('Failed to load global settings:', err);
+          setCloseOnOutsideClick(true); // 默认启用
+        }
       } catch (err) {
         console.error(t('loadCategoriesFailed'), err);
       }
     };
 
-    loadCategories();
+    loadData();
   }, []);
 
   // 过滤提示列表 - 同时考虑搜索词和分类筛选
@@ -408,7 +420,7 @@ const PromptSelector: React.FC<PromptSelectorProps> = ({
 
   // 点击背景关闭弹窗
   const handleBackgroundClick = (e: React.MouseEvent) => {
-    if (e.target === e.currentTarget) {
+    if (e.target === e.currentTarget && closeOnOutsideClick) {
       onClose();
     }
   };

entrypoints/content/components/VariableInput.tsx

@@ -4,6 +4,7 @@ import type { PromptItemWithVariables, EditableElement } from "@/utils/types";
 import { getPromptSelectorStyles } from "../utils/styles";
 import { extractVariables, replaceVariables } from "../utils/variableParser";
 import { isDarkMode } from "@/utils/tools";
+import { getGlobalSetting } from "@/utils/globalSettings";
 import { t } from "@/utils/i18n";
 
 
@@ -161,8 +162,9 @@ const VariableInput: React.FC<VariableInputProps> = ({
     Object.fromEntries(variables.map(v => [v, '']))
   );
 
-  // 预览状态
+  // 预览状态和全局设置
   const [previewContent, setPreviewContent] = useState(prompt.content);
+  const [closeOnOutsideClick, setCloseOnOutsideClick] = useState(true);
   const firstInputRef = useRef<HTMLTextAreaElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
 
@@ -185,13 +187,26 @@ const VariableInput: React.FC<VariableInputProps> = ({
     onSubmit(processedContent);
   };
 
-  // 组件挂载时聚焦第一个输入框
+  // 组件挂载时聚焦第一个输入框和加载全局设置
   useEffect(() => {
     setTimeout(() => {
       if (firstInputRef.current) {
         firstInputRef.current.focus();
       }
     }, 100);
+
+    // 加载全局设置
+    const loadGlobalSettings = async () => {
+      try {
+        const closeModalOnOutsideClick = await getGlobalSetting('closeModalOnOutsideClick');
+        setCloseOnOutsideClick(closeModalOnOutsideClick);
+      } catch (err) {
+        console.warn('Failed to load global settings:', err);
+        setCloseOnOutsideClick(true); // 默认启用
+      }
+    };
+
+    loadGlobalSettings();
   }, []);
 
   // 如果没有变量，直接提交
@@ -225,7 +240,7 @@ const VariableInput: React.FC<VariableInputProps> = ({
 
   // 点击背景关闭弹窗
   const handleBackgroundClick = (e: React.MouseEvent) => {
-    if (e.target === e.currentTarget) {
+    if (e.target === e.currentTarget && closeOnOutsideClick) {
       onCancel();
     }
   };
@@ -357,7 +372,7 @@ export function showVariableInput(
   // 添加到documentElement（html元素），而不是body
   document.documentElement.appendChild(container);
 
-  // 创建包装组件来处理暗黑模式
+  // 创建包装组件来处理暗黑模式和全局设置
   const ThemeWrapper = () => {
     const [isDark, setIsDark] = useState(isDarkMode());
 

entrypoints/options/App.tsx

@@ -5,6 +5,7 @@ import PromptManager from "./components/PromptManager";
 import CategoryManager from "./components/CategoryManager";
 import NotionIntegrationPage from "./components/NotionIntegrationPage";
 import GoogleAuthPage from "./components/GoogleAuthPage";
+import GlobalSettings from "./components/GlobalSettings";
 import ToastContainer from "./components/ToastContainer";
 import "./App.css";
 import "~/assets/tailwind.css";
@@ -95,6 +96,7 @@ const App = () => {
               <Routes>
                 <Route path="/" element={<PromptManager />} />
                 <Route path="/categories" element={<CategoryManager />} />
+                <Route path="/settings" element={<GlobalSettings />} />
                 <Route path="/integrations/notion" element={<NotionIntegrationPage />} />
                 <Route path="/integrations/google" element={<GoogleAuthPage />} />
               </Routes>

entrypoints/options/components/GlobalSettings.tsx

@@ -0,0 +1,258 @@
+import React, { useState, useEffect } from 'react';
+import { browser } from '#imports';
+import { getGlobalSettings, updateGlobalSettings, type GlobalSettings } from '@/utils/globalSettings';
+import { t } from '@/utils/i18n';
+
+const GlobalSettingsPage: React.FC = () => {
+  const [settings, setSettings] = useState<GlobalSettings>({
+    closeModalOnOutsideClick: true,
+  });
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [shortcuts, setShortcuts] = useState<{ [key: string]: string }>({});
+
+  // 加载设置
+  useEffect(() => {
+    const loadSettings = async () => {
+      try {
+        setIsLoading(true);
+        const globalSettings = await getGlobalSettings();
+        setSettings(globalSettings);
+        
+        // 获取快捷键设置
+        try {
+          const commands = await browser.commands.getAll();
+          const shortcutMap: { [key: string]: string } = {};
+          commands.forEach(command => {
+            if (command.name && command.shortcut) {
+              shortcutMap[command.name] = command.shortcut;
+            }
+          });
+          setShortcuts(shortcutMap);
+        } catch (error) {
+          console.warn('Unable to get shortcuts:', error);
+        }
+      } catch (error) {
+        console.error('Failed to load settings:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadSettings();
+  }, []);
+
+  // 更新设置
+  const handleSettingChange = async (key: keyof GlobalSettings, value: any) => {
+    try {
+      setIsSaving(true);
+      const newSettings = { ...settings, [key]: value };
+      setSettings(newSettings);
+      await updateGlobalSettings({ [key]: value });
+    } catch (error) {
+      console.error('Failed to update setting:', error);
+      // 恢复原设置
+      setSettings(prev => ({ ...prev, [key]: settings[key] }));
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // 打开浏览器快捷键设置页
+  const openShortcutSettings = () => {
+    const isChrome = navigator.userAgent.includes('Chrome');
+    const isFirefox = navigator.userAgent.includes('Firefox');
+    
+    if (isChrome) {
+      browser.tabs.create({ url: 'chrome://extensions/shortcuts' });
+    } else if (isFirefox) {
+      browser.tabs.create({ url: 'about:addons' });
+    } else {
+      // 其他浏览器的通用方法
+      alert(t('pleaseManuallyNavigateToShortcuts'));
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+        <div className="flex justify-center items-center min-h-screen">
+          <div className="text-center space-y-4">
+            <div className="relative">
+              <div className="w-16 h-16 mx-auto">
+                <div className="absolute inset-0 border-4 border-blue-200 dark:border-blue-800 rounded-full"></div>
+                <div className="absolute inset-0 border-4 border-blue-600 dark:border-blue-400 rounded-full border-t-transparent animate-spin"></div>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold text-gray-700 dark:text-gray-300">{t('loading')}</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">{t('loadingGlobalSettings')}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* 页面头部 */}
+        <div className="mb-10">
+          <div className="flex items-center space-x-3 mb-4">
+            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
+              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+            </div>
+            <h1 className="text-4xl font-bold bg-gradient-to-r from-gray-900 via-blue-900 to-indigo-900 dark:from-gray-100 dark:via-blue-100 dark:to-indigo-100 bg-clip-text text-transparent">
+              {t('globalSettings')}
+            </h1>
+          </div>
+          <p className="text-lg text-gray-600 dark:text-gray-300 max-w-3xl">
+            {t('globalSettingsDescription')}
+          </p>
+        </div>
+
+        <div className="space-y-6">
+          {/* 弹窗行为设置 */}
+          <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border border-white/20 dark:border-gray-700/50 shadow-xl rounded-2xl p-8">
+            <div className="flex items-center space-x-3 mb-6">
+              <div className="w-8 h-8 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
+                <svg className="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
+                </svg>
+              </div>
+              <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">{t('modalBehavior')}</h2>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="flex-1">
+                  <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    {t('closeModalOnOutsideClick')}
+                  </h3>
+                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                    {t('closeModalOnOutsideClickDescription')}
+                  </p>
+                </div>
+                <label className="relative inline-flex items-center cursor-pointer ml-4">
+                  <input 
+                    type="checkbox" 
+                    checked={settings.closeModalOnOutsideClick} 
+                    onChange={(e) => handleSettingChange('closeModalOnOutsideClick', e.target.checked)}
+                    disabled={isSaving}
+                    className="sr-only peer"
+                  />
+                  <div className="relative w-11 h-6 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-1/2 after:right-1/2 after:-translate-y-1/2 after:bg-white after:border-gray-300 dark:after:border-gray-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600 disabled:opacity-50"></div>
+                </label>
+              </div>
+            </div>
+          </div>
+
+          {/* 快捷键设置 */}
+          <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border border-white/20 dark:border-gray-700/50 shadow-xl rounded-2xl p-8">
+            <div className="flex items-center space-x-3 mb-6">
+              <div className="w-8 h-8 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
+                <svg className="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                </svg>
+              </div>
+              <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">{t('keyboardShortcuts')}</h2>
+            </div>
+
+            <div className="space-y-4">
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                {t('shortcutsDescription')}
+              </p>
+
+              {/* 显示当前快捷键 */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                  <div>
+                    <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      {t('openPromptSelector')}
+                    </h4>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                      {t('openPromptSelectorDescription')}
+                    </p>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    {shortcuts['open-prompt-selector'] ? (
+                      <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600">
+                        {shortcuts['open-prompt-selector']}
+                      </kbd>
+                    ) : (
+                      <span className="text-xs text-gray-400 dark:text-gray-500">
+                        {t('notSet')}
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                  <div>
+                    <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      {t('openOptionsPage')}
+                    </h4>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                      {t('openOptionsPageDescription')}
+                    </p>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    {shortcuts['open-options'] ? (
+                      <kbd className="px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600">
+                        {shortcuts['open-options']}
+                      </kbd>
+                    ) : (
+                      <span className="text-xs text-gray-400 dark:text-gray-500">
+                        {t('notSet')}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* 设置快捷键按钮 */}
+              <div className="flex justify-center pt-4">
+                <button
+                  onClick={openShortcutSettings}
+                  className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white text-sm font-medium rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 shadow-green-500/25"
+                >
+                  <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                  {t('manageShortcuts')}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* 帮助信息 */}
+          <div className="bg-blue-50/80 dark:bg-blue-900/30 backdrop-blur-sm border border-blue-200/50 dark:border-blue-800/50 rounded-2xl p-6">
+            <div className="flex items-start space-x-3">
+              <div className="flex-shrink-0">
+                <svg className="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div>
+                <h3 className="text-sm font-medium text-blue-900 dark:text-blue-200 mb-1">
+                  {t('helpAndTips')}
+                </h3>
+                <div className="text-sm text-blue-800 dark:text-blue-300 space-y-2">
+                  <p>{t('globalSettingsHelpText1')}</p>
+                  <p>{t('globalSettingsHelpText2')}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GlobalSettingsPage;