配置总览

配置方式

所有配置集中在 src/config.ts 文件中，通过 LinchDesktopConfig 类型定义：

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

export const config: Partial<LinchDesktopConfig> = {
  brand: { ... },
  nav: [...],
  features: { ... },
  theme: { ... },
  layout: { ... },
  slots: { ... },
  components: { ... },
  i18n: { ... },
  database: { ... },
  sentry: { ... },
};

配置对象传递给 LinchDesktopProvider：

import { LinchDesktopProvider } from '@linch-tech/desktop-core';
import { config } from './config';

function App() {
  return (
    <LinchDesktopProvider config={config}>
      {/* 应用内容 */}
    </LinchDesktopProvider>
  );
}

完整类型定义

interface LinchDesktopConfig {
  // 品牌配置（必需）
  brand: BrandConfig;

  // 导航配置（必需）
  nav: NavItem[];

  // 功能开关
  features?: FeaturesConfig;

  // 主题配置
  theme?: ThemeConfig;

  // 布局配置
  layout?: LayoutConfig;

  // 插槽配置
  slots?: SlotsConfig;

  // 组件覆盖
  components?: ComponentOverrides;

  // 国际化配置
  i18n?: I18nConfig;

  // 数据库配置
  database?: DatabaseConfig;

  // Sentry 配置
  sentry?: SentryConfig;
}

配置项概览

配置项	必需	说明
`brand`	是	应用品牌信息（名称、Logo、版本）
`nav`	是	侧边栏导航项
`features`	否	功能开关（数据库、更新、Sentry）
`theme`	否	主题定制（颜色、圆角、字体）
`layout`	否	布局设置（侧边栏、标题栏）
`slots`	否	内容插槽注入
`components`	否	组件覆盖
`i18n`	否	国际化设置
`database`	否	数据库配置
`sentry`	否	错误监控配置

最小配置示例

只需提供 brand 和 nav 即可运行：

import { Home } from 'lucide-react';
import type { LinchDesktopConfig } from '@linch-tech/desktop-core';

export const config: Partial<LinchDesktopConfig> = {
  brand: {
    name: 'My App',
  },
  nav: [
    { title: 'Home', path: '/', icon: Home },
  ],
};

完整配置示例

import { Home, Settings, Database } from 'lucide-react';
import type { LinchDesktopConfig } from '@linch-tech/desktop-core';
import { MyLogo } from './components/Logo';

export const config: Partial<LinchDesktopConfig> = {
  brand: {
    name: 'app.name',
    logo: MyLogo,
    version: `v${__APP_VERSION__}`,
  },

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

  features: {
    updater: true,
    database: true,
    sentry: false,
  },

  theme: {
    colors: {
      primary: '#3b82f6',
    },
    radius: 'md',
  },

  layout: {
    sidebar: {
      width: 200,
      position: 'left',
    },
    titleBar: {
      height: 40,
      showWindowControls: true,
      draggable: true,
    },
  },

  i18n: {
    defaultLanguage: 'zh',
    supportedLanguages: ['zh', 'en'],
    resources: {
      en: {
        app: {
          name: 'My App',
          home: 'Home',
          database: 'Database',
        },
      },
      zh: {
        app: {
          name: '我的应用',
          home: '首页',
          database: '数据库',
        },
      },
    },
  },

  database: {
    name: 'app.db',
    migrations: [],
  },
};

访问配置

在组件中可以通过 useConfig hook 访问当前配置：

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

function MyComponent() {
  const config = useConfig();
  return <div>{config.brand.name}</div>;
}

配置方式

完整类型定义

配置项概览

最小配置示例

完整配置示例

访问配置

下一步

品牌配置

导航配置

功能开关

目录