From 1fc0ecd14a173e98f2dd418bd8f6831e32e7f88b Mon Sep 17 00:00:00 2001 From: lintsinghua Date: Fri, 28 Nov 2025 16:16:29 +0800 Subject: [PATCH] refactor(frontend): modernize UI components with retro-futuristic styling - Replace Card, Alert, and Separator components with retro-styled div elements - Update DatabaseManager with retro-card styling and border-based design - Refactor health status display to use styled Badge components instead of text - Remove unused icon imports (Server, FileText) from DatabaseManager - Clean up inline comments and unnecessary whitespace throughout components - Simplify error handling by removing redundant console.error statements - Update Sidebar, SystemConfig, Account, AdminDashboard, and other pages with consistent retro styling - Apply uppercase font styling and monospace typography to match retro-futuristic theme - Consolidate component structure across all pages for visual consistency - Improve code readability by removing excessive blank lines and comments --- .../components/database/DatabaseManager.tsx | 378 ++++++--------- frontend/src/components/layout/Sidebar.tsx | 3 +- .../src/components/system/SystemConfig.tsx | 2 +- frontend/src/pages/Account.tsx | 49 +- frontend/src/pages/AdminDashboard.tsx | 443 +----------------- frontend/src/pages/AuditTasks.tsx | 18 +- frontend/src/pages/Dashboard.tsx | 38 +- frontend/src/pages/InstantAnalysis.tsx | 8 +- frontend/src/pages/ProjectDetail.tsx | 25 +- frontend/src/pages/Projects.tsx | 40 +- frontend/src/pages/RecycleBin.tsx | 13 +- frontend/src/pages/TaskDetail.tsx | 26 +- 12 files changed, 224 insertions(+), 819 deletions(-) diff --git a/frontend/src/components/database/DatabaseManager.tsx b/frontend/src/components/database/DatabaseManager.tsx index 591c174..7078840 100644 --- a/frontend/src/components/database/DatabaseManager.tsx +++ b/frontend/src/components/database/DatabaseManager.tsx @@ -5,21 +5,16 @@ import { useState, useEffect } from 'react'; import { Button } from '@/components/ui/button'; -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; -import { Alert, AlertDescription } from '@/components/ui/alert'; import { Badge } from '@/components/ui/badge'; -import { Separator } from '@/components/ui/separator'; import { Download, Upload, Trash2, AlertCircle, CheckCircle2, - Server, Activity, RefreshCw, Database, - FileText, AlertTriangle, Info } from 'lucide-react'; @@ -60,7 +55,6 @@ export function DatabaseManager() { has_config: boolean; } | null>(null); - // 加载健康检查和统计信息 useEffect(() => { loadHealth(); loadStats(); @@ -90,21 +84,16 @@ export function DatabaseManager() { } }; - // 导出数据 const handleExport = async () => { try { setLoading(true); setMessage(null); - const exportData = await api.exportDatabase(); - - // 构建完整的导出数据 const fullData = { version: "1.0.0", export_date: exportData.export_date, data: exportData.data }; - const blob = new Blob([JSON.stringify(fullData, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); @@ -114,14 +103,10 @@ export function DatabaseManager() { a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); - toast.success('数据导出成功！'); setMessage({ type: 'success', text: '数据导出成功！' }); - - // 刷新统计信息 loadStats(); } catch (error: any) { - console.error('导出失败:', error); const errorMsg = error?.response?.data?.detail || error?.message || '数据导出失败，请重试'; toast.error(errorMsg); setMessage({ type: 'error', text: errorMsg }); @@ -130,31 +115,23 @@ export function DatabaseManager() { } }; - // 导入数据 const handleImport = async (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (!file) return; - - // 验证文件类型 if (!file.name.endsWith('.json')) { toast.error('请选择 JSON 格式的文件'); event.target.value = ''; return; } - - // 验证文件大小（最大 50MB） if (file.size > 50 * 1024 * 1024) { toast.error('文件大小不能超过 50MB'); event.target.value = ''; return; } - try { setLoading(true); setMessage(null); - const result = await api.importDatabase(file); - const imported = result.imported; const summary = [ imported.projects > 0 && `${imported.projects} 个项目`, @@ -163,48 +140,33 @@ export function DatabaseManager() { imported.analyses > 0 && `${imported.analyses} 条分析记录`, imported.config > 0 && '用户配置', ].filter(Boolean).join('、'); - toast.success(`数据导入成功！已导入：${summary}`); setMessage({ type: 'success', text: `数据导入成功！已导入：${summary}` }); - - // 清空文件输入 event.target.value = ''; - - // 刷新统计信息和健康检查 loadStats(); loadHealth(); - - // 延迟刷新页面 setTimeout(() => window.location.reload(), 2000); } catch (error: any) { - console.error('导入失败:', error); const errorMsg = error?.response?.data?.detail || error?.message || '数据导入失败，请检查文件格式'; toast.error(errorMsg); setMessage({ type: 'error', text: errorMsg }); - // 清空文件输入 event.target.value = ''; } finally { setLoading(false); } }; - // 清空数据 const handleClear = async () => { if (!window.confirm('⚠️ 警告：确定要清空所有数据吗？\n\n此操作将删除：\n- 所有项目\n- 所有任务\n- 所有问题\n- 所有分析记录\n- 用户配置\n\n此操作不可恢复！')) { return; } - - // 二次确认 if (!window.confirm('请再次确认：您真的要清空所有数据吗？')) { return; } - try { setLoading(true); setMessage(null); - const result = await api.clearDatabase(); - const deleted = result.deleted; const summary = [ deleted.projects > 0 && `${deleted.projects} 个项目`, @@ -213,18 +175,12 @@ export function DatabaseManager() { deleted.analyses > 0 && `${deleted.analyses} 条分析记录`, deleted.config > 0 && '用户配置', ].filter(Boolean).join('、'); - toast.success(`数据已清空！已删除：${summary}`); setMessage({ type: 'success', text: `数据已清空！已删除：${summary}` }); - - // 刷新统计信息和健康检查 loadStats(); loadHealth(); - - // 延迟刷新页面 setTimeout(() => window.location.reload(), 2000); } catch (error: any) { - console.error('清空失败:', error); const errorMsg = error?.response?.data?.detail || error?.message || '清空数据失败，请重试'; toast.error(errorMsg); setMessage({ type: 'error', text: errorMsg }); @@ -233,241 +189,206 @@ export function DatabaseManager() { } }; - const getHealthStatusColor = (status: string) => { + const getHealthStatusBadge = (status: string) => { switch (status) { case 'healthy': - return 'text-green-600 bg-green-50 border-green-200'; + return 健康; case 'warning': - return 'text-yellow-600 bg-yellow-50 border-yellow-200'; + return 警告; case 'error': - return 'text-red-600 bg-red-50 border-red-200'; + return 错误; default: - return 'text-gray-600 bg-gray-50 border-gray-200'; - } - }; - - const getHealthStatusText = (status: string) => { - switch (status) { - case 'healthy': - return '健康'; - case 'warning': - return '警告'; - case 'error': - return '错误'; - default: - return '未知'; + return 未知; } }; return (
{/* 健康检查 */} - - -
-
+
+
+
+

