feat: 键值型（KV）新增“导出至”功能--story=115743563 (#2957)

* feat: 键值型（KV）新增“导出至”功能--story=115743563

* feat：替换icon图标

* fix: 调整配置文件绝对路径校验，文件名不能为空

bcs-services/bcs-bscp/ui/src/api/config.ts

@@ -479,4 +479,14 @@ export const undeleteKv = (bizId: string, appId: number, key: string) =>
  * @returns
  */
 export const batchImportKvFile = (bizId: string, appId: number, File: any) =>
-  http.post(`biz/${bizId}/apps/${appId}/kvs/import`, File);
+  http.post(`/biz/${bizId}/apps/${appId}/kvs/import`, File);
+
+/**
+ * 导出kv配置文件
+ * @param bizId 业务ID
+ * @param appId 应用ID
+ * @param releaseId 发布版本ID
+ * @returns
+ */
+export const getExportKvFile = (bizId: string, appId: number, releaseId: number, format: string) =>
+  http.get(`biz/${bizId}/apps/${appId}/releases/${releaseId}/kvs/export`, { params: { format } });

bcs-services/bcs-bscp/ui/src/i18n/en-us.ts

@@ -333,6 +333,7 @@ export default {
   '解析失败，配置项格式不正确': 'Parsing failed because the configuration item format is incorrect',
   请选择: 'Please select',
   配置项值已复制: 'The configuration item value has been copied',
+  导出至: 'Export to',
 
   // 分组管理
   新增分组: 'New group',

bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts

@@ -331,9 +331,10 @@ export default {
   文件导入成功: '文件导入成功',
   文本导入成功: '文本导入成功',
   '解析失败，配置项格式不正确': '解析失败，配置项格式不正确',
-
   请选择: '请选择',
   配置项值已复制: '配置项值已复制',
+  导出至: '导出至',
+
   // 分组管理
   新增分组: '新增分组',
   按标签分类查看: '按标签分类查看',

bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/config-export.vue

@@ -0,0 +1,89 @@
+<template>
+  <bk-popover :arrow="false" placement="bottom-start" theme="light export-config-button-popover">
+    <bk-button>{{ $t('导出至') }}</bk-button>
+    <template #content>
+      <div class="export-config-operations">
+        <div v-for="item in exportItem" :key="item.value" class="operation-item">
+          <span :class="['bk-bscp-icon', `icon-${item.value}`]" />
+          <span class="text" @click="handleExport(item.value)"> {{ item.text }}</span>
+        </div>
+      </div>
+    </template>
+  </bk-popover>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import jsyaml from 'js-yaml';
+  import { getExportKvFile } from '../../../../../../../api/config';
+  const props = defineProps<{
+    bkBizId: string;
+    appId: number;
+    verisionId: number;
+  }>();
+
+  const exportItem = computed(() => [
+    {
+      text: 'JSON',
+      value: 'json',
+    },
+    {
+      text: 'YAML',
+      value: 'yaml',
+    },
+  ]);
+
+  const handleExport = async (type: string) => {
+    const res = await getExportKvFile(props.bkBizId, props.appId, props.verisionId, type);
+    let content: string;
+    let mimeType: string;
+    let extension: string;
+    if (type === 'json') {
+      content = JSON.stringify(res, null, 2);
+      mimeType = 'application/json';
+      extension = 'json';
+    } else {
+      content = jsyaml.dump(res);
+      mimeType = 'text/yaml';
+      extension = 'yaml';
+    }
+    downloadFile(content, mimeType, `data.${extension}`);
+  };
+
+  const downloadFile = (content: string, mimeType: string, fileName: string) => {
+    const blob = new Blob([content], { type: mimeType });
+    const downloadUrl = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = downloadUrl;
+    link.download = fileName;
+    link.click();
+    URL.revokeObjectURL(downloadUrl);
+  };
+</script>
+
+<style lang="scss">
+  .export-config-button-popover.bk-popover.bk-pop2-content {
+    padding: 4px 0;
+    border: 1px solid #dcdee5;
+    box-shadow: 0 2px 6px 0 #0000001a;
+    .export-config-operations {
+      .operation-item {
+        padding: 0 12px;
+        min-width: 100px;
+        height: 32px;
+        line-height: 32px;
+        color: #63656e;
+        font-size: 14px;
+        align-items: center;
+        cursor: pointer;
+        &:hover {
+          background: #f5f7fa;
+        }
+        .text {
+          margin-left: 4px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+</style>

bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue

@@ -184,7 +184,7 @@
     fileAP: [
       {
         validator: (val: string) =>
-          /^\/([\u4e00-\u9fa5A-Za-z0-9_\-#%,@^+=[\]{}]+[\u4e00-\u9fa5A-Za-z0-9_\-#%,.@^+=[\]{}]*\/?)*$/.test(val),
+          /^\/([\u4e00-\u9fa5A-Za-z0-9_\-#%,@^+=[\]{}]+[\u4e00-\u9fa5A-Za-z0-9_\-#%,.@^+=[\]{}]*\/?)*[^/]$/.test(val),
         message: t('无效的路径,路径不符合Unix文件路径格式规范'),
         trigger: 'change',
       },

bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/index.vue

@@ -16,8 +16,17 @@
           :bk-biz-id="props.bkBizId"
           :app-id="props.appId"
           :verision-id="versionData.id" />
+        <ConfigExport
+          v-if="!isFileType"
+          :bk-biz-id="props.bkBizId"
+          :app-id="props.appId"
+          :verision-id="versionData.id" />
       </div>
-      <SearchInput v-model="searchStr" class="config-search-input" :width="280" :placeholder="t('配置文件名/创建人/修改人')" />
+      <SearchInput
+        v-model="searchStr"
+        class="config-search-input"
+        :width="280"
+        :placeholder="t('配置文件名/创建人/修改人')" />
     </div>
     <section class="config-list-table">
       <template v-if="isFileType">
@@ -59,6 +68,7 @@
   import TableWithTemplates from './tables/table-with-templates.vue';
   import TableWithPagination from './tables/table-with-pagination.vue';
   import TableWithKv from './tables/table-with-kv.vue';
+  import ConfigExport from './config-export.vue';
 
   const configStore = useConfigStore();
   const serviceStore = useServiceStore();