@nocobase/client-v2 2.1.0-beta.30 → 2.1.0-beta.33

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableColumnModel.tsx

@@ -32,9 +32,11 @@ import { ErrorBoundary } from 'react-error-boundary';
 import React, { useRef, useMemo, useEffect } from 'react';
 import { SubTableFieldModel } from '.';
 import { FieldModel } from '../../../base/FieldModel';
+import { DetailsItemModel } from '../../../blocks/details/DetailsItemModel';
 import { FieldDeletePlaceholder, CustomWidth } from '../../../blocks/table/TableColumnModel';
 import { buildDynamicNamePath } from '../../../blocks/form/dynamicNamePath';
 import { getSubTableRowIdentity } from './rowIdentity';
+import { getFieldBindingUse, rebuildFieldSubModel } from '../../../../internal/utils/rebuildFieldSubModel';
 
 export const SUB_TABLE_COLUMN_FIELD_COMPONENT_CONTEXT = 'subTableColumn';
 
@@ -218,6 +220,41 @@ function shouldCommitImmediately(value: any) {
   return false;
 }
 
+export function isSubTableColumnReadPretty(parent: any) {
+  return !!parent?.props?.readPretty || parent?.props?.pattern === 'readPretty';
+}
+
+export function isSubTableColumnConfiguredReadPretty(parent: any) {
+  return (
+    isSubTableColumnReadPretty(parent) ||
+    parent?.getStepParams?.('subTableColumnSettings', 'pattern')?.pattern === 'readPretty'
+  );
+}
+
+export function getSubTableColumnTitleField(parent: any) {
+  return (
+    parent?.props?.titleField ||
+    parent?.subModels?.field?.props?.titleField ||
+    parent?.subModels?.field?.props?.fieldNames?.label ||
+    parent?.collectionField?.targetCollectionTitleFieldName
+  );
+}
+
+export function getSubTableColumnReadPrettyFieldProps(parent: any, value: any) {
+  const fieldProps: Record<string, any> = { value };
+  const titleField = getSubTableColumnTitleField(parent);
+  const fieldNames = parent?.props?.fieldNames || parent?.subModels?.field?.props?.fieldNames;
+
+  if (titleField) {
+    fieldProps.titleField = titleField;
+  }
+  if (fieldNames) {
+    fieldProps.fieldNames = fieldNames;
+  }
+
+  return fieldProps;
+}
+
 const FieldModelRendererOptimize = React.memo((props: any) => {
   const { model, onChange, value, commitOnChange, ...rest } = props;
   const pendingValueRef = React.useRef<any>(props?.value);
@@ -337,8 +374,8 @@ const MemoCell: React.FC<CellProps> = React.memo(
             });
           }
 
