@fuxishi/vitepress-theme 1.0.10 → 1.0.12

package/README.md

@@ -7,17 +7,19 @@
 ## 特性
 
 - 🎵 **悬浮音乐球** — 毛玻璃质感的浮动播放器，支持单曲/列表模式，紫蓝渐变进度环与四重播放动效
-- 🎊 **点击彩纸** — 全局点击彩纸特效，支持金色星星、彩色烟花和自定义 Emoji
+- 🎊 **点击彩纸** — 全局点击彩纸特效，支持金色星星、彩色纸片和自定义 Emoji
 - 🎨 **Hero 图片取色** — 自动提取首页 hero 图片颜色，动态应用到背景光晕、标题渐变、代码块光束和音乐球
 - ✨ **Feature 光效** — 首页 Feature 卡片鼠标追踪光晕效果
 - ✨ **光束边框** — 暗色模式下代码块和导航 hover 时展示紫青品牌色光束旋转边框
 - 🔄 **主题切换动画** — View Transition API 实现亮暗模式圆形扩散动画
 - 📜 **平滑滚动** — 右侧大纲导航点击时平滑滚动，指示条丝滑过渡
 - 🎨 **标题装饰** — h1-h4 各有不同颜色的下划线装饰
-- 📦 **代码块折叠** — 超过指定行数的代码块自动折叠，底部淡出遮罩，可配置折叠行数阈值
+- 📦 **代码块折叠** — 超过指定行数的代码块自动折叠，底部毛玻璃模糊遮罩，可配置折叠行数阈值
 - ⚙️ **类型安全** — 完整的 TypeScript 类型定义，IDE 友好
 
-> **注意：** 当前版本仅适用于 VitePress `1.6.4` 版本。如果你使用 VitePress 2.x，请等待主题后续版本适配。
+> **注意：** `1.0.9` 及之前的版本仅适用于 VitePress `1.6.4`。如果你使用 VitePress 2.x，请等待主题后续版本适配。
+>
+> ⚠️ `1.0.10` 版本的代码块折叠展开功能存在问题，已废弃，请升级到 `1.0.11` 及以上版本。
 
 ## 安装
 
@@ -38,10 +40,10 @@ npm install vitepress
 创建 `.vitepress/theme/index.ts`：
 
 ```ts
-import FxTheme from "@fuxishi/vitepress-theme";
-import "@fuxishi/vitepress-theme/style.css";
+import FxTheme from "@fuxishi/vitepress-theme"
+import "@fuxishi/vitepress-theme/style.css"
 
-export default FxTheme;
+export default FxTheme
 ```
 
 ### 2. 继承配置
@@ -49,9 +51,9 @@ export default FxTheme;
 创建 `.vitepress/config.mts`：
 
 ```ts
-import { defineConfigWithTheme } from "vitepress";
-import fxConfig from "@fuxishi/vitepress-theme/config";
-import type { FxThemeConfig } from "@fuxishi/vitepress-theme/config";
+import { defineConfigWithTheme } from "vitepress"
+import fxConfig from "@fuxishi/vitepress-theme/config"
+import type { FxThemeConfig } from "@fuxishi/vitepress-theme/config"
 
 export default defineConfigWithTheme<FxThemeConfig>({
   extends: fxConfig,
@@ -71,8 +73,8 @@ export default defineConfigWithTheme<FxThemeConfig>({
     },
     // 启用彩纸效果
     confetti: true,
-    // 彩色烟花
-    // confetti: { shape: "firework" },
+    // 彩色纸片
+    // confetti: { shape: "colored-paper" },
     // 自定义 Emoji
     // confetti: { shapes: ["🌸", "🎀"] },
     // 启用 hero 图片取色
@@ -84,7 +86,7 @@ export default defineConfigWithTheme<FxThemeConfig>({
     // 自定义折叠行数
     // codeBlockFold: { lines: 20 },
   },
-});
+})
 ```
 
 ### 3. 启动开发服务器
@@ -99,21 +101,22 @@ npx vitepress dev
 
 继承自 VitePress `DefaultTheme.Config`，新增以下字段：
 
