imAtlas

Ghostty + 远程 Linux 终端开发环境全套配置

2026-10-10T07:19:00Z

本文档为标准落地配置方案，旨在供开发者或 AI Agent 直接读取并一键执行配置。配置完成后，将具备：

眼科级抗疲劳体验：微温浅抹茶豆沙绿护眼底色 + 墨迹黑字 + 焦糖琥珀色思考字，彻底告别反光与视疲劳；
1 步直达战场：敲 cx 自动免密登录、自动进工作区、自动挂入后台保活会话，配置与代码解耦，换服务器零成本；
跨机器剪贴板与文件瞬移：Mac 截图在服务器敲 pi 或 Yazi 敲 P 秒级落地；本地文件拖入终端直接拉取上传；
全能终端管理：Yazi 终端看图自动铺满并支持自由缩放、Glow 2.0 原生 Markdown 彩色宽幅排版、路径双击 c c 秒拷回 Mac；
跨 Worktree 智能文件直达 (wto)：解决 Claude Code 在独立 worktree 中改动代码后路径不匹配痛点，fzf 上下键直接挑选，回车秒开 Yazi 定位高亮。

架构拓扑

+-------------------------------------------------------------+
| Mac 本地工作站 (macOS)                                      |
|                                                             |
| 1. Ghostty 终端 (MesloLGL Nerd Font + 中值护眼豆沙绿)       |
| 2. 本地桥接服务: ~/.config/cx/mac_bridge.py (监听 127.0.0.1:19222)|
| 3. SSH 客户端: ~/.ssh/config (RemoteForward 19222)          |
| 4. Shell 极简引入: ~/.zshrc -> ~/.config/cx/ (工具/配置/桥接一体)|
+------------------------------+------------------------------+
                               |  SSH (反向隧道 19222)
                               v
+-------------------------------------------------------------+
| 远程 Linux 服务器 (Ubuntu / Debian / CentOS)                |
|                                                             |
| 1. Tmux 3.5a: 开启 allow-passthrough (Kitty 图形穿透)       |
| 2. 交互工具: pi (剪贴板图), up (拖拽上传), cb (拷回 Mac),     |
|             wto (跨 Worktree 智能检索直通 Yazi)              |
| 3. Yazi (v26.9+): zoom 缩放、piper + glow 2.0、copy-mac     |
+-------------------------------------------------------------+

参数占位符约定：
- <SERVER_HOST>：服务器 SSH 别名（示例：dev-server）
- <SERVER_IP>：服务器真实 IP（示例：10.0.0.10）
- <REMOTE_USER>：远程服务器登录用户名（示例：developer）
- <PROJECT_NAME>：默认主项目目录名（示例：my_project）

第一部分：Mac 本地配置（AI 自动执行指南）

1.1 安装必要 CLI 工具

通过 Homebrew 安装剪贴板提取器及终端工具：

brew install pngpaste glow lazygit

1.2 配置 Ghostty 终端

写入或覆盖 ~/.config/ghostty/config：

# ==============================================================================
# Ghostty 配置 - 眼科防疲劳浅豆沙绿定制版
# ==============================================================================

# 1. 主题与色彩（经典草木豆沙绿中值色 #c1d9c3，明度 80%，防反光不刺眼）
background = #c1d9c3
foreground = #1c2c21
cursor-color = #286349
cursor-text = #c1d9c3
selection-background = #a2cca6
selection-foreground = #1c2c21

# ANSI 16 色调色板（墨水纸感：黄色调为深焦糖色 #7a3e00，确保 Claude 思考文字凝实清晰）
palette = 0=#1c2c21
palette = 1=#ba3838
palette = 2=#2a752e
palette = 3=#7a3e00
palette = 4=#175983
palette = 5=#762c8e
palette = 6=#10766d
palette = 7=#cedecf
palette = 8=#44584a
palette = 9=#cf2828
palette = 10=#328537
palette = 11=#7a3e00
palette = 12=#176ebd
palette = 13=#871fa2
palette = 14=#008273
palette = 15=#f0f7f0

# 智能对比度防护（确保状态栏小字和辅助灰色绝对清晰）
minimum-contrast = 1.15

# 2. 窗口外观（浅色模式设为 1.0 纯色不透，杜绝桌面杂色重影干扰）
background-opacity = 1.0
background-blur = false
window-padding-x = 14
window-padding-y = 12
window-padding-balance = true
macos-titlebar-style = transparent

# 3. 字体配置
font-family = MesloLGL Nerd Font
font-size = 14.5

# 4. 光标与按键
cursor-style = block
cursor-style-blink = false
macos-option-as-alt = true

# 5. 滚动与控速（驯服触控板暴冲）
scrollback-limit = 100000
mouse-scroll-multiplier = precision:1,discrete:1

# 6. 剪贴板交互
clipboard-read = allow
clipboard-write = allow
copy-on-select = clipboard

# 7. 终端环境
term = xterm-256color

# 8. 分屏快捷键
keybind = super+d=new_split:right
keybind = super+shift+d=new_split:down
keybind = super+[=goto_split:previous
keybind = super+]=goto_split:next
keybind = super+shift+enter=toggle_split_zoom
keybind = super+ctrl+==equalize_splits
keybind = super+enter=unbind

1.3 部署 Mac 本地跨端桥接服务

创建本地桥接脚本 ~/.config/cx/mac_bridge.py：

#!/usr/bin/env python3
import http.server
import subprocess
import os
import urllib.parse
import sys

PORT = 19222

def detect_clipboard():
    # 1. 尝试检测 Finder 复制的文件 (Cmd+C)
    script = """
    try
        set singleItem to (the clipboard as «class furl»)
        return POSIX path of singleItem
    on error
        try
            set theList to (the clipboard as list)
            set res to {}
            repeat with itm in theList
                try
                    set end of res to POSIX path of itm
                end try
            end repeat
            set AppleScript's text item delimiters to linefeed
            return res as text
        on error
            return ""
        end try
    end try
    """
    try:
        proc = subprocess.run(['osascript', '-e', script], capture_output=True, text=True, timeout=2)
        out = proc.stdout.strip()
        if out:
            lines = [l.strip() for l in out.splitlines() if l.strip()]
            valid = [p for p in lines if os.path.exists(p)]
            if valid:
                return {
                    "type": "files",
                    "files": [{"path": p, "name": os.path.basename(p), "size": os.path.getsize(p)} for p in valid]
                }
    except Exception:
        pass

    # 2. 尝试检测剪贴板原生图片 (截屏数据)
    try:
        png_check = subprocess.run(['/opt/homebrew/bin/pngpaste', '-'], stdout=subprocess.PIPE, stderr=subprocess.PIPE, timeout=1)
        if png_check.returncode == 0 and len(png_check.stdout) > 0:
            return {"type": "image", "size": len(png_check.stdout)}
    except Exception:
        pass

    # 3. 尝试检测 pbpaste 文本内容是否指向有效本地文件
    try:
        proc = subprocess.run(['pbpaste'], capture_output=True, text=True, timeout=1)
        text = proc.stdout.strip()
        if text.startswith('/') and '\n' not in text and os.path.exists(text):
            return {
                "type": "files",
                "files": [{"path": text, "name": os.path.basename(text), "size": os.path.getsize(text)}]
            }
        elif text:
            return {"type": "text", "preview": text[:60]}
    except Exception:
        pass

    return {"type": "empty"}

class BridgeHandler(http.server.BaseHTTPRequestHandler):
    def do_GET(self):
        parsed = urllib.parse.urlparse(self.path)
        path = parsed.path

        if path == '/ping':
            self.send_response(200)
            self.end_headers()
            self.wfile.write(b'pong')
            return

        elif path == '/clipboard-status':
            status = detect_clipboard()
            body = json.dumps(status, ensure_ascii=False).encode('utf-8')
            self.send_response(200)
            self.send_header('Content-Type', 'application/json; charset=utf-8')
            self.send_header('Content-Length', str(len(body)))
            self.end_headers()
            self.wfile.write(body)
            return

        elif path == '/clipboard-image':
            try:
                proc = subprocess.run(['/opt/homebrew/bin/pngpaste', '-'], stdout=subprocess.PIPE, stderr=subprocess.PIPE)
                if proc.returncode == 0 and len(proc.stdout) > 0:
                    self.send_response(200)
                    self.send_header('Content-Type', 'image/png')
                    self.send_header('Content-Length', str(len(proc.stdout)))
                    self.end_headers()
                    self.wfile.write(proc.stdout)
                else:
                    self.send_response(404)
                    self.send_header('Content-Type', 'text/plain; charset=utf-8')
                    self.end_headers()
                    self.wfile.write(b'Clipboard does not contain an image')
            except Exception as e:
                self.send_response(500)
                self.send_header('Content-Type', 'text/plain; charset=utf-8')
                self.end_headers()
                self.wfile.write(str(e).encode())

        elif path == '/fetch-file':
            query = urllib.parse.parse_qs(parsed.query)
            filepath = query.get('path', [''])[0]
            filepath = os.path.expanduser(filepath)
            
            if not os.path.exists(filepath):
                self.send_response(404)
                self.send_header('Content-Type', 'text/plain; charset=utf-8')
                self.end_headers()
                self.wfile.write(f'File not found: {filepath}'.encode())
                return
            
            try:
                f = open(filepath, 'rb')
                size = os.path.getsize(filepath)
                self.send_response(200)
                self.send_header('Content-Type', 'application/octet-stream')
                self.send_header('Content-Length', str(size))
                self.end_headers()
                with f:
                    while chunk := f.read(65536):
                        self.wfile.write(chunk)
            except PermissionError as e:
                self.send_response(403)
                self.send_header('Content-Type', 'text/plain; charset=utf-8')
                self.end_headers()
                self.wfile.write(f'Permission denied on Mac: {e}'.encode())
            except Exception as e:
                self.send_response(500)
                self.send_header('Content-Type', 'text/plain; charset=utf-8')
                self.end_headers()
                self.wfile.write(str(e).encode())

        elif path == '/open-remote-vscode':
            query = urllib.parse.parse_qs(parsed.query)
            remote_path = query.get('path', [''])[0]
            host = query.get('host', ['<SERVER_HOST>'])[0]
            if remote_path:
                try:
                    url = f"vscode://vscode-remote/ssh-remote+{host}{remote_path}"
                    subprocess.Popen(['open', url])
                    self.send_response(200)
                    self.end_headers()
                    self.wfile.write(b'ok')
                    return
                except Exception as e:
                    self.send_response(500)
                    self.end_headers()
                    self.wfile.write(str(e).encode())
                    return
            else:
                self.send_response(400)
                self.end_headers()
                return

        elif path == '/open-browser':
            query = urllib.parse.parse_qs(parsed.query)
            target_url = query.get('url', [''])[0]
            if target_url and (target_url.startswith('http://') or target_url.startswith('https://')):
                try:
                    subprocess.Popen(['open', target_url])
                    self.send_response(200)
                    self.end_headers()
                    self.wfile.write(b'ok')
                    return
                except Exception as e:
                    self.send_response(500)
                    self.end_headers()
                    self.wfile.write(str(e).encode())
                    return
            else:
                self.send_response(400)
                self.end_headers()
                self.wfile.write(b'invalid url')
                return

        elif path == '/preview':
            preview_file = '/tmp/wto_preview.html'
            if os.path.exists(preview_file):
                try:
                    with open(preview_file, 'rb') as f:
                        content = f.read()
                    self.send_response(200)
                    self.send_header('Content-Type', 'text/html; charset=utf-8')
                    self.send_header('Content-Length', str(len(content)))
                    self.end_headers()
                    self.wfile.write(content)
                    return
                except Exception as e:
                    self.send_response(500)
                    self.send_header('Content-Type', 'text/plain; charset=utf-8')
                    self.end_headers()
                    self.wfile.write(str(e).encode())
                    return
            else:
                self.send_response(404)
                self.send_header('Content-Type', 'text/plain; charset=utf-8')
                self.end_headers()
                self.wfile.write(b'No preview available')
                return

        else:
            self.send_response(404)
            self.end_headers()

    def do_POST(self):
        parsed = urllib.parse.urlparse(self.path)
        if parsed.path == '/set-clipboard':
            length = int(self.headers.get('Content-Length', 0))
            data = self.rfile.read(length)
            try:
                proc = subprocess.Popen(['pbcopy'], stdin=subprocess.PIPE)
                proc.communicate(input=data)
                self.send_response(200)
                self.end_headers()
                self.wfile.write(b'ok')
            except Exception as e:
                self.send_response(500)
                self.end_headers()
                self.wfile.write(str(e).encode())
        elif parsed.path == '/preview-upload':
            length = int(self.headers.get('Content-Length', 0))
            data = self.rfile.read(length)
            try:
                preview_file = '/tmp/wto_preview.html'
                with open(preview_file, 'wb') as f:
                    f.write(data)
                
                preview_url = f"http://127.0.0.1:{PORT}/preview"
                subprocess.Popen(['open', preview_url])
                
                self.send_response(200)
                self.send_header('Content-Type', 'application/json; charset=utf-8')
                self.end_headers()
                self.wfile.write(json.dumps({'url': preview_url}).encode('utf-8'))
            except Exception as e:
                self.send_response(500)
                self.send_header('Content-Type', 'text/plain; charset=utf-8')
                self.end_headers()
                self.wfile.write(str(e).encode())
        elif parsed.path == '/save-file':
            query = urllib.parse.parse_qs(parsed.query)
            raw_filename = query.get('filename', ['downloaded_file'])[0]
            clean_filename = os.path.basename(raw_filename) or 'downloaded_file'
            dest_dir = os.path.expanduser('~/Downloads')
            os.makedirs(dest_dir, exist_ok=True)
            
            # 重名处理：若已存在则追加 (1), (2) 防覆盖
            name, ext = os.path.splitext(clean_filename)
            target_path = os.path.join(dest_dir, clean_filename)
            counter = 1
            while os.path.exists(target_path):
                target_path = os.path.join(dest_dir, f"{name} ({counter}){ext}")
                counter += 1

            length = int(self.headers.get('Content-Length', 0))
            remaining = length
            try:
                with open(target_path, 'wb') as f:
                    while remaining > 0:
                        chunk_size = min(65536, remaining)
                        chunk = self.rfile.read(chunk_size)
                        if not chunk:
                            break
                        f.write(chunk)
                        remaining -= len(chunk)

                # 自动在 Mac Finder 中高亮选中该文件
                reveal = query.get('reveal', ['1'])[0]
                if reveal != '0':
                    subprocess.Popen(['open', '-R', target_path])

                self.send_response(200)
                self.send_header('Content-Type', 'application/json; charset=utf-8')
                self.end_headers()
                resp = {
                    'ok': True,
                    'filename': os.path.basename(target_path),
                    'path': target_path,
                    'size': os.path.getsize(target_path)
                }
                self.wfile.write(json.dumps(resp, ensure_ascii=False).encode('utf-8'))
            except Exception as e:
                self.send_response(500)
                self.send_header('Content-Type', 'text/plain; charset=utf-8')
                self.end_headers()
                self.wfile.write(str(e).encode('utf-8'))
        else:
            self.send_response(404)
            self.end_headers()

    def log_message(self, format, *args):
        pass

