= ({ variant, className, title }) => (
* {title}
* );
*/
export interface BaseResponsiveProps {
/** DOM/逻辑层 id,用于 nodeType=id 的规则匹配 */
id?: string;
/** className,用于 nodeType=className 的(按空格分词)包含匹配 */
className?: string;
/** 响应式变体;HOC 默认注入 = currentBreakpoint */
variant?: string;
/** 行内样式 */
style?: React.CSSProperties;
}
/** 响应式设备类型 */
export declare type ResponsiveDeviceType = "phone" | "smallTablet" | "tablet" | "pos" | "desktop" | string;
/** 响应式方向 */
export declare type ResponsiveOrientation = "portrait" | "landscape" | string;
/**
* 用于匹配规则的节点定位类型
*
* - componentName: 与 HOC 推断的 displayName/name 全等匹配
* - id: 与组件 props.id 全等匹配
* - className: 按空格分词后包含匹配(与 DOM 行为一致)
*/
export declare type ResponsiveNodeType = "componentName" | "id" | "className";
/**
* when 过滤器:所有提供的字段都必须命中规则才生效;未提供的字段视为通配
*
* @example
* { breakpoint: ['phone', 'tablet'], orientation: 'portrait', maxWidth: 1023 }
*/
export interface ResponsiveWhen {
/** 命中指定断点 key(单值或集合) */
breakpoint?: string | string[];
/** 命中指定 deviceType(单值或集合) */
deviceType?: ResponsiveDeviceType | ResponsiveDeviceType[];
/** 命中指定方向 */
orientation?: ResponsiveOrientation;
/** 视口宽度 ≥ minWidth */
minWidth?: number;
/** 视口宽度 ≤ maxWidth */
maxWidth?: number;
}
/**
* 单条响应式覆写规则
*
* @example
* const rule: ResponsiveOverrideRule = {
* nodeType: 'componentName',
* nodeId: 'OrderItem',
* when: { breakpoint: 'phone' },
* props: { compact: true, className: 'order-item--phone' },
* variant: 'phone-compact',
* priority: 10,
* };
*/
export interface ResponsiveOverrideRule> {
/** 定位类型 */
nodeType: ResponsiveNodeType;
/** 定位值(与 nodeType 对应) */
nodeId: string;
/** 何时生效;不传视为始终生效 */
when?: ResponsiveWhen;
/** 要覆写的 props(浅合并) */
props?: Partial
;
/** 显式 variant;优先级高于 HOC 默认注入的 currentBreakpoint */
variant?: string;
/** 数字越大越优先;默认 0;同优先级按数组先后顺序,后者覆盖前者 */
priority?: number;
}
/** 节点定位载荷(matchRule / resolveProps 的输入) */
export interface ResponsiveNodeIdentity {
componentName?: string;
id?: string;
className?: string;
}
/**
* `withResponsive` 选项
*/
export interface WithResponsiveOptions {
/**
* 显式指定 componentName(用于规则匹配)
* 不传则按 `Component.displayName ?? Component.name` 推断
*/
name?: string;
/**
* 编辑模式下是否启用长按编辑器(默认 true)
* 某些纯 wrapper 组件可关掉以避免事件冲突
*/
editable?: boolean;
/**
* 该组件可被编辑面板覆写的字段白名单(最高优先级,优先于全局 byNode/default)
*
* - 不传则走插件解析顺序:byNode → default → DEFAULT_EDITABLE_FIELDS;
* - 编辑面板会以此为准过滤展示与保存内容,避免污染业务 props。
*
* @example
* export default withResponsive(OrderItem, {
* editableFields: ['variant', 'compact', 'showActions'],
* });
*/
editableFields?: string[];
}
/**
* `withResponsive` 返回的组件 props 类型
*
* @example
* type EnhancedProps = WithResponsiveProps;
*/
export declare type WithResponsiveProps = P & BaseResponsiveProps;
/**
* 覆写规则 Context 的值结构(与 terra 内部一致,这里仅为局部类型注释)
*/
export interface OverrideCtxValue {
rules: ResponsiveOverrideRule[];
editMode: boolean;
resolveProps: >(node: ResponsiveNodeIdentity, base: T) => T;
plugin: any | null;
}
/** 编辑面板事件载荷 */
export interface ResponsiveEditOpenPayload {
componentName?: string;
id?: string;
className?: string;
/** 合并后的最终 props(仅展示用) */
props: Record;
/** 触发时的当前断点 */
currentBreakpoint: string;
/**
* 可覆写字段白名单(最终生效集合)
*
* 优先级合并顺序:
* 1. `withResponsive(Component, { editableFields })` —— 组件级(最高)
* 2. `responsive.editableFields.byNode[]` —— 节点级(按 nodeType+nodeId 命中)
* 3. `responsive.editableFields.default` —— 全局默认
* 4. `DEFAULT_EDITABLE_FIELDS` —— 框架兜底
*
* 编辑面板会以此为准过滤可见字段、保存时丢弃非白名单字段,避免污染业务 props。
*/
editableFields: string[];
}