「在线对话生成器」是一个可让你自定义生成聊天截图、Nice图、动图的 Web 应用。它能够高度模拟主流聊天软件的界面,帮你快速制作出有意思的对话图片或视频。
功能特点
- 📱 模拟聊天界面 --- 还原真实的手机聊天 UI,支持气泡样式、头像、昵称、时间戳等细节
- 🖼️ 图片导出 --- 支持生成静态图片(Nice图)、动态图片(GIF)以及视频(MP4)
- 🎨 丰富自定义 --- 可自由配置聊天双方的头像、昵称、消息内容、发布时间、主题配色等
- 💾 本地存储 --- 自动保存你的创作记录,数据保存在浏览器本地 storage 中
- 🌐 桌面端支持 --- 通过 Tauri 打包,可作为独立桌面应用运行在 Windows、macOS、Linux 系统上
技术栈
| 分类 | 技术 |
|---|---|
| 前端框架 | Vue 3 + Composition API |
| 构建工具 | Vite |
| 状态管理 | Pinia |
| 桌面封装 | Tauri |
| 样式 | Less |
安装
npm install
运行
npm run serve
运行成功后,在浏览器访问 http://localhost:5173 (端口以实际输出为准)。
打包
打包前,请确认已将 .env.production 中的 VITE_BASE_PATH 修改为 /,否则可能导致资源路径错误。
npm run build
打包完成后,产物位于 dist 目录中,可直接部署到任意静态服务器。
如需生成桌面端应用,请在 tauri 目录下执行:
cd tauri
cargo tauri build
项目结构
src/
├── assets/ # 静态资源(图标、字体、图片素材)
├── components/ # Vue 组件
│ ├── common/ # 全局可复用组件
│ └── phone/ # 手机聊天界面相关组件
├── hooks/ # 自定义组合式函数
├── store/ # Pinia 状态仓库
│ └── modules/ # 各模块 store
└── utils/ # 工具函数
tauri/ # Tauri 桌面端项目
传送门