AI-Agent
/
FTP-Server


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545
							package static

// IndexHTML is the embedded admin panel HTML
var IndexHTML = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FTP Server 管理面板</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; color: #333; }

        /* Login Page */
        .login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .login-card { background: white; border-radius: 12px; padding: 40px; width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
        .login-card h1 { text-align: center; margin-bottom: 30px; color: #333; font-size: 24px; }
        .login-card h1 .icon { font-size: 48px; display: block; margin-bottom: 10px; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 6px; font-weight: 600; color: #555; font-size: 14px; }
        .form-group input { width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; transition: border-color 0.3s; }
        .form-group input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
        .btn { padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s; }
        .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: white; width: 100%; }
        .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(102,126,234,0.4); }
        .btn-danger { background: #dc3545; color: white; }
        .btn-danger:hover { background: #c82333; }
        .btn-success { background: #28a745; color: white; }
        .btn-success:hover { background: #218838; }
        .btn-sm { padding: 6px 14px; font-size: 12px; }
        .error-msg { color: #dc3545; text-align: center; margin-top: 12px; font-size: 14px; min-height: 20px; }

        /* Dashboard */
        .app-container { display: none; }
        .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 16px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
        .header h1 { font-size: 20px; font-weight: 600; }
        .header .user-info { display: flex; align-items: center; gap: 16px; }
        .header .user-info span { font-size: 14px; opacity: 0.9; }

        .sidebar { position: fixed; left: 0; top: 60px; bottom: 0; width: 220px; background: #fff; box-shadow: 2px 0 10px rgba(0,0,0,0.05); padding-top: 20px; }
        .sidebar a { display: block; padding: 14px 24px; color: #666; text-decoration: none; font-size: 14px; transition: all 0.3s; border-left: 3px solid transparent; }
        .sidebar a:hover, .sidebar a.active { background: #f8f9ff; color: #667eea; border-left-color: #667eea; }

        .main-content { margin-left: 220px; padding: 30px; margin-top: 60px; }

        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 30px; }
        .stat-card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .stat-card .label { color: #888; font-size: 13px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
        .stat-card .value { font-size: 28px; font-weight: 700; color: #333; }
        .stat-card .value.purple { color: #667eea; }
        .stat-card .value.green { color: #28a745; }
        .stat-card .value.blue { color: #007bff; }

        .card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 20px; }
        .card h2 { font-size: 18px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #eee; color: #333; }
        .card h3 { font-size: 15px; margin-bottom: 16px; color: #555; }

        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
        th { background: #fafafa; font-weight: 600; color: #555; }
        tr:hover { background: #f8f9ff; }

        .badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
        .badge-success { background: #e8f5e9; color: #28a745; }
        .badge-secondary { background: #f5f5f5; color: #888; }

        .section { display: none; }
        .section.active { display: block; }

        .config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .config-grid .form-group input, .config-grid .form-group select { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
        .config-grid .form-group input:focus { outline: none; border-color: #667eea; }

        .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center; }
        .modal-overlay.show { display: flex; }
        .modal { background: white; border-radius: 12px; padding: 30px; width: 480px; max-width: 90%; }
        .modal h2 { margin-bottom: 24px; }
        .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

        .toast { position: fixed; top: 80px; right: 30px; padding: 14px 24px; border-radius: 8px; color: white; font-size: 14px; font-weight: 500; z-index: 2000; animation: slideIn 0.3s ease; }
        .toast-success { background: #28a745; }
        .toast-error { background: #dc3545; }
        @keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

        .actions-cell { display: flex; gap: 8px; }
    </style>
</head>
<body>

<!-- Login Page -->
<div class="login-container" id="loginPage">
    <div class="login-card">
        <h1><span class="icon">&#128193;</span>FTP Server 管理面板</h1>
        <div class="form-group">
            <label>用户名</label>
            <input type="text" id="loginUser" placeholder="请输入管理员用户名" value="admin">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" id="loginPass" placeholder="请输入密码" value="">
        </div>
        <button class="btn btn-primary" onclick="doLogin()">登 录</button>
        <div class="error-msg" id="loginError"></div>
    </div>
</div>

<!-- Dashboard -->
<div class="app-container" id="appContainer">
    <div class="header">
        <h1>&#128193; FTP Server 管理面板</h1>
        <div class="user-info">
            <span id="welcomeText">欢迎, Admin</span>
            <button class="btn btn-sm btn-danger" onclick="doLogout()">退出登录</button>
        </div>
    </div>

    <div class="sidebar">
        <a href="#" class="active" onclick="showSection('dashboard', this)">&#128202; 仪表盘</a>
        <a href="#" onclick="showSection('users', this)">&#128100; 用户管理</a>
        <a href="#" onclick="showSection('settings', this)">&#9881; 系统设置</a>
    </div>

    <div class="main-content">
        <!-- Dashboard Section -->
        <div class="section active" id="section-dashboard">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="label">服务状态</div>
                    <div class="value green">运行中</div>
                </div>
                <div class="stat-card">
                    <div class="label">FTP 端口</div>
                    <div class="value purple" id="statFtpPort">-</div>
                </div>
                <div class="stat-card">
                    <div class="label">Web 端口</div>
                    <div class="value blue" id="statWebPort">-</div>
                </div>
                <div class="stat-card">
                    <div class="label">FTP 用户数</div>
                    <div class="value" id="statUserCount">-</div>
                </div>
            </div>
            <div class="card">
                <h2>服务器信息</h2>
                <table>
                    <tr><td style="width:200px;font-weight:600;">FTP 根目录</td><td id="infoRootDir">-</td></tr>
                    <tr><td style="font-weight:600;">被动模式端口范围</td><td id="infoPassiveRange">-</td></tr>
                    <tr><td style="font-weight:600;">管理面板地址</td><td id="infoWebAddr">-</td></tr>
                </table>
            </div>
        </div>

        <!-- Users Section -->
        <div class="section" id="section-users">
            <div class="card">
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
                    <h2 style="margin:0;border:none;padding:0;">FTP 用户管理</h2>
                    <button class="btn btn-primary" style="width:auto;background:linear-gradient(135deg,#667eea,#764ba2);" onclick="showAddUserModal()">+ 添加用户</button>
                </div>
                <table>
                    <thead>
                        <tr><th>用户名</th><th>主目录</th><th>写入权限</th><th>操作</th></tr>
                    </thead>
                    <tbody id="userTableBody">
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Settings Section -->
        <div class="section" id="section-settings">
            <div class="card">
                <h2>FTP 服务设置</h2>
                <div class="config-grid">
                    <div class="form-group">
                        <label>FTP 监听地址</label>
                        <input type="text" id="cfgFtpHost">
                    </div>
                    <div class="form-group">
                        <label>FTP 端口</label>
                        <input type="number" id="cfgFtpPort">
                    </div>
                    <div class="form-group">
                        <label>被动模式起始端口</label>
                        <input type="number" id="cfgPassiveMin">
                    </div>
                    <div class="form-group">
                        <label>被动模式结束端口</label>
                        <input type="number" id="cfgPassiveMax">
                    </div>
                    <div class="form-group">
                        <label>FTP 根目录</label>
                        <input type="text" id="cfgRootDir">
                    </div>
                </div>
            </div>
            <div class="card">
                <h2>Web 管理面板设置</h2>
                <div class="config-grid">
                    <div class="form-group">
                        <label>Web 监听地址</label>
                        <input type="text" id="cfgWebHost">
                    </div>
                    <div class="form-group">
                        <label>Web 端口</label>
                        <input type="number" id="cfgWebPort">
                    </div>
                </div>
            </div>
            <div class="card">
                <h2>管理员密码</h2>
                <div class="config-grid">
                    <div class="form-group">
                        <label>新密码</label>
                        <input type="password" id="cfgAdminPass" placeholder="输入新密码">
                    </div>
                    <div class="form-group">
                        <label>确认密码</label>
                        <input type="password" id="cfgAdminPassConfirm" placeholder="再次输入新密码">
                    </div>
                </div>
            </div>
            <button class="btn btn-primary" style="width:auto;padding:12px 40px;" onclick="saveSettings()">保存设置</button>
        </div>
    </div>
</div>

<!-- Add/Edit User Modal -->
<div class="modal-overlay" id="userModal">
    <div class="modal">
        <h2 id="userModalTitle">添加 FTP 用户</h2>
        <input type="hidden" id="editUserName">
        <div class="form-group">
            <label>用户名</label>
            <input type="text" id="modalUsername" placeholder="输入用户名">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" id="modalPassword" placeholder="输入密码">
        </div>
        <div class="form-group">
            <label>主目录</label>
            <input type="text" id="modalHomeDir" placeholder="例如: ./ftp_root/user1">
        </div>
        <div class="form-group">
            <label><input type="checkbox" id="modalWrite" checked> 允许写入</label>
        </div>
        <div class="modal-actions">
            <button class="btn" style="background:#eee;" onclick="closeUserModal()">取消</button>
            <button class="btn btn-primary" style="width:auto;" onclick="saveUser()">保存</button>
        </div>
    </div>
</div>

<script>
let authToken = localStorage.getItem('ftp_admin_token') || '';

// Check auth on load
window.onload = function() {
    if (authToken) {
        checkAuth();
    }
};

function checkAuth() {
    fetch('/api/status', {
        headers: { 'Authorization': 'Bearer ' + authToken }
    }).then(r => {
        if (r.ok) {
            showDashboard();
        } else {
            showLogin();
        }
    }).catch(() => showLogin());
}

function showLogin() {
    document.getElementById('loginPage').style.display = 'flex';
    document.getElementById('appContainer').style.display = 'none';
}

function showDashboard() {
    document.getElementById('loginPage').style.display = 'none';
    document.getElementById('appContainer').style.display = 'block';
    loadStatus();
    loadUsers();
    loadConfig();
}

function doLogin() {
    const username = document.getElementById('loginUser').value;
    const password = document.getElementById('loginPass').value;
    const errorEl = document.getElementById('loginError');

    if (!username || !password) {
        errorEl.textContent = '请输入用户名和密码';
        return;
    }

    fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
    }).then(r => r.json()).then(data => {
        if (data.token) {
            authToken = data.token;
            localStorage.setItem('ftp_admin_token', authToken);
            showDashboard();
        } else {
            errorEl.textContent = data.error || '登录失败';
        }
    }).catch(() => {
        errorEl.textContent = '网络错误';
    });
}

function doLogout() {
    fetch('/api/logout', {
        headers: { 'Authorization': 'Bearer ' + authToken }
    }).finally(() => {
        authToken = '';
        localStorage.removeItem('ftp_admin_token');
        showLogin();
    });
}

function loadStatus() {
    fetch('/api/status', {
        headers: { 'Authorization': 'Bearer ' + authToken }
    }).then(r => r.json()).then(data => {
        document.getElementById('statFtpPort').textContent = data.ftpPort;
        document.getElementById('statWebPort').textContent = data.webPort;
        document.getElementById('statUserCount').textContent = data.userCount;
        document.getElementById('infoRootDir').textContent = data.rootDir;
    });
}

function loadConfig() {
    fetch('/api/config', {
        headers: { 'Authorization': 'Bearer ' + authToken }
    }).then(r => r.json()).then(data => {
        document.getElementById('cfgFtpHost').value = data.ftp.host;
        document.getElementById('cfgFtpPort').value = data.ftp.port;
        document.getElementById('cfgPassiveMin').value = data.ftp.passivePortMin;
        document.getElementById('cfgPassiveMax').value = data.ftp.passivePortMax;
        document.getElementById('cfgRootDir').value = data.ftp.rootDir;
        document.getElementById('cfgWebHost').value = data.web.host;
        document.getElementById('cfgWebPort').value = data.web.port;
        document.getElementById('infoPassiveRange').textContent = data.ftp.passivePortMin + ' - ' + data.ftp.passivePortMax;
        document.getElementById('infoWebAddr').textContent = 'http://' + data.web.host + ':' + data.web.port;
    });
}

function loadUsers() {
    fetch('/api/users', {
        headers: { 'Authorization': 'Bearer ' + authToken }
    }).then(r => r.json()).then(users => {
        const tbody = document.getElementById('userTableBody');
        tbody.innerHTML = '';
        if (users && users.length > 0) {
            users.forEach(u => {
                const tr = document.createElement('tr');
                const writeBadge = u.write ? '<span class="badge badge-success">可写</span>' : '<span class="badge badge-secondary">只读</span>';
                tr.innerHTML =
                    '<td>' + u.username + '</td>' +
                    '<td>' + u.homeDir + '</td>' +
                    '<td>' + writeBadge + '</td>' +
                    '<td class="actions-cell">' +
                        '<button class="btn btn-sm" style="background:#667eea;color:white;" onclick="editUser(\'' + u.username + '\', \'' + u.homeDir + '\', ' + u.write + ')">编辑</button>' +
                        '<button class="btn btn-sm btn-danger" onclick="deleteUser(\'' + u.username + '\')">删除</button>' +
                    '</td>';
                tbody.appendChild(tr);
            });
        } else {
            tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:#888;">暂无用户</td></tr>';
        }
    });
}

function showSection(name, el) {
    document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
    document.getElementById('section-' + name).classList.add('active');
    document.querySelectorAll('.sidebar a').forEach(a => a.classList.remove('active'));
    el.classList.add('active');

    if (name === 'dashboard') { loadStatus(); loadConfig(); }
    if (name === 'users') { loadUsers(); }
    if (name === 'settings') { loadConfig(); }
}

function showAddUserModal() {
    document.getElementById('userModalTitle').textContent = '添加 FTP 用户';
    document.getElementById('editUserName').value = '';
    document.getElementById('modalUsername').value = '';
    document.getElementById('modalUsername').disabled = false;
    document.getElementById('modalPassword').value = '';
    document.getElementById('modalHomeDir').value = '';
    document.getElementById('modalWrite').checked = true;
    document.getElementById('userModal').classList.add('show');
}

function editUser(username, homeDir, write) {
    document.getElementById('userModalTitle').textContent = '编辑 FTP 用户';
    document.getElementById('editUserName').value = username;
    document.getElementById('modalUsername').value = username;
    document.getElementById('modalUsername').disabled = true;
    document.getElementById('modalPassword').value = '';
    document.getElementById('modalPassword').placeholder = '留空则不修改密码';
    document.getElementById('modalHomeDir').value = homeDir;
    document.getElementById('modalWrite').checked = write;
    document.getElementById('userModal').classList.add('show');
}

function closeUserModal() {
    document.getElementById('userModal').classList.remove('show');
    document.getElementById('modalPassword').placeholder = '输入密码';
}

function saveUser() {
    const editUser = document.getElementById('editUserName').value;
    const username = document.getElementById('modalUsername').value;
    const password = document.getElementById('modalPassword').value;
    const homeDir = document.getElementById('modalHomeDir').value;
    const write = document.getElementById('modalWrite').checked;

    if (!username) { showToast('请输入用户名', 'error'); return; }

    if (editUser) {
        // Update existing user
        const user = { username, homeDir, write };
        if (password) user.password = password;
        else {
            // Keep existing password - send a flag
            user.keepPassword = true;
        }
        fetch('/api/users/update', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken },
            body: JSON.stringify({ username: editUser, user })
        }).then(r => r.json()).then(data => {
            if (data.status === 'ok') {
                showToast('用户已更新');
                loadUsers();
                closeUserModal();
            } else {
                showToast(data.error || '更新失败', 'error');
            }
        });
    } else {
        // Add new user
        if (!password) { showToast('请输入密码', 'error'); return; }
        fetch('/api/users/add', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken },
            body: JSON.stringify({ username, password, homeDir, write })
        }).then(r => r.json()).then(data => {
            if (data.status === 'ok') {
                showToast('用户已添加');
                loadUsers();
                closeUserModal();
            } else {
                showToast(data.error || '添加失败', 'error');
            }
        });
    }
}

function deleteUser(username) {
    if (!confirm('确定要删除用户 "' + username + '" 吗？')) return;

    fetch('/api/users/delete', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken },
        body: JSON.stringify({ username })
    }).then(r => r.json()).then(data => {
        if (data.status === 'ok') {
            showToast('用户已删除');
            loadUsers();
        } else {
            showToast(data.error || '删除失败', 'error');
        }
    });
}

function saveSettings() {
    const adminPass = document.getElementById('cfgAdminPass').value;
    const adminPassConfirm = document.getElementById('cfgAdminPassConfirm').value;

    if (adminPass && adminPass !== adminPassConfirm) {
        showToast('两次密码输入不一致', 'error');
        return;
    }

    const update = {
        ftp: {
            host: document.getElementById('cfgFtpHost').value,
            port: parseInt(document.getElementById('cfgFtpPort').value),
            passivePortMin: parseInt(document.getElementById('cfgPassiveMin').value),
            passivePortMax: parseInt(document.getElementById('cfgPassiveMax').value),
            rootDir: document.getElementById('cfgRootDir').value
        },
        web: {
            host: document.getElementById('cfgWebHost').value,
            port: parseInt(document.getElementById('cfgWebPort').value)
        }
    };

    if (adminPass) {
        update.adminPassword = adminPass;
    }

    fetch('/api/config/update', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken },
        body: JSON.stringify(update)
    }).then(r => r.json()).then(data => {
        if (data.status === 'ok') {
            showToast('设置已保存，部分设置需重启服务生效');
            document.getElementById('cfgAdminPass').value = '';
            document.getElementById('cfgAdminPassConfirm').value = '';
            loadConfig();
            loadStatus();
        } else {
            showToast(data.error || '保存失败', 'error');
        }
    });
}

function showToast(msg, type) {
    const toast = document.createElement('div');
    toast.className = 'toast ' + (type === 'error' ? 'toast-error' : 'toast-success');
    toast.textContent = msg;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}

// Handle Enter key on login
document.getElementById('loginPass').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') doLogin();
});
</script>
</body>
</html>
`