admin/nanocode

Fork 0

Files

T

Ubuntu 32b43f85bd a

2026-07-03 16:58:28 +08:00

17 KiB

Raw Permalink Blame History

Personal Blog - Modern Dashboard 设计风格文档

设计风格: Modern SaaS Dashboard
参考来源: Apex Dashboard
版本: v1.0
更新日期: 2026-04-18

1. 设计理念

1.1 什么是 Modern Dashboard 风格？

Modern Dashboard 是一种现代化的 SaaS 管理后台设计风格，特点包括：

深色侧边导航: 高对比度的深色侧边栏，聚焦内容区域
浅色主内容区: 干净、明亮的白色/浅灰背景
柔和圆角: 8px-16px 圆角，友好且现代
微阴影: 柔和的投影营造层次感
绿色主色调: 代表增长、成功、活力
数据驱动: 强调指标卡片、图表展示
简洁图标: 线性图标，统一风格

1.2 与当前 Neobrutalism 风格对比

特性	Neobrutalism (当前)	Modern Dashboard (新风格)
侧边栏	奶油色 `#FEF9E7`	深墨绿 `#0F172A`
主背景	奶油色	浅灰白 `#F8FAFC`
边框	2px 纯黑硬边框	1px 浅灰边框或无
圆角	0px (直角)	8-16px (圆角)
阴影	4px 硬阴影	柔和弥散阴影
主色调	粉红 `#FF6B9D`	翠绿 `#10B981`
按钮风格	位移点击效果	悬停微动 + 渐变
卡片风格	硬边框 + 硬阴影	无边框 + 软阴影

2. 色彩系统

2.1 主色调

// tailwind.config.js - Modern Dashboard 配色
colors: {
  'dashboard': {
    // 侧边栏深色
    'sidebar': '#0F172A',      // 深墨绿/深蓝灰
    'sidebar-active': '#1E293B', // 激活项背景
    'sidebar-text': '#94A3B8',   // 侧边栏文字
    'sidebar-text-active': '#FFFFFF', // 激活文字
    
    // 主内容区
    'bg': '#F8FAFC',           // 主背景 - 极浅灰
    'card': '#FFFFFF',         // 卡片背景 - 纯白
    
    // 强调色
    'primary': '#10B981',      // 主色调 - 翠绿
    'primary-hover': '#059669', // 悬停深绿
    'primary-light': '#D1FAE5', // 浅绿背景
    
    // 状态色
    'success': '#10B981',      // 成功 - 绿
    'warning': '#F59E0B',      // 警告 - 橙
    'danger': '#EF4444',       // 危险 - 红
    'info': '#3B82F6',         // 信息 - 蓝
    
    // 文字
    'text-primary': '#0F172A',   // 主要文字
    'text-secondary': '#64748B', // 次要文字
    'text-muted': '#94A3B8',     // 弱化文字
    
    // 边框
    'border': '#E2E8F0',       // 浅色边框
  }
}

2.2 使用规范

颜色	用途
`dashboard-sidebar`	侧边栏背景
`dashboard-sidebar-active`	当前选中菜单项
`dashboard-bg`	主内容区背景
`dashboard-card`	卡片、面板背景
`dashboard-primary`	主按钮、链接、强调
`dashboard-primary-light`	图标背景、标签背景
`dashboard-success`	增长指标、成功状态
`dashboard-warning`	警告提示
`dashboard-danger`	删除操作、错误提示
`dashboard-text-primary`	标题、主要内容
`dashboard-text-secondary`	描述、辅助文字
`dashboard-border`	分割线、卡片边框

3. 排版系统

3.1 字体

fontFamily: {
  'sans': ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
}

Inter 作为主要字体，现代、清晰、专业
系统字体栈作为后备

3.2 字号规范

元素	字号	字重	用途
页面标题	`text-2xl` (24px)	`font-semibold` (600)	Dashboard 标题
卡片标题	`text-base` (16px)	`font-medium` (500)	卡片/面板标题
大数字	`text-3xl` (30px)	`font-bold` (700)	统计数据展示
正文	`text-sm` (14px)	`font-normal` (400)	段落文字
小字	`text-xs` (12px)	`font-medium` (500)	标签、时间戳
按钮文字	`text-sm` (14px)	`font-medium` (500)	按钮内文字
侧边栏菜单	`text-sm` (14px)	`font-medium` (500)	导航菜单

4. 阴影系统

4.1 阴影定义

boxShadow: {
  'card': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
  'card-hover': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  'dropdown': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
}

4.2 使用场景

阴影	用途
`shadow-card`	标准卡片、面板
`shadow-card-hover`	卡片悬停状态
`shadow-dropdown`	下拉菜单、弹窗

5. 组件规范

5.1 按钮 (Button)

// 基础样式
const baseClasses = 'inline-flex items-center justify-center font-medium 
  transition-all duration-200 rounded-lg focus:outline-none focus:ring-2 
  focus:ring-offset-2'

