xiaoski/PicoBot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(webui): activity spine bright in both themes and CSP-safe dots

Browse Source
This commit is contained in:
xiaoxixi 2026-07-24 11:06:25 +08:00
parent 54ad4617c7
commit 719f586900
2 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
webui/src/lib/components/ActivitySpine.svelte
View File

@ -26,14 +26,14 @@
<div class="spine mono"> <div class="spine mono">
{#if running} {#if running}
<span class="spine-turn active"><i class="pulse-dot" style="background:var(--accent);box-shadow:0 0 10px var(--accent)"></i>{turnLabel} · STREAMING</span> <span class="spine-turn active"><i class="pulse-dot active"></i>{turnLabel} · STREAMING</span>
{#if rate != null}<span class="spine-rate">▲ {rate} tok/s</span>{/if} {#if rate != null}<span class="spine-rate">▲ {rate} tok/s</span>{/if}
{#if ctx}<span>ctx {ctx}</span>{/if} {#if ctx}<span>ctx {ctx}</span>{/if}
{:else if chat.turn} {:else if chat.turn}
<span class="spine-turn idle"><i class="pulse-dot" style="background:var(--signal);animation:none"></i>IDLE</span> <span class="spine-turn idle"><i class="pulse-dot idle"></i>IDLE</span>
<span>最近 {turnLabel}</span> <span>最近 {turnLabel}</span>
{:else} {:else}
<span class="spine-turn idle"><i class="pulse-dot" style="background:var(--signal);animation:none"></i>READY</span> <span class="spine-turn idle"><i class="pulse-dot idle"></i>READY</span>
{/if} {/if}
<span class="spine-right"> <span class="spine-right">
<span class:spine-ok={chat.connected} class:spine-down={!chat.connected}>{chat.connected ? "已连接" : "重连中"}</span> <span class:spine-ok={chat.connected} class:spine-down={!chat.connected}>{chat.connected ? "已连接" : "重连中"}</span>
@ -42,13 +42,13 @@
</div> </div>
<style> <style>
.spine { display: flex; align-items: center; gap: 14px; font-size: 10.5px; color: var(--muted); .spine { display: flex; align-items: center; gap: 14px; font-size: 10.5px; color: var(--spine-text);
background: var(--spine-bg); border-bottom: 1px solid var(--line); padding: 8px 16px; } background: var(--spine-bg); border-bottom: 1px solid var(--line); padding: 8px 16px; }
.spine-turn { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; } .spine-turn { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.spine-turn.active { color: var(--accent); } .spine-turn.active { color: var(--spine-accent); }
.spine-turn.idle { color: var(--signal); } .spine-turn.idle { color: var(--spine-signal); }
.spine-rate { color: var(--signal); } .spine-rate { color: var(--spine-signal); }
.spine-right { margin-left: auto; display: inline-flex; gap: 14px; color: var(--faint); } .spine-right { margin-left: auto; display: inline-flex; gap: 14px; color: var(--spine-faint); }
.spine-ok { color: var(--signal); } .spine-ok { color: var(--spine-signal); }
.spine-down { color: var(--warning); } .spine-down { color: var(--spine-accent); }
</style> </style>

6
webui/src/styles.css
View File

@ -59,6 +59,10 @@
--code-bg: #080c12; --code-bg: #080c12;
--user-bubble: #221d38; --user-bubble: #221d38;
--spine-bg: #0e1520; --spine-bg: #0e1520;
--spine-text: #b8c4d4;
--spine-signal: #2dd4bf;
--spine-accent: #ffb454;
--spine-faint: #8fa3b8;
--shadow: 0 16px 45px rgb(0 0 0 / 35%); --shadow: 0 16px 45px rgb(0 0 0 / 35%);
--radius: 11px; --radius: 11px;
} }
@ -353,6 +357,8 @@ code { color: var(--accent); }
.cap.info { color: var(--info); background: var(--info-soft); border: 1px solid var(--info-border); } .cap.info { color: var(--info); background: var(--info-soft); border: 1px solid var(--info-border); }
@keyframes spine-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } @keyframes spine-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; animation: spine-pulse 1.6s ease-in-out infinite; } .pulse-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; animation: spine-pulse 1.6s ease-in-out infinite; }
.pulse-dot.active { background: var(--spine-accent); box-shadow: 0 0 10px var(--spine-accent); }
.pulse-dot.idle { background: var(--spine-signal); animation: none; }
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } } @media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }
@media (max-width: 800px) { @media (max-width: 800px) {