✨ feat: 添加提示词置顶功能 (#39)

* ✨ feat: 添加提示词置顶功能

* ✨ feat: 更新提示词的国际化支持，添加置顶和取消置顶的翻译

Author: wenyuanw

entrypoints/content/components/PromptSelector.tsx

@@ -83,6 +83,16 @@ const PromptSelector: React.FC<PromptSelectorProps> = ({
     }
 
     return true;
+  }).sort((a, b) => {
+    // 按置顶状态和最后修改时间排序：置顶的在前面，同级别内按最后修改时间降序
+    // 首先按置顶状态排序，置顶的在前面
+    if (a.pinned && !b.pinned) return -1;
+    if (!a.pinned && b.pinned) return 1;
+    
+    // 如果置顶状态相同，按最后修改时间降序排序（新的在前面）
+    const aTime = a.lastModified ? new Date(a.lastModified).getTime() : 0;
+    const bTime = b.lastModified ? new Date(b.lastModified).getTime() : 0;
+    return bTime - aTime;
   });
 
   // 当组件挂载时聚焦搜索框

entrypoints/options/components/PromptList.tsx

@@ -10,6 +10,7 @@ interface PromptListProps {
   searchTerm: string
   allPromptsCount: number
   onToggleEnabled?: (id: string, enabled: boolean) => void
+  onTogglePinned?: (id: string, pinned: boolean) => void
   selectedCategoryId?: string | null
 }
 
