@bit-sun/business-component 4.0.13-alpha.9 → 4.2.0-aiwei-alpha.1

package/src/utils/RequestCacheManager.ts

@@ -0,0 +1,213 @@
+/**
+ * 请求缓存管理器
+ * 用于业务组件库接口请求的缓存机制
+ * 规则：1秒内相同请求直接返回缓存数据并更新起止时间
+ */
+
+interface CacheItem {
+  data: any;
+  timestamp: number;
+  startTime: number;
+  endTime: number;
+  requestKey: string;
+}
+
+interface CacheConfig {
+  ttl: number; // 缓存有效期（毫秒）
+  maxSize: number; // 最大缓存数量
+}
+
+class RequestCacheManager {
+  private cache: Map<string, CacheItem>;
+  private config: CacheConfig;
+  private static instance: RequestCacheManager;
+  // 新增：进行中请求追踪
+  private pendingMap: Map<string, Promise<any>>;
+
+  private constructor(config: CacheConfig = { ttl: 1000, maxSize: 100 }) {
+    this.cache = new Map();
+    this.config = config;
+    this.pendingMap = new Map();
+  }
+
+  /**
+   * 获取单例实例
+   */
+  public static getInstance(config?: CacheConfig): RequestCacheManager {
+    if (!RequestCacheManager.instance) {
+      RequestCacheManager.instance = new RequestCacheManager(config);
+    }
+    return RequestCacheManager.instance;
+  }
+
+  /**
+   * 生成请求的唯一标识符
+   */
+  private generateRequestKey(url: string, params?: any, method: string = 'GET'): string {
+    const sortedParams = this.sortParams(params);
+    return `${method.toUpperCase()}_${url}_${JSON.stringify(sortedParams)}`;
+  }
+
+  /**
+   * 对参数进行排序，确保相同参数不同顺序的请求被视为相同
+   */
+  private sortParams(params: any): any {
+    if (!params || typeof params !== 'object') {
+      return params;
+    }
+
+    if (Array.isArray(params)) {
+      return params.map(item => this.sortParams(item));
+    }
+
+    const sortedKeys = Object.keys(params).sort();
+    const sortedParams: any = {};
+    sortedKeys.forEach(key => {
+      sortedParams[key] = this.sortParams(params[key]);
+    });
+    return sortedParams;
+  }
+
+  /**
+   * 检查缓存是否有效
+   */
+  private isCacheValid(cacheItem: CacheItem): boolean {
+    const now = Date.now();
+    return now - cacheItem.timestamp < this.config.ttl;
+  }
+
+  /**
+   * 清理过期缓存
+   */
+  private cleanExpiredCache(): void {
+    const now = Date.now();
+    for (const [key, item] of this.cache.entries()) {
+      if (now - item.timestamp >= this.config.ttl) {
+        this.cache.delete(key);
+      }
+    }
+  }
+
+  /**
+   * 清理最旧的缓存
+   */
+  private cleanOldestCache(): void {
+    if (this.cache.size >= this.config.maxSize) {
+      let oldestKey = '';
+      let oldestTime = Infinity;
+      
+      for (const [key, item] of this.cache.entries()) {
+        if (item.timestamp < oldestTime) {
+          oldestTime = item.timestamp;
+          oldestKey = key;
+        }
+      }
+      
+      if (oldestKey) {
+        this.cache.delete(oldestKey);
+      }
+    }
+  }
+
+  /**
+   * 获取缓存数据
+   */
+  public getCache(url: string, params?: any, method?: string): CacheItem | null {
+    const requestKey = this.generateRequestKey(url, params, method);
+    const cacheItem = this.cache.get(requestKey);
+
+    if (cacheItem && this.isCacheValid(cacheItem)) {
+      // 更新起止时间
+      const now = Date.now();
+      cacheItem.startTime = now;
+      cacheItem.endTime = now;
+      cacheItem.timestamp = now;
+      
+      return { ...cacheItem };
+    }
+
+    return null;
+  }
+
+  /**
+   * 设置缓存数据
+   */
+  public setCache(url: string, params: any, method: string, data: any, startTime: number, endTime: number): void {
+    const requestKey = this.generateRequestKey(url, params, method);
+    
+    // 清理过期缓存
+    this.cleanExpiredCache();
+    
+    // 清理最旧的缓存
+    this.cleanOldestCache();
+
+    const cacheItem: CacheItem = {
+      data,
+      timestamp: Date.now(),
+      startTime,
+      endTime,
+      requestKey
+    };
+
+    this.cache.set(requestKey, cacheItem);
+  }
+
+  /**
+   * 新增：获取进行中请求
+   */
+  public getPending(url: string, params?: any, method?: string): Promise<any> | undefined {
+    const requestKey = this.generateRequestKey(url, params, method);
+    return this.pendingMap.get(requestKey);
+  }
+
+  /**
+   * 新增：设置进行中请求
+   */
+  public setPending(url: string, params: any, method: string, promise: Promise<any>): void {
+    const requestKey = this.generateRequestKey(url, params, method);
+    this.pendingMap.set(requestKey, promise);
+  }
+
+  /**
+   * 新增：清理进行中请求
+   */
+  public clearPending(url: string, params?: any, method?: string): void {
+    const requestKey = this.generateRequestKey(url, params, method);
+    this.pendingMap.delete(requestKey);
+  }
+
+  /**
+   * 清除指定缓存
+   */
+  public clearCache(url?: string, params?: any, method?: string): void {
+    if (url) {
+      const requestKey = this.generateRequestKey(url, params, method);
+      this.cache.delete(requestKey);
+      this.pendingMap.delete(requestKey);
+    } else {
+      // 清除所有缓存
+      this.cache.clear();
+      this.pendingMap.clear();
+    }
+  }
+
+  /**
+   * 获取缓存统计信息
+   */
+  public getCacheStats(): {
+    size: number;
+    maxSize: number;
+    ttl: number;
+    pendingSize: number;
+  } {
+    return {
+      size: this.cache.size,
+      maxSize: this.config.maxSize,
+      ttl: this.config.ttl,
+      pendingSize: this.pendingMap.size,
+    };
+  }
+}
+
+export default RequestCacheManager;
+export { RequestCacheManager };

