From 2ba5e6f76faaba2ffed667f8119989f5fe0aa986 Mon Sep 17 00:00:00 2001 From: chenos Date: Tue, 17 Aug 2021 14:40:38 +0800 Subject: [PATCH] improved designable styling --- .../admin-layout/Permissions/index.tsx | 1 - .../src/components/admin-layout/SiteTitle.tsx | 4 +- .../src/components/admin-layout/index.tsx | 2 +- .../src/components/admin-layout/style.less | 23 +- .../client/src/schemas/action/ActionBar.tsx | 2 +- packages/client/src/schemas/action/index.tsx | 192 ++-- packages/client/src/schemas/add-new/index.tsx | 6 +- .../client/src/schemas/block-item/style.less | 3 - .../src/schemas/designable-bar/style.less | 65 +- .../src/schemas/form/Field.DesignableBar.tsx | 2 +- packages/client/src/schemas/menu/index.tsx | 640 ++++++------- packages/client/src/schemas/menu/style.less | 2 +- packages/client/src/schemas/table/index.tsx | 867 +++++++++--------- 13 files changed, 967 insertions(+), 842 deletions(-) diff --git a/packages/client/src/components/admin-layout/Permissions/index.tsx b/packages/client/src/components/admin-layout/Permissions/index.tsx index 27125a2e4..8c9c2ea8b 100644 --- a/packages/client/src/components/admin-layout/Permissions/index.tsx +++ b/packages/client/src/components/admin-layout/Permissions/index.tsx @@ -349,7 +349,6 @@ const schema: ISchema = { 'x-component-props': { className: 'nb-table-operation', }, - 'x-designable-bar': 'Table.Operation.DesignableBar', properties: { [uid()]: { type: 'void', diff --git a/packages/client/src/components/admin-layout/SiteTitle.tsx b/packages/client/src/components/admin-layout/SiteTitle.tsx index 2847155ff..4f5f9beb1 100644 --- a/packages/client/src/components/admin-layout/SiteTitle.tsx +++ b/packages/client/src/components/admin-layout/SiteTitle.tsx @@ -1,5 +1,5 @@ import React, { useContext, useEffect } from 'react'; -import { Button, Dropdown, Menu } from 'antd'; +import { Button, Dropdown, Menu, Spin } from 'antd'; import { useHistory } from 'react-router-dom'; import { request } from '../../schemas'; import { useRequest } from 'ahooks'; @@ -25,7 +25,7 @@ export function SystemSettingsProvider(props) { ); return ( - {props.children} + {service.loading ? : props.children} ); } diff --git a/packages/client/src/components/admin-layout/index.tsx b/packages/client/src/components/admin-layout/index.tsx index 7f855814a..c08d57936 100644 --- a/packages/client/src/components/admin-layout/index.tsx +++ b/packages/client/src/components/admin-layout/index.tsx @@ -89,7 +89,7 @@ function LayoutWithMenu(props: LayoutWithMenuProps) { }; return ( - + .ant-menu-item:hover { + background-color: rgba(255, 255, 255, 0.1); + } + .ant-btn { + color: rgba(255, 255, 255, 0.65) !important; + &.nb-designable-toggle:hover { + color: #fff !important; + background-color: #F18B62 !important + } + } + .ant-btn:hover { + color: #fff !important; + background-color: rgba(255, 255, 255, 0.1) !important; + } +} \ No newline at end of file diff --git a/packages/client/src/schemas/action/ActionBar.tsx b/packages/client/src/schemas/action/ActionBar.tsx index feb453182..9b6ab9b7c 100644 --- a/packages/client/src/schemas/action/ActionBar.tsx +++ b/packages/client/src/schemas/action/ActionBar.tsx @@ -214,7 +214,7 @@ function AddActionButton() { } > - diff --git a/packages/client/src/schemas/action/index.tsx b/packages/client/src/schemas/action/index.tsx index 59ac7f4f4..18046830d 100644 --- a/packages/client/src/schemas/action/index.tsx +++ b/packages/client/src/schemas/action/index.tsx @@ -339,101 +339,107 @@ Action.DesignableBar = (props: any) => { }} className={cls('designable-bar-actions', { active: visible })} > - - { - setVisible(visible); - }} - overlay={ - - { - const values = await FormDialog('修改名称和图标', () => { - return ( - - + + { + setVisible(visible); + }} + overlay={ + + { + const values = await FormDialog('修改名称和图标', () => { + return ( + + - - ); - }).open({ - initialValues: { - title: schema['title'], - icon: schema['x-component-props']?.['icon'], - }, - }); - schema['title'] = values.title; - schema['x-component-props']['icon'] = values.icon; - field.componentProps.icon = values.icon; - field.title = values.title; - updateSchema(schema); - refresh(); - }} - > - 修改名称和图标 - - {isPopup && ( - - 在{' '} - {' '} - 内打开 + }} + /> + + ); + }).open({ + initialValues: { + title: schema['title'], + icon: schema['x-component-props']?.['icon'], + }, + }); + schema['title'] = values.title; + schema['x-component-props']['icon'] = values.icon; + field.componentProps.icon = values.icon; + field.title = values.title; + updateSchema(schema); + refresh(); + }} + > + 修改名称和图标 - )} - - { - const displayName = - schema?.['x-decorator-props']?.['displayName']; - const data = remove(); - await removeSchema(data); - if (displayName) { - displayed.remove(displayName); - } - setVisible(false); - }} - > - 移除 - - - } - > - - + {isPopup && ( + + 在{' '} + {' '} + 内打开 + + )} + + { + const displayName = + schema?.['x-decorator-props']?.['displayName']; + const data = remove(); + await removeSchema(data); + if (displayName) { + displayed.remove(displayName); + } + setVisible(false); + }} + > + 移除 + + + } + > + + + ); diff --git a/packages/client/src/schemas/add-new/index.tsx b/packages/client/src/schemas/add-new/index.tsx index 8f8bd596a..e6f7b85bd 100644 --- a/packages/client/src/schemas/add-new/index.tsx +++ b/packages/client/src/schemas/add-new/index.tsx @@ -935,7 +935,7 @@ AddNew.CardItem = observer((props: any) => { {ghost ? ( ) : ( - )} @@ -1122,7 +1122,7 @@ AddNew.FormItem = observer((props: any) => { {ghost ? ( ) : ( - )} @@ -1326,7 +1326,7 @@ AddNew.PaneItem = observer((props: any) => { {ghost ? ( ) : ( - )} diff --git a/packages/client/src/schemas/block-item/style.less b/packages/client/src/schemas/block-item/style.less index 668fc5808..b133eb9e0 100644 --- a/packages/client/src/schemas/block-item/style.less +++ b/packages/client/src/schemas/block-item/style.less @@ -27,9 +27,6 @@ color: #fff; z-index: 10; padding: 0 3px; - .ant-space { - gap: 1px !important; - } .anticon { width: 16px; height: 16px; diff --git a/packages/client/src/schemas/designable-bar/style.less b/packages/client/src/schemas/designable-bar/style.less index 8ad0d703f..45f42b506 100644 --- a/packages/client/src/schemas/designable-bar/style.less +++ b/packages/client/src/schemas/designable-bar/style.less @@ -1,8 +1,71 @@ +@bgcolor: #F18B62; + .designable-info { position: absolute; font-size: 12px; - background: #1890ff; + background: @bgcolor; color: #fff; padding: 0 5px; + line-height: 16px; + height: 16px; border-bottom-right-radius: 2px; +} + +.designable-bar { + border-radius: 1px !important; + border: 2px solid @bgcolor !important; + .designable-bar-actions { + padding: 0 !important; + background: none !important; + display: flex !important; + right: 2px !important; + // .ant-space-item { + // margin: 0 !important; + // } + .ant-space { + gap: 2px !important; + } + .anticon { + width: 16px !important; + height: 16px !important; + vertical-align: top; + line-height: 16px !important; + // 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-right: 2px !important; + } + } +} + +.designable-btn-dash { + border-color: @bgcolor !important; + color: @bgcolor !important; +} + +.nb-add-new-menu-item.menu-mode-horizontal.designable { + color: @bgcolor !important; + border: 1px dashed !important; + height: 32px !important; + // &:hover { + // color: #fff !important; + // background: @bgcolor !important; + // } + // &:active { + // color: #fff !important; + // background: @bgcolor !important; + // } +} + +.ant-menu-item-group.nb-menu-add-new { + .menu-mode-horizontal { + margin-left: 8px; + } +} + +.nb-designable-toggle.active { + background: @bgcolor !important; } \ No newline at end of file diff --git a/packages/client/src/schemas/form/Field.DesignableBar.tsx b/packages/client/src/schemas/form/Field.DesignableBar.tsx index 0a6adec05..10d0c4a37 100644 --- a/packages/client/src/schemas/form/Field.DesignableBar.tsx +++ b/packages/client/src/schemas/form/Field.DesignableBar.tsx @@ -62,7 +62,7 @@ export const FieldDesignableBar = observer((props) => { }} className={cls('designable-bar-actions', { active: visible })} > - + {dragRef && } { @@ -207,7 +208,7 @@ export const Menu: any = observer((props: any) => { {/* */} @@ -1089,7 +1093,12 @@ function AddActionButton() { } > - @@ -1350,108 +1359,111 @@ Table.Filter.DesignableBar = () => { }} className={cls('designable-bar-actions', { active: visible })} > - - { - setVisible(visible); - }} - overlay={ - - - {fields - .filter((collectionField) => { - const option = interfaces.get(collectionField.interface); - return option.operations?.length; - }) - .map((collectionField) => ( - { - if (checked) { - fieldNames.push(collectionField.name); - } else { - const index = fieldNames.indexOf( - collectionField.name, - ); - if (index > -1) { - fieldNames.splice(index, 1); + + + { + setVisible(visible); + }} + overlay={ + + + {fields + .filter((collectionField) => { + const option = interfaces.get(collectionField.interface); + return option.operations?.length; + }) + .map((collectionField) => ( + { + if (checked) { + fieldNames.push(collectionField.name); + } else { + const index = fieldNames.indexOf( + collectionField.name, + ); + if (index > -1) { + fieldNames.splice(index, 1); + } } - } - console.log({ fieldNames, field }); - schema['x-component-props']['fieldNames'] = fieldNames; - field.componentProps.fieldNames = fieldNames; - updateSchema(schema); - }} - /> - ))} - - - { - const values = await FormDialog('修改名称和图标', () => { - return ( - - + ))} + + + { + const values = await FormDialog('修改名称和图标', () => { + return ( + + - - ); - }).open({ - initialValues: { - title: schema['title'], - icon: schema['x-component-props']?.['icon'], - }, - }); - schema['title'] = values.title; - schema['x-component-props']['icon'] = values.icon; - field.componentProps.icon = values.icon; - field.title = values.title; - updateSchema(schema); - refresh(); - }} - > - 修改名称和图标 - - - { - const displayName = - schema?.['x-decorator-props']?.['displayName']; - const data = remove(); - await removeSchema(data); - if (displayName) { - displayed.remove(displayName); - } - setVisible(false); - }} - > - 移除 - - - } - > - - + }} + /> + + ); + }).open({ + initialValues: { + title: schema['title'], + icon: schema['x-component-props']?.['icon'], + }, + }); + schema['title'] = values.title; + schema['x-component-props']['icon'] = values.icon; + field.componentProps.icon = values.icon; + field.title = values.title; + updateSchema(schema); + refresh(); + }} + > + 修改名称和图标 + + + { + const displayName = + schema?.['x-decorator-props']?.['displayName']; + const data = remove(); + await removeSchema(data); + if (displayName) { + displayed.remove(displayName); + } + setVisible(false); + }} + > + 移除 + + + } + > + + + ); @@ -1475,101 +1487,105 @@ Table.ExportActionDesignableBar = () => { }} className={cls('designable-bar-actions', { active: visible })} > - - { - setVisible(visible); - }} - overlay={ - - - {fields.map((collectionField) => ( - { - if (checked) { - fieldNames.push(collectionField.name); - } else { - const index = fieldNames.indexOf(collectionField.name); - if (index > -1) { - fieldNames.splice(index, 1); + + + { + setVisible(visible); + }} + overlay={ + + + {fields.map((collectionField) => ( + { + if (checked) { + fieldNames.push(collectionField.name); + } else { + const index = fieldNames.indexOf( + collectionField.name, + ); + if (index > -1) { + fieldNames.splice(index, 1); + } } - } - console.log({ fieldNames, field }); - schema['x-component-props']['fieldNames'] = fieldNames; - field.componentProps.fieldNames = fieldNames; - updateSchema(schema); - }} - /> - ))} - - - { - const values = await FormDialog('修改名称和图标', () => { - return ( - - + ))} + + + { + const values = await FormDialog('修改名称和图标', () => { + return ( + + - - ); - }).open({ - initialValues: { - title: schema['title'], - icon: schema['x-component-props']?.['icon'], - }, - }); - schema['title'] = values.title; - schema['x-component-props']['icon'] = values.icon; - field.componentProps.icon = values.icon; - field.title = values.title; - updateSchema(schema); - refresh(); - }} - > - 修改名称和图标 - - - { - const displayName = - schema?.['x-decorator-props']?.['displayName']; - const data = remove(); - await removeSchema(data); - if (displayName) { - displayed.remove(displayName); - } - setVisible(false); - }} - > - 移除 - - - } - > - - + }} + /> + + ); + }).open({ + initialValues: { + title: schema['title'], + icon: schema['x-component-props']?.['icon'], + }, + }); + schema['title'] = values.title; + schema['x-component-props']['icon'] = values.icon; + field.componentProps.icon = values.icon; + field.title = values.title; + updateSchema(schema); + refresh(); + }} + > + 修改名称和图标 + + + { + const displayName = + schema?.['x-decorator-props']?.['displayName']; + const data = remove(); + await removeSchema(data); + if (displayName) { + displayed.remove(displayName); + } + setVisible(false); + }} + > + 移除 + + + } + > + + + ); @@ -1580,9 +1596,7 @@ Table.Operation = observer((props: any) => { return (
操作 - {designable && schema['x-designable-bar'] && ( - - )} +
); }); @@ -1600,9 +1614,10 @@ Table.Operation.Cell = observer((props: any) => { Table.Operation.DesignableBar = (props) => { const { schema, remove, refresh, appendChild } = useDesignable(props.path); const [visible, setVisible] = useState(false); - if (!schema['x-designable-bar']) { + if (!schema?.parent?.parent['x-designable-bar']) { return null; } + console.log('Table.Operation.DesignableBar', schema?.parent?.parent); const map = new Map(); schema.mapProperties((s) => { if (!s['x-action-type']) { @@ -1618,52 +1633,54 @@ Table.Operation.DesignableBar = (props) => { }} className={cls('designable-bar-actions', { active: visible })} > - - { - setVisible(visible); - }} - overlay={ - - - {[ - { title: '查看', name: 'view' }, - { title: '编辑', name: 'update' }, - { title: '删除', name: 'destroy' }, - ].map((item) => ( - { - if (checked) { - const s = generateMenuActionSchema(item.name); - const data = appendChild(s); - await createSchema(data); - } else if (map.get(item.name)) { - const removed = remove([ - ...props.path, - map.get(item.name), - ]); - await removeSchema(removed); - } - }} - /> - ))} - - - - 函数操作 - 弹窗表单 - 复杂弹窗 - - - } - > - - + + + { + setVisible(visible); + }} + overlay={ + + + {[ + { title: '查看', name: 'view' }, + { title: '编辑', name: 'update' }, + { title: '删除', name: 'destroy' }, + ].map((item) => ( + { + if (checked) { + const s = generateMenuActionSchema(item.name); + const data = appendChild(s); + await createSchema(data); + } else if (map.get(item.name)) { + const removed = remove([ + ...props.path, + map.get(item.name), + ]); + await removeSchema(removed); + } + }} + /> + ))} + + + + 函数操作 + 弹窗表单 + 复杂弹窗 + + + } + > + + + ); @@ -1686,109 +1703,115 @@ Table.Action.DesignableBar = () => { }} className={cls('designable-bar-actions', { active: visible })} > - - { - setVisible(visible); - }} - overlay={ - - { - const values = await FormDialog('修改名称和图标', () => { - return ( - - + + { + setVisible(visible); + }} + overlay={ + + { + const values = await FormDialog('修改名称和图标', () => { + return ( + + - - ); - }).open({ - initialValues: { - title: schema['title'], - icon: schema['x-component-props']?.['icon'], - }, - }); - schema['title'] = values.title; - schema['x-component-props']['icon'] = values.icon; - field.componentProps.icon = values.icon; - field.title = values.title; - updateSchema(schema); - refresh(); - }} - > - 修改名称和图标 - - {isPopup && ( - - 在{' '} - {' '} - 内打开 + }} + /> + + ); + }).open({ + initialValues: { + title: schema['title'], + icon: schema['x-component-props']?.['icon'], + }, + }); + schema['title'] = values.title; + schema['x-component-props']['icon'] = values.icon; + field.componentProps.icon = values.icon; + field.title = values.title; + updateSchema(schema); + refresh(); + }} + > + 修改名称和图标 - )} - {!inActionBar && ( - - 点击表格行时触发    - + {isPopup && ( + + 在{' '} + {' '} + 内打开 + + )} + {!inActionBar && ( + + 点击表格行时触发    + + + )} + + { + const displayName = + schema?.['x-decorator-props']?.['displayName']; + const data = remove(); + await removeSchema(data); + if (displayName) { + displayed.remove(displayName); + } + setVisible(false); + }} + > + 移除 - )} - - { - const displayName = - schema?.['x-decorator-props']?.['displayName']; - const data = remove(); - await removeSchema(data); - if (displayName) { - displayed.remove(displayName); - } - setVisible(false); - }} - > - 移除 - - - } - > - - + + } + > + + + ); @@ -1860,77 +1883,80 @@ Table.Column.DesignableBar = () => { }} className={cls('designable-bar-actions', { active: visible })} > - - { - setVisible(visible); - }} - overlay={ - - { - const values = await FormDialog('修改列标题', () => { - return ( - - + + { + setVisible(visible); + }} + overlay={ + + { + const values = await FormDialog('修改列标题', () => { + return ( + + - - ); - }).open({ - initialValues: { - fieldName: collectionField?.uiSchema?.title, - title: schema['title'], - }, - }); - const title = values.title || null; - field.title = title; - schema.title = title; - refresh(); - await updateSchema({ - key: schema['key'], - title: title, - }); - setVisible(false); - }} - > - 修改列标题 - - - { - const s = remove(); - const fieldName = schema['x-component-props']?.['fieldName']; - displayed.remove(fieldName); - await removeSchema(s); - }} - > - 移除 - - - } - > - - + }} + /> + + ); + }).open({ + initialValues: { + fieldName: collectionField?.uiSchema?.title, + title: schema['title'], + }, + }); + const title = values.title || null; + field.title = title; + schema.title = title; + refresh(); + await updateSchema({ + key: schema['key'], + title: title, + }); + setVisible(false); + }} + > + 修改列标题 + + + { + const s = remove(); + const fieldName = + schema['x-component-props']?.['fieldName']; + displayed.remove(fieldName); + await removeSchema(s); + }} + > + 移除 + + + } + > + + + ); @@ -1957,14 +1983,16 @@ Table.DesignableBar = observer((props) => { console.log({ collectionName }); return (
-
{collection?.title || collection?.name}
+
+ {collection?.title || collection?.name} +
{ e.stopPropagation(); }} className={cls('designable-bar-actions', { active: visible })} > - + {dragRef && } { }); const service = useRequest( (params?: any) => { - return resource.get({ ...params, appends: ['changes', 'user', 'collection'] }); + return resource.get({ + ...params, + appends: ['changes', 'user', 'collection'], + }); }, { formatResult: (result) => result?.data,