企业官网建设流程全解析

• AI 应用
• 提示工程
• 人工智能
• 前端

本篇指南以 AI Short（ChatGPT-Shortcut）首页为对象，系统讲解其四大功能区域——顶部入口按钮、标签筛选区、搜索框与提示词卡片列表——的实际用法与背后实现。读完本文，你将掌握如何通过 OR/AND 多标签组合、Ctrl + K快捷搜索、卡片复制与收藏等操作，从上千条精选提示词中快速定位并复用最合适的一条。

页面整体布局

AI Short 首页自上而下由四个区域组成：顶部的标题与入口按钮、下方的标签筛选区、搜索框，以及提示词卡片列表。这种"先看入口、再选标签、再搜关键词、最后挑卡片"的漏斗式布局，让用户可以在不滚动浏览全部内容的前提下，用最短路径找到目标提示词。

从源码结构看，首页由 HomePage.tsx 统一渲染，内部拆分为三个职责清晰的子组件：负责标题与登录入口的ShowcaseHeader、负责标签筛选的ShowcaseFilters、负责卡片列表与无限滚动的ShowcaseCards；而 src/pages/index.tsx 与各语言目录下的index.tsx薄壳页面负责按 locale 静态导入各自的提示词 JSON 数据后注入。这意味着整个首页在构建期即完成数据嵌入（SSG），首屏无需等待接口返回即可渲染卡片。

顶部入口

页面标题下方是常用入口按钮，登录前后展示的内容略有不同：

• 未登录：显示「免费登录」与「浏览社群分享」两个入口；
• 已登录：显示视图切换（「提示词库」⇄「我的收藏」）、「建立提示词」，以及右侧设置菜单（「我的账户」「登出」）。

💡 AI Short 不登录也能浏览、搜索、复制全部精选提示词。登录只是为了收藏、建立和同步个性化数据。

这一"登录非必需"的设计在源码中同样成立：HomePage的ShowcaseContent根据认证状态分流渲染，未登录访客直接进入ExploreView（浏览视图），已登录用户进入MyCollectionView（收藏视图），且收藏视图内的MySpace组件仅在登录态下懒加载（HomePage.tsx）。

「提示词库 ⇄ 我的收藏」对应源码中的视图模式（viewMode），取值explore与collection。切换时通过 URL 参数view=explore写入地址栏，并持久化到localStorage的preferredViewMode键中，下次访问会自动恢复上次的视图偏好（HomePage.tsx）。视图状态的全局读写由 ViewModeContext.tsx 提供。

标签筛选

标签区按提示词的领域和功能进行分类筛选。所有标签的定义集中维护在 src/data/tags.tsx 中，覆盖写作辅助、文章/报告、IT/编程、AI、生活质量、趣味科普、生活百科、心理/社交、哲学/宗教、思维训练、教育/学生、学术/教师、趣味游戏、效率工具、终端/解释器、语言/翻译、辩论/演讲、点评/评鉴、文本/词语、企业职能、SEO、医疗健康、金融顾问、音乐艺术、专业顾问、用户分享等二十余个领域。

OR / AND 切换器

标签筛选区的右上方是OR / AND切换器，它决定多标签组合的筛选规则：

• OR（默认）：命中任一标签的提示词即显示，适合"宽泛找"；
• AND：必须同时命中所有已选标签，适合"精确圈定"。

这一逻辑在 ShowcaseFilterToggle.tsx 中以Segmented组件实现，选中结果写入 URL 参数operator（值为OR或AND，缺省为OR）。而标签本身则通过 ShowcaseTagSelect.tsx 的CheckableTag渲染，每次点击都会把该标签追加或移除到 URL 的tags参数列表中——因此标签组合、搜索词与筛选规则都可以通过 URL 分享给他人，直接还原筛选现场。

筛选规则的底层实现

从 src/api/homepage.ts 可以看到筛选并非简单地遍历全部数据：

• 首次搜索时会按语言构建倒排标签索引（tag → 卡片下标集合），把标签匹配从 O(n×m) 优化为 O(m) 的集合查找；
• OR 模式取各标签结果集合的并集，AND 模式取交集，命中为空时直接提前返回；
• 索引按语言分组缓存（tagIndexCache），同一语言只需构建一次。

这意味着即便标签数量很多，筛选依旧保持即时响应。

清除筛选与移动端适配

选中标签后，筛选区左侧会出现「清除筛选」按钮（带已激活筛选计数，如"清除筛选 (3)"），一键清空全部已选标签与关键词。该按钮与"无结果"空状态共用同一份useClearFilters实现，保证计数与清除范围完全一致（SearchBar/index.tsx）。

