@cloudtower/eagle 0.0.0-config-rc-9 → 0.0.0-data-testid

package/dist/src/core/Timeline/Timeline.style.d.ts

@@ -0,0 +1,5 @@
+export declare const TimelineWrapper: import("@linaria/core").LinariaClassName;
+export declare const TimelineItemWrapper: import("@linaria/core").LinariaClassName;
+export declare const EmptyWrapper: import("@linaria/core").LinariaClassName;
+export declare const SubInfoTextWrapper: import("@linaria/core").LinariaClassName;
+export declare const InfoTextWrapper: import("@linaria/core").LinariaClassName;

package/dist/src/core/Timeline/Timeline.type.d.ts

@@ -0,0 +1,231 @@
+import { AlertProps } from "../../core/Alert";
+import { LinkProps } from "../../core/Link";
+import { TagProps } from "../../core/Tag";
+import { ReactNode } from "react";
+/**
+ * 标签属性，扩展自基础Tag组件属性
+ * @property {string} category - 固定为 'tag'，标识这是一个标签元素
+ */
+export type TimelineTagProps = TagProps & {
+    category: "tag";
+};
+/**
+ * 信息文本属性
+ * @property {string} category - 文本类型，决定样式和用途
+ * @property {React.ReactNode} children - 文本内容
+ * @property {number} multiLines - 多行文本显示行数限制，超出将被省略
+ * @property {string} className - 自定义CSS类名
+ */
+export type TimelineInfoProps = {
+    category: "subinfo_label" | "info" | "info_bold";
+    children?: React.ReactNode;
+    multiLines?: number;
+    className?: string;
+};
+/**
+ * 链接属性，扩展自基础Link组件属性
+ * @property {string} category - 固定为 'link'，标识这是一个链接元素
+ */
+export type TimelineLinkProps = LinkProps & {
+    category: "link";
+};
+/**
+ * 时间线信息区域属性
+ * @property {number} gap - 元素之间的间距，控制项目间的空白
+ * @property {React.ReactNode} split - 分隔符，用于在项目之间显示分隔符，如点、线等
+ * @property {string} className - 自定义CSS类名，用于自定义区域样式
+ * @property {Array} items - 区域中包含的元素列表，可以是标签、文本、链接
+ * @property {React.ReactNode} suffix - 后缀内容，通常用于放置操作按钮
+ */
+export type TimelineAreaProps = {
+    gap?: number;
+    split?: React.ReactNode;
+    className?: string;
+    items: Array<TimelineInfoProps | TimelineLinkProps | TimelineTagProps>;
+    suffix?: React.ReactNode;
+};
+/**
+ * 时间线项目数据结构
+ * 定义单个时间线项目的所有属性和配置
+ */
+export interface TimelineItemData {
+    /**
+     * 条目的状态，影响图标和颜色样式
+     * - success: 成功状态，显示绿色对勾图标
+     * - failed: 失败状态，显示红色错误图标
+     * - pending: 等待状态，显示黄色等待图标
+     * - notice: 通知状态，显示黄色警告图标
+     * - progress: 进行中状态，显示蓝色加载图标（带旋转动画）
+     * - idle: 空闲状态，显示灰色图标
+     */
+    status: "success" | "failed" | "pending" | "notice" | "progress" | "idle";
+    /**
+     * 详情信息，通常用于显示错误详情或额外说明
+     * 默认使用Alert组件展示，样式会根据status自动匹配
+     * @example
+     * detailMessage: {
+     *   message: "升级失败，请检查网络连接",
+     *   action: <Button>重试</Button>
+     * }
+     * @deprecated 推荐优先使用 detailMessages
+     */
+    detailMessage?: AlertProps;
+    /**
+     * 详情信息列表，通常用于显示错误详情或额外说明
+     * 支持多个详情信息，每个详情信息可以包含不同的样式和内容
+     * 优先级高于 detailMessage
+     * @example
+     * detailMessages: [{
+     *   message: "升级失败，请检查网络连接",
+     *   action: <Button>重试</Button>
+     * }, {
+     *   message: "错误详情：网络超时",
+     *   type: "warning"
+     * }]
+     */
+    detailMessages?: AlertProps[];
+    /**
+     * 自定义详情信息渲染函数，作用于每个详情信息
+     * 可以完全自定义每个详情信息的展示内容和样式
+     * @param detailMessage - 单个详情信息配置
+     * @param index - 当前详情信息在列表中的索引
+     * @returns 自定义渲染的React节点
+     * @example
+     * detailMessageRender: (message, index) => (
+     *   <div key={index} style={{ padding: "8px", marginBottom: "4px" }}>
+     *     <div>{message?.message}</div>
+     *     {index === 0 && <Button>重试</Button>}
+     *   </div>
+     * )
+     */
+    detailMessageRender?: (detailMessage?: AlertProps, index?: number) => ReactNode;
+    /**
+     * 主要信息区域，展示操作标题、版本号等重要信息
+     * 支持多行信息，每行可以包含多个不同类型的元素（标签、文本、链接等）
+     * 注意：标签元素(tag)应放在文本前面，以符合设计规范
+     * @example
+     * infos: [
+     *   {
+     *     items: [
+     *       { category: 'tag', color: 'blue', children: '升级' },
+     *       { category: 'info', children: 'v1.0.0' }
+     *     ]
+     *   }
+     * ]
+     */
+    infos: TimelineAreaProps[];
+    /**
+     * 自定义主要信息渲染函数，优先级高于infos
+     * 可以完全自定义主要信息区域的展示内容和样式
+     * @param infos - 默认的主要信息配置
+     * @returns 自定义渲染的React节点
+     * @example
+     * infosRender: (infos) => (
+     *   <div style={{ display: "flex", alignItems: "center" }}>
+     *     <span style={{ fontWeight: "bold" }}>
+     *       {infos[0].items.find(i => i.category.includes("info"))?.children}
+     *     </span>
+     *     <Tag color="green">稳定版</Tag>
+     *   </div>
+     * )
+     */
+    infosRender?: (infos: TimelineAreaProps[]) => ReactNode;
+    /**
+     * 主要信息区域的操作按钮，通常用于放置查看详情等操作
+     * 会显示在主要信息区域的右侧
+     * @example
+     * infoAction: <Link onClick={() => console.log("查看详情")}>查看详情</Link>
+     */
+    infoAction?: ReactNode;
+    /**
+     * 次要信息区域，通常用于展示时间、状态等辅助信息
+     * 支持多种元素类型和分隔符
+     * @example
+     * subInfo: {
+     *   split: 'dot',
+     *   items: [
+     *     { category: 'subinfo_label', children: '2023-06-01 10:00:00' },
+     *     { category: 'subinfo_label', children: '用时30分钟' }
+     *   ]
+     * }
+     */
+    subInfo?: TimelineAreaProps;
+    /**
+     * 自定义次要信息渲染函数，优先级高于subInfo
+     * 可以完全自定义次要信息区域的展示内容和样式
+     * @param subInfo - 默认的次要信息配置
+     * @returns 自定义渲染的React节点
+     * @example
+     * subInfoRender: (subInfo) => {
+     *   const startTime = String(subInfo?.items[0].children || "");
+     *   const endTime = String(subInfo?.items[1].children || "");
+     *   return (
+     *     <div>
+     *       <div>开始时间: {startTime}</div>
+     *       <div>结束时间: {endTime}</div>
+     *     </div>
+     *   );
+     * }
+     */
+    subInfoRender?: (subInfo?: TimelineAreaProps) => ReactNode;
+}
+/**
+ * Timeline组件属性
+ * 定义Timeline组件接收的所有属性
+ */
+export interface TimelineProps {
+    /** 测试标识 */
+    "data-testid"?: string;
+    /**
+     * 是否启用紧凑模式，启用后时间线项目之间的间距会减小
+     * 适合在有限空间内展示更多时间线项目
+     * @default false
+     * @example
+     * compact={true}
+     */
+    compact?: boolean;
+    /**
+     * 时间线项目数据数组，包含要显示的所有时间线条目
+     * 数组中的每个项目定义一个时间线条目的全部内容和样式
+     * @example
+     * items={[
+     *   {
+     *     status: "success",
+     *     infos: [{ items: [{ category: "info", children: "操作成功" }] }],
+     *     subInfo: { items: [{ category: "subinfo_label", children: "2023-06-01" }] }
+     *   }
+     * ]}
+     */
+    items: TimelineItemData[];
+    /**
+     * 时间线容器类名，可用于自定义时间线容器的样式
+     */
+    timelineContainerClassName?: string;
+    /**
+     * 空状态显示文本，当items为空数组时显示
+     * @default "暂无数据"
+     * @example
+     * emptyText="暂无历史记录"
+     */
+    emptyText?: string;
+    /**
+     * 空状态文本的样式类名，可用于自定义空状态文本的样式
+     * @example
+     * emptyTextClassName={Typo.Label.l2_bold_title}
+     */
+    emptyTextClassName?: string;
+    /**
+     * 自定义空状态渲染函数，优先级高于emptyText
+     * 可以完全自定义空状态的展示内容和样式
+     * @param emptyText - 默认的空状态文本
+     * @returns 自定义渲染的React节点
+     * @example
+     * emptyRender={(text) => (
+     *   <div>
+     *     <div>{text}</div>
+     *     <Button type="primary">刷新数据</Button>
+     *   </div>
+     * )}
+     */
+    emptyRender?: (emptyText?: string) => ReactNode;
+}

