bf1942/time-tracking-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(api): 重构数据库访问为SQLAlchemy绑定的session

Browse Source 
- 统一移除手动创建的数据库session，统一使用models模块中的db.session
- 修正项目创建接口，增加开始和结束日期的格式验证与处理
- 更新导入项目接口，使用枚举类型校验项目类型并优化异常处理
- 更新统计接口，避免多次查询假期数据，优化日期字符串处理
- 删除回滚前多余的session关闭调用，改为使用db.session.rollback()
- app.py中重构数据库初始化：统一配置SQLAlchemy，动态创建数据库路径和表
- 项目模型新增开始日期和结束日期字段支持
- 添加导入批次历史记录模型支持
- 优化工具函数中日期类型提示，移除无用导入
- 更新requirements.txt依赖版本回退，确保兼容性
- 前端菜单添加导入历史导航入口，实现页面访问路由绑定
This commit is contained in:
bf1942
2025-09-04 18:12:24 +08:00
parent ef9432f6da
commit 8938ce2708
29 changed files with 3490 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
templates/import.html Normal file
View File

@@ -0,0 +1,207 @@
<!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="/static/css/styles.css">
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<div class="nav-brand">
<h1>个人工时记录系统</h1>
</div>
<ul class="nav-menu">
<li><a href="/" class="nav-link">首页</a></li>
<li><a href="/projects" class="nav-link">项目管理</a></li>
<li><a href="/timerecords" class="nav-link">工时记录</a></li>
<li><a href="/statistics" class="nav-link">统计分析</a></li>
<li><a href="/import" class="nav-link active">导入历史</a></li>
</ul>
</div>
</nav>
<main class="main-content">
<div class="container">
<div class="page-header">
<h2>导入历史工时记录</h2>
</div>
<!-- 导入工具 -->
<div class="card" id="import-tool-card">
<div class="card-header">
<h3><a href="#" onclick="toggleCardBody(this); return false;" style="text-decoration: none; color: inherit;">手动导入数据 &#9662;</a></h3>
</div>
<div class="card-body" style="display: none;">
<p>请在下面的文本框中粘贴您的历史工时记录，每行一条。格式为：<code>月日 项目名 开始时间 结束时间 ActivityNum</code>。</p>
<p>例如：<code>8月20日 长鑫CODE/02C-FBV 9:00 17:00 9296892</code></p>
<form id="import-form">
<div class="form-group">
<label for="records-input">工时记录:</label>
<textarea id="records-input" name="records" class="form-control" rows="10" placeholder="请在此处粘贴记录..."></textarea>
</div>
<button type="submit" class="btn btn-primary">开始导入</button>
</form>
<div id="import-results" class="import-results-container" style="display: none; margin-top: 1.5rem;">
<h4>导入结果</h4>
<p>成功导入 <strong id="success-count">0</strong> 条记录。</p>
<div id="failed-records-section" style="display: none;">
<p>以下 <strong id="failure-count">0</strong> 条记录导入失败：</p>
<ul id="failed-records-list" class="failures-list"></ul>
</div>
</div>
</div>
</div>
<!-- 导入历史记录 -->
<div class="history-section" style="margin-top: 2rem;">
<h3>历史记录</h3>
<div id="import-history-list" class="import-history-grid">
<!-- 历史记录卡片将由JS动态加载 -->
<p>正在加载历史记录...</p>
</div>
</div>
</div>
</main>
<script>
// 切换卡片可见性
function toggleCardBody(element) {
const cardBody = element.closest('.card').querySelector('.card-body');
const isVisible = cardBody.style.display !== 'none';
cardBody.style.display = isVisible ? 'none' : 'block';
element.innerHTML = isVisible ? '手动导入数据 &#9662;' : '手动导入数据 &#9652;';
}
// 格式化日期
function formatImportDate(isoString) {
const date = new Date(isoString);
return date.toLocaleString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' });
}
// 加载导入历史
async function loadImportHistory() {
const listContainer = document.getElementById('import-history-list');
try {
const response = await fetch('/api/import/history');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const history = await response.json();
if (history.length === 0) {
listContainer.innerHTML = '<p>暂无导入历史记录。</p>';
return;
}
listContainer.innerHTML = ''; // 清空加载提示
history.forEach(batch => {
let statusClass = '';
switch (batch.status) {
case '成功': statusClass = 'status-success'; break;
case '部分成功': statusClass = 'status-partial'; break;
case '失败': statusClass = 'status-fail'; break;
}
const card = document.createElement('div');
card.className = 'import-card';
card.innerHTML = `
<div class="import-card-header">
<h4>批次 #${batch.id}</h4>
<span class="import-date">${formatImportDate(batch.import_date)}</span>
</div>
<div class="import-card-body">
<div class="import-card-stats">
<div class="stat-item">
<span class="stat-value" style="color: var(--success-color);">${batch.success_count}</span>
<span class="stat-label">成功</span>
</div>
<div class="stat-item">
<span class="stat-value" style="color: var(--danger-color);">${batch.failure_count}</span>
<span class="stat-label">失败</span>
</div>
<div class="stat-item">
<span class="stat-value">${batch.total_records}</span>
<span class="stat-label">总计</span>
</div>
</div>
<p><strong>源数据预览:</strong></p>
<div class="source-preview">${batch.source_preview || '无预览'}</div>
</div>
<div class="import-card-footer">
<span class="status-badge ${statusClass}">${batch.status}</span>
</div>
`;
listContainer.appendChild(card);
});
} catch (error) {
console.error('加载导入历史失败:', error);
listContainer.innerHTML = '<p style="color: var(--danger-color);">无法加载导入历史记录，请稍后重试。</p>';
}
}
// 处理导入表单提交
document.getElementById('import-form').addEventListener('submit', async function(event) {
event.preventDefault();
const recordsText = document.getElementById('records-input').value;
if (!recordsText.trim()) {
alert('请输入要导入的记录。');
return;
}
try {
const response = await fetch('/import', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ records: recordsText })
});
const result = await response.json();
const resultsContainer = document.getElementById('import-results');
const successCount = document.getElementById('success-count');
const failedSection = document.getElementById('failed-records-section');
const failureCount = document.getElementById('failure-count');
const failedList = document.getElementById('failed-records-list');
successCount.textContent = result.success_count;
failedList.innerHTML = '';
if (result.failures && result.failures.length > 0) {
failureCount.textContent = result.failure_count;
result.failures.forEach(fail => {
const li = document.createElement('li');
li.textContent = `[${fail.reason}] ${fail.line}`;
failedList.appendChild(li);
});
failedSection.style.display = 'block';
} else {
failedSection.style.display = 'none';
}
resultsContainer.style.display = 'block';
// 导入成功后清空输入框并重新加载历史
if (result.success_count > 0) {
document.getElementById('records-input').value = '';
loadImportHistory();
}
} catch (error) {
console.error('导入请求失败:', error);
alert('导入请求失败，请检查网络连接或联系管理员。');
}
});
// 页面加载时执行
document.addEventListener('DOMContentLoaded', loadImportHistory);
</script>
</body>
</html>

