fix: move sweep shimmer to busy cards only, remove panel-wide sweep
This commit is contained in:
@@ -1060,6 +1060,7 @@ function ConsolePane() {
|
|||||||
<span className={'dsh-wt_consoleStatus dsh-wt_consoleStatus-' + c.status}>{statusLabel[c.status]}</span>
|
<span className={'dsh-wt_consoleStatus dsh-wt_consoleStatus-' + c.status}>{statusLabel[c.status]}</span>
|
||||||
{c.runtimeMs != null && <span className="dsh-wt_consoleRuntime">{fmtDur(c.runtimeMs)}</span>}
|
{c.runtimeMs != null && <span className="dsh-wt_consoleRuntime">{fmtDur(c.runtimeMs)}</span>}
|
||||||
</div>
|
</div>
|
||||||
|
{c.status === 'busy' && <span className="dsh-wt_consoleSweep" aria-hidden />}
|
||||||
<div className={'dsh-wt_consolePreview' + (c.preview ? '' : ' dsh-wt_consolePreviewNone')} title={c.preview}>
|
<div className={'dsh-wt_consolePreview' + (c.preview ? '' : ' dsh-wt_consolePreviewNone')} title={c.preview}>
|
||||||
{c.preview || (c.bound ? T('console.noPreview') : T('console.unboundShort'))}
|
{c.preview || (c.bound ? T('console.noPreview') : T('console.unboundShort'))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -383,9 +383,9 @@ export const css = xtermCss + '\n' + [
|
|||||||
// 控制室面板:项目卡片网格(每行 3 张、超出换行;DSH 简洁 + 苹果式卡片)。
|
// 控制室面板:项目卡片网格(每行 3 张、超出换行;DSH 简洁 + 苹果式卡片)。
|
||||||
// 主题变量自带作用域:dark 缺省;data-wt-theme=light 换浅色;system 由面板读宿主 color-scheme 落成 dark/light。
|
// 主题变量自带作用域:dark 缺省;data-wt-theme=light 换浅色;system 由面板读宿主 color-scheme 落成 dark/light。
|
||||||
'.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,.045);--wt-shadow:0 6px 20px rgba(0,0,0,.35);position:relative;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{--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,.045);--wt-shadow:0 6px 20px rgba(0,0,0,.35);position:relative;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)}',
|
||||||
// 面板镜面流光:克制的一条玻璃反光带,每 ~3.2s 从左上方斜扫到右下(纯装饰,点击穿透)
|
// 工作中的卡片流光:镜面反光带每 ~3.2s 从左上斜扫到右下(仅 busy 卡片渲染该层)
|
||||||
'.dsh-wt_console::before{content:"";position:absolute;inset:-10% -20%;pointer-events:none;z-index:2;background:linear-gradient(115deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.07) 50%,rgba(255,255,255,0) 58%);opacity:0;animation:consoleSweep 3.2s ease-in-out infinite}',
|
'.dsh-wt_consoleSweep{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.10) 50%,rgba(255,255,255,0) 62%);opacity:0;animation:consoleSweep 3.2s ease-in-out infinite}',
|
||||||
'.dsh-wt_console[data-wt-theme=light]::before{background:linear-gradient(115deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 58%)}',
|
'.dsh-wt_console[data-wt-theme=light] .dsh-wt_consoleSweep{background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 62%)}',
|
||||||
'@keyframes consoleSweep{0%{opacity:0;transform:translate(-12%,-12%)}35%{opacity:1}55%{opacity:1}92%,100%{opacity:0;transform:translate(12%,12%)}}',
|
'@keyframes consoleSweep{0%{opacity:0;transform:translate(-12%,-12%)}35%{opacity:1}55%{opacity:1}92%,100%{opacity:0;transform:translate(12%,12%)}}',
|
||||||
'.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,.07);--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[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,.07);--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_consoleHead{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:12px}',
|
||||||
|
|||||||
@@ -1393,3 +1393,13 @@
|
|||||||
- 验证(probe-batch16):sweepAnim consoleSweep / sweepContent ✓ / sweepDur 3.2s ✓;
|
- 验证(probe-batch16):sweepAnim consoleSweep / sweepContent ✓ / sweepDur 3.2s ✓;
|
||||||
functional-diag 全 20 STEP ERROR_COUNT: 0。
|
functional-diag 全 20 STEP ERROR_COUNT: 0。
|
||||||
- 备注:纯客户端改动,F5 即生效;本地 ahead 4 待补推。
|
- 备注:纯客户端改动,F5 即生效;本地 ahead 4 待补推。
|
||||||
|
|
||||||
|
## 补记(控制室第十四轮:流光移到「工作中」卡片)
|
||||||
|
|
||||||
|
- 用户澄清:流光不是整个面板,而是正在处理中的任务卡片才有光晕;其他状态无光晕。
|
||||||
|
- 实现:删掉 .dsh-wt_console::before 面板级流光;新增 .dsh-wt_consoleSweep 层(absolute
|
||||||
|
inset 0、115° 反光带、consoleSweep 3.2s 动画),ConsolePane 仅在 status==='busy'
|
||||||
|
时渲染该 span;浅色主题对应白 55% 光带。
|
||||||
|
- 验证(probe-batch16):panelSweepGone(面板 ::before content none)✓、sweepRuleFound
|
||||||
|
(样式表含 .dsh-wt_consoleSweep)✓;functional-diag 全 20 STEP ERROR_COUNT: 0。
|
||||||
|
- 备注:纯客户端改动,F5 即生效;本地 ahead 5 待补推。
|
||||||
|
|||||||
@@ -140,10 +140,17 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
|||||||
out.consoleBgImage = conEl ? getComputedStyle(conEl).backgroundImage.slice(0, 60) : null;
|
out.consoleBgImage = conEl ? getComputedStyle(conEl).backgroundImage.slice(0, 60) : null;
|
||||||
out.consoleBgSize = conEl ? getComputedStyle(conEl).backgroundSize : null;
|
out.consoleBgSize = conEl ? getComputedStyle(conEl).backgroundSize : null;
|
||||||
out.consoleBgColor = conEl ? getComputedStyle(conEl).backgroundColor : null;
|
out.consoleBgColor = conEl ? getComputedStyle(conEl).backgroundColor : null;
|
||||||
var sweep = conEl ? getComputedStyle(conEl, '::before') : null;
|
out.panelSweepGone = !!(conEl && getComputedStyle(conEl, '::before').content === 'none');
|
||||||
out.sweepAnim = sweep ? sweep.animationName : null;
|
var sweepRuleFound = false;
|
||||||
out.sweepContent = sweep ? (sweep.content !== 'none') : null;
|
try {
|
||||||
out.sweepDur = sweep ? sweep.animationDuration : null;
|
for (var si = 0; si < document.styleSheets.length && !sweepRuleFound; si++) {
|
||||||
|
var rules; try { rules = document.styleSheets[si].cssRules; } catch (e) { continue; }
|
||||||
|
for (var ri = 0; ri < rules.length; ri++) {
|
||||||
|
if (rules[ri].cssText && rules[ri].cssText.indexOf('.dsh-wt_consoleSweep') >= 0) { sweepRuleFound = true; break; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
out.sweepRuleFound = sweepRuleFound;
|
||||||
var cards = grid.querySelectorAll('.dsh-wt_consoleCard');
|
var cards = grid.querySelectorAll('.dsh-wt_consoleCard');
|
||||||
out.cardCount = cards.length;
|
out.cardCount = cards.length;
|
||||||
var c0 = cards[0];
|
var c0 = cards[0];
|
||||||
|
|||||||
Reference in New Issue
Block a user