@longzai-intelligence-design-system/base-lyra

基于 Base UI + Tailwind CSS + CVA 的 UI 组件预设。

发布方式

本包采用源码发布（source-only publishing），不经过编译或打包。

package.json 的 exports 直接指向 src/ 下的原始 .ts / .tsx 文件，消费方的构建工具链（bun / bundler）负责 TypeScript 编译和样式处理。

这样做的原因：

• 组件库的消费方通常自带 TypeScript 和 Tailwind 支持，源码发布让消费方能获得完整的 tree-shaking 和类型推断
• 避免引入额外的构建工具（如 tsdown / rollup）和对应的构建配置维护成本
• 组件代码本身就是最终交付物，不需要中间产物

消费方要求

使用本包的项目需要满足以下条件：

• TypeScript 支持（jsx: "react-jsx"）
• Tailwind CSS 4.x
• 能处理 package.json exports 中指向的 .ts / .tsx 源码（bun 原生支持，其他工具可通过 bundler plugin 处理）

包内容

基础组件（Primitives）

src/primitives/ 目录包含 25 个基础 UI 组件：

| 组件 | 说明 | |------|------| | Alert | 警告提示组件 | | Avatar | 头像组件 | | Badge | 徽章组件 | | Breadcrumb | 面包屑导航组件 | | Button | 按钮组件 | | Card | 卡片组件 | | Checkbox | 复选框组件 | | ConfirmDialog | 确认对话框组件 | | Dialog | 对话框组件 | | DropdownMenu | 下拉菜单组件 | | ErrorBoundary | 错误边界组件 | | Input | 输入框组件 | | Label | 标签组件 | | Progress | 进度条组件 | | ScrollArea | 滚动区域组件 | | Select | 选择器组件 | | Separator | 分隔线组件 | | Sheet | 抽屉组件 | | Skeleton | 骨架屏组件 | | Table | 表格组件 | | Tabs | 标签页组件 | | Textarea | 文本域组件 | | Toggle | 切换按钮组件 | | ToggleGroup | 切换按钮组组件 | | Tooltip | 工具提示组件 |

布局组件（Layouts）

src/layouts/ 目录包含应用布局相关组件：

| 组件 | 说明 | |------|------| | Header | 顶部导航栏组件，支持 Electrobun 拖拽区域 | | Sidebar | 侧边栏组件，支持分组导航菜单 | | Main | 主内容区组件，提供滚动和间距 |

复合组件（Composites）

src/composites/ 目录包含业务复合组件：

| 组件 | 说明 | |------|------| | ThemeSwitcher | 主题切换器，支持亮色/暗色/跟随系统 | | ConnectionStatus | 连接状态指示器（desktop 特有） |

工具函数

• cn() — clsx + tailwind-merge 工具函数，用于合并 Tailwind 类名

样式文件

• styles.css — Tailwind 主题配置和 CSS 变量

安装

bun add @longzai-intelligence-design-system/base-lyra

使用

基础导入

import { Button, Dialog, Input } from '@longzai-intelligence-design-system/base-lyra';
import '@longzai-intelligence-design-system/base-lyra/styles.css';

布局组件

布局组件用于构建应用的整体结构，支持典型的三栏布局（Header + Sidebar + Main）。

导入方式

import { Header, Sidebar, Main } from '@longzai-intelligence-design-system/base-lyra';

Header 顶部导航栏

import { Header } from '@longzai-intelligence-design-system/base-lyra';
import { ThemeSwitcher } from '@longzai-intelligence-design-system/base-lyra';

function AppHeader() {
  return (
    <Header
      title="Longzai Intelligence"
      subtitle="M5 Edition"
      rightContent={<ThemeSwitcher />}
    />
  );
}

Header 属性：

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | string | - | 应用标题 | | subtitle | string | - | 副标题 | | leftContent | ReactNode | - | 左侧自定义内容 | | rightContent | ReactNode | - | 右侧自定义内容 | | enableDragRegion | boolean | true | 是否启用 Electrobun 拖拽区域 | | className | string | - | 自定义类名 | | children | ReactNode | - | 完全自定义内容 |

Sidebar 侧边栏

