Initial commit: Enhanced Orbit Ops Agent with file upload and visualization

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+RUN mkdir -p instance && chmod 777 instance
+
+CMD ["gunicorn", "-b", "0.0.0.0:7866", "app:app"]

README.md

@@ -0,0 +1,48 @@
+---
+title: Orbit Ops Agent
+emoji: 🛰️
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+app_port: 7866
+short_description: 商业航天卫星星座运维与任务规划智能体
+---
+
+# 轨道运维智能体 (Orbit Ops Agent)
+
+## 项目简介
+Orbit Ops Agent 是一个专为商业航天设计的卫星运维与任务规划 SaaS 平台。它集成了实时遥测监控、卫星资产管理、任务规划时间轴以及基于 LLM 的智能任务助手。
+
+## 核心功能
+1. **态势感知仪表盘**：实时监控卫星信号强度、星座能力雷达图及关键指标。
+2. **卫星资产管理**：全生命周期的卫星数据库（发射、在轨、退役）。
+3. **任务规划**：可视化的任务时间轴，支持发射、变轨、维护等任务管理。
+4. **AI 任务助手**：集成 SiliconFlow (Qwen) 大模型，提供专业的轨道力学咨询、异常排查建议和任务规划辅助。
+
+## 技术栈
+- **后端**：Python Flask, SQLite
+- **前端**：Vue 3, Tailwind CSS, ECharts
+- **AI**：SiliconFlow API (Qwen-2.5-7B)
+- **部署**：Docker
+
+## 快速开始
+
+### 本地运行
+```bash
+# 构建镜像
+docker build -t orbit-ops .
+
+# 运行容器
+docker run -p 7865:7865 orbit-ops
+```
+
+或者直接使用 Python 运行：
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+访问 `http://localhost:7866` 即可使用。
+
+## 许可证
+MIT

app.py

