feat: 配置模板支持单个文件下载

bcs-services/bcs-bscp/ui/src/components/diff/file.vue

@@ -65,7 +65,7 @@
     const { signature, name } = config;
     const getConfigContent = props.isTpl ? downloadTemplateContent : downloadConfigContent;
     const res = await getConfigContent(bkBizId, props.id, signature);
-    fileDownload(res, `${name}.bin`);
+    fileDownload(res, name);
   };
 </script>
 <style lang="scss" scoped>

bcs-services/bcs-bscp/ui/src/utils/hooks/use-download-template-config.ts

@@ -0,0 +1,5 @@
+import { getTemplateVersionsNameByIds } from '../../api/template';
+
+const useDownloadTemplateConfig = () => {};
+
+export default useDownloadTemplateConfig;

bcs-services/bcs-bscp/ui/src/views/space/service/detail/components/publish-version/index.vue

@@ -121,6 +121,7 @@
           list.push(version);
           return true;
         }
+        return false;
       });
     });
     return list;

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

@@ -1,7 +1,11 @@
 <template>
   <bk-form ref="formRef" form-type="vertical" :model="localVal" :rules="rules">
     <bk-form-item :label="t('配置文件绝对路径')" property="fileAP" :required="true">
-      <bk-input v-model="localVal.fileAP" :placeholder="t('请输入配置文件的绝对路径')" :disabled="!editable" @input="change" />
+      <bk-input
+        v-model="localVal.fileAP"
+        :placeholder="t('请输入配置文件的绝对路径')"
+        :disabled="!editable"
+        @input="change" />
     </bk-form-item>
     <bk-form-item :label="t('配置文件描述')" property="memo">
       <bk-input
@@ -347,7 +351,7 @@
     const { signature, name } = fileContent.value as IFileConfigContentSummary;
     const getContent = props.isTpl ? downloadTemplateContent : downloadConfigContent;
     const res = await getContent(props.bkBizId, props.id, signature);
