diff --git a/src/components/Layout/GlobalHeader/index.less b/src/components/Layout/GlobalHeader/index.less index ce79864f..d1a78e54 100644 --- a/src/components/Layout/GlobalHeader/index.less +++ b/src/components/Layout/GlobalHeader/index.less @@ -128,6 +128,9 @@ height: 100%; color: @title-color; position: relative; + flex-grow: 1; + z-index: 200; + box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09); } .avatar { diff --git a/src/components/PageLoading/index.jsx b/src/components/PageLoading/index.jsx index 2d6412e6..ca0c9bc0 100644 --- a/src/components/PageLoading/index.jsx +++ b/src/components/PageLoading/index.jsx @@ -20,7 +20,6 @@ const PageLoading = (props) => { return (
- import(/* webpackChunkName: "base" */ '@/pages/base/App') +const Auth = lazy(() => + import(/* webpackChunkName: "auth" */ '@/pages/auth/App') ); -const Compute = lazy(() => - import(/* webpackChunkName: "compute" */ '@/pages/compute/App') -); -const User = lazy(() => - import(/* webpackChunkName: "user" */ '@/pages/user/App') -); -const Storage = lazy(() => - import(/* webpackChunkName: "storage" */ '@/pages/storage/App') -); -const Network = lazy(() => - import(/* webpackChunkName: "network" */ '@/pages/network/App') -); -const Identity = lazy(() => - import(/* webpackChunkName: "identity" */ '@/pages/identity/App') -); -const Configs = lazy(() => - import(/* webpackChunkName: "configuration" */ '@/pages/configuration/App') -); -// const Management = lazy(() => -// import(/* webpackChunkName: "Management" */ '@/pages/management/App') -// ); -const Heat = lazy(() => - import(/* webpackChunkName: "heat" */ '@/pages/heat/App') + +const Basic = lazy(() => + import(/* webpackChunkName: "basic" */ '@/pages/basic/App') ); export default [ @@ -50,48 +30,19 @@ export default [ routes: [ { path: '/', - // redirect: { from: '/', to: '/base/403', exact: true } redirect: { from: '/', to: '/base/overview', exact: true }, }, { path: '/login', - redirect: { from: '/login', to: '/user/login', exact: true }, + redirect: { from: '/login', to: '/auth/login', exact: true }, }, { - path: '/user', - component: User, + path: '/auth', + component: Auth, }, { - path: '/compute', - component: Compute, - }, - { - path: '/storage', - component: Storage, - }, - { - path: '/network', - component: Network, - }, - { - path: '/identity', - component: Identity, - }, - { - path: '/configuration-admin', - component: Configs, - }, - // { - // path: '/management', - // component: Management, - // }, - { - path: '/heat', - component: Heat, - }, - { - path: '/base', - component: Base, + path: '/', + component: Basic, }, { path: '*', diff --git a/src/layouts/User/index.jsx b/src/layouts/Auth/index.jsx similarity index 97% rename from src/layouts/User/index.jsx rename to src/layouts/Auth/index.jsx index 0a738238..c0a1e58a 100644 --- a/src/layouts/User/index.jsx +++ b/src/layouts/Auth/index.jsx @@ -27,7 +27,7 @@ import styles from './index.less'; @inject('rootStore') @observer -class UserLayout extends Component { +class AuthLayout extends Component { constructor(props) { super(props); @@ -75,4 +75,4 @@ class UserLayout extends Component { } } -export default UserLayout; +export default AuthLayout; diff --git a/src/layouts/User/index.less b/src/layouts/Auth/index.less similarity index 100% rename from src/layouts/User/index.less rename to src/layouts/Auth/index.less diff --git a/src/layouts/Base/Menu.jsx b/src/layouts/Base/Menu.jsx index ebde8d15..cbe441b7 100644 --- a/src/layouts/Base/Menu.jsx +++ b/src/layouts/Base/Menu.jsx @@ -224,7 +224,6 @@ class LayoutMenu extends Component { return (
{ - const { currentRoutes } = this.props; + const { currentRoutes = [] } = this.props; if (currentRoutes.length === 0) { return false; } @@ -56,9 +56,7 @@ class Right extends Component { return hasTab || false; }; - renderHeader = () => ; - - renderBreadcrumb = (currentRoutes) => { + renderBreadcrumb = (currentRoutes = []) => { if (!currentRoutes || currentRoutes.length === 0) { return null; } @@ -113,12 +111,15 @@ class Right extends Component { ); } try { - const { currentRoutes } = this.props; - if (currentRoutes.length === 0) { - return ( - - ); - } + // const { currentRoutes = [] } = this.props; + // if (currentRoutes.length === 0) { + // return ( + // + // ); + // } const children = (
{renderRoutes(this.routes, extraProps)} @@ -158,7 +159,6 @@ class Right extends Component { const children = user ? this.renderChildren(mainBreadcrubClass, mainTabClass, extraProps) : null; - return ( -
{this.renderHeader()}
{breadcrumb} - {children} + }> + {children} + ); diff --git a/src/layouts/Base/index.jsx b/src/layouts/Base/index.jsx index 89fe771d..95cbcb5c 100644 --- a/src/layouts/Base/index.jsx +++ b/src/layouts/Base/index.jsx @@ -19,12 +19,16 @@ import i18n from 'core/i18n'; import { isAdminPage } from 'utils/index'; import { BellOutlined } from '@ant-design/icons'; import checkItemPolicy from 'resources/policy'; +import { Layout } from 'antd'; +import GlobalHeader from 'components/Layout/GlobalHeader'; import renderAdminMenu from '../admin-menu'; import renderMenu from '../menu'; import RightContext from './Right'; import LayoutMenu from './Menu'; import styles from './index.less'; +const { Header } = Layout; + @inject('rootStore') @observer class BaseLayout extends Component { @@ -79,6 +83,10 @@ class BaseLayout extends Component { return this.getMenuByLicense(this.originMenu); } + getUrl(path, adminStr) { + return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path; + } + filterMenuByHidden = (menu = []) => { if (menu.length === 0) { return menu; @@ -203,13 +211,23 @@ class BaseLayout extends Component { ); } + renderHeader = () => ( + + ); + render() { + const { collapsed } = this.state; const { pathname } = this.props.location; const currentRoutes = this.getCurrentMenu(pathname); - return (
{this.renderNotice()} +
+ {/* {this.renderLogo()} */} + {this.renderHeader()} +
{ const { @@ -184,7 +184,7 @@ export default class Password extends Component { - + {t('Back to login page')} diff --git a/src/pages/user/containers/ChangePassword/index.less b/src/pages/auth/containers/ChangePassword/index.less similarity index 100% rename from src/pages/user/containers/ChangePassword/index.less rename to src/pages/auth/containers/ChangePassword/index.less diff --git a/src/pages/user/containers/Login/index.jsx b/src/pages/auth/containers/Login/index.jsx similarity index 99% rename from src/pages/user/containers/Login/index.jsx rename to src/pages/auth/containers/Login/index.jsx index b518f488..cf16ed27 100644 --- a/src/pages/user/containers/Login/index.jsx +++ b/src/pages/auth/containers/Login/index.jsx @@ -218,7 +218,7 @@ export default class Login extends Component { userId, }; this.rootStore.setPasswordInfo(data); - this.rootStore.routing.push('/user/changepassword'); + this.rootStore.routing.push('/auth/changepassword'); } else { this.setState({ error: true, diff --git a/src/pages/user/containers/Login/index.less b/src/pages/auth/containers/Login/index.less similarity index 100% rename from src/pages/user/containers/Login/index.less rename to src/pages/auth/containers/Login/index.less diff --git a/src/pages/user/routes/index.js b/src/pages/auth/routes/index.js similarity index 91% rename from src/pages/user/routes/index.js rename to src/pages/auth/routes/index.js index 5f281fc3..13d52b2d 100644 --- a/src/pages/user/routes/index.js +++ b/src/pages/auth/routes/index.js @@ -12,15 +12,15 @@ // See the License for the specific language governing permissions and // limitations under the License. -import UserLayout from 'layouts/User'; +import AuthLayout from '@/layouts/Auth'; import Login from '../containers/Login'; import ChangePassword from '../containers/ChangePassword'; -const PATH = '/user'; +const PATH = '/auth'; export default [ { path: PATH, - component: UserLayout, + component: AuthLayout, routes: [ { path: `${PATH}/login`, component: Login, exact: true }, { diff --git a/src/pages/base/routes/index.js b/src/pages/base/routes/index.js index 87e1b56a..89301a94 100644 --- a/src/pages/base/routes/index.js +++ b/src/pages/base/routes/index.js @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import BaseLayout from 'layouts/Base'; +import BaseLayout from '@/layouts/Basic'; import E404 from '../containers/404'; import Overview from '../containers/Overview'; import AdminOverview from '../containers/AdminOverview'; @@ -25,7 +25,6 @@ export default [ routes: [ { path: `${PATH}/overview`, component: Overview, exact: true }, { path: `${PATH}/overview-admin`, component: AdminOverview, exact: true }, - { path: `${PATH}/404`, component: E404, exact: true }, { path: '*', component: E404 }, ], }, diff --git a/src/pages/basic/App.jsx b/src/pages/basic/App.jsx new file mode 100644 index 00000000..d2a5fc21 --- /dev/null +++ b/src/pages/basic/App.jsx @@ -0,0 +1,21 @@ +// Copyright 2021 99cloud +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import renderRoutes from 'utils/RouterConfig'; + +import routes from './routes'; + +const App = () => renderRoutes(routes); + +export default App; diff --git a/src/pages/basic/routes/index.js b/src/pages/basic/routes/index.js new file mode 100644 index 00000000..62f94937 --- /dev/null +++ b/src/pages/basic/routes/index.js @@ -0,0 +1,80 @@ +// Copyright 2021 99cloud +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +import { lazy } from 'react'; +import BaseLayout from 'layouts/Base'; + +const Base = lazy(() => + import(/* webpackChunkName: "base" */ '@/pages/base/App') +); +const Compute = lazy(() => + import(/* webpackChunkName: "compute" */ '@/pages/compute/App') +); +const Storage = lazy(() => + import(/* webpackChunkName: "storage" */ '@/pages/storage/App') +); +const Network = lazy(() => + import(/* webpackChunkName: "network" */ '@/pages/network/App') +); +const Identity = lazy(() => + import(/* webpackChunkName: "identity" */ '@/pages/identity/App') +); +const Configs = lazy(() => + import(/* webpackChunkName: "configuration" */ '@/pages/configuration/App') +); +const Management = lazy(() => + import(/* webpackChunkName: "management" */ '@/pages/management/App') +); +const Heat = lazy(() => + import(/* webpackChunkName: "heat" */ '@/pages/heat/App') +); +const E404 = lazy(() => + import(/* webpackChunkName: "E404" */ '@/pages/base/containers/404') +); +const PATH = '/'; + +export default [ + { + path: PATH, + component: BaseLayout, + routes: [ + { path: `/base`, component: Base }, + { + path: `/compute`, + component: Compute, + }, + { path: `/storage`, component: Storage }, + { + path: `/network`, + component: Network, + }, + { + path: `/identity`, + component: Identity, + }, + { + path: `/configuration-admin`, + component: Configs, + }, + { + path: `/management`, + component: Management, + }, + { + path: `/heat`, + component: Heat, + }, + { path: '*', component: E404 }, + ], + }, +]; diff --git a/src/pages/compute/routes/index.js b/src/pages/compute/routes/index.js index 87b701e8..7878f1ce 100644 --- a/src/pages/compute/routes/index.js +++ b/src/pages/compute/routes/index.js @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import BaseLayout from 'layouts/Base'; +import BaseLayout from '@/layouts/Basic'; import E404 from 'pages/base/containers/404'; import Instance from '../containers/Instance'; import InstanceDetail from '../containers/Instance/Detail'; diff --git a/src/pages/configuration/routes/index.js b/src/pages/configuration/routes/index.js index 3d45f66a..8cde061c 100644 --- a/src/pages/configuration/routes/index.js +++ b/src/pages/configuration/routes/index.js @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import BaseLayout from 'layouts/Base'; +import BaseLayout from '@/layouts/Basic'; import E404 from 'pages/base/containers/404'; import SystemInfo from '../containers/SystemInfo'; import Setting from '../containers/Setting'; diff --git a/src/pages/heat/routes/index.js b/src/pages/heat/routes/index.js index 3d9c6ff8..62ad680d 100644 --- a/src/pages/heat/routes/index.js +++ b/src/pages/heat/routes/index.js @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import BaseLayout from 'layouts/Base'; +import BaseLayout from '@/layouts/Basic'; import E404 from 'pages/base/containers/404'; import Stack from '../containers/Stack'; import StackDetail from '../containers/Stack/Detail'; diff --git a/src/pages/identity/routes/index.js b/src/pages/identity/routes/index.js index d82db11b..8cd65d36 100644 --- a/src/pages/identity/routes/index.js +++ b/src/pages/identity/routes/index.js @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import BaseLayout from 'layouts/Base'; +import BaseLayout from '@/layouts/Basic'; import E404 from 'pages/base/containers/404'; import Domain from '../containers/Domain'; import DomainCreate from '../containers/Domain/actions/Create'; diff --git a/src/pages/management/routes/index.js b/src/pages/management/routes/index.js index 0a776738..5287f636 100644 --- a/src/pages/management/routes/index.js +++ b/src/pages/management/routes/index.js @@ -12,8 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import BaseLayout from 'layouts/Base'; - +import BaseLayout from '@/layouts/Basic'; import E404 from 'pages/base/containers/404'; // import InstanceDetail from 'pages/compute/containers/Instance/Detail'; // import RecycleBin from '../containers/RecycleBin'; diff --git a/src/pages/network/routes/index.js b/src/pages/network/routes/index.js index ccce5a3b..a3d8cf66 100644 --- a/src/pages/network/routes/index.js +++ b/src/pages/network/routes/index.js @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import BaseLayout from 'layouts/Base'; +import BaseLayout from '@/layouts/Basic'; import E404 from 'pages/base/containers/404'; import Network from '../containers/Network'; import AdminNetwork from '../containers/Network/AdminNetwork'; diff --git a/src/pages/storage/routes/index.js b/src/pages/storage/routes/index.js index f517ef11..f71754b2 100644 --- a/src/pages/storage/routes/index.js +++ b/src/pages/storage/routes/index.js @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import BaseLayout from 'layouts/Base'; +import BaseLayout from '@/layouts/Basic'; import E404 from 'pages/base/containers/404'; import Snapshot from '../containers/Snapshot'; import SnapshotDetail from '../containers/Snapshot/Detail'; diff --git a/src/stores/root.js b/src/stores/root.js index fdd29cd8..85266716 100644 --- a/src/stores/root.js +++ b/src/stores/root.js @@ -228,9 +228,9 @@ class RootStore { @action gotoLoginPage(currentPath, refresh) { if (currentPath) { - this.routing.push(`/user/login?referer=${currentPath}`); + this.routing.push(`/auth/login?referer=${currentPath}`); } else { - this.routing.push('/user/login'); + this.routing.push('/auth/login'); } if (refresh) { window.location.reload(); diff --git a/src/styles/base.less b/src/styles/base.less index dbbd25b8..0078f5e2 100644 --- a/src/styles/base.less +++ b/src/styles/base.less @@ -72,7 +72,7 @@ .sl-page { &-loading { - position: fixed; + position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);