# Personal Blog - Admin Dashboard UI 设计与实现文档

> **设计风格**: Modern Admin Dashboard  
> **版本**: v2.0  
> **更新日期**: 2026-04-19

---

## 1. 设计概述

### 1.1 设计理念

Admin Dashboard 采用现代化的 SaaS 管理后台设计，强调：

- **专业感**: 深色侧边栏 + 浅色内容区的高对比度设计
- **效率优先**: 信息密度适中，关键数据一目了然
- **视觉层次**: 清晰的视觉层级引导用户操作
- **一致性**: 所有组件遵循统一的设计语言

### 1.2 与访客端的区别

| 维度 | Admin Dashboard | 访客端 (Neobrutalism) |
|------|-----------------|----------------------|
| 用户 | 管理员 | 普通访客 |
| 目标 | 高效管理内容 | 阅读体验 |
| 风格 | 专业、现代 | 个性、艺术 |
| 色调 | 深墨绿 + 翠绿 | 奶油色 + 粉红 |

---

## 2. 色彩系统

### 2.1 CSS 变量定义

```css
:root {
  /* 侧边栏 */
  --admin-sidebar-bg: #0F172A;
  --admin-sidebar-hover: #1E293B;
  --admin-sidebar-active: #334155;
  --admin-sidebar-text: #94A3B8;
  --admin-sidebar-text-active: #FFFFFF;
  
  /* 主内容区 */
  --admin-bg: #F8FAFC;
  --admin-card: #FFFFFF;
  --admin-border: #E2E8F0;
  
  /* 主色调 - 翠绿 */
  --admin-primary: #10B981;
  --admin-primary-hover: #059669;
  --admin-primary-light: #D1FAE5;
  --admin-primary-subtle: #ECFDF5;
  
  /* 状态色 */
  --admin-success: #10B981;
  --admin-warning: #F59E0B;
  --admin-danger: #EF4444;
  --admin-info: #3B82F6;
  
  /* 文字 */
  --admin-text-primary: #0F172A;
  --admin-text-secondary: #64748B;
  --admin-text-muted: #94A3B8;
  --admin-text-inverse: #FFFFFF;
  
  /* 阴影 */
  --admin-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --admin-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --admin-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --admin-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* 圆角 */
  --admin-radius-sm: 6px;
  --admin-radius: 8px;
  --admin-radius-lg: 12px;
  --admin-radius-xl: 16px;
}
```

### 2.2 Tailwind 配置扩展

```javascript
// tailwind.config.js
theme: {
  extend: {
    colors: {
      admin: {
        sidebar: {
          DEFAULT: '#0F172A',
          hover: '#1E293B',
          active: '#334155',
          text: '#94A3B8',
          'text-active': '#FFFFFF',
        },
        bg: '#F8FAFC',
        card: '#FFFFFF',
        border: '#E2E8F0',
        primary: {
          DEFAULT: '#10B981',
          hover: '#059669',
          light: '#D1FAE5',
          subtle: '#ECFDF5',
        },
        text: {
          primary: '#0F172A',
          secondary: '#64748B',
          muted: '#94A3B8',
        }
      }
    },
    boxShadow: {
      'admin': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
      'admin-md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
      'admin-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
    }
  }
}
```

---

## 3. 布局架构

### 3.1 整体结构