package/src/utils/RequestCache_Examples.md

@@ -0,0 +1,137 @@
+# 接口缓存系统使用示例
+
+## 示例1: 基础替换使用
+
+### 原始代码
+```typescript
+import request from "umi-request";
+
+// 在组件中使用
+const loadData = async () => {
+  const response = await request.get('/api/users', {
+    params: { page: 1, size: 10 }
+  });
+  return response.data;
+};
+```
+
+### 使用缓存后的代码
+```typescript
+import request from '@/utils/cachedRequest';
+
+// 在组件中使用 - 完全相同的API
+const loadData = async () => {
+  const response = await request.get('/api/users', {
+    params: { page: 1, size: 10 }
+  });
+  return response.data;
+};
+```
+
+## 示例2: SearchSelect组件集成
+
+### 原始代码
+```typescript
+// src/components/Functional/SearchSelect/index.tsx
+import request from "umi-request";
+
+const getData = async (params) => {
+  let getRequest;
+  const methodName = method?.toLocaleLowerCase?.();
+  
+  if(['post','patch','put'].includes(methodName)) {
+    getRequest = request[methodName](`${url}${convertUrlQueryParams(queryParams)}`,convertBodyParams(queryParams), { headers: { ...extralHeaders }})
+  } else {
+    getRequest = request.get( `${url}${convertUrlQueryParams(queryParams)}`,{headers: { ...extralHeaders }})
+  }
+
+  return getRequest.then((result: any) => {
+    setFetching(false)
+    result = result.data;
+    if (judgeIsRequestError(result)) {
+      message.error(result.msg);
+      return;
+    }
+    const res = result.data;
+    // 处理数据...
+  });
+};
+```
+
+### 使用缓存后的代码
+```typescript
+// src/components/Functional/SearchSelect/index.tsx
+import request from '@/utils/cachedRequest';
+
+const getData = async (params) => {
+  let getRequest;
+  const methodName = method?.toLocaleLowerCase?.();
+  
+  if(['post','patch','put'].includes(methodName)) {
+    getRequest = request[methodName](`${url}${convertUrlQueryParams(queryParams)}`,convertBodyParams(queryParams), { headers: { ...extralHeaders }})
+  } else {
+    getRequest = request.get( `${url}${convertUrlQueryParams(queryParams)}`,{headers: { ...extralHeaders }})
+  }
+
+  return getRequest.then((result: any) => {
+    setFetching(false)
+    result = result.data;
+    if (judgeIsRequestError(result)) {
+      message.error(result.msg);
+      return;
+    }
+    const res = result.data;
+    // 处理数据...
+  });
+};
+```
+
+## 示例3: 业务工具函数集成
+
+### 原始代码
+```typescript
+// src/components/Business/SearchSelect/BusinessUtils.tsx
+import { request } from 'bssula';
+
+export const loadSelectSource = (url: string, params?: any, headers?: any) => {
+  return request(url, {
+    method: 'GET',
+    params,
+    headers
+  }).then(response => {
+    if (handleError(response)) {
+      return response.data;
+    }
+    return [];
+  });
+};
+```
+
+### 使用缓存后的代码
+```typescript
+// src/components/Business/SearchSelect/BusinessUtils.tsx
+import request from '@/utils/cachedRequest';
+
+export const loadSelectSource = (url: string, params?: any, headers?: any) => {
+  return request.get(url, {
+    params,
+    headers
+  }).then(response => {
+    if (handleError(response)) {
+      return response.data;
+    }
+    return [];
+  });
+};
+```
+
+## 示例4: 缓存管理
+
+### 清除特定缓存
+```typescript
+import { clearRequestCache } from '@/utils/cachedRequest';
+
+// 在数据变更操作后清除相关缓存
+const handleDataChange = async () => {
+  // 执行数据变更操作
+  await updateUserData(newData

package/src/utils/RequestCache_README.md

@@ -0,0 +1,170 @@
+# 业务组件库接口缓存系统
+
+## 概述
+
+本缓存系统为业务组件库的接口请求提供智能缓存机制，主要解决以下问题：
+- 减少重复请求，提升性能
+- 1秒内相同请求直接返回缓存数据
+- 自动更新请求起止时间
+- 不影响现有业务逻辑
+
+## 核心特性
+
+### 1. 智能缓存策略
+- **缓存时间**: 1秒（可配置）
+- **缓存容量**: 最大100个请求（可配置）
+- **缓存键**: 基于URL、参数、请求方法生成
+- **参数排序**: 自动排序参数，确保相同参数不同顺序的请求被视为相同
+
+### 2. 自动时间更新
+- 命中缓存时自动更新起止时间为当前时间
+- 保持与真实请求相同的时间格式
+
+### 3. 零侵入集成
+- 完全兼容现有请求代码
+- 支持umi-request的所有功能
+- 提供清晰的缓存统计信息
+
+## 使用方法
+
+### 1. 基础使用
+
+```typescript
+// 替换原有的request导入
+import request from '@/utils/cachedRequest';
+
+// 使用方式与原来完全一致
+const response = await request.get('/api/data', { params: { id: 1 } });
+const response2 = await request.post('/api/data', { data: { name: 'test' } });
+```
+
+### 2. 高级使用
+
+```typescript
+import { 
+  cachedRequest, 
+  cachedGet, 
+  cachedPost,
+  clearRequestCache,
+  getCacheStats 
+} from '@/utils/cachedRequest';
+
+// 清除特定缓存
+clearRequestCache('/api/data', { id: 1 }, 'GET');
+
+// 清除所有缓存
+clearRequestCache();
+
+// 获取缓存统计信息
+const stats = getCacheStats();
+console.log(`缓存数量: ${stats.size}/${stats.maxSize}`);
+```
+
+### 3. 自定义缓存配置
+
+```typescript
+import RequestCacheManager from '@/utils/RequestCacheManager';
+
+// 创建自定义缓存管理器
+const customCache = RequestCacheManager.getInstance({
+  ttl: 2000,      // 2秒缓存时间
+  maxSize: 200    // 最大200个缓存
+});
+```
+
+## 缓存机制详解
+
+### 缓存键生成
+```
+缓存键 = METHOD_URL_排序后的参数JSON
+```
+
+例如：
+```typescript
+// 以下两个请求会被视为相同，生成相同的缓存键
+request.get('/api/users', { params: { page: 1, size: 10 } })
+request.get('/api/users', { params: { size: 10, page: 1 } })
+```
+
+### 缓存生命周期
+1. **请求发起**: 检查是否存在有效缓存
+2. **缓存命中**: 直接返回缓存数据，更新时间戳
+3. **缓存未命中**: 发送真实请求，缓存响应数据
+4. **缓存过期**: 自动清理过期缓存（超过1秒）
+5. **容量控制**: 超出最大容量时清理最旧的缓存
+
+### 时间更新机制
+当缓存命中时，系统会自动：
+- 更新`startTime`为当前时间
+- 更新`endTime`为当前时间  
+- 更新`timestamp`为当前时间
+
+## 性能优化
+
+### 1. 减少网络请求
+- 1秒内相同请求复用缓存数据
+- 特别适用于频繁请求的场景（如搜索、筛选）
+
+### 2. 内存管理
+- 自动清理过期缓存
+- LRU算法清理最旧缓存
+- 可配置最大缓存数量
+
+### 3. 调试支持
+- 控制台日志显示缓存命中/未命中
+- 缓存统计信息实时监控
+- 详细的请求时间记录
+
+## 注意事项
+
+### 1. 缓存适用场景
+✅ **适合缓存**:
+- 查询类接口（GET请求）
+- 数据变化频率低的接口
+- 参数相同的重复请求
+
+❌ **不适合缓存**:
+- 修改类接口（POST/PUT/DELETE）
+- 实时性要求高的接口
+- 用户特定数据的接口
+
+### 2. 缓存配置建议
+- **开发环境**: 可设置较长缓存时间便于调试
+- **生产环境**: 建议保持1秒默认配置
+- **高频请求**: 可适当增加最大缓存数量
+
+### 3. 缓存清除时机
+- 用户主动刷新页面时
+- 数据变更操作后
+- 特定业务场景需要时
+
+## 监控与调试
+
+### 控制台日志
+```
+[RequestCache] 命中缓存: /api/users {原始起止时间: 1234567890123 - 1234567890123, 更新时间: 1234567890123}
+[RequestCache] 缓存请求: /api/users {起止时间: 1234567890123 - 1234567890123, 耗时: 45}
+[RequestCache] 清除缓存: /api/users
+[RequestCache] 缓存统计: {size: 5, maxSize: 100, ttl: 1000}
+```
+
+### 性能指标
+- **缓存命中率**: 命中缓存的请求数 / 总请求数
+- **平均响应时间**: 缓存命中时的响应时间（接近0ms）
+- **缓存数量**: 当前缓存的请求数量
+- **内存使用**: 缓存数据占用的内存大小
+
+## 错误处理
+
+缓存系统不会影响原有的错误处理机制：
+- 请求失败时不会缓存错误响应
+- 缓存系统异常不会影响真实请求
+- 保持原有的错误提示和重试机制
+
+## 扩展性
+
+缓存系统设计考虑了未来的扩展需求：
+- 支持自定义缓存策略
+- 可扩展的缓存存储后端
+- 灵活的配置选项
+- 插件化的架构设计

package/src/utils/TableUtils.less

@@ -48,5 +48,5 @@
 }
 
 .card_department {
-  color: #005cff !important;
+  color: #005CFF !important;
 }