https://movie.douban.com/subject/37242440/

看后感 ​

是个犯罪悬疑片，很少这样专门发影评。感觉这个电影演员阵容挺强大的，但是拍摄手法让人看着很不舒服。

主要问题如下：

1. 镜头切换非常频繁，一秒钟一个人物，看得人头晕。
2. 镜头一直在晃，感觉是为了悬疑而悬疑。

总之，很难评。看了18分钟就关了。

1、把 lucide 项目下载到本地；

2、把这个项目 svg-path-outline-with-inkscape 下载到本地；

3、把 lucide 项目里面的 icons 文件夹下的 svg 图片复制到 svg-path-outline-with-inkscape 项目的 src 目录下；

4、给 svg-path-outline-with-inkscape 项目里面的 convert.sh 执行权限；

chmod +x convert.sh

5、执行 ./convert.sh 开始转换；

6、打开 iconfont.cn 创建项目；

7、上传 svg-path-outline-with-inkscape 项目里面的 out 下的 svg 图片到项目，等审核通过；

8、下载到本地，解压 download.zip；

9、更改 iconfont.css 拓展为 iconfont.wxss，复制到小程序项目中并引用；

10、创建小程序组件 components/icon

components/icon/icon.js

/**
 * Icon Component (iconfont)
 * Usage: <l-icon name="home" size="48" color="#059669" />
 */
Component({
    properties: {
        name: {
            type: String,
            value: ''
        },
        size: {
            type: Number,
            value: 48
        },
        color: {
            type: String,
            value: ''
        }
    }
})

components/icon/icon.json

{
  "component": true,
  "styleIsolation": "apply-shared"
}

components/icon/icon.wxml

<text wx:if="{{name}}" class="iconfont icon-{{name}}"
    style="font-size: {{size}}rpx;{{color ? ' color: ' + color + ';' : ''}}" />

components/icon/icon.wxss

/* Icon Component Styles */
.iconfont {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

11、配置为小程序全局组件

app.json

{
    "usingComponents": {
        "l-icon": "/components/icon/icon"
    },
    ......
}

12、业务页面引用

<l-icon name="log-in" size="44" />

二、Q&A ​

为什么要有 svg-path-outline-with-inkscape 这个项目？

lucide 下载的 svg 直接上传到 iconfont 无法正常使用，提示「上传失败，请尝试将所有图层进行轮廓化」，文件太多，sketch 无法处理，需要使用 Illustrator 一个个处理不现实（不知道有没有批量操作、软件需要付费、卒），于是乎就做让 AI 写了一个批量处理的工具。

调试用微信开发者工具调试图片显示，控制台始终提示【图 1】的错误，但是浏览器可以正常访问【图 2】，最终是因为 ngnix 缓存问题，导致无法正常显示，实际图片确实是 404。

图 1

图 2

根本原因复盘（核心雷区） ​

上面潜在有一个坑，因为项目是测试阶段为了方便就把 upload 目录上传到 git 仓库了。github workflow 在服务器上执行构建是会先把本地更改丢失，这就是上次发版和本次发版时间段内在服务器上上传的图片，在本次发版时会把图片给删除，在加上测试 ngnix 上给图片做了缓存，图片删除了还能访问。

这就是多个雷区叠加到只的问题，切记该怎么做就怎么做不要走捷径。

排查与定位方向（避坑指南） ​

下面是排查定位问题的几个方向：

1. 微信开发者工具：菜单栏-设置-代理设置
   • ☑️ 不使用任何代理，勾选后直连网络
   • 使用系统代理
   • 手动设置代理
2. 微信开发者工具：编辑器-右上角【三】详情-
   • ☑️ 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书
3. Charles：Tools – Map Remote…
4. Charles： macOS Proxy
5. 图片缓存
   • 确认服务器 ngnix 是否为图片或目录设置了静态缓存，浏览器可访问，切换无痕模式再次访问试试。

宝塔一键迁移API版本 3.0版本教程 - Linux面板 - 宝塔面板论坛

遇见的问题 ​

错误信息: 数据库[xxx]创建失败,数据库用户名或密码错误 ！请尝试重置root用户密码后再进行操作

解决方案：

把旧服务器数据库密码复制并更新到新服务数据库上。

然后再执行迁移即可。

启动 Apache 失败，查看日志报错：AH00016: Configuration Failed

解决方案：

# 移动现有的网站配置文件夹
mv /www/server/panel/vhost/apache /www/server/panel/vhost/apache_bak

# 创建一个空的配置文件夹
mkdir /www/server/panel/vhost/apache

# 尝试启动 Apache
/etc/init.d/httpd start

问题后记：在宝塔论坛查看并没有找到问题解决方案；尝试重装 apache（快速安装、编译安装）均无法解决。最终还是手动 Google，把 https://stackoverflow.com/questions/46330468/ah00016-configuration-failed 文章丢给 Gemini 才给出的解决方案。

证书问题 ​

迁移完成之后每个站点都已生成的站点 SSL 的记录。会不生效，这时候删除站点记录，重新创建站点，申请证书即可。

后记 ​

感谢 Google Gemini、宝塔。

参考 ​

1. 宝塔一键迁移API版本 3.0版本教程
2. AH00016: Configuration Failed
3. Google Gemini
4. 宝塔面板

阿里云上面的【数字证书管理服务】在个人测试证书由之前无限量，改为20个上限，根本不够用。然后产品升级，产品改为：个人测试证书（免费版）、个人测试证书（pro）。

免费用完了，换个思路，既然再用宝塔在维护网站，也支持生成SSL证书，开整。

方案流程 ​

涉及到4个产品：

1. 宝塔Linux面板、
2. 阿里云云解析DNS（其他也行）
3. 阿里云对象存储 OSS
4. 阿里云数字证书管理服务

一、生成宝塔Linux面板生成SSL证书 ​

1. DNS：增加目标域名。如：s1.webclown.net，A记录，值为服务器IP。
2. 宝塔：网站-创建新站点（PHP类型）
3. 宝塔：网站-站点列表-新站点-设置-SSL-申请证书
4. 宝塔：申请证书，成功之后不部署，下载证书。

二、把证书绑定到阿里云对象存储 OSS ​

1. 宝塔：暂停站点
2. DNS：把刚刚新增的A记录暂停解析。
3. 阿里云：数字证书管理服务 – SSL证书管理 – 上传证书 – 选择刚刚下载的证书
4. 阿里云：对象存储OSS – 选择对应的Bucket – Bucket设置 – 域名管理 – 新增域名
5. 阿里云：对象存储OSS – 新增域名
   • 阿里云云解析
     • 输入域名，绑定
     • 开启自动添加CNAME解析即可
   • 其他服务商
     • 增加对应的TXT记录即可
6. 阿里云：对象存储OSS – 域名列表 – 证书托管 – 选择对应的证书即可。

至此配置成功。

总结 ​

免费是昂贵的，这些折腾下来几个小时过去了。这只是记录一个方案，如果你恰好想要用这种方案，也是可以的。

BTW，也可以把这套整成一个解决方案，变成一个Flow。

需要把大约 25G 的图片、视频文件同步到阿里云对象存储OSS。

解决方案 ​

1、安装 Rclone

> curl https://rclone.org/install.sh | sudo bash

2、配置 Rclone

> rclone config

No remotes found, make a new one?
n) New remote
s) Set configuration password
q) Quit config
n/s/q> n

Enter name for new remote.
name> webclown-net

