@nocobase/client 0.7.0-alpha.26 → 0.7.0-alpha.29

package/src/locale/zh_CN.ts

@@ -318,6 +318,7 @@ export default {
 
   'Skip required validation': '跳过必填校验',
   'Form values': '表单值',
+  'Fields values': '字段值',
   'When submitting the following fields, the saved values are': '提交以下字段时，保存的值为',
   'After successful submission': '提交成功后',
   'Then': '然后',
@@ -407,25 +408,24 @@ export default {
 
   // plugins/workflow
   'Workflow': '工作流',
-  'Configure workflow': '流程配置',
-  'Executions': '执行历史',
+  'Execution History': '执行历史',
   'Trigger type': '触发方式',
   'Description': '描述',
   'Status': '状态',
   'Enabled': '启用',
   'Disabled': '禁用',
-  'Trigger configuration': '触发器配置',
   'Load failed': '加载失败',
 
-  'Model event': '数据表事件',
+  'Trigger': '触发器',
+  'Collection event': '数据表事件',
   'Trigger on': '触发时机',
   'After record added': '新增数据后',
   'After record updated': '更新数据后',
   'After record added or updated': '新增或更新数据后',
   'After record deleted': '删除数据后',
   'Changed fields': '发生变动的字段',
-  'Select the fields which changed will trigger the event only': '只有被选中的某个字段发生变动时才会触发。如果不选择，则表示任何字段变动时都会触发。新增或删除数据时，任意字段都被认为发生变动。',
-  'Match condition': '满足条件',
+  'Triggered only if one of the selected fields changes. If unselected, it means that it will be triggered when any field changes. When record is added or deleted, any field is considered to have been changed.': '只有被选中的某个字段发生变动时才会触发。如果不选择，则表示任何字段变动时都会触发。新增或删除数据时，任意字段都被认为发生变动。',
+  'Only triggers when match conditions': '满足以下条件才触发',
 
   'End': '结束',
 
@@ -445,7 +445,6 @@ export default {
   'Failed': '失败',
   'Canceled': '已取消',
 
-  'Node configuration': '配置节点',
   'This node contains branches, deleting will also be preformed to them, are you sure?': '节点包含分支，将同时删除其所有分支下的子节点，确定继续？',
 
   'Control': '流程控制',
@@ -456,8 +455,29 @@ export default {
   'Calculation': '运算',
   'Configure calculation': '配置运算',
   'Calculation result': '运算结果',
+  'True': '真',
+  'False': '假',
+
+  'Condition': '条件判断',
+  'Mode': '模式',
+  'Continue when "Yes"': '“是”则继续',
+  'Branch into "Yes" and "No"': '“是”和“否”分别继续',
+  'Conditions': '条件配置',
+
+  'Parallel branch': '分支',
+  'All succeeded': '全部成功',
+  'Any succeeded': '任意成功',
+  'Continue after all branches succeeded': '全部分支都成功后才能继续',
+  'Continue after any branch succeeded': '任意分支成功后就继续',
 
   'Create record': '新增数据',
   'Update record': '更新数据',
   'Query record': '查询数据',
+  'Multiple records': '多条数据',
+  'Please select collection first': '请先选择数据表',
+  'Only update records matching conditions': '只更新满足条件的数据',
+  'Fields that are not assigned a value will be set to the default value, and those that do not have a default value are set to null.': '未被赋值的字段将被设置为默认值，没有默认值的设置为空值。',
+  'Unsaved changes': '未保存修改',
+  'Are you sure you don\'t want to save?': '你确定不保存修改吗？',
+  'Dragging': '拖拽中',
 }

package/src/schema-component/antd/action/Action.Designer.tsx

@@ -11,7 +11,7 @@ export const ActionDesigner = (props) => {
   const { t } = useTranslation();
   const isPopupAction = ['create', 'update', 'view'].includes(fieldSchema['x-action'] || '');
   return (
-    <GeneralSchemaDesigner {...props}>
+    <GeneralSchemaDesigner {...props} disableInitializer>
       <SchemaSettings.ModalItem
         title={t('Edit button')}
         schema={
@@ -65,7 +65,7 @@ export const ActionDesigner = (props) => {
             { label: t('Drawer'), value: 'drawer' },
             { label: t('Dialog'), value: 'modal' },
           ]}
-          value={field.componentProps.openMode}
+          value={fieldSchema?.['x-component-props']?.['openMode']}
           onChange={(value) => {
             field.componentProps.openMode = value;
             fieldSchema['x-component-props']['openMode'] = value;

package/src/schema-component/antd/action/Action.Drawer.tsx

@@ -1,15 +1,17 @@
 import { css } from '@emotion/css';
 import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
-import { Drawer } from 'antd';
+import { Drawer, Modal as AntdModal } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
 import { useActionContext } from './hooks';
 import { ComposedActionDrawer } from './types';
 
 export const ActionDrawer: ComposedActionDrawer = observer((props) => {
   const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
-  const { visible, setVisible } = useActionContext();
+  const { t } = useTranslation();
+  const { visible, setVisible, formValueChanged, setFormValueChanged } = useActionContext();
   const schema = useFieldSchema();
   const field = useField();
   const footerSchema = schema.reduceProperties((buf, s) => {
@@ -18,6 +20,21 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
     }
     return buf;
   });
+
+  const closeHandler = () => {
+    if (!formValueChanged) {
+      setVisible(false);
+      return;
+    }
+    AntdModal.confirm({
+      title: t('Unsaved changes'),
+      content: t("Are you sure you don't want to save?"),
+      async onOk() {
+        setFormValueChanged(false);
+        setVisible(false);
+      },
+    });
+  };
   return (
     <>
       {createPortal(
@@ -32,7 +49,7 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
             {...others}
             destroyOnClose
             visible={visible}
-            onClose={() => setVisible(false)}
+            onClose={closeHandler}
             className={classNames(
               others.className,
               css`

package/src/schema-component/antd/action/Action.tsx

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { useActionContext } from '../..';
 import { Icon } from '../../../icon';
 import { SortableItem } from '../../common';
-import { useDesigner } from '../../hooks';
+import { useCompile, useDesigner } from '../../hooks';
 import { useProps } from '../../hooks/useProps';
 import ActionContainer from './Action.Container';
 import { ActionDesigner } from './Action.Designer';
@@ -69,7 +69,7 @@ export const Action: ComposedAction = observer((props: any) => {
   const {
     popover,
     confirm,
-    openMode,
+    // openMode,
     containerRefKey,
     component,
     useAction = useA,
@@ -80,14 +80,18 @@ export const Action: ComposedAction = observer((props: any) => {
   } = props;
   const { onClick } = useProps(props);
   const [visible, setVisible] = useState(false);
+  const [formValueChanged, setFormValueChanged] = useState(false);
   const Designer = useDesigner();
-  const field = useField();
+  const field = useField<any>();
   const { run } = useAction();
   const fieldSchema = useFieldSchema();
+  const compile = useCompile();
   const designerProps = fieldSchema['x-designer-props'];
+  const openMode = fieldSchema?.['x-component-props']?.['openMode'];
   const renderButton = () => (
     <SortableItem
       {...others}
+      loading={field?.data?.loading}
       icon={<Icon type={icon} />}
       onClick={(e: React.MouseEvent) => {
         e.preventDefault();
@@ -109,12 +113,22 @@ export const Action: ComposedAction = observer((props: any) => {
       component={component || Button}
       className={classnames(className, actionDesignerCss)}
     >
-      {field.title}
+      {compile(fieldSchema.title)}
       <Designer {...designerProps} />
     </SortableItem>
   );
   return (
-    <ActionContext.Provider value={{ button: renderButton(), visible, setVisible, openMode, containerRefKey }}>
+    <ActionContext.Provider
+      value={{
+        button: renderButton(),
+        visible,
+        setVisible,
+        formValueChanged,
+        setFormValueChanged,
+        openMode,
+        containerRefKey,
+      }}
+    >
       {popover && <RecursionField basePath={field.address} onlyRenderProperties schema={fieldSchema} />}
       {!popover && renderButton()}
       {!popover && props.children}

package/src/schema-component/antd/action/context.tsx

@@ -8,4 +8,6 @@ export interface ActionContextProps {
   setVisible?: (v: boolean) => void;
   openMode?: 'drawer' | 'modal' | 'page';
   containerRefKey?: string;
+  formValueChanged?: boolean;
+  setFormValueChanged?: (v: boolean) => void;
 }

package/src/schema-component/antd/filter/Filter.Action.Designer.tsx

@@ -31,7 +31,7 @@ export const FilterActionDesigner = (props) => {
   const { t } = useTranslation();
   const nonfilterable = fieldSchema?.['x-component-props']?.nonfilterable || [];
   return (
-    <GeneralSchemaDesigner {...props}>
+    <GeneralSchemaDesigner {...props} disableInitializer>
       <SchemaSettings.ItemGroup title={t('Filterable fields')}>
         {fields.map((field) => {
           const checked = !nonfilterable.includes(field.name);

package/src/schema-component/antd/filter/FilterGroup.tsx

@@ -23,15 +23,19 @@ export const FilterGroup = connect((props) => {
   return (
     <FilterLogicContext.Provider value={logic}>
       <div
-        style={bordered ? {
-          position: 'relative',
-          border: '1px dashed #dedede',
-          padding: 14,
-          marginBottom: 8,
-        } : {
-          position: 'relative',
-          marginBottom: 8,
-        }}
+        style={
+          bordered
+            ? {
+                position: 'relative',
+                border: '1px dashed #dedede',
+                padding: 14,
+                marginBottom: 8,
+              }
+            : {
+                position: 'relative',
+                marginBottom: 8,
+              }
+        }
       >
         {remove && (
           <a>
@@ -40,6 +44,7 @@ export const FilterGroup = connect((props) => {
                 position: 'absolute',
                 right: 10,
                 top: 10,
+                color: '#bfbfbf',
               }}
               onClick={() => remove()}
             />

package/src/schema-component/antd/filter/FilterItem.tsx

@@ -49,7 +49,7 @@ export const FilterItem = observer((props: any) => {
             },
           })}
         <a>
-          <CloseCircleOutlined onClick={() => remove()} />
+          <CloseCircleOutlined onClick={() => remove()} style={{ color: '#bfbfbf' }} />
         </a>
       </Space>
     </div>

package/src/schema-component/antd/form-v2/Form.tsx

@@ -1,8 +1,10 @@
 import { FormLayout } from '@formily/antd';
-import { createForm, Field } from '@formily/core';
+import { createForm, Field, onFormInputChange } from '@formily/core';
 import { FieldContext, FormContext, observer, RecursionField, useField, useFieldSchema } from '@formily/react';
+import { uid } from '@nocobase/utils';
 import { Spin } from 'antd';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { useActionContext } from '..';
 import { useAttach, useComponent } from '../..';
 import { useProps } from '../../hooks/useProps';
 
@@ -53,13 +55,37 @@ const FormDecorator: React.FC<FormProps> = (props) => {
 };
 
 const WithForm = (props) => {
+  const { form } = props;
   const fieldSchema = useFieldSchema();
+  const { setFormValueChanged } = useActionContext();
+  useEffect(() => {
+    const id = uid();
+    form.addEffects(id, () => {
+      onFormInputChange((form) => {
+        setFormValueChanged(true);
+      });
+    });
+    return () => {
+      form.removeEffects(id);
+    };
+  }, []);
   return fieldSchema['x-decorator'] === 'Form' ? <FormDecorator {...props} /> : <FormComponent {...props} />;
 };
 
 const WithoutForm = (props) => {
   const fieldSchema = useFieldSchema();
-  const form = useMemo(() => createForm(), []);
+  const { setFormValueChanged } = useActionContext();
+  const form = useMemo(
+    () =>
+      createForm({
+        effects() {
+          onFormInputChange((form) => {
+            setFormValueChanged(true);
+          });
+        },
+      }),
+    [],
+  );
   return fieldSchema['x-decorator'] === 'Form' ? (
     <FormDecorator form={form} {...props} />
   ) : (

package/src/schema-component/antd/grid/Grid.tsx

@@ -9,6 +9,7 @@ import { DndContext } from '../../common/dnd-context';
 
 const GridRowContext = createContext(null);
 const GridColContext = createContext(null);
+const GridContext = createContext<any>({});
 
 const ColDivider = (props) => {
   const { isOver, setNodeRef } = useDroppable({
@@ -147,6 +148,14 @@ const DndWrapper = (props) => {
   return <DndContext {...props.dndContext}>{props.children}</DndContext>;
 };
 
+export const useGridContext = () => {
+  return useContext(GridContext);
+};
+
+export const useGridRowContext = () => {
+  return useContext(GridRowContext);
+}
+
 export const Grid: any = observer((props: any) => {
   const field = useField();
   const fieldSchema = useFieldSchema();
@@ -154,26 +163,28 @@ export const Grid: any = observer((props: any) => {
   const addr = field.address.toString();
   const rows = useRowProperties();
   return (
-    <div className={'nb-grid'} style={{ position: 'relative' }}>
-      <DndWrapper dndContext={props.dndContext}>
-        <RowDivider
-          id={`${addr}_0`}
-          data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterBegin', schema: fieldSchema }}
-        />
-        {rows.map((schema, index) => {
-          return (
-            <React.Fragment key={schema.name}>
-              <RecursionField name={schema.name} schema={schema} />
-              <RowDivider
-                id={`${addr}_${index + 1}`}
-                data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterEnd', schema }}
-              />
-            </React.Fragment>
-          );
-        })}
-      </DndWrapper>
-      {render()}
-    </div>
+    <GridContext.Provider value={{ fieldSchema, renderSchemaInitializer: render }}>
+      <div className={'nb-grid'} style={{ position: 'relative' }}>
+        <DndWrapper dndContext={props.dndContext}>
+          <RowDivider
+            id={`${addr}_0`}
+            data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterBegin', schema: fieldSchema }}
+          />
+          {rows.map((schema, index) => {
+            return (
+              <React.Fragment key={schema.name}>
+                <RecursionField name={schema.name} schema={schema} />
+                <RowDivider
+                  id={`${addr}_${index + 1}`}
+                  data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterEnd', schema }}
+                />
+              </React.Fragment>
+            );
+          })}
+        </DndWrapper>
+        {render()}
+      </div>
+    </GridContext.Provider>
   );
 });
 

package/src/schema-component/antd/menu/Menu.Designer.tsx

@@ -223,35 +223,43 @@ export const MenuDesigner = () => {
       });
     });
   };
+  const schema = {
+    type: 'object',
+    title: t('Edit menu item'),
+    properties: {
+      title: {
+        title: t('Menu item title'),
+        required: true,
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+        'x-component-props': {},
+      },
+      icon: {
+        title: t('Menu item icon'),
+        'x-component': 'IconPicker',
+        'x-decorator': 'FormItem',
+      },
+    },
+  };
+  const initialValues = {
+    title: field.title,
+    icon: field.componentProps.icon,
+  };
+  if (fieldSchema['x-component'] === 'Menu.URL') {
+    schema.properties['href'] = {
+      title: t('Link'),
+      'x-component': 'Input',
+      'x-decorator': 'FormItem',
+    };
+    initialValues['href'] = field.componentProps.href;
+  }
   return (
     <GeneralSchemaDesigner>
       <SchemaSettings.ModalItem
         title={t('Edit')}
-        schema={
-          {
-            type: 'object',
-            title: t('Edit menu item'),
-            properties: {
-              title: {
-                title: t('Menu item title'),
-                required: true,
-                'x-decorator': 'FormItem',
-                'x-component': 'Input',
-                'x-component-props': {},
-              },
-              icon: {
-                title: t('Menu item icon'),
-                'x-component': 'IconPicker',
-                'x-decorator': 'FormItem',
-              },
-            },
-          } as ISchema
-        }
-        initialValues={{
-          title: field.title,
-          icon: field.componentProps.icon,
-        }}
-        onSubmit={({ title, icon }) => {
+        schema={schema as ISchema}
+        initialValues={initialValues}
+        onSubmit={({ title, icon, href }) => {
           const schema = {
             ['x-uid']: fieldSchema['x-uid'],
           };
@@ -262,9 +270,11 @@ export const MenuDesigner = () => {
             refresh();
           }
           field.componentProps.icon = icon;
-          schema['x-component-props'] = { icon };
+          field.componentProps.href = href;
+          schema['x-component-props'] = { icon, href };
           fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
           fieldSchema['x-component-props']['icon'] = icon;
+          fieldSchema['x-component-props']['href'] = href;
           dn.emit('patch', {
             schema,
           });

package/src/schema-component/antd/menu/Menu.tsx

@@ -5,7 +5,7 @@ import {
   Schema,
   SchemaExpressionScopeContext,
   useField,
-  useFieldSchema
+  useFieldSchema,
 } from '@formily/react';
 import { Menu as AntdMenu } from 'antd';
 import React, { createContext, useContext, useEffect, useState } from 'react';
@@ -386,7 +386,17 @@ Menu.URL = observer((props) => {
     >
       <SortableItem className={designerCss}>
         <Icon type={icon} />
-        {field.title}
+        <span
+          className={css`
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+            width: 100%;
+            vertical-align: middle;
+          `}
+        >
+          {field.title}
+        </span>
         <Designer />
       </SortableItem>
     </AntdMenu.Item>

package/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx

@@ -7,6 +7,7 @@ import { BlockAssociationContext } from '../../../block-provider';
 import { CollectionProvider, useCollection } from '../../../collection-manager';
 import { RecordProvider } from '../../../record-provider';
 import { FormProvider } from '../../core';
+import { useCompile } from '../../hooks';
 import { ActionContext } from '../action';
 import { useFieldNames } from './useFieldNames';
 
@@ -18,6 +19,7 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
   const { getField } = useCollection();
   const collectionField = getField(fieldSchema.name);
   const [record, setRecord] = useState({});
+  const compile = useCompile();
   return collectionField ? (
     <div>
       <BlockAssociationContext.Provider value={`${collectionField.collectionName}.${collectionField.name}`}>
@@ -34,7 +36,7 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
                       setRecord(record);
                     }}
                   >
-                    {record?.[fieldNames?.label || 'label']}
+                    {compile(record?.[fieldNames?.label || 'label'])}
                   </a>
                 </span>
               );

package/src/schema-component/antd/table/Table.Void.Designer.tsx

@@ -39,7 +39,7 @@ export const TableVoidDesigner = () => {
         onChange={(dragSort) => {
           field.decoratorProps.dragSort = dragSort;
           fieldSchema['x-decorator-props'].dragSort = dragSort;
-          ctx.run({ ...ctx.params?.[0], sort: defaultSort });
+          ctx.run({ ...ctx.params?.[0], sort: 'sort' });
           dn.emit('patch', {
             schema: {
               ['x-uid']: fieldSchema['x-uid'],

package/src/schema-component/antd/table-v2/Table.Column.Designer.tsx

@@ -32,7 +32,7 @@ export const TableColumnDesigner = (props) => {
     fieldSchema?.['x-component-props']?.['fieldNames'] || uiSchema?.['x-component-props']?.['fieldNames'];
   const options = useLabelFields(collectionField?.target);
   return (
-    <GeneralSchemaDesigner>
+    <GeneralSchemaDesigner disableInitializer>
       <SchemaSettings.ModalItem
         title={t('Custom column title')}
         schema={

package/src/schema-component/antd/table-v2/TableBlockDesigner.tsx

@@ -10,7 +10,7 @@ import { useSchemaTemplate } from '../../../schema-templates';
 import { useDesignable } from '../../hooks';
 
 export const TableBlockDesigner = () => {
-  const { name, title } = useCollection();
+  const { name, title, sortable } = useCollection();
   const field = useField();
   const fieldSchema = useFieldSchema();
   const dataSource = useCollectionFilterOptions(name);
@@ -41,7 +41,7 @@ export const TableBlockDesigner = () => {
         onChange={(dragSort) => {
           field.decoratorProps.dragSort = dragSort;
           fieldSchema['x-decorator-props'].dragSort = dragSort;
-          service.run({ ...service.params?.[0], sort: defaultSort });
+          service.run({ ...service.params?.[0], sort: 'sort' });
           dn.emit('patch', {
             schema: {
               ['x-uid']: fieldSchema['x-uid'],

package/src/schema-component/antd/table-v2/TableSelectorDesigner.tsx

@@ -34,7 +34,7 @@ export const TableSelectorDesigner = () => {
   const template = useSchemaTemplate();
   const { dragSort } = field.decoratorProps;
   return (
-    <GeneralSchemaDesigner template={template} title={title || name}>
+    <GeneralSchemaDesigner template={template} title={title || name} disableInitializer>
       <SchemaSettings.ModalItem
         title={t('Set the data scope')}
         schema={

package/src/schema-component/antd/tabs/Tabs.Designer.tsx

@@ -10,7 +10,7 @@ export const TabsDesigner = () => {
   const { dn } = useDesignable();
   const { t } = useTranslation();
   return (
-    <GeneralSchemaDesigner>
+    <GeneralSchemaDesigner disableInitializer>
       <SchemaSettings.ModalItem
         title={t('Edit')}
         schema={

package/src/schema-component/common/dnd-context/index.tsx

@@ -57,6 +57,7 @@ const useDragEnd = (props?: any) => {
 };
 
 export const DndContext = observer((props: Props) => {
+  const { t } = useTranslation();
   return (
     <DndKitContext collisionDetection={rectIntersection} {...props} onDragEnd={useDragEnd(props)}>
       <DragOverlay
@@ -65,7 +66,7 @@ export const DndContext = observer((props: Props) => {
           easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
         }}
       >
-        <span style={{ whiteSpace: 'nowrap' }}>拖拽中</span>
+        <span style={{ whiteSpace: 'nowrap' }}>{t('Dragging')}</span>
       </DragOverlay>
       {props.children}
     </DndKitContext>

package/src/schema-initializer/buttons/BlockInitializers.tsx

@@ -9,7 +9,7 @@ export const BlockInitializers = {
     {
       key: 'dataBlocks',
       type: 'itemGroup',
-      title: 'Data blocks',
+      title: '{{t("Data blocks")}}',
       children: [
         {
           key: 'table',

package/src/schema-initializer/buttons/CreateFormBlockInitializers.tsx

@@ -5,11 +5,14 @@ import { gridRowColWrap } from '../utils';
 
 export const CreateFormBlockInitializers = (props: any) => {
   const { t } = useTranslation();
+  const { insertPosition, component } = props;
   return (
     <SchemaInitializer.Button
       wrap={gridRowColWrap}
-      title={t('Add block')}
+      title={component ? null : t('Add block')}
       icon={'PlusOutlined'}
+      insertPosition={insertPosition}
+      component={component}
       items={[
         {
           type: 'itemGroup',

package/src/schema-initializer/buttons/FormItemInitializers.tsx

@@ -6,6 +6,7 @@ import { gridRowColWrap, useFormItemInitializerFields } from '../utils';
 // 表单里配置字段
 export const FormItemInitializers = (props: any) => {
   const { t } = useTranslation();
+  const { insertPosition, component } = props;
   return (
     <SchemaInitializer.Button
       wrap={gridRowColWrap}
@@ -35,8 +36,9 @@ export const FormItemInitializers = (props: any) => {
           },
         },
       ]}
-    >
-      {t('Configure fields')}
-    </SchemaInitializer.Button>
+      insertPosition={insertPosition}
+      component={component}
+      title={component ? null : t('Configure fields')}
+    />
   );
 };