react-native-fxview 1.0.2 → 1.0.3-beta1

package/logger/FXLogger-README.md

@@ -0,0 +1,248 @@
+# FX Logger - 调试日志系统
+
+FX Logger 是一个专为 React Native 项目设计的调试日志系统，提供了丰富的日志功能和灵活的配置选项。
+
+## 功能特点
+
+- **调试模式控制**: 仅在调试模式下输出日志，避免生产环境日志泄露
+- **时间戳支持**: 自动添加完整时间戳（年月日时分秒毫秒），便于追踪时间线
+- **多级别日志**: 支持 debug、info、warn、error 四个日志级别，每个级别有不同颜色标识
+- **标签分类**: 支持按标签分类日志，便于筛选和定位问题
+- **日志分组**: 支持日志分组功能，便于组织相关日志
+- **性能计时**: 内置性能计时功能，方便性能分析
+- **表格输出**: 支持表格形式输出结构化数据
+- **灵活配置**: 可配置的日志级别、前缀、时间戳等
+- **级别颜色**: 不同日志级别自动分配颜色标识，提升可读性
+
+## 快速开始
+
+### 1. 导入 Logger
+
+```typescript
+import logger from "./FXLogger";
+
+// 或者从主入口导入
+import { logger } from "./index";
+```
+
+### 2. 基本使用
+
+```typescript
+// 调试日志（仅在调试模式下显示）
+logger.debug("MyComponent", "This is a debug message");
+
+// 信息日志
+logger.info("MyComponent", "This is an info message");
+
+// 警告日志
+logger.warn("MyComponent", "This is a warning message");
+
+// 错误日志
+logger.error("MyComponent", "This is an error message");
+```
+
+### 3. 带参数日志
+
+```typescript
+logger.debug("MyComponent", "User action:", { 
+  action: "click", 
+  target: "button",
+  timestamp: Date.now() 
+});
+
+logger.info("MyComponent", "Multiple", "arguments", "supported");
+```
+
+### 4. 日志分组
+
+```typescript
+logger.group("UserFlow", "用户操作流程");
+logger.debug("UserFlow", "步骤1: 用户点击登录按钮");
+logger.debug("UserFlow", "步骤2: 验证用户凭证");
+logger.info("UserFlow", "用户登录流程完成");
+logger.groupEnd();
+```
+
+### 5. 性能计时
+
+```typescript
+logger.time("Performance", "数据加载");
+// 执行一些操作
+logger.timeEnd("Performance", "数据加载");
+```
+
+### 6. 表格输出
+
+```typescript
+const users = [
+  { id: 1, name: "张三", age: 25, city: "北京" },
+  { id: 2, name: "李四", age: 30, city: "上海" },
+];
+logger.table("UserService", users);
+```
+
+### 7. 断言日志
+
+```typescript
+const userAge = 20;
+logger.assert("Validation", userAge >= 18, "用户必须年满18岁");
+
+const isLoggedIn = true;
+logger.assert("AuthService", isLoggedIn, "用户必须已登录");
+```
+
+### 8. 追踪日志
+
+```typescript
+function deepFunction() {
+  logger.trace("MyComponent", "Current call stack");
+}
+
+function middleFunction() {
+  deepFunction();
+}
+
+function topFunction() {
+  middleFunction();
+}
+```
+
+## 配置选项
+
+### 获取和设置配置
+
+```typescript
+// 获取当前配置
+const config = logger.getConfig();
+console.log("当前配置:", config);
+
+// 修改配置
+logger.configure({
+  debug: true,              // 启用调试模式
+  level: FXLogLevel.DEBUG,  // 设置日志级别
+  showTimestamp: true,      // 显示时间戳
+  showTags: true,           // 显示标签
+  prefix: "[MY-APP]"        // 设置前缀
+});
+```
+
+### 日志级别
+
+```typescript
+export enum FXLogLevel {
+  DEBUG = 0,    // 调试级别（最详细）
+  INFO = 1,     // 信息级别
+  WARN = 2,     // 警告级别
+  ERROR = 3,    // 错误级别
+  SILENT = 4    // 静默模式（不输出任何日志）
+}
+```
+
+### 级别颜色标识
+
+FX Logger 为不同日志级别自动分配颜色标识：
+
+- **DEBUG** 🔵 蓝色 - 调试信息
+- **INFO** 🟢 绿色 - 一般信息  
+- **WARN** 🟡 黄色 - 警告信息
+- **ERROR** 🔴 红色 - 错误信息
+
+```typescript
+logger.debug("MyComponent", "调试信息");   // 🔵 [DEBUG]
+logger.info("MyComponent", "一般信息");    // 🟢 [INFO]
+logger.warn("MyComponent", "警告信息");    // 🟡 [WARN]
+logger.error("MyComponent", "错误信息");   // 🔴 [ERROR]
+```
+
+### 时间戳格式
+
+时间戳格式为：`YYYY-MM-DD HH:mm:ss.SSS`
+
+示例：`[2024-02-12 14:32:15.123]`
+
+包含完整的年月日信息，便于长期日志追踪和分析。
+
+## 环境检测
+
+FX Logger 支持自动环境检测，能够智能识别当前运行环境：
+
+- **开发环境**: 自动启用调试模式，显示所有级别日志
+- **生产环境**: 自动禁用调试模式，只显示错误级别日志
+
+检测顺序：
+1. React Native `__DEV__` 变量
+2. Node.js `process.env.NODE_ENV`
+3. 全局 `NODE_ENV` 变量
+4. 浏览器 `window.__DEV__`
+
+## 使用示例
+
+### 基本示例
+
+```typescript
+import logger from "./FXLogger";
+
+// 开发环境输出所有日志
+logger.debug("AuthService", "用户登录开始");
+logger.info("AuthService", "用户登录成功");
+logger.error("AuthService", "用户登录失败");
+
+// 生产环境只输出错误日志
+logger.debug("AuthService", "这条不会显示");  // ❌ 不显示
+logger.error("AuthService", "这条会显示");    // ✅ 显示
+```
+
+### 输出示例
+
+```
+// 开发环境
+[FX-DEV][2024-02-12 14:32:15.123][🔵DEBUG][AuthService] 用户登录开始
+[FX-DEV][2024-02-12 14:32:15.124][🟢INFO][AuthService] 用户登录成功
+[FX-DEV][2024-02-12 14:32:15.125][🔴ERROR][AuthService] 用户登录失败
+
+// 生产环境
+[FX-PROD][2024-02-12 14:32:15.125][🔴ERROR][AuthService] 用户登录失败
+```
+
+## API 参考
+
+### Logger 方法
+
+- `debug(tag: string, message: string, ...args: any[]): void` - 调试日志
+- `info(tag: string, message: string, ...args: any[]): void` - 信息日志
+- `warn(tag: string, message: string, ...args: any[]): void` - 警告日志
+- `error(tag: string, message: string, ...args: any[]): void` - 错误日志
+- `group(tag: string, label?: string): void` - 开始日志分组
+- `groupEnd(): void` - 结束日志分组
+- `table(tag: string, data: any): void` - 表格形式输出数据
+- `time(tag: string, label: string): void` - 开始计时
+- `timeEnd(tag: string, label: string): void` - 结束计时
+- `assert(tag: string, condition: any, message?: string): void` - 断言日志
+- `trace(tag: string, message: string): void` - 追踪日志
+- `getConfig(): FXLoggerConfig` - 获取当前配置
+- `configure(config: Partial<FXLoggerConfig>): void` - 配置 Logger
+- `enableDebug(): void` - 启用调试模式
+- `disableDebug(): void` - 禁用调试模式
+
+## 注意事项
+
+1. **生产环境**: 默认只显示错误级别日志，避免敏感信息泄露
+2. **时间戳**: 包含完整的年月日信息，便于长期日志分析
+3. **级别颜色**: 不同级别自动分配颜色，提升日志可读性
+4. **标签功能**: 标签参数仍然存在，用于分类标识，但不添加颜色装饰
+5. **性能**: 在生产环境中，低级别日志会被自动过滤，不影响性能
+
+## 更新日志
+
+### v2.1.0
+- ✅ 添加级别颜色标识功能
+- ✅ 时间戳格式改为包含年月日
+- ✅ 移除标签颜色功能，简化输出
+- ✅ 优化环境检测逻辑
+
+### v2.0.0
+- ✅ 添加自动环境检测功能
+- ✅ 开发环境默认启用调试模式
+- ✅ 生产环境默认禁用调试模式
+
+FX Logger 让您的 React Native 项目调试更加高效和直观！🚀

