Tailwindcss Styling

文字颜色

text-white        <!-- 主要文字 -->
text-gray-300     <!-- 次要文字 -->
text-gray-400     <!-- 描述文字 -->
text-gray-500     <!-- 占位符文字 -->

状态颜色

text-blue-400     <!-- 信息/链接 -->
text-green-400    <!-- 成功/白名单/点赞 -->
text-red-400      <!-- 错误/删除/黑名单 -->
text-orange-300   <!-- 警告/待处理 -->
text-purple-400   <!-- 特殊状态 -->
text-pink-400     <!-- 强调数据 -->
text-yellow-400   <!-- 提示/警告 -->

二、布局系统

页面布局模板

<template>
  <!-- 标准页面容器 -->
  <div class="flex-1 p-8 overflow-y-auto">

    <!-- 页面头部 -->
    <header class="flex justify-between items-center mb-8">
      <div>
        <h2 class="text-2xl font-bold">页面标题</h2>
        <p class="text-gray-400 mt-1">页面描述文字</p>
      </div>
      <div class="flex items-center space-x-4">
        <!-- 头部操作按钮 -->
      </div>
    </header>

    <!-- 页面内容 -->
    <div class="content-area">
      <!-- 内容区域 -->
    </div>

  </div>
</template>

网格布局系统

<!-- 响应式网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <!-- 自动适配：1列 → 2列 → 4列 -->
</div>

<!-- 卡片网格（常用） -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-6 items-start">
  <!-- 任务卡片网格 -->
</div>

<!-- 两列布局 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
  <!-- 左右分栏 -->
</div>

Flex 布局模式

<!-- 水平居中，两端对齐 -->
<div class="flex justify-between items-center">
  <div>左侧内容</div>
  <div>右侧内容</div>
</div>

<!-- 水平居中，垂直居中 -->
<div class="flex items-center justify-center">
  <div>居中内容</div>
</div>

<!-- 垂直布局 -->
<div class="flex flex-col space-y-4">
  <div>项目1</div>
  <div>项目2</div>
</div>

间距规范

<!-- 页面内边距 -->
class="p-8"   <!-- 32px - 页面级 -->
class="p-6"   <!-- 24px - 卡片级 -->
class="p-4"   <!-- 16px - 小区域级 -->

<!-- 外边距 -->
class="mb-8"  <!-- 32px - 大间距 -->
class="mb-6"  <!-- 24px - 中间距 -->
class="mb-4"  <!-- 16px - 标准间距 -->
class="mb-2"  <!-- 8px - 小间距 -->

<!-- Flex 项目间距 -->
class="space-x-4"  <!-- 水平间距 16px -->
class="space-y-2"  <!-- 垂直间距 8px -->

三、卡片组件样式

主卡片（深色）

<template>
  <!-- 标准主卡片 -->
  <div class="bg-gray-800 rounded-lg shadow-lg p-6">
    <h3 class="text-lg font-bold mb-4">卡片标题</h3>
    <p class="text-gray-400">卡片内容</p>
  </div>

  <!-- 带悬停效果的卡片 -->
  <div class="bg-gray-800 rounded-lg shadow-md hover:shadow-lg
              transform hover:-translate-y-1
              transition-all duration-200 p-6">
    <h3 class="text-lg font-semibold text-center mb-2">悬停卡片</h3>
  </div>
</template>

次级卡片（较浅）

<template>
  <div class="bg-gray-700 rounded-lg p-6">
    <h3 class="text-lg font-medium">次级卡片</h3>
    <p class="text-sm text-gray-400 mt-2">用于次要信息展示</p>
  </div>
</template>

数据卡片（带图标）

<template>
  <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
    <div class="flex justify-between items-center mb-2">
      <h3 class="text-lg">数据标题</h3>
      <i class="fas fa-chart-line text-2xl text-primary"></i>
    </div>
    <p class="text-3xl font-bold text-primary mb-1">1,234</p>
    <p class="text-sm text-gray-400">数据描述</p>
  </div>
</template>

四、按钮系统

主要按钮（Primary）

<template>
  <!-- 标准主按钮 -->
  <button class="bg-blue-600 hover:bg-blue-700
                text-white px-4 py-2 rounded-lg
                transition-colors duration-200
                focus:outline-none focus:ring-2 focus:ring-blue-500">
    <i class="fas fa-plus mr-2"></i>
    <span>添加</span>
  </button>

  <!-- 较小版本 -->
  <button class="bg-blue-500 hover:bg-blue-600
                text-white px-3 py-1.5 rounded-md text-sm">
    操作
  </button>

  <!-- 带图标的按钮（左对齐图标） -->
  <button class="bg-blue-600 hover:bg-blue-700
                text-white px-4 py-2 rounded-lg">
    <i class="fas fa-sync-alt mr-2"></i>
    刷新数据
  </button>
