Files
iboard/docs/V0.2/任务模块/已归档任务管理-原型.html
jif2.zhang 77e057c580
Docker Build and Push / build-image (push) Successful in 1m29s
docs(任务): 已归档任务管理界面重设计原型 (待评审, 未改业务代码)
按评审意见重做「已归档任务」全屏弹层的界面, 产出可交互原型:
docs/V0.2/任务模块/已归档任务管理-原型.html

四点改动:
1. 去掉「类型」过滤 —— 类型是弱维度, 归档场景几乎不按类型检索, 反而占掉一整行;
2. 关键词输入框前加常驻标签「标题」, 框内占位改为「输入关键词」;
3. 归档时间新增快捷预设: 全部 / 本周 / 本月 / 本季度 (+ 自定义才展开日期区间),
   选完在下方灰字回显实际区间, 避免"以为选的是整周";
4. 补上「筛选」按钮 —— 原版改任何条件都立即查询且没有确认动作; 改为条件填完一次性提交,
   按钮带生效条件数徽标, 另有「重置」。

附带改进:
- 列表上方显示已应用条件标签(可单独 × 撤销) + 命中条数;
- 列表行重排: 标题独占一行, 元信息收成一行(#编号 · 看板列 · 归档于日期),
  「恢复/删除」从右侧竖排改到底部右侧横排, 降低行高;
- 空状态区分「还没归档过」与「筛选无结果」, 分别给出下一步提示;
- 类型标签仍在行内展示, 只是不再作为筛选项。

原型为单文件 HTML (无外部依赖), 可交互: 点预设/筛选/恢复/删除均有反馈。
已用无头浏览器验证: 无 JS 错误, 本周预设算出 2026-10-26~2026-10-28, 筛选命中条数正确。

业务代码未改动, 等待评审确认后再落地。
2026-10-28 09:51:00 +08:00

628 lines
32 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>已归档任务管理 · 界面重设计(原型待评审)</title>
<style>
:root{
--bg:#f0f2f5; --page:#fff; --card:#fff;
--text:#333; --muted:#666; --weak:#999; --line:#eee;
--primary:#1677ff; --danger:#ff3141; --success:#00b578;
--nav-h:45px; --tab-h:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
background:var(--bg); color:#1f2328; font-size:14px; line-height:1.6;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',Roboto,sans-serif;
-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1400px;margin:0 auto;padding:36px 24px 72px}
.doc-head{border-bottom:1px solid #e3e6ea;padding-bottom:20px;margin-bottom:28px}
.doc-head h1{font-size:26px;font-weight:700;letter-spacing:.5px}
.doc-head p{color:var(--muted);font-size:13px;margin-top:6px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.meta span{font-size:12px;background:#fff;border:1px solid #e3e6ea;border-radius:999px;padding:3px 12px;color:var(--muted)}
h2{font-size:19px;font-weight:700;margin:40px 0 6px;display:flex;align-items:center;gap:10px}
h2::before{content:"";width:4px;height:17px;background:var(--primary);border-radius:2px}
h2 .sub{font-size:12px;font-weight:400;color:var(--weak)}
p.desc{color:var(--muted);font-size:13px;margin-bottom:16px}
/* ---------- 改动要点 ---------- */
.changes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.chg{background:#fff;border:1px solid #e6e8eb;border-radius:12px;padding:14px 16px}
.chg .k{font-size:11px;color:var(--primary);font-weight:700;letter-spacing:.6px}
.chg h4{font-size:14px;font-weight:700;margin:5px 0 6px}
.chg p{font-size:12.5px;color:var(--muted);line-height:1.65}
.chg .old{color:var(--danger);font-size:12px;text-decoration:line-through}
/* ---------- 手机框 ---------- */
.stage{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-start;margin-top:18px}
.phone{
width:400px;height:812px;background:var(--page);position:relative;overflow:hidden;
border:1px solid #d8dde3;border-radius:22px;box-shadow:0 10px 24px rgba(15,23,42,.08);
display:flex;flex-direction:column;
}
.phone::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:112px;height:19px;background:#111827;border-radius:12px;opacity:.9;z-index:5}
.phone.sm{width:340px;height:700px}
.phone .nav{
height:var(--nav-h);margin-top:26px;flex-shrink:0;display:flex;align-items:center;gap:10px;
padding:0 14px;background:#fff;border-bottom:1px solid var(--line);
}
.phone .nav .back{font-size:20px;color:#666;line-height:1;cursor:pointer}
.phone .nav .title{font-size:16px;font-weight:700}
.phone .nav .proj{margin-left:auto;font-size:11px;color:var(--weak);background:#f5f6f8;border-radius:999px;padding:2px 9px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone .body{flex:1;min-height:0;overflow-y:auto;background:#f5f5f5;padding-bottom:18px}
/* ---------- 筛选卡 ---------- */
.fcard{background:#fff;margin:10px 12px 0;border-radius:12px;padding:4px 14px 12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.frow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f4f5f7}
.frow:last-of-type{border-bottom:0}
.frow > .lbl{width:56px;flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--text)}
.frow > .ctl{flex:1;min-width:0}
/* 标题输入框前的提示 */
.kwbox{display:flex;align-items:center;gap:7px;background:#f7f8fa;border:1px solid #eceef1;border-radius:8px;padding:6px 9px}
.kwbox:focus-within{border-color:var(--primary);background:#fff}
.kwbox .ph{font-size:11.5px;color:var(--weak);flex-shrink:0}
.kwbox input{flex:1;min-width:0;border:0;background:transparent;font-size:13px;outline:none;color:var(--text)}
.kwbox input::placeholder{color:#c2c6cc}
.kwbox .clr{font-size:12px;color:#c2c6cc;cursor:pointer;flex-shrink:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
font-size:12px;padding:4px 11px;border-radius:999px;border:1px solid #e6e8eb;
background:#fafbfc;color:var(--muted);cursor:pointer;white-space:nowrap;transition:.15s;
}
.chip:hover{border-color:#c9d3e0}
.chip.on{background:#eaf3ff;border-color:var(--primary);color:var(--primary);font-weight:600}
.chip .x{margin-left:5px;color:#9aa4b2}
.range{display:flex;align-items:center;gap:7px;margin-top:8px}
.range .dp{font-size:12px;padding:4px 10px;border:1px dashed #d9dee5;border-radius:7px;color:var(--weak);cursor:pointer;background:#fff}
.range .dp.on{color:var(--text);border-style:solid;border-color:#d9dee5}
.range .sep{color:#c2c6cc;font-size:12px}
.factions{display:flex;gap:9px;padding-top:12px}
.btn{flex:1;height:36px;border-radius:9px;border:0;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s}
.btn.ghost{background:#f4f5f7;color:var(--muted);flex:0 0 84px}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(22,119,255,.26)}
.btn.primary:active{transform:translateY(1px)}
.btn .badge{display:inline-block;min-width:16px;height:16px;line-height:16px;border-radius:8px;background:rgba(255,255,255,.28);font-size:10.5px;margin-left:5px;padding:0 4px}
/* ---------- 已应用条件 ---------- */
.applied{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:11px 14px 3px}
.applied .tag{font-size:11.5px;background:#eaf3ff;color:var(--primary);border-radius:6px;padding:2px 7px;display:flex;align-items:center;gap:5px}
.applied .tag b{font-weight:600}
.applied .tag .x{cursor:pointer;opacity:.6}
.applied .cnt{margin-left:auto;font-size:11.5px;color:var(--weak)}
/* ---------- 列表 ---------- */
.list{padding:8px 12px 0;display:flex;flex-direction:column;gap:8px}
.item{background:#fff;border-radius:10px;padding:11px 12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.item .top{display:flex;gap:8px;align-items:flex-start}
.item .ttl{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.42;word-break:break-word}
.item .num{font-size:10px;color:#9aa4b2;background:#f5f6f8;border-radius:4px;padding:1px 5px;flex-shrink:0;margin-top:1px}
.item .meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:7px;font-size:10.5px;color:var(--weak)}
.item .meta .col{color:var(--muted)}
.item .meta .dot{width:3px;height:3px;border-radius:50%;background:#d5d9e0}
.item .acts{display:flex;gap:7px;justify-content:flex-end;margin-top:9px;padding-top:9px;border-top:1px dashed #f0f1f3}
.mini{font-size:11.5px;padding:3px 12px;border-radius:999px;border:1px solid var(--primary);color:var(--primary);background:#fff;cursor:pointer;white-space:nowrap}
.mini.danger{border-color:#ffd4d7;color:var(--danger)}
.kind{font-size:10px;line-height:1;font-weight:600;color:#fff;border-radius:4px;padding:3px 5px}
.empty{text-align:center;padding:56px 20px;color:#b8bcc4;font-size:13px}
.empty .ico{font-size:34px;opacity:.35;margin-bottom:10px}
.more{display:block;width:calc(100% - 24px);margin:12px auto 0;height:34px;border-radius:9px;border:1px solid #e6e8eb;background:#fff;color:var(--muted);font-size:12.5px;cursor:pointer}
.toast{
position:absolute;left:50%;bottom:56px;transform:translateX(-50%) translateY(8px);
background:rgba(0,0,0,.78);color:#fff;font-size:12.5px;padding:8px 16px;border-radius:8px;
opacity:0;transition:.22s;z-index:9;pointer-events:none;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.caption{margin-top:12px;background:#fff;border:1px solid #e6e8eb;border-radius:10px;padding:11px 14px;width:400px}
.caption b{font-size:13px;display:block;margin-bottom:4px}
.caption span{font-size:12px;color:var(--muted);line-height:1.65}
.notes{flex:1;min-width:300px;display:flex;flex-direction:column;gap:12px}
.note{background:#fff;border:1px solid #e6e8eb;border-radius:12px;padding:14px 16px}
.note h4{font-size:13px;font-weight:700;margin-bottom:7px;display:flex;align-items:center;gap:7px}
.note h4 i{width:18px;height:18px;border-radius:50%;background:#eaf3ff;color:var(--primary);font-size:11px;font-style:normal;display:flex;align-items:center;justify-content:center;font-weight:700}
.note ul{list-style:none;font-size:12.5px;color:var(--muted);line-height:1.85}
.note ul li::before{content:"·";color:#c2c6cc;margin-right:6px}
.note code{background:#f5f6f8;border-radius:4px;padding:1px 5px;font-size:11.5px;color:#c7254e}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e6e8eb;font-size:12.5px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid #f0f1f3;vertical-align:top}
th{background:#fafbfc;font-size:12px;color:var(--muted);font-weight:600}
tr:last-child td{border-bottom:0}
td .no{color:var(--danger)}
td .yes{color:var(--success);font-weight:600}
.variants{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px}
</style>
</head>
<body>
<div class="wrap">
<div class="doc-head">
<h1>已归档任务管理 · 界面重设计</h1>
<p>对应需求 T-ARC-04/05/06。本文件是<strong>评审用原型</strong>,不含业务代码改动;确认后再落地。</p>
<div class="meta">
<span>原型 · 待评审</span>
<span>2026-10-28</span>
<span>可交互:点预设 / 筛选 / 恢复</span>
<span>范围:任务模块 › 项目 › 已归档</span>
</div>
</div>
<h2>改动要点 <span class="sub">对照你提出的 4 点</span></h2>
<div class="changes">
<div class="chg">
<div class="k">01</div>
<h4>去掉「类型」过滤</h4>
<p>现版本的「全部类型」下拉整体移除。任务类型是弱维度,归档场景几乎不按类型找东西,反而占掉一横行高。</p>
<p class="old">全部类型 ▾</p>
</div>
<div class="chg">
<div class="k">02</div>
<h4>输入框前加提示</h4>
<p>关键词输入框前加固定标签「标题」,输入框内用灰字占位「输入关键词」——标签常驻,占位随输入消失,不会出现"不知道搜什么"。</p>
<p class="old">搜索任务标题(无标签)</p>
</div>
<div class="chg">
<div class="k">03</div>
<h4>归档时间快捷选择</h4>
<p>新增 <b>全部 / 本周 / 本月 / 本季度</b> 四个一键预设,选完自动算出起止日期并显示;需要精确区间时再选「自定义」。</p>
<p class="old">开始日期 ~ 结束日期(纯手点)</p>
</div>
<div class="chg">
<div class="k">04</div>
<h4>补上「筛选」按钮</h4>
<p>现版本改任何条件都立即查询、没有确认动作。改为:改条件 → 点<b>筛选</b>才生效,按钮上显示生效条件数;另给「重置」。</p>
<p class="old">无按钮(自动即时查询)</p>
</div>
</div>
<h2>主界面 <span class="sub">可交互 · 点一下试试</span></h2>
<div class="stage">
<div>
<div class="phone" id="phone">
<div class="nav">
<span class="back">‹</span>
<span class="title">已归档任务</span>
<span class="proj">Admin的任务</span>
</div>
<div class="body">
<!-- 筛选卡 -->
<div class="fcard">
<div class="frow">
<span class="lbl">标题</span>
<span class="ctl">
<span class="kwbox">
<input id="kw" placeholder="输入关键词" />
<span class="clr" id="kwClear" style="display:none">✕</span>
</span>
</span>
</div>
<div class="frow">
<span class="lbl">看板列</span>
<span class="ctl">
<span class="chips" id="colChips">
<span class="chip on" data-col="">全部</span>
<span class="chip" data-col="Plan">Plan</span>
<span class="chip" data-col="Doing">Doing</span>
<span class="chip" data-col="Done">Done</span>
</span>
</span>
</div>
<div class="frow">
<span class="lbl">归档时间</span>
<span class="ctl">
<span class="chips" id="timeChips">
<span class="chip on" data-t="all">全部</span>
<span class="chip" data-t="week">本周</span>
<span class="chip" data-t="month">本月</span>
<span class="chip" data-t="quarter">本季度</span>
<span class="chip" data-t="custom">自定义</span>
</span>
<span class="range" id="rangeRow" style="display:none">
<span class="dp" id="dpFrom">开始日期</span>
<span class="sep">~</span>
<span class="dp" id="dpTo">结束日期</span>
</span>
<div id="rangeHint" style="font-size:11px;color:#9aa4b2;margin-top:6px"></div>
</span>
</div>
<div class="factions">
<button class="btn ghost" id="resetBtn">重置</button>
<button class="btn primary" id="filterBtn">筛选</button>
</div>
</div>
<!-- 已应用条件 -->
<div class="applied" id="appliedBar" style="display:none"></div>
<!-- 列表 -->
<div class="list" id="list"></div>
<button class="more" id="moreBtn">加载更多</button>
</div>
<div class="toast" id="toast"></div>
</div>
<div class="caption">
<b>主界面</b>
<span>筛选卡固定三行:标题 / 看板列 / 归档时间,外加操作行。改动不再即时生效,点「筛选」统一提交。</span>
</div>
</div>
<div class="notes">
<div class="note">
<h4><i>1</i>为什么改成"点按钮才筛选"</h4>
<ul>
<li>现在每改一个条件就重查一次,连点三个条件就发三次请求</li>
<li>输入关键词时每敲一个字都可能触发(失焦也查),列表会闪</li>
<li>改成显式提交后,用户能先把条件填完整,再一次性看结果</li>
<li>按钮上带数字徽标,一眼知道当前生效了几个条件</li>
</ul>
</div>
<div class="note">
<h4><i>2</i>快捷时间怎么算</h4>
<ul>
<li><b>本周</b>:周一 00:00 ~ 今天(不跨到未来)</li>
<li><b>本月</b>:1 号 00:00 ~ 今天</li>
<li><b>本季度</b>:当季首月 1 号 00:00 ~ 今天</li>
<li>选完在下方灰字直接显示实际区间,避免"以为选的是整周"</li>
<li>「自定义」才展开两个日期选择器,默认收起</li>
</ul>
</div>
<div class="note">
<h4><i>3</i>已应用条件可单独撤销</h4>
<ul>
<li>筛选后在列表上方显示条件标签,每个带 <code>×</code> 可单独去掉</li>
<li>右侧显示命中条数,避免"筛完不知道有没有筛到"</li>
<li>无结果时给明确空状态,而不是一片留白</li>
</ul>
</div>
<div class="note">
<h4><i>4</i>列表行重排</h4>
<ul>
<li>标题独占一行(原来和类型/列/时间挤在下面)</li>
<li>元信息收成一行:<code>#编号</code> · 看板列 · 归档于 日期</li>
<li>「恢复 / 删除」从右侧竖排改到底部右侧横排,减少每行高度</li>
<li>类型标签保留展示(只是不再作为筛选项)</li>
</ul>
</div>
</div>
</div>
<h2>状态变体</h2>
<div class="variants">
<div>
<div class="phone sm">
<div class="nav"><span class="back">‹</span><span class="title">已归档任务</span></div>
<div class="body">
<div class="fcard">
<div class="frow"><span class="lbl">标题</span><span class="ctl"><span class="kwbox"><input placeholder="输入关键词" /></span></span></div>
<div class="frow"><span class="lbl">看板列</span><span class="ctl"><span class="chips"><span class="chip on">全部</span><span class="chip">Plan</span><span class="chip">Done</span></span></span></div>
<div class="frow"><span class="lbl">归档时间</span><span class="ctl">
<span class="chips"><span class="chip">全部</span><span class="chip on">本周</span><span class="chip">本月</span><span class="chip">本季度</span><span class="chip">自定义</span></span>
<div style="font-size:11px;color:#9aa4b2;margin-top:6px">2026-10-26 ~ 2026-10-28</div>
</span></div>
<div class="factions"><button class="btn ghost">重置</button><button class="btn primary">筛选<span class="badge">2</span></button></div>
</div>
<div class="applied">
<span class="tag"><b>本周</b><span class="x">×</span></span>
<span class="tag"><b>Done</b><span class="x">×</span></span>
<span class="cnt">共 3 条</span>
</div>
<div class="list">
<div class="item">
<div class="top"><div class="ttl">任务详情页滚动优化</div><span class="num">#22</span></div>
<div class="meta"><span class="kind" style="background:#1677ff">优化</span><span class="col">Done</span><span class="dot"></span><span>归档于 10-27</span></div>
<div class="acts"><span class="mini">恢复</span><span class="mini danger">删除</span></div>
</div>
<div class="item">
<div class="top"><div class="ttl">桌面端。</div><span class="num">#5</span></div>
<div class="meta"><span class="kind" style="background:#fa8c16">需求</span><span class="col">Done</span><span class="dot"></span><span>归档于 10-26</span></div>
<div class="acts"><span class="mini">恢复</span><span class="mini danger">删除</span></div>
</div>
</div>
</div>
</div>
<div class="caption"><b>已应用条件 + 命中条数</b><span>条件可逐个撤销;时间预设自动显示实际区间。</span></div>
</div>
<div>
<div class="phone sm">
<div class="nav"><span class="back">‹</span><span class="title">已归档任务</span></div>
<div class="body">
<div class="fcard">
<div class="frow"><span class="lbl">标题</span><span class="ctl"><span class="kwbox"><input value="日报" /><span class="clr">✕</span></span></span></div>
<div class="frow"><span class="lbl">看板列</span><span class="ctl"><span class="chips"><span class="chip on">全部</span><span class="chip">Done</span></span></span></div>
<div class="frow"><span class="lbl">归档时间</span><span class="ctl">
<span class="chips"><span class="chip">全部</span><span class="chip">本周</span><span class="chip">本月</span><span class="chip">本季度</span><span class="chip on">自定义</span></span>
<span class="range"><span class="dp on">2026-09-01</span><span class="sep">~</span><span class="dp on">2026-09-30</span></span>
</span></div>
<div class="factions"><button class="btn ghost">重置</button><button class="btn primary">筛选<span class="badge">3</span></button></div>
</div>
<div class="applied">
<span class="tag"><b>标题: 日报</b><span class="x">×</span></span>
<span class="tag"><b>09-01~09-30</b><span class="x">×</span></span>
<span class="cnt">共 0 条</span>
</div>
<div class="empty"><div class="ico">🗂</div>没有符合条件的归档任务<br /><span style="font-size:11.5px;color:#c2c6cc">试试放宽时间范围或清空关键词</span></div>
</div>
</div>
<div class="caption"><b>自定义区间 + 空结果</b><span>选「自定义」才展开日期;空结果给可操作的建议文案。</span></div>
</div>
<div>
<div class="phone sm">
<div class="nav"><span class="back">‹</span><span class="title">已归档任务</span></div>
<div class="body">
<div class="fcard">
<div class="frow"><span class="lbl">标题</span><span class="ctl"><span class="kwbox"><input placeholder="输入关键词" /></span></span></div>
<div class="frow"><span class="lbl">看板列</span><span class="ctl"><span class="chips"><span class="chip on">全部</span><span class="chip">Plan</span><span class="chip">Doing</span><span class="chip">Done</span></span></span></div>
<div class="frow"><span class="lbl">归档时间</span><span class="ctl"><span class="chips"><span class="chip on">全部</span><span class="chip">本周</span><span class="chip">本月</span><span class="chip">本季度</span><span class="chip">自定义</span></span></span></div>
<div class="factions"><button class="btn ghost">重置</button><button class="btn primary">筛选</button></div>
</div>
<div class="empty"><div class="ico">📭</div>这个项目还没有归档任务<br /><span style="font-size:11.5px;color:#c2c6cc">任务完成后可在 ⋯ 菜单里归档</span></div>
</div>
</div>
<div class="caption"><b>初始空状态</b><span>一个都没归档时,告诉用户归档入口在哪。</span></div>
</div>
</div>
<h2>与现版本对照</h2>
<table>
<thead>
<tr><th style="width:130px">项</th><th style="width:38%">现在</th><th>建议</th></tr>
</thead>
<tbody>
<tr><td>类型过滤</td><td class="no">「全部类型」下拉 + 独占一行</td><td class="yes">移除</td></tr>
<tr><td>关键词</td><td class="no">无标签,占位「搜索任务标题」</td><td class="yes">左侧常驻标签「标题」+ 占位「输入关键词」</td></tr>
<tr><td>归档时间</td><td class="no">两个日期按钮,无快捷项</td><td class="yes">全部 / 本周 / 本月 / 本季度 / 自定义</td></tr>
<tr><td>查询触发</td><td class="no">改条件即时查询,无按钮</td><td class="yes">「重置 / 筛选」,按钮带生效条件数</td></tr>
<tr><td>条件可见性</td><td class="no">条件散在控件里,看不出生效了什么</td><td class="yes">列表上方条件标签 + 命中条数,可单独撤销</td></tr>
<tr><td>列表行</td><td class="no">标题与元信息挤在一起,右侧竖排两按钮</td><td class="yes">标题独占行;元信息一行;按钮移到底部右侧</td></tr>
<tr><td>空状态</td><td class="no">一行灰字「没有符合条件的归档任务」</td><td class="yes">区分「还没归档过」与「筛选无结果」,给出下一步建议</td></tr>
</tbody>
</table>
<h2>待你确认 <span class="sub">确认后我再改代码</span></h2>
<div class="notes" style="max-width:820px">
<div class="note">
<ul>
<li>「筛选」改为显式提交,是否符合你的使用习惯?(也可以保留"改预设即时生效、只有关键词需要点按钮")</li>
<li>看板列是否也保留?还是只留 标题 + 归档时间 两个条件更清爽?</li>
<li>列表行的「恢复 / 删除」放底部右侧可以吗?还是希望点行进入详情/预览?</li>
<li>快捷时间是否需要再加「近 7 天 / 近 30 天」?</li>
</ul>
</div>
</div>
</div>
<script>
(function(){
// ---- 原型状态 ----
const state = { kw:'', col:'', time:'all', from:'', to:'', applied:{ kw:'', col:'', time:'all', from:'', to:'' } }
const MOCK = [
{ id:1, title:'任务详情页滚动优化', num:'#22', kind:'优化', kindColor:'#1677ff', col:'Done', at:'2026-10-27' },
{ id:2, title:'桌面端。', num:'#5', kind:'需求', kindColor:'#fa8c16', col:'Done', at:'2026-10-26' },
{ id:3, title:'任务详情中切换看板列是提示不存在。', num:'#23', kind:'Bug', kindColor:'#ff3141', col:'Done', at:'2026-10-25' },
{ id:4, title:'windows 电脑加入监控', num:'#24', kind:'需求', kindColor:'#fa8c16', col:'Plan', at:'2026-10-21' },
{ id:5, title:'补日报', num:'#28', kind:'需求', kindColor:'#fa8c16', col:'Doing', at:'2026-10-12' },
]
let rows = MOCK.slice()
const $ = (id) => document.getElementById(id)
const toastEl = $('toast')
let toastTimer = null
function toast(msg){
toastEl.textContent = msg
toastEl.classList.add('show')
clearTimeout(toastTimer)
toastTimer = setTimeout(() => toastEl.classList.remove('show'), 1600)
}
// ---- 快捷时间区间 ----
function pad(n){ return String(n).padStart(2,'0') }
function fmt(d){ return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}` }
function presetRange(t){
const now = new Date()
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
if (t === 'week') {
const dow = (today.getDay() + 6) % 7 // 周一=0
const mon = new Date(today); mon.setDate(today.getDate() - dow)
return { from: fmt(mon), to: fmt(today) }
}
if (t === 'month') return { from: fmt(new Date(today.getFullYear(), today.getMonth(), 1)), to: fmt(today) }
if (t === 'quarter') {
const qm = Math.floor(today.getMonth() / 3) * 3
return { from: fmt(new Date(today.getFullYear(), qm, 1)), to: fmt(today) }
}
return { from:'', to:'' }
}
function rangeLabel(t){
if (t === 'custom') return ''
const r = presetRange(t)
return r.from ? `${r.from} ~ ${r.to}` : ''
}
// ---- 渲染 ----
function render(){
// 时间行
const custom = state.time === 'custom'
$('rangeRow').style.display = custom ? 'flex' : 'none'
const hint = rangeLabel(state.time)
$('rangeHint').textContent = hint
$('dpFrom').textContent = state.from || '开始日期'
$('dpTo').textContent = state.to || '结束日期'
$('dpFrom').classList.toggle('on', !!state.from)
$('dpTo').classList.toggle('on', !!state.to)
$('kwClear').style.display = state.kw ? 'block' : 'none'
// 生效条件数
const n = countApplied()
const btn = $('filterBtn')
btn.innerHTML = n ? `筛选<span class="badge">${n}</span>` : '筛选'
// 已应用条
const bar = $('appliedBar')
const tags = []
const a = state.applied
if (a.kw) tags.push(`<span class="tag"><b>标题: ${a.kw}</b><span class="x" data-clear="kw">×</span></span>`)
if (a.col) tags.push(`<span class="tag"><b>看板列: ${a.col}</b><span class="x" data-clear="col">×</span></span>`)
if (a.time === 'custom') {
if (a.from || a.to) tags.push(`<span class="tag"><b>${a.from || '…'} ~ ${a.to || '…'}</b><span class="x" data-clear="time">×</span></span>`)
} else if (a.time !== 'all') {
const name = { week:'本周', month:'本月', quarter:'本季度' }[a.time]
tags.push(`<span class="tag"><b>${name}</b><span class="x" data-clear="time">×</span></span>`)
}
if (tags.length) {
bar.style.display = 'flex'
bar.innerHTML = tags.join('') + `<span class="cnt">共 ${rows.length} 条</span>`
} else {
bar.style.display = 'none'
}
// 列表
const list = $('list')
if (!rows.length) {
const never = !tags.length
list.innerHTML = never
? `<div class="empty"><div class="ico">📭</div>这个项目还没有归档任务<br /><span style="font-size:11.5px;color:#c2c6cc">任务完成后可在 ⋯ 菜单里归档</span></div>`
: `<div class="empty"><div class="ico">🗂</div>没有符合条件的归档任务<br /><span style="font-size:11.5px;color:#c2c6cc">试试放宽时间范围或清空关键词</span></div>`
$('moreBtn').style.display = 'none'
} else {
$('moreBtn').style.display = 'block'
list.innerHTML = rows.map(r => `
<div class="item" data-id="${r.id}">
<div class="top"><div class="ttl">${r.title}</div><span class="num">${r.num}</span></div>
<div class="meta">
<span class="kind" style="background:${r.kindColor}">${r.kind}</span>
<span class="col">${r.col}</span><span class="dot"></span><span>归档于 ${r.at}</span>
</div>
<div class="acts"><span class="mini" data-act="restore">恢复</span><span class="mini danger" data-act="remove">删除</span></div>
</div>`).join('')
}
}
function countApplied(){
const a = state.applied
let n = 0
if (a.kw) n++
if (a.col) n++
if (a.time === 'custom') { if (a.from || a.to) n++ } else if (a.time !== 'all') n++
return n
}
function applyFilter(){
state.applied = { kw: state.kw, col: state.col, time: state.time, from: state.from, to: state.to }
const a = state.applied
rows = MOCK.filter(r => {
if (a.kw && !r.title.includes(a.kw)) return false
if (a.col && r.col !== a.col) return false
if (a.time !== 'custom' && a.time !== 'all') {
const rg = presetRange(a.time)
if (rg.from && (r.at < rg.from || r.at > rg.to)) return false
}
if (a.time === 'custom') {
if (a.from && r.at < a.from) return false
if (a.to && r.at > a.to) return false
}
return true
})
render()
toast(countApplied() ? `已应用 ${countApplied()} 个条件 · ${rows.length} 条` : `显示全部 ${rows.length} 条`)
}
// ---- 事件 ----
$('kw').addEventListener('input', (e) => { state.kw = e.target.value.trim(); $('kwClear').style.display = state.kw ? 'block' : 'none' })
$('kw').addEventListener('keydown', (e) => { if (e.key === 'Enter') applyFilter() })
$('kwClear').addEventListener('click', () => { state.kw = ''; $('kw').value = ''; render() })
document.querySelectorAll('#colChips .chip').forEach(el => {
el.addEventListener('click', () => {
document.querySelectorAll('#colChips .chip').forEach(x => x.classList.remove('on'))
el.classList.add('on')
state.col = el.dataset.col || ''
})
})
document.querySelectorAll('#timeChips .chip').forEach(el => {
el.addEventListener('click', () => {
document.querySelectorAll('#timeChips .chip').forEach(x => x.classList.remove('on'))
el.classList.add('on')
state.time = el.dataset.t
if (state.time !== 'custom') { state.from = ''; state.to = '' }
render()
})
})
$('dpFrom').addEventListener('click', () => {
const v = prompt('开始日期 (YYYY-MM-DD)', state.from || '2026-10-01')
if (v !== null) { state.from = v.trim(); render() }
})
$('dpTo').addEventListener('click', () => {
const v = prompt('结束日期 (YYYY-MM-DD)', state.to || '2026-10-28')
if (v !== null) { state.to = v.trim(); render() }
})
$('filterBtn').addEventListener('click', applyFilter)
$('resetBtn').addEventListener('click', () => {
state.kw = ''; state.col = ''; state.time = 'all'; state.from = ''; state.to = ''
state.applied = { kw:'', col:'', time:'all', from:'', to:'' }
$('kw').value = ''
document.querySelectorAll('#colChips .chip').forEach((x, i) => x.classList.toggle('on', i === 0))
document.querySelectorAll('#timeChips .chip').forEach((x, i) => x.classList.toggle('on', i === 0))
rows = MOCK.slice()
render()
toast('已重置')
})
$('appliedBar').addEventListener('click', (e) => {
const x = e.target.closest('.x'); if (!x) return
const k = x.dataset.clear
if (k === 'kw') state.applied.kw = ''
if (k === 'col') state.applied.col = ''
if (k === 'time') { state.applied.time = 'all'; state.applied.from = ''; state.applied.to = '' }
const a = state.applied
rows = MOCK.filter(r => {
if (a.kw && !r.title.includes(a.kw)) return false
if (a.col && r.col !== a.col) return false
return true
})
render()
toast('已移除该条件')
})
$('list').addEventListener('click', (e) => {
const btn = e.target.closest('[data-act]'); if (!btn) return
const item = btn.closest('.item')
const id = Number(item.dataset.id)
const row = rows.find(r => r.id === id)
if (btn.dataset.act === 'restore') {
toast(`已恢复「${row.title}」`)
} else {
toast(`已删除「${row.title}」(原型演示,不实际删除)`)
}
item.style.opacity = '.35'
item.style.pointerEvents = 'none'
})
$('moreBtn').addEventListener('click', () => toast('加载更多(原型演示)'))
render()
})()
</script>
</body>
</html>