WuYanBo
/
CodeReview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(theme): Refactor global CSS with professional color scheme and design system 

- Update root and dark mode color variables using HSL color system
- Implement professional color palette with deep red and gradient backgrounds
- Add custom shadow and gradient variables for enhanced visual design
- Improve component classes with new color tokens and design tokens
- Enhance readability and consistency of color and styling approach
- Introduce more semantic and professional color definitions for light and dark modes
This commit is contained in:
lintsinghua 2025-10-22 17:42:48 +08:00
parent bfd00ae29d
commit ecfc9c02cf
12 changed files with 398 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

287
src/assets/styles/globals.css
View File

@ -5,93 +5,113 @@
/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
All colors MUST be HSL.
专业深红色配色方案：
- 主色调：深红色 (0 75% 25%) - 体现专业性和权威感
- 强调色：暗红色 (0 60% 35%) - 用于交互元素和重点突出
- 背景色：浅灰到黑色渐变 - 提供高对比度和现代感
- 状态色：保持语义化的绿色(成功)、红色(错误)、黄色(警告)
*/
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--background: 0 0% 98%;
--foreground: 0 0% 5%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--card-foreground: 0 0% 5%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--popover-foreground: 0 0% 5%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--primary: 0 75% 25%;
--primary-foreground: 0 0% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--secondary: 0 0% 95%;
--secondary-foreground: 0 75% 25%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--muted: 0 0% 94%;
--muted-foreground: 0 0% 40%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--accent: 0 60% 35%;
--accent-foreground: 0 0% 98%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 0 75% 25%;
--radius: 0.5rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
/* 专业渐变效果 */
--gradient-primary: linear-gradient(135deg, hsl(0 75% 25%) 0%, hsl(0 60% 35%) 100%);
--gradient-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%);
--gradient-background: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 95%) 100%);
/* 专业阴影效果 */
--shadow-card: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-hover: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
--shadow-focus: 0 0 0 3px hsl(0 75% 25% / 0.1);
--sidebar-background: 0 0% 8%;
--sidebar-foreground: 0 0% 85%;
--sidebar-primary: 0 75% 35%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
--sidebar-accent: 0 0% 12%;
--sidebar-accent-foreground: 0 0% 85%;
--sidebar-border: 0 0% 15%;
--sidebar-ring: 0 75% 45%;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--background: 0 0% 3%;
--foreground: 0 0% 95%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--card: 0 0% 5%;
--card-foreground: 0 0% 95%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--popover: 0 0% 5%;
--popover-foreground: 0 0% 95%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--primary: 0 75% 45%;
--primary-foreground: 0 0% 5%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--secondary: 0 0% 8%;
--secondary-foreground: 0 0% 95%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--muted: 0 0% 8%;
--muted-foreground: 0 0% 60%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--accent: 0 60% 50%;
--accent-foreground: 0 0% 5%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--destructive: 0 75% 55%;
--destructive-foreground: 0 0% 95%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
--border: 0 0% 12%;
--input: 0 0% 12%;
--ring: 0 75% 45%;
/* 暗色模式专业渐变效果 */
--gradient-primary: linear-gradient(135deg, hsl(0 75% 45%) 0%, hsl(0 60% 50%) 100%);
--gradient-card: linear-gradient(145deg, hsl(0 0% 5%) 0%, hsl(0 0% 3%) 100%);
--gradient-background: linear-gradient(180deg, hsl(0 0% 3%) 0%, hsl(0 0% 1%) 100%);
/* 暗色模式专业阴影效果 */
--shadow-card: 0 1px 3px 0 hsl(0 0% 0% / 0.3), 0 1px 2px -1px hsl(0 0% 0% / 0.3);
--shadow-hover: 0 4px 6px -1px hsl(0 0% 0% / 0.4), 0 2px 4px -2px hsl(0 0% 0% / 0.4);
--shadow-focus: 0 0 0 3px hsl(0 75% 45% / 0.2);
--sidebar-background: 0 0% 2%;
--sidebar-foreground: 0 0% 85%;
--sidebar-primary: 0 75% 50%;
--sidebar-primary-foreground: 0 0% 5%;
--sidebar-accent: 0 0% 6%;
--sidebar-accent-foreground: 0 0% 85%;
--sidebar-border: 0 0% 8%;
--sidebar-ring: 0 75% 55%;
}
}
@ -109,42 +129,42 @@ All colors MUST be HSL.
@layer components {
/* 页面标题样式 */
.page-title {
@apply text-2xl md:text-3xl font-bold text-gray-900 tracking-tight;
@apply text-2xl md:text-3xl font-bold text-foreground tracking-tight;
}
.page-subtitle {
@apply text-sm md:text-base text-gray-600 mt-1;
@apply text-sm md:text-base text-muted-foreground mt-1;
}
/* 现代化卡片样式 */
.card-modern {
@apply bg-white rounded-xl border border-gray-200/60 shadow-sm hover:shadow-md transition-all duration-200;
@apply bg-card rounded-xl border border-border shadow-sm hover:shadow-md transition-all duration-200;
}
/* 统计卡片样式 */
.stat-card {
@apply bg-white rounded-xl border border-gray-200/60 shadow-sm hover:shadow-lg transition-all duration-300 hover:border-gray-300/60;
@apply bg-card rounded-xl border border-border shadow-sm hover:shadow-lg transition-all duration-300 hover:border-accent/30;
}
.stat-label {
@apply text-xs font-medium text-gray-500 uppercase tracking-wide;
@apply text-xs font-medium text-muted-foreground uppercase tracking-wide;
}
.stat-value {
@apply text-2xl md:text-3xl font-bold text-gray-900 mt-1;
@apply text-2xl md:text-3xl font-bold text-foreground mt-1;
}
.stat-icon {
@apply w-12 h-12 rounded-lg bg-gradient-to-br flex items-center justify-center shadow-sm;
@apply w-12 h-12 rounded-lg bg-gradient-to-br from-primary/10 to-accent/10 flex items-center justify-center shadow-sm;
}
/* 按钮样式 */
.btn-primary {
@apply bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white shadow-sm hover:shadow-md transition-all duration-200;
@apply bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 text-primary-foreground shadow-sm hover:shadow-md transition-all duration-200;
}
.btn-secondary {
@apply border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all duration-200;
@apply border-border hover:border-accent/50 hover:bg-accent/5 transition-all duration-200;
}
/* 空状态样式 */
@ -153,7 +173,7 @@ All colors MUST be HSL.
}
.empty-icon {
@apply w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4;
@apply w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4;
}
/* 动画 */
@ -174,7 +194,7 @@ All colors MUST be HSL.
/* 渐变背景 */
.gradient-bg {
@apply bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50;
@apply bg-gradient-to-br from-background via-muted/30 to-accent/5;
}
/* 响应式容器 */
@ -211,11 +231,138 @@ All colors MUST be HSL.
}
::-webkit-scrollbar-thumb {
background: rgba(156, 163, 175, 0.5);
background: hsl(var(--muted-foreground) / 0.3);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(156, 163, 175, 0.8);
background: hsl(var(--accent) / 0.6);
}
/* 专业高级感样式 */
.professional-card {
@apply bg-gradient-card border border-border/50 shadow-card hover:shadow-hover transition-all duration-300;
}
.professional-button {
@apply bg-gradient-primary text-primary-foreground font-semibold px-6 py-3 rounded-lg shadow-sm hover:shadow-md transition-all duration-200 focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
.professional-input {
@apply bg-background border border-border rounded-lg px-4 py-2 focus:border-primary focus:ring-2 focus:ring-primary/10 transition-all duration-200;
}
.status-indicator {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}
.status-success {
@apply bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400;
}
.status-warning {
@apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400;
}
.status-error {
@apply bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400;
}
.status-info {
@apply bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400;
}
/* 高级导航样式 */
.nav-link {
@apply flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 hover:bg-accent/10 hover:text-accent-foreground;
}
.nav-link.active {
@apply bg-primary/10 text-primary border-r-2 border-primary;
}
/* 专业表格样式 */
.professional-table {
@apply w-full border-collapse bg-card rounded-lg overflow-hidden shadow-card;
}
.professional-table th {
@apply bg-muted/50 px-6 py-3 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider border-b border-border;
}
.professional-table td {
@apply px-6 py-4 whitespace-nowrap text-sm text-foreground border-b border-border/50;
}
.professional-table tr:hover {
@apply bg-accent/5;
}
/* 图表和图标专用样式 */
.chart-primary {
color: hsl(var(--primary));
}
.chart-accent {
color: hsl(var(--accent));
}
.chart-success {
color: #10b981;
}
.chart-warning {
color: #f59e0b;
}
.chart-error {
color: #ef4444;
}
.icon-primary {
@apply text-primary;
}
.icon-accent {
@apply text-accent;
}
.icon-muted {
@apply text-muted-foreground;
}
/* 加载动画 */
.loading-spinner {
@apply animate-spin rounded-full border-2 border-primary border-t-transparent;
}
/* 状态指示器颜色 */
.status-running {
@apply bg-red-50 text-red-800 border-red-200;
}
.status-completed {
@apply bg-green-50 text-green-800 border-green-200;
}
.status-failed {
@apply bg-red-100 text-red-900 border-red-300;
}
/* 渐变图标背景 */
.icon-bg-primary {
@apply bg-gradient-to-br from-primary/10 to-accent/10;
}
.icon-bg-success {
@apply bg-gradient-to-br from-green-100 to-emerald-100;
}
.icon-bg-warning {
@apply bg-gradient-to-br from-yellow-100 to-orange-100;
}
.icon-bg-error {
@apply bg-gradient-to-br from-red-100 to-red-200;
}
}