package/logger/FXLogger.d.ts

@@ -0,0 +1,106 @@
+/**
+ * 日志级别枚举
+ */
+export declare enum FXLogLevel {
+    DEBUG = 0,// 调试级别（最详细）
+    INFO = 1,// 信息级别
+    WARN = 2,// 警告级别
+    ERROR = 3,// 错误级别
+    SILENT = 4
+}
+/**
+ * Logger 配置接口
+ */
+export interface FXLoggerConfig {
+    debug: boolean;
+    level: FXLogLevel;
+    showTimestamp: boolean;
+    showTags: boolean;
+    prefix: string;
+}
+/**
+ * FX Logger - 专为 React Native 项目设计的调试日志系统
+ * 提供丰富的日志功能和灵活的配置选项
+ */
+export declare class FXLogger {
+    private static instance;
+    private config;
+    /**
+     * 私有构造函数，实现单例模式
+     */
+    private constructor();
+    /**
+     * 获取单例实例
+     */
+    static getInstance(): FXLogger;
+    /**
+     * 检测当前是否为开发环境
+     */
+    private isDevelopmentEnvironment;
+    /**
+     * 获取当前配置
+     */
+    getConfig(): FXLoggerConfig;
+    /**
+     * 配置 Logger
+     */
+    configure(config: Partial<FXLoggerConfig>): void;
+    /**
+     * 启用调试模式
+     */
+    enableDebug(): void;
+    /**
+     * 禁用调试模式
+     */
+    disableDebug(): void;
+    /**
+     * 获取时间戳（包含年月日）
+     */
+    private getTimestamp;
+    /**
+     * 检查是否应该记录日志
+     */
+    private shouldLog;
+    /**
+     * 获取日志级别的颜色符号
+     */
+    private getLevelColor;
+    /**
+     * 格式化日志消息
+     */
+    private formatMessage;
+    /**
+     * 调试日志
+     */
+    debug(tag: string, message: string, ...args: any[]): void;
+    /**
+     * 信息日志
+     */
+    info(tag: string, message: string, ...args: any[]): void;
+    /**
+     * 警告日志
+     */
+    warn(tag: string, message: string, ...args: any[]): void;
+    /**
+     * 错误日志
+     */
+    error(tag: string, message: string, ...args: any[]): void;
+    /**
+     * 分组日志
+     */
+    group(tag: string, label?: string): void;
+    /**
+     * 结束分组日志
+     */
+    groupEnd(): void;
+    /**
+     * 表格日志
+     */
+    table(tag: string, data: any): void;
+    /**
+     * 追踪日志
+     */
+    trace(tag: string, message: string): void;
+}
+declare const logger: FXLogger;
+export default logger;

