- 🎂
-
- 年龄
-- {{ age }} 岁 -
-项目作品
-一些正在维护或已发布的项目 · Projects
-
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/app/components/SkillsSection.vue b/app/components/SkillsSection.vue
index a06068f..304af0a 100644
--- a/app/components/SkillsSection.vue
+++ b/app/components/SkillsSection.vue
@@ -1,31 +1,39 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/app/components/SocialLinks.vue b/app/components/SocialLinks.vue
index db7427a..5e62080 100644
--- a/app/components/SocialLinks.vue
+++ b/app/components/SocialLinks.vue
@@ -1,77 +1,78 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/app/components/StatsSection.vue b/app/components/StatsSection.vue
index f030ff0..5c4b48a 100644
--- a/app/components/StatsSection.vue
+++ b/app/components/StatsSection.vue
@@ -1,410 +1,434 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/app/components/WakatimeSection.vue b/app/components/WakatimeSection.vue
index 484497e..20b5988 100644
--- a/app/components/WakatimeSection.vue
+++ b/app/components/WakatimeSection.vue
@@ -1,339 +1,345 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/app/config/siteConfig.ts b/app/config/siteConfig.ts
index 5781c64..df4746f 100644
--- a/app/config/siteConfig.ts
+++ b/app/config/siteConfig.ts
@@ -1,168 +1,179 @@
-const siteConfig = {
- profile: {
- name: "RhenCloud",
- title: "I'm RhenCloud.",
- avatar: "/avatar.webp", // public/avatar.webp
- bio: "趁世界还未重启之前 约一次爱恋",
- email: "i@rhen.cloud",
- birthday: "2010-03-28",
- // gender: "女",
- pronouns: "她",
- location: "中国 · 天津",
- },
-
- socialLinks: [
- { name: "GitHub", url: "https://github.com/RhenCloud" },
- { name: "Email", url: "mailto:i@rhen.cloud" },
- { name: "Telegram", url: "https://t.me/RhenCloud" },
- { name: "Bilibili", url: "https://space.bilibili.com/1502883335" },
- { name: "Blog", url: "https://blog.rhen.cloud" },
- ],
-
- github: {
- username: "RhenCloud",
- },
-
- about: [
- { title: "Pro-LGBT", desc: "我相信性别多样性是人们应有的自由和权利。", icon: "🧠" },
- { title: "Developer", desc: "专注后端 / 云原生，热爱自动化与高可用。", icon: "🛠️" },
- { title: "Anime Fan", desc: "二次元爱好者，享受故事与想象力。", icon: "🎬" },
- { title: "Just For Fun", desc: "我喜欢尝试新鲜事物，折腾小众技术", icon: "🎮" },
- ],
-
- siteMeta: {
- title: "RhenCloud",
- url: "https://rhen.cloud",
- icon: "/favicon.svg", // public/favicon.svg
- startDate: "2025-12-06",
- },
-
- appearance: {
- background: {
- enable: true,
- // URL 支持：可使用外部 URL 或本地路径
- // 例如: "https://example.com/bg.jpg" 或 "background.webp"
- image: "background.webp", // 背景图片 URL 或本地路径（桌面端）
- mobileImage: "https://www.loliapi.com/acg/pe/", // 移动端背景图片（可选，不设置则使用 image）
- blur: 0, // 背景模糊程度 (0-100)
- overlay: "rgba(70, 59, 82, 0.4)", // 背景遮罩颜色与透明度
- },
- },
-
- music: {
- enable: true,
- // 浮动模式播放器（推荐）- 用于播放网易云歌单
- mode: "floating", // "floating" 或 "embed"
- // 歌单ID：从网易云音乐链接获取，如 https://music.163.com/#/playlist?id=14273792576
- playlistId: "14366453940", // 例如: "14273792576"
- // 歌曲ID：仅在嵌入模式下使用
- songId: undefined, // 例如: "554242291"
- // 播放器位置（浮动模式）: "bottom-left" | "bottom-right" | "top-left" | "top-right"
- position: "bottom-left",
- // 是否显示歌词
- lyric: true,
- // 主题: "light" | "dark" | "auto"
- theme: "dark",
- // 是否自动播放
- autoplay: false,
- // 是否默认以黑胶唱片状态启动（仅浮动模式）
- defaultMinimized: true,
- // 标签页非激活时是否自动暂停
- autoPause: false,
- // Music API 配置
- apiUrls: ["https://www.bilibili.uno/api", "https://meting-api.wangcy.site/api"],
- },
-
- umami: {
- enable: true,
- url: "https://cloud.umami.is/script.js",
- websiteId: "ddcd51c3-ccc7-45e4-81e6-11567027f69b",
- apiBase: "https://api.umami.is",
- },
-
- wakatime: {
- enable: true,
- apiUrl: "https://wakapi.rhen.cloud/api/v1",
- },
-
- skills: [
- { title: "前端", items: ["css", "html", "javascript", "typescript", "vue"] },
- { title: "后端 / 云", items: ["cpp", "cloudflare", "docker", "java", "mysql", "nodejs", "python", "vercel"] },
- { title: "工具", items: ["ae", "au", "git", "github", "md", "ps", "pr", "vscode"] },
- { title: "操作系统", items: ["arch", "linux", "windows"] },
- ],
-
- sites: [
- {
- name: "个人主页",
- desc: "个人主页",
- url: "https://rhen.cloud",
- },
- {
- name: "我的博客",
- desc: "分享与记录",
- url: "https://blog.rhen.cloud",
- },
- {
- name: "来视奸我",
- desc: "使用Sleepy项目搭建的视奸网站",
- url: "https://sleepy.rhen.cloud",
- },
- {
- name: "网站监控",
- desc: "网站运行状态监控",
- url: "https://status.rhen.cloud",
- },
- ],
-
- projects: [
- { name: "Cloud Home", url: "https://github.com/RhenCloud/cloud-home", desc: "个人主页模板" },
- { name: "ILP", url: "https://github.com/RhenCloud/ILP", desc: "跨平台、多网站、模块化的小说下载器" },
- { name: "ILP-C++", url: "https://github.com/RhenCloud/ILP-Cpp", desc: "跨平台、多网站、模块化的小说下载器" },
- ],
-
- friends: [
- {
- name: "wuxian",
- desc: "wuxian's web",
- url: "https://www.alxian.cn",
- avatar: "https://www.alxian.cn/_next/image?url=%2Fimages%2Favatar.jpg&w=256&q=75",
- },
- {
- name: "鈴奈咲桜のBlog",
- desc: "一个普普通通的Blog",
- url: "https://blog.sakura.ink",
- avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
- },
- ],
-
- comments: {
- enable: true,
- // twikoo: {
- // url: "https://twikoo.rhen.cloud",
- // },
- giscus: {
- repo: "RhenCloud/Cloud-Home",
- repoId: "R_kgDOQjx8rQ",
- category: "Announcements",
- categoryId: "DIC_kwDOQjx8rc4Cz4Qb",
- mapping: "pathname",
- reactionsEnabled: "1",
- emitMetadata: "0",
- inputPosition: "bottom",
- theme: "preferred_color_scheme",
- },
- },
-
- footer: {
- beian: "津ICP备2025039003号-1",
- beianLink: "https://beian.miit.gov.cn/",
- customHtml: '© 2025 RhenCloud',
- hitokoto: {
- enable: true,
- type: "a&b&c&d&j",
- },
- },
-};
-
-export default siteConfig;
+const siteConfig = {
+ profile: {
+ name: "RhenCloud",
+ title: "I'm RhenCloud.",
+ avatar: "/avatar.webp", // public/avatar.webp
+ bio: "趁世界还未重启之前 约一次爱恋",
+ email: "i@rhen.cloud",
+ birthday: "2010-03-28",
+ // gender: "女",
+ pronouns: "她",
+ location: "中国 · 天津",
+ },
+
+ socialLinks: [
+ { name: "GitHub", url: "https://github.com/RhenCloud" },
+ { name: "Email", url: "mailto:i@rhen.cloud" },
+ { name: "Telegram", url: "https://t.me/RhenCloud" },
+ { name: "Bilibili", url: "https://space.bilibili.com/1502883335" },
+ { name: "Blog", url: "https://blog.rhen.cloud" },
+ ],
+
+ github: {
+ username: "RhenCloud",
+ },
+
+ about: [
+ { title: "Pro-LGBT", desc: "我相信性别多样性是人们应有的自由和权利。", icon: "🧠" },
+ { title: "Developer", desc: "专注后端 / 云原生，热爱自动化与高可用。", icon: "🛠️" },
+ { title: "Anime Fan", desc: "二次元爱好者，享受故事与想象力。", icon: "🎬" },
+ { title: "Just For Fun", desc: "我喜欢尝试新鲜事物，折腾小众技术", icon: "🎮" },
+ ],
+
+ siteMeta: {
+ title: "RhenCloud",
+ url: "https://rhen.cloud",
+ icon: "/favicon.svg", // public/favicon.svg
+ startDate: "2025-12-06",
+ },
+
+ appearance: {
+ background: {
+ enable: true,
+ // URL 支持：可使用外部 URL 或本地路径
+ // 例如: "https://example.com/bg.jpg" 或 "background.webp"
+ image: "background.webp", // 背景图片 URL 或本地路径（桌面端）
+ mobileImage: "https://www.loliapi.com/acg/pe/", // 移动端背景图片（可选，不设置则使用 image）
+ blur: 0, // 背景模糊程度 (0-100)
+ overlay: "rgba(70, 59, 82, 0.4)", // 背景遮罩颜色与透明度
+ },
+ },
+
+ music: {
+ enable: true,
+ // 浮动模式播放器（推荐）- 用于播放网易云歌单
+ mode: "floating", // "floating" 或 "embed"
+ // 歌单ID：从网易云音乐链接获取，如 https://music.163.com/#/playlist?id=14273792576
+ playlistId: "14366453940", // 例如: "14273792576"
+ // 歌曲ID：仅在嵌入模式下使用
+ songId: undefined, // 例如: "554242291"
+ // 播放器位置（浮动模式）: "bottom-left" | "bottom-right" | "top-left" | "top-right"
+ position: "bottom-left",
+ // 是否显示歌词
+ lyric: true,
+ // 主题: "light" | "dark" | "auto"
+ theme: "dark",
+ // 是否自动播放
+ autoplay: false,
+ // 是否默认以黑胶唱片状态启动（仅浮动模式）
+ defaultMinimized: true,
+ // 标签页非激活时是否自动暂停
+ autoPause: false,
+ // Music API 配置
+ apiUrls: ["https://www.bilibili.uno/api", "https://meting-api.wangcy.site/api"],
+ },
+
+ umami: {
+ enable: true,
+ url: "https://cloud.umami.is/script.js",
+ websiteId: "ddcd51c3-ccc7-45e4-81e6-11567027f69b",
+ apiBase: "https://api.umami.is",
+ },
+
+ wakatime: {
+ enable: true,
+ apiUrl: "https://wakapi.rhen.cloud/api/v1",
+ },
+
+ skills: [
+ { title: "前端", items: ["css", "html", "javascript", "typescript", "vue"] },
+ {
+ title: "后端 / 云",
+ items: ["cpp", "cloudflare", "docker", "java", "mysql", "nodejs", "python", "vercel"],
+ },
+ { title: "工具", items: ["ae", "au", "git", "github", "md", "ps", "pr", "vscode"] },
+ { title: "操作系统", items: ["arch", "linux", "windows"] },
+ ],
+
+ sites: [
+ {
+ name: "个人主页",
+ desc: "个人主页",
+ url: "https://rhen.cloud",
+ },
+ {
+ name: "我的博客",
+ desc: "分享与记录",
+ url: "https://blog.rhen.cloud",
+ },
+ {
+ name: "来视奸我",
+ desc: "使用Sleepy项目搭建的视奸网站",
+ url: "https://sleepy.rhen.cloud",
+ },
+ {
+ name: "网站监控",
+ desc: "网站运行状态监控",
+ url: "https://status.rhen.cloud",
+ },
+ ],
+
+ projects: [
+ { name: "Cloud Home", url: "https://github.com/RhenCloud/cloud-home", desc: "个人主页模板" },
+ {
+ name: "ILP",
+ url: "https://github.com/RhenCloud/ILP",
+ desc: "跨平台、多网站、模块化的小说下载器",
+ },
+ {
+ name: "ILP-C++",
+ url: "https://github.com/RhenCloud/ILP-Cpp",
+ desc: "跨平台、多网站、模块化的小说下载器",
+ },
+ ],
+
+ friends: [
+ {
+ name: "wuxian",
+ desc: "wuxian's web",
+ url: "https://www.alxian.cn",
+ avatar: "https://www.alxian.cn/_next/image?url=%2Fimages%2Favatar.jpg&w=256&q=75",
+ },
+ {
+ name: "鈴奈咲桜のBlog",
+ desc: "一个普普通通的Blog",
+ url: "https://blog.sakura.ink",
+ avatar: "https://q2.qlogo.cn/headimg_dl?dst_uin=2731443459&spec=5",
+ },
+ ],
+
+ comments: {
+ enable: true,
+ // twikoo: {
+ // url: "https://twikoo.rhen.cloud",
+ // },
+ giscus: {
+ repo: "RhenCloud/Cloud-Home",
+ repoId: "R_kgDOQjx8rQ",
+ category: "Announcements",
+ categoryId: "DIC_kwDOQjx8rc4Cz4Qb",
+ mapping: "pathname",
+ reactionsEnabled: "1",
+ emitMetadata: "0",
+ inputPosition: "bottom",
+ theme: "preferred_color_scheme",
+ },
+ },
+
+ footer: {
+ beian: "津ICP备2025039003号-1",
+ beianLink: "https://beian.miit.gov.cn/",
+ customHtml: '© 2025 RhenCloud',
+ hitokoto: {
+ enable: true,
+ type: "a&b&c&d&j",
+ },
+ },
+};
+
+export default siteConfig;
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 50d887d..b48953a 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,84 +1,87 @@
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/app/pages/comments.vue b/app/pages/comments.vue
index 3329d8c..c79d251 100644
--- a/app/pages/comments.vue
+++ b/app/pages/comments.vue
@@ -1,82 +1,82 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/pages/friends.vue b/app/pages/friends.vue
index b89e7ae..bad4173 100644
--- a/app/pages/friends.vue
+++ b/app/pages/friends.vue
@@ -1,17 +1,17 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/app/pages/index.vue b/app/pages/index.vue
index a46c7e3..6554a94 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,23 +1,23 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/app/pages/projects.vue b/app/pages/projects.vue
index df4a25c..d4d2a26 100644
--- a/app/pages/projects.vue
+++ b/app/pages/projects.vue
@@ -1,17 +1,17 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/app/pages/sites.vue b/app/pages/sites.vue
index c47a1dc..5e7b933 100644
--- a/app/pages/sites.vue
+++ b/app/pages/sites.vue
@@ -1,17 +1,17 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/app/plugins/neteaseMiniPlayer.client.ts b/app/plugins/neteaseMiniPlayer.client.ts
index e03de5c..85d2807 100644
--- a/app/plugins/neteaseMiniPlayer.client.ts
+++ b/app/plugins/neteaseMiniPlayer.client.ts
@@ -1,100 +1,102 @@
-import { defineNuxtPlugin } from "#app";
-import siteConfig from "~/config/siteConfig";
-
-type NeteaseMiniPlayerGlobal = {
- init?: () => void;
-};
-
-type NeteaseWindow = Window & {
- NeteaseMiniPlayer?: NeteaseMiniPlayerGlobal;
- __NETEASE_MUSIC_CONFIG__?: unknown;
-};
-
-export default defineNuxtPlugin(() => {
- if (import.meta.server) return;
-
- // 检查配置是否启用了音乐播放器
- if (!siteConfig.music?.enable) {
- return;
- }
-
- // 在本地开发环境禁用网易音乐播放器，避免网络超时
- // if (
- // typeof window !== "undefined" &&
- // (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1")
- // ) {
- // console.log("Netease Music Player disabled on localhost");
- // return;
- // }
-
- const cssHref = "/css/netease-mini-player-v2.css";
- const scriptSrc = "/js/netease-mini-player-v2.js";
-
- const ensureStyle = () => {
- if (document.querySelector(`link[href="${cssHref}"]`)) return;
- const link = document.createElement("link");
- link.rel = "stylesheet";
- link.href = cssHref;
- link.onerror = () => {
- console.warn("Failed to load Netease music player styles");
- };
- document.head.appendChild(link);
- };
-
- const ensureScript = () =>
- new Promise((resolve) => {
- // 检查全局对象是否已存在，表示脚本已加载
- const anyWin = window as NeteaseWindow;
- if (anyWin.NeteaseMiniPlayer) {
- resolve();
- return;
- }
-
- const existing = document.querySelector(`script[src="${scriptSrc}"]`) as HTMLScriptElement | null;
- if (existing) {
- // 脚本已存在但未加载，等待它加载
- existing.addEventListener("load", () => resolve(), { once: true });
- existing.addEventListener("error", () => resolve(), { once: true });
- return;
- }
-
- // 脚本不存在，创建并加载
- const script = document.createElement("script");
- script.src = scriptSrc;
- script.async = true;
- script.onload = () => resolve();
- script.onerror = () => {
- console.warn("Failed to load Netease music player script");
- resolve();
- };
- document.body.appendChild(script);
- });
-
- const initPlayer = () => {
- const anyWin = window as NeteaseWindow;
-
- // 将 siteConfig 的音乐配置传递给全局 window 对象
- if (!anyWin.__NETEASE_MUSIC_CONFIG__) {
- anyWin.__NETEASE_MUSIC_CONFIG__ = siteConfig.music;
- }
-
- if (anyWin.NeteaseMiniPlayer?.init) {
- try {
- anyWin.NeteaseMiniPlayer.init();
- } catch (error) {
- console.warn("Failed to initialize Netease music player:", error);
- }
- }
- };
-
- // 使用超时机制防止永久挂起
- const timeout = setTimeout(() => {
- console.warn("Netease music player initialization timeout");
- }, 15000);
-
- ensureStyle();
- ensureScript().then(() => {
- clearTimeout(timeout);
- initPlayer();
- });
-});
+import { defineNuxtPlugin } from "#app";
+import siteConfig from "~/config/siteConfig";
+
+type NeteaseMiniPlayerGlobal = {
+ init?: () => void;
+};
+
+type NeteaseWindow = Window & {
+ NeteaseMiniPlayer?: NeteaseMiniPlayerGlobal;
+ __NETEASE_MUSIC_CONFIG__?: unknown;
+};
+
+export default defineNuxtPlugin(() => {
+ if (import.meta.server) return;
+
+ // 检查配置是否启用了音乐播放器
+ if (!siteConfig.music?.enable) {
+ return;
+ }
+
+ // 在本地开发环境禁用网易音乐播放器，避免网络超时
+ // if (
+ // typeof window !== "undefined" &&
+ // (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1")
+ // ) {
+ // console.log("Netease Music Player disabled on localhost");
+ // return;
+ // }
+
+ const cssHref = "/css/netease-mini-player-v2.css";
+ const scriptSrc = "/js/netease-mini-player-v2.js";
+
+ const ensureStyle = () => {
+ if (document.querySelector(`link[href="${cssHref}"]`)) return;
+ const link = document.createElement("link");
+ link.rel = "stylesheet";
+ link.href = cssHref;
+ link.onerror = () => {
+ console.warn("Failed to load Netease music player styles");
+ };
+ document.head.appendChild(link);
+ };
+
+ const ensureScript = () =>
+ new Promise((resolve) => {
+ // 检查全局对象是否已存在，表示脚本已加载
+ const anyWin = window as NeteaseWindow;
+ if (anyWin.NeteaseMiniPlayer) {
+ resolve();
+ return;
+ }
+
+ const existing = document.querySelector(
+ `script[src="${scriptSrc}"]`
+ ) as HTMLScriptElement | null;
+ if (existing) {
+ // 脚本已存在但未加载，等待它加载
+ existing.addEventListener("load", () => resolve(), { once: true });
+ existing.addEventListener("error", () => resolve(), { once: true });
+ return;
+ }
+
+ // 脚本不存在，创建并加载
+ const script = document.createElement("script");
+ script.src = scriptSrc;
+ script.async = true;
+ script.onload = () => resolve();
+ script.onerror = () => {
+ console.warn("Failed to load Netease music player script");
+ resolve();
+ };
+ document.body.appendChild(script);
+ });
+
+ const initPlayer = () => {
+ const anyWin = window as NeteaseWindow;
+
+ // 将 siteConfig 的音乐配置传递给全局 window 对象
+ if (!anyWin.__NETEASE_MUSIC_CONFIG__) {
+ anyWin.__NETEASE_MUSIC_CONFIG__ = siteConfig.music;
+ }
+
+ if (anyWin.NeteaseMiniPlayer?.init) {
+ try {
+ anyWin.NeteaseMiniPlayer.init();
+ } catch (error) {
+ console.warn("Failed to initialize Netease music player:", error);
+ }
+ }
+ };
+
+ // 使用超时机制防止永久挂起
+ const timeout = setTimeout(() => {
+ console.warn("Netease music player initialization timeout");
+ }, 15000);
+
+ ensureStyle();
+ ensureScript().then(() => {
+ clearTimeout(timeout);
+ initPlayer();
+ });
+});
diff --git a/app/plugins/umami.client.ts b/app/plugins/umami.client.ts
index 9f9e7bd..392398c 100644
--- a/app/plugins/umami.client.ts
+++ b/app/plugins/umami.client.ts
@@ -1,29 +1,29 @@
-import { defineNuxtPlugin } from "#app";
-import { VueUmamiPlugin } from "@jaseeey/vue-umami-plugin";
-import type { Router } from "vue-router";
-import siteConfig from "~/config/siteConfig";
-
-export default defineNuxtPlugin((nuxtApp) => {
- if (!import.meta.client) return;
- if (!siteConfig.umami?.enable) return;
-
- // 跳过在 localhost 环境下加载 Umami
- if (
- typeof window !== "undefined" &&
- (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1")
- ) {
- console.log("Umami plugin skipped on localhost");
- return;
- }
-
- const router = nuxtApp.$router as Router | undefined;
- if (!router) return;
-
- nuxtApp.vueApp.use(
- VueUmamiPlugin({
- websiteID: siteConfig.umami.websiteId,
- scriptSrc: siteConfig.umami.url,
- router,
- })
- );
-});
+import { defineNuxtPlugin } from "#app";
+import { VueUmamiPlugin } from "@jaseeey/vue-umami-plugin";
+import type { Router } from "vue-router";
+import siteConfig from "~/config/siteConfig";
+
+export default defineNuxtPlugin((nuxtApp) => {
+ if (!import.meta.client) return;
+ if (!siteConfig.umami?.enable) return;
+
+ // 跳过在 localhost 环境下加载 Umami
+ if (
+ typeof window !== "undefined" &&
+ (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1")
+ ) {
+ console.log("Umami plugin skipped on localhost");
+ return;
+ }
+
+ const router = nuxtApp.$router as Router | undefined;
+ if (!router) return;
+
+ nuxtApp.vueApp.use(
+ VueUmamiPlugin({
+ websiteID: siteConfig.umami.websiteId,
+ scriptSrc: siteConfig.umami.url,
+ router,
+ })
+ );
+});
diff --git a/app/styles.global.css b/app/styles.global.css
index f7b3030..372de7d 100644
--- a/app/styles.global.css
+++ b/app/styles.global.css
@@ -1,353 +1,359 @@
-@import "tailwindcss";
-
-/* Font Awesome 字体优化 */
-@font-face {
- font-family: "Font Awesome 6 Solid";
- src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2") format("woff2");
- font-display: swap;
- font-weight: 400;
- font-style: normal;
-}
-
-@font-face {
- font-family: "Font Awesome 6 Brands";
- src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2") format("woff2");
- font-display: swap;
- font-weight: 400;
- font-style: normal;
-}
-
-@layer base {
- html {
- height: 100%;
- scroll-behavior: smooth;
- }
-
- :root {
- color-scheme: light dark;
- background: #0f1629;
- color: #e8eefc;
- }
-
- body {
- margin: 0;
- min-height: 100%;
- background: radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629);
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- h1,
- h2,
- h3 {
- margin: 0;
- margin-bottom: 0.5rem;
- font-weight: 600;
- }
-
- p {
- margin-top: 0.375rem;
- margin-bottom: 0.375rem;
- }
-
- a {
- color: #7cc1ff;
- text-decoration: none;
- transition: color 0.2s ease;
- }
-
- a:hover {
- color: #a8d5ff;
- }
-}
-
-@layer components {
- .info-card {
- @apply rounded-[14px] border border-white/10
- bg-gradient-to-br from-white/5 to-white/0
- px-4 py-3.5 transition-all duration-200;
- }
-}
-
-@layer components {
- .app-shell {
- position: relative;
- min-height: 100vh;
- color: #e8eefc;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- z-index: 0;
- isolation: isolate;
- }
-
- .background-overlay {
- position: fixed;
- inset: 0;
- pointer-events: none;
- z-index: -10;
- background-repeat: no-repeat;
- }
-
- .content-stack {
- position: relative;
- z-index: 10;
- display: flex;
- flex-direction: column;
- min-height: 100vh;
- }
-
- .app-body {
- position: relative;
- z-index: 10;
- flex: 1;
- display: flex;
- flex-direction: column;
- }
-
- .background-toggle {
- position: fixed;
- right: 1.125rem;
- bottom: 1.125rem;
- z-index: 40;
- display: inline-flex;
- align-items: center;
- gap: 0.375rem;
- padding: 0.625rem 0.875rem;
- border-radius: 999px;
- border: 1px solid rgba(255, 255, 255, 0.25);
- background: rgba(255, 255, 255, 0.14);
- backdrop-filter: blur(10px);
- color: #f7fbff;
- font-weight: 600;
- cursor: pointer;
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
- transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
- }
-
- .background-toggle:hover,
- .background-toggle:focus-visible {
- background: rgba(124, 193, 255, 0.25);
- border-color: rgba(124, 193, 255, 0.65);
- box-shadow: 0 14px 36px rgba(124, 193, 255, 0.28);
- outline: none;
- }
-
- .background-toggle:active {
- transform: translateY(1px) scale(0.99);
- }
-
- .background-toggle.active {
- background: linear-gradient(135deg, rgba(124, 193, 255, 0.4), rgba(255, 255, 255, 0.2));
- border-color: rgba(124, 193, 255, 0.8);
- color: #0f1629;
- box-shadow: 0 16px 42px rgba(124, 193, 255, 0.32);
- }
-
- .background-toggle .toggle-icon {
- font-size: 18px;
- line-height: 1;
- }
-
- .background-toggle .toggle-label {
- font-size: 14px;
- letter-spacing: 0.2px;
- }
-
- .card {
- background: rgba(255, 255, 255, 0.04);
- border: 1px solid rgba(255, 255, 255, 0.08);
- border-radius: 1rem;
- padding: 1.125rem 1.25rem;
- backdrop-filter: blur(8px);
- box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
- transition: all 0.3s ease;
- }
-
- .card:hover {
- border-color: rgba(255, 255, 255, 0.15);
- box-shadow: 0 12px 48px rgba(124, 193, 255, 0.15);
- }
-
- .page {
- max-width: 960px;
- margin: 0 auto;
- padding: 2rem 1rem 3rem;
- display: flex;
- flex-direction: column;
- gap: 1rem;
- }
-
- .chips {
- display: flex;
- flex-wrap: wrap;
- gap: 0.625rem;
- }
-
- .chips a,
- .chip {
- padding: 0.375rem 0.75rem;
- border-radius: 999px;
- background: rgba(255, 255, 255, 0.08);
- border: 1px solid rgba(255, 255, 255, 0.1);
- color: #e8eefc;
- font-size: 0.875rem;
- font-weight: 500;
- transition: all 0.2s ease;
- }
-
- .chips a:hover,
- .chip:hover {
- background: rgba(124, 193, 255, 0.2);
- border-color: rgba(124, 193, 255, 0.4);
- color: #a8d5ff;
- transform: translateY(-2px);
- }
-
- .list {
- list-style: none;
- padding: 0;
- margin: 0;
- }
-
- .list li {
- margin-bottom: 0.5rem;
- }
-
- .netease-mini-player,
- .netease-mini-player-embed,
- .nmpv2-player,
- .nmpv2-root {
- position: fixed !important;
- bottom: 20px !important;
- left: 20px !important;
- right: auto !important;
- max-width: calc(100% - 40px) !important;
- z-index: 40001 !important;
- margin: 0 !important;
- transform: none !important;
- }
-
- .netease-mini-player > * {
- box-sizing: border-box;
- }
-
- .netease-mini-player.minimized {
- width: 80px !important;
- height: 80px !important;
- border-radius: 50% !important;
- padding: 0 !important;
- overflow: hidden !important;
- box-shadow: none !important;
- }
-
- .netease-mini-player.minimized .album-cover-container {
- width: 100% !important;
- height: 100% !important;
- position: absolute !important;
- top: 0 !important;
- left: 0 !important;
- border-radius: 50% !important;
- overflow: hidden !important;
- }
-
- .netease-mini-player.minimized .album-cover {
- width: 100% !important;
- height: 100% !important;
- object-fit: cover !important;
- border-radius: 50% !important;
- }
-
- .netease-mini-player[data-position="bottom-left"] .playlist-container,
- .netease-mini-player[data-position="bottom-right"] .playlist-container {
- position: fixed !important;
- bottom: calc(20px + 80px) !important;
- }
-
- .muted {
- color: #a8b3cf;
- font-size: 0.875rem;
- }
-
- .fade-enter-active,
- .fade-leave-active {
- transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- }
-
- .fade-enter-from,
- .fade-leave-to {
- opacity: 0;
- }
-
- .fade-down-enter-active,
- .fade-down-leave-active {
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- }
-
- .fade-down-enter-from {
- opacity: 0;
- transform: translateY(0.5rem);
- }
-
- .fade-down-leave-to {
- opacity: 0;
- transform: translateY(-0.5rem);
- }
-
- .fade-up-enter-active,
- .fade-up-leave-active {
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- }
-
- .fade-up-enter-from {
- opacity: 0;
- transform: translateY(-0.5rem);
- }
-
- .fade-up-leave-to {
- opacity: 0;
- transform: translateY(0.5rem);
- }
-}
-
-@layer utilities {
- .truncate-lines-2 {
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- }
-
- .truncate-lines-3 {
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
- overflow: hidden;
- }
-
- .glass {
- background: rgba(255, 255, 255, 0.05);
- backdrop-filter: blur(8px);
- border: 1px solid rgba(255, 255, 255, 0.1);
- }
-
- .glass-sm {
- background: rgba(255, 255, 255, 0.05);
- backdrop-filter: blur(4px);
- border: 1px solid rgba(255, 255, 255, 0.1);
- }
-
- @media (max-width: 640px) {
- .background-toggle {
- right: 0.75rem;
- bottom: 0.75rem;
- padding: 0.5625rem 0.75rem;
- gap: 0.3125rem;
- }
-
- .background-toggle .toggle-label {
- font-size: 0.8125rem;
- }
- }
-}
+@import "tailwindcss";
+
+/* Font Awesome 字体优化 */
+@font-face {
+ font-family: "Font Awesome 6 Solid";
+ src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2")
+ format("woff2");
+ font-display: swap;
+ font-weight: 400;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Font Awesome 6 Brands";
+ src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2")
+ format("woff2");
+ font-display: swap;
+ font-weight: 400;
+ font-style: normal;
+}
+
+@layer base {
+ html {
+ height: 100%;
+ scroll-behavior: smooth;
+ }
+
+ :root {
+ color-scheme: light dark;
+ background: #0f1629;
+ color: #e8eefc;
+ }
+
+ body {
+ margin: 0;
+ min-height: 100%;
+ background: radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629);
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ h1,
+ h2,
+ h3 {
+ margin: 0;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+ }
+
+ p {
+ margin-top: 0.375rem;
+ margin-bottom: 0.375rem;
+ }
+
+ a {
+ color: #7cc1ff;
+ text-decoration: none;
+ transition: color 0.2s ease;
+ }
+
+ a:hover {
+ color: #a8d5ff;
+ }
+}
+
+@layer components {
+ .info-card {
+ @apply rounded-[14px] border border-white/10
+ bg-gradient-to-br from-white/5 to-white/0
+ px-4 py-3.5 transition-all duration-200;
+ }
+}
+
+@layer components {
+ .app-shell {
+ position: relative;
+ min-height: 100vh;
+ color: #e8eefc;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ z-index: 0;
+ isolation: isolate;
+ }
+
+ .background-overlay {
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ z-index: -10;
+ background-repeat: no-repeat;
+ }
+
+ .content-stack {
+ position: relative;
+ z-index: 10;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ }
+
+ .app-body {
+ position: relative;
+ z-index: 10;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .background-toggle {
+ position: fixed;
+ right: 1.125rem;
+ bottom: 1.125rem;
+ z-index: 40;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.375rem;
+ padding: 0.625rem 0.875rem;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.25);
+ background: rgba(255, 255, 255, 0.14);
+ backdrop-filter: blur(10px);
+ color: #f7fbff;
+ font-weight: 600;
+ cursor: pointer;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
+ transition:
+ transform 0.18s ease,
+ box-shadow 0.18s ease,
+ background 0.18s ease,
+ border-color 0.18s ease;
+ }
+
+ .background-toggle:hover,
+ .background-toggle:focus-visible {
+ background: rgba(124, 193, 255, 0.25);
+ border-color: rgba(124, 193, 255, 0.65);
+ box-shadow: 0 14px 36px rgba(124, 193, 255, 0.28);
+ outline: none;
+ }
+
+ .background-toggle:active {
+ transform: translateY(1px) scale(0.99);
+ }
+
+ .background-toggle.active {
+ background: linear-gradient(135deg, rgba(124, 193, 255, 0.4), rgba(255, 255, 255, 0.2));
+ border-color: rgba(124, 193, 255, 0.8);
+ color: #0f1629;
+ box-shadow: 0 16px 42px rgba(124, 193, 255, 0.32);
+ }
+
+ .background-toggle .toggle-icon {
+ font-size: 18px;
+ line-height: 1;
+ }
+
+ .background-toggle .toggle-label {
+ font-size: 14px;
+ letter-spacing: 0.2px;
+ }
+
+ .card {
+ background: rgba(255, 255, 255, 0.04);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ border-radius: 1rem;
+ padding: 1.125rem 1.25rem;
+ backdrop-filter: blur(8px);
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
+ transition: all 0.3s ease;
+ }
+
+ .card:hover {
+ border-color: rgba(255, 255, 255, 0.15);
+ box-shadow: 0 12px 48px rgba(124, 193, 255, 0.15);
+ }
+
+ .page {
+ max-width: 960px;
+ margin: 0 auto;
+ padding: 2rem 1rem 3rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .chips {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.625rem;
+ }
+
+ .chips a,
+ .chip {
+ padding: 0.375rem 0.75rem;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ color: #e8eefc;
+ font-size: 0.875rem;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ }
+
+ .chips a:hover,
+ .chip:hover {
+ background: rgba(124, 193, 255, 0.2);
+ border-color: rgba(124, 193, 255, 0.4);
+ color: #a8d5ff;
+ transform: translateY(-2px);
+ }
+
+ .list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ .list li {
+ margin-bottom: 0.5rem;
+ }
+
+ .netease-mini-player,
+ .netease-mini-player-embed,
+ .nmpv2-player,
+ .nmpv2-root {
+ position: fixed !important;
+ bottom: 20px !important;
+ left: 20px !important;
+ right: auto !important;
+ max-width: calc(100% - 40px) !important;
+ z-index: 40001 !important;
+ margin: 0 !important;
+ transform: none !important;
+ }
+
+ .netease-mini-player > * {
+ box-sizing: border-box;
+ }
+
+ .netease-mini-player.minimized {
+ width: 80px !important;
+ height: 80px !important;
+ border-radius: 50% !important;
+ padding: 0 !important;
+ overflow: hidden !important;
+ box-shadow: none !important;
+ }
+
+ .netease-mini-player.minimized .album-cover-container {
+ width: 100% !important;
+ height: 100% !important;
+ position: absolute !important;
+ top: 0 !important;
+ left: 0 !important;
+ border-radius: 50% !important;
+ overflow: hidden !important;
+ }
+
+ .netease-mini-player.minimized .album-cover {
+ width: 100% !important;
+ height: 100% !important;
+ object-fit: cover !important;
+ border-radius: 50% !important;
+ }
+
+ .netease-mini-player[data-position="bottom-left"] .playlist-container,
+ .netease-mini-player[data-position="bottom-right"] .playlist-container {
+ position: fixed !important;
+ bottom: calc(20px + 80px) !important;
+ }
+
+ .muted {
+ color: #a8b3cf;
+ font-size: 0.875rem;
+ }
+
+ .fade-enter-active,
+ .fade-leave-active {
+ transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ }
+
+ .fade-enter-from,
+ .fade-leave-to {
+ opacity: 0;
+ }
+
+ .fade-down-enter-active,
+ .fade-down-leave-active {
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ }
+
+ .fade-down-enter-from {
+ opacity: 0;
+ transform: translateY(0.5rem);
+ }
+
+ .fade-down-leave-to {
+ opacity: 0;
+ transform: translateY(-0.5rem);
+ }
+
+ .fade-up-enter-active,
+ .fade-up-leave-active {
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ }
+
+ .fade-up-enter-from {
+ opacity: 0;
+ transform: translateY(-0.5rem);
+ }
+
+ .fade-up-leave-to {
+ opacity: 0;
+ transform: translateY(0.5rem);
+ }
+}
+
+@layer utilities {
+ .truncate-lines-2 {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+
+ .truncate-lines-3 {
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+
+ .glass {
+ background: rgba(255, 255, 255, 0.05);
+ backdrop-filter: blur(8px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .glass-sm {
+ background: rgba(255, 255, 255, 0.05);
+ backdrop-filter: blur(4px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ @media (max-width: 640px) {
+ .background-toggle {
+ right: 0.75rem;
+ bottom: 0.75rem;
+ padding: 0.5625rem 0.75rem;
+ gap: 0.3125rem;
+ }
+
+ .background-toggle .toggle-label {
+ font-size: 0.8125rem;
+ }
+ }
+}
diff --git a/app/utils/cssLoader.ts b/app/utils/cssLoader.ts
index 00f8a1d..df7de0c 100644
--- a/app/utils/cssLoader.ts
+++ b/app/utils/cssLoader.ts
@@ -1,9 +1,9 @@
-/**
- * CSS 加载工具 (已禁用)
- *
- * 此工具不再使用，因为Nuxt会自动处理CSS加载和优化
- * 保留此文件以供参考，但不会被导入
- */
-
-// 所有导出的函数已被删除
-// 使用 nuxt.config.ts 的 css 配置代替
+/**
+ * CSS 加载工具 (已禁用)
+ *
+ * 此工具不再使用，因为Nuxt会自动处理CSS加载和优化
+ * 保留此文件以供参考，但不会被导入
+ */
+
+// 所有导出的函数已被删除
+// 使用 nuxt.config.ts 的 css 配置代替
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 63c8d46..1c9f498 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,3 @@
onlyBuiltDependencies:
- - esbuild
- - sharp@0.34.5
+ - esbuild
+ - sharp@0.34.5
diff --git a/public/404.html b/public/404.html
index 6c825fc..75a25aa 100644
--- a/public/404.html
+++ b/public/404.html
@@ -1,80 +1,86 @@
-
-
-
-
-
-
- 404 - Not Found
-
-
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+ 404 - Not Found
+
+
+
+
+
+
+
+
diff --git a/public/css/giscus.css b/public/css/giscus.css
index 9bdab8f..c1676f3 100644
--- a/public/css/giscus.css
+++ b/public/css/giscus.css
@@ -1,167 +1,167 @@
-/*!
- * Modified from GitHub's Dark Dimmed theme, adapted for Cloud-Home
- * License: MIT (see original project primer/primitives)
- * Modified from GitHub's Dark Dimmed theme, licensed under the MIT License
- * Copyright (c) 2018 GitHub Inc.
- * https://github.com/primer/primitives/blob/main/LICENSE
- */
-
-:root {
- --ch-bg: #0a0c14; /* 深色卡片背景 */
- --ch-bg-2: rgba(6, 8, 15, 0.55);
- --ch-border: rgba(255, 255, 255, 0.04);
- --muted: #768390;
- --fg: #e6eef8;
-
- /* 添加 1.css 中的颜色变量 */
- --color-prettylights-syntax-comment: #768390;
- --color-prettylights-syntax-constant: #6cb6ff;
- --color-prettylights-syntax-entity: #dcbdfb;
- --color-prettylights-syntax-storage-modifier-import: #adbac7;
- --color-prettylights-syntax-entity-tag: #8ddb8c;
- --color-prettylights-syntax-keyword: #f47067;
- --color-prettylights-syntax-string: #96d0ff;
- --color-prettylights-syntax-variable: #f69d50;
- --color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
- --color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
- --color-prettylights-syntax-invalid-illegal-bg: #922323;
- --color-prettylights-syntax-carriage-return-text: #cdd9e5;
- --color-prettylights-syntax-carriage-return-bg: #ad2e2c;
- --color-prettylights-syntax-string-regexp: #8ddb8c;
- --color-prettylights-syntax-markup-list: #eac55f;
- --color-prettylights-syntax-markup-heading: #316dca;
- --color-prettylights-syntax-markup-italic: #adbac7;
- --color-prettylights-syntax-markup-bold: #adbac7;
- --color-prettylights-syntax-markup-deleted-text: #ffd8d3;
- --color-prettylights-syntax-markup-deleted-bg: #78191b;
- --color-prettylights-syntax-markup-inserted-text: #b4f1b4;
- --color-prettylights-syntax-markup-inserted-bg: #1b4721;
- --color-prettylights-syntax-markup-changed-text: #ffddb0;
- --color-prettylights-syntax-markup-changed-bg: #682d0f;
- --color-prettylights-syntax-markup-ignored-text: #adbac7;
- --color-prettylights-syntax-markup-ignored-bg: #255ab2;
- --color-prettylights-syntax-meta-diff-range: #dcbdfb;
- --color-prettylights-syntax-brackethighlighter-angle: #768390;
- --color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
- --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
- --color-btn-text: #adbac7;
- --color-btn-bg: #373e47;
- --color-btn-border: #cdd9e51a;
- --color-btn-shadow: 0 0 #0000;
- --color-btn-inset-shadow: 0 0 #0000;
- --color-btn-hover-bg: #444c56;
- --color-btn-hover-border: #768390;
- --color-btn-active-bg: #3d444d;
- --color-btn-active-border: #636e7b;
- --color-btn-selected-bg: #2d333b;
- --color-btn-primary-text: #fff;
- --color-btn-primary-bg: #347d39;
- --color-btn-primary-border: #cdd9e51a;
- --color-btn-primary-shadow: 0 0 #0000;
- --color-btn-primary-inset-shadow: 0 0 #0000;
- --color-btn-primary-hover-bg: #46954a;
- --color-btn-primary-hover-border: #cdd9e51a;
- --color-btn-primary-selected-bg: #347d39;
- --color-btn-primary-selected-shadow: 0 0 #0000;
- --color-btn-primary-disabled-text: #cdd9e580;
- --color-btn-primary-disabled-bg: #347d3999;
- --color-btn-primary-disabled-border: #cdd9e51a;
- --color-action-list-item-default-hover-bg: #909dab1f;
- --color-segmented-control-bg: #636e7b1a;
- --color-segmented-control-button-bg: #22272e;
- --color-segmented-control-button-selected-border: #636e7b;
-}
-
-/* 外部容器（在组件中也有一层） */
-.giscus-wrapper {
- background: linear-gradient(180deg, rgba(6, 8, 15, 0.55), rgba(10, 12, 20, 0.45));
- border: 1px solid var(--ch-border);
- border-radius: 12px;
- padding: 0.75rem;
- box-shadow: 0 8px 24px rgba(2, 6, 23, 0.6);
- backdrop-filter: blur(6px) saturate(120%);
- -webkit-backdrop-filter: blur(6px) saturate(120%);
- margin-bottom: 1.25rem;
-}
-
-.giscus {
- width: 100%;
- color-scheme: dark;
- overflow: hidden;
-}
-
-/* 兼容非组件 fallback 容器 */
-#giscus-container {
- padding: 0.5rem;
-}
-
-/* GitHub Dark Dimmed inspired tweaks adapted to site theme */
-.gsc-reactions-count {
- display: none !important;
-}
-.gsc-timeline {
- flex-direction: column-reverse;
-}
-.gsc-header {
- padding-bottom: 1rem;
- color: var(--muted) !important;
-}
-.gsc-comments > .gsc-comment-box {
- margin-bottom: 1rem;
-}
-.gsc-comments > .gsc-header {
- order: 1;
-}
-.gsc-comments > .gsc-timeline {
- order: 3;
-}
-
-/* 卡片风格：半透明+圆角+内阴影，契合站点 */
-.gsc-comment,
-.gsc-comment-body,
-.gsc-comment .gsc-comment-body {
- background: linear-gradient(180deg, rgba(6, 8, 15, 0.5), rgba(10, 12, 20, 0.45)) !important;
- border: 1px solid var(--ch-border) !important;
- border-radius: 10px !important;
- padding: 0.75rem !important;
- box-shadow: 0 8px 20px rgba(2, 6, 23, 0.55) !important;
-}
-
-/* 评论作者/元信息颜色 */
-.gsc-comment .gsc-comment-header,
-.gsc-comment .gsc-comment-meta {
- color: var(--muted) !important;
-}
-
-/* 按钮 / 交互控件微调 */
-.gsc-reaction-button,
-.gsc-input button {
- background: var(--color-btn-bg) !important;
- border: var(--color-btn-border) !important;
- color: var(--color-btn-text) !important;
- border-radius: 6px !important;
- box-shadow: var(--color-btn-shadow) !important;
- border-radius: 6px !important;
-}
-
-/* 输入框样式 */
-.gsc-input textarea,
-.gsc-input input {
- background: rgba(0, 0, 0, 0.35) !important;
- color: var(--fg) !important;
- border: 1px solid rgba(255, 255, 255, 0.06) !important;
- border-radius: 8px !important;
-}
-
-/* 加载图像和首页背景微调 */
-main .gsc-loading-image {
- background-image: url(https://github.githubassets.com/images/mona-loading-dimmed.gif) !important;
-}
-.gsc-homepage-bg {
- background-color: var(--color-canvas-subtle) !important;
-}
-
-/* 语义辅助：让嵌入内容更好地适配窄屏 */
-.giscus {
- overflow: hidden;
-}
+/*!
+ * Modified from GitHub's Dark Dimmed theme, adapted for Cloud-Home
+ * License: MIT (see original project primer/primitives)
+ * Modified from GitHub's Dark Dimmed theme, licensed under the MIT License
+ * Copyright (c) 2018 GitHub Inc.
+ * https://github.com/primer/primitives/blob/main/LICENSE
+ */
+
+:root {
+ --ch-bg: #0a0c14; /* 深色卡片背景 */
+ --ch-bg-2: rgba(6, 8, 15, 0.55);
+ --ch-border: rgba(255, 255, 255, 0.04);
+ --muted: #768390;
+ --fg: #e6eef8;
+
+ /* 添加 1.css 中的颜色变量 */
+ --color-prettylights-syntax-comment: #768390;
+ --color-prettylights-syntax-constant: #6cb6ff;
+ --color-prettylights-syntax-entity: #dcbdfb;
+ --color-prettylights-syntax-storage-modifier-import: #adbac7;
+ --color-prettylights-syntax-entity-tag: #8ddb8c;
+ --color-prettylights-syntax-keyword: #f47067;
+ --color-prettylights-syntax-string: #96d0ff;
+ --color-prettylights-syntax-variable: #f69d50;
+ --color-prettylights-syntax-brackethighlighter-unmatched: #e5534b;
+ --color-prettylights-syntax-invalid-illegal-text: #cdd9e5;
+ --color-prettylights-syntax-invalid-illegal-bg: #922323;
+ --color-prettylights-syntax-carriage-return-text: #cdd9e5;
+ --color-prettylights-syntax-carriage-return-bg: #ad2e2c;
+ --color-prettylights-syntax-string-regexp: #8ddb8c;
+ --color-prettylights-syntax-markup-list: #eac55f;
+ --color-prettylights-syntax-markup-heading: #316dca;
+ --color-prettylights-syntax-markup-italic: #adbac7;
+ --color-prettylights-syntax-markup-bold: #adbac7;
+ --color-prettylights-syntax-markup-deleted-text: #ffd8d3;
+ --color-prettylights-syntax-markup-deleted-bg: #78191b;
+ --color-prettylights-syntax-markup-inserted-text: #b4f1b4;
+ --color-prettylights-syntax-markup-inserted-bg: #1b4721;
+ --color-prettylights-syntax-markup-changed-text: #ffddb0;
+ --color-prettylights-syntax-markup-changed-bg: #682d0f;
+ --color-prettylights-syntax-markup-ignored-text: #adbac7;
+ --color-prettylights-syntax-markup-ignored-bg: #255ab2;
+ --color-prettylights-syntax-meta-diff-range: #dcbdfb;
+ --color-prettylights-syntax-brackethighlighter-angle: #768390;
+ --color-prettylights-syntax-sublimelinter-gutter-mark: #545d68;
+ --color-prettylights-syntax-constant-other-reference-link: #96d0ff;
+ --color-btn-text: #adbac7;
+ --color-btn-bg: #373e47;
+ --color-btn-border: #cdd9e51a;
+ --color-btn-shadow: 0 0 #0000;
+ --color-btn-inset-shadow: 0 0 #0000;
+ --color-btn-hover-bg: #444c56;
+ --color-btn-hover-border: #768390;
+ --color-btn-active-bg: #3d444d;
+ --color-btn-active-border: #636e7b;
+ --color-btn-selected-bg: #2d333b;
+ --color-btn-primary-text: #fff;
+ --color-btn-primary-bg: #347d39;
+ --color-btn-primary-border: #cdd9e51a;
+ --color-btn-primary-shadow: 0 0 #0000;
+ --color-btn-primary-inset-shadow: 0 0 #0000;
+ --color-btn-primary-hover-bg: #46954a;
+ --color-btn-primary-hover-border: #cdd9e51a;
+ --color-btn-primary-selected-bg: #347d39;
+ --color-btn-primary-selected-shadow: 0 0 #0000;
+ --color-btn-primary-disabled-text: #cdd9e580;
+ --color-btn-primary-disabled-bg: #347d3999;
+ --color-btn-primary-disabled-border: #cdd9e51a;
+ --color-action-list-item-default-hover-bg: #909dab1f;
+ --color-segmented-control-bg: #636e7b1a;
+ --color-segmented-control-button-bg: #22272e;
+ --color-segmented-control-button-selected-border: #636e7b;
+}
+
+/* 外部容器（在组件中也有一层） */
+.giscus-wrapper {
+ background: linear-gradient(180deg, rgba(6, 8, 15, 0.55), rgba(10, 12, 20, 0.45));
+ border: 1px solid var(--ch-border);
+ border-radius: 12px;
+ padding: 0.75rem;
+ box-shadow: 0 8px 24px rgba(2, 6, 23, 0.6);
+ backdrop-filter: blur(6px) saturate(120%);
+ -webkit-backdrop-filter: blur(6px) saturate(120%);
+ margin-bottom: 1.25rem;
+}
+
+.giscus {
+ width: 100%;
+ color-scheme: dark;
+ overflow: hidden;
+}
+
+/* 兼容非组件 fallback 容器 */
+#giscus-container {
+ padding: 0.5rem;
+}
+
+/* GitHub Dark Dimmed inspired tweaks adapted to site theme */
+.gsc-reactions-count {
+ display: none !important;
+}
+.gsc-timeline {
+ flex-direction: column-reverse;
+}
+.gsc-header {
+ padding-bottom: 1rem;
+ color: var(--muted) !important;
+}
+.gsc-comments > .gsc-comment-box {
+ margin-bottom: 1rem;
+}
+.gsc-comments > .gsc-header {
+ order: 1;
+}
+.gsc-comments > .gsc-timeline {
+ order: 3;
+}
+
+/* 卡片风格：半透明+圆角+内阴影，契合站点 */
+.gsc-comment,
+.gsc-comment-body,
+.gsc-comment .gsc-comment-body {
+ background: linear-gradient(180deg, rgba(6, 8, 15, 0.5), rgba(10, 12, 20, 0.45)) !important;
+ border: 1px solid var(--ch-border) !important;
+ border-radius: 10px !important;
+ padding: 0.75rem !important;
+ box-shadow: 0 8px 20px rgba(2, 6, 23, 0.55) !important;
+}
+
+/* 评论作者/元信息颜色 */
+.gsc-comment .gsc-comment-header,
+.gsc-comment .gsc-comment-meta {
+ color: var(--muted) !important;
+}
+
+/* 按钮 / 交互控件微调 */
+.gsc-reaction-button,
+.gsc-input button {
+ background: var(--color-btn-bg) !important;
+ border: var(--color-btn-border) !important;
+ color: var(--color-btn-text) !important;
+ border-radius: 6px !important;
+ box-shadow: var(--color-btn-shadow) !important;
+ border-radius: 6px !important;
+}
+
+/* 输入框样式 */
+.gsc-input textarea,
+.gsc-input input {
+ background: rgba(0, 0, 0, 0.35) !important;
+ color: var(--fg) !important;
+ border: 1px solid rgba(255, 255, 255, 0.06) !important;
+ border-radius: 8px !important;
+}
+
+/* 加载图像和首页背景微调 */
+main .gsc-loading-image {
+ background-image: url(https://github.githubassets.com/images/mona-loading-dimmed.gif) !important;
+}
+.gsc-homepage-bg {
+ background-color: var(--color-canvas-subtle) !important;
+}
+
+/* 语义辅助：让嵌入内容更好地适配窄屏 */
+.giscus {
+ overflow: hidden;
+}
diff --git a/public/css/netease-mini-player-v2.css b/public/css/netease-mini-player-v2.css
index 1945ec1..b4f68fc 100644
--- a/public/css/netease-mini-player-v2.css
+++ b/public/css/netease-mini-player-v2.css
@@ -1,1340 +1,1451 @@
-/**
- * [NMPv2] NeteaseMiniPlayer v2 CSS
- * Lightweight Player Component Based on NetEase Cloud Music API
- *
- * Copyright 2025 BHCN STUDIO & 北海的佰川（ImBHCN[numakkiyu]）
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:root {
- --primary-bg: #fafafa;
- --secondary-bg: #f0f0f0;
- --bg-color: #fafafa;
- --accent-color: #ff6b35;
- --accent-color-2: #7a66ff;
- --accent-color-3: #00c2ff;
- --accent-gradient: linear-gradient(
- 135deg,
- var(--accent-color) 0%,
- var(--accent-color-2) 50%,
- var(--accent-color-3) 100%
- );
- --text-primary: #333333;
- --text-secondary: #666666;
- --text-muted: #999999;
- --shadow-light: rgba(255, 255, 255, 0.9);
- --shadow-dark: rgba(0, 0, 0, 0.1);
- --shadow-inset: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
- --shadow-outset: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
- --border-radius: 12px;
- --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- --theme-transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
-
- --flow-color-1: rgba(255, 107, 53, 0.32);
- --flow-color-2: rgba(86, 151, 227, 0.26);
- --flow-color-3: rgba(255, 209, 102, 0.26);
- --flow-color-4: rgba(122, 102, 255, 0.28);
- --flow-color-5: rgba(0, 194, 255, 0.22);
- --flow-opacity: 0.45;
- --flow-speed: 10s;
- --volume-total-width: 60px;
- --playlist-flow-opacity: 0.25;
-}
-
-.netease-mini-player[data-theme="dark"] {
- --primary-bg: #1e1e1e;
- --secondary-bg: #2a2a2a;
- --bg-color: #1e1e1e;
- --accent-color: #ff8a50;
- --accent-color-2: #6c63ff;
- --accent-color-3: #00d4ff;
- --accent-gradient: linear-gradient(
- 135deg,
- var(--accent-color) 0%,
- var(--accent-color-2) 50%,
- var(--accent-color-3) 100%
- );
- --text-primary: #e0e0e0;
- --text-secondary: #b0b0b0;
- --text-muted: #808080;
- --shadow-light: rgba(255, 255, 255, 0.05);
- --shadow-dark: rgba(0, 0, 0, 0.4);
- --shadow-inset: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
- --shadow-outset: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
-
- --flow-color-1: rgba(255, 138, 80, 0.28);
- --flow-color-2: rgba(86, 151, 227, 0.24);
- --flow-color-3: rgba(140, 100, 255, 0.26);
- --flow-color-4: rgba(124, 110, 255, 0.24);
- --flow-color-5: rgba(0, 212, 255, 0.22);
- --flow-opacity: 0.36;
- --flow-speed: 12s;
-}
-
-@media (prefers-color-scheme: dark) {
- .netease-mini-player[data-theme="auto"] {
- --primary-bg: #1e1e1e;
- --secondary-bg: #2a2a2a;
- --bg-color: #1e1e1e;
- --accent-color: #ff8a50;
- --accent-color-2: #6c63ff;
- --accent-color-3: #00d4ff;
- --accent-gradient: linear-gradient(
- 135deg,
- var(--accent-color) 0%,
- var(--accent-color-2) 50%,
- var(--accent-color-3) 100%
- );
- --text-primary: #e0e0e0;
- --text-secondary: #b0b0b0;
- --text-muted: #808080;
- --shadow-light: rgba(255, 255, 255, 0.05);
- --shadow-dark: rgba(0, 0, 0, 0.4);
- --shadow-inset: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
- --shadow-outset: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
-
- --flow-color-1: rgba(255, 138, 80, 0.28);
- --flow-color-2: rgba(86, 151, 227, 0.24);
- --flow-color-3: rgba(140, 100, 255, 0.26);
- --flow-color-4: rgba(124, 110, 255, 0.24);
- --flow-color-5: rgba(0, 212, 255, 0.22);
- --flow-opacity: 0.36;
- --flow-speed: 12s;
- }
-}
-@media (prefers-color-scheme: light) {
- .netease-mini-player[data-theme="auto"] {
- --primary-bg: #fafafa;
- --secondary-bg: #f0f0f0;
- --bg-color: #fafafa;
- --accent-color: #ff6b35;
- --accent-color-2: #7a66ff;
- --accent-color-3: #00c2ff;
- --accent-gradient: linear-gradient(
- 135deg,
- var(--accent-color) 0%,
- var(--accent-color-2) 50%,
- var(--accent-color-3) 100%
- );
- --text-primary: #333333;
- --text-secondary: #666666;
- --text-muted: #999999;
- --shadow-light: rgba(255, 255, 255, 0.9);
- --shadow-dark: rgba(0, 0, 0, 0.1);
- --shadow-inset: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
- --shadow-outset: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
-
- --flow-color-1: rgba(255, 107, 53, 0.32);
- --flow-color-2: rgba(86, 151, 227, 0.26);
- --flow-color-3: rgba(255, 209, 102, 0.26);
- --flow-color-4: rgba(122, 102, 255, 0.28);
- --flow-color-5: rgba(0, 194, 255, 0.22);
- --flow-opacity: 0.45;
- --flow-speed: 10s;
- }
-}
-
-.netease-mini-player {
- width: 400px;
- height: 120px;
- background: var(--bg-color);
- border-radius: 16px;
- padding: 12px;
- box-shadow: var(--shadow-outset);
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
- position: relative;
- overflow: visible;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- gap: 8px;
- transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
- border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
- var(--theme-transition);
- background: 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.netease-mini-player::before {
- content: "";
- position: absolute;
- inset: 0;
- border-radius: inherit;
- pointer-events: none;
- background: radial-gradient(circle at 15% 20%, var(--flow-color-1) 0%, transparent 60%),
- radial-gradient(circle at 80% 25%, var(--flow-color-2) 0%, transparent 60%),
- radial-gradient(circle at 30% 85%, var(--flow-color-3) 0%, transparent 60%),
- radial-gradient(circle at 10% 75%, var(--flow-color-4) 0%, transparent 55%),
- radial-gradient(circle at 85% 80%, var(--flow-color-5) 0%, transparent 55%);
- opacity: var(--flow-opacity);
- background-size: 220% 220%, 220% 220%, 220% 220%, 220% 220%, 220% 220%;
- background-position: 0% 0%, 100% 0%, 0% 100%, 20% 80%, 80% 20%;
- filter: saturate(1.02) brightness(1.01);
- transform: scale(1);
- animation: flow-breathe var(--flow-speed) ease-in-out infinite;
- animation-play-state: paused;
-}
-
-.netease-mini-player.player-playing::before {
- animation-play-state: running;
-}
-
-@keyframes flow-breathe {
- 0% {
- background-position: 0% 0%, 100% 0%, 0% 100%, 20% 80%, 80% 20%;
- transform: scale(1);
- filter: saturate(1.02) brightness(1.01);
- }
- 50% {
- background-position: 100% 50%, 0% 100%, 50% 0%, 35% 65%, 65% 35%;
- transform: scale(1.03);
- filter: saturate(1.15) brightness(1.06);
- }
- 100% {
- background-position: 0% 100%, 100% 50%, 100% 0%, 20% 80%, 80% 20%;
- transform: scale(1);
- filter: saturate(1.02) brightness(1.01);
- }
-}
-
-.netease-mini-player.minimized {
- width: 80px;
- height: 80px;
- border-radius: 50%;
- padding: 0;
- background: radial-gradient(120px 120px at 30% 30%, rgba(255, 138, 80, 0.25), transparent 60%),
- radial-gradient(120px 120px at 70% 70%, rgba(0, 210, 255, 0.22), transparent 60%),
- linear-gradient(135deg, #151515, #1e1e1e);
- box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.4), -2px -2px 8px rgba(255, 255, 255, 0.1),
- inset 0 0 20px rgba(0, 0, 0, 0.3);
-}
-
-.netease-mini-player.minimized .song-content,
-.netease-mini-player.minimized .controls,
-.netease-mini-player.minimized .playlist-container {
- opacity: 0;
- visibility: hidden;
- transition: opacity 0.3s ease, visibility 0.3s ease;
-}
-
-.netease-mini-player.minimized .player-bottom {
- opacity: 0;
- visibility: hidden;
- transition: opacity 0.3s ease, visibility 0.3s ease;
-}
-
-.netease-mini-player.minimized .minimize-btn {
- opacity: 1 !important;
- visibility: visible !important;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- z-index: 1000;
- background: rgba(0, 0, 0, 0.7);
- border-radius: 50%;
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 12px;
- transition: all 0.3s ease;
-}
-
-.netease-mini-player.minimized .minimize-btn:hover {
- background: rgba(0, 0, 0, 0.9);
- transform: translate(-50%, -50%) scale(1.1);
-}
-
-.netease-mini-player .song-content,
-.netease-mini-player .controls,
-.netease-mini-player .player-bottom {
- opacity: 1;
- visibility: visible;
- transition: opacity 0.3s ease 0.2s, visibility 0.3s ease 0.2s;
-}
-
-.netease-mini-player.minimized .album-cover-container {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- border-radius: 50%;
- box-shadow: none;
- transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
- top 0.5s cubic-bezier(0.4, 0, 0.2, 1), left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
- box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.netease-mini-player.minimized .album-cover {
- width: 100%;
- height: 100%;
- border-radius: 50%;
- filter: brightness(0.8) contrast(1.1);
- transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
- filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.netease-mini-player.minimized .vinyl-overlay {
- background: radial-gradient(
- circle at center,
- transparent 15%,
- rgba(0, 0, 0, 0.1) 15%,
- rgba(0, 0, 0, 0.1) 16%,
- transparent 16%,
- transparent 25%,
- rgba(0, 0, 0, 0.15) 25%,
- rgba(0, 0, 0, 0.15) 26%,
- transparent 26%,
- transparent 35%,
- rgba(0, 0, 0, 0.1) 35%,
- rgba(0, 0, 0, 0.1) 36%,
- transparent 36%,
- transparent 45%,
- rgba(0, 0, 0, 0.15) 45%,
- rgba(0, 0, 0, 0.15) 46%,
- transparent 46%
- );
- box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(0, 0, 0, 0.8);
- transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.netease-mini-player.minimized .vinyl-center {
- width: 16px;
- height: 16px;
- background: radial-gradient(circle at 30% 30%, #666 0%, #333 50%, #111 100%);
- box-shadow: 0 0 3px rgba(0, 0, 0, 0.8), inset 1px 1px 2px rgba(255, 255, 255, 0.2);
- border: 1px solid #000;
- transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
- background 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
- border 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.netease-mini-player[data-position="top-left"] {
- position: fixed;
- top: 20px;
- left: 20px;
- z-index: 1000;
-}
-
-.netease-mini-player[data-position="top-right"] {
- position: fixed;
- top: 20px;
- right: 20px;
- z-index: 1000;
-}
-
-.netease-mini-player[data-position="bottom-left"] {
- position: fixed;
- bottom: 20px;
- left: 20px;
- z-index: 1000;
-}
-
-.netease-mini-player[data-position="bottom-right"] {
- position: fixed;
- bottom: 20px;
- right: 20px;
- z-index: 1000;
-}
-
-.netease-mini-player[data-position="static"] {
- position: relative;
-}
-
-.player-main {
- display: flex;
- align-items: center;
- gap: 12px;
- flex: 1;
-}
-
-.album-cover-container {
- width: 60px;
- height: 60px;
- border-radius: 50%;
- position: relative;
- flex-shrink: 0;
- background: var(--secondary-bg);
- box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light),
- 2px 2px 6px rgba(0, 0, 0, 0.2), -1px -1px 3px rgba(255, 255, 255, 0.1);
- overflow: hidden;
- cursor: pointer;
- border: 2px solid rgba(0, 0, 0, 0.1);
-}
-.album-cover-container::after {
- content: "";
- position: absolute;
- inset: -4px;
- border-radius: 50%;
- pointer-events: none;
- background: conic-gradient(
- from 0deg,
- var(--accent-color),
- var(--accent-color-2),
- var(--accent-color-3),
- var(--accent-color)
- );
- opacity: 0.18;
- filter: blur(6px) saturate(1.05);
-}
-
-.album-cover {
- width: 100%;
- height: 100%;
- border-radius: 50%;
- object-fit: cover;
- transition: var(--transition);
- filter: brightness(0.9) contrast(1.1);
-}
-
-.vinyl-overlay {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border-radius: 50%;
- background: radial-gradient(
- circle at center,
- transparent 12%,
- rgba(0, 0, 0, 0.8) 12%,
- rgba(0, 0, 0, 0.8) 15%,
- transparent 15%,
- transparent 20%,
- rgba(0, 0, 0, 0.15) 20%,
- rgba(0, 0, 0, 0.15) 20.5%,
- transparent 20.5%,
- transparent 25%,
- rgba(0, 0, 0, 0.1) 25%,
- rgba(0, 0, 0, 0.1) 25.5%,
- transparent 25.5%,
- transparent 30%,
- rgba(0, 0, 0, 0.08) 30%,
- rgba(0, 0, 0, 0.08) 30.5%,
- transparent 30.5%,
- transparent 35%,
- rgba(0, 0, 0, 0.06) 35%,
- rgba(0, 0, 0, 0.06) 35.5%,
- transparent 35.5%,
- transparent 40%,
- rgba(0, 0, 0, 0.05) 40%,
- rgba(0, 0, 0, 0.05) 40.5%,
- transparent 40.5%,
- transparent 85%,
- rgba(0, 0, 0, 0.1) 85%,
- rgba(0, 0, 0, 0.2) 100%
- );
- pointer-events: none;
- box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.1);
-}
-
-.vinyl-center {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 12px;
- height: 12px;
- background: radial-gradient(circle at center, #1a1a1a 0%, #333 50%, #1a1a1a 100%);
- border-radius: 50%;
- transform: translate(-50%, -50%);
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.5), inset 0 0 3px rgba(0, 0, 0, 0.8), inset 0 0 1px rgba(255, 255, 255, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-@keyframes vinyl-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-.album-cover {
- animation: vinyl-spin 6s linear infinite;
- animation-play-state: paused;
-}
-
-.album-cover.playing {
- animation-play-state: running;
-}
-
-.vinyl-overlay {
- animation: vinyl-spin 3s linear infinite;
- animation-play-state: paused;
-}
-
-.album-cover.playing + .vinyl-overlay {
- animation-play-state: running;
-}
-
-.song-content {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 4px;
- min-width: 0;
-}
-
-.song-info {
- display: flex;
- flex-direction: column;
- gap: 2px;
-}
-
-.song-title {
- font-size: 14px;
- font-weight: 600;
- color: var(--text-primary);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- line-height: 1.2;
- transition: var(--theme-transition);
-}
-
-.song-artist {
- font-size: 12px;
- color: var(--text-secondary);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- line-height: 1.2;
- transition: var(--theme-transition);
-}
-
-.lyrics-container {
- min-height: 20px;
- display: flex;
- flex-direction: column;
- gap: 2px;
-}
-
-.lyrics-container.hidden {
- display: none;
-}
-
-.lyric-line {
- font-size: 11px;
- color: #5697e3;
- line-height: 1.4;
- transition: var(--transition);
- opacity: 0.8;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- width: 100%;
- transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
-}
-
-.lyric-line.current {
- color: #5697e3;
- font-weight: 600;
- opacity: 1;
- text-shadow: 0 0 8px rgba(86, 151, 227, 0.3);
- animation: lyric-glow 2s ease-in-out infinite alternate;
-
- animation: none;
- opacity: 0;
- transform: translateY(10px);
- animation: lyric-fade-in 0.2s ease-out forwards;
-}
-
-.lyric-line.translation {
- font-size: 10px;
- color: var(--text-muted);
- opacity: 0.7;
- margin-top: 1px;
- transition: var(--theme-transition);
-}
-
-.lyric-line.translation.current {
- color: var(--text-secondary);
- opacity: 0.9;
- font-weight: 500;
- transition: var(--theme-transition);
-}
-
-@keyframes lyric-fade-in {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-@keyframes lyric-glow {
- 0% {
- text-shadow: 0 0 8px rgba(86, 151, 227, 0.3);
- }
- 100% {
- text-shadow: 0 0 12px rgba(86, 151, 227, 0.5);
- }
-}
-
-.lyric-line.word-lyric {
- position: relative;
- display: inline-block;
- max-width: 100%;
- white-space: nowrap;
- overflow: hidden;
-}
-
-.lyric-word-line {
- position: relative;
- display: inline-block;
- transition: transform 0.1s ease-out;
-}
-
-.lyric-line.word-lyric-active {
- -webkit-mask: linear-gradient(90deg, #000 0%, #000 var(--line-progress, 0%), transparent var(--line-progress, 0%));
- mask: linear-gradient(90deg, #000 0%, #000 var(--line-progress, 0%), transparent var(--line-progress, 0%));
-}
-
-.netease-mini-player[data-theme="dark"] .lyric-line.word-lyric-active {
- text-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
-}
-
-.lyric-line.word-lyric::after {
- content: "";
- position: absolute;
- bottom: 0;
- left: 0;
- width: var(--line-progress, 0%);
- height: 2px;
- background: var(--accent-gradient);
- border-radius: 1px;
- transition: width 0.1s ease;
-}
-
-.controls {
- display: flex;
- align-items: center;
- gap: 6px;
- flex-shrink: 0;
-}
-
-.control-btn {
- width: 32px;
- height: 32px;
- border: none;
- background: var(--primary-bg);
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- transition: var(--transition);
- box-shadow: 2px 2px 4px var(--shadow-dark), -2px -2px 4px var(--shadow-light);
- font-size: 12px;
- color: var(--text-primary);
- position: relative;
-}
-
-.control-btn:hover {
- box-shadow: inset 1px 1px 2px var(--shadow-dark), inset -1px -1px 2px var(--shadow-light);
- background: var(--secondary-bg);
-}
-
-.play-btn {
- width: 30px;
- height: 30px;
- font-size: 14px;
- background: var(--primary-bg);
- box-shadow: 2px 2px 4px var(--shadow-dark), -2px -2px 4px var(--shadow-light);
-}
-
-.play-icon,
-.pause-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 14px;
- color: var(--text-primary);
- transition: var(--transition);
-}
-
-.play-btn:hover {
- background: var(--secondary-bg);
- box-shadow: inset 1px 1px 2px var(--shadow-dark), inset -1px -1px 2px var(--shadow-light);
-}
-
-.control-btn:active {
- box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
- background: var(--accent-gradient);
- color: white;
-}
-
-.control-btn:active span {
- color: white;
-}
-
-.play-icon {
- margin-left: 2px;
-}
-
-.volume-icon {
- font-size: 10px;
- color: var(--text-secondary);
- margin-right: 2px;
- flex-shrink: 0;
-}
-
-.player-bottom {
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 8px;
- width: 100%;
-}
-
-.progress-container {
- display: flex;
- align-items: center;
- gap: 6px;
- flex: 1;
- max-width: var(--progress-max, 60%);
-}
-
-.netease-mini-player[data-embed="true"] .progress-container {
- max-width: calc(100% - 60px);
- flex: 1;
-}
-
-.time-display {
- font-size: 10px;
- color: var(--text-muted);
- white-space: nowrap;
- min-width: 35px;
- text-align: center;
-}
-
-.progress-bar-container {
- flex: 1;
- height: 4px;
- background: var(--secondary-bg);
- border-radius: 2px;
- position: relative;
- cursor: pointer;
- box-shadow: inset 1px 1px 2px var(--shadow-dark), inset -1px -1px 2px var(--shadow-light);
-}
-
-.progress-bar {
- height: 100%;
- background: var(--accent-gradient);
- border-radius: 2px;
- width: 0%;
- transition: width 0.1s ease;
- position: relative;
-}
-
-.progress-bar::after {
- content: "";
- position: absolute;
- right: -2px;
- top: 50%;
- width: 8px;
- height: 8px;
- background: var(--accent-color-3);
- border-radius: 50%;
- transform: translateY(-50%);
- box-shadow: 0 0 8px rgba(0, 210, 255, 0.6), 1px 1px 2px var(--shadow-dark), -1px -1px 2px var(--shadow-light);
-}
-
-.bottom-controls {
- display: flex;
- align-items: center;
- gap: 8px;
- justify-content: flex-end;
- flex-shrink: 0;
- min-width: 0;
-}
-
-.volume-container {
- display: flex;
- align-items: center;
- gap: 4px;
- flex-shrink: 0;
-}
-
-.volume-slider-container {
- display: flex;
- align-items: center;
- width: 40px;
-}
-
-.volume-slider {
- flex: 1;
- height: 3px;
- background: var(--secondary-bg);
- border-radius: 2px;
- position: relative;
- cursor: pointer;
- box-shadow: inset 1px 1px 2px var(--shadow-dark), inset -1px -1px 2px var(--shadow-light);
-}
-
-.volume-bar {
- height: 100%;
- background: var(--accent-color);
- border-radius: 2px;
- width: 70%;
- transition: width 0.1s ease;
-}
-
-.netease-mini-player svg {
- width: 100%;
- height: 100%;
- fill: currentColor;
- display: block;
-}
-
-.control-btn svg {
- width: 18px;
- height: 18px;
-}
-
-.feature-btn svg {
- width: 16px;
- height: 16px;
-}
-
-.volume-icon svg {
- width: 14px;
- height: 14px;
-}
-
-.play-btn svg {
- width: 22px;
- height: 22px;
- margin-left: 2px;
-}
-
-.play-btn .pause-icon svg {
- margin-left: 0;
-}
-
-.control-btn,
-.feature-btn {
- font-size: 0;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.minimize-btn svg {
- width: 18px;
- height: 18px;
-}
-
-.sr-visually-hidden {
- position: absolute !important;
- width: 1px !important;
- height: 1px !important;
- margin: -1px !important;
- overflow: hidden !important;
- clip: rect(0 0 0 0) !important;
- clip-path: inset(50%) !important;
- white-space: nowrap !important;
- border: 0 !important;
- padding: 0 !important;
-}
-
-.netease-mini-player.mobile-env .volume-container {
- position: absolute;
- width: 1px;
- height: 1px;
- margin: -1px;
- overflow: hidden;
- clip: rect(0 0 0 0);
- clip-path: inset(50%);
- white-space: nowrap;
- border: 0;
- padding: 0;
- opacity: 0;
- pointer-events: none;
-}
-.netease-mini-player.mobile-env .progress-container {
- --progress-max: calc(60% + var(--volume-total-width, 60px));
-}
-.netease-mini-player.mobile-env[data-embed="true"] .progress-container {
- max-width: calc(100% - 60px + var(--volume-total-width, 60px));
-}
-
-@media (hover: none) and (pointer: coarse) {
- .netease-mini-player.mobile-env .bottom-controls {
- gap: 10px;
- }
-}
-
-.feature-btn {
- width: 20px;
- height: 20px;
- border: none;
- background: transparent;
- cursor: pointer;
- color: var(--text-muted);
- transition: var(--transition);
- font-size: 11px;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
-}
-
-.feature-btn:hover {
- color: var(--accent-color);
-}
-
-.feature-btn.active {
- color: var(--accent-color);
-}
-
-.netease-mini-player[data-embed="true"] .list-btn {
- display: none !important;
-}
-
-.netease-mini-player[data-embed="true"] .minimize-btn {
- display: none !important;
-}
-
-.netease-mini-player[data-position="static"] .minimize-btn {
- display: none !important;
-}
-
-.netease-mini-player[data-embed="true"] .prev-btn,
-.netease-mini-player[data-embed="true"] .next-btn {
- display: none !important;
-}
-
-.netease-mini-player[data-embed="true"] .playlist-container {
- display: none !important;
-}
-
-.netease-mini-player-embed .list-btn,
-.netease-mini-player-embed .minimize-btn,
-.netease-mini-player-embed .prev-btn,
-.netease-mini-player-embed .next-btn {
- display: none !important;
-}
-
-.netease-mini-player-embed .playlist-container {
- display: none !important;
-}
-
-.playlist-container {
- position: absolute;
- left: 0;
- right: 0;
- top: 100%;
- background: var(--primary-bg);
- border-radius: var(--border-radius);
- box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
- max-height: 200px;
- overflow: hidden;
- z-index: 1001;
- opacity: 0;
- transform: translateY(-10px);
- visibility: hidden;
- transition: all 0.3s ease;
- margin-top: 8px;
-}
-
-.playlist-container::before {
- content: "";
- position: absolute;
- inset: 0;
- border-radius: inherit;
- pointer-events: none;
- background: radial-gradient(circle at 20% 15%, var(--flow-color-1) 0%, transparent 60%),
- radial-gradient(circle at 75% 30%, var(--flow-color-2) 0%, transparent 55%),
- radial-gradient(circle at 35% 85%, var(--flow-color-3) 0%, transparent 55%),
- radial-gradient(circle at 25% 70%, var(--flow-color-4) 0%, transparent 50%),
- radial-gradient(circle at 85% 75%, var(--flow-color-5) 0%, transparent 50%);
- opacity: var(--playlist-flow-opacity);
- background-size: 220% 220%, 220% 220%, 220% 220%, 220% 220%, 220% 220%;
- background-position: 0% 0%, 100% 0%, 0% 100%, 20% 80%, 80% 20%;
- filter: saturate(1.02) brightness(1.01);
- transform: scale(1);
- animation: flow-breathe var(--flow-speed) ease-in-out infinite;
- animation-play-state: paused;
-}
-
-.netease-mini-player.player-playing .playlist-container::before {
- animation-play-state: running;
-}
-
-.playlist-container.expand-up {
- top: auto;
- bottom: 100%;
- margin-top: 0;
- margin-bottom: 8px;
- transform: translateY(10px);
-}
-
-.playlist-container.expand-up.show {
- transform: translateY(0);
-}
-
-.playlist-container.show {
- opacity: 1;
- transform: translateY(0);
- visibility: visible;
-}
-
-.playlist-content {
- max-height: 200px;
- overflow-y: auto;
- &::-webkit-scrollbar {
- display: none;
- }
- scrollbar-width: none;
-}
-
-.playlist-item {
- padding: 8px 12px;
- border-bottom: 1px solid rgba(0, 0, 0, 0.05);
- cursor: pointer;
- transition: var(--transition);
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.playlist-item:last-child {
- border-bottom: none;
-}
-
-.playlist-item:hover {
- background: rgba(255, 107, 53, 0.08);
- box-shadow: inset 1px 1px 2px var(--shadow-dark), inset -1px -1px 2px var(--shadow-light);
- transform: translateX(2px);
- transition: all 0.2s ease;
-}
-
-.playlist-item.active {
- background: rgba(255, 107, 53, 0.15);
- color: var(--accent-color);
- font-weight: 600;
-}
-
-.playlist-item-index {
- font-size: 10px;
- color: var(--text-muted);
- min-width: 16px;
- text-align: center;
-}
-
-.playlist-item.active .playlist-item-index {
- color: var(--accent-color);
-}
-
-.playlist-item-info {
- flex: 1;
- min-width: 0;
-}
-
-.playlist-item-name {
- font-size: 11px;
- color: var(--text-primary);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- line-height: 1.2;
-}
-
-.playlist-item-artist {
- font-size: 10px;
- color: var(--text-muted);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-top: 1px;
-}
-
-.playlist-item.active .playlist-item-name,
-.playlist-item.active .playlist-item-artist {
- color: var(--accent-color);
-}
-
-.loading {
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--text-muted);
- font-size: 12px;
-}
-
-.loading::after {
- content: "";
- width: 12px;
- height: 12px;
- border: 2px solid var(--secondary-bg);
- border-top: 2px solid var(--accent-color);
- border-radius: 50%;
- animation: spin 1s linear infinite;
- margin-left: 8px;
-}
-
-.playlist-item-cover {
- width: 36px;
- height: 36px;
- border-radius: 8px;
- object-fit: cover;
- flex-shrink: 0;
- background: var(--secondary-bg);
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-@keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
-
-.error {
- color: #ff4757;
- font-size: 12px;
- text-align: center;
-}
-
-@media (max-width: 480px) {
- .netease-mini-player {
- width: 100%;
- max-width: 360px;
- height: 100px;
- padding: 8px;
- margin: 0 auto;
- }
-
- .album-cover-container {
- width: 50px;
- height: 50px;
- }
-
- .song-title {
- font-size: 12px;
- }
-
- .song-artist {
- font-size: 10px;
- }
-
- .lyric-line {
- font-size: 10px;
- }
-
- .control-btn {
- width: 28px;
- height: 28px;
- font-size: 10px;
- }
-
- .play-btn {
- width: 32px;
- height: 32px;
- font-size: 12px;
- }
-
- .time-display {
- font-size: 9px;
- }
-
- .feature-btn {
- width: 20px;
- height: 20px;
- font-size: 10px;
- }
-
- .volume-slider-container {
- width: 50px;
- }
-}
-
-.netease-mini-player.dragging {
- cursor: grabbing;
- -webkit-user-select: none;
- user-select: none;
- pointer-events: none;
- opacity: 0.8;
- transform: scale(0.95);
- z-index: 9999;
- transition: none;
-}
-
-.netease-mini-player {
- opacity: 1;
-}
-
-.netease-mini-player.minimized.idle {
- opacity: 0.7;
-}
-
-.netease-mini-player.minimized.fading-out {
- animation: player-fade-out var(--opacity-duration-down, 0.6s)
- var(--opacity-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
-}
-
-.netease-mini-player.minimized.fading-in {
- animation: player-fade-in var(--opacity-duration-up, 0.25s) var(--opacity-ease-in, cubic-bezier(0.4, 0, 0.2, 1))
- forwards;
-}
-
-@keyframes player-fade-out {
- from {
- opacity: 1;
- }
- to {
- opacity: 0.7;
- }
-}
-
-@keyframes player-fade-in {
- from {
- opacity: 0.7;
- }
- to {
- opacity: 1;
- }
-}
-
-.netease-mini-player.minimized.docked-right {
- transform: translateX(calc(50% + var(--dock-gap, 20px)));
-}
-.netease-mini-player.minimized.docked-left {
- transform: translateX(calc(-50% - var(--dock-gap, 20px)));
-}
-
-.netease-mini-player.minimized.fading-out.docked-right {
- animation: player-fade-out var(--opacity-duration-down, 0.6s)
- var(--opacity-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards,
- player-dock-right var(--dock-duration, 0.45s) var(--dock-ease-out, cubic-bezier(0.18, 0.9, 0.2, 1)) forwards;
-}
-.netease-mini-player.minimized.fading-out.docked-left {
- animation: player-fade-out var(--opacity-duration-down, 0.6s)
- var(--opacity-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards,
- player-dock-left var(--dock-duration, 0.45s) var(--dock-ease-out, cubic-bezier(0.18, 0.9, 0.2, 1)) forwards;
-}
-
-.netease-mini-player.minimized.popping-right {
- animation: player-popout-right var(--popout-duration, 0.28s) var(--popout-ease, cubic-bezier(0.4, 0, 0.2, 1))
- forwards;
-}
-.netease-mini-player.minimized.popping-left {
- animation: player-popout-left var(--popout-duration, 0.28s) var(--popout-ease, cubic-bezier(0.4, 0, 0.2, 1))
- forwards;
-}
-
-@keyframes player-dock-right {
- from {
- transform: translateX(0);
- }
- to {
- transform: translateX(calc(50% + var(--dock-gap, 20px)));
- }
-}
-@keyframes player-dock-left {
- from {
- transform: translateX(0);
- }
- to {
- transform: translateX(calc(-50% - var(--dock-gap, 20px)));
- }
-}
-@keyframes player-popout-right {
- from {
- transform: translateX(calc(50% + var(--dock-gap, 20px)));
- }
- to {
- transform: translateX(0);
- }
-}
-@keyframes player-popout-left {
- from {
- transform: translateX(calc(-50% - var(--dock-gap, 20px)));
- }
- to {
- transform: translateX(0);
- }
-}
-
-.netease-mini-player .feature-btn,
-.netease-mini-player .control-btn {
- font-size: 0;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.netease-mini-player .bottom-controls .feature-btn,
-.netease-mini-player .volume-icon {
- color: var(--text-primary);
-}
-
-.netease-mini-player .control-btn svg {
- width: 18px;
- height: 18px;
- display: block;
- fill: currentColor;
-}
-
-.netease-mini-player .play-btn svg {
- width: 20px;
- height: 20px;
-}
-
-.netease-mini-player .play-icon {
- margin-left: 0;
-}
-
-.netease-mini-player .bottom-controls .feature-btn svg,
-.netease-mini-player .volume-icon svg {
- width: 16px;
- height: 16px;
- display: block;
- fill: currentColor;
-}
-
-.netease-mini-player .volume-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 14px;
- height: 14px;
- font-size: 0;
-}
-
-.netease-mini-player .feature-btn {
- width: auto;
- height: auto;
-}
-
-.netease-mini-player .bottom-controls {
- gap: 6px;
-}
-
-.netease-mini-player .volume-icon svg {
- width: 18px;
- height: 18px;
-}
-
-.netease-mini-player.minimized .minimize-btn {
- font-size: 0;
-}
+/**
+ * [NMPv2] NeteaseMiniPlayer v2 CSS
+ * Lightweight Player Component Based on NetEase Cloud Music API
+ *
+ * Copyright 2025 BHCN STUDIO & 北海的佰川（ImBHCN[numakkiyu]）
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:root {
+ --primary-bg: #fafafa;
+ --secondary-bg: #f0f0f0;
+ --bg-color: #fafafa;
+ --accent-color: #ff6b35;
+ --accent-color-2: #7a66ff;
+ --accent-color-3: #00c2ff;
+ --accent-gradient: linear-gradient(
+ 135deg,
+ var(--accent-color) 0%,
+ var(--accent-color-2) 50%,
+ var(--accent-color-3) 100%
+ );
+ --text-primary: #333333;
+ --text-secondary: #666666;
+ --text-muted: #999999;
+ --shadow-light: rgba(255, 255, 255, 0.9);
+ --shadow-dark: rgba(0, 0, 0, 0.1);
+ --shadow-inset: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
+ --shadow-outset: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
+ --border-radius: 12px;
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ --theme-transition:
+ background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+
+ --flow-color-1: rgba(255, 107, 53, 0.32);
+ --flow-color-2: rgba(86, 151, 227, 0.26);
+ --flow-color-3: rgba(255, 209, 102, 0.26);
+ --flow-color-4: rgba(122, 102, 255, 0.28);
+ --flow-color-5: rgba(0, 194, 255, 0.22);
+ --flow-opacity: 0.45;
+ --flow-speed: 10s;
+ --volume-total-width: 60px;
+ --playlist-flow-opacity: 0.25;
+}
+
+.netease-mini-player[data-theme="dark"] {
+ --primary-bg: #1e1e1e;
+ --secondary-bg: #2a2a2a;
+ --bg-color: #1e1e1e;
+ --accent-color: #ff8a50;
+ --accent-color-2: #6c63ff;
+ --accent-color-3: #00d4ff;
+ --accent-gradient: linear-gradient(
+ 135deg,
+ var(--accent-color) 0%,
+ var(--accent-color-2) 50%,
+ var(--accent-color-3) 100%
+ );
+ --text-primary: #e0e0e0;
+ --text-secondary: #b0b0b0;
+ --text-muted: #808080;
+ --shadow-light: rgba(255, 255, 255, 0.05);
+ --shadow-dark: rgba(0, 0, 0, 0.4);
+ --shadow-inset: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
+ --shadow-outset: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
+
+ --flow-color-1: rgba(255, 138, 80, 0.28);
+ --flow-color-2: rgba(86, 151, 227, 0.24);
+ --flow-color-3: rgba(140, 100, 255, 0.26);
+ --flow-color-4: rgba(124, 110, 255, 0.24);
+ --flow-color-5: rgba(0, 212, 255, 0.22);
+ --flow-opacity: 0.36;
+ --flow-speed: 12s;
+}
+
+@media (prefers-color-scheme: dark) {
+ .netease-mini-player[data-theme="auto"] {
+ --primary-bg: #1e1e1e;
+ --secondary-bg: #2a2a2a;
+ --bg-color: #1e1e1e;
+ --accent-color: #ff8a50;
+ --accent-color-2: #6c63ff;
+ --accent-color-3: #00d4ff;
+ --accent-gradient: linear-gradient(
+ 135deg,
+ var(--accent-color) 0%,
+ var(--accent-color-2) 50%,
+ var(--accent-color-3) 100%
+ );
+ --text-primary: #e0e0e0;
+ --text-secondary: #b0b0b0;
+ --text-muted: #808080;
+ --shadow-light: rgba(255, 255, 255, 0.05);
+ --shadow-dark: rgba(0, 0, 0, 0.4);
+ --shadow-inset: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
+ --shadow-outset: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
+
+ --flow-color-1: rgba(255, 138, 80, 0.28);
+ --flow-color-2: rgba(86, 151, 227, 0.24);
+ --flow-color-3: rgba(140, 100, 255, 0.26);
+ --flow-color-4: rgba(124, 110, 255, 0.24);
+ --flow-color-5: rgba(0, 212, 255, 0.22);
+ --flow-opacity: 0.36;
+ --flow-speed: 12s;
+ }
+}
+@media (prefers-color-scheme: light) {
+ .netease-mini-player[data-theme="auto"] {
+ --primary-bg: #fafafa;
+ --secondary-bg: #f0f0f0;
+ --bg-color: #fafafa;
+ --accent-color: #ff6b35;
+ --accent-color-2: #7a66ff;
+ --accent-color-3: #00c2ff;
+ --accent-gradient: linear-gradient(
+ 135deg,
+ var(--accent-color) 0%,
+ var(--accent-color-2) 50%,
+ var(--accent-color-3) 100%
+ );
+ --text-primary: #333333;
+ --text-secondary: #666666;
+ --text-muted: #999999;
+ --shadow-light: rgba(255, 255, 255, 0.9);
+ --shadow-dark: rgba(0, 0, 0, 0.1);
+ --shadow-inset: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
+ --shadow-outset: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
+
+ --flow-color-1: rgba(255, 107, 53, 0.32);
+ --flow-color-2: rgba(86, 151, 227, 0.26);
+ --flow-color-3: rgba(255, 209, 102, 0.26);
+ --flow-color-4: rgba(122, 102, 255, 0.28);
+ --flow-color-5: rgba(0, 194, 255, 0.22);
+ --flow-opacity: 0.45;
+ --flow-speed: 10s;
+ }
+}
+
+.netease-mini-player {
+ width: 400px;
+ height: 120px;
+ background: var(--bg-color);
+ border-radius: 16px;
+ padding: 12px;
+ box-shadow: var(--shadow-outset);
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ position: relative;
+ overflow: visible;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ transition:
+ width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ var(--theme-transition);
+ background:
+ 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.netease-mini-player::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ pointer-events: none;
+ background:
+ radial-gradient(circle at 15% 20%, var(--flow-color-1) 0%, transparent 60%),
+ radial-gradient(circle at 80% 25%, var(--flow-color-2) 0%, transparent 60%),
+ radial-gradient(circle at 30% 85%, var(--flow-color-3) 0%, transparent 60%),
+ radial-gradient(circle at 10% 75%, var(--flow-color-4) 0%, transparent 55%),
+ radial-gradient(circle at 85% 80%, var(--flow-color-5) 0%, transparent 55%);
+ opacity: var(--flow-opacity);
+ background-size:
+ 220% 220%,
+ 220% 220%,
+ 220% 220%,
+ 220% 220%,
+ 220% 220%;
+ background-position:
+ 0% 0%,
+ 100% 0%,
+ 0% 100%,
+ 20% 80%,
+ 80% 20%;
+ filter: saturate(1.02) brightness(1.01);
+ transform: scale(1);
+ animation: flow-breathe var(--flow-speed) ease-in-out infinite;
+ animation-play-state: paused;
+}
+
+.netease-mini-player.player-playing::before {
+ animation-play-state: running;
+}
+
+@keyframes flow-breathe {
+ 0% {
+ background-position:
+ 0% 0%,
+ 100% 0%,
+ 0% 100%,
+ 20% 80%,
+ 80% 20%;
+ transform: scale(1);
+ filter: saturate(1.02) brightness(1.01);
+ }
+ 50% {
+ background-position:
+ 100% 50%,
+ 0% 100%,
+ 50% 0%,
+ 35% 65%,
+ 65% 35%;
+ transform: scale(1.03);
+ filter: saturate(1.15) brightness(1.06);
+ }
+ 100% {
+ background-position:
+ 0% 100%,
+ 100% 50%,
+ 100% 0%,
+ 20% 80%,
+ 80% 20%;
+ transform: scale(1);
+ filter: saturate(1.02) brightness(1.01);
+ }
+}
+
+.netease-mini-player.minimized {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ padding: 0;
+ background:
+ radial-gradient(120px 120px at 30% 30%, rgba(255, 138, 80, 0.25), transparent 60%),
+ radial-gradient(120px 120px at 70% 70%, rgba(0, 210, 255, 0.22), transparent 60%),
+ linear-gradient(135deg, #151515, #1e1e1e);
+ box-shadow:
+ 4px 4px 12px rgba(0, 0, 0, 0.4),
+ -2px -2px 8px rgba(255, 255, 255, 0.1),
+ inset 0 0 20px rgba(0, 0, 0, 0.3);
+}
+
+.netease-mini-player.minimized .song-content,
+.netease-mini-player.minimized .controls,
+.netease-mini-player.minimized .playlist-container {
+ opacity: 0;
+ visibility: hidden;
+ transition:
+ opacity 0.3s ease,
+ visibility 0.3s ease;
+}
+
+.netease-mini-player.minimized .player-bottom {
+ opacity: 0;
+ visibility: hidden;
+ transition:
+ opacity 0.3s ease,
+ visibility 0.3s ease;
+}
+
+.netease-mini-player.minimized .minimize-btn {
+ opacity: 1 !important;
+ visibility: visible !important;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 1000;
+ background: rgba(0, 0, 0, 0.7);
+ border-radius: 50%;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ transition: all 0.3s ease;
+}
+
+.netease-mini-player.minimized .minimize-btn:hover {
+ background: rgba(0, 0, 0, 0.9);
+ transform: translate(-50%, -50%) scale(1.1);
+}
+
+.netease-mini-player .song-content,
+.netease-mini-player .controls,
+.netease-mini-player .player-bottom {
+ opacity: 1;
+ visibility: visible;
+ transition:
+ opacity 0.3s ease 0.2s,
+ visibility 0.3s ease 0.2s;
+}
+
+.netease-mini-player.minimized .album-cover-container {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ border-radius: 50%;
+ box-shadow: none;
+ transition:
+ width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.netease-mini-player.minimized .album-cover {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ filter: brightness(0.8) contrast(1.1);
+ transition:
+ width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.netease-mini-player.minimized .vinyl-overlay {
+ background: radial-gradient(
+ circle at center,
+ transparent 15%,
+ rgba(0, 0, 0, 0.1) 15%,
+ rgba(0, 0, 0, 0.1) 16%,
+ transparent 16%,
+ transparent 25%,
+ rgba(0, 0, 0, 0.15) 25%,
+ rgba(0, 0, 0, 0.15) 26%,
+ transparent 26%,
+ transparent 35%,
+ rgba(0, 0, 0, 0.1) 35%,
+ rgba(0, 0, 0, 0.1) 36%,
+ transparent 36%,
+ transparent 45%,
+ rgba(0, 0, 0, 0.15) 45%,
+ rgba(0, 0, 0, 0.15) 46%,
+ transparent 46%
+ );
+ box-shadow:
+ inset 0 0 15px rgba(0, 0, 0, 0.5),
+ inset 0 0 5px rgba(0, 0, 0, 0.8);
+ transition:
+ background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.netease-mini-player.minimized .vinyl-center {
+ width: 16px;
+ height: 16px;
+ background: radial-gradient(circle at 30% 30%, #666 0%, #333 50%, #111 100%);
+ box-shadow:
+ 0 0 3px rgba(0, 0, 0, 0.8),
+ inset 1px 1px 2px rgba(255, 255, 255, 0.2);
+ border: 1px solid #000;
+ transition:
+ width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+ border 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.netease-mini-player[data-position="top-left"] {
+ position: fixed;
+ top: 20px;
+ left: 20px;
+ z-index: 1000;
+}
+
+.netease-mini-player[data-position="top-right"] {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ z-index: 1000;
+}
+
+.netease-mini-player[data-position="bottom-left"] {
+ position: fixed;
+ bottom: 20px;
+ left: 20px;
+ z-index: 1000;
+}
+
+.netease-mini-player[data-position="bottom-right"] {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ z-index: 1000;
+}
+
+.netease-mini-player[data-position="static"] {
+ position: relative;
+}
+
+.player-main {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex: 1;
+}
+
+.album-cover-container {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ position: relative;
+ flex-shrink: 0;
+ background: var(--secondary-bg);
+ box-shadow:
+ inset 2px 2px 4px var(--shadow-dark),
+ inset -2px -2px 4px var(--shadow-light),
+ 2px 2px 6px rgba(0, 0, 0, 0.2),
+ -1px -1px 3px rgba(255, 255, 255, 0.1);
+ overflow: hidden;
+ cursor: pointer;
+ border: 2px solid rgba(0, 0, 0, 0.1);
+}
+.album-cover-container::after {
+ content: "";
+ position: absolute;
+ inset: -4px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: conic-gradient(
+ from 0deg,
+ var(--accent-color),
+ var(--accent-color-2),
+ var(--accent-color-3),
+ var(--accent-color)
+ );
+ opacity: 0.18;
+ filter: blur(6px) saturate(1.05);
+}
+
+.album-cover {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
+ transition: var(--transition);
+ filter: brightness(0.9) contrast(1.1);
+}
+
+.vinyl-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: radial-gradient(
+ circle at center,
+ transparent 12%,
+ rgba(0, 0, 0, 0.8) 12%,
+ rgba(0, 0, 0, 0.8) 15%,
+ transparent 15%,
+ transparent 20%,
+ rgba(0, 0, 0, 0.15) 20%,
+ rgba(0, 0, 0, 0.15) 20.5%,
+ transparent 20.5%,
+ transparent 25%,
+ rgba(0, 0, 0, 0.1) 25%,
+ rgba(0, 0, 0, 0.1) 25.5%,
+ transparent 25.5%,
+ transparent 30%,
+ rgba(0, 0, 0, 0.08) 30%,
+ rgba(0, 0, 0, 0.08) 30.5%,
+ transparent 30.5%,
+ transparent 35%,
+ rgba(0, 0, 0, 0.06) 35%,
+ rgba(0, 0, 0, 0.06) 35.5%,
+ transparent 35.5%,
+ transparent 40%,
+ rgba(0, 0, 0, 0.05) 40%,
+ rgba(0, 0, 0, 0.05) 40.5%,
+ transparent 40.5%,
+ transparent 85%,
+ rgba(0, 0, 0, 0.1) 85%,
+ rgba(0, 0, 0, 0.2) 100%
+ );
+ pointer-events: none;
+ box-shadow:
+ inset 0 0 10px rgba(0, 0, 0, 0.3),
+ inset 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+.vinyl-center {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 12px;
+ height: 12px;
+ background: radial-gradient(circle at center, #1a1a1a 0%, #333 50%, #1a1a1a 100%);
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ box-shadow:
+ 0 0 4px rgba(0, 0, 0, 0.5),
+ inset 0 0 3px rgba(0, 0, 0, 0.8),
+ inset 0 0 1px rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+@keyframes vinyl-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.album-cover {
+ animation: vinyl-spin 6s linear infinite;
+ animation-play-state: paused;
+}
+
+.album-cover.playing {
+ animation-play-state: running;
+}
+
+.vinyl-overlay {
+ animation: vinyl-spin 3s linear infinite;
+ animation-play-state: paused;
+}
+
+.album-cover.playing + .vinyl-overlay {
+ animation-play-state: running;
+}
+
+.song-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ min-width: 0;
+}
+
+.song-info {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.song-title {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text-primary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 1.2;
+ transition: var(--theme-transition);
+}
+
+.song-artist {
+ font-size: 12px;
+ color: var(--text-secondary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 1.2;
+ transition: var(--theme-transition);
+}
+
+.lyrics-container {
+ min-height: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.lyrics-container.hidden {
+ display: none;
+}
+
+.lyric-line {
+ font-size: 11px;
+ color: #5697e3;
+ line-height: 1.4;
+ transition: var(--transition);
+ opacity: 0.8;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 100%;
+ transition:
+ opacity 0.2s ease-in-out,
+ transform 0.2s ease-in-out;
+}
+
+.lyric-line.current {
+ color: #5697e3;
+ font-weight: 600;
+ opacity: 1;
+ text-shadow: 0 0 8px rgba(86, 151, 227, 0.3);
+ animation: lyric-glow 2s ease-in-out infinite alternate;
+
+ animation: none;
+ opacity: 0;
+ transform: translateY(10px);
+ animation: lyric-fade-in 0.2s ease-out forwards;
+}
+
+.lyric-line.translation {
+ font-size: 10px;
+ color: var(--text-muted);
+ opacity: 0.7;
+ margin-top: 1px;
+ transition: var(--theme-transition);
+}
+
+.lyric-line.translation.current {
+ color: var(--text-secondary);
+ opacity: 0.9;
+ font-weight: 500;
+ transition: var(--theme-transition);
+}
+
+@keyframes lyric-fade-in {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes lyric-glow {
+ 0% {
+ text-shadow: 0 0 8px rgba(86, 151, 227, 0.3);
+ }
+ 100% {
+ text-shadow: 0 0 12px rgba(86, 151, 227, 0.5);
+ }
+}
+
+.lyric-line.word-lyric {
+ position: relative;
+ display: inline-block;
+ max-width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.lyric-word-line {
+ position: relative;
+ display: inline-block;
+ transition: transform 0.1s ease-out;
+}
+
+.lyric-line.word-lyric-active {
+ -webkit-mask: linear-gradient(
+ 90deg,
+ #000 0%,
+ #000 var(--line-progress, 0%),
+ transparent var(--line-progress, 0%)
+ );
+ mask: linear-gradient(
+ 90deg,
+ #000 0%,
+ #000 var(--line-progress, 0%),
+ transparent var(--line-progress, 0%)
+ );
+}
+
+.netease-mini-player[data-theme="dark"] .lyric-line.word-lyric-active {
+ text-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
+}
+
+.lyric-line.word-lyric::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: var(--line-progress, 0%);
+ height: 2px;
+ background: var(--accent-gradient);
+ border-radius: 1px;
+ transition: width 0.1s ease;
+}
+
+.controls {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ flex-shrink: 0;
+}
+
+.control-btn {
+ width: 32px;
+ height: 32px;
+ border: none;
+ background: var(--primary-bg);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: var(--transition);
+ box-shadow:
+ 2px 2px 4px var(--shadow-dark),
+ -2px -2px 4px var(--shadow-light);
+ font-size: 12px;
+ color: var(--text-primary);
+ position: relative;
+}
+
+.control-btn:hover {
+ box-shadow:
+ inset 1px 1px 2px var(--shadow-dark),
+ inset -1px -1px 2px var(--shadow-light);
+ background: var(--secondary-bg);
+}
+
+.play-btn {
+ width: 30px;
+ height: 30px;
+ font-size: 14px;
+ background: var(--primary-bg);
+ box-shadow:
+ 2px 2px 4px var(--shadow-dark),
+ -2px -2px 4px var(--shadow-light);
+}
+
+.play-icon,
+.pause-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ color: var(--text-primary);
+ transition: var(--transition);
+}
+
+.play-btn:hover {
+ background: var(--secondary-bg);
+ box-shadow:
+ inset 1px 1px 2px var(--shadow-dark),
+ inset -1px -1px 2px var(--shadow-light);
+}
+
+.control-btn:active {
+ box-shadow:
+ inset 2px 2px 4px var(--shadow-dark),
+ inset -2px -2px 4px var(--shadow-light);
+ background: var(--accent-gradient);
+ color: white;
+}
+
+.control-btn:active span {
+ color: white;
+}
+
+.play-icon {
+ margin-left: 2px;
+}
+
+.volume-icon {
+ font-size: 10px;
+ color: var(--text-secondary);
+ margin-right: 2px;
+ flex-shrink: 0;
+}
+
+.player-bottom {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+}
+
+.progress-container {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ flex: 1;
+ max-width: var(--progress-max, 60%);
+}
+
+.netease-mini-player[data-embed="true"] .progress-container {
+ max-width: calc(100% - 60px);
+ flex: 1;
+}
+
+.time-display {
+ font-size: 10px;
+ color: var(--text-muted);
+ white-space: nowrap;
+ min-width: 35px;
+ text-align: center;
+}
+
+.progress-bar-container {
+ flex: 1;
+ height: 4px;
+ background: var(--secondary-bg);
+ border-radius: 2px;
+ position: relative;
+ cursor: pointer;
+ box-shadow:
+ inset 1px 1px 2px var(--shadow-dark),
+ inset -1px -1px 2px var(--shadow-light);
+}
+
+.progress-bar {
+ height: 100%;
+ background: var(--accent-gradient);
+ border-radius: 2px;
+ width: 0%;
+ transition: width 0.1s ease;
+ position: relative;
+}
+
+.progress-bar::after {
+ content: "";
+ position: absolute;
+ right: -2px;
+ top: 50%;
+ width: 8px;
+ height: 8px;
+ background: var(--accent-color-3);
+ border-radius: 50%;
+ transform: translateY(-50%);
+ box-shadow:
+ 0 0 8px rgba(0, 210, 255, 0.6),
+ 1px 1px 2px var(--shadow-dark),
+ -1px -1px 2px var(--shadow-light);
+}
+
+.bottom-controls {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ justify-content: flex-end;
+ flex-shrink: 0;
+ min-width: 0;
+}
+
+.volume-container {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ flex-shrink: 0;
+}
+
+.volume-slider-container {
+ display: flex;
+ align-items: center;
+ width: 40px;
+}
+
+.volume-slider {
+ flex: 1;
+ height: 3px;
+ background: var(--secondary-bg);
+ border-radius: 2px;
+ position: relative;
+ cursor: pointer;
+ box-shadow:
+ inset 1px 1px 2px var(--shadow-dark),
+ inset -1px -1px 2px var(--shadow-light);
+}
+
+.volume-bar {
+ height: 100%;
+ background: var(--accent-color);
+ border-radius: 2px;
+ width: 70%;
+ transition: width 0.1s ease;
+}
+
+.netease-mini-player svg {
+ width: 100%;
+ height: 100%;
+ fill: currentColor;
+ display: block;
+}
+
+.control-btn svg {
+ width: 18px;
+ height: 18px;
+}
+
+.feature-btn svg {
+ width: 16px;
+ height: 16px;
+}
+
+.volume-icon svg {
+ width: 14px;
+ height: 14px;
+}
+
+.play-btn svg {
+ width: 22px;
+ height: 22px;
+ margin-left: 2px;
+}
+
+.play-btn .pause-icon svg {
+ margin-left: 0;
+}
+
+.control-btn,
+.feature-btn {
+ font-size: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.minimize-btn svg {
+ width: 18px;
+ height: 18px;
+}
+
+.sr-visually-hidden {
+ position: absolute !important;
+ width: 1px !important;
+ height: 1px !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ clip: rect(0 0 0 0) !important;
+ clip-path: inset(50%) !important;
+ white-space: nowrap !important;
+ border: 0 !important;
+ padding: 0 !important;
+}
+
+.netease-mini-player.mobile-env .volume-container {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ white-space: nowrap;
+ border: 0;
+ padding: 0;
+ opacity: 0;
+ pointer-events: none;
+}
+.netease-mini-player.mobile-env .progress-container {
+ --progress-max: calc(60% + var(--volume-total-width, 60px));
+}
+.netease-mini-player.mobile-env[data-embed="true"] .progress-container {
+ max-width: calc(100% - 60px + var(--volume-total-width, 60px));
+}
+
+@media (hover: none) and (pointer: coarse) {
+ .netease-mini-player.mobile-env .bottom-controls {
+ gap: 10px;
+ }
+}
+
+.feature-btn {
+ width: 20px;
+ height: 20px;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ color: var(--text-muted);
+ transition: var(--transition);
+ font-size: 11px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.feature-btn:hover {
+ color: var(--accent-color);
+}
+
+.feature-btn.active {
+ color: var(--accent-color);
+}
+
+.netease-mini-player[data-embed="true"] .list-btn {
+ display: none !important;
+}
+
+.netease-mini-player[data-embed="true"] .minimize-btn {
+ display: none !important;
+}
+
+.netease-mini-player[data-position="static"] .minimize-btn {
+ display: none !important;
+}
+
+.netease-mini-player[data-embed="true"] .prev-btn,
+.netease-mini-player[data-embed="true"] .next-btn {
+ display: none !important;
+}
+
+.netease-mini-player[data-embed="true"] .playlist-container {
+ display: none !important;
+}
+
+.netease-mini-player-embed .list-btn,
+.netease-mini-player-embed .minimize-btn,
+.netease-mini-player-embed .prev-btn,
+.netease-mini-player-embed .next-btn {
+ display: none !important;
+}
+
+.netease-mini-player-embed .playlist-container {
+ display: none !important;
+}
+
+.playlist-container {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 100%;
+ background: var(--primary-bg);
+ border-radius: var(--border-radius);
+ box-shadow:
+ 4px 4px 8px var(--shadow-dark),
+ -4px -4px 8px var(--shadow-light);
+ max-height: 200px;
+ overflow: hidden;
+ z-index: 1001;
+ opacity: 0;
+ transform: translateY(-10px);
+ visibility: hidden;
+ transition: all 0.3s ease;
+ margin-top: 8px;
+}
+
+.playlist-container::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ pointer-events: none;
+ background:
+ radial-gradient(circle at 20% 15%, var(--flow-color-1) 0%, transparent 60%),
+ radial-gradient(circle at 75% 30%, var(--flow-color-2) 0%, transparent 55%),
+ radial-gradient(circle at 35% 85%, var(--flow-color-3) 0%, transparent 55%),
+ radial-gradient(circle at 25% 70%, var(--flow-color-4) 0%, transparent 50%),
+ radial-gradient(circle at 85% 75%, var(--flow-color-5) 0%, transparent 50%);
+ opacity: var(--playlist-flow-opacity);
+ background-size:
+ 220% 220%,
+ 220% 220%,
+ 220% 220%,
+ 220% 220%,
+ 220% 220%;
+ background-position:
+ 0% 0%,
+ 100% 0%,
+ 0% 100%,
+ 20% 80%,
+ 80% 20%;
+ filter: saturate(1.02) brightness(1.01);
+ transform: scale(1);
+ animation: flow-breathe var(--flow-speed) ease-in-out infinite;
+ animation-play-state: paused;
+}
+
+.netease-mini-player.player-playing .playlist-container::before {
+ animation-play-state: running;
+}
+
+.playlist-container.expand-up {
+ top: auto;
+ bottom: 100%;
+ margin-top: 0;
+ margin-bottom: 8px;
+ transform: translateY(10px);
+}
+
+.playlist-container.expand-up.show {
+ transform: translateY(0);
+}
+
+.playlist-container.show {
+ opacity: 1;
+ transform: translateY(0);
+ visibility: visible;
+}
+
+.playlist-content {
+ max-height: 200px;
+ overflow-y: auto;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ scrollbar-width: none;
+}
+
+.playlist-item {
+ padding: 8px 12px;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+ cursor: pointer;
+ transition: var(--transition);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.playlist-item:last-child {
+ border-bottom: none;
+}
+
+.playlist-item:hover {
+ background: rgba(255, 107, 53, 0.08);
+ box-shadow:
+ inset 1px 1px 2px var(--shadow-dark),
+ inset -1px -1px 2px var(--shadow-light);
+ transform: translateX(2px);
+ transition: all 0.2s ease;
+}
+
+.playlist-item.active {
+ background: rgba(255, 107, 53, 0.15);
+ color: var(--accent-color);
+ font-weight: 600;
+}
+
+.playlist-item-index {
+ font-size: 10px;
+ color: var(--text-muted);
+ min-width: 16px;
+ text-align: center;
+}
+
+.playlist-item.active .playlist-item-index {
+ color: var(--accent-color);
+}
+
+.playlist-item-info {
+ flex: 1;
+ min-width: 0;
+}
+
+.playlist-item-name {
+ font-size: 11px;
+ color: var(--text-primary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 1.2;
+}
+
+.playlist-item-artist {
+ font-size: 10px;
+ color: var(--text-muted);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-top: 1px;
+}
+
+.playlist-item.active .playlist-item-name,
+.playlist-item.active .playlist-item-artist {
+ color: var(--accent-color);
+}
+
+.loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--text-muted);
+ font-size: 12px;
+}
+
+.loading::after {
+ content: "";
+ width: 12px;
+ height: 12px;
+ border: 2px solid var(--secondary-bg);
+ border-top: 2px solid var(--accent-color);
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ margin-left: 8px;
+}
+
+.playlist-item-cover {
+ width: 36px;
+ height: 36px;
+ border-radius: 8px;
+ object-fit: cover;
+ flex-shrink: 0;
+ background: var(--secondary-bg);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.error {
+ color: #ff4757;
+ font-size: 12px;
+ text-align: center;
+}
+
+@media (max-width: 480px) {
+ .netease-mini-player {
+ width: 100%;
+ max-width: 360px;
+ height: 100px;
+ padding: 8px;
+ margin: 0 auto;
+ }
+
+ .album-cover-container {
+ width: 50px;
+ height: 50px;
+ }
+
+ .song-title {
+ font-size: 12px;
+ }
+
+ .song-artist {
+ font-size: 10px;
+ }
+
+ .lyric-line {
+ font-size: 10px;
+ }
+
+ .control-btn {
+ width: 28px;
+ height: 28px;
+ font-size: 10px;
+ }
+
+ .play-btn {
+ width: 32px;
+ height: 32px;
+ font-size: 12px;
+ }
+
+ .time-display {
+ font-size: 9px;
+ }
+
+ .feature-btn {
+ width: 20px;
+ height: 20px;
+ font-size: 10px;
+ }
+
+ .volume-slider-container {
+ width: 50px;
+ }
+}
+
+.netease-mini-player.dragging {
+ cursor: grabbing;
+ -webkit-user-select: none;
+ user-select: none;
+ pointer-events: none;
+ opacity: 0.8;
+ transform: scale(0.95);
+ z-index: 9999;
+ transition: none;
+}
+
+.netease-mini-player {
+ opacity: 1;
+}
+
+.netease-mini-player.minimized.idle {
+ opacity: 0.7;
+}
+
+.netease-mini-player.minimized.fading-out {
+ animation: player-fade-out var(--opacity-duration-down, 0.6s)
+ var(--opacity-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
+}
+
+.netease-mini-player.minimized.fading-in {
+ animation: player-fade-in var(--opacity-duration-up, 0.25s)
+ var(--opacity-ease-in, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
+}
+
+@keyframes player-fade-out {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0.7;
+ }
+}
+
+@keyframes player-fade-in {
+ from {
+ opacity: 0.7;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.netease-mini-player.minimized.docked-right {
+ transform: translateX(calc(50% + var(--dock-gap, 20px)));
+}
+.netease-mini-player.minimized.docked-left {
+ transform: translateX(calc(-50% - var(--dock-gap, 20px)));
+}
+
+.netease-mini-player.minimized.fading-out.docked-right {
+ animation:
+ player-fade-out var(--opacity-duration-down, 0.6s)
+ var(--opacity-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards,
+ player-dock-right var(--dock-duration, 0.45s)
+ var(--dock-ease-out, cubic-bezier(0.18, 0.9, 0.2, 1)) forwards;
+}
+.netease-mini-player.minimized.fading-out.docked-left {
+ animation:
+ player-fade-out var(--opacity-duration-down, 0.6s)
+ var(--opacity-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards,
+ player-dock-left var(--dock-duration, 0.45s)
+ var(--dock-ease-out, cubic-bezier(0.18, 0.9, 0.2, 1)) forwards;
+}
+
+.netease-mini-player.minimized.popping-right {
+ animation: player-popout-right var(--popout-duration, 0.28s)
+ var(--popout-ease, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
+}
+.netease-mini-player.minimized.popping-left {
+ animation: player-popout-left var(--popout-duration, 0.28s)
+ var(--popout-ease, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
+}
+
+@keyframes player-dock-right {
+ from {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(calc(50% + var(--dock-gap, 20px)));
+ }
+}
+@keyframes player-dock-left {
+ from {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(calc(-50% - var(--dock-gap, 20px)));
+ }
+}
+@keyframes player-popout-right {
+ from {
+ transform: translateX(calc(50% + var(--dock-gap, 20px)));
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+@keyframes player-popout-left {
+ from {
+ transform: translateX(calc(-50% - var(--dock-gap, 20px)));
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+.netease-mini-player .feature-btn,
+.netease-mini-player .control-btn {
+ font-size: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.netease-mini-player .bottom-controls .feature-btn,
+.netease-mini-player .volume-icon {
+ color: var(--text-primary);
+}
+
+.netease-mini-player .control-btn svg {
+ width: 18px;
+ height: 18px;
+ display: block;
+ fill: currentColor;
+}
+
+.netease-mini-player .play-btn svg {
+ width: 20px;
+ height: 20px;
+}
+
+.netease-mini-player .play-icon {
+ margin-left: 0;
+}
+
+.netease-mini-player .bottom-controls .feature-btn svg,
+.netease-mini-player .volume-icon svg {
+ width: 16px;
+ height: 16px;
+ display: block;
+ fill: currentColor;
+}
+
+.netease-mini-player .volume-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 14px;
+ height: 14px;
+ font-size: 0;
+}
+
+.netease-mini-player .feature-btn {
+ width: auto;
+ height: auto;
+}
+
+.netease-mini-player .bottom-controls {
+ gap: 6px;
+}
+
+.netease-mini-player .volume-icon svg {
+ width: 18px;
+ height: 18px;
+}
+
+.netease-mini-player.minimized .minimize-btn {
+ font-size: 0;
+}
diff --git a/public/js/netease-mini-player-v2.js b/public/js/netease-mini-player-v2.js
index 0b672d3..db025a9 100644
--- a/public/js/netease-mini-player-v2.js
+++ b/public/js/netease-mini-player-v2.js
@@ -17,147 +17,147 @@
* limitations under the License.
*/
(() => {
- try {
- const s = document.currentScript;
- if (s && s.src) {
- fetch(s.src, { mode: "cors", credentials: "omit" }).catch(() => {});
- }
- } catch (e) {}
+ try {
+ const s = document.currentScript;
+ if (s && s.src) {
+ fetch(s.src, { mode: "cors", credentials: "omit" }).catch(() => {});
+ }
+ } catch (e) {}
})();
const GlobalAudioManager = {
- currentPlayer: null,
- setCurrent(player) {
- if (this.currentPlayer && this.currentPlayer !== player) {
- this.currentPlayer.pause();
- }
- this.currentPlayer = player;
- },
+ currentPlayer: null,
+ setCurrent(player) {
+ if (this.currentPlayer && this.currentPlayer !== player) {
+ this.currentPlayer.pause();
+ }
+ this.currentPlayer = player;
+ },
};
const ICONS = {
- prev: ``,
- next: ``,
- play: ``,
- pause: ``,
- volume: ``,
- lyrics: ``,
- list: ``,
- minimize: ``,
- maximize: ``,
- loopList: ``,
- loopSingle: ``,
- shuffle: ``,
+ prev: ``,
+ next: ``,
+ play: ``,
+ pause: ``,
+ volume: ``,
+ lyrics: ``,
+ list: ``,
+ minimize: ``,
+ maximize: ``,
+ loopList: ``,
+ loopSingle: ``,
+ shuffle: ``,
};
class NeteaseMiniPlayer {
- constructor(element) {
- this.element = element;
- this.element.neteasePlayer = this;
- this.config = this.parseConfig();
- this.currentSong = null;
- this.playlist = [];
- this.currentIndex = 0;
- this.audio = new Audio();
- this.wasPlayingBeforeHidden = false;
- this.isPlaying = false;
- this.currentTime = 0;
- this.duration = 0;
- this.volume = 0.7;
- this.lyrics = [];
- this.currentLyricIndex = -1;
- this.showLyrics = this.config.lyric;
- this.cache = new Map();
- this.init();
- this.playMode = "list";
- this.shuffleHistory = [];
- this.idleTimeout = null;
- this.idleDelay = 5000;
- this.isIdle = false;
+ constructor(element) {
+ this.element = element;
+ this.element.neteasePlayer = this;
+ this.config = this.parseConfig();
+ this.currentSong = null;
+ this.playlist = [];
+ this.currentIndex = 0;
+ this.audio = new Audio();
+ this.wasPlayingBeforeHidden = false;
+ this.isPlaying = false;
+ this.currentTime = 0;
+ this.duration = 0;
+ this.volume = 0.7;
+ this.lyrics = [];
+ this.currentLyricIndex = -1;
+ this.showLyrics = this.config.lyric;
+ this.cache = new Map();
+ this.init();
+ this.playMode = "list";
+ this.shuffleHistory = [];
+ this.idleTimeout = null;
+ this.idleDelay = 5000;
+ this.isIdle = false;
+ }
+ parseConfig() {
+ const element = this.element;
+ const position = element.dataset.position || "static";
+ const validPositions = ["static", "top-left", "top-right", "bottom-left", "bottom-right"];
+ const finalPosition = validPositions.includes(position) ? position : "static";
+ const defaultMinimized = element.dataset.defaultMinimized === "true";
+
+ const embedValue = element.getAttribute("data-embed") || element.dataset.embed;
+ const isEmbed = embedValue === "true" || embedValue === true;
+
+ const autoPauseAttr = element.getAttribute("data-auto-pause") ?? element.dataset.autoPause;
+ const autoPauseDisabled = autoPauseAttr === "true" || autoPauseAttr === true;
+
+ const apiUrls = JSON.parse(element.dataset.apiUrls) || apiUrls === [];
+
+ // 读取 autoPause 配置
+ let autoPause = true; // 默认启用自动暂停
+ if (window.__NETEASE_MUSIC_CONFIG__?.autoPause !== undefined) {
+ autoPause = window.__NETEASE_MUSIC_CONFIG__.autoPause;
+ } else if (element.dataset.autoPause !== undefined) {
+ autoPause = element.dataset.autoPause !== "false";
}
- parseConfig() {
- const element = this.element;
- const position = element.dataset.position || "static";
- const validPositions = ["static", "top-left", "top-right", "bottom-left", "bottom-right"];
- const finalPosition = validPositions.includes(position) ? position : "static";
- const defaultMinimized = element.dataset.defaultMinimized === "true";
- const embedValue = element.getAttribute("data-embed") || element.dataset.embed;
- const isEmbed = embedValue === "true" || embedValue === true;
-
- const autoPauseAttr = element.getAttribute("data-auto-pause") ?? element.dataset.autoPause;
- const autoPauseDisabled = autoPauseAttr === "true" || autoPauseAttr === true;
-
- const apiUrls = JSON.parse(element.dataset.apiUrls) || apiUrls === [];
-
- // 读取 autoPause 配置
- let autoPause = true; // 默认启用自动暂停
- if (window.__NETEASE_MUSIC_CONFIG__?.autoPause !== undefined) {
- autoPause = window.__NETEASE_MUSIC_CONFIG__.autoPause;
- } else if (element.dataset.autoPause !== undefined) {
- autoPause = element.dataset.autoPause !== "false";
- }
-
- return {
- embed: isEmbed,
- autoplay: element.dataset.autoplay === "true",
- playlistId: element.dataset.playlistId,
- songId: element.dataset.songId,
- position: finalPosition,
- lyric: element.dataset.lyric !== "false",
- theme: element.dataset.theme || "auto",
- size: element.dataset.size || "compact",
- defaultMinimized: defaultMinimized,
- autoPauseDisabled: autoPauseDisabled,
- autoPause: autoPause,
- apiUrls: apiUrls,
- };
+ return {
+ embed: isEmbed,
+ autoplay: element.dataset.autoplay === "true",
+ playlistId: element.dataset.playlistId,
+ songId: element.dataset.songId,
+ position: finalPosition,
+ lyric: element.dataset.lyric !== "false",
+ theme: element.dataset.theme || "auto",
+ size: element.dataset.size || "compact",
+ defaultMinimized: defaultMinimized,
+ autoPauseDisabled: autoPauseDisabled,
+ autoPause: autoPause,
+ apiUrls: apiUrls,
+ };
+ }
+ async init() {
+ if (this.config.embed) {
+ this.element.setAttribute("data-embed", "true");
}
- async init() {
- if (this.config.embed) {
- this.element.setAttribute("data-embed", "true");
- }
- this.element.setAttribute("data-position", this.config.position);
+ this.element.setAttribute("data-position", this.config.position);
- if (this.config.embed) {
- this.element.classList.add("netease-mini-player-embed");
- }
-
- this.initTheme();
- this.createPlayerHTML();
- this.applyResponsiveControls?.();
- this.setupEnvListeners?.();
- this.bindEvents();
- this.setupAudioEvents();
- try {
- if (this.config.embed) {
- if (this.config.songId) {
- await this.loadSingleSong(this.config.songId);
- } else if (this.config.playlistId) {
- await this.loadPlaylist(this.config.playlistId);
- this.playlist = [this.playlist[0]];
- }
- } else {
- if (this.config.playlistId) {
- await this.loadPlaylist(this.config.playlistId);
- } else if (this.config.songId) {
- await this.loadSingleSong(this.config.songId);
- }
- }
- if (this.playlist.length > 0) {
- await this.loadCurrentSong();
- if (this.config.autoplay && !this.config.embed) {
- this.play();
- }
- }
- if (this.config.defaultMinimized && !this.config.embed && this.config.position !== "static") {
- this.toggleMinimize();
- }
- } catch (error) {
- console.error("播放器初始化失败:", error);
- this.showError("加载失败，请稍后重试");
- }
+ if (this.config.embed) {
+ this.element.classList.add("netease-mini-player-embed");
}
- createPlayerHTML() {
- this.element.innerHTML = `
+
+ this.initTheme();
+ this.createPlayerHTML();
+ this.applyResponsiveControls?.();
+ this.setupEnvListeners?.();
+ this.bindEvents();
+ this.setupAudioEvents();
+ try {
+ if (this.config.embed) {
+ if (this.config.songId) {
+ await this.loadSingleSong(this.config.songId);
+ } else if (this.config.playlistId) {
+ await this.loadPlaylist(this.config.playlistId);
+ this.playlist = [this.playlist[0]];
+ }
+ } else {
+ if (this.config.playlistId) {
+ await this.loadPlaylist(this.config.playlistId);
+ } else if (this.config.songId) {
+ await this.loadSingleSong(this.config.songId);
+ }
+ }
+ if (this.playlist.length > 0) {
+ await this.loadCurrentSong();
+ if (this.config.autoplay && !this.config.embed) {
+ this.play();
+ }
+ }
+ if (this.config.defaultMinimized && !this.config.embed && this.config.position !== "static") {
+ this.toggleMinimize();
+ }
+ } catch (error) {
+ console.error("播放器初始化失败:", error);
+ this.showError("加载失败，请稍后重试");
+ }
+ }
+ createPlayerHTML() {
+ this.element.innerHTML = `
![专辑封面]()
@@ -177,18 +177,18 @@ class NeteaseMiniPlayer {
@@ -211,19 +211,19 @@ class NeteaseMiniPlayer {
${ICONS.lyrics}
${
- !this.config.embed
- ? `${ICONS.loopList}`
- : ""
+ !this.config.embed
+ ? `${ICONS.loopList}`
+ : ""
}
${
- !this.config.embed
- ? `${ICONS.list}`
- : ""
+ !this.config.embed
+ ? `${ICONS.list}`
+ : ""
}
${
- !this.config.embed
- ? `${ICONS.minimize}`
- : ""
+ !this.config.embed
+ ? `${ICONS.minimize}`
+ : ""
}
@@ -231,925 +231,942 @@ class NeteaseMiniPlayer {
`;
- this.elements = {
- albumCover: this.element.querySelector(".album-cover"),
- albumCoverContainer: this.element.querySelector(".album-cover-container"),
- songTitle: this.element.querySelector(".song-title"),
- songArtist: this.element.querySelector(".song-artist"),
- lyricsContainer: this.element.querySelector(".lyrics-container"),
- lyricLine: this.element.querySelector(".lyric-line.original"),
- lyricTranslation: this.element.querySelector(".lyric-line.translation"),
- playBtn: this.element.querySelector(".play-btn"),
- playIcon: this.element.querySelector(".play-icon"),
- pauseIcon: this.element.querySelector(".pause-icon"),
- prevBtn: this.element.querySelector(".prev-btn"),
- nextBtn: this.element.querySelector(".next-btn"),
- progressContainer: this.element.querySelector(".progress-bar-container"),
- progressBar: this.element.querySelector(".progress-bar"),
- currentTime: this.element.querySelector(".current-time"),
- totalTime: this.element.querySelector(".total-time"),
- volumeContainer: this.element.querySelector(".volume-container"),
- volumeSlider: this.element.querySelector(".volume-slider"),
- volumeBar: this.element.querySelector(".volume-bar"),
- volumeIcon: this.element.querySelector(".volume-icon"),
- lyricsBtn: this.element.querySelector(".lyrics-btn"),
- listBtn: this.element.querySelector(".list-btn"),
- minimizeBtn: this.element.querySelector(".minimize-btn"),
- playlistContainer: this.element.querySelector(".playlist-container"),
- playlistContent: this.element.querySelector(".playlist-content"),
- };
- this.isMinimized = false;
- this.elements.loopModeBtn = this.element.querySelector(".loop-mode-btn");
+ this.elements = {
+ albumCover: this.element.querySelector(".album-cover"),
+ albumCoverContainer: this.element.querySelector(".album-cover-container"),
+ songTitle: this.element.querySelector(".song-title"),
+ songArtist: this.element.querySelector(".song-artist"),
+ lyricsContainer: this.element.querySelector(".lyrics-container"),
+ lyricLine: this.element.querySelector(".lyric-line.original"),
+ lyricTranslation: this.element.querySelector(".lyric-line.translation"),
+ playBtn: this.element.querySelector(".play-btn"),
+ playIcon: this.element.querySelector(".play-icon"),
+ pauseIcon: this.element.querySelector(".pause-icon"),
+ prevBtn: this.element.querySelector(".prev-btn"),
+ nextBtn: this.element.querySelector(".next-btn"),
+ progressContainer: this.element.querySelector(".progress-bar-container"),
+ progressBar: this.element.querySelector(".progress-bar"),
+ currentTime: this.element.querySelector(".current-time"),
+ totalTime: this.element.querySelector(".total-time"),
+ volumeContainer: this.element.querySelector(".volume-container"),
+ volumeSlider: this.element.querySelector(".volume-slider"),
+ volumeBar: this.element.querySelector(".volume-bar"),
+ volumeIcon: this.element.querySelector(".volume-icon"),
+ lyricsBtn: this.element.querySelector(".lyrics-btn"),
+ listBtn: this.element.querySelector(".list-btn"),
+ minimizeBtn: this.element.querySelector(".minimize-btn"),
+ playlistContainer: this.element.querySelector(".playlist-container"),
+ playlistContent: this.element.querySelector(".playlist-content"),
+ };
+ this.isMinimized = false;
+ this.elements.loopModeBtn = this.element.querySelector(".loop-mode-btn");
+ }
+ bindEvents() {
+ this.elements.playBtn.addEventListener("click", () => this.togglePlay());
+ if (this.elements.prevBtn) {
+ this.elements.prevBtn.addEventListener("click", () => this.previousSong());
}
- bindEvents() {
- this.elements.playBtn.addEventListener("click", () => this.togglePlay());
- if (this.elements.prevBtn) {
- this.elements.prevBtn.addEventListener("click", () => this.previousSong());
+ if (this.elements.nextBtn) {
+ this.elements.nextBtn.addEventListener("click", () => this.nextSong());
+ }
+ if (this.elements.loopModeBtn) {
+ this.elements.loopModeBtn.addEventListener("click", () => this.togglePlayMode());
+ }
+ this.elements.albumCoverContainer.addEventListener("click", () => {
+ if (this.element.classList.contains("minimized")) {
+ this.elements.albumCoverContainer.classList.toggle("expanded");
+ return;
+ }
+ if (this.currentSong && this.currentSong.id) {
+ const songUrl = `https://music.163.com/song?id=${this.currentSong.id}`;
+ window.open(songUrl, "_blank", "noopener,noreferrer");
+ }
+ });
+ let isDragging = false;
+ this.elements.progressContainer.addEventListener("mousedown", (e) => {
+ isDragging = true;
+ this.seekTo(e);
+ });
+ document.addEventListener("mousemove", (e) => {
+ if (isDragging) {
+ this.seekTo(e);
+ }
+ });
+ document.addEventListener("mouseup", () => {
+ isDragging = false;
+ });
+ this.elements.progressContainer.addEventListener("click", (e) => this.seekTo(e));
+ let isVolumesDragging = false;
+ this.elements.volumeSlider.addEventListener("mousedown", (e) => {
+ isVolumesDragging = true;
+ this.setVolume(e);
+ });
+ document.addEventListener("mousemove", (e) => {
+ if (isVolumesDragging) {
+ this.setVolume(e);
+ }
+ });
+ document.addEventListener("mouseup", () => {
+ isVolumesDragging = false;
+ });
+ this.elements.volumeSlider.addEventListener("click", (e) => this.setVolume(e));
+ this.elements.lyricsBtn.addEventListener("click", () => this.toggleLyrics());
+ if (this.elements.listBtn) {
+ this.elements.listBtn.addEventListener("click", () => this.togglePlaylist());
+ }
+ if (this.elements.minimizeBtn) {
+ this.elements.minimizeBtn.addEventListener("click", () => this.toggleMinimize());
+ }
+ document.addEventListener("click", (e) => {
+ if (
+ this.elements.playlistContainer &&
+ this.elements.playlistContainer.classList.contains("show")
+ ) {
+ if (!this.element.contains(e.target)) {
+ this.togglePlaylist(false);
}
- if (this.elements.nextBtn) {
- this.elements.nextBtn.addEventListener("click", () => this.nextSong());
+ }
+ });
+ if (this.config.position !== "static" && !this.config.embed) {
+ this.setupDragAndDrop();
+ }
+ // 标签页非激活时自动暂停的处理
+ if (typeof document.hidden !== "undefined" && this.config.autoPause) {
+ document.addEventListener("visibilitychange", () => {
+ if (document.hidden && this.isPlaying) {
+ this.wasPlayingBeforeHidden = true;
+ this.pause();
+ } else if (!document.hidden && this.wasPlayingBeforeHidden) {
+ this.play();
+ this.wasPlayingBeforeHidden = false;
}
- if (this.elements.loopModeBtn) {
- this.elements.loopModeBtn.addEventListener("click", () => this.togglePlayMode());
- }
- this.elements.albumCoverContainer.addEventListener("click", () => {
- if (this.element.classList.contains("minimized")) {
- this.elements.albumCoverContainer.classList.toggle("expanded");
- return;
- }
- if (this.currentSong && this.currentSong.id) {
- const songUrl = `https://music.163.com/song?id=${this.currentSong.id}`;
- window.open(songUrl, "_blank", "noopener,noreferrer");
- }
- });
- let isDragging = false;
- this.elements.progressContainer.addEventListener("mousedown", (e) => {
- isDragging = true;
- this.seekTo(e);
- });
- document.addEventListener("mousemove", (e) => {
- if (isDragging) {
- this.seekTo(e);
- }
- });
- document.addEventListener("mouseup", () => {
- isDragging = false;
- });
- this.elements.progressContainer.addEventListener("click", (e) => this.seekTo(e));
- let isVolumesDragging = false;
- this.elements.volumeSlider.addEventListener("mousedown", (e) => {
- isVolumesDragging = true;
- this.setVolume(e);
- });
- document.addEventListener("mousemove", (e) => {
- if (isVolumesDragging) {
- this.setVolume(e);
- }
- });
- document.addEventListener("mouseup", () => {
- isVolumesDragging = false;
- });
- this.elements.volumeSlider.addEventListener("click", (e) => this.setVolume(e));
- this.elements.lyricsBtn.addEventListener("click", () => this.toggleLyrics());
- if (this.elements.listBtn) {
- this.elements.listBtn.addEventListener("click", () => this.togglePlaylist());
- }
- if (this.elements.minimizeBtn) {
- this.elements.minimizeBtn.addEventListener("click", () => this.toggleMinimize());
- }
- document.addEventListener("click", (e) => {
- if (this.elements.playlistContainer && this.elements.playlistContainer.classList.contains("show")) {
- if (!this.element.contains(e.target)) {
- this.togglePlaylist(false);
- }
- }
- });
- if (this.config.position !== "static" && !this.config.embed) {
- this.setupDragAndDrop();
- }
- // 标签页非激活时自动暂停的处理
- if (typeof document.hidden !== "undefined" && this.config.autoPause) {
- document.addEventListener("visibilitychange", () => {
- if (document.hidden && this.isPlaying) {
- this.wasPlayingBeforeHidden = true;
- this.pause();
- } else if (!document.hidden && this.wasPlayingBeforeHidden) {
- this.play();
- this.wasPlayingBeforeHidden = false;
- }
- });
- }
-
- this.element.addEventListener("mouseenter", () => {
- this.restoreOpacity();
- });
- this.element.addEventListener("mouseleave", () => {
- this.startIdleTimer();
- });
- this.applyIdlePolicyOnInit();
+ });
}
- startIdleTimer() {
- this.clearIdleTimer();
- if (!this.shouldEnableIdleOpacity()) return;
- this.idleTimeout = setTimeout(() => {
- this.triggerFadeOut();
- }, this.idleDelay);
- }
+ this.element.addEventListener("mouseenter", () => {
+ this.restoreOpacity();
+ });
+ this.element.addEventListener("mouseleave", () => {
+ this.startIdleTimer();
+ });
+ this.applyIdlePolicyOnInit();
+ }
- clearIdleTimer() {
- if (this.idleTimeout) {
- clearTimeout(this.idleTimeout);
- this.idleTimeout = null;
- }
- }
+ startIdleTimer() {
+ this.clearIdleTimer();
+ if (!this.shouldEnableIdleOpacity()) return;
+ this.idleTimeout = setTimeout(() => {
+ this.triggerFadeOut();
+ }, this.idleDelay);
+ }
- triggerFadeOut() {
- if (!this.shouldEnableIdleOpacity()) return;
- if (this.isIdle) return;
- this.isIdle = true;
- this.element.classList.remove("fading-in");
- const side = this.getDockSide();
- if (side) {
- this.element.classList.add(`docked-${side}`);
- }
- this.element.classList.add("fading-out");
- const onEnd = (e) => {
- if (e.animationName !== "player-fade-out") return;
- this.element.classList.remove("fading-out");
- this.element.classList.add("idle");
- this.element.removeEventListener("animationend", onEnd);
- };
- this.element.addEventListener("animationend", onEnd);
+ clearIdleTimer() {
+ if (this.idleTimeout) {
+ clearTimeout(this.idleTimeout);
+ this.idleTimeout = null;
}
+ }
- restoreOpacity() {
- this.clearIdleTimer();
- const side = this.getDockSide();
- const hasDock = side ? this.element.classList.contains(`docked-${side}`) : false;
- if (hasDock) {
- const popAnim = side === "right" ? "player-popout-right" : "player-popout-left";
- this.element.classList.add(`popping-${side}`);
- const onPopEnd = (e) => {
- if (e.animationName !== popAnim) return;
- this.element.removeEventListener("animationend", onPopEnd);
- this.element.classList.remove(`popping-${side}`);
- this.element.classList.remove(`docked-${side}`);
- if (this.isIdle) {
- this.isIdle = false;
- }
- this.element.classList.remove("idle", "fading-out");
- this.element.classList.add("fading-in");
- const onEndIn = (ev) => {
- if (ev.animationName !== "player-fade-in") return;
- this.element.classList.remove("fading-in");
- this.element.removeEventListener("animationend", onEndIn);
- };
- this.element.addEventListener("animationend", onEndIn);
- };
- this.element.addEventListener("animationend", onPopEnd);
- return;
+ triggerFadeOut() {
+ if (!this.shouldEnableIdleOpacity()) return;
+ if (this.isIdle) return;
+ this.isIdle = true;
+ this.element.classList.remove("fading-in");
+ const side = this.getDockSide();
+ if (side) {
+ this.element.classList.add(`docked-${side}`);
+ }
+ this.element.classList.add("fading-out");
+ const onEnd = (e) => {
+ if (e.animationName !== "player-fade-out") return;
+ this.element.classList.remove("fading-out");
+ this.element.classList.add("idle");
+ this.element.removeEventListener("animationend", onEnd);
+ };
+ this.element.addEventListener("animationend", onEnd);
+ }
+
+ restoreOpacity() {
+ this.clearIdleTimer();
+ const side = this.getDockSide();
+ const hasDock = side ? this.element.classList.contains(`docked-${side}`) : false;
+ if (hasDock) {
+ const popAnim = side === "right" ? "player-popout-right" : "player-popout-left";
+ this.element.classList.add(`popping-${side}`);
+ const onPopEnd = (e) => {
+ if (e.animationName !== popAnim) return;
+ this.element.removeEventListener("animationend", onPopEnd);
+ this.element.classList.remove(`popping-${side}`);
+ this.element.classList.remove(`docked-${side}`);
+ if (this.isIdle) {
+ this.isIdle = false;
}
- if (!this.isIdle) return;
- this.isIdle = false;
this.element.classList.remove("idle", "fading-out");
this.element.classList.add("fading-in");
const onEndIn = (ev) => {
- if (ev.animationName !== "player-fade-in") return;
- this.element.classList.remove("fading-in");
- this.element.removeEventListener("animationend", onEndIn);
+ if (ev.animationName !== "player-fade-in") return;
+ this.element.classList.remove("fading-in");
+ this.element.removeEventListener("animationend", onEndIn);
};
this.element.addEventListener("animationend", onEndIn);
+ };
+ this.element.addEventListener("animationend", onPopEnd);
+ return;
}
+ if (!this.isIdle) return;
+ this.isIdle = false;
+ this.element.classList.remove("idle", "fading-out");
+ this.element.classList.add("fading-in");
+ const onEndIn = (ev) => {
+ if (ev.animationName !== "player-fade-in") return;
+ this.element.classList.remove("fading-in");
+ this.element.removeEventListener("animationend", onEndIn);
+ };
+ this.element.addEventListener("animationend", onEndIn);
+ }
- shouldEnableIdleOpacity() {
- return this.isMinimized === true;
- }
+ shouldEnableIdleOpacity() {
+ return this.isMinimized === true;
+ }
- applyIdlePolicyOnInit() {
- if (!this.shouldEnableIdleOpacity()) {
- this.clearIdleTimer();
- this.isIdle = false;
- this.element.classList.remove(
- "idle",
- "fading-in",
- "fading-out",
- "docked-left",
- "docked-right",
- "popping-left",
- "popping-right"
- );
- }
+ applyIdlePolicyOnInit() {
+ if (!this.shouldEnableIdleOpacity()) {
+ this.clearIdleTimer();
+ this.isIdle = false;
+ this.element.classList.remove(
+ "idle",
+ "fading-in",
+ "fading-out",
+ "docked-left",
+ "docked-right",
+ "popping-left",
+ "popping-right"
+ );
}
- getDockSide() {
- const pos = this.config.position;
- if (pos === "top-left" || pos === "bottom-left") return "left";
- if (pos === "top-right" || pos === "bottom-right") return "right";
- return "right";
+ }
+ getDockSide() {
+ const pos = this.config.position;
+ if (pos === "top-left" || pos === "bottom-left") return "left";
+ if (pos === "top-right" || pos === "bottom-right") return "right";
+ return "right";
+ }
+ static getUAInfo() {
+ if (NeteaseMiniPlayer._uaCache) return NeteaseMiniPlayer._uaCache;
+ const nav = typeof navigator !== "undefined" ? navigator : {};
+ const uaRaw = nav.userAgent || "";
+ const ua = uaRaw.toLowerCase();
+ const platform = (nav.platform || "").toLowerCase();
+ const maxTP = nav.maxTouchPoints || 0;
+ const isWeChat = /micromessenger/.test(ua);
+ const isQQ = /(mqqbrowser| qq)/.test(ua);
+ const isInAppWebView = /\bwv\b|; wv/.test(ua) || /version\/\d+.*chrome/.test(ua);
+ const isiPhone = /iphone/.test(ua);
+ const isiPadUA = /ipad/.test(ua);
+ const isIOSLikePad = !isiPadUA && platform.includes("mac") && maxTP > 1;
+ const isiOS = isiPhone || isiPadUA || isIOSLikePad;
+ const isAndroid = /android/.test(ua);
+ const isHarmonyOS = /harmonyos/.test(uaRaw) || /huawei|honor/.test(ua);
+ const isMobileToken =
+ /mobile/.test(ua) || /sm-|mi |redmi|huawei|honor|oppo|vivo|oneplus/.test(ua);
+ const isHarmonyDesktop = isHarmonyOS && !isMobileToken && !isAndroid && !isiOS;
+ const isPWA =
+ (typeof window !== "undefined" &&
+ ((window.matchMedia && window.matchMedia("(display-mode: standalone)").matches) ||
+ nav.standalone === true)) ||
+ false;
+ const isMobile =
+ isiOS || isAndroid || (isHarmonyOS && !isHarmonyDesktop) || isMobileToken || isInAppWebView;
+ const info = {
+ isMobile,
+ isiOS,
+ isAndroid,
+ isHarmonyOS,
+ isHarmonyDesktop,
+ isWeChat,
+ isQQ,
+ isInAppWebView,
+ isPWA,
+ isiPad: isiPadUA || isIOSLikePad,
+ };
+ NeteaseMiniPlayer._uaCache = info;
+ return info;
+ }
+ applyResponsiveControls() {
+ const env = NeteaseMiniPlayer.getUAInfo();
+ const shouldHideVolume = !!env.isMobile;
+ this.element.classList.toggle("mobile-env", shouldHideVolume);
+ if (this.elements && this.elements.volumeContainer == null) {
+ this.elements.volumeContainer = this.element.querySelector(".volume-container");
}
- static getUAInfo() {
- if (NeteaseMiniPlayer._uaCache) return NeteaseMiniPlayer._uaCache;
- const nav = typeof navigator !== "undefined" ? navigator : {};
- const uaRaw = nav.userAgent || "";
- const ua = uaRaw.toLowerCase();
- const platform = (nav.platform || "").toLowerCase();
- const maxTP = nav.maxTouchPoints || 0;
- const isWeChat = /micromessenger/.test(ua);
- const isQQ = /(mqqbrowser| qq)/.test(ua);
- const isInAppWebView = /\bwv\b|; wv/.test(ua) || /version\/\d+.*chrome/.test(ua);
- const isiPhone = /iphone/.test(ua);
- const isiPadUA = /ipad/.test(ua);
- const isIOSLikePad = !isiPadUA && platform.includes("mac") && maxTP > 1;
- const isiOS = isiPhone || isiPadUA || isIOSLikePad;
- const isAndroid = /android/.test(ua);
- const isHarmonyOS = /harmonyos/.test(uaRaw) || /huawei|honor/.test(ua);
- const isMobileToken = /mobile/.test(ua) || /sm-|mi |redmi|huawei|honor|oppo|vivo|oneplus/.test(ua);
- const isHarmonyDesktop = isHarmonyOS && !isMobileToken && !isAndroid && !isiOS;
- const isPWA =
- (typeof window !== "undefined" &&
- ((window.matchMedia && window.matchMedia("(display-mode: standalone)").matches) ||
- nav.standalone === true)) ||
- false;
- const isMobile = isiOS || isAndroid || (isHarmonyOS && !isHarmonyDesktop) || isMobileToken || isInAppWebView;
- const info = {
- isMobile,
- isiOS,
- isAndroid,
- isHarmonyOS,
- isHarmonyDesktop,
- isWeChat,
- isQQ,
- isInAppWebView,
- isPWA,
- isiPad: isiPadUA || isIOSLikePad,
+ if (this.elements.volumeContainer) {
+ if (shouldHideVolume) {
+ this.elements.volumeContainer.classList.add("sr-visually-hidden");
+ this.elements.volumeContainer.setAttribute("aria-hidden", "false");
+ this.elements.volumeSlider?.setAttribute(
+ "aria-label",
+ "音量控制（移动端隐藏，仅无障碍可见）"
+ );
+ } else {
+ this.elements.volumeContainer.classList.remove("sr-visually-hidden");
+ this.elements.volumeContainer.removeAttribute("aria-hidden");
+ this.elements.volumeSlider?.removeAttribute("aria-label");
+ }
+ }
+ }
+ setupEnvListeners() {
+ const reapply = () => this.applyResponsiveControls();
+ if (window.matchMedia) {
+ try {
+ const mq1 = window.matchMedia("(orientation: portrait)");
+ const mq2 = window.matchMedia("(orientation: landscape)");
+ mq1.addEventListener?.("change", reapply);
+ mq2.addEventListener?.("change", reapply);
+ } catch (e) {
+ mq1.onchange = reapply;
+ mq2.onchange = reapply;
+ }
+ } else {
+ window.addEventListener("orientationchange", reapply);
+ }
+ window.addEventListener("resize", reapply);
+ }
+ setupAudioEvents() {
+ this.audio.addEventListener("loadedmetadata", () => {
+ this.duration = this.audio.duration;
+ this.updateTimeDisplay();
+ });
+ this.audio.addEventListener("timeupdate", () => {
+ this.currentTime = this.audio.currentTime;
+ this.updateProgress();
+ this.updateLyrics();
+ this.updateTimeDisplay();
+ });
+ this.audio.addEventListener("ended", async () => {
+ await this.nextSong();
+ });
+ this.audio.addEventListener("error", async (e) => {
+ console.error("音频播放错误:", e);
+ console.error("错误详情:", {
+ code: e.target.error?.code,
+ message: e.target.error?.message,
+ src: e.target.src,
+ });
+ this.showError("播放失败，尝试下一首");
+ setTimeout(async () => {
+ await this.nextSong();
+ }, 1000);
+ });
+ this.audio.addEventListener("abort", () => {
+ console.warn("音频加载被中断");
+ });
+ this.audio.addEventListener("stalled", () => {
+ console.warn("音频加载停滞");
+ });
+ this.audio.addEventListener("canplay", () => {
+ if (this.isPlaying && this.audio.paused) {
+ this.audio.play().catch((e) => console.error("自动播放失败:", e));
+ }
+ });
+ this.audio.volume = this.volume;
+ this.updateVolumeDisplay();
+ }
+ async apiRequest(endpoint, params = {}) {
+ const apiUrls = this.config.apiUrls;
+
+ for (const baseUrl of apiUrls) {
+ try {
+ const queryParams = {
+ server: "netease",
+ type: "playlist",
+ id: params.id,
+ ...params,
};
- NeteaseMiniPlayer._uaCache = info;
- return info;
+
+ const queryString = new URLSearchParams(queryParams).toString();
+ const url = `${baseUrl}?${queryString}`;
+
+ const response = await fetch(url, { mode: "cors", timeout: 5000 });
+ const data = await response.json();
+
+ if (!data) {
+ continue;
+ }
+
+ return {
+ code: 200,
+ songs: data || [],
+ };
+ } catch (error) {
+ console.warn(`API ${baseUrl} 请求失败:`, error);
+ continue;
+ }
}
- applyResponsiveControls() {
- const env = NeteaseMiniPlayer.getUAInfo();
- const shouldHideVolume = !!env.isMobile;
- this.element.classList.toggle("mobile-env", shouldHideVolume);
- if (this.elements && this.elements.volumeContainer == null) {
- this.elements.volumeContainer = this.element.querySelector(".volume-container");
- }
- if (this.elements.volumeContainer) {
- if (shouldHideVolume) {
- this.elements.volumeContainer.classList.add("sr-visually-hidden");
- this.elements.volumeContainer.setAttribute("aria-hidden", "false");
- this.elements.volumeSlider?.setAttribute("aria-label", "音量控制（移动端隐藏，仅无障碍可见）");
- } else {
- this.elements.volumeContainer.classList.remove("sr-visually-hidden");
- this.elements.volumeContainer.removeAttribute("aria-hidden");
- this.elements.volumeSlider?.removeAttribute("aria-label");
- }
- }
+
+ throw new Error("所有 API 都请求失败");
+ }
+ getCacheKey(type, id) {
+ return `${type}_${id}`;
+ }
+ setCache(key, data, expiry = 5 * 60 * 1000) {
+ this.cache.set(key, {
+ data,
+ expiry: Date.now() + expiry,
+ });
+ }
+ getCache(key) {
+ const cached = this.cache.get(key);
+ if (cached && cached.expiry > Date.now()) {
+ return cached.data;
}
- setupEnvListeners() {
- const reapply = () => this.applyResponsiveControls();
- if (window.matchMedia) {
- try {
- const mq1 = window.matchMedia("(orientation: portrait)");
- const mq2 = window.matchMedia("(orientation: landscape)");
- mq1.addEventListener?.("change", reapply);
- mq2.addEventListener?.("change", reapply);
- } catch (e) {
- mq1.onchange = reapply;
- mq2.onchange = reapply;
- }
- } else {
- window.addEventListener("orientationchange", reapply);
- }
- window.addEventListener("resize", reapply);
+ this.cache.delete(key);
+ return null;
+ }
+ async loadPlaylist(playlistId) {
+ const cacheKey = this.getCacheKey("playlist_all", playlistId);
+ let tracks = this.getCache(cacheKey);
+ if (!tracks) {
+ const response = await this.apiRequest("", {
+ id: playlistId,
+ });
+ tracks = response.songs || [];
+ this.setCache(cacheKey, tracks);
}
- setupAudioEvents() {
- this.audio.addEventListener("loadedmetadata", () => {
- this.duration = this.audio.duration;
- this.updateTimeDisplay();
- });
- this.audio.addEventListener("timeupdate", () => {
- this.currentTime = this.audio.currentTime;
- this.updateProgress();
- this.updateLyrics();
- this.updateTimeDisplay();
- });
- this.audio.addEventListener("ended", async () => {
- await this.nextSong();
- });
- this.audio.addEventListener("error", async (e) => {
- console.error("音频播放错误:", e);
- console.error("错误详情:", {
- code: e.target.error?.code,
- message: e.target.error?.message,
- src: e.target.src,
- });
- this.showError("播放失败，尝试下一首");
- setTimeout(async () => {
- await this.nextSong();
- }, 1000);
- });
- this.audio.addEventListener("abort", () => {
- console.warn("音频加载被中断");
- });
- this.audio.addEventListener("stalled", () => {
- console.warn("音频加载停滞");
- });
- this.audio.addEventListener("canplay", () => {
- if (this.isPlaying && this.audio.paused) {
- this.audio.play().catch((e) => console.error("自动播放失败:", e));
- }
- });
- this.audio.volume = this.volume;
- this.updateVolumeDisplay();
+
+ if (!tracks || tracks.length === 0) {
+ console.warn("歌单为空或无法加载，使用默认歌曲");
+ // 提供一个默认歌曲，避免播放器崩溃
+ // 使用特殊 ID "_empty" 表示这是一个占位符歌曲
+ this.playlist = [
+ {
+ id: "_empty",
+ name: "网络加载失败",
+ artists: "Cloud Home",
+ album: "Demo",
+ picUrl: "",
+ duration: 0,
+ },
+ ];
+ return;
}
- async apiRequest(endpoint, params = {}) {
- const apiUrls = this.config.apiUrls;
- for (const baseUrl of apiUrls) {
- try {
- const queryParams = {
- server: "netease",
- type: "playlist",
- id: params.id,
- ...params,
- };
+ this.playlist = tracks.map((song) => {
+ // Meting API 返回格式可能变化，需要从多个地方获取 ID
+ let songId = song.id || song.mid;
- const queryString = new URLSearchParams(queryParams).toString();
- const url = `${baseUrl}?${queryString}`;
+ // 如果没有直接的 ID，尝试从 URL 中提取
+ if (!songId && song.url) {
+ const urlMatch = song.url.match(/id=(\d+)/);
+ songId = urlMatch ? urlMatch[1] : null;
+ }
- const response = await fetch(url, { mode: "cors", timeout: 5000 });
- const data = await response.json();
+ // 或从 lrc URL 中提取
+ if (!songId && song.lrc) {
+ const lrcMatch = song.lrc.match(/id=(\d+)/);
+ songId = lrcMatch ? lrcMatch[1] : null;
+ }
- if (!data) {
- continue;
- }
+ if (!songId) {
+ console.warn("歌曲缺少ID，无法播放:", song.title || song.name);
+ }
- return {
- code: 200,
- songs: data || [],
- };
- } catch (error) {
- console.warn(`API ${baseUrl} 请求失败:`, error);
- continue;
- }
- }
+ return {
+ id: songId || "",
+ name: song.name || song.title || "Unknown",
+ artists: song.artist || song.author || "Unknown Artist",
+ album: song.album || "Unknown Album",
+ picUrl: song.pic || song.cover || "",
+ duration: song.duration
+ ? typeof song.duration === "string"
+ ? parseInt(song.duration) * 1000
+ : song.duration * 1000
+ : 0,
+ // 保存原始 API 返回的 URL 供后续使用
+ rawUrl: song.url || null,
+ rawLyricUrl: song.lrc || null,
+ };
+ });
- throw new Error("所有 API 都请求失败");
- }
- getCacheKey(type, id) {
- return `${type}_${id}`;
- }
- setCache(key, data, expiry = 5 * 60 * 1000) {
- this.cache.set(key, {
- data,
- expiry: Date.now() + expiry,
- });
- }
- getCache(key) {
- const cached = this.cache.get(key);
- if (cached && cached.expiry > Date.now()) {
- return cached.data;
- }
- this.cache.delete(key);
- return null;
- }
- async loadPlaylist(playlistId) {
- const cacheKey = this.getCacheKey("playlist_all", playlistId);
- let tracks = this.getCache(cacheKey);
- if (!tracks) {
- const response = await this.apiRequest("", {
- id: playlistId,
- });
- tracks = response.songs || [];
- this.setCache(cacheKey, tracks);
- }
+ this.setCache(cacheKey, tracks);
+ this.updatePlaylistDisplay();
+ }
+ async loadSingleSong(songId) {
+ const cacheKey = this.getCacheKey("song", songId);
+ let songData = this.getCache(cacheKey);
+ if (!songData) {
+ const apiUrls = [
+ `https://www.bilibili.uno/api?server=netease&type=song&id=${songId}`,
+ `https://meting-api.wangcy.site/api?server=netease&type=song&id=${songId}`,
+ ];
- if (!tracks || tracks.length === 0) {
- console.warn("歌单为空或无法加载，使用默认歌曲");
- // 提供一个默认歌曲，避免播放器崩溃
- // 使用特殊 ID "_empty" 表示这是一个占位符歌曲
- this.playlist = [
- {
- id: "_empty",
- name: "网络加载失败",
- artists: "Cloud Home",
- album: "Demo",
- picUrl: "",
- duration: 0,
- },
- ];
- return;
- }
-
- this.playlist = tracks.map((song) => {
- // Meting API 返回格式可能变化，需要从多个地方获取 ID
- let songId = song.id || song.mid;
-
- // 如果没有直接的 ID，尝试从 URL 中提取
- if (!songId && song.url) {
- const urlMatch = song.url.match(/id=(\d+)/);
- songId = urlMatch ? urlMatch[1] : null;
- }
-
- // 或从 lrc URL 中提取
- if (!songId && song.lrc) {
- const lrcMatch = song.lrc.match(/id=(\d+)/);
- songId = lrcMatch ? lrcMatch[1] : null;
- }
-
- if (!songId) {
- console.warn("歌曲缺少ID，无法播放:", song.title || song.name);
- }
-
- return {
- id: songId || "",
- name: song.name || song.title || "Unknown",
- artists: song.artist || song.author || "Unknown Artist",
- album: song.album || "Unknown Album",
- picUrl: song.pic || song.cover || "",
- duration: song.duration
- ? typeof song.duration === "string"
- ? parseInt(song.duration) * 1000
- : song.duration * 1000
- : 0,
- // 保存原始 API 返回的 URL 供后续使用
- rawUrl: song.url || null,
- rawLyricUrl: song.lrc || null,
- };
- });
-
- this.setCache(cacheKey, tracks);
- this.updatePlaylistDisplay();
- }
- async loadSingleSong(songId) {
- const cacheKey = this.getCacheKey("song", songId);
- let songData = this.getCache(cacheKey);
- if (!songData) {
- const apiUrls = [
- `https://www.bilibili.uno/api?server=netease&type=song&id=${songId}`,
- `https://meting-api.wangcy.site/api?server=netease&type=song&id=${songId}`,
- ];
-
- for (const url of apiUrls) {
- try {
- const response = await fetch(url);
- const songs = await response.json();
- if (songs && songs.length > 0) {
- const song = songs[0];
- songData = {
- id: song.id || song.mid || songId,
- name: song.name || song.title || "Unknown",
- artists: song.artist || song.author || "Unknown Artist",
- album: song.album || "Unknown Album",
- picUrl: song.pic || song.cover || "",
- duration: song.duration
- ? typeof song.duration === "string"
- ? parseInt(song.duration) * 1000
- : song.duration * 1000
- : 0,
- };
- this.setCache(cacheKey, songData);
- break;
- }
- } catch (error) {
- console.warn("从此API获取歌曲失败:", error);
- continue;
- }
- }
-
- if (!songData) {
- throw new Error("歌曲信息获取失败");
- }
- }
- this.playlist = [songData];
- }
- async loadCurrentSong() {
- if (this.playlist.length === 0) return;
-
- if (this.showLyrics) {
- this.elements.lyricLine.textContent = "♪ 加载歌词中... ♪";
- this.elements.lyricTranslation.style.display = "none";
- this.elements.lyricLine.classList.remove("current", "scrolling");
- this.elements.lyricTranslation.classList.remove("current", "scrolling");
- this.lyrics = [];
- this.currentLyricIndex = -1;
- }
-
- const song = this.playlist[this.currentIndex];
- this.currentSong = song;
- this.updateSongInfo(song);
- if (song.picUrl) {
- this.elements.albumCover.src = song.picUrl;
- }
- await this.loadSongUrl(song);
- if (this.showLyrics) {
- await this.loadLyrics(song);
- }
- }
- updateSongInfo(song) {
- if (!song) return;
- this.elements.songTitle.textContent = song.name || "未知歌曲";
- if (song.artists) {
- const truncatedArtist = this.truncateArtistName(song.artists);
- this.elements.songArtist.textContent = truncatedArtist;
- if (truncatedArtist !== song.artists) {
- this.elements.songArtist.setAttribute("title", song.artists);
- } else {
- this.elements.songArtist.removeAttribute("title");
- }
- }
- }
- truncateArtistName(artistText) {
- if (!artistText) return "";
- const tempElement = document.createElement("span");
- tempElement.style.visibility = "hidden";
- tempElement.style.position = "absolute";
- tempElement.style.fontSize = "12px";
- tempElement.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
- tempElement.textContent = artistText;
- document.body.appendChild(tempElement);
- const fullWidth = tempElement.offsetWidth;
- const availableWidth = 200;
- if (fullWidth <= availableWidth) {
- document.body.removeChild(tempElement);
- return artistText;
- }
- const artists = artistText.split(" / ");
- let result = "";
- let currentWidth = 0;
- for (let i = 0; i < artists.length; i++) {
- const testText = result ? `${result} / ${artists[i]}` : artists[i];
- tempElement.textContent = testText + "...";
- const testWidth = tempElement.offsetWidth;
- if (testWidth > availableWidth) {
- if (result) {
- break;
- } else {
- const artist = artists[i];
- for (let j = 1; j < artist.length; j++) {
- const partialArtist = artist.substring(0, j);
- tempElement.textContent = partialArtist + "...";
- if (tempElement.offsetWidth > availableWidth) {
- result = artist.substring(0, Math.max(1, j - 1));
- break;
- }
- result = partialArtist;
- }
- break;
- }
- }
- result = testText;
- }
- document.body.removeChild(tempElement);
- return result + (result !== artistText ? "..." : "");
- }
- async loadSongUrl(song) {
- if (!song || !song.id || song.id === "_empty") {
- console.warn("歌曲对象无效，跳过加载音频URL");
- return;
- }
-
- const songId = String(song.id); // 确保转换为字符串
- const cacheKey = this.getCacheKey("song_url", songId);
- let urlData = this.getCache(cacheKey);
-
- if (!urlData) {
- // 优先尝试使用 playlist 中已有的 URL
- if (song.rawUrl) {
- try {
- const response = await fetch(song.rawUrl, { method: "HEAD" });
- if (response.ok) {
- urlData = { url: song.rawUrl };
- this.setCache(cacheKey, urlData, 30 * 60 * 1000);
- }
- } catch (error) {
- console.warn("验证歌单URL失败:", error);
- }
- }
-
- // 如果没有原始 URL，尝试从 API 获取
- if (!urlData) {
- const baseUrls = this.config.apiUrls;
- const apiUrls = baseUrls.map((baseUrl) => `${baseUrl}?server=netease&type=song&id=${songId}`);
-
- for (const url of apiUrls) {
- try {
- const response = await fetch(url, { mode: "cors" });
- const data = await response.json();
- if (data && data.length > 0) {
- urlData = {
- url: data[0].url || data[0],
- };
- this.setCache(cacheKey, urlData, 30 * 60 * 1000);
- break;
- }
- } catch (error) {
- console.warn("从此API获取失败:", error);
- continue;
- }
- }
- }
- }
-
- if (urlData && urlData.url) {
- const httpsUrl = this.ensureHttps(urlData.url);
- this.audio.src = httpsUrl;
- } else {
- console.warn("无法获取音频URL");
- }
- }
- ensureHttps(url) {
- if (!url) return url;
- if (url.includes("music.126.net")) {
- return url.replace(/^http:\/\//, "https://");
- }
- if (url.startsWith("http://")) {
- return url.replace("http://", "https://");
- }
- return url;
- }
- async loadLyrics(song) {
- if (!song || !song.id || song.id === "_empty") {
- console.warn("歌曲对象无效，跳过加载歌词");
- return;
- }
-
- const songId = String(song.id); // 确保转换为字符串
- const cacheKey = this.getCacheKey("lyric", songId);
- let lyricData = this.getCache(cacheKey);
-
- if (!lyricData) {
- const baseUrls = this.config.apiUrls;
- const apiUrls = baseUrls.map((baseUrl) => `${baseUrl}?server=netease&type=lrc&id=${songId}`);
-
- for (const url of apiUrls) {
- try {
- const response = await fetch(url);
- const contentType = response.headers.get("content-type") || "";
-
- if (contentType.includes("application/json")) {
- lyricData = await response.json();
- } else {
- // API 直接返回 lrc 文件内容（纯文本）
- const lrcText = await response.text();
- lyricData = { lrc: { lyric: lrcText } };
- }
-
- if (lyricData) {
- this.setCache(cacheKey, lyricData, 60 * 60 * 1000);
- break;
- }
- } catch (error) {
- console.warn("从此API获取歌词失败:", error);
- continue;
- }
- }
-
- if (!lyricData) {
- console.warn("无法获取歌词");
- this.lyrics = [];
- return;
- }
- }
- this.parseLyrics(lyricData);
- }
- parseLyrics(lyricData) {
- this.lyrics = [];
- this.currentLyricIndex = -1;
-
- if (!lyricData || (!lyricData.lrc?.lyric && !lyricData.tlyric?.lyric)) {
- this.elements.lyricLine.textContent = "暂无歌词";
- this.elements.lyricTranslation.style.display = "none";
- this.elements.lyricLine.classList.remove("current", "scrolling");
- this.elements.lyricTranslation.classList.remove("current", "scrolling");
- return;
- }
- // 处理 lrc 数据可能是字符串或对象的情况
- const lrcContent = typeof lyricData.lrc === "string" ? lyricData.lrc : lyricData.lrc?.lyric || "";
- const tlyricContent = typeof lyricData.tlyric === "string" ? lyricData.tlyric : lyricData.tlyric?.lyric || "";
- const lrcLines = lrcContent.split("\n");
- const tlyricLines = tlyricContent ? tlyricContent.split("\n") : [];
- const lrcMap = new Map();
- lrcLines.forEach((line) => {
- const match = line.match(/\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/);
- if (match) {
- const minutes = parseInt(match[1]);
- const seconds = parseInt(match[2]);
- const milliseconds = parseInt(match[3].padEnd(3, "0"));
- const time = minutes * 60 + seconds + milliseconds / 1000;
- const text = match[4].trim();
- if (text) {
- lrcMap.set(time, text);
- }
- }
- });
- const tlyricMap = new Map();
- tlyricLines.forEach((line) => {
- const match = line.match(/\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/);
- if (match) {
- const minutes = parseInt(match[1]);
- const seconds = parseInt(match[2]);
- const milliseconds = parseInt(match[3].padEnd(3, "0"));
- const time = minutes * 60 + seconds + milliseconds / 1000;
- const text = match[4].trim();
- if (text) {
- tlyricMap.set(time, text);
- }
- }
- });
- const allTimes = Array.from(new Set([...lrcMap.keys(), ...tlyricMap.keys()])).sort((a, b) => a - b);
- this.lyrics = allTimes.map((time) => ({
- time,
- text: lrcMap.get(time) || "",
- translation: tlyricMap.get(time) || "",
- }));
- this.currentLyricIndex = -1;
- this.updateLyrics();
- }
- async togglePlay() {
- if (this.isPlaying) {
- this.pause();
- } else {
- await this.play();
- }
- }
- async play() {
- GlobalAudioManager.setCurrent(this);
+ for (const url of apiUrls) {
try {
- await this.audio.play();
- this.isPlaying = true;
- this.elements.playIcon.style.display = "none";
- this.elements.pauseIcon.style.display = "inline";
- this.elements.albumCover.classList.add("playing");
- this.element.classList.add("player-playing");
+ const response = await fetch(url);
+ const songs = await response.json();
+ if (songs && songs.length > 0) {
+ const song = songs[0];
+ songData = {
+ id: song.id || song.mid || songId,
+ name: song.name || song.title || "Unknown",
+ artists: song.artist || song.author || "Unknown Artist",
+ album: song.album || "Unknown Album",
+ picUrl: song.pic || song.cover || "",
+ duration: song.duration
+ ? typeof song.duration === "string"
+ ? parseInt(song.duration) * 1000
+ : song.duration * 1000
+ : 0,
+ };
+ this.setCache(cacheKey, songData);
+ break;
+ }
} catch (error) {
- console.error("播放失败:", error);
- this.showError("播放失败");
- }
- }
- pause() {
- this.audio.pause();
- this.isPlaying = false;
- this.elements.playIcon.style.display = "inline";
- this.elements.pauseIcon.style.display = "none";
- this.elements.albumCover.classList.remove("playing");
- this.element.classList.remove("player-playing");
- }
- async previousSong() {
- if (this.playlist.length <= 1) return;
- this.currentIndex = this.currentIndex > 0 ? this.currentIndex - 1 : this.playlist.length - 1;
- await this.loadCurrentSong();
- if (this.isPlaying) {
- await this.play();
- }
- }
- async nextSong() {
- const wasPlaying = this.isPlaying;
- if (this.playlist.length <= 1) {
- if (this.playMode === "single") {
- this.audio.currentTime = 0;
- if (wasPlaying) await this.play();
- return;
- }
- this.audio.currentTime = 0;
- if (wasPlaying) await this.play();
- return;
+ console.warn("从此API获取歌曲失败:", error);
+ continue;
}
+ }
- let newIndex;
- if (this.playMode === "shuffle") {
- const availableIndices = this.playlist.map((_, i) => i).filter((i) => i !== this.currentIndex);
+ if (!songData) {
+ throw new Error("歌曲信息获取失败");
+ }
+ }
+ this.playlist = [songData];
+ }
+ async loadCurrentSong() {
+ if (this.playlist.length === 0) return;
- if (availableIndices.length === 0) {
- newIndex = this.currentIndex;
- } else {
- newIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)];
- }
- this.shuffleHistory.push(this.currentIndex);
- if (this.shuffleHistory.length > 2) {
- this.shuffleHistory.shift();
- }
- } else if (this.playMode === "single") {
- newIndex = this.currentIndex;
+ if (this.showLyrics) {
+ this.elements.lyricLine.textContent = "♪ 加载歌词中... ♪";
+ this.elements.lyricTranslation.style.display = "none";
+ this.elements.lyricLine.classList.remove("current", "scrolling");
+ this.elements.lyricTranslation.classList.remove("current", "scrolling");
+ this.lyrics = [];
+ this.currentLyricIndex = -1;
+ }
+
+ const song = this.playlist[this.currentIndex];
+ this.currentSong = song;
+ this.updateSongInfo(song);
+ if (song.picUrl) {
+ this.elements.albumCover.src = song.picUrl;
+ }
+ await this.loadSongUrl(song);
+ if (this.showLyrics) {
+ await this.loadLyrics(song);
+ }
+ }
+ updateSongInfo(song) {
+ if (!song) return;
+ this.elements.songTitle.textContent = song.name || "未知歌曲";
+ if (song.artists) {
+ const truncatedArtist = this.truncateArtistName(song.artists);
+ this.elements.songArtist.textContent = truncatedArtist;
+ if (truncatedArtist !== song.artists) {
+ this.elements.songArtist.setAttribute("title", song.artists);
+ } else {
+ this.elements.songArtist.removeAttribute("title");
+ }
+ }
+ }
+ truncateArtistName(artistText) {
+ if (!artistText) return "";
+ const tempElement = document.createElement("span");
+ tempElement.style.visibility = "hidden";
+ tempElement.style.position = "absolute";
+ tempElement.style.fontSize = "12px";
+ tempElement.style.fontFamily =
+ '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+ tempElement.textContent = artistText;
+ document.body.appendChild(tempElement);
+ const fullWidth = tempElement.offsetWidth;
+ const availableWidth = 200;
+ if (fullWidth <= availableWidth) {
+ document.body.removeChild(tempElement);
+ return artistText;
+ }
+ const artists = artistText.split(" / ");
+ let result = "";
+ let currentWidth = 0;
+ for (let i = 0; i < artists.length; i++) {
+ const testText = result ? `${result} / ${artists[i]}` : artists[i];
+ tempElement.textContent = testText + "...";
+ const testWidth = tempElement.offsetWidth;
+ if (testWidth > availableWidth) {
+ if (result) {
+ break;
} else {
- newIndex = (this.currentIndex + 1) % this.playlist.length;
- }
-
- this.currentIndex = newIndex;
- await this.loadCurrentSong();
-
- this.updatePlaylistDisplay();
-
- if (wasPlaying) {
- setTimeout(async () => {
- try {
- await this.play();
- } catch (error) {
- console.error("自动播放下一首失败:", error);
- }
- }, 100);
- }
- }
- updateProgress() {
- if (this.duration > 0) {
- const progress = (this.currentTime / this.duration) * 100;
- this.elements.progressBar.style.width = `${progress}%`;
- }
- }
- updateTimeDisplay() {
- const formatTime = (time) => {
- const minutes = Math.floor(time / 60);
- const seconds = Math.floor(time % 60);
- return `${minutes}:${seconds.toString().padStart(2, "0")}`;
- };
- this.elements.currentTime.textContent = formatTime(this.currentTime);
- this.elements.totalTime.textContent = formatTime(this.duration);
- }
- updateVolumeDisplay() {
- this.elements.volumeBar.style.width = `${this.volume * 100}%`;
- }
- updateLyrics() {
- if (this.lyrics.length === 0) return;
- let newIndex = -1;
- for (let i = 0; i < this.lyrics.length; i++) {
- if (this.currentTime >= this.lyrics[i].time) {
- newIndex = i;
- } else {
- break;
- }
- }
- if (newIndex !== this.currentLyricIndex) {
- this.currentLyricIndex = newIndex;
- if (newIndex >= 0 && newIndex < this.lyrics.length) {
- const lyric = this.lyrics[newIndex];
- const lyricText = lyric.text || "♪";
-
- this.elements.lyricLine.classList.remove("current");
-
- requestAnimationFrame(() => {
- this.elements.lyricLine.textContent = lyricText;
- this.checkLyricScrolling(this.elements.lyricLine, lyricText);
-
- this.elements.lyricLine.classList.add("current");
-
- if (lyric.translation) {
- this.elements.lyricTranslation.textContent = lyric.translation;
- this.elements.lyricTranslation.style.display = "block";
- this.elements.lyricTranslation.classList.remove("current");
- requestAnimationFrame(() => {
- this.elements.lyricTranslation.classList.add("current");
- });
- } else {
- this.elements.lyricTranslation.style.display = "none";
- this.elements.lyricTranslation.classList.remove("current", "scrolling");
- }
- });
-
- this.elements.lyricsContainer.classList.add("switching");
- setTimeout(() => {
- this.elements.lyricsContainer.classList.remove("switching");
- }, 500);
- if (lyric.translation) {
- this.elements.lyricTranslation.textContent = lyric.translation;
- this.elements.lyricTranslation.classList.add("current");
- this.elements.lyricTranslation.style.display = "block";
- this.checkLyricScrolling(this.elements.lyricTranslation, lyric.translation);
- } else {
- this.elements.lyricTranslation.style.display = "none";
- this.elements.lyricTranslation.classList.remove("current", "scrolling");
- }
- } else {
- this.elements.lyricLine.textContent = "♪ 纯音乐，请欣赏 ♪";
- this.elements.lyricLine.classList.remove("current", "scrolling");
- this.elements.lyricTranslation.style.display = "none";
- this.elements.lyricTranslation.classList.remove("current", "scrolling");
+ const artist = artists[i];
+ for (let j = 1; j < artist.length; j++) {
+ const partialArtist = artist.substring(0, j);
+ tempElement.textContent = partialArtist + "...";
+ if (tempElement.offsetWidth > availableWidth) {
+ result = artist.substring(0, Math.max(1, j - 1));
+ break;
}
+ result = partialArtist;
+ }
+ break;
}
+ }
+ result = testText;
}
- checkLyricScrolling(element, text) {
- if (!element || !text) return;
- const tempElement = document.createElement("span");
- tempElement.style.visibility = "hidden";
- tempElement.style.position = "absolute";
- tempElement.style.fontSize = window.getComputedStyle(element).fontSize;
- tempElement.style.fontFamily = window.getComputedStyle(element).fontFamily;
- tempElement.style.fontWeight = window.getComputedStyle(element).fontWeight;
- tempElement.textContent = text;
- document.body.appendChild(tempElement);
- const textWidth = tempElement.offsetWidth;
- document.body.removeChild(tempElement);
- const containerWidth = element.parentElement.offsetWidth - 16;
- if (textWidth > containerWidth) {
- element.classList.add("scrolling");
+ document.body.removeChild(tempElement);
+ return result + (result !== artistText ? "..." : "");
+ }
+ async loadSongUrl(song) {
+ if (!song || !song.id || song.id === "_empty") {
+ console.warn("歌曲对象无效，跳过加载音频URL");
+ return;
+ }
+
+ const songId = String(song.id); // 确保转换为字符串
+ const cacheKey = this.getCacheKey("song_url", songId);
+ let urlData = this.getCache(cacheKey);
+
+ if (!urlData) {
+ // 优先尝试使用 playlist 中已有的 URL
+ if (song.rawUrl) {
+ try {
+ const response = await fetch(song.rawUrl, { method: "HEAD" });
+ if (response.ok) {
+ urlData = { url: song.rawUrl };
+ this.setCache(cacheKey, urlData, 30 * 60 * 1000);
+ }
+ } catch (error) {
+ console.warn("验证歌单URL失败:", error);
+ }
+ }
+
+ // 如果没有原始 URL，尝试从 API 获取
+ if (!urlData) {
+ const baseUrls = this.config.apiUrls;
+ const apiUrls = baseUrls.map(
+ (baseUrl) => `${baseUrl}?server=netease&type=song&id=${songId}`
+ );
+
+ for (const url of apiUrls) {
+ try {
+ const response = await fetch(url, { mode: "cors" });
+ const data = await response.json();
+ if (data && data.length > 0) {
+ urlData = {
+ url: data[0].url || data[0],
+ };
+ this.setCache(cacheKey, urlData, 30 * 60 * 1000);
+ break;
+ }
+ } catch (error) {
+ console.warn("从此API获取失败:", error);
+ continue;
+ }
+ }
+ }
+ }
+
+ if (urlData && urlData.url) {
+ const httpsUrl = this.ensureHttps(urlData.url);
+ this.audio.src = httpsUrl;
+ } else {
+ console.warn("无法获取音频URL");
+ }
+ }
+ ensureHttps(url) {
+ if (!url) return url;
+ if (url.includes("music.126.net")) {
+ return url.replace(/^http:\/\//, "https://");
+ }
+ if (url.startsWith("http://")) {
+ return url.replace("http://", "https://");
+ }
+ return url;
+ }
+ async loadLyrics(song) {
+ if (!song || !song.id || song.id === "_empty") {
+ console.warn("歌曲对象无效，跳过加载歌词");
+ return;
+ }
+
+ const songId = String(song.id); // 确保转换为字符串
+ const cacheKey = this.getCacheKey("lyric", songId);
+ let lyricData = this.getCache(cacheKey);
+
+ if (!lyricData) {
+ const baseUrls = this.config.apiUrls;
+ const apiUrls = baseUrls.map((baseUrl) => `${baseUrl}?server=netease&type=lrc&id=${songId}`);
+
+ for (const url of apiUrls) {
+ try {
+ const response = await fetch(url);
+ const contentType = response.headers.get("content-type") || "";
+
+ if (contentType.includes("application/json")) {
+ lyricData = await response.json();
+ } else {
+ // API 直接返回 lrc 文件内容（纯文本）
+ const lrcText = await response.text();
+ lyricData = { lrc: { lyric: lrcText } };
+ }
+
+ if (lyricData) {
+ this.setCache(cacheKey, lyricData, 60 * 60 * 1000);
+ break;
+ }
+ } catch (error) {
+ console.warn("从此API获取歌词失败:", error);
+ continue;
+ }
+ }
+
+ if (!lyricData) {
+ console.warn("无法获取歌词");
+ this.lyrics = [];
+ return;
+ }
+ }
+ this.parseLyrics(lyricData);
+ }
+ parseLyrics(lyricData) {
+ this.lyrics = [];
+ this.currentLyricIndex = -1;
+
+ if (!lyricData || (!lyricData.lrc?.lyric && !lyricData.tlyric?.lyric)) {
+ this.elements.lyricLine.textContent = "暂无歌词";
+ this.elements.lyricTranslation.style.display = "none";
+ this.elements.lyricLine.classList.remove("current", "scrolling");
+ this.elements.lyricTranslation.classList.remove("current", "scrolling");
+ return;
+ }
+ // 处理 lrc 数据可能是字符串或对象的情况
+ const lrcContent =
+ typeof lyricData.lrc === "string" ? lyricData.lrc : lyricData.lrc?.lyric || "";
+ const tlyricContent =
+ typeof lyricData.tlyric === "string" ? lyricData.tlyric : lyricData.tlyric?.lyric || "";
+ const lrcLines = lrcContent.split("\n");
+ const tlyricLines = tlyricContent ? tlyricContent.split("\n") : [];
+ const lrcMap = new Map();
+ lrcLines.forEach((line) => {
+ const match = line.match(/\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/);
+ if (match) {
+ const minutes = parseInt(match[1]);
+ const seconds = parseInt(match[2]);
+ const milliseconds = parseInt(match[3].padEnd(3, "0"));
+ const time = minutes * 60 + seconds + milliseconds / 1000;
+ const text = match[4].trim();
+ if (text) {
+ lrcMap.set(time, text);
+ }
+ }
+ });
+ const tlyricMap = new Map();
+ tlyricLines.forEach((line) => {
+ const match = line.match(/\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/);
+ if (match) {
+ const minutes = parseInt(match[1]);
+ const seconds = parseInt(match[2]);
+ const milliseconds = parseInt(match[3].padEnd(3, "0"));
+ const time = minutes * 60 + seconds + milliseconds / 1000;
+ const text = match[4].trim();
+ if (text) {
+ tlyricMap.set(time, text);
+ }
+ }
+ });
+ const allTimes = Array.from(new Set([...lrcMap.keys(), ...tlyricMap.keys()])).sort(
+ (a, b) => a - b
+ );
+ this.lyrics = allTimes.map((time) => ({
+ time,
+ text: lrcMap.get(time) || "",
+ translation: tlyricMap.get(time) || "",
+ }));
+ this.currentLyricIndex = -1;
+ this.updateLyrics();
+ }
+ async togglePlay() {
+ if (this.isPlaying) {
+ this.pause();
+ } else {
+ await this.play();
+ }
+ }
+ async play() {
+ GlobalAudioManager.setCurrent(this);
+ try {
+ await this.audio.play();
+ this.isPlaying = true;
+ this.elements.playIcon.style.display = "none";
+ this.elements.pauseIcon.style.display = "inline";
+ this.elements.albumCover.classList.add("playing");
+ this.element.classList.add("player-playing");
+ } catch (error) {
+ console.error("播放失败:", error);
+ this.showError("播放失败");
+ }
+ }
+ pause() {
+ this.audio.pause();
+ this.isPlaying = false;
+ this.elements.playIcon.style.display = "inline";
+ this.elements.pauseIcon.style.display = "none";
+ this.elements.albumCover.classList.remove("playing");
+ this.element.classList.remove("player-playing");
+ }
+ async previousSong() {
+ if (this.playlist.length <= 1) return;
+ this.currentIndex = this.currentIndex > 0 ? this.currentIndex - 1 : this.playlist.length - 1;
+ await this.loadCurrentSong();
+ if (this.isPlaying) {
+ await this.play();
+ }
+ }
+ async nextSong() {
+ const wasPlaying = this.isPlaying;
+ if (this.playlist.length <= 1) {
+ if (this.playMode === "single") {
+ this.audio.currentTime = 0;
+ if (wasPlaying) await this.play();
+ return;
+ }
+ this.audio.currentTime = 0;
+ if (wasPlaying) await this.play();
+ return;
+ }
+
+ let newIndex;
+ if (this.playMode === "shuffle") {
+ const availableIndices = this.playlist
+ .map((_, i) => i)
+ .filter((i) => i !== this.currentIndex);
+
+ if (availableIndices.length === 0) {
+ newIndex = this.currentIndex;
+ } else {
+ newIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)];
+ }
+ this.shuffleHistory.push(this.currentIndex);
+ if (this.shuffleHistory.length > 2) {
+ this.shuffleHistory.shift();
+ }
+ } else if (this.playMode === "single") {
+ newIndex = this.currentIndex;
+ } else {
+ newIndex = (this.currentIndex + 1) % this.playlist.length;
+ }
+
+ this.currentIndex = newIndex;
+ await this.loadCurrentSong();
+
+ this.updatePlaylistDisplay();
+
+ if (wasPlaying) {
+ setTimeout(async () => {
+ try {
+ await this.play();
+ } catch (error) {
+ console.error("自动播放下一首失败:", error);
+ }
+ }, 100);
+ }
+ }
+ updateProgress() {
+ if (this.duration > 0) {
+ const progress = (this.currentTime / this.duration) * 100;
+ this.elements.progressBar.style.width = `${progress}%`;
+ }
+ }
+ updateTimeDisplay() {
+ const formatTime = (time) => {
+ const minutes = Math.floor(time / 60);
+ const seconds = Math.floor(time % 60);
+ return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+ };
+ this.elements.currentTime.textContent = formatTime(this.currentTime);
+ this.elements.totalTime.textContent = formatTime(this.duration);
+ }
+ updateVolumeDisplay() {
+ this.elements.volumeBar.style.width = `${this.volume * 100}%`;
+ }
+ updateLyrics() {
+ if (this.lyrics.length === 0) return;
+ let newIndex = -1;
+ for (let i = 0; i < this.lyrics.length; i++) {
+ if (this.currentTime >= this.lyrics[i].time) {
+ newIndex = i;
+ } else {
+ break;
+ }
+ }
+ if (newIndex !== this.currentLyricIndex) {
+ this.currentLyricIndex = newIndex;
+ if (newIndex >= 0 && newIndex < this.lyrics.length) {
+ const lyric = this.lyrics[newIndex];
+ const lyricText = lyric.text || "♪";
+
+ this.elements.lyricLine.classList.remove("current");
+
+ requestAnimationFrame(() => {
+ this.elements.lyricLine.textContent = lyricText;
+ this.checkLyricScrolling(this.elements.lyricLine, lyricText);
+
+ this.elements.lyricLine.classList.add("current");
+
+ if (lyric.translation) {
+ this.elements.lyricTranslation.textContent = lyric.translation;
+ this.elements.lyricTranslation.style.display = "block";
+ this.elements.lyricTranslation.classList.remove("current");
+ requestAnimationFrame(() => {
+ this.elements.lyricTranslation.classList.add("current");
+ });
+ } else {
+ this.elements.lyricTranslation.style.display = "none";
+ this.elements.lyricTranslation.classList.remove("current", "scrolling");
+ }
+ });
+
+ this.elements.lyricsContainer.classList.add("switching");
+ setTimeout(() => {
+ this.elements.lyricsContainer.classList.remove("switching");
+ }, 500);
+ if (lyric.translation) {
+ this.elements.lyricTranslation.textContent = lyric.translation;
+ this.elements.lyricTranslation.classList.add("current");
+ this.elements.lyricTranslation.style.display = "block";
+ this.checkLyricScrolling(this.elements.lyricTranslation, lyric.translation);
} else {
- element.classList.remove("scrolling");
+ this.elements.lyricTranslation.style.display = "none";
+ this.elements.lyricTranslation.classList.remove("current", "scrolling");
}
+ } else {
+ this.elements.lyricLine.textContent = "♪ 纯音乐，请欣赏 ♪";
+ this.elements.lyricLine.classList.remove("current", "scrolling");
+ this.elements.lyricTranslation.style.display = "none";
+ this.elements.lyricTranslation.classList.remove("current", "scrolling");
+ }
}
- updatePlaylistDisplay() {
- if (!this.elements.playlistContent || !this.playlist || this.playlist.length === 0) return;
- const html = this.playlist
- .map(
- (song, index) => `
+ }
+ checkLyricScrolling(element, text) {
+ if (!element || !text) return;
+ const tempElement = document.createElement("span");
+ tempElement.style.visibility = "hidden";
+ tempElement.style.position = "absolute";
+ tempElement.style.fontSize = window.getComputedStyle(element).fontSize;
+ tempElement.style.fontFamily = window.getComputedStyle(element).fontFamily;
+ tempElement.style.fontWeight = window.getComputedStyle(element).fontWeight;
+ tempElement.textContent = text;
+ document.body.appendChild(tempElement);
+ const textWidth = tempElement.offsetWidth;
+ document.body.removeChild(tempElement);
+ const containerWidth = element.parentElement.offsetWidth - 16;
+ if (textWidth > containerWidth) {
+ element.classList.add("scrolling");
+ } else {
+ element.classList.remove("scrolling");
+ }
+ }
+ updatePlaylistDisplay() {
+ if (!this.elements.playlistContent || !this.playlist || this.playlist.length === 0) return;
+ const html = this.playlist
+ .map(
+ (song, index) => `
-
+
+
+
+ 查看仓库 →
+
+
+
+
diff --git a/app/components/SitesSection.vue b/app/components/SitesSection.vue
index 2df6dc3..0190adc 100644
--- a/app/components/SitesSection.vue
+++ b/app/components/SitesSection.vue
@@ -1,43 +1,43 @@
-
- - {{ p.name }} -
+项目作品
+一些正在维护或已发布的项目 · Projects
+
+
+
- 查看仓库 →
-
-
+ 项目
-
+
-
- + {{ p.name }} +
- 项目 -- {{ p.desc }} -
- -+ {{ p.desc }} +
+ +我的网站
- -正在运行的站点 · Websites
- -
-
-
- 查看 →
-
-
-
-
-
-
- - {{ site.name }} -
- - 在线 -- {{ site.desc }} -
- -我的网站
+ +正在运行的站点 · Websites
+ +
+
+
+ 查看 →
+
+
+
+
+
+
+ + {{ site.name }} +
+ + 在线 ++ {{ site.desc }} +
+ +
-
- 技能专长
-我常用的工具与技术 · Skills & Technologies
-
-
-
-
-
-
- {{ group.title }}
-
-
-
-
+
+ 技能专长
+我常用的工具与技术 · Skills & Technologies
+
+
+
+
+
+
+ {{ group.title }}
+
+
+
+ 社交链接
-社交账号 · Links
-
-
-
-
-
-
-
-
- 社交链接
+社交账号 · Links
+
+
+
+
+
+
+
+
+
-
-
-
- 开发统计
-
-
-
-
-
-
-
-
-
-
- 提交热力图
-我的提交热力图 · Activity Heatmap
-
-
- 常用语言
-我常用的语言 · Languages
-
-
- -
-
-
- - - {{ lang.name }} - {{ lang.percent }}% -- -
-
-
-
-
-
- 编码统计
-- {{ wakatimeActiveTab === "weekly" ? "最近7天 · Last 7 Days" : "所有时间 · All Time" }} -
-
-
-
- {{
- currentWakatimeData?.total_seconds ? formatTime(currentWakatimeData.total_seconds) : "N/A"
- }}
- 总时间
-
-
- {{
- currentWakatimeData?.daily_average ? formatTime(currentWakatimeData.daily_average) : "N/A"
- }}
- 日均
-
-
- {{ currentWakatimeData?.days_including_holidays ?? "N/A" }}
- 活跃天数
-
-
-
-
- 编程语言
-语言使用统计 · Languages
-
-
- -
-
-
- - - {{ lang.name }} - {{ lang.percent }}% -- -
-
-
-
-
-
-
-
-
-
- 当前状态
-实时状态 · Current Status
-
-
- {{ statusData.is_coding ? "正在编码" : "未在编码" }}
- {{ statusData.project }}
-
-
+
+
+
+ 开发统计
+
+
+
+
+
+
+
+
+
+
+ 提交热力图
+我的提交热力图 · Activity Heatmap
+
+
+ 常用语言
+我常用的语言 · Languages
+
+
+ -
+
-
+ + + {{ lang.name }} + {{ lang.percent }}% ++ +
+
+
+
+
+
+ 编码统计
++ {{ wakatimeActiveTab === "weekly" ? "最近7天 · Last 7 Days" : "所有时间 · All Time" }} +
+
+
+
+ {{
+ currentWakatimeData?.total_seconds
+ ? formatTime(currentWakatimeData.total_seconds)
+ : "N/A"
+ }}
+ 总时间
+
+
+ {{
+ currentWakatimeData?.daily_average
+ ? formatTime(currentWakatimeData.daily_average)
+ : "N/A"
+ }}
+ 日均
+
+
+ {{
+ currentWakatimeData?.days_including_holidays ?? "N/A"
+ }}
+ 活跃天数
+
+
+
+
+ 编程语言
+语言使用统计 · Languages
+
+
+ -
+
-
+ + + {{ lang.name }} + {{ lang.percent }}% ++ +
+
+
+
+
+
+
+
+
+
+ 当前状态
+实时状态 · Current Status
+
+
+ {{ statusData.is_coding ? "正在编码" : "未在编码" }}
+ {{ statusData.project }}
+
+
-
-
- Wakatime
-
-
-
-
-
-
-
- 编码统计
-{{ activeTab === "weekly" ? "最近7天 · Last 7 Days" : "所有时间 · All Time" }}
-
-
-
- {{
- currentData.total_seconds ? formatTime(currentData.total_seconds) : "N/A"
- }}
- 总时间
-
-
- {{
- currentData.daily_average ? formatTime(currentData.daily_average) : "N/A"
- }}
- 日均
-
-
- {{ currentData.days_including_holidays || "N/A" }}
- 活跃天数
-
-
-
-
- 编程语言
-语言使用统计 · Languages
-
-
- -
-
-
- - - {{ lang.name }} - {{ lang.percent }}% -- -
-
-
- 当前状态
-实时状态 · Current Status
-
-
- {{ statusData.is_coding ? "正在编码" : "未在编码" }}
- {{ statusData.project }}
-
-
+
+
+ Wakatime
+
+
+
+
+
+
+
+ 编码统计
++ {{ activeTab === "weekly" ? "最近7天 · Last 7 Days" : "所有时间 · All Time" }} +
+
+
+
+ {{
+ currentData.total_seconds ? formatTime(currentData.total_seconds) : "N/A"
+ }}
+ 总时间
+
+
+ {{
+ currentData.daily_average ? formatTime(currentData.daily_average) : "N/A"
+ }}
+ 日均
+
+
+ {{ currentData.days_including_holidays || "N/A" }}
+ 活跃天数
+
+
+
+
+ 编程语言
+语言使用统计 · Languages
+
+
+ -
+
-
+ + + {{ lang.name }} + {{ lang.percent }}% ++ +
+
+
+ 当前状态
+实时状态 · Current Status
+
+
+ {{ statusData.is_coding ? "正在编码" : "未在编码" }}
+ {{ statusData.project }}
+
+
-
-
- 加载统计数据中...
-
+
+
+ 加载统计数据中...
+Giscus 未配置。
-留言板
-在这里留下想说的话吧 · Comments
-
-
- Giscus 未配置。
+留言板
+在这里留下想说的话吧 · Comments
+
+
+ 404
-页面不见了，或已被移除。
- 返回首页 -404
+页面不见了，或已被移除。
+ 返回首页 +
${
- !this.config.embed
- ? ``
- : ""
+ !this.config.embed
+ ? ``
+ : ""
}
${
- !this.config.embed
- ? ``
- : ""
+ !this.config.embed
+ ? ``
+ : ""
}
${(index + 1).toString().padStart(2, "0")}
{
- if (key === "songId") {
- html += ` data-song-id="${value}"`;
- } else if (key === "playlistId") {
- html += ` data-playlist-id="${value}"`;
- } else {
- const dataKey =
- {
- position: "data-position",
- theme: "data-theme",
- lyric: "data-lyric",
- embed: "data-embed",
- minimized: "data-default-minimized",
- autoplay: "data-autoplay",
- "idle-opacity": "data-idle-opacity",
- "auto-pause": "data-auto-pause",
- }[key] || `data-${key}`;
- html += ` ${dataKey}="${value}"`;
- }
- });
-
- html += ">
";
- return html;
+ if (content.startsWith("playlist=")) {
+ shortcode.type = "playlist";
+ const parts = content.split(/,\s*/);
+ shortcode.id = parts[0].replace("playlist=", "").trim();
+ parts.slice(1).forEach((part) => {
+ const [key, value] = part.split("=");
+ if (key && value) shortcode.params[key.trim()] = value.trim();
+ });
+ } else {
+ const parts = content.split(/,\s*/);
+ if (parts[0].includes("=")) {
+ parts.forEach((part) => {
+ const [key, value] = part.split("=");
+ if (key && value) shortcode.params[key.trim()] = value.trim();
});
- },
- };
+ } else {
+ shortcode.id = parts[0].trim();
+ parts.slice(1).forEach((part) => {
+ const [key, value] = part.split("=");
+ if (key && value) shortcode.params[key.trim()] = value.trim();
+ });
+ }
+ }
+
+ if (!shortcode.params.position || shortcode.params.position === "static") {
+ shortcode.params.embed = shortcode.params.embed ?? "true";
+ } else if (shortcode.params.embed === undefined) {
+ shortcode.params.embed = "false";
+ }
+
+ let html = ' {
+ if (key === "songId") {
+ html += ` data-song-id="${value}"`;
+ } else if (key === "playlistId") {
+ html += ` data-playlist-id="${value}"`;
+ } else {
+ const dataKey =
+ {
+ position: "data-position",
+ theme: "data-theme",
+ lyric: "data-lyric",
+ embed: "data-embed",
+ minimized: "data-default-minimized",
+ autoplay: "data-autoplay",
+ "idle-opacity": "data-idle-opacity",
+ "auto-pause": "data-auto-pause",
+ }[key] || `data-${key}`;
+ html += ` ${dataKey}="${value}"`;
+ }
+ });
+
+ html += ">
";
+ return html;
+ });
+ },
+ };
}
console.log(
- [
- "版本号 v2.1.0",
- "NeteaseMiniPlayer V2 [NMPv2]",
- "BHCN STUDIO & 北海的佰川（ImBHCN[numakkiyu]）",
- "GitHub地址：https://github.com/numakkiyu/NeteaseMiniPlayer",
- "基于 Apache 2.0 开源协议发布",
- ].join("\n")
+ [
+ "版本号 v2.1.0",
+ "NeteaseMiniPlayer V2 [NMPv2]",
+ "BHCN STUDIO & 北海的佰川（ImBHCN[numakkiyu]）",
+ "GitHub地址：https://github.com/numakkiyu/NeteaseMiniPlayer",
+ "基于 Apache 2.0 开源协议发布",
+ ].join("\n")
);
diff --git a/server/api/send-mail.ts b/server/api/send-mail.ts
index d06fe13..89aeff5 100644
--- a/server/api/send-mail.ts
+++ b/server/api/send-mail.ts
@@ -1,103 +1,112 @@
-import { defineEventHandler, createError, readBody } from "h3";
-import nodemailer from "nodemailer";
-import type SMTPTransport from "nodemailer/lib/smtp-transport";
-import { useRuntimeConfig } from "#imports";
-
-type MailConfig = {
- smtpHost?: string;
- smtpPort?: number | string;
- smtpUser?: string;
- smtpPass?: string;
- senderEmail?: string;
- adminEmail?: string;
- smtpSecure?: boolean;
-};
-
-type SendMailPayload = {
- name?: string;
- url?: string;
- desc?: string;
- email?: string;
- avatar?: string;
- message?: string;
-};
-
-const ensureValue = (value?: string, fallback = "未填写") => (value?.trim() ? value.trim() : fallback);
-
-export default defineEventHandler(async (event) => {
- const method = event.node.req.method;
- if (method === "OPTIONS") {
- event.node.res.statusCode = 200;
- return { status: "ok" };
- }
-
- if (method !== "POST") {
- throw createError({ statusCode: 405, statusMessage: "Method Not Allowed" });
- }
-
- const payload = (await readBody一个新的友链申请已提交，以下是可直接复制到项目中的配置：
-
-${friendEntry}
-
- -
申请者信息：
-名称：${ensureValue(name)}
-邮箱：${ensureValue(email)}
- -描述：${ensureValue(desc)}
-头像：${ensureValue(avatar)}
-想说的话：${ensureValue(message)}
-时间：${new Date().toISOString()}
- `; - - const info = await transporter.sendMail({ - from: senderEmail, - to: adminEmail, - replyTo: email, - subject: `友链申请 / 联系表单 · ${ensureValue(name)}`, - html: htmlMessage, - }); - - return { - message: "Mail sent", - id: info.messageId, - }; -}); +import { defineEventHandler, createError, readBody } from "h3"; +import nodemailer from "nodemailer"; +import type SMTPTransport from "nodemailer/lib/smtp-transport"; +import { useRuntimeConfig } from "#imports"; + +type MailConfig = { + smtpHost?: string; + smtpPort?: number | string; + smtpUser?: string; + smtpPass?: string; + senderEmail?: string; + adminEmail?: string; + smtpSecure?: boolean; +}; + +type SendMailPayload = { + name?: string; + url?: string; + desc?: string; + email?: string; + avatar?: string; + message?: string; +}; + +const ensureValue = (value?: string, fallback = "未填写") => + value?.trim() ? value.trim() : fallback; + +export default defineEventHandler(async (event) => { + const method = event.node.req.method; + if (method === "OPTIONS") { + event.node.res.statusCode = 200; + return { status: "ok" }; + } + + if (method !== "POST") { + throw createError({ statusCode: 405, statusMessage: "Method Not Allowed" }); + } + + const payload = (await readBody一个新的友链申请已提交，以下是可直接复制到项目中的配置：
+
+${friendEntry}
+
+ +
申请者信息：
+名称：${ensureValue(name)}
+邮箱：${ensureValue(email)}
+ +描述：${ensureValue(desc)}
+头像：${ensureValue(avatar)}
+想说的话：${ensureValue(message)}
+时间：${new Date().toISOString()}
+ `; + + const info = await transporter.sendMail({ + from: senderEmail, + to: adminEmail, + replyTo: email, + subject: `友链申请 / 联系表单 · ${ensureValue(name)}`, + html: htmlMessage, + }); + + return { + message: "Mail sent", + id: info.messageId, + }; +}); diff --git a/server/api/wakatime.ts b/server/api/wakatime.ts index 9c97922..0e9f928 100644 --- a/server/api/wakatime.ts +++ b/server/api/wakatime.ts @@ -1,56 +1,56 @@ -import { defineEventHandler, getQuery, createError } from "h3"; -import { useRuntimeConfig } from "#imports"; - -export default defineEventHandler(async (event) => { - const res = event.node.res; - res.setHeader("Access-Control-Allow-Origin", "*"); - res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS"); - res.setHeader("Access-Control-Allow-Headers", "Content-Type"); - - if (event.node.req.method === "OPTIONS") { - res.statusCode = 200; - return "ok"; - } - - if (event.node.req.method !== "GET") { - throw createError({ statusCode: 405, statusMessage: "Method Not Allowed" }); - } - - const config = useRuntimeConfig(); - const apiKey = config.wakatimeApiKey; - if (typeof apiKey !== "string") { - throw createError({ statusCode: 500, statusMessage: "Invalid WakaTime API Key configuration" }); - } - - const query = getQuery(event); - const apiUrl = (query.apiUrl as string) || config.wakatimeApiUrl; - - const headers = { - Authorization: `Basic ${Buffer.from(apiKey).toString("base64")}`, - }; - - try { - const [weeklyStatsResponse, allTimeStatsResponse, statusResponse] = await Promise.all([ - fetch(`${apiUrl}/users/current/stats/last_7_days`, { headers }), - fetch(`${apiUrl}/users/current/stats/all_time`, { headers }), - fetch(`${apiUrl}/users/current/status`, { headers }), - ]); - - if (!weeklyStatsResponse.ok) { - throw new Error(`Wakatime API error: ${weeklyStatsResponse.status}`); - } - - const weeklyStatsData = await weeklyStatsResponse.json(); - const allTimeStatsData = allTimeStatsResponse.ok ? await allTimeStatsResponse.json() : null; - const statusData = statusResponse.ok ? await statusResponse.json() : null; - - return { - weekly: weeklyStatsData.data, - allTime: allTimeStatsData ? allTimeStatsData.data : null, - status: statusData, - }; - } catch (error) { - console.error("Wakatime API error:", error); - throw createError({ statusCode: 500, statusMessage: "Failed to fetch Wakatime data" }); - } -}); +import { defineEventHandler, getQuery, createError } from "h3"; +import { useRuntimeConfig } from "#imports"; + +export default defineEventHandler(async (event) => { + const res = event.node.res; + res.setHeader("Access-Control-Allow-Origin", "*"); + res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS"); + res.setHeader("Access-Control-Allow-Headers", "Content-Type"); + + if (event.node.req.method === "OPTIONS") { + res.statusCode = 200; + return "ok"; + } + + if (event.node.req.method !== "GET") { + throw createError({ statusCode: 405, statusMessage: "Method Not Allowed" }); + } + + const config = useRuntimeConfig(); + const apiKey = config.wakatimeApiKey; + if (typeof apiKey !== "string") { + throw createError({ statusCode: 500, statusMessage: "Invalid WakaTime API Key configuration" }); + } + + const query = getQuery(event); + const apiUrl = (query.apiUrl as string) || config.wakatimeApiUrl; + + const headers = { + Authorization: `Basic ${Buffer.from(apiKey).toString("base64")}`, + }; + + try { + const [weeklyStatsResponse, allTimeStatsResponse, statusResponse] = await Promise.all([ + fetch(`${apiUrl}/users/current/stats/last_7_days`, { headers }), + fetch(`${apiUrl}/users/current/stats/all_time`, { headers }), + fetch(`${apiUrl}/users/current/status`, { headers }), + ]); + + if (!weeklyStatsResponse.ok) { + throw new Error(`Wakatime API error: ${weeklyStatsResponse.status}`); + } + + const weeklyStatsData = await weeklyStatsResponse.json(); + const allTimeStatsData = allTimeStatsResponse.ok ? await allTimeStatsResponse.json() : null; + const statusData = statusResponse.ok ? await statusResponse.json() : null; + + return { + weekly: weeklyStatsData.data, + allTime: allTimeStatsData ? allTimeStatsData.data : null, + status: statusData, + }; + } catch (error) { + console.error("Wakatime API error:", error); + throw createError({ statusCode: 500, statusMessage: "Failed to fetch Wakatime data" }); + } +}); diff --git a/tailwind.config.ts b/tailwind.config.ts index b497129..6a819d1 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,39 +1,51 @@ -import type { Config } from "tailwindcss"; - -export default { - content: ["./app/**/*.{vue,js,ts}", "./app/components/**/*.vue", "./app/pages/**/*.vue", "./app/layouts/**/*.vue"], - theme: { - extend: { - colors: { - // 自定义颜色变量（对应现有的 CSS 变量） - primary: "rgb(124, 193, 255)", - accent: "rgb(124, 193, 255)", - "surface-primary": "rgb(15, 22, 41)", - "surface-secondary": "rgb(27, 43, 75)", - "text-primary": "rgb(232, 238, 252)", - "text-secondary": "rgb(159, 172, 200)", - "text-muted": "rgb(104, 120, 152)", - }, - fontFamily: { - sans: ['"Inter"', "system-ui", "-apple-system", "BlinkMacSystemFont", '"Segoe UI"', "sans-serif"], - }, - spacing: { - "safe-x": "max(1rem, env(safe-area-inset-left))", - "safe-y": "max(1rem, env(safe-area-inset-top))", - }, - boxShadow: { - "sm-dark": "0 4px 12px rgba(0, 0, 0, 0.15)", - "md-dark": "0 8px 24px rgba(0, 0, 0, 0.18)", - "lg-dark": "0 12px 32px rgba(0, 0, 0, 0.22)", - "xl-dark": "0 16px 48px rgba(0, 0, 0, 0.25)", - }, - backgroundImage: { - "gradient-dark": "radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629)", - }, - backdropBlur: { - xs: "2px", - }, - }, - }, - plugins: [], -} satisfies Config; +import type { Config } from "tailwindcss"; + +export default { + content: [ + "./app/**/*.{vue,js,ts}", + "./app/components/**/*.vue", + "./app/pages/**/*.vue", + "./app/layouts/**/*.vue", + ], + theme: { + extend: { + colors: { + // 自定义颜色变量（对应现有的 CSS 变量） + primary: "rgb(124, 193, 255)", + accent: "rgb(124, 193, 255)", + "surface-primary": "rgb(15, 22, 41)", + "surface-secondary": "rgb(27, 43, 75)", + "text-primary": "rgb(232, 238, 252)", + "text-secondary": "rgb(159, 172, 200)", + "text-muted": "rgb(104, 120, 152)", + }, + fontFamily: { + sans: [ + '"Inter"', + "system-ui", + "-apple-system", + "BlinkMacSystemFont", + '"Segoe UI"', + "sans-serif", + ], + }, + spacing: { + "safe-x": "max(1rem, env(safe-area-inset-left))", + "safe-y": "max(1rem, env(safe-area-inset-top))", + }, + boxShadow: { + "sm-dark": "0 4px 12px rgba(0, 0, 0, 0.15)", + "md-dark": "0 8px 24px rgba(0, 0, 0, 0.18)", + "lg-dark": "0 12px 32px rgba(0, 0, 0, 0.22)", + "xl-dark": "0 16px 48px rgba(0, 0, 0, 0.25)", + }, + backgroundImage: { + "gradient-dark": "radial-gradient(circle at 20% 20%, #1b2b4b, #0f1629)", + }, + backdropBlur: { + xs: "2px", + }, + }, + }, + plugins: [], +} satisfies Config; diff --git a/tsconfig.json b/tsconfig.json index 9e2c134..8ea5781 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,10 +1,10 @@ -{ - "extends": "./.nuxt/tsconfig.json", - "compilerOptions": { - "types": ["node"] - }, - "vueCompilerOptions": { - "globalTypesPath": "./node_modules/.vue-global-types" - }, - "include": ["nuxt.config.ts", "app/**/*.ts", "app/**/*.vue", "app/**/*.d.ts", "server/**/*.ts"] -} +{ + "extends": "./.nuxt/tsconfig.json", + "compilerOptions": { + "types": ["node"] + }, + "vueCompilerOptions": { + "globalTypesPath": "./node_modules/.vue-global-types" + }, + "include": ["nuxt.config.ts", "app/**/*.ts", "app/**/*.vue", "app/**/*.d.ts", "server/**/*.ts"] +} diff --git a/tsconfig.node.json b/tsconfig.node.json index d02ef0f..4bb1b7d 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -1,11 +1,11 @@ -{ - "compilerOptions": { - "composite": true, - "skipLibCheck": true, - "module": "ESNext", - "moduleResolution": "bundler", - "allowSyntheticDefaultImports": true, - "types": ["node"] - }, - "include": ["nuxt.config.ts"] -} +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true, + "types": ["node"] + }, + "include": ["nuxt.config.ts"] +} diff --git a/vercel.json b/vercel.json index 3956341..d1b45a3 100644 --- a/vercel.json +++ b/vercel.json @@ -1,4 +1,4 @@ -{ - "version": 2, - "framework": "nuxtjs" -} \ No newline at end of file +{ + "version": 2, + "framework": "nuxtjs" +}