Tabby （前身是 Terminus）是一款高度可配置的终端模拟器、SSH 和串口客户端，支持 Windows，macOS 和 Linux。



:::info{title="相关信息"}
官网地址：https://tabby.sh/
:::




## 基本信息

Tabby 是什么：
- Tabby 是 Windows 标准终端 (conhost)、PowerShell ISE、PuTTY、macOS Terminal.app 和 iTerm 的替代品
- Tabby 不是一个全新的 shell，也不是 MinGW 或 Cygwin 的替代品。
- 它也不是轻量级的 - 如果你对内存的占用很敏感，请考虑 Conemu 或 Alacritty


它的主要功能有：

- 集成 SSH，Telnet 客户端和连接管理器
- 集成串行终端
- 定制主题和配色方案
- 完全可配置的快捷键和多键快捷键
- 分体式窗格
- 自动保存标签页
- 支持 PowerShell（和 PS Core）、WSL、Git-Bash、Cygwin、MSYS2、Cmder 和 CMD
- 在 SSH 会话中通过 Zmodem 进行直接文件传输
- 完整的 Unicode 支持，包括双角字符
- 不会因快速的输出而卡住
- Windows 上舒适的 shell 体验，包括 tab 自动补全（通过 Clink）
- 为 SSH secrets 和设置集成了加密容器
- SSH、SFTP 和 Telnet 客户端可用作 Web 应用（也可托管）



## SFTP

Tabby 集成了 SFTP，可以通过面包屑切换路径，并支持上传和下载文件，还允许拖拽上传文件。但比较遗憾的是，截止目前（2024.12.8），还没办法上传/下载文件夹。

要在终端中确定远程 Shell 的路径，以实现复制文件路径和在当前路径下打开 SFTP 等功能，需由 iTerm 实现的 OSC 1337 协议报告其 CWD。参考：https://github.com/Eugeny/tabby/wiki/Shell-working-directory-reporting

我的远程服务器使用 bash，因此我需要在 `~/.bash_profile:` 文件中添加以下语句：
```bash
export PS1="$PS1\[\e]1337;CurrentDir="'$(pwd)\a\]'
```

## 配置和连接

### 命令行

可以保存自己常用的命令行，即按指定的参数执行特定命令。

比如在使用 natapp（frp 也是同理）时，需要通过命令行启动，因此我们可以新建配置，使用 CMD 模板，在命令行一栏设置：
``` cmd
cmd.exe /k natapp.exe
```

``` cmd
cmd.exe /k frpc.exe -c frpc.toml
```
并指定命令的工作路径，就可以直接通过这个配置启动内网穿透。

或者为 MongoDB 设置启动命令：

``` cmd
mongod.exe --dbpath\=g:\\xxx
```
Tabby 贴心地准备了不带转义字符的参数输入项，再也不怕参数不对了。

当然配置项里还可以设置环境变量和是否以管理员身份运行。比如 MongoDB 就需要管理员身份运行。

### SSH 配置

Tabby 可以从 `.ssh/config` 中自动导入连接配置，如果你使用过如 vscode 等 IDE 远程连接功能，你就应该知道这个配置项有多方便。

但是值得一提的是  `Host` 字段中最好不要带 `@` 否则会被直接当 ssh 命令解析了。

从 `.ssh/config` 中导入的连接配置，如果存在 `"` （比如 vscode 生成的配置）会造成密钥路径解析失败，导致远程连接无法建立，目前这个问题依然存在，如果遇到请手动修改去掉 `"`。参见：https://github.com/Eugeny/tabby/issues/7875

Tabby 配置使用记录

如果有部署在内网上的 web 服务，想要通过公网进行访问（比如本地部署的测试），可以借助公有或自建的内网穿透完成。本文使用 frp 进行内网穿透服务的搭建。

:::info{title="相关信息"}
仓库地址：https://github.com/fatedier/frp

文档说明：https://gofrp.org/zh-cn/docs/
:::




## frp 简介

根据 GitHub 上的描述，frp 是一个专注于内网穿透的高性能的反向代理应用，支持 TCP、UDP、HTTP、HTTPS 等多种协议，且支持 P2P 通信。可以将内网服务以安全、便捷的方式通过具有公网 IP 节点的中转暴露到公网。


## frp 安装和启动

在 Release 页面下载客户端和服务端，由于云服务器和个人设备的系统不一致，需要分别下载两个系统上的安装包（安装包内有客户端和服务端的程序）。

服务端保留 `frps` 和 `frps.toml` 配置文件（linux），而客户端保留 `frpc.exe` 和 `frpc.toml` 文件（windows）。

