@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/three/effects/Confetti.d.ts

@@ -0,0 +1,62 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type EffectProps } from '../core/EffectSurface';
+/** 彩纸的默认色板：图表色板的前六个 */
+export declare const CONFETTI_PALETTE: readonly string[];
+/** 喷出的位置：相对区域的比例，x 从左到右、y 从上到下（0–1） */
+export interface ConfettiOrigin {
+    /** 从左（0）到右（1） */
+    x: number;
+    /** 从上（0）到下（1） */
+    y: number;
+}
+/** 未声明的属性落到外层 div 上 */
+export interface ConfettiProps extends Omit<EffectProps, 'children' | 'fallback' | 'paused'> {
+    /** 每变一次放一批（挂载时的初始值不放）：写成计数、时间戳或任何会变的值 */
+    trigger?: unknown;
+    /**
+     * 喷出的位置
+     * @default { x: 0.5, y: 0.6 }
+     */
+    origin?: ConfettiOrigin;
+    /**
+     * 喷出的方向（度），90 是正上方，0 向右
+     * @default 90
+     */
+    angle?: number;
+    /**
+     * 散开的角度（度）
+     * @default 70
+     */
+    spread?: number;
+    /**
+     * 每批的数量
+     * @default 160
+     */
+    count?: number;
+    /**
+     * 初速度的倍数
+     * @default 1
+     */
+    velocity?: number;
+    /**
+     * 重力的倍数
+     * @default 1
+     */
+    gravity?: number;
+    /** 色板（token 或 CSS 颜色）；变了下一次放时生效 */
+    palette?: readonly string[];
+    /**
+     * 铺满视口，放在顶层；false 时铺满最近的定位父元素
+     * @default true
+     */
+    fullscreen?: boolean;
+    /** 这几批彩纸都落完（或减少动态效果时没有放）后调用 */
+    onDone?: () => void;
+}
+/** Confetti 的样式：root、fullscreen */
+export declare const confettiStyles: Readonly<{
+    fullscreen: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 彩纸 */
+export declare const Confetti: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ConfettiProps>;

package/dist/three/effects/Confetti.js

@@ -0,0 +1,242 @@
+import { colors } from "../../config/theme/tokens.js";
+import { mergePartProps } from "../../utils/props.js";
+import { toElement } from "../../utils/dom/element.js";
+import { EffectSurface } from "../core/EffectSurface.js";
+import { createVNode, mergeProps, ref, watch } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Color, DoubleSide, InstancedMesh, Matrix4, MeshBasicMaterial, OrthographicCamera, PlaneGeometry, Quaternion, Vector3 } from "three";
+//#region src/three/effects/Confetti.tsx
+/** 彩纸的默认色板：图表色板的前六个 */
+var CONFETTI_PALETTE = [
+	colors.chart1,
+	colors.chart2,
+	colors.chart3,
+	colors.chart4,
+	colors.chart5,
+	colors.chart6
+];
+/** 喷出的位置：相对区域的比例，x 从左到右、y 从上到下（0–1） */
+/** 未声明的属性落到外层 div 上 */
+/** Confetti 的样式：root、fullscreen */
+var confettiStyles = css.create({
+	root: {
+		position: "absolute",
+		inset: 0,
+		pointerEvents: "none"
+	},
+	fullscreen: {
+		position: "fixed",
+		inset: 0,
+		width: "100vw",
+		height: "100vh",
+		maxWidth: "none",
+		maxHeight: "none",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		overflow: "hidden"
+	}
+});
+/** 同时在飘的彩纸上限 */
+var MAX_PIECES = 900;
+/** 一片彩纸飘多久（秒），最后一段缩小消失 */
+var LIFETIME = [3.2, 4.6];
+var SHRINK = .6;
+/** 重力：每秒加速多少个区域高度 */
+var GRAVITY = 1.1;
+/** 一批：放的那一刻的参数 */
+var random = (min, max) => min + Math.random() * (max - min);
+/** 彩纸 */
+var Confetti = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const trigger = readonlyProp(_props, "trigger");
+	const origin = readonlyProp(_props, "origin", () => ({
+		x: .5,
+		y: .6
+	}));
+	const angle = readonlyProp(_props, "angle", 90);
+	const spread = readonlyProp(_props, "spread", 70);
+	const count = readonlyProp(_props, "count", 160);
+	const velocity = readonlyProp(_props, "velocity", 1);
+	const gravity = readonlyProp(_props, "gravity", 1);
+	const palette = readonlyProp(_props, "palette", () => CONFETTI_PALETTE);
+	const fullscreen = readonlyProp(_props, "fullscreen", true);
+	const onDone = readonlyProp(_props, "onDone");
+	const rest = restProps(_props, _ctx, true);
+	const pending = [];
+	let active = ref(false);
+	watch(() => trigger.value, () => {
+		pending.push({
+			origin: origin.value,
+			angle: angle.value,
+			spread: spread.value,
+			count: count.value,
+			velocity: velocity.value,
+			gravity: gravity.value
+		});
+		active.value = true;
+	});
+	function finish() {
+		queueMicrotask(() => {
+			if (pending.length) return;
+			active.value = false;
+			onDone.value?.();
+		});
+	}
+	/** 顶层显示：卸载时元素随之移除，不用手动收起 */
+	function showOnTop(element) {
+		const root = toElement(element);
+		if (!fullscreen.value || !root || !("showPopover" in root)) return;
+		requestAnimationFrame(() => {
+			if (root.isConnected && !root.matches(":popover-open")) root.showPopover();
+		});
+	}
+	return () => active.value && createVNode(EffectSurface, mergeProps(rest, { ref: showOnTop }, {
+		"sx": [
+			confettiStyles.root,
+			fullscreen.value && confettiStyles.fullscreen,
+			rest.sx
+		],
+		"popover": fullscreen.value ? "manual" : void 0,
+		"aria-hidden": "true",
+		"fallback": false,
+		"propsCanvas": mergePartProps({}, rest.propsCanvas, { onStatusChange: (status) => {
+			if (status !== "fallback") return;
+			pending.length = 0;
+			finish();
+		} }),
+		"sceneKey": palette.value.join(","),
+		"setup": _cache[0] || (_cache[0] = ({ scene, size: area, still, themeColorList }) => {
+			if (still) {
+				pending.length = 0;
+				finish();
+				return;
+			}
+			const camera = new OrthographicCamera(0, 1, 1, 0, -500, 500);
+			const tints = themeColorList(palette.value);
+			const mesh = new InstancedMesh(new PlaneGeometry(1, 1), new MeshBasicMaterial({ side: DoubleSide }), MAX_PIECES);
+			mesh.frustumCulled = false;
+			mesh.count = 0;
+			scene.add(mesh);
+			const position = new Float32Array(MAX_PIECES * 2);
+			const speed = new Float32Array(MAX_PIECES * 2);
+			const shape = new Float32Array(MAX_PIECES * 2);
+			const axis = new Float32Array(MAX_PIECES * 3);
+			const turn = new Float32Array(MAX_PIECES * 2);
+			const sway = new Float32Array(MAX_PIECES * 2);
+			const life = new Float32Array(MAX_PIECES * 2);
+			const fall = new Float32Array(MAX_PIECES);
+			const tint = new Uint8Array(MAX_PIECES);
+			let alive = 0;
+			function launch(burst) {
+				const x0 = burst.origin.x * area.width;
+				const y0 = (1 - burst.origin.y) * area.height;
+				const base = area.height * 3.2 * burst.velocity;
+				for (let n = 0; n < burst.count && alive < MAX_PIECES; n++, alive++) {
+					const i = alive;
+					const direction = (burst.angle + random(-burst.spread / 2, burst.spread / 2)) * Math.PI / 180;
+					const v = base * random(.45, 1);
+					position[i * 2] = x0;
+					position[i * 2 + 1] = y0;
+					speed[i * 2] = Math.cos(direction) * v;
+					speed[i * 2 + 1] = Math.sin(direction) * v;
+					const width = random(7, 12);
+					shape[i * 2] = width;
+					shape[i * 2 + 1] = width * random(.45, .8);
+					const a = new Vector3(random(-1, 1), random(-1, 1), random(-1, 1)).normalize();
+					axis.set([
+						a.x,
+						a.y,
+						a.z
+					], i * 3);
+					turn[i * 2] = random(0, Math.PI * 2);
+					turn[i * 2 + 1] = random(6, 14) * (Math.random() < .5 ? -1 : 1);
+					sway[i * 2] = random(0, Math.PI * 2);
+					sway[i * 2 + 1] = random(20, 60);
+					life[i * 2] = 0;
+					life[i * 2 + 1] = random(...LIFETIME);
+					fall[i] = burst.gravity;
+					tint[i] = Math.floor(Math.random() * tints.length);
+				}
+			}
+			/** 把第 to 片换成第 from 片（落完的那片用最后一片补上，活着的始终在前面） */
+			function move(from, to) {
+				for (const [array, size] of [
+					[position, 2],
+					[speed, 2],
+					[shape, 2],
+					[axis, 3],
+					[turn, 2],
+					[sway, 2],
+					[life, 2]
+				]) array.copyWithin(to * size, from * size, from * size + size);
+				fall[to] = fall[from];
+				tint[to] = tint[from];
+			}
+			const matrix = new Matrix4();
+			const rotation = new Quaternion();
+			const scale = new Vector3();
+			const at = new Vector3();
+			const normal = new Vector3();
+			const shade = new Color();
+			return {
+				resize: (next, context) => {
+					camera.right = next.width;
+					camera.top = next.height;
+					camera.updateProjectionMatrix();
+					context.camera = camera;
+				},
+				frame: ({ delta }) => {
+					while (pending.length && area.height > 0) launch(pending.shift());
+					const damping = Math.exp(-2.6 * delta);
+					for (let i = 0; i < alive; i++) {
+						life[i * 2] += delta;
+						const age = life[i * 2];
+						const lifetime = life[i * 2 + 1];
+						if (age >= lifetime || position[i * 2 + 1] < -40) {
+							move(--alive, i--);
+							continue;
+						}
+						speed[i * 2] *= damping;
+						speed[i * 2 + 1] = speed[i * 2 + 1] * damping - area.height * GRAVITY * fall[i] * delta;
+						sway[i * 2] += delta * 4;
+						position[i * 2] += (speed[i * 2] + Math.sin(sway[i * 2]) * sway[i * 2 + 1]) * delta;
+						position[i * 2 + 1] += speed[i * 2 + 1] * delta;
+						turn[i * 2] += turn[i * 2 + 1] * delta;
+						rotation.setFromAxisAngle(at.set(axis[i * 3], axis[i * 3 + 1], axis[i * 3 + 2]), turn[i * 2]);
+						const fade = Math.min(1, (lifetime - age) / SHRINK);
+						scale.set(shape[i * 2] * fade, shape[i * 2 + 1] * fade, 1);
+						matrix.compose(at.set(position[i * 2], position[i * 2 + 1], 0), rotation, scale);
+						mesh.setMatrixAt(i, matrix);
+						const facing = Math.abs(normal.set(0, 0, 1).applyQuaternion(rotation).z);
+						mesh.setColorAt(i, shade.copy(tints[tint[i]]).multiplyScalar(.55 + .45 * facing));
+					}
+					mesh.count = alive;
+					mesh.instanceMatrix.needsUpdate = true;
+					if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true;
+					if (alive === 0) finish();
+				}
+			};
+		})
+	}), null);
+}, {
+	name: "Confetti",
+	props: [
+		"trigger",
+		"origin",
+		"angle",
+		"spread",
+		"count",
+		"velocity",
+		"gravity",
+		"palette",
+		"fullscreen",
+		"onDone"
+	]
+});
+//#endregion
+export { CONFETTI_PALETTE, Confetti, confettiStyles };
+
+//# sourceMappingURL=Confetti.js.map