package/dist/src/core/Timeline/Timeline.widget.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { TimelineAreaProps } from "./Timeline.type";
+export declare const TimelineArea: React.FC<TimelineAreaProps & {
+    compact?: boolean;
+}>;

package/dist/src/core/Timeline/index.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+import { TimelineProps } from "./Timeline.type";
+/**
+ * Timeline 组件：展示时间线
+ *
+ * 支持多种状态的时间线项目，包括成功、失败、进行中、通知、空闲等状态
+ * 支持自定义渲染和详情信息展示，优先使用 detailMessages 而非 detailMessage
+ * 支持使用 Area 组件灵活自定义辅助信息展示
+ *
+ * @param props - 组件属性
+ * @returns React 组件
+ */
+export declare const Timeline: ({ items, emptyText, emptyRender, compact, timelineContainerClassName, emptyTextClassName, "data-testid": dataTestId, }: TimelineProps) => ReactElement;
+export * from "./Timeline.type";

package/dist/src/core/Tooltip/EllipsisTooltipContent.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { EllipsisContentType } from "./tooltip.type";
+declare const EllipsisTooltipContent: React.FC<EllipsisContentType>;
+export default EllipsisTooltipContent;

package/dist/src/core/Tooltip/index.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
+import EllipsisTooltipContent from "./EllipsisTooltipContent";
 import { TooltipProps } from "./tooltip.type";