```
┌─────────────────────────────────────────────────────────────┐
│ ┌────────────┐  ┌─────────────────────────────────────────┐ │
│ │            │  │ Header: Logo + Search + Actions         │ │
│ │  Sidebar   │  ├─────────────────────────────────────────┤ │
│ │  (240px)   │  │                                         │ │
│ │            │  │  Breadcrumbs (可选)                     │ │
│ │ 🏠 Dashboard│  │                                         │ │
│ │ 📝 Posts   │  │  ┌─────────────────────────────────┐   │ │
│ │ 🏷️ Tags    │  │  │ Page Title + Actions            │   │ │
│ │ 📁 Categories│ │  └─────────────────────────────────┘   │ │
│ │ 🖼️ Images  │  │                                         │ │
│ │ 💬 Comments│  │  ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐       │ │
│ │ ⚙️ Settings│  │  │Stat │ │Stat │ │Stat │ │Stat │       │ │
│ │            │  │  └─────┘ └─────┘ └─────┘ └─────┘       │ │
│ │ ───────────│  │                                         │ │
│ │ 🔗 External│  │  ┌─────────────────────────────────┐   │ │
│ │ 📊 Analytics│  │  │         Main Content            │   │ │
│ │ 🛒 Shop    │  │  │                                 │   │ │
│ └────────────┘  │  └─────────────────────────────────┘   │ │
│                 └─────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
```

### 3.2 布局组件

```jsx
// AdminLayout.jsx
const AdminLayout = ({ children }) => {
  return (
    <div className="min-h-screen bg-admin-bg flex">
      {/* 侧边栏 */}
      <Sidebar className="w-60 bg-admin-sidebar fixed h-full" />
      
      {/* 主内容区 */}
      <main className="flex-1 ml-60 min-h-screen">
        <Header className="sticky top-0 z-30 bg-white border-b border-admin-border" />
        <div className="p-6">
          {children}
        </div>
      </main>
    </div>
  )
}
```

---

## 4. 组件实现规范

### 4.1 侧边栏 (Sidebar)

```jsx
const Sidebar = () => {
  const menuGroups = [
    {
      title: '内容管理',
      items: [
        { icon: LayoutDashboard, label: 'Dashboard', path: '/admin' },
        { icon: FileText, label: '文章管理', path: '/admin/posts' },
        { icon: FolderOpen, label: '分类管理', path: '/admin/categories' },
        { icon: Tags, label: '标签管理', path: '/admin/tags' },
        { icon: Image, label: '图片管理', path: '/admin/images' },
        { icon: MessageSquare, label: '评论管理', path: '/admin/comments' },
      ]
    },
    {
      title: '系统设置',
      items: [
        { icon: Settings, label: '系统设置', path: '/admin/settings' },
      ]
    }
  ]

  return (
    <aside className="w-60 bg-admin-sidebar min-h-screen flex flex-col">
      {/* Logo */}
      <div className="h-16 flex items-center px-6 border-b border-gray-800">
        <span className="text-xl font-bold text-white">Blog Admin</span>
      </div>
      
      {/* Menu */}
      <nav className="flex-1 py-4 px-3 space-y-6 overflow-y-auto">
        {menuGroups.map((group, idx) => (
          <div key={idx}>
            <h3 className="px-3 text-xs font-semibold text-admin-sidebar-text uppercase tracking-wider mb-2">
              {group.title}
            </h3>
            <ul className="space-y-1">
              {group.items.map((item) => (
                <NavLink
                  key={item.path}
                  to={item.path}
                  className={({ isActive }) => `
                    flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium
                    transition-colors duration-200
                    ${isActive 
                      ? 'bg-admin-sidebar-active text-white' 
                      : 'text-admin-sidebar-text hover:bg-admin-sidebar-hover hover:text-white'
                    }
                  `}
                >
                  <item.icon className="w-5 h-5" />
                  {item.label}
                </NavLink>
              ))}
            </ul>
          </div>
        ))}
      </nav>
      
      {/* User */}
      <div className="p-4 border-t border-gray-800">
        <div className="flex items-center gap-3 px-3 py-2 rounded-lg bg-admin-sidebar-hover">
          <div className="w-8 h-8 rounded-full bg-admin-primary flex items-center justify-center text-white font-medium">
            A
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-medium text-white truncate">Admin</p>
            <p className="text-xs text-admin-sidebar-text truncate">admin@blog.com</p>
          </div>
          <LogOut className="w-4 h-4 text-admin-sidebar-text hover:text-white cursor-pointer" />
        </div>
      </div>
    </aside>
  )
}
```

