diff --git a/packages/core/client/package.json b/packages/core/client/package.json index c35d91df9..6e50297dd 100644 --- a/packages/core/client/package.json +++ b/packages/core/client/package.json @@ -21,7 +21,7 @@ "@formily/react": "2.0.20", "@nocobase/sdk": "0.8.0-alpha.13", "@nocobase/utils": "0.8.0-alpha.13", - "ahooks": "^3.0.5", + "ahooks": "^3.7.2", "antd": "~4.19.5", "axios": "^0.26.1", "classnames": "^2.3.1", diff --git a/packages/core/client/src/pm/index.tsx b/packages/core/client/src/pm/index.tsx index 97dcddd7c..b6ea58a48 100644 --- a/packages/core/client/src/pm/index.tsx +++ b/packages/core/client/src/pm/index.tsx @@ -287,51 +287,75 @@ const SettingsCenter = (props) => { } const component = items[pluginName]?.tabs?.[tabName]?.component; return ( -
- - - - {Object.keys(items) - .sort() - .map((key) => { - const item = items[key]; - const tabKey = Object.keys(item.tabs).shift(); - return ( - : null} - onClick={() => { - history.push(`/admin/settings/${key}/${tabKey}`); - }} - > - {compile(item.title)} - - ); + +
+ } + className={css` + width: var(--side-menu-width); + overflow: hidden; + flex: 0 0 var(--side-menu-width); + max-width: var(--side-menu-width); + min-width: var(--side-menu-width); + pointer-events: none; + `} + >
+ + + {Object.keys(items) + .sort() + .map((key) => { + const item = items[key]; + const tabKey = Object.keys(item.tabs).shift(); + return ( + : null} + onClick={() => { + history.push(`/admin/settings/${key}/${tabKey}`); + }} + > + {compile(item.title)} + + ); + })} + + + + { + history.push(`/admin/settings/${pluginName}/${activeKey}`); + }} + > + {Object.keys(items[pluginName]?.tabs).map((tabKey) => { + const tab = items[pluginName].tabs?.[tabKey]; + return ; })} -
-
- - { - history.push(`/admin/settings/${pluginName}/${activeKey}`); - }} - > - {Object.keys(items[pluginName]?.tabs).map((tabKey) => { - const tab = items[pluginName].tabs?.[tabKey]; - return ; - })} - - } - /> -
{component && React.createElement(component)}
-
-
-
+ + } + /> +
{component && React.createElement(component)}
+ + ); }; diff --git a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx index 130be2134..91607fdf1 100644 --- a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx +++ b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; import { Layout, Spin } from 'antd'; -import React, { createContext, useContext, useMemo, useRef } from 'react'; +import React, { createContext, useContext, useMemo, useRef, useState } from 'react'; import { useHistory, useRouteMatch } from 'react-router-dom'; import { ACLAllowConfigure, @@ -22,6 +22,7 @@ import { } from '../../../'; import { useCollectionManager } from '../../../collection-manager'; import { PoweredBy } from '../../../powered-by'; +import { useMutationObserver } from 'ahooks'; const filterByACL = (schema, options) => { const { allowAll, allowConfigure, allowMenuItemIds = [] } = options; @@ -123,11 +124,20 @@ const MenuEditor = (props) => { }; const InternalAdminLayout = (props: any) => { - const route = useRoute(); - const history = useHistory(); - const match = useRouteMatch(); - const { setTitle } = useDocumentTitle(); - const sideMenuRef = useRef(); + const sideMenuRef = useRef(); + const [sideMenuWidth, setSideMenuWidth] = useState(0); + + useMutationObserver( + (value) => { + const width = (value[0].target as HTMLDivElement).offsetWidth; + setSideMenuWidth(width); + }, + sideMenuRef, + { + childList: true, + attributes: true, + }, + ); const result = useSystemSettings(); const { service } = useCollectionManager(); @@ -142,65 +152,114 @@ const InternalAdminLayout = (props: any) => { .ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover { background-color: rgba(255, 255, 255, 0.1); } + + position: fixed; + width: 100%; + height: 46px; + line-height: 46px; + padding: 0; + z-index: 100; `} - style={{ height: 46, lineHeight: '46px', position: 'relative', paddingLeft: 0 }} > -
-
- - {/* {result?.data?.data?.title} */} -
-
- -
-
-
- - - - -
- - - - div { - position: relative; - // z-index: 1; - } - .ant-layout-footer { - position: absolute; - bottom: 0; - text-align: center; - width: 100%; - z-index: 0; - padding: 0px 50px; - } + width: 100%; + height: 100%; `} > - {service.contentLoading ? : props.children} - - - - - +
+
+ + {/* {result?.data?.data?.title} */} +
+
+ +
+
+
+ + + + +
+ + +
+ } + className={css` + width: var(--side-menu-width); + overflow: hidden; + flex: 0 0 var(--side-menu-width); + 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, + max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; + `} + >
+ + div { + position: relative; + // z-index: 1; + } + .ant-layout-footer { + position: absolute; + bottom: 0; + text-align: center; + width: 100%; + z-index: 0; + padding: 0px 50px; + } + `} + > +
+ {service.contentLoading ? : props.children} +
); }; diff --git a/packages/core/client/src/schema-component/antd/menu/Menu.tsx b/packages/core/client/src/schema-component/antd/menu/Menu.tsx index 13ed3669f..ac017a137 100644 --- a/packages/core/client/src/schema-component/antd/menu/Menu.tsx +++ b/packages/core/client/src/schema-component/antd/menu/Menu.tsx @@ -290,6 +290,7 @@ export const Menu: ComposedMenu = observer((props) => { onSelect && onSelect(info); }} className={css` + height: 100%; .ant-menu-item { > .ant-menu-title-content { margin-left: -24px; diff --git a/packages/core/client/src/schema-component/antd/page/Page.tsx b/packages/core/client/src/schema-component/antd/page/Page.tsx index 3baa9f62e..49da7fff9 100644 --- a/packages/core/client/src/schema-component/antd/page/Page.tsx +++ b/packages/core/client/src/schema-component/antd/page/Page.tsx @@ -63,6 +63,7 @@ const pageDesignerCss = css` position: relative; z-index: 20; padding-top: 1px; + &:hover { > .general-schema-designer { display: block; diff --git a/packages/plugins/map/package.json b/packages/plugins/map/package.json index d84f16d89..8c6510622 100644 --- a/packages/plugins/map/package.json +++ b/packages/plugins/map/package.json @@ -13,6 +13,6 @@ "@emotion/css": "^11.7.1", "antd": "~4.19.5", "sequelize": "^6.9.0", - "ahooks": "^3.0.5" + "ahooks": "^3.7.2" } } diff --git a/yarn.lock b/yarn.lock index f4fe316a2..da335a02a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5225,6 +5225,11 @@ jest-diff "^26.0.0" pretty-format "^26.0.0" +"@types/js-cookie@^2.x.x": + version "2.2.7" + resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.7.tgz#226a9e31680835a6188e887f3988e60c04d3f6a3" + integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA== + "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8": version "7.0.9" resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d" @@ -6169,14 +6174,21 @@ aggregate-error@^3.0.0: clean-stack "^2.0.0" indent-string "^4.0.0" -ahooks@^3.0.5: - version "3.0.5" - resolved "https://registry.npmjs.org/ahooks/-/ahooks-3.0.5.tgz#7cf1a057ae147ac02732c3eddb00a793006df9d6" - integrity sha512-/l8HoNPzJVoexChfw7zlRD1/VyX1X7F08AVNnwkRwgufu1AfUd96XcIStrRsmADqMQWllluLRodEzPbcKUGUzQ== +ahooks-v3-count@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/ahooks-v3-count/-/ahooks-v3-count-1.0.0.tgz#ddeb392e009ad6e748905b3cbf63a9fd8262ca80" + integrity sha512-V7uUvAwnimu6eh/PED4mCDjE7tokeZQLKlxg9lCTMPhN+NjsSbtdacByVlR1oluXQzD3MOw55wylDmQo4+S9ZQ== + +ahooks@^3.7.2: + version "3.7.2" + resolved "https://registry.yarnpkg.com/ahooks/-/ahooks-3.7.2.tgz#0afa42625e77ae1cc4b60b19c45cf12a8cf29b56" + integrity sha512-nJPsQJcmJnGaNXiqgZdfO7UMs+o926LQg6VyDYt2vzKhXU8Ze/U87NsA/FeIvlIZB0rQr/j7uotFb1bGPp627A== dependencies: + "@types/js-cookie" "^2.x.x" + ahooks-v3-count "^1.0.0" dayjs "^1.9.1" intersection-observer "^0.12.0" - js-cookie "^3.0.0" + js-cookie "^2.x.x" lodash "^4.17.21" resize-observer-polyfill "^1.5.1" screenfull "^5.0.0" @@ -14089,10 +14101,10 @@ js-base64@^2.5.2: resolved "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4" integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ== -js-cookie@^3.0.0: - version "3.0.1" - resolved "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414" - integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw== +js-cookie@^2.x.x: + version "2.2.1" + resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8" + integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ== js-git@^0.7.8: version "0.7.8"