Initial commit: Enhanced Queue Strategy Lab with Import/Export and Error Handling

.gitignore

@@ -0,0 +1,6 @@
+__pycache__/
+*.pyc
+.DS_Store
+venv/
+.env
+.git

Dockerfile

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

README.md

@@ -0,0 +1,40 @@
+---
+title: 智能排队策略实验室 (Queue Strategy Lab)
+emoji: 🚦
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+pinned: false
+short_description: 基于SimPy的离散事件仿真工具，优化服务窗口配置与成本分析。
+---
+
+# 智能排队策略实验室 (Queue Strategy Lab)
+
+这是一个专业的离散事件仿真（Discrete Event Simulation, DES）工具，旨在帮助服务型企业（如银行、医院、客服中心、零售店）优化服务窗口配置，平衡客户等待时间和运营成本。
+
+## 核心功能
+
+1.  **多场景仿真引擎**：基于 `SimPy` 强大的离散事件仿真能力，精确模拟排队过程（M/M/c 模型及其变体）。
+2.  **成本优化分析**：输入“客户等待时间成本”和“服务员时薪”，自动计算最优服务窗口数量，绘制成本曲线。
+3.  **实时动态可视化**：通过 Vue 3 + Canvas 实时展示排队动画，直观感受拥堵情况。
+4.  **数据洞察仪表盘**：提供平均等待时间、服务员利用率、队列长度分布等关键指标。
+5.  **资产管理**：支持保存和加载不同的仿真场景配置（如“早高峰”、“周末促销”）。
+
+## 技术栈
+
+-   **Backend**: Python 3.11, Flask, SimPy (Simulation), NumPy (Stats)
+-   **Frontend**: Vue 3, Tailwind CSS, ECharts, Canvas
+-   **Deployment**: Docker
+
+## 使用说明
+
+1.  在左侧面板设置仿真参数（到达率、服务时间、成本参数等）。
+2.  点击“开始仿真”查看动画和实时数据。
+3.  点击“运行优化分析”获取基于成本的最佳配置建议。
+
+## 商业应用场景
+
+-   **零售门店**：决定收银台开放数量。
+-   **银行网点**：优化柜员排班。
+-   **呼叫中心**：预测坐席需求与SLA达标率。
+-   **主题公园**：设施吞吐量评估。

app.py