### 4.2 头部 (Header)

```jsx
const Header = () => {
  return (
    <header className="h-16 bg-white border-b border-admin-border flex items-center justify-between px-6">
      {/* Search */}
      <div className="flex-1 max-w-md">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-admin-text-muted" />
          <input
            type="text"
            placeholder="搜索文章、评论..."
            className="w-full pl-10 pr-4 py-2 bg-gray-50 border border-transparent rounded-lg text-sm
              placeholder:text-admin-text-muted
              focus:bg-white focus:border-admin-primary/30 focus:ring-2 focus:ring-admin-primary/20
              transition-all duration-200"
          />
        </div>
      </div>
      
      {/* Actions */}
      <div className="flex items-center gap-3">
        <button className="relative p-2 text-admin-text-secondary hover:text-admin-text-primary hover:bg-gray-100 rounded-lg transition-colors">
          <Bell className="w-5 h-5" />
          <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-admin-danger rounded-full"></span>
        </button>
        <button className="p-2 text-admin-text-secondary hover:text-admin-text-primary hover:bg-gray-100 rounded-lg transition-colors">
          <HelpCircle className="w-5 h-5" />
        </button>
        <div className="h-6 w-px bg-admin-border mx-1"></div>
        <a href="/" target="_blank" className="flex items-center gap-2 px-3 py-1.5 text-sm text-admin-primary hover:bg-admin-primary-subtle rounded-lg transition-colors">
          <ExternalLink className="w-4 h-4" />
          查看网站
        </a>
      </div>
    </header>
  )
}
```

### 4.3 统计卡片 (StatsCard)

```jsx
const StatsCard = ({ title, value, change, changeType, icon: Icon, color = 'primary' }) => {
  const colorMap = {
    primary: 'bg-admin-primary-light text-admin-primary',
    success: 'bg-green-100 text-green-600',
    warning: 'bg-amber-100 text-amber-600',
    danger: 'bg-red-100 text-red-600',
    info: 'bg-blue-100 text-blue-600',
  }

  return (
    <div className="bg-white rounded-xl p-6 border border-admin-border shadow-admin hover:shadow-admin-md transition-shadow duration-200">
      <div className="flex items-start justify-between">
        <div>
          <p className="text-sm font-medium text-admin-text-secondary">{title}</p>
          <p className="text-2xl font-bold text-admin-text-primary mt-2">{value}</p>
          {change && (
            <div className="flex items-center mt-2 text-sm">
              <span className={`flex items-center font-medium ${
                changeType === 'up' ? 'text-admin-success' : 'text-admin-danger'
              }`}>
                {changeType === 'up' ? <TrendingUp className="w-4 h-4 mr-1" /> : <TrendingDown className="w-4 h-4 mr-1" />}
                {change}
              </span>
              <span className="text-admin-text-muted ml-2">较上月</span>
            </div>
          )}
        </div>
        <div className={`p-3 rounded-xl ${colorMap[color]}`}>
          <Icon className="w-6 h-6" />
        </div>
      </div>
    </div>
  )
}
```

### 4.4 数据表格 (DataTable)

