PromPub - 发现和管理 AI 提示词

35 |

42 | {/* 进度条 */} 43 |

44 |

50 |

51 | 52 |

53 | {type === "success" ? ( 54 | 59 | ) : ( 60 | 61 | )} 62 |

63 | 64 |

65 | {message} 66 |

67 | 68 | 74 |

75 |

76 | ); 77 | } 78 | -------------------------------------------------------------------------------- /src/components/MyPromptItemSkeleton.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * 我的提示词列表项骨架屏组件 3 | */ 4 | export function MyPromptItemSkeleton() { 5 | return ( 6 |

7 |

8 | {/* Left: Thumbnail Skeleton */} 9 |

10 |

11 |

12 | 13 | {/* Middle: Content Skeleton */} 14 |

15 | {/* Title and Visibility */} 16 |

17 |

18 | {/* Title skeleton */} 19 |

20 | {/* Visibility badge skeleton */} 21 |

22 |

23 | {/* Tags skeleton */} 24 |

25 |

26 |

27 |

28 |

29 | 30 | {/* Actions skeleton */} 31 |

32 |

33 |

34 |

35 |

36 |

37 | 38 | {/* Right: Stats Skeleton */} 39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

47 |

48 |

49 |

50 |

51 |

52 |

53 |

54 |

55 |

56 |

57 | ); 58 | } 59 | 60 | /** 61 | * 我的提示词列表骨架屏 62 | * @param count 骨架屏数量，默认5个 63 | */ 64 | export function MyPromptsListSkeleton({ count = 5 }: { count?: number }) { 65 | return ( 66 |

67 | {Array.from({ length: count }).map((_, index) => ( 68 | 69 | ))} 70 |

71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /src/components/EditorHeader.tsx: -------------------------------------------------------------------------------- 1 | import { useNavigate } from "react-router-dom"; 2 | import { Github } from "lucide-react"; 3 | 4 | export function EditorHeader() { 5 | const navigate = useNavigate(); 6 | 7 | const handleNewPrompt = () => { 8 | navigate("/prompt-editor"); 9 | }; 10 | 11 | const handleGoToRepository = () => { 12 | navigate("/my-prompts"); 13 | }; 14 | 15 | const handleLogoClick = () => { 16 | navigate("/my-prompts"); 17 | }; 18 | 19 | return ( 20 |

21 |

22 |

26 |

30 | PromPub 31 |

32 |

33 |

34 | 35 | 创作中心 36 | 37 | 43 | 64 | 65 | {/* 右侧导航链接 */} 66 |

67 | 73 | Prompub Demo 74 | 75 | 82 | 83 | 84 |

85 |

86 |

87 | ); 88 | } 89 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/utils/encryption.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 前端加密/解密工具 3 | * 使用 AES-GCM 加密算法 4 | */ 5 | 6 | // 固定的应用级盐值 7 | const APP_SALT = "flowgpt-encryption-salt-v1"; 8 | 9 | // 获取或生成设备专用密钥 10 | async function getDeviceKey(): Promise { 11 | const DEVICE_KEY_STORAGE = "flowgpt_device_key"; 12 | 13 | // 尝试从 localStorage 获取现有密钥 14 | let deviceKey = localStorage.getItem(DEVICE_KEY_STORAGE); 15 | 16 | if (!deviceKey) { 17 | // 如果不存在，生成一个新的随机密钥 18 | const randomBytes = window.crypto.getRandomValues(new Uint8Array(32)); 19 | deviceKey = Array.from(randomBytes) 20 | .map((b) => b.toString(16).padStart(2, "0")) 21 | .join(""); 22 | 23 | // 保存到 localStorage 24 | localStorage.setItem(DEVICE_KEY_STORAGE, deviceKey); 25 | } 26 | 27 | return deviceKey; 28 | } 29 | 30 | // 生成或获取加密密钥 31 | async function getEncryptionKey(): Promise { 32 | // 使用设备专用密钥 + 应用盐值 33 | const deviceKey = await getDeviceKey(); 34 | const keyMaterial = await window.crypto.subtle.importKey( 35 | "raw", 36 | new TextEncoder().encode(`${deviceKey}-${APP_SALT}`), 37 | { name: "PBKDF2" }, 38 | false, 39 | ["deriveBits", "deriveKey"], 40 | ); 41 | 42 | // 派生真正的加密密钥 43 | return window.crypto.subtle.deriveKey( 44 | { 45 | name: "PBKDF2", 46 | salt: new TextEncoder().encode(APP_SALT), 47 | iterations: 100000, 48 | hash: "SHA-256", 49 | }, 50 | keyMaterial, 51 | { name: "AES-GCM", length: 256 }, 52 | false, 53 | ["encrypt", "decrypt"], 54 | ); 55 | } 56 | 57 | /** 58 | * 加密字符串 59 | */ 60 | export async function encryptString(text: string): Promise { 61 | try { 62 | const key = await getEncryptionKey(); 63 | const iv = window.crypto.getRandomValues(new Uint8Array(12)); 64 | const encodedText = new TextEncoder().encode(text); 65 | 66 | const encryptedData = await window.crypto.subtle.encrypt( 67 | { 68 | name: "AES-GCM", 69 | iv: iv, 70 | }, 71 | key, 72 | encodedText, 73 | ); 74 | 75 | // 组合 IV 和加密数据 76 | const combined = new Uint8Array(iv.length + encryptedData.byteLength); 77 | combined.set(iv, 0); 78 | combined.set(new Uint8Array(encryptedData), iv.length); 79 | 80 | // 转换为 Base64 81 | return btoa(String.fromCharCode(...combined)); 82 | } catch (error) { 83 | console.error("加密失败:", error); 84 | throw new Error("加密失败"); 85 | } 86 | } 87 | 88 | /** 89 | * 解密字符串 90 | */ 91 | export async function decryptString(encryptedText: string): Promise { 92 | try { 93 | const key = await getEncryptionKey(); 94 | 95 | // 从 Base64 解码 96 | const combined = Uint8Array.from(atob(encryptedText), (c) => 97 | c.charCodeAt(0), 98 | ); 99 | 100 | // 分离 IV 和加密数据 101 | const iv = combined.slice(0, 12); 102 | const encryptedData = combined.slice(12); 103 | 104 | const decryptedData = await window.crypto.subtle.decrypt( 105 | { 106 | name: "AES-GCM", 107 | iv: iv, 108 | }, 109 | key, 110 | encryptedData, 111 | ); 112 | 113 | return new TextDecoder().decode(decryptedData); 114 | } catch (error) { 115 | console.error("解密失败:", error); 116 | throw new Error("解密失败"); 117 | } 118 | } 119 | 120 | /** 121 | * 保存加密的配置到 localStorage 122 | */ 123 | export async function saveEncryptedConfig( 124 | key: string, 125 | value: string, 126 | ): Promise { 127 | const encrypted = await encryptString(value); 128 | localStorage.setItem(key, encrypted); 129 | } 130 | 131 | /** 132 | * 从 localStorage 读取并解密配置 133 | */ 134 | export async function getEncryptedConfig(key: string): Promise { 135 | const encrypted = localStorage.getItem(key); 136 | if (!encrypted) return null; 137 | 138 | try { 139 | return await decryptString(encrypted); 140 | } catch (error) { 141 | console.error(`解密配置 ${key} 失败:`, error); 142 | return null; 143 | } 144 | } 145 | 146 | /** 147 | * 删除加密的配置 148 | */ 149 | export function removeEncryptedConfig(key: string): void { 150 | localStorage.removeItem(key); 151 | } 152 | -------------------------------------------------------------------------------- /src/components/ConfirmDialog.tsx: -------------------------------------------------------------------------------- 1 | import { X } from "lucide-react"; 2 | 3 | interface ConfirmDialogProps { 4 | isOpen: boolean; 5 | onClose: () => void; 6 | onConfirm: () => void; 7 | title?: string; 8 | message?: string; 9 | confirmText?: string; 10 | cancelText?: string; 11 | type?: "warning" | "delete" | "publish"; 12 | } 13 | 14 | export function ConfirmDialog({ 15 | isOpen, 16 | onClose, 17 | onConfirm, 18 | title = "Are you sure?", 19 | message = "You can update the prompt anytime, but careful, we have a auto-save feature that will overwrite your changes.", 20 | confirmText = "Edit", 21 | cancelText = "Exit", 22 | type = "warning", 23 | }: ConfirmDialogProps) { 24 | if (!isOpen) return null; 25 | 26 | const getIconConfig = () => { 27 | switch (type) { 28 | case "delete": 29 | return { 30 | bgColor: "#ef4444", 31 | icon: ( 32 | 35 | ), 36 | emoji: "🗑️", 37 | }; 38 | case "publish": 39 | return { 40 | bgColor: "#3fda8c", 41 | icon: ( 42 | 45 | ), 46 | emoji: "🚀", 47 | }; 48 | default: // warning 49 | return { 50 | bgColor: "#ffd700", 51 | icon: ( 52 | 58 | ), 59 | emoji: "😟", 60 | }; 61 | } 62 | }; 63 | 64 | const iconConfig = getIconConfig(); 65 | 66 | return ( 67 |

68 | {/* Backdrop */} 69 |

73 | 74 | {/* Dialog */} 75 |

76 | {/* Close Button */} 77 | 83 | 84 | {/* Content */} 85 |

86 | {/* Title */} 87 |

88 | {title} 89 |

90 | 91 | {/* Icon and Message */} 92 |

93 | {/* Icon with Card */} 94 |

95 | {/* Card */} 96 |

97 | {/* Lines on card */} 98 |

99 |

100 |

101 |

102 |

103 |

104 | 105 | {/* Icon Circle */} 106 |

110 |

111 | {iconConfig.icon} 112 |

113 |

114 | 115 | {/* Emoji */} 116 |

117 | {iconConfig.emoji} 118 |

119 |

120 | 121 | {/* Message */} 122 |

123 | {message} 124 |

125 |

126 | 127 | {/* Buttons */} 128 |

129 | 135 | 148 |

149 |

150 |

151 |

152 | ); 153 | } 154 | -------------------------------------------------------------------------------- /src/services/localStorage.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * LocalStorage 服务 - 管理 prompts 和 categories 3 | */ 4 | 5 | // ============= 类型定义 ============= 6 | 7 | export interface Category { 8 | id: number; 9 | name: string; 10 | slug: string; 11 | description: string; 12 | } 13 | 14 | export interface AIModel { 15 | id: number; 16 | slug: string; 17 | name: string; 18 | provider: string; 19 | } 20 | 21 | export interface Prompt { 22 | id: number; 23 | title: string; 24 | description: string; 25 | content: string; 26 | image?: string; // 图片 URL 或 base64 27 | categoryId?: number; 28 | aiModelSlug?: string; 29 | status: "draft" | "published"; 30 | visibility: "public" | "private"; 31 | statistics: { 32 | views: number; 33 | uses: number; 34 | favorites: number; 35 | }; 36 | createdAt: string; 37 | updatedAt: string; 38 | } 39 | 40 | // ============= 存储键 ============= 41 | 42 | const STORAGE_KEYS = { 43 | PROMPTS: "prompts", 44 | CATEGORIES: "categories", 45 | AI_MODELS: "ai_models", 46 | NEXT_ID: "next_prompt_id", 47 | }; 48 | 49 | // ============= 默认数据（从环境变量读取） ============= 50 | 51 | // 从环境变量读取分类配置 52 | function loadCategoriesFromEnv(): Category[] { 53 | try { 54 | const envCategories = import.meta.env.VITE_CATEGORIES; 55 | if (envCategories) { 56 | return JSON.parse(envCategories); 57 | } 58 | } catch (error) { 59 | console.error("Failed to parse VITE_CATEGORIES:", error); 60 | } 61 | 62 | // 默认分类（如果环境变量未设置） 63 | return [ 64 | { id: 1, name: "写作", slug: "writing", description: "写作相关提示词" }, 65 | { id: 2, name: "编程", slug: "coding", description: "编程相关提示词" }, 66 | { id: 3, name: "创意", slug: "creative", description: "创意相关提示词" }, 67 | { id: 4, name: "商务", slug: "business", description: "商务相关提示词" }, 68 | { id: 5, name: "教育", slug: "education", description: "教育相关提示词" }, 69 | { id: 6, name: "其他", slug: "other", description: "其他提示词" }, 70 | ]; 71 | } 72 | 73 | // 从环境变量读取 AI 模型配置 74 | function loadAIModelsFromEnv(): AIModel[] { 75 | try { 76 | const envModels = import.meta.env.VITE_AI_MODELS; 77 | if (envModels) { 78 | return JSON.parse(envModels); 79 | } 80 | } catch (error) { 81 | console.error("Failed to parse VITE_AI_MODELS:", error); 82 | } 83 | 84 | // 默认模型（如果环境变量未设置） 85 | return [ 86 | { id: 1, slug: "gpt-4", name: "GPT-4", provider: "OpenAI" }, 87 | { id: 2, slug: "gpt-3.5-turbo", name: "GPT-3.5 Turbo", provider: "OpenAI" }, 88 | { id: 3, slug: "claude-3-opus", name: "Claude 3 Opus", provider: "Anthropic" }, 89 | { id: 4, slug: "claude-3-sonnet", name: "Claude 3 Sonnet", provider: "Anthropic" }, 90 | { id: 5, slug: "gemini-pro", name: "Gemini Pro", provider: "Google" }, 91 | ]; 92 | } 93 | 94 | const DEFAULT_CATEGORIES = loadCategoriesFromEnv(); 95 | const DEFAULT_AI_MODELS = loadAIModelsFromEnv(); 96 | 97 | // ============= 初始化 ============= 98 | 99 | function initializeStorage() { 100 | // 始终从环境变量更新分类和 AI 模型配置 101 | localStorage.setItem( 102 | STORAGE_KEYS.CATEGORIES, 103 | JSON.stringify(DEFAULT_CATEGORIES) 104 | ); 105 | 106 | localStorage.setItem( 107 | STORAGE_KEYS.AI_MODELS, 108 | JSON.stringify(DEFAULT_AI_MODELS) 109 | ); 110 | 111 | // 初始化提示词列表（只在第一次时创建） 112 | if (!localStorage.getItem(STORAGE_KEYS.PROMPTS)) { 113 | localStorage.setItem(STORAGE_KEYS.PROMPTS, JSON.stringify([])); 114 | } 115 | 116 | // 初始化 ID 计数器（只在第一次时创建） 117 | if (!localStorage.getItem(STORAGE_KEYS.NEXT_ID)) { 118 | localStorage.setItem(STORAGE_KEYS.NEXT_ID, "1"); 119 | } 120 | } 121 | 122 | // 自动初始化 123 | initializeStorage(); 124 | 125 | // ============= 辅助函数 ============= 126 | 127 | function getNextId(): number { 128 | const nextId = parseInt(localStorage.getItem(STORAGE_KEYS.NEXT_ID) || "1"); 129 | localStorage.setItem(STORAGE_KEYS.NEXT_ID, (nextId + 1).toString()); 130 | return nextId; 131 | } 132 | 133 | // ============= Prompts 操作 ============= 134 | 135 | export function getAllPrompts(): Prompt[] { 136 | try { 137 | const data = localStorage.getItem(STORAGE_KEYS.PROMPTS); 138 | return data ? JSON.parse(data) : []; 139 | } catch (error) { 140 | console.error("读取提示词失败:", error); 141 | return []; 142 | } 143 | } 144 | 145 | export function getPromptById(id: number): Prompt | null { 146 | const prompts = getAllPrompts(); 147 | return prompts.find((p) => p.id === id) || null; 148 | } 149 | 150 | export function savePrompt(prompt: Omit & { id?: number }): Prompt { 151 | const prompts = getAllPrompts(); 152 | const now = new Date().toISOString(); 153 | 154 | if (prompt.id) { 155 | // 更新现有提示词 156 | const index = prompts.findIndex((p) => p.id === prompt.id); 157 | if (index !== -1) { 158 | const updatedPrompt: Prompt = { 159 | ...prompts[index], 160 | ...prompt, 161 | id: prompt.id, 162 | updatedAt: now, 163 | }; 164 | prompts[index] = updatedPrompt; 165 | localStorage.setItem(STORAGE_KEYS.PROMPTS, JSON.stringify(prompts)); 166 | return updatedPrompt; 167 | } 168 | } 169 | 170 | // 创建新提示词 171 | const newPrompt: Prompt = { 172 | ...prompt, 173 | id: prompt.id || getNextId(), 174 | createdAt: now, 175 | updatedAt: now, 176 | statistics: prompt.statistics || { 177 | views: 0, 178 | uses: 0, 179 | favorites: 0, 180 | }, 181 | }; 182 | 183 | prompts.push(newPrompt); 184 | localStorage.setItem(STORAGE_KEYS.PROMPTS, JSON.stringify(prompts)); 185 | return newPrompt; 186 | } 187 | 188 | export function deletePrompt(id: number): boolean { 189 | const prompts = getAllPrompts(); 190 | const filteredPrompts = prompts.filter((p) => p.id !== id); 191 | 192 | if (filteredPrompts.length === prompts.length) { 193 | return false; // 未找到要删除的提示词 194 | } 195 | 196 | localStorage.setItem(STORAGE_KEYS.PROMPTS, JSON.stringify(filteredPrompts)); 197 | return true; 198 | } 199 | 200 | export function publishPrompt(id: number): Prompt | null { 201 | const prompts = getAllPrompts(); 202 | const index = prompts.findIndex((p) => p.id === id); 203 | 204 | if (index === -1) return null; 205 | 206 | prompts[index].status = "published"; 207 | prompts[index].visibility = "public"; 208 | prompts[index].updatedAt = new Date().toISOString(); 209 | 210 | localStorage.setItem(STORAGE_KEYS.PROMPTS, JSON.stringify(prompts)); 211 | return prompts[index]; 212 | } 213 | 214 | export function unpublishPrompt(id: number): Prompt | null { 215 | const prompts = getAllPrompts(); 216 | const index = prompts.findIndex((p) => p.id === id); 217 | 218 | if (index === -1) return null; 219 | 220 | prompts[index].status = "draft"; 221 | prompts[index].visibility = "private"; 222 | prompts[index].updatedAt = new Date().toISOString(); 223 | 224 | localStorage.setItem(STORAGE_KEYS.PROMPTS, JSON.stringify(prompts)); 225 | return prompts[index]; 226 | } 227 | 228 | // ============= 搜索和筛选 ============= 229 | 230 | export interface FilterOptions { 231 | status?: "all" | "draft" | "published"; 232 | search?: string; 233 | categorySlug?: string; 234 | aiModelSlug?: string; 235 | } 236 | 237 | export function filterPrompts(options: FilterOptions = {}): Prompt[] { 238 | let prompts = getAllPrompts(); 239 | 240 | // 状态筛选 241 | if (options.status && options.status !== "all") { 242 | prompts = prompts.filter((p) => p.status === options.status); 243 | } 244 | 245 | // 搜索 246 | if (options.search) { 247 | const searchLower = options.search.toLowerCase(); 248 | prompts = prompts.filter( 249 | (p) => 250 | p.title.toLowerCase().includes(searchLower) || 251 | p.description.toLowerCase().includes(searchLower) || 252 | p.content.toLowerCase().includes(searchLower) 253 | ); 254 | } 255 | 256 | // 分类筛选 257 | if (options.categorySlug) { 258 | const category = getCategoryBySlug(options.categorySlug); 259 | if (category) { 260 | prompts = prompts.filter((p) => p.categoryId === category.id); 261 | } 262 | } 263 | 264 | // AI 模型筛选 265 | if (options.aiModelSlug) { 266 | prompts = prompts.filter((p) => p.aiModelSlug === options.aiModelSlug); 267 | } 268 | 269 | // 按更新时间降序排序 270 | prompts.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()); 271 | 272 | return prompts; 273 | } 274 | 275 | // ============= Categories 操作 ============= 276 | 277 | export function getAllCategories(): Category[] { 278 | try { 279 | const data = localStorage.getItem(STORAGE_KEYS.CATEGORIES); 280 | return data ? JSON.parse(data) : DEFAULT_CATEGORIES; 281 | } catch (error) { 282 | console.error("读取分类失败:", error); 283 | return DEFAULT_CATEGORIES; 284 | } 285 | } 286 | 287 | export function getCategoryById(id: number): Category | null { 288 | const categories = getAllCategories(); 289 | return categories.find((c) => c.id === id) || null; 290 | } 291 | 292 | export function getCategoryBySlug(slug: string): Category | null { 293 | const categories = getAllCategories(); 294 | return categories.find((c) => c.slug === slug) || null; 295 | } 296 | 297 | // ============= AI Models 操作 ============= 298 | 299 | export function getAllAIModels(): AIModel[] { 300 | try { 301 | const data = localStorage.getItem(STORAGE_KEYS.AI_MODELS); 302 | return data ? JSON.parse(data) : DEFAULT_AI_MODELS; 303 | } catch (error) { 304 | console.error("读取 AI 模型失败:", error); 305 | return DEFAULT_AI_MODELS; 306 | } 307 | } 308 | 309 | export function getAIModelBySlug(slug: string): AIModel | null { 310 | const models = getAllAIModels(); 311 | return models.find((m) => m.slug === slug) || null; 312 | } 313 | 314 | // ============= 统计 ============= 315 | 316 | export function getPromptCounts() { 317 | const prompts = getAllPrompts(); 318 | return { 319 | all: prompts.length, 320 | published: prompts.filter((p) => p.status === "published").length, 321 | draft: prompts.filter((p) => p.status === "draft").length, 322 | }; 323 | } 324 | -------------------------------------------------------------------------------- /src/components/PromptEditor/APITab.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * APITab 组件 - API 配置标签页 3 | */ 4 | 5 | import { useState, useEffect } from "react"; 6 | import { Loader2 } from "lucide-react"; 7 | import { useToast } from "../../contexts/ToastContext"; 8 | import { 9 | getEncryptedConfig, 10 | saveEncryptedConfig, 11 | removeEncryptedConfig, 12 | } from "../../utils/encryption"; 13 | import type { PromptFormData } from "./types"; 14 | 15 | interface APITabProps { 16 | formData: PromptFormData; 17 | setFormData: React.Dispatch>; 18 | onApiConfigDeleted?: () => void; 19 | } 20 | 21 | export function APITab({ 22 | formData, 23 | setFormData, 24 | onApiConfigDeleted, 25 | }: APITabProps) { 26 | const { showToast } = useToast(); 27 | const [isTesting, setIsTesting] = useState(false); 28 | const [isSaving, setIsSaving] = useState(false); 29 | const [isDeleting, setIsDeleting] = useState(false); 30 | const [testResult, setTestResult] = useState<{ 31 | success: boolean; 32 | message: string; 33 | } | null>(null); 34 | 35 | // 页面加载时从加密存储读取配置 36 | useEffect(() => { 37 | const loadApiConfig = async () => { 38 | const apiUrl = (await getEncryptedConfig("encrypted_api_url")) || ""; 39 | const apiKey = (await getEncryptedConfig("encrypted_api_key")) || ""; 40 | 41 | if (apiUrl || apiKey) { 42 | setFormData((prev) => ({ 43 | ...prev, 44 | apiUrl, 45 | apiKey, 46 | })); 47 | } 48 | }; 49 | 50 | loadApiConfig(); 51 | }, [setFormData]); 52 | 53 | const handleSaveApiSettings = async () => { 54 | if (!formData.apiUrl.trim() && !formData.apiKey.trim()) { 55 | showToast("请至少填写 API 地址或密钥", "error"); 56 | return; 57 | } 58 | 59 | setIsSaving(true); 60 | try { 61 | // 移除尾部斜杠 62 | const cleanApiUrl = formData.apiUrl.trim() 63 | ? formData.apiUrl.trim().replace(/\/+$/, "") 64 | : ""; 65 | const cleanApiKey = formData.apiKey.trim(); 66 | 67 | // 加密保存到本地 localStorage 68 | if (cleanApiUrl) { 69 | await saveEncryptedConfig("encrypted_api_url", cleanApiUrl); 70 | // 同步更新表单数据 71 | setFormData((prev) => ({ ...prev, apiUrl: cleanApiUrl })); 72 | } 73 | 74 | if (cleanApiKey) { 75 | await saveEncryptedConfig("encrypted_api_key", cleanApiKey); 76 | } 77 | 78 | // 触发自定义事件通知其他组件刷新 79 | window.dispatchEvent(new CustomEvent("api-config-updated")); 80 | 81 | showToast("API 设置已加密保存到本地", "success"); 82 | } catch (error) { 83 | console.error("保存 API 设置错误:", error); 84 | showToast("保存失败", "error"); 85 | } finally { 86 | setIsSaving(false); 87 | } 88 | }; 89 | 90 | const handleDeleteApiSettings = async () => { 91 | setIsDeleting(true); 92 | try { 93 | // 删除加密存储的配置 94 | removeEncryptedConfig("encrypted_api_url"); 95 | removeEncryptedConfig("encrypted_api_key"); 96 | 97 | // 清空表单 98 | setFormData({ ...formData, apiUrl: "", apiKey: "" }); 99 | 100 | // 通知父组件 101 | onApiConfigDeleted?.(); 102 | 103 | // 触发自定义事件通知其他组件刷新和清理状态 104 | window.dispatchEvent(new CustomEvent("api-config-deleted")); 105 | window.dispatchEvent(new CustomEvent("api-config-updated")); 106 | 107 | showToast("API 设置已删除", "success"); 108 | } catch (error) { 109 | console.error("删除 API 设置错误:", error); 110 | showToast("删除失败", "error"); 111 | } finally { 112 | setIsDeleting(false); 113 | } 114 | }; 115 | 116 | const handleTestAPI = async () => { 117 | if (!formData.apiUrl.trim()) { 118 | showToast("请先填写 API 地址", "error"); 119 | return; 120 | } 121 | 122 | if (!formData.apiKey.trim()) { 123 | showToast("请先填写 API 密钥", "error"); 124 | return; 125 | } 126 | 127 | setIsTesting(true); 128 | setTestResult(null); 129 | 130 | try { 131 | // 移除尾部斜杠并拼接模型列表路径 132 | const apiBaseUrl = formData.apiUrl.trim().replace(/\/+$/, ""); 133 | const modelsApiUrl = `${apiBaseUrl}/v1/models`; 134 | 135 | const response = await fetch(modelsApiUrl, { 136 | method: "GET", 137 | headers: { 138 | Authorization: `Bearer ${formData.apiKey}`, 139 | }, 140 | }); 141 | 142 | if (response.ok) { 143 | const data = await response.json(); 144 | if (data.data && Array.isArray(data.data)) { 145 | const modelCount = data.data.length; 146 | setTestResult({ 147 | success: true, 148 | message: `API 连接成功！检测到 ${modelCount} 个可用模型`, 149 | }); 150 | showToast("API 连接成功！", "success"); 151 | 152 | // 测试成功后自动保存配置 153 | const cleanApiUrl = formData.apiUrl.trim(); 154 | const cleanApiKey = formData.apiKey.trim(); 155 | 156 | if (cleanApiUrl) { 157 | await saveEncryptedConfig("encrypted_api_url", cleanApiUrl); 158 | setFormData((prev) => ({ ...prev, apiUrl: cleanApiUrl })); 159 | } 160 | 161 | if (cleanApiKey) { 162 | await saveEncryptedConfig("encrypted_api_key", cleanApiKey); 163 | } 164 | 165 | // 触发自定义事件通知对话测试刷新模型列表 166 | window.dispatchEvent(new CustomEvent("api-config-updated")); 167 | } else { 168 | setTestResult({ 169 | success: false, 170 | message: "API 响应格式不正确", 171 | }); 172 | showToast("API 响应格式不正确", "error"); 173 | } 174 | } else { 175 | const errorText = await response.text(); 176 | let errorMessage = `连接失败: ${response.status} ${response.statusText}`; 177 | 178 | // 尝试解析错误信息 179 | try { 180 | const errorData = JSON.parse(errorText); 181 | if (errorData.error?.message) { 182 | errorMessage = `${errorMessage} - ${errorData.error.message}`; 183 | } 184 | } catch { 185 | // 忽略 JSON 解析错误 186 | } 187 | 188 | setTestResult({ 189 | success: false, 190 | message: errorMessage, 191 | }); 192 | showToast(`连接失败: ${response.status}`, "error"); 193 | console.error("API 测试失败:", errorText); 194 | } 195 | } catch (error) { 196 | console.error("API 测试错误:", error); 197 | setTestResult({ 198 | success: false, 199 | message: `连接错误: ${error instanceof Error ? error.message : "未知错误"}`, 200 | }); 201 | showToast("API 连接失败", "error"); 202 | } finally { 203 | setIsTesting(false); 204 | } 205 | }; 206 | 207 | return ( 208 |

