266 lines
12 KiB
HTML
266 lines
12 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="css/style.css">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- 登录页面 -->
|
|
<div id="loginPage" class="login-page">
|
|
<div class="login-container">
|
|
<div class="login-header">
|
|
<i class="fas fa-tasks"></i>
|
|
<h1>工作任务管理系统</h1>
|
|
</div>
|
|
<form id="loginForm" class="login-form">
|
|
<div class="form-group">
|
|
<label for="loginUsername">
|
|
<i class="fas fa-user"></i> 用户名
|
|
</label>
|
|
<input type="text" id="loginUsername" name="username" required autofocus>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="loginPassword">
|
|
<i class="fas fa-lock"></i> 密码
|
|
</label>
|
|
<input type="password" id="loginPassword" name="password" required>
|
|
</div>
|
|
<div id="loginError" class="error-message" style="display: none;"></div>
|
|
<button type="submit" class="btn btn-primary btn-block">
|
|
<i class="fas fa-sign-in-alt"></i> 登录
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主应用页面 -->
|
|
<div id="mainApp" class="container" style="display: none;">
|
|
<!-- 头部 -->
|
|
<header class="header">
|
|
<h1><i class="fas fa-tasks"></i> 工作任务管理系统</h1>
|
|
<div class="header-actions">
|
|
<span class="user-info">
|
|
<i class="fas fa-user-circle"></i>
|
|
<span id="currentUsername"></span>
|
|
</span>
|
|
<button id="addTaskBtn" class="btn btn-primary">
|
|
<i class="fas fa-plus"></i> 添加任务
|
|
</button>
|
|
<button id="reportBtn" class="btn btn-secondary">
|
|
<i class="fas fa-chart-bar"></i> 查看报表
|
|
</button>
|
|
<button id="timeHistoryBtn" class="btn btn-secondary">
|
|
<i class="fas fa-history"></i> 时间历史
|
|
</button>
|
|
<button id="logoutBtn" class="btn btn-outline">
|
|
<i class="fas fa-sign-out-alt"></i> 退出
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主要内容区域 -->
|
|
<main class="main-content">
|
|
<!-- 任务列表 -->
|
|
<section class="task-section">
|
|
<h2>任务列表</h2>
|
|
<div class="task-filters" role="group" aria-label="任务状态筛选">
|
|
<button type="button" class="btn btn-secondary filter-btn active" data-filter="all">
|
|
<i class="fas fa-globe"></i> 全部
|
|
</button>
|
|
<button type="button" class="btn btn-secondary filter-btn" data-filter="pending">
|
|
<i class="fas fa-circle-notch"></i> 未开始
|
|
</button>
|
|
<button type="button" class="btn btn-secondary filter-btn" data-filter="in_progress">
|
|
<i class="fas fa-play-circle"></i> 进行中
|
|
</button>
|
|
<button type="button" class="btn btn-secondary filter-btn" data-filter="completed">
|
|
<i class="fas fa-check-circle"></i> 已完成
|
|
</button>
|
|
</div>
|
|
<div class="task-exclusions" role="group" aria-label="排除任务状态">
|
|
<span class="exclusion-label">
|
|
<i class="fas fa-ban"></i> 排除状态：
|
|
</span>
|
|
<button type="button" class="btn btn-outline exclusion-btn" data-status="pending">
|
|
未开始
|
|
</button>
|
|
<button type="button" class="btn btn-outline exclusion-btn" data-status="in_progress">
|
|
进行中
|
|
</button>
|
|
<button type="button" class="btn btn-outline exclusion-btn" data-status="completed">
|
|
已完成
|
|
</button>
|
|
</div>
|
|
<div id="taskList" class="task-list">
|
|
<!-- 任务项将通过JavaScript动态生成 -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 时间统计面板 -->
|
|
<aside class="stats-panel">
|
|
<h3>今日统计</h3>
|
|
<div class="stats-card">
|
|
<div class="stat-item">
|
|
<span class="stat-label">总时长</span>
|
|
<span id="totalTime" class="stat-value">00:00:00</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">完成任务</span>
|
|
<span id="completedTasks" class="stat-value">0</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">进行中</span>
|
|
<span id="activeTasks" class="stat-value">0</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 添加/编辑任务模态框 -->
|
|
<div id="taskModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="modalTitle">添加任务</h3>
|
|
<span class="close">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="taskForm">
|
|
<div class="form-group">
|
|
<label for="taskTitle">任务标题 *</label>
|
|
<input type="text" id="taskTitle" name="title" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="taskDescription">任务描述</label>
|
|
<textarea id="taskDescription" name="description" rows="4" placeholder="描述任务的具体内容和要求..."></textarea>
|
|
<div class="form-actions">
|
|
<button type="button" id="polishBtn" class="btn btn-outline">
|
|
<i class="fas fa-magic"></i> AI润色
|
|
</button>
|
|
</div>
|
|
<div id="polishedDescription" class="polished-content" style="display: none;">
|
|
<h4>润色后的描述：</h4>
|
|
<div class="polished-text"></div>
|
|
<div class="polished-actions">
|
|
<button type="button" id="usePolishedBtn" class="btn btn-primary btn-sm">使用润色版本</button>
|
|
<button type="button" id="discardPolishedBtn" class="btn btn-outline btn-sm">保持原版</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="taskStatus">状态</label>
|
|
<select id="taskStatus" name="status">
|
|
<option value="pending">待开始</option>
|
|
<option value="in_progress">进行中</option>
|
|
<option value="completed">已完成</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="cancelBtn" class="btn btn-outline">取消</button>
|
|
<button type="button" id="saveBtn" class="btn btn-primary">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 报表模态框 -->
|
|
<div id="reportModal" class="modal">
|
|
<div class="modal-content large">
|
|
<div class="modal-header">
|
|
<h3>时间统计报表</h3>
|
|
<span class="close">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="report-controls">
|
|
<div class="form-group">
|
|
<label for="reportDate">选择日期</label>
|
|
<input type="date" id="reportDate">
|
|
</div>
|
|
<button id="loadReportBtn" class="btn btn-primary">加载报表</button>
|
|
</div>
|
|
<div id="reportContent" class="report-content">
|
|
<!-- 报表内容将通过JavaScript动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 时间历史模态框 -->
|
|
<div id="timeHistoryModal" class="modal">
|
|
<div class="modal-content large">
|
|
<div class="modal-header">
|
|
<h3>时间历史记录</h3>
|
|
<span class="close">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="history-controls">
|
|
<div class="form-group">
|
|
<label for="historyDays">查看天数</label>
|
|
<select id="historyDays">
|
|
<option value="7">最近7天</option>
|
|
<option value="14">最近14天</option>
|
|
<option value="30">最近30天</option>
|
|
<option value="90">最近90天</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="historyTaskFilter">任务筛选</label>
|
|
<select id="historyTaskFilter">
|
|
<option value="">所有任务</option>
|
|
</select>
|
|
</div>
|
|
<button id="loadHistoryBtn" class="btn btn-primary">加载历史</button>
|
|
</div>
|
|
<div id="timeHistoryContent" class="history-content">
|
|
<!-- 时间历史内容将通过JavaScript动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 任务时间历史模态框 -->
|
|
<div id="taskTimeHistoryModal" class="modal">
|
|
<div class="modal-content large">
|
|
<div class="modal-header">
|
|
<h3 id="taskHistoryTitle">任务时间历史</h3>
|
|
<span class="close">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="history-controls">
|
|
<div class="form-group">
|
|
<label for="taskHistoryDays">查看天数</label>
|
|
<select id="taskHistoryDays">
|
|
<option value="7">最近7天</option>
|
|
<option value="14">最近14天</option>
|
|
<option value="30">最近30天</option>
|
|
<option value="90">最近90天</option>
|
|
</select>
|
|
</div>
|
|
<button id="loadTaskHistoryBtn" class="btn btn-primary">加载历史</button>
|
|
</div>
|
|
<div id="taskTimeHistoryContent" class="history-content">
|
|
<!-- 任务时间历史内容将通过JavaScript动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 加载提示 -->
|
|
<div id="loadingOverlay" class="loading-overlay" style="display: none;">
|
|
<div class="loading-spinner">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<span>处理中...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript文件 -->
|
|
<script src="js/api.js"></script>
|
|
<script src="js/timer.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|