@alicloud/appflow-chat 0.0.4-beta.2 → 0.0.4-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/appflow-chat",
-  "version": "0.0.4-beta.2",
+  "version": "0.0.4-beta.4",
   "description": "Appflow-Chat AI聊天机器人组件库，提供聊天服务和UI组件",
   "type": "module",
   "main": "./dist/appflow-chat.cjs.js",

package/src/components/HumanVerify/CustomParamsRenderer/TimeField.tsx

@@ -1,40 +1,72 @@
-import React, { useCallback, useMemo, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { DatePicker, version } from 'antd';
 import { TimeFieldProps, TimeSubType } from './types';
 import styled from 'styled-components';
 
-// ==================== Styled Components ====================
-
-// 时间选择器容器
 const TimeFieldContainer = styled.div`
   width: 100%;
-
   .ant-picker {
     width: 100%;
   }
 `;
 
-// ==================== 版本检测 ====================
-
-/**
- * 检测 antd 版本是否为 5.x 或更高
- * antd 5.x 使用 dayjs，antd 4.x 使用 moment
- */
 const getAntdMajorVersion = (): number => {
   try {
     return parseInt(version.split('.')[0], 10);
   } catch {
-    return 5; // 默认假设为 5.x
+    return 5;
   }
 };
 
 const isAntd5OrAbove = getAntdMajorVersion() >= 5;
 
-// ==================== 工具函数 ====================
+// 兼容 ESM 和 CJS 环境的时间库加载
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let timeLib: any = null;
+
+// 同步尝试加载时间库（CJS 环境下可用）
+const loadTimeLibSync = (): any => {
+  if (timeLib) return timeLib;
+
+  if (isAntd5OrAbove) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      timeLib = require('dayjs');
+    } catch {
+      // require 在 ESM 环境中可能失败，后续通过异步 import 兜底
+    }
+  } else {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      timeLib = require('moment');
+    } catch {
+      // require 在 ESM 环境中可能失败，后续通过异步 import 兜底
+    }
+  }
+  return timeLib;
+};
+
+// 异步加载时间库（ESM 环境下的兜底方案）
+const loadTimeLibAsync = async (): Promise<any> => {
+  if (timeLib) return timeLib;
+
+  try {
+    if (isAntd5OrAbove) {
+      const dayjs = await import('dayjs');
+      timeLib = dayjs.default || dayjs;
+    } else {
+      const moment = await import('moment');
+      timeLib = moment.default || moment;
+    }
+  } catch {
+    console.warn('Failed to load time library (both sync and async)');
+  }
+  return timeLib;
+};
+
+// 先尝试同步加载
+loadTimeLibSync();
 
-/**
- * 根据时间子类型获取日期格式
- */
 const getDateFormat = (subType?: TimeSubType): string => {
   switch (subType) {
     case 'year-month':
@@ -48,76 +80,40 @@ const getDateFormat = (subType?: TimeSubType): string => {
   }
 };
 
-/**
- * 根据时间子类型获取 picker 类型
- */
 const getPickerType = (subType?: TimeSubType): 'date' | 'month' | undefined => {
   switch (subType) {
     case 'year-month':
       return 'month';
-    case 'year-month-day':
-    case 'datetime':
     default:
       return 'date';
   }
 };
 
-// ==================== 时间库加载器 ====================
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type TimeLibrary = any;
-
-/**
- * 异步加载时间库
- * antd 5.x 使用 dayjs，antd 4.x 使用 moment
- */
-const loadTimeLibrary = async (): Promise<TimeLibrary | null> => {
-  if (isAntd5OrAbove) {
-    try {
-      const dayjs = await import('dayjs');
-      return dayjs.default || dayjs;
-    } catch {
-      console.warn('dayjs not found, TimeField may not work correctly with antd 5.x');
-      return null;
-    }
-  } else {
-    try {
-      const moment = await import('moment');
-      return moment.default || moment;
-    } catch {
-      console.warn('moment not found, TimeField may not work correctly with antd 4.x');
-      return null;
-    }
-  }
-};
-
-/**
- * 时间字段组件
- * 根据 SubType 渲染不同的时间选择器
- * 优先从 AssociationPropertyMetadata.SubType 读取，兼容旧的 TimeSubType 字段
- * 
- * 兼容性说明：
- * - antd 5.x: 使用 dayjs
- * - antd 4.x: 使用 moment
- */
 export const TimeField: React.FC<TimeFieldProps> = ({
   schema,
   value,
   onChange,
   disabled = false,
 }) => {
-  // 时间库状态
-  const [timeLib, setTimeLib] = useState<TimeLibrary | null>(null);
+  // 使用 state 管理时间库引用，确保异步加载完成后能触发重新渲染
+  const [lib, setLib] = useState<any>(() => timeLib);
 
-  // 异步加载时间库
+  // 如果同步加载失败，通过异步 import 兜底加载
   useEffect(() => {
-    loadTimeLibrary().then(lib => {
-      setTimeLib(lib);
+    if (lib) return;
+
+    let cancelled = false;
+    loadTimeLibAsync().then((loaded) => {
+      if (!cancelled && loaded) {
+        setLib(loaded);
+      }
     });
-  }, []);
 
-  // 优先从 AssociationPropertyMetadata.SubType 读取，取数组第一个元素
-  // 兼容旧的 TimeSubType 字段
+    return () => {
+      cancelled = true;
+    };
+  }, [lib]);
+
   const subType = useMemo((): TimeSubType | undefined => {
     const subTypeArray = schema.AssociationPropertyMetadata?.SubType;
     if (Array.isArray(subTypeArray) && subTypeArray.length > 0) {
@@ -132,27 +128,22 @@ export const TimeField: React.FC<TimeFieldProps> = ({
 
   // 将字符串值转换为时间对象
   const dateValue = useMemo(() => {
-    if (!value || !timeLib) return null;
+    if (!value || !lib) return null;
     
     try {
-      const parsed = timeLib(value, format);
-      // 检查解析是否有效
+      const parsed = lib(value, format);
       if (parsed && typeof parsed.isValid === 'function' && !parsed.isValid()) {
-        return null;
+        // 如果严格解析失败，尝试宽松解析
+        return lib(value);
       }
       return parsed;
     } catch {
       return null;
     }
-  }, [value, format, timeLib]);
+  }, [value, format, lib]);
 
-  // 处理值变化
-  // antd DatePicker onChange 签名: (date: Moment | Dayjs | null, dateString: string) => void
   const handleChange = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (_date: any, dateString: string | string[]) => {
-      // 直接使用 antd 提供的 dateString，这是已经格式化好的字符串
-      // 这样可以避免手动调用 format 方法，更加可靠
       const stringValue = Array.isArray(dateString) ? dateString[0] : dateString;
       onChange?.(stringValue || null);
     },
@@ -169,10 +160,10 @@ export const TimeField: React.FC<TimeFieldProps> = ({
         showTime={showTime ? { format: 'HH:mm:ss' } : false}
         disabled={disabled}
         style={{ width: '100%' }}
-        placeholder={`请选择`}
+        placeholder="请选择"
       />
     </TimeFieldContainer>
   );
 };
 
-export default TimeField;
+export default TimeField;