@@ -20,6 +21,7 @@ const PromptList = ({
   searchTerm,
   allPromptsCount,
   onToggleEnabled,
+  onTogglePinned,
   selectedCategoryId,
 }: PromptListProps) => {
   const [categories, setCategories] = useState<Category[]>([])
@@ -165,9 +167,21 @@ const PromptList = ({
             className='bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 flex flex-col'
           >
             {/* Card Header */}
-            <div className='px-5 py-4 border-b border-gray-100 dark:border-gray-700 bg-gradient-to-r from-gray-50 to-white dark:from-gray-800 dark:to-gray-700'>
+            <div className={`px-5 py-4 border-b border-gray-100 dark:border-gray-700 ${
+              prompt.pinned 
+                ? 'bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20' 
+                : 'bg-gradient-to-r from-gray-50 to-white dark:from-gray-800 dark:to-gray-700'
+            }`}>
               <div className='flex items-center justify-between'>
-                <h3 className='text-lg font-semibold text-gray-800 dark:text-gray-200 truncate flex-1'>{prompt.title}</h3>
+                <div className='flex items-center flex-1 min-w-0'>
+                  {/* 置顶图标 */}
+                  {prompt.pinned && (
+                    <svg className='w-4 h-4 text-amber-600 dark:text-amber-400 mr-2 flex-shrink-0' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M5 15l7-7 7 7'/>
+                    </svg>
+                  )}
+                  <h3 className='text-lg font-semibold text-gray-800 dark:text-gray-200 truncate'>{prompt.title}</h3>
+                </div>
                 {/* 分类标识 */}
                 {category && (
                   <div className='ml-2 flex items-center'>
@@ -254,6 +268,34 @@ const PromptList = ({
 
             {/* Card Footer / Actions */}
             <div className='px-5 py-3 bg-gray-50 dark:bg-gray-700 border-t border-gray-100 dark:border-gray-600 flex justify-end space-x-2'>
+              {/* 置顶按钮 */}
+              {onTogglePinned && (
+                <button
+                  onClick={() => onTogglePinned(prompt.id, !prompt.pinned)}
+                  className={`px-3 py-1.5 text-sm rounded-md border transition-colors duration-200 ${
+                    prompt.pinned
+                      ? 'bg-amber-100 dark:bg-amber-900/50 border-amber-300 dark:border-amber-600 text-amber-700 dark:text-amber-400 hover:bg-amber-200 dark:hover:bg-amber-900/70'
+                      : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700'
+                  } focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-amber-500`}
+                  title={prompt.pinned ? t('unpinPrompt') : t('pinPrompt')}
+                >
+                  <span className='flex items-center'>
+                    {prompt.pinned ? (
+                      // 已置顶状态：显示向下箭头，表示可以取消置顶
+                      <svg className='w-4 h-4 mr-1.5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M19 9l-7 7-7-7'/>
+                      </svg>
+                    ) : (
+                      // 未置顶状态：显示向上箭头，表示可以置顶
+                      <svg className='w-4 h-4 mr-1.5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M5 15l7-7 7 7'/>
+                      </svg>
+                    )}
+                    {prompt.pinned ? t('unpin') : t('pin')}
+                  </span>
+                </button>
+              )}
+              
               <button
                 onClick={() => handleCopy(prompt.content, prompt.id)}
                 className={`px-3 py-1.5 text-sm rounded-md border transition-colors duration-200 ${

entrypoints/options/components/PromptManager.tsx

@@ -102,6 +102,18 @@ const PromptManager = () => {
       });
     }
 
+    // 按置顶状态和最后修改时间排序：置顶的在前面，同级别内按最后修改时间降序
+    filtered.sort((a, b) => {
+      // 首先按置顶状态排序，置顶的在前面
+      if (a.pinned && !b.pinned) return -1;
+      if (!a.pinned && b.pinned) return 1;
+      
+      // 如果置顶状态相同，按最后修改时间降序排序（新的在前面）
+      const aTime = a.lastModified ? new Date(a.lastModified).getTime() : 0;
+      const bTime = b.lastModified ? new Date(b.lastModified).getTime() : 0;
+      return bTime - aTime;
+    });
+
     setFilteredPrompts(filtered);
   }, [searchTerm, prompts, selectedCategoryId]);
 
@@ -219,6 +231,14 @@ const PromptManager = () => {
     await savePrompts(newPrompts);
   };
 
+  // 添加切换置顶状态的函数
+  const togglePromptPinned = async (id: string, pinned: boolean) => {
+    const newPrompts = prompts.map((p) =>
+      p.id === id ? { ...p, pinned } : p
+    );
+    await savePrompts(newPrompts);
+  };
+
   // 导出提示词
   const exportPrompts = () => {
     if (prompts.length === 0) {
@@ -712,6 +732,7 @@ const PromptManager = () => {
           searchTerm={searchTerm}
           allPromptsCount={prompts.length}
           onToggleEnabled={togglePromptEnabled}
+          onTogglePinned={togglePromptPinned}
           selectedCategoryId={selectedCategoryId}
         />
 

public/_locales/en/messages.json

@@ -1317,5 +1317,17 @@
   },
   "importCategoriesInstructionsDetail": {
     "message": "Enter the URL link containing valid category JSON data, and the system will automatically fetch and import the data."
+  },
+  "pin": {
+    "message": "Pin"
+  },
+  "unpin": {
+    "message": "Unpin"
+  },
+  "pinPrompt": {
+    "message": "Pin prompt"
+  },
+  "unpinPrompt": {
+    "message": "Unpin prompt"
   }
 }

public/_locales/zh/messages.json

@@ -1317,5 +1317,17 @@
   },
   "importCategoriesInstructionsDetail": {
     "message": "输入包含有效分类 JSON 数据的 URL 链接，系统将自动获取并导入数据。"
+  },
+  "pin": {
+    "message": "置顶"
+  },
+  "unpin": {
+    "message": "取消置顶"
+  },
+  "pinPrompt": {
+    "message": "置顶提示词"
+  },
+  "unpinPrompt": {
+    "message": "取消置顶提示词"
   }
 }

utils/types.ts

@@ -21,6 +21,7 @@ export interface PromptItem {
   tags: string[];
   enabled: boolean;
   categoryId: string;
+  pinned?: boolean; // 置顶字段
   notionPageId?: string;
   notes?: string; // 备注字段
   lastModified?: string; // 最后修改时间（ISO 字符串）