English 中文 العربية 日本語 Português

Tailwind CSS: 实战：用Tailwind CSS构建管理后台面板

1. 项目需求

构建一个简洁的管理后台面板（Dashboard），包含侧边导航、顶部统计卡片、数据表格、表单区域和图表占位，支持暗黑模式，适配桌面端与移动端。

2. 技术要求

3. 分步实现

▶ 示例：第一步 - 侧边导航

固定左侧导航栏，包含 Logo、菜单项和用户头像，移动端可收起。

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理面板 - 侧边导航</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: { 50: '#eff6ff', 100: '#dbeafe', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' }
          }
        }
      }
    }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100">

  <!-- 移动端顶栏 -->
  <div class="lg:hidden fixed top-0 w-full bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 z-40 px-4 py-3 flex items-center justify-between">
    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>
    <span class="font-bold">管理面板</span>
    <div class="w-10"></div>
  </div>

  <!-- 遮罩层 -->
  <div id="overlay" class="hidden fixed inset-0 bg-black/50 z-40 lg:hidden"></div>

  <!-- 侧边栏 -->
  <aside id="sidebar" class="fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transform -translate-x-full lg:translate-x-0 transition-transform">
    <div class="flex flex-col h-full">
      <!-- Logo -->
      <div class="h-16 flex items-center gap-3 px-6 border-b border-gray-200 dark:border-gray-800">
        <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
          <span class="text-white font-bold text-sm">A</span>
        </div>
        <span class="text-lg font-bold">AdminKit</span>
      </div>

      <!-- 菜单 -->
      <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 bg-primary-50 dark:bg-primary-700/20 text-primary-600 dark:text-primary-400 rounded-lg">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
          <span>仪表盘</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
          <span>数据分析</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
          <span>用户管理</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
          <span>产品管理</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
          <span>订单记录</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          <span>系统设置</span>
        </a>
      </nav>

      <!-- 用户头像 -->
      <div class="p-4 border-t border-gray-200 dark:border-gray-800">
        <div class="flex items-center gap-3 px-3 py-2">
          <div class="w-9 h-9 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
            <span class="text-primary-600 dark:text-primary-400 font-semibold text-sm">陈</span>
          </div>
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium truncate">陈小明</p>
            <p class="text-xs text-gray-500 truncate">admin@example.com</p>
          </div>
          <button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
          </button>
        </div>
      </div>
    </div>
  </aside>

  <!-- 主内容占位 -->
  <main class="lg:ml-64 pt-16 lg:pt-0 min-h-screen p-6">
    <p class="text-gray-500">主内容区域</p>
  </main>

  <script>
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    const toggle = document.getElementById('sidebarToggle');
    toggle?.addEventListener('click', () => {
      sidebar.classList.toggle('-translate-x-full');
      overlay.classList.toggle('hidden');
    });
    overlay?.addEventListener('click', () => {
      sidebar.classList.add('-translate-x-full');
      overlay.classList.add('hidden');
    });
  </script>

</body>
</html>
逻辑代码 99 行（超过 40 行限制，仅展示）

▶ 示例：第二步 - 统计卡片

顶部 4 个数据统计卡片，展示关键指标。

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>统计卡片</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
    <!-- 总用户 -->
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
      <div class="flex items-center justify-between mb-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">总用户</span>
        <div class="w-10 h-10 bg-blue-50 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
        </div>
      </div>
      <p class="text-3xl font-bold mb-1">24,589</p>
      <div class="flex items-center gap-1 text-sm">
        <span class="text-green-600 dark:text-green-400 flex items-center gap-1">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
          12.5%
        </span>
        <span class="text-gray-500">较上月</span>
      </div>
    </div>

    <!-- 总收入 -->
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
      <div class="flex items-center justify-between mb-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">总收入</span>
        <div class="w-10 h-10 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
      </div>
      <p class="text-3xl font-bold mb-1">¥892,400</p>
      <div class="flex items-center gap-1 text-sm">
        <span class="text-green-600 dark:text-green-400 flex items-center gap-1">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
          8.2%
        </span>
        <span class="text-gray-500">较上月</span>
      </div>
    </div>

    <!-- 订单数 -->
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
      <div class="flex items-center justify-between mb-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">订单数</span>
        <div class="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
        </div>
      </div>
      <p class="text-3xl font-bold mb-1">3,847</p>
      <div class="flex items-center gap-1 text-sm">
        <span class="text-red-600 dark:text-red-400 flex items-center gap-1">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
          3.1%
        </span>
        <span class="text-gray-500">较上月</span>
      </div>
    </div>

    <!-- 转化率 -->
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
      <div class="flex items-center justify-between mb-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">转化率</span>
        <div class="w-10 h-10 bg-orange-50 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
        </div>
      </div>
      <p class="text-3xl font-bold mb-1">5.6%</p>
      <div class="flex items-center gap-1 text-sm">
        <span class="text-green-600 dark:text-green-400 flex items-center gap-1">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
          2.4%
        </span>
        <span class="text-gray-500">较上月</span>
      </div>
    </div>
  </div>

