@seaverse/auth-sdk 0.3.9 → 0.4.1

package/README.md

@@ -98,6 +98,31 @@ console.log('Health:', health);
 
 当你的应用被嵌入到 iframe 中时，可以使用 `getIframeToken()` 方法从父页面获取认证 token。这对于第三方登录重定向场景特别有用。
 
+#### 检查是否在 iframe 中运行
+
+在调用 iframe 相关方法前，建议先检查应用是否在 iframe 中运行：
+
+```typescript
+import { SeaVerseBackendAPIClient } from '@seaverse/auth-sdk';
+
+// 方式 1: 使用静态方法（无需 client 实例）
+if (SeaVerseBackendAPIClient.isInIframe()) {
+  console.log('应用正在 iframe 中运行');
+} else {
+  console.log('应用不在 iframe 中运行');
+}
+
+// 方式 2: 使用实例方法
+const client = new SeaVerseBackendAPIClient({
+  appId: 'your app id',
+});
+
+if (client.isInIframe()) {
+  console.log('应用正在 iframe 中运行');
+  // 可以安全地调用 getIframeToken()
+}
+```
+
 #### 子页面 (iframe 内) 使用方式
 
 ```typescript
@@ -107,23 +132,29 @@ const client = new SeaVerseBackendAPIClient({
   appId: 'your app id',
 });
 
-// 在 iframe 中请求父页面的 token
-try {
-  const token = await client.getIframeToken({
-    timeout: 10000 // 可选，默认 30 秒
-  });
+// 先检查是否在 iframe 中
+if (!client.isInIframe()) {
+  console.log('应用不在 iframe 中，跳过 token 获取');
+  // 可以使用其他登录方式
+} else {
+  // 在 iframe 中请求父页面的 token
+  try {
+    const token = await client.getIframeToken({
+      timeout: 10000 // 可选，默认 30 秒
+    });
 
-  // 设置 token 到 client
-  client.setToken(token);
-  localStorage.setItem('token', token);
+    // 设置 token 到 client
+    client.setToken(token);
+    localStorage.setItem('token', token);
 
-  console.log('成功从父页面获取 token');
+    console.log('成功从父页面获取 token');
 
-  // 现在可以使用需要认证的 API
-  const user = await client.getCurrentUser();
-  console.log('当前用户:', user);
-} catch (error) {
-  console.error('获取 token 失败:', error);
+    // 现在可以使用需要认证的 API
+    const user = await client.getCurrentUser();
+    console.log('当前用户:', user);
+  } catch (error) {
+    console.error('获取 token 失败:', error);
+  }
 }
 ```
 