if __name__ == '__main__':
    server = http.server.ThreadingHTTPServer(('127.0.0.1', PORT), BridgeHandler)
    server.serve_forever()

赋权、创建软链并启动：

chmod +x ~/.config/cx/mac_bridge.py
ln -sf ~/.config/cx/mac_bridge.py ~/.local/bin/mac_bridge.py
pkill -f mac_bridge.py 2>/dev/null || true
nohup python3 ~/.config/cx/mac_bridge.py >/dev/null 2>&1 &

1.4 配置 SSH 客户端反向转发 (`~/.ssh/config`)

在 ~/.ssh/config 中针对目标服务器添加配置（请替换 <SERVER_HOST>、<SERVER_IP>、<REMOTE_USER>）：

Host <SERVER_HOST>
    HostName <SERVER_IP>
    User <REMOTE_USER>
    RequestTTY yes
    RemoteForward 19222 127.0.0.1:19222

1.5 配置 Mac 本地 Shell 直达函数与解耦配置 (`cx`)

为了在更换服务器或换项目时彻底解耦、无需频繁修改 ~/.zshrc，我们将连接目标参数独立抽取到单独的配置文件中。

1.5.1 创建目标服务器配置文件 (`~/.config/cx/config`)

mkdir -p ~/.config/cx
cat << 'EOF' > ~/.config/cx/config
# ==============================================================================
# cx 远程开发环境配置 (~/.config/cx/config)
# 以后换服务器或换项目，直接修改这里的参数即可！
# ==============================================================================

# SSH 目标主机别名（对应 ~/.ssh/config 里的 Host）
CX_HOST="<SERVER_HOST>"

# 远程默认主项目名称
CX_PROJECT="<PROJECT_NAME>"

# 远程工作区主目录
CX_REMOTE_WORKSPACES="$HOME/workspaces"

# 远程环境入口脚本（若不存在自动降级）
CX_REMOTE_BASH="~/.local/bin/azbash"
EOF

1.5.2 创建独立工具脚本 (`~/.config/cx/cx.zsh`)

将快捷别名与 cx 完整函数写入独立文件，彻底避免频繁修改 ~/.zshrc：

cat << 'EOF' > ~/.config/cx/cx.zsh
# ==============================================================================
# cx 远程终端与开发工具包 (~/.config/cx/cx.zsh)
# 集中管理 cx 函数、快捷别名及本地跨机器桥接守护服务
# ==============================================================================

# 1. 自动守护本地跨机器桥接服务 (监听 127.0.0.1:19222)
_cx_bridge_script="$HOME/.config/cx/mac_bridge.py"
pgrep -f "mac_bridge.py" >/dev/null || ([ -f "$_cx_bridge_script" ] && nohup python3 "$_cx_bridge_script" >/dev/null 2>&1 & disown)

# 2. 本地常用快捷别名与函数
alias lg='lazygit'

md() {
  if [ -z "$1" ]; then
    glow
  else
    glow -p "$@"
  fi
}
alias gw='glow'

