wcchiu/wen_0908
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
wcchiu
2025-09-08 17:06:58 +08:00
commit b135a7aa20
11 changed files with 1531 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
static/index.html Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用戶管理系統</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>用戶管理系統</h1>
<div class="nav-links">
<a href="add_user.html" class="nav-link">新增用戶</a>
</div>
<!-- 過濾和分頁控制 -->
<div class="filter-container">
<div class="filter-group">
<label for="min-age">最小年齡:</label>
<input type="number" id="min-age" min="0" max="150">
</div>
<div class="filter-group">
<label for="max-age">最大年齡:</label>
<input type="number" id="max-age" min="0" max="150">
</div>
<button id="filter-btn">過濾</button>
<button id="reset-filter-btn">重置</button>
</div>
<!-- 用戶列表 -->
<div class="table-container">
<table id="users-table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>電子郵件</th>
<th>年齡</th>
<th>操作</th>
</tr>
</thead>
<tbody id="users-list">
<!-- 用戶資料將由 JavaScript 動態填充 -->
</tbody>
</table>
</div>
<!-- 分頁控制 -->
<div class="pagination-container">
<button id="prev-page" disabled>上一頁</button>
<span id="page-info">第 <span id="current-page">1</span> 頁，共 <span id="total-pages">1</span> 頁</span>
<button id="next-page" disabled>下一頁</button>
<div class="page-size">
<label for="page-limit">每頁顯示:</label>
<select id="page-limit">
<option value="5">5</option>
<option value="10" selected>10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</div>
</div>
<!-- 批量匯入 -->
<div class="import-container">
<h2>批量匯入用戶</h2>
<form id="import-form" enctype="multipart/form-data">
<div class="form-group">
<label for="import-file">選擇檔案 (Excel 或 CSV):</label>
<input type="file" id="import-file" name="file" accept=".csv, .xlsx, .xls" required>
</div>
<div class="form-actions">
<button type="submit" id="import-btn">匯入</button>
</div>
</form>
<div class="import-info">
<p>支援的檔案格式: CSV, Excel (.xlsx, .xls)</p>
<p>檔案必須包含以下欄位: name, email, age</p>
</div>
</div>
<!-- 編輯用戶表單 (僅在編輯模式顯示) -->
<div class="form-container" id="edit-form-container" style="display: none;">
<h2 id="form-title">編輯用戶</h2>
<form id="user-form">
<input type="hidden" id="user-id">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" id="name" required>
</div>
<div class="form-group">
<label for="email">電子郵件:</label>
<input type="email" id="email" required>
</div>
<div class="form-group">
<label for="age">年齡:</label>
<input type="number" id="age" min="0" required>
</div>
<div class="form-actions">
<button type="submit" id="save-btn">更新</button>
<button type="button" id="cancel-btn">取消</button>
</div>
</form>
</div>
<!-- 訊息提示 -->
<div id="message" class="message"></div>
</div>
<script src="js/script.js"></script>
</body>
</html>