feat: 1.配置示例-配置文件筛选体验优化--story=119697737 (#3565)

* feat: 配置文案筛选文案调整，进入筛选逻辑调整--story=119697737 * feat: 1.配置示例调整自动打开规则编辑抽屉方式；2.国际化和样式调整--story=119697737
TencentBlueKing · Oct 11, 2024 · 21cf128 · 21cf128
1 parent 3225426
commit 21cf128
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 50 deletions.
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
@@ -38,7 +38,7 @@ spec:
             - name: temp_dir
               value: {{ .Bk_Bscp_Variable_TempDir }}
             {{ .Bk_Bscp_Variable_p2p_part1 }}
-            {{ .Bk_Bscp_Variable_Rules }}
+            {{ .Bk_Bscp_Variable_Rules1 }}
           # 需要同时挂载文件临时目录到 Init 容器，sidecar 容器，业务容器
           volumeMounts:
             - mountPath: {{ .Bk_Bscp_Variable_TempDir }}
@@ -71,6 +71,7 @@ spec:
             - name: temp_dir
               value: {{ .Bk_Bscp_Variable_TempDir }}
             {{ .Bk_Bscp_Variable_p2p_part2 }}
+            {{ .Bk_Bscp_Variable_Rules2 }}
           volumeMounts:
             - mountPath: {{ .Bk_Bscp_Variable_TempDir }}
               name: bscp-temp-dir

diff --git a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
@@ -70,10 +70,12 @@ export default {
   请输入服务名: 'Please enter the service name',
   同时会删除服务密钥对服务的关联规则: 'The association rule of the service key pair is deleted',
   匹配结果: 'Matching result',
+  筛选结果: 'Filtering results',
   项: 'item',
   请输入配置文件名: 'Please enter the absolute path of the configuration file',
   没有匹配到配置项: 'No configuration item was matched',
   请先在左侧表单设置关联规则并预览: 'Please first set the association rules in the left form and preview',
+  请先在左侧表单设置筛选规则并预览: 'Please set the filtering rules in the form on the left and preview',
   删除服务成功: 'Service deleted successfully',
   敏感信息: 'Sensitive info',
   请选择数据类型: 'Please select data type',
@@ -775,6 +777,9 @@ export default {
   '关联myservice服务下所有的配置(包含子目录)': 'Associate all configurations under the myservice service (including subdirectories)',
   '关联myservice服务/etc目录下所有的配置(不含子目录)': 'Associate all configurations in the myservice/etc directory (excluding subdirectories)',
   '关联myservice服务/etc/nginx/nginx.conf文件': 'Associated myservice service/etc/nginx/nginx.conf file',
+  '筛选myservice服务下所有的配置(包含子目录)': 'Filter all configurations under the myservice service (including subdirectories)',
+  '筛选myservice服务/etc目录下所有的配置(不含子目录)': 'Filter all configurations in the /etc directory of the myservice service (excluding subdirectories)',
+  '筛选myservice服务/etc/nginx/nginx.conf文件': 'Filter the /etc/nginx/nginx.conf file of the myservice service',
   关联myservice服务下所有配置项: 'Associate all configuration items under the myservice service',
   关联myservice服务下所有以demo_开头的配置项: 'Associate all configuration items starting with demo_ under the myservice service',
   共有: 'There is',
@@ -786,6 +791,7 @@ export default {
   '输入的规则有误，请重新确认': 'The entered rules are incorrect, please reconfirm',
   请输入文件路径: 'Please enter file path',
   请输入配置项名称: 'Please enter the configuration item name',
+  请输入配置文件名称: 'Please enter the configuration file name',
   密钥名称已存在: 'The credentials name already exists',
 
   // 配置示例

diff --git a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
@@ -774,6 +774,9 @@ export default {
   '关联myservice服务下所有的配置(包含子目录)': '关联myservice服务下所有的配置(包含子目录)',
   '关联myservice服务/etc目录下所有的配置(不含子目录)': '关联myservice服务/etc目录下所有的配置(不含子目录)',
   '关联myservice服务/etc/nginx/nginx.conf文件': '关联myservice服务/etc/nginx/nginx.conf文件',
+  '筛选myservice服务下所有的配置(包含子目录)': '筛选myservice服务下所有的配置(包含子目录)',
+  '筛选myservice服务/etc目录下所有的配置(不含子目录)': '筛选myservice服务/etc目录下所有的配置(不含子目录)',
+  '筛选myservice服务/etc/nginx/nginx.conf文件': '筛选myservice服务/etc/nginx/nginx.conf文件',
   关联myservice服务下所有配置项: '关联myservice服务下所有配置项',
   关联myservice服务下所有以demo_开头的配置项: '关联myservice服务下所有以demo_开头的配置项',
   共有: '共有',
@@ -785,12 +788,15 @@ export default {
   '输入的规则有误，请重新确认': '输入的规则有误，请重新确认',
   请输入文件路径: '请输入文件路径',
   请输入配置项名称: '请输入配置项名称',
+  请输入配置文件名称: '请输入配置文件名称',
   密钥名称已存在: '密钥名称已存在',
   匹配结果: '匹配结果',
+  筛选结果: '筛选结果',
   项: '项',
   请输入配置文件名: '请输入配置文件名',
   没有匹配到配置项: '没有匹配到配置项',
   请先在左侧表单设置关联规则并预览: '请先在左侧表单设置关联规则并预览',
+  请先在左侧表单设置筛选规则并预览: '请先在左侧表单设置筛选规则并预览',
 
   // 配置示例
   'Sidecar 容器客户端用于容器化应用程序拉取文件型配置场景。': 'Sidecar 容器客户端用于容器化应用程序拉取文件型配置场景。',

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
@@ -1,7 +1,7 @@
 <template>
   <!-- 标签 -->
   <div class="add-label-wrap">
-    <span class="label-span">{{ $t(labelName) }}</span>
+    <span class="label-span">{{ $t('标签') }}</span>
     <info
       class="icon-info"
       v-bk-tooltips="{
@@ -40,8 +40,6 @@
   import { ref, watch } from 'vue';
   import { Info, Plus } from 'bkui-vue/lib/icon';
 
-  defineProps<{ labelName: string }>();
-
   const emits = defineEmits(['send-label']);
 
   const labelArr = ref<{ key: string; value: string }[]>([]);

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
@@ -21,6 +21,7 @@
         </bk-button>
       </div>
       <associate-side-bar
+        ref="sideBarRef"
         :show="sideBarShow"
         :id="-1"
         :perm-check-loading="permCheckLoading"
@@ -43,6 +44,7 @@
 
   const route = useRoute();
 
+  const sideBarRef = ref();
   const spaceId = ref(Number(route.params.spaceId));
   const configSwitch = ref(false);
   const sideBarShow = ref(false);
@@ -101,22 +103,22 @@
       };
     });
     sideBarShow.value = true;
+    sideBarRef.value.handleOpenEdit(); // 直接打开编辑规则页面
   };
 
   const handleClose = () => {
     sideBarShow.value = false;
   };
 
-  const handleSwitcher = (val: boolean) => {
+  const handleSwitcher = async (val: boolean) => {
+    rules.value = [];
+    ruleList.value = [];
+    sendRules();
     configSwitch.value = val;
-    if (!val) {
-      ruleList.value = [];
-      sendRules();
-    } else {
+    if (val) {
       // 打开文件筛选开关自动打开规则设置抽屉
-      nextTick(() => {
-        sideBarShow.value = true;
-      });
+      await nextTick();
+      sideBarShow.value = true;
     }
   };
 

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
@@ -17,7 +17,11 @@
           <template v-else>
             <bk-button theme="primary" class="copy-btn" @click="copyExample">{{ $t('复制命令') }}</bk-button>
             <code-preview
-              :class="['preview-component', { 'preview-component--kvcmd': basicInfo!.serviceType.value === 'kv' }]"
+              :class="[
+                'preview-component',
+                { 'preview-component--kvcmd': basicInfo!.serviceType.value === 'kv' },
+                { 'rules-height': optionData.rules.length },
+              ]"
               :code-val="replaceVal"
               :variables="variables"
               :language="kvName"
@@ -180,8 +184,7 @@
     if (optionData.value.rules?.length) {
       const rulesPart = `
       # 当客户端无需拉取配置服务中的全量配置文件时，指定相应的通配符，可仅拉取客户端所需的文件，支持多个通配符
-config_matches
-${optionData.value.rules.map((rule) => `- "${rule}"`).join('\n')}`;
+config_matches:{{ .Bk_Bscp_Variable_Rules_Value }}`;
       updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules }}', rulesPart.trim());
     } else {
       updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules }}', '');
@@ -209,6 +212,12 @@ ${optionData.value.rules.map((rule) => `- "${rule}"`).join('\n')}`;
         default_val: `'${optionData.value.tempDir}'`,
         memo: '',
       },
+      {
+        name: 'Bk_Bscp_Variable_Rules_Value',
+        type: '',
+        default_val: `[${optionData.value.rules.map((rule) => `"${rule}"`).join(',')}]`,
+        memo: '',
+      },
     ];
   };
   // 复制示例
@@ -318,5 +327,8 @@ ${optionData.value.rules.map((rule) => `- "${rule}"`).join('\n')}`;
     &--kvcmd {
       height: 279px;
     }
+    &.rules-height {
+      height: 394px;
+    }
   }
 </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
@@ -111,13 +111,18 @@
 
     // 文件配置筛选规则动态增/删
     if (optionData.value.rules?.length) {
-      const rulesPart = `
+      const rulesPart1 = `
       # 当客户端无需拉取配置服务中的全量配置文件时，指定相应的通配符，可仅拉取客户端所需的文件，支持多个通配符
             - name: config_matches
-              value: ${optionData.value.rules}`;
-      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules }}', rulesPart.trim());
+              value: {{ .Bk_Bscp_Variable_Rules_Value }}`;
+      const rulesPart2 = `
+            - name: config_matches
+              value: {{ .Bk_Bscp_Variable_Rules_Value }}`;
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules1 }}', rulesPart1.trim());
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules2 }}', rulesPart2.trim());
     } else {
-      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules }}', '');
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules1 }}', '');
+      updateString = updateString.replaceAll('{{ .Bk_Bscp_Variable_Rules2 }}', '');
     }
     // 去除 动态插入的值为空的情况下产生的空白行
     replaceVal.value = updateString.replaceAll(/\r\n\s+\r\n/g, '\n');
@@ -149,6 +154,12 @@
         default_val: `${optionData.value.clusterInfo}`,
         memo: '',
       },
+      {
+        name: 'Bk_Bscp_Variable_Rules_Value',
+        type: '',
+        default_val: `'${optionData.value.rules}'`,
+        memo: '',
+      },
     ];
   };
   // 复制示例

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
@@ -1,10 +1,6 @@
 <template>
   <section class="node-mana-container">
-    <form-option
-      ref="fileOptionRef"
-      label-name="服务标签"
-      :associate-config-show="true"
-      @update-option-data="getOptionData" />
+    <form-option ref="fileOptionRef" :associate-config-show="true" @update-option-data="getOptionData" />
     <div class="node-content">
       <span class="node-label">{{ $t('示例预览') }}</span>
       <div class="top-tip">
@@ -58,11 +54,8 @@
                   <li v-for="(rule, index) in optionData.rules" :key="index" class="label-li">
                     <div class="label-content">
                       <div class="input-wrap full">
-                        {{ basicInfo!.serviceName.value + rule }}
-                        <copy-shape
-                          class="icon-shape"
-                          v-show="rule"
-                          @click="copyText(basicInfo!.serviceName.value + rule)" />
+                        {{ rule }}
+                        <copy-shape class="icon-shape" v-show="rule" @click="copyText(rule)" />
                       </div>
                     </div>
                   </li>
@@ -71,7 +64,7 @@
               </div>
             </div>
           </bk-form-item>
-          <bk-form-item label="feedAddr：">
+          <bk-form-item :label="$t('服务feed-server地址：')">
             <span class="content-em" @click="copyText(feedAddr!)">
               {{ feedAddr }} <copy-shape class="icon-shape" />
             </span>

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,7 +53,7 @@
     </bk-form-item>
     <bk-form-item>
       <!-- 添加标签 -->
-      <AddLabel ref="addLabelRef" :label-name="labelName" @send-label="formData.labelArr = $event" />
+      <AddLabel ref="addLabelRef" @send-label="formData.labelArr = $event" />
     </bk-form-item>
     <!-- <bk-form-item v-if="p2pShow">
       由于集群列表接口暂不支持，产品将下拉框改为输入框，待后续接口支持后改回下拉框
@@ -101,14 +101,12 @@
   const props = withDefaults(
     defineProps<{
       directoryShow?: boolean;
-      labelName?: string;
       p2pShow?: boolean;
       httpConfigShow?: boolean;
       associateConfigShow?: boolean;
     }>(),
     {
       directoryShow: true,
-      labelName: '标签',
       p2pShow: false,
       httpConfigShow: false,
       associateConfigShow: false,

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
@@ -8,15 +8,10 @@
     <template #header>
       <div class="header-wrapper">
         <span>{{ sideSliderTitle }}</span>
-        <bk-popover
-          v-if="!props.isExampleMode"
-          placement="bottom-start"
-          theme="light"
-          trigger="click"
-          ext-cls="view-rule-wrap">
+        <bk-popover placement="bottom-start" theme="light" trigger="click" ext-cls="view-rule-wrap">
           <span class="view-rule">{{ t('查看规则示例') }}</span>
           <template #content>
-            <ViewRuleExample />
+            <ViewRuleExample :is-example-mode="props.isExampleMode" />
           </template>
         </bk-popover>
       </div>
@@ -42,7 +37,7 @@
           @edit="isRuleEdit = true" />
       </div>
       <div v-if="rules.length || isRuleEdit" class="results-wrapper">
-        <MatchingResult :rule="previewRule" :bk-biz-id="spaceId" />
+        <MatchingResult :rule="previewRule" :bk-biz-id="spaceId" :is-example-mode="props.isExampleMode" />
       </div>
     </section>
     <div class="action-btns">
@@ -53,7 +48,7 @@
         :disabled="saveBtnDisabled"
         v-bk-tooltips="{ content: '请先预览所有关联规则修改结果后，才能保存', disabled: !saveBtnDisabled }"
         @click="handleSave">
-        {{ t('保存') }}
+        {{ props.isExampleMode ? t('确定') : t('保存') }}
       </bk-button>
       <bk-button
         v-else
@@ -121,6 +116,9 @@
   onMounted(async () => {
     const resp = await getAppList(spaceId.value, { start: 0, all: true });
     appList.value = resp.details;
+    if (props.isExampleMode) {
+      handleOpenEdit();
+    }
   });
 
   const sideSliderTitle = computed(() => (props.isExampleMode ? t('配置文件筛选规则') : t('关联服务配置')));
@@ -212,6 +210,10 @@
     pending.value = false;
     emits('close');
   };
+
+  defineExpose({
+    handleOpenEdit,
+  });
 </script>
 <style lang="scss" scoped>
   .associate-config-items {

diff --git a/...rvices/bcs-bscp/ui/src/views/space/credentials/associate-config-items/matching-result.vue b/...rvices/bcs-bscp/ui/src/views/space/credentials/associate-config-items/matching-result.vue
@@ -5,7 +5,7 @@
         <bk-overflow-title v-if="rule" class="rule" type="tips">
           {{ rule.appName + rule.scopeContent }}
         </bk-overflow-title>
-        <span class="result">{{ t('匹配结果') }}</span>
+        <span class="result">{{ props.isExampleMode ? t('筛选结果') : t('匹配结果') }}</span>
       </div>
       <div class="totle">{{ t('共') }} {{ pagination.count }} {{ t('项') }}</div>
     </div>
@@ -19,7 +19,7 @@
         :pagination="pagination"
         :key="isFileType"
         @page-value-change="loadCredentialRulePreviewList">
-        <bk-table-column :label="isFileType ? t('配置文件名') : t('配置项')">
+        <bk-table-column :label="props.isExampleMode ? t('配置文件') : isFileType ? t('配置文件名') : t('配置项')">
           <template #default="{ row }">
             <div v-if="row.name">
               {{ isFileType ? fileAP(row) : row.name }}
@@ -54,6 +54,7 @@
   const props = defineProps<{
     rule: IPreviewRule | null;
     bkBizId: string;
+    isExampleMode: boolean;
   }>();
 
   const isFileType = ref(false);
@@ -78,9 +79,17 @@
     return `${path}/${name}`;
   });
 
-  const inputPlaceholder = computed(() => (isFileType.value ? t('请输入配置文件名') : t('请输入配置项名称')));
+  const inputPlaceholder = computed(() => {
+    if (props.isExampleMode) {
+      return t('请输入配置文件名称');
+    }
+    return isFileType.value ? t('请输入配置文件名') : t('请输入配置项名称');
+  });
 
   const tableEmptyText = computed(() => {
+    if (props.isExampleMode) {
+      return t('请先在左侧表单设置筛选规则并预览');
+    }
     return props.rule?.appName ? t('没有匹配到配置项') : t('请先在左侧表单设置关联规则并预览');
   });