diff --git a/webfe/package_vue/src/views/dev-center/app/basic-config/cloud-api/comps/app-perm.vue b/webfe/package_vue/src/views/dev-center/app/basic-config/cloud-api/comps/app-perm.vue
index e0e9de79a9..bfb62fe280 100644
--- a/webfe/package_vue/src/views/dev-center/app/basic-config/cloud-api/comps/app-perm.vue
+++ b/webfe/package_vue/src/views/dev-center/app/basic-config/cloud-api/comps/app-perm.vue
@@ -5,8 +5,9 @@
       <span
         v-bk-tooltips="{
           content: $t('仅支持对同一{t}下的 API 进行批量申请', { t: isComponentApi ? $t('组件') : $t('网关') }),
-          disabled: !isTooltipsDisabled
-        }">
+          disabled: !isTooltipsDisabled,
+        }"
+      >
         <bk-button
           theme="primary"
           :disabled="isApplyDisabled"
@@ -17,7 +18,7 @@
       </span>
       <!-- 续期：支持跨网关/组件续期 -->
       <bk-button
-        style="margin-left: 6px;"
+        style="margin-left: 6px"
         theme="primary"
         :disabled="isRenewalDisabled"
         @click="handleBatchRenewal"
@@ -81,7 +82,7 @@
       <div>
         <paasng-alert
           :title="$t('若有效期限不足180天，但应用仍在访问 API，有效期限将自动延长至 180 天（不限次数）。')"
-          style="margin-bottom: 16px;width: 100%"
+          style="margin-bottom: 16px; width: 100%"
         />
         <bk-table
           ref="permRef"
@@ -110,8 +111,7 @@
             type="selection"
             :selectable="selectable"
             width="60"
-          >
-          </bk-table-column>
+          ></bk-table-column>
           <bk-table-column
             :label="$t('API类型')"
             :render-header="$renderHeader"
@@ -148,7 +148,12 @@
                 <template v-if="isComponentApi">
                   {{ props.row.system_name }}
                   <template v-if="!!props.row.tag">
-                    <span :class="[{ inner: [$t('内部版'), $t('互娱外部版')].includes(props.row.tag) }, { clound: [$t('上云版'), $t('互娱外部上云版')].includes(props.row.tag) }]">
+                    <span
+                      :class="[
+                        { inner: [$t('内部版'), $t('互娱外部版')].includes(props.row.tag) },
+                        { clound: [$t('上云版'), $t('互娱外部上云版')].includes(props.row.tag) },
+                      ]"
+                    >
                       {{ props.row.tag }}
                     </span>
                   </template>
@@ -197,7 +202,9 @@
             :render-header="$renderHeader"
           >
             <template slot-scope="props">
-              <span :class="['special', 'sensitive'].includes(props.row.permission_level)">{{ levelMap[props.row.permission_level] }}</span>
+              <span :class="['special', 'sensitive'].includes(props.row.permission_level)">
+                {{ levelMap[props.row.permission_level] }}
+              </span>
             </template>
           </bk-table-column>
           <bk-table-column
@@ -219,22 +226,28 @@
             >
               <template slot-scope="props">
                 <template v-if="props.row.permission_status === 'owned'">
-                  <span class="paasng-icon paasng-pass" /> {{ $t('已拥有') }}
+                  <span class="paasng-icon paasng-pass" />
+                  {{ $t('已拥有') }}
                 </template>
                 <template v-else-if="props.row.permission_status === 'unlimited'">
-                  <span class="paasng-icon paasng-pass" /> {{ $t('无限制') }}
+                  <span class="paasng-icon paasng-pass" />
+                  {{ $t('无限制') }}
                 </template>
                 <template v-else-if="props.row.permission_status === 'need_apply'">
-                  <span class="paasng-icon paasng-reject" /> {{ $t('未申请') }}
+                  <span class="paasng-icon paasng-reject" />
+                  {{ $t('未申请') }}
                 </template>
                 <template v-else-if="props.row.permission_status === 'expired'">
-                  <span class="paasng-icon paasng-reject" /> {{ $t('已过期') }}
+                  <span class="paasng-icon paasng-reject" />
+                  {{ $t('已过期') }}
                 </template>
                 <template v-else-if="props.row.permission_status === 'rejected'">
-                  <span class="paasng-icon paasng-reject" /> {{ $t('已拒绝') }}
+                  <span class="paasng-icon paasng-reject" />
+                  {{ $t('已拒绝') }}
                 </template>
                 <template v-else>
-                  <round-loading ext-cls="applying" /> {{ $t('申请中') }}
+                  <round-loading ext-cls="applying" />
+                  {{ $t('申请中') }}
                 </template>
               </template>
             </bk-table-column>
@@ -246,22 +259,28 @@
             >
               <template slot-scope="props">
                 <template v-if="props.row.permission_status === 'owned'">
-                  <span class="paasng-icon paasng-pass" /> {{ $t('已拥有') }}
+                  <span class="paasng-icon paasng-pass" />
+                  {{ $t('已拥有') }}
                 </template>
                 <template v-else-if="props.row.permission_status === 'unlimited'">
