ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

ChatGPT-Shortcut 我的收藏(My Collection)实战指南:标签整理与拖拽排序的完整实现解析

ChatGPT-Shortcut 我的收藏(My Collection)实战指南:标签整理与拖拽排序的完整实现解析 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-Shortcut 之后你可以把喜欢的提示词像书签一样收进「我的收藏」My Collection通过自定义标签按主题归类、用拖拽排序调整卡片位置从而打造一本随取随用的个人提示词词典。本文以韩文版用户指南 i18n/ko/docusaurus-plugin-content-docs/current/guides/my-collection.md 为核心骨架结合仓库源码逐层拆解视图切换、收藏增删、过滤搜索、标签管理与拖拽排序的完整工作流并说明在线版与离线版的数据存储差异让读者既会用、也理解背后的实现原理。概述我的收藏是什么登录后「我的收藏」视图会将两类内容聚合在一个列表中收藏的提示词通过卡片上的心形「收藏」按钮加入的提示词包括精选提示词库中的条目与社区提示词自建的提示词自己创建并保存到账号下的自定义提示词它们同样显示在收藏视图中。在这个视图里你可以拖拽卡片调整顺序、给条目贴自定义标签、按标签过滤筛选并在需要时快速取出使用。:::tip[在线版与离线版]在线版需登录的收藏数据保存在服务器端而离线部署版见 docs/deploy/offline.md将同样的数据存放在浏览器 localStorage 中无需登录即可使用功能在两端完全一致。:::从源码结构看收藏视图的核心组件位于 src/components/user/MySpace.tsx它接收用户数据并通过 src/hooks/useFavorite.tsx 提供的收藏操作与 src/api/myspace.ts 暴露的排序、标签接口共同完成整个交互闭环。视图切换我的收藏与探索首页顶部的视图切换按钮用于在两种模式间切换对应的状态定义在 src/contexts/ViewModeContext.tsxexport type ViewMode collection | explore;我的收藏collection聚合查看已收藏与自建的提示词探索explore浏览公共精选提示词库。浏览器会记住你最后一次查看的视图重新进入时自动打开同一画面。从实现上看ViewModeContext通过 React Context 在页面级共享状态MySpace组件在 collection 模式下渲染而首页的全局搜索栏在收藏视图下不再挂载避免出现两个Ctrl K快捷键监听器互相干扰。收藏总览统计卡片与等级徽章我的收藏视图顶部的摘要卡片展示四项核心数据这些数据通过onDataLoaded回调从 MySpace.tsx 中计算得出总览 / 我的提示词 / 收藏 / 自定义标签四类统计等级徽章L0–L9等级由「向社区共享的提示词数量」决定——分享越多等级越高。等级体系实现在 src/components/LevelSystem.tsx 中其阈值曲线定义如下export const LEVEL_THRESHOLDS [0, 1, 3, 8, 18, 35, 60, 100, 160, 260];十个等级依次命名为萌新探索者L0、青铜L1、白银L2、黄金L3、铂金L4、钻石L5、蓝宝石L6、红宝石L7、翡翠L8与星辉L9。源码注释指出L9需共享 260 个提示词被定位为「传奇」级别。等级的视觉呈现由LevelIcon组件以纯 SVG 几何图形累积绘制多边形边数随等级从 3 增加到 8中高等级逐步叠加内嵌副多边形、中心点、粗描边与辐射光线视觉复杂度随等级递增且不依赖 emoji 字体跨平台渲染稳定。加入收藏点击任意提示词卡片上的心形「收藏」按钮即可将其加入我的收藏。其底层调用链为卡片触发 →useFavorite().addFavorite(id, isComm)→ src/api/favorites.ts 中的patchFavorites发送PATCH /favorites/me。收藏社区提示词时会同时为它投上一票赞成票帮助好内容触达更多用户。这一点在 src/hooks/useFavorite.tsx 中有明确实现// 社区提示词异步投赞成票不阻塞 if (isComm) { voteOnUserPrompt(id, upvote).catch(() {}); }增量同步与并发安全设计favorites.ts的注释表明历史版本的全量数组 PUT 方案已被删除所有路径统一走增量patchFavoritesdelta-based mutationexport async function patchFavorites(ops: FavoriteDeltaOps): PromiseFavoriteDeltaResponse { const response await apiClient.patchFavoriteDeltaResponse(/favorites/me, ops); return response.data; }其中FavoriteDeltaOps包含add与remove两个字段分别针对精选收藏loves与社区收藏commLoves服务端会在数据库当前状态上做合并因此多设备并发编辑不会丢失条目响应中返回服务端合并后的权威 ID 数组loves/commLoves与本次真正新增的added列表客户端据此调整本地 items避免每次操作都重传完整收藏列表。在 useFavorite.tsx 中还有三层更细致的工程处理乐观更新PATCH 发出前先在本地插入/移除条目走syncMySpaceState统一写入lscache-user_auth与lscache-myspace让心形按钮即时反馈失败时按「逆操作」回滚——基于当前状态撤销本次操作而不是恢复操作前快照这样多次连续点击时不会互相覆盖单调序号协调快速连续点击同一卡片会发出多个 PATCH响应可能乱序到达。patchSeqRef记录单调递增序号只有最新一次操作的响应才允许写回本地避免旧响应覆盖新状态登出兜底若 PATCH 期间用户登出auth.data为空直接放弃 reconcile不做任何写入。此外收藏社区提示词时前端会先本地校验「不能收藏自己的提示词」已拥有 ID 列表来自userprompts省去一次注定返回 403 的请求且提示语走前端 i18n后端只能返回英文pending 状态下则由服务端兜底校验。取消收藏在我的收藏视图中再次点击卡片上的心形图标即可取消收藏。移除流程与加入对称removeFavorite构造{ add: [], remove: [id] }的增量操作并 PATCH同样先乐观更新、失败回滚。为了防御误触收藏视图里的移除操作默认经过confirmRemoveFavorite弹出一个居中确认对话框标题为「移除收藏」确认后才真正执行删除。过滤与搜索收藏视图顶部的工具栏支持三种快速定位方式对应 MySpace.tsx 中FilterBar组件的实现全部 / 提示词 / 收藏三段式切换Segmented按条目类型过滤点击自定义标签 chip按标签过滤单选点击已选中的标签即取消换选其他标签会直接替换当前选择在搜索框中按关键词搜索可随时按Ctrl KmacOS 为⌘ K聚焦搜索框Esc 退出焦点拼音输入法候选词状态下按 Esc 不会误触退出。搜索范围覆盖卡片的标题、描述、备注remark、说明notes以及多语言嵌套字段SUPPORTED_LANGUAGES中的各语言子对象因此用任意支持的语言关键词都能命中。一个值得注意的细节是当本地收藏无结果时组件会自动降级搜索精选提示词库仍无结果再尝试搜索社区提示词并以「为你推荐」的形式展示推荐卡片避免搜索落空后的空白页。自定义标签为收藏的提示词贴上标签可以按主题把它们整理得井井有条。标签的完整数据结构在 src/api/favorites.ts 的MySpaceShape中定义customTags: Array{ id: string; name: string; color: string; order: number };添加标签点击工具栏中的「标签管理」输入标签名称并从11 种预设颜色中挑选一种保存后即可在过滤栏中直接使用。预设颜色定义在 MySpace.tsx 中取自 Ant Design 的色板同时支持深浅色模式const PRESET_COLORS [magenta, red, volcano, orange, gold, lime, green, cyan, blue, geekblue, purple];添加标签时默认选中gold第 5 个每添加一个会自动切换到下一种颜色方便连续建多个标签时视觉上自动区分。标签管理在「标签管理」对话框中你可以对每个标签执行以下操作重命名标签更换标签颜色同样 11 种预设色点击色块弹出下拉选择器删除标签。删除时允许一次性移除多个标签。管理弹窗内还提供本地空态提示「暂无自定义标签」并且保存/取消均不直接改动服务器数据——只有点击「保存」后handleManageTagsSave才会将完整的{ definitions, itemTags }结构通过PATCH /favorites/custom-tags提交见 src/api/myspace.ts 中的updateCustomTags成功后再同步本地状态与模块级缓存。为单张卡片分配标签除了在管理弹窗中批量维护标签定义你还可以在每张卡片上直接分配标签点击卡片上的标签图标Tooltip 提示「分配标签」展开下拉菜单勾选/取消对应标签。这里采用「关闭即提交」的编辑会话模型——点选标签只是纯本地 toggle关闭下拉菜单时才统一调用一次PATCH /favorites/custom-tags若打开后未做任何改动则跳过 API 请求。该设计同时配套了失败回滚恢复打开时的原始标签与卸载兜底用户在下拉展开时刷新或跳转页面beforeunload期间以 fire-and-forget 方式提交最大限度避免标签状态与服务器漂移。拖拽排序在我的收藏视图中可以自由拖拽卡片调整顺序按住卡片左侧边缘的拖拽手柄移动到目标位置后松手新顺序自动保存在线版保存到服务器离线版保存到浏览器。拖拽基于dnd-kit实现在 MySpace.tsx 中配置了PointerSensor与支持键盘方向键操作的KeyboardSensor配合sortableKeyboardCoordinates因此无障碍用户也能通过键盘完成排序。拖拽结束后调用 myspace.ts 中的updateMySpaceOrderexport async function updateMySpaceOrder(order: Array{ id: number; type: string; source: string }) { await apiClient.patch(/favorites/myspace-order, { order }); clearMySpaceCache(); }排序逻辑上有几个值得留意的实现要点筛选态下的正确排序无任何筛选条件时直接对完整列表arrayMove存在过滤/搜索条件时则在完整spaceItems中定位被拖条目与目标条目的真实下标后再移动绝不用过滤后的子集覆盖完整列表乐观更新与回滚拖拽后先本地更新再发送请求保存失败时恢复拖拽前快照同时弹出「排列保存失败」提示保证界面与提示自洽本地顺序同步保存成功后前端按新顺序重排userAuth.data.items不走GET /myspace刷新使后续收藏操作useFavorite以 items 作为 reconcile 基准不会丢失刚调整的拖拽顺序。在线版与离线版的数据存储差异我的收藏在两种部署形态下的数据落点不同但功能体验一致数据在线版需登录离线版浏览器 localStorage收藏列表服务器端loves/commLoveslocal_favorites收藏顺序服务器端 mySpaceOrderlocal_myspace_order自定义标签服务器端 customTagslocal_custom_tags自建提示词服务器端 userpromptslocal_user_prompts离线版的完整说明见 docs/deploy/offline.md它是纯静态站点部署在内网服务器后每位成员用自己的浏览器访问收藏、排序与标签全部存放在各自的 localStorage 中互不影响无需注册账户。在线版数据则通过 src/api/myspace.ts 中的getMySpace拉取并借助 ETagIf-None-Match/ 304 Not Modified做条件请求缓存优化命中 304 时直接续期本地缓存非 401 的瞬时失败5xx、网络拒绝、DNS 抖动会降级返回缓存但 401token 失效绝不返回缓存以免造成「僵尸登录」假象。在线版与离线版的收藏数据还可通过「我的账户 → 数据管理 → 导入/导出」互通迁移导出文件格式一致导入时按标题去重社区收藏会自动转为本地提示词自定义标签追加合并而非覆盖。常见问题收藏的数据会丢失吗在线版数据保存在服务器登录同一账号即可恢复离线版数据在浏览器 localStorage 中清除浏览器数据、使用无痕模式或更换电脑都会导致丢失建议通过「我的账户 → 数据管理 → 导出数据」定期备份 JSON 文件。为什么收藏社区提示词会看到「已添加收藏」同时它还在社区页收藏社区提示词会附带投出一张赞成票异步、不阻塞主流程这是鼓励优质内容传播的设计与收藏本身是两个独立动作。拖拽排序在筛选状态下会出错吗不会。源码在过滤/搜索生效时仍以完整列表为基准计算真实位置拖拽结果始终落在正确的位置且会自动保存到服务器或离线版浏览器本地。标签颜色只有 11 种可选吗是的预设色板固定为 Ant Design 的 11 种语义色magenta 到 purple足够在视觉上区分大部分主题场景每个标签可随时更换颜色。相关文档自定义提示词韩文版用户指南创建、编辑与分享自己的提示词包含团队协作与导入导出工作流界面指南韩文版用户指南搜索与过滤的完整操作账户管理韩文版用户指南登录与账号设置离线部署说明离线版数据存储与导入导出的完整说明核心源码src/components/user/MySpace.tsx、src/hooks/useFavorite.tsx、src/api/favorites.ts、src/api/myspace.ts、src/components/LevelSystem.tsx赞分享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-Shortcut「我的收藏」实战指南收藏、标签分类、拖拽排序及其底层实现ChatGPT Shortcut「我的收藏」实战指南收藏、标签分类、拖拽排序及其底层实现 登录 ChatGPT ShortcutAI Short后「我的AI 应用提示工程人工智能前端ChatGPT-Shortcut 我的收藏My Collection标签分类、拖拽排序与本地/云端同步机制详解ChatGPT Shortcut 我的收藏My Collection标签分类、拖拽排序与本地/云端同步机制详解 ChatGPT Shortcut 的 MyAI 应用提示工程人工智能前端ChatGPT-Shortcut「我的收藏」完全指南标签分类、拖拽排序与数据同步实现解析ChatGPT Shortcut「我的收藏」完全指南标签分类、拖拽排序与数据同步实现解析 本指南围绕 ChatGPT ShortcutAI Short开源AI 应用提示工程人工智能前端上一篇AmbientRun/Ambient项目深度解析下一代多人在线游戏开发平台下一篇Lasagne深度学习框架安装指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表