@alicloud/appflow-chat 0.0.1-beta.1

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

@@ -0,0 +1,202 @@
+import React, { useCallback, useContext } from 'react';
+import { Input, InputNumber, Switch, ConfigProvider } from 'antd';
+import styled from 'styled-components';
+import { FieldRendererProps } from './types';
+import { ArrayField } from './ArrayField';
+import { ObjectField } from './ObjectField';
+
+// ==================== Styled Components ====================
+
+const FieldItem = styled.div`
+  margin-bottom: 16px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const FieldLabel = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  font-size: 14px;
+  color: #1f2329;
+`;
+
+const Required = styled.span`
+  color: #f54a45;
+  margin-right: 4px;
+`;
+
+const LabelText = styled.span`
+  font-weight: 500;
+`;
+
+const FieldDescription = styled.div`
+  font-size: 12px;
+  color: #8f959e;
+  margin-top: 4px;
+  word-break: break-word;
+`;
+
+const FieldError = styled.div`
+  font-size: 12px;
+  color: #f54a45;
+  margin-top: 4px;
+`;
+
+/**
+ * InputWrapper 组件
+ * 支持动态 prefixCls，自动继承用户项目的 ConfigProvider 配置
+ */
+const InputWrapper = styled.div<{ $prefixCls: string }>`
+  .${props => props.$prefixCls}-input,
+  .${props => props.$prefixCls}-input-number,
+  .${props => props.$prefixCls}-select {
+    width: 100%;
+  }
+
+  .${props => props.$prefixCls}-input-number {
+    width: 100%;
+  }
+`;
+
+/**
+ * 单个字段渲染器
+ * 根据字段类型渲染对应的输入组件
+ */
+export const FieldRenderer: React.FC<FieldRendererProps> = ({
+  name,
+  schema,
+  value,
+  onChange,
+  required = false,
+  disabled = false,
+  level = 0,
+  errors = {},
+  fieldPath = '',
+}) => {
+  const { Type, Title, Description } = schema;
+  const displayTitle = Title || name;
+  
+  // 获取 Ant Design 的 prefixCls 配置，自动继承用户项目的 ConfigProvider 设置
+  // 使用 ConfigProvider.ConfigContext 获取完整配置
+  const configContext = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = configContext.getPrefixCls?.() || 'ant';
+  
+  // 计算当前字段的完整路径
+  const currentPath = fieldPath ? `${fieldPath}.${name}` : name;
+  // 获取当前字段的错误信息
+  const errorMessage = errors[currentPath];
+
+  // 处理值变化
+  const handleChange = useCallback(
+    (newValue: any) => {
+      onChange?.(newValue);
+    },
+    [onChange]
+  );
+
+  // 渲染基础类型输入框
+  const renderInput = () => {
+    switch (Type) {
+      case 'string':
+        return (
+          <InputWrapper $prefixCls={prefixCls}>
+            <Input
+              value={value}
+              onChange={(e) => handleChange(e.target.value)}
+              disabled={disabled}
+            />
+          </InputWrapper>
+        );
+
+      case 'number':
+        return (
+          <InputWrapper $prefixCls={prefixCls}>
+            <InputNumber
+              value={value}
+              onChange={handleChange}
+              disabled={disabled}
+              style={{ width: '100%' }}
+            />
+          </InputWrapper>
+        );
+
+      case 'boolean':
+        return (
+          <Switch
+            style={{borderRadius: 16}}
+            checked={value}
+            onChange={handleChange}
+            disabled={disabled}
+          />
+        );
+
+      case 'array':
+        return (
+          <ArrayField
+            name={name}
+            schema={schema}
+            value={value}
+            onChange={handleChange}
+            required={required}
+            disabled={disabled}
+            level={level}
+            errors={errors}
+            fieldPath={fieldPath}
+          />
+        );
+
+      case 'object':
+        return (
+          <ObjectField
+            name={name}
+            schema={schema}
+            value={value}
+            onChange={handleChange}
+            required={required}
+            disabled={disabled}
+            level={level}
+            errors={errors}
+            fieldPath={fieldPath}
+          />
+        );
+
+      default:
+        return (
+          <InputWrapper $prefixCls={prefixCls}>
+            <Input
+              value={value}
+              onChange={(e) => handleChange(e.target.value)}
+              disabled={disabled}
+            />
+          </InputWrapper>
+        );
+    }
+  };
+
+  // 对于 object 和 array 类型，直接渲染，不需要外层包装
+  if (Type === 'object' || Type === 'array') {
+    return renderInput();
+  }
+
+  // 基础类型渲染带标签的表单项
+  return (
+    <FieldItem>
+      <FieldLabel>
+        {required && <Required>*</Required>}
+        <LabelText>{displayTitle}</LabelText>
+      </FieldLabel>
+      {renderInput()}
+      {errorMessage && (
+        <FieldError>{errorMessage}</FieldError>
+      )}
+      {Description && !errorMessage && (
+        <FieldDescription>{Description}</FieldDescription>
+      )}
+    </FieldItem>
+  );
+};
+
+export default FieldRenderer;

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

