From 2937b75143ab377128cf3eadb12f48c10797db38 Mon Sep 17 00:00:00 2001 From: caoqianming Date: Fri, 3 Jul 2026 16:49:44 +0800 Subject: [PATCH] =?UTF-8?q?style(web):=20status=20=E5=BE=BD=E7=AB=A0?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E6=80=81=E9=9D=99=E9=BB=98=E2=80=94=E2=80=94?= =?UTF-8?q?active=20=E4=B8=8D=E6=8C=82=E5=BE=BD=E7=AB=A0,=E7=BB=88?= =?UTF-8?q?=E6=80=81=E8=A1=8C=E6=B7=A1=E5=8C=96(bump=200.38.6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 「进行中」徽章与运行圆点语义撞车,且列表主体都是 active,重复徽章是零信息 噪音。改为:active 不渲染徽章(列表 + chat-meta 同规则),completed/abandoned 保留徽章且整行淡化(st-* class,hover 恢复),脉冲圆点成为唯一动效信号。 删不再渲染的 .badge.active CSS。 Co-Authored-By: Claude Fable 5 --- PROGRESS.md | 3 +++ core/__init__.py | 2 +- web/static/dev.html | 5 ++++- web/static/js/chat.js | 17 +++++++++++------ 4 files changed, 19 insertions(+), 8 deletions(-) diff --git a/PROGRESS.md b/PROGRESS.md index 39e942d..6b5c8e6 100644 --- a/PROGRESS.md +++ b/PROGRESS.md @@ -21,6 +21,9 @@ ## 已完成关键能力 +### 2026-07-03 / web status 徽章改"默认态静默"——active 不挂徽章,终态行淡化(bump 0.38.6) +运行圆点落地后暴露 status 徽章两问题:「进行中」(生命周期 active)与「运行中」(run_status)语义撞车;列表主体都是 active,每行重复挂蓝徽章是零信息噪音、还占 meta 行首槽。设计原则定为**默认态静默、例外态着色、瞬时态用动效**:active 不再渲染徽章(列表行 + 中栏 chat-meta 同规则,chat-meta 终态徽章保留兼解释"输入框为什么消失");completed/abandoned 徽章保留且整行淡化(`st-*` class,opacity .68,hover 恢复——st- 前缀防撞选中态 .task-row.active);绿脉冲点成为唯一动效信号,与生命周期解耦。筛选下拉「进行中」文案不动(筛选语境无歧义)。顺手删掉不再被渲染的 `.badge.active` CSS。改 `web/static/js/chat.js` + `web/static/dev.html`。 + ### 2026-07-03 / web 运行态标识精简为纯脉冲圆点(bump 0.38.5) 用户反馈「运行中」等文字让列表 meta 行太拥挤。标识收成一个 7px 带色脉冲圆点(绿=运行中/橙=停止中/红=出错),文案全部移进 hover title(error 仍带 run_error 详情);圆点在 baseline 对齐的 meta 行里补 `align-self:center`。改 `web/static/js/chat.js` + `web/static/dev.html`。 diff --git a/core/__init__.py b/core/__init__.py index 173d217..b85c2fa 100644 --- a/core/__init__.py +++ b/core/__init__.py @@ -1,3 +1,3 @@ # zcbot 版本号单一事实源:web/app.py 的 FastAPI version、/healthz 返回、前端展示都引这里。 # 改版本只动这一行。 -__version__ = "0.38.5" +__version__ = "0.38.6" diff --git a/web/static/dev.html b/web/static/dev.html index b712c95..b4760c0 100644 --- a/web/static/dev.html +++ b/web/static/dev.html @@ -570,9 +570,12 @@ .run-ind .run-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .run-ind.running .run-dot, .run-ind.cancelling .run-dot { animation: run-pulse 1.2s ease-in-out infinite; } @keyframes run-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } + /* 生命周期徽章只渲终态(active 静默,见 renderTaskList/renderChatMeta);终态行整体淡化, + 开放任务自然浮起,hover 恢复全亮便于读 meta */ .badge.completed { background: var(--c-green-bg); color: var(--c-green); } .badge.abandoned { background: var(--accent-soft); color: var(--accent); } - .badge.active { background: #eef; color: #336; } + .task-row.st-completed, .task-row.st-abandoned { opacity: .68; } + .task-row.st-completed:hover, .task-row.st-abandoned:hover { opacity: 1; } /* 微信渠道专属:品牌绿徽章(白字 + 内嵌微信图标),与蓝灰状态徽章拉开区分 */ .badge.wx { background: #07C160; color: #fff; display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; } diff --git a/web/static/js/chat.js b/web/static/js/chat.js index 4f9b219..ded1a44 100644 --- a/web/static/js/chat.js +++ b/web/static/js/chat.js @@ -182,24 +182,28 @@ function renderTaskList(tasks, append = false) { return; } if (append && !tasks.length) return; // 末页空 batch,不动 DOM - const statusLabels = { active: "进行中", completed: "已完成", abandoned: "已废弃" }; + // 默认态静默:active 不挂徽章(列表主体都是 active,重复徽章是纯噪音), + // 终态(completed/abandoned)才着色 + 整行淡化(st-* class),瞬时态交给运行圆点 + const statusLabels = { completed: "已完成", abandoned: "已废弃" }; const html = tasks.map((t) => { const active = state.taskId === t.task_id ? " active" : ""; // 主行 = 任务名(必填字段);副行 = 工作目录 + description(都按需显示) const taskName = t.name || "(未命名)"; const wdName = t.working_dir ? t.working_dir.split("/").filter(Boolean).pop() : ""; const desc = t.description || ""; - const statusLabel = statusLabels[t.status] || t.status; + const statusLabel = statusLabels[t.status] || ""; + // st- 前缀防撞 .task-row.active(选中态)——status 值 "active" 不能直接当 class 用 + const stCls = statusLabel ? ` st-${t.status}` : ""; const rowTitle = `${taskName}\n${t.task_id}`; // hover 出全名 + 完整 id(替代 meta 里被去掉的 id8) // 渠道镜像 task(微信 / 企业微信)不进此列表 —— 后端 /v1/tasks 已排除,改由左栏卡片承载(loadChannelCards) return ` -
+
${escapeHtml(taskName)}
${wdName ? `
📁 ${escapeHtml(wdName)}
` : ""} ${desc ? `
${escapeHtml(desc)}
` : ""}
- ${statusLabel} + ${statusLabel ? `${statusLabel}` : ""} ${runIndicatorHtml(t)} ${t.skill ? `${escapeHtml(t.skill)}` : ""} ${t.n_messages || 0} 条 @@ -468,7 +472,8 @@ function renderChatMeta() { if (!t) { $("chat-meta").innerHTML = `(未选中任务)`; return; } const wdName = t.working_dir ? t.working_dir.split("/").filter(Boolean).pop() : ""; const taskName = t.name || "(未命名)"; - const statusLabel = { active: "进行中", completed: "已完成", abandoned: "已废弃" }[t.status] || t.status; + // 同列表规则:active 静默,终态才挂徽章(它同时解释"输入框为什么消失了") + const statusLabel = { completed: "已完成", abandoned: "已废弃" }[t.status] || ""; // wdName 与 taskName 相同时(留空 fallback,多数场景)不重复显示 📁; // 不同时(用户显式指定共享目录 / 改了 name)才挂 📁,提示"项目归属" const wdBadge = (wdName && wdName !== taskName) @@ -476,7 +481,7 @@ function renderChatMeta() { : ""; $("chat-meta").innerHTML = ` ${escapeHtml(taskName)} - ${statusLabel} + ${statusLabel ? `${statusLabel}` : ""} ${wdBadge} ${t.skill ? `${escapeHtml(t.skill)}` : ""} ${t.task_id.slice(0, 8)}