Your Name
413 lines
18 KiB
HTML
413 lines
18 KiB
HTML
<!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">■</span> 仪表盘
|
||
</li>
|
||
<li data-page="users">
|
||
<span class="icon">☯</span> 用户管理
|
||
</li>
|
||
<li data-page="files">
|
||
<span class="icon">📁</span> 文件管理
|
||
</li>
|
||
<li data-page="logs">
|
||
<span class="icon">📄</span> 操作日志
|
||
</li>
|
||
<li data-page="online">
|
||
<span class="icon">🔗</span> 在线用户
|
||
</li>
|
||
<li data-page="ip-rules">
|
||
<span class="icon">🛡</span> IP白/黑名单
|
||
</li>
|
||
<li data-page="settings">
|
||
<span class="icon">⚙</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>：启用后只有白名单中的IP才能连接，黑名单中的IP会被拒绝<br>
|
||
- <strong>黑名单</strong>：黑名单中的IP将被禁止连接<br>
|
||
- 如果没有白名单规则，则所有IP默认允许（除非在黑名单中）
|
||
</p>
|
||
</div>
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>ID</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()">×</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()">×</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()">×</span>
|
||
</div>
|
||
<form id="ip-rule-form">
|
||
<input type="hidden" id="ip-rule-edit-id" value="">
|
||
<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>
|