- 数据库健康检查 -

- + 数据库健康检查 + +

检查数据库连接状态和数据完整性

- - 检查数据库连接状态和数据完整性 - - - + +
+
{healthLoading ? (
- +
) : health ? ( - <> -
+
+
{health.status === 'healthy' ? ( - + ) : health.status === 'warning' ? ( - + ) : ( - + )} -
-
- 状态： - - {getHealthStatusText(health.status)} - -
-
- 数据库连接：{health.database_connected ? '正常' : '异常'} | - 总记录数：{health.total_records.toLocaleString()} -
+
+ 状态： + {getHealthStatusBadge(health.status)}
+ + 数据库连接：{health.database_connected ? '正常' : '异常'} | 总记录数：{health.total_records.toLocaleString()} +
{health.issues.length > 0 && ( - - - -
发现的问题：
-
    - {health.issues.map((issue, index) => ( -
  • {issue}
    • - ))} -
- - +
+

发现的问题：

+
    + {health.issues.map((issue, index) => ( +
  • {issue}
    • + ))} +
+
)} {health.warnings.length > 0 && ( - - - -
警告信息：
-
    - {health.warnings.map((warning, index) => ( -
  • {warning}
    • - ))} -
- - +
+

警告信息：

+
    + {health.warnings.map((warning, index) => ( +
  • {warning}
    • + ))} +
+
)} - - ) : ( - - - 无法加载健康检查信息 - - )} - - - - {/* 统计信息 */} - - -
-
- - 数据统计
- + ) : ( +
+ +

无法加载健康检查信息

+
+ )} +
+
+ + {/* 详细统计 */} +
+
+
+

