Initial commit

.gitignore

@@ -0,0 +1,5 @@
+__pycache__/
+*.pyc
+fleet.db
+uploads/
+.DS_Store

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create a non-root user for security (recommended for HF Spaces)
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,34 @@
+---
+title: Fleet Commander Agent
+emoji: 🚁
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+short_description: 智能机队指挥与调度系统
+---
+
+# 智能机队指挥官 (Fleet Commander Agent)
+
+这是一个基于具身智能（Embodied AI）概念的机队管理 SaaS 演示项目。
+它模拟了一个能够自主监控、调度和优化机器人/无人机机队的 AI 代理。
+
+## 功能特点
+
+- **实时遥测监控**: 可视化展示机队位置、电量和状态。
+- **智能异常检测**: AI 自动识别低电量或故障设备并触发警报。
+- **自主任务调度**: 模拟任务分配与路径规划。
+- **移动端适配**: 响应式设计，支持手机/平板访问。
+
+## 技术栈
+
+- Backend: Python Flask
+- Frontend: Vue.js 3, Tailwind CSS, ECharts
+- Deployment: Docker
+
+## 运行方式
+
+```bash
+docker build -t fleet-agent .
+docker run -p 7860:7860 fleet-agent
+```

app.py

@@ -0,0 +1,267 @@
+import os
+import time
+import random
+import json
+import sqlite3
+import threading
+from flask import Flask, render_template, jsonify, request
+from flask_cors import CORS
+from openai import OpenAI
+from werkzeug.utils import secure_filename
+
+app = Flask(__name__)
+CORS(app)
+
+# 配置
+app.config['SECRET_KEY'] = 'fleet-commander-secret'
+app.config['UPLOAD_FOLDER'] = 'uploads'
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB limit
+app.config['ALLOWED_EXTENSIONS'] = {'txt', 'json', 'csv', 'log', 'md'}
+
+# SiliconFlow API Configuration
+SILICONFLOW_API_KEY = "sk-vimuseiptfbomzegyuvmebjzooncsqbyjtlddrfodzcdskgi"
+SILICONFLOW_BASE_URL = "https://api.siliconflow.cn/v1"
+
+# Ensure upload directory exists
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+# Database Setup
+DB_PATH = 'fleet.db'
+
+def init_db():
+    conn = sqlite3.connect(DB_PATH)
+    c = conn.cursor()
+    c.execute('''CREATE TABLE IF NOT EXISTS robots
+                 (id TEXT PRIMARY KEY, type TEXT, status TEXT, battery REAL, x REAL, y REAL, load REAL)''')
+    c.execute('''CREATE TABLE IF NOT EXISTS alerts
+                 (id INTEGER PRIMARY KEY AUTOINCREMENT, time TEXT, message TEXT, level TEXT)''')
+    c.execute('''CREATE TABLE IF NOT EXISTS tasks
+                 (id TEXT PRIMARY KEY, bot_id TEXT, description TEXT, status TEXT)''')
+    
+    # Check if robots exist, if not, initialize
+    c.execute("SELECT count(*) FROM robots")
+    if c.fetchone()[0] == 0:
+        for i in range(1, 11):
+            bot_id = f'BOT-{i:03d}'
+            bot_type = 'Drone' if i <= 5 else 'AMR'
+            c.execute("INSERT INTO robots VALUES (?, ?, ?, ?, ?, ?, ?)",
+                      (bot_id, bot_type, 'idle', random.randint(60, 100), random.uniform(10, 90), random.uniform(10, 90), 0))
+            
+    conn.commit()
+    conn.close()
+
+init_db()
+
+def get_db_connection():
+    conn = sqlite3.connect(DB_PATH)
+    conn.row_factory = sqlite3.Row
+    return conn
+
+# Fleet State Management (Hybrid: In-memory for speed, DB for persistence)
+class FleetState:
+    def __init__(self):
+        self.last_update = time.time()
+        self.lock = threading.Lock()
+
+    def update(self):
+        with self.lock:
+            current_time = time.time()
+            raw_dt = current_time - self.last_update
+            self.last_update = current_time
+            dt = min(raw_dt, 1.0)
+
+            conn = get_db_connection()
+            c = conn.cursor()
+            
+            # Fetch all robots
+            robots = [dict(row) for row in conn.execute("SELECT * FROM robots").fetchall()]
+            
+            for bot in robots:
+                # Logic (same as before)
+                if bot['status'] == 'active':
+                    bot['x'] += random.uniform(-1, 1) * 10 * dt
+                    bot['y'] += random.uniform(-1, 1) * 10 * dt
+                    bot['x'] = max(0, min(100, bot['x']))
+                    bot['y'] = max(0, min(100, bot['y']))
+                    bot['battery'] -= 0.5 * dt
+                elif bot['status'] == 'idle':
+                    bot['battery'] -= 0.05 * dt
+                elif bot['status'] == 'charging':
+                    bot['battery'] += 5 * dt
+                
+                # Mock AI Logic
+                if bot['battery'] < 20 and bot['status'] != 'charging':
+                    bot['status'] = 'charging'
+                    self.add_alert(conn, f"警告: {bot['id']} 电量过低，自动返回充电。", "warning")
+                elif bot['battery'] > 95 and bot['status'] == 'charging':
+                    bot['status'] = 'idle'
+                    self.add_alert(conn, f"通知: {bot['id']} 充电完成，等待任务。", "success")
+                
+                if bot['status'] != 'error' and random.random() < 0.0005: # Reduced probability
+                    bot['status'] = 'error'
+                    self.add_alert(conn, f"紧急: {bot['id']} 发生传感器故障！", "error")
+
+                bot['battery'] = max(0, min(100, bot['battery']))
+                
+                # Update DB
+                c.execute("UPDATE robots SET status=?, battery=?, x=?, y=? WHERE id=?",
+                          (bot['status'], bot['battery'], bot['x'], bot['y'], bot['id']))
+            
+            conn.commit()
+            conn.close()
+
+    def add_alert(self, conn, message, level):
+        conn.execute("INSERT INTO alerts (time, message, level) VALUES (?, ?, ?)",
+                     (time.strftime('%H:%M:%S'), message, level))
+        # Keep only last 50
+        conn.execute("DELETE FROM alerts WHERE id NOT IN (SELECT id FROM alerts ORDER BY id DESC LIMIT 50)")
+
+    def assign_task(self, task_desc):
+        with self.lock:
+            conn = get_db_connection()
+            # Find idle bot
+            bot_row = conn.execute("SELECT * FROM robots WHERE status='idle' ORDER BY RANDOM() LIMIT 1").fetchone()
+            if not bot_row:
+                conn.close()
+                return False, "没有可用的空闲机器��"
+            
+            bot = dict(bot_row)
+            bot_id = bot['id']
+            task_id = f'TASK-{int(time.time())}'
+            
+            conn.execute("UPDATE robots SET status='active' WHERE id=?", (bot_id,))
+            conn.execute("INSERT INTO tasks (id, bot_id, description, status) VALUES (?, ?, ?, ?)",
+                         (task_id, bot_id, task_desc, 'in_progress'))
+            
+            self.add_alert(conn, f"任务: 已分配任务 '{task_desc}' 给 {bot_id}", "info")
+            conn.commit()
+            conn.close()
+            return True, f"任务已分配给 {bot_id}"
+
+    def fix_bot(self, bot_id):
+        with self.lock:
+            conn = get_db_connection()
+            bot = conn.execute("SELECT * FROM robots WHERE id=?", (bot_id,)).fetchone()
+            if bot and bot['status'] == 'error':
+                conn.execute("UPDATE robots SET status='idle' WHERE id=?", (bot_id,))
+                self.add_alert(conn, f"修复: {bot_id} 远程修复成功，恢复待命。", "success")
+                conn.commit()
+                conn.close()
+                return True
+            conn.close()
+            return False
+
+fleet = FleetState()
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/telemetry')
+def get_telemetry():
+    fleet.update()
+    conn = get_db_connection()
+    robots = [dict(row) for row in conn.execute("SELECT * FROM robots").fetchall()]
+    alerts = [dict(row) for row in conn.execute("SELECT * FROM alerts ORDER BY id DESC LIMIT 50").fetchall()]
+    conn.close()
+    
+    return jsonify({
+        'robots': robots,
+        'alerts': alerts,
+        'stats': {
+            'total': len(robots),
+            'active': len([r for r in robots if r['status'] == 'active']),
+            'charging': len([r for r in robots if r['status'] == 'charging']),
+            'error': len([r for r in robots if r['status'] == 'error'])
+        }
+    })
+
+@app.route('/api/command', methods=['POST'])
+def send_command():
+    data = request.json
+    cmd_type = data.get('type')
+    
+    if cmd_type == 'task':
+        success, msg = fleet.assign_task(data.get('description', '巡逻任务'))
+    elif cmd_type == 'fix':
+        success = fleet.fix_bot(data.get('bot_id'))
+        msg = "修复指令已发送" if success else "修复失败或机器人未故障"
+    else:
+        success = False
+        msg = "未知指令"
+
+    return jsonify({'success': success, 'message': msg})
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
+
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        return jsonify({'success': False, 'message': '没有文件部分'})
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'success': False, 'message': '未选择文件'})
+    if file and allowed_file(file.filename):
+        filename = secure_filename(file.filename)
+        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
+        
+        # 简单解析逻辑 (如果是 mission.json，自动下发任务)
+        if filename.endswith('.json'):
+            try:
+                with open(os.path.join(app.config['UPLOAD_FOLDER'], filename), 'r') as f:
+                    content = json.load(f)
+                    if isinstance(content, list):
+                        count = 0
+                        for item in content:
+                            if 'task' in item:
+                                fleet.assign_task(item['task'])
+                                count += 1
+                        return jsonify({'success': True, 'message': f'文件上传成功，已自动解析并下发 {count} 个任务'})
+            except Exception as e:
+                return jsonify({'success': True, 'message': f'文件上传成功，但解析失败: {str(e)}'})
+
+        return jsonify({'success': True, 'message': f'文件 {filename} 上传成功'})
+    return jsonify({'success': False, 'message': '不支持的文件类型'})
+
+@app.route('/api/chat', methods=['POST'])
+def chat_ai():
+    data = request.json
+    user_message = data.get('message', '')
+    
+    # 获取当前状态作为上下文
+    conn = get_db_connection()
+    robots = [dict(row) for row in conn.execute("SELECT * FROM robots").fetchall()]
+    conn.close()
+    
+    system_prompt = f"""
+    你是一个智能机队指挥官助手。当前机队状态如下：
+    总数: {len(robots)}
+    活跃: {len([r for r in robots if r['status'] == 'active'])}
+    充电: {len([r for r in robots if r['status'] == 'charging'])}
+    故障: {len([r for r in robots if r['status'] == 'error'])}
+    
+    详细列表: {json.dumps(robots[:5])} (仅显示前5个)
+    
+    请根据以上信息回答用户问题。如果是下发任务的请求，请建议用户使用左侧的任务下发面板，或者告诉我你希望我如何协助。请用中文回答，简练专业。
+    """
+    
+    try:
+        client = OpenAI(api_key=SILICONFLOW_API_KEY, base_url=SILICONFLOW_BASE_URL)
+        response = client.chat.completions.create(
+            model="deepseek-ai/DeepSeek-V3", # 尝试使用 DeepSeek V3，如果不行可以换 Qwen
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": user_message}
+            ],
+            stream=False
+        )
+        ai_reply = response.choices[0].message.content
+        return jsonify({'success': True, 'reply': ai_reply})
+    except Exception as e:
+        print(f"SiliconFlow API Error: {e}")
+        return jsonify({'success': False, 'reply': "抱歉，AI 通信暂时中断，请检查网络或 Key 配置。"})
+
+if __name__ == '__main__':
+    # 确保 app.run 在主线程
+    app.run(host='0.0.0.0', port=7860, debug=False) # Hugging Face usually expects port 7860

