diff --git a/packages/core/client/docs/zh-CN/core/flow-engine/flow-model.md b/packages/core/client/docs/zh-CN/core/flow-engine/flow-model.md index d92aca12dc..0ae563820a 100644 --- a/packages/core/client/docs/zh-CN/core/flow-engine/flow-model.md +++ b/packages/core/client/docs/zh-CN/core/flow-engine/flow-model.md @@ -12,6 +12,9 @@ - **sortIndex: number** 排序索引。 +- **title: string** + 模型标题,用于界面展示,例如区块标题。 + - **props: IModelComponentProps** 组件属性,支持响应式。 @@ -59,6 +62,9 @@ - **getStepParams(...)** 支持多种重载,获取流步骤参数。 +- **setTitle(value: string)** + 设置模型标题,能够为各个模型设置不同的标题。 + --- ### 流注册与执行 diff --git a/packages/core/client/src/flow/models/base/BlockModel.tsx b/packages/core/client/src/flow/models/base/BlockModel.tsx index e2bc39d9b4..85645eb931 100644 --- a/packages/core/client/src/flow/models/base/BlockModel.tsx +++ b/packages/core/client/src/flow/models/base/BlockModel.tsx @@ -34,6 +34,16 @@ export class DataBlockModel extends BlockModel { }); } + get title() { + return ( + this._title || + ` + ${this.collection.title} -> + ${this.collection.dataSource.displayName} -> + ${this.translate(this.constructor['meta']?.title || this.constructor.name)}` + ); + } + addAppends(fieldPath: string, refresh = false) { const field = this.ctx.globals.dataSourceManager.getCollectionField( `${this.collection.dataSourceKey}.${this.collection.name}.${fieldPath}`, diff --git a/packages/core/client/src/flow/models/base/GridModel.tsx b/packages/core/client/src/flow/models/base/GridModel.tsx index 57394b1603..85cfbf7119 100644 --- a/packages/core/client/src/flow/models/base/GridModel.tsx +++ b/packages/core/client/src/flow/models/base/GridModel.tsx @@ -115,6 +115,7 @@ export class GridModel extends FlowModel { fallback={} showFlowSettings={{ showBackground: false }} showErrorFallback + showTitle /> ); }} diff --git a/packages/core/flow-engine/src/components/FlowModelRenderer.tsx b/packages/core/flow-engine/src/components/FlowModelRenderer.tsx index 634a705eac..9982317a20 100644 --- a/packages/core/flow-engine/src/components/FlowModelRenderer.tsx +++ b/packages/core/flow-engine/src/components/FlowModelRenderer.tsx @@ -26,6 +26,13 @@ * hideRemoveInSettings={true} * /> * + * // 显示设置和title + * + * * // 使用右键菜单模式并隐藏删除按钮 * ; sharedContext?: Record; showErrorFallback?: boolean; @@ -100,6 +111,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{ showFlowSettings, flowSettingsVariant, hideRemoveInSettings, + showTitle, extraContext, sharedContext, showErrorFallback, @@ -115,6 +127,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{ showFlowSettings={showFlowSettings} flowSettingsVariant={flowSettingsVariant} hideRemoveInSettings={hideRemoveInSettings} + showTitle={showTitle} showErrorFallback={showErrorFallback} settingsMenuLevel={settingsMenuLevel} extraToolbarItems={extraToolbarItems} @@ -132,6 +145,7 @@ const FlowModelRendererWithoutAutoFlows: React.FC<{ showFlowSettings: boolean | { showBackground?: boolean; showBorder?: boolean }; flowSettingsVariant: string; hideRemoveInSettings: boolean; + showTitle: boolean; sharedContext?: Record; showErrorFallback?: boolean; settingsMenuLevel?: number; @@ -142,6 +156,7 @@ const FlowModelRendererWithoutAutoFlows: React.FC<{ showFlowSettings, flowSettingsVariant, hideRemoveInSettings, + showTitle, sharedContext, showErrorFallback, settingsMenuLevel, @@ -154,6 +169,7 @@ const FlowModelRendererWithoutAutoFlows: React.FC<{ showFlowSettings={showFlowSettings} flowSettingsVariant={flowSettingsVariant} hideRemoveInSettings={hideRemoveInSettings} + showTitle={showTitle} showErrorFallback={showErrorFallback} settingsMenuLevel={settingsMenuLevel} extraToolbarItems={extraToolbarItems} @@ -171,6 +187,7 @@ const FlowModelRendererCore: React.FC<{ showFlowSettings: boolean | { showBackground?: boolean; showBorder?: boolean }; flowSettingsVariant: string; hideRemoveInSettings: boolean; + showTitle: boolean; showErrorFallback?: boolean; settingsMenuLevel?: number; extraToolbarItems?: ToolbarItemConfig[]; @@ -180,6 +197,7 @@ const FlowModelRendererCore: React.FC<{ showFlowSettings, flowSettingsVariant, hideRemoveInSettings, + showTitle, showErrorFallback, settingsMenuLevel, extraToolbarItems, @@ -205,6 +223,7 @@ const FlowModelRendererCore: React.FC<{ case 'dropdown': return ( = observer( showFlowSettings = false, flowSettingsVariant = 'dropdown', hideRemoveInSettings = false, + showTitle = false, skipApplyAutoFlows = false, extraContext, sharedContext, @@ -303,6 +325,7 @@ export const FlowModelRenderer: React.FC = observer( showFlowSettings={showFlowSettings} flowSettingsVariant={flowSettingsVariant} hideRemoveInSettings={hideRemoveInSettings} + showTitle={showTitle} sharedContext={sharedContext} showErrorFallback={showErrorFallback} settingsMenuLevel={settingsMenuLevel} @@ -318,6 +341,7 @@ export const FlowModelRenderer: React.FC = observer( showFlowSettings={showFlowSettings} flowSettingsVariant={flowSettingsVariant} hideRemoveInSettings={hideRemoveInSettings} + showTitle={showTitle} extraContext={extraContext} sharedContext={sharedContext} showErrorFallback={showErrorFallback} diff --git a/packages/core/flow-engine/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx b/packages/core/flow-engine/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx index b7f1a1b652..ff6ecaafd3 100644 --- a/packages/core/flow-engine/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx +++ b/packages/core/flow-engine/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx @@ -117,6 +117,27 @@ const floatContainerStyles = ({ showBackground, showBorder }) => css` background: var(--colorTemplateBgSettingsHover); } + > .general-schema-designer-title { + pointer-events: none; + position: absolute; + font-size: 12px; + padding: 0; + line-height: 16px; + height: 16px; + border-bottom-right-radius: 2px; + border-radius: 2px; + top: 2px; + left: 2px; + + .title-tag { + padding: 0 3px; + border-radius: 2px; + background: var(--colorSettings); + color: #fff; + display: block; + } + } + > .general-schema-designer-icons { position: absolute; right: 2px; @@ -156,6 +177,10 @@ interface ModelProvidedProps { * @default true */ showBackground?: boolean; + /** + * @default false + */ + showTitle?: boolean; /** * Settings menu levels: 1=current model only (default), 2=include sub-models */ @@ -183,6 +208,10 @@ interface ModelByIdProps { * @default true */ showBackground?: boolean; + /** + * @default false + */ + showTitle?: boolean; /** * Settings menu levels: 1=current model only (default), 2=include sub-models */ @@ -221,6 +250,7 @@ const isModelByIdProps = (props: FlowsFloatContextMenuProps): props is ModelById * @param props.showCopyUidButton 是否显示复制UID按钮,默认为true * @param props.containerStyle 容器自定义样式 * @param props.className 容器自定义类名 + * @param props.showTitle 是否在边框左上角显示模型title,默认为false * @param props.settingsMenuLevel 设置菜单层级:1=仅当前模型(默认),2=包含子模型 * @param props.extraToolbarItems 额外的工具栏项目,仅应用于此实例 */ @@ -249,6 +279,7 @@ const FlowsFloatContextMenuWithModel: React.FC = observer( className, showBackground = true, showBorder = true, + showTitle = false, settingsMenuLevel, extraToolbarItems, }: ModelProvidedProps) => { @@ -325,6 +356,11 @@ const FlowsFloatContextMenuWithModel: React.FC = observer( {/* 悬浮工具栏 - 使用与 NocoBase 一致的结构 */}
+ {showTitle && model.title && ( +
+ {model.title} +
+ )}
{renderToolbarItems( @@ -355,6 +391,7 @@ const FlowsFloatContextMenuWithModelById: React.FC = observer( showCopyUidButton = true, containerStyle, className, + showTitle = false, settingsMenuLevel, extraToolbarItems: extraToolbarItems, }) => { @@ -373,6 +410,7 @@ const FlowsFloatContextMenuWithModelById: React.FC = observer( showCopyUidButton={showCopyUidButton} containerStyle={containerStyle} className={className} + showTitle={showTitle} settingsMenuLevel={settingsMenuLevel} extraToolbarItems={extraToolbarItems} > diff --git a/packages/core/flow-engine/src/models/flowModel.tsx b/packages/core/flow-engine/src/models/flowModel.tsx index 18419c4d43..a280dfc26a 100644 --- a/packages/core/flow-engine/src/models/flowModel.tsx +++ b/packages/core/flow-engine/src/models/flowModel.tsx @@ -47,6 +47,7 @@ export class FlowModel { public parent: ParentFlowModel; public subModels: Structure['subModels']; private _options: FlowModelOptions; + protected _title: string; /** * 所有 fork 实例的引用集合。 @@ -135,6 +136,15 @@ export class FlowModel { return modelMetas.get(this); } + get title() { + // model 可以通过 setTitle 来自定义title, 具有更高的优先级 + return this._title || this.translate(this.constructor['meta']?.title); + } + + setTitle(value: string) { + this._title = value; + } + private createSubModels(subModels: Record) { Object.entries(subModels || {}).forEach(([key, value]) => { if (Array.isArray(value)) {