全局样式

> **文档版本**: v1.0.0
> **创建日期**: 2026-02-12
> **最后更新**: 2026-02-12
> **维护人**: 未来鸟FutureBird码巢企业服务引擎开发组
> **状态**: [最新]

---

# 全局样式和主题配置文档

## &#128230; 全局配置概览

本项目已完成全局样式和主题配置，所有页面自动支持以下功能：

- ✅ **微信绿主题色** (#07C160)
- ✅ **亮色/暗色主题切换**
- ✅ **统一 UI 组件样式**
- ✅ **响应式布局**
- ✅ **全局 CSS 变量**
- ✅ **TypeScript 类型支持**

---

## &#127912; 主题配置

### 自动主题切换

主题系统支持三种模式：
- **auto**: 根据时间自动切换（6:00-18:00 亮色，18:00-6:00 暗色）
- **light**: 强制亮色主题
- **dark**: 强制暗色主题

### 在组件中使用主题

```tsx
import { useTheme } from '@/contexts/ThemeContext';

function MyComponent() {
  const { theme, toggleTheme, setThemeMode } = useTheme();
  const isDark = theme === 'dark';

return (
    <div>
      <p>当前主题: {theme}</p>
      <button onClick={toggleTheme}>切换主题</button>
    </div>
  );
}
```

### Tailwind CSS 主题类

```tsx
{/* 自动根据主题切换 */}
<div className="bg-white dark:bg-[#111827] text-gray-900 dark:text-white">
  内容
</div>

{/* 条件渲染 */}
<div className={isDark ? 'text-white' : 'text-gray-900'}>
  内容
</div>
```

---

## &#127919; 微信绿主题色

### 颜色配置

| 用途 | 颜色值 | CSS 类 |
|------|--------|--------|
| 主题色 | #07C160 | `bg-[#07C160]` / `text-[#07C160]` |
| 浅色背景 | #E8F7EF | `bg-[#E8F7EF]` |
| 暗色背景 | #1A3A2E | `dark:bg-[#1A3A2E]` |
| Hover 状态 | #06AD56 | `hover:text-[#06AD56]` |

### 使用示例

```tsx
{/* 按钮 */}
<Button className="bg-[#07C160] hover:bg-[#06AD56]">
  微信绿按钮
</Button>

{/* 图标背景 */}
<div className="h-8 w-8 rounded-full bg-[#E8F7EF] dark:bg-[#1A3A2E] flex items-center justify-center">
  <CheckCircle className="h-4 w-4 text-[#07C160]" />
</div>

{/* 文字 */}
<p className="text-[#07C160]">微信绿文字</p>
```

---

## &#129513; UI 组件库

### 已优化的组件

所有组件位于 `src/components/ui/` 目录，支持亮色/暗色主题：

| 组件 | 文件 | 状态 |
|------|------|------|
| 卡片 | `card.tsx` | ✅ 已优化 |
| 表格 | `table.tsx` | ✅ 已优化 |
| 按钮 | `button.tsx` | ✅ 已优化 |
| 输入框 | `input.tsx` | ✅ 已优化 |
| 下拉框 | `select.tsx` | ✅ 已优化 |
| 标签页 | `tabs.tsx` | ✅ 已优化 |
| 提示 | `alert.tsx` | ✅ 已优化 |
| 徽章 | `badge.tsx` | ✅ 已优化 |
| 对话框 | `dialog.tsx` | ✅ 已优化 |
| 工具提示 | `tooltip.tsx` | ✅ 已优化 |
| 加载骨架 | `skeleton.tsx` | ✅ 已优化 |
| 进度条 | `progress.tsx` | ✅ 已优化 |
| Toast | `toast.tsx` | ✅ 已优化 |

### 使用示例

```tsx
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';

function MyComponent() {
  return (
    <div>
      {/* 卡片 */}
      <Card>
        <CardHeader>
          <CardTitle>标题</CardTitle>
        </CardHeader>
        <CardContent>
          内容
        </CardContent>
      </Card>

{/* 按钮 */}
      <Button>默认按钮</Button>
      <Button variant="outline">轮廓按钮</Button>

{/* 输入框 */}
      <Input placeholder="请输入..." />

{/* 表格 */}
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>列名</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell>数据</TableCell>
          </TableRow>
        </TableBody>
      </Table>

{/* 徽章 */}
      <Badge variant="success">成功</Badge>
      <Badge variant="warning">警告</Badge>
    </div>
  );
}
```

---

## &#128208; 布局系统

### AdminLayout 组件

自动根据角色选择合适的布局：

```tsx
import { AdminLayout } from '@/components/layouts/AdminLayout';

export default function MyPage() {
  return (
    <AdminLayout 
      role="tenant"  // 'platform' | 'agent' | 'tenant' | 'employee'
      userName="管理员"
      userAvatar="/avatar.jpg"
    >
      {/* 页面内容 */}
      <div>你的页面内容</div>
    </AdminLayout>
  );
}
```

### 角色说明

| 角色 | 布局 | 侧边栏 |
|------|------|--------|
| platform | 平台管理端 | 平台功能菜单 |
| agent | 合作伙伴后台 | 合作伙伴功能菜单 |
| tenant | 企业管理后台 | 双级侧边栏（工资条 + 企业中心） |
| employee | 员工端 | 员工功能菜单 |

---

## &#127917; 全局工具类

### CSS 工具类

```css
/* 微信绿主题 */
.text-wechat-green { color: #07C160; }
.bg-wechat-green { background-color: #07C160; }
.border-wechat-green { border-color: #07C160; }

/* 微信绿背景 */
.bg-wechat-green-light { background-color: #E8F7EF; }
.dark\:bg-wechat-green-dark { background-color: #1A3A2E; }

/* 玻璃态效果 */
.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}

/* 动画效果 */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
.scale-in { animation: scaleIn 0.2s ease-in-out; }

/* 阴影效果 */
.shadow-soft { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.shadow-medium { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
.shadow-strong { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16); }
```

### 使用示例

```tsx
{/* 玻璃态效果 */}
<div className="glass rounded-lg p-6">
  内容
</div>

{/* 动画效果 */}
<div className="fade-in">
  淡入效果
</div>

{/* 阴影效果 */}
<div className="shadow-medium rounded-lg">
  内容
</div>
```

---

## &#128221; 开发新页面

### 快速开始

1. **使用页面模板**：
   ```bash
   cp src/templates/PageTemplate.tsx src/app/your-path/page.tsx
   ```

2. **修改基本信息**：
   - 页面标题
   - 页面描述
   - 数据类型定义
   - 业务逻辑

3. **实现功能**：
   - 添加需要的 UI 组件
   - 实现数据获取和展示
   - 添加交互逻辑

### 基本页面结构

```tsx
'use client';

import { AdminLayout } from '@/components/layouts/AdminLayout';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useTheme } from '@/contexts/ThemeContext';

export default function NewPage() {
  const { theme } = useTheme();
  const isDark = theme === 'dark';

return (
    <AdminLayout role="tenant" userName="管理员">
      <div className="space-y-6">
        {/* 页面头部 */}
        <div>
          <h1 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
            页面标题
          </h1>
          <p className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
            页面描述
          </p>
        </div>

{/* 内容区域 */}
        <Card>
          <CardHeader>
            <CardTitle>卡片标题</CardTitle>
          </CardHeader>
          <CardContent>
            内容
          </CardContent>
        </Card>
      </div>
    </AdminLayout>
  );
}
```

---

## &#127912; 样式规范

### 颜色使用

| 元素 | 亮色主题 | 暗色主题 |
|------|----------|----------|
| 背景 | `bg-white` | `dark:bg-[#111827]` |
| 卡片背景 | `bg-white` | `dark:bg-[#1F2937]` |
| 主要文字 | `text-gray-900` | `dark:text-white` |
| 次要文字 | `text-gray-600` | `dark:text-gray-300` |
| 辅助文字 | `text-gray-500` | `dark:text-gray-400` |
| 边框 | `border-[#E5E5E5]` | `dark:border-[#374151]` |

### 间距规范

```tsx
{/* 容器内边距 */}
className="p-4"  // 1rem (16px)
className="p-6"  // 1.5rem (24px)

{/* 元素间距 */}
className="space-y-4"  // 垂直间距
className="gap-4"  // 水平间距

{/* 组件间距 */}
className="mb-4"  // 下边距
className="mt-4"  // 上边距
```

### 字体规范

```tsx
{/* 字体大小 */}
text-xs     // 0.75rem (12px)
text-sm     // 0.875rem (14px)
text-base   // 1rem (16px)
text-lg     // 1.125rem (18px)
text-xl     // 1.25rem (20px)
text-2xl    // 1.5rem (24px)

{/* 字体粗细 */}
font-normal    // 400
font-medium    // 500
font-semibold  // 600
font-bold      // 700
```

---

## &#128295; 全局配置文件

### 主要配置文件

| 文件 | 说明 |
|------|------|
| `src/app/globals.css` | 全局 CSS 变量和工具类 |
| `src/contexts/ThemeContext.tsx` | 主题上下文和切换逻辑 |
| `src/components/layouts/AdminLayout.tsx` | 布局组件 |
| `src/types/globals.d.ts` | TypeScript 类型定义 |
| `src/templates/PageTemplate.tsx` | 页面开发模板 |

### 修改主题色

如需修改主题色，编辑 `src/app/globals.css`：

```css
:root {
  --primary: #YOUR_COLOR;  /* 修改为主要颜色 */
  --primary-foreground: #YOUR_FOREGROUND;  /* 修改为前景色 */
}

.dark {
  --primary: #YOUR_COLOR_DARK;  /* 暗色主题颜色 */
}
```

---

## &#128218; 相关资源

- [Tailwind CSS 文档](https://tailwindcss.com/docs)
- [shadcn/ui 组件库](https://ui.shadcn.com/)
- [Radix UI 组件库](https://www.radix-ui.com/)

---

## &#127881; 总结

✅ 全局主题配置已完成  
✅ 微信绿主题色已统一  
✅ UI 组件已优化  
✅ 支持亮色/暗色主题切换  
✅ 提供页面开发模板

**现在可以直接开始开发新页面了！** &#128640;