diff --git a/.eslintrc b/.eslintrc
index 77090a30..a2873ea5 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -32,7 +32,8 @@
           ["layouts", "./src/layouts"],
           ["client", "./src/client"],
           ["resources", "./src/resources"],
-          ["core", "./src/core"]
+          ["core", "./src/core"],
+          ["asset", "./src/asset"]
         ],
         "extensions": [".js", ".jsx"]
       }
@@ -68,6 +69,7 @@
     "import/no-extraneous-dependencies": "warn",
     "import/prefer-default-export": "warn",
     "no-nested-ternary": "warn",
+    "import/no-named-as-default": "warn"
   },
   "globals": {
     "t": true,
diff --git a/src/client/client/request.js b/src/client/client/request.js
index 88943b75..e40b1ad6 100644
--- a/src/client/client/request.js
+++ b/src/client/client/request.js
@@ -30,6 +30,10 @@ export class HttpRequest {
     this.request = {};
   }
 
+  gotoLoginPage(path) {
+    globalRootStore.gotoLoginPage(path);
+  }
+
   /**
    * @param instance instance of axios
    * @param url request url
@@ -93,7 +97,7 @@ export class HttpRequest {
           if (status === 401) {
             const currentPath = window.location.pathname;
             if (currentPath.indexOf('login') < 0) {
-              globalRootStore.gotoLoginPage(currentPath);
+              this.gotoLoginPage(currentPath);
             }
           }
         }
diff --git a/src/components/Cards/NotFound/index.jsx b/src/components/Cards/NotFound/index.jsx
index 27702ba3..1dd99366 100644
--- a/src/components/Cards/NotFound/index.jsx
+++ b/src/components/Cards/NotFound/index.jsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from 'react';
-import emptyCard from '@/asset/image/empty-card.svg';
+import emptyCard from 'asset/image/empty-card.svg';
 import { firstUpperCase } from 'utils/index';
 import { Link } from 'react-router-dom';
 import styles from './index.less';
diff --git a/src/components/Notify/index.jsx b/src/components/Notify/index.jsx
index acea9981..9fae242f 100644
--- a/src/components/Notify/index.jsx
+++ b/src/components/Notify/index.jsx
@@ -25,7 +25,7 @@ import CodeEditor from 'components/CodeEditor';
 import ModalButton from 'components/ModalButton';
 import globalRootStore from 'stores/root';
 import { unescapeHtml } from 'utils/index';
-import { statusMap } from '@/resources/code';
+import { statusMap } from 'resources/code';
 import { isEmpty, isString } from 'lodash';
 import styles from './index.less';
 
diff --git a/src/core/routes.js b/src/core/routes.js
index 0a9836e6..c0823a2b 100644
--- a/src/core/routes.js
+++ b/src/core/routes.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import BlankLayout from '@/layouts/Blank';
+import BlankLayout from 'layouts/Blank';
 import E404 from 'pages/base/containers/404';
 import { lazy } from 'react';
 
diff --git a/src/pages/auth/routes/index.js b/src/pages/auth/routes/index.js
index ad2150f6..c2d23bde 100644
--- a/src/pages/auth/routes/index.js
+++ b/src/pages/auth/routes/index.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import AuthLayout from '@/layouts/Auth';
+import AuthLayout from 'layouts/Auth';
 import Login from '../containers/Login';
 import ChangePassword from '../containers/ChangePassword';
 
diff --git a/src/pages/base/containers/AdminOverview/components/PlatformInfo.jsx b/src/pages/base/containers/AdminOverview/components/PlatformInfo.jsx
index 7420c196..d94ca12c 100644
--- a/src/pages/base/containers/AdminOverview/components/PlatformInfo.jsx
+++ b/src/pages/base/containers/AdminOverview/components/PlatformInfo.jsx
@@ -48,8 +48,6 @@ const actions = [
   },
 ];
 
-@inject('rootStore')
-@observer
 class ProjectInfo extends Component {
   componentDidMount() {
     this.props.store.getProjectInfoData();
@@ -101,4 +99,4 @@ ProjectInfo.propTypes = {
   store: PropTypes.object.isRequired,
 };
 
-export default ProjectInfo;
+export default inject('rootStore')(observer(ProjectInfo));
diff --git a/src/pages/base/containers/AdminOverview/components/ResourceOverview.jsx b/src/pages/base/containers/AdminOverview/components/ResourceOverview.jsx
index f92deff9..f217efeb 100644
--- a/src/pages/base/containers/AdminOverview/components/ResourceOverview.jsx
+++ b/src/pages/base/containers/AdminOverview/components/ResourceOverview.jsx
@@ -81,8 +81,6 @@ const volumeColors = {
   other: { color: '#F6B23D', text: t('Others') },
 };
 
-@inject('rootStore')
-@observer
 class virtualResourceInfo extends Component {
   componentDidMount() {
     this.props.store.getVirtualResource();
@@ -199,4 +197,4 @@ virtualResourceInfo.propTypes = {
   store: PropTypes.object.isRequired,
 };
 
-export default virtualResourceInfo;
+export default inject('rootStore')(observer(virtualResourceInfo));
diff --git a/src/pages/base/containers/AdminOverview/components/VirtualResource.jsx b/src/pages/base/containers/AdminOverview/components/VirtualResource.jsx
index 88bf1924..3361435a 100644
--- a/src/pages/base/containers/AdminOverview/components/VirtualResource.jsx
+++ b/src/pages/base/containers/AdminOverview/components/VirtualResource.jsx
@@ -36,8 +36,7 @@ export const color = {
   warnColor: '#FE9901',
   dangerColor: '#D93126',
 };
-@inject('rootStore')
-@observer
+
 class ResourceCircle extends Component {
   constructor(props) {
     super(props);
@@ -129,4 +128,4 @@ class ResourceCircle extends Component {
   }
 }
 
-export default ResourceCircle;
+export default inject('rootStore')(observer(ResourceCircle));
diff --git a/src/pages/base/containers/Overview/components/ProjectInfo.jsx b/src/pages/base/containers/Overview/components/ProjectInfo.jsx
index ea32ce82..e9c6f72f 100644
--- a/src/pages/base/containers/Overview/components/ProjectInfo.jsx
+++ b/src/pages/base/containers/Overview/components/ProjectInfo.jsx
@@ -18,8 +18,6 @@ import { inject, observer } from 'mobx-react';
 import { UpOutlined, DownOutlined } from '@ant-design/icons';
 import styles from '../style.less';
 
-@inject('rootStore')
-@observer
 class ProjectInfo extends Component {
   constructor(props) {
     super(props);
@@ -87,4 +85,4 @@ class ProjectInfo extends Component {
   }
 }
 
-export default ProjectInfo;
+export default inject('rootStore')(observer(ProjectInfo));
diff --git a/src/pages/base/containers/Overview/components/QuotaOverview.jsx b/src/pages/base/containers/Overview/components/QuotaOverview.jsx
index 56707e93..c36fd385 100644
--- a/src/pages/base/containers/Overview/components/QuotaOverview.jsx
+++ b/src/pages/base/containers/Overview/components/QuotaOverview.jsx
@@ -27,8 +27,6 @@ const colors = {
   full: { color: '#E8684A', text: t('Full') },
 };
 
-@inject('rootStore')
-@observer
 class QuotaOverview extends Component {
   constructor(props) {
     super(props);
@@ -272,4 +270,4 @@ class QuotaOverview extends Component {
   }
 }
 
-export default QuotaOverview;
+export default inject('rootStore')(observer(QuotaOverview));
diff --git a/src/pages/base/routes/index.js b/src/pages/base/routes/index.js
index 89301a94..6577acba 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/Basic';
+import BaseLayout from 'layouts/Basic';
 import E404 from '../containers/404';
 import Overview from '../containers/Overview';
 import AdminOverview from '../containers/AdminOverview';
diff --git a/src/pages/compute/containers/Flavor/Arm/index.jsx b/src/pages/compute/containers/Flavor/Arm/index.jsx
index d6dd3442..f4241ba4 100644
--- a/src/pages/compute/containers/Flavor/Arm/index.jsx
+++ b/src/pages/compute/containers/Flavor/Arm/index.jsx
@@ -25,9 +25,7 @@ import {
 import { getOptions } from 'utils/index';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class Flavor extends Base {
+export class Flavor extends Base {
   init() {
     this.store = new FlavorStore();
   }
@@ -69,3 +67,5 @@ export default class Flavor extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Flavor));
\ No newline at end of file
diff --git a/src/pages/compute/containers/Flavor/BareMetal/index.jsx b/src/pages/compute/containers/Flavor/BareMetal/index.jsx
index f01148a2..bc311025 100644
--- a/src/pages/compute/containers/Flavor/BareMetal/index.jsx
+++ b/src/pages/compute/containers/Flavor/BareMetal/index.jsx
@@ -23,9 +23,7 @@ import {
 } from 'resources/flavor';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class Flavor extends Base {
+export class Flavor extends Base {
   init() {
     this.store = new FlavorStore();
   }
@@ -70,3 +68,5 @@ export default class Flavor extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Flavor));
diff --git a/src/pages/compute/containers/Flavor/Heterogeneous/index.jsx b/src/pages/compute/containers/Flavor/Heterogeneous/index.jsx
index 919c4a36..ac2bfa90 100644
--- a/src/pages/compute/containers/Flavor/Heterogeneous/index.jsx
+++ b/src/pages/compute/containers/Flavor/Heterogeneous/index.jsx
@@ -26,9 +26,7 @@ import {
 import { getOptions } from 'utils/index';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class Flavor extends Base {
+export class Flavor extends Base {
   init() {
     this.store = new FlavorStore();
   }
@@ -71,3 +69,5 @@ export default class Flavor extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Flavor));
diff --git a/src/pages/compute/containers/Flavor/Other/index.jsx b/src/pages/compute/containers/Flavor/Other/index.jsx
index 4acefdc9..9e787959 100644
--- a/src/pages/compute/containers/Flavor/Other/index.jsx
+++ b/src/pages/compute/containers/Flavor/Other/index.jsx
@@ -19,9 +19,7 @@ import { emptyActionConfig } from 'utils/constants';
 import { getBaseColumns, extraColumns } from 'resources/flavor';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class Flavor extends Base {
+export class Flavor extends Base {
   init() {
     this.store = new FlavorStore();
   }
@@ -62,3 +60,5 @@ export default class Flavor extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Flavor));
diff --git a/src/pages/compute/containers/Flavor/X86/index.jsx b/src/pages/compute/containers/Flavor/X86/index.jsx
index e42d819c..17e6b975 100644
--- a/src/pages/compute/containers/Flavor/X86/index.jsx
+++ b/src/pages/compute/containers/Flavor/X86/index.jsx
@@ -25,9 +25,7 @@ import {
 import { getOptions } from 'utils/index';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class Flavor extends Base {
+export class Flavor extends Base {
   init() {
     this.store = new FlavorStore();
   }
@@ -69,3 +67,5 @@ export default class Flavor extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Flavor));
diff --git a/src/pages/compute/containers/Flavor/actions/StepCreate/ParamSetting.jsx b/src/pages/compute/containers/Flavor/actions/StepCreate/ParamSetting.jsx
index 7826b203..ccba3006 100644
--- a/src/pages/compute/containers/Flavor/actions/StepCreate/ParamSetting.jsx
+++ b/src/pages/compute/containers/Flavor/actions/StepCreate/ParamSetting.jsx
@@ -37,9 +37,7 @@ import { parse } from 'qs';
 import KeyValueInput from 'components/FormItem/KeyValueInput';
 import { isEmpty } from 'lodash';
 
-@inject('rootStore')
-@observer
-export default class ParamSetting extends Base {
+export class ParamSetting extends Base {
   init() {
     this.settingStore = globalSettingStore;
     this.getSettings();
@@ -520,3 +518,5 @@ export default class ParamSetting extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(ParamSetting));
diff --git a/src/pages/compute/containers/HostAggregate/Aggregate/actions/Create.jsx b/src/pages/compute/containers/HostAggregate/Aggregate/actions/Create.jsx
index ccf2d376..a3756f62 100644
--- a/src/pages/compute/containers/HostAggregate/Aggregate/actions/Create.jsx
+++ b/src/pages/compute/containers/HostAggregate/Aggregate/actions/Create.jsx
@@ -14,7 +14,7 @@
 
 import { inject, observer } from 'mobx-react';
 import globalAggregateStore from 'stores/nova/aggregate';
-import { ModalAction } from '@/containers/Action';
+import { ModalAction } from 'containers/Action';
 import globalAvailabilityZoneStore from 'stores/nova/zone';
 import { getYesNoList } from 'utils/index';
 
diff --git a/src/pages/compute/containers/Hypervisors/Hypervisor/Detail/index.jsx b/src/pages/compute/containers/Hypervisors/Hypervisor/Detail/index.jsx
index e3fba577..785a932b 100644
--- a/src/pages/compute/containers/Hypervisors/Hypervisor/Detail/index.jsx
+++ b/src/pages/compute/containers/Hypervisors/Hypervisor/Detail/index.jsx
@@ -17,9 +17,7 @@ import { HypervisorStore } from 'stores/nova/hypervisor';
 import Base from 'containers/TabDetail';
 import Members from 'pages/compute/containers/Instance';
 
-@inject('rootStore')
-@observer
-export default class HypervisorDetail extends Base {
+export class HypervisorDetail extends Base {
   get name() {
     return t('hypervisor');
   }
@@ -71,3 +69,5 @@ export default class HypervisorDetail extends Base {
     this.store = new HypervisorStore();
   }
 }
+
+export default inject('rootStore')(observer(HypervisorDetail));
diff --git a/src/pages/compute/containers/Hypervisors/Hypervisor/index.jsx b/src/pages/compute/containers/Hypervisors/Hypervisor/index.jsx
index 9079e05b..5b8c1782 100644
--- a/src/pages/compute/containers/Hypervisors/Hypervisor/index.jsx
+++ b/src/pages/compute/containers/Hypervisors/Hypervisor/index.jsx
@@ -17,9 +17,7 @@ import Base from 'containers/List';
 import globalHypervisorStore from 'stores/nova/hypervisor';
 import { hypervisorColumns, hypervisorFilters } from 'resources/hypervisor';
 
-@inject('rootStore')
-@observer
-export default class Hypervisors extends Base {
+export class Hypervisors extends Base {
   init() {
     this.store = globalHypervisorStore;
   }
@@ -59,3 +57,5 @@ export default class Hypervisors extends Base {
     return hypervisorFilters;
   }
 }
+
+export default inject('rootStore')(observer(Hypervisors));
diff --git a/src/pages/compute/containers/Image/Detail/BaseDetail.jsx b/src/pages/compute/containers/Image/Detail/BaseDetail.jsx
index 4a70ab25..96692edc 100644
--- a/src/pages/compute/containers/Image/Detail/BaseDetail.jsx
+++ b/src/pages/compute/containers/Image/Detail/BaseDetail.jsx
@@ -20,9 +20,7 @@ import Base from 'containers/BaseDetail';
 import { isObject, isArray } from 'lodash';
 import { Link } from 'react-router-dom';
 
-@inject('rootStore')
-@observer
-export default class BaseDetail extends Base {
+export class BaseDetail extends Base {
   get isImageDetail() {
     const { pathname } = this.props.location;
     return pathname.indexOf('image') >= 0;
@@ -197,3 +195,5 @@ export default class BaseDetail extends Base {
     };
   }
 }
+
+export default inject('rootStore')(observer(BaseDetail));
diff --git a/src/pages/compute/containers/Image/Detail/index.jsx b/src/pages/compute/containers/Image/Detail/index.jsx
index b3d0fe3b..fb979a17 100644
--- a/src/pages/compute/containers/Image/Detail/index.jsx
+++ b/src/pages/compute/containers/Image/Detail/index.jsx
@@ -19,9 +19,7 @@ import Base from 'containers/TabDetail';
 import BaseDetail from './BaseDetail';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class ImageDetail extends Base {
+export class ImageDetail extends Base {
   get name() {
     return this.isImageDetail ? t('image') : t('instance snapshot');
   }
@@ -92,3 +90,5 @@ export default class ImageDetail extends Base {
     this.store = new ImageStore();
   }
 }
+
+export default inject('rootStore')(observer(ImageDetail));
diff --git a/src/pages/compute/containers/Image/actions/Create.jsx b/src/pages/compute/containers/Image/actions/Create.jsx
index 30de6937..5f45fdbf 100644
--- a/src/pages/compute/containers/Image/actions/Create.jsx
+++ b/src/pages/compute/containers/Image/actions/Create.jsx
@@ -27,8 +27,6 @@ import { NoSetValue, getOptionsWithNoset, getOptions } from 'utils/index';
 import { ProjectStore } from 'stores/keystone/project';
 import { projectTableOptions } from 'resources/project';
 
-@inject('rootStore')
-@observer
 class CreateForm extends FormAction {
   init() {
     this.store = globalImageStore;
@@ -334,4 +332,4 @@ class CreateForm extends FormAction {
   };
 }
 
-export default CreateForm;
+export default inject('rootStore')(observer(CreateForm));
diff --git a/src/pages/compute/containers/Image/actions/CreateVolume.jsx b/src/pages/compute/containers/Image/actions/CreateVolume.jsx
index a8d8e728..ad4bdd91 100644
--- a/src/pages/compute/containers/Image/actions/CreateVolume.jsx
+++ b/src/pages/compute/containers/Image/actions/CreateVolume.jsx
@@ -16,9 +16,7 @@ import { inject, observer } from 'mobx-react';
 import { ModalAction } from 'containers/Action';
 import globalVolumeStore from 'stores/cinder/volume';
 
-@inject('rootStore')
-@observer
-export default class CreateVolume extends ModalAction {
+export class CreateVolume extends ModalAction {
   static id = 'create';
 
   static title = t('Create Volume');
@@ -110,3 +108,5 @@ export default class CreateVolume extends ModalAction {
     return globalVolumeStore.create(body);
   };
 }
+
+export default inject('rootStore')(observer(CreateVolume));
diff --git a/src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx b/src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx
index 2958cf90..3c1ab93a 100644
--- a/src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx
+++ b/src/pages/compute/containers/Instance/Detail/BaseDetail/index.jsx
@@ -37,9 +37,7 @@ import { getSinceTime } from 'utils/time';
 import AttachVolume from 'pages/compute/containers/Instance/actions/AttachVolume';
 import styles from './index.less';
 
-@inject('rootStore')
-@observer
-export default class BaseDetail extends Base {
+export class BaseDetail extends Base {
   componentDidMount() {
     this.fetchVolumes();
     this.fetchInterfaces();
@@ -424,3 +422,5 @@ export default class BaseDetail extends Base {
     };
   }
 }
+
+export default inject('rootStore')(observer(BaseDetail));
diff --git a/src/pages/compute/containers/Instance/Detail/SecurityGroup/index.jsx b/src/pages/compute/containers/Instance/Detail/SecurityGroup/index.jsx
index 06512be5..5ab5cb92 100644
--- a/src/pages/compute/containers/Instance/Detail/SecurityGroup/index.jsx
+++ b/src/pages/compute/containers/Instance/Detail/SecurityGroup/index.jsx
@@ -29,7 +29,7 @@ import {
 } from 'antd';
 import PrimaryActionButtons from 'components/Tables/Base/PrimaryActionButtons';
 import classnames from 'classnames';
-import interfaceImg from '@/asset/image/interface.png';
+import interfaceImg from 'asset/image/interface.png';
 import { CaretRightOutlined } from '@ant-design/icons';
 import ItemActionButtons from 'components/Tables/Base/ItemActionButtons';
 import { getSelfColumns } from 'resources/security-group-rule';
@@ -41,9 +41,7 @@ import ManageSecurityGroup from './action/ManageSecurityGroup';
 const { Panel } = Collapse;
 const { TabPane } = Tabs;
 
-@inject('rootStore')
-@observer
-export default class SecurityGroup extends React.Component {
+export class SecurityGroup extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -248,3 +246,5 @@ export default class SecurityGroup extends React.Component {
     );
   }
 }
+
+export default inject('rootStore')(observer(SecurityGroup));
diff --git a/src/pages/compute/containers/Instance/Detail/index.jsx b/src/pages/compute/containers/Instance/Detail/index.jsx
index 7aa46123..c2efe7ff 100644
--- a/src/pages/compute/containers/Instance/Detail/index.jsx
+++ b/src/pages/compute/containers/Instance/Detail/index.jsx
@@ -30,9 +30,7 @@ import SecurityGroup from './SecurityGroup';
 import ActionLog from './ActionLog';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class InstanceDetail extends Base {
+export class InstanceDetail extends Base {
   get name() {
     return t('instance');
   }
@@ -161,3 +159,5 @@ export default class InstanceDetail extends Base {
     this.store = new ServerStore();
   }
 }
+
+export default inject('rootStore')(observer(InstanceDetail));
diff --git a/src/pages/compute/containers/Instance/actions/AttachIsoVolume.jsx b/src/pages/compute/containers/Instance/actions/AttachIsoVolume.jsx
index 8da6aa27..4a249f6f 100644
--- a/src/pages/compute/containers/Instance/actions/AttachIsoVolume.jsx
+++ b/src/pages/compute/containers/Instance/actions/AttachIsoVolume.jsx
@@ -24,9 +24,7 @@ import {
 import { multiTip } from 'resources/volume';
 import { get as _get } from 'lodash';
 
-@inject('rootStore')
-@observer
-export default class AttachIsoVolume extends ModalAction {
+export class AttachIsoVolume extends ModalAction {
   static id = 'attach-iso-volume';
 
   static title = t('Attach Iso Volume');
@@ -128,3 +126,5 @@ export default class AttachIsoVolume extends ModalAction {
     return this.store.attachVolume({ id, body });
   };
 }
+
+export default inject('rootStore')(observer(AttachIsoVolume));
diff --git a/src/pages/compute/containers/Instance/actions/AttachVolume.jsx b/src/pages/compute/containers/Instance/actions/AttachVolume.jsx
index f81fef0f..5ac960dc 100644
--- a/src/pages/compute/containers/Instance/actions/AttachVolume.jsx
+++ b/src/pages/compute/containers/Instance/actions/AttachVolume.jsx
@@ -24,9 +24,7 @@ import {
 import { multiTip } from 'resources/volume';
 import { get as _get } from 'lodash';
 
-@inject('rootStore')
-@observer
-export default class AttachVolume extends ModalAction {
+export class AttachVolume extends ModalAction {
   static id = 'attach-volume';
 
   static title = t('Attach Volume');
@@ -111,3 +109,5 @@ export default class AttachVolume extends ModalAction {
     return this.store.attachVolume({ id, body });
   };
 }
+
+export default inject('rootStore')(observer(AttachVolume));
diff --git a/src/pages/compute/containers/Instance/actions/CreateIronic/BaseStep/index.jsx b/src/pages/compute/containers/Instance/actions/CreateIronic/BaseStep/index.jsx
index 9a4553b4..ef555236 100644
--- a/src/pages/compute/containers/Instance/actions/CreateIronic/BaseStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/CreateIronic/BaseStep/index.jsx
@@ -26,9 +26,7 @@ import {
 import Base from 'components/Form';
 import FlavorSelectTable from '../../../components/FlavorSelectTable';
 
-@inject('rootStore')
-@observer
-export default class BaseStep extends Base {
+export class BaseStep extends Base {
   init() {
     this.imageStore = globalImageStore;
     this.getAvailZones();
@@ -209,3 +207,5 @@ export default class BaseStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(BaseStep));
diff --git a/src/pages/compute/containers/Instance/actions/CreateIronic/ConfirmStep/index.jsx b/src/pages/compute/containers/Instance/actions/CreateIronic/ConfirmStep/index.jsx
index c792f285..835ffe56 100644
--- a/src/pages/compute/containers/Instance/actions/CreateIronic/ConfirmStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/CreateIronic/ConfirmStep/index.jsx
@@ -15,9 +15,7 @@
 import { inject, observer } from 'mobx-react';
 import Base from 'components/Form';
 
-@inject('rootStore')
-@observer
-export default class ConfirmStep extends Base {
+export class ConfirmStep extends Base {
   init() {}
 
   get title() {
@@ -169,3 +167,5 @@ export default class ConfirmStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(ConfirmStep));
diff --git a/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx b/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx
index b72d1441..953e262e 100644
--- a/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/CreateIronic/NetworkStep/index.jsx
@@ -33,9 +33,7 @@ import {
 // import EditYamlModal from 'components/Modals/EditYaml';
 const { isIPv4, isIpv6 } = ipValidate;
 
-@inject('rootStore')
-@observer
-export default class NetworkStep extends Base {
+export class NetworkStep extends Base {
   init() {
     this.networkStore = new NetworkStore();
     this.subnetStore = new SubnetStore();
@@ -259,3 +257,5 @@ export default class NetworkStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(NetworkStep));
diff --git a/src/pages/compute/containers/Instance/actions/CreateIronic/SystemStep/index.jsx b/src/pages/compute/containers/Instance/actions/CreateIronic/SystemStep/index.jsx
index 540af8e3..fe96b2d5 100644
--- a/src/pages/compute/containers/Instance/actions/CreateIronic/SystemStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/CreateIronic/SystemStep/index.jsx
@@ -17,9 +17,7 @@ import globalKeyPairStore from 'stores/nova/keypair';
 import Base from 'components/Form';
 import { getPasswordOtherRule } from 'utils/validate';
 
-@inject('rootStore')
-@observer
-export default class SystemStep extends Base {
+export class SystemStep extends Base {
   init() {
     this.keyPairStore = globalKeyPairStore;
     this.getKeypairs();
@@ -142,3 +140,5 @@ export default class SystemStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(SystemStep));
diff --git a/src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx b/src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx
index 23e100b1..fb805403 100644
--- a/src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/CreateIronic/index.jsx
@@ -30,9 +30,7 @@ import SystemStep from './SystemStep';
 import NetworkStep from './NetworkStep';
 import BaseStep from './BaseStep';
 
-@inject('rootStore')
-@observer
-export default class CreateIronic extends StepAction {
+export class CreateIronic extends StepAction {
   static id = 'ironic-create';
 
   static title = t('Create Ironic Instance');
@@ -344,3 +342,5 @@ export default class CreateIronic extends StepAction {
     );
   };
 }
+
+export default inject('rootStore')(observer(CreateIronic));
diff --git a/src/pages/compute/containers/Instance/actions/CreateSnapshot.jsx b/src/pages/compute/containers/Instance/actions/CreateSnapshot.jsx
index 2bf06bc5..095ce8c5 100644
--- a/src/pages/compute/containers/Instance/actions/CreateSnapshot.jsx
+++ b/src/pages/compute/containers/Instance/actions/CreateSnapshot.jsx
@@ -19,9 +19,7 @@ import { checkStatus, isIronicInstance } from 'resources/instance';
 import globalInstanceVolumeStore from 'stores/nova/instance-volume';
 import globalVolumeTypeStore from 'stores/cinder/volume-type';
 
-@inject('rootStore')
-@observer
-export default class CreateSnapshot extends ModalAction {
+export class CreateSnapshot extends ModalAction {
   static id = 'create-snapshot';
 
   static title = t('Create Snapshot');
@@ -87,3 +85,5 @@ export default class CreateSnapshot extends ModalAction {
     return this.store.createImage({ id, image: snapshot });
   };
 }
+
+export default inject('rootStore')(observer(CreateSnapshot));
diff --git a/src/pages/compute/containers/Instance/actions/DetachIsoVolume.jsx b/src/pages/compute/containers/Instance/actions/DetachIsoVolume.jsx
index cf675fe5..a9fe4e17 100644
--- a/src/pages/compute/containers/Instance/actions/DetachIsoVolume.jsx
+++ b/src/pages/compute/containers/Instance/actions/DetachIsoVolume.jsx
@@ -24,9 +24,7 @@ import {
   isIronicInstance,
 } from 'resources/instance';
 
-@inject('rootStore')
-@observer
-export default class DetachIsoVolume extends ModalAction {
+export class DetachIsoVolume extends ModalAction {
   static id = 'detach-iso-volume';
 
   static title = t('Detach Iso Volume');
@@ -143,3 +141,5 @@ export default class DetachIsoVolume extends ModalAction {
     return this.store.detachVolume({ id, volumes: selectedRowKeys });
   };
 }
+
+export default inject('rootStore')(observer(DetachIsoVolume));
diff --git a/src/pages/compute/containers/Instance/actions/DetachVolume.jsx b/src/pages/compute/containers/Instance/actions/DetachVolume.jsx
index 26132d4d..1c23f91c 100644
--- a/src/pages/compute/containers/Instance/actions/DetachVolume.jsx
+++ b/src/pages/compute/containers/Instance/actions/DetachVolume.jsx
@@ -24,9 +24,7 @@ import {
   isIronicInstance,
 } from 'resources/instance';
 
-@inject('rootStore')
-@observer
-export default class DetachVolume extends ModalAction {
+export class DetachVolume extends ModalAction {
   static id = 'detach-volume';
 
   static title = t('Detach Volume');
@@ -137,3 +135,5 @@ export default class DetachVolume extends ModalAction {
     return this.store.detachVolume({ id, volumes: selectedRowKeys });
   };
 }
+
+export default inject('rootStore')(observer(DetachVolume));
diff --git a/src/pages/compute/containers/Instance/actions/ExtendRootVolume.jsx b/src/pages/compute/containers/Instance/actions/ExtendRootVolume.jsx
index d1cb3e3e..5d2f5cb1 100644
--- a/src/pages/compute/containers/Instance/actions/ExtendRootVolume.jsx
+++ b/src/pages/compute/containers/Instance/actions/ExtendRootVolume.jsx
@@ -21,9 +21,7 @@ import { ModalAction } from 'containers/Action';
 import { isNotLocked, checkStatus, isIronicInstance } from 'resources/instance';
 import { isOsDisk } from 'resources/volume';
 
-@inject('rootStore')
-@observer
-export default class ExtendRootVolume extends ModalAction {
+export class ExtendRootVolume extends ModalAction {
   static id = 'extend-root-volume';
 
   static title = t('Extend Root Volume');
@@ -118,3 +116,5 @@ export default class ExtendRootVolume extends ModalAction {
     return globalVolumeStore.extendSize(id, body);
   };
 }
+
+export default inject('rootStore')(observer(ExtendRootVolume));
diff --git a/src/pages/compute/containers/Instance/actions/RebuildSelect.jsx b/src/pages/compute/containers/Instance/actions/RebuildSelect.jsx
index 582f86e6..0c3230f8 100644
--- a/src/pages/compute/containers/Instance/actions/RebuildSelect.jsx
+++ b/src/pages/compute/containers/Instance/actions/RebuildSelect.jsx
@@ -29,9 +29,7 @@ import {
   canImageCreateInstance,
 } from 'resources/image';
 
-@inject('rootStore')
-@observer
-export default class Rebuild extends ModalAction {
+export class Rebuild extends ModalAction {
   static id = 'rebuild';
 
   static title = t('Rebuild Instance');
@@ -170,3 +168,5 @@ export default class Rebuild extends ModalAction {
     return this.store.rebuild({ id, image: selectedRowKeys[0] });
   };
 }
+
+export default inject('rootStore')(observer(Rebuild));
diff --git a/src/pages/compute/containers/Instance/actions/Resize.jsx b/src/pages/compute/containers/Instance/actions/Resize.jsx
index 341d9afe..1fae1ee4 100644
--- a/src/pages/compute/containers/Instance/actions/Resize.jsx
+++ b/src/pages/compute/containers/Instance/actions/Resize.jsx
@@ -24,9 +24,7 @@ import {
 } from 'resources/instance';
 import FlavorSelectTable from '../components/FlavorSelectTable';
 
-@inject('rootStore')
-@observer
-export default class Resize extends ModalAction {
+export class Resize extends ModalAction {
   static id = 'resize';
 
   static title = t('Resize');
@@ -142,3 +140,5 @@ export default class Resize extends ModalAction {
     return globalServerStore.resize({ id, flavor });
   };
 }
+
+export default inject('rootStore')(observer(Resize));
diff --git a/src/pages/compute/containers/Instance/actions/ResizeOnline.jsx b/src/pages/compute/containers/Instance/actions/ResizeOnline.jsx
index 1f336cf6..16693640 100644
--- a/src/pages/compute/containers/Instance/actions/ResizeOnline.jsx
+++ b/src/pages/compute/containers/Instance/actions/ResizeOnline.jsx
@@ -25,9 +25,7 @@ import {
 } from 'resources/instance';
 import FlavorSelectTable from '../components/FlavorSelectTable';
 
-@inject('rootStore')
-@observer
-export default class ResizeOnline extends ModalAction {
+export class ResizeOnline extends ModalAction {
   static id = 'resize-online';
 
   static title = t('Online Resize');
@@ -138,3 +136,5 @@ export default class ResizeOnline extends ModalAction {
     return globalServerStore.liveResize({ id, flavor });
   };
 }
+
+export default inject('rootStore')(observer(ResizeOnline));
diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx
index f0ccb167..74f7c0ab 100644
--- a/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx
@@ -32,9 +32,7 @@ import InstanceVolume from 'components/FormItem/InstanceVolume';
 import { isGpuCategory } from 'resources/flavor';
 import FlavorSelectTable from '../../../components/FlavorSelectTable';
 
-@inject('rootStore')
-@observer
-export default class BaseStep extends Base {
+export class BaseStep extends Base {
   init() {
     this.serverStore = globalServerStore;
     this.imageStore = globalImageStore;
@@ -458,3 +456,5 @@ export default class BaseStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(BaseStep));
diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/ConfirmStep/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/ConfirmStep/index.jsx
index ab98ee81..d7ef824a 100644
--- a/src/pages/compute/containers/Instance/actions/StepCreate/ConfirmStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/ConfirmStep/index.jsx
@@ -16,9 +16,7 @@ import { inject, observer } from 'mobx-react';
 import Base from 'components/Form';
 import { physicalNodeTypes } from 'resources/instance';
 
-@inject('rootStore')
-@observer
-export default class ConfirmStep extends Base {
+export class ConfirmStep extends Base {
   init() {}
 
   get title() {
@@ -259,3 +257,5 @@ export default class ConfirmStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(ConfirmStep));
diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx
index a26b2f32..1e64d72b 100644
--- a/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/NetworkStep/index.jsx
@@ -33,9 +33,7 @@ import {
 // import EditYamlModal from 'components/Modals/EditYaml';
 const { isIPv4, isIpv6 } = ipValidate;
 
-@inject('rootStore')
-@observer
-export default class NetworkStep extends Base {
+export class NetworkStep extends Base {
   init() {
     this.networkStore = new NetworkStore();
     this.subnetStore = new SubnetStore();
@@ -259,3 +257,5 @@ export default class NetworkStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(NetworkStep));
diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
index 0921a8dc..3c4d98d8 100644
--- a/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
@@ -23,9 +23,7 @@ import { getPasswordOtherRule } from 'utils/validate';
 import { hypervisorColumns, hypervisorFilters } from 'resources/hypervisor';
 import { physicalNodeTypes } from 'resources/instance';
 
-@inject('rootStore')
-@observer
-export default class SystemStep extends Base {
+export class SystemStep extends Base {
   init() {
     this.keyPairStore = globalKeyPairStore;
     this.serverStore = globalServerStore;
@@ -340,3 +338,5 @@ export default class SystemStep extends Base {
     ];
   }
 }
+
+export default inject('rootStore')(observer(SystemStep));
diff --git a/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx b/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
index 04538a85..7a4d4de1 100644
--- a/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/index.jsx
@@ -29,8 +29,6 @@ import SystemStep from './SystemStep';
 import NetworkStep from './NetworkStep';
 import BaseStep from './BaseStep';
 
-@inject('rootStore')
-@observer
 class StepCreate extends StepAction {
   static id = 'instance-create';
 
@@ -387,4 +385,4 @@ class StepCreate extends StepAction {
   };
 }
 
-export default StepCreate;
+export default inject('rootStore')(observer(StepCreate));
diff --git a/src/pages/compute/containers/Instance/components/FlavorSelectTable.jsx b/src/pages/compute/containers/Instance/components/FlavorSelectTable.jsx
index 071db208..db4f3811 100644
--- a/src/pages/compute/containers/Instance/components/FlavorSelectTable.jsx
+++ b/src/pages/compute/containers/Instance/components/FlavorSelectTable.jsx
@@ -32,9 +32,7 @@ import {
 } from 'resources/flavor';
 import styles from './index.less';
 
-@inject('rootStore')
-@observer
-export default class FlavorSelectTable extends Component {
+export class FlavorSelectTable extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -351,3 +349,5 @@ export default class FlavorSelectTable extends Component {
     return <SelectTable {...props} />;
   }
 }
+
+export default inject('rootStore')(observer(FlavorSelectTable));
diff --git a/src/pages/compute/routes/index.js b/src/pages/compute/routes/index.js
index 7878f1ce..e4c233ce 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/Basic';
+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/containers/SystemInfo/NeutronAgent/Detail/Network/actions/Add.jsx b/src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/Network/actions/Add.jsx
index 0506b843..ceccfb46 100644
--- a/src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/Network/actions/Add.jsx
+++ b/src/pages/configuration/containers/SystemInfo/NeutronAgent/Detail/Network/actions/Add.jsx
@@ -15,7 +15,7 @@
 import { inject, observer } from 'mobx-react';
 import { NetworkStore } from 'stores/neutron/network';
 import globalNeutronAgentNetworkStore from 'stores/neutron/agent-network';
-import { ModalAction } from '@/containers/Action';
+import { ModalAction } from 'containers/Action';
 import { networkColumns, networkSortProps } from 'resources/network';
 import { yesNoOptions } from 'utils/constants';
 import { projectRender } from 'utils/table';
diff --git a/src/pages/configuration/routes/index.js b/src/pages/configuration/routes/index.js
index 8cde061c..774d5d1a 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/Basic';
+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/containers/Stack/Detail/Resource.jsx b/src/pages/heat/containers/Stack/Detail/Resource.jsx
index 032d67c6..50450ab3 100644
--- a/src/pages/heat/containers/Stack/Detail/Resource.jsx
+++ b/src/pages/heat/containers/Stack/Detail/Resource.jsx
@@ -19,9 +19,7 @@ import { StackResourceStore } from 'stores/heat/resource';
 import { stackStatus } from 'resources/stack';
 import { Link } from 'react-router-dom';
 
-@inject('rootStore')
-@observer
-export default class Resource extends Base {
+export class Resource extends Base {
   init() {
     this.store = new StackResourceStore();
   }
@@ -237,3 +235,5 @@ export default class Resource extends Base {
     },
   ];
 }
+
+export default inject('rootStore')(observer(Resource));
diff --git a/src/pages/heat/containers/Stack/Detail/index.jsx b/src/pages/heat/containers/Stack/Detail/index.jsx
index a970795e..af7efeeb 100644
--- a/src/pages/heat/containers/Stack/Detail/index.jsx
+++ b/src/pages/heat/containers/Stack/Detail/index.jsx
@@ -22,9 +22,7 @@ import Event from './Event';
 import Template from './Template';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class StackDetail extends Base {
+export class StackDetail extends Base {
   get name() {
     return t('stack');
   }
@@ -99,3 +97,5 @@ export default class StackDetail extends Base {
     return tabs;
   }
 }
+
+export default inject('rootStore')(observer(StackDetail));
diff --git a/src/pages/heat/routes/index.js b/src/pages/heat/routes/index.js
index 62ad680d..75891075 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/Basic';
+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/containers/Project/Detail/index.jsx b/src/pages/identity/containers/Project/Detail/index.jsx
index cd89a9ec..8d609aed 100644
--- a/src/pages/identity/containers/Project/Detail/index.jsx
+++ b/src/pages/identity/containers/Project/Detail/index.jsx
@@ -22,9 +22,7 @@ import User from '../../User';
 import Quota from './Quota';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class InstanceDetail extends Base {
+export class Detail extends Base {
   get name() {
     return t('project');
   }
@@ -114,3 +112,5 @@ export default class InstanceDetail extends Base {
     this.routing.push(`${this.listUrl}/edit/${id}`);
   };
 }
+
+export default inject('rootStore')(observer(Detail));
diff --git a/src/pages/identity/containers/Project/actions/Create.jsx b/src/pages/identity/containers/Project/actions/Create.jsx
index 667dc7d6..a5c4daa4 100644
--- a/src/pages/identity/containers/Project/actions/Create.jsx
+++ b/src/pages/identity/containers/Project/actions/Create.jsx
@@ -19,8 +19,6 @@ import globalProjectStore from 'stores/keystone/project';
 import { regex } from 'utils/validate';
 import { statusTypes } from 'utils/constants';
 
-@inject('rootStore')
-@observer
 class CreateForm extends ModalAction {
   constructor(props) {
     super(props);
@@ -156,4 +154,4 @@ class CreateForm extends ModalAction {
   };
 }
 
-export default CreateForm;
+export default inject('rootStore')(observer(CreateForm));
diff --git a/src/pages/identity/containers/Project/actions/Edit.jsx b/src/pages/identity/containers/Project/actions/Edit.jsx
index b76fe8e9..c62b89d4 100644
--- a/src/pages/identity/containers/Project/actions/Edit.jsx
+++ b/src/pages/identity/containers/Project/actions/Edit.jsx
@@ -18,8 +18,6 @@ import globalProjectStore from 'stores/keystone/project';
 import { regex } from 'utils/validate';
 import { statusTypes } from 'utils/constants';
 
-@inject('rootStore')
-@observer
 class EditForm extends ModalAction {
   init() {
     this.store = globalProjectStore;
@@ -108,4 +106,4 @@ class EditForm extends ModalAction {
   };
 }
 
-export default EditForm;
+export default inject('rootStore')(observer(EditForm));
diff --git a/src/pages/identity/containers/Project/actions/QuotaManager.jsx b/src/pages/identity/containers/Project/actions/QuotaManager.jsx
index b498276b..d524cf2a 100644
--- a/src/pages/identity/containers/Project/actions/QuotaManager.jsx
+++ b/src/pages/identity/containers/Project/actions/QuotaManager.jsx
@@ -18,9 +18,7 @@ import React from 'react';
 import { ModalAction } from 'containers/Action';
 import globalVolumeTypeStore from 'stores/cinder/volume-type';
 
-@inject('rootStore')
-@observer
-export default class QuotaManager extends ModalAction {
+export class QuotaManager extends ModalAction {
   static id = 'quota-management';
 
   static title = t('Edit Quota');
@@ -374,3 +372,5 @@ export default class QuotaManager extends ModalAction {
     return results;
   };
 }
+
+export default inject('rootStore')(observer(QuotaManager));
diff --git a/src/pages/identity/containers/Project/actions/UserGroupManager.jsx b/src/pages/identity/containers/Project/actions/UserGroupManager.jsx
index f5bea956..13040614 100644
--- a/src/pages/identity/containers/Project/actions/UserGroupManager.jsx
+++ b/src/pages/identity/containers/Project/actions/UserGroupManager.jsx
@@ -20,9 +20,7 @@ import globalGroupStore from 'stores/keystone/user-group';
 import globalRoleStore from 'stores/keystone/role';
 import { ModalAction } from 'containers/Action';
 
-@inject('rootStore')
-@observer
-export default class UserGroupManager extends ModalAction {
+export class UserGroupManager extends ModalAction {
   constructor(props) {
     super(props);
     this.state = {
@@ -204,3 +202,5 @@ export default class UserGroupManager extends ModalAction {
     return results;
   };
 }
+
+export default inject('rootStore')(observer(UserGroupManager));
diff --git a/src/pages/identity/containers/Project/actions/UserManager.jsx b/src/pages/identity/containers/Project/actions/UserManager.jsx
index 693f8f1b..3d409ec2 100644
--- a/src/pages/identity/containers/Project/actions/UserManager.jsx
+++ b/src/pages/identity/containers/Project/actions/UserManager.jsx
@@ -21,9 +21,7 @@ import globalRoleStore from 'stores/keystone/role';
 import { ModalAction } from 'containers/Action';
 import globalDomainStore from 'stores/keystone/domain';
 
-@inject('rootStore')
-@observer
-export default class UserManager extends ModalAction {
+export class UserManager extends ModalAction {
   constructor(props) {
     super(props);
     const projectRole = JSON.stringify(this.item.userMapProjectRoles);
@@ -313,3 +311,5 @@ export default class UserManager extends ModalAction {
     return results;
   };
 }
+
+export default inject('rootStore')(observer(UserManager));
diff --git a/src/pages/identity/containers/Role/Detail/index.jsx b/src/pages/identity/containers/Role/Detail/index.jsx
index ffbc4d4a..b89395fa 100644
--- a/src/pages/identity/containers/Role/Detail/index.jsx
+++ b/src/pages/identity/containers/Role/Detail/index.jsx
@@ -19,9 +19,7 @@ import User from '../../User';
 import Group from '../../UserGroup';
 import impliedRole from './BaseDetail';
 
-@inject('rootStore')
-@observer
-export default class RoleDetail extends Base {
+export class RoleDetail extends Base {
   get name() {
     return t('role');
   }
@@ -72,3 +70,5 @@ export default class RoleDetail extends Base {
     return tabs;
   }
 }
+
+export default inject('rootStore')(observer(RoleDetail));
diff --git a/src/pages/identity/containers/User/Detail/index.jsx b/src/pages/identity/containers/User/Detail/index.jsx
index bf6ea248..5d7d574e 100644
--- a/src/pages/identity/containers/User/Detail/index.jsx
+++ b/src/pages/identity/containers/User/Detail/index.jsx
@@ -22,9 +22,7 @@ import UserGroup from '../../UserGroup';
 import Project from '../../Project';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class UserDetail extends Base {
+export class UserDetail extends Base {
   get name() {
     return t('user');
   }
@@ -134,3 +132,5 @@ export default class UserDetail extends Base {
     return tabs;
   }
 }
+
+export default inject('rootStore')(observer(UserDetail));
diff --git a/src/pages/identity/containers/User/actions/Create.jsx b/src/pages/identity/containers/User/actions/Create.jsx
index 7f9c06f9..88796866 100644
--- a/src/pages/identity/containers/User/actions/Create.jsx
+++ b/src/pages/identity/containers/User/actions/Create.jsx
@@ -28,8 +28,6 @@ import {
 } from 'utils/validate';
 import { statusTypes } from 'utils/constants';
 
-@inject('rootStore')
-@observer
 class CreateForm extends FormAction {
   constructor(props) {
     super(props);
@@ -395,4 +393,4 @@ class CreateForm extends FormAction {
   };
 }
 
-export default CreateForm;
+export default inject('rootStore')(observer(CreateForm));
diff --git a/src/pages/identity/containers/User/actions/Edit.jsx b/src/pages/identity/containers/User/actions/Edit.jsx
index 92887abd..3e670d3c 100644
--- a/src/pages/identity/containers/User/actions/Edit.jsx
+++ b/src/pages/identity/containers/User/actions/Edit.jsx
@@ -18,8 +18,6 @@ import globalUserStore from 'stores/keystone/user';
 import globalDomainStore from 'stores/keystone/domain';
 import { phoneNumberValidate, emailValidate } from 'utils/validate';
 
-@inject('rootStore')
-@observer
 class EditForm extends ModalAction {
   init() {
     this.store = globalUserStore;
@@ -182,4 +180,4 @@ class EditForm extends ModalAction {
   };
 }
 
-export default EditForm;
+export default inject('rootStore')(observer(EditForm));
diff --git a/src/pages/identity/containers/User/actions/SystemRole.jsx b/src/pages/identity/containers/User/actions/SystemRole.jsx
index e0010ef5..ad9c25c1 100644
--- a/src/pages/identity/containers/User/actions/SystemRole.jsx
+++ b/src/pages/identity/containers/User/actions/SystemRole.jsx
@@ -21,9 +21,7 @@ import globalRoleStore from 'stores/keystone/role';
 import { ModalAction } from 'containers/Action';
 import globalDomainStore from 'stores/keystone/domain';
 
-@inject('rootStore')
-@observer
-export default class SystemRole extends ModalAction {
+export class SystemRole extends ModalAction {
   constructor(props) {
     super(props);
     const systemRole = JSON.stringify(this.item.projectMapSystemRole);
@@ -318,3 +316,5 @@ export default class SystemRole extends ModalAction {
     return results;
   };
 }
+
+export default inject('rootStore')(observer(SystemRole));
diff --git a/src/pages/identity/containers/User/actionsInDomain/Create.jsx b/src/pages/identity/containers/User/actionsInDomain/Create.jsx
index d84c1bf8..ecd7745f 100644
--- a/src/pages/identity/containers/User/actionsInDomain/Create.jsx
+++ b/src/pages/identity/containers/User/actionsInDomain/Create.jsx
@@ -22,9 +22,7 @@ import { getPasswordOtherRule } from 'utils/validate';
 import globalDomainStore from 'stores/keystone/domain';
 import { statusTypes } from 'utils/constants';
 
-@inject('rootStore')
-@observer
-export default class CreateForm extends ModalAction {
+export class CreateForm extends ModalAction {
   init() {
     this.store = globalUserStore;
     this.userGroupStore = globalGroupStore;
@@ -233,3 +231,5 @@ export default class CreateForm extends ModalAction {
     return this.store.create(data);
   };
 }
+
+export default inject('rootStore')(observer(CreateForm));
diff --git a/src/pages/identity/containers/User/index.jsx b/src/pages/identity/containers/User/index.jsx
index 0bca8ac1..b6e43cf9 100644
--- a/src/pages/identity/containers/User/index.jsx
+++ b/src/pages/identity/containers/User/index.jsx
@@ -21,9 +21,7 @@ import { yesNoOptions, emptyActionConfig } from 'utils/constants';
 import actionConfigs from './actions';
 import actionConfigsInDomain from './actionsInDomain';
 
-@inject('rootStore')
-@observer
-export default class User extends Base {
+export class User extends Base {
   init() {
     this.store = globalUserStore;
     this.getDomains();
@@ -202,3 +200,5 @@ export default class User extends Base {
     this.list.silent = false;
   }
 }
+
+export default inject('rootStore')(observer(User));
diff --git a/src/pages/identity/routes/index.js b/src/pages/identity/routes/index.js
index 8cd65d36..a27a0245 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/Basic';
+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 5287f636..b974638c 100644
--- a/src/pages/management/routes/index.js
+++ b/src/pages/management/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/Basic';
+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/containers/FloatingIp/Detail/BaseDetail.jsx b/src/pages/network/containers/FloatingIp/Detail/BaseDetail.jsx
index 77b69ef2..70f4d1b2 100644
--- a/src/pages/network/containers/FloatingIp/Detail/BaseDetail.jsx
+++ b/src/pages/network/containers/FloatingIp/Detail/BaseDetail.jsx
@@ -18,9 +18,7 @@ import { FloatingIpStore } from 'stores/neutron/floatingIp';
 import { Link } from 'react-router-dom';
 import Base from 'containers/BaseDetail';
 
-@inject('rootStore')
-@observer
-export default class BaseDetail extends Base {
+export class BaseDetail extends Base {
   init() {
     this.store = new FloatingIpStore();
   }
@@ -86,3 +84,5 @@ export default class BaseDetail extends Base {
     };
   }
 }
+
+export default inject('rootStore')(observer(BaseDetail));
diff --git a/src/pages/network/containers/FloatingIp/actions/Allocate.jsx b/src/pages/network/containers/FloatingIp/actions/Allocate.jsx
index 834c261a..e8603daa0 100644
--- a/src/pages/network/containers/FloatingIp/actions/Allocate.jsx
+++ b/src/pages/network/containers/FloatingIp/actions/Allocate.jsx
@@ -22,9 +22,7 @@ import globalSubnetStore from 'stores/neutron/subnet';
 import { QoSPolicyStore } from 'stores/neutron/qos-policy';
 import { getQoSPolicyTabs } from 'resources/qos-policy';
 
-@inject('rootStore')
-@observer
-export default class Allocate extends ModalAction {
+export class Allocate extends ModalAction {
   static id = 'allocate';
 
   static title = t('Allocate IP');
@@ -227,3 +225,5 @@ export default class Allocate extends ModalAction {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Allocate));
\ No newline at end of file
diff --git a/src/pages/network/containers/FloatingIp/actions/Edit.jsx b/src/pages/network/containers/FloatingIp/actions/Edit.jsx
index 33daea0d..312b55b3 100644
--- a/src/pages/network/containers/FloatingIp/actions/Edit.jsx
+++ b/src/pages/network/containers/FloatingIp/actions/Edit.jsx
@@ -18,9 +18,7 @@ import globalFloatingIpsStore from 'stores/neutron/floatingIp';
 import { getQoSPolicyTabs } from 'resources/qos-policy';
 import { QoSPolicyStore } from 'stores/neutron/qos-policy';
 
-@inject('rootStore')
-@observer
-export default class Edit extends ModalAction {
+export class Edit extends ModalAction {
   static id = 'edit-floating-ip';
 
   static policy = 'update_floatingip';
@@ -86,3 +84,5 @@ export default class Edit extends ModalAction {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Edit));
diff --git a/src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js b/src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js
index 62195a3e..521e92f8 100644
--- a/src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js
+++ b/src/pages/network/containers/QoSPolicy/AdminQoSPolicy.js
@@ -18,9 +18,7 @@ import { QoSPolicyStore } from 'stores/neutron/qos-policy';
 import { qosPolicyColumns, qosPolicyFilters } from 'resources/qos-policy';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class QoSPolicy extends Base {
+export class QoSPolicy extends Base {
   init() {
     this.store = new QoSPolicyStore();
     this.downloadStore = new QoSPolicyStore();
@@ -75,3 +73,5 @@ export default class QoSPolicy extends Base {
     return filters;
   }
 }
+
+export default inject('rootStore')(observer(QoSPolicy));
diff --git a/src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js b/src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js
index 2e023d18..6a0fc6b4 100644
--- a/src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js
+++ b/src/pages/network/containers/QoSPolicy/ProjectQoSPolicy.js
@@ -18,9 +18,7 @@ import { QoSPolicyStore } from 'stores/neutron/qos-policy';
 import { qosPolicyColumns, qosPolicyFilters } from 'resources/qos-policy';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class QoSPolicy extends Base {
+export class QoSPolicy extends Base {
   init() {
     this.store = new QoSPolicyStore();
     this.downloadStore = new QoSPolicyStore();
@@ -80,3 +78,5 @@ export default class QoSPolicy extends Base {
     return filters;
   }
 }
+
+export default inject('rootStore')(observer(QoSPolicy));
diff --git a/src/pages/network/containers/QoSPolicy/SharedQoSPolicy.js b/src/pages/network/containers/QoSPolicy/SharedQoSPolicy.js
index 1205930a..9c92520a 100644
--- a/src/pages/network/containers/QoSPolicy/SharedQoSPolicy.js
+++ b/src/pages/network/containers/QoSPolicy/SharedQoSPolicy.js
@@ -18,9 +18,7 @@ import { QoSPolicyStore } from 'stores/neutron/qos-policy';
 import { qosPolicyColumns, qosPolicyFilters } from 'resources/qos-policy';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class QoSPolicy extends Base {
+export class QoSPolicy extends Base {
   init() {
     this.store = new QoSPolicyStore();
     this.downloadStore = new QoSPolicyStore();
@@ -83,3 +81,5 @@ export default class QoSPolicy extends Base {
     return filters;
   }
 }
+
+export default inject('rootStore')(observer(QoSPolicy));
diff --git a/src/pages/network/containers/Router/Detail/BaseDetail.jsx b/src/pages/network/containers/Router/Detail/BaseDetail.jsx
index a3877140..2e622120 100644
--- a/src/pages/network/containers/Router/Detail/BaseDetail.jsx
+++ b/src/pages/network/containers/Router/Detail/BaseDetail.jsx
@@ -16,9 +16,7 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 
-@inject('rootStore')
-@observer
-export default class BaseDetail extends Base {
+export class BaseDetail extends Base {
   get leftCards() {
     const cards = [this.aZoneCard];
     return cards;
@@ -90,3 +88,5 @@ export default class BaseDetail extends Base {
     };
   }
 }
+
+export default inject('rootStore')(observer(BaseDetail));
diff --git a/src/pages/network/containers/Router/Detail/index.jsx b/src/pages/network/containers/Router/Detail/index.jsx
index be235301..98eb7faa 100644
--- a/src/pages/network/containers/Router/Detail/index.jsx
+++ b/src/pages/network/containers/Router/Detail/index.jsx
@@ -23,9 +23,7 @@ import StaticRouter from '../StaticRouter';
 import actionConfigs from '../actions';
 // import Snat from '../Snat';
 
-@inject('rootStore')
-@observer
-export default class RouterDetail extends Base {
+export class RouterDetail extends Base {
   get name() {
     return t('router');
   }
@@ -118,3 +116,5 @@ export default class RouterDetail extends Base {
     this.store = new RouterStore();
   }
 }
+
+export default inject('rootStore')(observer(RouterDetail));
diff --git a/src/pages/network/containers/Router/actions/Create.jsx b/src/pages/network/containers/Router/actions/Create.jsx
index ed300b1f..65a634e6 100644
--- a/src/pages/network/containers/Router/actions/Create.jsx
+++ b/src/pages/network/containers/Router/actions/Create.jsx
@@ -24,9 +24,7 @@ import {
   availabilityZoneResource,
 } from 'resources/neutron';
 
-@inject('rootStore')
-@observer
-export default class Create extends ModalAction {
+export class Create extends ModalAction {
   static id = 'create';
 
   static title = t('Create Router');
@@ -183,3 +181,5 @@ export default class Create extends ModalAction {
     ];
   }
 }
+
+export default inject('rootStore')(observer(Create));
diff --git a/src/pages/network/containers/Router/index.jsx b/src/pages/network/containers/Router/index.jsx
index eb4452c9..1e4e2259 100644
--- a/src/pages/network/containers/Router/index.jsx
+++ b/src/pages/network/containers/Router/index.jsx
@@ -18,9 +18,7 @@ import { getRouterColumns, routerFitlers } from 'resources/router';
 import { RouterStore } from 'stores/neutron/router';
 import actionConfigs from './actions';
 
-@inject('rootStore')
-@observer
-export default class Routes extends Base {
+export class Routes extends Base {
   init() {
     this.store = new RouterStore();
     this.downloadStore = new RouterStore();
@@ -62,3 +60,5 @@ export default class Routes extends Base {
     return routerFitlers;
   }
 }
+
+export default inject('rootStore')(observer(Routes));
\ No newline at end of file
diff --git a/src/pages/network/containers/SecurityGroup/Detail/Rule/actions/Delete.jsx b/src/pages/network/containers/SecurityGroup/Detail/Rule/actions/Delete.jsx
index 53992ff8..2037847e 100644
--- a/src/pages/network/containers/SecurityGroup/Detail/Rule/actions/Delete.jsx
+++ b/src/pages/network/containers/SecurityGroup/Detail/Rule/actions/Delete.jsx
@@ -64,7 +64,7 @@ export default class DeleteAction extends ConfirmAction {
     }
     const direction = item.direction === 'egress' ? 'to' : 'from';
     if (remote_group_id) {
-      remote = remote_group_id.substr(0, 13);
+      remote = remote_group_id;
     } else {
       remote = remote_ip_prefix || t('ANY');
     }
diff --git a/src/pages/network/containers/SecurityGroup/Detail/index.jsx b/src/pages/network/containers/SecurityGroup/Detail/index.jsx
index b147c513..eaa9a910 100644
--- a/src/pages/network/containers/SecurityGroup/Detail/index.jsx
+++ b/src/pages/network/containers/SecurityGroup/Detail/index.jsx
@@ -19,9 +19,7 @@ import { isEqual } from 'lodash';
 import members from './Rule';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class SecurityGroupDetail extends Base {
+export class SecurityGroupDetail extends Base {
   get name() {
     return t('security group');
   }
@@ -79,3 +77,5 @@ export default class SecurityGroupDetail extends Base {
     }
   }
 }
+
+export default inject('rootStore')(observer(SecurityGroupDetail));
diff --git a/src/pages/network/containers/Topology/InstanceCard.jsx b/src/pages/network/containers/Topology/InstanceCard.jsx
index e37182e2..789c5d06 100644
--- a/src/pages/network/containers/Topology/InstanceCard.jsx
+++ b/src/pages/network/containers/Topology/InstanceCard.jsx
@@ -15,7 +15,7 @@
 import React from 'react';
 import { Popover, Avatar } from 'antd';
 import { instanceStatus } from 'resources/instance';
-import instanceImage from '@/asset/image/instance.png';
+import instanceImage from 'asset/image/instance.png';
 import ImageType from 'components/ImageType';
 import { Link } from 'react-router-dom';
 import styles from './index.less';
diff --git a/src/pages/network/containers/Topology/NodeCard.jsx b/src/pages/network/containers/Topology/NodeCard.jsx
index ba79bef8..7efbc04e 100644
--- a/src/pages/network/containers/Topology/NodeCard.jsx
+++ b/src/pages/network/containers/Topology/NodeCard.jsx
@@ -18,7 +18,7 @@ import { getLocalTimeStr } from 'utils/time';
 import { routerStatus } from 'resources/router';
 import { Descriptions, Popover, Button, Avatar } from 'antd';
 import { Link } from 'react-router-dom';
-import routerImage from '@/asset/image/router.png';
+import routerImage from 'asset/image/router.png';
 import styles from './index.less';
 
 export default class NodeCard extends React.Component {
diff --git a/src/pages/network/containers/Topology/index.jsx b/src/pages/network/containers/Topology/index.jsx
index b72be858..85baf988 100644
--- a/src/pages/network/containers/Topology/index.jsx
+++ b/src/pages/network/containers/Topology/index.jsx
@@ -20,7 +20,7 @@
 import React from 'react';
 import { Card, Button, Spin, Checkbox } from 'antd';
 import G6 from '@antv/g6';
-import image from '@/asset/image/cloud.png';
+import image from 'asset/image/cloud.png';
 import { RedoOutlined } from '@ant-design/icons';
 import { observer, inject } from 'mobx-react';
 import globalNetworkStore from 'stores/neutron/network';
diff --git a/src/pages/network/containers/VPN/EndpointGroup/actions/Create.js b/src/pages/network/containers/VPN/EndpointGroup/actions/Create.js
index 7bc0f022..6c14d646 100644
--- a/src/pages/network/containers/VPN/EndpointGroup/actions/Create.js
+++ b/src/pages/network/containers/VPN/EndpointGroup/actions/Create.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { inject, observer } from 'mobx-react';
-import { ModalAction } from '@/containers/Action';
+import { ModalAction } from 'containers/Action';
 import { ipValidate } from 'utils/validate';
 import { RouterStore } from 'stores/neutron/router';
 import { SubnetStore } from 'stores/neutron/subnet';
diff --git a/src/pages/network/routes/index.js b/src/pages/network/routes/index.js
index a3d8cf66..14fd74e6 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/Basic';
+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/containers/Volume/Detail/BaseDetail.jsx b/src/pages/storage/containers/Volume/Detail/BaseDetail.jsx
index e9463c73..0310a55d 100644
--- a/src/pages/storage/containers/Volume/Detail/BaseDetail.jsx
+++ b/src/pages/storage/containers/Volume/Detail/BaseDetail.jsx
@@ -17,9 +17,7 @@ import { Link } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
 import Base from 'containers/BaseDetail';
 
-@inject('rootStore')
-@observer
-export default class BaseDetail extends Base {
+export class BaseDetail extends Base {
   get leftCards() {
     const cards = [this.attachmentsCard];
     if (this.detailData.volume_image_metadata) {
@@ -106,3 +104,5 @@ export default class BaseDetail extends Base {
     };
   }
 }
+
+export default inject('rootStore')(observer(BaseDetail));
diff --git a/src/pages/storage/containers/Volume/Detail/index.jsx b/src/pages/storage/containers/Volume/Detail/index.jsx
index b3b9fd70..73e7c99b 100644
--- a/src/pages/storage/containers/Volume/Detail/index.jsx
+++ b/src/pages/storage/containers/Volume/Detail/index.jsx
@@ -21,9 +21,7 @@ import { volumeStatus } from 'resources/volume';
 import BaseDetail from './BaseDetail';
 import actionConfigs from '../actions';
 
-@inject('rootStore')
-@observer
-export default class VolumeDetail extends Base {
+export class VolumeDetail extends Base {
   get name() {
     return t('volume');
   }
@@ -113,3 +111,5 @@ export default class VolumeDetail extends Base {
     this.store = new VolumeStore();
   }
 }
+
+export default inject('rootStore')(observer(VolumeDetail));
diff --git a/src/pages/storage/containers/Volume/actions/ChangeType.jsx b/src/pages/storage/containers/Volume/actions/ChangeType.jsx
index c59af1a3..2e330a19 100644
--- a/src/pages/storage/containers/Volume/actions/ChangeType.jsx
+++ b/src/pages/storage/containers/Volume/actions/ChangeType.jsx
@@ -18,9 +18,7 @@ import globalVolumeStore from 'stores/cinder/volume';
 import globalVolumeTypeStore from 'stores/cinder/volume-type';
 import { isAvailableOrInUse, isOsDisk } from 'resources/volume';
 
-@inject('rootStore')
-@observer
-export default class ChangeType extends ModalAction {
+export class ChangeType extends ModalAction {
   static id = 'change-type';
 
   static title = t('Change Type');
@@ -99,3 +97,5 @@ export default class ChangeType extends ModalAction {
     return this.store.retype(id, body);
   };
 }
+
+export default inject('rootStore')(observer(ChangeType));
diff --git a/src/pages/storage/containers/Volume/actions/Create/index.jsx b/src/pages/storage/containers/Volume/actions/Create/index.jsx
index e03eb2d9..828f7eb5 100644
--- a/src/pages/storage/containers/Volume/actions/Create/index.jsx
+++ b/src/pages/storage/containers/Volume/actions/Create/index.jsx
@@ -38,9 +38,7 @@ import { volumeTypeSelectProps } from 'resources/volume-type';
 import { allSettled } from 'utils';
 import styles from './index.less';
 
-@inject('rootStore')
-@observer
-export default class Create extends FormAction {
+export class Create extends FormAction {
   init() {
     this.snapshotStore = globalSnapshotStore;
     this.imageStore = globalImageStore;
@@ -582,3 +580,5 @@ export default class Create extends FormAction {
     );
   };
 }
+
+export default inject('rootStore')(observer(Create));
diff --git a/src/pages/storage/containers/Volume/actions/CreateBackup.jsx b/src/pages/storage/containers/Volume/actions/CreateBackup.jsx
index 8fef6366..49bf643e 100644
--- a/src/pages/storage/containers/Volume/actions/CreateBackup.jsx
+++ b/src/pages/storage/containers/Volume/actions/CreateBackup.jsx
@@ -18,9 +18,7 @@ import globalBackupStore from 'stores/cinder/backup';
 import { isAvailableOrInUse, isInUse } from 'resources/volume';
 import { createTip, backupModeList, modeTip } from 'resources/backup';
 
-@inject('rootStore')
-@observer
-export default class CreateBackup extends ModalAction {
+export class CreateBackup extends ModalAction {
   static id = 'create-backup';
 
   static title = t('Create Backup');
@@ -86,3 +84,5 @@ export default class CreateBackup extends ModalAction {
     return this.store.create(body);
   };
 }
+
+export default inject('rootStore')(observer(CreateBackup));
diff --git a/src/pages/storage/containers/Volume/actions/CreateImage.jsx b/src/pages/storage/containers/Volume/actions/CreateImage.jsx
index 669c7ce8..78e9bee8 100644
--- a/src/pages/storage/containers/Volume/actions/CreateImage.jsx
+++ b/src/pages/storage/containers/Volume/actions/CreateImage.jsx
@@ -18,9 +18,7 @@ import { imageOS, imageFormats } from 'resources/image';
 import globalVolumeStore from 'stores/cinder/volume';
 import { isAvailable } from 'resources/volume';
 
-@inject('rootStore')
-@observer
-export default class CreateImage extends ModalAction {
+export class CreateImage extends ModalAction {
   static id = 'create-image';
 
   static title = t('Create Image');
@@ -84,3 +82,5 @@ export default class CreateImage extends ModalAction {
     return this.store.uploadImage(id, values);
   };
 }
+
+export default inject('rootStore')(observer(CreateImage));
diff --git a/src/pages/storage/containers/Volume/actions/ExtendVolume.jsx b/src/pages/storage/containers/Volume/actions/ExtendVolume.jsx
index 469ba5a1..8c7f73cb 100644
--- a/src/pages/storage/containers/Volume/actions/ExtendVolume.jsx
+++ b/src/pages/storage/containers/Volume/actions/ExtendVolume.jsx
@@ -17,9 +17,7 @@ import { ModalAction } from 'containers/Action';
 import globalVolumeStore from 'stores/cinder/volume';
 import { isAvailableOrInUse } from 'resources/volume';
 
-@inject('rootStore')
-@observer
-export default class ExtendVolume extends ModalAction {
+export class ExtendVolume extends ModalAction {
   static id = 'extend-snapshot';
 
   static title = t('Extend Volume');
@@ -77,3 +75,5 @@ export default class ExtendVolume extends ModalAction {
     return this.store.extendSize(id, rest);
   };
 }
+
+export default inject('rootStore')(observer(ExtendVolume));
diff --git a/src/pages/storage/routes/index.js b/src/pages/storage/routes/index.js
index f71754b2..995ac580 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/Basic';
+import BaseLayout from 'layouts/Basic';
 import E404 from 'pages/base/containers/404';
 import Snapshot from '../containers/Snapshot';
 import SnapshotDetail from '../containers/Snapshot/Detail';