Option Storage.
Type of storage to configure.
Choose a number from below, or type in your own value.
 1 / 1Fichier
   \ (fichier)
 2 / Akamai NetStorage
   \ (netstorage)
 3 / Alias for an existing remote
   \ (alias)
 4 / Amazon S3 Compliant Storage Providers including AWS, Alibaba, ArvanCloud, Ceph, ChinaMobile, Cloudflare, DigitalOcean, Dreamhost, GCS, HuaweiOBS, IBMCOS, IDrive, IONOS, LyveCloud, Leviia, Liara, Linode, Magalu, Minio, Netease, Outscale, Petabox, RackCorp, Rclone, Scaleway, SeaweedFS, Selectel, StackPath, Storj, Synology, TencentCOS, Wasabi, Qiniu and others
   \ (s3)
 5 / Backblaze B2
....
Storage> 4

Option provider.
Choose your S3 provider.
Choose a number from below, or type in your own value.
Press Enter to leave empty.
 1 / Amazon Web Services (AWS) S3
   \ (AWS)
 2 / Alibaba Cloud Object Storage System (OSS) formerly Aliyun
   \ (Alibaba)
 3 / Arvan Cloud Object Storage (AOS)
   \ (ArvanCloud)
 4 / Ceph Object Storage
   \ (Ceph)
...
provider> 2

Option env_auth.
Get AWS credentials from runtime (environment variables or EC2/ECS meta data if no env vars).
Only applies if access_key_id and secret_access_key is blank.
Choose a number from below, or type in your own boolean value (true or false).
Press Enter for the default (false).
 1 / Enter AWS credentials in the next step.
   \ (false)
 2 / Get AWS credentials from the environment (env vars or IAM).
   \ (true)
env_auth> 1

Option access_key_id.
AWS Access Key ID.
Leave blank for anonymous access or runtime credentials.
Enter a value. Press Enter to leave empty.
access_key_id> 8888888888888

Option secret_access_key.
AWS Secret Access Key (password).
Leave blank for anonymous access or runtime credentials.
Enter a value. Press Enter to leave empty.
secret_access_key> Xxxxxxxxxxxxxxxxxxxx

Option endpoint.
Endpoint for OSS API.
Choose a number from below, or type in your own value.
Press Enter to leave empty.
1 / Global Accelerate
   \ (oss-accelerate.aliyuncs.com)
 2 / Global Accelerate (outside mainland China)
   \ (oss-accelerate-overseas.aliyuncs.com)
 3 / East China 1 (Hangzhou)
   \ (oss-cn-hangzhou.aliyuncs.com)
 4 / East China 2 (Shanghai)
   \ (oss-cn-shanghai.aliyuncs.com)
 5 / North China 1 (Qingdao)
   \ (oss-cn-qingdao.aliyuncs.com)
 6 / North China 2 (Beijing)
   \ (oss-cn-beijing.aliyuncs.com)
...
endpoint> 6

Option acl.
Canned ACL used when creating buckets and storing or copying objects.
This ACL is used for creating objects and if bucket_acl isn't set, for creating buckets too.
For more info visit https://docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html#canned-acl
Note that this ACL is applied when server-side copying objects as S3
doesn't copy the ACL from the source but rather writes a fresh one.
If the acl is an empty string then no X-Amz-Acl: header is added and
the default (private) will be used.
Choose a number from below, or type in your own value.
Press Enter to leave empty.
   / Owner gets FULL_CONTROL.
 1 | No one else has access rights (default).
....
acl>

Option storage_class.
The storage class to use when storing new objects in OSS.
Choose a number from below, or type in your own value.
Press Enter to leave empty.
 1 / Default
   \ ()
 2 / Standard storage class
   \ (STANDARD)
 3 / Archive storage mode
   \ (GLACIER)
 4 / Infrequent access storage mode
   \ (STANDARD_IA)
storage_class>

Edit advanced config?
y) Yes
n) No (default)
y/n> n

Configuration complete.
Options:
- type: s3
- provider: Alibaba
- access_key_id: 8888888888888
- secret_access_key: Xxxxxxxxxxxxxxxxxxxx
- endpoint: oss-cn-beijing.aliyuncs.com
Keep this "webclown-net" remote?
y) Yes this is OK (default)
e) Edit this remote
d) Delete this remote
y/e/d> y

Current remotes:

Name                 Type
====                 ====
webclown-net        s3

e) Edit existing remote
n) New remote
d) Delete remote
r) Rename remote
c) Copy remote
s) Set configuration password
q) Quit config
e/n/d/r/c/s/q> q

Done。接下来是同步命令：

> rclone sync /www/wwwroot/www.webclown.net/uploadfile/202201 webclown-net:webclown-net/uploadfile/202202 --progress --transfers=1

• --progress：显示进度。
• --transfers：使用线程上传，根据服务器带宽来配置。

其他：阿里云官方工具ossutil ​

使用的是「命令行工具ossutil 2.0（预览版）」，同步速度有点慢，均速在 600 kb/s 左右。传到猴年马月了。所以尝试Rclone。

同步命令：

> ossutil cp -r /www/wwwroot/www.webclown.net/uploadfile/202201 oss://webclown-net/uploadfile/202201

链接 ​

1. Rclone
2. 阿里云OSS：命令行工具ossutil 2.0（预览版）

1. 打开「 照片.app 」；
2. 选择照片；
3. 菜单栏：文件 – 导出 – 导出 n 张照片；
   • 
4. 选择导出照片配置
   • 照片
     • 照片种类：HEIC
     • 颜色描述文件：原始状态
     • 大小：实际到小
   • 信息
     • 包括：标题、关键词和说明及位置信息
   • 文件命名
     • 文件名称：使用文件名称
     • 子文件夹格式：无
   • 
5. 导出到指定文件夹
6. 查看导出进度
   • 

Windows ​

可以是用 iTunes 导出。

下载 Windows 版 iTunes – 官方 Apple 支持 (中国)

其他平台（通用方法） ​

1. 使用网页端登录
   • https://www.icloud.com.cn
   • https://www.icloud.com
2. 找到 「照片」，选择照片下载（每次最多可下载1000项，图片为：JPG，视频为：MOV）
   • 

[Info] begin copyFile files to ipa…
[Info] begin replace files to ipa…
[Info] begin update mobileprovision to ipa…
[Info] begin outPut t_entitlements_full plist file…
[Info] begin outPut outPutEntitlements plist file…
[Info] begin verifyPlistFiles
[Error] Provisioning profile doesn't support the Associated Domains
[Error] Provisioning profile doesn't include the com.apple.developer.associated-domains
[Error] verifyPlistFiles failed
[Info] Package make result:Failed. Reason:

错误原因：《Apple Developer Program 许可协议》已更新

登录 App Store Connect 同意《Apple Developer Program 许可协议》，即可

这篇文章探讨了为什么中文不需要空格的原因。主要观点如下：

中文是一种典型的表意书写系统，每个汉字表示一个音节或语素。中文文本由连续的汉字组成，不同的词之间没有用空格分隔。大多数中文词可以用一到两个汉字表示，词长较短且变化较小。因此，中文读者在阅读时容易预测词的长度，从而更快识别词的开始和结束位置，即中文词边界位置的不确定性较小。

中文词边界位置的不确定性较小，无需空格来标记词边界。

相比之下，英语单词往往由多个字母组成，且词长的变化较大，这使得英语读者较难预测每个单词的开始和结束位置，即英语词边界位置的不确定性较大。因此，英语倾向于使用空格以减少词切分的认知负担。

英语词边界位置的不确定性较大，需要空格来标记词边界。

总之，中文和英语采用不同的词边界标记方式，都是为了实现更经济高效的阅读。

原文：为什么 中文 不 需要 空格

 ERROR  [nuxt] [request error] [unhandled] [500] fetch failed
  at Object.fetch (node:internal/deps/undici/undici:11118:11)  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async sendProxy (./node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:1157:20)  
  at async ./node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:1962:19  
  at async Object.callAsync (./node_modules/.pnpm/unctx@2.3.1/node_modules/unctx/dist/index.mjs:72:16)  
  at async Server.toNodeHandle (./node_modules/.pnpm/h3@1.11.1/node_modules/h3/dist/index.mjs:2249:7)