209 |

API 配置

210 | 211 | {/* 安全说明 */} 212 |

213 |

214 |

215 | 228 |

229 |

230 |

231 | 本地加密存储 232 |

233 |

234 | 您的 API 密钥使用{" "} 235 | 236 | AES-256-GCM 加密算法 237 | 238 | 存储在浏览器本地，不会上传到我们的服务器。所有 API 239 | 请求直接从您的浏览器发送到目标服务，保护您的隐私安全。 240 |

241 |

242 |

243 |

244 | 245 |

246 |

247 | 配置自定义 API 端点以连接外部 OpenAI 兼容服务。 248 |

249 | 250 | {/* API URL */} 251 |

252 | 253 | API 基础地址 254 | 255 | 260 | setFormData({ ...formData, apiUrl: e.target.value }) 261 | } 262 | className="w-full bg-[#2C2A2F] border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#3fda8c] transition-colors" 263 | /> 264 |

265 | 只需输入基础域名，系统会自动拼接 /v1/chat/completions 266 |

267 |

268 | 269 | {/* API Key */} 270 |

271 | API 密钥 272 | 277 | setFormData({ ...formData, apiKey: e.target.value }) 278 | } 279 | className="w-full bg-[#2C2A2F] border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#3fda8c] transition-colors" 280 | /> 281 |

