diff --git a/bcs-services/bcs-bscp/ui/src/api/config.ts b/bcs-services/bcs-bscp/ui/src/api/config.ts
index 07fd208276..c62ab5bd17 100644
--- a/bcs-services/bcs-bscp/ui/src/api/config.ts
+++ b/bcs-services/bcs-bscp/ui/src/api/config.ts
@@ -127,7 +127,13 @@ export const getReleasedConfigItemDetail = (
  * @param signature 文件内容的SHA256值
  * @returns
  */
-export const updateConfigContent = (bizId: string, appId: number, data: string | File, signature: string) =>
+export const updateConfigContent = (
+  bizId: string,
+  appId: number,
+  data: string | File,
+  signature: string,
+  progress?: Function,
+) =>
   http
     .put(`/biz/${bizId}/content/upload`, data, {
       headers: {
@@ -136,6 +142,12 @@ export const updateConfigContent = (bizId: string, appId: number, data: string |
         'X-Bkapi-File-Content-Overwrite': 'false',
         'Content-Type': 'text/plain',
       },
+      onUploadProgress: (progressEvent: any) => {
+        if (progress) {
+          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+          progress(percentCompleted);
+        }
+      },
     })
     .then((res) => res.data);
 
diff --git a/bcs-services/bcs-bscp/ui/src/api/template.ts b/bcs-services/bcs-bscp/ui/src/api/template.ts
index ff6f6fbfd8..f6d4a063d4 100644
--- a/bcs-services/bcs-bscp/ui/src/api/template.ts
+++ b/bcs-services/bcs-bscp/ui/src/api/template.ts
@@ -224,6 +224,7 @@ export const updateTemplateContent = (
   templateSpaceId: number,
   data: string | File,
   signature: string,
+  progress?: Function,
 ) =>
   http
     .put(`/biz/${biz_id}/content/upload`, data, {
@@ -233,6 +234,12 @@ export const updateTemplateContent = (
         'X-Bkapi-File-Content-Overwrite': 'false',
         'Content-Type': 'text/plain',
       },
+      onUploadProgress: (progressEvent: any) => {
+        if (progress) {
+          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+          progress(percentCompleted);
+        }
+      },
     })
     .then((res) => res.data);
 
@@ -641,3 +648,13 @@ export const importTemplateBatchAdd = (biz_id: string, template_space_id: number
  */
 export const batchEditTemplatePermission = (biz_id: string, query: any) =>
   http.post(`/config/biz/${biz_id}/templates/batch_update_templates_permissions`, query);
+
+/**
+ * 批量修改模板权限
+ * @param biz_id 业务ID
+ * @param template_id 模板id
+ * @param revision_name 版本名称
+ * @returns
+ */
+export const getTemplateConfigMeta = (biz_id: string, template_id: number, revision_name?: string) =>
+  http.get(`/config/biz/${biz_id}/templates/${template_id}/template_revisions`, { params: { revision_name } });
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue
index 79206145c0..1455306cff 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-simple-list/config-list-with-templates.vue
@@ -16,7 +16,7 @@
             v-for="config in group.configs"
             :class="['config-item', { disabled: config.file_state === 'DELETE' }]"
             :key="config.id"
-            @click="handleConfigClick(config, group.id)">
+            @click="handleConfigClick(config, group)">
             <bk-overflow-title class="config-name" type="tips">
               {{ fileAP(config) }}
             </bk-overflow-title>
@@ -36,7 +36,8 @@
       v-bind="viewConfigSliderData.data"
       :bk-biz-id="props.bkBizId"
       :app-id="props.appId"
-      :version-id="versionData.id" />
+      :version-id="versionData.id"
+      @open-edit="handleOpenEdit" />
   </section>
 </template>
 <script setup lang="ts">
@@ -64,6 +65,10 @@
     name: string;
     expand: boolean;
     configs: IConfigTableItem[];
+    template_space_id?: number;
+    template_space_name?: string;
+    template_set_id?: number;
+    template_set_name?: string;
   }
 
   interface IConfigTableItem {
@@ -79,6 +84,13 @@
     file_state: string;
   }
 
+  interface ITemplateConfigMeta {
+    template_space_id: number;
+    template_space_name: string;
+    template_set_id: number;
+    template_set_name: string;
+  }
+
   const store = useConfigStore();
   const { versionData } = storeToRefs(store);
   const { t } = useI18n();
@@ -100,9 +112,20 @@
     open: false,
     id: 0,
   });