-| 配置项               | 类型                   | 默认值   | 说明                                                   |
-| -------------------- | ---------------------- | -------- | ------------------------------------------------------ |
-| `musicBall.enable`   | `boolean`              | `true`   | 是否启用音乐球                                         |
-| `musicBall.visible`  | `boolean`              | `true`   | 是否可见                                               |
-| `musicBall.autoplay` | `boolean`              | `false`  | 自动播放                                               |
-| `musicBall.loop`     | `boolean`              | `true`   | 循环播放（单曲模式）                                   |
-| `musicBall.src`      | `string`               | `''`     | 单首音乐地址                                           |
-| `musicBall.list`     | `MusicItem[]`          | —        | 多首音乐列表                                           |
-| `confetti`           | `boolean \| object`    | `true`   | 启用彩纸效果                                           |
-| `confetti.shape`     | `'star' \| 'firework'` | `'star'` | 预设形状                                               |
-| `confetti.shapes`    | `string \| string[]`   | —        | 自定义 Emoji 形状                                      |
-| `heroImageColor`     | `boolean`              | `false`  | 自动提取 hero 图片颜色（影响光晕、标题、光束、音乐球） |
-| `smoothScroll`       | `boolean`              | `false`  | 启用平滑滚动和大纲指示条过渡动画                       |
-| `codeBlockFold`      | `boolean \| object`    | `true`   | 代码块折叠，默认启用                                   |
-| `codeBlockFold.lines`| `number`               | `10`     | 超过多少行折叠                                         |
+| 配置项                | 类型                        | 默认值   | 说明                                                   |
+| --------------------- | --------------------------- | -------- | ------------------------------------------------------ |
+| `musicBall.enable`    | `boolean`                   | `true`   | 是否启用音乐球                                         |
+| `musicBall.visible`   | `boolean`                   | `true`   | 是否可见                                               |
+| `musicBall.autoplay`  | `boolean`                   | `false`  | 自动播放                                               |
+| `musicBall.loop`      | `boolean`                   | `true`   | 循环播放（单曲模式）                                   |
+| `musicBall.src`       | `string`                    | `''`     | 单首音乐地址                                           |
+| `musicBall.list`      | `MusicItem[]`               | —        | 多首音乐列表                                           |
+| `confetti`            | `boolean \| object`         | `true`   | 启用彩纸效果                                           |
+| `confetti.shape`      | `'star' \| 'colored-paper'` | `'star'` | 预设形状                                               |
+| `confetti.shapes`     | `string \| string[]`        | —        | 自定义 Emoji 形状                                      |
+| `confetti.secondary`  | `boolean`                   | `true`   | 是否添加二次散射粒子                                   |
+| `heroImageColor`      | `boolean`                   | `false`  | 自动提取 hero 图片颜色（影响光晕、标题、光束、音乐球） |
+| `smoothScroll`        | `boolean`                   | `false`  | 启用平滑滚动和大纲指示条过渡动画                       |
+| `codeBlockFold`       | `boolean \| object`         | `true`   | 代码块折叠，默认启用                                   |
+| `codeBlockFold.lines` | `number`                    | `10`     | 超过多少行折叠                                         |
 
 ## 导出
 

package/dist/chunk/FxCodeBlockFold-C7zqZ39g.js

@@ -0,0 +1,57 @@
+import { t as e } from "./icons-DtAsNqxj.js";
+import { defineComponent as t, nextTick as n, onBeforeUnmount as r, onMounted as i, watch as a } from "vue";
+import { useRoute as o } from "vitepress";
+//#region .vitepress/components/FxCodeBlockFold.ts
+var s = "fx-code-folded", c = "fx-code-fold-overlay", l = t({
+	props: { lines: {
+		type: Number,
+		default: 10
+	} },
+	setup(t) {
+		function l() {
+			let n = t.lines ?? 10;
+			document.querySelectorAll(".vp-adaptive-theme").forEach((t) => {
+				if (t.classList.contains(c) || t.classList.contains("vp-code-group")) return;
+				let r = t.querySelector("pre.vp-code code");
+				if (!r) return;
+				if (r.querySelectorAll(".line").length <= n) {
+					t.classList.add("fx-code-no-fold");
+					return;
+				}
+				if (t.querySelector(`.${c}`)) return;
+				t.classList.add(s), t.classList.add("fx-code-foldable");
+				let i = document.createElement("div");
+				i.className = c;
+				let a = document.createElement("span");
+				a.className = "fx-code-fold-label", a.innerHTML = `展开${e("fold")}`, i.appendChild(a), i.addEventListener("click", () => {
+					let n = t.classList.toggle(s);
+					i.classList.toggle("fx-code-fold-expanded", !n), a.innerHTML = n ? `展开${e("fold")}` : `收起${e("unfold")}`;
+				}), t.appendChild(i);
+			});
+		}
+		let u = null;
+		function d() {
+			u?.disconnect();
+			let e = document.querySelector(".vp-doc");
+			e && (u = new MutationObserver(() => {
+				requestAnimationFrame(l);
+			}), u.observe(e, {
+				childList: !0,
+				subtree: !0
+			}));
+		}
+		i(() => {
+			l(), d();
+		});
+		let f = o();
+		return a(() => f.path, () => {
+			n(() => {
+				l(), d();
+			});
+		}), r(() => {
+			u?.disconnect();
+		}), () => null;
+	}
+});
+//#endregion
+export { l as default };