-declare const Tooltip: React.FunctionComponent<TooltipProps>;
+declare const InternalTooltip: React.FunctionComponent<TooltipProps>;
+type InterTooltip = typeof InternalTooltip;
+type CompoundedTooltip = InterTooltip & {
+    EllipsisContent: typeof EllipsisTooltipContent;
+};
+declare const Tooltip: CompoundedTooltip;
 export default Tooltip;
 export * from "./tooltip.type";

package/dist/src/core/Tooltip/tooltip.type.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import { LinariaClassName } from "@linaria/core";
 import { TooltipProps as AntdTooltipProps } from "antd/lib/tooltip";
 export type TooltipProps = AntdTooltipProps & {
     /**
@@ -5,3 +7,23 @@ export type TooltipProps = AntdTooltipProps & {
      */
     followMouse?: boolean;
 };
+export type EllipsisContentType = {
+    /**
+     * tooltip content 内容
+     */
+    tooltip: React.ReactNode;
+    /**
+     * 内容区的最大高度
+     *
+     * e.g. 文本限制行数 = 行数 * line-height
+     */
+    maxHeight?: number;
+    /**
+     * 自定义样式类名
+     */
+    contentWrapperClassName?: LinariaClassName;
+    /**
+     * 多行溢出省略提示
+     */
+    ellipsisTips?: string;
+};

package/dist/src/core/Truncate/index.d.ts

@@ -7,6 +7,7 @@ export type TruncatePropTypes = {
     hoverShowFullText?: boolean;
     className?: string;
     inline?: boolean;
+    "data-testid"?: string;
 };
 declare const Truncate: React.FC<TruncatePropTypes>;
 export default Truncate;

package/dist/src/core/Units/units.type.d.ts

@@ -1,17 +1,93 @@
 /// <reference types="react" />
 import { IEmptyProps } from "../Empty";
