学习目标

  1. 掌握使用Tailwind CSS实现GitHub议题列表页的整体布局
  2. 学习如何构建复杂的过滤器栏，包括搜索框、下拉菜单和标签选择器
  3. 实现议题列表项，包括状态标记、标签和交互元素
  4. 理解如何使用Tailwind创建可排序的表头和状态指示器
  5. 学习构建响应式设计，确保页面在不同设备上的良好表现

页面分析

GitHub议题列表页是开发者跟踪和管理项目问题的核心界面，它提供了一个综合视图，显示所有打开和关闭的议题。该页面包含以下主要区域：

  1. 顶部导航栏 - 与前几节相同，包含GitHub logo、搜索框和用户菜单
  2. 仓库信息头部 - 显示仓库名称和基本信息
  3. 仓库导航菜单 - 提供Code、Issues、PR等功能入口
  4. 议题过滤栏 - 包含搜索框、状态过滤器和高级排序选项
  5. 议题列表表头 - 显示排序选项和议题计数
  6. 议题列表项 - 显示每个议题的标题、状态、标签和元数据
  7. 分页控制器 - 用于浏览多页议题

在本节中，我们将重点关注议题过滤栏、议题列表表头和议题列表项的实现，这些是议题列表页面的核心特色。

实现步骤

第1步：准备HTML骨架与Tailwind配置

首先创建一个基础HTML文件，并引入Tailwind CSS和必要的配置：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>GitHub 议题列表页 - Tailwind CSS 复刻</title>
  7.   <!-- 引入Tailwind CSS -->
  8.   <script src="https://cdn.tailwindcss.com"></script>
  9.   <!-- 配置Tailwind为GitHub风格 -->
  10.   <script>
  11.     tailwind.config = {
  12.       theme: {
  13.         extend: {
  14.           colors: {
  15.             'github-blue': '#0969da',
  16.             'github-green': '#2da44e',
  17.             'github-red': '#cf222e',
  18.             'github-yellow': '#bf8700',
  19.             'github-purple': '#8250df',
  20.             'github-bg': '#f6f8fa',
  21.             'github-border': '#d0d7de',
  22.             'github-text': '#24292f',
  23.             'github-text-secondary': '#57606a',
  24.             'github-open': '#1a7f37',
  25.             'github-open-bg': '#dafbe1',
  26.             'github-closed': '#cf222e',
  27.             'github-closed-bg': '#ffebe9',
  28.             'github-label-blue': '#ddf4ff',
  29.             'github-label-green': '#dafbe1',
  30.             'github-label-yellow': '#fff8c5',
  31.             'github-label-orange': '#fff1e5',
  32.             'github-label-red': '#ffebe9',
  33.             'github-label-purple': '#fbefff',
  34.           },
  35.         },
  36.       },
  37.     }
  38.   </script>
  39. </head>
  40. <body class="bg-white text-github-text">
  41.   <!-- 页面内容将在这里构建 -->
  42. </body>
  43. </html>

我们添加了用于议题状态和标签的特定颜色，这些颜色在议题列表页面中频繁使用。

第2步：实现议题操作栏

议题操作栏包含新建议题按钮和标签管理链接：

  1. <!-- 议题操作栏 -->
  2. <div class="bg-white border-b border-github-border">
  3.   <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
  4.     <div class="flex flex-col sm:flex-row sm:items-center justify-between">
  5.       <!-- 左侧: 标题 -->
  6.       <div class="flex items-center mb-4 sm:mb-0">
  7.         <h2 class="text-xl font-semibold">Issues</h2>
  8.       </div>
  10.       <!-- 右侧: 按钮组 -->
  11.       <div class="flex items-center space-x-2">
  12.         <!-- 标签按钮 -->
  13.         <a href="#" class="text-sm text-github-text-secondary hover:text-github-blue">
  14.           Labels
  15.         </a>
  16.         <span class="text-github-text-secondary">·</span>
  17.         <!-- 里程碑按钮 -->
  18.         <a href="#" class="text-sm text-github-text-secondary hover:text-github-blue">
  19.           Milestones
  20.         </a>
  22.         <!-- 新建议题按钮 -->
  23.         <button class="ml-4 px-3 py-1 text-sm font-medium text-white bg-github-green rounded-md hover:bg-opacity-90">
  24.           New issue
  25.         </button>
  26.       </div>
  27.     </div>
  28.   </div>
  29. </div>