触发此错误代码

demo.vue

async foo() {
  const resData = await useFetch(`/api/good/1`, {
    method: 'DELETE',
  });
}

nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      "/api/**": {
        proxy: `${env.NUXT_API_URL}api/**`,
      },
  }
}

临时解决方案 ​

把请求方式改为 POST 请求。

async foo() {
  const resData = await useFetch(`/api/good/1`, {
    method: 'POST',
  });
}

网上有说是这些情况：

1. 代理域名 http、https 的问题，测试过不是这个问题，和域名无关。
   1. 排查域名请求日志，出现此问题时，请求日志没有记录，说明请求没有到达后端，是前端请求问题。
   2. 尝试改下请求方式，发现 POST 请求正常，DELETE 请求报错，也许是请求方式问题，但是不确定，先临时解决一下。
2. 降级 h3@1.9.0 版本，降级后，问题依然存在。
3. 降级 nuxt@3.10.3 版本，降级后，问题依然存在。

参考 ​

1. 基于nitro的Nuxt3服务端无法请求https，难道是我写错了？
2. [nuxt] [request error] [unhandled] [500] using proxyRequest or sendProxy · Issue #376 · unjs/h3
3. Nuxt v3.11.0 proxyRequest in server api routes makes nitro crash if proxy server is down · Issue #26318 · nuxt/nuxt

1. 确认印象笔记版本 9.5.10。

2. 导出笔记：

   1. 方式一：全选笔记导出为 .enex 格式。
   2. 方式二：选择笔记本导出为 .enex 格式。

3. .enex 格式转换为 .md 格式

   方式一：

   使用 evernote2md 工具将 .enex 格式转换为 .md 格式。

   shell

   evernote2md 我的笔记.enex ./output

   方式二：yarle

4. done。

获取印象笔记 9.5.10 版本安装包：

链接：https://pan.quark.cn/s/dc30a92ff0c6

提取码：jVuH

背景 ​

已经不在使用印象笔记有几年，打算把笔记导出来，以备后用（会吗？）。

印象笔记为国内版，国际版为 Evernote。国内版的笔记从 9.5.10 版本之后是无法导出为 .enex 格式的，只能导出 .notes 和 .html 格式，.notes 还是加密的（encoding="base64:aes"），国际版可以正常导出 .enex 格式。 evernote2md 可以将 .notes 格式转换为 .md 格式。

• 方案1：.notes + evernote2md 🙅
• 方案2：.html + evernote_move 🙅
• 方案3：.enex + evernote2md ✅
• 方案4：.enex + yarle ✅

方案4 yarle 优点，支持导出多种软件使用的Markdown格式（更多），如：

• Obsidian
• LogSeq
• Tana
• Heptabase

参考 ​

1. wormi4ok/evernote2md - Github
2. akosbalasko/yarle - Github
3. 印象笔记导出格式更新，enex变为notes，恶心行为+1
4. 印象笔记导出HTML再转markdown的方法_印象笔记导出markdown-CSDN博客

以前也没有这个习惯，只有工作上的述职。也慢慢尝试着写一写，让自己有个记录，也算是给自己一个交代。

经历了裁员，从3月底一临云离职12月初的稳定，也算曲曲折折。虽然有些事情是可遇见的，但是还是缺少真正的行动。感谢家人的支持和理解，感谢朋友提供的帮助。

把 Vue3、TS、Tailwind CSS 应用到项目中。

博客从 Hexo 迁移到 VitePress，整理了一些历史项目，做下归档。

做了一个 Chrome 插件：自动生成二维码。

做了一个 Visual Studio Code 插件：Markdown Code Blocks - Visual Studio Marketplace。

在博客记录了 16 篇文章，也只能说是记录，算不算写，技术深度不够，内容不够丰富，还需努力。

买了一辆雅迪电动车 🛵，通勤相对方便了一些。

连续三四年的忙碌，身体素质下降，体重增加，比往年锻炼多了一下，跑步 33 次，骑行 11 次，总里程 228km，Workouts - Webclown.net。

读了很少的书，汗颜 😓。

较之前稍微关注了家庭方面的事情，但是还是不够，还需努力，更多的去关心家人。

2024年计划 ​

多看书，多思考，利用好时间，慢慢学习长期投资。

注意休息，少熬夜，多锻炼，多运动，多关心家人。

儿童家庭教育方面需要多多用心，多学学，减轻老婆的负担，尽可能为孩子提供更好的教育。

.husky/pre-commit 中添加以下内容

# 获取暂存区的文件列表
FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
[ -z "$FILES" ] && exit 0

# 美化所有暂存区的文件
echo "$FILES" | xargs ./node_modules/.bin/prettier --ignore-unknown --write

# 将修改/美化的文件添加回暂存
echo "$FILES" | xargs git add

背景 ​

在 prettier v3.x 版本的项目中，使用 pretty-quick 会报错：

