feat: show block title

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)**  
+  设置模型标题，能够为各个模型设置不同的标题。
+
 ---
 
 ### 流注册与执行

packages/core/client/src/flow/models/base/BlockModel.tsx

@@ -34,6 +34,16 @@ export class DataBlockModel<T = DefaultStructure> extends BlockModel<T> {
     });
   }
 
+  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}`,

packages/core/client/src/flow/models/base/GridModel.tsx

@@ -115,6 +115,7 @@ export class GridModel extends FlowModel<GridModelStructure> {
                   fallback={<SkeletonFallback />}
                   showFlowSettings={{ showBackground: false }}
                   showErrorFallback
+                  showTitle
                 />
               );
             }}

packages/core/flow-engine/src/components/FlowModelRenderer.tsx

@@ -26,6 +26,13 @@
  *   hideRemoveInSettings={true}
  * />
  *
+ * // 显示设置和title
+ * <FlowModelRenderer
+ *   model={myModel}
+ *   showFlowSettings={true}
+ *   showTitle={true}
+ * />
+ *
  * // 使用右键菜单模式并隐藏删除按钮
  * <FlowModelRenderer
  *   model={myModel}
@@ -62,6 +69,9 @@ interface FlowModelRendererProps {
   /** 是否在设置中隐藏移除按钮 */
   hideRemoveInSettings?: boolean; // 默认 false
 
+  /** 是否在边框左上角显示模型title，默认 false */
+  showTitle?: boolean; // 默认 false
+
   /** 是否跳过自动应用流程，默认 false */
   skipApplyAutoFlows?: boolean; // 默认 false
 
@@ -89,6 +99,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{
   showFlowSettings: boolean | { showBackground?: boolean; showBorder?: boolean };
   flowSettingsVariant: string;
   hideRemoveInSettings: boolean;
+  showTitle: boolean;
   extraContext?: Record<string, any>;
   sharedContext?: Record<string, any>;
   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<string, any>;
   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 (
           <FlowsFloatContextMenu
+            showTitle={showTitle}
             model={model}
             showDeleteButton={!hideRemoveInSettings}
             showBackground={_.isObject(showFlowSettings) ? showFlowSettings.showBackground : undefined}
@@ -239,6 +258,7 @@ const FlowModelRendererCore: React.FC<{
         );
         return (
           <FlowsFloatContextMenu
+            showTitle={showTitle}
             model={model}
             showDeleteButton={!hideRemoveInSettings}
             showBackground={_.isObject(showFlowSettings) ? showFlowSettings.showBackground : undefined}
@@ -263,6 +283,7 @@ const FlowModelRendererCore: React.FC<{
  * @param {boolean} props.showFlowSettings - Whether to show flow settings entry (buttons, menus, etc.).
  * @param {string} props.flowSettingsVariant - The interaction style for flow settings.
  * @param {boolean} props.hideRemoveInSettings - Whether to hide remove button in settings.
+ * @param {boolean} props.showTitle - Whether to show model title in the top-left corner of the border.
  * @param {boolean} props.skipApplyAutoFlows - Whether to skip applying auto flows.
  * @param {any} props.extraContext - Extra context to pass to useApplyAutoFlows when skipApplyAutoFlows is false.
  * @param {any} props.sharedContext - Shared context to pass to the model.
@@ -277,6 +298,7 @@ export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
     showFlowSettings = false,
     flowSettingsVariant = 'dropdown',
     hideRemoveInSettings = false,
+    showTitle = false,
     skipApplyAutoFlows = false,
     extraContext,
     sharedContext,
@@ -303,6 +325,7 @@ export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
             showFlowSettings={showFlowSettings}
             flowSettingsVariant={flowSettingsVariant}
             hideRemoveInSettings={hideRemoveInSettings}
+            showTitle={showTitle}
             sharedContext={sharedContext}
             showErrorFallback={showErrorFallback}
             settingsMenuLevel={settingsMenuLevel}
@@ -318,6 +341,7 @@ export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
             showFlowSettings={showFlowSettings}
             flowSettingsVariant={flowSettingsVariant}
             hideRemoveInSettings={hideRemoveInSettings}
+            showTitle={showTitle}
             extraContext={extraContext}
             sharedContext={sharedContext}
             showErrorFallback={showErrorFallback}

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<ModelProvidedProps> = observer(
     className,
     showBackground = true,
     showBorder = true,
+    showTitle = false,
     settingsMenuLevel,
     extraToolbarItems,
   }: ModelProvidedProps) => {
@@ -325,6 +356,11 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
 
           {/* 悬浮工具栏 - 使用与 NocoBase 一致的结构 */}
           <div className="general-schema-designer">
+            {showTitle && model.title && (
+              <div className="general-schema-designer-title">
+                <span className="title-tag">{model.title}</span>
+              </div>
+            )}
             <div className="general-schema-designer-icons">
               <Space size={3} align="center">
                 {renderToolbarItems(
@@ -355,6 +391,7 @@ const FlowsFloatContextMenuWithModelById: React.FC<ModelByIdProps> = observer(
     showCopyUidButton = true,
     containerStyle,
     className,
+    showTitle = false,
     settingsMenuLevel,
     extraToolbarItems: extraToolbarItems,
   }) => {
@@ -373,6 +410,7 @@ const FlowsFloatContextMenuWithModelById: React.FC<ModelByIdProps> = observer(
         showCopyUidButton={showCopyUidButton}
         containerStyle={containerStyle}
         className={className}
+        showTitle={showTitle}
         settingsMenuLevel={settingsMenuLevel}
         extraToolbarItems={extraToolbarItems}
       >

packages/core/flow-engine/src/models/flowModel.tsx

@@ -47,6 +47,7 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
   public parent: ParentFlowModel<Structure>;
   public subModels: Structure['subModels'];
   private _options: FlowModelOptions<Structure>;
+  protected _title: string;
 
   /**
    * 所有 fork 实例的引用集合。
@@ -135,6 +136,15 @@ export class FlowModel<Structure extends DefaultStructure = DefaultStructure> {
     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<string, CreateSubModelOptions | CreateSubModelOptions[]>) {
     Object.entries(subModels || {}).forEach(([key, value]) => {
       if (Array.isArray(value)) {