初始化并升级：错误处理、上传支持、中文优化

Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Create a non-root user
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -1,10 +1,50 @@
----
-title: Cloud Cost Optimizer
-emoji: 📉
-colorFrom: purple
-colorTo: gray
+title: 云成本精算师
+emoji: 💰
+colorFrom: blue
+colorTo: green
 sdk: docker
 pinned: false
+short_description: 模拟AWS账单分析、异常检测与成本优化建议
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 云成本精算师 (Cloud Cost Optimizer)
+
+这是一个模拟的云成本分析与优化平台 (FinOps Tool)，旨在展示如何通过数据分析和算法来降低云基础设施的支出。
+
+## 核心功能
+
+1.  **全景成本仪表盘**：实时查看总支出、月环比增长 (MoM) 及下月预测。
+2.  **多维趋势分析**：基于 ECharts 的交互式堆叠柱状图，按服务拆分日成本。
+3.  **智能异常检测**：自动识别超出 3-Sigma 阈值的异常消费突增 (Anomaly Detection)。
+4.  **优化建议引擎**：模拟生成 RI (预留实例) 购买建议、闲置资源清理建议。
+
+## 技术栈
+
+- **后端**: Python Flask, Pandas (数据处理), NumPy (统计计算)
+- **前端**: Vue 3, Tailwind CSS, ECharts 5
+- **数据**: 使用 Faker 和自定义算法生成高保真的模拟 AWS 账单数据 (EC2, RDS, S3, Lambda 等)
+
+## 如何运行
+
+### 本地运行
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+访问: http://localhost:7860
+
+### Docker 运行
+
+```bash
+docker build -t cloud-cost-optimizer .
+docker run -p 7860:7860 cloud-cost-optimizer
+```
+
+## 商业应用场景
+
+该项目演示了 FinOps SaaS 产品的核心逻辑，可扩展用于：
+- 多云账单聚合 (AWS/Azure/GCP)
+- 自动化成本异常告警
+- 资源使用率分析与 Rightsizing 建议

app.py

