feat: enhance features with chinese localization, file upload, and datasets management

app.py

@@ -2,8 +2,12 @@ import os
 import json
 import sqlite3
 import requests
+import random
+import time
 from flask import Flask, render_template, request, jsonify, send_from_directory
 from flask_cors import CORS
+from werkzeug.utils import secure_filename
+from werkzeug.exceptions import RequestEntityTooLarge
 
 app = Flask(__name__, static_folder='static', template_folder='templates')
 CORS(app)
@@ -12,9 +16,26 @@ CORS(app)
 SILICONFLOW_API_KEY = "sk-vimuseiptfbomzegyuvmebjzooncsqbyjtlddrfodzcdskgi"
 SILICONFLOW_API_URL = "https://api.siliconflow.cn/v1/chat/completions"
 DB_PATH = os.path.join(app.instance_path, "cyber_sentry.db")
+UPLOAD_FOLDER = os.path.join(app.instance_path, 'uploads')
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB limit
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
 
-# Ensure instance folder exists
+# Ensure instance and upload folders exist
 os.makedirs(app.instance_path, exist_ok=True)
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+# Error Handlers
+@app.errorhandler(404)
+def not_found_error(error):
+    return jsonify({"error": "Resource not found"}), 404
+
+@app.errorhandler(500)
+def internal_error(error):
+    return jsonify({"error": "Internal server error"}), 500
+
+@app.errorhandler(RequestEntityTooLarge)
+def handle_file_too_large(e):
+    return jsonify({"error": "File is too large (Max 16MB)"}), 413
 
 # Database Setup
 def init_db():
@@ -32,9 +53,11 @@ def init_db():
     c.execute('SELECT count(*) FROM playbooks')
     if c.fetchone()[0] == 0:
         c.execute("INSERT INTO playbooks (title, scenario, steps, severity) VALUES (?, ?, ?, ?)",
-                  ("Phishing Response", "User reports suspicious email", "1. Isolate endpoint.\n2. Analyze header.\n3. Reset credentials.\n4. Scan for malware.", "Medium"))
+                  ("钓鱼邮件响应流程 (Phishing Response)", "用户报告收到可疑邮件，疑似包含恶意链接或附件。", "1. 隔离终端设备。\n2. 分析邮件头信息。\n3. 重置用户凭据。\n4. 全盘扫描恶意软件。\n5. 全局搜索并删除同类邮件。", "Medium"))
         c.execute("INSERT INTO playbooks (title, scenario, steps, severity) VALUES (?, ?, ?, ?)",
-                  ("Ransomware Containment", "Encrypted files detected", "1. Disconnect network immediately.\n2. Identify strain.\n3. Check backups.\n4. Notify legal/compliance.", "Critical"))
+                  ("勒索软件遏制 (Ransomware Containment)", "监测到文件被批量加密，出现勒索信。", "1. 立即断开网络连接（拔网线/禁用网卡）。\n2. 识别勒索病毒变种。\n3. 检查备份完整性。\n4. 通知法务/合规部门。\n5. 启动业务连续性计划 (BCP)。", "Critical"))
+        c.execute("INSERT INTO playbooks (title, scenario, steps, severity) VALUES (?, ?, ?, ?)",
+                  ("DDoS 攻击防御 (DDoS Defense)", "服务器流量异常激增，服务不可用。", "1. 确认攻击类型（流量型/应用层）。\n2. 启用流量清洗服务 (WAF/CDN)。\n3. 限制非必要 IP 段访问。\n4. 调整防火墙策略。\n5. 联系 ISP 协助溯源。", "High"))
         conn.commit()
     
     conn.close()
@@ -53,21 +76,43 @@ def index():
 
 @app.route('/api/stats')
 def get_stats():