@@ -0,0 +1,126 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import { ObjectFieldProps } from './types';
+
+// 前向声明，避免循环依赖
+const FieldRenderer = React.lazy(() => import('./FieldRenderer'));
+
+// ==================== Styled Components ====================
+
+const ObjectFieldContainer = styled.div`
+  border: 1px solid #dbdbdb;
+  border-radius: 10px;
+  padding: 24px 16px;
+  position: relative;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  background-color: #fff;
+`;
+
+const ObjectTitle = styled.div`
+  position: absolute;
+  top: -12px;
+  left: 15px;
+  background: #fff;
+  padding: 2px 10px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  max-width: calc(100% - 30px);
+  font-size: 14px;
+  font-weight: 500;
+  color: #1f2329;
+`;
+
+const Required = styled.span`
+  display: inline-block;
+  margin-right: 4px;
+  color: #E00000;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+`;
+
+const ObjectDescription = styled.div`
+  font-size: 12px;
+  color: #8f959e;
+  margin-bottom: 12px;
+  word-break: break-word;
+`;
+
+const ObjectContent = styled.div`
+  /* 对象内容区域 */
+`;
+
+/**
+ * 对象类型字段渲染器
+ */
+export const ObjectField: React.FC<ObjectFieldProps> = ({
+  name,
+  schema,
+  value = {},
+  onChange,
+  required = false,
+  disabled = false,
+  level = 0,
+  errors = {},
+  fieldPath = '',
+}) => {
+  const { Title, Description, Properties, Required: RequiredFields = [] } = schema;
+  const displayTitle = Title || name;
+  
+  // 计算当前对象的完整路径
+  const currentPath = fieldPath ? `${fieldPath}.${name}` : name;
+
+  // 更新对象属性
+  const handlePropertyChange = useCallback(
+    (propertyName: string, propertyValue: any) => {
+      onChange?.({
+        ...value,
+        [propertyName]: propertyValue,
+      });
+    },
+    [value, onChange]
+  );
+
+  if (!Properties) {
+    return null;
+  }
+
+  return (
+    <ObjectFieldContainer>
+      <ObjectTitle>
+        {required && <Required>*</Required>}
+        <span>{displayTitle}</span>
+      </ObjectTitle>
+
+      {Description && (
+        <ObjectDescription>{Description}</ObjectDescription>
+      )}
+
+      <ObjectContent>
+        {Object.entries(Properties).map(([propertyName, propertySchema]) => {
+          const isRequired = RequiredFields.includes(propertyName);
+          return (
+            <React.Suspense key={propertyName} fallback={<div>加载中...</div>}>
+              <FieldRenderer
+                name={propertyName}
+                schema={propertySchema}
+                value={value[propertyName]}
+                onChange={(newValue) => handlePropertyChange(propertyName, newValue)}
+                required={isRequired}
+                disabled={disabled}
+                level={level + 1}
+                errors={errors}
+                fieldPath={currentPath}
+              />
+            </React.Suspense>
+          );
+        })}
+      </ObjectContent>
+    </ObjectFieldContainer>
+  );
+};
+
+export default ObjectField;

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