</template>

成功按钮（Secondary）

<template>
  <button class="bg-green-500 hover:bg-green-600
                text-white px-4 py-2 rounded-lg
                transition-colors duration-200">
    <i class="fas fa-check mr-2"></i>
    确认
  </button>
</template>

危险按钮

<template>
  <button class="bg-red-500 hover:bg-red-600
                text-white px-4 py-2 rounded-lg
                transition-colors duration-200">
    <i class="fas fa-trash-alt mr-2"></i>
    删除
  </button>
</template>

次要按钮（灰色）

<template>
  <button class="bg-gray-600 hover:bg-gray-500
                text-white px-4 py-2 rounded-lg
                transition-colors duration-200">
    取消
  </button>
</template>

禁用状态

<template>
  <button disabled
          class="bg-blue-600 text-white px-4 py-2 rounded-lg
                 disabled:opacity-50 disabled:cursor-not-allowed">
    执行中...
  </button>
</template>

图标按钮（圆形）

<template>
  <button class="w-10 h-10 rounded-full bg-blue-600 hover:bg-blue-700
                text-white flex items-center justify-center
                transition-colors duration-200">
    <i class="fas fa-plus"></i>
  </button>
</template>

文字链接按钮

<template>
  <button class="text-blue-400 hover:text-blue-300
                focus:outline-none">
    <i class="fas fa-edit mr-1"></i>
    编辑
  </button>

  <button class="text-red-400 hover:text-red-300">
    <i class="fas fa-trash-alt mr-1"></i>
    删除
  </button>
</template>

五、表单元素

输入框（标准）

<template>
  <!-- 文本输入框 -->
  <input
    type="text"
    v-model="inputValue"
    placeholder="请输入内容"
    class="w-full bg-gray-700 text-white px-4 py-2 rounded-md
           focus:outline-none focus:ring-2 focus:ring-blue-500
           placeholder-gray-500"
  />

  <!-- 带图标的输入框 -->
  <div class="relative">
    <input
      type="text"
      placeholder="搜索..."
      class="w-full bg-gray-700 text-white px-4 py-2 rounded-md
             pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
    <i class="fas fa-search absolute left-3 top-1/2
             transform -translate-y-1/2 text-gray-400"></i>
  </div>

  <!-- 搜索框（右侧按钮） -->
  <div class="flex">
    <input
      type="text"
      v-model="searchQuery"
      placeholder="搜索..."
      class="flex-grow bg-gray-700 text-white px-4 py-2 rounded-l-md
             focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
    <button
      @click="handleSearch"
      class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-md
             focus:outline-none focus:ring-2 focus:ring-blue-500"
    >
      <i class="fas fa-search"></i>
    </button>
  </div>
</template>

下拉选择框

<template>
  <select
    v-model="selectedValue"
    class="bg-gray-700 text-white px-4 py-2 rounded-md
           focus:outline-none focus:ring-2 focus:ring-blue-500
           appearance-none cursor-pointer"
  >
    <option value="option1">选项 1</option>
    <option value="option2">选项 2</option>
  </select>
</template>

标签输入（Tag Input）

<template>
  <!-- 标签显示 -->
  <div class="flex flex-wrap gap-2">
    <span
      v-for="tag in tags"
      :key="tag"
      class="bg-gray-700 text-white px-3 py-1 rounded-full
             flex items-center text-sm"
    >
      {{ tag }}
      <button
        @click="removeTag(tag)"
        class="ml-2 text-gray-400 hover:text-white"
      >
        <i class="fas fa-times"></i>
      </button>
    </span>
  </div>
</template>

六、数据展示

表格样式

<template>
  <div class="bg-gray-800 rounded-lg overflow-hidden">
    <table class="w-full">
      <thead>
        <tr class="bg-gray-700">
          <th class="px-6 py-3 text-left text-xs font-medium
                     text-gray-300 uppercase tracking-wider">
            列名 1
          </th>
          <th class="px-6 py-3 text-left text-xs font-medium
                     text-gray-300 uppercase tracking-wider">
            列名 2
          </th>
          <th class="px-6 py-3 text-left text-xs font-medium
                     text-gray-300 uppercase tracking-wider">
            操作
          </th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-700">
        <tr v-for="item in items" :key="item.id"
            class="hover:bg-gray-750">
          <td class="px-6 py-4 whitespace-nowrap">
            {{ item.value }}
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            {{ item.name }}
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <button class="text-blue-400 hover:text-blue-300 mr-3">
              <i class="fas fa-edit mr-1"></i>编辑
            </button>
            <button class="text-red-400 hover:text-red-300">
              <i class="fas fa-trash-alt mr-1"></i>删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