// 变体
primary:   'bg-dashboard-primary text-white hover:bg-dashboard-primary-hover 
            focus:ring-dashboard-primary shadow-sm'
secondary: 'bg-white text-dashboard-text-primary border border-dashboard-border 
            hover:bg-gray-50 focus:ring-dashboard-border'
ghost:     'bg-transparent text-dashboard-text-secondary 
            hover:bg-gray-100 hover:text-dashboard-text-primary'
danger:    'bg-dashboard-danger text-white hover:bg-red-600 
            focus:ring-red-500'

// 尺寸
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'

交互效果:

默认: 轻微阴影
悬停: 背景色加深，阴影增强
点击: 轻微下沉效果

5.2 卡片 (Card)

// 样式
'bg-white rounded-xl shadow-card border border-dashboard-border'

// 悬停效果 (可选)
'hover:shadow-card-hover transition-shadow duration-200'

结构组件:

CardHeader: 头部区域，含标题和可选操作
CardContent: 内容区域
CardFooter: 底部操作区

5.3 统计卡片 (Stats Card)

// 示例结构
<div className="bg-white rounded-xl shadow-card p-6 border border-dashboard-border">
  <div className="flex items-center justify-between">
    <div>
      <p className="text-sm font-medium text-dashboard-text-secondary">
        总文章数
      </p>
      <p className="text-3xl font-bold text-dashboard-text-primary mt-2">
        128
      </p>
      <div className="flex items-center mt-2 text-sm">
        <span className="text-dashboard-success flex items-center">
          ↑ 12.5%
        </span>
        <span className="text-dashboard-text-muted ml-2">较上月</span>
      </div>
    </div>
    <div className="p-3 rounded-lg bg-dashboard-primary-light">
      <FileText className="w-6 h-6 text-dashboard-primary" />
    </div>
  </div>
</div>

5.4 输入框 (Input)

// 样式
'w-full px-4 py-2.5 rounded-lg border border-dashboard-border bg-white
 text-dashboard-text-primary placeholder:text-dashboard-text-muted
 focus:outline-none focus:ring-2 focus:ring-dashboard-primary/20 
 focus:border-dashboard-primary transition-all duration-200'

5.5 侧边栏导航

// 菜单项样式 - 默认
'flex items-center gap-3 px-4 py-2.5 rounded-lg text-dashboard-sidebar-text
 hover:bg-dashboard-sidebar-active hover:text-white transition-colors duration-200'

// 菜单项样式 - 激活
'flex items-center gap-3 px-4 py-2.5 rounded-lg bg-dashboard-sidebar-active
 text-white font-medium'

// 分组标题
'px-4 py-2 text-xs font-semibold text-dashboard-text-muted uppercase tracking-wider'

6. 布局系统

6.1 后台布局 (Layout)

┌─────────────────────────────────────────────────────────┐
│  ┌──────────┐  ┌─────────────────────────────────────┐  │
│  │          │  │  Search                    [🔔][👤] │  │
│  │  Sidebar │  ├─────────────────────────────────────┤  │
│  │  (dark)  │  │                                     │  │
│  │          │  │  ┌───────────────────────────────┐  │  │
│  │  🏠 Dashboard │  │  Dashboard                    │  │  │
│  │  📝 Posts     │  │  Welcome back...              │  │  │
│  │  🏷️ Categories│  │                               │  │  │
│  │  🖼️ Images    │  │  ┌────┐ ┌────┐ ┌────┐ ┌────┐ │  │  │
│  │  ⚙️ Settings  │  │  │Card│ │Card│ │Card│ │Card│ │  │  │
│  │               │  │  └────┘ └────┘ └────┘ └────┘ │  │  │
│  │  ─────────    │  │                               │  │  │
│  │  📊 Analytics │  │  ┌───────────────────────┐   │  │  │
│  │  💼 eCommerce │  │  │    Content Area       │   │  │  │
│  │               │  │  └───────────────────────┘   │  │  │
│  └──────────┘  └─────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────┘

结构:

左侧深色固定侧边栏 (240px)
右侧主内容区，可滚动
顶部固定 Header，含搜索和用户操作

6.2 首页布局 (Home)

两种展示模式：

卡片模式:

┌─────────────────────────────────────────────────────────┐
│  Logo  Search...                        [分类筛选]      │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │
│  │ 封面图      │  │ 封面图      │  │ 封面图      │     │
│  │             │  │             │  │             │     │
│  ├─────────────┤  ├─────────────┤  ├─────────────┤     │
│  │ 标题        │  │ 标题        │  │ 标题        │     │
│  │ 摘要...     │  │ 摘要...     │  │ 摘要...     │     │
│  │ 分类 · 时间 │  │ 分类 · 时间 │  │ 分类 · 时间 │     │
│  └─────────────┘  └─────────────┘  └─────────────┘     │
│                                                         │
└─────────────────────────────────────────────────────────┘

列表模式:

