├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── app
    ├── api
    │   ├── music
    │   │   └── route.ts
    │   ├── proxy
    │   │   └── image
    │   │   │   └── route.ts
    │   └── resolve-url
    │   │   └── route.ts
    ├── fonts.ts
    ├── globals.css
    ├── layout.tsx
    ├── page.tsx
    ├── phone
    │   ├── PhoneContent.tsx
    │   └── page.tsx
    └── poster
    │   ├── SpotifyContent.tsx
    │   └── page.tsx
├── eslint.config.mjs
├── lib
    └── themes.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── cover.png
    ├── favicon.ico
    ├── phone.png
    ├── poster.png
    └── templates
    │   ├── background.png
    │   ├── catppuccin.png
    │   ├── dark.png
    │   ├── everforest.png
    │   ├── gruvbox.png
    │   ├── iphone.png
    │   ├── light.png
    │   ├── nord.png
    │   ├── phone.png
    │   └── rosepine.png
├── tailwind.config.ts
├── tsconfig.json
├── types.ts
├── types
    ├── index.ts
    ├── music.ts
    ├── poster.ts
    ├── spotify.ts
    └── theme.ts
└── utils
    ├── color.ts
    ├── musicParser.ts
    ├── phone.ts
    ├── poster.ts
    ├── posterGenerator.ts
    ├── retry.ts
    └── spotify.ts


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # 贡献指南 | Contributing Guidelines
 2 | 
 3 | [English](#english) | [中文](#chinese)
 4 | 
 5 | <div id="chinese">
 6 | 
 7 | ## 🤝 如何贡献
 8 | 
 9 | 感谢你考虑为 MusicCard 项目做出贡献！以下是参与项目的一些指南。
10 | 
11 | ### 提交 Issue
12 | 
13 | - 使用 Issue 模板
14 | - 清晰描述问题或建议
15 | - 如果是 bug，请提供复现步骤
16 | - 如果可能，提供截图或录屏
17 | 
18 | ### 提交 Pull Request
19 | 
20 | 1. Fork 本仓库
21 | 2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)
22 | 3. 提交你的修改 (`git commit -m 'Add some AmazingFeature'`)
23 | 4. 推送到分支 (`git push origin feature/AmazingFeature`)
24 | 5. 创建一个 Pull Request
25 | 
26 | ### 开发指南
27 | 
28 | 1. 确保你的代码符合项目的代码风格
29 | 2. 添加必要的测试
30 | 3. 更新相关文档
31 | 4. 确保所有测试通过
32 | 
33 | ### 代码规范
34 | 
35 | - 使用 TypeScript
36 | - 遵循 ESLint 规则
37 | - 使用 Prettier 格式化代码
38 | - 编写清晰的代码注释
39 | 
40 | </div>
41 | 
42 | <div id="english">
43 | 
44 | ## 🤝 How to Contribute
45 | 
46 | Thank you for considering contributing to MusicCard! Here are some guidelines for participating in the project.
47 | 
48 | ### Submitting Issues
49 | 
50 | - Use the issue template
51 | - Clearly describe the problem or suggestion
52 | - If it's a bug, provide steps to reproduce
53 | - Include screenshots or recordings if possible
54 | 
55 | ### Submitting Pull Requests
56 | 
57 | 1. Fork the repository
58 | 2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
59 | 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
60 | 4. Push to the branch (`git push origin feature/AmazingFeature`)
61 | 5. Create a Pull Request
62 | 
63 | ### Development Guidelines
64 | 
65 | 1. Ensure your code follows the project's style
66 | 2. Add necessary tests
67 | 3. Update relevant documentation
68 | 4. Make sure all tests pass
69 | 
70 | ### Code Standards
71 | 
72 | - Use TypeScript
73 | - Follow ESLint rules
74 | - Format code with Prettier
75 | - Write clear code comments
76 | 
77 | </div>
78 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 MusicCard
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # MusicCard - 音乐海报生成器 | Music Poster Generator
  2 | 
  3 | [English](#english) | [中文](#chinese)
  4 | 
  5 | <div id="chinese">
  6 | 
  7 | > 灵感来源: 本项目受 [BeatPrints](https://github.com/TrueMyst/BeatPrints) 启发,旨在提供一个现代化的 Web 版本音乐海报生成工具。
  8 | 
  9 | ## 🎵 项目介绍
 10 | 
 11 | MusicCard 是一个基于 Next.js 开发的在线音乐海报生成工具,让用户能够为自己喜爱的网易云音乐创建精美的可视化海报。
 12 | 
 13 | ### ✨ 主要特性
 14 | 
 15 | - 🎨 支持多种海报主题和布局
 16 | - 🎵 支持网易云音乐链接解析
 17 | - 📱 响应式设计,支持移动端
 18 | - 🌈 自定义海报样式和颜色
 19 | - 📝 支持歌词展示
 20 | - 💾 支持导出高清图片
 21 | 
 22 | ### 🚀 在线体验
 23 | 
 24 | 访问 [MusicCard](https://card.catpng.net) 立即体验
 25 | 
 26 | ### 🛠️ 技术栈
 27 | 
 28 | - Next.js 14
 29 | - TypeScript
 30 | - Tailwind CSS
 31 | - 网易云音乐 API
 32 | 
 33 | ### 📦 本地开发
 34 | 
 35 | 1. 克隆项目
 36 | 
 37 | ```bash
 38 | git clone https://github.com/aidaox/MusicCard.git
 39 | cd MusicCard
 40 | ```
 41 | 
 42 | 2. 安装依赖
 43 | 
 44 | ```bash
 45 | npm install
 46 | # 或
 47 | yarn install
 48 | ```
 49 | 
 50 | 3. 启动开发服务器
 51 | 
 52 | ```bash
 53 | npm run dev
 54 | # 或
 55 | yarn dev
 56 | ```
 57 | 
 58 | 4. 在浏览器中打开 http://localhost:3000 查看效果
 59 | 
 60 | ### 🚀 部署说明
 61 | 
 62 | 本项目推荐使用 Vercel 部署:
 63 | 
 64 | 1. Fork 本项目到你的 GitHub 账号
 65 | 2. 在 [Vercel](https://vercel.com) 上注册账号
 66 | 3. 在 Vercel 中导入你 fork 的项目
 67 | 4. 点击 "Deploy" 按钮即可完成部署
 68 | 
 69 | ### 🤝 贡献指南
 70 | 
 71 | 欢迎提交 Issue 和 Pull Request 来帮助改进项目!
 72 | 
 73 | ### 📄 开源协议
 74 | 
 75 | 本项目采用 MIT 协议开源。
 76 | 
 77 | </div>
 78 | 
 79 | <div id="english">
 80 | > Inspired by [BeatPrints](https://github.com/TrueMyst/BeatPrints), this project aims to provide a modern web-based music poster generation tool.
 81 | 
 82 | 
 83 | ## 🎵 Introduction
 84 | 
 85 | MusicCard is an online music poster generator built with Next.js, allowing users to create beautiful visual posters for their favorite NetEase Cloud Music tracks.
 86 | 
 87 | ### ✨ Features
 88 | 
 89 | - 🎨 Multiple poster themes and layouts
 90 | - 🎵 NetEase Cloud Music link parsing
 91 | - 📱 Responsive design
 92 | - 🌈 Customizable styles and colors
 93 | - 📝 Lyrics display
 94 | - 💾 High-quality image export
 95 | 
 96 | ### 🚀 Live Demo
 97 | 
 98 | Visit [MusicCard](https://card.catpng.net) to try it out
 99 | 
100 | ### 🛠️ Tech Stack
101 | 
102 | - Next.js 14
103 | - TypeScript
104 | - Tailwind CSS
105 | - NetEase Cloud Music API
106 | 
107 | ### 📦 Local Development
108 | 
109 | 1. Clone the repository
110 | 
111 | ```bash
112 | git clone https://github.com/aidaox/MusicCard.git
113 | cd MusicCard
114 | ```
115 | 
116 | 2. Install dependencies
117 | 
118 | ```bash
119 | npm install
120 | # or
121 | yarn install
122 | ```
123 | 
124 | 3. Start development server
125 | 
126 | ```bash
127 | npm run dev
128 | # or
129 | yarn dev
130 | ```
131 | 
132 | 4. Open http://localhost:3000 in your browser to see the result
133 | 
134 | ### 🚀 Deployment
135 | 
136 | We recommend deploying with Vercel:
137 | 
138 | 1. Fork this project to your GitHub account
139 | 2. Sign up for an account on [Vercel](https://vercel.com)
140 | 3. Import your forked project in Vercel
141 | 4. Click "Deploy" to complete the deployment
142 | 
143 | ### 🤝 Contributing
144 | 
145 | Issues and Pull Requests are welcome!
146 | 
147 | ### 📄 License
148 | 
149 | This project is licensed under the MIT License.
150 | 
151 | </div>
152 | 


--------------------------------------------------------------------------------
/app/api/music/route.ts:
--------------------------------------------------------------------------------
  1 | import { retry } from "@/utils/retry";
  2 | import { NextResponse } from "next/server";
  3 | import { MusicPlatform } from "@/types/music";
  4 | import axios from "axios";
  5 | 
  6 | // 定义歌手类型
  7 | interface Artist {
  8 |   name: string;
  9 | }
 10 | 
 11 | // 网易云音乐API请求头
 12 | const NETEASE_HEADERS = {
 13 |   "User-Agent":
 14 |     "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
 15 |   Referer: "http://music.163.com",
 16 |   Host: "music.163.com",
 17 | };
 18 | 
 19 | // 缓存音乐信息，减少重复请求
 20 | const MUSIC_CACHE = new Map();
 21 | // 缓存过期时间（24小时）
 22 | const CACHE_TTL = 24 * 60 * 60 * 1000;
 23 | 
 24 | export async function GET(request: Request) {
 25 |   try {
 26 |     // 从URL中获取参数
 27 |     const { searchParams } = new URL(request.url);
 28 |     const platform = searchParams.get("platform");
 29 |     const musicId = searchParams.get("id");
 30 | 
 31 |     console.log("收到请求:", { platform, musicId });
 32 | 
 33 |     if (!platform || !musicId) {
 34 |       console.error("缺少必要参数:", { platform, musicId });
 35 |       return NextResponse.json({ error: "缺少必要参数" }, { status: 400 });
 36 |     }
 37 | 
 38 |     // 生成缓存key
 39 |     const cacheKey = `${platform}:${musicId}`;
 40 | 
 41 |     // 检查缓存
 42 |     if (MUSIC_CACHE.has(cacheKey)) {
 43 |       const { data, timestamp } = MUSIC_CACHE.get(cacheKey);
 44 |       // 检查缓存是否过期
 45 |       if (Date.now() - timestamp < CACHE_TTL) {
 46 |         console.log("从缓存返回结果:", cacheKey);
 47 |         return NextResponse.json(data, {
 48 |           headers: {
 49 |             "Cache-Control": "public, max-age=3600",
 50 |           },
 51 |         });
 52 |       } else {
 53 |         // 删除过期缓存
 54 |         MUSIC_CACHE.delete(cacheKey);
 55 |       }
 56 |     }
 57 | 
 58 |     // 根据平台获取音乐信息
 59 |     switch (platform) {
 60 |       case MusicPlatform.NETEASE: {
 61 |         console.log("开始获取网易云音乐信息:", musicId);
 62 | 
 63 |         try {
 64 |           // 创建取消标记，设置超时
 65 |           const controller = new AbortController();
 66 |           const timeoutId = setTimeout(() => controller.abort(), 8000);
 67 | 
 68 |           // 并行请求歌曲详情和歌词，优化加载速度
 69 |           const [songDetailResponse, lyricsResponse] = await Promise.all([
 70 |             // 获取歌曲详情
 71 |             retry(
 72 |               async () => {
 73 |                 const response = await axios.get(
 74 |                   `http://music.163.com/api/song/detail/?id=${musicId}&ids=[${musicId}]`,
 75 |                   {
 76 |                     headers: NETEASE_HEADERS,
 77 |                     timeout: 5000,
 78 |                     signal: controller.signal,
 79 |                   }
 80 |                 );
 81 |                 if (!response.data?.songs?.[0]) {
 82 |                   throw new Error("未找到歌曲信息");
 83 |                 }
 84 |                 return response.data;
 85 |               },
 86 |               {
 87 |                 maxAttempts: 2,
 88 |                 initialDelay: 500,
 89 |                 maxDelay: 2000,
 90 |               }
 91 |             ),
 92 |             // 获取歌词
 93 |             retry(
 94 |               async () => {
 95 |                 const response = await axios.get(
 96 |                   `http://music.163.com/api/song/lyric?id=${musicId}&lv=1&kv=1&tv=-1`,
 97 |                   {
 98 |                     headers: NETEASE_HEADERS,
 99 |                     timeout: 5000,
100 |                     signal: controller.signal,
101 |                   }
102 |                 );
103 |                 return response.data;
104 |               },
105 |               {
106 |                 maxAttempts: 2,
107 |                 initialDelay: 500,
108 |                 maxDelay: 2000,
109 |               }
110 |             ),
111 |           ]);
112 | 
113 |           // 清除超时
114 |           clearTimeout(timeoutId);
115 | 
116 |           console.log("歌曲详情和歌词获取完成");
117 |           const song = songDetailResponse.songs[0];
118 | 
119 |           // 解析歌词
120 |           const lyrics = lyricsResponse.lrc?.lyric || "";
121 |           const lyricsArray = lyrics
122 |             .split("\n")
123 |             .map((line: string) =>
124 |               line.replace(/\[\d{2}:\d{2}\.\d{2,3}\]/g, "").trim()
125 |             )
126 |             .filter((line: string) => line);
127 | 
128 |           const result = {
129 |             title: song.name,
130 |             artist: song.artists.map((a: Artist) => a.name).join(", "),
131 |             coverUrl: song.album.picUrl,
132 |             lyrics: lyricsArray.join("\n"),
133 |             duration: Math.floor(song.duration / 1000),
134 |           };
135 | 
136 |           // 缓存结果
137 |           MUSIC_CACHE.set(cacheKey, {
138 |             data: result,
139 |             timestamp: Date.now(),
140 |           });
141 | 
142 |           console.log("处理完成，返回结果:", result);
143 |           return NextResponse.json(result, {
144 |             headers: {
145 |               "Cache-Control": "public, max-age=3600",
146 |             },
147 |           });
148 |         } catch (error) {
149 |           console.error("网易云音乐API调用失败:", error);
150 |           if (axios.isAxiosError(error)) {
151 |             console.error("API错误详情:", {
152 |               status: error.response?.status,
153 |               data: error.response?.data,
154 |               headers: error.response?.headers,
155 |             });
156 | 
157 |             // 处理特定错误
158 |             if (error.code === "ECONNABORTED") {
159 |               return NextResponse.json(
160 |                 { error: "网易云音乐API请求超时，请稍后重试" },
161 |                 { status: 504 }
162 |               );
163 |             }
164 |           }
165 |           throw error;
166 |         }
167 |       }
168 | 
169 |       default:
170 |         console.error("不支持的音乐平台:", platform);
171 |         return NextResponse.json(
172 |           { error: "不支持的音乐平台" },
173 |           { status: 400 }
174 |         );
175 |     }
176 |   } catch (error) {
177 |     console.error("获取音乐信息失败:", error);
178 |     if (axios.isAxiosError(error)) {
179 |       console.error("错误详情:", {
180 |         status: error.response?.status,
181 |         data: error.response?.data,
182 |         headers: error.response?.headers,
183 |       });
184 |     }
185 |     return NextResponse.json(
186 |       {
187 |         error: "获取音乐信息失败",
188 |         details: error instanceof Error ? error.message : String(error),
189 |       },
190 |       { status: 500 }
191 |     );
192 |   }
193 | }
194 | 


--------------------------------------------------------------------------------
/app/api/proxy/image/route.ts:
--------------------------------------------------------------------------------
 1 | // app/api/proxy/image/route.ts
 2 | // 图片代理 API 路由,用于获取跨域图片
 3 | 
 4 | import { NextResponse } from "next/server";
 5 | 
 6 | // 处理 GET 请求
 7 | export async function GET(request: Request) {
 8 |   try {
 9 |     // 从 URL 参数中获取目标图片 URL
10 |     const url = new URL(request.url);
11 |     const imageUrl = url.searchParams.get("url");
12 | 
13 |     if (!imageUrl) {
14 |       return new NextResponse("Missing image URL", { status: 400 });
15 |     }
16 | 
17 |     // 获取图片
18 |     const response = await fetch(imageUrl, {
19 |       // 添加超时设置，避免请求卡住
20 |       signal: AbortSignal.timeout(5000),
21 |       // 添加请求头，模拟浏览器行为，减少被拒绝的可能性
22 |       headers: {
23 |         "User-Agent":
24 |           "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
25 |         Referer: "http://music.163.com",
26 |       },
27 |     });
28 | 
29 |     if (!response.ok) {
30 |       console.error(
31 |         `图片代理请求失败: ${imageUrl}, 状态码: ${response.status}`
32 |       );
33 |       return new NextResponse("Failed to fetch image", {
34 |         status: response.status,
35 |       });
36 |     }
37 | 
38 |     // 获取图片数据
39 |     const imageBuffer = await response.arrayBuffer();
40 |     const contentType = response.headers.get("content-type") || "image/jpeg";
41 | 
42 |     // 返回图片,设置正确的 content-type 和 CORS 头
43 |     return new NextResponse(imageBuffer, {
44 |       headers: {
45 |         "Content-Type": contentType,
46 |         // 增强缓存策略，设置更长的缓存时间和验证机制
47 |         "Cache-Control":
48 |           "public, max-age=31536000, stale-while-revalidate=86400",
49 |         ETag: `"${Buffer.from(imageUrl).toString("base64").substring(0, 16)}"`,
50 |         "Access-Control-Allow-Origin": "*",
51 |       },
52 |     });
53 |   } catch (error) {
54 |     console.error("Error proxying image:", error);
55 |     // 如果是超时错误，返回特定的错误信息
56 |     if (error instanceof DOMException && error.name === "TimeoutError") {
57 |       return new NextResponse("Image request timed out", { status: 504 });
58 |     }
59 |     return new NextResponse("Error proxying image", { status: 500 });
60 |   }
61 | }
62 | 
63 | // 处理预检请求
64 | export async function OPTIONS() {
65 |   return new NextResponse(null, {
66 |     headers: {
67 |       "Access-Control-Allow-Origin": "*",
68 |       "Access-Control-Allow-Methods": "GET, OPTIONS",
69 |       "Access-Control-Allow-Headers": "Content-Type",
70 |       "Access-Control-Max-Age": "86400",
71 |     },
72 |   });
73 | }
74 | 


--------------------------------------------------------------------------------
/app/api/resolve-url/route.ts:
--------------------------------------------------------------------------------
 1 | import { retry } from "@/utils/retry";
 2 | 
 3 | // 从文本中提取URL的函数
 4 | function extractUrl(text: string): string | null {
 5 |   const urlRegex = /(https?:\/\/[^\s]+)/g;
 6 |   const matches = text.match(urlRegex);
 7 |   return matches ? matches[0] : null;
 8 | }
 9 | 
10 | export async function GET(request: Request) {
11 |   try {
12 |     const { searchParams } = new URL(request.url);
13 |     let url = searchParams.get("url");
14 | 
15 |     if (!url) {
16 |       return new Response("URL参数不能为空", { status: 400 });
17 |     }
18 | 
19 |     // 从文本中提取URL
20 |     const extractedUrl = extractUrl(url);
21 |     if (!extractedUrl) {
22 |       return new Response("无法从文本中提取URL", { status: 400 });
23 |     }
24 |     url = extractedUrl;
25 | 
26 |     // 使用重试函数发起请求
27 |     const response = await retry(
28 |       async () => {
29 |         const res = await fetch(url!, {
30 |           redirect: "follow",
31 |           headers: {
32 |             "User-Agent":
33 |               "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
34 |           },
35 |         });
36 | 
37 |         if (!res.ok) {
38 |           throw new Error(`HTTP error! status: ${res.status}`);
39 |         }
40 | 
41 |         return res;
42 |       },
43 |       {
44 |         maxAttempts: 3,
45 |         initialDelay: 1000,
46 |         maxDelay: 5000,
47 |       }
48 |     );
49 | 
50 |     // 获取最终URL
51 |     const finalUrl = response.url;
52 | 
53 |     return new Response(JSON.stringify({ url: finalUrl }), {
54 |       headers: { "Content-Type": "application/json" },
55 |     });
56 |   } catch (error) {
57 |     console.error("解析URL失败:", error);
58 |     return new Response(
59 |       JSON.stringify({
60 |         error: error instanceof Error ? error.message : "解析URL失败",
61 |       }),
62 |       {
63 |         status: 500,
64 |         headers: { "Content-Type": "application/json" },
65 |       }
66 |     );
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/app/fonts.ts:
--------------------------------------------------------------------------------
 1 | import { Inter } from "next/font/google";
 2 | 
 3 | export const inter = Inter({
 4 |   subsets: ["latin"],
 5 |   display: "swap",
 6 |   variable: "--font-inter",
 7 |   fallback: [
 8 |     "-apple-system",
 9 |     "BlinkMacSystemFont",
10 |     "Segoe UI",
11 |     "Roboto",
12 |     "Helvetica Neue",
13 |     "Arial",
14 |     "sans-serif",
15 |   ],
16 |   preload: true,
17 |   adjustFontFallback: true,
18 | });
19 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | /* app/globals.css */
  2 | /* 此文件定义了全局样式和组件样式
  3 | /* 包括：
  4 | /* 1. Material Icons 字体
  5 | /* 2. 基础样式（body等）
  6 | /* 3. 播放器组件样式
  7 | /* 4. 进度条和音量控制样式
  8 | /* 5. 按钮和图标样式
  9 | */
 10 | 
 11 | /* Material Icons */
 12 | @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
 13 | 
 14 | @tailwind base;
 15 | @tailwind components;
 16 | @tailwind utilities;
 17 | 
 18 | @layer base {
 19 |   body {
 20 |     margin: 0;
 21 |     font-family: Arial, sans-serif;
 22 |     background-color: #f0f0f0;
 23 |     display: flex;
 24 |     justify-content: center;
 25 |     align-items: center;
 26 |     min-height: 100vh;
 27 |   }
 28 | }
 29 | 
 30 | @layer components {
 31 |   .music-player {
 32 |     width: 550px;
 33 |     background-color: #3c3c3c;
 34 |     border-radius: 45px;
 35 |     padding: 20px;
 36 |     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
 37 |     color: #ffffff;
 38 |     display: flex;
 39 |     flex-direction: column;
 40 |     justify-content: space-between;
 41 |     height: 870px;
 42 |     align-items: center;
 43 |   }
 44 | 
 45 |   .music-cover {
 46 |     width: 90%;
 47 |     border-radius: 15px;
 48 |     overflow: hidden;
 49 |     margin-top: 30px;
 50 |     aspect-ratio: 1;
 51 |   }
 52 | 
 53 |   .music-cover img {
 54 |     width: 100%;
 55 |     height: 100%;
 56 |     border-radius: 15px;
 57 |     object-fit: cover;
 58 |   }
 59 | 
 60 |   .music-info {
 61 |     width: 90%;
 62 |     text-align: left;
 63 |     margin: 30px 0;
 64 |   }
 65 | 
 66 |   .music-info h2 {
 67 |     margin: 0;
 68 |     font-size: 25px;
 69 |     font-weight: bold;
 70 |     white-space: nowrap;
 71 |     overflow: hidden;
 72 |     text-overflow: ellipsis;
 73 |   }
 74 | 
 75 |   .music-info p {
 76 |     margin: 5px 0 0;
 77 |     color: #c6c7c9;
 78 |     font-size: 20px;
 79 |     white-space: nowrap;
 80 |     overflow: hidden;
 81 |     text-overflow: ellipsis;
 82 |   }
 83 | 
 84 |   .progress-container {
 85 |     display: flex;
 86 |     align-items: center;
 87 |     justify-content: space-between;
 88 |     margin: 15px 0;
 89 |     width: 90%;
 90 |     position: relative;
 91 |     gap: 15px;
 92 |   }
 93 | 
 94 |   .progress-bar,
 95 |   .volume-bar {
 96 |     -webkit-appearance: none;
 97 |     appearance: none;
 98 |     height: 12px;
 99 |     background-color: #c6c7c9;
100 |     outline: none;
101 |     border-radius: 10px;
102 |     margin: 0;
103 |     flex: 1;
104 |   }
105 | 
106 |   .time-info {
107 |     font-size: 16px;
108 |     color: #cfcfcf;
109 |     min-width: 45px;
110 |     text-align: center;
111 |   }
112 | 
113 |   .time-info span {
114 |     display: inline-block;
115 |   }
116 | 
117 |   .progress-bar::-webkit-slider-runnable-track,
118 |   .volume-bar::-webkit-slider-runnable-track {
119 |     height: 12px;
120 |     border-radius: 12px;
121 |     background: transparent;
122 |   }
123 | 
124 |   .progress-bar::-webkit-slider-thumb,
125 |   .volume-bar::-webkit-slider-thumb {
126 |     -webkit-appearance: none;
127 |     appearance: none;
128 |     width: 12px;
129 |     height: 12px;
130 |     background-color: #dfe3e2;
131 |     cursor: pointer;
132 |     border-radius: 50%;
133 |     position: relative;
134 |     z-index: 2;
135 |     margin-top: 0;
136 |   }
137 | 
138 |   .progress-bar::-moz-range-thumb,
139 |   .volume-bar::-moz-range-thumb {
140 |     width: 12px;
141 |     height: 12px;
142 |     background-color: #dfe3e2;
143 |     cursor: pointer;
144 |     border-radius: 50%;
145 |     border: none;
146 |   }
147 | 
148 |   .volume-icon {
149 |     font-family: "Material Symbols Outlined";
150 |     font-size: 24px;
151 |     color: #c6c7c9;
152 |     display: flex;
153 |     align-items: center;
154 |     justify-content: center;
155 |     width: 45px;
156 |     flex-shrink: 0;
157 |   }
158 | 
159 |   .controls {
160 |     display: flex;
161 |     flex-direction: column;
162 |     align-items: center;
163 |     width: 90%;
164 |     margin: 15px 0;
165 |   }
166 | 
167 |   .playback-buttons {
168 |     display: flex;
169 |     justify-content: space-between;
170 |     align-items: center;
171 |     width: 100%;
172 |     gap: 30px;
173 |   }
174 | 
175 |   .playback-buttons button {
176 |     background: none;
177 |     border: none;
178 |     color: #fff;
179 |     cursor: pointer;
180 |     padding: 10px;
181 |     display: flex;
182 |     align-items: center;
183 |     justify-content: center;
184 |     flex: 1;
185 |   }
186 | 
187 |   .playback-buttons button:hover {
188 |     color: #000;
189 |   }
190 | 
191 |   .playback-buttons button svg {
192 |     width: 32px;
193 |     height: 32px;
194 |   }
195 | 
196 |   /* 播放按钮特殊处理 */
197 |   .playback-buttons button:nth-child(2) {
198 |     flex: 1.2;
199 |   }
200 |   .playback-buttons button:nth-child(2) svg {
201 |     width: 40px;
202 |     height: 40px;
203 |   }
204 | 
205 |   /* 音量控制容器特殊处理 */
206 |   .progress-container:last-child {
207 |     width: 90%;
208 |     padding: 0;
209 |     gap: 0;
210 |   }
211 | 
212 |   /* 音量条特殊处理 */
213 |   .progress-container:last-child .volume-bar {
214 |     margin: 0 15px;
215 |   }
216 | }
217 | 
218 | /* 编辑相关样式 */
219 | .edit-overlay {
220 |   position: fixed;
221 |   top: 0;
222 |   left: 0;
223 |   right: 0;
224 |   bottom: 0;
225 |   background: rgba(0, 0, 0, 0.5);
226 |   display: flex;
227 |   align-items: center;
228 |   justify-content: center;
229 |   z-index: 50;
230 | }
231 | 
232 | .edit-panel {
233 |   background: white;
234 |   padding: 2rem;
235 |   border-radius: 0.5rem;
236 |   width: 100%;
237 |   max-width: 32rem;
238 |   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
239 |     0 2px 4px -1px rgba(0, 0, 0, 0.06);
240 | }
241 | 
242 | /* 输入框样式 */
243 | .input-field {
244 |   width: 100%;
245 |   padding: 0.5rem;
246 |   border: 1px solid #e5e7eb;
247 |   border-radius: 0.375rem;
248 |   margin-bottom: 1rem;
249 | }
250 | 
251 | .input-field:focus {
252 |   outline: none;
253 |   border-color: #6366f1;
254 |   box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
255 | }
256 | 
257 | /* 按钮样式 */
258 | .btn {
259 |   padding: 0.5rem 1rem;
260 |   border-radius: 0.375rem;
261 |   font-weight: 500;
262 |   transition: all 0.2s;
263 | }
264 | 
265 | .btn-primary {
266 |   background-color: #6366f1;
267 |   color: white;
268 | }
269 | 
270 | .btn-primary:hover {
271 |   background-color: #4f46e5;
272 | }
273 | 
274 | .btn-secondary {
275 |   background-color: #9ca3af;
276 |   color: white;
277 | }
278 | 
279 | .btn-secondary:hover {
280 |   background-color: #6b7280;
281 | }
282 | 
283 | /* 滑块样式 */
284 | .range-slider {
285 |   width: 100%;
286 |   height: 4px;
287 |   background: #e5e7eb;
288 |   border-radius: 2px;
289 |   outline: none;
290 |   -webkit-appearance: none;
291 | }
292 | 
293 | .range-slider::-webkit-slider-thumb {
294 |   -webkit-appearance: none;
295 |   width: 16px;
296 |   height: 16px;
297 |   background: #6366f1;
298 |   border-radius: 50%;
299 |   cursor: pointer;
300 | }
301 | 
302 | /* 文件上传样式 */
303 | .file-input {
304 |   width: 100%;
305 |   padding: 0.5rem;
306 |   border: 1px dashed #e5e7eb;
307 |   border-radius: 0.375rem;
308 |   background: #f9fafb;
309 |   cursor: pointer;
310 | }
311 | 
312 | .file-input:hover {
313 |   border-color: #6366f1;
314 |   background: #f3f4f6;
315 | }
316 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import "./globals.css";
 3 | import Script from "next/script";
 4 | import { inter } from "./fonts";
 5 | 
 6 | export const metadata: Metadata = {
 7 |   title: "Card.Catpng.net - 音乐卡片生成器",
 8 |   description: "为你喜欢的音乐生成精美卡片",
 9 |   icons: {
10 |     shortcut: ["/favicon.ico"],
11 |   },
12 | };
13 | 
14 | export default function RootLayout({
15 |   children,
16 | }: Readonly<{
17 |   children: React.ReactNode;
18 | }>) {
19 |   return (
20 |     <html lang="zh-CN" className={inter.variable}>
21 |       <head>
22 |         <link
23 |           href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=optional"
24 |           rel="stylesheet"
25 |         />
26 |         {/* Google Analytics 代码 */}
27 |         <Script
28 |           strategy="afterInteractive"
29 |           src={`https://www.googletagmanager.com/gtag/js?id=G-95V6TTBE9N`}
30 |         />
31 |         <Script
32 |           id="google-analytics"
33 |           strategy="afterInteractive"
34 |           dangerouslySetInnerHTML={{
35 |             __html: `
36 |               window.dataLayer = window.dataLayer || [];
37 |               function gtag(){dataLayer.push(arguments);}
38 |               gtag('js', new Date());
39 |               gtag('config', 'G-95V6TTBE9N', {
40 |                 linker: {
41 |                   domains: [ 'card.catpng.net']
42 |                 },
43 |                 allow_linker: true
44 |               });
45 |             `,
46 |           }}
47 |         />
48 |       </head>
49 |       <body className="font-sans antialiased">{children}</body>
50 |     </html>
51 |   );
52 | }
53 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import Link from "next/link";
  5 | 
  6 | // 模板列表
  7 | const templates = [
  8 |   {
  9 |     id: "poster",
 10 |     name: "Poster",
 11 |     description: "音乐海报",
 12 |     image: "/poster.png",
 13 |   },
 14 |   {
 15 |     id: "phone",
 16 |     name: "Phone",
 17 |     description: "音乐小卡",
 18 |     image: "/phone.png",
 19 |   },
 20 | ];
 21 | 
 22 | export default function Home() {
 23 |   const [url, setUrl] = useState("");
 24 |   const [selectedTemplate, setSelectedTemplate] = useState("poster");
 25 |   const [imagesLoaded, setImagesLoaded] = useState(false);
 26 |   const [fallbackImages, setFallbackImages] = useState(false);
 27 | 
 28 |   // 检测图片加载失败，使用备用方案
 29 |   useEffect(() => {
 30 |     const timer = setTimeout(() => {
 31 |       if (!imagesLoaded) {
 32 |         setFallbackImages(true);
 33 |       }
 34 |     }, 3000); // 3秒后如果图片还未加载，使用备用方案
 35 | 
 36 |     return () => clearTimeout(timer);
 37 |   }, [imagesLoaded]);
 38 | 
 39 |   return (
 40 |     <main className="min-h-screen bg-gray-100 py-12 px-4">
 41 |       <div className="max-w-6xl mx-auto">
 42 |         <div className="text-center mb-12">
 43 |           <h1 className="text-4xl font-bold text-gray-900 mb-4">
 44 |             Card.Catpng.net
 45 |           </h1>
 46 |           <p className="text-xl text-gray-600 mb-8">
 47 |             选择一个模板，输入网易云音乐链接，自动生成音乐卡片
 48 |           </p>
 49 | 
 50 |           {/* 音乐链接输入 */}
 51 |           <div className="max-w-xl mx-auto bg-white rounded-lg shadow-lg p-6 mb-12">
 52 |             <div className="space-y-4">
 53 |               <div>
 54 |                 <label
 55 |                   htmlFor="url"
 56 |                   className="block text-sm font-medium text-gray-700 mb-2"
 57 |                 >
 58 |                   输入音乐链接
 59 |                 </label>
 60 |                 <input
 61 |                   type="text"
 62 |                   id="url"
 63 |                   value={url}
 64 |                   onChange={(e) => setUrl(e.target.value)}
 65 |                   placeholder="请输入网易云音乐链接"
 66 |                   className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
 67 |                 />
 68 |               </div>
 69 |               <div>
 70 |                 <label className="block text-sm font-medium text-gray-700 mb-2">
 71 |                   选择模板
 72 |                 </label>
 73 |                 <select
 74 |                   value={selectedTemplate}
 75 |                   onChange={(e) => setSelectedTemplate(e.target.value)}
 76 |                   className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
 77 |                 >
 78 |                   {templates.map((template) => (
 79 |                     <option key={template.id} value={template.id}>
 80 |                       {template.name}
 81 |                     </option>
 82 |                   ))}
 83 |                 </select>
 84 |               </div>
 85 |               <Link
 86 |                 href={`/${selectedTemplate}?url=${encodeURIComponent(url)}`}
 87 |                 className={`w-full inline-flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
 88 |                   !url.trim() ? "opacity-50 cursor-not-allowed" : ""
 89 |                 }`}
 90 |                 onClick={(e) => {
 91 |                   if (!url.trim()) {
 92 |                     e.preventDefault();
 93 |                   }
 94 |                 }}
 95 |               >
 96 |                 开始创建
 97 |               </Link>
 98 |             </div>
 99 | 
100 |             <div className="mt-4 text-sm text-gray-500">
101 |               <p>支持的音乐平台：</p>
102 |               <ul className="list-disc list-inside mt-2">
103 |                 <li>网易云音乐 (music.163.com)</li>
104 |               </ul>
105 |             </div>
106 |           </div>
107 |         </div>
108 | 
109 |         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
110 |           {templates.map((template) => (
111 |             <div key={template.id} className="block group">
112 |               <div className="bg-white rounded-lg shadow-lg overflow-hidden transform transition duration-200 hover:scale-105">
113 |                 <div className="relative h-[600px]">
114 |                   {fallbackImages ? (
115 |                     // 备用方案：使用普通img标签
116 |                     <img
117 |                       src={template.image}
118 |                       alt={template.name}
119 |                       className="w-full h-full object-contain"
120 |                       onLoad={() => setImagesLoaded(true)}
121 |                     />
122 |                   ) : (
123 |                     // 主要方案：使用picture元素和多个源
124 |                     <picture>
125 |                       <source srcSet={template.image} type="image/webp" />
126 |                       <source srcSet={template.image} type="image/png" />
127 |                       <img
128 |                         src={template.image}
129 |                         alt={template.name}
130 |                         className="w-full h-full object-contain"
131 |                         onLoad={() => setImagesLoaded(true)}
132 |                         loading="eager"
133 |                       />
134 |                     </picture>
135 |                   )}
136 |                 </div>
137 |                 <div className="p-6 relative bg-white">
138 |                   <h2 className="text-2xl font-bold text-gray-900 mb-2">
139 |                     {template.name}
140 |                   </h2>
141 |                   <p className="text-gray-600">{template.description}</p>
142 |                 </div>
143 |               </div>
144 |             </div>
145 |           ))}
146 |         </div>
147 | 
148 |         {/* Footer */}
149 |         <footer className="mt-16 text-center text-sm text-gray-500">
150 |           <div className="space-y-2">
151 |             <p>
152 |               © 2024{" "}
153 |               <a
154 |                 href="https://card.catpng.net"
155 |                 target="_blank"
156 |                 rel="noopener noreferrer"
157 |                 className="text-blue-600 hover:text-blue-800"
158 |               >
159 |                 Card.Catpng.net
160 |               </a>
161 |               . All rights reserved.
162 |             </p>
163 |           </div>
164 |         </footer>
165 |       </div>
166 |     </main>
167 |   );
168 | }
169 | 


--------------------------------------------------------------------------------
/app/phone/PhoneContent.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useRef, useState, useEffect } from "react";
  4 | import { useSearchParams } from "next/navigation";
  5 | import { MusicInfo } from "@/types/music";
  6 | import { Theme } from "@/types/theme";
  7 | import { generatePhonePoster } from "@/utils/phone";
  8 | import { parseMusicUrl, processLyrics } from "@/utils/musicParser";
  9 | import Link from "next/link";
 10 | 
 11 | // 海报元素配置接口
 12 | interface PosterElement {
 13 |   x: number;
 14 |   y: number;
 15 |   scale: number;
 16 |   visible: boolean;
 17 | }
 18 | 
 19 | interface PosterConfig {
 20 |   cover: PosterElement;
 21 |   title: PosterElement;
 22 |   artist: PosterElement;
 23 |   lyrics: PosterElement;
 24 |   duration: PosterElement;
 25 | }
 26 | 
 27 | // 背景设置接口
 28 | interface BackgroundConfig {
 29 |   imageUrl?: string; // 自定义背景图片URL
 30 |   blur?: number; // 模糊程度 (0-20)
 31 |   opacity?: number; // 不透明度 (0-1)
 32 |   gradient?: {
 33 |     angle: number; // 渐变角度 (0-360)
 34 |     colors: string[]; // 渐变颜色数组
 35 |     stops: number[]; // 渐变位置数组 (0-1)
 36 |   };
 37 | }
 38 | 
 39 | // 默认主题
 40 | const phoneTheme: Theme = {
 41 |   id: "phone",
 42 |   name: "手机风格",
 43 |   background: "/templates/phone.png",
 44 |   backgroundType: "image",
 45 |   text: "#ffffff",
 46 |   secondary: "#cccccc",
 47 | };
 48 | 
 49 | // 海报元素配置
 50 | const posterConfig: PosterConfig = {
 51 |   cover: { x: 0.1, y: 0.04, scale: 1, visible: true },
 52 |   title: { x: 0.1, y: 0.693, scale: 1, visible: true },
 53 |   artist: { x: 0.1, y: 0.693, scale: 1, visible: true },
 54 |   lyrics: { x: 0.1, y: 0.64, scale: 1, visible: true },
 55 |   duration: { x: 0.9, y: 0.743, scale: 1, visible: true },
 56 | };
 57 | 
 58 | // 加载状态组件
 59 | function LoadingOverlay({ message }: { message: string }) {
 60 |   return (
 61 |     <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
 62 |       <div className="bg-white rounded-lg p-8 max-w-sm w-full mx-4 text-center">
 63 |         <div className="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-4"></div>
 64 |         <p className="text-gray-700">{message}</p>
 65 |       </div>
 66 |     </div>
 67 |   );
 68 | }
 69 | 
 70 | // 导航栏组件
 71 | function NavigationBar({ currentUrl }: { currentUrl: string | null }) {
 72 |   return (
 73 |     <div className="flex items-center justify-between mb-8">
 74 |       <div className="flex items-center space-x-4">
 75 |         <Link
 76 |           href="/"
 77 |           className="flex items-center text-gray-600 hover:text-gray-900"
 78 |         >
 79 |           <span className="material-symbols-outlined mr-1">home</span>
 80 |           返回首页
 81 |         </Link>
 82 |       </div>
 83 |       <div className="flex items-center space-x-4">
 84 |         <span className="text-gray-500">切换模板：</span>
 85 |         <Link
 86 |           href={`/poster${
 87 |             currentUrl ? `?url=${encodeURIComponent(currentUrl)}` : ""
 88 |           }`}
 89 |           className="px-4 py-2 bg-white rounded-md shadow hover:shadow-md transition-shadow text-gray-600 hover:text-gray-900"
 90 |         >
 91 |           Poster
 92 |         </Link>
 93 |       </div>
 94 |     </div>
 95 |   );
 96 | }
 97 | 
 98 | export default function PhoneContent() {
 99 |   const searchParams = useSearchParams();
100 |   const canvasRef = useRef<HTMLCanvasElement>(null);
101 |   const [musicInfo, setMusicInfo] = useState<MusicInfo>({
102 |     title: "",
103 |     artist: "",
104 |     coverUrl: "",
105 |     lyrics: "",
106 |     duration: 0,
107 |   });
108 |   const [isLoading, setIsLoading] = useState(false);
109 |   const [error, setError] = useState<string | null>(null);
110 |   const [isSaving, setIsSaving] = useState(false);
111 |   const [useGradient, setUseGradient] = useState(false);
112 |   const [backgroundConfig, setBackgroundConfig] = useState<BackgroundConfig>({
113 |     blur: 0,
114 |     opacity: 1,
115 |     gradient: {
116 |       angle: 180,
117 |       colors: ["rgba(0,0,0,0.7)", "rgba(0,0,0,0.3)"],
118 |       stops: [0, 1],
119 |     },
120 |   });
121 | 
122 |   // 处理文本编辑
123 |   const handleTextEdit = (field: keyof MusicInfo, value: string | number) => {
124 |     setMusicInfo((prev) => ({
125 |       ...prev,
126 |       [field]: value,
127 |     }));
128 |   };
129 | 
130 |   // 处理封面上传
131 |   const handleCoverUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
132 |     const file = e.target.files?.[0];
133 |     if (file) {
134 |       const reader = new FileReader();
135 |       reader.onload = (event) => {
136 |         setMusicInfo((prev) => ({
137 |           ...prev,
138 |           coverUrl: event.target?.result as string,
139 |         }));
140 |       };
141 |       reader.readAsDataURL(file);
142 |     }
143 |   };
144 | 
145 |   // 处理海报保存
146 |   const handleSavePoster = async () => {
147 |     if (!canvasRef.current) return;
148 |     setIsSaving(true);
149 |     try {
150 |       const canvas = canvasRef.current;
151 |       canvas.toBlob((blob) => {
152 |         if (!blob) throw new Error("Failed to create blob");
153 |         const url = URL.createObjectURL(blob);
154 |         const a = document.createElement("a");
155 |         a.href = url;
156 |         a.download = `${musicInfo.title}-${musicInfo.artist}.png`;
157 |         a.click();
158 |         URL.revokeObjectURL(url);
159 |       });
160 |     } catch (error) {
161 |       console.error("保存海报失败:", error);
162 |     } finally {
163 |       setIsSaving(false);
164 |     }
165 |   };
166 | 
167 |   // 处理时长编辑
168 |   const handleDurationEdit = (value: string) => {
169 |     // 解析mm:ss格式的时长
170 |     const [minutes, seconds] = value.split(":").map(Number);
171 |     if (!isNaN(minutes) && !isNaN(seconds)) {
172 |       const totalSeconds = minutes * 60 + seconds;
173 |       handleTextEdit("duration", totalSeconds);
174 |     }
175 |   };
176 | 
177 |   // 格式化时长为mm:ss
178 |   const formatDuration = (seconds: number): string => {
179 |     const minutes = Math.floor(seconds / 60);
180 |     const remainingSeconds = Math.floor(seconds % 60);
181 |     return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
182 |   };
183 | 
184 |   // 处理背景上传
185 |   const handleBackgroundUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
186 |     const file = e.target.files?.[0];
187 |     if (file) {
188 |       const reader = new FileReader();
189 |       reader.onload = (event) => {
190 |         setBackgroundConfig((prev) => ({
191 |           ...prev,
192 |           imageUrl: event.target?.result as string,
193 |         }));
194 |       };
195 |       reader.readAsDataURL(file);
196 |     }
197 |   };
198 | 
199 |   // 处理背景设置更新
200 |   const handleBackgroundConfigUpdate = (
201 |     field: keyof BackgroundConfig,
202 |     value: number
203 |   ) => {
204 |     setBackgroundConfig((prev) => ({
205 |       ...prev,
206 |       [field]: value,
207 |     }));
208 |   };
209 | 
210 |   // 加载音乐信息
211 |   useEffect(() => {
212 |     const loadMusicInfo = async () => {
213 |       // 处理URL参数传递的音乐信息
214 |       const params = searchParams;
215 |       if (params && params.get("title")) {
216 |         setIsLoading(true);
217 |         try {
218 |           const rawLyrics = params.get("lyrics") || "";
219 |           console.log("URL参数传递的原始歌词:", rawLyrics);
220 |           const processedLyrics = processLyrics(rawLyrics, 1); // 只获取1行歌词
221 |           console.log("URL参数歌词处理后:", processedLyrics);
222 |           const info: MusicInfo = {
223 |             title: params.get("title") || "",
224 |             artist: params.get("artist") || "",
225 |             coverUrl: params.get("cover") || "",
226 |             lyrics: processedLyrics,
227 |             duration: Number(params.get("duration")) || 0,
228 |           };
229 |           console.log("设置的音乐信息:", info);
230 |           setMusicInfo(info);
231 |         } catch (err) {
232 |           setError(err instanceof Error ? err.message : "加载音乐信息失败");
233 |         } finally {
234 |           setIsLoading(false);
235 |         }
236 |         return;
237 |       }
238 | 
239 |       // 处理音乐链接获取信息
240 |       const url = searchParams.get("url");
241 |       if (!url) return;
242 | 
243 |       setIsLoading(true);
244 |       setError(null);
245 | 
246 |       try {
247 |         // 先解析URL获取平台和ID
248 |         const { platform, id } = await parseMusicUrl(url);
249 |         const params = new URLSearchParams({
250 |           platform,
251 |           id,
252 |         });
253 | 
254 |         const response = await fetch(`/api/music?${params.toString()}`);
255 |         if (!response.ok) {
256 |           throw new Error("获取音乐信息失败");
257 |         }
258 |         const data = await response.json();
259 |         console.log("API返回的原始数据:", data);
260 |         data.lyrics = processLyrics(data.lyrics, 1); // 只获取1行歌词
261 |         console.log("API数据歌词处理后:", data);
262 |         setMusicInfo(data);
263 |       } catch (error) {
264 |         console.error("获取音乐信息失败:", error);
265 |         setError(
266 |           error instanceof Error
267 |             ? error.message
268 |             : "获取音乐信息失败，请检查链接是否正确"
269 |         );
270 |       } finally {
271 |         setIsLoading(false);
272 |       }
273 |     };
274 | 
275 |     loadMusicInfo();
276 |   }, [searchParams]);
277 | 
278 |   // 绘制海报
279 |   useEffect(() => {
280 |     if (canvasRef.current && musicInfo && phoneTheme) {
281 |       generatePhonePoster(
282 |         canvasRef.current,
283 |         musicInfo,
284 |         phoneTheme,
285 |         {
286 |           cover: {
287 |             size: 800,
288 |             visible: true,
289 |             x: posterConfig.cover.x,
290 |             y: posterConfig.cover.y,
291 |           },
292 |           title: {
293 |             size: 48,
294 |             visible: true,
295 |             x: posterConfig.title.x,
296 |             y: posterConfig.title.y,
297 |           },
298 |           artist: {
299 |             size: 48,
300 |             visible: true,
301 |             x: posterConfig.artist.x,
302 |             y: posterConfig.artist.y,
303 |           },
304 |           lyrics: {
305 |             size: 50,
306 |             visible: true,
307 |             x: posterConfig.lyrics.x,
308 |             y: posterConfig.lyrics.y,
309 |           },
310 |           duration: {
311 |             size: 28,
312 |             visible: true,
313 |             x: posterConfig.duration.x,
314 |             y: posterConfig.duration.y,
315 |           },
316 |         },
317 |         useGradient,
318 |         backgroundConfig
319 |       );
320 |     }
321 |   }, [musicInfo, useGradient, backgroundConfig]);
322 | 
323 |   return (
324 |     <main className="min-h-screen bg-gray-100 py-12 px-4">
325 |       {/* 加载状态 */}
326 |       {isLoading && <LoadingOverlay message="正在获取音乐信息..." />}
327 |       {isSaving && <LoadingOverlay message="正在生成海报..." />}
328 | 
329 |       {error ? (
330 |         <div className="flex items-center justify-center min-h-screen">
331 |           <div className="text-red-500">{error}</div>
332 |         </div>
333 |       ) : (
334 |         <div className="max-w-6xl mx-auto">
335 |           {/* 添加导航栏 */}
336 |           <NavigationBar currentUrl={searchParams.get("url")} />
337 | 
338 |           <div className="mb-8">
339 |             <h1 className="text-3xl font-bold text-center text-gray-900">
340 |               Card.Catpng.net
341 |             </h1>
342 |           </div>
343 | 
344 |           <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
345 |             {/* 左侧预览 */}
346 |             <div className="lg:col-span-2 bg-white rounded-lg shadow-lg p-6">
347 |               <div className="relative">
348 |                 <canvas
349 |                   ref={canvasRef}
350 |                   width={1000}
351 |                   height={1500}
352 |                   className="w-full h-auto"
353 |                 />
354 |               </div>
355 |             </div>
356 | 
357 |             {/* 右侧控制面板 */}
358 |             <div className="space-y-6 bg-white rounded-lg shadow-lg p-6">
359 |               {/* 基本信息编辑 */}
360 |               <div className="space-y-4">
361 |                 <h2 className="text-lg font-semibold">基本信息</h2>
362 | 
363 |                 {/* 标题编辑 */}
364 |                 <div>
365 |                   <label className="block text-sm font-medium text-gray-700">
366 |                     歌曲标题
367 |                   </label>
368 |                   <input
369 |                     type="text"
370 |                     value={musicInfo.title}
371 |                     onChange={(e) => handleTextEdit("title", e.target.value)}
372 |                     className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
373 |                   />
374 |                 </div>
375 | 
376 |                 {/* 艺术家编辑 */}
377 |                 <div>
378 |                   <label className="block text-sm font-medium text-gray-700">
379 |                     艺术家
380 |                   </label>
381 |                   <input
382 |                     type="text"
383 |                     value={musicInfo.artist}
384 |                     onChange={(e) => handleTextEdit("artist", e.target.value)}
385 |                     className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
386 |                   />
387 |                 </div>
388 | 
389 |                 {/* 歌词编辑 */}
390 |                 <div>
391 |                   <label className="block text-sm font-medium text-gray-700">
392 |                     歌词
393 |                   </label>
394 |                   <textarea
395 |                     value={musicInfo.lyrics}
396 |                     onChange={(e) => handleTextEdit("lyrics", e.target.value)}
397 |                     rows={3}
398 |                     className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
399 |                   />
400 |                 </div>
401 | 
402 |                 {/* 实际时长编辑 */}
403 |                 <div>
404 |                   <label className="block text-sm font-medium text-gray-700">
405 |                     实际时长 (mm:ss)
406 |                   </label>
407 |                   <input
408 |                     type="text"
409 |                     value={formatDuration(musicInfo.duration)}
410 |                     onChange={(e) => handleDurationEdit(e.target.value)}
411 |                     placeholder="0:00"
412 |                     pattern="[0-9]+:[0-5][0-9]"
413 |                     className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
414 |                   />
415 |                 </div>
416 | 
417 |                 {/* 播放时长编辑 */}
418 |                 <div>
419 |                   <label className="block text-sm font-medium text-gray-700">
420 |                     播放时长 (mm:ss)
421 |                   </label>
422 |                   <input
423 |                     type="text"
424 |                     value={formatDuration(
425 |                       musicInfo.playDuration ||
426 |                         Math.floor(musicInfo.duration / 3)
427 |                     )}
428 |                     onChange={(e) => {
429 |                       const [minutes, seconds] = e.target.value
430 |                         .split(":")
431 |                         .map(Number);
432 |                       if (!isNaN(minutes) && !isNaN(seconds)) {
433 |                         handleTextEdit("playDuration", minutes * 60 + seconds);
434 |                       }
435 |                     }}
436 |                     placeholder="0:00"
437 |                     pattern="[0-9]+:[0-5][0-9]"
438 |                     className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
439 |                   />
440 |                 </div>
441 | 
442 |                 {/* 封面上传 */}
443 |                 <div>
444 |                   <label className="block text-sm font-medium text-gray-700">
445 |                     封面图片
446 |                   </label>
447 |                   <input
448 |                     type="file"
449 |                     accept="image/*"
450 |                     onChange={handleCoverUpload}
451 |                     className="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100"
452 |                   />
453 |                 </div>
454 |               </div>
455 | 
456 |               {/* 背景设置 */}
457 |               <div className="space-y-4">
458 |                 <h2 className="text-lg font-semibold">背景设置</h2>
459 | 
460 |                 {/* 背景图片上传 */}
461 |                 <div>
462 |                   <label className="block text-sm font-medium text-gray-700">
463 |                     背景图片
464 |                   </label>
465 |                   <input
466 |                     type="file"
467 |                     accept="image/*"
468 |                     onChange={handleBackgroundUpload}
469 |                     className="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100"
470 |                   />
471 |                 </div>
472 | 
473 |                 {/* 模糊程度设置 */}
474 |                 <div>
475 |                   <label className="block text-sm font-medium text-gray-700">
476 |                     模糊程度
477 |                   </label>
478 |                   <input
479 |                     type="range"
480 |                     min="0"
481 |                     max="20"
482 |                     step="1"
483 |                     value={backgroundConfig.blur}
484 |                     onChange={(e) =>
485 |                       handleBackgroundConfigUpdate(
486 |                         "blur",
487 |                         Number(e.target.value)
488 |                       )
489 |                     }
490 |                     className="mt-1 block w-full"
491 |                   />
492 |                   <div className="mt-1 text-sm text-gray-500 text-right">
493 |                     {backgroundConfig.blur}px
494 |                   </div>
495 |                 </div>
496 | 
497 |                 {/* 不透明度设置 */}
498 |                 <div>
499 |                   <label className="block text-sm font-medium text-gray-700">
500 |                     不透明度
501 |                   </label>
502 |                   <input
503 |                     type="range"
504 |                     min="0"
505 |                     max="1"
506 |                     step="0.1"
507 |                     value={backgroundConfig.opacity}
508 |                     onChange={(e) =>
509 |                       handleBackgroundConfigUpdate(
510 |                         "opacity",
511 |                         Number(e.target.value)
512 |                       )
513 |                     }
514 |                     className="mt-1 block w-full"
515 |                   />
516 |                   <div className="mt-1 text-sm text-gray-500 text-right">
517 |                     {Math.round((backgroundConfig.opacity ?? 1) * 100)}%
518 |                   </div>
519 |                 </div>
520 | 
521 |                 {/* 渐变背景开关 */}
522 |                 <div className="flex items-center justify-between">
523 |                   <span className="text-sm font-medium text-gray-700">
524 |                     渐变背景
525 |                   </span>
526 |                   <label className="relative inline-flex items-center cursor-pointer">
527 |                     <input
528 |                       type="checkbox"
529 |                       checked={useGradient}
530 |                       onChange={(e) => setUseGradient(e.target.checked)}
531 |                       className="sr-only peer"
532 |                     />
533 |                     <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
534 |                   </label>
535 |                 </div>
536 |               </div>
537 | 
538 |               {/* 保存按钮 */}
539 |               <button
540 |                 onClick={handleSavePoster}
541 |                 disabled={isSaving}
542 |                 className="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400"
543 |               >
544 |                 {isSaving ? "保存中..." : "保存海报"}
545 |               </button>
546 |             </div>
547 |           </div>
548 |         </div>
549 |       )}
550 |       <div className="mt-8 text-center text-sm text-gray-500">
551 |         如果使用过程有错误，或者你对网站有其他建议，可以发送具体内容到我的邮箱：
552 |         <a
553 |           href="mailto:aidaoxx@gmail.com"
554 |           className="text-indigo-600 hover:text-indigo-800"
555 |         >
556 |           aidaoxx@gmail.com
557 |         </a>
558 |         ，谢谢
559 |       </div>
560 |     </main>
561 |   );
562 | }
563 | 


--------------------------------------------------------------------------------
/app/phone/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Metadata } from "next";
 2 | import { Suspense } from "react";
 3 | import PhoneContent from "./PhoneContent";
 4 | 
 5 | // 页面元数据
 6 | export const metadata: Metadata = {
 7 |   title: "Phone模板 - Card.catpng.net",
 8 |   description: "使用Phone模板生成你的音乐小卡",
 9 | };
10 | 
11 | // 手机模板页面组件
12 | export default function PhonePage() {
13 |   return (
14 |     <Suspense fallback={<div>Loading...</div>}>
15 |       <PhoneContent />
16 |     </Suspense>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/app/poster/SpotifyContent.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useEffect, useRef, useState } from "react";
  4 | import { useSearchParams } from "next/navigation";
  5 | import { themes } from "@/lib/themes";
  6 | import { generatePosterImage } from "@/utils/poster";
  7 | import { MusicInfo } from "@/types/music";
  8 | import { parseMusicUrl, processLyrics } from "@/utils/musicParser";
  9 | import Link from "next/link";
 10 | 
 11 | // 海报元素位置接口
 12 | interface PosterElement {
 13 |   x: number;
 14 |   y: number;
 15 |   scale: number;
 16 |   visible: boolean;
 17 | }
 18 | 
 19 | // 海报配置接口
 20 | interface PosterConfig {
 21 |   cover: PosterElement;
 22 |   title: PosterElement;
 23 |   artist: PosterElement;
 24 |   lyrics: PosterElement;
 25 |   duration: PosterElement;
 26 | }
 27 | 
 28 | // 加载状态组件
 29 | function LoadingOverlay({ message }: { message: string }) {
 30 |   return (
 31 |     <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
 32 |       <div className="bg-white rounded-lg p-8 max-w-sm w-full mx-4 text-center">
 33 |         <div className="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-4"></div>
 34 |         <p className="text-gray-700">{message}</p>
 35 |       </div>
 36 |     </div>
 37 |   );
 38 | }
 39 | 
 40 | // 导航栏组件
 41 | function NavigationBar({ currentUrl }: { currentUrl: string | null }) {
 42 |   return (
 43 |     <div className="flex items-center justify-between mb-8">
 44 |       <div className="flex items-center space-x-4">
 45 |         <Link
 46 |           href="/"
 47 |           className="flex items-center text-gray-600 hover:text-gray-900"
 48 |         >
 49 |           <span className="material-symbols-outlined mr-1">home</span>
 50 |           返回首页
 51 |         </Link>
 52 |       </div>
 53 |       <div className="flex items-center space-x-4">
 54 |         <span className="text-gray-500">切换模板：</span>
 55 |         <Link
 56 |           href={`/phone${
 57 |             currentUrl ? `?url=${encodeURIComponent(currentUrl)}` : ""
 58 |           }`}
 59 |           className="px-4 py-2 bg-white rounded-md shadow hover:shadow-md transition-shadow text-gray-600 hover:text-gray-900"
 60 |         >
 61 |           Phone
 62 |         </Link>
 63 |       </div>
 64 |     </div>
 65 |   );
 66 | }
 67 | 
 68 | export default function PosterContent() {
 69 |   const searchParams = useSearchParams();
 70 |   const canvasRef = useRef<HTMLCanvasElement>(null);
 71 |   const [selectedTheme, setSelectedTheme] = useState(themes[0]);
 72 |   const [musicInfo, setMusicInfo] = useState<MusicInfo>({
 73 |     title: "",
 74 |     artist: "",
 75 |     coverUrl: "",
 76 |     lyrics: "",
 77 |     duration: 0,
 78 |   });
 79 |   const [isEditing, setIsEditing] = useState(false);
 80 |   const [isLoading, setIsLoading] = useState(false);
 81 |   const [error, setError] = useState<string | null>(null);
 82 |   const [isSaving, setIsSaving] = useState(false);
 83 | 
 84 |   // 海报元素配置
 85 |   const [posterConfig, setPosterConfig] = useState<PosterConfig>({
 86 |     cover: { x: 0.053, y: 0.034, scale: 1, visible: true },
 87 |     title: { x: 0.053, y: 0.73, scale: 1, visible: true },
 88 |     artist: { x: 0.053, y: 0.749, scale: 1, visible: true },
 89 |     lyrics: { x: 0.053, y: 0.801, scale: 1, visible: true },
 90 |     duration: { x: 0.947, y: 0.73, scale: 1, visible: true },
 91 |   });
 92 | 
 93 |   // 处理文本编辑
 94 |   const handleTextEdit = (field: keyof MusicInfo, value: string | number) => {
 95 |     console.log("文本编辑前的值:", field, musicInfo[field]);
 96 |     console.log("编辑后的新值:", value);
 97 |     setMusicInfo((prev) => ({
 98 |       ...prev,
 99 |       [field]: value,
100 |     }));
101 |   };
102 | 
103 |   // 处理封面上传
104 |   const handleCoverUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
105 |     const file = e.target.files?.[0];
106 |     if (file) {
107 |       const reader = new FileReader();
108 |       reader.onload = (event) => {
109 |         setMusicInfo((prev) => ({
110 |           ...prev,
111 |           coverUrl: event.target?.result as string,
112 |         }));
113 |       };
114 |       reader.readAsDataURL(file);
115 |     }
116 |   };
117 | 
118 |   // 处理海报保存
119 |   const handleSavePoster = async () => {
120 |     if (!canvasRef.current) return;
121 | 
122 |     setIsSaving(true);
123 |     try {
124 |       // 创建临时 canvas
125 |       const tempCanvas = document.createElement("canvas");
126 |       tempCanvas.width = 1140;
127 |       tempCanvas.height = 1740;
128 |       const tempCtx = tempCanvas.getContext("2d");
129 |       if (!tempCtx) return;
130 | 
131 |       // 重新生成海报内容到临时 canvas
132 |       await generatePosterImage(tempCanvas, musicInfo, selectedTheme, {
133 |         cover: {
134 |           size: posterConfig.cover.scale * 1020,
135 |           visible: posterConfig.cover.visible,
136 |           x: posterConfig.cover.x,
137 |           y: posterConfig.cover.y,
138 |         },
139 |         title: {
140 |           size: posterConfig.title.scale * 64,
141 |           visible: posterConfig.title.visible,
142 |           x: posterConfig.title.x,
143 |           y: posterConfig.title.y,
144 |         },
145 |         artist: {
146 |           size: posterConfig.artist.scale * 48,
147 |           visible: posterConfig.artist.visible,
148 |           x: posterConfig.artist.x,
149 |           y: posterConfig.artist.y,
150 |         },
151 |         lyrics: {
152 |           size: posterConfig.lyrics.scale * 40,
153 |           visible: posterConfig.lyrics.visible,
154 |           x: posterConfig.lyrics.x,
155 |           y: posterConfig.lyrics.y,
156 |         },
157 |         duration: {
158 |           size: posterConfig.duration.scale * 36,
159 |           visible: posterConfig.duration.visible,
160 |           x: posterConfig.duration.x,
161 |           y: posterConfig.duration.y,
162 |         },
163 |       });
164 | 
165 |       // 导出为图片
166 |       const blob = await new Promise<Blob | null>((resolve) => {
167 |         tempCanvas.toBlob(resolve, "image/png", 1.0);
168 |       });
169 | 
170 |       if (!blob) throw new Error("Failed to create image blob");
171 | 
172 |       // 下载图片
173 |       const url = URL.createObjectURL(blob);
174 |       const a = document.createElement("a");
175 |       a.href = url;
176 |       a.download = `${musicInfo.title || "poster"}.png`;
177 |       a.click();
178 |       URL.revokeObjectURL(url);
179 |     } catch (error) {
180 |       console.error("保存海报失败:", error);
181 |       alert("保存海报失败，请重试");
182 |     } finally {
183 |       setIsSaving(false);
184 |     }
185 |   };
186 | 
187 |   // 更新元素配置
188 |   const updateElementConfig = (
189 |     element: keyof PosterConfig,
190 |     field: keyof PosterElement,
191 |     value: number | boolean
192 |   ) => {
193 |     setPosterConfig((prev) => ({
194 |       ...prev,
195 |       [element]: {
196 |         ...prev[element],
197 |         [field]: value,
198 |       },
199 |     }));
200 |   };
201 | 
202 |   // 初始化主题
203 |   useEffect(() => {
204 |     const themeId = searchParams.get("theme") || themes[0].id;
205 |     const theme = themes.find((t) => t.id === themeId) || themes[0];
206 |     setSelectedTheme(theme);
207 |   }, [searchParams]);
208 | 
209 |   // 绘制海报
210 |   useEffect(() => {
211 |     if (canvasRef.current && musicInfo && selectedTheme) {
212 |       console.log("绘制海报时的音乐信息:", musicInfo);
213 |       generatePosterImage(canvasRef.current, musicInfo, selectedTheme, {
214 |         cover: {
215 |           size: posterConfig.cover.scale * 1020,
216 |           visible: posterConfig.cover.visible,
217 |           x: posterConfig.cover.x,
218 |           y: posterConfig.cover.y,
219 |         },
220 |         title: {
221 |           size: posterConfig.title.scale * 64,
222 |           visible: posterConfig.title.visible,
223 |           x: posterConfig.title.x,
224 |           y: posterConfig.title.y,
225 |         },
226 |         artist: {
227 |           size: posterConfig.artist.scale * 48,
228 |           visible: posterConfig.artist.visible,
229 |           x: posterConfig.artist.x,
230 |           y: posterConfig.artist.y,
231 |         },
232 |         lyrics: {
233 |           size: posterConfig.lyrics.scale * 40,
234 |           visible: posterConfig.lyrics.visible,
235 |           x: posterConfig.lyrics.x,
236 |           y: posterConfig.lyrics.y,
237 |         },
238 |         duration: {
239 |           size: posterConfig.duration.scale * 36,
240 |           visible: posterConfig.duration.visible,
241 |           x: posterConfig.duration.x,
242 |           y: posterConfig.duration.y,
243 |         },
244 |       });
245 |     }
246 |   }, [musicInfo, selectedTheme, posterConfig]);
247 | 
248 |   // 加载音乐信息
249 |   useEffect(() => {
250 |     const loadMusicInfo = async () => {
251 |       // 处理URL参数传递的音乐信息
252 |       const params = searchParams;
253 |       if (params && params.get("title")) {
254 |         setIsLoading(true);
255 |         try {
256 |           const rawLyrics = params.get("lyrics") || "";
257 |           console.log("URL参数传递的原始歌词:", rawLyrics);
258 |           const processedLyrics = processLyrics(rawLyrics);
259 |           console.log("URL参数歌词处理后:", processedLyrics);
260 |           const info: MusicInfo = {
261 |             title: params.get("title") || "",
262 |             artist: params.get("artist") || "",
263 |             coverUrl: params.get("cover") || "",
264 |             lyrics: processedLyrics,
265 |             duration: Number(params.get("duration")) || 0,
266 |           };
267 |           console.log("设置的音乐信息:", info);
268 |           setMusicInfo(info);
269 |         } catch (err) {
270 |           setError(err instanceof Error ? err.message : "加载音乐信息失败");
271 |         } finally {
272 |           setIsLoading(false);
273 |         }
274 |         return;
275 |       }
276 | 
277 |       // 处理音乐链接获取信息
278 |       const url = searchParams.get("url");
279 |       if (!url) return;
280 | 
281 |       setIsLoading(true);
282 |       setError(null);
283 | 
284 |       try {
285 |         // 先解析URL获取平台和ID
286 |         const { platform, id } = await parseMusicUrl(url);
287 |         const params = new URLSearchParams({
288 |           platform,
289 |           id,
290 |         });
291 | 
292 |         const response = await fetch(`/api/music?${params.toString()}`);
293 |         if (!response.ok) {
294 |           throw new Error("获取音乐信息失败");
295 |         }
296 |         const data = await response.json();
297 |         data.lyrics = processLyrics(data.lyrics); // 只获取1行歌词
298 |         setMusicInfo(data);
299 |       } catch (error) {
300 |         console.error("获取音乐信息失败:", error);
301 |         setError(
302 |           error instanceof Error
303 |             ? error.message
304 |             : "获取音乐信息失败，请检查链接是否正确"
305 |         );
306 |       } finally {
307 |         setIsLoading(false);
308 |       }
309 |     };
310 | 
311 |     loadMusicInfo();
312 |   }, [searchParams]);
313 | 
314 |   return (
315 |     <main className="min-h-screen bg-gray-100 py-12 px-4">
316 |       {/* 加载状态 */}
317 |       {isLoading && <LoadingOverlay message="正在获取音乐信息..." />}
318 |       {isSaving && <LoadingOverlay message="正在生成海报..." />}
319 | 
320 |       {error ? (
321 |         <div className="flex items-center justify-center min-h-screen">
322 |           <div className="text-red-500">{error}</div>
323 |         </div>
324 |       ) : (
325 |         <div className="max-w-6xl mx-auto">
326 |           {/* 添加导航栏 */}
327 |           <NavigationBar currentUrl={searchParams.get("url")} />
328 | 
329 |           <div className="mb-8">
330 |             <h1 className="text-3xl font-bold text-center text-gray-900">
331 |               Card.Catpng.net
332 |             </h1>
333 |           </div>
334 | 
335 |           <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
336 |             {/* 左侧预览 */}
337 |             <div className="lg:col-span-2 bg-white rounded-lg shadow-lg p-6">
338 |               <div className="relative">
339 |                 <canvas
340 |                   ref={canvasRef}
341 |                   width={1140}
342 |                   height={1740}
343 |                   className="w-full h-auto"
344 |                 />
345 |                 {isEditing && (
346 |                   <div className="edit-overlay">
347 |                     <div className="edit-panel">
348 |                       <h3 className="text-lg font-medium mb-4">编辑音乐信息</h3>
349 |                       <div className="space-y-4">
350 |                         <input
351 |                           type="text"
352 |                           value={musicInfo.title}
353 |                           onChange={(e) =>
354 |                             handleTextEdit("title", e.target.value)
355 |                           }
356 |                           className="input-field"
357 |                           placeholder="歌曲"
358 |                         />
359 |                         <input
360 |                           type="text"
361 |                           value={musicInfo.artist}
362 |                           onChange={(e) =>
363 |                             handleTextEdit("artist", e.target.value)
364 |                           }
365 |                           className="input-field"
366 |                           placeholder="歌手"
367 |                         />
368 |                         <textarea
369 |                           value={musicInfo.lyrics}
370 |                           onChange={(e) =>
371 |                             handleTextEdit("lyrics", e.target.value)
372 |                           }
373 |                           className="input-field"
374 |                           rows={4}
375 |                           placeholder="歌词"
376 |                         />
377 |                         <div>
378 |                           <label className="block text-sm font-medium text-gray-700 mb-2">
379 |                             时长（秒）
380 |                           </label>
381 |                           <input
382 |                             type="number"
383 |                             value={musicInfo.duration}
384 |                             onChange={(e) =>
385 |                               handleTextEdit("duration", Number(e.target.value))
386 |                             }
387 |                             className="input-field"
388 |                             placeholder="歌曲时长（秒）"
389 |                             min="0"
390 |                           />
391 |                         </div>
392 |                         <div>
393 |                           <label className="block text-sm font-medium text-gray-700 mb-2">
394 |                             更换封面
395 |                           </label>
396 |                           <input
397 |                             type="file"
398 |                             accept="image/*"
399 |                             onChange={handleCoverUpload}
400 |                             className="file-input"
401 |                           />
402 |                         </div>
403 |                         <div className="flex justify-end space-x-2">
404 |                           <button
405 |                             onClick={() => setIsEditing(false)}
406 |                             className="btn btn-secondary"
407 |                           >
408 |                             取消
409 |                           </button>
410 |                           <button
411 |                             onClick={() => setIsEditing(false)}
412 |                             className="btn btn-primary"
413 |                           >
414 |                             确定
415 |                           </button>
416 |                         </div>
417 |                       </div>
418 |                     </div>
419 |                   </div>
420 |                 )}
421 |               </div>
422 |               <div className="mt-4 flex justify-between">
423 |                 <button
424 |                   onClick={() => setIsEditing(true)}
425 |                   className="btn btn-primary"
426 |                 >
427 |                   编辑内容
428 |                 </button>
429 |                 <button
430 |                   onClick={handleSavePoster}
431 |                   className="btn btn-secondary"
432 |                   disabled={isSaving}
433 |                 >
434 |                   {isSaving ? "保存中..." : "下载"}
435 |                 </button>
436 |               </div>
437 |             </div>
438 | 
439 |             {/* 右侧控制面板 */}
440 |             <div className="space-y-6">
441 |               {/* 主题选择 */}
442 |               <div className="bg-white rounded-lg shadow-lg p-6">
443 |                 <h2 className="text-xl font-semibold mb-4">选择主题</h2>
444 |                 <div className="grid grid-cols-3 gap-4">
445 |                   {themes.map((theme) => (
446 |                     <button
447 |                       key={theme.id}
448 |                       onClick={() => setSelectedTheme(theme)}
449 |                       className={`relative aspect-square rounded-lg border-2 p-2 hover:border-indigo-500 ${
450 |                         selectedTheme.id === theme.id
451 |                           ? "border-indigo-500"
452 |                           : "border-gray-200"
453 |                       }`}
454 |                       style={{
455 |                         background:
456 |                           theme.backgroundType === "image"
457 |                             ? `url(${theme.background}) center/cover`
458 |                             : theme.background,
459 |                       }}
460 |                     >
461 |                       <span
462 |                         className="block text-sm font-medium text-center"
463 |                         style={{ color: theme.text }}
464 |                       >
465 |                         {theme.name}
466 |                       </span>
467 |                     </button>
468 |                   ))}
469 |                 </div>
470 |               </div>
471 | 
472 |               {/* 元素编辑 */}
473 |               <div className="bg-white rounded-lg shadow-lg p-6">
474 |                 <h2 className="text-xl font-semibold mb-4">元素编辑</h2>
475 |                 <div className="space-y-4">
476 |                   {Object.entries(posterConfig).map(([key, config]) => (
477 |                     <div key={key} className="space-y-2">
478 |                       <div className="flex items-center justify-between">
479 |                         <label className="text-sm font-medium text-gray-700 capitalize">
480 |                           {key}
481 |                         </label>
482 |                         <input
483 |                           type="checkbox"
484 |                           checked={config.visible}
485 |                           onChange={(e) =>
486 |                             updateElementConfig(
487 |                               key as keyof PosterConfig,
488 |                               "visible",
489 |                               e.target.checked
490 |                             )
491 |                           }
492 |                           className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
493 |                         />
494 |                       </div>
495 |                       <div className="grid grid-cols-2 gap-4">
496 |                         <div>
497 |                           <label className="block text-sm text-gray-500">
498 |                             位置 X
499 |                           </label>
500 |                           <input
501 |                             type="range"
502 |                             min="0"
503 |                             max="100"
504 |                             value={config.x * 100}
505 |                             onChange={(e) =>
506 |                               updateElementConfig(
507 |                                 key as keyof PosterConfig,
508 |                                 "x",
509 |                                 Number(e.target.value) / 100
510 |                               )
511 |                             }
512 |                             className="w-full"
513 |                           />
514 |                         </div>
515 |                         <div>
516 |                           <label className="block text-sm text-gray-500">
517 |                             位置 Y
518 |                           </label>
519 |                           <input
520 |                             type="range"
521 |                             min="0"
522 |                             max="100"
523 |                             value={config.y * 100}
524 |                             onChange={(e) =>
525 |                               updateElementConfig(
526 |                                 key as keyof PosterConfig,
527 |                                 "y",
528 |                                 Number(e.target.value) / 100
529 |                               )
530 |                             }
531 |                             className="w-full"
532 |                           />
533 |                         </div>
534 |                         <div className="col-span-2">
535 |                           <label className="block text-sm text-gray-500">
536 |                             缩放
537 |                           </label>
538 |                           <input
539 |                             type="range"
540 |                             min="50"
541 |                             max="150"
542 |                             value={config.scale * 100}
543 |                             onChange={(e) =>
544 |                               updateElementConfig(
545 |                                 key as keyof PosterConfig,
546 |                                 "scale",
547 |                                 Number(e.target.value) / 100
548 |                               )
549 |                             }
550 |                             className="w-full"
551 |                           />
552 |                         </div>
553 |                       </div>
554 |                     </div>
555 |                   ))}
556 |                 </div>
557 |               </div>
558 |             </div>
559 |           </div>
560 |         </div>
561 |       )}
562 |       <div className="mt-8 text-center text-sm text-gray-500">
563 |         如果使用过程有错误，或者你对网站有其他建议，可以发送具体内容到我的邮箱：
564 |         <a
565 |           href="mailto:aidaoxx@gmail.com"
566 |           className="text-indigo-600 hover:text-indigo-800"
567 |         >
568 |           aidaoxx@gmail.com
569 |         </a>
570 |         ，谢谢
571 |       </div>
572 |     </main>
573 |   );
574 | }
575 | 


--------------------------------------------------------------------------------
/app/poster/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Suspense } from "react";
 2 | import SpotifyContent from "./SpotifyContent";
 3 | 
 4 | // 页面元数据
 5 | export const metadata = {
 6 |   title: "Poster模板 - Card.catpng.net",
 7 |   description: "使用Poster模板生成你的音乐海报",
 8 | };
 9 | 
10 | export default function PosterPage() {
11 |   return (
12 |     <Suspense
13 |       fallback={
14 |         <div className="flex items-center justify-center min-h-screen">
15 |           <div className="text-xl">加载中...</div>
16 |         </div>
17 |       }
18 |     >
19 |       <SpotifyContent />
20 |     </Suspense>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 | 
16 | export default eslintConfig;
17 | 


--------------------------------------------------------------------------------
/lib/themes.ts:
--------------------------------------------------------------------------------
 1 | // lib/themes.ts
 2 | // 此文件定义了所有主题的配置
 3 | 
 4 | interface Theme {
 5 |   id: string;
 6 |   name: string;
 7 |   background: string;
 8 |   backgroundType: "color" | "image";
 9 |   text: string;
10 |   secondary?: string;
11 | }
12 | 
13 | // 主题列表
14 | export const themes: Theme[] = [
15 |   {
16 |     id: "light",
17 |     name: "Light",
18 |     background: "/templates/light.png",
19 |     backgroundType: "image",
20 |     text: "#000000",
21 |     secondary: "#6a6a6a",
22 |   },
23 |   {
24 |     id: "dark",
25 |     name: "Dark",
26 |     background: "/templates/dark.png",
27 |     backgroundType: "image",
28 |     text: "#ffffff",
29 |     secondary: "#b3b3b3",
30 |   },
31 |   {
32 |     id: "nord",
33 |     name: "Nord",
34 |     background: "/templates/nord.png",
35 |     backgroundType: "image",
36 |     text: "#eceff4",
37 |     secondary: "#d8dee9",
38 |   },
39 |   {
40 |     id: "catppuccin",
41 |     name: "Catppuccin",
42 |     background: "/templates/catppuccin.png",
43 |     backgroundType: "image",
44 |     text: "#cdd6f4",
45 |     secondary: "#bac2de",
46 |   },
47 |   {
48 |     id: "gruvbox",
49 |     name: "Gruvbox",
50 |     background: "/templates/gruvbox.png",
51 |     backgroundType: "image",
52 |     text: "#ebdbb2",
53 |     secondary: "#a89984",
54 |   },
55 |   {
56 |     id: "everforest",
57 |     name: "Everforest",
58 |     background: "/templates/everforest.png",
59 |     backgroundType: "image",
60 |     text: "#d3c6aa",
61 |     secondary: "#9da9a0",
62 |   },
63 |   {
64 |     id: "rosepine",
65 |     name: "Rosé Pine",
66 |     background: "/templates/rosepine.png",
67 |     backgroundType: "image",
68 |     text: "#e0def4",
69 |     secondary: "#908caa",
70 |   },
71 | ];
72 | 
73 | // 获取默认主题
74 | export function getDefaultTheme(): Theme {
75 |   return themes[0];
76 | }
77 | 
78 | // 根据 ID 获取主题
79 | export function getThemeById(id: string): Theme {
80 |   return themes.find((theme) => theme.id === id) || getDefaultTheme();
81 | }
82 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const path = require("path");
 3 | 
 4 | const nextConfig = {
 5 |   webpack: (config) => {
 6 |     config.resolve.alias = {
 7 |       ...config.resolve.alias,
 8 |       "@": path.resolve(__dirname),
 9 |     };
10 |     return config;
11 |   },
12 |   images: {
13 |     remotePatterns: [
14 |       {
15 |         protocol: "http",
16 |         hostname: "p1.music.126.net",
17 |       },
18 |       {
19 |         protocol: "https",
20 |         hostname: "p1.music.126.net",
21 |       },
22 |     ],
23 |     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
24 |     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
25 |     minimumCacheTTL: 60,
26 |     formats: ["image/webp"],
27 |   },
28 |   experimental: {
29 |     serverActions: {
30 |       allowedOrigins: ["*"],
31 |     },
32 |   },
33 |   optimizeFonts: true,
34 |   compress: true,
35 |   poweredByHeader: false,
36 |   reactStrictMode: true,
37 |   swcMinify: true,
38 | };
39 | 
40 | module.exports = nextConfig;
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fancard",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@types/uuid": "^10.0.0",
13 |     "@use-gesture/react": "^10.3.1",
14 |     "axios": "^1.7.9",
15 |     "cheerio": "^1.0.0",
16 |     "next": "15.1.3",
17 |     "react": "^19.0.0",
18 |     "react-dom": "^19.0.0",
19 |     "uuid": "^11.0.3"
20 |   },
21 |   "devDependencies": {
22 |     "@eslint/eslintrc": "^3",
23 |     "@types/node": "^20",
24 |     "@types/react": "^19",
25 |     "@types/react-dom": "^19",
26 |     "autoprefixer": "^10.4.20",
27 |     "eslint": "^9",
28 |     "eslint-config-next": "15.1.3",
29 |     "postcss": "^8.4.49",
30 |     "tailwindcss": "^3.4.17",
31 |     "typescript": "^5"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/cover.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/favicon.ico


--------------------------------------------------------------------------------
/public/phone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/phone.png


--------------------------------------------------------------------------------
/public/poster.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/poster.png


--------------------------------------------------------------------------------
/public/templates/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/templates/background.png


--------------------------------------------------------------------------------
/public/templates/catppuccin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/templates/catppuccin.png


--------------------------------------------------------------------------------
/public/templates/dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/templates/dark.png


--------------------------------------------------------------------------------
/public/templates/everforest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/templates/everforest.png


--------------------------------------------------------------------------------
/public/templates/gruvbox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/templates/gruvbox.png


--------------------------------------------------------------------------------
/public/templates/iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/templates/iphone.png


--------------------------------------------------------------------------------
/public/templates/light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/templates/light.png


--------------------------------------------------------------------------------
/public/templates/nord.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/templates/nord.png


--------------------------------------------------------------------------------
/public/templates/phone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/templates/phone.png


--------------------------------------------------------------------------------
/public/templates/rosepine.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aidaox/MusicCard/a628a8467574060226f6dc49a695de24c32059cf/public/templates/rosepine.png


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       fontFamily: {
12 |         sans: ["var(--font-inter)"],
13 |       },
14 |     },
15 |   },
16 |   plugins: [],
17 | };
18 | 
19 | export default config;
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/types.ts:
--------------------------------------------------------------------------------
 1 | // types.ts
 2 | // 此文件定义了项目中使用的类型
 3 | // 包括：
 4 | // 1. 音乐信息类型
 5 | // 2. 海报模板类型
 6 | // 3. 海报元素类型
 7 | // 4. 音乐平台类型
 8 | 
 9 | // 元素类型枚举
10 | export enum ElementType {
11 |   IMAGE = "image",
12 |   TEXT = "text",
13 |   PROGRESS = "progress",
14 |   CONTROLS = "controls",
15 |   WAVEFORM = "waveform",
16 |   LYRICS = "lyrics",
17 | }
18 | 
19 | // 音乐平台枚举
20 | export enum MusicPlatform {
21 |   NETEASE = "netease",
22 |   QQ = "qq",
23 |   SPOTIFY = "spotify",
24 |   KUGOU = "kugou",
25 |   KUWO = "kuwo",
26 | }
27 | 
28 | // 音乐信息类型
29 | export interface MusicInfo {
30 |   title: string;
31 |   artist: string;
32 |   album: string;
33 |   coverUrl: string;
34 |   lyrics?: string[];
35 |   platform?: MusicPlatform;
36 | }
37 | 
38 | // 海报元素类型
39 | export interface PosterElement {
40 |   id: string;
41 |   type: ElementType;
42 |   x: number;
43 |   y: number;
44 |   width: number;
45 |   height?: number;
46 |   color?: string;
47 |   borderRadius?: string;
48 |   fontSize?: string;
49 |   fontWeight?: string;
50 |   textAlign?: string;
51 |   lineHeight?: number;
52 |   maxLines?: number;
53 |   progress?: number;
54 |   source?: string;
55 | }
56 | 
57 | // 海报模板类型
58 | export interface PosterTemplate {
59 |   id: string;
60 |   name: string;
61 |   width: number;
62 |   height: number;
63 |   background: string;
64 |   elements: PosterElement[];
65 | }
66 | 


--------------------------------------------------------------------------------
/types/index.ts:
--------------------------------------------------------------------------------
  1 | // types/index.ts
  2 | // 此文件定义了项目中使用的所有类型接口和枚举
  3 | // 包括：音乐平台类型、音乐信息接口、海报模板接口、元素类型等
  4 | // 这些类型定义被其他文件引用，确保类型安全
  5 | 
  6 | // 音乐平台类型枚举
  7 | export enum MusicPlatform {
  8 |   NETEASE = "netease", // 网易云音乐
  9 |   QQ = "qq", // QQ音乐
 10 |   KUGOU = "kugou", // 酷狗音乐
 11 |   KUWO = "kuwo", // 酷我音乐
 12 |   SPOTIFY = "spotify",
 13 | }
 14 | 
 15 | // 音乐信息接口
 16 | export interface MusicInfo {
 17 |   platform: MusicPlatform; // 音乐平台
 18 |   id: string;
 19 |   title: string;
 20 |   artist: string;
 21 |   album?: string;
 22 |   coverUrl: string;
 23 |   lyrics?: string;
 24 | }
 25 | 
 26 | // 元素位置
 27 | export interface ElementPosition {
 28 |   x: number;
 29 |   y: number;
 30 |   width: number;
 31 |   height: number;
 32 | }
 33 | 
 34 | // 字体配置
 35 | export interface FontConfig {
 36 |   title: string;
 37 |   artist: string;
 38 |   album: string;
 39 | }
 40 | 
 41 | // Polaroid 风格配置
 42 | export interface PolaroidStyle {
 43 |   type: "polaroid";
 44 |   coverSize: number;
 45 |   padding: number;
 46 |   bottomSpace: number;
 47 |   font: FontConfig;
 48 | }
 49 | 
 50 | // 海报模板接口
 51 | export interface PosterTemplate {
 52 |   id: string; // 模板ID
 53 |   name: string; // 模板名称
 54 |   background: string; // 背景（颜色或图片URL）
 55 |   width: number; // 宽度
 56 |   height: number; // 高度
 57 |   elements?: Record<string, ElementPosition>;
 58 |   style?: PolaroidStyle;
 59 | }
 60 | 
 61 | // 海报元素类型
 62 | export enum ElementType {
 63 |   IMAGE = "image",
 64 |   TEXT = "text",
 65 |   PROGRESS = "progress",
 66 |   CONTROLS = "controls",
 67 |   WAVEFORM = "waveform",
 68 |   LYRICS = "lyrics",
 69 | }
 70 | 
 71 | // 海报元素接口
 72 | export interface PosterElement {
 73 |   id: string; // 元素ID
 74 |   type: ElementType; // 元素类型
 75 |   x: number | string;
 76 |   y: number | string;
 77 |   width: number | string;
 78 |   height?: number | string;
 79 |   color?: string;
 80 |   fontSize?: string;
 81 |   fontWeight?: string;
 82 |   textAlign?: string;
 83 |   borderRadius?: string;
 84 |   source?: string;
 85 |   text?: string;
 86 |   progress?: number;
 87 |   maxLines?: number;
 88 |   lineHeight?: number;
 89 | }
 90 | 
 91 | // 元素样式接口
 92 | export interface ElementStyle {
 93 |   x: number; // X坐标
 94 |   y: number; // Y坐标
 95 |   width?: number; // 宽度（可选）
 96 |   height?: number; // 高度（可选）
 97 |   fontSize?: number; // 字体大小（可选）
 98 |   fontFamily?: string; // 字体（可选）
 99 |   color?: string; // 颜色（可选）
100 |   textAlign?: CanvasTextAlign; // 文本对齐方式（可选）
101 |   opacity?: number; // 透明度（可选）
102 | }
103 | 
104 | // 主题接口
105 | export interface Theme {
106 |   id: string;
107 |   name: string;
108 |   background: string; // 可以是颜色值或图片路径
109 |   backgroundType: "color" | "image"; // 背景类型
110 |   text: string;
111 |   secondary?: string; // 次要文本颜色
112 | }
113 | 


--------------------------------------------------------------------------------
/types/music.ts:
--------------------------------------------------------------------------------
 1 | // types/music.ts
 2 | // 音乐相关的类型定义
 3 | 
 4 | // 音乐平台
 5 | export enum MusicPlatform {
 6 |   NETEASE = "netease",
 7 |   QQ = "qq",
 8 |   SPOTIFY = "spotify",
 9 | }
10 | 
11 | // 音乐信息
12 | export interface MusicInfo {
13 |   title: string; // 歌曲标题
14 |   artist: string; // 艺术家
15 |   coverUrl: string; // 封面图片URL
16 |   lyrics: string; // 歌词
17 |   duration: number; // 歌曲时长(秒)
18 |   playDuration?: number; // 播放时长(秒)，默认为实际时长的三分之一
19 |   isEditing?: boolean; // 是否处于编辑状态
20 | }
21 | 
22 | // 音乐解析结果接口
23 | export interface MusicParseResult {
24 |   platform: MusicPlatform;
25 |   id: string;
26 | }
27 | 


--------------------------------------------------------------------------------
/types/poster.ts:
--------------------------------------------------------------------------------
 1 | // Poster模板相关的类型定义
 2 | 
 3 | // 主题配置
 4 | export interface PosterTheme {
 5 |   name: string;
 6 |   background: string; // 背景颜色或图片路径
 7 |   backgroundType: "color" | "image"; // 背景类型
 8 |   text: string; // 主要文字颜色
 9 |   secondary: string; // 次要文字颜色
10 | }
11 | 
12 | // 字体配置
13 | export interface PosterFont {
14 |   title: string; // 标题字体
15 |   artist: string; // 艺术家字体
16 |   album: string; // 专辑字体
17 |   lyrics: string; // 歌词字体
18 | }
19 | 
20 | // Poster样式配置
21 | export interface PosterStyle {
22 |   coverSize: number; // 封面尺寸
23 |   padding: number; // 内边距
24 |   bottomSpace: number; // 底部空间
25 |   posterBorder: number; // Poster边框宽度
26 |   posterTop: number; // Poster顶部位置
27 |   titleSpacing: number; // 标题与封面的间距
28 |   artistSpacing: number; // 艺术家与标题的间距
29 |   lyricsSpacing: number; // 歌词与艺术家的间距
30 |   font: PosterFont; // 字体配置
31 | }
32 | 
33 | // 默认主题
34 | export const defaultTheme: PosterTheme = {
35 |   name: "默认主题",
36 |   background: "#191724",
37 |   backgroundType: "color",
38 |   text: "#ffffff",
39 |   secondary: "#a6a6a6",
40 | };
41 | 
42 | // 默认样式
43 | export const defaultStyle: PosterStyle = {
44 |   coverSize: 700, // 更大的封面尺寸
45 |   padding: 80, // 更宽的内边距
46 |   bottomSpace: 300, // 更大的底部空间
47 |   posterBorder: 60, // Poster边框宽度
48 |   posterTop: 200, // Poster顶部位置
49 |   titleSpacing: 120, // 标题与封面的间距
50 |   artistSpacing: 50, // 艺术家与标题的间距
51 |   lyricsSpacing: 80, // 歌词与艺术家的间距
52 |   font: {
53 |     title: "bold 56px 'Helvetica Neue', sans-serif", // 更大的标题字号
54 |     artist: "40px 'Helvetica Neue', sans-serif", // 更大的艺术家字号
55 |     album: "32px 'Helvetica Neue', sans-serif", // 更大的专辑字号
56 |     lyrics: "28px 'Helvetica Neue', sans-serif", // 歌词字号
57 |   },
58 | };
59 | 


--------------------------------------------------------------------------------
/types/spotify.ts:
--------------------------------------------------------------------------------
 1 | // 将文件重命名为poster.ts
 2 | // 修改类型名称,保持内容不变
 3 | export interface PosterConfig {
 4 |   name: string;
 5 |   background: string; // 背景颜色或图片路径
 6 |   backgroundType: "color" | "image"; // 背景类型
 7 |   text: string; // 主要文字颜色
 8 |   secondary: string; // 次要文字颜色
 9 | }
10 | 
11 | // 字体配置
12 | export interface SpotifyFont {
13 |   title: string; // 标题字体
14 |   artist: string; // 艺术家字体
15 |   album: string; // 专辑字体
16 |   lyrics: string; // 歌词字体
17 | }
18 | 
19 | // Polaroid 样式配置
20 | export interface SpotifyStyle {
21 |   coverSize: number; // 封面尺寸
22 |   padding: number; // 内边距
23 |   bottomSpace: number; // 底部空间
24 |   polaroidBorder: number; // Polaroid 边框宽度
25 |   polaroidTop: number; // Polaroid 顶部位置
26 |   titleSpacing: number; // 标题与封面的间距
27 |   artistSpacing: number; // 艺术家与标题的间距
28 |   lyricsSpacing: number; // 歌词与艺术家的间距
29 |   font: SpotifyFont; // 字体配置
30 | }
31 | 
32 | // 默认主题
33 | export const defaultTheme: PosterConfig = {
34 |   name: "默认主题",
35 |   background: "#191724",
36 |   backgroundType: "color",
37 |   text: "#ffffff",
38 |   secondary: "#a6a6a6",
39 | };
40 | 
41 | // 默认样式
42 | export const defaultStyle: SpotifyStyle = {
43 |   coverSize: 700, // 更大的封面尺寸
44 |   padding: 80, // 更宽的内边距
45 |   bottomSpace: 300, // 更大的底部空间
46 |   polaroidBorder: 60, // Polaroid 边框宽度
47 |   polaroidTop: 200, // Polaroid 顶部位置
48 |   titleSpacing: 120, // 标题与封面的间距
49 |   artistSpacing: 30, // 减小艺术家与标题的间距
50 |   lyricsSpacing: 40, // 减小歌词与艺术家的间距
51 |   font: {
52 |     title: "bold 56px 'Helvetica Neue', sans-serif", // 更大的标题字号
53 |     artist: "48px 'Helvetica Neue', sans-serif", // 调整艺术家字号为48px
54 |     album: "32px 'Helvetica Neue', sans-serif", // 更大的专辑字号
55 |     lyrics: "50px 'Helvetica Neue', sans-serif", // 调整歌词字号为50px
56 |   },
57 | };
58 | 


--------------------------------------------------------------------------------
/types/theme.ts:
--------------------------------------------------------------------------------
 1 | // types/theme.ts
 2 | // 主题相关的类型定义
 3 | 
 4 | // 背景类型
 5 | export type BackgroundType = "color" | "image";
 6 | 
 7 | // 主题接口
 8 | export interface Theme {
 9 |   id: string;
10 |   name: string;
11 |   background: string; // 颜色值或图片路径
12 |   backgroundType: BackgroundType;
13 |   text: string;
14 |   secondary?: string; // 次要文本颜色
15 | }
16 | 
17 | // 主题配置接口
18 | export interface ThemeConfig {
19 |   themes: Theme[];
20 |   defaultTheme: Theme;
21 | }
22 | 


--------------------------------------------------------------------------------
/utils/color.ts:
--------------------------------------------------------------------------------
  1 | // utils/color.ts
  2 | // 颜色提取和处理工具函数
  3 | 
  4 | interface RGB {
  5 |   r: number;
  6 |   g: number;
  7 |   b: number;
  8 | }
  9 | 
 10 | interface Lab {
 11 |   l: number;
 12 |   a: number;
 13 |   b: number;
 14 | }
 15 | 
 16 | /**
 17 |  * RGB转Lab颜色空间
 18 |  * Lab颜色空间更接近人眼感知
 19 |  */
 20 | const rgbToLab = (r: number, g: number, b: number): Lab => {
 21 |   // 先转换到XYZ空间
 22 |   let x = r * 0.4124 + g * 0.3576 + b * 0.1805;
 23 |   let y = r * 0.2126 + g * 0.7152 + b * 0.0722;
 24 |   let z = r * 0.0193 + g * 0.1192 + b * 0.9505;
 25 | 
 26 |   // 标准化
 27 |   x = (x / 255) * 100;
 28 |   y = (y / 255) * 100;
 29 |   z = (z / 255) * 100;
 30 | 
 31 |   // XYZ到Lab的转换
 32 |   const f = (t: number) =>
 33 |     t > 0.008856 ? Math.pow(t, 1 / 3) : 7.787 * t + 16 / 116;
 34 | 
 35 |   const l = 116 * f(y / 100) - 16;
 36 |   const a = 500 * (f(x / 95.047) - f(y / 100));
 37 |   const b_val = 200 * (f(y / 100) - f(z / 108.883));
 38 | 
 39 |   return { l, a, b: b_val };
 40 | };
 41 | 
 42 | /**
 43 |  * 计算两个Lab颜色之间的差异
 44 |  * 使用CIEDE2000公式，这是目前最准确的颜色差异计算方法
 45 |  */
 46 | const deltaE = (lab1: Lab, lab2: Lab): number => {
 47 |   const deltaL = lab2.l - lab1.l;
 48 |   const deltaA = lab2.a - lab1.a;
 49 |   const deltaB = lab2.b - lab1.b;
 50 | 
 51 |   // 简化版的deltaE计算
 52 |   return Math.sqrt(deltaL * deltaL + deltaA * deltaA + deltaB * deltaB);
 53 | };
 54 | 
 55 | /**
 56 |  * 从图片中提取主要颜色
 57 |  * @param imageUrl - 图片URL
 58 |  * @returns Promise<RGB[]> - 返回主要颜色数组
 59 |  */
 60 | export const extractColors = async (imageUrl: string): Promise<RGB[]> => {
 61 |   return new Promise((resolve, reject) => {
 62 |     const img = new Image();
 63 |     img.crossOrigin = "anonymous";
 64 | 
 65 |     img.onload = () => {
 66 |       const canvas = document.createElement("canvas");
 67 |       const ctx = canvas.getContext("2d");
 68 |       if (!ctx) {
 69 |         reject(new Error("无法创建canvas上下文"));
 70 |         return;
 71 |       }
 72 | 
 73 |       canvas.width = img.width;
 74 |       canvas.height = img.height;
 75 |       ctx.drawImage(img, 0, 0);
 76 | 
 77 |       const imageData = ctx.getImageData(
 78 |         0,
 79 |         0,
 80 |         canvas.width,
 81 |         canvas.height
 82 |       ).data;
 83 |       const colors: RGB[] = [];
 84 |       const labColors: Lab[] = [];
 85 | 
 86 |       // 采样颜色
 87 |       for (let i = 0; i < imageData.length; i += 4 * 10) {
 88 |         // 每10个像素采样一次
 89 |         const r = imageData[i];
 90 |         const g = imageData[i + 1];
 91 |         const b = imageData[i + 2];
 92 | 
 93 |         // 转换到Lab空间
 94 |         const lab = rgbToLab(r, g, b);
 95 | 
 96 |         // 检查是否是新的主要颜色
 97 |         let isNewColor = true;
 98 |         for (const existingLab of labColors) {
 99 |           if (deltaE(lab, existingLab) < 20) {
100 |             // 颜色差异阈值
101 |             isNewColor = false;
102 |             break;
103 |           }
104 |         }
105 | 
106 |         if (isNewColor && colors.length < 6) {
107 |           colors.push({ r, g, b });
108 |           labColors.push(lab);
109 |         }
110 |       }
111 | 
112 |       // 按亮度排序
113 |       colors.sort((a, b) => {
114 |         const labA = rgbToLab(a.r, a.g, a.b);
115 |         const labB = rgbToLab(b.r, b.g, b.b);
116 |         return labB.l - labA.l; // 按Lab空间的亮度排序
117 |       });
118 | 
119 |       resolve(colors);
120 |     };
121 | 
122 |     img.onerror = () => {
123 |       reject(new Error("图片加载失败"));
124 |     };
125 | 
126 |     img.src = imageUrl;
127 |   });
128 | };
129 | 


--------------------------------------------------------------------------------
/utils/musicParser.ts:
--------------------------------------------------------------------------------
  1 | import { MusicInfo, MusicPlatform } from "@/types/music";
  2 | 
  3 | // 音乐相关的优美句子（当没有歌词时使用）
  4 | const MUSIC_QUOTES = [
  5 |   "音乐是流动的建筑，是时光的低语",
  6 |   "旋律是心灵的共鸣，节奏是生命的脉动",
  7 |   "在音符的海洋里，找寻内心的平静",
  8 |   "让音乐带我们去往心灵的远方",
  9 | ];
 10 | 
 11 | // 从文本中提取URL的函数
 12 | function extractUrl(text: string): string | null {
 13 |   // 匹配http或https开头的URL
 14 |   const urlMatch = text.match(/https?:\/\/[^\s)]+/);
 15 |   return urlMatch ? urlMatch[0] : null;
 16 | }
 17 | 
 18 | /**
 19 |  * 解析音乐链接
 20 |  * @param url 音乐链接
 21 |  * @returns 音乐ID
 22 |  */
 23 | export async function parseMusicUrl(url: string): Promise<{
 24 |   platform: MusicPlatform;
 25 |   id: string;
 26 | }> {
 27 |   // 从文本中提取URL
 28 |   const extractedUrl = extractUrl(url);
 29 |   if (!extractedUrl) {
 30 |     throw new Error("未找到有效的音乐链接");
 31 |   }
 32 |   url = extractedUrl;
 33 | 
 34 |   // 处理网易云音乐短链接
 35 |   if (url.includes("163cn.tv")) {
 36 |     try {
 37 |       // 使用我们的API来解析短链接
 38 |       const response = await fetch(
 39 |         `/api/resolve-url?url=${encodeURIComponent(url)}`
 40 |       );
 41 |       if (!response.ok) {
 42 |         throw new Error("解析短链接失败");
 43 |       }
 44 |       const data = await response.json();
 45 |       url = data.url;
 46 |     } catch (error) {
 47 |       console.error("解析短链接失败:", error);
 48 |       throw new Error("无法解析分享链接，请使用完整链接");
 49 |     }
 50 |   }
 51 | 
 52 |   // 网易云音乐 - 完整链接
 53 |   const neteaseMusicMatch = url.match(/music\.163\.com.*[?&]id=(\d+)/);
 54 |   if (neteaseMusicMatch) {
 55 |     return {
 56 |       platform: MusicPlatform.NETEASE,
 57 |       id: neteaseMusicMatch[1],
 58 |     };
 59 |   }
 60 | 
 61 |   // 网易云音乐 - 移动端分享
 62 |   const neteaseMobileMatch = url.match(
 63 |     /^https?:\/\/y\.music\.163\.com\/m\/song\?id=(\d+)/
 64 |   );
 65 |   if (neteaseMobileMatch) {
 66 |     return {
 67 |       platform: MusicPlatform.NETEASE,
 68 |       id: neteaseMobileMatch[1],
 69 |     };
 70 |   }
 71 | 
 72 |   // 网易云音乐 - 移动端短链接重定向后的格式
 73 |   const neteaseMobileRedirectMatch = url.match(
 74 |     /^https?:\/\/music\.163\.com\/song\/mobile\/\?id=(\d+)/
 75 |   );
 76 |   if (neteaseMobileRedirectMatch) {
 77 |     return {
 78 |       platform: MusicPlatform.NETEASE,
 79 |       id: neteaseMobileRedirectMatch[1],
 80 |     };
 81 |   }
 82 | 
 83 |   throw new Error("不支持的音乐平台或链接格式不正确");
 84 | }
 85 | 
 86 | /**
 87 |  * 从API获取音乐信息
 88 |  * @param platform 音乐平台
 89 |  * @param id 音乐ID
 90 |  */
 91 | export const fetchMusicInfo = async (
 92 |   platform: MusicPlatform,
 93 |   id: string
 94 | ): Promise<MusicInfo> => {
 95 |   switch (platform) {
 96 |     case MusicPlatform.NETEASE: {
 97 |       // 调用网易云音乐API
 98 |       const params = new URLSearchParams({
 99 |         platform: MusicPlatform.NETEASE,
100 |         id: id,
101 |       });
102 |       const response = await fetch(`/api/music?${params.toString()}`);
103 |       if (!response.ok) {
104 |         const error = await response.json();
105 |         throw new Error(error.error || "获取音乐信息失败");
106 |       }
107 |       return response.json();
108 |     }
109 | 
110 |     // 其他平台暂时返回测试数据
111 |     default:
112 |       return {
113 |         title: "歌名",
114 |         artist: "歌手",
115 |         coverUrl: "/templates/demo-cover.jpg",
116 |         lyrics: MUSIC_QUOTES.join("\n"),
117 |         duration: 180,
118 |       };
119 |   }
120 | };
121 | 
122 | /**
123 |  * 处理歌词
124 |  * @param lyrics 完整歌词
125 |  * @param lineCount 需要返回的歌词行数，默认为5
126 |  * @returns 处理后的歌词
127 |  */
128 | export const processLyrics = (
129 |   lyrics: string | null,
130 |   lineCount: number = 5
131 | ): string => {
132 |   if (!lyrics) {
133 |     // 如果没有歌词，返回音乐相关的优美句子
134 |     return MUSIC_QUOTES.slice(0, lineCount).join("\n");
135 |   }
136 | 
137 |   // 移除时间标记并过滤空行
138 |   const lines = lyrics
139 |     .split("\n")
140 |     .map((line) => line.replace(/\[\d{2}:\d{2}\.\d{2,3}\]/g, "").trim())
141 |     .filter((line) => line && !line.includes("作词") && !line.includes("作曲"));
142 | 
143 |   if (lines.length <= lineCount) {
144 |     return lines.join("\n");
145 |   }
146 | 
147 |   // 从歌词的1/3处开始选择指定行数，这通常是副歌部分
148 |   const startIndex = Math.floor(lines.length / 3);
149 |   return lines.slice(startIndex, startIndex + lineCount).join("\n");
150 | };
151 | 
152 | /**
153 |  * 获取音乐信息
154 |  * @param url 音乐链接
155 |  * @returns 音乐信息
156 |  */
157 | export const getMusicInfo = async (url: string): Promise<MusicInfo> => {
158 |   try {
159 |     // 解析链接
160 |     const { platform, id } = await parseMusicUrl(url);
161 | 
162 |     // 获取音乐信息
163 |     const musicInfo = await fetchMusicInfo(platform, id);
164 | 
165 |     // 处理歌词
166 |     musicInfo.lyrics = processLyrics(musicInfo.lyrics);
167 |     return musicInfo;
168 |   } catch (error) {
169 |     console.error("获取音乐信息失败:", error);
170 |     throw error;
171 |   }
172 | };
173 | 


--------------------------------------------------------------------------------
/utils/phone.ts:
--------------------------------------------------------------------------------
  1 | import { MusicInfo } from "@/types/music";
  2 | import { Theme } from "@/types/theme";
  3 | import { extractColors } from "./color";
  4 | 
  5 | interface ElementConfig {
  6 |   size: number;
  7 |   visible: boolean;
  8 |   x: number;
  9 |   y: number;
 10 | }
 11 | 
 12 | interface RGB {
 13 |   r: number;
 14 |   g: number;
 15 |   b: number;
 16 | }
 17 | 
 18 | // 背景设置接口
 19 | interface BackgroundConfig {
 20 |   imageUrl?: string; // 自定义背景图片URL
 21 |   blur?: number; // 模糊程度 (0-20)
 22 |   opacity?: number; // 不透明度 (0-1)
 23 |   gradient?: {
 24 |     angle: number; // 渐变角度 (0-360)
 25 |     colors: string[]; // 渐变颜色数组
 26 |     stops: number[]; // 渐变位置数组 (0-1)
 27 |   };
 28 | }
 29 | 
 30 | // 处理图片URL，添加代理
 31 | const getProxiedImageUrl = (url: string) => {
 32 |   // 如果是本地图片或data:URL，直接返回
 33 |   if (url.startsWith("/") || url.startsWith("data:")) {
 34 |     return url;
 35 |   }
 36 |   // 否则通过代理加载
 37 |   return `/api/proxy/image?url=${encodeURIComponent(url)}`;
 38 | };
 39 | 
 40 | // 加载图片的辅助函数
 41 | const loadImage = (url: string): Promise<HTMLImageElement> => {
 42 |   return new Promise((resolve, reject) => {
 43 |     const img = new Image();
 44 |     img.crossOrigin = "anonymous";
 45 |     img.onload = () => resolve(img);
 46 |     img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
 47 |     img.src = getProxiedImageUrl(url);
 48 |   });
 49 | };
 50 | 
 51 | // 创建渐变色
 52 | const createGradient = (
 53 |   ctx: CanvasRenderingContext2D,
 54 |   colors: RGB[],
 55 |   width: number,
 56 |   height: number
 57 | ) => {
 58 |   const gradient = ctx.createLinearGradient(0, 0, 0, height);
 59 |   colors.forEach((color, index) => {
 60 |     gradient.addColorStop(
 61 |       index / (colors.length - 1),
 62 |       `rgb(${color.r}, ${color.g}, ${color.b})`
 63 |     );
 64 |   });
 65 |   return gradient;
 66 | };
 67 | 
 68 | // 调整颜色亮度
 69 | const adjustBrightness = (color: RGB, factor: number): RGB => {
 70 |   return {
 71 |     r: Math.min(255, Math.max(0, Math.round(color.r * factor))),
 72 |     g: Math.min(255, Math.max(0, Math.round(color.g * factor))),
 73 |     b: Math.min(255, Math.max(0, Math.round(color.b * factor))),
 74 |   };
 75 | };
 76 | 
 77 | // 辅助函数：截断文本，不添加省略号
 78 | function truncateText(text: string, maxLength: number): string {
 79 |   if (text.length <= maxLength) return text;
 80 |   return text.slice(0, maxLength);
 81 | }
 82 | 
 83 | // 辅助函数：根据最大宽度截断文本，不添加省略号
 84 | function truncateTextByWidth(
 85 |   ctx: CanvasRenderingContext2D,
 86 |   text: string,
 87 |   maxWidth: number
 88 | ): string {
 89 |   const metrics = ctx.measureText(text);
 90 |   if (metrics.width <= maxWidth) return text;
 91 | 
 92 |   let left = 0;
 93 |   let right = text.length;
 94 |   let result = text;
 95 | 
 96 |   // 二分查找合适的长度
 97 |   while (left <= right) {
 98 |     const mid = Math.floor((left + right) / 2);
 99 |     const truncated = text.slice(0, mid);
100 |     const width = ctx.measureText(truncated).width;
101 | 
102 |     if (width <= maxWidth) {
103 |       result = truncated;
104 |       left = mid + 1;
105 |     } else {
106 |       right = mid - 1;
107 |     }
108 |   }
109 | 
110 |   return result;
111 | }
112 | 
113 | // 确保颜色足够暗
114 | const ensureDarkColor = (color: RGB): RGB => {
115 |   // 计算颜色的亮度 (0-255)
116 |   const brightness = (color.r * 299 + color.g * 587 + color.b * 114) / 1000;
117 | 
118 |   // 如果亮度超过阈值（128），将颜色调暗
119 |   if (brightness > 128) {
120 |     const darkFactor = 128 / brightness; // 使亮度降至128
121 |     return {
122 |       r: Math.round(color.r * darkFactor),
123 |       g: Math.round(color.g * darkFactor),
124 |       b: Math.round(color.b * darkFactor),
125 |     };
126 |   }
127 |   return color;
128 | };
129 | 
130 | // 创建更暗的渐变色
131 | const createDarkGradient = (color: RGB): RGB => {
132 |   // 将颜色调整到更暗的版本（原始亮度的10%）
133 |   return {
134 |     r: Math.round(color.r * 0.1),
135 |     g: Math.round(color.g * 0.1),
136 |     b: Math.round(color.b * 0.1),
137 |   };
138 | };
139 | 
140 | // 应用背景模糊效果
141 | const applyBackgroundBlur = (
142 |   ctx: CanvasRenderingContext2D,
143 |   x: number,
144 |   y: number,
145 |   width: number,
146 |   height: number,
147 |   blur: number
148 | ) => {
149 |   ctx.filter = `blur(${blur}px)`;
150 |   ctx.drawImage(ctx.canvas, x, y, width, height);
151 |   ctx.filter = "none";
152 | };
153 | 
154 | // 创建背景渐变
155 | const createBackgroundGradient = (
156 |   ctx: CanvasRenderingContext2D,
157 |   width: number,
158 |   height: number,
159 |   angle: number,
160 |   colors: string[],
161 |   stops: number[]
162 | ) => {
163 |   const radians = (angle * Math.PI) / 180;
164 |   const x = Math.cos(radians);
165 |   const y = Math.sin(radians);
166 |   const gradient = ctx.createLinearGradient(
167 |     width / 2 - x * width,
168 |     height / 2 - y * height,
169 |     width / 2 + x * width,
170 |     height / 2 + y * height
171 |   );
172 | 
173 |   colors.forEach((color, index) => {
174 |     gradient.addColorStop(stops[index], color);
175 |   });
176 | 
177 |   return gradient;
178 | };
179 | 
180 | export const generatePhonePoster = async (
181 |   canvas: HTMLCanvasElement,
182 |   musicInfo: MusicInfo,
183 |   theme: Theme,
184 |   config: {
185 |     cover: ElementConfig;
186 |     title: ElementConfig;
187 |     artist: ElementConfig;
188 |     lyrics: ElementConfig;
189 |     duration: ElementConfig;
190 |   },
191 |   useGradient: boolean = false,
192 |   backgroundConfig?: BackgroundConfig
193 | ) => {
194 |   const ctx = canvas.getContext("2d");
195 |   if (!ctx) return;
196 | 
197 |   try {
198 |     // 清空画布
199 |     ctx.clearRect(0, 0, canvas.width, canvas.height);
200 | 
201 |     // 预加载所有需要的图片
202 |     const imagePromises: Promise<HTMLImageElement>[] = [];
203 |     const images: { [key: string]: HTMLImageElement } = {};
204 | 
205 |     // 加载透明背景图
206 |     imagePromises.push(
207 |       loadImage("/templates/phone.png").then((img) => {
208 |         images.template = img;
209 |         return img;
210 |       })
211 |     );
212 | 
213 |     // 加载封面图片
214 |     if (config.cover.visible && musicInfo.coverUrl) {
215 |       imagePromises.push(
216 |         loadImage(musicInfo.coverUrl).then((img) => {
217 |           images.cover = img;
218 |           return img;
219 |         })
220 |       );
221 |     }
222 | 
223 |     // 加载自定义背景图片
224 |     if (backgroundConfig?.imageUrl) {
225 |       imagePromises.push(
226 |         loadImage(backgroundConfig.imageUrl).then((img) => {
227 |           images.background = img;
228 |           return img;
229 |         })
230 |       );
231 |     }
232 | 
233 |     // 等待所有图片加载完成
234 |     await Promise.all(imagePromises);
235 | 
236 |     // 1. 首先绘制背景
237 |     if (backgroundConfig?.imageUrl && images.background) {
238 |       // 创建临时画布用于背景处理
239 |       const tempCanvas = document.createElement("canvas");
240 |       tempCanvas.width = canvas.width;
241 |       tempCanvas.height = canvas.height;
242 |       const tempCtx = tempCanvas.getContext("2d");
243 | 
244 |       if (tempCtx) {
245 |         // 绘制背景图片并填充整个画布
246 |         const scale = Math.max(
247 |           canvas.width / images.background.width,
248 |           canvas.height / images.background.height
249 |         );
250 |         const scaledWidth = images.background.width * scale;
251 |         const scaledHeight = images.background.height * scale;
252 |         const x = (canvas.width - scaledWidth) / 2;
253 |         const y = (canvas.height - scaledHeight) / 2;
254 | 
255 |         tempCtx.drawImage(images.background, x, y, scaledWidth, scaledHeight);
256 | 
257 |         // 应用模糊效果
258 |         if (backgroundConfig.blur) {
259 |           applyBackgroundBlur(
260 |             tempCtx,
261 |             0,
262 |             0,
263 |             canvas.width,
264 |             canvas.height,
265 |             backgroundConfig.blur
266 |           );
267 |         }
268 | 
269 |         // 设置背景不透明度
270 |         ctx.globalAlpha = backgroundConfig.opacity ?? 1;
271 |         ctx.drawImage(tempCanvas, 0, 0);
272 |         ctx.globalAlpha = 1;
273 | 
274 |         // 应用渐变叠加(仅当useGradient为true时)
275 |         if (useGradient && backgroundConfig.gradient) {
276 |           const gradient = createBackgroundGradient(
277 |             ctx,
278 |             canvas.width,
279 |             canvas.height,
280 |             backgroundConfig.gradient.angle,
281 |             backgroundConfig.gradient.colors,
282 |             backgroundConfig.gradient.stops
283 |           );
284 |           ctx.fillStyle = gradient;
285 |           ctx.fillRect(0, 0, canvas.width, canvas.height);
286 |         }
287 |       }
288 |     } else {
289 |       // 使用默认背景色
290 |       let backgroundColor: string | CanvasGradient = "rgb(20, 20, 20)";
291 |       if (config.cover.visible && musicInfo.coverUrl) {
292 |         try {
293 |           const colors = await extractColors(
294 |             getProxiedImageUrl(musicInfo.coverUrl)
295 |           );
296 |           if (colors.length > 0) {
297 |             const mainColor = ensureDarkColor(colors[0]);
298 | 
299 |             if (useGradient) {
300 |               const darkColor = createDarkGradient(mainColor);
301 |               backgroundColor = createGradient(
302 |                 ctx,
303 |                 [darkColor, mainColor],
304 |                 canvas.width,
305 |                 canvas.height
306 |               );
307 |             } else {
308 |               backgroundColor = `rgb(${mainColor.r}, ${mainColor.g}, ${mainColor.b})`;
309 |             }
310 |           }
311 |         } catch (error) {
312 |           console.error("提取颜色失败:", error);
313 |         }
314 |       }
315 |       ctx.fillStyle = backgroundColor;
316 |       ctx.fillRect(0, 0, canvas.width, canvas.height);
317 |     }
318 | 
319 |     // 2. 绘制封面图片
320 |     if (config.cover.visible && musicInfo.coverUrl && images.cover) {
321 |       const x = config.cover.x * canvas.width;
322 |       const y = config.cover.y * canvas.height;
323 |       const size = config.cover.size;
324 |       const radius = 40; // 圆角半径
325 | 
326 |       // 保存当前状态
327 |       ctx.save();
328 | 
329 |       // 创建圆角矩形路径
330 |       ctx.beginPath();
331 |       ctx.moveTo(x + radius, y);
332 |       ctx.lineTo(x + size - radius, y);
333 |       ctx.quadraticCurveTo(x + size, y, x + size, y + radius);
334 |       ctx.lineTo(x + size, y + size - radius);
335 |       ctx.quadraticCurveTo(x + size, y + size, x + size - radius, y + size);
336 |       ctx.lineTo(x + radius, y + size);
337 |       ctx.quadraticCurveTo(x, y + size, x, y + size - radius);
338 |       ctx.lineTo(x, y + radius);
339 |       ctx.quadraticCurveTo(x, y, x + radius, y);
340 |       ctx.closePath();
341 | 
342 |       // 裁剪
343 |       ctx.clip();
344 | 
345 |       // 绘制图片
346 |       ctx.drawImage(images.cover, x, y, size, size);
347 | 
348 |       // 恢复状态
349 |       ctx.restore();
350 |     }
351 | 
352 |     // 3. 最后绘制手机模板
353 |     if (images.template) {
354 |       ctx.drawImage(images.template, 0, 0, canvas.width, canvas.height);
355 |     }
356 | 
357 |     // 设置文本颜色为#ededed
358 |     ctx.fillStyle = "#ededed";
359 |     ctx.textBaseline = "bottom";
360 |     ctx.textAlign = "left";
361 | 
362 |     // 绘制作者和歌曲名
363 |     if (config.title.visible && (musicInfo.title || musicInfo.artist)) {
364 |       ctx.font = `${config.title.size}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
365 |       const text = `${musicInfo.artist}/${musicInfo.title}`;
366 |       ctx.fillText(
367 |         truncateTextByWidth(ctx, text, canvas.width * 0.8),
368 |         config.title.x * canvas.width,
369 |         config.title.y * canvas.height
370 |       );
371 |     }
372 | 
373 |     // 绘制歌词
374 |     if (config.lyrics.visible && musicInfo.lyrics) {
375 |       ctx.font = `bold ${config.lyrics.size}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
376 |       ctx.fillStyle = "#ffffff"; // 歌词使用白色
377 |       ctx.fillText(
378 |         truncateTextByWidth(ctx, musicInfo.lyrics, canvas.width * 0.8),
379 |         config.lyrics.x * canvas.width,
380 |         config.lyrics.y * canvas.height
381 |       );
382 |     }
383 | 
384 |     // 绘制实际时长
385 |     if (config.duration.visible && musicInfo.duration) {
386 |       ctx.font = `${config.duration.size}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
387 |       ctx.fillStyle = "#ededed"; // 时长使用浅灰色
388 |       ctx.textAlign = "right"; // 时长靠右对齐
389 | 
390 |       // 转换时长为mm:ss格式
391 |       const minutes = Math.floor(musicInfo.duration / 60);
392 |       const seconds = Math.floor(musicInfo.duration % 60);
393 |       const timeText = `${minutes}:${seconds.toString().padStart(2, "0")}`;
394 | 
395 |       ctx.fillText(
396 |         timeText,
397 |         config.duration.x * canvas.width,
398 |         config.duration.y * canvas.height
399 |       );
400 | 
401 |       // 绘制播放时长（左对齐，默认为实际时长的三分之一）
402 |       ctx.textAlign = "left";
403 |       const playDuration =
404 |         musicInfo.playDuration || Math.floor(musicInfo.duration / 3);
405 |       const playMinutes = Math.floor(playDuration / 60);
406 |       const playSeconds = Math.floor(playDuration % 60);
407 |       const playTimeText = `${playMinutes}:${playSeconds
408 |         .toString()
409 |         .padStart(2, "0")}`;
410 | 
411 |       ctx.fillText(
412 |         playTimeText,
413 |         0.1 * canvas.width, // 左边距10%
414 |         config.duration.y * canvas.height
415 |       );
416 |     }
417 |   } catch (error) {
418 |     console.error("生成海报失败:", error);
419 |   }
420 | };
421 | 


--------------------------------------------------------------------------------
/utils/poster.ts:
--------------------------------------------------------------------------------
  1 | import { MusicInfo } from "@/types/music";
  2 | import { Theme } from "@/types/theme";
  3 | import { extractColors } from "./color";
  4 | 
  5 | interface ElementConfig {
  6 |   size: number;
  7 |   visible: boolean;
  8 |   x: number;
  9 |   y: number;
 10 | }
 11 | 
 12 | interface RGB {
 13 |   r: number;
 14 |   g: number;
 15 |   b: number;
 16 | }
 17 | 
 18 | // 处理图片URL，添加代理
 19 | const getProxiedImageUrl = (url: string) => {
 20 |   // 如果是本地图片或data URL，直接返回
 21 |   if (url.startsWith("/") || url.startsWith("data:")) {
 22 |     return url;
 23 |   }
 24 |   // 否则通过代理加载
 25 |   return `/api/proxy/image?url=${encodeURIComponent(url)}`;
 26 | };
 27 | 
 28 | // 加载图片的辅助函数
 29 | const loadImage = (url: string): Promise<HTMLImageElement> => {
 30 |   return new Promise((resolve, reject) => {
 31 |     const img = new Image();
 32 |     img.crossOrigin = "anonymous";
 33 |     img.onload = () => resolve(img);
 34 |     img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
 35 |     img.src = getProxiedImageUrl(url);
 36 |   });
 37 | };
 38 | 
 39 | // 预加载图片缓存
 40 | const imageCache = new Map<string, HTMLImageElement>();
 41 | 
 42 | // 预加载图片
 43 | const preloadImage = async (url: string): Promise<HTMLImageElement> => {
 44 |   if (!url) return Promise.reject(new Error("No URL provided"));
 45 | 
 46 |   // 检查缓存
 47 |   if (imageCache.has(url)) {
 48 |     return imageCache.get(url)!;
 49 |   }
 50 | 
 51 |   try {
 52 |     const img = await loadImage(url);
 53 |     imageCache.set(url, img);
 54 |     return img;
 55 |   } catch (error) {
 56 |     console.error("图片加载失败:", error);
 57 |     throw error;
 58 |   }
 59 | };
 60 | 
 61 | // 创建圆角矩形路径的辅助函数
 62 | const roundedRect = (
 63 |   ctx: CanvasRenderingContext2D,
 64 |   x: number,
 65 |   y: number,
 66 |   width: number,
 67 |   height: number,
 68 |   radius: number
 69 | ) => {
 70 |   ctx.beginPath();
 71 |   ctx.moveTo(x + radius, y);
 72 |   ctx.lineTo(x + width - radius, y);
 73 |   ctx.arc(x + width - radius, y + radius, radius, -Math.PI / 2, 0);
 74 |   ctx.lineTo(x + width, y + height - radius);
 75 |   ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);
 76 |   ctx.lineTo(x + radius, y + height);
 77 |   ctx.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
 78 |   ctx.lineTo(x, y + radius);
 79 |   ctx.arc(x + radius, y + radius, radius, Math.PI, -Math.PI / 2);
 80 |   ctx.closePath();
 81 | };
 82 | 
 83 | // 辅助函数：截断文本，不添加省略号
 84 | function truncateText(text: string, maxLength: number): string {
 85 |   if (text.length <= maxLength) return text;
 86 |   return text.slice(0, maxLength);
 87 | }
 88 | 
 89 | // 辅助函数：根据最大宽度截断文本，不添加省略号
 90 | function truncateTextByWidth(
 91 |   ctx: CanvasRenderingContext2D,
 92 |   text: string,
 93 |   maxWidth: number
 94 | ): string {
 95 |   const metrics = ctx.measureText(text);
 96 |   if (metrics.width <= maxWidth) return text;
 97 | 
 98 |   let left = 0;
 99 |   let right = text.length;
100 |   let result = text;
101 | 
102 |   // 二分查找合适的长度
103 |   while (left <= right) {
104 |     const mid = Math.floor((left + right) / 2);
105 |     const truncated = text.slice(0, mid);
106 |     const width = ctx.measureText(truncated).width;
107 | 
108 |     if (width <= maxWidth) {
109 |       result = truncated;
110 |       left = mid + 1;
111 |     } else {
112 |       right = mid - 1;
113 |     }
114 |   }
115 | 
116 |   return result;
117 | }
118 | 
119 | // 优化的颜色提取函数
120 | const optimizedExtractColors = async (url: string): Promise<RGB[]> => {
121 |   const cacheKey = `colors_${url}`;
122 |   const cached = sessionStorage.getItem(cacheKey);
123 |   if (cached) {
124 |     return JSON.parse(cached);
125 |   }
126 | 
127 |   const colors = await extractColors(url);
128 |   sessionStorage.setItem(cacheKey, JSON.stringify(colors));
129 |   return colors;
130 | };
131 | 
132 | // 优化的Canvas绘制函数
133 | export const generatePosterImage = async (
134 |   canvas: HTMLCanvasElement,
135 |   musicInfo: MusicInfo,
136 |   theme: Theme,
137 |   config: {
138 |     cover: ElementConfig;
139 |     title: ElementConfig;
140 |     artist: ElementConfig;
141 |     lyrics: ElementConfig;
142 |     duration: ElementConfig;
143 |   }
144 | ) => {
145 |   const ctx = canvas.getContext("2d", { alpha: false });
146 |   if (!ctx) return;
147 | 
148 |   try {
149 |     // 使用普通Canvas作为缓冲区
150 |     const bufferCanvas = document.createElement("canvas");
151 |     bufferCanvas.width = canvas.width;
152 |     bufferCanvas.height = canvas.height;
153 |     const bufferCtx = bufferCanvas.getContext("2d", { alpha: false });
154 |     if (!bufferCtx) return;
155 | 
156 |     // 清空画布
157 |     bufferCtx.clearRect(0, 0, canvas.width, canvas.height);
158 | 
159 |     // 预加载所有需要的图片
160 |     const imagePromises: Promise<HTMLImageElement>[] = [];
161 | 
162 |     if (theme.backgroundType === "image") {
163 |       imagePromises.push(preloadImage(theme.background));
164 |     }
165 | 
166 |     if (config.cover.visible && musicInfo.coverUrl) {
167 |       imagePromises.push(preloadImage(musicInfo.coverUrl));
168 |     }
169 | 
170 |     // 等待所有图片加载完成
171 |     const loadedImages = await Promise.all(imagePromises);
172 |     let imageIndex = 0;
173 | 
174 |     // 绘制背景
175 |     if (theme.backgroundType === "color") {
176 |       bufferCtx.fillStyle = theme.background;
177 |       bufferCtx.fillRect(0, 0, canvas.width, canvas.height);
178 |     } else {
179 |       const bgImage = loadedImages[imageIndex++];
180 |       bufferCtx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
181 |     }
182 | 
183 |     // 绘制封面图片
184 |     if (config.cover.visible && musicInfo.coverUrl) {
185 |       const coverImage = loadedImages[imageIndex++];
186 |       const x = config.cover.x * canvas.width;
187 |       const y = config.cover.y * canvas.height;
188 |       const size = config.cover.size;
189 |       const radius = Math.min(size * 0.1, 60);
190 | 
191 |       // 使用路径裁剪来优化圆角绘制
192 |       bufferCtx.save();
193 |       roundedRect(bufferCtx, x, y, size, size, radius);
194 |       bufferCtx.clip();
195 |       bufferCtx.drawImage(coverImage, x, y, size, size);
196 |       bufferCtx.restore();
197 | 
198 |       // 提取颜色（使用缓存版本）
199 |       try {
200 |         const colors = await optimizedExtractColors(
201 |           getProxiedImageUrl(musicInfo.coverUrl)
202 |         );
203 | 
204 |         // 绘制颜色块
205 |         const paletteStartX = 60;
206 |         const paletteY = 1120;
207 |         const boxWidth = (canvas.width - 120) / 6;
208 |         const boxHeight = 44;
209 | 
210 |         colors.forEach((color, index) => {
211 |           const x = paletteStartX + boxWidth * index;
212 |           bufferCtx.fillStyle = `rgb(${color.r}, ${color.g}, ${color.b})`;
213 |           bufferCtx.fillRect(x, paletteY, boxWidth, boxHeight);
214 |         });
215 |       } catch (error) {
216 |         console.error("提取颜色失败:", error);
217 |       }
218 |     }
219 | 
220 |     // 设置文本渲染优化
221 |     bufferCtx.imageSmoothingEnabled = true;
222 |     bufferCtx.imageSmoothingQuality = "high";
223 | 
224 |     // 设置文本样式
225 |     bufferCtx.fillStyle = theme.text;
226 |     bufferCtx.textBaseline = "top";
227 | 
228 |     // 绘制标题（限制15个汉字）
229 |     if (config.title.visible && musicInfo.title) {
230 |       bufferCtx.textBaseline = "bottom";
231 |       bufferCtx.font = `bold ${config.title.size}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
232 |       const truncatedTitle = truncateText(musicInfo.title, 15);
233 |       bufferCtx.fillText(
234 |         truncatedTitle,
235 |         config.title.x * canvas.width,
236 |         config.title.y * canvas.height
237 |       );
238 |     }
239 | 
240 |     // 绘制艺术家（限制15个汉字）
241 |     if (config.artist.visible && musicInfo.artist) {
242 |       bufferCtx.textBaseline = "top";
243 |       bufferCtx.font = `${config.artist.size}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
244 |       const truncatedArtist = truncateText(musicInfo.artist, 20);
245 |       bufferCtx.fillText(
246 |         truncatedArtist,
247 |         config.artist.x * canvas.width,
248 |         config.artist.y * canvas.height
249 |       );
250 |     }
251 | 
252 |     // 绘制歌词（限制宽度，距离右边缘60px）
253 |     if (config.lyrics.visible && musicInfo.lyrics) {
254 |       console.log("绘制歌词时的原始数据:", musicInfo.lyrics);
255 |       bufferCtx.textBaseline = "top";
256 |       bufferCtx.font = `${config.lyrics.size}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
257 |       const maxWidth = canvas.width - config.lyrics.x * canvas.width - 60;
258 | 
259 |       // 按原有段落分割歌词
260 |       const paragraphs = musicInfo.lyrics.split("\n");
261 |       console.log("分割后的歌词段落:", paragraphs);
262 | 
263 |       // 对每个段落进行宽度限制处理
264 |       const lines: string[] = [];
265 |       paragraphs.forEach((paragraph) => {
266 |         const truncatedLine = truncateTextByWidth(
267 |           bufferCtx,
268 |           paragraph,
269 |           maxWidth
270 |         );
271 |         lines.push(truncatedLine);
272 |       });
273 |       console.log("处理后的歌词行:", lines);
274 | 
275 |       // 设置行高为字体大小的1.2倍
276 |       const lineHeight = config.lyrics.size * 1.2;
277 | 
278 |       // 逐行绘制歌词文本
279 |       lines.forEach((line, index) => {
280 |         bufferCtx.fillText(
281 |           line,
282 |           config.lyrics.x * canvas.width,
283 |           config.lyrics.y * canvas.height + index * lineHeight
284 |         );
285 |       });
286 |     }
287 | 
288 |     // 绘制时长
289 |     if (config.duration.visible && musicInfo.duration) {
290 |       bufferCtx.textBaseline = "bottom";
291 |       bufferCtx.font = `${config.duration.size}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
292 |       const minutes = Math.floor(musicInfo.duration / 60);
293 |       const seconds = musicInfo.duration % 60;
294 |       const timeStr = `${minutes}:${seconds.toString().padStart(2, "0")}`;
295 |       const x = config.duration.x * canvas.width;
296 |       const y = config.duration.y * canvas.height;
297 | 
298 |       // 计算文本宽度以实现右对齐
299 |       const textWidth = bufferCtx.measureText(timeStr).width;
300 |       bufferCtx.fillText(timeStr, x - textWidth, y);
301 |     }
302 | 
303 |     // 将缓冲区Canvas内容复制到主Canvas
304 |     ctx.drawImage(bufferCanvas, 0, 0);
305 |   } catch (error) {
306 |     console.error("生成海报失败:", error);
307 |     throw error;
308 |   }
309 | };
310 | 


--------------------------------------------------------------------------------
/utils/posterGenerator.ts:
--------------------------------------------------------------------------------
 1 | import { MusicInfo } from "@/types";
 2 | 
 3 | interface Theme {
 4 |   id: string;
 5 |   name: string;
 6 |   background: string;
 7 |   text: string;
 8 | }
 9 | 
10 | export function generatePoster(
11 |   canvas: HTMLCanvasElement,
12 |   musicInfo: MusicInfo,
13 |   theme: Theme
14 | ) {
15 |   const ctx = canvas.getContext("2d");
16 |   if (!ctx) return;
17 | 
18 |   // 清空画布
19 |   ctx.clearRect(0, 0, canvas.width, canvas.height);
20 | 
21 |   // 绘制背景
22 |   ctx.fillStyle = theme.background;
23 |   ctx.fillRect(0, 0, canvas.width, canvas.height);
24 | 
25 |   // 加载封面图片
26 |   const img = new Image();
27 |   img.crossOrigin = "anonymous";
28 |   img.src = musicInfo.coverUrl;
29 | 
30 |   img.onload = () => {
31 |     // 计算 Polaroid 尺寸
32 |     const polaroidWidth = canvas.width * 0.8;
33 |     const polaroidHeight = polaroidWidth * 1.2;
34 |     const polaroidX = (canvas.width - polaroidWidth) / 2;
35 |     const polaroidY = (canvas.height - polaroidHeight) / 2;
36 | 
37 |     // 绘制 Polaroid 边框
38 |     ctx.fillStyle = "#ffffff";
39 |     ctx.shadowColor = "rgba(0, 0, 0, 0.2)";
40 |     ctx.shadowBlur = 20;
41 |     ctx.shadowOffsetX = 0;
42 |     ctx.shadowOffsetY = 10;
43 |     ctx.fillRect(polaroidX, polaroidY, polaroidWidth, polaroidHeight);
44 | 
45 |     // 计算图片尺寸和位置
46 |     const imageWidth = polaroidWidth * 0.9;
47 |     const imageHeight = imageWidth;
48 |     const imageX = polaroidX + (polaroidWidth - imageWidth) / 2;
49 |     const imageY = polaroidY + (polaroidWidth - imageWidth) / 2;
50 | 
51 |     // 绘制图片
52 |     ctx.shadowColor = "transparent";
53 |     ctx.drawImage(img, imageX, imageY, imageWidth, imageHeight);
54 | 
55 |     // 绘制文本
56 |     const textY = imageY + imageHeight + 40;
57 |     ctx.fillStyle = theme.text;
58 |     ctx.textAlign = "center";
59 |     ctx.textBaseline = "top";
60 | 
61 |     // 绘制标题
62 |     ctx.font = "bold 24px Arial";
63 |     ctx.fillText(musicInfo.title, canvas.width / 2, textY);
64 | 
65 |     // 绘制艺术家
66 |     ctx.font = "18px Arial";
67 |     ctx.fillText(musicInfo.artist, canvas.width / 2, textY + 30);
68 | 
69 |     // 绘制专辑
70 |     if (musicInfo.album) {
71 |       ctx.font = "16px Arial";
72 |       ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
73 |       ctx.fillText(musicInfo.album, canvas.width / 2, textY + 60);
74 |     }
75 |   };
76 | 
77 |   img.onerror = () => {
78 |     console.error("封面图片加载失败");
79 |     // 绘制占位图
80 |     ctx.fillStyle = "#f3f4f6";
81 |     ctx.fillRect(
82 |       canvas.width * 0.2,
83 |       canvas.height * 0.2,
84 |       canvas.width * 0.6,
85 |       canvas.width * 0.6
86 |     );
87 |   };
88 | }
89 | 


--------------------------------------------------------------------------------
/utils/retry.ts:
--------------------------------------------------------------------------------
 1 | // 定义重试选项接口
 2 | interface RetryOptions {
 3 |   maxAttempts?: number; // 最大重试次数
 4 |   initialDelay?: number; // 初始延迟时间(毫秒)
 5 |   maxDelay?: number; // 最大延迟时间(毫秒)
 6 |   backoff?: number; // 退避系数
 7 | }
 8 | 
 9 | /**
10 |  * 通用的异步函数重试工具
11 |  * @param fn 需要重试的异步函数
12 |  * @param options 重试选项
13 |  * @returns Promise<T> 函数执行结果
14 |  */
15 | export async function retry<T>(
16 |   fn: () => Promise<T>,
17 |   options: RetryOptions = {}
18 | ): Promise<T> {
19 |   // 设置默认选项
20 |   const {
21 |     maxAttempts = 3, // 默认最多重试3次
22 |     initialDelay = 1000, // 默认初始延迟1秒
23 |     maxDelay = 10000, // 默认最大延迟10秒
24 |     backoff = 2, // 默认退避系数为2
25 |   } = options;
26 | 
27 |   let lastError: Error | null = null;
28 |   let delay = initialDelay;
29 | 
30 |   // 尝试执行指定次数
31 |   for (let attempt = 1; attempt <= maxAttempts; attempt++) {
32 |     try {
33 |       return await fn();
34 |     } catch (error) {
35 |       lastError = error as Error;
36 | 
37 |       // 如果是最后一次尝试，则抛出错误
38 |       if (attempt === maxAttempts) {
39 |         throw new Error(`重试${maxAttempts}次后失败: ${lastError.message}`);
40 |       }
41 | 
42 |       // 计算下一次延迟时间（指数退避）
43 |       delay = Math.min(delay * backoff, maxDelay);
44 | 
45 |       // 等待延迟时间后继续重试
46 |       await new Promise((resolve) => setTimeout(resolve, delay));
47 |     }
48 |   }
49 | 
50 |   // 这行代码理论上永远不会执行，但TypeScript需要它
51 |   throw lastError;
52 | }
53 | 


--------------------------------------------------------------------------------
/utils/spotify.ts:
--------------------------------------------------------------------------------
  1 | import { MusicInfo } from "@/types/music";
  2 | import { Theme } from "@/types/theme";
  3 | import { extractColors } from "./color";
  4 | 
  5 | interface ElementConfig {
  6 |   size: number;
  7 |   visible: boolean;
  8 |   x: number;
  9 |   y: number;
 10 | }
 11 | 
 12 | interface RGB {
 13 |   r: number;
 14 |   g: number;
 15 |   b: number;
 16 | }
 17 | 
 18 | // 处理图片URL，添加代理
 19 | const getProxiedImageUrl = (url: string) => {
 20 |   // 如果是本地图片，直接返回
 21 |   if (url.startsWith("/")) {
 22 |     return url;
 23 |   }
 24 |   // 对于网易云音乐图片，使用特定参数优化加载
 25 |   if (url.includes("music.126.net")) {
 26 |     // 添加参数param=140y140表示使用更小的尺寸
 27 |     const optimizedUrl = url.includes("?")
 28 |       ? `${url}&param=140y140`
 29 |       : `${url}?param=140y140`;
 30 |     return `/api/proxy/image?url=${encodeURIComponent(optimizedUrl)}`;
 31 |   }
 32 |   // 否则通过代理加载
 33 |   return `/api/proxy/image?url=${encodeURIComponent(url)}`;
 34 | };
 35 | 
 36 | // 加载图片的辅助函数
 37 | const loadImage = (url: string): Promise<HTMLImageElement> => {
 38 |   return new Promise((resolve, reject) => {
 39 |     const img = new Image();
 40 |     img.crossOrigin = "anonymous";
 41 |     img.onload = () => resolve(img);
 42 |     img.onerror = (e) => {
 43 |       console.error(`图片加载失败: ${url}`, e);
 44 |       reject(new Error(`Failed to load image: ${url}`));
 45 |     };
 46 | 
 47 |     // 设置超时，避免长时间等待
 48 |     const timeout = setTimeout(() => {
 49 |       reject(new Error(`Image loading timeout: ${url}`));
 50 |     }, 10000);
 51 | 
 52 |     img.src = getProxiedImageUrl(url);
 53 | 
 54 |     // 清除超时
 55 |     img.onload = () => {
 56 |       clearTimeout(timeout);
 57 |       resolve(img);
 58 |     };
 59 |   });
 60 | };
 61 | 
 62 | // 预加载图片缓存
 63 | const imageCache = new Map<string, HTMLImageElement>();
 64 | 
 65 | // 预加载图片
 66 | const preloadImage = async (url: string): Promise<HTMLImageElement> => {
 67 |   if (!url) return Promise.reject(new Error("No URL provided"));
 68 | 
 69 |   // 检查缓存
 70 |   if (imageCache.has(url)) {
 71 |     return imageCache.get(url)!;
 72 |   }
 73 | 
 74 |   try {
 75 |     const img = await loadImage(url);
 76 |     imageCache.set(url, img);
 77 |     return img;
 78 |   } catch (error) {
 79 |     console.error("图片加载失败:", error);
 80 |     // 如果是第一次失败，重试一次
 81 |     if (!url.includes("_retry")) {
 82 |       console.log("重试加载图片:", url);
 83 |       try {
 84 |         const retryUrl = url + "_retry";
 85 |         const img = await loadImage(url);
 86 |         imageCache.set(url, img); // 使用原始URL缓存
 87 |         return img;
 88 |       } catch (retryError) {
 89 |         console.error("图片重试加载失败:", retryError);
 90 |         throw retryError;
 91 |       }
 92 |     }
 93 |     throw error;
 94 |   }
 95 | };
 96 | 
 97 | // 创建圆角矩形路径的辅助函数
 98 | const roundedRect = (
 99 |   ctx: CanvasRenderingContext2D,
100 |   x: number,
101 |   y: number,
102 |   width: number,
103 |   height: number,
104 |   radius: number
105 | ) => {
106 |   ctx.beginPath();
107 |   ctx.moveTo(x + radius, y);
108 |   ctx.lineTo(x + width - radius, y);
109 |   ctx.arc(x + width - radius, y + radius, radius, -Math.PI / 2, 0);
110 |   ctx.lineTo(x + width, y + height - radius);
111 |   ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);
112 |   ctx.lineTo(x + radius, y + height);
113 |   ctx.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
114 |   ctx.lineTo(x, y + radius);
115 |   ctx.arc(x + radius, y + radius, radius, Math.PI, -Math.PI / 2);
116 |   ctx.closePath();
117 | };
118 | 
119 | // 辅助函数：截断文本，不添加省略号
120 | function truncateText(text: string, maxLength: number): string {
121 |   if (text.length <= maxLength) return text;
122 |   return text.slice(0, maxLength);
123 | }
124 | 
125 | // 辅助函数：根据最大宽度截断文本，不添加省略号
126 | function truncateTextByWidth(
127 |   ctx: CanvasRenderingContext2D,
128 |   text: string,
129 |   maxWidth: number
130 | ): string {
131 |   const metrics = ctx.measureText(text);
132 |   if (metrics.width <= maxWidth) return text;
133 | 
134 |   let left = 0;
135 |   let right = text.length;
136 |   let result = text;
137 | 
138 |   // 二分查找合适的长度
139 |   while (left <= right) {
140 |     const mid = Math.floor((left + right) / 2);
141 |     const truncated = text.slice(0, mid);
142 |     const width = ctx.measureText(truncated).width;
143 | 
144 |     if (width <= maxWidth) {
145 |       result = truncated;
146 |       left = mid + 1;
147 |     } else {
148 |       right = mid - 1;
149 |     }
150 |   }
151 | 
152 |   return result;
153 | }
154 | 
155 | export const generateSpotifyPoster = async (
156 |   canvas: HTMLCanvasElement,
157 |   musicInfo: MusicInfo,
158 |   theme: Theme,
159 |   config: {
160 |     cover: ElementConfig;
161 |     title: ElementConfig;
162 |     artist: ElementConfig;
163 |     lyrics: ElementConfig;
164 |     duration: ElementConfig;
165 |   }
166 | ) => {
167 |   const ctx = canvas.getContext("2d");
168 |   if (!ctx) return;
169 | 
170 |   try {
171 |     // 清空画布
172 |     ctx.clearRect(0, 0, canvas.width, canvas.height);
173 | 
174 |     // 预加载所有需要的图片
175 |     const imagePromises: Promise<HTMLImageElement>[] = [];
176 | 
177 |     if (theme.backgroundType === "image") {
178 |       imagePromises.push(preloadImage(theme.background));
179 |     }
180 | 
181 |     if (config.cover.visible && musicInfo.coverUrl) {
182 |       imagePromises.push(preloadImage(musicInfo.coverUrl));
183 |     }
184 | 
185 |     // 等待所有图片加载完成
186 |     const loadedImages = await Promise.all(imagePromises);
187 |     let imageIndex = 0;
188 | 
189 |     // 绘制背景
190 |     if (theme.backgroundType === "color") {
191 |       ctx.fillStyle = theme.background;
192 |       ctx.fillRect(0, 0, canvas.width, canvas.height);
193 |     } else {
194 |       const bgImage = loadedImages[imageIndex++];
195 |       ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
196 |     }
197 | 
198 |     // 绘制封面图片
199 |     if (config.cover.visible && musicInfo.coverUrl) {
200 |       const coverImage = loadedImages[imageIndex++];
201 |       const x = config.cover.x * canvas.width;
202 |       const y = config.cover.y * canvas.height;
203 |       const size = config.cover.size;
204 |       const radius = Math.min(size * 0.1, 60); // 圆角半径为图片尺寸的 10%，最大 60px
205 | 
206 |       // 保存当前状态
207 |       ctx.save();
208 | 
209 |       // 创建圆角路径
210 |       roundedRect(ctx, x, y, size, size, radius);
211 | 
212 |       // 裁剪
213 |       ctx.clip();
214 | 
215 |       // 绘制图片
216 |       ctx.drawImage(coverImage, x, y, size, size);
217 | 
218 |       // 恢复状态
219 |       ctx.restore();
220 | 
221 |       // 绘制边框
222 |       roundedRect(ctx, x, y, size, size, radius);
223 |       ctx.strokeStyle = "rgba(0, 0, 0, 0.2)";
224 |       ctx.lineWidth = 2;
225 |       ctx.stroke();
226 | 
227 |       // 提取颜色
228 |       try {
229 |         const colors = await extractColors(
230 |           getProxiedImageUrl(musicInfo.coverUrl)
231 |         );
232 | 
233 |         // 绘制颜色块
234 |         const paletteStartX = 60;
235 |         const paletteY = 1120;
236 |         const boxWidth = (canvas.width - 120) / 6;
237 |         const boxHeight = 44;
238 | 
239 |         colors.forEach((color, index) => {
240 |           const x = paletteStartX + boxWidth * index;
241 |           ctx.fillStyle = `rgb(${color.r}, ${color.g}, ${color.b})`;
242 |           ctx.fillRect(x, paletteY, boxWidth, boxHeight);
243 |         });
244 |       } catch (error) {
245 |         console.error("提取颜色失败:", error);
246 |       }
247 |     }
248 | 
249 |     // 设置文本样式
250 |     ctx.fillStyle = theme.text;
251 | 
252 |     // 绘制标题
253 |     if (config.title.visible && musicInfo.title) {
254 |       ctx.textBaseline = "bottom";
255 |       ctx.font = `bold ${config.title.size}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
256 |       const x = config.title.x * canvas.width;
257 |       const y = config.title.y * canvas.height;
258 |       const maxWidth = canvas.width - x - 60;
259 |       const text = truncateTextByWidth(ctx, musicInfo.title, maxWidth);
260 |       ctx.fillText(text, x, y);
261 |     }
262 | 
263 |     // 绘制艺术家
264 |     if (config.artist.visible && musicInfo.artist) {
265 |       ctx.textBaseline = "top";
266 |       ctx.font = `${config.artist.size}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
267 |       const x = config.artist.x * canvas.width;
268 |       const y = config.artist.y * canvas.height;
269 |       const maxWidth = canvas.width - x - 60;
270 |       const text = truncateTextByWidth(ctx, musicInfo.artist, maxWidth);
271 |       ctx.fillText(text, x, y);
272 |     }
273 | 
274 |     // 绘制歌词
275 |     if (config.lyrics.visible && musicInfo.lyrics) {
276 |       ctx.textBaseline = "top";
277 |       ctx.font = `${config.lyrics.size}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
278 |       const x = config.lyrics.x * canvas.width;
279 |       const y = config.lyrics.y * canvas.height;
280 |       const maxWidth = canvas.width - x - 60;
281 | 
282 |       // 按原有段落分割歌词
283 |       const paragraphs = musicInfo.lyrics.split("\n");
284 | 
285 |       // 设置行高为字体大小的1.5倍
286 |       const lineHeight = config.lyrics.size * 1.5;
287 | 
288 |       // 逐行绘制歌词文本
289 |       paragraphs.forEach((paragraph, index) => {
290 |         if (paragraph.trim()) {
291 |           // 只处理非空行
292 |           const truncatedLine = truncateTextByWidth(ctx, paragraph, maxWidth);
293 |           ctx.fillText(truncatedLine, x, y + index * lineHeight);
294 |         }
295 |       });
296 |     }
297 | 
298 |     // 绘制时长
299 |     if (config.duration.visible && musicInfo.duration) {
300 |       ctx.textBaseline = "bottom";
301 |       ctx.font = `${config.duration.size}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`;
302 |       const x = config.duration.x * canvas.width;
303 |       const y = config.duration.y * canvas.height;
304 |       const minutes = Math.floor(musicInfo.duration / 60);
305 |       const seconds = musicInfo.duration % 60;
306 |       const text = `${minutes}:${seconds.toString().padStart(2, "0")}`;
307 |       const metrics = ctx.measureText(text);
308 |       ctx.fillText(text, x - metrics.width, y);
309 |     }
310 |   } catch (error) {
311 |     console.error("生成海报失败:", error);
312 |     throw error;
313 |   }
314 | };
315 | 


--------------------------------------------------------------------------------