Process 处理过程

展示已整理的步骤、状态、耗时和可展开详情。

交互示例

交互示例加载中…

用法

<Process
  title="资料整理"
  steps={steps}
  expandedIds={expandedIds}
  onExpandedChange={setExpandedIds}
/>

行为与接入

每个步骤使用稳定 id 并显式提供 status。标题、说明、elapsedMs 和 details 均来自调用方；耗时不会在组件内自行计时。

展开可使用受控的 expandedIds + onExpandedChange，也可通过 defaultExpandedIds 设置一次性初始值。默认收起；没有详情的项不提供展开操作。

过程组件不执行任务、不解析工具协议，也不根据步骤名称推断业务行为。多组过程由页面组合多个 Process。

API

查看完整 TypeScript 类型

以下内容由包根公开类型生成，与当前源码保持一致。

import type { ReactNode } from 'react';

import type { StyleProp, ViewStyle } from 'react-native';

import type { ChatAction } from '@unif/react-native-chat';

export type ProcessStepStatus =
  'pending' | 'running' | 'completed' | 'failed' | 'cancelled';

export interface ProcessStep {
  id: string;
  title: string;
  status: ProcessStepStatus;
  description?: string;
  elapsedMs?: number;
  details?: ReactNode;
  actions?: readonly ChatAction[];
}

export interface ProcessBaseProps {
  steps: readonly ProcessStep[];
  title?: string;
  identity?: ReactNode;
  style?: StyleProp<ViewStyle>;
  testID?: string;
}

export interface ProcessControlledExpansion {
  expandedIds: readonly string[];
  onExpandedChange(ids: readonly string[]): void;
  defaultExpandedIds?: never;
}

export interface ProcessLocalExpansion {
  expandedIds?: never;
  defaultExpandedIds?: readonly string[];
  onExpandedChange?(ids: readonly string[]): void;
}

export type ProcessProps = ProcessBaseProps &
  (ProcessControlledExpansion | ProcessLocalExpansion);