ChatGPT-Shortcut「我的收藏」实战指南:收藏、标签分类、拖拽排序及其底层实现
AI 应用提示工程人工智能前端【免费下载链接】ChatGPT-ShortcutStop writing prompts from scratch — a searchable prompt library for ChatGPT, Claude, Gemini and Cursor · Русский 한국어 العربية हिन्दी ไทย 别再从头写提示词现成的拿来就用好用的收进自己的库项目地址https://gitcode.com/gh_mirrors/ch/ChatGPT-Shortcut点击查看免费下载登录 ChatGPT-ShortcutAI Short后「我的收藏」MySpace视图让你像管理书签一样组织提示词拖拽排序、自定义标签、按标签筛选。这篇指南完整覆盖该视图的全部能力——视图切换、收藏概览与等级徽章、添加/移除收藏、筛选搜索、自定义标签、拖拽排序——并结合src目录下的源码实现解释收藏的 delta 同步、乐观更新与回滚机制、标签持久化端点以及拖拽排序如何与后端/favorites/myspace-order对接帮助你在自部署或二次开发时准确理解其行为边界。在线版与离线版数据存哪里这是使用「我的收藏」前必须弄清的前提在线版收藏数据保存在服务器需要登录。离线部署版收藏数据保存在浏览器本地localStorage无需登录功能一致。两种形态的功能面相同统计、标签、拖拽、搜索差异只在存储位置——后文涉及保存的步骤在线版落到服务端离线版落到浏览器本地。离线部署方式见 离线部署文档。视图切换我的收藏 与 提示词库页面顶部的视图切换按钮提供两种模式我的收藏collection展示你的收藏 你创建的自定义提示词提示词库explore浏览公共精选提示词。浏览器会记住你最后使用的视图下次访问自动切回。从源码看视图状态由 ViewModeContext 提供ViewMode只有collection | explore两个取值切换按钮渲染在 UserStatus 组件 中点击后调用setViewMode在两模式间翻转按钮文案随当前模式互换处于我的收藏时显示提示词库反之亦然。另外通过「创建提示词」成功新建一条提示词后会回调自动切回我的收藏视图让新内容立即可见。收藏概览与等级徽章我的收藏视图顶部有一张概览卡一眼看清你的数据总计 / 我的提示词 / 收藏 / 自定义标签四项统计一枚等级徽章L0–L9——根据你分享到社区的提示词数量升级分享越多等级越高。四项统计并非硬编码MySpace 组件 在数据加载完成后通过onDataLoaded回调向上抛出真实的totalItems / totalPrompts / totalFavorites / totalTags计数统计口径是加载后的实际条目数按type区分为prompt与favorite。等级体系由 LevelSystem 组件 实现共 10 级阈值曲线分享提示词数如下等级名称阈值分享数 ≥L0萌新探索者0L1青铜1L2白银3L3黄金8L4铂金18L5钻石35L6蓝宝石60L7红宝石100L8翡翠160L9星辉260LEVEL_THRESHOLDS [0, 1, 3, 8, 18, 35, 60, 100, 160, 260]各级跨距呈约 1.6–2 倍递增由getLevelInfo(sharedCount)返回当前等级、主题色与下一级阈值LevelIcon会随等级累积绘制更复杂的几何图形L0 三角形逐边增加L7 起加中心点L9 增加放射光线作为徽章的视觉表达。添加收藏与移除收藏操作方式添加在任意提示词卡片上点爱心「收藏」按钮移除在我的收藏视图中点击卡片上的爱心图标取消收藏会弹出确认框。源码行为delta 请求 乐观更新 自动投票收藏的增删统一走 useFavorite Hook其关键行为值得展开乐观更新点击后立即在本地修改状态syncMySpaceState写入lscache-user_auth与lscache-myspaceUI 零延迟反馈服务器响应到达后再校准。delta 协议实际请求是PATCH /favorites/me请求体只携带增量操作FavoriteDeltaOpsloves/commLoves各自的add/remove数组而不是重传整个收藏列表服务端与数据库当前状态合并后返回合并后的权威loves/commLoves数组和本次真正新增的added条目客户端据此重建本地列表。这种设计使多设备并发编辑不会互相覆盖条目。乱序防护快速连续切换收藏会发出多个 PATCH响应可能乱序到达。Hook 内用单调序号patchSeqRef保证只有最新一次操作的响应才写本地状态避免旧响应把心形图标打乱、与服务端不一致。失败回滚请求失败时执行逆操作回滚在当前状态上撤销该次操作而不是恢复旧快照保证并发多次点击时状态不互相破坏。自动投票收藏社区提示词时会异步补投一次赞成票voteOnUserPrompt(id, upvote)不阻塞主流程帮助优质内容获得更多曝光这就是文档中收藏社区提示词会自动投一票赞成的实现来源。本地预校验不能收藏自己创建的提示词——客户端在发请求前先检查userprompts列表命中则直接提示不能收藏自己的提示词省掉一次注定失败的请求。移除收藏入口handleRemoveFavorite调用confirmRemoveFavorite先弹确认框再走同样的 delta 流程。筛选与搜索收藏视图顶部的工具栏FilterBar 组件可以快速定位内容全部 / 提示词 / 收藏三档切换Segmented控件按类型筛选对应filter状态值all | prompt | favorite自定义标签芯片点击按标签筛选。注意源码中是单选逻辑——再次点击已选中的标签会取消筛选setSelectedTags([])选中其他标签则替换搜索框按关键词查找桌面端Ctrl KmacOS 为⌘K聚焦Esc退出聚焦清空输入立即触发搜索。搜索的匹配范围从 filteredItems 计算逻辑 看筛选按类型 → 标签 → 关键词三级叠加且均为纯前端本地过滤。关键词匹配覆盖顶层字段title、description、remark、notes嵌套的多语言字段遍历SUPPORTED_LANGUAGES对每个语言的title/description/remark做小写包含匹配。无结果时的降级推荐当本地筛选结果为空且存在搜索词时组件会走降级搜索先本地搜索精选提示词库searchCardsLocally最多取 12 条精选库也无结果时再调用getCommPrompts按upvoteDifference降序搜索社区提示词同样 12 条并在界面上标注推荐来源。也就是说搜不到自己的收藏不等于搜不到提示词视图会顺势给你推荐。自定义标签给收藏的提示词打标签是分类的核心手段。标签的数据结构CustomTag 类型 定义了标签的全部字段interface CustomTag { id: string; // 形如 tag_1698765432101创建时取时间戳 name: string; // 标签名称 color: string; // 11 种预设色之一 order: number; // 创建顺序 }预设颜色是 11 个 Ant Design 语义色PRESET_COLORSmagenta / red / volcano / orange / gold / lime / green / cyan / blue / geekblue / purple默认色为gold且每新增一个标签后自动轮转到下一个颜色避免连续标签颜色雷同。添加标签点击工具栏的「管理标签」输入标签名称从 11 种预设颜色中选一个点击「添加」支持回车保存后即可在筛选栏按该标签过滤。管理标签在「管理标签」弹窗TagManagerModal中可以改标签名称行内输入框直接编辑换标签颜色点击颜色 Tag 弹出 11 色下拉删除标签危险按钮红色删除图标。标签持久化与关闭即提交标签的保存时机值得注意给某张卡片分配标签用的是卡片上的标签下拉菜单菜单是一次编辑会话——勾选/取消勾选标签只做本地 toggle下拉菜单关闭时才真正提交saveTagAssignment若打开后没有任何改动则跳过 API 调用若提交失败回滚到打开下拉那一刻的标签状态。此外还有一个兜底下拉菜单开着时直接刷新/离开页面卸载钩子会 fire-and-forget 地把当前分配发出去。所有标签变更定义 分配统一通过 updateCustomTags 发出PATCH /favorites/custom-tags请求体包含两部分{ definitions: CustomTag[], // 标签定义全量 itemTags: Recordstring, string[] // 组合 keytype_source_id→ 标签 id 数组 }即定义与分配分别建模定义是全量覆盖分配按条目记录。拖拽排序在我的收藏视图中支持拖拽调整卡片顺序拖动卡片左侧的拖拽手柄移到目标位置后释放新顺序自动保存在线版存服务器离线版存浏览器本地。实现要点dnd-kit 顺序端点拖拽由dnd-kit/corednd-kit/sortable驱动同时配置了PointerSensor与KeyboardSensor键盘可达性碰撞检测使用closestCenter。handleDragEnd 的处理流程筛选态下的正确移动无筛选条件时直接对全量列表arrayMove若当前存在类型/标签/搜索筛选则先在完整列表中定位两个条目的真实下标再移动保证筛选视图下的拖拽不会错误重排未显示的条目乐观保存先本地更新卡片位置再调用 updateMySpaceOrder 发出PATCH /favorites/myspace-order请求体为完整顺序数组[{ id, type, source }]用数字sourceId而非前端组合 ID成功提示排列已保存并把新顺序同步回userAuth.data.items前端按顺序重排现有 items无需重新 GET失败卡片回滚到拖动前的位置提示排列保存失败保证界面与提示一致。数据加载与缓存策略理解保存行为之外还有两个容易被忽略的性能机制ETag 协商缓存getMySpace 请求GET /myspace时携带上次的If-None-Match收到304则复用本地缓存并续期5xx/网络抖动时降级返回缓存但401 绝不返回缓存避免 token 失效后出现僵尸登录假象视图切换缓存模块级_spaceItemsCache在提示词库 → 我的收藏来回切换时避免重新拉取详情仅当用户、条目结构哈希type_source_id序列均匹配时才命中缓存防止 explore 视图中新收藏的条目导致缓存失效误判。相关文档自定义提示词 —— 创建和管理提示词收藏中type: prompt的条目即来源于此支持编辑与删除也可将失效收藏转为私有提示词界面说明 —— 搜索和筛选账户管理 —— 登录和设置。赞分享AI 应用提示工程人工智能前端【免费下载链接】ChatGPT-ShortcutStop writing prompts from scratch — a searchable prompt library for ChatGPT, Claude, Gemini and Cursor · Русский 한국어 العربية हिन्दी ไทย 别再从头写提示词现成的拿来就用好用的收进自己的库项目地址https://gitcode.com/gh_mirrors/ch/ChatGPT-Shortcut点击查看免费下载相关推荐如何实现Instagram收藏夹排序基于android-advancedrecyclerview的拖拽功能终极指南如何实现Instagram收藏夹排序基于android advancedrecyclerview的拖拽功能终极指南 想要为你的Android应用添加类似Ins移动开发UI组件如何快速掌握CoolProp热力学性质计算的终极开源库指南 如何快速掌握CoolProp热力学性质计算的终极开源库指南 CoolProp是一个强大且灵活的开源软件库专门用于计算流体的各种热力学性质如焓、熵、比移动开发UI组件Claude Code 使用指南把 AI 助手装进终端3 分钟跑通日常开发Claude Code 使用指南把 AI 助手装进终端3 分钟跑通日常开发 Claude Code 是 Anthropic 出品的终端 AI 编程助手agAI 应用AI 技能/插件开发工具上一篇wandb多语言API使用Java/JavaScript等语言访问wandb下一篇高效协作gh_mirrors/re/resume模板团队开发流程与工具集成创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考