feat: show block title

2025-07-01 18:52:20 +08:00 · 2025-06-30 17:19:09 +08:00 · 2025-06-30 17:19:09 +08:00 · 687780eda3
commit 687780eda3
parent 0f5952a6e1
6 changed files with 89 additions and 0 deletions
--- 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)**  
+  设置模型标题，能够为各个模型设置不同的标题。
+
 ---

 ### 流注册与执行
--- 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<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}`,
--- 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<GridModelStructure> {
                  fallback={<SkeletonFallback />}
                  showFlowSettings={{ showBackground: false }}
                  showErrorFallback
+                  showTitle
                />
              );
            }}
--- 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
+ * <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}
--- 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<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}
      >
--- 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<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)) {