这个操作栏提供了创建新议题的入口，以及管理标签和里程碑的链接。

第3步：实现议题过滤栏

议题过滤栏是一个复杂的组件，包含搜索框、过滤器按钮和排序选项：

  1. <!-- 议题过滤栏 -->
  2. <div class="bg-github-bg border-b border-github-border">
  3.   <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-3">
  4.     <div class="flex flex-col lg:flex-row lg:items-center space-y-3 lg:space-y-0">
  5.       <!-- 搜索框 -->
  6.       <div class="flex-grow lg:mr-4">
  7.         <input type="text" placeholder="Search all issues" class="w-full h-9 px-3 text-sm border border-github-border rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-github-blue focus:border-github-blue" />
  8.       </div>
  10.       <!-- 过滤器按钮组 -->
  11.       <div class="flex flex-wrap items-center space-x-2">
  12.         <!-- 过滤器按钮 -->
  13.         <button class="flex items-center text-sm bg-github-bg border border-github-border rounded-md px-3 py-1.5 hover:bg-gray-100">
  14.           Filters
  15.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-1">
  16.             <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
  17.           </svg>
  18.         </button>
  20.         <!-- 标签按钮 -->
  21.         <button class="flex items-center text-sm bg-github-bg border border-github-border rounded-md px-3 py-1.5 hover:bg-gray-100">
  22.           Labels
  23.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-1">
  24.             <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
  25.           </svg>
  26.         </button>
  28.         <!-- 里程碑按钮 -->
  29.         <button class="flex items-center text-sm bg-github-bg border border-github-border rounded-md px-3 py-1.5 hover:bg-gray-100">
  30.           Milestones
  31.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-1">
  32.             <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
  33.           </svg>
  34.         </button>
  36.         <!-- 排序按钮 -->
  37.         <button class="flex items-center text-sm bg-github-bg border border-github-border rounded-md px-3 py-1.5 hover:bg-gray-100">
  38.           Sort
  39.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 ml-1">
  40.             <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
  41.           </svg>
  42.         </button>
  43.       </div>
  44.     </div>
  45.   </div>
  46. </div>

过滤栏使用响应式设计，在小屏幕上垂直堆叠元素，在大屏幕上水平排列。搜索框占据大部分空间，而过滤器按钮则紧凑地排列在右侧。

第4步：实现议题列表表头

议题列表表头显示开启/关闭状态切换和议题计数：

  1. <!-- 议题列表表头 -->
  2. <div class="container mx-auto px-4 sm:px-6 lg:px-8 pt-4">
  3.   <div class="flex items-center border-b border-github-border pb-4">
  4.     <!-- 开启/关闭议题切换 -->
  5.     <div class="flex">
  6.       <!-- 开启议题（当前激活） -->
  7.       <a href="#" class="px-3 py-1 text-sm font-semibold border-b-2 border-github-open text-github-text">
  8.         <span class="flex items-center">
  9.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  10.             <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  11.           </svg>
  12.           43 Open
  13.         </span>
  14.       </a>
  16.       <!-- 关闭议题 -->
  17.       <a href="#" class="px-3 py-1 text-sm font-medium text-github-text-secondary hover:text-github-text">
  18.         <span class="flex items-center">
  19.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  20.             <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  21.           </svg>
  22.           128 Closed
  23.         </span>
  24.       </a>
  25.     </div>
  26.   </div>
  27. </div>

