yggjs_rlayout框架v0.1.2使用教程 01快速开始

简介

这是一套专门为科技感、未来感界面设计的 React 组件库。提供完整的科技风格界面解决方案，适合用于：

后台管理系统
监控面板
数据可视化平台
仪表板应用

设计特色

深色系配色：深蓝色背景配合青色荧光效果
高科技视觉：发光边框、毛玻璃质感、渐变背景
流畅动画：悬停效果、过渡动画、状态变化
完整生态：从布局到功能组件的全覆盖

基础使用

1. 最简单的使用方式

tsx 复制代码

import { TechLayout } from 'yggjs_rlayout/tech';

function App() {
  const menuItems = [
    { key: 'dashboard', label: '仪表板', icon: 'dashboard' },
    { key: 'users', label: '用户管理', icon: 'users' },
  ];

  return (
    <TechLayout
      brand="我的应用"
      sidebarItems={menuItems}
      selectedSidebarKey="dashboard"
    >
      <div>这里是你的页面内容</div>
    </TechLayout>
  );
}

2. 完整的应用示例

tsx 复制代码

import { 
  TechLayout, 
  TechButton, 
  TechCard, 
  TechPageHeader 
} from 'yggjs_rlayout/tech';

function Dashboard() {
  const menuItems = [
    { key: 'dashboard', label: '仪表板', icon: 'dashboard' },
    { key: 'users', label: '用户管理', icon: 'users' },
    { key: 'settings', label: '设置', icon: 'settings' },
  ];

  return (
    <TechLayout
      brand="管理后台"
      sidebarItems={menuItems}
      selectedSidebarKey="dashboard"
      onSidebarSelect={(key) => console.log('选中菜单:', key)}
      onSearch={(value) => console.log('搜索:', value)}
    >
      <TechPageHeader
        title="仪表板"
        description="系统概览和关键指标"
        actions={
          <TechButton variant="primary" icon="plus">
            新建项目
          </TechButton>
        }
      />
      
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '16px' }}>
        <TechCard title="用户统计">
          <p>在线用户: 1,234</p>
        </TechCard>
        
        <TechCard title="系统状态">
          <p>服务状态: 正常</p>
        </TechCard>
      </div>
    </TechLayout>
  );
}

核心概念

主题系统

所有组件都会自动应用科技风主题，你也可以通过 TechThemeProvider 自定义主题：

tsx 复制代码

import { TechThemeProvider } from 'yggjs_rlayout/tech';

<TechThemeProvider theme={{
  colors: {
    accent: '#ff6b35' // 自定义强调色
  }
}}>
  <App />
</TechThemeProvider>

布局结构

TechLayout: 整体页面布局
TechHeader: 顶部导航栏
TechSidebar: 侧边栏菜单
TechPageHeader: 页面标题区域

基础组件

TechButton: 科技风按钮
TechCard: 科技风卡片
TechIcon: 图标组件

下一步

TechLayout 布局组件 - 了解如何构建完整页面布局
TechButton 按钮组件 - 学习按钮的各种用法
TechCard 卡片组件 - 掌握内容展示组件

需要帮助？

如果在使用过程中遇到问题，可以：

查看具体组件的使用文档
参考示例代码
检查控制台错误信息