@@ -0,0 +1,163 @@
+import os
+import random
+import simpy
+import numpy as np
+from flask import Flask, render_template, jsonify, request, send_from_directory
+
+app = Flask(__name__, template_folder='templates')
+
+# Configuration
+MAX_SIM_TIME = 480  # 8 hours in minutes for analysis
+SEED = 42
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.errorhandler(404)
+def page_not_found(e):
+    return render_template('index.html'), 404
+
+@app.errorhandler(500)
+def internal_server_error(e):
+    return jsonify(error="Internal Server Error", message=str(e)), 500
+
+@app.route('/api/upload_config', methods=['POST'])
+def upload_config():
+    try:
+        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:
+            import json
+            content = json.load(file)
+            return jsonify({'message': 'Config uploaded successfully', 'config': content})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+class CallCenter:
+    def __init__(self, env, num_employees, service_time_avg, service_time_std):
+        self.env = env
+        self.staff = simpy.Resource(env, num_employees)
+        self.service_time_avg = service_time_avg
+        self.service_time_std = service_time_std
+        self.wait_times = []
+        self.service_times = []
+        self.utilization_log = []
+        self.events_trace = [] # For visualization: {'time': t, 'type': '...', 'id': ...}
+
+    def support(self, customer):
+        arrival_time = self.env.now
+        self.events_trace.append({'time': arrival_time, 'type': 'arrival', 'id': customer})
+        
+        with self.staff.request() as request:
+            yield request
+            
+            wait = self.env.now - arrival_time
+            self.wait_times.append(wait)
+            self.events_trace.append({'time': self.env.now, 'type': 'start', 'id': customer, 'wait': wait})
+            
+            # Service time (Normal distribution, clipped at 0.5 min)
+            service_duration = max(0.5, random.gauss(self.service_time_avg, self.service_time_std))
+            yield self.env.timeout(service_duration)
+            
+            self.service_times.append(service_duration)
+            self.events_trace.append({'time': self.env.now, 'type': 'finish', 'id': customer})
+
+def customer_generator(env, center, arrival_rate):
+    """
+    arrival_rate: Customers per hour
+    """
+    i = 0
+    while True:
+        # Inter-arrival time (Exponential distribution)
+        yield env.timeout(random.expovariate(arrival_rate / 60.0))
+        i += 1
+        env.process(center.support(f'C{i}'))
+
+@app.route('/api/simulate', methods=['POST'])
+def simulate():
+    data = request.json
+    
+    # Parameters
+    arrival_rate = float(data.get('arrival_rate', 60)) # Cust/hr
+    service_time = float(data.get('service_time', 5))  # Avg min
+    service_std = float(data.get('service_std', 1))    # Std Dev min
+    num_servers = int(data.get('num_servers', 3))
+    duration = float(data.get('duration', 60))         # Minutes to simulate
+    
+    random.seed(SEED)
+    env = simpy.Environment()
+    center = CallCenter(env, num_servers, service_time, service_std)
+    env.process(customer_generator(env, center, arrival_rate))
+    env.run(until=duration)
+    
+    # Calculate stats
+    avg_wait = np.mean(center.wait_times) if center.wait_times else 0
+    max_wait = np.max(center.wait_times) if center.wait_times else 0
+    served_count = len(center.service_times)
+    
+    # Utilization estimate (Total Service Time / (Num Servers * Duration))
+    total_service = sum(center.service_times)
+    utilization = (total_service / (num_servers * duration)) * 100 if num_servers > 0 else 0
+    
+    return jsonify({
+        'metrics': {
+            'avg_wait': round(avg_wait, 2),
+            'max_wait': round(max_wait, 2),
+            'served': served_count,
+            'utilization': round(utilization, 2)
+        },
+        'trace': center.events_trace
+    })
+
+@app.route('/api/optimize', methods=['POST'])
+def optimize():
+    data = request.json
+    
+    arrival_rate = float(data.get('arrival_rate', 60))
+    service_time = float(data.get('service_time', 5))
+    service_std = float(data.get('service_std', 1))
+    
+    cost_per_server_hr = float(data.get('cost_server', 20)) # $20/hr
+    cost_per_wait_hr = float(data.get('cost_wait', 50))     # $50/hr (Value of customer time/frustration)
+    
+    results = []
+    
+    # Test 1 to 15 servers
+    for n in range(1, 16):
+        random.seed(SEED) # Reset seed for fair comparison
+        env = simpy.Environment()
+        center = CallCenter(env, n, service_time, service_std)
+        env.process(customer_generator(env, center, arrival_rate))
+        env.run(until=480) # 8 hours
+        
+        avg_wait_min = np.mean(center.wait_times) if center.wait_times else 0
+        total_wait_hours = sum(center.wait_times) / 60.0
+        
+        # Total Cost = (Server Cost * 8h) + (Total Wait Hours * Wait Cost)
+        server_cost = n * cost_per_server_hr * 8
+        wait_cost = total_wait_hours * cost_per_wait_hr
+        total_cost = server_cost + wait_cost
+        
+        utilization = (sum(center.service_times) / (n * 480)) * 100
+        
+        results.append({
+            'servers': n,
+            'total_cost': round(total_cost, 2),
+            'server_cost': round(server_cost, 2),
+            'wait_cost': round(wait_cost, 2),
+            'avg_wait': round(avg_wait_min, 2),
+            'utilization': round(utilization, 1)
+        })
+        
+        # Optimization: if cost starts increasing significantly and wait is low, we can stop, 
+        # but let's run all 15 for the chart.
+        
+    return jsonify({'results': results})
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

@@ -0,0 +1,4 @@
+flask
+simpy
+numpy
+gunicorn

templates/index.html