4
src/components/debug/DatabaseTest.tsx
View File

@ -126,7 +126,7 @@ export default function DatabaseTest() {
case 'error':
return <AlertTriangle className="w-4 h-4 text-red-600" />;
case 'pending':
return <Loader2 className="w-4 h-4 text-blue-600 animate-spin" />;
return <Loader2 className="w-4 h-4 text-primary animate-spin" />;
default:
return null;
}
@ -139,7 +139,7 @@ export default function DatabaseTest() {
case 'error':
return <Badge className="bg-red-100 text-red-800">失败</Badge>;
case 'pending':
return <Badge className="bg-blue-100 text-blue-800">测试中</Badge>;
return <Badge className="bg-red-50 text-red-800">测试中</Badge>;
default:
return null;
}

10
src/components/layout/Header.tsx
View File

@ -24,7 +24,7 @@ export default function Header() {
alt="XCodeReviewer Logo"
className="w-9 h-9 rounded-xl shadow-sm group-hover:shadow-md transition-all"
/>
<span className="text-xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors">XCodeReviewer</span>
<span className="text-xl font-bold text-gray-900 group-hover:text-primary transition-colors">XCodeReviewer</span>
</Link>
{/* Desktop Navigation */}
@ -35,8 +35,8 @@ export default function Header() {
to={route.path}
className={`px-4 py-2 text-sm font-medium rounded-lg transition-all ${
location.pathname === route.path
? "text-blue-600 bg-blue-50"
: "text-gray-700 hover:text-blue-600 hover:bg-gray-50"
? "text-primary bg-red-50"
: "text-gray-700 hover:text-primary hover:bg-gray-50"
}`}
>
{route.name}
@ -74,8 +74,8 @@ export default function Header() {
to={route.path}
className={`block px-3 py-2 text-base font-medium rounded-md transition-colors ${
location.pathname === route.path
? "text-blue-600 bg-blue-50"
: "text-gray-700 hover:text-blue-600 hover:bg-gray-50"
? "text-primary bg-red-50"
: "text-gray-700 hover:text-primary hover:bg-gray-50"
}`}
onClick={() => setMobileMenuOpen(false)}
>

38
src/pages/AdminDashboard.tsx
View File

@ -6,12 +6,12 @@ import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import {
Users,
Settings,
Shield,
Activity,
AlertTriangle,
import {
Users,
Settings,
Shield,
Activity,
AlertTriangle,
Search,
Edit,
Trash2,
@ -94,7 +94,7 @@ export default function AdminDashboard() {
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary"></div>
</div>
);
}
@ -109,7 +109,7 @@ export default function AdminDashboard() {
管理系统用户、配置和监控系统状态
</p>
</div>
<Badge variant="outline" className="bg-blue-50 text-blue-700">
<Badge variant="outline" className="bg-red-50 text-red-700">
<Shield className="w-4 h-4 mr-2" />
管理员权限
</Badge>
@ -120,7 +120,7 @@ export default function AdminDashboard() {
<Card>
<CardContent className="p-6">
<div className="flex items-center">
<Users className="h-8 w-8 text-blue-600" />
<Users className="h-8 w-8 text-primary" />
<div className="ml-4">
<p className="text-sm font-medium text-muted-foreground">总用户数</p>
<p className="text-2xl font-bold">{profiles.length}</p>
@ -211,7 +211,7 @@ export default function AdminDashboard() {
{filteredProfiles.map((profile) => (
<div key={profile.id} className="flex items-center justify-between p-4 border rounded-lg">
<div className="flex items-center space-x-4">
<div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-medium">
<div className="w-10 h-10 bg-gradient-to-r from-primary to-accent rounded-full flex items-center justify-center text-white font-medium">
{profile.full_name?.charAt(0) || profile.phone?.charAt(0) || 'U'}
</div>
<div>
@ -231,16 +231,16 @@ export default function AdminDashboard() {
</p>
</div>
</div>
<div className="flex items-center space-x-3">
<Badge variant={profile.role === 'admin' ? 'default' : 'secondary'}>
{profile.role === 'admin' ? '管理员' : '普通用户'}
</Badge>
{profile.id !== user?.id && (
<Select
value={profile.role}
onValueChange={(value: 'admin' | 'member') =>
onValueChange={(value: 'admin' | 'member') =>
handleUpdateUserRole(profile.id, value)
}
>
@ -253,7 +253,7 @@ export default function AdminDashboard() {
</SelectContent>
</Select>
)}
<Button variant="outline" size="sm">
<Edit className="w-4 h-4" />
</Button>
@ -282,9 +282,9 @@ export default function AdminDashboard() {
<span className="text-sm text-muted-foreground">15%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="bg-blue-600 h-2 rounded-full" style={{ width: '15%' }}></div>
<div className="bg-primary h-2 rounded-full" style={{ width: '15%' }}></div>
</div>
<div className="flex items-center justify-between">
<span className="text-sm font-medium">内存使用率</span>
<span className="text-sm text-muted-foreground">32%</span>
@ -292,7 +292,7 @@ export default function AdminDashboard() {
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="bg-green-600 h-2 rounded-full" style={{ width: '32%' }}></div>
</div>
<div className="flex items-center justify-between">
<span className="text-sm font-medium">磁盘使用率</span>
<span className="text-sm text-muted-foreground">58%</span>
@ -347,8 +347,8 @@ export default function AdminDashboard() {
<p className="text-xs text-muted-foreground">2024-01-15 09:00:00</p>
</div>
</div>
<div className="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
<div className="flex items-center space-x-3 p-3 bg-red-50 rounded-lg">
<div className="w-2 h-2 bg-primary rounded-full"></div>
<div className="flex-1">
<p className="text-sm font-medium">新用户注册</p>
<p className="text-xs text-muted-foreground">2024-01-15 08:45:00</p>

16
src/pages/AuditTasks.tsx
View File

@ -44,8 +44,8 @@ export default function AuditTasks() {
const getStatusColor = (status: string) => {
switch (status) {
case 'completed': return 'bg-green-100 text-green-800';
case 'running': return 'bg-blue-100 text-blue-800';
case 'failed': return 'bg-red-100 text-red-800';
case 'running': return 'bg-red-50 text-red-800';
case 'failed': return 'bg-red-100 text-red-900';
default: return 'bg-gray-100 text-gray-800';
}
};
@ -79,7 +79,7 @@ export default function AuditTasks() {
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary"></div>
</div>
);
}
@ -107,7 +107,7 @@ export default function AuditTasks() {
<p className="stat-label">总任务数</p>
<p className="stat-value text-xl">{tasks.length}</p>
</div>
<div className="stat-icon from-blue-500 to-blue-600">
<div className="stat-icon from-primary to-accent">
<Activity className="w-5 h-5 text-white" />
</div>
</div>
@ -214,13 +214,13 @@ export default function AuditTasks() {
<div className="flex items-center space-x-4">
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
task.status === 'completed' ? 'bg-emerald-100 text-emerald-600' :
task.status === 'running' ? 'bg-blue-100 text-blue-600' :
task.status === 'running' ? 'bg-red-50 text-red-600' :
task.status === 'failed' ? 'bg-red-100 text-red-600' : 'bg-gray-100 text-gray-600'
}`}>
{getStatusIcon(task.status)}
</div>
<div>
<h3 className="font-semibold text-lg text-gray-900 group-hover:text-blue-600 transition-colors">
<h3 className="font-semibold text-lg text-gray-900 group-hover:text-primary transition-colors">
{task.project?.name || '未知项目'}
</h3>
<p className="text-sm text-gray-500">
@ -249,7 +249,7 @@ export default function AuditTasks() {
<p className="text-xs text-gray-500 mt-1">发现问题</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-blue-600">{task.quality_score.toFixed(1)}</p>
<p className="text-2xl font-bold text-primary">{task.quality_score.toFixed(1)}</p>
<p className="text-xs text-gray-500 mt-1">质量评分</p>
</div>
<div className="text-center">
@ -298,7 +298,7 @@ export default function AuditTasks() {
<Card className="card-modern">
<CardContent className="empty-state py-16">
<div className="empty-icon">
<Activity className="w-8 h-8 text-blue-600" />
<Activity className="w-8 h-8 text-primary" />
</div>
<h3 className="text-lg font-medium text-gray-900 mb-2">
{searchTerm || statusFilter !== "all" ? '未找到匹配的任务' : '暂无审计任务'}

0
src/pages/ColorDemo.tsx Normal file
View File

44
src/pages/Dashboard.tsx
View File

@ -74,18 +74,18 @@ export default function Dashboard() {
const getStatusColor = (status: string) => {
switch (status) {
case 'completed': return 'bg-emerald-100 text-emerald-700 border-emerald-200';
case 'running': return 'bg-blue-100 text-blue-700 border-blue-200';
case 'failed': return 'bg-red-100 text-red-700 border-red-200';
case 'running': return 'bg-red-50 text-red-700 border-red-200';
case 'failed': return 'bg-red-100 text-red-800 border-red-300';
default: return 'bg-gray-100 text-gray-700 border-gray-200';
}
};
const issueTypeData = [
{ name: '安全问题', value: 15, color: '#ef4444' },
{ name: '性能问题', value: 25, color: '#f97316' },
{ name: '代码风格', value: 35, color: '#eab308' },
{ name: '潜在Bug', value: 20, color: '#3b82f6' },
{ name: '可维护性', value: 5, color: '#8b5cf6' }
{ name: '安全问题', value: 15, color: '#dc2626' },
{ name: '性能问题', value: 25, color: '#b91c1c' },
{ name: '代码风格', value: 35, color: '#991b1b' },
{ name: '潜在Bug', value: 20, color: '#7f1d1d' },
{ name: '可维护性', value: 5, color: '#450a0a' }
];
const qualityTrendData = [
@ -145,7 +145,7 @@ export default function Dashboard() {
<p className="stat-value">{stats?.total_projects || 5}</p>
<p className="text-xs text-gray-500 mt-1">活跃 {stats?.active_projects || 4} 个</p>
</div>
<div className="stat-icon from-blue-500 to-blue-600 group-hover:scale-110 transition-transform">
<div className="stat-icon from-primary to-accent group-hover:scale-110 transition-transform">
<Code className="w-6 h-6 text-white" />
</div>
</div>
@ -211,7 +211,7 @@ export default function Dashboard() {
<Card className="card-modern">
<CardHeader className="pb-3">
<CardTitle className="flex items-center text-lg">
<TrendingUp className="w-5 h-5 mr-2 text-blue-600" />
<TrendingUp className="w-5 h-5 mr-2 text-primary" />
代码质量趋势
</CardTitle>
</CardHeader>
@ -232,9 +232,9 @@ export default function Dashboard() {
<Line
type="monotone"
dataKey="score"
stroke="#3b82f6"
stroke="hsl(var(--primary))"
strokeWidth={3}
dot={{ fill: '#3b82f6', strokeWidth: 2, r: 4 }}
dot={{ fill: 'hsl(var(--primary))', strokeWidth: 2, r: 4 }}
activeDot={{ r: 6 }}
/>
</LineChart>
@ -246,7 +246,7 @@ export default function Dashboard() {
<Card className="card-modern">
<CardHeader className="pb-3">
<CardTitle className="flex items-center text-lg">
<BarChart3 className="w-5 h-5 mr-2 text-orange-600" />
<BarChart3 className="w-5 h-5 mr-2 text-accent" />
问题类型分布
</CardTitle>
</CardHeader>
@ -278,7 +278,7 @@ export default function Dashboard() {
<Card className="card-modern">
<CardHeader className="pb-3">
<CardTitle className="flex items-center text-lg">
<FileText className="w-5 h-5 mr-2 text-blue-600" />
<FileText className="w-5 h-5 mr-2 text-primary" />
项目概览
</CardTitle>
</CardHeader>
@ -289,10 +289,10 @@ export default function Dashboard() {
<Link
key={project.id}
to={`/projects/${project.id}`}
className="block p-4 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50/50 transition-all group"
className="block p-4 rounded-lg border border-gray-200 hover:border-primary/30 hover:bg-primary/5 transition-all group"
>
<div className="flex items-start justify-between mb-2">
<h4 className="font-medium text-gray-900 group-hover:text-blue-600 transition-colors truncate">
<h4 className="font-medium text-gray-900 group-hover:text-primary transition-colors truncate">
{project.name}
</h4>
<Badge
@ -348,7 +348,7 @@ export default function Dashboard() {
>
<div className="flex items-center space-x-3">
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${task.status === 'completed' ? 'bg-emerald-100 text-emerald-600' :
task.status === 'running' ? 'bg-blue-100 text-blue-600' :
task.status === 'running' ? 'bg-red-50 text-red-600' :
'bg-red-100 text-red-600'
}`}>
{task.status === 'completed' ? <Activity className="w-4 h-4" /> :
@ -356,7 +356,7 @@ export default function Dashboard() {
<AlertTriangle className="w-4 h-4" />}
</div>
<div>
<p className="font-medium text-sm text-gray-900 group-hover:text-blue-600 transition-colors">
<p className="font-medium text-sm text-gray-900 group-hover:text-primary transition-colors">
{task.project?.name || '未知项目'}
</p>
<p className="text-xs text-gray-500">
@ -384,7 +384,7 @@ export default function Dashboard() {
{/* 右侧边栏 - 紧凑设计 */}
<div className="xl:col-span-1 space-y-4">
{/* 快速操作 */}
<Card className="card-modern bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 border border-blue-100/50">
<Card className="card-modern bg-gradient-to-br from-red-50/30 via-background to-red-50/20 border border-red-100/50">
<CardHeader className="pb-3">
<CardTitle className="text-lg flex items-center">
<Zap className="w-5 h-5 mr-2 text-indigo-600" />
@ -450,10 +450,10 @@ export default function Dashboard() {
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
<p className="text-sm font-medium text-blue-900">系统更新</p>
<p className="text-xs text-blue-700 mt-1">新增代码安全检测功能</p>
<p className="text-xs text-blue-600 mt-1">2小时前</p>
<div className="p-3 bg-red-50 rounded-lg border border-red-200">
<p className="text-sm font-medium text-red-900">系统更新</p>
<p className="text-xs text-red-700 mt-1">新增代码安全检测功能</p>
<p className="text-xs text-red-600 mt-1">2小时前</p>
</div>
<div className="p-3 bg-emerald-50 rounded-lg border border-emerald-200">
<p className="text-sm font-medium text-emerald-900">任务完成</p>

157
src/pages/InstantAnalysis.tsx
View File

@ -6,15 +6,15 @@ import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Progress } from "@/components/ui/progress";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
AlertTriangle,
CheckCircle,
import {
AlertTriangle,
CheckCircle,
Clock,
Code,
FileText,
Info,
Code,
FileText,
Info,
Lightbulb,
Shield,
Shield,
Target,
TrendingUp,
Upload,
@ -121,11 +121,11 @@ public class Example {
try {
setAnalyzing(true);
const startTime = Date.now();
const analysisResult = await CodeAnalysisEngine.analyzeCode(code, language);
const endTime = Date.now();
const duration = (endTime - startTime) / 1000;
setResult(analysisResult);
setAnalysisTime(duration);
@ -162,7 +162,7 @@ public class Example {
reader.onload = (e) => {
const content = e.target?.result as string;
setCode(content);
// 根据文件扩展名自动选择语言
const extension = file.name.split('.').pop()?.toLowerCase();
const languageMap: Record<string, string> = {
@ -180,7 +180,7 @@ public class Example {
'php': 'php',
'rb': 'ruby'
};
if (extension && languageMap[extension]) {
setLanguage(languageMap[extension]);
}
@ -202,7 +202,7 @@ public class Example {
case 'critical': return 'bg-red-100 text-red-800 border-red-200';
case 'high': return 'bg-orange-100 text-orange-800 border-orange-200';
case 'medium': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
case 'low': return 'bg-blue-100 text-blue-800 border-blue-200';
case 'low': return 'bg-red-50 text-red-800 border-red-200';
default: return 'bg-gray-100 text-gray-800 border-gray-200';
}
};
@ -325,8 +325,8 @@ public class Example {
</div>
{/* 分析按钮 */}
<Button
onClick={handleAnalyze}
<Button
onClick={handleAnalyze}
disabled={!code.trim() || !language || analyzing}
className="w-full btn-primary"
>
@ -370,14 +370,14 @@ public class Example {
<CardContent>
{/* 核心指标 */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div className="text-center p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl border border-blue-200">
<div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
<div className="text-center p-6 bg-gradient-to-br from-red-50/50 to-red-100/30 rounded-xl border border-red-200">
<div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
<Target className="w-8 h-8 text-white" />
</div>
<div className="text-3xl font-bold text-blue-600 mb-2">
<div className="text-3xl font-bold text-primary mb-2">
{result.quality_score.toFixed(1)}
</div>
<p className="text-sm font-medium text-blue-700 mb-3">质量评分</p>
<p className="text-sm font-medium text-primary/80 mb-3">质量评分</p>
<Progress value={result.quality_score} className="h-2" />
</div>
@ -478,12 +478,11 @@ public class Example {
<div key={index} className="border border-gray-200 rounded-xl p-6 hover:shadow-md transition-all duration-200 bg-white">
<div className="flex items-start justify-between mb-4">
<div className="flex items-start space-x-3">
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
issue.severity === 'critical' ? 'bg-red-100 text-red-600' :
issue.severity === 'high' ? 'bg-orange-100 text-orange-600' :
issue.severity === 'medium' ? 'bg-yellow-100 text-yellow-600' :
'bg-blue-100 text-blue-600'
}`}>
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${issue.severity === 'critical' ? 'bg-red-100 text-red-600' :
issue.severity === 'high' ? 'bg-orange-100 text-orange-600' :
issue.severity === 'medium' ? 'bg-yellow-100 text-yellow-600' :
'bg-red-50 text-red-600'
}`}>
{getTypeIcon(issue.type)}
</div>
<div>
@ -493,15 +492,15 @@ public class Example {
</div>
<Badge className={`${getSeverityColor(issue.severity)} px-3 py-1`}>
{issue.severity === 'critical' ? '严重' :
issue.severity === 'high' ? '高' :
issue.severity === 'medium' ? '中等' : '低'}
issue.severity === 'high' ? '高' :
issue.severity === 'medium' ? '中等' : '低'}
</Badge>
</div>
<p className="text-gray-700 mb-4 leading-relaxed">
{issue.description}
</p>
<div className="bg-gray-900 rounded-lg p-4 mb-4">
<div className="flex items-center justify-between mb-2">
<span className="text-gray-300 text-sm font-medium">问题代码</span>
@ -511,16 +510,16 @@ public class Example {
<code>{issue.code_snippet}</code>
</pre>
</div>
<div className="grid md:grid-cols-2 gap-4">
<div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
<div className="bg-red-50 rounded-lg p-4 border border-red-200">
<div className="flex items-center mb-2">
<Lightbulb className="w-5 h-5 text-blue-600 mr-2" />
<span className="font-medium text-blue-800">修复建议</span>
<Lightbulb className="w-5 h-5 text-primary mr-2" />
<span className="font-medium text-red-800">修复建议</span>
</div>
<p className="text-blue-700 text-sm leading-relaxed">{issue.suggestion}</p>
<p className="text-red-700 text-sm leading-relaxed">{issue.suggestion}</p>
</div>
{issue.ai_explanation && (
<div className="bg-green-50 rounded-lg p-4 border border-green-200">
<div className="flex items-center mb-2">
@ -539,44 +538,60 @@ public class Example {
<TabsContent key={severity} value={severity} className="space-y-4 mt-6">
{result.issues.filter(issue => issue.severity === severity).length > 0 ? (
result.issues.filter(issue => issue.severity === severity).map((issue, index) => (
<div key={index} className={`border rounded-xl p-6 ${
severity === 'critical' ? 'border-red-200 bg-red-50' :
severity === 'high' ? 'border-orange-200 bg-orange-50' :
'border-yellow-200 bg-yellow-50'
}`}>
<div className="flex items-start justify-between mb-3">
<div className="flex items-center space-x-3">
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
severity === 'critical' ? 'bg-red-600 text-white' :
severity === 'high' ? 'bg-orange-600 text-white' :
'bg-yellow-600 text-white'
}`}>
<div key={index} className="border border-gray-200 rounded-xl p-6 hover:shadow-md transition-all duration-200 bg-white">
<div className="flex items-start justify-between mb-4">
<div className="flex items-start space-x-3">
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${issue.severity === 'critical' ? 'bg-red-100 text-red-600' :
issue.severity === 'high' ? 'bg-orange-100 text-orange-600' :
issue.severity === 'medium' ? 'bg-yellow-100 text-yellow-600' :
'bg-red-50 text-red-600'
}`}>
{getTypeIcon(issue.type)}
</div>
<h4 className={`font-semibold ${
severity === 'critical' ? 'text-red-800' :
severity === 'high' ? 'text-orange-800' :
'text-yellow-800'
}`}>{issue.title}</h4>
<div>
<h4 className="font-semibold text-lg text-gray-900 mb-1">{issue.title}</h4>
<p className="text-gray-600 text-sm">第 {issue.line} 行</p>
</div>
</div>
<span className={`text-xs px-2 py-1 rounded ${
severity === 'critical' ? 'bg-red-200 text-red-800' :
severity === 'high' ? 'bg-orange-200 text-orange-800' :
'bg-yellow-200 text-yellow-800'
}`}>
第 {issue.line} 行
</span>
<Badge className={`${getSeverityColor(issue.severity)} px-3 py-1`}>
{issue.severity === 'critical' ? '严重' :
issue.severity === 'high' ? '高' :
issue.severity === 'medium' ? '中等' : '低'}
</Badge>
</div>
<p className={`text-sm mb-3 ${
severity === 'critical' ? 'text-red-700' :
severity === 'high' ? 'text-orange-700' :
'text-yellow-700'
}`}>
<p className="text-gray-700 mb-4 leading-relaxed">
{issue.description}
</p>
<div className="bg-white rounded-lg p-3 border">
<p className="text-sm font-medium text-gray-800 mb-1">修复建议：</p>
<p className="text-sm text-gray-600">{issue.suggestion}</p>
<div className="bg-gray-900 rounded-lg p-4 mb-4">
<div className="flex items-center justify-between mb-2">
<span className="text-gray-300 text-sm font-medium">问题代码</span>
<span className="text-gray-400 text-xs">第 {issue.line} 行</span>
</div>
<pre className="text-sm text-gray-100 overflow-x-auto">
<code>{issue.code_snippet}</code>
</pre>
</div>
<div className="grid md:grid-cols-2 gap-4">
<div className="bg-red-50 rounded-lg p-4 border border-red-200">
<div className="flex items-center mb-2">
<Lightbulb className="w-5 h-5 text-primary mr-2" />
<span className="font-medium text-red-800">修复建议</span>
</div>
<p className="text-red-700 text-sm leading-relaxed">{issue.suggestion}</p>
</div>
{issue.ai_explanation && (
<div className="bg-green-50 rounded-lg p-4 border border-green-200">
<div className="flex items-center mb-2">
<Zap className="w-5 h-5 text-green-600 mr-2" />
<span className="font-medium text-green-800">AI 解释</span>
</div>
<p className="text-green-700 text-sm leading-relaxed">{issue.ai_explanation}</p>
</div>
)}
</div>
</div>
))
@ -620,13 +635,13 @@ public class Example {
<Card className="card-modern">
<CardContent className="py-16">
<div className="text-center">
<div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
<div className="animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
<div className="w-20 h-20 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-6">
<div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
</div>
<h3 className="text-2xl font-bold text-gray-900 mb-3">AI正在分析您的代码</h3>
<p className="text-gray-600 text-lg mb-6">请稍候，这通常只需要几秒钟...</p>
<div className="bg-blue-50 rounded-lg p-6 max-w-md mx-auto">
<p className="text-blue-700 text-sm">
<p className="text-gray-600 text-lg mb-6">请稍候，这通常需要至少30秒钟...</p>
<div className="bg-red-50 rounded-lg p-6 max-w-md mx-auto">
<p className="text-red-700 text-sm">
正在进行安全检测、性能分析、代码风格检查等多维度评估
</p>
</div>

4
src/pages/Login.tsx
View File

@ -29,7 +29,7 @@ const login_config = {
export default function Login() {
return (
<div
className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 flex items-center justify-center p-4"
className="min-h-screen bg-gradient-to-br from-red-50/30 via-white to-red-50/20 flex items-center justify-center p-4"
style={{
backgroundImage: `linear-gradient(rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1)), url('https://miaoda-site-img.cdn.bcebos.com/30639cc7-9e0c-45fa-8987-a5389e64f8e9/images/94d4a1a8-923b-11f0-b78c-5a8ff2041e7f_0.jpg')`,
backgroundSize: 'cover',
@ -39,7 +39,7 @@ export default function Login() {
>
<div className="w-full max-w-md">
<div className="text-center mb-8">
<div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full mb-4 shadow-lg">
<div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-primary to-accent rounded-full mb-4 shadow-lg">
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>

18
src/pages/Projects.tsx
View File

@ -192,7 +192,7 @@ export default function Projects() {
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600"></div>
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary"></div>
</div>
);
}
@ -413,10 +413,10 @@ export default function Projects() {
</div>
)}
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
<div className="flex items-start space-x-3">
<AlertCircle className="w-5 h-5 text-blue-600 mt-0.5" />
<div className="text-sm text-blue-800">
<AlertCircle className="w-5 h-5 text-primary mt-0.5" />
<div className="text-sm text-red-800">
<p className="font-medium mb-1">上传说明：</p>
<ul className="space-y-1 text-xs">
<li>• 请确保 ZIP 文件包含完整的项目代码</li>
@ -469,11 +469,11 @@ export default function Projects() {
<CardHeader className="pb-4">
<div className="flex items-start justify-between">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white text-lg">
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-accent flex items-center justify-center text-white text-lg">
{getRepositoryIcon(project.repository_type)}
</div>
<div>
<CardTitle className="text-lg group-hover:text-blue-600 transition-colors">
<CardTitle className="text-lg group-hover:text-primary transition-colors">
<Link to={`/projects/${project.id}`}>
{project.name}
</Link>
@ -501,7 +501,7 @@ export default function Projects() {
href={project.repository_url}
target="_blank"
rel="noopener noreferrer"
className="hover:text-blue-600 transition-colors flex items-center truncate"
className="hover:text-primary transition-colors flex items-center truncate"
>
<span className="truncate">{project.repository_url.replace('https://', '')}</span>
<ExternalLink className="w-3 h-3 ml-1 flex-shrink-0" />
@ -558,7 +558,7 @@ export default function Projects() {
<Card className="card-modern">
<CardContent className="empty-state py-16">
<div className="empty-icon">
<Code className="w-8 h-8 text-blue-600" />
<Code className="w-8 h-8 text-primary" />
</div>
<h3 className="text-lg font-medium text-gray-900 mb-2">
{searchTerm ? '未找到匹配的项目' : '暂无项目'}
@ -588,7 +588,7 @@ export default function Projects() {
<p className="stat-label">总项目数</p>
<p className="stat-value text-xl">{projects.length}</p>
</div>
<div className="stat-icon from-blue-500 to-blue-600">
<div className="stat-icon from-primary to-accent">
<Code className="w-5 h-5 text-white" />
</div>
</div>

4
src/pages/TaskDetail.tsx
View File

@ -57,7 +57,7 @@ export default function TaskDetail() {
const getStatusColor = (status: string) => {
switch (status) {
case 'completed': return 'bg-green-100 text-green-800';
case 'running': return 'bg-blue-100 text-blue-800';
case 'running': return 'bg-red-50 text-red-800';
case 'failed': return 'bg-red-100 text-red-800';
default: return 'bg-gray-100 text-gray-800';
}
@ -77,7 +77,7 @@ export default function TaskDetail() {
case 'critical': return 'bg-red-100 text-red-800 border-red-200';
case 'high': return 'bg-orange-100 text-orange-800 border-orange-200';
case 'medium': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
case 'low': return 'bg-blue-100 text-blue-800 border-blue-200';
case 'low': return 'bg-red-50 text-red-800 border-red-200';
default: return 'bg-gray-100 text-gray-800 border-gray-200';
}
};

29
tailwind.config.js
View File

@ -55,9 +55,32 @@ export default {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
education: {
blue: 'hsl(var(--education-blue))',
green: 'hsl(var(--education-green))',
// 专业深红色调色板
crimson: {
50: '#fef2f2',
100: '#fee2e2',
200: '#fecaca',
300: '#fca5a5',
400: '#f87171',
500: '#ef4444',
600: '#dc2626',
700: '#b91c1c',
800: '#991b1b',
900: '#7f1d1d',
950: '#450a0a',
},
burgundy: {
50: '#fdf2f8',
100: '#fce7f3',
200: '#fbcfe8',
300: '#f9a8d4',
400: '#f472b6',
500: '#ec4899',
600: '#db2777',
700: '#be185d',
800: '#9d174d',
900: '#831843',
950: '#500724',
},
success: 'hsl(var(--success))',
warning: 'hsl(var(--warning))',