Initial commit: Incident Postmortem Pro with 5-Whys, Timeline, and robust features

Dockerfile

@@ -0,0 +1,15 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create data directory
+RUN mkdir -p data && chmod 777 data
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,55 @@
+---
+title: 事故复盘大师
+emoji: 🚨
+colorFrom: red
+colorTo: slate
+sdk: docker
+app_port: 7860
+short_description: 专业的生产事故复盘与根因分析工具
+---
+
+# 事故复盘大师 (Incident Postmortem Pro)
+
+一个专业的生产事故复盘与根因分析工具，帮助技术团队将每一次故障转化为宝贵的经验资产。
+
+## ✨ 核心功能
+
+*   **事故管理**：记录事故级别（P0-P4）、发生时间、负责人。
+*   **交互式时间线 (Timeline)**：精确还原事故发生、响应、定位、修复的全过程。
+*   **5 Whys 根因分析**：内置 5 Whys 引导式思考模版，挖掘深层原因。
+*   **改进措施追踪 (Action Items)**：记录后续优化任务、负责人及状态。
+*   **Markdown 报告导出**：一键生成结构化的复盘报告，方便分享到 Wiki 或文档中心。
+*   **Tech/Dark UI**：专为开发者设计的深色模式界面。
+
+## 🚀 快速开始
+
+### Docker 部署
+
+```bash
+docker build -t incident-postmortem-pro .
+docker run -p 7860:7860 -v $(pwd)/data:/app/data incident-postmortem-pro
+```
+
+### 本地开发
+
+```bash
+pip install flask
+python app.py
+```
+
+访问 http://localhost:7860 即可使用。
+
+## 💡 使用场景
+
+*   **SRE/运维团队**：标准化事故复盘流程。
+*   **研发团队**：进行技术复盘和根因挖掘。
+*   **项目经理**：追踪事故后的改进措施落地。
+
+## 🛠️ 技术栈
+
+*   **Backend**: Flask (Python)
+*   **Frontend**: Vue 3 + Tailwind CSS (Single File Component)
+*   **Data**: JSON (Local Storage)
+
+---
+Made with ❤️ by Trae

app.py

