# Admin Common Components

统一的 Admin 后台页面组件库。

## 组件列表

### PageContainer
页面容器组件，统一页面布局和间距。

```tsx
import { PageContainer, PageSection } from './PageContainer';

<PageContainer spacing="default">
  <PageSection>
    {/* 内容 */}
  </PageSection>
</PageContainer>
```

### PageHeader
页面头部组件，统一标题、描述和操作按钮区域。

```tsx
import { PageHeader } from './PageHeader';
import { Users } from 'lucide-react';

<PageHeader
  title="用户管理"
  description="管理系统用户、角色和权限"
  icon={<Users className="h-6 w-6" />}
  actions={
    <>
      <Button>新建用户</Button>
      <RefreshButton onClick={refetch} loading={isLoading} />
    </>
  }
/>
```

### PageCard
卡片容器组件，用于包裹内容区块。

```tsx
import { PageCard } from './PageCard';
import { FolderOpen } from 'lucide-react';

<PageCard
  title="项目列表"
  icon={<FolderOpen className="h-5 w-5" />}
  headerActions={<Button>操作</Button>}
>
  {/* 内容 */}
</PageCard>
```

### PageFilter
筛选器区域组件，统一筛选器样式。

```tsx
import { PageFilter, FilterGroup, FilterLabel } from './PageFilter';
import { SearchButton } from './PageActions';

<PageFilter variant="default">
  <FilterGroup>
    <FilterLabel htmlFor="search">搜索</FilterLabel>
    <Input id="search" placeholder="搜索..." />
  </FilterGroup>
  <SearchButton onClick={handleSearch} />
</PageFilter>
```

### PageTable
表格包装组件，统一表格样式、加载状态和分页。

```tsx
import { PageTable, PageTablePagination, PageTableEmpty } from './PageTable';

<PageTable>
  <Table>
    <TableHeader>...</TableHeader>
    <TableBody>
      {data.length === 0 && <PageTableEmpty colSpan={5} />}
      {data.map(item => <TableRow key={item.id}>...</TableRow>)}
    </TableBody>
  </Table>
</PageTable>

<PageTablePagination
  page={page}
  totalPages={totalPages}
  total={total}
  onPageChange={setPage}
/>
```

### PageStats
统计卡片组件，用于仪表盘等页面。

```tsx
import { PageStats, PageStatCard } from './PageStats';
import { Users, HardDrive } from 'lucide-react';

<PageStats columns={4}>
  <PageStatCard
    title="总用户"
    value={1234}
    icon={<Users className="h-4 w-4" />}
    description="较上月增长 12%"
  />
  <PageStatCard
    title="存储空间"
    value="1.2 GB"
    icon={<HardDrive className="h-4 w-4" />}
    loading={isLoading}
  />
</PageStats>
```

### PageActions
操作按钮组件，包含常用的刷新、创建、搜索、导出按钮。

```tsx
import {
  PageActions,
  RefreshButton,
  CreateButton,
  SearchButton,
  ExportButton,
} from './PageActions';

<PageActions>
  <CreateButton onClick={handleCreate} label="新建用户" />
  <RefreshButton onClick={refetch} loading={isLoading} />
</PageActions>
```

## 使用示例

### 完整的列表页面

```tsx
'use client';

import {
  PageContainer,
  PageHeader,
  PageCard,
  PageFilter,
  PageTable,
  PageTablePagination,
  RefreshButton,
  CreateButton,
} from '@/components/admin/common';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Users } from 'lucide-react';

export default function UsersPage() {
  return (
    <PageContainer>
      <PageHeader
        title="用户管理"
        description="管理系统用户"
        icon={<Users className="h-6 w-6" />}
        actions={
          <>
            <CreateButton onClick={handleCreate} />
            <RefreshButton onClick={refetch} loading={isLoading} />
          </>
        }
      />

      <PageFilter variant="ghost">
        <div className="space-y-2">
          <Label>搜索</Label>
          <Input placeholder="搜索用户..." />
        </div>
      </PageFilter>

      <PageCard title="用户列表">
        <PageTable>
          <Table>...</Table>
        </PageTable>
      </PageCard>

      <PageTablePagination
        page={page}
        totalPages={totalPages}
        total={total}
        onPageChange={setPage}
      />
    </PageContainer>
  );
}
```

## 迁移指南

### 从旧页面迁移到新组件

1. **页面容器**: 将 `py-6 space-y-6` 替换为 `<PageContainer>`
2. **页面头部**: 将分散的标题、描述和操作按钮替换为 `<PageHeader>`
3. **筛选器**: 将分散的筛选器替换为 `<PageFilter>`
4. **表格**: 将 `<div className="border rounded-lg"><Table>...</Table></div>` 替换为 `<PageTable>`
5. **分页**: 将分散的分页按钮替换为 `<PageTablePagination>`