import { Sidebar, type NavGroup } from '@longzai-intelligence-design-system/base-lyra';
import { Home, Settings, User } from 'lucide-react';

const navGroups: NavGroup[] = [
  {
    title: '导航',
    items: [
      { id: 'home', label: '首页', name: 'Home', icon: <Home className="h-4 w-4" /> },
      { id: 'profile', label: '个人中心', name: 'Profile', icon: <User className="h-4 w-4" /> },
    ],
  },
  {
    title: '系统',
    items: [
      { id: 'settings', label: '设置', name: 'Settings', icon: <Settings className="h-4 w-4" /> },
    ],
  },
];

function AppSidebar() {
  const [selectedId, setSelectedId] = useState('home');
  
  return (
    <Sidebar
      groups={navGroups}
      selectedId={selectedId}
      onSelect={setSelectedId}
    />
  );
}

Sidebar 属性：

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | groups | NavGroup[] | - | 导航分组配置 | | selectedId | string | - | 当前选中的菜单项 ID | | onSelect | (id: string) => void | - | 菜单项选择回调 | | header | ReactNode | - | 自定义头部内容 | | footer | ReactNode | - | 自定义底部内容 | | width | string | 'w-64' | 侧边栏宽度 | | className | string | - | 自定义类名 |

Main 主内容区

import { Main } from '@longzai-intelligence-design-system/base-lyra';

function AppContent() {
  return (
    <Main padding="p-4">
      {/* 页面内容 */}
    </Main>
  );
}

Main 属性：

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | children | ReactNode | - | 子元素 | | className | string | - | 自定义类名 | | padding | string | 'p-6' | 内边距 |

完整布局示例

import { Header, Sidebar, Main, ThemeSwitcher } from '@longzai-intelligence-design-system/base-lyra';
import '@longzai-intelligence-design-system/base-lyra/styles.css';

function AppLayout() {
  const [selectedNav, setSelectedNav] = useState('home');
  
  const navGroups = [
    {
      title: '主菜单',
      items: [
        { id: 'home', label: '首页' },
        { id: 'dashboard', label: '仪表盘' },
      ],
    },
  ];

  return (
    <div className="flex h-screen flex-col">
      <Header
        title="Longzai Intelligence"
        rightContent={<ThemeSwitcher />}
      />
      <div className="flex flex-1 overflow-hidden">
        <Sidebar
          groups={navGroups}
          selectedId={selectedNav}
          onSelect={setSelectedNav}
        />
        <Main>
          {/* 页面内容 */}
        </Main>
      </div>
    </div>
  );
}

复合组件

ThemeSwitcher 主题切换器

import { ThemeSwitcher, type Theme } from '@longzai-intelligence-design-system/base-lyra';

function ThemeExample() {
  const [theme, setTheme] = useState<Theme>('system');
  
  return (
    <ThemeSwitcher
      theme={theme}
      onThemeChange={setTheme}
    />
  );
}

ThemeSwitcher 属性：

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | theme | 'light' \| 'dark' \| 'system' | - | 当前主题（受控模式） | | onThemeChange | (theme: Theme) => void | - | 主题切换回调 | | className | string | - | 自定义类名 |

ConnectionStatus 连接状态指示器

import { ConnectionStatus, type ConnectionMode } from '@longzai-intelligence-design-system/base-lyra';

function ConnectionExample() {
  const [mode, setMode] = useState<ConnectionMode>('local');
  const [isConnected, setIsConnected] = useState(false);
  
  return (
    <ConnectionStatus
      mode={mode}
      isConnected={isConnected}
      onModeChange={setMode}
    />
  );
}

ConnectionStatus 属性：

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | mode | 'local' \| 'remote' | - | 当前连接模式 | | isConnected | boolean | - | 是否已连接到远程服务器 | | onModeChange | (mode: ConnectionMode) => void | - | 模式切换回调 | | className | string | - | 自定义类名 |

工具函数

import { cn } from '@longzai-intelligence-design-system/base-lyra';

const className = cn(
  'base-class',
  isActive && 'active-class',
  customClassName
);

Peer Dependencies

• react >= 18.0.0
• react-dom >= 18.0.0