@@ -0,0 +1,166 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import { FieldRenderer } from './FieldRenderer';
+import {
+  CustomParamsRendererProps,
+  CustomParamSchema,
+  ValidationResult,
+  validateCustomParams,
+} from './types';
+
+export * from './types';
+export { FieldRenderer } from './FieldRenderer';
+export { ArrayField } from './ArrayField';
+export { ObjectField } from './ObjectField';
+
+// ==================== Styled Components ====================
+
+const CustomParamsRendererContainer = styled.div`
+  width: 100%;
+  padding-bottom: 12px;
+`;
+
+const EmptyState = styled.div`
+  padding: 24px;
+  text-align: center;
+  color: #8f959e;
+  font-size: 12px;
+  background-color: #fafafa;
+  border: 1px dashed #e5e6eb;
+  border-radius: 6px;
+`;
+
+/**
+ * CustomParamsRenderer 组件
+ * 根据 CustomParam Schema 渲染表单
+ *
+ * @example
+ * ```tsx
+ * const schema: CustomParamSchema = {
+ *   Type: 'object',
+ *   Properties: {
+ *     name: { Type: 'string', Title: '名称', Description: '请输入名称' },
+ *     age: { Type: 'number', Title: '年龄' },
+ *     enabled: { Type: 'boolean', Title: '是否启用' },
+ *     tags: {
+ *       Type: 'array',
+ *       Title: '标签',
+ *       Items: { Type: 'string' }
+ *     },
+ *     config: {
+ *       Type: 'object',
+ *       Title: '配置',
+ *       Properties: {
+ *         key: { Type: 'string', Title: '键' },
+ *         value: { Type: 'string', Title: '值' }
+ *       }
+ *     }
+ *   },
+ *   Required: ['name']
+ * };
+ *
+ * <CustomParamsRenderer
+ *   schema={schema}
+ *   value={formValue}
+ *   onChange={setFormValue}
+ * />
+ * ```
+ */
+export const CustomParamsRenderer: React.FC<CustomParamsRendererProps> = ({
+  schema,
+  value = {},
+  onChange,
+  disabled = false,
+  errors = {},
+}) => {
+  const Properties = schema?.Properties;
+  const Required = schema?.Required || [];
+
+  // 处理属性值变化
+  const handlePropertyChange = useCallback(
+    (propertyName: string, propertyValue: any) => {
+      onChange?.({
+        ...value,
+        [propertyName]: propertyValue,
+      });
+    },
+    [value, onChange]
+  );
+
+  // 如果没有 Properties，返回空
+  if (!Properties || Object.keys(Properties).length === 0) {
+    return (
+      <CustomParamsRendererContainer>
+        <EmptyState>暂无参数配置</EmptyState>
+      </CustomParamsRendererContainer>
+    );
+  }
+
+  return (
+    <CustomParamsRendererContainer>
+      {Object.entries(Properties).map(([propertyName, propertySchema]) => {
+        const isRequired = Required.includes(propertyName);
+
+        return (
+          <FieldRenderer
+            key={propertyName}
+            name={propertyName}
+            schema={propertySchema}
+            value={value[propertyName]}
+            onChange={(newValue) => handlePropertyChange(propertyName, newValue)}
+            required={isRequired}
+            disabled={disabled}
+            level={0}
+            errors={errors}
+            fieldPath=""
+          />
+        );
+      })}
+    </CustomParamsRendererContainer>
+  );
+};
+
+/**
+ * 使用 CustomParamsRenderer 的 Hook
+ * 提供表单值管理和校验功能
+ */
+export const useCustomParamsRenderer = (schema: CustomParamSchema) => {
+  const [value, setValue] = React.useState<Record<string, any>>({});
+
+  // 校验表单
+  const validate = useCallback((): ValidationResult => {
+    return validateCustomParams(schema, value);
+  }, [schema, value]);
+
+  // 重置表单
+  const reset = useCallback(() => {
+    setValue({});
+  }, []);
+
+  // 设置单个字段值
+  const setFieldValue = useCallback((fieldName: string, fieldValue: any) => {
+    setValue((prev) => ({
+      ...prev,
+      [fieldName]: fieldValue,
+    }));
+  }, []);
+
+  // 获取单个字段值
+  const getFieldValue = useCallback(
+    (fieldName: string) => {
+      return value[fieldName];
+    },
+    [value]
+  );
+
+  return {
+    value,
+    setValue,
+    validate,
+    reset,
+    setFieldValue,
+    getFieldValue,
+  };
+};
+
+export default CustomParamsRenderer;

package/src/components/HumanVerify/CustomParamsRenderer/types.ts

