应用安装界面上传后增加显示已上传的文件

apps/jingrow/frontend/src/views/dev/AppInstaller.vue

@@ -20,14 +20,13 @@
           :file-list="fileList"
           :max="1"
           accept=".zip,.tar.gz,.tgz,.gz"
-          :show-file-list="false"
           :on-before-upload="beforeUpload"
           :on-change="handleFileChange"
           :custom-request="customUpload"
           :disabled="uploading"
         >
           <n-upload-dragger>
-            <div class="upload-content">
+            <div class="upload-content" v-if="fileList.length === 0">
               <n-icon size="48" :depth="3">
                 <Icon icon="tabler:cloud-upload" />
               </n-icon>
@@ -41,6 +40,29 @@
           </n-upload-dragger>
         </n-upload>
         
+        <!-- 文件信息显示 -->
+        <div v-if="fileList.length > 0" class="file-info-card">
+          <n-alert type="info" :bordered="false">
+            <template #header>
+              <div class="file-info-header">
+                <n-icon size="20" color="#2080f0">
+                  <Icon icon="tabler:file-zip" />
+                </n-icon>
+                <strong>{{ t('Selected Package') }}</strong>
+              </div>
+            </template>
+            <n-space vertical>
+              <n-text><strong>{{ t('File Name') }}:</strong> {{ fileList[0].name }}</n-text>
+              <n-text v-if="fileList[0].file" depth="3">
+                <strong>{{ t('Size') }}:</strong> {{ formatFileSize(fileList[0].file.size) }}
+              </n-text>
+              <n-tag v-if="isExtensionFile" type="warning" size="small" style="margin-top: 4px;">
+                {{ t('Extension Package') }}
+              </n-tag>
+            </n-space>
+          </n-alert>
+        </div>
+        
         <!-- 应用名称输入 - 仅普通应用包需要 -->
         <div class="app-name-input" v-if="fileList.length > 0 && !isExtensionFile">
           <n-form-item :label="t('App Name (Optional)')">
@@ -112,7 +134,8 @@
 import { ref, onMounted, h } from 'vue'
 import {
   NIcon, NButton, NSpace, NCard, NUpload, NUploadDragger, NText, NP,
-  NFormItem, NInput, NModal, NProgress, NDataTable, useMessage, type UploadFileInfo, type DataTableColumns
+  NFormItem, NInput, NModal, NProgress, NDataTable, useMessage, NAlert, NTag,
+  type UploadFileInfo, type DataTableColumns
 } from 'naive-ui'
 import { Icon } from '@iconify/vue'
 import axios from 'axios'
@@ -390,6 +413,15 @@ const clearFiles = () => {
   uploadRef.value?.clear()
 }
 
+// 格式化文件大小
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
+}
+
 // 本地App相关方法
 const loadLocalApps = async () => {
   loadingLocalApps.value = true
@@ -487,6 +519,16 @@ onMounted(() => {
   border-color: #3b82f6;
 }
 
+.file-info-card {
+  margin-top: 16px;
+}
+
+.file-info-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .upload-content {
   padding: 40px 20px;
   text-align: center;