enr 2.0.1 → 2.0.3

package/README.md

@@ -1,4 +1,4 @@
-# en React
+# enr
 
 ## 一、安装
 
@@ -15,7 +15,7 @@ npm install  --save earthnut
 
 - 尽管接受所有的 style 属性，但是 `position` 还是期待是非 'static' 值，否则将影响涟漪背景的渲染位置和显示状态；
 - 当前如果设置了 `background` 的话，有可能在恢复时使得其覆盖其他子属性；
-- 当前期待使用 `background-color` 设置背景色，而不是在上面的 `background` 中设置背景色。譬如：`background-color: #f0f6;`
+- 当前期待使用 `background-color` 设置背景色，而不是在上面的 `background` 中设置背景色。譬如：<span style="background-color:#f0f6">`background-color: #f0f6;`</span>
 - 当前更期待使用配置参数 `option` 的 'imgUrl' 来配置目标背景图（请注意图源的跨域问题）。譬如：`imgUrl: 'background.png'`
 - 当然，也可以使用标准的 `background-image` 配置符合要求的背景图片（目前仅支持单张图配置）。譬如：`background-image: url(background.png);`
 - 当前可配置 `background-image` 为渐变色，但仅支持从上到下的线性渐变（仅支持单渐变）。譬如： `background-image: linear-gradient(black, transparent);`