```jsx
const DataTable = ({ columns, data, onEdit, onDelete }) => {
  return (
    <div className="bg-white rounded-xl border border-admin-border shadow-admin overflow-hidden">
      <table className="w-full">
        <thead className="bg-gray-50 border-b border-admin-border">
          <tr>
            {columns.map((col) => (
              <th key={col.key} className="px-6 py-4 text-left text-xs font-semibold text-admin-text-secondary uppercase tracking-wider">
                {col.title}
              </th>
            ))}
            <th className="px-6 py-4 text-right text-xs font-semibold text-admin-text-secondary uppercase tracking-wider">
              操作
            </th>
          </tr>
        </thead>
        <tbody className="divide-y divide-admin-border">
          {data.map((row, idx) => (
            <tr key={idx} className="hover:bg-gray-50 transition-colors">
              {columns.map((col) => (
                <td key={col.key} className="px-6 py-4">
                  {col.render ? col.render(row[col.key], row) : row[col.key]}
                </td>
              ))}
              <td className="px-6 py-4 text-right">
                <div className="flex items-center justify-end gap-2">
                  <button 
                    onClick={() => onEdit(row)}
                    className="p-2 text-admin-text-muted hover:text-admin-primary hover:bg-admin-primary-subtle rounded-lg transition-colors"
                  >
                    <Pencil className="w-4 h-4" />
                  </button>
                  <button 
                    onClick={() => onDelete(row)}
                    className="p-2 text-admin-text-muted hover:text-admin-danger hover:bg-red-50 rounded-lg transition-colors"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
```

### 4.5 按钮组件 (Button)

```jsx
const Button = ({ 
  children, 
  variant = 'primary', 
  size = 'md', 
  loading = false,
  disabled = false,
  ...props 
}) => {
  const variants = {
    primary: 'bg-admin-primary text-white hover:bg-admin-primary-hover focus:ring-admin-primary',
    secondary: 'bg-white text-admin-text-primary border border-admin-border hover:bg-gray-50 focus:ring-gray-200',
    ghost: 'bg-transparent text-admin-text-secondary hover:bg-gray-100 hover:text-admin-text-primary',
    danger: 'bg-admin-danger text-white hover:bg-red-600 focus:ring-red-500',
  }

  const sizes = {
    sm: 'px-3 py-1.5 text-xs rounded-md',
    md: 'px-4 py-2 text-sm rounded-lg',
    lg: 'px-6 py-2.5 text-base rounded-lg',
  }

  return (
    <button
      disabled={disabled || loading}
      className={`
        inline-flex items-center justify-center gap-2 font-medium
        transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2
        disabled:opacity-50 disabled:cursor-not-allowed
        ${variants[variant]}
        ${sizes[size]}
      `}
      {...props}
    >
      {loading && <Loader2 className="w-4 h-4 animate-spin" />}
      {children}
    </button>
  )
}
```

### 4.6 表单组件

```jsx
// Input
const Input = ({ label, error, ...props }) => {
  return (
    <div className="space-y-1.5">
      {label && <label className="block text-sm font-medium text-admin-text-secondary">{label}</label>}
      <input
        className={`
          w-full px-4 py-2.5 rounded-lg border bg-white text-admin-text-primary
          placeholder:text-admin-text-muted
          focus:outline-none focus:ring-2 focus:ring-admin-primary/20 focus:border-admin-primary
          transition-all duration-200
          ${error ? 'border-admin-danger focus:border-admin-danger focus:ring-red-200' : 'border-admin-border'}
        `}
        {...props}
      />
      {error && <p className="text-sm text-admin-danger">{error}</p>}
    </div>
  )
}

// Select
const Select = ({ label, options, ...props }) => {
  return (
    <div className="space-y-1.5">
      {label && <label className="block text-sm font-medium text-admin-text-secondary">{label}</label>}
      <div className="relative">
        <select
          className="w-full px-4 py-2.5 rounded-lg border border-admin-border bg-white text-admin-text-primary
            appearance-none focus:outline-none focus:ring-2 focus:ring-admin-primary/20 focus:border-admin-primary
            transition-all duration-200"
          {...props}
        >
          {options.map((opt) => (
            <option key={opt.value} value={opt.value}>{opt.label}</option>
          ))}
        </select>
        <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-admin-text-muted pointer-events-none" />
      </div>
    </div>
  )
}

// Textarea
const Textarea = ({ label, error, rows = 4, ...props }) => {
  return (
    <div className="space-y-1.5">
      {label && <label className="block text-sm font-medium text-admin-text-secondary">{label}</label>}
      <textarea
        rows={rows}
        className={`
          w-full px-4 py-2.5 rounded-lg border bg-white text-admin-text-primary
          placeholder:text-admin-text-muted resize-vertical
          focus:outline-none focus:ring-2 focus:ring-admin-primary/20 focus:border-admin-primary
          transition-all duration-200
          ${error ? 'border-admin-danger focus:border-admin-danger focus:ring-red-200' : 'border-admin-border'}
        `}
        {...props}
      />
      {error && <p className="text-sm text-admin-danger">{error}</p>}
    </div>
  )
}
```