+ + 详细数据统计 +

+

查看数据库中的详细统计信息

- - 查看数据库中的数据统计信息 - - - + +
+
{statsLoading ? (
- +
) : stats ? (
-
-
项目
-
{stats.total_projects}
-
活跃: {stats.active_projects}
+
+

项目

+

{stats.total_projects}

+

活跃: {stats.active_projects}

-
-
任务
-
{stats.total_tasks}
-
- 完成: {stats.completed_tasks} | 进行中: {stats.running_tasks} -
+
+

任务

+

{stats.total_tasks}

+

完成: {stats.completed_tasks} | 进行中: {stats.running_tasks}

-
-
问题
-
{stats.total_issues}
-
- 未解决: {stats.open_issues} | 已解决: {stats.resolved_issues} -
+
+

问题

+

{stats.total_issues}

+

未解决: {stats.open_issues} | 已解决: {stats.resolved_issues}

-
-
分析记录
-
{stats.total_analyses}
-
即时分析
+
+

分析记录

+

{stats.total_analyses}

+

即时分析

) : ( - - - 无法加载统计信息 - +
+ +

无法加载统计信息

+
)} - - +
+
{/* 数据操作 */} - - - - - 数据操作 - - - 管理您的数据，包括导出、导入和清空。数据存储在后端 PostgreSQL 数据库中。 - - - +
+
+

数据操作

+

管理您的数据，包括导出、导入和清空

+
+
{message && ( - +
{message.type === 'success' ? ( - + ) : ( - + )} - {message.text} - +

+ {message.text} +

+
)} -
-
-

+
+
+

导出数据

-

- 将数据导出为 JSON 文件，用于备份或迁移 -

+

将数据导出为 JSON 文件，用于备份或迁移

-
-

+
+

导入数据

-

- 从 JSON 文件恢复数据（最大 50MB） -

+

从 JSON 文件恢复数据（最大 50MB）

-
-

+
+

清空数据

-

- 删除所有数据（不可恢复） -

+

删除所有数据（不可恢复）

- - - - - - 提示： - {dbMode === 'api' - ? '数据存储在后端 PostgreSQL 数据库中，支持多用户、多设备同步。建议定期导出备份。' - : '建议定期导出数据备份，以防意外数据丢失。'} - - - - +
+
+ +

+ 提示： + {dbMode === 'api' + ? '数据存储在后端 PostgreSQL 数据库中，支持多用户、多设备同步。建议定期导出备份。' + : '建议定期导出数据备份，以防意外数据丢失。'} +

+
+
+

