11月
21
github 指定 ssh key。之所以会出现这个问题，是因为对于 github，只允许存在一份 ssh key。如果该 ssh key 绑定了 A 账号，B 账号则绑定不了。这个时候就需要再生成一份 ssh key，对新的 ssh key 进行绑定。但是，推送拉取代码的时候，默认是 ~/.ssh/id_rsa。所以这个时候，特定的代码指定特定的 ssh key 就很有必要了。
解决问题
- 绑定 ssh key 时，出现 github Key is already in use 的问题。
- 多个 ssh key，特定项目指定特定的 ssh key 的问题。
先生成新的 ssh key
# 后边的参数 -f 指定生成 ssh key 对的名字
# 可以不加该参数，回车生成的时候，自己手动输入名字
ssh-keygen -t rsa -C email@email.com -f github
# 一直回车，干到生成为止，此时， `~/.ssh/` 下也许有好几份 ssh key 文件了
特定项目指定 ssh key
这个，在 config 中指定就可以。就像设置 user.name 和 user.email 一样。因为是特定项目使用特定的 ssh key。所以这个时候，不适合使用 --global 参数。
# ~/.ssh/github 这个对应生成的 ssh key 私钥文件
git config core.sshCommand "ssh -i ~/.ssh/github"
# 后边，再 git push 就会 ok 了
git remote add origin xxx
git push --set-upstream origin main
终点
到最后，就是这两个重要的命令。 生成 ssh key 对。进入项目目录，指定 ssh key。 ok 搞定。
# 生
ssh-keygen -t rsa -C email@email.com -f github
# 指
cd xxx
git config core.sshCommand "ssh -i ~/.ssh/github"
11月
20
在 ts 中，如果对一个接口对象的属性进行 delete 的话。该 delete 必须为可选属性。否则就会报 The operand of a 'delete' operator must be optional. 错误。\
比如：
interface User {
nickname: string
gender: number
}
const user:User = {nickname: 'vini', gender: 1}
delete user['gender']
# 这个时候就会报错。只需将 User 接口的 gender 定义改为 下边这样即可
interface User {
nickname: string
gender?: number
}
在 strictNullChecks 中使用 delete 运算符时，操作数现在必须为 any、unknown、never 或为可选（因为它在类型中包含 undefined）。否则，使用 delete 运算符是错误的。
11月
16
有这么一个场景。一堆宽高不一样的图片，按一定的宽高比放在一个容器里。并且，随着父容器宽度的变化，图片的宽高也随着变化。这里，主要用到 div 的一个属性 aspect-ratio。再结合媒体查询，就可以很容易做成自适应的展示。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio
https://github.com/vinistudy/autoImglist
部分示例代码
# img-con 使用 relative，方便 div 内部元素使用觉得定位，在图片上展示更多的信息
.media-con {
display: inline-block;
box-sizing: border-box;
padding: 0 8px;
width: 33%;
}
.media-con .img-con {
width: 100%;
height: auto;
aspect-ratio: 3/2;
overflow: hidden;
position: relative;
}
.media-con .img-con .img {
width: 100%;
height: 100%;
object-fit: cover;
}
可以根据外层容器的宽度不同，动态的设置 media-con 的百分比。比如，33%。超过 3 张自动换行。 20%，超过 5 张自动换行。数据合适就好。
11月
09
element plus 官方给出的单选实现，不是我想要的。估计也不是很多人想要的。很多人想要的应该是多选那样的选。但是吧，多选不是单选。所以需要改造。如果官方自己实现就多好啊。
https://element-plus.org/zh-CN/component/table.html#%E5%A4%9A%E9%80%89
改造方向。
- 去掉标题栏的选择框。这个用 css 可以实现。
- 将多选改为单选。（永远将已选的对象出栈，再 toggleRowSelection 过去）
部分代码
# template
<el-table ref = "table" @select="handleTableChange">
</el-table>
# script setup ts
import type { ElTable, ElTableColumn } from "element-plus";
const table = ref<InstanceType<typeof ElTable>>()
function handleTableChange(val: Record<string, any>[]) {
if (val.length > 1) {
const row:Record<string, any>|any = val.shift()
if (table.value) {
table.value?.toggleRowSelection(row, false)
}
}
}
# style scss (怕污染可以加特定父类)
th {
&.el-table-column--selection {
.el-checkbox {
display: none;
}
}
}
11月
09
在做一些特殊的展示的网站的时候，只需要按照一定比例的缩放就可以。这种不像栅格化的自适应（比如 bootstrap），这种也更好写。按照设计图的尺寸，换算做出来就可以。下边有两种方案。
https://juejin.cn/post/6966103143402700837
上边链接介绍的是满屏的自适应缩放。有的时候，是根据宽度做自适应。就是设计页高度远远大于宽度的情况。这个时候，只需要按照宽度自适应就可以。其实，还是用到上边的思路。采用上边的第二种方案，使用 rem 自适应。只是计算方法稍微改变一下。
# js
function setFontSize() {
const designWidth = 1440
const fontSize = document.documentElement.clientWidth < designWidth ?
12 * (document.documentElement.clientWidth / designWidth) : 12
const htmlElement: HTMLHtmlElement | null = document.querySelector('html')
if (htmlElement) {
htmlElement.style.fontSize = fontSize + 'px'
}
}
# scss
$design_width: 1440; //设计稿的宽度，根据实际项目调整
@function px2rem($px) {
$design_font_size: 12;
@return ($px/$design_font_size) + rem;
}
这个时候，似乎和高度已经没有关系了。
在这个情况下，如果媒体宽度大于设计图的宽度，内容宽度就是设计图宽度。对内容做居中处理。
# bootstrap 居中就是这么写的
margin-left: auto;
margin-right: auto;
# dom 结构
<div class="full-container">
<div class="design-wrap">
</div>
</div>
10月
27
10月
25
windows 安装 wsl 时，遇到错误: 0x80072ee7，修改下 dns 就可以。
按照上图，将网络的 dns 设置下就可以。
wsl --list --online
wsl --install -d Ubuntu