282 | 你的 API 密钥将被加密并安全存储 283 |

284 |

285 | 286 | {/* Test Result */} 287 | {testResult && ( 288 |

295 |

300 | {testResult.message} 301 |

302 |

303 | )} 304 | 305 | {/* Action Buttons */} 306 |

307 | 315 | 323 | {(formData.apiUrl || formData.apiKey) && ( 324 | 332 | )} 333 |

334 |

335 |

336 | ); 337 | } 338 | -------------------------------------------------------------------------------- /src/components/PromptEditor/DefinitionTab.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * DefinitionTab 组件 - 提示词定义标签页 3 | */ 4 | 5 | import { useState } from "react"; 6 | import { ChevronDown, Upload, Loader2, Send as SendIcon } from "lucide-react"; 7 | import type { PromptFormData } from "./types"; 8 | 9 | interface Metadata { 10 | categories: Array<{ 11 | id: number; 12 | name: string; 13 | slug: string; 14 | description: string; 15 | count: number; 16 | }>; 17 | ai_models: Array<{ 18 | id: number; 19 | slug: string; 20 | name: string; 21 | provider: string; 22 | description: string; 23 | supports_vision: boolean; 24 | context_length: number; 25 | }>; 26 | tags: string[]; 27 | visibility_options: Array<{ 28 | value: string; 29 | label: string; 30 | description: string; 31 | }>; 32 | } 33 | 34 | interface DefinitionTabProps { 35 | formData: PromptFormData; 36 | setFormData: React.Dispatch>; 37 | coverImage: { id?: number; url: string } | null; 38 | onImageSelect: () => void; 39 | isUploading: boolean; 40 | onSave?: () => void; 41 | onPublish?: () => void; 42 | isSaving: boolean; 43 | isPublishing: boolean; 44 | metadata: Metadata | null; 45 | selectedCategory: number | null; 46 | setSelectedCategory: (id: number | null) => void; 47 | selectedModel: { 48 | id: number; 49 | slug: string; 50 | name: string; 51 | provider: string; 52 | } | null; 53 | setSelectedModel: ( 54 | model: { id: number; slug: string; name: string; provider: string } | null, 55 | ) => void; 56 | promptStatus: "draft" | "publish" | "published" | "archived"; 57 | } 58 | 59 | export function DefinitionTab({ 60 | formData, 61 | setFormData, 62 | coverImage, 63 | onImageSelect, 64 | isUploading, 65 | onSave, 66 | onPublish, 67 | isSaving, 68 | isPublishing, 69 | metadata, 70 | selectedCategory, 71 | setSelectedCategory, 72 | selectedModel, 73 | setSelectedModel, 74 | promptStatus, 75 | }: DefinitionTabProps) { 76 | const [showCategoryDropdown, setShowCategoryDropdown] = useState(false); 77 | const [showModelDropdown, setShowModelDropdown] = useState(false); 78 | return ( 79 |

80 |

提示词

81 | 82 | {/* Name and Cover */} 83 |

84 |

85 | {/* Name */} 86 |

87 | 88 | * 名称 89 | 90 | 95 | setFormData({ ...formData, title: e.target.value }) 96 | } 97 | maxLength={100} 98 | className="w-full bg-[#2C2A2F] border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#3fda8c] transition-colors" 99 | /> 100 |

101 | {formData.title.length} / 100 字符 102 |

103 |

104 | 105 | {/* Cover */} 106 |

107 | 封面 108 |

109 |

110 | {coverImage ? ( 111 | Cover

116 | ) : ( 117 | 128 | )} 129 |

130 |

131 | 143 |

JPG、PNG、WEBP

144 |

145 |

146 |

147 |

148 |

149 | 150 | {/* Category and AI Model */} 151 | {metadata && ( 152 |

153 |

154 | {/* Category */} 155 |

156 | 分类 157 |

158 | 175 | {showCategoryDropdown && ( 176 |

177 | {metadata.categories.map((category: { id: number; name: string; description: string }) => ( 178 | 199 | ))} 200 |

201 | )} 202 |

203 |

204 | 205 | {/* AI Model */} 206 |

207 | 208 | AI 模型 209 | 210 |

211 | 234 | {showModelDropdown && ( 235 |

236 | {metadata.ai_models.map((model: { id: number; slug: string; name: string; provider: string; description: string }) => ( 237 | 259 | ))} 260 |

261 | )} 262 |

263 |

264 |

265 |

266 | )} 267 | 268 | {/* Bot Intro */} 269 |

270 | 介绍 271 |

275 |             setFormData({ ...formData, description: e.target.value })
276 |           }
277 |           maxLength={500}
278 |           rows={5}
279 |           className="w-full bg-[#2C2A2F] border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#3fda8c] resize-none transition-colors"
280 |         />
281 |         <p className="text-xs text-gray-500 mt-2">
282 |           {formData.description.length} / 500 字符
283 |         </p>
284 |       </div>
285 | 
286 |       {/* Prompt */}
287 |       <div className="bg-[#252429] rounded-xl p-6">
288 |         <label className="block text-sm font-semibold mb-3">
289 |           <span className="text-orange-500">*</span> 提示词
290 |         </label>
291 |         <textarea
292 |           placeholder="# 定义机器人的行为和核心人格。
293 | 使用 [#] 后跟空格来突出显示每个段落的标题。"
294 |           value={formData.content}
295 |           onChange={(e) =>
296 |             setFormData({ ...formData, content: e.target.value })
297 |           }
298 |           maxLength={10000}
299 |           rows={16}
300 |           className="w-full bg-[#2C2A2F] border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-[#3fda8c] resize-none font-mono text-sm leading-relaxed transition-colors"
301 |         />
302 |         <p className="text-xs text-gray-500 mt-2">
303 |           {formData.content.length} / 10000 字符
304 |         </p>
305 |       </div>
306 | 
307 |       {/* Mobile Action Buttons */}
308 |       <div className="lg:hidden space-y-3 pb-4">
309 |         <button
310 |           onClick={onSave}
311 |           disabled={isSaving}
312 |           className="w-full bg-[#1f1f1f] text-white py-3 rounded-lg font-semibold hover:bg-[#2a2a2a] transition-colors border border-white/5 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
313 |         >
314 |           {isSaving && <Loader2 size={16} className="animate-spin" />}
315 |           {isSaving ? "保存中..." : "保存"}
316 |         </button>
317 |         <button
318 |           onClick={onPublish}
319 |           disabled={isPublishing}
320 |           className={`w-full py-3 rounded-lg font-semibold transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed ${
321 |             promptStatus === "published" || promptStatus === "publish"
322 |               ? "bg-[#1f1f1f] text-gray-400 border border-gray-500/30 hover:bg-[#2a2a2a] hover:border-gray-500/50"
323 |               : "bg-[#3fda8c] text-black hover:bg-[#35c77a]"
324 |           }`}
325 |         >
326 |           {isPublishing ? (
327 |             <Loader2 size={16} className="animate-spin" />
328 |           ) : (
329 |             <SendIcon size={16} />
330 |           )}
331 |           {isPublishing
332 |             ? promptStatus === "published" || promptStatus === "publish"
333 |               ? "处理中..."
334 |               : "发布中..."
335 |             : promptStatus === "published" || promptStatus === "publish"
336 |               ? "设为私人"
337 |               : "发布"}
338 |         </button>
339 |       </div>
340 |     </div>
341 |   );
342 | }
343 |

