AI-Agent
/
FTP-Server


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424
							<!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>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <!-- 登录页面 -->
    <div id="login-page" class="login-page">
        <div class="login-card">
            <h1>FTP Server</h1>
            <p>Web 管理控制台</p>
            <form id="login-form">
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" id="login-username" value="admin" required>
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" id="login-password" value="admin123" required>
                </div>
                <button type="submit" class="btn btn-primary btn-block">登 录</button>
            </form>
        </div>
    </div>

    <!-- 主界面 -->
    <div id="main-app" class="main-app" style="display:none">
        <!-- 侧边栏 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <h2>FTP Server</h2>
            </div>
            <ul class="sidebar-menu">
                <li class="active" data-page="dashboard">
                    <span class="icon">&#9632;</span> 仪表盘
                </li>
                <li data-page="users">
                    <span class="icon">&#9775;</span> 用户管理
                </li>
                <li data-page="files">
                    <span class="icon">&#128193;</span> 文件管理
                </li>
                <li data-page="logs">
                    <span class="icon">&#128196;</span> 操作日志
                </li>
                <li data-page="online">
                    <span class="icon">&#128279;</span> 在线用户
                </li>
                <li data-page="ip-rules">
                    <span class="icon">&#128737;</span> IP白/黑名单
                </li>
                <li data-page="settings">
                    <span class="icon">&#9881;</span> 系统设置
                </li>
            </ul>
            <div class="sidebar-footer">
                <button id="logout-btn" class="btn btn-sm">退出登录</button>
            </div>
        </nav>

        <!-- 内容区 -->
        <main class="content">
            <!-- 仪表盘 -->
            <div id="page-dashboard" class="page active">
                <h2>仪表盘</h2>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-value" id="stat-users">-</div>
                        <div class="stat-label">总用户数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="stat-enabled">-</div>
                        <div class="stat-label">启用用户</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="stat-online">-</div>
                        <div class="stat-label">在线用户</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="stat-today-logins">-</div>
                        <div class="stat-label">今日登录</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="stat-today-uploads">-</div>
                        <div class="stat-label">今日上传</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="stat-today-downloads">-</div>
                        <div class="stat-label">今日下载</div>
                    </div>
                </div>
                <div class="stats-grid" style="margin-top:20px">
                    <div class="stat-card wide">
                        <div class="stat-value" id="stat-upload-bytes">-</div>
                        <div class="stat-label">总上传量</div>
                    </div>
                    <div class="stat-card wide">
                        <div class="stat-value" id="stat-download-bytes">-</div>
                        <div class="stat-label">总下载量</div>
                    </div>
                </div>
            </div>

            <!-- 用户管理 -->
            <div id="page-users" class="page">
                <div class="page-header">
                    <h2>用户管理</h2>
                    <button class="btn btn-primary" onclick="showAddUser()">添加用户</button>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>主目录</th>
                            <th>权限</th>
                            <th>配额</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="users-tbody"></tbody>
                </table>
            </div>

            <!-- 文件管理 -->
            <div id="page-files" class="page">
                <div class="page-header">
                    <h2>文件管理</h2>
                    <div class="file-actions">
                        <button class="btn btn-primary" onclick="uploadFile()">上传文件</button>
                        <button class="btn" onclick="createFolder()">新建文件夹</button>
                    </div>
                </div>
                <div class="breadcrumb" id="file-breadcrumb">
                    <span>/</span>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>大小</th>
                            <th>修改时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="files-tbody"></tbody>
                </table>
            </div>

            <!-- 操作日志 -->
            <div id="page-logs" class="page">
                <div class="page-header">
                    <h2>操作日志</h2>
                    <div class="filter-bar">
                        <input type="text" id="log-username" placeholder="用户名筛选" class="input-sm">
                        <select id="log-action" class="input-sm">
                            <option value="">全部操作</option>
                            <option value="login">登录</option>
                            <option value="login_failed">登录失败</option>
                            <option value="upload">上传</option>
                            <option value="download">下载</option>
                            <option value="delete">删除</option>
                        </select>
                        <button class="btn btn-sm" onclick="loadLogs()">查询</button>
                    </div>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>用户</th>
                            <th>IP</th>
                            <th>操作</th>
                            <th>文件路径</th>
                            <th>大小</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody id="logs-tbody"></tbody>
                </table>
                <div class="pagination" id="logs-pagination"></div>
            </div>

            <!-- 在线用户 -->
            <div id="page-online" class="page">
                <h2>在线用户</h2>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>用户名</th>
                            <th>IP地址</th>
                            <th>登录时间</th>
                            <th>最后活动</th>
                            <th>当前目录</th>
                        </tr>
                    </thead>
                    <tbody id="online-tbody"></tbody>
                </table>
            </div>

            <!-- IP白/黑名单 -->
            <div id="page-ip-rules" class="page">
                <div class="page-header">
                    <h2>IP 白名单/黑名单</h2>
                    <button class="btn btn-primary" onclick="showAddIPRule()">添加规则</button>
                </div>
                <div class="ip-rules-info" style="margin-bottom:16px;padding:12px;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.08)">
                    <p style="color:#666;font-size:13px;line-height:1.8">
                        <strong>规则说明：</strong><br>
                        - 支持<strong>单IP</strong>（如 192.168.1.1）、<strong>CIDR</strong>（如 192.168.1.0/24）、<strong>IP范围</strong>（如 192.168.1.1-192.168.1.100）<br>
                        - <strong>全局规则</strong>：对所有用户生效，在连接时即检查<br>
                        - <strong>用户规则</strong>：仅对指定用户生效，在用户登录时检查<br>
                        - <strong>优先级</strong>：全局黑名单 > 全局白名单 > 用户黑名单 > 用户白名单
                    </p>
                </div>
                <div class="filter-bar" style="margin-bottom:12px">
                    <select id="ip-rule-filter" class="input-sm" onchange="loadIPRules()">
                        <option value="">全部规则</option>
                        <option value="global">仅全局规则</option>
                        <option value="user">仅用户规则</option>
                    </select>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>作用范围</th>
                            <th>IP地址/网段</th>
                            <th>类型</th>
                            <th>备注</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="ip-rules-tbody"></tbody>
                </table>
            </div>

            <!-- 系统设置 -->
            <div id="page-settings" class="page">
                <h2>系统设置</h2>
                <div class="settings-section">
                    <h3>FTP设置</h3>
                    <div class="form-grid">
                        <div class="form-group">
                            <label>FTP端口</label>
                            <input type="number" id="cfg-ftp-port" class="input-sm">
                        </div>
                        <div class="form-group">
                            <label>被动端口范围(起始)</label>
                            <input type="number" id="cfg-ftp-passive-min" class="input-sm">
                        </div>
                        <div class="form-group">
                            <label>被动端口范围(结束)</label>
                            <input type="number" id="cfg-ftp-passive-max" class="input-sm">
                        </div>
                        <div class="form-group">
                            <label>最大连接数</label>
                            <input type="number" id="cfg-ftp-max-conn" class="input-sm">
                        </div>
                        <div class="form-group">
                            <label>空闲超时(秒)</label>
                            <input type="number" id="cfg-ftp-idle-timeout" class="input-sm">
                        </div>
                        <div class="form-group">
                            <label>启用匿名访问</label>
                            <select id="cfg-ftp-anonymous" class="input-sm">
                                <option value="true">是</option>
                                <option value="false">否</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="settings-section">
                    <h3>管理员设置</h3>
                    <div class="form-grid">
                        <div class="form-group">
                            <label>管理员用户名</label>
                            <input type="text" id="cfg-admin-username" class="input-sm">
                        </div>
                        <div class="form-group">
                            <label>新密码(留空不修改)</label>
                            <input type="password" id="cfg-admin-password" class="input-sm" placeholder="留空不修改">
                        </div>
                    </div>
                </div>
                <button class="btn btn-primary" onclick="saveConfig()" style="margin-top:20px">保存设置</button>
            </div>
        </main>
    </div>

    <!-- 添加/编辑用户对话框 -->
    <div id="user-modal" class="modal" style="display:none">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="user-modal-title">添加用户</h3>
                <span class="modal-close" onclick="closeUserModal()">&times;</span>
            </div>
            <form id="user-form">
                <input type="hidden" id="user-edit-mode" value="add">
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" id="user-username" required>
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" id="user-password" required>
                </div>
                <div class="form-group">
                    <label>主目录</label>
                    <input type="text" id="user-homedir" placeholder="留空自动设置为 /ftp_root/用户名">
                    <small>目录不存在时将自动创建</small>
                </div>
                <div class="form-group">
                    <label>权限</label>
                    <select id="user-permissions">
                        <option value="read">只读</option>
                        <option value="write">只写</option>
                        <option value="read,write" selected>读写</option>
                    </select>
                </div>
                <div class="form-grid">
                    <div class="form-group">
                        <label>空间配额(MB, 0=无限制)</label>
                        <input type="number" id="user-quota-size" value="0">
                    </div>
                    <div class="form-group">
                        <label>文件数配额(0=无限制)</label>
                        <input type="number" id="user-quota-files" value="0">
                    </div>
                    <div class="form-group">
                        <label>上传限速(KB/s, 0=无限制)</label>
                        <input type="number" id="user-upload-rate" value="0">
                    </div>
                    <div class="form-group">
                        <label>下载限速(KB/s, 0=无限制)</label>
                        <input type="number" id="user-download-rate" value="0">
                    </div>
                </div>
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="user-enabled" checked> 启用账户
                    </label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" onclick="closeUserModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 文件上传对话框 -->
    <div id="upload-modal" class="modal" style="display:none">
        <div class="modal-content">
            <div class="modal-header">
                <h3>上传文件</h3>
                <span class="modal-close" onclick="closeUploadModal()">&times;</span>
            </div>
            <form id="upload-form">
                <div class="form-group">
                    <input type="file" id="upload-file" required>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" onclick="closeUploadModal()">取消</button>
                    <button type="submit" class="btn btn-primary">上传</button>
                </div>
            </form>
        </div>
    </div>

    <!-- IP规则弹窗 -->
    <div id="ip-rule-modal" class="modal" style="display:none">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="ip-rule-modal-title">添加IP规则</h3>
                <span class="modal-close" onclick="closeIPRuleModal()">&times;</span>
            </div>
            <form id="ip-rule-form">
                <input type="hidden" id="ip-rule-edit-id" value="">
                <div class="form-group">
                    <label>作用用户（留空为全局规则）</label>
                    <input type="text" id="ip-rule-username" placeholder="留空表示全局规则，填入用户名表示仅对该用户生效">
                </div>
                <div class="form-group">
                    <label>IP地址/网段</label>
                    <input type="text" id="ip-rule-ip" placeholder="如: 192.168.1.1 或 192.168.1.0/24 或 10.0.0.1-10.0.0.255" required>
                </div>
                <div class="form-group">
                    <label>规则类型</label>
                    <select id="ip-rule-type">
                        <option value="blacklist">黑名单（禁止连接）</option>
                        <option value="whitelist">白名单（允许连接）</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>备注说明</label>
                    <input type="text" id="ip-rule-note" placeholder="可选，填写备注说明">
                </div>
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="ip-rule-enabled" checked> 启用此规则
                    </label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn" onclick="closeIPRuleModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 提示消息 -->
    <div id="toast" class="toast"></div>

    <script src="/js/app.js"></script>
</body>
</html>