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 (
-
-
-
-
-
-
- {
- 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"