想要在外面随时可以查看路由器，就需要启用软路由的 ZeroTier 功能，经过配置后就可以在任何安装了 ZeroTier 的设备上直接访问内网。

• 路由器启用 ZeroTier
• 登录 ZeroTier 网站，创建 Network，获取 NetworkId。

在任何安装 ZeroTier 的设备上通过 NetworkId 加入该网络，即形成了一个 ZeroTier 打造的局域网。

• 软路由/电脑/移动设备 ZeroTier 界面通过输入 NetworkId 加入网络。
• 登录 ZeroTier 网站，在 Members 下通过地址确认各设备并授予权限，ZeroTier 会自动分配一个 ip 地址，形成一个局域网。
• 如果想要保持软路由的地址一致，在 ZeroTier 网站界面 Managed Routes 添加一个跳转，Destination 为目标软路由地址，via 为 ZeroTier 为软路由设备自动分配的地址。

网上给红米 AX6000 刷 OpenWrt 的内容多如牛毛，我也是参考了恩山论坛的帖子，期间也用小米路由器救砖工具重置过几次路由器，在此记录一下参考的网站和遇到的问题。

刷机步骤

在红米 AX6000 闭源驱动 op下载作者编译的 ImmortalWrt 固件，参考红米 AX6000 X-WRT 固件刷机教程刷入 X-Wrt 底包，之后在 X-wrt web 界面刷入下载好的 ImmortalWrt。

遇到的问题

• 按教程刷入 X-Wrt 或者 OpenWrt stack 底包重启后没有 Wifi 信号，导致无法连接路由器登陆后台。

  这是因为底包默认关闭了 Wifi 功能，将路由器通过网线连接电脑，在控制面板/网络和 Internet/查看网络信息，找到设备查看详细信息就可以看到电脑自动分配的 IP 地址了。如果自动分配的 IP 地址打不开，可以点击属性，在 IPv4 设置里手动设置 IPv4 地址。

  根据 Ip 地址登录之后可以在菜单栏无线里面打开 Wifi 功能。

• 底包 Web 页面刷入 ImmortalWrt 有警告提示。

  不慌，大胆刷。

• PassWall TCP 节点分流无效，指定单个节点却正常。

  先选择单个节点确保网络正常翻墙，选择规则管理，checkbox 勾选 geoip geosite 规则并且手动更新。

如何应用.gitignore文件的更新。

1
2
3
4
5

git rm -r --cached .  #清除缓存
git add . #重新trace file
git commit -m "update .gitignore" #提交和注释
git push origin master #可选，如果需要同步到remote上的话

记录一下 n1 盒子刷上 OpenWrt 之后的一些问题。

n1 盒子作旁路由

• n1 盒子与主路由保持同一网段，譬如主路由是 192.168.0.1，则 n1 盒子 ip 是 192.168.0.x，x!=1。

• 主路由
  打开 dhcp

• n1 盒子
  设置网关为主路由的地址 192.168.0.1
  关闭 dhcp 服务

passwall

• 如果想针对特定设备能够翻墙，则需要在对应设备设置网关和 dns 为 n1 盒子的 ip 地址

• 如果想要不区分设备，则要在主路由 dhcp 设置网关和 dns 为 n1 盒子的 ip 地址，这样就相当于为每个设备自动下发了对应的网关和 dns 设置

这种方式旁路由和主路由都能够实现翻墙，所有的链接会经过 passwall 的分流处理交由主路由。

openClash

这种方式只要 openClash 配置好就能上网，无需操作主路由，而且连接主路由正常上网，链接 n1 盒子翻墙上网，分配明确。

在WSL命令行中输入命令code .应该会呼出Windows的VSCode,但是却提示错误

1

Setting up server environment: Looking for /home/xxx/.vscode-server/server-env-setup. Not found.

可以手动删除/home/xxx/.vscode-server，此时运行code .会重新安装VSCode。

使用 input 标签 type=‘color'属性调出浏览器的调色板，监听 input 事件实时获取取色值，将 input 标签隐藏以应用自定义样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<style>
  .palette {
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    background-color: #000;
  }
  input {
    opacity: 0;
    position: absolute;
    overflow: hidden;
    height: 30px;
    width: 30px;
  }
</style>

<div class="palette">
  <input
    type="color"
    onChange="handleChange(event)"
    onInput="handleInput(event)"
  />
</div>

<script>
  const handleChange = (e) => {
    // 监听调色板展示/关闭
    console.log(e.target.value)
  }

  const handleInput = (e) => {
    // 监听颜色选择
    const color = e.target.value
    document
      .querySelector('.palette')
      .setAttribute('style', `background-color:${color}`)
  }
</script>

开发过程中需要使用移动设备测试页面，为了方便调试，可以通过 PC 连接移动设备(Android)，使用 Chrome 浏览器 Devtool 像调试 PC 页面一样调试移动设备。

• 电脑连接手机

  手机开发者模式打开 usb 调试；或者无线调试，使用 adb 命令连接设备。

• 导航栏地址 chrome://inspect/#devices

  允许浏览器通过 usb 或者 network 查找连接的手机

以上操作完成后，会在 Remote Target 下看到自己的手机型号，此时在手机浏览器打开任意页面都会反映在当前页面，通过 inspect 调试相应页面即可。

当需要把嵌套数组转成扁平数组时可以使用 flat 方法，arr.flat(depth) depth 指的是需要拍平的深度。

1
2
3
4
5

const arr = [1, 2, 3, [4, 5], [[6, 7], 8], 9]

arr.flat() // [ 1, 2, 3, 4, 5, [ 6, 7 ], 8, 9 ]
arr.flat(1) // [ 1, 2, 3, 4, 5, [ 6, 7 ], 8, 9 ]
arr.flat(2) // [ 1, 2, 3, 4, 5,6, 7, 8, 9]

平时循环对象一直使用 Object.keys(),最近学到了用 Object.entries()感觉更方便。

1
2
3
4
5
6
7
8
9

const obj = [
  {
    name: 'wang',
    age: 38,
  },
]
for (const [name, age] of obj.entries(obj)) {
  console.log(name, age)
}

在需要批量下载文件时，总是最后一个文件能够下载成功，在 Chrome Devtool 的网络请求里可以看到前面的文件请求状态是 canceled，代码如下。

1
2
3
4
5
6
7
8
9
10

const saveFile = (url, filename) => {
  const link = document.createElement('a')
  link.href = url
  link.download = filename
  link.click()
}

fileList.forEach((file) => {
  saveFile(file.url, file.filename)
})

• 原因：把 a 链接当成一次网页导航，当点击 a 链接跳转时又重复点击该链接，浏览器此时会重置之前的跳转并重新计算，这就导致了之前的网络请求都被 canceled。

• 解决方法：使用 iframe 隐藏下载，但是缺点是会在 body 里面嵌入多个 iframe。

  1 2 3 4 5 6 7 8 9 10 11

  const saveFile = (url: string) => { const iframe = document.createElement('iframe') iframe.setAttribute('sandbox', 'allow-downloads allow-scripts') iframe.src = url iframe.setAttribute('style', 'display: none') document.body.appendChild(iframe) setTimeout(() => { iframe.remove() }, 1000) }

参考链接:Browser is cancelling multiple file download requests