--------------------------------------------------------------------------------
/src/components/PromptEditor/ChatTestingContent.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * ChatTestingContent 组件 - 对话测试面板
  3 |  */
  4 | 
  5 | import { useState, useEffect, useRef, useCallback } from "react";
  6 | import { Send, ChevronDown, Loader2, Trash2 } from "lucide-react";
  7 | import { useToast } from "../../contexts/ToastContext";
  8 | import { getEncryptedConfig } from "../../utils/encryption";
  9 | import { MessageIcon } from "./MessageIcon";
 10 | import type { ChatMessage, Model } from "./types";
 11 | 
 12 | interface ChatTestingContentProps {
 13 |   systemPrompt: string;
 14 | }
 15 | 
 16 | export function ChatTestingContent({ systemPrompt }: ChatTestingContentProps) {
 17 |   const { showToast } = useToast();
 18 |   const [messages, setMessages] = useState<ChatMessage[]>([]);
 19 |   const [input, setInput] = useState("");
 20 |   const [isLoading, setIsLoading] = useState(false);
 21 |   const [models, setModels] = useState<Model[]>([]);
 22 |   const [selectedModel, setSelectedModel] = useState<string>("gpt-3.5-turbo");
 23 |   const [isLoadingModels, setIsLoadingModels] = useState(false);
 24 |   const [showModelDropdown, setShowModelDropdown] = useState(false);
 25 |   const messagesEndRef = useRef<HTMLDivElement>(null);
 26 |   const abortControllerRef = useRef<AbortController | null>(null);
 27 |   const inputRef = useRef<HTMLInputElement>(null);
 28 | 
 29 |   const scrollToBottom = () => {
 30 |     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
 31 |   };
 32 | 
 33 |   useEffect(() => {
 34 |     scrollToBottom();
 35 |   }, [messages]);
 36 | 
 37 |   // 加载模型列表
 38 |   const loadModels = useCallback(
 39 |     async (cancelled: { current: boolean }) => {
 40 |       const apiBaseUrl = (await getEncryptedConfig("encrypted_api_url")) || "";
 41 |       const apiKey = (await getEncryptedConfig("encrypted_api_key")) || "";
 42 | 
 43 |       if (!apiBaseUrl || !apiKey) {
 44 |         return;
 45 |       }
 46 | 
 47 |       setIsLoadingModels(true);
 48 |       try {
 49 |         const cleanBaseUrl = apiBaseUrl.replace(/\/+$/, "");
 50 |         const modelsApiUrl = `${cleanBaseUrl}/v1/models`;
 51 | 
 52 |         const response = await fetch(modelsApiUrl, {
 53 |           method: "GET",
 54 |           headers: {
 55 |             Authorization: `Bearer ${apiKey}`,
 56 |           },
 57 |         });
 58 | 
 59 |         if (cancelled.current) return;
 60 | 
 61 |         if (response.ok) {
 62 |           const data = await response.json();
 63 |           if (cancelled.current) return;
 64 | 
 65 |           if (data.data && Array.isArray(data.data)) {
 66 |             setModels(data.data);
 67 |             // 如果当前选中的模型不在列表中，选择第一个
 68 |             if (data.data.length > 0) {
 69 |               const modelIds = data.data.map((m: Model) => m.id);
 70 |               if (!modelIds.includes(selectedModel)) {
 71 |                 setSelectedModel(data.data[0].id);
 72 |               }
 73 |             }
 74 |           }
 75 |         }
 76 |       } catch (error) {
 77 |         if (!cancelled.current) {
 78 |           console.error("加载模型列表失败:", error);
 79 |         }
 80 |       } finally {
 81 |         if (!cancelled.current) {
 82 |           setIsLoadingModels(false);
 83 |         }
 84 |       }
 85 |     },
 86 |     [selectedModel],
 87 |   );
 88 | 
 89 |   // 页面加载时自动获取模型列表
 90 |   useEffect(() => {
 91 |     const cancelled = { current: false };
 92 |     loadModels(cancelled);
 93 |     return () => {
 94 |       cancelled.current = true;
 95 |     };
 96 |   }, [loadModels]);
 97 | 
 98 |   // 监听 API 配置更新事件
 99 |   useEffect(() => {
100 |     const handleApiConfigUpdate = () => {
101 |       const cancelled = { current: false };
102 |       loadModels(cancelled);
103 |     };
104 | 
105 |     window.addEventListener("api-config-updated", handleApiConfigUpdate);
106 |     return () => {
107 |       window.removeEventListener("api-config-updated", handleApiConfigUpdate);
108 |     };
109 |     // eslint-disable-next-line react-hooks/exhaustive-deps
110 |   }, []);
111 | 
112 |   // 监听 API 配置删除事件 - 清理对话测试状态
113 |   useEffect(() => {
114 |     const handleApiConfigDeleted = () => {
115 |       // 清空模型列表
116 |       setModels([]);
117 |       // 清空选中的模型
118 |       setSelectedModel("");
119 |       // 清空对话消息
120 |       setMessages([]);
121 |       // 清空输入框
122 |       setInput("");
123 |     };
124 | 
125 |     window.addEventListener("api-config-deleted", handleApiConfigDeleted);
126 |     return () => {
127 |       window.removeEventListener("api-config-deleted", handleApiConfigDeleted);
128 |     };
129 |   }, []);
130 | 
131 |   // 点击外部关闭下拉菜单
132 |   useEffect(() => {
133 |     const handleClickOutside = (e: MouseEvent) => {
134 |       const target = e.target as HTMLElement;
135 |       if (!target.closest(".model-dropdown")) {
136 |         setShowModelDropdown(false);
137 |       }
138 |     };
139 | 
140 |     if (showModelDropdown) {
141 |       document.addEventListener("click", handleClickOutside);
142 |     }
143 | 
144 |     return () => {
145 |       document.removeEventListener("click", handleClickOutside);
146 |     };
147 |   }, [showModelDropdown]);
148 | 
149 |   const handleSend = async () => {
150 |     if (!input.trim() || isLoading) return;
151 | 
152 |     const userMessage: ChatMessage = {
153 |       role: "user",
154 |       content: input.trim(),
155 |     };
156 | 
157 |     setMessages((prev) => [...prev, userMessage]);
158 |     setInput("");
159 |     setIsLoading(true);
160 | 
161 |     // 获取 API 配置（从加密存储）
162 |     let apiBaseUrl = (await getEncryptedConfig("encrypted_api_url")) || "";
163 |     const apiKey = (await getEncryptedConfig("encrypted_api_key")) || "";
164 | 
165 |     if (!apiBaseUrl || !apiKey) {
166 |       showToast("请先在 API 配置页面设置 API 地址和密钥", "error");
167 |       setIsLoading(false);
168 |       return;
169 |     }
170 | 
171 |     // 移除尾部斜杠并拼接完整路径
172 |     apiBaseUrl = apiBaseUrl.replace(/\/+$/, "");
173 |     const fullApiUrl = `${apiBaseUrl}/v1/chat/completions`;
174 | 
175 |     try {
176 |       abortControllerRef.current = new AbortController();
177 | 
178 |       // 构建消息数组，如果有系统提示词则添加
179 |       const apiMessages: Array<{ role: string; content: string }> = [];
180 | 
181 |       if (systemPrompt.trim()) {
182 |         apiMessages.push({
183 |           role: "system",
184 |           content: systemPrompt,
185 |         });
186 |       }
187 | 
188 |       // 添加对话历史和当前用户消息
189 |       apiMessages.push(
190 |         ...messages.map((msg) => ({
191 |           role: msg.role,
192 |           content: msg.content,
193 |         })),
194 |         {
195 |           role: "user",
196 |           content: userMessage.content,
197 |         },
198 |       );
199 | 
200 |       const response = await fetch(fullApiUrl, {
201 |         method: "POST",
202 |         headers: {
203 |           "Content-Type": "application/json",
204 |           Authorization: `Bearer ${apiKey}`,
205 |         },
206 |         body: JSON.stringify({
207 |           model: selectedModel,
208 |           messages: apiMessages,
209 |           stream: true,
210 |         }),
211 |         signal: abortControllerRef.current.signal,
212 |       });
213 | 
214 |       if (!response.ok) {
215 |         throw new Error(`API 请求失败: ${response.status}`);
216 |       }
217 | 
218 |       const reader = response.body?.getReader();
219 |       const decoder = new TextDecoder();
220 | 
221 |       if (!reader) {
222 |         throw new Error("无法读取响应流");
223 |       }
224 | 
225 |       let assistantMessage = "";
226 |       setMessages((prev) => [...prev, { role: "assistant", content: "" }]);
227 | 
228 |       while (true) {
229 |         const { done, value } = await reader.read();
230 |         if (done) break;
231 | 
232 |         const chunk = decoder.decode(value);
233 |         const lines = chunk.split("\n");
234 | 
235 |         for (const line of lines) {
236 |           if (line.startsWith("data: ")) {
237 |             const data = line.slice(6);
238 |             if (data === "[DONE]") continue;
239 | 
240 |             try {
241 |               const parsed = JSON.parse(data);
242 |               const content = parsed.choices?.[0]?.delta?.content;
243 |               if (content) {
244 |                 assistantMessage += content;
245 |                 setMessages((prev) => {
246 |                   const newMessages = [...prev];
247 |                   newMessages[newMessages.length - 1] = {
248 |                     role: "assistant",
249 |                     content: assistantMessage,
250 |                   };
251 |                   return newMessages;
252 |                 });
253 |               }
254 |             } catch (e) {
255 |               // 忽略非 JSON 行（如空行）
256 |               if (data.trim()) {
257 |                 console.warn("Failed to parse SSE data:", data, e);
258 |               }
259 |             }
260 |           }
261 |         }
262 |       }
263 |     } catch (error: unknown) {
264 |       if (error instanceof Error && error.name === "AbortError") {
265 |         console.log("请求已取消");
266 |       } else {
267 |         console.error("对话错误:", error);
268 |         showToast(
269 |           `对话失败: ${error instanceof Error ? error.message : "未知错误"}`,
270 |           "error",
271 |         );
272 |         // 移除最后一条空的助手消息
273 |         setMessages((prev) => prev.slice(0, -1));
274 |       }
275 |     } finally {
276 |       setIsLoading(false);
277 |       abortControllerRef.current = null;
278 |       // AI 回复完成后聚焦输入框
279 |       requestAnimationFrame(() => {
280 |         inputRef.current?.focus();
281 |       });
282 |     }
283 |   };
284 | 
285 |   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
286 |     if (e.key === "Enter" && !e.shiftKey) {
287 |       e.preventDefault();
288 |       handleSend();
289 |     }
290 |   };
291 | 
292 |   const handleClear = () => {
293 |     setMessages([]);
294 |   };
295 | 
296 |   return (
297 |     <div className="flex-1 flex flex-col h-full">
298 |       <div className="p-4 border-b border-white/10 flex items-center justify-between flex-shrink-0">
299 |         <h3 className="font-semibold flex items-center gap-2">
300 |           <MessageIcon />
301 |           对话测试
302 |         </h3>
303 |         <div className="flex items-center gap-2">
304 |           {/* 模型选择下拉菜单 */}
305 |           <div className="relative model-dropdown">
306 |             <button
307 |               onClick={() => setShowModelDropdown(!showModelDropdown)}
308 |               disabled={isLoadingModels}
309 |               className="text-xs bg-[#1f1f1f] text-gray-300 px-3 py-1.5 rounded-lg hover:bg-[#2a2a2a] transition-colors flex items-center gap-2 border border-white/10 disabled:opacity-50"
310 |             >
311 |               <span className="max-w-[120px] truncate">
312 |                 {models.length > 0 ? selectedModel : "请配置 API"}
313 |               </span>
314 |               <ChevronDown size={14} />
315 |             </button>
316 |             {showModelDropdown && models.length > 0 && (
317 |               <div className="absolute right-0 top-full mt-2 bg-[#1f1f1f] border border-white/10 rounded-lg shadow-xl z-50 max-h-60 overflow-y-auto min-w-[200px]">
318 |                 {models.map((model) => (
319 |                   <button
320 |                     key={model.id}
321 |                     onClick={() => {
322 |                       setSelectedModel(model.id);
323 |                       setShowModelDropdown(false);
324 |                     }}
325 |                     className={`w-full px-4 py-2 text-left text-xs hover:bg-[#3f3f3f] transition-colors ${
326 |                       selectedModel === model.id
327 |                         ? "bg-[#3f3f3f] text-[#3fda8c]"
328 |                         : "text-white"
329 |                     }`}
330 |                   >
331 |                     <div className="font-medium truncate">{model.id}</div>
332 |                   </button>
333 |                 ))}
334 |               </div>
335 |             )}
336 |           </div>
337 |           {/* 清空按钮 - 始终显示 */}
338 |           <button
339 |             onClick={handleClear}
340 |             disabled={messages.length === 0}
341 |             className="p-1.5 text-gray-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-colors disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:text-gray-400 disabled:hover:bg-transparent"
342 |             title="清空对话"
343 |           >
344 |             <Trash2 size={16} />
345 |           </button>
346 |         </div>
347 |       </div>
348 | 
349 |       <div className="flex-1 p-4 overflow-y-auto min-h-0">
350 |         {messages.length === 0 ? (
351 |           <div className="bg-[#1f1f1f] rounded-lg p-4 mb-4">
352 |             <p className="text-sm text-gray-400">
353 |               在左侧填写提示词内容，并在 API
354 |               配置页面设置你的自定义接口，然后开始测试对话。
355 |             </p>
356 |           </div>
357 |         ) : (
358 |           <div className="space-y-4">
359 |             {messages.map((message, index) => (
360 |               <div
361 |                 key={index}
362 |                 className={`flex ${
363 |                   message.role === "user" ? "justify-end" : "justify-start"
364 |                 }`}
365 |               >
366 |                 <div
367 |                   className={`max-w-[80%] rounded-lg p-3 ${
368 |                     message.role === "user"
369 |                       ? "bg-[#3fda8c] text-black"
370 |                       : "bg-[#1f1f1f] text-white"
371 |                   }`}
372 |                 >
373 |                   <p className="text-sm whitespace-pre-wrap break-words">
374 |                     {message.content}
375 |                   </p>
376 |                 </div>
377 |               </div>
378 |             ))}
379 |             <div ref={messagesEndRef} />
380 |           </div>
381 |         )}
382 |       </div>
383 | 
384 |       <div className="p-4 border-t border-white/10 flex-shrink-0">
385 |         <div className="flex gap-2">
386 |           <input
387 |             ref={inputRef}
388 |             type="text"
389 |             placeholder="消息"
390 |             value={input}
391 |             onChange={(e) => setInput(e.target.value)}
392 |             onKeyPress={handleKeyPress}
393 |             disabled={isLoading}
394 |             className="flex-1 bg-[#1f1f1f] border border-white/10 rounded-lg px-4 py-2 text-white placeholder-gray-600 focus:outline-none focus:border-[#3fda8c] transition-colors disabled:opacity-50"
395 |           />
396 |           <button
397 |             onClick={handleSend}
398 |             disabled={isLoading || !input.trim()}
399 |             className="bg-[#3fda8c] text-black p-2 rounded-lg hover:bg-[#35c77a] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
400 |           >
401 |             {isLoading ? (
402 |               <Loader2 size={20} className="animate-spin" />
403 |             ) : (
404 |               <Send size={20} />
405 |             )}
406 |           </button>
407 |         </div>
408 |       </div>
409 |     </div>
410 |   );
411 | }
412 |