.../isSupportedExtension.js:12
  ..._prettier.resolveConfig.sync(file, {
                             ^
TypeError: _prettier.resolveConfig.sync is not a function

可以降低 prettier 版本到 2.x 来解决这个问题，但是项目里面额外使用了 tailwindcss，而 tailwindcss 依赖的 postcss 依赖的 prettier 版本是 3.x，所以降低 prettier 版本不是一个好的解决方案。

参考 ​

1. Pre-commit Hook · Prettier
2. pretty-quick will break with prettier v3 · Issue #164 · azz/pretty-quick
3. Editor Setup - Tailwind CSS
4. tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.

aHR0cHM6Ly9zdXBwb3J0Lmdvb2dsZS5jb20vY2hyb21lL2Fuc3dlci8xODY4NTA/dmlzaXRfaWQ9NjM4Mzc1MzExMTU2NTEwODcyLTIwOTg5NjA2NjMmcD1mZWVkYmFja19jb25maXJtYXRpb24mcmQ9MQ==

BUG 修复（2023-12-14 更新） ​

图片、视频 ​

徕卡水印 ​

https://www.icloud.com/shortcuts/3446145a0980480caef78e8a641d49c5

哈苏水印 ​

https://www.icloud.com/shortcuts/cfc0151ba78343e1ab5477cd894c59c9

Apple水印 ​

https://www.icloud.com/shortcuts/ea6e897570504b28a8f1fb8a3b9306b4

阿莱水印 ​

https://www.icloud.com/shortcuts/f89ac598fa9e4483b95e00c5483cf277

Lumix水印 ​

https://www.icloud.com/shortcuts/6a3b9a3e6e9443c5bde872f62d2a3d97

蔡司水印 ​

https://www.icloud.com/shortcuts/0d678d51c5f2464c8ca485edafa075ec

富士水印 ​

https://www.icloud.com/shortcuts/24a69e95508e4ea18f77a1f04106125a

索尼水印 ​

https://www.icloud.com/shortcuts/a38e70a622c14d9abc69afca1a3f6f1b

佳能水印 ​

https://www.icloud.com/shortcuts/67801f45a15346fab6674a63012e0900

尼康水印 ​

https://www.icloud.com/shortcuts/1a8314cadb874550877cf0caf80b7d0a

iPhone水印 ​

https://www.icloud.com/shortcuts/aa0a3c6f879b4a239efed7da72825655

视频到 GIF ​

https://www.icloud.com/shortcuts/22693aae57ba4f57af5d1db80ae632a0

Bing Wallpaper ​

获取 bing.com 的壁纸，储存到相册，然后设置为桌面壁纸，结合自动化，实现每日自动更换壁纸

https://www.icloud.com/shortcuts/68ee2f995d9e416e8d8564bbd2f1d331

压缩图片 ​

https://www.icloud.com/shortcuts/417c2eee095a4ba299b026ffd76eacae

截屏 ​

• macOS 储存到桌面
• iOS、iPadOS 储存到相册

https://www.icloud.com/shortcuts/73bf300bb15b42da97eaf690c231aa15

最开始是在 mac 上使用，想要截取APP切换界面，电脑上出现这个界面之后就没办法再去按截屏键，然后想通过Siri语音触发这个快捷指令，然后实现了截屏

其他 ​

扫一扫 ​

https://www.icloud.com/shortcuts/6558c55151a147f0923072a1db3202c8

定位解析 ​

https://www.icloud.com/shortcuts/44516645ba2340709b6851100fef103c

🕰️ 时间：2023年10月26日 18:53:10 📍 位置：北京市xxx路

🌏 坐标：北纬 39°00′00.00″ 东经 116°00′00.00″ ⛰️ 海拔：40.939米

手电筒闪烁 ​

https://www.icloud.com/shortcuts/b422552335774500bdac786c8db605ba

standby ​

https://www.icloud.com/shortcuts/09f757ff0c1a4dc98728d87b25ca9605

结合自动化，实现定时息屏

更多推荐 ​

• 快捷指令使用手册 - 官方 Apple 支持 (中国)

最近帮朋友维护公司相关网站，有个域名即将到期，不准备续费了，让帮忙把域名下的服务转移到另一个网站。

然后去阿里云域名服务里面查看该域名的信息，还有 200 多天过期，但是看 ESC、虚拟主机 实例里面都没有该域名解析对应的 IP。追问情况下，对方发给一张截图，说最近公司收到了这个通知函。

然后再仔细看图片就不太对了，域名不正常、续费价格不正常、续费年限都不对。

正常续费价格：

• 首次购买和续费 价格一样
• 白金域名（短域名或品牌域名），首次购买和续费均有溢价
• 其他情况，首次购买有溢价，续费正常价格

续费年限：1-10 年 均可以续费，并不是5、10年限制

结果 ​

抱着试试看的态度，搜索了一下「企业网址域名通知函 可疑邮件」，

如果你尝试联系对方，微信对方不加，电话联系，非常热情。

参考 ​

• 谨防受骗！记一次被骗经历-星辰网络-网站开发,app开发,小程序开发
• 万维网打电话说域名到期怎么办？常见域名诈骗手段有哪些 - 新网数码

最近更新电脑（MacBook Pro）系统升级到 macOS Sonoma，在使用过程中发现下面的问题，忍受了一段时间，最终还是决定解决一下。

全屏应用、非全屏应用这两种应用，在使用 command + tab 切换应用的时候，捷键的指令已经执行完毕，应用状态也已经切换了，但是无法“聚焦切换”到对应的应用上。

解决方案 ​

最终在系统设置中找到了解决方案，如下图所示：

设置入口：

1. 屏幕左上角「🍏」 > “系统设置”，
2. 点按边栏中的“桌面与程序坞” ，前往右侧的“调度中心”，
3. 然后打开“切换到某个应用程序时，会切换到包含该应用程序的打开窗口的空间”。

官方解释：

参考资料 ​

• 在 Mac 上的多个空间中工作 - 官方 Apple 支持 (中国)
• Work in multiple spaces on Mac - Apple Atbalsts (LV)

在给 Workflows 页面里面的 Chrome 书签，添加 快速使用示例代码 时，发现在 Arc 浏览器里面，无法正常使用，而在 Chrome 浏览器里面可以正常使用。

看看怎么区分一下 Arc 浏览器和 Chrome 浏览器，然后在 Arc 浏览器不给提示。

查看两个浏览器的 User Agent，一毛一样：

Arc 浏览器：

> navigator.userAgent
< 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36'

Chrome 浏览器：

> navigator.userAgent
< 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36'

解决方案 ​

搜索找到了这篇文章：Can JavaScript detect the Arc browser? - Stack Overflow。

根据这篇文章里面的提示，可以通过 获取 Arc 浏览器 的 User Agent Atylesheet（浏览器默认样式） 来区分 Arc 浏览器和 Chrome 浏览器。

:root {
    --arc-palette-cutoutColor: #ECEDFEFF;
    --arc-palette-backgroundExtra: #FDFDFFFF;
    --arc-palette-minContrastColor: #ECEDFEFF;
    --arc-palette-hover: #D3D4FDFF;
    --arc-palette-background: #E9EAFEFF;
    --arc-palette-focus: #9094FBFF;
    --arc-palette-foregroundPrimary: #3139FBFF;
    --arc-palette-maxContrastColor: #212AFBFF;
    --arc-background-gradient-color0: #C8CAFEFF;
    --arc-palette-subtitle: #A6AAFBFF;
    --arc-palette-foregroundSecondary: #8489FBFF;
    --arc-palette-foregroundTertiary: #ECEDFEFF;
    --arc-background-gradient-color1: #FFE6E6FF;
    --arc-palette-title: #0A0D4BFF;
}

只判断是否有值其中一个变量存在就可以了。

<script setup lang="ts">
import { onMounted, ref } from 'vue'
const isArcBrowser = ref(false);

onMounted(() => {
  isArcBrowser.value = getComputedStyle(document.documentElement)
    .getPropertyValue('--arc-palette-title') ? true : false;
  console.log('isArcBrowser', isArcBrowser.value);
});
</script>

参考 ​

1. Can JavaScript detect the Arc browser? - Stack Overflow。

caniuse ​

willfarrell/alfred-caniuse-workflow: Alfred App Workflow for caniuse.com

cdnjs ​

Alfred 3 workflow to search libs on cdnjs

chitacan/alfred-cdnjs

Chrome 书签 ​

bayleedev/alfred-chrome-bookmarks: 🔖 Fast Chrome bookmark searcher for Alfred.

Font Awesome ​

ruedap/alfred-font-awesome-workflow: 🎩 Font Awesome workflow for Alfred

GitHub ​

willfarrell/alfred-github-workflow: Searching Github repos.

gitignore ​

jdno/alfred-gitignore: Create .gitignore files using Alfred

Hash ​

willfarrell/alfred-hash-workflow: Hashing Strings

MDN Search ​

alfred-workflows/mdn-search at main · gilbarbara/alfred-workflows

Open url in Browser ​

linxz/alfredWorkflow-Open-url-in-Browser-without-http: 自从用了alfred后，比较依赖这个东西，然后很多时候都是直接通过这个打开浏览器的……无意间发现其实可以同时打开多个，于是稍微调整一下……

Package Repo Search ​

willfarrell/alfred-pkgman-workflow: Package Repo Search

所有命令 ​

• alcatraz {query}: Cocoa Packages
• apt-get {query}: Ubuntu Packages
• bower {query}: Bower Components for JavaScript
• brew {query}: Homebrew Forumale/Cask
• chef {query}: Chef Cookbooks
• cocoa {query}: CocoaPods can be upgraded to CocoaDocs by changing $apple_docs to true in the script.
• composer {query}: PHP Composer Packages
• cordova {query}: Apache Cordova plugins
• docker {query}: Docker Images
• definitelytyped {query}: DefinitelyTyped TypeScript Definitions
• gems {query}: Ruby Gems
• gradle {query}: Java Gradle Packages
• grunt {query}: Node.js task-runner Grunt Plugins
• gulp {query}: Node.js task-runner Gulp Plugins
• hackage {query}: Haskell package archive
• hex {query}: Elixir Hex Packages
• maven {query}: Java Maven Libraries
• metacran {query}: R Packages
• npm {query}: Node.js NPM Packages
• nuget {query}: .Net NuGet Packages
• pear {query}: PHP Pear Packages
• puppet {query}: Puppet Modules
• pypi {query}: Python Packages
• raspbian {query}: Rasberry Pi Packages
• rpm {query}: Red Hat Linux Packages
• snap {query}: Snapcraft Packages
• st {query}: Sublime Text Packages
• yarn {query}: Yarn Packages
• yo {query}: Yeoman Generators

Youdao Translator ​

wensonsmith/YoudaoTranslator: Alfred Youdao Translate Workflow

配置参考 Alfred 配置有道翻译

WiFi Workflow ​

ravelll/wifi-workflow: A Alfred workflow to simply control Wi-Fi setting on macOS.

如何使用 ​

1. 手动创建书签

   -	-
   1、新建书签	2、使用以下代码替换 URL
   3、执行	🎉 Done.

2. 快速使用示例代码

   1. Chrome、Firefix 直接拖拽到书签栏即可
   2. Safari（我的浏览器版本是：17.0 (19616.1.27.111.16)）
      1. 设置-高级-【勾选】显示网页开发者功能
      2. 设置-开发者-【勾选】允许在智能搜索栏中使用 JavaScript
      3. 拖拽 快速使用示例代码 到书签栏即可

TAPD 项目管理 计算花费工时 ​

1. 工作台 - 仪表盘 - 添加卡片 - 统计工时时长 - 选择项目 - 选择时间 - 生成卡片
2. 查看全部
3. 点击书签栏中的 TAPD 项目管理 计算花费工时 即可

javascript: (function () {
    var arr = [];
    var totalTime = 0;
    var trs = document.querySelectorAll('.g_table_autowidth tbody tr');
    var name = document.querySelector('h3.name span').innerText;

    for (let index = 0; index < trs.length; index++) {
        let tr = trs[index];
        let tds = tr.querySelectorAll('td');
        if (tds.length === 8) {
            tds[0].remove();
            tds[1].remove();
            tds[2].remove();
        } else if (tds.length === 6) {
            tds[0].remove();
        }
    }


    var trs = document.querySelectorAll('.g_table_autowidth tbody tr');

    for (let index2 = 0; index2 < trs.length; index2++) {
        let tr = trs[index2];
        let tds = tr.querySelectorAll('td');
        if (!arr.length && tds[0].innerText) {
            totalTime += Number(tds[1].innerText);
            arr.push({
                project: tds[0].innerText,
                countTime: Number(tds[1].innerText)
            });
        } else if(arr.length && tds[0].innerText) {
            var arrExistIndex = arr.findIndex((item) => item.project === tds[0].innerText);
            if (arrExistIndex !== -1) {
                totalTime += Number(tds[1].innerText);
                arr[arrExistIndex].countTime += Number(tds[1].innerText);
            } else {
                totalTime += Number(tds[1].innerText);
                arr.push({
                    project: tds[0].innerText,
                    countTime: Number(tds[1].innerText)
                });
            }
        }
    }
    var str = '';
    for (let index3 = 0; index3 < arr.length; index3++) {
        var {project, countTime} = arr[index3];

        var zanbi = (countTime/totalTime * 100).toFixed() / 100;
        str += `${project}\t${countTime}\t${ zanbi ? `${name}${(Math.round(zanbi * 10) / 10)}` : '' }\n`;
    }
    str += ` \t${totalTime}`;
    prompt("复制粘贴到 Excel 中", str);
})();

Yapi body 参数 转换为 JSDoc 注释 ​

1. 打开 Yapi 项目
2. 选择接口
3. 点击书签栏中的 Yapi body 参数 转换为 JSDoc 注释 即可

javascript: (function () {
    function contains(selector, text) {
        var elements = document.querySelectorAll(selector);
        return Array.prototype.filter.call(elements, function(element){
            return RegExp(text).test(element.textContent);
        });
        }
    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }

    var trs1 = document.querySelector('.panel-view');

    var apiName = trs1.querySelector('.row .colName').innerText;

    var trs = contains('div', /^Body/)[0].querySelectorAll('.ant-table-tbody tr');

    console.log('trs', trs)

    var str = `/**\n * ${ apiName }\n`;

    for (let index = 0; index < trs.length; index++) {
        let tr = trs[index];
        let tds = tr.querySelectorAll("td");

        str += ` * @param {${ capitalizeFirstLetter(tds[1].innerText) }} data.${ tds[0].innerText } ${ tds[4].innerText }\n`;
    }

    str += ` * @url ${ window.location.href }\n * @returns Promise\n */`;

    var x = document.createElement("DIALOG");
    var t = document.createTextNode(str);

    x.appendChild(t);
    x.style = "white-space: pre;"

    document.body.appendChild(x);

    x.addEventListener('copy',function(e){
        setTimeout(() => {
            x.hidden = true;
            x.remove();
        }, 320);
    });

    x.showModal();
})();

批量删除 Snapmail.cc 单个邮箱内的邮件 ​

www.snapmail.cc

1. 打开 Snapmail.cc
2. 选择邮箱
3. 点击书签栏中的 批量删除 Snapmail.cc 单个邮箱内的邮件 即可

javascript: (function () {
    var lis = document.querySelectorAll('.email-container .sidebar-scrollable-content .email-list li[ng-repeat="item in filtered = (items | orderBy:\'time\':!reverse | filter: search) "]');

    for (let index = 0; index < lis.length; index++) {
        const emailId = lis[index].querySelector('a').getAttribute('href').split('#/email/')[1];

        fetch(`https://www.snapmail.cc/email/${emailId}`, {
        "headers": {
            "accept": "application/json, text/plain, */*",
            "accept-language": "zh-CN,zh-TW;q=0.9,zh;q=0.8,ja-JP;q=0.7,ja;q=0.6,en-US;q=0.5,en;q=0.4,ko-KR;q=0.3,ko;q=0.2",
            "cache-control": "no-cache",
            "pragma": "no-cache",
            "sec-ch-ua": "\"Chromium\";v=\"116\", \"Not)A;Brand\";v=\"24\", \"Google Chrome\";v=\"116\"",
            "sec-ch-ua-mobile": "?0",
            "sec-ch-ua-platform": "\"macOS\"",
            "sec-fetch-dest": "empty",
            "sec-fetch-mode": "cors",
            "sec-fetch-site": "same-origin"
        },
        "referrer": "https://www.snapmail.cc/",
        "referrerPolicy": "strict-origin-when-cross-origin",
        "body": null,
        "method": "DELETE",
        "mode": "cors",
        "credentials": "include"
        }).then(res => {
            return res.json()
        });
    }
})();

公众号文章信息 ​

1. 打开公众号文章
2. 点击书签栏中的 公众号文章信息 即可
3. 自动复制内容到剪切板

javascript: (function () {
    function getarticleInfo() {
        let obj = {};

        obj['title'] = msg_title || document.title;
        obj['content'] = msg_desc || "";
        obj['author'] = title || "";
        obj['createTime'] = document.querySelector('#publish_time').innerText || new Date().getTime();
        obj['image'] = msg_cdn_url || "";
        obj['blankUrl'] = location.href;

        return JSON.stringify(obj, null, 2);
    }

    setTimeout(() => {
        navigator.clipboard.writeText(`${getarticleInfo()},`);
    }, 320);
})();

结果内容：

{
  "title": "主播说联播丨大胆闯、大胆试、自主改！",
  "content": "",
  "author": "央视新闻",
  "createTime": "2023-09-26 22:47",
  "image": "https://mmbiz.qpic.cn/sz_mmbiz_jpg/oq1PymRl9D6Ok0VQvMrI5flK4zRNtnQCKkXwibaq19DHGTCKjaneibGV9Dw7IRzIFDp8ru3ekovHuCE3xSsDPDuQ/0?wx_fmt=jpeg",
  "blankUrl": "https://mp.weixin.qq.com/s/ppTuriLssKstpWL-yqe9HA"
},

公众号文章封面图 ​

1. 打开公众号文章
2. 点击书签栏中的 公众号文章封面图 即可
3. 自动打开两个窗口：1、正方形（1:1） 2、长方形（2.35:1）

javascript: (function () {
    cdn_url_1_1 && window.open(cdn_url_1_1);
    msg_cdn_url && window.open(msg_cdn_url);
})();

快速使用示例代码： 拖拽 ta 到 书签栏 👉 公众号文章封面图

统计美团外卖订单金额大于30元的订单 ​

1. 打开美团外卖订单详情
2. https://h5.waimai.meituan.com/waimai/mindex/olist
3. 点击书签栏中的 统计美团外卖订单金额大于30元的订单 即可

javascript: (function () {
    const lis = document.querySelectorAll('div[class^="orderList"] li')
    const 订单列表 = [];
    const 金额 = 30;
    for (let index = 0; index < lis.length; index++) {
        // console.log(lis[index].innerText)
        var li = lis[index];
        var 单个订单金额 = li.querySelector('.price_Ul_Wom').innerText.split('实付¥')[1] * 1;
        if (单个订单金额*1 >= 金额) {
            订单列表.push({
                日期: li.querySelector('*[class^="time"]').innerText.split('\n')[0],
                订单号: li.querySelector('div[class^="orderWrap"]').dataset.id.split('id')[1],
                商家: li.querySelector('*[class^="name"]').innerText,
                金额: li.querySelector('.price_Ul_Wom').innerText.split('实付¥')[1]
            })
        }
    }
    setTimeout(() => {
        navigator.clipboard.writeText(`${JSON.stringify(订单列表.reverse(), null, 2)}`);
    }, 320);
})();

结果内容：

[
  {
    "日期": "2023-01-01 00:00",
    "订单号": "8888888888888888888",
    "商家": "麦当劳＆麦咖啡（北京西大望路店）",
    "金额": "30.0"
  }
]

统计美团外卖在某个商家下的订单 ​

小商家，订单满100,1000，统一开发票，需要统计订单

1. 打开美团外卖订单详情
2. https://h5.waimai.meituan.com/waimai/mindex/olist
3. 点击书签栏中的 统计美团外卖在某个商家下的订单 即可

javascript: (function () {
    var lis = document.querySelectorAll('div[class^="orderList"] li')
    const 订单列表 = []
    const 商家 = '门框卤煮(双井店）';
    for (let index = 0; index < lis.length; index++) {
        // console.log(lis[index].innerText)
        var li = lis[index]
        if (商家 === li.querySelector('*[class^="name"]').innerText) {
            订单列表.push({
                日期: li.querySelector('*[class^="time"]').innerText.split('\n')[0],
                订单号: li.querySelector('div[class^="orderWrap"]').dataset.id.split('id')[1],
                金额: li.querySelector('.price_Ul_Wom').innerText.split('实付¥')[1]
            })
        }
    }
    setTimeout(() => {
        navigator.clipboard.writeText(`${JSON.stringify(订单列表.reverse(), null, 2)}`);
    }, 320);
})();

当前页面以窗口形式打开 ​

1. 打开页面（浏览器非全屏模式下）
2. 点击书签栏中的 当前页面以窗口形式打开
3. 输入窗口宽度：默认 540
4. 输入窗口高度：默认 800

javascript: (function () {
    var defaultWidth = 540, defaultHeight = 800;
    var openWindowWidth = window.prompt('窗口宽度（width）', defaultWidth);
    var openWindowHeight = window.prompt('窗口高度（height）', defaultHeight);
    var screenHeight = window.screen.height;
    var screenWidth = window.screen.width;
    var screenX = (screenHeight - openWindowHeight) / 2;
    var screenY = (screenWidth - openWindowWidth) / 2;
    var windowFeatures = 'height='+ openWindowHeight +', width=' + openWindowWidth + ', top=' + screenX + 'px, left=' + screenY + 'px, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no';

    window.open(window.location.href, 'newwindow', windowFeatures);
})();

• toolbar：工具栏
• menubar：菜单栏
• scrollbars：滚动条
• resizable：是否可以调整窗口大小
• location：是否显示地址栏
• status：是否显示状态栏

生成二维码 ​

依赖 2.webclown.net

1. 打开页面
2. 点击书签栏中的 生成二维码
3. 自动打开新窗口，显示二维码

javascript: (function () {
    var baseUrl = 'http://2.webclown.net/?';
    var url = baseUrl + 'url=' + encodeURIComponent(location.href);
    window.open(url);
})();

快速使用示例代码： 拖拽 ta 到 书签栏 👉 生成二维码

复制转载信息 ​

1. 点击书签栏中的 复制转载信息
2. 自动复制内容到剪切板

javascript: (function () {
    navigator.clipboard.writeText('[' + document.title + '](' + window.location.href + ')');
})();

快速使用示例代码： 拖拽 ta 到 书签栏 👉 复制转载信息

生成短网址 ​

1. 点击书签栏中的 生成短网址
2. 自动复制内容到剪切板

javascript: !(function () {
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");

    var raw = JSON.stringify({
      longUrl: window.location.href,
    });

    var requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: raw,
      redirect: "follow",
    };

    fetch("https://00s.top/api/shorten", requestOptions)
      .then((response) => response.json())
      .then((result) => {
        if (result.shortUrl) {
          const link = "https://00s.top/" + result.shortUrl;
          const dialog = document.createElement("dialog");
          dialog.innerHTML =
            "<div class='position: fixed;top: 1em;right: 1em;background: #fff;'><p style='text-align: center; padding: 1em; background: #1d91eb; color: #fff;'>短网址已生成：（自动复制）</p><p style='padding: 1em;'>" +
            link +
            "</p></div>";
          document.body.appendChild(dialog);
          dialog.showModal();
          navigator.clipboard.writeText('[' + document.title + '](' + link + ')');
          setTimeout(() => dialog.close(), 2000);
        }
      })
      .catch((error) => {
          const dialog = document.createElement("dialog");
          dialog.innerHTML =
            "<div class='position: fixed;top: 1em;right: 1em;background: #fff;'><p style='text-align: center; padding: 1em; background: #1d91eb; color: #fff;'>生成失败</p><p style='padding: 1em;'>当前站点禁止使用书签脚本，请访问：https://00s.top 生成。</p><form method='dialog'><button>关闭</button></form></div>";
          document.body.appendChild(dialog);
          dialog.showModal();
      });
})();