-    # Mock stats for the dashboard
+    # Mock stats for the dashboard (randomized for liveliness)
     return jsonify({
-        "threat_level": "Elevated",
-        "active_incidents": 3,
-        "blocked_attempts": 1245,
-        "system_health": 98,
+        "threat_level": random.choice(["Elevated", "High", "Critical", "Low", "Medium"]),
+        "active_incidents": random.randint(1, 15),
+        "blocked_attempts": random.randint(1000, 5000),
+        "system_health": random.randint(85, 99),
         "radar_data": [
-            {"name": "Phishing", "value": 85},
-            {"name": "Malware", "value": 60},
-            {"name": "DDoS", "value": 40},
-            {"name": "Insider", "value": 20},
-            {"name": "Zero-day", "value": 30}
+            {"name": "钓鱼 (Phishing)", "value": random.randint(40, 90)},
+            {"name": "恶意软件 (Malware)", "value": random.randint(30, 80)},
+            {"name": "DDoS", "value": random.randint(20, 70)},
+            {"name": "内鬼 (Insider)", "value": random.randint(10, 50)},
+            {"name": "零日 (Zero-day)", "value": random.randint(5, 40)}
         ]
     })
 
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        return jsonify({"error": "No file part"}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({"error": "No selected file"}), 400
+    if file:
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(filepath)
+        
+        # Mock processing of the file
+        size_mb = os.path.getsize(filepath) / (1024 * 1024)
+        
+        return jsonify({
+            "message": "File uploaded successfully", 
+            "filename": filename,
+            "size_mb": f"{size_mb:.2f} MB",
+            "analysis": "File scanned. No immediate threats detected. Added to dataset."
+        })
+
 @app.route('/api/analyze', methods=['POST'])
 def analyze_log():
     data = request.json
@@ -87,7 +132,7 @@ def analyze_log():
     - severity: "Low", "Medium", "High", or "Critical"
     - summary: A brief summary of what happened (max 2 sentences).
     - indicators: List of suspicious IPs, filenames, or hashes found.
-    - recommendation: Actionable steps to remediate.
+    - recommendation: Actionable steps to remediate (can use markdown).
     - mock_graph: A list of 5 integers representing traffic spike during this event (0-100).
     
     Do not output markdown code blocks, just the raw JSON."""
@@ -103,7 +148,11 @@ def analyze_log():
     }
 
     try:
-        response = requests.post(SILICONFLOW_API_URL, json=payload, headers=headers, timeout=30)
+        # Mock check: If key is invalid or request fails, use fallback
+        if "sk-" not in SILICONFLOW_API_KEY:
+             raise Exception("Invalid Key")
+
+        response = requests.post(SILICONFLOW_API_URL, json=payload, headers=headers, timeout=10)
         response.raise_for_status()
         ai_data = response.json()
         content = ai_data['choices'][0]['message']['content']
@@ -116,12 +165,13 @@ def analyze_log():
         return jsonify(json.loads(content))
     except Exception as e:
         print(f"AI Error: {e}")
-        # Mock Fallback
+        # Mock Fallback with Richer Data
+        time.sleep(1) # Simulate processing
         return jsonify({
-            "severity": "High",
-            "summary": "AI Service unavailable. Mock analysis: Detected repeated failed login attempts indicating brute force.",
-            "indicators": ["192.168.1.105", "admin_user"],
-            "recommendation": "Block IP immediately and enable 2FA.",
+            "severity": random.choice(["High", "Critical"]),
+            "summary": "AI 服务暂不可用。模拟分析结果：检测到针对 SSH 端口的暴力破解攻击。",
+            "indicators": ["192.168.1.105", "admin_user", "id_rsa"],
+            "recommendation": "**建议措施：**\n1. 立即封禁来源 IP `192.168.1.105`。\n2. 强制重置 `admin` 用户密码。\n3. 检查 `/var/log/auth.log` 确认是否有成功登录记录。\n4. 启用多因素认证 (MFA)。",
             "mock_graph": [10, 25, 60, 95, 40]
         })
 
@@ -144,13 +194,30 @@ def handle_playbooks():
 def simulate_attack():
     # Simulate an attack scenario for training
     scenarios = [
-        {"type": "SQL Injection", "log": "GET /products?id=1' OR '1'='1", "details": "Detected SQLi attempt on product endpoint."},
-        {"type": "XSS", "log": "<script>alert('pwned')</script>", "details": "Reflected XSS payload in search parameter."},
-        {"type": "Brute Force", "log": "Failed password for root from 10.0.0.5 port 22 ssh2", "details": "500 failed login attempts in 1 minute."}
+        {"type": "SQL 注入 (SQL Injection)", "log": "GET /products?id=1' OR '1'='1", "details": "在产品详情页参数中检测到典型的 SQL 注入特征。"},
+        {"type": "跨站脚本 (XSS)", "log": "<script>alert('pwned')</script>", "details": "搜索框输入参数包含反射型 XSS 攻击载荷。"},
+        {"type": "暴力破解 (Brute Force)", "log": "Failed password for root from 10.0.0.5 port 22 ssh2", "details": "1分钟内检测到来自同一IP的 500 次 SSH 登录失败尝试。"},
+        {"type": "远程代码执行 (RCE)", "log": "cmd.exe /c powershell -w hidden -c (new-object System.Net.WebClient).DownloadFile...", "details": "检测到可疑的 PowerShell 命令执行，试图下载外部文件。"}
     ]
-    import random
     selected = random.choice(scenarios)
     return jsonify(selected)
 
+@app.route('/api/datasets', methods=['GET'])
+def list_datasets():
+    # List files in the upload folder
+    try:
+        files = []
+        for f in os.listdir(app.config['UPLOAD_FOLDER']):
+            path = os.path.join(app.config['UPLOAD_FOLDER'], f)
+            if os.path.isfile(path):
+                files.append({
+                    "name": f,
+                    "size": f"{os.path.getsize(path) / 1024:.2f} KB",
+                    "date": time.ctime(os.path.getmtime(path))
+                })
+        return jsonify(files)
+    except Exception as e:
+        return jsonify([])
+
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)

templates/index.html

@@ -11,76 +11,134 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         [v-cloak] { display: none; }
-        body { background-color: #f8fafc; color: #1e293b; }
-        .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
+        body { background-color: #f8fafc; color: #1e293b; font-family: 'Inter', system-ui, sans-serif; }
+        .fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
         .fade-enter-from, .fade-leave-to { opacity: 0; }
         .markdown-body h1 { font-size: 1.5em; font-weight: bold; margin-bottom: 0.5em; }
         .markdown-body h2 { font-size: 1.25em; font-weight: bold; margin-bottom: 0.5em; }
         .markdown-body ul { list-style-type: disc; margin-left: 1.5em; margin-bottom: 1em; }
-        .markdown-body code { background-color: #f1f5f9; padding: 0.2em 0.4em; border-radius: 0.25em; font-family: monospace; }
+        .markdown-body code { background-color: #f1f5f9; padding: 0.2em 0.4em; border-radius: 0.25em; font-family: monospace; color: #ef4444; }
+        .markdown-body strong { color: #0f172a; }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: #f1f5f9; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
     </style>
 </head>
 <body>
     <div id="app" v-cloak class="min-h-screen flex flex-col md:flex-row">
         <!-- Sidebar -->
-        <aside class="w-full md:w-64 bg-white border-r border-slate-200 flex-shrink-0">
+        <aside class="w-full md:w-64 bg-white border-r border-slate-200 flex-shrink-0 flex flex-col shadow-sm z-10">
             <div class="p-6 flex items-center space-x-3 border-b border-slate-100">
-                <i class="fas fa-shield-alt text-blue-600 text-2xl"></i>
-                <h1 class="text-xl font-bold text-slate-800">Cyber Sentry</h1>
+                <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-white shadow-lg shadow-blue-200">
+                    <i class="fas fa-shield-alt text-xl"></i>
+                </div>
+                <div>
+                    <h1 class="text-lg font-bold text-slate-800 leading-tight">Cyber Sentry</h1>
+                    <p class="text-xs text-slate-500">智能安全中心</p>
+                </div>
             </div>
-            <nav class="p-4 space-y-2">
-                <button @click="currentTab = 'dashboard'" :class="{'bg-blue-50 text-blue-600': currentTab === 'dashboard', 'text-slate-600 hover:bg-slate-50': currentTab !== 'dashboard'}" class="w-full text-left px-4 py-3 rounded-lg font-medium transition-colors flex items-center">
-                    <i class="fas fa-chart-pie w-6"></i> 态势感知 (Dashboard)
+            <nav class="p-4 space-y-1 flex-1 overflow-y-auto">
+                <button @click="currentTab = 'dashboard'" :class="{'bg-blue-50 text-blue-700 font-semibold': currentTab === 'dashboard', 'text-slate-600 hover:bg-slate-50': currentTab !== 'dashboard'}" class="w-full text-left px-4 py-3 rounded-lg transition-all flex items-center group">
+                    <i class="fas fa-chart-pie w-6 transition-transform group-hover:scale-110"></i> 态势感知 (Dashboard)
+                </button>
+                <button @click="currentTab = 'analyzer'" :class="{'bg-blue-50 text-blue-700 font-semibold': currentTab === 'analyzer', 'text-slate-600 hover:bg-slate-50': currentTab !== 'analyzer'}" class="w-full text-left px-4 py-3 rounded-lg transition-all flex items-center group">
+                    <i class="fas fa-search w-6 transition-transform group-hover:scale-110"></i> 日志分析 (Analyzer)
                 </button>
-                <button @click="currentTab = 'analyzer'" :class="{'bg-blue-50 text-blue-600': currentTab === 'analyzer', 'text-slate-600 hover:bg-slate-50': currentTab !== 'analyzer'}" class="w-full text-left px-4 py-3 rounded-lg font-medium transition-colors flex items-center">
-                    <i class="fas fa-search w-6"></i> 日志分析 (Analyzer)
+                <button @click="currentTab = 'playbooks'" :class="{'bg-blue-50 text-blue-700 font-semibold': currentTab === 'playbooks', 'text-slate-600 hover:bg-slate-50': currentTab !== 'playbooks'}" class="w-full text-left px-4 py-3 rounded-lg transition-all flex items-center group">
+                    <i class="fas fa-book w-6 transition-transform group-hover:scale-110"></i> 剧本库 (Playbooks)
                 </button>
-                <button @click="currentTab = 'playbooks'" :class="{'bg-blue-50 text-blue-600': currentTab === 'playbooks', 'text-slate-600 hover:bg-slate-50': currentTab !== 'playbooks'}" class="w-full text-left px-4 py-3 rounded-lg font-medium transition-colors flex items-center">
-                    <i class="fas fa-book w-6"></i> 剧本库 (Playbooks)
+                <button @click="currentTab = 'simulation'" :class="{'bg-blue-50 text-blue-700 font-semibold': currentTab === 'simulation', 'text-slate-600 hover:bg-slate-50': currentTab !== 'simulation'}" class="w-full text-left px-4 py-3 rounded-lg transition-all flex items-center group">
+                    <i class="fas fa-bug w-6 transition-transform group-hover:scale-110"></i> 攻防演练 (Sim)
                 </button>
-                <button @click="currentTab = 'simulation'" :class="{'bg-blue-50 text-blue-600': currentTab === 'simulation', 'text-slate-600 hover:bg-slate-50': currentTab !== 'simulation'}" class="w-full text-left px-4 py-3 rounded-lg font-medium transition-colors flex items-center">
-                    <i class="fas fa-bug w-6"></i> 攻防演练 (Sim)
+                <button @click="currentTab = 'datasets'" :class="{'bg-blue-50 text-blue-700 font-semibold': currentTab === 'datasets', 'text-slate-600 hover:bg-slate-50': currentTab !== 'datasets'}" class="w-full text-left px-4 py-3 rounded-lg transition-all flex items-center group">
+                    <i class="fas fa-database w-6 transition-transform group-hover:scale-110"></i> 数据集 (Datasets)
                 </button>
             </nav>
+            <div class="p-4 border-t border-slate-100">
+                <div class="bg-slate-50 rounded-lg p-3 text-xs text-slate-500 flex items-center justify-between">
+                    <span><i class="fas fa-circle text-green-500 mr-1"></i> System Online</span>
+                    <span>v2.1.0</span>
+                </div>
+            </div>
         </aside>
 
         <!-- Main Content -->
-        <main class="flex-1 overflow-y-auto p-4 md:p-8">
+        <main class="flex-1 overflow-y-auto bg-slate-50/50">
+            <header class="bg-white border-b border-slate-200 px-8 py-4 flex justify-between items-center sticky top-0 z-20 shadow-sm">
+                <h2 class="text-xl font-bold text-slate-800 capitalize">${ currentTabName }</h2>
+                <div class="flex items-center space-x-4">
+                    <button class="w-8 h-8 rounded-full bg-slate-100 hover:bg-slate-200 flex items-center justify-center text-slate-600 transition-colors">
+                        <i class="fas fa-bell"></i>
+                    </button>
+                    <div class="flex items-center space-x-2">
+                        <div class="w-8 h-8 rounded-full bg-gradient-to-tr from-blue-500 to-indigo-600 flex items-center justify-center text-white text-xs font-bold shadow-md">
+                            AD
+                        </div>
+                        <span class="text-sm font-medium text-slate-700">Admin</span>
+                    </div>
+                </div>
+            </header>
+
+            <div class="p-4 md:p-8 max-w-7xl mx-auto min-h-[calc(100vh-80px)]">
+
             
             <!-- Dashboard -->
-            <div v-if="currentTab === 'dashboard'" class="space-y-6">
+            <div v-if="currentTab === 'dashboard'" class="space-y-6 animate-fade-in">
                 <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
-                        <div class="text-sm text-slate-500 mb-1">当前威胁等级</div>
-                        <div class="text-2xl font-bold text-orange-500">${ stats.threat_level }</div>
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
+                        <div class="text-sm text-slate-500 mb-1 flex justify-between items-center">
+                            当前威胁等级 <i class="fas fa-temperature-high text-orange-200"></i>
+                        </div>
+                        <div class="text-2xl font-bold text-orange-500 flex items-center gap-2">
+                            ${ stats.threat_level }
+                            <span v-if="stats.threat_level === 'Critical'" class="flex h-3 w-3 relative">
+                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+                                <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+                            </span>
+                        </div>
                     </div>
-                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
-                        <div class="text-sm text-slate-500 mb-1">活跃事件</div>
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
+                        <div class="text-sm text-slate-500 mb-1 flex justify-between items-center">
+                            活跃事件 <i class="fas fa-bolt text-red-200"></i>
+                        </div>
                         <div class="text-2xl font-bold text-red-600">${ stats.active_incidents }</div>
                     </div>
-                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
-                        <div class="text-sm text-slate-500 mb-1">已拦截攻击</div>
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
+                        <div class="text-sm text-slate-500 mb-1 flex justify-between items-center">
+                            已拦截攻击 <i class="fas fa-shield-virus text-green-200"></i>
+                        </div>
                         <div class="text-2xl font-bold text-green-600">${ stats.blocked_attempts }</div>
                     </div>
-                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
-                        <div class="text-sm text-slate-500 mb-1">系统健康度</div>
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
+                        <div class="text-sm text-slate-500 mb-1 flex justify-between items-center">
+                            系统健康度 <i class="fas fa-heartbeat text-blue-200"></i>
+                        </div>
                         <div class="text-2xl font-bold text-blue-600">${ stats.system_health }%</div>
                     </div>
                 </div>
 
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                     <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
-                        <h3 class="text-lg font-bold mb-4">威胁分布雷达 (Threat Radar)</h3>
+                        <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
+                            <i class="fas fa-radar text-blue-500"></i> 威胁分布雷达
+                        </h3>
                         <div id="radarChart" class="w-full h-80"></div>
                     </div>
-                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
-                        <h3 class="text-lg font-bold mb-4">系统公告</h3>
-                        <div class="space-y-3">
-                            <div class="p-3 bg-blue-50 rounded-lg text-sm text-blue-800 border-l-4 border-blue-500">
-                                <strong>Updated:</strong> Log4j vulnerability patch applied to all clusters.
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex flex-col">
+                        <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
+                            <i class="fas fa-bullhorn text-yellow-500"></i> 系统公告
+                        </h3>
+                        <div class="space-y-3 flex-1 overflow-y-auto">
+                            <div class="p-3 bg-blue-50 rounded-lg text-sm text-blue-800 border-l-4 border-blue-500 shadow-sm">
+                                <strong>Updated:</strong> Log4j 漏洞补丁已应用到所有集群节点。
+                            </div>
+                            <div class="p-3 bg-yellow-50 rounded-lg text-sm text-yellow-800 border-l-4 border-yellow-500 shadow-sm">
+                                <strong>Warning:</strong> 检测到针对金融部门的钓鱼活动激增，请加强防范。
                             </div>
-                            <div class="p-3 bg-yellow-50 rounded-lg text-sm text-yellow-800 border-l-4 border-yellow-500">
-                                <strong>Warning:</strong> Increased phishing activity detected in finance sector.
+                            <div class="p-3 bg-green-50 rounded-lg text-sm text-green-800 border-l-4 border-green-500 shadow-sm">
+                                <strong>System:</strong> 数据库自动备份完成 (Size: 2.4GB)。
                             </div>
                         </div>
                     </div>
@@ -88,125 +146,241 @@
             </div>
 
             <!-- Analyzer -->
-            <div v-if="currentTab === 'analyzer'" class="space-y-6">
+            <div v-if="currentTab === 'analyzer'" class="space-y-6 animate-fade-in">
                 <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
-                    <h2 class="text-xl font-bold mb-4">智能日志分析 (AI Log Analyzer)</h2>
+                    <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
+                        <i class="fas fa-robot text-purple-500"></i> 智能日志分析 (AI Log Analyzer)
+                    </h2>
                     <p class="text-slate-500 text-sm mb-4">粘贴系统日志，AI 将自动分析威胁等级、提取指标并生成修复建议。</p>
-                    <textarea v-model="logInput" class="w-full h-40 p-4 bg-slate-50 border border-slate-200 rounded-lg font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder="Paste logs here (e.g., /var/log/auth.log lines)..."></textarea>
-                    <div class="mt-4 flex justify-end">
-                        <button @click="analyzeLog" :disabled="analyzing" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center">
-                            <i v-if="analyzing" class="fas fa-spinner fa-spin mr-2"></i>
-                            ${ analyzing ? 'Analyzing...' : 'Analyze Logs' }
-                        </button>
+                    <textarea v-model="logInput" class="w-full h-40 p-4 bg-slate-50 border border-slate-200 rounded-lg font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none transition-all" placeholder="在此粘贴日志 (例如: /var/log/auth.log) ..."></textarea>
+                    <div class="mt-4 flex justify-between items-center">
+                        <div class="text-xs text-slate-400">
+                            <i class="fas fa-info-circle mr-1"></i> 支持 Syslog, Apache, Nginx, Linux Auth Logs
+                        </div>
+                        <div class="space-x-2">
+                            <button @click="logInput = ''" class="text-slate-500 hover:text-slate-700 px-4 py-2 text-sm">
+                                清空
+                            </button>
+                            <button @click="analyzeLog" :disabled="analyzing" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center shadow-lg shadow-blue-200">
+                                <i v-if="analyzing" class="fas fa-spinner fa-spin mr-2"></i>
+                                ${ analyzing ? '分析中...' : '开始分析' }
+                            </button>
+                        </div>
                     </div>
                 </div>
 
-                <div v-if="analysisResult" class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 animate-fade-in">
+                <div v-if="analysisResult" class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 animate-fade-in border-t-4" :class="{'border-t-green-500': analysisResult.severity === 'Low', 'border-t-yellow-500': analysisResult.severity === 'Medium', 'border-t-orange-500': analysisResult.severity === 'High', 'border-t-red-600': analysisResult.severity === 'Critical'}">
                     <div class="flex items-center justify-between mb-6">
-                        <h3 class="text-lg font-bold">分析报告</h3>
-                        <span :class="{'bg-green-100 text-green-800': analysisResult.severity === 'Low', 'bg-yellow-100 text-yellow-800': analysisResult.severity === 'Medium', 'bg-orange-100 text-orange-800': analysisResult.severity === 'High', 'bg-red-100 text-red-800': analysisResult.severity === 'Critical'}" class="px-3 py-1 rounded-full text-sm font-bold">
+                        <h3 class="text-lg font-bold flex items-center gap-2">
+                            <i class="fas fa-file-medical-alt"></i> 分析报告
+                        </h3>
+                        <span :class="{'bg-green-100 text-green-800': analysisResult.severity === 'Low', 'bg-yellow-100 text-yellow-800': analysisResult.severity === 'Medium', 'bg-orange-100 text-orange-800': analysisResult.severity === 'High', 'bg-red-100 text-red-800': analysisResult.severity === 'Critical'}" class="px-3 py-1 rounded-full text-sm font-bold uppercase tracking-wide">
                             ${ analysisResult.severity }
                         </span>
                     </div>
                     
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                         <div>
-                            <div class="mb-4">
-                                <h4 class="font-bold text-slate-700 mb-2">摘要</h4>
-                                <p class="text-slate-600 text-sm">${ analysisResult.summary }</p>
+                            <div class="mb-6">
+                                <h4 class="font-bold text-slate-700 mb-2 flex items-center gap-2"><i class="fas fa-align-left text-slate-400"></i> 摘要</h4>
+                                <p class="text-slate-600 text-sm leading-relaxed bg-slate-50 p-3 rounded-lg border border-slate-100">${ analysisResult.summary }</p>
                             </div>
-                            <div class="mb-4">
-                                <h4 class="font-bold text-slate-700 mb-2">发现指标 (IOCs)</h4>
+                            <div class="mb-6">
+                                <h4 class="font-bold text-slate-700 mb-2 flex items-center gap-2"><i class="fas fa-fingerprint text-slate-400"></i> 发现指标 (IOCs)</h4>
                                 <div class="flex flex-wrap gap-2">
-                                    <span v-for="ioc in analysisResult.indicators" class="bg-slate-100 text-slate-600 px-2 py-1 rounded text-xs font-mono border border-slate-200">${ ioc }</span>
+                                    <span v-for="ioc in analysisResult.indicators" class="bg-slate-100 text-slate-600 px-2 py-1 rounded text-xs font-mono border border-slate-200 select-all hover:bg-slate-200 transition-colors cursor-pointer" title="Click to copy">${ ioc }</span>
+                                    <span v-if="!analysisResult.indicators || analysisResult.indicators.length === 0" class="text-slate-400 text-xs italic">无 IOC</span>
                                 </div>
                             </div>
                             <div>
-                                <h4 class="font-bold text-slate-700 mb-2">修复建议</h4>
-                                <div class="p-3 bg-green-50 text-green-800 rounded-lg text-sm markdown-body" v-html="renderMarkdown(analysisResult.recommendation)"></div>
+                                <h4 class="font-bold text-slate-700 mb-2 flex items-center gap-2"><i class="fas fa-clipboard-check text-slate-400"></i> 修复建议</h4>
+                                <div class="p-4 bg-green-50 text-green-800 rounded-lg text-sm markdown-body border border-green-100 shadow-inner" v-html="renderMarkdown(analysisResult.recommendation)"></div>
                             </div>
                         </div>
                         <div>
-                            <h4 class="font-bold text-slate-700 mb-2">流量/活动峰值</h4>
-                            <div id="mockGraph" class="w-full h-48 bg-slate-50 rounded-lg"></div>
+                            <h4 class="font-bold text-slate-700 mb-2 flex items-center gap-2"><i class="fas fa-chart-line text-slate-400"></i> 流量/活动峰值</h4>
+                            <div id="mockGraph" class="w-full h-64 bg-slate-50 rounded-lg border border-slate-100"></div>
+                            
+                            <div class="mt-6">
+                                <h4 class="font-bold text-slate-700 mb-2 flex items-center gap-2"><i class="fas fa-tools text-slate-400"></i> 快速操作</h4>
+                                <div class="grid grid-cols-2 gap-3">
+                                    <button class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg text-sm transition-colors flex items-center justify-center gap-2">
+                                        <i class="fas fa-ban"></i> 封禁 IP
+                                    </button>
+                                    <button class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-lg text-sm transition-colors flex items-center justify-center gap-2">
+                                        <i class="fas fa-envelope"></i> 发送报告
+                                    </button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
 
             <!-- Playbooks -->
-            <div v-if="currentTab === 'playbooks'" class="space-y-6">
-                <div class="flex justify-between items-center">
-                    <h2 class="text-xl font-bold">安全剧本库 (SOP Vault)</h2>
-                    <button @click="showAddPlaybook = true" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 text-sm">
-                        <i class="fas fa-plus mr-2"></i> 新增剧本
+            <div v-if="currentTab === 'playbooks'" class="space-y-6 animate-fade-in">
+                <div class="flex justify-between items-center bg-white p-4 rounded-xl shadow-sm border border-slate-100">
+                    <div>
+                        <h2 class="text-xl font-bold text-slate-800">安全剧本库 (SOP Vault)</h2>
+                        <p class="text-slate-500 text-xs">标准操作程序与应急响应指南</p>
+                    </div>
+                    <button @click="showAddPlaybook = true" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 text-sm shadow-md shadow-blue-200 transition-transform active:scale-95 flex items-center gap-2">
+                        <i class="fas fa-plus"></i> 新增剧本
                     </button>
                 </div>
 
                 <!-- Add Modal -->
-                <div v-if="showAddPlaybook" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-                    <div class="bg-white rounded-xl max-w-lg w-full p-6">
-                        <h3 class="text-lg font-bold mb-4">Add New Playbook</h3>
+                <div v-if="showAddPlaybook" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50 transition-all">
+                    <div class="bg-white rounded-xl max-w-lg w-full p-6 shadow-2xl transform transition-all scale-100">
+                        <h3 class="text-lg font-bold mb-4 flex items-center gap-2"><i class="fas fa-edit text-blue-500"></i> 新增响应剧本</h3>
                         <div class="space-y-4">
-                            <input v-model="newPlaybook.title" placeholder="Title" class="w-full p-2 border rounded">
-                            <input v-model="newPlaybook.scenario" placeholder="Scenario Trigger" class="w-full p-2 border rounded">
-                            <select v-model="newPlaybook.severity" class="w-full p-2 border rounded">
-                                <option>Low</option>
-                                <option>Medium</option>
-                                <option>High</option>
-                                <option>Critical</option>
-                            </select>
-                            <textarea v-model="newPlaybook.steps" placeholder="Response Steps..." class="w-full p-2 border rounded h-32"></textarea>
+                            <div>
+                                <label class="block text-xs font-bold text-slate-500 mb-1">剧本标题</label>
+                                <input v-model="newPlaybook.title" placeholder="例如: 数据库泄露响应" class="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none">
+                            </div>
+                            <div>
+                                <label class="block text-xs font-bold text-slate-500 mb-1">触发场景</label>
+                                <input v-model="newPlaybook.scenario" placeholder="例如: 检测到敏感数据外发" class="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none">
+                            </div>
+                            <div>
+                                <label class="block text-xs font-bold text-slate-500 mb-1">严重等级</label>
+                                <select v-model="newPlaybook.severity" class="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none bg-white">
+                                    <option>Low</option>
+                                    <option>Medium</option>
+                                    <option>High</option>
+                                    <option>Critical</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-xs font-bold text-slate-500 mb-1">响应步骤 (Markdown)</label>
+                                <textarea v-model="newPlaybook.steps" placeholder="1. 步骤一..." class="w-full p-2 border border-slate-200 rounded-lg h-32 focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-sm"></textarea>
+                            </div>
                         </div>
                         <div class="mt-6 flex justify-end space-x-3">
-                            <button @click="showAddPlaybook = false" class="text-slate-500 hover:text-slate-700">Cancel</button>
-                            <button @click="addPlaybook" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Save</button>
+                            <button @click="showAddPlaybook = false" class="text-slate-500 hover:text-slate-700 px-4 py-2 rounded-lg hover:bg-slate-100 transition-colors">取消</button>
+                            <button @click="addPlaybook" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 shadow-lg shadow-blue-200 transition-colors">保存剧本</button>
                         </div>
                     </div>
                 </div>
 
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                    <div v-for="pb in playbooks" :key="pb.id" class="bg-white rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow overflow-hidden">
-                        <div class="p-5">
+                    <div v-for="pb in playbooks" :key="pb.id" class="bg-white rounded-xl shadow-sm border border-slate-100 hover:shadow-lg transition-all overflow-hidden group">
+                        <div class="p-5 flex flex-col h-full">
                             <div class="flex justify-between items-start mb-3">
-                                <h3 class="font-bold text-lg">${ pb.title }</h3>
-                                <span class="text-xs px-2 py-1 rounded-full border" :class="{'bg-red-50 text-red-600 border-red-100': pb.severity==='Critical', 'bg-orange-50 text-orange-600 border-orange-100': pb.severity==='High'}">
+                                <h3 class="font-bold text-lg text-slate-800 group-hover:text-blue-600 transition-colors">${ pb.title }</h3>
+                                <span class="text-xs px-2 py-1 rounded-full border font-bold" :class="{'bg-red-50 text-red-600 border-red-100': pb.severity==='Critical', 'bg-orange-50 text-orange-600 border-orange-100': pb.severity==='High', 'bg-yellow-50 text-yellow-600 border-yellow-100': pb.severity==='Medium', 'bg-green-50 text-green-600 border-green-100': pb.severity==='Low'}">
                                     ${ pb.severity }
                                 </span>
                             </div>
-                            <p class="text-sm text-slate-500 mb-4 h-10 overflow-hidden text-ellipsis">${ pb.scenario }</p>
-                            <div class="text-sm bg-slate-50 p-3 rounded-lg border border-slate-100 whitespace-pre-wrap font-mono text-slate-600 h-32 overflow-y-auto custom-scrollbar">${ pb.steps }</div>
+                            <p class="text-sm text-slate-500 mb-4 h-10 overflow-hidden text-ellipsis line-clamp-2" title="${ pb.scenario }">${ pb.scenario }</p>
+                            <div class="flex-1 bg-slate-50 p-3 rounded-lg border border-slate-100 font-mono text-xs text-slate-600 h-32 overflow-y-auto custom-scrollbar leading-relaxed whitespace-pre-wrap">${ pb.steps }</div>
+                            <div class="mt-4 flex justify-end opacity-0 group-hover:opacity-100 transition-opacity">
+                                <button class="text-slate-400 hover:text-blue-600 text-xs flex items-center gap-1">
+                                    <i class="fas fa-external-link-alt"></i> 查看详情
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
 
             <!-- Simulation -->
-            <div v-if="currentTab === 'simulation'" class="space-y-6">
-                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 text-center py-12">
-                    <div class="w-20 h-20 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-6">
-                        <i class="fas fa-biohazard text-red-500 text-3xl"></i>
+            <div v-if="currentTab === 'simulation'" class="space-y-6 animate-fade-in">
+                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 text-center py-16 relative overflow-hidden">
+                    <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500"></div>
+                    <div class="w-24 h-24 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-6 shadow-inner">
+                        <i class="fas fa-biohazard text-red-500 text-4xl animate-pulse"></i>
                     </div>
-                    <h2 class="text-2xl font-bold mb-2">红蓝对抗演练 (Breach Simulator)</h2>
-                    <p class="text-slate-500 mb-8 max-w-md mx-auto">Generate realistic attack scenarios to test your response readiness and team coordination.</p>
-                    <button @click="runSimulation" :disabled="simulating" class="bg-red-600 text-white px-8 py-3 rounded-xl hover:bg-red-700 shadow-lg shadow-red-200 transition-all transform hover:scale-105 disabled:opacity-50 disabled:scale-100">
-                        ${ simulating ? 'Simulating Attack...' : 'Launch Simulation' }
+                    <h2 class="text-2xl font-bold mb-2 text-slate-800">红蓝对抗演练 (Breach Simulator)</h2>
+                    <p class="text-slate-500 mb-8 max-w-md mx-auto">生成逼真的攻击场景，测试您的应急响应能力和团队协作水平。</p>
+                    <button @click="runSimulation" :disabled="simulating" class="bg-red-600 text-white px-8 py-3 rounded-xl hover:bg-red-700 shadow-xl shadow-red-200 transition-all transform hover:scale-105 disabled:opacity-50 disabled:scale-100 flex items-center mx-auto gap-2">
+                        <i class="fas fa-rocket" :class="{'animate-bounce': simulating}"></i>
+                        ${ simulating ? '正在生成攻击场景...' : '发起模拟攻击' }
                     </button>
                 </div>
 
-                <div v-if="simulationResult" class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 border-l-4 border-red-500 animate-pulse-once">
-                    <h3 class="text-red-600 font-bold text-lg mb-2">⚠️ New Alert Detected</h3>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
-                        <div><span class="text-slate-500">Type:</span> <span class="font-bold">${ simulationResult.type }</span></div>
-                        <div class="md:col-span-2"><span class="text-slate-500">Details:</span> ${ simulationResult.details }</div>
-                        <div class="md:col-span-3 font-mono bg-black text-green-400 p-3 rounded mt-2 text-xs">
-                            ${ simulationResult.log }
+                <div v-if="simulationResult" class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 border-l-4 border-red-500 animate-fade-in-up">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="text-red-600 font-bold text-lg flex items-center gap-2">
+                            <i class="fas fa-exclamation-triangle"></i> 新威胁告警
+                        </h3>
+                        <span class="text-xs text-slate-400">Just now</span>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
+                        <div class="bg-slate-50 p-4 rounded-lg border border-slate-100">
+                            <span class="text-slate-500 block text-xs uppercase tracking-wider mb-1">攻击类型</span> 
+                            <span class="font-bold text-lg text-slate-800">${ simulationResult.type }</span>
+                        </div>
+                        <div class="md:col-span-2 bg-slate-50 p-4 rounded-lg border border-slate-100">
+                            <span class="text-slate-500 block text-xs uppercase tracking-wider mb-1">详情描述</span> 
+                            <span class="text-slate-700">${ simulationResult.details }</span>
+                        </div>
+                        <div class="md:col-span-3">
+                            <span class="text-slate-500 block text-xs uppercase tracking-wider mb-1">原始日志</span>
+                            <div class="font-mono bg-slate-900 text-green-400 p-4 rounded-lg text-xs overflow-x-auto shadow-inner relative group">
+                                ${ simulationResult.log }
+                                <button @click="copyToClipboard(simulationResult.log)" class="absolute top-2 right-2 text-slate-500 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity">
+                                    <i class="fas fa-copy"></i>
+                                </button>
+                            </div>
                         </div>
                     </div>
-                    <div class="mt-4 flex justify-end">
-                        <button @click="copyToAnalyzer(simulationResult.log)" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
-                            Send to Analyzer <i class="fas fa-arrow-right ml-1"></i>
+                    <div class="mt-6 flex justify-end">
+                        <button @click="copyToAnalyzer(simulationResult.log)" class="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-100 transition-colors text-sm font-bold flex items-center gap-2">
+                            发送至分析器 <i class="fas fa-arrow-right"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Datasets (New) -->
+            <div v-if="currentTab === 'datasets'" class="space-y-6 animate-fade-in">
+                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
+                    <div class="flex justify-between items-center mb-6">
+                        <div>
+                            <h2 class="text-xl font-bold text-slate-800 flex items-center gap-2">
+                                <i class="fas fa-database text-indigo-500"></i> 数据集管理
+                            </h2>
+                            <p class="text-slate-500 text-sm">管理上传的日志文件和数据集，用于微调模型或历史回溯。</p>
+                        </div>
+                        <button @click="triggerUpload" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 text-sm shadow-md shadow-indigo-200 transition-all flex items-center gap-2">
+                            <i class="fas fa-cloud-upload-alt"></i> 上传数据
                         </button>
+                        <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden" accept=".log,.txt,.csv,.json">
+                    </div>
+
+                    <div v-if="uploading" class="w-full bg-slate-100 rounded-full h-2.5 mb-6 overflow-hidden">
+                        <div class="bg-indigo-600 h-2.5 rounded-full animate-pulse" style="width: 100%"></div>
+                    </div>
+
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-sm text-left text-slate-500">
+                            <thead class="text-xs text-slate-700 uppercase bg-slate-50">
+                                <tr>
+                                    <th scope="col" class="px-6 py-3 rounded-l-lg">文件名</th>
+                                    <th scope="col" class="px-6 py-3">大小</th>
+                                    <th scope="col" class="px-6 py-3">上传日期</th>
+                                    <th scope="col" class="px-6 py-3 rounded-r-lg text-right">操作</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="file in datasets" :key="file.name" class="bg-white border-b hover:bg-slate-50 transition-colors">
+                                    <td class="px-6 py-4 font-medium text-slate-900 flex items-center gap-2">
+                                        <i class="far fa-file-alt text-slate-400"></i> ${ file.name }
+                                    </td>
+                                    <td class="px-6 py-4">${ file.size }</td>
+                                    <td class="px-6 py-4">${ file.date }</td>
+                                    <td class="px-6 py-4 text-right">
+                                        <button class="text-blue-600 hover:text-blue-900 font-medium text-xs">下载</button>
+                                    </td>
+                                </tr>
+                                <tr v-if="datasets.length === 0">
+                                    <td colspan="4" class="px-6 py-8 text-center text-slate-400 italic">
+                                        暂无数据，请上传文件。
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
                     </div>
                 </div>
             </div>
@@ -215,7 +389,7 @@
     </div>
 
     <script>
-        const { createApp, ref, onMounted, nextTick } = Vue;
+        const { createApp, ref, onMounted, nextTick, computed } = Vue;
 
         createApp({
             delimiters: ['${', '}'],
@@ -230,13 +404,42 @@
                 const newPlaybook = ref({ title: '', scenario: '', steps: '', severity: 'Medium' });
                 const simulating = ref(false);
                 const simulationResult = ref(null);
+                const datasets = ref([]);
+                const uploading = ref(false);
+                const fileInput = ref(null);
+                
                 let radarChart = null;
+                let trafficChart = null;
+
+                const currentTabName = computed(() => {
+                    const names = {
+                        'dashboard': '态势感知',
+                        'analyzer': '日志分析',
+                        'playbooks': '剧本库',
+                        'simulation': '攻防演练',
+                        'datasets': '数据集管理'
+                    };
+                    return names[currentTab.value] || 'Dashboard';
+                });
 
                 const fetchStats = async () => {
-                    const res = await fetch('/api/stats');
-                    const data = await res.json();
-                    stats.value = data;
-                    initRadar(data.radar_data);
+                    try {
+                        const res = await fetch('/api/stats');
+                        const data = await res.json();
+                        stats.value = data;
+                        initRadar(data.radar_data);
+                    } catch (e) {
+                        console.error("Failed to fetch stats", e);
+                    }
+                };
+
+                const fetchDatasets = async () => {
+                    try {
+                        const res = await fetch('/api/datasets');
+                        datasets.value = await res.json();
+                    } catch (e) {
+                        console.error("Failed to fetch datasets", e);
+                    }
                 };
 
                 const initRadar = (data) => {
@@ -245,6 +448,7 @@
                     radarChart = echarts.init(document.getElementById('radarChart'));
                     radarChart.setOption({
                         color: ['#3b82f6'],
+                        tooltip: {},
                         radar: {
                             indicator: data.map(d => ({ name: d.name, max: 100 })),
                             shape: 'circle',
@@ -254,11 +458,15 @@
                             type: 'radar',
                             data: [{
                                 value: data.map(d => d.value),
-                                name: 'Threat Landscape',
-                                areaStyle: { opacity: 0.2 }
+                                name: '当前威胁分布',
+                                areaStyle: { opacity: 0.2, color: '#3b82f6' },
+                                lineStyle: { width: 2 }
                             }]
                         }]
                     });
+                    
+                    // Responsive resize
+                    window.addEventListener('resize', () => radarChart && radarChart.resize());
                 };
 
                 const analyzeLog = async () => {
@@ -276,7 +484,7 @@
                             if (analysisResult.value.mock_graph) initLineChart(analysisResult.value.mock_graph);
                         });
                     } catch (e) {
-                        alert('Analysis failed');
+                        alert('Analysis failed: ' + e);
                     } finally {
                         analyzing.value = false;
                     }
@@ -285,17 +493,20 @@
                 const initLineChart = (data) => {
                     const el = document.getElementById('mockGraph');
                     if (!el) return;
-                    const chart = echarts.init(el);
-                    chart.setOption({
-                        grid: { top: 10, bottom: 20, left: 30, right: 10 },
-                        xAxis: { type: 'category', show: false },
-                        yAxis: { type: 'value', splitLine: { show: false } },
+                    if (trafficChart) trafficChart.dispose();
+                    trafficChart = echarts.init(el);
+                    trafficChart.setOption({
+                        grid: { top: 20, bottom: 20, left: 40, right: 20 },
+                        tooltip: { trigger: 'axis' },
+                        xAxis: { type: 'category', data: ['T-5', 'T-4', 'T-3', 'T-2', 'Now'] },
+                        yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
                         series: [{
                             data: data,
                             type: 'line',
                             smooth: true,
-                            areaStyle: { opacity: 0.2 },
-                            itemStyle: { color: '#ef4444' }
+                            areaStyle: { opacity: 0.2, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#ef4444'}, {offset: 1, color: '#fee2e2'}]) },
+                            itemStyle: { color: '#ef4444' },
+                            lineStyle: { width: 3 }
                         }]
                     });
                 };
@@ -306,6 +517,7 @@
                 };
 
                 const addPlaybook = async () => {
+                    if(!newPlaybook.value.title) return;
                     await fetch('/api/playbooks', {
                         method: 'POST',
                         headers: {'Content-Type': 'application/json'},
@@ -319,8 +531,8 @@
                 const runSimulation = async () => {
                     simulating.value = true;
                     simulationResult.value = null;
-                    // Mock delay
-                    await new Promise(r => setTimeout(r, 1500));
+                    // Mock delay for realism
+                    await new Promise(r => setTimeout(r, 2000));
                     const res = await fetch('/api/simulate', { method: 'POST' });
                     simulationResult.value = await res.json();
                     simulating.value = false;
@@ -329,22 +541,85 @@
                 const copyToAnalyzer = (log) => {
                     currentTab.value = 'analyzer';
                     logInput.value = log;
+                    // Auto analyze after switch
+                    setTimeout(() => analyzeLog(), 500);
+                };
+                
+                const copyToClipboard = (text) => {
+                    navigator.clipboard.writeText(text);
+                    // Could add a toast here
                 };
 
                 const renderMarkdown = (text) => {
-                    return marked.parse(text || '');
+                    if (!text) return '';
+                    return marked.parse(text);
+                };
+
+                const triggerUpload = () => {
+                    fileInput.value.click();
+                };
+
+                const handleFileUpload = async (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+
+                    uploading.value = true;
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    try {
+                        const res = await fetch('/api/upload', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        const data = await res.json();
+                        if (res.ok) {
+                            alert(`Upload Success: ${data.message}\nAnalysis: ${data.analysis}`);
+                            fetchDatasets(); // Refresh list
+                        } else {
+                            alert('Upload Failed: ' + data.error);
+                        }
+                    } catch (e) {
+                        alert('Upload Error: ' + e);
+                    } finally {
+                        uploading.value = false;
+                        // Reset input
+                        event.target.value = '';
+                    }
                 };
 
                 onMounted(() => {
                     fetchStats();
                     fetchPlaybooks();
-                    window.addEventListener('resize', () => radarChart && radarChart.resize());
+                    fetchDatasets();
+                    
+                    // Poll stats every 10s for liveliness
+                    setInterval(fetchStats, 10000);
                 });
 
                 return {
-                    currentTab, stats, logInput, analyzing, analysisResult,
-                    playbooks, showAddPlaybook, newPlaybook, addPlaybook,
-                    simulating, simulationResult, runSimulation, copyToAnalyzer, renderMarkdown
+                    currentTab,
+                    currentTabName,
+                    stats,
+                    logInput,
+                    analyzing,
+                    analysisResult,
+                    playbooks,
+                    showAddPlaybook,
+                    newPlaybook,
+                    simulating,
+                    simulationResult,
+                    datasets,
+                    uploading,
+                    fileInput,
+                    analyzeLog,
+                    addPlaybook,
+                    runSimulation,
+                    copyToAnalyzer,
+                    renderMarkdown,
+                    triggerUpload,
+                    handleFileUpload,
+                    copyToClipboard
                 };
             }
         }).mount('#app');