feat: enhance assembly line tool with import/export and robust error handling

.gitignore

@@ -0,0 +1,8 @@
+__pycache__/
+*.py[cod]
+*$py.class
+.DS_Store
+.env
+venv/
+.idea/
+.vscode/

Dockerfile

@@ -0,0 +1,17 @@
+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 (good practice for HF Spaces)
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+EXPOSE 7860
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,55 @@
+---
+title: Assembly Line Flow Pro
+emoji: 🏭
+colorFrom: blue
+colorTo: green
+sdk: docker
+pinned: false
+app_port: 7860
+short_description: 制造业产线平衡与瓶颈分析工具 (Manufacturing Assembly Line Balancing)
+---
+
+# Assembly Line Flow Pro (产线平衡优化大师)
+
+**Assembly Line Flow Pro** 是一个专为制造业工程师和生产管理人员设计的**产线平衡与瓶颈分析工具**。通过直观的拖拽交互和实时数据分析，帮助用户优化装配线工序分配，提升生产效率 (Line Efficiency) 并消除瓶颈 (Bottleneck)。
+
+## 核心功能 (Key Features)
+
+*   **智能自动平衡 (Auto-Balance)**: 基于目标节拍时间 (Takt Time) 的贪婪算法，自动重新分配工序，实现产线平衡。
+*   **可视化山积图 (Yamazumi Chart)**: 实时展示各工位负荷与 Takt Time 的对比，红/绿颜色直观预警过载工位。
+*   **动态交互设计**: 支持拖拽 (Drag & Drop) 调整工序，实时计算线体平衡率、平滑指数等关键指标。
+*   **多维度生产配置**: 自定义目标产量、工作时长，系统自动计算理论产能和节拍要求。
+
+## 商业应用场景 (Use Cases)
+
+1.  **新产线规划**: 在物理产线搭建前，模拟工序分配，预测所需工位数量。
+2.  **持续改进 (Kaizen)**: 识别现有产线的瓶颈工位，进行动作拆解或重新分配。
+3.  **产能评估**: 根据订单需求变化，快速计算当前产线配置是否满足交付目标。
+
+## 技术栈 (Tech Stack)
+
+*   **Frontend**: Vue 3 (CDN), Element Plus (UI), ECharts (Visualization), HTML5 Drag & Drop
+*   **Backend**: Flask (Python)
+*   **Deployment**: Docker
+
+## 快速开始 (Quick Start)
+
+### Docker 部署
+
+```bash
+docker build -t assembly-line-flow-pro .
+docker run -p 7860:7860 assembly-line-flow-pro
+```
+
+访问: `http://localhost:7860`
+
+### 本地运行
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+## 许可证 (License)
+
+MIT License

app.py

