feat(web): 导航移入 header 菜单,移除演示模式提示条,腾出演示区面积

- 三个视图(角色工作台/全流程演示/大小屏融合)从 Tabs 改为 Header 顶部横向菜单
- 删除页面顶部「演示模式…」Alert 提示条
- Content 区按选中菜单渲染对应视图,演示区获得更大可视面积
This commit is contained in:
selfrelease
2026-06-14 19:45:51 +08:00
parent a287c52000
commit 1b516583b9
+26 -17
View File
@@ -1,5 +1,5 @@
import React from 'react' import React, { useState } from 'react'
import { Layout, Typography, Alert, Tabs } from 'antd' import { Layout, Typography, Menu } from 'antd'
import FlowDemo from './FlowDemo.jsx' import FlowDemo from './FlowDemo.jsx'
import RoleDesk from './RoleDesk.jsx' import RoleDesk from './RoleDesk.jsx'
import ScreenFusion from './ScreenFusion.jsx' import ScreenFusion from './ScreenFusion.jsx'
@@ -7,28 +7,37 @@ import ScreenFusion from './ScreenFusion.jsx'
const { Header, Content } = Layout const { Header, Content } = Layout
const { Title, Text } = Typography 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() { export default function App() {
const [view, setView] = useState('desk')
return ( return (
<Layout style={{ minHeight: '100vh' }}> <Layout style={{ minHeight: '100vh' }}>
<Header style={{ background: '#1a237e', display: 'flex', alignItems: 'center' }}> <Header style={{ background: '#1a237e', display: 'flex', alignItems: 'center', paddingInline: 24 }}>
<Title level={3} style={{ color: '#fff', margin: 0 }}>TCS-IPTV 内容可信锁定系统</Title> <Title level={4} style={{ color: '#fff', margin: 0, whiteSpace: 'nowrap' }}>
<Text style={{ color: '#b3c5ff', marginLeft: 16 }}> TCS-IPTV 内容可信锁定系统
</Title>
<Text style={{ color: '#b3c5ff', marginLeft: 16, whiteSpace: 'nowrap' }}>
陕西IPTV运营公司 · MA码+哈希双锚定 陕西IPTV运营公司 · MA码+哈希双锚定
</Text> </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> </Header>
<Content style={{ padding: 24, background: '#f0f2f5' }}> <Content style={{ padding: 24, background: '#f0f2f5' }}>
<Alert {VIEWS[view]}
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 /> },
]}
/>
</Content> </Content>
</Layout> </Layout>
) )