### 4.7 卡片组件 (Card)

```jsx
const Card = ({ children, className = '' }) => {
  return (
    <div className={`bg-white rounded-xl border border-admin-border shadow-admin ${className}`}>
      {children}
    </div>
  )
}

const CardHeader = ({ title, description, action }) => {
  return (
    <div className="px-6 py-4 border-b border-admin-border flex items-center justify-between">
      <div>
        <h3 className="text-lg font-semibold text-admin-text-primary">{title}</h3>
        {description && <p className="text-sm text-admin-text-secondary mt-1">{description}</p>}
      </div>
      {action && <div>{action}</div>}
    </div>
  )
}

const CardContent = ({ children, className = '' }) => {
  return <div className={`px-6 py-4 ${className}`}>{children}</div>
}

const CardFooter = ({ children, className = '' }) => {
  return (
    <div className={`px-6 py-4 border-t border-admin-border bg-gray-50 rounded-b-xl ${className}`}>
      {children}
    </div>
  )
}
```

### 4.8 模态框 (Modal)

```jsx
const Modal = ({ isOpen, onClose, title, children, footer }) => {
  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-black/50 backdrop-blur-sm" 
        onClick={onClose}
      />
      
      {/* Modal */}
      <div className="relative bg-white rounded-xl shadow-admin-lg w-full max-w-lg mx-4 animate-in fade-in zoom-in-95 duration-200">
        <div className="flex items-center justify-between px-6 py-4 border-b border-admin-border">
          <h3 className="text-lg font-semibold text-admin-text-primary">{title}</h3>
          <button onClick={onClose} className="p-1 text-admin-text-muted hover:text-admin-text-primary rounded-lg hover:bg-gray-100 transition-colors">
            <X className="w-5 h-5" />
          </button>
        </div>
        
        <div className="px-6 py-4">
          {children}
        </div>
        
        {footer && (
          <div className="px-6 py-4 border-t border-admin-border bg-gray-50 rounded-b-xl flex justify-end gap-3">
            {footer}
          </div>
        )}
      </div>
    </div>
  )
}
```

### 4.9 Toast 通知

```jsx
const Toast = ({ message, type = 'success', onClose }) => {
  const icons = {
    success: CheckCircle,
    error: XCircle,
    warning: AlertTriangle,
    info: Info,
  }

  const colors = {
    success: 'bg-green-50 border-green-200 text-green-800',
    error: 'bg-red-50 border-red-200 text-red-800',
    warning: 'bg-amber-50 border-amber-200 text-amber-800',
    info: 'bg-blue-50 border-blue-200 text-blue-800',
  }

  const Icon = icons[type]

  useEffect(() => {
    const timer = setTimeout(onClose, 3000)
    return () => clearTimeout(timer)
  }, [onClose])

  return (
    <div className={`fixed top-4 right-4 z-50 flex items-center gap-3 px-4 py-3 rounded-lg border shadow-admin-lg animate-in slide-in-from-right ${colors[type]}`}>
      <Icon className="w-5 h-5" />
      <span className="text-sm font-medium">{message}</span>
      <button onClick={onClose} className="ml-2 hover:opacity-70">
        <X className="w-4 h-4" />
      </button>
    </div>
  )
}
```

### 4.10 分页组件 (Pagination)