需要先设置修改一下 nuxt.config.js 文件，添加 viewport 配置：

// nuxt.config.js
/**
 * 更多配置请参考
 * https://nuxt.com/docs/api/configuration/nuxt-config
 */
export default {
  // ...
  head: {
    meta: [
      { name: "viewport", content: "width=device-width, initial-scale=1" }, // 根据自己的需求修改
    ],
  },
};

更多关于 viewport 的内容可以参考 MDN。

创建自定义插件 ​

在项目根目录下创建 tailwind-plugin-safe-area.js 文件，内容如下：

// tailwind-plugin-safe-area.js

module.exports = function ({ addUtilities }) {
  const newUtilities = {
    ".safe-top": {
      paddingTop: "constant(safe-area-inset-top)",
      paddingTop: "env(safe-area-inset-top)",
    },
    ".safe-left": {
      paddingLeft: "constant(safe-area-inset-left)",
      paddingLeft: "env(safe-area-inset-left)",
    },
    ".safe-right": {
      paddingRight: "constant(safe-area-inset-right)",
      paddingRight: "env(safe-area-inset-right)",
    },
    ".safe-bottom": {
      paddingBottom: "constant(safe-area-inset-bottom)",
      paddingBottom: "env(safe-area-inset-bottom)",
    },
  };

  addUtilities(newUtilities);
};

