<!--
- 开发时间：2026-07-03
- 更新时间：2026-07-13（新建任务对话框：结束时间下方增加时长快捷按钮 30分钟/1小时/1.5小时/2小时/4小时，点击基于开始时间自动计算结束时间）
- 文件作用：cloudPrompt「工作清单」并发工作流展示页面（独立页面，需登录）
- 实现原理：原生 HTML + 引入 style.css + auth.css + worklist.css + auth.js + worklist.js + worklist_heatmap.js；
            删除导航栏（独立功能独立页面）；
            P0: viewport meta user-scalable=no + viewport-fit=cover 禁用原生缩放+iOS安全区域适配；
            P0: body touch-action:pan-x pan-y（worklist.css）全局禁用原生缩放，
                双指手势由 worklist_touch.js 劫持转发时间轴组件（页面任意位置触发，缩放仅针对时间轴生效）；
            登录层（auth-login-view）覆盖全屏，登录成功后显示主内容（auth-main-view）；
            多页签（日/年/定时）：日=自然日时间轴，年=方块连续排布热力图，定时=定时任务管理；
            模仿 chrome://tracing/ 效果：可缩放时间轴 + 工作流泳道 + 任务卡片按时间区间排布；
            P0: 任务卡片固定最小宽度（PC 60px）+最小高度（移动端 58px）限制，兜底约束条目基础尺寸；
            鼠标滚轮缩放时间轴（1分钟~24小时），拖拽平移，双击重置；
            需求3：工作流拖拽排序（PC 鼠标+移动端单指），手柄 .wl-lane-grip 触发，调用 /reorder_workflows 持久化；
            手机端触摸手势（worklist_touch.js）：手势分发精准解耦——单指纵向 JS平移时间窗口，单指横向放行浏览器横向滚动，双指捏合全局劫持转发时间轴，单指在手柄上 drag 工作流排序；
            手势打点日志（worklist_touch.js logGestureEvent）：记录触点数/方向/捕获层级/拦截状态，touchstart/touchend 必打，touchmove 状态变化时打；
            任务条目只显示标题和时间不再具有任何编辑能力：卡片内已移除 ✎ 编辑按钮，编辑统一由顶部「编辑任务」按钮触发（先点击卡片选中，再点顶部按钮）；
            任务卡片点击选中（selectTask），选中态橙色 box-shadow 自适应宽高；
            日视图工具栏含「今日」快捷按钮+「新建任务」按钮+「编辑任务」按钮+「回收工作流」按钮+6个操作按钮（放大/缩小/左移/右移/重置/聚焦）+日志上传按钮；
            完成任务浅灰色背景，未完成任务鲜艳色（HSL 黄金角分配色相）；
            时间冲突自动新建工作流，工作流无上限动态创建，24小时制；
            工作流名称服务端重命名：调用 /rename_workflow 接口持久化（双击标题编辑）；
            新建/编辑任务下拉框含「新建工作流」选项：填写标题调用 /create_workflow 创建新工作流承载任务；
            回收工作流按钮：调用 /recycle_empty_workflows 接口批量回收所有空工作流；
            年度热力图：方块连续排布，色块14×14px，单击看详情，双击切回日视图；
            PC 横向/移动端纵向布局解耦：ruler 拆分 spacer+body；
            响应式适配手机端（@media 媒体查询）；
            所有请求经 authFetch 携带 token（auth.js）；
            尺寸异常日志打点（worklist_debug_log.js）；
            需求（复制任务至当前时间按钮）：编辑任务弹窗新增按钮，原任务标记已完成并追加（中断），克隆新任务起始时间为当前时间；
            需求1（2026-07-08）：编辑任务对话框开始/结束时间置于同一行（wl-time-row），各自右侧增加「现在」按钮一键填入当前 HH:MM；
            需求2（2026-07-08）：编辑任务对话框状态属性由 select 下拉改为 radio 单选（wl-radio-group），选项 进行中/已完成
