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