feat: complete project setup with upload feature and localization

.gitattributes

@@ -0,0 +1,2 @@
+*.db binary
+instance/* binary

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create instance directory and set permissions
+RUN mkdir -p instance && \
+    chmod -R 777 instance
+
+# Expose port 7860 for Hugging Face Spaces
+EXPOSE 7860
+
+# Run with Gunicorn
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,55 @@
+---
+title: Support Pilot Agent
+emoji: 🎧
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+short_description: 智能客服领航员 - AI 辅助分析与训练系统
+---
+
+# Support Pilot Agent (智能客服领航员)
+
+**Support Pilot Agent** 是一个专为客服团队设计的 AI 辅助系统，旨在提升服务效率和质量。
+
+## 核心功能
+
+1.  **工单智能分析 (Analysis)**:
+    - 自动识别客户意图 (Intent) 和情绪 (Sentiment)。
+    - 生成专业的建议回复 (Suggested Reply)。
+    - 提取关键标签 (Keywords)。
+    - 基于 SiliconFlow (Qwen) 大模型。
+
+2.  **模拟演练室 (Training Dojo)**:
+    - AI 扮演不同类型的客户（如：愤怒的客户、咨询的客户）。
+    - 客服人员可以进行实战演练，AI 实时评分。
+    - 帮助新员工快速上手。
+
+3.  **仪表盘 (Dashboard)**:
+    - 实时可视化数据分析。
+    - 情绪分布图与意图统计。
+
+4.  **知识库 (Knowledge Base)**:
+    - 沉淀优秀话术与解决方案。
+    - 资产积累。
+
+## 技术栈
+
+- **Backend**: Python Flask, SQLite
+- **Frontend**: Vue.js 3, Tailwind CSS, ECharts
+- **AI**: SiliconFlow API (Qwen/Qwen2.5-7B-Instruct)
+- **Deploy**: Docker (Hugging Face Spaces compatible)
+
+## 快速开始
+
+1. 克隆项目
+2. 安装依赖: `pip install -r requirements.txt`
+3. 运行: `python app.py`
+4. 访问: `http://localhost:7860`
+
+## 商业价值
+
+本项目属于 **B2B SaaS / 生产力工具** 范畴，能够帮助企业：
+- 降低客服培训成本。
+- 提高工单处理速度。
+- 积累企业服务资产（话术、案例）。

app.py

@@ -0,0 +1,251 @@
+import os
+import json
+import sqlite3
+import datetime
+import requests
+import random
+from flask import Flask, render_template, request, jsonify, g
+from flask_cors import CORS
+
+app = Flask(__name__, instance_relative_config=True)
+CORS(app)
+
+# Configuration
+app.config['SECRET_KEY'] = 'support-pilot-secret-key'
+app.config['DATABASE'] = os.path.join(app.instance_path, 'support_pilot.db')
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB Max Upload
+SILICONFLOW_API_KEY = "sk-vimuseiptfbomzegyuvmebjzooncsqbyjtlddrfodzcdskgi"
+SILICONFLOW_API_URL = "https://api.siliconflow.cn/v1/chat/completions"
+
+# Ensure instance folder exists
+try:
+    os.makedirs(app.instance_path)
+except OSError:
+    pass
+
+# --- Database Helpers ---
+def get_db():
+    if 'db' not in g:
+        g.db = sqlite3.connect(app.config['DATABASE'])
+        g.db.row_factory = sqlite3.Row
+    return g.db
+
+@app.teardown_appcontext
+def close_db(error):
+    if hasattr(g, 'db'):
+        g.db.close()
+
+def init_db():
+    db = get_db()
+    # Tickets/Logs Table
+    db.execute('''
+        CREATE TABLE IF NOT EXISTS tickets (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            content TEXT NOT NULL,
+            source TEXT DEFAULT 'manual',
+            sentiment TEXT,
+            intent TEXT,
+            priority TEXT,
+            status TEXT DEFAULT 'new',
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        )
+    ''')
+    # Knowledge Base / Solutions
+    db.execute('''
+        CREATE TABLE IF NOT EXISTS solutions (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            title TEXT NOT NULL,
+            content TEXT NOT NULL,
+            tags TEXT,
+            usage_count INTEGER DEFAULT 0,
+            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        )
+    ''')
+    # Seed Data
+    cursor = db.execute("SELECT count(*) FROM solutions")
+    if cursor.fetchone()[0] == 0:
+        db.execute("INSERT INTO solutions (title, content, tags) VALUES (?, ?, ?)",
+                   ("退款流程", "用户申请退款需提供订单号，若在7天内且无使用痕迹，可直接办理。", "refund,policy"))
+        db.execute("INSERT INTO solutions (title, content, tags) VALUES (?, ?, ?)",
+                   ("账号无法登录", "请引导用户检查大小写，或使用'忘记密码'功能重置。", "login,account"))
+    
+    # Seed Tickets
+    cursor = db.execute("SELECT count(*) FROM tickets")
+    if cursor.fetchone()[0] == 0:
+        sample_tickets = [
+            ("我的包裹丢了！你们怎么搞的？", "Negative", "Logistics", "High"),
+            ("这个产品怎么使用？说明书看不懂。", "Neutral", "Inquiry", "Medium"),
+            ("感谢你们的帮助，问题解决了。", "Positive", "Feedback", "Low")
+        ]
+        for t in sample_tickets:
+            db.execute("INSERT INTO tickets (content, sentiment, intent, priority, status) VALUES (?, ?, ?, ?, ?)",
+                       (t[0], t[1], t[2], t[3], 'closed'))
+
+    db.commit()
+
+# --- AI Integration ---
+def call_ai_model(system_prompt, user_input, model="Qwen/Qwen2.5-7B-Instruct"):
+    headers = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+    payload = {
+        "model": model,
+        "messages": [
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": user_input}
+        ],
+        "temperature": 0.7,
+        "response_format": {"type": "json_object"} 
+    }
+    
+    try:
+        response = requests.post(SILICONFLOW_API_URL, json=payload, headers=headers, timeout=10)
+        response.raise_for_status()
+        data = response.json()
+        content = data['choices'][0]['message']['content']
+        # Try to parse JSON
+        try:
+            return json.loads(content)
+        except json.JSONDecodeError:
+            # Fallback if model didn't return pure JSON
+            return {"raw_content": content, "error": "json_parse_error"}
+    except Exception as e:
+        print(f"AI API Error: {e}")
+        # Mock Fallback
+        return None
+
+# --- Routes ---
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/init', methods=['POST'])
+def init_data():
+    with app.app_context():
+        init_db()
+    return jsonify({"status": "initialized"})
+
+@app.route('/api/analyze', methods=['POST'])
+def analyze_ticket():
+    content = request.json.get('content', '')
+    if not content:
+        return jsonify({"error": "No content"}), 400
+    
+    system_prompt = """
+    You are a Customer Support AI Analyst. Analyze the following customer message.
+    Return a JSON object with:
+    - "sentiment": "Positive", "Neutral", "Negative" or "Urgent"
+    - "intent": The user's main goal (e.g., Refund, Tech Support, Inquiry)
+    - "priority": "Low", "Medium", "High", "Critical"
+    - "suggested_reply": A polite, professional, and helpful draft response (in Chinese).
+    - "keywords": A list of 3-5 keywords.
+    """
+    
+    ai_result = call_ai_model(system_prompt, content)
+    
+    # Fallback if AI fails
+    if not ai_result or 'error' in ai_result:
+        ai_result = {
+            "sentiment": "Neutral (Mock)",
+            "intent": "Unknown",
+            "priority": "Medium",
+            "suggested_reply": "感谢您的反馈，人工客服稍后会介入处理。",
+            "keywords": ["fallback"]
+        }
+    
+    # Save to DB
+    db = get_db()
+    db.execute('INSERT INTO tickets (content, sentiment, intent, priority, status) VALUES (?, ?, ?, ?, ?)',
+               (content, ai_result.get('sentiment'), ai_result.get('intent'), ai_result.get('priority'), 'analyzed'))
+    db.commit()
+    
+    return jsonify(ai_result)
+
+@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
+    
+    try:
+        # Read file content
+        content = file.read()
+        # Try to decode as UTF-8
+        try:
+            text_content = content.decode('utf-8')
+            return jsonify({"content": text_content, "filename": file.filename})
+        except UnicodeDecodeError:
+            return jsonify({"error": "Binary or non-UTF-8 file detected. Please upload a text file."}), 400
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/stats', methods=['GET'])
+def get_stats():
+    db = get_db()
+    tickets = db.execute('SELECT * FROM tickets ORDER BY created_at DESC LIMIT 50').fetchall()
+    solutions = db.execute('SELECT * FROM solutions').fetchall()
+    
+    # Calculate stats
+    sentiment_counts = {}
+    intent_counts = {}
+    
+    for t in tickets:
+        s = t['sentiment'] or 'Unknown'
+        i = t['intent'] or 'Other'
+        sentiment_counts[s] = sentiment_counts.get(s, 0) + 1
+        intent_counts[i] = intent_counts.get(i, 0) + 1
+        
+    return jsonify({
+        "total_tickets": len(tickets),
+        "total_solutions": len(solutions),
+        "sentiment_dist": [{"name": k, "value": v} for k, v in sentiment_counts.items()],
+        "intent_dist": [{"name": k, "value": v} for k, v in intent_counts.items()],
+        "recent_tickets": [dict(t) for t in tickets[:5]]
+    })
+
+@app.route('/api/simulate', methods=['POST'])
+def simulate_chat():
+    # Roleplay: User acts as Agent, AI acts as Customer
+    history = request.json.get('history', []) # List of {role, content}
+    scenario = request.json.get('scenario', 'refund_dispute')
+    
+    system_prompt = f"""
+    You are roleplaying as a CUSTOMER in a support chat. 
+    Scenario: {scenario}.
+    Your goal is to test the support agent. Be realistic. 
+    If the agent helps you, thank them. If they are rude or unhelpful, get angry.
+    Return JSON: {{"reply": "Your response as customer", "satisfaction_score": 1-10 (integer)}}
+    """
+    
+    last_msg = history[-1]['content'] if history else "Start"
+    
+    ai_result = call_ai_model(system_prompt, last_msg)
+    
+    if not ai_result:
+        ai_result = {
+            "reply": "Wait, I need to check (Simulated Delay)...",
+            "satisfaction_score": 5
+        }
+        
+    return jsonify(ai_result)
+
+@app.route('/api/solutions', methods=['GET', 'POST'])
+def manage_solutions():
+    db = get_db()
+    if request.method == 'POST':
+        data = request.json
+        db.execute('INSERT INTO solutions (title, content, tags) VALUES (?, ?, ?)',
+                   (data['title'], data['content'], data['tags']))
+        db.commit()
+        return jsonify({"status": "success"})
+    else:
+        rows = db.execute('SELECT * FROM solutions ORDER BY usage_count DESC').fetchall()
+        return jsonify([dict(r) for r in rows])
+
+if __name__ == '__main__':
+    with app.app_context():
+        init_db()
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

@@ -0,0 +1,5 @@
+Flask==3.0.0
+flask-cors==4.0.0
+requests==2.31.0
+gunicorn==21.2.0
+python-dotenv==1.0.0

templates/index.html

@@ -0,0 +1,425 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Support Pilot - 智能客服领航员</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>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        body { background-color: #f3f4f6; color: #1f2937; font-family: 'Inter', sans-serif; }
+        .card { background: white; border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
+        .btn-primary { background-color: #2563eb; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; transition: background-color 0.2s; }
+        .btn-primary:hover { background-color: #1d4ed8; }
+        .tab-active { border-bottom: 2px solid #2563eb; color: #2563eb; font-weight: 600; }
+        .tab-inactive { color: #6b7280; }
+        .tab-inactive:hover { color: #374151; }
+        /* Loader */
+        .loader { border: 3px solid #f3f3f3; border-radius: 50%; border-top: 3px solid #3498db; width: 20px; height: 20px; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; display: inline-block; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+    </style>
+</head>
+<body>
+    <div id="app" class="min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="bg-white shadow-sm z-10">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex justify-between h-16">
+                    <div class="flex items-center">
+                        <i class="fa-solid fa-headset text-blue-600 text-2xl mr-3"></i>
+                        <h1 class="text-xl font-bold text-gray-900">Support Pilot <span class="text-xs text-gray-500 font-normal ml-2">v1.0</span></h1>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <nav class="flex space-x-4">
+                            <button @click="currentTab = 'dashboard'" :class="['px-3 py-2 text-sm font-medium', currentTab === 'dashboard' ? 'tab-active' : 'tab-inactive']">仪表盘</button>
+                            <button @click="currentTab = 'analysis'" :class="['px-3 py-2 text-sm font-medium', currentTab === 'analysis' ? 'tab-active' : 'tab-inactive']">工单分析</button>
+                            <button @click="currentTab = 'training'" :class="['px-3 py-2 text-sm font-medium', currentTab === 'training' ? 'tab-active' : 'tab-inactive']">模拟演练</button>
+                            <button @click="currentTab = 'knowledge'" :class="['px-3 py-2 text-sm font-medium', currentTab === 'knowledge' ? 'tab-active' : 'tab-inactive']">知识库</button>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            
+            <!-- Dashboard View -->
+            <div v-if="currentTab === 'dashboard'" class="space-y-6">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="card flex items-center justify-between">
+                        <div>
+                            <p class="text-sm font-medium text-gray-500">今日工单</p>
+                            <p class="text-2xl font-bold text-gray-900">${ stats.total_tickets || 0 }</p>
+                        </div>
+                        <div class="p-3 bg-blue-100 rounded-full text-blue-600"><i class="fa-solid fa-ticket"></i></div>
+                    </div>
+                    <div class="card flex items-center justify-between">
+                        <div>
+                            <p class="text-sm font-medium text-gray-500">知识库条目</p>
+                            <p class="text-2xl font-bold text-gray-900">${ stats.total_solutions || 0 }</p>
+                        </div>
+                        <div class="p-3 bg-green-100 rounded-full text-green-600"><i class="fa-solid fa-book"></i></div>
+                    </div>
+                    <div class="card flex items-center justify-between">
+                        <div>
+                            <p class="text-sm font-medium text-gray-500">平均满意度</p>
+                            <p class="text-2xl font-bold text-gray-900">8.9</p>
+                        </div>
+                        <div class="p-3 bg-yellow-100 rounded-full text-yellow-600"><i class="fa-solid fa-star"></i></div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="card">
+                        <h3 class="text-lg font-medium text-gray-900 mb-4">情绪分布</h3>
+                        <div id="sentimentChart" style="height: 300px;"></div>
+                    </div>
+                    <div class="card">
+                        <h3 class="text-lg font-medium text-gray-900 mb-4">意图分类</h3>
+                        <div id="intentChart" style="height: 300px;"></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Analysis View -->
+            <div v-if="currentTab === 'analysis'" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div class="card">
+                    <h3 class="text-lg font-medium text-gray-900 mb-4">工单输入</h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">客户消息 / 日志内容</label>
+                            <textarea v-model="analysisInput" rows="8" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-3 border" placeholder="在此粘贴客户投诉或咨询内容..."></textarea>
+                        </div>
+                        <div class="flex space-x-3">
+                            <button @click="analyzeTicket" :disabled="isAnalyzing" class="btn-primary w-full flex justify-center items-center">
+                                <span v-if="isAnalyzing" class="loader mr-2"></span>
+                                ${ isAnalyzing ? 'AI 分析中...' : '开始分析' }
+                            </button>
+                            <button @click="triggerUpload" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"><i class="fa-solid fa-upload mr-1"></i> 上传日志</button>
+                            <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden">
+                            <button @click="fillDemoData" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">示例数据</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card bg-gray-50 border border-gray-200">
+                    <h3 class="text-lg font-medium text-gray-900 mb-4">AI 分析结果</h3>
+                    <div v-if="analysisResult" class="space-y-4">
+                        <div class="flex space-x-4">
+                            <div class="flex-1">
+                                <span class="text-xs font-semibold text-gray-500 uppercase">情绪</span>
+                                <div class="mt-1 flex items-center">
+                                    <span :class="getSentimentColor(analysisResult.sentiment)" class="px-2 py-1 rounded text-sm font-bold">
+                                        ${ analysisResult.sentiment }
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="flex-1">
+                                <span class="text-xs font-semibold text-gray-500 uppercase">意图</span>
+                                <p class="mt-1 text-sm font-medium text-gray-900">${ analysisResult.intent }</p>
+                            </div>
+                            <div class="flex-1">
+                                <span class="text-xs font-semibold text-gray-500 uppercase">优先级</span>
+                                <p class="mt-1 text-sm font-medium text-red-600">${ analysisResult.priority }</p>
+                            </div>
+                        </div>
+
+                        <div>
+                            <span class="text-xs font-semibold text-gray-500 uppercase">建议回复</span>
+                            <div class="mt-2 p-3 bg-white border border-blue-100 rounded-md shadow-sm">
+                                <p class="text-sm text-gray-700 whitespace-pre-wrap">${ analysisResult.suggested_reply }</p>
+                                <div class="mt-2 flex justify-end">
+                                    <button class="text-xs text-blue-600 hover:text-blue-800" @click="copyToClipboard(analysisResult.suggested_reply)">复制回复</button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div>
+                            <span class="text-xs font-semibold text-gray-500 uppercase">关键词</span>
+                            <div class="mt-2 flex flex-wrap gap-2">
+                                <span v-for="tag in analysisResult.keywords" :key="tag" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                                    ${ tag }
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="h-64 flex items-center justify-center text-gray-400">
+                        <div class="text-center">
+                            <i class="fa-solid fa-robot text-4xl mb-2"></i>
+                            <p>等待分析...</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Training View -->
+            <div v-if="currentTab === 'training'" class="card h-[600px] flex flex-col">
+                <div class="flex justify-between items-center border-b pb-4 mb-4">
+                    <h3 class="text-lg font-medium text-gray-900">模拟演练室</h3>
+                    <div class="flex items-center space-x-2">
+                        <select v-model="selectedScenario" class="text-sm border-gray-300 rounded-md shadow-sm">
+                            <option value="refund_dispute">场景：退款纠纷</option>
+                            <option value="angry_customer">场景：愤怒客户</option>
+                            <option value="product_inquiry">场景：产品咨询</option>
+                        </select>
+                        <button @click="resetSimulation" class="text-sm text-red-600 hover:text-red-800">重置</button>
+                    </div>
+                </div>
+                
+                <div class="flex-1 overflow-y-auto space-y-4 p-4 bg-gray-50 rounded-md mb-4" id="chatContainer">
+                    <div v-for="(msg, index) in chatHistory" :key="index" :class="['flex', msg.role === 'user' ? 'justify-end' : 'justify-start']">
+                        <div :class="['max-w-[70%] rounded-lg px-4 py-2', msg.role === 'user' ? 'bg-blue-600 text-white' : 'bg-white border text-gray-800']">
+                            <p class="text-sm">${ msg.content }</p>
+                            <p v-if="msg.role === 'system'" class="text-xs text-gray-400 mt-1">AI 客户 (满意度: ${ msg.satisfaction || '-' })</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex space-x-2">
+                    <input v-model="chatInput" @keyup.enter="sendChatMessage" type="text" class="flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2 border" placeholder="输入您的回复...">
+                    <button @click="sendChatMessage" class="btn-primary">发送</button>
+                </div>
+            </div>
+
+            <!-- Knowledge Base -->
+            <div v-if="currentTab === 'knowledge'" class="space-y-6">
+                <div class="flex justify-between items-center">
+                    <h3 class="text-lg font-medium text-gray-900">常用话术与解决方案</h3>
+                    <button class="btn-primary text-sm"><i class="fa-solid fa-plus mr-1"></i> 新增条目</button>
+                </div>
+                <div class="bg-white shadow overflow-hidden sm:rounded-md">
+                    <ul class="divide-y divide-gray-200">
+                        <li v-for="sol in solutions" :key="sol.id">
+                            <div class="px-4 py-4 sm:px-6 hover:bg-gray-50">
+                                <div class="flex items-center justify-between">
+                                    <p class="text-sm font-medium text-blue-600 truncate">${ sol.title }</p>
+                                    <div class="ml-2 flex-shrink-0 flex">
+                                        <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                            使用次数: ${ sol.usage_count }
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="mt-2 sm:flex sm:justify-between">
+                                    <div class="sm:flex">
+                                        <p class="flex items-center text-sm text-gray-500">
+                                            ${ sol.content }
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+        </main>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted, nextTick } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const currentTab = ref('analysis');
+                const analysisInput = ref('');
+                const analysisResult = ref(null);
+                const isAnalyzing = ref(false);
+                const stats = ref({});
+                const fileInput = ref(null);
+                
+                // Chat Sim
+                const chatInput = ref('');
+                const chatHistory = ref([{ role: 'system', content: '您好，我买的商品到现在还没发货，怎么回事？' }]);
+                const selectedScenario = ref('refund_dispute');
+                
+                // KB
+                const solutions = ref([]);
+
+                // API Helper
+                const fetchStats = async () => {
+                    try {
+                        const res = await fetch('/api/stats');
+                        const data = await res.json();
+                        stats.value = data;
+                        renderCharts(data);
+                    } catch (e) { console.error(e); }
+                };
+
+                const fetchSolutions = async () => {
+                    try {
+                        const res = await fetch('/api/solutions');
+                        solutions.value = await res.json();
+                    } catch (e) { console.error(e); }
+                };
+
+                // Analysis
+                const analyzeTicket = async () => {
+                    if (!analysisInput.value) return;
+                    isAnalyzing.value = true;
+                    try {
+                        const res = await fetch('/api/analyze', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({ content: analysisInput.value })
+                        });
+                        analysisResult.value = await res.json();
+                        fetchStats(); // Refresh stats
+                    } catch (e) {
+                        alert('分析失败，请重试');
+                    } finally {
+                        isAnalyzing.value = false;
+                    }
+                };
+
+                const fillDemoData = () => {
+                    analysisInput.value = "我真的很生气！上周买的吸尘器（订单号：12345678）到现在还没发货。你们承诺是24小时发货的。如果是缺货请告诉我，不要让我干等。我要投诉你们的服务态度！";
+                };
+
+                const triggerUpload = () => {
+                    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 data = await res.json();
+                        
+                        if (res.ok) {
+                            analysisInput.value = data.content;
+                        } else {
+                            alert('上传失败: ' + data.error);
+                        }
+                    } catch (e) {
+                        alert('上传出错');
+                        console.error(e);
+                    }
+                    // Reset input
+                    event.target.value = '';
+                };
+
+                const getSentimentColor = (s) => {
+                    if (s.includes('Positive')) return 'bg-green-100 text-green-800';
+                    if (s.includes('Negative') || s.includes('Urgent')) return 'bg-red-100 text-red-800';
+                    return 'bg-gray-100 text-gray-800';
+                };
+
+                // Chat Sim
+                const sendChatMessage = async () => {
+                    if (!chatInput.value) return;
+                    // User msg
+                    chatHistory.value.push({ role: 'user', content: chatInput.value });
+                    const userMsg = chatInput.value;
+                    chatInput.value = '';
+                    
+                    // Scroll
+                    await nextTick();
+                    const container = document.getElementById('chatContainer');
+                    if (container) container.scrollTop = container.scrollHeight;
+
+                    // AI Reply
+                    try {
+                        const res = await fetch('/api/simulate', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({
+                                history: chatHistory.value,
+                                scenario: selectedScenario.value
+                            })
+                        });
+                        const data = await res.json();
+                        chatHistory.value.push({
+                            role: 'system',
+                            content: data.reply,
+                            satisfaction: data.satisfaction_score
+                        });
+                        await nextTick();
+                        container.scrollTop = container.scrollHeight;
+                    } catch (e) {
+                        chatHistory.value.push({ role: 'system', content: 'Simulation Error.' });
+                    }
+                };
+
+                const resetSimulation = () => {
+                    chatHistory.value = [{ role: 'system', content: '您好，这里是客服中心，请问有什么可以帮您？（模拟新场景）' }];
+                };
+
+                // Charts
+                const renderCharts = (data) => {
+                    if (currentTab.value !== 'dashboard') return;
+                    
+                    nextTick(() => {
+                        const sChart = echarts.init(document.getElementById('sentimentChart'));
+                        sChart.setOption({
+                            tooltip: { trigger: 'item' },
+                            legend: { top: '5%', left: 'center' },
+                            series: [{
+                                name: 'Sentiment',
+                                type: 'pie',
+                                radius: ['40%', '70%'],
+                                data: data.sentiment_dist
+                            }]
+                        });
+
+                        const iChart = echarts.init(document.getElementById('intentChart'));
+                        iChart.setOption({
+                            tooltip: { trigger: 'item' },
+                            xAxis: { type: 'category', data: data.intent_dist.map(i => i.name) },
+                            yAxis: { type: 'value' },
+                            series: [{
+                                data: data.intent_dist.map(i => i.value),
+                                type: 'bar',
+                                itemStyle: { color: '#3b82f6' }
+                            }]
+                        });
+                    });
+                };
+
+                // Watch tab change to render charts
+                Vue.watch(currentTab, (newTab) => {
+                    if (newTab === 'dashboard') {
+                        fetchStats();
+                    }
+                });
+
+                onMounted(() => {
+                    fetchStats();
+                    fetchSolutions();
+                });
+
+                return {
+                    currentTab,
+                    analysisInput,
+                    analysisResult,
+                    isAnalyzing,
+                    stats,
+                    analyzeTicket,
+                    fillDemoData,
+                    triggerUpload,
+                    handleFileUpload,
+                    fileInput,
+                    getSentimentColor,
+                    chatInput,
+                    chatHistory,
+                    selectedScenario,
+                    sendChatMessage,
+                    resetSimulation,
+                    solutions
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>