配置 Tailwind ​

tailwind.config.js ​

在 tailwind.config.js 中添加插件配置：

// tailwind.config.js

module.exports = {
  // ...
  plugins: [
    require("./tailwind-plugin-safe-area.js"),
  ],
};

tailwind.css ​

/* tailwind.css */

@tailwind base;
@tailwind components;
@tailwind utilities; // 这一行是需要的，如果没有则不生效

使用 ​

在需要使用的地方添加类名即可：

<div class="safe-top safe-left safe-right safe-bottom">
        <div class="bg-red-500">SafeArea</div>
</div>

验证是否生效 ​

参考 ​

• Tailwind CSS
• Tailwind CSS - Customizing plugins
• Viewport meta tag
• env()
• User Agent properties and variables
• [Apple] Adaptivity and Layout

兼容性注意

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

Vite&Vue ​

https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project

PROJECT_FOLDER=vite4-vue3-antdv4-tailwind-starter && pnpm create vite $PROJECT_FOLDER --template vue-ts && cd $PROJECT_FOLDER && pnpm install

# PROJECT_FOLDER=vite4-vue3-antdv4-tailwind-starter
# pnpm create vite $PROJECT_FOLDER --template vue-ts
# cd $PROJECT_FOLDER
# pnpm install

tailwindcss ​

