Files
dsh_ai1net_server/交付物/项目管理界面/project-board.html
T
admin d97fb0fe84 项目管理界面:统一视图 + 提示收进「!」 + 数据时效可见
用户口径(2026-10-06 逐字)
- 「没安装机制的工作区不显示  黄字描述都放到 !号的图标中,不显示在工作台」
- 「这里分类不要按照工作区分了,记住 项目管理是统一管理」

改动
1. 统一视图(默认「全部」)
   - ⛔ 删掉「按工作区分块」,改为**一张四列看板**汇总本机所有目标的卡片
   - 归属改由**卡片上的「目标」标签**体现(.badge.goal),⛔ 不靠分区
   - 选择器默认「全部(N 个目标)」;选单个目标仍可切到单项目视图
   - 顺带删掉随分区一起废掉的样式(projgroup/pghead/lane* 等,共 15 行死代码)

2. 提示一律收进右上角「!」图标
   - 工作台上去掉所有黄字横幅(原来是 notice 容器)
   - 「!」无内容时淡显且不可点;有内容时点开弹层、点外面/Esc 关闭
   - 未装机制的工作区**彻底不显示**(含原来那行「扫到但没装机制 N 个目录」)
     ⚠️ 后端仍保留 `skipped` 字段(只给 CLI/取证用),UI 不再展示

3. 数据时效可见 + 自动刷新
   - 服务出快照时带 `epoch`;页面读数「数据 N 秒前」**只用服务的 epoch 算**,
     ⛔ 不用本地 Date.now() 顶上(否则刷新一次就"变新",看不出数据其实没动)
   - 超 15 秒 ⇒ 读数转黄(.is-stale),一眼看出"只是轮询、数据没动"
   - 每秒重画时效读数(⛔ 不重新取数)
   - 轮询自适应:数据有变化 ⇒ 3 秒一探;连续 3 次没变 ⇒ 放到 15 秒;一变立刻回收
   - 「刷新」按钮改手动模式:扫描中/已刷新有即时反馈(toast)

4. 操作反馈改一次性 toast(新建/删除/失败),⛔ 不常驻工作台

实测(浏览器侧,强刷新避开缓存)
- 6 张卡片全部落在一张四列板上,标签正确(本机协作 ×1 / vibe-product ×11)
- 四个列标题只出现一次(不再是每区一套)
- 「!」有 1 条内容、默认收起、点击展开、再点关闭
- 时效读数「数据 2 秒前」正常跳动
2026-10-06 09:17:17 +08:00