安装完成之后就可以在命令行中启动了。有一点需要注意，由于程序的需要在命令行中启动，我希望在我的 **Tabby** 终端中添加一个 frp 启动配置，因此配置项应该写成如下形式。

```
cmd.exe /k frpc.exe -c frpc.toml
```

由 `cmd.exe` 接收要执行的程序，以及该程序的参数（这里是 `-c frpc.toml`）。使用 `/k` 或 `/c` 参数设置要执行的程序，前者在执行的程序退出后命令行继续保留，而后者命令行会退出。

在 Ubuntu 中就直接设置以下命令即可：

```
./frpc -c frpc.toml
```


## frp 的配置

根据用途的不同，官网给出了不同的配置示例。我们的需求是访问内网的 Web 服务。

注意：
- 服务端和客户端都需要 `-c` 参数
- 不同版本的安装包内默认的配置文件格式不同，所以各个教程中的配置语法也不尽相同
- 不同版本的配置变量名也有一定的区别，请参考对应的文档

### 基础配置

- 服务端配置文件
    
    ```toml
    bindPort = 7000
    vhostHTTPPort = 8090
    ```
    
    服务端设置内网穿透服务端监听端口 `bindPort` 和 	HTTP 类型代理监听的端口 `vhostHTTPPort`。
    

- 客户端配置文件

    ```toml
    serverAddr = "xxx.xxx.xxx.xxx"
    serverPort = 7000

    [[proxies]]
    name = "web"
    type = "http"
    localPort = 8090
    customDomains = ["frp-test.zerolacqua.top"]
    ```
    
    客户端设置连接服务端的地址 `serverAddr` 和端口 `serverPort`（与服务端 `bindPort` 一致）。
    每个 `[[proxies]]` 表示一个代理项，要设置代理的类型、本地端口，`customDomains` 用于设置 `http` 类型，可通过 `customDomains` 访问本地的 `localPort`。

### 管理页面

frp 可以在指定端口开启管理界面，包括服务端的面板和客户端的管理界面。`auth.token` 用于验证客户端。`webServer` 则是相应的面板设置。


- 服务端配置文件

```toml
auth.token = "token"

webServer.addr = "0.0.0.0"
webServer.port = 7500
webServer.user = "user_name"
webServer.password = "password"
```

- 客户端配置文件

```toml
auth.token = "token"

webServer.addr = "127.0.0.1"
webServer.port = 7400
webServer.user = "user_name"
webServer.password = "password"

[[proxies]]
name = "admin_ui"
type = "tcp"
localPort = 7400
remotePort = 7400
```

如果需要访问客户端（本地）的管理界面，只需将其也进行内网穿透。注意这里使用 `tcp` 类型。`tcp` 类型可以配置多端口。

## 其他问题

如果想让服务端在会话结束后继续运行，可以使用 tmux 进行管理。

利用云服务器搭建内网穿透服务

