工作任务监控

mengfanyu

已更新到V2.0版本：https://www.52pojie.cn/thread-2084630-1-1.html

日常工作很难专注一件事，需要对杂而乱的多项工作进行监控，因此我模仿禅道做了一个小巧的工作内容管理看板。
主要功能：
1、单html文件，打开即用。
2、便捷管理任务信息，支持设置什么人、什么时间完成。
3、任务项支持拖拽，例如从待开发拖拽到进行中。
4、对于待超期或者已超期有显著提示。

[HTML] 纯文本查看 复制代码

  <div class="board-container">
        <div class="board">
            <div class="lane" data-status="todo">
                <div class="lane-header">
                    <div class="lane-title">
                        <span class="lane-icon">&#128221;</span>
                        待开始
                    </div>
                    <span class="lane-count" id="count-todo">0</span>
                </div>
                <div class="cards-container" id="cards-todo"></div>
            </div>

            <div class="lane" data-status="dev">
                <div class="lane-header">
                    <div class="lane-title">
                        <span class="lane-icon">&#128187;</span>
                        进行中
                    </div>
                    <span class="lane-count" id="count-dev">0</span>
                </div>
                <div class="cards-container" id="cards-dev"></div>
            </div>

            <div class="lane" data-status="test">
                <div class="lane-header">
                    <div class="lane-title">
                        <span class="lane-icon">&#129514;</span>
                        测试中
                    </div>
                    <span class="lane-count" id="count-test">0</span>
                </div>
                <div class="cards-container" id="cards-test"></div>
            </div>

            <div class="lane" data-status="done">
                <div class="lane-header">
                    <div class="lane-title">
                        <span class="lane-icon">&#9989;</span>
                        已完成
                    </div>
                    <span class="lane-count" id="count-done">0</span>
                </div>
                <div class="cards-container" id="cards-done"></div>
            </div>
        </div>
    </div>

    <!-- Add/Edit Modal -->
    <div class="modal-overlay" id="taskModal">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">新增需求</h3>
                <button class="modal-close">&#10005;</button>
            </div>
            <form id="taskForm">
                <input type="hidden" id="taskId">
                <div class="form-group">
                    <label class="form-label">需求标题 *</label>
                    <input type="text" class="form-input" id="taskTitle" required placeholder="输入需求标题">
                </div>
                <div class="form-group">
                    <label class="form-label">需求描述</label>
                    <textarea class="form-textarea" id="taskDescription" placeholder="详细描述需求内容..."></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">优先级</label>
                        <select class="form-select" id="taskPriority">
                            <option value="low">&#128994; 低</option>
                            <option value="medium" selected>&#128993; 中</option>
                            <option value="high">&#128308; 高</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">负责人</label>
                        <input type="text" class="form-input" id="taskAssignee" placeholder="输入负责人姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">预计完成时间</label>
                    <input type="date" class="form-input" id="taskDueDate">
                </div>
                <div class="keyboard-hint">
                    <span><kbd>Ctrl</kbd>+<kbd>S</kbd> 保存</span>
                    <span><kbd>Enter</kbd> 确认</span>
                    <span><kbd>Esc</kbd> 取消</span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary">取消</button>
                    <button type="submit" class="btn btn-submit">保存</button>
                </div>
            </form>
        </div>
    </div>

需求看板.zip (8.51 KB, 下载次数: 123)

2026-1-5 15:24 上传

点击文件名下载附件
下载积分: 吾爱币 -1 CB

阿傑

试了下,没有存储,换个浏览器就数据就没了应该是用的缓存,估计清下缓存就没数据了

ytlk0535

有提醒功能吗

viosovo

要是时间能到分钟就好了

阿傑

感谢分享,下载试试是否好用

zt185

小工具蛮不错，下载研究研究！

山田凉粉

优秀 非常解燃眉之急

viosovo

小工具真的很不错

idealming

这个太实用了，解决我的痛。谢谢

TobiasCN

好，辛苦，就是不知道待一下咋操作。