封面生成器 (Media Cover Generator)

一个基于 React + TypeScript + Vite 的在线封面/缩略图生成工具，支持多种视觉风格、尺寸比例，可一键导出高清 PNG 图片。

功能特性

• 多种视觉风格：渐变、纯色、螺旋三种风格可选
• 多种尺寸比例：支持 16:9、4:3、3:4、9:16、1:1 五种常用比例
• 实时预览：左侧操作面板编辑，右侧画布实时预览
• 高清导出：基于 html-to-image 导出高分辨率 PNG 图片
• 中文字体适配：内置多种中文字体支持

技术栈

• 框架：React 19 + TypeScript
• 构建工具：Vite 8
• 样式：Tailwind CSS 4
• 状态管理：Zustand
• 图片导出：html-to-image
• 组件变体：class-variance-authority (CVA)
• 通知组件：Sonner
• 代码规范：Biome + Commitlint + lint-staged
• 编译优化：Babel React Compiler

快速开始

环境要求

• Node.js >= 18
• pnpm

安装依赖

pnpm install

启动开发服务器

pnpm dev

访问 http://localhost:5173 即可使用。

构建生产版本

pnpm build

预览生产构建

pnpm preview

使用说明

1. 编辑标题：在左侧面板输入主标题和副标题
2. 选择比例：根据需要选择封面尺寸比例
3. 选择风格：点击风格卡片切换视觉风格
4. 下载封面：点击「下载封面」按钮导出 PNG 图片

项目结构

src/
├── components/       # UI 组件
│   ├── Header.tsx           # 顶部导航
│   ├── OperatePanel.tsx     # 左侧操作面板
│   ├── Playground.tsx       # 右侧预览画布
│   ├── RatioSelect.tsx      # 比例选择器
│   └── StyleCover.tsx       # 风格封面组件
├── config/           # 配置文件
│   └── constants.ts         # 常量定义
├── lib/              # 工具函数
│   └── utils.ts             # cn 类名合并、图片导出逻辑
├── store/            # 状态管理
│   └── cover.ts             # Zustand 封面状态
├── types/            # 类型定义
│   └── common.ts            # 公共类型
├── ui/               # 基础 UI 组件
└── style/            # 全局样式

扩展风格

在 src/components/StyleCover.tsx 中添加新的风格组件：

1. 定义新的风格名称并注册到 styleNames 数组
2. 实现风格组件函数，接收 title、subTitle、aspectRatio、mode 等 props
3. 在 styleComponents 映射中注册组件

License

MIT