package/logger/FXLogger.js

@@ -0,0 +1,237 @@
+"use strict";
+// ========== Logger 类型定义 ==========
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FXLogger = exports.FXLogLevel = void 0;
+/**
+ * 日志级别枚举
+ */
+var FXLogLevel;
+(function (FXLogLevel) {
+    FXLogLevel[FXLogLevel["DEBUG"] = 0] = "DEBUG";
+    FXLogLevel[FXLogLevel["INFO"] = 1] = "INFO";
+    FXLogLevel[FXLogLevel["WARN"] = 2] = "WARN";
+    FXLogLevel[FXLogLevel["ERROR"] = 3] = "ERROR";
+    FXLogLevel[FXLogLevel["SILENT"] = 4] = "SILENT";
+})(FXLogLevel || (exports.FXLogLevel = FXLogLevel = {}));
+/**
+ * FX Logger - 专为 React Native 项目设计的调试日志系统
+ * 提供丰富的日志功能和灵活的配置选项
+ */
+class FXLogger {
+    /**
+     * 私有构造函数，实现单例模式
+     */
+    constructor() {
+        // 自动检测环境
+        const isDevelopment = this.isDevelopmentEnvironment();
+        // 根据环境设置默认配置
+        this.config = {
+            debug: isDevelopment, // 开发环境启用调试模式，生产环境禁用
+            level: isDevelopment ? FXLogLevel.DEBUG : FXLogLevel.ERROR, // 生产环境只显示错误日志
+            showTimestamp: true,
+            showTags: true,
+            prefix: isDevelopment ? "[FX-DEV]" : "[FX-PROD]", // 不同环境使用不同前缀
+        };
+    }
+    /**
+     * 获取单例实例
+     */
+    static getInstance() {
+        if (!FXLogger.instance) {
+            FXLogger.instance = new FXLogger();
+        }
+        return FXLogger.instance;
+    }
+    /**
+     * 检测当前是否为开发环境
+     */
+    isDevelopmentEnvironment() {
+        try {
+            // 使用 Function 构造函数来安全地访问全局变量，避免 TypeScript 错误
+            const getGlobal = new Function("return this")();
+            // 检测 React Native 的 __DEV__ 变量
+            if (typeof getGlobal.__DEV__ !== "undefined" && getGlobal.__DEV__) {
+                return true;
+            }
+            // 检测 Node.js 环境变量
+            if (typeof getGlobal.process !== "undefined" &&
+                getGlobal.process.env &&
+                getGlobal.process.env.NODE_ENV === "development") {
+                return true;
+            }
+            // 检测 window 对象（浏览器环境）
+            if (typeof getGlobal.window !== "undefined" && getGlobal.window.__DEV__) {
+                return true;
+            }
+            // 检测全局对象属性
+            if (getGlobal.NODE_ENV === "development") {
+                return true;
+            }
+        }
+        catch (error) {
+            // 如果检测过程中出错，默认返回 false（生产环境）
+            this.error("FXLogger", "Environment detection failed", error);
+        }
+        // 默认返回 false（生产环境）
+        return false;
+    }
+    /**
+     * 获取当前配置
+     */
+    getConfig() {
+        return Object.assign({}, this.config);
+    }
+    /**
+     * 配置 Logger
+     */
+    configure(config) {
+        this.config = Object.assign(Object.assign({}, this.config), config);
+    }
+    /**
+     * 启用调试模式
+     */
+    enableDebug() {
+        this.config.debug = true;
+    }
+    /**
+     * 禁用调试模式
+     */
+    disableDebug() {
+        this.config.debug = false;
+    }
+    /**
+     * 获取时间戳（包含年月日）
+     */
+    getTimestamp() {
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = (now.getMonth() + 1).toString().padStart(2, "0");
+        const day = now.getDate().toString().padStart(2, "0");
+        const hours = now.getHours().toString().padStart(2, "0");
+        const minutes = now.getMinutes().toString().padStart(2, "0");
+        const seconds = now.getSeconds().toString().padStart(2, "0");
+        const milliseconds = now.getMilliseconds().toString().padStart(3, "0");
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
+    }
+    /**
+     * 检查是否应该记录日志
+     */
+    shouldLog(level) {
+        if (!this.config.debug && level < FXLogLevel.ERROR) {
+            return false;
+        }
+        return level >= this.config.level;
+    }
+    /**
+     * 获取日志级别的颜色符号
+     */
+    getLevelColor(level) {
+        switch (level) {
+            case FXLogLevel.DEBUG:
+                return "🔵"; // 蓝色 - 调试
+            case FXLogLevel.INFO:
+                return "🟢"; // 绿色 - 信息
+            case FXLogLevel.WARN:
+                return "🟡"; // 黄色 - 警告
+            case FXLogLevel.ERROR:
+                return "🔴"; // 红色 - 错误
+            default:
+                return "⚪"; // 默认白色
+        }
+    }
+    /**
+     * 格式化日志消息
+     */
+    formatMessage(level, tag, message) {
+        const parts = [];
+        if (this.config.prefix) {
+            parts.push(this.config.prefix);
+        }
+        if (this.config.showTimestamp) {
+            parts.push(`[${this.getTimestamp()}]`);
+        }
+        // 根据日志级别添加颜色符号
+        const levelEnum = FXLogLevel[level.toUpperCase()];
+        const colorSymbol = this.getLevelColor(levelEnum);
+        parts.push(`[${colorSymbol}${level.toUpperCase()}]`);
+        if (this.config.showTags && tag) {
+            parts.push(`[${tag}]`);
+        }
+        return parts.join("") + " " + message;
+    }
+    /**
+     * 调试日志
+     */
+    debug(tag, message, ...args) {
+        if (!this.shouldLog(FXLogLevel.DEBUG))
+            return;
+        const formattedMessage = this.formatMessage("debug", tag, message);
+        console.log(formattedMessage, ...args);
+    }
+    /**
+     * 信息日志
+     */
+    info(tag, message, ...args) {
+        if (!this.shouldLog(FXLogLevel.INFO))
+            return;
+        const formattedMessage = this.formatMessage("info", tag, message);
+        console.info(formattedMessage, ...args);
+    }
+    /**
+     * 警告日志
+     */
+    warn(tag, message, ...args) {
+        if (!this.shouldLog(FXLogLevel.WARN))
+            return;
+        const formattedMessage = this.formatMessage("warn", tag, message);
+        console.warn(formattedMessage, ...args);
+    }
+    /**
+     * 错误日志
+     */
+    error(tag, message, ...args) {
+        if (!this.shouldLog(FXLogLevel.ERROR))
+            return;
+        const formattedMessage = this.formatMessage("error", tag, message);
+        console.error(formattedMessage, ...args);
+    }
+    /**
+     * 分组日志
+     */
+    group(tag, label) {
+        if (!this.shouldLog(FXLogLevel.DEBUG))
+            return;
+        const groupLabel = label ? `[${tag}] ${label}` : `[${tag}] Group`;
+        console.group(groupLabel);
+    }
+    /**
+     * 结束分组日志
+     */
+    groupEnd() {
+        if (!this.shouldLog(FXLogLevel.DEBUG))
+            return;
+        console.groupEnd();
+    }
+    /**
+     * 表格日志
+     */
+    table(tag, data) {
+        if (!this.shouldLog(FXLogLevel.DEBUG))
+            return;
+        console.log(`[${tag}] Table data:`);
+        console.table(data);
+    }
+    /**
+     * 追踪日志
+     */
+    trace(tag, message) {
+        if (!this.shouldLog(FXLogLevel.DEBUG))
+            return;
+        console.trace(`[${tag}] ${message}`);
+    }
+}
+exports.FXLogger = FXLogger;
+// 创建全局实例
+const logger = FXLogger.getInstance();
+// 导出默认实例
+exports.default = logger;