布局配置

类型定义

interface LayoutConfig {
  /**
   * 侧边栏配置
   */
  sidebar?: {
    width?: number;
    position?: 'left' | 'right';
  };

  /**
   * 标题栏配置
   */
  titleBar?: {
    height?: number;
    showWindowControls?: boolean;
    draggable?: boolean;
  };
}

侧边栏配置

宽度

设置侧边栏宽度（单位：像素）：

layout: {
  sidebar: {
    width: 200,  // 默认 180
  },
},

位置

设置侧边栏位置：

layout: {
  sidebar: {
    position: 'left',  // 'left' | 'right'，默认 'left'
  },
},

标题栏配置

高度

设置标题栏高度（单位：像素）：

layout: {
  titleBar: {
    height: 48,  // 默认 40
  },
},

窗口控制按钮

显示或隐藏窗口控制按钮（最小化、最大化、关闭）：

layout: {
  titleBar: {
    showWindowControls: true,  // 默认 true
  },
},

拖拽区域

启用或禁用标题栏拖拽移动窗口：

layout: {
  titleBar: {
    draggable: true,  // 默认 true
  },
},

拖拽功能依赖 tauri.conf.json 中的 decorations: false 设置。

布局示意图

┌─────────────────────────────────────────────────┐
│                   TitleBar (40px)               │
│  [Logo] [App Name]              [Min][Max][×]   │
├────────────┬────────────────────────────────────┤
│            │                                    │
│  Sidebar   │         Main Content               │
│  (180px)   │                                    │
│            │                                    │
│  [Nav 1]   │                                    │
│  [Nav 2]   │                                    │
│  [Nav 3]   │                                    │
│            │                                    │
│            │                                    │
│            │                                    │
└────────────┴────────────────────────────────────┘

完整示例

layout: {
  sidebar: {
    width: 220,
    position: 'left',
  },
  titleBar: {
    height: 48,
    showWindowControls: true,
    draggable: true,
  },
},

右侧侧边栏示例

layout: {
  sidebar: {
    width: 200,
    position: 'right',  // 侧边栏在右侧
  },
},

布局效果：

┌─────────────────────────────────────────────────┐
│                   TitleBar                       │
├────────────────────────────────────┬────────────┤
│                                    │            │
│         Main Content               │  Sidebar   │
│                                    │            │
│                                    │            │
└────────────────────────────────────┴────────────┘

隐藏窗口控制按钮

在某些场景下（如使用系统原生标题栏），可以隐藏窗口控制按钮：

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

如果隐藏窗口控制按钮且 tauri.conf.json 中 decorations: false，用户将无法关闭窗口。

目录