From 14f654adda74914b281004f4c86687e003084e44 Mon Sep 17 00:00:00 2001 From: Aisland Date: Fri, 21 Aug 2026 02:03:16 +0800 Subject: [PATCH] fix: console area 2x (edge 1.4), comet moving light, darker blueprint grid bg --- 01_content/src/client/styles.ts | 32 +++++++++---------- .../worklogs/2026-08-16_worktable-v2.md | 17 ++++++++++ 04_test/probe-batch16.cjs | 6 ++++ AGENTS.md | 17 ++++++---- 4 files changed, 49 insertions(+), 23 deletions(-) diff --git a/01_content/src/client/styles.ts b/01_content/src/client/styles.ts index 3527311..0a2d5e8 100644 --- a/01_content/src/client/styles.ts +++ b/01_content/src/client/styles.ts @@ -382,48 +382,48 @@ export const css = xtermCss + '\n' + [ '.dsh-wt_subSection{flex:none;padding:6px 8px 2px;font-size:10px;font-weight:600;letter-spacing:.05em;color:var(--dsw-alias-label-tertiary,#6e7683)}', // 控制室面板：项目卡片网格（每行 3 张、超出换行；DSH 简洁 + 苹果式卡片）。 // 主题变量自带作用域：dark 缺省；data-wt-theme=light 换浅色；system 由面板读宿主 color-scheme 落成 dark/light。 - '.dsh-wt_console{--wt-bg:#10141b;--wt-card:#171c25;--wt-cardHover:#1d232e;--wt-border:#2a3140;--wt-borderHover:#39445a;--wt-text:#e6e8eb;--wt-text2:#9aa4b2;--wt-text3:#6e7683;--wt-chip:rgba(255,255,255,.06);--wt-shadow:0 6px 20px rgba(0,0,0,.35);flex:1;min-height:0;overflow:auto;padding:22px;background:var(--wt-bg)}', - '.dsh-wt_console[data-wt-theme=light]{--wt-bg:#f2f4f7;--wt-card:#ffffff;--wt-cardHover:#f7f9fb;--wt-border:#d8dee6;--wt-borderHover:#b9c4d2;--wt-text:#1c2128;--wt-text2:#57606a;--wt-text3:#8b949e;--wt-chip:rgba(27,31,36,.07);--wt-shadow:0 6px 20px rgba(31,41,55,.10)}', + '.dsh-wt_console{--wt-bg:#0a0d13;--wt-card:#171c25;--wt-cardHover:#1d232e;--wt-border:#2a3140;--wt-borderHover:#39445a;--wt-text:#e6e8eb;--wt-text2:#9aa4b2;--wt-text3:#6e7683;--wt-chip:rgba(255,255,255,.06);--wt-grid:rgba(255,255,255,.028);--wt-shadow:0 6px 20px rgba(0,0,0,.35);flex:1;min-height:0;overflow:auto;padding:22px;background-image:linear-gradient(var(--wt-grid) 1px,transparent 1px),linear-gradient(90deg,var(--wt-grid) 1px,transparent 1px);background-size:30px 30px;background-color:var(--wt-bg)}', + '.dsh-wt_console[data-wt-theme=light]{--wt-bg:#eef1f5;--wt-card:#ffffff;--wt-cardHover:#f7f9fb;--wt-border:#d8dee6;--wt-borderHover:#b9c4d2;--wt-grid:rgba(27,31,36,.045);--wt-text:#1c2128;--wt-text2:#57606a;--wt-text3:#8b949e;--wt-chip:rgba(27,31,36,.07);--wt-shadow:0 6px 20px rgba(31,41,55,.10)}', '.dsh-wt_consoleHead{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:12px}', '.dsh-wt_consoleTitle{font-size:14px;font-weight:700;line-height:20px;color:var(--wt-text)}', '.dsh-wt_consoleTheme{display:inline-flex;align-items:center;padding:2px;border:1px solid var(--wt-border);border-radius:999px;background:var(--wt-card)}', '.dsh-wt_consoleThemeBtn{flex:none;padding:3px 9px;border:none;border-radius:999px;background:transparent;color:var(--wt-text3);font:inherit;font-size:12px;line-height:18px;cursor:pointer;opacity:.85}', '.dsh-wt_consoleThemeBtn:hover{opacity:1;background:var(--wt-chip)}', '.dsh-wt_consoleThemeBtnOn{background:var(--wt-chip);color:var(--wt-text);opacity:1}', - '.dsh-wt_consoleGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px;align-content:start;margin-top:clamp(32px,9vh,110px);max-width:640px;margin-left:auto;margin-right:auto}', - '.dsh-wt_consoleCard{position:relative;display:flex;flex-direction:column;gap:10px;aspect-ratio:1/1;min-height:136px;padding:15px;background:var(--wt-card);border:1px solid var(--wt-border);border-radius:12px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;overflow:hidden}', + '.dsh-wt_consoleGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px;align-content:start;margin-top:clamp(32px,9vh,110px);max-width:856px;margin-left:auto;margin-right:auto}', + '.dsh-wt_consoleCard{position:relative;display:flex;flex-direction:column;gap:14px;aspect-ratio:1/1;min-height:192px;padding:21px;background:var(--wt-card);border:1px solid var(--wt-border);border-radius:16px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;overflow:hidden}', '.dsh-wt_consoleCard:hover{transform:translateY(-2px);border-color:var(--wt-borderHover);box-shadow:var(--wt-shadow)}', '.dsh-wt_consoleCardSelf{cursor:default;opacity:.97}', - '.dsh-wt_consoleCardHead{display:flex;align-items:center;gap:10px;min-width:0}', - '.dsh-wt_consoleIcon{flex:none;font-size:22px;line-height:1}', - '.dsh-wt_consoleName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;line-height:21px;color:var(--wt-text)}', + '.dsh-wt_consoleCardHead{display:flex;align-items:center;gap:13px;min-width:0}', + '.dsh-wt_consoleIcon{flex:none;font-size:31px;line-height:1}', + '.dsh-wt_consoleName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:20px;font-weight:700;line-height:28px;color:var(--wt-text)}', '.dsh-wt_consoleDivider{flex:none;height:1px;background:var(--wt-border)}', - '.dsh-wt_consoleDot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--wt-text3)}', + '.dsh-wt_consoleDot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--wt-text3)}', '.dsh-wt_consoleDot-busy{background:var(--dsw-alias-state-accent-primary,#4f8ef7);box-shadow:0 0 0 4px rgba(79,142,247,.16)}', '.dsh-wt_consoleDot-need{background:var(--dsw-alias-state-warning,#d29922);box-shadow:0 0 0 4px rgba(210,153,34,.16)}', '.dsh-wt_consoleDot-done{background:var(--dsw-alias-state-success,#3fb950);box-shadow:0 0 0 4px rgba(63,185,80,.16)}', - '.dsh-wt_consoleStatusRow{display:flex;align-items:baseline;gap:7px;min-width:0}', - '.dsh-wt_consoleStatus{flex:none;font-size:16px;font-weight:700;line-height:22px;color:var(--wt-text2)}', + '.dsh-wt_consoleStatusRow{display:flex;align-items:baseline;gap:9px;min-width:0}', + '.dsh-wt_consoleStatus{flex:none;font-size:22px;font-weight:700;line-height:30px;color:var(--wt-text2)}', '.dsh-wt_consoleStatus-busy{color:var(--dsw-alias-state-accent-primary,#4f8ef7)}', '.dsh-wt_consoleStatus-need{color:var(--dsw-alias-state-warning,#d29922)}', '.dsh-wt_consoleStatus-done{color:var(--dsw-alias-state-success,#3fb950)}', - '.dsh-wt_consoleRuntime{flex:none;font-size:12px;font-weight:600;line-height:19px;color:var(--wt-text2);font-variant-numeric:tabular-nums}', - '.dsh-wt_consolePreview{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:10px;line-height:14px;color:var(--wt-text2);word-break:break-word}', + '.dsh-wt_consoleRuntime{flex:none;font-size:17px;font-weight:600;line-height:24px;color:var(--wt-text2);font-variant-numeric:tabular-nums}', + '.dsh-wt_consolePreview{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:20px;color:var(--wt-text2);word-break:break-word}', '.dsh-wt_consolePreviewNone{color:var(--wt-text3);font-style:italic;-webkit-line-clamp:1}', // 三色光效：整卡霓虹描边光晕（像侧栏双圆点的发光质感）——完成=绿、待决=黄；工作=蓝色描边顺时针旋转 '.dsh-wt_consoleCard-glowDone{border-color:rgba(63,185,80,.9);box-shadow:0 0 8px rgba(63,185,80,.5),0 0 26px rgba(63,185,80,.3),inset 0 0 16px rgba(63,185,80,.07)}', '.dsh-wt_consoleCard-glowNeed{border-color:rgba(210,153,34,.95);box-shadow:0 0 8px rgba(210,153,34,.5),0 0 26px rgba(210,153,34,.3),inset 0 0 16px rgba(210,153,34,.08)}', '@property --consoleAngle{syntax:"";initial-value:0deg;inherits:false}', '.dsh-wt_consoleCard-busy{box-shadow:0 0 10px rgba(94,160,255,.55),0 0 34px rgba(79,142,247,.4)}', - '.dsh-wt_consoleCard-busy::before{content:"";position:absolute;inset:-3px;border-radius:14px;padding:3px;background:conic-gradient(from var(--consoleAngle),transparent 0deg,rgba(94,160,255,0) 15deg,#8fc0ff 85deg,rgba(94,160,255,0) 155deg,transparent 200deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:consoleAngleSpin 1.4s linear infinite;pointer-events:none}', + '.dsh-wt_consoleCard-busy::before{content:"";position:absolute;inset:-4px;border-radius:19px;padding:4px;background:conic-gradient(from var(--consoleAngle),transparent 0deg,rgba(94,160,255,0) 25deg,#dcebff 55deg,#9cc6ff 85deg,rgba(94,160,255,0) 125deg,transparent 200deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:consoleAngleSpin 1.4s linear infinite;filter:drop-shadow(0 0 8px rgba(140,190,255,.85));pointer-events:none}', '@keyframes consoleAngleSpin{to{--consoleAngle:360deg}}', '.dsh-wt_consoleEmpty{padding:40px 0;text-align:center;font-size:12px;color:var(--wt-text3)}', // 创建卡片：虚线 + 居中加号，永远最后一位 - '.dsh-wt_consoleAdd{justify-content:center;align-items:center;gap:8px;background:transparent;border:1.5px dashed var(--wt-borderHover)}', + '.dsh-wt_consoleAdd{justify-content:center;align-items:center;gap:10px;background:transparent;border:1.5px dashed var(--wt-borderHover)}', '.dsh-wt_consoleAdd:hover{border-color:var(--dsw-alias-state-accent-primary,#4f8ef7);background:var(--wt-chip)}', - '.dsh-wt_consoleAddPlus{font-size:24px;line-height:1;color:var(--wt-text2);font-weight:400}', + '.dsh-wt_consoleAddPlus{font-size:34px;line-height:1;color:var(--wt-text2);font-weight:400}', '.dsh-wt_consoleAdd:hover .dsh-wt_consoleAddPlus{color:var(--dsw-alias-state-accent-primary,#4f8ef7)}', - '.dsh-wt_consoleAddLabel{font-size:13px;font-weight:600;color:var(--wt-text2)}', + '.dsh-wt_consoleAddLabel{font-size:17px;font-weight:600;color:var(--wt-text2)}', '.dsh-wt_consoleAdd:hover .dsh-wt_consoleAddLabel{color:var(--dsw-alias-state-accent-primary,#4f8ef7)}', // 控制室入口卡：统筹主程序的差异化（渐变底 + 微光；无描边，颜色更亮更饱和） '.dsh-wt_projects .dsh-wt_consoleEntry{background:linear-gradient(135deg,rgba(109,164,255,.30),rgba(167,130,255,.22));border-color:transparent;box-shadow:0 0 14px rgba(96,150,255,.22)}', diff --git a/02_process/worklogs/2026-08-16_worktable-v2.md b/02_process/worklogs/2026-08-16_worktable-v2.md index 058a4ed..005cf17 100644 --- a/02_process/worklogs/2026-08-16_worktable-v2.md +++ b/02_process/worklogs/2026-08-16_worktable-v2.md @@ -1267,3 +1267,20 @@ busyShadow 双层外发光（10px .55 + 34px .4）+ 新配色 ✓、dividerH=4 ✓；全流程 + 主题 + 自愈 ✓；functional-diag 全 20 STEP ERROR_COUNT: 0。 - 备注：纯客户端改动，F5 即生效。 + +## 补记（控制室第五轮：面积×2（边长 1.4）+ 移动光点更亮 + 深色井字格背景） + +- 用户反馈：① 上一版把「边长 0.8」当成了比例（面积≈0.64，看着像 1/4）——改为面积 + ×2、边长 ×1.4（卡片 236px）；② 旋转的移动光点本身不明显（不只光晕要明显）； + ③ 背景整体更深色 + 很浅的井字格（像工作台/蓝图，格子 ≈ 两个字宽）。 +- 实现：① 网格 max-width 856px、卡片 min-height 192/padding 21/圆角 16，字号同步 + ×1.4（名字 20/状态 22/时长 17/预览 14/图标 31/加号 34）；② busy 光弧改成彗星式： + 环加厚 inset -4/padding 4、高亮段 #dcebff→#9cc6ff（近白色光点）、加上 + filter drop-shadow(0 0 8px rgba(140,190,255,.85)) 让移动光点自带辉光； + ③ 背景 --wt-bg 深到 #0a0d13 + 两条 linear-gradient 画 30px 井字格线 + （--wt-grid 很浅：暗色 .028 / 浅色 .045），background-size 30px 30px。 +- 验证（probe-batch16 更新）：cardWidth 236 / gridMaxW 856 ✓、nameFont 20 / + statusFont 22 / previewFont 14 ✓、consoleBgColor rgb(10,13,19) + 井字格 + backgroundImage + 30px 格子 ✓、busyFilter drop-shadow 辉光 ✓、真实 busy 会话旋转 + 生效 ✓；全流程 + 主题 + 自愈 ✓；functional-diag 全 20 STEP ERROR_COUNT: 0。 +- 备注：纯客户端改动，F5 即生效。 diff --git a/04_test/probe-batch16.cjs b/04_test/probe-batch16.cjs index 64070ac..ad3c372 100644 --- a/04_test/probe-batch16.cjs +++ b/04_test/probe-batch16.cjs @@ -135,6 +135,11 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); out.gridCols = getComputedStyle(grid).gridTemplateColumns.split(' ').length; out.gridGap = getComputedStyle(grid).columnGap; out.gridMarginTop = getComputedStyle(grid).marginTop; + out.gridMaxW = getComputedStyle(grid).maxWidth; + var conEl = vis('.dsh-wt_console'); + out.consoleBgImage = conEl ? getComputedStyle(conEl).backgroundImage.slice(0, 60) : null; + out.consoleBgSize = conEl ? getComputedStyle(conEl).backgroundSize : null; + out.consoleBgColor = conEl ? getComputedStyle(conEl).backgroundColor : null; var cards = grid.querySelectorAll('.dsh-wt_consoleCard'); out.cardCount = cards.length; var c0 = cards[0]; @@ -172,6 +177,7 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); out.busyBgImage = bs.backgroundImage ? bs.backgroundImage.slice(0, 60) : null; out.busyAnim = bs.animationName; out.busyShadow = getComputedStyle(cardEl).boxShadow.slice(0, 90); + out.busyFilter = bs.filter ? bs.filter.slice(0, 60) : null; cardEl.classList.remove('dsh-wt_consoleCard-busy'); cardEl.classList.add('dsh-wt_consoleCard-glowDone'); await sleep(300); diff --git a/AGENTS.md b/AGENTS.md index 1d0252c..adc83b0 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -94,18 +94,21 @@ node --check lib/index.js prefers-color-scheme 兜底；落成 .dsh-wt_console[data-wt-theme=dark|light] 作用域变量 --wt-*（宿主不发布 --dsw-alias-*，工作台全站一直靠回退色渲染——控制室自带主题作用域， 不受其影响）。 - - 状态光效（整卡霓虹描边，参考侧栏双圆点发光质感）：工作=蓝色描边光晕顺时针绕卡旋转 + - 状态光效（整卡霓虹描边，参考侧栏双圆点发光质感）：工作=蓝色彗星式光点顺时针绕卡旋转 （.dsh-wt_consoleCard-busy ::before conic-gradient + @property --consoleAngle + - consoleAngleSpin；环 inset -3/padding 3、峰值 #8fc0ff、外发光双层 10px+34px）；完成=绿光、 - 待决=黄光（-glowDone/-glowNeed：亮色描边 + 双层外发光 + 微弱内辉光；glow 字段 = done/need - 且本轮未 ack，点卡片先 onAck 熄光再进入，与提醒 ack 生命周期一致）。 + consoleAngleSpin；环 inset -4/padding 4、高亮段 #dcebff→#9cc6ff、filter drop-shadow + rgba(140,190,255,.85) 光点自带辉光、外发光双层 10px+34px）；完成=绿光、待决=黄光 + （-glowDone/-glowNeed：亮色描边 + 双层外发光 + 微弱内辉光；glow 字段 = done/need 且 + 本轮未 ack，点卡片先 onAck 熄光再进入，与提醒 ack 生命周期一致）。 - 命名：侧栏区块标题 = 「工作台」（title locale，整个插件）；默认项目卡名与面板标题 = 「控制室」（console.name/console.title locale，工作台的控制室）。 - 控制室标签不可关：PaneBody 对 content.type==='console' 的标签 locked（不渲染 ✕、 禁拖拽）——关掉会退化成窗格选择器，不可逆。 - - 布局尺度：网格 gap 64px（4 倍间距）不变、max-width 640px 左右居中（卡片 80%，实测 - 171px 1:1：名字 14/状态 16/预览 10 四行截断）；标题下横向分隔线；无子代理徽章、无 - 💬 跳转按钮；网格最后一位恒为「创建卡片」（虚线＋）→ openAddPanel；入口卡无描边。 + - 布局尺度：网格 gap 64px（4 倍间距）不变、max-width 856px 左右居中；卡片 1:1（面积 + 2×边长 1.4，实测 236px：名字 20/状态 22/预览 14 四行截断）；标题下横向分隔线；无子代理 + 徽章、无 💬 跳转按钮；网格最后一位恒为「创建卡片」（虚线＋）→ openAddPanel；入口卡无描边。 + - 背景：--wt-bg 深色 #0a0d13 + 30px 浅色井字格线（--wt-grid .028/.045，两条 + linear-gradient），工作台/蓝图质感。 - 顶部标题克制：控制室页只保留侧栏入口卡一个「控制室」——分栏标题栏对 wt-console 不渲染 title（保留 ⇄/✕）、PaneBody singleConsole 不渲染标签栏、ConsolePane 头只留 主题开关（右对齐）。