1. 引言：那个让人“劝退”的黑底白字

你写过（或者被迫维护过）这种 Shell 脚本吗？

echo "请输入提交类型 (fix/feat/docs):"
read TYPE
echo "请输入提交信息:"
read MSG
echo "确认提交吗？(y/n)"
read CONFIRM
if [ "$CONFIRM" != "y" ]; then exit 1; fi

痛点场景：

• 交互反人类：输错了还得重来，没有撤回键。

• 颜值负分：纯文本堆砌，毫无重点，看着就想睡觉。

• 容易出错：用户输入 Fix、fix 还是 FIX？还得写正则去校验。

解决方案： Gum。它不需要你学习 Go 或 Python，你依然在写 Bash 脚本，但每一行命令都能召唤出一个现代化的、可交互的 UI 组件（下拉框、搜索栏、加载动画）。

2. 概念拆解：Gum 是什么？

生活化类比：乐高积木 vs. 黏土

• 传统的 Shell 脚本 就像玩黏土。你想捏个输入框，得自己用 read 和 case 语句一点点捏，稍微用力不对就塌了（逻辑 bug）。

• Gum 就像乐高积木。它提供了一盒现成的、精美的零件。

  • 想要一个下拉菜单？拿一块 gum choose 积木插上去。

  • 想要一个多行文本框？拿一块 gum write 积木插上去。

  • 想要确认弹窗？拿一块 gum confirm 积木插上去。

你不需要知道积木内部怎么制造的，你只需要把它们拼在一起，就是一个漂亮的 App。

3. 动手实战：5 分钟写一个“极客版”Git 提交工具

我们来重写引言里那个丑陋的脚本。假设我们要写一个 git-commit.sh 脚本，规范团队的提交格式。

第一步：安装 Gum

# macOS / Linux (Homebrew)
brew install gum

# Arch Linux
pacman -S gum

第二步：编写脚本 (Magic Happens)

创建一个文件 better-commit.sh：

#!/bin/bash

# 1. 漂亮的标题 (gum style)
gum style \
	--foreground 212 --border-foreground 212 --border double \
	--align center --width 50 --margin "1 2" --padding "2 4" \
	"Git Commit Helper" "Powered by Gum"

# 2. 选择提交类型 (gum choose)
# 用户不用打字，直接用箭头键选择，回车确认
echo "👉 选择变更类型:"
TYPE=$(gum choose "fix: 修复 Bug" "feat: 新功能" "docs: 文档更新" "style: 格式调整")

# 3. 输入提交信息 (gum input)
# 自带占位符，看起来很现代
echo "📝 简短描述:"
SCOPE=$(gum input --placeholder "例如：user-login 模块...")

# 4. 详细描述 (gum write)
# 弹出一个类似于 nano 的编辑器，支持多行输入，Ctrl+D 保存
echo "📄 详细内容 (可选，Ctrl+D 保存):"
DESCRIPTION=$(gum write --placeholder "详细描述本次变更的内容...")

# 5. 最终确认 (gum confirm)
# 漂亮的 [Yes] / [No] 按钮
gum confirm "确认提交吗？" && {
    # 6. 加载动画 (gum spin)
    # 在执行 git commit 时显示旋转动画，而不是枯燥的光标
    gum spin --spinner dot --title "正在提交代码..." -- sleep 2 
    # 这里模拟耗时，实际替换为: git commit -m "$TYPE($SCOPE): $DESCRIPTION"
    
    gum style --foreground 10 "✅ 提交成功！"
} || {
    gum style --foreground 1 "❌ 已取消。"
}

代码解析：为什么这么优雅？

• gum choose：它是模糊搜索友好的。如果列表有 100 项，用户可以直接打字过滤，完全不用你写搜索逻辑。

• 组合性 (Composability)：注意 TYPE=$(gum choose ...) 这一行。Gum 的设计哲学是 Standard Input/Output。它把用户的选择直接吐到标准输出，你可以立即用变量接住它。

• gum spin：这是提升体验的神器。它把“卡住不动”变成了“正在处理”，极大地缓解了用户的焦虑。

4. 进阶深潜：那些让你显得很“高级”的技巧

场景一：不仅是输入，更是“过滤器” (gum filter)

如果你有一个很长的列表（比如所有的 Docker 容器），你想选一个删掉。

• 传统做法：docker ps -> 眼睛找 ID -> docker rm <ID>。

• Gum 做法：

  # 获取所有容器ID，传给 gum filter 进行模糊搜索，选中的结果传给 docker rm
  docker ps -a --format "{{.ID}}  {{.Image}}" | \
  gum filter --limit 1 --placeholder "Pick a container to kill..." | \
  awk '{print $1}' | \
  xargs docker rm

  这一行命令，直接给你生成了一个交互式的 Docker 容器管理器。

场景二：像 Markdown 一样渲染输出

脚本跑完了，想给用户看一个漂亮的总结报告？别用 echo 了。

# 它可以直接渲染 Markdown 格式
gum format \
	"# 部署报告" \
	"## 状态" \
	"- 服务 A: **运行中**" \
	"- 服务 B: **已停止**" \
	"> 请及时检查日志"

最佳实践：别忘了 Exit Code

Gum 的组件通常遵循标准：

• 用户正常确认/输入 -> 返回 0

• 用户按 Esc 或 Ctrl+C 取消 -> 返回 1 (或 130)

所以在脚本里，善用 || exit 1 可以让流程控制非常健壮。

# 如果用户在输入框按了 Esc，脚本直接退出，不继续执行
NAME=$(gum input --placeholder "Name") || exit 1

5. 总结与延伸

Gum 不是一种新语言，它是 Shell 脚本的“美颜滤镜”。

它证明了：实用主义（Shell）和美学（UI）并不冲突。如果你正在写任何需要“人”来操作的内部工具（部署脚本、数据库迁移脚本、环境配置脚本），请务必引入 Gum。