ARTICLE DETAIL

资讯详情

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

AI Short 我的收藏(My Collection)指南:收藏管理、自定义标签与拖拽排序

AI Short 我的收藏(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点击查看免费下载登录 AI Short 后「我的收藏」视图为常用 AI 提示词ChatGPT、Claude、Gemini、Cursor 等场景提供了一套类似书签管理的个人空间拖拽排序、自定义标签、按标签过滤让收藏的提示词像自己的资料库一样随手可取你创建的提示词也会一并显示在这里。本文以仓库中 i18n/ru/docusaurus-plugin-content-docs/current/guides/my-collection.md 文档为主线结合 src/components/user/myspace 下的前端实现源码完整讲解视图切换、收藏概览、添加/移除、筛选搜索、标签体系与拖拽排序读完后你将掌握该功能每个入口的用法及其背后的实现机制。功能定位与数据存储在线版与离线版「我的收藏」的核心定位是把散落在公共提示词库中的优质提示词收进个人空间并允许你用标签和顺序为它们建立自己的组织方式。它在两种部署形态下数据存储位置不同但功能完全一致在线版收藏数据存储在服务器端需要登录账号跨设备、跨浏览器保持一致离线部署版收藏数据存储在浏览器本地存储localStorage无需登录相关说明见离线部署文档。在线版的后端数据形态可以从 src/api/favorites.ts 中的MySpaceShape接口看到items是收藏条目列表每条含id、type、source、updatedAt、share、tagscustomTags是用户自定义标签定义含id、name、color、order。值得注意的是收藏操作采用delta 增量同步而非整表覆盖patchFavorites只向PATCH /favorites/me发送add/remove的 id 集合服务端与当前数据库状态合并因此多设备并发编辑不会互相覆盖丢失条目见 src/api/favorites.ts。视图切换我的收藏与提示词库页面顶部的视图切换按钮提供两种浏览模式我的收藏collection展示你的收藏 你创建的自定义提示词提示词库explore文档俄文版称「Обзор」浏览公共精选提示词。浏览器会记住你最后一次使用的模式下次访问自动回到上次的视图。这一记忆行为对应 src/contexts/ViewModeContext.tsx 中的ViewMode类型collection | explore它是全站共享的视图模式上下文首页与收藏页通过它协调渲染——例如在收藏视图下首页不会挂载 SearchBar 搜索组件以避免出现双重的Ctrl K快捷键监听见 src/components/user/myspace/FilterBar.tsx。收藏概览四项统计与等级徽章我的收藏视图顶部有一张概览卡让你一眼看清个人数据规模总计全部条目/我的提示词/收藏/自定义标签四项统计一枚等级徽章L0–L9——依据你分享到社区的提示词数量升级分享越多、等级越高。统计数据的来源可在 src/components/user/myspace/useSpaceItems.ts 中看到数据加载完成后onDataLoaded回调会分别统计totalItems、totalPrompts、totalFavorites、totalTags四项数值。等级体系的完整设计在 src/components/LevelSystem.tsx 中定义L0–L9 共 10 级升级阈值曲线为0 / 1 / 3 / 8 / 18 / 35 / 60 / 100 / 160 / 260即分享 1、3、8、18、35、60、100、160、260 个提示词分别进入 L1–L9。等级命名也颇具体系感L0 为「萌新探索者」L1–L5 是金属阶青铜/白银/黄金/铂金/钻石L6–L8 是宝石阶蓝宝石/红宝石/翡翠L9 为「星辉」顶级见 LevelSystem.tsx 中的LevelName组件。等级徽章的视觉复杂度也随级别累积边数递增、嵌套多边形、中心点、粗描边与径向射线逐步叠加见 LevelSystem.tsx 的LevelIcon。添加收藏一键爱心在任意提示词卡片上点击爱心「收藏」按钮即可将该提示词加入你的收藏。收藏社区提示词时会自动为其投上一票赞成相当于点赞帮助优质内容获得更多曝光添加完成后该提示词会出现在「我的收藏」视图中可按标签归类、参与拖拽排序。从数据流看收藏动作最终通过 patchFavorites 以增量方式提交add操作服务端返回合并后的权威 id 数组loves/commLoves与真正新增的条目added前端据此更新本地列表与缓存避免每次收藏都重传完整收藏清单。移除收藏在「我的收藏」视图中点击卡片上的爱心图标即可取消收藏该提示词会立即从收藏列表中移除。移除操作同样走增量remove提交服务端合并后返回剩余 id 列表本地状态同步更新。筛选与搜索收藏视图顶部的工具栏提供三种定位方式帮助你快速找到目标内容三档切换全部 / 提示词 / 收藏按条目类型过滤自定义标签芯片点击某个标签即按该标签过滤搜索框按关键词查找桌面端按下Ctrl KmacOS 为⌘K即可将光标聚焦到搜索框按Esc退出聚焦交互遵循终端 command palette 惯例。这些交互均可在 src/components/user/myspace/FilterBar.tsx 中找到实现依据三档筛选由 antdSegmented组件承载三个选项分别对应FilterType的all | prompt | favorite类型定义见 src/components/user/myspace/types.ts筛选状态通过filter/setFilter受控传递标签芯片使用原生button而非span标签并带aria-pressed表达「选中」状态确保键盘用户与读屏用户都能正常操作标签为单选切换——再次点击已选中的标签会取消筛选见 FilterBar.tsxCtrl K/⌘K全局监听在组件挂载时注册、卸载时移除聚焦到搜索输入框见 FilterBar.tsx搜索框清空时立即重置查询输入后按回车或点击搜索按钮提交关键词见 FilterBar.tsx。自定义标签给收藏的提示词打上自定义标签是建立个人提示词资料库最核心的组织手段。添加标签点击工具栏的「管理标签」按钮输入标签名称并从11 种预设颜色中选一个保存后新标签即出现在筛选栏中可点击它按标签过滤收藏。管理标签在「管理标签」弹窗中可以改名直接修改标签名称换色更换标签颜色同样是 11 种预设色删除删除不再需要的标签。11 种预设颜色在 src/components/user/myspace/TagManagerModal.tsx 中硬编码为 antd 预设色板magenta、red、volcano、orange、gold、lime、green、cyan、blue、geekblue、purple。新标签默认色为gold添加后自动切换到色板中下一个颜色方便连续创建不同颜色的标签见 TagManagerModal.tsx。标签的数据结构由 src/components/user/myspace/types.ts 中的CustomTag接口定义id、name、color、orderorder用于记录标签在筛选栏中的排列顺序。实现细节上色块使用var(--ant-color-6)CSS 变量而非固定 hex 值这样浅色/暗色主题下色块与最终渲染效果保持一致色板下拉触发器与标签筛选按钮同样使用真实button保证键盘可达性见 TagManagerModal.tsx。标签分配与保存机制标签分配采用「关闭即提交」的编辑会话模型save on dropdown close点击标签只是在本地切换关闭下拉框时一次性把变更提交给服务端若打开下拉后没有做任何改动则跳过 API 请求。提交时通过updateCustomTags将标签定义definitions与每个条目上的标签itemTags一起发送见 src/components/user/myspace/useTagAssignment.ts。此外还有两层兜底提交失败时回滚到打开下拉那一刻的标签状态用户在标签下拉仍展开时刷新页面或跳转路由组件卸载阶段会以 fire-and-forget 方式补发一次提交见 useTagAssignment.ts。拖拽排序在「我的收藏」视图中你可以通过拖拽自由调整卡片的排列顺序按住卡片左侧的拖拽手柄将其拖到目标位置后释放新的顺序自动保存——在线版存入服务器离线版存入浏览器本地存储。拖拽能力基于dnd-kit实现封装在 src/components/user/myspace/SortableCard.tsxuseSortable返回attributes、listeners、setNodeRef、transform、transition等拖拽产物通过sortableprop 下发给提示词卡片拖拽过程中卡片以半透明opacity 0.5呈现。一个值得注意的工程优化是SortableCard只在懒加载的 MySpace chunk 内出现公共卡片组件自身不静态引入dnd-kit从而避免把约 20KBgzip的拖拽库打包进每一个渲染卡片的页面见 SortableCard.tsx 的注释。顺序的持久化可以追溯到 src/api/favorites.ts 的注释收藏列表以服务端返回的items顺序为准由mySpaceOrder维护前端通过 delta 操作与本地缓存保持同步拖拽产生的顺序变更会反映到服务端合并后的条目顺序中。数据加载侧useSpaceItems.ts则使用双哈希策略判断数据是否变化structuralHash增删/排序变化决定是否显示骨架屏完整hash含updatedAt决定是否跳过加载并在视图切换时借助模块级缓存即时呈现数据。数据加载与缓存机制进阶「我的收藏」的数据加载并不简单src/components/user/myspace/useSpaceItems.ts 展示了其背后的细节从用户认证数据userAuth.data.items中按typeprompt与sourcecard/community拆分为三类 id通过Promise.all批量拉取提示词、卡片与社区条目的详情且大部分会命中 AuthProvider 已预取的数据缓存见 useSpaceItems.ts组装时严格按照后端items的顺序构建列表保证拖拽后的顺序在重新进入视图时仍然保持见 useSpaceItems.ts切换用户时清空模块缓存与本地状态避免显示上一个用户的数据见 useSpaceItems.ts。小结「我的收藏」是 AI Short 把「公共提示词库」转化为「个人提示词资产」的关键一环通过爱心收藏、自定义标签、三档筛选、关键词搜索与拖拽排序用户可以像管理书签和文件夹一样打理自己的提示词集合等级徽章则把「分享优质提示词到社区」与个人成长激励关联起来。从实现层面看它背后是 delta 增量同步的收藏 API、带双哈希校验与模块级缓存的数据加载、原生按钮 CSS 变量驱动的可访问性细节以及按需懒加载的拖拽库——这些设计共同保证了收藏功能在在线与离线两种部署形态下都能流畅、可靠地工作。相关文档自定义提示词Свои промпты创建和管理你自己的提示词界面说明Руководство по интерфейсу搜索与筛选的完整说明账户管理Управление аккаунтом登录、注册与账号设置。赞分享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点击查看免费下载相关推荐AI Short 我的收藏My Collection标签分类与拖拽排序实战指南AI Short 我的收藏My Collection标签分类与拖拽排序实战指南 在 AI ShortChatGPT Shortcut中收藏功能不是简AI 应用提示工程人工智能前端AiShort 我的收藏My Collection完全指南收藏、自定义标签与拖拽排序源码解析AiShort 我的收藏My Collection完全指南收藏、自定义标签与拖拽排序源码解析 欢迎阅读本篇技术指南。本文将围绕 AiShortChatGAI 应用提示工程人工智能前端AI Short 我的收藏Minha Coleção完全指南标签分类、拖拽排序与收藏管理AI Short 我的收藏Minha Coleção完全指南标签分类、拖拽排序与收藏管理 本篇技术指南以 AI ShortChatGPT ShortcuAI 应用提示工程人工智能前端创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表