1
templates/index.html
View File

@@ -17,6 +17,7 @@
<li><a href="/projects" class="nav-link">项目管理</a></li>
<li><a href="/timerecords" class="nav-link">工时记录</a></li>
<li><a href="/statistics" class="nav-link">统计分析</a></li>
<li><a href="/import" class="nav-link">导入历史</a></li>
</ul>
</div>
</nav>

224
templates/projects.html Normal file
View File

@@ -0,0 +1,224 @@
<!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="/static/css/styles.css">
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<div class="nav-brand">
<h1>个人工时记录系统</h1>
</div>
<ul class="nav-menu">
<li><a href="/" class="nav-link">首页</a></li>
<li><a href="/projects" class="nav-link active">项目管理</a></li>
<li><a href="/timerecords" class="nav-link">工时记录</a></li>
<li><a href="/statistics" class="nav-link">统计分析</a></li>
<li><a href="/import" class="nav-link">导入历史</a></li>
</ul>
</div>
</nav>
<main class="main-content">
<div class="container">
<div class="page-header">
<h2>项目管理</h2>
<div class="page-actions">
<button class="btn btn-primary" onclick="showCreateProjectModal()">新建项目</button>
<button class="btn btn-secondary" onclick="showImportModal()">导入项目</button>
<select id="project-type-filter" class="form-control" onchange="filterProjects()">
<option value="">全部项目类型</option>
<option value="traditional">传统项目</option>
<option value="psi">PSI项目</option>
</select>
</div>
</div>
<!-- 项目统计 -->
<div class="stats-row">
<div class="stat-card">
<div class="stat-value" id="total-projects-count">0</div>
<div class="stat-label">总项目数</div>
</div>
<div class="stat-card">
<div class="stat-value" id="traditional-projects-count">0</div>
<div class="stat-label">传统项目</div>
</div>
<div class="stat-card">
<div class="stat-value" id="psi-projects-count">0</div>
<div class="stat-label">PSI项目</div>
</div>
</div>
<!-- 项目列表表格 -->
<div class="table-container">
<table class="data-table" id="projects-table">
<thead>
<tr>
<th>项目名称</th>
<th>项目类型</th>
<th>客户名</th>
<th>标识码</th>
<th>状态</th>
<th>项目开始时间</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="projects-tbody">
<tr>
<td colspan="7" class="text-center">加载中...</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<!-- 新建项目模态框 -->
<div id="create-project-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="modal-title">新建项目</h3>
<button class="close-btn" onclick="closeModal('create-project-modal')">&times;</button>
</div>
<form id="project-form">
<div class="modal-body">
<div class="form-group">
<label for="project_name">项目名称 *</label>
<input type="text" id="project_name" name="project_name" class="form-control" required>
</div>
<div class="form-group">
<label for="customer_name">客户名 *</label>
<input type="text" id="customer_name" name="customer_name" class="form-control"
placeholder="如：NexChip" required>
</div>
<div class="form-group">
<label for="project_type">项目类型 *</label>
<select id="project_type" name="project_type" class="form-control"
onchange="toggleProjectFields()" required>
<option value="">请选择项目类型</option>
<option value="traditional">传统项目</option>
<option value="psi">PSI项目</option>
</select>
</div>
<!-- 传统项目字段 -->
<div id="traditional-fields" style="display:none;">
<div class="form-group">
<label for="project_code">项目代码 *</label>
<input type="text" id="project_code" name="project_code"
class="form-control" placeholder="如：02C-FBV">
</div>
</div>
<!-- PSI项目字段 -->
<div id="psi-fields" style="display:none;">
<div class="form-group">
<label for="contract_number">合同号 *</label>
<input type="text" id="contract_number" name="contract_number"
class="form-control" placeholder="如：ID00462761">
</div>
<div class="form-group">
<label>项目代码</label>
<input type="text" value="PSI-PROJ" class="form-control" readonly disabled>
<small class="form-text">PSI项目统一使用代码 PSI-PROJ</small>
</div>
</div>
<div class="form-group">
<label for="description">描述</label>
<textarea id="description" name="description" class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label for="start_date">项目开始时间</label>
<input type="date" id="start_date" name="start_date" class="form-control">
</div>
<div class="form-group">
<label for="end_date">项目结束时间</label>
<input type="date" id="end_date" name="end_date" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeModal('create-project-modal')">取消</button>
<button type="submit" class="btn btn-primary">保存</button>
</div>
</form>
</div>
</div>
<!-- 导入项目模态框 -->
<div id="import-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>导入项目</h3>
<button class="close-btn" onclick="closeModal('import-modal')">&times;</button>
</div>
<div class="modal-body">
<div class="import-instructions">
<h4>CSV文件格式要求：</h4>
<p>请确保CSV文件包含以下列（按顺序）：</p>
<ul>
<li><strong>项目名称</strong> - 必填</li>
<li><strong>项目类型</strong> - 必填（traditional 或 psi）</li>
<li><strong>客户名</strong> - 必填</li>
<li><strong>项目代码</strong> - 传统项目必填，PSI项目可忽略</li>
<li><strong>合同号</strong> - PSI项目必填，传统项目可为空</li>
<li><strong>描述</strong> - 可选</li>
</ul>
</div>
<div class="form-group">
<label for="import-file">选择CSV文件</label>
<input type="file" id="import-file" accept=".csv" class="form-control">
</div>
<div class="sample-templates">
<h4>示例模板：</h4>
<div class="template-buttons">
<button type="button" class="btn btn-outline" onclick="downloadTemplate('traditional')">
下载传统项目模板
</button>
<button type="button" class="btn btn-outline" onclick="downloadTemplate('psi')">
下载PSI项目模板
</button>
<button type="button" class="btn btn-outline" onclick="downloadTemplate('mixed')">
下载混合项目模板
</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeModal('import-modal')">取消</button>
<button type="button" class="btn btn-primary" onclick="importProjects()">导入</button>
</div>
</div>
</div>
<!-- 导入结果模态框 -->
<div id="import-result-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>导入结果</h3>
<button class="close-btn" onclick="closeModal('import-result-modal')">&times;</button>
</div>
<div class="modal-body">
<div id="import-result-content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="closeModal('import-result-modal')">确定</button>
</div>
</div>
</div>
<script src="/static/js/common.js"></script>
<script src="/static/js/projects.js"></script>
</body>
</html>