package/dist/chunk/FxConfetti-DFRD5KKS.js

@@ -0,0 +1,87 @@
+import { defineComponent as e, onBeforeUnmount as t, onMounted as n } from "vue";
+import r from "canvas-confetti";
+//#endregion
+//#region .vitepress/components/FxConfetti.vue
+var i = /* @__PURE__ */ e({
+	__name: "FxConfetti",
+	props: { confetti: { type: [Boolean, Object] } },
+	setup(e) {
+		let i = e, a = typeof i.confetti == "object" ? i.confetti : {}, o = a.shape || "star", s = a.secondary !== !1, c = a.shapes ? Array.isArray(a.shapes) ? a.shapes : [a.shapes] : null, l = [], u = [];
+		function d(e, t, n, i = "circle") {
+			let a = () => {
+				r({
+					...n,
+					particleCount: 10,
+					scalar: 1.2
+				}), r({
+					...n,
+					particleCount: 10,
+					scalar: .75,
+					...s ? { shapes: [i] } : {}
+				});
+			};
+			u.push(setTimeout(a, 0)), u.push(setTimeout(a, 50)), u.push(setTimeout(a, 100));
+		}
+		let f = (e, t) => d(e, t, {
+			spread: 360,
+			ticks: 50,
+			gravity: 0,
+			decay: .94,
+			startVelocity: 10,
+			colors: [
+				"FFE400",
+				"FFBD00",
+				"E89400",
+				"FFCA6C",
+				"FDFFB8"
+			],
+			origin: {
+				x: e,
+				y: t
+			},
+			shapes: ["star"]
+		}), p = (e, t) => d(e, t, {
+			spread: 360,
+			ticks: 50,
+			gravity: 0,
+			decay: .94,
+			startVelocity: 10,
+			colors: [
+				"#FF1461",
+				"#18FF92",
+				"#5A87FF",
+				"#FBF38C",
+				"#FF6B35"
+			],
+			origin: {
+				x: e,
+				y: t
+			}
+		}, "square"), m = (e, t) => d(e, t, {
+			spread: 360,
+			ticks: 50,
+			gravity: 0,
+			decay: .94,
+			startVelocity: 10,
+			shapes: l,
+			origin: {
+				x: e,
+				y: t
+			}
+		});
+		function h(e) {
+			let t = e.clientX / window.innerWidth, n = e.clientY / window.innerHeight;
+			l.length > 0 ? m(t, n) : o === "colored-paper" ? p(t, n) : f(t, n);
+		}
+		return n(() => {
+			c && (l = c.map((e) => r.shapeFromText({
+				text: e,
+				scalar: 2
+			}))), window.addEventListener("click", h);
+		}), t(() => {
+			window.removeEventListener("click", h), u.forEach(clearTimeout);
+		}), (e, t) => null;
+	}
+});
+//#endregion
+export { i as default };

package/dist/chunk/FxHeroImageBg-CiY3qciK.js