表头使用底部边框分隔，并使用绿色底部边框指示当前活动的状态选项（开启或关闭）。

第5步：实现议题列表

议题列表显示议题项，每个项目包含状态图标、标题、标签和元数据：

  1. <!-- 议题列表 -->
  2. <div class="container mx-auto px-4 sm:px-6 lg:px-8">
  3.   <ul class="divide-y divide-github-border">
  4.     <!-- 议题项1 -->
  5.     <li class="py-3">
  6.       <div class="flex items-start">
  7.         <!-- 状态图标 -->
  8.         <div class="mt-1 mr-2 text-github-open">
  9.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  10.             <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  11.           </svg>
  12.         </div>
  14.         <div class="flex-1 min-w-0">
  15.           <!-- 议题标题和标签 -->
  16.           <div class="flex flex-wrap items-center">
  17.             <h3 class="text-base font-semibold mr-2">
  18.               <a href="#" class="hover:text-github-blue">Fix loading error when API response is empty</a>
  19.             </h3>
  21.             <!-- 标签 -->
  22.             <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-github-label-red text-github-red mr-1 my-0.5">
  23.               bug
  24.             </span>
  25.             <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-github-label-blue text-github-blue mr-1 my-0.5">
  26.               frontend
  27.             </span>
  28.           </div>
  30.           <!-- 议题元数据 -->
  31.           <div class="text-xs text-github-text-secondary mt-1">
  32.             <span>#125 opened 2 days ago by</span>
  33.             <a href="#" class="font-medium text-github-text-secondary hover:text-github-blue">username</a>
  34.           </div>
  35.         </div>
  37.         <!-- 右侧信息 -->
  38.         <div class="hidden md:flex items-center ml-4 text-github-text-secondary">
  39.           <!-- 评论数 -->
  40.           <a href="#" class="flex items-center hover:text-github-blue">
  41.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  42.               <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
  43.             </svg>
  44.             <span>5</span>
  45.           </a>
  47.           <!-- 分配者 -->
  48.           <div class="ml-4">
  49.             <img src="https://github.com/identicons/user1.png" alt="Assignee" class="w-5 h-5 rounded-full" title="Assigned to username">
  50.           </div>
  51.         </div>
  52.       </div>
  53.     </li>
  55.     <!-- 议题项2 - 高优先级 -->
  56.     <li class="py-3">
  57.       <div class="flex items-start">
  58.         <!-- 状态图标 -->
  59.         <div class="mt-1 mr-2 text-github-open">
  60.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  61.             <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  62.           </svg>
  63.         </div>
  65.         <div class="flex-1 min-w-0">
  66.           <!-- 议题标题和标签 -->
  67.           <div class="flex flex-wrap items-center">
  68.             <h3 class="text-base font-semibold mr-2">
  69.               <a href="#" class="hover:text-github-blue">Implement dark mode support for main dashboard</a>
  70.             </h3>
  72.             <!-- 标签 -->
  73.             <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-github-label-yellow text-github-yellow mr-1 my-0.5">
  74.               enhancement
  75.             </span>
  76.             <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-github-label-purple text-github-purple mr-1 my-0.5">
  77.               ui
  78.             </span>
  79.             <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-github-label-green text-github-open mr-1 my-0.5">
  80.               priority: high
  81.             </span>
  82.           </div>
  84.           <!-- 议题元数据 -->
  85.           <div class="text-xs text-github-text-secondary mt-1">
  86.             <span>#124 opened 3 days ago by</span>
  87.             <a href="#" class="font-medium text-github-text-secondary hover:text-github-blue">designer</a>
  88.           </div>
  89.         </div>
  91.         <!-- 右侧信息 -->
  92.         <div class="hidden md:flex items-center ml-4 text-github-text-secondary">
  93.           <!-- 评论数 -->
  94.           <a href="#" class="flex items-center hover:text-github-blue">
  95.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  96.               <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
  97.             </svg>
  98.             <span>12</span>
  99.           </a>
  101.           <!-- 分配者 -->
  102.           <div class="ml-4 flex -space-x-1">
  103.             <img src="https://github.com/identicons/user2.png" alt="Assignee" class="w-5 h-5 rounded-full border border-white" title="Assigned to designer">
  104.             <img src="https://github.com/identicons/user3.png" alt="Assignee" class="w-5 h-5 rounded-full border border-white" title="Assigned to developer">
  105.           </div>
  106.         </div>
  107.       </div>
  108.     </li>
  110.     <!-- 议题项3 - 已关闭 -->
  111.     <li class="py-3">
  112.       <div class="flex items-start">
  113.         <!-- 状态图标 -->
  114.         <div class="mt-1 mr-2 text-github-closed">
  115.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  116.             <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  117.           </svg>
  118.         </div>
  120.         <div class="flex-1 min-w-0">
  121.           <!-- 议题标题和标签 -->
  122.           <div class="flex flex-wrap items-center">
  123.             <h3 class="text-base font-semibold mr-2 text-github-text-secondary">
  124.               <a href="#" class="hover:text-github-blue">Update dependencies to latest versions</a>
  125.             </h3>
  127.             <!-- 标签 -->
  128.             <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-github-label-blue text-github-blue mr-1 my-0.5">
  129.               maintenance
  130.             </span>
  131.           </div>
  133.           <!-- 议题元数据 -->
  134.           <div class="text-xs text-github-text-secondary mt-1">
  135.             <span>#123 by</span>
  136.             <a href="#" class="font-medium text-github-text-secondary hover:text-github-blue">maintainer</a>
  137.             <span>was closed 1 week ago</span>
  138.           </div>
  139.         </div>
  141.         <!-- 右侧信息 -->
  142.         <div class="hidden md:flex items-center ml-4 text-github-text-secondary">
  143.           <!-- 评论数 -->
  144.           <a href="#" class="flex items-center hover:text-github-blue">
  145.             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
  146.               <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
  147.             </svg>
  148.             <span>3</span>
  149.           </a>
  150.         </div>
  151.       </div>
  152.     </li>
  153.   </ul>
  154. </div>