--------------------------------------------------------------------------------
/src/pages/PromptEditor.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect, useRef } from "react";
  2 | import { FileCode, Send as SendIcon, Loader2 } from "lucide-react";
  3 | import { useParams, useNavigate } from "react-router-dom";
  4 | import { ConfirmDialog } from "../components/ConfirmDialog";
  5 | import { EditorHeader } from "../components/EditorHeader";
  6 | import { useToast } from "../contexts/ToastContext";
  7 | import { TabButton } from "../components/PromptEditor/TabButton";
  8 | import { MessageIcon } from "../components/PromptEditor/MessageIcon";
  9 | import { EditorSkeleton } from "../components/PromptEditor/EditorSkeleton";
 10 | import { ChatTestingContent } from "../components/PromptEditor/ChatTestingContent";
 11 | import { DefinitionTab } from "../components/PromptEditor/DefinitionTab";
 12 | import { APITab } from "../components/PromptEditor/APITab";
 13 | import type { PromptFormData } from "../components/PromptEditor/types";
 14 | import {
 15 |   getAllCategories,
 16 |   getAllAIModels,
 17 |   getPromptById,
 18 |   savePrompt,
 19 |   publishPrompt as publishPromptLocal,
 20 |   unpublishPrompt as unpublishPromptLocal,
 21 |   type Category,
 22 |   type AIModel,
 23 | } from "../services/localStorage";
 24 | import { getEncryptedConfig } from "../utils/encryption";
 25 | 
 26 | export function PromptEditor() {
 27 |   const { id } = useParams();
 28 |   const promptId = id ? parseInt(id) : undefined;
 29 |   const navigate = useNavigate();
 30 |   const { showToast } = useToast();
 31 | 
 32 |   const [activeTab, setActiveTab] = useState<"definition" | "api" | "chat">(
 33 |     "definition",
 34 |   );
 35 |   const [showPublishDialog, setShowPublishDialog] = useState(false);
 36 | 
 37 |   // 元数据
 38 |   const [categories, setCategories] = useState<Category[]>([]);
 39 |   const [aiModels, setAIModels] = useState<AIModel[]>([]);
 40 |   const [selectedModel, setSelectedModel] = useState<AIModel | null>(null);
 41 | 
 42 |   // 表单数据
 43 |   const [currentPromptId, setCurrentPromptId] = useState<number | undefined>(
 44 |     promptId,
 45 |   );
 46 | 
 47 |   const [formData, setFormData] = useState<PromptFormData>({
 48 |     title: "",
 49 |     description: "",
 50 |     content: "",
 51 |     apiUrl: "",
 52 |     apiKey: "",
 53 |   });
 54 | 
 55 |   // 图片相关
 56 |   const [coverImage, setCoverImage] = useState<string | null>(null);
 57 |   const fileInputRef = useRef<HTMLInputElement>(null);
 58 | 
 59 |   // 分类
 60 |   const [selectedCategory, setSelectedCategory] = useState<number | null>(null);
 61 | 
 62 |   // 保存状态
 63 |   const [isSaving, setIsSaving] = useState(false);
 64 |   const [isPublishing, setIsPublishing] = useState(false);
 65 |   const [isLoading, setIsLoading] = useState(!!promptId);
 66 | 
 67 |   // 文章状态
 68 |   const [promptStatus, setPromptStatus] = useState<"draft" | "published">(
 69 |     "draft",
 70 |   );
 71 |   const [promptVisibility, setPromptVisibility] = useState<
 72 |     "public" | "private"
 73 |   >("public");
 74 | 
 75 |   // 加载元数据
 76 |   useEffect(() => {
 77 |     setCategories(getAllCategories());
 78 |     setAIModels(getAllAIModels());
 79 |   }, []);
 80 | 
 81 |   // 加载用户 API 设置（从本地加密存储）
 82 |   const loadUserApiSettings = async () => {
 83 |     try {
 84 |       const apiUrl = (await getEncryptedConfig("encrypted_api_url")) || "";
 85 |       const apiKey = (await getEncryptedConfig("encrypted_api_key")) || "";
 86 | 
 87 |       setFormData((prev) => ({
 88 |         ...prev,
 89 |         apiUrl,
 90 |         apiKey,
 91 |       }));
 92 |     } catch (error) {
 93 |       console.error("加载 API 设置失败:", error);
 94 |     }
 95 |   };
 96 | 
 97 |   // 加载 API 设置
 98 |   useEffect(() => {
 99 |     loadUserApiSettings();
100 |   }, []);
101 | 
102 |   // 监听路由参数变化
103 |   useEffect(() => {
104 |     const newId = promptId;
105 | 
106 |     // 如果从有 ID 变为无 ID（点击新建按钮）
107 |     if (currentPromptId && !newId) {
108 |       // 重置表单
109 |       setFormData((prev) => ({
110 |         title: "",
111 |         description: "",
112 |         content: "",
113 |         apiUrl: prev.apiUrl, // 保留 API 配置
114 |         apiKey: prev.apiKey,
115 |       }));
116 |       setCoverImage(null);
117 |       setSelectedCategory(null);
118 |       setSelectedModel(null);
119 |       setCurrentPromptId(undefined);
120 |       setPromptStatus("draft");
121 |       setPromptVisibility("public");
122 |     } else if (newId !== currentPromptId) {
123 |       // ID 变化了，更新 currentPromptId
124 |       setCurrentPromptId(newId);
125 |       if (newId) {
126 |         setIsLoading(true);
127 |       }
128 |     }
129 |   }, [promptId, currentPromptId]);
130 | 
131 |   // 加载提示词（编辑模式）
132 |   useEffect(() => {
133 |     if (currentPromptId) {
134 |       setIsLoading(true);
135 |       try {
136 |         const prompt = getPromptById(currentPromptId);
137 |         if (prompt) {
138 |           setFormData((prev) => ({
139 |             ...prev,
140 |             title: prompt.title,
141 |             description: prompt.description,
142 |             content: prompt.content,
143 |             // apiUrl 和 apiKey 保持本地存储的值
144 |           }));
145 | 
146 |           setPromptStatus(prompt.status);
147 |           setPromptVisibility(prompt.visibility);
148 | 
149 |           if (prompt.image) {
150 |             setCoverImage(prompt.image);
151 |           }
152 | 
153 |           if (prompt.categoryId) {
154 |             setSelectedCategory(prompt.categoryId);
155 |           }
156 | 
157 |           if (prompt.aiModelSlug) {
158 |             const model = aiModels.find((m) => m.slug === prompt.aiModelSlug);
159 |             if (model) {
160 |               setSelectedModel(model);
161 |             }
162 |           }
163 |         } else {
164 |           showToast("未找到该提示词", "error");
165 |           navigate("/my-prompts");
166 |         }
167 |       } finally {
168 |         setIsLoading(false);
169 |       }
170 |     }
171 |   }, [currentPromptId, aiModels, navigate, showToast]);
172 | 
173 |   const handleImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
174 |     const file = e.target.files?.[0];
175 |     if (!file) return;
176 | 
177 |     // 检查文件大小（5MB）
178 |     if (file.size > 5 * 1024 * 1024) {
179 |       showToast("图片大小不能超过 5MB", "error");
180 |       return;
181 |     }
182 | 
183 |     // 检查文件类型
184 |     const allowedTypes = ["image/jpeg", "image/jpg", "image/png", "image/webp"];
185 |     if (!allowedTypes.includes(file.type)) {
186 |       showToast("仅支持 JPG、PNG、WEBP 格式的图片", "error");
187 |       return;
188 |     }
189 | 
190 |     // 预览图片（转为 base64）
191 |     const reader = new FileReader();
192 |     reader.onload = (e) => {
193 |       setCoverImage(e.target?.result as string);
194 |       showToast("图片已选择", "success");
195 |     };
196 |     reader.readAsDataURL(file);
197 |   };
198 | 
199 |   const handleSave = async (): Promise<number | null> => {
200 |     // 草稿保存时只验证标题和内容
201 |     if (!formData.title.trim()) {
202 |       showToast("请填写提示词名称", "error");
203 |       return null;
204 |     }
205 | 
206 |     if (!formData.content.trim()) {
207 |       showToast("请填写提示词内容", "error");
208 |       return null;
209 |     }
210 | 
211 |     setIsSaving(true);
212 |     try {
213 |       const savedPrompt = savePrompt({
214 |         id: currentPromptId,
215 |         title: formData.title,
216 |         description: formData.description,
217 |         content: formData.content,
218 |         image: coverImage || undefined,
219 |         categoryId: selectedCategory || undefined,
220 |         aiModelSlug: selectedModel?.slug,
221 |         status: promptStatus,
222 |         visibility: promptVisibility,
223 |         statistics: {
224 |           views: 0,
225 |           uses: 0,
226 |           favorites: 0,
227 |         },
228 |       });
229 | 
230 |       // 更新当前 ID
231 |       setCurrentPromptId(savedPrompt.id);
232 |       setPromptStatus(savedPrompt.status);
233 |       setPromptVisibility(savedPrompt.visibility);
234 | 
235 |       // 如果是新建的草稿，更新 URL
236 |       if (!currentPromptId) {
237 |         navigate(`/prompt-editor/${savedPrompt.id}`, { replace: true });
238 |       }
239 | 
240 |       showToast("保存成功", "success");
241 |       return savedPrompt.id;
242 |     } finally {
243 |       setIsSaving(false);
244 |     }
245 |   };
246 | 
247 |   const handlePublish = () => {
248 |     const isPublished = promptStatus === "published";
249 | 
250 |     // 如果是已发布，点击后应该设为私人（变回草稿）
251 |     if (isPublished) {
252 |       setShowPublishDialog(true);
253 |       return;
254 |     }
255 | 
256 |     // 草稿状态，发布前需要检查必填项
257 |     if (!formData.title.trim()) {
258 |       showToast("请填写提示词名称", "error");
259 |       return;
260 |     }
261 |     if (!formData.content.trim()) {
262 |       showToast("请填写提示词内容", "error");
263 |       return;
264 |     }
265 |     if (!selectedCategory) {
266 |       showToast("请选择分类", "error");
267 |       return;
268 |     }
269 |     if (!selectedModel) {
270 |       showToast("请选择 AI 模型", "error");
271 |       return;
272 |     }
273 |     if (!formData.description.trim()) {
274 |       showToast("请填写介绍", "error");
275 |       return;
276 |     }
277 | 
278 |     setShowPublishDialog(true);
279 |   };
280 | 
281 |   const confirmPublish = async () => {
282 |     const isPublished = promptStatus === "published";
283 | 
284 |     // 如果是已发布，设为私人（变回草稿）
285 |     if (isPublished) {
286 |       if (!currentPromptId) {
287 |         showToast("无效的提示词ID", "error");
288 |         setShowPublishDialog(false);
289 |         return;
290 |       }
291 | 
292 |       setIsPublishing(true);
293 |       try {
294 |         const updated = unpublishPromptLocal(currentPromptId);
295 |         setShowPublishDialog(false);
296 | 
297 |         if (updated) {
298 |           showToast("已设为私人！", "success");
299 |           setPromptStatus("draft");
300 |           setPromptVisibility("private");
301 |         } else {
302 |           showToast("操作失败", "error");
303 |         }
304 |       } finally {
305 |         setIsPublishing(false);
306 |       }
307 |       return;
308 |     }
309 | 
310 |     // 草稿状态，先保存再发布
311 |     setIsPublishing(true);
312 |     try {
313 |       // 先保存
314 |       const savedPrompt = savePrompt({
315 |         id: currentPromptId,
316 |         title: formData.title,
317 |         description: formData.description,
318 |         content: formData.content,
319 |         image: coverImage || undefined,
320 |         categoryId: selectedCategory || undefined,
321 |         aiModelSlug: selectedModel?.slug,
322 |         status: "draft",
323 |         visibility: promptVisibility,
324 |         statistics: {
325 |           views: 0,
326 |           uses: 0,
327 |           favorites: 0,
328 |         },
329 |       });
330 | 
331 |       // 然后发布
332 |       const published = publishPromptLocal(savedPrompt.id);
333 | 
334 |       setShowPublishDialog(false);
335 | 
336 |       if (published) {
337 |         showToast("发布成功！", "success");
338 |         setPromptStatus("published");
339 |         setPromptVisibility("public");
340 |         setCurrentPromptId(published.id);
341 | 
342 |         // 如果是新建的，更新 URL
343 |         if (!currentPromptId) {
344 |           navigate(`/prompt-editor/${published.id}`, { replace: true });
345 |         }
346 |       } else {
347 |         showToast("发布失败", "error");
348 |       }
349 |     } finally {
350 |       setIsPublishing(false);
351 |     }
352 |   };
353 | 
354 |   return (
355 |     <div className="min-h-screen lg:h-screen bg-[#1e1e1e] text-white p-3 lg:p-4 flex flex-col gap-3 lg:gap-4 lg:overflow-hidden">
356 |       {/* Header */}
357 |       <EditorHeader />
358 | 
359 |       {/* Mobile Tabs */}
360 |       <div className="lg:hidden bg-[#2C2A2F] rounded-xl">
361 |         <div className="flex overflow-x-auto no-scrollbar">
362 |           <TabButton
363 |             icon={<FileCode size={18} />}
364 |             label="提示词"
365 |             active={activeTab === "definition"}
366 |             onClick={() => setActiveTab("definition")}
367 |           />
368 |           <TabButton
369 |             icon={<MessageIcon />}
370 |             label="对话"
371 |             active={activeTab === "chat"}
372 |             onClick={() => setActiveTab("chat")}
373 |           />
374 |           <TabButton
375 |             icon={<FileCode size={18} />}
376 |             label="调试API"
377 |             active={activeTab === "api"}
378 |             onClick={() => setActiveTab("api")}
379 |           />
380 |         </div>
381 |       </div>
382 | 
383 |       {/* Main Content */}
384 |       <div className="flex-1 flex flex-col lg:flex-row gap-3 lg:gap-4 min-h-0 lg:overflow-hidden">
385 |         {/* Left Sidebar */}
386 |         <aside className="w-full lg:w-64 bg-[#2C2A2F] rounded-xl flex flex-col overflow-hidden hidden lg:flex">
387 |           <nav className="flex-1 p-4 overflow-y-auto">
388 |             <TabButton
389 |               icon={<FileCode size={20} />}
390 |               label="提示词"
391 |               active={activeTab === "definition"}
392 |               onClick={() => setActiveTab("definition")}
393 |             />
394 |             <TabButton
395 |               icon={<FileCode size={20} />}
396 |               label="调试API"
397 |               active={activeTab === "api"}
398 |               onClick={() => setActiveTab("api")}
399 |             />
400 |           </nav>
401 | 
402 |           {/* Bottom Actions */}
403 |           <div className="p-4 border-t border-white/10 space-y-2">
404 |             <button
405 |               onClick={handleSave}
406 |               disabled={isSaving}
407 |               className="w-full bg-[#1f1f1f] text-white py-2 rounded-lg font-semibold hover:bg-[#2a2a2a] transition-colors border border-white/5 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
408 |             >
409 |               {isSaving && <Loader2 size={16} className="animate-spin" />}
410 |               {isSaving ? "保存中..." : "保存"}
411 |             </button>
412 |             <button
413 |               onClick={handlePublish}
414 |               disabled={isPublishing}
415 |               className={`w-full py-2 rounded-lg font-semibold transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed ${
416 |                 promptStatus === "published"
417 |                   ? "bg-[#1f1f1f] text-gray-400 border border-gray-500/30 hover:bg-[#2a2a2a] hover:border-gray-500/50"
418 |                   : "bg-[#3fda8c] text-black hover:bg-[#35c77a]"
419 |               }`}
420 |             >
421 |               {isPublishing ? (
422 |                 <Loader2 size={16} className="animate-spin" />
423 |               ) : (
424 |                 <SendIcon size={16} />
425 |               )}
426 |               {isPublishing
427 |                 ? promptStatus === "published"
428 |                   ? "处理中..."
429 |                   : "发布中..."
430 |                 : promptStatus === "published"
431 |                   ? "设为私人"
432 |                   : "发布"}
433 |             </button>
434 |           </div>
435 |         </aside>
436 | 
437 |         {/* Center Content */}
438 |         <main className="flex-1 bg-[#2C2A2F] rounded-xl flex flex-col lg:overflow-hidden">
439 |           {activeTab === "chat" ? (
440 |             <div className="lg:hidden flex-1 flex flex-col overflow-hidden">
441 |               <ChatTestingContent systemPrompt={formData.content} />
442 |             </div>
443 |           ) : (
444 |             <div className="flex-1 w-full p-4 lg:p-8 overflow-y-auto no-scrollbar">
445 |               {activeTab === "definition" &&
446 |                 (isLoading ? (
447 |                   <EditorSkeleton />
448 |                 ) : (
449 |                   <DefinitionTab
450 |                     formData={formData}
451 |                     setFormData={setFormData}
452 |                     coverImage={coverImage ? { url: coverImage } : null}
453 |                     onImageSelect={() => fileInputRef.current?.click()}
454 |                     isUploading={false}
455 |                     onSave={handleSave}
456 |                     onPublish={handlePublish}
457 |                     isSaving={isSaving}
458 |                     isPublishing={isPublishing}
459 |                     metadata={{
460 |                       categories: categories.map((c) => ({
461 |                         ...c,
462 |                         count: 0,
463 |                         description: c.description,
464 |                       })),
465 |                       ai_models: aiModels.map((m) => ({
466 |                         ...m,
467 |                         description: "",
468 |                         supports_vision: false,
469 |                         context_length: 0,
470 |                       })),
471 |                       tags: [],
472 |                       visibility_options: [],
473 |                     }}
474 |                     selectedCategory={selectedCategory}
475 |                     setSelectedCategory={setSelectedCategory}
476 |                     selectedModel={selectedModel}
477 |                     setSelectedModel={(model) => {
478 |                       setSelectedModel(model);
479 |                     }}
480 |                     promptStatus={promptStatus}
481 |                   />
482 |                 ))}
483 |               {activeTab === "api" && (
484 |                 <APITab
485 |                   formData={formData}
486 |                   setFormData={setFormData}
487 |                   onApiConfigDeleted={() => {
488 |                     setFormData((prev) => ({
489 |                       ...prev,
490 |                       apiUrl: "",
491 |                       apiKey: "",
492 |                     }));
493 |                   }}
494 |                 />
495 |               )}
496 |             </div>
497 |           )}
498 |         </main>
499 | 
500 |         {/* Right Sidebar - Chat Testing */}
501 |         <aside className="w-full lg:w-96 bg-[#2C2A2F] rounded-xl flex-col overflow-hidden hidden lg:flex">
502 |           <ChatTestingContent systemPrompt={formData.content} />
503 |         </aside>
504 |       </div>
505 | 
506 |       {/* Hidden File Input */}
507 |       <input
508 |         ref={fileInputRef}
509 |         type="file"
510 |         accept="image/jpeg,image/jpg,image/png,image/webp"
511 |         onChange={handleImageSelect}
512 |         className="hidden"
513 |       />
514 | 
515 |       {/* Publish Confirm Dialog */}
516 |       <ConfirmDialog
517 |         isOpen={showPublishDialog}
518 |         onClose={() => setShowPublishDialog(false)}
519 |         onConfirm={confirmPublish}
520 |         title={
521 |           promptStatus === "published" ? "设为私人" : "发布提示词"
522 |         }
523 |         message={
524 |           promptStatus === "published"
525 |             ? "设为私人后将变为草稿状态，不再公开显示。您随时可以重新发布。"
526 |             : "发布后任何人都可以看到您分享的提示词，您随时可以设为私人。"
527 |         }
528 |         confirmText={
529 |           isPublishing
530 |             ? promptStatus === "published"
531 |               ? "处理中..."
532 |               : "发布中..."
533 |             : promptStatus === "published"
534 |               ? "设为私人"
535 |               : "发布"
536 |         }
537 |         cancelText="取消"
538 |         type="publish"
539 |       />
540 |     </div>
541 |   );
542 | }
543 |