234
templates/statistics.html Normal file
View File

@@ -0,0 +1,234 @@
<!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="/static/css/styles.css">
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<div class="nav-brand">
<h1>个人工时记录系统</h1>
</div>
<ul class="nav-menu">
<li><a href="/" class="nav-link">首页</a></li>
<li><a href="/projects" class="nav-link">项目管理</a></li>
<li><a href="/timerecords" class="nav-link">工时记录</a></li>
<li><a href="/statistics" class="nav-link active">统计分析</a></li>
<li><a href="/import" class="nav-link">导入历史</a></li>
</ul>
</div>
</nav>
<main class="main-content">
<div class="container">
<div class="page-header">
<h2>统计分析</h2>
<div class="page-actions">
<button class="btn btn-primary" onclick="showCreatePeriodModal()">新建周期</button>
</div>
</div>
<!-- 周期选择和控制 -->
<div class="period-control">
<div class="form-row">
<div class="form-group">
<label for="period-select">Cut-Off周期</label>
<select id="period-select" class="form-control" onchange="loadWeeklyStats()">
<option value="">请选择周期</option>
</select>
</div>
<div class="form-group">
<label>或者自定义日期范围</label>
<div class="date-range">
<input type="date" id="custom-start-date" class="form-control" placeholder="开始日期">
<span>-</span>
<input type="date" id="custom-end-date" class="form-control" placeholder="结束日期">
<button class="btn btn-secondary" onclick="loadCustomStats()">查看统计</button>
</div>
</div>
</div>
</div>
<!-- 统计概览 -->
<div id="stats-overview" class="stats-section" style="display:none;">
<div class="period-info">
<h3 id="current-period-name">周期名称</h3>
<p id="period-date-range">日期范围</p>
</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value" id="workday-total">0:00</div>
<div class="stat-label">工作日总工时</div>
</div>
<div class="stat-card">
<div class="stat-value" id="holiday-total">0:00</div>
<div class="stat-label">休息日工时</div>
</div>
<div class="stat-card">
<div class="stat-value" id="weekly-total">0:00</div>
<div class="stat-label">总工时</div>
</div>
<div class="stat-card">
<div class="stat-value" id="completion-rate">0%</div>
<div class="stat-label">目标完成度</div>
</div>
</div>
<div class="working-days-info">
<div class="day-stats">
<span class="day-stat-item"><span class="day-stat-label">工作天数:</span><strong id="working-days">0</strong></span>
<span class="day-stat-item"><span class="day-stat-label">休息日工作:</span><strong id="holiday-work-days">0</strong></span>
<span class="day-stat-item"><span class="day-stat-label">休息天数:</span><strong id="rest-days">0</strong></span>
</div>
</div>
</div>
<!-- 每日工时详情表格 -->
<div id="daily-details" class="table-section" style="display:none;">
<h3>每日工时详情</h3>
<div class="table-container">
<table class="data-table" id="daily-stats-table">
<thead>
<tr>
<th>日期</th>
<th>星期</th>
<th>事件</th>
<th>项目</th>
<th>开始时间</th>
<th>结束时间</th>
<th>Activity Num</th>
<th>工时</th>
</tr>
</thead>
<tbody id="daily-stats-tbody">
</tbody>
</table>
</div>
</div>
<!-- 项目工时分布 -->
<div id="project-distribution" class="chart-section" style="display:none;">
<h3>项目工时分布</h3>
<div class="distribution-layout">
<div class="chart-container">
<canvas id="project-hours-chart"></canvas>
</div>
<div class="table-container distribution-table">
<table class="data-table">
<thead>
<tr>
<th>项目</th>
<th>工时</th>
<th>占比</th>
</tr>
</thead>
<tbody id="project-hours-tbody">
<!-- 数据将由JS填充 -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<!-- 新建Cut-Off周期模态框 -->
<div id="create-period-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>新建Cut-Off周期</h3>
<button class="close-btn" onclick="closeModal('create-period-modal')">&times;</button>
</div>
<form id="period-form">
<div class="modal-body">
<div class="form-group">
<label for="period_name">周期名称 *</label>
<input type="text" id="period_name" name="period_name" class="form-control"
placeholder="如：2024年12月-2025年1月" required>
</div>
<div class="form-row">
<div class="form-group">
<label for="start_date">开始日期 *</label>
<input type="date" id="start_date" name="start_date"
class="form-control" onchange="calculatePeriodInfo()" required>
</div>
<div class="form-group">
<label for="end_date">结束日期 *</label>
<input type="date" id="end_date" name="end_date"
class="form-control" onchange="calculatePeriodInfo()" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="weeks">周数</label>
<input type="number" id="weeks" name="weeks" class="form-control"
min="1" readonly>
</div>
<div class="form-group">
<label for="target_hours">目标工时</label>
<input type="number" id="target_hours" name="target_hours"
class="form-control" min="1" step="1">
</div>
</div>
<div class="period-templates">
<h4>快速模板：</h4>
<div class="template-buttons">
<button type="button" class="btn btn-outline" onclick="applyTemplate('four-weeks')">
4周周期 (160小时)
</button>
<button type="button" class="btn btn-outline" onclick="applyTemplate('five-weeks')">
5周周期 (200小时)
</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeModal('create-period-modal')">取消</button>
<button type="submit" class="btn btn-primary">创建</button>
</div>
</form>
</div>
</div>
<!-- 周期管理模态框 -->
<div id="manage-periods-modal" class="modal">
<div class="modal-content large">
<div class="modal-header">
<h3>Cut-Off周期管理</h3>
<button class="close-btn" onclick="closeModal('manage-periods-modal')">&times;</button>
</div>
<div class="modal-body">
<div class="table-container">
<table class="data-table" id="periods-table">
<thead>
<tr>
<th>周期名称</th>
<th>开始日期</th>
<th>结束日期</th>
<th>周数</th>
<th>目标工时</th>
<th>操作</th>
</tr>
</thead>
<tbody id="periods-tbody">
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="closeModal('manage-periods-modal')">关闭</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/js/statistics.js"></script>
</body>

