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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/appflow-chat",
-  "version": "0.0.3",
+  "version": "0.0.4-beta.1",
   "description": "Appflow-Chat AI聊天机器人组件库，提供聊天服务和UI组件",
   "type": "module",
   "main": "./dist/appflow-chat.cjs.js",
@@ -58,9 +58,19 @@
     "vite-plugin-dts": "^4.3.0"
   },
   "peerDependencies": {
-    "antd": "^5.0.0",
+    "antd": "^4.0.0 || ^5.0.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "dayjs": "^1.11.0",
+    "moment": "^2.29.0"
+  },
+  "peerDependenciesMeta": {
+    "dayjs": {
+      "optional": true
+    },
+    "moment": {
+      "optional": true
+    }
   },
   "files": [
     "dist",

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

@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { DatePicker } from 'antd';
-import dayjs, { Dayjs } from 'dayjs';
+import { DatePicker, version } from 'antd';
 import { TimeFieldProps, TimeSubType } from './types';
 import styled from 'styled-components';
 
@@ -15,6 +14,50 @@ const TimeFieldContainer = styled.div`
   }
 `;
 
+// ==================== 版本检测 ====================
+
+/**
+ * 检测 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
+  }
+};
+
+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;
+
+if (isAntd5OrAbove) {
+  // antd 5.x 使用 dayjs
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    dayjs = require('dayjs');
+  } catch {
+    console.warn('dayjs not found, TimeField may not work correctly with antd 5.x');
+  }
+} else {
+  // antd 4.x 使用 moment
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    moment = require('moment');
+  } catch {
+    console.warn('moment not found, TimeField may not work correctly with antd 4.x');
+  }
+}
+
+// ==================== 工具函数 ====================
+
 /**
  * 根据时间子类型获取日期格式
  */
@@ -45,10 +88,45 @@ const getPickerType = (subType?: TimeSubType): 'date' | 'month' | undefined => {
   }
 };
 
+/**
+ * 将字符串值转换为时间对象（根据 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,
@@ -72,23 +150,21 @@ export const TimeField: React.FC<TimeFieldProps> = ({
 
   // 处理值变化
   const handleChange = useCallback(
-    (date: Dayjs | null) => {
-      if (date) {
-        onChange?.(date.format(format));
-      } else {
-        onChange?.(null);
-      }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (date: any) => {
+      const formattedValue = formatValue(date, format);
+      onChange?.(formattedValue);
     },
     [onChange, format]
   );
 
-  // 将字符串值转换为 dayjs 对象
-  const dayjsValue = value ? dayjs(value, format) : null;
+  // 将字符串值转换为时间对象
+  const dateValue = parseValue(value, format);
 
   return (
     <TimeFieldContainer>
       <DatePicker
-        value={dayjsValue}
+        value={dateValue}
         onChange={handleChange}
         format={format}
         picker={picker}

package/src/markdown/index.tsx

@@ -53,9 +53,28 @@ export const MarkdownView: React.FC<MarkdownViewProps> = ({
           />
         );
       },
-      code: ({ node, className, ...props }: any) => {
+      code: ({ node, inline, className, ...props }: any) => {
+        // 判断是否为行内代码
+        // 行内代码没有 className，且 inline 为 true
+        const isInline = inline || (!className && !node?.properties?.className);
+        
+        if (isInline) {
+          // 行内代码 - 使用简单的 <code> 标签样式
+          return (
+            <code style={{
+              backgroundColor: 'rgba(175, 184, 193, 0.2)',
+              padding: '0.2em 0.4em',
+              borderRadius: '3px',
+              fontSize: '85%',
+              fontFamily: 'Consolas, Monaco, "Andale Mono", monospace',
+            }}>
+              {props.children}
+            </code>
+          );
+        }
+
         // 元信息中解析语言类型
-        const languageType = /language-(\w+)/.exec(node?.properties?.className || '')?.[0];
+        const languageType = /language-(\w+)/.exec(node?.properties?.className || className || '')?.[0];
         const langFromMeta = node?.position?.start?.line === 2 ? 'language-file' : null;
         const finalLang = languageType || langFromMeta;