@@ -139,4 +139,4 @@ export function Home() {
 
 ## 文档
 
-更多参阅 [enr](https://earthnut.dev/quickUse/)
+更多参阅 [enr](https://lmssee.com/quickUse/)

package/cjs/components/ripples/LazyRippleEle.js

@@ -20,7 +20,7 @@ var Content = require('./Content.js');
  * @param props  使用参数
  * @param props.option 初始化状态设定选项
  * @version 0.0.1
- * @see https://earthnut.dev/earthnut/lazy-background-ripple
+ * @see https://lmssee.com/lazy-background-ripple
  * @example
  * 使用：
  *

package/cjs/components/ripples/RipplesEle.js

@@ -18,7 +18,7 @@ var Content = require('./Content.js');
  * @param props  使用参数
  * @param props.option 初始化 ripple 的原始数据
  * @version 0.0.1
- * @see https://earthnut.dev/earthnut/background-ripple
+ * @see https://lmssee.com/background-ripple
  * @example
  * 使用：
  *

package/cjs/customHooks/useAnimationFrame.js

@@ -13,7 +13,7 @@ var react = require('react');
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:18
+ * @lastModified 2026-02-07 08:11
  */
 /**
  *
@@ -25,7 +25,7 @@ var react = require('react');
  * @param [option=false] 使用第二参数，可指定是否立即执行及是否仅执行一次
  * @returns  返回值包含执行状态
  * @version 0.2.0
- * @see   https://earthnut.dev/custom-hooks/use-animation-frame
+ * @see   https://lmssee.com/custom-hooks/use-animation-frame
  * @example
  * 使用：
  *

package/cjs/customHooks/useInputIsComposing.js

@@ -12,7 +12,7 @@ var react = require('react');
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:19
+ * @lastModified 2026-02-07 08:11
  */
 /**
  *
@@ -23,7 +23,7 @@ var react = require('react');
  * @param inputRef [RefObject<HTMLInputElement | HTMLTextAreaElement>] 输入框的 ref
  * @returns  RefObject<boolean>
  * @version 0.0.4
- * @see   https://earthnut.dev/custom-hooks/use-input-is-composing
+ * @see   https://lmssee.com/custom-hooks/use-input-is-composing
  * @example
  *
  * 使用：

package/cjs/customHooks/useRipples/class-build-background.js

@@ -14,7 +14,7 @@ var tools = require('./tools.js');
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 14:17
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 07:49
+ * @lastModified 2026-02-05 17:41
  */
 /**
  * ## 构建背景
@@ -39,8 +39,7 @@ class BuildBackground {
      * ## 默认加载的首个背景色
      */
     get defaultColor() {
-        return this.elementMeta.isDark ? '#000000' : '#ffffff';
-        // return '#00000000';
+        return this.options.loadingBackgroundColor[Number(this.elementMeta.isDark)];
     }
     /**
      * ## 最后使用

package/cjs/customHooks/useRipples/class-param.js

@@ -13,7 +13,7 @@ var dataDefault = require('./data-default.js');
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 02:40
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-03 14:08
+ * @lastModified 2026-02-05 19:20
  */
 /**
  * ## 传入参数
@@ -36,6 +36,8 @@ class RippleParam {
     firstDrawProgressStep = 12;
     /**  canvas 的显隐  */
     visible = false;
+    /** 初始化设定值，该值由用户设置，但不可修改 */
+    loadingBackgroundColor;
     // ++++++++++++++++++++++ 配置数据 《〈《〈《〈《 ++++++++++++++++++++++
     // ++++++++++++++++++++++ 》〉》〉》〉》 用户控制变量 ++++++++++++++++++++++
     // 这些变量通过 Ripple 类的 set 方法设定
@@ -185,6 +187,7 @@ class RippleParam {
         this.running = Boolean(options.playingState ?? true);
         this.crossOrigin = options.crossOrigin;
         this.darkMode = options.darkMode;
+        this.loadingBackgroundColor = this.getLoadingBg(options.loadingBackgroundColor);
     }
     /**
      * ## 切换最后一次执行的状态
@@ -192,6 +195,26 @@ class RippleParam {
     toggleLastRunningState() {
         this._lastRunningState = !this._lastRunningState;
     }
+    /**
+     * ## 获取初始化背景值
+     * @param _v 初始化的值
+     */
+    getLoadingBg(_v) {
+        if (aTypeOfJs.isArray(_v)) {
+            const len = _v.length;
+            if (len === 1) {
+                const color = _v[0];
+                return [color, color];
+            }
+            else if (len === 2) {
+                return [..._v];
+            }
+        }
+        else if (aTypeOfJs.isString(_v)) {
+            return [_v, _v];
+        }
+        return ['#00000000', '#00000000'];
+    }
 }
 
 exports.RippleParam = RippleParam;

package/cjs/customHooks/useRipples/class-ripple.js

@@ -21,7 +21,7 @@ var dataDefault = require('./data-default.js');
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 03:03
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 07:42
+ * @lastModified 2026-02-05 19:24
  *
  */
 /**
@@ -208,6 +208,10 @@ class Ripples {
      * @param value
      */
     set(property, value) {
+        // 该属性不允许被重新赋值
+        if (property === 'loadingBackgroundColor') {
+            return;
+        }
         this.options[property] = value;
         // 数仓更新
         this.state.dispatch({

package/cjs/customHooks/useRipples/data-default.js

@@ -10,7 +10,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 11:55
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 07:15
+ * @lastModified 2026-02-05 17:22
  */
 /**
  * ## 默认值
@@ -27,6 +27,7 @@ const defaultData = {
     raindropsTimeInterval: 3600,
     idleFluctuations: true,
     darkMode: undefined,
+    loadingBackgroundColor: ['#00000000', '#00000000'],
 };
 /**  冷冻执行  */
 Object.freeze(defaultData);

package/cjs/customHooks/useRipples/index.js

@@ -15,7 +15,7 @@ var classRipple = require('./class-ripple.js');
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-06-20 01:37
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:19
+ * @lastModified 2026-02-07 08:12
  */
 /**
  *
@@ -25,7 +25,7 @@ var classRipple = require('./class-ripple.js');
  * @param canvas `usrRef` 包裹的 `HTMLCanvasElement`，用于绘制图像
  * @param option  初始化的
  * @version 0.0.3
- * @see  https://earthnut.dev/custom-hooks/use-ripples
+ * @see  https://lmssee.com/custom-hooks/use-ripples
  * @see  JQuery https://github.com/sirxemic/jquery.ripples
  * @example
  *

package/cjs/customHooks/useTimeId.js

@@ -12,7 +12,7 @@ var react = require('react');
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:20
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:19
+ * @lastModified 2026-02-07 08:12
  */
 /**
  *
@@ -21,7 +21,7 @@ var react = require('react');
  * 该数值在组件卸载时会自动调用 `clearTimeout` 清理
  *
  * @version 0.0.3
- * @see   https://earthnut.dev/custom-hooks/use-time-id
+ * @see   https://lmssee.com/custom-hooks/use-time-id
  * @example
  *
  * 使用：

package/es/components/ripples/LazyRippleEle.js

@@ -18,7 +18,7 @@ import { ComponentContent } from './Content.js';
  * @param props  使用参数
  * @param props.option 初始化状态设定选项
  * @version 0.0.1
- * @see https://earthnut.dev/earthnut/lazy-background-ripple
+ * @see https://lmssee.com/lazy-background-ripple
  * @example
  * 使用：
  *

package/es/components/ripples/RipplesEle.js

@@ -16,7 +16,7 @@ import { ComponentContent } from './Content.js';
  * @param props  使用参数
  * @param props.option 初始化 ripple 的原始数据
  * @version 0.0.1
- * @see https://earthnut.dev/earthnut/background-ripple
+ * @see https://lmssee.com/background-ripple
  * @example
  * 使用：
  *

package/es/customHooks/useAnimationFrame.js

@@ -11,7 +11,7 @@ import { useRef, useCallback, useEffect } from 'react';
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:18
+ * @lastModified 2026-02-07 08:11
  */
 /**
  *
@@ -23,7 +23,7 @@ import { useRef, useCallback, useEffect } from 'react';
  * @param [option=false] 使用第二参数，可指定是否立即执行及是否仅执行一次
  * @returns  返回值包含执行状态
  * @version 0.2.0
- * @see   https://earthnut.dev/custom-hooks/use-animation-frame
+ * @see   https://lmssee.com/custom-hooks/use-animation-frame
  * @example
  * 使用：
  *

package/es/customHooks/useInputIsComposing.js

@@ -10,7 +10,7 @@ import { useRef, useEffect } from 'react';
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:19
+ * @lastModified 2026-02-07 08:11
  */
 /**
  *
@@ -21,7 +21,7 @@ import { useRef, useEffect } from 'react';
  * @param inputRef [RefObject<HTMLInputElement | HTMLTextAreaElement>] 输入框的 ref
  * @returns  RefObject<boolean>
  * @version 0.0.4
- * @see   https://earthnut.dev/custom-hooks/use-input-is-composing
+ * @see   https://lmssee.com/custom-hooks/use-input-is-composing
  * @example
  *
  * 使用：

package/es/customHooks/useRipples/class-build-background.js

@@ -12,7 +12,7 @@ import { createImageBySrc, isNoneBackGroundColor, extractUrl } from './tools.js'
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 14:17
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 07:49
+ * @lastModified 2026-02-05 17:41
  */
 /**
  * ## 构建背景
@@ -37,8 +37,7 @@ class BuildBackground {
      * ## 默认加载的首个背景色
      */
     get defaultColor() {
-        return this.elementMeta.isDark ? '#000000' : '#ffffff';
-        // return '#00000000';
+        return this.options.loadingBackgroundColor[Number(this.elementMeta.isDark)];
     }
     /**
      * ## 最后使用

package/es/customHooks/useRipples/class-param.js

@@ -1,4 +1,4 @@
-import { isBoolean, isUndefined } from 'a-type-of-js';
+import { isBoolean, isUndefined, isArray, isString } from 'a-type-of-js';
 import { defaultData } from './data-default.js';
 
 /**
@@ -11,7 +11,7 @@ import { defaultData } from './data-default.js';
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 02:40
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-03 14:08
+ * @lastModified 2026-02-05 19:20
  */
 /**
  * ## 传入参数
@@ -34,6 +34,8 @@ class RippleParam {
     firstDrawProgressStep = 12;
     /**  canvas 的显隐  */
     visible = false;
+    /** 初始化设定值，该值由用户设置，但不可修改 */
+    loadingBackgroundColor;
     // ++++++++++++++++++++++ 配置数据 《〈《〈《〈《 ++++++++++++++++++++++
     // ++++++++++++++++++++++ 》〉》〉》〉》 用户控制变量 ++++++++++++++++++++++
     // 这些变量通过 Ripple 类的 set 方法设定
@@ -183,6 +185,7 @@ class RippleParam {
         this.running = Boolean(options.playingState ?? true);
         this.crossOrigin = options.crossOrigin;
         this.darkMode = options.darkMode;
+        this.loadingBackgroundColor = this.getLoadingBg(options.loadingBackgroundColor);
     }
     /**
      * ## 切换最后一次执行的状态
@@ -190,6 +193,26 @@ class RippleParam {
     toggleLastRunningState() {
         this._lastRunningState = !this._lastRunningState;
     }
+    /**
+     * ## 获取初始化背景值
+     * @param _v 初始化的值
+     */
+    getLoadingBg(_v) {
+        if (isArray(_v)) {
+            const len = _v.length;
+            if (len === 1) {
+                const color = _v[0];
+                return [color, color];
+            }
+            else if (len === 2) {
+                return [..._v];
+            }
+        }
+        else if (isString(_v)) {
+            return [_v, _v];
+        }
+        return ['#00000000', '#00000000'];
+    }
 }
 
 export { RippleParam };

package/es/customHooks/useRipples/class-ripple.js

@@ -19,7 +19,7 @@ import { defaultData } from './data-default.js';
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 03:03
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 07:42
+ * @lastModified 2026-02-05 19:24
  *
  */
 /**
@@ -206,6 +206,10 @@ class Ripples {
      * @param value
      */
     set(property, value) {
+        // 该属性不允许被重新赋值
+        if (property === 'loadingBackgroundColor') {
+            return;
+        }
         this.options[property] = value;
         // 数仓更新
         this.state.dispatch({

package/es/customHooks/useRipples/data-default.js

@@ -8,7 +8,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 11:55
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 07:15
+ * @lastModified 2026-02-05 17:22
  */
 /**
  * ## 默认值
@@ -25,6 +25,7 @@ const defaultData = {
     raindropsTimeInterval: 3600,
     idleFluctuations: true,
     darkMode: undefined,
+    loadingBackgroundColor: ['#00000000', '#00000000'],
 };
 /**  冷冻执行  */
 Object.freeze(defaultData);

package/es/customHooks/useRipples/index.js

@@ -13,7 +13,7 @@ import { Ripples } from './class-ripple.js';
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-06-20 01:37
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:19
+ * @lastModified 2026-02-07 08:12
  */
 /**
  *
@@ -23,7 +23,7 @@ import { Ripples } from './class-ripple.js';
  * @param canvas `usrRef` 包裹的 `HTMLCanvasElement`，用于绘制图像
  * @param option  初始化的
  * @version 0.0.3
- * @see  https://earthnut.dev/custom-hooks/use-ripples
+ * @see  https://lmssee.com/custom-hooks/use-ripples
  * @see  JQuery https://github.com/sirxemic/jquery.ripples
  * @example
  *

package/es/customHooks/useTimeId.js

@@ -10,7 +10,7 @@ import { useRef, useEffect } from 'react';
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:20
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:19
+ * @lastModified 2026-02-07 08:12
  */
 /**
  *
@@ -19,7 +19,7 @@ import { useRef, useEffect } from 'react';
  * 该数值在组件卸载时会自动调用 `clearTimeout` 清理
  *
  * @version 0.0.3
- * @see   https://earthnut.dev/custom-hooks/use-time-id
+ * @see   https://lmssee.com/custom-hooks/use-time-id
  * @example
  *
  * 使用：

package/es/src/components/ripples/LazyRippleEle.d.ts

@@ -7,7 +7,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2024-12-12 12:11
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:18
+ * @lastModified 2026-02-07 08:11
  */
 import type { BackgroundRipplesProps } from './types';
 /**
@@ -24,7 +24,7 @@ import type { BackgroundRipplesProps } from './types';
  * @param props  使用参数
  * @param props.option 初始化状态设定选项
  * @version 0.0.1
- * @see https://earthnut.dev/earthnut/lazy-background-ripple
+ * @see https://lmssee.com/lazy-background-ripple
  * @example
  * 使用：
  *

package/es/src/components/ripples/RipplesEle.d.ts

@@ -7,7 +7,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2024-12-12 12:18
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:18
+ * @lastModified 2026-02-07 08:11
  */
 import type { BackgroundRipplesProps } from './types';
 /**
@@ -22,7 +22,7 @@ import type { BackgroundRipplesProps } from './types';
  * @param props  使用参数
  * @param props.option 初始化 ripple 的原始数据
  * @version 0.0.1
- * @see https://earthnut.dev/earthnut/background-ripple
+ * @see https://lmssee.com/background-ripple
  * @example
  * 使用：
  *

package/es/src/components/ripples/types.d.ts

@@ -7,7 +7,7 @@
  * @copyright 2026 ©️ Mr.MudBean
  * @since 2026-02-02 16:55
  * @version 2.0.0-alpha.4
- * @lastModified 2026-02-04 06:42
+ * @lastModified 2026-02-07 08:08
  */
 import type { RipplesOptions } from '../../customHooks/useRipples/types';
 import type { PropsWithTagNameCustomRef } from '../type';
@@ -36,18 +36,19 @@ export type BackgroundRipplesProps = PropsWithTagNameCustomRef<{
     /**
      * ## 可设定涟漪的参数
      *
-     * - resolution  波速，值越小，波动越快。缺省为 `360`
-     * - dropRadius  波动强度，值越小，波动效果越大，缺省值为 `12`
-     * - perturbation 扰动系数，值越大，对原背景造成干涉越强，缺省为   `0.01`
-     * - interactive 光标交互，缺省为 `true` ，关闭须显示传入 `false` 值
      * - accelerating  加速光标移动触发，类似于扰动系数，及作用与鼠标或手指触发，缺省为 `1`
      * - crossOrigin 原始样式
+     * - darkMode 暗黑模式，仅用于在默认的背景图时更改默认背景图的背景色，如果使用了 `imgUrl` 配置，请执行处理色差异常
+     * - dropRadius 波动强度，值越小，波动效果越大，缺省值为 `12`
      * - imgUrl    原始背景图片地址
+     * - idleFluctuations  闲置波动，在光标交互不触发时，将触发模拟雨滴，缺省为 `true`
+     * - interactive 光标交互，缺省为 `true` ，关闭须显示传入 `false` 值
+     * - loadingBackgroundColor 初始化加载时背景色，可为单色值或双色值数组（**该值仅在初始化用到，后续更改该值直接舍弃**）
+     * - perturbation 扰动系数，值越大，对原背景造成干涉越强，缺省为   `0.01`
      * - playingState 当前的播放状态，缺省为 `true` ，设定为 `false` 时并不关闭，而是暂停
      * - raindropsTimeInterval 雨滴滴落的间隔，缺省为 `3650`，可设置区间为 `10 ~ 12000`，值越小，雨越大
+     * - resolution 分波速，值越小，波动越快。缺省为 `360`
      *   该值还将影响无背景设置时默认背景的切换频率，几乎每两个雨滴落下就会切换一次背景
-     * - idleFluctuations  闲置波动，在光标交互不触发时，将触发模拟雨滴，缺省为 `true`
-     * - darkMode 暗黑模式，仅用于在默认的背景图时更改默认背景图的背景色，如果使用了 `imgUrl` 配置，请执行处理色差异常
      */
     option?: RipplesOptions;
 }, 'div', RippleEle>;

package/es/src/customHooks/useAnimationFrame.d.ts

@@ -7,7 +7,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:18
+ * @lastModified 2026-02-07 08:11
  */
 /**  使用动画结果  */
 export interface UseAnimationFrameResult {
@@ -51,7 +51,7 @@ export type AnimationFrameOption = boolean | {
  * @param [option=false] 使用第二参数，可指定是否立即执行及是否仅执行一次
  * @returns  返回值包含执行状态
  * @version 0.2.0
- * @see   https://earthnut.dev/custom-hooks/use-animation-frame
+ * @see   https://lmssee.com/custom-hooks/use-animation-frame
  * @example
  * 使用：
  *

package/es/src/customHooks/useInputIsComposing.d.ts

@@ -7,7 +7,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:19
+ * @lastModified 2026-02-07 08:11
  */
 import type { RefObject } from 'react';
 /**
@@ -19,7 +19,7 @@ import type { RefObject } from 'react';
  * @param inputRef [RefObject<HTMLInputElement | HTMLTextAreaElement>] 输入框的 ref
  * @returns  RefObject<boolean>
  * @version 0.0.4
- * @see   https://earthnut.dev/custom-hooks/use-input-is-composing
+ * @see   https://lmssee.com/custom-hooks/use-input-is-composing
  * @example
  *
  * 使用：

package/es/src/customHooks/useRipples/class-build-background.d.ts

@@ -8,7 +8,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 14:17
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 07:49
+ * @lastModified 2026-02-05 17:41
  */
 import type { ElementMeta } from './class-html-element-meta';
 import type { RippleParam } from './class-param';

package/es/src/customHooks/useRipples/class-param.d.ts

@@ -8,7 +8,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 02:40
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-03 14:08
+ * @lastModified 2026-02-05 19:20
  */
 import type { ImageCrossOrigin, RippleImgUrl, RipplesOptions } from './types';
 /**
@@ -28,6 +28,8 @@ export declare class RippleParam {
     readonly firstDrawProgressStep = 12;
     /**  canvas 的显隐  */
     visible: boolean;
+    /** 初始化设定值，该值由用户设置，但不可修改 */
+    readonly loadingBackgroundColor: [string, string];
     /**  倍级触发光标事件（值）  */
     private _accelerating;
     /**  倍级触发光标事件  */
@@ -112,4 +114,9 @@ export declare class RippleParam {
      * ## 切换最后一次执行的状态
      */
     toggleLastRunningState(): void;
+    /**
+     * ## 获取初始化背景值
+     * @param _v 初始化的值
+     */
+    private getLoadingBg;
 }

package/es/src/customHooks/useRipples/class-ripple.d.ts

@@ -8,9 +8,10 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 03:03
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 07:42
+ * @lastModified 2026-02-05 19:24
  *
  */
+import { RippleParam } from './class-param';
 import type { RipplesOptions } from './types';
 /**
  *
@@ -90,6 +91,6 @@ export declare class Ripples {
      * 获取某一个参数的当前值
      * @param property 要获取的键
      */
-    get<T extends keyof RipplesOptions>(property: T): RipplesOptions[T];
+    get<T extends keyof RipplesOptions>(property: T): RippleParam[T];
     private readonly reducer;
 }

package/es/src/customHooks/useRipples/data-default.d.ts

@@ -8,7 +8,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-22 11:55
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 07:15
+ * @lastModified 2026-02-05 17:22
  */
 import type { RipplesDefaultData } from './types';
 /**

package/es/src/customHooks/useRipples/index.d.ts

@@ -8,7 +8,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-06-20 01:37
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:19
+ * @lastModified 2026-02-07 08:12
  */
 import type { RefObject } from 'react';
 import { Ripples } from './class-ripple';
@@ -21,7 +21,7 @@ import type { RippleImgUrl, RipplesOptions } from './types';
  * @param canvas `usrRef` 包裹的 `HTMLCanvasElement`，用于绘制图像
  * @param option  初始化的
  * @version 0.0.3
- * @see  https://earthnut.dev/custom-hooks/use-ripples
+ * @see  https://lmssee.com/custom-hooks/use-ripples
  * @see  JQuery https://github.com/sirxemic/jquery.ripples
  * @example
  *

package/es/src/customHooks/useRipples/types.d.ts

@@ -1,15 +1,18 @@
-/****************************************************************************
- * @Author earthnut
- * @Email earthnut.dev@outlook.com
- * @ProjectName react-ripples
- * @FileName interface.ts
- * @CreateDate  周二  12/17/2024
- * @Description BackgroundRipples 的类型声明文件
- ****************************************************************************/
+/**
+ * @author Mr.MudBean <Mr.MudBean@outlook.com>
+ * @file types.ts
+ * @since  周二  12/17/2024
+ * @description BackgroundRipples 的类型声明文件
+ * @lastModified 2026-02-07 08:06
+ */
+/**
+ * ## 图片源
+ *
+ */
 export type ImageCrossOrigin = 'anonymous' | 'use-credentials' | 'no-cors';
 /**
  *
- * WebGLProgram
+ * WebGL 程序
  *
  */
 export interface Program {
@@ -29,7 +32,7 @@ export interface Program {
 export type RippleImgUrl = string | string[] | null;
 export type RipplesUseOptions = {
     /**
-     * 波速
+     * ## 波速
      *
      * 作用为波传播的速度，值越大，波传播的越慢
      *
@@ -37,7 +40,7 @@ export type RipplesUseOptions = {
      */
     resolution: number;
     /**
-     * 波动强度
+     * ##  波动强度
      *
      * 值越小，波动越明显
      *
@@ -45,7 +48,7 @@ export type RipplesUseOptions = {
      */
     dropRadius: number;
     /**
-     * 扰动系数
+     * ## 扰动系数
      *
      * 缺省 `0.01`
      *
@@ -72,25 +75,25 @@ export type RipplesUseOptions = {
      */
     accelerating: number;
     /**
-     *  原设定的背景图片
+     * ##  原设定的背景图片
      *
-     * 缺省为 `''`
+     * 图片源
      */
     crossOrigin: ImageCrossOrigin;
     /**
-     * 设定的元素背景的 url 地址
+     * ## 设定的元素背景的 url 地址
      *
      * 缺省为 `null`
      */
     imgUrl: RippleImgUrl;
     /**
-     * 当前涟漪的状态
+     * ## 当前涟漪的状态
      *
      * 缺省为 `true` ， 即涟漪触发正在执行
      */
     playingState: boolean;
     /**
-     * 雨滴滴落的时间间隔
+     * ## 雨滴滴落的时间间隔
      *
      * 单位为 ms
      *
@@ -103,7 +106,7 @@ export type RipplesUseOptions = {
      */
     raindropsTimeInterval: number;
     /**
-     * 闲置波动
+     * ## 闲置波动
      *
      * 在光标交互不触发时，将触发模拟雨滴
      *
@@ -111,29 +114,42 @@ export type RipplesUseOptions = {
      */
     idleFluctuations: boolean;
     /**
-     *  是否为暗黑模式
+     *  ## 是否为暗黑模式
      *
      *  在使用默认的主题设置时，当页面使用暗黑模式时出现了文本看不清的现象
      *
      */
     darkMode: boolean | undefined;
+    /**
+     * ## 初始化时背景色
+     * 默认为透明，可传入一个色值，或双色值数组。
+     *
+     * 当传入的值为双色值数组时：
+     *
+     *  - 第一个色值将被用作默认背景加载色（亮）
+     *  - 第二个色值将被用作黑色主题背景加载色（暗）
+     *
+     * **该值仅在初始化用到，后续更改该值*直接*舍弃**
+     */
+    loadingBackgroundColor: string | [string] | [string, string];
 };
 /**
  *
  * 涟漪设定参数
  *
- * - resolution 分波速，值越小，波动越快。缺省为 `360`
- * - dropRadius 波动强度，值越小，波动效果越大，缺省值为 `12`
- * - perturbation 扰动系数，值越大，对原背景造成干涉越强，缺省为   `0.01`
- * - interactive 光标交互，缺省为 `true` ，关闭须显示传入 `false` 值
  * - accelerating  加速光标移动触发，类似于扰动系数，及作用与鼠标或手指触发，缺省为 `1`
  * - crossOrigin 原始样式
+ * - darkMode 暗黑模式，仅用于在默认的背景图时更改默认背景图的背景色，如果使用了 `imgUrl` 配置，请执行处理色差异常
+ * - dropRadius 波动强度，值越小，波动效果越大，缺省值为 `12`
  * - imgUrl    原始背景图片地址
+ * - idleFluctuations  闲置波动，在光标交互不触发时，将触发模拟雨滴，缺省为 `true`
+ * - interactive 光标交互，缺省为 `true` ，关闭须显示传入 `false` 值
+ * - loadingBackgroundColor 初始化加载时背景色，可为单色值或双色值数组（**该值仅在初始化用到，后续更改该值直接舍弃**）
+ * - perturbation 扰动系数，值越大，对原背景造成干涉越强，缺省为   `0.01`
  * - playingState 当前的播放状态，缺省为 `true` ，设定为 `false` 时并不关闭，而是暂停
  * - raindropsTimeInterval 雨滴滴落的间隔，缺省为 `3650`，可设置区间为 `10 ~ 12000`，值越小，雨越大
+ * - resolution 分波速，值越小，波动越快。缺省为 `360`
  *   该值还将影响无背景设置时默认背景的切换频率，几乎每两个雨滴落下就会切换一次背景
- * - idleFluctuations  闲置波动，在光标交互不触发时，将触发模拟雨滴，缺省为 `true`
- * - darkMode 暗黑模式，仅用于在默认的背景图时更改默认背景图的背景色，如果使用了 `imgUrl` 配置，请执行处理色差异常
  */
 export type RipplesOptions = Partial<RipplesUseOptions>;
 /**
@@ -142,17 +158,72 @@ export type RipplesOptions = Partial<RipplesUseOptions>;
 export interface RipplesDefaultData {
     /**  默认的图像地址  */
     imgUrl: null;
-    /**    */
+    /**
+     * ## 波速
+     *
+     * 作用为波传播的速度，值越大，波传播的越慢
+     */
     resolution: 360;
+    /**
+     * ## 波动强度
+     *
+     * 值越小，波动越明显
+     */
     dropRadius: 12;
+    /**
+     * ##  扰动系数
+     *
+     * 取之范围 `0.01 - 1`
+     *
+     * 值越大，扰动效果越明显
+     */
     perturbation: 0.01;
+    /** 是否开启光标滑动轨迹   */
     interactive: true;
+    /**
+     * ## 图片源
+     */
     crossOrigin: 'no-cors';
+    /**
+     * ## 当前涟漪的状态
+     *
+     * 缺省为 `true` ， 即涟漪触发正在执行
+     */
     playingState: true;
+    /**
+     * ## 加速光标移动触发
+     *
+     * 所以以倍级触发会让波动更加明显
+     *
+     * 可设置区间为 `2 - 100`
+     */
     accelerating: 1;
+    /**
+     * ## 雨滴滴落的时间间隔
+     *
+     * 单位为 ms，可设置区间为 `10 ~ 12000`
+     *
+     * 该值**还将影响无背景设置时默认背景的*切换频率***，几乎每两个雨滴落下就会切换一次背景
+     */
     raindropsTimeInterval: 3600;
+    /**
+     * ## 闲置波动
+     *
+     * 在光标交互不触发时，将触发模拟雨滴
+     */
     idleFluctuations: true;
+    /**
+     *  ## 暗黑模式
+     *
+     *  在使用默认的主题设置时，当页面使用暗黑模式时出现了文本看不清的现象
+     */
     darkMode: undefined;
+    /**
+     * ## 初始化时背景色
+     *
+     * 默认为透明，可传入一个色值，或双色值数组
+     */
+    loadingBackgroundColor: ['#00000000', '#00000000'];
 }
 /**
  * ## 绘制图像 （内部使用）

package/es/src/customHooks/useTimeId.d.ts

@@ -7,7 +7,7 @@
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:20
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-04 08:19
+ * @lastModified 2026-02-07 08:12
  */
 /**
  *
@@ -16,7 +16,7 @@
  * 该数值在组件卸载时会自动调用 `clearTimeout` 清理
  *
  * @version 0.0.3
- * @see   https://earthnut.dev/custom-hooks/use-time-id
+ * @see   https://lmssee.com/custom-hooks/use-time-id
  * @example
  *
  * 使用：

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "enr",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "一个 react ui",
   "peerDependencies": {
     "react": "^19.1.0",