在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

kamranahmedse/developer-roadmap

菜单

用户界面组件

相关源文件

本文档全面概述了 roadmap.sh 平台中的用户界面组件。它解释了主要的 UI 组件、它们的结构以及它们如何协同工作以创建一致的用户体验。有关进度跟踪系统的信息，请参阅用户进度系统。

核心 UI 架构

roadmap.sh 平台采用基于组件的架构，主要由 Astro 组件和 React 组件构建。Astro 组件处理静态 UI 元素，而 React 组件提供交互性。UI 遵循分层结构，其中包含一个包含各种嵌套组件的基础布局。

来源：src/layouts/BaseLayout.astro1-242 src/components/Navigation/Navigation.astro1-165 src/components/Footer.astro1-140

基础布局组件

BaseLayout.astro 组件是 roadmap.sh 平台所有页面的基础。它提供了

  1. 文档元数据和 SEO 元素
  2. 导航头部
  3. 页面特定内容的内容槽
  4. 页脚
  5. UI 工具，如身份验证、通知和命令菜单

布局接受各种属性进行自定义，包括

  • title - 页面标题
  • description - 页面描述
  • ogImageUrl - 社交媒体预览图像
  • resourceId 和 resourceType - 用于跟踪资源的进度

来源：src/layouts/BaseLayout.astro1-242

Navigation.astro 组件提供平台的主要导航，包括

  1. Logo 和品牌链接
  2. 带有下拉菜单的桌面导航项
  3. 移动导航按钮和移动菜单
  4. 用户认证状态相关的元素

导航适应不同的屏幕尺寸和认证状态，为已登录和匿名用户显示不同的选项。

来源：src/components/Navigation/Navigation.astro1-165

平台使用多个下拉组件进行导航

  1. NavigationDropdown - 显示各种站点部分，如项目、最佳实践等。
  2. RoadmapDropdownMenu - 提供不同类型路线图的访问权限
  3. AccountDropdown - 登录后显示用户帐户选项

这些下拉菜单作为 React 组件实现，它们维护自己的状态并使用 useOutsideClick 等共享实用程序钩子，以便在点击外部时关闭。

来源：src/components/NavigationDropdown.tsx1-150 src/components/RoadmapDropdownMenu/RoadmapDropdownMenu.tsx1-116

内容组件

主视觉区

HeroSection.astro 组件在主页上显示一个突出的介绍区域，包含

  1. 功能公告（激活时）
  2. 主标题
  3. 网站简要描述
  4. 不同屏幕的响应式尺寸

来源：src/components/HeroSection/HeroSection.astro1-33 src/components/FeatureAnnouncement.tsx1-29

特色项目在整个平台中以组的形式显示，主要在主页上

  1. FeaturedItems.astro - 带有标题的项目分组容器组件
  2. FeaturedItem.astro - 带有标题、链接和可选指示器的单个项目卡片
  3. 支持“新增”和“即将推出”徽章
  4. 通过 MarkFavorite 组件实现书签功能

特色项目被组织成“基于角色的路线图”、“基于技能的路线图”等类别，并显示链接到各种内容卡片。

来源：src/components/FeaturedItems/FeaturedItems.astro1-51 src/components/FeaturedItems/FeaturedItem.astro1-75

进度指示器

用户进度在整个 UI 中都有视觉指示

  1. 路线图项目上的进度条
  2. 主题完成指示器
  3. 路线图和指南的收藏/书签功能
  4. HeroRoadmap 组件用于在用户仪表板中显示进度

来源：src/components/HeroSection/FavoriteRoadmaps.tsx1-227 src/components/HeroSection/EmptyProgress.tsx1-30

分析和跟踪组件

平台包含用于分析、跟踪和广告的多个组件

  1. Analytics.astro - 实现 Google Analytics
  2. Clarity.astro - Microsoft Clarity 跟踪
  3. RedditPixel.astro - Reddit 转化跟踪
  4. GoogleAd.astro 和 GoogleAdSlot.astro - Google 广告集成

这些组件加载在 BaseLayout 中，并包含根据当前页面和用户上下文的各种配置。

来源：src/components/Analytics/Analytics.astro1-12 src/components/Analytics/Clarity.astro1-14 src/components/Analytics/RedditPixel.astro1-19 src/components/Analytics/GoogleAd.astro1-109

Footer.astro 组件作为平台的全局页脚，包含

  1. 辅助导航链接
  2. 站点信息和版权
  3. 社交媒体链接
  4. 赞助和合作伙伴信息
  5. 法律链接（条款、隐私等）

页脚采用响应式布局，可适应不同的屏幕尺寸。

来源：src/components/Footer.astro1-140

组件构成和数据流

UI 组件组合在一起以创建完整的页面。数据通过以下方式在组件中流动

  1. 传递给组件的 Props
  2. 全局存储（如 page.ts 存储）
  3. 客户端 API 调用获取动态数据
  4. 用户交互事件

此图显示了主页的组件构成

来源：src/pages/index.astro1-117 src/layouts/BaseLayout.astro1-242

响应式设计

UI 组件设计为响应式，可适应不同的屏幕尺寸

  1. 移动优先方法，并为大屏幕设置断点
  2. 移动端和桌面端的不同布局和导航
  3. 使用实用程序类根据屏幕尺寸隐藏/显示元素
  4. 自适应排版和间距

响应式 UI 元素可以通过诸如 sm:、md: 和 lg: 前缀的类来识别，这些类在特定的断点处应用样式。

来源：src/components/Navigation/Navigation.astro10-162 src/components/HeroSection/HeroSection.astro5-33

实用组件和图标

平台包含多个实用组件和图标

  1. AstroIcon.astro - 渲染 SVG 图标
  2. CheckIcon.tsx - 为各种 UI 元素渲染一个勾选图标
  3. Spinner.tsx - 加载指示器
  4. FavoriteIcon.tsx - 书签/收藏指示器

这些组件在整个 UI 中用于提供一致的视觉元素。

来源：src/components/ReactIcons/CheckIcon.tsx1-20 src/components/ReactIcons/Spinner.tsx1-37 src/components/FeaturedItems/FavoriteIcon.tsx1-45

表单组件

平台中的表单使用一致的组件

  1. 带有标签的输入字段
  2. 复选框和单选按钮
  3. 带有加载状态的提交按钮
  4. 错误消息和验证

示例实现可见于 AdvertiseForm 组件。

来源：src/components/AdvertiseForm.tsx1-224 src/components/AdvertiseForm.tsx1-224 src/pages/advertise.astro1-40