状态徽章（Badge）

<template>
  <!-- 成功状态 -->
  <span class="bg-green-500 text-white px-2 py-1
             text-xs font-semibold rounded-full">
    成功
  </span>

  <!-- 运行中状态 -->
  <span class="bg-blue-500 text-white px-2 py-1
             text-xs font-semibold rounded-full">
    运行中
  </span>

  <!-- 错误状态 -->
  <span class="bg-red-400 text-white px-2 py-1
             text-xs font-semibold rounded-full">
    错误
  </span>

  <!-- 等待状态 -->
  <span class="bg-gray-500 text-white px-2 py-1
             text-xs font-semibold rounded-full">
    等待中
  </span>
</template>

信息提示框

<template>
  <!-- 蓝色信息框 -->
  <div class="bg-blue-600 text-white p-4 rounded-lg">
    <i class="fas fa-info-circle mr-2"></i>
    这是一条重要的提示信息
  </div>

  <!-- 红色警告框 -->
  <div class="bg-red-600 text-white p-4 rounded-lg">
    <i class="fas fa-exclamation-triangle mr-2"></i>
    这是一条警告信息
  </div>

  <!-- 绿色成功框 -->
  <div class="bg-green-600 text-white p-4 rounded-lg">
    <i class="fas fa-check-circle mr-2"></i>
    操作成功
  </div>
</template>

七、导航菜单

侧边栏导航

<template>
  <nav class="w-64 bg-gray-800 p-4 flex flex-col">
    <!-- Logo 区域 -->
    <div class="mb-8">
      <h1 class="text-2xl font-bold text-primary">Logo</h1>
    </div>

    <!-- 菜单列表 -->
    <ul class="space-y-2 flex-grow">
      <li>
        <router-link
          to="/home"
          class="flex items-center p-3 text-gray-300
                 hover:bg-gray-700 rounded-md
                 transition-colors duration-200"
          active-class="bg-primary"
        >
          <i class="fas fa-home w-6"></i>
          <span class="ml-3">首页</span>
        </router-link>
      </li>
      <li>
        <router-link
          to="/tasks"
          class="flex items-center p-3 text-gray-300
                 hover:bg-gray-700 rounded-md"
          active-class="bg-primary"
        >
          <i class="fas fa-tasks w-6"></i>
          <span class="ml-3">任务管理</span>
        </router-link>
      </li>
    </ul>
  </nav>
</template>

面包屑导航

<template>
  <nav class="flex items-center space-x-2 text-sm mb-6">
    <router-link to="/" class="text-gray-400 hover:text-white">
      首页
    </router-link>
    <i class="fas fa-chevron-right text-gray-600"></i>
    <router-link to="/tasks" class="text-gray-400 hover:text-white">
      任务管理
    </router-link>
    <i class="fas fa-chevron-right text-gray-600"></i>
    <span class="text-gray-300">任务详情</span>
  </nav>
</template>

八、模态框（Modal）

<template>
  <!-- 遮罩层 -->
  <div class="fixed inset-0 bg-black bg-opacity-50
              flex items-center justify-center z-50">
    <!-- 模态框主体 -->
    <div class="bg-gray-800 p-8 rounded-lg
                w-2/3 max-w-2xl
                max-h-[90vh] overflow-y-auto">
      <!-- 标题 -->
      <h3 class="text-xl font-bold mb-4">模态框标题</h3>

      <!-- 内容 -->
      <div class="mb-6">
        <p class="text-gray-400">模态框内容...</p>
      </div>

      <!-- 操作按钮 -->
      <div class="flex justify-end space-x-4">
        <button
          @click="closeModal"
          class="px-4 py-2 bg-gray-600 text-white rounded-md
                 hover:bg-gray-500"
        >
          取消
        </button>
        <button
          @click="confirmAction"
          class="px-4 py-2 bg-blue-500 text-white rounded-md
                 hover:bg-blue-600"
        >
          确认
        </button>
      </div>
    </div>
  </div>
</template>

九、列表项

标准列表项

