导航配置

类型定义

interface NavItem {
  /**
   * 标题（可以是 i18n key 或纯文本）
   */
  title: string;

  /**
   * 路由路径
   */
  path: string;

  /**
   * 图标组件（Lucide 图标或自定义组件）
   */
  icon: LucideIcon | ComponentType<{ className?: string }>;

  /**
   * 徽标（可选）
   */
  badge?: string | number;
}

基本配置

import { Home, Settings, Users, FileText } from 'lucide-react';

nav: [
  { title: 'Home', path: '/', icon: Home },
  { title: 'Users', path: '/users', icon: Users },
  { title: 'Documents', path: '/documents', icon: FileText },
  { title: 'Settings', path: '/settings', icon: Settings },
],

使用 i18n key

nav: [
  { title: 'app.home', path: '/', icon: Home },
  { title: 'app.users', path: '/users', icon: Users },
  { title: 'settings.title', path: '/settings', icon: Settings },
],

i18n: {
  resources: {
    en: {
      app: {
        home: 'Home',
        users: 'Users',
      },
      settings: {
        title: 'Settings',
      },
    },
    zh: {
      app: {
        home: '首页',
        users: '用户',
      },
      settings: {
        title: '设置',
      },
    },
  },
},

添加徽标

徽标可以显示数字或文本：

nav: [
  { title: 'Inbox', path: '/inbox', icon: Inbox, badge: 5 },
  { title: 'Updates', path: '/updates', icon: Bell, badge: 'New' },
  { title: 'Settings', path: '/settings', icon: Settings },
],

自定义图标

除了 Lucide 图标，也可以使用自定义组件：

// src/components/icons/CustomIcon.tsx
export function CustomIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <circle cx="12" cy="12" r="10" />
    </svg>
  );
}

import { CustomIcon } from './components/icons/CustomIcon';

nav: [
  { title: 'Custom', path: '/custom', icon: CustomIcon },
],

路由对应

导航项的 path 需要与 App.tsx 中定义的路由匹配：

// src/App.tsx
<Routes>
  <Route element={<Shell />}>
    <Route path="/" element={<Home />} />
    <Route path="/users" element={<Users />} />
    <Route path="/documents" element={<Documents />} />
    <Route path="/settings" element={<Settings />} />
  </Route>
</Routes>

// src/config.ts
nav: [
  { title: 'Home', path: '/', icon: Home },
  { title: 'Users', path: '/users', icon: Users },
  { title: 'Documents', path: '/documents', icon: FileText },
  { title: 'Settings', path: '/settings', icon: Settings },
],

激活状态

导航项会根据当前路由自动高亮。匹配规则：

精确匹配优先
如果没有精确匹配，则匹配最长前缀

例如，当前路由为 /users/123 时：

/users 会被高亮
/ 不会被高亮

自定义导航项组件

如果需要完全自定义导航项的渲染，可以覆盖 NavItem 组件：

import type { NavItemComponentProps } from '@linch-tech/desktop-core';

function CustomNavItem({ item, isActive, onClick }: NavItemComponentProps) {
  const Icon = item.icon;

  return (
    <button
      onClick={onClick}
      className={`flex items-center gap-2 px-3 py-2 rounded ${
        isActive ? 'bg-primary text-white' : 'hover:bg-muted'
      }`}
    >
      <Icon className="w-4 h-4" />
      <span>{item.title}</span>
      {item.badge && (
        <span className="ml-auto bg-red-500 text-white text-xs px-1.5 rounded-full">
          {item.badge}
        </span>
      )}
    </button>
  );
}

// 在配置中使用
components: {
  NavItem: CustomNavItem,
},

完整示例

import { Home, Users, FileText, Settings, Inbox, Bell } from 'lucide-react';

export const config = {
  nav: [
    { title: 'app.home', path: '/', icon: Home },
    { title: 'app.inbox', path: '/inbox', icon: Inbox, badge: 3 },
    { title: 'app.users', path: '/users', icon: Users },
    { title: 'app.documents', path: '/documents', icon: FileText },
    { title: 'app.notifications', path: '/notifications', icon: Bell, badge: 'New' },
    { title: 'settings.title', path: '/settings', icon: Settings },
  ],

  i18n: {
    resources: {
      en: {
        app: {
          home: 'Home',
          inbox: 'Inbox',
          users: 'Users',
          documents: 'Documents',
          notifications: 'Notifications',
        },
        settings: {
          title: 'Settings',
        },
      },
      zh: {
        app: {
          home: '首页',
          inbox: '收件箱',
          users: '用户',
          documents: '文档',
          notifications: '通知',
        },
        settings: {
          title: '设置',
        },
      },
    },
  },
};

目录