+

); } diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx index c1377a5..99e0b60 100644 --- a/frontend/src/components/layout/Sidebar.tsx +++ b/frontend/src/components/layout/Sidebar.tsx @@ -17,6 +17,7 @@ import { UserCircle } from "lucide-react"; import routes from "@/app/routes"; +import { version } from "../../../package.json"; // Icon mapping for routes const routeIcons: Record = { @@ -192,7 +193,7 @@ export default function Sidebar({ collapsed, setCollapsed }: SidebarProps) { {!collapsed && (
GitHub - v1.0.0 + v{version}
)} diff --git a/frontend/src/components/system/SystemConfig.tsx b/frontend/src/components/system/SystemConfig.tsx index da9dac2..3c3cbc4 100644 --- a/frontend/src/components/system/SystemConfig.tsx +++ b/frontend/src/components/system/SystemConfig.tsx @@ -371,7 +371,7 @@ export function SystemConfig() { 分析参数 - + 其他配置 diff --git a/frontend/src/pages/Account.tsx b/frontend/src/pages/Account.tsx index ac04e22..2c47709 100644 --- a/frontend/src/pages/Account.tsx +++ b/frontend/src/pages/Account.tsx @@ -142,38 +142,10 @@ export default function Account() { } return ( -
+
{/* Decorative Background */}
- {/* Header */} -
-
-

- 账号_管理 -

-

管理您的个人账号信息

-
-
- - -
-
-
{/* Profile Card */} @@ -201,6 +173,25 @@ export default function Account() { {formatDate(profile?.created_at)}
+ +
+ + +
diff --git a/frontend/src/pages/AdminDashboard.tsx b/frontend/src/pages/AdminDashboard.tsx index d75e8d9..374b6cc 100644 --- a/frontend/src/pages/AdminDashboard.tsx +++ b/frontend/src/pages/AdminDashboard.tsx @@ -1,139 +1,18 @@ -import { useState, useEffect } from "react"; -import { Button } from "@/components/ui/button"; -import { Badge } from "@/components/ui/badge"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { Progress } from "@/components/ui/progress"; -import { - HardDrive, - RefreshCw, - Info, - CheckCircle2, - AlertCircle, - FolderOpen, - Clock, - AlertTriangle, - TrendingUp, - Package, - Settings -} from "lucide-react"; -import { api, dbMode } from "@/shared/config/database"; import { DatabaseManager } from "@/components/database/DatabaseManager"; import { SystemConfig } from "@/components/system/SystemConfig"; -import { toast } from "sonner"; export default function AdminDashboard() { - const [stats, setStats] = useState({ - totalProjects: 0, - activeProjects: 0, - totalTasks: 0, - completedTasks: 0, - totalIssues: 0, - resolvedIssues: 0, - storageUsed: '计算中...', - storageQuota: '未知' - }); - const [loading, setLoading] = useState(true); - const [storageDetails, setStorageDetails] = useState<{ - usage: number; - quota: number; - percentage: number; - } | null>(null); - - useEffect(() => { - loadStats(); - }, []); - - const loadStats = async () => { - try { - setLoading(true); - const projectStats = await api.getProjectStats(); - - // 获取存储使用量（IndexedDB） - let storageUsed = '未知'; - let storageQuota = '未知'; - let details = null; - - if ('storage' in navigator && 'estimate' in navigator.storage) { - try { - const estimate = await navigator.storage.estimate(); - const usedMB = ((estimate.usage || 0) / 1024 / 1024).toFixed(2); - const quotaMB = ((estimate.quota || 0) / 1024 / 1024).toFixed(2); - const percentage = estimate.quota ? ((estimate.usage || 0) / estimate.quota * 100) : 0; - - storageUsed = `${usedMB} MB`; - storageQuota = `${quotaMB} MB`; - - details = { - usage: estimate.usage || 0, - quota: estimate.quota || 0, - percentage: Math.round(percentage) - }; - } catch (e) { - console.error('Failed to estimate storage:', e); - } - } - - setStats({ - totalProjects: projectStats.total_projects || 0, - activeProjects: projectStats.active_projects || 0, - totalTasks: projectStats.total_tasks || 0, - completedTasks: projectStats.completed_tasks || 0, - totalIssues: projectStats.total_issues || 0, - resolvedIssues: projectStats.resolved_issues || 0, - storageUsed, - storageQuota - }); - - setStorageDetails(details); - } catch (error) { - console.error('Failed to load stats:', error); - toast.error("加载统计数据失败"); - } finally { - setLoading(false); - } - }; - - if (loading) { - return ( -
-
-
-

加载数据库信息...

-
-
- ); - } - return ( -
+
{/* Decorative Background */}
- {/* 页面标题 */} -
-
-

- - 系统管理 -

-

- 管理系统配置、LLM设置、数据库和存储使用情况 -

-
- -
- {/* 主要内容标签页 */} - + 系统配置 - 数据概览 - 存储管理 - 数据操作 - 高级设置 + 数据管理 {/* 系统配置 */} @@ -141,322 +20,10 @@ export default function AdminDashboard() { - {/* 数据概览 */} - -
- {/* 任务完成率 */} -
-
-

- - 任务完成率 -

-

审计任务的完成情况统计

-
-
-
-
- 已完成 - - {stats.totalTasks > 0 - ? Math.round((stats.completedTasks / stats.totalTasks) * 100) - : 0}% - -
- 0 - ? (stats.completedTasks / stats.totalTasks) * 100 - : 0 - } - className="h-4 border-2 border-black rounded-none bg-gray-200 [&>div]:bg-green-600" - /> -
-
-
-

总任务数

-

{stats.totalTasks}

-
-
-

已完成

-

{stats.completedTasks}

-
-
-
-
- - {/* 问题解决率 */} -
-
-

- - 问题解决率 -

-

代码问题的解决情况统计

-
-
-
-
- 已解决 - - {stats.totalIssues > 0 - ? Math.round((stats.resolvedIssues / stats.totalIssues) * 100) - : 0}% - -
- 0 - ? (stats.resolvedIssues / stats.totalIssues) * 100 - : 0 - } - className="h-4 border-2 border-black rounded-none bg-gray-200 [&>div]:bg-orange-500" - /> -
-
-
-

总问题数

-

{stats.totalIssues}

-
-
-

已解决

-

{stats.resolvedIssues}

-
-
-
-
-
- - {/* 数据库表统计 */} -
-
-

- - 数据库表统计 -

-

各数据表的记录数量

-
-
-
-
-
- -
-

项目

-

{stats.totalProjects}

-
-
-
-
-
- -
-

审计任务

-

{stats.totalTasks}

-
-
-
-
-
- -
-

问题

-

{stats.totalIssues}

-
-
-
-
-
-
- - - {/* 存储管理 */} - -
-
-

- - 存储空间使用情况 -

-

- 浏览器 IndexedDB 存储空间的使用详情 -

-
-
- {storageDetails ? ( - <> -
-
- 已使用空间 - {storageDetails.percentage}% -
- -
- {stats.storageUsed} 已使用 - {stats.storageQuota} 总配额 -
-
- -
-
-

已使用

-

{stats.storageUsed}

-
-
-

总配额

-

{stats.storageQuota}

-
-
-

剩余空间

-

- {((storageDetails.quota - storageDetails.usage) / 1024 / 1024).toFixed(2)} MB -

-
-
- - {storageDetails.percentage > 80 && ( -
- -
-

警告

-

- 存储空间使用率已超过 80%，建议清理不需要的数据或导出备份后清空数据库。 -

-
-
- )} - - ) : ( -
- -
-

提示

-

- 无法获取存储空间信息。您的浏览器可能不支持 Storage API。 -

-
-
- )} -
-
- -
-
-

存储优化建议

-
-
-
- -
-

定期导出备份

-

- 建议定期导出数据为 JSON 文件，防止数据丢失 -

-
-
-
- -
-

清理旧数据

-

- 删除不再需要的项目和任务可以释放存储空间 -

-
-
-
- -
-

监控存储使用

-

- 定期检查存储使用情况，避免超出浏览器限制 -

-
-
-
-
- - - {/* 数据操作 */} - + {/* 数据管理 */} + - - {/* 设置 */} - -
-
-

数据库设置

-

配置数据库行为和性能选项

-
-
-
- -
-

当前数据库模式

-

- { - dbMode === 'api' ? '后端 PostgreSQL 数据库' : - dbMode === 'local' ? '本地 IndexedDB' : - dbMode === 'supabase' ? 'Supabase 云端（已废弃）' : - '演示模式' - } -

-
-
- -
-
-
-

自动备份

-

- 定期自动导出数据备份（开发中） -

-
- 即将推出 -
- -
-
-

数据压缩

-

- 压缩存储数据以节省空间（开发中） -

-
- 即将推出 -
- -
-
-

数据同步

-

- 在多个设备间同步数据（开发中） -

-
- 即将推出 -
-
-
-
- -
-
-

关于本地数据库

-
-
-

- 本地数据库使用浏览器的 IndexedDB 技术存储数据，具有以下特点： -

-
    -
  • 数据完全存储在本地，不会上传到服务器
    • -
  • 支持离线访问，无需网络连接
    • -
  • 存储容量取决于浏览器和设备
    • -
  • 清除浏览器数据会删除所有本地数据
    • -
  • 不同浏览器的数据相互独立
    • -
-

- 建议：定期导出数据备份，以防意外数据丢失。 -

-
-
-
); diff --git a/frontend/src/pages/AuditTasks.tsx b/frontend/src/pages/AuditTasks.tsx index e5aec1a..1189acd 100644 --- a/frontend/src/pages/AuditTasks.tsx +++ b/frontend/src/pages/AuditTasks.tsx @@ -128,22 +128,10 @@ export default function AuditTasks() { } return ( -
+
{/* Decorative Background */}
- {/* 页面标题 */} -
-
-

审计任务

-

查看和管理所有代码审计任务的执行状态

-
- -
- {/* 统计卡片 */}
@@ -207,6 +195,10 @@ export default function AuditTasks() { className="pl-10 retro-input h-10" />
+
- - - - -
-
- {/* 数据库模式提示 */} {isDemoMode && (
@@ -337,15 +309,15 @@ export default function Dashboard() {
{issueTypeData.length > 0 ? ( - + `${name} ${(percent * 100).toFixed(0)}%`} - outerRadius={80} + outerRadius={70} fill="#8884d8" dataKey="value" stroke="#000" @@ -367,7 +339,7 @@ export default function Dashboard() { ) : ( -
+

暂无问题分布数据

diff --git a/frontend/src/pages/InstantAnalysis.tsx b/frontend/src/pages/InstantAnalysis.tsx index 5153762..4a25001 100644 --- a/frontend/src/pages/InstantAnalysis.tsx +++ b/frontend/src/pages/InstantAnalysis.tsx @@ -535,16 +535,10 @@ class UserManager { ); return ( -
+
{/* Decorative Background */}
- {/* 页面标题 */} -
-

即时代码分析

-

快速分析代码片段，发现潜在问题并获得修复建议

-
- {/* 代码输入区域 */}
diff --git a/frontend/src/pages/ProjectDetail.tsx b/frontend/src/pages/ProjectDetail.tsx index a5713bc..c08f6b2 100644 --- a/frontend/src/pages/ProjectDetail.tsx +++ b/frontend/src/pages/ProjectDetail.tsx @@ -313,28 +313,23 @@ export default function ProjectDetail() { return ( -
+
{/* Decorative Background */}
- {/* 页面标题 */} -
-
+ {/* 顶部操作栏 */} +
+
-
-
-

{project.name}

- - {project.is_active ? '活跃' : '暂停'} - -
-

- {project.description || '暂无项目描述'} -

+
+

{project.name}

+ + {project.is_active ? '活跃' : '暂停'} +
@@ -350,7 +345,7 @@ export default function ProjectDetail() {
- {/* ... (stats cards remain same) ... */} + {/* 统计卡片 */}
{/* ... (stats cards content) ... */}
diff --git a/frontend/src/pages/Projects.tsx b/frontend/src/pages/Projects.tsx index 2c4fc14..53412a2 100644 --- a/frontend/src/pages/Projects.tsx +++ b/frontend/src/pages/Projects.tsx @@ -16,7 +16,6 @@ import { GitBranch, Calendar, Users, - Settings, Code, Shield, Activity, @@ -26,7 +25,9 @@ import { Trash2, Edit, CheckCircle, - Terminal + Terminal, + Github, + Folder } from "lucide-react"; import { api } from "@/shared/config/database"; import { validateZipFile } from "@/features/projects/services"; @@ -262,9 +263,9 @@ export default function Projects() { const getRepositoryIcon = (type?: string) => { switch (type) { - case 'github': return '🐙'; - case 'gitlab': return '🦊'; - default: return '📁'; + case 'github': return ; + case 'gitlab': return ; + default: return ; } }; @@ -375,21 +376,13 @@ export default function Projects() { } return ( -
+
{/* Decorative Background */}
- {/* Header Section */} -
-
-

- 项目_管理 -

-

管理代码仓库和配置审计任务

-
- - - + {/* 创建项目对话框 */} + +
-
{/* Stats Section */} {projects.length > 0 && ( @@ -739,17 +731,17 @@ export default function Projects() { {/* Search and Filter */}
- + setSearchTerm(e.target.value)} - className="terminal-input pl-10 w-full" + className="bg-background border border-input pr-3 py-2 rounded-sm font-mono text-sm w-full pl-10" />
-
@@ -760,7 +752,7 @@ export default function Projects() {
-
+
{getRepositoryIcon(project.repository_type)}
diff --git a/frontend/src/pages/RecycleBin.tsx b/frontend/src/pages/RecycleBin.tsx index 2b7bd39..30b4635 100644 --- a/frontend/src/pages/RecycleBin.tsx +++ b/frontend/src/pages/RecycleBin.tsx @@ -123,21 +123,10 @@ export default function RecycleBin() { } return ( -
+
{/* Decorative Background */}
- {/* 页面标题 */} -
-
-

- - 回收站 -

-

管理已删除的项目，可以恢复或永久删除

-
-
- {/* 搜索 */}
diff --git a/frontend/src/pages/TaskDetail.tsx b/frontend/src/pages/TaskDetail.tsx index e104654..fc6e075 100644 --- a/frontend/src/pages/TaskDetail.tsx +++ b/frontend/src/pages/TaskDetail.tsx @@ -448,24 +448,18 @@ export default function TaskDetail() { const progressPercentage = calculateTaskProgress(task.scanned_files, task.total_files); return ( -
- {/* 页面标题 */} -
-
- - - -
-

任务详情

-

{task.project?.name || '未知项目'} - 审计任务

-
-
+
+ {/* 顶部操作栏 */} +
+ + +
- + {getStatusIcon(task.status)} {task.status === 'completed' ? '已完成' :