文风字体 (Windfonts)

一个基于 Next.js 构建的现代化字体管理和展示平台，提供字体上传、管理、预览和 CSS API 服务。

✨ 功能特性

🎨 字体展示

• 字体库浏览：支持分类、标签、语言等多维度筛选
• 实时预览：在线预览字体效果，支持自定义文本
• 响应式设计：适配各种设备和屏幕尺寸
• 搜索功能：快速查找目标字体

🛠️ 管理功能

• 管理员认证：基于 NextAuth.js 的安全认证系统
• 字体上传：支持 TTF/OTF 格式字体文件上传
• 字体管理：增删改查字体信息，包括分类、标签、描述等
• 批量操作：支持批量管理字体文件
• 版本控制：字体文件版本管理和更新
• 会话管理：安全的用户会话和登出功能

🚀 API 服务

• CSS API：动态生成字体 CSS 文件，支持 Google Fonts 兼容格式
• 字体列表 API：提供字体数据的 RESTful API
• 缓存优化：内置缓存机制，提升访问性能
• CDN 集成：支持阿里云 OSS 等云存储服务

📝 文档系统

• MDX 支持：基于 MDX 的文档系统
• API 文档：完整的 API 使用说明
• 使用指南：详细的使用教程和最佳实践

🏗️ 技术栈

前端框架

• Next.js 14：React 全栈框架，支持 App Router
• React 18：现代化 React 开发
• TypeScript：类型安全的 JavaScript

UI 组件

• Mantine：现代化 React 组件库
• Tailwind CSS：实用优先的 CSS 框架
• Tabler Icons：丰富的图标库

数据管理

• PostgreSQL：可靠的关系型数据库
• Drizzle ORM：类型安全的 ORM
• Redux Toolkit：状态管理
• NextAuth.js：现代化认证解决方案

开发工具

• ESLint：代码质量检查
• ContentLayer：内容管理

🚀 快速开始

环境要求

• Node.js 18+
• PostgreSQL 12+
• npm 或 yarn

安装依赖

yarn install

环境配置

1. 复制环境变量模板：

cp .env.example .env.local

2. 配置数据库连接：

# 数据库配置
DATA_BASE_HOST=localhost
DATA_BASE_PORT=5432
DATA_BASE_USER=your_username
DATA_BASE_PASSWORD=your_password
DATA_BASE_NAME=windfonts

# 或使用完整连接字符串
POSTGRES_URL=postgresql://username:password@localhost:5432/windfonts

3. 配置管理员认证：

# NextAuth.js 认证配置
AUTH_SECRET=your-super-secret-key-change-this-in-production
NEXTAUTH_URL=http://localhost:3000

# 管理员账号配置
ADMIN_USERNAME=admin
ADMIN_PASSWORD=admin123
ADMIN_EMAIL=admin@windfonts.com

4. 配置 OSS 存储（可选）：

# 阿里云 OSS 配置
OSS_ACCESS_KEY_ID=your_access_key
OSS_ACCESS_KEY_SECRET=your_secret_key
OSS_BUCKET=your_bucket
OSS_REGION=your_region
OSS_ENDPOINT=your_endpoint

数据库初始化

# 生成数据库迁移
yarn drizzle-kit generate

# 执行数据库迁移
yarn drizzle-kit migrate

启动开发服务器

yarn dev

访问 http://localhost:3000 查看应用。

管理员登录

访问 http://localhost:3000/login 进入管理员登录页面。

默认管理员账号：

• 用户名：admin
• 密码：admin123

登录成功后可访问 http://localhost:3000/admin 进入管理后台。

📜 可用脚本

开发和构建

• yarn dev – 启动开发服务器
• yarn build – 构建生产版本
• yarn start – 启动生产服务器

代码质量

• yarn typecheck – TypeScript 类型检查
• yarn lint – ESLint 代码检查

📁 项目结构

next-windfonts/
├── app/                    # Next.js App Router 页面
│   ├── api/               # API 路由
│   │   ├── auth/         # NextAuth.js 认证 API
│   │   ├── css/          # 字体 CSS API
│   │   └── fonts/        # 字体管理 API
│   ├── admin/            # 管理后台页面（需要认证）
│   ├── login/            # 管理员登录页面
│   ├── fonts/            # 字体展示页面
│   └── docs/             # 文档页面
├── src/
│   ├── components/       # React 组件
│   │   ├── admin/       # 管理后台组件
│   │   └── providers/   # Context 提供者（包括 SessionProvider）
│   ├── lib/             # 核心库和服务
│   │   ├── auth.ts      # NextAuth.js 配置
│   │   ├── database/    # 数据库配置和 Schema
│   │   ├── services/    # 业务逻辑服务
│   │   └── config/      # 配置文件
│   ├── hooks/           # 自定义 React Hooks
│   ├── store/           # Redux 状态管理
│   └── utils/           # 工具函数
├── middleware.ts        # Next.js 中间件（路由保护）
├── drizzle/             # 数据库迁移文件
├── posts/               # MDX 文档内容
└── public/              # 静态资源

🔧 配置说明

安全配置

AUTH_SECRET 生成

为了确保认证系统的安全性，请生成一个强随机密钥：

# 使用 OpenSSL 生成随机密钥
openssl rand -base64 32

将生成的密钥设置为 AUTH_SECRET 环境变量的值。

管理员账号安全

• 生产环境中请务必修改默认的管理员用户名和密码
• 建议使用强密码，包含大小写字母、数字和特殊字符
• 定期更换管理员密码

字体分类

• 无衬线字体
• 衬线
• 粗衬线字体
• 脚本
• Mono
• 手写体

字体标签

• 黑体、宋体、楷体、隶书
• 拼音、硬笔手写、毛笔书法
• 卡通创意、其他

支持语言

• 简体中文
• 繁体中文
• 英语
• 日文
• 韩文

🌐 API 使用

字体 CSS API

GET /api/css?family=字体名称&lang=zh

字体列表 API

GET /api/fonts/list?page=1&pageSize=10

更多 API 文档请访问 /docs/api。

🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 许可证

本项目采用 GNU General Public License v3.0 开源许可证。

GPL-3.0 许可证要点

✅ 允许的使用方式：

• 商业使用
• 修改代码
• 分发软件
• 专利使用
• 私人使用

❗ 必须遵守的条件：

• 分发时必须披露源代码
• 必须包含许可证和版权声明
• 衍生作品必须使用相同的 GPL-3.0 许可证
• 必须说明对原始代码的修改

详细许可证条款请参阅 LICENSE 文件。

开源声明

本项目是一个开源项目，欢迎社区贡献和使用。使用本项目时请确保遵守 GPL-3.0 许可证的相关条款。

🔗 相关链接

• 文风字体官网
• 方块字库
• 文派开源
• 字体下载