-  const viewConfigSliderData = ref({
+  const viewConfigSliderData = ref<{
+    open: boolean;
+    data: {
+      id: number;
+      type: string;
+      templateMeta?: ITemplateConfigMeta;
+      versionName?: string;
+    };
+  }>({
     open: false,
-    data: { id: 0, type: '' },
+    data: {
+      id: 0,
+      type: '',
+    },
   });
 
   watch(
@@ -221,9 +244,14 @@
   // 将模板按套餐分组，并将模板数据格式转为表格数据
   const groupTplsByPkg = (list: IBoundTemplateGroup[]) => {
     const groups: IConfigsGroupData[] = list.map((groupItem) => {
-      const { template_space_name, template_set_id, template_set_name, template_revisions } = groupItem;
+      const { template_space_name, template_set_id, template_set_name, template_revisions, template_space_id } =
+        groupItem;
       const group: IConfigsGroupData = {
         id: template_set_id,
+        template_set_id,
+        template_set_name,
+        template_space_name,
+        template_space_id,
         name: `${template_space_name} - ${template_set_name}`,
         expand: false,
         configs: [],
@@ -257,20 +285,32 @@
     return groups;
   };
 
-  const handleConfigClick = (config: IConfigTableItem, groupId: number) => {
-    if (isUnNamedVersion.value && groupId === 0) {
-      editConfigSliderData.value = {
+  const handleConfigClick = (config: IConfigTableItem, group: IConfigsGroupData) => {
+    const id = group.id === 0 ? config.id : config.versionId;
+    if (group.id === 0) {
+      viewConfigSliderData.value = {
         open: true,
-        id: config.id,
+        data: { id, type: 'config' },
       };
     } else {
-      const id = groupId === 0 ? config.id : config.versionId;
-      const type = groupId === 0 ? 'config' : 'template';
+      const { template_set_id, template_space_id, template_set_name, template_space_name } = group;
+      const templateMeta = { template_space_id, template_space_name, template_set_id, template_set_name };
       viewConfigSliderData.value = {
         open: true,
-        data: { id, type },
+        data: {
+          id,
+          versionName: config.versionName,
+          templateMeta: templateMeta as ITemplateConfigMeta,
+          type: 'template',
+        },
       };
     }
+    editConfigSliderData.value.id = id;
+  };
+
+  const handleOpenEdit = () => {
+    viewConfigSliderData.value.open = false;
+    editConfigSliderData.value.open = true;
   };
 
   const clearSearch = () => {
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue
index e8b73af379..b3c386651d 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/config-form.vue
@@ -91,19 +91,39 @@
         :files="fileList"
         :custom-request="handleFileUpload">
         <template #file="{ file }">
-          <div style="width: 100%">
-            <div class="file-wrapper">
-              <div class="status-icon-area">
-                <Done v-if="file.status === 'success'" class="success-icon" />
-                <Error v-if="file.status === 'fail'" class="error-icon" />
-              </div>
+          <bk-loading
+            mode="spin"
+            theme="primary"
+            :opacity="0.6"
+            size="mini"
+            :title="t('文件下载中，请稍后')"
+            :loading="fileDownloading"
+            class="file-down-loading">
+            <div class="file-wrapper" @click="handleDownloadFile">
               <TextFill class="file-icon" />
-              <div class="name" :title="file.name" @click="handleDownloadFile">{{ file.name }}</div>
-              ({{ file.status === 'fail' ? byteUnitConverse(file.size) : file.size }})
+              <div class="file-content">
+                <div class="name" :title="file.name">{{ file.name }}</div>
+                <div v-if="uploadProgress.status === 'uploading'">
+                  <bk-progress
+                    :percent="uploadProgress.percent"
+                    :theme="file.status === 'fail' ? 'danger' : 'primary'"
+                    size="small"
+                    :show-text="false" />
+                </div>
+                <div v-else :class="[file.status === 'success' ? 'success-text' : 'error-text', 'status-icon-area']">
+                  <Done v-if="file.status === 'success'" class="success-icon" />
+                  <Error v-if="file.status === 'fail'" class="error-icon" />
+                  <span :class="[file.status === 'success' ? 'success-text' : 'error-text']">
+                    {{ file.status === 'success' ? t('上传成功') : `${t('上传失败')} ${file.statusText}` }}
+                  </span>
+                </div>
+              </div>
+              <span class="size">
+                ({{ file.status === 'fail' ? byteUnitConverse(file.size) : file.size }})
+                <span v-if="uploadProgress.status === 'uploading'">{{ `${uploadProgress.percent}%` }}</span>
+              </span>
             </div>
-            <div :class="{ 'progress-bar': uploadPending }"></div>
-            <div v-if="file.status === 'fail'" class="error-msg">{{ file.statusText }}</div>
-          </div>
+          </bk-loading>
         </template>
       </bk-upload>
     </bk-form-item>
@@ -181,8 +201,12 @@
   const stringContent = ref('');
   const fileContent = ref<IFileConfigContentSummary | File>();
   const isFileChanged = ref(false); // 标识文件是否被修改，编辑配置文件时若文件未修改，不重新上传文件
-  const uploadPending = ref(false);
   const formRef = ref();
+  const uploadProgress = ref({
+    percent: 0,
+    status: '',
+  });
+  const fileDownloading = ref(false);
   const rules = {
     // 配置文件绝对路径校验规则，path+filename
     fileAP: [
@@ -345,25 +369,45 @@
   const handleFileUpload = (option: { file: File }) => {
     isFileChanged.value = true;
     return new Promise((resolve) => {
-      uploadPending.value = true;
       emits('update:fileUploading', true);
       fileContent.value = option.file;
-      uploadContent().then((res) => {
-        uploadPending.value = false;
-        emits('update:fileUploading', false);
-        change();
-        resolve(res);
-      });
+      uploadContent()
+        .then((res) => {
+          emits('update:fileUploading', false);
+          change();
+          resolve(res);
+        })
+        .finally(() => {
+          uploadProgress.value.status = 'success';
+          uploadProgress.value.percent = 0;
+        });
     });
   };
 
   // 上传配置内容
   const uploadContent = async () => {
+    uploadProgress.value.status = 'uploading';
     const signature = await getSignature();
     if (props.isTpl) {
-      return updateTemplateContent(props.bkBizId, props.id, fileContent.value as File, signature as string);
+      return updateTemplateContent(
+        props.bkBizId,
+        props.id,
+        fileContent.value as File,
+        signature as string,
+        (progress: number) => {
+          uploadProgress.value.percent = progress;
+        },
+      );
     }
-    return updateConfigContent(props.bkBizId, props.id, fileContent.value as File, signature as string);
+    return updateConfigContent(
+      props.bkBizId,
+      props.id,
+      fileContent.value as File,
+      signature as string,
+      (progress: number) => {
+        uploadProgress.value.percent = progress;
+      },
+    );
   };
 
   // 生成文件或文本的sha256
@@ -388,10 +432,18 @@
 
   // 下载已上传文件
   const handleDownloadFile = async () => {
-    const { signature, name } = fileContent.value as IFileConfigContentSummary;
-    const getContent = props.isTpl ? downloadTemplateContent : downloadConfigContent;
-    const res = await getContent(props.bkBizId, props.id, signature, true);
-    fileDownload(res, name);
+    if (uploadProgress.value.status === 'uploading' || !props.isEdit) return;
+    try {
+      fileDownloading.value = true;
+      const { signature, name } = fileContent.value as IFileConfigContentSummary;
+      const getContent = props.isTpl ? downloadTemplateContent : downloadConfigContent;
+      const res = await getContent(props.bkBizId, props.id, signature, true);
+      fileDownload(res, name);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      fileDownloading.value = false;
+    }
   };
 
   const validate = async () => {
@@ -502,55 +554,57 @@
     }
   }
   .config-uploader {
-    :deep(.bk-upload-list__item) {
-      padding: 0;
-      border: none;
-    }
     :deep(.bk-upload-list--disabled .bk-upload-list__item) {
       pointer-events: inherit;
     }
     .file-wrapper {
+      position: relative;
       display: flex;
       align-items: center;
       color: #979ba5;
       font-size: 12px;
+      line-height: 12px;
+      width: 100%;
+      cursor: pointer;
+      &:hover .name {
+        color: #3a84ff;
+      }
+      .file-content {
+        width: 400px;
+      }
       .status-icon-area {
         display: flex;
-        width: 20px;
-        height: 100%;
         align-items: center;
-        justify-content: center;
+        &.success-text {
+          color: #2dcb56;
+        }
+        &.error-text {
+          color: #ea3636;
+        }
         .success-icon {
           font-size: 20px;
-          color: #2dcb56;
         }
         .error-icon {
           font-size: 14px;
-          color: #ea3636;
         }
       }
       .file-icon {
         margin: 0 6px 0 0;
+        font-size: 32px;
       }
       .name {
         max-width: 360px;
-        margin-right: 4px;
-        color: #63656e;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        cursor: pointer;
-        &:hover {
-          color: #3a84ff;
-          text-decoration: underline;
-        }
+        line-height: normal;
+      }
+      .size {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
       }
-    }
-    .error-msg {
-      padding: 0 0 10px 38px;
-      line-height: 1;
-      font-size: 12px;
-      color: #ff5656;
     }
   }
   .config-content-label {
@@ -560,18 +614,17 @@
       margin-right: 5px;
     }
   }
-  .progress-bar {
-    width: 0;
-    height: 2px;
-    background-color: #3a84ff;
-    animation: progressAnimation 1s ease-in-out forwards;
-  }
-  @keyframes progressAnimation {
-    from {
-      width: 0;
-    }
-    to {
-      width: 100%;
+  .file-down-loading {
+    width: 100%;
+    :deep(.bk-loading-indicator) {
+      align-items: center;
+      flex-direction: row;
+      .bk-loading-title {
+        margin-top: 0px;
+        margin-left: 8px;
+        color: #979ba5;
+        font-size: 12px;
+      }
     }
   }
 </style>
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/manual-create.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/manual-create.vue
index eb7619770e..2ab1023808 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/manual-create.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/create-config/manual-create.vue
@@ -102,7 +102,7 @@
       } else {
         const stringContent = content.value as string;
         size = new Blob([stringContent]).size;
-        await updateConfigContent(props.bkBizId, props.appId, stringContent, sign);
+        await updateConfigContent(props.bkBizId, props.appId, stringContent, sign, () => {});
       }
       const params = { ...configForm.value, ...{ sign, byte_size: size } };
       const res = await createServiceConfigItem(props.appId, props.bkBizId, params);
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
index 563b345f9f..ebb21db084 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/tables/table-with-templates.vue
@@ -75,7 +75,7 @@
                                   () => {
                                     hasEditServicePerm &&
                                       config.file_state !== 'DELETE' &&
-                                      handleViewConfig(config.id, 'config');
+                                      handleViewConfig(config.id);
                                   }
                                 ">
                                 {{ fileAP(config) }}
@@ -85,7 +85,7 @@
                                 :class="['file-name-btn', { disabled: config.file_state === 'DELETE' }]"
                                 @click="
                                   () => {
-                                    config.file_state !== 'DELETE' && handleViewConfig(config.id, 'config');
+                                    config.file_state !== 'DELETE' && handleViewConfig(config.id);
                                   }
                                 ">
                                 {{ fileAP(config) }}
@@ -96,7 +96,7 @@
                               :class="['file-name-btn', { disabled: config.file_state === 'DELETE' }]"
                               @click="
                                 () => {
-                                  config.file_state !== 'DELETE' && handleViewConfig(config.versionId, 'template');
+                                  config.file_state !== 'DELETE' && handleViewTemplateConfig(config, group);
                                 }
                               ">
                               {{ fileAP(config) }}
@@ -163,7 +163,7 @@
                                 </bk-button>
                               </template>
                               <template v-else>
-                                <bk-button text theme="primary" @click="handleViewConfig(config.id, 'config')">
+                                <bk-button text theme="primary" @click="handleViewConfig(config.id)">
                                   {{ t('查看') }}
                                 </bk-button>
                                 <bk-button
@@ -192,7 +192,7 @@
                                 {{ t('替换版本') }}
                               </bk-button>
                               <template v-else>
-                                <bk-button text theme="primary" @click="handleViewConfig(config.versionId, 'template')">
+                                <bk-button text theme="primary" @click="handleViewTemplateConfig(config, group)">
                                   {{ t('查看') }}
                                 </bk-button>
                                 <bk-button
@@ -317,6 +317,10 @@
     name: string;
     expand: boolean;
     configs: IConfigTableItem[];
+    template_space_id?: number;
+    template_space_name?: string;
+    template_set_id?: number;
+    template_set_name?: string;
   }
 
   interface IPermissionType {
@@ -340,6 +344,13 @@
     is_latest?: boolean;
   }
 
+  interface ITemplateConfigMeta {
+    template_space_id: number;
+    template_space_name: string;
+    template_set_id: number;
+    template_set_name: string;
+  }
+
   const { t } = useI18n();
   const configStore = useConfigStore();
   const serviceStore = useServiceStore();
@@ -377,9 +388,20 @@
   const deleteTemplatePkgName = ref('');
   const deleteTemplatePkgId = ref(0);
   const statusFilterChecked = ref<string[]>([]);
-  const viewConfigSliderData = ref({
+  const viewConfigSliderData = ref<{
+    open: boolean;
+    data: {
+      id: number;
+      type: string;
+      templateMeta?: ITemplateConfigMeta;
+      versionName?: string;
+    };
+  }>({
     open: false,
-    data: { id: 0, type: '' },
+    data: {
+      id: 0,
+      type: '',
+    },
   });
   const replaceDialogData = ref({
     open: false,
@@ -611,9 +633,14 @@
   // 将模板按套餐分组，并将模板数据格式转为表格数据
   const groupTplsByPkg = (list: IBoundTemplateGroup[]) => {
     const groups: IConfigsGroupData[] = list.map((groupItem) => {
-      const { template_space_name, template_set_id, template_set_name, template_revisions } = groupItem;
+      const { template_space_name, template_set_id, template_set_name, template_revisions, template_space_id } =
+        groupItem;
       const group: IConfigsGroupData = {
         id: template_set_id,
+        template_set_id,
+        template_set_name,
+        template_space_name,
+        template_space_id,
         name: `${template_space_name} - ${template_set_name}`,
         expand: true,
         configs: [],
@@ -694,11 +721,22 @@
     emits('deleteConfig');
   };
 
-  // 查看配置文件或模板版本
-  const handleViewConfig = (id: number, type: string) => {
+  // 查看配置文件
+  const handleViewConfig = (id: number) => {
+    viewConfigSliderData.value = {
+      open: true,
+      data: { id, type: 'config' },
+    };
+  };
+
+  // 查看配置模板版本
+  const handleViewTemplateConfig = (config: IConfigTableItem, group: IConfigsGroupData) => {
+    const { id, versionName } = config;
+    const { template_set_id, template_space_id, template_set_name, template_space_name } = group;
+    const templateMeta = { template_space_id, template_space_name, template_set_id, template_set_name };
     viewConfigSliderData.value = {
       open: true,
-      data: { id, type },
+      data: { id, versionName, templateMeta: templateMeta as ITemplateConfigMeta, type: 'template' },
     };
   };
 
diff --git a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config.vue b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config.vue
index 6529a416d6..861dde354b 100644
--- a/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config.vue
+++ b/bcs-services/bcs-bscp/ui/src/views/space/service/detail/config/config-list/config-table-list/view-config.vue
@@ -75,7 +75,7 @@
     downloadConfigContent,
   } from '../../../../../../../api/config';
   import {
-    getTemplateVersionsDetailByIds,
+    getTemplateConfigMeta,
     getTemplateVersionDetail,
     downloadTemplateContent,
   } from '../../../../../../../api/template';
@@ -86,7 +86,18 @@
   import { getReleasedAppVariables } from '../../../../../../../api/variable';
   import useConfigStore from '../../../../../../../store/config';
 
+  interface ITemplateConfigMeta {
+    template_space_id: number;
+    template_space_name: string;
+    template_set_id: number;
+    template_set_name: string;
+  }
+
   interface IConfigMeta {
+    template_space_id?: number;
+    template_space_name?: string;
+    template_set_id?: number;
+    template_set_name?: string;
     name: string;
     path: string;
     file_mode: string;
@@ -118,6 +129,8 @@
     versionId: number;
     type: string; // 取值为config/template，分别表示非模板套餐下配置文件和模板套餐下配置文件
     show: Boolean;
+    templateMeta?: ITemplateConfigMeta;
+    versionName?: string;
   }>();
 
   const emits = defineEmits(['update:show', 'openEdit']);
@@ -257,65 +270,20 @@
       let template_space_id;
       if (versionData.value.id) {
         const res = await getTemplateVersionDetail(props.bkBizId, props.appId, versionData.value.id, props.id);
-        const {
-          name,
-          path,
-          file_type,
-          file_mode,
-          revision_memo,
-          revision_version,
-          byte_size,
-          signature,
-          origin_signature,
-          md5,
-          create_at,
-          creator,
-          user,
-          user_group,
-          privilege,
-        } = res.detail;
         configDetail.value = {
-          name,
-          path,
-          file_type,
-          file_mode,
-          revision_memo,
-          revision_version,
-          byte_size,
-          signature,
-          origin_signature,
-          md5,
-          create_at: datetimeFormat(create_at),
-          creator,
-          user,
-          user_group,
-          privilege,
+          ...res.detail,
+          create_at: datetimeFormat(res.detail.create_at),
+          update_at: datetimeFormat(res.detail.update_at),
         };
         template_space_id = res.detail.template_space_id;
       } else {
-        const res = await getTemplateVersionsDetailByIds(props.bkBizId, [props.id]);
-        const { revision, spec } = res.details[0];
-        const { creator, create_at } = revision;
-        const { content_spec, file_mode, file_type, name, revision_memo, revision_version, path, permission } = spec;
-        const { byte_size, signature, md5 } = content_spec;
-        const { user, user_group, privilege } = permission;
-        template_space_id = res.details[0].attachment?.template_space_id;
+        const res = await getTemplateConfigMeta(props.bkBizId, props.id, props.versionName);
         configDetail.value = {
-          name,
-          path,
-          file_type,
-          file_mode,
-          revision_memo,
-          revision_version,
-          byte_size,
-          signature,
-          md5,
-          create_at: datetimeFormat(create_at),
-          creator,
-          user,
-          user_group,
-          privilege,
+          ...props.templateMeta,
+          ...res.data.detail,
+          create_at: datetimeFormat(res.data.detail.create_at),
         };
+        template_space_id = props.templateMeta!.template_space_id;
       }
 
       tplSpaceId.value = template_space_id;