@@ -0,0 +1,176 @@
+import os
+import json
+import uuid
+from flask import Flask, render_template, request, jsonify, send_from_directory
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB limit for safety
+
+# 配置
+DATA_DIR = os.path.join(os.path.dirname(__file__), 'data')
+DATA_FILE = os.path.join(DATA_DIR, 'postmortems.json')
+
+# 确保数据目录存在
+os.makedirs(DATA_DIR, exist_ok=True)
+
+def load_data():
+    if not os.path.exists(DATA_FILE):
+        # 初始化默认数据
+        default_data = [
+            {
+                "id": "demo-001",
+                "title": "生产环境数据库连接池耗尽导致服务不可用",
+                "date": "2023-10-24",
+                "severity": "P0",
+                "owner": "张三",
+                "created_at": "2023-10-24T10:00:00Z",
+                "summary": "在双十一预热活动期间，主数据库连接数突然飙升至 100%，导致订单服务无法连接数据库，所有下单请求失败。持续时间约 15 分钟。",
+                "impact": "造成约 5000 单交易失败，预估 GMV 损失 100 万。用户投诉激增。",
+                "timeline": [
+                    {"time": "20:00", "description": "流量开始激增，达到平时峰值的 3 倍", "type": "detection"},
+                    {"time": "20:05", "description": "监控系统报警，DB CPU 飙升至 90%", "type": "detection"},
+                    {"time": "20:08", "description": "DBA 介入排查，发现活动连接数打满", "type": "investigation"},
+                    {"time": "20:12", "description": "紧急扩容 Read Replica，并临时调大 Max Connections", "type": "fix"},
+                    {"time": "20:15", "description": "服务逐步恢复正常", "type": "verification"}
+                ],
+                "root_cause": {
+                    "whys": [
+                        "数据库连接数打满，拒绝新连接",
+                        "后端服务实例扩容后，每个实例的连接池配置未做相应调整",
+                        "微服务配置中心下发的连接池参数是静态的，未随实例数动态计算",
+                        "在进行压力测试时，只测试了单实例性能，未测试全链路大规模并发下的 DB 瓶颈",
+                        "缺乏对数据库总连接数的全局管控机制"
+                    ],
+                    "conclusion": "缺乏全局的数据库连接治理机制，且压测覆盖不全。"
+                },
+                "action_items": [
+                    {"task": "实施数据库连接代理 (Proxy) 层", "owner": "李四", "deadline": "2023-11-01", "status": "in_progress"},
+                    {"task": "优化全链路压测模型，包含 DB 极限场景", "owner": "王五", "deadline": "2023-11-15", "status": "pending"}
+                ]
+            },
+            {
+                "id": "demo-002",
+                "title": "支付回调接口验签逻辑缺陷",
+                "date": "2023-09-15",
+                "severity": "P2",
+                "owner": "赵六",
+                "created_at": "2023-09-15T14:00:00Z",
+                "summary": "收到用户反馈支付成功但订单状态未更新。排查发现部分特殊字符导致签名验证失败。",
+                "impact": "约 20 笔订单卡单，需人工补单。",
+                "timeline": [
+                    {"time": "14:00", "description": "客服收到用户反馈", "type": "detection"},
+                    {"time": "14:30", "description": "定位到日志中存在大量验签失败错误", "type": "investigation"},
+                    {"time": "15:00", "description": "修复验签逻辑中的字符编码处理问题", "type": "fix"}
+                ],
+                "root_cause": {
+                    "whys": [
+                        "签名验证失败",
+                        "第三方支付回调参数中包含特殊 Emoji 字符",
+                        "验签逻辑未正确处理 UTF-8 编码",
+                        "开发测试阶段未覆盖特殊字符场景",
+                        ""
+                    ],
+                    "conclusion": "编码规范执行不到位，测试用例缺失。"
+                },
+                "action_items": [
+                    {"task": "修复代码并补充单元测试", "owner": "赵六", "deadline": "2023-09-16", "status": "done"}
+                ]
+            }
+        ]
+        save_data(default_data)
+        return default_data
+    try:
+        with open(DATA_FILE, 'r', encoding='utf-8') as f:
+            return json.load(f)
+    except Exception:
+        return []
+
+def save_data(data):
+    with open(DATA_FILE, 'w', encoding='utf-8') as f:
+        json.dump(data, f, ensure_ascii=False, indent=2)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/postmortems', methods=['GET'])
+def get_postmortems():
+    data = load_data()
+    # 按最后修改时间或创建时间排序（���里简单按列表顺序倒序）
+    return jsonify(data[::-1])
+
+@app.route('/api/postmortems', methods=['POST'])
+def create_postmortem():
+    data = load_data()
+    new_item = request.json
+    
+    # 基础验证与默认值
+    if not new_item.get('id'):
+        new_item['id'] = str(uuid.uuid4())
+    
+    new_item['created_at'] = new_item.get('created_at', '')
+    new_item['updated_at'] = new_item.get('updated_at', '')
+    
+    data.append(new_item)
+    save_data(data)
+    return jsonify(new_item), 201
+
+@app.route('/api/postmortems/<item_id>', methods=['PUT'])
+def update_postmortem(item_id):
+    data = load_data()
+    updated_item = request.json
+    
+    for i, item in enumerate(data):
+        if item['id'] == item_id:
+            data[i] = updated_item
+            save_data(data)
+            return jsonify(updated_item)
+            
+    return jsonify({'error': 'Not found'}), 404
+
+@app.route('/api/postmortems/<item_id>', methods=['DELETE'])
+def delete_postmortem(item_id):
+    data = load_data()
+    data = [item for item in data if item['id'] != item_id]
+    save_data(data)
+    return jsonify({'success': True})
+
+@app.route('/api/export/<item_id>', methods=['GET'])
+def export_markdown(item_id):
+    data = load_data()
+    item = next((i for i in data if i['id'] == item_id), None)
+    if not item:
+        return "Not Found", 404
+        
+    # 生成 Markdown 内容
+    md = f"# 事故复盘: {item.get('title', '无标题')}\n\n"
+    md += f"**日期**: {item.get('date', '')} | **级别**: {item.get('severity', '')} | **负责人**: {item.get('owner', '')}\n\n"
+    
+    md += "## 1. 事故摘要 (Summary)\n"
+    md += f"{item.get('summary', '无')}\n\n"
+    
+    md += "## 2. 影响范围 (Impact)\n"
+    md += f"{item.get('impact', '无')}\n\n"
+    
+    md += "## 3. 时间线 (Timeline)\n"
+    for t in item.get('timeline', []):
+        md += f"- **{t.get('time', '')}**: {t.get('description', '')} ({t.get('type', '')})\n"
+    md += "\n"
+    
+    md += "## 4. 根因分析 (5 Whys)\n"
+    whys = item.get('root_cause', {}).get('whys', [])
+    for idx, why in enumerate(whys):
+        if why:
+            md += f"{idx+1}. Why? {why}\n"
+    md += f"\n**结论**: {item.get('root_cause', {}).get('conclusion', '')}\n\n"
+    
+    md += "## 5. 改进措施 (Action Items)\n"
+    md += "| 任务 | 负责人 | 截止日期 | 状态 |\n"
+    md += "| --- | --- | --- | --- |\n"
+    for action in item.get('action_items', []):
+        md += f"| {action.get('task', '')} | {action.get('owner', '')} | {action.get('deadline', '')} | {action.get('status', '')} |\n"
+        
+    return jsonify({'markdown': md})
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