@@ -0,0 +1,286 @@
+import os
+import json
+import random
+import datetime
+import pandas as pd
+import numpy as np
+from flask import Flask, render_template, jsonify, request
+from faker import Faker
+
+app = Flask(__name__)
+fake = Faker()
+
+# Configuration
+app.config['JSON_AS_ASCII'] = False
+app.config['MAX_CONTENT_LENGTH'] = 512 * 1024 * 1024
+app.jinja_env.variable_start_string = "[["
+app.jinja_env.variable_end_string = "]]"
+
+# Global Cache for simulated data
+DATA_CACHE = None
+
+class CostSimulator:
+    def __init__(self):
+        self.services = ['Amazon EC2', 'Amazon RDS', 'Amazon S3', 'AWS Lambda', 'Amazon CloudFront']
+        self.regions = ['us-east-1', 'us-west-2', 'eu-central-1', 'ap-northeast-1']
+        self.instance_types = ['t3.micro', 'm5.large', 'c5.xlarge', 'r5.2xlarge']
+        
+    def generate_data(self, days=90):
+        """Generate simulated billing data for the last N days."""
+        data = []
+        end_date = datetime.date.today()
+        start_date = end_date - datetime.timedelta(days=days)
+        
+        # Base resources (Long running)
+        resources = []
+        for _ in range(20):
+            resources.append({
+                'id': fake.uuid4(),
+                'service': random.choice(self.services),
+                'region': random.choice(self.regions),
+                'name': fake.hostname(),
+                'tag_env': random.choice(['Production', 'Staging', 'Dev']),
+                'base_cost': random.uniform(0.5, 50.0)  # Daily cost
+            })
+            
+        current_date = start_date
+        while current_date <= end_date:
+            # Add base resource costs
+            for res in resources:
+                daily_cost = res['base_cost'] * random.uniform(0.9, 1.1)
+                
+                # Simulate a cost spike in the last 3 days for one specific resource
+                if current_date > end_date - datetime.timedelta(days=3) and res['service'] == 'AWS Lambda':
+                    daily_cost *= random.uniform(5.0, 10.0) # Anomaly!
+                    
+                data.append({
+                    'date': current_date.strftime('%Y-%m-%d'),
+                    'resource_id': res['id'],
+                    'resource_name': res['name'],
+                    'service': res['service'],
+                    'region': res['region'],
+                    'environment': res['tag_env'],
+                    'cost': round(daily_cost, 4),
+                    'usage_amount': round(random.uniform(10, 1000), 2)
+                })
+            
+            # Add some random transient costs (Spot instances, data transfer)
+            for _ in range(random.randint(5, 15)):
+                svc = random.choice(self.services)
+                data.append({
+                    'date': current_date.strftime('%Y-%m-%d'),
+                    'resource_id': fake.uuid4(),
+                    'resource_name': 'Transient-' + fake.word(),
+                    'service': svc,
+                    'region': random.choice(self.regions),
+                    'environment': 'Dev',
+                    'cost': round(random.uniform(0.1, 5.0), 4),
+                    'usage_amount': round(random.uniform(1, 100), 2)
+                })
+                
+            current_date += datetime.timedelta(days=1)
+            
+        return pd.DataFrame(data)
+
+def get_data(refresh=False):
+    global DATA_CACHE
+    if DATA_CACHE is None or refresh:
+        sim = CostSimulator()
+        DATA_CACHE = sim.generate_data()
+    return DATA_CACHE
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/summary')
+def api_summary():
+    df = get_data()
+    
+    # Total Cost
+    total_cost = df['cost'].sum()
+    
+    # This Month vs Last Month (Simulated logic using 30 day windows)
+    today = datetime.date.today()
+    last_30_start = (today - datetime.timedelta(days=30)).strftime('%Y-%m-%d')
+    prev_30_start = (today - datetime.timedelta(days=60)).strftime('%Y-%m-%d')
+    
+    current_cost = df[df['date'] >= last_30_start]['cost'].sum()
+    prev_cost = df[(df['date'] >= prev_30_start) & (df['date'] < last_30_start)]['cost'].sum()
+    
+    mom_change = 0
+    if prev_cost > 0:
+        mom_change = ((current_cost - prev_cost) / prev_cost) * 100
+        
+    return jsonify({
+        'total_cost': round(total_cost, 2),
+        'current_month_cost': round(current_cost, 2),
+        'mom_change': round(mom_change, 2),
+        'forecast': round(current_cost * 1.05, 2) # Simple forecast
+    })
+
+@app.route('/api/trend')
+def api_trend():
+    df = get_data()
+    # Group by date and service
+    trend = df.groupby(['date', 'service'])['cost'].sum().reset_index()
+    
+    # Pivot for ECharts
+    pivot = trend.pivot(index='date', columns='service', values='cost').fillna(0)
+    
+    dates = pivot.index.tolist()
+    series = []
+    for column in pivot.columns:
+        series.append({
+            'name': column,
+            'type': 'bar',
+            'stack': 'total',
+            'data': pivot[column].round(2).tolist()
+        })
+        
+    return jsonify({
+        'dates': dates,
+        'series': series
+    })
+
+@app.route('/api/anomalies')
+def api_anomalies():
+    df = get_data()
+    # Simple anomaly detection: Daily cost > Mean + 3*STD
+    daily_cost = df.groupby(['date', 'service'])['cost'].sum().reset_index()
+    anomalies = []
+    
+    for service in df['service'].unique():
+        svc_data = daily_cost[daily_cost['service'] == service]
+        mean = svc_data['cost'].mean()
+        std = svc_data['cost'].std()
+        threshold = mean + 3 * std
+        
+        outliers = svc_data[svc_data['cost'] > threshold]
+        for _, row in outliers.iterrows():
+            anomalies.append({
+                'date': row['date'],
+                'service': service,
+                'cost': round(row['cost'], 2),
+                'threshold': round(threshold, 2),
+                'severity': 'Critical' if row['cost'] > mean * 2 else 'High'
+            })
+            
+    return jsonify(sorted(anomalies, key=lambda x: x['date'], reverse=True))
+
+@app.route('/api/recommendations')
+def api_recommendations():
+    # Simulate logic: Find resources that are consistent but "expensive" -> Suggest RI
+    # Or find Dev resources running on weekends
+    
+    recommendations = [
+        {
+            'id': 1,
+            'title': '购买 EC2 预留实例 (RI)',
+            'description': '检测到 5 台 m5.large 实例长期运行，购买 1 年期全预付 RI 可节省 35%。',
+            'potential_savings': 450.00,
+            'effort': 'Medium',
+            'category': 'Rate Optimization'
+        },
+        {
+            'id': 2,
+            'title': '清理未关联的弹性 IP',
+            'description': '发现 3 个 EIP 未绑定到运行中的实例。',
+            'potential_savings': 15.00,
+            'effort': 'Low',
+            'category': 'Waste'
+        },
+        {
+            'id': 3,
+            'title': 'S3 生命周期策略优化',
+            'description': '2TB 的日志数据超过 90 天未访问，建议归档至 Glacier。',
+            'potential_savings': 120.50,
+            'effort': 'Medium',
+            'category': 'Storage'
+        },
+        {
+            'id': 4,
+            'title': 'RDS 实例空闲检测',
+            'description': 'db-staging-01 在过去 7 天 CPU 使用率低于 2%。',
+            'potential_savings': 85.20,
+            'effort': 'High',
+            'category': 'Rightsizing'
+        }
+    ]
+    return jsonify(recommendations)
+
+@app.route('/api/breakdown')
+def api_breakdown():
+    df = get_data()
+    # Breakdown by Service
+    by_service = df.groupby('service')['cost'].sum().sort_values(ascending=False)
+    # Breakdown by Environment
+    by_env = df.groupby('environment')['cost'].sum().sort_values(ascending=False)
+    
+    return jsonify({
+        'service_breakdown': [{'name': k, 'value': round(v, 2)} for k, v in by_service.items()],
+        'env_breakdown': [{'name': k, 'value': round(v, 2)} for k, v in by_env.items()]
+    })
+
+def _ensure_schema(df: pd.DataFrame) -> pd.DataFrame:
+    required_cols = ['date', 'resource_id', 'resource_name', 'service', 'region', 'environment', 'cost', 'usage_amount']
+    for col in required_cols:
+        if col not in df.columns:
+            df[col] = None
+    df['date'] = df['date'].fillna(datetime.date.today().strftime('%Y-%m-%d')).astype(str)
+    df['resource_id'] = df['resource_id'].fillna(df['resource_name'].fillna('').astype(str) + '-' + pd.Series(range(len(df))).astype(str)).astype(str)
+    df['resource_name'] = df['resource_name'].fillna('Imported-' + pd.Series(range(len(df))).astype(str)).astype(str)
+    df['service'] = df['service'].fillna('Unknown Service').astype(str)
+    df['region'] = df['region'].fillna('us-east-1').astype(str)
+    df['environment'] = df['environment'].fillna('Dev').astype(str)
+    df['cost'] = pd.to_numeric(df['cost'], errors='coerce').fillna(0.0)
+    df['usage_amount'] = pd.to_numeric(df['usage_amount'], errors='coerce').fillna(0.0)
+    return df[required_cols]
+
+@app.route('/api/upload', methods=['POST'])
+def api_upload():
+    global DATA_CACHE
+    file = request.files.get('file')
+    if not file:
+        return jsonify({'status': 'error', 'message': '未收到文件'}), 400
+    filename = file.filename or 'uploaded'
+    try:
+        if filename.lower().endswith('.csv'):
+            chunks = pd.read_csv(file.stream, chunksize=100000, encoding='utf-8', on_bad_lines='skip')
+            df = pd.concat(list(chunks), ignore_index=True)
+        elif filename.lower().endswith('.json'):
+            payload = json.load(file.stream)
+            df = pd.DataFrame(payload if isinstance(payload, list) else [payload])
+        else:
+            tmp_path = os.path.join('/tmp', filename)
+            file.save(tmp_path)
+            return jsonify({'status': 'success', 'message': '二进制文件已保存', 'path': tmp_path})
+        df = _ensure_schema(df)
+        DATA_CACHE = df
+        return jsonify({'status': 'success', 'rows': int(len(df))})
+    except Exception as e:
+        return jsonify({'status': 'error', 'message': f'导入失败: {str(e)}'}), 500
+
+def _is_api_request():
+    return request.path.startswith('/api/')
+
+@app.errorhandler(404)
+def handle_404(e):
+    if _is_api_request():
+        return jsonify({'status': 'error', 'message': '接口不存在'}), 404
+    return ('页面不存在 (404)', 404)
+
+@app.errorhandler(500)
+def handle_500(e):
+    if _is_api_request():
+        return jsonify({'status': 'error', 'message': '服务器内部错误'}), 500
+    return ('内部服务器错误，请稍后再试', 500)
+
+@app.route('/api/refresh', methods=['POST'])
+def api_refresh():
+    get_data(refresh=True)
+    return jsonify({'status': 'success'})
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port)

