@xdy-npm/react-particle-backgrounds 1.0.0 → 1.0.2

package/dist/index.js

@@ -39,9 +39,9 @@ var DEFAULT_COLORS = [
 // src/themes/starline.ts
 var starlineTheme = {
   id: "starline",
-  name: "Star Links",
+  name: "\u661F\u94FE",
   icon: "\u2728",
-  description: "Classic particle linking effect",
+  description: "\u7ECF\u5178\u7C92\u5B50\u8FDE\u7EBF\u6548\u679C",
   backgroundGradient: "linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #334155 100%)",
   options: (isDark) => {
     const colors = DEFAULT_COLORS;
@@ -55,7 +55,8 @@ var starlineTheme = {
           resize: { enable: true }
         },
         modes: {
-          push: { quantity: 6 },
+          // 快速点击会触发 push 不断增加粒子和连线，限制触发强度和最大粒子数量可避免性能问题
+          push: { quantity: 2 },
           grab: {
             distance: 200,
             links: { opacity: 1, color: colors }
@@ -81,7 +82,9 @@ var starlineTheme = {
         },
         number: {
           density: { enable: true, width: 1920, height: 1080 },
-          value: 100
+          value: 100,
+          // 限制粒子总量，防止快速点击后粒子与连线无限增长
+          limit: { value: 130, mode: "delete" }
         },
         opacity: { value: 0.7 },
         shape: { type: "circle" },
@@ -100,9 +103,9 @@ var starlineTheme = {
 // src/themes/snow.ts
 var snowTheme = {
   id: "snow",
-  name: "Snowfall",
+  name: "\u98D8\u96EA",
   icon: "\u2744\uFE0F",
-  description: "Romantic falling snowflakes",
+  description: "\u6D6A\u6F2B\u98D8\u843D\u96EA\u82B1",
   backgroundGradient: "linear-gradient(180deg, #1e3a5f 0%, #2d4a6b 50%, #3d5a7b 100%)",
   options: (isDark) => ({
     ...baseConfig,
@@ -154,9 +157,9 @@ var snowTheme = {
 // src/themes/bubble.ts
 var bubbleTheme = {
   id: "bubble",
-  name: "Bubbles",
+  name: "\u6C14\u6CE1",
   icon: "\u{1FAE7}",
-  description: "Dreamy rising bubbles",
+  description: "\u68A6\u5E7B\u4E0A\u5347\u6C14\u6CE1",
   backgroundGradient: "linear-gradient(180deg, #0a2647 0%, #144272 50%, #205295 100%)",
   options: (isDark) => ({
     ...baseConfig,
@@ -213,9 +216,9 @@ var bubbleTheme = {
 // src/themes/stars.ts
 var starsTheme = {
   id: "stars",
-  name: "Twinkling Stars",
+  name: "\u7E41\u661F",
   icon: "\u2B50",
-  description: "Sparkling starry sky",
+  description: "\u95EA\u70C1\u661F\u7A7A\u6548\u679C",
   backgroundGradient: "linear-gradient(180deg, #000000 0%, #1a1a2e 50%, #16213e 100%)",
   options: (isDark) => ({
     ...baseConfig,
@@ -227,7 +230,8 @@ var starsTheme = {
         resize: { enable: true }
       },
       modes: {
-        push: { quantity: 3 },
+        // 限制快速点击触发的粒子 push 强度，避免连线过多造成卡顿
+        push: { quantity: 1 },
         connect: { distance: 100, links: { opacity: 0.3 }, radius: 150 }
       }
     },
@@ -245,7 +249,9 @@ var starsTheme = {
       },
       number: {
         density: { enable: true, width: 1920, height: 1080 },
-        value: 120
+        value: 120,
+        // 限制粒子总量，避免快速点击后连线无限累积
+        limit: { value: 150, mode: "delete" }
       },
       opacity: {
         value: { min: 0.2, max: 1 },
@@ -280,9 +286,9 @@ var starsTheme = {
 // src/themes/firefly.ts
 var fireflyTheme = {
   id: "firefly",
-  name: "Fireflies",
+  name: "\u8424\u706B\u866B",
   icon: "\u{1FAB2}",
-  description: "Warm glowing firefly effect",
+  description: "\u6E29\u6696\u7684\u8424\u706B\u866B\u5149\u6548",
   backgroundGradient: "linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%)",
   options: (isDark) => ({
     ...baseConfig,
@@ -341,9 +347,9 @@ var fireflyTheme = {
 // src/themes/geometry.ts
 var geometryTheme = {
   id: "geometry",
-  name: "Geometry",
+  name: "\u51E0\u4F55",
   icon: "\u{1F537}",
-  description: "Floating abstract geometric shapes",
+  description: "\u6F02\u6D6E\u7684\u62BD\u8C61\u51E0\u4F55\u56FE\u5F62",
   backgroundGradient: "linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%)",
   options: (isDark) => ({
     ...baseConfig,
@@ -355,7 +361,8 @@ var geometryTheme = {
         resize: { enable: true }
       },
       modes: {
-        push: { quantity: 2 },
+        // 快速点击会持续触发 push，限制强度有助于降低连线/粒子带来的开销
+        push: { quantity: 1 },
         repulse: { distance: 150, duration: 0.4 }
       }
     },
@@ -373,7 +380,9 @@ var geometryTheme = {
       },
       number: {
         density: { enable: true, width: 1920, height: 1080 },
-        value: 30
+        value: 30,
+        // 限制粒子总量，避免连续点击时粒子无限增加
+        limit: { value: 60, mode: "delete" }
       },
       opacity: {
         value: { min: 0.3, max: 0.7 }
@@ -407,9 +416,9 @@ var geometryTheme = {
 // src/themes/wave.ts
 var waveTheme = {
   id: "wave",
-  name: "Particle Ocean",
+  name: "\u7C92\u5B50\u6D77\u6D0B",
   icon: "\u{1F30A}",
-  description: "3D particle wave effect (requires three.js)",
+  description: "3D \u7C92\u5B50\u6CE2\u6D6A\u6548\u679C\uFF08\u9700\u8981 three.js\uFF09",
   isThreeJS: true,
   backgroundGradient: "linear-gradient(180deg, #000000 0%, #0a1628 50%, #0d1f3c 100%)",
   options: () => ({
@@ -486,7 +495,7 @@ var ParticleWave = ({
       })();
     } catch (e) {
       hasThree.current = false;
-      console.warn('[react-particle-backgrounds] "three" is not installed. The wave theme requires it as a peer dependency.');
+      console.warn('[react-particle-backgrounds] \u672A\u5B89\u88C5 "three"\u3002\u6CE2\u6D6A\u4E3B\u9898\u9700\u8981\u5B83\u4F5C\u4E3A peer dependency\u3002');
       return;
     }
     if (!containerRef.current) return;
@@ -821,6 +830,7 @@ var ParticleWave = ({
   );
 };
 var ParticleWave_default = ParticleWave;
+var instanceCounter = 0;
 var ParticlesBackground = ({
   theme: themeProp,
   isDark: isDarkProp,
@@ -830,6 +840,9 @@ var ParticlesBackground = ({
 }) => {
   var _a, _b;
   const [init, setInit] = react.useState(false);
+  const [instanceId, setInstanceId] = react.useState(() => ++instanceCounter);
+  const containerRef = react.useRef(void 0);
+  const isFirstMount = react.useRef(true);
   const ctx = useParticleThemeOptional();
   const themeId = (_a = themeProp != null ? themeProp : ctx == null ? void 0 : ctx.themeId) != null ? _a : DEFAULT_THEME_ID;
   const isDark = (_b = isDarkProp != null ? isDarkProp : ctx == null ? void 0 : ctx.isDark) != null ? _b : true;
@@ -843,6 +856,25 @@ var ParticlesBackground = ({
       setInit(true);
     });
   }, []);
+  react.useEffect(() => {
+    if (!isFirstMount.current) {
+      setInstanceId(++instanceCounter);
+    }
+    isFirstMount.current = false;
+    return () => {
+      if (containerRef.current) {
+        containerRef.current.destroy();
+        containerRef.current = void 0;
+      }
+    };
+  }, [themeId, isDark]);
+  const particlesLoaded = react.useCallback(async (container) => {
+    if (containerRef.current && containerRef.current !== container) {
+      containerRef.current.destroy();
+    }
+    containerRef.current = container;
+    onLoaded == null ? void 0 : onLoaded(container);
+  }, [onLoaded]);
   const options = react.useMemo(() => theme.options(isDark), [theme, isDark]);
   if (themeId === "none") return null;
   if (theme.isThreeJS) {
@@ -856,16 +888,17 @@ var ParticlesBackground = ({
     );
   }
   if (!init) return null;
+  const particlesId = `rpb-tsparticles-${instanceId}`;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Particles__default.default,
     {
-      id: "rpb-tsparticles",
+      id: particlesId,
       className,
       style,
-      particlesLoaded: async (container) => onLoaded == null ? void 0 : onLoaded(container),
+      particlesLoaded,
       options
     },
-    themeId
+    particlesId
   );
 };
 var ParticlesBackground_default = ParticlesBackground;
@@ -888,7 +921,7 @@ var ThemeSelector = ({
       "button",
       {
         onClick: () => setOpen(true),
-        title: "Theme Settings",
+        title: "\u4E3B\u9898\u8BBE\u7F6E",
         style: {
           position: "fixed",
           ...positionStyles[position],
@@ -961,7 +994,7 @@ var ThemeSelector = ({
                 borderBottom: "1px solid #f0f0f0"
               },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: 16 }, children: "Particle Theme" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: 16 }, children: "\u7C92\u5B50\u4E3B\u9898" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
@@ -982,9 +1015,9 @@ var ThemeSelector = ({
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 16, display: "flex", flexDirection: "column", gap: 12 }, children: [...particleThemes, {
             id: "none",
-            name: "None",
+            name: "\u65E0",
             icon: "\u{1F6AB}",
-            description: "Disable particle effects"
+            description: "\u5173\u95ED\u7C92\u5B50\u6548\u679C"
           }].map((theme) => {
             const isActive = theme.id === themeId;
             return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1072,7 +1105,7 @@ var ThemeSelector = ({
                 color: "#6b7280",
                 lineHeight: 1.6
               },
-              children: "Your theme selection is automatically saved and will be remembered on your next visit."
+              children: "\u4F60\u7684\u4E3B\u9898\u9009\u62E9\u4F1A\u81EA\u52A8\u4FDD\u5B58\uFF0C\u4E0B\u6B21\u8BBF\u95EE\u65F6\u5C06\u81EA\u52A8\u6062\u590D\u3002"
             }
           ) })
         ]