-    fileDownload(res, `${name}.bin`);
+    fileDownload(res, name);
   };
 
   const validate = async () => {

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

@@ -35,40 +35,33 @@
     let signature;
     let content;
     let fileName;
-    let fileType;
     pending.value = true;
     if (props.type === 'config') {
       let res;
       if (versionData.value.id) {
         res = await getReleasedConfigItemDetail(props.bkBizId, props.appId, versionData.value.id, props.id);
-        signature = res.config_item.commit_spec.content.origin_signature;
+        signature = res.config_item.commit_spec.content.signature;
       } else {
         res = await getConfigItemDetail(props.bkBizId, props.id, props.appId);
         signature = res.content.signature;
       }
       fileName = res.config_item.spec.name;
-      fileType = res.config_item.spec.file_type;
       content = await downloadConfigContent(props.bkBizId, props.appId, signature);
     } else {
       let templateSpaceId;
       if (versionData.value.id) {
         const res = await getTemplateVersionDetail(props.bkBizId, props.appId, versionData.value.id, props.id);
-        signature = res.detail.origin_signature;
+        signature = res.detail.signature;
         fileName = res.detail.name;
-        fileType = res.detail.file_type;
         templateSpaceId = res.detail.template_space_id;
       } else {
         const res = await getTemplateVersionsDetailByIds(props.bkBizId, [props.id]);
         signature = res.details[0].spec.content_spec.signature;
         fileName = res.details[0].spec.name;
-        fileType = res.details[0].spec.file_type;
         templateSpaceId = res.details[0].attachment.template_space_id;
       }
       content = await downloadTemplateContent(props.bkBizId, templateSpaceId, signature);
     }
-    if (fileType === 'binary') {
-      fileName += '.bin';
-    }
     fileDownload(content, fileName);
 
     pending.value = false;

bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/operations/download-config/download-config.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="download-config" @click="handleDownload">
+    <slot>
+      <bk-button text :theme="props.theme" :loading="pending">{{ $t('下载') }}</bk-button>
+    </slot>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { getTemplateVersionsNameByIds, downloadTemplateContent } from '../../../../../../../api/template';
+  import { fileDownload } from '../../../../../../../utils/file';
+
+  const props = withDefaults(
+    defineProps<{
+      spaceId: string;
+      templateSpaceId: number;
+      templateId: number;
+      theme: string;
+    }>(),
+    {
+      theme: 'primary',
+    },
+  );
+
+  const pending = ref(false);
+
+  const handleDownload = async () => {
+    if (pending.value) return;
+    try {
+      pending.value = true;
+      const res = await getTemplateVersionsNameByIds(props.spaceId, [props.templateId]);
+      const { template_name, latest_signature } = res.details[0];
+      const content = await downloadTemplateContent(props.spaceId, props.templateSpaceId, latest_signature);
+      fileDownload(content, template_name);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      pending.value = false;
+    }
+  };
+</script>

bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/tables/common-config-table.vue

@@ -79,7 +79,7 @@
             </template>
           </template>
         </bk-table-column>
-        <bk-table-column :label="t('操作')" :width="locale === 'zh-CN' ? '140' : '200'" fixed="right">
+        <bk-table-column :label="t('操作')" :width="locale === 'zh-CN' ? '160' : '200'" fixed="right">
           <template #default="{ row, index }">
             <div class="actions-wrapper">
               <slot name="columnOperations" :config="row">
@@ -102,6 +102,12 @@
                         @click="handleOpenMoveOutFromPkgsDialog(row)">
                         {{ t('移出套餐') }}
                       </div>
+                      <DownloadConfig
+                        class="action-item"
+                        theme="default"
+                        :space-id="spaceId"
+                        :template-space-id="currentTemplateSpace"
+                        :template-id="row.id" />
                     </div>
                   </template>
                 </bk-popover>
@@ -134,6 +140,7 @@
   import { useRouter } from 'vue-router';
   import { storeToRefs } from 'pinia';
   import { Ellipsis, Search, Spinner } from 'bkui-vue/lib/icon';
+  import { debounce } from 'lodash';
   import useGlobalStore from '../../../../../../store/global';
   import useTemplateStore from '../../../../../../store/template';
   import { ICommonQuery } from '../../../../../../../types/index';
@@ -149,7 +156,7 @@
   import PkgsTag from '../../components/packages-tag.vue';
   import AppsBoundByTemplate from '../apps-bound-by-template.vue';
   import TableEmpty from '../../../../../../components/table/table-empty.vue';
-  import { debounce } from 'lodash';
+  import DownloadConfig from '../operations/download-config/download-config.vue';
 
   const router = useRouter();
   const { t, locale } = useI18n();

bcs-services/bcs-bscp/ui/src/views/space/templates/list/package-detail/tables/config-without-package.vue

@@ -15,8 +15,15 @@
         @deleted="handleConfigsDeleted" />
     </template>
     <template #columnOperations="{ config }">
-      <bk-button theme="primary" text @click="handleAddToPkgsClick(config)">{{ t('添加至') }}</bk-button>
-      <bk-button class="delete-btn" theme="primary" text @click="handleDeleteClick(config)">{{ t('删除') }}</bk-button>
+      <bk-button class="opt-btn" theme="primary" text @click="handleAddToPkgsClick(config)">
+        {{ t('添加至') }}
+      </bk-button>
+      <bk-button class="opt-btn" theme="primary" text @click="handleDeleteClick(config)">{{ t('删除') }}</bk-button>
+      <DownloadConfig
+        class="opt-btn"
+        :space-id="spaceId"
+        :template-space-id="currentTemplateSpace"
+        :template-id="config.id" />
     </template>
   </CommonConfigTable>
   <AddToDialog v-model:show="isAddToPkgsDialogShow" :value="selectedConfigs" @added="refreshConfigList" />
@@ -39,6 +46,7 @@
   import AddToDialog from '../operations/add-to-pkgs/add-to-dialog.vue';
   import DeleteConfigs from '../operations/delete-configs/delete-button.vue';
   import DeleteConfigDialog from '../operations/delete-configs/delete-config-dialog.vue';
+  import DownloadConfig from '../operations/download-config/download-config.vue';
 
   const { spaceId } = storeToRefs(useGlobalStore());
   const templateStore = useTemplateStore();
@@ -83,7 +91,7 @@
   };
 </script>
 <style lang="scss" scoped>
-  .delete-btn {
+  .opt-btn:not(:first-child) {
     margin-left: 16px;
   }
 </style>

bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-detail/version-editor.vue

@@ -263,7 +263,7 @@
   const handleDownloadFile = async () => {
     const { signature, name } = fileContent.value as IFileConfigContentSummary;
     const res = await downloadTemplateContent(props.spaceId, props.templateSpaceId, signature);
-    fileDownload(String(res), `${name}.bin`);
+    fileDownload(String(res), name);
   };
 
   const validate = async () => {

bcs-services/bcs-bscp/ui/src/views/space/templates/version-manage/version-full-table.vue

@@ -119,10 +119,9 @@
   };
 
   const handleDownload = async (version: ITemplateVersionItem) => {
-    const { name, file_type, revision_name, content_spec } = version.spec;
+    const { name, revision_name, content_spec } = version.spec;
     const content = await downloadTemplateContent(props.spaceId, props.templateSpaceId, content_spec.signature);
-    const fileName = file_type === 'binary' ? `${name}(${revision_name}).bin` : `${name}(${revision_name})`;
-    fileDownload(content, fileName);
+    fileDownload(content, `${name}_${revision_name}`);
   };
 
   // const handleDeleteVersion = (version: ITemplateVersionItem) => {