✨ feat: 在提示词选择器中添加复制功能

Author: wenyuanw

entrypoints/content/components/PromptSelector.tsx

@@ -4,7 +4,7 @@ import type { PromptItemWithVariables, EditableElement, Category } from "@/utils
 import { getPromptSelectorStyles } from "../utils/styles";
 import { extractVariables } from "../utils/variableParser";
 import { showVariableInput } from "./VariableInput";
-import { isDarkMode } from "@/utils/tools";
+import { isDarkMode, getCopyShortcutText } from "@/utils/tools";
 import { getCategories } from "@/utils/categoryUtils";
 import { getGlobalSetting } from "@/utils/globalSettings";
 import { t } from "@/utils/i18n";
@@ -28,6 +28,7 @@ const PromptSelector: React.FC<PromptSelectorProps> = ({
   const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);
   const [categoriesMap, setCategoriesMap] = useState<Record<string, Category>>({});
   const [closeOnOutsideClick, setCloseOnOutsideClick] = useState(true);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
@@ -149,6 +150,20 @@ const PromptSelector: React.FC<PromptSelectorProps> = ({
     setSelectedCategoryId(allOptions[nextIndex]);
   };
 
+  // 复制提示词内容
+  const copyPrompt = async (e: React.MouseEvent, prompt: PromptItemWithVariables) => {
+    e.stopPropagation(); // 阻止事件冒泡，避免触发选择提示词
+    try {
+      await navigator.clipboard.writeText(prompt.content);
+      setCopiedId(prompt.id);
+      setTimeout(() => {
+        setCopiedId(null);
+      }, 2000); // 2秒后清除复制状态
+    } catch (err) {
+      console.error(t('copyFailed'), err);
+    }
+  };
+
   // 键盘导航
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -181,6 +196,18 @@ const PromptSelector: React.FC<PromptSelectorProps> = ({
           // Tab键循环切换分类
           cycleCategorySelection(e.shiftKey ? 'prev' : 'next');
           break;
+        case "c":
+          // Ctrl+C (Windows) 或 Command+C (Mac) 复制当前选中的提示词
+          if ((e.ctrlKey || e.metaKey) && filteredPrompts[selectedIndex]) {
+            e.preventDefault();
+            navigator.clipboard.writeText(filteredPrompts[selectedIndex].content)
+              .then(() => {
+                setCopiedId(filteredPrompts[selectedIndex].id);
+                setTimeout(() => setCopiedId(null), 2000);
+              })
+              .catch(err => console.error(t('copyFailed'), err));
+          }
+          break;
       }
     };
 
@@ -482,7 +509,25 @@ const PromptSelector: React.FC<PromptSelectorProps> = ({
                     onClick={() => applyPrompt(prompt)}
                     onMouseEnter={() => !isKeyboardNav && setSelectedIndex(index)}
                   >
-                    <div className="qp-prompt-title">{prompt.title}</div>
+                    <div className="qp-flex qp-justify-between qp-items-center">
+                      <div className="qp-prompt-title">{prompt.title}</div>
+                      <button
+                        className={`qp-copy-button ${copiedId === prompt.id ? 'qp-copied' : ''}`}
+                        onClick={(e) => copyPrompt(e, prompt)}
+                        title={t('copyPrompt')}
+                      >
+                        {copiedId === prompt.id ? (
+                          <svg className="qp-copy-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M20 6L9 17L4 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                          </svg>
+                        ) : (
+                          <svg className="qp-copy-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M8 4v12a2 2 0 002 2h8a2 2 0 002-2V7.242a2 2 0 00-.602-1.43L16.083 2.57A2 2 0 0014.685 2H10a2 2 0 00-2 2z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                            <path d="M16 2v3a2 2 0 002 2h3M4 8v12a2 2 0 002 2h8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                          </svg>
+                        )}
+                      </button>
+                    </div>
                     <div className="qp-prompt-preview">{prompt.content}</div>
                     <div className="qp-prompt-meta">
                       {category && (
@@ -543,7 +588,7 @@ const PromptSelector: React.FC<PromptSelectorProps> = ({
 
         <div className="qp-modal-footer">
           <span>{t('totalPrompts2', [filteredPrompts.length.toString()])}</span>
-          <span>{t('navigationHelp')}</span>
+          <span>{t('pressCtrlCToCopy', [getCopyShortcutText()])} • {t('navigationHelp')}</span>
         </div>
       </div>
     </div>

entrypoints/content/utils/styles.ts

@@ -19,18 +19,20 @@ export function getPromptSelectorStyles(): string {
       --qp-bg-secondary: #f9fafb;
       --qp-bg-hover: #f8f5ff;
       --qp-bg-selected: #f3ecff;
-      --qp-bg-tag: #eee8ff;
+      --qp-bg-tag: #f3f4f6;
       --qp-text-primary: #111827;
-      --qp-text-secondary: #6b7280;
-      --qp-text-tag: #5b46a8;
+      --qp-text-secondary: #4b5563;
+      --qp-text-tag: #6b7280;
       --qp-border-color: #e5e7eb;
       --qp-focus-ring: #9d85f2;
       --qp-shadow-color: rgba(124, 58, 237, 0.06);
       --qp-green: #10b981;
-      --qp-accent: #8674e2;
+      --qp-accent: #6366f1;
       --qp-accent-light: #a495eb;
       --qp-gradient-start: #9f87f0;
       --qp-gradient-end: #8674e2;
+      --qp-accent-hover: #4f46e5;
+      --qp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     }
 
     /* 暗黑模式变量 */
@@ -40,18 +42,19 @@ export function getPromptSelectorStyles(): string {
       --qp-bg-secondary: #111827;
       --qp-bg-hover: #2c2967;
       --qp-bg-selected: #3b348c;
-      --qp-bg-tag: #2f2c6e;
+      --qp-bg-tag: #374151;
       --qp-text-primary: #f9fafb;
       --qp-text-secondary: #9ca3af;
-      --qp-text-tag: #c7bdfa;
+      --qp-text-tag: #d1d5db;
       --qp-border-color: #374151;
       --qp-focus-ring: #9d85f2;
       --qp-shadow-color: rgba(124, 58, 237, 0.12);
       --qp-green: #34d399;
-      --qp-accent: #9d85f2;
-      --qp-accent-light: #bbadf7;
+      --qp-accent: #6366f1;
+      --qp-accent-hover: #818cf8;
       --qp-gradient-start: #7e63e3;
       --qp-gradient-end: #6055c5;
+      --qp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.18);
     }
     
     /* 移植原来的样式 */
@@ -81,6 +84,10 @@ export function getPromptSelectorStyles(): string {
     .qp-justify-center {
       justify-content: center !important;
     }
+
+    .qp-justify-between {
+      justify-content: space-between !important;
+    }
     
     .qp-z-50 {
       z-index: 2147483647 !important;
@@ -576,5 +583,33 @@ export function getPromptSelectorStyles(): string {
       font-weight: 500 !important;
       white-space: nowrap !important;
     }
+
+    /* 复制按钮样式 */
+    .qp-copy-button {
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      padding: 6px !important;
+      border-radius: 6px !important;
+      background: transparent !important;
+      border: none !important;
+      cursor: pointer !important;
+      transition: all 0.2s ease !important;
+      color: var(--qp-text-secondary) !important;
+    }
+
+    .qp-copy-button:hover {
+      background: var(--qp-bg-tag) !important;
+      color: var(--qp-text-primary) !important;
+    }
+
+    .qp-copy-button.qp-copied {
+      color: #10B981 !important;
+    }
+
+    .qp-copy-icon {
+      width: 18px !important;
+      height: 18px !important;
+    }
   `;
 } 

public/_locales/en/messages.json

@@ -762,7 +762,7 @@
     }
   },
   "navigationHelp": {
-    "message": "↑↓ Navigate · Enter Select · Tab Switch Category"
+    "message": "↑↓ Navigate · Tab Switch Category · Enter Select"
   },
   "contentScriptLoaded": {
     "message": "Content script (WXT): Loaded"
@@ -1157,5 +1157,19 @@
   },
   "ctrlEnterToConfirm": {
     "message": "Ctrl+Enter to confirm"
+  },
+  "copyPrompt": {
+    "message": "Copy prompt"
+  },
+  "copyFailed": {
+    "message": "Failed to copy prompt"
+  },
+  "pressCtrlCToCopy": {
+    "message": "$shortcut$ to copy",
+    "placeholders": {
+      "shortcut": {
+        "content": "$1"
+      }
+    }
   }
 } 

public/_locales/zh/messages.json

@@ -765,7 +765,7 @@
     }
   },
   "navigationHelp": {
-    "message": "↑↓ 导航 · Enter 选择 · Tab 切换分类"
+    "message": "↑↓ 导航 · Tab 切换分类 · Enter 选择"
   },
   "contentScriptLoaded": {
     "message": "内容脚本 (WXT): 已加载"
@@ -1157,5 +1157,19 @@
   },
   "ctrlEnterToConfirm": {
     "message": "Ctrl+Enter 确认"
+  },
+  "copyPrompt": {
+    "message": "复制提示词"
+  },
+  "copyFailed": {
+    "message": "复制提示词失败"
+  },
+  "pressCtrlCToCopy": {
+    "message": "$shortcut$ 复制",
+    "placeholders": {
+      "shortcut": {
+        "content": "$1"
+      }
+    }
   }
 } 

utils/tools.ts

@@ -5,3 +5,33 @@ export const isDarkMode = () => {
     window.matchMedia("(prefers-color-scheme: dark)").matches
   );
 };
+
+// 检测操作系统类型
+export const getOS = () => {
+  const platform = navigator.platform.toLowerCase();
+  const userAgent = navigator.userAgent.toLowerCase();
+
+  if (platform.includes('mac') || userAgent.includes('mac')) {
+    return 'mac';
+  } else if (platform.includes('win') || userAgent.includes('win')) {
+    return 'windows';
+  } else if (platform.includes('linux') || userAgent.includes('linux')) {
+    return 'linux';
+  } else {
+    return 'unknown';
+  }
+};
+
+// 获取复制快捷键文本
+export const getCopyShortcutText = () => {
+  const os = getOS();
+  switch (os) {
+    case 'mac':
+      return '⌘+C';
+    case 'windows':
+    case 'linux':
+      return 'Ctrl+C';
+    default:
+      return 'Ctrl+C';
+  }
+};