@alicloud/appflow-chat 0.0.4-beta.1 → 0.0.4-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/appflow-chat",
-  "version": "0.0.4-beta.1",
+  "version": "0.0.4-beta.3",
   "description": "Appflow-Chat AI聊天机器人组件库，提供聊天服务和UI组件",
   "type": "module",
   "main": "./dist/appflow-chat.cjs.js",
@@ -48,10 +48,12 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "antd": "^5.24.8",
+    "dayjs": "^1.11.0",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "less": "^4.2.0",
+    "moment": "^2.29.0",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10",

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

@@ -3,64 +3,43 @@ 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;
 
-// ==================== 动态导入时间库 ====================
-
-// 根据 antd 版本动态选择时间库
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let dayjs: any = null;
+// 同步加载时间库
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-let moment: any = null;
+let timeLib: any = null;
 
 if (isAntd5OrAbove) {
-  // antd 5.x 使用 dayjs
   try {
     // eslint-disable-next-line @typescript-eslint/no-require-imports
-    dayjs = require('dayjs');
+    timeLib = require('dayjs');
   } catch {
-    console.warn('dayjs not found, TimeField may not work correctly with antd 5.x');
+    console.warn('dayjs not found');
   }
 } else {
-  // antd 4.x 使用 moment
   try {
     // eslint-disable-next-line @typescript-eslint/no-require-imports
-    moment = require('moment');
+    timeLib = require('moment');
   } catch {
-    console.warn('moment not found, TimeField may not work correctly with antd 4.x');
+    console.warn('moment not found');
   }
 }
 
-// ==================== 工具函数 ====================
-
-/**
- * 根据时间子类型获取日期格式
- */
 const getDateFormat = (subType?: TimeSubType): string => {
   switch (subType) {
     case 'year-month':
@@ -74,68 +53,21 @@ 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';
   }
 };
 
-/**
- * 将字符串值转换为时间对象（根据 antd 版本使用 dayjs 或 moment）
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const parseValue = (value: string | null | undefined, format: string): any => {
-  if (!value) return null;
-  
-  if (isAntd5OrAbove && dayjs) {
-    return dayjs(value, format);
-  } else if (moment) {
-    return moment(value, format);
-  }
-  
-  return null;
-};
-
-/**
- * 将时间对象格式化为字符串
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const formatValue = (date: any, format: string): string | null => {
-  if (!date) return null;
-  
-  // dayjs 和 moment 都有 format 方法
-  if (typeof date.format === 'function') {
-    return date.format(format);
-  }
-  
-  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,
 }) => {
-  // 优先从 AssociationPropertyMetadata.SubType 读取，取数组第一个元素
-  // 兼容旧的 TimeSubType 字段
   const subType = useMemo((): TimeSubType | undefined => {
     const subTypeArray = schema.AssociationPropertyMetadata?.SubType;
     if (Array.isArray(subTypeArray) && subTypeArray.length > 0) {
@@ -148,19 +80,30 @@ export const TimeField: React.FC<TimeFieldProps> = ({
   const picker = getPickerType(subType);
   const showTime = subType === 'datetime';
 
-  // 处理值变化
+  // 将字符串值转换为时间对象 - 同步方式
+  const dateValue = useMemo(() => {
+    if (!value || !timeLib) return null;
+    
+    try {
+      const parsed = timeLib(value, format);
+      if (parsed && typeof parsed.isValid === 'function' && !parsed.isValid()) {
+        // 如果严格解析失败，尝试宽松解析
+        return timeLib(value);
+      }
+      return parsed;
+    } catch {
+      return null;
+    }
+  }, [value, format]);
+
   const handleChange = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (date: any) => {
-      const formattedValue = formatValue(date, format);
-      onChange?.(formattedValue);
+    (_date: any, dateString: string | string[]) => {
+      const stringValue = Array.isArray(dateString) ? dateString[0] : dateString;
+      onChange?.(stringValue || null);
     },
-    [onChange, format]
+    [onChange]
   );
 
-  // 将字符串值转换为时间对象
-  const dateValue = parseValue(value, format);
-
   return (
     <TimeFieldContainer>
       <DatePicker
@@ -171,10 +114,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;