# 3. cx 远程开发极速直达函数 (读取同目录 config 与 mac_bridge.py)
unalias cx 2>/dev/null || true
function cx() {
  local cfg_dir="$HOME/.config/cx"
  local cfg_file="$cfg_dir/config"
  local bridge_script="$cfg_dir/mac_bridge.py"

  # 自动保证桥接运行
  pgrep -f "mac_bridge.py" >/dev/null || ([ -f "$bridge_script" ] && nohup python3 "$bridge_script" >/dev/null 2>&1 & disown)

  local default_host="<SERVER_HOST>"
  local default_project="<PROJECT_NAME>"
  local default_workspaces="$HOME/workspaces"
  local default_bash=""

  [ -f "$cfg_file" ] && source "$cfg_file"

  local host="${CX_HOST:-$default_host}"
  local project="${CX_PROJECT:-$default_project}"
  local remote_workspaces="${CX_REMOTE_WORKSPACES:-$default_workspaces}"
  local remote_bash="${CX_REMOTE_BASH:-$default_bash}"

  local arg="${1:-$project}"

  # 帮助命令支持: -h, --help, help, h, --hlep
  if [[ "$arg" == "-h" || "$arg" == "--help" || "$arg" == "help" || "$arg" == "h" || "$arg" == "--hlep" ]]; then
    cat << EOF
cx - 远程开发环境极速直达工具 (目标服务器: $host)

用法:
  cx                    连入/恢复默认主会话 ($project)
  cx new                自动新建序号递增的全新独立会话 (如 ${project}_1)
  cx <序号>             连入/新建对应序号会话 (例: cx 1 -> ${project}_1)
  cx <名字>             连入/新建指定名称会话 (例: cx test)
  cx ls                 查看当前远程所有后台保活会话 (别名: list)
  cx k                  弹出交互式菜单挑选关闭会话 (别名: kill)
  cx k <名字>           直接关闭指定后台会话
  cx ka                 一键关闭全部后台保活会话 (别名: kill-all)
  cx bridge             查看本地跨机器传输桥接服务运行状态
  cx bridge restart     一键重启本地传输桥接服务 (监听 127.0.0.1:19222)
  cx raw                普通 SSH 直连服务器 (不接管 tmux，别名: ssh)
  cx config             查看/配置目标服务器参数 ($cfg_file)
  cx -h, h, help        显示本帮助说明 (别名: --help)

常用场景:
  • 日常开发/上班:       直接敲 cx
  • 另起独立新任务:     敲 cx new 或 cx 1
  • 查后台正在跑什么:   敲 cx ls
  • 关掉用完的会话:     敲 cx k
  • 本地桥接异常/卡死: 敲 cx bridge restart
  • 更换目标服务器:     敲 cx config 修改配置
EOF
    return 0
  fi

  # 桥接服务生命周期管理
  if [[ "$arg" == "bridge" || "$arg" == "br" ]]; then
    local sub="${2:-status}"
    if [[ "$sub" == "restart" || "$sub" == "re" ]]; then
      echo "⚡ 正在重启本地传输桥接服务..."
      pkill -f "mac_bridge.py" 2>/dev/null || true
      sleep 0.5
      if [ -f "$bridge_script" ]; then
        nohup python3 "$bridge_script" >/dev/null 2>&1 & disown
        sleep 0.5
      fi
    elif [[ "$sub" == "stop" ]]; then
      pkill -f "mac_bridge.py" 2>/dev/null && echo "✔ 本地传输桥接服务已停止" || echo "⚠️ 桥接服务未在运行"
      return 0
    elif [[ "$sub" == "start" ]]; then
      if pgrep -f "mac_bridge.py" >/dev/null; then
        echo "✔ 本地传输桥接服务已在运行中"
      else
        [ -f "$bridge_script" ] && nohup python3 "$bridge_script" >/dev/null 2>&1 & disown
        sleep 0.5
        echo "✔ 本地传输桥接服务已启动"
      fi
      return 0
    fi

    # 打印状态
    local pids=$(pgrep -f "mac_bridge.py" | tr '\n' ' ')
    echo "📄 桥接服务脚本: $bridge_script"
    if [ -n "$pids" ]; then
      local probe=$(curl -s --max-time 1 http://127.0.0.1:19222/ping 2>/dev/null)
      if [ "$probe" = "pong" ]; then
        echo "✔ 运行状态: 正在运行 (PID: $pids, 端口 19222 响应: $probe)"
      else
        echo "⚠️ 运行状态: 进程存在 (PID: $pids) 但端口 19222 未响应，可执行 cx bridge restart 重试"
      fi
    else
      echo "✖ 运行状态: 未运行 (可执行 cx bridge restart 启动)"
    fi
    return 0
  fi

  if [[ "$arg" == "config" || "$arg" == "conf" ]]; then
    echo "📄 当前 cx 配置文件路径: $cfg_file"
    echo "----------------------------------------"
    if [ -f "$cfg_file" ]; then
      cat "$cfg_file"
    else
      echo "⚠️ 配置文件尚未创建，当前使用内置默认值: host=$host, project=$project"
    fi
    echo "----------------------------------------"
    echo "💡 提示：使用编辑器直接修改该文件即可随时切换目标服务器/项目！"
    return 0
  fi

  if [[ "$arg" == "ls" || "$arg" == "list" ]]; then
    ssh -q -o ClearAllForwardings=yes -o RemoteCommand=none "$host" "bash -c 'echo \"=== 当前后台保活会话 ===\"; tmux ls 2>/dev/null || echo \"暂无运行中的会话\"; echo \"\"; echo \"💡 连接提示: cx 默认主会话 | cx new 开新会话 | cx 1/2/3 进对应序号 | cx <名字> 进指定会话 | cx -h 查看完整帮助\"'"
  elif [[ "$arg" == "kill" || "$arg" == "k" ]]; then
    local target="$2"
    if [ -n "$target" ]; then
      ssh -q -o ClearAllForwardings=yes -o RemoteCommand=none -t "$host" "bash -i -c 'tkill $target'"
    else
      ssh -q -o ClearAllForwardings=yes -o RemoteCommand=none -t "$host" "bash -i -c 'tkill'"
    fi
  elif [[ "$arg" == "kill-all" || "$arg" == "ka" ]]; then
    ssh -q -o ClearAllForwardings=yes -o RemoteCommand=none "$host" "bash -c 'tmux kill-server 2>/dev/null; echo \"✔ 已关闭全部后台保活会话\"'"
  elif [[ "$arg" == "raw" || "$arg" == "ssh" ]]; then
    ssh "$host"
  elif [[ "$arg" == "new" || "$arg" == "add" ]]; then
    ssh -o LogLevel=ERROR -o RemoteCommand=none -t "$host" "bash -c '
      i=1
      while tmux has-session -t \"${project}_\$i\" 2>/dev/null; do
        i=\$((i+1))
      done
      sess=\"${project}_\$i\"
      echo \"⚡ 创建全新独立会话: \$sess\"
      cd \"$remote_workspaces/$project\" 2>/dev/null || cd ~
      exec tmux new-session -s \"\$sess\"
    '"
  else
    local sess="$arg"
    if [[ "$arg" =~ ^[0-9]+$ ]]; then
      sess="${project}_${arg}"
    fi
    ssh -o LogLevel=ERROR -o RemoteCommand=none -t "$host" "bash -c '
      if tmux has-session -t \"$sess\" 2>/dev/null; then
        exec tmux attach -t \"$sess\"
      fi
      proj_dir=\"$remote_workspaces/$arg\"
      [ ! -d \"\$proj_dir\" ] && proj_dir=\"$remote_workspaces/$project\"
      [ ! -d \"\$proj_dir\" ] && proj_dir=\"\$HOME\"
      cd \"\$proj_dir\" && exec tmux new-session -s \"$sess\"
    '"
  fi
}
EOF

1.5.3 在 Mac `~/.zshrc` 中单行载入

在 ~/.zshrc 末尾仅需追加一行保护加载语句，即可完成全套工具链挂载：

# 加载 cx 远程终端与开发工具包
[ -f "$HOME/.config/cx/cx.zsh" ] && source "$HOME/.config/cx/cx.zsh"

第二部分：远程服务器端配置（AI 自动执行指南）

在目标 Linux 服务器执行以下步骤（在当前用户环境下执行，无需 root 权限）。

2.1 部署 Tmux 3.5a 与 ImageMagick 桥接

下载并解压 tmux 3.5a 运行包：

mkdir -p ~/.local/bin ~/.local/share /tmp/tmux_install
cd /tmp/tmux_install
curl -sL https://github.com/nelsonenzo/tmux-appimage/releases/download/3.5a/tmux.appimage -o tmux.appimage
chmod +x tmux.appimage
./tmux.appimage --appimage-extract
rm -rf ~/.local/share/tmux-3.5a
mv squashfs-root ~/.local/share/tmux-3.5a
rm -rf /tmp/tmux_install

# 编写 wrapper 脚本
cat << 'BASH' > ~/.local/bin/tmux
#!/bin/bash
DIR="$HOME/.local/share/tmux-3.5a"
export TERMINFO="$DIR/usr/share/terminfo"
export LD_LIBRARY_PATH="$DIR/usr/lib:$LD_LIBRARY_PATH"
exec "$DIR/usr/bin/tmux" "$@"
BASH
chmod +x ~/.local/bin/tmux

# 建立 ImageMagick 7 兼容软链
which convert >/dev/null && ln -sf $(which convert) ~/.local/bin/magick

2.2 配置 Tmux (`~/.tmux.conf`)

写入 ~/.tmux.conf：

# 1. 开启鼠标支持与高历史缓冲区
set -g mouse on
set -g history-limit 50000

# 2. 终端类型与真彩色
set -g default-terminal "xterm-256color"
set -as terminal-overrides ",*:Tc"

# 3. 编号从 1 开始
set -g base-index 1
setw -g pane-base-index 1
set -g renumber-windows on

# 4. 状态栏样式
set -g status-style "bg=#181825,fg=#cdd6f4"
set -g status-left "#[fg=#89b4fa,bold] [#S] "
set -g status-right "#[fg=#a6adc8]%Y-%m-%d %H:%M "
setw -g window-status-current-style "fg=#a6e3a1,bold"

# 5. 保留默认前缀键 Ctrl+b（严禁占用 Ctrl+a，确保命令行 Ctrl+a 跳行首、Ctrl+e 跳行末完好无损）
# （无需额外配置，tmux 默认前缀即为 Ctrl+b）

# 6. 驯服触控板滚轮速度（平稳降至 2 行）
bind-key -T copy-mode WheelUpPane select-pane \; send-keys -X -N 2 scroll-up
bind-key -T copy-mode WheelDownPane select-pane \; send-keys -X -N 2 scroll-down
bind-key -T copy-mode-vi WheelUpPane select-pane \; send-keys -X -N 2 scroll-up
bind-key -T copy-mode-vi WheelDownPane select-pane \; send-keys -X -N 2 scroll-down

# 7. 开启图形协议透传 (Kitty Graphics / Sixel 原生看图必备)
set -g allow-passthrough on
set -ga update-environment TERM
set -ga update-environment TERM_PROGRAM

2.3 部署服务器端跨端工具 (`pi`, `pf`, `up`, `down`, `cb`, `wto`)

在 ~/.local/bin/ 创建工具：

1. ~/.local/bin/pi & ~/.local/bin/pf（智能粘贴：支持 Mac 截图图片 + Finder 复制的文件）

cat << 'BASH' > ~/.local/bin/pi
#!/bin/bash
# ==============================================================================
# pi (Paste It) / pf (Paste File)
# 智能粘贴：支持 Mac 截图图片、Mac Finder 复制的文件 (Cmd+C)、Mac 剪贴板文件路径
# ==============================================================================

STATUS_JSON=$(curl -s --max-time 3 http://127.0.0.1:19222/clipboard-status 2>/dev/null)

if [ -z "$STATUS_JSON" ]; then
    echo -e "\033[31m✘ [Mac ➔ Server]\033[0m 无法连接 Mac 本地桥接服务 (HTTP 19222)"
    exit 1
fi

TYPE=$(echo "$STATUS_JSON" | python3 -c "import sys, json; data=json.load(sys.stdin); print(data.get('type', 'empty'))" 2>/dev/null)

if [ "$TYPE" = "files" ]; then
    echo "$STATUS_JSON" | python3 -c "
import sys, json, urllib.parse, subprocess, os

data = json.load(sys.stdin)
files = data.get('files', [])
custom_name = sys.argv[1] if len(sys.argv) > 1 else ''

for i, f in enumerate(files):
    remote_path = f['path']
    orig_name = f['name']
    target_name = custom_name if (custom_name and len(files) == 1) else orig_name
    
    encoded = urllib.parse.quote(remote_path)
    url = f'http://127.0.0.1:19222/fetch-file?path={encoded}'
    
    res = subprocess.run(['curl', '-s', '-o', target_name, '-w', '%{http_code}', url], capture_output=True, text=True)
    http_code = res.stdout.strip()
    
    if http_code == '200' and os.path.exists(target_name):
        size = os.path.getsize(target_name)
        if size < 1024:
            size_str = f'{size} B'
        elif size < 1024 * 1024:
            size_str = f'{size / 1024:.1f} KB'
        else:
            size_str = f'{size / (1024 * 1024):.1f} MB'
        print(f'\033[32m✔ [Mac ➔ Server]\033[0m 成功从 Mac 剪贴板粘贴文件: \033[1m{target_name}\033[0m ({size_str})')
    else:
        print(f'\033[31m✘ [Mac ➔ Server]\033[0m 拉取文件失败: {orig_name} (HTTP {http_code})')
" "$1"

elif [ "$TYPE" = "image" ]; then
    TARGET="$1"
    [ -z "$TARGET" ] && TARGET="clip_$(date +%Y%m%d_%H%M%S).png"
    
    HTTP_CODE=$(curl -s -o "$TARGET" -w "%{http_code}" http://127.0.0.1:19222/clipboard-image 2>/dev/null || echo "000")
    if [ "$HTTP_CODE" = "200" ]; then
        SIZE=$(ls -lh "$TARGET" | awk '{print $5}')
        echo -e "\033[32m✔ [Mac ➔ Server]\033[0m 成功从剪贴板粘贴图片: \033[1m$TARGET\033[0m ($SIZE)"
    else
        rm -f "$TARGET"
        echo -e "\033[31m✘ [Mac ➔ Server]\033[0m 粘贴图片失败 (HTTP $HTTP_CODE)"
        exit 1
    fi

elif [ "$TYPE" = "text" ]; then
    PREVIEW=$(echo "$STATUS_JSON" | python3 -c "import sys, json; print(json.load(sys.stdin).get('preview', ''))")
    echo -e "\033[33mℹ [Mac ➔ Server]\033[0m Mac 剪贴板里是文本内容，非文件或图片:"
    echo -e "  \033[90m\"$PREVIEW\"\033[0m"
    exit 0

else
    echo -e "\033[33m⚠ [Mac ➔ Server]\033[0m Mac 剪贴板里当前没有文件或图片数据"
    exit 1
fi
BASH
chmod +x ~/.local/bin/pi
ln -sf ~/.local/bin/pi ~/.local/bin/pf

2. ~/.local/bin/up（接收拖拽文件秒传）

cat << 'BASH' > ~/.local/bin/up
#!/bin/bash
if [ -z "$1" ]; then
    echo -e "使用方法: \033[1mup [直接把 Mac 上的图片或文件拖到这里] 回车\033[0m"
    exit 1
fi

for FILEPATH in "$@"; do
    FILEPATH=$(echo "$FILEPATH" | sed -e "s/^['\"]//" -e "s/['\"]$//")
    FILENAME=$(basename "$FILEPATH")
    
    echo -e "正在从 Mac 拉取文件: \033[34m$FILENAME\033[0m ..."
    ENCODED_PATH=$(python3 -c "import urllib.parse, sys; print(urllib.parse.quote(sys.argv[1]))" "$FILEPATH")
    
    HTTP_CODE=$(curl -s -o "$FILENAME" -w "%{http_code}" "http://127.0.0.1:19222/fetch-file?path=$ENCODED_PATH" 2>/dev/null)
    
    if [ "$HTTP_CODE" = "200" ]; then
        SIZE=$(ls -lh "$FILENAME" | awk '{print $5}')
        echo -e "\033[32m✔ [Mac ➔ Server]\033[0m 上传成功: \033[1m$FILENAME\033[0m ($SIZE)"
    elif [ "$HTTP_CODE" = "404" ]; then
        rm -f "$FILENAME"
        echo -e "\033[31m✘ [Mac ➔ Server]\033[0m Mac 本地找不到该文件: $FILEPATH"
    elif [ "$HTTP_CODE" = "403" ]; then
        rm -f "$FILENAME"
        echo -e "\033[31m✘ [Mac ➔ Server]\033[0m Mac 系统权限拒绝读取该文件: $FILEPATH"
    else
        rm -f "$FILENAME"
        echo -e "\033[31m✘ [Mac ➔ Server]\033[0m 拉取失败 (HTTP $HTTP_CODE)"
    fi
done
BASH
chmod +x ~/.local/bin/up

3. ~/.local/bin/cb（把文本或管道写入 Mac 剪贴板）

cat << 'BASH' > ~/.local/bin/cb
#!/bin/bash
if [ -n "$1" ]; then
    echo -n "$1" | curl -s -X POST --data-binary @- http://127.0.0.1:19222/set-clipboard
elif [ ! -t 0 ]; then
    curl -s -X POST --data-binary @- http://127.0.0.1:19222/set-clipboard
else
    echo "使用方法: echo '文本' | cb 或 cb '文本'"
fi
BASH
chmod +x ~/.local/bin/cb
ln -sf ~/.local/bin/cb ~/.local/bin/wl-copy
ln -sf ~/.local/bin/cb ~/.local/bin/xclip

4. ~/.local/bin/wto（跨 Git Worktree 文件快速定位，支持直通 Yazi 或原地启动 HTTP 唤醒 Mac 浏览器）

cat << 'PY' > ~/.local/bin/wto
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
wto (WorkTree Open)
跨 Git Worktree 文件快速定位，fzf 上下键选择，直通 Yazi 或极速本地 HTTP 浏览器预览
"""

import os
import sys
import shutil
import socket
import http.server
import socketserver
import urllib.parse
import json
import subprocess
import datetime
from pathlib import Path

BOLD = "\033[1m"
GREEN = "\033[38;2;40;167;69m"
CYAN = "\033[38;2;23;162;184m"
YELLOW = "\033[38;2;255;193;7m"
ORANGE = "\033[38;2;253;126;20m"
RED = "\033[38;2;220;53;69m"
GRAY = "\033[38;2;108;117;125m"
RESET = "\033[0m"

def get_server_ip():
    conn = os.environ.get("SSH_CONNECTION", "")
    if conn:
        parts = conn.split()
        if len(parts) >= 3:
            return parts[2]
    res = subprocess.run(["hostname", "-I"], capture_output=True, text=True)
    if res.stdout.strip():
        return res.stdout.strip().split()[0]
    return "127.0.0.1"

def get_git_repo_root():
    res = subprocess.run(["git", "rev-parse", "--show-toplevel"], capture_output=True, text=True)
    if res.returncode == 0 and res.stdout.strip():
        return Path(res.stdout.strip())
    return None

def get_all_worktrees(repo_root):
    res = subprocess.run(["git", "-C", str(repo_root), "worktree", "list", "--porcelain"], capture_output=True, text=True)
    if res.returncode != 0:
        return []
    
    worktrees = []
    current = {}
    for line in res.stdout.splitlines() +[""]:
        if not line:
            if current and "path" in current:
                worktrees.append(current)
            current = {}
        elif line.startswith("worktree "):
            current["path"] = Path(line[9:]).resolve()
            current["name"] = current["path"].name
        elif line.startswith("branch "):
            current["branch"] = line[7:].removeprefix("refs/heads/")
        elif line == "detached":
            current["branch"] = "(detached)"
    return worktrees

def get_file_status(wt_path, rel_path):
    abs_path = wt_path / rel_path
    if not abs_path.exists():
        return None
    
    st_res = subprocess.run(["git", "-C", str(wt_path), "status", "-s", "--", str(rel_path)], capture_output=True, text=True)
    st = st_res.stdout.strip()
    
    mtime = os.path.getmtime(abs_path)
    dt = datetime.datetime.fromtimestamp(mtime)
    time_str = dt.strftime("%m-%d %H:%M")
    
    if st.startswith("??"):
        status_label = "[?? 新增]"
        status_color = GREEN
    elif "M" in st:
        status_label = "[M  修改]"
        status_color = YELLOW
    elif "D" in st:
        status_label = "[D  删除]"
        status_color = RED
    elif st:
        status_label = f"[{st[:7]:<7}]"
        status_color = CYAN
    else:
        status_label = "[clean  ]"
        status_color = GRAY
        
    return {
        "status_label": status_label,
        "status_color": status_color,
        "time_str": time_str,
        "abs_path": str(abs_path),
        "rel_path": str(rel_path),
        "mtime": mtime
    }

def find_target_in_worktrees(worktrees, target_input):
    if not target_input or not target_input.strip():
        return []

    # 1. 若传入已存在的确切物理文件（如 Yazi 传参），直接精准返回单项，绝不误弹列表
    target_p = Path(target_input).resolve()
    if target_p.is_file():
        info = get_file_status(target_p.parent, target_p.name)
        if info:
            for wt in worktrees:
                try:
                    rel = str(target_p.relative_to(wt["path"]))
                    info["wt"] = wt
                    info["rel_path"] = rel
                    info["score"] = 200
                    return [info]
                except ValueError:
                    pass
            info["wt"] = {"name": target_p.parent.name, "path": target_p.parent}
            info["score"] = 200
            return [info]

    target_clean = target_input.strip("/").strip()
    target_lower = target_clean.lower()
    target_name = Path(target_clean).name.lower()
    matches = []

    for wt in worktrees:
        wt_path = wt["path"]
        
        # 1. 相对路径完全匹配
        exact = wt_path / target_clean
        if exact.is_file():
            info = get_file_status(wt_path, target_clean)
            if info:
                info["wt"] = wt
                info["score"] = 100
                matches.append(info)
            continue

        # 2. 从 git ls-files 或文件树抓取文件列表
        files = []
        try:
            res = subprocess.run(
                ["git", "-C", str(wt_path), "ls-files", "-c", "-o", "--exclude-standard"],
                capture_output=True,
                text=True
            )
            if res.returncode == 0 and res.stdout.strip():
                files = [line.strip() for line in res.stdout.splitlines() if line.strip()]
        except Exception:
            pass

        if not files:
            for root, dirs, fnames in os.walk(wt_path):
                dirs[:] = [d for d in dirs if d not in (".git", ".claude", "node_modules", ".venv", "__pycache__", ".runtime")]
                root_p = Path(root)
                for fn in fnames:
                    try:
                        rel = str((root_p / fn).relative_to(wt_path))
                        files.append(rel)
                    except Exception:
                        pass

        # 3. 智能多维度打分模糊匹配
        for rel in files:
            p = Path(rel)
            full_name = p.name.lower()
            stem_name = p.stem.lower()
            rel_lower = rel.lower()

            score = 0
            if rel_lower == target_lower or rel_lower.endswith("/" + target_lower):
                score = 100
            elif full_name == target_name:
                score = 90
            elif stem_name == target_name:
                score = 85  # 省略后缀精准命中（如输入 口播与动作对齐方案 -> 命中 口播与动作对齐方案.md）
            elif full_name.startswith(target_name) or stem_name.startswith(target_name):
                score = 70
            elif target_name in stem_name or target_name in full_name:
                score = 60  # 文件名部分包含关键词
            elif target_lower in rel_lower:
                score = 40  # 路径包含关键词

            if score > 0:
                info = get_file_status(wt_path, rel)
                if info:
                    info["wt"] = wt
                    info["score"] = score
                    matches.append(info)

    # 去重并按匹配得分排序
    seen = set()
    unique = []
    matches.sort(key=lambda m: (-m.get("score", 0), len(m["rel_path"])))
    for m in matches:
        if m["abs_path"] not in seen:
            seen.add(m["abs_path"])
            unique.append(m)
    return unique

def list_all_dirty_files(worktrees):
    all_files = []
    for wt in worktrees:
        wt_path = wt["path"]
        res = subprocess.run(["git", "-C", str(wt_path), "status", "-s"], capture_output=True, text=True)
        for line in res.stdout.splitlines():
            line = line.strip()
            if not line:
                continue
            parts = line.split(maxsplit=1)
            if len(parts) == 2:
                rel = parts[1]
                info = get_file_status(wt_path, rel)
                if info:
                    info["wt"] = wt
                    all_files.append(info)
    all_files.sort(key=lambda x: x["mtime"], reverse=True)
    return all_files

def select_with_fzf(hits, prompt_title="⚡ 选择 Worktree 文件"):
    if not hits:
        return None
    if len(hits) == 1:
        return hits[0]
    if not sys.stdin.isatty():
        return hits[0]
    
    lines = []
    for h in hits:
        wt_name = h["wt"]["name"]
        st_color = h["status_color"]
        st_label = h["status_label"]
        time_str = h["time_str"]
        rel = h["rel_path"]
        abs_path = h["abs_path"]
        
        display = f"🌿 {BOLD}{CYAN}{wt_name:<26}{RESET} {st_color}{st_label}{RESET}  {GRAY}{time_str}{RESET}  {rel}"
        lines.append(f"{display}\t{abs_path}")
    
    input_text = "\n".join(lines) + "\n"
    
    fzf_cmd = [
        "fzf",
        f"--prompt={prompt_title}: ",
        "--height=40%",
        "--layout=reverse",
        "--border",
        "--ansi",
        "--delimiter=\t",
        "--with-nth=1",
        "--select-1",
        "--exit-0"
    ]
    
    try:
        p = subprocess.Popen(fzf_cmd, stdin=subprocess.PIPE, stdout=subprocess.PIPE, text=True)
        out, _ = p.communicate(input=input_text)
        if p.returncode != 0 or not out.strip():
            return None
        selected_line = out.strip()
        parts = selected_line.split("\t")
        target_path = parts[-1]
        matching_hit = next((h for h in hits if h["abs_path"] == target_path), None)
        return matching_hit or {"abs_path": target_path}
    except Exception as e:
        print(f"fzf 启动失败: {e}", file=sys.stderr)
        return None

def print_help():
    print(f"""
{BOLD}{GREEN}wto (Worktree Open){RESET} - 跨 Worktree 智能文件检索与秒开工具

{BOLD}用法:{RESET}
  {CYAN}wto{RESET}                      扫描所有活跃 Worktree 中未提交的改动，上下键挑选后在 Yazi 打开
  {CYAN}wto <文件名或相对路径>{RESET}    跨所有活跃 Worktree 智能模糊匹配该文件，回车直通 Yazi
  {CYAN}wto -h <文件名>{RESET}          原地启动轻量 HTTP 服务，渲染 Markdown ({BOLD}含 Mermaid 流程图{RESET}) 或 HTML，
                           并自动唤醒 Mac 浏览器打开；{GREEN}生成的内网链接可直接复制分享给同事！{RESET}
  {CYAN}wto -h{RESET}                   扫描所有改动文件，上下键挑选后原地起 HTTP 服务在浏览器打开
  {CYAN}wto --help{RESET}               显示本使用说明

{BOLD}快捷参数:{RESET}
  {YELLOW}-h, --html, --browser, -w{RESET}  启用浏览器预览模式（原地起 HTTP 服务 + 浏览器打开）
  {YELLOW}--help{RESET}                     查看帮助信息
""")

def start_browser_preview(file_path, wt_info=None):
    file_p = Path(file_path).resolve()
    if not file_p.exists():
        print(f"{RED}文件不存在: {file_path}{RESET}")
        return

    target_dir = file_p.parent
    file_name = file_p.name

    # 获取仓库根目录与所有活跃 worktrees
    repo_root = get_git_repo_root()
    all_wts = get_all_worktrees(repo_root) if repo_root else []

    # 寻找空闲端口 (3480..3500, 18080..18100)
    port = 0
    for p in list(range(3480, 3500)) + list(range(18080, 18100)):
        with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
            try:
                s.bind(('0.0.0.0', p))
                port = p
                break
            except OSError:
                continue
    if not port:
        port = 18080

    server_ip = get_server_ip()

    class RawFileHandler(http.server.SimpleHTTPRequestHandler):
        def __init__(self, *args, **kwargs):
            super().__init__(*args, directory=str(target_dir), **kwargs)

        def guess_type(self, path):
            p = str(path).lower()
            if p.endswith((".md", ".markdown")):
                return "text/markdown; charset=utf-8"
            elif p.endswith((".html", ".htm")):
                return "text/html; charset=utf-8"
            elif p.endswith((".txt", ".log", ".prompt")):
                return "text/plain; charset=utf-8"
            elif p.endswith(".wav"):
                return "audio/wav"
            elif p.endswith(".mp3"):
                return "audio/mpeg"
            elif p.endswith(".ogg"):
                return "audio/ogg"
            elif p.endswith(".json"):
                return "application/json; charset=utf-8"
            return super().guess_type(path)

        def translate_path(self, path):
            parsed = urllib.parse.urlparse(path)
            clean = urllib.parse.unquote(parsed.path).lstrip("/")
            if not clean:
                return str(target_dir / file_name)

            # 候选检索路径列表（按优先级依次尝试）
            candidates = [
                target_dir / clean,  # 1. HTML 文件同级目录
            ]
            if repo_root:
                candidates.append(repo_root / clean)  # 2. 当前仓库/Worktree根目录（命中 /app/backend/...）
            for wt in all_wts:
                candidates.append(wt["path"] / clean)  # 3. 其它活跃 Worktree 根目录
            candidates.append(Path("/" + clean))       # 4. 系统物理绝对路径

            # 5. 局部后缀匹配（例如请求长路径，但资源就在当前目录或其子目录下）
            for sub in[clean, Path(clean).name]:
                candidates.append(target_dir / sub)
            if "audio/" in clean:
                audio_suffix = clean[clean.index("audio/"):]
                candidates.append(target_dir / audio_suffix)

            for cand in candidates:
                try:
                    if cand.is_file() or cand.is_dir():
                        return str(cand.resolve())
                except Exception:
                    pass

            return super().translate_path(path)

        def copyfile(self, source, outputfile):
            try:
                super().copyfile(source, outputfile)
            except (ConnectionResetError, BrokenPipeError):
                pass

        def do_GET(self):
            parsed = urllib.parse.urlparse(self.path)
            clean_path = urllib.parse.unquote(parsed.path.lstrip("/"))
            
            if not clean_path:
                self.send_response(302)
                self.send_header("Location", "/" + urllib.parse.quote(file_name))
                self.end_headers()
                return

            try:
                super().do_GET()
            except (ConnectionResetError, BrokenPipeError):
                pass

        def end_headers(self):
            self.send_header("Accept-Ranges", "bytes")
            self.send_header("Access-Control-Allow-Origin", "*")
            super().end_headers()

        def log_message(self, format, *args):
            pass

    preview_url = f"http://{server_ip}:{port}/{urllib.parse.quote(file_name)}"

    # 唤醒 Mac 本地默认浏览器
    bridge_url = f"http://127.0.0.1:19222/open-browser?url={urllib.parse.quote(preview_url)}"
    notify_res = subprocess.run(["curl", "-s", "--max-time", "2", bridge_url], capture_output=True, text=True)
    auto_opened = (notify_res.stdout.strip() == "ok")

    print(f"\n{BOLD}{GREEN}🌐 原地 HTTP 预览服务已就绪！{RESET}")
    print(f"🔗 访问地址 {BOLD}: {BOLD}{CYAN}{preview_url}{RESET}")
    if auto_opened:
        print(f"{GREEN}✔ 成功唤醒 Mac 本地浏览器打开该文件（原样返回，交由浏览器插件高保真渲染）！{RESET}")
    else:
        print(f"{YELLOW}💡 提示：在 Ghostty 终端按住 Cmd 点击上方链接即可在 Mac 浏览器打开{RESET}")
    print(f"{GRAY}(按 Ctrl+C 停止服务并返回终端){RESET}\n")

    class ThreadedHTTPServer(socketserver.ThreadingTCPServer):
        daemon_threads = True
        allow_reuse_address = True

        def handle_error(self, request, client_address):
            exc_type, _, _ = sys.exc_info()
            if exc_type in (ConnectionResetError, BrokenPipeError):
                return
            super().handle_error(request, client_address)

    try:
        with ThreadedHTTPServer(("0.0.0.0", port), RawFileHandler) as httpd:
            try:
                httpd.serve_forever()
            except KeyboardInterrupt:
                pass
            finally:
                try:
                    httpd.server_close()
                except Exception:
                    pass
    except Exception:
        pass
    print(f"\n{GRAY}HTTP 预览服务已关闭。{RESET}", flush=True)
    os._exit(0)

def main():
    args = sys.argv[1:]

    # 处理 --help
    if any(a in ("--help", "-help", "help") for a in args):
        print_help()
        sys.exit(0)

    is_http_mode = False
    filtered_args = []
    for arg in args:
        if arg in ("-h", "--html", "--http", "--browser", "-w"):
            is_http_mode = True
        else:
            filtered_args.append(arg)

    target = filtered_args[0] if filtered_args else None

    repo = get_git_repo_root()
    if not repo:
        print(f"{RED}✘ 错误：当前目录不在 Git 仓库内！{RESET}")
        sys.exit(1)

    worktrees = get_all_worktrees(repo)
    if not worktrees:
        print(f"{RED}✘ 错误：未读取到任何 worktree 信息！{RESET}")
        sys.exit(1)

    if target:
        hits = find_target_in_worktrees(worktrees, target)
    else:
        hits = list_all_dirty_files(worktrees)

    if not hits:
        print(f"{YELLOW}⚠️  未在任何 Worktree 中找到匹配的文件：{target or '(所有工作区无未提交改动)'}{RESET}")
        sys.exit(0)

    prompt = "🌐 选择文件 (回车启动 HTTP 并打开 Mac 浏览器)" if is_http_mode else "⚡ 选择文件 (回车直通 Yazi)"
    hit = select_with_fzf(hits, prompt_title=prompt)
    if not hit:
        sys.exit(0)

    selected_file = hit["abs_path"]

    cb_bin = shutil.which("cb") or os.path.expanduser("~/.local/bin/cb")
    if os.path.exists(cb_bin):
        subprocess.run([cb_bin, selected_file], capture_output=True)

    if is_http_mode:
        start_browser_preview(selected_file, hit)
    else:
        yazi_bin = shutil.which("yazi") or os.path.expanduser("~/.local/bin/yazi")
        if not os.path.exists(yazi_bin):
            print(f"{RED}✘ 错误：未找到 yazi 二进制文件！{RESET}")
            sys.exit(1)
        os.execv(yazi_bin, [yazi_bin, selected_file])

if __name__ == "__main__":
    try:
        main()
    except KeyboardInterrupt:
        sys.exit(0)
PY
chmod +x ~/.local/bin/wto

5. ~/.local/bin/down（一键下载：将远程服务器文件或目录秒传到 Mac 的 ~/Downloads）

cat << 'PY' > ~/.local/bin/down
#!/usr/bin/env python3
# ==============================================================================
# down (Download to Mac) - 一键将服务器文件/目录极速下载到 Mac 的 ~/Downloads
# ==============================================================================
import sys
import os
import urllib.parse
import urllib.request
import json
import tarfile
import tempfile
import subprocess
import shutil

BRIDGE_URL = "http://127.0.0.1:19222"

HELP_TEXT = """\033[1mdown\033[0m (Download to Mac) - 一键将服务器文件下载到 Mac 的 ~/Downloads

\033[1m用法:\033[0m
  down <文件或目录>...       将一个或多个文件直接下载到 Mac 的 ~/Downloads
  down                      不带参数时，交互式弹出文件列表（fzf 上下键挑选秒下载）
  down --help, -h           查看帮助说明

\033[1m亮点:\033[0m
  • 自动识别目录：指定目录时会自动压缩为 .tar.gz 传回 Mac
  • 零等待唤醒：文件传完后 Mac 会自动在 Finder 中高亮选中该文件
  • 重名保护：若 Mac 的 ~/Downloads 已有同名文件，自动追加 (1), (2) 防覆盖
"""

def format_size(size_bytes):
    if size_bytes < 1024:
        return f"{size_bytes} B"
    elif size_bytes < 1024 * 1024:
        return f"{size_bytes / 1024:.1f} KB"
    else:
        return f"{size_bytes / (1024 * 1024):.1f} MB"

def check_bridge():
    try:
        req = urllib.request.Request(f"{BRIDGE_URL}/ping", method="GET")
        with urllib.request.urlopen(req, timeout=2) as resp:
            return resp.status == 200
    except Exception:
        return False

def upload_file(local_path, custom_name=None):
    if not os.path.exists(local_path):
        print(f"\033[31m✘ [Server ➔ Mac]\033[0m 文件不存在: {local_path}")
        return False

    is_temp_tar = False
    actual_path = local_path
    filename = custom_name or os.path.basename(local_path.rstrip("/\\"))

    # 如果是目录，自动打包为 tar.gz
    if os.path.isdir(local_path):
        clean_dir = os.path.normpath(local_path)
        base_name = os.path.basename(clean_dir) or "archive"
        filename = f"{base_name}.tar.gz"
        print(f"\033[34mℹ [Server ➔ Mac]\033[0m 检测到目录，正在打包压缩为 \033[1m{filename}\033[0m ...")
        
        temp_file = tempfile.NamedTemporaryFile(suffix=".tar.gz", delete=False)
        temp_file.close()
        try:
            with tarfile.open(temp_file.name, "w:gz") as tar:
                tar.add(local_path, arcname=base_name)
            actual_path = temp_file.name
            is_temp_tar = True
        except Exception as e:
            print(f"\033[31m✘ [Server ➔ Mac]\033[0m 打包目录失败: {e}")
            if os.path.exists(temp_file.name):
                os.unlink(temp_file.name)
            return False

    file_size = os.path.getsize(actual_path)
    url = f"{BRIDGE_URL}/save-file?filename={urllib.parse.quote(filename)}&reveal=1"

    try:
        with open(actual_path, "rb") as f:
            req = urllib.request.Request(
                url,
                data=f,
                headers={
                    "Content-Type": "application/octet-stream",
                    "Content-Length": str(file_size)
                },
                method="POST"
            )
            with urllib.request.urlopen(req, timeout=180) as resp:
                result = json.loads(resp.read().decode("utf-8"))
                saved_name = result.get("filename", filename)
                size_str = format_size(result.get("size", file_size))
                print(f"\033[32m✔ [Server ➔ Mac]\033[0m 成功下载到 Mac: \033[1m~/Downloads/{saved_name}\033[0m ({size_str})")
                return True
    except Exception as e:
        print(f"\033[31m✘ [Server ➔ Mac]\033[0m 下载失败 ({filename}): {e}")
        return False
    finally:
        if is_temp_tar and os.path.exists(actual_path):
            try:
                os.unlink(actual_path)
            except Exception:
                pass

def pick_file_fzf():
    if not shutil.which("fzf"):
        print("\033[31m✘ [Server ➔ Mac]\033[0m 未指定文件且系统未安装 fzf，请直接指定文件名，如: down <文件名>")
        return None
    
    find_cmd = [
        "find", ".",
        "-maxdepth", "3",
        "-not", "-path", "*/.*",
        "-not", "-path", "*/node_modules/*",
        "-not", "-path", "*/.venv/*",
        "-not", "-path", "*/__pycache__/*",
        "-type", "f"
    ]
    fzf_cmd = [
        "fzf",
        "--height=40%",
        "--reverse",
        "--prompt=选择要下载到 Mac 的文件 > ",
        "--preview=head -n 20 {} 2>/dev/null"
    ]
    try:
        p1 = subprocess.Popen(find_cmd, stdout=subprocess.PIPE, stderr=subprocess.DEVNULL)
        p2 = subprocess.Popen(fzf_cmd, stdin=p1.stdout, stdout=subprocess.PIPE, text=True)
        p1.stdout.close()
        out, _ = p2.communicate()
        selected = out.strip()
        return selected if selected else None
    except Exception:
        return None

def main():
    args = sys.argv[1:]
    if args and args[0] in ("-h", "--help", "help"):
        print(HELP_TEXT)
        return

    if not check_bridge():
        print("\033[31m✘ [Server ➔ Mac]\033[0m 无法连接 Mac 本地桥接服务 (HTTP 19222)")
        print("  提示: 请检查是否通过带有端口转发的 SSH 登录 (RemoteForward 19222 127.0.0.1:19222)")
        sys.exit(1)

    if not args:
        selected = pick_file_fzf()
        if not selected:
            sys.exit(0)
        upload_file(selected)
    else:
        for path in args:
            upload_file(path)

if __name__ == "__main__":
    main()
PY
chmod +x ~/.local/bin/down

2.4 安装部署 Yazi (v26.9+) 与插件套件

安装最新版纯静态 Yazi：

curl -sL https://github.com/sxyazi/yazi/releases/download/v26.9.1/yazi-x86_64-unknown-linux-musl.zip -o /tmp/yazi.zip
unzip -o /tmp/yazi.zip -d /tmp/yazi_bin
mv /tmp/yazi_bin/yazi-x86_64-unknown-linux-musl/yazi ~/.local/bin/yazi
mv /tmp/yazi_bin/yazi-x86_64-unknown-linux-musl/ya ~/.local/bin/ya
chmod +x ~/.local/bin/yazi ~/.local/bin/ya
rm -rf /tmp/yazi.zip /tmp/yazi_bin

安装并配置四大专属插件：

zoom.yazi（自适应等比铺满与按键缩放）
piper.yazi（官方通用流预览）
paste-img.yazi（按 P 直接粘贴 Mac 截图）
copy-mac.yazi（按 c c 把绝对路径直接复制到 Mac）

创建 ~/.config/yazi/plugins/zoom.yazi/main.lua：

--- @since 26.1.22
ya.clone = ya.clone or Url

local get = ya.sync(function(st, url) return st.last == url and st.level end)
local save = ya.sync(function(st, url, new)
    local h = cx.active.current.hovered
    if h and h.url == url then
        st.last, st.level = url, new
        return true
    end
end)
local lock = ya.sync(function(st, url, old, new)
    if st.last == url and st.level == old then
        st.level = new
        return true
    end
end)
local move = ya.sync(function(st)
    local h = cx.active.current.hovered
    if not h then return end
    if st.last ~= h.url then st.last, st.level = ya.clone(h.url), 0 end
    return { url = h.url, level = st.level }
end)

local function end_(job, err)
    if not job.old_level then
        ya.preview_widget(job, err and ui.Text(err):area(job.area):wrap(ui.Wrap.YES))
    elseif err then
        ya.notify { title = "Zoom", content = tostring(err), timeout = 5, level = "error" }
    end
end

local function canvas(area)
    local cw, ch = rt.term.cell_size()
    if not cw or cw <= 0 or ch <= 0 then
        return rt.preview.max_width, rt.preview.max_height
    end
    return math.min(rt.preview.max_width, math.floor(area.w * cw)),
        math.min(rt.preview.max_height, math.floor(area.h * ch))
end

local function peek(_, job)
    local url = job.file.url
    local info, err = ya.image_info(url)
    if not info then
        return end_(job, Err("Failed to get image info: %s", err))
    end

    local level = ya.clamp(-10, job.new_level or get(ya.clone(url)) or tonumber(job.args[1]) or 0, 10)
    local sync = function()
        if job.old_level then return lock(url, job.old_level, level) else return save(url, level) end
    end

    local max_w, max_h = canvas(job.area)
    local scale_w, scale_h = max_w / info.w, max_h / info.h
    local base_scale = math.min(scale_w, scale_h)
    local base_w = math.max(1, math.floor(info.w * base_scale))
    local base_h = math.max(1, math.floor(info.h * base_scale))

    local factor = 1.0 + (level * 0.15)
    if factor < 0.1 then factor = 0.1 end

    local new_w = math.min(max_w, math.floor(base_w * factor))
    local new_h = math.min(max_h, math.floor(base_h * factor))

    local tmp = os.tmpname()
    local output, err = Command("magick"):arg {
        tostring(job.file.path),
        "-auto-orient", "-strip",
        "-sample", string.format("%dx%d", new_w, new_h),
        "-quality", rt.preview.image_quality,
        string.format("WEBP:%s", tmp),
    }:output()

    if not output then
        end_(job, Err("Failed to start `magick`: %s", err))
    elseif not output.status.success then
        end_(job, Err("`magick` error %s: %s", output.status.code, output.stderr))
    elseif sync() then
        ya.image_show(Url(tmp), job.area)
    end
    end_(job)
end

local function entry(self, job)
    local st = move()
    if not st then return end
    local motion = tonumber(job.args[1]) or 0
    local new = (job.args[1] == "0" or motion == 0) and 0 or ya.clamp(-10, st.level + motion, 10)
    if new ~= st.level or job.args[1] == "0" then
        Stat = Stat or Cha
        local stat = Stat { mode = tonumber("100644", 8) }
        peek(self, {
            area = ui.area("preview"),
            args = {},
            file = File { url = st.url, cha = stat, stat = stat, lstat = stat },
            skip = 0,
            new_level = new,
            old_level = st.level,
        })
    end
end

return { peek = peek, entry = entry }

创建 ~/.config/yazi/plugins/copy-mac.yazi/main.lua：

--- @sync entry
return {
    entry = function(self, job)
        local h = cx.active.current.hovered
        if not h then return end
        
        local text = ""
        local kind = job.args[1] or "path"
        if kind == "path" then
            text = tostring(h.url)
        elseif kind == "filename" or kind == "f" then
            text = tostring(h.name)
        elseif kind == "dirpath" or kind == "d" then
            text = tostring(cx.active.current.cwd)
        elseif kind == "name_without_ext" or kind == "n" then
            text = tostring(h.name:gsub("%.%w+$", ""))
        else
            text = tostring(h.url)
        end

        local child = Command("sh")
            :arg({ "-c", "curl -s -X POST --data-binary @- http://127.0.0.1:19222/set-clipboard" })
            :stdin(Command.PIPED)
            :spawn()

        if child then
            child:write_all(text)
            child:flush()
            child:wait()
            ya.notify { title = "Copied to Mac", content = text, timeout = 2, level = "info" }
        else
            ya.notify { title = "Copy Failed", content = "无法连接 Mac 剪贴板", timeout = 3, level = "error" }
        end
    end,
}

创建 ~/.config/yazi/plugins/paste-img.yazi/main.lua：

--- @sync entry
return {
    entry = function()
        local child, err = Command("pi"):spawn()

        if not child then
            ya.notify { title = "Paste", content = "启动失败: " .. tostring(err), timeout = 3, level = "error" }
            return
        end

        local status = child:wait()
        if status and status.success then
            ya.notify { title = "Paste", content = "✔ 剪贴板内容已成功粘贴入当前目录！", timeout = 3, level = "info" }
        else
            ya.notify { title = "Paste", content = "✘ 粘贴失败：剪贴板无数据或桥接未连接", timeout = 3, level = "warn" }
        end
    end,
}

写入配置文件 ~/.config/yazi/yazi.toml：

[preview]
max_width  = 3840
max_height = 2160
image_quality = 85

[plugin]
prepend_previewers = [
  { url = "*.{png,jpg,jpeg,webp,gif,bmp,PNG,JPG,JPEG,WEBP,GIF,BMP}", run = "zoom" },
  { mime = "image/*", run = "zoom" },
  { url = "*.md", run = 'piper -- CLICOLOR_FORCE=1 glow -w=$w -s=dark "$1"' },
  { url = "*.markdown", run = 'piper -- CLICOLOR_FORCE=1 glow -w=$w -s=dark "$1"' },
]

写入配置文件 ~/.config/yazi/keymap.toml：

# 窗口全屏放大/恢复
[[mgr.prepend_keymap]]
on   = "T"
run  = "plugin toggle-pane max-preview"
desc = "全屏放大 / 恢复右侧预览窗口"

# 图片缩放
[[mgr.prepend_keymap]]
on   = "+"
run  = "plugin zoom 1"
desc = "图片预览放大"

[[mgr.prepend_keymap]]
on   = "="
run  = "plugin zoom 1"
desc = "图片预览放大"

[[mgr.prepend_keymap]]
on   = "-"
run  = "plugin zoom -1"
desc = "图片预览缩小"

[[mgr.prepend_keymap]]
on   = "0"
run  = "plugin zoom 0"
desc = "重置图片缩放比例"

# 从 Mac 粘贴截图
[[mgr.prepend_keymap]]
on   = "P"
run  = "plugin paste-img"
desc = "从 Mac 剪贴板直接粘贴图片或文件到当前目录"

# 路径复制直达 Mac 剪贴板
[[mgr.prepend_keymap]]
on   = [ "c", "c" ]
run  = "plugin copy-mac -- path"
desc = "复制文件绝对路径到 Mac 剪贴板"

[[mgr.prepend_keymap]]
on   = [ "c", "f" ]
run  = "plugin copy-mac -- filename"
desc = "复制文件名到 Mac 剪贴板"

[[mgr.prepend_keymap]]
on   = [ "c", "d" ]
run  = "plugin copy-mac -- dirpath"
desc = "复制当前目录路径到 Mac 剪贴板"

[[mgr.prepend_keymap]]
on   = [ "c", "n" ]
run  = "plugin copy-mac -- name_without_ext"
desc = "复制无后缀文件名到 Mac 剪贴板"

# 预览区滚动
[[mgr.prepend_keymap]]
on   = [ "<C-e>" ]
run  = "seek 5"
desc = "预览窗口向下滚动 5 行"

[[mgr.prepend_keymap]]
on   = [ "<C-y>" ]
run  = "seek -5"
desc = "预览窗口向上滚动 5 行"

# 在 Mac 浏览器中通过 HTTP 打开当前文件
[[mgr.prepend_keymap]]
on   = "B"
run  = 'shell "wto -h %h" --block'
desc = "在 Mac 浏览器中 HTTP 预览当前文件"

[[mgr.prepend_keymap]]
on   = "b"
run  = 'shell "wto -h %h" --block'
desc = "在 Mac 浏览器中 HTTP 预览当前文件"

2.6 终端美化与极简提示符 (`~/.config/starship.toml`)

采用 Catppuccin 渐变胶囊样式，并彻底去除 $?: 等令人眼花的 Git 杂乱状态符号，保持终端极致清爽：

cat << 'TOML' > ~/.config/starship.toml
"$schema" = 'https://starship.rs/config-schema.json'

format = """
[](red)\
$os\
$username\
[](bg:peach fg:red)\
$directory\
[](bg:yellow fg:peach)\
$git_branch\
$git_status\
[ ](yellow)\
$character"""

palette = 'catppuccin_mocha'

[os]
disabled = false
style = "bg:red fg:crust"

[os.symbols]
Macos = "󰀵"
Ubuntu = "󰕈"
Linux = "󰌽"

[username]
show_always = true
style_user = "bg:red fg:crust"
style_root = "bg:red fg:crust"
format = '[[ $user ](fg:crust bg:red)]($style)'

[directory]
style = "fg:crust bg:peach"
format = "[ $path ]($style)"
truncation_length = 3
truncation_symbol = "…/"

[git_branch]
symbol = ""
style = "bg:yellow"
format = '[[ $symbol $branch ](fg:crust bg:yellow)]($style)'

# 极简模式：关闭复杂的 stash/untracked 符号（$?:），仅保留干净的分支名
[git_status]
disabled = true
style = "bg:yellow"
format = '[[($all_status$ahead_behind )](fg:crust bg:yellow)]($style)'

[nodejs]
disabled = true

[time]
disabled = true

[cmd_duration]
disabled = true

[character]
disabled = false
success_symbol = '[❯](bold green)'
error_symbol = '[❯](bold red)'

[palettes.catppuccin_mocha]
rosewater = "#f5e0dc"
flamingo = "#f2cdcd"
pink = "#f5c2e7"
mauve = "#cba6f7"
red = "#f38ba8"
maroon = "#eba0ac"
peach = "#fab387"
yellow = "#f9e2af"
green = "#a6e3a1"
teal = "#94e2d5"
sky = "#89dceb"
sapphire = "#74c7ec"
blue = "#89b4fa"
lavender = "#b4befe"
text = "#cdd6f4"
subtext1 = "#bac2de"
subtext0 = "#a6adc8"
overlay2 = "#9399b2"
overlay1 = "#7f849c"
overlay0 = "#6c7086"
surface2 = "#585b70"
surface1 = "#45475a"
surface0 = "#313244"
base = "#1e1e2e"
mantle = "#181825"
crust = "#11111b"
TOML

2.7 部署远程 Shell 快捷别名与工作流 (`~/.bashrc`)

在远程服务器的 ~/.bashrc 末尾添加如下快捷别名与函数，实现工作区秒切、Tmux 窗口无痛管理与神级终端工具链集成：

# ------------------------------------------------------------------------------
# 远程开发快捷别名与工作流
# ------------------------------------------------------------------------------
# 1. 项目直达
alias ai3='cd ~/workspaces/<PROJECT_NAME> && tmux new -A -s <PROJECT_NAME>'
alias cdai='cd ~/workspaces/<PROJECT_NAME>'

# 2. 终端神级工具链
alias lg='lazygit'            # Git TUI 神器（按 w 看/切 worktree，按 3 看 commit 树）
alias y='~/.local/bin/yazi'
alias yazi='~/.local/bin/yazi' # 现代化文件管理器（方向键穿梭，Kitty 原生看图）
alias wt='git worktree list'   # 查看当前项目所有 git worktree 工作树
alias gw='glow'

# 3. Tmux 窗口快捷操作（保持当前目录）
alias new='tmux new-window -c "$(pwd)"'
alias cw='new'
alias rn='tmux rename-window'
alias close='exit'
alias tls='tmux ls'

# 4. 函数定义（规范无别名冲突）
ta() {
  tmux new -A -s "${1:-main}"
}

md() {
  if [ -z "$1" ]; then
    glow
  else
    glow -p "$@"
  fi
}

ws() {
  local target_dir
  if [ -z "$1" ]; then
    target_dir=$(find ~/workspaces -mindepth 1 -maxdepth 1 -type d -exec basename {} \; 2>/dev/null | sort | fzf --prompt="⚡ 选择工作区项目: " --height=40% --layout=reverse --border)
    [ -z "$target_dir" ] && return 0
  else
    target_dir="$1"
  fi
  local full_path="$HOME/workspaces/$target_dir"
  if [ -d "$full_path" ]; then
    cd "$full_path"
    tmux new -A -s "$target_dir"
  else
    echo "未找到目录: $full_path"
  fi
}

tkill() {
  local target="$1"
  if [ -z "$target" ]; then
    target=$(tmux list-sessions -F "#{session_name}" 2>/dev/null | fzf --prompt="🗑️ 选择要关闭的保活会话: " --height=40% --layout=reverse --border)
    [ -z "$target" ] && return 0
  fi
  if [ "$target" = "all" ]; then
    tmux kill-server
    echo "✔ 已关闭全部后台保活会话"
    return 0
  fi

  # 若未直接命中会话全名，智能补全序号（如 4 -> ai_classroom3_4）
  if ! tmux has-session -t "$target" 2>/dev/null; then
    local matched=""
    local cur_proj="$(basename "$PWD")"
    if tmux has-session -t "${cur_proj}_${target}" 2>/dev/null; then
      matched="${cur_proj}_${target}"
    else
      local candidate
      candidate=$(tmux list-sessions -F "#{session_name}" 2>/dev/null | grep -E "(^|_)${target}$" | head -n 1)
      [ -n "$candidate" ] && matched="$candidate"
    fi
    [ -n "$matched" ] && target="$matched"
  fi

  if tmux kill-session -t "$target" 2>/dev/null; then
    echo "✔ 已关闭会话: $target"
  else
    echo "✖ 未找到会话: $target"
  fi
}
alias tk='tkill'

# 加载 Starship 彩虹状态栏（Catppuccin Powerline）
if [ -x "$HOME/.local/bin/starship" ]; then
  eval "$($HOME/.local/bin/starship init bash)"
fi

第三部分：完整验证核对清单（验收流程）

按顺序执行以下命令验证全链路是否正常：

验证项	执行命令	期望输出 / 正确现象
1. Mac 本地桥接服务	`curl -s http://127.0.0.1:19222/ping`	输出 `pong`
2. 连入服务器反向隧道	`cx` 然后在服务器执行 `curl -s http://127.0.0.1:19222/ping`	输出 `pong`（证明隧道通畅）
3. Tmux 版本与选项	在服务器执行 `tmux -V && tmux show -g allow-passthrough`	输出 `tmux 3.5a` 与 `allow-passthrough on`
4. 粘贴 Mac 截图或文件	在 Mac 截图或在 Finder 复制文件后，在服务器执行 `pi`	输出 `✔ [Mac ➔ Server] 成功从剪贴板粘贴图片/文件`
5. 拖拽文件秒传	在服务器执行 `up /Users/.../test.png`	输出 `✔ [Mac ➔ Server] 上传成功`
6. Yazi 路径复制到 Mac	在服务器运行 `y`，光标停在文件敲两次 `c`	右上角提示 `Copied to Mac`，回 Mac 按 `Cmd+V` 成功粘贴
7. 图片看图与缩放	在 Yazi 停在图片上按 `T`	图片瞬间铺满全屏，按 `+` 进一步放大，按 `0` 还原
8. 跨 Worktree 智能检索	在服务器执行 `wto` 或 `wto <文件>`	底部弹起 40% fzf 窗口，上下键移动，回车直通 Yazi
9. 浏览器原地文件预览	在服务器执行 `wto -h <文件>`	原地启动轻量 HTTP 服务，原样返回文件（支持浏览器 Markdown 插件高保真渲染），自动唤醒 Mac 浏览器打开，内网链接可直接发给同事，Ctrl+C 退出
10. 服务器文件秒传回 Mac	在服务器执行 `down <文件或目录>`	输出 `✔ [Server ➔ Mac] 成功下载到 Mac: ~/Downloads/...`，Mac Finder 自动聚焦高亮选中

第四部分：日常操作随手备忘

# --- 会话连接与管理 (Mac 本地，配置解耦自 ~/.config/cx/config) ---
cx                # 默认直达主项目会话
cx new            # 自动新建独立序号会话 (my_project_1, _2 ...)
cx 1 / cx 2       # 直接进对应序号会话
cx ls             # 查看后台有哪些会话在跑 (免端口转发冲突)
cx k / tk         # 交互式选择关闭会话
cx k <序号/名字>  # 按序号或名字秒杀会话 (例: cx k 4 / tk 4)
cx ka             # 一键关闭全部后台会话
cx config         # 查看/切换当前目标服务器与项目配置
cx bridge         # 查看本地跨端桥接服务运行状态 (127.0.0.1:19222)
cx bridge restart # 一键重启本地桥接服务 (解决端口阻塞或异常)
cx -h / cx h     # 查看 cx 命令行帮助与中文说明 (亦支持 help / --help)

# --- 远程工作区直达与会话调度 (远程服务器) ---
ws                # fzf 弹出工作区列表，上下键挑选回车直达项目并挂接 tmux
ws <项目名>       # 直接切到指定项目目录并挂入对应会话
ai3               # 秒进主项目并恢复/挂接主会话
cdai              # 纯切到主项目目录
ta [会话名]       # 挂接指定会话（默认 main，不存在则新建）
tls               # 查看所有后台 tmux 会话
tk / tkill        # fzf 交互式挑着杀掉会话
tk <序号/名字>    # 按序号或名字秒杀会话 (例: tk 4 关掉当前项目 _4 会话)
tk all            # 一键杀掉全部后台保活会话

# --- Tmux 窗口极速操作 (远程服务器内) ---
new / cw          # 在当前工作目录下新建 tmux 窗口（保持当前 pwd，不跳回根目录）
rn                # 重命名当前 tmux 窗口
close             # 退出当前窗格或窗口 (exit)

# --- Git Worktree 与文档速查 (远程服务器) ---
wt                # 一键查看当前仓库所有 Git Worktree 工作树及分支
lg                # 启动 Lazygit（按 w 查/切 worktree，按 3 查 commit 树）
md <文件>         # Glow 彩色高亮分页预览 Markdown 文档
md                # Glow 交互式浏览当前目录所有文档
gw                # glow 原生命令别名

# --- 跨端文件流转与 Worktree 检索 (远程服务器) ---
pi / pf           # 智能粘贴：Mac 截图像图贴图；Finder 复制文件(Cmd+C)则原名拉取！
pi test.png       # 指定文件名保存（仅单文件/截图时生效）
up [把文件拖进来] # 直接把本地文件拉取到当前目录
down <文件/目录>  # 一键秒下到 Mac ~/Downloads，目录自动打 .tar.gz，Finder 自动高亮！
down              # 不带参数：fzf 上下键挑选文件极速下载到 Mac
down --help       # 查看 down 命令行帮助
wto <文件名>      # 跨所有 Worktree 智能匹配该文件，fzf 上下键选择，回车直通 Yazi 并高亮
wto -h <文件名>   # 原地起 HTTP 服务，原样返回文件（交由浏览器 Markdown 插件高保真渲染），链接可直接发同事，Ctrl+C 退出
wto -h            # 扫描所有 Worktree 中近期改动的未提交代码，上下键挑选后起 HTTP 浏览器查看
wto --help        # 查看 wto 命令行帮助与用法说明

# --- Yazi 专属神键 (远程服务器) ---
y                 # 启动 Yazi
q                 # 普通退出
Q (大写)          # 退出并自动 cd 到最后选中的目录（极力推荐）
c c               # 复制选中文件的绝对路径到 Mac 剪贴板！
c f               # 复制文件名到 Mac 剪贴板
P (大写)          # 直接从 Mac 剪贴板粘贴最新截图或复制的文件并高亮展示
T (大写)          # 全屏放大/还原右侧预览（图片自适应撑满，文档宽幅排版）
+ / =             # 图片手动放大 15%
-                 # 图片手动缩小
0                 # 重置图片缩放为最佳贴合尺寸
Ctrl+e / Ctrl+y   # 预览窗口下滚/上滚 5 行
B / b             # 在 Mac 浏览器中通过 HTTP 原地打开当前文件（可发同事，按 Ctrl+C 秒回 Yazi）

# --- Tmux 窗口与分屏操作 (远程服务器，前缀键统一为 Ctrl+b，完全释放 Ctrl+a 跳行首) ---
Ctrl+b 然后按 }   # 当前窗口与右侧/下方窗口互换位置！
Ctrl+b 然后按 {   # 当前窗口与左侧/上方窗口互换位置！
Ctrl+b 然后按 Ctrl+o # 顺时针旋转轮换所有分屏
Ctrl+b 然后按 Space  # 一键切换分屏排版（左右、上下、网格四分屏）
Ctrl+b 然后按 !   # 把当前分屏弹射出去变成独立的新全屏窗口
Ctrl+b 然后按 z   # 当前分屏临时最大化 / 还原

老码农的小感想

2024-02-06T14:31:00Z

我发现，现在很多计算机和软件工程相关专业的学生，
都不是因为喜欢计算机这个行业或者编程才选这个专业的。
都不是因为喜欢计算机这个行业，或者说编程才选这个专业的。
临近毕业了。除了课堂作业，连一个项目都没有写过
当年我想学医。所以报考了纯医学类的院校。
谁知，被调剂到了计算机专业。
我也不明白校长的脑洞怎么会这么大。一个医学类院校竟然会有计算机专业？
当我看到录取通知书，简直都要崩溃了
等开学后。我发现。我还是这个学院的第二届学生
我更加崩溃了……
好不容易说服自己接受现实
一开始选择了C++入手。然而选错了
在图书馆找了一个不知名作者写的不知名的书，里面用的他写的不知名的库
懵懵懂懂的搞了一个月，才写出了一个hello world。

使用CSS mask 实现图片的斜线拼接

2016-02-04T03:50:00Z

每次必说题外话

话说貌似好久没有写技术文章了，自从娃娃出来后，很少能有时间做技术研究，思考的时间也不足。不过有得必有失，世上事也就酱紫了。但是作为一个前端攻城师，不写代码，不研究技术，是会被后浪拍死在沙滩上的。

碰巧前段时间碰到个CSS问题，一直很喜欢CSS的，能CSS解决的问题绝对不用JS，于是就抽时间整整看。

什么是斜线拼接

回到本文主题上，”斜线拼接“是我自创的词语，因为我也不知道怎么描述这个需求，o(╯□╰)o，实际的效果是下面所示：

眼力好的筒子应该就能发现，上面这张图是两个帅锅拼接在一起的，看中间的斜线。

但是呢，刚接到这个需求的时候，开发是抓狂的——第一反应就是用canvas画图，这得多累啊，只是要显示张图片而已，竟然还要动用一坨JS，O__O "…

不过依稀记得，CSS 貌似有个遮罩的特性，可以实现图片的部分显示的效果的。more

CSS mask & linear gradient

要实现这个特性，就需要用到CSS遮罩和线性渐变。

至于这两个是什么东西，我就不班门弄斧的介绍了，毕竟这两个属性出生也挺久了的，不了解的筒子可以看这两篇文章CSS遮罩——如何在CSS中使用遮罩和深入理解css3-gradient斜向线性渐变。

先看下实际的效果

大家请看妹子中间（注意表看错了，是两个妹子的中间），有一条比较明显的分界线。多说无益，我知道你们想看demo，用力戳这里>>。

第一步，显示两张图

OK，先看代码，然后我再来解释。

    <div class="img-container">
        <div class="img-left"></div>
        <div class="img-right"></div>
    </div>

然后是CSS

    .img-container{
        position: relative;
        width: 200px;
        height: 200px;
        border: 5px solid #40BCFF;
    }

    .img-left{
        background: url(img/left.jpg);
        background-size: cover;
        width: 100%;
        height: 100px;
    }

    .img-right{
        background: url(img/right.jpg);
        background-size: cover;
        width: 100%;
        height: 100px;
    }

OK，看下效果

小明：尼玛，这不是坑爹么，这么简单谁不会？

小朋友，别急，我们两个主角还没上了。

画个斜线

为了实现斜线拼接，你总得有个斜线吧？把img-right的背景换成一个带有“斜线”的图，这个就不用“真”图片啦，CSS渐变就能完成，如下：

    .img-right{
        background: -webkit-linear-gradient(left top, blue 50%, white 50%);
    }

好，把背景换成真实的美女，渐变图作为mask

.img-right{
    background: url(img/right.jpg);
    background-size: cover;
    -webkit-mask-image: -webkit-linear-gradient(left top, blue 50%, white 50%);
}

But，如果你这么做了，会发现看到的是完整的图，并没有被遮盖，跟下图一样。

这是因为css mask的原理是，它只会把遮罩图里透明像素所对应的原图部分进行隐藏，而我们的渐变图是完全不透明的（我们是蓝白色相间的），所以没有遮罩效果。那么把蓝色改成透明试试。

.img-right{
    background: url(img/right.jpg);
    background-size: cover;
    -webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%);
}

当当当~~美女只显示一半啦！♪(^∇^*)

层叠

最后，把第二张图层在第一章上面，由于第二张图左边一半都是透明的，背景里的美女也能直接透过来啦。

.img-right{
    position: absolute;
    left: 0;
    top: 0; 
}

看下最终img-right所需要的样式代码

.img-right{
        position: absolute;
        left: 0;
        top: 0;
        background: url(img/right.jpg);
        background-size: cover;
        -webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%);
        width: 100%;
        height: 100%;
}

怎么样，很简单是吧？

CSS3有很多新鲜（其实这个不新鲜了~）的特性可以实现很多有趣的应用，如果你有其他方案，欢迎留言讨论，O(∩_∩)O谢谢阅读！

肿么安装Effect Game

2015-07-22T07:52:00Z

Effect Game的安装还是很麻烦的, 原作者用的时代比较久远, 有很多软件包在新的linux系统上都可能有兼容问题, 这里做个安装记录方便后人查阅.

环境准备

fedora 21
能翻墙的比较快的网络

Effect Game的需要运行在linux系统里, 理论上任何linux发行版都可以, 但是我在ubuntu上折腾了好久, 总归还是放弃了.

各个发行版虽然内核一样, 但是各种软件包可能不一样, 名字也可能不一样, 包管理工具也不一样, 所以环境这里, 还是建议用 fedora 21, 而且不能用最新版, 最新版的fedora把 yum 给替换成了 dnf, 还是很多问题.

这里的安装步骤是基本按照这个E文文档的, https://github.com/jhuckaby/Effect-Games/wiki/Installation-Guide, 启用能用yum安装的软件包都直接用yum了.

安装各种系统依赖包

作者列了yum install xxx 很多包, 但是其实可以批量安装的

如果是第一次用yum, 先更新下yum的版本库 yum repolist

批量安装, 安装完成后再敲入整个命令确认是否有安装失败的(已经安装了的不会重复安装)

yum install zlib-devel libxml2-devel libgpg-error-devel libgcrypt-devel libxslt-devel expat-devel db4-devel e2fsprogs-devel krb5-devel openssl-devel aspell-devel rpm-build gcc screen sendmail "gcc-c++" bzip2-devel freetype-devel libpng-devel libtiff-devel libjpeg libjpeg-devel libstdc++-devel curl curl-devel libidn-devel krb5-devel e2fsprogs-devel libgcrypt-devel libgpg-error-devel

创建 Effect Game 的安装目录

这里就直接按照作者的目录来设置, 大部分东东都放到这里, 避免各种引用要修改

mkdir /effect
mkdir -p /effect/perl/bin/

安装 perl 和 cpan

yum install perl
yum install cpan

作者把 perl 放到了 /effect/perl 里, 这里做个软连就好

ln -s /usr/bin/perl /effect/perl/bin/perl 
ln -s /usr/bin/cpan /effect/perl/bin/cpan

安装各种 perl 模块

第一次使用cpan时, 直接敲入 cpan 运行一次, 按提示使用自动配置

为了避免安装时可能会遇到的下面这个提示, 烦它的话可以先装一下 YAML.

>> 'YAML' not installed, will not store persistent state

cpan YAML

然后批量安装各种模块, 安装完成后再敲入整个命令确认是否有安装失败的(已经安装了的不会重复安装)

cpan LWP::UserAgent Archive::Zip Archive::Tar Class::Loader Digest::SHA Digest::SHA1 Math::Pari Devel::Symdump Module::Build MIME::Lite Test::Simple Text::Wrap CGI Devel::CoreStack Cwd IO::Socket::INET Test::Harness Time::HiRes Unicode::String Date::Parse MIME::Parser Crypt::SSLeay ExtUtils::XSBuilder IO::Socket::SSL File::lockf IPC::ShareLite Syntax::Highlight::Engine::Kate Text::Aspell Net::Twitter::Lite HTTP::Daemon File::Flock

这个需要等很久很久, 比很久很久还要久.

Text::Aspell 很容易安装失败, 按如下步骤重新安装

yum install aspell aspell-en

cpan Text::Aspell

安装图片服务 ImageMagick

ImageMagic不要用yum安装, 编译时需要指定很多环境变量, 直接下载下载自己编译.

安装jpeg和png解码库

yum install libjpeg-devel libpng-devel

作者用的ImageMagick是6.5版本, 可能会编译失败, 这里下载最新版(目前是6.9).

wget "http://www.imagemagick.org/download/ImageMagick.tar.gz"
tar zxf ImageMagick.tar.gz
cd ImageMagick-*

ln -s /usr/include/freetype2/freetype /usr/include/freetype
export CPPFLAGS="-I/usr/include/freetype2 -I/usr/local/include"
export LDFLAGS="-L/usr/local/lib"
mkdir -p /effect/fonts

./configure --prefix=/effect/magick --enable-lzw --without-threads --without-magick-plus-plus --with-perl=perl --with-fontpath=/effect/fonts --without-x --with-quantum-depth=8 --enable-shared=yes --enable-static=no

make
make install

添加库到系统

echo "/effect/magick/lib" > /etc/ld.so.conf.d/imagemagick.conf

重新加载配置

/sbin/ldconfig -v

测试是否已正常安装

perl -MImage::Magick -e ';'

没有出错就安装OK, 注意, 这里是没有什么显示

创建个软链

mkdir -p /opt/local/bin
ln -s /effect/magick/bin/convert /opt/local/bin/convert

安装音视频模块 MPG123 and OGG Encoder

安装 MPG

wget "http://www.effectgames.com/install/mpg123-1.10.0.tar.bz2"
tar jxf mpg123-1.10.0.tar.bz2
cd mpg123-*
./configure
make
make install

安装 OGG

yum install libvorbis libvorbis-devel vorbis-tools

检查下面文件在不在, 有就安装正确了

ls /usr/local/bin/mpg123 /usr/bin/oggenc

安装 Apache

先安装或更新一下openssl

yum install openssl

Apache也有很多安装选项, 自己下载来编译

wget "http://www.effectgames.com/install/httpd-2.2.14.tar.bz2"
tar jxf httpd-2.2.14.tar.bz2
cd httpd-*

./configure --prefix=/effect/apache --with-mpm=prefork --with-ssl=openssl --with-perl=perl --enable-so --enable-expires --enable-headers --enable-mime-magic --enable-rewrite --enable-ssl --enable-mods-shared="all authn_file authn_default authz_host authz_groupfile authz_user authz_default auth_basic include filter log_config env setenvif mime status autoindex asis cgi negotiation dir actions userdir alias expires headers ssl rewrite"

make
make install

之后Apache会安装到 /effect/apache

安装 mod_perl 模块, 有些系统会缺少 perl 的一些依赖, 先用 yum 安装依赖, 然后安装最新版的 mod_perl ( 目前是2.0.9 )

yum install perl-ExtUtils-Embed

wget "http://mirror.bit.edu.cn/apache/perl/mod_perl-2.0.9.tar.gz"
tar zxf mod_perl-*.tar.gz
cd mod_perl-*
perl Makefile.PL MP_AP_PREFIX=/effect/apache
make
make install

在执行perl Makefile.PL MP_AP_PREFIX=/effect/apache 时可能会报错

[  error] '/effect/apache/bin/apxs -q NOTEST_CPPFLAGS' failed:
[  error] Use of assignment to $[ is deprecated at /effect/apache/bin/apxs line 86.

问题原因是新版本的perl里面, [ 不能用于变量名了, 修改 /effect/apache/bin/apxs 源码, 把$[ 替换成 $a(vi 中可以用 %s/$\[/\$a/g 命令全局替换), 保存并重新执行 perl Makefile.PL MP_AP_PREFIX=/effect/apache

增加www用户组和用户

/usr/sbin/groupadd www
/usr/sbin/useradd -m -g www www

替换配置文件, 直接用作者的配置

wget "http://www.effectgames.com/install/httpd.conf"
mv /effect/apache/conf/httpd.conf /effect/apache/conf/httpd.conf.bak
mv httpd.conf /effect/apache/conf/

配置项目

先下载项目代码下来

wget "https://github.com/jhuckaby/Effect-Games/tarball/master"
tar zxf jhuckaby-Effect-Games-*.tar.gz
rm jhuckaby-Effect-Games-*.tar.gz
mv jhuckaby-Effect-Games-*/* /effect
ln -s /effect/htdocs /effect/apache/htdocs/effect

做一些必要配置如域名等, 具体项直接参照安装文档

Effect Game的主要配置文件在 /effect/conf/Effect.xml, 基本上都不需要修改

启动测试一下是否正常

/effect/apache/bin/apachectl start
/effect/apache/bin/apachectl stop

初始化各种环境

创建数据存储目录和配置权限

mkdir -p /data/effect/storage
chown www:www /data/effect/storage

mkdir -p /data/effect/cleanup
chown www:www /data/effect/cleanup

创建日志的目录

mkdir -p /logs/effect
chmod 777 /logs/effect

mkdir -p /logs/apache
chmod 777 /logs/apache

创建初始数据, 执行这个脚本就行, 数据的配置在 /effect/conf/initial_data_setup.xml

/effect/bin/setup_db.pl

启动图片服务进程, Effect Game是使用了个后台进程来优化图片, 配置文件在 /effect/conf/image_service.xml, 用下面的命令启动

mkdir -p /data/effect/queue
chmod 777 /data/effect/queue

/effect/bin/imageservicectl.sh start
/effect/bin/imageservicectl.sh stop

配置定时任务, 这个任务用来处理日志文件和数据文件, 命令行敲入 crontab -e, 输入

00 * * * * /effect/bin/maint.pl hourly
30 00 * * * /effect/bin/maint.pl daily

定时任务的log输出在 /logs/effect/maint.log

过时的日志文件会被打包存储, 默认配置下存在 /backup/effect/logs/CATEGORY/YYYY/MM/DD/HH.gz, 路径可以在 /effect/conf/Effect.xml 中修改

创建备份目录

mkdir -p /backup/effect
chmod 777 /backup/effect

All Done

现在可以启动 Effect Game 啦

/effect/bin/imageservicectl.sh start
/effect/apache/bin/apachectl start

然后访问 http://127.0.0.1/effect/, 默认用户名和密码都是 admin

如果要配置域名, 可以在 /effect/apache/conf/httpd.conf 中修改 ServerName

So, enjoy it!

谈前端工程师的职业规划

2015-04-17T08:57:50Z

在敲下这个标题的时候，心里好虚。话说我一直不太喜欢发表这些看上去很假大空的文字，每个人的职业规划都是独有的，不具有太大的可复制性，把自己的经历放出去，容易误人子弟。只是最近很多师弟们（别问我为什么都是师弟，我想静静……也不要问我静静是谁！）问起这个，也就根据自己的经历发表一下对前端工程师的看法吧，“我说的都是错的”，仅供参考。另：本篇是纯文字，密集恐惧症换成勿入！

从我接收第一份前端需求开始，到现在也有五个年头了。自己也从一个愣头青变成一个快到而立之年的大叔，时间真的是哗啦哗啦的快。这五年里，其实可以分成三部分：1~2, 3~4, 5。more

1~2 吸吸吸，疯狂的吸取知识

刚毕业时满腔热情，一门心思只往前端事业发展。刚从学校出来，看到什么都是新鲜十足，什么都想学。不断的买书看书垫枕头，最疯狂的时候一个礼拜晚上看完正本犀牛书+做笔记，后来再也达不到这种速度了。很幸运我能加入到AlloyTeam，依靠WebQQ，使得我的编码能力、项目经验duang duang duang的上去了。同时也搞了很多奇形怪状的业余项目，基本上无论遇到什么跟JS相关的“新”技术（新是对于我自己来说的），我都想去尝一尝。

对于刚毕业的初学者来说，头两年真的真的是非常重要，学习的激情、速度以及熬夜的能力可以发挥的淋漓尽致。在这个阶段，通过大量的编码提升JS能力，同时尝试各种JS框架和库，寻找适合自己的框架，甚至自己也写了一个JS库和构建工具。“不要重复的造轮子”这句话，初学者都应该无视。你不造轮子，怎么知道别的轮子好不好用？怎么知道造一个轮子有多难？怎么知道如何改进轮子？我不认为一个新手去看jQuery的源码能看懂，反正我当时就晕晕乎乎的。

在这个时间点里，其实还没怎么考虑以后的发展，而且也仅认为前端工程师，学好JS/CSS/HTML就够了，其他的没兴趣也没意愿去学。

3~4 大大大，扩展知识面

在JS/CSS/HTML里探索了2年后，突然发现越学越不懂了。出了HTML5，看了WebSocket，想学会，结果要看网络协议、要看HTTP/TCP，还要学Server开发等。顿时感觉分身10个也不一定能学好。为了跟上潮流，也得硬着头皮上。好不容易Server、网络、前端、浏览器各种知识都多少了解的时候，移动潮流来了！OMG，Android、iOS还有WP……生命不止，学习不休。

其实到了这个阶段，多少也算是个有经验的攻城师了。开发一般需求不在话下，偶尔还能承担个架构设计。在提升JS能力的同时，开始要往多方面发展。前端工程师远远不仅是JS而已。制作一个性能高、交互好、视觉美的页面，需要从前端框架选型、架构设计、构建工具，到后端通信机制、设计与交互、网络和浏览器优化等各方面的知识。一专多长才是前端工程师的终极目标。有个人说得对：一专是指你不可替代，多长标示你可以替代别人。这样你在团队在公司的地位才更加牢固，公司也会给你提供更多的资源。

同时还要开始提升自己的名气，可以通过发表技术博客，提交和参与开源项目，做部门级公司级还有业界分享，参加业界会议等等。在这个信息瞬息万变的互联网时代，保持交流才会让自己不落伍。同时名气大了，能找到更多志同道合的人一起研究技术（探讨生命的起源也不是不可能的），甚至想跳槽，也是放个屁的事儿（意思是简单-_-|| 这都什么比喻）。

5~ 摸摸摸，摸清前方的路

这个时候，如无意外，你也应该成为高级工程师了。编码在工作中比例已经不算太高，更多的工作是承担技术评审、架构设计和项目管理等事情。工作中除了完成自己的事情，可能还需要指导新人，做新人培训，带领新人完成项目。同时还会有一个抉择摆在眼前：继续深入研究技术 or 往管理方向进发。

技术 or 管理，这里没有对错之分，只有合不合适。有的人就不善于交流，同时喜欢专研，可以继续走技术的路，发展成专家；有的人则可能有比较强的领导力，可以带领一群人完成项目，那可以转向管理，成为Team Leader等。

不管选哪个方向，你都已经是个优秀的人，而且应该把这种优秀传承下去。成为导师，使新人变得优秀；成为面试官，挖掘优秀的人；成为讲师，让更多人学习到优秀，等等。

总的来说，头两年一定要打好基础，找准自己的G点，深攻下去；高潮之后，往广度发展，掌握其他相关和不相关的配套知识（这不是矛盾么？Σ( ° △ °|||)︴）；然后摸到自己的目标，发售大胆的爱爱（老了，手抖打多了）吧。不仅自己爱（前端），也要让更多人一起爱（前端）哦。

在浏览器端用JS创建和下载文件

2014-01-02T15:31:00Z

前端很多项目中，都有文件下载的需求，特别是JS生成文件内容，然后让浏览器执行下载操作（例如在线图片编辑、在线代码编辑、iPresst等）。

但受限于浏览器，很多情况下我们都只能给出个链接，让用户点击打开-》另存为。如下面这个链接：

<a href="file.js">file.js</a>

用户点击这个链接的时候，浏览器会打开并显示链接指向的文件内容，显然，这并没有实现我们的需求。more

HTML5中给a标签增加了一个download属性，只要有这个属性，点击这个链接时浏览器就不在打开链接指向的文件，而是改为下载（目前只有chrome、firefox和opera支持）。

下载时会直接使用链接的名字来作为文件名，但是是可以改的，只要给download加上想要的文件名即可，如：download=“not-a-file.js”。

Not enough！

但是这样还不够，以上的方法只适合用在文件是在服务器上的情况。如果在浏览器端js生成的内容，想让浏览器进行下载要如何办到呢？

其实还是有办法办到的，相信很多人都多少听过了DataURI这个词，比较常见的就是图片的src，如：

<img src="`data:image/gif;base64,R0lGOXXXXX">`

DataURI的解释可以移步这里，本人就不在解释了。

那么，现在要将js生成的内容进行下载就有法可依了。封装成一个方法如下：

function downloadFile(aLink, fileName, content){
    aLink.download = fileName;
    aLink.href = "data:text/plain," + content;
}

调用downloadFile之后，用户点击链接，就能触发浏览器下载。

Not enough！

但是，还不够，上面的办法有两个硬伤，会导致流失很多懒人美眉：

下载的文件类型限制死了，美眉要下载处理后的果照怎么办？
下载还要再点击一下，太麻烦啦。

要解决文件类型的问题，可以用浏览器的新API（URL.createObjectURL）来解决问题，URL.createObjectURL通常都是用来创建图片的DataURI用来显示图片，这里用来下载文件，让浏览器来帮我们设定好文件类型。

URL.createObjectURL的参数是File对象或者Blob对象，File对象也就是通过input[type=file]选择的文件，Blob对象是二进制大对象，详细说明可参考这里。

现在，我们只要用content创建一个ObjectURL并赋值给aLink即可解决文件类型的限制问题。

文件的自动下载也挺好办，自己构建一个UI点击事件，再自动触发下，就能实现自动下载啦。

现在来看看最终代码：

function downloadFile(fileName, content){
    var aLink = document.createElement('a');
    var blob = new Blob([content]);
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", false, false);
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
}

现在，只要一调用downloadFile，文件就自动下载了，是不是很爽咧，^_^。

注：目前（2014-01-02）Blob和URL.createObjectURL在标准浏览器里面都不再需要加私有前缀，可以放心使用啦啦啦～～如果你不放心，可以查查Can I Use。

千方百计加速Web之加速DNS解析

2013-10-30T07:54:00Z

通常情况下，做移动开发时，如果要向后台请求数据，都会直接使用TCP通信。但实际上一来HTTP比TCP简单易用多了，二来有很多现有CGI如果要进行改造得花很大功夫。还是会有使用HTTP请求来拉取数据。

在做Android QQ二维码时，扫描到二维码字符串，就是把该字符串用HTTP传给后台，后台解析后返回给客户端，客户端再进行下一步处理。在提交测试后，测试同事发现，在移动网络上，DNS解析会经常失败，导致二维码扫描功能不可用。功能测试不通过，导致无法发布。同时测试喜欢在清空DNS缓存和屏蔽了DNS解析的情况下，二维码解析功能仍然可用。因此这里增加了如下处理：

进入“扫一扫”的界面时，客户端就开始对CGI所在域名进行解析，并把解析结果缓存到本地文件；
发起CGI请求时，还是使用原域名进行请求，如果DNS解析失败，则用第一步缓存的IP替换掉CGI中的域名再发起一次请求。

由于国内有好几个网络运营商，公司在不同的网络环境都有不一样的出口IP，因此选择最近的IP才能快速访问CGI。所以缓存域名结果时，需要区分网络分别保存。
more
这样，当用户的手机上至少成功使用了一次二维码扫描时，CGI对应的IP就保存下来了（至少有一个出口IP）。下次访问（同一次登录或者关闭手机QQ后再打开）时，即使DNS解析失败，还是能使用上一次保存的IP进行访问，可能会相应比较慢（用户从A网络切换到了B网络），但起码保证了功能的可用性。实现起来也不难，Java都有现成的接口了。

主动发起DNS解析只要调用InetAddress的接口即可，把获取到的结果保存到SharedPreferences供下次使用：

public static void lookupIP(Context context, String host){
     SharedPreferences preferences = context.getSharedPreferences("host", 0);
     String ip;
     try {
          InetAddress address = InetAddress.getByName(host);
          ip = address.getHostAddress();
          SharedPreferences.Editor editor = preferences.edit();
          editor.putString(host, ip);
          editor.commit();
          QLog.d(TAG, "lookup address: " + host + ", ip: " + ip);
     } catch (UnknownHostException e) {
     }
}

然后在HTTP请求出现DNS解析错误的时候，用IP替换掉URL中的域名即可：

HttpResponse response = null;
try{
     response = openRequest(context, url, host, method, params, header);
}catch (IOException e){
     //DNS错误改用ip重新发一次
     String ip = getIP(context, host);
     if(ip != null){
          url = url.replace(host, ip);
     }
     response = openRequest(context, url, host, method, params, header);
}

这里之所以不直接用上次保存的IP来替换域名进行访问，是因为在正常情况下，进入“扫一扫”的界面时，已经预先对所用域名进行了预解析，如果解析成功，调用openRequest时就不用DNS查询了；而如果预解析失败了，openRequest的时候还能再尝试一次，失败时才使用IP访问。同时，很多用户都会在移动网络和WIFI网络中切换，如果直接用IP替换域名，会出现用户当前是移动网络，而是用的域名IP是在教育网IP（上一次使用的是教育网WIFI）的情况，导致CGI响应变得更慢。

当然，更好的解决方法是：先检测当前用户的网络环境，如果本地保存了对应网络的IP，直接使用IP请求；如果没有，再改用域名来请求。

还有更进阶的方案：第一次登陆时，从服务器拉取一份host列表（每个域名包括各个网络环境的出口IP），把所有HTTP请求的域名都替换成相应IP，这样就能完美解决DNS不可用、DNS解析失败的情况了。之后维护host文件的更新即可。

【代码分享】根据类型智能提取参数

2013-09-10T09:39:00Z

如果你是个Javascript程序员，那一定经常写下面的代码：

function funcA(url, params, callback, option){
    if(arguments.length == 2){
        //funcA(url, callback);
        if(typeof params == 'function'){
            callback = params;
            params = {};
        }else{
            //funcA(url, params);
            //......
        }
    }else {
        //......
    }
}

当参数变化形式比较少的时候还没问题，当你的方法想对多种传参形式进行容错时，一堆的if else判断就变得很难看了。这时不妨尝试下这个 getArguments 方法。more

var toString = Object.prototype.toString;

var is = function(obj){
    var type = toString.apply(obj);
    type = type.substring(8, type.length - 1);
    return type;
}

var getArguments = function(argus, type1, type2, type3 /*...*/){
    var srcTypes = [];
    var targetTypes = Array.prototype.slice.call(arguments, 1);
    var result = [];
    for(var i = 0, len = argus.length; i < len; i++) {
        srcTypes.push(is(argus[i]));
    }
    for(var m = 0, n = 0, len = targetTypes.length; n < len; ){
        if(srcTypes[m] === targetTypes[n]){
            result.push(argus[m]);
            m++, n++;
        }else{
            result.push(null);
            n++;
        }
    }
    return result;
}

使用方法如下：

function funcB(name, params, callback, option){
    var argus = getArguments(arguments, 'String', 'Object', 'Function', 'Object');
    name = argus[0], params = argus[1] || {}, callback = argus[2], option = argus[3] || {};
    console.log(argus);
}

运行结果如下：

funcB('a',function(){})
//console: ["a", null, function, null]
funcB('a',function(){}, {o:1})
//console: ["a", null, function, Object]
funcB('a',{p:1})
//console: ["a", Object, null, null]
funcB({p:1})
//console: [null, Object, null, null]
funcB(function(){})
//console: [null, null, function, null]

怎么样，是不是简单很多咧？^_^

Compiler@NodeJS（三）- 自定义命令

2013-03-20T15:11:00Z

_接上篇：Compiler@NodeJS（二）- 强大的管道_

本来早就应该写这篇文章的，只是忙的时候忙，闲的时候懒，导致拖了这么久。

不管内置多少命令，需求总是千变万化的，这时候内置命令就不够用了，需要使用者自己编写一些命令。现在来看看怎么做。more

一、内置命令

先来看看内置命令的文件结构是怎样的：

+--- compiler
    +--- cmds
        +--- copy
        +--- concat
            --- index.js
            --- README.md

每个命令都是cmds下面的一个单独目录，如copy、concat等等。每个命令下面都必须有一个index.js文件，作为这个命令的入口。index.js需要export一个属性（async）和一个方法（execute)，这里拿concat命令来说明，如下：

var fs = require('fs'),
    path = require('path');

//指示该命令是异步执行的，默认为false，命令结束后会自动调用 nextTask；
//如果为true，则需在本命令执行完成之后主动调用 nextTask
exports.async = true;
//命令的入口函数
exports.execute = function(task, compileConfig, runOptions, nextTask){
    //省略……
}

当concat命令被调用的时候，compiler会找到concat目录下的index.js，require之后执行它的execute方法，execute的参数说明如下：

参数名	说明
task	Object，这次命令调用要执行的任务，一个task包括任务id、任务要执行的命令（cmd）、任务的输入（source）、任务执行的输出目录（target）、任务的参数（params，也就是在config.json中配置的对应的params，比如下面示例代码中的custA_html中的params）
compileConfig	Object，执行compiler时传入的配置，也就是config.json内容
runOptions	Object，执行该任务时的运行时信息，包括compiler的目录、命令的目录（concat的绝对路径）、命令的文件名（index.js的目录+名字）
nextTask	Function，告诉compiler继续执行下一个命令，在设置了exports.async=true时，需要该命令主动调用，如：nextTask()。

二、自定义命令

自定义命令的写法很简单：

只要建立一个目录，比如custA（这里我放到了项目根目录下的custom_cmds），创建index.js文件，并提供execute方法；
在config.json中配置该命令，让compiler知道哪里可以找到该命令。

有了自定义命令的config.json的样子应该是类似这样的：

{
    "sourceRoot": "./",
    "targetRoot": "./build",
    "fileFormat": "js,css,html,htm,png,gif,jpg,jpeg,wav,json",
    "cmds": {
        "custA": {//配置自定义命令
            "id": "custA",
            "root": "./custom_cmds/custA/"
        }
    },
    "rules": {
        "custA_html": {
            "cmd": "custA",//使用自定义命令
            "target": "./",
            "source": "./",
            "params": {}
                 }
        }
}

如代码所示，只要在cmds项中，添加一个custA的json描述，给出id和根目录（root），其他事情就不用管了。

三、组合命令

在上一篇讲到，compiler最强大的是管道特性，可以用来将命令串联组合。有时候，一些任务可能需要很多个命令来组合完成，但是在每个rule里面写又不是很方便。这时候可以使用自定义命令的另外一种形式，组合命令。使用很简单，只要在config.json配置就行。

{
    "sourceRoot": "./",
    "targetRoot": "./build",
    "fileFormat": "js,css,html,htm,png,gif,jpg,jpeg,wav,json",
    "cmds": {
        "custB": "translate|copy,compress",
        "custC": "custB|ispriter"
    },
    "rules": {
        "translate_html": {
            "cmd": "custB",
            "parmas": {/*..*/}
        ｝
    ｝
｝

其实组合命令就是把原有命令串、并联在一起，方便之后使用，同时组合命令还能再次被组合，是不是很神奇咧？哈哈。命令的组合原则可以看上一篇介绍。不过有点需要注意的，在使用组合命令时，传入的params需要一一对应，比较不顺手。如果是多次组合过的命令，params将变得更加复杂，不过暂时只能这样了。

嗯，到这里，自定义命令的教程就结束了。如果你还是不太明白，可以到github中查看内置命令的实现，如：template-picker、ioffline、concat、copy等等，毕竟千言万语不及代码两行嘛，哈哈。有任何问题也可在本文留言，或者邮件给我，欢迎试用，^_^。

让Java跟Javascript更加亲密

2013-02-19T08:28:00Z

在移动App开发中，为了快速迭代，通常都会使用Native+Web的模式开发。具体来说就是使用Java提供接口，使用WebView控件嵌套Web页面来实现UI和交互。

在Android中，Java可以很方便的提供接口给WebView中的Js进行调用，只要以下一行代码就能搞定：

mWebView.addJavascriptInterface(new JavascriptInterface(), "custom_name");

这样，JavascriptInterface的所有声明为public的方法，都能被mWebView中的Js通过以下方式调用：

window.custom_name.xxx();//xxx为JavascriptInterface的公有方法

而Java需要调用Js时，则是通过WebView实例的loadUrl方法调用：

mWebView.loadUrl("javascript:xxx(yyy)");

这其实跟你在浏览器的地址栏敲下“javascript：alert（1）”的原理是一样的。

一切看起来都是那么的美好，只是……

当Java需要传递大量字符串给Js时，URL就力不从心了。另外，从URL执行的Js，在页面没加载完成时，是有可能导致页面出现undefined错误（因为要执行的那个方法可能还没有声明呢），会引发各种奇形怪状的错误。

那要怎么办呢？

再回看上面Js调用Java接口的地方，可以发现，Js是可以直接调用Java方法并取得Java给的返回值的（必须是可序列化的数据）。那么，为何不试试把Java需要执行的Js方法，保存起来，让Js来读取、执行、并把结果写回？

步骤如下：

Java把Js调用（命令）和回调缓存，如保存到ArrayList；
Js定时轮询Java提供的getCommandList接口；
Js读取到要执行命令，执行它，并把结果通过setResult写回给Java；
Java把对应命令的回调取出并执行。

如此即完成了Java调用Js的流程。

为了方便使用，简单的封装了下，名为AndroidJavascriptBridge，可移步到Github查看源码和示例（MainActivity.java和test.js ）。

使用方法

Android端调用, 加入com.imatlas.jsb 和 com.imatlas.util包, 按如下步骤调用

//1. 创建JavascriptBridge实例  
final JavascriptBridge jsb = new JavascriptBridge(webView); 

//2. 调用Javascript方法
Bundle params = new Bundle();
params.putString("asdfasdf", "123123");
jsb.require("alert", params, new JavascriptBridge.Callback() {
    @Override
    public void onComplate(JSONObject response, String cmd, Bundle params) {
        Log.i("js response",response.toString());
    }
});

//3. 提供Java方法给Javascript调用
//添加个 messagebox 方法给js
jsb.addJavaMethod("messagebox", new JavascriptBridge.Function() {
    @Override
    public Object execute(JSONObject params) {
        Toast.makeText(getApplicationContext(), params.toString(), Toast.LENGTH_LONG)
                .show();
        return "{\"ret\":123}";
    }
});

Javascript端的调用, 须先引入web/js/jsb.js, 之后按如下方式调用

//1. 调用Java方法
jsb.require('messagebox', {'text': '你好, messagebox!'}, function(response){
    alert('调用messagebox回来啦\n' + JSON.stringify(response));
});

//2. 提供Javascript方法给Java调用
jsb.addJavascriptMethod('alert', function(params){
    alert( '------\n' + JSON.stringify(params) + '\n========\n');
    return {'text': 'alert ok'};
});

IOS的话就要反过来了，要改成由Objective-C来轮询Js，来实现Js对Native的调用。

嗯，等改天有时间了，就把IOS也封装进来，用起来就简单多了。

imAtlas

Ghostty + 远程 Linux 终端开发环境全套配置

架构拓扑

第一部分：Mac 本地配置（AI 自动执行指南）

1.1 安装必要 CLI 工具

1.2 配置 Ghostty 终端

1.3 部署 Mac 本地跨端桥接服务

1.4 配置 SSH 客户端反向转发 (~/.ssh/config)

1.5 配置 Mac 本地 Shell 直达函数与解耦配置 (cx)

1.5.1 创建目标服务器配置文件 (~/.config/cx/config)

1.5.2 创建独立工具脚本 (~/.config/cx/cx.zsh)

1.5.3 在 Mac ~/.zshrc 中单行载入

第二部分：远程服务器端配置（AI 自动执行指南）

2.1 部署 Tmux 3.5a 与 ImageMagick 桥接

2.2 配置 Tmux (~/.tmux.conf)

2.3 部署服务器端跨端工具 (pi, pf, up, down, cb, wto)

2.4 安装部署 Yazi (v26.9+) 与插件套件

2.6 终端美化与极简提示符 (~/.config/starship.toml)

2.7 部署远程 Shell 快捷别名与工作流 (~/.bashrc)

第三部分：完整验证核对清单（验收流程）

第四部分：日常操作随手备忘

老码农的小感想

使用CSS mask 实现图片的斜线拼接

每次必说题外话

什么是斜线拼接

CSS mask & linear gradient

第一步，显示两张图

画个斜线

层叠

肿么安装Effect Game

环境准备

安装各种系统依赖包

创建 Effect Game 的安装目录

安装 perl 和 cpan

安装各种 perl 模块

安装图片服务 ImageMagick

安装音视频模块 MPG123 and OGG Encoder

安装 Apache

配置项目

初始化各种环境

All Done

谈前端工程师的职业规划

1~2 吸吸吸，疯狂的吸取知识

3~4 大大大，扩展知识面

5~ 摸摸摸，摸清前方的路

在浏览器端用JS创建和下载文件

Not enough！

Not enough！

千方百计加速Web之加速DNS解析

【代码分享】根据类型智能提取参数

Compiler@NodeJS（三）- 自定义命令

一、内置命令

二、自定义命令

三、组合命令

让Java跟Javascript更加亲密

使用方法

1.4 配置 SSH 客户端反向转发 (`~/.ssh/config`)

1.5 配置 Mac 本地 Shell 直达函数与解耦配置 (`cx`)

1.5.1 创建目标服务器配置文件 (`~/.config/cx/config`)

1.5.2 创建独立工具脚本 (`~/.config/cx/cx.zsh`)

1.5.3 在 Mac `~/.zshrc` 中单行载入

2.2 配置 Tmux (`~/.tmux.conf`)

2.3 部署服务器端跨端工具 (`pi`, `pf`, `up`, `down`, `cb`, `wto`)

2.6 终端美化与极简提示符 (`~/.config/starship.toml`)

2.7 部署远程 Shell 快捷别名与工作流 (`~/.bashrc`)