@@ -0,0 +1,180 @@
+import os
+import json
+import math
+from flask import Flask, render_template, request, jsonify
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB Max Limit
+
+@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", "details": str(e)}), 500
+
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    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:
+            try:
+                data = json.load(file)
+                return jsonify({"message": "File uploaded successfully", "data": data})
+            except json.JSONDecodeError:
+                return jsonify({"error": "Invalid JSON file"}), 400
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+# Default Data (Enriched for User Experience)
+DEFAULT_TASKS = [
+    {"id": "t1", "name": "安装底壳 (Install Chassis)", "duration": 15},
+    {"id": "t2", "name": "安装主板 (Mount PCB)", "duration": 25},
+    {"id": "t3", "name": "连接电源线 (Connect Power)", "duration": 10},
+    {"id": "t4", "name": "安装风扇 (Install Fan)", "duration": 12},
+    {"id": "t5", "name": "固定硬盘 (Secure HDD)", "duration": 18},
+    {"id": "t6", "name": "安装显卡 (Install GPU)", "duration": 20},
+    {"id": "t7", "name": "理线 (Cable Mgmt)", "duration": 30},
+    {"id": "t8", "name": "合盖 (Close Case)", "duration": 10},
+    {"id": "t9", "name": "贴标签 (Labeling)", "duration": 5},
+    {"id": "t10", "name": "最终测试 (Final Test)", "duration": 40}
+]
+
+DEFAULT_CONFIG = {
+    "work_hours": 8,
+    "target_output": 100  # Units per day
+}
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/calculate', methods=['POST'])
+def calculate_metrics():
+    """
+    Calculate Line Efficiency, Smoothness Index, and Takt Time.
+    Input: { "stations": [[task1, task2], [task3]], "config": {...} }
+    """
+    data = request.json
+    stations = data.get('stations', [])
+    config = data.get('config', DEFAULT_CONFIG)
+    
+    # 1. Calculate Takt Time (Seconds)
+    # Takt Time = Available Time / Demand
+    available_seconds = config.get('work_hours', 8) * 3600
+    demand = config.get('target_output', 100)
+    if demand <= 0: demand = 1
+    takt_time = available_seconds / demand
+    
+    # 2. Calculate Station Times
+    station_times = []
+    total_work_content = 0
+    
+    for station in stations:
+        s_time = sum(t.get('duration', 0) for t in station)
+        station_times.append(s_time)
+        total_work_content += s_time
+        
+    if not station_times:
+        return jsonify({"error": "No stations defined"})
+        
+    # 3. Calculate Bottleneck (Max Station Time)
+    bottleneck_time = max(station_times)
+    bottleneck_index = station_times.index(bottleneck_time)
+    
+    # 4. Calculate Efficiency
+    # Efficiency = Total Work Content / (Num Stations * Bottleneck Time)
+    num_stations = len(stations)
+    efficiency = 0
+    if num_stations > 0 and bottleneck_time > 0:
+        efficiency = (total_work_content / (num_stations * bottleneck_time)) * 100
+        
+    # 5. Calculate Smoothness Index (SI)
+    # SI = Sqrt(Sum( (Max - Si)^2 ))
+    si_sum = sum((bottleneck_time - st)**2 for st in station_times)
+    smoothness_index = math.sqrt(si_sum)
+    
+    # 6. Capacity Calculation
+    # Hourly Capacity = 3600 / Bottleneck Time
+    hourly_capacity = 0
+    if bottleneck_time > 0:
+        hourly_capacity = 3600 / bottleneck_time
+        
+    daily_capacity = hourly_capacity * config.get('work_hours', 8)
+
+    return jsonify({
+        "metrics": {
+            "takt_time": round(takt_time, 2),
+            "bottleneck_time": round(bottleneck_time, 2),
+            "bottleneck_station": bottleneck_index + 1,
+            "line_efficiency": round(efficiency, 2),
+            "smoothness_index": round(smoothness_index, 2),
+            "hourly_capacity": round(hourly_capacity, 1),
+            "daily_capacity": round(daily_capacity, 1),
+            "total_work_content": total_work_content
+        },
+        "station_times": station_times
+    })
+
+@app.route('/api/auto_balance', methods=['POST'])
+def auto_balance():
+    """
+    Simple Greedy Algorithm to re-balance line.
+    Try to fill stations up to Takt Time (or slightly above if unavoidable).
+    """
+    data = request.json
+    all_tasks = data.get('tasks', [])
+    config = data.get('config', DEFAULT_CONFIG)
+    
+    # Calculate Takt Time Target
+    available_seconds = config.get('work_hours', 8) * 3600
+    demand = config.get('target_output', 100)
+    takt_time = available_seconds / demand if demand > 0 else 60
+    
+    # Heuristic: Sort tasks? 
+    # In real assembly, order matters (precedence). 
+    # Here we assume the Input List order IS the precedence constraint order (roughly).
+    # We will just cut the list into chunks.
+    
+    new_stations = []
+    current_station = []
+    current_time = 0
+    
+    for task in all_tasks:
+        t_dur = task.get('duration', 0)
+        
+        # If adding this task exceeds Takt Time significantly, start new station?
+        # Let's try to fit as much as possible <= Takt Time.
+        # If a single task > Takt Time, it must be in a station alone (and will be bottleneck).
+        
+        if current_time + t_dur <= takt_time:
+            current_station.append(task)
+            current_time += t_dur
+        else:
+            # If current station is not empty, close it
+            if current_station:
+                new_stations.append(current_station)
+                current_station = [task]
+                current_time = t_dur
+            else:
+                # Task itself is larger than Takt Time
+                new_stations.append([task])
+                current_time = 0 # Reset for next
+                current_station = []
+                
+    if current_station:
+        new_stations.append(current_station)
+        
+    return jsonify({
+        "stations": new_stations,
+        "message": "Auto-balance completed based on Takt Time constraint."
+    })
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=True)

