admin/nanocode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2f111fa0a85d7cb87d3784916305318a5f44e54b
nanocode/personal-blog/DESIGN.md
T
Ubuntu 32b43f85bd a
2026-07-03 16:58:28 +08:00

431 lines
12 KiB
Markdown
Raw Blame History

# Personal Blog 设计系统文档
> **设计风格**: 新粗野主义 (Neobrutalism)
> **参考来源**: [Slock.ai](https://slock.ai/)
> **版本**: v1.0
> **更新日期**: 2026-04-06
---
## 1. 设计理念
### 1.1 什么是新粗野主义？
新粗野主义 (Neobrutalism) 是一种现代网页设计风格，特点包括：
- **高对比度**: 黑色粗边框 + 明亮背景色
- **硬阴影**: 明显的偏移阴影营造立体感
- **大胆排版**: 粗体文字、大字号标题
- **鲜艳色彩**: 使用高饱和度的强调色
- **无圆角**: 直角设计，拒绝圆润
- **交互反馈**: 按钮点击时有明显的位移效果
### 1.2 与 Slock.ai 的对比
| 特性 | Slock.ai | 我们的博客 |
|------|----------|-----------|
| 主背景色 | `#FFFFFF` 纯白 | `#FEF9E7` 奶油色 |
| 边框风格 | 2px 纯黑 | 2px 纯黑 |
| 阴影效果 | 4px 硬阴影 | 4px 硬阴影 |
| 强调色 | 粉色、紫色、青色 | 粉色、青色、黄色、绿色 |
| 布局风格 | 卡片式网格 | 卡片式/列表式可选 |
| 交互反馈 | 点击位移 | 点击位移 + 阴影消失 |
---
## 2. 色彩系统
### 2.1 主色调
```javascript
// tailwind.config.js
colors: {
'brutal': {
'cream': '#FEF9E7', // 主背景色 - 温暖奶油色
'yellow': '#FFDE59', // 强调色 - 明黄
'pink': '#FF6B9D', // 强调色 - 粉红 (主按钮)
'cyan': '#00D9FF', // 强调色 - 青色 (次要按钮)
'lavender': '#C084FC', // 强调色 - 薰衣草紫
'green': '#4ADE80', // 强调色 - 鲜绿 (成功状态)
}
}
```
### 2.2 使用规范
| 颜色 | 用途 |
|------|------|
| `brutal-cream` | 页面背景、卡片背景 |
| `brutal-pink` | 主按钮、主要操作、醒目标题 |
| `brutal-cyan` | 次要按钮、链接、信息提示 |
| `brutal-yellow` | 警告按钮、高亮文字、选中状态 |
| `brutal-green` | 成功状态、确认按钮 |
| `brutal-lavender` | 装饰元素、标签背景 |
| `black` | 文字、边框、阴影 |
| `white` | 卡片背景、输入框背景 |
---
## 3. 排版系统
### 3.1 字体
```javascript
fontFamily: {
'display': ['system-ui', '-apple-system', 'sans-serif'],
}
```
- 使用系统字体栈，确保跨平台一致性
- 无需加载外部字体，提升性能
### 3.2 字号规范
| 元素 | 字号 | 字重 | 用途 |
|------|------|------|------|
| 页面标题 | `text-2xl` (24px) | `font-bold` (700) | 后台页面标题栏 |
| 卡片标题 | `text-lg` (18px) | `font-bold` (700) | 文章卡片标题 |
| 正文 | `text-sm` (14px) | `font-normal` (400) | 段落文字 |
| 小字 | `text-xs` (12px) | `font-medium` (500) | 标签、时间戳 |
| 按钮文字 | `text-sm`/`text-xs` | `font-bold` (700) | 按钮内文字 |
---
## 4. 阴影系统
### 4.1 阴影定义
```javascript
boxShadow: {
'brutal': '4px 4px 0px 0px rgba(0,0,0,1)', // 标准阴影
'brutal-sm': '2px 2px 0px 0px rgba(0,0,0,1)', // 小阴影
'brutal-lg': '6px 6px 0px 0px rgba(0,0,0,1)', // 大阴影
}
```
### 4.2 使用场景
| 阴影 | 用途 |
|------|------|
| `shadow-brutal-lg` | 登录卡片、模态框 |
| `shadow-brutal` | 标准卡片、按钮（默认状态） |
| `shadow-brutal-sm` | 输入框、小按钮、标签 |
| `shadow-none` | 按钮（悬停/点击状态） |
---
## 5. 组件规范
### 5.1 按钮 (Button)
```jsx
// 基础样式
const baseClasses = 'inline-flex items-center justify-center font-bold
transition-all duration-150 border-2 border-black'
// 变体
primary: 'bg-brutal-pink text-black shadow-brutal ...'
secondary: 'bg-brutal-cyan text-black shadow-brutal ...'
success: 'bg-brutal-green text-black shadow-brutal ...'
warning: 'bg-brutal-yellow text-black shadow-brutal ...'
danger: 'bg-red-500 text-white shadow-brutal ...'
outline: 'bg-white text-black shadow-brutal-sm ...'
// 尺寸
sm: 'px-3 py-1.5 text-xs'
md: 'px-4 py-2 text-sm'
lg: 'px-6 py-3 text-base'
```
**交互效果**:
- 默认: 有阴影，无位移
- 悬停: `hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]`
- 点击: `active:translate-x-[4px] active:translate-y-[4px]`
### 5.2 卡片 (Card)
```jsx
// 基础样式
'bg-white border-2 border-black shadow-brutal'
// 内边距选项
none: ''
small: 'p-3'
normal: 'p-4'
large: 'p-6'
```
**结构组件**:
- `CardHeader`: 带底部边框的头部区域
- `CardTitle`: 粗体标题
- `CardContent`: 内容区域
### 5.3 输入框 (Input)
```jsx
// 样式
'w-full px-3 py-2 border-2 border-black bg-white
focus:outline-none focus:ring-2 focus:ring-brutal-yellow
placeholder:text-black/40'
```
### 5.4 导航
```jsx
// 导航链接 - 默认
'px-3 py-1 font-bold text-sm border-2 border-transparent
hover:border-black hover:bg-white transition-all duration-150'
// 导航链接 - 激活状态
'px-3 py-1 font-bold text-sm border-2 border-black bg-brutal-yellow'
```
---
## 6. 布局系统
### 6.1 后台布局 (Layout)
```
┌─────────────────────────────────────────────┐
│ Sidebar │ Header (标题 + 操作按钮) │
│ ├─────────────────────────────────┤
│ 导航菜单 │ │
│ │ │
│ 📁 文章 │ Content Area │
│ 🏷️ 分类 │ (可滚动内容区域) │
│ 🖼️ 图片 │ │
│ ⚙️ 设置 │ │
│ │ │
└───────────┴─────────────────────────────────┘
```
**结构**:
- 左侧固定侧边栏 (Sidebar)
- 右侧主内容区
- 顶部标题栏带操作按钮区域
### 6.2 首页布局 (Home)
两种展示模式：
**卡片模式 (Card)**:
```
┌──────────────────────────────────────────┐
│ 🏠 博客名称 🔍 分类筛选器 │
├──────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌────────┐ │
│ │ 文章卡片 │ │ 文章卡片 │ │文章卡片 │ │
│ │ │ │ │ │ │ │
│ └──────────┘ └──────────┘ └────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ 文章卡片 │ │ 文章卡片 │ │
│ └──────────┘ └──────────┘ │
│ │
└──────────────────────────────────────────┘
```
**列表模式 (List)**:
```
┌──────────────────────────────────────────┐
│ 文章标题 1 .................... 2024-01 │
├──────────────────────────────────────────┤
│ 文章标题 2 .................... 2024-01 │
├──────────────────────────────────────────┤
│ 文章标题 3 .................... 2024-01 │
└──────────────────────────────────────────┘
```
---
## 7. 动效规范
### 7.1 过渡时间
```css
transition-all duration-150 /* 按钮、链接 */
transition-all duration-200 /* 卡片悬停 */
transition-all duration-300 /* 页面切换 */
```
### 7.2 交互模式
**按钮点击**:
1. 默认: 阴影 `4px 4px 0px black`
2. 悬停: 阴影消失，元素右下移 2px
3. 点击: 元素继续右下移 4px
**卡片悬停**:
```css
hover:shadow-brutal-lg hover:-translate-y-1
```
**页面过渡**:
使用 React Router 的默认过渡，无需额外动画。
---
## 8. 自定义样式
### 8.1 滚动条
```css
/* 自定义滚动条 - 新粗野主义风格 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #FEF9E7;
border-left: 2px solid black;
}
::-webkit-scrollbar-thumb {
background: #000;
border: 2px solid #FEF9E7;
}
```
### 8.2 文字选中
```css
::selection {
background: #FFDE59; /* 黄色高亮 */
color: #000;
}
```
---
## 9. 响应式设计
### 9.1 断点
使用 Tailwind 默认断点：
- `sm`: 640px
- `md`: 768px
- `lg`: 1024px
- `xl`: 1280px
### 9.2 适配规则
| 元素 | 桌面端 | 平板 | 手机 |
|------|--------|------|------|
| 侧边栏 | 固定显示 | 可折叠 | 隐藏/汉堡菜单 |
| 文章网格 | 3列 | 2列 | 1列 |
| 卡片内边距 | `p-6` | `p-4` | `p-3` |
| 标题字号 | `text-2xl` | `text-xl` | `text-lg` |
---
## 10. 技术栈
### 10.1 前端
| 技术 | 版本 | 用途 |
|------|------|------|
| React | 18.x | UI 框架 |
| Vite | 5.x | 构建工具 |
| React Router | 6.x | 路由管理 |
| Tailwind CSS | 3.x | 样式系统 |
| react-markdown | latest | Markdown 渲染 |
### 10.2 后端
| 技术 | 版本 | 用途 |
|------|------|------|
| FastAPI | latest | Web 框架 |
| SQLAlchemy | 2.x | ORM |
| SQLite | 3.x | 数据库 |
| Pydantic | 2.x | 数据验证 |
| JWT | latest | 认证 |
### 10.3 部署
- 前端: 静态文件通过 Nginx serving
- 后端: Systemd 服务管理
- 端口: 8888 (前端), 8889 (后端)
---
## 11. 文件结构
```
personal-blog/
├── DESIGN.md # 本文档
├── backend/ # FastAPI 后端
│ ├── app.py # 主入口
│ ├── models.py # 数据库模型
│ ├── database.py # 数据库连接
│ └── routers/ # API 路由
│ ├── auth.py # 认证
│ ├── posts.py # 文章
│ ├── categories.py # 分类
│ ├── images.py # 图片
│ ├── settings.py # 设置
│ └── crawl.py # 文章采集
├── frontend/ # React 前端
│ ├── src/
│ │ ├── components/ # 通用组件
│ │ │ ├── Button.jsx # 按钮组件
│ │ │ ├── Card.jsx # 卡片组件
│ │ │ ├── Input.jsx # 输入组件
│ │ │ ├── Layout.jsx # 布局组件
│ │ │ └── Sidebar.jsx # 侧边栏
│ │ ├── pages/ # 页面组件
│ │ │ ├── Home.jsx # 访客首页
│ │ │ ├── PostDetail.jsx # 文章详情
│ │ │ ├── Login.jsx # 登录页
│ │ │ ├── Dashboard.jsx # 后台首页
│ │ │ ├── Posts.jsx # 文章管理
│ │ │ └── admin/ # 管理页面
│ │ ├── api/ # API 封装
│ │ ├── index.css # 全局样式
│ │ └── main.jsx # 入口
│ └── tailwind.config.js # Tailwind 配置
└── uploads/ # 上传文件目录
```
---
## 12. 扩展建议
### 12.1 短期优化
1. **代码高亮**: 添加 Prism.js 或 highlight.js 支持代码高亮
2. **暗色模式**: 考虑添加暗色主题切换
3. **动画增强**: 添加页面加载动画、列表进入动画
4. **搜索功能**: 添加文章搜索功能
### 12.2 长期规划
1. **主题市场**: 支持多套主题切换
2. **插件系统**: 允许第三方插件扩展
3. **统计分析**: 添加访问统计面板
4. **多语言**: i18n 国际化支持
---
## 13. 参考资源
- [Slock.ai](https://slock.ai/) - 新粗野主义设计参考
- [Neobrutalism.dev](https://neobrutalism.dev/) - 组件库参考
- [Tailwind CSS 文档](https://tailwindcss.com/docs)
- [React 文档](https://react.dev/)
- [FastAPI 文档](https://fastapi.tiangolo.com/)
---
## 14. 更新日志
| 日期 | 版本 | 变更内容 |
|------|------|----------|
| 2026-04-06 | v1.0 | 初始版本，整合 Slock.ai 风格 |
---
*本文档由 AI 助手生成，如有疑问请联系维护人员。*
Reference in New Issue View Git Blame Copy Permalink