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>
   )