From 1b516583b9f33f597ffd30e0f691a167223404fb Mon Sep 17 00:00:00 2001
From: selfrelease <freedak.ipad@gmail.com>
Date: Sun, 14 Jun 2026 19:45:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=AF=BC=E8=88=AA=E7=A7=BB?=
 =?UTF-8?q?=E5=85=A5=20header=20=E8=8F=9C=E5=8D=95=EF=BC=8C=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E6=BC=94=E7=A4=BA=E6=A8=A1=E5=BC=8F=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E6=9D=A1=EF=BC=8C=E8=85=BE=E5=87=BA=E6=BC=94=E7=A4=BA=E5=8C=BA?=
 =?UTF-8?q?=E9=9D=A2=E7=A7=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 三个视图(角色工作台/全流程演示/大小屏融合)从 Tabs 改为 Header 顶部横向菜单
- 删除页面顶部「演示模式…」Alert 提示条
- Content 区按选中菜单渲染对应视图，演示区获得更大可视面积
---
 tcs-iptv/web-console/src/App.jsx | 43 +++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/tcs-iptv/web-console/src/App.jsx b/tcs-iptv/web-console/src/App.jsx
index 1249cb0..607046b 100644
--- a/tcs-iptv/web-console/src/App.jsx
+++ b/tcs-iptv/web-console/src/App.jsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import { Layout, Typography, Alert, Tabs } from 'antd'
+import React, { useState } from 'react'
+import { Layout, Typography, Menu } from 'antd'
 import FlowDemo from './FlowDemo.jsx'
 import RoleDesk from './RoleDesk.jsx'
 import ScreenFusion from './ScreenFusion.jsx'
@@ -7,28 +7,37 @@ import ScreenFusion from './ScreenFusion.jsx'
 const { Header, Content } = Layout
 const { Title, Text } = Typography
 
+const VIEWS = {
+  desk: <RoleDesk />,
+  flow: <FlowDemo />,
+  fusion: <ScreenFusion />,
+}
+
+const MENU_ITEMS = [
+  { key: 'desk', label: '角色工作台（多方协作）' },
+  { key: 'flow', label: '全流程演示（一键）' },
+  { key: 'fusion', label: '大小屏融合（OTT/手机）' },
+]
+
 export default function App() {
+  const [view, setView] = useState('desk')
   return (
     <Layout style={{ minHeight: '100vh' }}>
-      <Header style={{ background: '#1a237e', display: 'flex', alignItems: 'center' }}>
-        <Title level={3} style={{ color: '#fff', margin: 0 }}>TCS-IPTV 内容可信锁定系统</Title>
-        <Text style={{ color: '#b3c5ff', marginLeft: 16 }}>
+      <Header style={{ background: '#1a237e', display: 'flex', alignItems: 'center', paddingInline: 24 }}>
+        <Title level={4} style={{ color: '#fff', margin: 0, whiteSpace: 'nowrap' }}>
+          TCS-IPTV 内容可信锁定系统
+        </Title>
+        <Text style={{ color: '#b3c5ff', marginLeft: 16, whiteSpace: 'nowrap' }}>
           陕西IPTV运营公司 · MA码+哈希双锚定
         </Text>
+        <Menu
+          mode="horizontal" theme="dark" selectedKeys={[view]}
+          onClick={(e) => setView(e.key)} items={MENU_ITEMS}
+          style={{ background: 'transparent', flex: 1, justifyContent: 'flex-end', borderBottom: 'none', minWidth: 0 }}
+        />
       </Header>
       <Content style={{ padding: 24, background: '#f0f2f5' }}>
-        <Alert
-          type="warning" showIcon style={{ marginBottom: 16 }}
-          message="演示模式：以四角色密钥直连 api-svc。生产环境应改为控制台 BFF + 会话令牌，密钥不下发浏览器。"
-        />
-        <Tabs
-          defaultActiveKey="desk"
-          items={[
-            { key: 'desk', label: '角色工作台（多方协作）', children: <RoleDesk /> },
-            { key: 'flow', label: '全流程演示（一键）', children: <FlowDemo /> },
-            { key: 'fusion', label: '大小屏融合（OTT/手机）', children: <ScreenFusion /> },
-          ]}
-        />
+        {VIEWS[view]}
       </Content>
     </Layout>
   )