Add StatusBar.

Author: SoraStr

packages/webgal/src/UI/StatusBar/StatusBar.scss

@@ -0,0 +1,27 @@
+.status-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 10vh;
+  min-height: 50px;
+  background: linear-gradient(180deg, rgba(200, 220, 240, 0.85) 0%, rgba(180, 200, 230, 0.75) 100%);
+  z-index: 8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  user-select: none;
+}
+
+.status-bar-content {
+  color: #2c3e50;
+  font-size: 3rem;
+  font-weight: 500;
+  text-align: center;
+  padding: 0 20px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

packages/webgal/src/UI/StatusBar/StatusBar.tsx

@@ -0,0 +1,21 @@
+import { useSelector } from 'react-redux';
+import { RootState } from '@/store/store';
+import './StatusBar.scss';
+
+export function StatusBar() {
+  const statusBarText = useSelector((state: RootState) => state.stage.statusBarText);
+  const showTitle = useSelector((state: RootState) => state.GUI.showTitle);
+  const showMenuPanel = useSelector((state: RootState) => state.GUI.showMenuPanel);
+  const showExtra = useSelector((state: RootState) => state.GUI.showExtra);
+
+  // 在标题、菜单、鉴赏模式时不显示状态框
+  if (showTitle || showMenuPanel || showExtra || !statusBarText) {
+    return null;
+  }
+
+  return (
+    <div className="status-bar">
+      <div className="status-bar-content">{statusBarText}</div>
+    </div>
+  );
+}