diff --git a/app.py b/app.py
index 6bdb862..de4ed1a 100644
--- a/app.py
+++ b/app.py
@@ -255,12 +255,6 @@ async def serve_tutorial(request: Request):
     return templates.TemplateResponse("tutorial.html", {"request": request, "page": "tutorial"})
 
 
-@app.get("/benchmark", tags=["Frontend"], response_class=HTMLResponse)
-async def serve_benchmark(request: Request):
-    """拦截测试页面"""
-    return templates.TemplateResponse("benchmark.html", {"request": request, "page": "benchmark"})
-
-
 @app.get("/explanation", tags=["Frontend"], response_class=HTMLResponse)
 async def serve_explanation(request: Request):
     """模型解释页面"""
diff --git a/static/css/main.css b/static/css/main.css
index 86d74f6..83e0d9d 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,1038 +1,515 @@
 /*
- * CyberShield - 现代化网络安全检测系统 UI v4.0
- * 设计灵感: Linear, Vercel, Stripe, Apple
- * 特点: 玻璃拟态、流畅动画、深色主题、渐变光效
+ * 网络安全威胁检测系统 - 现代UI v3.0
+ * 参考: Linear, Vercel, Stripe 设计风格
  */
 
-/* ========== CSS变量 - 设计令牌 ========== */
 :root {
-  /* 深色主题色板 */
-  --bg-primary: #09090b;
-  --bg-secondary: #0c0c0f;
-  --bg-tertiary: #111114;
-  --bg-card: rgba(17, 17, 20, 0.8);
-  --bg-card-hover: rgba(24, 24, 28, 0.9);
-  --bg-glass: rgba(255, 255, 255, 0.03);
-  --bg-glass-hover: rgba(255, 255, 255, 0.06);
-  
-  /* 文字颜色 */
-  --text-primary: #fafafa;
-  --text-secondary: #a1a1aa;
-  --text-muted: #71717a;
-  --text-dim: #52525b;
-  
-  /* 边框 */
-  --border-primary: rgba(255, 255, 255, 0.08);
-  --border-secondary: rgba(255, 255, 255, 0.04);
-  --border-glow: rgba(99, 102, 241, 0.4);
-  
-  /* 主题色 - 渐变紫蓝 */
-  --accent-primary: #6366f1;
-  --accent-secondary: #8b5cf6;
-  --accent-tertiary: #a855f7;
-  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
-  --accent-glow: 0 0 40px rgba(99, 102, 241, 0.3);
-  
-  /* 状态色 */
-  --success: #22c55e;
-  --success-bg: rgba(34, 197, 94, 0.1);
-  --success-border: rgba(34, 197, 94, 0.3);
-  --danger: #ef4444;
-  --danger-bg: rgba(239, 68, 68, 0.1);
-  --danger-border: rgba(239, 68, 68, 0.3);
-  --warning: #f59e0b;
-  --warning-bg: rgba(245, 158, 11, 0.1);
-  --warning-border: rgba(245, 158, 11, 0.3);
-  --info: #3b82f6;
-  --info-bg: rgba(59, 130, 246, 0.1);
-  --info-border: rgba(59, 130, 246, 0.3);
-  
-  /* 阴影 */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
-  --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.15);
-  
-  /* 圆角 */
-  --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 16px;
-  --radius-xl: 24px;
-  --radius-full: 9999px;
-  
-  /* 过渡 */
-  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-/* ========== 基础重置 ========== */
-*, *::before, *::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html {
-  scroll-behavior: smooth;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  --bg: #ffffff;
+  --bg-secondary: #fafafa;
+  --bg-tertiary: #f5f5f5;
+  --text-primary: #171717;
+  --text-secondary: #525252;
+  --text-muted: #a3a3a3;
+  --border: #e5e5e5;
+  --border-light: #f0f0f0;
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --primary-light: #dbeafe;
+  --success: #16a34a;
+  --success-light: #dcfce7;
+  --danger: #dc2626;
+  --danger-light: #fee2e2;
+  --warning: #ca8a04;
+  --warning-light: #fef9c3;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
+  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
+  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
+  --radius: 8px;
+  --radius-lg: 12px;
+  --transition: 0.15s ease;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
 
 body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: var(--bg-primary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: var(--bg);
   color: var(--text-primary);
-  line-height: 1.6;
-  min-height: 100vh;
-  overflow-x: hidden;
-}
-
-/* 背景网格效果 */
-body::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: 
-    radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.03) 0%, transparent 50%),
-    radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
-  pointer-events: none;
-  z-index: -1;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
 }
 
-/* ========== 导航栏 ========== */
+/* 导航栏 - 简洁白色风格 */
 .navbar {
-  position: fixed;
+  background: rgba(255,255,255,0.8);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
+  padding: 0;
+  position: sticky;
   top: 0;
-  left: 0;
-  right: 0;
-  height: 64px;
-  background: rgba(9, 9, 11, 0.8);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-  border-bottom: 1px solid var(--border-primary);
-  z-index: 1000;
-  transition: var(--transition-base);
-}
-
-.navbar.scrolled {
-  background: rgba(9, 9, 11, 0.95);
-  box-shadow: var(--shadow-md);
+  z-index: 100;
 }
 
 .navbar .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 100%;
-  max-width: 1400px;
+  height: 64px;
+  max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
 }
 
 .navbar-brand {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  text-decoration: none;
-  font-weight: 700;
-  font-size: 1.25rem;
-  color: var(--text-primary);
-  transition: var(--transition-fast);
-}
-
-.navbar-brand:hover {
+  font-weight: 600;
+  font-size: 1.125rem;
   color: var(--text-primary);
-}
-
-.navbar-brand .logo-icon {
-  width: 36px;
-  height: 36px;
-  background: var(--accent-gradient);
-  border-radius: var(--radius-md);
+  text-decoration: none;
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 1.1rem;
-  box-shadow: var(--accent-glow);
+  gap: 8px;
 }
 
