Quickshell Bar - GitHub Dark 主题

一个为 niri Wayland 合成器 设计的现代化状态栏，使用 Quickshell 框架和 GitHub Dark 主题配色。

---

📸 预览

┌─────────────────────────────────────────────────────────────────────────┐
│ [1] [2] [3] | 窗口标题              2026-02-24 | 14:30:25      [🔊] [📱] │
│  ▲  蓝色高亮                      分隔符         时钟          系统托盘  │
└─────────────────────────────────────────────────────────────────────────┘

---

✨ 功能特性

核心功能

• 🖥️ Workspace 切换器 - 显示 niri 工作区，点击切换，显示当前窗口标题
• 🕐 时钟模块 - ISO 格式日期时间显示 (YYYY-MM-DD | HH:mm:ss)
• 📱 系统托盘 - 支持左键激活、右键菜单、中键次级激活
• 🎨 GitHub Dark 主题 - 正宗的 GitHub 深色模式配色

技术特点

• 📦 模块化设计 - 服务层、组件层、配置层分离
• 🔧 配置集中管理 - 所有配置项在 Config.qml 中统一管理
• 🎯 服务层封装 - Niri IPC 调用封装在 NiriService.qml 中
• ♻️ 基础组件库 - 可复用的 BarButton 等基础组件

---

📦 安装

前置要求

依赖	版本	说明
niri	v25.08+	Wayland 合成器（需要 ext-workspace 协议支持）
quickshell	v0.2.0+	QML shell 框架
Qt6	6.6+	QML 运行环境

安装步骤

# 1. 克隆或复制项目到配置目录
cp -r /path/to/quickshell-bar ~/.config/quickshell/bar

# 2. 启动 quickshell
quickshell --config bar

# 或者直接使用路径运行
quickshell --path ~/.config/quickshell/bar/shell.qml

开机自启（systemd）

# ~/.config/systemd/user/quickshell.service
[Unit]
Description=Quickshell Bar
PartOf=graphical-session.target

[Service]
Type=simple
ExecStart=quickshell --config bar
Restart=on-failure

[Install]
WantedBy=graphical-session.target

systemctl --user enable quickshell.service
systemctl --user start quickshell.service

---

📁 项目结构

quickshell-bar/
├── shell.qml                    # 入口文件
├── Bar.qml                      # Bar 主容器
├── utils/
│   ├── Config.qml              # ⭐ 配置管理（颜色、尺寸、间距等）
│   └── Theme.qml               # 🎨 颜色主题（GitHub Dark）
├── services/
│   └── NiriService.qml         # 🔌 Niri IPC 服务层
└── widgets/
    ├── base/
    │   └── BarButton.qml       # 🔘 基础按钮组件
    ├── Clock.qml               # 🕐 时钟组件
    ├── Workspaces.qml          # 🖥️ Workspace 组件
    └── SystemTray.qml          # 📱 系统托盘组件

各模块职责

文件	职责
shell.qml	入口，加载 Bar 组件
Bar.qml	布局容器，组织各模块位置
utils/Config.qml	尺寸、间距、刷新间隔等配置
utils/Theme.qml	颜色定义
services/NiriService.qml	niri IPC 调用封装
widgets/base/BarButton.qml	可复用按钮组件
widgets/Clock.qml	时钟显示
widgets/Workspaces.qml	Workspace 切换器 + 窗口标题
widgets/SystemTray.qml	系统托盘

---

⚙️ 配置说明

修改主题颜色

编辑 utils/Theme.qml：

QtObject {
    // 主色调
    readonly property color accent: "#58a6ff"    // Workspace 高亮色
    readonly property color primary: "#238636"   // 成功状态色
    
    // 背景色
    readonly property color barBackground: "#0d1117"
    readonly property color widgetBackground: "#161b22"
    
    // 文字颜色
    readonly property color textPrimary: "#c9d1d9"
    readonly property color textSecondary: "#8b949e"
}

修改尺寸和间距

编辑 utils/Config.qml：

QtObject {
    // Bar 尺寸
    readonly property int barHeight: 36
    readonly property int barMargin: 8
    
    // 组件尺寸
    readonly property int widgetHeight: 26
    readonly property int trayIconSize: 20
    
    // 刷新间隔（毫秒）
    readonly property int refreshInterval: 200
    readonly property int clockInterval: 1000
    
    // 字体大小
    readonly property int fontSizeSmall: 12
    readonly property int fontSizeNormal: 13
}

