From: wang.yu(王瑜) <wang.yu@advantech.com>
Date: Mon, 24 Aug 2026 04:33:29 +0000 (+0800)
Subject: AIDC 移入最左侧图标栏（module-rail），按钮样式对齐
X-Git-Url: http://acesimba.cloud/gitweb/?a=commitdiff_plain;h=bfbf0c57df9240d5cac83a958ab19b0be5968b5a;p=StationAIDemo.git

AIDC 移入最左侧图标栏（module-rail），按钮样式对齐

- App.tsx：新增 railMode 状态，AIDC 作为 module-rail 第四个按钮（与场站运营/
  原场站/数据源并列）；右侧面板按 railMode 在「AIDC 子菜单」与「原场景列表」间切换
- index.css：AIDC 菜单按钮样式对齐 .scenario-menu-group>button，修正此前未继承
  按钮样式的样式混乱问题
---

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2372aca..c401962 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -529,6 +529,7 @@ export default function App() {
   const [active,setActive] = useState<SkillKey | AidcKey>("daily");
   const [navCollapsed,setNavCollapsed] = useState(false);
   const [mobileMenuOpen,setMobileMenuOpen] = useState(false);
+  const [railMode,setRailMode] = useState<"scenarios"|"aidc"|"settings">("scenarios");
   // 手机端切换场景后自动关闭菜单
   useEffect(()=>{ if(mobileMenuOpen) setMobileMenuOpen(false); },[active]);
   const [connection,setConnection] = useState<ConnectionState>("connecting");
@@ -680,33 +681,43 @@ export default function App() {
       {mobileMenuOpen && <div className="mobile-menu-overlay show" onClick={()=>setMobileMenuOpen(false)} aria-hidden="true" />}
       <aside className={`left-navigation${mobileMenuOpen?" mobile-open":""}`} aria-label="站点 AI 功能导航">
         <nav className="module-rail" aria-label="模块导航">
-          <button className={active!=="settings"&&active!=="design"?"active":""} onClick={()=>setActive("daily")} title="场站工作台">
+          <button className={railMode==="scenarios"?"active":""} onClick={()=>{setRailMode("scenarios");setActive("daily");}} title="场站工作台">
             <span className="rail-icon">▦</span><small>场站运营</small>
           </button>
+          <button className={railMode==="aidc"?"active":""} onClick={()=>{setRailMode("aidc");setActive(aidcModules[0].key);}} title="AIDC 数据中心">
+            <AidcIcon style={{width:20,height:20}} /><small>AIDC</small>
+          </button>
           {navCollapsed && <button className="rail-expand" onClick={()=>setNavCollapsed(false)} title="展开功能菜单" aria-label="展开功能菜单"><span className="rail-arrow">›</span><small>展开</small></button>}
           <a href={`${muConfig.baseUrl.replace(/\/$/,"")}/#/internal-ortbhmwj-1751254748436654509/all_operate/all_PIV2_67/all_PIV2_116`} target="_blank" rel="noreferrer" title="打开原场站">
             <span className="rail-icon">▣</span><small>原场站</small>
           </a>
-          <button className={active==="settings"||active==="design"?"active":""} onClick={()=>setActive("settings")} title="MU 数据源">
+          <button className={railMode==="settings"?"active":""} onClick={()=>{setRailMode("settings");setActive("settings");}} title="MU 数据源">
             <span className="rail-icon">⚙</span><small>数据源</small>
           </button>
         </nav>
         <nav className="function-sidebar" aria-label="场站 AI 场景菜单">
           <div className="sidebar-panel-title">
-            <strong>场站 AI 场景</strong>
-            <button className="sidebar-collapse" onClick={()=>setNavCollapsed(true)} title="收起功能菜单" aria-label="收起功能菜单">‹</button>
+            <strong>{railMode==="aidc"?"AIDC 数据中心":"场站 AI 场景"}</strong>
+            <button className="sidebar-collapse" onClick={()=>setNavCollapsed(true)} title="收起功能菜单" aria-label="收起功能菜单">&#8249;</button>
           </div>
-          {(["场站运营","运营分析","风险与策略"] as const).map(section=><div className="scenario-menu-group" key={section}>
-            <div className="sidebar-section-label">{section}</div>
-            {section==="场站运营" && <div className="aidc-subgroup">
-              <div className="sidebar-section-label aidc-label"><AidcIcon style={{width:15,height:15,color:"#0a8fd3"}}/><span>AIDC</span></div>
-              {aidcModules.map(m=><button key={m.key} className={active===m.key?"active":""} onClick={()=>setActive(m.key)}><span className="scenario-menu-icon aidc-tone" style={{background:"#0a8fd3",color:"#fff"}}>{m.mark}</span><span>{m.name}</span></button>)}
-            </div>}
-            {skills.filter(skill=>skill.section===section).map(skill=><button key={skill.key} className={active===skill.key?"active":""} onClick={()=>setActive(skill.key)}><span className={`scenario-menu-icon ${skill.tone}`}>{skill.icon}</span><span>{skill.title}</span></button>)}
-          </div>)}
-          <div className="sidebar-section-label">系统连接</div>
-          <button className={active==="settings"?"active":""} onClick={()=>setActive("settings")}><span>数据源配置</span></button>
-          <button className={active==="design"?"active":""} onClick={()=>setActive("design")}><span>设计说明</span></button>
+          {railMode === "aidc" ? (
+            <div className="aidc-subgroup">
+              {aidcModules.map(m => <button key={m.key} className={active===m.key?"active":""} onClick={() => setActive(m.key)}><span className="scenario-menu-icon aidc-tone" style={{background:"#0a8fd3",color:"#fff"}}>{m.mark}</span><span>{m.name}</span></button>)}
+            </div>
+          ) : (
+            <div>
+              {(["场站运营","运营分析","风险与策略"] as const).map(section => <div className="scenario-menu-group" key={section}>
+                <div className="sidebar-section-label">{section}</div>
+                {skills.filter(s => s.section===section).map(s => {
+                  const k = s.key;
+                  return <button key={k} className={active===k?"active":""} onClick={() => { setRailMode("scenarios"); setActive(k); }}><span className={"scenario-menu-icon "+s.tone}>{s.icon}</span><span>{s.title}</span></button>;
+                })}
+              </div>)}
+              <div className="sidebar-section-label">系统连接</div>
+              <button className={active==="settings"?"active":""} onClick={() => setActive("settings")}><span>数据源配置</span></button>
+              <button className={active==="design"?"active":""} onClick={() => setActive("design")}><span>设计说明</span></button>
+            </div>
+          )}
         </nav>
       </aside>
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 172c90b..3e21b8c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -96,10 +96,12 @@ body{font-family:"Noto Sans SC",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droi
 .scenario-menu-group{display:block}
 .scenario-menu-group .sidebar-section-label{margin:6px 16px 2px;padding:9px 4px 5px;border-top:1px solid #d1d1d1;color:#8b8b8b;font-size:11px}
 .scenario-menu-group:first-of-type .sidebar-section-label{border-top:0;margin-top:2px}
-.scenario-menu-group>button{position:relative;width:100%;height:39px;border:0;border-left:3px solid transparent;background:transparent;color:#4a4a4a;padding:0 14px 0 16px;text-align:left;font-size:13px;display:flex;align-items:center;gap:9px}
-.scenario-menu-group>button:hover{background:#f5f5f5;color:#008cd6}
-.scenario-menu-group>button.active{border-left-color:#008cd6;background:#fff;color:#008cd6;font-weight:700}
+.scenario-menu-group>button,.aidc-subgroup>button{position:relative;width:100%;height:39px;border:0;border-left:3px solid transparent;background:transparent;color:#4a4a4a;padding:0 14px 0 16px;text-align:left;font-size:13px;display:flex;align-items:center;gap:9px}
+.scenario-menu-group>button:hover,.aidc-subgroup>button:hover{background:#f5f5f5;color:#008cd6}
+.scenario-menu-group>button.active,.aidc-subgroup>button.active{border-left-color:#008cd6;background:#fff;color:#008cd6;font-weight:700}
 .scenario-menu-icon{width:22px;height:22px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;border-radius:2px;flex:0 0 auto}
+.aidc-subgroup{display:block}
+.aidc-subgroup .aidc-label{margin:6px 16px 2px;padding:9px 4px 5px;border-top:1px solid #d1d1d1;color:#0a8fd3;font-size:11px;display:flex;align-items:center;gap:7px;font-weight:700}
 .scenario-workspace{grid-column:2;grid-row:2;min-width:0;min-height:0;overflow:auto;background:#f4f6f8;color:#323233}
 .scenario-header{min-height:94px;padding:21px 28px 18px;background:#fff;border-bottom:1px solid #d4d8dc;display:flex;align-items:flex-start;gap:14px}
 .scenario-title-icon{width:42px;height:42px;display:grid;place-items:center;color:#fff;font-size:17px;font-weight:800;border-radius:2px;flex:0 0 auto}