如何在TwinCAT HMI Engineering中用导航组件实现多屏层级导航

组件选型说明 #

• BreadCrumb（面包屑）：完全匹配层级路径展示需求，支持点击节点跳转，刚好满足「Setting > General Setting」的标题展示及返回主屏幕的功能。
• Navigation Bar（导航栏）：作为面包屑的容器，固定在页面顶部，保证导航区域的一致性。

核心实现思路 #

1. 主设置页面（Setting）点击子选项时，跳转至对应子页面并传递层级路径信息。
2. 子页面的导航栏中渲染面包屑，为每个层级节点绑定跳转/返回逻辑。
3. 面包屑最后一个节点作为当前页面标题，前置节点可点击返回对应层级页面。

示例代码（React + Ant Design） #

1. 路由配置 #

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Setting from './pages/Setting';
import GeneralSetting from './pages/GeneralSetting';
import ParameterSetting from './pages/ParameterSetting';
import BackupSetting from './pages/BackupSetting';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/setting" element={<Setting />} />
        <Route path="/setting/general" element={<GeneralSetting />} />
        <Route path="/setting/parameter" element={<ParameterSetting />} />
        <Route path="/setting/backup" element={<BackupSetting />} />
      </Routes>
    </Router>
  );
}

2. 主设置页面（Setting） #

import { Button, Space } from 'antd';
import { useNavigate } from 'react-router-dom';

function Setting() {
  const navigate = useNavigate();

  return (
    <div className="setting-page">
      <h1>设置主屏幕</h1>
      <Space direction="vertical" size="middle">
        <Button onClick={() => navigate('/setting/general')}>通用设置</Button>
        <Button onClick={() => navigate('/setting/parameter')}>参数设置</Button>
        <Button onClick={() => navigate('/setting/backup')}>备份设置</Button>
      </Space>
    </div>
  );
}

export default Setting;

3. 通用导航栏组件（封装复用） #

import { Breadcrumb, Layout } from 'antd';
import { useNavigate } from 'react-router-dom';
const { Header } = Layout;

function SettingHeader({ breadcrumbItems }) {
  const navigate = useNavigate();

  const handleBreadcrumbClick = (item) => {
    if (item.path) navigate(item.path);
  };

  return (
    <Header style={{ background: '#fff', padding: 0 }}>
      <Breadcrumb style={{ padding: '16px 24px' }} separator=">">
        {breadcrumbItems.map(item => (
          <Breadcrumb.Item 
            key={item.key} 
            onClick={() => handleBreadcrumbClick(item)}
            style={{ cursor: item.path ? 'pointer' : 'default' }}
          >
            {item.title}
          </Breadcrumb.Item>
        ))}
      </Breadcrumb>
    </Header>
  );
}

export default SettingHeader;

4. 通用设置页面（GeneralSetting） #

import { Layout } from 'antd';
import SettingHeader from '../components/SettingHeader';
const { Content } = Layout;

function GeneralSetting() {
  const breadcrumbItems = [
    { key: 'setting', title: 'Setting', path: '/setting' },
    { key: 'general', title: 'General Setting', path: '' }
  ];

  return (
    <Layout>
      <SettingHeader breadcrumbItems={breadcrumbItems} />
      <Content style={{ padding: '24px', background: '#fff', minHeight: 'calc(100vh - 64px)' }}>
        <h2>通用设置内容</h2>
        {/* 具体设置项代码 */}
      </Content>
    </Layout>
  );
}

export default GeneralSetting;

关键注意事项 #

• 面包屑节点需绑定正确的路由路径，确保跳转准确性。
• 多级嵌套场景下，只需在breadcrumbItems数组中新增对应层级节点即可。
• 可通过UI组件库的属性自定义面包屑样式，比如修改分隔符、字体、间距等。

其他框架适配思路 #

• Vue场景：使用Element Plus的ElBreadcrumb组件配合Vue Router实现，逻辑与React版本一致。
• 原生前端：手动构建面包屑DOM结构，通过监听点击事件调用history.back()或location.href实现跳转。

内容的提问来源于stack exchange，提问作者Samy