@@ -0,0 +1,216 @@
+import { defineComponent as e, nextTick as t, onBeforeUnmount as n, onMounted as r, watch as i } from "vue";
+import { useData as a, useRoute as o } from "vitepress";
+import { Vibrant as s } from "node-vibrant/browser";
+//#region .vitepress/components/FxHeroImageBg.ts
+var c = "fx-hero-colors";
+function l() {
+	try {
+		let e = localStorage.getItem(c);
+		return e ? JSON.parse(e) : null;
+	} catch {
+		return null;
+	}
+}
+function u(e) {
+	try {
+		localStorage.setItem(c, JSON.stringify(e));
+	} catch {}
+}
+function d(e) {
+	return [
+		e.Vibrant,
+		e.DarkVibrant,
+		e.LightVibrant,
+		e.Muted,
+		e.DarkMuted,
+		e.LightMuted
+	].filter(Boolean);
+}
+function f(e) {
+	return e.slice().sort((e, t) => e.hsl[0] - t.hsl[0]).map((e) => e.hex);
+}
+function p(e) {
+	let t = d(e);
+	if (t.length === 0) return "-webkit-linear-gradient(-45deg, #bd34fe 50%, #47caff 50%)";
+	let n = f(t);
+	return `conic-gradient(from 0deg, ${[...n, n[0]].join(", ")})`;
+}
+function m(e, t) {
+	let n = Math.abs(e - t);
+	return Math.min(n, 360 - n);
+}
+function h(e) {
+	let t = d(e);
+	if (t.length < 2) return "linear-gradient(120deg, #bd34fe, #41d1ff)";
+	let n = -1, r = [t[0].hex, t[1].hex];
+	for (let e = 0; e < t.length; e++) for (let i = e + 1; i < t.length; i++) {
+		let a = m(t[e].hsl[0], t[i].hsl[0]);
+		a > n && (n = a, r = [t[e].hex, t[i].hex]);
+	}
+	return `linear-gradient(120deg, ${r[0]}, ${r[1]})`;
+}
+function g(e) {
+	return `${parseInt(e.slice(1, 3), 16)}, ${parseInt(e.slice(3, 5), 16)}, ${parseInt(e.slice(5, 7), 16)}`;
+}
+function _(e) {
+	let t = d(e);
+	if (t.length < 2) return ["189, 52, 254", "65, 209, 255"];
+	let n = -1, r = [t[0], t[1]];
+	for (let e = 0; e < t.length; e++) for (let i = e + 1; i < t.length; i++) {
+		let a = m(t[e].hsl[0], t[i].hsl[0]);
+		a > n && (n = a, r = [t[e], t[i]]);
+	}
+	return [g(r[0].hex), g(r[1].hex)];
+}
+function v() {
+	return document.documentElement.classList.contains("dark");
+}
+function y(e) {
+	let [t, n] = _(e);
+	return {
+		imageGradient: p(e),
+		nameGradient: h(e),
+		beamC1: t,
+		beamC2: n
+	};
+}
+function b(e) {
+	let t = document.documentElement;
+	t.style.setProperty("--vp-home-hero-image-background-image", e.imageGradient), t.style.setProperty("--vp-home-hero-name-background", e.nameGradient), t.style.setProperty("--fx-beam-c1", e.beamC1), t.style.setProperty("--fx-beam-c2", e.beamC2);
+}
+function x(e) {
+	let t = document.documentElement;
+	t.style.setProperty("--fx-beam-c1", e.beamC1), t.style.setProperty("--fx-beam-c2", e.beamC2);
+}
+var S = e({
+	props: { heroImageColor: {
+		type: Boolean,
+		default: !1
+	} },
+	render: () => null,
+	setup(e) {
+		if (!e.heroImageColor) return;
+		let d = null, f = o(), { frontmatter: p } = a();
+		function m() {
+			let e = document.documentElement;
+			e.style.removeProperty("--vp-home-hero-image-background-image"), e.style.removeProperty("--vp-home-hero-name-background"), e.style.removeProperty("--fx-beam-c1"), e.style.removeProperty("--fx-beam-c2");
+		}
+		function h(e) {
+			return v() ? e.dark || e.light : e.light || e.dark;
+		}
+		function g(e) {
+			let t = l();
+			return !t || !t.images ? !1 : e && (e.light && t.images.light && e.light !== t.images.light || e.dark && t.images.dark && e.dark !== t.images.dark) ? (localStorage.removeItem(c), !0) : !1;
+		}
+		function _() {
+			let e = l();
+			if (!e) return !1;
+			let t = h(e);
+			return t ? (b(t), !0) : !1;
+		}
+		function S() {
+			let e = l();
+			if (!e) return !1;
+			let t = h(e);
+			return t ? (x(t), !0) : !1;
+		}
+		function C() {
+			return p.value.fxHeroImages || {};
+		}
+		async function w() {
+			try {
+				let e = await import(
+					/* @vite-ignore */
+					"/index.md"
+), t = (typeof e.__pageData == "string" ? JSON.parse(e.__pageData) : e.__pageData)?.frontmatter?.hero?.image;
+				return t ? typeof t == "string" ? {
+					light: t,
+					dark: t
+				} : {
+					light: t.light,
+					dark: t.dark
+				} : null;
+			} catch {
+				return null;
+			}
+		}
+		async function T(e, t) {
+			let n = e.src;
+			if (n) try {
+				let e = y(await s.from(n).quality(1).getPalette());
+				(v() && t === "dark" || !v() && t === "light") && b(e);
+				let r = l() || {};
+				r[t] = e, r.images ||= {}, r.images[t] = n, u(r);
+			} catch {}
+		}
+		async function E(e, t) {
+			try {
+				let n = y(await s.from(e).quality(1).getPalette()), r = l() || {};
+				return r[t] = n, r.images ||= {}, r.images[t] = e, u(r), n;
+			} catch {
+				return null;
+			}
+		}
+		async function D(e) {
+			if (!e.light && !e.dark) return;
+			let t = {};
+			if (e.light) {
+				let n = await E(e.light, "light");
+				n && (t.light = n);
+			}
+			if (e.dark) {
+				let n = await E(e.dark, "dark");
+				n && (t.dark = n);
+			}
+			if (t.light || t.dark) {
+				let e = v() ? t.dark || t.light : t.light || t.dark;
+				e && b(e);
+			}
+		}
+		async function O() {
+			let e = C();
+			if (e.light || e.dark) {
+				await D(e);
+				return;
+			}
+			let t = await w();
+			if (t) {
+				await D(t);
+				return;
+			}
+			try {
+				let e = await (await fetch(window.location.origin + "/")).text(), t = new DOMParser().parseFromString(e, "text/html").querySelectorAll(".VPHero .image-container img.VPImage"), n = {};
+				t.forEach((e) => {
+					let t = e.getAttribute("src");
+					t && (e.classList.contains("dark") ? n.dark = t : n.light = t);
+				}), (n.light || n.dark) && await D(n);
+			} catch {}
+		}
+		function k() {
+			let e = document.querySelector(".VPHero .image-container img.VPImage.light"), t = document.querySelector(".VPHero .image-container img.VPImage.dark");
+			e || t ? (e && e.complete && e.naturalWidth > 0 ? T(e, "light") : e && e.addEventListener("load", () => T(e, "light"), { once: !0 }), t && t.complete && t.naturalWidth > 0 ? T(t, "dark") : t && t.addEventListener("load", () => T(t, "dark"), { once: !0 })) : (m(), S(), w().then((e) => {
+				if (e && (e.light || e.dark)) {
+					let t = l();
+					t?.images && (e.light && t.images.light && e.light !== t.images.light || e.dark && t.images.dark && e.dark !== t.images.dark) && (localStorage.removeItem(c), D(e));
+				}
+			}), O());
+		}
+		r(() => {
+			g(C()), _() || O(), k(), d = new MutationObserver((e) => {
+				for (let t of e) if (t.attributeName === "class") {
+					S(), k();
+					break;
+				}
+			}), d.observe(document.documentElement, {
+				attributes: !0,
+				attributeFilter: ["class"]
+			});
+		}), i(() => f.path, () => {
+			t(k);
+		}), n(() => {
+			d?.disconnect(), m();
+		});
+	}
+});
+//#endregion
+export { S as default };