https://tailwindcss.com/docs/guides/vite#vue

pnpm add -D tailwindcss postcss autoprefixer && npx tailwindcss init -p

# 安装依赖 安装成功之后会初始化 postcss.config.js
# pnpm add -D tailwindcss postcss autoprefixer
# 生成 tailwind.config.js
# npx tailwindcss init -p

编辑 tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 指令添加到您的 CSS 中

echo "@tailwind base;
@tailwind components;
@tailwind utilities;" >> src/tailwind.css

> 向文件内写入数据，>> 向文件内追加，

main.ts

import { createApp } from 'vue'
import './tailwind.css'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

编辑器支持 ​

vscode

自动提示 ​

• Tailwind CSS IntelliSense

协同项目 推荐维护一下项目的 vscode 插件依赖 .vscode/extensions.json

{
  "recommendations": [
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    "bradlc.vscode-tailwindcss", // tailwindcss
  ]
}

使用 Prettier 自动进行类别排序 ​

node modules

• prettier-plugin-tailwindcss

pnpm add -D prettier prettier-plugin-tailwindcss

配置 .prettierrc.json

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

配置 .vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  }
}

antdv ​

pnpm add -S ant-design-vue@4.x @ant-design/icons-vue

按需加载

pnpm add -D unplugin-vue-components

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: 'src/types/components.d.ts', // 自动生成类型声明文件，默认为 ./components.d.ts
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),
  ],
})

vue-router ​

pnpm add -S vue-router@4.x

sass ​

pnpm add -D sass sass-loader

这个网站不错，可以生成不同格式的纸张类别：笔记本、康奈尔笔记、米字格、方格纸、网格纸、备忘录、漫画稿纸、五线谱、麦肯锡笔记等。

• Microsoft数学求解器-数学问题求解器和计算器
• E字帖 - 免费字帖生成器
• 一份爱小工具-www.an2.net，我们专注于田字格字帖相关工具研发，田字格字帖生成器系列免费工具，自2013年上线以来，一致致力于为您提供更优质全面的字帖资源和更好的用户体验。

下面两种命名方式，在编辑器双击 button_height 全部选中，编辑器双击 button-height 不能全部选中，编辑器为什么这样设计？

1. button-height
2. button_height

在 页面仔 群问了一下，得到了答案：

linxz：因为 - 是连字符

linxz：从英文单词的角度去考虑，这里算是两个单词

linxz：而双击选中一般是选择单词，中文是选择词

连字符（hyphen） ​

牛津词典

• 将多个或更多的词组成复合词
  • hard-hearted（铁石心肠）
  • fork-lift truck（叉车）
  • mother-to-be（孕妇）
• 将前缀和转悠名词组成复合词
  • pre-Raphaelite（前拉斐尔派）
  • pre-European（欧洲前史）
• 书写21-99之间的复合数字时
  • seventy-three（73）
  • thirty-one（31）
• 有时用在英式英语中用以将以元音结尾的前缀与以相同元音开始的词隔开
  • co-operate（合作）
  • pre-eminent（卓越的）
• 转行时用于单词的前半部分之后

下划线（underscore） ​

在 牛津词典 中 这个不算标点符号，在这个单词 underscore 的释义下说明：下划线、底线，用于字母下划线或计算机命令和互联网网址中。

在计算机中，一般用于不允许出现空格的地方，比如：

• 文件名
  • The_Dark_Knight_2008_1080p.mkv
• 变量名
  • const MAX_LENGTH = 100;
• 函数名
  • function get_user_info() {}
• 等等

拓展 ​

如何配置编辑器（Visual Studio Code），使得双击 button-height 全部选中？

1. 打开 settings.json 文件

2. 添加/编辑如下配置

   json

   {
       ...
       // "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?", // 默认配置，去掉 -
       "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
       ...
   }

3. 保存配置文件，即可

更多配置阅读查看：Visual Studio Code User and Workspace Settings

参考 ​

1. 如何使用英文连字符 - Wordvice Blog
2. Underscore | Punctuation | Grammar | Glossary | Ultius
3. Underscore - Wikipedia
4. underscore, n. meanings, etymology and more | Oxford English Dictionary
5. 牛津词典

element-plus el-button 增加 v-blur 指令 ​

背景 & 问题 ​

解决点击按钮后，触发 el-dialog 等弹窗组件的显示交互，弹窗隐藏之后，按钮的 focus 依然存在的问题。

🤔 思考：这个属于正常的交互，可以理解为：用户点击的哪里触发的这个弹窗，弹窗隐藏之后，用户的焦点应该回到点击的地方。

如果产品经理要求，弹窗隐藏之后，隐藏的按钮不要 focus，那么就需要增加一个指令来解决这个问题。

解决方案 ​

1、在项目中新增一个指令文件 src/directives/blur/index.ts，内容如下：

src/directives/blur/index.ts

import { Directive } from "vue";

export const blur: Directive = {
  mounted(el) {
    if (!el) return;
    /**
     * 是否是点击触发的 blur
     *  - 点击触发 blur 时，不触发 focus
     *  - 非点击触发 blur 时，触发 focus
     */
    let isClick = false;
    el.addEventListener("click", () => {
      isClick = true;
    });
    el.addEventListener("focus", () => {
      if (isClick) {
        el.blur();
      }
    });
    el.addEventListener("blur", () => {
      isClick = false;
    });
  }
};

2、在 main.ts 中引入该指令：

main.ts

import App from "./App.vue";
import { createApp } from "vue";

import { blur } from "./directives/blur";

const app = createApp(App);

// ...

app.directive("blur", blur);

app.mount("#app");

3、在需要使用的地方，使用 v-blur 指令即可：

<script setup lang="ts">
defineOptions({
  name: "Demo"
});

const showDialog = () => {
  // ...
};
</script>

<template>
  <div class="demo">
    <el-button v-blur @click="showDialog">添加</el-button>
  </div>
</template>

<style lang="scss" scoped>
// ...
</style>

最终方案（2023-08-03 更新） ​

使用 css 覆盖即可解决：

.el-button:focus-visible {
  outline: 0;
}

ELIFECYCLE  Command failed with exit code 129.

大概率是因为 stylelint 规则配置有问题，排查了好久，最后因为一个element-plus的一个变量命名导致的。

src/components/TableHeader/base/filterButton.vue
 288:16  ✖  Expected custom property name "--el-dropdown-menuItem-hover-color" to be kebab-case  custom-property-pattern

排查过程中，stylelint 始终输出这个行报错，经过以下步骤排查，最终定位到问题：

1. 删除 node_modules，重新安装依赖
2. 删除 pnpm-lock.json，重新安装依赖
3. 删除 .cache，重新安装依赖
4. 查看 stytlelint 最新是否有新版本更新，确实有，更新到最新版本
5. 重新执行 stylelint，报错信息出现