requirements.txt

@@ -0,0 +1,4 @@
+flask
+flask-cors
+requests
+openai

templates/index.html

@@ -0,0 +1,407 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>智能机队指挥官 | Fleet Commander</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        [v-cloak] { display: none; }
+        .scrollbar-hide::-webkit-scrollbar { display: none; }
+        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
+        .chat-msg { max-width: 80%; word-wrap: break-word; }
+    </style>
+</head>
+<body class="bg-slate-100 text-slate-800">
+    <div id="app" v-cloak class="h-screen flex flex-col">
+        <!-- Header -->
+        <header class="bg-white shadow-sm p-4 flex justify-between items-center z-20 border-b">
+            <div class="flex items-center gap-3">
+                <div class="bg-indigo-600 text-white p-2 rounded-lg">
+                    <i class="fas fa-helicopter text-xl"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-slate-800 leading-tight">智能机队指挥官</h1>
+                    <div class="text-xs text-slate-500">Fleet Commander Agent <span class="bg-green-100 text-green-700 px-1 rounded ml-1">v2.0</span></div>
+                </div>
+            </div>
+            <div class="flex gap-4 text-sm text-slate-600 items-center">
+                <div class="hidden md:flex items-center gap-2 px-3 py-1 bg-slate-50 rounded-full border">
+                    <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                    <span>系统在线</span>
+                </div>
+                <div class="hidden md:block">CPU: 12%</div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-1 flex overflow-hidden flex-col md:flex-row">
+            <!-- Left: Map Area -->
+            <div class="flex-1 relative bg-slate-200 flex flex-col" id="map-container">
+                <div id="fleet-map" class="flex-1 w-full h-full min-h-[300px]"></div>
+                
+                <!-- Map Overlay Stats -->
+                <div class="absolute top-4 left-4 bg-white/90 p-4 rounded-xl shadow-lg backdrop-blur-sm z-10 border border-white/50">
+                    <div class="text-xs text-slate-500 mb-1 font-medium uppercase tracking-wider">活跃单位</div>
+                    <div class="text-3xl font-black text-indigo-600 flex items-baseline gap-1">
+                        ${ stats.active }
+                        <span class="text-sm font-normal text-slate-400">/ ${ stats.total }</span>
+                    </div>
+                </div>
+
+                <!-- Alert Overlay (Bottom Left) -->
+                <div class="absolute bottom-4 left-4 right-4 md:right-auto md:w-96 max-h-48 overflow-y-auto bg-black/70 text-white p-3 rounded-lg shadow-lg z-10 backdrop-blur-md text-xs font-mono">
+                    <div v-for="(alert, i) in alerts.slice(0, 5)" :key="i" class="mb-1.5 flex gap-2">
+                        <span class="opacity-50 text-cyan-400">[${ alert.time }]</span>
+                        <span :class="{'text-red-400': alert.level==='error', 'text-yellow-400': alert.level==='warning', 'text-green-400': alert.level==='success'}">
+                            ${ alert.message }
+                        </span>
+                    </div>
+                    <div v-if="alerts.length === 0" class="opacity-50 italic">暂无警报数据...</div>
+                </div>
+            </div>
+
+            <!-- Right: Sidebar Control Panel -->
+            <aside class="w-full md:w-[400px] bg-white shadow-2xl z-20 flex flex-col border-l border-slate-200 h-[60%] md:h-auto">
+                <!-- Tabs -->
+                <div class="flex border-b text-sm font-medium">
+                    <button @click="currentTab = 'control'" :class="{'text-indigo-600 border-b-2 border-indigo-600 bg-indigo-50': currentTab === 'control'}" class="flex-1 py-3 hover:bg-slate-50 transition-colors">
+                        <i class="fas fa-gamepad mr-1"></i> 控制
+                    </button>
+                    <button @click="currentTab = 'fleet'" :class="{'text-indigo-600 border-b-2 border-indigo-600 bg-indigo-50': currentTab === 'fleet'}" class="flex-1 py-3 hover:bg-slate-50 transition-colors">
+                        <i class="fas fa-robot mr-1"></i> 机队
+                    </button>
+                    <button @click="currentTab = 'ai'" :class="{'text-indigo-600 border-b-2 border-indigo-600 bg-indigo-50': currentTab === 'ai'}" class="flex-1 py-3 hover:bg-slate-50 transition-colors">
+                        <i class="fas fa-brain mr-1"></i> AI 助手
+                    </button>
+                </div>
+
+                <!-- Content Area -->
+                <div class="flex-1 overflow-hidden relative bg-slate-50">
+                    
+                    <!-- Tab: Control -->
+                    <div v-if="currentTab === 'control'" class="h-full overflow-y-auto p-4 space-y-4">
+                        <!-- Quick Stats -->
+                        <div class="grid grid-cols-3 gap-3">
+                            <div class="bg-white p-3 rounded-lg shadow-sm border border-slate-100 text-center">
+                                <div class="text-xs text-slate-500">总数</div>
+                                <div class="text-xl font-bold text-slate-700">${ stats.total }</div>
+                            </div>
+                            <div class="bg-white p-3 rounded-lg shadow-sm border border-slate-100 text-center">
+                                <div class="text-xs text-green-600">充电中</div>
+                                <div class="text-xl font-bold text-green-600">${ stats.charging }</div>
+                            </div>
+                            <div class="bg-white p-3 rounded-lg shadow-sm border border-slate-100 text-center">
+                                <div class="text-xs text-red-600">故障</div>
+                                <div class="text-xl font-bold text-red-600">${ stats.error }</div>
+                            </div>
+                        </div>
+
+                        <!-- Manual Task -->
+                        <div class="bg-white p-4 rounded-lg shadow-sm border border-slate-200">
+                            <h3 class="text-sm font-bold mb-3 text-slate-700 flex items-center gap-2">
+                                <i class="fas fa-tasks text-indigo-500"></i> 手动任务
+                            </h3>
+                            <div class="flex gap-2">
+                                <input v-model="newTask" @keyup.enter="assignTask" type="text" placeholder="输入任务指令 (如: 巡逻 A 区)" class="flex-1 border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                                <button @click="assignTask" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm hover:bg-indigo-700 transition-colors">
+                                    <i class="fas fa-paper-plane"></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- File Upload -->
+                        <div class="bg-white p-4 rounded-lg shadow-sm border border-slate-200">
+                            <h3 class="text-sm font-bold mb-3 text-slate-700 flex items-center gap-2">
+                                <i class="fas fa-file-upload text-indigo-500"></i> 任务文件上传
+                            </h3>
+                            <div class="border-2 border-dashed border-slate-300 rounded-lg p-4 text-center hover:bg-slate-50 transition-colors cursor-pointer relative">
+                                <input type="file" @change="handleFileUpload" class="absolute inset-0 opacity-0 cursor-pointer">
+                                <div v-if="!uploading">
+                                    <i class="fas fa-cloud-upload-alt text-2xl text-slate-400 mb-2"></i>
+                                    <p class="text-xs text-slate-500">点击或拖拽上传 JSON/TXT 任务文件</p>
+                                </div>
+                                <div v-else class="text-indigo-600">
+                                    <i class="fas fa-spinner fa-spin"></i> 上传解析中...
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Tab: Fleet -->
+                    <div v-if="currentTab === 'fleet'" class="h-full overflow-y-auto p-4 space-y-2">
+                        <div v-for="bot in robots" :key="bot.id" class="bg-white p-3 rounded-lg shadow-sm border border-slate-200 flex items-center justify-between hover:shadow-md transition-shadow">
+                            <div>
+                                <div class="flex items-center gap-2 mb-1">
+                                    <span class="font-bold text-sm text-slate-700">${ bot.id }</span>
+                                    <span class="text-[10px] px-1.5 py-0.5 rounded-full bg-slate-100 text-slate-500 border">${ bot.type }</span>
+                                </div>
+                                <div class="flex items-center gap-3 text-xs text-slate-500">
+                                    <span :class="{'text-green-500': bot.battery > 20, 'text-red-500': bot.battery <= 20}">
+                                        <i class="fas fa-battery-three-quarters"></i> ${ Math.round(bot.battery) }%
+                                    </span>
+                                    <span class="flex items-center gap-1">
+                                        <div class="w-1.5 h-1.5 rounded-full" :class="getStatusColorBg(bot.status)"></div>
+                                        ${ getStatusText(bot.status) }
+                                    </span>
+                                </div>
+                            </div>
+                            <button v-if="bot.status === 'error'" @click="fixBot(bot.id)" class="bg-red-50 text-red-600 border border-red-200 text-xs px-3 py-1.5 rounded-md hover:bg-red-100 transition-colors">
+                                <i class="fas fa-wrench mr-1"></i> 修复
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Tab: AI Assistant -->
+                    <div v-if="currentTab === 'ai'" class="h-full flex flex-col bg-white">
+                        <div class="flex-1 overflow-y-auto p-4 space-y-3 bg-slate-50" ref="chatContainer">
+                            <div v-for="(msg, i) in chatHistory" :key="i" class="flex" :class="msg.role === 'user' ? 'justify-end' : 'justify-start'">
+                                <div class="chat-msg p-3 rounded-lg text-sm shadow-sm" 
+                                     :class="msg.role === 'user' ? 'bg-indigo-600 text-white rounded-br-none' : 'bg-white border border-slate-200 text-slate-700 rounded-bl-none'">
+                                    <div v-if="msg.role === 'assistant'" class="text-xs text-indigo-500 font-bold mb-1 flex items-center gap-1">
+                                        <i class="fas fa-robot"></i> 指挥官助手
+                                    </div>
+                                    <div class="whitespace-pre-wrap">${ msg.content }</div>
+                                </div>
+                            </div>
+                            <div v-if="isThinking" class="flex justify-start">
+                                <div class="chat-msg p-3 rounded-lg text-sm bg-white border border-slate-200 text-slate-500 rounded-bl-none">
+                                    <i class="fas fa-circle-notch fa-spin mr-1"></i> 思考中...
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-3 border-t bg-white">
+                            <div class="flex gap-2">
+                                <input v-model="chatInput" @keyup.enter="sendChat" type="text" placeholder="询问机队状态或寻求建议..." class="flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-slate-50">
+                                <button @click="sendChat" :disabled="isThinking" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition-colors disabled:opacity-50">
+                                    <i class="fas fa-paper-plane"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </aside>
+        </main>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted, nextTick, watch } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const robots = ref([]);
+                const alerts = ref([]);
+                const stats = ref({ total: 0, active: 0, charging: 0, error: 0 });
+                const newTask = ref('');
+                const currentTab = ref('control');
+                const chatInput = ref('');
+                const chatHistory = ref([
+                    { role: 'assistant', content: '指挥官您好！我是您的智能机队助手。您可以询问我关于机队状态的问题，或者让我协助分析异常。' }
+                ]);
+                const isThinking = ref(false);
+                const uploading = ref(false);
+                const chatContainer = ref(null);
+                
+                let mapChart = null;
+
+                // --- Map Logic ---
+                const initMap = () => {
+                    const el = document.getElementById('fleet-map');
+                    if (!el) return;
+                    mapChart = echarts.init(el);
+                    const option = {
+                        backgroundColor: 'transparent',
+                        tooltip: {
+                            trigger: 'item',
+                            formatter: (params) => {
+                                const bot = params.data.bot;
+                                return `
+                                    <div class="font-bold">${bot.id}</div>
+                                    <div>状态: ${getStatusText(bot.status)}</div>
+                                    <div>电量: ${Math.round(bot.battery)}%</div>
+                                    <div>坐标: (${Math.round(bot.x)}, ${Math.round(bot.y)})</div>
+                                `;
+                            }
+                        },
+                        grid: { top: 20, bottom: 20, left: 20, right: 20 },
+                        xAxis: { min: 0, max: 100, show: false },
+                        yAxis: { min: 0, max: 100, show: false },
+                        series: [{
+                            type: 'scatter',
+                            symbolSize: 30,
+                            data: [],
+                            itemStyle: {
+                                color: (params) => {
+                                    const status = params.data.status;
+                                    if (status === 'error') return '#ef4444';
+                                    if (status === 'charging') return '#22c55e';
+                                    if (status === 'active') return '#4f46e5';
+                                    return '#94a3b8';
+                                },
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(0,0,0,0.2)'
+                            },
+                            label: {
+                                show: true,
+                                formatter: '{b}',
+                                position: 'top',
+                                color: '#333',
+                                fontSize: 11,
+                                fontWeight: 'bold'
+                            }
+                        }]
+                    };
+                    mapChart.setOption(option);
+                    window.addEventListener('resize', () => mapChart.resize());
+                };
+
+                const updateMap = () => {
+                    if (!mapChart) return;
+                    const data = robots.value.map(bot => ({
+                        name: bot.id,
+                        value: [bot.x, bot.y],
+                        status: bot.status,
+                        bot: bot
+                    }));
+                    mapChart.setOption({
+                        series: [{ data }]
+                    });
+                };
+
+                // --- API Logic ---
+                const fetchTelemetry = async () => {
+                    try {
+                        const res = await fetch('/api/telemetry');
+                        const data = await res.json();
+                        robots.value = data.robots;
+                        alerts.value = data.alerts;
+                        stats.value = data.stats;
+                        updateMap();
+                    } catch (e) {
+                        console.error("Telemetry error:", e);
+                    }
+                };
+
+                const assignTask = async () => {
+                    if (!newTask.value) return;
+                    try {
+                        await fetch('/api/command', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ type: 'task', description: newTask.value })
+                        });
+                        newTask.value = '';
+                        fetchTelemetry();
+                    } catch (e) {
+                        alert("任务下发失败: " + e.message);
+                    }
+                };
+
+                const fixBot = async (botId) => {
+                    try {
+                        await fetch('/api/command', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ type: 'fix', bot_id: botId })
+                        });
+                        fetchTelemetry();
+                    } catch (e) {
+                        alert("修复指令失败: " + e.message);
+                    }
+                };
+
+                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();
+                        alert(data.message);
+                    } catch (e) {
+                        alert("上传失败: " + e.message);
+                    } finally {
+                        uploading.value = false;
+                        event.target.value = ''; // Reset input
+                    }
+                };
+
+                const sendChat = async () => {
+                    if (!chatInput.value.trim() || isThinking.value) return;
+                    
+                    const msg = chatInput.value;
+                    chatHistory.value.push({ role: 'user', content: msg });
+                    chatInput.value = '';
+                    isThinking.value = true;
+                    scrollToBottom();
+
+                    try {
+                        const res = await fetch('/api/chat', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ message: msg })
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            chatHistory.value.push({ role: 'assistant', content: data.reply });
+                        } else {
+                            chatHistory.value.push({ role: 'assistant', content: "API 错误: " + data.reply });
+                        }
+                    } catch (e) {
+                        chatHistory.value.push({ role: 'assistant', content: "网络错误，请稍后再试。" });
+                    } finally {
+                        isThinking.value = false;
+                        scrollToBottom();
+                    }
+                };
+
+                const scrollToBottom = () => {
+                    nextTick(() => {
+                        if (chatContainer.value) {
+                            chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
+                        }
+                    });
+                };
+
+                // --- Helpers ---
+                const getStatusText = (status) => {
+                    const map = { 'idle': '待命', 'active': '任务中', 'charging': '充电中', 'error': '故障' };
+                    return map[status] || status;
+                };
+
+                const getStatusColorBg = (status) => {
+                    if (status === 'error') return 'bg-red-500';
+                    if (status === 'charging') return 'bg-green-500';
+                    if (status === 'active') return 'bg-indigo-500';
+                    return 'bg-slate-400';
+                };
+
+                onMounted(() => {
+                    initMap();
+                    fetchTelemetry();
+                    setInterval(fetchTelemetry, 1000); // Poll every second
+                });
+
+                return {
+                    robots, alerts, stats, newTask, currentTab,
+                    chatInput, chatHistory, isThinking, uploading, chatContainer,
+                    assignTask, fixBot, handleFileUpload, sendChat,
+                    getStatusText, getStatusColorBg
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>