Attack on Life ⚔️

今年又更新了软硬件，这里总结下

萤石C6C家用摄像机

2023-01月份入手，233CNY，带32G存储卡。之前尝试购买过小米的，画面差也就算了，拿到手就升级系统变砖，果断退货。

使用一年下来萤石很满意，当然软件体验还是差点，不过足够了。

最近做WebShell有个需求即命令输入框支持自动补全。除了本身补全逻辑之外，需要解决的就是补全样式效果实现。

这里总结下实现技巧

补全效果涂上，输入框输入h,补全显示之后的ello。但是两者颜色一定是不同的。

CSS本身并不支持文本字符中比如前几个字符颜色，因此无法纯CSS解决如上的文本颜色显示。

因此需要DOM+JS解决。

WebShell下拷贝粘贴的支持最近遇到了问题，这里总结下

浏览器剪贴板权限

当浏览器剪贴板权限关闭的情况下，在使用Clipboard API时会报错。但由于有些用户的浏览器有安全要求，因此剪贴板权限是不打开的，那么这时WebShell还可以正常支持复制粘贴吗。答案是可以的，因为浏览器也有拷贝和粘贴支持

浏览器的拷贝粘贴

以Windows为例，拷贝是⌃+c，粘贴是⌃+v

Online会员可以免费玩经典小游戏比如双截龙，当然还有其它一些福利。最近因为想玩小游戏，因此订阅下会员体验下。

会员订阅

我选择走HK的个人会员25HKD/月，家庭会员性价比更高，但拼车人数多，这里就不折腾了。

支付方式

支持Visa，因此国内信用卡绑定即可

网页热键监听处理可以使用mousetrap.js。这个lib已经处于不维护状态，但胜在好用，还是很推荐。

这里介绍下使用

feat

支持单/组合键/gmail风格/Konami Code 按键绑定

1. gmail风格即比如g i，连续输入这样的按键可以执行某个动作，这种热键的好处是很容易规避浏览器/插件的热键
2. Konami Code 就有点像魂斗罗时，特定的按键触发30条命一样。个人认为这种按键绑定，如有必要，设计成网页彩蛋挺合适

最近做的WebShell-命令面板功能上线，这里Mark下其中的设计/思考

解决痛点

先解释下，为什么要做。

网页WebShell的功能在不断增加，不可避免会造成用户进行一些操作时，整个操作路径会很长。举个🌰，用户想登录一台机器。没有命令面板之前，需要这样做e

1. 光标点击连接管理
2. 光标聚焦搜索
3. 光标选中连接配置
4. 点击登录

最近在做WebShell自定义热键，遇到的问题是网页热键受限于浏览器和操作系统，有些热键无法捕获，比如command t。

经过调查发现navigator.keyboard.lock可以解决这个限制问题，这里记录下使用过程中的一些问题和心得

不可拦截热键

以Mac为例，实际测试比如以下几个热键不支持拦截。即JS层面我们无法捕获这类按键，也就阻止默认行为

1
2
3
4
5

⌘ N 创建新window
⌘ T 创建新Tab
⌘ W 关闭Tab
⌘ ⇧ [ 左Tab
⌘ ⇧ [ 右Tab

这个似乎无解，但有了lock api 这些就有可能解决了

GPTs 6号发布距今有几天了，玩了下觉得非常不错，熟悉后对于个人使用GPT还是很方便的。这里记录下使用过程中的一些问题和心得

GPTs

GPTs即每个人可以自定义创建个性化的GPT可以根据自己的需求进行配置，比如聊天助手、知识库助手、API助手等等。这里的GPTs是基于ChatGPT的，所以可以理解为ChatGPT的升级版，可以自定义更多的功能。

要求

使用GPTs需要满足以下条件

终端可以显示图片吗？当然，这里就总结下基于xterm.js实现图片显示

效果

实现

最近WebShell开发时，遇到一个动态调整样式的需求即当终端开启上下分屏，上侧出现编辑器的时候，下侧的终端需要调整样式，具体来说是调整最小高。这里考虑走css实现。

分析

has函数可以使用css选择器来判断后面或者子后代是否存在某个元素，因此这样利用has可以捕获到上下分屏的情况下的编辑器元素，之后就可以正常使用+获取兄弟元素，再实际调整样式了。当然JS也可以实现，但CSS实现更加简单

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<style>
  .terminal {
    width: 100%;
    min-height: 200px;
    background-color: #4bd58d;
  }
  .editor{
    width: 100%;
    height: 100px;
    background-color: #003dfd;
  }

  .editor:has(+.terminal) +.terminal{
    background-color: #ff0000;
  }
</style>