ChatGPT-Shortcut（AiShort）首页界面深度解析：标签筛选、智能搜索与提示词卡片

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点击查看免费下载本文以i18n/bn/docusaurus-plugin-content-docs/current/guides/interface.md对应的界面指南为核心结合开源仓库源码系统拆解 AiShort 首页的四大功能区域——顶部入口按钮、标签筛选、关键词搜索与提示词卡片帮助读者既掌握如何在界面上快速检索并复制提示词也能理解标签的倒排索引筛选、跨语言本地搜索、复制热度排序与无限滚动加载背后的实现细节。AiShort 首页由四个区域组成顶部的标题与入口按钮、下方的标签筛选区、搜索框以及铺满页面的提示词卡片列表。首页入口实现位于 src/pages/index.tsx它把页面拆成了ShowcaseHeader标题区、ShowcaseFilters筛选区、ShowcaseCards卡片区三个核心组件并由UserStatus负责登录态相关的按钮渲染。顶部标题与入口按钮页面标题下方是一组常用入口按钮登录前后的形态不同这一差异在 src/components/user/UserStatus.tsx 中通过loggedInButtons与loggedOutButtons两个useMemo分支实现。未登录「免费登录」主按钮 「浏览社区分享」按钮。点击「免费登录」会打开登录弹窗LoginComponent通过React.lazy按需加载「浏览社区分享」则跳转到/community-prompts社区页。已登录一个视图切换按钮在「提示词库」explore与「我的收藏」collection之间切换一个「创建提示词」按钮打开PromptFormModal表单弹窗创建成功后自动切换到「我的收藏」视图右侧一个设置菜单齿轮图标下拉项为「我的账户」跳转/user与「退出登录」弹出确认框后清除localStorage令牌与用户缓存并刷新页面。 AiShort 不登录也能浏览、搜索、复制全部精选提示词。登录只是为了收藏、创建和跨设备同步。从源码结构看视图切换并非简单的状态切换而是和 URL、本地存储三者联动ShowcaseContent初始化viewMode时按「URL?viewexplore|collectionlocalStorage.preferredViewMode 缓存用户数据 默认 explore」的优先级取值切换时先通过 React Router 更新 URL 并清空tags/name/operator参数再写入localStorage配合 150ms 的淡入淡出动画完成切换见 src/pages/index.tsx。这种设计让视图状态可以被分享链接直接还原。标签筛选标签筛选区用于按提示词的领域和功能收窄范围。完整标签定义在 src/data/tags.tsx共 23 个每个标签带中文标签名、描述与主题色写作辅助、文章/报告、IT/编程、AI、生活质量、趣味科普、生活百科、心理/社交、哲学/宗教、思维训练、教育/学生、学术/教师、趣味游戏、效率工具、终端/解释器、语言/翻译、辩论/演讲、点评/评鉴、文本/词语、企业职能、SEO、医疗健康、金融顾问、音乐艺术、专业顾问、用户分享等。需要留意一个细节渲染筛选列表时ShowcaseFilters会对TagList做filter((tag) tag ! contribute)即「用户分享」这个标签不在首页筛选区展示它专属于社区提示词维度。OR / AND 多标签规则筛选区右上方是一个Segmented切换器决定多个标签如何参与匹配实现在 src/components/ShowcaseFilterToggle/index.tsxOR默认命中任一选中标签即显示AND必须同时命中所有选中标签。从源码看操作符通过 URL 的operator参数持久化选 AND 时追加?operatorAND选 OR 时则删除该参数OR 为缺省值。这使「多标签 AND 规则」能被直接分享、刷新不丢失。筛选的底层实现倒排索引筛选真正的过滤逻辑在 src/api/homepage.ts 的searchCardsLocally中。它并不对全量卡片逐条includes比对而是先为当前语言构建一个倒排标签索引tag → Set卡片下标缓存在tagIndexCache首次搜索时生成AND对每个选中标签取集合交集一旦交集为空立即返回OR对所有选中标签取集合并集。这种结构把标签匹配从 O(n·m) 的线性扫描优化为 O(m) 的集合运算m 为选中标签数这也是文档中「OR/AND 切换器」能在大库上即时响应的底层原因。清除筛选与移动端收起选中标签后筛选区左侧会出现「清除筛选 (N)」链接按钮一键清空所有已选标签。其实现是删除 URL 中的tags参数并history.push触发刷新见 src/pages/index.tsx。在手机上标签默认收起点「显示标签」按钮才展开由showTagsOnMobile状态与hideOnSmallScreen/showOnSmallScreen类控制。关键词搜索搜索框由 src/components/SearchBar/index.tsx 实现可一次性搜索提示词的标题、简介、内容备注与笔记。快捷键与退出桌面端按Ctrl KmacOS 为⌘ K可将焦点快速聚焦到搜索框源码里注册了全局keydown监听匹配ctrl/meta k并focus()按Esc退出聚焦blur()。这里有一个容易被忽略的细节onKeyDown里加了e.nativeEvent.isComposing守卫——拼音输入中按 Esc 是取消输入法候选词此时焦点必须留在输入框内否则会打断中文输入。搜索范围搜索范围随登录态和已选标签变化见useFilteredPrompts的searchMode参数首页搜索范围默认是精选提示词走searchCardsLocally在本地静态 JSON 上做标签 关键词双重过滤已选标签时搜索进一步限定在这些标签的候选集内登录后搜索范围扩展到用户的收藏favorites.loves精选 favorites.commLoves社区和自定义提示词userprompts对这三份数据用matchesSearch做小写包含匹配覆盖title、description、remark、notes字段搜索词通过 URL 的name参数持久化刷新/分享可还原当前搜索。降级搜索社区兜底文档提到「用短关键词在首页搜不到时会自动到社区提示词中再查一次」。这在源码中是一段显式的降级分支src/components/SearchBar/index.tsx当精选结果与本地收藏结果都为空且存在搜索词时调用getCommPrompts(1, 12, upvoteDifference, desc, searchName)拉取社区提示词按投票差降序取前 12 条作为补充展示。社区搜索失败会被catch静默吞掉不影响已有结果。提示词卡片精选提示词按累计复制热度排序最常用的内容优先展示。卡片组件是 src/components/PromptCard/index.tsx按type分发到DataCard精选、UserCard用户自建、CommunityCard社区、FavoriteCard等具体实现首页主要渲染DataCard。卡片信息DataCard.tsx 中每张卡片展示标题、备注PromptRemark、内容预览Typography.Paragraph最多 3 行省略、标签PromptCardTag以及可选的外部来源链接图标。右上角的火苗图标 数字就是该提示词的累计复制热度用Intl.NumberFormat的compact记法做紧凑格式化如 1.2K。复制热度的来源与排序热度值由 src/utils/formatters.ts 的getWeight计算count ?? weight ?? 0即优先读count回退到weight再回退到 0。而「谁在前谁在后」的排序并非运行时实时计算而是由 src/data/constants.tsx 中ALL_IDS这个预排好序的 ID 数组决定的——首屏默认展示DEFAULT_IDS前 8 个后续增量加载都按ALL_IDS顺序取下一批从而把「复制热度最高」这一运营排序固化在构建产物里。无限滚动加载卡片列表不是全量渲染。src/pages/index.tsx 用一个 1px 高的IntersectionObserver触发器滚动到底部时调用fetchNextCards(displayedIds, 12, lang)按ALL_IDS顺序拉取下一批BATCH_SIZE 12并对新追加卡片做入场动画fetchNextCards内部会过滤掉已展示 ID 保证不重复。源码注释里特意强调了isFiltered必须放进 observer 的依赖数组——否则切换筛选视图后触发器 DOM 节点重挂载无限滚动会彻底失效。数据从哪来首页没有走远程 API。fetchCardsByIds/fetchNextCards/searchCardsLocally全部基于静态 JSONsrc/api/homepage.ts全量精选数据在prompt_{lang}.json如 src/data/prompt_zh-Hans.json按语言懒加载并带会话级内存缓存跨语言回退到zh-Hans未登录首屏直接静态导入src/data/default/favor_*.json收藏区与other_*.json其余区避免首屏布局抖动CLS登录后则改用fetchCardsByIds按用户的favorites.loves与DEFAULT_IDS拉取个性化数据。查看详情 / 复制 / 收藏查看详情点击卡片调用onOpenModal打开懒加载的PromptDetailModal可阅读完整内容与备注卡片标题本身是带/prompt/{id}的链接点击标题跳独立详情页点击卡片其余区域开弹窗。复制卡片底部和详情弹窗里都有「复制」按钮CopyButton一键复制提示词正文可粘贴到任意 AI 工具对话页、编程工具、API 调用等场景。收藏登录后每张卡片会显示爱心收藏按钮isLoggedIn onToggleFavorite才渲染点击加入/移出「我的收藏」收藏态由favorites.loves集合驱动高亮。相关文档docs/guides/getting-started.md — 基本使用方法docs/guides/my-collection.md — 收藏、标签和排序docs/guides/community.md — 社区提示词的发现与分享。赞分享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点击查看免费下载相关推荐如何为 reference 首页速查表卡片添加导航图标与提示标签如何为 reference 首页速查表卡片添加导航图标与提示标签 referenceQuick Reference的首页导航由仓库根目录的 README.文档教程如何快速提升搜索效率ChatGPT-Google-Extension智能筛选功能详解如何快速提升搜索效率ChatGPT Google Extension智能筛选功能详解 在信息爆炸的时代我们每天都要面对海量的搜索结果但重复和低质量的内容往风光储一体化项目评估报告风光储一体化项目评估报告 LCOE分析 | 构成项 | 数值 元/kWh | 占比 | | | | | | 风电场 | 0.28 | 42% | | 光伏场 |AI 应用提示工程人工智能前端上一篇从0到1搭建家庭云AList多存储无缝整合指南下一篇GoGoGo免ROOT虚拟定位教程三步上手ADB模拟定位的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考