224 lines
9.8 KiB
HTML
224 lines
9.8 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>文档在线管理系统</title>
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- 导航栏 -->
|
||
|
|
<nav class="navbar">
|
||
|
|
<div class="nav-container">
|
||
|
|
<h1 class="nav-logo">📄 文档管理系统</h1>
|
||
|
|
<div class="nav-menu" id="navMenu">
|
||
|
|
<span class="user-info" id="userInfo" style="display: none;"></span>
|
||
|
|
<button class="nav-btn" id="loginBtn">登录</button>
|
||
|
|
<button class="nav-btn" id="registerBtn">注册</button>
|
||
|
|
<button class="nav-btn" id="logoutBtn" style="display: none;">登出</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- 主要内容区域 -->
|
||
|
|
<main class="main-content">
|
||
|
|
<!-- 登录表单 -->
|
||
|
|
<div id="loginSection" class="form-section">
|
||
|
|
<h2>用户登录</h2>
|
||
|
|
<form id="loginForm" class="auth-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="loginUsername">用户名:</label>
|
||
|
|
<input type="text" id="loginUsername" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="loginPassword">密码:</label>
|
||
|
|
<input type="password" id="loginPassword" required>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn-primary">登录</button>
|
||
|
|
<p>还没有账户？<a href="#" id="showRegister">立即注册</a></p>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 注册表单 -->
|
||
|
|
<div id="registerSection" class="form-section" style="display: none;">
|
||
|
|
<h2>用户注册</h2>
|
||
|
|
<form id="registerForm" class="auth-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="registerUsername">用户名:</label>
|
||
|
|
<input type="text" id="registerUsername" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="registerEmail">邮箱:</label>
|
||
|
|
<input type="email" id="registerEmail" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="registerFullName">姓名:</label>
|
||
|
|
<input type="text" id="registerFullName">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="registerPassword">密码:</label>
|
||
|
|
<input type="password" id="registerPassword" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group checkbox-group">
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" id="registerIsAdmin"> 注册为管理员
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn-primary">注册</button>
|
||
|
|
<p>已有账户？<a href="#" id="showLogin">立即登录</a></p>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 主界面（登录后显示） -->
|
||
|
|
<div id="mainSection" style="display: none;">
|
||
|
|
<!-- 用户信息面板 -->
|
||
|
|
<div class="user-panel">
|
||
|
|
<h2>欢迎, <span id="currentUserName"></span>!</h2>
|
||
|
|
<div class="user-actions">
|
||
|
|
<button class="btn-secondary" id="editProfileBtn">编辑个人信息</button>
|
||
|
|
<button class="btn-secondary" id="viewLogsBtn">查看操作日志</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 用户管理（仅管理员可见） -->
|
||
|
|
<div id="userManagementSection" class="user-management-section" style="display: none;">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2>用户管理</h2>
|
||
|
|
<button class="btn-primary" id="refreshUsersBtn">刷新用户列表</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 用户列表 -->
|
||
|
|
<div id="usersList" class="users-list">
|
||
|
|
<!-- 用户列表将通过JavaScript动态生成 -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 文档管理 -->
|
||
|
|
<div class="documents-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<h2>文档管理</h2>
|
||
|
|
<button class="btn-primary" id="createDocBtn">创建新文档</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 文档列表 -->
|
||
|
|
<div id="documentsList" class="documents-list">
|
||
|
|
<!-- 文档列表将通过JavaScript动态生成 -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 编辑个人信息模态框 -->
|
||
|
|
<div id="editProfileModal" class="modal" style="display: none;">
|
||
|
|
<div class="modal-content">
|
||
|
|
<span class="close" id="closeEditModal">×</span>
|
||
|
|
<h3>编辑个人信息</h3>
|
||
|
|
<form id="editProfileForm">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="editEmail">邮箱:</label>
|
||
|
|
<input type="email" id="editEmail" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="editFullName">姓名:</label>
|
||
|
|
<input type="text" id="editFullName">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="editPassword">新密码（可选）:</label>
|
||
|
|
<input type="password" id="editPassword" placeholder="留空则不修改密码">
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn-primary">保存修改</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 创建文档模态框 -->
|
||
|
|
<div id="createDocModal" class="modal" style="display: none;">
|
||
|
|
<div class="modal-content">
|
||
|
|
<span class="close" id="closeCreateDocModal">×</span>
|
||
|
|
<h3>创建新文档</h3>
|
||
|
|
<form id="createDocForm">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="docTitle">标题:</label>
|
||
|
|
<input type="text" id="docTitle" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="docDescription">描述:</label>
|
||
|
|
<textarea id="docDescription" rows="3"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="docContent">内容:</label>
|
||
|
|
<textarea id="docContent" rows="6" required></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="docType">文件类型:</label>
|
||
|
|
<select id="docType">
|
||
|
|
<option value="txt">文本文件</option>
|
||
|
|
<option value="md">Markdown</option>
|
||
|
|
<option value="html">HTML</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" id="docPublic"> 公开文档
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn-primary">创建文档</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 编辑文档模态框 -->
|
||
|
|
<div id="editDocModal" class="modal" style="display: none;">
|
||
|
|
<div class="modal-content">
|
||
|
|
<span class="close" id="closeEditDocModal">×</span>
|
||
|
|
<h3>编辑文档</h3>
|
||
|
|
<form id="editDocForm">
|
||
|
|
<input type="hidden" id="editDocId">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="editDocTitle">标题:</label>
|
||
|
|
<input type="text" id="editDocTitle" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="editDocDescription">描述:</label>
|
||
|
|
<textarea id="editDocDescription" rows="3"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="editDocContent">内容:</label>
|
||
|
|
<textarea id="editDocContent" rows="6" required></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="editDocType">文件类型:</label>
|
||
|
|
<select id="editDocType">
|
||
|
|
<option value="txt">文本文件</option>
|
||
|
|
<option value="md">Markdown</option>
|
||
|
|
<option value="html">HTML</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" id="editDocPublic"> 公开文档
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn-primary">保存修改</button>
|
||
|
|
<button type="button" class="btn-danger" id="deleteDocBtn">删除文档</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 操作日志模态框 -->
|
||
|
|
<div id="logsModal" class="modal" style="display: none;">
|
||
|
|
<div class="modal-content">
|
||
|
|
<span class="close" id="closeLogsModal">×</span>
|
||
|
|
<h3>操作日志</h3>
|
||
|
|
<div id="logsList" class="logs-list">
|
||
|
|
<!-- 日志列表将通过JavaScript动态生成 -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- 消息提示 -->
|
||
|
|
<div id="message" class="message" style="display: none;"></div>
|
||
|
|
|
||
|
|
<script src="app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|