+/**
+ * 基础数值单位展示的接口定义
+ * @interface RawValue
+ */
 export interface RawValue {
+    /**
+     * 原始数值
+     * @type {number | null}
+     * @default undefined
+     * @example
+     * rawValue={1024} // 展示为 1024
+     * rawValue={null} // 展示为空
+     */
     rawValue?: number | null;
+    /**
+     * 保留小数位数
+     * @type {number}
+     * @default undefined
+     * @example
+     * decimals={2} // 1024.00
+     */
     decimals?: number;
+    /**
+     * 当值为0时是否隐藏单位
+     * @type {boolean}
+     * @default false
+     * @example
+     * noUnitOnZero={true} // 0
+     * noUnitOnZero={false} // 0 GB
+     */
     noUnitOnZero?: boolean;
+    /**
+     * 是否使用缩写形式
+     * @type {boolean}
+     * @default false
+     * @example
+     * abbreviate={true} // 1 min
+     * abbreviate={false} // 1 minute
+     */
     abbreviate?: boolean;
+    /**
+     * 数值部分的自定义类名
+     * @type {string}
+     */
     valueClassName?: string;
+    /**
+     * 单位部分的自定义类名
+     * @type {string}
+     */
     unitClassName?: string;
 }
+/**
+ * 百分比展示组件的属性类型
+ * @type PercentFn
+ */
 export type PercentFn = React.FC<RawValue & {
+    /**
+     * 是否为饱和值（超过100%）
+     * @type {boolean}
+     * @default false
+     * @example
+     * saturated={true} // 显示为饱和状态
+     */
     saturated?: boolean;
+    /**
+     * Empty组件的配置属性
+     * @type {IEmptyProps}
+     */
     emptyProps?: IEmptyProps;
+    /**
+     * 数据测试 id
+     * @type {string}
+     */
+    "data-testid"?: string;
 }>;
+/**
+ * 通用单位展示组件的属性类型
+ * @type UnitFn
+ */
 export type UnitFn = React.FC<RawValue & {
+    /**
+     * Empty组件的配置属性
+     * @type {IEmptyProps}
+     */
     emptyProps?: IEmptyProps;
+    /**
+     * 数据测试 id
+     * @type {string}
+     */
+    "data-testid"?: string;
 }>;

package/dist/src/core/WizardDialog/index.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { WizardDialogProps } from "./type";
+export declare function WizardDialog(props: WizardDialogProps): React.JSX.Element;

package/dist/src/core/WizardDialog/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StepStyle: import("@linaria/core").LinariaClassName;
+export declare const PrevIconStyle: import("@linaria/core").LinariaClassName;
+export declare const StepContentStyle: import("@linaria/core").LinariaClassName;
+export declare const RightPanelStyle: import("@linaria/core").LinariaClassName;

package/dist/src/core/WizardDialog/type.d.ts