package/dist/three/effects/Confetti.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../../src/three/effects/Confetti.tsx"],"sourcesContent":["/**\n * 彩纸（庆祝）：trigger 每变一次放一批，彩纸从 origin 喷出，翻转着飘落后消失。参考 canvas-confetti 的 origin、angle、spread。\n *\n *   <Confetti trigger={paidCount} />                                   // 铺满视口，从中间偏下向上喷\n *   <Confetti trigger={n} origin={{ x: 0, y: 1 }} angle={60} />        // 从左下角斜着喷\n *   <div style=\"position: relative\"><Confetti fullscreen={false} trigger={n} /></div>\n *\n * 只在彩纸还在飘的时候才有画布：不放的时候不占 WebGL 上下文。默认铺满视口、放在顶层（原生 popover，\n * 盖得住打开着的对话框），指针穿透；fullscreen 为 false 时铺满最近的定位父元素。\n * 颜色取主题的图表色板，换主题时跟着变；系统或主题要求减少动态效果时不放（onDone 照常调用）。画面是装饰，读屏跳过。\n *\n * 部件：Root（div）、Canvas（ThreeCanvas）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport {\n  Color,\n  DoubleSide,\n  InstancedMesh,\n  Matrix4,\n  MeshBasicMaterial,\n  OrthographicCamera,\n  PlaneGeometry,\n  Quaternion,\n  Vector3,\n} from 'three';\nimport { watch } from 'vue';\nimport { colors } from '../../config/theme/tokens';\nimport { toElement } from '../../utils/dom/element';\nimport { mergePartProps } from '../../utils/props';\nimport { EffectSurface, type EffectProps } from '../core/EffectSurface';\nimport type { ThreeCanvasProps } from '../core/ThreeCanvas';\n\n/** 彩纸的默认色板：图表色板的前六个 */\nexport const CONFETTI_PALETTE: readonly string[] = [\n  colors.chart1,\n  colors.chart2,\n  colors.chart3,\n  colors.chart4,\n  colors.chart5,\n  colors.chart6,\n];\n\n/** 喷出的位置：相对区域的比例，x 从左到右、y 从上到下（0–1） */\nexport interface ConfettiOrigin {\n  /** 从左（0）到右（1） */\n  x: number;\n  /** 从上（0）到下（1） */\n  y: number;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface ConfettiProps extends Omit<EffectProps, 'children' | 'fallback' | 'paused'> {\n  /** 每变一次放一批（挂载时的初始值不放）：写成计数、时间戳或任何会变的值 */\n  trigger?: unknown;\n  /**\n   * 喷出的位置\n   * @default { x: 0.5, y: 0.6 }\n   */\n  origin?: ConfettiOrigin;\n  /**\n   * 喷出的方向（度），90 是正上方，0 向右\n   * @default 90\n   */\n  angle?: number;\n  /**\n   * 散开的角度（度）\n   * @default 70\n   */\n  spread?: number;\n  /**\n   * 每批的数量\n   * @default 160\n   */\n  count?: number;\n  /**\n   * 初速度的倍数\n   * @default 1\n   */\n  velocity?: number;\n  /**\n   * 重力的倍数\n   * @default 1\n   */\n  gravity?: number;\n  /** 色板（token 或 CSS 颜色）；变了下一次放时生效 */\n  palette?: readonly string[];\n  /**\n   * 铺满视口，放在顶层；false 时铺满最近的定位父元素\n   * @default true\n   */\n  fullscreen?: boolean;\n  /** 这几批彩纸都落完（或减少动态效果时没有放）后调用 */\n  onDone?: () => void;\n}\n\n/** Confetti 的样式：root、fullscreen */\nexport const confettiStyles = css.create({\n  root: { position: 'absolute', inset: 0, pointerEvents: 'none' },\n  // 原生 popover 的默认样式（居中、边框、底色）改成铺满视口的透明层\n  fullscreen: {\n    position: 'fixed',\n    inset: 0,\n    width: '100vw',\n    height: '100vh',\n    maxWidth: 'none',\n    maxHeight: 'none',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    overflow: 'hidden',\n  },\n});\n\n/** 同时在飘的彩纸上限 */\nconst MAX_PIECES = 900;\n/** 空气阻力（每秒速度剩下 e^-DRAG）：喷出后很快慢下来，落得轻飘 */\nconst DRAG = 2.6;\n/** 一片彩纸飘多久（秒），最后一段缩小消失 */\nconst LIFETIME = [3.2, 4.6] as const;\nconst SHRINK = 0.6;\n/** 重力：每秒加速多少个区域高度 */\nconst GRAVITY = 1.1;\n\n/** 一批：放的那一刻的参数 */\ninterface Burst {\n  origin: ConfettiOrigin;\n  angle: number;\n  spread: number;\n  count: number;\n  velocity: number;\n  gravity: number;\n}\n\nconst random = (min: number, max: number) => min + Math.random() * (max - min);\n\n/** 彩纸 */\nexport const Confetti = _component(\n  ({\n    trigger,\n    origin = { x: 0.5, y: 0.6 },\n    angle = 90,\n    spread = 70,\n    count = 160,\n    velocity = 1,\n    gravity = 1,\n    palette = CONFETTI_PALETTE,\n    fullscreen = true,\n    onDone,\n    ...rest\n  }: ConfettiProps) => {\n    // 还没放出去的批次：画布建好后在下一帧里放\n    const pending: Burst[] = [];\n    let active = _state(false);\n\n    watch(\n      () => trigger,\n      () => {\n        pending.push({ origin, angle, spread, count, velocity, gravity });\n        active = true;\n      },\n    );\n\n    function finish() {\n      // 在帧回调里：等这一帧结束再卸载画布\n      queueMicrotask(() => {\n        if (pending.length) return;\n        active = false;\n        onDone?.();\n      });\n    }\n\n    /** 顶层显示：卸载时元素随之移除，不用手动收起 */\n    function showOnTop(element: unknown) {\n      const root = toElement(element);\n      if (!fullscreen || !root || !('showPopover' in root)) return;\n      // 顶层里后进的在上面：同一刻打开的对话框（支付成功）会盖住彩纸，等这一帧过去再进顶层\n      requestAnimationFrame(() => {\n        if (root.isConnected && !root.matches(':popover-open')) root.showPopover();\n      });\n    }\n\n    return () =>\n      active && (\n        <EffectSurface\n          {...rest}\n          {...{ ref: showOnTop }}\n          sx={[confettiStyles.root, fullscreen && confettiStyles.fullscreen, rest.sx]}\n          popover={fullscreen ? 'manual' : undefined}\n          aria-hidden=\"true\"\n          // 没有 WebGL：什么也不画（不要默认的渐变铺满屏幕），直接收尾\n          fallback={false}\n          propsCanvas={mergePartProps<Partial<ThreeCanvasProps>>({}, rest.propsCanvas, {\n            onStatusChange: (status) => {\n              if (status !== 'fallback') return;\n              pending.length = 0;\n              finish();\n            },\n          })}\n          sceneKey={palette.join(',')}\n          setup={({ scene, size: area, still, themeColorList }) => {\n            if (still) {\n              pending.length = 0;\n              finish();\n              return;\n            }\n            const camera = new OrthographicCamera(0, 1, 1, 0, -500, 500);\n            const tints = themeColorList(palette);\n\n            const mesh = new InstancedMesh(\n              new PlaneGeometry(1, 1),\n              new MeshBasicMaterial({ side: DoubleSide }),\n              MAX_PIECES,\n            );\n            mesh.frustumCulled = false;\n            mesh.count = 0;\n            scene.add(mesh);\n\n            // 每片的状态：位置、速度、尺寸、翻转轴与角度、摆动、寿命、颜色\n            const position = new Float32Array(MAX_PIECES * 2);\n            const speed = new Float32Array(MAX_PIECES * 2);\n            const shape = new Float32Array(MAX_PIECES * 2);\n            const axis = new Float32Array(MAX_PIECES * 3);\n            const turn = new Float32Array(MAX_PIECES * 2);\n            const sway = new Float32Array(MAX_PIECES * 2);\n            const life = new Float32Array(MAX_PIECES * 2);\n            const fall = new Float32Array(MAX_PIECES);\n            const tint = new Uint8Array(MAX_PIECES);\n            let alive = 0;\n\n            function launch(burst: Burst) {\n              const x0 = burst.origin.x * area.width;\n              const y0 = (1 - burst.origin.y) * area.height;\n              // 初速度与重力都按区域高度（H）：大小不同的区域里看起来一样，最快的升到 0.9H 左右、最慢的 0.3H\n              const base = area.height * 3.2 * burst.velocity;\n              for (let n = 0; n < burst.count && alive < MAX_PIECES; n++, alive++) {\n                const i = alive;\n                const direction =\n                  ((burst.angle + random(-burst.spread / 2, burst.spread / 2)) * Math.PI) / 180;\n                const v = base * random(0.45, 1);\n                position[i * 2] = x0;\n                position[i * 2 + 1] = y0;\n                speed[i * 2] = Math.cos(direction) * v;\n                speed[i * 2 + 1] = Math.sin(direction) * v;\n                const width = random(7, 12);\n                shape[i * 2] = width;\n                shape[i * 2 + 1] = width * random(0.45, 0.8);\n                const a = new Vector3(random(-1, 1), random(-1, 1), random(-1, 1)).normalize();\n                axis.set([a.x, a.y, a.z], i * 3);\n                turn[i * 2] = random(0, Math.PI * 2);\n                turn[i * 2 + 1] = random(6, 14) * (Math.random() < 0.5 ? -1 : 1);\n                sway[i * 2] = random(0, Math.PI * 2);\n                sway[i * 2 + 1] = random(20, 60);\n                life[i * 2] = 0;\n                life[i * 2 + 1] = random(...LIFETIME);\n                fall[i] = burst.gravity;\n                tint[i] = Math.floor(Math.random() * tints.length);\n              }\n            }\n\n            /** 把第 to 片换成第 from 片（落完的那片用最后一片补上，活着的始终在前面） */\n            function move(from: number, to: number) {\n              for (const [array, size] of [\n                [position, 2],\n                [speed, 2],\n                [shape, 2],\n                [axis, 3],\n                [turn, 2],\n                [sway, 2],\n                [life, 2],\n              ] as const) {\n                array.copyWithin(to * size, from * size, from * size + size);\n              }\n              fall[to] = fall[from]!;\n              tint[to] = tint[from]!;\n            }\n\n            const matrix = new Matrix4();\n            const rotation = new Quaternion();\n            const scale = new Vector3();\n            const at = new Vector3();\n            const normal = new Vector3();\n            const shade = new Color();\n\n            return {\n              resize: (next, context) => {\n                camera.right = next.width;\n                camera.top = next.height;\n                camera.updateProjectionMatrix();\n                context.camera = camera;\n              },\n              frame: ({ delta }) => {\n                // 画布刚建好的第一帧可能还没量到尺寸：量到了再放\n                while (pending.length && area.height > 0) launch(pending.shift()!);\n                const damping = Math.exp(-DRAG * delta);\n                for (let i = 0; i < alive; i++) {\n                  life[i * 2]! += delta;\n                  const age = life[i * 2]!;\n                  const lifetime = life[i * 2 + 1]!;\n                  if (age >= lifetime || position[i * 2 + 1]! < -40) {\n                    move(--alive, i--);\n                    continue;\n                  }\n                  speed[i * 2]! *= damping;\n                  speed[i * 2 + 1] =\n                    speed[i * 2 + 1]! * damping - area.height * GRAVITY * fall[i]! * delta;\n                  // 左右摆动：像纸片在空气里飘\n                  sway[i * 2]! += delta * 4;\n                  position[i * 2]! +=\n                    (speed[i * 2]! + Math.sin(sway[i * 2]!) * sway[i * 2 + 1]!) * delta;\n                  position[i * 2 + 1]! += speed[i * 2 + 1]! * delta;\n                  turn[i * 2]! += turn[i * 2 + 1]! * delta;\n\n                  rotation.setFromAxisAngle(\n                    at.set(axis[i * 3]!, axis[i * 3 + 1]!, axis[i * 3 + 2]!),\n                    turn[i * 2]!,\n                  );\n                  const fade = Math.min(1, (lifetime - age) / SHRINK);\n                  scale.set(shape[i * 2]! * fade, shape[i * 2 + 1]! * fade, 1);\n                  matrix.compose(\n                    at.set(position[i * 2]!, position[i * 2 + 1]!, 0),\n                    rotation,\n                    scale,\n                  );\n                  mesh.setMatrixAt(i, matrix);\n                  // 翻到侧面时暗一些：正对屏幕最亮，看起来是在翻转的纸片\n                  const facing = Math.abs(normal.set(0, 0, 1).applyQuaternion(rotation).z);\n                  mesh.setColorAt(\n                    i,\n                    shade.copy(tints[tint[i]!]!).multiplyScalar(0.55 + 0.45 * facing),\n                  );\n                }\n                mesh.count = alive;\n                mesh.instanceMatrix.needsUpdate = true;\n                if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true;\n                if (alive === 0) finish();\n              },\n            };\n          }}\n        />\n      );\n  },\n);\n"],"mappings":"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"}

package/dist/three/effects/ParticleField.d.ts

@@ -0,0 +1,39 @@
+import { type EffectProps } from '../core/EffectSurface';
+/** 粒子场的默认色板：品牌色、紫、青 */
+export declare const PARTICLE_PALETTE: readonly string[];
+/** 未声明的属性落到外层 div 上 */
+export interface ParticleFieldProps extends EffectProps {
+    /** 粒子数；不写时按面积与画质档位决定 */
+    count?: number;
+    /** 色板（token 或 CSS 颜色，最多 6 个）：粒子随机取色，连线用第一个；变了会重建 */
+    palette?: readonly string[];
+    /**
+     * 粒子的直径（CSS 像素，各粒子在它的 0.6–1.4 倍之间）
+     * @default 3
+     */
+    size?: number;
+    /**
+     * 漂移速度
+     * @default 1
+     */
+    speed?: number;
+    /** 相近的粒子连线（星座） */
+    links?: boolean;
+    /**
+     * 连线的最大距离（CSS 像素）
+     * @default 120
+     */
+    linkDistance?: number;
+    /**
+     * 指针靠近时排开粒子
+     * @default true
+     */
+    interactive?: boolean;
+    /**
+     * 排开的范围（CSS 像素）
+     * @default 140
+     */
+    repelRadius?: number;
+}
+/** 粒子场：漂移的光点，指针排开，可选星座连线 */
+export declare const ParticleField: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ParticleFieldProps>;

package/dist/three/effects/ParticleField.js

@@ -0,0 +1,266 @@
+import { clamp } from "../../utils/data/number.js";
+import { colors } from "../../config/theme/tokens.js";
+import { EffectSurface } from "../core/EffectSurface.js";
+import "../core/shaders.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { BufferAttribute, BufferGeometry, LineSegments, OrthographicCamera, Points, ShaderMaterial } from "three";
+//#region src/three/effects/ParticleField.tsx
+/** 粒子场的默认色板：品牌色、紫、青 */
+var PARTICLE_PALETTE = [
+	colors.accent,
+	colors.chart5,
+	colors.chart6
+];
+/** 未声明的属性落到外层 div 上 */
+/** 粒子数上限（不连线 / 连线）：连线的计算量随粒子数增长 */
+var MAX_PARTICLES = 3e3;
+var MAX_LINKED = 420;
+/** 每个粒子最多画几条线 */
+var LINKS_PER_PARTICLE = 6;
+var pointsVertex = `
+uniform vec3 uColors[6];
+uniform float uPixelRatio;
+attribute float aSize;
+attribute float aColor;
+varying vec3 vColor;
+void main() {
+  vColor = uColors[int(aColor)];
+  gl_PointSize = aSize * uPixelRatio;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+var pointsFragment = `
+varying vec3 vColor;
+void main() {
+  float d = length(gl_PointCoord - 0.5);
+  gl_FragColor = vec4(vColor, smoothstep(0.5, 0.1, d));
+  #include <colorspace_fragment>
+  #include <premultiplied_alpha_fragment>
+}
+`;
+var linesVertex = `
+attribute float aAlpha;
+varying float vAlpha;
+void main() {
+  vAlpha = aAlpha;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+var linesFragment = `
+uniform vec3 uColor;
+varying float vAlpha;
+void main() {
+  gl_FragColor = vec4(uColor, vAlpha);
+  #include <colorspace_fragment>
+  #include <premultiplied_alpha_fragment>
+}
+`;
+/** 透明叠加的着色器材质 */
+function overlayMaterial(params) {
+	return new ShaderMaterial({
+		...params,
+		transparent: true,
+		premultipliedAlpha: true,
+		depthTest: false,
+		depthWrite: false
+	});
+}
+/** 粒子场：漂移的光点，指针排开，可选星座连线 */
+var ParticleField = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const count = readonlyProp(_props, "count");
+	const palette = readonlyProp(_props, "palette", () => PARTICLE_PALETTE);
+	const size = readonlyProp(_props, "size", 3);
+	const speed = readonlyProp(_props, "speed", 1);
+	const links = readonlyProp(_props, "links", false);
+	const linkDistance = readonlyProp(_props, "linkDistance", 120);
+	const interactive = readonlyProp(_props, "interactive", true);
+	const repelRadius = readonlyProp(_props, "repelRadius", 140);
+	const rest = restProps(_props, _ctx, true);
+	return () => createVNode(EffectSurface, mergeProps(rest, {
+		"sceneKey": `${palette.value.join(",")}|${links.value}`,
+		"setup": _cache[0] || (_cache[0] = ({ scene, size: area, quality, pointer, themeColorList }) => {
+			const camera = new OrthographicCamera(0, 1, 1, 0, -1, 1);
+			const max = links.value ? MAX_LINKED : MAX_PARTICLES;
+			const sources = palette.value.slice(0, 6);
+			const list = themeColorList(sources, 6);
+			const position = new Float32Array(max * 3);
+			const velocity = new Float32Array(max * 2);
+			const drift = new Float32Array(max * 2);
+			const sizes = new Float32Array(max);
+			const tints = new Float32Array(max);
+			let active = 0;
+			const seed = (index) => {
+				position[index * 3] = Math.random() * area.width;
+				position[index * 3 + 1] = Math.random() * area.height;
+				const angle = Math.random() * Math.PI * 2;
+				const pace = 6 + Math.random() * 14;
+				drift[index * 2] = Math.cos(angle) * pace;
+				drift[index * 2 + 1] = Math.sin(angle) * pace;
+				velocity[index * 2] = drift[index * 2];
+				velocity[index * 2 + 1] = drift[index * 2 + 1];
+				sizes[index] = size.value * (.6 + Math.random() * .8);
+				tints[index] = Math.floor(Math.random() * sources.length);
+			};
+			const geometry = new BufferGeometry();
+			const positionAttribute = new BufferAttribute(position, 3);
+			geometry.setAttribute("position", positionAttribute);
+			geometry.setAttribute("aSize", new BufferAttribute(sizes, 1));
+			geometry.setAttribute("aColor", new BufferAttribute(tints, 1));
+			const pointsUniforms = {
+				uColors: { value: list },
+				uPixelRatio: { value: 1 }
+			};
+			const points = new Points(geometry, overlayMaterial({
+				vertexShader: pointsVertex,
+				fragmentShader: pointsFragment,
+				uniforms: pointsUniforms
+			}));
+			points.frustumCulled = false;
+			scene.add(points);
+			const maxSegments = links.value ? max * LINKS_PER_PARTICLE : 0;
+			const linePositions = new Float32Array(maxSegments * 6);
+			const lineAlphas = new Float32Array(maxSegments * 2);
+			const lineGeometry = new BufferGeometry();
+			const linePositionAttribute = new BufferAttribute(linePositions, 3);
+			const lineAlphaAttribute = new BufferAttribute(lineAlphas, 1);
+			lineGeometry.setAttribute("position", linePositionAttribute);
+			lineGeometry.setAttribute("aAlpha", lineAlphaAttribute);
+			if (links.value) {
+				const lines = new LineSegments(lineGeometry, overlayMaterial({
+					vertexShader: linesVertex,
+					fragmentShader: linesFragment,
+					uniforms: { uColor: { value: list[0] } }
+				}));
+				lines.frustumCulled = false;
+				scene.add(lines);
+			}
+			const next = new Int32Array(max);
+			let head = /* @__PURE__ */ new Int32Array(0);
+			function connect() {
+				const cell = linkDistance.value;
+				const columns = Math.ceil(area.width / cell) + 1;
+				const rows = Math.ceil(area.height / cell) + 1;
+				if (head.length < columns * rows) head = new Int32Array(columns * rows);
+				head.fill(-1, 0, columns * rows);
+				const cellOf = (value, count) => clamp(Math.floor(value / cell), 0, count - 1);
+				for (let index = 0; index < active; index++) {
+					const key = cellOf(position[index * 3 + 1], rows) * columns + cellOf(position[index * 3], columns);
+					next[index] = head[key];
+					head[key] = index;
+				}
+				let segments = 0;
+				for (let index = 0; index < active && segments < maxSegments; index++) {
+					const x = position[index * 3];
+					const y = position[index * 3 + 1];
+					const column = cellOf(x, columns);
+					const row = cellOf(y, rows);
+					let own = 0;
+					for (let dy = -1; dy <= 1; dy++) for (let dx = -1; dx <= 1; dx++) {
+						const r = row + dy;
+						const c = column + dx;
+						if (r < 0 || r >= rows || c < 0 || c >= columns) continue;
+						for (let other = head[r * columns + c]; other !== -1; other = next[other]) {
+							if (other <= index || own >= LINKS_PER_PARTICLE || segments >= maxSegments) continue;
+							const ox = position[other * 3];
+							const oy = position[other * 3 + 1];
+							const distance = Math.hypot(ox - x, oy - y);
+							if (distance > linkDistance.value) continue;
+							const offset = segments * 6;
+							linePositions[offset] = x;
+							linePositions[offset + 1] = y;
+							linePositions[offset + 3] = ox;
+							linePositions[offset + 4] = oy;
+							const alpha = (1 - distance / linkDistance.value) * .45;
+							lineAlphas[segments * 2] = alpha;
+							lineAlphas[segments * 2 + 1] = alpha;
+							segments++;
+							own++;
+						}
+					}
+				}
+				lineGeometry.setDrawRange(0, segments * 2);
+				linePositionAttribute.needsUpdate = true;
+				lineAlphaAttribute.needsUpdate = true;
+			}
+			return {
+				resize: (next, context) => {
+					camera.right = next.width;
+					camera.top = next.height;
+					camera.updateProjectionMatrix();
+					context.camera = camera;
+					pointsUniforms.uPixelRatio.value = next.pixelRatio;
+					const perParticle = links.value ? 9e3 : 2600;
+					const wanted = count.value ?? Math.round(next.width * next.height / perParticle * quality.density);
+					const target = clamp(wanted, 0, max);
+					for (let index = 0; index < target; index++) {
+						const outside = position[index * 3] > next.width || position[index * 3 + 1] > next.height;
+						if (index >= active || outside) seed(index);
+					}
+					active = target;
+					geometry.setDrawRange(0, active);
+					positionAttribute.needsUpdate = true;
+					geometry.attributes.aSize.needsUpdate = true;
+					geometry.attributes.aColor.needsUpdate = true;
+					if (links.value) connect();
+				},
+				frame: ({ delta }) => {
+					if (delta === 0) return;
+					const step = delta * speed.value;
+					const mx = (pointer.x + 1) / 2 * area.width;
+					const my = (pointer.y + 1) / 2 * area.height;
+					const push = interactive.value ? pointer.strength : 0;
+					const margin = size.value * 2;
+					for (let index = 0; index < active; index++) {
+						let x = position[index * 3];
+						let y = position[index * 3 + 1];
+						let vx = velocity[index * 2];
+						let vy = velocity[index * 2 + 1];
+						if (push > .01) {
+							const dx = x - mx;
+							const dy = y - my;
+							const distance = Math.hypot(dx, dy) || 1;
+							if (distance < repelRadius.value) {
+								const force = (1 - distance / repelRadius.value) ** 2 * 1400 * push * delta;
+								vx += dx / distance * force;
+								vy += dy / distance * force;
+							}
+						}
+						const settle = Math.min(1, delta * 1.6);
+						vx += (drift[index * 2] - vx) * settle;
+						vy += (drift[index * 2 + 1] - vy) * settle;
+						x += vx * step;
+						y += vy * step;
+						if (x < -margin) x = area.width + margin;
+						else if (x > area.width + margin) x = -margin;
+						if (y < -margin) y = area.height + margin;
+						else if (y > area.height + margin) y = -margin;
+						position[index * 3] = x;
+						position[index * 3 + 1] = y;
+						velocity[index * 2] = vx;
+						velocity[index * 2 + 1] = vy;
+					}
+					positionAttribute.needsUpdate = true;
+					if (links.value) connect();
+				}
+			};
+		})
+	}), null);
+}, {
+	name: "ParticleField",
+	props: [
+		"count",
+		"palette",
+		"size",
+		"speed",
+		"links",
+		"linkDistance",
+		"interactive",
+		"repelRadius"
+	]
+});
+//#endregion
+export { PARTICLE_PALETTE, ParticleField };
+
+//# sourceMappingURL=ParticleField.js.map