</body>
</html>
逻辑代码 80 行（超过 40 行限制，仅展示）

▶ 示例：第三步 - 数据表格

可滚动的响应式数据表格，带斑马纹和操作按钮。

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据表格</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">

  <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
    <!-- 表头操作栏 -->
    <div class="p-4 border-b border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
      <h3 class="text-lg font-semibold">最近订单</h3>
      <div class="flex items-center gap-3 w-full sm:w-auto">
        <div class="relative flex-1 sm:flex-none">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
          <input type="text" placeholder="搜索订单..." class="w-full sm:w-64 pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500">
        </div>
        <button class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors flex-shrink-0">
          导出
        </button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="overflow-x-auto">
      <table class="w-full min-w-[640px]">
        <thead>
          <tr class="border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">客户</th>
            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">产品</th>
            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
            <th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
            <td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7891</td>
            <td class="px-4 py-3">
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center text-xs font-semibold text-blue-600">张</div>
                <span class="text-sm">张三</span>
              </div>
            </td>
            <td class="px-4 py-3 text-sm">专业版年费</td>
            <td class="px-4 py-3 text-sm font-medium">¥1,188</td>
            <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">已完成</span></td>
            <td class="px-4 py-3 text-sm text-gray-500">2025-01-15</td>
            <td class="px-4 py-3 text-right">
              <button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
              </button>
            </td>
          </tr>
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
            <td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7892</td>
            <td class="px-4 py-3">
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center text-xs font-semibold text-green-600">李</div>
                <span class="text-sm">李四</span>
              </div>
            </td>
            <td class="px-4 py-3 text-sm">企业版年费</td>
            <td class="px-4 py-3 text-sm font-medium">¥3,588</td>
            <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 rounded-full">处理中</span></td>
            <td class="px-4 py-3 text-sm text-gray-500">2025-01-14</td>
            <td class="px-4 py-3 text-right">
              <button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
              </button>
            </td>
          </tr>
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
            <td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7893</td>
            <td class="px-4 py-3">
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center text-xs font-semibold text-purple-600">王</div>
                <span class="text-sm">王五</span>
              </div>
            </td>
            <td class="px-4 py-3 text-sm">专业版月费</td>
            <td class="px-4 py-3 text-sm font-medium">¥99</td>
            <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">已完成</span></td>
            <td class="px-4 py-3 text-sm text-gray-500">2025-01-13</td>
            <td class="px-4 py-3 text-right">
              <button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
              </button>
            </td>
          </tr>
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
            <td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7894</td>
            <td class="px-4 py-3">
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center text-xs font-semibold text-orange-600">赵</div>
                <span class="text-sm">赵六</span>
              </div>
            </td>
            <td class="px-4 py-3 text-sm">免费版升级</td>
            <td class="px-4 py-3 text-sm font-medium">¥0</td>
            <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-full">已取消</span></td>
            <td class="px-4 py-3 text-sm text-gray-500">2025-01-12</td>
            <td class="px-4 py-3 text-right">
              <button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
      <p class="text-sm text-gray-500">显示 1-4 条，共 256 条</p>
      <div class="flex items-center gap-1">
        <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50" disabled>上一页</button>
        <button class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg">1</button>
        <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">2</button>
        <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">3</button>
        <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">下一页</button>
      </div>
    </div>
  </div>

