From 716a8f6d16b45a7fa9c9904a9ee0975d2a55c0c7 Mon Sep 17 00:00:00 2001 From: Jack Date: Mon, 19 Oct 2026 14:01:07 +0800 Subject: [PATCH] add the neon tube sheen and quiet down the login page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Port the sweeping highlight from the prototype: a 38%-wide white band travels left to right on a 3.4s loop, idle for the first 62% so it reads as an occasional flare rather than a constant shimmer. The tube mixes now clip overflow so the band stays inside the button, and the loading state suppresses it in favour of the existing pulse. Drop the masked grid and scanline from the login page — low-contrast texture behind a credential form makes the text harder to read. Only the IsometricWave remains. Brighten input text to near-white and bump it to 14.5px; Arco's default --color-text-1 sits too dark on the recessed input fill. Avoid -webkit-text-fill-color, which would defeat the password field's masking. --- packages/client/src/styles/global.scss | 32 +++++++++++++++ packages/client/src/views/LoginView.vue | 54 +++++++++---------------- 2 files changed, 50 insertions(+), 36 deletions(-) diff --git a/packages/client/src/styles/global.scss b/packages/client/src/styles/global.scss index cdf6613..1c4003f 100644 --- a/packages/client/src/styles/global.scss +++ b/packages/client/src/styles/global.scss @@ -159,6 +159,8 @@ $neon-hv: var(--accent-hover); // 镂空管壁 + 双层外发光（内紧外散） @mixin neon-tube($glow: 0.32, $wall: 1px) { + position: relative; + overflow: hidden; color: $neon; background: transparent; border: $wall solid rgba(var(--accent-primary-rgb), 0.55); @@ -169,6 +171,31 @@ $neon-hv: var(--accent-hover); text-shadow: 0 0 8px rgba(var(--accent-primary-rgb), 0.45); } +// 扫光：一道白光从左扫到右。周期大部分时间停在暗处，只在 62%→86% 之间走一趟， +// 避免常驻动画造成视觉噪音。 +@keyframes neon-sheen { + 0%, 62% { transform: translateX(-140%); } + 86%, 100% { transform: translateX(320%); } +} + +@mixin neon-sheen() { + &::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 38%; + background: linear-gradient(90deg, + transparent, + oklch(1 0 0 / 0.28), + transparent); + transform: translateX(-140%); + animation: neon-sheen 3.4s ease-in-out infinite; + pointer-events: none; + } +} + // Arco 为按钮写了 `.arco-btn-primary[type='button']` / `[type='submit']` / `[type='reset']` // 三个属性选择器变体，把特异性从 (0,1,0) 抬到 (0,2,0)；它的 hover 变体则是 // `.arco-btn-primary[type='submit']:hover` → (0,3,0)。所以下面每条规则都用 @@ -211,6 +238,7 @@ $neon-hv: var(--accent-hover); .arco-btn.arco-btn-primary[type='submit'], .arco-btn.arco-btn-primary[type='reset'] { @include neon-tube(0.34); + @include neon-sheen; font-weight: 600; &:not(.arco-btn-disabled):hover { @@ -238,6 +266,8 @@ $neon-hv: var(--accent-hover); // 危险操作：同构的霓虹管，颜色换成红 @mixin neon-tube-danger($glow: 0.28) { + position: relative; + overflow: hidden; color: $error; background: transparent; border: 1px solid rgba(var(--error-rgb), 0.5); @@ -325,6 +355,8 @@ $neon-hv: var(--accent-hover); .arco-btn.arco-btn-primary[type='button'].arco-btn-loading, .arco-btn.arco-btn-primary[type='submit'].arco-btn-loading { @include neon-tube(0.4); + // 提交中扫光暂停，用脉冲表示"通电中"，避免两个动画叠加 + &::after { animation: none; opacity: 0; } animation: neon-pulse 1.1s ease-in-out infinite; } diff --git a/packages/client/src/views/LoginView.vue b/packages/client/src/views/LoginView.vue index a357439..5188c81 100644 --- a/packages/client/src/views/LoginView.vue +++ b/packages/client/src/views/LoginView.vue @@ -86,10 +86,8 @@ function fillDefaultCredentials() {