From 459e21bc8a0e3bd39c75774ffc8de0cf52fb1558 Mon Sep 17 00:00:00 2001
From: SoraStr <soranostar@outlook.com>
Date: Sat, 4 Apr 2026 10:29:50 +0800
Subject: [PATCH 1/2] Add StatusBar.

---
 packages/parser/src/config/scriptConfig.ts                  | 1 +
 packages/parser/src/interface/sceneInterface.ts             | 1 +
 packages/webgal/public/game/scene/demo_zh_cn.txt            | 2 ++
 packages/webgal/src/App.tsx                                 | 2 ++
 packages/webgal/src/Core/controller/scene/sceneInterface.ts | 1 +
 packages/webgal/src/Core/parser/sceneParser.ts              | 2 ++
 packages/webgal/src/store/stageInterface.ts                 | 1 +
 packages/webgal/src/store/stageReducer.ts                   | 1 +
 8 files changed, 11 insertions(+)

diff --git a/packages/parser/src/config/scriptConfig.ts b/packages/parser/src/config/scriptConfig.ts
index 1e1db77e9..32f5b3ff8 100644
--- a/packages/parser/src/config/scriptConfig.ts
+++ b/packages/parser/src/config/scriptConfig.ts
@@ -39,6 +39,7 @@ export const SCRIPT_CONFIG = [
   { scriptString: 'applyStyle', scriptType: commandType.applyStyle },
   { scriptString: 'wait', scriptType: commandType.wait },
   { scriptString: 'callSteam', scriptType: commandType.callSteam },
+  { scriptString: 'setStatusBar', scriptType: commandType.setStatusBar },
 ];
 export const ADD_NEXT_ARG_LIST = [
   commandType.bgm,
diff --git a/packages/parser/src/interface/sceneInterface.ts b/packages/parser/src/interface/sceneInterface.ts
index 1b05024c8..9aff2a6c2 100644
--- a/packages/parser/src/interface/sceneInterface.ts
+++ b/packages/parser/src/interface/sceneInterface.ts
@@ -40,6 +40,7 @@ export enum commandType {
   applyStyle,
   wait,
   callSteam, // 调用Steam功能
+  setStatusBar, // 设置顶部状态框
 }
 
 /**
diff --git a/packages/webgal/public/game/scene/demo_zh_cn.txt b/packages/webgal/public/game/scene/demo_zh_cn.txt
index 0265db5d5..7bb77fcf9 100644
--- a/packages/webgal/public/game/scene/demo_zh_cn.txt
+++ b/packages/webgal/public/game/scene/demo_zh_cn.txt
@@ -1,6 +1,7 @@
 bgm:s_Title.mp3 -volume=80 -enter=3000;
 unlockBgm:s_Title.mp3 -name=雲を追いかけて;
 intro:你好|欢迎来到 {egine} 的世界;
+setStatusBar:Chapter 0 欢迎来到 {egine};
 changeBg:WebGalEnter.webp -next;
 setTransition: -target=bg-main -exit=shockwaveOut;
 :你好|欢迎来到 {egine} 的世界;
@@ -23,6 +24,7 @@ pixiPerform:snow;
 比如，这个下起小雪的特效。 -v6.wav;
 除此以外，分支选择的功能也必不可少。 -v7.wav;
 pixiInit;
+setStatusBar:none;
 WebGAL:接下来介绍一些新版本功能！
 WebGAL:比如这个[注](zhù)[音](yīn)功能，可以为游戏带来更好的体验！
 WebGAL:我们也支持了[文本拓展语法](style=color:#B5495B\;)，可以为[文](wen)[本](ben)带来[富文本支持](style-alltext=font-style:italic\; style=color:#66327C\;)、交互等特性。
diff --git a/packages/webgal/src/App.tsx b/packages/webgal/src/App.tsx
index 5b1427abc..436c01efd 100644
--- a/packages/webgal/src/App.tsx
+++ b/packages/webgal/src/App.tsx
@@ -12,6 +12,7 @@ import Menu from '@/UI/Menu/Menu';
 import GlobalDialog from '@/UI/GlobalDialog/GlobalDialog';
 import PanicOverlay from '@/UI/PanicOverlay/PanicOverlay';
 import DevPanel from '@/UI/DevPanel/DevPanel';
+import { StatusBar } from '@/UI/StatusBar/StatusBar';
 
 export default function App() {
   useEffect(() => {
@@ -31,6 +32,7 @@ export default function App() {
       <GlobalDialog />
       <PanicOverlay />
       <DevPanel />
+      <StatusBar />
     </div>
   );
 }
diff --git a/packages/webgal/src/Core/controller/scene/sceneInterface.ts b/packages/webgal/src/Core/controller/scene/sceneInterface.ts
index 3e29d0ee2..8ec78650d 100644
--- a/packages/webgal/src/Core/controller/scene/sceneInterface.ts
+++ b/packages/webgal/src/Core/controller/scene/sceneInterface.ts
@@ -40,6 +40,7 @@ export enum commandType {
   applyStyle,
   wait,
   callSteam, // 调用Steam功能
+  setStatusBar, // 设置顶部状态框
 }
 
 /**
diff --git a/packages/webgal/src/Core/parser/sceneParser.ts b/packages/webgal/src/Core/parser/sceneParser.ts
index 85b3ebea3..eac0f352a 100644
--- a/packages/webgal/src/Core/parser/sceneParser.ts
+++ b/packages/webgal/src/Core/parser/sceneParser.ts
@@ -37,6 +37,7 @@ import { showVars } from '../gameScripts/showVars';
 import { defineScripts, IConfigInterface, ScriptConfig, ScriptFunction, scriptRegistry } from './utils';
 import { applyStyle } from '@/Core/gameScripts/applyStyle';
 import { wait } from '@/Core/gameScripts/wait';
+import { setStatusBar } from '@/Core/gameScripts/setStatusBar';
 
 export const SCRIPT_TAG_MAP = defineScripts({
   say: ScriptConfig(commandType.say, say),
@@ -74,6 +75,7 @@ export const SCRIPT_TAG_MAP = defineScripts({
   applyStyle: ScriptConfig(commandType.applyStyle, applyStyle, { next: true }),
   wait: ScriptConfig(commandType.wait, wait),
   callSteam: ScriptConfig(commandType.callSteam, callSteam, { next: true }),
+  setStatusBar: ScriptConfig(commandType.setStatusBar, setStatusBar, { next: true }),
 });
 
 export const SCRIPT_CONFIG: IConfigInterface[] = Object.values(SCRIPT_TAG_MAP);
diff --git a/packages/webgal/src/store/stageInterface.ts b/packages/webgal/src/store/stageInterface.ts
index 907df19be..bffc733dd 100644
--- a/packages/webgal/src/store/stageInterface.ts
+++ b/packages/webgal/src/store/stageInterface.ts
@@ -237,6 +237,7 @@ export interface IStageState {
   isDisableTextbox: boolean;
   replacedUIlable: Record<string, string>;
   figureMetaData: figureMetaData;
+  statusBarText: string; // 顶部状态框文本
 }
 
 /**
diff --git a/packages/webgal/src/store/stageReducer.ts b/packages/webgal/src/store/stageReducer.ts
index 57e1ffe42..d51dc32ec 100644
--- a/packages/webgal/src/store/stageReducer.ts
+++ b/packages/webgal/src/store/stageReducer.ts
@@ -74,6 +74,7 @@ export const initState: IStageState = {
   isDisableTextbox: false,
   replacedUIlable: {},
   figureMetaData: {},
+  statusBarText: '',
 };
 
 /**

From 267987a4e48ab44c2cfae7e9801c6bb8da0a3521 Mon Sep 17 00:00:00 2001
From: SoraStr <soranostar@outlook.com>
Date: Sat, 4 Apr 2026 10:33:34 +0800
Subject: [PATCH 2/2] Add StatusBar.

---
 .../webgal/src/UI/StatusBar/StatusBar.scss    | 27 +++++++++++++++++++
 .../webgal/src/UI/StatusBar/StatusBar.tsx     | 21 +++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 packages/webgal/src/UI/StatusBar/StatusBar.scss
 create mode 100644 packages/webgal/src/UI/StatusBar/StatusBar.tsx

diff --git a/packages/webgal/src/UI/StatusBar/StatusBar.scss b/packages/webgal/src/UI/StatusBar/StatusBar.scss
new file mode 100644
index 000000000..50e93d3bd
--- /dev/null
+++ b/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;
+}
diff --git a/packages/webgal/src/UI/StatusBar/StatusBar.tsx b/packages/webgal/src/UI/StatusBar/StatusBar.tsx
new file mode 100644
index 000000000..c09c9b15d
--- /dev/null
+++ b/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>
+  );
+}