@@ -0,0 +1,661 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>智能排队策略实验室 | Queue Strategy Lab</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>
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Glassmorphism */
+        .glass {
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        body {
+            background-color: #0f172a; /* Slate 900 */
+            color: #e2e8f0;
+        }
+        .input-group label {
+            display: block;
+            font-size: 0.875rem;
+            color: #94a3b8;
+            margin-bottom: 0.25rem;
+        }
+        .input-group input {
+            width: 100%;
+            background: #1e293b;
+            border: 1px solid #334155;
+            color: white;
+            padding: 0.5rem;
+            border-radius: 0.375rem;
+        }
+        .btn-primary {
+            background: #4f46e5;
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 0.375rem;
+            font-weight: 600;
+            transition: all 0.2s;
+        }
+        .btn-primary:hover {
+            background: #4338ca;
+        }
+        .btn-secondary {
+            background: #334155;
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 0.375rem;
+            font-weight: 600;
+        }
+        .btn-secondary:hover {
+            background: #475569;
+        }
+        canvas {
+            width: 100%;
+            height: 300px;
+            background: #1e293b;
+            border-radius: 0.5rem;
+        }
+    </style>
+</head>
+<body>
+    <div id="app" class="min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="glass p-4 border-b border-gray-700 flex justify-between items-center z-10">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center text-xl">🚦</div>
+                <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-cyan-400">
+                    智能排队策略实验室
+                </h1>
+            </div>
+            <div class="flex gap-2">
+                <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden" accept=".json">
+                <button @click="triggerUpload" class="btn-secondary text-sm" title="导入配置">
+                    <i class="fas fa-file-upload mr-1"></i> 导入
+                </button>
+                <button @click="exportConfig" class="btn-secondary text-sm" title="导出配置">
+                    <i class="fas fa-file-download mr-1"></i> 导出
+                </button>
+                <button @click="showSaveModal = true" class="btn-secondary text-sm">
+                    <i class="fas fa-save mr-1"></i> 保存
+                </button>
+                <button @click="showLoadModal = true" class="btn-secondary text-sm">
+                    <i class="fas fa-folder-open mr-1"></i> 加载
+                </button>
+            </div>
+        </header>
+
+        <main class="flex-1 flex overflow-hidden">
+            <!-- Sidebar Controls -->
+            <aside class="w-80 glass border-r border-gray-700 flex flex-col overflow-y-auto p-4 gap-6">
+                
+                <!-- Section: Simulation Params -->
+                <div>
+                    <h3 class="text-lg font-semibold text-indigo-400 mb-3"><i class="fas fa-sliders-h mr-2"></i>仿真参数</h3>
+                    <div class="space-y-3">
+                        <div class="input-group">
+                            <label>客户到达率 (人/小时)</label>
+                            <input type="number" v-model.number="params.arrival_rate" min="1" max="1000">
+                        </div>
+                        <div class="input-group">
+                            <label>平均服务时间 (分钟)</label>
+                            <input type="number" v-model.number="params.service_time" min="0.1" step="0.1">
+                        </div>
+                        <div class="input-group">
+                            <label>服务时间波动 (标准差)</label>
+                            <input type="number" v-model.number="params.service_std" min="0" step="0.1">
+                        </div>
+                        <div class="input-group">
+                            <label>服务窗口数量</label>
+                            <input type="number" v-model.number="params.num_servers" min="1" max="50">
+                        </div>
+                        <div class="input-group">
+                            <label>仿真时长 (分钟)</label>
+                            <input type="number" v-model.number="params.duration" min="10" max="1440">
+                        </div>
+                    </div>
+                    <button @click="runSimulation" class="btn-primary w-full mt-4">
+                        <i class="fas fa-play mr-2"></i> 开始仿真演示
+                    </button>
+                </div>
+
+                <!-- Section: Cost Params -->
+                <div class="border-t border-gray-700 pt-4">
+                    <h3 class="text-lg font-semibold text-green-400 mb-3"><i class="fas fa-chart-line mr-2"></i>成本优化</h3>
+                    <div class="space-y-3">
+                        <div class="input-group">
+                            <label>服务员时薪 ($/小时)</label>
+                            <input type="number" v-model.number="params.cost_server" min="1">
+                        </div>
+                        <div class="input-group">
+                            <label>客户等待成本 ($/小时)</label>
+                            <input type="number" v-model.number="params.cost_wait" min="1">
+                            <p class="text-xs text-gray-500 mt-1">客户因等待产生的隐性损失或不满折现</p>
+                        </div>
+                    </div>
+                    <button @click="runOptimization" class="btn-primary w-full mt-4 bg-green-600 hover:bg-green-700">
+                        <i class="fas fa-calculator mr-2"></i> 运行优化分析
+                    </button>
+                </div>
+            </aside>
+
+            <!-- Main Content -->
+            <div class="flex-1 flex flex-col overflow-y-auto bg-slate-900 p-6 gap-6">
+                
+                <!-- Top: Animation & Live Stats -->
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 h-[350px]">
+                    <!-- Visualizer -->
+                    <div class="lg:col-span-2 glass rounded-xl p-4 flex flex-col relative">
+                        <div class="flex justify-between items-center mb-2">
+                            <h3 class="font-semibold text-gray-300">实时队列视图</h3>
+                            <div class="text-sm text-indigo-400">
+                                时间: <span class="font-mono">${ currentTime.toFixed(1) }</span> min
+                            </div>
+                        </div>
+                        <canvas ref="simCanvas" class="flex-1 w-full rounded bg-slate-800 border border-slate-700"></canvas>
+                        <!-- Legend -->
+                        <div class="absolute bottom-6 left-6 flex gap-4 text-xs text-gray-400">
+                            <div class="flex items-center gap-1"><div class="w-3 h-3 rounded-full bg-blue-500"></div> 排队中</div>
+                            <div class="flex items-center gap-1"><div class="w-3 h-3 rounded-full bg-green-500"></div> 服务中</div>
+                            <div class="flex items-center gap-1"><div class="w-3 h-3 rounded-full bg-gray-500"></div> 空闲窗口</div>
+                        </div>
+                    </div>
+
+                    <!-- Live Stats -->
+                    <div class="glass rounded-xl p-4 flex flex-col justify-center gap-4">
+                        <h3 class="font-semibold text-gray-300 border-b border-gray-700 pb-2">仿真统计结果</h3>
+                        
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="bg-slate-800 p-3 rounded-lg text-center">
+                                <div class="text-xs text-gray-500">平均等待</div>
+                                <div class="text-2xl font-bold text-indigo-400">${ metrics.avg_wait } <span class="text-xs">min</span></div>
+                            </div>
+                            <div class="bg-slate-800 p-3 rounded-lg text-center">
+                                <div class="text-xs text-gray-500">最大等待</div>
+                                <div class="text-2xl font-bold text-red-400">${ metrics.max_wait } <span class="text-xs">min</span></div>
+                            </div>
+                            <div class="bg-slate-800 p-3 rounded-lg text-center">
+                                <div class="text-xs text-gray-500">已服务人数</div>
+                                <div class="text-2xl font-bold text-green-400">${ metrics.served }</div>
+                            </div>
+                            <div class="bg-slate-800 p-3 rounded-lg text-center">
+                                <div class="text-xs text-gray-500">窗口利用率</div>
+                                <div class="text-2xl font-bold text-yellow-400">${ metrics.utilization }<span class="text-sm">%</span></div>
+                            </div>
+                        </div>
+                        
+                        <div v-if="loading" class="text-center text-indigo-400 animate-pulse">
+                            <i class="fas fa-circle-notch fa-spin mr-2"></i> 计算中...
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Bottom: Charts -->
+                <div class="glass rounded-xl p-4 flex-1 min-h-[400px]">
+                    <h3 class="font-semibold text-gray-300 mb-4">成本优化分析 (服务窗口数 vs 总成本)</h3>
+                    <div ref="chartContainer" class="w-full h-[350px]"></div>
+                </div>
+
+            </div>
+        </main>
+
+        <!-- Save Modal -->
+        <div v-if="showSaveModal" class="fixed inset-0 bg-black/50 backdrop-blur flex items-center justify-center z-50">
+            <div class="glass p-6 rounded-xl w-96">
+                <h3 class="text-xl font-bold mb-4">保存配置</h3>
+                <input v-model="saveName" placeholder="输入配置名称 (如: 早高峰)" class="w-full bg-slate-800 p-2 rounded mb-4 text-white">
+                <div class="flex justify-end gap-2">
+                    <button @click="showSaveModal = false" class="btn-secondary">取消</button>
+                    <button @click="saveConfig" class="btn-primary">保存</button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Load Modal -->
+        <div v-if="showLoadModal" class="fixed inset-0 bg-black/50 backdrop-blur flex items-center justify-center z-50">
+            <div class="glass p-6 rounded-xl w-96">
+                <h3 class="text-xl font-bold mb-4">加载配置</h3>
+                <ul class="space-y-2 max-h-60 overflow-y-auto mb-4">
+                    <li v-for="(cfg, name) in savedConfigs" :key="name" class="flex justify-between items-center bg-slate-800 p-2 rounded hover:bg-slate-700 cursor-pointer" @click="loadConfig(name)">
+                        <span>${ name }</span>
+                        <button @click.stop="deleteConfig(name)" class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
+                    </li>
+                    <li v-if="Object.keys(savedConfigs).length === 0" class="text-gray-500 text-center">暂无保存的配置</li>
+                </ul>
+                <div class="flex justify-end gap-2">
+                    <button @click="showLoadModal = false" class="btn-secondary">关闭</button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted, reactive, watch, nextTick } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                // State
+                const params = reactive({
+                    arrival_rate: 120,
+                    service_time: 2.0,
+                    service_std: 0.5,
+                    num_servers: 5,
+                    duration: 60,
+                    cost_server: 20,
+                    cost_wait: 60
+                });
+
+                const metrics = reactive({ avg_wait: 0, max_wait: 0, served: 0, utilization: 0 });
+                const loading = ref(false);
+                const currentTime = ref(0);
+                
+                // Modals
+                const showSaveModal = ref(false);
+                const showLoadModal = ref(false);
+                const saveName = ref('');
+                const savedConfigs = ref({});
+                const fileInput = ref(null);
+
+                // Canvas & Chart Refs
+                const simCanvas = ref(null);
+                const chartContainer = ref(null);
+                let chartInstance = null;
+                let animationFrame = null;
+
+                // Simulation State
+                let traceData = [];
+                let playbackSpeed = 1; // Multiplier
+                let customers = []; // { id, state: 'queue'|'service', serverIdx, x, y, targetX, targetY }
+                let servers = []; // { id, busy: false, customerId: null }
+
+                // --- Methods ---
+
+                const runSimulation = async () => {
+                    loading.value = true;
+                    try {
+                        const res = await fetch('/api/simulate', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify(params)
+                        });
+                        const data = await res.json();
+                        
+                        // Update metrics
+                        Object.assign(metrics, data.metrics);
+                        
+                        // Start Visualization
+                        traceData = data.trace;
+                        startAnimation();
+                        
+                    } catch (e) {
+                        console.error(e);
+                        alert('仿真请求失败');
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const runOptimization = async () => {
+                    loading.value = true;
+                    try {
+                        const res = await fetch('/api/optimize', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify(params)
+                        });
+                        const data = await res.json();
+                        renderChart(data.results);
+                    } catch (e) {
+                        console.error(e);
+                        alert('优化请求失败');
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                // --- Visualization Logic ---
+                
+                const startAnimation = () => {
+                    if (animationFrame) cancelAnimationFrame(animationFrame);
+                    
+                    // Reset
+                    currentTime.value = 0;
+                    customers = [];
+                    servers = Array.from({length: params.num_servers}, (_, i) => ({ id: i, busy: false, customerId: null }));
+                    
+                    // Canvas Setup
+                    const canvas = simCanvas.value;
+                    const ctx = canvas.getContext('2d');
+                    const dpr = window.devicePixelRatio || 1;
+                    const rect = canvas.getBoundingClientRect();
+                    canvas.width = rect.width * dpr;
+                    canvas.height = rect.height * dpr;
+                    ctx.scale(dpr, dpr);
+                    
+                    const width = rect.width;
+                    const height = rect.height;
+
+                    let lastFrameTime = performance.now();
+                    let traceIndex = 0;
+
+                    const animate = (now) => {
+                        const dt = (now - lastFrameTime) / 1000; // seconds
+                        lastFrameTime = now;
+                        
+                        // Advance simulation time (1 real sec = 1 sim min * speed)
+                        // Let's make it fast: 1 real sec = 10 sim mins
+                        const simSpeed = 5.0; 
+                        currentTime.value += dt * simSpeed;
+                        
+                        // Process events up to currentTime
+                        while (traceIndex < traceData.length && traceData[traceIndex].time <= currentTime.value) {
+                            const event = traceData[traceIndex];
+                            processEvent(event);
+                            traceIndex++;
+                        }
+                        
+                        // Draw
+                        drawScene(ctx, width, height);
+                        
+                        if (currentTime.value < params.duration || customers.length > 0) {
+                            animationFrame = requestAnimationFrame(animate);
+                        }
+                    };
+                    
+                    requestAnimationFrame(animate);
+                };
+
+                const processEvent = (event) => {
+                    if (event.type === 'arrival') {
+                        customers.push({
+                            id: event.id,
+                            state: 'queue',
+                            x: 50, // Start left
+                            y: 150,
+                            color: '#3b82f6' // Blue
+                        });
+                    } else if (event.type === 'start') {
+                        // Find customer
+                        const cust = customers.find(c => c.id === event.id);
+                        if (cust) {
+                            cust.state = 'service';
+                            cust.color = '#22c55e'; // Green
+                            // Find free server
+                            const server = servers.find(s => !s.busy);
+                            if (server) {
+                                server.busy = true;
+                                server.customerId = cust.id;
+                                cust.serverIdx = server.id;
+                            }
+                        }
+                    } else if (event.type === 'finish') {
+                        const cust = customers.find(c => c.id === event.id);
+                        if (cust) {
+                            // Mark for removal or move to exit
+                            cust.state = 'exit';
+                            // Free server
+                            if (cust.serverIdx !== undefined) {
+                                const server = servers[cust.serverIdx];
+                                if (server) {
+                                    server.busy = false;
+                                    server.customerId = null;
+                                }
+                            }
+                        }
+                    }
+                };
+
+                const drawScene = (ctx, w, h) => {
+                    ctx.clearRect(0, 0, w, h);
+                    
+                    // Draw Server Booths (Right side)
+                    const serverX = w - 100;
+                    const serverGap = h / (params.num_servers + 1);
+                    
+                    servers.forEach((s, i) => {
+                        const y = (i + 1) * serverGap;
+                        ctx.fillStyle = s.busy ? '#1e293b' : '#334155'; // Darker if busy (occupied)
+                        ctx.strokeStyle = s.busy ? '#22c55e' : '#64748b';
+                        ctx.lineWidth = 2;
+                        ctx.beginPath();
+                        ctx.roundRect(serverX, y - 15, 60, 30, 5);
+                        ctx.fill();
+                        ctx.stroke();
+                        
+                        ctx.fillStyle = '#94a3b8';
+                        ctx.font = '12px sans-serif';
+                        ctx.fillText(`窗口 ${i+1}`, serverX + 10, y + 5);
+                    });
+                    
+                    // Draw Queue Area (Left)
+                    ctx.fillStyle = 'rgba(255, 255, 255, 0.05)';
+                    ctx.fillRect(20, 20, w - 150, h - 40);
+                    
+                    // Draw Customers
+                    // Queue positions logic: organize them in lines
+                    let queueIdx = 0;
+                    
+                    // Remove exited customers smoothly
+                    customers = customers.filter(c => !(c.state === 'exit' && c.x > w));
+
+                    customers.forEach(c => {
+                        let targetX, targetY;
+                        
+                        if (c.state === 'queue') {
+                            // Simple wrapping queue
+                            const col = Math.floor(queueIdx / 10);
+                            const row = queueIdx % 10;
+                            targetX = 50 + col * 20;
+                            targetY = 50 + row * 20;
+                            queueIdx++;
+                        } else if (c.state === 'service') {
+                            // Move to assigned server
+                            const sY = (c.serverIdx + 1) * serverGap;
+                            targetX = serverX + 30;
+                            targetY = sY;
+                        } else if (c.state === 'exit') {
+                            targetX = w + 50;
+                            targetY = c.y; // Keep current Y
+                        }
+                        
+                        // Lerp position (smooth movement)
+                        c.x += (targetX - c.x) * 0.1;
+                        c.y += (targetY - c.y) * 0.1;
+                        
+                        // Draw
+                        ctx.beginPath();
+                        ctx.arc(c.x, c.y, 6, 0, Math.PI * 2);
+                        ctx.fillStyle = c.color;
+                        ctx.fill();
+                    });
+                };
+
+                const renderChart = (results) => {
+                    if (!chartInstance) {
+                        chartInstance = echarts.init(chartContainer.value);
+                    }
+                    
+                    const xData = results.map(r => r.servers);
+                    const costData = results.map(r => r.total_cost);
+                    const waitData = results.map(r => r.avg_wait);
+                    
+                    // Find min cost
+                    const minCost = Math.min(...costData);
+                    const optimalServers = results.find(r => r.total_cost === minCost).servers;
+
+                    const option = {
+                        backgroundColor: 'transparent',
+                        tooltip: {
+                            trigger: 'axis',
+                            axisPointer: { type: 'cross' }
+                        },
+                        legend: {
+                            data: ['总成本 ($)', '平均等待 (min)'],
+                            textStyle: { color: '#94a3b8' }
+                        },
+                        xAxis: {
+                            type: 'category',
+                            data: xData,
+                            name: '服务窗口数',
+                            axisLine: { lineStyle: { color: '#475569' } },
+                            axisLabel: { color: '#94a3b8' }
+                        },
+                        yAxis: [
+                            {
+                                type: 'value',
+                                name: '总成本 ($)',
+                                position: 'left',
+                                axisLine: { lineStyle: { color: '#22c55e' } },
+                                axisLabel: { color: '#22c55e' },
+                                splitLine: { lineStyle: { color: '#334155' } }
+                            },
+                            {
+                                type: 'value',
+                                name: '平均等待 (min)',
+                                position: 'right',
+                                axisLine: { lineStyle: { color: '#3b82f6' } },
+                                axisLabel: { color: '#3b82f6' },
+                                splitLine: { show: false }
+                            }
+                        ],
+                        series: [
+                            {
+                                name: '总成本 ($)',
+                                type: 'line',
+                                data: costData,
+                                smooth: true,
+                                lineStyle: { color: '#22c55e', width: 3 },
+                                itemStyle: { color: '#22c55e' },
+                                markPoint: {
+                                    data: [
+                                        { type: 'min', name: '最佳配置', itemStyle: { color: '#f59e0b' } }
+                                    ]
+                                }
+                            },
+                            {
+                                name: '平均等待 (min)',
+                                type: 'line',
+                                yAxisIndex: 1,
+                                data: waitData,
+                                smooth: true,
+                                lineStyle: { color: '#3b82f6', width: 2, type: 'dashed' },
+                                itemStyle: { color: '#3b82f6' }
+                            }
+                        ]
+                    };
+                    chartInstance.setOption(option);
+                    window.addEventListener('resize', () => chartInstance.resize());
+                };
+
+                // --- Storage Logic ---
+                
+                const loadSaved = () => {
+                    const saved = localStorage.getItem('queue_sim_configs');
+                    if (saved) savedConfigs.value = JSON.parse(saved);
+                };
+                
+                const saveConfig = () => {
+                    if (!saveName.value) return;
+                    savedConfigs.value[saveName.value] = { ...params };
+                    localStorage.setItem('queue_sim_configs', JSON.stringify(savedConfigs.value));
+                    showSaveModal.value = false;
+                    saveName.value = '';
+                    alert('配置已保存');
+                };
+                
+                const loadConfig = (name) => {
+                    Object.assign(params, savedConfigs.value[name]);
+                    showLoadModal.value = false;
+                };
+                
+                const deleteConfig = (name) => {
+                    delete savedConfigs.value[name];
+                    localStorage.setItem('queue_sim_configs', JSON.stringify(savedConfigs.value));
+                };
+
+                // --- Import/Export Logic ---
+                const triggerUpload = () => {
+                    fileInput.value.click();
+                };
+
+                const handleFileUpload = async (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+
+                    // Client-side read for immediate update
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        try {
+                            const config = JSON.parse(e.target.result);
+                            Object.assign(params, config);
+                            alert('配置导入成功');
+                        } catch (err) {
+                            alert('无效的配置文件');
+                            console.error(err);
+                        }
+                    };
+                    reader.readAsText(file);
+
+                    // Optional: Send to server to verify server-side logic (as requested)
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    try {
+                        await fetch('/api/upload_config', {
+                            method: 'POST',
+                            body: formData
+                        });
+                    } catch (e) {
+                        console.error("Server upload check failed, but client side worked:", e);
+                    }
+                    
+                    // Reset input
+                    event.target.value = '';
+                };
+
+                const exportConfig = () => {
+                    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(params, null, 2));
+                    const downloadAnchorNode = document.createElement('a');
+                    downloadAnchorNode.setAttribute("href", dataStr);
+                    downloadAnchorNode.setAttribute("download", "queue_config.json");
+                    document.body.appendChild(downloadAnchorNode);
+                    downloadAnchorNode.click();
+                    downloadAnchorNode.remove();
+                };
+
+                onMounted(() => {
+                    loadSaved();
+                });
+
+                return {
+                    params,
+                    metrics,
+                    loading,
+                    currentTime,
+                    simCanvas,
+                    chartContainer,
+                    runSimulation,
+                    runOptimization,
+                    showSaveModal,
+                    showLoadModal,
+                    saveName,
+                    savedConfigs,
+                    saveConfig,
+                    loadConfig,
+                    deleteConfig,
+                    fileInput,
+                    triggerUpload,
+                    handleFileUpload,
+                    exportConfig
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>