Link Preview是指鼠标移动到一个超链接上，会自动显示该链接的标题、描述、图片等信息，如下图所示：

当我们在浏览维基百科时，会发现在发送维基百科的链接时，会自动显示维基百科的标题、描述、图片等信息，这就是Link Preview的效果。效果有点类似，标签的 title 属性，但是Link Preview的效果更加丰富，而且不需要等待太长时间。

也是最近逛推的时候，发现了这个网站：Cali Castle，增加了这个功能，大概实现是一个get请求返回了一张图片，然后在页面上显示了这张图片，这个图片就是Link Preview的效果。

2. 如何实现 ​

Keystion/link-preview-api

3. 本地开发 ​

• chrome-aws-lambda
• puppeteer

4. 部署 ​

这里提供了两种部署方式：Vercel、阿里云；因为我在Vercel上部署的时候，发现内存不足 ^[问题1] ，部分功能受到限制，所以就在阿里云上部署了。

4.1 部署到Vercel（待更新） ​

需要注意的是， Vercel 的免费版，内存有限制，我们只能实现基本的功能，访问日志和缓存截图文件 ^[1] ：

4.2 部署到阿里云ECS ​

4.2.1 安装依赖 ​

我的服务器是阿里云的ECS，系统是CentOS Linux release 7.9.2009，安装以下依赖：

• alsa-lib.x86_64
• atk.x86_64
• cups-libs.x86_64
• gtk3.x86_64
• ipa-gothic-fonts
• libXcomposite.x86_64
• libXcursor.x86_64
• libXdamage.x86_64
• libXext.x86_64
• libXi.x86_64
• libXrandr.x86_64
• libXScrnSaver.x86_64
• libXtst.x86_64
• pango.x86_64
• xorg-x11-fonts-100dpi
• xorg-x11-fonts-75dpi
• xorg-x11-fonts-cyrillic
• xorg-x11-fonts-misc
• xorg-x11-fonts-Type1
• xorg-x11-utils

yum install -y alsa-lib.x86_64 atk.x86_64 cups-libs.x86_64 gtk3.x86_64 ipa-gothic-fonts libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXrandr.x86_64 libXScrnSaver.x86_64 libXtst.x86_64 pango.x86_64 xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-fonts-cyrillic xorg-x11-fonts-misc xorg-x11-fonts-Type1 xorg-x11-utils

安装依赖项后，您需要使用此命令更新 nss 库

yum update nss -y

参见官方文档：Chrome doesn't launch on Linux。

需要安装依赖，否则会报一些奇怪的错误 ^[问题2] 。

4.2.2 执行部署 ​

把代码上传到服务器。安装依赖：

阿里云上安装依赖，需要使用淘宝的镜像源，否则会报错，安装依赖：

cnpm install

测试代码是否可以正常运行：

node index.js
> Server is start 9000.

打开一个新的终端，测试接口是否正常：

curl http://localhost:9000/api?url=https://webclown.net

注意这里返回的是一个图片实体文件，终端输出内容比较多。

配置nginx，配置文件如下：

server {
    listen       80;
    server_name  webclown.com;

    location /api {
        proxy_pass http://localhost:9000;
        proxy_redirect http://localhost:9000 https://webclown.net;
    }
}

如果真正用于生成环境，设置防盗链功能，防止被恶意盗用，简单的防盗链可以以 referer、user Agent 为条件，设置防盗链，如下所示：

server {
    ...
    location /api {
        # 如果 reffer 不是 webclown.net 则返回 403
        if ($http_referer !~* (webclown.net)) {
            return 403;
        }
        # 如果没有 ua 则返回 403
        if ($http_user_agent = "") {
            return 403;
        }
        proxy_pass http://localhost:9000;
        proxy_redirect http://localhost:9000 https://webclown.net;
    }
    ...
}

问题 ​

• 问题1：Vercel 内存不足，无法正常运行。 Error: Runtime exited with error: exit status 1 Runtime.ExitError
• 问题2：阿里云上，无法正常运行，没有安装依赖。 error while loading shared libraries: libatk-bridge-2.0.so.0: cannot open shared object file: No such file or directory

注： ​

1. 缓存截图文件：以链接的上的query参数的 md5 作为文件名，生成缓存截图文件，加快访问速度，这里也只是简单的实现，不考虑文件的持久化储存、定时清理等边界功能，这是一个复杂的点，这里不展开说明。

参考资料： ​

1. Express
2. Vercel
3. Puppeteer
4. alixaxel / chrome-aws-lambda
5. Chrome doesn't launch on Linux
6. Cali Castle
7. michaelkitas / Puppeteer-Vercel

https://tradingeconomics.com/

世界银行 ​

https://www.worldbank.org/en/home

Our World in Data ​

https://ourworldindata.org/

OECD ​

https://data.oecd.org/

IMF ​

https://www.imf.org/en/Data

中国统计局 ​

http://www.stats.gov.cn/

TIPS ​

尽可能查找一手信息，一手信息的价值远远大于二手信息。

• 一个国家数据
  • GDP
  • CPI
  • 就业率
  • ......
• 一个公司
  • 公司年报
  • 创始人访谈
  • ......

目的 ​

二次开发 或 贡献代码（Contribution）

准备 ​

• 系统：macOS Ventura 13.3.1 (22E261)（M1 Pro）
• git
• make
• docker & docker-compose
• nodejs

开始 ​

参照官方文档：Setting Up Your Development Environment

1、克隆仓库

git clone git@github.com:photoprism/photoprism.git

cd photoprism

2、启动本地开发环境

make docker-build

docker compose up

# 或 后台进程
# docker compose up -d

3、安装依赖

make terminal

make dep

make build-js

make build-go

./photoprism start

完成 ​

执行到这一步基本上就完成。

• http://localhost:2342
• https://localssl.dev

账号密码去 docker-compose.yml 文件里面环境变量（environment）处寻找。

• 账号KEY： PHOTOPRISM_ADMIN_USER
• 密码KEY： PHOTOPRISM_ADMIN_PASSWORD

遇见问题 ​

问题一：docker compose up 无法正常安装 tensorflow lib 库 ​

执行 docker compose up 时有一个步骤需要安装 tensorflow lib 库，我这边碰见一个问题是，

安装了一个不存在的版本：https://dl.photoprism.app/tensorflow/arm64/libtensorflow-arm64-auto-1.15.2.tar.gz，连接上多了一个 auto。

正确版本应该是：https://dl.photoprism.app/tensorflow/arm64/libtensorflow-arm64-1.15.2.tar.gz

修改一下这个文件的68行: scripts/dist/install-tensorflow.sh:68，删除选中的代码即可。

是否正确，需要去这个网站查看下是否有对应的源文件：https://dl.photoprism.app/tensorflow/arm64

问题二：make build-go 安装慢 ​

make build-go 安装慢，可以设置代理（阿里云）：

export GO111MODULE=on
export GOPROXY=https://mirrors.aliyun.com/goproxy/
make build-go

规则：如果文件夹有@，则表示有ACL权限。

xattr -c <finder>

示例：

> ll
drwxr-xr-x@ 14 yantao  admin   448B  4 17 01:38 code
> xattr -c code
> ll
drwxr-xr-x  14 yantao  admin   448B  4 17 01:38 code

+ ​

规则：如果文件夹有+，则表示有ACL权限或者有扩展属性。

chmod -N <finder>

示例：

> ll
drwxr-xr-x+   5 yantao  admin     170 Oct  5 03:43 Desktop
drwxr-xr-x+  17 yantao  admin     578 Sep 25 22:20 Documents
> chmod -N ~/Destop
> ll
drwxr-xr-x    5 yantao  admin     170 Oct  5 03:43 Desktop
drwxr-xr-x+  17 yantao  admin     578 Sep 25 22:20 Documents

一些资料 ​

• What is the "+" mark at the end of file description?