Your Name
342 lines
15 KiB
HTML
342 lines
15 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="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>
|
|
|
|
<!-- 系统设置 -->
|
|
<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>
|
|
|
|
<!-- 提示消息 -->
|
|
<div id="toast" class="toast"></div>
|
|
|
|
<script src="/js/app.js"></script>
|
|
</body>
|
|
</html>
|