mirror of
https://github.com/wwiinnddyy/LanMountainDesktop.git
synced 2026-06-20 15:44:25 +08:00
7a70476ce8
* Add Windows system chrome patchers (Harmony) Introduce support for toggling the system chrome on Windows using Harmony patchers. Adds Lib.Harmony.Thin to package props and project, new patcher infrastructure (ChromePatchState, PatcherEntrance) and two Harmony patches that disable FluentAvalonia's Windows chrome when configured. Program.cs now loads the chrome setting and installs patchers conditionally on Windows/x86-x64. Settings viewmodel and view updated: expose IsWindowsOs, require restart on appearance changes, migrate SettingsWindow to FAAppWindow and adapt titlebar/layout (include Windows caption placeholder and footer menu items). Also add a .gitkeep and a build log file. * Refactor settings window UI and theming Improve theming and layout for the Settings window and related services. - MaterialSurfaceService: add special material parameters for SettingsWindowBackground (lower alpha, no blur) and avoid hot-switching real backdrops for non-settings windows. - GlassEffectService: add AdaptiveSettingsWindowTintBrush + ResolveSettingsWindowTintAlpha to provide optional content tinting tied to system material mode. - SettingsWindowService: refactor theme application into ApplyThemeVariantAndResources, ensure settings window material is applied at show/activate times, and tidy theme/resource application flow. - SettingsWindow.axaml / .axaml.cs: restructure title bar (separate Grid.Row=0 border) and FANavigationView host, add pane-footer toggle button for :minimal layout, use dynamic corner radius resource, and update toggle/visibility/icon logic and responsive layout code. - SettingsPages: remove some IconText usages and adjust margins; use DesignCornerRadiusLg for update card corner radius. - Add NuGet.Config to set local globalPackagesFolder and ignore .nuget/packages in .gitignore. These changes aim to improve visuals, avoid backdrop overdraw, and make the settings window behavior consistent across themes and layouts. * Add localization and localize settings pages Add many new localization keys (en-US and zh-CN) for notifications, developer tools, about page, status bar, and video wallpaper. Update Notification, Dev, About and StatusBar view models to use LocalizationService, expose localized ObservableProperties, and refresh localized text at construction. Localize selection options and test notification texts, and fix notification severity handling. Wire up XAML to the new localized properties (About/Dev/StatusBar pages) and update the settings page title for notifications. Also adjust copyright line generation and replace hardcoded placeholders with bound Watermark properties. * Redesign settings window with fluent shell & search Rebuild the settings window as a Fluent shell: adds a custom 48-DIP titlebar with Back, pane toggle, icon/title, search box, restart/more menu, and caption-button spacer; moves compact pane toggle into the titlebar and preserves FANavigationView as the primary navigation surface. Introduces a SettingsSearchService (with UI AutoComplete integration, search indexing, navigation-by-result, and search result highlighting) plus focused tests for search filtering and theme material normalization. Adds navigation history/back stack, updates SettingsViewModels for new bindings and localization keys, and updates General/Apearance pages to expose new strings and options. Implements an "auto" system material mode: default in AppSettingsSnapshot, new MaterialAuto constants and normalization/resolution logic in ThemeAppearanceValues, WindowMaterialService and MaterialSurfaceService adjustments to prefer Mica on Win11 and Acrylic on Win10 using TransparencyLevelHint. GlassEffectService and AppearanceThemeService updated to use effective material mode and to track live theme state changes. Adds localization entries (en-US, zh-CN), spec/tasks docs, and other UI/style tweaks to support the redesign. * fix.修折叠与展开按钮 * Add OOBE startup presentation and settings merge Introduce a new OOBE step for "Startup & Presentation" that exposes startup and UI preferences in OobeWindow (toggles for taskbar, slide/fade transitions, fused popup, and autostart). Add HostAppSettingsOobeMerger to read/write Host settings.json (PascalCase fields) and MergeStartupPresentation behavior, plus LauncherWindowsStartupService to sync the current Launcher into the Windows Run key on Windows. Wire UI handlers, persist choices on Next, and load defaults when entering the step. Include unit tests for the merger, adjust SettingsWindow navigation pane/toggle handling, and update docs/LAUNCHER.md to describe the new OOBE step and implementation files. * Move whiteboard persistence to file storage Switch whiteboard note storage from legacy DB rows to per-note JSON files and add migration support. Update WhiteboardNoteSnapshot schema (version bump, viewport, canvas, expires, PathSvgData) and change IWhiteboardNotePersistenceService.SaveNote to return bool to surface write failures (e.g. read-only files). Implement file-based WhiteboardNotePersistenceService with legacy DB migration/cleanup, retention handling, and logging. Add comprehensive unit tests for persistence, stroke path builder, SVG import and viewport helper. Also add ThirdParty/DotNetCampus.InkCanvas project and reference it in the main csproj, and bump PostHog package to 2.6.0. * Introduce render gate and chart caching Replace UI DispatcherTimer polling with a StudySnapshotRenderGate across multiple widgets to queue and apply only the latest analytics snapshot; components updated include StudyDeductionReasonsWidget, StudyEnvironmentWidget, StudyInterruptDensityWidget, StudyNoiseCurveWidget. Add StudySnapshotRenderGate implementation to coordinate rendering and monitoring leases and update subscription/lease lifecycle handling (subscribe/unsubscribe, Acquire/Dispose leases, Clear/Dispose gate). Rewrite chart controls (StudyNoiseCurveChartControl and StudyNoiseDistributionScatterChartControl) to use stable logical-time origins, split series into static vs dynamic tails, add geometry/sample caching, stable jitter/coordinate mapping helpers, and expose internal helpers & counts for testing. Add unit tests (StudyComponentRenderingTests) covering the render gate and chart behaviors (layer counts, logical X mapping, stable jitter, cache rebuild). These changes improve rendering correctness and performance by avoiding redundant renders and enabling deterministic chart layout. * Use MaterialColorSnapshot in appearance flow Introduce unified material/color spec and tests, and refactor appearance plumbing to use MaterialColorSnapshot as the single source of truth. Add .trae material-color-service spec/checklist/tasks and integration/unit tests for plugin mapping and appearance VM behavior. AppearanceChangedEvent extended with new appearance change flags and HasChanged logic. ComponentEditorMaterialThemeAdapter rewritten to accept MaterialColorSnapshot and derive palette from snapshot data. Simplify AppearanceSettingsPageViewModel and related view code: remove legacy preview/custom-seed UI logic, preserve material/color fields when updating theme or corner radius, and update save calls to use with-expressions. Update ComponentEditorWindow to use adapter-provided OnPrimary brush and minor docs updates. * Add material color services, plugin DTOs, and tests Introduce IPC wire-format appearance DTOs (PluginIsolation.Contracts) and clarify they are distinct from the runtime PluginSdk snapshot. Update PluginSdk comments to document the runtime-facing snapshot shape. Change ComponentColorSchemeHelper to use the HostMaterialColorProvider and add an overload that accepts a MaterialColorSnapshot. Add new services and pipelines (MaterialColorService, MaterialSurfaceService, WindowMaterialService, WallpaperColorPipeline) and refactor AppearanceThemeService to depend on MaterialColorService while removing legacy internal implementations. Add multiple unit tests (ComponentColorSchemeHelper, PluginAppearanceBoundary, SettingsCatalogService, WallpaperSettingsPageViewModel) and update localization resources with new material_color and wallpaper keys. * Add CODE_WIKI and update localization Add a comprehensive CODE_WIKI.md documenting project architecture, modules, startup flow, plugin system, testing and developer workflows. Update localization resources (en-US.json, zh-CN.json) with new/translated keys for wallpaper controls (custom color UI), material & color settings (semantic roles, surfaces, refresh/polling state), appearance (corner radius), status bar font size options, privacy policy text, component library labels, clock settings, and new language entry (Korean). Also modify settings-related ViewModels and Settings page views to surface these new features and texts (MaterialColorSettingsPageViewModel.cs, SettingsViewModels.cs, WallpaperSettingsPageViewModel.cs, MainWindow.SettingsHardCut.Stubs.cs, ComponentsSettingsPage.axaml, WallpaperSettingsPage.axaml). * Add Data settings page and storage scanner Introduce a new "Data" settings page to visualize and manage local app storage. Adds DataStorageService (scanning, disk info, clean operations), DataSettingsPageViewModel, XAML view and code-behind, and HexToColor/HexToBrush converters; registers converters in App.axaml. Also update localization strings for the new page and add icon mapping so the settings entry uses the Database icon. Enables per-category and global cleaning workflows and formatted size display. * Add IPC backoff/retries and safer disposal Introduce exponential backoff, jitter and retry logic across IPC components to improve robustness and avoid tight retry loops; make disposal idempotent and add connection guards. Key changes: - LauncherCoordinatorIpcServer / LauncherIpcServer: add backoff constants, ComputeBackoff(), consecutive error tracking and delayed retries with jitter. - LanMountainDesktopIpcClient / LauncherIpcClient: add connect retry loops, timeouts, delayed retries, improved error logging, and use ArrayPool for buffered async writes; ensure proper cleanup on failures. - PublicIpcHostService: add disposed flag, guard OnPeerConnected and Dispose, and clear connected peers on dispose. - Add many auto-generated commit analysis docs under docs/auto_commit_md and new scripts for analyzing/generating commit docs. These changes aim to make IPC connection handling more resilient and resource-safe. * Add preview controls and settings UI tweaks Introduce GridPreviewControl and CornerRadiusPreviewControl for visual previews and wire them into the Components settings (add ScreenAspectRatio, CornerRadiusPreviewValue, and screen aspect init). Refactor ComponentsSettingsPage UI to show live previews. Improve DataSettingsPage layout and storage bar logic (use item percentages directly, include remaining segment, adjust visuals and visibility triggers). Simplify LauncherSettingsPage header/appearance layout. Add SECURITY_AUDIT_REPORT.md, analysis summary, mockup HTML, and a local .claude settings file. * Add install checkpoint/resume and DDSS workflows Introduce install checkpoint support and resume logic for updates, plus related locking and validation. Adds InstallCheckpoint model, AppJsonContext serialization, and UpdatePaths helpers for deployment lock, apply-in-progress lock and install-checkpoint path. UpdateEngineService gains checkpoint load/save/delete, incoming-state validation, resume logic for PLONDS and legacy updates, apply lock handling, and safer cleanup; ApplyPendingPlondsUpdateAsync and ApplyPendingUpdate flow updated accordingly. Add DeploymentLock contract and extend UpdateState with pause/resume/cancel helpers. Tests updated to cover stale/valid checkpoint resume and legacy/PLONDS flows. CI: enhance ddss-publish to detect release channel, validate S3 assets, prepare and atomically publish channel pointer; add ddss-rollback workflow to publish rollbacks; adjust plonds-build concurrency and release events. * changed.更了好多 * fix.消息盒子媒体播放器组件服务修复 * change.重做天气，为回到系统提供自定义功能。 * feat.airapp与融合桌面 * feat.动画优化与更新界面 * feat.数字时钟，白板功能修复 * feat.完善了时钟轻应用，为启动器提供了多语言支持 * feat.发布与打包优化 * changed.天气选项卡更新
899 lines
31 KiB
HTML
899 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>噪音等级组件改造 Mockup v2</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
:root {
|
||
--quiet: #34D399;
|
||
--normal: #60A5FA;
|
||
--noisy: #F59E0B;
|
||
--extreme: #EF4444;
|
||
--bg: #0B1220;
|
||
--surface: #131D2E;
|
||
--surface-raised: #182438;
|
||
--border: rgba(255,255,255,0.08);
|
||
--text-primary: #EFF3FF;
|
||
--text-secondary: #8B9BB8;
|
||
--text-muted: #5C6D86;
|
||
--radius-component: 24px;
|
||
--radius-xs: 12px;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Noto Sans SC', -apple-system, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text-primary);
|
||
min-height: 100vh;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.page-header {
|
||
text-align: center;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.page-header h1 {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.5px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.page-header p {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.section {
|
||
max-width: 1200px;
|
||
margin: 0 auto 56px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 6px;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.section-desc {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 24px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.mockup-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.widget-card {
|
||
background: var(--surface-raised);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-component);
|
||
padding: 16px 14px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
animation: fadeIn 0.5s ease both;
|
||
}
|
||
|
||
.widget-card:nth-child(2) { animation-delay: 0.08s; }
|
||
|
||
.widget-label {
|
||
position: absolute;
|
||
top: -1px;
|
||
right: 20px;
|
||
background: rgba(96, 165, 250, 0.2);
|
||
border: 1px solid rgba(96, 165, 250, 0.3);
|
||
border-top: none;
|
||
border-radius: 0 0 8px 8px;
|
||
padding: 3px 10px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #8BE8FF;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(8px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* ====== 通用组件样式 ====== */
|
||
.chart-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.chart-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.chart-badge {
|
||
padding: 3px 8px;
|
||
border-radius: var(--radius-xs);
|
||
border: 1px solid rgba(255,255,255,0.3);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
transition: background 0.4s ease;
|
||
}
|
||
|
||
.chart-area {
|
||
position: relative;
|
||
height: 170px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.y-axis {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 22px;
|
||
width: 52px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 4px 0;
|
||
z-index: 3;
|
||
}
|
||
|
||
.y-label {
|
||
font-size: 10px;
|
||
padding-left: 2px;
|
||
color: var(--text-muted);
|
||
transition: color 0.4s ease, font-weight 0.3s ease, opacity 0.4s ease;
|
||
opacity: 0.45;
|
||
}
|
||
|
||
.y-label.active {
|
||
font-weight: 600;
|
||
opacity: 1;
|
||
}
|
||
.y-label.active.l-quiet { color: var(--quiet); }
|
||
.y-label.active.l-normal { color: var(--normal); }
|
||
.y-label.active.l-noisy { color: var(--noisy); }
|
||
.y-label.active.l-extreme { color: var(--extreme); }
|
||
|
||
.curve-area {
|
||
position: absolute;
|
||
left: 56px;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 22px;
|
||
}
|
||
|
||
.curve-area svg { width: 100%; height: 100%; }
|
||
|
||
.x-axis {
|
||
position: absolute;
|
||
left: 56px;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 22px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.x-label {
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* ====== 聚光灯渐变核心 ====== */
|
||
.spotlight-layer {
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
.spotlight-glow {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
height: 55%;
|
||
border-radius: 50%;
|
||
filter: blur(20px);
|
||
opacity: 0;
|
||
transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
||
opacity 0.5s ease,
|
||
background 0.5s ease,
|
||
height 0.5s ease;
|
||
}
|
||
|
||
.spotlight-glow.active {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 分隔线 - 等级边界 */
|
||
.level-divider {
|
||
position: absolute;
|
||
left: 52px;
|
||
right: 0;
|
||
height: 1px;
|
||
background: rgba(255,255,255,0.04);
|
||
z-index: 2;
|
||
}
|
||
|
||
/* ====== 指示条 ====== */
|
||
.indicator-track {
|
||
position: absolute;
|
||
right: 6px;
|
||
top: 8px;
|
||
bottom: 30px;
|
||
width: 3px;
|
||
border-radius: 1.5px;
|
||
background: rgba(255,255,255,0.04);
|
||
z-index: 4;
|
||
}
|
||
|
||
.indicator-dot {
|
||
position: absolute;
|
||
right: 2px;
|
||
width: 11px;
|
||
height: 11px;
|
||
border-radius: 50%;
|
||
transform: translate(50%, -50%);
|
||
z-index: 5;
|
||
transition: top 0.6s cubic-bezier(0.4, 0, 0.2, 1),
|
||
background 0.4s ease,
|
||
box-shadow 0.4s ease;
|
||
}
|
||
|
||
@keyframes glowPulse {
|
||
0%, 100% { opacity: 0.7; }
|
||
50% { opacity: 1; }
|
||
}
|
||
|
||
.indicator-dot::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -4px;
|
||
border-radius: 50%;
|
||
background: inherit;
|
||
opacity: 0.25;
|
||
animation: glowPulse 2.5s ease-in-out infinite;
|
||
}
|
||
|
||
/* ====== 条形图 ====== */
|
||
.bar-section {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.bar-label {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.bar-track {
|
||
height: 6px;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
background: rgba(255,255,255,0.03);
|
||
}
|
||
|
||
.bar-seg {
|
||
height: 100%;
|
||
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.bar-seg.quiet { background: var(--quiet); }
|
||
.bar-seg.normal { background: var(--normal); }
|
||
.bar-seg.noisy { background: var(--noisy); }
|
||
.bar-seg.extreme { background: var(--extreme); }
|
||
|
||
.bar-legend {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.bar-legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.bar-legend-dot {
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* ====== Baseline ====== */
|
||
.baseline-bands {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
z-index: 0;
|
||
}
|
||
|
||
.baseline-band { flex: 1; }
|
||
.baseline-band.extreme { background: rgba(239,68,68,0.09); }
|
||
.baseline-band.noisy { background: rgba(245,158,11,0.08); }
|
||
.baseline-band.normal { background: rgba(96,165,250,0.08); }
|
||
.baseline-band.quiet { background: rgba(52,211,153,0.09); }
|
||
|
||
/* ====== 控制面板 ====== */
|
||
.controls {
|
||
max-width: 1200px;
|
||
margin: 0 auto 32px;
|
||
padding: 20px 24px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-component);
|
||
}
|
||
|
||
.controls-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.controls-row {
|
||
display: flex;
|
||
gap: 32px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.control-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.control-label {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.control-buttons {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.control-btn {
|
||
padding: 6px 14px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border);
|
||
background: var(--surface-raised);
|
||
color: var(--text-secondary);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.control-btn:hover {
|
||
background: rgba(255,255,255,0.08);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.control-btn.active-quiet { border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.15); color: var(--quiet); }
|
||
.control-btn.active-normal { border-color: rgba(96,165,250,0.4); background: rgba(96,165,250,0.15); color: var(--normal); }
|
||
.control-btn.active-noisy { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.15); color: var(--noisy); }
|
||
.control-btn.active-extreme { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.15); color: var(--extreme); }
|
||
|
||
/* ====== 对比标注 ====== */
|
||
.comparison-note {
|
||
max-width: 1200px;
|
||
margin: 0 auto 40px;
|
||
padding: 16px 20px;
|
||
background: rgba(96,165,250,0.06);
|
||
border: 1px solid rgba(96,165,250,0.12);
|
||
border-radius: 12px;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.comparison-note strong {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.comparison-note .highlight {
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.comparison-note .hl-quiet { background: rgba(52,211,153,0.15); color: var(--quiet); }
|
||
.comparison-note .hl-normal { background: rgba(96,165,250,0.15); color: var(--normal); }
|
||
.comparison-note .hl-noisy { background: rgba(245,158,11,0.15); color: var(--noisy); }
|
||
.comparison-note .hl-extreme { background: rgba(239,68,68,0.15); color: var(--extreme); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page-header">
|
||
<h1>噪音等级组件改造 · 聚光灯方案</h1>
|
||
<p>StudyNoiseDistributionWidget 视觉升级 Mockup v2 — 局部渐变聚焦，而非全图渐变</p>
|
||
</div>
|
||
|
||
<div class="comparison-note">
|
||
<strong>设计理念：</strong>不是整张图都铺满渐变色带，而是只在<strong>当前等级附近</strong>产生一个柔和的聚光灯光晕。
|
||
其余区域保持低调暗淡，让用户视线自然聚焦到当前所处等级。
|
||
当等级切换时，光晕平滑滑动到新位置，颜色同步过渡。
|
||
<br><br>
|
||
<span class="highlight hl-quiet">Quiet 安静</span> →
|
||
<span class="highlight hl-normal">Normal 正常</span> →
|
||
<span class="highlight hl-noisy">Noisy 嘈杂</span> →
|
||
<span class="highlight hl-extreme">Extreme 极端</span>
|
||
点击下方按钮切换等级，观察光晕移动效果
|
||
</div>
|
||
|
||
<!-- 控制面板 -->
|
||
<div class="controls">
|
||
<div class="controls-title">🎛 模拟噪音等级切换</div>
|
||
<div class="controls-row">
|
||
<div class="control-group">
|
||
<div class="control-label">当前等级</div>
|
||
<div class="control-buttons" id="level-buttons">
|
||
<button class="control-btn" data-level="quiet" onclick="setLevel('quiet')">Quiet 安静</button>
|
||
<button class="control-btn active-normal" data-level="normal" onclick="setLevel('normal')">Normal 正常</button>
|
||
<button class="control-btn" data-level="noisy" onclick="setLevel('noisy')">Noisy 嘈杂</button>
|
||
<button class="control-btn" data-level="extreme" onclick="setLevel('extreme')">Extreme 极端</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 当前实现 Baseline -->
|
||
<div class="section">
|
||
<div class="section-title">当前实现 (Baseline)</div>
|
||
<div class="section-desc">四色硬切色带，各等级区域均匀着色，没有视觉焦点。用户需要主动寻找"我在哪个等级"。</div>
|
||
<div class="mockup-row">
|
||
<div class="widget-card">
|
||
<div class="chart-header">
|
||
<span class="chart-title">噪音等级分布</span>
|
||
<span class="chart-badge" style="background: rgba(47,93,168,0.55);">Realtime</span>
|
||
</div>
|
||
<div class="chart-area">
|
||
<div class="baseline-bands">
|
||
<div class="baseline-band extreme"></div>
|
||
<div class="baseline-band noisy"></div>
|
||
<div class="baseline-band normal"></div>
|
||
<div class="baseline-band quiet"></div>
|
||
</div>
|
||
<div class="y-axis">
|
||
<span class="y-label">Extreme</span>
|
||
<span class="y-label">Noisy</span>
|
||
<span class="y-label">Normal</span>
|
||
<span class="y-label">Quiet</span>
|
||
</div>
|
||
<div class="curve-area">
|
||
<svg viewBox="0 0 280 140" preserveAspectRatio="none">
|
||
<defs>
|
||
<linearGradient id="fill0" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#EF4444" stop-opacity="0.34"/>
|
||
<stop offset="28%" stop-color="#F59E0B" stop-opacity="0.34"/>
|
||
<stop offset="62%" stop-color="#60A5FA" stop-opacity="0.34"/>
|
||
<stop offset="100%" stop-color="#34D399" stop-opacity="0.34"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M0,95 C20,92 40,78 60,72 C80,66 100,56 120,50 C140,44 160,52 180,48 C200,44 220,38 240,42 C260,46 280,54 280,52 L280,140 L0,140 Z" fill="url(#fill0)"/>
|
||
<path d="M0,95 C20,92 40,78 60,72 C80,66 100,56 120,50 C140,44 160,52 180,48 C200,44 220,38 240,42 C260,46 280,54 280,52" fill="none" stroke="#52AEEA" stroke-width="1.5"/>
|
||
<circle cx="280" cy="52" r="4" fill="#fff" stroke="#52AEEA" stroke-width="1.2"/>
|
||
<circle cx="280" cy="52" r="10" fill="rgba(82,174,234,0.2)"/>
|
||
</svg>
|
||
</div>
|
||
<div class="x-axis">
|
||
<span class="x-label">-12s</span>
|
||
<span class="x-label">-6s</span>
|
||
<span class="x-label">Now</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 聚光灯方案 -->
|
||
<div class="section">
|
||
<div class="section-title">聚光灯方案 — 局部渐变聚焦</div>
|
||
<div class="section-desc">只在当前等级附近产生柔和光晕，其余区域保持暗淡。等级切换时光晕平滑滑动，Y轴标签联动高亮，右侧指示条标注当前位置。下方条形图展示分布占比。</div>
|
||
<div class="mockup-row">
|
||
<!-- 标准尺寸 -->
|
||
<div class="widget-card">
|
||
<div class="widget-label">推荐</div>
|
||
<div class="chart-header">
|
||
<span class="chart-title">噪音等级分布</span>
|
||
<span class="chart-badge" id="spot-badge" style="background: rgba(47,93,168,0.55);">Realtime</span>
|
||
</div>
|
||
<div class="chart-area" id="spot-chart">
|
||
<!-- 极淡的分隔线标记等级边界 -->
|
||
<div class="level-divider" style="top: 25%;"></div>
|
||
<div class="level-divider" style="top: 50%;"></div>
|
||
<div class="level-divider" style="top: 75%;"></div>
|
||
|
||
<!-- 聚光灯光晕层 -->
|
||
<div class="spotlight-layer">
|
||
<div class="spotlight-glow active" id="spot-glow"
|
||
style="top: 35%; height: 50%; background: radial-gradient(ellipse at center, rgba(96,165,250,0.14) 0%, rgba(96,165,250,0.04) 50%, transparent 80%);">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Y轴 -->
|
||
<div class="y-axis">
|
||
<span class="y-label l-extreme" id="sy-extreme">Extreme</span>
|
||
<span class="y-label l-noisy" id="sy-noisy">Noisy</span>
|
||
<span class="y-label l-normal active" id="sy-normal">Normal</span>
|
||
<span class="y-label l-quiet" id="sy-quiet">Quiet</span>
|
||
</div>
|
||
|
||
<!-- 指示条 -->
|
||
<div class="indicator-track"></div>
|
||
<div class="indicator-dot" id="spot-dot" style="top: 55%; background: var(--normal); box-shadow: 0 0 8px rgba(96,165,250,0.5);"></div>
|
||
|
||
<!-- 曲线 -->
|
||
<div class="curve-area" style="right: 18px;">
|
||
<svg viewBox="0 0 270 140" preserveAspectRatio="none">
|
||
<defs>
|
||
<linearGradient id="fillSpot" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#EF4444" stop-opacity="0.28"/>
|
||
<stop offset="28%" stop-color="#F59E0B" stop-opacity="0.28"/>
|
||
<stop offset="62%" stop-color="#60A5FA" stop-opacity="0.28"/>
|
||
<stop offset="100%" stop-color="#34D399" stop-opacity="0.28"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M0,95 C20,92 40,78 60,72 C80,66 100,56 120,50 C140,44 160,52 180,48 C200,44 220,38 240,42 C260,46 270,54 270,52 L270,140 L0,140 Z" fill="url(#fillSpot)"/>
|
||
<path d="M0,95 C20,92 40,78 60,72 C80,66 100,56 120,50 C140,44 160,52 180,48 C200,44 220,38 240,42 C260,46 270,54 270,52" fill="none" stroke="#8BE8FF" stroke-width="1.8"/>
|
||
<circle cx="270" cy="52" r="3.5" fill="#fff" stroke="#52D6FF" stroke-width="1.2" id="spot-latest-dot"/>
|
||
<circle cx="270" cy="52" r="9" fill="rgba(82,214,255,0.12)" id="spot-latest-glow"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="x-axis">
|
||
<span class="x-label">-12s</span>
|
||
<span class="x-label">-6s</span>
|
||
<span class="x-label">Now</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 条形图 -->
|
||
<div class="bar-section">
|
||
<div class="bar-label">等级分布</div>
|
||
<div class="bar-track" id="spot-bar">
|
||
<div class="bar-seg quiet" style="width: 35%;"></div>
|
||
<div class="bar-seg normal" style="width: 40%;"></div>
|
||
<div class="bar-seg noisy" style="width: 18%;"></div>
|
||
<div class="bar-seg extreme" style="width: 7%;"></div>
|
||
</div>
|
||
<div class="bar-legend" id="spot-legend">
|
||
<span class="bar-legend-item"><span class="bar-legend-dot" style="background:var(--quiet);"></span>安静 35%</span>
|
||
<span class="bar-legend-item"><span class="bar-legend-dot" style="background:var(--normal);"></span>正常 40%</span>
|
||
<span class="bar-legend-item"><span class="bar-legend-dot" style="background:var(--noisy);"></span>嘈杂 18%</span>
|
||
<span class="bar-legend-item"><span class="bar-legend-dot" style="background:var(--extreme);"></span>极端 7%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 紧凑模式 -->
|
||
<div class="widget-card">
|
||
<div class="widget-label">紧凑模式</div>
|
||
<div class="chart-header">
|
||
<span class="chart-title">噪音等级分布</span>
|
||
<span class="chart-badge" id="spot-badge-c" style="background: rgba(47,93,168,0.55);">Session</span>
|
||
</div>
|
||
<div class="chart-area" style="height: 120px;" id="spot-chart-c">
|
||
<div class="level-divider" style="top: 25%;"></div>
|
||
<div class="level-divider" style="top: 50%;"></div>
|
||
<div class="level-divider" style="top: 75%;"></div>
|
||
|
||
<div class="spotlight-layer">
|
||
<div class="spotlight-glow active" id="spot-glow-c"
|
||
style="top: 35%; height: 50%; background: radial-gradient(ellipse at center, rgba(96,165,250,0.14) 0%, rgba(96,165,250,0.04) 50%, transparent 80%);">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="y-axis" style="width: 36px;">
|
||
<span class="y-label l-extreme" id="syc-extreme" style="font-size:8px;">Ext</span>
|
||
<span class="y-label l-noisy" id="syc-noisy" style="font-size:8px;">Noisy</span>
|
||
<span class="y-label l-normal active" id="syc-normal" style="font-size:8px;">Norm</span>
|
||
<span class="y-label l-quiet" id="syc-quiet" style="font-size:8px;">Quiet</span>
|
||
</div>
|
||
|
||
<div class="indicator-track" style="right: 4px; width: 2px;"></div>
|
||
<div class="indicator-dot" id="spot-dot-c" style="right: 0; width: 8px; height: 8px; top: 55%; background: var(--normal); box-shadow: 0 0 6px rgba(96,165,250,0.4);"></div>
|
||
|
||
<div class="curve-area" style="left: 40px; right: 14px;">
|
||
<svg viewBox="0 0 260 95" preserveAspectRatio="none">
|
||
<path d="M0,65 C30,60 60,50 90,45 C120,40 150,48 180,42 C210,36 240,40 260,38 L260,95 L0,95 Z" fill="url(#fillSpot)" opacity="0.7"/>
|
||
<path d="M0,65 C30,60 60,50 90,45 C120,40 150,48 180,42 C210,36 240,40 260,38" fill="none" stroke="#8BE8FF" stroke-width="1.4"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="x-axis" style="left: 40px;">
|
||
<span class="x-label">-12s</span>
|
||
<span class="x-label">-6s</span>
|
||
<span class="x-label">Now</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bar-section">
|
||
<div class="bar-track" style="height: 4px; border-radius: 2px;">
|
||
<div class="bar-seg quiet" style="width: 55%;"></div>
|
||
<div class="bar-seg normal" style="width: 30%;"></div>
|
||
<div class="bar-seg noisy" style="width: 10%;"></div>
|
||
<div class="bar-seg extreme" style="width: 5%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 四种等级状态展示 -->
|
||
<div class="section">
|
||
<div class="section-title">四种等级状态一览</div>
|
||
<div class="section-desc">同时展示四个等级的聚光灯效果，可以直观对比光晕位置、颜色和强度的差异。</div>
|
||
<div class="mockup-row" style="grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));">
|
||
|
||
<div class="widget-card" style="padding: 12px;">
|
||
<div style="font-size: 12px; font-weight: 600; color: var(--quiet); margin-bottom: 8px;">● Quiet 安静</div>
|
||
<div class="chart-area" style="height: 100px;">
|
||
<div class="level-divider" style="top: 25%;"></div>
|
||
<div class="level-divider" style="top: 50%;"></div>
|
||
<div class="level-divider" style="top: 75%;"></div>
|
||
<div class="spotlight-layer">
|
||
<div class="spotlight-glow active" style="top: 60%; height: 45%; background: radial-gradient(ellipse at center, rgba(52,211,153,0.16) 0%, rgba(52,211,153,0.04) 50%, transparent 80%);"></div>
|
||
</div>
|
||
<div class="y-axis" style="width: 32px; bottom: 16px;">
|
||
<span class="y-label" style="font-size:8px;">Ext</span>
|
||
<span class="y-label" style="font-size:8px;">Noisy</span>
|
||
<span class="y-label" style="font-size:8px;">Norm</span>
|
||
<span class="y-label l-quiet active" style="font-size:8px;">Quiet</span>
|
||
</div>
|
||
<div class="indicator-track" style="right: 3px; width: 2px;"></div>
|
||
<div class="indicator-dot" style="right: 0; width: 7px; height: 7px; top: 82%; background: var(--quiet); box-shadow: 0 0 6px rgba(52,211,153,0.5);"></div>
|
||
<div class="curve-area" style="left: 36px; right: 12px;">
|
||
<svg viewBox="0 0 220 80" preserveAspectRatio="none">
|
||
<path d="M0,55 C20,52 40,58 60,60 C80,62 100,65 120,63 C140,61 160,58 180,60 C200,62 220,64 220,63 L220,80 L0,80 Z" fill="url(#fillSpot)" opacity="0.5"/>
|
||
<path d="M0,55 C20,52 40,58 60,60 C80,62 100,65 120,63 C140,61 160,58 180,60 C200,62 220,64 220,63" fill="none" stroke="#8BE8FF" stroke-width="1.2"/>
|
||
<circle cx="220" cy="63" r="2.5" fill="#34D399" stroke="#fff" stroke-width="0.8"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="widget-card" style="padding: 12px;">
|
||
<div style="font-size: 12px; font-weight: 600; color: var(--normal); margin-bottom: 8px;">● Normal 正常</div>
|
||
<div class="chart-area" style="height: 100px;">
|
||
<div class="level-divider" style="top: 25%;"></div>
|
||
<div class="level-divider" style="top: 50%;"></div>
|
||
<div class="level-divider" style="top: 75%;"></div>
|
||
<div class="spotlight-layer">
|
||
<div class="spotlight-glow active" style="top: 35%; height: 50%; background: radial-gradient(ellipse at center, rgba(96,165,250,0.14) 0%, rgba(96,165,250,0.04) 50%, transparent 80%);"></div>
|
||
</div>
|
||
<div class="y-axis" style="width: 32px; bottom: 16px;">
|
||
<span class="y-label" style="font-size:8px;">Ext</span>
|
||
<span class="y-label" style="font-size:8px;">Noisy</span>
|
||
<span class="y-label l-normal active" style="font-size:8px;">Norm</span>
|
||
<span class="y-label" style="font-size:8px;">Quiet</span>
|
||
</div>
|
||
<div class="indicator-track" style="right: 3px; width: 2px;"></div>
|
||
<div class="indicator-dot" style="right: 0; width: 7px; height: 7px; top: 55%; background: var(--normal); box-shadow: 0 0 6px rgba(96,165,250,0.5);"></div>
|
||
<div class="curve-area" style="left: 36px; right: 12px;">
|
||
<svg viewBox="0 0 220 80" preserveAspectRatio="none">
|
||
<path d="M0,50 C20,48 40,42 60,38 C80,34 100,40 120,36 C140,32 160,38 180,35 C200,32 220,38 220,36 L220,80 L0,80 Z" fill="url(#fillSpot)" opacity="0.5"/>
|
||
<path d="M0,50 C20,48 40,42 60,38 C80,34 100,40 120,36 C140,32 160,38 180,35 C200,32 220,38 220,36" fill="none" stroke="#8BE8FF" stroke-width="1.2"/>
|
||
<circle cx="220" cy="36" r="2.5" fill="#60A5FA" stroke="#fff" stroke-width="0.8"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="widget-card" style="padding: 12px;">
|
||
<div style="font-size: 12px; font-weight: 600; color: var(--noisy); margin-bottom: 8px;">● Noisy 嘈杂</div>
|
||
<div class="chart-area" style="height: 100px;">
|
||
<div class="level-divider" style="top: 25%;"></div>
|
||
<div class="level-divider" style="top: 50%;"></div>
|
||
<div class="level-divider" style="top: 75%;"></div>
|
||
<div class="spotlight-layer">
|
||
<div class="spotlight-glow active" style="top: 15%; height: 45%; background: radial-gradient(ellipse at center, rgba(245,158,11,0.16) 0%, rgba(245,158,11,0.04) 50%, transparent 80%);"></div>
|
||
</div>
|
||
<div class="y-axis" style="width: 32px; bottom: 16px;">
|
||
<span class="y-label" style="font-size:8px;">Ext</span>
|
||
<span class="y-label l-noisy active" style="font-size:8px;">Noisy</span>
|
||
<span class="y-label" style="font-size:8px;">Norm</span>
|
||
<span class="y-label" style="font-size:8px;">Quiet</span>
|
||
</div>
|
||
<div class="indicator-track" style="right: 3px; width: 2px;"></div>
|
||
<div class="indicator-dot" style="right: 0; width: 7px; height: 7px; top: 30%; background: var(--noisy); box-shadow: 0 0 6px rgba(245,158,11,0.5);"></div>
|
||
<div class="curve-area" style="left: 36px; right: 12px;">
|
||
<svg viewBox="0 0 220 80" preserveAspectRatio="none">
|
||
<path d="M0,30 C20,28 40,22 60,18 C80,14 100,20 120,16 C140,12 160,18 180,15 C200,12 220,16 220,14 L220,80 L0,80 Z" fill="url(#fillSpot)" opacity="0.5"/>
|
||
<path d="M0,30 C20,28 40,22 60,18 C80,14 100,20 120,16 C140,12 160,18 180,15 C200,12 220,16 220,14" fill="none" stroke="#FF8BE8" stroke-width="1.2"/>
|
||
<circle cx="220" cy="14" r="2.5" fill="#F59E0B" stroke="#fff" stroke-width="0.8"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="widget-card" style="padding: 12px;">
|
||
<div style="font-size: 12px; font-weight: 600; color: var(--extreme); margin-bottom: 8px;">● Extreme 极端</div>
|
||
<div class="chart-area" style="height: 100px;">
|
||
<div class="level-divider" style="top: 25%;"></div>
|
||
<div class="level-divider" style="top: 50%;"></div>
|
||
<div class="level-divider" style="top: 75%;"></div>
|
||
<div class="spotlight-layer">
|
||
<div class="spotlight-glow active" style="top: 0%; height: 40%; background: radial-gradient(ellipse at center, rgba(239,68,68,0.18) 0%, rgba(239,68,68,0.05) 50%, transparent 80%); animation: extremePulse 2s ease-in-out infinite;"></div>
|
||
</div>
|
||
<div class="y-axis" style="width: 32px; bottom: 16px;">
|
||
<span class="y-label l-extreme active" style="font-size:8px;">Ext</span>
|
||
<span class="y-label" style="font-size:8px;">Noisy</span>
|
||
<span class="y-label" style="font-size:8px;">Norm</span>
|
||
<span class="y-label" style="font-size:8px;">Quiet</span>
|
||
</div>
|
||
<div class="indicator-track" style="right: 3px; width: 2px;"></div>
|
||
<div class="indicator-dot" style="right: 0; width: 7px; height: 7px; top: 10%; background: var(--extreme); box-shadow: 0 0 8px rgba(239,68,68,0.6);"></div>
|
||
<div class="curve-area" style="left: 36px; right: 12px;">
|
||
<svg viewBox="0 0 220 80" preserveAspectRatio="none">
|
||
<path d="M0,14 C20,12 40,8 60,6 C80,4 100,10 120,7 C140,4 160,8 180,5 C200,2 220,6 220,4 L220,80 L0,80 Z" fill="url(#fillSpot)" opacity="0.5"/>
|
||
<path d="M0,14 C20,12 40,8 60,6 C80,4 100,10 120,7 C140,4 160,8 180,5 C200,2 220,6 220,4" fill="none" stroke="#FF8BE8" stroke-width="1.2"/>
|
||
<circle cx="220" cy="4" r="2.5" fill="#EF4444" stroke="#fff" stroke-width="0.8"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@keyframes extremePulse {
|
||
0%, 100% { opacity: 0.8; }
|
||
50% { opacity: 1; }
|
||
}
|
||
|
||
<script>
|
||
const levels = {
|
||
quiet: {
|
||
color: '#34D399',
|
||
cssVar: 'var(--quiet)',
|
||
label: '安静',
|
||
glowTop: '58%',
|
||
glowHeight: '45%',
|
||
glowBg: 'radial-gradient(ellipse at center, rgba(52,211,153,0.16) 0%, rgba(52,211,153,0.04) 50%, transparent 80%)',
|
||
dotTop: '80%',
|
||
dotShadow: '0 0 8px rgba(52,211,153,0.5)',
|
||
badgeBg: 'rgba(15,107,73,0.8)',
|
||
barWidths: [55, 30, 10, 5],
|
||
barLegends: ['安静 55%', '正常 30%', '嘈杂 10%', '极端 5%'],
|
||
latestDotColor: '#34D399',
|
||
latestGlowColor: 'rgba(52,211,153,0.12)',
|
||
},
|
||
normal: {
|
||
color: '#60A5FA',
|
||
cssVar: 'var(--normal)',
|
||
label: '正常',
|
||
glowTop: '30%',
|
||
glowHeight: '50%',
|
||
glowBg: 'radial-gradient(ellipse at center, rgba(96,165,250,0.14) 0%, rgba(96,165,250,0.04) 50%, transparent 80%)',
|
||
dotTop: '55%',
|
||
dotShadow: '0 0 8px rgba(96,165,250,0.5)',
|
||
badgeBg: 'rgba(47,93,168,0.55)',
|
||
barWidths: [35, 40, 18, 7],
|
||
barLegends: ['安静 35%', '正常 40%', '嘈杂 18%', '极端 7%'],
|
||
latestDotColor: '#60A5FA',
|
||
latestGlowColor: 'rgba(96,165,250,0.12)',
|
||
},
|
||
noisy: {
|
||
color: '#F59E0B',
|
||
cssVar: 'var(--noisy)',
|
||
label: '嘈杂',
|
||
glowTop: '10%',
|
||
glowHeight: '45%',
|
||
glowBg: 'radial-gradient(ellipse at center, rgba(245,158,11,0.16) 0%, rgba(245,158,11,0.04) 50%, transparent 80%)',
|
||
dotTop: '28%',
|
||
dotShadow: '0 0 8px rgba(245,158,11,0.5)',
|
||
badgeBg: 'rgba(128,80,24,0.8)',
|
||
barWidths: [15, 25, 42, 18],
|
||
barLegends: ['安静 15%', '正常 25%', '嘈杂 42%', '极端 18%'],
|
||
latestDotColor: '#F59E0B',
|
||
latestGlowColor: 'rgba(245,158,11,0.12)',
|
||
},
|
||
extreme: {
|
||
color: '#EF4444',
|
||
cssVar: 'var(--extreme)',
|
||
label: '极端',
|
||
glowTop: '-5%',
|
||
glowHeight: '40%',
|
||
glowBg: 'radial-gradient(ellipse at center, rgba(239,68,68,0.18) 0%, rgba(239,68,68,0.05) 50%, transparent 80%)',
|
||
dotTop: '10%',
|
||
dotShadow: '0 0 10px rgba(239,68,68,0.6)',
|
||
badgeBg: 'rgba(141,42,58,0.8)',
|
||
barWidths: [5, 12, 30, 53],
|
||
barLegends: ['安静 5%', '正常 12%', '嘈杂 30%', '极端 53%'],
|
||
latestDotColor: '#EF4444',
|
||
latestGlowColor: 'rgba(239,68,68,0.15)',
|
||
}
|
||
};
|
||
|
||
function setLevel(level) {
|
||
const cfg = levels[level];
|
||
|
||
document.querySelectorAll('#level-buttons .control-btn').forEach(b => {
|
||
b.className = 'control-btn';
|
||
});
|
||
const activeBtn = document.querySelector(`#level-buttons .control-btn[data-level="${level}"]`);
|
||
if (activeBtn) activeBtn.classList.add(`active-${level}`);
|
||
|
||
['spot', 'spot-c'].forEach(prefix => {
|
||
const glow = document.getElementById(prefix === 'spot' ? 'spot-glow' : 'spot-glow-c');
|
||
const dot = document.getElementById(prefix === 'spot' ? 'spot-dot' : 'spot-dot-c');
|
||
if (glow) {
|
||
glow.style.top = cfg.glowTop;
|
||
glow.style.height = cfg.glowHeight;
|
||
glow.style.background = cfg.glowBg;
|
||
if (level === 'extreme') {
|
||
glow.style.animation = 'extremePulse 2s ease-in-out infinite';
|
||
} else {
|
||
glow.style.animation = 'none';
|
||
}
|
||
}
|
||
if (dot) {
|
||
dot.style.top = cfg.dotTop;
|
||
dot.style.background = cfg.color;
|
||
dot.style.boxShadow = cfg.dotShadow;
|
||
}
|
||
});
|
||
|
||
['extreme', 'noisy', 'normal', 'quiet'].forEach(l => {
|
||
const isCurrent = l === level;
|
||
['sy', 'syc'].forEach(prefix => {
|
||
const el = document.getElementById(`${prefix}-${l}`);
|
||
if (el) el.classList.toggle('active', isCurrent);
|
||
});
|
||
});
|
||
|
||
const badge = document.getElementById('spot-badge');
|
||
const badgeC = document.getElementById('spot-badge-c');
|
||
[badge, badgeC].forEach(b => {
|
||
if (b) { b.textContent = cfg.label; b.style.background = cfg.badgeBg; }
|
||
});
|
||
|
||
const latestDot = document.getElementById('spot-latest-dot');
|
||
const latestGlow = document.getElementById('spot-latest-glow');
|
||
if (latestDot) latestDot.setAttribute('fill', cfg.latestDotColor);
|
||
if (latestGlow) latestGlow.setAttribute('fill', cfg.latestGlowColor);
|
||
|
||
const barTrack = document.getElementById('spot-bar');
|
||
if (barTrack) {
|
||
const segs = barTrack.querySelectorAll('.bar-seg');
|
||
const classes = ['quiet', 'normal', 'noisy', 'extreme'];
|
||
cfg.barWidths.forEach((w, i) => { if (segs[i]) segs[i].style.width = w + '%'; });
|
||
}
|
||
|
||
const legend = document.getElementById('spot-legend');
|
||
if (legend) {
|
||
const items = legend.querySelectorAll('.bar-legend-item');
|
||
cfg.barLegends.forEach((text, i) => { if (items[i]) items[i].childNodes[1].textContent = ' ' + text; });
|
||
}
|
||
}
|
||
|
||
setLevel('normal');
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|