🎵 回声 (Echo)

把故事写成歌 · 专为 Suno v5.5 Pro 优化的 AI 歌词生成器

每个人的故事都值得一首歌。回声（Echo）是一个纯前端应用，把你忘不了的细节——深夜的出租车、外婆的红烧肉、凌晨六点的胡同口——变成一首可以听的歌。

输入一段故事，AI 会分析情感弧线、提取意象、设计押韵方案，最终生成完整的歌词和可直接粘贴到 Suno v5.5 Pro 的 Style Prompt。

---

✨ 功能特性

📝 故事分析

• 意象提取：自动识别故事中的关键画面与感官细节
• 情感弧线：分析情绪走向（如"平静 → 释怀 → 怅然"）
• 押韵设计：根据歌词风格匹配押韵方案
• 创作技法：标注使用的写歌手法（如借景抒情、通感、重复等）

🎶 歌词生成

• 完整歌词：主歌 + 预副歌 + 副歌 + 桥段结构
• Style Prompt：专为 Suno v5.5 Pro 优化的风格公式
• 风格控制：曲风、情绪、人声、乐器、BPM、调性
• 一键复制：歌词、Style Prompt、全部配置

🎨 视觉设计

• Bloom 暗色主题：暖琥珀色调，氛围感拉满
• 8 种封面图案：纯 CSS 生成的唱片封面
• 唱片架：历史作品收藏，支持版本对比
• 响应式布局：桌面端双列，移动端单列

⚙️ 其他

• 6 大模型预设：火山方舟、OpenAI、DeepSeek、通义千问、智谱 GLM、Moonshot
• 快捷键支持：Ctrl+Enter 一键生成
• 本地存储：所有数据保存在浏览器，不上传服务器
• 历史管理：最多保存 50 条，支持单条删除

---

🛠 技术栈

技术	版本	用途
Vue 3	3.5+	Composition API + <script setup>
TypeScript	5.6+	严格模式
Pinia	2.1+	状态管理
Vite	5.4+	构建工具
CSS Variables	-	零 UI 库，纯 Scoped CSS

零依赖：不使用 Tailwind、不使用任何 UI 组件库、不使用路由、不使用后端。

---

🚀 快速开始

环境要求

• Node.js 18+
• npm 9+

安装与运行

# 克隆仓库
git clone https://github.com/your-username/echo-suno-writer.git
cd echo-suno-writer

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

配置 API

1. 点击右上角的设置图标
2. 选择一个模型预设（或手动填写）
3. 填入你的 API Key
4. 开始写歌

支持的平台：

• 🔥 火山方舟（豆包）
• 🌐 OpenAI
• 🧠 DeepSeek
• 🌊 通义千问
• ✨ 智谱 GLM
• 🌙 Moonshot（Kimi）

---

📁 项目结构

src/
├── main.ts
├── App.vue              # 浮动胶囊导航 + Hero + 双列工作区 + 唱片架 + 页脚
├── types/index.ts       # 类型定义
├── api/index.ts         # API 调用 + 模型预设 + 示例故事
├── stores/song.ts       # Pinia 状态管理
├── styles/tokens.css    # Bloom 主题 Design Tokens
└── components/
    ├── StoryInput.vue   # 故事输入 + 风格芯片 + 生成按钮
    ├── SongOutput.vue   # 三栏输出（歌词 / 配置 / 分析）
    ├── SongShelf.vue    # 唱片架面板
    ├── SongCover.vue    # 8 种 CSS 封面图案
    └── SongCompare.vue  # 版本对比模式

---

🎨 设计系统

Bloom 暗色主题

Token	值	用途
--bg	#0d0b09	画布背景
--bg-card	#181411	卡片表面
--ink	#f0e6d8	主文本
--accent	#e8a446	暖琥珀色（唯一强调色）
--error	#e06050	错误状态
--success	#7ab86c	成功状态

Suno v5.5 Pro Style 公式

Vocal Persona | Genre | Mood | Instruments | Production | Dynamic Arc | BPM | Key | 中文咬字

---

⌨️ 快捷键

快捷键	功能
Ctrl+Enter	生成歌曲（输入框内）
Esc	关闭唱片架 / 设置面板

---

📤 部署

纯前端静态项目，npm run build 后将 dist/ 目录部署到任意静态托管服务：

• Vercel / Netlify：连接 GitHub 仓库，自动部署
• GitHub Pages：免费托管
• 阿里云 OSS / 腾讯云 COS：国内 CDN 加速
• Nginx：自有服务器

---

📝 License

MIT

---

_{Built with Vue 3 · TypeScript · Bloom Design System
Hallmark · genre: atmospheric · theme: bloom · nav: N5 Floating pill · footer: Ft5 Statement}