</body>
</html>
逻辑代码 127 行（超过 40 行限制，仅展示）

▶ 示例：第四步 - 表单区域

包含输入框、下拉框、文本域和按钮的表单。

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单区域</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">

  <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 max-w-2xl">
    <h3 class="text-lg font-semibold mb-6">添加新用户</h3>

    <form class="space-y-5">
      <!-- 姓名行 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <div>
          <label class="block text-sm font-medium mb-1.5">姓</label>
          <input type="text" placeholder="请输入姓氏"
                 class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
        </div>
        <div>
          <label class="block text-sm font-medium mb-1.5">名</label>
          <input type="text" placeholder="请输入名字"
                 class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
        </div>
      </div>

      <!-- 邮箱 -->
      <div>
        <label class="block text-sm font-medium mb-1.5">邮箱地址</label>
        <input type="email" placeholder="user@example.com"
               class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
      </div>

      <!-- 角色和状态 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <div>
          <label class="block text-sm font-medium mb-1.5">角色</label>
          <select class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all appearance-none cursor-pointer">
            <option value="">请选择角色</option>
            <option value="admin">管理员</option>
            <option value="editor">编辑</option>
            <option value="viewer">访客</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium mb-1.5">状态</label>
          <select class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all appearance-none cursor-pointer">
            <option value="active">启用</option>
            <option value="inactive">禁用</option>
          </select>
        </div>
      </div>

      <!-- 备注 -->
      <div>
        <label class="block text-sm font-medium mb-1.5">备注</label>
        <textarea rows="3" placeholder="可选填备注信息..."
                  class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all resize-none"></textarea>
      </div>

      <!-- 通知开关 -->
      <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
        <div>
          <p class="text-sm font-medium">发送欢迎邮件</p>
          <p class="text-xs text-gray-500">用户创建后自动发送登录凭证</p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer" checked>
          <div class="w-11 h-6 bg-gray-300 dark:bg-gray-600 rounded-full peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full"></div>
        </label>
      </div>

      <!-- 按钮 -->
      <div class="flex items-center gap-3 pt-2">
        <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors">
          创建用户
        </button>
        <button type="button" class="px-6 py-2.5 border border-gray-200 dark:border-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
          取消
        </button>
      </div>
    </form>
  </div>

</body>
</html>
逻辑代码 77 行（超过 40 行限制，仅展示）

▶ 示例：第五步 - 图表占位区域

为实际图表库预留的占位区域。

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图表占位</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- 收入趋势图 -->
    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
      <div class="flex items-center justify-between mb-6">
        <h3 class="text-lg font-semibold">收入趋势</h3>
        <select class="px-3 py-1.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-xs focus:outline-none">
          <option>近 7 天</option>
          <option>近 30 天</option>
          <option>近 90 天</option>
        </select>
      </div>
      <div class="h-64 flex items-end gap-2 px-2">
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-200 dark:bg-blue-900 rounded-t" style="height: 45%"></div>
          <span class="text-xs text-gray-500">周一</span>
        </div>
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height: 65%"></div>
          <span class="text-xs text-gray-500">周二</span>
        </div>
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height: 50%"></div>
          <span class="text-xs text-gray-500">周三</span>
        </div>
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-500 dark:bg-blue-600 rounded-t" style="height: 80%"></div>
          <span class="text-xs text-gray-500">周四</span>
        </div>
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-600 dark:bg-blue-500 rounded-t" style="height: 70%"></div>
          <span class="text-xs text-gray-500">周五</span>
        </div>
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height: 90%"></div>
          <span class="text-xs text-gray-500">周六</span>
        </div>
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height: 60%"></div>
          <span class="text-xs text-gray-500">周日</span>
        </div>
      </div>
    </div>

    <!-- 用户来源饼图占位 -->
    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
      <h3 class="text-lg font-semibold mb-6">用户来源</h3>
      <div class="flex flex-col items-center justify-center">
        <div class="relative w-48 h-48">
          <!-- 简易环形图 -->
          <svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#e5e7eb" stroke-width="3" class="dark:stroke-gray-700"/>
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="0"/>
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#10b981" stroke-width="3" stroke-dasharray="25 75" stroke-dashoffset="-40"/>
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#f59e0b" stroke-width="3" stroke-dasharray="20 80" stroke-dashoffset="-65"/>
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="15 85" stroke-dashoffset="-85"/>
          </svg>
          <div class="absolute inset-0 flex flex-col items-center justify-center">
            <span class="text-2xl font-bold">100%</span>
            <span class="text-xs text-gray-500">总计</span>
          </div>
        </div>
        <div class="mt-6 grid grid-cols-2 gap-x-8 gap-y-2">
          <div class="flex items-center gap-2">
            <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
            <span class="text-sm">搜索引擎 <span class="text-gray-500">40%</span></span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-3 h-3 bg-green-500 rounded-full"></div>
            <span class="text-sm">直接访问 <span class="text-gray-500">25%</span></span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
            <span class="text-sm">社交媒体 <span class="text-gray-500">20%</span></span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-3 h-3 bg-red-500 rounded-full"></div>
            <span class="text-sm">其他 <span class="text-gray-500">15%</span></span>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>
