feat: add tooltip and confirm to the button

packages/client/src/components/admin-layout/Permissions/index.tsx

@@ -246,6 +246,7 @@ const schema: ISchema = {
   name: 'action',
   'x-component': 'Action',
   'x-component-props': {
+    tooltip: '权限配置',
     className: 'nb-database-config',
     icon: 'LockOutlined',
     type: 'primary',

packages/client/src/components/admin-layout/index.tsx

@@ -8,6 +8,7 @@ import {
   Menu,
   Collapse,
   Dropdown,
+  Tooltip,
 } from 'antd';
 import isEmpty from 'lodash/isEmpty';
 import {
@@ -43,16 +44,18 @@ import { AuthProvider } from './Auth';
 function DesignableToggle() {
   const { designable, setDesignable } = useDesignableSwitchContext();
   return (
-    <Button
+    <Tooltip title={'界面配置'}>
-      className={cls('nb-designable-toggle', { active: designable })}
+      <Button
-      type={'primary'}
+        className={cls('nb-designable-toggle', { active: designable })}
-      style={{ height: 46, border: 0 }}
+        type={'primary'}
-      onClick={() => {
+        style={{ height: 46, border: 0 }}
-        setDesignable(!designable);
+        onClick={() => {
-      }}
+          setDesignable(!designable);
-    >
+        }}
-      <HighlightOutlined />
+      >
-    </Button>
+        <HighlightOutlined />
+      </Button>
+    </Tooltip>
   );
 }
 

packages/client/src/schemas/action/index.md

@@ -102,6 +102,10 @@ const schema = {
   'x-designable-bar': 'Action.DesignableBar',
   'x-component-props': {
     useAction: '{{ useAction }}',
+    tooltip: '提示信息',
+    confirm: {
+      title: 'Do you Want to delete these items?',
+    },
   },
 };
 

packages/client/src/schemas/action/index.tsx

@@ -20,6 +20,7 @@ import {
   Drawer,
   Modal,
   Select,
+  Tooltip,
 } from 'antd';
 import { Link, useHistory, LinkProps, Switch } from 'react-router-dom';
 import {
@@ -49,8 +50,21 @@ import { useDisplayedMapContext } from '../../constate';
 
 export const ButtonComponentContext = createContext(null);
 
+function getTooltipProps(tooltip) {
+  if (typeof tooltip === 'string') {
+    return { title: tooltip };
+  }
+  return tooltip;
+}
+
 export const Action: any = observer((props: any) => {
-  const { useAction = useDefaultAction, icon, ...others } = props;
+  const {
+    tooltip,
+    confirm,
+    useAction = useDefaultAction,
+    icon,
+    ...others
+  } = props;
   const { run } = useAction();
   const field = useField();
   const { schema, DesignableBar } = useDesignable();
@@ -59,19 +73,31 @@ export const Action: any = observer((props: any) => {
   const isDropdownOrPopover =
     child &&
     ['Action.Dropdown', 'Action.Popover'].includes(child['x-component']);
-  const button = (
+  let button = (
     <Button
       {...others}
       icon={<IconPicker type={icon} />}
       onClick={async () => {
         setVisible(true);
-        await run();
+        if (confirm) {
+          Modal.confirm({
+            ...confirm,
+            async onOk() {
+              await run();
+            },
+          });
+        } else {
+          await run();
+        }
       }}
     >
       {schema.title}
       <DesignableBar path={getSchemaPath(schema)} />
     </Button>
   );
+  if (tooltip) {
+    button = <Tooltip {...getTooltipProps(tooltip)}>{button}</Tooltip>;
+  }
   return (
     <ButtonComponentContext.Provider value={button}>
       <VisibleContext.Provider value={[visible, setVisible]}>

packages/client/src/schemas/add-new/index.tsx

@@ -175,6 +175,10 @@ function generateCardItemSchema(component) {
               'x-component': 'Action',
               'x-designable-bar': 'Table.Action.DesignableBar',
               'x-component-props': {
+                confirm: {
+                  title: '删除数据',
+                  content: '删除后无法恢复，确定要删除吗？'
+                },
                 useAction: '{{ Table.useTableDestroyAction }}',
               },
             },
@@ -312,17 +316,17 @@ function generateCardItemSchema(component) {
                     },
                   },
                 },
-                [uid()]: {
+                // [uid()]: {
-                  type: 'void',
+                //   type: 'void',
-                  title: '删除',
+                //   title: '删除',
-                  'x-component': 'Action',
+                //   'x-component': 'Action',
-                  'x-designable-bar': 'Table.Action.DesignableBar',
+                //   'x-designable-bar': 'Table.Action.DesignableBar',
-                  'x-action-type': 'destroy',
+                //   'x-action-type': 'destroy',
-                  'x-component-props': {
+                //   'x-component-props': {
-                    type: 'link',
+                //     type: 'link',
-                    useAction: '{{ Table.useTableDestroyAction }}',
+                //     useAction: '{{ Table.useTableDestroyAction }}',
-                  },
+                //   },
-                },
+                // },
               },
             },
           },

packages/client/src/schemas/database-field/index.tsx

@@ -26,6 +26,7 @@ import {
   message,
   Drawer,
   Space,
+  Tooltip,
 } from 'antd';
 import { options, interfaces, getDefaultFields } from './interfaces';
 import {
@@ -107,27 +108,29 @@ export const DatabaseCollection = observer((props) => {
 
   return (
     <div>
-      <Button
+      <Tooltip title={'数据表配置'}>
-        className={'nb-database-config'}
+        <Button
-        style={{
+          className={'nb-database-config'}
-          height: 46,
+          style={{
-          borderRadius: 0,
+            height: 46,
-        }}
+            borderRadius: 0,
-        onClick={async () => {
+          }}
-          setVisible(true);
+          onClick={async () => {
-          // await run();
+            setVisible(true);
-          if (field.value?.length === 0) {
+            // await run();
-            field.push({
+            if (field.value?.length === 0) {
-              name: `t_${uid()}`,
+              field.push({
-              unsaved: true,
+                name: `t_${uid()}`,
-              generalFields: getDefaultFields(),
+                unsaved: true,
-            });
+                generalFields: getDefaultFields(),
-          }
+              });
-        }}
+            }
-        type={'primary'}
+          }}
-      >
+          type={'primary'}
-        <DatabaseOutlined />
+        >
-      </Button>
+          <DatabaseOutlined />
+        </Button>
+      </Tooltip>
       <Drawer
         width={'50%'}
         // bodyStyle={{

packages/client/src/schemas/designable-bar/style.less

@@ -1,4 +1,4 @@
-@bgcolor: #F18B62;
+@bgcolor: #f18b62;
 
 .designable-info {
   position: absolute;
@@ -38,13 +38,17 @@
       height: 16px !important;
       vertical-align: top;
       line-height: 16px !important;
-    //   font-size: 10px;
+      cursor: pointer;
-    //   display: inline-flex;
+      //   font-size: 10px;
+      //   display: inline-flex;
       background-color: @bgcolor !important;
       border-bottom-left-radius: 1px;
       border-bottom-right-radius: 1px;
-    //   margin-left: 0 !important;
+      //   margin-left: 0 !important;
-    //   margin-right: 2px !important;
+      //   margin-right: 2px !important;
+      &.anticon-drag {
+        cursor: grab;
+      }
     }
   }
 }

packages/client/src/schemas/kanban/index.tsx

@@ -6,6 +6,8 @@ import {
   useSensor,
   useSensors,
   rectIntersection,
+  closestCenter,
+  closestCorners,
 } from '@dnd-kit/core';
 import {
   SortableContext,

packages/client/src/schemas/menu/index.tsx

@@ -668,7 +668,7 @@ Menu.DesignableBar = (props) => {
             overlayStyle={{
               minWidth: 150,
             }}
-            trigger={['click']}
+            trigger={['hover']}
             overlay={
               <AntdMenu
                 onClick={async (info) => {

packages/client/src/schemas/table/index.tsx

@@ -942,6 +942,10 @@ function generateActionSchema(type) {
       'x-component': 'Action',
       'x-designable-bar': 'Table.Action.DesignableBar',
       'x-component-props': {
+        confirm: {
+          title: '删除数据',
+          content: '删除后无法恢复，确定要删除吗？'
+        },
         useAction: '{{ Table.useTableDestroyAction }}',
       },
     },
@@ -1111,7 +1115,7 @@ function AddActionButton() {
         className={'designable-btn designable-btn-dash'}
         style={{ marginLeft: 8 }}
         type={'dashed'}
-        icon={<PlusOutlined />}
+        icon={<SettingOutlined />}
       >
         配置操作
       </Button>
@@ -1779,6 +1783,7 @@ Table.Action.DesignableBar = () => {
                       bordered={false}
                       size={'small'}
                       defaultValue={popupComponent}
+                      style={{ width: 100 }}
                       onChange={(value) => {
                         const s = Object.values(schema.properties).shift();
                         s['x-component'] = value;
@@ -1795,7 +1800,7 @@ Table.Action.DesignableBar = () => {
                         抽屉
                       </Select.Option>
                       <Select.Option value={'Action.Window'}>
-                        浏览器窗口
+                        窗口
                       </Select.Option>
                     </Select>{' '}
                     内打开