@radishon/lumina 1.0.8 → 1.1.0

package/README.md

@@ -42,6 +42,22 @@ pnpm add @radishon/lumina
 
 ### React
 
+**方式一：使用 React 组件（推荐，Next.js App Router 兼容）**
+
+```tsx
+import { LuminaLoading } from '@radishon/lumina';
+
+function App() {
+  return (
+    <div className="loading-container">
+      <LuminaLoading type="star" speed={100} />
+    </div>
+  );
+}
+```
+
+**方式二：直接使用 Web Component**
+
 ```tsx
 import '@radishon/lumina';
 
@@ -54,6 +70,8 @@ function App() {
 }
 ```
 
+**注意**：方式二在 Next.js App Router 中需要额外配置 SSR，建议使用方式一。
+
 ### Vue 3
 
 **重要配置**：需要在 `vite.config.js` 或 `vue.config.js` 中配置 `isCustomElement` 来禁用 Vue 对 Web Component 的解析：
@@ -256,6 +274,16 @@ el.speed = 200;
 | `chars` | `string[]` | `null` | 自定义字符序列（JSON 数组格式），优先级高于 `type` |
 | `color` | `string` | `null` | 自定义颜色值，支持所有 CSS 颜色格式，优先级高于预设颜色 |
 
+## LuminaLoading React 组件 Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `type` | `SequenceKey` | `'claude'` | 动画序列类型 |
+| `speed` | `number` | `180` | 动画帧切换速度（毫秒） |
+| `chars` | `string[]` | `null` | 自定义字符序列 |
+| `color` | `string` | `null` | 自定义颜色值 |
+| `fallback` | `React.ReactNode` | `null` | SSR 时显示的占位内容 |
+
 ## 可用的序列类型
 
 Lumina 提供了 32 种精心设计的动画序列：

package/dist/Lumina-UMNW6GSY.mjs

@@ -0,0 +1,6 @@
+import {
+  Lumina_default
+} from "./chunk-QRENGH6F.mjs";
+export {
+  Lumina_default as default
+};

package/dist/chunk-QRENGH6F.mjs

