@skyroc/materials

src/
├── types/
│   └── index.ts          AdminLayoutProps、PageTabProps 及所有子配置类型
├── libs/
│   ├── admin-layout/
│   │   ├── index.tsx     AdminLayout 组件（布局逻辑 + 插槽渲染）
│   │   ├── shared.ts     createLayoutCssVars、LAYOUT_SCROLL_EL_ID、LAYOUT_MAX_Z_INDEX
│   │   └── index.module.css  布局 CSS 变量消费（--soy-* 变量）
│   └── page-tab/
│       ├── index.tsx     PageTab 入口（模式分发、memo 包装）
│       ├── ButtonTab.tsx  按钮风格标签
│       ├── ChromeTab.tsx  Chrome 风格标签
│       ├── SliderTab.tsx  滑块下划线风格标签
│       ├── SvgClose.tsx   关闭图标（支持触摸事件）
│       ├── ChromeTabBg.tsx Chrome 弧形 SVG 背景
│       ├── hook.ts        useTap（触摸事件处理）
│       ├── shared.ts      createTabCssVars、ACTIVE_COLOR
│       └── index.module.css  标签页 CSS 变量消费
└── index.ts              公共导出

pnpm add @skyroc/materials

┌─────────────────────────────────────┐
│  Header（固定顶部，z-index: 97）      │
├─────────────────────────────────────┤
│  Tab（固定，top = header-height）     │
├──────────┬──────────────────────────┤
│          │                          │
│  Sider   │  Main Content（children） │
│（固定左侧）│                          │
│          │                          │
├──────────┴──────────────────────────┤
│  Footer（可固定底部）                 │
└─────────────────────────────────────┘

import { AdminLayout, LAYOUT_SCROLL_EL_ID } from '@skyroc/materials';

const App = () => {
  const [siderCollapse, setSiderCollapse] = useState(false);

  return (
    <AdminLayout
      mode="vertical"
      fixedTop
      headerHeight={56}
      tabHeight={44}
      siderWidth={220}
      siderCollapsedWidth={64}
      siderCollapse={siderCollapse}
      footerHeight={48}
      isMobile={false}
      scrollMode="content"
      updateSiderCollapse={() => setSiderCollapse(v => !v)}
      Header={<AppHeader />}
      Tab={<AppTab />}
      Sider={<AppSider />}
      Footer={<AppFooter />}
    >
      <RouterOutlet />
    </AdminLayout>
  );
};

--soy-header-height       Header 高度（如 "56px"）
--soy-header-z-index      Header 层叠（maxZIndex - 3，默认 97）
--soy-tab-height          Tab 高度
--soy-tab-z-index         Tab 层叠（maxZIndex - 5，默认 95）
--soy-sider-width         Sider 展开宽度
--soy-sider-collapsed-width Sider 折叠宽度
--soy-sider-z-index       Sider 层叠（垂直: maxZIndex - 1 = 99；水平: maxZIndex - 4 = 96）
--soy-mobile-sider-z-index 移动端 Sider 层叠（移动端: maxZIndex - 2 = 98；否则 0）
--soy-footer-height       Footer 高度
--soy-footer-z-index      Footer 层叠（maxZIndex - 5，默认 95）

Sider（垂直）  99  ← 最高，覆盖 Header/Footer 左边缘
Header         97
Mobile Sider   98  ← 移动端特有
Tab            95
Footer         95
Mobile Mask    98  ← 移动端遮罩

import { LAYOUT_SCROLL_EL_ID } from '@skyroc/materials';

// 获取滚动容器并滚动到顶部
const scrollEl = document.querySelector(`#${LAYOUT_SCROLL_EL_ID}`);
scrollEl?.scrollTo({ top: 0, behavior: 'smooth' });

import { PageTab } from '@skyroc/materials';

// Chrome 风格（默认）
<PageTab
  mode="chrome"
  active={currentRoute === '/dashboard'}
  activeColor="#6366F1"
  prefix={<DashboardIcon />}
  darkMode={isDark}
  closable
  onClick={() => navigate('/dashboard')}
  handleClose={() => closeTab('/dashboard')}
>
  仪表盘
</PageTab>

// 渲染一组标签
{tabs.map(tab => (
  <PageTab
    key={tab.path}
    mode="button"
    active={tab.path === currentPath}
    activeColor={themeColor}
    prefix={tab.icon}
    onClick={() => navigate(tab.path)}
    handleClose={() => closeTab(tab.path)}
  >
    {tab.title}
  </PageTab>
))}

 ╭────────────────╮
 │ ⬡  标签名   ✕  │  ← 激活（填充主色 10% 透明）
─╯                ╰─
   标签名   ✕           ← 未激活（透明背景）

┌─────────────┐   ← 激活（主色边框 + 主色 10% 透明背景）
│ ⬡  标签名  ✕│
└─────────────┘

  ⬡  标签名  ✕    ← 未激活（灰色边框）

⬡  标签名  ✕
────────────    ← 激活（主色下划线 + 浅背景）

⬡  标签名  ✕   ← 未激活（无下划线）

function useTap(onClick: () => void) {
  // touchstart → 记录触摸状态
  // touchmove  → 标记为滑动（取消点击）
  // touchend   → 仅未发生滑动时执行 onClick
  return { onTouchStart, onTouchMove, onTouchEnd }
}

import { LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX } from '@skyroc/materials';

LAYOUT_SCROLL_EL_ID  // '__SCROLL_EL_ID__' — 滚动容器的默认 DOM id
LAYOUT_MAX_Z_INDEX   // 100 — 布局层叠的默认最大值

type LayoutMode = 'horizontal' | 'vertical';

type LayoutScrollMode = 'content' | 'wrapper';

type PageTabMode = 'button' | 'chrome' | 'slider';

type LayoutCssVars = {
  '--soy-footer-height': string | number;
  '--soy-footer-z-index': string | number;
  '--soy-header-height': string | number;
  '--soy-header-z-index': string | number;
  '--soy-mobile-sider-z-index': string | number;
  '--soy-sider-collapsed-width': string | number;
  '--soy-sider-width': string | number;
  '--soy-sider-z-index': string | number;
  '--soy-tab-height': string | number;
  '--soy-tab-z-index': string | number;
};

type PageTabCssVars = {
  '--soy-primary-color': string | number;
  '--soy-primary-color1': string | number;
  '--soy-primary-color2': string | number;
  '--soy-primary-color-opacity1': string | number;
  '--soy-primary-color-opacity2': string | number;
  '--soy-primary-color-opacity3': string | number;
};