Merge branch 'fields-flow-modal' of github.com:nocobase/nocobase into fields-flow-modal

# Conflicts:
#	packages/core/client/src/flow/components/EllipsisWithTooltip.tsx
#	packages/core/client/src/flow/components/ExpiresRadio/index.tsx
#	packages/core/client/src/flow/components/index.tsx
#	packages/core/client/src/flow/models/data-blocks/form/components/EllipsisWithTooltip.tsx
#	packages/core/client/src/flow/models/data-blocks/form/components/ExpiresRadio/index.tsx
#	packages/core/client/src/flow/models/data-blocks/form/components/index.tsx
#	packages/core/client/src/flow/models/data-blocks/form/fields/AssociationSelectFieldModel/index.tsx
#	packages/core/client/src/flow/models/data-blocks/form/fields/DateTimeFieldModel/DateTimeFieldModel.tsx
#	packages/core/client/src/flow/models/data-blocks/form/fields/DateTimeFieldModel/UnixTimestampFieldModel.tsx
#	packages/core/client/src/flow/models/data-blocks/form/fields/MarkdownFieldModel/index.tsx
#	packages/core/client/src/flow/models/form/components/EllipsisWithTooltip.tsx
#	packages/core/client/src/flow/models/form/components/ExpiresRadio/index.tsx
#	packages/core/client/src/flow/models/form/components/index.tsx

packages/core/client/src/flow/components/ExpiresRadio/index.tsx

@@ -12,7 +12,7 @@ import dayjs from 'dayjs';
 import { connect, mapProps } from '@formily/react';
 import { useBoolean } from 'ahooks';
 import { Input, Radio, Space, theme } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 
 const date = dayjs();
 
