fix: 去除4个系统目录的限制--bug=126632037 (#3328)

* fix: 去除4个系统目录的限制--bug=126632037 * fix: 优化代码预览区域展示方式、调整部分文案内容--bug=126719709 * fix: 去除多余注释代码--bug=126719709
TencentBlueKing · Jul 4, 2024 · 201b02c · 201b02c
1 parent 5a94584
commit 201b02c
Show file tree

Hide file tree

Showing 13 changed files with 110 additions and 81 deletions.
diff --git a/bcs-services/bcs-bscp/ui/src/assets/exampleData/kv-python-get.yaml b/bcs-services/bcs-bscp/ui/src/assets/exampleData/kv-python-get.yaml
@@ -1,6 +1,4 @@
-
 ### Get
-
 from bk_bscp.client import BscpClient
 
 SERVER_ADDRS = ["{{ .Bk_Bscp_Variable_FEED_ADDR }}"]
@@ -9,13 +7,12 @@ BIZ_ID = {{ .Bk_Bscp_Variable_BkBizId }}
 APP = "{{ .Bk_Bscp_Variable_ServiceName }}"
 LABELS = {{ .Bk_Bscp_Variable_Leabels }}
 
-
-
-def main():
+def main(key):
     with BscpClient(SERVER_ADDRS, TOKEN, BIZ_ID) as client:
-        pair = client.get(APP, "key1", LABELS)
+        pair = client.get(APP, key, LABELS)
         print(pair.value)
 
-
 if __name__ == "__main__":
-    main()
+    # 请将 {{ YOUR_KEY }} 替换为您的实际 Key
+    key = {{ .Bk_Bscp_Variable_Python_Key }}
+    main(key)
diff --git a/bcs-services/bcs-bscp/ui/src/assets/exampleData/kv-python-watch.yaml b/bcs-services/bcs-bscp/ui/src/assets/exampleData/kv-python-watch.yaml
@@ -1,6 +1,4 @@
-
 ### Watch
-
 import logging
 
 from bk_bscp.client import BscpClient, WatchedApp
@@ -11,7 +9,6 @@ BIZ_ID = {{ .Bk_Bscp_Variable_BkBizId }}
 APP = "{{ .Bk_Bscp_Variable_ServiceName }}"
 LABELS = {{ .Bk_Bscp_Variable_Leabels }}
 
-
 def main():
     """Watch a single app."""
     with BscpClient(SERVER_ADDRS, TOKEN, BIZ_ID) as client:
@@ -21,22 +18,16 @@ def main():
                 value = client.get(ev.app, key.key)
                 print(f"{key.key}={value}")
 
-
-
-
 def setup_logger():
     """Set up the logger to print logs."""
     logger = logging.getLogger("bk_bscp")
     logger.setLevel("DEBUG")
-
     formatter = logging.Formatter("[%(asctime)s] %(name)s:%(levelname)s: %(message)s")
     handler = logging.StreamHandler()
     handler.setFormatter(formatter)
     logger.addHandler(handler)
 
-
 setup_logger()
 
-
 if __name__ == "__main__":
-    main()
+    main()
diff --git a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
@@ -757,6 +757,9 @@ export default {
   复制成功: 'Copy Successful',
   '下载配置文件时，保留目录层级，并将其保存到指定目录下，例如：将 /etc/nginx.conf 文件下载到 /tmp 目录时，文件保存在 /tmp/etc/nginx.conf': 'When downloading configuration files, preserve directory structure and save them to a specified directory. For example, downloading the file /etc/nginx.conf to the /tmp directory would save it as /tmp/etc/nginx.conf',
   '下载配置文件时，不保留目录层级，并将其保存到指定目录下，例如：将 /etc/nginx.conf 文件下载到 /tmp 目录时，文件保存在 /tmp/nginx.conf': 'When downloading configuration files, do not preserve directory structure and save them directly to a specified directory. For example, downloading the file /etc/nginx.conf to the /tmp directory would save it as /tmp/nginx.conf',
+  'BSCP Python SDK依赖说明': 'dependency instructions in the BSCP Python SDK',
+  '用于主动获取配置项值的场景，此方法不会监听服务器端的配置更改，有关Python SDK的部署环境和依赖组件，请参阅白皮书中的': 'For scenarios where configuration values are actively retrieved, this method does not monitor server-side configuration changes. For information on the deployment environment and dependent components of the Python SDK, please refer to the',
+  '通过建立长连接，实时监听配置版本的变更，当新版本的配置发布时，将自动调用回调方法处理新的配置信息，适用于需要实时响应配置变更的场景，有关Python SDK的部署环境和依赖组件，请参阅白皮书中的': 'By establishing a persistent connection, real-time changes to configuration versions are monitored. When a new version of configuration is released, the callback method is automatically invoked to handle the new configuration information. This method is suitable for scenarios requiring real-time response to configuration changes. For information on the deployment environment and dependent components of the Python SDK, please refer to the',
 
   // 公共组件
   页面不存在: 'Page does not exist',

diff --git a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
@@ -763,6 +763,9 @@ export default {
   复制成功: '复制成功',
   '下载配置文件时，保留目录层级，并将其保存到指定目录下，例如：将 /etc/nginx.conf 文件下载到 /tmp 目录时，文件保存在 /tmp/etc/nginx.conf': '下载配置文件时，保留目录层级，并将其保存到指定目录下，例如：将 /etc/nginx.conf 文件下载到 /tmp 目录时，文件保存在 /tmp/etc/nginx.conf',
   '下载配置文件时，不保留目录层级，并将其保存到指定目录下，例如：将 /etc/nginx.conf 文件下载到 /tmp 目录时，文件保存在 /tmp/nginx.conf': '下载配置文件时，不保留目录层级，并将其保存到指定目录下，例如：将 /etc/nginx.conf 文件下载到 /tmp 目录时，文件保存在 /tmp/nginx.conf',
+  'BSCP Python SDK依赖说明': 'BSCP Python SDK依赖说明',
+  '用于主动获取配置项值的场景，此方法不会监听服务器端的配置更改，有关Python SDK的部署环境和依赖组件，请参阅白皮书中的': '用于主动获取配置项值的场景，此方法不会监听服务器端的配置更改，有关Python SDK的部署环境和依赖组件，请参阅白皮书中的',
+  '通过建立长连接，实时监听配置版本的变更，当新版本的配置发布时，将自动调用回调方法处理新的配置信息，适用于需要实时响应配置变更的场景，有关Python SDK的部署环境和依赖组件，请参阅白皮书中的': '通过建立长连接，实时监听配置版本的变更，当新版本的配置发布时，将自动调用回调方法处理新的配置信息，适用于需要实时响应配置变更的场景，有关Python SDK的部署环境和依赖组件，请参阅白皮书中的',
 
   // 公共组件
   页面不存在: '页面不存在',

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/add-label.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/add-label.vue
@@ -96,7 +96,7 @@
     }
   }
   .add-label-plus {
-    margin-right: 9px;
+    margin-right: 4px;
     line-height: 14px;
     text-align: center;
     border-radius: 50%;

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/code-preview.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/code-preview.vue
@@ -44,6 +44,7 @@
 
 <style scoped lang="scss">
   :deep(.monaco-editor) {
+    pointer-events: none;
     background-color: unset;
     // 取消默认背景色
     &.monaco-editor-background {

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/cmd-example.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/cmd-example.vue
@@ -298,11 +298,11 @@
     }
   }
   .preview-component {
-    height: 292px;
+    height: 276px;
     padding: 16px 0 0;
     background-color: #f5f7fa;
     &--kvcmd {
-      height: 247px;
+      height: 237px;
     }
   }
 </style>
diff --git a/...vices/bcs-bscp/ui/src/views/space/client/example/components/content/container-example.vue b/...vices/bcs-bscp/ui/src/views/space/client/example/components/content/container-example.vue
@@ -6,6 +6,7 @@
       <bk-button theme="primary" class="copy-btn" @click="copyExample">{{ $t('复制示例') }}</bk-button>
       <code-preview
         class="preview-component"
+        style="height: 1490px"
         :code-val="replaceVal"
         :variables="variables"
         @change="(val: string) => (copyReplaceVal = val)" />
@@ -107,19 +108,16 @@
 
 <style scoped lang="scss">
   .example-wrap {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
     .preview-component {
       margin-top: 16px;
       padding: 16px 0 0;
-      height: calc(100% - 48px);
+      // height: calc(100% - 48px);
       background-color: #f5f7fa;
     }
   }
   .preview-container {
     margin-top: 32px;
-    padding: 8px 0;
+    padding: 16px 0 0;
     flex: 1;
     border-top: 1px solid #dcdee5;
     overflow: hidden;

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/kv-example.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/kv-example.vue
@@ -8,21 +8,22 @@
           <div
             :class="['tab-wrap', { 'is-active': activeTab === index }]"
             v-for="(item, index) in tabArr"
-            :key="item.name"
+            :key="item"
             @click="handleTab(index)">
-            {{ item.name }}
+            {{ item }}
           </div>
         </div>
         <bk-button theme="primary" class="copy-btn" @click="copyExample">{{ $t('复制示例') }}</bk-button>
-        <bk-alert class="alert-tips-wrap" v-show="topTipShow" theme="info">
+        <bk-alert class="alert-tips-wrap" v-show="topTipShow && kvConfig.topTip" theme="info">
           <div class="alert-tips">
-            <p>{{ topTip }}</p>
+            <span v-html="kvConfig.topTip"></span>
             <close-line class="close-line" @click="topTipShow = false" />
           </div>
         </bk-alert>
       </div>
       <code-preview
         class="preview-component"
+        :style="{ height: `${kvConfig.codePreviewHeight}px` }"
         ref="codePreviewRef"
         :code-val="replaceVal"
         :variables="variables"
@@ -48,18 +49,7 @@
 
   const { t } = useI18n();
   const route = useRoute();
-  const tabArr = [
-    {
-      name: t('Get方法'),
-      topTip: t('Get方法：用于一次性拉取最新的配置信息，适用于需要获取并更新配置的场景。'),
-    },
-    {
-      name: t('Watch方法'),
-      topTip: t(
-        'Watch方法：通过建立长连接，实时监听配置版本的变更，当新版本的配置发布时，将自动调用回调方法处理新的配置信息，适用于需要实时响应配置变更的场景。',
-      ),
-    },
-  ];
+  const tabArr = [t('Get方法'), t('Watch方法')];
 
   const codePreviewRef = ref();
   const fileOptionRef = ref();
@@ -82,17 +72,74 @@
   provide('formError', formError);
 
   // 代码预览上方提示框
-  const topTip = computed(() => {
-    return tabArr[activeTab.value].topTip;
+  const kvConfig = computed(() => {
+    const url = 'https://bk.tencent.com/docs/markdown/ZH/BSCP/1.29/UserGuide/Function/python_sdk_dependency.md';
+    switch (props.kvName) {
+      case 'python':
+        // get
+        if (!activeTab.value) {
+          return {
+            topTip: `${t('用于主动获取配置项值的场景，此方法不会监听服务器端的配置更改，有关Python SDK的部署环境和依赖组件，请参阅白皮书中的')} <a href="${url}" target="_blank">${t('BSCP Python SDK依赖说明')}</a>`,
+            codePreviewHeight: 370,
+          };
+        }
+        // watch
+        return {
+          topTip: `${t('通过建立长连接，实时监听配置版本的变更，当新版本的配置发布时，将自动调用回调方法处理新的配置信息，适用于需要实时响应配置变更的场景，有关Python SDK的部署环境和依赖组件，请参阅白皮书中的')} <a href="${url}" target="_blank">${t('BSCP Python SDK依赖说明')}</a>`,
+          codePreviewHeight: 654,
+        };
+      case 'go':
+        if (!activeTab.value) {
+          return {
+            topTip: t('Get方法：用于一次性拉取最新的配置信息，适用于需要获取并更新配置的场景。'),
+            codePreviewHeight: 1076,
+          };
+        }
+        return {
+          topTip: t(
+            'Watch方法：通过建立长连接，实时监听配置版本的变更，当新版本的配置发布时，将自动调用回调方法处理新的配置信息，适用于需要实时响应配置变更的场景。',
+          ),
+          codePreviewHeight: 1322,
+        };
+      case 'java':
+        if (!activeTab.value) {
+          return {
+            topTip: t('Get方法：用于一次性拉取最新的配置信息，适用于需要获取并更新配置的场景。'),
+            codePreviewHeight: 1210,
+          };
+        }
+        return {
+          topTip: t(
+            'Watch方法：通过建立长连接，实时监听配置版本的变更，当新版本的配置发布时，将自动调用回调方法处理新的配置信息，适用于需要实时响应配置变更的场景。',
+          ),
+          codePreviewHeight: 1230,
+        };
+      case 'c++':
+        if (!activeTab.value) {
+          return {
+            topTip: t('Get方法：用于一次性拉取最新的配置信息，适用于需要获取并更新配置的场景。'),
+            codePreviewHeight: 1382,
+          };
+        }
+        return {
+          topTip: t(
+            'Watch方法：通过建立长连接，实时监听配置版本的变更，当新版本的配置发布时，将自动调用回调方法处理新的配置信息，适用于需要实时响应配置变更的场景。',
+          ),
+          codePreviewHeight: 2048,
+        };
+      default:
+        return {
+          topTip: '',
+          codePreviewHeight: 0,
+        };
+    }
   });
 
   watch(
     () => props.kvName,
-    (newV) => {
-      if (newV !== 'kv-cmd') {
-        handleTab();
-        getOptionData(optionData.value); // 每次切换模板需重新展示数据方式
-      }
+    () => {
+      handleTab();
+      getOptionData(optionData.value); // 每次切换模板需重新展示数据方式
     },
   );
 
@@ -168,6 +215,12 @@
         default_val: `"${optionData.value.privacyCredential}"`,
         memo: '',
       },
+      {
+        name: 'Bk_Bscp_Variable_Python_Key',
+        type: '',
+        default_val: '{{ YOUR_KEY }}',
+        memo: '',
+      },
     ];
   };
 
@@ -257,20 +310,19 @@
   }
   .preview-container {
     margin-top: 32px;
-    padding: 8px 0;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
+    padding: 8px 0 0;
     border-top: 1px solid #dcdee5;
-    // overflow: hidden;
   }
-  .kv-handle-content {
-    flex-shrink: 0;
+  .preview-label {
+    font-weight: 700;
+    font-size: 14px;
+    letter-spacing: 0;
+    line-height: 22px;
+    color: #63656e;
   }
   .preview-component {
     margin-top: 8px;
-    padding: 16px 0;
+    padding: 16px 0 0;
     flex: 1;
     height: 100%;
     background-color: #f5f7fa;

diff --git a/...vices/bcs-bscp/ui/src/views/space/client/example/components/content/node-mana-example.vue b/...vices/bcs-bscp/ui/src/views/space/client/example/components/content/node-mana-example.vue
@@ -111,10 +111,11 @@
     }
   }
   .service-content {
+    width: 600px;
     padding: 7px 17px;
     border: 1px solid #dcdee5;
     border-radius: 2px;
-    background-color: #fff;
+    background-color: #fafbfd;
   }
   .service-item {
     display: flex;

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/form-option.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/form-option.vue
@@ -53,21 +53,7 @@
   const emits = defineEmits(['update-option-data']);
 
   const { t } = useI18n();
-  const sysDirectories: string[] = [
-    '/bin',
-    '/boot',
-    '/dev',
-    '/etc',
-    '/lib',
-    '/lib64',
-    '/proc',
-    '/run',
-    '/sbin',
-    '/sys',
-    '/tmp',
-    '/usr',
-    '/var',
-  ];
+  const sysDirectories: string[] = ['/bin', '/boot', '/dev', '/lib', '/lib64', '/proc', '/run', '/sbin', '/sys'];
   const rules = {
     clientKey: [
       {

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/key-selector.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/key-selector.vue
@@ -29,9 +29,8 @@
       :label="item.spec.name + item.spec.enc_credential + item.spec.memo">
       <div class="key-option-item">
         <div class="name-text">
-          {{ item.spec.name }}({{ item.spec.privacyCredential }})&nbsp;<span class="name-text--desc">{{
-            item.spec.memo
-          }}</span>
+          {{ item.spec.name }}({{ item.spec.privacyCredential }})&nbsp;
+          <span class="name-text--desc">{{ item.spec.memo || '--' }}</span>
         </div>
       </div>
     </bk-option>

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/index.vue
@@ -129,15 +129,13 @@
     flex-shrink: 0;
     width: 240px;
     height: 100%;
-    border-right: 1px solid #f5f7fa;
+    border-right: 1px solid #dcdee5;
     background-color: #fff;
   }
   .example-main {
-    display: flex;
-    flex-direction: column;
     flex: 1;
     height: 100%;
-    overflow: hidden;
+    overflow-y: auto;
     :deep(.bk-alert-wraper) {
       align-items: center;
     }