逻辑代码 92 行（超过 40 行限制，仅展示）

▶ 示例：完整管理面板

将所有部分组合成完整的管理后台面板：

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AdminKit - 管理面板</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: { 50: '#eff6ff', 100: '#dbeafe', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' }
          }
        }
      }
    }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100">

  <!-- 移动端顶栏 -->
  <div class="lg:hidden fixed top-0 w-full bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 z-40 px-4 py-3 flex items-center justify-between">
    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
    </button>
    <span class="font-bold">AdminKit</span>
    <button id="themeToggleMobile" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
      <span class="dark:hidden">🌙</span>
      <span class="hidden dark:inline">☀️</span>
    </button>
  </div>

  <!-- 遮罩 -->
  <div id="overlay" class="hidden fixed inset-0 bg-black/50 z-40 lg:hidden"></div>

  <!-- 侧边栏 -->
  <aside id="sidebar" class="fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transform -translate-x-full lg:translate-x-0 transition-transform">
    <div class="flex flex-col h-full">
      <div class="h-16 flex items-center justify-between px-6 border-b border-gray-200 dark:border-gray-800">
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
            <span class="text-white font-bold text-sm">A</span>
          </div>
          <span class="text-lg font-bold">AdminKit</span>
        </div>
        <button id="sidebarClose" class="lg:hidden p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      </div>

      <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 bg-primary-50 dark:bg-primary-700/20 text-primary-600 dark:text-primary-400 rounded-lg">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
          <span>仪表盘</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
          <span>用户管理</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
          <span>产品管理</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
          <span>订单记录</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          <span>系统设置</span>
        </a>
      </nav>

      <div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-9 h-9 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
            <span class="text-primary-600 dark:text-primary-400 font-semibold text-sm">陈</span>
          </div>
          <div class="min-w-0">
            <p class="text-sm font-medium truncate">陈小明</p>
            <p class="text-xs text-gray-500 truncate">admin@example.com</p>
          </div>
        </div>
        <button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
          <span class="dark:hidden text-sm">🌙</span>
          <span class="hidden dark:inline text-sm">☀️</span>
        </button>
      </div>
    </div>
  </aside>

  <!-- 主内容 -->
  <main class="lg:ml-64 pt-16 lg:pt-0 min-h-screen">
    <div class="p-6 space-y-6">
      <!-- 页面标题 -->
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
          <h1 class="text-2xl font-bold">仪表盘</h1>
          <p class="text-sm text-gray-500 mt-1">欢迎回来，陈小明</p>
        </div>
        <div class="flex items-center gap-3">
          <button class="px-4 py-2 border border-gray-200 dark:border-gray-700 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            导出报表
          </button>
          <button class="px-4 py-2 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700 transition-colors">
            + 新建
          </button>
        </div>
      </div>

      <!-- 统计卡片 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm text-gray-500">总用户</span>
            <div class="w-10 h-10 bg-blue-50 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            </div>
          </div>
          <p class="text-3xl font-bold mb-1">24,589</p>
          <div class="flex items-center gap-1 text-sm">
            <span class="text-green-600 dark:text-green-400">+12.5%</span>
            <span class="text-gray-500">较上月</span>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm text-gray-500">总收入</span>
            <div class="w-10 h-10 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
          </div>
          <p class="text-3xl font-bold mb-1">¥892,400</p>
          <div class="flex items-center gap-1 text-sm">
            <span class="text-green-600 dark:text-green-400">+8.2%</span>
            <span class="text-gray-500">较上月</span>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm text-gray-500">订单数</span>
            <div class="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
            </div>
          </div>
          <p class="text-3xl font-bold mb-1">3,847</p>
          <div class="flex items-center gap-1 text-sm">
            <span class="text-red-600 dark:text-red-400">-3.1%</span>
            <span class="text-gray-500">较上月</span>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm text-gray-500">转化率</span>
            <div class="w-10 h-10 bg-orange-50 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
            </div>
          </div>
          <p class="text-3xl font-bold mb-1">5.6%</p>
          <div class="flex items-center gap-1 text-sm">
            <span class="text-green-600 dark:text-green-400">+2.4%</span>
            <span class="text-gray-500">较上月</span>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
          <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-semibold">收入趋势</h3>
            <select class="px-3 py-1.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-xs focus:outline-none">
              <option>近 7 天</option>
              <option>近 30 天</option>
            </select>
          </div>
          <div class="h-48 flex items-end gap-2 px-2">
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-200 dark:bg-blue-900 rounded-t" style="height:45%"></div><span class="text-xs text-gray-500">一</span></div>
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height:65%"></div><span class="text-xs text-gray-500">二</span></div>
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height:50%"></div><span class="text-xs text-gray-500">三</span></div>
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-500 dark:bg-blue-600 rounded-t" style="height:80%"></div><span class="text-xs text-gray-500">四</span></div>
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-600 dark:bg-blue-500 rounded-t" style="height:70%"></div><span class="text-xs text-gray-500">五</span></div>
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height:90%"></div><span class="text-xs text-gray-500">六</span></div>
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height:60%"></div><span class="text-xs text-gray-500">日</span></div>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
          <h3 class="text-lg font-semibold mb-6">用户来源</h3>
          <div class="flex items-center justify-center">
            <div class="relative w-40 h-40">
              <svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
                <circle cx="18" cy="18" r="15.9" fill="none" stroke="#e5e7eb" stroke-width="3" class="dark:stroke-gray-700"/>
                <circle cx="18" cy="18" r="15.9" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="0"/>
                <circle cx="18" cy="18" r="15.9" fill="none" stroke="#10b981" stroke-width="3" stroke-dasharray="25 75" stroke-dashoffset="-40"/>
                <circle cx="18" cy="18" r="15.9" fill="none" stroke="#f59e0b" stroke-width="3" stroke-dasharray="20 80" stroke-dashoffset="-65"/>
                <circle cx="18" cy="18" r="15.9" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="15 85" stroke-dashoffset="-85"/>
              </svg>
              <div class="absolute inset-0 flex flex-col items-center justify-center">
                <span class="text-xl font-bold">100%</span>
              </div>
            </div>
            <div class="ml-8 space-y-2">
              <div class="flex items-center gap-2"><div class="w-3 h-3 bg-blue-500 rounded-full"></div><span class="text-sm">搜索 40%</span></div>
              <div class="flex items-center gap-2"><div class="w-3 h-3 bg-green-500 rounded-full"></div><span class="text-sm">直接 25%</span></div>
              <div class="flex items-center gap-2"><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><span class="text-sm">社交 20%</span></div>
              <div class="flex items-center gap-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><span class="text-sm">其他 15%</span></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
        <div class="p-4 border-b border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
          <h3 class="text-lg font-semibold">最近订单</h3>
          <input type="text" placeholder="搜索订单..." class="w-full sm:w-64 px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50">
        </div>
        <div class="overflow-x-auto">
          <table class="w-full min-w-[640px]">
            <thead>
              <tr class="border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
                <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">订单号</th>
                <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">客户</th>
                <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">金额</th>
                <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">状态</th>
                <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">日期</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
              <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                <td class="px-4 py-3 text-sm font-mono text-blue-600">#ORD-7891</td>
                <td class="px-4 py-3 text-sm">张三</td>
                <td class="px-4 py-3 text-sm font-medium">¥1,188</td>
                <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">已完成</span></td>
                <td class="px-4 py-3 text-sm text-gray-500">2025-01-15</td>
              </tr>
              <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                <td class="px-4 py-3 text-sm font-mono text-blue-600">#ORD-7892</td>
                <td class="px-4 py-3 text-sm">李四</td>
                <td class="px-4 py-3 text-sm font-medium">¥3,588</td>
                <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 rounded-full">处理中</span></td>
                <td class="px-4 py-3 text-sm text-gray-500">2025-01-14</td>
              </tr>
              <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                <td class="px-4 py-3 text-sm font-mono text-blue-600">#ORD-7893</td>
                <td class="px-4 py-3 text-sm">王五</td>
                <td class="px-4 py-3 text-sm font-medium">¥99</td>
                <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">已完成</span></td>
                <td class="px-4 py-3 text-sm text-gray-500">2025-01-13</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
          <p class="text-sm text-gray-500">显示 1-3 条，共 256 条</p>
          <div class="flex items-center gap-1">
            <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg disabled:opacity-50" disabled>上一页</button>
            <button class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg">1</button>
            <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg">2</button>
            <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg">下一页</button>
          </div>
        </div>
      </div>

      <!-- 表单区域 -->
      <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
        <h3 class="text-lg font-semibold mb-6">快速添加用户</h3>
        <form class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <input type="text" placeholder="姓名" class="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500">
          <input type="email" placeholder="邮箱" class="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500">
          <select class="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 appearance-none cursor-pointer">
            <option>选择角色</option>
            <option>管理员</option>
            <option>编辑</option>
            <option>访客</option>
          </select>
          <button type="submit" class="px-4 py-2.5 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700 active:bg-primary-800 transition-colors">
            添加用户
          </button>
        </form>
      </div>
    </div>
  </main>

  <script>
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    document.getElementById('sidebarToggle')?.addEventListener('click', () => {
      sidebar.classList.toggle('-translate-x-full');
      overlay.classList.toggle('hidden');
    });
    document.getElementById('sidebarClose')?.addEventListener('click', () => {
      sidebar.classList.add('-translate-x-full');
      overlay.classList.add('hidden');
    });
    overlay?.addEventListener('click', () => {
      sidebar.classList.add('-translate-x-full');
      overlay.classList.add('hidden');
    });
    const toggleTheme = () => document.documentElement.classList.toggle('dark');
    document.getElementById('themeToggle')?.addEventListener('click', toggleTheme);
    document.getElementById('themeToggleMobile')?.addEventListener('click', toggleTheme);
  </script>