659 lines
31 KiB
HTML
Raw 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:#0f1115; --panel:#171a21; --panel2:#1e222b; --line:#2a2f3a;
--fg:#e6e9ef; --dim:#98a2b3; --dim2:#6b7686;
--accent:#4c6ef5; --warn:#f0a020; --bad:#e5534b; --ok:#3fb950;
--r:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
font:14px/1.55 -apple-system,"Segoe UI","Microsoft YaHei",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
/* ── 顶栏:项目选择 ── */
header{position:sticky;top:0;z-index:20;background:rgba(15,17,21,.92);
backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;gap:14px;padding:12px 18px;flex-wrap:wrap}
.brand{font-weight:600;letter-spacing:.2px}
.brand small{color:var(--dim2);font-weight:400;margin-left:8px}
select,button{background:var(--panel2);color:var(--fg);border:1px solid var(--line);
border-radius:8px;padding:7px 11px;font:inherit;cursor:pointer}
select:focus,button:focus{outline:2px solid var(--accent);outline-offset:1px}
.spacer{flex:1}
.stamp{color:var(--dim2);font-size:12px}
/* ── 项目概要 ── */
.summary{display:flex;gap:10px;padding:0 18px 12px;flex-wrap:wrap}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;
padding:4px 11px;font-size:12px;color:var(--dim)}
.chip b{color:var(--fg);font-weight:600}
/* ── 列 ── */
main{padding:16px 18px 60px}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1100px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.cols{grid-template-columns:1fr}}
.col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
display:flex;flex-direction:column;min-height:160px}
.colhead{display:flex;align-items:center;gap:8px;padding:11px 13px;
border-bottom:1px solid var(--line)}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.coltitle{font-weight:600;font-size:13px}
.count{margin-left:auto;background:var(--panel2);border:1px solid var(--line);
border-radius:999px;padding:1px 9px;font-size:12px;color:var(--dim)}
.cards{padding:10px;display:flex;flex-direction:column;gap:9px;flex:1}
/* ── 统一视图:卡片上的「目标」标签(🔴 归属靠标签,⛔ 不靠分区)── */
.badge.goal{border-color:var(--accent);color:var(--accent)}
.card{background:var(--panel2);border:1px solid var(--line);border-left-width:3px;
border-radius:8px;padding:10px 11px;cursor:pointer;
transition:transform .08s ease,border-color .12s ease}
.card:hover{transform:translateY(-1px);border-color:var(--accent)}
.card .t{font-weight:500;word-break:break-word}
.card .meta{margin-top:6px;color:var(--dim2);font-size:12px;
display:flex;gap:9px;flex-wrap:wrap}
.badge{display:inline-block;border-radius:5px;padding:1px 6px;font-size:11px;
border:1px solid var(--line);color:var(--dim)}
.empty{color:var(--dim2);font-size:12px;text-align:center;padding:18px 6px}
.warnline{margin:0 0 12px;padding:10px 12px;border-radius:8px;
background:rgba(240,160,32,.09);border:1px solid rgba(240,160,32,.35);
color:#f4c67a;font-size:12.5px}
.errline{margin:0 0 12px;padding:10px 12px;border-radius:8px;
background:rgba(229,83,75,.1);border:1px solid rgba(229,83,75,.4);color:#f2a09a}
.okline{margin:0 0 12px;padding:10px 12px;border-radius:8px;
background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.4);color:#8fe39a;
font-size:12.5px;white-space:pre-wrap;word-break:break-word}
pre.out{margin:8px 0 0;padding:10px;border-radius:8px;background:#12141a;
border:1px solid var(--line);color:var(--dim);font-size:11.5px;
max-height:260px;overflow:auto;white-space:pre-wrap}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.danger{background:transparent;border-color:rgba(229,83,75,.5);color:#f2a09a}
button.danger:hover{background:rgba(229,83,75,.12)}
button[disabled]{opacity:.5;cursor:not-allowed}
/* ── 新建对话框 ── */
.modal{position:fixed;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);
width:min(560px,92vw);background:var(--panel);border:1px solid var(--line);
border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.5);
opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease}
.modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.hint{color:var(--dim);font-size:12.5px;margin:0 0 14px}
.hint b{color:var(--fg)}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.fld>span{color:var(--dim);font-size:12px}
.fld input,.fld select{background:var(--panel2);color:var(--fg);border:1px solid var(--line);
border-radius:8px;padding:8px 10px;font:inherit;width:100%}
.fld input:focus,.fld select:focus{outline:2px solid var(--accent);outline-offset:1px}
.fnote{margin:2px 0 12px;font-size:12px;color:var(--dim2);min-height:1.2em}
.fnote.bad{color:#f2a09a}
.facts{display:flex;align-items:center;gap:10px}
/* ── 「!」状态图标 + 悬浮说明(⚠️ 提示一律收进这里,⛔ 不铺在工作台上)── */
.info{position:relative;display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:700;line-height:1;
border:1px solid var(--line);background:var(--panel2);color:var(--dim);cursor:pointer;
user-select:none;flex:none}
.info.idle{opacity:.42} /* 没内容时淡掉,但仍在位 */
.info.fancy:not(.idle){border-color:var(--warn);color:var(--warn)}
.info:focus{outline:2px solid var(--accent);outline-offset:2px}
.infopop{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:min(480px,92vw);
background:var(--panel);border:1px solid var(--line);border-radius:10px;
box-shadow:0 12px 34px rgba(0,0,0,.34);padding:12px 14px;display:none}
.infopop.on{display:block}
.infopop .ih{font-size:12px;color:var(--dim2);font-weight:600;letter-spacing:.5px;
text-transform:uppercase;margin:0 0 8px}
.infopop .iw{font-size:13px;line-height:1.62;padding:7px 0;border-top:1px dashed var(--line);
color:var(--fg)}
.infopop .iw:first-of-type{border-top:0;padding-top:0}
.infopop .iw b{color:var(--warn)}
.infopop .iw code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:12px}
/* ── 一次性操作反馈(自动消失;⛔ 不常驻)── */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:60;
max-width:min(680px,92vw);padding:11px 15px;border-radius:10px;font-size:13px;
line-height:1.55;border:1px solid var(--line);background:var(--panel);
box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;
transition:opacity .16s ease, transform .16s ease;word-break:break-word}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast.ok{border-color:var(--ok)}
.toast.err{border-color:var(--bad);color:#f2a09a}
.toast pre.out{margin:8px 0 0;max-height:150px}
/* 时效警示:数据 > 15 秒没动 ⇒ 转黄(⛔ 不靠用户猜"刷新了没") */
.stamp.is-stale{color:var(--warn)}
/* ── 抽屉 ── */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;
transition:opacity .15s ease;z-index:40}
.mask.on{opacity:1;pointer-events:auto}
aside{position:fixed;top:0;right:0;height:100%;width:min(560px,94vw);background:var(--panel);
border-left:1px solid var(--line);z-index:50;transform:translateX(100%);
transition:transform .18s ease;display:flex;flex-direction:column}
aside.on{transform:none}
.ahead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ahead .ttl{font-weight:600;flex:1;word-break:break-word}
.abody{overflow:auto;padding:14px 16px 30px}
.kv{display:grid;grid-template-columns:104px 1fr;gap:7px 12px;font-size:13px}
.kv dt{color:var(--dim2)}.kv dd{margin:0;word-break:break-word}
.sect{margin-top:18px}
.sect h4{margin:0 0 8px;font-size:12px;color:var(--dim2);font-weight:600;
text-transform:uppercase;letter-spacing:.6px}
.sess{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);
border-radius:8px;margin-bottom:7px;background:var(--panel2);cursor:pointer}
.sess:hover{border-color:var(--accent)}
.sess .sn{flex:1;word-break:break-word;font-size:13px}
.sess .go{color:var(--accent);font-size:12px;flex:none}
.flow{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px}
.flow:last-child{border-bottom:0}
.flow .fn{flex:1}
.flow .fc{color:var(--dim2);font-size:12px}
</style>
</head>
<body>
<header>
<div class="hrow">
<div class="brand">项目管理<small id="ws">—</small></div>
<label for="psel" class="stamp">项目</label>
<select id="psel" aria-label="选择项目"></select>
<button id="btndel" type="button" class="danger" title="删除当前项目(可选粒度)">删除</button>
<div class="spacer"></div>
<span class="stamp" id="stamp">加载中…</span>
<span class="info fancy" id="infobtn" tabindex="0" role="button" aria-label="状态说明"
title="状态说明">!</span>
<button id="btnnew" type="button" class="primary">+ 新建目标</button>
<button id="refresh" type="button" title="立即重新扫一遍本机所有工作区">刷新</button>
</div>
<div class="summary" id="summary"></div>
</header>
<main>
<div class="cols" id="cols"></div>
</main>
<div class="toast" id="toast"></div>
<div class="mask" id="mask"></div>
<aside id="drawer" aria-hidden="true">
<div class="ahead">
<div class="ttl" id="dtitle">—</div>
<button id="dclose" type="button">关闭</button>
</div>
<div class="abody" id="dbody"></div>
</aside>
<!-- 新建目标(新工作区)对话框 -->
<div class="mask" id="cmask"></div>
<div class="modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="mtitle">
<div class="ahead">
<div class="ttl" id="mtitle">新建目标(新工作区)</div>
<button id="mclose" type="button">关闭</button>
</div>
<div class="abody">
<p class="hint">在选定的根目录下建一个新工作区,并写入目标登记。走技能自带的建区入口(幂等)。
<b>目录名</b>同时作为工作区名,<b>目标标题</b>是「目标=项目」里的项目名。</p>
<label class="fld"><span>根目录</span><select id="froot"></select></label>
<label class="fld"><span>工作区名(目录名)</span>
<input id="fname" type="text" placeholder="例:my-new-project" autocomplete="off"></label>
<label class="fld"><span>目标标题</span>
<input id="ftitle" type="text" placeholder="例:把 XX 做成 YY" autocomplete="off"></label>
<label class="fld"><span>项目简称(可空 ⇒ 用工作区名)</span>
<input id="fshort" type="text" placeholder="例:XX 项目" autocomplete="off"></label>
<div class="fnote" id="fnote"></div>
<div class="facts">
<button id="mok" type="button" class="primary">创建</button>
<button id="mcancel" type="button">取消</button>
<span class="stamp" id="mstamp"></span>
</div>
</div>
</div>
<script>
"use strict";
var STATE = { data:null, cur:-1, epoch:0, sameHits:0, sig:"" }; // cur=-1 ⇒ 「全部」
function esc(s){ return String(s==null?"":s).replace(/[&<>"']/g, function(c){
return ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[c]; }); }
function fmtWhen(s){
if(!s) return "—";
var m = String(s).match(/^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})/);
if(!m) return String(s);
return m[1]+"-"+m[2]+"-"+m[3]+" "+m[4]+":"+m[5];
}
/* ── 时效条:数据「多久没动」 ──
🔴 两条口径(照现有看板 board.html::paintAge 的做法):
① 读数由**服务给的 epoch** 算,⛔ 不用本地时钟顶上;
② 超阈值 ⇒ 整块转警示色,让"数据停了"一眼可见(⛔ 不靠用户猜)。 */
var AGE_STALE = 15; // 秒;超过 ⇒ 转警示色
function paintAge(){
var el = document.getElementById("stamp");
if(!el || !STATE.epoch){ return; }
var s = Math.max(0, Math.round(Date.now()/1000 - STATE.epoch));
el.textContent = "数据 " + s + " 秒前";
el.classList.toggle("is-stale", s > AGE_STALE);
}
/* 🔴 轮询节奏=服务的扫描节奏(⛔ 页面不自行加频:加了只是空转,不会更快)。
联动:数据是新的 ⇒ 3 秒一探;连续多次没变化 ⇒ 逐步放到 15 秒(省电、省 CPU),
一旦有变化立刻回到 3 秒。⛔ 不做"页面醒了才刷"这类花活,避免假刷新。 */
var POLL_FAST = 3000, POLL_SLOW = 15000;
function currentPoll(){
return (STATE.sameHits >= 3) ? POLL_SLOW : POLL_FAST;
}
function loop(){
load();
setTimeout(loop, currentPoll());
}
function setInfo(items){
var btn = document.getElementById("infobtn");
var old = document.getElementById("infopop");
if(old) old.parentNode.removeChild(old);
if(!items || !items.length){
btn.classList.add("idle"); // 无内容 ⇒ 淡显、不可点
btn.title = "无特别说明";
btn.setAttribute("aria-disabled","true");
return;
}
btn.classList.remove("idle");
btn.removeAttribute("aria-disabled");
btn.title = items.length + " 条状态说明(点开看)";
var pop = document.createElement("div");
pop.className = "infopop"; pop.id = "infopop";
pop.innerHTML = '<div class="ih">状态说明 · '+items.length+' 条</div>' + items.join("");
btn.parentNode.appendChild(pop);
}
/* ── 操作结果提示(新建/删除这类一次性反馈;⛔ 不常驻工作台)── */
function toast(kind, html, ms){
var el = document.getElementById("toast");
el.className = "toast on " + (kind || "ok");
el.innerHTML = html;
clearTimeout(toast._t);
if(kind !== "err") toast._t = setTimeout(function(){ el.className = "toast"; }, ms || 4200);
}
function toggleInfo(force){
var pop = document.getElementById("infopop");
if(!pop) return;
var on = (typeof force === "boolean") ? force : !pop.classList.contains("on");
pop.classList.toggle("on", on);
}
function load(manual){
if(manual) document.getElementById("stamp").textContent = "扫描中…";
fetch("/api/projects", {cache:"no-store"}).then(function(r){
if(!r.ok) throw new Error("HTTP " + r.status); // ⛔ 别把 404 当空数据静默吞掉
return r.json();
})
.then(function(d){
if(!d || d.ok === false){
toast("err", '扫工作区失败:' + esc((d&&d.err)||"未知错误"));
return;
}
STATE.data = d;
if(manual) toast("ok", "已刷新(" + esc(d.ts || "") + ")", 2200);
document.getElementById("ws").textContent = (d.roots||[]).join(" · ") || "—";
/* 🔴 时效**只用服务给的 epoch** 算(⛔ 不用本地 Date.now() 顶上),
由 setInterval(paintAge) 每秒重画 ⇒ 页面"看起来在动"但数据没变时,
读数会如实爬到 5 秒以上 ⇒ 一眼看出"只是轮询、数据没动"。 */
STATE.epoch = Number(d.epoch || 0) || (Date.now() / 1000);
paintAge();
/* 变化探测:内容没变 ⇒ 逐步拉长轮询间隔(省电);一变立刻回到 3 秒 */
var sig = JSON.stringify(d.projects.map(function(p){
return [p.dir, p.life, p.life_at, p.has_goal, (p.cards||[]).length,
p.queue.done, p.queue.open, p.queue.blocked,
(p.acc||{}).pass, (p.acc||{}).n]; }));
if(sig === STATE.sig){ STATE.sameHits = (STATE.sameHits||0) + 1; }
else { STATE.sig = sig; STATE.sameHits = 0; }
var sel = document.getElementById("psel");
if(!d.projects.length){
sel.innerHTML = '<option value="-1">(本机暂无装了机制的工作区)</option>';
STATE.cur = -1;
} else {
// 🔴 默认「全部」:一屏看完本机所有目标(⛔ 不再默认只显示一个)
sel.innerHTML = '<option value="-1">全部('+d.projects.length+' 个目标)</option>'
+ d.projects.map(function(p,i){
return '<option value="'+i+'">'+esc(p.name)+'</option>'; }).join("");
if(STATE.cur >= d.projects.length) STATE.cur = -1;
sel.value = String(STATE.cur);
}
render();
}).catch(function(e){
toast("err", '请求失败:'+esc(e));
});
}
/* 🔴 卡片状态来自台账;这里按「目标」分组渲染。
`STATE.cur === -1` ⇒ **全部目标**(默认):一屏看完本机所有项目的卡片,按目标分段。
`STATE.cur >= 0` ⇒ 只看某一个目标(原行为)。 */
function _stateDot(key){
return key==="done" ? "var(--ok)" : key==="blocked" ? "var(--bad)"
: key==="running" ? "var(--accent)" : "var(--dim2)";
}
function _cardHtml(t){
var dot = _stateDot(t.state), bits = [];
// 🔴 统一视图里,卡片自带「目标 · 工作区」标签(⛔ 不靠分区来体现归属)
if(t._goal) bits.push('<span class="badge goal">'+esc(t._goal)+'</span>');
if(t.line) bits.push('<span class="badge">'+esc(t.line)+'</span>');
if(t.by) bits.push('<span class="badge">'+esc(t.by)+'</span>');
if(t.t_end) bits.push(esc(fmtWhen(t.t_end)));
else if(t.t_start) bits.push(esc(fmtWhen(t.t_start)));
return '<div class="card" style="border-left-color:'+dot+'" data-tid="'+esc(t.id)+'"'+
' data-pw="'+esc(t._ws||"")+'">'+
'<div class="t">'+esc(t.title||t.id)+'</div>'+
(t.block_reason ? '<div class="meta" style="color:#f2a09a">受阻:'+esc(t.block_reason)+'</div>' : '')+
(bits.length ? '<div class="meta">'+bits.join("")+'</div>' : '')+
'</div>';
}
function _colHtml(key, label, list){
var inner = list.length ? list.map(_cardHtml).join("")
: '<div class="empty">(此列无卡片)</div>';
return '<section class="col"><div class="colhead"><span class="dot" style="background:'+
_stateDot(key)+'"></span><span class="coltitle">'+esc(label)+'</span><span class="count">'+
list.length+'</span></div><div class="cards">'+inner+'</div></section>';
}
function _bindCards(){
Array.prototype.forEach.call(document.querySelectorAll(".card"), function(el){
el.addEventListener("click", function(){
openDetail(el.getAttribute("data-tid"), el.getAttribute("data-pw"));
});
});
}
/* ── 统一视图(⛔ 不按工作区分块):一张四列看板,卡片自带「目标/工作区」标签 ──
用户 2026-10-06:「这里分类不要按照工作区分了,记住 项目管理是统一管理」 */
function renderAll(){
var d = STATE.data, ps = d.projects;
var sums = document.getElementById("summary");
var cols = document.getElementById("cols");
document.getElementById("btndel").disabled = true; // ⛔ 「全部」不是单个项目,删不得
var tot = {total:0, done:0, open:0, blocked:0};
ps.forEach(function(p){
tot.total += p.queue.total; tot.done += p.queue.done;
tot.open += p.queue.open; tot.blocked += p.queue.blocked;
});
var s = [];
s.push('<span class="chip">目标 <b>'+ps.length+'</b> 个</span>');
s.push('<span class="chip">工作区 <b>'+(d.roots||[]).join(" · ")+'</b></span>');
s.push('<span class="chip">台账合计 <b>'+tot.total+'</b> 件</span>');
s.push('<span class="chip">已完成 <b>'+tot.done+'</b></span>');
s.push('<span class="chip">未完 <b>'+tot.open+'</b></span>');
if(tot.blocked) s.push('<span class="chip">受阻 <b>'+tot.blocked+'</b></span>');
sums.innerHTML = s.join("");
// 提示(同样收进「!」)
var nt = [];
var noGoal = ps.filter(function(x){ return !x.has_goal; });
if(noGoal.length)
nt.push('<div class="iw">有 <b>'+noGoal.length+'</b> 个工作区<b>还没登记目标</b>(只有机制骨架):'+
esc(noGoal.map(function(x){ return x.name; }).join("、"))+'</div>');
var notRun = ps.filter(function(x){ return x.life && x.life !== "进行中"; });
if(notRun.length)
nt.push('<div class="iw">有 <b>'+notRun.length+'</b> 个目标状态<b>不是「进行中」</b>:'+
esc(notRun.map(function(x){ return x.name+"("+x.life+")"; }).join("、"))+'</div>');
setInfo(nt);
if(!ps.length){
cols.innerHTML = '<div class="empty">本机没有装了机制的工作区。点右上角「+ 新建目标」建一个。</div>';
return;
}
// 🔴 所有目标的所有卡片汇到一张板;每张卡片标出「目标 · 工作区」
var byState = {};
ps.forEach(function(p){
(p.cards || []).forEach(function(c){
var x = {};
for(var k in c){ x[k] = c[k]; }
x._ws = p.dir; // 供 openDetail 反查所属项目
x._goal = p.name; // 卡片上的标签
x._life = p.life || "";
(byState[c.state] = byState[c.state] || []).push(x);
});
});
cols.innerHTML = '<div class="cols">' + d.cols.map(function(c){
return _colHtml(c.key, c.label, byState[c.key] || []);
}).join("") + '</div>';
_bindCards();
}
/* ── 视图 B:单个目标(原行为)── */
function renderOne(){
var d = STATE.data;
var p = d.projects[STATE.cur];
var sums = document.getElementById("summary");
var cols = document.getElementById("cols");
if(!p){ renderAll(); return; }
document.getElementById("btndel").disabled = false;
// 概要
var q = p.queue, s = [];
s.push('<span class="chip">项目名 <b>'+esc(p.name)+'</b></span>');
s.push('<span class="chip">工作区 <b>'+esc(p.dir)+'</b></span>');
s.push('<span class="chip">建立 <b>'+esc(fmtWhen(p.declared_at))+'</b></span>');
s.push('<span class="chip">台账 <b>'+q.total+'</b> 件</span>');
s.push('<span class="chip">已完成 <b>'+q.done+'</b></span>');
s.push('<span class="chip">未完 <b>'+q.open+'</b></span>');
if(q.blocked) s.push('<span class="chip">受阻 <b>'+q.blocked+'</b></span>');
if(p.acc && p.acc.n) s.push('<span class="chip">验收 <b>'+p.acc.pass+' / '+p.acc.n+'</b></span>');
s.push('<span class="chip">工作流 <b>'+p.flows.length+'</b></span>');
if(p.life) s.push('<span class="chip">目标状态 <b>'+esc(p.life)+'</b></span>');
if(p.topics && p.topics.length)
s.push('<span class="chip">任务类别 <b>'+esc(p.topics.join("、"))+'</b></span>');
sums.innerHTML = s.join("");
// ── 提示:一律收进右上角「!」图标里(⛔ 不铺在工作台)──
var nt = [];
if(!p.has_goal)
nt.push('<div class="iw">这个工作区<b>还没有登记目标</b>(只有机制骨架)⇒ 项目名是兜底的,卡片按台账显示。</div>');
if(p.life && p.life !== "进行中")
nt.push('<div class="iw">该目标状态为「'+esc(p.life)+'」('+esc(fmtWhen(p.life_at))+')。</div>');
setInfo(nt);
// 列
var byState = {};
p.cards.forEach(function(c){ (byState[c.state] = byState[c.state] || []).push(c); });
cols.innerHTML = d.cols.map(function(c){
return _colHtml(c.key, c.label, byState[c.key] || []);
}).join("");
// 卡片点开 → 详情(含跳会话)
_bindCards();
}
/* ── 视图分发 ── */
function render(){
if(!STATE.data) return;
if(STATE.cur < 0) renderAll(); else renderOne();
}
function openDetail(tid, wsHint){
var proj = STATE.data.projects;
// 「全部」视图下卡片自带所属工作区;单项目视图下就是当前那个
var p = (wsHint ? proj.filter(function(x){ return x.dir === wsHint; })[0] : null)
|| proj[STATE.cur] || {};
var t = (p.cards || []).filter(function(x){ return x.id === tid; })[0] || {};
var label = {}; STATE.data.cols.forEach(function(c){ label[c.key] = c.label; });
document.getElementById("dtitle").textContent = tid;
var h = [];
h.push('<dl class="kv">');
h.push('<dt>所属项目</dt><dd>'+esc(p.name)+'</dd>');
h.push('<dt>状态</dt><dd>'+esc(label[t.state]||t.state||"—")+'</dd>');
if(t.line) h.push('<dt>工作流</dt><dd>'+esc(t.line)+'</dd>');
if(t.by) h.push('<dt>负责</dt><dd>'+esc(t.by)+'</dd>');
if(t.t_start) h.push('<dt>开始</dt><dd>'+esc(fmtWhen(t.t_start))+'</dd>');
if(t.t_end) h.push('<dt>结束</dt><dd>'+esc(fmtWhen(t.t_end))+'</dd>');
if(t.block_reason) h.push('<dt>受阻原因</dt><dd style="color:#f2a09a">'+esc(t.block_reason)+'</dd>');
if(t.artifact) h.push('<dt>产出</dt><dd>'+esc(t.artifact)+'</dd>');
h.push('<dt>工作区</dt><dd>'+esc(p.ws)+'</dd>');
h.push('</dl>');
// 验收判据(本项目达成与否的唯一机读依据)
h.push('<div class="sect"><h4>验收判据('+((p.acc&&p.acc.n)||0)+' 条 · 通过 '+((p.acc&&p.acc.pass)||0)+')</h4>');
if(p.acc && p.acc.items && p.acc.items.length){
p.acc.items.forEach(function(a){
h.push('<div class="flow"><span class="fn">'+esc(a.k)+'</span>'+
'<span class="fc" style="color:'+(a.pass?"#8fe39a":"#f2a09a")+'">'+
(a.pass?"过":"未过")+' · '+esc(a.v.slice(0,120))+'</span></div>');
});
} else h.push('<div class="empty">(无验收判据)</div>');
h.push('</div>');
// 工作流
h.push('<div class="sect"><h4>工作流(任务类别)</h4>');
if((p.flows||[]).length){
p.flows.forEach(function(f){
h.push('<div class="flow"><span class="fn">'+esc(f.line)+'</span>'+
'<span class="fc">共 '+f.total+' · 完成 '+f.done+' · 未完 '+f.open+'</span></div>');
});
} else h.push('<div class="empty">(无)</div>');
h.push('</div>');
document.getElementById("dbody").innerHTML = h.join("");
document.getElementById("mask").classList.add("on");
document.getElementById("drawer").classList.add("on");
document.getElementById("drawer").setAttribute("aria-hidden","false");
}
function closeDetail(){
document.getElementById("mask").classList.remove("on");
document.getElementById("drawer").classList.remove("on");
document.getElementById("drawer").setAttribute("aria-hidden","true");
}
/* ── 新建目标(新工作区) ── */
function openNew(){
var d = STATE.data || {};
var r = document.getElementById("froot");
r.innerHTML = (d.roots||[]).map(function(x){
return '<option value="'+esc(x)+'">'+esc(x)+'</option>'; }).join("");
document.getElementById("fname").value = "";
document.getElementById("ftitle").value = "";
document.getElementById("fshort").value = "";
document.getElementById("fnote").textContent = "";
document.getElementById("fnote").className = "fnote";
document.getElementById("mstamp").textContent = "";
document.getElementById("mok").disabled = false;
document.getElementById("cmask").classList.add("on");
document.getElementById("modal").classList.add("on");
document.getElementById("fname").focus();
}
function closeNew(){
document.getElementById("cmask").classList.remove("on");
document.getElementById("modal").classList.remove("on");
}
function doCreate(){
var root = document.getElementById("froot").value;
var name = document.getElementById("fname").value.trim();
var title = document.getElementById("ftitle").value.trim();
var short = document.getElementById("fshort").value.trim();
var note = document.getElementById("fnote");
if(!name || /[\/\\<>:"|?*]/.test(name)){
note.className = "fnote bad";
note.textContent = "工作区名不合法(不许空、不许带路径分隔符或 <>:\"|?*)";
return;
}
if(!title){ title = name; }
document.getElementById("mok").disabled = true;
document.getElementById("mstamp").textContent = "创建中…(要跑建区脚本,稍等)";
fetch("/api/create", {method:"POST", headers:{"Content-Type":"application/json"},
body: JSON.stringify({root:root, name:name, title:title, short:short})})
.then(function(r){ return r.json(); })
.then(function(d){
document.getElementById("mok").disabled = false;
if(d.ok){
note.className = "fnote";
note.innerHTML = '✅ 已创建:<b>'+esc(d.ws)+'</b>';
document.getElementById("mstamp").textContent = "";
toast("ok", '创建成功:'+esc(d.ws) + (d.out ? '<pre class="out">'+esc(d.out)+'</pre>' : ""));
setTimeout(function(){ closeNew(); load(); }, 900);
} else {
note.className = "fnote bad";
note.textContent = "创建失败:" + (d.err || "未知错误");
document.getElementById("mstamp").textContent = "rc=" + (d.rc==null?"-":d.rc);
}
}).catch(function(e){
document.getElementById("mok").disabled = false;
note.className = "fnote bad";
note.textContent = "请求失败:" + e;
});
}
/* ── 删除当前项目 ── */
function doDelete(){
var p = (STATE.data||{}).projects && STATE.data.projects[STATE.cur];
if(!p) return;
var m = prompt("删除「"+p.name+"」——选择粒度:\n\n"+
"输入 1 = 只删【目标登记】(工作区与台账原样保留,可逆;项目从列表消失)\n"+
"输入 2 = 把【整个工作区】送回收站(不永久删除,可从回收站还原)\n\n"+
"(不输入或取消 = 什么都不做)", "1");
if(m !== "1" && m !== "2") return;
var mode = (m === "2") ? "ws" : "goal";
if(mode === "ws" &&
!confirm("确认把整个工作区送回收站?\n\n"+p.ws+"\n\n会连同台账、目标、脚本一起移走。")) return;
fetch("/api/delete", {method:"POST", headers:{"Content-Type":"application/json"},
body: JSON.stringify({ws:p.ws, mode:mode})})
.then(function(r){ return r.json(); })
.then(function(d){
if(d.ok){
toast("ok", '已删除('+(mode==="ws"?"整个工作区送回收站":"目标登记归档")+
'):'+esc(d.moved_to||d.trashed||""));
load();
} else {
toast("err", '删除失败:'+esc(d.err||"未知错误"));
}
}).catch(function(e){
toast("err", '请求失败:'+esc(e));
});
}
document.getElementById("mask").addEventListener("click", closeDetail);
document.getElementById("dclose").addEventListener("click", closeDetail);
document.getElementById("cmask").addEventListener("click", closeNew);
document.getElementById("mclose").addEventListener("click", closeNew);
document.getElementById("mcancel").addEventListener("click", closeNew);
document.getElementById("mok").addEventListener("click", doCreate);
document.getElementById("btnnew").addEventListener("click", openNew);
document.getElementById("btndel").addEventListener("click", doDelete);
document.getElementById("psel").addEventListener("change", function(e){
STATE.cur = parseInt(e.target.value, 10);
if(isNaN(STATE.cur)) STATE.cur = -1;
render(); });
document.getElementById("refresh").addEventListener("click", function(){ load(true); });
/* 「!」状态说明:点开/再点关、悬浮可看、点外面关 */
(function(){
var btn = document.getElementById("infobtn");
btn.addEventListener("click", function(e){ e.stopPropagation(); toggleInfo(); });
btn.addEventListener("keydown", function(e){
if(e.key === "Enter" || e.key === " "){ e.preventDefault(); toggleInfo(); } });
document.addEventListener("click", function(e){
var pop = document.getElementById("infopop");
if(pop && pop.classList.contains("on") && !btn.contains(e.target)) toggleInfo(false);
});
})();
document.addEventListener("keydown", function(e){
if(e.key === "Escape"){ closeDetail(); closeNew(); toggleInfo(false); } });
loop(); // 轮询节奏会随「数据有没有变」自适应(见 currentPoll)
setInterval(paintAge, 1000); // 时效读数每秒重画(⛔ 不重新取数)
</script>
</body>
</html>