/// /** * 所有响应式组件应支持的基础 props * * - 通过实现该接口,组件可被 `withResponsive` HOC 自动注入响应式 variant 与覆写 props; * - HOC 在没有任何规则匹配时,仅会注入 `variant = currentBreakpoint`。 * * @example * interface MyProps extends BaseResponsiveProps { * title: string; * } * const MyComp: React.FC = ({ 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[]; }