From 74247e20558d8946499d7ae38ddf4e2b8594b5d2 Mon Sep 17 00:00:00 2001
From: wmh <3303710797@qq.com>
Date: Mon, 17 Jun 2024 19:24:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=9F=E8=83=BD=E4=BE=9D=E8=B5=96?=
 =?UTF-8?q?=E9=A1=B9=E9=94=99=E8=AF=AF=E9=A1=B5=E9=9D=A2=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=20(#1392)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webfe/package_vue/package.json                |    4 +-
 webfe/package_vue/src/language/lang/en.js     |    9 +-
 webfe/package_vue/src/language/lang/zh.js     |    9 +-
 webfe/package_vue/src/main.js                 |    4 +
 .../app/engine/cloud-deployment/index.vue     |   14 +-
 .../observability-config/alarm-strategy.vue   |   33 +-
 .../observability-config/index.vue            |   42 +-
 .../dev-center/app/services/instance.vue      | 1437 +++++++++--------
 .../package_vue/static/json/paas_static.ce.js |    3 +
 .../package_vue/static/json/paas_static.ee.js |    3 +
 10 files changed, 845 insertions(+), 713 deletions(-)

diff --git a/webfe/package_vue/package.json b/webfe/package_vue/package.json
index 61c93d0100..a7163f695f 100644
--- a/webfe/package_vue/package.json
+++ b/webfe/package_vue/package.json
@@ -18,9 +18,11 @@
     "@babel/helper-module-imports": "^7.0.0",
     "@blueking/babel-preset-bk": "^2.1.0-beta7",
     "@blueking/bkui-form": "0.0.23",
+    "@blueking/bkui-library": "^0.0.0-beta.6",
     "@blueking/cli-service-webpack": "0.0.0-beta.73",
     "@blueking/eslint-config-bk": "^2.1.0-beta.12",
-    "@blueking/log": "^2.0.16",
+    "@blueking/functional-dependency": "^0.0.1-beta.12",
+    "@blueking/log": "^2.1.4",
     "@blueking/login-modal": "^1.0.1",
     "@blueking/notice-component-vue2": "^2.0.4",
     "@blueking/stylelint-config-bk": "^2.1.0-beta.9",
diff --git a/webfe/package_vue/src/language/lang/en.js b/webfe/package_vue/src/language/lang/en.js
index 2dac9c3937..e55b856f13 100644
--- a/webfe/package_vue/src/language/lang/en.js
+++ b/webfe/package_vue/src/language/lang/en.js
@@ -2513,7 +2513,6 @@ export default {
   '删除后，将不再采集相关日志。': 'After deletion, the related logs will no longer be collected.',
   '相对于构建目录的路径，若留空，默认为构建目录下名为 “Dockerfile” 的文件': 'Path relative to the build directory; if left empty, the default is a file named "Dockerfile" under the build directory.',
   '请输入镜像 Tag': 'Please enter the image Tag',
-  '默认已采集和清洗：标准输出、开发框架定义日志路径中的日志。': 'By default, standard output and logs from paths defined by the development framework have been collected and cleansed.',
   暂不支持自定义日志采集规则: 'Custom log collection rules are not supported at the moment',
   '自定义日志采集/清洗规则、日志导出等功能需要部署“蓝鲸日志平台”，由蓝鲸日志平台提供。': 'Customizing log collection/cleansing rules, log export, and other features require the deployment of "Blue Whale Log Platform," provided by the Blue Whale Log Platform.',
   '由小写字母组成，长度小于 16 个字符': 'Consists of lowercase letters and is less than 16 characters long',
@@ -2628,4 +2627,12 @@ export default {
   查看迁移进度: 'View Migration Progress',
   '已选择 <span>{d}</span> 个组织，<span class="s2">{s}</span> 个用户': 'Selected <span>{d}</span> organizations and <span class="s2">{s}</span> users',
   '仅影响 蓝鲸桌面 上应用的可见范围': 'Only affects the visibility of applications on the BK Desktop',
+  暂无监控告警功能: 'No monitoring and alerting functionality available',
+  '开发者中心与蓝鲸监控平台无缝集成，应用部署后便可自动开启资源使用率、进程异常等告警配置。': 'The Developer Center is seamlessly integrated with the BlueKing Monitoring Platform. After application deployment, you can automatically enable alerts for resource usage, process anomalies, and more.',
+  暂无自定义日志采集等高级功能: 'No custom log collection and other advanced features available',
+  '平台默认采集了标准输出日志、访问日志、开发框架定义的文件日志。部署蓝鲸监控平台后，可以通过自定义日志采集、清洗规则采集任意文件日志，还能提供日志导出、日志关键字告警等功能。': 'The platform automatically collects standard output logs, access logs, and file logs defined by the development framework. After deploying the BlueKing Monitoring Platform, you can collect any file logs through custom log collection and cleaning rules, and also provide log export, log keyword alerts, and other features.',
+  '暂无蓝鲸 APM 增强功能': 'No BlueKing APM enhanced functionality available',
+  '应用部署后自动接入蓝鲸监控平台，即可获得应用性能管理（APM）以及 Trace 检索等全面可观测性方案，帮助您实时洞察应用状态并优化用户体验。': 'After the application is deployed and automatically connected to the BlueKing Monitoring Platform, you can obtain comprehensive observability solutions such as Application Performance Management (APM) and Trace retrieval, helping you gain real-time insights into the application status and optimize user experience.',
+  '如需要该功能，需要部署：': 'If this functionality is required, you need to deploy:',
+  '1. 蓝鲸监控：监控日志套餐': '1. BlueKing Monitoring: Monitoring and Logging Package',
 };
diff --git a/webfe/package_vue/src/language/lang/zh.js b/webfe/package_vue/src/language/lang/zh.js
index 89fd505654..3fdc3e20ef 100644
--- a/webfe/package_vue/src/language/lang/zh.js
+++ b/webfe/package_vue/src/language/lang/zh.js
@@ -2653,7 +2653,6 @@ export default {
   '删除后，将不再采集相关日志。': '删除后，将不再采集相关日志。',
   '相对于构建目录的路径，若留空，默认为构建目录下名为 “Dockerfile” 的文件': '相对于构建目录的路径，若留空，默认为构建目录下名为 “Dockerfile” 的文件',
   '请输入镜像 Tag': '请输入镜像 Tag',
-  '默认已采集和清洗：标准输出、开发框架定义日志路径中的日志。': '默认已采集和清洗：标准输出、开发框架定义日志路径中的日志。',
   暂不支持自定义日志采集规则: '暂不支持自定义日志采集规则',
   '自定义日志采集/清洗规则、日志导出等功能需要部署“蓝鲸日志平台”，由蓝鲸日志平台提供。': '自定义日志采集/清洗规则、日志导出等功能需要部署“蓝鲸日志平台”，由蓝鲸日志平台提供。',
   '由小写字母组成，长度小于 16 个字符': '由小写字母组成，长度小于 16 个字符',
@@ -2768,4 +2767,12 @@ export default {
   查看迁移进度: '查看迁移进度',
   '已选择 <span>{d}</span> 个组织，<span class="s2">{s}</span> 个用户': '已选择 <span>{d}</span> 个组织，<span class="s2">{s}</span> 个用户',
   '仅影响 蓝鲸桌面 上应用的可见范围': '仅影响 蓝鲸桌面 上应用的可见范围',
+  暂无监控告警功能: '暂无监控告警功能',
+  '开发者中心与蓝鲸监控平台无缝集成，应用部署后便可自动开启资源使用率、进程异常等告警配置。': '开发者中心与蓝鲸监控平台无缝集成，应用部署后便可自动开启资源使用率、进程异常等告警配置。',
+  暂无自定义日志采集等高级功能: '暂无自定义日志采集等高级功能',
+  '平台默认采集了标准输出日志、访问日志、开发框架定义的文件日志。部署蓝鲸监控平台后，可以通过自定义日志采集、清洗规则采集任意文件日志，还能提供日志导出、日志关键字告警等功能。': '平台默认采集了标准输出日志、访问日志、开发框架定义的文件日志。部署蓝鲸监控平台后，可以通过自定义日志采集、清洗规则采集任意文件日志，还能提供日志导出、日志关键字告警等功能。',
+  '暂无蓝鲸 APM 增强功能': '暂无蓝鲸 APM 增强功能',
+  '应用部署后自动接入蓝鲸监控平台，即可获得应用性能管理（APM）以及 Trace 检索等全面可观测性方案，帮助您实时洞察应用状态并优化用户体验。': '应用部署后自动接入蓝鲸监控平台，即可获得应用性能管理（APM）以及 Trace 检索等全面可观测性方案，帮助您实时洞察应用状态并优化用户体验。',
+  '如需要该功能，需要部署：': '如需要该功能，需要部署：',
+  '1. 蓝鲸监控：监控日志套餐': '1. 蓝鲸监控：监控日志套餐',
 };
diff --git a/webfe/package_vue/src/main.js b/webfe/package_vue/src/main.js
index 5482b12d0c..a026c15359 100644
--- a/webfe/package_vue/src/main.js
+++ b/webfe/package_vue/src/main.js
@@ -75,9 +75,13 @@ import { renderHeader } from '@/common/utils';
 
 // markdown样式
 import 'github-markdown-css';
+
 // 代码高亮
 import 'highlight.js/styles/github.css';
 
+// 功能依赖css
+import '@blueking/functional-dependency/vue2/vue2.css';
+
 window.$ = $;
 
 Vue.config.devtools = true;
diff --git a/webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/index.vue b/webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/index.vue
index 3a7d008cc0..6b559a6a13 100644
--- a/webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/index.vue
+++ b/webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/index.vue
@@ -36,7 +36,7 @@
               </bk-button>
             </template>
             <bk-tab-panel
-              v-for="(panel, index) in curTabPanels"
+              v-for="(panel, index) in panels"
               v-bind="panel"
               :key="index"
             ></bk-tab-panel>
@@ -134,7 +134,7 @@ export default {
     },
 
     routerRefs() {
-      const curPenel = this.curTabPanels.find(e => e.name === this.active);
+      const curPenel = this.panels.find(e => e.name === this.active);
       return curPenel ? curPenel.ref : 'process';
     },
 
@@ -148,15 +148,7 @@ export default {
     },
 
     firstTabActiveName() {
-      return this.curTabPanels[0].name;
-    },
-
-    curTabPanels() {
-      // 可观测性配置接入featureflag
-      if (!this.userFeature.PHALANX) {
-        this.panels = this.panels.filter(v => v.ref !== 'observability');
-      }
-      return this.panels;
+      return this.panels[0].name;
     },
 
     // 是否需要保存操作按钮
diff --git a/webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/observability-config/alarm-strategy.vue b/webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/observability-config/alarm-strategy.vue
index 27f5de0eeb..a3969059b0 100644
--- a/webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/observability-config/alarm-strategy.vue
+++ b/webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/observability-config/alarm-strategy.vue
@@ -2,7 +2,7 @@
   <div class="alarm-strategy mt25">
     <div class="top-title mb20">
       <h4>{{ $t('告警策略') }}</h4>
-      <p class="tips">
+      <p class="tips" v-if="curAppInfo.feature?.PHALANX">
         {{ $t('告警策略对应用下所有模块都生效，如需新增或编辑告警策略请直接到蓝鲸监控平台操作。') }}
         <!-- 未部署不展示 -->
         <a v-if="strategyLink" :href="strategyLink" target="_blank">
@@ -11,7 +11,11 @@
         </a>
       </p>
     </div>
-    <div v-bkloading="{ isLoading: isLoading, zIndex: 10 }">
+
+    <div
+      v-bkloading="{ isLoading: isLoading, zIndex: 10 }"
+      v-if="curAppInfo.feature?.PHALANX"
+    >
       <!-- 策略列表 -->
       <bk-table
         v-if="alarmStrategyList?.length"
@@ -99,7 +103,9 @@
           prop="is_enabled"
         >
           <template slot-scope="{ row }">
-            <span :class="['tag', row.is_enabled ? 'enable' : 'deactivate' ]">{{ row.is_enabled ? '启用' : '停用' }}</span>
+            <span :class="['tag', row.is_enabled ? 'enable' : 'deactivate']">
+              {{ row.is_enabled ? $t('启用') : $t('停用') }}
+            </span>
           </template>
         </bk-table-column>
       </bk-table>
@@ -116,13 +122,25 @@
         </div>
       </div>
     </div>
+    <FunctionalDependency
+      v-else
+      mode="partial"
+      :title="$t('暂无监控告警功能')"
+      :functional-desc="$t('开发者中心与蓝鲸监控平台无缝集成，应用部署后便可自动开启资源使用率、进程异常等告警配置。')"
+      :guide-title="$t('如需要该功能，需要部署：')"
+      :guide-desc-list="[$t('1. 蓝鲸监控：监控日志套餐')]"
+      @gotoMore="gotoMore"
+    />
   </div>
 </template>
 
-<script>import { THRESHOLD_MAP, LEVEL_MAP } from '@/common/constants.js';
+<script>
+import FunctionalDependency from '@blueking/functional-dependency/vue2/index.umd.min.js';
+import { THRESHOLD_MAP, LEVEL_MAP } from '@/common/constants.js';
 
 export default {
   name: 'AlarmStrategy',
+  components: { FunctionalDependency },
   data() {
     return {
       alarmStrategyList: [],
@@ -140,6 +158,9 @@ export default {
     appCode() {
       return this.$route.params.id;
     },
+    curAppInfo() {
+      return this.$store.state.curAppInfo || {};
+    },
   },
   created() {
     this.getAlarmStrategies();
@@ -230,6 +251,10 @@ export default {
         },
       });
     },
+    // 了解更多
+    gotoMore() {
+      window.open(this.GLOBAL.DOC.DEPLOYMENT_MAINTENANCE, '_blank');
+    },
   },
 };
 </script>
diff --git a/webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/observability-config/index.vue b/webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/observability-config/index.vue
index ebcab2f96f..823de65677 100644
--- a/webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/observability-config/index.vue
+++ b/webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/observability-config/index.vue
@@ -2,17 +2,14 @@
   <div class="observability-config">
     <div class="top-title mb20">
       <h4>{{ $t('日志采集') }}</h4>
-      <p class="tips" v-if="curAppInfo.feature?.ENABLE_BK_LOG_COLLECTOR">
+      <p class="tips" v-if="enableBkLogCollector">
         {{ $t('默认已采集和清洗：标准输出、开发框架定义日志路径中的日志，也可以添加自定义日志采集规则。') }}
       </p>
-      <p class="tips" v-else>
-        {{ $t('默认已采集和清洗：标准输出、开发框架定义日志路径中的日志。') }}
-      </p>
     </div>
     <!-- 采集规则 -->
     <section class="collection-rules">
       <bk-button
-        v-if="curAppInfo.feature?.ENABLE_BK_LOG_COLLECTOR"
+        v-if="enableBkLogCollector"
         theme="primary"
         class="mb16"
         @click="handleAddCollectionRule"
@@ -21,7 +18,7 @@
         {{ $t('新增采集规则') }}
       </bk-button>
       <div
-        v-if="curAppInfo.feature?.ENABLE_BK_LOG_COLLECTOR"
+        v-if="enableBkLogCollector"
         v-bkloading="{ isLoading: isTableLoading, zIndex: 10 }"
       >
         <bk-table
@@ -118,15 +115,15 @@
           </div>
         </div>
       </div>
-      <section
+      <FunctionalDependency
         v-else
-        class="empty"
-      >
-        <div class="empty-content">
-          <div class="title">{{ $t('暂不支持自定义日志采集规则') }}</div>
-          <div class="sub-title">{{ $t('自定义日志采集/清洗规则、日志导出等功能需要部署“蓝鲸日志平台”，由蓝鲸日志平台提供。') }}</div>
-        </div>
-      </section>
+        mode="partial"
+        :title="$t('暂无自定义日志采集等高级功能')"
+        :functional-desc="$t('平台默认采集了标准输出日志、访问日志、开发框架定义的文件日志。部署蓝鲸监控平台后，可以通过自定义日志采集、清洗规则采集任意文件日志，还能提供日志导出、日志关键字告警等功能。')"
+        :guide-title="$t('如需要该功能，需要部署：')"
+        :guide-desc-list="[$t('1. 蓝鲸监控：监控日志套餐')]"
+        @gotoMore="gotoMore"
+      />
     </section>
 
     <!-- 告警策略 -->
@@ -238,10 +235,12 @@
   </div>
 </template>
 
-<script>import i18n from '@/language/i18n.js';
+<script>
+import i18n from '@/language/i18n.js';
 import alarmStrategy from './alarm-strategy.vue';
+import FunctionalDependency from '@blueking/functional-dependency/vue2/index.umd.min.js';
 export default {
-  components: { alarmStrategy },
+  components: { alarmStrategy, FunctionalDependency },
   data() {
     return {
       isTableLoading: false,
@@ -315,9 +314,12 @@ export default {
     curAppInfo() {
       return this.$store.state.curAppInfo || {};
     },
+    enableBkLogCollector() {
+      return this.curAppInfo.feature?.ENABLE_BK_LOG_COLLECTOR || false;
+    },
   },
   created() {
-    if (this.curAppInfo.feature?.ENABLE_BK_LOG_COLLECTOR) {
+    if (this.enableBkLogCollector) {
       this.getLogCollectionRuleList();
     }
     this.getCustomLogCollectionRule();
@@ -515,7 +517,6 @@ export default {
 
     // 页容量变化回调
     handleLimitChange(currentLimit) {
-      console.log('currentLimit', currentLimit);
       this.pagination.limit = currentLimit;
       this.pagination.current = 1;
     },
@@ -533,6 +534,11 @@ export default {
         },
       });
     },
+
+    // 了解更多
+    gotoMore() {
+      window.open(this.GLOBAL.DOC.DEPLOYMENT_MAINTENANCE, '_blank');
+    },
   },
 };
 </script>
diff --git a/webfe/package_vue/src/views/dev-center/app/services/instance.vue b/webfe/package_vue/src/views/dev-center/app/services/instance.vue
index c09d8964ad..2f4ba5e836 100644
--- a/webfe/package_vue/src/views/dev-center/app/services/instance.vue
+++ b/webfe/package_vue/src/views/dev-center/app/services/instance.vue
@@ -15,184 +15,244 @@
         :collapsible="true"
         :initial-divide="asideWidth"
         ext-cls="instance-resize-layout-cls"
-        style="width: 100%;height: 100%;"
-        @collapse-change="handleCollapseChange">
-        <div class="instance-container-cls" slot="main">
+        style="width: 100%; height: 100%"
+        @collapse-change="handleCollapseChange"
+      >
+        <div
+          class="instance-container-cls"
+          slot="main"
+        >
           <!-- 云原生 -->
           <div
             v-if="isCloudNativeApp"
             @click="handleGoBack"
             class="top-return-bar flex-row align-items-center"
           >
-            <i
-              class="paasng-icon paasng-arrows-left icon-cls-back mr5"
-            />
+            <i class="paasng-icon paasng-arrows-left icon-cls-back mr5" />
             <h4>{{ $t('返回上一页') }}</h4>
           </div>
 
-          <bk-alert
-            v-if="delAppDialog.moduleList.length > 0"
-            style="margin-bottom: 16px;"
-            type="info"
-            :title="pageTips"
-          />
+          <!-- 功能依赖 -->
+          <section
+            class="functional-dependency-wrapper"
+            v-if="!isEnhancedFeatureEnabled"
+          >
+            <FunctionalDependency
+              mode="partial"
+              :title="$t('暂无蓝鲸 APM 增强功能')"
+              :functional-desc="
+                $t('应用部署后自动接入蓝鲸监控平台，即可获得应用性能管理（APM）以及 Trace 检索等全面可观测性方案，帮助您实时洞察应用状态并优化用户体验。')
+              "
+              :guide-title="$t('如需要该功能，需要部署：')"
+              :guide-desc-list="[$t('1. 蓝鲸监控：监控日志套餐')]"
+              @gotoMore="gotoMore"
+            />
+          </section>
 
-          <section class="instance-tab-container">
-            <p class="title">{{ $t('实例详情') }}</p>
-            <!-- 写入环境变量 -->
-            <div class="env-variables-wrapper">
-              <span class="sub-title">{{ $t('写入环境变量') }}</span>
-              <div @click.stop="handleSwitcherChange">
-                <bk-switcher
-                  v-model="credentialsDisabled"
-                  theme="primary"
-                  size="small"
-                  :pre-check="() => false"
-                ></bk-switcher>
-              </div>
-              <span class="tips">
-                <i class="paasng-icon paasng-info-line mr5"></i>
-                {{ $t('若不写入，将无法从环境变量获取实例的凭证信息') }}
-              </span>
-            </div>
-            <!-- 编辑 -->
-            <div class="instance-info" v-if="specifications.length">
-              <div class="item" v-for="item in specifications" :key="item.name">
-                <span>{{ $t(item.name) }}：</span>
-                <span class="value" v-bk-overflow-tips>{{ $t(item.value) }}</span>
+          <template v-else>
+            <bk-alert
+              v-if="delAppDialog.moduleList.length > 0"
+              style="margin-bottom: 16px"
+              type="info"
+              :title="pageTips"
+            />
+
+            <section class="instance-tab-container">
+              <p class="title">{{ $t('实例详情') }}</p>
+              <!-- 写入环境变量 -->
+              <div class="env-variables-wrapper">
+                <span class="sub-title">{{ $t('写入环境变量') }}</span>
+                <div @click.stop="handleSwitcherChange">
+                  <bk-switcher
+                    v-model="credentialsDisabled"
+                    theme="primary"
+                    size="small"
+                    :pre-check="() => false"
+                  ></bk-switcher>
+                </div>
+                <span class="tips">
+                  <i class="paasng-icon paasng-info-line mr5"></i>
+                  {{ $t('若不写入，将无法从环境变量获取实例的凭证信息') }}
+                </span>
               </div>
-              <span
-                v-bk-tooltips="{ content: $t('增强服务实例已分配，不能再修改配置信息'), disabled: canEditConfig }"
-                :class="['edit-icon', { 'disabled': !canEditConfig }]"
-                @click="handleEditInstance">
-                <i class="paasng-icon paasng-edit-2"></i>
-              </span>
-            </div>
-            <bk-table
-              :data="instanceList"
-              v-bkloading="{ isLoading: isTableLoading, zIndex: 10 }"
-              size="large"
-              style="margin-top: 15px;"
-              ext-cls="instance-details-table-cls"
-              :outer-border="false">
-              <div slot="empty" class="paas-loading-panel">
-                <div class="text">
-                  <table-empty
-                    class="table-empty-cls"
-                    :empty-title="$t('暂无增强服务配置信息')"
-                    empty
-                  />
-                  <p class="sub-title">
-                    {{ $t('服务启用后，将在下一次部署过程中申请实例，请先进行应用部署。') }}
-                  </p>
+              <!-- 编辑 -->
+              <div
+                class="instance-info"
+                v-if="specifications.length"
+              >
+                <div
+                  class="item"
+                  v-for="item in specifications"
+                  :key="item.name"
+                >
+                  <span>{{ $t(item.name) }}：</span>
+                  <span
+                    class="value"
+                    v-bk-overflow-tips
+                  >
+                    {{ $t(item.value) }}
+                  </span>
                 </div>
+                <span
+                  v-bk-tooltips="{ content: $t('增强服务实例已分配，不能再修改配置信息'), disabled: canEditConfig }"
+                  :class="['edit-icon', { disabled: !canEditConfig }]"
+                  @click="handleEditInstance"
+                >
+                  <i class="paasng-icon paasng-edit-2"></i>
+                </span>
               </div>
-              <bk-table-column :label="$t('实例 ID')" width="100">
-                <template slot-scope="{ $index }">
-                  #{{ $index + 1 }}
-                </template></bk-table-column>
-              <bk-table-column :label="$t('凭证信息')" prop="ip" min-width="380">
-                <template slot-scope="{ row, $index }">
-                  <template
-                    v-if="row.service_instance.config.hasOwnProperty('is_done')
-                      && !row.service_instance.config.is_done">
-                    <p class="mt15 mb15">
-                      {{ $t('服务正在创建中，请通过“管理入口”查看进度') }}
+              <bk-table
+                :data="instanceList"
+                v-bkloading="{ isLoading: isTableLoading, zIndex: 10 }"
+                size="large"
+                style="margin-top: 15px"
+                ext-cls="instance-details-table-cls"
+                :outer-border="false"
+              >
+                <div
+                  slot="empty"
+                  class="paas-loading-panel"
+                >
+                  <div class="text">
+                    <table-empty
+                      class="table-empty-cls"
+                      :empty-title="$t('暂无增强服务配置信息')"
+                      empty
+                    />
+                    <p class="sub-title">
+                      {{ $t('服务启用后，将在下一次部署过程中申请实例，请先进行应用部署。') }}
                     </p>
-                  </template>
-                  <template v-else>
-                    <section class="credential-information">
-                      <div
-                        v-for="(value, key) in row.service_instance.credentials"
-                        :key="key"
-                        class="config-width"
-                        v-bk-overflow-tips
-                      >
-                        <span class="gray">{{ key }}: </span><span class="break-all">{{ value }}</span><br>
-                      </div>
+                  </div>
+                </div>
+                <bk-table-column
+                  :label="$t('实例 ID')"
+                  width="100"
+                >
+                  <template slot-scope="{ $index }">#{{ $index + 1 }}</template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="$t('凭证信息')"
+                  prop="ip"
+                  min-width="380"
+                >
+                  <template slot-scope="{ row, $index }">
+                    <template
+                      v-if="
+                        row.service_instance.config.hasOwnProperty('is_done') && !row.service_instance.config.is_done
+                      "
+                    >
+                      <p class="mt15 mb15">
+                        {{ $t('服务正在创建中，请通过“管理入口”查看进度') }}
+                      </p>
+                    </template>
+                    <template v-else>
+                      <section class="credential-information">
+                        <div
+                          v-for="(value, key) in row.service_instance.credentials"
+                          :key="key"
+                          class="config-width"
+                          v-bk-overflow-tips
+                        >
+                          <span class="gray">{{ key }}:</span>
+                          <span class="break-all">{{ value }}</span>
+                          <br />
+                        </div>
+                        <div
+                          v-for="(key, fieldsIndex) in row.service_instance.sensitive_fields"
+                          :key="fieldsIndex"
+                        >
+                          <span class="gray">{{ key }}:</span>
+                          ******
+                          <i
+                            v-bk-tooltips="$t('敏感字段，请参考下方使用指南，通过环境变量获取')"
+                            class="paasng-icon paasng-question-circle"
+                          />
+                        </div>
+                        <div
+                          v-for="(value, key) in row.service_instance.hidden_fields"
+                          :key="key"
+                          v-bk-overflow-tips
+                        >
+                          <span class="gray">{{ key }}:</span>
+                          <span
+                            v-if="hFieldstoggleStatus[$index][key]"
+                            class="break-all"
+                          >
+                            {{ value }}
+                          </span>
+                          <span
+                            v-else
+                            class="break-all"
+                          >
+                            ******
+                          </span>
+                          <button
+                            v-bk-tooltips="$t('敏感字段，点击后显示')"
+                            class="btn-display-hidden-field ps-btn ps-btn-default ps-btn-xs"
+                            @click="$set(hFieldstoggleStatus[$index], key, !hFieldstoggleStatus[$index][key])"
+                          >
+                            {{ hFieldstoggleText[hFieldstoggleStatus[$index][key] || false] }}
+                          </button>
+                        </div>
+                      </section>
                       <div
-                        v-for="(key, fieldsIndex) in row.service_instance.sensitive_fields"
-                        :key="fieldsIndex"
+                        v-if="!row.service_instance.sensitive_fields.length"
+                        class="copy-container"
                       >
-                        <span class="gray">{{ key }}: </span>******
                         <i
-                          v-bk-tooltips="$t('敏感字段，请参考下方使用指南，通过环境变量获取')"
-                          class="paasng-icon paasng-question-circle"
+                          class="paasng-icon paasng-general-copy"
+                          @click="handleCopy(row)"
                         />
                       </div>
-                      <div
-                        v-for="(value, key) in row.service_instance.hidden_fields"
-                        :key="key"
-                        v-bk-overflow-tips
-                      >
-                        <span class="gray">{{ key }}: </span>
-                        <span
-                          v-if="hFieldstoggleStatus[$index][key]"
-                          class="break-all"
-                        >
-                          {{ value }}
-                        </span>
-                        <span
-                          v-else
-                          class="break-all"
-                        >******</span>
-                        <button
-                          v-bk-tooltips="$t('敏感字段，点击后显示')"
-                          class="btn-display-hidden-field ps-btn ps-btn-default ps-btn-xs"
-                          @click="$set(hFieldstoggleStatus[$index], key, !hFieldstoggleStatus[$index][key])"
+                    </template>
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="$t('使用环境')"
+                  prop="ip"
+                >
+                  <template slot-scope="{ row }">
+                    {{ row.environment_name }}
+                  </template>
+                </bk-table-column>
+                <bk-table-column
+                  :label="$t('操作')"
+                  :width="localLanguage === 'en' ? 180 : 150"
+                >
+                  <template slot-scope="{ row }">
+                    <p>
+                      <template v-if="row.service_instance.config.admin_url">
+                        <a
+                          :href="row.service_instance.config.admin_url"
+                          class="blue"
+                          target="_blank"
                         >
-                          {{ hFieldstoggleText[hFieldstoggleStatus[$index][key] || false] }}
-                        </button>
-                      </div>
-                    </section>
-                    <div
-                      v-if="!row.service_instance.sensitive_fields.length"
-                      class="copy-container"
-                    >
-                      <i class="paasng-icon paasng-general-copy" @click="handleCopy(row)" />
-                    </div>
+                          {{ $t('查看管理入口') }}
+                        </a>
+                      </template>
+                      <template v-else>--</template>
+                    </p>
                   </template>
-                </template>
-              </bk-table-column>
-              <bk-table-column :label="$t('使用环境')" prop="ip">
-                <template slot-scope="{ row }">
-                  {{ row.environment_name }}
-                </template>
-              </bk-table-column>
-              <bk-table-column :label="$t('操作')" :width="localLanguage === 'en' ? 180 : 150">
-                <template slot-scope="{ row }">
-                  <p>
-                    <template v-if="row.service_instance.config.admin_url">
-                      <a
-                        :href="row.service_instance.config.admin_url"
-                        class="blue"
-                        target="_blank"
-                      > {{ $t('查看管理入口') }} </a>
-                    </template>
-                    <template v-else>
-                      --
-                    </template>
-                  </p>
-                </template>
-              </bk-table-column>
-            </bk-table>
-          </section>
-
-          <div class="delete-service-wrapper mt16">
-            <span v-bk-tooltips="{ content: $t('S-mart应用暂不支持删除增强服务'), disabled: !isSmartApp }">
-              <bk-button
-                theme="danger"
-                :disabled="isSmartApp"
-                @click="showDeleteServiceDialog"
-              >
-                {{ $t('删除服务') }}
-              </bk-button>
-            </span>
-            <p>
-              <i class="paasng-icon paasng-paas-remind-fill mr5"></i>
-              {{ $t('所有已申请实例的相关数据将被销毁。应用与服务之间的绑定关系也会被解除。') }}
-            </p>
-          </div>
+                </bk-table-column>
+              </bk-table>
+            </section>
+
+            <div class="delete-service-wrapper mt16">
+              <span v-bk-tooltips="{ content: $t('S-mart应用暂不支持删除增强服务'), disabled: !isSmartApp }">
+                <bk-button
+                  theme="danger"
+                  :disabled="isSmartApp"
+                  @click="showDeleteServiceDialog"
+                >
+                  {{ $t('删除服务') }}
+                </bk-button>
+              </span>
+              <p>
+                <i class="paasng-icon paasng-paas-remind-fill mr5"></i>
+                {{ $t('所有已申请实例的相关数据将被销毁。应用与服务之间的绑定关系也会被解除。') }}
+              </p>
+            </div>
+          </template>
         </div>
 
         <!-- 使用指南 -->
@@ -208,7 +268,8 @@
         <div
           :class="['floating-button', { expand: isExpand }]"
           slot="collapse-trigger"
-          @click="handleSetCollapse">
+          @click="handleSetCollapse"
+        >
           <span :class="{ 'vertical-rl': localLanguage === 'en' }">{{ $t('使用指南') }}</span>
           <i class="paasng-icon paasng-angle-line-up"></i>
         </div>
@@ -262,22 +323,24 @@
     >
       <form
         class="ps-form"
-        style="min-height: 63px;"
+        style="min-height: 63px"
         @submit.prevent="submitRemoveInstance"
       >
         <div class="spacing-x1">
-          {{ $t('预发布环境和生产环境的实例都将被删除；该操作不可撤销，请完整输入应用 ID') }} <code>{{ appCode }}</code> {{ $t('确认：') }}
+          {{ $t('预发布环境和生产环境的实例都将被删除；该操作不可撤销，请完整输入应用 ID') }}
+          <code>{{ appCode }}</code>
+          {{ $t('确认：') }}
         </div>
         <div class="ps-form-group">
           <input
             v-model="formRemoveConfirmCode"
             type="text"
             class="ps-form-control"
-          >
+          />
         </div>
         <bk-alert
           v-if="delAppDialog.moduleList.length > 0"
-          style="margin-top: 10px;"
+          style="margin-top: 10px"
           type="error"
           :title="errorTips"
         />
@@ -301,11 +364,13 @@
   </div>
 </template>
 
-<script>import { marked } from 'marked';
+<script>
+import { marked } from 'marked';
 import appBaseMixin from '@/mixins/app-base-mixin';
 import appTopBar from '@/components/paas-app-bar';
 import ConfigEdit from './comps/config-edit';
 import usageGuide from '@/components/usage-guide';
+import FunctionalDependency from '@blueking/functional-dependency/vue2/index.umd.min.js';
 import $ from 'jquery';
 
 export default {
@@ -313,6 +378,7 @@ export default {
     appTopBar,
     ConfigEdit,
     usageGuide,
+    FunctionalDependency,
   },
   mixins: [appBaseMixin],
   data() {
@@ -357,6 +423,7 @@ export default {
       isTableLoading: false,
       credentialsDisabled: false,
       isExpand: true,
+      isEnhancedFeatureEnabled: true,
     };
   },
   computed: {
@@ -373,7 +440,9 @@ export default {
       return this.curAppInfo.application.region;
     },
     pageTips() {
-      return `${this.$t('实例被以下模块共享：')}${this.delAppDialog.moduleList.map(item => item.name).join('、')}${this.$t('，这些模块将获得实例的所有环境变量。')}`;
+      return `${this.$t('实例被以下模块共享：')}${this.delAppDialog.moduleList
+        .map(item => item.name)
+        .join('、')}${this.$t('，这些模块将获得实例的所有环境变量。')}`;
     },
     isLoading() {
       return this.requestQueue.length > 0;
@@ -388,14 +457,16 @@ export default {
       return this.appCode === this.formRemoveConfirmCode;
     },
     errorTips() {
-      return `${this.$t('该实例被以下模块共享：')}${this.delAppDialog.moduleList.map(item => item.name).join('、')}${this.$t('，删除后这些模块也将无法获取相关的环境变量。')}`;
+      return `${this.$t('该实例被以下模块共享：')}${this.delAppDialog.moduleList
+        .map(item => item.name)
+        .join('、')}${this.$t('，删除后这些模块也将无法获取相关的环境变量。')}`;
     },
     asideWidth() {
       return window.innerWidth <= 1366 ? '28%' : '32%';
     },
   },
   watch: {
-    '$route'() {
+    $route() {
       this.requestQueue = ['init', 'enabled', 'shareModule'];
       this.init();
       this.fetchEnableSpecs();
@@ -457,6 +528,7 @@ export default {
           title: resData.display_name,
         });
         this.categoryId = resData.category.id;
+        this.isEnhancedFeatureEnabled = resData.is_ready || false;
       })
         .finally(() => {
           this.isGuardLoading = false;
@@ -740,551 +812,562 @@ export default {
         this.delAppDialog.visiable = false;
       }
     },
+
+    gotoMore() {
+      window.open(this.GLOBAL.DOC.DEPLOYMENT_MAINTENANCE, '_blank');
+    },
   },
 };
-
 </script>
 
 <style lang="scss" scoped>
-    .markdown-body {
-        box-sizing: border-box;
-        min-width: 200px;
-        margin: 0 auto;
-        padding: 5px 20px;
-
-        h2,h3 {
-          color: var(--color-fg-default);
-        }
-    }
-
-    .paasng-question-circle {
-        color: #ffc349;
-    }
-
-    .dataStore-middle-h3 {
-        position: relative;
-        top: 2px;
-    }
-
-    .paasng-empty {
-        font-size: 34px;
-        color: #ffc349;
-    }
-
-    .dataStore-icon {
-        font-size: 16px;
-        position: relative;
-        top: 2px;
-    }
-
-    .break-all {
-        word-break: break-all
-    }
-
-    .datastore-alink {
-        line-height: 40px;
-        color: #666;
-        height: 40px;
-        overflow: hidden;
-        width: 208px;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        border-top: solid 1px #e6e9ea;
-        display: inline-block;
-        transition: all .3s;
-        cursor: pointer;
-    }
-
-    .service-list li:hover .datastore-alink {
-        background: #3A84FF;
-        border-top: solid 1px #3A84FF;
-        color: #fff;
-    }
-
-    .dataStore-h2 {
-        display: block;
-        line-height: 30px;
-        padding: 14px 0;
-    }
-
-    .dataStore-h2 img.dataStore-icon {
-        position: relative;
-        top: 3px;
-        padding-right: 7px;
-    }
-
-    .gray {
-        color: #b7b8be;
-    }
-
-    .dataStore-middle h3 {
-        line-height: 36px;
-        padding-top: 18px;
-    }
-
-    .data-store-use {
-        border: solid 1px #e6e9ea;
-        position: relative;
+.functional-dependency-wrapper {
+  background: #fff;
+  box-shadow: 0 2px 4px 0 #1919290d;
+  border-radius: 2px;
+  padding: 24px 0;
+}
+.markdown-body {
+  box-sizing: border-box;
+  min-width: 200px;
+  margin: 0 auto;
+  padding: 5px 20px;
+
+  h2,
+  h3 {
+    color: var(--color-fg-default);
+  }
+}
+
+.paasng-question-circle {
+  color: #ffc349;
+}
+
+.dataStore-middle-h3 {
+  position: relative;
+  top: 2px;
+}
+
+.paasng-empty {
+  font-size: 34px;
+  color: #ffc349;
+}
+
+.dataStore-icon {
+  font-size: 16px;
+  position: relative;
+  top: 2px;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.datastore-alink {
+  line-height: 40px;
+  color: #666;
+  height: 40px;
+  overflow: hidden;
+  width: 208px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  border-top: solid 1px #e6e9ea;
+  display: inline-block;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+.service-list li:hover .datastore-alink {
+  background: #3a84ff;
+  border-top: solid 1px #3a84ff;
+  color: #fff;
+}
+
+.dataStore-h2 {
+  display: block;
+  line-height: 30px;
+  padding: 14px 0;
+}
+
+.dataStore-h2 img.dataStore-icon {
+  position: relative;
+  top: 3px;
+  padding-right: 7px;
+}
+
+.gray {
+  color: #b7b8be;
+}
+
+.dataStore-middle h3 {
+  line-height: 36px;
+  padding-top: 18px;
+}
+
+.data-store-use {
+  border: solid 1px #e6e9ea;
+  position: relative;
+}
+
+.use-text {
+  width: 444px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.pt30 {
+  padding-top: 30px;
+}
+
+.btn-display-hidden-field {
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.hide {
+  opacity: 0;
+}
+.health-wrapper {
+  .ps-table-default {
+    background: rgba(255, 255, 255, 1);
+    border-radius: 2px;
+    border: 1px solid rgba(220, 222, 229, 1);
+    th {
+      border-top: none;
+      border-right: none;
+      border-bottom: 1px solid rgba(220, 222, 229, 1);
     }
-
-    .use-text {
-        width: 444px;
-        display: inline-block;
-        vertical-align: top;
+    td {
+      border-bottom: 1px solid rgba(220, 222, 229, 1);
     }
-
-    .pt30 {
-        padding-top: 30px;
+  }
+  .ps-table-slide-up {
+    color: #63656e;
+    background: #fff;
+    i {
+      font-style: normal;
     }
-
-    .btn-display-hidden-field {
-        font-size: 12px;
-        line-height: 18px;
+  }
+}
+
+.service-tab-wrapper {
+  padding: 20px 0 0 0;
+  line-height: 32px;
+  .tab-content {
+    border-bottom: 1px solid #dcdee5;
+    .detail-tab {
+      display: inline-block;
+      position: relative;
+      padding: 0 3px;
+      text-align: center;
+      cursor: pointer;
+      margin-right: 20px;
     }
-
-    .hide {
-        opacity: 0;
+    .manager-tab {
+      display: inline-block;
+      position: relative;
+      text-align: center;
+      padding: 0 3px;
+      cursor: pointer;
     }
-    .health-wrapper {
-        .ps-table-default {
-            background: rgba(255,255,255,1);
-            border-radius: 2px;
-            border: 1px solid rgba(220,222,229,1);
-            th {
-                border-top: none;
-                border-right: none;
-                border-bottom: 1px solid rgba(220,222,229,1);
-            }
-            td {
-                border-bottom: 1px solid rgba(220,222,229,1);
-            }
-        }
-        .ps-table-slide-up {
-            color: #63656E;
-            background: #fff;
-            i {
-                font-style: normal;
-            }
-        }
-    }
-
-    .service-tab-wrapper {
-        padding: 20px 0 0 0;
-        line-height: 32px;
-        .tab-content {
-            border-bottom: 1px solid #dcdee5;
-            .detail-tab {
-                display: inline-block;
-                position: relative;
-                padding: 0 3px;
-                text-align: center;
-                cursor: pointer;
-                margin-right: 20px;
-            }
-            .manager-tab {
-                display: inline-block;
-                position: relative;
-                text-align: center;
-                padding: 0 3px;
-                cursor: pointer;
-            }
-            .border {
-                position: absolute;
-                bottom: -1px;
-                left: 0;
-                width: 100%;
-                height: 2px;
-                background: #3a84ff;
-            }
-            .active {
-                color: #3a84ff;
-            }
-        }
+    .border {
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: #3a84ff;
     }
-
-    .manager-example {
-        .config-info {
-            margin-bottom: 40px;
-        }
-        .delete-title {
-            padding-bottom: 10px;
-            font-size: 14px;
-            color: #1b1f23;
-            font-weight: bold;
-        }
-        .delete-tips {
-            padding-bottom: 10px;
-            color: #63656e;
-        }
+    .active {
+      color: #3a84ff;
     }
-
-    .instance-detail {
-      .bk-resize-layout-border {
-        border-top-color: transparent;
-        border-bottom-color: transparent;
+  }
+}
+
+.manager-example {
+  .config-info {
+    margin-bottom: 40px;
+  }
+  .delete-title {
+    padding-bottom: 10px;
+    font-size: 14px;
+    color: #1b1f23;
+    font-weight: bold;
+  }
+  .delete-tips {
+    padding-bottom: 10px;
+    color: #63656e;
+  }
+}
+
+.instance-detail {
+  .bk-resize-layout-border {
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+  }
+  .instance-container-cls {
+    margin: 16px 24px 0;
+    .top-return-bar {
+      background: #f5f7fa;
+      cursor: pointer;
+      margin-bottom: 16px;
+      h4 {
+        font-size: 14px;
+        color: #313238;
+        font-weight: 400;
+        padding: 0;
       }
-      .instance-container-cls {
-        margin: 16px 24px 0;
-        .top-return-bar {
-          background: #F5F7FA;
-          cursor: pointer;
-          margin-bottom: 16px;
-          h4 {
-            font-size: 14px;
-            color: #313238;
-            font-weight: 400;
-            padding: 0;
-          }
-          .icon-cls-back{
-            color: #3A84FF;
-            font-size: 14px;
-            font-weight: bold;
-          }
-        }
-
-        .delete-service-wrapper {
-          display: flex;
-          align-items: center;
-          margin-top: 16px;
-          p {
-            color: #63656E;
-            font-size: 12px;
-            margin-left: 13px;
-            i {
-              font-size: 14px;
-              color: #FFB848;
-            }
-          }
-        }
+      .icon-cls-back {
+        color: #3a84ff;
+        font-size: 14px;
+        font-weight: bold;
+        transform: translateY(0px);
       }
     }
 
-    .default-instance-detail-cls {
+    .delete-service-wrapper {
       display: flex;
-      .instance-container-cls {
-        flex: 1;
-      }
-    }
-    .instance-tab-container {
-      box-shadow: 0 2px 4px 0 #1919290d;
-      border-radius: 2px;
-      .title {
-        font-weight: 700;
-        font-size: 14px;
-        color: #313238;
-        line-height: 22px;
-      }
-      .instance-info {
-        position: relative;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        margin: 16px 0px;
-        padding: 10px 16px;
-        background: #F0F5FF;
-        border-radius: 2px;
-        .item {
-          white-space: nowrap;
-          display: flex;
-          align-items: flex-end;
-          line-height: 20px;
-          .value {
-            width: 66px;
-            overflow: hidden;
-            text-overflow:ellipsis;
-            white-space: nowrap;
-            display: inline-block;
-            color: #313238;
-          }
-        }
-        .edit-icon {
-          position: absolute;
-          right: 14px;
-          cursor: pointer;
-          &:hover {
-            color: #3A84FF;
-          }
-          &.disabled {
-            cursor: not-allowed;
-            color: #C4C6CC;
-          }
-        }
-      }
-      .env-variables-wrapper {
-        display: flex;
-        align-items: center;
-        margin-top: 16px;
+      align-items: center;
+      margin-top: 16px;
+      p {
+        color: #63656e;
         font-size: 12px;
-        color: #63656E;
-        line-height: 20px;
-        .sub-title {
-          margin-right: 12px;
-        }
-        .tips {
-          margin-left: 16px;
-        }
+        margin-left: 13px;
         i {
           font-size: 14px;
-          color: #979BA5;
+          color: #ffb848;
         }
       }
     }
-    .instance-wrapper {
-      height: 100%;
-      .instance-detail {
-        height: 100%;
+  }
+}
+
+.default-instance-detail-cls {
+  display: flex;
+  .instance-container-cls {
+    flex: 1;
+  }
+}
+.instance-tab-container {
+  box-shadow: 0 2px 4px 0 #1919290d;
+  border-radius: 2px;
+  .title {
+    font-weight: 700;
+    font-size: 14px;
+    color: #313238;
+    line-height: 22px;
+  }
+  .instance-info {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: 16px 0px;
+    padding: 10px 16px;
+    background: #f0f5ff;
+    border-radius: 2px;
+    .item {
+      white-space: nowrap;
+      display: flex;
+      align-items: flex-end;
+      line-height: 20px;
+      .value {
+        width: 66px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        color: #313238;
       }
     }
-    .instance-alert-cls {
-      margin-bottom: 16px;
-    }
-</style>
-<style lang="scss">
-    #markdown h2 {
-        padding-bottom: 0.3em;
-        font-size: 1.5em;
-        border-bottom: 1px solid #eaecef;
-        padding: 0;
-        padding-bottom: 10px;
-        margin-top: 24px;
-        margin-bottom: 16px;
-        font-weight: 600;
-        line-height: 1.25;
-    }
-
-    #markdown h2 .octicon-link {
-        color: #1b1f23;
-        vertical-align: middle;
-        visibility: hidden;
-    }
-
-    #markdown h2:hover .anchor {
-        text-decoration: none;
-    }
-
-    #markdown h2:hover .anchor .octicon-link {
-        visibility: visible;
-    }
-
-    #markdown code,
-    #markdown kbd,
-    #markdown pre {
-        font-size: 1em;
-    }
-
-    #markdown code {
-        font-size: 12px;
-    }
-
-    #markdown pre {
-        margin-top: 0;
-        margin-bottom: 16px;
-        font-size: 12px;
-    }
-
-    #markdown pre {
-        word-wrap: normal;
-    }
-
-    #markdown code {
-        padding: 0.2em 0.4em;
-        margin: 0;
-        font-size: 85%;
-        background-color: rgba(27, 31, 35, 0.05);
-        border-radius: 3px;
-        color: inherit;
-    }
-
-    #markdown pre>code {
-        padding: 0;
-        margin: 0;
-        font-size: 100%;
-        word-break: normal;
-        white-space: pre;
-        background: transparent;
-        border: 0;
-    }
-
-    #markdown .highlight {
-        margin-bottom: 16px;
-    }
-
-    #markdown .highlight pre {
-        margin-bottom: 0;
-        word-break: normal;
-    }
-
-    #markdown .highlight pre,
-    #markdown pre {
-        padding: 16px;
-        overflow: auto;
-        font-size: 85%;
-        line-height: 1.45;
-        background-color: var(--color-canvas-subtle);
-        border-radius: 3px;
-    }
-
-    #markdown pre code {
-        display: inline;
-        max-width: auto;
-        padding: 0;
-        margin: 0;
-        overflow: visible;
-        line-height: inherit;
-        word-wrap: normal;
-        background-color: transparent;
-        border: 0;
-    }
-
-    #markdown p {
-        margin-top: 0;
-        margin-bottom: 10px;
-    }
-
-    #markdown a {
-        background-color: transparent;
-    }
-
-    #markdown a:active,
-    #markdown a:hover {
-        outline-width: 0;
-    }
-
-    #markdown a {
-        color: #0366d6;
-        text-decoration: none;
-    }
-
-    #markdown a:hover {
-        text-decoration: underline;
+    .edit-icon {
+      position: absolute;
+      right: 14px;
+      cursor: pointer;
+      &:hover {
+        color: #3a84ff;
+      }
+      &.disabled {
+        cursor: not-allowed;
+        color: #c4c6cc;
+      }
     }
-
-    #markdown a:not([href]) {
-        color: inherit;
-        text-decoration: none;
+  }
+  .env-variables-wrapper {
+    display: flex;
+    align-items: center;
+    margin-top: 16px;
+    font-size: 12px;
+    color: #63656e;
+    line-height: 20px;
+    .sub-title {
+      margin-right: 12px;
     }
-
-    #markdown ul,
-    #markdown ol {
-        padding-left: 0;
-        margin-top: 0;
-        margin-bottom: 0;
-        list-style: unset !important;
+    .tips {
+      margin-left: 16px;
     }
-
-    #markdown ol ol,
-    #markdown ul ol {
-        list-style-type: lower-roman;
+    i {
+      font-size: 14px;
+      color: #979ba5;
     }
-
-    #markdown ul ul ol,
-    #markdown ul ol ol,
-    #markdown ol ul ol,
-    #markdown ol ol ol {
-        list-style-type: lower-alpha;
+  }
+}
+.instance-wrapper {
+  height: 100%;
+  .instance-detail {
+    height: 100%;
+  }
+}
+.instance-alert-cls {
+  margin-bottom: 16px;
+}
+</style>
+<style lang="scss">
+#markdown h2 {
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid #eaecef;
+  padding: 0;
+  padding-bottom: 10px;
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+#markdown h2 .octicon-link {
+  color: #1b1f23;
+  vertical-align: middle;
+  visibility: hidden;
+}
+
+#markdown h2:hover .anchor {
+  text-decoration: none;
+}
+
+#markdown h2:hover .anchor .octicon-link {
+  visibility: visible;
+}
+
+#markdown code,
+#markdown kbd,
+#markdown pre {
+  font-size: 1em;
+}
+
+#markdown code {
+  font-size: 12px;
+}
+
+#markdown pre {
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 12px;
+}
+
+#markdown pre {
+  word-wrap: normal;
+}
+
+#markdown code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+  color: inherit;
+}
+
+#markdown pre > code {
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
+}
+
+#markdown .highlight {
+  margin-bottom: 16px;
+}
+
+#markdown .highlight pre {
+  margin-bottom: 0;
+  word-break: normal;
+}
+
+#markdown .highlight pre,
+#markdown pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: var(--color-canvas-subtle);
+  border-radius: 3px;
+}
+
+#markdown pre code {
+  display: inline;
+  max-width: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0;
+}
+
+#markdown p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+#markdown a {
+  background-color: transparent;
+}
+
+#markdown a:active,
+#markdown a:hover {
+  outline-width: 0;
+}
+
+#markdown a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+#markdown a:hover {
+  text-decoration: underline;
+}
+
+#markdown a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+#markdown ul,
+#markdown ol {
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  list-style: unset !important;
+}
+
+#markdown ol ol,
+#markdown ul ol {
+  list-style-type: lower-roman;
+}
+
+#markdown ul ul ol,
+#markdown ul ol ol,
+#markdown ol ul ol,
+#markdown ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+#markdown ul,
+#markdown ol {
+  padding-left: 2em;
+}
+
+#markdown ul ul,
+#markdown ul ol,
+#markdown ol ol,
+#markdown ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.copy-container {
+  position: absolute;
+  right: 45px;
+  top: 50%;
+  margin-top: -12px;
+  color: #3a84ff;
+  &:hover {
+    cursor: pointer;
+  }
+}
+.config-width {
+  width: 85%;
+  display: inline-block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.ps-table-slide-up .paas-loading-panel .table-empty-cls .empty-tips {
+  color: #999;
+}
+.instance-tab-container {
+  background: #fff;
+  padding: 16px 24px;
+}
+
+.instance-container-cls {
+  min-width: 0;
+}
+
+.instance-details-table-cls {
+  .bk-table-row.bk-table-row-last td {
+    border-bottom: none;
+  }
+  .credential-information {
+    overflow: hidden;
+  }
+  .gray {
+    color: #c4c6cc;
+  }
+  .break-all {
+    color: #63656e;
+    font-size: 12px;
+    line-height: 20px;
+  }
+  .paas-loading-panel .text {
+    .sub-title {
+      font-size: 12px;
     }
-
-    #markdown ul,
-    #markdown ol {
-        padding-left: 2em;
+  }
+}
+.instance-resize-layout-cls {
+  .bk-resize-layout-aside .bk-resize-layout-aside-content {
+    overflow: unset;
+  }
+  .floating-button {
+    position: absolute;
+    left: -24px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 24px;
+    padding: 11px 0;
+    text-align: center;
+    font-size: 12px;
+    color: #63656e;
+    line-height: 13px;
+    background: #fafbfd;
+    border: 1px solid #dcdee5;
+    border-radius: 8px 0 0 8px;
+    cursor: pointer;
+    &.expand {
+      i {
+        transform: rotateZ(90deg);
+      }
     }
-
-    #markdown ul ul,
-    #markdown ul ol,
-    #markdown ol ol,
-    #markdown ol ul {
-        margin-top: 0;
-        margin-bottom: 0;
+    i {
+      margin-top: 5px;
+      color: #979ba5;
+      transform: rotateZ(-90deg);
     }
-    .copy-container{
-        position: absolute;
-        right: 45px;
-        top: 50%;
-        margin-top: -12px;
+    &:hover {
+      color: #3a84ff;
+      i {
         color: #3a84ff;
-        &:hover {
-            cursor: pointer;
-        }
-    }
-    .config-width {
-        width: 85%;
-        display: inline-block;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-    .ps-table-slide-up .paas-loading-panel .table-empty-cls .empty-tips {
-        color: #999;
-    }
-    .instance-tab-container{
-      background: #fff;
-      padding: 16px 24px;
-    }
-
-    .instance-container-cls{
-      min-width: 0;
-    }
-
-    .instance-details-table-cls {
-      .bk-table-row.bk-table-row-last td {
-        border-bottom: none;
-      }
-      .credential-information {
-        overflow: hidden;
-      }
-      .gray {
-        color: #c4c6cc;
-      }
-      .break-all {
-        color: #63656E;
-        font-size: 12px;
-        line-height: 20px;
-      }
-      .paas-loading-panel .text {
-        .sub-title {
-          font-size: 12px;
-        }
       }
     }
-    .instance-resize-layout-cls {
-      .bk-resize-layout-aside .bk-resize-layout-aside-content {
-        overflow: unset;
-      }
-      .floating-button {
-        position: absolute;
-        left: -24px;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 24px;
-        padding: 11px 0;
-        text-align: center;
-        font-size: 12px;
-        color: #63656e;
-        line-height: 13px;
-        background: #fafbfd;
-        border: 1px solid #dcdee5;
-        border-radius: 8px 0 0 8px;
-        cursor: pointer;
-        &.expand {
-          i {
-            transform: rotateZ(90deg);
-          }
-        }
-        i {
-          margin-top: 5px;
-          color: #979ba5;
-          transform: rotateZ(-90deg);
-        }
-        &:hover {
-          color: #3A84FF;
-          i {
-            color: #3A84FF;
-          }
-        }
-        .vertical-rl {
-          writing-mode: vertical-rl;
-        }
-      }
+    .vertical-rl {
+      writing-mode: vertical-rl;
     }
+  }
+}
 </style>
diff --git a/webfe/package_vue/static/json/paas_static.ce.js b/webfe/package_vue/static/json/paas_static.ce.js
index 0d342a538b..5b3784ecb9 100644
--- a/webfe/package_vue/static/json/paas_static.ce.js
+++ b/webfe/package_vue/static/json/paas_static.ce.js
@@ -283,6 +283,9 @@ export const PLATFORM_CONFIG = {
 
         // 蓝盾流水线构建
         BK_CI_PIPELINE_BUILD: DOCS_URL_PREFIX + '/topics/paas/bk_ci_pipeline_build',
+
+        // 部署维护
+        DEPLOYMENT_MAINTENANCE: BK_DOCS_URL_PREFIX + '/markdown/ZH/DeploymentGuides/7.1/index.md',
     },
 
     CONFIG: {
diff --git a/webfe/package_vue/static/json/paas_static.ee.js b/webfe/package_vue/static/json/paas_static.ee.js
index 650cdc8ec3..547c9e2dc2 100644
--- a/webfe/package_vue/static/json/paas_static.ee.js
+++ b/webfe/package_vue/static/json/paas_static.ee.js
@@ -286,6 +286,9 @@ export const PLATFORM_CONFIG = {
 
         // 蓝盾流水线构建
         BK_CI_PIPELINE_BUILD: DOCS_URL_PREFIX + '/topics/paas/bk_ci_pipeline_build',
+
+        // 部署维护
+        DEPLOYMENT_MAINTENANCE: BK_DOCS_URL_PREFIX + '/markdown/ZH/DeploymentGuides/7.1/index.md',
     },
 
     CONFIG: {