requirements.txt

@@ -0,0 +1,2 @@
+flask==3.0.0
+gunicorn==21.2.0

templates/index.html

@@ -0,0 +1,606 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Assembly Line Flow Pro - 产线平衡优化大师</title>
+    
+    <!-- CSS Dependencies -->
+    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
+    <style>
+        :root {
+            --el-color-primary: #409EFF;
+            --el-color-success: #67C23A;
+            --el-color-danger: #F56C6C;
+        }
+        body {
+            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
+            background-color: #f5f7fa;
+            margin: 0;
+            padding: 0;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .header {
+            background: #fff;
+            padding: 20px;
+            border-bottom: 1px solid #e6e6e6;
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .header h1 {
+            margin: 0;
+            font-size: 24px;
+            color: #303133;
+        }
+        .station-card {
+            background: #fff;
+            border-radius: 4px;
+            border: 1px solid #dcdfe6;
+            margin-bottom: 15px;
+            transition: all 0.3s;
+        }
+        .station-card:hover {
+            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+        }
+        .station-header {
+            padding: 10px 15px;
+            background: #f5f7fa;
+            border-bottom: 1px solid #ebeef5;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-weight: bold;
+        }
+        .station-body {
+            padding: 10px;
+            min-height: 50px;
+        }
+        .task-item {
+            background: #ecf5ff;
+            border: 1px solid #d9ecff;
+            color: #409EFF;
+            padding: 8px;
+            margin-bottom: 5px;
+            border-radius: 4px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: move;
+        }
+        .task-item.warning {
+            background: #fef0f0;
+            border-color: #fde2e2;
+            color: #F56C6C;
+        }
+        .metrics-card {
+            background: #fff;
+            padding: 20px;
+            border-radius: 4px;
+            text-align: center;
+        }
+        .metric-value {
+            font-size: 24px;
+            font-weight: bold;
+            color: #303133;
+            margin: 10px 0;
+        }
+        .metric-label {
+            color: #909399;
+            font-size: 14px;
+        }
+        .chart-container {
+            height: 400px;
+            background: #fff;
+            padding: 20px;
+            border-radius: 4px;
+            margin-top: 20px;
+        }
+        .takt-line-indicator {
+            height: 4px;
+            background: #e4e7ed;
+            margin-top: 10px;
+            position: relative;
+            border-radius: 2px;
+        }
+        .takt-fill {
+            height: 100%;
+            background: #67C23A;
+            border-radius: 2px;
+            transition: width 0.3s;
+        }
+        .takt-fill.overload {
+            background: #F56C6C;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <div class="header">
+            <div style="display: flex; align-items: center; gap: 10px;">
+                <el-icon :size="28" color="#409EFF"><Tools /></el-icon>
+                <h1>Assembly Line Flow Pro <span style="font-size: 14px; color: #909399; font-weight: normal;">产线平衡优化大师</span></h1>
+            </div>
+            <div>
+                <input type="file" ref="fileInput" style="display: none" @change="handleFileChange" accept=".json">
+                <el-button type="warning" @click="triggerUpload">
+                    <el-icon><Upload /></el-icon> 导入配置
+                </el-button>
+                <el-button type="info" @click="exportData">
+                    <el-icon><Download /></el-icon> 导出配置
+                </el-button>
+                <el-button type="primary" @click="autoBalance" :loading="loading">
+                    <el-icon><Magic-Stick /></el-icon> 智能自动平衡
+                </el-button>
+                <el-button type="success" @click="calculateMetrics">
+                    <el-icon><Refresh /></el-icon> 刷新计算
+                </el-button>
+                <el-button @click="resetData">
+                    <el-icon><Delete /></el-icon> 重置数据
+                </el-button>
+            </div>
+        </div>
+
+        <div class="container">
+            <!-- Configuration Row -->
+            <el-row :gutter="20" style="margin-bottom: 20px;">
+                <el-col :span="6">
+                    <el-card shadow="hover">
+                        <template #header>
+                            <div class="card-header">
+                                <span>生产目标设定</span>
+                            </div>
+                        </template>
+                        <el-form label-position="top">
+                            <el-form-item label="计划工时 (小时/天)">
+                                <el-input-number v-model="config.work_hours" :min="1" :max="24" @change="calculateMetrics"></el-input-number>
+                            </el-form-item>
+                            <el-form-item label="目标产量 (台/天)">
+                                <el-input-number v-model="config.target_output" :min="1" :step="10" @change="calculateMetrics"></el-input-number>
+                            </el-form-item>
+                            <div style="background: #f0f9eb; padding: 10px; border-radius: 4px; color: #67C23A;">
+                                <strong>节拍时间 (Takt): ${ metrics.takt_time } 秒</strong>
+                                <div style="font-size: 12px; margin-top: 5px;">即每 ${ metrics.takt_time } 秒需产出一台</div>
+                            </div>
+                        </el-form>
+                    </el-card>
+                </el-col>
+                
+                <el-col :span="18">
+                    <el-row :gutter="20">
+                        <el-col :span="6">
+                            <div class="metrics-card">
+                                <div class="metric-label">线体平衡率 (Line Efficiency)</div>
+                                <div class="metric-value" :style="{ color: metrics.line_efficiency > 85 ? '#67C23A' : '#E6A23C' }">
+                                    ${ metrics.line_efficiency }%
+                                </div>
+                                <el-progress :percentage="metrics.line_efficiency" :status="metrics.line_efficiency > 85 ? 'success' : 'warning'"></el-progress>
+                            </div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div class="metrics-card">
+                                <div class="metric-label">平滑指数 (Smoothness)</div>
+                                <div class="metric-value">${ metrics.smoothness_index }</div>
+                                <div style="font-size: 12px; color: #909399;">越低越好</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div class="metrics-card">
+                                <div class="metric-label">瓶颈工位 (Bottleneck)</div>
+                                <div class="metric-value" style="color: #F56C6C;">ST-${ metrics.bottleneck_station }</div>
+                                <div style="font-size: 12px;">${ metrics.bottleneck_time } 秒</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="6">
+                            <div class="metrics-card">
+                                <div class="metric-label">日产能上限 (Max Capacity)</div>
+                                <div class="metric-value">${ metrics.daily_capacity }</div>
+                                <div style="font-size: 12px; color: #909399;">理论最大值</div>
+                            </div>
+                        </el-col>
+                    </el-row>
+                    
+                    <!-- Chart -->
+                    <div id="balanceChart" class="chart-container" style="height: 220px; margin-top: 15px;"></div>
+                </el-col>
+            </el-row>
+
+            <!-- Main Workspace -->
+            <el-row :gutter="20">
+                <!-- Task Pool / Editor -->
+                <el-col :span="6">
+                    <el-card>
+                        <template #header>
+                            <div style="display: flex; justify-content: space-between; align-items: center;">
+                                <span>工序库 (Task Pool)</span>
+                                <el-button size="small" type="primary" @click="openTaskDialog">新增</el-button>
+                            </div>
+                        </template>
+                        <div style="max-height: 600px; overflow-y: auto;">
+                            <div v-for="task in taskPool" :key="task.id" class="task-item" draggable="true" @dragstart="dragStart($event, task, -1)">
+                                <div>
+                                    <div style="font-weight: bold;">${ task.name }</div>
+                                    <div style="font-size: 12px;">${ task.duration }s</div>
+                                </div>
+                                <div>
+                                    <el-tag size="small">${ task.id }</el-tag>
+                                </div>
+                            </div>
+                            <div v-if="taskPool.length === 0" style="text-align: center; color: #909399; padding: 20px;">
+                                全部工序已分配
+                            </div>
+                        </div>
+                    </el-card>
+                </el-col>
+
+                <!-- Stations -->
+                <el-col :span="18">
+                    <div style="display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px;">
+                        <div v-for="(station, sIndex) in stations" :key="sIndex" class="station-card" style="min-width: 250px; flex: 1;"
+                             @dragover.prevent @drop="drop($event, sIndex)">
+                            <div class="station-header">
+                                <span>Station ${ sIndex + 1 }</span>
+                                <el-tag :type="getStationTime(station) > metrics.takt_time ? 'danger' : 'success'" effect="dark">
+                                    ${ getStationTime(station) }s
+                                </el-tag>
+                            </div>
+                            <!-- Visual Progress Bar for Station Load -->
+                            <div style="padding: 0 15px; margin-top: 5px;">
+                                <div class="takt-line-indicator">
+                                    <div class="takt-fill" 
+                                         :class="{ 'overload': getStationTime(station) > metrics.takt_time }"
+                                         :style="{ width: Math.min((getStationTime(station) / (metrics.takt_time || 1)) * 100, 100) + '%' }">
+                                    </div>
+                                </div>
+                                <div style="font-size: 10px; color: #909399; text-align: right; margin-top: 2px;">
+                                    Load: ${ Math.round((getStationTime(station) / (metrics.takt_time || 1)) * 100) }%
+                                </div>
+                            </div>
+
+                            <div class="station-body">
+                                <div v-for="(task, tIndex) in station" :key="task.id" class="task-item" draggable="true" @dragstart="dragStart($event, task, sIndex)">
+                                    <div>
+                                        <span>${ task.name }</span>
+                                        <span style="font-size: 12px; margin-left: 5px; color: #606266;">(${ task.duration }s)</span>
+                                    </div>
+                                    <el-button type="text" icon="Close" size="small" style="color: #F56C6C;" @click="removeTask(sIndex, tIndex)"></el-button>
+                                </div>
+                                <div v-if="station.length === 0" style="text-align: center; color: #C0C4CC; padding: 10px; border: 2px dashed #EBEEF5; border-radius: 4px;">
+                                    拖拽工序到此处
+                                </div>
+                            </div>
+                            <div style="padding: 10px; border-top: 1px solid #ebeef5; text-align: center;">
+                                <el-button size="small" @click="deleteStation(sIndex)" :disabled="station.length > 0">删除工位</el-button>
+                            </div>
+                        </div>
+                        
+                        <!-- Add Station Button -->
+                        <div style="min-width: 100px; display: flex; align-items: center; justify-content: center;">
+                            <el-button type="primary" circle icon="Plus" size="large" @click="addStation"></el-button>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+
+        <!-- Add Task Dialog -->
+        <el-dialog v-model="dialogVisible" title="添加新工序">
+            <el-form :model="newTask">
+                <el-form-item label="工序名称">
+                    <el-input v-model="newTask.name"></el-input>
+                </el-form-item>
+                <el-form-item label="标准工时 (秒)">
+                    <el-input-number v-model="newTask.duration" :min="1"></el-input-number>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="addTask">确定</el-button>
+            </template>
+        </el-dialog>
+    </div>
+
+    <!-- JS Dependencies -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/element-plus"></script>
+    <script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>
+    <script src="https://unpkg.com/@element-plus/icons-vue"></script>
+
+    <script>
+        const { createApp, ref, reactive, computed, onMounted, nextTick } = Vue;
+
+        const app = createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const config = reactive({
+                    work_hours: 8,
+                    target_output: 100
+                });
+                
+                const taskPool = ref([]);
+                const stations = ref([[], [], []]); // Initial 3 empty stations
+                const metrics = reactive({
+                    takt_time: 0,
+                    bottleneck_time: 0,
+                    bottleneck_station: 0,
+                    line_efficiency: 0,
+                    smoothness_index: 0,
+                    daily_capacity: 0
+                });
+                
+                const loading = ref(false);
+                const dialogVisible = ref(false);
+                const newTask = reactive({ name: '', duration: 10 });
+                let chartInstance = null;
+                
+                // Drag & Drop State
+                let draggedTask = null;
+                let sourceStationIndex = -1; // -1 means from Task Pool
+
+                // Initial Data Load
+                const loadDefaultData = () => {
+                    const defaultTasks = [
+                        {id: "t1", name: "安装底壳", duration: 15},
+                        {id: "t2", name: "安装主板", duration: 25},
+                        {id: "t3", name: "连接电源线", duration: 10},
+                        {id: "t4", name: "安装风扇", duration: 12},
+                        {id: "t5", name: "固定硬盘", duration: 18},
+                        {id: "t6", name: "安装显卡", duration: 20},
+                        {id: "t7", name: "理线", duration: 30},
+                        {id: "t8", name: "合盖", duration: 10},
+                        {id: "t9", name: "贴标签", duration: 5},
+                        {id: "t10", name: "最终测试", duration: 40}
+                    ];
+                    // Distribute some tasks to stations for demo
+                    stations.value = [
+                        [defaultTasks[0], defaultTasks[1]], 
+                        [defaultTasks[2], defaultTasks[3], defaultTasks[4]], 
+                        [defaultTasks[5], defaultTasks[6]],
+                        [defaultTasks[7], defaultTasks[8]],
+                        [defaultTasks[9]]
+                    ];
+                    taskPool.value = [];
+                    calculateMetrics();
+                };
+
+                const calculateMetrics = async () => {
+                    try {
+                        const response = await fetch('/api/calculate', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({
+                                stations: stations.value,
+                                config: config
+                            })
+                        });
+                        const data = await response.json();
+                        Object.assign(metrics, data.metrics);
+                        updateChart(data.station_times, data.metrics.takt_time);
+                    } catch (e) {
+                        console.error(e);
+                    }
+                };
+
+                const autoBalance = async () => {
+                    loading.value = true;
+                    try {
+                        // Gather all tasks
+                        let allTasks = [...taskPool.value];
+                        stations.value.forEach(s => allTasks = allTasks.concat(s));
+                        
+                        const response = await fetch('/api/auto_balance', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({
+                                tasks: allTasks,
+                                config: config
+                            })
+                        });
+                        const data = await response.json();
+                        stations.value = data.stations;
+                        taskPool.value = []; // All tasks assigned
+                        calculateMetrics();
+                        ElementPlus.ElMessage.success('自动平衡完成！');
+                    } catch (e) {
+                        ElementPlus.ElMessage.error('自动平衡失败');
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const updateChart = (stationTimes, taktTime) => {
+                    if (!chartInstance) {
+                        chartInstance = echarts.init(document.getElementById('balanceChart'));
+                    }
+                    const option = {
+                        title: { text: '山积图 (Yamazumi Chart)', left: 'center', textStyle: { fontSize: 14 } },
+                        tooltip: { trigger: 'axis' },
+                        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+                        xAxis: { 
+                            type: 'category', 
+                            data: stationTimes.map((_, i) => `ST-${i+1}`) 
+                        },
+                        yAxis: { type: 'value', name: '时间 (秒)' },
+                        series: [
+                            {
+                                name: '工位时间',
+                                type: 'bar',
+                                data: stationTimes,
+                                itemStyle: {
+                                    color: (params) => {
+                                        return params.value > taktTime ? '#F56C6C' : '#409EFF';
+                                    }
+                                },
+                                markLine: {
+                                    data: [
+                                        { 
+                                            yAxis: taktTime, 
+                                            name: 'Takt Time',
+                                            lineStyle: { color: '#67C23A', width: 2, type: 'dashed' },
+                                            label: { formatter: 'Takt: {c}s' }
+                                        }
+                                    ]
+                                }
+                            }
+                        ]
+                    };
+                    chartInstance.setOption(option);
+                };
+
+                // Helper
+                const getStationTime = (station) => {
+                    return station.reduce((sum, t) => sum + t.duration, 0);
+                };
+
+                // Drag & Drop Handlers
+                const dragStart = (event, task, sIndex) => {
+                    draggedTask = task;
+                    sourceStationIndex = sIndex;
+                    event.dataTransfer.effectAllowed = 'move';
+                };
+
+                const drop = (event, targetStationIndex) => {
+                    if (!draggedTask) return;
+                    
+                    // Remove from source
+                    if (sourceStationIndex === -1) {
+                        taskPool.value = taskPool.value.filter(t => t.id !== draggedTask.id);
+                    } else {
+                        stations.value[sourceStationIndex] = stations.value[sourceStationIndex].filter(t => t.id !== draggedTask.id);
+                    }
+                    
+                    // Add to target
+                    stations.value[targetStationIndex].push(draggedTask);
+                    
+                    // Reset
+                    draggedTask = null;
+                    sourceStationIndex = -1;
+                    
+                    // Recalculate
+                    calculateMetrics();
+                };
+
+                // CRUD
+                const addStation = () => {
+                    stations.value.push([]);
+                    calculateMetrics();
+                };
+                
+                const deleteStation = (index) => {
+                    if (stations.value[index].length > 0) return;
+                    stations.value.splice(index, 1);
+                    calculateMetrics();
+                };
+                
+                const removeTask = (sIndex, tIndex) => {
+                    const task = stations.value[sIndex][tIndex];
+                    stations.value[sIndex].splice(tIndex, 1);
+                    taskPool.value.push(task);
+                    calculateMetrics();
+                };
+
+                const openTaskDialog = () => {
+                    newTask.name = '';
+                    newTask.duration = 10;
+                    dialogVisible.value = true;
+                };
+
+                const addTask = () => {
+                    if (!newTask.name) return;
+                    const id = 't' + Date.now();
+                    taskPool.value.push({
+                        id: id,
+                        name: newTask.name,
+                        duration: newTask.duration
+                    });
+                    dialogVisible.value = false;
+                };
+
+                const resetData = () => {
+                    loadDefaultData();
+                };
+
+                const fileInput = ref(null);
+
+                const triggerUpload = () => {
+                    fileInput.value.click();
+                };
+
+                const handleFileChange = (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    loading.value = true;
+                    fetch('/api/upload', {
+                        method: 'POST',
+                        body: formData
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.error) {
+                            ElementPlus.ElMessage.error(data.error);
+                        } else {
+                            if (data.data.stations) stations.value = data.data.stations;
+                            if (data.data.taskPool) taskPool.value = data.data.taskPool;
+                            if (data.data.config) Object.assign(config, data.data.config);
+                            calculateMetrics();
+                            ElementPlus.ElMessage.success('导入成功');
+                        }
+                    })
+                    .catch(err => {
+                        ElementPlus.ElMessage.error('上传失败: ' + err);
+                    })
+                    .finally(() => {
+                        loading.value = false;
+                        event.target.value = '';
+                    });
+                };
+
+                const exportData = () => {
+                    const data = {
+                        stations: stations.value,
+                        taskPool: taskPool.value,
+                        config: config
+                    };
+                    const blob = new Blob([JSON.stringify(data, null, 2)], {type: "application/json"});
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = 'assembly_line_config.json';
+                    a.click();
+                    URL.revokeObjectURL(url);
+                };
+
+                onMounted(() => {
+                    loadDefaultData();
+                    window.addEventListener('resize', () => chartInstance && chartInstance.resize());
+                });
+
+                return {
+                    config, stations, taskPool, metrics, loading, dialogVisible, newTask,
+                    calculateMetrics, autoBalance, getStationTime, 
+                    dragStart, drop, addStation, deleteStation, removeTask,
+                    openTaskDialog, addTask, resetData,
+                    fileInput, triggerUpload, handleFileChange, exportData
+                };
+            }
+        });
+
+        // Register Icons
+        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+            app.component(key, component);
+        }
+
+        app.use(ElementPlus);
+        app.mount('#app');
+    </script>
+</body>
+</html>