128 lines
4.7 KiB
HTML
128 lines
4.7 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 id="pageTitle">Kanban</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<div class="left">
|
|
<h1 id="appTitle">Kanban</h1>
|
|
<span class="file-status" id="fileStatus">未加载文件</span>
|
|
</div>
|
|
<div class="right toolbar">
|
|
<label class="btn">
|
|
<input type="file" id="openFile" accept="application/json" hidden />
|
|
打开…
|
|
</label>
|
|
<button id="saveBtn" class="btn" title="导出当前板为 JSON">保存/导出</button>
|
|
<label class="btn">
|
|
<input type="file" id="importFile" accept="application/json" hidden />
|
|
导入/合并…
|
|
</label>
|
|
<button id="newBoardBtn" class="btn" title="新建看板">新建</button>
|
|
<span class="sep"></span>
|
|
<input id="actorInput" class="actor" placeholder="你的名字（用于记录历史）" />
|
|
<span class="sep"></span>
|
|
<input id="searchInput" class="search" placeholder="搜索任务…" />
|
|
<select id="categoryFilter" class="category-filter">
|
|
<option value="">筛选：全部类别</option>
|
|
</select>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="app-main">
|
|
<aside class="side-panel">
|
|
<section>
|
|
<h3>类别</h3>
|
|
<div id="categoriesList" class="categories"></div>
|
|
<button id="addCategoryBtn" class="btn small">添加类别</button>
|
|
</section>
|
|
<section>
|
|
<h3>布局</h3>
|
|
<div id="layoutInfo" class="layout-info"></div>
|
|
<div style="display:flex; gap:6px; margin:6px 0;">
|
|
<button id="addStageBtn" class="btn small">添加阶段</button>
|
|
<button id="addColumnBtn" class="btn small">添加列</button>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h3>历史</h3>
|
|
<div id="historyList" class="history"></div>
|
|
<button id="clearHistoryBtn" class="btn small">清空历史（写入文件）</button>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="board" id="board"></section>
|
|
</main>
|
|
|
|
<!-- 模态框：编辑任务 -->
|
|
<div class="modal hidden" id="taskModal" role="dialog" aria-modal="true">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>编辑任务</h2>
|
|
<button class="icon-btn" id="taskModalClose" aria-label="关闭">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-row">
|
|
<label>标题</label>
|
|
<input id="taskTitleInput" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label>类别</label>
|
|
<select id="taskCategorySelect"></select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>描述</label>
|
|
<textarea id="taskDescInput" rows="6"></textarea>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>步骤</label>
|
|
<div id="stepsContainer" class="steps"></div>
|
|
<button id="addStepBtn" class="btn small">添加步骤</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="deleteTaskBtn" class="btn danger">删除</button>
|
|
<div class="spacer"></div>
|
|
<button id="taskSaveBtn" class="btn primary">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 模态框：导入/合并 -->
|
|
<div class="modal hidden" id="mergeModal" role="dialog" aria-modal="true">
|
|
<div class="modal-content large">
|
|
<div class="modal-header">
|
|
<h2>导入/合并 预览</h2>
|
|
<button class="icon-btn" id="mergeModalClose" aria-label="关闭">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-row">
|
|
<label>策略</label>
|
|
<select id="mergePolicy">
|
|
<option value="prefer-import">冲突优先：导入文件</option>
|
|
<option value="prefer-current">冲突优先：当前看板</option>
|
|
</select>
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="mergeRemoveMissing" /> 同步删除在导入文件中不存在的任务/阶段
|
|
</label>
|
|
</div>
|
|
<div class="diff-summary" id="diffSummary"></div>
|
|
<details>
|
|
<summary>详细变更</summary>
|
|
<div class="diff-details" id="diffDetails"></div>
|
|
</details>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="applyMergeBtn" class="btn primary">应用合并</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|