{% extends "base.html" %}
{% set active = "mysql" %}
{% block title %}MySQL管理{% endblock %}
{% block content %}
<div class="header"><h1>🗄️ MySQL 管理</h1>
<div class="actions">
<button class="btn btn-success btn-sm" onclick="mysqlAction('start')">启动</button>
<button class="btn btn-warning btn-sm" onclick="mysqlAction('stop')">停止</button>
<button class="btn btn-primary btn-sm" onclick="mysqlAction('restart')">重启</button>
</div></div>
<div class="card"><h3>状态信息</h3><div id="mysql-status">加载中...</div></div>
<div class="card"><h3>数据库列表</h3>
<table><thead><tr><th>数据库名</th><th>操作</th></tr></thead><tbody id="db-list"><tr><td colspan="2">加载中...</td></tr></tbody></table>
</div>
{% endblock %}
{% block scripts %}
<script>
function refresh(){
api('/api/mysql/status').then(function(d){
var s=d.status==='running'?'<span class="badge badge-success">运行中</span>':'<span class="badge badge-danger">已停止</span>';
document.getElementById('mysql-status').innerHTML='<p>'+s+'</p><p style="margin-top:8px">'+d.version+'</p>';
var h='';(d.databases||[]).forEach(function(db){h+='<tr><td>'+db+'</td><td><button class="btn btn-sm" style="background:#8E44AD;color:#fff" onclick="toast(\'功能开发中\')">管理</button></td></tr>'});
document.getElementById('db-list').innerHTML=h||'<tr><td colspan="2">暂无数据库</td></tr>';
})}
function mysqlAction(a){post('/api/mysql/action',{action:a}).then(function(d){toast(d.output,d.success?'success':'error');setTimeout(refresh,1000)})}
refresh();
</script>
{% endblock %}