<template>
  <div class="bg-gray-700 rounded-lg p-4
              hover:bg-gray-600
              transition-colors duration-200">
    <div class="flex justify-between items-center">
      <div>
        <h4 class="text-lg font-semibold">列表项标题</h4>
        <p class="text-sm text-gray-400 mt-1">描述信息</p>
      </div>
      <div class="flex items-center space-x-2">
        <button class="text-blue-400 hover:text-blue-300">
          <i class="fas fa-edit"></i>
        </button>
        <button class="text-red-400 hover:text-red-300">
          <i class="fas fa-trash-alt"></i>
        </button>
      </div>
    </div>
  </div>
</template>

关键词标签列表

<template>
  <div class="bg-gray-800 rounded-lg p-4">
    <!-- 输入区域 -->
    <div class="flex mb-4">
      <input
        v-model="newKeyword"
        placeholder="添加新关键词"
        class="flex-grow mr-4 bg-gray-700 text-white
               px-4 py-2 rounded-l-md
               focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      <button
        @click="addKeyword"
        class="bg-blue-500 hover:bg-blue-600 text-white
               px-4 py-2 rounded-r-md
               focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <i class="fas fa-plus mr-2"></i>
        添加
      </button>
    </div>

    <!-- 标签列表 -->
    <div class="flex flex-wrap" style="max-height: 200px; overflow: auto">
      <div
        v-for="keyword in keywordList"
        :key="keyword.id"
        class="bg-gray-700 text-white px-3 py-1
               rounded-full mr-2 mb-2
               flex items-center"
      >
        <span>{{ keyword.value }}</span>
        <button
          @click="removeKeyword(keyword)"
          class="ml-2 text-red-400 hover:text-red-300"
        >
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
  </div>
</template>

十、常见布局模式

左右分栏布局

<template>
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- 左侧主内容 (占2列) -->
    <div class="lg:col-span-2">
      <div class="bg-gray-800 rounded-lg p-6">
        <h3 class="text-lg font-bold mb-4">主内容</h3>
        <!-- 主要内容 -->
      </div>
    </div>

    <!-- 右侧边栏 (占1列) -->
    <div class="lg:col-span-1">
      <div class="bg-gray-800 rounded-lg p-6">
        <h3 class="text-lg font-bold mb-4">侧边栏</h3>
        <!-- 侧边栏内容 -->
      </div>
    </div>
  </div>
</template>

上下堆叠布局

<template>
  <div class="space-y-6">
    <div class="bg-gray-800 rounded-lg p-6">
      <!-- 第一部分 -->
    </div>

    <div class="bg-gray-800 rounded-lg p-6">
      <!-- 第二部分 -->
    </div>

    <div class="bg-gray-800 rounded-lg p-6">
      <!-- 第三部分 -->
    </div>
  </div>
</template>

居中布局

<template>
  <!-- 水平垂直居中 -->
  <div class="flex items-center justify-center min-h-screen">
    <div class="bg-gray-800 rounded-lg p-8 max-w-md w-full">
      <!-- 居中的内容 -->
    </div>
  </div>
</template>

十一、悬停和交互效果

卡片悬停效果

<template>
  <!-- 标准悬停效果 -->
  <div class="bg-gray-800 rounded-lg p-6
              hover:shadow-lg
              transform hover:-translate-y-1
              transition-all duration-200">
    <!-- 卡片内容 -->
  </div>

  <!-- 点击效果 -->
  <div class="bg-gray-800 rounded-lg p-6
              active:shadow-inner
              transition-all duration-200">
    <!-- 卡片内容 -->
  </div>
</template>

按钮悬停效果

<template>
  <!-- 颜色过渡 -->
  <button class="bg-blue-600 hover:bg-blue-700
                text-white px-4 py-2 rounded-lg
                transition-colors duration-200">
    按钮
  </button>

  <!-- 缩放效果 -->
  <button class="bg-blue-600 hover:scale-105
                text-white px-4 py-2 rounded-lg
                transition-transform duration-200">
    按钮
  </button>
</template>

链接悬停效果

<template>
  <a href="#" class="text-blue-400 hover:text-blue-300
                 transition-colors duration-200">
    链接文字
  </a>

  <!-- 带下划线动画 -->
  <a href="#" class="text-blue-400 hover:text-blue-300
                 border-b border-transparent
                 hover:border-blue-300
                 transition-all duration-200">
    链接文字
  </a>
</template>

十二、响应式设计

断点系统

<!-- TailwindCSS 默认断点 -->