显示控制

在 utils/Config.qml 中开关模块：

property bool showWorkspaces: true      // 显示 Workspace 切换器
property bool showClock: true           // 显示时钟
property bool showSystemTray: true      // 显示系统托盘
property bool showWindowTitle: true     // 显示窗口标题

---

🛠️ 开发指南

添加新模块

1. 在 widgets/ 下创建新组件

// widgets/Weather.qml
import QtQuick
import QtQuick.Layouts
import "../utils"

Item {
    implicitWidth: contentRow.implicitWidth
    implicitHeight: Config.widgetHeight
    
    RowLayout {
        id: contentRow
        Text {
            text: "🌤️ 25°C"
            color: Theme.textPrimary
        }
    }
}

2. 在 Bar.qml 中引入

import "widgets"

Scope {
    PanelWindow {
        // ...
        Weather {
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
        }
    }
}

添加新服务

1. 在 services/ 下创建服务

// services/WeatherService.qml
pragma Singleton
import Quickshell
import Quickshell.Io
import QtQuick

Singleton {
    id: root
    property string weather: "🌤️"
    property int temperature: 25
    
    Process {
        id: weatherProc
        command: ["curl", "-s", "wttr.in/?format=%c+%t"]
        stdout: StdioCollector {
            onStreamFinished: {
                root.weather = this.text
            }
        }
    }
    
    function refresh() {
        weatherProc.running = true
    }
}

2. 在组件中使用

import "../services"

Text {
    text: WeatherService.weather
}

修改布局

编辑 Bar.qml 调整模块位置：

PanelWindow {
    // 左侧区域
    Workspaces {
        anchors.left: parent.left
    }
    
    // 中间区域（自动居中）
    Clock {
        anchors.centerIn: parent
    }
    
    // 右侧区域
    RowLayout {
        anchors.right: parent.right
        
        SystemTray {}
        Clock {}  // 移到右侧
    }
}

---

🔌 Niri IPC 命令参考

NiriService.qml 中使用的 niri 命令：

命令	用途
niri msg -j workspaces	获取工作区列表（JSON）
niri msg -j focused-window	获取当前窗口信息
niri msg action focus-workspace N	切换到工作区 N
niri msg action focus-workspace-up	上一个工作区
niri msg action focus-workspace-down	下一个工作区

完整命令列表：niri msg action --help

---

🐛 常见问题

Q: 系统托盘不显示图标

A: 确保有状态通知图标的应用正在运行（如 NetworkManager、Pipewire 等）

Q: Workspace 切换器显示空白

A: 检查 niri 是否支持 ext-workspace 协议：niri msg workspaces

Q: 时钟不更新

A: 检查 Timer 是否正常运行，刷新间隔为 1000ms

Q: 颜色不生效

A: 清除 quickshell 缓存后重启：

pkill quickshell
quickshell --config bar

---

📝 自定义示例

示例 1：添加电池模块

// widgets/Battery.qml
import Quickshell
import Quickshell.Services.UPower
import QtQuick

Item {
    property var device: UPower.devices.find(d => d.isDisplayDevice)
    
    Text {
        text: device ? device.percentage + "%" : ""
        color: Theme.textSecondary
    }
}

示例 2：修改 Workspace 颜色

// utils/Theme.qml
readonly property color accent: "#e94560"  // 改为红色

示例 3：调整刷新频率

// utils/Config.qml
readonly property int refreshInterval: 500  // 从 200ms 改为 500ms

---

📚 参考资料

• Quickshell 官方文档
• niri GitHub
• GitHub Primer 设计系统
• DankMaterialShell - 参考项目

---

🤝 贡献

欢迎提交 Issue 和 Pull Request！

开发环境设置

# 克隆项目
git clone https://github.com/your-username/quickshell-bar.git

# 链接到配置目录
ln -s $(pwd)/quickshell-bar ~/.config/quickshell/bar

# 启动开发模式（热重载）
quickshell --config bar

---

📄 许可证

MIT License

---

🙏 致谢

• Quickshell 团队提供的优秀框架
• niri 合成器的 ext-workspace 协议支持
• GitHub Primer 设计系统的配色方案

---

Happy Coding! 🚀