From 05dac2b50460907338d3ccff9756102002d65593 Mon Sep 17 00:00:00 2001
From: q15971095971 <764419406@qq.com>
Date: Fri, 27 Sep 2024 19:37:43 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E9=85=8D=E7=BD=AE=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B=E6=96=B0=E5=A2=9E=20=E9=85=8D=E7=BD=AE=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E7=AD=9B=E9=80=89=E5=8A=9F=E8=83=BD--story=3D11969773?=
 =?UTF-8?q?7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../example/components/associate-config.vue   | 219 ++++++++++++++++++
 .../example/components/content/kv-example.vue |   2 +-
 .../components/content/node-mana-example.vue  |   2 +-
 .../client/example/components/form-option.vue |   8 +
 .../associate-config-items/index.vue          |  85 ++++---
 .../associate-config-items/rule-edit.vue      |  53 ++++-
 6 files changed, 330 insertions(+), 39 deletions(-)
 create mode 100644 bcs-services/bcs-bscp/ui/src/views/space/client/example/components/associate-config.vue

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/associate-config.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/associate-config.vue
new file mode 100644
index 0000000000..fe5728d488
--- /dev/null
+++ b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/associate-config.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="associate-config">
+    <!-- 标签 -->
+    <div class="associate-config-wrap">
+      <span class="label-span">{{ $t('启用配置文件筛选') }}</span>
+      <info
+        class="icon-info"
+        v-bk-tooltips="{
+          content: $t(
+            '当客户端无需拉取配置服务中的全量配置文件时，可以启用此功能，指定相应的通配符，可仅拉取客户端所需的文件',
+          ),
+          placement: 'top',
+        }" />
+      <bk-switcher class="label-switch" :value="configSwitch" size="small" theme="primary" @change="handleSwitcher" />
+    </div>
+    <div class="associate-config-content" v-if="configSwitch">
+      <div class="associate-info-wrap">
+        <div class="associate-info-count">已设置 {{ ruleList.length }} 个筛选规则</div>
+        <bk-button class="associate-info-btn" theme="primary" size="small" text @click="openRuleConfig">
+          <cog-shape class="btn-icon" />规则设置
+        </bk-button>
+      </div>
+      <associate-side-bar
+        :show="sideBarShow"
+        :id="-1"
+        :perm-check-loading="permCheckLoading"
+        :has-manage-perm="hasManagePerm"
+        :example-rules="rules"
+        :is-example-mode="true"
+        @send-example-rules="updateRule" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { Info, CogShape } from 'bkui-vue/lib/icon';
+  import associateSideBar from '../../../credentials/associate-config-items/index.vue';
+  import { permissionCheck } from '../../../../../api/index';
+  import { ICredentialRule, IRuleUpdateParams } from '../../../../../../types/credential';
+
+  const emits = defineEmits(['send-switcher']);
+
+  const route = useRoute();
+
+  const spaceId = ref(Number(route.params.spaceId));
+  const configSwitch = ref(false);
+  const sideBarShow = ref(false);
+  const permCheckLoading = ref(false);
+  const hasManagePerm = ref(false);
+  const ruleList = ref<{ app: string; scope: string; id: number }[]>([]);
+  const rules = ref<ICredentialRule[]>([]);
+
+  onMounted(() => {
+    getPermData();
+  });
+
+  const getPermData = async () => {
+    permCheckLoading.value = true;
+    const res = await permissionCheck({
+      resources: [
+        {
+          biz_id: spaceId.value,
+          basic: {
+            type: 'credential',
+            action: 'manage',
+          },
+        },
+      ],
+    });
+    hasManagePerm.value = res.is_allowed;
+    permCheckLoading.value = false;
+  };
+
+  // 获取筛选的规则
+  const updateRule = (data: IRuleUpdateParams) => {
+    const { add_scope, alter_scope, del_id } = data;
+    if (add_scope.length) {
+      add_scope.forEach((item) => {
+        ruleList.value.push({
+          app: item.app,
+          scope: item.scope,
+          id: Math.floor(Math.random() * 10000) + 1, // 配置示例没有规则id配置与返回
+        });
+      });
+    }
+    if (alter_scope.length) {
+      alter_scope.forEach((alter) => {
+        const scopeToUpdate = ruleList.value.find((item) => item.id === alter.id);
+        if (scopeToUpdate) {
+          scopeToUpdate.scope = alter.scope;
+        }
+      });
+    }
+    if (del_id.length) {
+      const filteredVal = ruleList.value.filter((item) => !del_id.includes(item.id));
+      ruleList.value = filteredVal;
+    }
+    sideBarShow.value = false;
+  };
+
+  const openRuleConfig = () => {
+    rules.value = ruleList.value.map((item) => {
+      return {
+        id: item.id,
+        spec: {
+          scope: item.scope,
+          app: item.app,
+        },
+        attachment: {
+          biz_id: spaceId.value,
+          credential_id: -1,
+        },
+        revision: {
+          creator: '',
+          reviser: '',
+          create_at: '',
+          update_at: '',
+          expired_at: '',
+        },
+      };
+    });
+    sideBarShow.value = true;
+  };
+
+  const handleSwitcher = (val: boolean) => {
+    configSwitch.value = val;
+    sendVal(configSwitch.value);
+  };
+
+  const sendVal = (configSwitch: boolean) => {
+    emits('send-switcher', configSwitch);
+  };
+</script>
+
+<style scoped lang="scss">
+  .associate-config-wrap {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .label-span {
+    font-size: 12px;
+    line-height: 20px;
+    color: #63656e;
+    &.em {
+      cursor: pointer;
+      color: #3a84ff;
+    }
+    &.required {
+      padding-right: 10px;
+      position: relative;
+      &::after {
+        content: '*';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 12px;
+        color: #ea3636;
+      }
+    }
+  }
+  .label-switch {
+    margin: 0 16px 0 12px;
+  }
+  .associate-config-content {
+    margin-top: 24px;
+  }
+  .icon-info {
+    margin-left: 9px;
+    font-size: 14px;
+    color: #979ba5;
+    cursor: pointer;
+  }
+  .popover-wrap {
+    font-size: 14px;
+  }
+  .popover-block {
+    line-height: 22px;
+    color: #63656e;
+    &-gap {
+      margin-top: 20px;
+    }
+  }
+  .popover-btn {
+    display: block;
+    margin: 8px 0 0 auto;
+  }
+  .associate-info-wrap {
+    padding: 6px 12px;
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 12px;
+    line-height: 20px;
+    background-color: #f5f7fa;
+  }
+  .associate-info-count {
+    position: relative;
+    padding-right: 12px;
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 1px;
+      height: 100%;
+      background-color: #dcdee5;
+    }
+  }
+  .associate-info-btn {
+    margin-left: 12px;
+    .btn-icon {
+      margin-right: 4px;
+      font-size: 16px;
+    }
+  }
+</style>
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
index 66cc5fcb88..209f75db4e 100644
--- 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
@@ -77,7 +77,7 @@
   const kvConfig = computed(() => {
     // @ts-ignore
     // eslint-disable-next-line
-    const url = BSCP_CONFIG.python_sdk_dependency_doc;
+    const url = (typeof BSCP_CONFIG !== 'undefined' && BSCP_CONFIG.python_sdk_dependency_doc) || '';
     switch (props.kvName) {
       case 'python':
         // get
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/node-mana-example.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/node-mana-example.vue
index 88465ab9ed..a7dd1365ff 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/node-mana-example.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/node-mana-example.vue
@@ -102,7 +102,7 @@
     nodeManaUrl: `${(window as any).BK_NODE_HOST}/#/plugin-manager/rule`,
     // @ts-ignore
     // eslint-disable-next-line
-    clientNode: BSCP_CONFIG.client_configuration_doc,
+    clientNode: (typeof BSCP_CONFIG !== 'undefined' && BSCP_CONFIG.client_configuration_doc) || '',
   };
 
   const keyValidateReg = new RegExp(
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
index 4a09107f03..50b63d994c 100644
--- 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
@@ -76,6 +76,11 @@
       :required="formData.clusterSwitch">
       <bk-input v-model.trim="formData.clusterInfo" :placeholder="$t('请输入')" clearable />
     </bk-form-item>
+    <!-- 启用配置文件筛选 -->
+    <bk-form-item v-if="associateConfigShow">
+      <!-- <p2p-label @send-switcher="formData.clusterSwitch = $event" /> -->
+      <associate-config />
+    </bk-form-item>
   </bk-form>
 </template>
 
@@ -92,6 +97,7 @@
   import { cloneDeep } from 'lodash';
   import { copyToClipBoard } from '../../../../../utils/index';
   import BkMessage from 'bkui-vue/lib/message';
+  import associateConfig from './associate-config.vue';
 
   const props = withDefaults(
     defineProps<{
@@ -99,12 +105,14 @@
       labelName?: string;
       p2pShow?: boolean;
       httpConfigShow?: boolean;
+      associateConfigShow?: boolean;
     }>(),
     {
       directoryShow: true,
       labelName: '标签',
       p2pShow: false,
       httpConfigShow: false,
+      associateConfigShow: true,
     },
   );
 
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/index.vue b/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/index.vue
index 3e82461880..ff45a2e4e5 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/index.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/index.vue
@@ -1,14 +1,19 @@
 <template>
   <bk-sideslider
-    :title="t('关联服务配置')"
-    width="960"
+    :title="sideSliderTitle"
+    :width="props.isExampleMode ? 772 : 960"
     :is-show="props.show"
     :before-close="handleBeforeClose"
     @closed="handleClose">
     <template #header>
       <div class="header-wrapper">
-        <span>{{ t('关联服务配置') }}</span>
-        <bk-popover placement="bottom-start" theme="light" trigger="click" ext-cls="view-rule-wrap">
+        <span>{{ sideSliderTitle }}</span>
+        <bk-popover
+          v-if="!props.isExampleMode"
+          placement="bottom-start"
+          theme="light"
+          trigger="click"
+          ext-cls="view-rule-wrap">
           <span class="view-rule">{{ t('查看规则示例') }}</span>
           <template #content>
             <ViewRuleExample />
@@ -25,6 +30,7 @@
           :id="props.id"
           :rules="rules"
           :app-list="appList"
+          :is-example-mode="props.isExampleMode"
           @change="handleRuleChange"
           @form-change="isFormChange = true"
           @trigger-save-btn-disabled="saveBtnDisabled = $event" />
@@ -57,7 +63,7 @@
   </bk-sideslider>
 </template>
 <script setup lang="ts">
-  import { ref, watch, onMounted } from 'vue';
+  import { ref, watch, onMounted, computed } from 'vue';
   import { useI18n } from 'vue-i18n';
   import { storeToRefs } from 'pinia';
   import useGlobalStore from '../../../../store/global';
@@ -75,14 +81,22 @@
   const { spaceId } = storeToRefs(useGlobalStore());
   const { t } = useI18n();
 
-  const props = defineProps<{
-    show: boolean;
-    id: number;
-    permCheckLoading: boolean;
-    hasManagePerm: boolean;
-  }>();
+  const props = withDefaults(
+    defineProps<{
+      show: boolean;
+      id: number;
+      permCheckLoading: boolean;
+      hasManagePerm: boolean;
+      isExampleMode?: boolean;
+      exampleRules?: ICredentialRule[];
+    }>(),
+    {
+      isExampleMode: false, // 配置示例模式(无密钥id)
+      exampleRules: () => [],
+    },
+  );
 
-  const emits = defineEmits(['close', 'refresh', 'applyPerm']);
+  const emits = defineEmits(['close', 'refresh', 'applyPerm', 'sendExampleRules']);
 
   const loading = ref(true);
   const rules = ref<ICredentialRule[]>([]);
@@ -103,11 +117,19 @@
     const resp = await getAppList(spaceId.value, { start: 0, all: true });
     appList.value = resp.details;
   });
+
+  const sideSliderTitle = computed(() => (props.isExampleMode ? t('配置文件筛选规则') : t('关联服务配置')));
+
   watch(
     () => props.show,
     (val) => {
       if (val) {
-        loadRules();
+        // 配置示例无需载入密钥关联的规则
+        if (props.isExampleMode) {
+          rules.value = props.exampleRules.length ? props.exampleRules : [];
+        } else {
+          loadRules();
+        }
         ruleChangeParams.value = {
           add_scope: [],
           del_id: [],
@@ -138,25 +160,36 @@
 
   const handleSave = async () => {
     if (ruleEdit.value.handleRuleValidate()) return;
-    pending.value = true;
-    try {
-      await updateCredentialScopes(spaceId.value, props.id, ruleChangeParams.value);
+    if (props.isExampleMode) {
+      // 配置示例不需要调用接口
+      emits('sendExampleRules', ruleChangeParams.value);
       ruleChangeParams.value = {
         add_scope: [],
         del_id: [],
         alter_scope: [],
       };
       isRuleEdit.value = false;
-      loadRules();
-      emits('refresh');
-      Message({
-        theme: 'success',
-        message: t('编辑规则成功'),
-      });
-    } catch (e) {
-      console.error(e);
-    } finally {
-      pending.value = false;
+    } else {
+      try {
+        pending.value = true;
+        await updateCredentialScopes(spaceId.value, props.id, ruleChangeParams.value);
+        ruleChangeParams.value = {
+          add_scope: [],
+          del_id: [],
+          alter_scope: [],
+        };
+        isRuleEdit.value = false;
+        loadRules();
+        emits('refresh');
+        Message({
+          theme: 'success',
+          message: t('编辑规则成功'),
+        });
+      } catch (e) {
+        console.error(e);
+      } finally {
+        pending.value = false;
+      }
     }
   };
 
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/rule-edit.vue b/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/rule-edit.vue
index b651ff0a11..db9967ae92 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/rule-edit.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/credentials/associate-config-items/rule-edit.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="rule-edit">
     <div class="head">
-      <p class="title">{{ t('配置关联规则') }}</p>
+      <p class="title">{{ editTitle }}</p>
     </div>
     <div class="rules-edit-area">
       <div v-for="(rule, index) in localRules" class="rule-list" :key="index">
         <div :class="['rule-item', { 'rule-error': !rule.isRight }, { 'service-error': !rule.isSelectService }]">
           <bk-select
+            v-show="!isExampleMode"
             v-model="rule.app"
             class="service-select"
             :filterable="true"
@@ -17,7 +18,7 @@
             @change="handleSelectApp(index)">
             <bk-option v-for="app in appList" :id="app" :key="app.id" :name="app.spec.name" />
           </bk-select>
-          <div style="width: 10px">/</div>
+          <div v-show="!isExampleMode" style="width: 10px">/</div>
           <bk-input
             v-model="rule.content"
             class="rule-input"
@@ -51,12 +52,15 @@
           <div
             :class="['preview', { 'preview-mode': previewRule?.index === index }, { 'need-preview': rule.needPreview }]"
             @click="handlePreviewRule(rule, index)">
-            <span>{{ t('预览') }}</span><Arrows-Right class="arrow-icon" />
+            <span>{{ t('预览') }}</span>
+            <Arrows-Right class="arrow-icon" />
           </div>
         </div>
         <div class="error-info" v-if="!rule.isRight || !rule.isSelectService">
           <span v-if="!rule.isSelectService">{{ t('请选择服务') }}</span>
-          <span v-else-if="!rule.isRight" class="rule-error">{{ t('输入的规则有误，请重新确认') }}</span>
+          <span v-else-if="!rule.isRight" :class="['rule-error', { 'example-style': props.isExampleMode }]">
+            {{ t('输入的规则有误，请重新确认') }}
+          </span>
         </div>
       </div>
     </div>
@@ -66,19 +70,29 @@
 <script setup lang="ts">
   import { ref, watch, computed } from 'vue';
   import { useI18n } from 'vue-i18n';
+  import { useRoute } from 'vue-router';
   import { ICredentialRule, IRuleEditing, IRuleUpdateParams, IPreviewRule } from '../../../../../types/credential';
   import { IAppItem } from '../../../../../types/app';
   import { ArrowsRight } from 'bkui-vue/lib/icon';
 
   const { t } = useI18n();
-  const props = defineProps<{
-    rules: ICredentialRule[];
-    appList: IAppItem[];
-    previewRule: IPreviewRule | null;
-  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      rules: ICredentialRule[];
+      appList: IAppItem[];
+      previewRule: IPreviewRule | null;
+      isExampleMode?: boolean;
+    }>(),
+    {
+      isExampleMode: false, // 配置示例模式(无密钥id)
+    },
+  );
 
   const emits = defineEmits(['change', 'formChange', 'update:previewRule', 'trigger-save-btn-disabled']);
 
+  const route = useRoute();
+
   const RULE_TYPE_MAP: { [key: string]: string } = {
     new: t('新增'),
     del: t('删除'),
@@ -87,6 +101,20 @@
 
   const localRules = ref<IRuleEditing[]>([]);
 
+  // 配置示例会传当前选择的服务，不提供选择服务
+  const localApp = computed(() => {
+    if (props.isExampleMode) {
+      return (
+        props.appList.find((appItem) => {
+          return appItem.id === Number(route.params.appId);
+        }) || null
+      );
+    }
+    return null;
+  });
+
+  const editTitle = computed(() => (props.isExampleMode ? t('配置筛选规则') : t('配置关联规则')));
+
   const inputPlaceholder = computed(() => (rule: IRuleEditing) => {
     if (!rule.app) return ' ';
     if (rule.app.spec.config_type === 'file') return t('请输入文件路径');
@@ -129,7 +157,7 @@
             content: '',
             original: '',
             isRight: true,
-            app: null,
+            app: props.isExampleMode ? localApp.value : null,
             originalApp: '',
             isSelectService: true,
             needPreview: false,
@@ -156,7 +184,7 @@
       content: '',
       original: '',
       isRight: true,
-      app: null,
+      app: props.isExampleMode ? localApp.value : null,
       originalApp: '',
       isSelectService: true,
       needPreview: false,
@@ -395,6 +423,9 @@
     .rule-error {
       position: absolute;
       left: 200px;
+      &.example-style {
+        left: 0;
+      }
     }
   }
   .preview-btn {

From b9b88e6ac484c8bd1b2affa64cbdf6b32282d68b Mon Sep 17 00:00:00 2001
From: q15971095971 <764419406@qq.com>
Date: Sun, 29 Sep 2024 17:33:23 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E9=85=8D=E7=BD=AE=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B=E6=96=B0=E5=A2=9E=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E7=AD=9B=E9=80=89=E5=8A=9F=E8=83=BDdone--story=3D119697737?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/src/assets/example-data/file-cmd.yaml  |  2 +
 .../assets/example-data/file-container.yaml   |  1 +
 bcs-services/bcs-bscp/ui/src/i18n/en-us.ts    | 11 ++-
 bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts    |  9 ++
 .../example/components/associate-config.vue   | 24 +++--
 .../components/content/cmd-example.vue        | 16 +++-
 .../components/content/container-example.vue  | 24 ++++-
 .../components/content/node-mana-example.vue  | 88 +++++++++++--------
 .../client/example/components/form-option.vue |  6 +-
 bcs-services/bcs-bscp/ui/types/client.ts      |  1 +
 10 files changed, 131 insertions(+), 51 deletions(-)

diff --git a/bcs-services/bcs-bscp/ui/src/assets/example-data/file-cmd.yaml b/bcs-services/bcs-bscp/ui/src/assets/example-data/file-cmd.yaml
index 9a07f4a69f..9992b38f4b 100644
--- a/bcs-services/bcs-bscp/ui/src/assets/example-data/file-cmd.yaml
+++ b/bcs-services/bcs-bscp/ui/src/assets/example-data/file-cmd.yaml
@@ -13,4 +13,6 @@ labels: {{ .Bk_Bscp_Variable_Leabels }}
 
 # 临时目录，在拉取配置文件时，用于存储配置文件的目录，默认为：/data/bscp，可根据实际情况调整
 temp_dir: {{ .Bk_Bscp_VariableTempDir }}
+
+{{ .Bk_Bscp_Variable_Rules }}
 EOF
\ No newline at end of file
diff --git a/bcs-services/bcs-bscp/ui/src/assets/example-data/file-container.yaml b/bcs-services/bcs-bscp/ui/src/assets/example-data/file-container.yaml
index c342428349..dec024ed18 100644
--- a/bcs-services/bcs-bscp/ui/src/assets/example-data/file-container.yaml
+++ b/bcs-services/bcs-bscp/ui/src/assets/example-data/file-container.yaml
@@ -38,6 +38,7 @@ spec:
             - name: temp_dir
               value: {{ .Bk_Bscp_Variable_TempDir }}
             {{ .Bk_Bscp_Variable_p2p_part1 }}
+            {{ .Bk_Bscp_Variable_Rules }}
           # 需要同时挂载文件临时目录到 Init 容器，sidecar 容器，业务容器
           volumeMounts:
             - mountPath: {{ .Bk_Bscp_Variable_TempDir }}
diff --git a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
index 2f3e2a1462..a086b2931a 100644
--- a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
+++ b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
@@ -849,7 +849,7 @@ export default {
   复制命令: 'Command Copy',
   '仅支持字母，数字，\'-\'，\'_\'，\'.\' 及 \'/\' 且需以字母数字开头和结尾': 'Only supports letters, numbers, \'-\', \'_\', \'.\' and \'/\' characters, and must start and end with a letter or number',
   '需以字母、数字开头和结尾，可包含 \'-\'，\'_\'，\'.\' 和字母数字及负数': 'Must start and end with a letter or number, can include \'-\', \'_\', \'.\', and alphanumeric characters, as well as negative numbers',
-  服务标签: 'service label',
+  服务标签: 'Service label',
   '启用 P2P 网络加速': 'Enable P2P network acceleration',
   查看说明: 'View instructions',
   '启用 P2P 网络加速主要适用于业务但配置文件较大及大量节点拉取配置的场景，以实现更优的文件传输速度。': 'Enabling P2P network acceleration is primarily suitable for scenarios where business configuration files are large and many nodes are pulling configurations, to achieve better file transfer speeds',
@@ -867,6 +867,15 @@ export default {
   '请输入BCS 集群 ID，替换下方示例代码后，再尝试复制示例': 'Please enter the BCS cluster ID, replace the example code below, and then try copying the example',
   'BCS集群ID须符合以下格式：BCS-K8S-xxxxx，其中xxxxx为5位数字': 'The BCS cluster ID must follow the format: BCS-K8S-xxxxx, where xxxxx is a five-digit numbe',
   一键复制: 'Copy',
+  启用配置文件筛选: 'Enable configuration file filtering',
+  '当客户端无需拉取配置服务中的全量配置文件时，可以启用此功能，指定相应的通配符，可仅拉取客户端所需的文件': 'When the client does not need to pull the full configuration files from the configuration service, this feature can be enabled. By specifying the appropriate wildcard, the client can pull only the required files',
+  已设置的筛选规则: '{count} filtering rules have been set',
+  规则设置: 'Rule configuration',
+  配置文件筛选规则: 'Configuration file filter rules',
+  配置文件筛选: 'Configuration file filter',
+  '全局配置文件筛选：': 'Global Configuration File Filter：',
+  '(全局配置文件筛选与服务配置文件筛选一样，不同的是全局配置文件筛选可供多个服务共用)': '(The filtering of the global configuration file is the same as that of the service configuration file; the difference is that the global configuration file can be shared among multiple services)',
+  配置筛选规则: 'Configuration filtering rules',
 
   // 公共组件
   页面不存在: '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
index 05e6b679a4..e7935ce150 100644
--- a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
+++ b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
@@ -870,6 +870,15 @@ export default {
   '请输入BCS 集群 ID，替换下方示例代码后，再尝试复制示例': '请输入BCS 集群 ID，替换下方示例代码后，再尝试复制示例',
   'BCS集群ID须符合以下格式：BCS-K8S-xxxxx，其中xxxxx为5位数字': 'BCS集群ID须符合以下格式：BCS-K8S-xxxxx，其中xxxxx为5位数字',
   一键复制: '一键复制',
+  启用配置文件筛选: '启用配置文件筛选',
+  '当客户端无需拉取配置服务中的全量配置文件时，可以启用此功能，指定相应的通配符，可仅拉取客户端所需的文件': '当客户端无需拉取配置服务中的全量配置文件时，可以启用此功能，指定相应的通配符，可仅拉取客户端所需的文件',
+  已设置的筛选规则: '已设置 {count} 个筛选规则',
+  规则设置: '规则设置',
+  配置文件筛选规则: '配置文件筛选规则',
+  配置文件筛选: '配置文件筛选',
+  '全局配置文件筛选：': '全局配置文件筛选：',
+  '(全局配置文件筛选与服务配置文件筛选一样，不同的是全局配置文件筛选可供多个服务共用)': '全局配置文件筛选与服务配置文件筛选一样，不同的是全局配置文件筛选可供多个服务共用',
+  配置筛选规则: '配置筛选规则',
 
   // 公共组件
   页面不存在: '页面不存在',
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/associate-config.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/associate-config.vue
index fe5728d488..8af37491c6 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/associate-config.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/associate-config.vue
@@ -15,9 +15,9 @@
     </div>
     <div class="associate-config-content" v-if="configSwitch">
       <div class="associate-info-wrap">
-        <div class="associate-info-count">已设置 {{ ruleList.length }} 个筛选规则</div>
+        <div class="associate-info-count">{{ $t('已设置的筛选规则', { count: ruleList.length }) }}</div>
         <bk-button class="associate-info-btn" theme="primary" size="small" text @click="openRuleConfig">
-          <cog-shape class="btn-icon" />规则设置
+          <cog-shape class="btn-icon" />{{ $t('规则设置') }}
         </bk-button>
       </div>
       <associate-side-bar
@@ -27,7 +27,8 @@
         :has-manage-perm="hasManagePerm"
         :example-rules="rules"
         :is-example-mode="true"
-        @send-example-rules="updateRule" />
+        @send-example-rules="updateRule"
+        @close="handleClose" />
     </div>
   </div>
 </template>
@@ -39,7 +40,7 @@
   import { permissionCheck } from '../../../../../api/index';
   import { ICredentialRule, IRuleUpdateParams } from '../../../../../../types/credential';
 
-  const emits = defineEmits(['send-switcher']);
+  const emits = defineEmits(['updateRules']);
 
   const route = useRoute();
 
@@ -96,6 +97,7 @@
       const filteredVal = ruleList.value.filter((item) => !del_id.includes(item.id));
       ruleList.value = filteredVal;
     }
+    sendRules();
     sideBarShow.value = false;
   };
 
@@ -123,13 +125,21 @@
     sideBarShow.value = true;
   };
 
+  const handleClose = () => {
+    sideBarShow.value = false;
+  };
+
   const handleSwitcher = (val: boolean) => {
     configSwitch.value = val;
-    sendVal(configSwitch.value);
+    if (!val) {
+      ruleList.value = [];
+      sendRules();
+    }
   };
 
-  const sendVal = (configSwitch: boolean) => {
-    emits('send-switcher', configSwitch);
+  const sendRules = () => {
+    const ruleString = ruleList.value.map((item) => item.scope);
+    emits('updateRules', ruleString);
   };
 </script>
 
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
index 7cae7e9c33..db24ea3341 100644
--- 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
@@ -3,6 +3,7 @@
     <form-option
       ref="fileOptionRef"
       :directory-show="basicInfo!.serviceType.value === 'file'"
+      :associate-config-show="basicInfo!.serviceType.value === 'file'"
       @update-option-data="getOptionData" />
     <div class="preview-container">
       <p class="headline">{{ $t('配置指引与示例预览') }}</p>
@@ -142,6 +143,7 @@
     privacyCredential: '',
     labelArr: [],
     tempDir: '',
+    rules: [],
   });
 
   const cmdContent = computed(() => {
@@ -173,7 +175,19 @@
     let updateString = replaceVal.value;
     updateString = updateString.replace('{{ .Bk_Bscp_Variable_BkBizId }}', bkBizId.value);
     updateString = updateString.replace('{{ .Bk_Bscp_Variable_ServiceName }}', basicInfo!.serviceName.value);
-    replaceVal.value = updateString.replaceAll('{{ .Bk_Bscp_Variable_FEED_ADDR }}', (window as any).GRPC_ADDR);
+    updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_FEED_ADDR }}', (window as any).GRPC_ADDR);
+    // 文件配置筛选规则动态增/删
+    if (optionData.value.rules?.length) {
+      const rulesPart = `
+      # 当客户端无需拉取配置服务中的全量配置文件时，指定相应的通配符，可仅拉取客户端所需的文件，支持多个通配符
+config_matches
+${optionData.value.rules.map((rule) => `- "${rule}"`).join('\n')}`;
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules }}', rulesPart.trim());
+    } else {
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules }}', '');
+    }
+    // 去除 动态插入的值为空的情况下产生的空白行
+    replaceVal.value = updateString.replaceAll(/\r\n\s+\r\n/g, '\n');
   };
   const updateVariables = () => {
     variables.value = [
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/container-example.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/container-example.vue
index 7b83038e2b..3feafa1007 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/container-example.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/container-example.vue
@@ -1,6 +1,10 @@
 <template>
   <section class="example-wrap">
-    <form-option ref="fileOptionRef" :p2p-show="true" @update-option-data="getOptionData" />
+    <form-option
+      ref="fileOptionRef"
+      :p2p-show="true"
+      :associate-config-show="true"
+      @update-option-data="getOptionData" />
     <div class="preview-container">
       <span class="preview-label">{{ $t('示例预览') }}</span>
       <bk-button theme="primary" class="copy-btn" @click="copyExample">{{ $t('复制示例') }}</bk-button>
@@ -41,6 +45,7 @@
     tempDir: '',
     clusterSwitch: false,
     clusterInfo: '',
+    rules: [],
   });
   const bkBizId = ref(String(route.params.spaceId));
   const replaceVal = ref('');
@@ -98,13 +103,24 @@
                   apiVersion: v1
                   fieldPath: metadata.uid`;
       updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_p2p_part1 }}', p2pPart1.trim());
-      replaceVal.value = updateString.replaceAll('{{ .Bk_Bscp_Variable_p2p_part2 }}', p2pPart2.trim());
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_p2p_part2 }}', p2pPart2.trim());
     } else {
       updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_p2p_part1 }}', '');
       updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_p2p_part2 }}', '');
-      // 去除不含p2p相关内容后，遗留的空白行去除
-      replaceVal.value = updateString.replaceAll(/\r\n\s+\r\n/g, '\n');
     }
+
+    // 文件配置筛选规则动态增/删
+    if (optionData.value.rules?.length) {
+      const rulesPart = `
+      # 当客户端无需拉取配置服务中的全量配置文件时，指定相应的通配符，可仅拉取客户端所需的文件，支持多个通配符
+            - name: config_matches
+              value: ${optionData.value.rules}`;
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules }}', rulesPart.trim());
+    } else {
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules }}', '');
+    }
+    // 去除 动态插入的值为空的情况下产生的空白行
+    replaceVal.value = updateString.replaceAll(/\r\n\s+\r\n/g, '\n');
   };
   // 高亮配置
   const updateVariables = () => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/node-mana-example.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/node-mana-example.vue
index a7dd1365ff..81e6a42c73 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/node-mana-example.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/content/node-mana-example.vue
@@ -1,6 +1,10 @@
 <template>
   <section class="node-mana-container">
-    <form-option ref="fileOptionRef" label-name="服务标签" @update-option-data="getOptionData" />
+    <form-option
+      ref="fileOptionRef"
+      label-name="服务标签"
+      :associate-config-show="true"
+      @update-option-data="getOptionData" />
     <div class="node-content">
       <span class="node-label">{{ $t('示例预览') }}</span>
       <div class="top-tip">
@@ -14,37 +18,50 @@
         </span>
       </div>
       <div class="preview-content">
-        <bk-form label-width="145">
+        <bk-form :label-width="locale === 'en' ? '206' : '145'">
           <bk-form-item :label="$t('服务：')">
             <div class="service-content">
+              <!-- 服务名称 -->
+              <div class="service-item">
+                <span :class="['item-label', { 'item-label--en': locale === 'en' }]"> {{ $t('服务名称') }}： </span>
+                <span v-if="basicInfo!.serviceName.value" class="bk-form-content">
+                  <span class="content-em" @click="copyText(basicInfo!.serviceName.value)">
+                    {{ basicInfo!.serviceName.value }} <copy-shape class="icon-shape" />
+                  </span>
+                </span>
+                <div v-else class="bk-form-content">--</div>
+              </div>
+              <!-- 标签 -->
               <div class="service-item">
                 <span :class="['item-label', { 'item-label--en': locale === 'en' }]"> {{ $t('标签') }}： </span>
-                <ul class="bk-form-content" v-if="optionData.labelArr.length">
-                  <li class="label-li" v-for="(item, index) in optionData.labelArr" :key="index">
+                <ul v-if="optionData.labelArr.length" class="bk-form-content">
+                  <li v-for="(item, index) in optionData.labelArr" :key="index" class="label-li">
                     <div class="label-content">
-                      <span class="label-key">key</span>
-                      <div class="label-value">{{ item.key }}</div>
-                      <copy-shape class="icon-shape" v-show="item.key" @click="copyText(item.key as string)" />
-                    </div>
-                    <div class="label-content">
-                      <span class="label-key">value</span>
-                      <div class="label-value">{{ item.value }}</div>
-                      <copy-shape class="icon-shape" v-show="item.value" @click="copyText(item.value as string)" />
+                      <!-- <span class="label-key">key</span> -->
+                      <div class="input-wrap">{{ item.key || 'key' }}</div>
+                      &nbsp;=&nbsp;
+                      <div class="input-wrap">{{ item.value || 'value' }}</div>
+                      <copy-shape
+                        class="icon-shape"
+                        v-show="item.key && item.value"
+                        @click="copyText(`${item.key}=${item.value}`)" />
                     </div>
                   </li>
                 </ul>
                 <div v-else class="bk-form-content">--</div>
               </div>
+              <!-- 配置文件筛选 -->
               <div class="service-item">
-                <span :class="['item-label', { 'item-label--en': locale === 'en' }]"> {{ $t('服务名称') }}： </span>
-                <span class="bk-form-content">
-                  <span
-                    class="content-em"
-                    v-if="basicInfo!.serviceName.value"
-                    @click="copyText(basicInfo!.serviceName.value)">
-                    {{ basicInfo!.serviceName.value }} <copy-shape class="icon-shape" />
-                  </span>
-                </span>
+                <span :class="['item-label', { 'item-label--en': locale === 'en' }]"> {{ $t('配置文件筛选') }}： </span>
+                <ul v-if="optionData.rules.length" class="bk-form-content">
+                  <li v-for="(rule, index) in optionData.rules" :key="index" class="label-li">
+                    <div class="label-content">
+                      <div class="input-wrap full">{{ rule }}</div>
+                      <copy-shape class="icon-shape" v-show="rule" @click="copyText(rule)" />
+                    </div>
+                  </li>
+                </ul>
+                <div v-else class="bk-form-content">--</div>
               </div>
             </div>
           </bk-form-item>
@@ -68,6 +85,11 @@
               {{ $t('(全局标签与服务标签参数一样，常用于按标签进行灰度发布；不同的是全局标签可供多个服务共用)') }}
             </span>
           </bk-form-item>
+          <bk-form-item :label="$t('全局配置文件筛选：')">
+            <span class="">
+              {{ $t('(全局配置文件筛选与服务配置文件筛选一样，不同的是全局配置文件筛选可供多个服务共用)') }}
+            </span>
+          </bk-form-item>
           <bk-form-item :label="`${$t('客户端密钥')}:`">
             <span class="content-em" v-if="optionData.clientKey" @click="copyText(optionData.clientKey)">
               {{ optionData.privacyCredential }} <copy-shape class="icon-shape" />
@@ -87,7 +109,6 @@
   import BkMessage from 'bkui-vue/lib/message';
   import FormOption from '../form-option.vue';
   import { useI18n } from 'vue-i18n';
-  // import { cloneDeep } from 'lodash';
 
   interface labelItem {
     key: String;
@@ -120,6 +141,7 @@
     privacyCredential: '',
     labelArr: [] as labelItem[],
     tempDir: '',
+    rules: [],
   });
 
   const getOptionData = async (data: any) => {
@@ -202,8 +224,7 @@
   }
   .preview-content {
     margin-top: 13px;
-    padding: 24px 0;
-    // height: 500px;
+    padding: 24px 10px 24px 0;
     background-color: #f5f7fa;
     .icon-shape {
       font-size: 12px;
@@ -240,7 +261,7 @@
   }
   .label-li {
     & + .label-li {
-      margin-top: 24px;
+      margin-top: 8px;
     }
     .label-content {
       display: flex;
@@ -261,21 +282,18 @@
         cursor: pointer;
       }
     }
-    .label-key {
-      margin-right: 16px;
-      width: 31px;
-      height: 30px;
-      text-align: right;
-    }
-    .label-value {
+    .input-wrap {
       padding: 0 8px;
-      width: 240px;
+      width: 212px;
       height: 30px;
       line-height: 30px;
       border: 1px solid #dcdee5;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      &.full {
+        width: 440px;
+      }
     }
   }
   .service-content {
@@ -293,14 +311,14 @@
     }
     .item-label {
       flex-shrink: 0;
-      width: 60px;
+      width: 90px;
       font-size: 12px;
       white-space: nowrap;
       text-align: right;
       color: #63656e;
       line-height: 32px;
       &--en {
-        width: 91px;
+        width: 162px;
       }
     }
     .item-content {
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
index 50b63d994c..cdccc23182 100644
--- 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
@@ -78,8 +78,7 @@
     </bk-form-item>
     <!-- 启用配置文件筛选 -->
     <bk-form-item v-if="associateConfigShow">
-      <!-- <p2p-label @send-switcher="formData.clusterSwitch = $event" /> -->
-      <associate-config />
+      <associate-config @update-rules="formData.rules = $event" />
     </bk-form-item>
   </bk-form>
 </template>
@@ -112,7 +111,7 @@
       labelName: '标签',
       p2pShow: false,
       httpConfigShow: false,
-      associateConfigShow: true,
+      associateConfigShow: false,
     },
   );
 
@@ -135,6 +134,7 @@
     labelArr: [], // 添加的标签
     clusterSwitch: false, // 集群开关
     clusterInfo: 'BCS-K8S-', // 集群ID
+    rules: [], // 文件筛选规则
     // clusterInfo: {
     //   name: '', // 集群名称
     //   value: '', // 集群id
diff --git a/bcs-services/bcs-bscp/ui/types/client.ts b/bcs-services/bcs-bscp/ui/types/client.ts
index 07e1d3a604..aa656225a6 100644
--- a/bcs-services/bcs-bscp/ui/types/client.ts
+++ b/bcs-services/bcs-bscp/ui/types/client.ts
@@ -168,4 +168,5 @@ export interface IExampleFormData {
   labelArr: string[];
   clusterSwitch?: boolean;
   clusterInfo?: string;
+  rules?: string[];
 }