我们实现了三种不同类型的议题项：

  1. 普通开放议题 - 带有bug标签
  2. 高优先级开放议题 - 带有多个标签和多个指派者
  3. 已关闭议题 - 使用不同的状态图标和文本样式

每个议题项都包含状态图标、标题、标签、元数据和右侧的评论数/指派者信息。

第6步：实现分页控制器

最后，添加分页控制器，与前一节Commit历史页面中的类似：

  1. <!-- 分页控制器 -->
  2. <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
  3.   <nav class="flex justify-center">
  4.     <ul class="flex items-center space-x-1">
  5.       <!-- 上一页 -->
  6.       <li>
  7.         <a href="#" class="flex items-center justify-center w-8 h-8 border border-github-border rounded-md text-github-text-secondary hover:text-github-blue hover:border-github-blue">
  8.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
  9.             <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
  10.           </svg>
  11.         </a>
  12.       </li>
  14.       <!-- 页码 -->
  15.       <li>
  16.         <a href="#" class="flex items-center justify-center w-8 h-8 border border-github-blue rounded-md bg-github-blue text-white font-medium">
  17.           1
  18.         </a>
  19.       </li>
  20.       <li>
  21.         <a href="#" class="flex items-center justify-center w-8 h-8 border border-github-border rounded-md text-github-text hover:text-github-blue hover:border-github-blue">
  22.           2
  23.         </a>
  24.       </li>
  25.       <li>
  26.         <a href="#" class="flex items-center justify-center w-8 h-8 border border-github-border rounded-md text-github-text hover:text-github-blue hover:border-github-blue">
  27.           3
  28.         </a>
  29.       </li>
  31.       <!-- 省略号 -->
  32.       <li>
  33.         <span class="flex items-center justify-center w-8 h-8 text-github-text-secondary">
  34.           ...
  35.         </span>
  36.       </li>
  38.       <!-- 最后一页 -->
  39.       <li>
  40.         <a href="#" class="flex items-center justify-center w-8 h-8 border border-github-border rounded-md text-github-text hover:text-github-blue hover:border-github-blue">
  41.           8
  42.         </a>
  43.       </li>
  45.       <!-- 下一页 -->
  46.       <li>
  47.         <a href="#" class="flex items-center justify-center w-8 h-8 border border-github-border rounded-md text-github-text-secondary hover:text-github-blue hover:border-github-blue">
  48.           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
  49.             <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
  50.           </svg>
  51.         </a>
  52.       </li>
  53.     </ul>
  54.   </nav>
  55. </div>