package/dist/chunk/{FxHomeFeatureBefore-D5QFpd8Y.js → FxHomeFeatureBefore-Cd9m9wit.js}

@@ -10,28 +10,30 @@ var r = e({ setup() {
 		"#008EFF",
 		"#8B5CF6",
 		"#10B981"
-	];
-	function r(e) {
-		let t = e.target.closest(".VPFeature");
-		if (!t) return;
-		let n = t.getBoundingClientRect(), r = e.clientX - n.left, i = e.clientY - n.top;
-		t.style.setProperty("--x", r + "px"), t.style.setProperty("--y", i + "px");
+	], r = 0;
+	function i(e) {
+		cancelAnimationFrame(r), r = requestAnimationFrame(() => {
+			let t = e.target.closest(".VPFeature");
+			if (!t) return;
+			let n = t.getBoundingClientRect();
+			t.style.setProperty("--x", e.clientX - n.left + "px"), t.style.setProperty("--y", e.clientY - n.top + "px");
+		});
 	}
-	function i() {
+	function a() {
 		document.querySelectorAll(".VPHomeFeatures .VPFeature").forEach((t, n) => {
 			t.style.setProperty("--color", e[n % e.length]);
 		});
 	}
-	let a = new MutationObserver(i);
+	let o = null;
 	return n(() => {
-		document.addEventListener("mousemove", r);
+		document.addEventListener("mousemove", i);
 		let e = document.querySelector(".VPHomeFeatures");
-		e && a.observe(e, {
+		e && (o = new MutationObserver(a), o.observe(e, {
 			childList: !0,
 			subtree: !0
-		}), i();
+		})), a();
 	}), t(() => {
-		document.removeEventListener("mousemove", r), a.disconnect();
+		cancelAnimationFrame(r), document.removeEventListener("mousemove", i), o?.disconnect();
 	}), () => null;
 } });
 //#endregion