@@ -172,6 +203,14 @@ const client = new SeaVerseBackendAPIClient({
 });
 
 async function initIframeApp() {
+  // 0. 检查是否在 iframe 中
+  if (!client.isInIframe()) {
+    console.log('应用不在 iframe 中，使用常规登录流程');
+    // 使用常规登录流程
+    showLoginForm();
+    return;
+  }
+
   try {
     // 1. 尝试从父页面获取 token
     const token = await client.getIframeToken();
@@ -531,8 +570,22 @@ Toast.success('操作成功', '数据已保存');
 Toast.error('操作失败', '请稍后重试');
 Toast.warning('注意', '账号已存在');
 Toast.info('提示', '邮件已发送');
+
+// 自定义显示时长（默认 3000ms）
+Toast.success('操作成功', '数据已保存', 5000);
 ```
 
+**🎯 智能交互特性**
+
+Toast 提供了智能的用户交互体验：
+
+- **Hover 暂停**：当鼠标悬停在 Toast 上时，自动暂停倒计时，让用户有足够时间阅读消息
+- **离开继续**：鼠标移开后，继续倒计时并自动消失
+- **手动关闭**：点击右上角的关闭按钮可立即关闭通知
+- **自动消失**：默认 3 秒后自动消失（可自定义时长）
+
+这些特性确保用户不会错过重要提示信息。
+
 #### 重置密码流程
 
 AuthModal 支持完整的密码重置流程：
@@ -1152,6 +1205,7 @@ SDK支持以下环境：
 | `forgotPassword()` | `{ email, frontend_url? }` | `SuccessResponse` | 忘记密码，frontend_url 默认为 window.location.href |
 | `resetPassword()` | `{ token, new_password }` | `SuccessResponse` | 重置密码 |
 | `setToken()` | `token: string` | `void` | 设置认证 token（OAuth 登录后使用） |
+| `isInIframe()` | - | `boolean` | 检查应用是否在 iframe 中运行（支持静态方法和实例方法） |
 | `getIframeToken()` | `{ timeout? }` | `Promise<string>` | 从父页面获取 token（仅 iframe 场景），timeout 默认 30000ms |
 | `getApiServiceToken()` | - | `ApiServiceTokenResponse` | 获取API Token |
 

package/dist/index.cjs

@@ -1285,6 +1285,51 @@ class SeaVerseBackendAPIClient {
         // Update the httpClient's auth
         this.httpClient.auth = auth;
     }
+    /**
+     * Check if the application is running inside an iframe
+     * This is a utility method to detect iframe context before calling iframe-specific methods
+     *
+     * @returns true if running in an iframe, false otherwise
+     *
+     * @example
+     * // Check if in iframe before requesting token
+     * if (client.isInIframe()) {
+     *   const token = await client.getIframeToken();
+     *   client.setToken(token);
+     * } else {
+     *   console.log('Not running in an iframe');
+     * }
+     *
+     * @example
+     * // Use as a static method without client instance
+     * if (SeaVerseBackendAPIClient.isInIframe()) {
+     *   console.log('Application is embedded in an iframe');
+     * }
+     */
+    static isInIframe() {
+        // Only works in browser environment
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        // Check if window.self is not equal to window.top
+        // This is the standard way to detect if running in an iframe
+        try {
+            return window.self !== window.top;
+        }
+        catch (e) {
+            // If we get a SecurityError (cross-origin iframe), we're definitely in an iframe
+            return true;
+        }
+    }
+    /**
+     * Instance method to check if running in an iframe
+     * Calls the static method for convenience
+     *
+     * @returns true if running in an iframe, false otherwise
+     */
+    isInIframe() {
+        return SeaVerseBackendAPIClient.isInIframe();
+    }
     /**
      * Get token from parent window via iframe communication
      * This method is designed for scenarios where the application is embedded in an iframe
@@ -1330,7 +1375,7 @@ class SeaVerseBackendAPIClient {
             return Promise.reject(new Error('getIframeToken() can only be used in browser environment'));
         }
         // Check if we're in an iframe
-        if (window.self === window.top) {
+        if (!this.isInIframe()) {
             return Promise.reject(new Error('getIframeToken() can only be used inside an iframe'));
         }
         const timeout = options?.timeout || 30000; // Default 30 seconds
@@ -2202,6 +2247,7 @@ class Toast {
         }
         // Create toast element
         const toast = this.createToast(type, title, message, onClose);
+        const toastId = toast.id;
         // Add to container
         this.container.appendChild(toast);
         this.toasts.push(toast);
@@ -2209,11 +2255,17 @@ class Toast {
         requestAnimationFrame(() => {
             toast.classList.add('toast-show');
         });
-        // Auto-dismiss
+        // Auto-dismiss with hover support
         if (duration > 0) {
-            setTimeout(() => {
-                this.dismiss(toast, onClose);
-            }, duration);
+            this.scheduleAutoDismiss(toast, duration, onClose);
+            // Pause auto-dismiss on hover
+            toast.addEventListener('mouseenter', () => {
+                this.clearAutoDismiss(toastId);
+            });
+            // Resume auto-dismiss on leave
+            toast.addEventListener('mouseleave', () => {
+                this.scheduleAutoDismiss(toast, duration, onClose);
+            });
         }
     }
     /**
@@ -2427,6 +2479,30 @@ class Toast {
         svg.appendChild(path);
         return svg;
     }
+    /**
+     * Schedule auto-dismiss for a toast
+     */
+    static scheduleAutoDismiss(toast, duration, onClose) {
+        const toastId = toast.id;
+        // Clear existing timer if any
+        this.clearAutoDismiss(toastId);
+        // Schedule new timer
+        const timer = setTimeout(() => {
+            this.dismiss(toast, onClose);
+            this.timers.delete(toastId);
+        }, duration);
+        this.timers.set(toastId, timer);
+    }
+    /**
+     * Clear auto-dismiss timer for a toast
+     */
+    static clearAutoDismiss(toastId) {
+        const timer = this.timers.get(toastId);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(toastId);
+        }
+    }
     /**
      * Dismiss a toast
      */
@@ -2719,6 +2795,7 @@ Toast.container = null;
 Toast.toasts = [];
 Toast.nextId = 0;
 Toast.cssInjected = false;
+Toast.timers = new Map();
 
 class AuthModal {
     constructor(options) {