┌─────────────────────────────────────────────────────────┐
│  标题 1                                      2024-01-01 │
│  摘要预览文字...                                        │
│  分类 · 标签1 · 标签2                          👁 128    │
├─────────────────────────────────────────────────────────┤
│  标题 2                                      2024-01-01 │
│  摘要预览文字...                                        │
│  分类 · 标签1 · 标签2                          👁 256    │
└─────────────────────────────────────────────────────────┘

7. 动效规范

7.1 过渡时间

transition-all duration-150  /* 按钮、链接 */
transition-all duration-200  /* 卡片、阴影 */
transition-all duration-300  /* 页面切换、侧边栏 */

7.2 交互模式

按钮悬停:

背景色加深
轻微阴影增强
平滑过渡 200ms

卡片悬停:

hover:shadow-card-hover hover:-translate-y-0.5
transition-all duration-200

侧边栏菜单:

默认: 灰色文字
悬停: 白色文字 + 深色背景
激活: 白色文字 + 更深的背景

页面加载:

内容区域淡入
卡片依次出现 (stagger 100ms)

8. 响应式设计

8.1 断点

使用 Tailwind 默认断点：

sm: 640px
md: 768px
lg: 1024px
xl: 1280px

8.2 适配规则

元素	桌面端	平板	手机
侧边栏	固定显示 240px	可折叠	隐藏/汉堡菜单
文章网格	3列	2列	1列
统计卡片	4列	2列	1列
卡片内边距	`p-6`	`p-5`	`p-4`
标题字号	`text-2xl`	`text-xl`	`text-lg`

9. 技术栈

9.1 前端

技术	版本	用途
React	18.x	UI 框架
Vite	5.x	构建工具
React Router	6.x	路由管理
Tailwind CSS	3.x	样式系统
Lucide React	latest	图标库
Recharts	latest	数据图表 (可选)

9.2 后端

技术	版本	用途
FastAPI	latest	Web 框架
SQLAlchemy	2.x	ORM
SQLite	3.x	数据库
Pydantic	2.x	数据验证
JWT	latest	认证

10. 文件结构

personal-blog/
├── DESIGN.md                    # Neobrutalism 设计文档
├── DESIGN_MODERN.md            # 本文档 (Modern Dashboard)
├── backend/                    # FastAPI 后端
│   ├── app.py                 # 主入口
│   ├── models.py              # 数据库模型
│   ├── database.py            # 数据库连接
│   └── routers/               # API 路由
├── frontend/                   # React 前端
│   ├── src/
│   │   ├── components/        # 通用组件
│   │   ├── pages/             # 页面组件
│   │   ├── styles/            # 主题配置
│   │   │   ├── themes/        # 主题文件
│   │   │   │   ├── neobrutalism.js
│   │   │   │   └── modern.js
│   │   │   └── index.js
│   │   └── api/
│   └── tailwind.config.js     # Tailwind 配置
└── uploads/

11. 主题切换实现建议

11.1 切换方案

方案 A: CSS 变量切换 (推荐)

/* styles/themes/neobrutalism.css */
:root[data-theme="neobrutalism"] {
  --color-bg: #FEF9E7;
  --color-card: #FFFFFF;
  --color-primary: #FF6B9D;
  --border-width: 2px;
  --border-radius: 0px;
  --shadow: 4px 4px 0px 0px rgba(0,0,0,1);
}

/* styles/themes/modern.css */
:root[data-theme="modern"] {
  --color-bg: #F8FAFC;
  --color-card: #FFFFFF;
  --color-primary: #10B981;
  --border-width: 1px;
  --border-radius: 0.75rem;
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

方案 B: Tailwind 配置切换

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // 根据主题动态加载
      }
    }
  }
}

11.2 存储与切换

// 主题切换逻辑
const [theme, setTheme] = useState(() => {
  return localStorage.getItem('theme') || 'neobrutalism'
})

useEffect(() => {
  document.documentElement.setAttribute('data-theme', theme)
  localStorage.setItem('theme', theme)
}, [theme])

11.3 后台切换界面

在设置页面添加主题选择器：

<div className="space-y-4">
  <h3>界面主题</h3>
  <div className="flex gap-4">
    <button 
      onClick={() => setTheme('neobrutalism')}
      className={theme === 'neobrutalism' ? 'active' : ''}
    >
      <div className="w-20 h-16 bg-[#FEF9E7] border-2 border-black" />
      <span>新粗野主义</span>
    </button>
    <button 
      onClick={() => setTheme('modern')}
      className={theme === 'modern' ? 'active' : ''}
    >
      <div className="w-20 h-16 bg-[#0F172A] rounded-lg" />
      <span>现代仪表盘</span>
    </button>
  </div>
</div>

12. 参考资源

13. 更新日志

日期	版本	变更内容
2026-04-18	v1.0	初始版本，基于 Apex Dashboard

本文档为 Modern Dashboard 风格设计规范，可与 Neobrutalism 风格并存，通过主题切换实现。

17 KiB Raw Permalink Blame History