From 1b345233eec9e92349c6b7e1e5cc335ff8e36137 Mon Sep 17 00:00:00 2001
From: Frontend Developer <openclaw_frontend_developer@liantu.tech>
Date: Tue, 10 Mar 2026 08:30:41 +0000
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF:=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=88=97=E8=A1=A8=E9=A1=B9=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/renderer/components/FileItem.jsx | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 frontend/src/renderer/components/FileItem.jsx

diff --git a/frontend/src/renderer/components/FileItem.jsx b/frontend/src/renderer/components/FileItem.jsx
new file mode 100644
index 0000000..571bef4
--- /dev/null
+++ b/frontend/src/renderer/components/FileItem.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { FileOutlined, FolderOutlined, FilePdfOutlined, FileImageOutlined, FileWordOutlined, FileExcelOutlined } from '@ant-design/icons';
+
+const getFileIcon = (filename) => {
+  const ext = filename.split('.').pop().toLowerCase();
+  const iconMap = {
+    pdf: <FilePdfOutlined style={{ color: '#ff4d4f' }} />,
+    jpg: <FileImageOutlined style={{ color: '#1890ff' }} />,
+    jpeg: <FileImageOutlined style={{ color: '#1890ff' }} />,
+    png: <FileImageOutlined style={{ color: '#1890ff' }} />,
+    gif: <FileImageOutlined style={{ color: '#1890ff' }} />,
+    doc: <FileWordOutlined style={{ color: '#1890ff' }} />,
+    docx: <FileWordOutlined style={{ color: '#1890ff' }} />,
+    xls: <FileExcelOutlined style={{ color: '#52c41a' }} />,
+    xlsx: <FileExcelOutlined style={{ color: '#52c41a' }} />,
+  };
+  return iconMap[ext] || <FileOutlined />;
+};
+
+function FileItem({ file, onClick, onSelect }) {
+  const isFolder = file.is_folder;
+  
+  return (
+    <div 
+      onClick={() => onClick?.(file)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '12px',
+        borderBottom: '1px solid #f0f0f0',
+        cursor: 'pointer',
+        background: '#fff'
+      }}
+    >
+      <span 
+        onClick={(e) => {
+          e.stopPropagation();
+          onSelect?.(file);
+        }}
+        style={{ marginRight: '8px' }}
+      >
+        <input type="checkbox" />
+      </span>
+      <span style={{ fontSize: '20px', marginRight: '12px' }}>
+        {isFolder ? <FolderOutlined style={{ color: '#faad14' }} /> : getFileIcon(file.name)}
+      </span>
+      <span style={{ flex: 1 }}>{file.name}</span>
+      <span style={{ color: '#8c8c8c', marginRight: '16px' }}>
+        {file.size ? `${(file.size / 1024 / 1024).toFixed(2)} MB` : '-'}
+      </span>
+      <span style={{ color: '#8c8c8c' }}>
+        {file.updated_at ? new Date(file.updated_at).toLocaleDateString() : '-'}
+      </span>
+    </div>
+  );
+}
+
+export default FileItem;