requirements.txt

@@ -0,0 +1,5 @@
+Flask==3.0.0
+pandas==2.1.4
+numpy==1.26.3
+gunicorn==21.2.0
+faker==22.5.1

templates/index.html

@@ -0,0 +1,339 @@
+<!DOCTYPE html>
+<html lang="zh-CN" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>云成本精算师 | Cloud Cost Optimizer</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>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                        secondary: '#10B981',
+                        dark: '#0F172A',
+                        card: '#1E293B'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        [v-cloak] { display: none; }
+        body { background-color: #0F172A; color: #E2E8F0; }
+        .chart-container { height: 350px; width: 100%; }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: #1E293B; }
+        ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #64748B; }
+    </style>
+</head>
+<body class="antialiased min-h-screen">
+    <div id="app" v-cloak class="p-6 max-w-[1600px] mx-auto">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-8">
+            <div>
+                <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-teal-400">
+                    云成本精算师
+                </h1>
+                <p class="text-slate-400 mt-1 text-sm">FinOps 智能分析与优化平台</p>
+            </div>
+            <div class="flex gap-4">
+                <button @click="refreshData" :disabled="loading" 
+                    class="flex items-center gap-2 px-4 py-2 bg-primary hover:bg-blue-600 rounded-lg transition-colors disabled:opacity-50">
+                    <span v-if="loading" class="animate-spin">↻</span>
+                    <span v-else>↻</span>
+                    <span>生成新模拟数据</span>
+                </button>
+                <label class="flex items-center gap-2 px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded-lg cursor-pointer">
+                    <input id="fileInput" type="file" class="hidden" @change="onFileSelected">
+                    <span>选择账单文件</span>
+                </label>
+                <button @click="uploadFile" :disabled="!selectedFile || loading"
+                    class="flex items-center gap-2 px-4 py-2 bg-secondary hover:bg-emerald-600 rounded-lg transition-colors disabled:opacity-50">
+                    <span>上传账单</span>
+                </button>
+                <span class="text-slate-400 text-sm self-center" v-if="uploadStatus">[[ uploadStatus ]]</span>
+            </div>
+        </header>
+
+        <!-- KPI Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            <div class="bg-card p-6 rounded-xl border border-slate-700/50 shadow-lg">
+                <div class="text-slate-400 text-sm mb-2">总支出 (近90天)</div>
+                <div class="text-3xl font-bold text-white">$[[ summary.total_cost ]]</div>
+                <div class="mt-2 text-xs text-slate-500">模拟 AWS 账单数据</div>
+            </div>
+            <div class="bg-card p-6 rounded-xl border border-slate-700/50 shadow-lg">
+                <div class="text-slate-400 text-sm mb-2">本月支出 (MTD)</div>
+                <div class="text-3xl font-bold text-white">$[[ summary.current_month_cost ]]</div>
+                <div class="mt-2 text-xs flex items-center" :class="summary.mom_change > 0 ? 'text-red-400' : 'text-green-400'">
+                    <span v-if="summary.mom_change > 0">↑</span>
+                    <span v-else>↓</span>
+                    [[ Math.abs(summary.mom_change) ]]% 环比上月
+                </div>
+            </div>
+            <div class="bg-card p-6 rounded-xl border border-slate-700/50 shadow-lg">
+                <div class="text-slate-400 text-sm mb-2">下月预测</div>
+                <div class="text-3xl font-bold text-white">$[[ summary.forecast ]]</div>
+                <div class="mt-2 text-xs text-slate-500">基于线性趋势预测</div>
+            </div>
+            <div class="bg-card p-6 rounded-xl border border-slate-700/50 shadow-lg">
+                <div class="text-slate-400 text-sm mb-2">异常检测</div>
+                <div class="text-3xl font-bold" :class="anomalies.length > 0 ? 'text-red-500' : 'text-green-500'">
+                    [[ anomalies.length ]]
+                </div>
+                <div class="mt-2 text-xs text-slate-500">过去 90 天内的突增</div>
+            </div>
+        </div>
+
+        <!-- Charts Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+            <!-- Main Trend Chart -->
+            <div class="lg:col-span-2 bg-card p-6 rounded-xl border border-slate-700/50 shadow-lg">
+                <h3 class="text-lg font-semibold mb-4 text-white">日成本趋势</h3>
+                <div id="trendChart" class="chart-container"></div>
+            </div>
+            
+            <!-- Breakdown Chart -->
+            <div class="bg-card p-6 rounded-xl border border-slate-700/50 shadow-lg">
+                <h3 class="text-lg font-semibold mb-4 text-white">服务成本占比</h3>
+                <div id="pieChart" class="chart-container"></div>
+            </div>
+        </div>
+
+        <!-- Lower Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <!-- Anomalies List -->
+            <div class="bg-card p-6 rounded-xl border border-slate-700/50 shadow-lg flex flex-col h-full">
+                <h3 class="text-lg font-semibold mb-4 text-white flex items-center gap-2">
+                    <span class="w-2 h-2 rounded-full bg-red-500"></span>
+                    异常成本预警
+                </h3>
+                <div class="overflow-y-auto flex-1 max-h-[400px]">
+                    <table class="w-full text-left text-sm">
+                        <thead class="bg-slate-800/50 text-slate-400 sticky top-0">
+                            <tr>
+                                <th class="p-3">日期</th>
+                                <th class="p-3">服务</th>
+                                <th class="p-3 text-right">花费</th>
+                                <th class="p-3 text-right">阈值</th>
+                                <th class="p-3 text-center">级别</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-slate-700/50">
+                            <tr v-for="item in anomalies" :key="item.date + item.service" class="hover:bg-slate-700/20">
+                                <td class="p-3 text-slate-300">[[ item.date ]]</td>
+                                <td class="p-3 text-blue-400">[[ item.service ]]</td>
+                                <td class="p-3 text-right font-mono text-white">$[[ item.cost ]]</td>
+                                <td class="p-3 text-right font-mono text-slate-500">$[[ item.threshold ]]</td>
+                                <td class="p-3 text-center">
+                                    <span class="px-2 py-1 rounded text-xs font-bold" 
+                                        :class="item.severity === 'Critical' ? 'bg-red-500/20 text-red-400' : 'bg-orange-500/20 text-orange-400'">
+                                        [[ item.severity ]]
+                                    </span>
+                                </td>
+                            </tr>
+                            <tr v-if="anomalies.length === 0">
+                                <td colspan="5" class="p-8 text-center text-slate-500">无异常记录</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <!-- Recommendations -->
+            <div class="bg-card p-6 rounded-xl border border-slate-700/50 shadow-lg flex flex-col h-full">
+                <h3 class="text-lg font-semibold mb-4 text-white flex items-center gap-2">
+                    <span class="w-2 h-2 rounded-full bg-green-500"></span>
+                    优化建议
+                </h3>
+                <div class="space-y-4 overflow-y-auto flex-1 max-h-[400px]">
+                    <div v-for="rec in recommendations" :key="rec.id" 
+                        class="p-4 rounded-lg bg-slate-800/50 border border-slate-700 hover:border-primary/50 transition-all">
+                        <div class="flex justify-between items-start mb-2">
+                            <h4 class="font-semibold text-white">[[ rec.title ]]</h4>
+                            <span class="text-green-400 font-bold text-sm">节省 $[[ rec.potential_savings ]]/月</span>
+                        </div>
+                        <p class="text-slate-400 text-sm mb-3">[[ rec.description ]]</p>
+                        <div class="flex gap-2 text-xs">
+                            <span class="px-2 py-1 rounded bg-slate-700 text-slate-300">[[ rec.category ]]</span>
+                            <span class="px-2 py-1 rounded bg-slate-700 text-slate-300">难度: [[ rec.effort ]]</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted } = Vue;
+
+        createApp({
+            delimiters: ['[[', ']]'],
+            setup() {
+                const loading = ref(false);
+                const summary = ref({ total_cost: 0, current_month_cost: 0, mom_change: 0, forecast: 0 });
+                const anomalies = ref([]);
+                const recommendations = ref([]);
+                const selectedFile = ref(null);
+                const uploadStatus = ref('');
+                
+                let trendChart = null;
+                let pieChart = null;
+
+                const initCharts = () => {
+                    trendChart = echarts.init(document.getElementById('trendChart'));
+                    pieChart = echarts.init(document.getElementById('pieChart'));
+                    
+                    window.addEventListener('resize', () => {
+                        trendChart.resize();
+                        pieChart.resize();
+                    });
+                };
+
+                const fetchSummary = async () => {
+                    const res = await axios.get('/api/summary');
+                    summary.value = res.data;
+                };
+
+                const fetchTrend = async () => {
+                    const res = await axios.get('/api/trend');
+                    const option = {
+                        backgroundColor: 'transparent',
+                        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+                        legend: { data: res.data.series.map(s => s.name), textStyle: { color: '#94a3b8' }, bottom: 0 },
+                        grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
+                        xAxis: { 
+                            type: 'category', 
+                            data: res.data.dates,
+                            axisLine: { lineStyle: { color: '#475569' } },
+                            axisLabel: { color: '#94a3b8' }
+                        },
+                        yAxis: { 
+                            type: 'value',
+                            axisLine: { show: false },
+                            splitLine: { lineStyle: { color: '#334155' } },
+                            axisLabel: { color: '#94a3b8', formatter: '${value}' }
+                        },
+                        series: res.data.series
+                    };
+                    trendChart.setOption(option);
+                };
+
+                const fetchBreakdown = async () => {
+                    const res = await axios.get('/api/breakdown');
+                    const option = {
+                        backgroundColor: 'transparent',
+                        tooltip: { trigger: 'item', formatter: '{b}: ${c} ({d}%)' },
+                        legend: { orient: 'vertical', left: 'left', textStyle: { color: '#94a3b8' } },
+                        series: [
+                            {
+                                name: 'Cost',
+                                type: 'pie',
+                                radius: ['50%', '70%'],
+                                avoidLabelOverlap: false,
+                                itemStyle: { borderRadius: 10, borderColor: '#1E293B', borderWidth: 2 },
+                                label: { show: false },
+                                labelLine: { show: false },
+                                data: res.data.service_breakdown
+                            }
+                        ]
+                    };
+                    pieChart.setOption(option);
+                };
+
+                const fetchAnomalies = async () => {
+                    const res = await axios.get('/api/anomalies');
+                    anomalies.value = res.data;
+                };
+
+                const fetchRecommendations = async () => {
+                    const res = await axios.get('/api/recommendations');
+                    recommendations.value = res.data;
+                };
+
+                const loadAllData = async () => {
+                    loading.value = true;
+                    try {
+                        await Promise.all([
+                            fetchSummary(),
+                            fetchTrend(),
+                            fetchBreakdown(),
+                            fetchAnomalies(),
+                            fetchRecommendations()
+                        ]);
+                    } catch (e) {
+                        console.error("Error loading data", e);
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const refreshData = async () => {
+                    loading.value = true;
+                    try {
+                        await axios.post('/api/refresh');
+                        await loadAllData();
+                    } catch (e) {
+                        console.error("Error refreshing data", e);
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const onFileSelected = (e) => {
+                    selectedFile.value = e.target.files[0] || null;
+                    uploadStatus.value = selectedFile.value ? `已选择：${selectedFile.value.name}` : '';
+                };
+
+                const uploadFile = async () => {
+                    if (!selectedFile.value) return;
+                    loading.value = true;
+                    uploadStatus.value = '上传中...';
+                    try {
+                        const formData = new FormData();
+                        formData.append('file', selectedFile.value);
+                        const res = await axios.post('/api/upload', formData, {
+                            headers: { 'Content-Type': 'multipart/form-data' },
+                            maxContentLength: Infinity,
+                            maxBodyLength: Infinity
+                        });
+                        uploadStatus.value = res.data.status === 'success'
+                            ? `上传成功，行数：${res.data.rows || 0}`
+                            : `上传失败：${res.data.message || '未知错误'}`;
+                        await loadAllData();
+                    } catch (e) {
+                        uploadStatus.value = `上传失败：${e?.response?.data?.message || e.message}`;
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                onMounted(() => {
+                    initCharts();
+                    loadAllData();
+                });
+
+                return {
+                    loading,
+                    summary,
+                    anomalies,
+                    recommendations,
+                    refreshData,
+                    selectedFile,
+                    uploadStatus,
+                    onFileSelected,
+                    uploadFile
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>