-                  <span class="paasng-icon paasng-pass" /> {{ $t('无限制') }}
+                  <span class="paasng-icon paasng-pass" />
+                  {{ $t('无限制') }}
                 </template>
                 <template v-else-if="props.row.permission_status === 'need_apply'">
-                  <span class="paasng-icon paasng-reject" /> {{ $t('未申请') }}
+                  <span class="paasng-icon paasng-reject" />
+                  {{ $t('未申请') }}
                 </template>
                 <template v-else-if="props.row.permission_status === 'expired'">
-                  <span class="paasng-icon paasng-reject" /> {{ $t('已过期') }}
+                  <span class="paasng-icon paasng-reject" />
+                  {{ $t('已过期') }}
                 </template>
                 <template v-else-if="props.row.permission_status === 'rejected'">
-                  <span class="paasng-icon paasng-reject" /> {{ $t('已拒绝') }}
+                  <span class="paasng-icon paasng-reject" />
+                  {{ $t('已拒绝') }}
                 </template>
                 <template v-else>
-                  <round-loading ext-cls="applying" /> {{ $t('申请中') }}
+                  <round-loading ext-cls="applying" />
+                  {{ $t('申请中') }}
                 </template>
               </template>
             </bk-table-column>
@@ -273,7 +292,7 @@
             <template slot-scope="{ row }">
               <div class="table-operate-buttons">
                 <bk-button
-                  style="padding: 0 0 0 10px;"
+                  style="padding: 0 0 0 10px"
                   theme="primary"
                   :disabled="row.applyDisabled"
                   size="small"
@@ -283,11 +302,14 @@
                   <span
                     v-bk-tooltips="{
                       content: $t(row.applyTips),
-                      disabled: !row.applyDisabled
-                    }"> {{ $t('申请') }} </span>
+                      disabled: !row.applyDisabled,
+                    }"
+                  >
+                    {{ $t('申请') }}
+                  </span>
                 </bk-button>
                 <bk-button
-                  style="padding: 0 0 0 10px;"
+                  style="padding: 0 0 0 10px"
                   theme="primary"
                   :disabled="row.renewDisabled"
                   size="small"
@@ -297,8 +319,11 @@
                   <span
                     v-bk-tooltips="{
                       content: $t(row.renewTips),
-                      disabled: !row.renewDisabled
-                    }"> {{ $t('续期') }} </span>
+                      disabled: !row.renewDisabled,
+                    }"
+                  >
+                    {{ $t('续期') }}
+                  </span>
                 </bk-button>
               </div>
             </template>
@@ -346,6 +371,12 @@ export default {
     PaasngAlert,
     BatchDialog,
   },