</body>
</html>
逻辑代码 288 行（超过 40 行限制，仅展示）

4. 验收标准

5. 拓展方向

❓ 常见问题

Q Tailwind 的 grid 和 lex 什么时候用哪个？
A 一维布局（行或列）用 lex，二维布局（行和列同时控制）用 grid。导航栏、卡片行用 flex；仪表盘网格、图片画廊用 grid。
Q 如何在 Tailwind 中实现表格响应式？
A 用 overflow-x-auto 包裹表格容器，小屏幕时表格可以水平滚动。或者用 hidden lg:table 配合 lg:hidden 在不同断点显示不同布局。
Q Tailwind 的 @apply 指令什么时候用？
A 当你需要在多个元素上复用相同的 Tailwind 类组合时，可以用 @apply 提取到 CSS 类中。但过度使用会失去 Tailwind 的优势，建议仅在真正需要复用时使用。

📖 小节

📝 作业

  1. 基础（难度⭐）：使用 grid 创建一个 2×2 的仪表盘卡片布局，每个卡片显示不同的统计数据。
  2. 进阶（难度⭐⭐）：为仪表盘添加一个响应式数据表格，使用 overflow-x-auto 和 divide-y。
  3. 挑战（难度⭐⭐⭐）：实现一个完整的管理后台仪表盘，包含侧边栏导航、统计卡片、数据表格和图表占位区域。
Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