起因是我的朋友 LittleFaith 有一个终端风格的个人主页，我觉得很有趣。但是自己也没工夫从头写了，就到 github 上淘一淘，发现也有不少人对终端风主页感冒。我就选了一个我比较喜欢，star 数比较多的仓库（[Cveinnt/LiveTerm](https://github.com/Cveinnt/LiveTerm)）开始加工了。和之前一样，这个项目算是一个前端项目，不太复杂，而且用的是 `Next.js`，就当是入门一点 `React` 好了。整个项目本来改一下配置文件就能有不错的效果了，<del>所以也没有太大的工作量</del>。

:::info{title="相关信息"}
仓库地址：https://github.com/ZerolAcqua/acqua-term/

体验地址：https://vanblog.zerolacqua.top/c/acqua-term/
和 https://zerolacqua.github.io/acqua-term/


:::





## 资源准备

终端 banner 生成：
- https://manytools.org/hacker-tools/ascii-banner/

网页 favicon 生成：
- https://www.iconfinder.com/
- https://www.favicon-generator.org/

## 技术栈
在原仓库的基础上
- 将框架从 `next12` 升级到了 `next15`。

## 环境配置

next.js 的配置文件如下：

```ts
import type { NextConfig } from "next";

// for github action
const isGithubAction = process.env.GITHUB_ACTIONS === "true";
const isProd = process.env.NODE_ENV === 'production';
let basePath = "";

if (isGithubAction) {
  // 去掉 `<owner>/`
  const repo = process.env.GITHUB_REPOSITORY!.replace(/.*?\//, '');
  basePath = `/${repo}`
} else if (isProd) {
  basePath = '/c/acqua-term';
}


const nextConfig: NextConfig = {
  basePath: basePath,
  output: 'export',
  env: {
    BASE_PATH: basePath,
  },
  compiler: {
    removeConsole: isProd ? { exclude: ['error'] } : false,
  },
};

export default nextConfig;
```

变量 `isProd` 用于生产环境部署，变量 `isGithubAction` 用于 Github Action 自动部署。

通过判断部署环境，确定 `basePath` 子路径。`env.BASE_PATH` 用于提供正确的 favicon 资源路径。

`output` 用于设置构建静态网页。

`removeConsole` 配置项目用于在生产环境中去掉除 console.error 以外的控制台输出。


关于生产环境具体参见**部署工作**一节

## 迁移工作

迁移工作的主要困难在于部署路径在子路径下。

### 网页图标引入

网页图标放置在与 `src` 同级的 `public` 目录下，需要利用 next.js 配置中定义的 `BASE_PATH` 环境变量拼接出资源路径。

```
 <Head>
        <meta
          name="viewport"
          content="initial-scale=1.0, width=device-width"
          key="viewport"
          maximum-scale="1"
        />
        <link rel="icon" href={`${process.env.BASE_PATH || ""}/favicon.ico`} />
      </Head>
```



### 字体引入

使用 `next/font` 进行字体导入和优化并使用 Tailwind CSS。

```tsx
import localFont from "next/font/local";

const hack = localFont({
  src: "../assets/fonts/Hack-NF.ttf",
  fallback: ["monospace"],
  variable: "--font-hack",
});
```

然后进行引入，使用时是 `font-hack`

```tsx
  <div
    className={`${hack.variable} font-hack text-light-foreground dark:text-dark-foreground min-w-max text-xs md:min-w-full md:text-base`}
    onClick={onClickAnywhere}
  >
    <main className="bg-light-background dark:bg-dark-background w-full h-full p-2">
      <Component {...pageProps} inputRef={inputRef} />
    </main>
  </div>
```

最后，在 `tailwind.config.ts` 中添加 CSS 变量，定义时是 `hack`

```ts
export default {
  ...
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      ...colors,
    },
    extend: {
      fontFamily: {
        'hack': ['var(--font-hack)'],
      },
    },
  },
  ...
} satisfies Config;
```

参考：https://nextjs.org/docs/pages/building-your-application/optimizing/fonts

## 部署工作

### 子路径部署

本站部署网页需要挂载在 `/c/<webname>`路径下，因此需要设定 `basePath`。

### Github Action 自动部署

创建 `.github\workflows\gh-pages.yml` 文件，在 Github 上启动 Action。

```yml
name: GitHub Pages

on:
  workflow_dispatch:
  push:
    branches:
      - main
permissions:
  contents: write
jobs:
  deploy:
    runs-on: ubuntu-latest
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
    
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: |
          npm run build
          touch out/.nojekyll

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: out
          clean: true
```

- `on` 字段用于定义触发 Action 的时机，设定为推送到 main 分支时运行，`workflow_dispatch` 表示也可以手动触发。

- 使用 `actions/setup-node@v4` 可以自动启用 npm 的缓存，无需每次运行都重新下载（但是 `npm i` 还是必需的）。

- 使用 `npm ci` 替代 `npm i`，有更好的性能。

- 使用 `npm run build` 完成构建工作后，还需要创建 `.nojekyll` 文件，避免 Github Page 忽略 `_next` 文件夹。

此外，由于 Github Page 只能部署在 <username>.github.io 下，除了
 <username>.github.io 仓库，其他仓库都挂载在 `<username>.github.io/<reponame>` 子路径下，因此在 Github Page 上部署时，需要单独指定 `basePath`，这也是环境配置中为 Github Action 单独设置的原因。
     
```ts
const isGithubAction = process.env.GITHUB_ACTIONS === "true";

let basePath = "";

if (isGithubAction) {
  // 去掉 `<owner>/`
  const repo = process.env.GITHUB_REPOSITORY!.replace(/.*?\//, '');
  basePath = `/${repo}`
} 
```

## 完成情况

- [ ] 代码编写
    - [x] 隐藏命令
    - [x] 重构命令列表导出逻辑
    - [ ] 切换到 App 路由
- [x] 自动部署到 Github Page

## 总结

本项目和之前的 `Vue` 项目相比，最让我头疼的是这个资源文件的路径问题，不知道是不是因为没设置好的原因。

- 引入字体的时候，无法使用路径别名
- 引入 favicon 时，不能自动添加 `basePath`

这个项目后续我还想把它转为 App 路由，中间尝试了几次都失败了。希望能好好学学 React 再回来折腾一下，不过这都是后话了。

终端风格主页

前段时间冲浪的时候发现了一个五笔字根练习的小项目（[yhf7952/WubiGame](https://github.com/yhf7952/WubiGame/)），感觉还挺有意思，<del>遂抄</del>。它本身只是一个前端小项目，是原作者学习 Vue 的时候写的第一个项目。那我也就顺便用这个项目学习一点 Vue 的知识喽。
    

:::info{title="相关信息"}
仓库地址：https://github.com/ZerolAcqua/wubi-game

体验地址：https://vanblog.zerolacqua.top/c/wubi/
:::



## 资源处理

### 码字修正

原项目的二级简码表有一些缺漏和错字，我进行了编辑修改。实际上由于不同输入法的实现和码表存在差异，因此二级简码有部分码字是不同的。一些表的部分二级简码对应优先对应词组，一些简码理论上能打出单字却没有对应码字（空码），因而我也无法给出完全正确的二级简码表。最后我综合几个码表，选择了空码最多（也即和其他码表定义冲突最小）的码表。

### 字体编辑

原项目显示字根采用了特殊字体。通过引用字体中字根对应的字符，即可实现字根显示（和图标字体显示应该是同样的原理）。但是字体中的字根也存在错误，需要修改。在线查看字体，可访问[该网站](https://www.bejson.com/ui/font/)，字体编辑可使用 [FontCreator](https://www.high-logic.com/font-editor/fontcreator)。

## 技术栈
在原仓库的基础上
- 将前端框架从 `Vue2` 升级到 `Vue3`
- 将组件库从 `element` 升级到 `element-plus`。
- 使用 `TypeScript` 代替 `js`
- 使用 `Pug` 代替 `html`。

## 环境配置

### Vite 配置

```ts
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

// https://vite.dev/config/
export default defineConfig({
  base: '/c/wubi/',
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    ElementPlus({}),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
```

由于部署的生产环境使用的是子路径（ https://vanblog.zerolacqua.top/c/wubi/ ），因此设置了 `base` 项。

`unplugin-vue-components` 和 `unplugin-auto-import` 等是用于自动按需导入 Element Plus 组件库的。

## 迁移工作

### 老项目运行问题

老项目运行 `vue-cli-service serve` 时报错

```
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:79:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports 
```

原因是项目依赖了过时的 SSL。

解决方案参见：https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported

### vue eslint 问题

使用 `pug` 作为模板时，使用 `<script setup>` 检查不到 `<templete lang="pug">` 中使用的组件和变量，报 `no-unused-vars` 错误。

- 解决方式 1：切换到 `html` 模板
- 解决方式 2：眼不见心不烦，变量未使用不会有警告

    ```js
    // eslint.config.js 
    export default [
      {
        rules: {
          '@typescript-eslint/no-unused-vars': 'off',
        },
      },
    ]
    ```
    
    ```json
    // tsconfig.json 
      {
      "compilerOptions": {
        "noUnusedLocals": true,
      },
    }
    ```

解决方案参见：https://github.com/vuejs/language-tools/issues/47

### Element 组件库升级

库的变化

- element-plus 中更新了一些元素的 display 属性
- element-plus 中的一些组件名发生了改变
- element-plus 一些组件的 Api 发生了改变
    - 如 ElMessage

要引入新的组件库，参考：https://element-plus.org/zh-CN/guide/quickstart.html


## 代码编程

### 在兄弟组件之间通信

兄弟组件之间通信一般采用全局组件通信的方案，并不推荐借助父组件中转的通信。

常用的全局组件通信方法包括：
- EventBus
- Reactive State
- Vuex
- Pinia

由于本项目是一个很小的 demo，我采用了 Reactive State 方案，简单易懂：

```ts
// src/store.ts
import { reactive } from 'vue'

export interface Store {
  statData: StatData,
  incrementRightTimes(): void,
  incrementTotalTimes(): void,
  setStatData(statData: StatData): void,
  resetStatData(): void,
}


export interface StatData {
  rightTimes: number,
  totalTimes: number,
  startDate: Date,
}


export const store: Store = reactive({
  statData: {
    rightTimes: 0,
    totalTimes: 0,
    startDate: new Date(),
  },
  incrementRightTimes() {
    store.statData.rightTimes++
  },

  incrementTotalTimes() {
    store.statData.totalTimes++
  },

  setStatData(statData: StatData) {
    store.statData = statData
  },

  resetStatData() {
    store.statData = {
      rightTimes: 0,
      totalTimes: 0,
      startDate: new Date(),
    }
  },


})
```

在 `src` 目录下创建一个状态中心，设置若干需要使用的属性，并添加更新数据的方法。

在需要更改状态的组件中调用更新方法：
```ts
// GameComponent.vue
// input 事件
function onInput(str: string) {
  const input = str.toLowerCase()
  switch (props.gameMode) {
    case GameMode.zigen:
    case GameMode.yiji:
      if (input === d1.value![0]) {
        getData()
        retryTimes.value = 0
        isRight.value = true
        store.incrementRightTimes()
      } else {
        isRight.value = false
        retryTimes.value++
        if (retryTimes.value >= 3) {
          ElMessage({
            message: `错了哦，正确答案是：${d1.value![0].toUpperCase()}`,
            grouping: true,
            type: 'error',
          })
        }
      }
      store.incrementTotalTimes()
      intext.value = ''

      return
    case GameMode.erji:
      if (input === d1.value![1]) {
        getData()
        store.incrementRightTimes()
        isRight.value = true
      } else {
        isRight.value = false
      }
      store.incrementTotalTimes()
      intext.value = ''

      return
    default:
      throw new Error('GameMode error')
  }
}

function reset() {
  d1.value = undefined
  d2.value = undefined
  d3.value = undefined
  d4.value = undefined
  d5.value = undefined
  getData()
  store.resetStatData()

  isRight.value = true
  document.getElementById('intext')!.focus()
}
```

而后在需要获取状态的组件中进行读取：
```ts
// StatComponent.vue
const rightTimes = computed(() => store.statData.rightTimes)
const totalTimes = computed(() => store.statData.totalTimes)
const startDate = computed(() => store.statData.startDate)
```

不同的通信方案可参考：https://vue3.chengpeiquan.com/communication.html

## 样式设计
### 响应式布局

使用基于断点的隐藏类，以及组件的响应式属性（xs、sm、md、lg 和 xl），当尺寸在不同大小时，展示不同的卡片数量：

```pug
  div
    //- 根据大小屏幕显示不同的 gutter
    el-row(
      :class="{ zigen: gameMode == GameMode.zigen }"
      class="box"
      :gutter= 15
      style="margin-top: 50px"
    )
      el-col(:xs="3" :sm="3" :md="2" :lg="2" :xl="2")
      el-col(:xs="6" :sm="6" :md="4" :lg="4" :xl="4")
        el-card(
          shadow="always"
          :class="isRight ? 'boderNormal' : 'boderError'"
        )
          | {{ d1[1] }}
      el-col(:xs="6" :sm="6" :md="4" :lg="4" :xl="4")
        el-card(shadow="always")
          | {{ d2[1] }}
      el-col(:xs="6" :sm="6" :md="4" :lg="4" :xl="4")
        el-card(shadow="always")
          | {{ d3[1] }}
      el-col.hidden-sm-and-down(:span="4" )
        el-card(shadow="always")
          | {{ d4[1] }}
      el-col.hidden-sm-and-down(:span="4" )
        el-card(shadow="always")
          | {{ d5[1] }}
      el-col(:xs="6" :sm="3" :md="2" :lg="2" :xl="2")
```

尽管采用了自动按需导入 Element Plus 的方案，但若想使用基于断点的隐藏类 `hidden-sm-and-down` 还是需要引入文件：
```ts
import 'element-plus/theme-chalk/display.css'
```


使用媒体查询，当尺寸缩放过小时，调整字体卡片的大小：

```css
/* xs 以上 */
@media screen {
  .box {
    font-size: 1cm;
    text-align: center;
    line-height: 45px;
  }
}
/* xs 以下 */
@media screen and (max-width: 300px) {
  .box {
    font-size: 0.6cm;
    text-align: center;
    line-height: 15px;
  }
}
```



### 排版
- 菜单栏对齐

    删除菜单栏的 `border-bottom` 并调整颜色，同时需要注意 `<style>` 有不同的作用域。

- 页脚置底

    `el-container` 的 `display` 是 `flex` ，故可以
    
    ```css
    .el-container {
       min-height: 100vh;
    }
    ```
    


## 完成情况

目前项目已归档，不会再做更改

- [x] 代码编写
    - [x] 迁移至 pug 和 ts
    - [ ] 迁移至 SASS
    - [x] 组件拆分
    - [x] 迁移至组合式 API 
    - [ ] 单页面路由
- [x] 响应式布局
    - [x] 打字卡片
    - [x] 统计信息
- [x] 页面
    - [x] 菜单栏对齐
    - [x] 页脚置底
    - [x] 网站图标
    - [ ] 二、三级简码表格化

## 总结

草草写了一篇博文进度记录，细致度和上一篇差很多。中间拖了太久，甚至后面那个 `next.js` 项目也完成了，导致遗忘了不少细节，希望下次能边学习边记录吧。