diff --git a/.gitignore b/.gitignore
index 08ad47ef2..67773e1cb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,7 @@ logs
 build.yml
 .codecc/
 .vscode/
+
+
+pre-*-bkcodeai
+bkcodeai.json
diff --git a/frontend/package.json b/frontend/package.json
index 196869130..66d6fd3ae 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -95,7 +95,7 @@
     "acorn": "~6.4.2",
     "ansi-html-community": "0.0.8",
     "art-template": "^4.13.2",
-    "axios": "^0.21.3",
+    "axios": "^1.6.8",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "~10.0.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
@@ -106,7 +106,7 @@
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^4.0.1",
     "better-npm-run": "~0.1.1",
-    "bk-magic-vue": "^2.5.7",
+    "bk-magic-vue": "^2.5.9-beta.17",
     "body-parser": "~1.19.0",
     "chalk": "~2.4.2",
     "cheerio": "~1.0.0-rc.3",
@@ -169,9 +169,9 @@
     "postcss-url": "~8.0.0",
     "query-string": "~6.5.0",
     "rimraf": "~2.6.3",
-    "semver": "~6.1.0",
+    "semver": "~7.5.2",
     "shelljs": "~0.8.3",
-    "terser-webpack-plugin": "~1.2.4",
+    "terser-webpack-plugin": "~4.2.3",
     "transliteration": "~2.1.3",
     "url-loader": "~1.1.2",
     "url-parse": ">=1.5.3",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6ef1c6d32..8c905f566 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,7 +8,7 @@
       { 'no-perm-app-layout': ['403'].includes(routeName) }
     ]">
     <NoticeComponent
-      v-if="isShowNoticeAlert"
+      v-if="isEnableNoticeAlert"
       :api-url="noticeApi"
       @show-alert-change="handleShowAlertChange"
     />
@@ -33,11 +33,14 @@
         :route-name="routeName"
         :user-group-id="userGroupId">
       </header-nav>
-      <the-header @reload-page="handleRefreshPage"
+      <the-header
+        @reload-page="handleRefreshPage"
         :route-name="routeName"
         :user-group-id="userGroupId"
       />
-      <the-nav class="nav-layout"
+      <the-nav
+        class="nav-layout"
+        :route-name="routeName"
         @reload-page="reloadCurPage"
         v-if="!externalSystemsLayout.hideIamSlider" />
     </template>
@@ -80,6 +83,7 @@
     provide () {
       return {
         reload: this.reload,
+        reloadCurPage: this.reloadCurPage,
         showNoticeAlert: this.isShowNoticeAlert
       };
     },
@@ -111,7 +115,7 @@
         routeName: '',
         userGroupId: '',
         isRouterAlive: true,
-        showNoticeAlert: true,
+        showNoticeAlert: false,
         noticeApi: `${window.AJAX_URL_PREFIX}/notice/announcements/`,
         enableNotice: window.ENABLE_BK_NOTICE.toLowerCase() === 'true'
       };
@@ -119,7 +123,10 @@
     computed: {
       ...mapGetters(['mainContentLoading', 'user', 'externalSystemsLayout']),
       isShowNoticeAlert () {
-        return this.enableNotice && this.showNoticeAlert && !this.externalSystemsLayout.hideNoticeAlert;
+        return this.showNoticeAlert && this.isEnableNoticeAlert;
+      },
+      isEnableNoticeAlert () {
+        return this.enableNotice && !this.externalSystemsLayout.hideNoticeAlert;
       }
     },
     watch: {
@@ -329,7 +336,7 @@
       },
 
       handleShowAlertChange (isShow) {
-        console.log(444, isShow);
+        console.log(isShow, '跑马灯回调');
         this.showNoticeAlert = isShow;
       }
     }
@@ -400,11 +407,26 @@
 
     }
 
+    .user-org-perm-container {
+      .main-scroller {
+        height: calc(100% + 278px);
+      }
+      .views-layout {
+        min-width: 100%;
+        overflow: hidden;
+      }
+    }
+
     .notice-app-layout {
       height: calc(100% - 101px) !important;
       .main-scroller {
         height: calc(100% + 91px);
       }
+      .user-org-perm-container {
+        .main-scroller {
+          height: calc(100% + 312px);
+        }
+      }
     }
 
     .no-perm {
@@ -414,5 +436,4 @@
         background-color: #ffffff;
       }
     }
-
 </style>
diff --git a/frontend/src/common/router-handle.js b/frontend/src/common/router-handle.js
index c2470b621..2639c2c48 100644
--- a/frontend/src/common/router-handle.js
+++ b/frontend/src/common/router-handle.js
@@ -23,7 +23,7 @@
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
-
+  
 /**
  * 获取不同身份的router差异
  *
@@ -57,7 +57,8 @@ export const getRouterDiff = (payload) => {
       'userGroupSetting',
       'sensitivityLevel',
       'memberTemplate',
-      'resourcePermManage'
+      'resourcePermManage',
+      'userOrgPerm'
     ];
   }
   if (payload === 'super_manager') {
@@ -95,7 +96,8 @@ export const getRouterDiff = (payload) => {
       'permTransfer',
       'myManageSpaceSubDetail',
       'sensitivityLevel',
-      'resourcePermManage'
+      'resourcePermManage',
+      'userOrgPerm'
     ];
   }
   if (payload === 'system_manager') {
@@ -122,12 +124,11 @@ export const getRouterDiff = (payload) => {
       'systemAccessRegistry',
       'systemAccessOptimize',
       'systemAccessComplete',
-      'resourcePermiss',
       'firstManageSpace',
       'secondaryManageSpace',
       'authorBoundary',
       'myManageSpace',
-      'sensitivityLevel'
+      'userOrgPerm'
     ];
   }
   if (payload === 'rating_manager') {
@@ -197,7 +198,8 @@ export const getRouterDiff = (payload) => {
       'userGroupSetting',
       'sensitivityLevel',
       'memberTemplate',
-      'resourcePermManage'
+      'resourcePermManage',
+      'userOrgPerm'
     ];
   }
   // payload其它取值默认返回全部菜单
@@ -243,13 +245,15 @@ export const getRouterDiff = (payload) => {
     'authorBoundaryEditSecondLevel',
     'secondaryManageSpace',
     'myManageSpace',
-    'MyManageSpaceCreate',
-    'ResourcePermManage'
+    'myManageSpaceCreate',
+    'resourcePermManage',
+    'resourcePermiss',
+    'sensitivityLevel'
   ];
 };
 
 // 导航路由
-export const getNavRouterDiff = (navIndex) => {
+export const getNavRouterDiff = (navIndex, managerPerm = '') => {
   if (navIndex === 0 || navIndex === '') {
     return [
       'userGroup',
@@ -274,7 +278,8 @@ export const getNavRouterDiff = (navIndex) => {
       'userGroupSetting',
       'sensitivityLevel',
       'memberTemplate',
-      'resourcePermManage'
+      'resourcePermManage',
+      'userOrgPerm'
     ];
   }
 
@@ -325,12 +330,13 @@ export const getNavRouterDiff = (navIndex) => {
       'userGroupSetting',
       'sensitivityLevel',
       'memberTemplate',
-      'resourcePermManage'
+      'resourcePermManage',
+      'userOrgPerm'
     ];
   }
 
   if (navIndex === 3) {
-    return [
+    const menuList = [
       'applyCustomPerm',
       'applyProvisionPerm',
       'applyJoinUserGroup',
@@ -355,15 +361,40 @@ export const getNavRouterDiff = (navIndex) => {
       'permTemplate',
       'permTemplateDetail',
       'permTemplateCreate',
-      'approvalProcess',
       'authorBoundary',
       'secondaryManageSpace',
       'myManageSpace',
+      'myManageSpaceCreate',
       'secondaryManageSpaceCreate',
       'secondaryManageSpaceDetail',
+      'authorBoundaryEditFirstLevel',
+      'authorBoundaryEditSecondLevel',
+      'permTemplateEdit',
+      'permTemplateDiff',
+      'addGroupPerm',
+      'groupPermRenewal',
       'userGroupSetting',
       'memberTemplate',
-      'resourcePermManage'
+      'resourcePermManage',
+      'userOrgPerm'
     ];
+    if (['hasSystemNoSuperManager'].includes(managerPerm)) {
+      // 非超管用户隐藏的路由
+      const hideMenuList = [
+        'user',
+        'approvalProcess',
+        'ratingManager',
+        'gradingAdminCreate',
+        'gradingAdminDetail',
+        'gradingAdminEdit',
+        'gradingAdminUpdateTemplate'
+      ];
+      const systemManagerMenu = [
+        ...menuList,
+        ...hideMenuList
+      ];
+      return systemManagerMenu;
+    }
+    return menuList;
   }
 };
diff --git a/frontend/src/common/util.js b/frontend/src/common/util.js
index 3fdabaa35..de83cc12c 100644
--- a/frontend/src/common/util.js
+++ b/frontend/src/common/util.js
@@ -709,3 +709,23 @@ export function isEmojiCharacter (str) {
     }
   }
 }
+
+// 获取当前unix时间戳
+export function getNowTimeExpired () {
+  const nowTimestamp = +new Date() / 1000;
+  const timeList = String(nowTimestamp).split('');
+  const timeIndex = timeList.findIndex((item) => item === '.');
+  const timestamp = parseInt(timeList.splice(0, timeIndex).join(''), 10);
+  return timestamp;
+}
+
+// 查找当前管理员最大身份划分导航栏下菜单
+export function getManagerMenuPerm (payload) {
+  const isSystemManager = payload.find((item) => ['system_manager'].includes(item.type));
+  const isSuperManager = payload.find((item) => ['super_manager'].includes(item.type));
+  // 最大为系统管理员
+  if (isSystemManager && !isSuperManager) {
+    return 'hasSystemNoSuperManager';
+  }
+  return '';
+}
diff --git a/frontend/src/components/choose-ip/topology-tree.vue b/frontend/src/components/choose-ip/topology-tree.vue
index 45c0c94fd..d8eb2b1d7 100644
--- a/frontend/src/components/choose-ip/topology-tree.vue
+++ b/frontend/src/components/choose-ip/topology-tree.vue
@@ -30,7 +30,7 @@
           ref="topologyTableRef"
           size="small"
           data-test-id="topology_tree_group"
-          ext-cls="topology-tree-table"
+          :ext-cls="formatTableCls"
           :header-border="false"
           :outer-border="false"
           :max-height="formatTableHeight"
@@ -220,7 +220,7 @@
                 ref="topologyTableRef"
                 size="small"
                 data-test-id="topology_tree_group"
-                ext-cls="topology-tree-table"
+                :ext-cls="formatTableCls"
                 :header-border="false"
                 :outer-border="false"
                 :data="renderTopologyData"
@@ -758,6 +758,12 @@
           return false;
         };
       },
+      formatTableCls () {
+        if (this.resourceValue) {
+          return 'topology-tree-table topology-tree-table-radio';
+        }
+        return 'topology-tree-table';
+      },
       isTreeEmpty () {
         return this.allTreeData.filter((item) => item.type === 'node').length === 0 || this.searchDisplayText === this.$t(`m.common['搜索结果为空']`);
       }
@@ -2011,4 +2017,15 @@
     }
   }
 }
+/deep/ .topology-tree-table {
+  &.topology-tree-table-radio {
+    .bk-table-header-wrapper {
+      .cell {
+        .bk-form-checkbox {
+          display: none !important;
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/frontend/src/components/custom-perm-system-policy/index.vue b/frontend/src/components/custom-perm-system-policy/index.vue
index a61568ca3..3b27112d5 100644
--- a/frontend/src/components/custom-perm-system-policy/index.vue
+++ b/frontend/src/components/custom-perm-system-policy/index.vue
@@ -1,12 +1,21 @@
 <template>
-  <div :class="['iam-perm-item', extCls]" v-if="permLength > 0">
-    <div class="header" @click="handleExpanded" v-if="!isOnlyPerm">
+  <div v-if="permLength > 0" :class="['iam-perm-item', extCls, `${$route.name}-perm-item`]" :ref="customPermRef">
+    <div class="header" @click.stop="handleExpanded(isExpanded)" v-if="!isOnlyPerm">
       <Icon bk class="expanded-icon" :type="isExpanded ? 'down-shape' : 'right-shape'" />
-      <label class="title">{{ title }}</label>
+      <span class="title">{{ title }}</span>
+      <template>
+      </template>
       <div class="sub-title">
-        {{ $t(`m.common['共']`) }}
-        <span class="number">{{ permLength }}</span>
-        {{ $t(`m.common['个']`) }}{{ typeTitle }}
+        <template v-if="['userOrgPerm'].includes($route.name)">
+          ({{ $t(`m.common['共']`) }}
+          <span class="number">{{ permLength }}</span>
+          {{ $t(`m.common['条']`) }})
+        </template>
+        <template v-else>
+          {{ $t(`m.common['共']`) }}
+          <span class="number">{{ permLength }}</span>
+          {{ $t(`m.common['个']`) }}{{ typeTitle }}
+        </template>
         <span
           v-if="isAllDelete"
           class="del-all-icon">
@@ -18,7 +27,7 @@
       <div class="slot-content">
         <slot />
       </div>
-      <p class="expand-action" @click="handleCollapse">
+      <p v-if="showCollapse" class="expand-action" @click="handleCollapse">
         <Icon :type="isExpanded ? 'up-angle' : 'down-angle'" />
         {{ $t(`m.common['点击收起']`) }}
       </p>
@@ -50,6 +59,10 @@
         type: String,
         default: ''
       },
+      customPermRef: {
+        type: String,
+        default: ''
+      },
       onePerm: {
         type: Number,
         default: 0
@@ -61,6 +74,10 @@
       isAllDelete: {
         type: Boolean,
         default: false
+      },
+      showCollapse: {
+        type: Boolean,
+        default: true
       }
     },
     data () {
@@ -71,13 +88,19 @@
     watch: {
       expanded (value) {
         this.isExpanded = !!value;
-      }
-    },
-    created () {
-      if (this.onePerm === 1) {
-        this.$nextTick(() => {
-          this.handleExpanded();
-        });
+      },
+      onePerm: {
+        handler (value) {
+          if (value === 1) {
+            this.$nextTick(() => {
+              this.handleExpanded(false);
+            });
+          } else {
+            this.isExpanded = false;
+          }
+        },
+        immediate: true,
+        deep: true
       }
     },
     methods: {
@@ -87,11 +110,12 @@
         this.$emit('on-expanded', false);
       },
 
-      handleExpanded () {
-        this.isExpanded = !this.isExpanded;
-        this.$emit('update:expanded', true);
-        this.$emit('on-expanded', true);
+      handleExpanded (payload) {
+        this.isExpanded = !payload;
+        this.$emit('update:expanded', this.isExpanded);
+        this.$emit('on-expanded', this.isExpanded);
       },
+      
       handleDeleteAll () {
         this.$emit('on-delete-all');
       }
@@ -173,5 +197,40 @@
             }
           }
         }
+
+        &.userOrgPerm-perm-item {
+          box-shadow: 0 2px 4px 0 #1919290d;
+          &:not(&:last-of-type) {
+            margin-bottom: 12px;
+          }
+          .header {
+            display: flex;
+            align-items: center;
+            height: 46px;
+            line-height: 46px;
+            padding: 0 32px;
+            .expanded-icon {
+              top: 18px;
+            }
+          }
+          .title {
+            color: #313238;
+            font-weight: 700;
+          }
+          .sub-title {
+            margin-left: 4px;
+            color: #63656e;
+          }
+          .number {
+            color: #3a84ff;
+            font-weight: 700;
+          }
+          .content {
+            .slot-content {
+              padding: 0 24px;
+              padding-bottom: 10px;
+            }
+          }
+        }
     }
 </style>
diff --git a/frontend/src/components/header-nav/index.css b/frontend/src/components/header-nav/index.css
index c2d2ad271..5a22f109a 100644
--- a/frontend/src/components/header-nav/index.css
+++ b/frontend/src/components/header-nav/index.css
@@ -56,7 +56,7 @@ $cubic-bezier: cubic-bezier(0.4, 0, 0.2, 1);
             color: #3c96ff;
         }
 
-        .heaer-nav-title {
+        .header-nav-title {
             margin: 0;
             padding: 0 20px;
             display: inline-block;
diff --git a/frontend/src/components/header-nav/index.vue b/frontend/src/components/header-nav/index.vue
index 7ac5b5e0f..81c186f92 100644
--- a/frontend/src/components/header-nav/index.vue
+++ b/frontend/src/components/header-nav/index.vue
@@ -10,7 +10,7 @@
         <span v-for="(item, i) in navData" :key="i">
           <h2
             v-if="item.show"
-            class="heaer-nav-title"
+            class="header-nav-title"
             @click="handleSelect(item, i)"
             :class="index === i ? 'active' : ''"
           >
@@ -122,7 +122,7 @@
   import { il8n, language } from '@/language';
   import { bus } from '@/common/bus';
   import { buildURLParams } from '@/common/url';
-  import { formatI18nKey, jsonpRequest } from '@/common/util';
+  import { formatI18nKey, jsonpRequest, getManagerMenuPerm } from '@/common/util';
   import { NEED_CONFIRM_DIALOG_ROUTER } from '@/common/constants';
   import SystemLog from '../system-log';
   import { getRouterDiff, getNavRouterDiff } from '@/common/router-handle';
@@ -203,7 +203,7 @@
   ]);
 
   export default {
-    name: '',
+    inject: ['reloadCurPage'],
     components: {
       SystemLog
       // IamGuide
@@ -255,14 +255,16 @@
         placeholderValue: '',
         userGroupName: '',
         navData: [
-          { text: this.$t(`m.nav['个人工作台']`), id: 0, show: true, type: 'staff' },
-          { text: this.$t(`m.nav['管理空间']`), id: 1, show: true, type: 'all_manager' },
-          { text: this.$t(`m.nav['统计分析']`), id: 2, show: false, type: 'super_manager' },
-          { text: this.$t(`m.nav['平台管理']`), id: 3, show: false, type: 'super_manager' }
+          { text: this.$t(`m.nav['个人工作台']`), id: 0, show: true, type: ['staff'] },
+          { text: this.$t(`m.nav['管理空间']`), id: 1, show: true, type: ['all_manager'] },
+          { text: this.$t(`m.nav['统计分析']`), id: 2, show: false, type: ['super_manager'] },
+          { text: this.$t(`m.nav['平台管理']`), id: 3, show: false, type: ['super_manager'] }
         ],
         defaultRouteList: ['myPerm', 'userGroup', 'audit', 'user', 'addGroupPerm'],
+        systemNoSuperList: ['myPerm', 'userGroup', 'audit', 'resourcePermiss', 'addGroupPerm'],
         isRatingChange: false,
         haveManager: false,
+        isSameRoute: false,
         showNavDataLength: 0,
         curHeight: 78,
         languageList: [
@@ -274,39 +276,41 @@
             label: 'English',
             value: 'en'
           }
-        ]
+        ],
+        curFromName: ''
       };
     },
     computed: {
-            ...mapGetters([
-            'navStick',
-            'headerTitle',
-            'backRouter',
-            'user',
-            'mainContentLoading',
-            'roleList',
-            'index',
-            'navCurRoleId',
-            'externalSystemId'
-            ]),
-            style () {
-                return {
-                    // height: `${this.roleList.length ? this.curHeight : 46}px`
-                    height: `46px`
-                };
-            },
-            curAccountLogo () {
-                return [].slice.call(this.user.username)[0].toUpperCase() || '-';
-            },
-            isHide () {
-                return this.$route.query.system_id && this.$route.query.tid;
-            },
-            isShowSearch () {
-                return this.searchValue === '';
-            }
+      ...mapGetters([
+      'navStick',
+      'headerTitle',
+      'backRouter',
+      'user',
+      'mainContentLoading',
+      'roleList',
+      'index',
+      'navCurRoleId',
+      'externalSystemId'
+      ]),
+      style () {
+          return {
+              // height: `${this.roleList.length ? this.curHeight : 46}px`
+              height: `46px`
+          };
+      },
+      curAccountLogo () {
+          return [].slice.call(this.user.username)[0].toUpperCase() || '-';
+      },
+      isHide () {
+          return this.$route.query.system_id && this.$route.query.tid;
+      },
+      isShowSearch () {
+          return this.searchValue === '';
+      }
     },
     watch: {
       $route: function (to, from) {
+        this.curFromName = from.name || '';
         this.hasPageTab = !!to.meta.hasPageTab;
         if (['permTemplateDetail', 'userGroupDetail'].includes(to.name)) {
           this.panels = this.getTabData(to.name);
@@ -348,7 +352,10 @@
       },
       routeName: {
         handler (value) {
-          const index = this.defaultRouteList.findIndex((item) => item === value);
+          // const isSystemNoSuper = this.roleList.find((item) => ['system_manager'].includes(item.type) && !['super_manager'].includes(item.type));
+          // const list = isSystemNoSuper ? this.systemNoSuperList : this.defaultRouteList;
+          const list = this.defaultRouteList;
+          const index = list.findIndex((item) => item === value);
           if (index > -1) {
             ['addGroupPerm'].includes(value)
               ? this.fetchUserGroup()
@@ -366,10 +373,18 @@
           this.haveManager
             = this.showNavDataLength
               && this.showGuide
-              && newValue.find((item) => ['all_manager'].includes(item.type) && item.show);
+              && newValue.find((item) => item.type.includes('all_manager') && item.show);
         },
         immediate: true,
         deep: true
+      },
+      index: {
+        handler (newValue, oldValue) {
+          if (oldValue && newValue !== oldValue && !this.curFromName) {
+            this.isSameRoute = true;
+          }
+        },
+        deep: true
       }
     },
     created () {
@@ -391,7 +406,7 @@
       });
 
       bus.$on('rating-admin-change', () => {
-        const data = this.navData.find((e) => e.type === 'staff');
+        const data = this.navData.find((e) => e.type.includes('staff'));
         this.isRatingChange = true;
         this.handleSelect(data, 0);
       });
@@ -481,14 +496,26 @@
 
       async updateRouter (navIndex = 0) {
         let difference = [];
+        const permResult = getManagerMenuPerm(this.roleList);
+        // const list = permResult.includes('hasSystemNoSuperManager') ? this.systemNoSuperList : this.defaultRouteList;
+        const list = this.defaultRouteList;
         if (navIndex === 1) {
+          // 不同导航栏下相同的权限路由名称跳转增加延时时间，防止相同接口调用多次被节流
           await this.$store.dispatch('userInfo');
+          if (this.isSameRoute) {
+            this.reloadCurPage(this.$route);
+          }
           const type = this.curRole;
           difference = getRouterDiff(type);
           this.$store.commit('updataRouterDiff', type);
         } else {
-          difference = getNavRouterDiff(navIndex);
+          difference = getNavRouterDiff(navIndex, permResult);
           this.$store.commit('updataNavRouterDiff', navIndex);
+          // 不同导航栏下相同的权限路由名称跳转增加延时时间，防止相同接口调用多次被节流
+          if (this.isSameRoute) {
+            await this.$store.dispatch('userInfo');
+            this.reloadCurPage(this.$route);
+          }
         }
         const curRouterName = this.$route.name;
         if (difference.length) {
@@ -497,19 +524,10 @@
             window.localStorage.removeItem('iam-header-title-cache');
             window.localStorage.removeItem('iam-header-name-cache');
             this.$router.push({
-              name: this.isRatingChange ? 'myManageSpace' : this.defaultRouteList[navIndex],
+              name: this.isRatingChange ? 'myManageSpace' : list[navIndex],
               params: navIndex === 1 ? { id: this.user.role.id, entry: 'updateRole' } : {}
             });
           } else {
-            // if (navIndex === 0 && ['gradingAdminDetail', 'gradingAdminCreate', 'gradingAdminEdit'].includes(curRouterName)) {
-            //     this.$router.push({
-            //         name: 'myPerm'
-            //     });
-            // } else if (navIndex === 3 && ['gradingAdminDetail', 'gradingAdminCreate', 'gradingAdminEdit', 'myManageSpaceCreate', 'myManageSpaceSubDetail'].includes(curRouterName)) {
-            //     this.$router.push({
-            //         name: 'user'
-            //     });
-            // }
             // 修复当前是添加组权限页面点击其他角色菜单会再次跳到权限管理
             // 处理二级管理空间点击staff菜单不刷新路由问题
             // 处理超级管理员账号下头部导航没选择默认路由问题
@@ -525,7 +543,7 @@
             ];
             if (OtherRoute.includes(curRouterName)) {
               this.$router.push({
-                name: this.defaultRouteList[navIndex]
+                name: list[navIndex]
               });
             }
           }
@@ -555,11 +573,6 @@
         this.$set(currentData, 'active', true);
         this.$store.commit('updateIndex', index);
         window.localStorage.setItem('index', index);
-        // if (this.routeName === 'addGroupPerm') {
-        //     this.$router.push({
-        //         name: 'userGroup'
-        //     });
-        // }
         this.isShowGradingWrapper = false;
         this.isShowUserDropdown = false;
         try {
@@ -635,7 +648,7 @@
       },
 
       handleManager () {
-        const data = this.navData.find((e) => e.type !== 'staff');
+        const data = this.navData.find((e) => !e.type.includes('staff'));
         this.handleSelect(data, 1);
         this.$store.commit('updateSelectManager', true);
       },
@@ -678,15 +691,33 @@
       // 根据角色设置
       setTabRoleData () {
         const superManager = this.curRoleList.find((e) => e.type === 'super_manager');
+        const systemManager = this.curRoleList.find((e) => e.type === 'system_manager');
         const allManager = this.curRoleList.find((e) => e.type !== 'staff');
         this.navData.forEach((element, i) => {
           element.active = i === this.index;
-          if (element.type === 'super_manager' && superManager) {
-            element.id = superManager.id;
-            element.show = true;
-          } else if (element.type === 'all_manager' && allManager) {
-            element.id = this.navCurRoleId || allManager.id;
-            // element.id = allManager.id;
+          const rolesMap = [
+            [
+              () => element.type.includes('super_manager') && superManager,
+              () => {
+                element = Object.assign(element, { id: superManager.id, show: true });
+              }
+            ],
+            [
+              () => element.type.includes('system_manager') && systemManager && !superManager,
+              () => {
+                element = Object.assign(element, { id: systemManager.id, show: true });
+              }
+            ],
+            [
+              () => element.type.includes('all_manager') && allManager,
+              () => {
+                element = Object.assign(element, { id: this.navCurRoleId || allManager.id });
+              }
+            ]
+          ];
+          const getRole = rolesMap.find((item) => item[0]());
+          if (getRole) {
+            getRole[1]();
           }
         });
         this.$store.commit('updateNavData', this.navData);
@@ -695,7 +726,7 @@
       setNavData () {
         this.$nextTick(() => {
           for (let i = 0; i < this.navData.length; i++) {
-            if (this.navData[i].type === 'all_manager') {
+            if (this.navData[i].type.includes('all_manager')) {
               this.navData[i].show = !!this.roleList.length;
               break;
             }
diff --git a/frontend/src/components/iam-member-template-table/index.vue b/frontend/src/components/iam-member-template-table/index.vue
index 1dad8ceb0..c8ce92ffb 100644
--- a/frontend/src/components/iam-member-template-table/index.vue
+++ b/frontend/src/components/iam-member-template-table/index.vue
@@ -250,7 +250,7 @@
       fetchSelectedGroupCount () {
         this.$nextTick(() => {
           const selectionCount = document.getElementsByClassName('bk-page-selection-count');
-          if (this.$refs.templateTableRef && selectionCount && selectionCount.length) {
+          if (this.$refs.templateTableRef && selectionCount && selectionCount.length && selectionCount[0].children) {
             selectionCount[0].children[0].innerHTML = this.currentSelectList.length;
           }
         });
diff --git a/frontend/src/components/iam-resource-cascade-search/index.vue b/frontend/src/components/iam-resource-cascade-search/index.vue
index e43cead9a..4040f99ac 100644
--- a/frontend/src/components/iam-resource-cascade-search/index.vue
+++ b/frontend/src/components/iam-resource-cascade-search/index.vue
@@ -1,896 +1,1048 @@
-<template>
-  <div>
-    <div
-      ref="selectTableRef"
-      class="iam-search-resource-form iam-search-resource-form-perm">
-      <render-search v-if="enableGroupInstanceSearch">
-        <div
-          :class="[
-            'join-user-group-form',
-            { 'join-user-group-form-lang': !curLanguageIsCn }
-          ]">
-          <div>
-            <bk-form
-              form-type="vertical"
-              class="pb30 resource-action-form">
-              <iam-form-item
-                :label="$t(`m.common['系统']`)"
-                class="pr20 form-item-resource">
-                <bk-select
-                  :style="{ width: contentWidth }"
-                  v-model="applyGroupData.system_id"
-                  :clearable="!externalSystemsLayout.myPerm.hideApplyBtn"
-                  :allow-enter="false"
-                  :placeholder="$t(`m.verify['请选择']`)"
-                  @change="handleCascadeChange"
-                  @clear="handleClearSearch"
-                  searchable>
-                  <bk-option v-for="option in systemSelectList"
-                    :key="option.id"
-                    :id="option.id"
-                    :name="`${option.name} (${option.id})`">
-                  </bk-option>
-                </bk-select>
-                <p class="error-tips" v-if="systemIdError">
-                  {{$t(`m.verify['请选择系统']`)}}
-                </p>
-              </iam-form-item>
-              <iam-form-item
-                :label="$t(`m.common['操作']`)"
-                class="pr20"
-              >
-                <bk-select
-                  :style="{ width: contentWidth }"
-                  v-model="applyGroupData.action_id"
-                  :clearable="false"
-                  :allow-enter="false"
-                  :placeholder="$t(`m.verify['请选择']`)"
-                  :disabled="!applyGroupData.system_id"
-                  :title="!applyGroupData.system_id ? $t(`m.verify['请选择系统']`) : ''"
-                  @selected="handleSelectedAction"
-                  searchable>
-                  <bk-option v-for="option in processesList"
-                    :key="option.id"
-                    :id="option.id"
-                    :name="`${option.name} (${option.id})`">
-                  </bk-option>
-                </bk-select>
-                <p class="error-tips" v-if="actionIdError">
-                  {{$t(`m.verify['请选择操作']`)}}
-                </p>
-              </iam-form-item>
-              <template>
-                <div
-                  v-for="(_, index) in resourceTypeData.resource_groups"
-                  :key="_.id"
-                  class="resource-group-container">
-                  <div>
-                    <iam-form-item
-                      :label="$t(`m.permApply['资源类型']`)"
-                      class="pr20 form-item-resource">
-                      <bk-select
-                        :style="{ width: contentWidth }"
-                        v-model="curResourceData.type"
-                        :clearable="false"
-                        :allow-enter="false"
-                        :placeholder="$t(`m.verify['请选择']`)"
-                        :disabled="!applyGroupData.action_id"
-                        :title="!applyGroupData.action_id ?
-                          $t(`m.verify['请选择操作']`) : ''"
-                        @change="handleResourceTypeChange(index)"
-                      >
-                        <bk-option
-                          v-for="related in _.related_resource_types_list"
-                          :key="related.type"
-                          :id="related.type"
-                          :name="related.name">
-                        </bk-option>
-                      </bk-select>
-                      <p class="error-tips" v-if="resourceTypeError">
-                        {{$t(`m.verify['请选择资源类型']`)}}
-                      </p>
-                    </iam-form-item>
-                  </div>
-                  <iam-form-item
-                    :style="{ width: contentWidth }"
-                    class="form-item-resource"
-                    :label="$t(`m.common['资源实例']`)">
-                    <div class="relation-content-item"
-                      v-for="(content, contentIndex) in _.related_resource_types"
-                      :key="contentIndex">
-                      <div class="content"
-                      >
-                        <render-condition
-                          :ref="`condition_${index}_${contentIndex}_ref`"
-                          :value="curResourceData.type ?
-                            content.value : $t(`m.verify['请选择']`)"
-                          :hover-title="!curResourceData.type ?
-                            $t(`m.verify['请选择资源类型']`) : ''"
-                          :is-empty="content.empty"
-                          :params="curCopyParams"
-                          :disabled="!curResourceData.type"
-                          :is-error="content.isLimitExceeded || content.isError"
-                          @on-click="handleShowResourceInstance(
-                            resourceTypeData,
-                            content, contentIndex, index)"
-                        />
-                        <p class="error-tips" v-if="resourceInstanceError">
-                          {{$t(`m.resourcePermiss['请选择资源实例']`)}}
-                        </p>
-                      </div>
-                    </div>
-                  </iam-form-item>
-                </div>
-              </template>
-            </bk-form>
-          </div>
-          <div class="group-search-select pb20">
-            <iam-search-select
-              style="width: calc(100% - 20px)"
-              ref="searchSelectRef"
-              :data="searchData"
-              :value="searchValue"
-              :placeholder="$t(`m.applyEntrance['申请加入用户组搜索提示']`)"
-              :quick-search-method="handleQuickSearchMethod"
-              @on-change="handleSearch"
-              @on-click-menu="handleClickMenu"
-              @on-input="handleSearchInput"
-            />
-            <bk-button
-              class="ml20"
-              theme="primary"
-              @click="handleSearchUserGroup(true, true)">
-              {{ $t(`m.common['查询']`) }}
-            </bk-button>
-            <bk-button
-              class="ml20"
-              theme="default"
-              @click="handleEmptyClear">
-              {{ $t(`m.common['重置']`) }}
-            </bk-button>
-          </div>
-        </div>
-      </render-search>
-      <div
-        v-else
-        style="padding-bottom: 20px;">
-        <iam-search-select
-          ref="searchSelectRef"
-          @on-change="handleSearch"
-          :data="searchData"
-          :value="searchValue"
-          :placeholder="$t(`m.applyEntrance['申请加入用户组搜索提示']`)"
-          :quick-search-method="handleQuickSearchMethod" />
-      </div>
-    </div>
-    
-    <bk-sideslider
-      :is-show="isShowResourceInstanceSideslider"
-      :title="resourceInstanceSideSliderTitle"
-      :width="resourceSliderWidth"
-      quick-close
-      transfer
-      :ext-cls="'relate-instance-sideslider'"
-      @update:isShow="handleResourceCancel('mask')">
-      <div slot="content"
-        class="sideslider-content">
-        <render-resource
-          ref="renderResourceRef"
-          :data="condition"
-          :original-data="originalCondition"
-          :selection-mode="curSelectionMode"
-          :params="params"
-        />
-      </div>
-      <div slot="footer" style="margin-left: 25px;">
-        <bk-button theme="primary" @click="handleResourceSubmit">
-          {{ $t(`m.common['保存']`) }}
-        </bk-button>
-        <bk-button style="margin-left: 10px;" @click="handleResourceCancel('cancel')">
-          {{ $t(`m.common['取消']`) }}
-        </bk-button>
-      </div>
-    </bk-sideslider>
-  </div>
-</template>
-
-<script>
-  import _ from 'lodash';
-  import Policy from '@/model/policy';
-  import RenderCondition from '@/views/resource-permiss/components/render-condition';
-  import RenderResource from '@/views/resource-permiss/components/render-resource';
-  import IamSearchSelect from '@/components/iam-search-select';
-  import { mapGetters } from 'vuex';
-  import { leaveConfirm } from '@/common/leave-confirm';
-  import { delLocationHref } from '@/common/util';
-  
-  export default {
-    provide: function () {
-      return {
-        getResourceSliderWidth: () => this.resourceSliderWidth
-      };
-    },
-    components: {
-      RenderResource,
-      RenderCondition,
-      IamSearchSelect
-    },
-    props: {
-      active: {
-        type: String,
-        default: 'GroupPerm'
-      },
-      minSelectWidth: {
-        type: String,
-        default: '200px'
-      },
-      maxSelectWidth: {
-        type: String,
-        default: '240px'
-      }
-    },
-    data () {
-      return {
-        enableGroupInstanceSearch: window.ENABLE_GROUP_INSTANCE_SEARCH.toLowerCase() === 'true',
-        CUR_LANGUAGE: window.CUR_LANGUAGE,
-        applyGroupData: {
-          system_id: '',
-          action_id: ''
-        },
-        pagination: {
-          current: 1,
-          count: 0,
-          limit: 10
-        },
-        emptyData: {
-          type: '',
-          text: '',
-          tip: '',
-          tipType: ''
-        },
-        resourceTypeData: {
-          resource_groups: [{
-            'related_resource_types': [{
-              'type': '',
-              'system_id': '',
-              'name': '',
-              'canPaste': false,
-              'action': {
-                'name': '',
-                'type': ''
-              },
-              'isError': false,
-              'tag': '',
-              'flag': '',
-              'isChange': false,
-              'isNew': true,
-              'selectionMode': '',
-              'condition': [],
-              'conditionBackup': []
-            }],
-            'related_resource_types_list': []
-          }],
-          isEmpty: true
-        },
-        defaultResourceTypeList: [{
-          'type': '',
-          'system_id': '',
-          'name': '',
-          'canPaste': false,
-          'action': {
-            'name': '',
-            'type': ''
-          },
-          'isError': false,
-          'tag': '',
-          'flag': '',
-          'isChange': false,
-          'isNew': true,
-          'selectionMode': '',
-          'condition': [],
-          'conditionBackup': []
-        }],
-        initSearchData: [
-          {
-            id: 'name',
-            name: this.$t(`m.userGroup['用户组名']`),
-            default: true
-          },
-          {
-            id: 'id',
-            name: 'ID',
-            default: true
-          },
-          {
-            id: 'description',
-            name: this.$t(`m.common['描述']`),
-            default: true
-          }
-        ],
-        curResourceData: {
-          type: ''
-        },
-        searchParams: {},
-        searchList: [],
-        searchValue: [],
-        curResourceTypeList: [],
-        systemSelectList: [],
-        processesList: [],
-        resourceInstances: [],
-        isShowConfirmDialog: false,
-        confirmDialogTitle: this.$t(`m.verify['admin无需申请权限']`),
-        systemIdError: false,
-        actionIdError: false,
-        searchTypeError: false,
-        resourceTypeError: false,
-        resourceInstanceError: false,
-        isShowResourceInstanceSideslider: false,
-        isSearchSystem: false,
-        groupIndex: -1,
-        curResIndex: -1,
-        curCopyParams: {},
-        params: {},
-        queryParams: {},
-        searchUserGroupList: [],
-        searchDepartGroupList: [],
-        searchSystemPolicyList: [],
-        resourceInstanceSideSliderTitle: '',
-        curSelectMenu: '',
-        curInputText: '',
-        contentWidth: '',
-        resourceSliderWidth: Math.ceil(window.innerWidth * 0.67 - 7) < 960
-          ? 960 : Math.ceil(window.innerWidth * 0.67 - 7)
-      };
-    },
-    computed: {
-      ...mapGetters(['externalSystemsLayout', 'externalSystemId']),
-      condition () {
-          if (this.curResIndex === -1 || this.groupIndex === -1) {
-              return [];
-          }
-          this.curResourceData = this.resourceTypeData.resource_groups[this.groupIndex]
-              .related_resource_types[this.curResIndex];
-          if (!this.curResourceData) {
-              return [];
-          }
-          if (this.curResourceData.condition.length === 0) this.curResourceData.condition = ['none'];
-          return _.cloneDeep(this.curResourceData.condition);
-      },
-      curSelectionMode () {
-          if (this.curResIndex === -1 || this.groupIndex === -1) {
-              return 'all';
-          }
-          this.curResourceData = this.resourceTypeData.resource_groups[this.groupIndex]
-              .related_resource_types[this.curResIndex];
-          return this.curResourceData.selectionMode;
-      },
-      originalCondition () {
-          return _.cloneDeep(this.condition);
-      }
-    },
-    watch: {
-      active: {
-        async handler (newValue, oldValue) {
-          if (oldValue && oldValue !== newValue) {
-            if (this.searchList.length) {
-              await this.handleSearchUserGroup(true, false);
-            }
-          }
-        },
-        immediate: true
-      },
-      externalSystemId: {
-        handler (value) {
-          if (value) {
-            this.applyGroupData.system_id = value;
-            this.handleCascadeChange();
-          }
-        },
-        immediate: true
-      }
-    },
-    async created () {
-      this.contentWidth = window.innerWidth <= 1520 ? this.minSelectWidth : this.maxSelectWidth;
-      this.searchData = this.enableGroupInstanceSearch
-        ? this.initSearchData.filter(item => ['name', 'id', 'description'].includes(item.id))
-        : this.initSearchData;
-      await this.fetchPermData();
-    },
-    mounted () {
-      window.addEventListener('resize', (this.formatFormItemWidth));
-      window.addEventListener('resize', (this.formatResourceSliderWidth));
-      this.$once('hook:beforeDestroy', () => {
-        window.removeEventListener('resize', this.formatFormItemWidth);
-        window.removeEventListener('resize', this.formatResourceSliderWidth);
-      });
-    },
-    methods: {
-      formatResourceSliderWidth () {
-        this.resourceSliderWidth = Math.ceil(window.innerWidth * 0.67 - 7) < 960
-          ? 960 : Math.ceil(window.innerWidth * 0.67 - 7);
-      },
-
-      async fetchPermData () {
-        this.fetchSystemList();
-        const isSearch = this.applyGroupData.system_id || Object.keys(this.searchParams).length > 0;
-        if (isSearch) {
-          await this.handleSearchUserGroup(false, false);
-        }
-      },
-
-      async fetchSystemList () {
-        try {
-          const params = {};
-          if (this.externalSystemId) {
-            params.hidden = false;
-            params.system_id = this.externalSystemId;
-          }
-          const { data } = await this.$store.dispatch('system/getSystems', params);
-          this.systemSelectList = data || [];
-          if (this.externalSystemId) {
-            this.systemSelectList = this.systemSelectList.filter(item => item.id === this.externalSystemId);
-          }
-        } catch (e) {
-          console.error(e);
-          this.messageAdvancedError(e);
-        }
-      },
-
-      async handleSearchUserGroup (isClick = false, isTagInput = false) {
-        // isTagInput是处理未生成tag的内容
-        this.systemIdError = false;
-        this.handleManualInput(isTagInput);
-        const isSearch = this.applyGroupData.system_id || Object.keys(this.searchParams).length > 0;
-        // 处理搜索框没有生成tag，下拉框也没有选择任务数据，但实际有输入内容情况
-        const isNoTag = isTagInput && this.searchList.length < 1 && !this.applyGroupData.system_id;
-        if (isSearch) {
-          // if (!this.applyGroupData.system_id && ['CustomPerm'].includes(this.active)) {
-          //   this.systemIdError = true;
-          //   return;
-          // }
-          let resourceInstances = _.cloneDeep(this.resourceInstances);
-          if (this.applyGroupData.system_id) {
-            if (!this.applyGroupData.action_id) {
-              this.actionIdError = true;
-              return;
-            }
-            if (this.curResourceTypeList.length && !this.curResourceData.type) {
-              this.resourceTypeError = true;
-              return;
-            }
-            resourceInstances = resourceInstances.reduce((prev, item) => {
-              const { id, resourceInstancesPath } = this.handlePathData(item, item.type);
-              prev.push({
-                system_id: item.system_id,
-                id: id,
-                type: item.type,
-                name: item.name,
-                path: resourceInstancesPath
-              });
-              return prev;
-            }, []);
-            if (this.curResourceData.type
-              && !resourceInstances.length
-              && this.resourceTypeData.resource_groups[this.groupIndex]
-              && this.resourceTypeData.resource_groups[this.groupIndex]
-                .related_resource_types.some(e => e.empty)) {
-              this.resourceInstanceError = true;
-              return;
-            }
-          }
-          if (isClick) {
-            this.resetPagination();
-          }
-          await this.fetchSearchUserGroup(resourceInstances, isNoTag);
-        } else {
-          if (isNoTag) {
-            return;
-          }
-          // 如果没有搜索参数，重置数据
-          this.emptyData.tipType = '';
-          this.$emit('on-refresh-table');
-        }
-      },
-
-      async fetchSearchUserGroup (resourceInstances, isNoTag) {
-        const { current, limit } = this.pagination;
-        if (this.searchParams.hasOwnProperty('id')) {
-          if (!isNaN(Number(this.searchParams.id))) {
-            this.searchParams.id = Number(this.searchParams.id);
-          }
-        }
-        const params = {
-            ...this.applyGroupData,
-            ...this.searchParams,
-            limit,
-            offset: limit * (current - 1),
-            resource_instances: resourceInstances || []
-        };
-        this.$emit('on-remote-table', {
-          searchParams: params,
-          pagination: this.pagination,
-          emptyData: { ...this.emptyData, ...{ tipType: 'search' } },
-          isNoTag
-        });
-        this.curSelectMenu = '';
-        this.curInputText = '';
-      },
-
-      async handleCascadeChange () {
-        this.systemIdError = false;
-        this.actionIdError = false;
-        this.resourceTypeError = false;
-        this.resourceInstanceError = false;
-        this.resourceActionData = [];
-        this.processesList = [];
-        this.applyGroupData.action_id = '';
-        this.curResourceData.type = '';
-        this.handleResetResourceData();
-        if (this.applyGroupData.system_id) {
-          try {
-            const { data } = await this.$store.dispatch('approvalProcess/getActionGroups', { system_id: this.applyGroupData.system_id });
-            this.handleFormatRecursion(data || []);
-          } catch (e) {
-            console.error(e);
-            this.messageAdvancedError(e);
-          }
-        }
-      },
-
-      handleClickMenu (payload) {
-        const { menu } = payload;
-        if (menu.id) {
-          this.curSelectMenu = menu.id;
-        }
-      },
-
-      handleSearchInput (payload) {
-        const { text } = payload;
-        this.curInputText = text;
-      },
-
-      handleSearch (payload, result) {
-        this.searchParams = payload;
-        this.searchList = [...result];
-        this.curSelectMenu = '';
-        this.curInputText = '';
-        this.emptyData.tipType = 'search';
-        if (!result.length) {
-          this.resetPagination();
-          this.resetLocationHref();
-        }
-        this.handleSearchUserGroup(true, false);
-      },
-
-      handleEmptyClear () {
-        this.searchParams = {};
-        this.queryParams = {};
-        this.searchValue = [];
-        this.emptyData.tipType = '';
-        if (this.$refs.searchSelectRef && this.$refs.searchSelectRef.$refs.searchSelect) {
-          this.$refs.searchSelectRef.$refs.searchSelect.localValue = '';
-        }
-        this.resetPagination();
-        this.resetSearchParams();
-        this.handleSearchUserGroup(false, false);
-      },
-
-      handleEmptyRefresh () {
-        this.emptyData.tipType = '';
-        if (this.$refs.searchSelectRef && this.$refs.searchSelectRef.$refs.searchSelect) {
-          this.$refs.searchSelectRef.$refs.searchSelect.localValue = '';
-        }
-        this.resetPagination();
-        this.handleSearchUserGroup(false, false);
-      },
-
-      async handleClearSearch () {
-        this.applyGroupData.action_id = '';
-        this.curResourceData.type = '';
-        this.emptyData.tipType = '';
-        this.resourceInstances = [];
-        this.resetPagination();
-        this.handleSearchUserGroup(false, false);
-      },
-
-      handleResourceTypeChange (index) {
-        this.resourceTypeError = false;
-        this.groupIndex = index;
-        this.resourceInstances = [];
-        if (this.resourceTypeData
-          && this.resourceTypeData.resource_groups
-          && this.resourceTypeData.resource_groups.length) {
-          const resourceGroups = this.resourceTypeData.resource_groups[index];
-          const typesList = _.cloneDeep(resourceGroups.related_resource_types_list);
-          resourceGroups.related_resource_types
-            = typesList.filter(item => item.type === this.curResourceData.type);
-          if (typesList.length && !resourceGroups.related_resource_types.length) {
-            this.$set(this.resourceTypeData.resource_groups[index], 'related_resource_types', this.defaultResourceTypeList);
-          }
-        }
-        if (!this.applyGroupData.system_id || !this.resourceTypeData.resource_groups.length) {
-          this.handleResetResourceData();
-        }
-      },
-
-      handleSelectedAction () {
-        this.actionIdError = false;
-        this.resourceTypeError = false;
-        this.resourceInstanceError = false;
-        this.curResourceData.type = '';
-        this.resourceInstances = [];
-        // 处理操作下是否有无关联资源
-        this.curResourceTypeList = [];
-        this.resourceTypeData = _.cloneDeep(this.processesList.find(e => e.id === this.applyGroupData.action_id));
-        if (this.resourceTypeData && this.resourceTypeData.resource_groups) {
-          if (this.resourceTypeData.resource_groups.length) {
-            const resourceGroups = this.resourceTypeData.resource_groups;
-            this.resourceTypeData.resource_groups.forEach(item => {
-              // 避免切换操作时，把默认数据代入，从而导致下拉框出现空白项
-              if (item.related_resource_types.length && item.related_resource_types[0].system_id) {
-                this.$set(item, 'related_resource_types_list', _.cloneDeep(item.related_resource_types));
-                this.curResourceTypeList = _.cloneDeep(item.related_resource_types);
-                // 默认选中只有一条资源类型数据，改变当前索引值
-                if (item.related_resource_types.length === 1) {
-                  this.curResourceData.type = item.related_resource_types[0].type;
-                  this.handleResourceTypeChange(0);
-                }
-              }
-            });
-            if (!this.curResourceData.type) {
-              this.$set(this.resourceTypeData.resource_groups[0], 'related_resource_types', []);
-            }
-            // 如果related_resource_types和related_resource_types_list都为空，则需要填充默认数据显示资源实例下拉框
-            if ((resourceGroups[0].related_resource_types_list
-              && resourceGroups[0].related_resource_types_list.length
-              && !resourceGroups[0].related_resource_types.length)
-              || (!resourceGroups[0].related_resource_types.length
-                && !resourceGroups[0].related_resource_types_list.length)
-            ) {
-              this.$set(this.resourceTypeData.resource_groups[0], 'related_resource_types', this.defaultResourceTypeList);
-            }
-          } else {
-            this.handleResetResourceData();
-          }
-        }
-      },
-            
-      handleFormatRecursion (list) {
-        list.forEach(data => {
-          if (data.actions && data.actions.length) {
-            data.actions.forEach(e => {
-              this.resourceActionData.push(e);
-            });
-          }
-          if (data.sub_groups && data.sub_groups.length) {
-            data.sub_groups.forEach(item => {
-              if (item.actions && item.actions.length) {
-                item.actions.forEach(e => {
-                  this.resourceActionData.push(e);
-                });
-              }
-            });
-          }
-        });
-        this.resourceActionData = this.resourceActionData.filter((e, index, self) => self.indexOf(e) === index);
-        this.resourceActionData.forEach(item => {
-          if (!item.resource_groups || !item.resource_groups.length) {
-            item.resource_groups = item.related_resource_types.length ? [{ id: '', related_resource_types: item.related_resource_types }] : [];
-          }
-          this.processesList.push(new Policy({ ...item, tag: 'add' }, 'custom'));
-        });
-        if (this.processesList.length) {
-          this.applyGroupData.action_id = this.processesList[0].id;
-          this.handleSelectedAction();
-        }
-      },
-
-      handlePathData (data, type) {
-        if (data.resourceInstancesPath && data.resourceInstancesPath.length) {
-          const lastIndex = data.resourceInstancesPath.length - 1;
-          const path = data.resourceInstancesPath[lastIndex];
-          let id = '';
-          let resourceInstancesPath = [];
-          if (type === path.type) {
-            id = path.id;
-            data.resourceInstancesPath.splice(lastIndex, 1);
-          } else {
-            id = '*';
-          }
-          resourceInstancesPath = data.resourceInstancesPath.reduce((p, e) => {
-            p.push({
-              type: e.type,
-              id: e.id,
-              name: e.name
-            });
-            return p;
-          }, []);
-          return { id, resourceInstancesPath };
-        }
-        return { id: '*', resourceInstancesPath: [] };
-      },
-
-      // 处理手动输入各种场景
-      handleManualInput (isTagInput) {
-        if (this.curSelectMenu) {
-          // 转换为tag标签后,需要清空输入框的值
-          if (this.$refs.searchSelectRef && this.$refs.searchSelectRef.$refs.searchSelect) {
-            this.$refs.searchSelectRef.$refs.searchSelect.keySubmit();
-            this.$refs.searchSelectRef.$refs.searchSelect.localValue = '';
-          }
-          this.curSelectMenu = '';
-          this.curInputText = '';
-        } else {
-          // 如果当前已有tag，后面如果只输入文字没生成tag自动过滤掉
-          if (this.searchList.length
-            && this.$refs.searchSelectRef
-            && this.$refs.searchSelectRef.$refs.searchSelect
-            && this.curInputText) {
-            this.$refs.searchSelectRef.$refs.searchSelect.localValue = '';
-          }
-          if (!this.searchList.length && isTagInput) {
-            // 处理无tag标签，直接输入内容情况
-            this.searchParams.name = this.curInputText;
-            if (!this.curInputText) {
-              delete this.searchParams.name;
-            }
-            this.$nextTick(() => {
-              if (this.$refs.searchSelectRef && this.$refs.searchSelectRef.$refs.searchSelect) {
-                const localValue = this.$refs.searchSelectRef.$refs.searchSelect.localValue;
-                this.searchParams.name = localValue;
-                if (!localValue) {
-                  delete this.searchParams.name;
-                }
-                // 处理切换tab，只输入内容
-                this.$emit('on-input-value', localValue);
-              }
-            });
-          }
-        }
-      },
-      
-      // 显示资源实例
-      handleShowResourceInstance (data, resItem, resIndex, groupIndex) {
-        this.params = {
-          system_id: this.applyGroupData.system_id,
-          action_id: data.id,
-          resource_type_system: resItem.system_id,
-          resource_type_id: resItem.type
-        };
-        this.curResIndex = resIndex;
-        this.groupIndex = groupIndex;
-        this.resourceInstanceSideSliderTitle = this.$t(`m.info['关联侧边栏操作的资源实例']`, { value: `${this.$t(`m.common['【']`)}${data.name}${this.$t(`m.common['】']`)}` });
-        window.changeAlert = 'iamSidesider';
-        this.isShowResourceInstanceSideslider = true;
-      },
-
-      handleResetResourceData () {
-        if (this.resourceTypeData.resource_groups && !this.resourceTypeData.resource_groups.length) {
-          this.resourceTypeData.resource_groups = [].concat([{ isEmpty: true }]);
-        }
-        this.$set(this.resourceTypeData.resource_groups[0], 'related_resource_types', this.defaultResourceTypeList);
-        this.$set(this.resourceTypeData.resource_groups[0], 'related_resource_types_list', []);
-        this.$set(this.resourceTypeData.resource_groups[0], 'isEmpty', true);
-      },
-
-      async handleResourceSubmit () {
-        const conditionData = this.$refs.renderResourceRef.handleGetValue();
-        const { isEmpty, data } = conditionData;
-        if (isEmpty) {
-          return;
-        }
-        const resItem = this.resourceTypeData.resource_groups[this.groupIndex]
-          .related_resource_types[this.curResIndex];
-        const isConditionEmpty = data.length === 1 && data[0] === 'none';
-        if (isConditionEmpty) {
-          resItem.condition = ['none'];
-          resItem.isLimitExceeded = false;
-          this.resourceInstances = [];
-        } else {
-          resItem.condition = data;
-          if (data.length) {
-            data.forEach(item => {
-              item.instance.forEach(e => {
-                resItem.resourceInstancesPath = e.path[0];
-              });
-            });
-          } else {
-            delete resItem.resourceInstancesPath;
-          }
-          if (this.curResIndex !== -1) {
-            this.resourceInstances.splice(this.curResIndex, 1, resItem);
-          }
-        }
-        window.changeAlert = false;
-        this.resourceInstanceSideSliderTitle = '';
-        this.isShowResourceInstanceSideslider = false;
-        this.curResIndex = -1;
-        this.resourceInstanceError = false;
-      },
-
-      handleResourceCancel (payload) {
-        const typeMap = {
-          mask: () => {
-            const { data } = this.$refs.renderResourceRef.handleGetValue();
-            const { hasSelectedCondition } = this.$refs.renderResourceRef;
-            let cancelHandler = Promise.resolve();
-            if (JSON.stringify(data) !== JSON.stringify(hasSelectedCondition)) {
-              cancelHandler = leaveConfirm();
-            }
-            cancelHandler.then(() => {
-              this.isShowResourceInstanceSideslider = false;
-              this.resetDataAfterClose();
-            }, _ => _);
-          },
-          cancel: () => {
-            this.resetDataAfterClose();
-            this.isShowResourceInstanceSideslider = false;
-          }
-        };
-        return typeMap[payload]();
-      },
-
-      formatFormItemWidth () {
-        this.contentWidth = window.innerWidth <= 1520 ? this.minSelectWidth : this.maxSelectWidth;
-      },
-
-      handleQuickSearchMethod (value) {
-        return {
-          name: this.$t(`m.common['关键字']`),
-          id: 'keyword',
-          values: [value]
-        };
-      },
-      
-      resetDataAfterClose () {
-        this.curResIndex = -1;
-        this.groupIndex = -1;
-        this.params = {};
-        this.resourceInstanceSideSliderTitle = '';
-      },
-
-      resetLocationHref () {
-        // 需要删除的url上的字段
-        const urlFields = [...this.initSearchData.map(item => item.id), ...['current', 'limit']];
-        delLocationHref(urlFields);
-      },
-
-      resetPagination () {
-        this.pagination = Object.assign(
-          {},
-          {
-            limit: 10,
-            current: 1,
-            count: 0
-          }
-        );
-      },
-      
-      resetSearchParams () {
-        this.applyGroupData = Object.assign({}, {
-          system_id: this.externalSystemId || '',
-          action_id: ''
-        });
-        this.curResourceData = Object.assign({}, {
-          type: ''
-        });
-        this.systemIdError = false;
-        this.actionIdError = false;
-        this.resourceTypeError = false;
-        this.resourceInstanceError = false;
-        this.resourceInstances = [];
-        this.resetLocationHref();
-      }
-
-    }
-  };
-
-</script>
-
-<style lang="postcss" scoped>
- @import '@/css/mixins/apply-join-group-search.css';
- .iam-search-resource-form-perm {
-    background-color: #ffffff;
-    padding: 20px 20px 0 20px;
-  }
-</style>
+<template>
+  <div>
+    <div
+      ref="selectTableRef"
+      :class="[
+        'iam-search-resource-form',
+        'iam-search-resource-form-perm',
+        { [customClass]: customClass }
+      ]">
+      <render-search v-if="enableGroupInstanceSearch">
+        <div
+          :class="[
+            'join-user-group-form',
+            { 'join-user-group-form-lang': !curLanguageIsCn }
+          ]">
+          <div>
+            <bk-form
+              form-type="vertical"
+              class="resource-action-form">
+              <iam-form-item
+                :label="$t(`m.common['系统']`)"
+                class="form-item-resource">
+                <bk-select
+                  :style="{ width: contentWidth }"
+                  v-model="applyGroupData.system_id"
+                  :clearable="!externalSystemsLayout.myPerm.hideApplyBtn"
+                  :allow-enter="false"
+                  :placeholder="$t(`m.verify['请选择']`)"
+                  @change="handleCascadeChange"
+                  @clear="handleClearSearch"
+                  searchable>
+                  <bk-option v-for="option in systemSelectList"
+                    :key="option.id"
+                    :id="option.id"
+                    :name="`${option.name} (${option.id})`">
+                  </bk-option>
+                </bk-select>
+                <p class="error-tips" v-if="systemIdError">
+                  {{$t(`m.verify['请选择系统']`)}}
+                </p>
+              </iam-form-item>
+              <iam-form-item
+                :label="$t(`m.common['操作']`)"
+                class="form-item-resource"
+              >
+                <bk-select
+                  :style="{ width: contentWidth }"
+                  v-model="applyGroupData.action_id"
+                  :clearable="false"
+                  :allow-enter="false"
+                  :placeholder="$t(`m.verify['请选择']`)"
+                  :disabled="!applyGroupData.system_id"
+                  :title="!applyGroupData.system_id ? $t(`m.verify['请选择系统']`) : ''"
+                  @selected="handleSelectedAction"
+                  searchable>
+                  <bk-option v-for="option in processesList"
+                    :key="option.id"
+                    :id="option.id"
+                    :name="`${option.name} (${option.id})`">
+                  </bk-option>
+                </bk-select>
+                <p class="error-tips" v-if="actionIdError">
+                  {{$t(`m.verify['请选择操作']`)}}
+                </p>
+              </iam-form-item>
+              <template>
+                <div
+                  v-for="(_, index) in resourceTypeData.resource_groups"
+                  :key="_.id"
+                  class="resource-group-container">
+                  <iam-form-item
+                    :label="$t(`m.permApply['资源类型']`)"
+                    class="form-item-resource">
+                    <bk-select
+                      :style="{ width: contentWidth }"
+                      v-model="curResourceData.type"
+                      :clearable="false"
+                      :allow-enter="false"
+                      :placeholder="$t(`m.verify['请选择']`)"
+                      :disabled="!applyGroupData.action_id"
+                      :title="!applyGroupData.action_id ?
+                        $t(`m.verify['请选择操作']`) : ''"
+                      @change="handleResourceTypeChange(index)"
+                    >
+                      <bk-option
+                        v-for="related in _.related_resource_types_list"
+                        :key="related.type"
+                        :id="related.type"
+                        :name="related.name">
+                      </bk-option>
+                    </bk-select>
+                    <p class="error-tips" v-if="resourceTypeError">
+                      {{$t(`m.verify['请选择资源类型']`)}}
+                    </p>
+                  </iam-form-item>
+                  <iam-form-item
+                    class="form-item-resource"
+                    :label="$t(`m.common['资源实例']`)">
+                    <div class="relation-content-item"
+                      v-for="(content, contentIndex) in _.related_resource_types"
+                      :key="contentIndex">
+                      <div class="content"
+                        :style="{ width: contentWidth }"
+                      >
+                        <render-condition
+                          :ref="`condition_${index}_${contentIndex}_ref`"
+                          :value="curResourceData.type ?
+                            content.value : $t(`m.verify['请选择']`)"
+                          :hover-title="!curResourceData.type ?
+                            $t(`m.verify['请选择资源类型']`) : ''"
+                          :is-empty="content.empty"
+                          :params="curCopyParams"
+                          :disabled="!curResourceData.type"
+                          :is-error="content.isLimitExceeded || content.isError"
+                          @on-click="handleShowResourceInstance(
+                            resourceTypeData,
+                            content, contentIndex, index)"
+                        />
+                        <p class="error-tips" v-if="resourceInstanceError">
+                          {{$t(`m.resourcePermiss['请选择资源实例']`)}}
+                        </p>
+                      </div>
+                    </div>
+                  </iam-form-item>
+                </div>
+              </template>
+            </bk-form>
+          </div>
+          <template>
+            <div :class="['custom-slot-content']" v-if="isCustomSearch">
+              <slot name="custom-content" />
+            </div>
+            <div class="group-search-select" v-else>
+              <iam-search-select
+                style="width: calc(100% - 20px)"
+                ref="searchSelectRef"
+                :data="searchData"
+                :value="searchValue"
+                :placeholder="searchSelectPlaceHolder"
+                :quick-search-method="handleQuickSearchMethod"
+                @on-change="handleSearch"
+                @on-click-menu="handleClickMenu"
+                @on-input="handleSearchInput"
+              />
+              <bk-button
+                class="ml20"
+                theme="primary"
+                :outline="true"
+                @click="handleSearchUserGroup(true, true)">
+                {{ $t(`m.common['查询']`) }}
+              </bk-button>
+              <bk-button
+                class="ml20"
+                theme="default"
+                @click="handleEmptyClear">
+                {{ $t(`m.common['重置']`) }}
+              </bk-button>
+            </div>
+          </template>
+        </div>
+      </render-search>
+      <div
+        v-else
+        class="no-resource-search-wrapper">
+        <template v-if="isCustomSearch">
+          <slot name="custom-content" />
+        </template>
+        <template v-else>
+          <iam-search-select
+            ref="searchSelectRef"
+            @on-change="handleSearch"
+            :data="searchData"
+            :value="searchValue"
+            :placeholder="searchSelectPlaceHolder"
+            :quick-search-method="handleQuickSearchMethod"
+          />
+        </template>
+      </div>
+    </div>
+    
+    <bk-sideslider
+      :is-show="isShowResourceInstanceSideSlider"
+      :title="resourceInstanceSideSliderTitle"
+      :width="resourceSliderWidth"
+      quick-close
+      transfer
+      :ext-cls="'relate-instance-sideslider'"
+      @update:isShow="handleResourceCancel">
+      <div slot="content"
+        class="sideslider-content">
+        <render-resource
+          ref="renderResourceRef"
+          :data="condition"
+          :original-data="originalCondition"
+          :selection-mode="curSelectionMode"
+          :params="params"
+        />
+      </div>
+      <div slot="footer" style="margin-left: 25px;">
+        <bk-button theme="primary" @click="handleResourceSubmit">
+          {{ $t(`m.common['保存']`) }}
+        </bk-button>
+        <bk-button style="margin-left: 10px;" @click="handleResourceCancel">
+          {{ $t(`m.common['取消']`) }}
+        </bk-button>
+      </div>
+    </bk-sideslider>
+  </div>
+</template>
+
+<script>
+  import _ from 'lodash';
+  import il8n from '@/language';
+  import Policy from '@/model/policy';
+  import RenderCondition from '@/views/resource-permiss/components/render-condition';
+  import RenderResource from '@/views/resource-permiss/components/render-resource';
+  import IamSearchSelect from '@/components/iam-search-select';
+  import { mapGetters } from 'vuex';
+  import { leaveConfirm } from '@/common/leave-confirm';
+  import { delLocationHref } from '@/common/util';
+  
+  export default {
+    provide: function () {
+      return {
+        getResourceSliderWidth: () => this.resourceSliderWidth
+      };
+    },
+    components: {
+      RenderResource,
+      RenderCondition,
+      IamSearchSelect
+    },
+    props: {
+      active: {
+        type: String,
+        default: 'GroupPerm'
+      },
+      minSelectWidth: {
+        type: String,
+        default: '200px'
+      },
+      maxSelectWidth: {
+        type: String,
+        default: '240px'
+      },
+      customClass: {
+        type: String,
+        default: ''
+      },
+      isFullScreen: {
+        type: Boolean,
+        default: false
+      },
+      searchSelectPlaceHolder: {
+        type: String,
+        default: il8n('applyEntrance', '申请加入用户组搜索提示')
+      },
+      isCustomSearch: {
+        type: Boolean,
+        default: false
+      },
+      gridCount: {
+        type: Number,
+        default: 4
+      },
+      curSearchData: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data () {
+      return {
+        enableGroupInstanceSearch: window.ENABLE_GROUP_INSTANCE_SEARCH.toLowerCase() === 'true',
+        CUR_LANGUAGE: window.CUR_LANGUAGE,
+        applyGroupData: {
+          system_id: '',
+          action_id: ''
+        },
+        pagination: {
+          current: 1,
+          count: 0,
+          limit: 10
+        },
+        emptyData: {
+          type: '',
+          text: '',
+          tip: '',
+          tipType: ''
+        },
+        resourceTypeData: {
+          resource_groups: [{
+            'related_resource_types': [{
+              'type': '',
+              'system_id': '',
+              'name': '',
+              'canPaste': false,
+              'action': {
+                'name': '',
+                'type': ''
+              },
+              'isError': false,
+              'tag': '',
+              'flag': '',
+              'isChange': false,
+              'isNew': true,
+              'selectionMode': '',
+              'condition': [],
+              'conditionBackup': []
+            }],
+            'related_resource_types_list': []
+          }],
+          isEmpty: true
+        },
+        defaultResourceTypeList: [{
+          'type': '',
+          'system_id': '',
+          'name': '',
+          'canPaste': false,
+          'action': {
+            'name': '',
+            'type': ''
+          },
+          'isError': false,
+          'tag': '',
+          'flag': '',
+          'isChange': false,
+          'isNew': true,
+          'selectionMode': '',
+          'condition': [],
+          'conditionBackup': []
+        }],
+        initSearchData: [
+          {
+            id: 'name',
+            name: this.$t(`m.userGroup['用户组名']`),
+            default: true
+          },
+          {
+            id: 'id',
+            name: 'ID',
+            default: true
+          },
+          {
+            id: 'description',
+            name: this.$t(`m.common['描述']`),
+            default: true
+          }
+        ],
+        searchData: [],
+        curResourceData: {
+          type: ''
+        },
+        searchParams: {},
+        searchList: [],
+        searchValue: [],
+        curResourceTypeList: [],
+        systemSelectList: [],
+        processesList: [],
+        resourceInstances: [],
+        resourceActionData: [],
+        isShowConfirmDialog: false,
+        confirmDialogTitle: this.$t(`m.verify['admin无需申请权限']`),
+        systemIdError: false,
+        actionIdError: false,
+        searchTypeError: false,
+        resourceTypeError: false,
+        resourceInstanceError: false,
+        isShowResourceInstanceSideSlider: false,
+        isSearchSystem: false,
+        groupIndex: -1,
+        curResIndex: -1,
+        curCopyParams: {},
+        params: {},
+        queryParams: {},
+        searchUserGroupList: [],
+        searchDepartGroupList: [],
+        searchSystemPolicyList: [],
+        resourceInstanceSideSliderTitle: '',
+        curSelectMenu: '',
+        curInputText: '',
+        contentWidth: '',
+        resourceSliderWidth: Math.ceil(window.innerWidth * 0.67 - 7) < 960
+          ? 960 : Math.ceil(window.innerWidth * 0.67 - 7)
+      };
+    },
+    computed: {
+      ...mapGetters(['externalSystemsLayout', 'externalSystemId', 'navStick']),
+      condition () {
+          if (this.curResIndex === -1 || this.groupIndex === -1) {
+              return [];
+          }
+          this.curResourceData = this.resourceTypeData.resource_groups[this.groupIndex]
+              .related_resource_types[this.curResIndex];
+          if (!this.curResourceData) {
+              return [];
+          }
+          // if (this.curResourceData.condition.length === 0) this.curResourceData.condition = ['none'];
+          return _.cloneDeep(this.curResourceData.condition);
+      },
+      curSelectionMode () {
+          if (this.curResIndex === -1 || this.groupIndex === -1) {
+              return 'all';
+          }
+          this.curResourceData = this.resourceTypeData.resource_groups[this.groupIndex]
+              .related_resource_types[this.curResIndex];
+          return this.curResourceData.selectionMode;
+      },
+      originalCondition () {
+          return _.cloneDeep(this.condition);
+      }
+    },
+    watch: {
+      active: {
+        async handler (newValue, oldValue) {
+          if (oldValue && oldValue !== newValue) {
+            if (this.searchList.length) {
+              await this.handleSearchUserGroup(true, false);
+            }
+          }
+        },
+        immediate: true
+      },
+      externalSystemId: {
+        handler (value) {
+          if (value) {
+            this.applyGroupData.system_id = value;
+            this.handleCascadeChange();
+          }
+        },
+        immediate: true
+      },
+      applyGroupData: {
+        handler (value) {
+          const params = {};
+          if (value.system_id) {
+            const curData = this.systemSelectList.find((item) => item.id === value.system_id);
+            if (curData) {
+              params.system_id = {
+                label: curData.name,
+                value: curData.id
+              };
+            }
+          }
+          if (value.action_id) {
+            const curData = this.processesList.find((item) => item.id === value.action_id);
+            if (curData) {
+              params.action_id = {
+                label: curData.name,
+                value: curData.id
+              };
+            }
+          }
+          // 用于判断自定义slot场景下，同步更新选中值
+          this.$emit('on-select-system', params);
+        },
+        deep: true
+      },
+      curResourceData: {
+        handler (value) {
+          // 用于判断自定义slot场景下，同步更新选中值
+          // 处理资源类型数据
+          let params = {};
+          const { type, condition } = value;
+          const { resource_groups: resourceGroups } = this.resourceTypeData;
+          if (resourceGroups && resourceGroups.length) {
+            if (type && resourceGroups[0].related_resource_types_list
+              && resourceGroups[0].related_resource_types_list.length
+            ) {
+              const curData = resourceGroups[0].related_resource_types_list.find((item) => item.type === type);
+              if (curData) {
+                params.resource_type = {
+                  label: curData.name,
+                  value: curData.type
+                };
+              }
+            }
+          }
+          // 处理资源实例数据
+          if (condition) {
+            params = Object.assign(params, {
+              condition
+            });
+          }
+          this.$emit('on-select-resource', params);
+        },
+        deep: true
+      },
+      navStick () {
+        this.formatFormItemWidth();
+      }
+    },
+    async created () {
+      this.formatFormItemWidth();
+      this.formatSearchData();
+      await this.fetchPermData();
+    },
+    mounted () {
+      window.addEventListener('resize', (this.formatFormItemWidth));
+      window.addEventListener('resize', (this.formatResourceSliderWidth));
+      this.$once('hook:beforeDestroy', () => {
+        window.removeEventListener('resize', this.formatFormItemWidth);
+        window.removeEventListener('resize', this.formatResourceSliderWidth);
+      });
+    },
+    methods: {
+      formatSearchData () {
+        // 处理不同页面自定义搜索字段
+        const isOtherRoute = ['userOrgPerm'].includes(this.$route.name);
+        const routeMap = {
+          true: () => {
+            this.searchData = [...this.curSearchData];
+          },
+          false: () => {
+            this.searchData = this.enableGroupInstanceSearch
+              ? this.initSearchData.filter(item => ['name', 'id', 'description'].includes(item.id))
+              : _.cloneDeep(this.initSearchData);
+          }
+        };
+        return routeMap[isOtherRoute]();
+      },
+
+      async fetchPermData () {
+        this.fetchSystemList();
+        const isSearch = this.applyGroupData.system_id || Object.keys(this.searchParams).length > 0;
+        if (isSearch) {
+          await this.handleSearchUserGroup(false, false);
+        }
+      },
+
+      async fetchSystemList () {
+        try {
+          const params = {};
+          if (this.externalSystemId) {
+            params.hidden = false;
+            params.system_id = this.externalSystemId;
+          }
+          const { data } = await this.$store.dispatch('system/getSystems', params);
+          this.systemSelectList = data || [];
+          if (this.externalSystemId) {
+            this.systemSelectList = this.systemSelectList.filter(item => item.id === this.externalSystemId);
+          }
+        } catch (e) {
+          console.error(e);
+          this.messageAdvancedError(e);
+        }
+      },
+
+      async handleSearchUserGroup (isClick = false, isTagInput = false) {
+        // isTagInput是处理未生成tag的内容
+        this.systemIdError = false;
+        this.handleManualInput(isTagInput);
+        let isSearch = this.applyGroupData.system_id || Object.keys(this.searchParams).length > 0;
+        // 处理搜索框没有生成tag，下拉框也没有选择任务数据，但实际有输入内容情况
+        let isNoTag = isTagInput && this.searchList.length < 1 && !this.applyGroupData.system_id;
+        // 处理自定义搜索slot，searchList为空情况
+        if (this.isCustomSearch) {
+          isSearch = true;
+          isNoTag = false;
+        }
+        if (isSearch) {
+          // if (!this.applyGroupData.system_id && ['CustomPerm'].includes(this.active)) {
+          //   this.systemIdError = true;
+          //   return;
+          // }
+          let resourceInstances = _.cloneDeep(this.resourceInstances);
+          if (this.applyGroupData.system_id) {
+            if (!this.applyGroupData.action_id) {
+              this.actionIdError = true;
+              return;
+            }
+            if (this.curResourceTypeList.length && !this.curResourceData.type) {
+              this.resourceTypeError = true;
+              return;
+            }
+            resourceInstances = resourceInstances.reduce((prev, item) => {
+              const { id, resourceInstancesPath } = this.handlePathData(item, item.type);
+              prev.push({
+                system_id: item.system_id,
+                id: id,
+                type: item.type,
+                name: item.name,
+                path: resourceInstancesPath
+              });
+              return prev;
+            }, []);
+            const hasResourceGroup = this.resourceTypeData.resource_groups[this.groupIndex];
+            if (this.curResourceData.type
+              && !resourceInstances.length
+              && hasResourceGroup
+              && hasResourceGroup.related_resource_types.some(e => e.empty)) {
+              this.resourceInstanceError = true;
+              return;
+            }
+          }
+          if (isClick) {
+            this.resetPagination();
+          }
+          await this.fetchSearchUserGroup(resourceInstances, isNoTag);
+        } else {
+          if (isNoTag) {
+            return;
+          }
+          // 如果没有搜索参数，重置数据
+          this.emptyData.tipType = '';
+          this.$emit('on-refresh-table');
+        }
+      },
+
+      async fetchSearchUserGroup (resourceInstances, isNoTag) {
+        const { current, limit } = this.pagination;
+        if (this.searchParams.hasOwnProperty('id')) {
+          if (!isNaN(Number(this.searchParams.id))) {
+            this.searchParams.id = Number(this.searchParams.id);
+          }
+        }
+        const params = {
+            ...this.applyGroupData,
+            ...this.searchParams,
+            limit,
+            offset: limit * (current - 1),
+            resource_instances: resourceInstances || []
+        };
+        this.$emit('on-remote-table', {
+          searchParams: params,
+          pagination: this.pagination,
+          emptyData: { ...this.emptyData, ...{ tipType: 'search' } },
+          isNoTag
+        });
+        this.curSelectMenu = '';
+        this.curInputText = '';
+      },
+
+      async handleCascadeChange () {
+        this.systemIdError = false;
+        this.actionIdError = false;
+        this.resourceTypeError = false;
+        this.resourceInstanceError = false;
+        this.resourceActionData = [];
+        this.processesList = [];
+        this.applyGroupData.action_id = '';
+        this.curResourceData.type = '';
+        this.handleResetResourceData();
+        if (this.applyGroupData.system_id) {
+          try {
+            const { data } = await this.$store.dispatch('approvalProcess/getActionGroups', { system_id: this.applyGroupData.system_id });
+            this.handleFormatRecursion(data || []);
+          } catch (e) {
+            console.error(e);
+            this.messageAdvancedError(e);
+          }
+        }
+      },
+
+      handleClickMenu (payload) {
+        const { menu } = payload;
+        if (menu.id) {
+          this.curSelectMenu = menu.id;
+        }
+      },
+
+      handleSearchInput (payload) {
+        const { text } = payload;
+        this.curInputText = text;
+      },
+
+      handleSearch (payload, result) {
+        this.searchParams = payload;
+        this.searchList = [...result];
+        this.curSelectMenu = '';
+        this.curInputText = '';
+        this.emptyData.tipType = 'search';
+        if (!result.length) {
+          this.resetPagination();
+          this.resetLocationHref();
+        }
+        this.handleSearchUserGroup(true, false);
+      },
+
+      handleEmptyClear () {
+        this.searchParams = {};
+        this.queryParams = {};
+        this.searchValue = [];
+        this.emptyData.tipType = '';
+        if (this.$refs.searchSelectRef && this.$refs.searchSelectRef.$refs.searchSelect) {
+          this.$refs.searchSelectRef.$refs.searchSelect.localValue = '';
+        }
+        this.resetPagination();
+        this.resetSearchParams();
+        this.handleSearchUserGroup(false, false);
+      },
+
+      handleEmptyRefresh () {
+        this.emptyData.tipType = '';
+        if (this.$refs.searchSelectRef && this.$refs.searchSelectRef.$refs.searchSelect) {
+          this.$refs.searchSelectRef.$refs.searchSelect.localValue = '';
+        }
+        this.resetPagination();
+        this.handleSearchUserGroup(false, false);
+      },
+
+      async handleClearSearch () {
+        this.applyGroupData.action_id = '';
+        this.curResourceData.type = '';
+        this.emptyData.tipType = '';
+        this.resourceInstances = [];
+        this.resetPagination();
+        this.handleSearchUserGroup(false, false);
+      },
+
+      handleResourceTypeChange (index) {
+        this.resourceTypeError = false;
+        this.groupIndex = index;
+        this.resourceInstances = [];
+        if (this.resourceTypeData
+          && this.resourceTypeData.resource_groups
+          && this.resourceTypeData.resource_groups.length) {
+          const resourceGroups = this.resourceTypeData.resource_groups[index];
+          const typesList = _.cloneDeep(resourceGroups.related_resource_types_list);
+          resourceGroups.related_resource_types
+            = typesList.filter(item => item.type === this.curResourceData.type);
+          if (typesList.length && !resourceGroups.related_resource_types.length) {
+            this.$set(this.resourceTypeData.resource_groups[index], 'related_resource_types', this.defaultResourceTypeList);
+          }
+        }
+        if (!this.applyGroupData.system_id || !this.resourceTypeData.resource_groups.length) {
+          this.handleResetResourceData();
+        }
+      },
+
+      handleSelectedAction () {
+        this.actionIdError = false;
+        this.resourceTypeError = false;
+        this.resourceInstanceError = false;
+        this.curResourceData.type = '';
+        this.resourceInstances = [];
+        // 处理操作下是否有无关联资源
+        this.curResourceTypeList = [];
+        this.resourceTypeData = _.cloneDeep(this.processesList.find(e => e.id === this.applyGroupData.action_id));
+        if (this.resourceTypeData && this.resourceTypeData.resource_groups) {
+          if (this.resourceTypeData.resource_groups.length) {
+            const resourceGroups = this.resourceTypeData.resource_groups;
+            this.resourceTypeData.resource_groups.forEach(item => {
+              // 避免切换操作时，把默认数据代入，从而导致下拉框出现空白项
+              if (item.related_resource_types.length && item.related_resource_types[0].system_id) {
+                this.$set(item, 'related_resource_types_list', _.cloneDeep(item.related_resource_types));
+                this.curResourceTypeList = _.cloneDeep(item.related_resource_types);
+                // 默认选中只有一条资源类型数据，改变当前索引值
+                if (item.related_resource_types.length === 1) {
+                  this.curResourceData.type = item.related_resource_types[0].type;
+                  this.handleResourceTypeChange(0);
+                }
+              }
+            });
+            if (!this.curResourceData.type) {
+              this.$set(this.resourceTypeData.resource_groups[0], 'related_resource_types', []);
+            }
+            // 如果related_resource_types和related_resource_types_list都为空，则需要填充默认数据显示资源实例下拉框
+            if ((resourceGroups[0].related_resource_types_list
+              && resourceGroups[0].related_resource_types_list.length
+              && !resourceGroups[0].related_resource_types.length)
+              || (!resourceGroups[0].related_resource_types.length
+                && !resourceGroups[0].related_resource_types_list.length)
+            ) {
+              this.$set(this.resourceTypeData.resource_groups[0], 'related_resource_types', this.defaultResourceTypeList);
+            }
+          } else {
+            this.handleResetResourceData();
+          }
+        }
+      },
+            
+      handleFormatRecursion (list) {
+        list.forEach(data => {
+          if (data.actions && data.actions.length) {
+            data.actions.forEach(e => {
+              this.resourceActionData.push(e);
+            });
+          }
+          if (data.sub_groups && data.sub_groups.length) {
+            data.sub_groups.forEach(item => {
+              if (item.actions && item.actions.length) {
+                item.actions.forEach(e => {
+                  this.resourceActionData.push(e);
+                });
+              }
+            });
+          }
+        });
+        this.resourceActionData = this.resourceActionData.filter((e, index, self) => self.indexOf(e) === index);
+        this.resourceActionData.forEach(item => {
+          if (!item.resource_groups || !item.resource_groups.length) {
+            item.resource_groups = item.related_resource_types.length ? [{ id: '', related_resource_types: item.related_resource_types }] : [];
+          }
+          this.processesList.push(new Policy({ ...item, tag: 'add' }, 'custom'));
+        });
+        if (this.processesList.length) {
+          this.applyGroupData.action_id = this.processesList[0].id;
+          this.handleSelectedAction();
+        }
+      },
+
+      handlePathData (data, type) {
+        if (data.resourceInstancesPath && data.resourceInstancesPath.length) {
+          const lastIndex = data.resourceInstancesPath.length - 1;
+          const path = data.resourceInstancesPath[lastIndex];
+          let id = '';
+          let resourceInstancesPath = [];
+          if (type === path.type) {
+            id = path.id;
+            data.resourceInstancesPath.splice(lastIndex, 1);
+          } else {
+            id = '*';
+          }
+          resourceInstancesPath = data.resourceInstancesPath.reduce((p, e) => {
+            p.push({
+              type: e.type,
+              id: e.id,
+              name: e.name
+            });
+            return p;
+          }, []);
+          return { id, resourceInstancesPath };
+        }
+        return { id: '*', resourceInstancesPath: [] };
+      },
+
+      // 处理手动输入各种场景
+      handleManualInput (isTagInput) {
+        if (this.curSelectMenu) {
+          // 转换为tag标签后,需要清空输入框的值
+          if (this.$refs.searchSelectRef && this.$refs.searchSelectRef.$refs.searchSelect) {
+            this.$refs.searchSelectRef.$refs.searchSelect.keySubmit();
+            this.$refs.searchSelectRef.$refs.searchSelect.localValue = '';
+          }
+          this.curSelectMenu = '';
+          this.curInputText = '';
+        } else {
+          // 如果当前已有tag，后面如果只输入文字没生成tag自动过滤掉
+          if (this.searchList.length
+            && this.$refs.searchSelectRef
+            && this.$refs.searchSelectRef.$refs.searchSelect
+            && this.curInputText) {
+            this.$refs.searchSelectRef.$refs.searchSelect.localValue = '';
+          }
+          if (!this.searchList.length && isTagInput) {
+            // 处理无tag标签，直接输入内容情况
+            this.searchParams.name = this.curInputText;
+            if (!this.curInputText) {
+              delete this.searchParams.name;
+            }
+            this.$nextTick(() => {
+              if (this.$refs.searchSelectRef && this.$refs.searchSelectRef.$refs.searchSelect) {
+                const localValue = this.$refs.searchSelectRef.$refs.searchSelect.localValue;
+                this.searchParams.name = localValue;
+                if (!localValue) {
+                  delete this.searchParams.name;
+                }
+                // 处理切换tab，只输入内容
+                this.$emit('on-input-value', localValue);
+              }
+            });
+          }
+        }
+      },
+      
+      // 显示资源实例
+      handleShowResourceInstance (data, resItem, resIndex, groupIndex) {
+        this.params = {
+          system_id: this.applyGroupData.system_id,
+          action_id: data.id,
+          resource_type_system: resItem.system_id,
+          resource_type_id: resItem.type
+        };
+        this.curResIndex = resIndex;
+        this.groupIndex = groupIndex;
+        this.resourceInstanceSideSliderTitle = this.$t(`m.info['关联侧边栏操作的资源实例']`, { value: `${this.$t(`m.common['【']`)}${data.name}${this.$t(`m.common['】']`)}` });
+        window.changeAlert = 'iamSidesider';
+        this.isShowResourceInstanceSideSlider = true;
+      },
+
+      handleResetResourceData () {
+        if (this.resourceTypeData.resource_groups && !this.resourceTypeData.resource_groups.length) {
+          this.resourceTypeData.resource_groups = [].concat([{ isEmpty: true }]);
+        }
+        this.$set(this.resourceTypeData.resource_groups[0], 'related_resource_types', this.defaultResourceTypeList);
+        this.$set(this.resourceTypeData.resource_groups[0], 'related_resource_types_list', []);
+        this.$set(this.resourceTypeData.resource_groups[0], 'isEmpty', true);
+      },
+
+      async handleResourceSubmit () {
+        const conditionData = this.$refs.renderResourceRef.handleGetValue();
+        const { isEmpty, data } = conditionData;
+        if (isEmpty) {
+          return;
+        }
+        const resItem = this.resourceTypeData.resource_groups[this.groupIndex]
+          .related_resource_types[this.curResIndex];
+        const isConditionEmpty = data.length === 1 && data[0] === 'none';
+        if (isConditionEmpty) {
+          resItem.condition = ['none'];
+          resItem.isLimitExceeded = false;
+          this.resourceInstances = [];
+        } else {
+          resItem.condition = data;
+          if (data.length) {
+            data.forEach(item => {
+              item.instance.forEach(e => {
+                resItem.resourceInstancesPath = e.path[0];
+              });
+            });
+          } else {
+            delete resItem.resourceInstancesPath;
+          }
+          if (this.curResIndex !== -1) {
+            this.resourceInstances.splice(this.curResIndex, 1, resItem);
+          }
+        }
+        window.changeAlert = false;
+        this.resourceInstanceSideSliderTitle = '';
+        this.isShowResourceInstanceSideSlider = false;
+        this.curResIndex = -1;
+        this.resourceInstanceError = false;
+        // 抛出选择后的实例数据处理自定义组件场景
+        if (this.isCustomSearch) {
+          this.$emit('on-select-instance', {
+            resourceInstances: this.resourceInstances,
+            resourceTypeData: this.resourceTypeData
+          });
+        }
+      },
+
+      handleResourceCancel () {
+        let cancelHandler = Promise.resolve();
+        if (window.changeAlert) {
+          cancelHandler = leaveConfirm();
+        }
+        cancelHandler.then(() => {
+          this.isShowResourceInstanceSideSlider = false;
+          this.resetDataAfterClose();
+        }, _ => _);
+      },
+
+      formatResourceSliderWidth () {
+        this.resourceSliderWidth = Math.ceil(window.innerWidth * 0.67 - 7) < 960
+          ? 960 : Math.ceil(window.innerWidth * 0.67 - 7);
+      },
+
+      formatFormItemWidth () {
+        // 276代表菜单栏展开的宽度加16px内边距， 76代表菜单栏收缩的宽度加16px内边距
+        this.defaultWidth = window.innerWidth <= 1520 ? this.minSelectWidth : this.maxSelectWidth;
+        this.gridWidth = (window.innerWidth - (this.navStick ? 276 : 76) - this.gridCount * 16) / this.gridCount;
+        this.contentWidth = this.isFullScreen ? `${this.gridWidth}px` : this.defaultWidth;
+      },
+
+      handleQuickSearchMethod (value) {
+        return {
+          name: this.$t(`m.common['关键字']`),
+          id: 'keyword',
+          values: [value]
+        };
+      },
+      
+      resetDataAfterClose () {
+        this.curResIndex = -1;
+        this.groupIndex = -1;
+        this.params = {};
+        this.resourceInstanceSideSliderTitle = '';
+      },
+
+      resetLocationHref () {
+        // 需要删除的url上的字段
+        const urlFields = [...this.initSearchData.map(item => item.id), ...['current', 'limit']];
+        delLocationHref(urlFields);
+      },
+
+      resetPagination () {
+        this.pagination = Object.assign(
+          this.pagination,
+          {
+            limit: 10,
+            current: 1,
+            count: 0
+          }
+        );
+      },
+      
+      resetSearchParams () {
+        this.applyGroupData = Object.assign({}, {
+          system_id: this.externalSystemId || '',
+          action_id: ''
+        });
+        this.curResourceData = Object.assign({}, {
+          type: ''
+        });
+        this.systemIdError = false;
+        this.actionIdError = false;
+        this.resourceTypeError = false;
+        this.resourceInstanceError = false;
+        this.resourceInstances = [];
+        this.resetLocationHref();
+      }
+    }
+  };
+
+</script>
+
+<style lang="postcss" scoped>
+ @import '@/css/mixins/apply-join-group-search.css';
+ .iam-search-resource-form-perm {
+    background-color: #ffffff;
+    padding: 20px;
+    .resource-action-form {
+      .form-item-resource {
+        margin-right: 16px !important;
+      }
+    }
+    /deep/ .resource-group-container {
+      .form-item-resource {
+        &:last-child {
+          margin-right: 0 !important;
+        }
+        .relation-content-item {
+          .iam-condition-input {
+            height: 30px !important;
+            line-height: 30px;
+          }
+        }
+      }
+    }
+    .group-search-select {
+      padding-top: 16px;
+    }
+    &.user-org-resource-perm {
+      padding: 16px;
+      padding-top: 12px;
+      .left {
+        .resource-action-form {
+          .error-tips {
+            position: absolute;
+            line-height: 16px;
+            font-size: 10px;
+            color: #ea3636;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/frontend/src/components/infinite-tree/index.vue b/frontend/src/components/infinite-tree/index.vue
index 3468d1380..bdb105b2f 100644
--- a/frontend/src/components/infinite-tree/index.vue
+++ b/frontend/src/components/infinite-tree/index.vue
@@ -513,6 +513,7 @@
 
         .arrow-icon {
             color: #c0c4cc;
+            margin-right: 4px;
         }
 
         .node-title {
@@ -543,8 +544,8 @@
 
         .node-radio {
             /* margin-right: 5px;
-            float: left; */
-            margin-left: 5px;
+            float: left;
+            margin-left: 5px; */
             .node-checkbox {
                 display: inline-block;
                 position: relative;
diff --git a/frontend/src/components/nav/index.vue b/frontend/src/components/nav/index.vue
index 24171ad07..8dd95be5c 100644
--- a/frontend/src/components/nav/index.vue
+++ b/frontend/src/components/nav/index.vue
@@ -274,7 +274,9 @@
     // 人员模板
     [['memberTemplate'], 'memberTemplateNav'],
     // 管理空间下资源权限管理
-    [['resourcePermManage'], 'resourcePermManageNav']
+    [['resourcePermManage'], 'resourcePermManageNav'],
+    // 用户/组织
+    [['userOrgPerm'], 'userOrgPermNav']
   ]);
 
   export default {
@@ -329,11 +331,11 @@
           return this.navStick || !this.navFold;
       },
       isShowRouterGroup () {
-          return (payload) => {
-              const allRouter = getRouterDiff('all');
-              const curRouter = allRouter.filter((item) => !this.routerDiff.includes(item));
-              return curRouter.filter((item) => payload.children.map((_) => _.rkey).includes(item)).length > 0;
-          };
+        return (payload) => {
+          const allRouter = getRouterDiff('all');
+          const curRouter = allRouter.filter((item) => !this.routerDiff.includes(item));
+          return curRouter.filter((item) => payload.children.map((_) => _.rkey).includes(item)).length > 0;
+        };
       },
       formatRoleIcon () {
           const { role } = this.user;
@@ -498,6 +500,7 @@
         this.selectCls = 'hide-iam-nav-select-cls';
         if (value) {
           this.selectCls = 'iam-nav-select-dropdown-content';
+          this.handleClearSearch();
           this.resetPagination();
           this.resetSubPagination();
           await this.resetRoleList('handleClearSearch');
diff --git a/frontend/src/components/render-perm-boundary/index.vue b/frontend/src/components/render-perm-boundary/index.vue
index 49d7b5d0a..167c1d081 100644
--- a/frontend/src/components/render-perm-boundary/index.vue
+++ b/frontend/src/components/render-perm-boundary/index.vue
@@ -36,7 +36,7 @@
         </div>
         <div v-if="modules.includes('membersPerm')" class="render-form-item">
           <div class="perm-boundary-title">
-            {{ $t(`m.levelSpace["${BOUNDARY_KEYS_ENUM["membersPerm"].title}"]`) }}:
+            {{ customTitle || `${$t(`m.levelSpace["${BOUNDARY_KEYS_ENUM["membersPerm"].title}"]`)}: ` }}
           </div>
           <div
             :class="['iam-resource-expand']"
@@ -56,18 +56,23 @@
                   class="iam-resource-header-left-title"
                   v-if="userLength > 0 || departLength > 0"
                 >
-                  <template v-if="userLength > 0">
-                    {{ $t(`m.common['共']`) }}
-                    <span class="number">{{ userLength }}</span>
-                    {{ $t(`m.common['个用户']`) }}
+                  <template v-if="customSlotName">
+                    <slot :name="customSlotName" />
                   </template>
-                  <template v-if="userLength && departLength">
-                    {{ $t(`m.common['，']`) }}
-                  </template>
-                  <template v-if="departLength > 0">
-                    {{ $t(`m.common['共']`) }}
-                    <span class="number">{{ departLength }}</span>
-                    {{ $t(`m.common['个组织']`) }}
+                  <template v-else>
+                    <template v-if="userLength > 0">
+                      {{ $t(`m.common['共']`) }}
+                      <span class="number">{{ userLength }}</span>
+                      {{ $t(`m.common['个用户']`) }}
+                    </template>
+                    <template v-if="userLength && departLength">
+                      {{ $t(`m.common['，']`) }}
+                    </template>
+                    <template v-if="departLength > 0">
+                      {{ $t(`m.common['共']`) }}
+                      <span class="number">{{ departLength }}</span>
+                      {{ $t(`m.common['个组织']`) }}
+                    </template>
                   </template>
                 </div>
               </div>
@@ -86,9 +91,7 @@
               { 'perm-boundary-title-custom': isCustomTitleStyle }
             ]"
           >
-            {{
-              $t(`m.sensitivityLevel["${BOUNDARY_KEYS_ENUM["transferPreview"].title}"]`)
-            }}
+            {{ customTitle || $t(`m.sensitivityLevel["${BOUNDARY_KEYS_ENUM["transferPreview"].title}"]`) }}
           </div>
           <div
             :class="['iam-resource-expand']"
@@ -105,9 +108,14 @@
                   "
                 />
                 <div class="iam-resource-header-left-title">
-                  <span>{{ $t(`m.common['已选择']`) }}</span>
-                  <span class="number">{{ permLength }}</span>
-                  <span>{{ $t(`m.common['个']`) }}{{ $t(`m.common['操作']`) }}</span>
+                  <template v-if="customSlotName">
+                    <slot :name="customSlotName" />
+                  </template>
+                  <template v-else>
+                    <span>{{ $t(`m.common['已选择']`) }}</span>
+                    <span class="number">{{ permLength }}</span>
+                    <span>{{ $t(`m.common['个']`) }}{{ $t(`m.common['操作']`) }}</span>
+                  </template>
                 </div>
               </div>
               <div class="iam-resource-header-right">
@@ -184,6 +192,12 @@
       isShowClear: {
         type: Boolean,
         default: false
+      },
+      customTitle: {
+        type: String
+      },
+      customSlotName: {
+        type: String
       }
     },
     data () {
@@ -198,8 +212,14 @@
       }
     },
     watch: {
-      expanded (value) {
-        this.isExpanded = !!value;
+      expanded: {
+        handler (value) {
+          this.isExpanded = !!value;
+          if (this.modules.length === 1 && this.expanded) {
+            this.BOUNDARY_KEYS_ENUM[this.modules[0]].isExpanded = true;
+          }
+        },
+        immediate: true
       }
     },
     methods: {
@@ -249,12 +269,13 @@
 
   .iam-resource-expand {
     background-color: #f5f7fa;
+    border-radius: 2px 2px 0 0;
     .iam-resource-header-left {
-      padding: 0 10px !important;
+      padding: 0 16px !important;
       display: flex;
       align-items: center;
       &-title {
-        margin-left: 5px;
+        margin-left: 10px;
       }
     }
   }
diff --git a/frontend/src/components/render-renewal-dialog/display.vue b/frontend/src/components/render-renewal-dialog/display.vue
index 6b3a09022..eb0993725 100644
--- a/frontend/src/components/render-renewal-dialog/display.vue
+++ b/frontend/src/components/render-renewal-dialog/display.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="iam-expire-time-wrapper" :style="{ lineHeight: `${lineHeight}` }">
     <span :class="['cur-text', status]">{{ curDisplay }}</span>
-    <template v-if="ischeck">
-      <Icon type="arrows-left" :style="{ lineHeight: `${lineHeight}` }" />
+    <template v-if="isCheck">
+      <Icon type="arrows-left" class="after-renewal-icon" :style="{ lineHeight: `${lineHeight}` }" />
       <span class="after-renewal-text">{{ afterRenewalDisplay }}</span>
     </template>
   </div>
@@ -10,6 +10,7 @@
 <script>
   import { mapGetters } from 'vuex';
   import { PERMANENT_TIMESTAMP } from '@/common/constants';
+  import { getNowTimeExpired } from '@/common/util';
   // 过期时间的天数区间
   const EXPIRED_DISTRICT = 15;
   export default {
@@ -35,43 +36,44 @@
     },
     data () {
       return {
-        ischeck: true
+        isCheck: true
       };
     },
     computed: {
-            ...mapGetters(['user']),
-            curRestDays () {
-                const dif = this.curTime - this.user.timestamp;
-                if (dif < 1) {
-                  return 0;
-                }
-                return Math.round(dif / (24 * 3600));
-            },
-            status () {
-                if (!this.curRestDays) {
-                    return 'yet';
-                }
-                if (this.curRestDays < EXPIRED_DISTRICT) {
-                    return 'immediately';
-                }
-                return 'normal';
-            },
-            curDisplay () {
-                if (this.status === 'yet') {
-                    return this.$t(`m.common['已过期']`);
-                }
-                return this.$t(`m.info['天数']`, { value: this.curRestDays });
-            },
-            afterRenewalDisplay () {
-                if (this.renewalTime === PERMANENT_TIMESTAMP) {
-                    return this.$t(`m.common['永久']`);
-                }
-                const days = Math.floor(this.renewalTime / (24 * 60 * 60));
-                if (this.status === 'yet') {
-                    return this.$t(`m.info['天数']`, { value: days });
-                }
-                return this.$t(`m.info['天数']`, { value: days + this.curRestDays });
-            }
+      ...mapGetters(['user']),
+      curRestDays () {
+        const dif = this.curTime - getNowTimeExpired();
+        if (dif < 1) {
+          return 0;
+        }
+        return Math.ceil(dif / (24 * 3600));
+      },
+      status () {
+          if (!this.curRestDays) {
+              return 'yet';
+          }
+          if (this.curRestDays < EXPIRED_DISTRICT) {
+              return 'immediately';
+          }
+          return 'normal';
+      },
+      curDisplay () {
+          if (this.status === 'yet') {
+              return this.$t(`m.common['已过期']`);
+          }
+          return this.$t(`m.info['天数']`, { value: this.curRestDays });
+      },
+      afterRenewalDisplay () {
+          if (this.renewalTime === PERMANENT_TIMESTAMP) {
+              return this.$t(`m.common['永久']`);
+          }
+          // const days = Math.floor(this.renewalTime / (24 * 60 * 60));
+          const days = Math.ceil(this.renewalTime / (24 * 60 * 60));
+          if (this.status === 'yet') {
+              return this.$t(`m.info['天数']`, { value: days });
+          }
+          return this.$t(`m.info['天数']`, { value: days + this.curRestDays });
+      }
     }
   };
 </script>
diff --git a/frontend/src/components/render-renewal-dialog/index.vue b/frontend/src/components/render-renewal-dialog/index.vue
index d85ade436..928481390 100644
--- a/frontend/src/components/render-renewal-dialog/index.vue
+++ b/frontend/src/components/render-renewal-dialog/index.vue
@@ -27,7 +27,7 @@
         </div>
         <div class="item">
           <label :class="{ 'en': !curLanguageIsCn }">{{ $t(`m.common['有效期']`) }}</label>
-          <render-expire-display selected :renewal-time="expiredAt" :cur-time="curTime" />
+          <render-expire-display selected :renewal-time="expiredAt" :cur-time="curTime" :line-height="lineHeight" />
         </div>
       </template>
       <template v-else>
@@ -117,6 +117,10 @@
         type: String,
         default: 'department'
       },
+      lineHeight: {
+        type: String,
+        default: '32px'
+      },
       list: {
         type: Array,
         default: () => []
diff --git a/frontend/src/language/lang/en.js b/frontend/src/language/lang/en.js
index 50b067965..f7ddf6237 100644
--- a/frontend/src/language/lang/en.js
+++ b/frontend/src/language/lang/en.js
@@ -111,6 +111,7 @@ export const m = {
         '的关联': 'association',
         '添加成员': 'Add members',
         '添加成员至': 'Add members to',
+        '已选': 'Selected',
         '已选择': 'Selected',
         '清空': 'Clear',
         '保存': 'Save',
@@ -153,7 +154,7 @@ export const m = {
         '已获得': 'Acquired',
         '未选择': 'Not Selected',
         '选择全部': 'All',
-        '加载中': 'Loading...',
+        '加载中': 'Loading',
         '返回': 'Back',
         '期限选择提示': '1-365',
         '临时期限选择提示': '1-24',
@@ -287,6 +288,8 @@ export const m = {
         '解析并添加': 'Parse and add',
         '搜索解析结果': 'Search parsing results',
         '请先从左侧输入并解析': 'Please input and parse from the left first',
+        '剩余加载数据': 'Remaining {value} pieces of data',
+        '已加载全部数据': 'All data loaded',
         '实例名称输入错误或不存在于授权资源实例范围内': 'Instance name input error or does not exist within the authorized resource instance scope',
         '实例名称': 'Instance name',
         '请输入实例名称，以回车/逗号/分号分割': 'Please enter the instance name, separated by carriage return, comma, or semicolon',
@@ -398,7 +401,9 @@ export const m = {
         '关联成员将不再继承该模板的权限': 'Associated members will no longer inherit the permissions of the template',
         '该用户组已关联': 'The group has been associated',
         '添加用户组成功': 'Group Added',
+        '重置用户组成功': 'Group reset',
         '添加成员成功': 'Members Added',
+        '移出成功': 'Removed',
         '移除成功': 'Removed',
         '该用户组将不再继承对应模板的权限': 'The group will no longer inherit the permissions of the template',
         '该成员将不再继承对应模板的权限': 'The member will no longer inherit the permissions of the template',
@@ -554,7 +559,8 @@ export const m = {
          '最多添加一个管理员': 'Add at most one administrator',
          '管理员不可重复添加': 'Administrators cannot be added repeatedly',
          '有关联的用户组, 无法删除': 'Associated user groups cannot be deleted',
-         'ip选择器每页最大条数': 'items {value}/page'
+         '不可续期的用户组如下': 'The non renewable user groups are as follows: {value}',
+         '不可移出的用户组如下': 'The user groups that cannot be removed are as follows'
     },
     // 二次确认弹窗相关
     dialog: {
@@ -577,7 +583,8 @@ export const m = {
         '确认批量退出所选的用户组吗？': 'Are you sure to batch quit the selected user groups?',
         '确认删除该人员模板？': 'Are you sure to delete the member template?',
         '确认解除与该用户组的关联？': 'Are you sure to dissociate from this user group?',
-        '确认批量删除所选的人员模板吗？': 'Are you sure to batch delete the selected member templates?'
+        '确认批量删除所选的人员模板吗？': 'Are you sure to batch delete the selected member templates?',
+        '确认把用户/组织移出该用户组？': 'Are you sure to move the user/organization out of this user group?'
     },
     nav: {
         '蓝鲸权限中心': 'BlueKing-IAM',
@@ -635,7 +642,8 @@ export const m = {
         '克隆二级管理空间': 'Clone Secondary management space',
         '用户组设置': 'User Group Setting',
         '敏感等级': 'Sensitivity Level',
-        '人员模板': 'Members Template'
+        '人员模板': 'Members Template',
+        '用户/组织': 'User/Organization'
     },
     applyEntrance: {
         '立刻申请': 'Apply now',
@@ -762,7 +770,7 @@ export const m = {
         '加入用户组的时间': 'Joined at',
         '加入方式': 'Joined type',
         '退出该组': 'Quit Group',
-        '组织名': 'Organization Name',
+        '组织名': 'Organization name',
         '加入的用户组': 'Joined Groups',
         '加入的组织': 'Joined Organizations',
         '通过组织加入的组无法退出': 'Joined through organization cannot be quit',
@@ -1463,6 +1471,52 @@ export const m = {
         '只读人员模板不能移除': 'The read-only member template cannot be removed',
         '只读人员模板不能添加、删除、复制成员': 'Read-only member template cannot add, delete, or copy members',
         '最多只能选择10个人员模板' : 'You can only select up to 10 member templates'
+    },
+    userOrOrg: {
+        '用户组名': 'User group name',
+        '批量操作': 'Multi-operate',
+        '重置用户组': 'Reset user group',
+        '追加用户组': 'Append user group',
+        '加入用户组': 'Join user group',
+        '追加的用户组': 'Append user group',
+        '批量追加用户组': 'Batch add user groups',
+        '批量重置用户组': 'Batch reset user groups',
+        '操作对象': 'Operating object',
+        '加入的用户组': 'Joined user group',
+        '重置的用户组': 'Reset user group',
+        '申请时长': 'Application duration',
+        '移出': 'Remove',
+        '续期时长': 'Renewal duration',
+        '续期预览': 'Renewal preview',
+        '用户组 ID': 'User group ID',
+        '用户 / 组织列表': 'User/Organization list',
+        '移出用户组名': 'Remove user group name',
+        '批量移出用户组': 'Multi-remove user group',
+        '清空用户组': 'Empty user groups',
+        '请先勾选用户': 'Please check the user first',
+        '请先勾选用户组权限': 'Please check user group permissions first',
+        '请先勾选用户/组织': 'Please check the user/organization first',
+        '搜索用户组名、描述': 'Search for user group name and description',
+        '输入ID、用户组名、用户名、组织名、描述等按回车进行搜索': 'Enter ID, user group name, username, organization name, description, etc. and press enter to search',
+        '在已有用户组的基础上，追加以下所选的用户组': 'On the basis of existing user groups, add the following selected user groups',
+        '已选对象的权限将被清空，替换为以下所选的用户组': 'The permissions of the selected objects will be cleared and replaced with the following selected user groups',
+        '移出后，该用户/组织将不再继承该组的权限。': 'After removal, the user/organization will no longer inherit the permissions of the group.',
+        '用户组不能为空': 'User group cannot be empty',
+        '的用户组': " 's Groups",
+        '清空对象': 'Clear object',
+        '个人': 'Personal',
+        '个人用户组权限': 'Personal user group perm',
+        '用户组权限（不影响因所属组织而拥有的用户组权限）': 'User group permissions (do not affect user group permissions owned by the organization)',
+        '请选择申请时长': 'Please select the application duration',
+        '请选择续期时长': 'Please select the renewal duration',
+        '通过组织': 'Through organization',
+        '通过人员模板': 'Through member template',
+        '查看人员模板详情': 'View member template details',
+        '查看该组织的用户组详情页': 'View the user group details page of the organization',
+        '当前勾选项都为不可移出的管理员组': 'The current check boxes are all administrator groups that cannot be removed',
+        '已选择的用户组权限为不可移出的管理员组': 'The selected user group permission is an administrator group that cannot be removed',
+        '已选择的用户组权限不需要续期': 'The selected user group permissions do not need to be renewed',
+        '组织用户组权限': 'Organizational user group permissions'
     }
 }
 export default {
diff --git a/frontend/src/language/lang/zh.js b/frontend/src/language/lang/zh.js
index 20ec7d26f..e6369b1cb 100644
--- a/frontend/src/language/lang/zh.js
+++ b/frontend/src/language/lang/zh.js
@@ -109,6 +109,7 @@ export const m = {
         '的关联': '的关联',
         '添加成员': '添加成员',
         '添加成员至': '添加成员至',
+        '已选': '已选',
         '已选择': '已选择',
         '清空': '清空',
         '保存': '保存',
@@ -151,7 +152,7 @@ export const m = {
         '已获得': '已获得',
         '未选择': '未选择',
         '选择全部': '选择全部',
-        '加载中': '加载中...',
+        '加载中': '加载中',
         '返回': '返回',
         '期限选择提示': '1-365，按 Enter 保存',
         '临时期限选择提示': '1-24，按 Enter 保存',
@@ -284,6 +285,8 @@ export const m = {
         '解析并添加': '解析并添加',
         '搜索解析结果': '搜索解析结果',
         '请先从左侧输入并解析': '请先从左侧输入并解析',
+        '剩余加载数据': '剩余 {value} 条数据',
+        '已加载全部数据': '已加载全部数据',
         '实例名称输入错误或不存在于授权资源实例范围内':　'实例名称输入错误或不存在于授权资源实例范围内',
         '实例名称': '实例名称',
         '请输入实例名称，以回车/逗号/分号分割': '请输入实例名称，以回车/逗号/分号分割',
@@ -398,7 +401,9 @@ export const m = {
         '关联成员将不再继承该模板的权限': '关联成员将不再继承该模板的权限',
         '该用户组已关联': '该用户组已关联',
         '添加用户组成功': '添加用户组成功',
+        '重置用户组成功': '重置用户组成功',
         '添加成员成功': '添加成员成功',
+        '移出成功': '移出成功',
         '移除成功': '移除成功',
         '该用户组将不再继承对应模板的权限': '该用户组将不再继承对应模板的权限',
         '该成员将不再继承对应模板的权限': '该成员将不再继承对应模板的权限',
@@ -552,7 +557,9 @@ export const m = {
          '已加入用户组数量 ， 新申请数量，总数超过上限：100，请减少申请或退出部分用户组后重试': '已加入用户组数量：{applyCount} ， 新申请数量：{newApplyCount}，总数超过上限：100，请减少申请或退出部分用户组后重试',
          '最多添加一个管理员': '最多添加一个管理员',
          '管理员不可重复添加': '管理员不可重复添加',
-         '有关联的用户组, 无法删除': '有关联的用户组, 无法删除'
+         '有关联的用户组, 无法删除': '有关联的用户组, 无法删除',
+         '不可续期的用户组如下': '不可续期的用户组如下：{value}',
+         '不可移出的用户组如下': '不可移出的用户组如下：{value}'
     },
     // 二次确认弹窗相关
     dialog: {
@@ -575,7 +582,8 @@ export const m = {
         '确认批量退出所选的用户组吗？': '确认批量退出所选的用户组吗？',
         '确认删除该人员模板？': '确认删除该人员模板？',
         '确认解除与该用户组的关联？': '确认解除与该用户组的关联？',
-        '确认批量删除所选的人员模板吗？': '确认批量删除所选的人员模板吗？'
+        '确认批量删除所选的人员模板吗？': '确认批量删除所选的人员模板吗？',
+        '确认把用户/组织移出该用户组？': '确认把用户/组织移出该用户组？'
     },
     nav: {
         '蓝鲸权限中心': '蓝鲸权限中心',
@@ -633,7 +641,8 @@ export const m = {
         '克隆二级管理空间': '克隆二级管理空间',
         '用户组设置': '用户组设置',
         '敏感等级': '敏感等级',
-        '人员模板': '人员模板'
+        '人员模板': '人员模板',
+        '用户/组织': '用户/组织'
     },
     applyEntrance: {
         '立刻申请': '立刻申请',
@@ -1464,6 +1473,50 @@ export const m = {
         '只读人员模板不能移除': '只读人员模板不能移除',
         '只读人员模板不能添加、删除、复制成员': '只读人员模板不能添加、删除、复制成员',
         '最多只能选择10个人员模板': '最多只能选择10个人员模板'
+    },
+    userOrOrg: {
+        '用户组名': '用户组名',
+        '批量操作': '批量操作',
+        '重置用户组': '重置用户组',
+        '追加用户组': '追加用户组',
+        '加入用户组': '加入用户组',
+        '追加的用户组': '追加的用户组',
+        '重置的用户组': '重置的用户组',
+        '批量追加用户组': '批量追加用户组',
+        '批量重置用户组': '批量重置用户组',
+        '操作对象': '操作对象',
+        '加入的用户组': '加入的用户组',
+        '重置的用户组': '重置的用户组',
+        '申请时长': '申请时长',
+        '移出': '移出',
+        '续期时长': '续期时长',
+        '续期预览': '续期预览',
+        '用户组 ID': '用户组 ID',
+        '用户 / 组织列表': '用户 / 组织列表',
+        '移出用户组名': '移出用户组名',
+        '批量移出用户组': '批量移出用户组',
+        '清空用户组': '清空用户组',
+        '请先勾选用户': '请先勾选用户',
+        '请先勾选用户组权限': '请先勾选用户组权限',
+        '请先勾选用户/组织': '请先勾选用户/组织',
+        '搜索用户组名、描述': '搜索用户组名、描述',
+        '输入ID、用户组名、用户名、组织名、描述等按回车进行搜索': '输入ID、用户组名、用户名、组织名、描述等按回车进行搜索',
+        '在已有用户组的基础上，追加以下所选的用户组': '在已有用户组的基础上，追加以下所选的用户组',
+        '已选对象的权限将被清空，替换为以下所选的用户组': '已选对象的权限将被清空，替换为以下所选的用户组',
+        '移出后，该用户/组织将不再继承该组的权限。': '移出后，该用户/组织将不再继承该组的权限。',
+        '用户组不能为空': '用户组不能为空',
+        '的用户组': '的用户组',
+        '清空对象': '清空对象',
+        '个人': '个人',
+        '个人用户组权限': '个人用户组权限',
+        '用户组权限（不影响因所属组织而拥有的用户组权限）': '用户组权限（不影响因所属组织而拥有的用户组权限）',
+        '请选择申请时长': '请选择申请时长',
+        '请选择续期时长': '请选择续期时长',
+        '查看人员模板详情': '查看人员模板详情',
+        '查看该组织的用户组详情页': '查看该组织的用户组详情页',
+        '已选择的用户组权限为不可移出的管理员组': '已选择的用户组权限为不可移出的管理员组',
+        '已选择的用户组权限不需要续期': '已选择的用户组权限不需要续期',
+        '组织用户组权限': '组织用户组权限'
     }
 }
 export default {
diff --git a/frontend/src/router/ce.js b/frontend/src/router/ce.js
index e03e97923..7131e7c58 100644
--- a/frontend/src/router/ce.js
+++ b/frontend/src/router/ce.js
@@ -189,6 +189,9 @@ const MemberTemplate = () => import(/* webpackChunkName: 'memberTemplate' */ '..
 // 系统管理员下的资源权限管理
 const ResourcePermManage = () => import(/* webpackChunkName: 'grading-admin' */ '../views/resource-permiss');
 
+// 用户/组织
+const userOrgPerm = () => import(/* webpackChunkName: 'userOrgPerm' */ '../views/user-org-perm/index.vue');
+
 const TemplatePermDetail = () =>
   import(/* webpackChunkName: 'my-perm-template-perm' */ '../views/perm/template-perm/detail');
 const GroupPermDetail = () => import(/* webpackChunkName: 'my-perm-group-perm' */ '../views/perm/group-perm/detail');
@@ -432,6 +435,14 @@ export const routes = [
         },
         component: SecondaryManageSpaceDetail
       },
+      {
+        path: 'user-org-perm',
+        name: 'userOrgPerm',
+        meta: {
+          headerTitle: il8n('nav', '用户/组织')
+        },
+        component: userOrgPerm
+      },
       {
         path: 'user-group',
         name: 'userGroup',
diff --git a/frontend/src/router/ee.js b/frontend/src/router/ee.js
index 3d834574f..d21373f68 100644
--- a/frontend/src/router/ee.js
+++ b/frontend/src/router/ee.js
@@ -189,6 +189,9 @@ const MemberTemplate = () => import(/* webpackChunkName: 'memberTemplate' */ '..
 // 系统管理员下的资源权限管理
 const ResourcePermManage = () => import(/* webpackChunkName: 'grading-admin' */ '../views/resource-permiss');
 
+// 用户/组织
+const userOrgPerm = () => import(/* webpackChunkName: 'userOrgPerm' */ '../views/user-org-perm/index.vue');
+
 const TemplatePermDetail = () =>
   import(/* webpackChunkName: 'my-perm-template-perm' */ '../views/perm/template-perm/detail');
 const GroupPermDetail = () => import(/* webpackChunkName: 'my-perm-group-perm' */ '../views/perm/group-perm/detail');
@@ -432,6 +435,14 @@ export const routes = [
         },
         component: SecondaryManageSpaceDetail
       },
+      {
+        path: 'user-org-perm',
+        name: 'userOrgPerm',
+        meta: {
+          headerTitle: il8n('nav', '用户/组织')
+        },
+        component: userOrgPerm
+      },
       {
         path: 'user-group',
         name: 'userGroup',
diff --git a/frontend/src/router/ieod.js b/frontend/src/router/ieod.js
index 8c7c0f3c2..5ad80391c 100644
--- a/frontend/src/router/ieod.js
+++ b/frontend/src/router/ieod.js
@@ -189,6 +189,9 @@ const MemberTemplate = () => import(/* webpackChunkName: 'memberTemplate' */ '..
 // 系统管理员下的资源权限管理
 const ResourcePermManage = () => import(/* webpackChunkName: 'grading-admin' */ '../views/resource-permiss');
 
+// 用户/组织
+const userOrgPerm = () => import(/* webpackChunkName: 'userOrgPerm' */ '../views/user-org-perm/index.vue');
+
 const TemplatePermDetail = () =>
   import(/* webpackChunkName: 'my-perm-template-perm' */ '../views/perm/template-perm/detail');
 const GroupPermDetail = () => import(/* webpackChunkName: 'my-perm-group-perm' */ '../views/perm/group-perm/detail');
@@ -432,6 +435,14 @@ export const routes = [
         },
         component: SecondaryManageSpaceDetail
       },
+      {
+        path: 'user-org-perm',
+        name: 'userOrgPerm',
+        meta: {
+          headerTitle: il8n('nav', '用户/组织')
+        },
+        component: userOrgPerm
+      },
       {
         path: 'user-group',
         name: 'userGroup',
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index e8fa86cf5..44bdd651d 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -32,8 +32,8 @@ import http from '@/api';
 // import il8n from '@/language';
 import preload from '@/common/preload';
 import { bus } from '@/common/bus';
-// import { existValue, getParamsValue, getTreeNode } from '@/common/util';
 import { existValue, getParamsValue } from '@/common/util';
+// import { existValue, getParamsValue, getManagerMenuPerm } from '@/common/util';
 import { getRouterDiff, getNavRouterDiff } from '@/common/router-handle';
 import { messageError } from '@/common/bkmagic';
 
@@ -86,15 +86,9 @@ export const beforeEach = async (to, from, next) => {
   let navIndex = store.state.index || Number(window.localStorage.getItem('index') || 0);
   let currentRoleId = String(to.query.current_role_id || '').trim();
   let curRoleId = store.state.curRoleId;
+  // 检验有系管没超管身份
+  const hasManagerPerm = '';
   const defaultRoute = ['my-perm', 'user-group', 'audit', 'user'];
-  // if (curRole === 'staff') {
-  //     await store.dispatch('role/updateCurrentRole', { id: 0 });
-  // }
-  // 递归改成分级展开
-  // const roleList = await store.dispatch('roleList', {
-  //   cancelWhenRouteChange: false,
-  //   cancelPrevious: false
-  // });
 
   async function getExternalRole () {
     const { role_id: externalRoleId } = to.query;
@@ -130,6 +124,28 @@ export const beforeEach = async (to, from, next) => {
     }
   }
 
+  // 处理平台管理超管和系管都可以进入，但访问菜单权限不一致
+  // 暂时注释掉后期开放
+  // async function getPlatManageMenu () {
+  //   hasManagerPerm = '';
+  //   let roleList = store.state.roleList;
+  //   if (roleList.length > 0) {
+  // 有系统管理员身份没超管身份
+  //     hasManagerPerm = getManagerMenuPerm(roleList);
+  //   } else {
+  //     roleList = await store.dispatch('roleList', {
+  //       cancelWhenRouteChange: false,
+  //       cancelPrevious: false
+  //     });
+  //   }
+  // 有系统管理员身份没超管身份
+  //   hasManagerPerm = getManagerMenuPerm(roleList);
+  //   if (['hasSystemNoSuperManager'].includes(hasManagerPerm)) {
+  //     hasManagerPerm = 'hasSystemNoSuperManager';
+  //     defaultRoute = ['my-perm', 'user-group', 'audit', 'resourcePermiss'];
+  //   }
+  // }
+
   // 根据不同权限处理不同的导航栏索引
   function navDiffMenuIndex (index) {
     navIndex = index;
@@ -161,10 +177,11 @@ export const beforeEach = async (to, from, next) => {
     navDiffMenuIndex(0);
   }
  
-  if (['userGroup', 'permTemplate', 'approvalProcess'].includes(to.name)) {
+  if (['userGroup', 'permTemplate'].includes(to.name)) {
     await store.dispatch('role/updateCurrentRole', { id: curRoleId });
     navDiffMenuIndex(1);
   }
+
   if (to.name === 'userGroupDetail') {
     navDiffMenuIndex(1);
     store.dispatch('versionLogInfo');
@@ -194,13 +211,6 @@ export const beforeEach = async (to, from, next) => {
   } else if (to.name === 'userGroup') {
     store.dispatch('versionLogInfo');
     if (currentRoleId) {
-      // const roleList = await store.dispatch('roleList', {
-      //     cancelWhenRouteChange: false,
-      //     cancelPrevious: false
-      // });
-      // const currentRole = roleList.find((item) => String(item.id) === currentRoleId);
-      // const currentRole = getTreeNode(currentRoleId, roleList);
-      // await getExternalRole();
       await getManagerInfo();
     } else {
       if (existValue('externalApp')) { // 外部嵌入页面
@@ -223,9 +233,6 @@ export const beforeEach = async (to, from, next) => {
   } else {
     // 邮件点击续期跳转过来的链接需要做身份的前置判断
     if (to.name === 'groupPermRenewal' && to.query.source === 'email' && currentRoleId) {
-      // await store.dispatch('role/updateCurrentRole', { id: +currentRoleId });
-      // const { role } = await store.dispatch('userInfo');
-      // curRole = role.type;
       await getManagerInfo();
       navDiffMenuIndex(1);
     }
@@ -237,22 +244,15 @@ export const beforeEach = async (to, from, next) => {
       getExternalRole();
     }
 
-    // if (to.name === 'gradingAdminEdit') {
-    //     await store.dispatch('role/updateCurrentRole', { id: 0 });
-    //     await store.dispatch('userInfo');
-    //     if (to.params.id) {
-    //         store.commit('updateNavId', to.params.id);
-    //     }
-    //     store.commit('updateIndex', 0);
-    //     window.localStorage.setItem('index', 0);
-    //     curRole = 'staff';
-    // }
-
     let difference = [];
     if (navIndex === 1) {
       difference = getRouterDiff(curRole);
     } else {
-      difference = getNavRouterDiff(navIndex);
+      // 目前只有平台管理需要根据管理员最大身份处理路由权限
+      // if ([3].includes(Number(navIndex))) {
+      //   await getPlatManageMenu();
+      // }
+      difference = getNavRouterDiff(navIndex, hasManagerPerm);
     }
     if (difference.length) {
       store.dispatch('versionLogInfo');
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 1e53f0149..4687e15ca 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -27,7 +27,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import http from '@/api';
-import { unifyObjectStyle, json2Query } from '@/common/util';
+import { unifyObjectStyle, json2Query, getManagerMenuPerm } from '@/common/util';
 import { getRouterDiff, getNavRouterDiff } from '@/common/router-handle';
 import il8n from '@/language';
 
@@ -85,12 +85,15 @@ import spaceManage from './modules/space-manage';
 // 用户组设置模块
 import userGroupSetting from './modules/user-group-setting';
 
-// 敏感等级
+// 敏感等级模块
 import sensitivityLevel from './modules/sensitivity-level';
 
-// 人员模板
+// 人员模板模块
 import memberTemplate from './modules/member-template';
 
+// 用户/组织模块
+import userOrOrg from './modules/user-org';
+
 Vue.use(Vuex);
 
 const SITE_URL = window.SITE_URL;
@@ -161,6 +164,14 @@ const currentNav = [
     name: il8n('nav', '权限管理'),
     rkey: 'managePermission',
     children: [
+      {
+        icon: 'personal-user',
+        id: 'userOrgPermNav',
+        rkey: 'userOrgPerm',
+        name: il8n('nav', '用户/组织'),
+        path: `${SITE_URL}user-org-perm`,
+        disabled: false
+      },
       {
         icon: 'user-group',
         id: 'userGroupNav',
@@ -177,6 +188,14 @@ const currentNav = [
         path: `${SITE_URL}perm-template`,
         disabled: false
       },
+      {
+        icon: 'renyuanmuban',
+        id: 'memberTemplateNav',
+        rkey: 'memberTemplate',
+        name: il8n('nav', '人员模板'),
+        path: `${SITE_URL}member-template`,
+        disabled: false
+      },
       {
         icon: 'personal-user',
         id: 'userNav',
@@ -186,11 +205,11 @@ const currentNav = [
         disabled: false
       },
       {
-        icon: 'renyuanmuban',
-        id: 'memberTemplateNav',
-        rkey: 'memberTemplate',
-        name: il8n('nav', '人员模板'),
-        path: `${SITE_URL}member-template`,
+        icon: 'resource-perm-manage',
+        id: 'resourcePermissNav',
+        rkey: 'resourcePermiss',
+        name: il8n('nav', '资源权限管理'),
+        path: `${SITE_URL}resource-permiss`,
         disabled: false
       }
       // {
@@ -242,27 +261,19 @@ const currentNav = [
   //     path: `${SITE_URL}first-manage-space`,
   //     disabled: false
   // },
-  {
-    icon: 'resource-perm-manage',
-    id: 'resourcePermissNav',
-    rkey: 'resourcePermiss',
-    name: il8n('nav', '资源权限管理'),
-    path: `${SITE_URL}resource-permiss`,
-    disabled: false
-  },
-  {
-    icon: 'mingandengji',
-    id: 'sensitivityLevelNav',
-    rkey: 'sensitivityLevel',
-    name: il8n('nav', '敏感等级'),
-    path: `${SITE_URL}sensitivity-level`,
-    disabled: false
-  },
   {
     icon: 'perm-manage',
     name: il8n('common', '设置'),
     rkey: 'set',
     children: [
+      {
+        icon: 'mingandengji',
+        id: 'sensitivityLevelNav',
+        rkey: 'sensitivityLevel',
+        name: il8n('nav', '敏感等级'),
+        path: `${SITE_URL}sensitivity-level`,
+        disabled: false
+      },
       {
         icon: 'super-admin',
         name: il8n('common', '管理员'),
@@ -348,7 +359,8 @@ const store = new Vuex.Store({
     spaceManage,
     userGroupSetting,
     sensitivityLevel,
-    memberTemplate
+    memberTemplate,
+    userOrOrg
   },
   state: {
     mainContentLoading: false,
@@ -639,7 +651,8 @@ const store = new Vuex.Store({
     },
 
     updataNavRouterDiff (state, index) {
-      state.routerDiff = [...getNavRouterDiff(index)];
+      const result = getManagerMenuPerm(state.roleList);
+      state.routerDiff = [...getNavRouterDiff(index, result)];
     },
 
     updateRoleList (state, payload) {
@@ -738,13 +751,7 @@ const store = new Vuex.Store({
       const AJAX_URL_PREFIX = window.AJAX_URL_PREFIX;
       return http.get(`${AJAX_URL_PREFIX}/accounts/user/`, config).then((response) => {
         const data = response ? response.data : {};
-        // 由于现有搜索改成后端接口搜索，去掉之前前端自定义的内容
-        // if (data.role.type === 'system_manager') {
-        //   const langManager = ['zh-cn'].includes(window.CUR_LANGUAGE) ? '系统管理员' : ' system administrator';
-        //   data.role.name = `${data.role.name}${langManager}`;
-        // }
         commit('updateUser', data);
-
         if (Object.keys(data).length > 0) {
           const role = data.role.type;
           if (role === 'staff') {
@@ -784,14 +791,9 @@ const store = new Vuex.Store({
       };
       return http.get(`${AJAX_URL_PREFIX}/roles/grade_managers/?${json2Query(queryParams)}`).then(({ data }) => {
         const results = data.results || [];
-        // results.forEach((item) => {
-        //   if (item.type === 'system_manager') {
-        //     const langManager = ['zh-cn'].includes(window.CUR_LANGUAGE) ? '系统管理员' : ' system administrator';
-        //     item.name = `${item.name}${langManager}`;
-        //   }
-        // });
         commit('updateRoleListTotal', data.count || 0);
         commit('updateRoleList', results);
+        // commit('updateRoleList', results.filter((item) => item.type !== 'super_manager'));
         return results;
       });
     },
diff --git a/frontend/src/store/modules/user-org.js b/frontend/src/store/modules/user-org.js
new file mode 100644
index 000000000..8a2acf410
--- /dev/null
+++ b/frontend/src/store/modules/user-org.js
@@ -0,0 +1,228 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云-权限中心(BlueKing-IAM) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云-权限中心(BlueKing-IAM) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云-权限中心(BlueKing-IAM):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import http from '@/api';
+import { json2Query } from '@/common/util';
+
+const AJAX_URL_PREFIX = window.AJAX_URL_PREFIX;
+
+export default {
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {
+    /**
+     * 分级管理员查看有权限的用户组成员列表
+     *
+     * @param {Function} commit store commit mutation handler
+     * @param {Object} state store state
+     * @param {Function} dispatch store dispatch action handler
+     * @param {Object} params 请求参数
+     * @param {Object?} config http config
+     *
+     * @return {Promise} promise 对象
+    */
+    getUserGroupMemberList ({ commit, state, dispatch }, params = {}, config) {
+      Object.keys(params).forEach((item) => {
+        if (['offset', 'limit'].includes(item) || params[item] === '') {
+          delete params[item];
+        }
+      });
+      // const queryParams = Object.keys(params).length ? `/?${json2Query(params)}` : '/';
+      // return http.get(`${AJAX_URL_PREFIX}/roles/group_members${queryParams}`, config);
+      const { page, page_size, hidden } = params;
+      const queryParams = Object.assign({}, { page, page_size });
+      if (params.hasOwnProperty('hidden')) {
+        queryParams.hidden = hidden;
+      }
+      return http.post(`${AJAX_URL_PREFIX}/roles/group_members/?${json2Query(queryParams)}`, params, config);
+    },
+
+    /**
+     * 角色用户组成员-用户组列表
+     *
+     * @param {Function} commit store commit mutation handler
+     * @param {Object} state store state
+     * @param {Function} dispatch store dispatch action handler
+     * @param {Object} params 请求参数
+     * @param {Object?} config http config
+     *
+     * @return {Promise} promise 对象
+    */
+    getUserOrDepartGroupList ({ commit, state, dispatch }, params, config) {
+      const { offset, limit, hidden } = params;
+      const requestParams = Object.assign({}, params);
+      const queryParams = Object.assign({}, { offset, limit });
+      if (params.hasOwnProperty('hidden')) {
+        queryParams.hidden = hidden;
+      }
+      Object.keys(params).forEach((item) => {
+        if (['subject_type', 'subject_id'].includes(item) || params[item] === '') {
+          delete params[item];
+        }
+      });
+      return http.post(`${AJAX_URL_PREFIX}/roles/group_members/${requestParams.subject_type}/${requestParams.subject_id}/groups/?${json2Query(queryParams)}`, params, config);
+    },
+    
+    /**
+     * 角色用户组成员-部门用户组列表
+     *
+     * @param {Function} commit store commit mutation handler
+     * @param {Object} state store state
+     * @param {Function} dispatch store dispatch action handler
+     * @param {Object} params 请求参数
+     * @param {Object?} config http config
+     *
+     * @return {Promise} promise 对象
+    */
+    getUserGroupByDepartList ({ commit, state, dispatch }, params, config) {
+      const { offset, limit, hidden } = params;
+      const requestParams = Object.assign({}, params);
+      const queryParams = Object.assign({}, { offset, limit });
+      if (params.hasOwnProperty('hidden')) {
+        queryParams.hidden = hidden;
+      }
+      Object.keys(params).forEach((item) => {
+        if (['subject_type', 'subject_id'].includes(item) || params[item] === '') {
+          delete params[item];
+        }
+      });
+      return http.post(`${AJAX_URL_PREFIX}/roles/group_members/${requestParams.subject_type}/${requestParams.subject_id}/departments/-/groups/?${json2Query(queryParams)}`, params, config);
+    },
+
+    /**
+     * 角色用户组成员-人员模版用户组列表
+     *
+     * @param {Function} commit store commit mutation handler
+     * @param {Object} state store state
+     * @param {Function} dispatch store dispatch action handler
+     * @param {Object} params 请求参数
+     * @param {Object?} config http config
+     *
+     * @return {Promise} promise 对象
+    */
+    getUserMemberTempList ({ commit, state, dispatch }, params, config) {
+      const { offset, limit, hidden } = params;
+      const requestParams = Object.assign({}, params);
+      const queryParams = Object.assign({}, { offset, limit });
+      if (params.hasOwnProperty('hidden')) {
+        queryParams.hidden = hidden;
+      }
+      Object.keys(params).forEach((item) => {
+        if (['subject_type', 'subject_id'].includes(item) || params[item] === '') {
+          delete params[item];
+        }
+      });
+      return http.post(`${AJAX_URL_PREFIX}/roles/group_members/${requestParams.subject_type}/${requestParams.subject_id}/subject_template_groups/?${json2Query(queryParams)}`, params, config);
+    },
+
+    /**
+     * 角色用户组成员-部门人员模版用户组列表
+     *
+     * @param {Function} commit store commit mutation handler
+     * @param {Object} state store state
+     * @param {Function} dispatch store dispatch action handler
+     * @param {Object} params 请求参数
+     * @param {Object?} config http config
+     *
+     * @return {Promise} promise 对象
+    */
+    getDepartMemberTempList ({ commit, state, dispatch }, params, config) {
+      const { offset, limit, hidden } = params;
+      const requestParams = Object.assign({}, params);
+      const queryParams = Object.assign({}, { offset, limit });
+      if (params.hasOwnProperty('hidden')) {
+        queryParams.hidden = hidden;
+      }
+      Object.keys(params).forEach((item) => {
+        if (['subject_type', 'subject_id'].includes(item) || params[item] === '') {
+          delete params[item];
+        }
+      });
+      return http.post(`${AJAX_URL_PREFIX}/roles/group_members/${requestParams.subject_type}/${requestParams.subject_id}/departments/-/subject_template_groups/?${json2Query(queryParams)}`, params, config);
+    },
+
+    /**
+     * 批量用户组删除成员
+     *
+     * @param {Function} commit store commit mutation handler
+     * @param {Object} state store state
+     * @param {Function} dispatch store dispatch action handler
+     * @param {Object} params 请求参数
+     * @param {Object?} config http config
+     *
+     * @return {Promise} promise 对象
+    */
+    deleteGroupMembers ({ commit, state, dispatch }, params, config) {
+      return http.post(`${AJAX_URL_PREFIX}/groups/members/delete/`, params, config);
+    },
+
+    /**
+     * 批量重置用户组成员
+     *
+     * @param {Function} commit store commit mutation handler
+     * @param {Object} state store state
+     * @param {Function} dispatch store dispatch action handler
+     * @param {Object} params 请求参数
+     * @param {Object?} config http config
+     *
+     * @return {Promise} promise 对象
+    */
+    resetGroupMembers ({ commit, state, dispatch }, params, config) {
+      return http.post(`${AJAX_URL_PREFIX}/roles/group_members/reset/`, params, config);
+    },
+
+    /**
+     * 批量清空用户组成员
+     *
+     * @param {Function} commit store commit mutation handler
+     * @param {Object} state store state
+     * @param {Function} dispatch store dispatch action handler
+     * @param {Object} params 请求参数
+     * @param {Object?} config http config
+     *
+     * @return {Promise} promise 对象
+    */
+    cleanGroupMembers ({ commit, state, dispatch }, params, config) {
+      return http.post(`${AJAX_URL_PREFIX}/roles/group_members/clean/`, params, config);
+    },
+
+    /**
+     * 批量加入用户组/批量续期
+     *
+     * @param {Function} commit store commit mutation handler
+     * @param {Object} state store state
+     * @param {Function} dispatch store dispatch action handler
+     * @param {Object} params 请求参数
+     * @param {Object?} config http config
+     *
+     * @return {Promise} promise 对象
+    */
+    batchJoinOrRenewal ({ commit, state, dispatch }, params, config) {
+      return http.post(`${AJAX_URL_PREFIX}/groups/members/renew/`, params, config);
+    }
+  }
+};
diff --git a/frontend/src/views/approval-process/index.vue b/frontend/src/views/approval-process/index.vue
index 16b88bf5f..327307e15 100644
--- a/frontend/src/views/approval-process/index.vue
+++ b/frontend/src/views/approval-process/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="iam-approval-process-set-wrapper">
-    <section class="iam-approval-process-set-item-wrapper" v-if="isSuperManager">
+    <section class="iam-approval-process-set-item-wrapper" v-if="isShowProcessSelect">
       <render-set-item
         v-for="(item, index) in processSetList"
         :key="index"
@@ -11,7 +11,13 @@
         :list="processData[item.type]"
         @selected="handleSelected(...arguments, item, index)" />
     </section>
-    <section :class="['iam-approval-process-set-content-wrapper', { 'set-style': isSuperManager }]">
+    <section
+      :class="[
+        'iam-approval-process-set-content-wrapper',
+        { 'set-style': isShowProcessSelect },
+        { 'hide-process-table': isShowProcessTable }
+      ]"
+    >
       <bk-tab
         :active.sync="active"
         type="unborder-card"
@@ -49,6 +55,7 @@
   };
 
   export default {
+    inject: ['reload'],
     components: {
       RenderSetItem,
       JoinRateManagerProcess,
@@ -82,7 +89,7 @@
           { name: 'CustomPermProcess', label: this.$t(`m.approvalProcess['自定义权限审批流程']`) },
           { name: 'JoinGroupProcess', label: this.$t(`m.approvalProcess['加入用户组审批流程']`) }
         ],
-        active: 'CustomPermProcess',
+        active: 'JoinGroupProcess',
         curRole: 'staff',
         processData: {
           'grant_action': [],
@@ -100,13 +107,19 @@
       };
     },
     computed: {
-            ...mapGetters(['user']),
-            /**
-             * isSuperManager
-             */
-            isSuperManager () {
-                return this.curRole === 'super_manager';
-            }
+      ...mapGetters(['user', 'index']),
+      isSuperManager () {
+        return ['super_manager'].includes(this.curRole);
+      },
+      isShowProcessSelect () {
+        if (this.index !== 1 && this.isSuperManager) {
+          return true;
+        }
+        return false;
+      },
+      isShowProcessTable () {
+        return ![1].includes(Number(this.index));
+      }
     },
     watch: {
       /**
@@ -118,6 +131,17 @@
           this.getFilterPanels();
         },
         immediate: true
+      },
+      index: {
+        async handler (newValue, oldValue) {
+          // 处理不同导航栏下相同路由切换不刷新
+          if (newValue !== oldValue) {
+            this.curRole = this.user.role.type || 'staff';
+            this.getFilterPanels();
+            await this.fetchPageData();
+          }
+        },
+        deep: true
       }
     },
     created () {
@@ -125,9 +149,6 @@
       this.getFilterPanels();
     },
     methods: {
-      /**
-       * 111
-       */
       async fetchPageData () {
         const roleItem = {
           system_manager: async () => {
@@ -180,14 +201,14 @@
           const { code, data } = await this.$store.dispatch('approvalProcess/getDefaultProcesses');
           const defaultProcesses = data || [];
           const grantAction = defaultProcesses.find(item => item.type === 'grant_action');
+          const joinGroup = defaultProcesses.find(item => item.type === 'join_group');
+          const createRatingManager = defaultProcesses.find(item => item.type === 'create_rating_manager');
           if (grantAction) {
             this.processSetList[0].process_id = grantAction.process_id;
           }
-          const joinGroup = defaultProcesses.find(item => item.type === 'join_group');
           if (joinGroup) {
             this.processSetList[1].process_id = joinGroup.process_id;
           }
-          const createRatingManager = defaultProcesses.find(item => item.type === 'create_rating_manager');
           if (createRatingManager) {
             this.processSetList[2].process_id = createRatingManager.process_id;
           }
@@ -205,6 +226,10 @@
        */
       getFilterPanels () {
         const roleItem = {
+          super_manager: () => {
+            this.panels = this.panels.filter(item => ['CustomPermProcess', 'JoinRateManagerProcess', 'JoinGroupProcess'].includes(item.name));
+            this.active = 'CustomPermProcess';
+          },
           system_manager: () => {
             this.panels = this.panels.filter(item => ['CustomPermProcess', 'JoinGroupProcess'].includes(item.name));
             this.active = 'CustomPermProcess';
@@ -218,7 +243,9 @@
             this.active = 'JoinGroupProcess';
           }
         };
-        return roleItem[this.curRole] ? roleItem[this.curRole]() : 'CustomPermProcess';
+        if (roleItem[this.curRole]) {
+          roleItem[this.curRole]();
+        }
       },
 
       /**
@@ -263,6 +290,9 @@
                 margin-top: 20px;
                 min-height: calc(100vh - 250px);
             }
+            &.hide-process-table {
+              display: none;
+            }
             .iam-approval-process-set-tab-cls {
                 .bk-tab-header {
                     height: 60px;
diff --git a/frontend/src/views/grading-admin/components/render-instance.vue b/frontend/src/views/grading-admin/components/render-instance.vue
index 52ea2c16c..f48ebe833 100644
--- a/frontend/src/views/grading-admin/components/render-instance.vue
+++ b/frontend/src/views/grading-admin/components/render-instance.vue
@@ -71,7 +71,7 @@
     },
     computed: {
       expandedText () {
-        return this.isAllExpanded ? this.$t(`m.grading['逐项编辑']`) : this.$t(`m.grading['展开选择']`);
+        return this.isAllExpanded ? this.$t(`m.grading['展开选择']`) : this.$t(`m.grading['逐项编辑']`);
       },
       isAggregateDisabled () {
         return this.policyList.length < 1
diff --git a/frontend/src/views/grading-admin/create/index.vue b/frontend/src/views/grading-admin/create/index.vue
index 6cff2197a..f67bafbf2 100644
--- a/frontend/src/views/grading-admin/create/index.vue
+++ b/frontend/src/views/grading-admin/create/index.vue
@@ -378,7 +378,7 @@
                 return tempList;
             },
             expandedText () {
-                return this.isAllExpanded ? this.$t(`m.grading['逐项编辑']`) : this.$t(`m.grading['批量编辑']`);
+                return this.isAllExpanded ? this.$t(`m.grading['批量编辑']`) : this.$t(`m.grading['逐项编辑']`);
             },
             isAggregateDisabled () {
                 return this.policyList.length < 1
diff --git a/frontend/src/views/grading-admin/edit/index.vue b/frontend/src/views/grading-admin/edit/index.vue
index e516b2d8c..c97d32d8d 100644
--- a/frontend/src/views/grading-admin/edit/index.vue
+++ b/frontend/src/views/grading-admin/edit/index.vue
@@ -341,7 +341,7 @@
                 return tempList;
             },
             expandedText () {
-                return this.isAllExpanded ? this.$t(`m.grading['逐项编辑']`) : this.$t(`m.grading['批量编辑']`);
+                return this.isAllExpanded ? this.$t(`m.grading['批量编辑']`) : this.$t(`m.grading['逐项编辑']`);
             },
             isAggregateDisabled () {
                 return this.policyList.length < 1
diff --git a/frontend/src/views/grading-admin/index.vue b/frontend/src/views/grading-admin/index.vue
index db24766f7..d5dd71c79 100644
--- a/frontend/src/views/grading-admin/index.vue
+++ b/frontend/src/views/grading-admin/index.vue
@@ -10,18 +10,10 @@
       <bk-button theme="primary" @click="handleCreate" data-test-id="grading_btn_create">
         {{ isStaff ? $t(`m.common['申请新建']`) : $t(`m.common['新建']`) }}
       </bk-button>
-      <bk-link class="AdminLink" theme="primary" @click="handleOpenDocu">
+      <bk-link class="admin-link" theme="primary" @click="handleOpenDocu">
         <span class="linkText">{{ $t('m.common["什么是管理空间"]') }}</span>
       </bk-link>
       <div slot="right">
-        <!-- <bk-input
-                    :placeholder="$t(`m.levelSpace['请输入名称']`)"
-                    clearable
-                    style="width: 420px;"
-                    right-icon="bk-icon icon-search"
-                    v-model="searchValue"
-                    @enter="handleSearch">
-                </bk-input> -->
         <iam-search-select
           @on-change="handleSelectSearch"
           :data="searchData"
@@ -45,7 +37,7 @@
       @expand-change="handleExpandChange"
       v-bkloading="{ isLoading: tableLoading, opacity: 1 }"
     >
-      <bk-table-column type="expand" width="30">
+      <bk-table-column type="expand" width="30" fixed="left">
         <template slot-scope="{ row }">
           <bk-table
             size="small"
@@ -58,8 +50,8 @@
             :max-height="500"
             v-bkloading="{ isLoading: subLoading, opacity: 1 }"
           >
-            <bk-table-column width="45" />
-            <bk-table-column prop="name" width="225">
+            <bk-table-column width="45" fixed="left" />
+            <bk-table-column prop="name" :min-width="190" fixed="left">
               <template slot-scope="child">
                 <div class="flex_space_name">
                   <Icon type="level-two-manage-space" :style="{ color: iconColor[1] }" />
@@ -84,7 +76,7 @@
                   @on-change="handleUpdateSubMembers" />
               </template>
             </bk-table-column>
-            <bk-table-column prop="description" width="300">
+            <bk-table-column prop="description" :min-width="200">
               <template slot-scope="child">
                 <iam-edit-textarea
                   field="description"
@@ -96,31 +88,21 @@
               </template>
             </bk-table-column>
             <bk-table-column :label="$t(`m.levelSpace['更新人']`)" prop="updater" />
-            <bk-table-column :label="$t(`m.levelSpace['更新时间']`)" prop="updated_time" width="240">
+            <bk-table-column :label="$t(`m.levelSpace['更新时间']`)" prop="updated_time" width="160">
               <template slot-scope="child">
                 <span :title="child.row.updated_time">{{ child.row.updated_time }}</span>
               </template>
             </bk-table-column>
-            <bk-table-column :width="curLanguageIsCn ? 200 : 320">
+            <bk-table-column :width="curLanguageIsCn ? 180 : 210" prop="child-operate">
               <template slot-scope="child">
                 <div class="operate_btn">
-                  <span>
-                    <!-- <bk-button
-                      theme="primary"
-                      text
-                      @click.stop="handleSubView(child.row, 'role')"
-                      :title="disabledPerm(child.row) ? $t(`m.verify['需添加当前用户为管理员']`) : ''"
-                      :disabled="disabledPerm(child.row)">
-                      {{ $t(`m.levelSpace['进入空间']`) }}
-                    </bk-button> -->
-                    <bk-button
-                      theme="primary"
-                      text
-                      @click.stop="handleSubView(child.row, 'role')"
-                    >
-                      {{ $t(`m.levelSpace['进入空间']`) }}
-                    </bk-button>
-                  </span>
+                  <bk-button
+                    theme="primary"
+                    text
+                    @click.stop="handleSubView(child.row, 'role')"
+                  >
+                    {{ $t(`m.levelSpace['进入空间']`) }}
+                  </bk-button>
                   <bk-button
                     theme="primary"
                     text
@@ -128,9 +110,6 @@
                   >
                     {{ $t(`m.nav['授权边界']`) }}
                   </bk-button>
-                  <!--<bk-button theme="primary" text @click.stop="handleSubView(child.row, 'clone')">
-                                        {{ $t(`m.levelSpace['克隆']`) }}
-                                    </bk-button> -->
                 </div>
               </template>
             </bk-table-column>
@@ -158,7 +137,7 @@
           </div>
         </template>
       </bk-table-column>
-      <bk-table-column :label="$t(`m.levelSpace['名称']`)" width="240">
+      <bk-table-column :label="$t(`m.levelSpace['名称']`)" prop="name" :min-width="200" fixed="left">
         <template slot-scope="{ row, $index }">
           <div class="flex_space_name">
             <template v-if="isFilter && ['subset_manager'].includes(row.type)">
@@ -187,12 +166,6 @@
       </bk-table-column>
       <bk-table-column :label="$t(`m.levelSpace['管理员']`)" prop="members" width="300">
         <template slot-scope="{ row , $index }">
-          <!-- <span
-                        :title="row.members && row.members.length ? row.members.map(tag => tag.username) : ''">
-                        <bk-tag v-for="(tag, index) of row.members" :key="index">
-                            {{tag.username}}
-                        </bk-tag>
-                    </span> -->
           <iam-edit-member-selector
             field="members"
             width="200"
@@ -202,7 +175,7 @@
             @on-change="handleUpdateMembers" />
         </template>
       </bk-table-column>
-      <bk-table-column :label="$t(`m.common['描述']`)" width="300">
+      <bk-table-column :label="$t(`m.common['描述']`)" :min-width="200">
         <template slot-scope="{ row, $index }">
           <iam-edit-textarea
             field="description"
@@ -213,22 +186,18 @@
             :remote-hander="handleUpdateManageSpace" />
         </template>
       </bk-table-column>
-      <bk-table-column :label="$t(`m.grading['更新人']`)" prop="updater"></bk-table-column>
-      <bk-table-column :label="$t(`m.grading['更新时间']`)" prop="updated_time" width="240">
+      <bk-table-column :label="$t(`m.grading['更新人']`)" prop="updater" />
+      <bk-table-column :label="$t(`m.grading['更新时间']`)" prop="updated_time" width="160">
         <template slot-scope="{ row }">
           <span :title="row.updated_time">{{ row.updated_time }}</span>
         </template>
       </bk-table-column>
-      <bk-table-column :label="$t(`m.common['操作']`)" :width="curLanguageIsCn ? 200 : 320">
+      <bk-table-column
+        :label="$t(`m.common['操作-table']`)"
+        :width="curLanguageIsCn ? 180 : 210"
+        :fixed="tableList.length > 0 ? 'right' : false"
+      >
         <template slot-scope="{ row }">
-          <!-- <section>
-                        <bk-button theme="primary" text @click="handleDropOut(row)">
-                            {{ $t(`m.common['退出']`) }}
-                        </bk-button>
-                        <bk-button theme="primary" style="margin-left: 10px;" text @click="handleDelete(row)">
-                            {{ $t(`m.common['删除']`) }}
-                        </bk-button>
-                    </section> -->
           <div class="operate_btn">
             <bk-button
               theme="primary"
@@ -244,13 +213,30 @@
             >
               {{ $t(`m.nav['授权边界']`) }}
             </bk-button>
-            <bk-button
-              v-if="!['subset_manager'].includes(row.type)"
-              theme="primary"
-              text
-              @click="handleCopy(row)">
-              {{ $t(`m.grading['克隆']`) }}
-            </bk-button>
+            <bk-popover
+              class="custom-table-dot-menu"
+              ext-cls="custom-table-dot-menu-tipper"
+              placement="bottom-start"
+              theme="dot-menu light"
+              trigger="click"
+              :arrow="false"
+              :offset="15"
+              :distance="0"
+            >
+              <span class="custom-table-dot-menu-trigger" />
+              <ul class="custom-table-dot-menu-list" slot="content">
+                <li class="custom-table-dot-menu-item">
+                  <bk-button
+                    v-if="!['subset_manager'].includes(row.type)"
+                    theme="primary"
+                    text
+                    @click.stop="handleCopy(row)"
+                  >
+                    {{ $t(`m.levelSpace['克隆']`) }}
+                  </bk-button>
+                </li>
+              </ul>
+            </bk-popover>
           </div>
         </template>
       </bk-table-column>
@@ -422,10 +408,10 @@
         // if (!row.is_member) {
         //     return 'iam-tag-table-cell-cls iam-tag-table-cell-opacity-cls';
         // }
-        if (!row.has_subset_manager) {
+        if (!row.has_subset_manager && !['right'].includes(column.fixed)) {
           return 'iam-tag-table-cell-cls iam-tag-table-cell-subset-cls';
         }
-        if (columnIndex === 1 || column.type === 'default') {
+        if ((columnIndex === 1 || column.type === 'default') && !['right'].includes(column.fixed)) {
           return 'iam-table-cell-1-cls';
         }
         if (columnIndex === 2) {
@@ -435,7 +421,7 @@
       },
 
       getSubCellClass ({ row, column, rowIndex, columnIndex }) {
-        return 'iam-table-cell-1-cls';
+        return !['child-operate'].includes(column.property) ? 'iam-table-cell-1-cls' : '';
       },
 
       handleExpandChange (row, expandedRows) {
@@ -900,134 +886,150 @@
     }
   };
 </script>
+
 <style lang="postcss">
-    .iam-grading-admin-wrapper {
-        .detail-link {
-            color: #3a84ff;
-            cursor: pointer;
-            &:hover {
-                color: #699df4;
-            }
-        }
-        .grading-admin-table {
-            margin-top: 16px;
-            border-right: none;
-            border-bottom: none;
-            &.set-border {
-                border-right: 1px solid #dfe0e5;
-                border-bottom: 1px solid #dfe0e5;
-            }
-            .grading-admin-name {
-                color: #3a84ff;
-                margin-left: 5px;
-                cursor: pointer;
-                &:hover {
-                    color: #699df4;
-                }
-            }
-            .bk-table-pagination-wrapper {
-                background: #fff;
-            }
-        }
+@import '@/css/mixins/custom-table-dot.css';
+</style>
+
+<style lang="postcss" scoped>
+.iam-grading-admin-wrapper {
+  .detail-link {
+    color: #3a84ff;
+    cursor: pointer;
+    &:hover {
+      color: #699df4;
     }
-    .AdminLink {
-        margin-left: 10px;
-        .linkText {
-            font-size: 12px
+  }
+  .grading-admin-table {
+    margin-top: 16px;
+    border-right: none;
+    border-bottom: none;
+    &.set-border {
+        border-right: 1px solid #dfe0e5;
+        border-bottom: 1px solid #dfe0e5;
+    }
+    .grading-admin-name {
+        color: #3a84ff;
+        margin-left: 5px;
+        cursor: pointer;
+        &:hover {
+            color: #699df4;
         }
     }
-
-    .iam-tag-table-cell-cls {
-        .cell {
-            .bk-tag {
-                &:first-of-type {
-                    margin-left: 0;
-                }
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
+    .bk-table-pagination-wrapper {
+        background: #fff;
+    }
+  }
+  .admin-link {
+    margin-left: 10px;
+    .linkText {
+      font-size: 12px
+    }
+  }
+  .iam-tag-table-cell-cls {
+    .cell {
+      .bk-tag {
+        &:first-of-type {
+          margin-left: 0;
         }
+        &:hover {
+          cursor: pointer;
+        }
+      }
     }
-</style>
-
-<style lang="postcss" scoped>
-
-.operate_btn {
+  }
+  .operate_btn {
     .bk-button-text {
-        &:nth-child(n + 2) {
-            margin-left: 10px;
-        }
+      &:nth-child(n + 2) {
+          margin-left: 10px;
+      }
     }
-}
+  }
 
-.flex_space_name {
+  .flex_space_name {
     display: flex;
     align-items: center;
+  }
 }
 
 /deep/ .bk-table-expanded-cell {
-        padding: 0 !important;
+  padding: 0 !important;
+  &:hover {
+      cursor: pointer;
+  }
+  .bk-table {
+      border: 0;
+  }
+}
 
-        &:hover {
-            cursor: pointer;
-        }
+/deep/ .iam-tag-table-cell-cls {
+  .cell {
+    .bk-tag {
+      &:first-of-type {
+          margin-left: 0;
+      }
 
-        .bk-table {
-            border: 0;
-        }
+      &:hover {
+          cursor: pointer;
+      }
     }
+  }
+}
 
-    /deep/ .iam-tag-table-cell-cls {
-        .cell {
-            .bk-tag {
-                &:first-of-type {
-                    margin-left: 0;
-                }
-
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-        }
-    }
+  /* /deep/ .iam-tag-table-cell-opacity-cls {
+      opacity: 0.4;
+      .cell {
+          padding-left: 0;
+          color:#575961;
+      }
+  } */
 
-    /* /deep/ .iam-tag-table-cell-opacity-cls {
-        opacity: 0.4;
-        .cell {
-            padding-left: 0;
-            color:#575961;
-        }
-    } */
+/deep/ .iam-table-cell-1-cls,
+.iam-tag-table-cell-subset-cls  {
+  .cell {
+    padding-left: 2px;
+  }
+}
 
-     /deep/ .iam-table-cell-1-cls, .iam-tag-table-cell-subset-cls  {
-        .cell {
-            padding-left: 2px;
-        }
+/deep/ .iam-tag-table-cell-subset-cls {
+  .cell {
+    padding-left: 2px;
+    .bk-table-expand-icon  {
+        display: none;
     }
-
-    /deep/ .iam-tag-table-cell-subset-cls {
-        .cell {
-            padding-left: 2px;
-            .bk-table-expand-icon  {
-                display: none;
-            }
-        }
+  }
+}
+/deep/ .bk-table-header-wrapper {
+    .cell {
+      padding-left: 2px;
     }
+}
 
-    /deep/ .bk-table-header-wrapper {
-        .cell {
-            padding-left: 2px;
-        }
+/deep/ .search-manage-table {
+    .bk-table-expand-icon  {
+      display: none;
     }
-
-    /deep/ .search-manage-table {
-        .bk-table-expand-icon  {
-            display: none;
-        }
-        .bk-table .cell {
-            padding-left: 2px;
-        }
+    .bk-table .cell {
+      padding-left: 2px;
     }
-</style>>
+}
+/deep/ .bk-table-fixed,
+/deep/ .bk-table-fixed-right {
+  border-bottom: 0;
+}
+/deep/ .children-expand-cls {
+  .bk-table-fixed {
+    .bk-table-fixed-body-wrapper {
+      z-index: 900;
+    }
+  }
+  .bk-table-fixed-right {
+    .bk-table__fixed-body-wrapper{
+      z-index: 900;
+    }
+  }
+  .bk-table-body-wrapper {
+    z-index: 800;
+  }
+}
+</style>
diff --git a/frontend/src/views/group/add-perm/index.vue b/frontend/src/views/group/add-perm/index.vue
index d7d27571e..c091f58e1 100644
--- a/frontend/src/views/group/add-perm/index.vue
+++ b/frontend/src/views/group/add-perm/index.vue
@@ -167,7 +167,7 @@
         return isDisabled;
       },
       expandedText () {
-          return this.isAllExpanded ? this.$t(`m.grading['逐项编辑']`) : this.$t(`m.grading['批量编辑']`);
+          return this.isAllExpanded ? this.$t(`m.grading['批量编辑']`) : this.$t(`m.grading['逐项编辑']`);
       },
       defaultValue () {
           if (this.originalList.length < 1) {
diff --git a/frontend/src/views/group/clone/index.vue b/frontend/src/views/group/clone/index.vue
index 71538e52b..255e34f7b 100644
--- a/frontend/src/views/group/clone/index.vue
+++ b/frontend/src/views/group/clone/index.vue
@@ -290,7 +290,7 @@
        * expandedText
        */
       expandedText () {
-          return this.isAllExpanded ? this.$t(`m.grading['逐项编辑']`) : this.$t(`m.grading['批量编辑']`);
+          return this.isAllExpanded ? this.$t(`m.grading['批量编辑']`) : this.$t(`m.grading['逐项编辑']`);
       },
       members () {
           const arr = [];
@@ -433,7 +433,7 @@
 
       // 获取分级管理员用户组配置
       async fetchUserGroupSet () {
-        if (!['subset_manager'].includes(this.user.role.type)) {
+        if (!['subset_manager', 'staff', ''].includes(this.user.role.type)) {
           try {
             const { data } = await this.$store.dispatch('userGroupSetting/getUserGroupSetConfig');
             if (data) {
diff --git a/frontend/src/views/group/common/render-member-display.vue b/frontend/src/views/group/common/render-member-display.vue
index df2936def..f21631372 100644
--- a/frontend/src/views/group/common/render-member-display.vue
+++ b/frontend/src/views/group/common/render-member-display.vue
@@ -15,14 +15,24 @@
         :key="index"
         class="member-item"
         :title="nameType(item)">
-        <span class="member-name">
-          {{ isDepartment ? item.name : item.username }}
-        </span>
-        <template v-if="isDepartment">
-          <span class="count">({{ item.count }})</span>
-        </template>
-        <template v-if="!isDepartment && !isTemplate && item.name !== ''">
-          <span class="display_name">({{ item.name }})</span>
+        <!-- 单独处理没有username和count的页面业务 -->
+        <template>
+          <template v-if="isCustomRoute">
+            <span class="member-name">
+              {{ formatCustomTypeName(item) }}
+            </span>
+          </template>
+          <template v-else>
+            <span class="member-name">
+              {{ isHasDepartCount ? item.name : item.username || item.id }}
+            </span>
+            <template v-if="isHasDepartCount && item.count">
+              <span class="count">({{ item.count }})</span>
+            </template>
+            <template v-if="!isHasDepartCount && !isTemplate && item.name !== ''">
+              <span class="display_name">({{ item.name }})</span>
+            </template>
+          </template>
         </template>
         <template v-if="isTemplate">
           <span class="display_name">{{ item.name }}</span>
@@ -51,6 +61,9 @@
       }
     },
     computed: {
+      isCustomRoute () {
+        return ['userOrgPerm'].includes(this.$route.name);
+      },
       icon () {
         if (this.type === 'user') {
           return 'personal-user';
@@ -70,30 +83,34 @@
         return this.$t(`m.common['组织']`);
       },
       isDepartment () {
-        return this.type === 'department' && window.ENABLE_ORGANIZATION_COUNT.toLowerCase() === 'true';
+        return this.type === 'department';
       },
       isTemplate () {
         return this.type === 'template';
       },
+      isHasDepartCount () {
+        return this.isDepartment && window.ENABLE_ORGANIZATION_COUNT.toLowerCase() === 'true';
+      },
       isEdit () {
         return this.mode === 'edit';
       },
       nameType () {
         return (payload) => {
-          const { name, type, username, full_name: fullName } = payload;
+          const { name, type, id, username, full_name: fullName } = payload;
           const typeMap = {
             user: () => {
               if (fullName) {
                 return fullName;
               } else {
-                return name ? `${username}(${name})` : username;
+                const curName = username || id;
+                return name ? `${curName}(${name})` : curName;
               }
             },
             department: () => {
-              return fullName || payload.fullName || `${username}(${name})`;
+              return fullName || payload.fullName || (username ? `${username}(${name})` : name);
             },
             depart: () => {
-              return fullName || payload.fullName || `${username}(${name})`;
+              return fullName || payload.fullName || (username ? `${username}(${name})` : name);
             },
             template: () => {
               return name;
@@ -101,6 +118,20 @@
           };
           return typeMap[type] ? typeMap[type]() : typeMap['user']();
         };
+      },
+      formatCustomTypeName () {
+        return (payload) => {
+          const { name, type, id } = payload;
+          const typeMap = {
+            user: () => {
+              return `${id} (${name})`;
+            },
+            department: () => {
+              return `${name} (${id})`;
+            }
+          };
+          return typeMap[type] ? typeMap[type]() : typeMap['user']();
+        };
       }
     },
     methods: {
diff --git a/frontend/src/views/group/components/add-action-sideslider.vue b/frontend/src/views/group/components/add-action-sideslider.vue
index 59dc62bef..b45cfdcf2 100644
--- a/frontend/src/views/group/components/add-action-sideslider.vue
+++ b/frontend/src/views/group/components/add-action-sideslider.vue
@@ -515,6 +515,9 @@
        * @param {String} systemId 系统id
        */
       async fetchCommonActions (systemId) {
+        if (!systemId) {
+          return;
+        }
         try {
           const { code, data } = await this.$store.dispatch('permApply/getUserCommonAction', { systemId });
           this.commonActions.splice(0, this.commonActions.length, ...(data || []));
@@ -599,12 +602,15 @@
           this.fetchErrorMsg(e);
         } finally {
           this.initRequestQueue.shift();
+          if (!this.systemList.length) {
+            this.initRequestQueue = [];
+          }
           this.systemListIsLoading = false;
         }
       },
 
       async fetchAggregationAction () {
-        if (this.aggregationData[this.curSystem]) {
+        if (!this.curSystem || this.aggregationData[this.curSystem]) {
           return;
         }
         try {
@@ -618,7 +624,7 @@
       },
 
       async fetchAuthorizationScopeActions () {
-        if (this.authorizationData[this.curSystem]) {
+        if (!this.curSystem || this.authorizationData[this.curSystem]) {
           return;
         }
         try {
@@ -640,6 +646,9 @@
        * @param {String} systemId 系统id
        */
       async fetchActions (systemId) {
+        if (!systemId) {
+          return;
+        }
         const params = {
           system_id: systemId
         };
diff --git a/frontend/src/views/group/components/attribute.vue b/frontend/src/views/group/components/attribute.vue
index ba8e47c5e..c5a7a9641 100644
--- a/frontend/src/views/group/components/attribute.vue
+++ b/frontend/src/views/group/components/attribute.vue
@@ -10,7 +10,7 @@
           :clearable="false"
           :disabled="item.disabled || isDisabledMode"
           searchable
-          style="width: 130px;"
+          style="width: 160px;"
           @selected="handleAttributeSelected(...arguments, item)">
           <bk-option v-for="option in list"
             :key="option.id"
@@ -23,7 +23,7 @@
           :ref="`${item.id}&${index}&valueRef`"
           :multiple="true"
           searchable
-          :disabled="item.disabled"
+          :disabled="item.disabled || !item.id"
           :loading="item.loading"
           style="position: relative; left: -1px; width: 330px;"
           :remote-method="handleRemoteValue"
@@ -38,7 +38,7 @@
               <span>{{ option.display_name }}</span>
             </template>
             <template v-else>
-              <div v-bkloading="{ isLoading: pagination.current <= pagination.totalPage, size: 'mini' }"></div>
+              <div v-bkloading="{ isLoading: item.isScrollRemote, size: 'mini' }"></div>
             </template>
           </bk-option>
         </bk-select>
@@ -55,6 +55,7 @@
   </div>
 </template>
 <script>
+  import { sleep } from '@/common/util';
   import Attribute from '@/model/attribute';
 
   const ATTRIBUTE_ITEM = {
@@ -105,7 +106,9 @@
           totalPage: 0
         },
         attrValueListMap: {},
-        isDisabledMode: false
+        isDisabledMode: false,
+        curToggleItem: '',
+        curKeyWord: ''
       };
     },
     computed: {
@@ -220,11 +223,11 @@
         item.loading = true;
         try {
           const res = await this.$store.dispatch('permApply/getResourceAttrValues', {
-                        ...this.params,
-                        limit: this.pagination.limit,
-                        offset: this.pagination.limit * (this.pagination.current - 1),
-                        attribute: item.id,
-                        keyword: ''
+            ...this.params,
+            limit: this.pagination.limit,
+            offset: this.pagination.limit * (this.pagination.current - 1),
+            attribute: item.id,
+            keyword: ''
           });
           this.pagination.totalPage = Math.ceil(res.data.count / this.pagination.limit);
           if (this.pagination.totalPage > 1) {
@@ -267,7 +270,7 @@
           payload.name = curAttr.display_name || '';
         }
         if (this.attrValueListMap[payload.id] && this.attrValueListMap[payload.id].length < 1) {
-          this.fetchResourceAttrValues(payload, '', true);
+          this.resetPagination(payload, '', true, false);
         }
       },
 
@@ -280,6 +283,10 @@
         if (val) {
           // 记录当前操作的属性值数据
           this.curOperateData = payload;
+          if ((this.curToggleItem && `${payload.id}&${index}&valueRef` !== this.curToggleItem) || !this.curKeyWord) {
+            this.resetPagination(payload, '', false, false);
+          }
+          this.curToggleItem = `${payload.id}&${index}&valueRef`;
         } else {
           this.curOperateData = {};
           curOptionDom.removeEventListener('scroll', this.handleScroll);
@@ -298,24 +305,24 @@
         if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight) {
           ++this.pagination.current;
           if (this.pagination.current <= this.pagination.totalPage) {
-            await this.fetchResourceAttrValues(this.curOperateData, '', false, true);
+            await this.fetchResourceAttrValues(this.curOperateData, this.curKeyWord, false, true);
             event.target.scrollTo(0, event.target.scrollTop - 10);
           }
         }
       },
 
       async handleRemoteValue (val) {
+        this.curKeyWord = val;
         if (this.curOperateData.id) {
-          this.pagination.current = 1;
-          this.pagination.totalPage = 0;
           // 删除loading项
           this.attrValueListMap[this.curOperateData.id].shift();
-          await this.fetchResourceAttrValues(this.curOperateData, val, false);
+          await this.resetPagination(this.curOperateData, val, false, false);
         }
       },
 
       async fetchResourceAttrValues (payload, keyword = '', isLoading = true, isScrollRemote = false) {
         payload.loading = isLoading && !isScrollRemote;
+        payload.isScrollRemote = isScrollRemote;
         const { limit, current } = this.pagination;
         try {
           const res = await this.$store.dispatch('permApply/getResourceAttrValues', {
@@ -327,22 +334,36 @@
           });
           if (isScrollRemote) {
             const len = this.attrValueListMap[payload.id].length;
-            this.attrValueListMap[payload.id].splice(len - 2, 0, ...res.data.results);
+            this.attrValueListMap[payload.id].splice(len - 1, 0, ...res.data.results);
           } else {
             this.pagination.totalPage = Math.ceil(res.data.count / this.pagination.limit);
             if (this.pagination.totalPage > 1) {
               res.data.results.push(LOADING_ITEM);
+            } else {
+              res.data.results = res.data.results.filter((item) => item.id !== '');
             }
-            this.attrValueListMap[payload.id] = [...res.data.results];
+            this.attrValueListMap[payload.id] = [...res.data.results || []];
           }
         } catch (e) {
           console.error(e);
           this.messageAdvancedError(e);
         } finally {
           payload.loading = false;
+          sleep(300).then(() => {
+            payload.isScrollRemote = false;
+          });
         }
       },
 
+      async resetPagination (payload, keyword = '', isLoading = true, isScrollRemote = false) {
+        this.pagination = Object.assign({
+          limit: 10,
+          current: 1,
+          totalPage: 0
+        });
+        await this.fetchResourceAttrValues(payload, keyword, isLoading, isScrollRemote);
+      },
+
       trigger () {
         this.$emit('on-change', this.attrValues);
       }
diff --git a/frontend/src/views/group/components/group-member-template-detail-table.vue b/frontend/src/views/group/components/group-member-template-detail-table.vue
index cded688a8..58f8959ef 100644
--- a/frontend/src/views/group/components/group-member-template-detail-table.vue
+++ b/frontend/src/views/group/components/group-member-template-detail-table.vue
@@ -92,6 +92,7 @@
         tableLoading: false,
         tableKeyWord: '',
         groupTableList: [],
+        searchTableData: [],
         pagination: {
           current: 1,
           limit: 10,
@@ -110,6 +111,21 @@
       this.fetchTemplateGroupList();
     },
     methods: {
+      getDataByPage (page) {
+        if (!page) {
+          this.pagination.current = page = 1;
+        }
+        let startIndex = (page - 1) * this.pagination.limit;
+        let endIndex = page * this.pagination.limit;
+        if (startIndex < 0) {
+          startIndex = 0;
+        }
+        if (endIndex > this.searchTableData.length) {
+          endIndex = this.searchTableData.length;
+        }
+        return this.searchTableData.slice(startIndex, endIndex);
+      },
+
       async fetchTemplateGroupList () {
         this.tableLoading = true;
         try {
@@ -118,15 +134,27 @@
           const params = {
             id,
             template_id,
-            page: current,
-            page_size: limit,
+            limit,
+            offset: limit * (current - 1),
             keyword: this.tableKeyWord
           };
           const { code, data } = await this.$store.dispatch('memberTemplate/getGroupSubjectTemplateMembers', params);
           const { count, results } = data;
           this.pagination.count = count || 0;
           this.groupTableList = results || [];
-          this.emptyTableData = formatCodeData(code, this.emptyTableData, this.groupTableList.length === 0);
+          if (!data.hasOwnProperty('count')) {
+            this.pagination.count = results.length || 0;
+            this.searchTableData = [...results || []];
+            this.groupTableList = this.getDataByPage(this.pagination.current);
+          } else {
+            this.pagination.count = count || 0;
+            this.groupTableList = results || [];
+          }
+          this.emptyTableData = formatCodeData(
+            code,
+            Object.assign(this.emptyTableData, { tipType: this.tableKeyWord.length > 0 ? 'search' : '' }),
+            this.groupTableList.length === 0
+          );
         } catch (e) {
           this.groupTableList = [];
           this.emptyTableData = formatCodeData(e.code, this.emptyTableData);
@@ -139,6 +167,7 @@
       handleSearchGroup (payload) {
         this.tableKeyWord = payload;
         this.emptyTableData.tipType = 'search';
+        this.resetPagination();
         this.fetchTemplateGroupList();
       },
 
@@ -151,12 +180,17 @@
 
       async handlePageChange (current) {
         this.pagination = Object.assign(this.pagination, { current });
-        await this.fetchTemplateGroupList();
+        if (this.emptyTableData.tipType === 'search') {
+          const list = this.getDataByPage(current);
+          this.groupTableList.splice(0, this.groupTableList.length, ...list);
+        } else {
+          await this.fetchTemplateGroupList();
+        }
       },
 
-      async handleLimitChange (limit) {
+      handleLimitChange (limit) {
         this.pagination = Object.assign(this.pagination, { current: 1, limit });
-        await this.fetchTemplateGroupList();
+        this.handlePageChange(this.pagination.current);
       },
 
       handleEmptyClear () {
diff --git a/frontend/src/views/group/components/iam-add-member.vue b/frontend/src/views/group/components/iam-add-member.vue
index d40a8b421..846b3c96a 100644
--- a/frontend/src/views/group/components/iam-add-member.vue
+++ b/frontend/src/views/group/components/iam-add-member.vue
@@ -1033,7 +1033,7 @@
           const keyword = getUsername(manualInputValue[i]);
           const params = {
             keyword,
-            is_exact: false
+            is_exact: true
           };
           try {
             if (manualInputValue.length < 10) {
@@ -1070,7 +1070,7 @@
           this.hasSelectedUsers.push(...temps);
           this.hasSelectedManualUsers.push(...temps);
           if (res.data.length) {
-            this.usernameList = res.data.map((item) => `${item.username}(${item.name})`);
+            this.usernameList = res.data.map((item) => item.username);
             // 分号拼接
             // const templateArr = [];
             // this.manualValueBackup = this.manualValueActual.split(';').filter(item => item !== '');
@@ -1108,13 +1108,19 @@
             console.log(formatStr);
             this.manualValue = _.cloneDeep(formatStr);
             if (this.isStaff) {
+              // 兼容staff角色不处理部门类的数据
               this.manualInputError = !!this.manualValue;
+              this.manualTableListStorage = [...this.hasSelectedManualDepartments, ...this.hasSelectedManualUsers];
+              this.manualTableList = _.cloneDeep(this.manualTableListStorage);
+              this.fetchManualTableData();
               return;
             }
             this.formatOrgAndUser();
           } else {
             if (this.isStaff) {
               this.manualInputError = !!this.manualValue;
+              this.manualTableListStorage = [...this.hasSelectedManualDepartments, ...this.hasSelectedManualUsers];
+              this.manualTableList = _.cloneDeep(this.manualTableListStorage);
               return;
             }
             this.formatOrgAndUser();
diff --git a/frontend/src/views/group/components/member-table.vue b/frontend/src/views/group/components/member-table.vue
index df3baa708..e7dfc0b84 100644
--- a/frontend/src/views/group/components/member-table.vue
+++ b/frontend/src/views/group/components/member-table.vue
@@ -209,6 +209,18 @@
               :render-header="renderHeader"
             />
           </template>
+          <template v-else-if="item.prop === 'description'">
+            <bk-table-column
+              :key="item.prop"
+              :label="item.label"
+              :prop="item.prop">
+              <template slot-scope="{ row }">
+                <span :title="row.description">
+                  {{ row.description || '--' }}
+                </span>
+              </template>
+            </bk-table-column>
+          </template>
           <template v-else-if="item.prop === 'created_time'">
             <bk-table-column
               :key="item.prop"
@@ -233,7 +245,7 @@
                     text
                     theme="primary"
                     :disabled="disabledTempGroup()"
-                    :title="disabledTempGroup() ? $t(`m.memberTemplate['只读人员模板不能移除]`) : ''"
+                    :title="disabledTempGroup() ? $t(`m.memberTemplate['只读人员模板不能移除']`) : ''"
                     @click="handleDelete(row)"
                   >
                     {{ $t(`m.common['移除']`) }}
@@ -321,6 +333,7 @@
   import { mapGetters } from 'vuex';
   import { PERMANENT_TIMESTAMP, COPY_KEYS_ENUM } from '@/common/constants';
   import { formatCodeData } from '@/common/util';
+  import { bus } from '@/common/bus';
   import renderRenewalDialog from '@/components/render-renewal-dialog';
   import DeleteDialog from '../common/iam-confirm-dialog';
   import AddMemberDialog from './iam-add-member';
@@ -372,6 +385,9 @@
       displaySet: {
         type: Object
       },
+      curDetailData: {
+        type: Object
+      },
       showExpiredAt: {
         type: Boolean,
         default: false
@@ -452,7 +468,7 @@
         ],
         groupTabList: [
           {
-            name: 'userOrOrg',
+            name: 'userOrgPerm',
             label: this.$t(`m.userGroup['用户/组织']`),
             count: 0,
             empty: 'emptyOrgData',
@@ -466,7 +482,7 @@
             tableList: []
           }
         ],
-        tabActive: 'userOrOrg',
+        tabActive: 'userOrgPerm',
         copyUrl: 'userGroup/getUserGroupMemberList',
         curRouteMode: '',
         curTempData: {},
@@ -505,7 +521,7 @@
         const hasData = this.currentSelectList.length > 0;
         if (
           hasData
-          && ['userOrOrg'].includes(this.tabActive)
+          && ['userOrgPerm'].includes(this.tabActive)
           && this.getGroupAttributes
           && this.getGroupAttributes().source_from_role
         ) {
@@ -550,7 +566,7 @@
           this.getGroupAttributes
           && this.getGroupAttributes().source_from_role
           && (this.userOrOrgCount === 1 || (this.userOrOrgCount === this.userOrOrgPagination.count === 1))
-          && (['userOrOrg'].includes(this.tabActive) && !this.routeMode)
+          && (['userOrgPerm'].includes(this.tabActive) && !this.routeMode)
         );
       };
     },
@@ -568,7 +584,7 @@
     formatPagination () {
       return () => {
         const typeMap = {
-          userOrOrg: () => {
+          userOrgPerm: () => {
             return this.userOrOrgPagination;
           },
           memberTemplate: () => {
@@ -581,7 +597,7 @@
     getTableList () {
       return () => {
         const typeMap = {
-          userOrOrg: () => {
+          userOrgPerm: () => {
             return this.groupTabList[0].tableList;
           },
           memberTemplate: () => {
@@ -630,7 +646,7 @@
       },
       tabActive: {
         handler (newValue, oldValue) {
-          this.curRouteMode = ['userOrOrg'].includes(newValue) ? 'userGroupDetail' : newValue;
+          this.curRouteMode = ['userOrgPerm'].includes(newValue) ? 'userGroupDetail' : newValue;
           if (this.routeMode) {
             this.curRouteMode = _.cloneDeep(this.routeMode);
           }
@@ -669,11 +685,12 @@
 
       getTableProps (payload) {
         const tabMap = {
-          userOrOrg: () => {
+          userOrgPerm: () => {
             return [
               { label: this.$t(`m.userGroup['用户/组织']`), prop: 'name' },
               { label: this.$t(`m.userGroupDetail['所属组织架构']`), prop: 'user_departments' },
               { label: this.$t(`m.common['有效期']`), prop: 'expired_at_display' },
+              { label: this.$t(`m.common['备注']`), prop: 'description' },
               { label: this.$t(`m.common['加入时间']`), prop: 'created_time' },
               { label: this.$t(`m.common['操作-table']`), prop: 'operate' }
             ];
@@ -682,6 +699,7 @@
             return [
               { label: this.$t(`m.memberTemplate['人员模板']`), prop: 'template_name' },
               { label: this.$t(`m.common['有效期']`), prop: 'expired_at_display' },
+              { label: this.$t(`m.common['备注']`), prop: 'description' },
               { label: this.$t(`m.common['加入时间']`), prop: 'created_time' },
               { label: this.$t(`m.common['操作-table']`), prop: 'operate' }
             ];
@@ -692,7 +710,7 @@
 
       getDefaultSelect () {
         const typeMap = {
-          userOrOrg: () => {
+          userOrgPerm: () => {
             return this.groupTabList[0].tableList.length > 0;
           },
           memberTemplate: () => {
@@ -772,7 +790,7 @@
           this.tableLoading = false;
           const emptyField = this.groupTabList.find(item => item.name === this.tabActive);
           if (emptyField) {
-            this.emptyData = _.cloneDeep(Object.assign(this[emptyField.empty], { tipType: this.keyword ? 'search' : '' }));
+            this.emptyData = formatCodeData(0, _.cloneDeep(Object.assign(this[emptyField.empty], { tipType: this.keyword ? 'search' : '' })));
           }
         }
       },
@@ -836,10 +854,10 @@
         this.curMember = {};
         this.currentSelectList = [];
         this.$set(this.groupTabList[0], 'tableList', []);
-        this.$set(this.groupTabList[0], 'tableList', []);
+        this.$set(this.groupTabList[1], 'tableList', []);
         this.resetPagination();
         const tabMap = {
-          userOrOrg: async () => {
+          userOrgPerm: async () => {
             await this.fetchUserOrOrgList();
           },
           memberTemplate: async () => {
@@ -894,7 +912,7 @@
       fetchCustomTotal () {
         this.$nextTick(() => {
           const selectionCount = document.getElementsByClassName('bk-page-selection-count');
-          if (this.$refs.groupMemberRef && selectionCount && selectionCount.length) {
+          if (this.$refs.groupMemberRef && selectionCount && selectionCount.length && selectionCount[0].children) {
             selectionCount[0].children[0].innerHTML = this.currentSelectList.length;
           }
         });
@@ -1339,7 +1357,7 @@
 
       handlePageChange (current) {
         const tabMap = {
-          userOrOrg: () => {
+          userOrgPerm: () => {
             this.userOrOrgPagination = Object.assign(this.userOrOrgPagination, { current });
             this.fetchUserOrOrgList();
           },
@@ -1353,7 +1371,7 @@
 
       handleLimitChange (limit) {
         const tabMap = {
-          userOrOrg: () => {
+          userOrgPerm: () => {
             this.userOrOrgPagination = Object.assign(this.userOrOrgPagination, { current: 1, limit });
             this.fetchUserOrOrgList();
           },
@@ -1413,6 +1431,10 @@
             this.messageSuccess(this.$t(`m.info['移除成功']`), 3000);
             this.handleRefreshTab();
             this.fetchMemberListCount();
+            // 用户/组织模块在模板详情里移除成员需要同步更新加入人员模板的用户组列表数据
+            if (['userOrgPerm'].includes(this.$route.name)) {
+              bus.$emit('on-refresh-template-table', this.curDetailData);
+            }
           }
         } catch (e) {
           console.error(e);
@@ -1451,7 +1473,7 @@
       async fetchMemberListCount () {
         // 搜索移除成员后，再去查询当前搜索的数据是不是最后一条
         if (
-          (['userOrOrg'].includes(this.tabActive) && !this.routeMode)
+          (['userOrgPerm'].includes(this.tabActive) && !this.routeMode)
           && this.getGroupAttributes
           && this.getGroupAttributes().source_from_role
           && this.keyword) {
diff --git a/frontend/src/views/group/create/index.vue b/frontend/src/views/group/create/index.vue
index 3a0ae4fc3..b0884573d 100644
--- a/frontend/src/views/group/create/index.vue
+++ b/frontend/src/views/group/create/index.vue
@@ -279,7 +279,7 @@
        * expandedText
        */
       expandedText () {
-          return this.isAllExpanded ? this.$t(`m.grading['逐项编辑']`) : this.$t(`m.grading['批量编辑']`);
+          return this.isAllExpanded ? this.$t(`m.grading['批量编辑']`) : this.$t(`m.grading['逐项编辑']`);
       },
       members () {
           const arr = [];
@@ -361,7 +361,7 @@
     methods: {
       // 获取分级管理员用户组配置
       async fetchUserGroupSet () {
-        if (!['subset_manager'].includes(this.curRole)) {
+        if (!['subset_manager', 'staff', ''].includes(this.user.role.type)) {
           try {
             const { data } = await this.$store.dispatch('userGroupSetting/getUserGroupSetConfig');
             if (data) {
diff --git a/frontend/src/views/group/detail/group-perm-new.vue b/frontend/src/views/group/detail/group-perm-new.vue
index 94d1921c2..e1e4da13e 100644
--- a/frontend/src/views/group/detail/group-perm-new.vue
+++ b/frontend/src/views/group/detail/group-perm-new.vue
@@ -160,7 +160,7 @@
                 return this.mode === 'edit';
             },
             expandedText () {
-                return this.isAllExpanded ? this.$t(`m.grading['逐项编辑']`) : this.$t(`m.grading['批量编辑']`);
+                return this.isAllExpanded ? this.$t(`m.grading['批量编辑']`) : this.$t(`m.grading['逐项编辑']`);
             },
             canEditGroup () {
                 return this.$route.query.edit === 'GroupEdit';
@@ -235,8 +235,9 @@
       async fetchDetail (payload) {
         if (this.$parent.fetchDetail) {
           const { data } = await this.$parent.fetchDetail(payload);
-          const { attributes, readonly } = data;
+          const { attributes, name, readonly } = data;
           this.readonly = readonly;
+          this.$store.commit('setHeaderTitle', name);
           if (Object.keys(attributes).length) {
             this.groupAttributes = Object.assign(this.groupAttributes, attributes);
           }
diff --git a/frontend/src/views/group/index.vue b/frontend/src/views/group/index.vue
index c60ff24b7..6cc949c84 100644
--- a/frontend/src/views/group/index.vue
+++ b/frontend/src/views/group/index.vue
@@ -535,7 +535,7 @@
 
       // 获取分级管理员用户组配置
       async fetchUserGroupSet () {
-        if (!['subset_manager'].includes(this.curRole)) {
+        if (!['subset_manager', 'staff', ''].includes(this.curRole)) {
           try {
             const { data } = await this.$store.dispatch('userGroupSetting/getUserGroupSetConfig');
             if (data) {
diff --git a/frontend/src/views/manage-spaces/authorization-boundary/edit/first-level.vue b/frontend/src/views/manage-spaces/authorization-boundary/edit/first-level.vue
index 3cda12066..a2a003ede 100644
--- a/frontend/src/views/manage-spaces/authorization-boundary/edit/first-level.vue
+++ b/frontend/src/views/manage-spaces/authorization-boundary/edit/first-level.vue
@@ -296,7 +296,7 @@
                 return tempList;
             },
             expandedText () {
-                return this.isAllExpanded ? this.$t(`m.grading['逐项编辑']`) : this.$t(`m.grading['批量编辑']`);
+                return this.isAllExpanded ? this.$t(`m.grading['批量编辑']`) : this.$t(`m.grading['逐项编辑']`);
             },
             isAggregateDisabled () {
                 return this.policyList.length < 1
diff --git a/frontend/src/views/manage-spaces/authorization-boundary/edit/second-level.vue b/frontend/src/views/manage-spaces/authorization-boundary/edit/second-level.vue
index 96a96b898..c02c17f4b 100644
--- a/frontend/src/views/manage-spaces/authorization-boundary/edit/second-level.vue
+++ b/frontend/src/views/manage-spaces/authorization-boundary/edit/second-level.vue
@@ -192,7 +192,7 @@
                 return tempList;
             },
             expandedText () {
-                return this.isAllExpanded ? this.$t(`m.grading['逐项编辑']`) : this.$t(`m.grading['批量编辑']`);
+                return this.isAllExpanded ? this.$t(`m.grading['批量编辑']`) : this.$t(`m.grading['逐项编辑']`);
             },
             isAggregateDisabled () {
                 return this.policyList.length < 1
diff --git a/frontend/src/views/manage-spaces/first-manage-space/create/index.vue b/frontend/src/views/manage-spaces/first-manage-space/create/index.vue
index 12d228965..7ad3a2fab 100644
--- a/frontend/src/views/manage-spaces/first-manage-space/create/index.vue
+++ b/frontend/src/views/manage-spaces/first-manage-space/create/index.vue
@@ -210,7 +210,7 @@
                 return tempList;
             },
             expandedText () {
-                return this.isAllExpanded ? this.$t(`m.grading['逐项编辑']`) : this.$t(`m.grading['批量编辑']`);
+                return this.isAllExpanded ? this.$t(`m.grading['批量编辑']`) : this.$t(`m.grading['逐项编辑']`);
             },
             isAggregateDisabled () {
                 return this.policyList.length < 1
diff --git a/frontend/src/views/manage-spaces/secondary-manage-space/components/attribute.vue b/frontend/src/views/manage-spaces/secondary-manage-space/components/attribute.vue
index a876f70c3..19af60a0d 100644
--- a/frontend/src/views/manage-spaces/secondary-manage-space/components/attribute.vue
+++ b/frontend/src/views/manage-spaces/secondary-manage-space/components/attribute.vue
@@ -10,7 +10,7 @@
           :clearable="false"
           :disabled="item.disabled || isDisabledMode"
           searchable
-          style="width: 130px;"
+          style="width: 160px;"
           @selected="handleAttributeSelected(...arguments, item)">
           <bk-option v-for="option in list"
             :key="option.id"
@@ -23,7 +23,7 @@
           :ref="`${item.id}&${index}&valueRef`"
           :multiple="true"
           searchable
-          :disabled="item.disabled"
+          :disabled="item.disabled || !item.id"
           :loading="item.loading"
           style="position: relative; left: -1px; width: 330px;"
           :remote-method="handleRemoteValue"
@@ -38,7 +38,7 @@
               <span>{{ option.display_name }}</span>
             </template>
             <template v-else>
-              <div v-bkloading="{ isLoading: true, size: 'mini' }"></div>
+              <div v-bkloading="{ isLoading: item.isScrollRemote, size: 'mini' }" />
             </template>
           </bk-option>
         </bk-select>
@@ -55,6 +55,7 @@
   </div>
 </template>
 <script>
+  import { sleep } from '@/common/util';
   import Attribute from '@/model/attribute';
 
   const ATTRIBUTE_ITEM = {
@@ -105,7 +106,9 @@
           totalPage: 0
         },
         attrValueListMap: {},
-        isDisabledMode: false
+        isDisabledMode: false,
+        curToggleItem: '',
+        curKeyWord: ''
       };
     },
     computed: {
@@ -220,11 +223,11 @@
         item.loading = true;
         try {
           const res = await this.$store.dispatch('permApply/getResourceAttrValues', {
-                        ...this.params,
-                        limit: this.pagination.limit,
-                        offset: this.pagination.limit * (this.pagination.current - 1),
-                        attribute: item.id,
-                        keyword: ''
+            ...this.params,
+            limit: this.pagination.limit,
+            offset: this.pagination.limit * (this.pagination.current - 1),
+            attribute: item.id,
+            keyword: ''
           });
           this.pagination.totalPage = Math.ceil(res.data.count / this.pagination.limit);
           if (this.pagination.totalPage > 1) {
@@ -267,7 +270,7 @@
           payload.name = curAttr.display_name || '';
         }
         if (this.attrValueListMap[payload.id] && this.attrValueListMap[payload.id].length < 1) {
-          this.fetchResourceAttrValues(payload, '', true);
+          this.resetPagination(payload, '', true, false);
         }
       },
 
@@ -280,6 +283,10 @@
         if (val) {
           // 记录当前操作的属性值数据
           this.curOperateData = payload;
+          if ((this.curToggleItem && `${payload.id}&${index}&valueRef` !== this.curToggleItem) || !this.curKeyWord) {
+            this.resetPagination(payload, '', false, false);
+          }
+          this.curToggleItem = `${payload.id}&${index}&valueRef`;
         } else {
           this.curOperateData = {};
           curOptionDom.removeEventListener('scroll', this.handleScroll);
@@ -292,54 +299,68 @@
           this.attrValueListMap[this.curOperateData.id].shift();
           return;
         }
-        if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight) {
+        if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight - 1) {
           ++this.pagination.current;
           if (this.pagination.current <= this.pagination.totalPage) {
-            await this.fetchResourceAttrValues(this.curOperateData, '', false, true);
+            await this.fetchResourceAttrValues(this.curOperateData, this.curKeyWord, false, true);
             event.target.scrollTo(0, event.target.scrollTop - 10);
           }
         }
       },
 
       async handleRemoteValue (val) {
+        this.curKeyWord = val;
         if (this.curOperateData.id) {
-          this.pagination.current = 1;
-          this.pagination.totalPage = 0;
           // 删除loading项
           this.attrValueListMap[this.curOperateData.id].shift();
-          await this.fetchResourceAttrValues(this.curOperateData, val, false);
+          await this.resetPagination(this.curOperateData, val, false, false);
         }
       },
 
       async fetchResourceAttrValues (payload, keyword = '', isLoading = true, isScrollRemote = false) {
         payload.loading = isLoading && !isScrollRemote;
+        payload.isScrollRemote = isScrollRemote;
         const { limit, current } = this.pagination;
         try {
           const res = await this.$store.dispatch('permApply/getResourceAttrValues', {
-                        ...this.params,
-                        limit: limit,
-                        offset: limit * (current - 1),
-                        attribute: payload.id,
-                        keyword
+            ...this.params,
+            limit: limit,
+            offset: limit * (current - 1),
+            attribute: payload.id,
+            keyword
           });
           if (isScrollRemote) {
             const len = this.attrValueListMap[payload.id].length;
-            this.attrValueListMap[payload.id].splice(len - 2, 0, ...res.data.results);
+            this.attrValueListMap[payload.id].splice(len - 1, 0, ...res.data.results);
           } else {
             this.pagination.totalPage = Math.ceil(res.data.count / this.pagination.limit);
             if (this.pagination.totalPage > 1) {
               res.data.results.push(LOADING_ITEM);
+            } else {
+              res.data.results = res.data.results.filter((item) => item.id !== '');
             }
-            this.attrValueListMap[payload.id] = [...res.data.results];
+            this.attrValueListMap[payload.id] = [...res.data.results || []];
           }
         } catch (e) {
           console.error(e);
           this.messageAdvancedError(e);
         } finally {
           payload.loading = false;
+          sleep(300).then(() => {
+            payload.isScrollRemote = false;
+          });
         }
       },
 
+      async resetPagination (payload, keyword = '', isLoading = true, isScrollRemote = false) {
+        this.pagination = Object.assign({
+          limit: 10,
+          current: 1,
+          totalPage: 0
+        });
+        await this.fetchResourceAttrValues(payload, keyword, isLoading, isScrollRemote);
+      },
+
       trigger () {
         this.$emit('on-change', this.attrValues);
       }
diff --git a/frontend/src/views/manage-spaces/secondary-manage-space/create/index.vue b/frontend/src/views/manage-spaces/secondary-manage-space/create/index.vue
index 2ae032893..9f90b1d48 100644
--- a/frontend/src/views/manage-spaces/secondary-manage-space/create/index.vue
+++ b/frontend/src/views/manage-spaces/secondary-manage-space/create/index.vue
@@ -381,7 +381,7 @@
        * expandedText
        */
       expandedText () {
-          return this.isAllExpanded ? this.$t(`m.grading['逐项编辑']`) : this.$t(`m.grading['批量编辑']`);
+          return this.isAllExpanded ? this.$t(`m.grading['批量编辑']`) : this.$t(`m.grading['逐项编辑']`);
       },
       members () {
           const arr = [];
diff --git a/frontend/src/views/member-template/components/associate-user-group.vue b/frontend/src/views/member-template/components/associate-user-group.vue
index cdd47dc50..37e88cd48 100644
--- a/frontend/src/views/member-template/components/associate-user-group.vue
+++ b/frontend/src/views/member-template/components/associate-user-group.vue
@@ -173,6 +173,10 @@
               }
             };
             bus.$emit('on-related-change', params);
+            // 用户/组织模块在模板详情里解除关联用户组需要同步更新各种方式加入的用户组权限
+            if (['userOrgPerm'].includes(this.$route.name)) {
+              bus.$emit('on-refresh-template-table', params);
+            }
           }
         } catch (e) {
           this.messageAdvancedError(e);
diff --git a/frontend/src/views/member-template/components/basic-info-detail.vue b/frontend/src/views/member-template/components/basic-info-detail.vue
index 7852c5b91..e0c6a48cd 100644
--- a/frontend/src/views/member-template/components/basic-info-detail.vue
+++ b/frontend/src/views/member-template/components/basic-info-detail.vue
@@ -117,7 +117,7 @@
             name,
             description
           });
-          bus.$emit('on-info-change', { id, name, description });
+          bus.$emit('on-info-change', { id, name, description, mode: this.curDetailData.mode || '' });
         } catch (e) {
           console.warn('error');
           this.messageAdvancedError(e);
diff --git a/frontend/src/views/member-template/components/template-member-table.vue b/frontend/src/views/member-template/components/template-member-table.vue
index dc265242f..8f62ea4fb 100644
--- a/frontend/src/views/member-template/components/template-member-table.vue
+++ b/frontend/src/views/member-template/components/template-member-table.vue
@@ -13,6 +13,7 @@
       :name="curDetailData.name"
       :search-placeholder="placeholder"
       :read-only="curDetailData.readonly"
+      :cur-detail-data="curDetailData"
       :is-show-tab="false"
       :show-expired-at="false"
       :display-set="displaySet"
diff --git a/frontend/src/views/member-template/index.vue b/frontend/src/views/member-template/index.vue
index e1ac2f357..ea619a96b 100644
--- a/frontend/src/views/member-template/index.vue
+++ b/frontend/src/views/member-template/index.vue
@@ -292,12 +292,19 @@
           this.curRole = value.role.type || 'staff';
         },
         immediate: true
+      },
+      '$route': {
+        handler (value) {
+    
+        },
+        immediate: true
       }
     },
     async created () {
       window.addEventListener('resize', () => {
         this.tableHeight = getWindowHeight() - 185;
       });
+      this.handleFilterSearchByOther();
       await this.fetchMemberTemplateList(true);
     },
     mounted () {
@@ -333,7 +340,7 @@
           const params = {
             page: current,
             page_size: limit,
-          ...this.searchParams
+            ...this.searchParams
           };
           const { data } = await this.$store.dispatch('memberTemplate/getSubjectTemplateList', params);
           const { count, results } = data;
@@ -352,6 +359,7 @@
             }
           });
           this.fetchSelectedGroupCount();
+          this.handleOpenDetail();
         } catch (e) {
           console.error(e);
         } finally {
@@ -359,7 +367,39 @@
         }
       },
 
+      // 处理从其他页面传递参数进行数据过滤
+      handleFilterSearchByOther () {
+        if (this.$route.query.template_name) {
+          this.searchParams.name = this.$route.query.template_name;
+          this.searchValue.push({
+            id: 'name',
+            name: this.$t(`m.memberTemplate['模板名称']`),
+            values: [{
+              id: this.searchParams.name,
+              name: this.searchParams.name
+            }]
+          });
+        }
+      },
+
+      // 处理从人员模板加入的用户组跳转
+      handleOpenDetail () {
+        const { template_name: templateName, tab_active: tabActive } = this.$route.query;
+        if (this.memberTemplateList.length && templateName && tabActive) {
+          this.curDetailData = Object.assign(
+            {},
+            {
+                ...this.memberTemplateList[0],
+                ...{
+                  tabActive
+                }
+            });
+          this.isShowDetailSlider = true;
+        }
+      },
+
       async handleSearch (payload, result) {
+        console.log(payload, result);
         this.searchParams = payload;
         this.searchList = result;
         this.emptyData.tipType = 'search';
@@ -562,7 +602,7 @@
       fetchSelectedGroupCount () {
         this.$nextTick(() => {
           const selectionCount = document.getElementsByClassName('bk-page-selection-count');
-          if (this.$refs.memberTemplateRef && selectionCount) {
+          if (this.$refs.memberTemplateRef && selectionCount && selectionCount.length && selectionCount[0].children) {
             selectionCount[0].children[0].innerHTML = this.currentSelectList.length;
           }
         });
diff --git a/frontend/src/views/my-manage-space/add-member-boundary/index.vue b/frontend/src/views/my-manage-space/add-member-boundary/index.vue
index e9819a201..40f9b7add 100644
--- a/frontend/src/views/my-manage-space/add-member-boundary/index.vue
+++ b/frontend/src/views/my-manage-space/add-member-boundary/index.vue
@@ -932,7 +932,7 @@
         for (let i = 0; i < manualInputValue.length; i++) {
           const params = {
             keyword: manualInputValue[i],
-            is_exact: false
+            is_exact: true
           };
           try {
             if (manualInputValue.length < 10) {
diff --git a/frontend/src/views/my-manage-space/create/index.vue b/frontend/src/views/my-manage-space/create/index.vue
index 2b19fcabf..7de196cca 100644
--- a/frontend/src/views/my-manage-space/create/index.vue
+++ b/frontend/src/views/my-manage-space/create/index.vue
@@ -291,7 +291,7 @@
                 return tempList;
             },
             expandedText () {
-                return this.isAllExpanded ? this.$t(`m.grading['逐项编辑']`) : this.$t(`m.grading['批量编辑']`);
+                return this.isAllExpanded ? this.$t(`m.grading['批量编辑']`) : this.$t(`m.grading['逐项编辑']`);
             },
             isAggregateDisabled () {
                 return this.policyList.length < 1
diff --git a/frontend/src/views/my-manage-space/index.vue b/frontend/src/views/my-manage-space/index.vue
index 74dd95537..34d1ca2ce 100644
--- a/frontend/src/views/my-manage-space/index.vue
+++ b/frontend/src/views/my-manage-space/index.vue
@@ -8,7 +8,7 @@
       >
         {{ $t(`m.common['申请新建']`) }}
       </bk-button>
-      <bk-link class="AdminLink" theme="primary" @click="handleOpenDocu">
+      <bk-link class="admin-link" theme="primary" @click="handleOpenDocu">
         <span class="linkText">{{ $t('m.common["什么是管理空间"]') }}</span>
       </bk-link>
       <div slot="right">
@@ -55,7 +55,7 @@
       @expand-change="handleExpandChange"
       v-bkloading="{ isLoading: tableLoading, opacity: 1 }"
     >
-      <bk-table-column type="expand" width="30">
+      <bk-table-column type="expand" width="30" fixed="left">
         <template slot-scope="{ row }">
           <bk-table
             size="small"
@@ -68,8 +68,8 @@
             v-bkloading="{ isLoading: subLoading, opacity: 1 }"
             @row-click="handleRowClick"
           >
-            <bk-table-column width="45" />
-            <bk-table-column prop="name" width="225">
+            <bk-table-column width="45" fixed="left" />
+            <bk-table-column prop="name" :min-width="190" fixed="left">
               <template slot-scope="child">
                 <div class="flex_space_name">
                   <Icon type="level-two-manage-space" :style="{ color: iconColor[1] }" />
@@ -96,7 +96,7 @@
                 />
               </template>
             </bk-table-column>
-            <bk-table-column prop="description" width="300">
+            <bk-table-column prop="description" :min-width="200">
               <template slot-scope="child">
                 <iam-edit-textarea
                   field="description"
@@ -108,16 +108,13 @@
                 />
               </template>
             </bk-table-column>
-            <bk-table-column
-              :label="$t(`m.levelSpace['更新人']`)"
-              prop="updater"
-            ></bk-table-column>
-            <bk-table-column :label="$t(`m.levelSpace['更新时间']`)" prop="updated_time" width="240">
+            <bk-table-column :label="$t(`m.levelSpace['更新人']`)" prop="updater" />
+            <bk-table-column :label="$t(`m.levelSpace['更新时间']`)" prop="updated_time" width="160">
               <template slot-scope="child">
                 <span :title="child.row.updated_time">{{ child.row.updated_time }}</span>
               </template>
             </bk-table-column>
-            <bk-table-column :width="curLanguageIsCn ? 240 : 320">
+            <bk-table-column :width="curLanguageIsCn ? 180 : 210" prop="child-operate">
               <template slot-scope="child">
                 <div class="operate_btn">
                   <bk-button
@@ -134,20 +131,35 @@
                   >
                     {{ $t(`m.nav['授权边界']`) }}
                   </bk-button>
-                  <bk-button
-                    theme="primary"
-                    text
-                    :disabled="!!(child.row.members && child.row.members.length < 2)"
-                    :title="!!(child.row.members && child.row.members.length < 2) ? $t(`m.perm['唯一管理员不可退出']`) : ''"
-                    @click.stop="handleSubView(child.row, child.$index, row, 'quit')"
+                  <bk-popover
+                    class="custom-table-dot-menu"
+                    ext-cls="custom-table-dot-menu-tipper"
+                    placement="bottom-start"
+                    theme="dot-menu light"
+                    trigger="click"
+                    :arrow="false"
+                    :offset="15"
+                    :distance="0"
                   >
-                    {{ $t(`m.common['退出']`) }}
-                  </bk-button>
-                  <!--<bk-button theme="primary" text @click.stop="handleSubView(child.row, 'clone')">
-                                        {{ $t(`m.levelSpace['克隆']`) }}
-                                    </bk-button> -->
+                    <span class="custom-table-dot-menu-trigger" />
+                    <ul class="custom-table-dot-menu-list" slot="content">
+                      <li class="custom-table-dot-menu-item">
+                        <bk-button
+                          theme="primary"
+                          text
+                          :disabled="!!(child.row.members && child.row.members.length < 2)"
+                          :title="!!(child.row.members && child.row.members.length < 2)
+                            ? $t(`m.perm['唯一管理员不可退出']`) : ''"
+                          @click.stop="handleSubView(child.row, child.$index, row, 'quit')"
+                        >
+                          {{ $t(`m.common['退出']`) }}
+                        </bk-button>
+                      </li>
+                    </ul>
+                  </bk-popover>
                 </div>
               </template>
+              
             </bk-table-column>
             <template slot="empty">
               <ExceptionEmpty
@@ -174,7 +186,7 @@
           </div>
         </template>
       </bk-table-column>
-      <bk-table-column :label="$t(`m.levelSpace['名称']`)" prop="name" width="240">
+      <bk-table-column :label="$t(`m.levelSpace['名称']`)" prop="name" :min-width="200" fixed="left">
         <template slot-scope="{ row, $index }">
           <div class="flex_space_name">
             <Icon
@@ -196,9 +208,6 @@
       </bk-table-column>
       <bk-table-column :label="$t(`m.levelSpace['管理员']`)" prop="members" width="300">
         <template slot-scope="{ row, $index }">
-          <!-- <bk-tag v-for="(tag, index) of row.members" :key="index">
-                        {{tag.username}}
-                    </bk-tag> -->
           <iam-edit-member-selector
             field="members"
             width="200"
@@ -210,11 +219,8 @@
           />
         </template>
       </bk-table-column>
-      <bk-table-column :label="$t(`m.common['描述']`)" prop="description" width="300">
+      <bk-table-column :label="$t(`m.common['描述']`)" prop="description" :min-width="200">
         <template slot-scope="{ row, $index }">
-          <!-- <span
-                        v-bk-tooltips.top="{ content: row.description, extCls: 'iam-tooltips-cls' }"
-                        :title="row.description">{{ row.description || '--' }}</span> -->
           <iam-edit-textarea
             field="description"
             width="300"
@@ -226,16 +232,17 @@
           />
         </template>
       </bk-table-column>
-      <bk-table-column
-        :label="$t(`m.levelSpace['更新人']`)"
-        prop="updater"
-      ></bk-table-column>
-      <bk-table-column :label="$t(`m.levelSpace['更新时间']`)" prop="updated_time" width="240">
+      <bk-table-column :label="$t(`m.levelSpace['更新人']`)" prop="updater" />
+      <bk-table-column :label="$t(`m.levelSpace['更新时间']`)" prop="updated_time" width="160">
         <template slot-scope="{ row }">
           <span :title="row.updated_time">{{ row.updated_time }}</span>
         </template>
       </bk-table-column>
-      <bk-table-column :label="$t(`m.common['操作-table']`)" :width="curLanguageIsCn ? 240 : 320">
+      <bk-table-column
+        :label="$t(`m.common['操作-table']`)"
+        :width="curLanguageIsCn ? 180 : 210"
+        :fixed="tableList.length > 0 ? 'right' : false"
+      >
         <template slot-scope="{ row, $index }">
           <div class="operate_btn">
             <bk-button
@@ -252,33 +259,41 @@
             >
               {{ $t(`m.nav['授权边界']`) }}
             </bk-button>
-            <!-- <bk-button
-              v-if="!['subset_manager'].includes(row.type)"
-              theme="primary"
-              text
-              @click="handleView(row, 'clone')"
-              :title="disabledPerm(row) ? $t(`m.verify['需添加当前用户为管理员']`) : ''"
-              :disabled="disabledPerm(row)"
-            >
-              {{ $t(`m.levelSpace['克隆']`) }}
-            </bk-button> -->
-            <bk-button
-              theme="primary"
-              text
-              :disabled="!!(row.members && row.members.length < 2)"
-              :title="!!(row.members && row.members.length < 2) ? $t(`m.perm['唯一管理员不可退出']`) : ''"
-              @click="handleView(row, $index, 'quit')"
-            >
-              {{ $t(`m.common['退出']`) }}
-            </bk-button>
-            <bk-button
-              v-if="!['subset_manager'].includes(row.type)"
-              theme="primary"
-              text
-              @click="handleView(row, $index, 'clone')"
+            <bk-popover
+              class="custom-table-dot-menu"
+              ext-cls="custom-table-dot-menu-tipper"
+              placement="bottom-start"
+              theme="dot-menu light"
+              trigger="click"
+              :arrow="false"
+              :offset="15"
+              :distance="0"
             >
-              {{ $t(`m.levelSpace['克隆']`) }}
-            </bk-button>
+              <span class="custom-table-dot-menu-trigger" />
+              <ul class="custom-table-dot-menu-list" slot="content">
+                <li class="custom-table-dot-menu-item">
+                  <bk-button
+                    theme="primary"
+                    text
+                    :disabled="!!(row.members && row.members.length < 2)"
+                    :title="!!(row.members && row.members.length < 2) ? $t(`m.perm['唯一管理员不可退出']`) : ''"
+                    @click.stop="handleView(row, $index, 'quit')"
+                  >
+                    {{ $t(`m.common['退出']`) }}
+                  </bk-button>
+                </li>
+                <li class="custom-table-dot-menu-item">
+                  <bk-button
+                    v-if="!['subset_manager'].includes(row.type)"
+                    theme="primary"
+                    text
+                    @click.stop="handleView(row, $index, 'clone')"
+                  >
+                    {{ $t(`m.levelSpace['克隆']`) }}
+                  </bk-button>
+                </li>
+              </ul>
+            </bk-popover>
           </div>
         </template>
       </bk-table-column>
@@ -422,13 +437,13 @@
       },
 
       getCellClass ({ row, column, rowIndex, columnIndex }) {
-        // if (row.is_member) {
-        //   return !this.isFilter ? 'iam-tag-table-cell-cls iam-tag-table-cell-opacity-cls' : 'iam-tag-table-cell-cls';
+        // if (!row.is_member) {
+        //     return 'iam-tag-table-cell-cls iam-tag-table-cell-opacity-cls';
         // }
-        if (!row.has_subset_manager) {
+        if (!row.has_subset_manager && !['right'].includes(column.fixed)) {
           return 'iam-tag-table-cell-cls iam-tag-table-cell-subset-cls';
         }
-        if (columnIndex === 1 || column.type === 'default') {
+        if ((columnIndex === 1 || column.type === 'default') && !['right'].includes(column.fixed)) {
           return 'iam-table-cell-1-cls';
         }
         if (columnIndex === 2) {
@@ -438,7 +453,7 @@
       },
 
       getSubCellClass ({ row, column, rowIndex, columnIndex }) {
-        return 'iam-table-cell-1-cls';
+        return !['child-operate'].includes(column.property) ? 'iam-table-cell-1-cls' : '';
       },
 
       // 通过子集id找父级数据
@@ -462,17 +477,6 @@
         return false;
       },
 
-      // handleSearch () {
-      //     if (!this.searchValue) {
-      //         return;
-      //     }
-      //     this.isFilter = true;
-      //     this.emptyData.tipType = 'search';
-      //     this.resetPagination();
-      //     this.resetSubPagination();
-      //     this.fetchGradingAdmin(true);
-      // },
-
       async handleSelectSearch (payload, result) {
         const {
           name,
@@ -605,6 +609,9 @@
             this.fetchSubManagerList(row);
           }
         });
+        this.$nextTick(() => {
+          this.$refs.spaceTable && this.$refs.spaceTable.doLayout();
+        });
       },
 
       async fetchGradingAdmin (isTableLoading = false) {
@@ -969,30 +976,31 @@
   };
 </script>
 
+<style lang="postcss">
+@import '@/css/mixins/custom-table-dot.css';
+</style>
+
 <style lang="postcss" scoped>
 @import '@/css/mixins/custom-delete-action.css';
 .iam-level-manage-space-wrapper {
   .level-manage-table {
     margin-top: 16px;
   }
+
   .right-form {
     display: flex;
   }
 
-  .AdminLink {
+  .admin-link {
     margin-left: 10px;
     .linkText {
         font-size: 12px
     }
   }
-  /deep/ .flex_space_name {
-    display: flex;
-    align-items: center;
-  }
 
   .operate_btn {
     .bk-button-text {
-      &:nth-child(n + 2) {
+      &:nth-child(n+2) {
         margin-left: 10px;
       }
     }
@@ -1004,6 +1012,11 @@
     }
   }
 
+  /deep/ .flex_space_name {
+    display: flex;
+    align-items: center;
+  }
+
   /deep/ .bk-table-expanded-cell {
     padding: 0 !important;
 
@@ -1030,20 +1043,6 @@
     }
   }
 
-  /* /deep/ .iam-tag-table-cell-opacity-cls {
-    opacity: 0.6;
-    .cell {
-      padding-left: 0;
-    }
-    &:last-child {
-        .operate_btn {
-            .bk-button-text.is-disabled {
-                color: #999999;
-            }
-        }
-    }
-  } */
-
   /deep/ .iam-tag-table-cell-subset-cls {
     .cell {
       .bk-table-expand-icon {
@@ -1053,39 +1052,39 @@
   }
 
   /deep/ .iam-table-cell-1-cls, .iam-tag-table-cell-subset-cls  {
-        .cell {
-            padding-left: 2px;
-        }
+    .cell {
+        padding-left: 2px;
     }
+  }
 
-    /deep/ .iam-tag-table-cell-subset-cls {
-        .cell {
-            padding-left: 2px;
-            .bk-table-expand-icon  {
-                display: none;
-            }
+  /deep/ .iam-tag-table-cell-subset-cls {
+    .cell {
+        padding-left: 2px;
+        .bk-table-expand-icon  {
+            display: none;
         }
     }
+  }
 
-    /deep/ .bk-table-header-wrapper {
-        .cell {
-            padding-left: 2px;
-        }
+  /deep/ .bk-table-header-wrapper {
+    .cell {
+        padding-left: 2px;
     }
+  }
 
-    /deep/ .search-manage-table {
-        .bk-table-expand-icon  {
-            display: none;
-        }
-        .iam-tag-table-cell-cls {
-            .cell {
-                padding-left: 0;
-            }
-        }
-        .bk-table .cell {
-            padding-left: 2px;
+  /deep/ .search-manage-table {
+    .bk-table-expand-icon  {
+        display: none;
+    }
+    .iam-tag-table-cell-cls {
+        .cell {
+            padding-left: 0;
         }
     }
+    .bk-table .cell {
+        padding-left: 2px;
+    }
+  }
 }
 
 /deep/ .custom-perm-del-info {
@@ -1093,4 +1092,25 @@
     padding: 0 65px 33px !important;
   }
 }
+
+/deep/ .bk-table-fixed,
+/deep/ .bk-table-fixed-right {
+  border-bottom: 0;
+}
+
+/deep/ .children-expand-cls {
+  .bk-table-fixed {
+    .bk-table-fixed-body-wrapper {
+      z-index: 900;
+    }
+  }
+  .bk-table-fixed-right {
+    .bk-table__fixed-body-wrapper{
+      z-index: 900;
+    }
+  }
+  .bk-table-body-wrapper {
+    z-index: 800;
+  }
+}
 </style>
diff --git a/frontend/src/views/perm-apply/apply-custom-perm/index.vue b/frontend/src/views/perm-apply/apply-custom-perm/index.vue
index 4c47284e3..ea64231b0 100644
--- a/frontend/src/views/perm-apply/apply-custom-perm/index.vue
+++ b/frontend/src/views/perm-apply/apply-custom-perm/index.vue
@@ -243,7 +243,7 @@
                   :disabled="isAggregateDisabled"
                   @change="handleAggregateActionChange">
                 </bk-switcher>
-                <span class="expanded-text">{{ isAllExpanded ? $t(`m.grading['逐项编辑']`) : $t(`m.grading['批量编辑']`) }}</span>
+                <span class="expanded-text">{{ isAllExpanded ? $t(`m.grading['批量编辑']`) : $t(`m.grading['逐项编辑']`) }}</span>
               </div>
             </div>
           </div>
diff --git a/frontend/src/views/perm-apply/components/attribute.vue b/frontend/src/views/perm-apply/components/attribute.vue
index 150a186e4..299d53201 100644
--- a/frontend/src/views/perm-apply/components/attribute.vue
+++ b/frontend/src/views/perm-apply/components/attribute.vue
@@ -10,7 +10,7 @@
           :clearable="false"
           :disabled="item.disabled"
           searchable
-          style="width: 130px;"
+          style="width: 160px;"
           @selected="handleAttributeSelected(...arguments, item)">
           <bk-option v-for="option in list"
             :key="option.id"
@@ -23,14 +23,15 @@
           :ref="`${item.id}&${index}&valueRef`"
           :multiple="true"
           searchable
-          :disabled="item.disabled"
+          :disabled="item.disabled || !item.id"
           :loading="item.loading"
           style="position: relative; left: -1px; width: 330px;"
           :remote-method="handleRemoteValue"
           @clear="handleClear(...arguments, item)"
           @toggle="handleAttrValueToggle(...arguments, index, item)"
           @selected="handleAttrValueSelected(...arguments, item)">
-          <bk-option v-for="option in attrValueListMap[item.id]"
+          <bk-option
+            v-for="option in attrValueListMap[item.id]"
             :key="option.id"
             :id="option.id"
             :name="option.display_name">
@@ -38,7 +39,7 @@
               <span>{{ option.display_name }}</span>
             </template>
             <template v-else>
-              <div v-bkloading="{ isLoading: true, size: 'mini' }"></div>
+              <div v-bkloading="{ isLoading: item.isScrollRemote, size: 'mini' }"></div>
             </template>
           </bk-option>
         </bk-select>
@@ -56,6 +57,7 @@
 </template>
 <script>
   import _ from 'lodash';
+  import { sleep } from '@/common/util';
   import Attribute from '@/model/attribute';
 
   const ATTRIBUTE_ITEM = {
@@ -95,7 +97,9 @@
           current: 1,
           totalPage: 0
         },
-        attrValueListMap: {}
+        attrValueListMap: {},
+        curToggleItem: '',
+        curKeyWord: ''
       };
     },
     watch: {
@@ -155,11 +159,11 @@
         item.loading = true;
         try {
           const res = await this.$store.dispatch('permApply/getResourceAttrValues', {
-                        ...this.params,
-                        limit: this.pagination.limit,
-                        offset: this.pagination.limit * (this.pagination.current - 1),
-                        attribute: item.id,
-                        keyword: ''
+            ...this.params,
+            limit: this.pagination.limit,
+            offset: this.pagination.limit * (this.pagination.current - 1),
+            attribute: item.id,
+            keyword: ''
           });
           this.pagination.totalPage = Math.ceil(res.data.count / this.pagination.limit);
           if (this.pagination.totalPage > 1) {
@@ -195,7 +199,7 @@
           payload.name = curAttr.display_name || '';
         }
         if (this.attrValueListMap[payload.id] && this.attrValueListMap[payload.id].length < 1) {
-          this.fetchResourceAttrValues(payload, '', true);
+          this.resetPagination(payload, '', true, false);
         }
       },
 
@@ -205,6 +209,11 @@
         if (val) {
           // 记录当前操作的属性值数据
           this.curOperateData = payload;
+          // 处理多个下拉框切换或者搜索数据后重新打开下拉框需要重置分页数据
+          if ((this.curToggleItem && `${payload.id}&${index}&valueRef` !== this.curToggleItem) || !this.curKeyWord) {
+            this.resetPagination(payload, '', false, false);
+          }
+          this.curToggleItem = `${payload.id}&${index}&valueRef`;
         } else {
           this.curOperateData = {};
           curOptionDom.removeEventListener('scroll', this.handleScroll);
@@ -212,7 +221,7 @@
       },
 
       async handleScroll (event) {
-        if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight) {
+        if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight - 1) {
           ++this.pagination.current;
           if (this.pagination.current > this.pagination.totalPage) {
             this.pagination.current = this.pagination.totalPage;
@@ -228,15 +237,14 @@
             }
             return;
           }
-          await this.fetchResourceAttrValues(this.curOperateData, '', false, true);
+          await this.fetchResourceAttrValues(this.curOperateData, this.curKeyWord, false, true);
           event.target.scrollTo(0, event.target.scrollTop - 10);
         }
       },
 
       async handleRemoteValue (val) {
+        this.curKeyWord = val;
         if (this.curOperateData.id) {
-          this.pagination.current = 1;
-          this.pagination.totalPage = 0;
           const loadItemIndex = this.attrValueListMap[this.curOperateData.id].findIndex(
             item => item.id === '' && item.display_name === ''
           );
@@ -246,28 +254,31 @@
               this.attrValueListMap[this.curOperateData.id].slice(0, loadItemIndex)
             );
           }
-          await this.fetchResourceAttrValues(this.curOperateData, val, false);
+          await this.resetPagination(this.curOperateData, val, false, false);
         }
       },
 
       async fetchResourceAttrValues (payload, keyword = '', isLoading = true, isScrollRemote = false) {
         payload.loading = isLoading && !isScrollRemote;
+        payload.isScrollRemote = isScrollRemote;
         const { limit, current } = this.pagination;
         try {
           const res = await this.$store.dispatch('permApply/getResourceAttrValues', {
-                        ...this.params,
-                        limit: limit,
-                        offset: limit * (current - 1),
-                        attribute: payload.id,
-                        keyword
+              ...this.params,
+              limit: limit,
+              offset: limit * (current - 1),
+              attribute: payload.id,
+              keyword
           });
           if (isScrollRemote) {
             const len = this.attrValueListMap[payload.id].length;
-            this.attrValueListMap[payload.id].splice(len - 2, 0, ...res.data.results);
+            this.attrValueListMap[payload.id].splice(len - 1, 0, ...res.data.results);
           } else {
             this.pagination.totalPage = Math.ceil(res.data.count / this.pagination.limit);
             if (this.pagination.totalPage > 1) {
               res.data.results.push(LOADING_ITEM);
+            } else {
+              res.data.results = res.data.results.filter((item) => item.id !== '');
             }
             this.attrValueListMap[payload.id] = _.cloneDeep(res.data.results);
           }
@@ -276,9 +287,21 @@
           this.messageAdvancedError(e);
         } finally {
           payload.loading = false;
+          sleep(300).then(() => {
+            payload.isScrollRemote = false;
+          });
         }
       },
 
+      async resetPagination (payload, keyword = '', isLoading = true, isScrollRemote = false) {
+        this.pagination = Object.assign({
+          limit: 10,
+          current: 1,
+          totalPage: 0
+        });
+        await this.fetchResourceAttrValues(payload, keyword, isLoading, isScrollRemote);
+      },
+
       trigger () {
         this.$emit('on-change', this.attrValues);
       }
diff --git a/frontend/src/views/perm-template/components/attribute.vue b/frontend/src/views/perm-template/components/attribute.vue
index a876f70c3..2fffdfb13 100644
--- a/frontend/src/views/perm-template/components/attribute.vue
+++ b/frontend/src/views/perm-template/components/attribute.vue
@@ -10,7 +10,7 @@
           :clearable="false"
           :disabled="item.disabled || isDisabledMode"
           searchable
-          style="width: 130px;"
+          style="width: 160px;"
           @selected="handleAttributeSelected(...arguments, item)">
           <bk-option v-for="option in list"
             :key="option.id"
@@ -38,7 +38,7 @@
               <span>{{ option.display_name }}</span>
             </template>
             <template v-else>
-              <div v-bkloading="{ isLoading: true, size: 'mini' }"></div>
+              <div v-bkloading="{ isLoading: item.isScrollRemote, size: 'mini' }"></div>
             </template>
           </bk-option>
         </bk-select>
@@ -55,6 +55,8 @@
   </div>
 </template>
 <script>
+  import _ from 'lodash';
+  import { sleep } from '@/common/util';
   import Attribute from '@/model/attribute';
 
   const ATTRIBUTE_ITEM = {
@@ -105,7 +107,9 @@
           totalPage: 0
         },
         attrValueListMap: {},
-        isDisabledMode: false
+        isDisabledMode: false,
+        curToggleItem: '',
+        curKeyWord: ''
       };
     },
     computed: {
@@ -220,11 +224,11 @@
         item.loading = true;
         try {
           const res = await this.$store.dispatch('permApply/getResourceAttrValues', {
-                        ...this.params,
-                        limit: this.pagination.limit,
-                        offset: this.pagination.limit * (this.pagination.current - 1),
-                        attribute: item.id,
-                        keyword: ''
+            ...this.params,
+            limit: this.pagination.limit,
+            offset: this.pagination.limit * (this.pagination.current - 1),
+            attribute: item.id,
+            keyword: ''
           });
           this.pagination.totalPage = Math.ceil(res.data.count / this.pagination.limit);
           if (this.pagination.totalPage > 1) {
@@ -267,7 +271,7 @@
           payload.name = curAttr.display_name || '';
         }
         if (this.attrValueListMap[payload.id] && this.attrValueListMap[payload.id].length < 1) {
-          this.fetchResourceAttrValues(payload, '', true);
+          this.resetPagination(payload, '', true, false);
         }
       },
 
@@ -280,6 +284,10 @@
         if (val) {
           // 记录当前操作的属性值数据
           this.curOperateData = payload;
+          if ((this.curToggleItem && `${payload.id}&${index}&valueRef` !== this.curToggleItem) || !this.curKeyWord) {
+            this.resetPagination(payload, '', false, false);
+          }
+          this.curToggleItem = `${payload.id}&${index}&valueRef`;
         } else {
           this.curOperateData = {};
           curOptionDom.removeEventListener('scroll', this.handleScroll);
@@ -292,54 +300,68 @@
           this.attrValueListMap[this.curOperateData.id].shift();
           return;
         }
-        if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight) {
+        if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight - 1) {
           ++this.pagination.current;
           if (this.pagination.current <= this.pagination.totalPage) {
-            await this.fetchResourceAttrValues(this.curOperateData, '', false, true);
+            await this.fetchResourceAttrValues(this.curOperateData, this.curKeyWord, false, true);
             event.target.scrollTo(0, event.target.scrollTop - 10);
           }
         }
       },
 
       async handleRemoteValue (val) {
+        this.curKeyWord = val;
         if (this.curOperateData.id) {
-          this.pagination.current = 1;
-          this.pagination.totalPage = 0;
           // 删除loading项
           this.attrValueListMap[this.curOperateData.id].shift();
-          await this.fetchResourceAttrValues(this.curOperateData, val, false);
+          await this.resetPagination(this.curOperateData, val, false, false);
         }
       },
 
       async fetchResourceAttrValues (payload, keyword = '', isLoading = true, isScrollRemote = false) {
         payload.loading = isLoading && !isScrollRemote;
+        payload.isScrollRemote = isScrollRemote;
         const { limit, current } = this.pagination;
         try {
           const res = await this.$store.dispatch('permApply/getResourceAttrValues', {
-                        ...this.params,
-                        limit: limit,
-                        offset: limit * (current - 1),
-                        attribute: payload.id,
-                        keyword
+            ...this.params,
+            limit: limit,
+            offset: limit * (current - 1),
+            attribute: payload.id,
+            keyword
           });
           if (isScrollRemote) {
             const len = this.attrValueListMap[payload.id].length;
-            this.attrValueListMap[payload.id].splice(len - 2, 0, ...res.data.results);
+            this.attrValueListMap[payload.id].splice(len - 1, 0, ...res.data.results);
           } else {
             this.pagination.totalPage = Math.ceil(res.data.count / this.pagination.limit);
             if (this.pagination.totalPage > 1) {
               res.data.results.push(LOADING_ITEM);
+            } else {
+              res.data.results = res.data.results.filter((item) => item.id !== '');
             }
-            this.attrValueListMap[payload.id] = [...res.data.results];
+            this.attrValueListMap[payload.id] = _.cloneDeep(res.data.results);
           }
         } catch (e) {
           console.error(e);
           this.messageAdvancedError(e);
         } finally {
           payload.loading = false;
+          sleep(300).then(() => {
+            payload.isScrollRemote = false;
+          });
         }
       },
 
+      async resetPagination (payload, keyword = '', isLoading = true, isScrollRemote = false) {
+        this.pagination = Object.assign({
+          limit: 10,
+          current: 1,
+          totalPage: 0
+        });
+        await this.fetchResourceAttrValues(payload, keyword, isLoading, isScrollRemote);
+      },
+
       trigger () {
         this.$emit('on-change', this.attrValues);
       }
diff --git a/frontend/src/views/perm/group-perm/index.vue b/frontend/src/views/perm/group-perm/index.vue
index a738d4ef5..1f6a72a9b 100644
--- a/frontend/src/views/perm/group-perm/index.vue
+++ b/frontend/src/views/perm/group-perm/index.vue
@@ -413,7 +413,7 @@
       fetchSelectedGroupCount () {
         this.$nextTick(() => {
           const selectionCount = document.getElementsByClassName('bk-page-selection-count');
-          if (this.$refs.groupPermTableRef && selectionCount) {
+          if (this.$refs.groupPermTableRef && selectionCount && selectionCount.length && selectionCount[0].children) {
             selectionCount[0].children[0].innerHTML = this.currentSelectGroupList.length;
           }
         });
diff --git a/frontend/src/views/resource-permiss/components/attribute.vue b/frontend/src/views/resource-permiss/components/attribute.vue
index 150a186e4..0ace182d5 100644
--- a/frontend/src/views/resource-permiss/components/attribute.vue
+++ b/frontend/src/views/resource-permiss/components/attribute.vue
@@ -10,7 +10,7 @@
           :clearable="false"
           :disabled="item.disabled"
           searchable
-          style="width: 130px;"
+          style="width: 160px;"
           @selected="handleAttributeSelected(...arguments, item)">
           <bk-option v-for="option in list"
             :key="option.id"
@@ -23,7 +23,7 @@
           :ref="`${item.id}&${index}&valueRef`"
           :multiple="true"
           searchable
-          :disabled="item.disabled"
+          :disabled="item.disabled || !item.id"
           :loading="item.loading"
           style="position: relative; left: -1px; width: 330px;"
           :remote-method="handleRemoteValue"
@@ -38,7 +38,7 @@
               <span>{{ option.display_name }}</span>
             </template>
             <template v-else>
-              <div v-bkloading="{ isLoading: true, size: 'mini' }"></div>
+              <div v-bkloading="{ isLoading: item.isScrollRemote, size: 'mini' }"></div>
             </template>
           </bk-option>
         </bk-select>
@@ -56,6 +56,7 @@
 </template>
 <script>
   import _ from 'lodash';
+  import { sleep } from '@/common/util';
   import Attribute from '@/model/attribute';
 
   const ATTRIBUTE_ITEM = {
@@ -95,7 +96,9 @@
           current: 1,
           totalPage: 0
         },
-        attrValueListMap: {}
+        attrValueListMap: {},
+        curToggleItem: '',
+        curKeyWord: ''
       };
     },
     watch: {
@@ -155,15 +158,17 @@
         item.loading = true;
         try {
           const res = await this.$store.dispatch('permApply/getResourceAttrValues', {
-                        ...this.params,
-                        limit: this.pagination.limit,
-                        offset: this.pagination.limit * (this.pagination.current - 1),
-                        attribute: item.id,
-                        keyword: ''
+              ...this.params,
+              limit: this.pagination.limit,
+              offset: this.pagination.limit * (this.pagination.current - 1),
+              attribute: item.id,
+              keyword: ''
           });
           this.pagination.totalPage = Math.ceil(res.data.count / this.pagination.limit);
           if (this.pagination.totalPage > 1) {
             res.data.results.push(LOADING_ITEM);
+          } else {
+            res.data.results = res.data.results.filter((item) => item.id !== '');
           }
           this.$set(this.attrValueListMap, item.id, res.data.results);
         } catch (e) {
@@ -195,7 +200,7 @@
           payload.name = curAttr.display_name || '';
         }
         if (this.attrValueListMap[payload.id] && this.attrValueListMap[payload.id].length < 1) {
-          this.fetchResourceAttrValues(payload, '', true);
+          this.resetPagination(payload, '', true, false);
         }
       },
 
@@ -205,6 +210,10 @@
         if (val) {
           // 记录当前操作的属性值数据
           this.curOperateData = payload;
+          if ((this.curToggleItem && `${payload.id}&${index}&valueRef` !== this.curToggleItem) || !this.curKeyWord) {
+            this.resetPagination(payload, '', false, false);
+          }
+          this.curToggleItem = `${payload.id}&${index}&valueRef`;
         } else {
           this.curOperateData = {};
           curOptionDom.removeEventListener('scroll', this.handleScroll);
@@ -212,7 +221,7 @@
       },
 
       async handleScroll (event) {
-        if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight) {
+        if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight - 1) {
           ++this.pagination.current;
           if (this.pagination.current > this.pagination.totalPage) {
             this.pagination.current = this.pagination.totalPage;
@@ -228,15 +237,14 @@
             }
             return;
           }
-          await this.fetchResourceAttrValues(this.curOperateData, '', false, true);
+          await this.fetchResourceAttrValues(this.curOperateData, this.curKeyWord, false, true);
           event.target.scrollTo(0, event.target.scrollTop - 10);
         }
       },
 
       async handleRemoteValue (val) {
+        this.curKeyWord = val;
         if (this.curOperateData.id) {
-          this.pagination.current = 1;
-          this.pagination.totalPage = 0;
           const loadItemIndex = this.attrValueListMap[this.curOperateData.id].findIndex(
             item => item.id === '' && item.display_name === ''
           );
@@ -246,28 +254,31 @@
               this.attrValueListMap[this.curOperateData.id].slice(0, loadItemIndex)
             );
           }
-          await this.fetchResourceAttrValues(this.curOperateData, val, false);
+          await this.resetPagination(this.curOperateData, val, false, false);
         }
       },
 
       async fetchResourceAttrValues (payload, keyword = '', isLoading = true, isScrollRemote = false) {
         payload.loading = isLoading && !isScrollRemote;
+        payload.isScrollRemote = isScrollRemote;
         const { limit, current } = this.pagination;
         try {
           const res = await this.$store.dispatch('permApply/getResourceAttrValues', {
-                        ...this.params,
-                        limit: limit,
-                        offset: limit * (current - 1),
-                        attribute: payload.id,
-                        keyword
+            ...this.params,
+            limit: limit,
+            offset: limit * (current - 1),
+            attribute: payload.id,
+            keyword
           });
           if (isScrollRemote) {
             const len = this.attrValueListMap[payload.id].length;
-            this.attrValueListMap[payload.id].splice(len - 2, 0, ...res.data.results);
+            this.attrValueListMap[payload.id].splice(len - 1, 0, ...res.data.results);
           } else {
             this.pagination.totalPage = Math.ceil(res.data.count / this.pagination.limit);
             if (this.pagination.totalPage > 1) {
               res.data.results.push(LOADING_ITEM);
+            } else {
+              res.data.results = res.data.results.filter((item) => item.id !== '');
             }
             this.attrValueListMap[payload.id] = _.cloneDeep(res.data.results);
           }
@@ -276,9 +287,21 @@
           this.messageAdvancedError(e);
         } finally {
           payload.loading = false;
+          sleep(300).then(() => {
+            payload.isScrollRemote = false;
+          });
         }
       },
 
+      async resetPagination (payload, keyword = '', isLoading = true, isScrollRemote = false) {
+        this.pagination = Object.assign({
+          limit: 10,
+          current: 1,
+          totalPage: 0
+        });
+        await this.fetchResourceAttrValues(payload, keyword, isLoading, isScrollRemote);
+      },
+
       trigger () {
         this.$emit('on-change', this.attrValues);
       }
diff --git a/frontend/src/views/resource-permiss/index.vue b/frontend/src/views/resource-permiss/index.vue
index fec2726e4..b991dd652 100644
--- a/frontend/src/views/resource-permiss/index.vue
+++ b/frontend/src/views/resource-permiss/index.vue
@@ -30,6 +30,7 @@
               v-model="systemId"
               :clearable="true"
               :placeholder="$t(`m.verify['请选择']`)"
+              :disabled="['system_manager'].includes(user.role.type)"
               @change="handleCascadeChange"
               @clear="handleSystemClear">
               <bk-option v-for="option in systemList"
@@ -282,7 +283,7 @@
       };
     },
     computed: {
-      ...mapGetters(['externalSystemId']),
+      ...mapGetters(['externalSystemId', 'user']),
       condition () {
           if (this.curResIndex === -1 || this.groupIndex === -1) {
               return [];
@@ -292,7 +293,7 @@
           if (!curData) {
               return [];
           }
-          if (curData.condition.length === 0) curData.condition = ['none'];
+          // if (curData.condition.length === 0) curData.condition = ['none'];
           return _.cloneDeep(curData.condition);
       },
       curSelectionMode () {
@@ -307,7 +308,7 @@
           return _.cloneDeep(this.condition);
       },
       isShowExport () {
-        return ['resource-permiss'].includes(this.$route.name);
+        return ['resourcePermiss'].includes(this.$route.name);
       }
     },
     watch: {
@@ -347,6 +348,10 @@
           ? 960 : Math.ceil(window.innerWidth * 0.67 - 7);
       },
 
+      async fetchPageData () {
+        await this.fetchSystemList();
+      },
+
       async fetchSystemList () {
         try {
           const params = {};
@@ -355,7 +360,7 @@
           }
           const res = await this.$store.dispatch('system/getSystems', params);
           this.systemList = res.data;
-          if (this.systemList.length && ['resourcePermManage'].includes(this.$route.name)) {
+          if (this.systemList.length && ['system_manager'].includes(this.user.role.type)) {
             this.systemId = this.systemList[0].id;
           }
         } catch (e) {
diff --git a/frontend/src/views/sensitivity-level/components/sensitivity-level-table.vue b/frontend/src/views/sensitivity-level/components/sensitivity-level-table.vue
index f74f48def..ca3a48ece 100644
--- a/frontend/src/views/sensitivity-level/components/sensitivity-level-table.vue
+++ b/frontend/src/views/sensitivity-level/components/sensitivity-level-table.vue
@@ -329,7 +329,11 @@
               const selectionCount = document.getElementsByClassName(
                 'bk-page-selection-count'
               );
-              if (this.$refs.sensitivityTableRef && selectionCount) {
+              if (this.$refs.sensitivityTableRef
+                && selectionCount
+                && selectionCount.length
+                && selectionCount[0].children
+              ) {
                 selectionCount[0].children[0].innerHTML = this.currentSelectList.length;
               }
             });
diff --git a/frontend/src/views/sensitivity-level/components/sensitivity-systems.vue b/frontend/src/views/sensitivity-level/components/sensitivity-systems.vue
index ce96ee242..45f6ac0f6 100644
--- a/frontend/src/views/sensitivity-level/components/sensitivity-systems.vue
+++ b/frontend/src/views/sensitivity-level/components/sensitivity-systems.vue
@@ -110,23 +110,27 @@
       };
     },
     computed: {
-    ...mapGetters(['externalSystemId']),
-    formatDragWidth () {
-      return {
-        minWidth: '280px'
-      };
-    },
-    formatSystemsHeight () {
-      return {
-        maxHeight: `${getWindowHeight() - 185}px`
-      };
-    }
+      ...mapGetters(['externalSystemId', 'user']),
+      formatDragWidth () {
+        return {
+          minWidth: '280px'
+        };
+      },
+      formatSystemsHeight () {
+        return {
+          maxHeight: `${getWindowHeight() - 185}px`
+        };
+      }
     },
     async created () {
       // this.handleSelectSystem({ id: 'all', isFirst: true });
       await this.fetchSystems();
     },
     methods: {
+      async fetchPageData () {
+        await this.fetchSystems();
+      },
+
       async fetchSystems () {
         this.systemLoading = true;
         try {
@@ -135,15 +139,19 @@
             params.hidden = false;
           }
           const { code, data } = await this.$store.dispatch('system/getSystems', params);
+          let list = [...data];
           if (data && data.length) {
-            // this.systemList = _.cloneDeep([...data]);
-            this.systemList = await this.getSystemCount(data);
+            const { role } = this.user;
+            if (['system_manager'].includes(role.type) && role.code) {
+              list = data.filter((item) => item.id === role.code);
+            }
+            this.systemList = await this.getSystemCount(list);
             this.systemListStorage = [...this.systemList];
           }
           this.emptySystemData = formatCodeData(
             code,
             this.emptySystemData,
-            data.length === 0
+            list.length === 0
           );
         } catch (e) {
           this.emptySystemData = formatCodeData(e.code, this.emptySystemData);
diff --git a/frontend/src/views/set/index.vue b/frontend/src/views/set/index.vue
index ccd61f1c4..f882febec 100644
--- a/frontend/src/views/set/index.vue
+++ b/frontend/src/views/set/index.vue
@@ -37,7 +37,7 @@
       };
     },
     computed: {
-            ...mapGetters(['user'])
+      ...mapGetters(['user'])
     },
     watch: {
       user: {
diff --git a/frontend/src/views/tempora-perm-apply/apply-custom-perm/index.vue b/frontend/src/views/tempora-perm-apply/apply-custom-perm/index.vue
index b124d8403..67ecc1518 100644
--- a/frontend/src/views/tempora-perm-apply/apply-custom-perm/index.vue
+++ b/frontend/src/views/tempora-perm-apply/apply-custom-perm/index.vue
@@ -198,7 +198,7 @@
               :disabled="isAggregateDisabled"
               @change="handleAggregateActionChange">
             </bk-switcher>
-            <span class="expanded-text">{{ isAllExpanded ? $t(`m.grading['逐项编辑']`) : $t(`m.grading['批量编辑']`) }}</span>
+            <span class="expanded-text">{{ isAllExpanded ? $t(`m.grading['批量编辑']`) : $t(`m.grading['逐项编辑']`) }}</span>
           </div>
         </section>
       </render-horizontal-block>
diff --git a/frontend/src/views/tempora-perm-apply/components/attribute.vue b/frontend/src/views/tempora-perm-apply/components/attribute.vue
index 150a186e4..7f88318ca 100644
--- a/frontend/src/views/tempora-perm-apply/components/attribute.vue
+++ b/frontend/src/views/tempora-perm-apply/components/attribute.vue
@@ -10,7 +10,7 @@
           :clearable="false"
           :disabled="item.disabled"
           searchable
-          style="width: 130px;"
+          style="width: 160px;"
           @selected="handleAttributeSelected(...arguments, item)">
           <bk-option v-for="option in list"
             :key="option.id"
@@ -23,7 +23,7 @@
           :ref="`${item.id}&${index}&valueRef`"
           :multiple="true"
           searchable
-          :disabled="item.disabled"
+          :disabled="item.disabled || !item.id"
           :loading="item.loading"
           style="position: relative; left: -1px; width: 330px;"
           :remote-method="handleRemoteValue"
@@ -38,7 +38,7 @@
               <span>{{ option.display_name }}</span>
             </template>
             <template v-else>
-              <div v-bkloading="{ isLoading: true, size: 'mini' }"></div>
+              <div v-bkloading="{ isLoading: item.isScrollRemote, size: 'mini' }"></div>
             </template>
           </bk-option>
         </bk-select>
@@ -56,6 +56,7 @@
 </template>
 <script>
   import _ from 'lodash';
+  import { sleep } from '@/common/util';
   import Attribute from '@/model/attribute';
 
   const ATTRIBUTE_ITEM = {
@@ -95,7 +96,9 @@
           current: 1,
           totalPage: 0
         },
-        attrValueListMap: {}
+        attrValueListMap: {},
+        curToggleItem: '',
+        curKeyWord: ''
       };
     },
     watch: {
@@ -155,11 +158,11 @@
         item.loading = true;
         try {
           const res = await this.$store.dispatch('permApply/getResourceAttrValues', {
-                        ...this.params,
-                        limit: this.pagination.limit,
-                        offset: this.pagination.limit * (this.pagination.current - 1),
-                        attribute: item.id,
-                        keyword: ''
+            ...this.params,
+            limit: this.pagination.limit,
+            offset: this.pagination.limit * (this.pagination.current - 1),
+            attribute: item.id,
+            keyword: ''
           });
           this.pagination.totalPage = Math.ceil(res.data.count / this.pagination.limit);
           if (this.pagination.totalPage > 1) {
@@ -195,7 +198,7 @@
           payload.name = curAttr.display_name || '';
         }
         if (this.attrValueListMap[payload.id] && this.attrValueListMap[payload.id].length < 1) {
-          this.fetchResourceAttrValues(payload, '', true);
+          this.resetPagination(payload, '', true, false);
         }
       },
 
@@ -205,6 +208,10 @@
         if (val) {
           // 记录当前操作的属性值数据
           this.curOperateData = payload;
+          if ((this.curToggleItem && `${payload.id}&${index}&valueRef` !== this.curToggleItem) || !this.curKeyWord) {
+            this.resetPagination(payload, '', false, false);
+          }
+          this.curToggleItem = `${payload.id}&${index}&valueRef`;
         } else {
           this.curOperateData = {};
           curOptionDom.removeEventListener('scroll', this.handleScroll);
@@ -212,7 +219,7 @@
       },
 
       async handleScroll (event) {
-        if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight) {
+        if (event.target.scrollTop + event.target.offsetHeight >= event.target.scrollHeight - 1) {
           ++this.pagination.current;
           if (this.pagination.current > this.pagination.totalPage) {
             this.pagination.current = this.pagination.totalPage;
@@ -228,15 +235,14 @@
             }
             return;
           }
-          await this.fetchResourceAttrValues(this.curOperateData, '', false, true);
+          await this.fetchResourceAttrValues(this.curOperateData, this.curKeyWord, false, true);
           event.target.scrollTo(0, event.target.scrollTop - 10);
         }
       },
 
       async handleRemoteValue (val) {
+        this.curKeyWord = val;
         if (this.curOperateData.id) {
-          this.pagination.current = 1;
-          this.pagination.totalPage = 0;
           const loadItemIndex = this.attrValueListMap[this.curOperateData.id].findIndex(
             item => item.id === '' && item.display_name === ''
           );
@@ -246,28 +252,31 @@
               this.attrValueListMap[this.curOperateData.id].slice(0, loadItemIndex)
             );
           }
-          await this.fetchResourceAttrValues(this.curOperateData, val, false);
+          await this.resetPagination(this.curOperateData, val, false, false);
         }
       },
 
       async fetchResourceAttrValues (payload, keyword = '', isLoading = true, isScrollRemote = false) {
         payload.loading = isLoading && !isScrollRemote;
+        payload.isScrollRemote = isScrollRemote;
         const { limit, current } = this.pagination;
         try {
           const res = await this.$store.dispatch('permApply/getResourceAttrValues', {
-                        ...this.params,
-                        limit: limit,
-                        offset: limit * (current - 1),
-                        attribute: payload.id,
-                        keyword
+            ...this.params,
+            limit: limit,
+            offset: limit * (current - 1),
+            attribute: payload.id,
+            keyword
           });
           if (isScrollRemote) {
             const len = this.attrValueListMap[payload.id].length;
-            this.attrValueListMap[payload.id].splice(len - 2, 0, ...res.data.results);
+            this.attrValueListMap[payload.id].splice(len - 1, 0, ...res.data.results);
           } else {
             this.pagination.totalPage = Math.ceil(res.data.count / this.pagination.limit);
             if (this.pagination.totalPage > 1) {
               res.data.results.push(LOADING_ITEM);
+            } else {
+              res.data.results = res.data.results.filter((item) => item.id !== '');
             }
             this.attrValueListMap[payload.id] = _.cloneDeep(res.data.results);
           }
@@ -276,9 +285,21 @@
           this.messageAdvancedError(e);
         } finally {
           payload.loading = false;
+          sleep(300).then(() => {
+            payload.isScrollRemote = false;
+          });
         }
       },
 
+      async resetPagination (payload, keyword = '', isLoading = true, isScrollRemote = false) {
+        this.pagination = Object.assign({
+          limit: 10,
+          current: 1,
+          totalPage: 0
+        });
+        await this.fetchResourceAttrValues(payload, keyword, isLoading, isScrollRemote);
+      },
+
       trigger () {
         this.$emit('on-change', this.attrValues);
       }
diff --git a/frontend/src/views/user-group-setting/index.vue b/frontend/src/views/user-group-setting/index.vue
index 0d0509d49..4502c78cf 100644
--- a/frontend/src/views/user-group-setting/index.vue
+++ b/frontend/src/views/user-group-setting/index.vue
@@ -26,6 +26,7 @@
 </template>
 
 <script>
+  import { mapGetters } from 'vuex';
   export default {
     name: 'IamUserGroupSetting',
     data () {
@@ -36,19 +37,24 @@
         submitLoading: false
       };
     },
+    computed: {
+      ...mapGetters(['user'])
+    },
     async created () {
       await this.getGroupConfig();
     },
     methods: {
       async getGroupConfig () {
-        try {
-          const { data } = await this.$store.dispatch('userGroupSetting/getUserGroupSetConfig');
-          if (data) {
-            this.formData = Object.assign({}, { apply_disable: data.apply_disable });
+        if (!['subset_manager', 'staff', ''].includes(this.user.role.type)) {
+          try {
+            const { data } = await this.$store.dispatch('userGroupSetting/getUserGroupSetConfig');
+            if (data) {
+              this.formData = Object.assign({}, { apply_disable: data.apply_disable });
+            }
+          } catch (e) {
+            console.error(e);
+            this.messageAdvancedError(e);
           }
-        } catch (e) {
-          console.error(e);
-          this.messageAdvancedError(e);
         }
       },
       
diff --git a/frontend/src/views/user-org-perm/components/batch-operate-slider.vue b/frontend/src/views/user-org-perm/components/batch-operate-slider.vue
new file mode 100644
index 000000000..dfc1aee77
--- /dev/null
+++ b/frontend/src/views/user-org-perm/components/batch-operate-slider.vue
@@ -0,0 +1,567 @@
+<template>
+  <div>
+    <bk-sideslider
+      :is-show="isShowSideSlider"
+      :title="title"
+      :width="sliderWidth"
+      :quick-close="true"
+      :show-mask="true"
+      ext-cls="iam-batch-operate-side"
+      @update:isShow="handleCancel('dialog')"
+    >
+      <div slot="content" class="iam-batch-operate-side-content">
+        <div
+          v-if="noSelectTableList.length"
+          class="no-renewal-tip"
+        >
+          <Icon bk type="info-circle-shape" class="warn" />
+          <span class="no-renewal-name">{{ formatTypeTip() }}</span>
+        </div>
+        <div class="batch-operate-content">
+          <bk-form form-type="vertical">
+            <bk-form-item
+              :class="['operate-object', { 'operate-object-single': !isBatch }]"
+              :label="!isBatch ? $t(`m.userOrOrg['操作对象']`) : ''"
+            >
+              <template v-if="isBatch">
+                <RenderPermBoundary
+                  :modules="['membersPerm']"
+                  :user-length="userList.length"
+                  :depart-length="departList.length"
+                  :custom-title="$t(`m.userOrOrg['操作对象']`)"
+                  :custom-slot-name="'operateObject'"
+                  :is-custom-title-style="true"
+                >
+                  <div slot="operateObject">
+                    <span>{{ $t(`m.common['已选']`) }}</span>
+                    <template v-if="isHasUser">
+                      <span class="number">{{ userList.length }}</span>
+                      {{ $t(`m.common['个用户']`) }}
+                    </template>
+                    <template v-if="isHasUser && isHasDepartment">
+                      {{ $t(`m.common['，']`) }}
+                    </template>
+                    <template v-if="isHasDepartment">
+                      <span class="number">{{ departList.length }}</span>
+                      {{ $t(`m.common['个组织']`) }}
+                    </template>
+                  </div>
+                  <div slot="membersPerm" class="members-boundary-detail">
+                    <template>
+                      <render-member-item v-if="isHasUser" mode="view" type="user" :data="userList" />
+                      <render-member-item v-if="isHasDepartment" mode="view" type="department" :data="departList" />
+                    </template>
+                  </div>
+                </RenderPermBoundary>
+              </template>
+              <template v-else>
+                <render-member-item v-if="isHasUser" mode="view" type="user" :data="userList" />
+                <render-member-item v-if="isHasDepartment" mode="view" type="department" :data="departList" />
+              </template>
+            </bk-form-item>
+            <bk-form-item
+              v-if="['renewal'].includes(curSliderName)"
+              :label="$t(`m.userOrOrg['续期时长']`)"
+              :label-width="300"
+              class="apply-expired-at"
+              :required="true"
+            >
+              <IamDeadline :value="expiredAt" @on-change="handleDeadlineChange" :cur-role="curRole" />
+              <p class="expired-at-error" v-if="isShowExpiredError">{{ $t(`m.userOrOrg['请选择续期时长']`) }}</p>
+            </bk-form-item>
+            <bk-form-item class="group-table-content" :label-width="0" :required="false">
+              <RenderPermBoundary
+                :modules="['transferPreview']"
+                :custom-title="formatTableTitle"
+                :custom-slot-name="'renewalPreview'"
+                :expanded="true"
+                :is-custom-title-style="true"
+              >
+                <div slot="renewalPreview">
+                  <span>{{ $t(`m.common['已选']`) }}</span>
+                  <template>
+                    <span class="number">{{ formatSelectedGroup }}</span>
+                    {{ $t(`m.common['个用户组']`) }}
+                  </template>
+                </div>
+                <div slot="transferPreview">
+                  <IamUserGroupTable
+                    ref="joinedUserGroupRef"
+                    :mode="curSliderName"
+                    :list="selectTableList"
+                    :no-show-list="noSelectTableList"
+                    :expired-at-new="expiredAt"
+                    @on-remove-group="handleRemoveGroup"
+                  />
+                </div>
+              </RenderPermBoundary>
+              <p class="user-group-error" v-if="isShowGroupError">{{ $t(`m.userOrOrg['用户组不能为空']`) }}</p>
+            </bk-form-item>
+          </bk-form>
+        </div>
+      </div>
+      <div slot="footer">
+        <div class="iam-batch-operate-side-footer">
+          <bk-button theme="primary" class="member-footer-btn" :loading="submitLoading" @click="handleSubmit">
+            {{ $t(`m.common['提交']`) }}
+          </bk-button>
+          <bk-button theme="default" class="member-footer-btn" @click="handleCancel('cancel')">
+            {{ $t(`m.common['取消']`) }}
+          </bk-button>
+        </div>
+      </div>
+    </bk-sideslider>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+  import { PERMANENT_TIMESTAMP } from '@/common/constants';
+  import { cloneDeep } from 'lodash';
+  import { leaveConfirm } from '@/common/leave-confirm';
+  import { getNowTimeExpired } from '@/common/util';
+  import { bus } from '@/common/bus';
+  import IamDeadline from '@/components/iam-deadline/horizontal';
+  import RenderPermBoundary from '@/components/render-perm-boundary';
+  import RenderMemberItem from '@/views/group/common/render-member-display';
+  import IamUserGroupTable from './user-group-table.vue';
+
+  export default {
+    components: {
+      IamDeadline,
+      IamUserGroupTable,
+      RenderPermBoundary,
+      RenderMemberItem
+    },
+    props: {
+      show: {
+        type: Boolean,
+        default: false
+      },
+      isBatch: {
+        type: Boolean,
+        default: false
+      },
+      sliderWidth: {
+        type: Number
+      },
+      title: {
+        type: String
+      },
+      curSliderName: {
+        type: String
+      },
+      groupData: {
+        type: Object
+      },
+      userList: {
+        type: Array,
+        default: () => []
+      },
+      departList: {
+        type: Array,
+        default: () => []
+      },
+      groupList: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data () {
+      return {
+        submitLoading: false,
+        isShowGroupError: false,
+        isShowExpiredError: false,
+        expiredAt: 15552000,
+        expiredAtUse: 15552000,
+        customButtonStyle: {
+          width: '160px'
+        },
+        groupListBack: [],
+        selectTableList: [],
+        noSelectTableList: [],
+        submitFormData: {},
+        submitFormDataBack: {},
+        curSliderNameBack: ''
+      };
+    },
+    computed: {
+      ...mapGetters(['user']),
+      isShowSideSlider: {
+        get () {
+          return this.show;
+        },
+        set (newValue) {
+          this.$emit('update:show', newValue);
+        }
+      },
+      curRole () {
+        return this.user.role.type;
+      },
+      isHasUser () {
+        return this.userList.length > 0;
+      },
+      isHasDepartment () {
+        return this.departList.length > 0;
+      },
+      formatTableTitle () {
+        const typeMap = {
+          remove: () => {
+            return this.$t(`m.userOrOrg['移出用户组名']`);
+          },
+          renewal: () => {
+            return this.$t(`m.userOrOrg['续期预览']`);
+          }
+        };
+        if (typeMap[this.curSliderName]) {
+          return typeMap[this.curSliderName]();
+        }
+        return typeMap[this.curSliderName] ? typeMap[this.curSliderName]() : '';
+      },
+      formatSelectedGroup () {
+        const modeMap = {
+          remove: () => {
+            const list = cloneDeep(this.groupListBack);
+            this.noSelectTableList = list.filter((item) =>
+              item.role_members.length === 1
+              && item.attributes
+              && item.attributes.source_from_role
+            );
+            this.selectTableList = this.selectTableList.filter(
+              (item) => !this.noSelectTableList.map((v) => v.id).includes(item.id));
+            return this.selectTableList.length;
+          },
+          renewal: () => {
+            const list = cloneDeep(this.groupListBack);
+            this.noSelectTableList = list.filter((item) => item.expired_at === PERMANENT_TIMESTAMP);
+            this.selectTableList = this.selectTableList.filter(
+              (item) => !this.noSelectTableList.map((v) => v.id).includes(item.id));
+            return this.selectTableList.length;
+          }
+        };
+        return modeMap[this.curSliderName] ? modeMap[this.curSliderName]() : '';
+      },
+      formatTypeTip () {
+        return () => {
+          const list = this.noSelectTableList.map((item) => item.name);
+          const modeMap = {
+            remove: () => {
+              return this.$t(`m.info['不可移出的用户组如下']`, { value: list });
+            },
+            renewal: () => {
+              return this.$t(`m.info['不可续期的用户组如下']`, { value: list });
+            }
+          };
+          return modeMap[this.curSliderName] ? modeMap[this.curSliderName]() : '';
+        };
+      }
+    },
+    watch: {
+      show: {
+        handler (value) {
+          if (value) {
+            [this.groupListBack, this.selectTableList] = [this.groupList, this.groupList];
+            this.submitFormData = Object.assign({}, {
+              expiredAtUse: this.expiredAtUse,
+              selectTableList: this.selectTableList
+            });
+            this.submitFormDataBack = cloneDeep(this.submitFormData);
+          }
+        },
+        immediate: true
+      }
+    },
+    mounted () {
+      this.$once('hook:beforeDestroy', () => {
+        bus.$off('on-remove-toggle-checkbox');
+      });
+      // 同步更新checkbox状态
+      bus.$on('on-remove-toggle-checkbox', (payload) => {
+        this.selectTableList = [...payload];
+        this.submitFormData = Object.assign({}, { selectTableList: this.selectTableList });
+      });
+    },
+    methods: {
+      handleRemoveGroup (payload) {
+        this.selectTableList = payload;
+      },
+      async handleExpiredAt () {
+        const nowTimestamp = await getNowTimeExpired();
+        const expiredAt = this.expiredAtUse + nowTimestamp;
+        return expiredAt;
+      },
+
+      async handleDeadlineChange (payload) {
+        if (payload) {
+          this.isShowExpiredError = false;
+        }
+        this.expiredAt = payload;
+        if (payload && payload !== PERMANENT_TIMESTAMP) {
+          const nowTimestamp = await getNowTimeExpired();
+          this.expiredAtUse = payload + nowTimestamp;
+          this.submitFormData = Object.assign(this.submitFormData, { expiredAtUse: payload });
+          return;
+        }
+        this.expiredAtUse = payload;
+        this.submitFormData = Object.assign(this.submitFormData, { expiredAtUse: payload });
+      },
+
+      async handleSubmit () {
+        if (!this.selectTableList.length) {
+          this.isShowGroupError = true;
+          return;
+        }
+        const { type, id } = this.groupData;
+        let params = {
+          group_ids: this.selectTableList.map((item) => item.id),
+          members: [...this.userList, ...this.departList].map(({ id, type }) => ({ id, type }))
+        };
+        const modeMap = {
+          remove: async () => {
+            try {
+              this.submitLoading = true;
+              const deleteParams = {
+                members: [{
+                  type,
+                  id
+                }],
+                group_ids: this.selectTableList.map((item) => item.id)
+              };
+              const { code } = await this.$store.dispatch('userOrOrg/deleteGroupMembers', deleteParams);
+              if (code === 0) {
+                this.messageSuccess(this.$t(`m.info['移出成功']`), 3000);
+                bus.$emit('on-remove-toggle-checkbox', this.selectTableList);
+                this.$emit('on-submit', params);
+                this.$emit('update:show', false);
+              }
+            } catch (e) {
+              console.error(e);
+              this.messageAdvancedError(e);
+            } finally {
+              this.submitLoading = false;
+            }
+          },
+          renewal: async () => {
+            try {
+              if (this.expiredAtUse === 15552000) {
+                this.expiredAtUse = await this.handleExpiredAt();
+              }
+              if (!this.expiredAtUse) {
+                this.isShowExpiredError = true;
+                return;
+              }
+              this.submitLoading = true;
+              const batchMembers = cloneDeep([...this.userList, ...this.departList]);
+              const result = batchMembers.map((item) => {
+                return this.selectTableList.map((subItem) => {
+                  return {
+                    id: item.id,
+                    type: item.type,
+                    group_id: subItem.id,
+                    expired_at: getNowTimeExpired() > subItem.expired_at
+                      ? this.expiredAtUse : this.expiredAtUse + (subItem.expired_at - getNowTimeExpired())
+                  };
+                });
+              });
+              const groupMembers = result.flat(Infinity);
+              params = {
+                group_members: groupMembers
+              };
+              const { code } = await this.$store.dispatch('userOrOrg/batchJoinOrRenewal', params);
+              if (code === 0) {
+                bus.$emit('on-remove-toggle-checkbox', []);
+                this.$emit('on-submit', params);
+                this.$emit('update:show', false);
+                this.messageSuccess(this.$t(`m.renewal['续期成功']`), 3000);
+              }
+            } catch (e) {
+              console.error(e);
+              this.messageAdvancedError(e);
+            } finally {
+              this.submitLoading = false;
+            }
+          }
+        };
+        return modeMap[this.curSliderName]();
+      },
+
+      handleCancel (payload) {
+        if (['cancel'].includes(payload)) {
+          this.$emit('update:show', false);
+          this.resetData();
+        } else {
+          let cancelHandler = Promise.resolve();
+          window.changeAlert = JSON.stringify(this.submitFormData) !== JSON.stringify(this.submitFormDataBack);
+          if (window.changeAlert) {
+            cancelHandler = leaveConfirm();
+          }
+          cancelHandler.then(
+            () => {
+              this.$emit('update:show', false);
+              this.resetData();
+            },
+            (_) => _
+          );
+        }
+      },
+
+      resetData () {
+        this.submitFormData = {};
+        this.submitFormDataBack = {};
+        this.selectTableList = [];
+        this.expiredAt = 15552000;
+        this.expiredAtUse = 15552000;
+        this.isShowGroupError = false;
+        this.isShowExpiredError = false;
+      }
+    }
+  };
+</script>
+
+<style lang="postcss" scoped>
+.iam-batch-operate-side {
+  &-content {
+    .no-renewal-tip {
+      padding: 24px 40px 0 40px;
+      .warn {
+        color: #ffb848;
+      }
+      .no-renewal-name {
+        font-size: 12px;
+        word-break: break-all;
+      }
+    }
+    .batch-operate-content {
+      padding: 0 40px 16px 40px;
+      /deep/ .bk-form-item {
+        margin-top: 24px;
+        .bk-label {
+          font-weight: 700;
+          font-size: 14px;
+          color: #313238;
+        }
+        .verify-field-error {
+          font-size: 12px;
+          color: #ff4d4d;
+        }
+      }
+      .user-group-error,
+      .expired-at-error {
+        margin-top: 5px;
+        font-size: 12px;
+        color: #ff4d4d;
+      }
+    }
+  }
+  &-footer {
+    margin-left: 40px;
+    .member-footer-btn {
+      min-width: 88px;
+      margin-right: 8px;
+    }
+  }
+
+  /deep/ .bk-sideslider-footer {
+    border-top: 0;
+    background-color: #ffffff !important;
+  }
+
+  /deep/ .operate-object,
+  /deep/ .group-table-content {
+    .horizontal-item {
+      width: 100%;
+      padding: 0;
+      margin-bottom: 0;
+      box-shadow: none;
+      display: inline-block;
+      .perm-boundary-title {
+        font-weight: 700;
+        font-size: 14px;
+        color: #313238;
+        margin-bottom: 8px !important;
+      }
+      .render-form-item {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    .members-boundary-detail {
+      padding: 16px;
+    }
+
+    .iam-member-display-wrapper {
+      margin-left: 0;
+      .label {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    &-single {
+      .iam-member-display-wrapper {
+        .label {
+          display: none;
+        }
+      }
+    }
+  }
+
+  /deep/ .group-table-content {
+    margin-top: 18px !important;
+    .iam-resource-expand {
+      background-color: #eaebf0;
+    }
+  }
+
+  /deep/ .joined-user-group {
+    .bk-label {
+      width: 100% !important;
+    }
+    &-list {
+      border: 1px solid #dcdee5;
+      border-radius: 2px;
+    }
+  }
+
+  /deep/ .render-join {
+    display: flex;
+    margin-bottom: 8px;
+    &-label {
+      position: relative;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 32px;
+      color: #313238;
+      margin-bottom: 8px !important;
+      &::after {
+        content: '*';
+        height: 8px;
+        line-height: 1;
+        font-size: 12px;
+        color: #ea3636;
+        display: inline-block;
+        vertical-align: middle;
+        position: absolute;
+        top: 50%;
+        transform: translate(3px, -50%);
+      }
+    }
+    &-tip {
+      margin-left: 20px;
+      line-height: 32px;
+      font-size: 12px;
+      color: #979ba5;
+      &-icon {
+        font-size: 13px;
+        color: #c4c6cc;
+      }
+    }
+  }
+
+  /deep/ .apply-expired-at {
+    margin-top: 18px !important;
+    .custom-time {
+      height: 26px;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/user-org-perm/components/clear-user-group-slider.vue b/frontend/src/views/user-org-perm/components/clear-user-group-slider.vue
new file mode 100644
index 000000000..133e3c5dd
--- /dev/null
+++ b/frontend/src/views/user-org-perm/components/clear-user-group-slider.vue
@@ -0,0 +1,313 @@
+<template>
+  <div>
+    <bk-sideslider
+      :is-show="isShowSideSlider"
+      :title="title"
+      :width="sliderWidth"
+      :quick-close="true"
+      ext-cls="iam-clear-user-group-side"
+      @update:isShow="handleCancel"
+    >
+      <div slot="content" class="iam-clear-user-group-side-content">
+        <div class="clear-object">
+          <div class="title">{{ $t(`m.userOrOrg['清空对象']`) }}</div>
+          <RenderPermBoundary
+            v-if="isHasUser"
+            class="perm-boundary-item"
+            :modules="['membersPerm']"
+            :user-length="userList.length"
+            :custom-slot-name="'operateObject'"
+            :is-custom-title-style="true"
+          >
+            <div slot="operateObject">
+              <Icon type="personal-user" class="type-icon" />
+              <span>{{ $t(`m.common['已选']`) }}</span>
+              <template>
+                <span class="number">{{ userList.length }}</span>
+                {{ $t(`m.common['个用户']`) }}
+              </template>
+              <span class="line">|</span>
+              <span class="clear-object-tip">
+                <span>{{ $t(`m.common['清空']`) }}</span>
+                <span class="name">{{ $t(`m.userOrOrg['个人']`) }}</span>
+                <span>{{ $t(`m.userOrOrg['用户组权限（不影响因所属组织而拥有的用户组权限）']`) }}</span>
+              </span>
+            </div>
+            <div slot="membersPerm" class="members-boundary-detail">
+              <template>
+                <render-member-item mode="view" type="user" :data="userList" />
+              </template>
+            </div>
+          </RenderPermBoundary>
+          <RenderPermBoundary
+            v-if="isHasDepartment"
+            class="perm-boundary-item"
+            :modules="['membersPerm']"
+            :depart-length="departList.length"
+            :custom-title="$t(`m.userOrOrg['清空对象']`)"
+            :custom-slot-name="'operateObject'"
+            :is-custom-title-style="true"
+          >
+            <div slot="operateObject">
+              <Icon type="organization-fill" class="type-icon" />
+              <span>{{ $t(`m.common['已选']`) }}</span>
+              <template>
+                <span class="number">{{ departList.length }}</span>
+                {{ $t(`m.common['个组织']`) }}
+              </template>
+              <span class="line">|</span>
+              <span class="clear-object-tip">
+                <span>{{ $t(`m.common['清空']`) }}</span>
+                <span class="name">{{ $t(`m.common['组织']`) }}</span>
+                <span>{{ $t(`m.perm['用户组权限']`) }}</span>
+              </span>
+            </div>
+            <div slot="membersPerm" class="members-boundary-detail">
+              <template>
+                <render-member-item mode="view" type="department" :data="departList" />
+              </template>
+            </div>
+          </RenderPermBoundary>
+        </div>
+      </div>
+      <div slot="footer">
+        <div class="iam-clear-user-group-side-footer">
+          <bk-button theme="primary" class="footer-btn" :loading="submitLoading" @click="handleSubmit">
+            {{ $t(`m.common['提交']`) }}
+          </bk-button>
+          <bk-button theme="default" class="footer-btn" @click="handleCancel('cancel')">
+            {{ $t(`m.common['取消']`) }}
+          </bk-button>
+        </div>
+      </div>
+    </bk-sideslider>
+  </div>
+</template>
+
+<script>
+  import { bus } from '@/common/bus';
+  import RenderPermBoundary from '@/components/render-perm-boundary';
+  import RenderMemberItem from '@/views/group/common/render-member-display';
+  export default {
+    components: {
+      RenderPermBoundary,
+      RenderMemberItem
+    },
+    props: {
+      show: {
+        type: Boolean,
+        default: false
+      },
+      title: {
+        type: String
+      },
+      sliderWidth: {
+        type: Number
+      },
+      userList: {
+        type: Array,
+        default: () => []
+      },
+      departList: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data () {
+      return {
+        submitLoading: false,
+        tableLoading: false,
+        isShowGroupError: false,
+        isRefreshUser: false,
+        selectTableList: [],
+        initTabList: [
+          {
+            name: this.$t(`m.common['用户']`),
+            id: 'user',
+            count: 0,
+            list: [],
+            pagination: {
+              current: 1,
+              limit: 10,
+              count: 0,
+              showTotalCount: true
+            }
+          },
+          {
+            name: this.$t(`m.common['组织']`),
+            id: 'department',
+            count: 0,
+            list: [],
+            pagination: {
+              current: 1,
+              limit: 10,
+              count: 0,
+              showTotalCount: true
+            }
+          }
+        ],
+        tabList: [],
+        selectData: {
+          pagination: {
+            current: 1,
+            limit: 10,
+            count: 0,
+            showTotalCount: true
+          },
+          list: []
+        },
+        tabActive: 'user'
+      };
+    },
+    computed: {
+      isShowSideSlider: {
+        get () {
+          return this.show;
+        },
+        set (newValue) {
+          this.$emit('update:show', newValue);
+        }
+      },
+      isHasUser () {
+        return this.userList.length > 0;
+      },
+      isHasDepartment () {
+        return this.departList.length > 0;
+      }
+    },
+    mounted () {
+      this.$once('hook:beforeDestroy', () => {
+        bus.$off('on-exist-other-perm');
+      });
+      // 处理如果有组织加入或者人员模板加入的权限则不需要刷新左侧列表
+      bus.$on('on-exist-other-perm', ({ isRefreshUser }) => {
+        this.isRefreshUser = isRefreshUser;
+      });
+    },
+    methods: {
+      async handleSubmit () {
+        this.submitLoading = true;
+        const params = {
+          members: [...this.userList, ...this.departList].map(({ id, type }) => ({ id, type }))
+        };
+        try {
+          const { code } = await this.$store.dispatch('userOrOrg/cleanGroupMembers', params);
+          if (code === 0) {
+            this.messageSuccess(this.$t(`m.info['清空用户组成功']`), 3000);
+            const emitParams = {
+              ...params,
+              ...{
+                isRefreshUser: this.isRefreshUser
+              }
+            };
+            this.$emit('on-submit', emitParams);
+            this.$emit('update:show', false);
+          }
+        } catch (e) {
+          this.messageAdvancedError(e);
+        } finally {
+          this.submitLoading = false;
+        }
+      },
+
+      handleCancel () {
+        this.$emit('update:show', false);
+      }
+    }
+  };
+</script>
+
+<style lang="postcss" scoped>
+.iam-clear-user-group-side {
+  &-content {
+    padding: 24px 40px 16px 40px;
+    .header-alert {
+      width: 100%;
+      height: 32px;
+      line-height: 32px;
+      background: #f0f8ff;
+      border: 1px solid #c5daff;
+      border-radius: 2px;
+      &-tip {
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        color: #63656e;
+        font-size: 12px;
+        .header-alert-icon {
+          color: #3a84ff;
+          font-size: 16px;
+          margin-right: 8px;
+        }
+        .type {
+          font-weight: 700;
+        }
+      }
+    }
+    /deep/.clear-object {
+      .title {
+        font-weight: 700;
+        font-size: 14px;
+        color: #313238;
+        margin-bottom: 8px !important;
+      }
+      .horizontal-item {
+        width: 100%;
+        padding: 0;
+        margin-bottom: 0;
+        box-shadow: none;
+        display: inline-block;
+        .perm-boundary-title {
+          display: none;
+        }
+        .render-form-item {
+          margin-bottom: 12px !important;
+          .iam-resource-header {
+            .type-icon {
+              color: #3A84FF;
+            }
+          }
+        }
+      }
+
+      .members-boundary-detail {
+        padding: 12px 36px 6px 36px;
+      }
+
+      .iam-member-display-wrapper {
+        margin-left: 0;
+        .label {
+          display: none;
+        }
+      }
+      .line {
+        color: #dcdee5;
+        padding: 0 8px;
+      }
+      .clear-object-tip {
+        font-size: 12px;
+        color: #c4c6cc;
+        .name {
+          color: #979ba5;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+  &-footer {
+    margin-left: 40px;
+    .footer-btn {
+      min-width: 88px;
+      &:not(&:first-child) {
+        margin-left: 8px;
+      }
+    }
+  }
+  /deep/ .bk-sideslider-footer {
+    border-top: 0;
+    height: 32px;
+    line-height: 32px;
+    background-color: #ffffff !important;
+  }
+}
+</style>
diff --git a/frontend/src/views/user-org-perm/components/group-perm-table.vue b/frontend/src/views/user-org-perm/components/group-perm-table.vue
new file mode 100644
index 000000000..4950ae936
--- /dev/null
+++ b/frontend/src/views/user-org-perm/components/group-perm-table.vue
@@ -0,0 +1,629 @@
+<template>
+  <div class="my-perm-group-perm">
+    <bk-table
+      ref="groupPermRef"
+      size="small"
+      ext-cls="user-org-perm-table"
+      :data="list"
+      :outer-border="false"
+      :header-border="false"
+      :pagination="pagination"
+      @page-change="handlePageChange"
+      @page-limit-change="handleLimitChange"
+      @select="handleChange"
+      @select-all="handleAllChange"
+      v-bkloading="{ isLoading: isLoading, opacity: 1 }"
+    >
+      <bk-table-column
+        v-if="['personalOrDepartPerm'].includes(mode)"
+        type="selection"
+        align="center"
+        :selectable="getDefaultSelect"
+      />
+      <template v-for="item in tableProps">
+        <template v-if="item.prop === 'name'">
+          <bk-table-column
+            :key="item.prop"
+            :label="item.label"
+            :prop="item.prop"
+            :min-width="200"
+            :fixed="'left'">
+            <template slot-scope="{ row }">
+              <span
+                :ref="`name_${row.id}`"
+                class="can-view-name"
+                v-bk-tooltips="{
+                  content: row.name,
+                  placements: ['right-start']
+                }"
+                @click.stop="handleOpenTag(row, 'userGroupDetail')">
+                {{ row.name || "--" }}
+              </span>
+            </template>
+          </bk-table-column>
+        </template>
+        <template v-else-if="item.prop === 'created_time'">
+          <bk-table-column
+            :key="item.prop"
+            :label="item.label"
+            :prop="item.prop"
+            :min-width="150">
+            <template slot-scope="{ row }">
+              <span>
+                {{ row.created_time.replace(/T/, " ") }}
+              </span>
+            </template>
+          </bk-table-column>
+        </template>
+        <template v-else-if="item.prop === 'join_type'">
+          <bk-table-column
+            :key="item.prop"
+            :label="item.label"
+            :prop="item.prop"
+            :min-width="300">
+            <template slot-scope="{ row }">
+              <span
+                v-bk-tooltips="{
+                  content:
+                    `${formatJoinType(row)}( ${row.template_name || row.department_name }
+                  ${row.template_name && row.department_name ? ' - ' + row.department_name + ' )' : ' )'}`
+                }"
+              >
+                {{ formatJoinType(row) }}
+              </span>
+              (<span
+                v-if="row.template_id > 0 || row.department_id > 0"
+                v-bk-tooltips="{ content: formatJoinTypeTip(row), disabled: !formatJoinTypeTip(row) }"
+                class="can-view-name"
+                @click.stop="handleOpenTag(row, row.template_id > 0 ? 'memberTemplate' : 'userOrgPerm')"
+              >
+                {{ row.template_name || row.department_name }}
+              </span>
+              <span
+                v-if="row.template_name && row.department_name"
+                v-bk-tooltips="{
+                  content:
+                    `${formatJoinType(row)}( ${row.template_name || row.department_name }
+                  ${' - ' + row.department_name + ' )'}`
+                }"
+              >
+                {{ ` - ${row.department_name}` }}
+              </span>
+              )
+            </template>
+          </bk-table-column>
+        </template>
+        <template v-else-if="item.prop === 'operate'">
+          <bk-table-column
+            :key="item.prop"
+            :label="item.label"
+            :prop="item.prop"
+            :width="150"
+          >
+            <template slot-scope="{ row }">
+              <template>
+                <bk-popconfirm
+                  trigger="click"
+                  placement="bottom-start"
+                  ext-popover-cls="user-org-remove-confirm"
+                  :confirm-text="$t(`m.userOrOrg['移出']`)"
+                  @confirm="handleRemove(row)"
+                >
+                  <div slot="content">
+                    <div class="popover-title">
+                      <div class="popover-title-text">
+                        {{ $t(`m.dialog['确认把用户/组织移出该用户组？']`) }}
+                      </div>
+                    </div>
+                    <div class="popover-content">
+                      <div class="popover-content-item">
+                        <span class="popover-content-item-label">
+                          {{ $t(`m.userOrOrg['操作对象']`) }}:
+                        </span>
+                        <span class="popover-content-item-value"> {{ formatUserName }}</span>
+                      </div>
+                      <div class="popover-content-item">
+                        <span class="popover-content-item-label">
+                          {{ $t(`m.userOrOrg['用户组名']`) }}:
+                        </span>
+                        <span class="popover-content-item-value"> {{ row.name }}</span>
+                      </div>
+                      <div class="popover-content-tip">
+                        {{
+                          $t(`m.userOrOrg['移出后，该用户/组织将不再继承该组的权限。']`)
+                        }}
+                      </div>
+                    </div>
+                  </div>
+                  <bk-popover
+                    placement="right"
+                    :disabled="!formatAdminGroup(row)"
+                    :content="$t(`m.perm['唯一管理员不可退出']`)"
+                  >
+                    <bk-button
+                      theme="primary"
+                      text
+                      :disabled="formatAdminGroup(row)"
+                    >
+                      {{ $t(`m.userOrOrg['移出']`) }}
+                    </bk-button>
+                  </bk-popover>
+                </bk-popconfirm>
+                <bk-button
+                  v-if="row.expired_at !== PERMANENT_TIMESTAMP"
+                  theme="primary"
+                  style="margin-left: 5px;"
+                  text
+                  @click="handleShowRenewal(row)"
+                >
+                  {{ $t(`m.renewal['续期']`) }}
+                </bk-button>
+              </template>
+            </template>
+          </bk-table-column>
+        </template>
+        <template v-else>
+          <bk-table-column
+            :key="item.prop"
+            :label="item.label"
+            :prop="item.prop"
+            :min-width="['description'].includes(item.prop) ? 200 : 120"
+          >
+            <template slot-scope="{ row }">
+              <span
+                v-bk-tooltips="{
+                  content: row[item.prop],
+                  disabled: !row[item.prop] || ['created_time', 'expired_at_display'].includes(item.prop),
+                  placements: ['right-start']
+                }"
+              >
+                {{ row[item.prop] || '--'}}
+              </span>
+            </template>
+          </bk-table-column>
+        </template>
+      </template>
+      <template slot="empty">
+        <ExceptionEmpty
+          :type="emptyData.type"
+          :empty-text="emptyData.text"
+          :tip-text="emptyData.tip"
+          :tip-type="emptyData.tipType"
+          @on-clear="handleEmptyClear"
+          @on-refresh="handleEmptyRefresh"
+        />
+      </template>
+    </bk-table>
+
+    <BatchOperateSlider
+      :slider-width="960"
+      :show.sync="isShowRenewalSlider"
+      :is-batch="false"
+      :cur-slider-name="curSliderName"
+      :user-list="userList"
+      :depart-list="departList"
+      :title="$t(`m.renewal['续期']`)"
+      :group-data="queryGroupData"
+      :group-list="singleList"
+      @on-submit="handleAddGroupSubmit"
+    />
+
+    <MemberTemplateDetailSlider :show.sync="isShowTempSlider" :cur-detail-data="tempDetailData" />
+  </div>
+</template>
+  
+  <script>
+  import { cloneDeep } from 'lodash';
+  import { PERMANENT_TIMESTAMP } from '@/common/constants';
+  import { bus } from '@/common/bus';
+  import BatchOperateSlider from './batch-operate-slider.vue';
+  import MemberTemplateDetailSlider from '@/views/member-template/components/member-template-detail-slider.vue';
+
+  export default {
+    components: {
+      BatchOperateSlider,
+      MemberTemplateDetailSlider
+    },
+    props: {
+      mode: {
+        type: String
+      },
+      isLoading: {
+        type: Boolean,
+        default: false
+      },
+      list: {
+        type: Array,
+        default: () => []
+      },
+      curSelectedGroup: {
+        type: Array,
+        default: () => []
+      },
+      pagination: {
+        type: Object,
+        default: () => {
+          return {
+            current: 1,
+            limit: 10,
+            count: 0,
+            showTotalCount: true
+          };
+        }
+      },
+      groupData: {
+        type: Object
+      },
+      emptyData: {
+        type: Object,
+        default: () => {
+          return {
+            type: '',
+            text: '',
+            tip: '',
+            tipType: ''
+          };
+        }
+      }
+    },
+    data () {
+      return {
+        PERMANENT_TIMESTAMP,
+        isShowPermSideSlider: false,
+        isShowRenewalSlider: false,
+        isShowTempSlider: false,
+        tabActive: 'userOrOrg',
+        renewalSliderTitle: '',
+        curSliderName: '',
+        tableProps: [],
+        userList: [],
+        departList: [],
+        singleList: [],
+        currentSelectList: [],
+        queryGroupData: {},
+        tempDetailData: {},
+        tableEmptyData: {
+          type: '',
+          text: '',
+          tip: '',
+          tipType: ''
+        }
+      };
+    },
+    computed: {
+      formatJoinType () {
+        return (payload) => {
+          if (payload.template_id) {
+            return this.$t(`m.userOrOrg['通过人员模板']`);
+          }
+          if (payload.department_id) {
+            return this.$t(`m.userOrOrg['通过组织']`);
+          }
+          return this.$t(`m.perm['直接加入']`);
+        };
+      },
+      formatJoinTypeTip () {
+        return (payload) => {
+          if (payload.template_id) {
+            return this.$t(`m.userOrOrg['查看人员模板详情']`);
+          }
+          if (payload.department_id) {
+            return this.$t(`m.userOrOrg['查看该组织的用户组详情页']`);
+          }
+          return '';
+        };
+      },
+      formatUserName () {
+        const { id, name } = this.groupData;
+        const typeMap = {
+          user: () => {
+            return `${id} (${name})`;
+          },
+          department: () => {
+            return name;
+          }
+        };
+        if (typeMap[this.groupData.type]) {
+          return typeMap[this.groupData.type]();
+        }
+        return '';
+      },
+      formatAdminGroup () {
+        return (payload) => {
+          if (payload) {
+            const { attributes, role_members } = payload;
+            if (attributes && attributes.source_from_role && role_members.length === 1) {
+              return true;
+            }
+            return false;
+          }
+        };
+      }
+    },
+    watch: {
+      emptyData: {
+        handler (value) {
+          this.tableEmptyData = Object.assign({}, value);
+        },
+        immediate: true
+      },
+      mode: {
+        handler (value) {
+          this.tableProps = this.getTableProps(value);
+        },
+        immediate: true
+      },
+      groupData: {
+        handler (value) {
+          this.queryGroupData = cloneDeep(value);
+        },
+        immediate: true
+      },
+      curSelectedGroup: {
+        handler (value) {
+          this.currentSelectList = [...value];
+        },
+        deep: true
+      }
+    },
+    mounted () {
+      this.$once('hook:beforeDestroy', () => {
+        bus.$off('on-remove-toggle-checkbox');
+        bus.$off('on-info-change');
+      });
+      // 同步更新checkbox状态
+      bus.$on('on-remove-toggle-checkbox', (payload) => {
+        this.$emit('on-selected-group', payload);
+        this.$nextTick(() => {
+          this.list.forEach((item) => {
+            if (this.$refs.groupPermRef && !payload.map((v) => v.id).includes(item.id)) {
+              this.$refs.groupPermRef.toggleRowSelection(item, false);
+            }
+          });
+        });
+      });
+    },
+    methods: {
+      async fetchDetailInfo (id, name) {
+        try {
+          const { data } = await this.$store.dispatch('memberTemplate/subjectTemplateDetail', { id });
+          const { readonly, group_count } = data;
+          this.tempDetailData = {
+            tabActive: 'template_member',
+            mode: this.mode,
+            id,
+            name,
+            readonly,
+            group_count
+          };
+          this.isShowTempSlider = true;
+        } catch (e) {
+          this.messageAdvancedError(e);
+        }
+      },
+
+      async handleRemove (payload) {
+        const { type, id } = this.groupData;
+        try {
+          const params = {
+            members: [{
+              type,
+              id
+            }],
+            group_ids: [payload.id]
+          };
+          const emitParams = {
+            ...payload,
+            ...{
+              mode: this.mode
+            }
+          };
+          await this.$store.dispatch('userOrOrg/deleteGroupMembers', params);
+          this.messageSuccess(this.$t(`m.info['移出成功']`), 3000);
+          this.$emit('on-remove-group', emitParams);
+        } catch (e) {
+          console.error(e);
+          this.messageAdvancedError(e);
+        }
+      },
+
+      getTableProps (payload) {
+        const tabMap = {
+          personalOrDepartPerm: () => {
+            const { type } = this.queryGroupData;
+            const typeMap = {
+              user: () => {
+                return [
+                  { label: this.$t(`m.userGroup['用户组名']`), prop: 'name' },
+                  { label: this.$t(`m.common['描述']`), prop: 'description' },
+                  { label: this.$t(`m.common['加入时间']`), prop: 'created_time' },
+                  { label: this.$t(`m.common['有效期']`), prop: 'expired_at_display' },
+                  { label: this.$t(`m.common['操作-table']`), prop: 'operate' }
+                ];
+              },
+              department: () => {
+                return [
+                  { label: this.$t(`m.userGroup['用户组名']`), prop: 'name' },
+                  { label: this.$t(`m.common['描述']`), prop: 'description' },
+                  { label: this.$t(`m.common['加入时间']`), prop: 'created_time' },
+                  { label: this.$t(`m.perm['加入方式']`), prop: 'join_type' },
+                  { label: this.$t(`m.common['有效期']`), prop: 'expired_at_display' },
+                  { label: this.$t(`m.common['操作-table']`), prop: 'operate' }
+                ];
+              }
+            };
+            return typeMap[type] ? typeMap[type]() : typeMap['user']();
+          },
+          departPerm: () => {
+            return [
+              { label: this.$t(`m.userGroup['用户组名']`), prop: 'name' },
+              { label: this.$t(`m.common['描述']`), prop: 'description' },
+              { label: this.$t(`m.common['加入时间']`), prop: 'created_time' },
+              { label: this.$t(`m.perm['加入方式']`), prop: 'join_type' },
+              { label: this.$t(`m.common['有效期']`), prop: 'expired_at_display' }
+            ];
+          },
+          userTempPerm: () => {
+            return [
+              { label: this.$t(`m.userGroup['用户组名']`), prop: 'name' },
+              { label: this.$t(`m.common['描述']`), prop: 'description' },
+              { label: this.$t(`m.common['加入时间']`), prop: 'created_time' },
+              { label: this.$t(`m.perm['加入方式']`), prop: 'join_type' },
+              { label: this.$t(`m.common['有效期']`), prop: 'expired_at_display' }
+            ];
+          },
+          departTempPerm: () => {
+            return [
+              { label: this.$t(`m.userGroup['用户组名']`), prop: 'name' },
+              { label: this.$t(`m.common['描述']`), prop: 'description' },
+              { label: this.$t(`m.common['加入时间']`), prop: 'created_time' },
+              { label: this.$t(`m.perm['加入方式']`), prop: 'join_type' },
+              { label: this.$t(`m.common['有效期']`), prop: 'expired_at_display' }
+            ];
+          }
+        };
+        return tabMap[payload] ? tabMap[payload]() : tabMap['personalOrDepartPerm']();
+      },
+
+      handleOpenTag ({ id, department_name, template_name, template_id }, type) {
+        const routeMap = {
+          userGroupDetail: () => {
+            const routeData = this.$router.resolve({
+              path: `user-group-detail/${id}`,
+              query: {
+                noFrom: true
+              }
+            });
+            window.open(routeData.href, '_blank');
+          },
+          memberTemplate: async () => {
+            await this.fetchDetailInfo(template_id, template_name);
+          },
+          userOrgPerm: () => {
+            const routeData = this.$router.resolve({
+              path: `user-org-perm`,
+              query: {
+                department_name
+              }
+            });
+            window.open(routeData.href, '_blank');
+          }
+        };
+        return routeMap[type]();
+      },
+
+      handleShowRenewal (payload) {
+        this.curSliderName = 'renewal';
+        this.handleGetMembers();
+        this.renewalSliderTitle = this.$t(`m.common['续期']`);
+        this.singleList = [payload];
+        this.isShowRenewalSlider = true;
+      },
+
+      handleGetMembers () {
+        const userList = [];
+        const departList = [];
+        const typeMap = {
+          user: () => {
+            userList.push(this.queryGroupData);
+          },
+          department: () => {
+            departList.push(this.queryGroupData);
+          }
+        };
+        typeMap[this.queryGroupData.type]();
+        this.userList = [...userList];
+        this.departList = [...departList];
+      },
+
+      handleAddGroupSubmit (payload) {
+        const emitParams = {
+          ...payload,
+          ...{
+            mode: this.mode
+          }
+        };
+        this.$emit('on-add-group', emitParams);
+      },
+        
+      handlePageChange (page) {
+        this.$emit('on-page-change', page);
+      },
+  
+      handleLimitChange (limit) {
+        this.$emit('on-limit-change', limit);
+      },
+
+      handleAllChange (selection) {
+        this.fetchSelectedGroups('all', selection);
+      },
+
+      handleChange (selection, row) {
+        this.fetchSelectedGroups('multiple', selection, row);
+      },
+  
+      fetchSelectedGroups (type, payload, row) {
+        const typeMap = {
+          multiple: async () => {
+            const hasData = {};
+            const selectList = [...this.currentSelectList, ...this.curSelectedGroup].reduce((curr, next) => {
+              // eslint-disable-next-line no-unused-expressions
+              hasData[`${next.name}&${next.id}`] ? '' : hasData[`${next.name}&${next.id}`] = true && curr.push(next);
+              return curr;
+            }, []);
+            const isChecked = payload.length && payload.indexOf(row) !== -1;
+            if (isChecked) {
+              selectList.push(row);
+              this.currentSelectList = [...selectList];
+            } else {
+              this.currentSelectList = selectList.filter((item) => String(item.id) !== String(row.id));
+            }
+            this.fetchCustomTotal(this.currentSelectList);
+            this.$emit('on-selected-group', this.currentSelectList);
+          },
+          all: async () => {
+            const tableList = cloneDeep(this.list);
+            const hasData = {};
+            const selectList = [...this.currentSelectList, ...this.curSelectedGroup].reduce((curr, next) => {
+              // eslint-disable-next-line no-unused-expressions
+              hasData[`${next.name}&${next.id}`] ? '' : hasData[`${next.name}&${next.id}`] = true && curr.push(next);
+              return curr;
+            }, []);
+            const selectGroups = selectList.filter(
+              (item) => !tableList.map((v) => String(v.id)).includes(String(item.id))
+            );
+            this.currentSelectList = [...selectGroups, ...payload];
+            this.fetchCustomTotal(this.currentSelectList);
+            this.$emit('on-selected-group', this.currentSelectList);
+          }
+        };
+        return typeMap[type]();
+      },
+      
+      fetchCustomTotal (payload) {
+        this.$nextTick(() => {
+          const selectionCount = document.getElementsByClassName('bk-page-selection-count');
+          if (this.$refs.groupPermRef && selectionCount && selectionCount.length && selectionCount[0].children) {
+            selectionCount[0].children[0].innerHTML = payload.length;
+          }
+        });
+      },
+
+      handleEmptyClear () {
+        this.$emit('on-clear');
+      },
+  
+      handleEmptyRefresh () {
+        this.$emit('on-refresh');
+      },
+
+      getDefaultSelect () {
+        return this.list.length > 0;
+      }
+    }
+  };
+  </script>
+  
+  <style lang="postcss" scoped>
+  @import '@/views/user-org-perm/user-org-perm.css';
+  </style>
diff --git a/frontend/src/views/user-org-perm/components/join-user-group-slider.vue b/frontend/src/views/user-org-perm/components/join-user-group-slider.vue
new file mode 100644
index 000000000..91676a7c0
--- /dev/null
+++ b/frontend/src/views/user-org-perm/components/join-user-group-slider.vue
@@ -0,0 +1,479 @@
+<template>
+  <div>
+    <bk-sideslider
+      :is-show="isShowSideSlider"
+      :title="title"
+      :width="sliderWidth"
+      :quick-close="true"
+      ext-cls="iam-join-user-group-side"
+      @update:isShow="handleCancel('dialog')"
+
+    >
+      <div slot="content" class="iam-join-user-group-side-content">
+        <div class="join-user-group-content">
+          <bk-form form-type="vertical">
+            <bk-form-item
+              :class="['operate-object', { 'operate-object-single': !isBatch }]"
+              :label="!isBatch ? $t(`m.userOrOrg['操作对象']`) : ''"
+            >
+              <template v-if="isBatch">
+                <RenderPermBoundary
+                  ref="renderPermBoundaryRef"
+                  :modules="['membersPerm']"
+                  :user-length="userList.length"
+                  :depart-length="departList.length"
+                  :custom-title="$t(`m.userOrOrg['操作对象']`)"
+                  :custom-slot-name="'operateObject'"
+                  :is-custom-title-style="true"
+                >
+                  <div slot="operateObject">
+                    <span>{{ $t(`m.common['已选']`) }}</span>
+                    <template v-if="isHasUser">
+                      <span class="number">{{ userList.length }}</span>
+                      {{ $t(`m.common['个用户']`) }}
+                    </template>
+                    <template v-if="isHasUser && isHasDepartment">
+                      {{ $t(`m.common['，']`) }}
+                    </template>
+                    <template v-if="isHasDepartment">
+                      <span class="number">{{ departList.length }}</span>
+                      {{ $t(`m.common['个组织']`) }}
+                    </template>
+                  </div>
+                  <div slot="membersPerm" class="members-boundary-detail">
+                    <template>
+                      <render-member-item v-if="isHasUser" mode="view" type="user" :data="userList" />
+                      <render-member-item v-if="isHasDepartment" mode="view" type="department" :data="departList" />
+                    </template>
+                  </div>
+                </RenderPermBoundary>
+              </template>
+              <div v-else class="single-object">
+                <render-member-item v-if="isHasUser" mode="view" type="user" :data="userList" />
+                <render-member-item v-if="isHasDepartment" mode="view" type="department" :data="departList" />
+              </div>
+            </bk-form-item>
+            <bk-form-item
+              :label-width="0"
+              :required="true"
+              class="joined-user-group">
+              <template>
+                <template v-if="isBatch">
+                  <div class="render-join">
+                    <span class="render-join-label">
+                      {{ formatGroupTitle }}
+                    </span>
+                    <div class="render-join-tip">
+                      <Icon bk type="info-circle-shape" class="render-join-tip-icon" />
+                      <span>{{ formatGroupTip }}</span>
+                    </div>
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="render-join-label">{{ formatGroupTitle }}</div>
+                </template>
+              </template>
+              <div ref="selectTableRef">
+                <div class="joined-user-group-list">
+                  <JoinedUserGroupTable ref="joinedUserGroupRef" @on-selected-group="handleSelectedGroup" />
+                </div>
+              </div>
+              <p class="user-group-error" v-if="isShowGroupError">{{ $t(`m.permApply['请选择用户组']`) }}</p>
+            </bk-form-item>
+            <bk-form-item
+              :label="$t(`m.userOrOrg['申请时长']`)"
+              :label-width="300"
+              class="apply-expired-at"
+              :required="true"
+            >
+              <iam-deadline ref="expiredRef" :value="expiredAt" @on-change="handleDeadlineChange" :cur-role="curRole" />
+              <p class="expired-at-error" v-if="isShowExpiredError">{{ $t(`m.userOrOrg['请选择申请时长']`) }}</p>
+            </bk-form-item>
+          </bk-form>
+        </div>
+      </div>
+      <div slot="footer">
+        <div class="iam-join-user-group-side-footer">
+          <bk-button theme="primary" class="member-footer-btn" :loading="submitLoading" @click="handleSubmit">
+            {{ $t(`m.common['提交']`) }}
+          </bk-button>
+          <bk-button theme="default" class="member-footer-btn" @click="handleCancel('cancel')">
+            {{ $t(`m.common['取消']`) }}
+          </bk-button>
+        </div>
+      </div>
+    </bk-sideslider>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+  import { PERMANENT_TIMESTAMP } from '@/common/constants';
+  import { cloneDeep } from 'lodash';
+  import { leaveConfirm } from '@/common/leave-confirm';
+  import IamDeadline from '@/components/iam-deadline/horizontal';
+  import RenderPermBoundary from '@/components/render-perm-boundary';
+  import RenderMemberItem from '@/views/group/common/render-member-display';
+  import JoinedUserGroupTable from '@/views/user-org-perm/components/join-user-group-table.vue';
+
+  export default {
+    components: {
+      IamDeadline,
+      RenderPermBoundary,
+      RenderMemberItem,
+      JoinedUserGroupTable
+    },
+    props: {
+      show: {
+        type: Boolean,
+        default: false
+      },
+      isBatch: {
+        type: Boolean,
+        default: false
+      },
+      sliderWidth: {
+        type: Number
+      },
+      title: {
+        type: String
+      },
+      curSliderName: {
+        type: String
+      },
+      groupData: {
+        type: Object
+      },
+      userList: {
+        type: Array,
+        default: () => []
+      },
+      departList: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data () {
+      return {
+        submitLoading: false,
+        isShowGroupError: false,
+        isShowExpiredError: false,
+        expiredAt: 15552000,
+        expiredAtUse: 15552000,
+        customButtonStyle: {
+          width: '160px'
+        },
+        selectTableList: [],
+        submitFormData: {},
+        submitFormDataBack: {}
+      };
+    },
+    computed: {
+      ...mapGetters(['user']),
+      isShowSideSlider: {
+        get () {
+          return this.show;
+        },
+        set (newValue) {
+          this.$emit('update:show', newValue);
+        }
+      },
+      curRole () {
+        return this.user.role.type;
+      },
+      isHasUser () {
+        return this.userList.length > 0;
+      },
+      isHasDepartment () {
+        return this.departList.length > 0;
+      },
+      formatGroupTip () {
+        const typeMap = {
+          add: () => {
+            return this.$t(`m.userOrOrg['在已有用户组的基础上，追加以下所选的用户组']`);
+          },
+          reset: () => {
+            return this.$t(`m.userOrOrg['已选对象的权限将被清空，替换为以下所选的用户组']`);
+          }
+        };
+        if (typeMap[this.curSliderName]) {
+          return typeMap[this.curSliderName]();
+        }
+        return '';
+      },
+      formatGroupTitle () {
+        const typeMap = {
+          add: () => {
+            return this.$t(`m.userOrOrg['追加的用户组']`);
+          },
+          reset: () => {
+            return this.$t(`m.userOrOrg['重置的用户组']`);
+          }
+        };
+        if (typeMap[this.curSliderName]) {
+          return typeMap[this.curSliderName]();
+        }
+        return '';
+      }
+    },
+    watch: {
+      isShow: {
+        handler (value) {
+          if (value) {
+            this.submitFormData = Object.assign({}, {
+              expiredAtUse: this.expiredAtUse,
+              selectTableList: this.selectTableList
+            });
+            this.submitFormDataBack = cloneDeep(this.submitFormData);
+          }
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      handleExpiredAt () {
+        const nowTimestamp = +new Date() / 1000;
+        const tempArr = String(nowTimestamp).split('');
+        const dotIndex = tempArr.findIndex((item) => item === '.');
+        const nowSecond = parseInt(tempArr.splice(0, dotIndex).join(''), 10);
+        const expiredAt = this.expiredAtUse + nowSecond;
+        return expiredAt;
+      },
+
+      handleDeadlineChange (payload) {
+        if (payload) {
+          this.isShowExpiredError = false;
+        }
+        this.expiredAt = payload;
+        if (payload && payload !== PERMANENT_TIMESTAMP) {
+          const nowTimestamp = +new Date() / 1000;
+          const tempArr = String(nowTimestamp).split('');
+          const dotIndex = tempArr.findIndex((item) => item === '.');
+          const nowSecond = parseInt(tempArr.splice(0, dotIndex).join(''), 10);
+          this.expiredAtUse = payload + nowSecond;
+          this.submitFormData = Object.assign(this.submitFormData, { expiredAtUse: payload });
+          return;
+        }
+        this.expiredAtUse = payload;
+        this.submitFormData = Object.assign(this.submitFormData, { expiredAtUse: payload });
+      },
+
+      handleSelectedGroup (payload) {
+        this.isShowGroupError = false;
+        this.selectTableList = [...payload];
+        this.submitFormData = Object.assign(this.submitFormData, { selectTableList: payload });
+      },
+
+      async handleSubmit () {
+        const groupsList = this.$refs.joinedUserGroupRef.currentSelectedGroups;
+        if (!groupsList.length) {
+          this.isShowGroupError = true;
+          this.scrollToLocation(this.$refs.selectTableRef);
+          return;
+        }
+        if (!this.expiredAtUse) {
+          this.isShowExpiredError = true;
+          this.scrollToLocation(this.$refs.expiredRef);
+          return;
+        }
+        this.submitLoading = true;
+        if (this.expiredAtUse === 15552000) {
+          this.expiredAtUse = this.handleExpiredAt();
+        }
+        const members = [...this.userList, ...this.departList];
+        const params = {
+          expired_at: this.expiredAtUse,
+          group_ids: groupsList.map((item) => item.id),
+          members: members.map(({ id, type }) => ({ id, type }))
+        };
+        let url = '';
+        let msg = '';
+        const typeMap = {
+          add: () => {
+            url = 'userGroup/batchAddUserGroupMember';
+            msg = this.$t(`m.info['添加用户组成功']`);
+          },
+          reset: () => {
+            url = 'userOrOrg/resetGroupMembers';
+            msg = this.$t(`m.info['重置用户组成功']`);
+          }
+        };
+        typeMap[this.curSliderName]();
+        try {
+          const { code } = await this.$store.dispatch(url, params);
+          if (code === 0) {
+            this.messageSuccess(msg, 3000);
+            this.resetData();
+            this.$emit('on-submit', params);
+            this.$emit('update:show', false);
+          }
+        } catch (e) {
+          console.error(e);
+          this.messageAdvancedError(e);
+        } finally {
+          this.submitLoading = false;
+        }
+      },
+
+      handleCancel (payload) {
+        if (['cancel'].includes(payload)) {
+          this.$emit('update:show', false);
+          this.resetData();
+        } else {
+          window.changeAlert = JSON.stringify(this.submitFormData) !== JSON.stringify(this.submitFormDataBack);
+          let cancelHandler = Promise.resolve();
+          if (window.changeAlert) {
+            cancelHandler = leaveConfirm();
+          }
+          cancelHandler.then(
+            () => {
+              this.$emit('update:show', false);
+              this.resetData();
+            },
+            (_) => _
+          );
+        }
+      },
+
+      resetData () {
+        this.submitFormData = {};
+        this.submitFormDataBack = {};
+        this.selectTableList = [];
+        this.isShowGroupError = false;
+        this.isShowExpiredError = false;
+        this.expiredAt = 15552000;
+        this.expiredAtUse = 15552000;
+      }
+    }
+  };
+</script>
+
+<style lang="postcss" scoped>
+.iam-join-user-group-side {
+  &-content {
+    .join-user-group-content {
+      padding: 0 40px 16px 40px;
+      /deep/ .bk-form-item {
+        margin-top: 24px;
+        .bk-label {
+          font-weight: 700;
+          font-size: 14px;
+          color: #313238;
+        }
+        .verify-field-error {
+          font-size: 12px;
+          color: #ff4d4d;
+        }
+      }
+      .user-group-error,
+      .expired-at-error {
+        margin-top: 5px;
+        font-size: 12px;
+        color: #ff4d4d;
+      }
+    }
+  }
+  &-footer {
+    margin-left: 40px;
+    .member-footer-btn {
+      min-width: 88px;
+      margin-right: 8px;
+    }
+  }
+  /deep/ .bk-sideslider-footer {
+    background-color: #ffffff !important;
+  }
+  /deep/ .operate-object {
+    .horizontal-item {
+      width: 100%;
+      padding: 0;
+      margin-bottom: 0;
+      box-shadow: none;
+      display: inline-block;
+      .perm-boundary-title {
+        font-weight: 700;
+        font-size: 14px;
+        color: #313238;
+        margin-bottom: 0 !important;
+      }
+      .render-form-item {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    .members-boundary-detail {
+      padding: 16px;
+    }
+
+    .iam-member-display-wrapper {
+      margin-left: 0;
+      .label {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    &-single {
+      .iam-member-display-wrapper {
+        .label {
+          display: none;
+        }
+        .content {
+          .member-item {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+
+  /deep/ .joined-user-group {
+    .bk-label {
+      width: 100% !important;
+    }
+    &-list {
+      border: 1px solid #dcdee5;
+      border-radius: 2px;
+    }
+  }
+
+  /deep/ .render-join {
+    display: flex;
+    &-label {
+      position: relative;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 32px;
+      color: #313238;
+      margin-bottom: 8px !important;
+      &::after {
+        content: "*";
+        height: 8px;
+        line-height: 1;
+        font-size: 12px;
+        color: #ea3636;
+        display: inline-block;
+        vertical-align: middle;
+        position: absolute;
+        top: 50%;
+        transform: translate(3px,-50%);
+      }
+    }
+    &-tip {
+      margin-left: 20px;
+      line-height: 32px;
+      font-size: 12px;
+      color: #979ba5;
+      &-icon {
+        font-size: 13px;
+        color: #c4c6cc;
+      }
+    }
+  }
+
+  /deep/ .apply-expired-at {
+    .custom-time {
+      height: 26px;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/user-org-perm/components/join-user-group-table.vue b/frontend/src/views/user-org-perm/components/join-user-group-table.vue
new file mode 100644
index 000000000..4635fcc92
--- /dev/null
+++ b/frontend/src/views/user-org-perm/components/join-user-group-table.vue
@@ -0,0 +1,653 @@
+<template>
+  <div ref="selectTableRef" class="user-org-table-slider">
+    <div class="joined-user-group-wrapper">
+      <div class="joined-user-group-left">
+        <div class="search-wrapper">
+          <iam-search-select
+            ref="searchSelectRef"
+            :data="searchData"
+            :value="searchValue"
+            :placeholder="$t(`m.userOrOrg['搜索用户组名、描述']`)"
+            @on-input="handleSearchInput"
+            @on-change="handleSearch"
+            @on-click-menu="handleClickMenu"
+          />
+        </div>
+        <bk-table
+          ref="groupTableRef"
+          size="small"
+          ext-cls="group-table"
+          :outer-border="false"
+          :header-border="false"
+          :class="{ 'set-border': tableLoading }"
+          :data="tableList"
+          :max-height="pagination.count > 0 ? 527 : 280"
+          :cell-attributes="handleCellAttributes"
+          :pagination="pagination"
+          @page-change="handlePageChange"
+          @page-limit-change="handleLimitChange"
+          @select="handleSelectedChange"
+          @select-all="handleSelectedAllChange"
+          v-bkloading="{ isLoading: tableLoading, opacity: 1 }"
+        >
+          <bk-table-column type="selection" align="center" :selectable="setDefaultSelect" />
+          <bk-table-column :label="$t(`m.userGroup['用户组名']`)" :width="300">
+            <template slot-scope="{ row }">
+              <span
+                :class="[
+                  'user-group-name-label'
+                ]"
+                v-bk-tooltips="{
+                  content: row.name,
+                  placements: ['right-start']
+                }"
+                @click="handleNavGroup(row)"
+              >
+                {{ row.name }}
+              </span>
+            </template>
+          </bk-table-column>
+          <bk-table-column :label="$t(`m.common['描述']`)">
+            <template slot-scope="{ row }">
+              <span
+                v-bk-tooltips="{
+                  content: row.description,
+                  placements: ['right-start'],
+                  disabled: !row.description
+                }"
+              >
+                {{ row.description || '--' }}
+              </span>
+            </template>
+          </bk-table-column>
+          <template slot="empty">
+            <ExceptionEmpty
+              :type="emptyData.type"
+              :empty-text="emptyData.text"
+              :tip-text="emptyData.tip"
+              :tip-type="emptyData.tipType"
+              @on-clear="handleEmptyClear"
+              @on-refresh="handleEmptyRefresh"
+            />
+          </template>
+        </bk-table>
+      </div>
+      <div class="joined-user-group-right">
+        <div class="result-preview">
+          <div>{{ $t(`m.common['结果预览']`) }}</div>
+        </div>
+        <div class="has-selected" v-if="!isSelectedEmpty">
+          <div class="has-selected-title">
+            <span>{{ $t(`m.common['已选择']`) }}</span>
+            <span class="count">{{ currentSelectedGroups.length }}</span>
+            <span>{{ $t(`m.common['个用户组#']`) }}</span>
+          </div>
+          <bk-button
+            size="small"
+            theme="primary"
+            text
+            class="has-selected-clear"
+            @click="handleClearGroups"
+          >
+            {{ $t(`m.common['清空']`) }}
+          </bk-button>
+        </div>
+        <div class="content" v-if="!isSelectedEmpty">
+          <div class="selected-group-content">
+            <div class="selected-group-item" v-for="item in currentSelectedGroups" :key="item.id">
+              <div class="selected-group-item-left">
+                <span
+                  :class="[
+                    'single-hide',
+                    'selected-group-name'
+                  ]"
+                  :title="item.name"
+                >
+                  {{ item.name }}
+                </span>
+              </div>
+              <Icon bk type="close" class="delete-depart-icon" @click="handleDelete(item, 'organization')" />
+            </div>
+          </div>
+        </div>
+        <div class="selected-empty-wrapper" v-if="isSelectedEmpty">
+          <ExceptionEmpty />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import _ from 'lodash';
+  import { mapGetters } from 'vuex';
+  import { formatCodeData } from '@/common/util';
+  import IamSearchSelect from '@/components/iam-search-select';
+
+  export default {
+    components: {
+      IamSearchSelect
+    },
+    data () {
+      return {
+        expiredAt: 15552000,
+        expiredAtUse: 15552000,
+        tableLoading: false,
+        isShowGroupError: false,
+        tableList: [],
+        currentSelectList: [],
+        curUserGroup: [],
+        currentSelectedGroups: [],
+        defaultSelectedGroups: [],
+        searchParams: {},
+        searchList: [],
+        searchValue: [],
+        pagination: {
+          current: 1,
+          count: 0,
+          limit: 10,
+          type: 'compact',
+          showTotalCount: true
+        },
+        currentBackup: 1,
+        curGroupName: '',
+        curGroupId: '',
+        curSelectMenu: '',
+        curInputText: '',
+        queryParams: {},
+        emptyData: {
+          type: '',
+          text: '',
+          tip: '',
+          tipType: ''
+        },
+        searchData: [
+          {
+            id: 'name',
+            name: this.$t(`m.userGroup['用户组名']`),
+            default: true
+          },
+          {
+            id: 'description',
+            name: this.$t(`m.common['描述']`),
+            disabled: true
+          }
+        ],
+        contentWidth: window.innerWidth <= 1440 ? '200px' : '240px'
+      };
+    },
+    computed: {
+      ...mapGetters(['user', 'externalSystemId']),
+      isSelectedEmpty () {
+        return this.currentSelectedGroups.length < 1;
+      }
+    },
+    watch: {
+      'pagination.current' (value) {
+        this.currentBackup = value;
+      }
+    },
+    async created () {
+      this.fetchDefaultData();
+    },
+    mounted () {
+      window.addEventListener('resize', this.formatFormItemWidth);
+      this.$once('hook:beforeDestroy', () => {
+        window.removeEventListener('resize', this.formatFormItemWidth);
+      });
+    },
+    methods: {
+      formatFormItemWidth () {
+        this.contentWidth = window.innerWidth <= 1520 ? '200px' : '240px';
+      },
+      /**
+       * 获取页面数据
+       */
+      async fetchDefaultData () {
+        await this.fetchUserGroupList();
+      },
+
+      handleEmptyRefresh () {
+        this.searchParams = {};
+        this.queryParams = {};
+        this.searchValue = [];
+        this.emptyData.tipType = '';
+        this.resetPagination();
+        this.fetchUserGroupList(false);
+      },
+
+      handleEmptyClear () {
+        this.searchParams = {};
+        this.queryParams = {};
+        this.searchValue = [];
+        this.emptyData.tipType = '';
+        if (this.$refs.searchSelectRef && this.$refs.searchSelectRef.$refs.searchSelect) {
+          this.$refs.searchSelectRef.$refs.searchSelect.localValue = '';
+        }
+        this.resetPagination();
+        this.fetchUserGroupList(false);
+      },
+
+      // 处理手动输入各种场景
+      handleManualInput () {
+        if (this.curSelectMenu) {
+          // 转换为tag标签后,需要清空输入框的值
+          if (this.$refs.searchSelectRef && this.$refs.searchSelectRef.$refs.searchSelect) {
+            this.$refs.searchSelectRef.$refs.searchSelect.keySubmit();
+            this.$refs.searchSelectRef.$refs.searchSelect.localValue = '';
+          }
+          this.curSelectMenu = '';
+          this.curInputText = '';
+        } else {
+          // 如果当前已有tag，后面如果只输入文字没生成tag自动过滤掉
+          if (
+            this.searchList.length
+            && this.$refs.searchSelectRef
+            && this.$refs.searchSelectRef.$refs.searchSelect
+            && this.curInputText
+          ) {
+            this.$refs.searchSelectRef.$refs.searchSelect.localValue = '';
+          }
+          if (!this.searchList.length) {
+            // 处理无tag标签，直接输入内容情况
+            this.searchParams.name = this.curInputText;
+            if (!this.curInputText) {
+              delete this.searchParams.name;
+            }
+          }
+        }
+      },
+
+      async handleSearchUserGroup (isClick = false) {
+        this.handleManualInput();
+        await this.fetchUserGroupList(true);
+      },
+
+      async fetchSearchUserGroup (resourceInstances, isTableLoading = true) {
+        this.tableLoading = isTableLoading;
+        const { current, limit } = this.pagination;
+        if (this.searchParams.hasOwnProperty('id')) {
+          if (!isNaN(Number(this.searchParams.id))) {
+            this.searchParams.id = Number(this.searchParams.id);
+          }
+        }
+        const params = {
+          ...this.searchParams,
+          limit,
+          offset: limit * (current - 1),
+          resource_instances: resourceInstances || [],
+          apply_disable: false
+        };
+        try {
+          const { code, data } = await this.$store.dispatch('permApply/getJoinGroupSearch', params);
+          const { count, results } = data;
+          this.pagination.count = count || 0;
+          this.tableList.splice(0, this.tableList.length, ...(results || []));
+          this.emptyData.tipType = 'search';
+          this.emptyData = formatCodeData(code, this.emptyData, count === 0);
+          this.formatTableData();
+        } catch (e) {
+          console.error(e);
+          const { code } = e;
+          this.tableList = [];
+          this.emptyData = formatCodeData(code, this.emptyData);
+          this.messageAdvancedError(e);
+        } finally {
+          this.tableLoading = false;
+          this.curSelectMenu = '';
+          this.curInputText = '';
+        }
+      },
+
+      async fetchUserGroupList (isTableLoading = true) {
+        this.tableLoading = isTableLoading;
+        const { current, limit } = this.pagination;
+        delete this.searchParams.current;
+        const params = {
+          ...this.searchParams,
+          limit,
+          offset: limit * (current - 1),
+          apply_disable: false
+        };
+        try {
+          const { code, data } = await this.$store.dispatch('userGroup/getUserGroupList', params);
+          const { count, results } = data;
+          this.pagination.count = count || 0;
+          this.tableList.splice(0, this.tableList.length, ...(results || []));
+          this.emptyData = formatCodeData(code, this.emptyData, count === 0);
+          this.formatTableData();
+        } catch (e) {
+          console.error(e);
+          this.emptyData = formatCodeData(e.code, this.emptyData);
+          this.tableList = [];
+          this.messageAdvancedError(e);
+        } finally {
+          this.tableLoading = false;
+        }
+      },
+
+      formatTableData () {
+        this.$nextTick(() => {
+          const currentSelectedGroups = this.currentSelectedGroups.length
+            ? this.currentSelectedGroups.map((item) => String(item.id))
+            : [];
+          this.tableList.forEach((item) => {
+            if (item.role_members && item.role_members.length) {
+              const hasName = item.role_members.some((v) => v.username);
+              if (!hasName) {
+                item.role_members = item.role_members.map((v) => {
+                  return {
+                    username: v,
+                    readonly: false
+                  };
+                });
+              }
+            }
+            if (this.defaultSelectedGroups.length) {
+              const hasSelected = this.defaultSelectedGroups.find((v) => String(v.id) === String(item.id));
+              if (hasSelected) {
+                this.$set(item, 'expired_at', hasSelected.expired_at);
+                this.$set(item, 'expired_at_display', hasSelected.expired_at_display);
+                this.$refs.groupTableRef && this.$refs.groupTableRef.toggleRowSelection(item, true);
+              }
+            }
+            const hasSelectedData = [...currentSelectedGroups, ...this.curUserGroup].includes(String(item.id));
+            if (hasSelectedData) {
+              this.$refs.groupTableRef && this.$refs.groupTableRef.toggleRowSelection(item, true);
+              this.currentSelectList.push(item);
+            }
+          });
+        });
+      },
+
+      handleCellAttributes ({ rowIndex, cellIndex, row, column }) {
+        if (cellIndex === 0) {
+          if (this.curUserGroup.includes(String(row.id))) {
+            return {
+              title: this.$t(`m.userOrOrg['已加入该用户组']`)
+            };
+          }
+          return {};
+        }
+        return {};
+      },
+
+      handlePageChange (page) {
+        if (this.currentBackup === page) {
+          return;
+        }
+        this.pagination = Object.assign(this.pagination, { current: page });
+        this.queryParams = Object.assign(this.queryParams, { current: page });
+        this.handleSearchUserGroup();
+      },
+
+      handleLimitChange (currentLimit, prevLimit) {
+        this.pagination = Object.assign(this.pagination, { current: 1, limit: currentLimit });
+        this.queryParams = Object.assign(this.queryParams, { current: 1, limit: currentLimit });
+        this.handleSearchUserGroup();
+      },
+
+      handleClickMenu (payload) {
+        const { menu } = payload;
+        if (menu.id) {
+          this.curSelectMenu = menu.id;
+        }
+      },
+
+      handleSearchInput (payload) {
+        const { text } = payload;
+        this.curInputText = text;
+      },
+
+      handleSearch (payload, result) {
+        this.currentSelectList = [];
+        this.searchParams = payload;
+        this.searchList = [...result];
+        this.curSelectMenu = '';
+        this.curInputText = '';
+        this.emptyData.tipType = 'search';
+        this.resetPagination();
+        this.handleSearchUserGroup();
+      },
+
+      async handleClearSearch () {
+        this.emptyData.tipType = '';
+        this.resetPagination();
+        this.handleSearchUserGroup();
+      },
+
+      handleNavGroup ({ id, name }) {
+        this.curGroupName = name;
+        this.curGroupId = id;
+        const routeData = this.$router.resolve({
+          path: `user-group-detail/${id}`,
+          query: {
+            noFrom: true,
+            tab: 'group_perm'
+          }
+        });
+        window.open(routeData.href, '_blank');
+      },
+      
+      fetchSelectedGroups (type, payload, row) {
+        this.isShowGroupError = false;
+        const typeMap = {
+          multiple: () => {
+            const isChecked = payload.length && payload.indexOf(row) !== -1;
+            if (isChecked) {
+              this.currentSelectedGroups.push(row);
+            } else {
+              this.currentSelectedGroups = this.currentSelectedGroups.filter(
+                (item) => item.id.toString() !== row.id.toString()
+              );
+            }
+            this.$emit('on-selected-group', this.currentSelectedGroups);
+          },
+          all: () => {
+            const list = payload.filter((item) => !this.curUserGroup.includes(item.id.toString()));
+            this.currentSelectList = _.cloneDeep(list);
+            const tableList = _.cloneDeep(this.tableList);
+            const selectGroups = this.currentSelectedGroups.filter(
+              (item) => !tableList.map((v) => v.id.toString()).includes(item.id.toString())
+            );
+            this.currentSelectedGroups = [...selectGroups, ...list];
+            this.$emit('on-selected-group', this.currentSelectedGroups);
+          }
+        };
+        return typeMap[type]();
+      },
+
+      handleSelectedChange (selection, row) {
+        this.fetchSelectedGroups('multiple', selection, row);
+      },
+
+      handleSelectedAllChange (selection) {
+        this.fetchSelectedGroups('all', selection);
+      },
+
+      handleClearGroups () {
+        this.tableList.forEach((item) => {
+          if (!this.curUserGroup.includes(item.id.toString())) {
+            this.$refs.groupTableRef && this.$refs.groupTableRef.toggleRowSelection(item, false);
+          }
+        });
+        this.currentSelectedGroups = [];
+      },
+
+      handleDelete (payload) {
+        const index = this.currentSelectedGroups.findIndex((item) => item.id === payload.id);
+        const tableIndex = this.tableList.findIndex((item) => item.id === payload.id);
+        this.$refs.groupTableRef && this.$refs.groupTableRef.toggleRowSelection(this.tableList[tableIndex], false);
+        this.currentSelectedGroups.splice(index, 1);
+      },
+
+      handleBatchRenewal () {
+        this.$router.push({
+          name: 'permRenewal',
+          query: {
+            tab: 'group'
+          }
+        });
+      },
+      
+      setDefaultSelect (payload) {
+        return !this.curUserGroup.includes(payload.id.toString());
+      },
+
+      resetPagination () {
+        this.currentSelectList = [];
+        this.pagination = Object.assign(
+          this.pagination,
+          {
+            limit: 10,
+            current: 1,
+            count: 0
+          }
+        );
+      }
+    }
+  };
+</script>
+
+<style lang="postcss" scoped>
+.user-org-table-slider {
+  .joined-user-group-wrapper {
+    display: flex;
+    .joined-user-group-left {
+      width: calc(100% - 280px);
+      padding: 16px;
+      padding-bottom: 0;
+      /deep/ .search-wrapper {
+        padding-bottom: 12px;
+        .search-nextfix {
+          top: 0;
+        }
+      }
+      .group-table {
+        border: none;
+        .user-group-name {
+          /* display: flex;
+          align-items: center; */
+          &-label {
+            color: #3a84ff;
+            word-break: break-all;
+            cursor: pointer;
+            &:hover {
+              color: #699df4;
+            }
+            /* &-expired {
+              max-width: calc(100% - 150px);
+            } */
+          }
+          &-expired {
+            /* line-height: 1; */
+            margin-left: 5px;
+          }
+        }
+      }
+    }
+    .joined-user-group-right {
+      width: 280px;
+      padding: 0 16px;
+      color: #313238;
+      background: #F5F7FA;
+      position: relative;
+      .result-preview {
+        display: flex;
+        font-size: 14px;
+        line-height: 19px;
+        padding-top: 16px;
+        padding-bottom: 12px;
+      }
+      .has-selected {
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        line-height: 16px;
+        &-title {
+          .count {
+            color: #3a84ff;
+            font-weight: 700;
+          }
+        }
+        &-clear {
+          padding: 0;
+          height: 16px;
+          line-height: 16px;
+        }
+      }
+
+      .content {
+        position: relative;
+        margin: 12px 0 16px 0;
+        max-height: 510px;
+        overflow: auto;
+        &::-webkit-scrollbar {
+          width: 4px;
+          background-color: lighten(transparent, 80%);
+        }
+        &::-webkit-scrollbar-thumb {
+          height: 5px;
+          border-radius: 2px;
+          background-color: #e6e9ea;
+        }
+        .selected-group-content {
+            background-color: #ffffff;
+            .selected-group-item {
+              padding: 0 8px;
+              line-height: 32px;
+              box-shadow: 0 1px 1px 0 #00000014;
+              border-radius: 2px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              &:last-child {
+                margin-bottom: 1px;
+              }
+              &-left {
+                width: calc(100% - 30px);
+                display: flex;
+                align-items: center;
+              }
+              .selected-group-name {
+                display: inline-block;
+                margin-left: 5px;
+                font-size: 12px;
+                vertical-align: top;
+                word-break: break-all;
+              }
+              .delete-depart-icon {
+                display: block;
+                font-size: 18px;
+                color: #c4c6cc;
+                cursor: pointer;
+                &:hover {
+                  color: #3a84ff;
+                }
+              }
+              .user-count {
+                color: #c4c6cc;
+              }
+            }
+        }
+      }
+      .selected-empty-wrapper {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}
+
+/deep/ .bk-table-pagination-wrapper {
+  padding: 15px 0;
+  .bk-page.bk-page-align-right {
+    .bk-page-selection-count-left {
+      display: none;
+    }
+  }
+}
+
+</style>
diff --git a/frontend/src/views/user-org-perm/components/left-layout.vue b/frontend/src/views/user-org-perm/components/left-layout.vue
new file mode 100644
index 000000000..62f339f88
--- /dev/null
+++ b/frontend/src/views/user-org-perm/components/left-layout.vue
@@ -0,0 +1,585 @@
+<template>
+  <div class="user-org-perm-left-layout" :style="formatDragWidth">
+    <div class="title">
+      {{ $t(`m.userOrOrg['用户 / 组织列表']`) }}
+    </div>
+    <div class="group-operate-dropdown">
+      <bk-dropdown-menu
+        ref="batchDropdown"
+        v-bk-tooltips="{ content: $t(`m.userOrOrg['请先勾选用户/组织']`), disabled: currentSelectList.length }"
+        :ext-cls="formatDropDownClass"
+        :disabled="isBatchDisabled"
+        @show="handleDropdownShow"
+        @hide="handleDropdownHide"
+      >
+        <div class="group-dropdown-trigger-btn" slot="dropdown-trigger">
+          <span class="group-dropdown-text">{{ $t(`m.userOrOrg['批量操作']`) }}</span>
+          <i :class="['bk-icon icon-angle-down', { 'icon-flip': isDropdownShow }]" />
+        </div>
+        <ul class="bk-dropdown-list" slot="dropdown-content">
+          <li>
+            <a @click.stop="handleBatch('reset')">
+              {{ $t(`m.userOrOrg['重置用户组']`) }}
+            </a>
+          </li>
+          <li>
+            <a @click.stop="handleBatch('add')">
+              {{ $t(`m.userOrOrg['追加用户组']`) }}
+            </a>
+          </li>
+          <li>
+            <a @click.stop="handleBatch('clear')">
+              {{ $t(`m.userOrOrg['清空用户组']`) }}
+            </a>
+          </li>
+        </ul>
+      </bk-dropdown-menu>
+    </div>
+    <div v-if="list.length" class="group-list">
+      <div
+        ref="memberRef"
+        class="group-list-content"
+        :style="formatListHeight"
+        @scroll="handleScroll"
+      >
+        <div
+          v-for="item in list"
+          :key="item.id"
+          :class="['group-list-item', { active: `${item.id}&${item.name}` === selectActive }]"
+        >
+          <bk-checkbox v-model="item.checked" @change="handleChecked(...arguments, item)" />
+          <div class="group-content" @click.stop="handleSelect(item)">
+            <Icon
+              :type="formatTypeIcon(item.type)"
+              :class="['group-type-icon', { active: `${item.id}&${item.name}` === selectActive }]"
+            />
+            <div
+              v-if="['user'].includes(item.type)"
+              v-bk-tooltips="{
+                content: `${item.id} (${item.name})`,
+                placements: ['right-start'],
+                disabled: formatShowToolTip(item)
+              }"
+              :ref="`userOrg_${item.id}`"
+              class="single-hide group-name"
+            >
+              <span>{{ item.id }}</span>
+              <span style="margin-left: 5px;">({{ item.name }})</span>
+            </div>
+            <div
+              v-if="['department'].includes(item.type)"
+              :ref="`userOrg_${item.id}`"
+              v-bk-tooltips="{ content: item.name, placements: ['right-start'], disabled: formatShowToolTip(item) }"
+              class="single-hide group-name"
+            >
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="isScrollLoading"
+      class="load-more-wrapper"
+    >
+      <span
+        v-bkloading="{
+          isLoading: isScrollLoading,
+          opacity: 1,
+          color: '#979ba5',
+          mode: 'spin',
+          size: 'mini'
+        }"
+      />
+      <span class="loading-text">{{ $t(`m.common['加载中']`) }}</span>
+    </div>
+    <div v-if="!isScrollLoading && list.length && pagination.count - list.length > 0" class="total-count-display">
+      <span>{{ $t(`m.common['剩余加载数据']`, { value: pagination.count - list.length }) }}</span>
+    </div>
+    <div
+      v-if="!isScrollLoading && pagination.count - list.length === 0 && pagination.current > 1"
+      class="total-count-display"
+    >
+      <span>{{ $t(`m.common['已加载全部数据']`, { value: pagination.count - list.length }) }}</span>
+    </div>
+    <div v-else class="user-org-empty-wrapper">
+      <ExceptionEmpty
+        :type="groupEmptyData.type"
+        :empty-text="groupEmptyData.text"
+        :tip-text="groupEmptyData.tip"
+        :tip-type="groupEmptyData.tipType"
+        @on-clear="handleEmptyClear"
+        @on-refresh="handleEmptyRefresh"
+      />
+    </div>
+
+    <JoinUserGroupSlider
+      :slider-width="960"
+      :show.sync="['clear'].includes(curSliderName) ? false : sliderData[curSliderName].showSlider"
+      :cur-slider-name="curSliderName"
+      :is-batch="true"
+      :user-list="userList"
+      :depart-list="departList"
+      :title="formatSliderTitle"
+      :group-data="queryGroupData"
+      @on-submit="handleGroupSubmit"
+    />
+
+    <ClearUserGroupSlider
+      :slider-width="960"
+      :show.sync="sliderData['clear'].showSlider"
+      :title="formatSliderTitle"
+      :cur-slider-name="curSliderName"
+      :user-list="userList"
+      :depart-list="departList"
+      :group-data="queryGroupData"
+      @on-submit="handleGroupSubmit"
+    />
+  </div>
+</template>
+
+<script>
+  import { sleep } from '@/common/util';
+  import JoinUserGroupSlider from './join-user-group-slider.vue';
+  import ClearUserGroupSlider from './clear-user-group-slider.vue';
+
+  export default {
+    inject: ['showNoticeAlert'],
+    components: {
+      JoinUserGroupSlider,
+      ClearUserGroupSlider
+    },
+    props: {
+      isLoading: {
+        type: Boolean,
+        default: false
+      },
+      isNoExpandNoSearchData: {
+        type: Boolean,
+        default: false
+      },
+      isNoExpandHasSearchData: {
+        type: Boolean,
+        default: false
+      },
+      totalCount: {
+        type: Number
+      },
+      canScrollLoad: {
+        type: Boolean,
+        default: false
+      },
+      curSelectActive: {
+        type: String,
+        default: ''
+      },
+      groupData: {
+        type: Object
+      },
+      isSearchPerm: {
+        type: Boolean,
+        default: false
+      },
+      curSearchParams: {
+        type: Object,
+        default: () => {}
+      },
+      curSearchPagination: {
+        type: Object,
+        default: () => {
+          return {
+            current: 1,
+            limit: 10,
+            count: 0
+          };
+        }
+      },
+      pageConf: {
+        type: Object
+      },
+      emptyData: {
+        type: Object
+      },
+      list: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data () {
+      return {
+        enableGroupInstanceSearch: window.ENABLE_GROUP_INSTANCE_SEARCH.toLowerCase() === 'true',
+        selectActive: '',
+        curSliderName: 'add',
+        isDropdownShow: false,
+        isScrollLoading: false,
+        currentSelectList: [],
+        sliderData: {
+          reset: {
+            type: 'reset',
+            showSlider: false,
+            list: []
+          },
+          add: {
+            type: 'add',
+            showSlider: false,
+            list: []
+          },
+          clear: {
+            type: 'clear',
+            showSlider: false,
+            list: []
+          }
+        },
+        groupList: [],
+        userList: [],
+        departList: [],
+        queryGroupData: {},
+        pagination: {
+          current: 1,
+          limit: 10,
+          totalPage: 1,
+          count: 0
+        },
+        groupEmptyData: {
+          type: '',
+          text: '',
+          tip: '',
+          tipType: ''
+        }
+      };
+    },
+    computed: {
+      isBatchDisabled () {
+        return !this.currentSelectList.length;
+      },
+      formatTypeIcon () {
+        return (payload) => {
+          const typeMap = {
+            user: () => {
+              return 'personal-user';
+            },
+            department: () => {
+              return 'organization-fill';
+            }
+          };
+          return typeMap[payload]();
+        };
+      },
+      formatDragWidth () {
+        return {
+          minWidth: '224px'
+        };
+      },
+      formatSliderTitle () {
+        const nameMap = {
+          add: () => {
+            return this.$t(`m.userOrOrg['批量追加用户组']`);
+          },
+          reset: () => {
+            return this.$t(`m.userOrOrg['批量重置用户组']`);
+          },
+          clear: () => {
+            return this.$t(`m.userOrOrg['清空用户组']`);
+          }
+        };
+        return nameMap[this.curSliderName]();
+      },
+      formatListHeight () {
+        if (this.showNoticeAlert) {
+          if (this.isNoExpandNoSearchData) {
+            return {
+              height: 'calc(100vh - 265px)'
+            };
+          }
+          if (this.isNoExpandHasSearchData) {
+            return {
+              height: 'calc(100vh - 308px)'
+            };
+          }
+          if (!this.enableGroupInstanceSearch) {
+            return {
+              height: 'calc(100vh - 405px)'
+            };
+          }
+          return {
+            height: 'calc(100vh - 480px)'
+          };
+        }
+        if (this.isNoExpandNoSearchData) {
+          return {
+            height: 'calc(100vh - 226px)'
+          };
+        }
+        if (this.isNoExpandHasSearchData) {
+          return {
+            height: 'calc(100vh - 280px)'
+          };
+        }
+        if (!this.enableGroupInstanceSearch) {
+          return {
+            height: 'calc(100vh - 370px)'
+          };
+        }
+        return {
+          // height: 'calc(100vh - 400px)'
+          height: 'calc(100vh - 440px)'
+        };
+      },
+      formatDropDownClass () {
+        if (!this.curLanguageIsCn) {
+          return 'drop-down-operate drop-down-operate-lang';
+        }
+        return 'drop-down-operate';
+      }
+    },
+    watch: {
+      curSelectActive: {
+        handler (value) {
+          this.selectActive = value;
+        },
+        immediate: true
+      },
+      groupData: {
+        handler (value) {
+          this.queryGroupData = Object.assign({}, value);
+        },
+        immediate: true
+      },
+      emptyData: {
+        handler (value) {
+          this.groupEmptyData = Object.assign({}, value);
+        },
+        deep: true
+      },
+      pageConf: {
+        handler (value) {
+          this.pagination = Object.assign({}, value);
+        },
+        deep: true
+      }
+    },
+    methods: {
+      formatShowToolTip (payload) {
+        if (this.$refs[`userOrg_${payload.id}`] && this.$refs[`userOrg_${payload.id}`].length) {
+          const offsetWidth = this.$refs[`userOrg_${payload.id}`][0].offsetWidth;
+          return !(offsetWidth > 167);
+        }
+      },
+
+      handleChecked (newVal, oldVal, val, row) {
+        row.checked = newVal;
+        if (newVal) {
+          this.currentSelectList.push(row);
+        } else {
+          this.currentSelectList = this.currentSelectList.filter((item) => item.id !== row.id);
+        }
+      },
+
+      handleSelect (payload) {
+        this.selectActive = `${payload.id}&${payload.name}`;
+        this.$emit('on-select', payload);
+      },
+
+      handleBatch (payload) {
+        this.curSliderName = payload;
+        this.userList = this.currentSelectList.filter((item) => ['user'].includes(item.type));
+        this.departList = this.currentSelectList.filter((item) => ['department'].includes(item.type));
+        this.sliderData[payload] = Object.assign(this.sliderData[payload], {
+          showSlider: true,
+          list: this.currentSelectList
+        });
+      },
+
+      async handleGroupSubmit (payload) {
+        if (['clear'].includes(this.curSliderName)) {
+          if (payload && payload.isRefreshUser) {
+            this.currentSelectList = [];
+            this.$nextTick(() => {
+              if (this.$refs.memberRef) {
+                this.$refs.memberRef.scrollTop = 0;
+              }
+            });
+          }
+        }
+        this.$emit('on-batch-operate', {
+          name: this.curSliderName,
+          isRefreshUser: payload.isRefreshUser || false
+        });
+      },
+
+      handleResetScrollLoading () {
+        sleep(2000).then(() => {
+          this.isScrollLoading = false;
+        });
+      },
+
+      handleScroll (event) {
+        this.handleResetScrollLoading();
+        if (!this.canScrollLoad) {
+          return;
+        }
+        const { offsetHeight, scrollTop, scrollHeight } = event.target;
+        console.log(scrollTop, offsetHeight, scrollHeight);
+        if (scrollTop + offsetHeight >= scrollHeight - 5) {
+          this.isScrollLoading = true;
+          this.$emit('on-load-more');
+        }
+      },
+
+      handleDropdownShow () {
+        this.isDropdownShow = true;
+      },
+
+      handleDropdownHide () {
+        this.isDropdownShow = false;
+      },
+
+      handleEmptyClear () {
+        this.groupEmptyData.tipType = '';
+        this.$emit('on-clear');
+      },
+
+      handleEmptyRefresh () {
+        this.$emit('on-refresh');
+      }
+    }
+  };
+</script>
+
+<style lang="postcss" scoped>
+.user-org-perm-left-layout {
+  position: relative;
+  .title {
+    font-size: 14px;
+    color: #313238;
+    padding-top: 16px;
+    padding-left: 16px;
+  }
+
+  .group-list {
+    /* padding-right: 16px; */
+    position: relative;
+    &-content {
+      overflow-x: hidden;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: 3px;
+        height: 3px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: #dcdee5;
+        border-radius: 3px;
+      }
+      &::-webkit-scrollbar-track {
+        background: transparent;
+        border-radius: 3px;
+      }
+    }
+    &-item {
+      display: flex;
+      align-items: center;
+      line-height: 36px;
+      font-size: 13px;
+      /* padding: 0 8px; */
+      padding-left: 16px;
+      cursor: pointer;
+
+      .group-content {
+        width: calc(100% - 20px);
+        display: flex;
+        align-items: center;
+
+        .group-type-icon {
+          font-size: 14px;
+          color: #c4c6cc;
+          margin-left: 10px;
+          margin-right: 8px;
+          &.active {
+            color: #3a84ff;
+          }
+        }
+
+        .group-name {
+          max-width: 168px;
+          word-break: break-all;
+        }
+      }
+
+      &.active {
+        background-color: #e1ecff;
+        color: #3a84ff;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .load-more-wrapper,
+  .total-count-display  {
+    width: 100%;
+    font-size: 12px;
+    color: #979ba5;
+    background-color: #ffffff;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    .loading-text {
+      margin-left: 10px;
+    }
+  }
+
+  .user-org-empty-wrapper  {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, 50%);
+  }
+}
+/deep/ .group-operate-dropdown {
+  padding-top: 12px;
+  padding-left: 16px;
+  margin-bottom: 8px;
+  .bk-dropdown-content {
+    padding-top: 0;
+    cursor: pointer;
+  }
+
+  .drop-down-operate {
+    .group-dropdown-trigger-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #c4c6cc;
+      min-width: 92px;
+      height: 32px;
+      border-radius: 2px;
+      padding-left: 10px;
+      padding-right: 5px;
+      background-color: #ffffff;
+      color: #63656e;
+
+      &:hover {
+        cursor: pointer;
+        border-color: #979ba5;
+      }
+
+      .group-dropdown-text {
+        font-size: 14px;
+      }
+
+      .bk-icon {
+        font-size: 22px;
+      }
+    }
+    &.disabled,
+    &.disabled * {
+      background-color: #ffffff !important;
+      border-color: #dcdee5 !important;
+      color: #c4c6cc !important;
+      cursor: not-allowed;
+      div:nth-child(2) {
+        height: 0 !important;
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/user-org-perm/components/multi-type-group-perm.vue b/frontend/src/views/user-org-perm/components/multi-type-group-perm.vue
new file mode 100644
index 000000000..74c194f0c
--- /dev/null
+++ b/frontend/src/views/user-org-perm/components/multi-type-group-perm.vue
@@ -0,0 +1,701 @@
+<template>
+  <div class="user-org-group-perm">
+    <template v-if="permData.hasPerm">
+      <MemberTempPermPolicy
+        :ref="`memberTempPermPolicyRef_${item.id}`"
+        :custom-perm-ref="`memberTempPermPolicy_${item.id}`"
+        v-for="(item, index) in memberTempPermData"
+        :key="item.id"
+        :title="item.name"
+        :type-title="$t(`m.userGroup['用户组']`)"
+        :expanded.sync="item.expanded"
+        :ext-cls="formatExtCls(index)"
+        :class="[
+          { 'iam-perm-ext-reset-cls': index === memberTempPermData.length - 1 }
+        ]"
+        :perm-length="item.pagination.count"
+        :one-perm="formatPermLength"
+        :is-all-delete="false"
+        :show-collapse="false"
+        @on-expanded="handleExpanded(...arguments, item)"
+      >
+        <GroupPermTable
+          v-if="item.pagination.count > 0"
+          ref="childPermTable"
+          :mode="item.id"
+          :is-loading="item.loading"
+          :is-search-perm="isSearchResource"
+          :pagination="item.pagination"
+          :cur-search-params="curSearchParams"
+          :group-data="groupData"
+          :list="item.list"
+          :cur-selected-group="curSelectedGroup"
+          :empty-data="item.emptyData"
+          @on-page-change="handlePageChange(...arguments, item)"
+          @on-limit-change="handleLimitChange(...arguments, item)"
+          @on-selected-group="handleSelectedGroup"
+          @on-remove-group="handleRemoveGroup"
+          @on-add-group="handleAddGroup"
+          @on-clear="handleEmptyClear"
+          @on-refresh="handleEmptyRefresh"
+        />
+      </MemberTempPermPolicy>
+    </template>
+    <template v-else>
+      <div class="perm-empty-wrapper">
+        <ExceptionEmpty
+          :type="emptyPermData.type"
+          :empty-text="emptyPermData.text"
+          :tip-text="emptyPermData.tip"
+          :tip-type="emptyPermData.tipType"
+          @on-clear="handleEmptyClear"
+          @on-refresh="handleEmptyRefresh"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+  
+  <script>
+  import { cloneDeep } from 'lodash';
+  import { mapGetters } from 'vuex';
+  import { bus } from '@/common/bus';
+  import { formatCodeData, sleep } from '@/common/util';
+  import MemberTempPermPolicy from '@/components/custom-perm-system-policy/index.vue';
+  import GroupPermTable from './group-perm-table.vue';
+  export default {
+    components: {
+      MemberTempPermPolicy,
+      GroupPermTable
+    },
+    props: {
+      groupData: {
+        type: Object,
+        default: () => {
+          return {};
+        }
+      },
+      emptyData: {
+        type: Object,
+        default: () => {
+          return {
+            type: 'empty',
+            text: '暂无数据',
+            tip: '',
+            tipType: ''
+          };
+        }
+      
+      },
+      componentLoading: {
+        type: Boolean,
+        default: false
+      },
+      searchParams: {
+        type: Object
+      }
+    },
+    data () {
+      return {
+        permData: {
+          hasPerm: false
+        },
+        isOnlyPerm: false,
+        isSearchResource: false,
+        onePerm: 0,
+        totalCount: 0,
+        initMemberTempPermData: [
+          {
+            id: 'personalOrDepartPerm',
+            name: this.$t(`m.userOrOrg['个人用户组权限']`),
+            loading: false,
+            expanded: false,
+            pagination: {
+              current: 1,
+              limit: 10,
+              count: 0,
+              showTotalCount: true
+            },
+            emptyData: {
+              type: 'empty',
+              text: '暂无数据',
+              tip: '',
+              tipType: ''
+            },
+            list: []
+          },
+          {
+            id: 'departPerm',
+            name: this.$t(`m.userOrOrg['组织用户组权限']`),
+            loading: false,
+            expanded: false,
+            pagination: {
+              current: 1,
+              limit: 10,
+              count: 0,
+              showTotalCount: true
+            },
+            emptyData: {
+              type: 'empty',
+              text: '暂无数据',
+              tip: '',
+              tipType: ''
+            },
+            list: []
+          },
+          {
+            id: 'userTempPerm',
+            name: this.$t(`m.perm['直接加入人员模板的用户组权限']`),
+            loading: false,
+            expanded: false,
+            pagination: {
+              current: 1,
+              limit: 10,
+              count: 0,
+              showTotalCount: true
+            },
+            emptyData: {
+              type: 'empty',
+              text: '暂无数据',
+              tip: '',
+              tipType: ''
+            },
+            list: []
+          },
+          {
+            id: 'departTempPerm',
+            name: this.$t(`m.perm['通过组织加入人员模板的用户组权限']`),
+            loading: false,
+            expanded: false,
+            pagination: {
+              current: 1,
+              limit: 10,
+              count: 0,
+              showTotalCount: true
+            },
+            emptyData: {
+              type: 'empty',
+              text: '暂无数据',
+              tip: '',
+              tipType: ''
+            },
+            list: []
+          }
+        ],
+        memberTempPermData: [],
+        curSelectedGroup: [],
+        queryGroupData: {},
+        curSearchParams: {},
+        emptyPermData: {
+          type: 'empty',
+          text: '暂无数据',
+          tip: '',
+          tipType: ''
+        }
+      };
+    },
+    computed: {
+        ...mapGetters(['user', 'externalSystemId', 'mainContentLoading']),
+        formatExtCls () {
+          return (index) => {
+            if (this.isOnlyPerm) {
+              return 'only-perm-item-wrapper';
+            }
+            const isOnePerm = this.memberTempPermData.filter((item) => item.pagination.count > 0).length;
+            if (isOnePerm < 2) {
+              return 'iam-perm-no-border';
+            }
+            return index > 0 ? 'iam-perm-ext-cls' : '';
+          };
+        },
+        formatPermLength () {
+          const len = this.memberTempPermData.filter((item) => item.pagination.count > 0).length;
+          return len;
+        }
+    },
+    watch: {
+      groupData: {
+        handler (value) {
+          this.curSelectedGroup = [];
+          this.queryGroupData = cloneDeep(value);
+          // 只有手动切换组织架构成员时才重置数据，默认以兄弟组件通信处理交互
+          if (value.isClick) {
+            this.fetchResetData();
+          }
+        },
+        immediate: true
+      },
+      searchParams: {
+        handler (value) {
+          if (!value.action_id) {
+            delete value.resource_instances;
+          }
+          this.curSearchParams = { ...value };
+        },
+        immediate: true
+      },
+      emptyData: {
+        handler (value) {
+          this.emptyPermData = Object.assign({}, value);
+        },
+        immediate: true
+      }
+    },
+    mounted () {
+      this.$once('hook:beforeDestroy', () => {
+        bus.$off('on-refresh-resource-search');
+        bus.$off('on-refresh-template-table');
+        bus.$off('on-info-change');
+      });
+      bus.$on('on-refresh-resource-search', (payload) => {
+        const { isSearchPerm, curSearchParams } = payload;
+        this.curSearchParams = curSearchParams || {};
+        if (!this.curSearchParams.action_id) {
+          delete this.curSearchParams.resource_instances;
+        }
+        this.isSearchResource = isSearchPerm || false;
+        this.resetPagination();
+        this.fetchInitData();
+      });
+      bus.$on('on-info-change', ({ mode }) => {
+        const modeMap = {
+          userTempPerm: async () => {
+            await this.fetchPermByTempSearch();
+          },
+          departTempPerm: async () => {
+            await this.fetchDepartPermByTempSearch();
+          }
+        };
+        if (modeMap[mode]) {
+          modeMap[mode]();
+        }
+      });
+      bus.$on('on-refresh-template-table', async (payload) => {
+        this.resetPagination();
+        await this.fetchInitData();
+        this.formatExpandedData(payload);
+      });
+    },
+    methods: {
+      async fetchResetData () {
+        // this.emptyPermData.tipType = '';
+        // this.handleEmptyClear();
+        this.resetPagination();
+        await this.fetchInitData();
+      },
+
+      // 获取个人/部门用户组
+      async fetchUserGroupSearch () {
+        const { id, type } = this.queryGroupData;
+        const { emptyData, pagination } = this.memberTempPermData[0];
+        try {
+          this.memberTempPermData[0].loading = true;
+          const { current, limit } = pagination;
+          const url = 'userOrOrg/getUserOrDepartGroupList';
+          const params = {
+            ...this.curSearchParams,
+            limit,
+            offset: limit * (current - 1)
+          };
+          if (this.externalSystemId) {
+            params.system_id = this.externalSystemId;
+            params.hidden = false;
+          }
+          const { code, data } = await this.$store.dispatch(url, {
+              ...params,
+              ...{
+                subject_type: type,
+                subject_id: id
+              }
+          });
+          const totalCount = data.count || 0;
+          this.memberTempPermData[0] = Object.assign(this.memberTempPermData[0], {
+            list: data.results || [],
+            emptyData: formatCodeData(code, emptyData, totalCount === 0),
+            pagination: { ...pagination, ...{ count: totalCount } }
+          });
+          this.emptyPermData = cloneDeep(this.memberTempPermData[0].emptyData);
+          setTimeout(() => {
+            const curSelectedId = this.curSelectedGroup.map((item) => item.id);
+            this.memberTempPermData[0].list.forEach((item) => {
+              if (this.$refs.childPermTable && this.$refs.childPermTable.length) {
+                if (curSelectedId.includes(item.id)) {
+                  this.$refs.childPermTable[0].$refs.groupPermRef.toggleRowSelection(item, true);
+                }
+                this.$refs.childPermTable[0].fetchCustomTotal(this.curSelectedGroup);
+              }
+            });
+          }, 0);
+        } catch (e) {
+          console.error(e);
+          this.emptyPermData = formatCodeData(e.code, emptyData);
+          this.memberTempPermData[0] = Object.assign(this.memberTempPermData[0], {
+            list: [],
+            emptyData: formatCodeData(e.code, emptyData),
+            pagination: { ...pagination, ...{ count: 0 } }
+          });
+          this.messageAdvancedError(e);
+        } finally {
+          this.memberTempPermData[0].loading = false;
+        }
+      },
+
+      // 获取用户所属部门用户组
+      async fetchDepartGroupSearch () {
+        const { id, type } = this.queryGroupData;
+        const curData = this.memberTempPermData.find((item) => item.id === 'departPerm');
+        const { emptyData, pagination } = curData;
+        try {
+          curData.loading = true;
+          const { current, limit } = pagination;
+          const params = {
+            ...this.curSearchParams,
+            ...{
+              subject_type: type,
+              subject_id: id
+            },
+            limit,
+            offset: limit * (current - 1)
+          };
+          if (this.externalSystemId) {
+            params.system_id = this.externalSystemId;
+            params.hidden = false;
+          }
+          // 'userOrOrg/getUserOrDepartGroupList',
+          const { code, data } = await this.$store.dispatch(
+            'userOrOrg/getUserGroupByDepartList',
+            params
+          );
+          const totalCount = data.count || 0;
+          this.memberTempPermData[1] = Object.assign(this.memberTempPermData[1], {
+            list: data.results || [],
+            emptyData: formatCodeData(code, emptyData, totalCount === 0),
+            pagination: { ...pagination, ...{ count: totalCount } }
+          });
+        } catch (e) {
+          console.error(e);
+          this.memberTempPermData[1] = Object.assign(this.memberTempPermData[1], {
+            list: [],
+            emptyData: formatCodeData(e.code, emptyData),
+            pagination: { ...pagination, ...{ count: 0 } }
+          });
+          this.messageAdvancedError(e);
+        } finally {
+          curData.loading = false;
+        }
+      },
+  
+      // 用户人员模板用户组权限
+      async fetchPermByTempSearch () {
+        let curData = this.memberTempPermData.find((item) => item.id === 'userTempPerm');
+        const { emptyData, pagination } = curData;
+        const { id, type } = this.queryGroupData;
+        try {
+          curData.loading = true;
+          const { current, limit } = pagination;
+          const url = 'userOrOrg/getUserMemberTempList';
+          // let url = 'userOrOrg/getUserOrDepartGroupList';
+          const params = {
+            ...this.curSearchParams,
+            limit,
+            offset: limit * (current - 1)
+          };
+          if (this.externalSystemId) {
+            params.system_id = this.externalSystemId;
+            params.hidden = false;
+          }
+          const { code, data } = await this.$store.dispatch(url, {
+              ...params,
+              ...{
+                subject_type: type,
+                subject_id: id
+              }
+          });
+          const totalCount = data.count;
+          curData = Object.assign(curData, {
+            list: data.results || [],
+            emptyData: formatCodeData(code, emptyData, totalCount === 0),
+            pagination: { ...pagination, ...{ count: totalCount } }
+          });
+          this.emptyPermData = cloneDeep(curData.emptyData);
+          this.$nextTick(() => {
+            curData.list.forEach(item => {
+              item.role_members = this.formatRoleMembers(item.role_members);
+            });
+          });
+        } catch (e) {
+          console.error(e);
+          curData = Object.assign(curData, {
+            list: [],
+            emptyData: formatCodeData(e.code, emptyData),
+            pagination: { ...pagination, ...{ count: 0 } }
+          });
+          this.emptyPermData = formatCodeData(e.code, emptyData);
+          this.messageAdvancedError(e);
+        } finally {
+          curData.loading = false;
+        }
+      },
+
+      // 部门人员模版用户组权限
+      async fetchDepartPermByTempSearch () {
+        let curData = this.memberTempPermData.find((item) => item.id === 'departTempPerm');
+        const { emptyData, pagination } = curData;
+        const { id, type } = this.queryGroupData;
+        try {
+          curData.loading = true;
+          const { current, limit } = pagination;
+          const url = 'userOrOrg/getDepartMemberTempList';
+          // let url = 'userOrOrg/getUserOrDepartGroupList';
+          const params = {
+            ...this.curSearchParams,
+            limit,
+            offset: limit * (current - 1)
+          };
+          if (this.externalSystemId) {
+            params.system_id = this.externalSystemId;
+            params.hidden = false;
+          }
+          const { code, data } = await this.$store.dispatch(url, {
+              ...params,
+              ...{
+                subject_type: type,
+                subject_id: id
+              }
+          });
+          const totalCount = data.count;
+          curData = Object.assign(curData, {
+            list: data.results || [],
+            emptyData: formatCodeData(code, emptyData, totalCount === 0),
+            pagination: { ...pagination, ...{ count: totalCount } }
+          });
+          this.emptyPermData = cloneDeep(curData.emptyData);
+        } catch (e) {
+          console.error(e);
+          curData = Object.assign(curData, {
+            list: [],
+            emptyData: formatCodeData(e.code, emptyData),
+            pagination: { ...pagination, ...{ count: 0 } }
+          });
+          this.emptyPermData = formatCodeData(e.code, emptyData);
+          this.messageAdvancedError(e);
+        } finally {
+          curData.loading = false;
+        }
+      },
+  
+      async fetchInitData () {
+        const routeMap = {
+          userOrgPerm: () => {
+            const typeMap = {
+              user: async () => {
+                this.memberTempPermData = cloneDeep(this.initMemberTempPermData);
+                this.memberTempPermData[0] = Object.assign(this.memberTempPermData[0], { name: this.$t(`m.userOrOrg['个人用户组权限']`) });
+                await Promise.all([
+                  this.fetchUserGroupSearch(),
+                  this.fetchDepartGroupSearch(),
+                  this.fetchPermByTempSearch(),
+                  this.fetchDepartPermByTempSearch()
+                ]);
+                this.$set(this.permData, 'hasPerm', this.memberTempPermData.some((v) => v.pagination.count > 0));
+                this.isOnlyPerm = this.memberTempPermData.filter((v) => v.pagination.count > 0).length === 1;
+                this.formatDefaultExpand();
+                // 清空用户组需要判断如果有组织或者人员模板权限则代表左侧选中的数据还存在，不需要取第一条数据
+                const hasData = this.memberTempPermData.filter((item) => !['personalOrDepartPerm'].includes(item.id)).some((v) => v.pagination.count > 0);
+                bus.$emit('on-exist-other-perm', { isRefreshUser: !hasData });
+              },
+              department: async () => {
+                this.memberTempPermData = this.initMemberTempPermData.filter((item) => ['personalOrDepartPerm', 'userTempPerm'].includes(item.id));
+                this.memberTempPermData[0] = Object.assign(this.memberTempPermData[0], { name: this.$t(`m.perm['用户组权限']`) });
+                await Promise.all([
+                  this.fetchUserGroupSearch(),
+                  this.fetchPermByTempSearch()
+                ]);
+                this.$set(this.permData, 'hasPerm', this.memberTempPermData.some((v) => v.pagination.count > 0));
+                this.isOnlyPerm = this.memberTempPermData.filter((v) => v.pagination.count > 0).length === 1;
+                this.formatDefaultExpand();
+                // 清空用户组需要判断如果有组织或者人员模板权限则代表左侧选中的数据还存在，不需要取第一条数据
+                const hasData = this.memberTempPermData.filter((item) => !['personalOrDepartPerm'].includes(item.id)).some((v) => v.pagination.count > 0);
+                bus.$emit('on-exist-other-perm', { isRefreshUser: !hasData });
+              }
+            };
+            return typeMap[this.queryGroupData.type]();
+          }
+        };
+        if (routeMap[this.$route.name]) {
+          await routeMap[this.$route.name]();
+        }
+      },
+
+      formatDefaultExpand () {
+        const curData = this.memberTempPermData.find((v) => v.pagination.count > 0);
+        this.$nextTick(() => {
+          this.memberTempPermData.forEach((item) => {
+            if (curData && curData.id === item.id) {
+              this.$refs[`memberTempPermPolicyRef_${item.id}`][0].handleExpanded(false);
+              item.expanded = true;
+            } else {
+              item.expanded = false;
+            }
+          });
+        });
+      },
+
+      formatExpandedData (payload) {
+        setTimeout(() => {
+          this.memberTempPermData.forEach((item) => {
+            if (item.expanded || item.id === payload.mode) {
+              const hasRef = this.$refs[`memberTempPermPolicyRef_${item.id}`];
+              if (hasRef && hasRef.length > 0) {
+                hasRef[0].handleExpanded(false);
+                // if (payload.id === item.id) {
+                //   const top = hasRef[0].$el.getBoundingClientRect().top;
+                //   console.log(hasRef[0].$refs[`memberTempPermPolicy_${payload.id}`]);
+                // hasRef[0].$refs[`memberTempPermPolicy_${payload.id}`].$el.scrollIntoView({
+                //   top: -top,
+                //   block: 'start'
+                // });
+                // }
+              }
+            } else {
+              item.expanded = false;
+            }
+          }, 0);
+        });
+      },
+
+      formatRoleMembers (payload) {
+        if (payload && payload.length) {
+          const hasName = payload.some((v) => v.username);
+          if (!hasName) {
+            payload = payload.map(v => {
+              return {
+                username: v,
+                readonly: false
+              };
+            });
+          }
+        }
+        return payload || [];
+      },
+
+      formatPaginationData (payload, current, limit) {
+        const curData = this.memberTempPermData.find((item) => item.id === payload.id);
+        if (curData) {
+          const typeMap = {
+            personalOrDepartPerm: async () => {
+              curData.pagination = Object.assign(curData, { current, limit });
+              if (['userOrgPerm'].includes(this.$route.name)) {
+                await this.fetchUserGroupSearch();
+                this.formatExpandedData(curData);
+              }
+            },
+            departPerm: async () => {
+              curData.pagination = Object.assign(curData, { current, limit });
+              if (['userOrgPerm'].includes(this.$route.name)) {
+                await this.fetchDepartGroupSearch();
+                this.formatExpandedData(curData);
+              }
+            },
+            userTempPerm: async () => {
+              curData.pagination = Object.assign(curData, { current, limit });
+              if (['userOrgPerm'].includes(this.$route.name)) {
+                await this.fetchPermByTempSearch();
+                this.formatExpandedData(curData);
+              }
+            },
+            departTempPerm: async () => {
+              curData.pagination = Object.assign(curData, { current, limit });
+              if (['userOrgPerm'].includes(this.$route.name)) {
+                await this.fetchDepartPermByTempSearch();
+                this.formatExpandedData(curData);
+              }
+            }
+          };
+          typeMap[curData.id]();
+        }
+      },
+
+      handleExpanded (value, payload) {
+        if (!value) {
+          this.handleSelectedGroup([]);
+          bus.$emit('on-remove-toggle-checkbox', this.curSelectedGroup);
+        }
+        payload.loading = value;
+        sleep(300).then(() => {
+          payload.loading = false;
+        });
+      },
+
+      handleSelectedGroup (payload) {
+        this.$emit('on-selected-group', payload);
+        this.curSelectedGroup = [...payload];
+      },
+
+      handleRefreshGroup (payload, current) {
+        const curData = this.memberTempPermData.find((item) => item.id === payload.mode);
+        this.formatPaginationData(curData, current, curData.pagination.limit);
+        this.curSelectedGroup = [];
+        this.$emit('on-selected-group', []);
+      },
+
+      handleAddGroup (payload) {
+        const curData = this.memberTempPermData.find((item) => item.id === payload.mode);
+        this.handleRefreshGroup(payload, curData.pagination.current);
+      },
+
+      handleRemoveGroup (payload) {
+        this.handleRefreshGroup(payload, 1);
+      },
+  
+      handlePageChange (current, payload) {
+        const curData = this.memberTempPermData.find((item) => item.id === payload.id);
+        this.formatPaginationData(payload, current, curData.pagination.limit);
+      },
+  
+      handleLimitChange (limit, payload) {
+        const curData = this.memberTempPermData.find((item) => item.id === payload.id);
+        curData.current = 1;
+        this.formatPaginationData(payload, curData.current, limit);
+      },
+  
+      handleEmptyRefresh () {
+        this.resetPagination();
+        this.$emit('on-refresh');
+      },
+  
+      handleEmptyClear () {
+        this.resetPagination();
+        this.$emit('on-clear');
+      },
+
+      resetPagination (limit = 10) {
+        this.memberTempPermData.forEach((item) => {
+          item.pagination = Object.assign(item.pagination, { current: 1, limit });
+        });
+      }
+    }
+  };
+  </script>
+  
+  <style lang="postcss" scoped>
+  .user-org-group-perm {
+    width: 100%;
+    position: relative;
+    .iam-perm-ext-cls {
+      margin-top: 1px;
+    }
+    .iam-perm-ext-reset-cls {
+      margin-bottom: 20px;
+    }
+    .iam-perm-no-border {
+      border: none;
+    }
+    .perm-empty-wrapper {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, 50%);
+    }
+  }
+  </style>
diff --git a/frontend/src/views/user-org-perm/components/page-layout.vue b/frontend/src/views/user-org-perm/components/page-layout.vue
new file mode 100644
index 000000000..f4a4b9898
--- /dev/null
+++ b/frontend/src/views/user-org-perm/components/page-layout.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="page-layout">
+    <div :class="[
+      'left-layout',
+      { 'no-expand': !isExpand }
+    ]">
+      <slot />
+    </div>
+    <slot name="expand-icon" />
+    <div :class="[
+      'right-layout',
+      { 'right-layout-no-search': !isShowResourceSearch },
+      { 'right-layout-no-search-show-notice': !isShowResourceSearch && showNoticeAlert },
+      { 'no-expand': isNoExpandNoSearchData },
+      { 'no-expand-has-search': isNoExpandHasSearchData },
+      { 'expand-show-notice': !isNoExpandNoSearchData && showNoticeAlert },
+      { 'no-expand-show-notice': (isNoExpandNoSearchData || isNoExpandHasSearchData ) && showNoticeAlert }
+    ]">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    inject: ['showNoticeAlert'],
+    props: {
+      isExpand: {
+        type: Boolean,
+        default: true
+      },
+      isNoExpandNoSearchData: {
+        type: Boolean,
+        default: false
+      },
+      isNoExpandHasSearchData: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        isShowResourceSearch: window.ENABLE_GROUP_INSTANCE_SEARCH.toLowerCase() === 'true'
+      };
+    }
+  };
+</script>
+
+<style lang="postcss" scoped>
+.page-layout {
+  display: flex;
+  padding: 0;
+  .left-layout {
+    flex: 0 0 240px;
+    height: calc(100vh - 61px);
+    background-color: #ffffff;
+    overflow: hidden;
+    &.no-expand {
+      display: none;
+    }
+  }
+  .right-layout {
+    padding: 16px 16px 0 0;
+    flex: 1 0 auto;
+    width: calc(100% - 240px);
+    height: calc(100vh - 314px);
+    /* background-color: #f5f6fa; */
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 4px;
+      background-color: lighten(transparent, 80%);
+    }
+    &::-webkit-scrollbar-thumb {
+      height: 5px;
+      border-radius: 2px;
+      background-color: #e6e9ea;
+    }
+    &-no-search {
+      height: calc(100vh - 240px);
+    }
+    &.no-expand {
+      height: calc(100vh - 112px);
+    }
+    &.no-expand-has-search {
+      height: calc(100vh - 112px);
+    }
+    &.expand-show-notice {
+      height: calc(100vh - 375px);
+    }
+    &.no-expand-show-notice {
+      height: calc(100vh - 146px);
+    }
+    &-no-search-show-notice {
+      height: calc(100vh - 295px);
+    }
+  }
+
+  .external-right-height {
+    padding: 30px 30px 0;
+    height: calc(100vh - 5px);
+  }
+}
+</style>
diff --git a/frontend/src/views/user-org-perm/components/right-layout.vue b/frontend/src/views/user-org-perm/components/right-layout.vue
new file mode 100644
index 000000000..7b18f548b
--- /dev/null
+++ b/frontend/src/views/user-org-perm/components/right-layout.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="user-org-right-wrapper">
+    <div class="user-name">{{ formatUserName }}</div>
+    <div class="header-operate">
+      <div>
+        <bk-button theme="primary" @click="handleAddGroup">
+          {{ $t(`m.userOrOrg['加入用户组']`) }}
+        </bk-button>
+      </div>
+      <div class="group-detail-dropdown">
+        <bk-dropdown-menu
+          ref="batchDropdown"
+          v-bk-tooltips="{ content: $t(`m.userOrOrg['请先勾选用户组权限']`), disabled: selectedGroups.length }"
+          :disabled="isBatchDisabled"
+          @show="handleDropdownShow"
+          @hide="handleDropdownHide"
+        >
+          <div class="group-dropdown-trigger-btn" slot="dropdown-trigger">
+            <span class="group-dropdown-text">{{ $t(`m.userOrOrg['批量操作']`) }}</span>
+            <i :class="['bk-icon icon-angle-down', { 'icon-flip': isDropdownShow }]" />
+          </div>
+          <ul class="bk-dropdown-list" slot="dropdown-content">
+            <li>
+              <a
+                :class="[{ 'remove-disabled': isNoBatchRemove() }]"
+                v-bk-tooltips="{ content: removeGroupTitle, disabled: !removeGroupTitle,placements: ['right-start'] }"
+                @click.stop="handleBatch('remove')"
+              >
+                {{ $t(`m.userOrOrg['移出']`) }}
+              </a>
+            </li>
+            <li>
+              <a
+                :class="[{ 'renewal-disabled': isNoBatchRenewal() }]"
+                v-bk-tooltips="{
+                  content: renewalGroupTitle,
+                  disabled: !renewalGroupTitle, placements: ['right-start']
+                }"
+                @click.stop="handleBatch('renewal')">
+                {{ $t(`m.renewal['续期']`) }}
+              </a>
+            </li>
+          </ul>
+        </bk-dropdown-menu>
+      </div>
+    </div>
+    <div class="group-detail-table">
+      <component
+        ref="childPermRef"
+        :key="componentsKey"
+        :is="curCom"
+        :group-data="queryGroupData"
+        :empty-data="curEmptyData"
+        :search-params="curSearchParams"
+        :search-pagination="curSearchPagination"
+        :is-search-perm="isSearchPerm"
+        @on-selected-group="handleSelectedGroup"
+        @on-clear="handleEmptyClear"
+        @on-refresh="handleEmptyRefresh"
+      />
+    </div>
+    <!-- 加入用户组slider -->
+    <JoinUserGroupSlider
+      :slider-width="960"
+      :show.sync="isShowAddGroupSlider"
+      :is-batch="false"
+      :cur-slider-name="curSliderName"
+      :user-list="userList"
+      :depart-list="departList"
+      :title="$t(`m.userOrOrg['加入用户组']`)"
+      :group-data="queryGroupData"
+      @on-submit="handleAddGroupSubmit"
+    />
+
+    <BatchOperateSlider
+      :slider-width="960"
+      :show.sync="isShowBatchSlider"
+      :is-batch="false"
+      :cur-slider-name="curSliderName"
+      :user-list="userList"
+      :depart-list="departList"
+      :title="batchSliderTitle"
+      :group-data="queryGroupData"
+      :group-list="selectedGroups"
+      @on-submit="handleAddGroupSubmit"
+    />
+  </div>
+</template>
+
+<script>
+  import { cloneDeep } from 'lodash';
+  import { PERMANENT_TIMESTAMP } from '@/common/constants';
+  import { bus } from '@/common/bus';
+  import MultiTypeGroupPerm from './multi-type-group-perm.vue';
+  import JoinUserGroupSlider from './join-user-group-slider.vue';
+  import BatchOperateSlider from './batch-operate-slider.vue';
+
+  const COM_MAP = new Map([
+    [['user', 'department'], 'MultiTypeGroupPerm']
+  ]);
+
+  export default {
+    components: {
+      MultiTypeGroupPerm,
+      JoinUserGroupSlider,
+      BatchOperateSlider
+    },
+    props: {
+      groupData: {
+        type: Object
+      },
+      isSearchPerm: {
+        type: Boolean,
+        default: false
+      },
+      curSearchParams: {
+        type: Object,
+        default: () => {}
+      },
+      curSearchPagination: {
+        type: Object,
+        default: () => {
+          return {
+            current: 1,
+            limit: 10,
+            count: 0
+          };
+        }
+      }
+    },
+    data () {
+      return {
+        isDropdownShow: false,
+        isShowAddGroupSlider: false,
+        isShowBatchSlider: false,
+        batchSliderTitle: '',
+        removeGroupTitle: '',
+        renewalGroupTitle: '',
+        curSliderName: '',
+        componentsKey: -1,
+        selectedGroups: [],
+        userList: [],
+        departList: [],
+        queryGroupData: {},
+        curEmptyData: {
+          type: 'empty',
+          text: '暂无数据',
+          tip: '',
+          tipType: ''
+        }
+      };
+    },
+    computed: {
+      formatUserName () {
+        const { id, name } = this.groupData;
+        const typeMap = {
+          user: () => {
+            return `${id}${this.$t(`m.common['（']`)}${name}${this.$t(`m.common['）']`)}${this.$t(`m.userOrOrg['的用户组']`)}`;
+          },
+          department: () => {
+            return `${name}${this.$t(`m.userOrOrg['的用户组']`)}`;
+          }
+        };
+        if (typeMap[this.groupData.type]) {
+          return typeMap[this.groupData.type]();
+        }
+        return '';
+      },
+      isBatchDisabled () {
+        return !this.selectedGroups.length;
+      },
+      isNoBatchRemove () {
+        return () => {
+          const hasData = this.selectedGroups.length > 0;
+          if (hasData) {
+            const list = this.selectedGroups.filter((item) =>
+              item.role_members.length === 1
+              && item.attributes
+              && item.attributes.source_from_role
+            );
+            const result = this.selectedGroups.length === list.length;
+            this.removeGroupTitle = result ? this.$t(`m.userOrOrg['已选择的用户组权限为不可移出的管理员组']`) : '';
+            return result;
+          }
+          return !hasData;
+        };
+      },
+      isNoBatchRenewal () {
+        return () => {
+          const hasData = this.selectedGroups.length > 0;
+          if (hasData) {
+            const list = this.selectedGroups.filter((item) => item.expired_at === PERMANENT_TIMESTAMP);
+            const result = this.selectedGroups.length === list.length;
+            this.renewalGroupTitle = result ? this.$t(`m.userOrOrg['已选择的用户组权限不需要续期']`) : '';
+            return result;
+          }
+          return !hasData;
+        };
+      },
+      curCom () {
+        let com = '';
+        for (const [key, value] of this.comMap.entries()) {
+          if (Object.keys(this.groupData).length && key.includes(this.groupData.type)) {
+            com = value;
+            break;
+          }
+        }
+        return com;
+      }
+    },
+    watch: {
+      groupData: {
+        handler (value) {
+          if (Object.keys(value).length > 0) {
+            this.comMap = COM_MAP;
+            this.fetchDetailData(value);
+          }
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      async fetchDetailData (value) {
+        this.curEmptyData.tipType = '';
+        this.selectedGroups = [];
+        // this.handleEmptyClear();
+        this.queryGroupData = cloneDeep(value);
+      },
+
+      fetchInitInterFace () {
+        Promise.all([this.fetchUserGroupSearch(), this.fetchDepartGroupSearch()]);
+      },
+
+      handleBatch (payload) {
+        this.curSliderName = payload;
+        this.handleGetMembers();
+        const typeMap = {
+          remove: () => {
+            if (!this.isNoBatchRemove()) {
+              this.batchSliderTitle = this.$t(`m.userOrOrg['批量移出用户组']`);
+              this.isShowBatchSlider = true;
+            }
+          },
+          renewal: () => {
+            if (!this.isNoBatchRenewal()) {
+              this.batchSliderTitle = this.$t(`m.renewal['批量续期']`);
+              this.isShowBatchSlider = true;
+            }
+          }
+        };
+        typeMap[payload]();
+      },
+
+      handleAddGroup () {
+        this.handleGetMembers();
+        this.curSliderName = 'add';
+        this.isShowAddGroupSlider = true;
+      },
+
+      handleAddGroupSubmit () {
+        this.selectedGroups = [];
+        bus.$emit('on-remove-toggle-checkbox', []);
+        bus.$emit('on-refresh-resource-search', {
+          isSearchPerm: this.isSearchPerm,
+          curSearchParams: this.curSearchParams,
+          curSearchPagination: this.curSearchPagination
+        });
+      },
+
+      handleSelectedGroup (payload) {
+        this.selectedGroups = [...payload];
+      },
+      
+      handleGetMembers () {
+        const userList = [];
+        const departList = [];
+        const typeMap = {
+          user: () => {
+            userList.push(this.queryGroupData);
+          },
+          department: () => {
+            departList.push(this.queryGroupData);
+          }
+        };
+        typeMap[this.queryGroupData.type]();
+        this.userList = [...userList];
+        this.departList = [...departList];
+      },
+
+      handleDropdownShow () {
+        this.isDropdownShow = true;
+      },
+
+      handleDropdownHide () {
+        this.isDropdownShow = false;
+      },
+
+      handleEmptyRefresh () {
+        this.$emit('on-refresh');
+      },
+
+      handleEmptyClear () {
+        this.$emit('on-clear');
+      }
+    }
+  };
+</script>
+
+<style lang="postcss" scoped>
+.user-org-right-wrapper {
+  height: 100%;
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #dcdee5;
+    border-radius: 3px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 3px;
+  }
+  .user-name {
+    width: 100%;
+    font-size: 14px;
+    line-height: 22px;
+    word-break: break-all;
+  }
+
+  .header-operate {
+    display: flex;
+    padding: 12px 0;
+    .group-detail-dropdown {
+      margin-left: 8px;
+      .group-dropdown-trigger-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid #c4c6cc;
+        min-width: 102px;
+        height: 32px;
+        border-radius: 2px;
+        padding-left: 10px;
+        padding-right: 5px;
+        background-color: #ffffff;
+        color: #63656e;
+
+        &:hover {
+          cursor: pointer;
+          border-color: #979ba5;
+        }
+
+        .group-dropdown-text {
+          font-size: 14px;
+        }
+
+        .bk-icon {
+          font-size: 22px;
+        }
+      }
+    }
+  }
+}
+
+/deep/ .bk-dropdown-menu {
+  .bk-dropdown-content {
+    padding-top: 0;
+    cursor: pointer;
+  }
+
+  &.disabled,
+  &.disabled *,
+  .remove-disabled,
+  .renewal-disabled {
+    background-color: #ffffff !important;
+    border-color: #dcdee5 !important;
+    color: #c4c6cc !important;
+    cursor: not-allowed;
+    div:nth-child(2) {
+      height: 0 !important;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/user-org-perm/components/user-group-table.vue b/frontend/src/views/user-org-perm/components/user-group-table.vue
new file mode 100644
index 000000000..4d0f7fb7e
--- /dev/null
+++ b/frontend/src/views/user-org-perm/components/user-group-table.vue
@@ -0,0 +1,277 @@
+<template>
+  <div>
+    <bk-table
+      ref="groupMemberRef"
+      size="small"
+      ext-cls="user-group-perm-table"
+      :data="curPageData"
+      :outer-border="false"
+      :header-border="false"
+      :pagination="pagination"
+      @page-change="handlePageChange"
+      @page-limit-change="handleLimitChange"
+    >
+      <template v-for="item in tableProps">
+        <template v-if="item.prop === 'name'">
+          <bk-table-column :key="item.prop" :label="item.label" :prop="item.prop" :min-width="200">
+            <template slot-scope="{ row }">
+              <span
+                v-bk-tooltips="{
+                  content: row.name,
+                  placements: ['right-start']
+                }"
+                class="can-view-name"
+                @click.stop="handleOpenTag(row, 'userGroupDetail')"
+              >
+                {{ row.name || '--' }}
+              </span>
+            </template>
+          </bk-table-column>
+        </template>
+        <template v-else-if="item.prop === 'expired_at_display'">
+          <bk-table-column :key="item.prop" :label="item.label" :prop="item.prop">
+            <template slot-scope="{ row }">
+              <div :class="[
+                'renewal-expired-at',
+                { 'renewal-expired-at-near': formatHasExpired(row) }
+              ]">
+                <render-expire-display
+                  selected
+                  :renewal-time="expiredAt"
+                  :cur-time="row.expired_at || 0"
+                  :line-height="'22px'"
+                />
+              </div>
+            </template>
+          </bk-table-column>
+        </template>
+        <template v-else-if="item.prop === 'operate'">
+          <bk-table-column :key="item.prop" :label="item.label" :prop="item.prop" :width="'auto'">
+            <template slot-scope="{ row }">
+              <bk-button theme="primary" text @click.stop="handleRemove(row)">
+                {{ $t(`m.common['移除']`) }}
+              </bk-button>
+            </template>
+          </bk-table-column>
+        </template>
+        <template v-else>
+          <bk-table-column :key="item.prop" :label="item.label" :prop="item.prop">
+            <template slot-scope="{ row }">
+              <span v-bk-tooltips="{ content: row[item.prop], disabled: !row[item.prop], placements: ['right-start'] }">
+                {{ row[item.prop] || '--' }}
+              </span>
+            </template>
+          </bk-table-column>
+        </template>
+      </template>
+      <template slot="empty">
+        <ExceptionEmpty
+          :type="tableEmptyData.type"
+          :empty-text="tableEmptyData.text"
+          :tip-text="tableEmptyData.tip"
+          :tip-type="tableEmptyData.tipType"
+        />
+      </template>
+    </bk-table>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+  import { bus } from '@/common/bus';
+  import { formatCodeData, getNowTimeExpired } from '@/common/util';
+  import renderExpireDisplay from '@/components/render-renewal-dialog/display';
+  export default {
+    components: {
+      renderExpireDisplay
+    },
+    props: {
+      mode: {
+        type: String
+      },
+      list: {
+        type: Array,
+        default: () => []
+      },
+      noShowList: {
+        type: Array,
+        default: () => []
+      },
+      expiredAtNew: {
+        type: Number
+      }
+    },
+    data () {
+      return {
+        expiredAt: 15552000,
+        curPageData: [],
+        tableList: [],
+        tableProps: [],
+        pagination: {
+          current: 1,
+          limit: 10,
+          count: 0
+        },
+        tableEmptyData: {
+          type: '',
+          text: '',
+          tip: '',
+          tipType: ''
+        }
+      };
+    },
+    computed: {
+      ...mapGetters(['user']),
+      formatHasExpired () {
+        return (payload) => {
+          const diff = payload.expired_at - getNowTimeExpired();
+          if (diff < 1) {
+            return true;
+          }
+         const days = Math.round(diff / (24 * 3600));
+         return payload.expired_at < getNowTimeExpired() || days < 16;
+        };
+      }
+    },
+    watch: {
+      list: {
+        handler (value) {
+          this.tableList = [...value];
+          this.pagination = Object.assign(this.pagination, { current: 1, count: value.length });
+          this.curPageData = this.getDataByPage(this.pagination.current);
+        },
+        immediate: true
+      },
+      mode: {
+        handler (value) {
+          this.tableProps = this.getTableProps(value);
+        },
+        immediate: true
+      },
+      expiredAtNew: {
+        handler (value) {
+          this.expiredAt = value;
+        },
+        immediate: true
+      }
+    },
+    methods: {
+      getTableProps (payload) {
+        const typeMap = {
+          remove: () => {
+            return [
+              { label: this.$t(`m.userGroup['用户组名']`), prop: 'name' },
+              { label: this.$t(`m.common['描述']`), prop: 'description' },
+              { label: this.$t(`m.common['操作-table']`), prop: 'operate' }
+            ];
+          },
+          renewal: () => {
+            return [
+              { label: this.$t(`m.userGroup['用户组名']`), prop: 'name' },
+              { label: this.$t(`m.common['描述']`), prop: 'description' },
+              { label: this.$t(`m.common['有效期']`), prop: 'expired_at_display' },
+              { label: this.$t(`m.common['操作-table']`), prop: 'operate' }
+            ];
+          }
+        };
+        if (typeMap[payload]) {
+          return typeMap[payload]();
+        }
+      },
+
+      getDataByPage (page) {
+        if (!page) {
+          this.pagination.current = page = 1;
+        }
+        let startIndex = (page - 1) * this.pagination.limit;
+        let endIndex = page * this.pagination.limit;
+        if (startIndex < 0) {
+          startIndex = 0;
+        }
+        if (endIndex > this.tableList.length) {
+          endIndex = this.tableList.length;
+        }
+        return this.tableList.slice(startIndex, endIndex);
+      },
+
+      handleOpenTag ({ id }, type) {
+        const routeMap = {
+          userGroupDetail: () => {
+            const routeData = this.$router.resolve({
+              path: `user-group-detail/${id}`,
+              query: {
+                noFrom: true,
+                tab: 'group_perm'
+              }
+            });
+            window.open(routeData.href, '_blank');
+          }
+        };
+        return routeMap[type]();
+      },
+
+      handleRemove (payload) {
+        this.tableList.splice(this.tableList.indexOf(payload), 1);
+        this.pagination.count = this.tableList.length;
+        this.handlePageChange(this.pagination.current);
+        if (!this.tableList.length) {
+          this.tableEmptyData = formatCodeData(0, this.tableEmptyData, true);
+        }
+        // 需要处理不需要续期和不能移除的用户组权限
+        const noSelectTableList = [...this.noShowList];
+        const list = [...this.tableList, ...noSelectTableList];
+        this.$emit('on-remove-group', list);
+        // 同步更新checkbox状态
+        bus.$emit('on-remove-toggle-checkbox', list);
+      },
+
+      handlePageChange (page = 1) {
+        this.pagination.current = page;
+        const list = this.getDataByPage(page);
+        this.curPageData.splice(0, this.curPageData.length, ...list);
+      },
+
+      handleLimitChange (limit) {
+        this.pagination = Object.assign(this.pagination, { current: 1, limit });
+        this.handlePageChange(this.pagination.current);
+      }
+    }
+  };
+</script>
+
+<style lang="postcss" scoped>
+/deep/ .user-group-perm-table {
+  border: 0;
+  .bk-table-empty-block {
+    border: none;
+  }
+  .can-view-name {
+    color: #3A84FF;
+    cursor: pointer;
+  }
+  .renewal-expired-at {
+    .iam-expire-time-wrapper {
+      .cur-text {
+        font-size: 12px;
+      }
+      .after-renewal-icon {
+        font-size: 20px;
+      }
+      .after-renewal-text {
+        font-size: 12px;
+        color: #3a84ff;
+      }
+    }
+    &-near {
+      .iam-expire-time-wrapper {
+        .cur-text {
+          background-color: #FFF1DB;
+          color: #FE9C00;
+          padding: 0 8px;
+          border-radius: 2px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/user-org-perm/index.vue b/frontend/src/views/user-org-perm/index.vue
new file mode 100644
index 000000000..b4cc22020
--- /dev/null
+++ b/frontend/src/views/user-org-perm/index.vue
@@ -0,0 +1,1076 @@
+<template>
+  <div class="user-org-wrapper">
+    <div
+      :class="[
+        'user-org-wrapper-search',
+        { 'no-search-data': !expandData['search'].isExpand || isHasDataNoExpand }
+      ]"
+    >
+      <IamResourceCascadeSearch
+        ref="iamResourceSearchRef"
+        :custom-class="'user-org-resource-perm'"
+        :active="active"
+        :is-full-screen="true"
+        :is-custom-search="true"
+        :cur-search-data="searchData"
+        :grid-count="gridCount"
+        @on-remote-table="handleRemoteTable"
+        @on-refresh-table="handleRefreshTable"
+        @on-select-system="handleSelectSystemAction"
+        @on-select-resource="handleSelectResource"
+        @on-select-instance="handleSelectInstance"
+      >
+        <div
+          slot="custom-content"
+          :class="['custom-content', { 'custom-content-no-search': !enableGroupInstanceSearch }]"
+        >
+          <bk-form form-type="vertical" class="custom-content-form">
+            <iam-form-item
+              :label="$t(`m.userGroup['用户组名']`)"
+              :style="{ width: formItemWidth }"
+              class="custom-form-item"
+            >
+              <bk-input
+                v-model="formData.name"
+                :clearable="true"
+                :placeholder="$t(`m.verify['请输入']`)"
+                :right-icon="'bk-icon icon-search'"
+                @right-icon-click="handleSearch"
+                @enter="handleSearch"
+                @clear="handleClearSearch"
+              />
+            </iam-form-item>
+            <iam-form-item
+              :label="$t(`m.userOrOrg['用户组 ID']`)"
+              :style="{ width: formItemWidth }"
+              class="custom-form-item"
+            >
+              <bk-input
+                type="number"
+                v-model="formData.id"
+                :placeholder="$t(`m.verify['请输入']`)"
+                :show-controls="false"
+                @enter="handleSearch"
+              />
+            </iam-form-item>
+            <iam-form-item
+              :label="$t(`m.common['用户名']`)"
+              :style="{ width: formItemWidth }"
+              class="custom-form-item"
+            >
+              <!-- <bk-input
+                v-model="formData.username"
+                :clearable="true"
+                :show-clear-only-hover="true"
+                :placeholder="$t(`m.verify['请输入']`)"
+                :right-icon="'bk-icon icon-search'"
+                @right-icon-click="handleSearch"
+                @enter="handleSearch"
+                @clear="handleClearSearch"
+              /> -->
+              <bk-user-selector
+                ref="userSelectorRef"
+                :value="permMembers"
+                :api="userApi"
+                :multiple="false"
+                style="width: 100%"
+                :placeholder="$t(`m.verify['请输入']`)"
+                :empty-text="$t(`m.common['无匹配人员']`)"
+                @change="handleMemberChange(...arguments, 'username')"
+              />
+            </iam-form-item>
+            <iam-form-item
+              :label="$t(`m.perm['组织名']`)"
+              :style="{ width: formItemWidth }"
+              class="custom-form-item"
+            >
+              <bk-input
+                v-model="formData.department_name"
+                :clearable="true"
+                :placeholder="$t(`m.verify['请输入']`)"
+                :right-icon="'bk-icon icon-search'"
+                @right-icon-click="handleSearch"
+                @enter="handleSearch"
+                @clear="handleClearSearch"
+              />
+            </iam-form-item>
+          </bk-form>
+          <div class="custom-content-footer">
+            <bk-button
+              theme="primary"
+              :outline="true"
+              @click="handleSearch">
+              {{ $t(`m.common['查询']`) }}
+            </bk-button>
+            <bk-button
+              style="margin-left: 8px;"
+              theme="default"
+              @click="handleEmptyUserClear">
+              {{ $t(`m.common['清空']`) }}
+            </bk-button>
+          </div>
+        </div>
+      </IamResourceCascadeSearch>
+    </div>
+    <div v-if="isHasDataNoExpand" class="search-data-no-expand">
+      <!-- 处理有值的情况下折叠场景 -->
+      <div class="no-expand-search-list">
+        <div class="search-data-content">
+          <span class="funnel">
+            <Icon bk type="funnel" class="funnel-icon" />
+          </span>
+          <span
+            v-for="tag in searchTagList"
+            :key="tag.name"
+            class="tag-list"
+          >
+            <bk-popconfirm
+              v-if="tag.value"
+              :ref="`popoverConfirm_${tag.name}`"
+              trigger="click"
+              placement="bottom-start"
+              :width="320"
+              :ext-cls="formatPopover(tag)"
+              :confirm-text="$t(`m.common['确认']`)"
+              @confirm="handlePopoverChange"
+            >
+              <div slot="content">
+                <div class="popover-title">{{ tag.label }}</div>
+                <div class="popover-tag-input">
+                  <!-- <bk-tag-input
+                    :value="[tag.value]"
+                    :placeholder="$t(`m.verify['请输入']`)"
+                    :max-data="1"
+                    :has-delete-icon="true"
+                    :allow-create="true"
+                    @change="handleInputChange(...arguments, tag.name)"
+                  /> -->
+                  <bk-input
+                    v-if="['name', 'department_name'].includes(tag.name)"
+                    ref="inputRef"
+                    :value="tag.value"
+                    :clearable="true"
+                    :placeholder="$t(`m.verify['请输入']`)"
+                    :right-icon="'bk-icon icon-search'"
+                    @right-icon-click="handlePopoverChange"
+                    @enter="handlePopoverChange"
+                    @clear="handleClearSearch"
+                    @input="handleInputChange(tag.name, ...arguments)"
+                  />
+                  <bk-input
+                    v-if="['id'].includes(tag.name)"
+                    ref="inputRef"
+                    type="number"
+                    :value="tag.value"
+                    :placeholder="$t(`m.verify['请输入']`)"
+                    :show-controls="false"
+                    @enter="handlePopoverChange"
+                    @input="handleInputChange(tag.name, ...arguments)"
+                  />
+                  <bk-user-selector
+                    v-if="['username'].includes(tag.name)"
+                    ref="userSelectorRef"
+                    style="width: 100%"
+                    :value="permMembers"
+                    :api="userApi"
+                    :multiple="false"
+                    :placeholder="$t(`m.verify['请输入']`)"
+                    :empty-text="$t(`m.common['无匹配人员']`)"
+                    @change="handleMemberChange(...arguments, tag.name)"
+                  />
+                </div>
+              </div>
+              <template v-if="tag.value">
+                <bk-tag
+                  :closable="formatAllowClose(tag.name)"
+                  class="tag-item"
+                  :key="tag.name"
+                  @close="handleCloseTag(tag)">
+                  <div @click.stop="handleShowPopover(tag)">
+                    <span>{{tag.label}}:</span>
+                    <span class="tag-item-value">{{ tag.value }}</span>
+                  </div>
+                </bk-tag>
+              </template>
+            </bk-popconfirm>
+          </span>
+          <span
+            class="delete-all"
+            v-if="hasTagData"
+            v-bk-tooltips="{ content: $t(`m.common['清空搜索条件']`) }">
+            <Icon
+              bk
+              type="close-circle-shape"
+              class="delete-all-icon"
+              @click.stop="handleClearAll"
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      :class="[
+        'user-org-wrapper-expand',
+        { 'user-org-wrapper-expand-no-search': !enableGroupInstanceSearch },
+        { 'no-expand-no-search-data': isNoSearchData },
+        { 'no-expand-has-search-data': isHasDataNoExpand }
+      ]"
+      @click.stop="handleToggleExpand('search')"
+    >
+      <bk-icon :type="expandData['search'].isExpand ? 'angle-up' : 'angle-down'" class="icon" />
+    </div>
+    <div class="user-org-wrapper-content">
+      <Layout
+        :is-expand="expandData['slider'].isExpand"
+        :is-no-expand-no-search-data="isNoSearchData"
+        :is-no-expand-has-search-data="isHasDataNoExpand"
+      >
+        <div class="user-org-wrapper-content-left" :style="leftStyle">
+          <LeftLayout
+            ref="leftLayoutRef"
+            :is-loading="listLoading"
+            :is-no-expand-no-search-data="isNoSearchData"
+            :is-no-expand-has-search-data="isHasDataNoExpand"
+            :list="groupList"
+            :page-conf="pageConf"
+            :group-data="currentGroupData"
+            :cur-select-active="curSelectActive"
+            :can-scroll-load="canScrollLoad"
+            :is-search-perm="isHasSearch"
+            :cur-search-params="querySearchParams"
+            :cur-search-pagination="curSearchPagination"
+            :empty-data="emptyData"
+            @on-select="handleSelectUser"
+            @on-load-more="handleLoadMore"
+            @on-batch-operate="handleBatchOperate"
+            @on-clear="handleEmptyUserClear"
+            @on-refresh="handleEmptyUserRefresh"
+          />
+        </div>
+        <div slot="expand-icon" class="user-org-wrapper-content-center">
+          <div class="expand-icon" @click.stop="handleToggleExpand('slider')">
+            <bk-icon :type="expandData['slider'].isExpand ? 'angle-left' : 'angle-right'" class="icon" />
+          </div>
+        </div>
+        <div
+          slot="right"
+          :class="[
+            'user-org-wrapper-content-right',
+            { 'no-expand': !expandData['slider'].isExpand }
+          ]">
+          <template v-if="groupList.length">
+            <component
+              :key="comKey"
+              :is="curCom"
+              :is-search-perm="isHasSearch"
+              :group-data="currentGroupData"
+              :cur-search-params="querySearchParams"
+              :cur-search-pagination="curSearchPagination"
+              @on-clear="handleEmptyClear"
+              @on-refresh="handleEmptyRefresh"
+            />
+          </template>
+          <div v-else class="right-empty-data">
+            <ExceptionEmpty
+              :type="emptyData.type"
+              :empty-text="emptyData.text"
+              :tip-text="emptyData.tip"
+              :tip-type="emptyData.tipType"
+              @on-clear="handleEmptyUserClear"
+              @on-refresh="handleEmptyUserRefresh"
+            />
+          </div>
+        </div>
+      </Layout>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+  import { cloneDeep } from 'lodash';
+  import { bus } from '@/common/bus';
+  import { delLocationHref, formatCodeData } from '@/common/util';
+  import IamResourceCascadeSearch from '@/components/iam-resource-cascade-search';
+  import Layout from './components/page-layout';
+  import LeftLayout from './components/left-layout.vue';
+  import RightLayout from './components/right-layout.vue';
+  import BkUserSelector from '@blueking/user-selector';
+
+  const COM_MAP = new Map([
+    [['user', 'department'], 'RightLayout']
+  ]);
+
+  export default {
+    inject: ['showNoticeAlert'],
+    components: {
+      IamResourceCascadeSearch,
+      Layout,
+      LeftLayout,
+      RightLayout,
+      BkUserSelector
+    },
+
+    data () {
+      return {
+        userApi: window.BK_USER_API,
+        enableGroupInstanceSearch: window.ENABLE_GROUP_INSTANCE_SEARCH.toLowerCase() === 'true',
+        listLoading: false,
+        isSearchPerm: false,
+        expandData: {
+          search: {
+            isExpand: true
+          },
+          slider: {
+            isExpand: true
+          }
+        },
+        comKey: -1,
+        curSearchParams: {},
+        curSearchPagination: {
+          current: 1,
+          count: 0,
+          limit: 10
+        },
+        active: '',
+        curSelectActive: '',
+        groupList: [],
+        searchData: [
+          {
+            id: 'name',
+            name: this.$t(`m.userGroup['用户/组织名']`),
+            default: true
+          },
+          {
+            id: 'id',
+            name: 'ID',
+            default: true
+          },
+          {
+            id: 'description',
+            name: this.$t(`m.common['描述']`),
+            default: true
+          }
+        ],
+        formData: {
+          name: '',
+          id: '',
+          username: '',
+          department_name: ''
+        },
+        pageConf: {
+          current: 1,
+          limit: 10,
+          totalPage: 1,
+          count: 0
+        },
+        emptyData: {
+          type: '',
+          text: '',
+          tip: '',
+          tipType: ''
+        },
+        curEmptyData: {
+          type: '',
+          text: '',
+          tip: '',
+          tipType: ''
+        },
+        currentGroupData: {},
+        curSystemAction: {},
+        curResourceData: {
+          resource_type: '',
+          condition: []
+        },
+        resourceTypeData: {},
+        currentBackup: 1,
+        gridCount: 4,
+        dragWidth: 224,
+        formItemWidth: '',
+        listHeight: window.innerHeight - 51 - 51 - 157 - 42 - 8,
+        searchTagList: [
+          {
+            name: 'system_id',
+            label: this.$t(`m.common['系统']`),
+            value: ''
+          },
+          {
+            name: 'action_id',
+            label: this.$t(`m.common['操作']`),
+            value: ''
+          },
+          {
+            name: 'resource_type',
+            label: this.$t(`m.permApply['资源类型']`),
+            value: ''
+          },
+          {
+            name: 'resource_instance',
+            label: this.$t(`m.common['资源实例']`),
+            value: ''
+          },
+          {
+            name: 'name',
+            label: this.$t(`m.userGroup['用户组名']`),
+            value: ''
+          },
+          {
+            name: 'id',
+            label: this.$t(`m.userOrOrg['用户组 ID']`),
+            value: ''
+          },
+          {
+            name: 'username',
+            label: this.$t(`m.common['用户名']`),
+            value: ''
+          },
+          {
+            name: 'department_name',
+            label: this.$t(`m.perm['组织名']`),
+            value: ''
+          }
+        ],
+        resourceInstances: [],
+        noPopoverList: ['system_id', 'action_id', 'resource_type', 'resource_instance'],
+        permMembers: [],
+        tagInputValue: {}
+      };
+    },
+
+    computed: {
+      ...mapGetters(['navStick']),
+      leftStyle () {
+        if (this.dragWidth > 0) {
+          return {
+            flexBasis: `${this.dragWidth}px`
+          };
+        }
+        return {
+          flexBasis: '224px'
+        };
+      },
+      isHasSearch () {
+        // 这里之所以把资源类型、实例与系统、操作区分开，是因为有选了操作，但是没有资源数据的业务场景
+        const searchParams = { ...this.curSystemAction, ...this.formData };
+        const hasData = Object.values(searchParams).filter((item) => item !== '');
+        const { condition, resource_type: resourceType } = this.curResourceData;
+        return !!(hasData.length > 0 || (condition && condition.length > 0) || resourceType);
+      },
+      isNoSearchData () {
+        const searchParams = { ...this.curSystemAction, ...this.formData };
+        const hasData = Object.values(searchParams).filter((item) => item !== '');
+        const { condition, resource_type: resourceType } = this.curResourceData;
+        return !hasData.length && (!condition || (condition && !condition.length)) && !resourceType && !this.expandData['search'].isExpand;
+      },
+      isHasDataNoExpand () {
+        return this.isHasSearch && !this.expandData['search'].isExpand;
+      },
+      canScrollLoad () {
+        return this.pageConf.totalPage > this.currentBackup;
+      },
+      curCom () {
+        let com = '';
+        for (const [key, value] of this.comMap.entries()) {
+          if (Object.keys(this.currentGroupData).length && key.includes(this.currentGroupData.type)) {
+            com = value;
+            break;
+          }
+        }
+        return com;
+      },
+      querySearchParams () {
+        return { ...this.curSearchParams, ...this.formData };
+      },
+      hasTagData () {
+        return this.searchTagList.filter((item) => item.value !== '').length > 0;
+      },
+      formatPopover () {
+        return (payload) => {
+          const { name } = payload;
+          if (this.noPopoverList.includes(name)) {
+            return 'user-org-popover-tag-edit user-org-popover-tag-edit-none';
+          }
+          return 'user-org-popover-tag-edit';
+        };
+      },
+      formatAllowClose () {
+        return (payload) => {
+          return !['action_id', 'resource_type', 'resource_instance'].includes(payload);
+        };
+      }
+    },
+
+    watch: {
+      formData: {
+        handler (value) {
+          // 监听表单输入框数据变化，同步删除url上的参数
+          const queryParams = { ...this.$route.query, ...this.$route.params };
+          Object.keys(this.formData).forEach((item) => {
+            if (queryParams[item] && !value[item]) {
+              this.formData[item] = queryParams[item];
+              delLocationHref([item]);
+            }
+          });
+        },
+        deep: true
+      },
+      navStick () {
+        this.formatFormItemWidth();
+      }
+    },
+
+    async created () {
+      this.comMap = COM_MAP;
+      this.pageConf.limit = Math.ceil(this.listHeight / 36);
+      this.formatFormItemWidth();
+      this.getRouteParams();
+      await this.fetchFirstData();
+    },
+
+    mounted () {
+      window.addEventListener('resize', this.formatFormItemWidth);
+      this.$once('hook:beforeDestroy', () => {
+        window.removeEventListener('resize', this.formatFormItemWidth);
+      });
+    },
+
+    methods: {
+      async fetchInitData () {
+        this.pageConf.current = 1;
+        this.currentBackup = 1;
+        await this.fetchGroupMemberList(true, false);
+      },
+
+      async fetchDefaultSelectData () {
+        if (this.groupList.length) {
+          const { id, name } = this.groupList[0];
+          this.curSelectActive = `${id}&${name}`;
+          const params = {
+            ...this.curSearchParams,
+            ...this.formData
+          };
+          const groupData = { ...this.groupList[0], ...{ isClick: true } };
+          bus.$emit('on-refresh-resource-search', {
+            isSearchPerm: this.isSearchPerm,
+            curSearchParams: params,
+            curSearchPagination: this.curSearchPagination,
+            groupData
+          });
+        }
+      },
+
+      async fetchFirstData () {
+        await this.fetchInitData();
+        await this.fetchDefaultSelectData();
+      },
+
+      async fetchGroupMemberList (isLoading = true, isScrollLoad = false) {
+        this.listLoading = isLoading;
+        try {
+          const { current, limit } = this.pageConf;
+          const params = {
+            ...this.curSearchParams,
+              ...this.formData,
+            page: current,
+            page_size: limit,
+            apply_disable: false
+          };
+          const { code, data } = await this.$store.dispatch('userOrOrg/getUserGroupMemberList', params);
+          const { count, results } = data;
+          const list = results || [];
+          this.pageConf.count = count || 0;
+          if (!isScrollLoad) {
+            this.groupList = [...list];
+            this.currentGroupData = this.groupList.length ? this.groupList[0] : {};
+            this.pageConf.totalPage = Math.ceil(this.pageConf.count / limit);
+          } else {
+            this.currentBackup++;
+            this.groupList.push(...results);
+          }
+          this.handleRefreshTipType('emptyData');
+          this.emptyData = formatCodeData(code, this.emptyData, this.groupList.length === 0);
+        } catch (e) {
+          this.groupList = [];
+          this.handleRefreshTipType('emptyData');
+          this.emptyData = formatCodeData(e.code, this.emptyData);
+          this.messageAdvancedError(e);
+        } finally {
+          this.listLoading = false;
+        }
+      },
+
+      async handleLoadMore () {
+        const { totalPage } = this.pageConf;
+        if (this.pageConf.current + 1 > totalPage) {
+          return;
+        }
+        this.pageConf.current++;
+        await this.fetchGroupMemberList(false, true);
+      },
+
+      async handleRemoteTable (payload) {
+        const { emptyData, pagination, searchParams } = payload;
+        const params = {
+          ...searchParams,
+          ...this.formData
+        };
+        this.isSearchPerm = emptyData.tipType === 'search';
+        this.curSearchParams = cloneDeep(params);
+        this.curSearchPagination = cloneDeep(pagination);
+        this.curEmptyData = cloneDeep(emptyData);
+        await this.fetchFirstData();
+      },
+
+      async fetchRemoteTable () {
+        await this.fetchInitData();
+        const params = {
+          ...this.curSearchParams,
+          ...this.formData
+        };
+        bus.$emit('on-refresh-resource-search', {
+          isSearchPerm: true,
+          curSearchParams: params,
+          curSearchPagination: this.curSearchPagination
+        });
+      },
+
+      async handleToggleExpand (payload) {
+        this.expandData[payload].isExpand = !this.expandData[payload].isExpand;
+        const distances = window.innerHeight - 51 - 51 - 42 - 8;
+        if (['search'].includes(payload)) {
+          if (this.expandData[payload].isExpand) {
+            this.listHeight = this.showNoticeAlert ? distances - 157 - 40 : distances - 157;
+          } else {
+            this.listHeight = this.showNoticeAlert ? distances - 40 : distances;
+            this.$refs.leftLayoutRef.currentSelectList = [];
+          }
+          this.pageConf = Object.assign(this.pageConf, {
+            current: 1,
+            totalPage: 1,
+            limit: Math.ceil(this.listHeight / 36)
+          });
+          if (this.isHasSearch) {
+            this.fetchHasSearchData();
+            return;
+          }
+          this.groupList = [];
+          await this.fetchFirstData();
+        }
+      },
+
+      async handleRefreshTable () {
+        this.curEmptyData.tipType = '';
+        this.emptyData.tipType = '';
+        this.isSearchPerm = false;
+        this.pageConf.current = 1;
+        this.curSearchParams = {};
+        this.formData.name = '';
+        await this.fetchInitData();
+        bus.$emit('on-refresh-resource-search', {
+          isSearchPerm: false
+        });
+      },
+      
+      // 处理折叠有搜索参数的业务场景
+      async fetchHasSearchData () {
+        this.isSearchPerm = true;
+        const searchParams = { ...this.curSystemAction, ...this.curResourceData, ...this.formData };
+        const resourceInstances = this.resourceInstances.reduce((prev, item) => {
+          const { id, resourceInstancesPath } = this.handlePathData(item, item.type);
+          prev.push({
+            system_id: item.system_id,
+            id: id,
+            type: item.type,
+            name: item.name,
+            path: resourceInstancesPath
+          });
+          return prev;
+        }, []);
+        this.curSearchParams.resource_instances = resourceInstances || [];
+        // 处理频繁切换展开场景下资源实例搜索值被清空了的业务场景
+        if (!this.isHasDataNoExpand) {
+          this.$nextTick(async () => {
+            Object.keys(searchParams).forEach((item) => {
+              const curData = this.searchTagList.find((v) => v.name === item);
+              if (curData) {
+                if (['system_id', 'action_id'].includes(item)) {
+                  // 操作为空时重置关联数据
+                  if (!searchParams[item].value) {
+                    this.$refs.iamResourceSearchRef && this.$refs.iamResourceSearchRef.resetSearchParams();
+                  }
+                }
+              }
+            });
+            await this.fetchRemoteTable();
+          });
+        } else {
+          Object.keys(searchParams).forEach((item) => {
+            const curData = this.searchTagList.find((v) => v.name === item);
+            if (curData) {
+              if (['system_id', 'action_id', 'resource_type'].includes(item)) {
+                curData.value = searchParams[item].label;
+              } else {
+                curData.value = searchParams[item];
+              }
+            }
+          });
+          await this.fetchFirstData();
+          const params = {
+            ...this.curSearchParams,
+            ...this.formData
+          };
+          bus.$emit('on-refresh-resource-search', {
+            isSearchPerm: true,
+            curSearchParams: params,
+            curSearchPagination: this.curSearchPagination
+          });
+        }
+      },
+
+      handleShowPopover (payload) {
+        if (this.noPopoverList.includes(payload.name)) {
+          return;
+        }
+        this.tagInputValue = { ...payload };
+        this.$nextTick(() => {
+          if (this.$refs[`popoverConfirm_${payload.name}`] && this.$refs[`popoverConfirm_${payload.name}`].length) {
+            this.$refs[`popoverConfirm_${payload.name}`][0].$refs.popover.showHandler();
+            if (['name', 'depart_name'].includes(payload.name)) {
+              if (['name', 'depart_name'].includes(payload.name)
+                && this.$refs.inputRef
+                && this.$refs.inputRef.length
+                && this.$refs.inputRef[0].$refs) {
+                this.$refs.inputRef[0].$refs.input.focus();
+              }
+            }
+            if (['username'].includes(payload.name)
+              && this.$refs.userSelectorRef
+              && this.$refs.userSelectorRef.length) {
+              this.$refs.userSelectorRef[0].focus();
+            }
+          }
+        });
+      },
+
+      handleHidePopover (payload) {
+        this.$nextTick(() => {
+          if (this.$refs[`popoverConfirm_${payload.name}`] && this.$refs[`popoverConfirm_${payload.name}`].length) {
+            this.$refs[`popoverConfirm_${payload.name}`][0].$refs.popover.hideHandler();
+          }
+          this.tagInputValue = {};
+        });
+      },
+
+      async handlePopoverChange () {
+        const { name, value } = this.tagInputValue;
+        if (name) {
+          this.formData[name] = value;
+          const curData = this.searchTagList.find((item) => item.name === name);
+          if (curData) {
+            curData.value = value;
+          }
+        }
+        await this.fetchFirstData();
+        const params = {
+            ...this.curSearchParams,
+            ...this.formData
+        };
+        bus.$emit('on-refresh-resource-search', {
+          isSearchPerm: true,
+          curSearchParams: params,
+          curSearchPagination: this.curSearchPagination
+        });
+        this.handleHidePopover(this.tagInputValue);
+      },
+
+      // 获取跳转数据
+      getRouteParams () {
+        const queryParams = { ...this.$route.query, ...this.$route.params };
+        Object.keys(this.formData).forEach((item) => {
+          if (queryParams[item]) {
+            this.formData[item] = queryParams[item];
+          }
+        });
+      },
+
+      handleInputChange (type, payload) {
+        this.tagInputValue = {
+          name: type,
+          value: payload
+        };
+      },
+      
+      handlePathData (data, type) {
+        if (data.resourceInstancesPath && data.resourceInstancesPath.length) {
+          const lastIndex = data.resourceInstancesPath.length - 1;
+          const path = data.resourceInstancesPath[lastIndex];
+          let id = '';
+          let resourceInstancesPath = [];
+          if (type === path.type) {
+            id = path.id;
+            data.resourceInstancesPath.splice(lastIndex, 1);
+          } else {
+            id = '*';
+          }
+          resourceInstancesPath = data.resourceInstancesPath.reduce((p, e) => {
+            p.push({
+              type: e.type,
+              id: e.id,
+              name: e.name
+            });
+            return p;
+          }, []);
+          return { id, resourceInstancesPath };
+        }
+        return { id: '*', resourceInstancesPath: [] };
+      },
+
+      handleSelectInstance ({ resourceInstances, resourceTypeData }) {
+        // 在切换展开收缩时，备份下之前的数据
+        this.resourceInstances = cloneDeep(resourceInstances || []);
+        this.resourceTypeData = cloneDeep(resourceTypeData);
+      },
+
+      handleSelectSystemAction (payload) {
+        this.curSystemAction = { ...payload };
+        if (this.curSystemAction.system_id) {
+          if (this.curSystemAction.system_id.value !== this.curSearchParams.system_id) {
+            this.searchTagList.forEach((item) => {
+              if (['resource_type', 'resource_instance'].includes(item.name)) {
+                item.value = '';
+              }
+            });
+          }
+          this.$set(this.curSearchParams, 'system_id', this.curSystemAction.system_id.value);
+        }
+        if (this.curSystemAction.action_id) {
+          if (this.curSystemAction.action_id.value !== this.curSearchParams.action_id) {
+            this.searchTagList.forEach((item) => {
+              if (['resource_type', 'resource_instance'].includes(item.name)) {
+                item.value = '';
+              }
+            });
+          }
+          this.$set(this.curSearchParams, 'action_id', this.curSystemAction.action_id.value);
+        }
+      },
+
+      handleSelectResource (payload) {
+        const { condition } = payload;
+        this.curResourceData = { ...payload };
+        // 处理资源实例数据格式化
+        const curData = this.searchTagList.find((v) => v.name === 'resource_instance');
+        if (condition) {
+          // 如果资源实例为none，则为空
+          if (condition.length) {
+            if (condition.length === 1 && condition[0] === 'none') {
+              curData.value = '';
+              if (!this.curResourceData.resource_type) {
+                const resourceType = this.searchTagList.find((v) => v.name === 'resource_type');
+                resourceType.value = '';
+              }
+              return;
+            }
+            if (condition[0].instance && condition[0].instance.length) {
+              const list = condition[0].instance[0].path[0] || [];
+              list.forEach((item, index) => {
+                if (list.length === 1) {
+                  curData.value = `${item.name}`;
+                } else {
+                  curData.value += index !== list.length - 1 ? `${item.name}/` : item.name;
+                }
+              });
+            }
+          } else {
+            curData.value = this.$t(`m.common['无限制']`);
+          }
+        } else {
+          curData.value = '';
+        }
+        if (!Object.keys(payload).length) {
+          this.searchTagList.forEach((item) => {
+            if (['resource_type', 'resource_instance'].includes(item.name)) {
+              item.value = '';
+            }
+          });
+        }
+      },
+      
+      handleMemberChange (payload, name) {
+        this.permMembers = [...payload];
+        this.$nextTick(() => {
+          if (this.$refs.userSelectorRef) {
+            this.formData.username = payload.length > 0 ? payload.join() : '';
+            this.tagInputValue = {
+              name,
+              value: this.formData.username
+            };
+            if (!this.isHasDataNoExpand) {
+              this.handleSearch();
+            }
+          }
+        });
+      },
+
+      handleSearch () {
+        this.$refs.iamResourceSearchRef && this.$refs.iamResourceSearchRef.handleSearchUserGroup(true, true);
+      },
+
+      handleClearSearch () {
+        this.handleSearch();
+      },
+
+      handleSelectUser (payload) {
+        this.curSelectActive = `${payload.id}&${payload.name}`;
+        this.currentGroupData = {
+          ...payload,
+          ...{
+            isClick: true
+          }
+        };
+      },
+
+      async handleBatchOperate (payload) {
+        const { name, isRefreshUser } = payload;
+        if (['clear'].includes(name) && isRefreshUser) {
+          await this.fetchFirstData();
+        }
+        bus.$emit('on-refresh-resource-search', {
+          isSearchPerm: this.isSearchPerm,
+          curSearchParams: this.curSearchParams,
+          curSearchPagination: this.curSearchPagination
+        });
+      },
+
+      async handleCloseTag (payload) {
+        payload.value = '';
+        this.pageConf.current = 1;
+        if (this.curSystemAction[payload.name]) {
+          this.curSystemAction[payload.name] = '';
+        }
+        if (this.formData[payload.name]) {
+          this.formData[payload.name] = '';
+          if (['username'].includes(payload.name)) {
+            this.permMembers = [];
+          }
+        }
+        if (this.curResourceData[payload.name]) {
+          this.curResourceData[payload.name] = '';
+        }
+        if (this.curSearchParams[payload.name]) {
+          this.curSearchParams[payload.name] = '';
+        }
+        // 删除有关联数据的tag
+        if (['system_id', 'action_id'].includes(payload.name)) {
+          this.searchTagList.forEach((item) => {
+            if (!['name', 'id', 'username', 'department_name'].includes(item.name)) {
+              item.value = '';
+            }
+            this.curSearchParams[item.name] = '';
+            this.$refs.iamResourceSearchRef && this.$refs.iamResourceSearchRef.handleEmptyClear();
+          });
+          await this.fetchFirstData();
+          return;
+        }
+        if (['resource_type'].includes(payload.name)) {
+          this.$set(this.curSearchParams, 'resource_instances', []);
+          this.searchTagList.forEach((item) => {
+            if (['resource_type', 'resource_instance'].includes(item.name)) {
+              item.value = '';
+            }
+          });
+        }
+        await this.fetchFirstData();
+      },
+
+      async handleClearAll () {
+        this.searchTagList.forEach((item) => {
+          if (item.value) {
+            item.value = '';
+            if (this.curSystemAction[item.name]) {
+              this.curSystemAction[item.name] = '';
+            }
+            if (this.formData[item.name]) {
+              this.formData[item.name] = '';
+            }
+            if (this.curResourceData[item.name]) {
+              this.curResourceData[item.name] = '';
+            }
+          }
+        });
+        await this.handleEmptyUserClear();
+      },
+
+      handleRefreshTipType (payload) {
+        let tipType = '';
+        if (this.isSearchPerm) {
+          tipType = 'search';
+        }
+        if (this[payload].type === 500) {
+          tipType = 'refresh';
+        }
+        this.emptyData = Object.assign({}, this[payload], { tipType });
+      },
+      
+      handleEmptyRefresh () {
+        if (this.isHasDataNoExpand) {
+          this.fetchFirstData();
+        } else {
+          this.$refs.iamResourceSearchRef && this.$refs.iamResourceSearchRef.handleEmptyRefresh();
+        }
+      },
+
+      handleEmptyClear () {
+        this.isSearchPerm = false;
+        if (this.isHasDataNoExpand) {
+          this.fetchFirstData();
+        } else {
+          this.$refs.iamResourceSearchRef && this.$refs.iamResourceSearchRef.handleEmptyClear();
+        }
+      },
+
+      handleEmptyUserClear () {
+        this.curEmptyData.tipType = '';
+        this.emptyData.tipType = '';
+        this.isSearchPerm = false;
+        this.pageConf.current = 1;
+        this.curSearchParams = {};
+        this.formData = {
+          name: '',
+          id: '',
+          username: '',
+          department_name: ''
+        };
+        this.permMembers = [];
+        this.fetchFirstData();
+        this.$refs.iamResourceSearchRef && this.$refs.iamResourceSearchRef.handleEmptyClear();
+      },
+
+      handleEmptyUserRefresh () {
+        this.handleEmptyUserClear();
+      },
+
+      formatFormItemWidth () {
+        this.formItemWidth = `${(window.innerWidth - (this.navStick ? 276 : 76) - this.gridCount * 16) / this.gridCount}px`;
+      }
+    }
+  };
+</script>
+<style lang="postcss">
+.user-org-popover-tag-edit {
+  color: #63656E;
+  .popover-title {
+    margin-bottom: 6px;
+  }
+  .popover-tag-input {
+    margin-bottom: 12px;
+  }
+  &-none {
+    display: none;
+  }
+}
+</style>
+
+<style lang="postcss" scoped>
+@import './user-org-perm.css';
+</style>
diff --git a/frontend/src/views/user-org-perm/user-org-perm.css b/frontend/src/views/user-org-perm/user-org-perm.css
new file mode 100644
index 000000000..2f0981bd3
--- /dev/null
+++ b/frontend/src/views/user-org-perm/user-org-perm.css
@@ -0,0 +1,207 @@
+.user-org-wrapper {
+  padding: 0;
+  color: #313238;
+  position: relative;
+  &-search {
+    box-shadow: 0 2px 3px 0 #0000000a;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    .custom-content {
+      &-form {
+        display: flex;
+        .custom-form-item {
+          margin-top: 8px;
+          &:not(&:last-child) {
+            margin-right: 16px;
+          }
+        }
+      }
+      &-footer {
+        margin-top: 16px;
+      }
+      &-no-search {
+        .custom-content-form {
+          .custom-form-item {
+            margin-top: 0;
+          }
+        }
+      }
+    }
+    &.no-search-data {
+      display: none;
+    }
+  }
+  &-expand {
+    width: 64px;
+    height: 16px;
+    background-color: #dcdee5;
+    border-radius: 0 0px 4px 4px;
+    position: absolute;
+    top: 225px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+    cursor: pointer;
+    .icon {
+      color: #ffffff;
+      font-size: 22px !important;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    &-no-search {
+      top: 150px;
+    }
+    &.no-expand-no-search-data {
+      top: 8px;
+    }
+    &.no-expand-has-search-data {
+      top: 51px;
+    }
+    &:hover {
+      background-color: #3a84ff;
+    }
+  }
+  &-content {
+    &-left {
+      /* padding: 0 16px; */
+      /* background-color: #FAFBFD; */
+      background-color: #ffffff;
+      border-right: 1px solid#dcdee5;
+      height: calc(100vh - 61px);
+    }
+    &-center {
+      width: 16px;
+      height: calc(100vh - 234px);
+      .expand-icon {
+        width: 16px;
+        height: 64px;
+        background-color: #dcdee5;
+        border-radius: 0 4px 4px 0;
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        .icon {
+          color: #ffffff;
+          font-size: 22px !important;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+        &:hover {
+          background-color: #3a84ff;
+        }
+      }
+    }
+    &-right {
+      padding-right: 16px;
+      position: relative;
+      height: 100%;
+      &.no-expand {
+        padding-right: 0;
+      }
+      .right-empty-data {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+  .search-data-no-expand {
+    min-height: 42px;
+    line-height: 42px;
+    background-color: #ffffff;
+    box-shadow: 0 2px 3px 0 #0000000f;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    .no-expand-search-list {
+      padding: 0 16px;
+      .search-data-content {
+        /* display: flex;
+        align-items: center; */
+        overflow-x: auto;
+        white-space: nowrap;
+        word-break: break-all;
+        .funnel-icon {
+          color: #979BA5;
+        }
+        .tag-list {
+          .tag-item {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            &-value {
+              margin-left: 8px;
+            }
+          }
+        }
+        .delete-all {
+          margin-left: 8px;
+          &-icon {
+            color: #C4C6CC;
+            font-size: 14px;
+            cursor: pointer;
+            vertical-align: middle;
+            &:hover {
+              color: #979BA5;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.my-perm-group-perm {
+  height: 100%;
+  &-header {
+    margin-bottom: 16px;
+  }
+  .iam-perm-ext-cls {
+    margin-top: 1px;
+  }
+  .user-org-perm-table {
+    border: none;
+    color: #63656E !important;
+    .can-view-name {
+      color: #3a84ff;
+      cursor: pointer;
+      &:hover {
+        color: #699df4;
+      }
+    }
+    /deep/ .bk-table-fixed, 
+    .bk-table-fixed-right {
+      border-bottom: 0;
+    }
+  }
+}
+.user-org-remove-confirm {
+  .popover-title {
+    font-size: 16px;
+    padding-bottom: 16px;
+    color: #313238;
+  }
+  .popover-content {
+    color: #63656e;
+    .popover-content-item {
+      display: flex;
+      margin-bottom: 8px;
+      &-value {
+        color: #313238;
+        margin-left: 8px;
+      }
+    }
+    &-tip {
+      padding-bottom: 20px;
+      color: #63656E;
+    }
+  }
+}
diff --git a/frontend/src/views/user/components/group-perm.vue b/frontend/src/views/user/components/group-perm.vue
index bd9ef069c..2f3daab58 100644
--- a/frontend/src/views/user/components/group-perm.vue
+++ b/frontend/src/views/user/components/group-perm.vue
@@ -736,7 +736,7 @@
       fetchSelectedGroupCount () {
         this.$nextTick(() => {
           const selectionCount = document.getElementsByClassName('bk-page-selection-count');
-          if (this.$refs.groupPermTableRef && selectionCount) {
+          if (this.$refs.groupPermTableRef && selectionCount && selectionCount.length && selectionCount[0].children) {
             selectionCount[0].children[0].innerHTML = this.currentSelectGroupList.length;
           }
         });
diff --git a/frontend/src/views/user/components/joined-user-group.vue b/frontend/src/views/user/components/joined-user-group.vue
index c3e1d6eac..2f7eae566 100644
--- a/frontend/src/views/user/components/joined-user-group.vue
+++ b/frontend/src/views/user/components/joined-user-group.vue
@@ -719,7 +719,11 @@
             }
             this.$nextTick(() => {
               const selectionCount = document.getElementsByClassName('bk-page-selection-count');
-              if (this.$refs.groupPermTableRef && selectionCount) {
+              if (this.$refs.groupPermTableRef
+                && selectionCount
+                && selectionCount.length
+                && selectionCount[0].children
+              ) {
                 selectionCount[0].children[0].innerHTML = this.currentSelectGroupList.length;
               }
             });
diff --git a/frontend/src/views/user/components/render-user.vue b/frontend/src/views/user/components/render-user.vue
index fa28f6ffe..65d97495e 100644
--- a/frontend/src/views/user/components/render-user.vue
+++ b/frontend/src/views/user/components/render-user.vue
@@ -8,7 +8,6 @@
       <IamResourceCascadeSearch
         ref="iamResourceSearchRef"
         :active="active"
-        :custom-select-width="customSelectWidth"
         :min-select-width="'165px'"
         :max-select-width="'200px'"
         @on-remote-table="handleRemoteTable"
diff --git a/saas/VERSION b/saas/VERSION
index 76257f084..5b62318f8 100644
--- a/saas/VERSION
+++ b/saas/VERSION
@@ -1 +1 @@
-1.10.24
+1.10.25
diff --git a/saas/backend/account/views.py b/saas/backend/account/views.py
index bd82a668f..977274b32 100644
--- a/saas/backend/account/views.py
+++ b/saas/backend/account/views.py
@@ -41,7 +41,7 @@ def retrieve(self, request, *args, **kwargs):
             {
                 "timestamp": timestamp,
                 "username": user.username,
-                "role": {"type": role.type, "id": role.id, "name": role.name},
+                "role": {"type": role.type, "id": role.id, "name": role.name, "code": role.code},
                 "timezone": user.get_property("time_zone"),
                 "name": u.display_name if u else "",
             }
diff --git a/saas/backend/api/management/v2/serializers.py b/saas/backend/api/management/v2/serializers.py
index c0749b64c..c7b93e645 100644
--- a/saas/backend/api/management/v2/serializers.py
+++ b/saas/backend/api/management/v2/serializers.py
@@ -314,6 +314,7 @@ def get_subject_template_count(self, obj):
 
 class ManagementQueryGroupSLZ(serializers.Serializer):
     inherit = serializers.BooleanField(label="是否继承子集管理员的用户组", required=False, default=True)
+    only_inherit = serializers.BooleanField(label="是否只查询继承子集管理员的用户组", required=False, default=False)
 
 
 class ManagementGradeManagerCreateSLZ(GradeMangerBaseInfoSLZ):
diff --git a/saas/backend/api/management/v2/views/group.py b/saas/backend/api/management/v2/views/group.py
index 0cc326390..d9964fe4e 100644
--- a/saas/backend/api/management/v2/views/group.py
+++ b/saas/backend/api/management/v2/views/group.py
@@ -153,10 +153,11 @@ def list(self, request, *args, **kwargs):
         slz = ManagementQueryGroupSLZ(data=request.query_params)
         slz.is_valid(raise_exception=True)
         inherit = slz.validated_data["inherit"]
+        only_inherit = slz.validated_data["only_inherit"]
 
         role = get_object_or_404(self.queryset, id=kwargs["id"])
 
-        queryset = RoleListQuery(role).query_group(inherit=inherit)
+        queryset = RoleListQuery(role).query_group(inherit=inherit, only_inherit=only_inherit)
         queryset = self.filter_queryset(queryset)
         queryset = self._filter(request, queryset)
 
diff --git a/saas/backend/apps/approval/views.py b/saas/backend/apps/approval/views.py
index a3c35b874..fc6e30690 100644
--- a/saas/backend/apps/approval/views.py
+++ b/saas/backend/apps/approval/views.py
@@ -26,7 +26,7 @@
 from backend.common.error_codes import error_codes
 from backend.common.serializers import SystemQuerySLZ
 from backend.service.action import ActionService
-from backend.service.constants import PermissionCodeEnum
+from backend.service.constants import PermissionCodeEnum, RoleType
 
 from .audit import (
     ActionSensitivityLevelAuditProvider,
@@ -253,6 +253,10 @@ def create(self, request, *args, **kwargs):
         system_id = actions[0]["system_id"]
         action_ids = [a["id"] for a in actions]
 
+        # 校验系统管理员权限
+        if request.role.type == RoleType.SYSTEM_MANAGER.value and request.role.code != system_id:
+            raise error_codes.FORBIDDEN
+
         self.biz.batch_create_or_update_action_sensitivity_level(
             system_id, action_ids, sensitivity_level, request.user.username
         )
diff --git a/saas/backend/apps/group/views.py b/saas/backend/apps/group/views.py
index e25d39459..c5717a44f 100644
--- a/saas/backend/apps/group/views.py
+++ b/saas/backend/apps/group/views.py
@@ -598,7 +598,7 @@ def create(self, request, *args, **kwargs):
                 )
 
             # 写入审计上下文
-            audit_context_setter(group=group, members=group_member)
+            audit_context_setter(group=group, members=[group_member])
             provider = GroupMemberRenewAuditProvider(request)
             log_api_event(request, provider)
 
diff --git a/saas/backend/apps/role/constants.py b/saas/backend/apps/role/constants.py
index cc8e263cb..65d91bc90 100644
--- a/saas/backend/apps/role/constants.py
+++ b/saas/backend/apps/role/constants.py
@@ -35,6 +35,8 @@
         PermissionCodeEnum.MANAGE_COMMON_ACTION.value,
         PermissionCodeEnum.MANAGE_SYSTEM_MANAGER_MEMBER.value,
         PermissionCodeEnum.MANAGE_ROLE_GROUP_MEMBER.value,
+        PermissionCodeEnum.VIEW_AUTHORIZED_SUBJECTS.value,
+        PermissionCodeEnum.MANAGE_SENSITIVITY_LEVEL.value,
     ],
     RoleType.GRADE_MANAGER.value: [
         PermissionCodeEnum.MANAGE_GROUP.value,
diff --git a/saas/backend/apps/role/views/permission_audit.py b/saas/backend/apps/role/views/permission_audit.py
index 92e7e455c..3cfddca8b 100644
--- a/saas/backend/apps/role/views/permission_audit.py
+++ b/saas/backend/apps/role/views/permission_audit.py
@@ -16,7 +16,8 @@
 from backend.account.permissions import RolePermission
 from backend.apps.role.serializers import AuthorizedSubjectsSLZ, QueryAuthorizedSubjectsSLZ
 from backend.biz.permission_audit import QueryAuthorizedSubjects
-from backend.service.constants import PermissionCodeEnum
+from backend.common import error_codes
+from backend.service.constants import PermissionCodeEnum, RoleType
 from backend.util.time import format_localtime
 
 
@@ -38,6 +39,11 @@ def post(self, request, *args, **kwargs):
         serializer = QueryAuthorizedSubjectsSLZ(data=request.data)
         serializer.is_valid(raise_exception=True)
         data = serializer.validated_data
+
+        # 校验系统管理员权限
+        if request.role.type == RoleType.SYSTEM_MANAGER.value and request.role.code != data["system_id"]:
+            raise error_codes.FORBIDDEN
+
         subjects = QueryAuthorizedSubjects(data).query_by_permission_type()
         return Response(subjects)
 
@@ -52,6 +58,10 @@ def export(self, request, *args, **kwargs):
         serializer.is_valid(raise_exception=True)
         data = serializer.validated_data
 
+        # 校验系统管理员权限
+        if request.role.type == RoleType.SYSTEM_MANAGER.value and request.role.code != data["system_id"]:
+            raise error_codes.FORBIDDEN
+
         exported_file_name = f'{data["system_id"]}_{format_localtime()}'
         response = QueryAuthorizedSubjects(data).export(exported_file_name)
 
diff --git a/saas/backend/biz/action.py b/saas/backend/biz/action.py
index bb8c295bb..718dd5a95 100644
--- a/saas/backend/biz/action.py
+++ b/saas/backend/biz/action.py
@@ -41,6 +41,16 @@ class ActionBean(Action):
     tag: str = ActionTag.UNCHECKED.value
     sensitivity_level: str = ""
 
+    def __init__(self, **data):
+        super().__init__(**data)
+        if (
+            "sensitivity" in data
+            and data["sensitivity"]
+            and isinstance(data["sensitivity"], int)
+            and 1 < data["sensitivity"] < 6
+        ):
+            self.sensitivity_level = SensitivityLevel.get_choices()[data["sensitivity"] - 1][0]
+
 
 class ActionSearchCondition(BaseModel):
     """操作的搜索条件"""
@@ -76,6 +86,10 @@ def _fill_action_related_resource_type_name(self, action: ActionBean, name_provi
     def fill_sensitivity_level(self, action_sensitivity_level: Dict[str, str]):
         # 填充敏感度等级
         for action in self.actions:
+            # NOTE: 模型本身已经有默认值
+            if action.id not in action_sensitivity_level and action.sensitivity_level:
+                continue
+
             action.sensitivity_level = action_sensitivity_level.get(action.id, SensitivityLevel.L1.value)
 
     def filter_by_scope_action_ids(self, scope_action_ids: List[str]) -> List[ActionBean]:
diff --git a/saas/backend/biz/role.py b/saas/backend/biz/role.py
index d6f8af024..72d43446b 100644
--- a/saas/backend/biz/role.py
+++ b/saas/backend/biz/role.py
@@ -645,17 +645,21 @@ def _query_subset_manager_template_id(self) -> List[int]:
 
         return template_ids
 
-    def query_group(self, inherit: bool = True):
+    def query_group(self, inherit: bool = True, only_inherit: bool = False):
         """
         查询用户组列表
         """
         if self.role.type == RoleType.STAFF.value:
             return Group.objects.filter(hidden=False)
 
-        group_ids = self._get_role_related_object_ids(RoleRelatedObjectType.GROUP.value, inherit=inherit)
+        group_ids = self._get_role_related_object_ids(
+            RoleRelatedObjectType.GROUP.value, inherit=inherit, only_inherit=only_inherit
+        )
         return Group.objects.filter(id__in=group_ids)
 
-    def _get_role_related_object_ids(self, object_type: str, inherit: bool = True) -> List[int]:
+    def _get_role_related_object_ids(
+        self, object_type: str, inherit: bool = True, only_inherit: bool = False
+    ) -> List[int]:
         # 分级管理员可以管理子集管理员的所有用户组
         if (
             self.role.type == RoleType.GRADE_MANAGER.value
@@ -663,7 +667,8 @@ def _get_role_related_object_ids(self, object_type: str, inherit: bool = True) -
             and inherit
         ):
             role_ids = RoleRelation.objects.list_sub_id(self.role.id)
-            role_ids.append(self.role.id)
+            if not only_inherit:
+                role_ids.append(self.role.id)
             return list(
                 RoleRelatedObject.objects.filter(role_id__in=role_ids, object_type=object_type).values_list(
                     "object_id", flat=True
diff --git a/saas/backend/service/action.py b/saas/backend/service/action.py
index 7c4461dd2..9b9921b38 100644
--- a/saas/backend/service/action.py
+++ b/saas/backend/service/action.py
@@ -36,7 +36,7 @@ class ActionService:
 
     full_fields = (
         "id,name,name_en,related_resource_types,version,type,hidden,description,description_en,"
-        "related_actions,related_environments"
+        "related_actions,related_environments,sensitivity"
     )
 
     @cachedmethod(timeout=60)
diff --git a/saas/backend/service/models/action.py b/saas/backend/service/models/action.py
index 2582ced52..f828b77c9 100644
--- a/saas/backend/service/models/action.py
+++ b/saas/backend/service/models/action.py
@@ -59,6 +59,7 @@ class Action(BaseModel):
     related_resource_types: List[RelatedResourceType] = []
     related_actions: List[str] = []  # 依赖操作
     related_environments: List[RelatedEnvironment] = []
+    sensitivity: int = 1
 
     def __init__(self, **data: Any):
         if "related_actions" in data and data["related_actions"] is None:
diff --git a/saas/resources/version_log/change_log.md b/saas/resources/version_log/change_log.md
index f627d64c7..e60393b04 100644
--- a/saas/resources/version_log/change_log.md
+++ b/saas/resources/version_log/change_log.md
@@ -1,3 +1,14 @@
+<!-- 2024-04-11 -->
+# V1.10.25 版本更新日志
+
+### 新增功能
+
+* 管理空间下心中用户/部门权限管理
+* 系统管理员增加查询有权限的人员功能
+* 系统管理员增加操作敏感等级编辑功能
+
+---
+
 <!-- 2024-03-01 -->
 # V1.10.24 版本更新日志
 
diff --git a/saas/resources/version_log/change_log_en.md b/saas/resources/version_log/change_log_en.md
index fd7bdb9a5..dfddafa7e 100644
--- a/saas/resources/version_log/change_log_en.md
+++ b/saas/resources/version_log/change_log_en.md
@@ -1,3 +1,14 @@
+<!-- 2024-04-11 -->
+# V1.10.25 Version Update Log
+
+### New Features
+
+* Added the ability to manage permissions for desired users/departments within the management space.
+* System administrators can now query personnel with permissions.
+* System administrators can now edit sensitivity levels.
+
+---
+
 <!-- 2024-03-01 -->
 # V1.10.24 Version Update Log