+  props: {
+    typeList: {
+      type: Array,
+      default: () => [],
+    },
+  },
   data() {
     return {
       loading: false,
@@ -367,16 +398,6 @@ export default {
         rows: [],
         name: '',
       },
-      typeList: [
-        {
-          id: 'gateway',
-          name: this.$t('网关API'),
-        },
-        {
-          id: 'component',
-          name: this.$t('组件API'),
-        },
-      ],
       typeMap: {
         component: this.$t('组件API'),
         gateway: this.$t('网关API'),
@@ -427,7 +448,7 @@ export default {
       return this.$route.params.id;
     },
     isPageDisabled() {
-      return this.tableList.every(item => !item.permission_action) || !this.tableList.length;
+      return this.tableList.every((item) => !item.permission_action) || !this.tableList.length;
     },
     curDispatchMethod() {
       return this.typeValue === 'component' ? 'getSysAppPermissions' : 'getAppPermissions';
@@ -438,24 +459,26 @@ export default {
     // 是否允许批量申请、不支持跨网关/组件申请
     isApplyDisabled() {
       const idField = this.isComponentApi ? 'system_id' : 'gateway_id';
-      return !this.selectedList.some(item => item.applyDisabled === false)
-      || new Set(this.selectedList.map(item => item[idField])).size > 1;
+      return (
+        !this.selectedList.some((item) => item.applyDisabled === false) ||
+        new Set(this.selectedList.map((item) => item[idField])).size > 1
+      );
     },
     // 跨网关批量申请禁用，只支持单个网关下接口的批量申请
     isTooltipsDisabled() {
       const idField = this.isComponentApi ? 'system_id' : 'gateway_id';
-      return new Set(this.selectedList.map(item => item[idField])).size > 1;
+      return new Set(this.selectedList.map((item) => item[idField])).size > 1;
     },
     // 是否允许批量续期
     isRenewalDisabled() {
-      return !this.selectedList.some(item => item.renewDisabled === false);
+      return !this.selectedList.some((item) => item.renewDisabled === false);
     },
     isSesetTableList() {
       return !this.nameFilterValues.length && !this.statusFilterValues.length;
     },
   },
   watch: {
-    '$route'() {
+    $route() {
       this.init();
     },
     searchValue(newVal, oldVal) {
@@ -484,12 +507,12 @@ export default {
   },
   created() {
     this.init();
-    this.compare = p => (m, n) => {
+    this.compare = (p) => (m, n) => {
       const a = m[p] ? m[p] : 0;
       const b = n[p] ? n[p] : 0;
       return this.is_up ? a - b : b - a;
     };
-    this.compareName = p => (m, n) => {
+    this.compareName = (p) => (m, n) => {
       const a = m[p].slice(0, 1).charCodeAt();
       const b = n[p].slice(0, 1).charCodeAt();
       return a - b;
@@ -579,15 +602,17 @@ export default {
     },
 
     handleSelect(value, option) {
-      this.pagination = Object.assign({}, {
-        current: 1,
-        limit: 10,
-        count: 0,
-      });
+      this.pagination = Object.assign(
+        {},
+        {
+          current: 1,
+          limit: 10,
+          count: 0,
+        }
+      );
       this.nameFilters = [];
       this.selectedList = [];
       this.fetchList();
-      this.fetchFilterList();
     },
 
     sortTable() {
@@ -625,7 +650,7 @@ export default {
               src: '/static/images/sort-icon.png',
             },
           }),
-        ],
+        ]
       );
     },
 
@@ -638,17 +663,20 @@ export default {
     },
 
     handleRenewalAfterLeave() {
-      this.renewalDialog = Object.assign({}, {
-        visiable: false,
-        title: '',
-        rows: [],
-        name: '',
-      });
+      this.renewalDialog = Object.assign(
+        {},
+        {
+          visiable: false,
+          title: '',
+          rows: [],
+          name: '',
+        }
+      );
     },
 
     handleChange(newVal, oldVal, val) {
       if (newVal) {
-        this.allData = this.apiList.filter(item => item.permission_action === 'renew');
+        this.allData = this.apiList.filter((item) => item.permission_action === 'renew');
       } else {
         this.allData = this.apiList;
       }
@@ -658,8 +686,8 @@ export default {
     },
 
     /**
-             * 初始化弹层翻页条
-             */
+     * 初始化弹层翻页条
+     */
     initPageConf() {
       this.pagination.current = 1;
       const total = this.allData.length;
@@ -667,10 +695,10 @@ export default {
     },
 
     /**
-             * 翻页回调
-             *
-             * @param {number} page 当前页
-             */
+     * 翻页回调
+     *
+     * @param {number} page 当前页
+     */
     pageChange(page = 1) {
       this.allChecked = false;
       this.indeterminate = false;
@@ -685,12 +713,12 @@ export default {
     },
 
     /**
-             * 获取当前这一页的数据
-             *
-             * @param {number} page 当前页
-             *
-             * @return {Array} 当前页数据
-             */
+     * 获取当前这一页的数据
+     *
+     * @param {number} page 当前页
+     *
+     * @return {Array} 当前页数据
+     */
     getDataByPage(page) {
       let dataSource = this.allData;
       // 存在筛选条件更改数据源为已筛选后的列表
@@ -740,7 +768,7 @@ export default {
         await this.fetchList();
         this.handleSearch();
         if (this.isRenewalPerm) {
-          this.allData = this.apiList.filter(item => item.permission_action === 'renew');
+          this.allData = this.apiList.filter((item) => item.permission_action === 'renew');
         } else {
           this.allData = this.apiList;
         }
@@ -757,7 +785,11 @@ export default {
         return;
       }
       this.isFilter = true;
-      this.allData = [...this.apiList.filter(api => api.name.indexOf(this.searchValue) !== -1 || api.description.indexOf(this.searchValue) !== -1)];
+      this.allData = [
+        ...this.apiList.filter(
+          (api) => api.name.indexOf(this.searchValue) !== -1 || api.description.indexOf(this.searchValue) !== -1
+        ),
+      ];
       this.pagination.count = this.allData.length;
 
       this.pagination.current = 1;
@@ -775,8 +807,8 @@ export default {
     async fetchList() {
       this.loading = true;
       try {
-        const res = await this.$store.dispatch(`cloudApi/${this.curDispatchMethod}`, { appCode: this.appCode })
-                    ;(res.data || []).forEach((item) => {
+        const res = await this.$store.dispatch(`cloudApi/${this.curDispatchMethod}`, { appCode: this.appCode });
+        (res.data || []).forEach((item) => {
           item.type = this.typeValue;
         });
         // 权限续期处理
@@ -799,14 +831,14 @@ export default {
         this.apiList = Object.freeze(res.data);
         this.apiList.forEach((item) => {
           if (this.isComponentApi) {
-            if (!this.nameFilters.map(_ => _.value).includes(item.system_name)) {
+            if (!this.nameFilters.map((_) => _.value).includes(item.system_name)) {
               this.nameFilters.push({
                 text: item.system_name,
                 value: item.system_name,
               });
             }
           } else {
-            if (!this.nameFilters.map(_ => _.value).includes(item.api_name)) {
+            if (!this.nameFilters.map((_) => _.value).includes(item.api_name)) {
               this.nameFilters.push({
                 text: item.api_name,
                 value: item.api_name,
@@ -815,7 +847,7 @@ export default {
           }
         });
         if (this.isRenewalPerm) {
-          this.allData = res.data.filter(item => item.permission_action === 'renew');
+          this.allData = res.data.filter((item) => item.permission_action === 'renew');
         } else {
           this.allData = res.data;
         }
@@ -893,7 +925,7 @@ export default {
         if (this.allFilterData[key].length) {
           isFilter = true;
         }
-      };
+      }
       return isFilter;
     },
 
@@ -930,18 +962,21 @@ export default {
 
     // 取消
     handleAfterLeave() {
-      this.applyDialog = Object.assign({}, {
-        visiable: false,
-        title: '',
-        rows: [],
-        superiorId: '',
-        superiorName: '',
-      });
+      this.applyDialog = Object.assign(
+        {},
+        {
+          visiable: false,
+          title: '',
+          rows: [],
+          superiorId: '',
+          superiorName: '',
+        }
+      );
     },
 
     // 通用筛选逻辑
     getFilterAllList(data, fields, key) {
-      return data.filter(v => fields.includes(v[key]));
+      return data.filter((v) => fields.includes(v[key]));
     },
 
     // 重置TableList
@@ -961,7 +996,11 @@ export default {
       const filterFields = key === 'permission_status' ? this.statusFilterValues : this.nameFilterValues;
       // 多筛选条件处理
       if (this.statusFilterValues.length && this.nameFilterValues.length) {
-        const curFilterList = this.getFilterAllList(this.allData, this.nameFilterValues, this.isComponentApi ? 'system_name' : 'api_name');
+        const curFilterList = this.getFilterAllList(
+          this.allData,
+          this.nameFilterValues,
+          this.isComponentApi ? 'system_name' : 'api_name'
+        );
         this.filterAllList = this.getFilterAllList(curFilterList, this.statusFilterValues, 'permission_status');
       } else {
         // 当前筛选条件重置，但存在另外一组筛选条件
@@ -983,75 +1022,75 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    .search-wrapper {
-        margin-bottom: 16px;
-        .label,
-        .select-wrapper,
-        .checkbox-wrapper,
-        .search-button,
-        .input-wrapper {
-            display: inline-block;
-            vertical-align: top;
-        }
-        .label {
-            line-height: 32px;
-        }
-        .select-wrapper {
-            width: 200px;
-        }
-        .checkbox-wrapper {
-            margin: 0 15px;
-            line-height: 32px;
-        }
-        .input-wrapper {
-            width: 300px;
-        }
-        .search-button {
-            margin-left: 10px;
-        }
-    }
+.search-wrapper {
+  margin-bottom: 16px;
+  .label,
+  .select-wrapper,
+  .checkbox-wrapper,
+  .search-button,
+  .input-wrapper {
+    display: inline-block;
+    vertical-align: top;
+  }
+  .label {
+    line-height: 32px;
+  }
+  .select-wrapper {
+    width: 200px;
+  }
+  .checkbox-wrapper {
+    margin: 0 15px;
+    line-height: 32px;
+  }
+  .input-wrapper {
+    width: 300px;
+  }
+  .search-button {
+    margin-left: 10px;
+  }
+}
 
-    .table-operate-buttons {
-        position: relative;
-        left: -12px;
-    }
+.table-operate-buttons {
+  position: relative;
+  left: -12px;
+}
 
-    span.sensitive {
-        color: #ff0000;
-    }
+span.sensitive {
+  color: #ff0000;
+}
 
-    span.inner {
-        color: rgb(58, 171, 255);
-        opacity: .7;
-    }
+span.inner {
+  color: rgb(58, 171, 255);
+  opacity: 0.7;
+}
 
-    span.clound {
-        color: #45e35f;
-    }
+span.clound {
+  color: #45e35f;
+}
 
-    span.paasng-pass {
-        position: relative;
-        top: 1px;
-        color: #2dcb56;
-        font-size: 14px;
-    }
+span.paasng-pass {
+  position: relative;
+  top: 1px;
+  color: #2dcb56;
+  font-size: 14px;
+}
 
-    span.paasng-reject {
-        position: relative;
-        top: 1px;
-        color: #ea3636;
-        font-size: 14px;
-    }
+span.paasng-reject {
+  position: relative;
+  top: 1px;
+  color: #ea3636;
+  font-size: 14px;
+}
 
-    .applying {
-        position: relative;
-        top: -1px;
-    }
+.applying {
+  position: relative;
+  top: -1px;
+}
 </style>
 
 <style>
-    marked {
-        background: yellow;
-        color: black;
-    }
+marked {
+  background: yellow;
+  color: black;
+}
 </style>
diff --git a/webfe/package_vue/src/views/dev-center/app/basic-config/cloud-api/comps/apply-record.vue b/webfe/package_vue/src/views/dev-center/app/basic-config/cloud-api/comps/apply-record.vue
index 599cf4c3d4..fdd882df78 100644
--- a/webfe/package_vue/src/views/dev-center/app/basic-config/cloud-api/comps/apply-record.vue
+++ b/webfe/package_vue/src/views/dev-center/app/basic-config/cloud-api/comps/apply-record.vue
@@ -5,11 +5,11 @@
         <div class="label">
           {{ $t('类型') }}
         </div>
-        <div :class="['select-wrapper', { 'en': localLanguage === 'en' }]">
+        <div :class="['select-wrapper', { en: localLanguage === 'en' }]">
           <bk-select
             v-bk-tooltips.top="{
               content: curSelectedType,
-              disabled: localLanguage !== 'en'
+              disabled: localLanguage !== 'en',
             }"
             v-model="typeValue"
             :clearable="false"
@@ -32,7 +32,7 @@
           <user
             v-model="applicants"
             :placeholder="$t('请输入用户')"
-            style="width: 142px;"
+            style="width: 142px"
             :multiple="false"
             :empty-text="$t('无匹配人员')"
             @change="handleMemberSelect"
@@ -43,11 +43,11 @@
         <div class="label">
           {{ $t('状态') }}
         </div>
-        <div :class="['select-wrapper', { 'en': localLanguage === 'en' }]">
+        <div :class="['select-wrapper', { en: localLanguage === 'en' }]">
           <bk-select
             v-bk-tooltips.top="{
               content: curSelectedStatus,
-              disabled: localLanguage !== 'en'
+              disabled: localLanguage !== 'en',
             }"
             v-model="statusValue"
             clearable
@@ -71,7 +71,7 @@
           <bk-date-picker
             v-model="initDateTimeRange"
             ext-cls="application-time"
-            style="width: 195px;"
+            style="width: 195px"
             :placeholder="$t('选择日期范围')"
             :type="'daterange'"
             placement="bottom-end"
@@ -155,8 +155,9 @@
                   <span
                     :class="[
                       { inner: [$t('内部版'), $t('互娱外部版')].includes(props.row.tag) },
-                      { clound: [$t('上云版'), $t('互娱外部上云版')].includes(props.row.tag) }
-                    ]">
+                      { clound: [$t('上云版'), $t('互娱外部上云版')].includes(props.row.tag) },
+                    ]"
+                  >
                     {{ props.row.tag }}
                   </span>
                 </template>
@@ -171,13 +172,13 @@
             :render-header="$renderHeader"
           >
             <template slot-scope="props">
-              <template v-if="getHandleBy(props.row.handled_by) === '--'">
-                --
-              </template>
+              <template v-if="getHandleBy(props.row.handled_by) === '--'">--</template>
               <span
                 v-else
                 v-bk-tooltips="getHandleBy(props.row.handled_by)"
-              >{{ getHandleBy(props.row.handled_by) }}</span>
+              >
+                {{ getHandleBy(props.row.handled_by) }}
+              </span>
             </template>
           </bk-table-column>
           <bk-table-column
@@ -186,16 +187,19 @@
           >
             <template slot-scope="props">
               <template v-if="props.row.apply_status === 'approved'">
-                <span class="paasng-icon paasng-pass" /> {{ getStatusDisplay(props.row.apply_status) }}
+                <span class="paasng-icon paasng-pass" />
+                {{ getStatusDisplay(props.row.apply_status) }}
               </template>
               <template v-else-if="props.row.apply_status === 'partial_approved'">
                 {{ getStatusDisplay(props.row.apply_status) }}
               </template>
               <template v-else-if="props.row.apply_status === 'rejected'">
-                <span class="paasng-icon paasng-reject" /> {{ getStatusDisplay(props.row.apply_status) }}
+                <span class="paasng-icon paasng-reject" />
+                {{ getStatusDisplay(props.row.apply_status) }}
               </template>
               <template v-else>
-                <round-loading ext-cls="applying" /> {{ getStatusDisplay(props.row.apply_status) }}
+                <round-loading ext-cls="applying" />
+                {{ getStatusDisplay(props.row.apply_status) }}
               </template>
             </template>
           </bk-table-column>
@@ -244,9 +248,7 @@
           class="paasng-kv-list"
         >
           <div class="item">
-            <div class="key">
-              {{ $t('申请人') }}：
-            </div>
+            <div class="key">{{ $t('申请人') }}：</div>
             <div class="value">
               {{ curRecord.applied_by }}
             </div>
@@ -359,13 +361,16 @@
                 >
                   <template slot-scope="prop">
                     <template v-if="prop.row['apply_status'] === 'rejected'">
-                      <span class="paasng-icon paasng-reject" /> {{ $t('驳回') }}
+                      <span class="paasng-icon paasng-reject" />
+                      {{ $t('驳回') }}
                     </template>
                     <template v-else-if="prop.row['apply_status'] === 'pending'">
-                      <round-loading ext-cls="applying" /> {{ $t('待审批') }}
+                      <round-loading ext-cls="applying" />
+                      {{ $t('待审批') }}
                     </template>
                     <template v-else>
-                      <span class="paasng-icon paasng-pass" /> {{ prop.row['apply_status'] === 'approved' ? $t('通过') : $t('部分通过') }}
+                      <span class="paasng-icon paasng-pass" />
+                      {{ prop.row['apply_status'] === 'approved' ? $t('通过') : $t('部分通过') }}
                     </template>
                   </template>
                 </bk-table-column>
@@ -403,13 +408,16 @@
                 >
                   <template slot-scope="prop">
                     <template v-if="prop.row['apply_status'] === 'rejected'">
-                      <span class="paasng-icon paasng-reject" /> {{ $t('驳回') }}
+                      <span class="paasng-icon paasng-reject" />
+                      {{ $t('驳回') }}
                     </template>
                     <template v-else-if="prop.row['apply_status'] === 'pending'">
-                      <round-loading ext-cls="applying" /> {{ $t('待审批') }}
+                      <round-loading ext-cls="applying" />
+                      {{ $t('待审批') }}
                     </template>
                     <template v-else>
-                      <span class="paasng-icon paasng-pass" /> {{ prop.row['apply_status'] === 'approved' ? $t('通过') : $t('部分通过') }}
+                      <span class="paasng-icon paasng-pass" />
+                      {{ prop.row['apply_status'] === 'approved' ? $t('通过') : $t('部分通过') }}
                     </template>
                   </template>
                 </bk-table-column>
@@ -428,7 +436,8 @@
   </div>
 </template>
 
-<script>import moment from 'moment';
+<script>
+import moment from 'moment';
 import User from '@/components/user';
 
 export default {
@@ -436,6 +445,12 @@ export default {
   components: {
     User,
   },
+  props: {
+    typeList: {
+      type: Array,
+      default: () => [],
+    },
+  },
   data() {
     return {
       loading: false,
@@ -446,16 +461,6 @@ export default {
         count: 0,
       },
       currentBackup: 1,
-      typeList: [
-        {
-          id: 'gateway',
-          name: this.$t('网关API'),
-        },
-        {
-          id: 'component',
-          name: this.$t('组件API'),
-        },
-      ],
       typeMap: {
         component: this.$t('组件API'),
         gateway: this.$t('网关API'),
@@ -560,14 +565,14 @@ export default {
       return this.$store.state.localLanguage;
     },
     curSelectedType() {
-      return this.typeList.find(v => v.id === this.typeValue)?.name;
+      return this.typeList.find((v) => v.id === this.typeValue)?.name;
     },
     curSelectedStatus() {
-      return this.statusList.find(v => v.id === this.statusValue)?.name;
+      return this.statusList.find((v) => v.id === this.statusValue)?.name;
     },
   },
   watch: {
-    '$route'() {
+    $route() {
       const end = new Date();
       const start = new Date();
       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
@@ -606,15 +611,18 @@ export default {
   },
   methods: {
     resetPagination() {
-      this.pagination = Object.assign({}, {
-        current: 1,
-        limit: 10,
-        count: 0,
-      });
+      this.pagination = Object.assign(
+        {},
+        {
+          current: 1,
+          limit: 10,
+          count: 0,
+        }
+      );
     },
 
     getStatusDisplay(payload) {
-      const data = this.statusList.find(item => item.id === payload);
+      const data = this.statusList.find((item) => item.id === payload);
       if (data) {
         return data.name;
       }
@@ -667,7 +675,7 @@ export default {
     },
 
     getHandleBy(payload) {
-      const list = payload.filter(item => !!item);
+      const list = payload.filter((item) => !!item);
       if (list.length < 1) {
         return '--';
       }
@@ -707,8 +715,8 @@ export default {
         appCode: this.appCode,
         applied_by: this.applicants.length > 0 ? this.applicants[0] : '',
         apply_status: this.statusValue,
-        applied_time_start: (new Date(this.dateRange.startTime).getTime()) / 1000,
-        applied_time_end: (new Date(this.dateRange.endTime).getTime()) / 1000,
+        applied_time_start: new Date(this.dateRange.startTime).getTime() / 1000,
+        applied_time_end: new Date(this.dateRange.endTime).getTime() / 1000,
         query: this.searchValue,
       };
       try {
@@ -763,136 +771,137 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    .search-wrapper {
-        display: flex;
-        flex-wrap: wrap;
-        margin-bottom: 16px;
-        .search-item {
-            display: inline-block;
-            vertical-align: middle;
-            .label {
-                margin-right: 6px;
-            }
-        }
-        .search-item.auto {
-            flex: 1;
-            .bk-form-control {
-                width: 100%;
-                max-width: 360px;
-                min-width: 120px;
-                margin-left: auto;
-            }
-        }
-        .search-btn {
-            margin-left: 5px;
-        }
-        .label,
-        .member-wrapper,
-        .date-wrapper,
-        .select-wrapper {
-            display: inline-block;
-            vertical-align: top;
-        }
-        .label {
-            line-height: 32px;
-        }
-        .select-wrapper {
-            width: 98px;
-            &.en {
-              width: 130px;
-            }
-        }
-        .set-ml {
-            margin-left: 18px;
-        }
-    }
-
-    .table-operate-buttons {
-        position: relative;
-        left: -12px;
-    }
-
-    span.sensitive {
-        color: #ff0000;
-    }
-
-    span.inner {
-        color: rgb(58, 171, 255);
-        opacity: .7;
-    }
-
-    span.clound {
-        color: #45e35f;
+.search-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+  .search-item {
+    display: inline-block;
+    vertical-align: middle;
+    .label {
+      margin-right: 6px;
     }
-
-    span.paasng-pass {
-        position: relative;
-        top: 1px;
-        color: #2dcb56;
-        font-size: 14px;
-    }
-
-    span.paasng-reject {
-        position: relative;
-        top: 1px;
-        color: #ea3636;
-        font-size: 14px;
+  }
+  .search-item.auto {
+    flex: 1;
+    .bk-form-control {
+      width: 100%;
+      max-width: 360px;
+      min-width: 120px;
+      margin-left: auto;
     }
-
-    .applying {
-        position: relative;
-        top: -1px;
+  }
+  .search-btn {
+    margin-left: 5px;
+  }
+  .label,
+  .member-wrapper,
+  .date-wrapper,
+  .select-wrapper {
+    display: inline-block;
+    vertical-align: top;
+  }
+  .label {
+    line-height: 32px;
+  }
+  .select-wrapper {
+    width: 98px;
+    &.en {
+      width: 130px;
     }
-
-    .slider-detail-content {
-        padding: 30px;
-        min-height: calc(100vh - 50px);
+  }
+  .set-ml {
+    margin-left: 18px;
+  }
+}
+
+.table-operate-buttons {
+  position: relative;
+  left: -12px;
+}
+
+span.sensitive {
+  color: #ff0000;
+}
+
+span.inner {
+  color: rgb(58, 171, 255);
+  opacity: 0.7;
+}
+
+span.clound {
+  color: #45e35f;
+}
+
+span.paasng-pass {
+  position: relative;
+  top: 1px;
+  color: #2dcb56;
+  font-size: 14px;
+}
+
+span.paasng-reject {
+  position: relative;
+  top: 1px;
+  color: #ea3636;
+  font-size: 14px;
+}
+
+.applying {
+  position: relative;
+  top: -1px;
+}
+
+.slider-detail-content {
+  padding: 30px;
+  min-height: calc(100vh - 50px);
+}
+
+.paasng-kv-list {
+  border: 1px solid #f0f1f5;
+  border-radius: 2px;
+  background: #fafbfd;
+  padding: 10px 20px;
+
+  .item {
+    display: flex;
+    font-size: 14px;
+    border-bottom: 1px dashed #dcdee5;
+    min-height: 40px;
+    line-height: 40px;
+
+    &:last-child {
+      border-bottom: none;
     }
 
-    .paasng-kv-list {
-        border: 1px solid #f0f1f5;
-        border-radius: 2px;
-        background: #fafbfd;
-        padding: 10px 20px;
-
-        .item {
-            display: flex;
-            font-size: 14px;
-            border-bottom: 1px dashed #dcdee5;
-            min-height: 40px;
-            line-height: 40px;
-
-            &:last-child {
-                border-bottom: none;
-            }
-
-            .key {
-                min-width: 105px;
-                padding-right: 24px;
-                color: #63656e;
-                text-align: right;
-            }
-
-            .value {
-                color: #313238;
-                flex: 1;
-            }
-        }
-    }
-
-    .bk-table .paasng-expand-table {
-        tr {
-            background-color: #fafbfd;
-        }
-
-        td, th {
-            padding: 0 !important;
-            height: 42px !important;
-            cursor: default !important;
-        }
+    .key {
+      min-width: 105px;
+      padding-right: 24px;
+      color: #63656e;
+      text-align: right;
     }
 
-    /deep/ .application-time .bk-date-picker-rel .bk-date-picker-editor {
-        padding: 0 40px 0 10px;
+    .value {
+      color: #313238;
+      flex: 1;
     }
+  }
+}
+
+.bk-table .paasng-expand-table {
+  tr {
+    background-color: #fafbfd;
+  }
+
+  td,
+  th {
+    padding: 0 !important;
+    height: 42px !important;
+    cursor: default !important;
+  }
+}
+
+/deep/ .application-time .bk-date-picker-rel .bk-date-picker-editor {
+  padding: 0 40px 0 10px;
+}
 </style>
diff --git a/webfe/package_vue/src/views/dev-center/app/basic-config/cloud-api/index.vue b/webfe/package_vue/src/views/dev-center/app/basic-config/cloud-api/index.vue
index d5a558ab4d..c86a6c835c 100644
--- a/webfe/package_vue/src/views/dev-center/app/basic-config/cloud-api/index.vue
+++ b/webfe/package_vue/src/views/dev-center/app/basic-config/cloud-api/index.vue
@@ -1,10 +1,13 @@
 <template lang="html">
   <div class="cloud-wrapper">
     <!-- 云原生应用没有头部导航 -->
-    <div :class="['ps-top-bar','cloud-api-permission', { 'plugin-top-bar': isPlugin }]">
+    <div :class="['ps-top-bar', 'cloud-api-permission', { 'plugin-top-bar': isPlugin }]">
       <div class="header-title">
         {{ $t('云 API 权限') }}
-        <div class="guide-wrapper" v-if="frontendFeature.APP_ACCESS_TOKEN">
+        <div
+          class="guide-wrapper"
+          v-if="frontendFeature.APP_ACCESS_TOKEN"
+        >
           <bk-button
             class="f12"
             theme="primary"
@@ -47,7 +50,7 @@
             @tab-change="handleTabChange"
           >
             <bk-tab-panel
-              v-for="(panel, index) in panels"
+              v-for="(panel, index) in displayPanels"
               :key="index"
               v-bind="panel"
             />
@@ -68,10 +71,12 @@
             />
             <app-perm
               v-if="active === 'appPerm'"
+              :type-list="typeList"
               @data-ready="handlerDataReady"
             />
             <apply-record
               v-if="active === 'applyRecord'"
+              :type-list="typeList"
               @data-ready="handlerDataReady"
             />
           </div>
@@ -87,7 +92,10 @@
       width="680"
       @after-leave="handleCancel"
     >
-      <div class="header-wrapper" slot="header">
+      <div
+        class="header-wrapper"
+        slot="header"
+      >
         {{ $t('创建新令牌') }}
       </div>
       <div class="steps-wrapper">
@@ -106,7 +114,10 @@
           type="error"
           :show-icon="false"
         >
-          <div slot="title" class="alert-wrapper">
+          <div
+            slot="title"
+            class="alert-wrapper"
+          >
             <i class="paasng-icon paasng-remind error" />
             {{ $t('创建新令牌( access_token)，会导致原来的 access_token 会失效，该操作不可撤销，请谨慎操作。') }}
             <a
@@ -133,14 +144,20 @@
           type="success"
           :show-icon="false"
         >
-          <div slot="title" class="alert-wrapper">
+          <div
+            slot="title"
+            class="alert-wrapper"
+          >
             <i class="paasng-icon paasng-pass success" />
             {{ $t('令牌（access_token）创建成功！请复制该令牌，关闭弹窗后将无法再次看到它。') }}
           </div>
         </bk-alert>
         <div class="content">
-          <p class="title" v-if="tokenUrl">
-            {{ localLanguage === 'en' ? 'Access_token': '令牌（access_token）' }}
+          <p
+            class="title"
+            v-if="tokenUrl"
+          >
+            {{ localLanguage === 'en' ? 'Access_token' : '令牌（access_token）' }}
           </p>
           <div
             :class="['access-token-url', { error: !tokenUrl }]"
@@ -148,7 +165,10 @@
           >
             <span v-if="tokenUrl">{{ tokenUrl }}</span>
             <span v-else>{{ errorObject?.message }}</span>
-            <div class="copy" v-if="tokenUrl">
+            <div
+              class="copy"
+              v-if="tokenUrl"
+            >
               <i class="paasng-icon paasng-general-copy" />
               {{ $t('复制') }}
             </div>
@@ -189,7 +209,8 @@
   </div>
 </template>
 
-<script>import appBaseMixin from '@/mixins/app-base-mixin';
+<script>
+import appBaseMixin from '@/mixins/app-base-mixin';
 import RenderApi from './comps/render-api';
 import AppPerm from './comps/app-perm';
 import ApplyRecord from './comps/apply-record';
@@ -208,12 +229,6 @@ export default {
         gateway: this.GLOBAL.DOC.APIGW_QUICK_START,
         API: this.GLOBAL.DOC.APIGW_USER_API,
       },
-      panels: [
-        { name: 'gatewayApi', label: this.$t('网关API') },
-        { name: 'componentApi', label: this.$t('组件API') },
-        { name: 'appPerm', label: this.$t('已申请的权限') },
-        { name: 'applyRecord', label: this.$t('申请记录') },
-      ],
       active: 'gatewayApi',
       comKey: -1,
       pageKey: -1,
@@ -243,6 +258,23 @@ export default {
     frontendFeature() {
       return this.$store.state.userFeature;
     },
+    platformFeature() {
+      return this.$store.state.platformFeature;
+    },
+    displayPanels() {
+      return [
+        { name: 'gatewayApi', label: this.$t('网关API') },
+        { name: 'componentApi', label: this.$t('组件API') },
+        { name: 'appPerm', label: this.$t('已申请的权限') },
+        { name: 'applyRecord', label: this.$t('申请记录') },
+      ].filter((item) => item.name !== 'componentApi' || this.platformFeature?.ESB_API);
+    },
+    typeList() {
+      return [
+        { id: 'gateway', name: this.$t('网关API') },
+        { id: 'component', name: this.$t('组件API') },
+      ].filter((item) => item.id !== 'component' || this.platformFeature?.ESB_API);
+    },
   },
   watch: {
     $route() {
@@ -307,7 +339,9 @@ export default {
     // 错误信息转换处理
     formatErrorString(message) {
       // 将错误字符串转换为一个格式正确的JSON字符串
-      const jsonString = message.replace(/detail: /, '').replace(/'/g, '"')
+      const jsonString = message
+        .replace(/detail: /, '')
+        .replace(/'/g, '"')
         .replace(/None/g, 'null')
         .replace(/False/g, 'false')
         .replace(/True/g, 'true');
@@ -457,8 +491,8 @@ export default {
     line-height: 22px;
 
     &.error {
-      background: #FFEDED;
-      color: #63656E;
+      background: #ffeded;
+      color: #63656e;
       margin-top: 24px;
     }
 
@@ -495,23 +529,23 @@ export default {
 
 .guide-wrapper {
   .bk-button:hover {
-    background: #E1ECFF;
-    color: #1768EF;
-    border-color: #1768EF;
+    background: #e1ecff;
+    color: #1768ef;
+    border-color: #1768ef;
   }
 }
 
 .alert-wrapper {
   font-size: 12px;
-  color: #63656E;
+  color: #63656e;
   i {
     transform: translateY(0px);
     font-size: 14px;
     &.error {
-      color: #EA3636;
+      color: #ea3636;
     }
     &.success {
-      color: #2DCB56;
+      color: #2dcb56;
     }
   }
 }
@@ -520,6 +554,6 @@ export default {
 .create-token-tips-cls .tippy-content {
   font-family: MicrosoftYaHei;
   font-size: 12px;
-  color: #63656E;
+  color: #63656e;
 }
 </style>