@@ -0,0 +1,209 @@
+import os
+import sqlite3
+import json
+import requests
+import random
+import time
+from flask import Flask, render_template, request, jsonify, g
+from flask_cors import CORS
+from werkzeug.utils import secure_filename
+
+app = Flask(__name__)
+CORS(app)
+
+# Configuration
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB
+app.config['UPLOAD_FOLDER'] = os.path.join(app.instance_path, 'uploads')
+SILICONFLOW_API_KEY = "sk-vimuseiptfbomzegyuvmebjzooncsqbyjtlddrfodzcdskgi"
+SILICONFLOW_API_URL = "https://api.siliconflow.cn/v1/chat/completions"
+
+# Ensure upload directory exists
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+# Error Handlers
+@app.errorhandler(413)
+def request_entity_too_large(error):
+    return jsonify({'error': 'File too large. Maximum size is 16MB.'}), 413
+
+@app.errorhandler(404)
+def not_found_error(error):
+    return render_template('index.html'), 200  # SPA fallback or just ignore
+
+@app.errorhandler(500)
+def internal_error(error):
+    return jsonify({'error': 'Internal Server Error'}), 500
+
+# Database Setup
+def get_db():
+    db = getattr(g, '_database', None)
+    if db is None:
+        db_path = os.path.join(app.instance_path, 'orbit_ops.db')
+        if not os.path.exists(app.instance_path):
+            os.makedirs(app.instance_path)
+        db = g._database = sqlite3.connect(db_path)
+        db.row_factory = sqlite3.Row
+    return db
+
+@app.teardown_appcontext
+def close_connection(exception):
+    db = getattr(g, '_database', None)
+    if db is not None:
+        db.close()
+
+def init_db():
+    with app.app_context():
+        db = get_db()
+        # Satellites Table
+        db.execute('''
+            CREATE TABLE IF NOT EXISTS satellites (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                name TEXT NOT NULL,
+                type TEXT NOT NULL,
+                status TEXT NOT NULL,
+                orbit_altitude INTEGER,
+                inclination REAL,
+                launch_date TEXT
+            )
+        ''')
+        # Missions Table
+        db.execute('''
+            CREATE TABLE IF NOT EXISTS missions (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                name TEXT NOT NULL,
+                description TEXT,
+                status TEXT NOT NULL,
+                target_date TEXT
+            )
+        ''')
+        
+        # Seed Data if empty
+        cur = db.execute('SELECT count(*) FROM satellites')
+        if cur.fetchone()[0] == 0:
+            satellites = [
+                ('StarLink-X1', 'Comm', 'Active', 550, 53.0, '2024-01-15'),
+                ('Sentinel-Prime', 'EarthObs', 'Active', 700, 98.2, '2023-11-20'),
+                ('Quantum-Relay', 'Comm', 'Testing', 1200, 45.0, '2025-02-01'),
+                ('Debris-Hunter', 'Cleanup', 'Planned', 800, 85.0, '2026-06-10')
+            ]
+            db.executemany('INSERT INTO satellites (name, type, status, orbit_altitude, inclination, launch_date) VALUES (?, ?, ?, ?, ?, ?)', satellites)
+            
+            missions = [
+                ('Polar Orbit Insertion', 'Deploy Sentinel-Prime to polar orbit for ice monitoring.', 'Completed', '2023-11-20'),
+                ('Constellation Expansion', 'Launch batch of 60 StarLink-X satellites.', 'Pending', '2026-03-15'),
+                ('Debris Removal Demo', 'Test capture mechanism on defunct satellite.', 'Planning', '2026-08-01')
+            ]
+            db.executemany('INSERT INTO missions (name, description, status, target_date) VALUES (?, ?, ?, ?)', missions)
+            
+        db.commit()
+
+# Routes
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/satellites', methods=['GET', 'POST'])
+def handle_satellites():
+    db = get_db()
+    if request.method == 'POST':
+        data = request.json
+        db.execute('INSERT INTO satellites (name, type, status, orbit_altitude, inclination, launch_date) VALUES (?, ?, ?, ?, ?, ?)',
+                   (data['name'], data['type'], data['status'], data['orbit_altitude'], data['inclination'], data['launch_date']))
+        db.commit()
+        return jsonify({'status': 'success'})
+    else:
+        cur = db.execute('SELECT * FROM satellites')
+        return jsonify([dict(row) for row in cur.fetchall()])
+
+@app.route('/api/missions', methods=['GET', 'POST'])
+def handle_missions():
+    db = get_db()
+    if request.method == 'POST':
+        data = request.json
+        db.execute('INSERT INTO missions (name, description, status, target_date) VALUES (?, ?, ?, ?)',
+                   (data['name'], data['description'], data['status'], data['target_date']))
+        db.commit()
+        return jsonify({'status': 'success'})
+    else:
+        cur = db.execute('SELECT * FROM missions')
+        return jsonify([dict(row) for row in cur.fetchall()])
+
+@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)
+        
+        # If it's a JSON file, try to import satellites or missions
+        if filename.endswith('.json'):
+            try:
+                with open(filepath, 'r', encoding='utf-8') as f:
+                    data = json.load(f)
+                    db = get_db()
+                    
+                    if 'satellites' in data:
+                        for sat in data['satellites']:
+                            db.execute('INSERT INTO satellites (name, type, status, orbit_altitude, inclination, launch_date) VALUES (?, ?, ?, ?, ?, ?)',
+                                    (sat.get('name'), sat.get('type'), sat.get('status'), sat.get('orbit_altitude'), sat.get('inclination'), sat.get('launch_date')))
+                    
+                    if 'missions' in data:
+                        for mission in data['missions']:
+                            db.execute('INSERT INTO missions (name, description, status, target_date) VALUES (?, ?, ?, ?)',
+                                    (mission.get('name'), mission.get('description'), mission.get('status'), mission.get('target_date')))
+                    
+                    db.commit()
+                    return jsonify({'status': 'success', 'message': 'File uploaded and data imported successfully'})
+            except Exception as e:
+                return jsonify({'status': 'warning', 'message': f'File uploaded but import failed: {str(e)}'})
+                
+        return jsonify({'status': 'success', 'message': 'File uploaded successfully'})
+
+@app.route('/api/telemetry')
+def get_telemetry():
+    # Mock real-time telemetry
+    return jsonify({
+        'timestamp': time.time(),
+        'signal_strength': random.uniform(80, 100),
+        'battery_level': random.uniform(90, 100),
+        'cpu_load': random.uniform(10, 40),
+        'temperature': random.uniform(20, 35)
+    })
+
+@app.route('/api/chat', methods=['POST'])
+def chat():
+    data = request.json
+    user_message = data.get('message', '')
+    
+    headers = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+    
+    payload = {
+        "model": "Qwen/Qwen2.5-7B-Instruct",
+        "messages": [
+            {"role": "system", "content": "你是 Orbit Ops 的 AI 任务规划助手。你是一个专业的航天工程师，负责协助用户进行卫星星座管理、轨道计算、发射任务规划和故障排查。请用中文回答，回答要专业、严谨，并在适当时提供 Markdown 格式的表格或列表。如果涉及数据分析，可以建议用户查看仪表盘。"},
+            {"role": "user", "content": user_message}
+        ],
+        "stream": False
+    }
+    
+    try:
+        response = requests.post(SILICONFLOW_API_URL, json=payload, headers=headers, timeout=30)
+        response.raise_for_status()
+        result = response.json()
+        content = result['choices'][0]['message']['content']
+        return jsonify({'response': content})
+    except Exception as e:
+        print(f"API Error: {e}")
+        # Mock Fallback
+        return jsonify({'response': f"AI 服务连接失败 (Mock Mode): 我收到了你的请求 '{user_message}'。作为一个模拟的 AI 助手，我建议你检查卫星 #003 的遥测数据，似乎有异常波动。请在仪表盘中查看详细信息。"})
+
+if __name__ == '__main__':
+    init_db()
+    app.run(host='0.0.0.0', port=7866, debug=True)