+.navbar-brand i { color: var(--primary); }
+.navbar-brand:hover { color: var(--text-primary); }
+
 .navbar-nav {
   display: flex;
   align-items: center;
   gap: 4px;
   list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-.nav-link {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
+.navbar-nav .nav-link {
   color: var(--text-secondary);
   text-decoration: none;
-  font-size: 0.9rem;
+  padding: 8px 14px;
+  border-radius: 6px;
+  font-size: 0.875rem;
   font-weight: 500;
-  border-radius: var(--radius-md);
-  transition: var(--transition-fast);
-  position: relative;
-}
-
-.nav-link:hover {
-  color: var(--text-primary);
-  background: var(--bg-glass-hover);
-}
-
-.nav-link.active {
-  color: var(--text-primary);
-  background: var(--bg-glass);
-}
-
-.nav-link.active::after {
-  content: '';
-  position: absolute;
-  bottom: 6px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 20px;
-  height: 2px;
-  background: var(--accent-gradient);
-  border-radius: var(--radius-full);
-}
-
-.nav-link i {
-  font-size: 1rem;
-  opacity: 0.8;
-}
-
-/* ========== Hero区域 ========== */
-.hero {
-  position: relative;
-  min-height: 100vh;
+  transition: var(--transition);
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 120px 24px 80px;
-  overflow: hidden;
-}
-
-.hero::before {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: 
-    radial-gradient(ellipse at 30% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
-    radial-gradient(ellipse at 70% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
-  animation: heroGlow 15s ease-in-out infinite alternate;
-  pointer-events: none;
+  gap: 6px;
 }
 
-@keyframes heroGlow {
-  0% { transform: translate(0, 0) rotate(0deg); }
-  100% { transform: translate(-5%, -5%) rotate(3deg); }
+.navbar-nav .nav-link:hover {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
 }
 
-.hero-content {
-  position: relative;
-  text-align: center;
-  max-width: 900px;
-  z-index: 1;
+.navbar-nav .nav-link.active {
+  color: var(--primary);
+  background: var(--primary-light);
 }
 
-.hero-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: var(--bg-glass);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-full);
-  font-size: 0.85rem;
+.language-selector {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 0.8rem;
+  background: var(--bg);
   color: var(--text-secondary);
-  margin-bottom: 32px;
-  animation: fadeInUp 0.6s ease-out;
+  cursor: pointer;
 }
 
-.hero-badge .pulse {
-  width: 8px;
-  height: 8px;
-  background: var(--success);
-  border-radius: 50%;
-  animation: pulse 2s ease-in-out infinite;
-}
+.language-selector:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
 
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.5; transform: scale(1.2); }
+/* Hero区域 - 渐变背景 */
+.hero {
+  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #0ea5e9 100%);
+  padding: 80px 24px;
+  text-align: center;
+  color: #fff;
 }
 
 .hero h1 {
-  font-size: clamp(2.5rem, 8vw, 4.5rem);
-  font-weight: 800;
-  line-height: 1.1;
-  letter-spacing: -0.03em;
-  margin-bottom: 24px;
-  animation: fadeInUp 0.6s ease-out 0.1s both;
-}
-
-.hero h1 .gradient-text {
-  background: var(--accent-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 16px;
+  letter-spacing: -0.02em;
 }
 
 .hero .lead {
   font-size: 1.25rem;
-  color: var(--text-secondary);
+  opacity: 0.9;
   max-width: 600px;
-  margin: 0 auto 40px;
-  animation: fadeInUp 0.6s ease-out 0.2s both;
+  margin: 0 auto 32px;
 }
 
-.hero-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  flex-wrap: wrap;
-  animation: fadeInUp 0.6s ease-out 0.3s both;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ========== 按钮系统 ========== */
+/* 按钮 */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  padding: 14px 28px;
-  font-size: 0.95rem;
-  font-weight: 600;
-  border-radius: var(--radius-md);
+  gap: 8px;
+  padding: 10px 20px;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  border-radius: var(--radius);
   border: none;
   cursor: pointer;
+  transition: var(--transition);
   text-decoration: none;
-  transition: var(--transition-base);
-  position: relative;
-  overflow: hidden;
-}
-
-.btn::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
-  opacity: 0;
-  transition: var(--transition-fast);
-}
-
-.btn:hover::before {
-  opacity: 1;
 }
 
 .btn-primary {
-  background: var(--accent-gradient);
-  color: white;
-  box-shadow: var(--accent-glow);
+  background: var(--primary);
+  color: #fff;
 }
 
 .btn-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 0 50px rgba(99, 102, 241, 0.4);
-  color: white;
+  background: var(--primary-hover);
+  color: #fff;
 }
 
-.btn-secondary {
-  background: var(--bg-glass);
-  color: var(--text-primary);
-  border: 1px solid var(--border-primary);
-}
-
-.btn-secondary:hover {
-  background: var(--bg-glass-hover);
-  border-color: var(--border-glow);
-  color: var(--text-primary);
-}
-
-.btn-outline {
+.btn-outline-light {
   background: transparent;
-  color: var(--text-primary);
-  border: 1px solid var(--border-primary);
+  border: 1px solid rgba(255,255,255,0.4);
+  color: #fff;
 }
 
-.btn-outline:hover {
-  background: var(--bg-glass);
-  border-color: var(--accent-primary);
-  color: var(--text-primary);
+.btn-outline-light:hover {
+  background: rgba(255,255,255,0.1);
+  border-color: #fff;
+  color: #fff;
 }
 
-.btn-ghost {
+.btn-outline-primary {
   background: transparent;
-  color: var(--text-secondary);
-  padding: 10px 16px;
+  border: 1px solid var(--primary);
+  color: var(--primary);
 }
 
-.btn-ghost:hover {
-  color: var(--text-primary);
-  background: var(--bg-glass);
+.btn-outline-primary:hover {
+  background: var(--primary);
+  color: #fff;
 }
 
-.btn-lg {
-  padding: 18px 36px;
-  font-size: 1.05rem;
-}
-
-.btn-sm {
-  padding: 8px 16px;
-  font-size: 0.85rem;
+.btn-outline-danger {
+  background: transparent;
+  border: 1px solid var(--danger);
+  color: var(--danger);
 }
 
-.btn-icon {
-  width: 44px;
-  height: 44px;
-  padding: 0;
-  border-radius: var(--radius-md);
+.btn-outline-danger:hover {
+  background: var(--danger);
+  color: #fff;
 }
 
-/* 按钮加载状态 */
-.btn.loading {
-  pointer-events: none;
-  opacity: 0.7;
+.btn-outline-secondary {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
 }
 
-.btn.loading .btn-text {
-  opacity: 0;
+.btn-outline-secondary:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--text-muted);
 }
 
-.btn.loading::after {
-  content: '';
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border: 2px solid transparent;
-  border-top-color: currentColor;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
+.btn-lg { padding: 14px 28px; font-size: 1rem; }
+.btn-sm { padding: 6px 12px; font-size: 0.8125rem; }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* ========== 卡片系统 ========== */
+/* 卡片 */
 .card {
-  background: var(--bg-card);
-  border: 1px solid var(--border-primary);
+  background: var(--bg);
+  border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  backdrop-filter: blur(10px);
-  transition: var(--transition-base);
+  box-shadow: var(--shadow-sm);
   overflow: hidden;
 }
 
-.card:hover {
-  border-color: var(--border-glow);
-  box-shadow: var(--shadow-glow);
-}
+.card:hover { box-shadow: var(--shadow-md); }
 
 .card-header {
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--border-secondary);
-  background: var(--bg-glass);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  padding: 16px 20px;
 }
 
 .card-header h3 {
-  display: flex;
-  align-items: center;
-  gap: 12px;
   font-size: 1rem;
   font-weight: 600;
   color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
   margin: 0;
 }
 
-.card-header h3 i { color: var(--accent-primary); }
+.card-header h3 i { color: var(--primary); }
 
-.card-body { padding: 24px; }
+.card-body { padding: 20px; }
 
 /* 特性卡片 */
 .feature-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border-primary);
+  background: var(--bg);
+  border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  padding: 32px;
+  padding: 32px 24px;
   text-align: center;
-  transition: var(--transition-base);
-  position: relative;
-  overflow: hidden;
-}
-
-.feature-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--accent-gradient);
-  transform: scaleX(0);
-  transition: var(--transition-base);
+  transition: var(--transition);
 }
 
 .feature-card:hover {
-  border-color: var(--border-glow);
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-glow);
+  border-color: var(--primary);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
 }
 
-.feature-card:hover::before { transform: scaleX(1); }
-
 .feature-icon {
-  width: 64px;
-  height: 64px;
-  background: var(--bg-glass);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-lg);
+  width: 56px;
+  height: 56px;
+  background: var(--primary-light);
+  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
   font-size: 1.5rem;
-  color: var(--accent-primary);
-  transition: var(--transition-base);
-}
-
-.feature-card:hover .feature-icon {
-  background: var(--accent-gradient);
-  color: white;
-  border-color: transparent;
-  box-shadow: var(--accent-glow);
+  color: var(--primary);
 }
 
 .feature-card h3 {
-  font-size: 1.15rem;
+  font-size: 1.125rem;
   font-weight: 600;
   color: var(--text-primary);
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .feature-card p {
-  font-size: 0.95rem;
+  font-size: 0.9375rem;
   color: var(--text-secondary);
   margin: 0;
 }
 
-/* ========== 统计区域 ========== */
+/* 统计区域 */
 .stats-section {
-  padding: 80px 0;
   background: var(--bg-secondary);
-  border-top: 1px solid var(--border-primary);
-  border-bottom: 1px solid var(--border-primary);
-}
-
-.section-header {
-  text-align: center;
-  margin-bottom: 48px;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  padding: 60px 0;
 }
 
-.section-header h2 {
-  font-size: 2rem;
-  font-weight: 700;
+.stats-title {
+  font-size: 1.5rem;
+  font-weight: 600;
   color: var(--text-primary);
-  margin-bottom: 12px;
+  text-align: center;
+  margin-bottom: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
 }
 
-.section-header p {
-  color: var(--text-secondary);
-  font-size: 1.1rem;
-}
+.stats-title i { color: var(--primary); }
 
 .stat-card {
-  background: var(--bg-card);
-  border: 1px solid var(--border-primary);
+  background: var(--bg);
+  border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  padding: 28px;
+  padding: 24px;
   text-align: center;
-  transition: var(--transition-base);
-}
-
-.stat-card:hover {
-  border-color: var(--border-glow);
-  box-shadow: var(--shadow-glow);
 }
 
 .stat-value {
-  font-size: 2.5rem;
-  font-weight: 800;
-  background: var(--accent-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 8px;
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--primary);
+  margin-bottom: 4px;
 }
 
 .stat-label {
-  font-size: 0.9rem;
+  font-size: 0.875rem;
   color: var(--text-secondary);
-  font-weight: 500;
-}
-
-/* ========== 表单元素 ========== */
-.form-group { margin-bottom: 20px; }
-
-.form-label {
-  display: block;
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: var(--text-primary);
-  margin-bottom: 8px;
 }
 
+/* 表单 */
 .form-control, .form-select {
   width: 100%;
-  padding: 12px 16px;
-  font-size: 0.95rem;
+  padding: 10px 14px;
+  font-size: 0.9375rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg);
   color: var(--text-primary);
-  background: var(--bg-glass);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  transition: var(--transition-fast);
-  outline: none;
+  transition: var(--transition);
 }
 
 .form-control:focus, .form-select:focus {
-  border-color: var(--accent-primary);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
-  background: var(--bg-glass-hover);
-}
-
-.form-control::placeholder { color: var(--text-muted); }
-
-.form-select {
-  cursor: pointer;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a1a1aa' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 16px center;
-  padding-right: 44px;
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 }
 
-.form-select option {
-  background: var(--bg-tertiary);
+.form-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
   color: var(--text-primary);
+  margin-bottom: 6px;
 }
 
-/* ========== 警告框 ========== */
+/* Alert */
 .alert {
-  padding: 16px 20px;
-  border-radius: var(--radius-md);
-  font-size: 0.95rem;
+  padding: 14px 16px;
+  border-radius: var(--radius);
+  font-size: 0.9375rem;
   display: flex;
   align-items: flex-start;
-  gap: 12px;
-  border: 1px solid;
+  gap: 10px;
 }
 
 .alert i { margin-top: 2px; }
-.alert-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }
-.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
-.alert-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
-.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
+.alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
+.alert-success { background: var(--success-light); color: #166534; border: 1px solid #bbf7d0; }
+.alert-danger { background: var(--danger-light); color: #991b1b; border: 1px solid #fecaca; }
+.alert-warning { background: var(--warning-light); color: #854d0e; border: 1px solid #fde68a; }
 
-/* ========== 徽章 ========== */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  border-radius: var(--radius-full);
-  border: 1px solid;
-}
-
-.badge-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
-.badge-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
-.badge-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
-.badge-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }
-
-/* ========== 进度条 ========== */
+/* 进度条 */
 .progress {
   height: 8px;
-  background: var(--bg-glass);
-  border-radius: var(--radius-full);
+  background: var(--bg-tertiary);
+  border-radius: 4px;
   overflow: hidden;
-  border: 1px solid var(--border-secondary);
 }
 
 .progress-bar {
   height: 100%;
-  background: var(--accent-gradient);
-  border-radius: var(--radius-full);
-  transition: width 0.5s ease;
-  position: relative;
-}
-
-.progress-bar::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
-  animation: shimmer 2s infinite;
-}
-
-@keyframes shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
+  background: var(--primary);
+  border-radius: 4px;
+  transition: width 0.3s ease;
 }
 
-/* ========== 终端/日志 ========== */
+/* 日志终端 */
 .log-terminal {
-  background: #0a0a0c;
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, monospace;
-  font-size: 0.8rem;
-  line-height: 1.7;
-  padding: 20px;
+  background: #1a1a1a;
+  color: #22c55e;
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 0.8125rem;
+  padding: 16px;
+  border-radius: var(--radius);
+  max-height: 500px;
   overflow-y: auto;
-  color: var(--text-secondary);
+  line-height: 1.6;
 }
 
-.log-terminal::-webkit-scrollbar { width: 6px; }
-.log-terminal::-webkit-scrollbar-track { background: transparent; }
-.log-terminal::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 3px; }
-
-.log-line { padding: 2px 0; }
-.log-line.error { color: var(--danger); }
-.log-line.success { color: var(--success); }
-.log-line.warning { color: var(--warning); }
-.log-line.info { color: var(--info); }
+.log-line { margin-bottom: 2px; }
+.log-line.error { color: #ef4444; }
+.log-line.success { color: #22c55e; }
+.log-line.warning { color: #eab308; }
+.log-line.info { color: #3b82f6; }
 
-/* ========== 结果展示 ========== */
-.result-card {
-  text-align: center;
-  padding: 48px 32px;
-}
-
-.result-icon {
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  display: flex;
+/* 徽章 */
+.badge-custom {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  margin: 0 auto 24px;
-  font-size: 3rem;
-  animation: resultPop 0.5s var(--transition-bounce);
-}
-
-@keyframes resultPop {
-  0% { transform: scale(0); opacity: 0; }
-  100% { transform: scale(1); opacity: 1; }
-}
-
-.result-safe .result-icon { background: var(--success-bg); color: var(--success); border: 2px solid var(--success-border); }
-.result-danger .result-icon { background: var(--danger-bg); color: var(--danger); border: 2px solid var(--danger-border); }
-
-.result-title {
-  font-size: 2rem;
-  font-weight: 700;
-  margin-bottom: 12px;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border-radius: 6px;
 }
 
-.result-safe .result-title { color: var(--success); }
-.result-danger .result-title { color: var(--danger); }
+.badge-success { background: var(--success-light); color: var(--success); }
+.badge-danger { background: var(--danger-light); color: var(--danger); }
+.badge-warning { background: var(--warning-light); color: var(--warning); }
 
-/* ========== 页面布局 ========== */
-.page-wrapper {
-  padding-top: 64px;
-  min-height: 100vh;
-}
-
-.page-header {
-  padding: 60px 0 40px;
-  text-align: center;
+/* 教程步骤 */
+.tutorial-step {
   position: relative;
+  padding-left: 60px;
+  margin-bottom: 24px;
 }
 
-.page-header::before {
-  content: '';
+.tutorial-step::before {
+  content: attr(data-step);
   position: absolute;
-  top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
-  background: radial-gradient(ellipse at center top, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
-  pointer-events: none;
+  top: 0;
+  width: 40px;
+  height: 40px;
+  background: var(--primary);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 1rem;
 }
 
-.page-header h1 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-bottom: 12px;
+.tutorial-step h4 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 6px;
 }
 
-.page-header p {
+.tutorial-step p, .tutorial-step ul {
   color: var(--text-secondary);
-  font-size: 1.1rem;
+  font-size: 0.9375rem;
 }
 
-.page-content {
-  padding: 40px 0 80px;
-}
+/* 结果展示 */
+.result-safe { background: var(--success) !important; color: #fff !important; }
+.result-danger { background: var(--danger) !important; color: #fff !important; }
 
-/* ========== 容器 ========== */
-.container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0 24px;
-}
+/* Accordion */
+.accordion-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
+.accordion-button { background: var(--bg-secondary); padding: 14px 16px; font-weight: 500; color: var(--text-primary); }
+.accordion-button:not(.collapsed) { background: var(--primary-light); color: var(--primary); }
+.accordion-body { padding: 16px; background: var(--bg); }
 
-.container-sm { max-width: 800px; }
-.container-md { max-width: 1000px; }
-.container-lg { max-width: 1200px; }
+/* Footer */
+footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 24px 0; text-align: center; color: var(--text-secondary); font-size: 0.875rem; }
+footer a { color: var(--text-secondary); text-decoration: none; }
+footer a:hover { color: var(--primary); }
 
-/* ========== 网格系统 ========== */
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -12px;
+/* 响应式 */
+@media (max-width: 768px) {
+  .hero { padding: 48px 16px; }
+  .hero h1 { font-size: 2rem; }
+  .navbar .container { padding: 0 16px; }
+  .feature-card { padding: 24px 16px; }
 }
 
-.col { flex: 1; padding: 0 12px; }
-.col-12 { width: 100%; padding: 0 12px; }
-.col-6 { width: 50%; padding: 0 12px; }
-.col-4 { width: 33.333%; padding: 0 12px; }
-.col-3 { width: 25%; padding: 0 12px; }
-
-@media (min-width: 768px) {
-  .col-md-6 { width: 50%; }
-  .col-md-4 { width: 33.333%; }
-  .col-md-3 { width: 25%; }
-}
-
-@media (min-width: 992px) {
-  .col-lg-8 { width: 66.666%; }
-  .col-lg-6 { width: 50%; }
-  .col-lg-4 { width: 33.333%; }
-  .col-lg-3 { width: 25%; }
-}
-
-/* ========== 工具类 ========== */
-.text-center { text-align: center; }
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-.text-muted { color: var(--text-muted); }
-.text-secondary { color: var(--text-secondary); }
-
-.mb-0 { margin-bottom: 0; }
-.mb-2 { margin-bottom: 8px; }
-.mb-3 { margin-bottom: 16px; }
+/* 工具类 */
+.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
+.py-5 { padding: 48px 0; }
 .mb-4 { margin-bottom: 24px; }
 .mb-5 { margin-bottom: 32px; }
-.mt-3 { margin-top: 16px; }
 .mt-4 { margin-top: 24px; }
-.mt-5 { margin-top: 32px; }
-.py-5 { padding: 48px 0; }
-.px-3 { padding-left: 16px; padding-right: 16px; }
-
-.d-flex { display: flex; }
-.d-none { display: none; }
-.d-block { display: block; }
-.align-items-center { align-items: center; }
-.justify-content-between { justify-content: space-between; }
-.justify-content-center { justify-content: center; }
-.flex-wrap { flex-wrap: wrap; }
-.gap-2 { gap: 8px; }
-.gap-3 { gap: 16px; }
-.gap-4 { gap: 24px; }
-
-.w-100 { width: 100%; }
+.text-center { text-align: center; }
+.text-white { color: #fff; }
+.text-muted { color: var(--text-muted); }
 .fw-bold { font-weight: 600; }
-.small { font-size: 0.875rem; }
-
-/* ========== Footer ========== */
-footer {
-  background: var(--bg-secondary);
-  border-top: 1px solid var(--border-primary);
-  padding: 32px 0;
-  text-align: center;
-}
-
-footer p {
-  color: var(--text-muted);
-  font-size: 0.9rem;
-  margin: 0;
-}
-
-footer a {
-  color: var(--text-secondary);
-  text-decoration: none;
-  transition: var(--transition-fast);
-}
-
-footer a:hover { color: var(--accent-primary); }
-
-/* ========== 移动端导航 ========== */
-.navbar-toggler {
-  display: none;
-  width: 40px;
-  height: 40px;
-  background: var(--bg-glass);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  position: relative;
-}
+.bg-dark { background: #171717; }
+.bg-light { background: var(--bg-secondary); }
+.w-100 { width: 100%; }
+.fade-in { animation: fadeIn 0.4s ease-out; }
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 
-.navbar-toggler span {
-  display: block;
-  width: 18px;
-  height: 2px;
-  background: var(--text-primary);
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  transition: var(--transition-fast);
-}
+/* 滚动条 */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: var(--bg-tertiary); }
+::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; }
 
-.navbar-toggler span:nth-child(1) { top: 12px; }
-.navbar-toggler span:nth-child(2) { top: 19px; }
-.navbar-toggler span:nth-child(3) { top: 26px; }
+/* 移动端导航 */
+.navbar-toggler { display: none; border: 1px solid var(--border); padding: 8px; border-radius: 6px; background: transparent; }
+.navbar-toggler-icon { display: block; width: 20px; height: 2px; background: var(--text-primary); position: relative; }
+.navbar-toggler-icon::before, .navbar-toggler-icon::after { content: ''; position: absolute; width: 20px; height: 2px; background: var(--text-primary); left: 0; }
+.navbar-toggler-icon::before { top: -6px; }
+.navbar-toggler-icon::after { top: 6px; }
 
-@media (max-width: 991px) {
+@media (max-width: 992px) {
   .navbar-toggler { display: block; }
-  
-  .navbar-collapse {
-    display: none;
-    position: absolute;
-    top: 64px;
-    left: 0;
-    right: 0;
-    background: rgba(9, 9, 11, 0.98);
-    backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--border-primary);
-    padding: 16px;
-  }
-  
+  .navbar-collapse { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 16px; }
   .navbar-collapse.show { display: block; }
-  
-  .navbar-nav {
-    flex-direction: column;
-    gap: 4px;
-  }
-  
-  .nav-link {
-    padding: 12px 16px;
-    border-radius: var(--radius-md);
-  }
-}
-
-/* ========== 滚动条 ========== */
-::-webkit-scrollbar { width: 8px; height: 8px; }
-::-webkit-scrollbar-track { background: var(--bg-secondary); }
-::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }
-::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
-
-/* ========== 动画类 ========== */
-.fade-in { animation: fadeIn 0.4s ease-out; }
-.fade-in-up { animation: fadeInUp 0.5s ease-out; }
-.scale-in { animation: scaleIn 0.3s ease-out; }
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes scaleIn {
-  from { transform: scale(0.95); opacity: 0; }
-  to { transform: scale(1); opacity: 1; }
-}
-
-/* ========== 选择框美化 ========== */
-.language-selector {
-  background: var(--bg-glass);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  padding: 8px 12px;
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  cursor: pointer;
-  outline: none;
-}
-
-.language-selector:focus {
-  border-color: var(--accent-primary);
+  .navbar-nav { flex-direction: column; gap: 4px; }
 }
-
-/* ========== Accordion ========== */
-.accordion-item {
-  background: var(--bg-card);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  margin-bottom: 8px;
-  overflow: hidden;
-}
-
-.accordion-button {
-  width: 100%;
-  padding: 16px 20px;
-  background: transparent;
-  border: none;
-  color: var(--text-primary);
-  font-size: 0.95rem;
-  font-weight: 500;
-  text-align: left;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  transition: var(--transition-fast);
-}
-
-.accordion-button:hover { background: var(--bg-glass); }
-.accordion-button:not(.collapsed) { background: var(--bg-glass); color: var(--accent-primary); }
-
-.accordion-body {
-  padding: 16px 20px;
-  border-top: 1px solid var(--border-secondary);
-}
-
-/* ========== 表格 ========== */
-.table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table th, .table td {
-  padding: 12px 16px;
-  text-align: left;
-  border-bottom: 1px solid var(--border-secondary);
-}
-
-.table th {
-  font-weight: 600;
-  color: var(--text-primary);
-  background: var(--bg-glass);
-}
-
-.table td { color: var(--text-secondary); }
-.table tbody tr:hover { background: var(--bg-glass); }
diff --git a/templates/benchmark.html b/templates/benchmark.html
deleted file mode 100644
index 9ea9daf..0000000
--- a/templates/benchmark.html
+++ /dev/null
@@ -1,319 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>拦截测试 - CyberShield</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <link href="/static/css/main.css" rel="stylesheet">
-    <style>
-        :root { --bg:#0a0a0f; --bg-card:rgba(20,20,30,0.6); --border:rgba(255,255,255,0.08); --text:#fff; --text-secondary:#8b8b9e; --accent:#6366f1; --success:#22c55e; --danger:#ef4444; --warning:#f59e0b; }
-        body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
-        .bg-glow { position:fixed; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(ellipse at 20% 20%,rgba(99,102,241,0.12) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(168,85,247,0.08) 0%,transparent 50%); pointer-events:none; z-index:-1; }
-        .navbar { position:fixed; top:0; left:0; right:0; height:64px; background:rgba(10,10,15,0.8); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); z-index:1000; display:flex; align-items:center; justify-content:center; }
-        .navbar-inner { width:100%; max-width:1400px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }
-        .logo { display:flex; align-items:center; gap:12px; font-weight:700; font-size:1.25rem; color:var(--text); text-decoration:none; }
-        .logo-icon { width:36px; height:36px; background:linear-gradient(135deg,#6366f1,#8b5cf6); border-radius:10px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 20px rgba(99,102,241,0.4); }
-        .nav-links { display:flex; gap:8px; }
-        .nav-link { padding:10px 16px; color:var(--text-secondary); text-decoration:none; font-size:0.9rem; font-weight:500; border-radius:8px; transition:all 0.2s; }
-        .nav-link:hover { color:var(--text); background:rgba(255,255,255,0.05); }
-        .nav-link.active { color:var(--text); background:rgba(255,255,255,0.08); }
-        
-        .page-wrapper { padding-top:64px; min-height:100vh; }
-        .page-hero { padding:50px 24px 30px; text-align:center; position:relative; }
-        .page-hero::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(ellipse at center top,rgba(99,102,241,0.12) 0%,transparent 60%); pointer-events:none; }
-        .page-hero h1 { font-size:2.2rem; font-weight:700; margin-bottom:10px; }
-        .page-hero p { color:var(--text-secondary); font-size:1rem; }
-        
-        .main-content { max-width:1200px; margin:0 auto; padding:0 24px 60px; }
-        .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
-        @media(max-width:900px) { .grid-2 { grid-template-columns:1fr; } }
-        
-        .card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
-        .card-header { padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.04); background:rgba(255,255,255,0.02); }
-        .card-header h3 { font-size:0.95rem; font-weight:600; display:flex; align-items:center; gap:10px; }
-        .card-header h3 i { color:var(--accent); }
-        .card-body { padding:20px; }
-        
-        .model-option { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:10px; padding:14px; cursor:pointer; transition:all 0.2s; margin-bottom:10px; }
-        .model-option:hover { border-color:rgba(99,102,241,0.4); }
-        .model-option.selected { border-color:var(--success); background:rgba(34,197,94,0.1); }
-        .model-option .name { font-weight:600; font-size:0.95rem; margin-bottom:4px; }
-        .model-option .desc { font-size:0.8rem; color:var(--text-secondary); }
-        .model-option .stats { display:flex; gap:16px; margin-top:8px; font-size:0.75rem; }
-        .model-option .stat-val { color:var(--success); font-weight:600; }
-        
-        .dataset-option { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:10px; padding:14px; cursor:pointer; transition:all 0.2s; margin-bottom:10px; }
-        .dataset-option:hover { border-color:rgba(99,102,241,0.4); }
-        .dataset-option.selected { border-color:var(--accent); background:rgba(99,102,241,0.1); }
-        .dataset-option .name { font-weight:600; font-size:0.95rem; display:flex; align-items:center; gap:8px; }
-        .dataset-option .badge { font-size:0.65rem; padding:2px 8px; border-radius:10px; background:rgba(99,102,241,0.2); color:var(--accent); }
-        .dataset-option .desc { font-size:0.8rem; color:var(--text-secondary); margin-top:4px; }
-        .dataset-option .meta { font-size:0.75rem; color:var(--text-secondary); margin-top:6px; }
-        
-        .btn { display:inline-flex; align-items:center; gap:10px; padding:14px 28px; font-size:0.95rem; font-weight:600; border-radius:10px; border:none; cursor:pointer; text-decoration:none; transition:all 0.25s; }
-        .btn-primary { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; box-shadow:0 0 25px rgba(99,102,241,0.3); }
-        .btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(99,102,241,0.4); }
-        .btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
-        .btn-secondary { background:rgba(255,255,255,0.05); color:var(--text); border:1px solid var(--border); }
-        
-        .results-section { display:none; margin-top:30px; }
-        .results-section.show { display:block; animation:fadeIn 0.4s ease; }
-        @keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
-        
-        .result-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
-        @media(max-width:700px) { .result-summary { grid-template-columns:repeat(2,1fr); } }
-        .summary-item { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:20px; text-align:center; }
-        .summary-item .value { font-size:2rem; font-weight:800; margin-bottom:4px; }
-        .summary-item .label { font-size:0.8rem; color:var(--text-secondary); }
-        .summary-item.success .value { color:var(--success); }
-        .summary-item.danger .value { color:var(--danger); }
-        .summary-item.warning .value { color:var(--warning); }
-        .summary-item.info .value { background:linear-gradient(135deg,#6366f1,#a855f7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
-        
-        .chart-container { height:300px; position:relative; }
-        .log-box { background:#0a0a0c; border-radius:10px; padding:16px; font-family:'JetBrains Mono',monospace; font-size:0.8rem; max-height:250px; overflow-y:auto; color:var(--text-secondary); }
-        .log-line { padding:2px 0; }
-        .log-line.success { color:var(--success); }
-        .log-line.error { color:var(--danger); }
-        .log-line.info { color:#3b82f6; }
-    </style>
-</head>
-<body>
-    <div class="bg-glow"></div>
-    <nav class="navbar">
-        <div class="navbar-inner">
-            <a href="/" class="logo"><div class="logo-icon"><i class="fas fa-shield-halved"></i></div><span>CyberShield</span></a>
-            <div class="nav-links">
-                <a href="/" class="nav-link">首页</a>
-                <a href="/dashboard" class="nav-link">仪表盘</a>
-                <a href="/model-select" class="nav-link">模型选择</a>
-                <a href="/benchmark" class="nav-link active">拦截测试</a>
-                <a href="/predict" class="nav-link">威胁检测</a>
-                <a href="/train" class="nav-link">模型训练</a>
-            </div>
-        </div>
-    </nav>
-
-    <div class="page-wrapper">
-        <div class="page-hero">
-            <h1><i class="fas fa-flask"></i> 拦截测试</h1>
-            <p>选择模型和权威测试数据集，验证拦截功能是否正常工作</p>
-        </div>
-        
-        <div class="main-content">
-            <div class="grid-2">
-                <div class="card">
-                    <div class="card-header"><h3><i class="fas fa-robot"></i> 选择模型</h3></div>
-                    <div class="card-body" id="modelList">
-                        <div class="model-option selected" data-model="current">
-                            <div class="name">当前部署模型</div>
-                            <div class="desc">使用 models/model.pkl 中的已训练模型</div>
-                            <div class="stats"><span>准确率: <span class="stat-val">95.8%</span></span><span>F1: <span class="stat-val">94.2%</span></span></div>
-                        </div>
-                        <div class="model-option" data-model="xgboost">
-                            <div class="name">XGBoost 分类器</div>
-                            <div class="desc">梯度提升决策树，高效处理表格数据</div>
-                            <div class="stats"><span>准确率: <span class="stat-val">96.2%</span></span><span>F1: <span class="stat-val">95.1%</span></span></div>
-                        </div>
-                        <div class="model-option" data-model="random_forest">
-                            <div class="name">Random Forest</div>
-                            <div class="desc">随机森林集成学习，稳定性强</div>
-                            <div class="stats"><span>准确率: <span class="stat-val">94.5%</span></span><span>F1: <span class="stat-val">93.8%</span></span></div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="card">
-                    <div class="card-header"><h3><i class="fas fa-database"></i> 选择测试数据集</h3></div>
-                    <div class="card-body" id="datasetList">
-                        <div class="dataset-option selected" data-dataset="project_test">
-                            <div class="name">项目测试集 <span class="badge">推荐</span></div>
-                            <div class="desc">来自训练流程的标准测试数据</div>
-                            <div class="meta">~2000 样本 · 30 特征 · 二分类</div>
-                        </div>
-                        <div class="dataset-option" data-dataset="phishing_websites">
-                            <div class="name">UCI Phishing Websites</div>
-                            <div class="desc">UCI机器学习库钓鱼网站数据集</div>
-                            <div class="meta">11,055 样本 · 30 特征 · 权威基准</div>
-                        </div>
-                        <div class="dataset-option" data-dataset="custom">
-                            <div class="name">自定义数据集</div>
-                            <div class="desc">上传您自己的CSV测试数据</div>
-                            <div class="meta">支持 CSV 格式</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="text-center mt-4">
-                <button class="btn btn-primary" id="runTestBtn" onclick="runBenchmark()">
-                    <i class="fas fa-play"></i> 开始测试
-                </button>
-            </div>
-            
-            <div class="results-section" id="resultsSection">
-                <h3 style="margin-bottom:20px;"><i class="fas fa-chart-bar" style="color:var(--accent);margin-right:10px;"></i>测试结果</h3>
-                
-                <div class="result-summary">
-                    <div class="summary-item info"><div class="value" id="resTotal">0</div><div class="label">总样本数</div></div>
-                    <div class="summary-item success"><div class="value" id="resAccuracy">0%</div><div class="label">准确率</div></div>
-                    <div class="summary-item danger"><div class="value" id="resBlocked">0</div><div class="label">拦截威胁</div></div>
-                    <div class="summary-item warning"><div class="value" id="resTime">0ms</div><div class="label">平均耗时</div></div>
-                </div>
-                
-                <div class="grid-2">
-                    <div class="card">
-                        <div class="card-header"><h3><i class="fas fa-chart-pie"></i> 混淆矩阵</h3></div>
-                        <div class="card-body"><div class="chart-container"><canvas id="confusionChart"></canvas></div></div>
-                    </div>
-                    <div class="card">
-                        <div class="card-header"><h3><i class="fas fa-chart-line"></i> 性能指标</h3></div>
-                        <div class="card-body"><div class="chart-container"><canvas id="metricsChart"></canvas></div></div>
-                    </div>
-                </div>
-                
-                <div class="card mt-4">
-                    <div class="card-header"><h3><i class="fas fa-terminal"></i> 测试日志</h3></div>
-                    <div class="card-body"><div class="log-box" id="logBox"></div></div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        let selectedModel = 'current';
-        let selectedDataset = 'project_test';
-        let confusionChart, metricsChart;
-
-        document.querySelectorAll('.model-option').forEach(el => {
-            el.addEventListener('click', () => {
-                document.querySelectorAll('.model-option').forEach(e => e.classList.remove('selected'));
-                el.classList.add('selected');
-                selectedModel = el.dataset.model;
-            });
-        });
-
-        document.querySelectorAll('.dataset-option').forEach(el => {
-            el.addEventListener('click', () => {
-                document.querySelectorAll('.dataset-option').forEach(e => e.classList.remove('selected'));
-                el.classList.add('selected');
-                selectedDataset = el.dataset.dataset;
-            });
-        });
-
-        function addLog(msg, type = '') {
-            const box = document.getElementById('logBox');
-            const line = document.createElement('div');
-            line.className = 'log-line ' + type;
-            line.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
-            box.appendChild(line);
-            box.scrollTop = box.scrollHeight;
-        }
-
-        async function runBenchmark() {
-            const btn = document.getElementById('runTestBtn');
-            btn.disabled = true;
-            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 测试中...';
-            
-            document.getElementById('logBox').innerHTML = '';
-            document.getElementById('resultsSection').classList.add('show');
-            
-            addLog('开始拦截测试...', 'info');
-            addLog(`模型: ${selectedModel}, 数据集: ${selectedDataset}`, 'info');
-
-            try {
-                addLog('正在加载测试数据...', 'info');
-                const res = await fetch('/predict_on_test_data');
-                const data = await res.json();
-                
-                if (data.table_data) {
-                    const total = data.table_data.length;
-                    const blocked = data.table_data.filter(r => r.prediction.includes('危险')).length;
-                    const safe = total - blocked;
-                    
-                    // 模拟计算指标
-                    const accuracy = (0.93 + Math.random() * 0.05).toFixed(3);
-                    const precision = (0.91 + Math.random() * 0.06).toFixed(3);
-                    const recall = (0.90 + Math.random() * 0.07).toFixed(3);
-                    const f1 = (2 * precision * recall / (parseFloat(precision) + parseFloat(recall))).toFixed(3);
-                    
-                    document.getElementById('resTotal').textContent = total;
-                    document.getElementById('resAccuracy').textContent = (accuracy * 100).toFixed(1) + '%';
-                    document.getElementById('resBlocked').textContent = blocked;
-                    document.getElementById('resTime').textContent = (Math.random() * 5 + 1).toFixed(1) + 'ms';
-                    
-                    addLog(`加载完成: ${total} 条测试样本`, 'success');
-                    addLog(`预测完成: 安全=${safe}, 威胁=${blocked}`, 'success');
-                    addLog(`准确率: ${(accuracy*100).toFixed(1)}%, F1: ${(f1*100).toFixed(1)}%`, 'success');
-                    
-                    renderCharts(safe, blocked, accuracy, precision, recall, f1);
-                }
-            } catch (err) {
-                addLog('测试失败: ' + err.message, 'error');
-            } finally {
-                btn.disabled = false;
-                btn.innerHTML = '<i class="fas fa-play"></i> 开始测试';
-            }
-        }
-
-        function renderCharts(safe, blocked, acc, prec, rec, f1) {
-            if (confusionChart) confusionChart.destroy();
-            if (metricsChart) metricsChart.destroy();
-
-            confusionChart = new Chart(document.getElementById('confusionChart'), {
-                type: 'bar',
-                data: {
-                    labels: ['安全 (放行)', '威胁 (拦截)'],
-                    datasets: [{
-                        label: '样本数',
-                        data: [safe, blocked],
-                        backgroundColor: ['rgba(34,197,94,0.7)', 'rgba(239,68,68,0.7)'],
-                        borderRadius: 8
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: { legend: { display: false } },
-                    scales: {
-                        y: { ticks: { color: '#8b8b9e' }, grid: { color: 'rgba(255,255,255,0.05)' } },
-                        x: { ticks: { color: '#8b8b9e' }, grid: { display: false } }
-                    }
-                }
-            });
-
-            metricsChart = new Chart(document.getElementById('metricsChart'), {
-                type: 'radar',
-                data: {
-                    labels: ['准确率', '精确率', '召回率', 'F1分数'],
-                    datasets: [{
-                        label: '性能指标',
-                        data: [acc*100, prec*100, rec*100, f1*100],
-                        backgroundColor: 'rgba(99,102,241,0.2)',
-                        borderColor: '#6366f1',
-                        pointBackgroundColor: '#6366f1',
-                        pointBorderColor: '#fff'
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    scales: {
-                        r: {
-                            min: 80, max: 100,
-                            ticks: { color: '#8b8b9e', backdropColor: 'transparent' },
-                            grid: { color: 'rgba(255,255,255,0.1)' },
-                            pointLabels: { color: '#a1a1aa' }
-                        }
-                    },
-                    plugins: { legend: { labels: { color: '#a1a1aa' } } }
-                }
-            });
-        }
-    </script>
-</body>
-</html>
diff --git a/templates/dashboard.html b/templates/dashboard.html
index ccf3f3a..f9cdb3b 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -3,458 +3,316 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>仪表盘 - CyberShield</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <title>统计仪表盘 - 网络安全威胁检测系统</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
     <link href="/static/css/main.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
-        :root { --bg:#0a0a0f; --bg-card:rgba(20,20,30,0.7); --border:rgba(255,255,255,0.08); --text:#fff; --text-secondary:#8b8b9e; --accent:#6366f1; --success:#22c55e; --danger:#ef4444; --warning:#f59e0b; }
-        * { margin:0; padding:0; box-sizing:border-box; }
-        body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }
-        
-        /* 全屏攻击地图背景 - 与首页相同 */
-        .cyber-bg { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-2; background:#000; }
-        .cyber-bg canvas { width:100%; height:100%; }
-        .bg-overlay { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; background:radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.7) 100%); pointer-events:none; }
-        .scanlines { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,255,0.01) 2px,rgba(0,255,255,0.01) 4px); pointer-events:none; animation:scanMove 8s linear infinite; }
-        @keyframes scanMove { 0%{background-position:0 0} 100%{background-position:0 100vh} }
-        
-        /* 地图图例 */
-        .map-legend { position:fixed; bottom:20px; left:20px; z-index:100; background:rgba(0,0,0,0.8); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:14px 18px; }
-        .map-legend h4 { font-size:0.7rem; color:var(--text-secondary); margin-bottom:10px; text-transform:uppercase; letter-spacing:1px; }
-        .legend-items { display:flex; flex-direction:column; gap:8px; }
-        .legend-item { display:flex; align-items:center; gap:10px; font-size:0.8rem; color:var(--text-secondary); }
-        .legend-line { width:30px; height:3px; border-radius:2px; }
-        .legend-line.safe { background:linear-gradient(90deg, transparent, #22c55e); box-shadow:0 0 10px #22c55e; }
-        .legend-line.challenge { background:linear-gradient(90deg, transparent, #f59e0b); box-shadow:0 0 10px #f59e0b; }
-        .legend-line.danger { background:linear-gradient(90deg, transparent, #ef4444); box-shadow:0 0 10px #ef4444; }
-        
-        /* 实时访问面板 */
-        .live-panel { position:fixed; top:80px; right:20px; z-index:100; width:300px; background:rgba(0,0,0,0.85); backdrop-filter:blur(15px); border:1px solid rgba(255,255,255,0.1); border-radius:12px; overflow:hidden; }
-        .live-panel-header { padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:space-between; }
-        .live-panel-header h3 { font-size:0.85rem; font-weight:600; display:flex; align-items:center; gap:8px; }
-        .live-panel-header h3 i { color:var(--accent); }
-        .live-dot { width:8px; height:8px; background:#22c55e; border-radius:50%; animation:pulse 2s infinite; }
-        @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.4)} 50%{box-shadow:0 0 0 6px rgba(34,197,94,0)} }
-        .access-stats { padding:12px 16px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-bottom:1px solid rgba(255,255,255,0.08); }
-        .access-stat { text-align:center; padding:8px; background:rgba(255,255,255,0.03); border-radius:6px; }
-        .access-stat .num { font-size:1.2rem; font-weight:700; }
-        .access-stat .num.safe { color:#22c55e; }
-        .access-stat .num.challenge { color:#f59e0b; }
-        .access-stat .num.danger { color:#ef4444; }
-        .access-stat .label { font-size:0.6rem; color:var(--text-secondary); margin-top:2px; }
-        .live-logs { max-height:300px; overflow-y:auto; }
-        .live-logs::-webkit-scrollbar { width:4px; }
-        .live-logs::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.2); border-radius:2px; }
-        .live-log-item { padding:10px 16px; border-bottom:1px solid rgba(255,255,255,0.04); font-size:0.75rem; animation:slideIn 0.3s ease; display:flex; align-items:center; gap:10px; }
-        @keyframes slideIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
-        .log-indicator { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
-        .log-indicator.safe { background:#22c55e; box-shadow:0 0 6px #22c55e; }
-        .log-indicator.challenge { background:#f59e0b; box-shadow:0 0 6px #f59e0b; }
-        .log-indicator.danger { background:#ef4444; box-shadow:0 0 6px #ef4444; }
-        .log-content { flex:1; min-width:0; }
-        .log-route { color:var(--text); font-weight:500; }
-        .log-meta { color:var(--text-secondary); font-size:0.65rem; margin-top:2px; }
-        .log-time { color:var(--text-secondary); font-size:0.6rem; }
+        body { background: #0a0a0f; min-height: 100vh; overflow-x: hidden; }
+        .dashboard-container { padding: 20px; max-width: 1600px; margin: 0 auto; }
         
-        /* 导航栏 */
-        .navbar { position:fixed; top:0; left:0; right:0; height:64px; background:rgba(10,10,15,0.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); z-index:1000; display:flex; align-items:center; justify-content:center; }
-        .navbar-inner { width:100%; max-width:1400px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }
-        .logo { display:flex; align-items:center; gap:12px; font-weight:700; font-size:1.25rem; color:var(--text); text-decoration:none; }
-        .logo-icon { width:36px; height:36px; background:linear-gradient(135deg,#6366f1,#8b5cf6); border-radius:10px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 20px rgba(99,102,241,0.4); }
-        .nav-links { display:flex; gap:8px; }
-        .nav-link { padding:10px 16px; color:var(--text-secondary); text-decoration:none; font-size:0.9rem; font-weight:500; border-radius:8px; transition:all 0.2s; }
-        .nav-link:hover { color:var(--text); background:rgba(255,255,255,0.05); }
-        .nav-link.active { color:var(--text); background:rgba(255,255,255,0.08); }
-        
-        /* 主内容区 */
-        .page-wrapper { padding-top:64px; min-height:100vh; }
-        .dashboard-header { padding:28px 24px 20px; max-width:1050px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
-        .dashboard-header h1 { font-size:1.5rem; font-weight:700; display:flex; align-items:center; gap:12px; text-shadow:0 0 30px rgba(99,102,241,0.5); }
-        .dashboard-header h1 i { color:var(--accent); }
-        .header-controls { display:flex; align-items:center; gap:12px; }
-        .time-select { padding:10px 16px; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:0.9rem; }
-        .live-indicator { display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--success); }
-        .dashboard-content { max-width:1050px; margin:0 auto; padding:0 24px 60px; }
+        .stat-card {
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            border-radius: 12px;
+            padding: 20px;
+            border: 1px solid rgba(255,255,255,0.1);
+            height: 100%;
+        }
+        .stat-card .stat-value { font-size: 2rem; font-weight: bold; color: #00d4ff; }
+        .stat-card .stat-label { color: #8892b0; font-size: 0.85rem; margin-bottom: 5px; }
+        .stat-card.danger .stat-value { color: #ff4757; }
+        .stat-card.success .stat-value { color: #2ed573; }
+        .stat-card.warning .stat-value { color: #ffa502; }
         
-        /* 统计卡片 */
-        .stats-row { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }
-        @media(max-width:1100px) { .stats-row { grid-template-columns:repeat(3,1fr); } }
-        @media(max-width:700px) { .stats-row { grid-template-columns:repeat(2,1fr); } }
-        .stat-box { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:14px; transition:all 0.3s; }
-        .stat-box:hover { border-color:rgba(99,102,241,0.3); transform:translateY(-2px); }
-        .stat-box .label { font-size:0.7rem; color:var(--text-secondary); margin-bottom:4px; display:flex; align-items:center; gap:6px; }
-        .stat-box .value { font-size:1.5rem; font-weight:800; background:linear-gradient(135deg,#6366f1,#a855f7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
-        .stat-box.success .value { background:linear-gradient(135deg,#22c55e,#10b981); -webkit-background-clip:text; }
-        .stat-box.danger .value { background:linear-gradient(135deg,#ef4444,#f97316); -webkit-background-clip:text; }
-        .stat-box.warning .value { background:linear-gradient(135deg,#f59e0b,#eab308); -webkit-background-clip:text; }
-        .stat-box.info .value { background:linear-gradient(135deg,#3b82f6,#06b6d4); -webkit-background-clip:text; }
+        .chart-box {
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            border-radius: 12px;
+            padding: 15px;
+            border: 1px solid rgba(255,255,255,0.1);
+            height: 100%;
+        }
+        .chart-box .chart-title { color: #fff; font-size: 0.95rem; margin-bottom: 10px; font-weight: 500; }
+        .chart-wrapper { position: relative; height: 220px; }
+        .chart-wrapper-pie { position: relative; height: 200px; }
         
-        /* 图表 */
-        .charts-grid { display:grid; grid-template-columns:2fr 1fr; gap:12px; margin-bottom:12px; }
-        @media(max-width:1024px) { .charts-grid { grid-template-columns:1fr; } }
-        .chart-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:14px; }
-        .chart-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
-        .chart-header h3 { font-size:0.8rem; font-weight:600; display:flex; align-items:center; gap:8px; }
-        .chart-header h3 i { color:var(--accent); }
-        .chart-wrap { position:relative; height:200px; }
-        .chart-wrap-lg { height:240px; }
-        .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
-        @media(max-width:900px) { .grid-3 { grid-template-columns:1fr; } }
-        .chart-wrap-sm { height:160px; }
+        .log-table { font-size: 0.85rem; }
+        .log-table th { color: #00d4ff; border-color: rgba(255,255,255,0.1); padding: 8px; }
+        .log-table td { color: #ccd6f6; border-color: rgba(255,255,255,0.1); padding: 8px; }
+        .badge-threat { background: #ff4757; font-size: 0.75rem; }
+        .badge-safe { background: #2ed573; }
+        .badge-warning { background: #ffa502; }
         
-        /* 日志 */
-        .logs-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
-        .logs-header { padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:space-between; }
-        .logs-header h3 { font-size:0.8rem; font-weight:600; display:flex; align-items:center; gap:8px; }
-        .logs-header h3 i { color:var(--danger); }
-        .logs-table { width:100%; border-collapse:collapse; }
-        .logs-table th,.logs-table td { padding:8px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.04); font-size:0.7rem; }
-        .logs-table th { color:var(--text-secondary); font-weight:500; background:rgba(255,255,255,0.02); }
-        .logs-table td { color:var(--text-secondary); }
-        .badge-sm { padding:2px 6px; border-radius:8px; font-size:0.6rem; font-weight:600; }
-        .badge-threat { background:rgba(239,68,68,0.15); color:#ef4444; }
-        .badge-block { background:rgba(239,68,68,0.15); color:#ef4444; }
-        .badge-warn { background:rgba(245,158,11,0.15); color:#f59e0b; }
+        .control-bar {
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            border-radius: 12px;
+            padding: 15px 20px;
+            border: 1px solid rgba(255,255,255,0.1);
+            margin-bottom: 20px;
+        }
+        .refresh-btn {
+            background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
+            border: none;
+            padding: 8px 16px;
+            border-radius: 6px;
+            color: #fff;
+            font-size: 0.9rem;
+        }
+        .time-filter {
+            background: rgba(26, 26, 46, 0.9);
+            border: 1px solid rgba(255,255,255,0.2);
+            color: #fff;
+            border-radius: 6px;
+            padding: 8px 12px;
+            font-size: 0.9rem;
+        }
+        .time-filter:focus { outline: none; border-color: #00d4ff; }
+        .time-filter option { background: #1a1a2e; }
         
-        @media(max-width:768px) { .live-panel { display:none; } }
+        .section-title { color: #fff; font-size: 1.1rem; margin-bottom: 15px; }
+        .row-gap { margin-bottom: 20px; }
     </style>
 </head>
 <body>
-    <!-- 全屏攻击地图背景 -->
-    <div class="cyber-bg"><canvas id="cyberMapBg"></canvas></div>
-    <div class="bg-overlay"></div>
-    <div class="scanlines"></div>
-    
-    <!-- 地图图例 -->
-    <div class="map-legend">
-        <h4>访问类型</h4>
-        <div class="legend-items">
-            <div class="legend-item"><div class="legend-line safe"></div><span>正常访问</span></div>
-            <div class="legend-item"><div class="legend-line challenge"></div><span>人机验证</span></div>
-            <div class="legend-item"><div class="legend-line danger"></div><span>恶意攻击</span></div>
-        </div>
-    </div>
-    
-    <!-- 实时访问面板 -->
-    <div class="live-panel">
-        <div class="live-panel-header">
-            <h3><i class="fas fa-satellite-dish"></i> 实时访问监控</h3>
-            <div class="live-dot"></div>
-        </div>
-        <div class="access-stats">
-            <div class="access-stat"><div class="num safe" id="liveNormal">0</div><div class="label">正常</div></div>
-            <div class="access-stat"><div class="num challenge" id="liveChallenge">0</div><div class="label">验证</div></div>
-            <div class="access-stat"><div class="num danger" id="liveDanger">0</div><div class="label">攻击</div></div>
-        </div>
-        <div class="live-logs" id="liveLogs"></div>
-    </div>
-
-    <nav class="navbar">
-        <div class="navbar-inner">
-            <a href="/" class="logo"><div class="logo-icon"><i class="fas fa-shield-halved"></i></div><span>CyberShield</span></a>
-            <div class="nav-links">
-                <a href="/" class="nav-link">首页</a>
-                <a href="/dashboard" class="nav-link active">仪表盘</a>
-                <a href="/model-select" class="nav-link">模型选择</a>
-                <a href="/benchmark" class="nav-link">拦截测试</a>
-                <a href="/predict" class="nav-link">威胁检测</a>
-                <a href="/train" class="nav-link">模型训练</a>
+    <nav class="navbar navbar-expand-lg">
+        <div class="container">
+            <a class="navbar-brand" href="/"><i class="fas fa-shield-alt"></i><span>网络安全检测</span></a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item"><a class="nav-link" href="/"><i class="fas fa-home"></i> 首页</a></li>
+                    <li class="nav-item"><a class="nav-link active" href="/dashboard"><i class="fas fa-chart-pie"></i> 仪表盘</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/train"><i class="fas fa-brain"></i> 训练</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/docs" target="_blank"><i class="fas fa-code"></i> API</a></li>
+                </ul>
             </div>
         </div>
     </nav>
 
-    <div class="page-wrapper">
-        <div class="dashboard-header">
-            <h1><i class="fas fa-chart-pie"></i> 安全态势仪表盘</h1>
-            <div class="header-controls">
-                <select class="time-select" id="timeRange" onchange="loadAll()">
+    <div class="dashboard-container">
+        <div class="control-bar d-flex justify-content-between align-items-center flex-wrap gap-2">
+            <h5 class="text-white mb-0"><i class="fas fa-chart-pie me-2"></i>流量统计仪表盘</h5>
+            <div class="d-flex gap-2 align-items-center">
+                <select id="timeRange" class="time-filter">
                     <option value="1">1小时</option>
                     <option value="6">6小时</option>
                     <option value="24" selected>24小时</option>
                     <option value="168">7天</option>
                 </select>
-                <div class="live-indicator"><span class="live-dot"></span> 实时</div>
+                <span class="text-success small"><i class="fas fa-circle me-1" style="font-size:8px;"></i>实时更新</span>
+                <span class="text-muted small" id="lastUpdate"></span>
             </div>
         </div>
-        
-        <div class="dashboard-content">
-            <div class="stats-row">
-                <div class="stat-box"><div class="label"><i class="fas fa-globe"></i> 总请求</div><div class="value" id="total">0</div></div>
-                <div class="stat-box success"><div class="label"><i class="fas fa-check"></i> 放行</div><div class="value" id="allowed">0</div></div>
-                <div class="stat-box danger"><div class="label"><i class="fas fa-ban"></i> 拦截</div><div class="value" id="blocked">0</div></div>
-                <div class="stat-box warning"><div class="label"><i class="fas fa-user-check"></i> 验证</div><div class="value" id="challenged">0</div></div>
-                <div class="stat-box info"><div class="label"><i class="fas fa-tachometer-alt"></i> 准确率</div><div class="value" id="accuracy">95.8%</div></div>
+
+        <div class="row row-gap g-3">
+            <div class="col-6 col-md-3">
+                <div class="stat-card">
+                    <div class="stat-label"><i class="fas fa-globe me-1"></i>总请求</div>
+                    <div class="stat-value" id="totalRequests">-</div>
+                </div>
+            </div>
+            <div class="col-6 col-md-3">
+                <div class="stat-card success">
+                    <div class="stat-label"><i class="fas fa-check me-1"></i>放行</div>
+                    <div class="stat-value" id="allowedRequests">-</div>
+                </div>
+            </div>
+            <div class="col-6 col-md-3">
+                <div class="stat-card danger">
+                    <div class="stat-label"><i class="fas fa-ban me-1"></i>拦截</div>
+                    <div class="stat-value" id="blockedRequests">-</div>
+                </div>
+            </div>
+            <div class="col-6 col-md-3">
+                <div class="stat-card warning">
+                    <div class="stat-label"><i class="fas fa-user-check me-1"></i>验证</div>
+                    <div class="stat-value" id="challengedRequests">-</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row row-gap g-3">
+            <div class="col-lg-8">
+                <div class="chart-box">
+                    <div class="chart-title"><i class="fas fa-chart-line me-2"></i>流量趋势</div>
+                    <div class="chart-wrapper"><canvas id="timelineChart"></canvas></div>
+                </div>
             </div>
-            
-            <div class="charts-grid">
-                <div class="chart-card">
-                    <div class="chart-header"><h3><i class="fas fa-chart-area"></i> 流量趋势</h3></div>
-                    <div class="chart-wrap chart-wrap-lg"><canvas id="timelineChart"></canvas></div>
+            <div class="col-lg-4">
+                <div class="chart-box">
+                    <div class="chart-title"><i class="fas fa-chart-pie me-2"></i>威胁分布</div>
+                    <div class="chart-wrapper-pie"><canvas id="threatChart"></canvas></div>
                 </div>
-                <div class="chart-card">
-                    <div class="chart-header"><h3><i class="fas fa-chart-pie"></i> 威胁分布</h3></div>
-                    <div class="chart-wrap"><canvas id="threatChart"></canvas></div>
+            </div>
+        </div>
+
+        <div class="row row-gap g-3">
+            <div class="col-lg-6">
+                <div class="chart-box">
+                    <div class="chart-title"><i class="fas fa-tasks me-2"></i>处理动作</div>
+                    <div class="chart-wrapper"><canvas id="actionChart"></canvas></div>
                 </div>
             </div>
-            
-            <div class="grid-3">
-                <div class="chart-card"><div class="chart-header"><h3><i class="fas fa-tasks"></i> 处理动作</h3></div><div class="chart-wrap chart-wrap-sm"><canvas id="actionChart"></canvas></div></div>
-                <div class="chart-card"><div class="chart-header"><h3><i class="fas fa-server"></i> TOP源IP</h3></div><div class="chart-wrap chart-wrap-sm"><canvas id="sourceChart"></canvas></div></div>
-                <div class="chart-card"><div class="chart-header"><h3><i class="fas fa-bullseye"></i> 风险分布</h3></div><div class="chart-wrap chart-wrap-sm"><canvas id="riskChart"></canvas></div></div>
+            <div class="col-lg-6">
+                <div class="chart-box">
+                    <div class="chart-title"><i class="fas fa-server me-2"></i>TOP 10 源IP</div>
+                    <div class="chart-wrapper"><canvas id="sourceChart"></canvas></div>
+                </div>
             </div>
-            
-            <div class="logs-card">
-                <div class="logs-header"><h3><i class="fas fa-exclamation-triangle"></i> 最近威胁日志</h3><span style="font-size:0.65rem;color:var(--text-secondary);" id="logCount">0 条</span></div>
-                <div style="overflow-x:auto;max-height:200px;">
-                    <table class="logs-table">
-                        <thead><tr><th>时间</th><th>源IP</th><th>目标</th><th>类型</th><th>风险</th><th>动作</th></tr></thead>
-                        <tbody id="logsBody"><tr><td colspan="6" style="text-align:center">加载中...</td></tr></tbody>
-                    </table>
+        </div>
+
+        <div class="row g-3">
+            <div class="col-12">
+                <div class="chart-box">
+                    <div class="chart-title"><i class="fas fa-exclamation-triangle me-2"></i>最近威胁日志</div>
+                    <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
+                        <table class="table table-sm log-table mb-0">
+                            <thead style="position: sticky; top: 0; background: #1a1a2e;">
+                                <tr><th>时间</th><th>源IP</th><th>目标</th><th>威胁类型</th><th>风险</th><th>动作</th></tr>
+                            </thead>
+                            <tbody id="threatLogs"></tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         let charts = {};
-        const colors = { primary:'#6366f1', success:'#22c55e', danger:'#ef4444', warning:'#f59e0b', purple:'#a855f7', cyan:'#06b6d4' };
-        const chartColors = [colors.primary, colors.danger, colors.warning, colors.success, colors.purple, colors.cyan, '#ec4899', '#14b8a6'];
-        const zoomOptions = { zoom:{wheel:{enabled:true},pinch:{enabled:true},mode:'xy'}, pan:{enabled:true,mode:'xy'} };
-        const autoScaleOpts = { x:{ticks:{color:'#71717a',font:{size:9}},grid:{color:'rgba(255,255,255,0.03)'}}, y:{ticks:{color:'#71717a',font:{size:9}},grid:{color:'rgba(255,255,255,0.03)'},beginAtZero:true,grace:'10%'} };
-        
+        let isLoading = false;
+
         function initCharts() {
-            const defaultOpts = {responsive:true,maintainAspectRatio:false,animation:{duration:500},plugins:{legend:{labels:{color:'#a1a1aa',font:{size:10}}}}};
+            const defaultOpts = {
+                responsive: true,
+                maintainAspectRatio: false,
+                animation: { duration: 0 },
+                plugins: { legend: { labels: { color: '#ccd6f6', font: { size: 11 } } } }
+            };
+            const scaleOpts = {
+                x: { ticks: { color: '#8892b0', font: { size: 10 } }, grid: { color: 'rgba(255,255,255,0.05)' } },
+                y: { ticks: { color: '#8892b0', font: { size: 10 } }, grid: { color: 'rgba(255,255,255,0.05)' } }
+            };
+
             charts.timeline = new Chart(document.getElementById('timelineChart'), {
-                type:'line', data:{labels:[],datasets:[
-                    {label:'总请求',data:[],borderColor:colors.primary,backgroundColor:'rgba(99,102,241,0.1)',borderWidth:2,tension:0.4,fill:true,pointRadius:0},
-                    {label:'拦截',data:[],borderColor:colors.danger,backgroundColor:'rgba(239,68,68,0.1)',borderWidth:2,tension:0.4,fill:true,pointRadius:0},
-                    {label:'放行',data:[],borderColor:colors.success,borderWidth:1.5,tension:0.4,fill:false,pointRadius:0,borderDash:[5,5]}
-                ]}, options:{...defaultOpts,scales:autoScaleOpts,plugins:{...defaultOpts.plugins,zoom:zoomOptions}}
+                type: 'line',
+                data: { labels: [], datasets: [
+                    { label: '总请求', data: [], borderColor: '#00d4ff', borderWidth: 2, tension: 0.3, fill: false, pointRadius: 0 },
+                    { label: '拦截', data: [], borderColor: '#ff4757', borderWidth: 2, tension: 0.3, fill: false, pointRadius: 0 }
+                ]},
+                options: { ...defaultOpts, scales: scaleOpts, plugins: { ...defaultOpts.plugins, legend: { position: 'top', align: 'end', labels: { color: '#ccd6f6', boxWidth: 12, padding: 8 } } } }
             });
+
             charts.threat = new Chart(document.getElementById('threatChart'), {
-                type:'doughnut', data:{labels:[],datasets:[{data:[],backgroundColor:chartColors,borderWidth:0}]},
-                options:{...defaultOpts,cutout:'60%',plugins:{legend:{position:'right',labels:{color:'#a1a1aa',boxWidth:10,padding:6,font:{size:9}}}}}
+                type: 'doughnut',
+                data: { labels: [], datasets: [{ data: [], backgroundColor: ['#2ed573','#ff4757','#ffa502','#00d4ff','#a55eea','#ff6b81','#70a1ff','#7bed9f','#eccc68','#ff7f50'] }] },
+                options: { ...defaultOpts, plugins: { legend: { position: 'right', labels: { color: '#ccd6f6', font: { size: 10 }, boxWidth: 10, padding: 6 } } } }
             });
+
             charts.action = new Chart(document.getElementById('actionChart'), {
-                type:'bar', data:{labels:[],datasets:[{data:[],backgroundColor:chartColors,borderRadius:4}]},
-                options:{...defaultOpts,indexAxis:'y',scales:autoScaleOpts,plugins:{legend:{display:false}}}
+                type: 'bar',
+                data: { labels: [], datasets: [{ label: '数量', data: [], backgroundColor: ['#2ed573','#ff4757','#ffa502','#00d4ff','#a55eea'] }] },
+                options: { ...defaultOpts, indexAxis: 'y', scales: scaleOpts, plugins: { legend: { display: false } } }
             });
+
             charts.source = new Chart(document.getElementById('sourceChart'), {
-                type:'bar', data:{labels:[],datasets:[{data:[],backgroundColor:colors.primary,borderRadius:4}]},
-                options:{...defaultOpts,scales:autoScaleOpts,plugins:{legend:{display:false}}}
-            });
-            charts.risk = new Chart(document.getElementById('riskChart'), {
-                type:'polarArea', data:{labels:['低','中','高','严重'],datasets:[{data:[],backgroundColor:['rgba(34,197,94,0.6)','rgba(245,158,11,0.6)','rgba(239,68,68,0.6)','rgba(139,92,246,0.6)']}]},
-                options:{...defaultOpts,scales:{r:{ticks:{display:false},grid:{color:'rgba(255,255,255,0.05)'},beginAtZero:true}},plugins:{legend:{position:'right',labels:{color:'#a1a1aa',boxWidth:8,font:{size:9}}}}}
+                type: 'bar',
+                data: { labels: [], datasets: [{ label: '请求数', data: [], backgroundColor: '#00d4ff' }] },
+                options: { ...defaultOpts, scales: scaleOpts, plugins: { legend: { display: false } } }
             });
         }
-        
-        async function loadAll() {
-            const h = document.getElementById('timeRange').value;
-            await Promise.all([loadOverview(h),loadTimeline(h),loadThreats(h),loadActions(h),loadSources(h),loadLogs(),loadRiskDistribution(h)]);
+
+        async function loadAllData() {
+            if (isLoading) return;
+            isLoading = true;
+            const hours = document.getElementById('timeRange').value;
+            try {
+                await Promise.all([loadOverview(hours), loadTimeline(hours), loadThreats(hours), loadActions(hours), loadSources(hours), loadRecentThreats()]);
+                document.getElementById('lastUpdate').textContent = '更新: ' + new Date().toLocaleTimeString();
+            } catch (e) { console.error(e); }
+            isLoading = false;
         }
-        async function loadOverview(h) { try { const r=await fetch(`/api/v1/stats/overview?hours=${h}`);const d=await r.json();animateValue('total',d.total_requests||0);animateValue('allowed',d.allowed_requests||0);animateValue('blocked',d.blocked_requests||0);animateValue('challenged',d.challenged_requests||0);} catch(e){} }
-        function animateValue(id,end) { const el=document.getElementById(id);const start=parseInt(el.textContent.replace(/,/g,''))||0;const duration=500;const startTime=performance.now();function update(now){const p=Math.min((now-startTime)/duration,1);el.textContent=Math.floor(start+(end-start)*p).toLocaleString();if(p<1)requestAnimationFrame(update);}requestAnimationFrame(update); }
-        async function loadTimeline(h) { try { const r=await fetch(`/api/v1/stats/timeline?hours=${h}&interval=60`);const d=await r.json();if(d.success&&d.data){charts.timeline.data.labels=d.data.map(x=>new Date(x.timestamp).toLocaleTimeString('zh-CN',{hour:'2-digit',minute:'2-digit'}));charts.timeline.data.datasets[0].data=d.data.map(x=>x.total);charts.timeline.data.datasets[1].data=d.data.map(x=>x.blocked);charts.timeline.data.datasets[2].data=d.data.map(x=>x.total-x.blocked);charts.timeline.update();}} catch(e){} }
-        async function loadThreats(h) { try { const r=await fetch(`/api/v1/stats/threats?hours=${h}`);const d=await r.json();if(d.success&&d.data){const f=Object.entries(d.data).filter(([k,v])=>k!=='benign'&&v>0).slice(0,6);charts.threat.data.labels=f.map(([k])=>k.toUpperCase());charts.threat.data.datasets[0].data=f.map(([,v])=>v);charts.threat.update();}} catch(e){} }
-        async function loadActions(h) { try { const r=await fetch(`/api/v1/stats/actions?hours=${h}`);const d=await r.json();if(d.success&&d.data){const names={allow:'放行',block:'拦截',challenge:'验证',log:'记录',alert:'告警'};charts.action.data.labels=Object.keys(d.data).map(k=>names[k]||k);charts.action.data.datasets[0].data=Object.values(d.data);charts.action.update();}} catch(e){} }
-        async function loadSources(h) { try { const r=await fetch(`/api/v1/stats/sources?hours=${h}&limit=6`);const d=await r.json();if(d.success&&d.data){charts.source.data.labels=d.data.map(x=>x.ip.length>10?x.ip.slice(0,8)+'..':x.ip);charts.source.data.datasets[0].data=d.data.map(x=>x.count);charts.source.update();}} catch(e){} }
-        async function loadRiskDistribution(h) { try { const r=await fetch(`/api/v1/stats/risk-distribution?hours=${h}`);const d=await r.json();if(d.success&&d.data){let low=0,med=0,high=0,crit=0;d.data.forEach(i=>{if(i.high<=0.3)low+=i.count;else if(i.high<=0.6)med+=i.count;else if(i.high<=0.8)high+=i.count;else crit+=i.count;});charts.risk.data.datasets[0].data=[low,med,high,crit];charts.risk.update();}} catch(e){} }
-        async function loadLogs() { try { const r=await fetch('/api/v1/stats/recent-threats?limit=8');const d=await r.json();const tbody=document.getElementById('logsBody');if(d.success&&d.data?.length){document.getElementById('logCount').textContent=d.data.length+' 条';tbody.innerHTML=d.data.map(l=>`<tr><td>${new Date(l.timestamp).toLocaleString('zh-CN',{month:'2-digit',day:'2-digit',hour:'2-digit',minute:'2-digit'})}</td><td>${l.source_ip}</td><td>${l.dest_ip}:${l.dest_port}</td><td><span class="badge-sm badge-threat">${l.threat_type}</span></td><td>${(l.risk_score*100).toFixed(0)}%</td><td><span class="badge-sm ${l.action==='block'?'badge-block':'badge-warn'}">${l.action}</span></td></tr>`).join('');}else{document.getElementById('logCount').textContent='0 条';tbody.innerHTML='<tr><td colspan="6" style="text-align:center">暂无数据</td></tr>';}} catch(e){document.getElementById('logsBody').innerHTML='<tr><td colspan="6" style="text-align:center">暂无数据</td></tr>';} }
-        
-        document.addEventListener('DOMContentLoaded',()=>{initCharts();initCyberMap();loadAll();setInterval(loadAll,5000);});
-        
-        // ========== 全球网络攻击地图 (与首页相同) ==========
-        const mapCanvas = document.getElementById('cyberMapBg');
-        const ctx = mapCanvas.getContext('2d');
-        let attacks = [];
-        let accessStats = {safe:0, challenge:0, danger:0};
-        
-        // 全球节点位置
-        const nodes = [
-            {x:0.12,y:0.38,name:'美国西部'},{x:0.20,y:0.35,name:'美国东部'},{x:0.25,y:0.35,name:'加拿大'},{x:0.23,y:0.33,name:'纽约'},{x:0.15,y:0.48,name:'墨西哥'},
-            {x:0.32,y:0.68,name:'巴西'},{x:0.47,y:0.30,name:'英国'},{x:0.48,y:0.33,name:'法国'},{x:0.51,y:0.30,name:'德国'},{x:0.55,y:0.42,name:'意大利'},
-            {x:0.58,y:0.28,name:'俄罗斯'},{x:0.60,y:0.43,name:'土耳其'},{x:0.66,y:0.45,name:'印度'},{x:0.73,y:0.48,name:'东南亚'},{x:0.74,y:0.55,name:'新加坡'},
-            {x:0.77,y:0.35,name:'北京'},{x:0.78,y:0.43,name:'上海'},{x:0.79,y:0.40,name:'服务器'},{x:0.80,y:0.42,name:'深圳'},{x:0.82,y:0.36,name:'韩国'},
-            {x:0.85,y:0.38,name:'日本'},{x:0.88,y:0.72,name:'澳大利亚'},{x:0.54,y:0.70,name:'南非'},{x:0.75,y:0.58,name:'印尼'}
-        ];
-        
-        // 服务器节点索引
-        const serverNodeIdx = 17;
-        
-        // 访问类型颜色: 绿色正常, 黄色验证, 红色攻击
-        const accessTypeColors = {
-            safe: '#22c55e',
-            challenge: '#f59e0b', 
-            danger: '#ef4444'
-        };
-        
-        function resizeCanvas() {
-            mapCanvas.width = window.innerWidth * window.devicePixelRatio;
-            mapCanvas.height = window.innerHeight * window.devicePixelRatio;
-            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
+        async function loadOverview(hours) {
+            const res = await fetch(`/api/v1/stats/overview?hours=${hours}`);
+            const d = await res.json();
+            document.getElementById('totalRequests').textContent = d.total_requests.toLocaleString();
+            document.getElementById('allowedRequests').textContent = d.allowed_requests.toLocaleString();
+            document.getElementById('blockedRequests').textContent = d.blocked_requests.toLocaleString();
+            document.getElementById('challengedRequests').textContent = d.challenged_requests.toLocaleString();
         }
-        
-        function generateAttack() {
-            // 随机选择源节点(非服务器)
-            let srcIdx = Math.floor(Math.random() * nodes.length);
-            while(srcIdx === serverNodeIdx) srcIdx = Math.floor(Math.random() * nodes.length);
-            const src = nodes[srcIdx];
-            const dst = nodes[serverNodeIdx]; // 目标始终是服务器
-            
-            // 随机访问类型: 70%正常, 15%验证, 15%攻击
-            const rand = Math.random();
-            let type, color;
-            if(rand < 0.70) { type = 'safe'; color = accessTypeColors.safe; }
-            else if(rand < 0.85) { type = 'challenge'; color = accessTypeColors.challenge; }
-            else { type = 'danger'; color = accessTypeColors.danger; }
-            
-            attacks.push({ src, dst, progress: 0, color, type, speed: 0.008 + Math.random()*0.012 });
-            accessStats[type]++;
-            if(attacks.length > 30) attacks.shift();
-            
-            // 更新统计和日志
-            updateAccessStats();
-            addLiveLog(type, src.name);
+
+        async function loadTimeline(hours) {
+            const res = await fetch(`/api/v1/stats/timeline?hours=${hours}&interval=60`);
+            const d = await res.json();
+            if (d.success && d.data) {
+                charts.timeline.data.labels = d.data.map(x => new Date(x.timestamp).toLocaleTimeString('zh-CN', {hour:'2-digit',minute:'2-digit'}));
+                charts.timeline.data.datasets[0].data = d.data.map(x => x.total);
+                charts.timeline.data.datasets[1].data = d.data.map(x => x.blocked);
+                charts.timeline.update('none');
+            }
         }
-        
-        function updateAccessStats() {
-            document.getElementById('liveNormal').textContent = accessStats.safe;
-            document.getElementById('liveChallenge').textContent = accessStats.challenge;
-            document.getElementById('liveDanger').textContent = accessStats.danger;
+
+        async function loadThreats(hours) {
+            const res = await fetch(`/api/v1/stats/threats?hours=${hours}`);
+            const d = await res.json();
+            if (d.success && d.data) {
+                const filtered = Object.entries(d.data).filter(([k,v]) => k !== 'benign' && v > 0).slice(0, 8);
+                charts.threat.data.labels = filtered.map(([k]) => k.toUpperCase());
+                charts.threat.data.datasets[0].data = filtered.map(([,v]) => v);
+                charts.threat.update('none');
+            }
         }
-        
-        function addLiveLog(type, srcName) {
-            const list = document.getElementById('liveLogs');
-            const time = new Date().toLocaleTimeString('zh-CN',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
-            const typeNames = {safe:'正常访问',challenge:'人机验证',danger:'恶意攻击'};
-            const item = document.createElement('div');
-            item.className = 'live-log-item';
-            item.innerHTML = `<div class="log-indicator ${type}"></div><div class="log-content"><div class="log-route">${srcName} → 服务器</div><div class="log-meta">${typeNames[type]}</div></div><div class="log-time">${time}</div>`;
-            list.insertBefore(item, list.firstChild);
-            while(list.children.length > 12) list.removeChild(list.lastChild);
+
+        async function loadActions(hours) {
+            const res = await fetch(`/api/v1/stats/actions?hours=${hours}`);
+            const d = await res.json();
+            if (d.success && d.data) {
+                const names = { allow:'放行', block:'拦截', challenge:'验证', log:'记录', alert:'告警' };
+                charts.action.data.labels = Object.keys(d.data).map(k => names[k] || k);
+                charts.action.data.datasets[0].data = Object.values(d.data);
+                charts.action.update('none');
+            }
         }
-        
-        function drawMap() {
-            const w = window.innerWidth, h = window.innerHeight;
-            ctx.fillStyle = 'rgba(0,0,0,0.15)';
-            ctx.fillRect(0,0,w,h);
-            
-            // 绘制网格
-            ctx.strokeStyle = 'rgba(99,102,241,0.06)';
-            ctx.lineWidth = 1;
-            for(let i=0;i<20;i++){ctx.beginPath();ctx.moveTo(0,h*i/20);ctx.lineTo(w,h*i/20);ctx.stroke();}
-            for(let i=0;i<30;i++){ctx.beginPath();ctx.moveTo(w*i/30,0);ctx.lineTo(w*i/30,h);ctx.stroke();}
-            
-            // 绘制大陆轮廓
-            ctx.fillStyle = 'rgba(99,102,241,0.04)';
-            const continents = [
-                [[0.05,0.22],[0.32,0.22],[0.35,0.58],[0.12,0.58],[0.05,0.38]],
-                [[0.22,0.60],[0.40,0.55],[0.38,0.88],[0.25,0.88]],
-                [[0.40,0.18],[0.72,0.18],[0.72,0.68],[0.40,0.68]],
-                [[0.62,0.28],[0.92,0.28],[0.92,0.62],[0.68,0.62],[0.62,0.42]],
-                [[0.80,0.64],[0.94,0.64],[0.94,0.82],[0.80,0.82]]
-            ];
-            continents.forEach(pts => {
-                ctx.beginPath();
-                ctx.moveTo(pts[0][0]*w, pts[0][1]*h);
-                pts.slice(1).forEach(p => ctx.lineTo(p[0]*w, p[1]*h));
-                ctx.closePath();
-                ctx.fill();
-            });
-            
-            // 绘制普通节点
-            nodes.forEach((n,i) => {
-                if(i === serverNodeIdx) return;
-                const x=n.x*w, y=n.y*h;
-                ctx.beginPath();
-                ctx.arc(x,y,2,0,Math.PI*2);
-                ctx.fillStyle = 'rgba(99,102,241,0.6)';
-                ctx.fill();
-                ctx.beginPath();
-                ctx.arc(x,y,5,0,Math.PI*2);
-                ctx.strokeStyle = 'rgba(99,102,241,0.2)';
-                ctx.stroke();
-            });
-            
-            // 绘制服务器节点(特殊标记)
-            const server = nodes[serverNodeIdx];
-            const sx = server.x*w, sy = server.y*h;
-            const pulse = 12 + Math.sin(Date.now()/300)*4;
-            ctx.beginPath();
-            ctx.arc(sx,sy,pulse,0,Math.PI*2);
-            ctx.strokeStyle = 'rgba(99,102,241,0.4)';
-            ctx.lineWidth = 2;
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.arc(sx,sy,6,0,Math.PI*2);
-            ctx.fillStyle = '#6366f1';
-            ctx.fill();
-            ctx.beginPath();
-            ctx.arc(sx,sy,3,0,Math.PI*2);
-            ctx.fillStyle = '#fff';
-            ctx.fill();
-            ctx.font = '10px Inter, sans-serif';
-            ctx.fillStyle = '#6366f1';
-            ctx.fillText('服务器', sx+12, sy+4);
-            
-            // 绘制攻击线
-            attacks.forEach((atk,i) => {
-                atk.progress += atk.speed;
-                if(atk.progress >= 1) { attacks.splice(i,1); return; }
-                
-                const srcX=atk.src.x*w, srcY=atk.src.y*h, dstX=atk.dst.x*w, dstY=atk.dst.y*h;
-                const cx=(srcX+dstX)/2, cy=Math.min(srcY,dstY)-80-Math.random()*40;
-                const t = atk.progress;
-                const px = (1-t)*(1-t)*srcX + 2*(1-t)*t*cx + t*t*dstX;
-                const py = (1-t)*(1-t)*srcY + 2*(1-t)*t*cy + t*t*dstY;
-                
-                // 渐变尾迹
-                const grad = ctx.createLinearGradient(srcX,srcY,px,py);
-                grad.addColorStop(0,'transparent');
-                grad.addColorStop(0.7,atk.color+'40');
-                grad.addColorStop(1,atk.color);
-                ctx.beginPath();
-                ctx.moveTo(srcX,srcY);
-                ctx.quadraticCurveTo(cx,cy,px,py);
-                ctx.strokeStyle = grad;
-                ctx.lineWidth = 2;
-                ctx.stroke();
-                
-                // 攻击头部光点
-                ctx.beginPath();
-                ctx.arc(px,py,4,0,Math.PI*2);
-                ctx.fillStyle = atk.color;
-                ctx.fill();
-                ctx.beginPath();
-                ctx.arc(px,py,8,0,Math.PI*2);
-                ctx.fillStyle = atk.color+'30';
-                ctx.fill();
-                
-                // 到达目标时的爆炸效果
-                if(t > 0.92) {
-                    const explodeSize = 15 * (1 - (t-0.92)/0.08);
-                    ctx.beginPath();
-                    ctx.arc(dstX,dstY,explodeSize,0,Math.PI*2);
-                    ctx.strokeStyle = atk.color+'80';
-                    ctx.lineWidth = 2;
-                    ctx.stroke();
-                }
-            });
-            
-            requestAnimationFrame(drawMap);
+
+        async function loadSources(hours) {
+            const res = await fetch(`/api/v1/stats/sources?hours=${hours}&limit=10`);
+            const d = await res.json();
+            if (d.success && d.data) {
+                charts.source.data.labels = d.data.map(x => x.ip.length > 15 ? x.ip.slice(0,12)+'...' : x.ip);
+                charts.source.data.datasets[0].data = d.data.map(x => x.count);
+                charts.source.update('none');
+            }
         }
-        
-        function initCyberMap() {
-            resizeCanvas();
-            window.addEventListener('resize', resizeCanvas);
-            setInterval(generateAttack, 350);
-            drawMap();
+
+        async function loadRecentThreats() {
+            const res = await fetch('/api/v1/stats/recent-threats?limit=10');
+            const d = await res.json();
+            const tbody = document.getElementById('threatLogs');
+            if (d.success && d.data && d.data.length > 0) {
+                tbody.innerHTML = d.data.map(log => `<tr>
+                    <td>${new Date(log.timestamp).toLocaleString('zh-CN',{month:'2-digit',day:'2-digit',hour:'2-digit',minute:'2-digit'})}</td>
+                    <td>${log.source_ip}</td>
+                    <td>${log.dest_ip}:${log.dest_port}</td>
+                    <td><span class="badge badge-threat">${log.threat_type}</span></td>
+                    <td>${(log.risk_score*100).toFixed(0)}%</td>
+                    <td><span class="badge ${log.action==='block'?'badge-threat':'badge-warning'}">${log.action}</span></td>
+                </tr>`).join('');
+            } else {
+                tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">暂无威胁日志</td></tr>';
+            }
         }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            initCharts();
+            loadAllData();
+            document.getElementById('timeRange').addEventListener('change', loadAllData);
+            // 每秒自动刷新
+            setInterval(loadAllData, 1000);
+        });
     </script>
 </body>
 </html>
diff --git a/templates/index.html b/templates/index.html
index 4dc465e..aacb3c2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,791 +3,216 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CyberShield - 智能网络安全威胁检测</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <title data-i18n="home.title">网络安全威胁检测系统</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-    <style>
-        :root {
-            --bg: #0a0a0f;
-            --bg-card: rgba(20, 20, 30, 0.6);
-            --border: rgba(255,255,255,0.08);
-            --text: #ffffff;
-            --text-secondary: #8b8b9e;
-            --accent: #6366f1;
-            --accent-glow: rgba(99, 102, 241, 0.4);
-            --success: #22c55e;
-            --danger: #ef4444;
-        }
-        
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        
-        body {
-            font-family: 'Inter', -apple-system, sans-serif;
-            background: var(--bg);
-            color: var(--text);
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-        
-        /* 全屏攻击地图背景 */
-        .cyber-bg {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -2;
-            background: #000;
-        }
-        
-        .cyber-bg canvas {
-            width: 100%;
-            height: 100%;
-        }
-        
-        /* 背景叠加层 */
-        .bg-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-            background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.7) 100%);
-            pointer-events: none;
-        }
-        
-        /* 扫描线效果 */
-        .scanlines {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-            background: repeating-linear-gradient(
-                0deg,
-                transparent,
-                transparent 2px,
-                rgba(0, 255, 255, 0.01) 2px,
-                rgba(0, 255, 255, 0.01) 4px
-            );
-            pointer-events: none;
-            animation: scanMove 8s linear infinite;
-        }
-        
-        @keyframes scanMove {
-            0% { background-position: 0 0; }
-            100% { background-position: 0 100vh; }
-        }
-        
-        /* 导航 */
-        .navbar {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 64px;
-            background: rgba(10, 10, 15, 0.8);
-            backdrop-filter: blur(20px);
-            border-bottom: 1px solid var(--border);
-            z-index: 1000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        
-        .navbar-inner {
-            width: 100%;
-            max-width: 1200px;
-            padding: 0 24px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-        
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            font-weight: 700;
-            font-size: 1.25rem;
-            color: var(--text);
-            text-decoration: none;
-        }
-        
-        .logo-icon {
-            width: 36px;
-            height: 36px;
-            background: linear-gradient(135deg, #6366f1, #8b5cf6);
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 0 20px var(--accent-glow);
-        }
-        
-        .nav-links {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .nav-link {
-            padding: 10px 16px;
-            color: var(--text-secondary);
-            text-decoration: none;
-            font-size: 0.9rem;
-            font-weight: 500;
-            border-radius: 8px;
-            transition: all 0.2s;
-        }
-        
-        .nav-link:hover { color: var(--text); background: rgba(255,255,255,0.05); }
-        .nav-link.active { color: var(--text); background: rgba(255,255,255,0.08); }
-        
-        /* Hero */
-        .hero {
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            padding: 120px 24px 80px;
-        }
-        
-        .hero-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 16px;
-            background: rgba(255,255,255,0.05);
-            border: 1px solid var(--border);
-            border-radius: 100px;
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            margin-bottom: 32px;
-            animation: fadeInUp 0.6s ease-out;
-        }
-        
-        .pulse {
-            width: 8px;
-            height: 8px;
-            background: var(--success);
-            border-radius: 50%;
-            animation: pulse 2s infinite;
-        }
-        
-        @keyframes pulse {
-            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
-            50% { opacity: 0.8; box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
-        }
-        
-        .hero h1 {
-            font-size: clamp(2rem, 6vw, 3.5rem);
-            font-weight: 800;
-            line-height: 1.2;
-            letter-spacing: -0.02em;
-            margin-bottom: 24px;
-            animation: fadeInUp 0.6s ease-out 0.1s both;
-            text-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
-        }
-        
-        /* 打字机效果 */
-        .typing-text {
-            display: inline-block;
-            overflow: hidden;
-            white-space: nowrap;
-            border-right: 3px solid var(--accent);
-            animation: typing 3s steps(20) 0.5s forwards, blink 0.8s step-end infinite;
-        }
-        
-        @keyframes typing {
-            from { width: 0; }
-            to { width: 100%; }
-        }
-        
-        @keyframes blink {
-            50% { border-color: transparent; }
-        }
-        
-        /* 闪烁霓虹效果 */
-        .neon-text {
-            color: #fff;
-            text-shadow: 
-                0 0 5px #fff,
-                0 0 10px #fff,
-                0 0 20px var(--accent),
-                0 0 40px var(--accent),
-                0 0 80px var(--accent);
-            animation: neonPulse 2s ease-in-out infinite alternate;
-        }
-        
-        @keyframes neonPulse {
-            from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--accent), 0 0 40px var(--accent); }
-            to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px var(--accent), 0 0 80px var(--accent), 0 0 120px var(--accent); }
-        }
-        
-        .gradient-text {
-            background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        
-        .hero-desc {
-            font-size: 1.2rem;
-            color: var(--text-secondary);
-            max-width: 600px;
-            margin-bottom: 40px;
-            line-height: 1.7;
-            animation: fadeInUp 0.6s ease-out 0.2s both;
-        }
-        
-        .hero-actions {
-            display: flex;
-            gap: 16px;
-            flex-wrap: wrap;
-            justify-content: center;
-            animation: fadeInUp 0.6s ease-out 0.3s both;
-        }
-        
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        
-        /* 按钮 - Starfor.me风格 */
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            padding: 14px 28px;
-            font-size: 0.95rem;
-            font-weight: 600;
-            border-radius: 50px;
-            border: none;
-            cursor: pointer;
-            text-decoration: none;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-            transition: left 0.5s;
-        }
-        
-        .btn:hover::before {
-            left: 100%;
-        }
-        
-        .btn-primary {
-            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
-            color: white;
-            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4), 0 0 30px rgba(99, 102, 241, 0.2);
-        }
-        
-        .btn-primary:hover {
-            transform: translateY(-3px) scale(1.02);
-            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5), 0 0 50px rgba(99, 102, 241, 0.3);
-        }
-        
-        .btn-primary:active {
-            transform: translateY(-1px) scale(0.98);
-        }
-        
-        .btn-secondary {
-            background: rgba(255,255,255,0.08);
-            color: var(--text);
-            border: 1px solid rgba(255,255,255,0.15);
-            backdrop-filter: blur(10px);
-        }
-        
-        .btn-secondary:hover {
-            background: rgba(255,255,255,0.15);
-            border-color: rgba(255,255,255,0.3);
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-        }
-        
-        .btn-glow {
-            animation: btnGlow 2s ease-in-out infinite alternate;
-        }
-        
-        @keyframes btnGlow {
-            from { box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4), 0 0 30px rgba(99, 102, 241, 0.2); }
-            to { box-shadow: 0 4px 20px rgba(99, 102, 241, 0.6), 0 0 50px rgba(99, 102, 241, 0.4); }
-        }
-        
-        /* API端点列表 - 滚动效果 */
-        .endpoints-scroll {
-            width: 100%;
-            overflow: hidden;
-            padding: 40px 0;
-            margin-top: 60px;
-            border-top: 1px solid var(--border);
-            border-bottom: 1px solid var(--border);
-            background: rgba(255,255,255,0.02);
-        }
-        
-        .scroll-track {
-            display: flex;
-            gap: 24px;
-            animation: scroll 30s linear infinite;
-            width: max-content;
-        }
-        
-        @keyframes scroll {
-            0% { transform: translateX(0); }
-            100% { transform: translateX(-50%); }
-        }
-        
-        .endpoint-item {
-            padding: 12px 24px;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            white-space: nowrap;
-        }
-        
-        /* 功能卡片 */
-        .features {
-            padding: 100px 24px;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-        
-        .section-title {
-            text-align: center;
-            margin-bottom: 60px;
-        }
-        
-        .section-title h2 {
-            font-size: 2.5rem;
-            font-weight: 700;
-            margin-bottom: 16px;
-        }
-        
-        .section-title p {
-            color: var(--text-secondary);
-            font-size: 1.1rem;
-        }
-        
-        .features-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-            gap: 24px;
-        }
-        
-        .feature-card {
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 16px;
-            padding: 32px;
-            transition: all 0.3s;
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .feature-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 2px;
-            background: linear-gradient(90deg, #6366f1, #a855f7);
-            transform: scaleX(0);
-            transition: transform 0.3s;
-        }
-        
-        .feature-card:hover {
-            border-color: rgba(99, 102, 241, 0.3);
-            transform: translateY(-4px);
-            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
-        }
-        
-        .feature-card:hover::before { transform: scaleX(1); }
-        
-        .feature-icon {
-            width: 56px;
-            height: 56px;
-            background: rgba(99, 102, 241, 0.1);
-            border: 1px solid rgba(99, 102, 241, 0.2);
-            border-radius: 14px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.5rem;
-            color: #6366f1;
-            margin-bottom: 20px;
-            transition: all 0.3s;
-        }
-        
-        .feature-card:hover .feature-icon {
-            background: linear-gradient(135deg, #6366f1, #8b5cf6);
-            color: white;
-            border-color: transparent;
-            box-shadow: 0 0 30px var(--accent-glow);
-        }
-        
-        .feature-card h3 {
-            font-size: 1.2rem;
-            font-weight: 600;
-            margin-bottom: 12px;
-        }
-        
-        .feature-card p {
-            color: var(--text-secondary);
-            font-size: 0.95rem;
-            line-height: 1.6;
-        }
-        
-        /* 统计 */
-        .stats {
-            padding: 80px 24px;
-            background: rgba(255,255,255,0.02);
-            border-top: 1px solid var(--border);
-            border-bottom: 1px solid var(--border);
-        }
-        
-        .stats-grid {
-            max-width: 1000px;
-            margin: 0 auto;
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 32px;
-        }
-        
-        .stat-item {
-            text-align: center;
-        }
-        
-        .stat-value {
-            font-size: 3rem;
-            font-weight: 800;
-            background: linear-gradient(135deg, #6366f1, #a855f7);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            margin-bottom: 8px;
-        }
-        
-        .stat-label {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-        }
-        
-        /* Footer */
-        footer {
-            padding: 40px 24px;
-            text-align: center;
-            border-top: 1px solid var(--border);
-        }
-        
-        footer p {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-        }
-        
-        footer a {
-            color: var(--text-secondary);
-            text-decoration: none;
-            transition: color 0.2s;
-        }
-        
-        footer a:hover { color: var(--accent); }
-        
-        /* 响应式 */
-        @media (max-width: 768px) {
-            .nav-links { display: none; }
-            .hero h1 { font-size: 2.5rem; }
-            .stats-grid { grid-template-columns: repeat(2, 1fr); }
-            .stat-value { font-size: 2rem; }
-        }
-    </style>
+    <link href="/static/css/main.css" rel="stylesheet">
 </head>
 <body>
-    <!-- 全屏攻击地图背景 -->
-    <div class="cyber-bg">
-        <canvas id="cyberMapBg"></canvas>
-    </div>
-    <div class="bg-overlay"></div>
-    <div class="scanlines"></div>
-    
-    <nav class="navbar">
-        <div class="navbar-inner">
-            <a href="/" class="logo">
-                <div class="logo-icon"><i class="fas fa-shield-halved"></i></div>
-                <span>CyberShield</span>
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-expand-lg">
+        <div class="container">
+            <a class="navbar-brand" href="/">
+                <i class="fas fa-shield-alt"></i>
+                <span data-i18n="nav.home">网络安全检测</span>
             </a>
-            <div class="nav-links">
-                <a href="/" class="nav-link active">首页</a>
-                <a href="/dashboard" class="nav-link">仪表盘</a>
-                <a href="/model-select" class="nav-link">模型选择</a>
-                <a href="/benchmark" class="nav-link">拦截测试</a>
-                <a href="/predict" class="nav-link">威胁检测</a>
-                <a href="/train" class="nav-link">模型训练</a>
-                <a href="/docs" class="nav-link" target="_blank">API</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link active" href="/">
+                            <i class="fas fa-home"></i>
+                            <span data-i18n="nav.home">首页</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/dashboard">
+                            <i class="fas fa-chart-pie"></i>
+                            <span>仪表盘</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/model-select">
+                            <i class="fas fa-cubes"></i>
+                            <span>模型选择</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/train">
+                            <i class="fas fa-brain"></i>
+                            <span>模型训练</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/docs" target="_blank">
+                            <i class="fas fa-code"></i>
+                            <span data-i18n="nav.api">API文档</span>
+                        </a>
+                    </li>
+                </ul>
             </div>
         </div>
     </nav>
 
+    <!-- Hero区域 -->
     <section class="hero">
-        <div class="hero-badge">
-            <span class="pulse"></span>
-            <span>系统运行中 · v2.0</span>
-        </div>
-        
-        <h1>
-            <span class="neon-text">智能网络安全</span> <span class="gradient-text">威胁检测平台</span>
-        </h1>
-        
-        <p class="hero-desc">
-            基于机器学习的下一代网络安全解决方案，实时分析流量数据，精准识别潜在威胁
-        </p>
-        
-        <div class="hero-actions">
-            <a href="/predict" class="btn btn-primary btn-glow">
-                <i class="fas fa-rocket"></i> 开始检测
-            </a>
-            <a href="/dashboard" class="btn btn-secondary">
-                <i class="fas fa-chart-line"></i> 查看态势
-            </a>
-            <a href="/docs" class="btn btn-secondary">
-                <i class="fas fa-book"></i> API文档
-            </a>
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 fade-in">
+                    <h1 data-i18n="home.title">网络安全威胁检测系统</h1>
+                    <p class="lead" data-i18n="home.subtitle">基于机器学习的实时网络流量异常检测与预警平台</p>
+                    <div class="mt-4">
+                        <a href="/model-select" class="btn btn-primary btn-lg me-3">
+                            <i class="fas fa-cubes"></i>
+                            <span>配置检测模型</span>
+                        </a>
+                        <a href="/dashboard" class="btn btn-outline-light btn-lg">
+                            <i class="fas fa-chart-pie"></i>
+                            <span>查看仪表盘</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
         </div>
     </section>
 
-    <div class="endpoints-scroll">
-        <div class="scroll-track">
-            <div class="endpoint-item">/predict_live</div>
-            <div class="endpoint-item">/api/train</div>
-            <div class="endpoint-item">/api/system-stats</div>
-            <div class="endpoint-item">/api/data/validate</div>
-            <div class="endpoint-item">/predict_on_test_data</div>
-            <div class="endpoint-item">/api/explanation/generate</div>
-            <div class="endpoint-item">/api/v1/stats/overview</div>
-            <div class="endpoint-item">/api/v1/firewall/rules</div>
-            <div class="endpoint-item">/predict_live</div>
-            <div class="endpoint-item">/api/train</div>
-            <div class="endpoint-item">/api/system-stats</div>
-            <div class="endpoint-item">/api/data/validate</div>
-            <div class="endpoint-item">/predict_on_test_data</div>
-            <div class="endpoint-item">/api/explanation/generate</div>
-            <div class="endpoint-item">/api/v1/stats/overview</div>
-            <div class="endpoint-item">/api/v1/firewall/rules</div>
-        </div>
-    </div>
-
-    <section class="features">
-        <div class="section-title">
-            <h2>核心能力</h2>
-            <p>强大的功能，简洁的体验</p>
-        </div>
-        
-        <div class="features-grid">
-            <div class="feature-card">
-                <div class="feature-icon"><i class="fas fa-brain"></i></div>
-                <h3>智能检测</h3>
-                <p>采用深度学习与集成学习算法，支持DNN、CNN、LSTM等多种模型架构</p>
-            </div>
-            
-            <div class="feature-card">
-                <div class="feature-icon"><i class="fas fa-bolt"></i></div>
-                <h3>实时分析</h3>
-                <p>毫秒级响应速度，WebSocket实时推送，支持大规模流量处理</p>
-            </div>
-            
-            <div class="feature-card">
-                <div class="feature-icon"><i class="fas fa-chart-line"></i></div>
-                <h3>可视化报告</h3>
-                <p>直观的数据仪表盘，SHAP模型解释，一目了然掌握安全态势</p>
-            </div>
-            
-            <div class="feature-card">
-                <div class="feature-icon"><i class="fas fa-shield-alt"></i></div>
-                <h3>智能防火墙</h3>
-                <p>内置规则引擎，自动拦截恶意流量，支持自定义安全策略</p>
+    <!-- 特性展示 -->
+    <section class="py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-3 col-md-6 mb-4">
+                    <div class="card feature-card fade-in">
+                        <div class="feature-icon">
+                            <i class="fas fa-brain"></i>
+                        </div>
+                        <h3 data-i18n="home.feature1.title">智能检测</h3>
+                        <p data-i18n="home.feature1.desc">使用先进的机器学习算法，准确识别网络威胁</p>
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-6 mb-4">
+                    <div class="card feature-card fade-in">
+                        <div class="feature-icon">
+                            <i class="fas fa-bolt"></i>
+                        </div>
+                        <h3 data-i18n="home.feature2.title">实时分析</h3>
+                        <p data-i18n="home.feature2.desc">毫秒级响应，实时分析网络流量数据</p>
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-6 mb-4">
+                    <div class="card feature-card fade-in">
+                        <div class="feature-icon">
+                            <i class="fas fa-user-check"></i>
+                        </div>
+                        <h3 data-i18n="home.feature3.title">易于使用</h3>
+                        <p data-i18n="home.feature3.desc">直观的界面，即使是新手也能快速上手</p>
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-6 mb-4">
+                    <div class="card feature-card fade-in">
+                        <div class="feature-icon">
+                            <i class="fas fa-server"></i>
+                        </div>
+                        <h3 data-i18n="home.feature4.title">高可用性</h3>
+                        <p data-i18n="home.feature4.desc">企业级架构，支持大规模部署</p>
+                    </div>
+                </div>
             </div>
         </div>
     </section>
 
-    <section class="stats">
-        <div class="stats-grid">
-            <div class="stat-item">
-                <div class="stat-value" id="totalPredictions">0</div>
-                <div class="stat-label">总预测次数</div>
-            </div>
-            <div class="stat-item">
-                <div class="stat-value" id="accuracy">95.8%</div>
-                <div class="stat-label">模型准确率</div>
-            </div>
-            <div class="stat-item">
-                <div class="stat-value" id="threats">0</div>
-                <div class="stat-label">已拦截威胁</div>
-            </div>
-            <div class="stat-item">
-                <div class="stat-value">30+</div>
-                <div class="stat-label">特征维度</div>
+    <!-- 系统状态 -->
+    <section class="py-5 stats-section">
+        <div class="container">
+            <h2 class="text-center mb-5 stats-title">
+                <i class="fas fa-chart-bar"></i>
+                <span data-i18n="common.status">系统状态</span>
+            </h2>
+            <div class="row">
+                <div class="col-lg-3 col-md-6 mb-4">
+                    <div class="stat-card">
+                        <div class="stat-value" id="totalPredictions">0</div>
+                        <div class="stat-label">总预测次数</div>
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-6 mb-4">
+                    <div class="stat-card">
+                        <div class="stat-value" id="modelAccuracy">95.8%</div>
+                        <div class="stat-label">模型准确率</div>
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-6 mb-4">
+                    <div class="stat-card">
+                        <div class="stat-value">
+                            <span class="badge badge-custom badge-success" data-i18n="common.healthy">健康</span>
+                        </div>
+                        <div class="stat-label" data-i18n="common.status">系统状态</div>
+                    </div>
+                </div>
+                <div class="col-lg-3 col-md-6 mb-4">
+                    <div class="stat-card">
+                        <div class="stat-value" id="apiVersion">v2.0.0</div>
+                        <div class="stat-label" data-i18n="common.version">版本</div>
+                    </div>
+                </div>
             </div>
         </div>
     </section>
 
-    <footer>
-        <p>&copy; 2025 CyberShield · <a href="https://github.com/zimingttkx/Network-Security-Based-On-ML" target="_blank"><i class="fab fa-github"></i> GitHub</a></p>
+    <!-- Footer -->
+    <footer class="py-4 bg-dark text-white text-center">
+        <div class="container">
+            <p class="mb-0">&copy; 2025 网络安全威胁检测系统. All rights reserved.</p>
+            <p class="mb-0 mt-2">
+                <a href="https://github.com/zimingttkx/Network-Security-Based-On-ML" class="text-white" target="_blank">
+                    <i class="fab fa-github"></i> GitHub
+                </a>
+            </p>
+        </div>
     </footer>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="/static/js/i18n.js"></script>
     <script>
+        // 加载系统统计
         async function loadStats() {
             try {
-                const res = await fetch('/api/system-stats');
-                const data = await res.json();
-                document.getElementById('totalPredictions').textContent = data.total_predictions.toLocaleString();
-                document.getElementById('accuracy').textContent = data.accuracy + '%';
-                document.getElementById('threats').textContent = data.threat_detections.toLocaleString();
-            } catch(e) {}
-        }
-        loadStats();
-        setInterval(loadStats, 10000);
-        
-        // ========== 全屏网络攻击地图背景 ==========
-        const mapCanvas = document.getElementById('cyberMapBg');
-        const ctx = mapCanvas.getContext('2d');
-        let attacks = [];
-        
-        const nodes = [
-            {x:0.12,y:0.38},{x:0.20,y:0.35},{x:0.25,y:0.35},{x:0.23,y:0.33},{x:0.15,y:0.48},
-            {x:0.32,y:0.68},{x:0.47,y:0.30},{x:0.48,y:0.33},{x:0.51,y:0.30},{x:0.55,y:0.42},
-            {x:0.58,y:0.28},{x:0.60,y:0.43},{x:0.66,y:0.45},{x:0.73,y:0.48},{x:0.74,y:0.55},
-            {x:0.77,y:0.35},{x:0.78,y:0.43},{x:0.79,y:0.40},{x:0.80,y:0.42},{x:0.82,y:0.36},
-            {x:0.85,y:0.38},{x:0.88,y:0.72},{x:0.54,y:0.70},{x:0.75,y:0.58}
-        ];
-        
-        const attackColors = ['#ef4444','#f59e0b','#22c55e','#3b82f6','#a855f7','#ec4899','#06b6d4'];
-        
-        function resizeCanvas() {
-            mapCanvas.width = window.innerWidth * window.devicePixelRatio;
-            mapCanvas.height = window.innerHeight * window.devicePixelRatio;
-            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-        }
-        
-        function generateAttack() {
-            const src = nodes[Math.floor(Math.random()*nodes.length)];
-            let dst = nodes[Math.floor(Math.random()*nodes.length)];
-            while(dst === src) dst = nodes[Math.floor(Math.random()*nodes.length)];
-            const color = attackColors[Math.floor(Math.random()*attackColors.length)];
-            attacks.push({ src, dst, progress: 0, color, speed: 0.008 + Math.random()*0.012 });
-            if(attacks.length > 25) attacks.shift();
+                const response = await fetch('/api/system-stats');
+                const data = await response.json();
+
+                if (data.status === 'healthy') {
+                    document.getElementById('totalPredictions').textContent = 
+                        data.total_predictions.toLocaleString();
+                    document.getElementById('modelAccuracy').textContent = 
+                        data.accuracy + '%';
+                    document.getElementById('apiVersion').textContent = 
+                        data.version;
+                }
+            } catch (error) {
+                console.error('Failed to load stats:', error);
+            }
         }
-        
-        function drawMap() {
-            const w = window.innerWidth, h = window.innerHeight;
-            ctx.fillStyle = 'rgba(0,0,0,0.15)';
-            ctx.fillRect(0,0,w,h);
-            
-            // 绘制网格
-            ctx.strokeStyle = 'rgba(99,102,241,0.06)';
-            ctx.lineWidth = 1;
-            for(let i=0;i<20;i++){ctx.beginPath();ctx.moveTo(0,h*i/20);ctx.lineTo(w,h*i/20);ctx.stroke();}
-            for(let i=0;i<30;i++){ctx.beginPath();ctx.moveTo(w*i/30,0);ctx.lineTo(w*i/30,h);ctx.stroke();}
-            
-            // 绘制大陆轮廓
-            ctx.fillStyle = 'rgba(99,102,241,0.04)';
-            const continents = [
-                [[0.05,0.22],[0.32,0.22],[0.35,0.58],[0.12,0.58],[0.05,0.38]],
-                [[0.22,0.60],[0.40,0.55],[0.38,0.88],[0.25,0.88]],
-                [[0.40,0.18],[0.72,0.18],[0.72,0.68],[0.40,0.68]],
-                [[0.62,0.28],[0.92,0.28],[0.92,0.62],[0.68,0.62],[0.62,0.42]],
-                [[0.80,0.64],[0.94,0.64],[0.94,0.82],[0.80,0.82]]
-            ];
-            continents.forEach(pts => {
-                ctx.beginPath();
-                ctx.moveTo(pts[0][0]*w, pts[0][1]*h);
-                pts.slice(1).forEach(p => ctx.lineTo(p[0]*w, p[1]*h));
-                ctx.closePath();
-                ctx.fill();
-            });
-            
-            // 绘制节点
-            nodes.forEach(n => {
-                const x=n.x*w, y=n.y*h;
-                ctx.beginPath();
-                ctx.arc(x,y,2,0,Math.PI*2);
-                ctx.fillStyle = 'rgba(99,102,241,0.6)';
-                ctx.fill();
-                ctx.beginPath();
-                ctx.arc(x,y,5,0,Math.PI*2);
-                ctx.strokeStyle = 'rgba(99,102,241,0.2)';
-                ctx.stroke();
+
+        // 页面加载时获取统计
+        document.addEventListener('DOMContentLoaded', () => {
+            loadStats();
+            // 每10秒刷新一次
+            setInterval(loadStats, 10000);
+
+            // 动画效果
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('fade-in');
+                    }
+                });
             });
-            
-            // 绘制攻击线
-            attacks.forEach((atk,i) => {
-                atk.progress += atk.speed;
-                if(atk.progress >= 1) { attacks.splice(i,1); return; }
-                
-                const sx=atk.src.x*w, sy=atk.src.y*h, dx=atk.dst.x*w, dy=atk.dst.y*h;
-                const cx=(sx+dx)/2, cy=Math.min(sy,dy)-80-Math.random()*40;
-                const t = atk.progress;
-                const px = (1-t)*(1-t)*sx + 2*(1-t)*t*cx + t*t*dx;
-                const py = (1-t)*(1-t)*sy + 2*(1-t)*t*cy + t*t*dy;
-                
-                // 渐变尾迹
-                const grad = ctx.createLinearGradient(sx,sy,px,py);
-                grad.addColorStop(0,'transparent');
-                grad.addColorStop(0.7,atk.color+'40');
-                grad.addColorStop(1,atk.color);
-                ctx.beginPath();
-                ctx.moveTo(sx,sy);
-                ctx.quadraticCurveTo(cx,cy,px,py);
-                ctx.strokeStyle = grad;
-                ctx.lineWidth = 1.5;
-                ctx.stroke();
-                
-                // 攻击头部光点
-                ctx.beginPath();
-                ctx.arc(px,py,3,0,Math.PI*2);
-                ctx.fillStyle = atk.color;
-                ctx.fill();
-                ctx.beginPath();
-                ctx.arc(px,py,6,0,Math.PI*2);
-                ctx.fillStyle = atk.color+'30';
-                ctx.fill();
-                
-                // 到达目标时的爆炸效果
-                if(t > 0.92) {
-                    const explodeSize = 15 * (1 - (t-0.92)/0.08);
-                    ctx.beginPath();
-                    ctx.arc(dx,dy,explodeSize,0,Math.PI*2);
-                    ctx.strokeStyle = atk.color+'80';
-                    ctx.lineWidth = 2;
-                    ctx.stroke();
-                }
+
+            document.querySelectorAll('.feature-card').forEach(card => {
+                observer.observe(card);
             });
-            
-            requestAnimationFrame(drawMap);
-        }
-        
-        resizeCanvas();
-        window.addEventListener('resize', resizeCanvas);
-        setInterval(generateAttack, 400);
-        drawMap();
+        });
     </script>
 </body>
 </html>
diff --git a/templates/predict.html b/templates/predict.html
index 4215f53..4413873 100644
--- a/templates/predict.html
+++ b/templates/predict.html
@@ -3,215 +3,276 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>威胁检测 - CyberShield</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <title data-i18n="predict.title">威胁预测</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <link href="/static/css/main.css" rel="stylesheet">
-    <style>
-        .page-wrapper { padding-top: 64px; min-height: 100vh; }
-        
-        .page-hero {
-            padding: 60px 24px 40px;
-            text-align: center;
-            position: relative;
-        }
-        
-        .page-hero::before {
-            content: '';
-            position: absolute;
-            top: 0; left: 0; right: 0; bottom: 0;
-            background: radial-gradient(ellipse at center top, rgba(99, 102, 241, 0.12) 0%, transparent 60%);
-            pointer-events: none;
-        }
-        
-        .page-hero h1 {
-            font-size: 2.5rem;
-            font-weight: 700;
-            margin-bottom: 12px;
-        }
-        
-        .page-hero p { color: var(--text-secondary); font-size: 1.1rem; }
-        
-        .main-content {
-            max-width: 1000px;
-            margin: 0 auto;
-            padding: 0 24px 80px;
-        }
-        
-        .input-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 16px;
-            margin-bottom: 32px;
-        }
-        
-        .input-group label {
-            display: block;
-            font-size: 0.8rem;
-            color: var(--text-secondary);
-            margin-bottom: 6px;
-            font-weight: 500;
-        }
-        
-        .input-group input {
-            width: 100%;
-            padding: 12px 14px;
-            background: var(--bg-glass);
-            border: 1px solid var(--border-primary);
-            border-radius: 10px;
-            color: var(--text-primary);
-            font-size: 0.95rem;
-            transition: all 0.2s;
-        }
-        
-        .input-group input:focus {
-            outline: none;
-            border-color: var(--accent-primary);
-            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
-        }
-        
-        .action-bar {
-            display: flex;
-            gap: 12px;
-            justify-content: center;
-            flex-wrap: wrap;
-            margin-bottom: 40px;
-        }
-        
-        .result-section {
-            display: none;
-            animation: fadeInUp 0.5s ease-out;
-        }
-        
-        .result-section.show { display: block; }
-        
-        .result-card {
-            background: var(--bg-card);
-            border: 1px solid var(--border-primary);
-            border-radius: 20px;
-            padding: 48px;
-            text-align: center;
-        }
-        
-        .result-icon {
-            width: 120px;
-            height: 120px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 auto 24px;
-            font-size: 3.5rem;
-        }
-        
-        .result-safe .result-icon {
-            background: rgba(34, 197, 94, 0.1);
-            color: #22c55e;
-            border: 2px solid rgba(34, 197, 94, 0.3);
-            box-shadow: 0 0 40px rgba(34, 197, 94, 0.2);
-        }
-        
-        .result-danger .result-icon {
-            background: rgba(239, 68, 68, 0.1);
-            color: #ef4444;
-            border: 2px solid rgba(239, 68, 68, 0.3);
-            box-shadow: 0 0 40px rgba(239, 68, 68, 0.2);
-        }
-        
-        .result-title {
-            font-size: 2rem;
-            font-weight: 700;
-            margin-bottom: 12px;
-        }
-        
-        .result-safe .result-title { color: #22c55e; }
-        .result-danger .result-title { color: #ef4444; }
-        
-        .result-desc { color: var(--text-secondary); font-size: 1rem; }
-        
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-    </style>
 </head>
 <body>
-    <div class="bg-glow" style="position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 20% 20%, rgba(99,102,241,0.15) 0%, transparent 50%),radial-gradient(ellipse at 80% 80%, rgba(168,85,247,0.1) 0%, transparent 50%);pointer-events:none;z-index:-1;"></div>
-    
-    <nav class="navbar">
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-expand-lg">
         <div class="container">
             <a class="navbar-brand" href="/">
-                <div class="logo-icon"><i class="fas fa-shield-halved"></i></div>
-                <span>CyberShield</span>
+                <i class="fas fa-shield-alt"></i>
+                <span data-i18n="nav.home">网络安全检测</span>
             </a>
-            <ul class="navbar-nav">
-                <li><a class="nav-link" href="/">首页</a></li>
-                <li><a class="nav-link" href="/dashboard">仪表盘</a></li>
-                <li><a class="nav-link" href="/model-select">模型选择</a></li>
-                <li><a class="nav-link" href="/benchmark">拦截测试</a></li>
-                <li><a class="nav-link active" href="/predict">威胁检测</a></li>
-                <li><a class="nav-link" href="/train">模型训练</a></li>
-            </ul>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/">
+                            <i class="fas fa-home"></i>
+                            <span data-i18n="nav.home">首页</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="/predict">
+                            <i class="fas fa-chart-line"></i>
+                            <span data-i18n="nav.predict">威胁预测</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/train">
+                            <i class="fas fa-brain"></i>
+                            <span data-i18n="nav.train">模型训练</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/tutorial">
+                            <i class="fas fa-book-open"></i>
+                            <span data-i18n="nav.tutorial">使用教程</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/docs" target="_blank">
+                            <i class="fas fa-code"></i>
+                            <span data-i18n="nav.api">API文档</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <select id="languageSelector" class="language-selector" onchange="setLanguage(this.value)">
+                            <option value="zh-CN">中文</option>
+                            <option value="en-US">English</option>
+                            <option value="ja-JP">日本語</option>
+                        </select>
+                    </li>
+                </ul>
+            </div>
         </div>
     </nav>
 
-    <div class="page-wrapper">
-        <div class="page-hero">
-            <h1><i class="fas fa-search"></i> 威胁检测</h1>
-            <p>输入网络流量特征，实时分析潜在威胁</p>
-        </div>
-        
-        <div class="main-content">
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h3><i class="fas fa-keyboard"></i> 输入特征数据</h3>
-                </div>
-                <div class="card-body">
-                    <div class="alert alert-info mb-4">
-                        <i class="fas fa-info-circle"></i>
-                        <span>请填写30个网络流量特征值（通常为 -1, 0, 1）。可使用快捷按钮填充示例数据。</span>
-                    </div>
-                    
-                    <form id="predictForm">
-                        <div class="input-grid" id="inputGrid"></div>
-                        
-                        <div class="action-bar">
-                            <button type="button" class="btn btn-secondary" onclick="fillSafe()">
-                                <i class="fas fa-check-circle"></i> 安全示例
-                            </button>
-                            <button type="button" class="btn btn-secondary" onclick="fillDanger()">
-                                <i class="fas fa-exclamation-triangle"></i> 威胁示例
-                            </button>
-                            <button type="button" class="btn btn-secondary" onclick="resetForm()">
-                                <i class="fas fa-redo"></i> 重置
-                            </button>
-                            <button type="submit" class="btn btn-primary" id="submitBtn">
-                                <i class="fas fa-search"></i> 开始检测
-                            </button>
+    <!-- 主内容区 -->
+    <section class="py-5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: calc(100vh - 200px);">
+        <div class="container">
+            <div class="text-center text-white mb-5">
+                <h1 class="display-4 fw-bold">
+                    <i class="fas fa-search-plus"></i>
+                    <span data-i18n="predict.title">威胁预测</span>
+                </h1>
+                <p class="lead" data-i18n="predict.upload.desc">输入网络流量特征数据，系统将实时分析威胁等级</p>
+            </div>
+
+            <!-- 预测表单 -->
+            <div class="row">
+                <div class="col-lg-10 offset-lg-1">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="mb-0">
+                                <i class="fas fa-keyboard"></i>
+                                <span data-i18n="predict.json.title">手动输入数据</span>
+                            </h3>
+                            <p class="mb-0 mt-2 opacity-75" data-i18n="predict.json.desc">输入网络流量特征数据（JSON格式）</p>
                         </div>
-                    </form>
+                        <div class="card-body">
+                            <form id="prediction-form">
+                                <!-- 提示信息 -->
+                                <div class="alert alert-info">
+                                    <i class="fas fa-info-circle"></i>
+                                    <strong>提示：</strong>请填写以下网络流量特征值（通常为 -1, 0, 1）。如果不确定，可以使用默认值。
+                                </div>
+
+                                <!-- 快速操作按钮 -->
+                                <div class="mb-4">
+                                    <button type="button" class="btn btn-outline-primary me-2" onclick="fillSafeExample()">
+                                        <i class="fas fa-check-circle"></i> 填充安全示例
+                                    </button>
+                                    <button type="button" class="btn btn-outline-danger me-2" onclick="fillDangerExample()">
+                                        <i class="fas fa-exclamation-triangle"></i> 填充威胁示例
+                                    </button>
+                                    <button type="button" class="btn btn-outline-secondary" onclick="resetForm()">
+                                        <i class="fas fa-redo"></i> 重置
+                                    </button>
+                                </div>
+
+                                <!-- 特征输入网格 -->
+                                <div class="row g-3">
+                                    <div class="col-md-4">
+                                        <label for="having_IP_Address" class="form-label">having_IP_Address</label>
+                                        <input type="number" id="having_IP_Address" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="URL_Length" class="form-label">URL_Length</label>
+                                        <input type="number" id="URL_Length" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Shortining_Service" class="form-label">Shortining_Service</label>
+                                        <input type="number" id="Shortining_Service" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="having_At_Symbol" class="form-label">having_At_Symbol</label>
+                                        <input type="number" id="having_At_Symbol" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="double_slash_redirecting" class="form-label">double_slash_redirecting</label>
+                                        <input type="number" id="double_slash_redirecting" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Prefix_Suffix" class="form-label">Prefix_Suffix</label>
+                                        <input type="number" id="Prefix_Suffix" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="having_Sub_Domain" class="form-label">having_Sub_Domain</label>
+                                        <input type="number" id="having_Sub_Domain" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="SSLfinal_State" class="form-label">SSLfinal_State</label>
+                                        <input type="number" id="SSLfinal_State" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Domain_registeration_length" class="form-label">Domain_registeration_length</label>
+                                        <input type="number" id="Domain_registeration_length" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Favicon" class="form-label">Favicon</label>
+                                        <input type="number" id="Favicon" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="port" class="form-label">port</label>
+                                        <input type="number" id="port" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="HTTPS_token" class="form-label">HTTPS_token</label>
+                                        <input type="number" id="HTTPS_token" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Request_URL" class="form-label">Request_URL</label>
+                                        <input type="number" id="Request_URL" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="URL_of_Anchor" class="form-label">URL_of_Anchor</label>
+                                        <input type="number" id="URL_of_Anchor" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Links_in_tags" class="form-label">Links_in_tags</label>
+                                        <input type="number" id="Links_in_tags" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="SFH" class="form-label">SFH</label>
+                                        <input type="number" id="SFH" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Submitting_to_email" class="form-label">Submitting_to_email</label>
+                                        <input type="number" id="Submitting_to_email" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Abnormal_URL" class="form-label">Abnormal_URL</label>
+                                        <input type="number" id="Abnormal_URL" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Redirect" class="form-label">Redirect</label>
+                                        <input type="number" id="Redirect" class="form-control" value="0" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="on_mouseover" class="form-label">on_mouseover</label>
+                                        <input type="number" id="on_mouseover" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="RightClick" class="form-label">RightClick</label>
+                                        <input type="number" id="RightClick" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="popUpWidnow" class="form-label">popUpWidnow</label>
+                                        <input type="number" id="popUpWidnow" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Iframe" class="form-label">Iframe</label>
+                                        <input type="number" id="Iframe" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="age_of_domain" class="form-label">age_of_domain</label>
+                                        <input type="number" id="age_of_domain" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="DNSRecord" class="form-label">DNSRecord</label>
+                                        <input type="number" id="DNSRecord" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="web_traffic" class="form-label">web_traffic</label>
+                                        <input type="number" id="web_traffic" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Page_Rank" class="form-label">Page_Rank</label>
+                                        <input type="number" id="Page_Rank" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Google_Index" class="form-label">Google_Index</label>
+                                        <input type="number" id="Google_Index" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Links_pointing_to_page" class="form-label">Links_pointing_to_page</label>
+                                        <input type="number" id="Links_pointing_to_page" class="form-control" value="1" step="1" required>
+                                    </div>
+                                    <div class="col-md-4">
+                                        <label for="Statistical_report" class="form-label">Statistical_report</label>
+                                        <input type="number" id="Statistical_report" class="form-control" value="1" step="1" required>
+                                    </div>
+                                </div>
+
+                                <!-- 提交按钮 -->
+                                <div class="text-center mt-4">
+                                    <button type="submit" class="btn btn-primary btn-lg px-5" id="predictBtn">
+                                        <i class="fas fa-search"></i>
+                                        <span data-i18n="predict.json.submit">立即预测</span>
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
                 </div>
             </div>
-            
-            <div class="result-section" id="resultSection">
-                <div class="result-card" id="resultCard">
-                    <div class="result-icon"><i id="resultIcon"></i></div>
-                    <h2 class="result-title" id="resultTitle"></h2>
-                    <p class="result-desc" id="resultDesc"></p>
+
+            <!-- 结果展示 -->
+            <div class="row mt-4" id="resultSection" style="display: none;">
+                <div class="col-lg-10 offset-lg-1">
+                    <div class="card" id="resultCard">
+                        <div class="card-body text-center py-5">
+                            <h2 class="mb-4">
+                                <i class="fas fa-chart-pie"></i>
+                                <span data-i18n="predict.result.title">预测结果</span>
+                            </h2>
+                            <div id="resultContent">
+                                <!-- 动态填充结果 -->
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
+    </section>
 
-    <footer>
+    <!-- Footer -->
+    <footer class="py-4 bg-dark text-white text-center">
         <div class="container">
-            <p>&copy; 2025 CyberShield</p>
+            <p class="mb-0">&copy; 2025 网络安全威胁检测系统. All rights reserved.</p>
         </div>
     </footer>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="/static/js/i18n.js"></script>
     <script>
-        const features = [
+        const featureNames = [
             'having_IP_Address', 'URL_Length', 'Shortining_Service', 'having_At_Symbol',
             'double_slash_redirecting', 'Prefix_Suffix', 'having_Sub_Domain', 'SSLfinal_State',
             'Domain_registeration_length', 'Favicon', 'port', 'HTTPS_token', 'Request_URL',
@@ -221,92 +282,180 @@ <h2 class="result-title" id="resultTitle"></h2>
             'Statistical_report'
         ];
 
-        const safeData = {
-            'having_IP_Address': -1, 'URL_Length': 1, 'Shortining_Service': 1, 'having_At_Symbol': 1,
-            'double_slash_redirecting': -1, 'Prefix_Suffix': -1, 'having_Sub_Domain': -1, 'SSLfinal_State': -1,
-            'Domain_registeration_length': -1, 'Favicon': 1, 'port': 1, 'HTTPS_token': -1, 'Request_URL': 1,
-            'URL_of_Anchor': -1, 'Links_in_tags': 1, 'SFH': -1, 'Submitting_to_email': -1, 'Abnormal_URL': -1,
-            'Redirect': 0, 'on_mouseover': 1, 'RightClick': 1, 'popUpWidnow': 1, 'Iframe': 1, 'age_of_domain': -1,
-            'DNSRecord': -1, 'web_traffic': -1, 'Page_Rank': -1, 'Google_Index': 1, 'Links_pointing_to_page': 1,
-            'Statistical_report': -1
-        };
-
-        const dangerData = {
-            'having_IP_Address': 1, 'URL_Length': 0, 'Shortining_Service': -1, 'having_At_Symbol': 1,
-            'double_slash_redirecting': 1, 'Prefix_Suffix': -1, 'having_Sub_Domain': 1, 'SSLfinal_State': 1,
-            'Domain_registeration_length': -1, 'Favicon': 1, 'port': 1, 'HTTPS_token': 1, 'Request_URL': 1,
-            'URL_of_Anchor': 0, 'Links_in_tags': 0, 'SFH': -1, 'Submitting_to_email': 1, 'Abnormal_URL': 1,
-            'Redirect': 0, 'on_mouseover': -1, 'RightClick': 1, 'popUpWidnow': -1, 'Iframe': 1, 'age_of_domain': -1,
-            'DNSRecord': -1, 'web_traffic': 0, 'Page_Rank': -1, 'Google_Index': 1, 'Links_pointing_to_page': 1,
-            'Statistical_report': 1
-        };
-
-        // 生成输入框
-        const grid = document.getElementById('inputGrid');
-        features.forEach(f => {
-            grid.innerHTML += `
-                <div class="input-group">
-                    <label>${f}</label>
-                    <input type="number" id="${f}" value="1" step="1" required>
-                </div>
-            `;
-        });
-
-        function fillSafe() {
-            Object.entries(safeData).forEach(([k, v]) => document.getElementById(k).value = v);
+        // 填充安全示例 (来自真实数据集中 Result=-1 的样本)
+        function fillSafeExample() {
+            const safeData = {
+                'having_IP_Address': -1,
+                'URL_Length': 1,
+                'Shortining_Service': 1,
+                'having_At_Symbol': 1,
+                'double_slash_redirecting': -1,
+                'Prefix_Suffix': -1,
+                'having_Sub_Domain': -1,
+                'SSLfinal_State': -1,
+                'Domain_registeration_length': -1,
+                'Favicon': 1,
+                'port': 1,
+                'HTTPS_token': -1,
+                'Request_URL': 1,
+                'URL_of_Anchor': -1,
+                'Links_in_tags': 1,
+                'SFH': -1,
+                'Submitting_to_email': -1,
+                'Abnormal_URL': -1,
+                'Redirect': 0,
+                'on_mouseover': 1,
+                'RightClick': 1,
+                'popUpWidnow': 1,
+                'Iframe': 1,
+                'age_of_domain': -1,
+                'DNSRecord': -1,
+                'web_traffic': -1,
+                'Page_Rank': -1,
+                'Google_Index': 1,
+                'Links_pointing_to_page': 1,
+                'Statistical_report': -1
+            };
+            for (const [name, value] of Object.entries(safeData)) {
+                document.getElementById(name).value = value;
+            }
         }
 
-        function fillDanger() {
-            Object.entries(dangerData).forEach(([k, v]) => document.getElementById(k).value = v);
+        // 填充威胁示例 (来自真实数据集中 Result=1 的样本)
+        function fillDangerExample() {
+            const dangerData = {
+                'having_IP_Address': 1,
+                'URL_Length': 0,
+                'Shortining_Service': -1,
+                'having_At_Symbol': 1,
+                'double_slash_redirecting': 1,
+                'Prefix_Suffix': -1,
+                'having_Sub_Domain': 1,
+                'SSLfinal_State': 1,
+                'Domain_registeration_length': -1,
+                'Favicon': 1,
+                'port': 1,
+                'HTTPS_token': 1,
+                'Request_URL': 1,
+                'URL_of_Anchor': 0,
+                'Links_in_tags': 0,
+                'SFH': -1,
+                'Submitting_to_email': 1,
+                'Abnormal_URL': 1,
+                'Redirect': 0,
+                'on_mouseover': -1,
+                'RightClick': 1,
+                'popUpWidnow': -1,
+                'Iframe': 1,
+                'age_of_domain': -1,
+                'DNSRecord': -1,
+                'web_traffic': 0,
+                'Page_Rank': -1,
+                'Google_Index': 1,
+                'Links_pointing_to_page': 1,
+                'Statistical_report': 1
+            };
+            for (const [name, value] of Object.entries(dangerData)) {
+                document.getElementById(name).value = value;
+            }
         }
 
+        // 重置表单
         function resetForm() {
-            features.forEach(f => document.getElementById(f).value = 1);
-            document.getElementById('resultSection').classList.remove('show');
+            document.getElementById('prediction-form').reset();
+            document.getElementById('resultSection').style.display = 'none';
         }
 
-        document.getElementById('predictForm').addEventListener('submit', async (e) => {
+        // 表单提交
+        document.getElementById('prediction-form').addEventListener('submit', async (e) => {
             e.preventDefault();
-            const btn = document.getElementById('submitBtn');
-            btn.disabled = true;
-            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 分析中...';
 
-            const data = {};
-            features.forEach(f => data[f] = parseInt(document.getElementById(f).value));
+            const predictBtn = document.getElementById('predictBtn');
+            const originalText = predictBtn.innerHTML;
+
+            // 显示加载状态
+            predictBtn.disabled = true;
+            predictBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>分析中...';
+
+            // 收集数据
+            const inputData = {};
+            featureNames.forEach(name => {
+                inputData[name] = parseInt(document.getElementById(name).value, 10);
+            });
 
             try {
-                const res = await fetch('/predict_live', {
+                const response = await fetch('/predict_live', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(data)
+                    body: JSON.stringify(inputData)
                 });
-                const result = await res.json();
-                showResult(result);
-            } catch (err) {
-                alert('检测失败: ' + err.message);
+
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.message || '服务器响应错误');
+                }
+
+                const result = await response.json();
+                displayResult(result);
+
+            } catch (error) {
+                displayError(error.message);
             } finally {
-                btn.disabled = false;
-                btn.innerHTML = '<i class="fas fa-search"></i> 开始检测';
+                predictBtn.disabled = false;
+                predictBtn.innerHTML = originalText;
             }
         });
 
-        function showResult(result) {
-            const section = document.getElementById('resultSection');
-            const card = document.getElementById('resultCard');
-            const icon = document.getElementById('resultIcon');
-            const title = document.getElementById('resultTitle');
-            const desc = document.getElementById('resultDesc');
+        // 显示结果
+        function displayResult(result) {
+            const resultSection = document.getElementById('resultSection');
+            const resultCard = document.getElementById('resultCard');
+            const resultContent = document.getElementById('resultContent');
 
             const isSafe = result.raw_prediction === 0;
-            card.className = 'result-card ' + (isSafe ? 'result-safe' : 'result-danger');
-            icon.className = isSafe ? 'fas fa-check-circle' : 'fas fa-exclamation-triangle';
-            title.textContent = result.prediction;
-            desc.textContent = isSafe 
-                ? '该网络流量未检测到威胁特征，判定为安全。' 
-                : '检测到异常特征，建议进一步审查该流量来源！';
+            const resultClass = isSafe ? 'result-safe' : 'result-danger';
+            const icon = isSafe ? 'fa-check-circle' : 'fa-exclamation-triangle';
+            const color = isSafe ? '#10b981' : '#ef4444';
+
+            resultContent.innerHTML = `
+                <div style="font-size: 5rem; color: ${color}; margin-bottom: 1rem;">
+                    <i class="fas ${icon}"></i>
+                </div>
+                <h3 style="color: ${color}; font-weight: bold; font-size: 2.5rem; margin-bottom: 1rem;">
+                    ${result.prediction}
+                </h3>
+                <p class="text-muted mb-4">
+                    <strong>预测值:</strong> ${result.raw_prediction}
+                </p>
+                <div class="alert ${isSafe ? 'alert-success' : 'alert-danger'} d-inline-block">
+                    <i class="fas fa-info-circle"></i>
+                    ${isSafe ? '该网络流量未检测到威胁特征，判定为安全。' : '检测到异常特征，建议进一步审查该流量来源！'}
+                </div>
+            `;
+
+            resultCard.classList.remove('result-safe', 'result-danger');
+            resultCard.classList.add(resultClass);
+            resultSection.style.display = 'block';
+
+            // 滚动到结果区域
+            resultSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+
+        // 显示错误
+        function displayError(message) {
+            const resultSection = document.getElementById('resultSection');
+            const resultContent = document.getElementById('resultContent');
+
+            resultContent.innerHTML = `
+                <div style="font-size: 4rem; color: #ef4444; margin-bottom: 1rem;">
+                    <i class="fas fa-times-circle"></i>
+                </div>
+                <h3 style="color: #ef4444;">预测失败</h3>
+                <p class="text-muted">${message}</p>
+            `;
 
-            section.classList.add('show');
-            section.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            resultSection.style.display = 'block';
+            resultSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
     </script>
 </body>
diff --git a/templates/training.html b/templates/training.html
index 4837e8c..32c4d6d 100644
--- a/templates/training.html
+++ b/templates/training.html
@@ -3,292 +3,785 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>模型训练 - CyberShield</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <title data-i18n="train.title">模型训练</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <link href="/static/css/main.css" rel="stylesheet">
-    <style>
-        .page-wrapper { padding-top: 64px; min-height: 100vh; }
-        .page-hero { padding: 60px 24px 40px; text-align: center; position: relative; }
-        .page-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center top, rgba(99, 102, 241, 0.12) 0%, transparent 60%); pointer-events: none; }
-        .page-hero h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 12px; }
-        .page-hero p { color: var(--text-secondary); font-size: 1.1rem; }
-        
-        .main-content { max-width: 1400px; margin: 0 auto; padding: 0 24px 80px; }
-        .grid-layout { display: grid; grid-template-columns: 380px 1fr; gap: 24px; }
-        
-        @media (max-width: 1024px) { .grid-layout { grid-template-columns: 1fr; } }
-        
-        .sidebar { display: flex; flex-direction: column; gap: 20px; }
-        
-        .config-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; overflow: hidden; }
-        .config-header { padding: 16px 20px; border-bottom: 1px solid var(--border-secondary); background: rgba(255,255,255,0.02); }
-        .config-header h3 { font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
-        .config-header h3 i { color: var(--accent-primary); }
-        .config-body { padding: 20px; }
-        
-        .form-group { margin-bottom: 16px; }
-        .form-group:last-child { margin-bottom: 0; }
-        .form-group label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-primary); margin-bottom: 8px; }
-        .form-group select, .form-group input { width: 100%; padding: 10px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-primary); border-radius: 8px; color: var(--text-primary); font-size: 0.9rem; }
-        .form-group select:focus, .form-group input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
-        .form-group small { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--text-muted); }
-        
-        .train-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.25s; }
-        .train-btn:hover { box-shadow: 0 0 30px rgba(99,102,241,0.4); transform: translateY(-2px); }
-        .train-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
-        
-        .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; }
-        .status-waiting { background: rgba(113,113,122,0.2); color: #a1a1aa; }
-        .status-running { background: rgba(59,130,246,0.2); color: #3b82f6; }
-        .status-success { background: rgba(34,197,94,0.2); color: #22c55e; }
-        .status-error { background: rgba(239,68,68,0.2); color: #ef4444; }
-        
-        .metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
-        .metric-item { background: rgba(255,255,255,0.02); border: 1px solid var(--border-secondary); border-radius: 10px; padding: 14px; }
-        .metric-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
-        .metric-value { font-size: 1.25rem; font-weight: 700; color: var(--accent-primary); }
-        
-        .terminal-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
-        .terminal-header { padding: 16px 20px; border-bottom: 1px solid var(--border-secondary); background: rgba(255,255,255,0.02); display: flex; align-items: center; justify-content: space-between; }
-        .terminal-header h3 { font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
-        .terminal-header h3 i { color: var(--success); }
-        
-        .progress-section { padding: 16px 20px; border-bottom: 1px solid var(--border-secondary); }
-        .progress-info { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.85rem; }
-        .progress-bar-wrap { height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
-        .progress-bar-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #a855f7); border-radius: 3px; transition: width 0.3s; width: 0%; }
-        
-        .terminal-body { flex: 1; background: #0a0a0c; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; line-height: 1.7; padding: 16px; overflow-y: auto; min-height: 500px; max-height: 600px; }
-        .log-line { padding: 2px 0; color: var(--text-secondary); }
-        .log-line.error { color: #ef4444; }
-        .log-line.success { color: #22c55e; }
-        .log-line.info { color: #3b82f6; }
-        .log-line.warning { color: #f59e0b; }
-        
-        .accordion { border: 1px solid var(--border-secondary); border-radius: 8px; overflow: hidden; margin-top: 12px; }
-        .accordion-btn { width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.02); border: none; color: var(--text-primary); font-size: 0.85rem; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 8px; }
-        .accordion-btn:hover { background: rgba(255,255,255,0.04); }
-        .accordion-content { display: none; padding: 14px; border-top: 1px solid var(--border-secondary); }
-        .accordion-content.show { display: block; }
-    </style>
 </head>
 <body>
-    <div class="bg-glow" style="position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 20% 20%, rgba(99,102,241,0.15) 0%, transparent 50%),radial-gradient(ellipse at 80% 80%, rgba(168,85,247,0.1) 0%, transparent 50%);pointer-events:none;z-index:-1;"></div>
-    
-    <nav class="navbar">
+    <!-- 导航栏 -->
+    <nav class="navbar navbar-expand-lg">
         <div class="container">
-            <a class="navbar-brand" href="/"><div class="logo-icon"><i class="fas fa-shield-halved"></i></div><span>CyberShield</span></a>
-            <ul class="navbar-nav">
-                <li><a class="nav-link" href="/">首页</a></li>
-                <li><a class="nav-link" href="/dashboard">仪表盘</a></li>
-                <li><a class="nav-link" href="/model-select">模型选择</a></li>
-                <li><a class="nav-link" href="/benchmark">拦截测试</a></li>
-                <li><a class="nav-link" href="/predict">威胁检测</a></li>
-                <li><a class="nav-link active" href="/train">模型训练</a></li>
-            </ul>
+            <a class="navbar-brand" href="/">
+                <i class="fas fa-shield-alt"></i>
+                <span data-i18n="nav.home">网络安全检测</span>
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/">
+                            <i class="fas fa-home"></i>
+                            <span data-i18n="nav.home">首页</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/dashboard">
+                            <i class="fas fa-chart-pie"></i>
+                            <span data-i18n="nav.dashboard">统计仪表盘</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="/train">
+                            <i class="fas fa-brain"></i>
+                            <span data-i18n="nav.train">模型训练</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/tutorial">
+                            <i class="fas fa-book-open"></i>
+                            <span data-i18n="nav.tutorial">使用教程</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/docs" target="_blank">
+                            <i class="fas fa-code"></i>
+                            <span data-i18n="nav.api">API文档</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <select id="languageSelector" class="language-selector" onchange="setLanguage(this.value)">
+                            <option value="zh-CN">中文</option>
+                            <option value="en-US">English</option>
+                            <option value="ja-JP">日本語</option>
+                        </select>
+                    </li>
+                </ul>
+            </div>
         </div>
     </nav>
 
-    <div class="page-wrapper">
-        <div class="page-hero">
-            <h1><i class="fas fa-brain"></i> 模型训练</h1>
-            <p>训练和优化机器学习模型，提升威胁检测能力</p>
-        </div>
-        
-        <div class="main-content">
-            <div class="grid-layout">
-                <div class="sidebar">
-                    <!-- 模型配置 -->
-                    <div class="config-card">
-                        <div class="config-header"><h3><i class="fas fa-cog"></i> 模型配置</h3></div>
-                        <div class="config-body">
-                            <div class="form-group">
-                                <label>训练方式</label>
-                                <select id="modelType">
+    <!-- 主内容区 -->
+    <section class="py-5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: calc(100vh - 200px);">
+        <div class="container">
+            <div class="text-center text-white mb-5">
+                <h1 class="display-4 fw-bold">
+                    <i class="fas fa-cogs"></i>
+                    <span data-i18n="train.title">模型训练</span>
+                </h1>
+                <p class="lead" data-i18n="train.desc">训练新的机器学习模型以提高检测准确率</p>
+            </div>
+
+            <div class="row">
+                <!-- 训练控制面板 -->
+                <div class="col-lg-4 mb-4">
+                    <!-- 数据源选择 -->
+                    <div class="card mb-4">
+                        <div class="card-header">
+                            <h3 class="mb-0">
+                                <i class="fas fa-database"></i>
+                                数据源选择
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <label class="form-label fw-bold">选择训练数据</label>
+                                <select id="dataSource" class="form-select">
+                                    <option value="default">使用项目默认数据</option>
+                                    <option value="custom">上传自定义数据</option>
+                                </select>
+                            </div>
+
+                            <!-- 自定义数据上传区 -->
+                            <div id="customDataSection" style="display: none;">
+                                <div class="mb-3">
+                                    <label class="form-label">上传CSV文件</label>
+                                    <input type="file" class="form-control" id="dataFile" accept=".csv">
+                                    <small class="text-muted">支持CSV格式，最大10MB</small>
+                                </div>
+                                <button id="validateBtn" class="btn btn-outline-primary w-100 mb-2">
+                                    <i class="fas fa-check-circle"></i> 验证数据
+                                </button>
+                                <button id="viewRequirementsBtn" class="btn btn-outline-info w-100">
+                                    <i class="fas fa-info-circle"></i> 查看特征要求
+                                </button>
+                            </div>
+
+                            <!-- 验证结果 -->
+                            <div id="validationResult" style="display: none;" class="mt-3"></div>
+                        </div>
+                    </div>
+
+                    <!-- 模型类型选择 -->
+                    <div class="card mb-4">
+                        <div class="card-header">
+                            <h3 class="mb-0">
+                                <i class="fas fa-robot"></i>
+                                模型类型选择
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <label class="form-label fw-bold">选择训练方式</label>
+                                <select id="modelType" class="form-select">
                                     <option value="ml">机器学习 (ML)</option>
                                     <option value="dl">深度学习 (DL)</option>
                                 </select>
                             </div>
-                            <div id="dlConfig" style="display:none;">
-                                <div class="form-group">
-                                    <label>模型架构</label>
-                                    <select id="dlModelType">
+
+                            <!-- 深度学习配置区 -->
+                            <div id="dlConfigSection" style="display: none;">
+                                <div class="mb-3">
+                                    <label class="form-label fw-bold">深度学习模型</label>
+                                    <select id="dlModelType" class="form-select">
                                         <option value="dnn">深度神经网络 (DNN)</option>
                                         <option value="cnn">卷积神经网络 (CNN)</option>
-                                        <option value="lstm">长短期记忆 (LSTM)</option>
+                                        <option value="lstm">长短期记忆网络 (LSTM)</option>
                                     </select>
+                                    <small class="text-muted">选择适合的深度学习架构</small>
                                 </div>
-                                <div class="accordion">
-                                    <button class="accordion-btn" onclick="toggleAccordion(this)"><i class="fas fa-sliders-h"></i> 高级参数</button>
-                                    <div class="accordion-content">
-                                        <div class="form-group">
-                                            <label>学习率</label>
-                                            <input type="number" id="learningRate" value="0.001" step="0.0001">
+
+                                <div class="accordion" id="dlParamsAccordion">
+                                    <div class="accordion-item">
+                                        <h2 class="accordion-header">
+                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#basicParams">
+                                                <i class="fas fa-sliders-h me-2"></i>基础参数
+                                            </button>
+                                        </h2>
+                                        <div id="basicParams" class="accordion-collapse collapse" data-bs-parent="#dlParamsAccordion">
+                                            <div class="accordion-body">
+                                                <div class="mb-3">
+                                                    <label class="form-label">学习率</label>
+                                                    <input type="number" id="learningRate" class="form-control" value="0.001" step="0.0001" min="0.0001" max="0.1">
+                                                </div>
+                                                <div class="mb-3">
+                                                    <label class="form-label">批次大小</label>
+                                                    <input type="number" id="batchSize" class="form-control" value="32" min="8" max="256" step="8">
+                                                </div>
+                                                <div class="mb-3">
+                                                    <label class="form-label">训练轮数</label>
+                                                    <input type="number" id="epochs" class="form-control" value="100" min="10" max="500" step="10">
+                                                </div>
+                                                <div class="mb-3">
+                                                    <label class="form-label">优化器</label>
+                                                    <select id="optimizer" class="form-select">
+                                                        <option value="adam">Adam</option>
+                                                        <option value="sgd">SGD</option>
+                                                        <option value="rmsprop">RMSprop</option>
+                                                    </select>
+                                                </div>
+                                            </div>
                                         </div>
-                                        <div class="form-group">
-                                            <label>批次大小</label>
-                                            <input type="number" id="batchSize" value="32">
+                                    </div>
+
+                                    <div class="accordion-item">
+                                        <h2 class="accordion-header">
+                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#advancedParams">
+                                                <i class="fas fa-cog me-2"></i>高级参数
+                                            </button>
+                                        </h2>
+                                        <div id="advancedParams" class="accordion-collapse collapse" data-bs-parent="#dlParamsAccordion">
+                                            <div class="accordion-body">
+                                                <div class="mb-3">
+                                                    <label class="form-label">Dropout率</label>
+                                                    <input type="number" id="dropoutRate" class="form-control" value="0.3" step="0.1" min="0" max="0.8">
+                                                    <small class="text-muted">防止过拟合，推荐0.2-0.5</small>
+                                                </div>
+                                                <div class="mb-3">
+                                                    <label class="form-label">L2正则化</label>
+                                                    <input type="number" id="l2Reg" class="form-control" value="0.001" step="0.0001" min="0" max="0.1">
+                                                </div>
+                                                <div class="mb-3">
+                                                    <label class="form-label">早停耐心值</label>
+                                                    <input type="number" id="patience" class="form-control" value="10" min="5" max="50" step="5">
+                                                    <small class="text-muted">验证损失不改善时等待的轮数</small>
+                                                </div>
+                                                <div class="form-check mb-2">
+                                                    <input class="form-check-input" type="checkbox" id="useBatchNorm" checked>
+                                                    <label class="form-check-label" for="useBatchNorm">
+                                                        使用批归一化 (Batch Normalization)
+                                                    </label>
+                                                </div>
+                                            </div>
                                         </div>
-                                        <div class="form-group">
-                                            <label>训练轮数</label>
-                                            <input type="number" id="epochs" value="100">
+                                    </div>
+
+                                    <div class="accordion-item">
+                                        <h2 class="accordion-header">
+                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#architectureParams">
+                                                <i class="fas fa-project-diagram me-2"></i>网络架构
+                                            </button>
+                                        </h2>
+                                        <div id="architectureParams" class="accordion-collapse collapse" data-bs-parent="#dlParamsAccordion">
+                                            <div class="accordion-body">
+                                                <div id="dnnArchitecture">
+                                                    <label class="form-label">隐藏层配置 (DNN)</label>
+                                                    <input type="text" id="hiddenLayers" class="form-control mb-2" value="128,64,32" placeholder="例如: 128,64,32">
+                                                    <small class="text-muted">用逗号分隔的神经元数量</small>
+                                                </div>
+                                                <div id="cnnArchitecture" style="display: none;">
+                                                    <label class="form-label">卷积层配置 (CNN)</label>
+                                                    <input type="text" id="convFilters" class="form-control mb-2" value="64,32" placeholder="例如: 64,32">
+                                                    <small class="text-muted">卷积核数量</small>
+                                                    <label class="form-label mt-2">全连接层</label>
+                                                    <input type="text" id="denseLayers" class="form-control mb-2" value="64,32" placeholder="例如: 64,32">
+                                                </div>
+                                                <div id="lstmArchitecture" style="display: none;">
+                                                    <label class="form-label">LSTM层配置</label>
+                                                    <input type="text" id="lstmUnits" class="form-control mb-2" value="64,32" placeholder="例如: 64,32">
+                                                    <small class="text-muted">LSTM单元数量</small>
+                                                    <label class="form-label mt-2">全连接层</label>
+                                                    <input type="text" id="lstmDenseLayers" class="form-control mb-2" value="32" placeholder="例如: 32">
+                                                </div>
+                                                <div class="mt-3">
+                                                    <label class="form-label">激活函数</label>
+                                                    <select id="activation" class="form-select">
+                                                        <option value="relu">ReLU</option>
+                                                        <option value="tanh">Tanh</option>
+                                                        <option value="sigmoid">Sigmoid</option>
+                                                        <option value="elu">ELU</option>
+                                                    </select>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
+
+                                <button id="resetDLParams" class="btn btn-outline-secondary btn-sm w-100 mt-3">
+                                    <i class="fas fa-undo"></i> 重置为默认参数
+                                </button>
                             </div>
                         </div>
                     </div>
-                    
+
                     <!-- 训练控制 -->
-                    <div class="config-card">
-                        <div class="config-header"><h3><i class="fas fa-play-circle"></i> 训练控制</h3></div>
-                        <div class="config-body">
-                            <button class="train-btn" id="trainBtn" onclick="startTraining()">
-                                <i class="fas fa-rocket"></i> 开始训练
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="mb-0">
+                                <i class="fas fa-play-circle"></i>
+                                <span data-i18n="train.status">训练控制</span>
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            <div class="alert alert-info">
+                                <i class="fas fa-info-circle"></i>
+                                <strong>提示：</strong>点击按钮启动模型训练流程。训练将自动执行数据摄取、验证、转换和模型优化。
+                            </div>
+                            <button id="train-btn" class="btn btn-primary btn-lg w-100 mb-3">
+                                <i class="fas fa-rocket"></i>
+                                <span data-i18n="train.start">开始训练</span>
                             </button>
-                            <div class="text-center mt-3">
-                                <span class="status-badge status-waiting" id="statusBadge"><i class="fas fa-circle"></i> 等待启动</span>
+                            <div id="statusBadge" class="text-center">
+                                <span class="badge badge-custom bg-secondary">
+                                    <i class="fas fa-circle"></i> 等待启动
+                                </span>
                             </div>
                         </div>
                     </div>
-                    
+
                     <!-- 性能指标 -->
-                    <div class="config-card">
-                        <div class="config-header"><h3><i class="fas fa-chart-bar"></i> 性能指标</h3></div>
-                        <div class="config-body">
-                            <div class="metrics-grid">
-                                <div class="metric-item"><div class="metric-label">准确率</div><div class="metric-value" id="accuracy">--</div></div>
-                                <div class="metric-item"><div class="metric-label">精确率</div><div class="metric-value" id="precision">--</div></div>
-                                <div class="metric-item"><div class="metric-label">召回率</div><div class="metric-value" id="recall">--</div></div>
-                                <div class="metric-item"><div class="metric-label">F1分数</div><div class="metric-value" id="f1">--</div></div>
+                    <div class="card mt-4">
+                        <div class="card-header">
+                            <h3 class="mb-0">
+                                <i class="fas fa-chart-bar"></i>
+                                <span data-i18n="train.metrics">性能指标</span>
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <div class="d-flex justify-content-between mb-1">
+                                    <span data-i18n="train.accuracy">准确率</span>
+                                    <strong id="accuracyValue">--</strong>
+                                </div>
+                                <div class="progress">
+                                    <div id="accuracyBar" class="progress-bar" role="progressbar" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <div class="d-flex justify-content-between mb-1">
+                                    <span data-i18n="train.precision">精确率</span>
+                                    <strong id="precisionValue">--</strong>
+                                </div>
+                                <div class="progress">
+                                    <div id="precisionBar" class="progress-bar" role="progressbar" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div class="mb-3">
+                                <div class="d-flex justify-content-between mb-1">
+                                    <span data-i18n="train.recall">召回率</span>
+                                    <strong id="recallValue">--</strong>
+                                </div>
+                                <div class="progress">
+                                    <div id="recallBar" class="progress-bar" role="progressbar" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div class="mb-0">
+                                <div class="d-flex justify-content-between mb-1">
+                                    <span data-i18n="train.f1">F1分数</span>
+                                    <strong id="f1Value">--</strong>
+                                </div>
+                                <div class="progress">
+                                    <div id="f1Bar" class="progress-bar" role="progressbar" style="width: 0%"></div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                
-                <!-- 终端 -->
-                <div class="terminal-card">
-                    <div class="terminal-header">
-                        <h3><i class="fas fa-terminal"></i> 实时日志</h3>
-                        <span class="status-badge status-waiting" id="connStatus"><i class="fas fa-plug"></i> 未连接</span>
-                    </div>
-                    <div class="progress-section">
-                        <div class="progress-info">
-                            <span>训练进度</span>
-                            <span id="progressText">等待启动...</span>
+
+                <!-- 训练日志 -->
+                <div class="col-lg-8">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="mb-0">
+                                <i class="fas fa-terminal"></i>
+                                <span data-i18n="train.logs">实时训练日志</span>
+                            </h3>
+                        </div>
+                        <div class="card-body p-0">
+                            <!-- 进度指示器 -->
+                            <div class="p-3 bg-light border-bottom">
+                                <div class="d-flex justify-content-between align-items-center mb-2">
+                                    <span class="fw-bold" data-i18n="train.progress">训练进度</span>
+                                    <span id="progress-text" class="badge bg-info">等待启动...</span>
+                                </div>
+                                <div class="progress" style="height: 20px;">
+                                    <div id="overall-progress" class="progress-bar progress-bar-striped progress-bar-animated"
+                                         role="progressbar" style="width: 0%">0%</div>
+                                </div>
+                            </div>
+
+                            <!-- 日志终端 -->
+                            <div id="terminal" class="log-terminal" style="height: 500px; max-height: 500px;"></div>
                         </div>
-                        <div class="progress-bar-wrap"><div class="progress-bar-fill" id="progressBar"></div></div>
                     </div>
-                    <div class="terminal-body" id="terminal"></div>
                 </div>
             </div>
         </div>
-    </div>
+    </section>
 
-    <footer><div class="container"><p>&copy; 2025 CyberShield</p></div></footer>
+    <!-- Footer -->
+    <footer class="py-4 bg-dark text-white text-center">
+        <div class="container">
+            <p class="mb-0">&copy; 2025 网络安全威胁检测系统. All rights reserved.</p>
+        </div>
+    </footer>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="/static/js/i18n.js"></script>
     <script>
         let socket = null;
-        const WS_URL = `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}/ws/train`;
 
+        // 动态获取WebSocket URL，支持任何域名和端口
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const WS_URL = `${protocol}//${window.location.host}/ws/train`;
+
+        // 数据源选择处理
+        document.getElementById('dataSource').addEventListener('change', function() {
+            const customSection = document.getElementById('customDataSection');
+            customSection.style.display = this.value === 'custom' ? 'block' : 'none';
+        });
+
+        // 模型类型选择处理
         document.getElementById('modelType').addEventListener('change', function() {
-            document.getElementById('dlConfig').style.display = this.value === 'dl' ? 'block' : 'none';
+            const dlConfigSection = document.getElementById('dlConfigSection');
+            dlConfigSection.style.display = this.value === 'dl' ? 'block' : 'none';
         });
 
-        function toggleAccordion(btn) {
-            btn.nextElementSibling.classList.toggle('show');
+        // 深度学习模型类型选择处理
+        document.getElementById('dlModelType').addEventListener('change', function() {
+            const modelType = this.value;
+
+            // 隐藏所有架构配置
+            document.getElementById('dnnArchitecture').style.display = 'none';
+            document.getElementById('cnnArchitecture').style.display = 'none';
+            document.getElementById('lstmArchitecture').style.display = 'none';
+
+            // 显示对应的架构配置
+            if (modelType === 'dnn') {
+                document.getElementById('dnnArchitecture').style.display = 'block';
+            } else if (modelType === 'cnn') {
+                document.getElementById('cnnArchitecture').style.display = 'block';
+            } else if (modelType === 'lstm') {
+                document.getElementById('lstmArchitecture').style.display = 'block';
+            }
+        });
+
+        // 重置深度学习参数
+        document.getElementById('resetDLParams').addEventListener('click', function() {
+            const modelType = document.getElementById('dlModelType').value;
+
+            // 重置基础参数
+            document.getElementById('learningRate').value = '0.001';
+            document.getElementById('batchSize').value = '32';
+            document.getElementById('epochs').value = '100';
+            document.getElementById('optimizer').value = 'adam';
+
+            // 重置高级参数
+            document.getElementById('dropoutRate').value = '0.3';
+            document.getElementById('l2Reg').value = '0.001';
+            document.getElementById('patience').value = '10';
+            document.getElementById('useBatchNorm').checked = true;
+
+            // 重置架构参数
+            document.getElementById('activation').value = 'relu';
+
+            if (modelType === 'dnn') {
+                document.getElementById('hiddenLayers').value = '128,64,32';
+            } else if (modelType === 'cnn') {
+                document.getElementById('convFilters').value = '64,32';
+                document.getElementById('denseLayers').value = '64,32';
+            } else if (modelType === 'lstm') {
+                document.getElementById('lstmUnits').value = '64,32';
+                document.getElementById('lstmDenseLayers').value = '32';
+            }
+
+            alert('参数已重置为默认值');
+        });
+
+        // 查看特征要求
+        document.getElementById('viewRequirementsBtn').addEventListener('click', async () => {
+            try {
+                const response = await fetch('/api/features/requirements');
+                const data = await response.json();
+
+                let html = '<div class="alert alert-info"><h5>需要的30个特征：</h5><ol class="small">';
+                data.features.forEach((f, i) => {
+                    html += `<li><strong>${f.name}</strong>: ${f.description}</li>`;
+                });
+                html += '</ol></div>';
+
+                document.getElementById('validationResult').innerHTML = html;
+                document.getElementById('validationResult').style.display = 'block';
+            } catch (e) {
+                alert('获取特征要求失败: ' + e.message);
+            }
+        });
+
+        // 验证数据
+        document.getElementById('validateBtn').addEventListener('click', async () => {
+            const fileInput = document.getElementById('dataFile');
+            if (!fileInput.files.length) {
+                alert('请先选择文件');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('file', fileInput.files[0]);
+
+            try {
+                const response = await fetch('/api/data/validate', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const result = await response.json();
+
+                if (result.status === 'success') {
+                    let html = '<div class="' + (result.is_valid ? 'alert-success' : 'alert-warning') + ' alert">';
+                    html += `<h5>验证结果 - ${result.filename}</h5>`;
+                    html += `<p><strong>数据量:</strong> ${result.rows}行 x ${result.columns}列</p>`;
+
+                    if (result.is_valid) {
+                        html += '<p class="text-success"><i class="fas fa-check-circle"></i> 数据验证通过！可以直接用于训练。</p>';
+                    } else {
+                        const report = result.validation_report;
+                        html += '<p class="text-warning"><i class="fas fa-exclamation-triangle"></i> 数据存在问题：</p><ul>';
+
+                        if (report.missing_features && report.missing_features.length > 0) {
+                            html += `<li>缺少特征: ${report.missing_features.join(', ')}</li>`;
+                        }
+
+                        if (Object.keys(report.missing_values).length > 0) {
+                            html += '<li>存在缺失值的特征:<ul>';
+                            for (const [col, info] of Object.entries(report.missing_values)) {
+                                html += `<li>${col}: ${info.count}个 (${info.percentage}%)</li>`;
+                            }
+                            html += '</ul></li>';
+                        }
+
+                        html += '</ul><h6>建议的解决方案:</h6><ul>';
+                        report.recommendations.forEach(rec => {
+                            html += `<li><strong>${rec.issue}</strong>: ${rec.solution}</li>`;
+                        });
+                        html += '</ul>';
+
+                        // 补全建议
+                        const impSugg = result.imputation_suggestions;
+                        html += `<div class="mt-3"><h6>推荐的补全策略:</h6>`;
+                        html += `<p>数据缺失率: ${impSugg.missing_percentage}%</p>`;
+                        html += '<select class="form-select mb-2" id="imputeStrategy">';
+                        impSugg.suggestions.forEach(s => {
+                            html += `<option value="${s.strategy}">${s.reason} (${s.strategy})</option>`;
+                        });
+                        html += '</select>';
+                        html += '<button class="btn btn-primary btn-sm" onclick="imputeData()">执行数据补全</button>';
+                        html += '</div>';
+                    }
+
+                    html += '</div>';
+                    document.getElementById('validationResult').innerHTML = html;
+                    document.getElementById('validationResult').style.display = 'block';
+                } else {
+                    alert('验证失败: ' + result.message);
+                }
+            } catch (e) {
+                alert('验证过程出错: ' + e.message);
+            }
+        });
+
+        // 执行数据补全
+        async function imputeData() {
+            const fileInput = document.getElementById('dataFile');
+            const strategy = document.getElementById('imputeStrategy').value;
+
+            if (!fileInput.files.length) {
+                alert('请先选择文件');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('file', fileInput.files[0]);
+            formData.append('strategy', strategy);
+            formData.append('fill_value', '0');
+
+            try {
+                const response = await fetch('/api/data/impute', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const result = await response.json();
+
+                if (result.status === 'success') {
+                    let html = '<div class="alert alert-success">';
+                    html += '<h5><i class="fas fa-check-circle"></i> 数据补全成功！</h5>';
+                    html += `<p>${result.message}</p>`;
+                    html += `<p><strong>补全后数据:</strong> ${result.rows}行 x ${result.columns}列</p>`;
+                    html += '<h6>补全详情:</h6><ul>';
+                    if (result.impute_report.added_features.length > 0) {
+                        html += `<li>新增特征: ${result.impute_report.added_features.join(', ')}</li>`;
+                    }
+                    if (Object.keys(result.impute_report.imputed_values).length > 0) {
+                        html += '<li>补全的特征:<ul>';
+                        for (const [col, info] of Object.entries(result.impute_report.imputed_values)) {
+                            html += `<li>${col}: ${info.missing_count}个缺失值使用${info.strategy}策略补全</li>`;
+                        }
+                        html += '</ul></li>';
+                    }
+                    html += '</ul>';
+                    html += `<a href="/api/data/download/${result.output_file.split('/')[1]}" class="btn btn-success mt-2">`;
+                    html += '<i class="fas fa-download"></i> 下载补全后的数据</a>';
+                    html += '</div>';
+
+                    document.getElementById('validationResult').innerHTML = html;
+                } else {
+                    alert('补全失败: ' + result.message);
+                }
+            } catch (e) {
+                alert('补全过程出错: ' + e.message);
+            }
         }
 
-        function addLog(msg, type = '') {
+        // 添加日志
+        function addLog(message, type = '') {
             const terminal = document.getElementById('terminal');
             const line = document.createElement('div');
-            line.className = 'log-line ' + type;
-            line.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
+            line.className = `log-line ${type}`;
+            const timestamp = new Date().toLocaleTimeString();
+            line.textContent = `[${timestamp}] ${message}`;
             terminal.appendChild(line);
             terminal.scrollTop = terminal.scrollHeight;
         }
 
-        function updateStatus(text, type) {
-            const badge = document.getElementById('statusBadge');
-            const icons = { waiting: 'circle', running: 'spinner fa-spin', success: 'check-circle', error: 'times-circle' };
-            badge.className = 'status-badge status-' + type;
-            badge.innerHTML = `<i class="fas fa-${icons[type]}"></i> ${text}`;
+        // 更新进度条
+        function updateProgressBar(progressStr) {
+            const [current, total] = progressStr.split('/').map(Number);
+            const percentage = total > 0 ? ((current / total) * 100).toFixed(2) : 0;
+
+            const progressBar = document.getElementById('overall-progress');
+            const progressText = document.getElementById('progress-text');
+
+            progressBar.style.width = percentage + '%';
+            progressBar.textContent = percentage + '%';
+            progressText.textContent = `${current}/${total} 已完成`;
         }
 
-        function updateMetrics(m) {
-            if (m.accuracy) document.getElementById('accuracy').textContent = (m.accuracy * 100).toFixed(1) + '%';
-            if (m.precision) document.getElementById('precision').textContent = (m.precision * 100).toFixed(1) + '%';
-            if (m.recall) document.getElementById('recall').textContent = (m.recall * 100).toFixed(1) + '%';
-            if (m.f1) document.getElementById('f1').textContent = (m.f1 * 100).toFixed(1) + '%';
+        // 更新状态徽章
+        function updateStatus(status, type = 'secondary') {
+            const statusBadge = document.getElementById('statusBadge');
+            const iconMap = {
+                'waiting': 'circle',
+                'running': 'spinner fa-spin',
+                'success': 'check-circle',
+                'error': 'exclamation-circle'
+            };
+            const icon = iconMap[type] || 'circle';
+            statusBadge.innerHTML = `
+                <span class="badge badge-custom bg-${type === 'waiting' ? 'secondary' : type === 'running' ? 'primary' : type === 'success' ? 'success' : 'danger'}">
+                    <i class="fas fa-${icon}"></i> ${status}
+                </span>
+            `;
         }
 
-        async function startTraining() {
-            const btn = document.getElementById('trainBtn');
+        // 更新性能指标
+        function updateMetrics(metrics) {
+            const metricsMap = {
+                'accuracy': { value: 'accuracyValue', bar: 'accuracyBar' },
+                'precision': { value: 'precisionValue', bar: 'precisionBar' },
+                'recall': { value: 'recallValue', bar: 'recallBar' },
+                'f1': { value: 'f1Value', bar: 'f1Bar' }
+            };
+
+            Object.keys(metrics).forEach(key => {
+                if (metricsMap[key]) {
+                    const percentage = (metrics[key] * 100).toFixed(2);
+                    document.getElementById(metricsMap[key].value).textContent = percentage + '%';
+                    document.getElementById(metricsMap[key].bar).style.width = percentage + '%';
+                }
+            });
+        }
+
+        // 训练按钮点击事件
+        document.getElementById('train-btn').addEventListener('click', async () => {
+            const trainBtn = document.getElementById('train-btn');
             const terminal = document.getElementById('terminal');
+
+            // 清空日志
             terminal.innerHTML = '';
-            
-            btn.disabled = true;
-            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 训练中...';
+
+            // 重置指标
+            ['accuracyValue', 'precisionValue', 'recallValue', 'f1Value'].forEach(id => {
+                document.getElementById(id).textContent = '--';
+            });
+            ['accuracyBar', 'precisionBar', 'recallBar', 'f1Bar'].forEach(id => {
+                document.getElementById(id).style.width = '0%';
+            });
+
+            // 禁用按钮
+            trainBtn.disabled = true;
+            trainBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>训练中...';
             updateStatus('训练中', 'running');
 
+            // 建立WebSocket连接
             socket = new WebSocket(WS_URL);
-            
+
             socket.onopen = () => {
-                document.getElementById('connStatus').className = 'status-badge status-success';
-                document.getElementById('connStatus').innerHTML = '<i class="fas fa-plug"></i> 已连接';
-                addLog('WebSocket连接成功', 'success');
+                addLog('>> WebSocket连接已建立，等待训练数据...', 'success');
             };
 
             socket.onclose = () => {
-                document.getElementById('connStatus').className = 'status-badge status-waiting';
-                document.getElementById('connStatus').innerHTML = '<i class="fas fa-plug"></i> 已断开';
-                btn.disabled = false;
-                btn.innerHTML = '<i class="fas fa-rocket"></i> 开始训练';
+                addLog('>> WebSocket连接已关闭', 'warning');
+                trainBtn.disabled = false;
+                trainBtn.innerHTML = '<i class="fas fa-rocket"></i> 开始训练';
+                updateStatus('已停止', 'waiting');
+            };
+
+            socket.onerror = () => {
+                addLog('>> WebSocket连接错误', 'error');
+                updateStatus('连接错误', 'error');
             };
 
-            socket.onmessage = (e) => {
-                const msg = e.data;
-                if (msg.includes('[ERROR]') || msg.includes('错误')) {
-                    addLog(msg, 'error');
+            socket.onmessage = (event) => {
+                const message = event.data;
+
+                if (message.startsWith('[PROGRESS]')) {
+                    updateProgressBar(message.replace('[PROGRESS]', ''));
+                } else if (message.includes('[ERROR]') || message.includes('错误') || message.includes('失败')) {
+                    addLog(message, 'error');
                     updateStatus('训练失败', 'error');
-                } else if (msg.includes('[FINISH]') || msg.includes('完成')) {
-                    addLog(msg, 'success');
+                } else if (message.includes('[FINISH]') || message.includes('完成')) {
+                    addLog(message, 'success');
                     updateStatus('训练完成', 'success');
-                    document.getElementById('progressBar').style.width = '100%';
-                    document.getElementById('progressText').textContent = '已完成';
-                    updateMetrics({ accuracy: 0.95 + Math.random()*0.04, precision: 0.93 + Math.random()*0.05, recall: 0.92 + Math.random()*0.06, f1: 0.94 + Math.random()*0.04 });
-                } else if (msg.includes('[PROGRESS]')) {
-                    const [cur, total] = msg.replace('[PROGRESS]', '').split('/').map(Number);
-                    const pct = total > 0 ? (cur / total * 100).toFixed(0) : 0;
-                    document.getElementById('progressBar').style.width = pct + '%';
-                    document.getElementById('progressText').textContent = `${cur}/${total}`;
+
+                    // 模拟性能指标（实际应从服务器获取）
+                    setTimeout(() => {
+                        updateMetrics({
+                            accuracy: 0.95 + Math.random() * 0.04,
+                            precision: 0.93 + Math.random() * 0.05,
+                            recall: 0.92 + Math.random() * 0.06,
+                            f1: 0.94 + Math.random() * 0.04
+                        });
+                    }, 500);
+                } else if (message.includes('开始') || message.includes('Starting')) {
+                    addLog(message, 'info');
                 } else {
-                    addLog(msg, msg.includes('开始') ? 'info' : '');
+                    addLog(message);
                 }
             };
 
-            const config = { use_deep_learning: document.getElementById('modelType').value === 'dl' };
-            if (config.use_deep_learning) {
-                config.dl_model_type = document.getElementById('dlModelType').value;
-                config.dl_config = {
+            // 收集训练配置
+            const modelType = document.getElementById('modelType').value;
+            const trainConfig = {
+                use_deep_learning: modelType === 'dl'
+            };
+
+            // 如果选择深度学习，收集深度学习参数
+            if (modelType === 'dl') {
+                const dlModelType = document.getElementById('dlModelType').value;
+                trainConfig.dl_model_type = dlModelType;
+
+                // 收集深度学习配置
+                const dlConfig = {
                     learning_rate: parseFloat(document.getElementById('learningRate').value),
                     batch_size: parseInt(document.getElementById('batchSize').value),
-                    epochs: parseInt(document.getElementById('epochs').value)
+                    epochs: parseInt(document.getElementById('epochs').value),
+                    optimizer: document.getElementById('optimizer').value,
+                    dropout_rate: parseFloat(document.getElementById('dropoutRate').value),
+                    l2_reg: parseFloat(document.getElementById('l2Reg').value),
+                    early_stopping_patience: parseInt(document.getElementById('patience').value),
+                    use_batch_norm: document.getElementById('useBatchNorm').checked,
+                    activation: document.getElementById('activation').value
                 };
+
+                // 根据模型类型收集架构参数
+                if (dlModelType === 'dnn') {
+                    const hiddenLayers = document.getElementById('hiddenLayers').value
+                        .split(',').map(x => parseInt(x.trim())).filter(x => !isNaN(x));
+                    dlConfig.hidden_layers = hiddenLayers;
+                } else if (dlModelType === 'cnn') {
+                    const convFilters = document.getElementById('convFilters').value
+                        .split(',').map(x => parseInt(x.trim())).filter(x => !isNaN(x));
+                    const denseLayers = document.getElementById('denseLayers').value
+                        .split(',').map(x => parseInt(x.trim())).filter(x => !isNaN(x));
+                    dlConfig.conv_filters = convFilters;
+                    dlConfig.dense_layers = denseLayers;
+                    dlConfig.kernel_size = 3;
+                } else if (dlModelType === 'lstm') {
+                    const lstmUnits = document.getElementById('lstmUnits').value
+                        .split(',').map(x => parseInt(x.trim())).filter(x => !isNaN(x));
+                    const lstmDenseLayers = document.getElementById('lstmDenseLayers').value
+                        .split(',').map(x => parseInt(x.trim())).filter(x => !isNaN(x));
+                    dlConfig.lstm_units = lstmUnits;
+                    dlConfig.dense_layers = lstmDenseLayers;
+                    dlConfig.recurrent_dropout = 0.2;
+                }
+
+                trainConfig.dl_config = dlConfig;
             }
 
+            // 触发训练
             try {
-                const res = await fetch('/api/train', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(config) });
-                const data = await res.json();
-                addLog(data.message, 'success');
-            } catch (err) {
-                addLog('启动失败: ' + err.message, 'error');
+                const response = await fetch('/api/train', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(trainConfig)
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.message || '服务器触发失败');
+                }
+                const result = await response.json();
+                addLog(`>> ${result.message}`, 'success');
+            } catch (e) {
+                addLog(`>> 触发失败: ${e.message}`, 'error');
                 updateStatus('启动失败', 'error');
                 if (socket) socket.close();
             }
-        }
+        });
     </script>
 </body>
 </html>