共享组件

概述

Linch Desktop Core 提供了一些可复用的业务组件。

Logo

应用 Logo 组件，默认显示一个简单的图标。

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

<Logo className="h-6 w-6" />

自定义 Logo：

// src/config.ts
import { MyLogo } from './components/Logo';

brand: {
  logo: MyLogo,
},

PageHeader

页面标题头组件。

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

<PageHeader
  title="页面标题"
  description="页面描述文本"
/>

// 带操作按钮
<PageHeader
  title="用户管理"
  description="管理系统中的所有用户"
>
  <Button>添加用户</Button>
</PageHeader>

Props：

interface PageHeaderProps {
  title: string;
  description?: string;
  children?: ReactNode;  // 右侧操作区
  className?: string;
}

ThemeSwitcher

主题切换器组件，切换明/暗/系统主题。

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

<ThemeSwitcher />

默认显示在 TitleBar 右侧，也可以单独使用。

LanguageSwitcher

语言切换器组件，切换应用语言。

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

<LanguageSwitcher />

根据 i18n.supportedLanguages 配置显示可用语言选项。

WindowControls

窗口控制按钮组件（最小化、最大化、关闭）。

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

<WindowControls />

通常不需要单独使用，已内置在 TitleBar 中。如果自定义 TitleBar，可以导入此组件使用。

使用示例

页面布局

import { ScrollArea, PageHeader, Button } from '@linch-tech/desktop-core';

function UsersPage() {
  return (
    <ScrollArea className="flex-1">
      <div className="p-6">
        <PageHeader
          title="用户管理"
          description="查看和管理系统用户"
        >
          <Button>添加用户</Button>
        </PageHeader>

        <div className="mt-6">
          {/* 页面内容 */}
        </div>
      </div>
    </ScrollArea>
  );
}

自定义标题栏

import { WindowControls, ThemeSwitcher, LanguageSwitcher } from '@linch-tech/desktop-core';

function CustomTitleBar() {
  return (
    <header className="flex h-10 items-center justify-between border-b px-3" data-tauri-drag-region>
      <div className="flex items-center gap-2">
        <MyLogo className="h-5 w-5" />
        <span className="font-semibold">My App</span>
      </div>

      <div className="flex items-center gap-1">
        <LanguageSwitcher />
        <ThemeSwitcher />
        <WindowControls />
      </div>
    </header>
  );
}

目录