yggjs_rlayout框架v0.1.2使用教程 02 TechLayout 布局组件

简介

TechLayout 是整个科技风组件库的核心布局组件，它提供了一个完整的应用程序布局解决方案，包括：

• 顶部导航栏
• 可折叠侧边栏
• 主要内容区域
• 响应式设计

基础使用

最简单的使用

import { TechLayout } from 'yggjs_rlayout/tech';function App() {const menuItems = [{ key: 'home', label: '首页', icon: 'home' },{ key: 'users', label: '用户', icon: 'users' },];return (<TechLayoutbrand="我的应用"sidebarItems={menuItems}><div>页面内容</div></TechLayout>);
}

完整示例

带所有功能的布局

import { TechLayout } from 'yggjs_rlayout/tech';
import { useState } from 'react';function App() {const [selectedKey, setSelectedKey] = useState('dashboard');// 侧边栏菜单数据const sidebarItems = [{ key: 'dashboard', label: '仪表板', icon: 'dashboard' },{ key: 'users', label: '用户管理', icon: 'users',children: [{ key: 'user-list', label: '用户列表' },{ key: 'user-roles', label: '角色管理' },]},{ key: 'settings', label: '设置', icon: 'settings' },];// 顶部导航菜单（可选）const headerMenuItems = [{ key: 'workspace1', label: '工作区 1' },{ key: 'workspace2', label: '工作区 2' },];return (<TechLayout// 品牌信息brand="管理后台"version="v1.0.0"// 顶部导航headerMenuItems={headerMenuItems}selectedHeaderKey="workspace1"onHeaderMenuSelect={(key) => console.log('切换工作区:', key)}// 侧边栏sidebarItems={sidebarItems}selectedSidebarKey={selectedKey}onSidebarSelect={setSelectedKey}// 搜索功能onSearch={(value) => console.log('搜索:', value)}searchPlaceholder="搜索功能..."// 顶部右侧操作区headerActions={<div><button>通知</button><button>用户中心</button></div>}// 布局配置defaultCollapsed={false}sidebarWidth={260}collapsedWidth={72}>{/* 这里是你的页面内容 */}<div><h1>当前页面: {selectedKey}</h1><p>页面内容会在这里显示</p></div></TechLayout>);
}

属性详解

基础属性

顶部导航属性

侧边栏属性

搜索功能

布局配置

内容区域配置

菜单项数据格式

基础菜单项

const menuItems = [{key: 'dashboard',        // 唯一标识label: '仪表板',          // 显示文本icon: 'dashboard',       // 图标名称（可选）},
];

带子菜单的菜单项

const menuItems = [{key: 'users',label: '用户管理',icon: 'users',children: [              // 子菜单{ key: 'user-list', label: '用户列表' },{ key: 'user-roles', label: '角色管理' },],},
];

响应式设计

TechLayout 会自动适配不同屏幕尺寸：

• 桌面端：正常显示所有元素
• 平板端：侧边栏自动折叠
• 手机端：侧边栏变为抽屉式

路由集成

如果你使用 React Router，可以这样集成：

import { TechLayout } from 'yggjs_rlayout/tech';
import { useNavigate, useLocation } from 'react-router-dom';function AppLayout({ children }) {const navigate = useNavigate();const location = useLocation();const menuItems = [{ key: '/dashboard', label: '仪表板', icon: 'dashboard' },{ key: '/users', label: '用户', icon: 'users' },];return (<TechLayoutbrand="我的应用"sidebarItems={menuItems}selectedSidebarKey={location.pathname}onSidebarSelect={(key) => navigate(key)}>{children}</TechLayout>);
}

常见问题

1. 如何隐藏顶部导航？

不传入 headerMenuItems 即可隐藏顶部菜单栏。

2. 如何自定义侧边栏宽度？

使用 sidebarWidth 和 collapsedWidth 属性：

<TechLayoutsidebarWidth={300}       // 展开宽度collapsedWidth={60}      // 折叠宽度// ...其他属性
>

3. 如何处理菜单点击事件？

使用 onSidebarSelect 回调：

<TechLayoutonSidebarSelect={(key) => {console.log('选中菜单:', key);// 这里可以处理路由跳转、状态更新等逻辑}}// ...其他属性
>

4. 如何设置默认折叠侧边栏？

<TechLayoutdefaultCollapsed={true}// ...其他属性
>