@@ -0,0 +1 @@
+flask

templates/index.html

@@ -0,0 +1,534 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>事故复盘大师 (Incident Postmortem Pro)</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.2/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
+        .glass-panel {
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .glass-panel:hover {
+            border-color: rgba(59, 130, 246, 0.5);
+            background: rgba(30, 41, 59, 0.9);
+        }
+        .timeline-line {
+            position: absolute;
+            left: 15px;
+            top: 10px;
+            bottom: 0;
+            width: 2px;
+            background: #475569;
+            z-index: 0;
+        }
+        /* 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; }
+        
+        [v-cloak] { display: none; }
+    </style>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: {
+                            bg: '#0f172a',
+                            surface: '#1e293b',
+                            border: '#334155'
+                        },
+                        brand: {
+                            500: '#3b82f6',
+                            600: '#2563eb'
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-dark-bg text-gray-200 min-h-screen">
+    <div id="app" class="flex flex-col h-screen overflow-hidden" v-cloak>
+        <!-- Header -->
+        <header class="h-16 border-b border-dark-border bg-dark-surface flex items-center justify-between px-6 shrink-0 z-20 shadow-md">
+            <div class="flex items-center gap-3">
+                <div class="w-8 h-8 rounded bg-brand-600 flex items-center justify-center shadow-lg shadow-blue-500/30">
+                    <i class="fa-solid fa-file-medical-alt text-white"></i>
+                </div>
+                <h1 class="font-bold text-xl tracking-tight">Incident Postmortem Pro <span class="text-xs font-normal text-gray-400 ml-2 border border-gray-600 px-2 py-0.5 rounded-full">事故复盘大师</span></h1>
+            </div>
+            <div class="flex gap-4">
+                <button v-if="currentView === 'editor'" @click="saveCurrent(true)" class="text-sm text-gray-400 hover:text-white transition flex items-center gap-1">
+                    <i class="fa-solid fa-save"></i> 保存
+                </button>
+                <button v-if="currentView === 'editor'" @click="backToList" class="text-sm text-gray-400 hover:text-white transition flex items-center gap-1">
+                    <i class="fa-solid fa-arrow-left"></i> 返回列表
+                </button>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-1 overflow-hidden flex relative">
+            
+            <!-- List View -->
+            <div v-if="currentView === 'list'" class="w-full h-full overflow-y-auto p-8">
+                <div class="max-w-6xl mx-auto">
+                    <div class="flex justify-between items-center mb-8">
+                        <div>
+                            <h2 class="text-2xl font-bold text-white mb-2">复盘报告库</h2>
+                            <p class="text-gray-400">记录每一次事故，转化为团队的经验资产。</p>
+                        </div>
+                        <button @click="createNew" class="bg-brand-600 hover:bg-brand-500 text-white px-6 py-3 rounded-lg font-medium transition shadow-lg shadow-blue-900/20 flex items-center gap-2 transform hover:-translate-y-0.5">
+                            <i class="fa-solid fa-plus"></i> 新建复盘
+                        </button>
+                    </div>
+
+                    <!-- Cards Grid -->
+                    <div v-if="postmortems.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                        <div v-for="pm in postmortems" :key="pm.id" @click="editPostmortem(pm)" 
+                             class="glass-panel rounded-xl p-6 cursor-pointer transition-all duration-300 group relative overflow-hidden shadow-lg">
+                            <div class="absolute top-0 left-0 w-1 h-full" :class="getSeverityColor(pm.severity)"></div>
+                            <div class="flex justify-between items-start mb-4">
+                                <span class="px-2 py-1 rounded text-xs font-bold uppercase tracking-wider bg-opacity-20" 
+                                      :class="getSeverityBadgeClass(pm.severity)">
+                                    ${ pm.severity }
+                                </span>
+                                <span class="text-xs text-gray-500 font-mono">${ pm.date }</span>
+                            </div>
+                            <h3 class="text-lg font-bold text-white mb-2 line-clamp-2 group-hover:text-brand-400 transition">${ pm.title || '未命名事故' }</h3>
+                            <p class="text-sm text-gray-400 line-clamp-3 mb-4 h-12">${ pm.summary || '暂无摘要...' }</p>
+                            
+                            <div class="flex items-center justify-between border-t border-gray-700 pt-4 mt-auto">
+                                <div class="flex items-center gap-2">
+                                    <div class="w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center text-xs text-gray-300 ring-2 ring-gray-800">
+                                        ${ (pm.owner || 'U')[0].toUpperCase() }
+                                    </div>
+                                    <span class="text-xs text-gray-400">${ pm.owner || '未分配' }</span>
+                                </div>
+                                <button @click.stop="deletePostmortem(pm.id)" class="text-gray-600 hover:text-red-400 transition px-2 py-1 rounded hover:bg-white/5">
+                                    <i class="fa-solid fa-trash"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Empty State -->
+                    <div v-else class="flex flex-col items-center justify-center h-96 text-center border-2 border-dashed border-gray-700 rounded-2xl bg-white/5">
+                        <div class="w-16 h-16 bg-gray-800 rounded-full flex items-center justify-center mb-4 animate-pulse">
+                            <i class="fa-solid fa-clipboard-check text-2xl text-gray-500"></i>
+                        </div>
+                        <h3 class="text-xl font-medium text-white mb-2">暂无复盘记录</h3>
+                        <p class="text-gray-500 max-w-md mb-6">好的团队不是不犯错，而是不重复犯错。开始记录你的第一个事故复盘吧。</p>
+                        <button @click="createNew" class="text-brand-400 hover:text-brand-300 font-medium hover:underline">
+                            立即创建 &rarr;
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Editor View -->
+            <div v-else class="w-full h-full flex bg-dark-bg">
+                <!-- Sidebar Navigation -->
+                <aside class="w-64 border-r border-dark-border bg-dark-surface flex flex-col shrink-0">
+                    <nav class="flex-1 p-4 space-y-2">
+                        <a href="#section-basic" class="block px-4 py-2 rounded text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition flex items-center gap-3">
+                            <i class="fa-solid fa-circle-info w-4 text-center"></i> 基本信息
+                        </a>
+                        <a href="#section-summary" class="block px-4 py-2 rounded text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition flex items-center gap-3">
+                            <i class="fa-solid fa-align-left w-4 text-center"></i> 事故摘要
+                        </a>
+                        <a href="#section-timeline" class="block px-4 py-2 rounded text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition flex items-center gap-3">
+                            <i class="fa-solid fa-clock w-4 text-center"></i> 时间线
+                        </a>
+                        <a href="#section-rootcause" class="block px-4 py-2 rounded text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition flex items-center gap-3">
+                            <i class="fa-solid fa-magnifying-glass w-4 text-center"></i> 根因分析
+                        </a>
+                        <a href="#section-action" class="block px-4 py-2 rounded text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition flex items-center gap-3">
+                            <i class="fa-solid fa-list-check w-4 text-center"></i> 改进措施
+                        </a>
+                    </nav>
+                    <div class="p-4 border-t border-dark-border">
+                        <button @click="showExportModal = true" class="w-full py-2 bg-gray-700 hover:bg-gray-600 text-white rounded transition flex items-center justify-center gap-2">
+                            <i class="fa-solid fa-download"></i> 导出报告
+                        </button>
+                    </div>
+                </aside>
+
+                <!-- Editor Content -->
+                <div class="flex-1 overflow-y-auto p-8 scroll-smooth" id="editor-container">
+                    <div class="max-w-4xl mx-auto space-y-12 pb-20">
+                        
+                        <!-- Basic Info -->
+                        <section id="section-basic" class="space-y-6">
+                            <input v-model="current.title" type="text" placeholder="输入事故标题 (例如: 支付网关响应超时)" 
+                                   class="w-full bg-transparent text-3xl font-bold text-white placeholder-gray-600 border-none focus:ring-0 px-0">
+                            
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                                <div>
+                                    <label class="block text-xs font-medium text-gray-500 uppercase mb-1">发生日期</label>
+                                    <input v-model="current.date" type="date" class="w-full bg-dark-surface border border-gray-700 rounded px-3 py-2 text-white focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
+                                </div>
+                                <div>
+                                    <label class="block text-xs font-medium text-gray-500 uppercase mb-1">事故级别</label>
+                                    <select v-model="current.severity" class="w-full bg-dark-surface border border-gray-700 rounded px-3 py-2 text-white focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
+                                        <option value="P0">P0 - 极其严重 (全站不可用)</option>
+                                        <option value="P1">P1 - 严重 (核心功能不可用)</option>
+                                        <option value="P2">P2 - 高 (部分功能受损)</option>
+                                        <option value="P3">P3 - 中 (非核心问题)</option>
+                                        <option value="P4">P4 - 低 (轻微影响)</option>
+                                    </select>
+                                </div>
+                                <div>
+                                    <label class="block text-xs font-medium text-gray-500 uppercase mb-1">负责人</label>
+                                    <input v-model="current.owner" type="text" class="w-full bg-dark-surface border border-gray-700 rounded px-3 py-2 text-white focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500" placeholder="输入姓名">
+                                </div>
+                            </div>
+                        </section>
+
+                        <!-- Summary -->
+                        <section id="section-summary">
+                            <h3 class="text-xl font-bold text-brand-400 mb-4 flex items-center gap-2 border-b border-gray-800 pb-2">
+                                <i class="fa-solid fa-align-left"></i> 事故摘要 & 影响
+                            </h3>
+                            <div class="space-y-6">
+                                <div>
+                                    <label class="block text-sm text-gray-400 mb-2 font-medium">发生了什么？(Summary)</label>
+                                    <textarea v-model="current.summary" rows="4" class="w-full bg-dark-surface border border-gray-700 rounded p-4 text-white focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 leading-relaxed" placeholder="简要描述事故现象..."></textarea>
+                                </div>
+                                <div>
+                                    <label class="block text-sm text-gray-400 mb-2 font-medium">造成了什么影响？(Impact)</label>
+                                    <textarea v-model="current.impact" rows="3" class="w-full bg-dark-surface border border-gray-700 rounded p-4 text-white focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 leading-relaxed" placeholder="例如：影响 5000 名用户下单，造成约 10 万元 GMV 损失..."></textarea>
+                                </div>
+                            </div>
+                        </section>
+
+                        <!-- Timeline -->
+                        <section id="section-timeline">
+                            <h3 class="text-xl font-bold text-brand-400 mb-4 flex items-center gap-2 border-b border-gray-800 pb-2">
+                                <i class="fa-solid fa-clock-rotate-left"></i> 时间线回顾
+                            </h3>
+                            <div class="bg-dark-surface border border-gray-700 rounded-xl p-6 relative shadow-inner">
+                                <div class="timeline-line"></div>
+                                <div class="space-y-6 relative z-10">
+                                    <div v-for="(item, index) in current.timeline" :key="index" class="flex gap-4 group">
+                                        <div class="mt-1 w-8 h-8 rounded-full border-2 border-gray-600 bg-dark-bg flex items-center justify-center shrink-0 z-10 transition group-hover:border-brand-500 shadow-sm">
+                                            <i class="fa-solid fa-circle text-[8px] text-gray-400 group-hover:text-brand-500"></i>
+                                        </div>
+                                        <div class="flex-1 grid grid-cols-12 gap-4">
+                                            <div class="col-span-3">
+                                                <input v-model="item.time" type="time" class="w-full bg-transparent border-b border-gray-700 focus:border-brand-500 text-sm text-gray-300 py-1 focus:outline-none font-mono">
+                                            </div>
+                                            <div class="col-span-7">
+                                                <input v-model="item.description" type="text" placeholder="描述发生的事情..." class="w-full bg-transparent border-b border-gray-700 focus:border-brand-500 text-sm text-white py-1 focus:outline-none">
+                                            </div>
+                                            <div class="col-span-2 flex items-center gap-2">
+                                                 <select v-model="item.type" class="bg-transparent text-xs text-gray-400 border-none focus:ring-0 cursor-pointer hover:text-white">
+                                                     <option value="detection">发现</option>
+                                                     <option value="investigation">排查</option>
+                                                     <option value="fix">修复</option>
+                                                     <option value="verification">验证</option>
+                                                 </select>
+                                                <button @click="removeTimelineItem(index)" class="text-gray-600 hover:text-red-400 opacity-0 group-hover:opacity-100 transition px-2">
+                                                    <i class="fa-solid fa-times"></i>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <button @click="addTimelineItem" class="mt-6 ml-12 text-sm text-brand-400 hover:text-brand-300 flex items-center gap-2 transition hover:underline">
+                                    <i class="fa-solid fa-plus-circle"></i> 添加时间节点
+                                </button>
+                            </div>
+                        </section>
+
+                        <!-- Root Cause Analysis -->
+                        <section id="section-rootcause">
+                            <h3 class="text-xl font-bold text-brand-400 mb-4 flex items-center gap-2 border-b border-gray-800 pb-2">
+                                <i class="fa-solid fa-magnifying-glass-arrow-right"></i> 根因分析 (5 Whys)
+                            </h3>
+                            <div class="space-y-4">
+                                <div v-for="(why, index) in current.root_cause.whys" :key="index" class="flex gap-4 items-start">
+                                    <div class="w-24 shrink-0 text-right pt-3 font-bold text-gray-500 font-mono">Why #${index + 1}?</div>
+                                    <div class="flex-1 relative">
+                                        <input v-model="current.root_cause.whys[index]" type="text" 
+                                               :placeholder="index === 0 ? '为什么会发生这个问题？' : '为什么会出现上面这个原因？'"
+                                               class="w-full bg-dark-surface border border-gray-700 rounded px-4 py-2 text-white focus:border-brand-500 focus:outline-none transition focus:ring-1 focus:ring-brand-500">
+                                        <i v-if="index < 4" class="fa-solid fa-arrow-down absolute -bottom-5 left-8 text-gray-700 text-xs"></i>
+                                    </div>
+                                </div>
+                                <div class="flex gap-4 mt-8 pt-6 border-t border-gray-800">
+                                    <div class="w-24 shrink-0 text-right pt-2 font-bold text-brand-500">结论</div>
+                                    <div class="flex-1">
+                                        <textarea v-model="current.root_cause.conclusion" rows="2" placeholder="总结根本原因..." 
+                                                  class="w-full bg-brand-900/20 border border-brand-900/50 rounded px-4 py-2 text-brand-100 focus:border-brand-500 focus:outline-none placeholder-brand-300/30"></textarea>
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+
+                        <!-- Action Items -->
+                        <section id="section-action">
+                            <h3 class="text-xl font-bold text-brand-400 mb-4 flex items-center gap-2 border-b border-gray-800 pb-2">
+                                <i class="fa-solid fa-list-check"></i> 改进措施 (Action Items)
+                            </h3>
+                            <div class="bg-dark-surface border border-gray-700 rounded-xl overflow-hidden shadow-sm">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-gray-800/50 text-gray-200 uppercase text-xs">
+                                        <tr>
+                                            <th class="px-6 py-3">任务内容</th>
+                                            <th class="px-6 py-3 w-32">负责人</th>
+                                            <th class="px-6 py-3 w-32">截止日期</th>
+                                            <th class="px-6 py-3 w-32">状态</th>
+                                            <th class="px-6 py-3 w-10"></th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-gray-700">
+                                        <tr v-for="(action, index) in current.action_items" :key="index" class="group hover:bg-white/5 transition">
+                                            <td class="px-6 py-2">
+                                                <input v-model="action.task" type="text" placeholder="需要做什么..." class="w-full bg-transparent border-none focus:ring-0 text-white placeholder-gray-600">
+                                            </td>
+                                            <td class="px-6 py-2">
+                                                <input v-model="action.owner" type="text" placeholder="谁负责" class="w-full bg-transparent border-none focus:ring-0 text-white placeholder-gray-600">
+                                            </td>
+                                            <td class="px-6 py-2">
+                                                <input v-model="action.deadline" type="date" class="w-full bg-transparent border-none focus:ring-0 text-white text-xs">
+                                            </td>
+                                            <td class="px-6 py-2">
+                                                <select v-model="action.status" class="bg-transparent border-none focus:ring-0 text-xs font-medium" :class="getStatusColor(action.status)">
+                                                    <option value="pending" class="text-gray-500">待处理</option>
+                                                    <option value="in_progress" class="text-blue-400">进行中</option>
+                                                    <option value="done" class="text-green-400">已完成</option>
+                                                </select>
+                                            </td>
+                                            <td class="px-6 py-2 text-right">
+                                                <button @click="removeActionItem(index)" class="text-gray-600 hover:text-red-400 opacity-0 group-hover:opacity-100 transition px-2">
+                                                    <i class="fa-solid fa-times"></i>
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                <div class="p-3 bg-gray-800/30 border-t border-gray-700">
+                                    <button @click="addActionItem" class="text-sm text-brand-400 hover:text-brand-300 font-medium px-3 py-1 flex items-center gap-1 transition hover:underline">
+                                        <i class="fa-solid fa-plus"></i> 添加任务
+                                    </button>
+                                </div>
+                            </div>
+                        </section>
+
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Export Modal -->
+        <div v-if="showExportModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm" @click="showExportModal = false">
+            <div class="bg-dark-surface border border-gray-700 rounded-xl shadow-2xl w-full max-w-3xl max-h-[90vh] flex flex-col" @click.stop>
+                <div class="p-6 border-b border-gray-700 flex justify-between items-center">
+                    <h3 class="text-xl font-bold text-white">导出报告</h3>
+                    <button @click="showExportModal = false" class="text-gray-400 hover:text-white transition"><i class="fa-solid fa-times"></i></button>
+                </div>
+                <div class="p-6 overflow-y-auto bg-gray-900">
+                    <div class="prose prose-invert max-w-none" v-html="previewMarkdown"></div>
+                </div>
+                <div class="p-6 border-t border-gray-700 flex justify-end gap-4 bg-dark-surface">
+                    <button @click="copyMarkdown" class="px-4 py-2 text-gray-300 hover:text-white hover:bg-gray-700 rounded transition flex items-center gap-2">
+                        <i class="fa-solid fa-copy"></i> 复制 Markdown
+                    </button>
+                    <!-- Future: Export Image functionality could be added here -->
+                    <button @click="showExportModal = false" class="px-6 py-2 bg-brand-600 hover:bg-brand-500 text-white rounded font-medium transition shadow-lg shadow-blue-900/30">
+                        关闭
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const { createApp, ref, computed, onMounted, watch } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const currentView = ref('list');
+                const postmortems = ref([]);
+                const showExportModal = ref(false);
+                const previewMarkdownContent = ref('');
+
+                const emptyPostmortem = {
+                    id: null,
+                    title: '',
+                    date: new Date().toISOString().split('T')[0],
+                    severity: 'P2',
+                    owner: '',
+                    summary: '',
+                    impact: '',
+                    timeline: [
+                        { time: '10:00', description: '监控系统发出高延迟警报', type: 'detection' }
+                    ],
+                    root_cause: {
+                        whys: ['', '', '', '', ''],
+                        conclusion: ''
+                    },
+                    action_items: [
+                        { task: '', owner: '', deadline: '', status: 'pending' }
+                    ]
+                };
+
+                const current = ref(JSON.parse(JSON.stringify(emptyPostmortem)));
+
+                // Fetch Data
+                const fetchPostmortems = async () => {
+                    try {
+                        const res = await fetch('/api/postmortems');
+                        postmortems.value = await res.json();
+                    } catch (e) {
+                        console.error(e);
+                    }
+                };
+
+                onMounted(fetchPostmortems);
+
+                // Actions
+                const createNew = () => {
+                    current.value = JSON.parse(JSON.stringify(emptyPostmortem));
+                    currentView.value = 'editor';
+                };
+
+                const editPostmortem = (pm) => {
+                    // Deep copy to avoid modifying list directly
+                    current.value = JSON.parse(JSON.stringify(pm));
+                    // Ensure structure integrity (in case old data is missing fields)
+                    if (!current.value.timeline) current.value.timeline = [];
+                    if (!current.value.root_cause) current.value.root_cause = { whys: ['', '', '', '', ''], conclusion: '' };
+                    if (!current.value.action_items) current.value.action_items = [];
+                    currentView.value = 'editor';
+                };
+
+                const saveCurrent = async (stayInEditor = false) => {
+                    const method = current.value.id ? 'PUT' : 'POST';
+                    const url = current.value.id ? `/api/postmortems/${current.value.id}` : '/api/postmortems';
+                    
+                    try {
+                        const res = await fetch(url, {
+                            method,
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(current.value)
+                        });
+                        const saved = await res.json();
+                        current.value.id = saved.id; // Update ID if new
+                        
+                        await fetchPostmortems();
+                        
+                        if (!stayInEditor) {
+                            currentView.value = 'list';
+                        } else {
+                            // Show toast or feedback?
+                            // alert('已保存'); // 简单提示
+                        }
+                    } catch (e) {
+                        alert('保存失败');
+                    }
+                };
+
+                const backToList = async () => {
+                    await saveCurrent(false); // Auto save on back
+                };
+
+                const deletePostmortem = async (id) => {
+                    if (!confirm('确定要删除这个复盘记录吗？')) return;
+                    await fetch(`/api/postmortems/${id}`, { method: 'DELETE' });
+                    await fetchPostmortems();
+                };
+
+                // Helper methods
+                const addTimelineItem = () => {
+                    current.value.timeline.push({ time: '', description: '', type: 'investigation' });
+                };
+                const removeTimelineItem = (index) => {
+                    current.value.timeline.splice(index, 1);
+                };
+                const addActionItem = () => {
+                    current.value.action_items.push({ task: '', owner: '', deadline: '', status: 'pending' });
+                };
+                const removeActionItem = (index) => {
+                    current.value.action_items.splice(index, 1);
+                };
+
+                // Styling helpers
+                const getSeverityColor = (sev) => {
+                    const map = { 'P0': 'bg-red-500', 'P1': 'bg-orange-500', 'P2': 'bg-yellow-500', 'P3': 'bg-blue-500', 'P4': 'bg-gray-500' };
+                    return map[sev] || 'bg-gray-500';
+                };
+                const getSeverityBadgeClass = (sev) => {
+                    const map = { 
+                        'P0': 'bg-red-500 text-red-500', 
+                        'P1': 'bg-orange-500 text-orange-500', 
+                        'P2': 'bg-yellow-500 text-yellow-500', 
+                        'P3': 'bg-blue-500 text-blue-500', 
+                        'P4': 'bg-gray-500 text-gray-500' 
+                    };
+                    return map[sev] || 'bg-gray-500 text-gray-500';
+                };
+                const getStatusColor = (status) => {
+                    return { 'pending': 'text-gray-400', 'in_progress': 'text-blue-400', 'done': 'text-green-400' }[status];
+                };
+
+                // Export
+                const previewMarkdown = computed(() => {
+                    if (!showExportModal.value) return '';
+                    // Generate MD on the fly for preview
+                    let md = `# ${current.value.title || '无标题'}\n\n`;
+                    md += `> **日期**: ${current.value.date} | **级别**: ${current.value.severity} | **负责人**: ${current.value.owner}\n\n`;
+                    
+                    md += `## 1. 事故摘要\n${current.value.summary}\n\n`;
+                    md += `## 2. 影响范围\n${current.value.impact}\n\n`;
+                    
+                    md += `## 3. 时间线\n`;
+                    current.value.timeline.forEach(t => {
+                        md += `- **${t.time}** (${t.type}): ${t.description}\n`;
+                    });
+                    
+                    md += `\n## 4. 根因分析 (5 Whys)\n`;
+                    current.value.root_cause.whys.forEach((w, i) => {
+                        if(w) md += `${i+1}. Why? ${w}\n`;
+                    });
+                    md += `\n**结论**: ${current.value.root_cause.conclusion}\n\n`;
+                    
+                    md += `## 5. 改进措施\n`;
+                    md += `| 任务 | 负责人 | 状态 |\n|---|---|---|\n`;
+                    current.value.action_items.forEach(a => {
+                        md += `| ${a.task} | ${a.owner} | ${a.status} |\n`;
+                    });
+                    
+                    previewMarkdownContent.value = md;
+                    return marked.parse(md);
+                });
+
+                const copyMarkdown = () => {
+                    navigator.clipboard.writeText(previewMarkdownContent.value);
+                    alert('已复制到剪贴板');
+                };
+
+                return {
+                    currentView, postmortems, current, showExportModal, previewMarkdown,
+                    createNew, editPostmortem, backToList, saveCurrent, deletePostmortem,
+                    addTimelineItem, removeTimelineItem, addActionItem, removeActionItem,
+                    getSeverityColor, getSeverityBadgeClass, getStatusColor, copyMarkdown
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>