关键样式技术点解析

1. 议题状态图标与颜色编码

GitHub使用颜色编码来区分议题的不同状态：

  1. <!-- 开启状态 -->
  2. <div class="mt-1 mr-2 text-github-open">
  3.   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  4.     <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  5.   </svg>
  6. </div>
  8. <!-- 关闭状态 -->
  9. <div class="mt-1 mr-2 text-github-closed">
  10.   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
  11.     <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  12.   </svg>
  13. </div>

关键样式类：

  • text-github-open：绿色用于开启状态
  • text-github-closed：红色用于关闭状态
  • 不同的SVG图标区分开启（带X的圆圈）和关闭（带对勾的圆圈）

2. 标签样式实现

GitHub议题使用多种颜色的标签来分类和标记议题的性质和状态：

  1. <!-- 红色标签 (bug) -->
  2. <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-github-label-red text-github-red mr-1 my-0.5">
  3.   bug
  4. </span>
  6. <!-- 蓝色标签 (frontend) -->
  7. <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-github-label-blue text-github-blue mr-1 my-0.5">
  8.   frontend
  9. </span>
  11. <!-- 绿色标签 (priority: high) -->
  12. <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-github-label-green text-github-open mr-1 my-0.5">
  13.   priority: high
  14. </span>

关键样式类：

  • inline-flex items-center：行内弹性布局，方便标签内容对齐
  • rounded-full：完全圆角，创建胶囊形状
  • text-xs font-medium：小号字体，适中的粗细
  • 背景色和文本色配对：例如 bg-github-label-red text-github-red
  • mr-1 my-0.5：细微的外边距，提高标签间的可读性

每种标签类型都有独特的颜色组合，通过浅色背景和深色文本创建高对比度，提高可读性。

3. 议题列表的响应式设计

议题列表在不同屏幕尺寸上有不同的布局：

  1. <div class="flex items-start">
  2.   <!-- 状态图标和主要内容始终显示 -->
  3.   <div class="mt-1 mr-2 text-github-open">...</div>
  5.   <div class="flex-1 min-w-0">
  6.     <!-- 主要内容 -->
  7.   </div>
  9.   <!-- 右侧信息仅在中等屏幕以上显示 -->
  10.   <div class="hidden md:flex items-center ml-4 text-github-text-secondary">
  11.     <!-- 次要内容 -->
  12.   </div>
  13. </div>

关键样式类：

  • flex-1 min-w-0：主要内容区域占据所有可用空间，但允许在必要时缩小
  • hidden md:flex：在移动设备上隐藏次要信息，在中等屏幕及以上才显示
  • flex flex-wrap items-center：使用 flex-wrap 确保标题和标签在空间不足时可以换行

4. 开启/关闭状态切换