requirements.txt

@@ -0,0 +1,4 @@
+Flask==3.0.0
+flask-cors==4.0.0
+requests==2.31.0
+gunicorn==21.2.0

templates/index.html

@@ -0,0 +1,487 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Orbit Ops Agent - 商业航天运维平台</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <style>
+        [v-cloak] { display: none; }
+        .markdown-body { font-size: 0.95rem; line-height: 1.6; }
+        .markdown-body pre { background: #f3f4f6; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }
+        .markdown-body code { background: #f3f4f6; padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: monospace; }
+        .markdown-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
+        .markdown-body th, .markdown-body td { border: 1px solid #e5e7eb; padding: 0.5rem; }
+        .markdown-body th { background: #f9fafb; }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-900 h-screen flex overflow-hidden">
+    <div id="app" v-cloak class="flex w-full h-full">
+        <!-- Sidebar -->
+        <div class="w-64 bg-slate-900 text-white flex flex-col shrink-0 transition-all duration-300" :class="{'w-20': collapsed}">
+            <div class="p-4 flex items-center justify-between border-b border-slate-700">
+                <div class="flex items-center gap-3" v-if="!collapsed">
+                    <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center font-bold">O</div>
+                    <span class="font-bold text-lg tracking-wide">Orbit Ops</span>
+                </div>
+                <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center font-bold" v-else>O</div>
+                <button @click="collapsed = !collapsed" class="text-slate-400 hover:text-white">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                    </svg>
+                </button>
+            </div>
+            
+            <nav class="flex-1 p-4 space-y-2">
+                <button @click="currentView = 'dashboard'" :class="{'bg-blue-600 text-white': currentView === 'dashboard', 'text-slate-400 hover:bg-slate-800': currentView !== 'dashboard'}" class="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M8.159 13.39s.009-.089.009-.089a.75.75 0 00-.717.052l-2.613 1.488a.75.75 0 00-.007 1.298l2.613 1.487a.75.75 0 00.724.048s-.008-.09-.008-.09a2.25 2.25 0 01-2.072-3.093zM15 13.5h2.25a2.25 2.25 0 012.25 2.25v2.25a2.25 2.25 0 01-2.25 2.25H15a2.25 2.25 0 01-2.25-2.25V15.75A2.25 2.25 0 0115 13.5zM15 3v2.25a2.25 2.25 0 01-2.25 2.25H10.5a2.25 2.25 0 01-2.25-2.25V3" /></svg>
+                    <span v-if="!collapsed">态势感知</span>
+                </button>
+                <button @click="currentView = 'satellites'" :class="{'bg-blue-600 text-white': currentView === 'satellites', 'text-slate-400 hover:bg-slate-800': currentView !== 'satellites'}" class="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z" /></svg>
+                    <span v-if="!collapsed">卫星资产</span>
+                </button>
+                <button @click="currentView = 'missions'" :class="{'bg-blue-600 text-white': currentView === 'missions', 'text-slate-400 hover:bg-slate-800': currentView !== 'missions'}" class="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0h18M5 10.5h.008v.008H5V10.5zm0 3h.008v.008H5V13.5zm0 3h.008v.008H5V16.5zm3-6h.008v.008H8V10.5zm0 3h.008v.008H8V13.5zm0 3h.008v.008H8V16.5zm3-6h.008v.008H11V10.5zm0 3h.008v.008H11V13.5zm0 3h.008v.008H11V16.5zm3-6h.008v.008H14V10.5zm0 3h.008v.008H14V13.5zm0 3h.008v.008H14V16.5zm3-6h.008v.008H17V10.5zm0 3h.008v.008H17V13.5zm0 3h.008v.008H17V16.5z" /></svg>
+                    <span v-if="!collapsed">任务规划</span>
+                </button>
+                <button @click="currentView = 'chat'" :class="{'bg-blue-600 text-white': currentView === 'chat', 'text-slate-400 hover:bg-slate-800': currentView !== 'chat'}" class="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" /></svg>
+                    <span v-if="!collapsed">AI 助手</span>
+                </button>
+            </nav>
+        </div>
+
+        <!-- Main Content -->
+        <main class="flex-1 overflow-auto bg-slate-50 relative">
+            <!-- Dashboard View -->
+            <div v-if="currentView === 'dashboard'" class="p-6 space-y-6">
+                <header class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold text-slate-800">态势感知仪表盘</h2>
+                    <div class="flex items-center gap-2 text-sm text-slate-500">
+                        <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+                        实时数据连接正常
+                    </div>
+                </header>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <div class="bg-white p-4 rounded-xl shadow-sm border border-slate-200">
+                        <div class="text-slate-500 text-sm mb-1">在轨卫星</div>
+                        <div class="text-2xl font-bold text-slate-800">${ satellites.length }</div>
+                    </div>
+                    <div class="bg-white p-4 rounded-xl shadow-sm border border-slate-200">
+                        <div class="text-slate-500 text-sm mb-1">活跃任务</div>
+                        <div class="text-2xl font-bold text-blue-600">${ activeMissionsCount }</div>
+                    </div>
+                    <div class="bg-white p-4 rounded-xl shadow-sm border border-slate-200">
+                        <div class="text-slate-500 text-sm mb-1">平均信号强度</div>
+                        <div class="text-2xl font-bold text-green-600">${ telemetry.signal_strength.toFixed(1) }%</div>
+                    </div>
+                    <div class="bg-white p-4 rounded-xl shadow-sm border border-slate-200">
+                        <div class="text-slate-500 text-sm mb-1">碰撞风险</div>
+                        <div class="text-2xl font-bold text-red-500">低</div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 h-80">
+                    <div class="bg-white p-4 rounded-xl shadow-sm border border-slate-200 flex flex-col">
+                        <h3 class="font-semibold text-slate-700 mb-4">遥测信号趋势</h3>
+                        <div id="telemetryChart" class="flex-1 w-full h-full"></div>
+                    </div>
+                    <div class="bg-white p-4 rounded-xl shadow-sm border border-slate-200 flex flex-col">
+                        <h3 class="font-semibold text-slate-700 mb-4">星座能力雷达</h3>
+                        <div id="radarChart" class="flex-1 w-full h-full"></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Satellites View -->
+            <div v-if="currentView === 'satellites'" class="p-6 space-y-6">
+                <header class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold text-slate-800">卫星资产管理</h2>
+                    <div class="flex gap-2">
+                        <button @click="triggerUpload" class="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" /></svg>
+                            ���入数据
+                        </button>
+                        <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden" accept=".json">
+                        <button @click="showAddSatellite = true" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
+                            添加卫星
+                        </button>
+                    </div>
+                </header>
+                
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+                    <table class="w-full text-left text-sm text-slate-600">
+                        <thead class="bg-slate-50 text-slate-800 border-b border-slate-200">
+                            <tr>
+                                <th class="px-6 py-4 font-semibold">名称</th>
+                                <th class="px-6 py-4 font-semibold">类型</th>
+                                <th class="px-6 py-4 font-semibold">状态</th>
+                                <th class="px-6 py-4 font-semibold">轨道高度 (km)</th>
+                                <th class="px-6 py-4 font-semibold">倾角 (deg)</th>
+                                <th class="px-6 py-4 font-semibold">发射日期</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-slate-100">
+                            <tr v-for="sat in satellites" :key="sat.id" class="hover:bg-slate-50 transition-colors">
+                                <td class="px-6 py-4 font-medium text-slate-900">${ sat.name }</td>
+                                <td class="px-6 py-4">
+                                    <span class="px-2 py-1 bg-slate-100 rounded text-xs">${ sat.type }</span>
+                                </td>
+                                <td class="px-6 py-4">
+                                    <span :class="{'bg-green-100 text-green-700': sat.status === 'Active', 'bg-yellow-100 text-yellow-700': sat.status === 'Testing', 'bg-slate-100 text-slate-700': sat.status === 'Planned'}" class="px-2 py-1 rounded-full text-xs font-medium">
+                                        ${ sat.status }
+                                    </span>
+                                </td>
+                                <td class="px-6 py-4">${ sat.orbit_altitude }</td>
+                                <td class="px-6 py-4">${ sat.inclination }°</td>
+                                <td class="px-6 py-4 text-slate-500">${ sat.launch_date }</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <!-- Missions View -->
+            <div v-if="currentView === 'missions'" class="p-6 space-y-6">
+                <header class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold text-slate-800">任务规划时间轴</h2>
+                    <button @click="showAddMission = true" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
+                        新建任务
+                    </button>
+                </header>
+
+                <div class="space-y-4">
+                    <div v-for="mission in missions" :key="mission.id" class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 flex gap-6 items-start">
+                        <div class="flex flex-col items-center gap-1 min-w-[100px]">
+                            <span class="text-sm font-bold text-slate-400">${ mission.target_date }</span>
+                            <div class="w-px h-full bg-slate-200 my-2"></div>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex justify-between items-start mb-2">
+                                <h3 class="text-lg font-bold text-slate-800">${ mission.name }</h3>
+                                <span :class="{'bg-blue-100 text-blue-700': mission.status === 'Pending', 'bg-green-100 text-green-700': mission.status === 'Completed', 'bg-purple-100 text-purple-700': mission.status === 'Planning'}" class="px-2 py-1 rounded text-xs font-medium">
+                                    ${ mission.status }
+                                </span>
+                            </div>
+                            <p class="text-slate-600 text-sm">${ mission.description }</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Chat View -->
+            <div v-if="currentView === 'chat'" class="flex flex-col h-full">
+                <div class="flex-1 overflow-y-auto p-6 space-y-4" ref="chatContainer">
+                    <div v-for="(msg, index) in chatHistory" :key="index" :class="{'flex justify-end': msg.role === 'user', 'flex justify-start': msg.role === 'ai'}">
+                        <div :class="{'bg-blue-600 text-white': msg.role === 'user', 'bg-white border border-slate-200 text-slate-800': msg.role === 'ai'}" class="max-w-[80%] rounded-2xl px-4 py-3 shadow-sm">
+                            <div v-if="msg.role === 'ai'" class="markdown-body" v-html="renderMarkdown(msg.content)"></div>
+                            <div v-else>${ msg.content }</div>
+                        </div>
+                    </div>
+                    <div v-if="isThinking" class="flex justify-start">
+                        <div class="bg-white border border-slate-200 text-slate-500 rounded-2xl px-4 py-3 shadow-sm flex items-center gap-2">
+                            <div class="w-2 h-2 bg-slate-400 rounded-full animate-bounce"></div>
+                            <div class="w-2 h-2 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
+                            <div class="w-2 h-2 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-4 bg-white border-t border-slate-200">
+                    <div class="flex gap-2 max-w-4xl mx-auto">
+                        <input v-model="userQuery" @keyup.enter="sendMessage" type="text" placeholder="输入任务指令，例如：'帮我规划 StarLink-X1 的变轨策略'..." class="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <button @click="sendMessage" :disabled="isThinking || !userQuery.trim()" class="bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white px-6 py-2 rounded-lg font-medium transition-colors">
+                            发送
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Modals -->
+            <div v-if="showAddSatellite" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+                <div class="bg-white rounded-xl shadow-xl w-96 p-6">
+                    <h3 class="text-xl font-bold mb-4">添加新卫星</h3>
+                    <div class="space-y-3">
+                        <input v-model="newSat.name" placeholder="卫星名称" class="w-full border rounded p-2">
+                        <select v-model="newSat.type" class="w-full border rounded p-2">
+                            <option value="Comm">通信 (Comm)</option>
+                            <option value="EarthObs">遥感 (EarthObs)</option>
+                            <option value="Nav">导航 (Nav)</option>
+                        </select>
+                        <select v-model="newSat.status" class="w-full border rounded p-2">
+                            <option value="Active">Active</option>
+                            <option value="Testing">Testing</option>
+                            <option value="Planned">Planned</option>
+                        </select>
+                        <input v-model.number="newSat.orbit_altitude" placeholder="轨道高度 (km)" type="number" class="w-full border rounded p-2">
+                        <input v-model.number="newSat.inclination" placeholder="倾角 (deg)" type="number" class="w-full border rounded p-2">
+                        <input v-model="newSat.launch_date" type="date" class="w-full border rounded p-2">
+                    </div>
+                    <div class="flex justify-end gap-2 mt-6">
+                        <button @click="showAddSatellite = false" class="text-slate-500 hover:text-slate-700">取消</button>
+                        <button @click="addSatellite" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">确认添加</button>
+                    </div>
+                </div>
+            </div>
+            
+             <div v-if="showAddMission" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+                <div class="bg-white rounded-xl shadow-xl w-96 p-6">
+                    <h3 class="text-xl font-bold mb-4">添加新任务</h3>
+                    <div class="space-y-3">
+                        <input v-model="newMission.name" placeholder="任务名称" class="w-full border rounded p-2">
+                        <textarea v-model="newMission.description" placeholder="任务描述" class="w-full border rounded p-2 h-24"></textarea>
+                        <select v-model="newMission.status" class="w-full border rounded p-2">
+                            <option value="Planning">Planning</option>
+                            <option value="Pending">Pending</option>
+                            <option value="Completed">Completed</option>
+                        </select>
+                        <input v-model="newMission.target_date" type="date" class="w-full border rounded p-2">
+                    </div>
+                    <div class="flex justify-end gap-2 mt-6">
+                        <button @click="showAddMission = false" class="text-slate-500 hover:text-slate-700">取消</button>
+                        <button @click="addMission" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">确认添加</button>
+                    </div>
+                </div>
+            </div>
+
+        </main>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted, computed, nextTick, watch } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const collapsed = ref(false);
+                const currentView = ref('dashboard');
+                const satellites = ref([]);
+                const missions = ref([]);
+                const telemetry = ref({ signal_strength: 0, battery_level: 0, cpu_load: 0, temperature: 0 });
+                const showAddSatellite = ref(false);
+                const showAddMission = ref(false);
+                
+                const newSat = ref({ name: '', type: 'Comm', status: 'Planned', orbit_altitude: 500, inclination: 0, launch_date: '' });
+                const newMission = ref({ name: '', description: '', status: 'Planning', target_date: '' });
+                const fileInput = ref(null);
+                
+                const chatHistory = ref([
+                    { role: 'ai', content: '你好！我是 Orbit Ops 任务规划助手。我可以帮你计算轨道参数、规划发射窗口或分析遥测数据。' }
+                ]);
+                const userQuery = ref('');
+                const isThinking = ref(false);
+                const chatContainer = ref(null);
+
+                const activeMissionsCount = computed(() => missions.value.filter(m => m.status === 'Pending' || m.status === 'Planning').length);
+
+                // Fetch Data
+                const fetchSatellites = async () => {
+                    try {
+                        const res = await fetch('/api/satellites');
+                        satellites.value = await res.json();
+                    } catch (e) { console.error(e); }
+                };
+                
+                const fetchMissions = async () => {
+                    try {
+                        const res = await fetch('/api/missions');
+                        missions.value = await res.json();
+                    } catch (e) { console.error(e); }
+                };
+
+                const fetchTelemetry = async () => {
+                    try {
+                        const res = await fetch('/api/telemetry');
+                        const data = await res.json();
+                        telemetry.value = data;
+                        updateCharts(data);
+                    } catch (e) { console.error(e); }
+                };
+
+                // Charts
+                let telemetryChart = null;
+                let radarChart = null;
+                const telemetryHistory = [];
+
+                const initCharts = () => {
+                    const tChartDom = document.getElementById('telemetryChart');
+                    const rChartDom = document.getElementById('radarChart');
+                    
+                    if (tChartDom) {
+                        if (telemetryChart) telemetryChart.dispose();
+                        telemetryChart = echarts.init(tChartDom);
+                        telemetryChart.setOption({
+                            tooltip: { trigger: 'axis' },
+                            grid: { top: 20, right: 20, bottom: 20, left: 40, containLabel: true },
+                            xAxis: { type: 'category', data: [] },
+                            yAxis: { type: 'value', min: 60, max: 100 },
+                            series: [{ data: [], type: 'line', smooth: true, areaStyle: { opacity: 0.1 }, itemStyle: { color: '#3b82f6' } }]
+                        });
+                    }
+
+                    if (rChartDom) {
+                        if (radarChart) radarChart.dispose();
+                        radarChart = echarts.init(rChartDom);
+                        radarChart.setOption({
+                            radar: {
+                                indicator: [
+                                    { name: '通信覆盖', max: 100 },
+                                    { name: '观测精度', max: 100 },
+                                    { name: '响应速度', max: 100 },
+                                    { name: '能源效率', max: 100 },
+                                    { name: '安全性', max: 100 }
+                                ]
+                            },
+                            series: [{
+                                type: 'radar',
+                                data: [
+                                    { value: [85, 90, 75, 95, 80], name: '当���状态', areaStyle: { opacity: 0.2 }, itemStyle: { color: '#10b981' } }
+                                ]
+                            }]
+                        });
+                    }
+                };
+
+                const updateCharts = (data) => {
+                    if (!telemetryChart) return;
+                    
+                    const now = new Date().toLocaleTimeString();
+                    telemetryHistory.push({ time: now, value: data.signal_strength });
+                    if (telemetryHistory.length > 20) telemetryHistory.shift();
+
+                    telemetryChart.setOption({
+                        xAxis: { data: telemetryHistory.map(i => i.time) },
+                        series: [{ data: telemetryHistory.map(i => i.value) }]
+                    });
+                };
+
+                // Actions
+                const addSatellite = async () => {
+                    await fetch('/api/satellites', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(newSat.value)
+                    });
+                    showAddSatellite.value = false;
+                    fetchSatellites();
+                    newSat.value = { name: '', type: 'Comm', status: 'Planned', orbit_altitude: 500, inclination: 0, launch_date: '' };
+                };
+
+                const addMission = async () => {
+                    await fetch('/api/missions', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(newMission.value)
+                    });
+                    showAddMission.value = false;
+                    fetchMissions();
+                    newMission.value = { name: '', description: '', status: 'Planning', target_date: '' };
+                };
+
+                const sendMessage = async () => {
+                    if (!userQuery.value.trim()) return;
+                    const msg = userQuery.value;
+                    userQuery.value = '';
+                    chatHistory.value.push({ role: 'user', content: msg });
+                    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();
+                        chatHistory.value.push({ role: 'ai', content: data.response });
+                    } catch (e) {
+                        chatHistory.value.push({ role: 'ai', content: '连接中断，请稍后再试。' });
+                    } finally {
+                        isThinking.value = false;
+                        scrollToBottom();
+                    }
+                };
+                
+                const triggerUpload = () => {
+                    if (fileInput.value) fileInput.value.click();
+                };
+
+                const handleFileUpload = async (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    try {
+                        const res = await fetch('/api/upload', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        const result = await res.json();
+                        if (result.status === 'success') {
+                            alert('上传成功！' + (result.message || ''));
+                            fetchSatellites();
+                            fetchMissions();
+                        } else {
+                            alert('上传失败：' + result.message);
+                        }
+                    } catch (e) {
+                        alert('上传出错：' + e.message);
+                    }
+                    // Reset input
+                    event.target.value = '';
+                };
+
+                const scrollToBottom = () => {
+                    nextTick(() => {
+                        if (chatContainer.value) chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
+                    });
+                };
+
+                const renderMarkdown = (text) => {
+                    return marked.parse(text);
+                };
+                
+                watch(currentView, (newVal) => {
+                    if (newVal === 'dashboard') {
+                        nextTick(() => {
+                            initCharts();
+                        });
+                    }
+                });
+
+                onMounted(() => {
+                    fetchSatellites();
+                    fetchMissions();
+                    setInterval(fetchTelemetry, 2000);
+                    
+                    if (currentView.value === 'dashboard') {
+                        setTimeout(initCharts, 500);
+                    }
+                    
+                    window.addEventListener('resize', () => {
+                        if (telemetryChart) telemetryChart.resize();
+                        if (radarChart) radarChart.resize();
+                    });
+                });
+
+                return {
+                    collapsed, currentView, satellites, missions, telemetry,
+                    showAddSatellite, showAddMission, newSat, newMission,
+                    chatHistory, userQuery, isThinking, chatContainer,
+                    activeMissionsCount, fileInput,
+                    addSatellite, addMission, sendMessage, renderMarkdown,
+                    triggerUpload, handleFileUpload
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>