feat: draggable page tabs

packages/core/client/src/route-switch/antd/admin-layout/index.tsx

@@ -1,13 +1,11 @@
 import { css } from '@emotion/css';
+import { useMutationObserver } from 'ahooks';
 import { Layout, Spin } from 'antd';
 import React, { createContext, useContext, useMemo, useRef, useState } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import {
-  ACLRolesCheckProvider,
+  ACLRolesCheckProvider, CurrentAppInfoProvider, CurrentUser,
-  CurrentUser,
+  CurrentUserProvider, findByUid,
-  CurrentUserProvider,
-  CurrentAppInfoProvider,
-  findByUid,
   findMenuItem,
   RemoteCollectionManagerProvider,
   RemotePluginManagerToolbar,
@@ -17,11 +15,9 @@ import {
   useDocumentTitle,
   useRequest,
   useRoute,
-  useSystemSettings,
+  useSystemSettings
 } from '../../../';
 import { useCollectionManager } from '../../../collection-manager';
-import { PoweredBy } from '../../../powered-by';
-import { useMutationObserver } from 'ahooks';
 
 const filterByACL = (schema, options) => {
   const { allowAll, allowMenuItemIds = [] } = options;
@@ -209,8 +205,8 @@ export const InternalAdminLayout = (props: any) => {
           max-width: var(--side-menu-width);
           min-width: var(--side-menu-width);
           pointer-events: none;
-          transition: background-color 0.3s ease 0s, min-width 0.3s ease 0s,
+          /* transition: background-color 0.3s ease 0s, min-width 0.3s ease 0s,
-            max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
+            max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; */
         `}
       ></div>
       <Layout.Sider

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

@@ -1,6 +1,7 @@
+import { PlusOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
 import { FormDialog, FormLayout } from '@formily/antd';
-import { RecursionField, Schema, SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
+import { Schema, 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';
@@ -8,6 +9,8 @@ import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useDocumentTitle } from '../../../document-title';
 import { Icon } from '../../../icon';
+import { DndContext } from '../../common';
+import { SortableItem } from '../../common/sortable-item';
 import { SchemaComponent, SchemaComponentOptions } from '../../core';
 import { useCompile, useDesignable } from '../../hooks';
 import FixedBlock from './FixedBlock';
@@ -160,6 +163,7 @@ export const Page = (props) => {
             {...others}
             footer={
               enablePageTabs && (
+                <DndContext>
                   <Tabs
                     size={'small'}
                     activeKey={activeKey}
@@ -174,6 +178,7 @@ export const Page = (props) => {
                     tabBarExtraContent={
                       dn.designable && (
                         <Button
+                          icon={<PlusOutlined />}
                           className={css`
                             border-color: rgb(241, 139, 98) !important;
                             color: rgb(241, 139, 98) !important;
@@ -227,17 +232,22 @@ export const Page = (props) => {
                       return (
                         <Tabs.TabPane
                           tab={
-                          <span className={classNames('nb-action-link', designerCss, props.className)}>
+                            <SortableItem
+                              id={schema.name}
+                              schema={schema}
+                              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>
+                            </SortableItem>
                           }
                           key={schema.name}
                         />
                       );
                     })}
                   </Tabs>
+                </DndContext>
               )
             }
           />

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

@@ -1,9 +1,9 @@
-import { MenuOutlined } from '@ant-design/icons';
+import { DragOutlined, 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 { DragHandler, useDesignable } from '../..';
 import { SchemaSettings } from '../../../schema-settings';
 
 export const PageDesigner = ({ title }) => {
@@ -120,6 +120,9 @@ export const PageTabDesigner = ({ schema }) => {
     <div className={'general-schema-designer'}>
       <div className={'general-schema-designer-icons'}>
         <Space size={2} align={'center'}>
+          <DragHandler>
+            <DragOutlined />
+          </DragHandler>
           <SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}>
             <SchemaSettings.ModalItem
               title={t('Edit')}

packages/core/client/src/schema-component/common/sortable-item/SortableItem.tsx

@@ -38,12 +38,28 @@ export const Sortable = (props: any) => {
   );
 };
 
-export const SortableItem: React.FC<any> = observer((props) => {
+const useSortableItemProps = (props) => {
+  const id = useSortableItemId(props);
+  if (props.schema) {
+    return { ...props, id };
+  }
+  const schema = useFieldSchema();
+  return { ...props, id, schema };
+};
+
+const useSortableItemId = (props) => {
+  if (props.id) {
+    return props.id;
+  }
   const field = useField();
-  const fieldSchema = useFieldSchema();
+  return field.address.toString();
+};
+
+export const SortableItem: React.FC<any> = observer((props) => {
+  const { schema, id, ...others } = useSortableItemProps(props);
   return (
-    <SortableProvider id={field.address.toString()} data={{ insertAdjacent: 'afterEnd', schema: fieldSchema }}>
+    <SortableProvider id={id} data={{ insertAdjacent: 'afterEnd', schema: schema }}>
-      <Sortable {...props}>{props.children}</Sortable>
+      <Sortable {...others}>{props.children}</Sortable>
     </SortableProvider>
   );
 });