> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 术语表

> 掌握关键开发术语，帮助你高效使用 Lovable。

<div id="general-concepts">
  ## 通用概念
</div>

* **AI（人工智能）：** 由机器（尤其是计算机系统）对人类智能过程进行模拟，从而完成学习、推理和解决问题等任务。​
* [**提示**](https://docs.lovable.dev/tips-tricks/prompting)**：** 一段文本或输入，用于引导 AI 模型生成输出或执行特定任务。​ 提示是 Lovable 的核心功能之一，你通过提示在应用中创建或修改特定组件或元素。

<div id="lovable-specific-terms">
  ## 与 Lovable 相关的特定术语
</div>

* [**Chat Mode**](https://docs.lovable.dev/features/labs#chat-mode)**：** Lovable 不只是用来生成代码；它还是一个交互式助手，会在开发的每个阶段为你提供引导。它帮助创始人进行批判性思考、有效规划、智能调试，并自信地完成发布。
* **Edit Mode（编辑模式）**：对内容或代码进行更改或修改的操作。​
* [**Edit**](https://docs.lovable.dev/features/precision-edit#visual-edits)**：** 一款工具，通过原生支持 Tailwind 的可视化控件，实现由 AI 驱动的开发，方便你进行精细调整。
* **History（历史）**：用于随时间跟踪和管理你的应用和代码变更的系统。​
* [**Knowledge**](https://docs.lovable.dev/features/precision-edit#knowledge-files)**：** 在一份会随你的应用一起演进的活文档中记录关键项目细节。
* [**Labs**](https://docs.lovable.dev/features/labs)**：** Lovable 内的实验性功能区域，用于测试和展示新的、创新的或尚在开发中的功能。​这些功能可能随时被修改或移除。
* **复刻（Remix）：** 你可以复刻一个现有的公开项目，或复刻你自己的项目。复刻允许你将当前项目状态作为起点，并在此基础上继续构建。这是探索新想法、做出调整，或在保留原始版本的前提下尝试不同变更方案的绝佳方式。请注意，当项目连接了 Supabase 时，无法进行复刻。
* **预览（Preview）：** 以交互方式，让用户在内容或功能最终定稿或发布之前，查看或体验其实时效果。
* **Diff：** 用于展示同一文件或代码两个版本之间差异的比较结果。​
* **/index：** 指网站或应用的主页面或默认页面，通常命名为 "index.html" 或 "index.js"。
* [**Lovable API - Build with URL**](https://docs.lovable.dev/integrations/build-with-url)**：** Lovable API 的 Build with URL 功能允许你通过 URL 参数传递提示和图片，以编程方式创建应用。这使其可以无缝集成到网站、内部工具或自动化工作流中，让用户只需一键就能生成 Lovable 应用。

<div id="product-development-concepts">
  ## 产品和开发概念
</div>

<div id="product-management-strategy">
  ### 产品管理与策略
</div>

* **MVP (Minimum Viable Product)** – 具备最少可行功能的产品版本，用于满足早期用户需求，并在全面开发前验证产品想法。
* **Roadmap** – 概述产品在一段时间内的愿景、方向和计划功能的高层次战略规划。
* **Feature Request** – 来自用户或相关方的、针对产品新增功能的正式或非正式建议。
* **User Story** – 从终端用户视角撰写的、对某个功能或需求的简短且简单的描述。
* **User Journey:** 用户在某个产品或服务中，为达成特定目标而经历的一系列步骤。​
* **Persona:** 基于研究构建的目标用户人物角色，用于指导设计和开发决策。​

<div id="engineering-concepts">
  ### 工程概念
</div>

* **PRD（产品需求文档，Product Requirements Document）：** 一份全面说明产品目标、功能和规格的文档，用于指导开发。​
* [**API**](https://lovable.dev/blog/2025-01-28-the-power-of-apis) **（应用程序编程接口，Application Programming Interface）：** 不同服务之间进行通信的一种方式。你可以把它理解为一种协议，用来说明系统之间可以获取或发送哪些信息。最常见的类型是许多网站使用的 REST API，以及提供更灵活数据查询方式的 GraphQL API。
* **重构（Refactor）：** 在不改变代码外部行为的前提下，对已有代码进行结构调整，以提升可读性、可维护性或性能的过程。
* **GitHub：** 一个基于 Web 的平台，用于使用 Git 进行版本控制和协作式软件开发。​

<div id="data-analytics">
  ### 数据与分析
</div>

* **A/B Testing** – 一种对比两个网页或功能版本的方法，用于根据用户行为确定哪个版本表现更好。
* **Conversion Rate** – 完成预期操作（例如注册或购买）的用户所占的百分比。
* **Churn Rate** – 在特定时间段内停止使用某产品的用户所占的百分比。
* **Retention Rate** – 在一段时间内持续使用某产品的用户所占的百分比。
* **Event Tracking** – 监控特定用户行为（例如按钮点击、表单提交），以获取关于用户行为和参与度的见解。

<div id="uiux-and-frontend-development-playbook">
  ## UI/UX 和前端开发实践指南
</div>

<div id="frontend-development">
  ### 前端开发
</div>

* **Frontend：** 软件应用中用户直接交互的部分，包括用户界面和用户体验相关的元素。​
* **React：** 由 Facebook 开发的 JavaScript 库，用于构建用户界面，特别是单页应用。​
* **Gradient（渐变）：** 设计中在两种或多种颜色或色调之间的渐进过渡。
* **Tailwind CSS**：开源的、实用类优先的 CSS 框架，提供了一整套预定义的类，使开发者可以在 HTML 中直接通过为元素添加这些工具类来构建自定义设计。
* **Design Systems（设计系统）：** 一套可复用组件、规范和标准，用于确保产品或品牌在设计上的一致性与连贯性。

<div id="uiux-design-concepts">
  ### UI/UX 设计概念
</div>

* **Accent Color（强调色）：** 一种用于突出设计中关键元素的醒目颜色，通常与品牌主色保持一致或形成互补，以增强视觉吸引力。​
* **Theme（主题）：** 一组连贯一致的设计选择，包括颜色、字体和布局，用于定义应用或网站的整体美感和用户体验。​
* **Responsive Design（响应式设计）：** 一种网页设计方法，确保内容能够在不同设备尺寸和方向上无缝自适应，为用户提供最佳使用体验。
* **Above the Fold（首屏内容）：** 网页中用户无需滚动就能看到的部分，对迅速抓住注意力并即时传达关键信息至关重要。​
* **CTA（Call to Action，行动号召）：** 一种提示，通常以按钮或链接形式出现，用于鼓励用户执行特定操作，例如「Sign Up」或「Learn More」。​

<div id="page-structure-navigation">
  ### 页面结构与导航
</div>

* **Headings（标题）：** 用于引出并组织内容版块的文本元素，通常通过不同级别（例如 H1、H2）来建立清晰的内容层级结构。​
* **Footer（页脚）：** 网页底部区域，通常包含联系方式、导航链接以及法律声明等补充信息。​
* **Breadcrumb（面包屑导航）：** 一种导航辅助元素，用于显示用户在站点层级结构中的当前位置，通常以水平链接列表的形式呈现。​
* **Favicon（网站图标）** – 显示在浏览器标签页、书签和搜索结果中的小图标，通常用于代表某个品牌或网站。
* **Meta Title（标题标签）** – 出现在搜索引擎结果和浏览器标签页中的网页标题，会影响 SEO 和用户点击率。
* **Meta Description（元描述）** – 显示在搜索引擎结果中的网页内容简短摘要，用于提升搜索可见性和用户参与度。
* **Canonical URL（规范 URL）** – 用于指定网页首选版本的标签，有助于避免搜索引擎索引时出现重复内容问题。
* **URL Slug（URL 短路径）** – URL 中用来以可读格式标识特定页面的部分（例如 `example.com/product-name`）。
* **Sitemap（站点地图）** – 提供网站页面列表的结构化文件（XML 或 HTML），帮助搜索引擎高效索引这些页面。
* **Navigation Bar（导航栏 / Nav Bar）** – 提供指向网站关键版块链接的水平或垂直菜单，方便用户导航。
* **Skip Links（跳过链接）** – 隐藏链接，让用户可以跳过重复内容，直接导航到主内容区域，从而提升可访问性。
* **Pagination（分页）** – 将内容拆分为多个页面的方式，常用于博客、搜索结果和产品列表，以改善用户体验。
* **Anchor Link（锚点链接）** – 一种超链接，将用户直接跳转到同一页面中的特定区域，而不是加载新页面。
* **404 Page（404 页面）** – 当用户尝试访问不存在的 URL 时显示的自定义错误页面，用于引导他们回到相关内容。

<div id="notifications-feedback-elements">
  ### **通知和反馈元素**
</div>

* **Toast：** 一种简短、非侵入式的通知，短暂出现，用于告知用户某个操作的结果或提供简单反馈。​
* **Snackbar** – 类似于 toast，但通常位于屏幕底部，并可以包含可选操作（例如在删除项目后提供“Undo（撤销）”操作）。
* **Tooltip** – 当鼠标悬停或焦点聚焦在某个元素上时出现的小弹出框，用于提供附加信息。
* **Badge** – 小型视觉标记，通常显示在图标或按钮上，用于展示通知、数量或状态更新。
* **Loading Spinner（Loader）** – 表示处理过程正在进行中的视觉指示器，例如加载页面或提交表单时。
* **Progress Bar** – 表示任务或流程完成百分比的水平进度条。
* **Skeleton Loader** – 一种骨架屏式占位 UI，在内容加载完成前先按最终内容的布局显示占位界面，从而提升感知性能。

<div id="overlays-pop-ups">
  ### 覆盖层与弹出组件
</div>

* **Popover：** 一种临时浮层，用于展示与特定 UI 元素相关的额外信息或选项，通常在用户与其交互时出现。​
* **Dialog（Modal）：** 出现在主内容前方的窗口，用于集中用户注意力，通常在返回主界面之前需要用户先执行某个操作。
* **Drawer（侧边栏面板）** – 从屏幕侧边滑出的面板，用于展示导航选项或设置，而不会打断对主内容的浏览。
* **Lightbox** – 以模态窗口形式放大展示图片或媒体，并使背景变暗以便用户聚焦于当前内容。
* **Alert Box** – 由系统或应用触发的消息框，用于告知用户重要信息，例如错误或警告。

<div id="navigation-selection-elements">
  ### 导航和选择元素
</div>

* **按钮（Button）：** 一个可点击的元素，用于触发某个操作或事件，例如提交表单或打开对话框。​
* **开关（Switch/Toggle）：** 一种切换控件，使用户能够在两个状态之间切换，例如开或关，外观通常类似于物理开关。​
* **选项卡（Tabs）** – 一种组件，用于在同一界面中将内容组织为多个视图，让用户在不离开当前页面的情况下在不同部分之间切换。
* **步进器（Stepper，向导 Wizard）** – 一种用于多步骤流程的组件，向用户显示当前所处步骤，并引导其完成整个流程。
* **分页（Pagination）** – 一种 UI 模式，将内容分成多个页面，常用于搜索结果或内容量较大的应用中。
* **面包屑导航（Breadcrumb）** – 一种导航辅助元素，用于显示用户在站点层级结构中的当前位置，通常以水平链接列表的形式展示。
* **手风琴（Accordion）** – 一种可折叠面板，可展开或收起以动态显示或隐藏内容。
* **下拉菜单（Dropdown Menu）** – 当用户点击或悬停在按钮或字段上时出现的选项列表，常用于导航或进行选项选择。

<div id="forms-input-elements">
  ### 表单和输入元素
</div>

* **Form：** 一组结构化的输入字段，允许用户提交数据，例如联系信息或搜索请求。​
* **Radio Group（单选按钮组）：** 一组相关的单选按钮，允许用户在多个选项中只能选择一个。
* **Checkbox（复选框）：** 一种可交互的方框，用户可以勾选或取消勾选来选择或取消选择某个选项，支持在同一组中进行多选。​
* **Text Field（Input Field 文本输入框）** – 基本的 UI 元素，用户可以在其中输入文本，例如搜索框、登录表单或评论输入框。
* **Text Area（多行文本框）** – 用于多行文本输入的较大输入区域，常用于消息或反馈表单。
* **Select（Dropdown Select Box 下拉选择框）** – 一种 UI 元素，允许用户从预设列表中选择一个选项，通常以下拉菜单形式呈现。
* **Date Picker（日期选择器）** – 一种 UI 元素，让用户通过日历选择日期，而不是手动输入。
* **Slider（Range Selector 滑块选择器）** – 一种控件，允许用户通过在轨道上拖动滑块来设置某个范围内的数值。
* **File Upload Field（文件上传字段）** – 一种组件，让用户从其设备中选择并上传文件。
* **Autocomplete（Typeahead Search 自动补全搜索）** – 一种文本输入框，用户输入时会动态显示匹配结果，从而提升搜索类场景的易用性。

<div id="design-styles-trends">
  ### 设计风格与趋势
</div>

<Info>
  你可以在任何提示中使用这些术语，用来描述你想要实现的特定风格。
</Info>

* **Neobrutalism：** 一种网页设计趋势，其特点是粗犷、未打磨的元素，醒目的字体排版和高对比度视觉效果，灵感源自 20 世纪中期的粗野主义建筑。​
* **Retro：** 融合过去年代的风格、图案和元素的设计，营造怀旧感和复古美学。​
* **Hacker：** 一种体现 DIY 和开源文化的美学风格，通常使用等宽字体、深色背景以及仿终端界面。​
* **Glass（Glassmorphism）：** 一种设计风格，运用半透明、磨砂玻璃质感的元素，并搭配细腻的阴影和边框来营造层次感。​
* **Nudy：** 一种极简设计手法，采用裸色或中性色调的配色方案，营造柔和且低调的视觉效果。​

<div id="design-asset-resources">
  ### 设计与素材资源
</div>

* [**21st.dev：**](https://21st.dev/) 一个开源社区组件库，提供简约、现代且可复用的 React UI 组件，基于 Tailwind CSS 和 Radix UI 构建，旨在帮助设计工程师更高效地交付精致的用户界面。
* [**Dribble：**](https://dribbble.com/) 一个领先的在线社区，设计师和创意从业者可以在这里展示作品、获取设计灵感，并与潜在客户或合作伙伴建立联系。
* [**Noun Project：**](https://thenounproject.com/) 一个提供海量免费图标与图库照片的平台，使用户可以为各种项目获取视觉资源。
* [SVG Repo：](https://www.svgrepo.com/) 一个收录超过 500,000 个开放授权 SVG 矢量图和图标的综合素材库，允许用户搜索、浏览、编辑和下载适用于各类项目的图形。
* [Google Fonts：](https://fonts.google.com/) 一个免费的网页优化字体库，为设计师和开发者提供丰富的字体选择，以提升项目的排版效果。
* [Typewolf：](https://www.typewolf.com/) 一个通过展示流行字体并提供精选字体列表，帮助设计师为其项目挑选理想字体搭配的资源网站。

<div id="backend-development-databases">
  ## 后端开发与数据库
</div>

<div id="backend-fundamentals">
  ### 后端基础知识
</div>

* **Backend：** 应用的服务器端基础设施，用于处理和存储数据以及执行业务逻辑。​
* [**Supabase**](https://docs.lovable.dev/integrations/supabase)**：** 一个开源的后端即服务平台，提供 Postgres 数据库、身份验证、即时可用的 API 和实时功能。
* **Webhooks** —— 事件驱动的 HTTP 回调，在特定操作发生时通知外部应用。

<div id="database-management-querying">
  ### 数据库管理与查询
</div>

* **CRUD（Create, Read, Update, Delete）：** 在数据库或应用程序中对数据执行的四种基本操作。​
* [**SQL（Structured Query Language）**](https://supabase.com/docs/guides/database/overview)**：** 一种领域特定的编程语言，用于管理和操作关系型数据库，可执行查询、更新和组织数据等任务。
* **PostgreSQL** —— 一种功能强大的开源关系型数据库，以其可伸缩性、可扩展性以及对 ACID 事务特性的遵循而闻名。

<div id="supabase-specific-concepts">
  ### Supabase 特定概念
</div>

* [**Edge Function**](https://supabase.com/docs/guides/functions)**：** 在服务器端运行的 TypeScript 函数，全球分布在靠近用户的边缘节点。可用于监听 webhook，或将你的 Supabase 项目与 Stripe、Anthropic、Resend 等第三方服务集成。
* [**RLS（Row-Level Security）**](https://supabase.com/docs/guides/database/postgres/row-level-security)**：** 一种数据库功能，可基于用户角色或属性控制对表中某些行的访问——本质上允许你设置细粒度的授权规则，从而编写符合你特定业务需求的复杂 SQL 规则。
* [**Storage**](https://supabase.com/docs/guides/storage)**：** 用于存储和管理数据的服务或系统，例如图像、视频、文档及任何其他文件类型。
* [**Bucket**](https://supabase.com/docs/guides/storage/buckets/fundamentals)**：** 在 Supabase Storage 中，bucket 是一个独立的容器，用于组织文件和文件夹，决定访问模型（公开或私有），并设置上传限制，如最大文件大小和允许的内容类型。
* [**Endpoint**](https://supabase.com/docs/guides/api)**：** 在 Supabase 中，endpoint 指一个特定的 URL，客户端可以通过它使用 RESTful API 与数据库交互，执行创建、读取、更新或删除数据等操作。
* [**Authentication Provider：**](https://supabase.com/docs/guides/auth) 用于验证用户凭证的实体或服务，使用户能够安全地访问应用或系统。在 Supabase 中，authentication provider 包括多种方式，例如基于密码的登录、magic link、一次性密码（OTP）、社交登录，以及单点登录（SSO）集成，为用户身份验证提供灵活且安全的方案。

<div id="security-authentifcation">
  ### 安全与身份认证
</div>

* **OAuth** – 一种广泛使用的身份认证协议，允许用户通过 Google、Facebook 或 GitHub 等第三方服务登录应用程序。
* **双重身份认证 (2FA)** – 一种安全措施，要求用户在访问账户前提供两种身份认证方式。
* **CORS（跨域资源共享）** – 一项安全策略，用于控制哪些网站或应用可以访问服务器上的资源。