@@ -0,0 +1,167 @@
+/// <reference types="react" />
+import { ImmersiveDialogProps } from "../../core/ImmersiveDialog/type";
+/**
+ * 基于 ImmersiveDialog 的多步骤向导对话框。
+ *
+ * @description
+ * 自动管理步骤导航、步骤指示器和按钮文案切换。
+ * 非最后一步时，确定按钮显示"下一步"并触发 `onNextStep`；
+ * 最后一步时显示"确定"并触发 `onOk`。左侧面板默认渲染垂直步骤条。
+ * 通过 `usePushModal` 打开。
+ *
+ * @example
+ * ```tsx
+ * // 基础三步向导——创建集群
+ * import { WizardDialog } from "@cloudtower/eagle";
+ * import { usePushModal } from "@cloudtower/eagle/KitStoreProvider";
+ *
+ * const pushModal = usePushModal();
+ *
+ * pushModal({
+ *   component: () => (
+ *     <WizardDialog
+ *       title="创建集群"
+ *       steps={[
+ *         { title: "基本信息", children: <ClusterBasicForm /> },
+ *         { title: "网络配置", children: <ClusterNetworkForm /> },
+ *         { title: "确认创建", children: <ClusterConfirmPanel /> },
+ *       ]}
+ *       onOk={(e) => handleCreate()}
+ *     />
+ *   ),
+ *   props: { name: "CreateClusterWizard" },
+ * });
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 带步骤校验的向导——onNextStep 返回 false 阻止导航
+ * <WizardDialog
+ *   title="创建虚拟机"
+ *   steps={steps}
+ *   onNextStep={(nextStep) => {
+ *     if (!validateCurrentStep()) {
+ *       message.error("请完善当前步骤的必填项");
+ *       return false; // 阻止跳转到下一步
+ *     }
+ *   }}
+ *   onOk={(e) => handleSubmit()}
+ * />
+ * ```
+ *
+ * 注意以下继承属性在 WizardDialog 中有特殊行为：
+ * - `footerLeftAction`：WizardDialog 内部使用此属性渲染"上一步"按钮，外部传入会被覆盖。
+ * - `isContentFull`：WizardDialog 内部强制设为 `false`，外部传入无效。
+ *
+ * @see ImmersiveDialog 基础全屏对话框组件
+ * @see Steps 步骤条组件
+ */
+export type WizardDialogProps = ImmersiveDialogProps & {
+    /**
+     * 当前步骤索引（从 0 开始）。
+     *
+     * @description
+     * 传入此属性时进入受控模式，步骤切换完全由外部状态驱动；
+     * 不传时为非受控模式，组件内部自动管理当前步骤。
+     *
+     * @default 0
+     */
+    step?: number;
+    /**
+     * 步骤配置数组，每项定义一个向导步骤。
+     *
+     * @description
+     * 每个步骤包含 `title`（显示在左侧步骤条中的标题）和
+     * `children`（该步骤的主体内容，通常为表单或信息面板）。
+     * 步骤数量决定导航行为：非最后一步点击确定按钮触发 `onNextStep`，
+     * 最后一步触发 `onOk`。
+     */
+    steps?: {
+        /** 步骤标题，显示在左侧垂直步骤条中 */
+        title: string;
+        /** 步骤内容，通常为表单或信息展示面板 */
+        children: React.ReactNode;
+        /** 测试标识，挂在对应的 step item 上 */
+        "data-testid"?: string;
+    }[];
+    /**
+     * 是否隐藏左侧步骤指示器。
+     *
+     * @description
+     * 设为 `true` 时不渲染默认的垂直步骤条。
+     * 可配合 `left` 属性放置自定义的步骤指示器或其他导航内容。
+     *
+     * @default false
+     */
+    hideSteps?: boolean;
+    /**
+     * 左侧面板自定义内容。
+     *
+     * @description
+     * 传入后将替换默认的步骤指示器。常用于自定义步骤导航样式。
+     */
+    left?: React.ReactNode;
+    /**
+     * 右侧面板自定义内容。
+     *
+     * @description
+     * 渲染在主内容区域右侧的额外面板。
+     */
+    right?: React.ReactNode;
+    /**
+     * 是否销毁非当前步骤的内容。
+     *
+     * @description
+     * - `true`：仅渲染当前步骤，切换时销毁前一步骤的 DOM，节省内存。
+     * - `false`：所有步骤始终保留在 DOM 中，通过 `display: none` 隐藏非当前步骤。
+     *   适用于需要保留表单状态的场景（如用户在步骤间来回切换时不丢失已填写的数据）。
+     *
+     * @default false
+     */
+    destroyOtherStep?: boolean;
+    /**
+     * "上一步"按钮的自定义文本。
+     *
+     * @default t("common.prev_step")（i18n：上一步 / Previous）
+     */
+    prevText?: string;
+    /**
+     * 点击"上一步"按钮时的回调。
+     *
+     * @param step - 即将跳转到的步骤索引（当前步骤 - 1）
+     */
+    onPrevStep?: (step: number) => void;
+    /**
+     * "下一步"按钮的自定义文本。
+     *
+     * @description
+     * 仅在非最后一步时显示，替换确定按钮的默认"下一步"文案。
+     *
+     * @default t("common.next_step")（i18n：下一步 / Next）
+     */
+    nextText?: string;
+    /**
+     * 点击"下一步"时的回调，支持阻止导航。
+     *
+     * @description
+     * 在非最后一步点击确定按钮时触发。这是实现步骤校验的核心机制：
+     * - 返回 `false` 将**阻止**导航到下一步（可用于表单校验失败时阻止前进）。
+     * - 返回 `void`（不返回值）或返回非 `false` 值时正常跳转到下一步。
+     *
+     * 注意：仅严格等于 `false`（`=== false`）时才阻止，返回 `undefined` 或其他假值不会阻止。
+     *
+     * @param step - 即将跳转到的步骤索引（当前步骤 + 1）
+     * @returns 返回 `false` 阻止导航，返回 `void` 允许导航
+     */
+    onNextStep?: (step: number) => void | boolean;
+    /**
+     * 步骤发生变化时的回调。
+     *
+     * @description
+     * 无论是通过"上一步"、"下一步"按钮，还是点击左侧步骤条直接跳转，
+     * 步骤变化后都会触发此回调。适合用于同步外部状态或埋点。
+     *
+     * @param step - 变化后的新步骤索引
+     */
+    onStepChange?: (step: number) => void;
+};

package/dist/src/core/__test__/data-testid.test.d.ts

@@ -0,0 +1 @@
+export {};