@@ -0,0 +1,311 @@
+// src/sequence.ts
+var SEQUENCES = {
+  claude: {
+    name: "CLAUDE \u8F68\u8FF9",
+    chars: ["\u2732", "\u2731", "\u273A", "\u273B", "\u273C", "\u273D", "\u273E"],
+    color: "#fadb14"
+  },
+  diamond: {
+    name: "\u83F1\u5F62\u8109\u51B2",
+    chars: ["\u25C7", "\u25C6", "\u25C8", "\u25C6", "\u25C7", "\u25C6", "\u25C8", "\u25C6"],
+    color: "#40a9ff"
+  },
+  circle: {
+    name: "\u67D4\u5149\u5706\u73AF",
+    chars: ["\xB7", "\u2219", "\u2218", "\u25CB", "\u25CC", "\u25CD", "\u25CE", "\u25CF", "\u25D0", "\u25D1", "\u25D2", "\u25D3"],
+    color: "#b37feb"
+  },
+  step: {
+    name: "\u9636\u68AF\u8282\u594F",
+    chars: ["\u2591", "\u2592", "\u2593", "\u2588", "\u2593", "\u2592", "\u2591"],
+    color: "#73d13d"
+  },
+  flower: {
+    name: "\u5F00\u82B1\u7EFD\u653E",
+    chars: ["\u2740", "\u2741", "\u273F", "\u2743", "\u274B", "\u273E", "\u2740"],
+    color: "#ffadd2"
+  },
+  star: {
+    name: "\u661F\u8FB0\u56DE\u73AF",
+    chars: ["\u2726", "\u2727", "\u2729", "\u272A", "\u272B", "\u272C", "\u272D", "\u272E", "\u272F"],
+    color: "#ffffff"
+  },
+  snow: {
+    name: "\u96EA\u82B1\u6676\u683C",
+    chars: ["\xB7", "\u2744", "\u2745", "\u2746", "\u2744", "\u2745", "\u2746"],
+    color: "#e6f7ff"
+  },
+  spiral: {
+    name: "\u87BA\u65CB\u56DE\u58F0",
+    chars: ["\u25C9", "\u25CE", "\u25CB", "\u25CC", "\u25CD", "\u25CF", "\u25D0", "\u25D1"],
+    color: "#fadb14"
+  },
+  braille: {
+    name: "\u5E03\u83B1\u53F6\u7801",
+    chars: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"],
+    color: "#00ff00"
+  },
+  cypher: {
+    name: "\u5BC6\u7801\u77E9\u9635",
+    chars: ["\u259E", "\u259A", "\u259C", "\u2599", "\u259F", "\u259B"],
+    color: "#00d8ff"
+  },
+  moon: {
+    name: "\u6708\u76F8\u53D8\u5316",
+    chars: ["\u{1F311}", "\u{1F312}", "\u{1F313}", "\u{1F314}", "\u{1F315}", "\u{1F316}", "\u{1F317}", "\u{1F318}"],
+    color: "#fffae6"
+  },
+  wave: {
+    name: "\u6CE2\u6D6A\u8D77\u4F0F",
+    chars: ["_", "\u23BD", "\u23BC", "\u23BB", "\u23BA", "\u23BB", "\u23BC", "\u23BD"],
+    color: "#ff4d4f"
+  },
+  compass: {
+    name: "\u65B9\u5411\u7F57\u76D8",
+    chars: ["\u2191", "\u2197", "\u2192", "\u2198", "\u2193", "\u2199", "\u2190", "\u2196"],
+    color: "#ff4500"
+  },
+  pixel: {
+    name: "\u50CF\u7D20\u65B9\u5757",
+    chars: ["\u25A3", "\u25A4", "\u25A5", "\u25A6", "\u25A7", "\u25A8", "\u25A9"],
+    color: "#722ed1"
+  },
+  clock: {
+    name: "\u65F6\u949F\u6307\u9488",
+    chars: ["\u{1F550}", "\u{1F551}", "\u{1F552}", "\u{1F553}", "\u{1F554}", "\u{1F555}", "\u{1F556}", "\u{1F557}", "\u{1F558}", "\u{1F559}", "\u{1F55A}", "\u{1F55B}"],
+    color: "#ffbb96"
+  },
+  // 音乐风格
+  equalizer: {
+    name: "\u97F3\u9891\u5747\u8861",
+    chars: ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588", "\u2587", "\u2586", "\u2585", "\u2584"],
+    color: "#00bcd4"
+  },
+  waveform: {
+    name: "\u6CE2\u5F62\u632F\u8361",
+    chars: ["\u223F", "\u25E0", "\u25E1", "\u223F", "\u25E0", "\u25E1"],
+    color: "#ff5722"
+  },
+  // 游戏风格
+  dice: {
+    name: "\u9AB0\u5B50\u6EDA\u52A8",
+    chars: ["\u2680", "\u2681", "\u2682", "\u2683", "\u2684", "\u2685", "\u2680", "\u2681"],
+    color: "#607d8b"
+  },
+  // 动态几何
+  bounce: {
+    name: "\u5F39\u8DF3\u7403",
+    chars: ["\u2801", "\u2803", "\u2807", "\u2847", "\u28C7", "\u28E7", "\u28F7", "\u28FF", "\u28F7", "\u28E7", "\u28C7", "\u2847"],
+    color: "#ff6b6b"
+  },
+  radar: {
+    name: "\u96F7\u8FBE\u626B\u63CF",
+    chars: ["\u25D0", "\u25D1", "\u25D2", "\u25D3", "\u25D0", "\u25D1", "\u25D2", "\u25D3"],
+    color: "#00d4aa"
+  },
+  // 数字符号
+  dots: {
+    name: "\u70B9\u9635\u547C\u5438",
+    chars: ["\xB7", "\u22EF", "\u22EF\u22EF", "\xB7\xB7\xB7\xB7", "\u22EF\u22EF\u22EF", "\xB7\xB7\xB7\xB7\xB7\xB7", "\u22EF\u22EF\u22EF\u22EF", "\xB7\xB7\xB7\xB7\xB7\xB7\xB7\xB7"],
+    color: "#4d96ff"
+  },
+  // 液体流体
+  liquid: {
+    name: "\u6DB2\u4F53\u6643\u52A8",
+    chars: ["\u223D", "\u223E", "\u223F", "\u223D", "\u223E", "\u223F", "\u2240", "\u223D"],
+    color: "#118ab2"
+  },
+  ripple: {
+    name: "\u6C34\u7EB9\u6269\u6563",
+    chars: ["\u25CB", "\u25CE", "\u25C9", "\u25CF", "\u25CB", "\u25CE", "\u25C9", "\u25CF"],
+    color: "#073b4c"
+  },
+  bubble: {
+    name: "\u6C14\u6CE1\u6D6E\u8D77",
+    chars: ["\u2218", "\u25CB", "\u25CC", "\u25CD", "\u25CE", "\u25CF", "\u25CB", "\u2218"],
+    color: "#48cae4"
+  },
+  // 光谱渐变
+  gradient: {
+    name: "\u6E10\u53D8\u6761",
+    chars: ["\u258F", "\u258E", "\u258D", "\u258C", "\u258B", "\u258A", "\u2589", "\u2588", "\u2589", "\u258A", "\u258B", "\u258C"],
+    color: "#ee82ee"
+  },
+  spectrum: {
+    name: "\u5149\u8C31\u626B\u63CF",
+    chars: ["\u2591\u2592\u2593", "\u2592\u2593\u2588", "\u2593\u2588\u2591", "\u2588\u2591\u2592", "\u2591\u2592\u2593", "\u2592\u2593\u2588"],
+    color: "#ff69b4"
+  },
+  // 中国传统
+  bagua: {
+    name: "\u516B\u5366",
+    chars: ["\u2630", "\u2631", "\u2632", "\u2633", "\u2634", "\u2635", "\u2636", "\u2637"],
+    color: "#8d6e63"
+  },
+  // 几何角落
+  corners: {
+    name: "\u89D2\u843D\u65CB\u8F6C",
+    chars: ["\u231C", "\u231D", "\u231F", "\u231E", "\u231C", "\u231D", "\u231F", "\u231E"],
+    color: "#80cbc4"
+  },
+  // 扑克纸牌
+  cards: {
+    name: "\u7EB8\u724C",
+    chars: ["\u{1F0A1}", "\u{1F0A2}", "\u{1F0A3}", "\u{1F0A4}", "\u{1F0A5}", "\u{1F0A6}", "\u{1F0A7}", "\u{1F0A8}"],
+    color: "#c62828"
+  },
+  // 装饰符号
+  ornament: {
+    name: "\u88C5\u9970\u7B26",
+    chars: ["\u2766", "\u2767", "\u2740", "\u273F", "\u2741", "\u2742", "\u2743", "\u2747", "\u2748"],
+    color: "#e91e63"
+  },
+  // 危险警告
+  radiation: {
+    name: "\u8F90\u5C04\u8B66\u544A",
+    chars: ["\u2622", "\u2623", "\u2620", "\u269B", "\u262E", "\u2622", "\u2623", "\u2620"],
+    color: "#76ff03"
+  }
+};
+
+// src/Lumina.ts
+var LuminaElement = class extends HTMLElement {
+  constructor() {
+    super();
+    this._index = 0;
+    this._timer = null;
+    this._div = null;
+    this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["type", "speed", "chars", "color"];
+  }
+  connectedCallback() {
+    this.render();
+    this.startAnimation();
+  }
+  disconnectedCallback() {
+    if (this._timer) {
+      clearInterval(this._timer);
+    }
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      if (name === "speed" && this._timer) {
+        this.startAnimation();
+      }
+      if (name === "type" || name === "chars" || name === "color") {
+        this.render();
+        this.startAnimation();
+      }
+    }
+  }
+  get type() {
+    return this.getAttribute("type") || "claude";
+  }
+  set type(value) {
+    this.setAttribute("type", value);
+  }
+  get speed() {
+    const speed = this.getAttribute("speed");
+    return speed !== null ? parseInt(speed, 10) : 180;
+  }
+  set speed(value) {
+    this.setAttribute("speed", String(value));
+  }
+  get chars() {
+    const charsAttr = this.getAttribute("chars");
+    if (charsAttr) {
+      try {
+        const parsed = JSON.parse(charsAttr);
+        if (Array.isArray(parsed) && parsed.every((item) => typeof item === "string")) {
+          return parsed;
+        }
+      } catch {
+      }
+    }
+    return null;
+  }
+  set chars(value) {
+    if (value === null) {
+      this.removeAttribute("chars");
+    } else {
+      this.setAttribute("chars", JSON.stringify(value));
+    }
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(value) {
+    if (value === null) {
+      this.removeAttribute("color");
+    } else {
+      this.setAttribute("color", value);
+    }
+  }
+  getChars() {
+    const customChars = this.chars;
+    if (customChars) {
+      return customChars;
+    }
+    const config = SEQUENCES[this.type] || SEQUENCES["claude"];
+    return config.chars;
+  }
+  getConfig() {
+    return SEQUENCES[this.type] || SEQUENCES["claude"];
+  }
+  getColor() {
+    const customColor = this.color;
+    if (customColor) {
+      return customColor;
+    }
+    const config = this.getConfig();
+    return config.color;
+  }
+  render() {
+    const chars = this.getChars();
+    const color = this.getColor();
+    const currentChar = chars[this._index] || chars[0];
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+        }
+        .container {
+          color: ${color};
+          text-shadow: 0 0 20px ${color}66;
+          font-size: 42px;
+          height: 60px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.2s ease;
+          font-family: monospace;
+        }
+      </style>
+      <div class="container">${currentChar}</div>
+    `;
+    this._div = this.shadowRoot.querySelector(".container");
+  }
+  startAnimation() {
+    if (this._timer) {
+      clearInterval(this._timer);
+    }
+    const chars = this.getChars();
+    this._timer = setInterval(() => {
+      this._index = (this._index + 1) % chars.length;
+      if (this._div) {
+        this._div.textContent = chars[this._index];
+      }
+    }, this.speed);
+  }
+};
+if (typeof customElements !== "undefined" && !customElements.get("lumina-loading")) {
+  customElements.define("lumina-loading", LuminaElement);
+}
+var Lumina_default = LuminaElement;
+
+export {
+  SEQUENCES,
+  Lumina_default
+};

package/dist/index.d.mts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface SequenceConfig {
     name: string;
     chars: string[];
@@ -30,4 +32,13 @@ declare class LuminaElement extends HTMLElement {
     private startAnimation;
 }
 
-export { LuminaElement as Lumina, LuminaElement, SEQUENCES, type SequenceConfig, type SequenceKey };
+interface LuminaLoadingProps {
+    type?: SequenceKey;
+    speed?: number;
+    chars?: string[];
+    color?: string;
+    fallback?: React.ReactNode;
+}
+declare function LuminaLoading({ type, speed, chars, color, fallback, }: LuminaLoadingProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+
+export { LuminaElement as Lumina, LuminaElement, LuminaLoading, SEQUENCES, type SequenceConfig, type SequenceKey };

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 interface SequenceConfig {
     name: string;
     chars: string[];
@@ -30,4 +32,13 @@ declare class LuminaElement extends HTMLElement {
     private startAnimation;
 }
 
-export { LuminaElement as Lumina, LuminaElement, SEQUENCES, type SequenceConfig, type SequenceKey };
+interface LuminaLoadingProps {
+    type?: SequenceKey;
+    speed?: number;
+    chars?: string[];
+    color?: string;
+    fallback?: React.ReactNode;
+}
+declare function LuminaLoading({ type, speed, chars, color, fallback, }: LuminaLoadingProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+
+export { LuminaElement as Lumina, LuminaElement, LuminaLoading, SEQUENCES, type SequenceConfig, type SequenceKey };