feat: add SFX volume control and improve audio feedback

- Implemented separate sound effects volume control in settings.
- Updated backend to handle new `sfx_volume` parameter.
- Enhanced UI to include sound effects volume slider in admin panel.
- Integrated sound effects for various user interactions (clicks, navigation, alerts).
- Added a new global sound engine to manage audio synthesis without external files.
- Updated documentation for Docker deployment and Windows packaging.
- Refactored audio context management to ensure sound effects are available post user interaction.

src/styles/datascreen.css

@@ -2354,6 +2354,94 @@
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
 }
+
+/* ============ 页眉音量控制（媒体 + 音效） ============ */
+.bd-vol-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+.bd-vol-btn {
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #4a5b76;
+  background: rgba(255,255,255,0.7);
+  border: 1px solid rgba(47,107,255,0.14);
+  border-radius: 9px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.bd-vol-btn:hover {
+  color: var(--bd-blue);
+  border-color: rgba(47,107,255,0.4);
+  background: rgba(255,255,255,0.95);
+}
+.bd-vol-btn.muted { color: var(--bd-red); }
+.bd-vol-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 60;
+  width: 220px;
+  padding: 12px 14px;
+  background: rgba(255,255,255,0.96);
+  border: 1px solid rgba(47,107,255,0.16);
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(56,100,170,0.16), 0 1px 0 rgba(255,255,255,0.95) inset;
+  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(140%);
+  animation: bdRotIn 0.2s ease both;
+}
+.bd-vol-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--bd-ink);
+  margin-bottom: 4px;
+}
+.bd-vol-title .appica-ico { color: var(--bd-blue); }
+.bd-vol-panel input[type="range"] {
+  width: 100%;
+  height: 5px;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 3px;
+  background: rgba(47,107,255,0.14);
+  outline: none;
+  cursor: pointer;
+}
+.bd-vol-panel input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: linear-gradient(140deg, var(--bd-blue), var(--bd-cyan));
+  border: 2px solid #fff;
+  box-shadow: 0 2px 6px rgba(47,107,255,0.4);
+}
+.bd-vol-panel input[type="range"]::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--bd-blue);
+  border: 2px solid #fff;
+  box-shadow: 0 2px 6px rgba(47,107,255,0.4);
+}
+.bd-vol-val {
+  display: block;
+  text-align: right;
+  font-family: "JetBrains Mono", "Oswald", monospace;
+  font-size: 10.5px;
+  font-weight: 700;
+  color: var(--bd-blue);
+  margin: 2px 0 8px;
+}
+.bd-vol-val:last-child { margin-bottom: 0; }
 .bd-nav-key {
   display: inline-flex;
   align-items: center;