在手机上，标签默认收起，点击「显示标签」才会展开；再次点击可收起，避免标签区挤占卡片浏览空间。

关键词搜索

搜索框支持检索提示词的**标题、简介、内容（prompt 正文）和备注（remark）**四个文本字段。

• 桌面端按Ctrl + K（macOS 为⌘ + K）可快速聚焦搜索框，按Esc退出聚焦；
• 首页搜索范围默认是精选提示词；已选标签时，搜索范围自动限定在这些标签之内；
• 登录后，搜索范围还会扩展到你的收藏和自订提示词；
• 用短关键词在首页搜不到时，会自动降级到 社群提示词 中再查一次。

快捷键与字段匹配的实现

Ctrl + K/⌘ + K的聚焦逻辑在 SearchBar/index.tsx 中通过全局keydown监听实现，搜索框后缀还展示了CTRL K键帽提示。Esc退出则带有一处细节：通过isComposing守卫，确保拼音输入法候选词状态下按 Esc 取消候选词时不会误触发失焦（同文件第 288-291 行）。

字段匹配方面存在两条路径：

• 精选卡片走 searchCardsLocally，对每张卡片按当前语言取title、description、remark、prompt四个字段做小写化包含匹配；
• 登录后的收藏与自订提示词走matchesSearch（SearchBar/index.tsx），同样覆盖title、description、remark、notes四个字段，并使用可选链规避"占位对象"导致的整组过滤中断。

搜索词同样会同步到 URL 的name参数，因此带搜索条件的首页地址可以直接收藏或分享。

首页搜不到的降级策略

当本地精选与本地收藏均无结果且存在搜索词时，代码会自动调用社区提示词搜索接口getCommPrompts，按"赞差"降序取回最多 12 条社区结果并展示（SearchBar/index.tsx）。这就是文档中"自动到社群提示词中再查一次"的机制：即使精选库没有收录，你仍然有机会在社区分享的提示词里找到答案。

提示词卡片

精选提示词按累计复制热度排序展示，被复制越多的内容越靠前，最常用的提示词会被优先看到。排序权重取自每张卡片的复制计数（getWeight，即count ?? weight ?? 0），展示时使用formatCompactNumber将大数字压缩为易读格式。

卡片信息

每张卡片展示提示词的标题、简介（内容预览）、正文预览和标签。卡片右上角的火苗图标和数字就是该提示词的累计复制热度——它是衡量一条提示词实用度的直观信号，热度越高说明越多人实际复制使用过。

从 DataCard.tsx 的渲染代码可以看到卡片的完整构成：标题（点击可直达该提示词详情页/prompt/{id}）、热度统计、备注（remark）、最多 3 行的正文省略预览、标签组，以及可选的原文来源链接。卡片整体可点击，并实现了键盘可达性（role="button"+tabIndex=0，回车或空格即可打开详情）。

查看详情

点击卡片会打开详情弹窗，其中可以看到：

• 完整的提示词正文（独立滚动区域）；
• 备注信息（带弱化强调竖线的斜体样式）；
• 作者、赞数、复制热度、来源链接等元信息；
• 内容较长时附带的译文区块，帮助非母语读者理解提示词意图；
• 顶部与底部的一键复制按钮。

弹窗实现位于 PromptDetailModal.tsx，其底部还提供「查看详情」按钮，可跳转到该提示词的独立详情页（/prompt/{id}）继续阅读。

复制提示词

点击卡片下方的「复制」按钮，或详情弹窗里的「复制」按钮，即可把完整提示词复制到剪贴板。复制成功后，直接粘贴到任意 AI 工具即可使用——无论是 ChatGPT、Claude 的对话页、Cursor 等编程工具，还是 API 调用场景，都同样适用。复制按钮还带有热度埋点（trackingId），每次复制都会计入该提示词的累计复制热度，这也是卡片排序数据的来源之一。

收藏提示词

登录后，卡片上会出现爱心收藏按钮：未收藏时是空心爱心，点击后变为实心爱心，同时该提示词会被加入 我的收藏。收藏操作基于useFavoriteHook 完成乐观更新，并即时同步到后端PATCH /favorites/me；再次点击爱心即可取消收藏。收藏的提示词会以独立的「Favorites」区块置顶展示在首页，便于下次快速取用。

相关文档

• 开始上手：基本使用方法与注册流程
• 我的收藏：收藏、标签和排序管理
• 社群提示词：发现和分享社区提示词

• AI 应用
• 提示工程
• 人工智能
• 前端