diff --git a/.gitignore b/.gitignore
index f90ee3a42..b9970b410 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,5 @@ tests/**/coverage/
 *.sln
 .env.development
 .python-version
+
+helper.json
\ No newline at end of file
diff --git a/package.json b/package.json
index a8e19d7e5..51dccafc2 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
     "@vue/cli-plugin-unit-jest": "3.6.3",
     "@vue/cli-service": "3.6.0",
     "@vue/test-utils": "1.0.0-beta.29",
+    "@vue/runtime-dom": "3.5.13",
     "autoprefixer": "^9.5.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
diff --git a/src/components/IBox/index.vue b/src/components/IBox/index.vue
index 41a6e2eef..2d201713b 100644
--- a/src/components/IBox/index.vue
+++ b/src/components/IBox/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card :class="'ibox ' + type" shadow="never" v-bind="$attrs">
+  <el-card :class="'ibox ' + type" :shadow="shadow" v-bind="$attrs">
     <template #header>
       <slot name="header">
         <div v-if="title" slot="header" class="clearfix ibox-title">
@@ -26,6 +26,10 @@ export default {
     type: {
       type: String,
       default: 'default'
+    },
+    shadow: {
+      type: String,
+      default: 'never'
     }
   },
   computed: {
diff --git a/src/components/QuickActions/index.vue b/src/components/QuickActions/index.vue
index 6e6f6c52e..ee1ac8e52 100644
--- a/src/components/QuickActions/index.vue
+++ b/src/components/QuickActions/index.vue
@@ -58,7 +58,7 @@ export default {
 .quick-actions ::v-deep button {
   padding: 4px 5px;
   font-size: 13px;
-  width: 65px;
+  min-width: 65px;
 
   span {
     overflow: hidden;
diff --git a/src/layout/components/Page/TwoColPage.vue b/src/layout/components/Page/TwoColPage.vue
index a47c60803..3b6fd3e72 100644
--- a/src/layout/components/Page/TwoColPage.vue
+++ b/src/layout/components/Page/TwoColPage.vue
@@ -12,7 +12,7 @@
     </template>
     <template v-else>
       <!-- 默认插槽内容，全宽 -->
-      <el-col :md="single" :offset="(24 - single)/2" :sm="24">
+      <el-col :md="single" :sm="24">
         <slot />
       </el-col>
     </template>
diff --git a/src/layout/components/Page/index.vue b/src/layout/components/Page/index.vue
index 50b51661b..1c3b6e100 100644
--- a/src/layout/components/Page/index.vue
+++ b/src/layout/components/Page/index.vue
@@ -29,7 +29,22 @@
         <slot name="headingRightSide" />
       </template>
     </PageHeading>
-    <PageContent class="page-content">
+    <PageContent :class="{'disabled': disabled}" class="page-content">
+      <div v-if="disabled" class="content-disabled-mask">
+        <IBox shadow="always">
+          <div class="disabled-content">
+            <div class="lock-icon">
+              <i class="el-icon-unlock" />
+            </div>
+            <div class="disabled-text">
+              {{ $t('UpgradeEnterpriseEditionHelpText') }}
+            </div>
+            <el-button class="upgrade-btn" type="primary">
+              {{ $t('UpgradeEnterpriseEdition') }}
+            </el-button>
+          </div>
+        </IBox>
+      </div>
       <el-alert v-if="helpMessage" type="success">
         <span v-sanitize="helpMessage" class="announcement-main" />
       </el-alert>
@@ -46,6 +61,7 @@ import UserConfirmDialog from '@/components/Apps/UserConfirmDialog/index.vue'
 import TagsView from '../TagsView/index.vue'
 import { toSentenceCase } from '@/utils/common'
 import { mapGetters } from 'vuex'
+import IBox from '@/components/IBox/index.vue'
 
 export default {
   name: 'Page',
@@ -53,9 +69,14 @@ export default {
     UserConfirmDialog,
     PageHeading,
     PageContent,
-    TagsView
+    TagsView,
+    IBox
   },
   props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     title: {
       type: String,
       default: ''
@@ -81,7 +102,13 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['inDrawer']),
+    ...mapGetters(['inDrawer', 'hasValidLicense']),
+    iDisabled() {
+      if (this.disabled !== null) {
+        return this.disabled
+      }
+      return !this.hasValidLicense
+    },
     noTitle() {
       return this.title === 'null' || this.title === null
     },
@@ -116,6 +143,10 @@ export default {
     },
     endLongPress() {
       clearTimeout(this.longPressTimer)
+    },
+    handleUpgrade() {
+      const url = 'http://www.jumpserver.org/support/'
+      window.open(url, '_blank')
     }
   }
 }
@@ -135,13 +166,6 @@ export default {
     margin-bottom: 5px;
   }
 
-  &.no-title {
-  }
-
-  .page-head {
-
-  }
-
   .page-content {
     flex: 1; /* 占用剩余高度 */
     //height: calc(100% - 50px);
@@ -185,4 +209,59 @@ export default {
     white-space: pre-wrap;
   }
 }
+
+.ibox {
+  width: 500px;
+  position: absolute;
+  top: 30%;
+}
+
+.content-disabled-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(2px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+
+  .disabled-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+
+    .lock-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 10px auto;
+
+      i {
+        font-size: 40px;
+        color: #909399;
+      }
+    }
+
+    .disabled-text {
+      font-size: 14px;
+      line-height: 1.6;
+      margin-bottom: 20px;
+      padding: 10px;
+    }
+
+    .upgrade-btn {
+      min-width: 120px;
+      margin: 10px auto;
+    }
+  }
+}
+
+.page-content.disabled {
+  position: relative;
+}
 </style>
diff --git a/src/views/accounts/AccountBackup/index.vue b/src/views/accounts/AccountBackup/index.vue
index 9a9e1b9cb..60f3c41db 100644
--- a/src/views/accounts/AccountBackup/index.vue
+++ b/src/views/accounts/AccountBackup/index.vue
@@ -1,9 +1,10 @@
 <template>
-  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu" />
+  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu" :disabled="!hasValidLicense" />
 </template>
 
 <script>
 import { TabPage } from '@/layout/components'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'Index',
@@ -30,6 +31,9 @@ export default {
         ]
       }
     }