@@ -0,0 +1,203 @@
+export type ParamType = 'string' | 'number' | 'boolean' | 'array' | 'object';
+
+/**
+ * CustomParam 的 Schema 定义
+ */
+export interface CustomParamSchema {
+  Type: ParamType;
+  Title?: string;
+  Description?: string;
+  Required?: string[];
+  Properties?: Record<string, CustomParamSchema>;
+  Items?: CustomParamSchema;
+}
+
+/**
+ * CustomParamsRenderer 组件的 Props
+ */
+export interface CustomParamsRendererProps {
+  /** CustomParams 的 schema */
+  schema: CustomParamSchema;
+  /** 表单值 */
+  value?: Record<string, any>;
+  /** 值变化回调 */
+  onChange?: (value: Record<string, any>) => void;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 字段名前缀（用于嵌套场景） */
+  namePrefix?: string;
+  /** 验证错误信息 */
+  errors?: Record<string, string>;
+}
+
+/**
+ * 单个字段渲染器的 Props
+ */
+export interface FieldRendererProps {
+  /** 字段名 */
+  name: string;
+  /** 字段 Schema */
+  schema: CustomParamSchema;
+  /** 字段值 */
+  value?: any;
+  /** 值变化回调 */
+  onChange?: (value: any) => void;
+  /** 是否必填 */
+  required?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 嵌套层级 */
+  level?: number;
+  /** 验证错误信息 */
+  errors?: Record<string, string>;
+  /** 字段路径（用于匹配错误信息） */
+  fieldPath?: string;
+}
+
+/**
+ * 数组字段的 Props
+ */
+export interface ArrayFieldProps {
+  /** 字段名 */
+  name: string;
+  /** 字段 Schema */
+  schema: CustomParamSchema;
+  /** 字段值 */
+  value?: any[];
+  /** 值变化回调 */
+  onChange?: (value: any[]) => void;
+  /** 是否必填 */
+  required?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 嵌套层级 */
+  level?: number;
+  /** 验证错误信息 */
+  errors?: Record<string, string>;
+  /** 字段路径（用于匹配错误信息） */
+  fieldPath?: string;
+}
+
+/**
+ * 对象字段的 Props
+ */
+export interface ObjectFieldProps {
+  /** 字段名 */
+  name: string;
+  /** 字段 Schema */
+  schema: CustomParamSchema;
+  /** 字段值 */
+  value?: Record<string, any>;
+  /** 值变化回调 */
+  onChange?: (value: Record<string, any>) => void;
+  /** 是否必填 */
+  required?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 嵌套层级 */
+  level?: number;
+  /** 验证错误信息 */
+  errors?: Record<string, string>;
+  /** 字段路径（用于匹配错误信息） */
+  fieldPath?: string;
+}
+
+/**
+ * 校验错误信息
+ */
+export interface ValidationError {
+  field: string;
+  message: string;
+}
+
+/**
+ * 校验结果
+ */
+export interface ValidationResult {
+  valid: boolean;
+  errors: ValidationError[];
+}
+
+/**
+ * 校验 CustomParams 的值
+ * @param schema Schema 定义
+ * @param value 表单值
+ * @param prefix 字段名前缀
+ * @returns 校验结果
+ */
+export const validateCustomParams = (
+  schema: CustomParamSchema,
+  value: Record<string, any>,
+  prefix: string = ''
+): ValidationResult => {
+  const errors: ValidationError[] = [];
+
+  if (!schema?.Properties) {
+    return { valid: true, errors: [] };
+  }
+
+  const requiredFields = schema?.Required || [];
+
+  Object.entries(schema?.Properties).forEach(([key, fieldSchema]) => {
+    const fieldName = prefix ? `${prefix}.${key}` : key;
+    const fieldValue = value?.[key];
+    const isRequired = requiredFields.includes(key);
+
+    // 检查必填字段
+    if (isRequired) {
+      if (fieldValue === undefined || fieldValue === null || fieldValue === '') {
+        errors.push({
+          field: fieldName,
+          message: `${fieldSchema?.Title || key} 是必填项`,
+        });
+      }
+    }
+
+    // 递归校验对象类型
+    if (fieldSchema?.Type === 'object' && fieldSchema?.Properties && fieldValue) {
+      const nestedResult = validateCustomParams(fieldSchema, fieldValue, fieldName);
+      errors.push(...nestedResult.errors);
+    }
+
+    // 校验数组类型
+    if (fieldSchema?.Type === 'array' && fieldSchema?.Items && Array.isArray(fieldValue)) {
+      fieldValue.forEach((item, index) => {
+        const itemPath = `${fieldName}[${index}]`;
+
+        // 验证对象类型的数组项
+        if (fieldSchema?.Items?.Type === 'object' && fieldSchema?.Items?.Properties) {
+          const itemResult = validateCustomParams(
+            fieldSchema.Items,
+            item,
+            itemPath
+          );
+          errors.push(...itemResult.errors);
+        }
+        // 验证基础类型的数组项 - 只有当数组字段是必填时才验证
+        else if (isRequired) {
+          if (fieldSchema?.Items?.Type === 'string') {
+            if (item === undefined || item === null || item === '') {
+              errors.push({
+                field: itemPath,
+                message: `此项 是必填项`,
+              });
+            }
+          }
+          else if (fieldSchema?.Items?.Type === 'number') {
+            if (item === undefined || item === null) {
+              errors.push({
+                field: itemPath,
+                message: `此项 是必填项`,
+              });
+            }
+          }
+        }
+      });
+    }
+  });
+
+  return {
+    valid: errors.length === 0,
+    errors,
+  };
+};