Headscale-WebUI用户手册：搜索、标签与主题定制的实用技巧

Headscale-WebUI用户手册：搜索、标签与主题定制的实用技巧

【免费下载链接】headscale-webuiA simple Headscale web UI for small-scale deployments.项目地址: https://gitcode.com/gh_mirrors/he/headscale-webui

Headscale-WebUI是一款专为小型部署打造的Headscale网页管理界面，提供直观的可视化操作体验。本文将详细介绍如何高效使用搜索功能快速定位资源、通过标签管理设备以及自定义主题提升使用体验，帮助新手用户轻松掌握这些实用技巧。

一、快速掌握全局搜索功能

Headscale-WebUI内置的全局搜索功能可以帮助你在海量设备和用户中迅速找到目标。无论是查找特定机器、用户还是路由信息，只需几个简单步骤即可完成。

1.1 激活搜索框

在页面顶部导航栏右侧，点击放大镜图标即可激活搜索框。你也可以通过按下键盘快捷键（如果有设置）快速调出搜索功能。

图1：Headscale-WebUI概览页面，红框处为搜索图标位置

1.2 使用搜索功能

在搜索框中输入关键词后，系统会实时匹配所有包含该关键词的内容。搜索范围包括机器名称、用户信息、IP地址等。匹配结果会即时显示在页面上，不匹配的内容会自动隐藏。

<!-- 搜索框HTML代码片段 --> <div id="nav-search" class="nav-search hidden"> <form> <div class="input-field"> <input id="search" type="search" required oninput="liveSearch()"> <label class="label-icon" for="search"><i class="material-icons">search</i></label> <i class="material-icons" onclick="hide_search()">close</i> </div> </form> </div>

1.3 搜索技巧

• 使用部分关键词进行模糊搜索，如输入"win"可匹配所有包含"win"的机器名称
• 搜索不区分大小写
• 搜索结果会高亮显示匹配的关键词
• 点击搜索框右侧的"×"图标可清除搜索内容并恢复显示所有内容

二、高效管理设备标签

标签功能是Headscale-WebUI中组织和分类设备的强大工具。通过为设备添加标签，你可以更方便地对设备进行分组管理和筛选。

2.1 查看设备标签

在" Machines"页面中，每个设备卡片底部都显示了该设备的标签。标签以灰色小方块显示，带有标签名称和删除按钮。

图2：设备标签展示，红框处为标签位置

2.2 添加和编辑标签

1. 在设备详情页面，找到"Tags"部分
2. 点击标签输入框，输入标签名称
3. 按Enter键确认添加标签
4. 标签名称中不能包含空格，系统会自动将空格替换为"-"

2.3 删除标签

点击标签右侧的"×"图标即可删除该标签。删除标签不会影响设备的其他设置。

2.4 通过标签筛选设备

在" Machines"页面，使用搜索框输入"tag:标签名"可以快速筛选出所有带有该标签的设备。例如，输入"tag:linux"将显示所有带有"linux"标签的设备。

三、个性化主题定制

Headscale-WebUI支持主题定制功能，你可以根据自己的喜好调整界面颜色和风格，提升使用体验。

3.1 打开主题设置

1. 点击导航栏右侧的"Settings"图标进入设置页面
2. 在设置页面中找到主题设置相关选项

图3：设置页面，红框处为主题设置入口

3.2 切换主题

在主题设置面板中，你可以选择系统提供的预设主题，或自定义主题颜色。选择后系统会立即应用新的主题设置，无需刷新页面。

3.3 自定义主题颜色

如果你需要更个性化的主题，可以通过修改CSS文件来自定义颜色方案：

1. 找到并编辑static/css/overrides.css文件
2. 修改对应的CSS变量值，例如：

:root { --primary-color: #2196F3; --secondary-color: #FFC107; --text-color: #333333; }

3. 保存文件后刷新页面即可看到效果

四、实用技巧总结

• 搜索功能：善用搜索可以快速定位设备和用户，节省管理时间
• 标签管理：为设备添加有意义的标签，如"server"、"mobile"、"linux"等，便于分类管理
• 主题定制：根据使用环境选择合适的主题，提高界面可读性和使用舒适度
• 快捷键：熟悉常用功能的快捷键可以显著提高操作效率

通过掌握以上技巧，你可以更高效地使用Headscale-WebUI管理你的Headscale部署，提升工作效率。如果需要更多帮助，请参考项目中的SETUP.md文件或查看官方文档。

希望本手册能帮助你更好地使用Headscale-WebUI！如有任何问题或建议，欢迎参与项目贡献和讨论。

【免费下载链接】headscale-webuiA simple Headscale web UI for small-scale deployments.项目地址: https://gitcode.com/gh_mirrors/he/headscale-webui