GitHub使用底部边框突出显示当前活动的状态选项：

  1. <!-- 开启议题（当前激活） -->
  2. <a href="#" class="px-3 py-1 text-sm font-semibold border-b-2 border-github-open text-github-text">
  3.   <span class="flex items-center">
  4.     <svg class="w-4 h-4 mr-1">...</svg>
  5.     43 Open
  6.   </span>
  7. </a>
  9. <!-- 关闭议题 -->
  10. <a href="#" class="px-3 py-1 text-sm font-medium text-github-text-secondary hover:text-github-text">
  11.   <span class="flex items-center">
  12.     <svg class="w-4 h-4 mr-1">...</svg>
  13.     128 Closed
  14.   </span>
  15. </a>

关键样式类：

  • border-b-2 border-github-open：粗底边框标记当前活动状态
  • font-semibold vs font-medium：字体粗细区分活动状态
  • text-github-text vs text-github-text-secondary：文本颜色区分活动状态
  • hover:text-github-text：鼠标悬停时的反馈

5. 指派者头像堆叠效果

对于多个指派者，GitHub使用负边距创建头像堆叠效果：

  1. <div class="ml-4 flex -space-x-1">
  2.   <img src="https://github.com/identicons/user2.png" alt="Assignee" class="w-5 h-5 rounded-full border border-white" title="Assigned to designer">
  3.   <img src="https://github.com/identicons/user3.png" alt="Assignee" class="w-5 h-5 rounded-full border border-white" title="Assigned to developer">
  4. </div>

关键样式类：

  • flex -space-x-1：负的水平间距使头像互相重叠
  • rounded-full border border-white：圆形头像加白色边框，即使重叠也能清晰区分每个头像

常见问题与解决方案

  1. 问题: 议题标签在移动设备上的排版
    解决方案: 使用 flex-wrap 和 my-0.5 允许标签在空间不足时换行，并在垂直方向添加适当的间距。

  2. 问题: 在小屏幕上显示足够的议题信息
    解决方案: 使用 hidden md:flex 在移动设备上隐藏次要信息，优先显示重要内容。

  3. 问题: 议题标签颜色的可访问性
    解决方案: 确保标签背景色和文本色之间有足够的对比度，使用浅色背景和深色文本。

  4. 问题: 长议题标题的截断
    解决方案: 使用 min-w-0 和 CSS 的自然文本截断行为，确保长标题不会破坏布局。

  5. 问题: 多个指派者头像的清晰显示
    解决方案: 使用白色边框和负的水平间距，创建堆叠效果并保持每个头像的可见性。

扩展与练习建议

练习1：实现议题筛选器下拉菜单

扩展代码，实现点击”Filters”按钮后显示的下拉菜单，包含预定义的议题筛选选项。

练习2：添加议题选择功能

实现复选框功能，允许用户选择多个议题并对其执行批量操作。

练习3：创建议题卡片视图

除列表视图外，实现卡片式的议题展示布局，并添加视图切换按钮。

练习4：实现议题拖放排序

使用JavaScript实现拖放功能，允许用户通过拖动重新排序议题列表。

练习5：添加议题标签筛选器

创建一个交互式的标签筛选器，允许用户通过点击标签来过滤议题列表。

总结

在本节中，我们成功实现了GitHub议题列表页的核心界面元素，重点关注过滤器、状态标记和议题列表的实现。关键实现点包括：

  1. 使用颜色编码区分开启和关闭的议题状态
  2. 创建多彩的标签系统，使用不同颜色分类议题
  3. 实现灵活的过滤工具栏，方便用户快速查找特定议题
  4. 构建清晰的议题列表，展示标题、标签和重要元数据
  5. 使用响应式设计确保在各种设备上有良好的用户体验

通过这些实现，我们不仅展示了Tailwind CSS在复杂列表界面中的应用，也深入理解了GitHub议题管理系统的设计原则。议题列表页面的设计重点在于信息密度与清晰度的平衡，以及提供强大但易用的筛选工具。

在下一章中，我们将开始探讨协作与讨论界面，首先是议题详情页面的实现，学习如何创建评论流和标签系统。