```jsx
const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  return (
    <div className="flex items-center justify-between px-4 py-3 bg-white border-t border-admin-border">
      <div className="text-sm text-admin-text-secondary">
        第 <span className="font-medium text-admin-text-primary">{currentPage}</span> 页，共 <span className="font-medium">{totalPages}</span> 页
      </div>
      <div className="flex items-center gap-2">
        <button
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className="p-2 rounded-lg border border-admin-border text-admin-text-secondary hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          <ChevronLeft className="w-4 h-4" />
        </button>
        
        {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
          const page = i + 1
          return (
            <button
              key={page}
              onClick={() => onPageChange(page)}
              className={`w-9 h-9 rounded-lg text-sm font-medium transition-colors ${
                currentPage === page
                  ? 'bg-admin-primary text-white'
                  : 'text-admin-text-secondary hover:bg-gray-50'
              }`}
            >
              {page}
            </button>
          )
        })}
        
        <button
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
          className="p-2 rounded-lg border border-admin-border text-admin-text-secondary hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          <ChevronRight className="w-4 h-4" />
        </button>
      </div>
    </div>
  )
}
```

---

## 5. 页面实现

### 5.1 Dashboard 页面

```jsx
const Dashboard = () => {
  const stats = [
    { title: '总文章数', value: '128', change: '12%', changeType: 'up', icon: FileText },
    { title: '本月发布', value: '24', change: '8%', changeType: 'up', icon: TrendingUp },
    { title: '总浏览量', value: '45.2K', change: '23%', changeType: 'up', icon: Eye },
    { title: '待审评论', value: '18', change: '5%', changeType: 'down', icon: MessageSquare },
  ]

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-admin-text-primary">Dashboard</h1>
          <p className="text-admin-text-secondary mt-1">欢迎回来，今天也是创作的好日子！</p>
        </div>
        <Button>
          <Plus className="w-4 h-4" />
          写文章
        </Button>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat) => (
          <StatsCard key={stat.title} {...stat} />
        ))}
      </div>

      {/* Recent Posts */}
      <Card>
        <CardHeader 
          title="最近文章" 
          description="最近发布的 5 篇文章"
          action={<Button variant="ghost" size="sm">查看全部 →</Button>}
        />
        <CardContent>
          <DataTable 
            columns={[
              { key: 'title', title: '标题' },
              { key: 'category', title: '分类' },
              { key: 'views', title: '浏览量' },
              { key: 'date', title: '发布时间' },
            ]}
            data={recentPosts}
          />
        </CardContent>
      </Card>
    </div>
  )
}
```

---

## 6. 文件结构

```
frontend/src/
├── components/
│   └── admin/
│       ├── AdminLayout.jsx      # 后台布局
│       ├── Sidebar.jsx          # 侧边栏
│       ├── Header.jsx           # 顶部导航
│       ├── StatsCard.jsx        # 统计卡片
│       ├── DataTable.jsx        # 数据表格
│       ├── Button.jsx           # 按钮
│       ├── Card.jsx             # 卡片组件
│       ├── Input.jsx            # 输入框
│       ├── Select.jsx           # 下拉选择
│       ├── Modal.jsx            # 模态框
│       ├── Toast.jsx            # 通知提示
│       └── Pagination.jsx       # 分页
├── pages/
│   └── admin/
│       ├── Dashboard.jsx
│       ├── Posts.jsx
│       ├── PostEdit.jsx
│       ├── Categories.jsx
│       ├── Tags.jsx
│       ├── Images.jsx
│       ├── Comments.jsx
│       └── Settings.jsx
├── styles/
│   └── admin.css                # Admin 主题样式
└── hooks/
    └── useToast.js              # Toast 状态管理
```

---

## 7. 更新日志

| 日期 | 版本 | 变更内容 |
|------|------|----------|
| 2026-04-19 | v2.0 | 初始版本，完整的 Admin Dashboard 设计规范 |

---

*本文档定义了个人博客后台管理的完整 UI 设计规范与组件实现。*