From 53541f8b460be5e9e17737c65537843d31a13e89 Mon Sep 17 00:00:00 2001
From: xue jiahao <xuejiahao@alicorns.co.jp>
Date: Mon, 16 Mar 2026 17:01:33 +0800
Subject: [PATCH] fix UI

---
 .../src/components/AppDetail/AppDetail.tsx    | 47 ++++++++++++++-----
 .../components/FileUploader/FileUploader.tsx  |  2 -
 .../VersionHistory/VersionHistory.tsx         |  2 -
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/renderer/src/components/AppDetail/AppDetail.tsx b/src/renderer/src/components/AppDetail/AppDetail.tsx
index 2ee3296..a9447ea 100644
--- a/src/renderer/src/components/AppDetail/AppDetail.tsx
+++ b/src/renderer/src/components/AppDetail/AppDetail.tsx
@@ -6,14 +6,12 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Spin, Tag, Space, message } from "antd";
-import { Button, Empty } from "@lobehub/ui";
+import { Button, Empty, MaterialFileTypeIcon } from "@lobehub/ui";
 import {
   LayoutGrid,
   Download,
   History,
   Code,
-  FileCode,
-  FileText,
   Monitor,
   Smartphone,
   ArrowLeft,
@@ -142,6 +140,10 @@ const useStyles = createStyles(({ token, css }) => ({
     display: flex;
     flex-direction: column;
   `,
+  fileSize: css`
+    min-width: 30px;
+    text-align: right;
+  `,
 }));
 
 const AppDetail: React.FC = () => {
@@ -332,13 +334,32 @@ const AppDetail: React.FC = () => {
     }
   };
 
-  // Icon for file type: FileCode for JS, FileText for CSS
-  const getFileTypeIcon = (type: "js" | "css") => {
-    return type === "js" ? (
-      <FileCode size={16} style={{ color: "#f7df1e" }} />
-    ) : (
-      <FileText size={16} style={{ color: "#264de4" }} />
-    );
+  // Icon for file type using MaterialFileTypeIcon
+  const getFileTypeIcon = (type: "js" | "css", filename: string) => {
+    return <MaterialFileTypeIcon type='file' filename={`test.${type}`} size={16} />;
+  };
+
+  // Format file size to human readable
+  const formatFileSize = (size: string | number | undefined): string => {
+    if (!size) return "-";
+    const num = typeof size === "string" ? parseInt(size, 10) : size;
+    if (isNaN(num)) return "-";
+    if (num < 1024) return `${num} B`;
+    if (num < 1024 * 1024) return `${(num / 1024).toFixed(1)} KB`;
+    return `${(num / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  // Get file metadata from FILE type resource
+  const getFileMeta = (
+    file: FileConfigResponse,
+  ): { contentType: string; size: string } | null => {
+    if (isFileResource(file) && file.file) {
+      return {
+        contentType: file.file.contentType || "-",
+        size: file.file.size || "-",
+      };
+    }
+    return null;
   };
 
   const renderFileList = (
@@ -362,6 +383,7 @@ const AppDetail: React.FC = () => {
           const fileKey = getFileKey(file);
           const canView = isFileResource(file);
           const isDownloading = fileKey === downloadingKey;
+          const fileMeta = getFileMeta(file);
 
           return (
             <div
@@ -374,11 +396,14 @@ const AppDetail: React.FC = () => {
               }}
             >
               <div className={styles.fileInfo}>
-                <span className={styles.fileIcon}>{getFileTypeIcon(type)}</span>
+                <span className={styles.fileIcon}>{getFileTypeIcon(type, fileName)}</span>
                 <span className={styles.fileName}>{fileName}</span>
               </div>
               {canView && (
                 <Space>
+                  {fileMeta && (
+                    <span className={styles.fileSize}>{formatFileSize(fileMeta.size)}</span>
+                  )}
                   <Button
                     type="text"
                     size="small"
diff --git a/src/renderer/src/components/FileUploader/FileUploader.tsx b/src/renderer/src/components/FileUploader/FileUploader.tsx
index 9e26179..76e13b2 100644
--- a/src/renderer/src/components/FileUploader/FileUploader.tsx
+++ b/src/renderer/src/components/FileUploader/FileUploader.tsx
@@ -10,12 +10,10 @@ import { Button } from "@lobehub/ui";
 import {
   Inbox,
   Trash2,
-  FileText,
   File,
   Code,
 } from "lucide-react";
 import { createStyles } from "antd-style";
-import type { UploadFile, UploadProps } from "antd";
 import type { DeployFile } from "@shared/types/ipc";
 
 const { Dragger } = Upload;
diff --git a/src/renderer/src/components/VersionHistory/VersionHistory.tsx b/src/renderer/src/components/VersionHistory/VersionHistory.tsx
index a6ba88a..7a3e15b 100644
--- a/src/renderer/src/components/VersionHistory/VersionHistory.tsx
+++ b/src/renderer/src/components/VersionHistory/VersionHistory.tsx
@@ -20,7 +20,6 @@ import {
   Download,
   Trash2,
   Undo2,
-  Tag,
   Code,
   FileText,
 } from "lucide-react";
@@ -268,7 +267,6 @@ const VersionHistory: React.FC = () => {
                           {version.tags.map((tag, i) => (
                             <Tag
                               key={i}
-                              icon={<Tag size={14} />}
                               color="processing"
                             >
                               {tag}