TitleBar

概述

TitleBar 是自定义窗口标题栏组件，提供：

Logo 和应用名称显示
窗口控制按钮（最小化、最大化、关闭）
双击最大化
拖拽移动窗口
主题和语言切换器

导入

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

Props

interface TitleBarProps {
  /**
   * 自定义 className
   */
  className?: string;
}

基本用法

TitleBar 通常由 Shell 组件自动渲染，无需手动使用。

如需单独使用：

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

function MyLayout() {
  return (
    <div>
      <TitleBar />
      <main>内容</main>
    </div>
  );
}

布局结构

┌─────────────────────────────────────────────────┐
│  [Logo] [App Name]   [Center]   [Lang][Theme][×]│
│  └─ left slot ─┘     └─center─┘  └─ right slot ─┘
└─────────────────────────────────────────────────┘

配置选项

通过 layout.titleBar 配置：

layout: {
  titleBar: {
    height: 40,                 // 高度（像素）
    showWindowControls: true,   // 显示窗口控制按钮
    draggable: true,            // 允许拖拽移动窗口
  },
},

插槽

通过 slots.titleBar 注入自定义内容：

slots: {
  titleBar: {
    left: <SearchInput />,      // 替换 Logo 和应用名
    center: <BreadcrumbNav />,  // 中间区域
    right: <UserMenu />,        // 替换主题/语言切换器
  },
},

自定义 Logo

import { MyLogo } from './components/Logo';

brand: {
  name: 'My App',
  logo: MyLogo,
},

Logo 组件接收 className prop：

function MyLogo({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24">
      {/* ... */}
    </svg>
  );
}

窗口控制

TitleBar 包含以下窗口控制功能：

功能	触发方式
最小化	点击最小化按钮
最大化/还原	点击最大化按钮或双击标题栏
关闭	点击关闭按钮
拖拽移动	拖拽标题栏区域

隐藏窗口控制

layout: {
  titleBar: {
    showWindowControls: false,
  },
},

禁用拖拽

layout: {
  titleBar: {
    draggable: false,
  },
},

覆盖 TitleBar 组件

完全自定义 TitleBar：

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

function CustomTitleBar({ className }: TitleBarProps) {
  return (
    <header className={className} data-tauri-drag-region>
      <div>My Custom Title Bar</div>
      <WindowControls />
    </header>
  );
}

export const config = {
  components: {
    TitleBar: CustomTitleBar,
  },
};

窗口焦点状态

TitleBar 会根据窗口焦点状态自动调整透明度：

窗口获得焦点：正常显示
窗口失去焦点：略微透明

注意事项

data-tauri-drag-region 属性使元素成为可拖拽区域。确保可点击的元素（按钮等）有 pointer-events-auto 类。

如果 tauri.conf.json 中 decorations: true，TitleBar 会与系统标题栏同时显示。建议设置 decorations: false 使用自定义标题栏。

目录