--------------------------------------------------------------------------------
/src/pages/MyPrompts.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { Edit, Trash2, Lock, Search, X, EyeOff } from "lucide-react";
  3 | import { ConfirmDialog } from "../components/ConfirmDialog";
  4 | import { useNavigate } from "react-router-dom";
  5 | import { EditorHeader } from "../components/EditorHeader";
  6 | import { MyPromptsListSkeleton } from "../components/MyPromptItemSkeleton";
  7 | import { useToast } from "../contexts/ToastContext";
  8 | import {
  9 |   getAllCategories,
 10 |   getAllAIModels,
 11 |   deletePrompt,
 12 |   publishPrompt as publishPromptLocal,
 13 |   unpublishPrompt as unpublishPromptLocal,
 14 |   filterPrompts,
 15 |   getPromptCounts,
 16 |   getCategoryById,
 17 |   getAIModelBySlug,
 18 |   type Prompt,
 19 |   type Category,
 20 |   type AIModel,
 21 | } from "../services/localStorage";
 22 | 
 23 | const tabs = [
 24 |   { id: "all", label: "所有创作" },
 25 |   { id: "published", label: "已发布" },
 26 |   { id: "draft", label: "草稿" },
 27 | ];
 28 | 
 29 | interface DisplayPrompt extends Prompt {
 30 |   category: { id: number; name: string; slug: string } | null;
 31 |   ai_model?: { id: number; slug: string; name: string; provider: string } | null;
 32 | }
 33 | 
 34 | export function MyPrompts() {
 35 |   const [activeTab, setActiveTab] = useState("all");
 36 |   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 37 |   const [showPublishDialog, setShowPublishDialog] = useState(false);
 38 |   const [showUnpublishDialog, setShowUnpublishDialog] = useState(false);
 39 |   const [selectedPrompt, setSelectedPrompt] = useState<DisplayPrompt | null>(
 40 |     null,
 41 |   );
 42 |   const navigate = useNavigate();
 43 |   const { showToast } = useToast();
 44 | 
 45 |   // 数据状态
 46 |   const [prompts, setPrompts] = useState<DisplayPrompt[]>([]);
 47 |   const [isLoading, setIsLoading] = useState(true);
 48 |   const [isDeleting, setIsDeleting] = useState(false);
 49 |   const [isPublishing, setIsPublishing] = useState(false);
 50 | 
 51 |   // 统计数据
 52 |   const [counts, setCounts] = useState({
 53 |     all: 0,
 54 |     published: 0,
 55 |     draft: 0,
 56 |   });
 57 | 
 58 |   // 搜索和筛选状态
 59 |   const [searchInput, setSearchInput] = useState("");
 60 |   const [searchKeyword, setSearchKeyword] = useState("");
 61 |   const [selectedCategory, setSelectedCategory] = useState("所有提示词");
 62 |   const [selectedModel, setSelectedModel] = useState("所有模型");
 63 | 
 64 |   // 元数据（分类和模型）
 65 |   const [categories, setCategories] = useState<Category[]>([]);
 66 |   const [aiModels, setAIModels] = useState<AIModel[]>([]);
 67 | 
 68 |   // 加载元数据
 69 |   useEffect(() => {
 70 |     setCategories(getAllCategories());
 71 |     setAIModels(getAllAIModels());
 72 |   }, []);
 73 | 
 74 |   // 搜索防抖
 75 |   useEffect(() => {
 76 |     const timer = setTimeout(() => {
 77 |       setSearchKeyword(searchInput);
 78 |     }, 300);
 79 | 
 80 |     return () => clearTimeout(timer);
 81 |   }, [searchInput]);
 82 | 
 83 |   // 加载数据
 84 |   useEffect(() => {
 85 |     setIsLoading(true);
 86 | 
 87 |     try {
 88 |       const status =
 89 |         activeTab === "all"
 90 |           ? undefined
 91 |           : activeTab === "published"
 92 |             ? "published"
 93 |             : "draft";
 94 | 
 95 |       const filteredPrompts = filterPrompts({
 96 |         status: status as "all" | "draft" | "published" | undefined,
 97 |         search: searchKeyword.trim() || undefined,
 98 |         categorySlug:
 99 |           selectedCategory !== "所有提示词" ? selectedCategory : undefined,
100 |         aiModelSlug: selectedModel !== "所有模型" ? selectedModel : undefined,
101 |       });
102 | 
103 |       // 转换为 DisplayPrompt 格式
104 |       const displayPrompts: DisplayPrompt[] = filteredPrompts.map((p) => ({
105 |         ...p,
106 |         category: p.categoryId ? getCategoryById(p.categoryId) : null,
107 |         ai_model: p.aiModelSlug ? getAIModelBySlug(p.aiModelSlug) : undefined,
108 |       }));
109 | 
110 |       setPrompts(displayPrompts);
111 |     } catch (err) {
112 |       console.error("加载提示词异常:", err);
113 |       showToast("加载失败，请重试", "error");
114 |     } finally {
115 |       setIsLoading(false);
116 |     }
117 |   }, [activeTab, searchKeyword, selectedCategory, selectedModel, showToast]);
118 | 
119 |   // 加载统计数据
120 |   useEffect(() => {
121 |     const counts = getPromptCounts();
122 |     setCounts(counts);
123 |   }, [prompts]); // 当 prompts 变化时更新统计
124 | 
125 |   const handleDelete = (prompt: DisplayPrompt) => {
126 |     setSelectedPrompt(prompt);
127 |     setShowDeleteDialog(true);
128 |   };
129 | 
130 |   const confirmDelete = async () => {
131 |     if (!selectedPrompt) return;
132 | 
133 |     setIsDeleting(true);
134 |     try {
135 |       const success = deletePrompt(selectedPrompt.id);
136 | 
137 |       if (success) {
138 |         // 删除成功，重新加载数据
139 |         const filteredPrompts = filterPrompts({
140 |           status:
141 |             activeTab === "all"
142 |               ? undefined
143 |               : activeTab === "published"
144 |                 ? "published"
145 |                 : "draft",
146 |         });
147 | 
148 |         const displayPrompts: DisplayPrompt[] = filteredPrompts.map((p) => ({
149 |           ...p,
150 |           category: p.categoryId ? getCategoryById(p.categoryId) : null,
151 |           ai_model: p.aiModelSlug ? getAIModelBySlug(p.aiModelSlug) : undefined,
152 |         }));
153 | 
154 |         setPrompts(displayPrompts);
155 |         setShowDeleteDialog(false);
156 |         setSelectedPrompt(null);
157 |         showToast("删除成功", "success");
158 |       } else {
159 |         showToast("删除失败：未找到该提示词", "error");
160 |       }
161 |     } finally {
162 |       setIsDeleting(false);
163 |     }
164 |   };
165 | 
166 |   const handlePublish = (prompt: DisplayPrompt) => {
167 |     setSelectedPrompt(prompt);
168 |     setShowPublishDialog(true);
169 |   };
170 | 
171 |   const confirmPublish = async () => {
172 |     if (!selectedPrompt) return;
173 | 
174 |     setIsPublishing(true);
175 |     try {
176 |       const updated = publishPromptLocal(selectedPrompt.id);
177 | 
178 |       if (updated) {
179 |         // 重新加载数据
180 |         const filteredPrompts = filterPrompts({
181 |           status:
182 |             activeTab === "all"
183 |               ? undefined
184 |               : activeTab === "published"
185 |                 ? "published"
186 |                 : "draft",
187 |         });
188 | 
189 |         const displayPrompts: DisplayPrompt[] = filteredPrompts.map((p) => ({
190 |           ...p,
191 |           category: p.categoryId ? getCategoryById(p.categoryId) : null,
192 |           ai_model: p.aiModelSlug ? getAIModelBySlug(p.aiModelSlug) : undefined,
193 |         }));
194 | 
195 |         setPrompts(displayPrompts);
196 |         setShowPublishDialog(false);
197 |         setSelectedPrompt(null);
198 |         showToast("发布成功", "success");
199 |       } else {
200 |         showToast("发布失败：未找到该提示词", "error");
201 |       }
202 |     } finally {
203 |       setIsPublishing(false);
204 |     }
205 |   };
206 | 
207 |   const handleUnpublish = (prompt: DisplayPrompt) => {
208 |     setSelectedPrompt(prompt);
209 |     setShowUnpublishDialog(true);
210 |   };
211 | 
212 |   const confirmUnpublish = async () => {
213 |     if (!selectedPrompt) return;
214 | 
215 |     setIsPublishing(true);
216 |     try {
217 |       const updated = unpublishPromptLocal(selectedPrompt.id);
218 | 
219 |       if (updated) {
220 |         // 重新加载数据
221 |         const filteredPrompts = filterPrompts({
222 |           status:
223 |             activeTab === "all"
224 |               ? undefined
225 |               : activeTab === "published"
226 |                 ? "published"
227 |                 : "draft",
228 |         });
229 | 
230 |         const displayPrompts: DisplayPrompt[] = filteredPrompts.map((p) => ({
231 |           ...p,
232 |           category: p.categoryId ? getCategoryById(p.categoryId) : null,
233 |           ai_model: p.aiModelSlug ? getAIModelBySlug(p.aiModelSlug) : undefined,
234 |         }));
235 | 
236 |         setPrompts(displayPrompts);
237 |         setShowUnpublishDialog(false);
238 |         setSelectedPrompt(null);
239 |         showToast("已设为私人", "success");
240 |       } else {
241 |         showToast("设为私人失败：未找到该提示词", "error");
242 |       }
243 |     } finally {
244 |       setIsPublishing(false);
245 |     }
246 |   };
247 | 
248 |   const handleEdit = (id: number) => {
249 |     navigate(`/prompt-editor/${id}`);
250 |   };
251 | 
252 |   const handleTabChange = (tabId: string) => {
253 |     setActiveTab(tabId);
254 |   };
255 | 
256 |   const handleSearchChange = (value: string) => {
257 |     setSearchInput(value);
258 |     if (value === "") {
259 |       setSearchKeyword("");
260 |     }
261 |   };
262 | 
263 |   const handleCategoryChange = (category: string) => {
264 |     setSelectedCategory(category);
265 |   };
266 | 
267 |   const handleModelChange = (model: string) => {
268 |     setSelectedModel(model);
269 |   };
270 | 
271 |   const getVisibilityDisplay = (
272 |     visibility: string,
273 |     status: string,
274 |   ): { label: string; color: string } => {
275 |     if (status === "draft") {
276 |       return { label: "私人", color: "gray" };
277 |     }
278 | 
279 |     if (visibility === "public") {
280 |       return { label: "公开", color: "green" };
281 |     } else if (visibility === "private") {
282 |       return { label: "私人", color: "gray" };
283 |     } else {
284 |       return { label: "不公开列出", color: "yellow" };
285 |     }
286 |   };
287 | 
288 |   return (
289 |     <div className="min-h-screen bg-[#1e1e1e] text-white p-3 lg:p-4 flex flex-col gap-3 lg:gap-4">
290 |       {/* Header */}
291 |       <EditorHeader />
292 | 
293 |       {/* Tabs */}
294 |       <div className="bg-[#2C2A2F] rounded-xl px-3 sm:px-4 lg:px-6 py-3 lg:py-4">
295 |         <div className="flex gap-2 sm:gap-3 overflow-x-auto no-scrollbar">
296 |           {tabs.map((tab) => (
297 |             <button
298 |               key={tab.id}
299 |               onClick={() => handleTabChange(tab.id)}
300 |               className={`px-3 sm:px-4 py-2 text-xs sm:text-sm font-semibold rounded-[18px] border transition-all whitespace-nowrap flex items-center gap-2 ${
301 |                 activeTab === tab.id
302 |                   ? "bg-[#3f3f3f] border-white/10 text-white"
303 |                   : "bg-transparent border-white/10 text-gray-400 hover:bg-[#252525] hover:text-white"
304 |               }`}
305 |             >
306 |               <span>{tab.label}</span>
307 |               <span
308 |                 className={`px-1.5 py-0.5 rounded-full text-[10px] sm:text-xs ${
309 |                   activeTab === tab.id
310 |                     ? "bg-[#3fda8c] text-black"
311 |                     : "bg-[#3f3f3f] text-gray-400"
312 |                 }`}
313 |               >
314 |                 {counts[tab.id as keyof typeof counts]}
315 |               </span>
316 |             </button>
317 |           ))}
318 |         </div>
319 |       </div>
320 | 
321 |       {/* Search and Filter */}
322 |       <div className="bg-[#2C2A2F] rounded-xl px-3 sm:px-4 lg:px-6 py-3 lg:py-4 space-y-3">
323 |         {/* Search Bar */}
324 |         <div className="relative">
325 |           <div className="absolute left-4 top-1/2 -translate-y-1/2 z-10 pointer-events-none">
326 |             <Search className="text-gray-400" size={18} />
327 |           </div>
328 |           <input
329 |             type="text"
330 |             placeholder="搜索我的提示词..."
331 |             value={searchInput}
332 |             onChange={(e) => handleSearchChange(e.target.value)}
333 |             className="block w-full border-none pl-11 pr-10 py-2.5 text-sm font-medium text-white placeholder-gray-400 outline-none ring-transparent backdrop-blur-[30px] rounded-full bg-[#3f3f3f] focus:outline-none focus:ring-2 focus:ring-[#3fda8c]/20 transition-all"
334 |           />
335 |           {searchInput && (
336 |             <button
337 |               onClick={() => handleSearchChange("")}
338 |               className="absolute right-3 top-1/2 -translate-y-1/2 z-10 p-1 hover:bg-white/10 rounded-full transition-colors"
339 |               aria-label="Clear search"
340 |             >
341 |               <X className="text-gray-400 hover:text-white" size={16} />
342 |             </button>
343 |           )}
344 |         </div>
345 | 
346 |         {/* Category and Model Filters */}
347 |         <div className="flex flex-col sm:flex-row gap-2">
348 |           {/* Category Filter */}
349 |           <div className="flex items-center gap-2 overflow-x-auto scrollbar-hide flex-1">
350 |             <span className="text-xs text-gray-400 whitespace-nowrap">
351 |               分类:
352 |             </span>
353 |             <div className="flex gap-2 overflow-x-auto scrollbar-hide">
354 |               <button
355 |                 onClick={() => handleCategoryChange("所有提示词")}
356 |                 className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all ${
357 |                   selectedCategory === "所有提示词"
358 |                     ? "bg-white text-black"
359 |                     : "bg-[#3f3f3f] text-gray-400 hover:text-white hover:bg-[#4a4a4a]"
360 |                 }`}
361 |               >
362 |                 所有提示词
363 |               </button>
364 |               {categories.map((category) => (
365 |                 <button
366 |                   key={category.id}
367 |                   onClick={() => handleCategoryChange(category.slug)}
368 |                   className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all ${
369 |                     selectedCategory === category.slug
370 |                       ? "bg-white text-black"
371 |                       : "bg-[#3f3f3f] text-gray-400 hover:text-white hover:bg-[#4a4a4a]"
372 |                   }`}
373 |                 >
374 |                   {category.name}
375 |                 </button>
376 |               ))}
377 |             </div>
378 |           </div>
379 | 
380 |           {/* Model Filter */}
381 |           <div className="flex items-center gap-2 overflow-x-auto scrollbar-hide">
382 |             <span className="text-xs text-gray-400 whitespace-nowrap">
383 |               模型:
384 |             </span>
385 |             <div className="flex gap-2 overflow-x-auto scrollbar-hide">
386 |               <button
387 |                 onClick={() => handleModelChange("所有模型")}
388 |                 className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all ${
389 |                   selectedModel === "所有模型"
390 |                     ? "bg-white text-black"
391 |                     : "bg-[#3f3f3f] text-gray-400 hover:text-white hover:bg-[#4a4a4a]"
392 |                 }`}
393 |               >
394 |                 所有模型
395 |               </button>
396 |               {aiModels.map((model) => (
397 |                 <button
398 |                   key={model.id}
399 |                   onClick={() => handleModelChange(model.slug)}
400 |                   className={`px-3 py-1.5 rounded-full text-xs font-semibold whitespace-nowrap transition-all ${
401 |                     selectedModel === model.slug
402 |                       ? "bg-white text-black"
403 |                       : "bg-[#3f3f3f] text-gray-400 hover:text-white hover:bg-[#4a4a4a]"
404 |                   }`}
405 |                 >
406 |                   {model.name}
407 |                 </button>
408 |               ))}
409 |             </div>
410 |           </div>
411 |         </div>
412 |       </div>
413 | 
414 |       {/* Content */}
415 |       <div className="flex-1 bg-[#2C2A2F] rounded-xl p-3 sm:p-4 lg:p-6 overflow-y-auto">
416 |         {/* 首次加载骨架屏 */}
417 |         {isLoading && prompts.length === 0 ? (
418 |           <MyPromptsListSkeleton count={5} />
419 |         ) : prompts.length === 0 ? (
420 |           <div className="text-center py-20">
421 |             <p className="text-gray-400 mb-4">
422 |               {activeTab === "all"
423 |                 ? "暂无提示词"
424 |                 : activeTab === "published"
425 |                   ? "暂无已发布的提示词"
426 |                   : "暂无草稿"}
427 |             </p>
428 |             <button
429 |               onClick={() => navigate("/prompt-editor")}
430 |               className="bg-[#3fda8c] text-black px-6 py-3 rounded-lg font-semibold hover:bg-[#35c77a] transition-colors"
431 |             >
432 |               创建第一个提示词
433 |             </button>
434 |           </div>
435 |         ) : (
436 |           <>
437 |             <div className="grid gap-4">
438 |               {prompts.map((prompt) => {
439 |                 const visibility = getVisibilityDisplay(
440 |                   prompt.visibility,
441 |                   prompt.status,
442 |                 );
443 |                 const isDraft = prompt.status === "draft";
444 | 
445 |                 return (
446 |                   <div
447 |                     key={prompt.id}
448 |                     className="bg-[#313135] rounded-[18px] p-6 border border-white/5 hover:border-white/10 transition-all duration-300"
449 |                     style={{ borderWidth: "0.5px" }}
450 |                   >
451 |                     <div className="flex flex-col md:flex-row gap-4 md:gap-6 items-start">
452 |                       {/* Left: Thumbnail */}
453 |                       <div className="flex-shrink-0 w-full md:w-auto">
454 |                         <div className="w-full md:w-[150px] h-[180px] md:h-[210px] rounded-lg overflow-hidden bg-[#1f1f1f]">
455 |                           {prompt.image ? (
456 |                             <img
457 |                               src={prompt.image}
458 |                               alt={prompt.title}
459 |                               className="w-full h-full object-cover"
460 |                             />
461 |                           ) : (
462 |                             <div className="w-full h-full flex items-center justify-center">
463 |                               <svg
464 |                                 width="48"
465 |                                 height="48"
466 |                                 viewBox="0 0 24 24"
467 |                                 fill="none"
468 |                                 stroke="currentColor"
469 |                                 className="text-gray-600"
470 |                               >
471 |                                 <circle
472 |                                   cx="12"
473 |                                   cy="8"
474 |                                   r="5"
475 |                                   strokeWidth="1.5"
476 |                                 />
477 |                                 <path
478 |                                   d="M3 21c0-5 4-8 9-8s9 3 9 8"
479 |                                   strokeWidth="1.5"
480 |                                 />
481 |                               </svg>
482 |                             </div>
483 |                           )}
484 |                         </div>
485 |                       </div>
486 | 
487 |                       {/* Middle: Title, Tags and Actions */}
488 |                       <div className="flex flex-col justify-between md:h-[210px] flex-1 md:flex-none pt-1 gap-4 md:gap-0">
489 |                         {/* Title and Visibility */}
490 |                         <div className="flex flex-col gap-2">
491 |                           <div className="flex items-center justify-between gap-3">
492 |                             <h3 className="text-base sm:text-lg font-semibold text-white">
493 |                               {prompt.title}
494 |                             </h3>
495 |                             <span
496 |                               className={`px-3 sm:px-4 py-1 rounded-md font-semibold text-xs sm:text-sm flex items-center gap-1.5 flex-shrink-0 ${
497 |                                 visibility.color === "green"
498 |                                   ? "bg-[#3fda8c] text-black"
499 |                                   : visibility.color === "gray"
500 |                                     ? "bg-gray-600 text-white border border-gray-500"
501 |                                     : "bg-yellow-600 text-white border border-yellow-500"
502 |                               }`}
503 |                             >
504 |                               {visibility.color === "gray" && (
505 |                                 <Lock size={12} className="sm:w-3.5 sm:h-3.5" />
506 |                               )}
507 |                               {visibility.label}
508 |                             </span>
509 |                           </div>
510 |                           {/* Category and AI Model */}
511 |                           {(prompt.category || prompt.ai_model) && (
512 |                             <div className="flex flex-wrap items-center gap-2">
513 |                               {prompt.category && (
514 |                                 <span className="px-2.5 py-1 rounded-md bg-[#2a2a35] text-[#3fda8c] text-xs font-medium border border-[#3fda8c]/20">
515 |                                   {prompt.category.name}
516 |                                 </span>
517 |                               )}
518 |                               {prompt.ai_model && (
519 |                                 <span className="px-2.5 py-1 rounded-md bg-[#2a2a35] text-blue-400 text-xs font-medium border border-blue-400/20">
520 |                                   {prompt.ai_model.name}
521 |                                 </span>
522 |                               )}
523 |                             </div>
524 |                           )}
525 |                         </div>
526 | 
527 |                         {/* Actions - aligned to bottom */}
528 |                         <div className="flex flex-wrap gap-2 sm:gap-3">
529 |                           {isDraft ? (
530 |                             <button
531 |                               onClick={() => handlePublish(prompt)}
532 |                               className="flex items-center gap-1.5 sm:gap-2 rounded-[18px] border border-[#3fda8c]/30 bg-[#1f1f1f] px-3 sm:px-4 py-2 sm:py-2.5 text-xs sm:text-sm font-semibold text-[#3fda8c] hover:bg-[#252525] hover:border-[#3fda8c]/50 transition-all"
533 |                             >
534 |                               <svg
535 |                                 width="14"
536 |                                 height="14"
537 |                                 viewBox="0 0 24 24"
538 |                                 fill="none"
539 |                                 xmlns="http://www.w3.org/2000/svg"
540 |                                 className="sm:w-4 sm:h-4"
541 |                               >
542 |                                 <path
543 |                                   d="M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13"
544 |                                   stroke="currentColor"
545 |                                   strokeWidth="2"
546 |                                   strokeLinecap="round"
547 |                                   strokeLinejoin="round"
548 |                                 />
549 |                               </svg>
550 |                               <span>发布</span>
551 |                             </button>
552 |                           ) : (
553 |                             <button
554 |                               onClick={() => handleUnpublish(prompt)}
555 |                               className="flex items-center gap-1.5 sm:gap-2 rounded-[18px] border border-gray-500/30 bg-[#1f1f1f] px-3 sm:px-4 py-2 sm:py-2.5 text-xs sm:text-sm font-semibold text-gray-400 hover:bg-[#252525] hover:border-gray-500/50 transition-all"
556 |                             >
557 |                               <EyeOff size={14} className="sm:w-4 sm:h-4" />
558 |                               <span>设为私人</span>
559 |                             </button>
560 |                           )}
561 | 
562 |                           <button
563 |                             onClick={() => handleEdit(prompt.id)}
564 |                             className="flex items-center gap-1.5 sm:gap-2 rounded-[18px] border border-white/10 px-3 sm:px-4 py-2 sm:py-2.5 text-xs sm:text-sm font-semibold text-white bg-[#3f3f3f] hover:bg-[#4a4a4a] transition-colors"
565 |                           >
566 |                             <Edit size={14} className="sm:w-4 sm:h-4" />
567 |                             <span>编辑</span>
568 |                           </button>
569 |                           <button
570 |                             onClick={() => handleDelete(prompt)}
571 |                             className="flex items-center gap-1.5 sm:gap-2 rounded-[18px] border border-white/10 px-3 sm:px-4 py-2 sm:py-2.5 text-xs sm:text-sm font-semibold text-white hover:bg-[#252525] transition-colors"
572 |                           >
573 |                             <Trash2 size={14} className="sm:w-4 sm:h-4" />
574 |                             <span>删除</span>
575 |                           </button>
576 |                         </div>
577 |                       </div>
578 | 
579 |                       {/* Right side - Stats */}
580 |                       <div className="flex-1 flex flex-col md:min-h-[210px] justify-center py-1 w-full md:w-auto">
581 |                         {/* Stats */}
582 |                         <div className="flex gap-6 sm:gap-8 lg:gap-16 justify-center md:justify-end items-center">
583 |                           <div className="flex flex-col items-center">
584 |                             <div className="text-xl sm:text-2xl lg:text-[30px] font-bold text-white mb-1 leading-none">
585 |                               {prompt.statistics.views}
586 |                             </div>
587 |                             <div className="text-[10px] sm:text-xs text-gray-500 leading-tight">
588 |                               浏览量
589 |                             </div>
590 |                           </div>
591 |                           <div className="flex flex-col items-center">
592 |                             <div className="text-xl sm:text-2xl lg:text-[30px] font-bold text-white mb-1 leading-none">
593 |                               {prompt.statistics.uses}
594 |                             </div>
595 |                             <div className="text-[10px] sm:text-xs text-gray-500 leading-tight">
596 |                               使用次数
597 |                             </div>
598 |                           </div>
599 |                           <div className="flex flex-col items-center">
600 |                             <div className="text-xl sm:text-2xl lg:text-[30px] font-bold text-white mb-1 leading-none">
601 |                               {prompt.statistics.favorites}
602 |                             </div>
603 |                             <div className="text-[10px] sm:text-xs text-gray-500 leading-tight">
604 |                               收藏数
605 |                             </div>
606 |                           </div>
607 |                         </div>
608 |                       </div>
609 |                     </div>
610 |                   </div>
611 |                 );
612 |               })}
613 |             </div>
614 |           </>
615 |         )}
616 |       </div>
617 | 
618 |       {/* Delete Confirm Dialog */}
619 |       <ConfirmDialog
620 |         isOpen={showDeleteDialog}
621 |         onClose={() => setShowDeleteDialog(false)}
622 |         onConfirm={confirmDelete}
623 |         title="删除提示词"
624 |         message={`确定要删除「${selectedPrompt?.title || ""}」吗？此操作无法撤销。`}
625 |         confirmText={isDeleting ? "删除中..." : "删除"}
626 |         cancelText="取消"
627 |         type="delete"
628 |       />
629 | 
630 |       {/* Publish Confirm Dialog */}
631 |       <ConfirmDialog
632 |         isOpen={showPublishDialog}
633 |         onClose={() => setShowPublishDialog(false)}
634 |         onConfirm={confirmPublish}
635 |         title="发布提示词"
636 |         message={`确定要发布「${selectedPrompt?.title || ""}」吗？发布后任何人都可以看到您分享的提示词。`}
637 |         confirmText={isPublishing ? "发布中..." : "发布"}
638 |         cancelText="取消"
639 |         type="publish"
640 |       />
641 | 
642 |       {/* Unpublish Confirm Dialog */}
643 |       <ConfirmDialog
644 |         isOpen={showUnpublishDialog}
645 |         onClose={() => setShowUnpublishDialog(false)}
646 |         onConfirm={confirmUnpublish}
647 |         title="设为私人"
648 |         message={`确定要将「${selectedPrompt?.title || ""}」设为私人吗？设为私人后将变为草稿状态，不再公开显示。`}
649 |         confirmText={isPublishing ? "设置中..." : "设为私人"}
650 |         cancelText="取消"
651 |         type="delete"
652 |       />
653 |     </div>
654 |   );
655 | }
656 |

--------------------------------------------------------------------------------

出错了

88 | {title} 89 |

API 配置

231 | 本地加密存储 232 |

提示词