feat: Fix file name not displaying after upload

bigtop-manager-ui/src/pages/cluster-manage/hosts/create.vue

@@ -49,6 +49,7 @@
   const hiddenItems = ref<string[]>([])
   const autoFormRef = ref<Comp.AutoFormInstance | null>(null)
   const formValue = ref<HostReq & { hostname?: string }>({})
+  const fileName = ref('')
   const { locale } = storeToRefs(localeStore)
   const isEdit = computed(() => mode.value === 'EDIT')
 
@@ -163,7 +164,7 @@
       }
     },
     {
-      type: 'input',
+      type: 'inputPassword',
       field: 'sshKeyPassword',
       formItemProps: {
         name: 'sshKeyPassword',
@@ -174,7 +175,7 @@
       }
     },
     {
-      type: 'textarea',
+      type: 'inputPassword',
       field: 'sshKeyPasswordAgain',
       formItemProps: {
         name: 'sshKeyPasswordAgain',
@@ -428,6 +429,7 @@
       authType: '1',
       inputType: '1'
     }
+    fileName.value = ''
     open.value = false
   }
 
@@ -452,16 +454,16 @@
       formData.append('file', file)
       const data = await uploadFile(formData)
       formValue.value!.sshKeyFilename = data
+      fileName.value = file.name
       onSuccess(data, file)
       message.success(t('common.upload_success'))
     } catch (error) {
       onError(error)
       message.error(t('common.upload_failed'))
+      fileName.value = ''
     }
   }
 
-  const fileList = ref()
-
   defineExpose({
     handleOpen
   })
@@ -492,7 +494,7 @@
         <template #sshKeyFilenameSlot="{ item }">
           <a-form-item v-bind="item.formItemProps">
             <a-upload
-              :file-list="fileList"
+              accept="text/plain"
               :before-upload="beforeUpload"
               :custom-request="customRequest"
               :show-upload-list="false"
@@ -502,34 +504,9 @@
                 {{ $t('common.upload_file') }}
               </a-button>
             </a-upload>
+            <span class="filename">{{ fileName }}</span>
           </a-form-item>
         </template>
-        <!-- <template #agentDirSlot="{ item, state }">
-          <a-form-item>
-            <template #label>
-              <div class="question">
-                <span>
-                  {{ item.formItemProps?.label }}
-                </span>
-                <svg-icon style="padding: 1px 0 0 0" name="question" />
-              </div>
-            </template>
-            <a-input v-bind="item.controlProps" v-model:value="state[item.field]" />
-          </a-form-item>
-        </template> -->
-        <!-- <template #grpcPortSlot="{ item, state }">
-          <a-form-item>
-            <template #label>
-              <div class="question">
-                <span>
-                  {{ item.formItemProps?.label }}
-                </span>
-                <svg-icon style="padding: 1px 0 0 0" name="question" />
-              </div>
-            </template>
-            <a-input v-bind="item.controlProps" v-model:value="state[item.field]" />
-          </a-form-item>
-        </template> -->
       </auto-form>
       <template #footer>
         <footer>
@@ -551,6 +528,10 @@
   .question {
     cursor: pointer;
   }
+  .filename {
+    color: $color-primary;
+    padding-inline: $space-sm;
+  }
   footer {
     width: 100%;
     @include flexbox($justify: flex-end);