167
templates/timerecords.html Normal file
View File

@@ -0,0 +1,167 @@
<!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="/static/css/styles.css">
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<div class="nav-brand">
<h1>个人工时记录系统</h1>
</div>
<ul class="nav-menu">
<li><a href="/" class="nav-link">首页</a></li>
<li><a href="/projects" class="nav-link">项目管理</a></li>
<li><a href="/timerecords" class="nav-link active">工时记录</a></li>
<li><a href="/statistics" class="nav-link">统计分析</a></li>
<li><a href="/import" class="nav-link">导入历史</a></li>
</ul>
</div>
</nav>
<main class="main-content">
<div class="container">
<div class="page-header">
<h2>工时记录</h2>
<div class="page-actions">
<button class="btn btn-primary" onclick="showCreateRecordModal()">新建记录</button>
</div>
</div>
<!-- 筛选条件 -->
<div class="filter-section">
<div class="filter-row">
<div class="form-group">
<label for="filter-start-date">开始日期</label>
<input type="date" id="filter-start-date" class="form-control" onchange="loadTimeRecords()">
</div>
<div class="form-group">
<label for="filter-end-date">结束日期</label>
<input type="date" id="filter-end-date" class="form-control" onchange="loadTimeRecords()">
</div>
<div class="form-group">
<label for="filter-project">项目</label>
<select id="filter-project" class="form-control" onchange="loadTimeRecords()">
<option value="">全部项目</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-secondary" onclick="resetFilters()">重置筛选</button>
</div>
</div>
</div>
<!-- 工时记录表格 -->
<div class="table-container">
<table class="data-table" id="timerecords-table">
<thead>
<tr>
<th>日期</th>
<th>星期</th>
<th>事件</th>
<th>项目</th>
<th>开始时间</th>
<th>结束时间</th>
<th>Activity Num</th>
<th>工时</th>
<th>操作</th>
</tr>
</thead>
<tbody id="timerecords-tbody">
<tr>
<td colspan="9" class="text-center">加载中...</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<!-- 新建/编辑工时记录模态框 -->
<div id="timerecord-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="timerecord-modal-title">新建工时记录</h3>
<button class="close-btn" onclick="closeModal('timerecord-modal')">&times;</button>
</div>
<form id="timerecord-form">
<div class="modal-body">
<!-- 日期和休息日信息 -->
<div class="form-row">
<div class="form-group">
<label for="record_date">日期 *</label>
<input type="date" id="record_date" name="date" class="form-control"
onchange="checkHoliday()" required>
</div>
<div class="form-group">
<div id="holiday-info" class="holiday-info" style="display:none;">
<span id="holiday-badge" class="badge"></span>
<span id="holiday-text"></span>
</div>
</div>
</div>
<!-- 事件描述 -->
<div class="form-group">
<label for="event_description">事件描述</label>
<input type="text" id="event_description" name="event_description"
class="form-control" placeholder="如：浦发银行VIOS升级">
</div>
<!-- 项目选择 -->
<div class="form-group">
<label for="project_id">项目</label>
<select id="project_id" name="project_id" class="form-control">
<option value="">请选择项目</option>
</select>
</div>
<!-- 时间输入 -->
<div class="form-row">
<div class="form-group">
<label for="start_time">开始时间</label>
<input type="time" id="start_time" name="start_time"
class="form-control" onchange="updateHoursInput()">
</div>
<div class="form-group">
<label for="end_time">结束时间</label>
<input type="time" id="end_time" name="end_time"
class="form-control" onchange="updateHoursInput()">
</div>
</div>
<!-- Activity Num 和工时 -->
<div class="form-row">
<div class="form-group">
<label for="activity_num">Activity Num</label>
<input type="text" id="activity_num" name="activity_num"
class="form-control" placeholder="如：5307905">
</div>
<div class="form-group">
<label for="hours">工时</label>
<input type="text" id="hours" name="hours" class="form-control"
placeholder="如：2:42 或 8:00:00" readonly>
<small class="form-text">工时将根据开始和结束时间自动计算</small>
</div>
</div>
<!-- 休息日提示 -->
<div id="holiday-warning" class="alert alert-warning" style="display:none;">
<strong>注意：</strong>这是一个休息日，如需记录工时请填写开始和结束时间，或直接输入工时。
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeModal('timerecord-modal')">取消</button>
<button type="submit" class="btn btn-primary">保存</button>
</div>
</form>
</div>
</div>
<script src="/static/js/common.js"></script>
<script src="/static/js/timerecords.js"></script>
</body>
</html>