feat: page tabs (#1261)

* feat: page tabs

* feat: hide page title

* fix: style

packages/core/client/src/schema-component/antd/menu/MenuItemInitializers/index.tsx

@@ -1,5 +1,6 @@
 import { FormDialog, FormLayout } from '@formily/antd';
 import { SchemaOptionsContext } from '@formily/react';
+import { uid } from '@formily/shared';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SchemaComponent, SchemaComponentOptions } from '../../..';
@@ -151,7 +152,7 @@ export const PageMenuItem = itemWrap((props) => {
               'x-component': 'Page',
               'x-async': true,
               properties: {
-                grid: {
+                [uid()]: {
                   type: 'void',
                   'x-component': 'Grid',
                   'x-initializer': 'BlockInitializers',

packages/core/client/src/schema-component/antd/page/Page.tsx

@@ -1,23 +1,262 @@
-import { useField } from '@formily/react';
-import { PageHeader as AntdPageHeader } from 'antd';
-import React, { useEffect } from 'react';
+import { css } from '@emotion/css';
+import { FormDialog, FormLayout } from '@formily/antd';
+import { RecursionField, SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
+import { Button, PageHeader as AntdPageHeader, Spin, Tabs } from 'antd';
+import classNames from 'classnames';
+import React, { useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory, useLocation } from 'react-router-dom';
 import { useDocumentTitle } from '../../../document-title';
-import { useCompile } from '../../hooks';
+import { Icon } from '../../../icon';
+import { SchemaComponent, SchemaComponentOptions } from '../../core';
+import { useCompile, useDesignable } from '../../hooks';
+import { PageDesigner, PageTabDesigner } from './PageTabDesigner';
+
+const designerCss = css`
+  position: relative;
+  &:hover {
+    > .general-schema-designer {
+      display: block;
+    }
+  }
+  &.nb-action-link {
+    > .general-schema-designer {
+      top: -10px;
+      bottom: -10px;
+      left: -10px;
+      right: -10px;
+    }
+  }
+  > .general-schema-designer {
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: none;
+    background: rgba(241, 139, 98, 0.06);
+    border: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    > .general-schema-designer-icons {
+      position: absolute;
+      right: 2px;
+      top: 2px;
+      line-height: 16px;
+      pointer-events: all;
+      .ant-space-item {
+        background-color: #f18b62;
+        color: #fff;
+        line-height: 16px;
+        width: 16px;
+        padding-left: 1px;
+      }
+    }
+  }
+`;
+
+const pageDesignerCss = css`
+  position: relative;
+  z-index: 20;
+  padding-top: 1px;
+  &:hover {
+    > .general-schema-designer {
+      display: block;
+    }
+  }
+  .ant-page-header {
+    z-index: 1;
+    position: relative;
+  }
+  > .general-schema-designer {
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: none;
+    /* background: rgba(241, 139, 98, 0.06); */
+    border: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    > .general-schema-designer-icons {
+      z-index: 9999;
+      position: absolute;
+      right: 2px;
+      top: 2px;
+      line-height: 16px;
+      pointer-events: all;
+      .ant-space-item {
+        background-color: #f18b62;
+        color: #fff;
+        line-height: 16px;
+        width: 16px;
+        padding-left: 1px;
+      }
+    }
+  }
+`;
 
 export const Page = (props) => {
   const { children, ...others } = props;
   const field = useField();
   const compile = useCompile();
   const { title, setTitle } = useDocumentTitle();
+  const fieldSchema = useFieldSchema();
+  const history = useHistory();
+  const dn = useDesignable();
   useEffect(() => {
     if (!title) {
-      setTitle(field.title);
+      setTitle(fieldSchema.title);
     }
-  }, [field.title, title]);
+  }, [fieldSchema.title, title]);
+  const disablePageHeader = fieldSchema['x-component-props']?.disablePageHeader;
+  const enablePageTabs = fieldSchema['x-component-props']?.enablePageTabs;
+  const hidePageTitle = fieldSchema['x-component-props']?.hidePageTitle;
+  const { t } = useTranslation();
+  const options = useContext(SchemaOptionsContext);
+  const location = useLocation<any>();
+  const [loading, setLoading] = useState(false);
+  const [activeKey, setActiveKey] = useState(() => {
+    // @ts-ignore
+    return location?.query?.tab || Object.keys(fieldSchema.properties).shift();
+  });
   return (
     <>
-      <AntdPageHeader ghost={false} title={compile(title)} {...others} />
-      <div style={{ margin: 24 }}>{children}</div>
+      <div className={pageDesignerCss}>
+        <PageDesigner title={fieldSchema.title || title} />
+        {!disablePageHeader && (
+          <AntdPageHeader
+            className={css`
+              &.has-footer {
+                padding-top: 12px;
+                .ant-page-header-heading-left {
+                  /* margin: 0; */
+                }
+                .ant-page-header-footer {
+                  margin-top: 0;
+                }
+              }
+            `}
+            ghost={false}
+            title={hidePageTitle ? undefined : fieldSchema.title || compile(title)}
+            {...others}
+            footer={
+              enablePageTabs && (
+                <Tabs
+                  size={'small'}
+                  activeKey={activeKey}
+                  onTabClick={(activeKey) => {
+                    setLoading(true);
+                    setActiveKey(activeKey);
+                    window.history.pushState({}, '', location.pathname + `?tab=` + activeKey);
+                    setTimeout(() => {
+                      setLoading(false);
+                    }, 50);
+                  }}
+                  tabBarExtraContent={
+                    <Button
+                      className={css`
+                        border-color: rgb(241, 139, 98) !important;
+                        color: rgb(241, 139, 98) !important;
+                      `}
+                      type={'dashed'}
+                      onClick={async () => {
+                        const values = await FormDialog(t('Add tab'), () => {
+                          return (
+                            <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
+                              <FormLayout layout={'vertical'}>
+                                <SchemaComponent
+                                  schema={{
+                                    properties: {
+                                      title: {
+                                        title: t('Tab name'),
+                                        'x-component': 'Input',
+                                        'x-decorator': 'FormItem',
+                                        required: true,
+                                      },
+                                      icon: {
+                                        title: t('Icon'),
+                                        'x-component': 'IconPicker',
+                                        'x-decorator': 'FormItem',
+                                      },
+                                    },
+                                  }}
+                                />
+                              </FormLayout>
+                            </SchemaComponentOptions>
+                          );
+                        }).open({
+                          initialValues: {},
+                        });
+                        const { title, icon } = values;
+                        dn.insertBeforeEnd({
+                          type: 'void',
+                          title,
+                          'x-icon': icon,
+                          'x-component': 'Grid',
+                          'x-initializer': 'BlockInitializers',
+                          properties: {},
+                        });
+                      }}
+                    >
+                      Add tab
+                    </Button>
+                  }
+                >
+                  {fieldSchema.mapProperties((schema) => {
+                    return (
+                      <Tabs.TabPane
+                        tab={
+                          <span className={classNames('nb-action-link', designerCss, props.className)}>
+                            {schema['x-icon'] && <Icon style={{ marginRight: 8 }} type={schema['x-icon']} />}
+                            <span>{schema.title || t('Unnamed')}</span>
+                            <PageTabDesigner schema={schema} />
+                          </span>
+                        }
+                        key={schema.name}
+                      />
+                    );
+                  })}
+                </Tabs>
+              )
+            }
+          />
+        )}
+        <div style={{ margin: 24 }}>
+          {loading ? (
+            <Spin />
+          ) : !disablePageHeader && enablePageTabs ? (
+            <RecursionField
+              schema={fieldSchema}
+              onlyRenderProperties
+              filterProperties={(s) => {
+                return s.name === activeKey;
+              }}
+            />
+          ) : (
+            <div
+              className={css`
+                .nb-grid:not(:last-child) {
+                  > .nb-schema-initializer-button {
+                    display: none;
+                  }
+                }
+              `}
+            >
+              {props.children}
+            </div>
+          )}
+        </div>
+      </div>
     </>
   );
 };

packages/core/client/src/schema-component/antd/page/PageTabDesigner.tsx

@@ -0,0 +1,176 @@
+import { MenuOutlined } from '@ant-design/icons';
+import { ISchema, useField, useFieldSchema } from '@formily/react';
+import { Modal, Space } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDesignable } from '../..';
+import { SchemaSettings } from '../../../schema-settings';
+
+export const PageDesigner = ({ title }) => {
+  const { dn } = useDesignable();
+  const { t } = useTranslation();
+  const field = useField();
+  const fieldSchema = useFieldSchema();
+  const hidePageTitle = fieldSchema['x-component-props']?.hidePageTitle;
+  const disablePageHeader = fieldSchema['x-component-props']?.disablePageHeader;
+  return (
+    <div className={'general-schema-designer'}>
+      <div className={'general-schema-designer-icons'}>
+        <Space size={2} align={'center'}>
+          <SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}>
+            <SchemaSettings.SwitchItem
+              title={t('Enable page header')}
+              checked={!fieldSchema['x-component-props']?.disablePageHeader}
+              onChange={(v) => {
+                fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+                fieldSchema['x-component-props']['disablePageHeader'] = !v;
+                dn.emit('patch', {
+                  schema: {
+                    ['x-uid']: fieldSchema['x-uid'],
+                    ['x-component-props']: fieldSchema['x-component-props'],
+                  },
+                });
+                dn.refresh();
+              }}
+            />
+            {!disablePageHeader && <SchemaSettings.Divider />}
+            {!disablePageHeader && (
+              <SchemaSettings.SwitchItem
+                title={t('Display page title')}
+                checked={!fieldSchema['x-component-props']?.hidePageTitle}
+                onChange={(v) => {
+                  fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+                  fieldSchema['x-component-props']['hidePageTitle'] = !v;
+                  dn.emit('patch', {
+                    schema: {
+                      ['x-uid']: fieldSchema['x-uid'],
+                      ['x-component-props']: fieldSchema['x-component-props'],
+                    },
+                  });
+                  dn.refresh();
+                }}
+              />
+            )}
+            {!disablePageHeader && !hidePageTitle && (
+              <SchemaSettings.ModalItem
+                hide
+                title={t('Edit page title')}
+                schema={
+                  {
+                    type: 'object',
+                    title: t('Edit page title'),
+                    properties: {
+                      title: {
+                        title: t('Title'),
+                        required: true,
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                        'x-component-props': {},
+                      },
+                    },
+                  } as ISchema
+                }
+                initialValues={{ title }}
+                onSubmit={({ title }) => {
+                  field.title = title;
+                  fieldSchema['title'] = title;
+                  dn.emit('patch', {
+                    schema: {
+                      ['x-uid']: fieldSchema['x-uid'],
+                      title,
+                    },
+                  });
+                }}
+              />
+            )}
+            {!disablePageHeader && (
+              <SchemaSettings.SwitchItem
+                title={t('Enable page tabs')}
+                checked={fieldSchema['x-component-props']?.enablePageTabs}
+                onChange={(v) => {
+                  fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+                  fieldSchema['x-component-props']['enablePageTabs'] = v;
+                  dn.emit('patch', {
+                    schema: {
+                      ['x-uid']: fieldSchema['x-uid'],
+                      ['x-component-props']: fieldSchema['x-component-props'],
+                    },
+                  });
+                  dn.refresh();
+                }}
+              />
+            )}
+          </SchemaSettings>
+        </Space>
+      </div>
+    </div>
+  );
+};
+
+export const PageTabDesigner = ({ schema }) => {
+  const { dn } = useDesignable();
+  const { t } = useTranslation();
+  return (
+    <div className={'general-schema-designer'}>
+      <div className={'general-schema-designer-icons'}>
+        <Space size={2} align={'center'}>
+          <SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}>
+            <SchemaSettings.ModalItem
+              title={t('Edit')}
+              schema={
+                {
+                  type: 'object',
+                  title: t('Edit tab'),
+                  properties: {
+                    title: {
+                      title: t('Tab name'),
+                      required: true,
+                      'x-decorator': 'FormItem',
+                      'x-component': 'Input',
+                      'x-component-props': {},
+                    },
+                    icon: {
+                      title: t('Icon'),
+                      'x-decorator': 'FormItem',
+                      'x-component': 'IconPicker',
+                      'x-component-props': {},
+                    },
+                  },
+                } as ISchema
+              }
+              initialValues={{ title: schema.title, icon: schema['x-icon'] }}
+              onSubmit={({ title, icon }) => {
+                schema.title = title;
+                schema['x-icon'] = icon;
+                dn.emit('patch', {
+                  schema: {
+                    ['x-uid']: schema['x-uid'],
+                    title,
+                    'x-icon': icon,
+                  },
+                });
+                dn.refresh();
+              }}
+            />
+            <SchemaSettings.Divider />
+            <SchemaSettings.Item
+              eventKey="remove"
+              onClick={() => {
+                Modal.confirm({
+                  title: t('Delete block'),
+                  content: t('Are you sure you want to delete it?'),
+                  ...confirm,
+                  onOk() {
+                    dn.remove(schema);
+                  },
+                });
+              }}
+            >
+              {t('Delete')}
+            </SchemaSettings.Item>
+          </SchemaSettings>
+        </Space>
+      </div>
+    </div>
+  );
+};

packages/plugins/ui-schema-storage/src/repository.ts

@@ -1,5 +1,5 @@
-import { Repository, Transactionable } from '@nocobase/database';
 import { Cache } from '@nocobase/cache';
+import { Repository, Transactionable } from '@nocobase/database';
 import { uid } from '@nocobase/utils';
 import lodash from 'lodash';
 import { Transaction } from 'sequelize';
@@ -336,11 +336,16 @@ export class UiSchemaRepository extends Repository {
   @transaction()
   async patch(newSchema: any, options?) {
     const { transaction } = options;
-
     const rootUid = newSchema['x-uid'];
     await this.clearXUidPathCache(rootUid, transaction);
-    const oldTree = await this.getJsonSchema(rootUid);
-
+    if (!newSchema['properties']) {
+      const s = await this.model.findByPk(rootUid, { transaction });
+      s.set({ ...s.toJSON(), ...newSchema });
+      // console.log(s.toJSON());
+      await s.save({ transaction, hooks: false });
+      return;
+    }
+    const oldTree = await this.getJsonSchema(rootUid, { transaction });
     const traverSchemaTree = async (schema, path = []) => {
       const node = schema;
       const oldNode = path.length == 0 ? oldTree : lodash.get(oldTree, path);