+  },
+  computed: {
+    ...mapGetters(['hasValidLicense'])
   }
 }
 </script>
diff --git a/src/views/accounts/AccountChangeSecret/index.vue b/src/views/accounts/AccountChangeSecret/index.vue
index d924d6ccc..4bc5f0d56 100644
--- a/src/views/accounts/AccountChangeSecret/index.vue
+++ b/src/views/accounts/AccountChangeSecret/index.vue
@@ -1,9 +1,10 @@
 <template>
-  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu" />
+  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu" :disabled="!hasValidLicense" />
 </template>
 
 <script>
 import { TabPage } from '@/layout/components'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'Index',
@@ -37,6 +38,9 @@ export default {
         ]
       }
     }
+  },
+  computed: {
+    ...mapGetters(['hasValidLicense'])
   }
 }
 </script>
diff --git a/src/views/accounts/AccountDiscover/index.vue b/src/views/accounts/AccountDiscover/index.vue
index e2b7baeb0..7ea0b2e34 100644
--- a/src/views/accounts/AccountDiscover/index.vue
+++ b/src/views/accounts/AccountDiscover/index.vue
@@ -1,9 +1,10 @@
 <template>
-  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu" />
+  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu" :disabled="!hasValidLicense" />
 </template>
 
 <script>
 import { TabPage } from '@/layout/components'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'Index',
@@ -36,6 +37,9 @@ export default {
         ]
       }
     }
+  },
+  computed: {
+    ...mapGetters(['hasValidLicense'])
   }
 }
 </script>
diff --git a/src/views/pam/Account/index.vue b/src/views/pam/Account/index.vue
index c42d9dc92..919d6b3e9 100644
--- a/src/views/pam/Account/index.vue
+++ b/src/views/pam/Account/index.vue
@@ -2,6 +2,7 @@
   <TabPage
     :active-menu.sync="activeMenu"
     :submenu="tab.submenu"
+    :disabled="true"
   />
 </template>
 
diff --git a/src/views/pam/Integration/index.vue b/src/views/pam/Integration/index.vue
index 2ab0dd889..280f32323 100644
--- a/src/views/pam/Integration/index.vue
+++ b/src/views/pam/Integration/index.vue
@@ -2,11 +2,13 @@
   <TabPage
     :active-menu.sync="activeMenu"
     :submenu="tab.submenu"
+    :disabled="!hasValidLicense"
   />
 </template>
 
 <script>
 import { TabPage } from '@/layout/components'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'IntegrationApplicationList',
@@ -41,9 +43,8 @@ export default {
       }
     }
   },
-  watch: {},
-  async mounted() {
-  },
-  methods: {}
+  computed: {
+    ...mapGetters(['hasValidLicense'])
+  }
 }
 </script>
diff --git a/src/views/pam/RiskDetect/index.vue b/src/views/pam/RiskDetect/index.vue
index f7bce8bf9..8635c4d38 100644
--- a/src/views/pam/RiskDetect/index.vue
+++ b/src/views/pam/RiskDetect/index.vue
@@ -1,9 +1,10 @@
 <template>
-  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu" />
+  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu" :disabled="!hasValidLicense" />
 </template>
 
 <script>
 import { TabPage } from '@/layout/components'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'AccountCheck',
@@ -42,6 +43,9 @@ export default {
         ]
       }
     }
+  },
+  computed: {
+    ...mapGetters(['hasValidLicense'])
   }
 }
 </script>