-          if (parent.props.readPretty) {
-            fork.setProps({ value });
+          if (isSubTableColumnReadPretty(parent)) {
+            fork.setProps(getSubTableColumnReadPrettyFieldProps(parent, value));
             return <React.Fragment key={id}>{fork.render()}</React.Fragment>;
           }
 
@@ -598,6 +635,24 @@ export class SubTableColumnModel<
         (this.parent as any)?.collection?.filterTargetKey ?? (this.parent as any)?.context?.collection?.filterTargetKey;
       const rowIdentity = getSubTableRowIdentity(record, filterTargetKey) ?? `row:${String(rowIdx)}`;
       const rowForkKey = `row:${baseIndexKey}:${rowIdentity}:${String(rowIdx)}`;
+      const fieldModel: any = this.subModels.field;
+      const cellModeKey = [
+        rowForkKey,
+        this.props.pattern,
+        this.props.readPretty,
+        this.props.titleField,
+        this.props.__displayFieldRefreshKey,
+        fieldModel?.uid,
+        fieldModel?.use,
+        fieldModel?.constructor?.name,
+        fieldModel?.props?.clickToOpen,
+        fieldModel?.props?.displayStyle,
+        fieldModel?.props?.overflowMode,
+        fieldModel?.props?.titleField,
+        fieldModel?.props?.fieldNames?.label,
+      ]
+        .filter((item) => item !== undefined && item !== null)
+        .join(':');
       const rowFork: any = (() => {
         const fork = this.createFork({}, rowForkKey);
         fork.context.defineProperty('subTableRowFork', {
@@ -651,7 +706,7 @@ export class SubTableColumnModel<
           parentFieldIndex={baseArr}
           parentItem={parentItem}
           rowFork={rowFork}
-          memoKey={rowForkKey}
+          memoKey={cellModeKey}
           width={this.props.width}
           commitOnChange={this.hasFormulaColumn}
         />
@@ -683,6 +738,7 @@ SubTableColumnModel.registerFlow({
         ctx.model.setProps(collectionField.getComponentProps());
         ctx.model.setProps('title', collectionField.title);
         ctx.model.setProps('dataIndex', collectionField.name);
+        await ctx.model.applySubModelsBeforeRenderFlows('field');
         const currentBlockModel = ctx.model.context.blockModel;
         // 避免强依赖 EditFormModel（减少循环依赖风险）：仅在存在该能力时调用
         currentBlockModel?.addAppends?.(ctx.model.fieldPath);
@@ -896,6 +952,91 @@ SubTableColumnModel.registerFlow({
       use: 'fieldComponent',
       title: tExpr('Field component'),
     },
+    fieldNames: {
+      use: 'titleField',
+      title: tExpr('Title field'),
+      hideInSettings(ctx) {
+        return (
+          !ctx.collectionField ||
+          !ctx.collectionField.isAssociationField() ||
+          !isSubTableColumnConfiguredReadPretty(ctx.model) ||
+          (ctx.model.subModels.field as any)?.disableTitleField
+        );
+      },
+      defaultParams(ctx) {
+        return {
+          label: getSubTableColumnTitleField(ctx.model),
+        };
+      },
+      beforeParamsSave: async (ctx, params, previousParams) => {
+        if (!ctx.collectionField || !ctx.collectionField.isAssociationField()) {
+          return null;
+        }
+        if (!isSubTableColumnConfiguredReadPretty(ctx.model)) {
+          return null;
+        }
+        if (!params.label || params.label === previousParams.label) {
+          return null;
+        }
+
+        const targetCollection = ctx.collectionField.targetCollection;
+        const targetCollectionField = targetCollection?.getField(params.label);
+        if (!targetCollectionField) {
+          return null;
+        }
+
+        const binding = DetailsItemModel.getDefaultBindingByField(ctx, targetCollectionField);
+        const fieldModel: any = ctx.model.subModels.field;
+        const currentUse = getFieldBindingUse(fieldModel) || fieldModel?.use;
+        const targetUse = binding?.modelName || currentUse;
+        const fieldSettingsInit = {
+          dataSourceKey: ctx.model.collectionField.dataSourceKey,
+          collectionName: targetCollection.name,
+          fieldPath: params.label,
+        };
+        const defaultProps =
+          typeof binding?.defaultProps === 'function'
+            ? binding.defaultProps(ctx, targetCollectionField)
+            : binding?.defaultProps;
+
+        ctx.model.setProps({
+          titleField: params.label,
+          ...targetCollectionField.getComponentProps?.(),
+        });
+
+        if (targetUse && targetUse !== currentUse) {
+          await rebuildFieldSubModel({
+            parentModel: ctx.model as any,
+            targetUse,
+            defaultProps: {
+              ...(defaultProps || {}),
+              titleField: params.label,
+            },
+            fieldSettingsInit,
+          });
+        } else if (fieldModel) {
+          fieldModel.setProps({
+            ...(defaultProps || {}),
+            titleField: params.label,
+          });
+          fieldModel.setStepParams('fieldSettings', 'init', fieldSettingsInit);
+          await fieldModel.dispatchEvent('beforeRender', undefined, { useCache: false });
+        }
+      },
+      handler(ctx, params) {
+        if (
+          !ctx.collectionField ||
+          !ctx.collectionField.isAssociationField() ||
+          !isSubTableColumnConfiguredReadPretty(ctx.model)
+        ) {
+          return null;
+        }
+        ctx.model.setProps({
+          titleField: params.label,
+          ...ctx.collectionField.targetCollection?.getField(params.label)?.getComponentProps?.(),
+        });
+      },
+    },
     pattern: {
       use: 'pattern',
     },

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/__tests__/SubTableColumnModel.rowRecord.test.ts

@@ -8,7 +8,18 @@
  */
 
 import { describe, expect, it, vi } from 'vitest';
-import { getLatestSubTableRowRecord, buildRowPathFromFieldIndex } from '../SubTableColumnModel';
+import { FlowEngine } from '@nocobase/flow-engine';
+import { DisplayTitleFieldModel } from '../../../DisplayTitleFieldModel';
+import { titleField } from '../../../../../actions/titleField';
+import {
+  SubTableColumnModel,
+  getLatestSubTableRowRecord,
+  buildRowPathFromFieldIndex,
+  isSubTableColumnConfiguredReadPretty,
+  getSubTableColumnTitleField,
+  getSubTableColumnReadPrettyFieldProps,
+  isSubTableColumnReadPretty,
+} from '../SubTableColumnModel';
 
 describe('SubTableColumnModel row record helpers', () => {
   it('builds the row path from fieldIndex entries', () => {
@@ -39,4 +50,162 @@ describe('SubTableColumnModel row record helpers', () => {
 
     expect(getLatestSubTableRowRecord(form, ['roles:0'], fallback)).toBe(fallback);
   });
+
+  it('treats a display-only column pattern as read-pretty mode', () => {
+    expect(isSubTableColumnReadPretty({ props: { pattern: 'readPretty' } })).toBe(true);
+    expect(isSubTableColumnReadPretty({ props: { readPretty: true } })).toBe(true);
+    expect(isSubTableColumnReadPretty({ props: { pattern: 'editable' } })).toBe(false);
+  });
+
+  it('treats a saved display-only column pattern as read-pretty during beforeRender restore', () => {
+    expect(
+      isSubTableColumnConfiguredReadPretty({
+        props: {},
+        getStepParams: vi.fn(() => ({ pattern: 'readPretty' })),
+      }),
+    ).toBe(true);
+  });
+
+  it('passes the association title field to read-pretty cell field models', () => {
+    const relationValue = { id: 1, name: 'Alice' };
+    expect(
+      getSubTableColumnReadPrettyFieldProps(
+        {
+          props: {},
+          collectionField: {
+            targetCollectionTitleFieldName: 'name',
+          },
+        },
+        relationValue,
+      ),
+    ).toEqual({
+      value: relationValue,
+      titleField: 'name',
+    });
+  });
+
+  it('resolves the saved title field before the target collection default', () => {
+    expect(
+      getSubTableColumnTitleField({
+        props: { titleField: 'nickname' },
+        subModels: {
+          field: {
+            props: {
+              titleField: 'name',
+            },
+          },
+        },
+        collectionField: {
+          targetCollectionTitleFieldName: 'title',
+        },
+      }),
+    ).toBe('nickname');
+  });
+
+  it('applies the configured title field to a display-only association column', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ SubTableColumnModel, DisplayTitleFieldModel });
+    engine.registerActions({ titleField });
+
+    const rolesField = {
+      name: 'roles',
+      title: 'Roles',
+      collection: { name: 'users' },
+      targetCollectionTitleFieldName: 'name',
+      targetCollection: {
+        name: 'roles',
+        getField: vi.fn((name: string) => ({
+          name,
+          getComponentProps: () => ({ componentField: name }),
+        })),
+      },
+      isAssociationField: () => true,
+      getComponentProps: () => ({}),
+    };
+
+    const column = engine.createModel<SubTableColumnModel>({
+      use: SubTableColumnModel,
+      uid: 'roles-display-column-title-field',
+      stepParams: {
+        fieldSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'users',
+            fieldPath: 'roles',
+          },
+        },
+        subTableColumnSettings: {
+          pattern: {
+            pattern: 'readPretty',
+          },
+          fieldNames: {
+            label: 'nickname',
+          },
+        },
+      },
+    });
+    column.context.defineProperty('collectionField', { value: rolesField });
+    column.context.defineProperty('blockModel', { value: { addAppends: vi.fn() } });
+    column.setSubModel('field', {
+      use: DisplayTitleFieldModel,
+      uid: 'roles-display-field-title-field',
+    });
+
+    await column.dispatchEvent('beforeRender');
+
+    expect(column.props.titleField).toBe('nickname');
+    expect(column.props.componentField).toBe('nickname');
+  });
+
+  it('applies saved display field settings to the inner field during column beforeRender', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ SubTableColumnModel, DisplayTitleFieldModel });
+
+    const rolesCollection = {
+      name: 'roles',
+      filterTargetKey: 'id',
+    };
+    const rolesField = {
+      name: 'roles',
+      title: 'Roles',
+      collection: { name: 'users' },
+      targetCollection: rolesCollection,
+      isAssociationField: () => true,
+      getComponentProps: () => ({ titleField: 'name' }),
+    };
+
+    const column = engine.createModel<SubTableColumnModel>({
+      use: SubTableColumnModel,
+      uid: 'roles-title-column',
+      stepParams: {
+        fieldSettings: {
+          init: {
+            dataSourceKey: 'main',
+            collectionName: 'users',
+            fieldPath: 'roles',
+          },
+        },
+      },
+    });
+    column.context.defineProperty('collectionField', { value: rolesField });
+    column.context.defineProperty('blockModel', { value: { addAppends: vi.fn() } });
+
+    const field = column.setSubModel('field', {
+      use: DisplayTitleFieldModel,
+      uid: 'roles-title-display',
+      stepParams: {
+        displayFieldSettings: {
+          clickToOpen: {
+            clickToOpen: true,
+          },
+        },
+      },
+    }) as DisplayTitleFieldModel;
+
+    expect(field.props.clickToOpen).toBeUndefined();
+
+    await column.dispatchEvent('beforeRender');
+
+    expect(field.props.clickToOpen).toBe(true);
+  });
 });

package/src/flow/models/fields/ClickableFieldModel.tsx

@@ -8,12 +8,14 @@
  */
 
 import { CollectionField, tExpr } from '@nocobase/flow-engine';
+import { uid } from '@formily/shared';
 import { Tag } from 'antd';
 import { castArray, get } from 'lodash';
 import React from 'react';
 import { EllipsisWithTooltip } from '../../components/EllipsisWithTooltip';
 import { openViewFlow } from '../../flows/openViewFlow';
 import { FieldModel } from '../base/FieldModel';
+import { hasDisplayValue, normalizeDisplayValue } from '../utils/displayValueUtils';
 
 export function transformNestedData(inputData) {
   const resultArray = [];
@@ -37,9 +39,49 @@ const hasAssociationPathName = (parent: unknown): parent is { associationPathNam
 
 const hasUsableSourceId = (sourceId: unknown) => sourceId !== undefined && sourceId !== null && String(sourceId) !== '';
 
+function getParentAssociationField(model: FieldModel): CollectionField | null {
+  const parentCollectionField =
+    (model.parent as any)?.context?.collectionField || (model.parent as any)?.collectionField;
+  return parentCollectionField?.isAssociationField?.() ? parentCollectionField : null;
+}
+
+export function applyClickToOpenProps(ctx: any, params: any) {
+  const collectionField = ctx.collectionField?.isAssociationField?.()
+    ? ctx.collectionField
+    : ctx.model?.parent?.context?.collectionField || ctx.collectionField;
+  ctx.model.setProps({
+    clickToOpen: params.clickToOpen,
+    ...(collectionField?.getComponentProps?.() || {}),
+  });
+}
+
+export async function refreshClickToOpenRuntime(ctx: any) {
+  ctx.model.invalidateFlowCache?.('beforeRender', true);
+  await ctx.model.rerender?.();
+
+  const parent = ctx.model.parent;
+  if (!parent) {
+    return;
+  }
+  parent.invalidateFlowCache?.('beforeRender', true);
+  parent.setProps?.({
+    __displayFieldRefreshKey: uid(),
+  });
+  await parent.rerender?.();
+}
+
+export async function applyClickToOpenSetting(ctx: any, params: any) {
+  applyClickToOpenProps(ctx, params);
+  await refreshClickToOpenRuntime(ctx);
+}
+
 export class ClickableFieldModel extends FieldModel {
   get collectionField(): CollectionField {
-    return this.context.collectionField;
+    const collectionField = this.context.collectionField;
+    if (collectionField?.isAssociationField?.()) {
+      return collectionField;
+    }
+    return getParentAssociationField(this) || collectionField;
   }
 
   /**
@@ -150,11 +192,15 @@ export class ClickableFieldModel extends FieldModel {
 
   renderInDisplayStyle(value, record?, isToMany?, wrap?) {
     const { clickToOpen = false, displayStyle, titleField, overflowMode, disabled, ...restProps } = this.props;
-    if (value && typeof value === 'object' && restProps.target) {
+    const titleCollectionField = titleField
+      ? this.context.collectionField?.targetCollection?.getField?.(titleField) || this.context.collectionField
+      : this.context.collectionField;
+    const displayValue = normalizeDisplayValue(value, { collectionField: titleCollectionField });
+    if (!hasDisplayValue(displayValue) && value && typeof value === 'object' && restProps.target) {
       return;
     }
-    const result = this.renderComponent(value, wrap);
-    const display = record ? (value ? result : 'N/A') : result;
+    const result = this.renderComponent(displayValue, wrap);
+    const display = record ? (hasDisplayValue(displayValue) ? result : 'N/A') : result;
     const isTag = displayStyle === 'tag';
     const handleClick = (e) => {
       clickToOpen && this.onClick(e, record);
@@ -170,7 +216,7 @@ export class ClickableFieldModel extends FieldModel {
 
     if (isTag) {
       return (
-        value && (
+        hasDisplayValue(displayValue) && (
           <Tag {...restProps} style={commonStyle} onClick={handleClick} className={restProps.className}>
             {display}
           </Tag>
@@ -289,8 +335,11 @@ ClickableFieldModel.registerFlow({
       hideInSettings(ctx) {
         return ctx.disableFieldClickToOpen;
       },
+      async afterParamsSave(ctx, params) {
+        await applyClickToOpenSetting(ctx, params);
+      },
       handler(ctx, params) {
-        ctx.model.setProps({ clickToOpen: params.clickToOpen, ...ctx.collectionField.getComponentProps() });
+        applyClickToOpenProps(ctx, params);
       },
     },
   },

package/src/flow/models/fields/DisplayEnumFieldModel.tsx

@@ -48,6 +48,13 @@ export class DisplayEnumFieldModel extends ClickableFieldModel {
     return value === null || value === undefined || value === '';
   }
 
+  private isEmptyEnumValue(value: any) {
+    if (Array.isArray(value)) {
+      return value.length === 0;
+    }
+    return this.isEmpty(value);
+  }
+
   public renderComponent(value) {
     const { options = [], dataSource } = this.props;
     const currentOptions = getCurrentOptions(value, dataSource || options, fieldNames);
@@ -61,6 +68,43 @@ export class DisplayEnumFieldModel extends ClickableFieldModel {
       </Tag>
     ));
   }
+
+  /**
+   * Keep array values for multipleSelect/checkboxGroup.
+   * ClickableFieldModel will normalize arrays to joined strings, which breaks option label mapping.
+   */
+  renderInDisplayStyle(value, record?, isToMany?, wrap?) {
+    const { clickToOpen = false, ...restProps } = this.props;
+    void wrap;
+
+    const result = this.renderComponent(value);
+    const display = record ? (this.isEmptyEnumValue(value) ? 'N/A' : result) : result;
+
+    const commonStyle = {
+      cursor: clickToOpen ? 'pointer' : 'default',
+      alignItems: 'center',
+      gap: 4,
+      display: isToMany && 'inline-block',
+    };
+
+    const handleClick = (e) => {
+      clickToOpen && this.onClick(e, record);
+    };
+
+    if (clickToOpen) {
+      return (
+        <a {...restProps} style={commonStyle} onClick={handleClick}>
+          {display}
+        </a>
+      );
+    }
+
+    return (
+      <span {...restProps} style={commonStyle} className={restProps.className}>
+        {display}
+      </span>
+    );
+  }
 }
 DisplayEnumFieldModel.define({
   label: tExpr('Select'),

package/src/flow/models/fields/DisplayTitleFieldModel.tsx

@@ -12,11 +12,20 @@ import { Typography } from 'antd';
 import { castArray } from 'lodash';
 import { css } from '@emotion/css';
 import React from 'react';
-import { FieldModel } from '../base/FieldModel';
+import { openViewFlow } from '../../flows/openViewFlow';
+import { applyClickToOpenProps, applyClickToOpenSetting, ClickableFieldModel } from './ClickableFieldModel';
 
-export class DisplayTitleFieldModel extends FieldModel {
+function isParentAssociationField(ctx: any) {
+  return !!ctx.model?.parent?.context?.collectionField?.isAssociationField?.();
+}
+
+export class DisplayTitleFieldModel extends ClickableFieldModel {
   get collectionField(): CollectionField {
-    return this.context.collectionField;
+    const collectionField = this.context.collectionField;
+    if (collectionField?.isAssociationField?.()) {
+      return collectionField;
+    }
+    return (this.parent as any)?.context?.collectionField || collectionField;
   }
 
   renderComponent(value) {
@@ -55,13 +64,13 @@ export class DisplayTitleFieldModel extends FieldModel {
     };
     if (titleField) {
       const result = castArray(value).flatMap((v, idx) => {
-        const result = this.renderComponent(v?.[titleField]);
-        const node = v?.[titleField] ? result : 'N/A';
-        return idx === 0 ? [node] : [<span key={`sep-${idx}`}>, </span>, node];
+        const node = this.renderInDisplayStyle(v?.[titleField], v, Array.isArray(value));
+        const keyedNode = React.isValidElement(node) ? React.cloneElement(node, { key: `item-${idx}` }) : node;
+        return idx === 0 ? [keyedNode] : [<span key={`sep-${idx}`}>, </span>, keyedNode];
       });
       return <Typography.Text {...typographyProps}>{result}</Typography.Text>;
     } else {
-      const textContent = <Typography.Text {...typographyProps}>{this.renderComponent(value)}</Typography.Text>;
+      const textContent = <Typography.Text {...typographyProps}>{this.renderInDisplayStyle(value)}</Typography.Text>;
       return textContent;
     }
   }
@@ -75,5 +84,29 @@ DisplayTitleFieldModel.registerFlow({
     overflowMode: {
       use: 'overflowMode',
     },
+    clickToOpen: {
+      title: tExpr('Enable click-to-open'),
+      uiMode: { type: 'switch', key: 'clickToOpen' },
+      defaultParams: (ctx) => {
+        if (ctx.disableFieldClickToOpen) {
+          return {
+            clickToOpen: false,
+          };
+        }
+        return {
+          clickToOpen: ctx.collectionField?.isAssociationField?.() || isParentAssociationField(ctx),
+        };
+      },
+      hideInSettings(ctx) {
+        return ctx.disableFieldClickToOpen;
+      },
+      async afterParamsSave(ctx, params) {
+        await applyClickToOpenSetting(ctx, params);
+      },
+      handler(ctx, params) {
+        applyClickToOpenProps(ctx, params);
+      },
+    },
   },
 });
+DisplayTitleFieldModel.registerFlow(openViewFlow);

package/src/flow/models/fields/SelectFieldModel.tsx

@@ -12,25 +12,55 @@ import { Select, Tag, Tooltip } from 'antd';
 import React from 'react';
 import { FieldModel } from '../base/FieldModel';
 import { MobileSelect } from './mobile-components/MobileSelect';
+import { enumToOptions, getSelectedEnumLabels } from '../../internal/utils/enumOptionsUtils';
+
+const getOriginalEnumOptions = (model: SelectFieldModel) => {
+  const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, (text) => text) || [];
+  if (fromEnum.length > 0) {
+    return fromEnum.map((option) => ({ ...option }));
+  }
+  const current = Array.isArray(model.props.options) ? model.props.options : [];
+  return current.map((option) => ({ ...option }));
+};
 
 export class SelectFieldModel extends FieldModel {
   render() {
+    const fallbackOptions = getOriginalEnumOptions(this);
     const options = this.props.options?.map((v) => {
       return {
         ...v,
         label: this.translate(v.label),
       };
     });
+    const selectedLabels = getSelectedEnumLabels(this.props.value, fallbackOptions).map((item) => ({
+      ...item,
+      label: this.translate(item.label),
+    }));
+    const value = Array.isArray(this.props.value)
+      ? selectedLabels
+      : selectedLabels.length > 0
+        ? selectedLabels[0]
+        : this.props.value;
 
     // TODO: 移动端相关的代码需迁移到单独的插件中
     if (this.context.isMobileLayout) {
-      return <MobileSelect {...this.props} options={options} />;
+      return <MobileSelect {...this.props} options={options} displayValue={value} />;
     }
 
     return (
       <Select
         {...this.props}
+        value={value}
+        labelInValue
+        onChange={(nextValue) => {
+          if (Array.isArray(nextValue)) {
+            this.props.onChange?.(nextValue.map((item: any) => item?.value));
+            return;
+          }
+          this.props.onChange?.(nextValue?.value);
+        }}
         options={options}
+        labelRender={(item) => item.label}
         maxTagCount="responsive"
         maxTagPlaceholder={(omittedValues) => (
           <Tooltip