feat(web): 导航移入 header 菜单,移除演示模式提示条,腾出演示区面积
- 三个视图(角色工作台/全流程演示/大小屏融合)从 Tabs 改为 Header 顶部横向菜单 - 删除页面顶部「演示模式…」Alert 提示条 - Content 区按选中菜单渲染对应视图,演示区获得更大可视面积
This commit is contained in:
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user