- 如何调用：浏览器访问 https://cloudprompt.yyx2026.top/worklist.html
- 所属流程：cloudPrompt 工作清单并发工作流管理流程
-->
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
        <title>工作清单</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="auth.css">
        <link rel="stylesheet" href="worklist.css">
        <link rel="stylesheet" href="worklist_mobile.css">
        <link rel="stylesheet" href="worklist_heatmap.css">
        <link rel="stylesheet" href="worklist_recurring.css">
    </head>
    <body>
        <!-- 登录层：全屏遮罩，登录成功后隐藏 -->
        <div id="auth-login-view" style="display:none">
            <div class="auth-login-card">
                <div class="auth-login-title">工作清单登录</div>
                <div class="auth-login-subtitle">并发工作流展示平台</div>
                <div class="auth-form-group">
                    <label class="auth-form-label">邮箱</label>
                    <input type="email" id="auth-email" class="auth-form-input" placeholder="请输入邮箱">
                </div>
                <div class="auth-form-group">
                    <label class="auth-form-label">密码</label>
                    <input type="password" id="auth-password" class="auth-form-input" placeholder="请输入密码">
                </div>
                <button id="auth-btn-login" class="auth-btn-login">登录</button>
                <div class="auth-error-msg" id="auth-error-msg"></div>
            </div>
        </div>

        <!-- 主内容层：登录成功后显示 -->
        <div id="auth-main-view" style="display:none">
            <h1 class="title">工作清单</h1>

            <!-- 页签栏：日/年/定时 -->
            <div class="wl-tabs">
                <button class="wl-tab active" data-tab="day">日</button>
                <button class="wl-tab" data-tab="year">年</button>
                <button class="wl-tab" data-tab="recurring">定时</button>
            </div>

            <!-- 日视图工具栏 -->
            <div class="wl-toolbar" id="wl-day-toolbar">
                <button id="wl-btn-prev-date" class="btn-read">前一天</button>
                <span class="wl-date-display" id="wl-date-display">2026-07-03</span>
                <button id="wl-btn-next-date" class="btn-read">后一天</button>
                <button id="wl-btn-today" class="btn-read">今日</button>
                <button id="wl-btn-create" class="btn-save">+ 新建任务</button>
                <button id="wl-btn-edit-task" class="btn-read" title="编辑当前选中的任务">编辑任务</button>
                <button id="wl-btn-recycle-workflows" class="btn-delete" title="批量回收所有空工作流（无任务的工作流）">回收工作流</button>
                <span class="wl-stat" id="wl-stat"></span>
                <div class="wl-zoom-controls">
                    <button id="wl-btn-zoom-in" class="wl-zoom-btn" title="放大">+</button>
                    <button id="wl-btn-zoom-out" class="wl-zoom-btn" title="缩小">−</button>
                    <button id="wl-btn-pan-left" class="wl-zoom-btn" title="左移">◀</button>
                    <button id="wl-btn-pan-right" class="wl-zoom-btn" title="右移">▶</button>
                    <button id="wl-btn-reset" class="wl-zoom-btn" title="重置">⟲</button>
                    <button id="wl-btn-fit" class="wl-zoom-btn" title="聚焦任务">聚焦</button>
                    <button id="wl-btn-upload-debug-log" class="wl-zoom-btn" title="上传尺寸异常日志到后端" style="background-color:#f57c00;color:#fff;border-color:#f57c00;">日志上传</button>
                </div>
            </div>

            <!-- 热力图工具栏（仅年视图） -->
            <div class="wl-toolbar" id="wl-heatmap-toolbar" style="display:none">
                <button id="wl-btn-prev-period" class="btn-read">上一期</button>
                <span class="wl-date-display" id="wl-period-display"></span>
                <button id="wl-btn-next-period" class="btn-read">下一期</button>
            </div>

            <!-- 日视图：可缩放时间轴（trace 样式） -->
            <!-- ruler 拆分 spacer+body：移动端 spacer 与 lane-header 等高对齐，body 与 lane-track 等高对齐；PC 端 spacer 隐藏 body 撑满 -->
            <div class="wl-trace-container" id="wl-trace-container">
                <div class="wl-trace-ruler" id="wl-trace-ruler">
                    <div class="wl-ruler-spacer"></div>
                    <div class="wl-ruler-body" id="wl-ruler-body"></div>
                </div>
                <div class="wl-trace-pool" id="wl-trace-pool"></div>
            </div>

            <!-- 热力图视图容器（年视图 GitHub 风格贡献图） -->
            <div class="wl-heatmap-container" id="wl-heatmap-container" style="display:none">
                <div class="wl-heatmap-title">活跃天数</div>
                <div class="wl-heatmap-grid" id="wl-heatmap-grid"></div>
                <div class="wl-heatmap-legend">
                    <span class="wl-legend-label">Less</span>
                    <span class="wl-legend-cell" style="background-color:#ebedf0"></span>
                    <span class="wl-legend-cell" style="background-color:#a5d6a7"></span>
                    <span class="wl-legend-cell" style="background-color:#66bb6a"></span>
                    <span class="wl-legend-cell" style="background-color:#388e3c"></span>
                    <span class="wl-legend-cell" style="background-color:#1b5e20"></span>
                    <span class="wl-legend-cell" style="background-color:#f9a825"></span>
                    <span class="wl-legend-label">超额(&gt;100%)</span>
                    <span class="wl-legend-tip">效率=工时/12h，单击看详情，双击切回日视图</span>
                </div>
            </div>

            <!-- 定时任务管理容器 -->
            <div class="wl-recurring-container" id="wl-recurring-container" style="display:none">
                <div class="wl-recurring-toolbar">
                    <button id="wl-btn-create-recurring" class="btn-save">+ 新建定时任务</button>
                    <span class="wl-recurring-tip">定时任务每天自动生成当天实例，未完成不影响第二天（第二天自动生成新实例）</span>
                </div>
                <div class="wl-recurring-list" id="wl-recurring-list"></div>
            </div>

            <!-- 定时任务编辑对话框 -->
            <div id="wl-recurring-modal" class="modal" style="display:none">
                <div class="modal-content">
                    <div class="modal-header">定时任务<span class="modal-close" id="wl-close-recurring-modal">×</span></div>
                    <div class="modal-body">
                        <label class="form-label">标题</label>
                        <input type="text" id="wl-recurring-title" class="form-input" placeholder="任务标题（必填）">
                        <label class="form-label">优先级</label>
                        <select id="wl-recurring-priority" class="form-input">
                            <option value="high">高</option>
                            <option value="medium" selected>中</option>
                            <option value="low">低</option>
                        </select>
                        <label class="form-label">每天开始时间（24小时制 HH:MM）</label>
                        <input type="time" id="wl-recurring-start" class="form-input">
                        <label class="form-label">每天结束时间（24小时制 HH:MM）</label>
                        <input type="time" id="wl-recurring-end" class="form-input">
                        <div class="form-tip">定时任务每天在此时段自动生成实例，分配到当天工作流（冲突时新建工作流）</div>
                    </div>
                    <div class="modal-footer">
                        <button id="wl-btn-delete-recurring" class="btn-delete">删除</button>
                        <button id="wl-btn-cancel-recurring" class="btn-cancel">取消</button>
                        <button id="wl-btn-confirm-recurring" class="btn-save">保存</button>
                    </div>
                </div>
            </div>

            <!-- 新建任务对话框 -->
            <div id="wl-create-modal" class="modal" style="display:none">
                <div class="modal-content">
                    <div class="modal-header">新建任务<span class="modal-close" id="wl-close-create-modal">×</span></div>
                    <div class="modal-body">
                        <label class="form-label">标题</label>
                        <input type="text" id="wl-new-task-title" class="form-input" placeholder="任务标题（必填）">
                        <label class="form-label">优先级</label>
                        <select id="wl-new-task-priority" class="form-input">
                            <option value="high">高</option>
                            <option value="medium" selected>中</option>
                            <option value="low">低</option>
                        </select>
                        <label class="form-label">任务流（工作流）</label>
                        <select id="wl-new-task-workflow" class="form-input">
                            <option value="auto" selected>自动分配（冲突时新建）</option>
                            <option value="new">新建工作流</option>
                        </select>
                        <div id="wl-new-workflow-title-container" style="display:none">
                            <label class="form-label">新工作流标题</label>
                            <input type="text" id="wl-new-workflow-title" class="form-input" placeholder="新工作流标题（可选）">
                            <div class="form-tip">填写标题将创建新工作流并添加任务；留空则使用默认命名</div>
                        </div>
                        <label class="form-label">开始时间（24小时制 HH:MM）</label>
                        <input type="time" id="wl-new-task-start" class="form-input">
                        <label class="form-label">结束时间（24小时制 HH:MM）</label>
                        <input type="time" id="wl-new-task-end" class="form-input">
                        <div class="wl-duration-row" id="wl-new-task-duration-row">
                            <span class="wl-duration-label">时长快捷：</span>
                            <button type="button" class="wl-duration-btn" data-duration="30">30分钟</button>
                            <button type="button" class="wl-duration-btn" data-duration="60">1小时</button>
                            <button type="button" class="wl-duration-btn" data-duration="90">1.5小时</button>
                            <button type="button" class="wl-duration-btn" data-duration="120">2小时</button>
                            <button type="button" class="wl-duration-btn" data-duration="240">4小时</button>
                        </div>
                        <div class="form-tip">选择具体工作流时，时间冲突将新建工作流承载任务；自动分配时冲突则新建工作流</div>
                    </div>
                    <div class="modal-footer">
                        <button id="wl-btn-cancel-create" class="btn-cancel">取消</button>
                        <button id="wl-btn-confirm-create" class="btn-save">创建</button>
                    </div>
                </div>
            </div>

            <!-- 编辑任务对话框（综合编辑标题/时间/状态/工作流） -->
            <div id="wl-edit-modal" class="modal" style="display:none">
                <div class="modal-content">
                    <div class="modal-header">编辑任务<span class="modal-close" id="wl-close-edit-modal">×</span></div>
                    <div class="modal-body">
                        <label class="form-label">标题</label>
                        <input type="text" id="wl-edit-title" class="form-input" placeholder="任务标题">
                        <div class="wl-time-row">
                            <div class="wl-time-field">
                                <label class="form-label">开始时间（24小时制 HH:MM）</label>
                                <div class="wl-time-input-wrap">
                                    <input type="time" id="wl-edit-start" class="form-input">
                                    <button type="button" class="wl-now-btn" id="wl-btn-start-now" title="将开始时间设置为当前时间">现在</button>
                                </div>
                            </div>
                            <div class="wl-time-field">
                                <label class="form-label">结束时间（24小时制 HH:MM）</label>
                                <div class="wl-time-input-wrap">
                                    <input type="time" id="wl-edit-end" class="form-input">
                                    <button type="button" class="wl-now-btn" id="wl-btn-end-now" title="将结束时间设置为当前时间">现在</button>
                                </div>
                            </div>
                        </div>
                        <label class="form-label">任务流（工作流）</label>
                        <select id="wl-edit-workflow" class="form-input"></select>
                        <div id="wl-edit-workflow-title-container" style="display:none">
                            <label class="form-label">新工作流标题</label>
                            <input type="text" id="wl-edit-workflow-title" class="form-input" placeholder="新工作流标题（可选）">
                            <div class="form-tip">填写标题将创建新工作流并迁移任务；留空则使用默认命名</div>
                        </div>
                        <label class="form-label">状态</label>
                        <div class="wl-radio-group" id="wl-edit-status-group">
                            <label class="wl-radio-label"><input type="radio" name="wl-edit-status" value="todo"> 进行中</label>
                            <label class="wl-radio-label"><input type="radio" name="wl-edit-status" value="done"> 已完成</label>
                        </div>
                        <div class="form-tip">切换工作流或修改时间时，目标时段冲突将新建工作流承载任务</div>
                    </div>
                    <div class="modal-footer">
                        <button id="wl-btn-delete-task" class="btn-delete">删除任务</button>
                        <button id="wl-btn-cancel-edit" class="btn-cancel">取消</button>
                        <button id="wl-btn-copy-to-current" class="btn-read" title="原任务标记已完成并追加（中断），克隆新任务起始时间为当前时间">复制任务至当前时间</button>
                        <button id="wl-btn-complete-now" class="btn-save" title="结束时间改为当前时间并标记为已完成">现在完成</button>
                        <button id="wl-btn-confirm-edit" class="btn-save">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="toast" id="toast"></div>
        <script src="auth.js"></script>
        <script src="worklist_heatmap.js"></script>
        <script src="worklist_recurring.js"></script>
        <script src="worklist_debug_log.js"></script>
        <script src="worklist_view.js"></script>
        <script src="worklist_touch.js"></script>
        <script src="worklist_drag.js"></script>
        <script src="worklist_edit.js"></script>
        <script src="worklist.js"></script>
    </body>
</html>