文风字体 (Windfonts)

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

✨ 功能特性

🎨 字体展示

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

🛠️ 管理功能

• 字体上传：支持 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：状态管理

开发工具

• 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. 配置 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 查看应用。

📜 可用脚本

开发和构建

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

代码质量

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

📁 项目结构

next-windfonts/
├── app/                    # Next.js App Router 页面
│   ├── api/               # API 路由
│   │   ├── css/          # 字体 CSS API
│   │   └── fonts/        # 字体管理 API
│   ├── admin/            # 管理后台页面
│   ├── fonts/            # 字体展示页面
│   └── docs/             # 文档页面
├── src/
│   ├── components/       # React 组件
│   ├── lib/             # 核心库和服务
│   │   ├── database/    # 数据库配置和 Schema
│   │   ├── services/    # 业务逻辑服务
│   │   └── config/      # 配置文件
│   ├── hooks/           # 自定义 React Hooks
│   ├── store/           # Redux 状态管理
│   └── utils/           # 工具函数
├── drizzle/             # 数据库迁移文件
├── posts/               # MDX 文档内容
└── public/              # 静态资源

🔧 配置说明

字体分类

• 无衬线字体
• 衬线
• 粗衬线字体
• 脚本
• 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

📄 许可证

Copyright © 2025 Windfonts 文风字体, All Rights Reserved. 文派（广州）科技有限公司

🔗 相关链接

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