优化文件管理器视觉设计和安全性

核心改进:
- 统一图标色调:所有文件类型图标改为黑白配色,消除彩色差异
- 恢复原始主题:修复shadcn样式导致的过暗背景问题
- 增强大文件安全:后端10MB文件大小限制,防止内存溢出
- 优化警告样式:Large File Warning使用shadcn设计规范

技术细节:
- getFileIcon()全部使用text-muted-foreground统一色调
- 恢复bg-dark-bg/border-dark-border原始主题色彩
- readFile API增加stat文件大小检查和错误处理
- FileViewer警告组件使用destructive色彩体系

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
ZacharyZcR
2025-09-16 20:15:42 +08:00
parent 12733685d7
commit bf166d602f
4 changed files with 109 additions and 49 deletions

View File

@@ -579,17 +579,17 @@ export function FileViewer({
{/* 大文件警告对话框 */}
{showLargeFileWarning && (
<div className="h-full flex items-center justify-center bg-background">
<div className="bg-card border border-orange-200 rounded-lg p-6 max-w-md mx-4 shadow-lg">
<div className="bg-card border border-destructive/30 rounded-lg p-6 max-w-md mx-4 shadow-lg">
<div className="flex items-start gap-3 mb-4">
<AlertCircle className="w-6 h-6 text-orange-500 flex-shrink-0 mt-0.5" />
<AlertCircle className="w-6 h-6 text-destructive flex-shrink-0 mt-0.5" />
<div>
<h3 className="font-medium text-foreground mb-2">Large File Warning</h3>
<p className="text-sm text-muted-foreground mb-3">
This file is {formatFileSize(file.size)} in size, which may cause performance issues when opened as text.
</p>
{isTooLarge ? (
<div className="bg-red-50 border border-red-200 rounded p-3 mb-4">
<p className="text-sm text-red-700 font-medium">
<div className="bg-destructive/10 border border-destructive/30 rounded p-3 mb-4">
<p className="text-sm text-destructive font-medium">
File is too large (&gt; 10MB) and cannot be opened as text for security reasons.
</p>
</div>

View File

@@ -126,11 +126,17 @@ export function FileWindow({
} catch (error: any) {
console.error('Failed to load file:', error);
// 如果是连接错误,提供更明确的错误信息
if (error.message?.includes('connection') || error.message?.includes('established')) {
// 检查是否是大文件错误
const errorData = error?.response?.data;
if (errorData?.tooLarge) {
toast.error(`File too large: ${errorData.error}`, {
duration: 10000, // 10 seconds for important message
});
} else if (error.message?.includes('connection') || error.message?.includes('established')) {
// 如果是连接错误,提供更明确的错误信息
toast.error(`SSH connection failed. Please check your connection to ${sshHost.name} (${sshHost.ip}:${sshHost.port})`);
} else {
toast.error(`Failed to load file: ${error.message || 'Unknown error'}`);
toast.error(`Failed to load file: ${error.message || errorData?.error || 'Unknown error'}`);
}
} finally {
setIsLoading(false);