@@ -51,6 +51,7 @@ const DateTimeFormatPreview = ({ content }) => {
 };
 
 const InternalExpiresRadio = (props) => {
+  console.log(props);
   const { onChange, defaultValue, formats, picker } = props;
   const [isCustom, { setFalse, setTrue }] = useBoolean(props.value && !formats.includes(props.value));
   const [targetValue, setTargetValue] = useState(
@@ -124,9 +125,16 @@ const InternalExpiresRadio = (props) => {
 
 const ExpiresRadio = connect(
   InternalExpiresRadio,
-  mapProps({
+  mapProps(
+    {
       dataSource: 'options',
-  }),
+    },
+    (props) => {
+      return {
+        ...props,
+      };
+    },
+  ),
 );
 
 export { ExpiresRadio, DateFormatCom };

packages/core/client/src/flow/flowSetting/DateTimeFormat.tsx

@@ -0,0 +1,169 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { css } from '@emotion/css';
+import { getPickerFormat } from '@nocobase/utils/client';
+import { ExpiresRadio, DateFormatCom } from '../components';
+
+export const DateTimeFormat = {
+  title: 'Date display format',
+  name: 'dateDisplayFormat',
+  uiSchema: {
+    picker: {
+      type: 'string',
+      title: '{{t("Picker")}}',
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+      description: '{{ t("Switching the picker, the value and default value will be cleared") }}',
+      enum: [
+        {
+          label: '{{t("Date")}}',
+          value: 'date',
+        },
+
+        {
+          label: '{{t("Month")}}',
+          value: 'month',
+        },
+        {
+          label: '{{t("Quarter")}}',
+          value: 'quarter',
+        },
+        {
+          label: '{{t("Year")}}',
+          value: 'year',
+        },
+      ],
+    },
+    dateFormat: {
+      type: 'string',
+      title: '{{t("Date format")}}',
+      'x-component': ExpiresRadio,
+      'x-decorator': 'FormItem',
+      'x-decorator-props': {},
+      'x-component-props': {
+        className: css`
+          .ant-radio-wrapper {
+            display: flex;
+            margin: 5px 0px;
+          }
+        `,
+        defaultValue: 'dddd',
+        formats: ['MMMM Do YYYY', 'YYYY-MM-DD', 'MM/DD/YY', 'YYYY/MM/DD', 'DD/MM/YYYY'],
+      },
+      enum: [
+        {
+          label: DateFormatCom({ format: 'MMMM Do YYYY' }),
+          value: 'MMMM Do YYYY',
+        },
+        {
+          label: DateFormatCom({ format: 'YYYY-MM-DD' }),
+          value: 'YYYY-MM-DD',
+        },
+        {
+          label: DateFormatCom({ format: 'MM/DD/YY' }),
+          value: 'MM/DD/YY',
+        },
+        {
+          label: DateFormatCom({ format: 'YYYY/MM/DD' }),
+          value: 'YYYY/MM/DD',
+        },
+        {
+          label: DateFormatCom({ format: 'DD/MM/YYYY' }),
+          value: 'DD/MM/YYYY',
+        },
+        {
+          label: 'custom',
+          value: 'custom',
+        },
+      ],
+      'x-reactions': [
+        (field) => {
+          const { picker } = field.form.values;
+          field.value = getPickerFormat(picker);
+          field.setComponentProps({ picker });
+        },
+      ],
+    },
+    showTime: {
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Checkbox',
+      'x-content': '{{t("Show time")}}',
+      'x-reactions': [
+        {
+          dependencies: ['picker'],
+          fulfill: {
+            state: {
+              hidden: `{{ $form.values.picker !== 'date' || collectionField.type!== 'date' }}`,
+            },
+          },
+        },
+      ],
+    },
+    timeFormat: {
+      type: 'string',
+      title: '{{t("Time format")}}',
+      'x-component': ExpiresRadio,
+      'x-decorator': 'FormItem',
+      'x-decorator-props': {
+        className: css`
+          margin-bottom: 0px;
+        `,
+      },
+      'x-component-props': {
+        className: css`
+          color: red;
+          .ant-radio-wrapper {
+            display: flex;
+            margin: 5px 0px;
+          }
+        `,
+        defaultValue: 'h:mm a',
+        formats: ['hh:mm:ss a', 'HH:mm:ss'],
+        timeFormat: true,
+      },
+      'x-reactions': [
+        (field) => {
+          const { showTime } = field.form.values || {};
+          field.hidden = !showTime;
+        },
+      ],
+      enum: [
+        {
+          label: DateFormatCom({ format: 'hh:mm:ss a' }),
+          value: 'hh:mm:ss a',
+        },
+        {
+          label: DateFormatCom({ format: 'HH:mm:ss' }),
+          value: 'HH:mm:ss',
+        },
+        {
+          label: 'custom',
+          value: 'custom',
+        },
+      ],
+    },
+  },
+  handler(ctx, params) {
+    ctx.model.flowEngine.flowSettings.registerScopes({
+      collectionField: ctx.model.collectionField,
+    });
+    ctx.model.setComponentProps({ ...params });
+  },
+  defaultParams: (ctx) => {
+    const { showTime, dateFormat, timeFormat, picker } = ctx.model.field.componentProps;
+    return {
+      picker: picker || 'date',
+      dateFormat: dateFormat || 'YYYY-MM-DD',
+      timeFormat: timeFormat,
+      showTime,
+    };
+  },
+};

packages/core/client/src/flow/index.ts

@@ -14,6 +14,7 @@ import { FlowEngineRunner } from './FlowEngineRunner';
 import { MockFlowModelRepository } from './FlowModelRepository';
 import { FlowRoute } from './FlowPage';
 import * as models from './models';
+import { DateTimeFormat } from './flowSetting/DateTimeFormat';
 
 export class PluginFlowEngine extends Plugin {
   async load() {
@@ -49,6 +50,9 @@ export class PluginFlowEngine extends Plugin {
       // Optionally, you can throw an error or handle it as needed
     }
     this.app.addProvider(FlowEngineRunner, {});
+
+    // 注册通用 flow
+    this.flowEngine.registerAction(DateTimeFormat);
   }
 }
 

packages/core/client/src/flow/models/TableColumnModel.tsx

@@ -1,289 +0,0 @@
-/**
- * This file is part of the NocoBase (R) project.
- * Copyright (c) 2020-2024 NocoBase Co., Ltd.
- * Authors: NocoBase Team.
- *
- * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
- * For more information, please refer to: https://www.nocobase.com/agreement.
- */
-
-import { EditOutlined, SettingOutlined, QuestionCircleOutlined } from '@ant-design/icons';
-import { css } from '@emotion/css';
-import { observer } from '@formily/reactive-react';
-import { AddActionModel, CollectionField, FlowModelRenderer, FlowsFloatContextMenu } from '@nocobase/flow-engine';
-import { Space, TableColumnProps, Tooltip } from 'antd';
-import React from 'react';
-import { ActionModel } from './ActionModel';
-import { FieldFlowModel, SupportedFieldInterfaces } from './FieldFlowModel';
-import { QuickEditForm } from './QuickEditForm';
-
-export class TableColumnModel extends FieldFlowModel {
-  static readonly supportedFieldInterfaces: SupportedFieldInterfaces = '*';
-
-  getColumnProps(): TableColumnProps {
-    const titleContent = (
-      <FlowsFloatContextMenu
-        model={this}
-        containerStyle={{ display: 'block', padding: '11px 8px', margin: '-11px -8px' }}
-      >
-        {this.props.title}
-      </FlowsFloatContextMenu>
-    );
-    return {
-      ...this.props,
-      title: this.props.tooltip ? (
-        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
-          {titleContent}
-          <Tooltip title={this.props.tooltip}>
-            <QuestionCircleOutlined style={{ cursor: 'pointer' }} />
-          </Tooltip>
-        </span>
-      ) : (
-        titleContent
-      ),
-      ellipsis: true,
-      onCell: (record) => ({
-        className: css`
-          .edit-icon {
-            position: absolute;
-            display: none;
-            color: #1890ff;
-            margin-left: 8px;
-            cursor: pointer;
-            top: 50%;
-            right: 8px;
-            transform: translateY(-50%);
-          }
-          &:hover {
-            background: rgba(24, 144, 255, 0.1) !important;
-          }
-          &:hover .edit-icon {
-            display: inline-flex;
-          }
-        `,
-      }),
-      render: this.render(),
-      width: this.props.width || 200,
-      onHeaderCell: () => ({
-        className: css`
-          .ant-table-cell-content {
-            display: inline !important;
-          }
-        `,
-      }),
-    };
-  }
-  setComponentProps(props) {
-    this.setProps('componentProps', { ...(this.props.componentProps || {}), ...props });
-  }
-
-  renderQuickEditButton(record) {
-    return (
-      <Tooltip title="快速编辑">
-        <EditOutlined
-          className="edit-icon"
-          onClick={async (e) => {
-            e.stopPropagation();
-            await QuickEditForm.open({
-              flowEngine: this.flowEngine,
-              collectionField: this.field as CollectionField,
-              filterByTk: record.id,
-            });
-            await this.parent.resource.refresh();
-          }}
-        />
-      </Tooltip>
-    );
-  }
-
-  render() {
-    return (value, record, index) => (
-      <>
-        {value}
-        {this.renderQuickEditButton(record)}
-      </>
-    );
-  }
-}
-
-TableColumnModel.define({
-  title: 'Table Column',
-  icon: 'TableColumn',
-  defaultOptions: {
-    use: 'TableColumnModel',
-  },
-  sort: 0,
-});
-
-const Columns = observer<any>(({ record, model, index }) => {
-  return (
-    <Space>
-      {model.mapSubModels('actions', (action: ActionModel) => {
-        const fork = action.createFork({}, `${index}`);
-        return (
-          <FlowModelRenderer
-            showFlowSettings
-            key={fork.uid}
-            model={fork}
-            extraContext={{ currentResource: model.parent.resource, currentRecord: record }}
-          />
-        );
-      })}
-    </Space>
-  );
-});
-
-export class TableActionsColumnModel extends TableColumnModel {
-  static readonly supportedFieldInterfaces: SupportedFieldInterfaces = null;
-
-  getColumnProps() {
-    return {
-      ...this.props,
-      title: (
-        <FlowsFloatContextMenu
-          model={this}
-          containerStyle={{ display: 'block', padding: '11px 8px', margin: '-11px -8px' }}
-        >
-          <Space>
-            {this.props.title || 'Actions'}
-            <AddActionModel
-              model={this}
-              subModelKey={'actions'}
-              items={() => [
-                {
-                  key: 'view',
-                  label: 'View',
-                  createModelOptions: {
-                    use: 'ViewActionModel',
-                  },
-                },
-                {
-                  key: 'link',
-                  label: 'Link',
-                  createModelOptions: {
-                    use: 'LinkActionModel',
-                  },
-                },
-                {
-                  key: 'delete',
-                  label: 'Delete',
-                  createModelOptions: {
-                    use: 'DeleteActionModel',
-                  },
-                },
-              ]}
-            >
-              <SettingOutlined />
-            </AddActionModel>
-          </Space>
-        </FlowsFloatContextMenu>
-      ),
-      render: this.render(),
-    };
-  }
-
-  render() {
-    return (value, record, index) => <Columns record={record} model={this} index={index} />;
-  }
-}
-
-TableColumnModel.registerFlow({
-  key: 'default',
-  auto: true,
-  title: 'Basic',
-  steps: {
-    step1: {
-      handler(ctx, params) {
-        if (!params.fieldPath) {
-          return;
-        }
-        if (ctx.model.field) {
-          return;
-        }
-        const field = ctx.globals.dataSourceManager.getCollectionField(params.fieldPath);
-        ctx.model.field = field;
-        ctx.model.fieldPath = params.fieldPath;
-        ctx.model.setProps('dataIndex', field.name);
-      },
-    },
-    editColumTitle: {
-      title: 'Column title',
-      uiSchema: {
-        title: {
-          'x-component': 'Input',
-          'x-decorator': 'FormItem',
-          'x-component-props': {
-            placeholder: 'Column title',
-          },
-        },
-      },
-      defaultParams: (ctx) => {
-        return {
-          title: ctx.model.field?.title,
-        };
-      },
-      handler(ctx, params) {
-        ctx.model.setProps('title', params.title || ctx.model.field?.title);
-      },
-    },
-    editTooltip: {
-      title: 'Edit tooltip',
-      uiSchema: {
-        tooltip: {
-          'x-component': 'Input.TextArea',
-          'x-decorator': 'FormItem',
-          'x-component-props': {
-            placeholder: 'Edit tooltip',
-          },
-        },
-      },
-      handler(ctx, params) {
-        ctx.model.setProps('tooltip', params.tooltip);
-      },
-    },
-    editColumnWidth: {
-      title: 'Column width',
-      uiSchema: {
-        width: {
-          'x-component': 'NumberPicker',
-          'x-decorator': 'FormItem',
-        },
-      },
-      defaultParams: {
-        width: '200',
-      },
-      handler(ctx, params) {
-        ctx.model.setProps('width', params.width);
-      },
-    },
-    fixed: {
-      title: 'Fixed',
-      uiSchema: {
-        fixed: {
-          'x-component': 'Select',
-          'x-decorator': 'FormItem',
-          enum: [
-            {
-              value: 'none',
-              label: 'Not fixed',
-            },
-            {
-              value: 'left',
-              label: 'Left fixed',
-            },
-            {
-              value: 'right',
-              label: 'Right fixed',
-            },
-          ],
-        },
-      },
-      defaultParams: {
-        fixed: 'none',
-      },
-      handler(ctx, params) {
-        ctx.model.setProps('fixed', params.fixed);
-      },
-    },
-  },
-});

packages/core/client/src/flow/models/common/utils.ts

@@ -0,0 +1,36 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { isTitleField } from '../../../data-source';
+
+export const loadTitleFieldOptions = (collectionField, dataSourceManager) => {
+  return async (field) => {
+    const form = field.form;
+    const compile = form?.designable?.compile || ((v) => v);
+
+    const collectionManager = collectionField?.collection?.collectionManager;
+    const target = collectionField?.options?.target;
+    if (!collectionManager || !target) return;
+
+    const targetCollection = collectionManager.getCollection(target);
+    const targetFields = targetCollection?.getFields?.() ?? [];
+
+    field.loading = true;
+
+    const options = targetFields
+      .filter((field) => isTitleField(dataSourceManager, field.options))
+      .map((field) => ({
+        value: field.name,
+        label: compile(field.options.uiSchema?.title) || field.name,
+      }));
+
+    field.dataSource = options;
+    field.loading = false;
+  };
+};

packages/core/client/src/flow/models/data-blocks/form/fields/DateTimeFieldModel/DateTimeFieldModel.tsx

@@ -9,7 +9,7 @@
 import { css } from '@emotion/css';
 import { DatePicker } from '@formily/antd-v5';
 import { getPickerFormat } from '@nocobase/utils/client';
-import { DateFormatCom, ExpiresRadio } from '../../components';
+import { DateFormatCom, ExpiresRadio } from '../../../../../components';
 import { FormFieldModel } from '../FormFieldModel';
 
 export class DateTimeFieldModel extends FormFieldModel {

packages/core/client/src/flow/models/data-blocks/form/fields/DateTimeFieldModel/DateTimeWithTzFieldModel.tsx

@@ -10,7 +10,7 @@ import dayjs from 'dayjs';
 import { DateTimeFieldModel } from './DateTimeFieldModel';
 
 export class DateTimeWithTzFieldModel extends DateTimeFieldModel {
-  static supportedFieldInterfaces = ['createdAt', 'datetime', 'updatedAt'];
+  static supportedFieldInterfaces = ['createdAt', 'datetime', 'updatedAt', 'unixTimestamp'];
 
   setComponentProps(componentProps) {
     super.setComponentProps({

packages/core/client/src/flow/models/data-blocks/form/fields/DateTimeFieldModel/index.ts

@@ -10,4 +10,3 @@
 export * from './DateTimeWithoutTzFieldModel';
 export * from './DateTimeWithTzFieldModel';
 export * from './DateOnlyFieldModel';
-export * from './UnixTimestampFieldModel';

packages/core/client/src/flow/models/data-blocks/form/fields/MarkdownFieldModel/index.tsx

@@ -12,7 +12,7 @@ import { connect, mapProps, mapReadPretty } from '@formily/react';
 import { Spin } from 'antd';
 import React, { useMemo } from 'react';
 import { useGlobalTheme } from '../../../../../../global-theme';
-import { EllipsisWithTooltip } from '../../components';
+import { EllipsisWithTooltip } from '../../../../../components';
 import { FormFieldModel } from '../FormFieldModel';
 import { useMarkdownStyles } from './style';
 import { convertToText, useParseMarkdown } from './util';

packages/core/client/src/flow/models/data-blocks/table/fields/AssociationSelectFieldModel/index.tsx

@@ -0,0 +1,199 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import { isArr, toArr } from '@formily/shared';
+import { getDefaultFormat, str2moment } from '@nocobase/utils/client';
+import { Tag } from 'antd';
+import React from 'react';
+import { getUniqueKeyFromCollection } from '../../../../../../collection-manager/interfaces/utils';
+import { useCompile } from '../../../../../../schema-component/hooks';
+import { loadTitleFieldOptions } from '../../../../common/utils';
+import { TableColumnModel } from '../../TableColumnModel';
+
+export function transformNestedData(inputData) {
+  const resultArray = [];
+
+  function recursiveTransform(data) {
+    if (data?.parent) {
+      const { parent } = data;
+      recursiveTransform(parent);
+    }
+    const { parent, ...other } = data;
+    resultArray.push(other);
+  }
+  if (inputData) {
+    recursiveTransform(inputData);
+  }
+  return resultArray;
+}
+
+const toValue = (value, placeholder) => {
+  if (value === null || value === undefined) {
+    return placeholder;
+  }
+  return value;
+};
+const getDatePickerLabels = (props): string => {
+  const format = getDefaultFormat(props) as string;
+  const m = str2moment(props.value, props);
+  const labels = m && m.isValid() ? m.format(format) : props.value;
+  return isArr(labels) ? labels.join('~') : labels;
+};
+
+const getLabelFormatValue = (labelUiSchema, value: any, isTag = false): any => {
+  const options = labelUiSchema?.enum;
+  if (Array.isArray(options) && value) {
+    const values = toArr(value).map((val) => {
+      const opt: any = options.find((option: any) => option.value === val);
+      if (isTag) {
+        return React.createElement(Tag, { color: opt?.color }, opt?.label);
+      }
+      return opt?.label;
+    });
+    return isTag ? values : values.join(', ');
+  }
+  switch (labelUiSchema?.['x-component']) {
+    case 'DatePicker':
+      return getDatePickerLabels({ ...labelUiSchema?.['x-component-props'], value });
+    default:
+      return value;
+  }
+};
+
+const getLabelUiSchema = (collectionManager, target, label) => {
+  const targetCollection = collectionManager.getCollection(target);
+  const targetLabelField = targetCollection.getField(label);
+  return targetLabelField.options.uiSchema;
+};
+
+const AssociationSelectReadPretty = (props) => {
+  const { value, fieldNames, collectionField, ellipsis, cm } = props;
+  const compile = useCompile();
+  const targetCollection = cm.getCollection(collectionField?.target);
+  const isTreeCollection = targetCollection?.template === 'tree';
+
+  const labelUiSchema = getLabelUiSchema(cm, collectionField?.target, fieldNames?.label);
+
+  const items = toArr(value)
+    .map((record, index) => {
+      if (!record) return null;
+
+      let rawLabel = record?.[fieldNames?.label || 'label'];
+
+      // 树形结构下转换为路径形式
+      if (isTreeCollection) {
+        const pathLabels = transformNestedData(record).map((o) => o?.[fieldNames?.label || 'label']);
+        rawLabel = pathLabels.join(' / ');
+      } else if (typeof rawLabel === 'object' && rawLabel !== null) {
+        rawLabel = JSON.stringify(rawLabel);
+      }
+
+      const compiledLabel = toValue(compile(rawLabel), 'N/A');
+      const text = getLabelFormatValue(compile(labelUiSchema), compiledLabel, true);
+      return (
+        <React.Fragment key={record?.[fieldNames.value] ?? index}>
+          {index > 0 && ','}
+          {text}
+        </React.Fragment>
+      );
+    })
+    .filter(Boolean);
+
+  return <span style={ellipsis ? null : { whiteSpace: 'normal' }}>{items}</span>;
+};
+
+export class AssociationSelectReadPrettyFieldModel extends TableColumnModel {
+  public static readonly supportedFieldInterfaces = [
+    'm2m',
+    'm2o',
+    'o2o',
+    'o2m',
+    'oho',
+    'obo',
+    'updatedBy',
+    'createdBy',
+  ];
+  render() {
+    return (value, record, index) => {
+      return (
+        <>
+          {
+            <AssociationSelectReadPretty
+              {...this.getComponentProps()}
+              collectionField={this.collectionField.options}
+              value={value}
+              cm={this.collectionField.collection.dataSource.collectionManager}
+            />
+          }
+          {this.renderQuickEditButton(record)}
+        </>
+      );
+    };
+  }
+}
+
+// //附加关系数据
+// AssociationSelectReadPrettyFieldModel.registerFlow({
+//   key: 'appendsAssociationFields',
+//   auto: true,
+//   sort: 100,
+//   steps: {
+//     step1: {
+//       handler(ctx) {
+//         const resource = ctx.model.parent.resource;
+//         const { name } = ctx.model.field.options;
+//         resource.addAppends(name);
+//         console.log(ctx.model.parent.resource, name);
+//         resource.refresh();
+//       },
+//     },
+//   },
+// });
+
+//标题字段设置 todo 复用
+AssociationSelectReadPrettyFieldModel.registerFlow({
+  key: 'fieldNames',
+  auto: true,
+  sort: 200,
+  steps: {
+    fieldNames: {
+      title: 'Title field',
+      uiSchema: {
+        label: {
+          'x-component': 'Select',
+          'x-decorator': 'FormItem',
+          'x-reactions': ['{{loadTitleFieldOptions(collectionField, dataSourceManager)}}'],
+        },
+      },
+      defaultParams: (ctx) => {
+        const { target } = ctx.model.field.options;
+        const collectionManager = ctx.model.field.collection.collectionManager;
+        const targetCollection = collectionManager.getCollection(target);
+        return {
+          label: ctx.model.getComponentProps().fieldNames?.label || targetCollection.options.titleField,
+        };
+      },
+      handler(ctx, params) {
+        const { target } = ctx.model.field.options;
+        const collectionManager = ctx.model.field.collection.collectionManager;
+        const targetCollection = collectionManager.getCollection(target);
+        ctx.model.flowEngine.flowSettings.registerScopes({
+          loadTitleFieldOptions,
+          collectionField: ctx.model.field,
+          dataSourceManager: ctx.app.dataSourceManager,
+        });
+        const filterKey = getUniqueKeyFromCollection(targetCollection.options as any);
+        const newFieldNames = {
+          value: filterKey,
+          label: params.label || targetCollection.options.titleField || filterKey,
+        };
+        ctx.model.setComponentProps({ fieldNames: newFieldNames });
+      },
+    },
+  },
+});

packages/core/client/src/flow/models/data-blocks/table/fields/CheckboxFieldMode.tsx

@@ -0,0 +1,40 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { Checkbox } from 'antd';
+import React, { FC } from 'react';
+import { TableColumnModel } from '../TableColumnModel';
+
+interface CheckboxReadPrettyProps {
+  showUnchecked?: boolean;
+  value?: boolean;
+}
+
+const ReadPretty: FC<CheckboxReadPrettyProps> = (props) => {
+  if (props.value) {
+    return <CheckOutlined style={{ color: '#52c41a' }} />;
+  }
+  return props.showUnchecked ? <CloseOutlined style={{ color: '#ff4d4f' }} /> : <Checkbox disabled />;
+};
+
+export class CheckboxFieldMode extends TableColumnModel {
+  public static readonly supportedFieldInterfaces = ['checkbox'];
+
+  render() {
+    return (value, record, index) => {
+      return (
+        <>
+          {<ReadPretty value={value} {...this.getComponentProps()} />}
+          {this.renderQuickEditButton(record)}
+        </>
+      );
+    };
+  }
+}

packages/core/client/src/flow/models/data-blocks/table/fields/DateTimeFieldModel.tsx

@@ -0,0 +1,73 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
+import { isArr } from '@formily/shared';
+import { getDefaultFormat, str2moment } from '@nocobase/utils/client';
+import cls from 'classnames';
+import dayjs from 'dayjs';
+import React from 'react';
+import { TableColumnModel } from '../TableColumnModel';
+
+const ReadPretty = (props: any) => {
+  const { value, picker = 'date' } = props;
+  const prefixCls = usePrefixCls('description-date-picker', props);
+  if (!value) {
+    return <div></div>;
+  }
+  const getLabels = () => {
+    const format = getDefaultFormat(props) as string;
+    const m = str2moment(value, props);
+    const labels = dayjs.isDayjs(m) ? m.format(format) : '';
+    return isArr(labels) ? labels.join('~') : labels;
+  };
+  return <div className={cls(prefixCls, props.className)}>{getLabels()}</div>;
+};
+export class DateTimeReadPrettyFieldModel extends TableColumnModel {
+  public static readonly supportedFieldInterfaces = [
+    'date',
+    'datetimeNoTz',
+    'createdAt',
+    'datetime',
+    'updatedAt',
+    'unixTimestamp',
+  ];
+  render() {
+    return (value, record, index) => {
+      return (
+        <>
+          <ReadPretty value={value} {...this.getComponentProps()} />
+          {this.renderQuickEditButton(record)}
+        </>
+      );
+    };
+  }
+}
+
+DateTimeReadPrettyFieldModel.registerFlow({
+  key: 'key3',
+  auto: true,
+  sort: 1000,
+  title: 'Specific properties',
+  steps: {
+    dateFormat: {
+      use: 'dateDisplayFormat',
+      title: 'Date display format',
+      defaultParams: (ctx) => {
+        const { showTime, dateFormat, timeFormat, picker } = ctx.model.getComponentProps();
+        return {
+          picker: picker || 'date',
+          dateFormat: dateFormat || 'YYYY-MM-DD',
+          timeFormat: timeFormat,
+          showTime,
+        };
+      },
+    },
+  },
+});

packages/core/client/src/flow/models/data-blocks/table/fields/NumberFieldModel.tsx

@@ -7,15 +7,15 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React from 'react';
 import { useForm } from '@formily/react';
 import { Select } from 'antd';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { TableColumnModel } from '../../TableColumnModel';
+import { TableColumnModel } from '../TableColumnModel';
 import { InputNumberReadPretty } from '../components/InputNumberReadPretty';
 
-export class NumberColumnModel extends TableColumnModel {
+export class NumberReadPrettyFieldModel extends TableColumnModel {
-  public static readonly supportedFieldInterfaces = ['number'];
+  public static readonly supportedFieldInterfaces = ['number', 'integer'];
   render() {
     return (value, record, index) => {
       return (
@@ -45,7 +45,7 @@ const UnitConversion = () => {
   );
 };
 
-NumberColumnModel.registerFlow({
+NumberReadPrettyFieldModel.registerFlow({
   key: 'format',
   sort: 100,
   title: 'Specific properties',

packages/core/client/src/flow/models/data-blocks/table/fields/PercentFieldModel.tsx

@@ -7,17 +7,28 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { isNum } from '@formily/shared';
+import * as math from 'mathjs';
 import React from 'react';
-import { TableColumnModel } from '../../TableColumnModel';
+import { TableColumnModel } from '../TableColumnModel';
 import { InputNumberReadPretty } from '../components/InputNumberReadPretty';
 
-export class PercentColumnModel extends TableColumnModel {
+const isNumberLike = (index: any): index is number => isNum(index) || /^-?\d+(\.\d+)?$/.test(index);
+
+const toValue = (value: any, callback: (v: number) => number) => {
+  if (isNumberLike(value)) {
+    return math.round(callback(value), 9);
+  }
+  return null;
+};
+export class PercentReadPrettyFieldModel extends TableColumnModel {
   public static readonly supportedFieldInterfaces = ['percent'];
   render() {
     return (value, record, index) => {
+      const val = toValue(value, (v) => v * 100);
       return (
         <>
-          <InputNumberReadPretty value={value} />
+          <InputNumberReadPretty value={val} addonAfter="%" />
           {this.renderQuickEditButton(record)}
         </>
       );

packages/core/client/src/flow/models/data-blocks/table/fields/RadioGroupFieldModel.tsx

@@ -0,0 +1,46 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Tag } from 'antd';
+import React, { FC } from 'react';
+import { TableColumnModel } from '../TableColumnModel';
+
+const ReadPretty: FC<any> = (props) => {
+  const { value, dataSource } = props;
+
+  if (!value) {
+    return;
+  }
+  return (
+    <div>
+      {dataSource
+        .filter((option) => option.value == value)
+        .map((option, key) => (
+          <Tag key={key} color={option.color} icon={option.icon}>
+            {option.label}
+          </Tag>
+        ))}
+    </div>
+  );
+};
+
+export class RadioGroupReadPrettyFieldModel extends TableColumnModel {
+  public static readonly supportedFieldInterfaces = ['radioGroup'];
+
+  render() {
+    return (value, record, index) => {
+      return (
+        <>
+          {<ReadPretty value={value} {...this.getComponentProps()} />}
+          {this.renderQuickEditButton(record)}
+        </>
+      );
+    };
+  }
+}

packages/core/client/src/flow/models/data-blocks/table/fields/SelectFieldModel.tsx

@@ -0,0 +1,43 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Tag } from 'antd';
+import React from 'react';
+import { TableColumnModel } from '../TableColumnModel';
+import { getCurrentOptions } from '../utils/utils';
+
+const fieldNames = {
+  label: 'label',
+  value: 'value',
+  color: 'color',
+  icon: 'icon',
+};
+export class SelectReadPrettyFieldModel extends TableColumnModel {
+  public static readonly supportedFieldInterfaces = ['select', 'multipleSelect'];
+
+  render() {
+    return (value, record, index) => {
+      const { dataSource } = this.getComponentProps();
+      const currentOptions = getCurrentOptions(value, dataSource, fieldNames);
+      const content =
+        value &&
+        currentOptions.map((option, index) => (
+          <Tag key={index} color={option[fieldNames.color]} icon={option.icon}>
+            {option[fieldNames.label]}
+          </Tag>
+        ));
+      return (
+        <>
+          {content}
+          {this.renderQuickEditButton(record)}
+        </>
+      );
+    };
+  }
+}

packages/core/client/src/flow/models/data-blocks/table/fields/index.tsx

@@ -7,6 +7,10 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-export * from './SelectColumnModel';
+export * from './SelectFieldModel';
-export * from './NumberColumnModel';
+export * from './NumberFieldModel';
-export * from './PercentColumnModel';
+export * from './PercentFieldModel';
+export * from './AssociationSelectFieldModel';
+export * from './CheckboxFieldMode';
+export * from './RadioGroupFieldModel';
+export * from './DateTimeFieldModel';

packages/core/client/src/flow/models/index.ts

@@ -24,6 +24,7 @@ export * from './data-blocks/form/fields';
 export * from './data-blocks/form/FormActionModel';
 export * from './data-blocks/form/FormModel';
 export * from './data-blocks/form/QuickEditForm';
+export * from './data-blocks/table/fields';
 export * from './data-blocks/table/TableActionsColumnModel';
 export * from './data-blocks/table/TableColumnModel';
 export * from './data-blocks/table/TableModel';

packages/core/client/src/flow/models/table/fields/SelectColumnModel.tsx

@@ -1,69 +0,0 @@
-/**
- * This file is part of the NocoBase (R) project.
- * Copyright (c) 2020-2024 NocoBase Co., Ltd.
- * Authors: NocoBase Team.
- *
- * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
- * For more information, please refer to: https://www.nocobase.com/agreement.
- */
-
-import React from 'react';
-import { Tag } from 'antd';
-import { TableColumnModel } from '../../TableColumnModel';
-import { getCurrentOptions } from '../utils/utils';
-
-export class SelectTableColumnModel extends TableColumnModel {
-  public static readonly supportedFieldInterfaces = ['select', 'multipleSelect'];
-  dataSource;
-  fieldNames: { label: string; value: string; color?: string; icon?: any };
-
-  setDataSource(dataSource) {
-    this.dataSource = dataSource;
-  }
-  getDataSource() {
-    return this.dataSource;
-  }
-  setFieldNames(fieldNames) {
-    this.fieldNames = fieldNames;
-  }
-  getFieldNames() {
-    return this.fieldNames;
-  }
-  render() {
-    return (value, record, index) => {
-      const currentOptions = getCurrentOptions(value, this.dataSource, this.fieldNames);
-      const content =
-        value &&
-        currentOptions.map((option, index) => (
-          <Tag key={index} color={option[this.fieldNames.color]} icon={option.icon}>
-            {option[this.fieldNames.label]}
-          </Tag>
-        ));
-      return (
-        <>
-          {content}
-          {this.renderQuickEditButton(record)}
-        </>
-      );
-    };
-  }
-}
-
-SelectTableColumnModel.registerFlow({
-  key: 'options',
-  auto: true,
-  sort: 100,
-  steps: {
-    step1: {
-      handler(ctx, params) {
-        ctx.model.setDataSource(ctx.model.field.enum);
-        ctx.model.setFieldNames({
-          label: 'label',
-          value: 'value',
-          color: 'color',
-          icon: 'icon',
-        });
-      },
-    },
-  },
-});