864 lines
33 KiB
PHP
864 lines
33 KiB
PHP
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|||
|
|
<title>SQL 安装器 - Laravel</title>
|
|||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--primary-color: #6366f1;
|
|||
|
|
--success-color: #10b981;
|
|||
|
|
--warning-color: #f59e0b;
|
|||
|
|
--danger-color: #ef4444;
|
|||
|
|
--dark-color: #1e293b;
|
|||
|
|
--light-color: #f8fafc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background: linear-gradient(135deg, #f0f4f8, #e2e8f0);
|
|||
|
|
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|||
|
|
padding: 2rem 0;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-header i {
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
color: var(--primary-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
border-radius: 16px;
|
|||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
|||
|
|
border: none;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
background: var(--primary-color);
|
|||
|
|
color: white;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 1.25rem;
|
|||
|
|
padding: 1.25rem 1.5rem;
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-body {
|
|||
|
|
padding: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-container {
|
|||
|
|
position: relative;
|
|||
|
|
height: 2.5rem;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
background-color: #e2e8f0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-bar {
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
background: linear-gradient(90deg, var(--primary-color), #4f46e5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.log-container {
|
|||
|
|
background-color: #1e293b;
|
|||
|
|
color: #cbd5e1;
|
|||
|
|
font-family: 'Fira Code', monospace;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
height: 320px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.log-item {
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
border-left: 2px solid transparent;
|
|||
|
|
padding-left: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.log-item.info {
|
|||
|
|
border-left-color: #60a5fa;
|
|||
|
|
color: #bfdbfe;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.log-item.success {
|
|||
|
|
border-left-color: var(--success-color);
|
|||
|
|
color: #6ee7b7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.log-item.warning {
|
|||
|
|
border-left-color: var(--warning-color);
|
|||
|
|
color: #fcd34d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.log-item.error {
|
|||
|
|
border-left-color: var(--danger-color);
|
|||
|
|
color: #fca5a5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-action {
|
|||
|
|
padding: 0.75rem 1.5rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
border: none;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary {
|
|||
|
|
background: linear-gradient(135deg, var(--primary-color), #4f46e5);
|
|||
|
|
box-shadow: 0 4px 6px rgba(99, 102, 241, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary:hover {
|
|||
|
|
background: linear-gradient(135deg, #4f46e5, #4338ca);
|
|||
|
|
box-shadow: 0 6px 8px rgba(99, 102, 241, 0.4);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-indicator {
|
|||
|
|
width: 18px;
|
|||
|
|
height: 18px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
box-shadow: 0 0 8px currentColor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-idle {
|
|||
|
|
background-color: #94a3b8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-running {
|
|||
|
|
background-color: var(--primary-color);
|
|||
|
|
animation: pulse 1.5s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-success {
|
|||
|
|
background-color: var(--success-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-error {
|
|||
|
|
background-color: var(--danger-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-card {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-card h5 {
|
|||
|
|
color: var(--primary-color);
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-card .info-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 0.75rem;
|
|||
|
|
padding-bottom: 0.75rem;
|
|||
|
|
border-bottom: 1px solid #f1f5f9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-card .info-item:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
padding-bottom: 0;
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0% { opacity: 1; }
|
|||
|
|
50% { opacity: 0.6; }
|
|||
|
|
100% { opacity: 1; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--dark-color);
|
|||
|
|
margin-bottom: 1.2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.config-section {
|
|||
|
|
background: rgba(241, 245, 249, 0.5);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-number {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 36px;
|
|||
|
|
height: 36px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: var(--primary-color);
|
|||
|
|
color: white;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.highlight {
|
|||
|
|
background: rgba(99, 102, 241, 0.1);
|
|||
|
|
border-left: 4px solid var(--primary-color);
|
|||
|
|
padding: 0.5rem 1rem;
|
|||
|
|
border-radius: 0 8px 8px 0;
|
|||
|
|
margin: 1rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-message {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 2rem;
|
|||
|
|
right: 2rem;
|
|||
|
|
z-index: 1000;
|
|||
|
|
padding: 1rem 1.5rem;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(20px);
|
|||
|
|
transition: all 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-message.show {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-success {
|
|||
|
|
background: var(--success-color);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.floating-error {
|
|||
|
|
background: var(--danger-color);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.permission-hint {
|
|||
|
|
background-color: #f8d7da;
|
|||
|
|
border-left: 4px solid #dc3545;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin: 15px 0;
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.permission-hint-title {
|
|||
|
|
color: #dc3545;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.permission-solution {
|
|||
|
|
background-color: #d1ecf1;
|
|||
|
|
border-left: 4px solid #0dcaf0;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="logo-header">
|
|||
|
|
<i class="fas fa-database"></i>
|
|||
|
|
<h1>Laravel SQL 安装器</h1>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 权限问题提示 -->
|
|||
|
|
<div class="permission-hint" id="permissionHint">
|
|||
|
|
<div class="permission-hint-title">
|
|||
|
|
<i class="fas fa-exclamation-triangle me-2"></i>检测到权限问题
|
|||
|
|
</div>
|
|||
|
|
<p>您的系统可能遇到了文件权限问题，导致无法加载PHP扩展。</p>
|
|||
|
|
|
|||
|
|
<div class="permission-solution">
|
|||
|
|
<h6><i class="fas fa-wrench me-2"></i>解决方法:</h6>
|
|||
|
|
<ol>
|
|||
|
|
<li>检查Web服务器用户（如www-data）是否有权访问PHP扩展目录</li>
|
|||
|
|
<li>在服务器终端执行：<code>sudo chmod -R a+r /usr/local/lib/php/extensions/</code></li>
|
|||
|
|
<li>如果使用SELinux/AppArmor，调整安全策略允许访问</li>
|
|||
|
|
<li>确保PHP进程有权执行<code>artisan</code>命令</li>
|
|||
|
|
</ol>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<!-- 左侧配置面板 -->
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
<i class="fas fa-sliders-h me-2"></i>数据库配置
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<form id="installForm">
|
|||
|
|
<div class="config-section">
|
|||
|
|
<div class="section-title">
|
|||
|
|
<i class="fas fa-server"></i>
|
|||
|
|
<span>数据库连接</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="mb-3">
|
|||
|
|
<label for="host" class="form-label">主机</label>
|
|||
|
|
<input type="text" class="form-control" id="host"
|
|||
|
|
placeholder="数据库主机" value="{{ env('DB_HOST', '127.0.0.1') }}">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="mb-3">
|
|||
|
|
<label for="port" class="form-label">端口</label>
|
|||
|
|
<input type="number" class="form-control" id="port"
|
|||
|
|
placeholder="端口号" value="{{ env('DB_PORT', 3306) }}">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="mb-3">
|
|||
|
|
<label for="database" class="form-label">数据库名</label>
|
|||
|
|
<input type="text" class="form-control" id="database"
|
|||
|
|
placeholder="数据库名称" value="{{ env('DB_DATABASE', 'nl_admin') }}">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-6 mb-3">
|
|||
|
|
<label for="username" class="form-label">用户名</label>
|
|||
|
|
<input type="text" class="form-control" id="username"
|
|||
|
|
placeholder="用户名" value="{{ env('DB_USERNAME', 'root') }}">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-md-6 mb-3">
|
|||
|
|
<label for="password" class="form-label">密码</label>
|
|||
|
|
<input type="password" class="form-control" id="password"
|
|||
|
|
placeholder="密码" value="{{ env('DB_PASSWORD', '') }}">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="d-grid mt-3">
|
|||
|
|
<button type="button" class="btn btn-primary" id="testConnectionBtn">
|
|||
|
|
<i class="fas fa-plug"></i> 测试连接
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="config-section">
|
|||
|
|
<div class="section-title">
|
|||
|
|
<i class="fas fa-file-code"></i>
|
|||
|
|
<span>SQL 文件设置</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="mb-3">
|
|||
|
|
<label for="sqlPath" class="form-label">SQL 文件路径</label>
|
|||
|
|
<div class="input-group">
|
|||
|
|
<span class="input-group-text"><i class="fas fa-folder"></i></span>
|
|||
|
|
<input type="text" class="form-control" id="sqlPath"
|
|||
|
|
placeholder="输入SQL文件路径" value="public/nl_admin.sql">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-text mt-1">相对于应用根目录的文件路径</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-check form-switch mb-3">
|
|||
|
|
<input class="form-check-input" type="checkbox" id="forceInstall">
|
|||
|
|
<label class="form-check-label" for="forceInstall">
|
|||
|
|
<i class="fas fa-exclamation-triangle text-warning me-2"></i>
|
|||
|
|
强制安装（覆盖现有数据）
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-check form-switch mb-3">
|
|||
|
|
<input class="form-check-input" type="checkbox" id="backupDb">
|
|||
|
|
<label class="form-check-label" for="backupDb">
|
|||
|
|
<i class="fas fa-file-archive text-info me-2"></i>
|
|||
|
|
安装前备份数据库
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="d-grid gap-2 mt-4">
|
|||
|
|
<button type="button" class="btn btn-primary" id="startInstallBtn">
|
|||
|
|
<i class="fas fa-play-circle"></i> 开始安装
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="info-card">
|
|||
|
|
<h5><i class="fas fa-info-circle text-primary me-2"></i>使用说明</h5>
|
|||
|
|
|
|||
|
|
<div class="highlight">
|
|||
|
|
<p>1. 配置数据库连接信息</p>
|
|||
|
|
<p>2. 设置SQL文件路径（默认为<code>public/nl_admin.sql</code>）</p>
|
|||
|
|
<p>3. 测试数据库连接是否成功</p>
|
|||
|
|
<p>4. 点击"开始安装"执行SQL文件</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span><i class="fas fa-exclamation-triangle text-warning me-2"></i>重要提示：</span>
|
|||
|
|
<span class="text-end">强制安装选项会覆盖现有数据，请谨慎使用</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 右侧监控面板 -->
|
|||
|
|
<div class="col-lg-6">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|||
|
|
<div>
|
|||
|
|
<i class="fas fa-chart-line me-2"></i>安装进度
|
|||
|
|
</div>
|
|||
|
|
<div id="statusDisplay">
|
|||
|
|
<div class="status-indicator status-idle"></div>
|
|||
|
|
<span id="statusText">准备就绪</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|||
|
|
<span id="progressPercentage">0%</span>
|
|||
|
|
<span id="fileSize" class="badge bg-light text-dark">
|
|||
|
|
<i class="fas fa-file-alt me-1"></i> 文件大小: 0 KB
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="progress-container">
|
|||
|
|
<div id="progressBar" class="progress-bar" style="width: 0%"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="log-container" id="logContainer">
|
|||
|
|
<div class="log-item info">== 系统日志 ==</div>
|
|||
|
|
<div class="log-item info">等待操作开始...</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="d-grid gap-2 mt-4">
|
|||
|
|
<button type="button" class="btn btn-outline-primary" id="downloadLogBtn" style="display: none;">
|
|||
|
|
<i class="fas fa-download me-2"></i>下载日志报告
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
<i class="fas fa-database me-2"></i>数据库信息
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span>状态:</span>
|
|||
|
|
<span id="dbStatus" class="text-primary">未连接</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span>驱动:</span>
|
|||
|
|
<span id="dbDriver" class="text-info">{{ env('DB_CONNECTION', '未设置') }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span>字符集:</span>
|
|||
|
|
<span>utf8mb4</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span>主机:</span>
|
|||
|
|
<span id="dbHost">{{ env('DB_HOST', '未设置') }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span>端口:</span>
|
|||
|
|
<span id="dbPort">{{ env('DB_PORT', '未设置') }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span>数据库名:</span>
|
|||
|
|
<span id="dbName">{{ env('DB_DATABASE', '未设置') }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 操作结果提示 -->
|
|||
|
|
<div id="floatingMessage" class="floating-message">
|
|||
|
|
<i class="fas fa-exclamation-circle me-2"></i> <span id="floatingText"></span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
// 获取所有DOM元素引用
|
|||
|
|
const elements = {
|
|||
|
|
logContainer: document.getElementById('logContainer'),
|
|||
|
|
progressBar: document.getElementById('progressBar'),
|
|||
|
|
progressPercentage: document.getElementById('progressPercentage'),
|
|||
|
|
startInstallBtn: document.getElementById('startInstallBtn'),
|
|||
|
|
testConnectionBtn: document.getElementById('testConnectionBtn'),
|
|||
|
|
downloadLogBtn: document.getElementById('downloadLogBtn'),
|
|||
|
|
statusIndicator: document.querySelector('.status-indicator'),
|
|||
|
|
statusText: document.getElementById('statusText'),
|
|||
|
|
dbStatus: document.getElementById('dbStatus'),
|
|||
|
|
dbHost: document.getElementById('dbHost'),
|
|||
|
|
dbPort: document.getElementById('dbPort'),
|
|||
|
|
dbName: document.getElementById('dbName'),
|
|||
|
|
dbDriver: document.getElementById('dbDriver'),
|
|||
|
|
floatingMessage: document.getElementById('floatingMessage'),
|
|||
|
|
floatingText: document.getElementById('floatingText'),
|
|||
|
|
permissionHint: document.getElementById('permissionHint')
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let installLog = [];
|
|||
|
|
let currentProgress = 0;
|
|||
|
|
|
|||
|
|
// 添加日志函数
|
|||
|
|
function addLog(message, type = 'info') {
|
|||
|
|
const logItem = document.createElement('div');
|
|||
|
|
logItem.className = `log-item ${type}`;
|
|||
|
|
|
|||
|
|
const now = new Date();
|
|||
|
|
const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
|
|||
|
|
|
|||
|
|
logItem.textContent = `[${time}] ${message}`;
|
|||
|
|
elements.logContainer.appendChild(logItem);
|
|||
|
|
|
|||
|
|
// 滚动到底部
|
|||
|
|
elements.logContainer.scrollTop = elements.logContainer.scrollHeight;
|
|||
|
|
|
|||
|
|
// 保存日志
|
|||
|
|
installLog.push({
|
|||
|
|
time: new Date().toISOString(),
|
|||
|
|
message,
|
|||
|
|
type
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 检测是否是权限错误
|
|||
|
|
if (message.includes('Permission denied')) {
|
|||
|
|
elements.permissionHint.style.display = 'block';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 检测进度信息
|
|||
|
|
detectProgress(message);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 从日志消息中检测进度
|
|||
|
|
function detectProgress(message) {
|
|||
|
|
// 如果消息中包含进度百分比
|
|||
|
|
if (message.includes('%') && /[0-9]{1,3}%/.test(message)) {
|
|||
|
|
const match = message.match(/(\d{1,3})%/);
|
|||
|
|
if (match && match[1]) {
|
|||
|
|
currentProgress = parseInt(match[1]);
|
|||
|
|
updateProgress(currentProgress);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 检测文件大小信息
|
|||
|
|
else if (message.includes('文件大小')) {
|
|||
|
|
const match = message.match(/大小: ([0-9.]+)MB/);
|
|||
|
|
if (match && match[1]) {
|
|||
|
|
const size = Math.round(parseFloat(match[1]) * 1024);
|
|||
|
|
elements.fileSize.innerHTML = `<i class="fas fa-file-alt me-1"></i> 文件大小: ${size} KB`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新状态显示
|
|||
|
|
function updateStatus(status) {
|
|||
|
|
elements.statusIndicator.className = 'status-indicator';
|
|||
|
|
|
|||
|
|
switch(status) {
|
|||
|
|
case 'idle':
|
|||
|
|
elements.statusIndicator.classList.add('status-idle');
|
|||
|
|
elements.statusText.textContent = '准备就绪';
|
|||
|
|
break;
|
|||
|
|
case 'running':
|
|||
|
|
elements.statusIndicator.classList.add('status-running');
|
|||
|
|
elements.statusText.textContent = '安装进行中...';
|
|||
|
|
elements.startInstallBtn.disabled = true;
|
|||
|
|
elements.testConnectionBtn.disabled = true;
|
|||
|
|
break;
|
|||
|
|
case 'success':
|
|||
|
|
elements.statusIndicator.classList.add('status-success');
|
|||
|
|
elements.statusText.textContent = '安装成功';
|
|||
|
|
elements.startInstallBtn.disabled = false;
|
|||
|
|
elements.testConnectionBtn.disabled = false;
|
|||
|
|
break;
|
|||
|
|
case 'error':
|
|||
|
|
elements.statusIndicator.classList.add('status-error');
|
|||
|
|
elements.statusText.textContent = '安装失败';
|
|||
|
|
elements.startInstallBtn.disabled = false;
|
|||
|
|
elements.testConnectionBtn.disabled = false;
|
|||
|
|
elements.downloadLogBtn.style.display = 'block';
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新数据库连接状态
|
|||
|
|
function updateDbStatus(status) {
|
|||
|
|
elements.dbStatus.textContent = status;
|
|||
|
|
elements.dbStatus.className = '';
|
|||
|
|
|
|||
|
|
switch(status) {
|
|||
|
|
case '已连接':
|
|||
|
|
elements.dbStatus.classList.add('text-success');
|
|||
|
|
break;
|
|||
|
|
case '连接失败':
|
|||
|
|
elements.dbStatus.classList.add('text-danger');
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
elements.dbStatus.classList.add('text-primary');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新进度条
|
|||
|
|
function updateProgress(percentage, message) {
|
|||
|
|
const percent = Math.min(100, Math.max(0, percentage));
|
|||
|
|
elements.progressBar.style.width = `${percent}%`;
|
|||
|
|
elements.progressPercentage.textContent = `${Math.round(percent)}%`;
|
|||
|
|
|
|||
|
|
if (message) {
|
|||
|
|
addLog(message);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示浮动消息
|
|||
|
|
function showFloatingMessage(message, type) {
|
|||
|
|
elements.floatingText.textContent = message;
|
|||
|
|
|
|||
|
|
elements.floatingMessage.className = 'floating-message';
|
|||
|
|
elements.floatingMessage.classList.add('show');
|
|||
|
|
|
|||
|
|
if (type === 'success') {
|
|||
|
|
elements.floatingMessage.classList.add('floating-success');
|
|||
|
|
} else {
|
|||
|
|
elements.floatingMessage.classList.add('floating-error');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
elements.floatingMessage.classList.remove('show');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
elements.floatingMessage.className = 'floating-message';
|
|||
|
|
}, 300);
|
|||
|
|
}, 5000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 测试数据库连接
|
|||
|
|
async function testDatabaseConnection() {
|
|||
|
|
const host = document.getElementById('host').value;
|
|||
|
|
const port = document.getElementById('port').value;
|
|||
|
|
const database = document.getElementById('database').value;
|
|||
|
|
const username = document.getElementById('username').value;
|
|||
|
|
const password = document.getElementById('password').value;
|
|||
|
|
|
|||
|
|
// 更新数据库信息显示
|
|||
|
|
elements.dbHost.textContent = host || '未设置';
|
|||
|
|
elements.dbPort.textContent = port || '未设置';
|
|||
|
|
elements.dbName.textContent = database || '未设置';
|
|||
|
|
|
|||
|
|
addLog('正在测试数据库连接...', 'info');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('/api/sql/test-connection', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
host,
|
|||
|
|
port,
|
|||
|
|
database,
|
|||
|
|
username,
|
|||
|
|
password
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
|
|||
|
|
if (result.success) {
|
|||
|
|
addLog('✅ 数据库连接成功!', 'success');
|
|||
|
|
updateDbStatus('已连接');
|
|||
|
|
showFloatingMessage('✅ 数据库连接成功！', 'success');
|
|||
|
|
|
|||
|
|
// 更新数据库信息
|
|||
|
|
elements.dbDriver.textContent = 'MySQL';
|
|||
|
|
} else {
|
|||
|
|
const errorMessage = `❌ ${result.message || '数据库连接失败'}`;
|
|||
|
|
addLog(errorMessage, 'error');
|
|||
|
|
updateDbStatus('连接失败');
|
|||
|
|
showFloatingMessage(errorMessage, 'error');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
const errorMessage = `❌ 连接测试出错: ${error.message}`;
|
|||
|
|
addLog(errorMessage, 'error');
|
|||
|
|
updateDbStatus('连接失败');
|
|||
|
|
showFloatingMessage(errorMessage, 'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开始安装过程
|
|||
|
|
async function startInstallation() {
|
|||
|
|
// 重置日志和UI状态
|
|||
|
|
elements.logContainer.innerHTML = '<div class="log-item info">== 安装日志 ==</div>';
|
|||
|
|
installLog = [];
|
|||
|
|
currentProgress = 0;
|
|||
|
|
updateProgress(0);
|
|||
|
|
updateStatus('running');
|
|||
|
|
elements.downloadLogBtn.style.display = 'none';
|
|||
|
|
elements.permissionHint.style.display = 'none';
|
|||
|
|
|
|||
|
|
const sqlPath = document.getElementById('sqlPath').value;
|
|||
|
|
const host = document.getElementById('host').value;
|
|||
|
|
const port = document.getElementById('port').value;
|
|||
|
|
const database = document.getElementById('database').value;
|
|||
|
|
const username = document.getElementById('username').value;
|
|||
|
|
const password = document.getElementById('password').value;
|
|||
|
|
const forceInstall = document.getElementById('forceInstall').checked;
|
|||
|
|
const backupDb = document.getElementById('backupDb').checked;
|
|||
|
|
|
|||
|
|
addLog('🚀 开始数据库安装流程...', 'info');
|
|||
|
|
addLog(`📁 文件路径: ${sqlPath}`, 'info');
|
|||
|
|
addLog(`🔧 数据库配置: ${username}@${host}:${port}`, 'info');
|
|||
|
|
addLog(`🗃️ 数据库名: ${database}`, 'info');
|
|||
|
|
addLog(`⚡ 强制模式: ${forceInstall ? '是' : '否'}`, forceInstall ? 'warning' : 'info');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('/api/sql/start-installation', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
file: sqlPath,
|
|||
|
|
host,
|
|||
|
|
port,
|
|||
|
|
database,
|
|||
|
|
username,
|
|||
|
|
password,
|
|||
|
|
force: forceInstall,
|
|||
|
|
backup: backupDb
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
// 处理错误情况
|
|||
|
|
const errorMsg = result.message || '安装过程中发生错误';
|
|||
|
|
|
|||
|
|
// 确保日志存在
|
|||
|
|
if (result.logs && Array.isArray(result.logs)) {
|
|||
|
|
result.logs.forEach(log => {
|
|||
|
|
let type = 'info';
|
|||
|
|
if (log.includes('❌') || log.includes('失败')) type = 'error';
|
|||
|
|
if (log.includes('⚠️')) type = 'warning';
|
|||
|
|
if (log.includes('✅')) type = 'success';
|
|||
|
|
|
|||
|
|
addLog(log, type);
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
addLog(`❌ ${errorMsg}`, 'error');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showFloatingMessage(`❌ ${errorMsg}`, 'error');
|
|||
|
|
updateStatus('error');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理成功情况
|
|||
|
|
if (result.success && Array.isArray(result.logs)) {
|
|||
|
|
result.logs.forEach(log => {
|
|||
|
|
let type = 'info';
|
|||
|
|
if (log.includes('❌') || log.includes('失败')) type = 'error';
|
|||
|
|
if (log.includes('⚠️')) type = 'warning';
|
|||
|
|
if (log.includes('✅')) type = 'success';
|
|||
|
|
|
|||
|
|
addLog(log, type);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 更新文件大小显示
|
|||
|
|
if (result.file_size) {
|
|||
|
|
const sizeKB = Math.round(result.file_size / 1024);
|
|||
|
|
elements.fileSize.innerHTML =
|
|||
|
|
`<i class="fas fa-file-alt me-1"></i> 文件大小: ${sizeKB} KB`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新进度到100%
|
|||
|
|
updateProgress(100, '✅ 安装完成');
|
|||
|
|
|
|||
|
|
showFloatingMessage('✅ 安装成功！', 'success');
|
|||
|
|
updateStatus('success');
|
|||
|
|
} else {
|
|||
|
|
addLog('❌ 安装完成但返回数据异常', 'error');
|
|||
|
|
showFloatingMessage('❌ 安装完成但返回数据异常', 'error');
|
|||
|
|
updateStatus('error');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
addLog(`❌ 安装过程中出错: ${error.message}`, 'error');
|
|||
|
|
showFloatingMessage(`❌ 安装失败: ${error.message}`, 'error');
|
|||
|
|
updateStatus('error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下载日志报告
|
|||
|
|
function downloadLogReport() {
|
|||
|
|
const logContent = installLog.map(entry =>
|
|||
|
|
`[${new Date(entry.time).toLocaleTimeString()}] ${entry.message}`
|
|||
|
|
).join('\n');
|
|||
|
|
|
|||
|
|
const blob = new Blob([logContent], {type: 'text/plain'});
|
|||
|
|
const url = URL.createObjectURL(blob);
|
|||
|
|
|
|||
|
|
const a = document.createElement('a');
|
|||
|
|
a.href = url;
|
|||
|
|
a.download = `sql_install_log_${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.log`;
|
|||
|
|
document.body.appendChild(a);
|
|||
|
|
a.click();
|
|||
|
|
document.body.removeChild(a);
|
|||
|
|
URL.revokeObjectURL(url);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 绑定事件监听器
|
|||
|
|
elements.startInstallBtn.addEventListener('click', startInstallation);
|
|||
|
|
elements.testConnectionBtn.addEventListener('click', testDatabaseConnection);
|
|||
|
|
elements.downloadLogBtn.addEventListener('click', downloadLogReport);
|
|||
|
|
|
|||
|
|
// 页面加载完成状态
|
|||
|
|
addLog('系统初始化完毕', 'info');
|
|||
|
|
updateStatus('idle');
|
|||
|
|
updateDbStatus('未连接');
|
|||
|
|
|
|||
|
|
// 初始显示数据库信息
|
|||
|
|
elements.dbHost.textContent = "{{ env('DB_HOST', '未设置') }}";
|
|||
|
|
elements.dbPort.textContent = "{{ env('DB_PORT', '未设置') }}";
|
|||
|
|
elements.dbName.textContent = "{{ env('DB_DATABASE', '未设置') }}";
|
|||
|
|
elements.dbDriver.textContent = "{{ env('DB_CONNECTION', '未设置') }}";
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|